:root{
  --bg:#0d0f12;
  --bg-soft:#15181d;
  --panel:#171a1f;
  --panel-2:#1c2026;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#f1ede6;
  --muted:#c2bdb4;
  --soft:#9f988f;
  --accent:#b32525;
  --accent-2:#7f1515;
  --shadow:0 20px 60px rgba(0,0,0,.36);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(179,37,37,.14), transparent 34%),
    linear-gradient(180deg, #0a0c0f 0%, #101318 100%);
  line-height:1.65;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.22;
}
a{color:inherit}
.hidden{display:none}
.enter-screen{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at center, rgba(179,37,37,.12), transparent 40%),
    linear-gradient(180deg, rgba(6,7,9,.97), rgba(11,13,17,.98));
  cursor:pointer;
}
.enter-copy{
  width:min(100%,560px);
  text-align:center;
  padding:34px 24px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}
.enter-small,.hero-kicker,.section-kicker,.eyebrow,.toggle,.quick-nav a,.footer p,.place-item summary span{
  letter-spacing:.16em; text-transform:uppercase;
}
.enter-small{margin:0 0 10px;color:var(--muted);font-size:.78rem}
.enter-copy h1{margin:0;font-size:clamp(2.6rem,8vw,4.8rem);line-height:.92;letter-spacing:.06em}
.enter-main{margin:18px 0 8px;font-size:1.08rem}
.enter-sub{margin:0;color:var(--muted);font-size:.93rem}
.audio-toggle{
  position:fixed; right:18px; bottom:18px; z-index:30;
  border:1px solid var(--line-strong);
  background:rgba(12,14,18,.92);
  color:#fff; padding:12px 14px; border-radius:999px; cursor:pointer;
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
}
.app{padding-bottom:72px}
.hero{padding:72px 20px 24px;position:relative}
.hero-inner{
  width:min(1120px,100%); margin:0 auto; padding:30px;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
  box-shadow:var(--shadow);
}
.hero-kicker{margin:0 0 8px;font-size:.76rem;color:#dfd8cf}
.hero h1{margin:0;font-size:clamp(2.8rem,7vw,5rem);line-height:.94;letter-spacing:.04em}
.hero-sub{margin:10px 0 0;color:#f1d5d5;font-weight:700;font-size:1.05rem}
.hero-desc{max-width:760px;margin:14px 0 0;color:var(--muted)}
.quick-nav{
  position:sticky; top:0; z-index:25;
  display:flex; gap:10px; overflow:auto; white-space:nowrap;
  padding:12px 20px;
  background:rgba(10,12,16,.92);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(12px);
}
.quick-nav a{
  text-decoration:none; font-size:.72rem; color:#fff;
  padding:8px 12px; border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.content-block{
  width:min(1120px,calc(100% - 32px)); margin:24px auto 0; padding:28px;
  border:1px solid var(--line); background:rgba(255,255,255,.028); box-shadow:var(--shadow);
}
.section-title-wrap{margin-bottom:18px}
.section-kicker{margin:0 0 6px;font-size:.74rem;color:#d6cfc6}
.section-title-wrap h2{margin:0;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.1}
.section-desc{margin:10px 0 0;color:var(--muted)}
.info-grid,
.faction-grid,
.activity-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
}
.info-card,.faction-card,.activity-card{
  border:1px solid var(--line); padding:18px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
}
.info-card h3,.faction-card h3,.activity-card h3{margin:0 0 8px;font-size:1rem}
.info-card p,.faction-card p,.activity-card p{margin:0;color:var(--muted)}
.core-grid{display:grid; gap:12px}
.core-point{
  display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:start;
  border:1px solid var(--line); padding:18px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.core-point h3{margin:0;font-size:1.4rem;color:#f5dede}
.core-point h4{margin:0 0 6px;font-size:1.02rem}
.core-point p{margin:0;color:var(--muted)}
.places-list{display:grid; gap:10px}
.place-item{border:1px solid var(--line); background:rgba(255,255,255,.02)}
.place-item[open]{background:rgba(255,255,255,.03)}
.place-item summary{list-style:none; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:16px 18px; cursor:pointer}
.place-item summary::-webkit-details-marker{display:none}
.place-item summary span{font-size:.72rem;color:#fff;background:var(--accent);padding:6px 8px; display:inline-block}
.place-item summary h3{margin:0 0 2px;font-size:1.04rem}
.place-item summary p{margin:0;color:#d4cec5;font-size:.88rem}
.place-detail{padding:0 18px 18px}
.place-detail p{margin:0;color:var(--muted)}
.card-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.char-card{border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.016)); overflow:hidden}
.char-card summary{list-style:none; display:grid; grid-template-columns:minmax(170px,220px) 1fr; gap:18px; padding:18px; cursor:pointer; align-items:start}
.char-card summary::-webkit-details-marker{display:none}
.portrait{border:1px solid rgba(255,255,255,.08); background:#0a0c0f; padding:8px}
.portrait img{display:block; width:100%; height:auto; aspect-ratio:832/1216; object-fit:contain}
.card-head h3{margin:2px 0 8px; font-size:1.3rem; line-height:1.16}
.card-head h3 span{display:block; margin-top:6px; color:#bcb5ac; font-size:.82rem; font-weight:500; word-break:break-all}
.eyebrow{margin:0; color:#e8dfd6; font-size:.72rem}
.summary{margin:0; color:#fff; font-size:.96rem}
.toggle{margin:12px 0 0; color:#d2b6a1; font-size:.72rem}
.detail-grid{padding:0 18px 18px}
.detail-grid ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.detail-grid li{display:grid; grid-template-columns:92px 1fr; gap:14px; padding-top:10px; border-top:1px solid var(--line)}
.detail-grid strong{color:#fff}
.detail-grid span{color:var(--muted)}
.footer{width:min(1120px,calc(100% - 32px)); margin:24px auto 0; padding:18px 0 10px; color:#aaa39a; text-align:center}
.footer p{margin:4px 0; font-size:.76rem}
@media (max-width: 980px){
  .info-grid,.faction-grid,.activity-grid,.card-grid{grid-template-columns:1fr}
  .char-card summary{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .hero{padding:56px 14px 18px}
  .quick-nav{padding:10px 14px}
  .content-block{width:min(100% - 20px,100%); padding:20px}
  .core-point{grid-template-columns:1fr; gap:10px}
  .detail-grid li{grid-template-columns:1fr; gap:6px}
  .enter-copy{padding:28px 18px}
}