@charset "UTF-8";
/* Colour tokens. Every colour on the site is read from these variables.
   The light values below are the original design. A theme or a future palette only overrides this list,
   for example :root[data-theme="dark"] further down. Accent-coloured backgrounds use --on-accent for text. */
:root{
--paper:#f7f6f2;--surface:#fff;--ink:#202c2a;--muted:#737d78;--copy:#717b75;--faint:#cbd1c8;--line:#e0e4dc;--line-soft:#edf0e8;--divider:#eef0ea;
--accent:#245746;--accent-soft:#edf2e9;--accent-line:#cfdcca;--on-accent:#fff;--alert:#bd663f;--focus:#a7783a;
--hover:#f8faf5;--selected:#edf3e9;--neutral-bg:#f1f2ed;--tabs-bg:#efefe9;--strip-bg:#eeefe7;--sidebar:#f0f1e9;--table-head:#eef1e8;--basis-bg:#f7f8f3;--model-bg:#f1f4ed;
--shadow-tab:#20342812;--shadow-card:#233d2c07;
--chip-line:#d6ddcc;--chip-bg:#ffffff70;--empty-bg:#efefe94d;--empty-line:#d9dfd3;--notice-bg:#fbf1e6;
--warm-ink:#9c5c36;--warm-soft:#faf0e7;--bookmark:#b98c4e;--rank-soft:#cdd8c8;
--answered-bg:#dde8d7;--answered-line:#c6d7bc;--correct-bg:#dce9d8;--correct-line:#9fbf98;
--wrong-bg:#fbf0ea;--wrong-line:#d99a7c;--wrong-soft:#f8e6dc;--wrong-soft-line:#e2b49c;--wrong-ink:#9c4a28;
--choice-num-line:#dbe0d4;--field-bg:#fcfdfb;--field-line:#cbd3c5;
--code-bg:#f4f5f0;--code-line:#e6e9df;--code-head:#eceee6;--code-inline-bg:#f0f2ec;
--diagram-bg:#fbfbf8;--diagram-line:#8a938d;
--art-bg:#efefe7;--art-line:#dedfd2;--art-shadow:#e9eade66;--art-label:#7b8471;--art-node-line:#d4dbca;--art-edge:#b4bfad;--art-code:#7e857a;
--tok-c:#7b8471;--tok-s:#9c5c36;--tok-k:#2f6b45;--tok-n:#8a5a00;--tok-t:#2f6b45;--tok-a:#6b4e9c;--tok-p:#6b4e9c}
:root{--radius:18px;font-family:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;line-height:1.75;word-break:keep-all;overflow-wrap:break-word}button,input,textarea,select{font:inherit}button,a,input,textarea,select{ -webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button,a,input,textarea,select{outline-offset:4px}:focus-visible{outline:3px solid var(--focus)}button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 16px;color:var(--ink)}button:hover:not(:disabled){filter:brightness(.97)}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.4;letter-spacing:-.04em}h2{font-size:25px}p{line-height:1.85}small{font-size:12px}main{max-width:1160px;margin:auto;padding:0 36px 64px}footer{max-width:1160px;margin:auto;padding:28px 36px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.site-header{max-width:1160px;height:90px;padding:0 36px;margin:auto;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{font-size:19px;font-weight:800;display:inline-flex;align-items:center;gap:10px;letter-spacing:-.04em}.brand-icon{background:var(--accent);color:var(--on-accent);width:33px;height:33px;border-radius:9px;font-family:Georgia,serif;font-size:26px;line-height:31px;text-align:center}.header-note{font-size:12px;color:var(--muted)}.header-link,.site-header>.quiet{margin-left:auto;font-size:12px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent);display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;background:var(--accent);border-radius:50%}.hero{position:relative;padding:65px 0 50px;border-bottom:1px solid var(--line);overflow:hidden}.hero h1{font-size:43px;font-weight:800;margin:15px 0}.hero-copy{max-width:450px;font-size:15px;color:var(--copy)}.hero-stats{display:flex;gap:27px;margin-top:29px}.hero-stats span{font-size:12px;color:var(--muted);display:flex;align-items:baseline;gap:8px}.hero-stats strong{font-family:Georgia,serif;font-size:30px;font-weight:normal;color:var(--ink)}.hero-art{position:absolute;right:35px;top:70px;width:270px;transform:rotate(-4deg);background:var(--art-bg);border:1px solid var(--art-line);border-radius:17px;padding:24px;box-shadow:12px 14px 0 var(--art-shadow)}.art-label{font-size:9px;letter-spacing:.2em;color:var(--art-label)}.nodes{display:flex;align-items:center;margin:20px 0}.nodes span{height:43px;width:43px;background:var(--surface);border:1px solid var(--art-node-line);border-radius:10px;display:grid;place-items:center;font:16px Georgia,serif}.nodes span:last-child{background:var(--accent);color:var(--on-accent)}.nodes i{width:30px;height:1px;background:var(--art-edge)}.code-note{font:12px/1.8 Consolas,monospace;color:var(--art-code)}.code-note b{color:var(--accent);font-weight:normal}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.section-heading h2{margin-top:6px}.library{padding-top:38px}.tabs{display:flex;padding:4px;border:1px solid var(--line);border-radius:11px;gap:3px;background:var(--tabs-bg)}.tabs button{padding:5px 17px;font-size:13px;border:0;background:transparent;white-space:nowrap}.tabs .active{background:var(--surface);box-shadow:0 1px 4px var(--shadow-tab)}.exam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.exam-card{min-width:0;background:var(--surface);padding:24px;border:1px solid var(--line);border-radius:var(--radius);transition:transform .18s,box-shadow .18s}.exam-card:hover{transform:translateY(-3px);box-shadow:0 7px 25px var(--shadow-card)}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.pill{font-size:11px;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:3px 9px;font-weight:600;display:inline-block;white-space:nowrap}.monthly .pill{color:var(--warm-ink);background:var(--warm-soft)}.neutral{color:var(--muted);background:var(--neutral-bg)}.card-number{font-family:Georgia,serif;font-size:25px;color:var(--faint)}.exam-card h3{font-size:19px;margin-bottom:9px}.card-description{font-size:13px;color:var(--muted);min-height:48px}.card-types{display:flex;gap:12px;padding:18px 0;font-size:11px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}.card-types b{font-size:13px;color:var(--ink);margin-left:3px}.time-setting,.card-setting{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-top:16px}select{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 9px;border-radius:7px;font-size:12px;max-width:100%}.card-actions{display:flex;align-items:center;gap:15px;margin-top:18px}.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-size:13px;font-weight:600}.card-actions .primary{display:flex;flex:1;justify-content:space-between;gap:12px}.study-link{font-size:12px;color:var(--accent);white-space:nowrap}.resume{font-size:12px;margin-top:12px;display:block;color:var(--accent)}.practice-strip{background:var(--strip-bg);margin-top:35px;border-radius:var(--radius);padding:28px;display:grid;grid-template-columns:230px 1fr;gap:28px;border:1px solid var(--line)}.practice-strip h2{font-size:21px;margin:9px 0}.practice-strip p{font-size:12px;color:var(--muted)}.topic-links{display:flex;flex-wrap:wrap;gap:8px;align-content:center}.topic-links a{font-size:12px;padding:6px 12px;border:1px solid var(--chip-line);border-radius:7px;background:var(--chip-bg)}.topic-links a:hover{background:var(--surface)}.records{margin-top:42px}.records h2{font-size:22px}.muted{font-size:12px;color:var(--muted)}.backup-actions{display:flex;gap:8px}.quiet,.file-button{background:transparent;border:1px solid var(--line);border-radius:8px;font-size:12px;padding:8px 13px;display:inline-block;cursor:pointer}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.file-button:focus-within{outline:2px solid var(--accent)}.history{margin-top:18px}.history>a{padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px}.history small{display:block;color:var(--muted);margin-top:3px}.empty,.loading{padding:50px 25px;text-align:center;background:var(--empty-bg);border:1px dashed var(--empty-line);border-radius:12px;color:var(--muted);font-size:13px;margin-top:25px}.empty h1{font-size:25px;color:var(--ink)}.empty a{color:var(--accent);text-decoration:underline}.notice{border-left:3px solid var(--alert);background:var(--notice-bg);padding:14px;font-size:13px;margin-bottom:20px}#notice{font-size:13px;color:var(--accent)}.quiz-top{display:flex;gap:15px;align-items:center;margin-top:25px}.back{font-size:12px;color:var(--muted)}.timer{margin-left:auto;font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}.quiz-title{display:flex;justify-content:space-between;align-items:end;gap:15px;padding:28px 0}.quiz-title h1{font-size:29px;margin-top:6px}.quiz-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}.quiz-sidebar{background:var(--sidebar);border:1px solid var(--line);border-radius:14px;padding:20px;position:sticky;top:20px}.sidebar-heading{display:flex;justify-content:space-between;font-size:13px;font-weight:700}.sidebar-heading span{color:var(--muted);font-size:12px;font-weight:400}.question-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:18px 0}.question-nav button{padding:5px 0;font-size:11px;border-radius:6px;min-width:0}.question-nav .answered{background:var(--answered-bg);border-color:var(--answered-line)}.question-nav .current{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.sidebar-help{font-size:11px;color:var(--muted)}.full{display:block;width:100%;margin-top:20px;text-align:center}.filter-label{font-size:11px;display:block;margin-top:15px;color:var(--muted)}.filter-label select{width:100%;display:block;margin-top:5px}.question-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px;min-width:0}.question-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.question-index{font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:700}.bookmark{border:0;background:transparent;color:var(--bookmark);padding:2px 10px;font-size:22px}.question-panel h2{font-size:23px;margin-bottom:20px;scroll-margin-top:20px}.prose{font-size:14px;line-height:1.9}.prose p+p{margin-top:14px}.prose p{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}.prose code:not(pre code){font-family:Consolas,monospace;background:var(--code-inline-bg);padding:2px 5px;border-radius:3px}pre{background:var(--code-bg);border:1px solid var(--code-line);border-radius:9px;padding:18px;overflow:auto;max-width:100%;font:12px/1.8 Consolas,"D2Coding",monospace;white-space:pre;word-break:normal;overflow-wrap:normal;margin:16px 0}pre code{font:inherit}.choices{border:0;padding:0;margin:26px 0 0;display:grid;gap:11px;grid-auto-rows:1fr;min-width:0}.choice{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid var(--line);border-radius:10px;font-size:14px;cursor:pointer;position:relative;min-width:0;line-height:1.75}.choice:hover{background:var(--hover)}.choice input{position:absolute;opacity:0;width:1px;height:1px}.choice:has(input:checked){border-color:var(--accent);background:var(--selected);box-shadow:inset 0 0 0 1px var(--accent)}.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}.choice-num{display:grid;place-items:center;border:1px solid var(--choice-num-line);border-radius:50%;height:26px;width:26px;flex-shrink:0;font-size:11px;background:var(--surface)}.choice.correct-choice{border-color:var(--accent);background:var(--selected)}.choice>span:last-child{overflow-wrap:anywhere;min-width:0}.question-actions{border-top:1px solid var(--line);padding-top:22px;margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:12px}.question-actions>span{font-size:12px;color:var(--muted)}.answer-label{display:block;margin:23px 0 9px;font-size:12px;font-weight:700}#answer{display:block;width:100%;border:1px solid var(--field-line);border-radius:9px;background:var(--field-bg);padding:14px;color:var(--ink);font-size:14px}textarea{resize:vertical;line-height:1.8;min-height:150px;word-break:keep-all}.code-editor{font-family:Consolas,"D2Coding",monospace!important;font-size:12px!important;white-space:pre;overflow:auto;word-break:normal;overflow-wrap:normal}.editor-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:8px;font-size:11px;color:var(--muted)}.reveal{margin-top:20px}.explanation{margin-top:27px;border-top:2px solid var(--accent);padding-top:22px}.explanation-heading{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:12px}.choice-reasons{margin-top:20px}.choice-reasons>div{display:flex;gap:15px;border-top:1px solid var(--divider);padding:12px 0;font-size:12px}.choice-reasons b{min-width:38px;color:var(--accent)}.model-short{background:var(--model-bg);padding:13px;margin:15px 0;font-size:14px}.model-short b{font-size:12px;margin-right:10px}.examples,.model{margin:20px 0;border:1px solid var(--line);border-radius:9px;padding:12px 16px;min-width:0}summary{font-size:12px;font-weight:700;cursor:pointer}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}.example-grid>div{min-width:0}.example-grid small{color:var(--muted)}.example-grid pre{margin:6px 0}.rubric{margin:25px 0 0;padding:18px;border:1px solid var(--line);border-radius:9px;min-width:0}.rubric legend{font-size:13px;font-weight:700;padding:0 6px}.rubric label{display:flex;gap:10px;align-items:start;font-size:13px;margin:13px 0}.rubric input{accent-color:var(--accent);margin-top:6px}.rubric #grade-status{font-size:11px;color:var(--muted);display:block;margin-top:7px}.complexity{color:var(--muted);font-size:12px}.result-summary{display:flex;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:25px;padding:22px;gap:45px}.result-summary small{color:var(--muted);display:block}.result-summary strong{font-size:26px}.result-summary strong span{font-size:15px;color:var(--muted);font-weight:400}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1000px){.hero-art{right:0;width:225px}.hero h1{font-size:35px}.exam-grid{gap:13px}.exam-card{padding:20px}.card-actions{gap:10px}.quiz-layout{grid-template-columns:180px minmax(0,1fr)}.quiz-sidebar{padding:15px}.question-panel{padding:25px}.practice-strip{grid-template-columns:200px 1fr}}
@media(max-width:760px){main{padding:0 22px 40px}.site-header{padding:0 22px;height:74px}.header-note{display:none}.hero{padding:42px 0 32px}.hero h1{font-size:33px}.hero-art{display:none}.hero-copy{max-width:100%}.hero-stats{gap:25px}.exam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{align-items:center}.practice-strip{display:block;padding:23px}.topic-links{margin-top:18px}.quiz-layout{grid-template-columns:1fr;gap:18px}.quiz-sidebar{position:static}.question-nav{grid-template-columns:repeat(10,1fr);margin:14px 0}.sidebar-help{display:none}.quiz-sidebar .full{margin-top:14px}.quiz-title{display:block}.quiz-title #save-status{margin-top:10px}.filter-label{display:inline-block;margin:12px 12px 0 0;max-width:46%;min-width:115px}.question-panel{padding:24px}.result-summary{gap:25px}.hero-copy br{display:none}footer{padding:25px 22px}}
@media(max-width:480px){.hero h1{font-size:29px}.hero-copy{font-size:14px}.hero-stats strong{font-size:27px}.section-heading{align-items:flex-start;flex-direction:column;gap:15px}.exam-grid{grid-template-columns:1fr;gap:15px}.exam-card{padding:24px}.card-description{min-height:0}.card-top{margin-bottom:15px}.tabs{align-self:stretch}.tabs button{flex:1}.practice-strip h2{font-size:21px}.records>.section-heading{flex-direction:row;align-items:center}.records h2{font-size:18px}.quiet,.file-button{font-size:11px;padding:7px 10px}.question-nav{grid-template-columns:repeat(7,1fr)}.question-panel{padding:22px 18px}.question-panel h2{font-size:20px}.prose,.choice{font-size:13px}.choice{padding:13px 12px;gap:10px}.result-summary{padding:16px;gap:18px;flex-wrap:wrap}.result-summary small{font-size:10px}.result-summary strong{font-size:23px}.quiz-title h1{font-size:26px}.editor-footer{align-items:start;flex-direction:column}.quiz-top{gap:9px}.timer{font-size:12px}.example-grid{grid-template-columns:1fr}.history>a{padding:14px}.history small{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.card-setting{flex-direction:column;align-items:stretch;gap:5px}.card-setting select{width:100%;font-size:13px;padding:8px 10px}.card-setting+.card-setting{margin-top:12px}
.katex{font-size:1.04em}.prose .katex-display{overflow-x:auto;overflow-y:hidden;padding:4px 0}.math-fallback{font-family:ui-monospace,monospace}
.choice.wrong-choice,.choice.wrong-choice:has(input:checked){border-color:var(--wrong-line);background:var(--wrong-bg);box-shadow:inset 0 0 0 1px var(--wrong-line)}
.choice.correct-choice:has(input:checked){box-shadow:inset 0 0 0 1px var(--accent)}
.reveal:disabled{opacity:.45;cursor:not-allowed}.reveal-help{margin:8px 0 0}
.explanation-heading.bad{color:var(--alert)}
.answer-line{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;margin:0 0 10px}.answer-line span{color:var(--muted)}.answer-line b{color:var(--ink)}
.question-nav .is-correct{background:var(--correct-bg);border-color:var(--correct-line);color:var(--accent)}
.question-nav .is-wrong{background:var(--wrong-soft);border-color:var(--wrong-soft-line);color:var(--wrong-ink)}
.question-nav .is-pending{background:var(--neutral-bg);border-style:dashed}
.question-nav button.current{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tally{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;font-size:11px;color:var(--muted)}
.tally span{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 8px}.tally b{font-size:13px;color:var(--ink);margin-left:2px}
.tally .good b,.count.good strong{color:var(--accent)}.tally .bad b,.count.bad strong{color:var(--alert)}
.result-summary{flex-direction:column;gap:16px}.result-summary>p{margin:0}
.counts{display:flex;flex-wrap:wrap;gap:45px}
.review-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.review-filters .tabs{flex-wrap:wrap}
.history-item{margin-top:8px}
.history-item>a:first-child{padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px}
.history small span{margin-left:10px}
.history-score{font-size:12px;color:var(--muted);white-space:nowrap}.history-score b{font-size:15px;color:var(--ink)}
.history-wrong{display:inline-block;margin:6px 0 0 4px;font-size:12px;color:var(--alert)}
@media(max-width:480px){.counts{gap:18px}.history-item>a:first-child{padding:14px}.history small span{display:block;margin:0}}
.topic-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 12px;font-size:14px;font-weight:600}
.topic-line span{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:2px 8px}
.diagram{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--diagram-bg);text-align:center;overflow-x:auto}
.diagram svg{max-width:100%;height:auto}
.diagram line{stroke:var(--diagram-line);stroke-width:1.6}
.diagram .arrowhead{fill:var(--diagram-line)}
.diagram circle{fill:var(--surface);stroke:var(--accent);stroke-width:1.6}
.diagram text{fill:var(--ink);font-size:14px;font-weight:600;text-anchor:middle;dominant-baseline:central}
.diagram text.index{fill:var(--muted);font-size:10px;font-weight:400}
.prose p code,.choice code,.choice-reasons code{white-space:nowrap}
.mode-switch{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.mode-switch select{font-size:12px;padding:5px 8px;color:var(--accent);font-weight:600;border-color:var(--accent-line);background:var(--accent-soft)}
@media(max-width:480px){.quiz-top{flex-wrap:wrap;row-gap:8px}.mode-switch{order:3;width:100%}.mode-switch select{flex:1}}
.snippet{margin:16px 0;min-width:0;border:1px solid var(--code-line);border-radius:9px;background:var(--code-bg);overflow:hidden}
.snippet figcaption{padding:5px 14px;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--code-line);background:var(--code-head)}
.snippet pre{margin:0;border:0;border-radius:0;background:transparent}
.tok-c{color:var(--tok-c);font-style:italic}.tok-s{color:var(--tok-s)}.tok-k{color:var(--tok-k);font-weight:600}.tok-n{color:var(--tok-n)}.tok-t{color:var(--tok-t)}.tok-a{color:var(--tok-a)}.tok-p{color:var(--tok-p)}
@media(max-width:480px){.snippet pre{padding:12px;font-size:11px}}
.track-picker{padding-top:34px}
.track-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
.track-button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:20px 24px;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--surface);text-align:left}
.track-button strong{font-size:19px;letter-spacing:-.03em}
.track-button span{font-size:12px;color:var(--muted)}
.track-button:hover:not(:disabled){border-color:var(--accent)}
.track-button.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.track-button.active strong{color:var(--accent)}
@media(max-width:480px){.track-buttons{grid-template-columns:minmax(0,1fr)}.track-button{padding:16px 18px}}

