/* 시험공부 사이트 공용 스타일 — 폰 한 칼럼, 시스템 글꼴, 밝은/어두운 테마, 패들렛식 보드 (세 과목 공용) */
/* 레이아웃: 위 사이트 이름+메뉴 줄, 가운데 읽기 칼럼(최대 680px), 장 끝에 큰 이전/다음 버튼. 염기 4색을 의미 색으로 쓴다 */
:root{
  --bg:#f6f7fa; --surface:#ffffff; --ink:#16233a; --muted:#5b6678; --line:#dde2ea;
  --accent:#0d7a64; --accent-ink:#ffffff; --accent-soft:#e1f2ec;
  --A:#23955a; --T:#cf3f45; --G:#c58a12; --C:#2d63cc;
  --def:#e8eefc; --eg:#e4f4ea; --exam:#fdebed; --tip:#fdf3d7; --pro:#efe9fb; --gray:#eef1f5;
  --paper:#ffffff; --code:#101b2c; --code-ink:#dbe5f2;
  --s-r:#e7ebf1; --s-m:#dce6fb; --s-x:#fbd7dc; --s-e:#fbedc6; --s-g:#d5f0df;
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0f141c; --surface:#18202b; --ink:#e5ebf3; --muted:#9aa6b6; --line:#2a3443;
  --accent:#4fc3a1; --accent-ink:#06120e; --accent-soft:#183129;
  --A:#5ccf8b; --T:#f27b7f; --G:#e8b54f; --C:#7ea6f6;
  --def:#18243b; --eg:#162a20; --exam:#341b1f; --tip:#30290f; --pro:#251e39; --gray:#1f2835;
  --code:#0a0f16;
  --s-r:#263040; --s-m:#1f2d47; --s-x:#4b2329; --s-e:#443710; --s-g:#1c3b2a;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--C)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--C);outline-offset:2px}

/* 머리 */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-in{max-width:680px;margin:0 auto;padding:10px 16px 0}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:800;font-size:16px}
.bases{display:inline-flex;gap:3px}
.bases i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;width:18px;height:18px;border-radius:5px;display:inline-grid;place-items:center}
.bases .a{background:var(--A)}.bases .t{background:var(--T)}.bases .g{background:var(--G)}.bases .c{background:var(--C)}
.nav{display:flex;gap:6px;overflow-x:auto;padding:8px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none;text-decoration:none;color:var(--muted);font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.nav a.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

main{max-width:680px;margin:0 auto;padding:18px 16px 60px}
h1{font-size:26px;line-height:1.35;margin:6px 0 10px}
h2{font-size:23px;line-height:1.35;margin:4px 0 12px;color:var(--accent)}
h3{font-size:19px;line-height:1.45;margin:34px 0 10px;padding-top:6px}
p{margin:10px 0}
ul,ol{padding-left:22px}
li{margin:5px 0}
.muted{color:var(--muted)}
.small{font-size:15px}
.lead{color:var(--muted);font-size:16px}
.big{font-size:19px;font-weight:800;text-align:center}
.red{color:var(--T);font-weight:700}.grn{color:var(--A);font-weight:700}.acc{color:var(--accent);font-weight:700}
.pill{display:inline-block;border-radius:999px;padding:0 8px;font-size:13px;font-weight:700}

/* 홈 */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.hero h1{margin-top:10px}
.dday{display:inline-block;font-family:var(--mono);font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 12px;font-size:14px}
.go{display:block;text-align:center;text-decoration:none;background:var(--accent);color:var(--accent-ink);font-weight:800;border-radius:14px;padding:14px;margin:14px 0;font-size:17px;border:0;width:100%;cursor:pointer;font-family:inherit}
.go.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.path{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.path a{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.path .no{flex:none;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-weight:800;display:grid;place-items:center}
.path .tt{flex:1;min-width:0;font-weight:700;line-height:1.4}
.path .tt small{display:block;font-weight:400;color:var(--muted);font-size:14px}
.path .ok{flex:none;color:var(--A);font-weight:800;font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid2 a{text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:700;line-height:1.4}
.grid2 a small{display:block;color:var(--muted);font-weight:400;font-size:13.5px}

/* 본문 상자 */
.chhead{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);margin-bottom:4px}
.box{border-radius:14px;padding:12px 15px;margin:16px 0;border-left:5px solid transparent}
.box .t{display:block;font-weight:800;font-size:15px;margin-bottom:2px}
.box p{margin:6px 0}
.box.def{background:var(--def);border-color:var(--C)}.box.def .t{color:var(--C)}
.box.eg{background:var(--eg);border-color:var(--A)}.box.eg .t{color:var(--A)}
.box.exam{background:var(--exam);border-color:var(--T)}.box.exam .t{color:var(--T)}
.box.exam .t::before{content:"✍ "}
.box.tip{background:var(--tip);border-color:var(--G)}.box.tip .t{color:var(--G)}
.box.pro{background:var(--pro);border-color:#7c5cd6}.box.pro .t{color:#7c5cd6}
.box.gray{background:var(--gray)}
details.check{border:2px dashed var(--accent);border-radius:14px;margin:16px 0;background:var(--surface)}
details.check summary{padding:11px 15px;font-weight:700;color:var(--accent);cursor:pointer}
details.check p{margin:0;padding:0 15px 12px}
.tw{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
th{background:var(--accent);color:var(--accent-ink);text-align:left;padding:7px 9px}
td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
code{font-family:var(--mono);font-size:.88em;background:var(--gray);border-radius:5px;padding:1px 5px}
.code{font-family:var(--mono);font-size:13px;background:var(--code);color:var(--code-ink);border-radius:12px;padding:12px;white-space:pre;overflow-x:auto;line-height:1.6;margin:14px 0}
.code .h{color:#f2c14e}.code .k{color:#8fc3ff}.code .q{color:#86e0a4}.code .c{color:#93a1b3}
.paper{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;margin:14px 0}
.paper svg{display:block;width:100%;height:auto;max-width:460px;margin:0 auto}
figure.slide{margin:16px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
figure.slide img{display:block;width:100%}
figure.slide figcaption{font-size:13.5px;color:var(--muted);padding:7px 11px;background:var(--gray);line-height:1.5}
.zoomhint{font-size:13px;color:var(--muted)}
table.seq{border-collapse:separate;border-spacing:3px;width:auto;margin:0 auto;font-family:var(--mono)}
table.seq td{width:25px;height:27px;padding:0;text-align:center;vertical-align:middle;border:0;border-radius:6px;font-size:14px}
table.seq td.lb{width:auto;font-family:var(--font);font-size:12px;color:var(--muted);text-align:right;padding-right:4px;white-space:nowrap}
table.seq td.r{background:var(--s-r)}table.seq td.m{background:var(--s-m)}
table.seq td.x{background:var(--s-x);color:var(--T);font-weight:800}table.seq td.e{background:var(--s-e);color:var(--G);font-weight:800}
table.seq td.g{background:var(--s-g);color:var(--A);font-weight:800}table.seq td.n{color:var(--muted);font-size:12px}
table.seq td.d{color:var(--C);font-weight:800}table.seq td.z{color:var(--T);font-weight:800}
.flow{display:flex;flex-direction:column;margin:14px 0}
.step{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:15.5px}
.step .nm{font-weight:700}.step .an{font-size:13.5px;color:var(--muted);text-align:right}
.step.c1{border-left:5px solid var(--C)}.step.c2{border-left:5px solid var(--A)}.step.c3{border-left:5px solid var(--G)}.step.c4{border-left:5px solid #7c5cd6}.step.c5{border-left:5px solid var(--T)}
.arrow{text-align:center;color:var(--muted);font-size:12px;line-height:1.4}

/* 낱말 (본문 밑줄 → 누르면 뜻) */
a.w{color:inherit;text-decoration:underline dotted var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:2px solid var(--accent);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18);padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px));max-height:65%;overflow:auto}
.sheet b{font-size:20px}
.sheet .en{display:block;font-family:var(--mono);font-size:13px;color:var(--muted)}
.sheet p{font-size:17px;margin:10px 0 12px}
.words dt{font-weight:800;font-size:18px;margin-top:18px;scroll-margin-top:120px}
.words dt small{font-family:var(--mono);font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.words dd{margin:4px 0 0}
.words dt:target{color:var(--accent)}
.search{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}

/* 장 끝 */
.done{display:flex;flex-direction:column;gap:10px;margin-top:34px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pn a{text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;font-size:14.5px;line-height:1.4}
.pn a b{display:block;font-size:13px;color:var(--muted);font-weight:600}
.pn a.next{text-align:right}

/* 카드 · 서술형 */
details.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:8px 0}
details.card summary{padding:12px 15px;font-weight:700;cursor:pointer;line-height:1.5}
details.card .in{padding:0 15px 14px}
details.card .abbr{font-family:var(--mono);color:var(--accent);font-size:18px}
.easy{background:var(--eg);border-radius:12px;padding:10px 13px;margin:8px 0}
.model{background:var(--def);border-radius:12px;padding:10px 13px;margin:8px 0}
.keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.keys span{background:var(--tip);border-radius:999px;padding:2px 10px;font-size:14px}

/* 퀴즈 */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 13px;cursor:pointer}
.bar{height:7px;background:var(--line);border-radius:99px;overflow:hidden;margin:8px 0 14px}
.bar i{display:block;height:100%;background:var(--accent)}
.qmeta{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
.qtext{font-size:20px;font-weight:800;line-height:1.5;margin:6px 0 16px}
.opt{display:flex;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:13px 15px;margin:8px 0;cursor:pointer;line-height:1.5}
.opt .k{font-family:var(--mono);color:var(--muted);font-weight:700}
.opt.ok{border-color:var(--A);background:var(--eg)}
.opt.no{border-color:var(--T);background:var(--exam)}
.ox{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ox .opt{justify-content:center;font-size:28px;font-weight:800}
.ans{width:100%;font:inherit;font-size:18px;padding:13px 15px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.fb{border-radius:14px;padding:12px 15px;margin-top:14px}
.fb.ok{background:var(--eg);border-left:5px solid var(--A)}
.fb.no{background:var(--exam);border-left:5px solid var(--T)}
.fb .v{font-weight:800}
.fb .src{font-size:13px;color:var(--muted)}
.score{font-family:var(--mono);font-size:52px;font-weight:800;color:var(--accent);text-align:center}
noscript p{background:var(--tip);border-radius:12px;padding:12px}

/* ---------- 패들렛식 보드 ---------- */
/* 장마다 세로 칸(색깔 다름), 칸 안에 포스트잇 카드. 폰에선 한 칸씩 옆으로 밀어 넘긴다 */
.jump{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;text-decoration:none;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.board{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:4px 16px 24px;align-items:flex-start}
.col{flex:0 0 86%;max-width:330px;scroll-snap-align:center;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;border-top:6px solid var(--tint)}
.colhead b{display:block;font-size:17px;line-height:1.4}
.colhead small{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.colhead .cnt{display:inline-block;font-size:12px;font-weight:700;margin-top:6px;background:var(--surface);border-radius:999px;padding:1px 9px}
.post{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border-radius:14px;padding:12px 13px;box-shadow:0 1px 2px rgba(20,30,50,.08),0 2px 8px rgba(20,30,50,.06)}
.post img{display:block;width:calc(100% + 26px);max-width:none;margin:-12px -13px 10px;border-radius:14px 14px 0 0;aspect-ratio:16/9;object-fit:cover;background:#fff}
.post b{display:block;font-size:16px;line-height:1.45}
.post span{display:block;font-size:14px;color:var(--muted);line-height:1.55;margin-top:4px}
.post i{display:inline-block;font-style:normal;font-size:11.5px;font-weight:700;background:var(--gray);border-radius:999px;padding:1px 8px;margin:8px 4px 0 0}
.post.note span{color:var(--ink)}
.post.go2{background:var(--accent);color:var(--accent-ink)}
.post.go2 span{color:var(--accent-ink);opacity:.9}
.post.quiz{border:2px dashed var(--tint);background:transparent;box-shadow:none}
details.post summary{cursor:pointer;list-style:none}
details.post ul{padding-left:20px;margin:8px 0 0;font-size:14.5px}
details.post table{font-size:12.5px}
.swipe{text-align:right;color:var(--muted);font-size:13px;margin:0}
.k0{--tint:#e8b400;background:#fff6cf}.k1{--tint:#ef7d55;background:#ffe6dc}.k2{--tint:#2f9e5b;background:#e0f4e6}
.k3{--tint:#2d63cc;background:#dfeafe}.k4{--tint:#7c5cd6;background:#ece5ff}.k5{--tint:#d64b8a;background:#ffe5f0}
.k6{--tint:#159a9c;background:#daf3f3}.k7{--tint:#d9822b;background:#fde7cf}.k8{--tint:#6b8e23;background:#e9f0d8}
.k9{--tint:#55607a;background:#e7e9f0}.kS{--tint:#16233a;background:#eef1f6}.kP{--tint:#0d7a64;background:#ddf1ea}
@media (prefers-color-scheme: dark){.col{background:#19212c}.post.quiz{background:transparent}}
.crumb{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13.5px;border-top:6px solid var(--tint);background:var(--surface);border-radius:12px;padding:8px 12px;margin-bottom:6px}
.crumb a{font-weight:700;text-decoration:none;color:var(--ink)}
.crumb span{color:var(--muted);text-align:right}
@media (min-width:900px){.board{margin:0;padding:4px 0 24px}.col{flex-basis:300px}}

/* B+ 최단 코스 */
.post.bplus{background:var(--T);color:#fff}
.post.bplus span{color:#fff;opacity:.92}
ol.must{padding-left:24px}
ol.must li{margin:7px 0;font-size:16.5px}
ol.must a{font-weight:700;color:var(--ink)}
ol.must i{font-style:normal;font-size:12px;font-weight:800;color:#fff;background:var(--T);border-radius:999px;padding:1px 8px;margin-left:4px}
h2 .small{font-weight:600}

/* 코드 문제: 보기에도 줄바꿈이 있으면 살린다 */
.opt span{white-space:pre-wrap}
.qtext + .code{margin-top:-6px}