:root{
  --bg:#101113;
  --bg-soft:#17191d;
  --panel:#1b1d22;
  --panel-2:#20232a;
  --line:rgba(255,255,255,.08);
  --text:#ece9e3;
  --muted:#bdb9b0;
  --accent:#a52323;
  --accent-soft:rgba(165,35,35,.14);
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{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(165,35,35,.12), transparent 35%),
    linear-gradient(180deg, #0f1012 0%, #14161a 100%);
  line-height:1.65;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.28;
  pointer-events:none;
}
.hidden{display:none}
.enter-screen{
  position:fixed; inset:0; z-index:40;
  display:grid; place-items:center;
  padding:24px;
  background:linear-gradient(180deg, rgba(6,7,9,.96), rgba(12,14,18,.96));
  cursor:pointer;
}
.enter-copy{
  width:min(100%,560px);
  text-align:center;
  border:1px solid var(--line);
  padding:32px 24px;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
}
.enter-small,.hero-kicker,.section-kicker,.eyebrow,.toggle,.quick-nav a,.place-item summary span,.footer p{letter-spacing:.16em;text-transform:uppercase}
.enter-small{color:var(--muted);font-size:.76rem;margin:0 0 8px}
.enter-copy h1{font-size:clamp(2.4rem,8vw,4.6rem);line-height:.92;margin:0;color:#fff;letter-spacing:.06em}
.enter-main{font-size:1.05rem;margin:16px 0 6px}
.enter-sub{color:var(--muted);font-size:.92rem;margin:0}
.audio-toggle{
  position:fixed; right:18px; bottom:18px; z-index:25;
  border:1px solid var(--line);
  background:rgba(10,10,10,.88);
  color:#fff; padding:12px 14px; border-radius:999px; cursor:pointer;
  backdrop-filter: blur(8px);
}
.app{padding-bottom:64px}
.hero{padding:72px 20px 28px;position:relative}
.hero-inner{width:min(1100px,100%);margin:0 auto;border:1px solid var(--line);padding:28px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.hero-kicker{font-size:.75rem;color:#cfc9bf;margin:0 0 6px}
.hero h1{font-size:clamp(2.5rem,7vw,5rem);margin:0;line-height:.95;letter-spacing:.04em}
.hero-desc{max-width:620px;color:var(--muted);margin:14px 0 0}
.quick-nav{
  position:sticky; top:0; z-index:20;
  display:flex; gap:10px; overflow:auto; white-space:nowrap;
  padding:12px 20px; background:rgba(13,15,18,.88); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  backdrop-filter: blur(12px);
}
.quick-nav a{color:#fff;text-decoration:none;font-size:.72rem;padding:8px 12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.content-block{width:min(1100px,calc(100% - 32px));margin:28px auto 0;padding:28px;border:1px solid var(--line);background:rgba(255,255,255,.025);box-shadow:var(--shadow)}
.section-title-wrap{margin-bottom:18px}
.section-kicker{font-size:.74rem;color:#d5cdc3;margin:0 0 6px}
.section-title-wrap h2{margin:0;font-size:clamp(1.6rem,4vw,2.4rem)}
.section-desc{margin:8px 0 0;color:var(--muted)}
.core-grid,.faction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.core-card,.faction-card{border:1px solid var(--line);padding:18px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015))}
.core-card h3,.faction-card h3{margin:0 0 8px;font-size:1rem;color:#fff}
.core-card p,.faction-card p{margin:0;color:var(--muted)}
.places-list{display:grid;gap:10px}
.place-item{border:1px solid var(--line);background:rgba(255,255,255,.018)}
.place-item[open]{background:rgba(255,255,255,.028)}
.place-item summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;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}
.place-item summary h3{margin:0;font-size:1.06rem}
.place-item summary p{margin:0;color:#d3cec6;font-size:.84rem;text-align:right}
.place-detail{padding:0 18px 18px;color:var(--muted)}
.character-section .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,.03), rgba(255,255,255,.015));overflow:hidden}
.char-card summary{list-style:none;display:grid;grid-template-columns:minmax(160px,230px) 1fr;gap:18px;padding:18px;cursor:pointer;align-items:start}
.char-card summary::-webkit-details-marker{display:none}
.portrait{background:#0f1012;border:1px solid rgba(255,255,255,.06);padding:8px}
.portrait img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.card-head h3{margin:2px 0 8px;font-size:1.3rem;line-height:1.15}
.card-head h3 span{display:block;font-size:.82rem;color:#b9b3aa;font-weight:500;margin-top:6px;word-break:break-all}
.eyebrow{color:#e2dbcf;font-size:.72rem;margin:0}
.summary{margin:0;color:#fff;font-size:.95rem}
.toggle{margin:12px 0 0;color:#c8b19a;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:84px 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(1100px,calc(100% - 32px));margin:24px auto 0;padding:22px 0 10px;color:#a8a39c;text-align:center}
.footer p{margin:4px 0;font-size:.76rem}
@media (max-width: 900px){
  .core-grid,.faction-grid,.character-section .card-grid{grid-template-columns:1fr}
  .char-card summary{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .hero{padding:56px 14px 20px}
  .quick-nav{padding:10px 14px}
  .content-block{width:min(100% - 20px,100%);padding:20px}
  .place-item summary{grid-template-columns:auto 1fr;gap:10px}
  .place-item summary p{grid-column:1 / -1;text-align:left;font-size:.8rem}
  .detail-grid li{grid-template-columns:1fr;gap:6px}
  .enter-copy{padding:26px 18px}
}