.note-buttons{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.note-button{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--accent);border-radius:999px;background:var(--surface);color:var(--accent);font-size:13px;font-weight:700}
.note-button:hover{background:var(--accent);color:var(--on-accent)}
.note-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start;padding-top:30px}
.note-toc{position:sticky;top:20px;background:var(--sidebar);border:1px solid var(--line);border-radius:14px;padding:14px 16px;max-height:calc(100vh - 40px);overflow:auto}
.note-toc summary{font-size:13px}
.note-toc ul{list-style:none;margin:10px 0 0;padding:0;font-size:12px}
.note-toc li{margin:2px 0}.note-toc li.level-3{padding-left:12px;color:var(--muted)}
.note-toc a{display:block;padding:3px 0;word-break:keep-all}.note-toc a:hover{color:var(--accent)}
.note{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:34px;min-width:0;font-size:14px;line-height:1.9}
.note h1{font-size:28px;margin-bottom:12px}
.note h2{font-size:23px;margin:46px 0 14px;padding-top:26px;border-top:2px solid var(--accent);scroll-margin-top:16px}
.note h1+p+h2{margin-top:30px}
.note h3{font-size:17px;margin:30px 0 10px;scroll-margin-top:16px}
.note p{margin:10px 0}
.note ul,.note ol{margin:10px 0;padding-left:22px}.note li{margin:3px 0}
.note li.task{list-style:none;margin-left:-20px}.note li.task input{margin-right:6px;accent-color:var(--accent)}
.note code:not(pre code){font-family:Consolas,monospace;background:var(--code-inline-bg);padding:1px 5px;border-radius:3px;font-size:.92em}
.note .snippet{margin:14px 0}
.note-table{margin:14px 0;overflow-x:auto;max-width:100%}
.note table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px;line-height:1.7}
.note th,.note td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere}
.note th{background:var(--table-head);white-space:nowrap}
.note td code{white-space:nowrap}.note li code,.note p code{overflow-wrap:anywhere}
@media(max-width:900px){.note-layout{grid-template-columns:minmax(0,1fr)}.note-toc{position:static;max-height:none}.note{padding:22px 18px}}
@media(max-width:480px){.note h1{font-size:23px}.note h2{font-size:20px}}

