/* 유리 + 찰흙 (리퀴드글래스 + 클레이모피즘)

   site.css 뒤에 얹어 생김새만 바꾼다. 선택자는 그대로라서, 틀어지면 이
   파일을 부르는 한 줄만 빼면 예전 모습으로 돌아간다.

   큰 칸은 유리(뒤가 비친다), 버튼은 찰흙(도톰하게 떠 있다).
   밝기는 <html data-theme="dark|light"> 로 바꾼다. */

:root[data-theme="dark"]{
  --bg:#0a0d1a; --bg2:#151b35; --bg3:#1d1333;
  --panel:rgb(28 42 72 / .34);
  --panel2:#2b3350;
  --line:rgb(255 255 255 / .2);
  --tx:#eef2fb; --dim:#9aa6c4;
  --pink:#ff57ae; --cyan:#4fdcf2;
  --glass-top:rgb(255 255 255 / .34);
  --glass-bot:rgb(6 14 32 / .26);
  --glass-shadow:0 20px 48px rgb(3 8 22 / .5), 0 2px 10px rgb(3 8 22 / .36);
  --sheen:rgb(255 255 255 / .18);
  --clay-hi:#3b456b;
  --clay-out:6px 6px 14px rgb(8 11 22 / .55), -4px -4px 12px rgb(70 82 125 / .3);
  --clay-press:2px 2px 6px rgb(8 11 22 / .5), inset 0 4px 9px rgb(0 0 0 / .35);
  --field:rgb(10 16 32 / .55);
}
:root[data-theme="light"]{
  --bg:#e9eef8; --bg2:#dfe7f6; --bg3:#f3ecf9;
  --panel:rgb(255 255 255 / .62);
  --panel2:#e9edfa;
  --line:rgb(255 255 255 / .9);
  --tx:#17203a; --dim:#4e5a78;
  --pink:#e42b8f; --cyan:#0f8fb0;
  --glass-top:rgb(255 255 255 / .95);
  --glass-bot:rgb(120 140 180 / .16);
  --glass-shadow:0 16px 40px rgb(90 110 150 / .2), 0 2px 8px rgb(90 110 150 / .12);
  --sheen:rgb(255 255 255 / .4);
  --clay-hi:#ffffff;
  --clay-out:6px 6px 15px rgb(166 177 204 / .55), -5px -5px 13px rgb(255 255 255 / .95);
  --clay-press:2px 2px 6px rgb(166 177 204 / .6), inset 0 4px 9px rgb(130 145 180 / .3);
  --field:rgb(255 255 255 / .72);
}

