:root {
  --paper: #f4f0e7; --paper-deep: #e9e1d3; --ink: #20231f; --muted: #64675f;
  --line: #cfc6b6; --green: #294c3a; --green-2: #3e6c55; --amber: #c98228;
  --red: #9a3f35; --white: #fffdf8; --shadow: 0 18px 50px rgba(36, 39, 32, .09);
  --serif: Georgia, "Times New Roman", "Noto Serif KR", serif;
  --sans: Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, sans-serif;
}
.sheet-masthead { display:flex;justify-content:space-between;gap:1rem;padding:2rem;border-bottom:3px solid var(--green);align-items:center; }
.sheet-masthead h2 { font-size:2rem;margin-bottom:.5rem; }.sheet-masthead p { margin-bottom:0; }.sheet-masthead>span { font-size:12px;color:var(--muted); }
.sheet-entry { padding:1.5rem 2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-bottom:1px solid var(--line); }.sheet-entry .fine-print { margin:0;align-self:end; }
.scale-guide { padding:0 2rem;font-size:12px;color:var(--muted); }.sheet-progress { display:flex;justify-content:space-between;gap:1rem;padding:1rem 2rem;background:var(--green);color:var(--paper);font-size:13px; }.form-message { margin:1rem 2rem;color:var(--red); }
@media(max-width:720px) { .sheet-masthead { flex-direction:column;align-items:flex-start;padding:1.2rem; }.sheet-entry { grid-template-columns:1fr;padding:1.2rem; }.sheet-progress { flex-direction:column; }.sheet-footer { flex-wrap:wrap; } }
[data-theme="dark"] { --paper:#1d211e; --paper-deep:#262c28; --ink:#f2eee4; --muted:#b6b7af; --line:#495049; --green:#9bc5ad; --green-2:#b4d8c2; --white:#252a26; --shadow:0 18px 50px rgba(0,0,0,.25); }
* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(#7f796d 0.45px,transparent .45px); background-size:7px 7px; z-index:-1; }
a { color: var(--green-2); text-underline-offset: 3px; }
button,input,textarea,select { font: inherit; color: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; background:var(--ink); color:var(--paper); padding:.7rem 1rem; }
.skip-link:focus { top:1rem; }
.site-header { height:78px; padding:0 clamp(1rem,4vw,4rem); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(12px); position:sticky; top:0; z-index:20; }
.brand { display:flex; gap:.75rem; align-items:center; color:var(--ink); text-decoration:none; }
.brand-mark { border:1px solid var(--green); color:var(--green); width:40px; height:40px; display:grid; place-items:center; font:bold 13px var(--serif); transform:rotate(-2deg); }
.brand b,.brand small { display:block; }.brand b { font:600 16px var(--serif); letter-spacing:.02em; }.brand small { font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
nav { display:flex; gap:1.2rem; align-items:center; } nav a,.text-button { font-size:14px; color:var(--ink); text-decoration:none; }
.page-shell { width:min(1440px,100%); margin:auto; padding:clamp(2rem,5vw,5rem) clamp(1rem,4vw,4rem); min-height:calc(100vh - 150px); }
.site-footer { border-top:1px solid var(--line); padding:1rem 4vw; color:var(--muted); font-size:12px; text-align:center; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); } h1 { font-size:clamp(2.35rem,5vw,5.7rem); line-height:.98; letter-spacing:-.045em; font-weight:500; } h2 { line-height:1.1; }
.eyebrow { margin-bottom:.65rem; color:var(--green-2); font-weight:800; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.lead { color:var(--muted); font-size:clamp(1rem,2vw,1.25rem); max-width:640px; }
.muted,.fine-print { color:var(--muted); }.fine-print { font-size:12px; }
.hero { min-height:65vh; display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(3rem,8vw,9rem); align-items:center; }
.hero h1 em { color:var(--green); font-style:italic; }.hero .actions { margin-top:2rem; }
.lab-card { background:var(--green); color:#f6f1e6; padding:clamp(1.5rem,4vw,3rem); box-shadow:var(--shadow); transform:rotate(1deg); }.lab-card h2 { font-size:2rem; }.specimen-number { font:700 10px var(--sans); letter-spacing:.16em; opacity:.7; }.scope-list>div { padding:1rem 0; border-top:1px solid rgba(255,255,255,.25); }.scope-list dt { font-weight:800; font-size:12px; text-transform:uppercase; }.scope-list dd { margin:.35rem 0 0; opacity:.85; }.callout { border:1px solid rgba(255,255,255,.3); padding:.8rem; font-size:13px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.65rem 1.2rem; border:1px solid var(--green); text-decoration:none; font-weight:750; font-size:14px; cursor:pointer; transition:.18s; background:transparent; border-radius:2px; }.button:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,50,40,.14); }.button.primary { background:var(--green); color:var(--paper); }.button.ghost { color:var(--green-2); }.button.danger { background:var(--red); color:#fff; border-color:var(--red); }.button.wide { width:100%; }
.actions { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }.inline-form { display:inline; }.text-button,.quiet { border:0; background:none; padding:.25rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }.danger-text { color:var(--red); }
.panel { background:var(--white); border:1px solid var(--line); padding:clamp(1.2rem,3vw,2.2rem); box-shadow:var(--shadow); }
.page-heading { margin-bottom:2.5rem; max-width:980px; }.page-heading h1 { font-size:clamp(2.5rem,5vw,5rem); margin-bottom:.6rem; }.page-heading>p:last-child { color:var(--muted); }.split,.section-title { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }.section-title { margin-bottom:1.5rem; }.section-title h2 { margin:0; }.section-title .eyebrow { margin-bottom:.25rem; }
.auth-layout { max-width:1050px; margin:4vh auto; display:grid; grid-template-columns:1.2fr .8fr; gap:6vw; align-items:center; }.auth-copy h1 { font-size:clamp(3rem,6vw,6rem); }.auth-copy p:last-child { color:var(--muted); max-width:430px; }.auth-form { display:grid; gap:1.2rem; }.auth-form h2 { font-size:2rem; }
label { display:grid; gap:.4rem; font-size:13px; font-weight:700; } input,textarea,select { width:100%; border:1px solid var(--line); background:var(--paper); padding:.75rem .85rem; border-radius:0; } textarea { resize:vertical; line-height:1.65; } input[type="checkbox"],input[type="radio"] { width:auto; accent-color:var(--green); }.alert { padding:.8rem 1rem; background:var(--paper-deep); border-left:4px solid var(--amber); }.alert.error { border-color:var(--red); }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }.metric-grid article { border-top:3px solid var(--green); background:var(--white); padding:1.25rem; }.metric-grid span,.metric-grid small { color:var(--muted); display:block; font-size:12px; }.metric-grid strong { font:500 2.6rem var(--serif); }
.two-column { display:grid; grid-template-columns:1.25fr .75fr; gap:1.5rem; }.wide-left { grid-template-columns:1.5fr .5fr; }.record-row,.table-row { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; border-top:1px solid var(--line); padding:1rem .25rem; text-decoration:none; color:var(--ink); }.record-row small,.table-row small,.scenario-row small { display:block; color:var(--muted); }.row-end { font-size:13px; }.status-dot { width:9px; height:9px; border-radius:50%; background:var(--amber); }.status-dot.submitted { background:var(--green); }.empty-state { padding:3rem 1rem; text-align:center; color:var(--muted); }.empty-state span { font:italic 1.8rem var(--serif); }.task-card { border-top:1px solid var(--line); padding:1.2rem 0; }.task-card h3 { font-family:var(--serif); }.task-card p { font-size:13px; }.download-links { margin-top:1.5rem; font-size:13px; }
.progress-panel { margin-top:1.5rem; }.progress-grid { display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:2rem; }.progress-grid h3 { font-family:var(--serif); }.mini-bar { display:grid;grid-template-columns:110px 1fr 35px;gap:.6rem;align-items:center;margin:.65rem 0;font-size:12px; }.mini-bar i { display:block;height:5px;background:var(--paper-deep); }.mini-bar b { display:block;height:100%;background:var(--green); }.compact-stats { margin:0; }.compact-stats>div { display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:.55rem 0; }.compact-stats dt { color:var(--muted); }.compact-stats dd { margin:0;font-weight:700; }
.mode-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; border:0; padding:0; margin:0 0 2rem; }.mode-picker legend { font:bold 12px var(--sans); margin-bottom:.65rem; }.mode-picker label { display:block; position:relative; }.mode-picker input { position:absolute; opacity:0; }.mode-picker span { min-height:110px; display:flex; flex-direction:column; padding:1rem; border:1px solid var(--line); cursor:pointer; }.mode-picker b { font:600 18px var(--serif); }.mode-picker small { color:var(--muted); margin-top:.4rem; }.mode-picker input:checked+span { border:2px solid var(--green); background:color-mix(in srgb,var(--green) 8%,var(--white)); }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.check-row { display:flex; align-items:center; align-self:end; min-height:45px; }.scenario-catalog { margin:2rem 0; padding:1rem 0; border-block:1px solid var(--line); }.scenario-catalog h2 { font-size:1.1rem; }.chip-row { display:flex; gap:.5rem; flex-wrap:wrap; }.chip-row span,.badge { border:1px solid var(--line); padding:.25rem .5rem; font-size:11px; }.badge.reviewed { border-color:var(--green); color:var(--green-2); }.badge.draft { border-color:var(--amber); color:var(--amber); }
.attempt-shell { max-width:1200px; margin:auto; }.attempt-header { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:1.5rem; }.attempt-header h1 { font-size:clamp(2rem,4vw,4rem); margin-bottom:.4rem; }.attempt-tools { display:flex; gap:1.5rem; align-items:center; }.timer { border-left:2px solid var(--green); padding-left:1rem; }.timer span,.timer small { display:block; color:var(--muted); font-size:11px; }.timer strong { font:500 2rem/1 var(--serif); font-variant-numeric:tabular-nums; }.timer.warning { border-color:var(--amber); }.timer.urgent { border-color:var(--red); }.save-state { display:flex; gap:.45rem; align-items:center; font-size:12px; }.save-dot { width:8px;height:8px;border-radius:50%;background:var(--green); }.save-state.pending .save-dot { background:var(--amber); }.save-state.error .save-dot { background:var(--red); }
.sample-bench { display:grid; grid-template-columns:230px 1fr; gap:3rem; align-items:center; padding:3rem 2rem; margin:2rem 0; background:var(--green); color:#f4efe3; }.beer-visual { height:255px; width:145px; margin:auto; border:5px solid rgba(255,255,255,.35); border-top-width:2px; border-radius:8px 8px 28px 28px; display:flex; align-items:flex-end; padding:8px; box-shadow:inset 5px 0 10px rgba(255,255,255,.15); }.beer-visual span { display:block; width:100%; height:82%; border-radius:4px 4px 20px 20px; background:linear-gradient(to bottom,var(--head-color) 0 14%,color-mix(in srgb,var(--beer-color) calc((1 - var(--haze))*100%),white) 15%,var(--beer-color) 100%); box-shadow:0 0 calc(var(--haze)*25px) rgba(255,255,255,.55) inset; }.sample-bench .eyebrow { color:#bad5c5; }.sample-notes>p { opacity:.8; }.cue-tabs { display:flex; gap:.5rem; flex-wrap:wrap; }.cue-button { border:1px solid rgba(255,255,255,.35); color:#fff; background:transparent; padding:.5rem .7rem; cursor:pointer; }.cue-button.revealed { background:#f5efe4; color:#264735; }.cue-card { margin-top:1rem; border-left:2px solid #cf9a4a; padding:.2rem 1rem; }.cue-card span { font-size:11px; opacity:.7; }.hint { margin-top:1.2rem; font-size:13px; }.hint a { color:#fff; }
.paper-upload { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }.paper-upload form { display:flex; gap:.5rem; align-items:end; }.scoresheet { background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); }.sheet-meta { display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:2rem; padding:1.2rem 2rem; border-bottom:1px solid var(--line); }.sheet-meta div span { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; }.sheet-section { display:grid; grid-template-columns:230px 1fr 105px; gap:1.5rem; padding:2rem; border-bottom:1px solid var(--line); align-items:start; }.section-label { display:flex; gap:1rem; }.section-label>span { font:italic 1.5rem var(--serif); color:var(--green-2); }.section-label h2 { font-size:1.25rem; margin-bottom:.4rem; }.section-label p { color:var(--muted); font-size:12px; }.sheet-section textarea { min-height:130px; background:transparent; background-image:linear-gradient(transparent calc(1.65em - 1px),var(--paper-deep) 1px); background-size:100% 1.65em; border:0; border-left:1px solid var(--line); }.score-box { display:grid; grid-template-columns:1fr; text-align:center; }.score-box input { font:500 2rem var(--serif); text-align:center; background:var(--paper); }.score-box b { font-size:12px; }.descriptor-checks { padding:2rem; display:grid; grid-template-columns:220px repeat(4,1fr); gap:.6rem 1rem; border-bottom:1px solid var(--line); }.descriptor-checks label { display:flex; align-items:center; gap:.4rem; font-weight:500; }.bottom-scales { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1.5rem 2rem; border-bottom:1px solid var(--line); }.confirm-row { display:flex; gap:.5rem; padding:1rem 2rem; }.sheet-footer { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 2rem; background:var(--paper-deep); }.total-score strong { font:500 3rem var(--serif); }.total-score span { display:block; font-size:11px; }.sheet-footer>div:last-child { text-align:right; }.lock-note { font-size:11px;color:var(--muted); }.scoresheet.locked { pointer-events:none; opacity:.7; } dialog { max-width:520px; border:1px solid var(--line); background:var(--white); color:var(--ink); padding:2rem; box-shadow:var(--shadow); } dialog::backdrop { background:rgba(20,25,21,.65); }
.result-hero { display:flex; justify-content:space-between; align-items:end; margin-bottom:2rem; }.result-hero h1 { font-size:clamp(2.5rem,5vw,5rem); margin-bottom:.5rem; }.score-ledger { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.score-ledger article { min-height:210px; padding:1.6rem; display:flex; flex-wrap:wrap; align-content:flex-start; background:var(--green); color:#f5efe4; }.score-ledger article:nth-child(2) { background:var(--ink); }.score-ledger article:nth-child(3) { background:var(--amber); }.score-ledger span,.score-ledger p { width:100%; font-size:12px; }.score-ledger strong { font:500 5rem/1 var(--serif); }.score-ledger small { align-self:flex-end;margin-bottom:.6rem; }.simulation-notice { margin:1rem 0; border:1px solid var(--amber); padding:1rem 1.25rem; display:flex; gap:1rem; }.simulation-notice p { margin:0; color:var(--muted); }.component-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:2rem 0; }.component-grid article { background:var(--white); padding:1rem; }.component-grid span { font-size:11px; display:block; min-height:35px; }.component-grid strong { font:500 2rem var(--serif); }.score-bar { height:3px;background:var(--paper-deep); margin-top:.5rem; }.score-bar i { display:block;height:100%;background:var(--green); }.feedback-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:2rem; }.feedback-block { padding:2rem 0; border-top:1px solid var(--line); }.feedback-block h2 { font-size:2rem; }.feedback-block li { margin-bottom:.55rem; }.feedback-block blockquote,.evidence blockquote,.ai-evidence blockquote { margin:1rem 0; padding:1rem; border-left:3px solid var(--amber); background:var(--paper-deep); }.positive { border-top:3px solid var(--green); }.feedback-layout aside { display:grid; align-content:start; gap:1rem; }.study-plan article { display:grid; grid-template-columns:30px 1fr; border-top:1px solid var(--line); padding:1rem 0; }.study-plan article>span { font:italic 1.3rem var(--serif);color:var(--green); }.study-plan article h3,.study-plan article p { grid-column:2; }.study-plan article p { font-size:12px; }.next-rec { border:1px solid var(--green);padding:1rem; }.ai-supplement { margin:2rem 0; border-top:4px solid var(--amber); }.ai-feedback-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2rem;margin:1.5rem 0; }.ai-feedback-grid>div,.ai-tasks article { border-top:1px solid var(--line);padding-top:1rem; }.ai-tasks { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem; }.ai-tasks>h3 { grid-column:1/-1;margin-bottom:0; }.ai-tasks p { font-size:12px; }.reviewer-note { margin:2rem 0; border-top:4px solid var(--green); }.result-actions { display:flex; gap:1rem; align-items:center; justify-content:flex-end; margin-top:2rem; }.exam-summary>div { border-left:3px solid var(--amber);padding-left:1rem;margin-bottom:2rem; }.exam-summary>div strong { display:block;font:500 3rem var(--serif); }.exam-summary ol { list-style:none;padding:0; }.exam-summary li { display:grid;grid-template-columns:40px 1fr auto auto;gap:1rem;align-items:center;border-top:1px solid var(--line);padding:1rem 0; }.exam-summary li>span { font:italic 1.5rem var(--serif); }.exam-summary li small { display:block;color:var(--muted); }
.data-table .table-head { display:grid;grid-template-columns:1fr 2fr 1fr auto;gap:1rem;padding:.5rem 0;color:var(--muted);font-size:11px;text-transform:uppercase; }.data-table .table-row { grid-template-columns:1fr 2fr 1fr auto; }.scenario-row { display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding:1rem 0; }.review-columns { display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1.5rem; }.answer-section { border-top:1px solid var(--line);padding:1rem 0; }.answer-section h3 span { float:right;color:var(--green); }.hidden-truth { border-top:4px solid var(--amber); }.big-number { font:500 4rem var(--serif); }.big-number small { font:1rem var(--sans); }.component-inputs { display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin:1.5rem 0; }.component-inputs label span { display:flex;align-items:center; }.component-inputs input { font:500 1.7rem var(--serif); }.review-form>label { margin:1rem 0; }.review-form fieldset { border:1px solid var(--line);margin:1rem 0;padding:1rem; }.code-field,pre,code { font-family:"SFMono-Regular",Consolas,monospace;font-size:12px; }.admin-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1rem; }.admin-grid details { margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem; }.admin-grid details form { display:grid;gap:.8rem;margin-top:1rem; } pre { white-space:pre-wrap;background:var(--paper-deep);padding:1rem;overflow:auto; }.center-panel { max-width:700px;margin:8vh auto;text-align:center; }
.print-sheet { background:#fff;color:#111;max-width:900px;margin:auto;padding:2rem;box-shadow:var(--shadow); }.print-sheet header { display:flex;justify-content:space-between;border-bottom:3px solid #111; }.print-sheet h1 { font-size:2rem; }.print-meta { display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #555; }.print-sheet section { padding:1rem 0;border-bottom:1px solid #555; }.print-sheet section h2 { font-size:1rem; }.print-sheet section h2 span { float:right; }.writing-lines { height:110px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 26px,#bbb 27px); }.print-sheet footer { display:flex;gap:1rem;justify-content:space-between;padding-top:1rem; }
@media (max-width:1000px) { .hero,.auth-layout,.two-column,.feedback-layout,.progress-grid { grid-template-columns:1fr; }.mode-picker { grid-template-columns:repeat(2,1fr); }.review-columns { grid-template-columns:1fr; }.component-inputs,.component-grid { grid-template-columns:repeat(2,1fr); }.sheet-section { grid-template-columns:190px 1fr; }.score-box { grid-column:2;grid-template-columns:auto 70px auto;justify-content:end;align-items:center; }.descriptor-checks { grid-template-columns:repeat(3,1fr); }.descriptor-checks>div { grid-column:1/-1; }.admin-grid { grid-template-columns:1fr; }.ai-tasks { grid-template-columns:1fr; } }
@media (max-width:720px) { .site-header { height:auto;padding:.8rem 1rem;align-items:flex-start; }.brand small { display:none; } nav { gap:.65rem;flex-wrap:wrap;justify-content:flex-end; } nav a { font-size:12px; }.page-shell { padding:2rem 1rem; }.hero { gap:2rem; }.page-heading.split,.attempt-header,.result-hero,.paper-upload { align-items:flex-start;flex-direction:column; }.metric-grid,.score-ledger { grid-template-columns:1fr; }.mode-picker,.form-grid,.bottom-scales { grid-template-columns:1fr; }.sample-bench { grid-template-columns:1fr;padding:2rem 1rem; }.beer-visual { height:190px;width:110px; }.sheet-meta { grid-template-columns:1fr; }.sheet-section { grid-template-columns:1fr;padding:1.2rem; }.score-box { grid-column:1; }.descriptor-checks { grid-template-columns:repeat(2,1fr);padding:1.2rem; }.sheet-footer { align-items:flex-start;gap:1rem; }.component-grid,.ai-feedback-grid { grid-template-columns:1fr; }.result-actions { align-items:stretch;flex-direction:column; }.exam-summary li { grid-template-columns:30px 1fr auto; }.exam-summary li a { grid-column:2; }.review-columns { display:block; }.review-columns .panel { margin-bottom:1rem; }.component-inputs { grid-template-columns:1fr; }.print-sheet { padding:.5rem; }.print-meta,.print-sheet footer { flex-direction:column;gap:.5rem; } }
@media print { body { background:#fff; }.site-header,.site-footer,.no-print,.result-actions,[data-print] { display:none!important; }.page-shell { padding:0;max-width:none; }.panel,.print-sheet { box-shadow:none; }.feedback-layout { grid-template-columns:1.2fr .8fr; }.score-ledger article { -webkit-print-color-adjust:exact;print-color-adjust:exact; }.print-sheet { max-width:none; }.writing-lines { height:95px; } }