.note-button:disabled{border-style:dashed;color:var(--muted);border-color:var(--line);background:transparent;cursor:default;opacity:1}.note-button small{font-size:11px}
.track-picker .note-buttons{margin-top:14px}

/* SW역량테스트: home link, table of contents and problem pages */
.track-button.sw-link{border-style:dashed}.track-button.sw-link:hover{border-style:solid;border-color:var(--accent)}.track-button.sw-link strong{color:var(--accent)}
.sw-intro{padding:38px 0 6px}.sw-intro h1{font-size:34px;margin:8px 0 10px;letter-spacing:-.03em}.sw-lead{max-width:640px;margin:0;color:var(--muted)}
.sw-disclaimer{display:inline-block;margin:16px 0 0;padding:8px 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:13px}
.sw-tier{margin-top:34px}.sw-tier h2{font-size:15px;margin:0 0 12px;color:var(--accent);letter-spacing:.02em}
.sw-cards,.sw-groups,.sw-groups ol{list-style:none;margin:0;padding:0}
.sw-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sw-card{display:flex;align-items:center;gap:16px;height:100%;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.sw-card:hover,.sw-card:focus-visible{border-color:var(--accent)}
.sw-rank{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700}
.sw-card-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.sw-card-body strong{font-size:16px}.sw-card-body small{font-size:12px;font-weight:400;color:var(--muted)}
.sw-card-type{font-size:11px;font-weight:700;color:var(--accent)}.sw-card-summary{font-size:13px;line-height:1.6;color:var(--muted)}
.sw-go{color:var(--accent);font-size:18px}
.sw-nav .sw-home{display:block;margin:8px 0 4px;font-size:12px;font-weight:700;color:var(--accent)}
.sw-group-label{display:block;margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.sw-groups ol>li>a{display:flex;align-items:center;gap:8px;padding:4px 0}.sw-groups a:hover{color:var(--accent)}
.sw-groups a.active{font-weight:700;color:var(--accent)}
.sw-nav .sw-rank{min-width:22px;height:22px;font-size:11px;background:var(--rank-soft);color:var(--accent)}.sw-nav a.active .sw-rank{background:var(--accent);color:var(--on-accent)}
.sw-head h1{margin:6px 0 10px}.sw-head h1 small{margin-left:8px;font-size:15px;font-weight:400;color:var(--muted)}
.sw-crumb{margin:0;font-size:13px}.sw-crumb a{color:var(--accent)}
.sw-meta{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.sw-chip{padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700}.sw-chip.rank{background:var(--accent);color:var(--on-accent)}
.sw-basis{margin:8px 0;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--basis-bg);font-size:13px}
.sw-links{margin:6px 0 0;font-size:13px;color:var(--muted)}.sw-links a{margin-left:10px;font-weight:600;color:var(--accent)}
.sw-pager{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}.sw-pager a{font-weight:700;color:var(--accent)}
@media(max-width:760px){.sw-cards{grid-template-columns:minmax(0,1fr)}.sw-intro h1{font-size:28px}.sw-card{padding:16px}}

/* Dark theme: only the colour tokens change. theme.js sets data-theme="dark" for the dark choice or a dark system setting. */
:root[data-theme="dark"]{color-scheme:dark;
--paper:#14181a;--surface:#1c2220;--ink:#e4e9e5;--muted:#9aa5a0;--copy:#a3aea8;--faint:#4a544f;--line:#2f3935;--line-soft:#2a332f;--divider:#2a332f;
--accent:#7fc3a0;--accent-soft:#233a30;--accent-line:#35564a;--on-accent:#0f1a15;--alert:#e08d63;--focus:#e0b06a;
--hover:#222a27;--selected:#223a2f;--neutral-bg:#262e2b;--tabs-bg:#101412;--strip-bg:#1a201e;--sidebar:#1a201e;--table-head:#232b28;--basis-bg:#1a211e;--model-bg:#202824;
--shadow-tab:#00000040;--shadow-card:#00000040;
--chip-line:#34403b;--chip-bg:#ffffff0d;--empty-bg:#ffffff08;--empty-line:#35403b;--notice-bg:#33271c;
--warm-ink:#e0a07a;--warm-soft:#3a2b20;--bookmark:#d6a964;--rank-soft:#2c443a;
--answered-bg:#25392f;--answered-line:#3a5a49;--correct-bg:#254033;--correct-line:#4c8a6a;
--wrong-bg:#3a2620;--wrong-line:#b9704f;--wrong-soft:#3a2822;--wrong-soft-line:#8a5a44;--wrong-ink:#f0a98a;
--choice-num-line:#3b4743;--field-bg:#171d1b;--field-line:#3b4743;
--code-bg:#171d1b;--code-line:#2c3733;--code-head:#1f2724;--code-inline-bg:#262f2b;
--diagram-bg:#171d1b;--diagram-line:#7f8b85;
--art-bg:#1f2623;--art-line:#2f3935;--art-shadow:#0000004d;--art-label:#8e9a8f;--art-node-line:#3f4c45;--art-edge:#55645b;--art-code:#97a398;
--tok-c:#8a9890;--tok-s:#e0a07a;--tok-k:#7fd09a;--tok-n:#e0b866;--tok-t:#7fd09a;--tok-a:#b79ae6;--tok-p:#b79ae6}

/* Theme picker in the site header */
.theme-picker{position:relative;display:inline-flex}.theme-button{font-size:12px;padding:6px 14px}
.theme-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:grid;gap:12px;width:210px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px var(--shadow-card)}.theme-panel[hidden]{display:none}
.theme-field{display:grid;gap:5px}.theme-label{font-size:12px;font-weight:700;color:var(--muted)}.theme-panel select{width:100%;font-size:13px;padding:7px 9px}
.sw-toggle{display:inline-flex;margin-top:24px}.sw-toggle+.sw-solution .sw-idea>h2:first-child{margin-top:20px}
/* The site name is longer than before, so narrow headers keep each item on one line. */
@media(max-width:480px){.site-header{flex-wrap:wrap;height:auto;min-height:74px;padding-top:12px;padding-bottom:12px;gap:8px 12px}.brand{white-space:nowrap;font-size:17px;gap:8px}.brand-icon{width:28px;height:28px}.header-link,.site-header>.quiet{white-space:nowrap}.theme-picker select{padding:4px 6px}}

/* SW역량테스트: contents toggle, foldable model code beside the learner's own code box */
.sw-tools{padding:22px 0 12px}.sw-tools button,.sw-fold{font-size:12px;padding:6px 12px}
.sw-nav{margin-bottom:14px;padding:16px 20px;background:var(--sidebar);border:1px solid var(--line);border-radius:14px}.sw-nav[hidden]{display:none}
.sw-nav .sw-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px 24px;margin-top:6px}
.sw-nav .sw-group-label{margin-top:8px}
.note-layout.sw-single{grid-template-columns:minmax(0,1fr);padding-top:0}
.note .sw-code-head{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin:46px 0 14px;padding-top:26px;border-top:2px solid var(--accent)}
.note .sw-code-head h2{margin:0;padding:0;border:0}
.sw-code-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.sw-code-ref[hidden]{display:none}.sw-code-ref .snippet{margin:0}
.sw-code-mine{display:flex;flex-direction:column;gap:8px;min-width:0}.sw-code-mine label{font-size:12px;font-weight:700;color:var(--accent)}
.sw-draft-help{margin:0;font-size:11px;line-height:1.6;color:var(--muted)}
.sw-code-mine textarea{width:100%;min-height:320px;padding:14px;border:1px solid var(--field-line);border-radius:9px;background:var(--field-bg);color:var(--ink);tab-size:4;line-height:1.7}
@media(max-width:760px){.sw-code-mine textarea{min-height:280px}}

/* Colour palettes. The theme picker sets html[data-palette]; "default" keeps the original tokens above.
   Each palette gives a light and a dark token list so it works with the light, dark and system choices. */
:root[data-palette="blue"]{
--paper:#f4f7fb;--surface:#fff;--ink:#1c2733;--muted:#6b7a8c;--copy:#66758a;--faint:#c5cfdc;--line:#dde4ee;--line-soft:#e9eef5;--divider:#ebeff6;
--accent:#1f5fa8;--accent-soft:#e8f0fa;--accent-line:#c3d6ee;--on-accent:#fff;--alert:#c0643a;--focus:#b8782a;
--hover:#f5f8fc;--selected:#e8f0fa;--neutral-bg:#eef2f8;--tabs-bg:#e9eef6;--strip-bg:#e9eff7;--sidebar:#edf2f9;--table-head:#e8eef7;--basis-bg:#f4f7fc;--model-bg:#eef3fa;
--shadow-tab:#1f2f4412;--shadow-card:#1f3d7a08;
--chip-line:#cdd9e8;--chip-bg:#ffffff70;--empty-bg:#e9eef64d;--empty-line:#d3dce9;--notice-bg:#fbf1e6;
--warm-ink:#9c5c36;--warm-soft:#faf0e7;--bookmark:#b98c4e;--rank-soft:#c8d8ec;
--answered-bg:#d6e4f5;--answered-line:#b9d0ec;--correct-bg:#d9eadf;--correct-line:#8fbf9f;
--wrong-bg:#fbf0ea;--wrong-line:#d99a7c;--wrong-soft:#f8e6dc;--wrong-soft-line:#e2b49c;--wrong-ink:#9c4a28;
--choice-num-line:#d3dce9;--field-bg:#fbfcfe;--field-line:#c3cedd;
--code-bg:#f2f5fa;--code-line:#e0e6f0;--code-head:#e8edf5;--code-inline-bg:#edf1f8;
--diagram-bg:#f8fafd;--diagram-line:#8693a5;
--art-bg:#e9eef6;--art-line:#d5deea;--art-shadow:#dde5f066;--art-label:#728096;--art-node-line:#c8d4e4;--art-edge:#a8b6ca;--art-code:#76839a;
--tok-c:#728096;--tok-s:#9c5c36;--tok-k:#1f5fa8;--tok-n:#8a5a00;--tok-t:#1f6b6b;--tok-a:#6b4e9c;--tok-p:#6b4e9c}
:root[data-palette="blue"][data-theme="dark"]{
--paper:#10161d;--surface:#18202a;--ink:#e3e9f1;--muted:#97a4b5;--copy:#a1aebd;--faint:#465366;--line:#2b3644;--line-soft:#252f3b;--divider:#252f3b;
--accent:#7db2ee;--accent-soft:#1f3249;--accent-line:#33506f;--on-accent:#0c1622;--alert:#e08d63;--focus:#e0b06a;
--hover:#1e2833;--selected:#1f3249;--neutral-bg:#222c38;--tabs-bg:#0d1218;--strip-bg:#151d26;--sidebar:#151d26;--table-head:#1f2935;--basis-bg:#161e28;--model-bg:#1b2531;
--shadow-tab:#00000040;--shadow-card:#00000040;
--chip-line:#334150;--chip-bg:#ffffff0d;--empty-bg:#ffffff08;--empty-line:#334150;--notice-bg:#33271c;
--warm-ink:#e0a07a;--warm-soft:#3a2b20;--bookmark:#d6a964;--rank-soft:#27425f;
--answered-bg:#213a55;--answered-line:#365a82;--correct-bg:#254033;--correct-line:#4c8a6a;
--wrong-bg:#3a2620;--wrong-line:#b9704f;--wrong-soft:#3a2822;--wrong-soft-line:#8a5a44;--wrong-ink:#f0a98a;
--choice-num-line:#394656;--field-bg:#131a22;--field-line:#394656;
--code-bg:#131a22;--code-line:#28333f;--code-head:#1b242e;--code-inline-bg:#222c38;
--diagram-bg:#131a22;--diagram-line:#7d8a9b;
--art-bg:#1b242e;--art-line:#2b3644;--art-shadow:#0000004d;--art-label:#8c99ab;--art-node-line:#3b4959;--art-edge:#53647a;--art-code:#95a2b5;
--tok-c:#8794a6;--tok-s:#e0a07a;--tok-k:#7db2ee;--tok-n:#e0b866;--tok-t:#6fd0c8;--tok-a:#b79ae6;--tok-p:#b79ae6}
:root[data-palette="mono"]{
--paper:#f5f5f5;--surface:#fff;--ink:#1a1a1a;--muted:#6e6e6e;--copy:#6a6a6a;--faint:#c8c8c8;--line:#e0e0e0;--line-soft:#ececec;--divider:#ececec;
--accent:#262626;--accent-soft:#ececec;--accent-line:#d0d0d0;--on-accent:#fff;--alert:#a6522c;--focus:#555;
--hover:#f7f7f7;--selected:#ececec;--neutral-bg:#efefef;--tabs-bg:#ebebeb;--strip-bg:#ececec;--sidebar:#efefef;--table-head:#ececec;--basis-bg:#f6f6f6;--model-bg:#f0f0f0;
--shadow-tab:#00000012;--shadow-card:#00000008;
--chip-line:#d4d4d4;--chip-bg:#ffffff70;--empty-bg:#ebebeb4d;--empty-line:#d6d6d6;--notice-bg:#f3ede6;
--warm-ink:#6a5a4a;--warm-soft:#efeae4;--bookmark:#7a7a7a;--rank-soft:#d4d4d4;
--answered-bg:#e0e0e0;--answered-line:#c8c8c8;--correct-bg:#e2e8e2;--correct-line:#8fa38f;
--wrong-bg:#f4ebe7;--wrong-line:#c28b78;--wrong-soft:#f1e5df;--wrong-soft-line:#d3ab9b;--wrong-ink:#8f4a30;
--choice-num-line:#d6d6d6;--field-bg:#fbfbfb;--field-line:#c8c8c8;
--code-bg:#f3f3f3;--code-line:#e2e2e2;--code-head:#eaeaea;--code-inline-bg:#ececec;
--diagram-bg:#fafafa;--diagram-line:#8c8c8c;
--art-bg:#ececec;--art-line:#dadada;--art-shadow:#e4e4e466;--art-label:#7a7a7a;--art-node-line:#cfcfcf;--art-edge:#b0b0b0;--art-code:#808080;
--tok-c:#7a7a7a;--tok-s:#555;--tok-k:#111;--tok-n:#333;--tok-t:#222;--tok-a:#666;--tok-p:#666}
:root[data-palette="mono"][data-theme="dark"]{
--paper:#121212;--surface:#1b1b1b;--ink:#e8e8e8;--muted:#a0a0a0;--copy:#a8a8a8;--faint:#555;--line:#303030;--line-soft:#292929;--divider:#292929;
--accent:#d8d8d8;--accent-soft:#2a2a2a;--accent-line:#454545;--on-accent:#111;--alert:#e08d63;--focus:#ddd;
--hover:#222;--selected:#2a2a2a;--neutral-bg:#262626;--tabs-bg:#0e0e0e;--strip-bg:#181818;--sidebar:#181818;--table-head:#242424;--basis-bg:#181818;--model-bg:#1f1f1f;
--shadow-tab:#00000040;--shadow-card:#00000040;
--chip-line:#3a3a3a;--chip-bg:#ffffff0d;--empty-bg:#ffffff08;--empty-line:#3a3a3a;--notice-bg:#33271c;
--warm-ink:#c9a98a;--warm-soft:#2f2923;--bookmark:#aaa;--rank-soft:#3a3a3a;
--answered-bg:#2e2e2e;--answered-line:#484848;--correct-bg:#243326;--correct-line:#5c8a62;
--wrong-bg:#3a2620;--wrong-line:#b9704f;--wrong-soft:#3a2822;--wrong-soft-line:#8a5a44;--wrong-ink:#f0a98a;
--choice-num-line:#444;--field-bg:#161616;--field-line:#444;
--code-bg:#161616;--code-line:#2e2e2e;--code-head:#202020;--code-inline-bg:#262626;
--diagram-bg:#161616;--diagram-line:#888;
--art-bg:#1f1f1f;--art-line:#303030;--art-shadow:#0000004d;--art-label:#909090;--art-node-line:#444;--art-edge:#5a5a5a;--art-code:#9a9a9a;
--tok-c:#8a8a8a;--tok-s:#bdbdbd;--tok-k:#fff;--tok-n:#cfcfcf;--tok-t:#e0e0e0;--tok-a:#aaa;--tok-p:#aaa}
/* Without colour, monochrome code tells its tokens apart by weight and slant. */
:root[data-palette="mono"] .tok-k,:root[data-palette="mono"] .tok-t{font-weight:700}
:root[data-palette="mono"] .tok-c{font-style:italic}

/* Java snippets use the Eclipse editor colours: keywords and literals purple-red and bold, strings blue, comments green, Javadoc blue-grey, annotations grey,
   everything else the normal text colour. The dark set follows the Eclipse dark theme. */
.snippet[data-lang="java"] .tok-k{color:#7f0055;font-weight:700}
.snippet[data-lang="java"] .tok-s{color:#2a00ff}
.snippet[data-lang="java"] .tok-c{color:#3f7f5f;font-style:normal}
.snippet[data-lang="java"] .tok-d{color:#3f5fbf;font-style:normal}
.snippet[data-lang="java"] .tok-a{color:#646464}
.snippet[data-lang="java"] .tok-n{color:inherit}
:root[data-theme="dark"] .snippet[data-lang="java"] .tok-k{color:#cc7832}
:root[data-theme="dark"] .snippet[data-lang="java"] .tok-s{color:#6a8759}
:root[data-theme="dark"] .snippet[data-lang="java"] .tok-c{color:#808080}
:root[data-theme="dark"] .snippet[data-lang="java"] .tok-d{color:#629755}
:root[data-theme="dark"] .snippet[data-lang="java"] .tok-a{color:#bbb529}
:root[data-theme="dark"] .snippet[data-lang="java"] .tok-n{color:#6897bb}

/* SW역량테스트 problem page: idea on the left, code on the right. Narrow screens stack them. */
.sw-wide main,.sw-wide .site-header,.sw-wide footer{max-width:1560px}
.sw-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:32px;align-items:start}
.sw-idea,.sw-code{min-width:0}
.note .sw-split .sw-idea>h2:first-child,.note .sw-split .sw-code-head{margin-top:46px}
@media(max-width:1100px){.sw-split{grid-template-columns:minmax(0,1fr);gap:0}}
/* Long lines in the model code wrap instead of scrolling sideways, so the whole code is always visible. */
.sw-code-ref pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}