/* ═══════════ 바탕 ═══════════ */
body{
  background:
    radial-gradient(58% 52% at 12% 6%, color-mix(in srgb, var(--pink) 30%, transparent), transparent 62%),
    radial-gradient(52% 48% at 90% 18%, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 62%),
    radial-gradient(68% 62% at 50% 99%, color-mix(in srgb, #7c3aed 36%, transparent), transparent 62%),
    linear-gradient(160deg, var(--bg), var(--bg2) 55%, var(--bg3));
  background-attachment:fixed;
}
section{border-top:1px solid var(--line)}

/* ═══════════ 유리 ═══════════ */
header{
  background:var(--panel);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(170%) brightness(106%);
  backdrop-filter:blur(18px) saturate(170%) brightness(106%);
  box-shadow:0 8px 28px rgb(3 8 22 / .25)}
.stat, .feat, .plan, .form, .box, table{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  -webkit-backdrop-filter:blur(16px) saturate(165%) brightness(106%);
  backdrop-filter:blur(16px) saturate(165%) brightness(106%);
  box-shadow:var(--glass-shadow), inset 1px 1px 0 var(--glass-top),
    inset -1px -1px 0 var(--glass-bot)}
table{border-collapse:separate;border-spacing:0;overflow:hidden;padding:4px}
th, td{border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
.plan.best{border-color:color-mix(in srgb, var(--pink) 60%, transparent);
  background:color-mix(in srgb, var(--pink) 10%, var(--panel))}
.box.warn{border-color:color-mix(in srgb, var(--pink) 55%, transparent);
  background:color-mix(in srgb, var(--pink) 9%, var(--panel))}

/* ═══════════ 찰흙 ═══════════ */
.cta{
  border:0;border-radius:20px;
  color:#fff;font-weight:800;
  background:linear-gradient(180deg,#ff8ccd,#f0569f 55%,#d8277f);
  box-shadow:0 10px 24px rgb(240 86 159 / .45),
    inset 0 2px 0 rgb(255 255 255 / .5), inset 0 -4px 9px rgb(0 0 0 / .2);
  transition:transform .13s, box-shadow .13s, filter .2s}
.cta:hover{filter:brightness(1.07)}
.cta:active{transform:translateY(3px);
  box-shadow:0 3px 10px rgb(240 86 159 / .4), inset 0 4px 10px rgb(0 0 0 / .28)}
.cta.ghost{
  color:var(--tx);
  background:linear-gradient(180deg, var(--clay-hi), var(--panel2));
  box-shadow:var(--clay-out), inset 0 1px 0 rgb(255 255 255 / .2)}
.cta.ghost:active{transform:translateY(3px);box-shadow:var(--clay-press)}
.nav a{border-radius:14px;color:var(--dim);transition:background .2s, color .2s}
.nav a:hover, .nav a.on{color:var(--tx);
  background:linear-gradient(180deg, var(--clay-hi), var(--panel2));
  box-shadow:4px 4px 10px rgb(8 11 22 / .35), -3px -3px 9px rgb(70 82 125 / .22)}
:root[data-theme="light"] .nav a:hover,
:root[data-theme="light"] .nav a.on{
  box-shadow:4px 4px 10px rgb(166 177 204 / .5), -3px -3px 9px rgb(255 255 255 / .95)}
.tag{box-shadow:0 6px 14px rgb(240 86 159 / .45), inset 0 1px 0 rgb(255 255 255 / .45)}

input, select{
  background:var(--field);border:1px solid var(--line);border-radius:14px;
  color:var(--tx);
  box-shadow:inset 2px 2px 6px rgb(0 0 0 / .18), inset 0 -1px 0 var(--glass-top)}
:root[data-theme="light"] input,
:root[data-theme="light"] select{
  box-shadow:inset 3px 3px 7px rgb(170 180 205 / .5), inset -2px -2px 5px rgb(255 255 255 / .9)}
input:focus, select:focus{
  outline:2px solid color-mix(in srgb, var(--pink) 70%, transparent);outline-offset:1px}
.fill{background:color-mix(in srgb, var(--pink) 14%, transparent);
  border:1px dashed var(--pink);color:var(--pink)}

/* ═══════════ 밝기 스위치 ═══════════ */
.themesw{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:700;color:var(--dim);white-space:nowrap}
.themesw b{color:var(--tx)}
.themebtn{width:54px;height:29px;border-radius:99px;border:0;cursor:pointer;
  position:relative;padding:0;
  background:linear-gradient(180deg,#8b7bff,#6a56f0);
  box-shadow:inset 0 3px 6px rgb(0 0 0 / .3), 0 4px 11px rgb(80 60 220 / .38)}
.themebtn i{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#dfe7f2);
  box-shadow:0 3px 8px rgb(0 0 0 / .38), inset 0 -2px 4px rgb(120 135 170 / .32);
  transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
:root[data-theme="light"] .themebtn i{transform:translateX(25px)}

footer{border-top:1px solid var(--line)}
td.bad{color:var(--dim)}
td.good{color:var(--tx)}

/* ═══════════ 글씨 크기 ═══════════
   16px 이 너무 작다고 하셔서 110% 로 올렸다. 치수가 전부 px 이라 글자만
   키우면 상자가 안 따라오므로, 통째로 1.1 배 한다. 상자·여백·그림자가
   같은 비율로 커져 비례가 안 깨진다. */
body{zoom:1.1}