/* 함수 3분 — 시험지, 빨간펜, 형광펜.
   종이 위에 인쇄한 것처럼: 문제는 명조, 나머지는 고딕. 색은 필기구에서만 옵니다.
   - 검정 잉크: 글과 누르는 것          - 빨간펜: 채점(동그라미, 빗금, 점수)
   - 형광펜: "여기를 보세요 / 답"       - 파란펜 등: 수식에 쓴 범위 표시
   그림자, 그라데이션, 이모지는 쓰지 않습니다. */
:root {
  --paper:#faf8f3; --card:#ffffff; --ink:#1b1b19; --mute:#75726a; --faint:#aaa69c; --line:#e4e0d6; --key:#f0ede5; --tray:#e8e4da;
  --pen:#e23d2e; --pen-soft:#fcebe8; --hi:#d6ff3f; --hi-soft:#f2ffc7; --bad:var(--pen); --bad-soft:var(--pen-soft);
  --sans:"Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --serif:"Gowun Batang", "Noto Serif KR", AppleMyungjo, "Nanum Myeongjo", Batang, serif;
  --hand:"Nanum Pen Script", "Gaegu", "Apple SD Gothic Neo", cursive;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad:22px; --st:env(safe-area-inset-top); --sb:env(safe-area-inset-bottom);
  --rh:31px; --kh:46px;                 /* 표의 행 높이, 글쇠 높이 */
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--paper); color:var(--ink); }
body { font-family:var(--sans); font-size:15px; line-height:1.55; word-break:keep-all; overflow-wrap:anywhere; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; touch-action:manipulation; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-user-select:none; user-select:none; }
#app { max-width:460px; margin:0 auto; min-height:100dvh; padding:calc(10px + var(--st)) var(--pad) 0; display:flex; flex-direction:column; overflow:clip; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
code, .code { font-family:var(--mono); font-size:.86em; font-weight:500; letter-spacing:-.02em; padding:.12em .34em; border-radius:6px; background:var(--key); white-space:nowrap; }
.spacer { flex:1; min-height:12px; }

