:root {
  --night:#0c0d0a; --panel:#12140f; --panel-2:#171911; --paper:#e8ddbd;
  --muted:#a69c82; --dim:#746d59; --gold:#c6a45b; --gold-2:#ead79d;
  --moss:#3d4a36; --purple:#a46db7; --line:rgba(198,164,91,.24);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--paper); background:
    radial-gradient(circle at 15% 8%,rgba(61,74,54,.22),transparent 32rem),
    radial-gradient(circle at 92% 48%,rgba(119,69,130,.09),transparent 28rem),var(--night);
  font-family:Georgia,"Noto Serif KR","Malgun Gothic",serif; line-height:1.65;
}
body.is-locked { overflow:hidden; }
img { display:block; height:auto; }
button,a,summary { font:inherit; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
.section { width:min(1180px,91vw); margin:0 auto; padding:clamp(5rem,9vw,8.5rem) 0; }
.eyebrow { margin:0 0 .65rem; color:var(--gold); font-size:.68rem; font-weight:700; letter-spacing:.22em; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { margin:0; font-size:clamp(2.15rem,5vw,4.6rem); font-weight:500; letter-spacing:-.045em; line-height:1; }
h2 { margin-bottom:1rem; font-size:clamp(2.25rem,5vw,4.5rem); font-weight:500; letter-spacing:-.045em; line-height:1.05; }
h3 { font-size:1.55rem; font-weight:500; }
h4 { margin:0; font-size:1.16rem; font-weight:500; }

/* Entry */
.gate { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:auto; background:#050504; transition:opacity .7s,visibility .7s; }
.gate.is-opening { opacity:0; visibility:hidden; }
.gate__button { display:flex; flex-direction:column; align-items:center; width:auto; max-width:100vw; margin:auto; padding:0; border:0; background:none; cursor:pointer; }
.gate__button img { width:auto; max-width:100vw; height:auto; max-height:calc(100svh - 3.3rem); object-fit:contain; }
.gate__hint { display:block; min-height:3.3rem; padding:1rem 1.2rem .8rem; color:#9b927a; font-size:clamp(.7rem,1.8vw,.85rem); letter-spacing:.08em; }
.gate__button:hover .gate__hint { color:var(--gold-2); }
.gate__button:focus-visible { outline:2px solid var(--gold-2); outline-offset:-4px; }
.site { min-height:100vh; overflow:hidden; }
.site.is-visible { animation:reveal .8s ease both; }
@keyframes reveal { from{opacity:0} to{opacity:1} }

/* Navigation */
.topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:62px; padding:0 4vw; border-bottom:1px solid var(--line); background:rgba(12,13,10,.89); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:.65rem; font-size:.88rem; letter-spacing:.04em; }
.brand span { color:var(--gold); }
nav { display:flex; gap:clamp(.9rem,3vw,2.2rem); color:#bcb298; font-size:.72rem; letter-spacing:.13em; }
nav a:hover,nav a:focus-visible { color:var(--gold-2); }

/* Character roster */
.party-stage { display:flex; min-height:calc(100svh - 62px); flex-direction:column; justify-content:center; padding:clamp(1.4rem,3vh,2.7rem) 0; }
.stage-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:clamp(1.2rem,3vh,2.3rem); }
.stage-heading>p { max-width:430px; margin:0; color:var(--muted); font-size:.88rem; text-align:right; }
.stage-heading>p span { color:var(--gold); font-size:.75rem; }
.roster { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(.45rem,1.1vw,.9rem); }
.roster-card { position:relative; min-width:0; padding:0; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,rgba(198,164,91,.08),rgba(61,74,54,.12)); cursor:pointer; transition:transform .25s,border-color .25s,box-shadow .25s; }
.roster-card:hover,.roster-card:focus-visible { z-index:2; transform:translateY(-6px); border-color:var(--gold); box-shadow:0 16px 35px rgba(0,0,0,.38); outline:none; }
.roster-card--boss { border-color:rgba(164,109,183,.35); background:linear-gradient(145deg,rgba(164,109,183,.1),rgba(38,22,43,.2)); }
.roster-card--boss:hover,.roster-card--boss:focus-visible { border-color:var(--purple); }
.roster-card__image { display:flex; justify-content:center; aspect-ratio:832/1216; overflow:hidden; }
.roster-card__image img { width:100%; height:100%; object-fit:contain; }
.roster-card__copy { display:block; min-height:4.4rem; padding:.8rem .5rem; border-top:1px solid var(--line); text-align:center; background:rgba(10,11,8,.94); }
.roster-card__copy strong,.roster-card__copy small { display:block; }
.roster-card__copy strong { margin-bottom:.22rem; font-size:clamp(.8rem,1.4vw,1.1rem); font-weight:500; }
.roster-card__copy small { color:var(--dim); font-size:clamp(.55rem,.85vw,.68rem); line-height:1.4; }

/* Sections */
.section-heading { max-width:860px; margin-bottom:3rem; }
.section-heading>p:last-child { color:var(--muted); }
.section-heading--center { margin-right:auto; margin-left:auto; text-align:center; }
.world { border-top:1px solid var(--line); }
.world-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--line); gap:1px; }
.world-grid article { min-height:215px; padding:1.8rem; background:var(--panel); }
.world-grid article>span { color:var(--gold); font-size:.65rem; letter-spacing:.15em; }
.world-grid h3 { margin:.9rem 0 .7rem; }
.world-grid p { margin:0; color:var(--muted); font-size:.86rem; }
.quest-line { display:grid; grid-template-columns:1.4fr 1fr 1fr; margin-top:1.2rem; border:1px solid var(--line); }
.quest-line div { padding:1.2rem 1.4rem; }
.quest-line div+div { border-left:1px solid var(--line); }
.quest-line small,.quest-line strong { display:block; }
.quest-line small { margin-bottom:.35rem; color:var(--gold); font-size:.65rem; letter-spacing:.12em; }
.quest-line strong { font-size:.85rem; font-weight:400; }
.race-strip { display:grid; grid-template-columns:repeat(6,1fr); margin-top:3rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.race-strip>span { padding:1rem .7rem; text-align:center; font-size:.82rem; }
.race-strip>span+span { border-left:1px solid var(--line); }
.race-strip small { display:block; margin-top:.25rem; color:var(--dim); font-size:.62rem; }

/* System */
.system { width:min(1050px,91vw); }
.system-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
details { align-self:start; border:1px solid var(--line); background:rgba(18,20,15,.9); }
summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::before { content:"＋"; order:3; color:var(--gold); font-size:.9rem; }
details[open] summary::before { content:"－"; }
summary span { font-size:.92rem; }
summary b { margin-left:auto; color:var(--gold); font-size:.7rem; font-weight:400; letter-spacing:.12em; }
.detail-body { padding:0 1.25rem 1.3rem; border-top:1px solid rgba(198,164,91,.13); color:var(--muted); font-size:.82rem; }
.detail-body>p:first-child { margin-top:1rem; }
.detail-body p { margin-bottom:.5rem; }
.detail-body ul { margin:.8rem 0 0; padding-left:1.2rem; }
.detail-body li+li { margin-top:.3rem; }
.detail-body strong,.detail-body b { color:var(--gold-2); font-weight:500; }
.detail-body small { display:block; margin-top:.8rem; color:var(--dim); }
.grade-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.15rem 1rem; padding-top:1rem; }
.grade-list p { margin:0; }
.grade-list i { display:inline-grid; place-items:center; width:1.55rem; height:1.55rem; margin-right:.45rem; border:1px solid var(--line); color:var(--gold); font-style:normal; font-size:.67rem; }
.grade-list small { grid-column:1/-1; }
.depth,.reward-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; padding-top:1rem; }
.depth span,.reward-grid span { padding:.6rem .3rem; border:1px solid rgba(198,164,91,.14); text-align:center; font-size:.72rem; }
.depth em,.reward-grid em { display:block; color:var(--gold); font-style:normal; font-size:.63rem; }
.depth p,.reward-grid p { grid-column:1/-1; }
.reward-grid { grid-template-columns:repeat(4,1fr); }
.price-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.3rem 1rem; padding-top:1rem; }
.price-list p { display:flex; justify-content:space-between; gap:.5rem; margin:0; padding:.35rem 0; border-bottom:1px solid rgba(198,164,91,.1); }

