/* 밤의 도시: 인물의 접근 → 대화 → 선택 → 상태 변화 */
:root { --accent-cyan:#9bddd2; --accent-red:#dc9674; --accent-yellow:#dbc399; --border-color:#35434b; --bg-card:#15202a; }
body,body.bg-street,body.bg-cafe,body.bg-bar,body.bg-center,body.bg-altar,body.bg-phone { background:#0b1119; animation:none; }
body::before { content:''; position:fixed; inset:0; z-index:-1; opacity:.13; background:linear-gradient(#0b1119aa,#0b1119),url('../assets/pixel-worlds.png') center/cover; pointer-events:none; }
#app { max-width:1180px; padding:26px 36px; }
.global-header { margin-bottom:30px; padding-bottom:18px; border-color:#ffffff14; }
.brand-title { color:#e1e8df; letter-spacing:-.6px; font-size:1rem; }
.brand-title>span { filter:grayscale(1); }
.btn-header { border:0; background:transparent; color:#a2b0b9; font-size:.76rem; }
.hero-section { position:relative; padding:46px 42px 54px; margin-bottom:42px; text-align:left; overflow:hidden; border:1px solid #ffffff1a; min-height:360px; background:#111d28; }
.hero-section::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0b1523 8%,#0b1523d9 35%,#0b152322 100%),url('../assets/pixel-worlds.png') left top/200% 200%; image-rendering:pixelated; opacity:.85; }
.hero-section>* { position:relative; }
.hero-tag { background:none; padding:0; border:0; border-radius:0; color:#9bddd2; font-family:monospace; font-size:.68rem; letter-spacing:2px; margin-bottom:20px; }
.hero-title { font-size:clamp(2.6rem,5.8vw,4.8rem); line-height:1.15; font-weight:850; letter-spacing:-3px; color:#eaf0e5; background:none; -webkit-text-fill-color:initial; margin-bottom:22px; }
.hero-title em { font-style:normal; color:#a9d9cd; }
.hero-sub { color:#a6b6c2; font-size:.88rem; line-height:1.9; margin:0; }
.hero-sub strong { display:block; margin-top:14px; font-size:.7rem; letter-spacing:1px; color:#d8c298; font-weight:500; }
.chapter-select-title { justify-content:space-between; font-size:1.05rem; margin-bottom:20px; }
.chapter-select-title>span { font-family:monospace; font-size:.65rem; color:#738894; letter-spacing:2px; }
.chapter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.chapter-card { position:relative; padding:0 18px 22px; border-radius:2px; background:#111d26; border:1px solid #ffffff18; box-shadow:none; }
.chapter-card:hover { transform:translateY(-5px); border-color:#9bddd288; box-shadow:0 15px 35px #0005; }
.chapter-art { height:180px; margin:0 -18px 20px; background-image:url('../assets/pixel-worlds.png'); background-size:200% 200%; image-rendering:pixelated; border:0; }
.art-1 { background-position:left top; }.art-2 { background-position:right top; }.art-3 { background-position:left bottom; }.art-4 { background-position:right bottom; }
.chapter-card-header { display:block; }.chapter-badge { color:#97b5b8; font-family:monospace; text-transform:uppercase; letter-spacing:2px; font-size:.65rem; padding:0; background:none; }
.chapter-name { display:block; font-size:1rem; margin-top:10px; min-height:3.2em; line-height:1.6; }.chapter-tag { font-size:.68rem; color:#a7c9bb; }.chapter-desc { font-size:.77rem; color:#8598a5; line-height:1.8; margin-top:8px; }.chapter-meta { font-size:.65rem; line-height:1.7; color:#657c8d; border-top:1px solid #ffffff10; padding-top:12px; }
.reading-option { display:inline-flex; background:none; border:0; padding:0; font-size:.75rem; color:#acb7bf; }.reading-option input { width:15px; height:15px; }.play-hint { font-size:.72rem; color:#718593; line-height:1.8; margin-bottom:25px; }.chapter-new { box-shadow:none; border-color:#ffffff18; }.chapter-new .chapter-tag { color:#d8c298; }
.adsense-wrapper { margin-top:160px; padding:20px; border:1px solid #ffffff0a; min-height:110px; background:#0b121b; }.adsense-wrapper::before { content:'광고'; display:block; color:#657582; font-size:10px; text-align:center; margin-bottom:10px; }
body[data-screen='game-screen'] #app { max-width:900px; padding:16px 28px; }
#game-screen { position:relative; }
body[data-screen='game-screen'] .global-header { margin-bottom:14px; padding-bottom:12px; }
body[data-screen='game-screen'] .site-disclaimer { display:none; }
#game-screen>.chat-device-frame { display:none; }
#game-screen>.inventory-section { display:none; }
#game-screen.bag-open>.inventory-section { display:block; position:relative; z-index:12; background:#172430; padding:14px; margin-top:10px; border:1px solid #647f8a; }
#adventure-stage { position:relative; width:100%; aspect-ratio:16/7; overflow:hidden; border:1px solid #ffffff26; background:#0d1923; }
#world-canvas { display:block; width:100%; height:100%; image-rendering:pixelated; object-fit:cover; object-position:center 70%; }
.world-topbar { position:absolute; left:0; right:0; top:0; padding:17px 20px; display:flex; align-items:center; gap:18px; background:linear-gradient(#07101ae8,transparent); color:#e0e8dd; font-size:.8rem; pointer-events:none; }
.world-topbar button { pointer-events:auto; margin-left:auto; background:#0b1729a6; color:#b9cbc9; padding:6px 10px; border:1px solid #738e8b66; cursor:pointer; font-size:.7rem; white-space:nowrap; }.world-live { color:#a3dace; font:10px monospace; letter-spacing:2px; white-space:nowrap; }
#world-dialogue { position:relative; z-index:1; background:#101d2a; border:1px solid #58736f; border-top:0; padding:20px 24px 24px; margin:0; }
[hidden] { display:none !important; }
.dialogue-label { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }.dialogue-label>span { font-size:.78rem; color:#d7c193; font-weight:700; letter-spacing:.5px; }.dialogue-label>button { background:none; border:0; color:#81969d; font-size:.66rem; cursor:pointer; }
#dialogue-line { color:#edf0e7; font-size:1rem; line-height:1.85; max-width:900px; }
#dialogue-line p+p { margin-top:8px; }
.scene-narration { color:#a6b4b8; font-size:.86rem; }
.dialogue-label small { color:#839c9c; font-size:.7rem; }
#choice-prompt { margin-top:22px; padding-top:16px; border-top:1px solid #ffffff16; font-size:.8rem; font-weight:700; color:#dfcba2; }
.encounter-status { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; padding:14px 18px; margin-bottom:12px; background:#15232e; border:1px solid #ffffff1a; }
.encounter-status>div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; }
.encounter-status span { color:#9baeb3; font-size:.75rem; }.encounter-status strong { color:#e2ead9; font-size:.82rem; }.encounter-status small { width:100%; color:#728c91; font-size:.6rem; }
.status-track { width:100%; height:4px; background:#2c3d46; }.status-track i { display:block; height:100%; background:#9dd8bd; transition:width .3s; }#status-doubt-bar { background:#e0bd7e; }
#encounter-caption { position:absolute; top:58px; left:18px; padding:6px 11px; font-size:.7rem; color:#e0d7b9; background:#0d1a27c9; border-left:2px solid #b9c49b; pointer-events:none; }
#dialogue-next { display:flex; gap:30px; align-items:center; margin:16px 0 0 auto; color:#c5dbca; background:none; border:0; cursor:pointer; font-size:.8rem; }#dialogue-next span { font:10px monospace; color:#6b8b92; }
.choices-container { display:grid; grid-template-columns:1fr; gap:9px; margin:12px 0 0; padding:0; }.choice-btn { background:#1d3441; color:#eef1e7; border:1px solid #597780; border-radius:4px; padding:14px 16px; font-size:.91rem; font-weight:400; line-height:1.65; text-align:left; margin:0; box-shadow:none; cursor:pointer; }.choice-btn:hover { background:#2a4852; border-color:#b8d4b9; transform:none; }.choice-arrow { display:inline-grid; place-items:center; color:#e3d3a8; background:#0c202d; width:24px; height:24px; border:1px solid #5a747a; font-size:.75rem; flex-shrink:0; }
.timeattack-bar-wrap { padding:10px 0 0; margin:0; background:none; border:0; }.timeattack-header { font-size:.65rem; }.timeattack-header>span:last-child { display:none; }.timeattack-bar-bg { height:3px; border-radius:0; }.timeattack-bar-fill { border-radius:0; }
.result-card-wrap { max-width:720px; margin:25px auto; border-radius:0; border:1px solid #57736d; background:#14212b; }.result-title { color:#e0e6d4; }.result-persona { border-radius:0; }.action-btn-group { max-width:720px; margin:0 auto; }.btn-primary,.btn-secondary { border-radius:0; }.btn-share { background:#bcd1b4; }.site-disclaimer { margin-top:40px; }
@media(max-width:900px) { .chapter-grid { grid-template-columns:1fr 1fr; }.hero-section { padding:35px; }.chapter-art { height:150px; } }
@media(max-width:600px) {
    #app,body[data-screen='game-screen'] #app { max-width:100%; padding:16px 14px; }.global-header { margin-bottom:20px; gap:8px; }.header-actions { gap:0; }.brand-title { font-size:.85rem; }.btn-header { font-size:.65rem; padding:6px; }.hero-section { min-height:340px; padding:30px 22px; margin-bottom:28px; }.hero-title { letter-spacing:-2px; font-size:3rem; }.hero-sub { font-size:.77rem; }.hero-tag { font-size:.52rem; letter-spacing:1.5px; }.hero-section::before { background-position:0 0; opacity:.7; }.chapter-grid { gap:10px; }.chapter-card { padding:0 12px 15px; }.chapter-art { margin:0 -12px 14px; height:120px; }.chapter-name { font-size:.86rem; min-height:4.5em; }.chapter-desc { font-size:.7rem; }.chapter-select-title { font-size:.9rem; }.chapter-select-title>span { font-size:.48rem; letter-spacing:1px; }.chapter-meta { font-size:.58rem; }
    #adventure-stage { aspect-ratio:16/9; }.world-topbar { padding:10px; gap:6px; font-size:.63rem; }.world-topbar button { font-size:.6rem; padding:5px; }#encounter-caption { top:45px; left:10px; font-size:.6rem; padding:4px 8px; }
    #world-dialogue { padding:16px 14px 18px; margin:0; }#dialogue-line { font-size:.9rem; line-height:1.85; }.choice-btn { font-size:.85rem; padding:12px; }.encounter-status { gap:10px; padding:10px; margin-bottom:8px; }.encounter-status span { font-size:.62rem; }.encounter-status strong { font-size:.68rem; }.encounter-status small { font-size:.55rem; }.adsense-wrapper { margin-top:160px; }
}