/* ── 누르는 것 ── */
.go { display:block; width:100%; height:58px; border-radius:15px; background:var(--ink); color:#fff; font-weight:700; font-size:17.5px; letter-spacing:-.01em; transition:transform .08s; }
.go:active { transform:scale(.985); }
.go small { display:block; font-size:12.5px; font-weight:500; opacity:.66; margin-top:1px; letter-spacing:0; }
.go.alt { margin-top:8px; background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.cta { position:sticky; bottom:0; margin:auto calc(var(--pad) * -1) 0; padding:12px var(--pad) calc(16px + var(--sb)); background:var(--paper); }
.cta .go { height:auto; min-height:58px; padding:9px 0; }
.cta.in { margin-top:0; }
.quiet { display:block; width:100%; height:46px; margin-top:2px; color:var(--mute); font-weight:600; font-size:15px; }

/* ── 빨간펜으로 쓴 점수: 숫자 아래 두 줄 ── */
.num { position:relative; align-self:flex-start; margin:2px 0 0 -2px; padding:0 6px 14px 0; font-family:var(--hand); font-size:128px; line-height:.86; font-weight:400; color:var(--pen); letter-spacing:-.01em; }
.num span { font-family:var(--hand); font-size:.34em; color:var(--pen); margin-left:6px; letter-spacing:0; }
.num::after { content:""; position:absolute; left:0; right:0; bottom:0; height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 4c40-2 120-3 194 0M8 11c50-3 110-2 186 0' fill='none' stroke='%23e23d2e' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.stamp { position:absolute; left:calc(100% + 16px); top:10px; width:78px; height:78px; display:grid; place-items:center; border:2.5px solid var(--pen); border-radius:50%; color:var(--pen); font:700 19px/1 var(--serif); font-style:normal; letter-spacing:-.02em; transform:rotate(-13deg); }
.stamp::after { content:""; position:absolute; inset:4px; border:1px solid var(--pen); border-radius:50%; }
.lbl { margin:22px 0 0; font-size:13.5px; font-weight:700; color:var(--mute); }
.sub { margin:12px 0 0; font-size:15.5px; line-height:1.6; color:var(--mute); }

/* ── 첫 화면 ── */
.head { display:flex; align-items:center; justify-content:space-between; height:44px; }
.logo { display:flex; align-items:center; gap:8px; font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:-.02em; }
.logo i { width:22px; height:22px; display:grid; place-items:center; background:var(--hi); font:700 15px/1 var(--mono); font-style:normal; }
.dday { position:relative; display:flex; align-items:center; height:34px; padding:0 13px; border-radius:17px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font-size:13.5px; font-weight:700; }
.dday input { position:absolute; inset:0; width:100%; height:100%; opacity:0; -webkit-appearance:none; appearance:none; border:0; }
.seg { display:grid; grid-template-columns:1fr 1fr; margin-top:10px; border-bottom:1px solid var(--line); }
.seg button { padding:8px 0 10px; text-align:left; font-family:var(--serif); font-size:19px; font-weight:700; color:var(--faint); line-height:1.2; border-bottom:2.5px solid transparent; margin-bottom:-1px; }
.seg button small { display:block; font-family:var(--sans); font-size:11.5px; font-weight:500; margin-top:3px; letter-spacing:0; }
.seg button.on { color:var(--ink); border-color:var(--ink); }
.hero { margin:28px 0 0; font-family:var(--serif); font-size:34px; line-height:1.3; font-weight:700; letter-spacing:-.04em; }
.hero mark, .lead mark { color:inherit; background:linear-gradient(transparent 56%, var(--hi) 56%); padding:0 3px; margin:0 -3px; }
/* 채점한 시험지 한 장: 이 앱이 무엇인지 그림 하나로 */
.paper { position:relative; align-self:center; width:86%; margin:26px 0 0; padding:15px 18px 14px; background:var(--card); border:1px solid var(--line); transform:rotate(-2.2deg); }
.paper::before { content:""; position:absolute; inset:-1px; z-index:-1; background:var(--card); border:1px solid var(--line); transform:rotate(3.4deg); }
.paper p { margin:0; padding-right:64px; font-family:var(--serif); font-size:14.5px; font-weight:700; line-height:1.5; letter-spacing:-.03em; }
.paper ol { display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; margin:11px 0 0; padding:0; list-style:none; font-size:13px; font-weight:600; color:var(--mute); }
.paper li { display:flex; align-items:center; gap:8px; }
.paper li i { position:relative; width:19px; height:19px; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 1px var(--mute); font:700 10.5px/1 var(--serif); font-style:normal; }
.paper li.hit { color:var(--ink); }
.paper .mk { width:36px; height:36px; margin:-18px 0 0 -18px; stroke-width:3; }
.paper .pscore { position:absolute; right:14px; top:2px; font:400 46px/1 var(--hand); color:var(--pen); transform:rotate(-7deg); }
.paper .pscore::after { content:""; position:absolute; left:-2px; right:-4px; bottom:-5px; height:9px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 4c40-2 120-3 194 0M8 11c50-3 110-2 186 0' fill='none' stroke='%23e23d2e' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
@media (max-height: 610px) { .paper { display:none; } }
.explain, .nextup { margin-top:18px; padding:15px 17px; background:var(--card); border-radius:14px; box-shadow:inset 0 0 0 1px var(--line); }
.explain b { font-size:14px; } .explain p { margin:4px 0 0; font-size:14.5px; line-height:1.6; color:#45433d; }
.nextup span { display:block; font-size:12.5px; font-weight:700; color:var(--mute); }
.nextup b { display:block; margin-top:3px; font-family:var(--serif); font-size:20px; letter-spacing:-.03em; }
.nextup small { display:block; margin-top:3px; font-size:13.5px; color:var(--mute); }
details.more { margin-top:16px; }
details.more > summary { display:flex; align-items:center; justify-content:space-between; min-height:48px; font-size:14px; font-weight:700; color:var(--mute); list-style:none; cursor:pointer; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::after { content:"펼치기"; font-size:12.5px; font-weight:600; color:var(--faint); }
details.more[open] > summary::after { content:"접기"; }
details.more .got { margin-top:14px; }
h2.sec { display:flex; align-items:baseline; justify-content:space-between; margin:26px 0 0; font-family:var(--serif); font-size:16.5px; font-weight:700; letter-spacing:-.03em; }
h2.sec span { font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--mute); letter-spacing:0; }
.map { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:8px; background:var(--card); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.map.k3 { grid-template-columns:repeat(3, 1fr); }
.map .fn { height:40px; padding:0 2px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font:500 11px/1 var(--mono); letter-spacing:-.02em; color:var(--mute); overflow:hidden; white-space:nowrap; }
.map .fn.ko { font:600 12px/1 var(--sans); }
.map.tall .fn { height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; white-space:normal; line-height:1.1; }
.map .fn small { font:500 10.5px/1 var(--mono); color:var(--faint); }
.map .fn.s1 { background:var(--hi-soft); color:var(--ink); } .map .fn.s2 { background:var(--hi); color:var(--ink); font-weight:700; }
.map .fn.s1 small, .map .fn.s2 small { color:rgba(27,27,25,.55); }
.map .fn:active { background:var(--key); }
.cap { display:flex; align-items:center; gap:6px; margin:10px 0 0; font-size:12.5px; color:var(--mute); }
.cap i { width:11px; height:11px; background:var(--hi); } .cap i.s1 { background:var(--hi-soft); box-shadow:inset 0 0 0 1px var(--line); margin-left:8px; } .cap span { margin-left:auto; }
.row { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:66px; margin-top:22px; text-align:left; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.row b { display:block; font-size:16px; letter-spacing:-.01em; } .row small { display:block; font-size:13px; color:var(--mute); }
.row .rt { font-weight:700; font-size:14.5px; }
.row + .row { margin-top:0; border-top:0; }
.row.gain { min-height:58px; margin-top:0; border-top:0; }
h2.sec + .row.gain { margin-top:8px; border-top:1px solid var(--line); }
.row.gain .rt { font:400 24px/1 var(--hand); color:var(--pen); }
.note { margin:18px 0 0; font-size:12.5px; line-height:1.65; color:var(--mute); }
.linkish { align-self:flex-start; margin:4px 0 18px; height:36px; color:var(--mute); font-size:12.5px; text-decoration:underline; text-underline-offset:3px; }
.got { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px 14px; margin:14px 0 0; }
.got b { font-size:14.5px; font-weight:700; background:linear-gradient(transparent 55%, var(--hi) 55%); padding:0 2px; }
.got b.low { background:none; color:var(--pen); text-decoration:underline wavy var(--pen) 1.5px; text-underline-offset:4px; }

/* ── 첫 화면: 밝은 종이 바탕에 남색 잉크. 가운데에 삐약이 계기판(다섯 단계, 25%씩) ── */
html:has(#app.home), body:has(#app.home) { background:#f7f5ef; }
#app.home { --paper:#f7f5ef; --card:#fff; --ink:#14213d; --mute:#5b6781; --faint:#9aa3b5; --line:#ddd8cb; --key:#efece3; --hi:#ffe14a; --hi-soft:#fff3b8; color:var(--ink); }
.home .logo i { background:var(--ink); color:#fff; border-radius:5px; }
.herorow { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin-top:14px; }
.herorow > div { min-width:0; }
.brow { display:flex; align-items:center; gap:8px; margin:0; min-height:28px; font-size:12.5px; font-weight:700; color:var(--mute); }
.brow u { padding:3px 8px; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); font-size:11.5px; font-weight:700; color:var(--ink); text-decoration:none; }
.home .logo { gap:7px; font-family:var(--sans); font-weight:800; font-size:19px; letter-spacing:-.03em; } .logo .mark { width:28px; height:28px; border-radius:8px; }
.home .hero { margin:4px 0 0; font-size:27px; line-height:1.32; }
.home .sub.c { margin-top:8px; text-align:center; font-size:13.5px; }
.pet { display:block; overflow:visible; }
.pet.me { flex:none; width:96px; height:96px; margin:-8px -8px 0 0; }
.gauge { position:relative; align-self:center; width:320px; max-width:100%; aspect-ratio:340 / 196; margin:8px 0 0; }
.gauge > svg { display:block; width:100%; height:100%; overflow:visible; }
.gauge .tr, .gauge .fl { fill:none; stroke-width:15; stroke-linecap:round; }
.gauge .tr { stroke:#e6e1d3; } .gauge .fl { stroke:#ffc83d; animation:fillup .9s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes fillup { from { stroke-dasharray:0 100; } }
.gauge .mk circle { fill:#fff; stroke:var(--line); stroke-width:1.5; }
.gauge .mk image { opacity:.45; } .gauge .mk.on image { opacity:1; }
.gauge .mk.on circle { stroke:#ffc83d; stroke-width:2; } .gauge .mk.now circle { stroke:var(--ink); stroke-width:2.5; }
.gauge .q { position:absolute; left:0; right:0; top:46%; margin:0; text-align:center; font-family:var(--sans); font-size:58px; line-height:1; font-weight:800; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; }
.gauge .q i { font-style:normal; font-size:.42em; font-weight:800; letter-spacing:0; margin-left:2px; }
.gauge .q small { display:block; margin-top:4px; font-size:12.5px; font-weight:700; letter-spacing:0; color:var(--mute); }
/* 시작 단추: 아래에 두께를 두어 눌리는 느낌이 나게 */
.home .go { height:54px; border-radius:16px; background:#ffd84a; color:var(--ink); font-size:17.5px; font-weight:800; box-shadow:0 4px 0 #d9a520; transition:transform .06s, box-shadow .06s; }
.home .go:active { transform:translateY(4px); box-shadow:0 0 0 #d9a520; }
.home .go.alt { margin-top:12px; background:#fff; box-shadow:0 4px 0 #d8d3c4, inset 0 0 0 2px #d8d3c4; }
.home .go.alt:active { box-shadow:0 0 0 #d8d3c4, inset 0 0 0 2px #d8d3c4; }
.home .cta { padding-bottom:calc(20px + var(--sb)); } .home .cta .go { min-height:54px; padding:0; }
/* 삐약이의 움직임: 통통, 깜빡, 기우뚱, 날갯짓, 반짝. 모두 보이는 상태가 기본이라 애니메이션이 멈춰도 그림은 남음 */
.bob { animation:bob 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
img.bob, img.wob { transform-box:border-box; -webkit-user-drag:none; user-select:none; }
@keyframes bob { 0%, 100% { transform:translateY(0) scale(1, 1); } 45% { transform:translateY(-6px) scale(.98, 1.03); } 60% { transform:translateY(-6px) scale(1, 1); } 92% { transform:translateY(0) scale(1.04, .96); } }
.pet .eye, .gauge .eye, .grow .eye { animation:blink 3.4s infinite; transform-box:fill-box; transform-origin:50% 50%; }
@keyframes blink { 0%, 92%, 100% { transform:scaleY(1); } 95% { transform:scaleY(.1); } }
.wob { animation:wob 1.2s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 90%; }
@keyframes wob { 0%, 100% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }
.flapL { animation:flapL .5s ease-in-out infinite; transform-box:fill-box; transform-origin:100% 20%; } .flapR { animation:flapR .5s ease-in-out infinite; transform-box:fill-box; transform-origin:0% 20%; }
@keyframes flapL { 0%, 100% { transform:rotate(0); } 50% { transform:rotate(26deg); } } @keyframes flapR { 0%, 100% { transform:rotate(0); } 50% { transform:rotate(-26deg); } }
.tw { animation:tw 1.5s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 50%; } .tw.b { animation-delay:.5s; } .tw.c { animation-delay:1s; }
@keyframes tw { 0%, 100% { transform:scale(1) rotate(0); } 50% { transform:scale(.6) rotate(25deg); } }
.gauge .mk .bob, .gauge .mk .wob, .gauge .mk .flapL, .gauge .mk .flapR { animation:none; }   /* 계기판의 작은 그림은 가만히 */
/* 성장 축하: 삐약이가 한 단계 자라면 화면 위로 떠서 알려 줌 */
.grow { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:rgba(20,33,61,.58); overflow:hidden; }
.growin { position:relative; width:100%; max-width:330px; padding:22px 22px 24px; border-radius:26px; background:#fffdf6; text-align:center; animation:growpop .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes growpop { from { transform:scale(.82); } }
.grow .gk { margin:0; font-size:13px; font-weight:800; color:#c9930f; letter-spacing:.06em; }
.pet.big { width:180px; height:180px; margin:6px auto 0; }
/* 가입 화면: 로그인 방법 세 가지와 이메일 입력 칸 */
.pet.mid { width:112px; height:112px; margin:0 auto; }
.grow.acct .gp { margin-bottom:16px; }
.sso { display:block; width:100%; height:52px; margin-top:8px; border-radius:14px; font-size:16px; font-weight:800; }
.sso.kakao { background:#fee500; color:#191600; } .sso.apple { background:#111; color:#fff; } .sso.mail { background:#fff; color:#14213d; box-shadow:inset 0 0 0 2px #d8d3c4; }
.sso:active { transform:translateY(2px); }
.later { display:block; width:100%; height:44px; margin-top:6px; font-size:14px; font-weight:700; color:#5b6781; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#c9c3b4; }
.fld { display:block; margin-top:10px; text-align:left; } .fld span { display:block; margin-bottom:4px; font-size:12.5px; font-weight:700; color:#5b6781; }
.fld input { display:block; width:100%; height:50px; padding:0 14px; border:0; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 2px #d8d3c4; font:600 16px var(--sans); color:#14213d; outline:none; -webkit-appearance:none; appearance:none; }
.fld input:focus { box-shadow:inset 0 0 0 2px #14213d; }
.ferr { min-height:20px; margin:8px 0 8px; font-size:13px; font-weight:700; color:#d9382a; text-align:left; }
.ferr.c { text-align:center; margin:8px 0 0; } .ferr.ok { color:#2f7d4f; }
.grow.acct .go.alt { margin-top:10px; height:48px; font-size:15px; }
.grow.acct .later + .later { margin-top:0; height:38px; }
.proto { margin:0 0 14px; padding:9px 12px; border-radius:10px; background:#f1eee5; font-size:12px; line-height:1.5; color:#5b6781; text-align:left; }
/* 자라는 장면: 다섯 초짜리 영상을 둥근 창 안에서 한 번 재생. 영상이 안 나오면 새 단계의 그림(poster)이 보임 */
.petvid { display:block; width:204px; height:204px; margin:8px auto 0; border-radius:50%; object-fit:cover; background:#efece4; }
.grow h2 { margin:8px 0 0; font:800 24px/1.3 var(--sans); letter-spacing:-.03em; color:#14213d; }
.grow .gp { margin:6px 0 18px; font-size:14.5px; line-height:1.55; color:#5b6781; } .grow .gp b { display:block; font-size:32px; line-height:1.2; font-weight:800; color:#14213d; letter-spacing:-.03em; }
.cf { position:absolute; top:-16px; width:9px; height:15px; border-radius:2px; animation:fall 2s linear infinite; }
.cf.c0 { background:#ffd84a; } .cf.c1 { background:#ff6b5e; } .cf.c2 { background:#7bd88f; } .cf.c3 { background:#6aa8ff; }
@keyframes fall { to { transform:translateY(105vh) rotate(540deg); } }

/* ── 문제 화면 공통: 위쪽 줄 ── */
#app.drill { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.top { display:flex; align-items:center; gap:8px; height:40px; }
.x { width:40px; height:40px; margin-left:-12px; font-size:18px; color:var(--mute); flex:none; }
.count { flex:none; font:500 12.5px/1 var(--mono); color:var(--mute); letter-spacing:-.02em; }
/* 진행 표시: OMR 답안지의 칸. 푼 칸은 사인펜으로 칠해지고, 틀린 칸은 빨갛게 */
.dots { display:flex; align-items:center; gap:4px; flex:1; min-width:0; }
.dots i { flex:0 1 9px; min-width:4px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--faint); }
.dots i.done { background:var(--ink); box-shadow:none; } .dots i.miss { background:var(--pen); box-shadow:none; }
.dots i.now { box-shadow:inset 0 0 0 1.6px var(--ink); }
.dots.many { gap:2px; } .dots.many i { flex:1 1 0; min-width:0; height:4px; border-radius:2px; box-shadow:none; background:var(--line); }
.dots.many i.done, .dots.many i.now { background:var(--ink); } .dots.many i.miss { background:var(--pen); }
.side { height:32px; padding:0 12px; margin-left:4px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font-size:13px; font-weight:700; flex:none; }
.clock { margin-left:4px; font:500 13.5px var(--mono); color:var(--mute); min-width:38px; text-align:right; }
.kicker { margin:8px 0 0; font-size:12.5px; font-weight:600; color:var(--mute); } .kicker b { color:var(--ink); margin-right:7px; }
.rec { margin-left:8px; padding:1px 7px; background:var(--pen); color:#fff; font-size:11px; font-weight:700; border-radius:9px; }

/* ── 필기 카드: 시험지의 한 문제 ── */
.cq { margin:12px 0 0; font-family:var(--serif); font-size:25px; line-height:1.5; font-weight:700; letter-spacing:-.035em; }
/* 문제는 시험지 한 장 위에. 뒤에 한 장이 비스듬히 겹쳐 있고, 번호 위에 빨간펜으로 채점 */
.qcard { position:relative; isolation:isolate; display:flex; gap:12px; align-items:baseline; margin:10px 0 0; padding:17px 18px 17px 16px; background:var(--card); border:1px solid var(--line); }
.qcard::before { content:""; position:absolute; inset:-1px; z-index:-1; background:var(--card); border:1px solid var(--line); transform:rotate(1.4deg); }
.qcard::after { content:""; position:absolute; inset:0; z-index:-1; background:var(--card); }
.qcard .cq { margin:0; flex:1; min-width:0; }
.qcard .qno { position:relative; flex:none; min-width:22px; text-align:center; font:700 23px/1 var(--serif); }
.qcard .qno .mk { width:60px; height:60px; margin:-30px 0 0 -30px; stroke-width:2.4; }
/* 답하기 전: 카드가 빈 곳을 채우고, 번호는 위 모서리에, 문제는 가운데에 */
.qcard.fill { flex:1 1 auto; flex-direction:column; justify-content:center; align-items:stretch; padding:52px 22px 24px; min-height:128px; }
.qcard.fill .qno { position:absolute; left:20px; top:18px; }
.qcard.fill .cq { flex:none; }
.cq.st { font-size:24px; }
.cq code { font-size:.8em; }
.opts { display:grid; margin-top:18px; border-top:1px solid var(--line); }
.opts.settled .opt { min-height:48px; }
.opt { display:flex; align-items:center; gap:14px; min-height:60px; padding:8px 4px 8px 6px; border-bottom:1px solid var(--line); font-size:17px; font-weight:600; line-height:1.4; text-align:left; }
.opt:active { background:var(--key); }
.opt .no { position:relative; flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 1.2px var(--ink); font:700 14.5px/1 var(--serif); }
.opt .tx { flex:1; min-width:0; }
.opt.ok .tx { font-weight:700; }
.opt.ok .tx, .hl { background:linear-gradient(transparent 52%, var(--hi) 52%); }
.opt.ok .tx { flex:0 1 auto; padding:0 4px; margin:0 -4px; }
.opt.no .tx { color:var(--mute); text-decoration:line-through var(--pen) 1.5px; }
.opt.dim { color:var(--faint); } .opt.dim .no { box-shadow:inset 0 0 0 1.2px var(--faint); }
/* 빨간펜 표시: 맞은 답에는 동그라미, 틀리게 고른 답에는 빗금. 손으로 그린 것처럼 한 번에 그어짐 */
.mk { position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; fill:none; stroke:var(--pen); stroke-width:2.6; stroke-linecap:round; pointer-events:none; overflow:visible; }
.mk path { stroke-dasharray:1; animation:draw .34s cubic-bezier(.4,0,.2,1) backwards; }
@keyframes draw { from { stroke-dashoffset:1; } }
.opts.ox { grid-template-columns:1fr 1fr; gap:10px; border-top:0; }
.opts.ox .opt { flex-direction:column; justify-content:center; gap:10px; min-height:128px; padding:14px 12px; border:0; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font-size:14px; color:var(--mute); }
.opts.ox .opt:active { box-shadow:inset 0 0 0 1.5px var(--ink); }
.opts.ox .opt .no { width:auto; height:auto; box-shadow:none; font:700 50px/1 var(--serif); color:var(--ink); }
.opts.ox .opt .tx { flex:none; padding:0; margin:0; background:none; font-weight:600; text-decoration:none; }
.opts.ox .opt.dim .no { color:var(--faint); box-shadow:none; }
.opts.ox .mk { width:76px; height:76px; margin:-38px 0 0 -38px; stroke-width:2; }
.idk { align-self:center; height:44px; margin:6px 0 calc(8px + var(--sb)); padding:0 14px; color:var(--mute); font-size:14.5px; font-weight:600; text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:4px; }
.cnote { margin:14px 0 0; font-size:15px; line-height:1.6; color:#45433d; }
.soft { margin:16px 0 0; font:400 26px/1.1 var(--hand); color:var(--pen); }
/* 새로 배우기: 답에는 형광펜, 기억할 것은 빨간펜으로 옆줄 */
.ans { margin:16px 0 0; }
.ans span { display:block; font-size:12.5px; font-weight:700; color:var(--mute); margin-bottom:2px; }
.ans b { font-family:var(--serif); font-size:26px; line-height:1.5; font-weight:700; letter-spacing:-.03em; padding:0 5px; margin-left:-5px; background:linear-gradient(transparent 46%, var(--hi) 46%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.easy { margin:16px 0 0; font-size:17px; line-height:1.72; letter-spacing:-.01em; }
.keep { margin:16px 0 0; padding:1px 0 1px 13px; border-left:2px solid var(--pen); font-size:14.5px; line-height:1.6; color:#45433d; }
.keep b { display:block; font:400 21px/1.15 var(--hand); color:var(--pen); margin-bottom:1px; }
.uname { margin:10px 0 0; font-family:var(--serif); font-size:31px; line-height:1.32; font-weight:700; letter-spacing:-.04em; }
.intro { margin:16px 0 0; font-size:17px; line-height:1.78; }
.how { margin:18px 0 0; padding-left:22px; font-size:16.5px; line-height:1.7; } .how li { margin-bottom:10px; } .how li::marker { font-family:var(--serif); font-weight:700; }
#app.card .asks { margin-top:10px; font-size:14.5px; }

/* ── 실기: 위는 문제와 표, 아래는 수식 줄과 글쇠판 ── */
.q { margin:4px 0 0; font-family:var(--serif); font-size:20px; line-height:1.45; font-weight:700; letter-spacing:-.035em; }
.needs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; min-height:22px; }
.nd { font:500 12.5px/22px var(--mono); color:var(--mute); margin-right:4px; }
.str { height:32px; padding:0 10px; border-radius:8px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font:500 13.5px var(--mono); }
.asks { margin:6px 0 0; padding:0 0 0 18px; font-size:13.5px; line-height:1.5; color:#45433d; }
.asks li::marker { color:var(--faint); font:500 11px var(--mono); }
.sheetwrap { margin-top:10px; }
#app.drill .sheetwrap { margin-bottom:auto; }
#app.task .sheetwrap { position:relative; margin-top:8px; margin-bottom:auto; }
table.sheet { border-collapse:collapse; width:100%; font-size:14px; font-variant-numeric:tabular-nums; touch-action:none; }
.sheet th, .sheet td { border:1px solid var(--line); padding:0 4px; height:var(--rh); text-align:center; white-space:nowrap; min-width:38px; }
.sheet td { background:var(--card); }
.sheet.tall th, .sheet.tall td { height:calc(var(--rh) - 4px); font-size:13px; }
.sheet th, .sheet.tall th { border-color:transparent; font:500 10.5px/1 var(--mono); color:var(--faint); height:17px; }
.sheet tr > th:first-child { width:18px; min-width:18px; padding:0 5px 0 0; text-align:left; }
.sheet td.h { font-weight:700; background:var(--key); }
.sheet td.hint { background:var(--hi); }
.sheet td.target { background:var(--ink); color:#fff; font-weight:800; }
.sheet td.fill { background:var(--key); }
.sheet td.r-ok { background:var(--hi); font-weight:700; animation:drop .28s both; }
.sheet td.r-bad { background:var(--pen-soft); color:var(--pen); font-weight:700; animation:drop .28s both; }
@keyframes drop { from { transform:translateY(-7px); } }
.sheet.ts td { height:calc(var(--rh) - 4px); font-size:13px; padding:0 3px; min-width:0; }
.sheet.ts.tall td { height:calc(var(--rh) - 7px); font-size:12.5px; }
.sheet.ts.wide td { font-size:12px; letter-spacing:-.02em; }
.sheet.ts td.tc:active { background:var(--key); }
.coach { margin:8px 0 0; min-height:21px; font-size:14px; line-height:1.5; font-weight:600; }
.coach.on { background:linear-gradient(transparent 58%, var(--hi) 58%); align-self:flex-start; padding:0 3px; margin-left:-3px; -webkit-box-decoration-break:clone; box-decoration-break:clone; display:inline; }
.coach.err { color:var(--pen); }
.formula { margin-top:8px; background:var(--card); border:1.5px solid var(--ink); border-radius:13px; }
#formula { padding:0 12px; font:500 17px/46px var(--mono); overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
#formula::-webkit-scrollbar { display:none; }
#formula .eq { color:var(--faint); } #formula .fn { font-weight:700; }
#formula .ref.sel { background:var(--key); box-shadow:0 0 0 3px var(--key); border-radius:3px; }
#formula .ref.lime { background:var(--hi); box-shadow:0 0 0 3px var(--hi); border-radius:3px; }
#formula .ph { font:400 14.5px var(--sans); color:var(--faint); margin-left:8px; }
.formula.graded #formula { line-height:40px; font-size:16px; }
.caret { display:inline-block; width:2px; height:20px; margin-left:2px; vertical-align:-4px; background:var(--pen); animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* 글쇠판: 종이 아래에 놓인 자판. 글쇠는 흰색에 아랫변만 진하게 */
.tray { margin:10px calc(var(--pad) * -1) 0; padding:0 5px calc(8px + var(--sb)); background:var(--tray); border-top:1px solid #d9d4c8; }
.formula + .tray { margin-top:10px; }
.strip { display:flex; align-items:center; gap:6px; height:42px; padding:0 3px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
.strip::-webkit-scrollbar { display:none; }
.sug { height:32px; padding:0 12px; border-radius:16px; background:var(--card); border-bottom:1px solid #c9c3b6; font:700 13.5px var(--mono); flex:none; }
.sug.chipk { font-family:var(--sans); }
.tt { font:500 13px var(--mono); color:var(--mute); padding:0 6px; } .tt b { color:var(--ink); font-weight:700; background:linear-gradient(transparent 55%, var(--hi) 55%); } .tt.dim { font-family:var(--sans); }
.krow { display:flex; gap:5px; margin-top:6px; }
.krow.sp { margin-top:0; }
.layer .krow.r2 { padding:0 4.6%; }
.layer[data-layer=num] .krow.r2 { padding:0; }
.k { flex:1 1 0; min-width:0; height:var(--kh); border-radius:7px; background:var(--card); border-bottom:1.5px solid #c9c3b6; font:500 17px/1 var(--mono); transition:transform .05s; }
.k:active { transform:translateY(1px); border-bottom-color:transparent; background:var(--key); }
.k.w { flex:1.6 1 0; } .k.dark { background:#d7d2c6; border-bottom-color:#b9b3a5; font-size:13.5px; font-weight:700; }
.k[data-k="⌫"] { font-size:21px; font-weight:500; }
.k.enter { flex:1.7 1 0; background:var(--ink); border-bottom-color:#000; color:#fff; font-size:20px; }
.k.f4 { font-size:14px; font-weight:700; color:var(--faint); } .k.f4.ready { color:var(--ink); }
.k.lime, .sug.lime, .str.lime { background:var(--hi); border-bottom-color:#a8cc22; color:var(--ink); animation:nudge 1s ease-in-out infinite; }
[data-l].lime { background:var(--hi) !important; color:var(--ink) !important; animation:nudge 1s ease-in-out infinite; }
.fr.lime { box-shadow:inset 0 0 0 2px rgba(0,0,0,.25); }
@keyframes nudge { 50% { box-shadow:0 0 0 3px rgba(214,255,63,.55); } }

/* ── 채점 결과: 종이 한 장이 올라오고, 빨간펜으로 한마디 ── */
.fb { flex:1; display:flex; flex-direction:column; margin:12px calc(var(--pad) * -1) 0; padding:18px var(--pad) 0; background:var(--card); border-top:1px solid var(--line); border-radius:20px 20px 0 0; animation:rise .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { transform:translateY(18px); } }   /* 투명도는 건드리지 않음: 애니메이션이 멈춰도 글이 보여야 함 */
.fb h3 { margin:0; font:400 40px/1 var(--hand); color:var(--pen); letter-spacing:0; }
.fb.ok h3::before { content:""; display:inline-block; width:34px; height:34px; margin-right:8px; vertical-align:-5px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M34 8C23 1 6 8 5 23c-1 13 11 20 22 17 11-3 16-16 10-26-4-6-11-8-18-7' fill='none' stroke='%23e23d2e' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.fb p { margin:8px 0 0; font-size:15px; line-height:1.6; }
.fb .why { color:#45433d; }
.fb .more { font-size:13.5px; font-weight:600; color:var(--mute); }
.fb .model { margin-top:10px; font:700 15px/1.5 var(--mono); overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
.fb.bad .model { align-self:flex-start; max-width:100%; background:linear-gradient(transparent 55%, var(--hi) 55%); padding:0 3px; }
.fb.bad .model.was { background:none; color:var(--pen); font-weight:500; text-decoration:line-through; }
.steps { margin:10px 0 0; padding-left:20px; font-size:13.5px; line-height:1.6; font-weight:600; }
.fb .acts { display:grid; gap:8px; margin-top:auto; padding:16px 0 calc(16px + var(--sb)); position:sticky; bottom:0; background:inherit; }
.fb .acts.two { grid-template-columns:1fr 1.5fr; }
.fb .btn { height:54px; border-radius:15px; font-weight:700; font-size:17px; background:var(--ink); color:#fff; }
.fb .btn.line { background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }

/* ── 끝 화면 ── */
.finish { flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:12px; }
.finish.top { justify-content:flex-start; align-items:stretch; gap:0; height:auto; padding-top:22px; }   /* 위쪽 줄(.top)과 이름이 겹치므로 되돌림 */
.finish .time { margin:0; font-size:13.5px; font-weight:600; color:var(--mute); }
.finish .lbl { margin-top:14px; }
.finish .lead { margin:14px 0 0; font-family:var(--serif); font-size:21px; line-height:1.5; font-weight:700; letter-spacing:-.035em; }
.finish h2.sec, .finish .row, .finish .review, .finish .note { align-self:stretch; text-align:left; }
.finish .note { margin-top:18px; }
.review { margin-top:10px; border-top:1px solid var(--line); }
.review details { border-bottom:1px solid var(--line); }
.review summary { display:flex; align-items:center; gap:10px; min-height:52px; font-size:14.5px; font-weight:600; list-style:none; cursor:pointer; }
.review summary::-webkit-details-marker { display:none; }
.review summary span { flex:1; min-width:0; }
.review summary i { position:relative; width:16px; height:16px; flex:none; border:2px solid var(--pen); border-radius:50%; }
.review summary i.no { border:0; }
.review summary i.no::before { content:""; position:absolute; left:7px; top:-2px; width:2px; height:20px; background:var(--pen); border-radius:1px; transform:rotate(38deg); }
.review summary em { margin-left:auto; flex:none; font-style:normal; font:500 12px var(--mono); color:var(--mute); }
.review p { margin:0 0 8px 26px; font-size:13.5px; color:var(--mute); }
.review .ans, .review .mine { font:700 13px var(--mono); color:var(--ink); overflow-x:auto; white-space:nowrap; } .review .mine { color:var(--pen); font-weight:500; text-decoration:line-through; }
.review .steps { margin:0 0 8px 26px; }

/* ── 실기 메뉴 작업: 탭, 명령, 대화 상자 ── */
#app.task .chart { width:82%; margin-left:auto; margin-right:auto; }
.chart { margin-top:8px; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.chart svg { display:block; }
.shapes { position:absolute; inset:0; pointer-events:none; }
.shape { position:absolute; display:grid; place-items:center; font-size:12px; font-weight:700; }
.shape.bt { background:#e3dfd5; box-shadow:inset 0 0 0 1px #75726a, inset -2px -2px 0 #b9b3a5; }
.shape.sh { background:#2f6bff; color:#fff; border-radius:8px; }
.views { display:flex; gap:4px; margin:6px 0 0; }
.vw { height:28px; padding:0 11px; font-size:12.5px; font-weight:600; color:var(--mute); border-bottom:2px solid transparent; }
.vw.on { color:var(--ink); border-color:var(--ink); }
.tray.rib { padding:6px 8px calc(10px + var(--sb)); }
.rtabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.rtabs::-webkit-scrollbar { display:none; }
.rt { flex:none; height:38px; padding:0 12px; font-size:14px; font-weight:700; color:var(--mute); border-bottom:2.5px solid transparent; }
.rt.on { color:var(--ink); border-color:var(--ink); }
.rcmds { display:flex; flex-wrap:wrap; gap:6px; padding:8px 0; min-height:96px; align-content:flex-start; }
.rc { height:40px; padding:0 13px; border-radius:9px; background:var(--card); border-bottom:1.5px solid #c9c3b6; font-size:14px; font-weight:600; }
.rc.off { color:var(--faint); }
.rc:active { transform:translateY(1px); border-bottom-color:transparent; }
.rfoot, .dfoot { display:grid; grid-template-columns:1fr 1.6fr; gap:8px; }
.btn2 { height:48px; border-radius:13px; background:var(--card); border-bottom:1.5px solid #c9c3b6; font-weight:700; font-size:15.5px; }
.btn2:disabled { color:var(--faint); }
.btn2.go2 { background:var(--ink); border-bottom-color:#000; color:#fff; }
.dlg { margin:8px calc(var(--pad) * -1) 0; padding:12px 14px calc(12px + var(--sb)); background:var(--tray); border-top:1px solid #d9d4c8; border-radius:16px 16px 0 0; }
.dh { font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:-.03em; padding:0 2px 8px; }
.df { display:flex; flex-direction:column; gap:4px; max-height:40dvh; overflow-y:auto; margin-bottom:8px; }
.fr { display:flex; align-items:center; gap:8px; width:100%; min-height:38px; padding:4px 10px; background:var(--card); border-radius:9px; text-align:left; }
.fr.pick.act { box-shadow:inset 0 0 0 2px var(--ink); }
.fl { flex:none; width:88px; font-size:12.5px; font-weight:600; color:var(--mute); line-height:1.3; }
.fv, .fo { flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; }
.fv b { font:700 14.5px var(--mono); } .fv b.mono { font-weight:500; overflow-wrap:anywhere; }
.fh { font-style:normal; font-size:12.5px; color:var(--faint); }
.fx { flex:none; width:30px; height:30px; display:grid; place-items:center; color:var(--mute); border-radius:8px; }
.oc { min-height:32px; padding:4px 10px; border-radius:8px; background:var(--key); font-size:13.5px; font-weight:600; }
.oc.on { background:var(--ink); color:#fff; }
.oc.sw { min-width:56px; }
.pill { display:inline-flex; align-items:center; min-height:30px; padding:0 9px; border-radius:8px; background:var(--key); font:600 13px var(--mono); }
.pill.x { padding:0 7px; margin-left:-3px; color:var(--mute); }
.tyhead { display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:13.5px; }
.tyhead .side { margin-left:0; }
#app.task.indlg .chart + .sheetwrap { display:none; }                          /* 차트 대화 상자에서는 표가 필요 없음 */
#app.task.indlg .kicker, #app.task.indlg .q { display:none; }                 /* 대화 상자가 열리면 요구 사항과 표만 남김 */
#app.task.indlg .sheet.ts td { height:21px; font-size:12px; } #app.task.indlg .sheet.ts th { height:13px; }
#app.task.indlg .asks { margin-top:2px; font-size:12.5px; line-height:1.4; }

/* ── 낮은 화면(브라우저 주소창이 있을 때, 작은 폰) ── */
@media (max-height: 760px) {
  :root { --rh:27px; --kh:41px; }
  .top { height:36px; } .x { height:36px; }
  .kicker { margin-top:4px; font-size:12px; } .q { font-size:18px; line-height:1.4; }
  .needs { margin-top:4px; } .str { height:28px; font-size:13px; }
  .sheetwrap { margin-top:7px; } .sheet th, .sheet td { font-size:13.5px; } .sheet th, .sheet.tall th { height:15px; font-size:10px; }
  .coach { margin-top:6px; font-size:13.5px; }
  .formula { margin-top:6px; } #formula { line-height:40px; font-size:16px; } .formula.graded #formula { line-height:36px; font-size:15px; }
  .formula + .tray { margin-top:8px; } .strip { height:36px; } .sug { height:28px; } .krow { margin-top:5px; } .k { font-size:16px; }
  .fb { margin-top:10px; padding-top:14px; border-radius:18px 18px 0 0; } .fb h3 { font-size:34px; } .fb.ok h3::before { width:29px; height:29px; } .fb p { margin-top:6px; font-size:14px; line-height:1.5; }
  .fb .model { margin-top:8px; font-size:14px; } .fb .acts { padding:12px 0 calc(12px + var(--sb)); } .fb .btn { height:50px; }
  .hero { margin-top:20px; font-size:30px; } .lbl { margin-top:16px; } .num { font-size:108px; }
  .sheet.ts.tall td, #app.task.indlg .sheet.ts.tall td { height:19px; font-size:12px; } #app.task .chart { width:70%; } .asks { font-size:13px; line-height:1.42; } .rcmds { min-height:84px; padding:6px 0; } .rc { height:36px; font-size:13.5px; } .rt { height:34px; } .btn2 { height:44px; } .df { max-height:30dvh; } .fr { min-height:34px; } .oc { min-height:28px; }
  .cq { font-size:23.5px; } .cq.st { font-size:22.5px; } .opt { min-height:56px; } .easy { font-size:16px; line-height:1.66; } .ans b { font-size:24px; } .intro { font-size:16px; } .uname { font-size:28px; }
}
@media (max-height: 700px) {
  :root { --rh:24px; --kh:38px; }
  #app.task .chart { width:56%; } #app.task .chart + .sheetwrap .sheet.ts td { height:18px; font-size:12px; } #app.task .chart + .sheetwrap .sheet.ts th { height:13px; }
  #app.task .asks { font-size:12.5px; line-height:1.36; margin-top:4px; } #app.task .q { font-size:16.5px; line-height:1.35; } .rcmds { min-height:74px; padding:5px 0; } .tray.rib { padding-top:3px; } .rt { height:32px; } #app.task .sheetwrap { margin-top:6px; } #app.task .coach { margin-top:3px; }
  .fr { min-height:31px; padding:3px 10px; } .dh { padding-bottom:5px; } .dlg { padding-top:10px; }
  .sheet.ts.tall td, #app.task.indlg .sheet.ts.tall td { height:17px; font-size:11.5px; }   /* 대화 상자가 열려도 긴 표가 화면 안에 들어오게 */
  .qcard { margin-top:6px; } .qcard:not(.fill) { padding:12px 14px 12px 12px; } .qcard:not(.fill) .cq { font-size:19.5px; line-height:1.45; } .qcard:not(.fill) .qno { font-size:20px; } .opts { margin-top:14px; }
  .ans { margin-top:12px; } .keep { margin-top:12px; } .easy { margin-top:12px; font-size:15.5px; line-height:1.62; }
  .q { font-size:17px; } #app.drill:not(.card) .kicker { display:none; } .strip { height:32px; } .coach { margin-top:4px; font-size:13px; } .str { height:26px; } .needs { gap:5px; }
  .cq { font-size:22.5px; line-height:1.48; } .cq.st { font-size:21.5px; } .opt { min-height:54px; font-size:16.5px; } .opts.ox .opt { min-height:116px; } .idk { height:40px; }
}
@media (max-height: 700px) {
  .gauge { width:282px; margin-top:4px; } .gauge .q { font-size:50px; } .gauge .q small { margin-top:2px; font-size:12px; } .home .hero { font-size:25px; } .pet.me { width:86px; height:86px; } .herorow { margin-top:10px; }
  .home .nextup { margin-top:10px; padding:11px 16px; } .home details.more { margin-top:8px; } .home .sub { margin-top:8px; font-size:14px; line-height:1.5; }
}
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* font 줄임 속성이 합자 설정을 되돌리므로 맨 끝에 둡니다: >= 가 한 글자로 합쳐지면 안 됨 */
#formula, .k, .sug, .str, .tt, .nd, .model, .map .fn, .sheet th, .review .ans, .review .mine, .pill, .fv b, code { font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0; }