/* Places */
.place-group+.place-group { margin-top:5rem; }
.place-group__heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.place-group__heading h3 { margin:0; }
.place-group__heading span { color:var(--dim); font-size:.72rem; letter-spacing:.08em; }
.place-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.place-grid article { display:flex; min-height:230px; flex-direction:column; padding:1.5rem; border:1px solid var(--line); background:linear-gradient(145deg,rgba(23,25,17,.94),rgba(14,15,12,.94)); }
.place-grid header { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.place-grid header span { display:grid; place-items:center; min-width:2.2rem; height:1.5rem; padding:0 .35rem; border:1px solid var(--line); color:var(--gold); font-size:.6rem; }
.place-grid p { color:var(--muted); font-size:.84rem; }
.place-grid footer { margin-top:auto; padding-top:.9rem; border-top:1px solid rgba(198,164,91,.13); color:var(--gold); font-size:.67rem; line-height:1.6; }
.place-group--dungeon .place-grid article { border-color:rgba(143,103,62,.32); }
.place-grid .final-dungeon { border-color:rgba(164,109,183,.42); background:linear-gradient(145deg,rgba(51,27,57,.4),rgba(14,15,12,.95)); }
.final-dungeon header span,.final-dungeon footer { color:#c99bd8; }

/* Profile modal */
.profile-modal { width:min(940px,92vw); max-height:90svh; padding:0; overflow:hidden; border:1px solid var(--line); color:var(--paper); background:#10110d; box-shadow:0 35px 90px rgba(0,0,0,.7); }
.profile-modal::backdrop { background:rgba(3,3,2,.83); backdrop-filter:blur(8px); }
.profile-modal[open] { display:grid; grid-template-columns:minmax(260px,.78fr) minmax(370px,1.22fr); animation:modal-in .25s ease both; }
@keyframes modal-in { from{opacity:0;transform:translateY(12px) scale(.985)} to{opacity:1;transform:none} }
.modal-close { position:absolute; top:.8rem; right:.8rem; z-index:2; width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:50%; color:var(--gold-2); background:rgba(12,13,10,.86); font-size:1.45rem; line-height:1; cursor:pointer; }
.modal-image { display:flex; align-items:center; justify-content:center; min-height:0; overflow:auto; border-right:1px solid var(--line); background:radial-gradient(circle,rgba(198,164,91,.09),transparent 70%); }
.modal-image img { width:auto; max-width:100%; height:auto; max-height:88svh; object-fit:contain; }
.modal-copy { padding:clamp(2rem,5vw,4rem); overflow:auto; }
.modal-copy h2 { margin-bottom:.5rem; }
.profile-meta { color:var(--gold); font-size:.82rem; letter-spacing:.06em; }
.profile-summary { color:var(--muted); }
.modal-copy dl { margin:2rem 0 0; }
.modal-copy dl>div { display:grid; grid-template-columns:6.5rem 1fr; gap:1rem; padding:1rem 0; border-top:1px solid rgba(198,164,91,.16); }
.modal-copy dt { color:var(--gold); font-size:.7rem; letter-spacing:.08em; }
.modal-copy dd { margin:0; color:#b7ad94; font-size:.83rem; }
.tag-list { display:flex; flex-wrap:wrap; gap:.45rem; }
.tag-list span { padding:.28rem .55rem; border:1px solid var(--line); color:var(--gold-2); font-size:.7rem; }
.tag-list--relation span { border-color:rgba(164,109,183,.35); color:#d2acd9; }

/* Footer + audio */
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2rem 5vw; border-top:1px solid var(--line); color:var(--gold); letter-spacing:.17em; }
.site-footer small { color:var(--dim); letter-spacing:.05em; }
.sound { position:fixed; right:1rem; bottom:1rem; z-index:40; display:flex; align-items:center; gap:.55rem; padding:.65rem .85rem; border:1px solid var(--line); border-radius:999px; color:var(--gold-2); background:rgba(12,13,10,.9); backdrop-filter:blur(10px); cursor:pointer; }
.sound__icon { min-width:1rem; font-size:.75rem; text-align:center; }
.sound__text { font-size:.65rem; letter-spacing:.14em; }
.sound:hover,.sound:focus-visible { border-color:var(--gold); }

@media (max-width:900px) {
  .world-grid { grid-template-columns:repeat(2,1fr); }
  .race-strip { grid-template-columns:repeat(3,1fr); }
  .race-strip>span:nth-child(4) { border-left:0; }
  .race-strip>span:nth-child(n+4) { border-top:1px solid var(--line); }
  .quest-line { grid-template-columns:1fr; }
  .quest-line div+div { border-top:1px solid var(--line); border-left:0; }
  .place-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  .topbar { min-height:56px; padding:0 .8rem; }
  .brand { font-size:.7rem; }
  nav { gap:.7rem; font-size:.6rem; }
  .party-stage { min-height:calc(100svh - 56px); }
  .stage-heading { align-items:start; margin-bottom:1rem; }
  .stage-heading>p { max-width:180px; font-size:.67rem; line-height:1.5; }
  .stage-heading>p br { display:none; }
  .roster { grid-template-columns:repeat(3,1fr); }
  .roster-card__copy { min-height:3.4rem; padding:.5rem .25rem; }
  .system-grid { grid-template-columns:1fr; }
  .profile-modal[open] { grid-template-columns:1fr; overflow:auto; }
  .modal-image { max-height:38svh; border-right:0; border-bottom:1px solid var(--line); }
  .modal-image img { max-height:38svh; }
  .modal-copy { overflow:visible; padding:1.6rem; }
  .place-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .section { width:93vw; }
  .topbar .brand { max-width:120px; line-height:1.25; }
  nav a:nth-child(2) { display:none; }
  h1 { font-size:2rem; }
  .stage-heading .eyebrow { font-size:.5rem; }
  .stage-heading>p { max-width:140px; }
  .roster { gap:.35rem; }
  .roster-card__copy small { font-size:.5rem; }
  .world-grid { grid-template-columns:1fr; }
  .world-grid article { min-height:auto; }
  .race-strip { grid-template-columns:repeat(2,1fr); }
  .race-strip>span:nth-child(3),.race-strip>span:nth-child(5) { border-left:0; }
  .race-strip>span:nth-child(4) { border-left:1px solid var(--line); }
  .race-strip>span:nth-child(n+3) { border-top:1px solid var(--line); }
  .depth,.reward-grid { grid-template-columns:repeat(2,1fr); }
  .price-list { grid-template-columns:1fr; }
  .place-group__heading { align-items:start; flex-direction:column; }
  .modal-copy dl>div { grid-template-columns:1fr; gap:.4rem; }
  .site-footer { align-items:start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}