/* 꿈 바라기 — 흰색/다크 두 가지 테마 (html[data-theme="light"|"dark"]) */
:root{
  --primary:#0066cc; --primary-focus:#0071e3; --on-primary:#fff;
  --font:"SF Pro Text","SF Pro Display",system-ui,-apple-system,BlinkMacSystemFont,"Inter","Pretendard","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --r-sm:8px; --r-md:11px; --r-lg:18px; --r-pill:9999px;
  /* 라이트(기본) */
  --bg:#ffffff; --bg-alt:#f5f5f7; --card:#ffffff; --card-alt:#ffffff;
  --text:#1d1d1f; --sub:#6e6e73; --line:#e0e0e0; --link:#0066cc;
  --field:#ffffff; --chip:#fafafc; --track:#f0f0f0; --sum:#f5f5f7;
  --ok:#248a3d; --mid:#6a9a1f; --warn:#c77700; --bad:#d70015;
  --nav-bg:#000; --nav-text:#fff;
  /* 예전 변수 이름 호환 */
  --gold:var(--primary);
}
html[data-theme="dark"]{
  --bg:#000000; --bg-alt:#272729; --card:#272729; --card-alt:#2a2a2c;
  --text:#ffffff; --sub:#cccccc; --line:#ffffff29; --link:#2997ff;
  --field:#1d1d1f; --chip:#2a2a2c; --track:#3a3a3c; --sum:#1d1d1f;
  --ok:#30d158; --mid:#a6d94c; --warn:#ffb340; --bad:#ff6961;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.374px;transition:background .25s,color .25s}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px;margin:0 auto;padding:0 20px 64px}

/* 글로벌 네비게이션: 항상 순흑 44px */
header.top{position:sticky;top:0;z-index:10;background:var(--nav-bg);height:44px}
header.top .in{max-width:1024px;height:44px;margin:0 auto;padding:0 20px;display:flex;gap:4px;align-items:center;overflow-x:auto;scrollbar-width:none}
header.top .in::-webkit-scrollbar{display:none}
header.top .logo{color:var(--nav-text);font-weight:600;font-size:14px;letter-spacing:-.224px;margin-right:auto;white-space:nowrap}
header.top .logo:hover{text-decoration:none}
header.top a.nav{color:#ffffffcc;font-size:12px;letter-spacing:-.12px;padding:6px 10px;white-space:nowrap;border-radius:var(--r-pill)}
header.top a.nav:hover,header.top a.nav.on{color:#fff;text-decoration:none}
header.top a.nav.on{background:#ffffff26}
#examSel{flex:none;width:auto;max-width:200px;height:28px;margin-left:6px;padding:0 24px 0 10px;border-radius:var(--r-pill);border:0;background-color:#ffffff1f;color:#fff;font-size:12px;letter-spacing:-.12px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat}
#examSel option{color:#000}
#themeBtn{flex:none;width:32px;height:32px;margin-left:4px;padding:0;border-radius:50%;background:#ffffff1f;color:#fff;font-size:15px;line-height:1;border:0;cursor:pointer;display:grid;place-items:center}
#themeBtn:active{transform:scale(.95)}

/* 타일 섹션: 색 전환이 곧 구분선 */
.tile{padding:64px 20px;background:var(--bg)}
.tile.alt{background:var(--bg-alt)}
.tile>.in{max-width:980px;margin:0 auto}
.wrap h1{font-size:clamp(28px,5vw,40px);line-height:1.1;margin:32px 0 12px}
.hero{text-align:center;padding:72px 20px 56px}
.hero .star{font-size:56px;display:inline-block;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{transform:scale(1.1) rotate(8deg)}}
h1{font-size:clamp(30px,6vw,56px);font-weight:600;line-height:1.07;letter-spacing:-.28px;margin:.25em 0 .2em}
h2{font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.2px;margin:1.6em 0 .6em}
.lead{font-size:clamp(19px,3vw,28px);font-weight:400;line-height:1.2;color:var(--text);max-width:640px;margin:.4em auto 1.2em}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 버튼 */
button,.btn{font:inherit;font-size:17px;letter-spacing:-.374px;cursor:pointer;border:0;border-radius:var(--r-pill);padding:11px 22px;background:var(--primary);color:var(--on-primary);font-weight:400;display:inline-block;text-decoration:none;transition:transform .1s}
button:hover,.btn:hover{text-decoration:none;filter:brightness(1.06)}
button:active,.btn:active{transform:scale(.95)}
button:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px}
button.ghost,.btn.ghost{background:transparent;color:var(--link);box-shadow:inset 0 0 0 1px var(--link)}

/* 카드 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.tile.alt .card{background:var(--card-alt)}
html:not([data-theme="dark"]) .tile.alt .card{background:#fff}
a.card{display:block;color:var(--text);transition:transform .15s}
a.card:hover{transform:translateY(-3px);text-decoration:none}
.card .ic{font-size:30px}
.card b{display:block;margin:.4em 0 .1em;font-size:21px;font-weight:600;letter-spacing:.231px;line-height:1.19}
.card span{color:var(--sub);font-size:14px;letter-spacing:-.224px;line-height:1.43}
.note{font-size:14px;letter-spacing:-.224px;color:var(--sub);border-left:3px solid var(--primary);padding:8px 14px;background:var(--bg-alt);border-radius:0 var(--r-sm) var(--r-sm) 0;margin:16px 0}
html[data-theme="dark"] .note{background:var(--card)}
.meta{font-size:14px;letter-spacing:-.224px;color:var(--sub)}

/* 폼 */
label{display:block;font-size:14px;letter-spacing:-.224px;color:var(--sub);margin:0 0 6px}
input,select{font:inherit;font-size:17px;letter-spacing:-.374px;color:var(--text);width:100%;padding:11px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--field);appearance:none;-webkit-appearance:none}
input[type=text],input:not([type]),input[list]{border-radius:var(--r-pill)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:34px}
input::placeholder{color:var(--sub);opacity:.8}
input:focus,select:focus{outline:2px solid var(--primary-focus);outline-offset:0;border-color:transparent}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:12px 0}

/* 선택 칩: 알약 형태, 선택 시 2px 포커스 블루 테두리 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.chip{padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--chip);color:var(--text);font-size:14px;letter-spacing:-.224px;cursor:pointer;user-select:none}
.chip.on{border:2px solid var(--primary-focus);padding:7px 15px;font-weight:600}

/* 표·요약 */
table{width:100%;border-collapse:collapse;font-size:14px;letter-spacing:-.224px}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--sub);font-weight:400;width:46%}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:12px}
.sum div{background:var(--sum);border-radius:var(--r-lg);padding:16px 10px;text-align:center}
.sum b{display:block;font-size:28px;font-weight:600;letter-spacing:.196px;line-height:1.14}
.sum span{font-size:12px;letter-spacing:-.12px;color:var(--sub)}

/* 결과 항목 */
.item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;margin:12px 0}
.item .hd{display:flex;gap:12px;align-items:center;justify-content:space-between;cursor:pointer}
.item .nm{font-weight:600;font-size:17px}
.item .meta{font-size:13px}
.pct{font-weight:600;font-size:21px;letter-spacing:.231px;min-width:58px;text-align:right}
.bar{height:8px;border-radius:99px;background:var(--track);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;border-radius:99px}
.detail{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.item.open .detail{display:block}
.tier{display:flex;align-items:center;gap:10px;margin:32px 0 6px;flex-wrap:wrap}
.tier h2{margin:0}
.dot{width:12px;height:12px;border-radius:50%}
.empty{padding:40px 20px;text-align:center;color:var(--sub)}
.empty a{color:var(--link)}
footer{color:var(--sub);font-size:12px;letter-spacing:-.12px;text-align:center;padding:32px 20px;background:var(--bg-alt)}
html[data-theme="dark"] footer{background:var(--bg)}
svg text{fill:var(--sub)}
@media(max-width:640px){.tile{padding:48px 16px}.wrap{padding:0 16px 48px}}
@media(prefers-reduced-motion:reduce){.hero .star{animation:none}*{transition:none!important}}