:root{
  --paper:#F4F2F0; --ink:#111111; --dim:#5B5C66; --faint:#8E909B; --line:#111111;
  --lime:#D3FF30; --wrong:#C2410C; --maxw:520px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);min-height:100dvh;
  font-family:Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
  letter-spacing:-.02em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit;-webkit-user-select:none;user-select:none}
button{background:none;border:0;cursor:pointer;touch-action:manipulation}

/* 진행 막대 */
.bar{position:fixed;inset:0 0 auto;height:4px;background:transparent;z-index:5}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .35s cubic-bezier(.2,.8,.2,1)}

main{max-width:var(--maxw);margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 22px 0}
.scr{display:none;flex-direction:column;align-items:center;min-height:100dvh;padding-bottom:120px}
.scr.on{display:flex;animation:in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.pill{border:1.5px solid var(--line);border-radius:999px;padding:5px 14px 4px;font-size:15px;font-weight:700;margin-top:8px}

/* 표지 */
.kicker{margin-top:26px;font-size:19px;font-weight:600}
/* 부제 형광펜은 2026에만 걸리면 어색해서 뺐다(유저 지시) */
h1{margin-top:4px;font-size:clamp(46px,14vw,64px);font-weight:900;letter-spacing:-.05em;line-height:1.05}
.dbl{width:100%;border:0;height:7px;margin:18px 0 20px;border-top:3px solid var(--line);border-bottom:1.5px solid var(--line)}
.frame{width:100%;border:1.5px solid var(--line);background:#fff;line-height:0}
.frame img{width:100%;height:auto}
.meta{width:100%;margin-top:16px;border-top:1px solid var(--line)}
.meta div{display:flex;border-bottom:1px solid var(--line);font-size:14.5px}
.meta dt{flex:0 0 84px;padding:10px 12px;font-weight:700;border-right:1px solid var(--line)}
.meta dd{padding:10px 12px;color:#333}

/* 하단 고정 버튼 */
.dock{position:fixed;left:0;right:0;bottom:0;padding:14px 22px max(16px,env(safe-area-inset-bottom));
  background:linear-gradient(rgba(244,242,240,0),var(--paper) 30%);display:flex;justify-content:center;z-index:4}
.cta{display:block;width:100%;max-width:calc(var(--maxw) - 44px);padding:17px 0;border-radius:999px;
  background:var(--ink);color:#fff;font-size:17px;font-weight:800;text-align:center;text-decoration:none}
.cta:active,.sub:active,.ch:active{transform:scale(.98)}
.cta[hidden]{display:none}

/* 문제 */
.sect{margin-top:28px;font-size:14px;font-weight:600;color:var(--faint)}
.q{margin-top:10px;font-size:21px;font-weight:800;line-height:1.48;letter-spacing:-.035em;text-align:center;word-break:keep-all}
.choices{width:100%;margin-top:30px;display:flex;flex-direction:column;gap:10px}
.choices.ox{flex-direction:row}
.ch{position:relative;width:100%;min-height:56px;padding:14px 18px;border:1.5px solid var(--line);border-radius:999px;
  background:#fff;font-size:16.5px;font-weight:600;line-height:1.35;word-break:keep-all;transition:background .15s,opacity .2s}
.choices.ox .ch{min-height:112px;border-radius:20px;font-size:44px;font-weight:800}
.choices.ox .ch.txt{font-size:19px}
.ch .n{margin-right:6px;font-weight:800}
/* 객관식 — 왼쪽 정렬, 맨 숫자 + 세로 구분선 번호 칸(B안). 구분선 색은 테두리(오답 시 빨강)를 따른다 */
.choices:not(.ox) .ch{display:flex;align-items:center;text-align:left;padding:14px 18px 14px 0;border-radius:14px;overflow:hidden}
.choices:not(.ox) .ch .n{flex:0 0 48px;align-self:stretch;margin:-14px 14px -14px 0;display:grid;place-items:center;
  border-right:1.5px solid;border-right-color:inherit;font-size:16px;font-weight:800}
.ch.right{background:var(--lime)}
.ch.picked:not(.right){color:var(--wrong);border-color:var(--wrong)}
.ch.picked:not(.right) .lb{text-decoration:line-through;text-decoration-thickness:1.5px}
.choices.done .ch:not(.right):not(.picked){opacity:.35}
.choices.done .ch{pointer-events:none}

.exp{width:100%;margin-top:22px;padding:20px 20px 18px;background:#fff;border:1.5px solid var(--line);border-radius:4px;animation:in .3s cubic-bezier(.2,.8,.2,1)}
.exp[hidden]{display:none}
.verdict{font-size:15px;font-weight:800}
.verdict.no{color:var(--wrong)}
.ans{margin-top:6px;font-size:18px;font-weight:800}
.body{margin-top:10px;font-size:15.5px;line-height:1.7;color:#2B2B30;word-break:keep-all}
.ep{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--ink);text-underline-offset:3px}
.ep[hidden]{display:none}

/* 결과 */
#dcnt{font-style:normal;font-size:20px;font-weight:700;color:var(--faint);margin-left:4px}
#dcnt{font-size:14px}
.actions{width:100%;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.actions .cta{max-width:none}
.row{display:flex;gap:10px}
.sub{flex:1;padding:14px 0;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:15.5px;font-weight:700}
.sub.dark{background:var(--ink);color:#fff}
.sub:disabled{opacity:.5}
.txtbtn{align-self:flex-start;margin-top:4px;padding:6px 10px 6px 0;background:none;border:0;font-size:14.5px;font-weight:600;color:var(--dim);text-decoration:underline;text-underline-offset:3px}

/* 인증샷 미리보기 — 화면을 덮는 시트. 이미지는 길게 눌러 저장도 된다 */
.proof{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(17,17,17,.88)}
.proof[hidden]{display:none}
.proof-in{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
.proof-in img{width:100%;height:auto;max-height:68vh;object-fit:contain;background:var(--paper)}
.proof-tip{font-size:13.5px;color:#fff;text-align:center}
.wh{width:100%;margin-top:40px;padding-bottom:10px;border-bottom:3px solid var(--line);font-size:19px;font-weight:900}
.wrong{width:100%;list-style:none}
.wrong li{padding:18px 0;border-bottom:1px solid #D9D6D2}
.wrong .wq{font-size:15.5px;font-weight:700;line-height:1.55;word-break:keep-all}
.wrong .wa{margin-top:8px;font-size:15px;font-weight:800}
.wrong .wa mark{background:var(--lime);padding:0 3px}
.wrong .wm{margin-top:3px;font-size:14px;color:var(--wrong)}
.wrong .wb{margin-top:8px;font-size:14.5px;line-height:1.65;color:#3A3A40;word-break:keep-all}
.perfect{padding:18px 0;font-size:15px;color:var(--dim)}

.toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,10px);padding:10px 16px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:9}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 문제 화면은 시험지처럼 왼쪽 정렬 — 4~5줄짜리 지문이 가운데 정렬이면 읽기 힘들다 */
#s-quiz{align-items:stretch}
#s-quiz .pill{align-self:flex-start}
#s-quiz .q{text-align:left;font-size:20px}

/* 힌트 — 고난도 문제에만. 버튼 한 줄 → 누르면 그 자리에 한 줄 */
.hint{margin-top:16px}
.hint[hidden],.htxt[hidden],.hbtn[hidden]{display:none}
.tools{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tools:has(+ .htxt[hidden]){margin-bottom:0}
.hbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px 6px;border:1px dashed var(--line);border-radius:999px;
  font-size:14px;font-weight:700;background:transparent}
.hbtn::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.htxt{padding:12px 14px;border-left:3px solid var(--ink);background:#fff;font-size:15px;font-weight:600;line-height:1.55;word-break:keep-all;animation:in .25s cubic-bezier(.2,.8,.2,1)}
.htxt::before{content:"힌트  ";font-weight:800}

/* 친구 결과 공유 — ?s=점수 로 들어오면 표지 맨 위에 도전장 */
/* 친구 링크 첫 화면 — 성적표 표(A안). 표지 아래 메타 표와 같은 문법 */
.duel{width:100%;margin-top:18px;text-align:left}
.duel[hidden],.vs[hidden],#dpctrow[hidden]{display:none}
.duel .dk{padding-bottom:8px;border-bottom:3px solid var(--line);font-size:15px;font-weight:800}
.dtab{border-bottom:1.5px solid var(--line)}
.dtab div{display:flex;align-items:baseline;border-top:1px solid var(--line)}
.dtab div:first-child{border-top:0}
.dtab dt{flex:0 0 84px;padding:10px 12px;font-size:14.5px;font-weight:700;border-right:1px solid var(--line)}
.dtab dd{padding:10px 14px;font-size:15px}
.dtab dd b{font-size:22px;font-weight:900;letter-spacing:-.03em}

/* 부제(2026 미국주식 능력시험)는 한 줄 유지 — 320px 기기까지 */
.kicker{font-size:clamp(13px,4.3vw,19px);white-space:nowrap;letter-spacing:-.03em}

/* 랭킹 — 풀어본 사람 중 상위 % (응시자 수는 노출 안 함, 기록 없으면 숨김) */
.rank[hidden]{display:none}

/* 플친 하단 바 — 검은 바. 결과 화면에 들어오면 바로 보인다(× 닫기 전까지) */
#s-result{padding-bottom:96px}
.kbar{position:fixed;left:0;right:0;bottom:0;z-index:12;display:flex;align-items:center;padding:0 6px calc(env(safe-area-inset-bottom)) 0;
  background:var(--ink);border-top:1.5px solid var(--ink);color:#fff;transform:translateY(0);transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s}
.kbar[hidden]{display:flex;visibility:hidden;transform:translateY(110%);pointer-events:none}
.kbar a{flex:1;display:flex;align-items:center;gap:10px;padding:12px 4px 12px 16px;color:inherit;text-decoration:none;font-size:14.5px;font-weight:700}
.kbar svg{flex:0 0 20px;height:20px;fill:currentColor}
.kbar span{flex:1;line-height:1.3}
.kbar small{display:block;font-size:12.5px;font-weight:500;color:#A9AAB2}
/* 「플친 추가」 배지·× 닫기는 뺐다(10/3) — 오른쪽 라임 원 화살표 하나로 「누르면 간다」를 알린다. 화살표가 가끔 앞으로 툭 나간다 */
.kgo{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-right:8px;border-radius:50%;background:var(--lime)}
.kgo svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,60%,100%{transform:none}75%{transform:translateX(4px)}}
.kbar a:active .kgo{transform:scale(.92)}
.kx{width:36px;height:36px;border:0;background:none;color:#A9AAB2;font-size:22px;line-height:1}

/* 계산기 — 아래에서 올라오는 시트. 배경을 덮지 않아 지문을 보면서 계산한다 */
/* 계산 문제에만 힌트 줄 오른쪽 끝에 뜨는 계산기 아이콘(10/3 문제 번호 옆에서 내림) */
.qtop{display:flex;align-items:center;align-self:stretch;margin-top:8px}
.qtop .pill{margin-top:0}
.cicon{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.cicon[hidden]{display:none}
/* 처음 나오는 계산 문제에서 아이콘 왼쪽에 둥둥 떠 있는 말풍선 */
.tools .ctip{margin-left:auto}
.tools .ctip[hidden]+.cicon{margin-left:auto}
.ctip{position:relative;margin-right:12px;padding:6px 11px 5px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:800;white-space:nowrap;animation:bob 1.6s ease-in-out infinite}
.ctip::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-5px;border-left:7px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ctip[hidden]{display:none}
@keyframes bob{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
.cicon:active{transform:scale(.94)}
.calc{position:fixed;left:0;right:0;bottom:0;z-index:14;max-width:var(--maxw);margin:0 auto;padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;border-radius:16px 16px 0 0;animation:up .25s cubic-bezier(.2,.8,.2,1)}
.calc[hidden]{display:none}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.calc-hd{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:800;color:#A9AAB2}
.calc-expr{display:block;min-height:20px;margin-top:6px;text-align:right;font-size:15px;color:#A9AAB2;word-break:break-all}
.calc-out{display:block;margin:0 0 8px;text-align:right;font-size:30px;font-weight:900;letter-spacing:-.03em;word-break:break-all}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ck{height:42px;border:0;border-radius:12px;background:#2A2A2E;color:#fff;font-size:21px;font-weight:700}
.ck.op{background:#3A3A40}
.ck.eq{grid-row:span 2;height:auto;background:#fff;color:var(--ink)}
.ck.zero{grid-column:span 2}
.ck:active{transform:scale(.96)}

/* 쉬어가기 카드 */
/* 응원 — 6·11·16번에서 화면 오른쪽 맨 아래 개미(좌향) + 왼쪽 먹 말풍선(제목 라임/본문 흰색 2줄). 답을 고르면 사라진다 */
/* 개미 렌더 배경 = --paper 라 누끼·테두리 없이 그대로 얹는다 */
.cheer{position:fixed;right:max(10px,calc((100vw - var(--maxw)) / 2 + 10px));bottom:calc(8px + env(safe-area-inset-bottom));z-index:12;
  display:flex;align-items:flex-end;pointer-events:none;transition:opacity .25s,transform .25s}
.cheer[hidden]{display:none}
.cheer.out{opacity:0;transform:translateY(16px)}
.bubble{position:relative;z-index:1;margin:0 4px 80px 0;padding:11px 15px 12px;border-radius:16px;background:var(--ink);
  white-space:nowrap;line-height:1.35;letter-spacing:-.02em;color:#E9E9EC;font-size:14px;font-weight:500;
  transform-origin:100% 80%;animation:pop .42s cubic-bezier(.34,1.56,.64,1) .12s both,float 2.8s ease-in-out .6s infinite alternate}
.bubble b{display:block;font-size:15px;font-weight:800;color:var(--lime)}
/* 꼬리(z-index:1 — 개미 이미지의 바탕색 면이 꼬리를 덮지 않게): 말풍선과 같은 면의 뾰족한 삼각형 — 몸통에 2px 묻혀 이음새 없이 이어지고, 끝은 개미 쪽을 향해 살짝 내려간다 */
.bubble::after{content:'';position:absolute;left:calc(100% - 2px);bottom:12px;width:16px;height:18px;background:var(--ink);
  clip-path:polygon(0 0,100% 78%,0 100%)}
.cheer img{width:148px;height:148px;object-fit:contain;flex:none;transform-origin:50% 100%;
  animation:in .35s cubic-bezier(.2,.8,.2,1) both,sway 3.4s ease-in-out .4s infinite alternate}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.86)}to{opacity:1;transform:none}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes sway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}

/* 결과 화면 — 인증샷과 같은 시험지 문법. 전부 왼쪽 한 줄에 맞추고 굵기는 900/700/400 세 단계 */
#s-result{align-items:stretch}
.rkick{margin-top:20px;font-size:13px;font-weight:600;color:var(--faint);letter-spacing:-.01em}
.rtitle{margin-top:4px;padding-bottom:12px;border-bottom:2px solid var(--line);box-shadow:0 3px 0 var(--paper),0 4px 0 var(--line);font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.rsc{margin-top:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.score{display:flex;align-items:baseline;gap:4px}
.score b{font-size:68px;font-weight:900;letter-spacing:-.02em;line-height:.9}
.score span{font-size:26px;font-weight:700;color:var(--dim)}
.score i{margin-left:6px;font-style:normal;font-size:16px;font-weight:600;color:var(--faint)}
.rank{flex:none;padding-bottom:4px;text-align:right}
.rank small{display:block;font-size:12px;font-weight:500;color:var(--dim)}
.rank strong{display:inline-block;margin-top:2px;font-size:20px;font-weight:900;letter-spacing:-.01em;background:linear-gradient(transparent 58%,var(--lime) 58%)}
.vs{margin-top:12px;font-size:15px;font-weight:500;color:var(--dim)}
.vs b{font-weight:800;color:var(--ink)}
.grade{position:relative;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);min-height:250px}
.gbadge{display:inline-block;padding:3px 7px 2px;background:var(--ink);color:var(--lime);font-size:12px;font-weight:800}
.gname{margin-top:10px;font-size:36px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.gline{position:relative;z-index:1;margin-top:20px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.gbody{position:relative;z-index:1;margin-top:8px;width:calc(100% - 110px);font-size:15px;line-height:1.6;color:var(--dim);word-break:keep-all}
.gbody .nb{white-space:nowrap}
.gbody .sl{display:block;text-wrap:balance}
.gant{position:absolute;right:-6px;bottom:-4px;height:232px;width:auto}
.gant.t1{height:170px;bottom:0}
.gant.t4{right:-16px}

/* 첫 화면 시작 버튼 위를 걷는 서학개미 — 3D 모델 렌더 스프라이트(img/seohak_turn.webp)
   돌아서기 21컷(걷기는 옆모습 한 컷을 씰룩이며 옮김). 움직임은 walk.js */
/* 표지만은 버튼을 화면 바닥에 고정하지 않고 본문 흐름 맨 끝에 둔다 — 화면이 짧은 폰(인앱 브라우저 등)에서
   고정 버튼 위 개미·말풍선이 본문 글자와 겹쳐서(유저 제보). 화면이 넉넉하면 margin-top:auto 로 바닥에 붙어 보인다 */
#s-intro{min-height:calc(100dvh - max(28px,env(safe-area-inset-top)) + 8px);padding-bottom:0}
/* 아이폰 에어에서도 스크롤 없이 시작 버튼이 보이게: 「제 7 교시」 칩을 빼고 표지 여백·개미 크기를 조금씩 줄였다 */
#s-intro{margin-top:-8px}
#s-intro .kicker{margin-top:2px}
#s-intro .dbl{margin:14px 0 16px}
#s-intro .dock{position:static;width:100%;margin-top:auto;padding:144px 0 max(12px,env(safe-area-inset-bottom));background:none}
.launch{position:relative;width:100%;max-width:calc(var(--maxw) - 44px)}
.launch .cta{max-width:none}
.lane{position:absolute;left:0;right:0;bottom:100%;height:136px;pointer-events:none}
/* 멈춰서 이쪽을 볼 때만 말한다. 걸을 땐 접는다 */
.say{position:absolute;left:50%;bottom:calc(100% + 8px);padding:8px 13px 9px;border-radius:14px;background:var(--ink);
  white-space:nowrap;color:#fff;font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  opacity:0;transform:translate(-50%,6px) scale(.9);transform-origin:50% 100%;
  transition:opacity .18s ease-out,transform .22s cubic-bezier(.2,.8,.2,1)}
.say b{font-weight:800;color:var(--lime)}
.say::after{content:'';position:absolute;left:50%;top:calc(100% - 1px);width:14px;height:8px;margin-left:-7px;
  background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.say.on{opacity:1;transform:translate(-50%,0)}
.ant{position:absolute;left:0;bottom:-3px;will-change:transform}
.ant::before{content:'';position:absolute;left:16%;right:16%;bottom:-4px;height:9px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(17,17,17,.28),rgba(17,17,17,0))}
.ant i{position:relative;display:block;transform-origin:50% 100%;width:var(--fw);height:var(--fh);background:url(img/seohak_turn.webp?v=1) 0 0/var(--sw) var(--fh) no-repeat}

/* 문제당 제한 시간 — 시한폭탄 시계처럼 검은 칩에 라임 숫자. 5초 남으면 주황으로 깜빡 */
.tleft{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 11px;border-radius:999px;background:var(--ink);color:var(--lime)}
.tleft i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:tick 1s steps(1) infinite}
.tleft b{font-size:17px;font-weight:700;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.tleft.low{background:var(--wrong);color:#fff;animation:alarm .5s steps(1) infinite}
.tleft.stop,.tleft.stop i{animation:none}
@keyframes tick{50%{opacity:.25}}
@keyframes alarm{50%{opacity:.55}}