:root { --ink:#1c1c21; --muted:#686882; --blue:#2948c8; --blue-dark:#172b80; --line:#e4e5ea; --soft:#f5f6f8; --paper:#fff; --good:#32b85a; --warning:#e8b728; --danger:#e04b4b; }
* { box-sizing:border-box; }
html,body { min-width:0; min-height:100%; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:#f3f4f7; font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; word-break:keep-all; }
button,input,a { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.self-check { width:100%; min-height:100vh; position:relative; padding:80px max(24px,calc((100% - 1120px)/2)) 90px; background:linear-gradient(145deg,#fff 0%,#fff 52%,#f0f3fb 100%); }
.close-button { width:46px; height:46px; position:fixed; z-index:20; top:24px; right:24px; border:1px solid rgba(28,28,33,.14); border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 8px 24px rgba(28,28,33,.08); cursor:pointer; backdrop-filter:blur(8px); }
.close-button span { width:18px; height:1.5px; position:absolute; top:22px; left:13px; background:var(--ink); transform:rotate(45deg); }
.close-button span:last-child { transform:rotate(-45deg); }
.close-button:hover { background:var(--ink); }
.close-button:hover span { background:#fff; }
.screen { width:100%; max-width:1120px; margin:0 auto; animation:screen-in .36s ease both; }
.screen[hidden] { display:none; }
.screen--start { min-height:calc(100vh - 170px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; }
.screen--start h1,.screen-heading h1,.result-heading h1 { margin:0; font-size:clamp(42px,6vw,74px); line-height:1.12; letter-spacing:-.045em; }
.lead { margin:38px 0 16px; font-size:21px; line-height:1.65; font-weight:600; }
.notice { margin:0 0 42px; color:var(--muted); font-size:15px; line-height:1.6; }
.start-mark { position:absolute; right:0; color:rgba(41,72,200,.055); font-size:clamp(90px,17vw,220px); font-weight:900; letter-spacing:-.08em; pointer-events:none; }
.start-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:58px; padding:16px 30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:999px; font-weight:750; text-decoration:none; cursor:pointer; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.button:hover:not(:disabled) { transform:translateY(-2px); }
.button--primary { color:#fff; background:var(--ink); }
.button--primary:hover:not(:disabled) { background:var(--blue-dark); }
.button--secondary { color:var(--ink); border-color:#cbcdd5; background:#fff; }
.button:disabled { opacity:.35; cursor:not-allowed; }
.screen-heading { margin:42px 0 50px; }
.screen-heading h1 { font-size:clamp(38px,5vw,60px); }
.screen-heading > p:last-child { margin:24px 0 0; color:var(--muted); font-size:18px; }
.type-grid { margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; border:0; }
.type-option { min-width:0; position:relative; }
.type-option input { position:absolute; opacity:0; }
.type-option label { min-height:168px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; gap:25px; border:1px solid var(--line); border-radius:20px; background:#fff; cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.type-option strong { font-size:23px; }
.type-option p { margin:0; color:var(--muted); font-size:16px; line-height:1.55; }
.type-option input:checked + label { color:#fff; border-color:var(--blue); background:var(--blue); box-shadow:0 16px 38px rgba(41,72,200,.2); transform:translateY(-3px); }
.type-option input:checked + label p { color:rgba(255,255,255,.78); }
.type-option input:focus-visible + label,.answer-option input:focus-visible + label,.button:focus-visible,.close-button:focus-visible,.text-button:focus-visible { outline:3px solid rgba(41,72,200,.3); outline-offset:3px; }
.navigation { margin-top:36px; display:flex; justify-content:space-between; gap:12px; }
.navigation--end { justify-content:flex-end; }
.progress-header { margin:18px 0 17px; display:flex; align-items:flex-end; justify-content:space-between; }
.type-name,.progress-count { margin:0; color:var(--muted); font-size:16px; font-weight:600; }
.progress-count strong { color:var(--ink); font-size:28px; }
.progress-track { height:4px; overflow:hidden; border-radius:4px; background:#e4e5ea; }
.progress-track span { width:0; height:100%; display:block; background:var(--blue); transition:width .3s ease; }
.question-card { margin-top:42px; padding:48px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 18px 55px rgba(28,28,33,.07); }
.question-card fieldset { margin:0; padding:0; border:0; }
.question-card legend { width:100%; margin-bottom:36px; font-size:clamp(25px,3vw,36px); line-height:1.4; font-weight:750; letter-spacing:-.025em; }
.question-number { color:var(--blue); }
.answer-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.answer-option { min-width:0; position:relative; }
.answer-option input { position:absolute; opacity:0; }
.answer-option label { min-height:84px; height:100%; padding:16px 10px; display:flex; align-items:center; justify-content:center; border:1px solid #d7d8df; border-radius:13px; color:#45454d; text-align:center; line-height:1.4; font-weight:650; cursor:pointer; }
.answer-option input:checked + label { color:#fff; border-color:var(--blue); background:var(--blue); box-shadow:0 8px 22px rgba(41,72,200,.18); }
.type-grid,.answer-list { position:relative; }
.type-grid.is-confirming-selection > *:not(.self-check-choice-toast),.answer-list.is-confirming-selection > *:not(.self-check-choice-toast) { pointer-events:none; }
.self-check-choice-toast { position:static; min-height:50px; width:fit-content; margin-left:auto; padding:10px 18px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; color:#fff; background:#1c1c21; box-shadow:0 10px 28px rgba(28,28,33,.18); text-align:center; animation:self-check-toast-in .2s ease; }
.self-check-choice-toast strong { font-size:15px; }
.self-check-choice-toast span { color:rgba(255,255,255,.78); font-size:15px; }
#type-next,#question-next { display:none; }
.tip { margin-top:30px; padding:20px 22px; display:flex; gap:18px; border-radius:12px; background:var(--soft); }
.tip strong { flex:none; color:var(--blue); }
.tip p { margin:0; color:#555662; line-height:1.6; }
.validation-message { min-height:24px; margin:12px 0 0; color:#c53434; font-size:14px; font-weight:650; text-align:right; }
.result-heading { padding:34px 0 44px; }
.result-heading h1 { font-size:clamp(40px,5vw,64px); }
.result-type { margin:0 0 10px; color:var(--muted); font-weight:700; }
.result-card { padding:52px; display:grid; grid-template-columns:230px 1fr; gap:55px; align-items:center; border-radius:26px; color:#fff; background:var(--ink); }
.score-ring { --score:0; width:220px; height:220px; padding:12px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--blue) calc(var(--score)*1%),rgba(255,255,255,.12) 0); }
.score-ring > div { width:100%; height:100%; display:flex; align-items:baseline; justify-content:center; border-radius:50%; background:var(--ink); }
.score-ring strong { align-self:center; font-size:70px; line-height:1; }
.score-ring span { align-self:center; margin:32px 0 0 5px; font-size:20px; }
.grade { padding:8px 15px; display:inline-flex; border-radius:999px; color:var(--ink); background:#fff; font-size:14px; font-weight:800; }
.grade--good { background:#75e091; }.grade--priority { background:#ffd65a; }.grade--improvement { color:#fff; background:#ef6262; }
.result-summary h2 { margin:20px 0 12px; font-size:34px; }
.result-summary > p { max-width:650px; margin:0; color:rgba(255,255,255,.76); font-size:18px; line-height:1.65; }
.result-summary .score-detail { margin-top:18px; font-size:14px; }
.guidance { padding:70px 0 20px; }
.section-heading h2 { margin:0 0 28px; font-size:34px; }
.guidance-list { display:grid; gap:12px; }
.guidance-item { padding:25px 28px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.guidance-item strong { display:block; margin-bottom:9px; font-size:19px; }
.guidance-item p { margin:0; color:var(--muted); line-height:1.65; }
.result-actions { margin-top:30px; display:flex; align-items:center; gap:24px; }
.result-save-status { min-height:1.6em; margin:18px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.text-button { padding:10px 2px; border:0; border-bottom:1px solid var(--ink); color:var(--ink); background:transparent; opacity:1; visibility:visible; font:inherit; font-weight:700; cursor:pointer; appearance:none; }
.sr-only { width:1px; height:1px; position:absolute; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@keyframes screen-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes self-check-toast-in { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:none; } }
@media (max-width:800px) {
    .self-check { padding:72px 24px 70px; }
    .type-grid { grid-template-columns:1fr; }
    .answer-list { grid-template-columns:1fr; }
    .answer-option label { min-height:58px; justify-content:flex-start; padding:15px 18px; text-align:left; }
    .result-card { grid-template-columns:1fr; gap:35px; }
}
@media (max-width:520px) {
    .self-check { padding:72px 20px 55px; }
    .close-button { width:42px; height:42px; top:16px; right:16px; }
    .close-button span { top:20px; left:11px; }
    .screen--start { min-height:calc(100vh - 127px); }
    .lead { margin-top:28px; font-size:18px; }
    .lead br { display:none; }
    .screen-heading { margin-top:18px; }
    .type-option label { min-height:145px; padding:24px; }
    .question-card { margin-top:30px; padding:28px 20px; border-radius:19px; }
    .tip { flex-direction:column; gap:7px; }
    .navigation .button { flex:1; padding-inline:18px; }
    .result-card { padding:34px 24px; }
    .score-ring { width:180px; height:180px; margin:auto; }
    .score-ring strong { font-size:58px; }
    .result-summary h2 { font-size:28px; }
    .result-actions { flex-direction:column; align-items:stretch; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }