:root{--ink:#132b22;--paper:#f4f0e7;--card:#fffdf7;--line:#d8d0c1;--mint:#b9e1cc;--acid:#dff15d;--coral:#ed765f;--muted:#647169;--shadow:0 18px 50px rgba(19,43,34,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Pretendard,"Noto Sans KR",system-ui,sans-serif;line-height:1.55}.topbar{height:72px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(19,43,34,.15);background:rgba(244,240,231,.92);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.brand{color:var(--ink);font-size:24px;font-weight:900;letter-spacing:-.06em;text-decoration:none}.brand span{color:var(--coral)}.stage{font-size:11px;font-weight:800;letter-spacing:.16em;border:1px solid var(--ink);padding:6px 10px;border-radius:999px}main{max-width:1120px;margin:auto;padding:0 24px}.hero{padding:90px 0 70px;display:grid;grid-template-columns:1fr minmax(260px,430px);column-gap:70px;align-items:end}.eyebrow{margin:0 0 16px;color:#426657;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.hero h1{grid-row:2/4;margin:0;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(58px,9vw,112px);line-height:.9;letter-spacing:-.07em}.hero h1 em{color:var(--coral);font-weight:400}.lead{margin:0 0 28px;font-size:20px;word-break:keep-all}.translation-note{display:flex;gap:10px;flex-direction:column;padding:18px 20px;border-left:5px solid var(--acid);background:rgba(255,253,247,.75)}.translation-note strong{font-size:13px}.translation-note span{font-size:14px;color:var(--muted)}.profiles{padding:60px 0;border-top:1px solid var(--line)}.section-heading p{margin:0 0 8px;color:var(--coral);font-size:12px;font-weight:900;letter-spacing:.16em}.section-heading h2{margin:0;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(32px,5vw,52px);letter-spacing:-.045em}.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}.profile{min-height:220px;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 7px 0 rgba(19,43,34,.05)}.profile .sigil{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-size:24px}.profile h3{margin:28px 0 8px;font-size:16px;letter-spacing:.08em}.profile p{margin:0;color:var(--muted);font-size:14px;word-break:keep-all}.profile.croak{background:#e0edc8}.profile.rat{background:#e8e4dc}.profile.blob{background:#f7d7a3}.profile.ghost{background:#d9e5eb}.test-shell{margin:40px 0 100px;padding:clamp(22px,5vw,64px);border-radius:28px;background:var(--ink);color:#fff;box-shadow:var(--shadow)}.loading{padding:60px 0;text-align:center;color:var(--mint)}.test-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-size:13px;font-weight:800}.progress{width:min(42vw,360px);height:6px;margin-top:10px;border-radius:10px;background:rgba(255,255,255,.16);overflow:hidden}.progress span{display:block;width:5%;height:100%;background:var(--acid);transition:width .25s ease}.anonymous{letter-spacing:.14em;color:var(--mint)}.test-card{padding:clamp(22px,5vw,54px);border-radius:22px;background:var(--card);color:var(--ink)}.question-label,.reply-wrap>span{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--coral)}.question{margin:5px 0 32px;color:var(--muted);font-size:15px}.reply-wrap{padding:28px;border-left:6px solid var(--coral);background:#f5eee3}.reply-wrap blockquote{margin:10px 0 0;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(23px,4vw,38px);line-height:1.4;word-break:keep-all}fieldset{margin:36px 0 0;padding:0;border:0}legend{margin-bottom:14px;font-weight:800}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.choice{position:relative}.choice input{position:absolute;opacity:0}.choice span{display:block;padding:13px 8px;text-align:center;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13px;font-weight:900;cursor:pointer;transition:.15s}.choice input:checked+span{border-color:var(--ink);background:var(--acid);box-shadow:inset 0 0 0 2px var(--ink)}button{border:0;border-radius:12px;background:var(--acid);color:var(--ink);font:inherit;font-weight:900;padding:14px 22px;cursor:pointer}button:hover{transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}.secondary{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff}.nav{display:flex;justify-content:space-between;margin-top:20px}#review{color:#fff}.review-help{color:#b8c9c1}.rubrics{display:grid;gap:12px;margin:32px 0}.rubric{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.15)}.rubric label{font-weight:800}.rubric select,.field input,.field textarea{border:1px solid rgba(255,255,255,.28);border-radius:10px;background:#fff;color:var(--ink);font:inherit;padding:11px 13px}.rubric select{min-width:110px}.field{display:grid;gap:8px;margin:24px 0}.field>span{font-weight:800}.field small{color:#a8bbb1;font-weight:500}.field input,.field textarea{width:100%}.check{display:flex;align-items:flex-start;gap:12px;margin:16px 0;padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:12px}.check input{margin-top:5px}.check span{display:grid}.check small{color:#a8bbb1}.error{min-height:24px;color:#ffb4a5}.submit{width:100%;margin-top:8px}.result{text-align:center}.result h2{margin:5px 0;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(38px,7vw,72px)}.result h2 span{color:var(--acid)}.result>p:not(.eyebrow){color:#b8c9c1}.reveal{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:34px 0;text-align:left}.reveal-row{display:flex;justify-content:space-between;padding:12px 14px;border-radius:9px;background:rgba(255,255,255,.08);font-size:13px}.reveal-row.correct{border-left:4px solid var(--acid)}.reveal-row.wrong{border-left:4px solid var(--coral)}.result-actions{display:flex;justify-content:center;gap:10px}footer{display:flex;justify-content:space-between;align-items:center;padding:34px clamp(20px,5vw,72px);background:#0b1f18;color:#fff}footer span{font-size:20px;font-weight:900}footer p{margin:0;color:#88a095;font-size:12px}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding:62px 0 50px}.hero h1{grid-row:auto;margin-bottom:34px}.profile-grid{grid-template-columns:repeat(2,1fr)}.choices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){main{padding:0 14px}.topbar{height:62px;padding:0 16px}.stage{font-size:9px}.hero h1{font-size:56px}.profile-grid{grid-template-columns:1fr 1fr}.profile{min-height:200px;padding:18px}.test-shell{padding:16px;margin-bottom:50px;border-radius:18px}.test-card{padding:20px 16px}.reply-wrap{padding:20px 16px}.choices{grid-template-columns:1fr 1fr}.reveal{grid-template-columns:1fr}footer{align-items:flex-start;gap:10px;flex-direction:column}}