:root{--bg:#0c1016;--deep:#090c11;--panel:#151b24;--panel2:#1b222d;--line:#303847;--text:#f4efe6;--muted:#b7bfcc;--gold:#d8b56b;--ivory:#ece5d9;--rose:#d99a9a;--sage:#86b79a;--d:#e15e5b;--i:#f0a64a;--s:#67ad82;--c:#658fd5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 50% -20%,#182334 0,transparent 36%),linear-gradient(180deg,var(--deep),var(--bg));color:var(--text);font-family:Pretendard,"Noto Sans KR",sans-serif;line-height:1.68}
.app{width:min(820px,100%);margin:auto;min-height:100vh;padding:24px 18px 80px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.brand{font-size:12px;color:var(--gold);letter-spacing:.14em}.progress{font-size:13px;color:var(--muted)}
.bar{height:4px;background:#252d39;border-radius:99px;overflow:hidden;margin-bottom:28px}.bar>i{display:block;height:100%;background:linear-gradient(90deg,#9c814b,var(--gold),#f2d898);width:0;transition:.3s}
.card{background:linear-gradient(180deg,rgba(27,34,45,.98),rgba(21,27,36,.98));border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 22px 64px rgba(0,0,0,.3)}
h1,h2,h3,p{margin-top:0}h1{font-size:35px;line-height:1.18;margin-bottom:16px;letter-spacing:-.04em}h2{font-size:25px;line-height:1.38;letter-spacing:-.025em}h3{font-size:19px;letter-spacing:-.02em}.lead{font-size:17px;color:#e5e9ef}.muted{color:var(--muted)}
button{font:inherit}.primary,.ghost{width:100%;border-radius:15px;padding:15px 18px;font-weight:750;cursor:pointer}.primary{border:1px solid #ead39c;background:linear-gradient(180deg,#e2c37f,#caa65d);color:#17130b;box-shadow:0 10px 30px rgba(216,181,107,.14)}.ghost{border:1px solid var(--line);background:#111720;color:var(--text)}button:focus-visible{outline:3px solid rgba(216,181,107,.55);outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed}
.guide{display:grid;gap:10px;margin:24px 0}.guide div{padding:14px 15px;border:1px solid var(--line);border-radius:15px;color:#dce1e8;background:rgba(9,12,17,.22)}
.scene-box{border:1px solid #3a4555;background:#101722;border-radius:18px;padding:19px;margin-bottom:18px}.scene-label{display:block;color:var(--gold);font-size:12px;letter-spacing:.1em;margin-bottom:8px}.scene-text{font-size:18px;line-height:1.72;margin:0}.instruction{font-size:13px;color:var(--muted);margin-bottom:12px}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option{position:relative;width:100%;min-height:74px;text-align:left;border:1px solid var(--line);background:#111720;color:var(--text);border-radius:17px;padding:16px 52px 16px 17px;cursor:pointer;transition:.18s;font-size:17px;font-weight:750;letter-spacing:-.02em}.option:hover{border-color:#606c7d;background:#151c27}.option.selected{background:#1a2029;border-width:2px}.rank{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-weight:850}.option[data-rank="1"]{border-color:var(--gold)}.option[data-rank="1"] .rank{background:var(--gold);color:#15110a;box-shadow:0 0 0 5px rgba(216,181,107,.1)}.option[data-rank="2"]{border-color:#d8d2c8}.option[data-rank="2"] .rank{background:#e9e4db;color:#171a20}.option[data-rank="3"]{border-color:#778292}.option[data-rank="3"] .rank{background:#778292;color:white}.option[data-rank="4"]{border-color:#4c5563}.option[data-rank="4"] .rank{background:#4c5563;color:white}
.nav{display:flex;gap:10px;margin-top:17px}.nav button{flex:1}.hidden{display:none!important}
.result-head{position:relative;text-align:center;overflow:hidden;border-radius:21px;padding:31px 18px 26px;margin-bottom:20px;background:linear-gradient(145deg,var(--tone1,rgba(216,181,107,.12)),var(--tone2,rgba(255,255,255,.02)));border:1px solid var(--line)}.result-head:before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;background:var(--glow,rgba(216,181,107,.18));filter:blur(48px);top:-140px;right:-70px}.type-code{position:relative;font-size:58px;font-weight:950;letter-spacing:.04em}.type-code .main{color:var(--mainColor,var(--gold))}.type-code .sub{font-size:.68em;color:var(--subColor,var(--gold));margin-left:3px}.type-name{position:relative;font-size:27px;font-weight:850;margin-bottom:9px}.result-head .lead{position:relative;max-width:650px;margin:0 auto}
.interpretation-note{border:1px solid #4a4350;background:linear-gradient(145deg,#191821,#121821);border-radius:17px;padding:18px;margin:18px 0}.interpretation-note b{color:var(--gold);display:block;margin-bottom:5px}.interpretation-note p{margin:0;color:#dce1e8}
.rank-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.rank-card{border:1px solid var(--line);border-top:4px solid var(--rankColor);border-radius:16px;background:#151b24;padding:15px}.rank-card small{display:block;color:var(--muted);margin-bottom:5px}.rank-card strong{font-size:19px;color:var(--rankColor)}.rank-card p{font-size:13px;color:#d8dde5;margin:7px 0 0}
.score-list{display:grid;gap:14px;margin:22px 0}.score-row{display:grid;grid-template-columns:40px 1fr 42px;gap:11px;align-items:center}.score-label{font-weight:900;font-size:18px}.score-copy{font-size:13px;color:var(--muted);margin-bottom:5px}.track{height:10px;background:#252d39;border-radius:99px;overflow:hidden}.fill{height:100%;border-radius:99px}.score-value{text-align:right;font-weight:800}
.map-wrap{padding:14px;background:#0d1219;border:1px solid var(--line);border-radius:20px;margin:8px 0 18px}.axis-note{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:6px}.axis-note.vertical{justify-content:center;margin-bottom:7px}canvas{display:block;width:100%;aspect-ratio:1/1;border-radius:15px}
.section{margin-top:34px}.summary-box{border:1px solid #435064;background:#111823;border-radius:18px;padding:20px}.summary-box p:last-child{margin-bottom:0}.scene{position:relative;border:1px solid var(--line);border-left:4px solid var(--mainColor,var(--gold));background:#181d25;padding:17px 17px 17px 18px;margin:13px 0;border-radius:4px 15px 15px 4px}.scene strong{display:block;margin-bottom:6px;color:var(--ivory)}
.deep-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.deep-card{border:1px solid var(--line);background:#151b24;border-radius:16px;padding:17px}.deep-card h3{font-size:14px;color:var(--gold);margin-bottom:7px}.deep-card p{margin:0;color:#e0e5ec}.pair-panel{border:1px solid var(--line);border-top:4px solid var(--pairColor);background:#111823;border-radius:18px;padding:20px}.pair-title{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}.pair-title>span{font-size:32px;font-weight:900;color:var(--pairColor);line-height:1}.pair-title b{font-size:21px}.pair-title p{margin:4px 0 0;color:#dce1e8}.pair-grid{margin-bottom:12px}.coaching-focus{margin-top:14px;border:1px solid #504631;background:#1b1917;border-radius:15px;padding:16px}.coaching-focus b{display:block;color:var(--gold);margin-bottom:5px}.coaching-focus p{margin:0;font-size:17px}
.meaning-grid{display:grid;gap:12px}.meaning{border-radius:15px;padding:16px;border:1px solid var(--line);background:#171c24}.meaning.intent{border-left:3px solid var(--gold)}.meaning.other{border-left:3px solid var(--rose)}.meaning.next{border-left:3px solid var(--sage)}.meaning b{display:block;margin-bottom:5px}.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 10px;margin:3px 4px 3px 0;color:#dce1e8;font-size:13px;background:#121821}
.trait-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.trait-card{border:1px solid var(--line);border-top:4px solid var(--traitColor);background:#151b24;border-radius:17px;padding:18px}.trait-card h3{margin-bottom:5px}.trait-card .score-tag{font-size:13px;color:var(--traitColor);font-weight:800}.trait-card dl{margin:14px 0 0}.trait-card dt{color:var(--muted);font-size:12px;margin-top:12px}.trait-card dd{margin:3px 0 0;color:#e4e8ee}
.interaction-list{display:grid;gap:12px}.interaction{border:1px solid var(--line);border-left:4px solid var(--targetColor);border-radius:4px 15px 15px 4px;padding:16px;background:#151b24}.interaction strong{color:var(--targetColor);display:block;margin-bottom:4px}.interaction p:last-child{margin-bottom:0}
.question-list{background:#1b1917;border:1px solid #443a2d;border-radius:18px;padding:5px 18px}.coach-q{display:grid;grid-template-columns:32px 1fr;gap:9px;padding:17px 0;border-bottom:1px solid #3c342a}.coach-q:last-child{border-bottom:0}.coach-q span{font-size:12px;color:var(--gold);padding-top:4px}.coach-q p{margin:0;font-size:17px}.notice{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:30px}
@media(max-width:620px){h1{font-size:29px}.card{padding:20px}.scene-text{font-size:16px}.options{grid-template-columns:1fr}.option{min-height:64px}.rank-three,.trait-grid,.deep-grid{grid-template-columns:1fr}.score-row{grid-template-columns:34px 1fr 38px}.result-head{padding:25px 14px 22px}.type-code{font-size:51px}.pair-title{display:block}.pair-title>span{display:block;margin-bottom:8px}}
@media print{body{background:white;color:#111}.app{width:100%;padding:0}.top,.bar,#start,#test,#again,#printBtn{display:none!important}.card,.result-head,.rank-card,.summary-box,.trait-card,.interaction,.meaning,.question-list,.scene,.map-wrap,.interpretation-note,.deep-card,.pair-panel,.coaching-focus{box-shadow:none;background:white;color:#111;border-color:#bbb}.notice,.muted,.score-copy,.axis-note{color:#444}.section{break-inside:avoid}.trait-card,.interaction,.scene,.deep-card,.pair-panel{break-inside:avoid}}