@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Noto+Serif+KR:wght@500;700;900&display=swap');
:root{color-scheme:dark;--gold:#e6bd77;--ink:#101017;--muted:#a5a1b5;--purple:#b88bff;--line:#ffffff20}*{box-sizing:border-box}body{margin:0;background:#100e19;color:#f4eee3;font:14px 'Noto Sans KR',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#ffffff07;border-radius:5px;padding:12px 18px;transition:.2s}button:hover{border-color:var(--gold);background:#e6bd7715;transform:translateY(-2px)}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{opacity:.35;cursor:not-allowed;transform:none}header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid var(--line);position:relative;z-index:2;background:#100e19d9}.brand{display:flex;gap:12px;color:var(--gold);font-size:30px;text-decoration:none}.brand span{font-size:20px;font-weight:900;color:#f5eedf}.brand small{display:block;font-size:8px;letter-spacing:3px;color:var(--gold)}nav{display:flex;gap:8px}nav button{border:0;font-size:12px;color:#c7c1d4}.edition{font-size:10px;letter-spacing:3px;color:#888095}.ambient{position:fixed;inset:0;background:radial-gradient(ellipse at 20% 60%,#58317922,transparent 70%);pointer-events:none}main{position:relative;max-width:1600px;margin:auto}.hero{min-height:calc(100vh - 86px);position:relative;display:flex;align-items:center;padding:65px 7%;overflow:hidden}.hero:before,.arena:before{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,#100e19f5 0%,#100e19b0 35%,#100e1910 70%),url('assets/webtoon-office.png');background-size:cover;background-position:center;z-index:-1}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#100e19,transparent 30%);z-index:-1}.hero-copy{max-width:590px}.eyebrow{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:4px}.tag{display:inline-block;padding:7px 11px;border:1px solid #e6bd7740;color:var(--gold);font-size:11px;letter-spacing:2px}.hero h1{font-family:'Noto Serif KR',serif;font-size:clamp(55px,6vw,91px);line-height:1.2;letter-spacing:-5px;margin:26px 0 20px}.hero h1 em{font-style:normal;color:var(--gold)}.hero p{color:#c4bdcc;line-height:2;font-size:16px}.primary{background:var(--gold);color:#201729;border-color:var(--gold);font-weight:900}.primary:hover{background:#f6d297}.hero-actions{display:flex;gap:12px;margin:32px 0}.hero-actions button{padding:17px 30px}.micro{color:#8c849d;font-size:11px;letter-spacing:1px}.quote{border-left:2px solid #e6bd7760;padding:6px 0 6px 18px;color:#c0b4ca;font-size:13px;line-height:1.9;margin-top:38px}.chapter-tag{position:absolute;right:6%;bottom:8%;padding:20px;border-top:1px solid var(--gold);text-align:right;font-size:12px;color:#cec1dd}.chapter-tag small{display:block;color:var(--gold);letter-spacing:3px;margin-bottom:8px}.layout{padding:35px 5%}.chapter-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.chapter-top h1{font-family:'Noto Serif KR',serif;font-size:28px;margin:8px 0}.stats{display:flex;gap:25px}.stat small{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}.stat strong{color:var(--gold);font-size:21px}.arena{position:relative;isolation:isolate;min-height:315px;border:1px solid #e6bd7730;border-radius:10px;overflow:hidden;display:grid;grid-template-columns:1fr 330px;align-items:end;padding:28px;background:#1c1529}.arena:before{background-image:linear-gradient(90deg,#16101dd0,#16101d20 60%,#16101dcc),url('assets/webtoon-office.png');background-position:center 40%}.arena .stage-copy{max-width:550px;text-shadow:0 2px 14px #000}.arena h2{font-family:'Noto Serif KR',serif;font-size:30px;margin:10px 0}.arena p{line-height:1.9;color:#d0c7dc}.enemy{padding:20px;background:#15121de8;border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(12px)}.enemy h3{margin:8px 0 4px}.bar{height:5px;background:#ffffff15;border-radius:4px;margin:10px 0 15px;overflow:hidden}.bar i{display:block;background:linear-gradient(90deg,#b88bff,#e6bd77);height:100%;transition:width .5s}.row{display:flex;justify-content:space-between;gap:12px}.small{font-size:11px;color:var(--muted)}.prediction{margin-top:15px;color:var(--gold);font-size:12px;line-height:1.8}.dialogue{border-left:3px solid var(--gold);background:#211a2d;padding:17px 24px;margin:20px 0;display:flex;gap:24px;line-height:1.9}.speaker{white-space:nowrap;color:var(--gold);font-weight:700}.choices{display:grid;grid-template-columns:1fr 1.4fr;gap:28px}.section-title{display:flex;align-items:center;gap:12px;margin:8px 0 13px;font-size:13px}.section-title b{color:var(--gold);font-size:10px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.skills{grid-template-columns:repeat(3,1fr)}.card{text-align:left;padding:15px;min-height:95px;background:#1d1927}.card.selected{background:#483250;border-color:var(--gold);box-shadow:inset 0 0 0 1px #e6bd7730}.card strong{display:block;font-size:14px;margin:7px 0}.card small{font-size:10px;line-height:1.6;color:#b4a9c3}.card .icon{color:var(--gold);font-size:19px}.actionbar{display:flex;align-items:center;justify-content:space-between;margin:22px 0;gap:20px}.actionbar p{font-size:12px;color:var(--muted);line-height:1.8}.actionbar button{min-width:240px;padding:17px}.story-panel{max-width:850px;margin:50px auto;padding:42px;background:linear-gradient(145deg,#292035e8,#16121ee8);border:1px solid #e6bd7740;border-radius:12px}.story-panel h1{font-family:'Noto Serif KR',serif;font-size:38px;line-height:1.5}.story-panel p{font-size:16px;line-height:2;color:#d4c9dd;white-space:pre-line}.story-choices{display:grid;gap:12px;margin-top:30px}.story-choices button{text-align:left;padding:18px}.story-choices small{display:block;margin-top:6px;color:#bcb0ca}.result-title{color:var(--gold)}dialog{background:#211a2d;color:#f5efdf;border:1px solid #e6bd7770;border-radius:12px;max-width:680px;width:90%;padding:30px;max-height:85vh;overflow:auto}dialog::backdrop{background:#07040bdc;backdrop-filter:blur(7px)}dialog p{line-height:1.9;white-space:pre-line;color:#c9bfd6}dialog button{margin-top:14px}.log{border-top:1px solid var(--line);padding:12px 0;font-size:12px;line-height:1.8;color:#bbb0c7}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#e6bd77;color:#21172c;padding:12px 24px;border-radius:5px;opacity:0;pointer-events:none;transition:.3s}#toast.show{opacity:1}.flash{animation:impact .55s}@keyframes impact{20%{filter:brightness(1.8);transform:translateX(4px)}50%{transform:translateX(-4px)}100%{filter:brightness(1)}}@media(max-width:850px){.edition{display:none}header{padding:0 5%;height:74px}.hero{min-height:calc(100vh - 74px);padding:45px 7%}.hero:before{background-position:65% center;opacity:.65}.hero h1{font-size:62px}.chapter-tag{display:none}.arena{grid-template-columns:1fr;gap:15px}.enemy{max-width:100%}.choices{grid-template-columns:1fr}.stats{gap:13px}.stat strong{font-size:17px}.chapter-top{align-items:start}.chapter-top h1{font-size:22px}.story-panel{margin:25px 5%;padding:26px}.story-panel h1{font-size:29px}.actionbar{align-items:stretch;flex-direction:column}.dialogue{gap:12px;padding:15px}.hero-copy p{font-size:14px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:500px){header{padding:0 16px;gap:8px}.brand{gap:7px;flex-shrink:0}.brand span{font-size:16px}.brand small{font-size:6px;letter-spacing:1.5px}nav{gap:2px}nav button{font-size:10px;padding:10px 6px;white-space:nowrap}.stats{gap:10px}.stat strong{font-size:15px}}
.arena:before{background-image:linear-gradient(90deg,#0c1723d9,#0c172320 60%,#0c1723cc),var(--scene-art,url('assets/webtoon-office.png'))}

/* 현대 직장극: 유리, 잉크색, 따뜻한 회의실 조명 */
:root{--gold:#e0b77d;--ink:#0b1420;--muted:#9aafbf;--purple:#7eb8c2;--line:#b8cedb25}
body{background:#0b1420;color:#edf2f3}
header{background:#0b1420ed}
.ambient{background:radial-gradient(ellipse at 20% 60%,#397c8622,transparent 70%)}
.hero:before{background-image:linear-gradient(90deg,#0b1420f5 0%,#0b1420b5 37%,#0b142010 76%),url('assets/webtoon-office.png')}
.hero:after{background:linear-gradient(0deg,#0b1420,transparent 30%)}
.hero p{color:#c0cdd5}.quote{color:#c3cbd2}.micro{color:#a0afbc}
.arena{background:#142330;border-color:#b8cedb35}.enemy{background:#101f2ce8;border-color:#9ebdc335}
.bar i{background:linear-gradient(90deg,#5e9fae,#dfba82)}
.dialogue{background:#172936}.card{background:#142331}.card.selected{background:#25404a;border-color:var(--gold)}
.card small{color:#b5c7d2}.story-panel{background:linear-gradient(145deg,#1c303dee,#0f1d2aef);border-color:#a7c8cd40}
.story-panel p{color:#cfdae0}.story-panel .tag{margin-bottom:4px}.story-panel .rest-question{font-size:16px;margin-top:25px;color:#e0b77d}
dialog{background:#142634;color:#edf2f3}dialog p{color:#c7d4dc}dialog::backdrop{background:#050e16de}
.role-label{display:inline-block;color:#93b3bf;font-size:11px;margin:2px 0 8px}.chapter-tag{max-width:330px;color:#c2d0d8}
.primary{color:#152331}.primary:hover{background:#edc998}
.brand small{letter-spacing:1.8px}.edition{letter-spacing:2px}
.flash{animation:meeting-emphasis .6s ease-out}@keyframes meeting-emphasis{30%{box-shadow:0 0 0 2px #e0b77d99,0 0 35px #7eb8c24a}100%{box-shadow:none}}
.arena:before{background-position:center 15%}
@media(max-width:500px){.chapter-top{flex-direction:column;gap:12px}.chapter-top h1{font-size:24px;word-break:keep-all}.stats{width:100%;justify-content:space-between;gap:12px}.stat small,.stat strong{white-space:nowrap}.stat strong{font-size:19px}.role-label{margin-bottom:0}}
@media(max-width:500px){.hero h1{font-size:54px}.hero-actions button{padding:16px 20px}.brand small{letter-spacing:.5px}}
