:root {
  --ink: #eef7ff;
  --muted: #9bafbf;
  --navy-0: #030810;
  --navy-1: #06101c;
  --navy-2: #0a1725;
  --navy-3: #102337;
  --line: rgba(153, 207, 235, 0.16);
  --line-strong: rgba(111, 221, 255, 0.38);
  --cyan: #6ee7ff;
  --cyan-2: #1db6e4;
  --teal: #59f1d5;
  --red: #d44758;
  --burgundy: #4d0d1b;
  --gold: #c7a263;
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.38);
  --radius: 18px;
  --shell: min(1180px, calc(100vw - 44px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy-0); }
body {
  margin: 0;
  background: var(--navy-0);
  color: var(--ink);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, system-ui, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999; transform: translateY(-150%);
  background: #fff; color: #000; padding: 8px 12px; border-radius: 8px;
}
.skip-link:focus { transform: none; }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 80; height: 72px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  padding: 0 max(22px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.topbar.scrolled {
  background: rgba(3, 8, 16, .84); border-color: var(--line); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; letter-spacing: .08em; }
.brand-mark {
  width: 25px; aspect-ratio: 1; display: inline-block; border: 1px solid var(--cyan);
  clip-path: polygon(50% 0, 72% 36%, 100% 50%, 72% 64%, 50% 100%, 28% 64%, 0 50%, 28% 36%);
  background: linear-gradient(135deg, rgba(110,231,255,.1), rgba(110,231,255,.8));
  box-shadow: 0 0 24px rgba(110,231,255,.35);
}
.brand b { display:block; font-size: 13px; line-height: 1.1; }
.brand small { display:block; color: var(--muted); font-size: 8px; line-height: 1.1; letter-spacing:.2em; margin-top:4px; }
.site-nav { display: flex; justify-content: center; gap: 24px; }
.site-nav a { font-size: 12px; color: #c4d1dc; transition: color .2s ease; }
.site-nav a:hover, .site-nav a.active { color: var(--cyan); }
.nav-toggle { display:none; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.language-tabs {
  display:flex; align-items:center; padding:3px; gap:2px; border:1px solid var(--line);
  border-radius:999px; background:rgba(5,15,25,.66); backdrop-filter:blur(12px);
}
.language-tabs button {
  min-width:34px; height:28px; padding:0 8px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:#8198a9; font-size:10px; font-weight:700; letter-spacing:.02em;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.language-tabs button:hover { color:#e8f8ff; }
.language-tabs button.active { color:#03101a; background:var(--cyan); box-shadow:0 0 18px rgba(110,231,255,.18); }
.search-button {
  border: 1px solid var(--line); background: rgba(7,17,29,.55); color: #cfe1ed;
  border-radius: 999px; display:flex; align-items:center; gap:12px; padding:8px 10px 8px 14px; cursor:pointer;
}
kbd { border: 1px solid rgba(255,255,255,.15); border-radius: 5px; padding: 2px 7px; color:#8294a4; font-size:10px; background:rgba(255,255,255,.04); }

.hero { min-height: 100svh; position: relative; display:flex; align-items:center; isolation:isolate; overflow:hidden; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-4; transform:scale(1.02); }
.hero-shade {
  position:absolute; inset:0; z-index:-3;
  background:
    linear-gradient(90deg, rgba(1,5,12,.97) 0%, rgba(3,8,16,.81) 35%, rgba(3,8,16,.2) 71%, rgba(3,8,16,.56) 100%),
    linear-gradient(0deg, #030810 0%, transparent 26%, rgba(3,8,16,.12) 100%);
}
.hero-grid {
  position:absolute; inset:0; z-index:-2; opacity:.17;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, black, transparent 68%);
}
.hero-content { padding-top: 92px; }
.eyebrow { color: var(--cyan); font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin:0 0 20px; font-weight:700; }
.eyebrow span { color:#d9f6ff; }
.eyebrow i { display:inline-block; width:36px; height:1px; vertical-align:middle; background:var(--cyan-2); margin:0 12px; }
.hero h1 { margin:0; font-weight:300; font-size:clamp(50px, 7.6vw, 105px); line-height:1.08; letter-spacing:-.055em; text-shadow:0 6px 36px rgba(0,0,0,.7); }
.hero-title-line { display:block; width:max-content; max-width:100%; white-space:nowrap; }
.hero h1 em { font-style:normal; font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(219,246,255,.82); }
.hero-copy { font-size:clamp(20px,2.3vw,31px); line-height:1.35; letter-spacing:-.03em; margin:34px 0 12px; font-weight:600; }
.hero-note { max-width:560px; color:#a9bdcc; margin:0; }
.hero-actions { display:flex; gap:12px; margin-top:32px; }
.button { min-width:156px; height:48px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; letter-spacing:.02em; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:linear-gradient(135deg,#7ceaff,#2da7d5); color:#03101a; box-shadow:0 10px 35px rgba(46,187,229,.22); }
.button-ghost { border:1px solid rgba(184,221,238,.3); background:rgba(4,12,20,.45); }
.hero-status {
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); display:flex; align-items:center; gap:0;
  border-top:1px solid var(--line); padding-top:15px;
}
.hero-status span { color:#8fa5b5; font-size:10px; letter-spacing:.06em; padding:0 24px; border-right:1px solid var(--line); }
.hero-status span:first-child { padding-left:0; }
.hero-status span:last-child { border:0; }
.hero-status b { color:#eafaff; margin-right:7px; font-size:13px; }
.hero-status .live { margin-left:auto; }
.hero-status .live i { width:6px; height:6px; background:var(--teal); display:inline-block; border-radius:50%; margin-right:7px; box-shadow:0 0 12px var(--teal); }
.scroll-cue { position:absolute; right:24px; bottom:29px; writing-mode:vertical-rl; font-size:9px; letter-spacing:.18em; color:#718897; display:flex; gap:10px; align-items:center; }
.scroll-cue span { width:1px; height:26px; background:var(--cyan); }

.section { padding:120px 0; position:relative; background:var(--navy-1); }
.section:nth-of-type(even) { background:#07121f; }
.section-heading { margin-bottom:42px; max-width:760px; }
.section-heading h2 { margin:0; font-size:clamp(34px,5vw,62px); letter-spacing:-.035em; line-height:1.14; word-break:keep-all; text-wrap:balance; }
.section-heading > p:last-child { color:var(--muted); margin:18px 0 0; max-width:680px; }
.split-heading { max-width:none; display:grid; grid-template-columns:1fr minmax(300px,500px); gap:60px; align-items:end; }
.split-heading > p:last-child { margin:0 0 2px; }

.world-section { padding-top:140px; }
.world-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.world-feature { background:#071321; padding:36px; min-height:230px; position:relative; overflow:hidden; }
.world-feature::after { content:""; position:absolute; width:130px; height:130px; right:-65px; top:-65px; border:1px solid var(--line); border-radius:50%; }
.feature-number { color:#567083; font-size:11px; letter-spacing:.16em; }
.world-feature h3 { font-size:22px; margin:52px 0 10px; }
.world-feature p { color:var(--muted); font-size:14px; margin:0; }
.rank-line { display:flex; align-items:center; margin-top:38px; color:#91a7b7; font-size:12px; letter-spacing:.15em; }
.rank-line i { height:1px; flex:1; background:linear-gradient(90deg,var(--line),var(--line-strong)); margin:0 16px; }
.rank-line .rank-s { color:var(--cyan); font-size:18px; text-shadow:0 0 18px rgba(110,231,255,.5); }

.opening-strip { min-height:650px; position:relative; display:flex; align-items:center; overflow:hidden; background:#07111d; }
.opening-strip > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.opening-strip::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,7,14,.97) 5%,rgba(2,7,14,.78) 48%,rgba(2,7,14,.14) 100%); }
.opening-copy { position:relative; z-index:2; }
.opening-copy h2 { font-size:clamp(34px,5vw,64px); letter-spacing:-.035em; line-height:1.14; margin:0; word-break:keep-all; }
.opening-copy blockquote { margin:28px 0 10px; color:var(--cyan); font-size:20px; font-weight:700; border-left:2px solid var(--cyan); padding-left:16px; }
.opening-copy > p:not(.eyebrow) { color:#aabcca; }
.opening-locks { display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; }
.opening-locks span { border:1px solid var(--line-strong); background:rgba(9,27,42,.66); padding:7px 11px; font-size:11px; color:#cdebf7; }

.card-grid { display:grid; gap:16px; }
.location-grid { grid-template-columns:repeat(3,1fr); }
.media-card { position:relative; border:1px solid var(--line); background:#091624; overflow:hidden; cursor:pointer; text-align:left; color:inherit; padding:0; min-width:0; }
.media-card .card-image { aspect-ratio:16/10; overflow:hidden; background:#101b25; }
.media-card img { width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.75,.25,1), filter .35s ease; }
.media-card:hover img { transform:scale(1.045); filter:saturate(1.08) brightness(1.06); }
.card-body { padding:19px; position:relative; }
.card-kicker { color:var(--cyan); font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.card-body h3 { font-size:18px; margin:5px 0 5px; letter-spacing:-.03em; }
.card-body p { color:var(--muted); font-size:12px; line-height:1.55; margin:0; }
.card-arrow { position:absolute; right:17px; top:18px; color:#66869a; transition:transform .2s,color .2s; }
.media-card:hover .card-arrow { transform:translate(2px,-2px); color:var(--cyan); }

.guild-section { background:linear-gradient(180deg,#07121f,#081724); }
.guild-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.guild-card { min-height:360px; position:relative; border:1px solid var(--line); overflow:hidden; padding:0; color:white; text-align:left; background:#07121f; cursor:pointer; }
.guild-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.guild-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,7,13,.97),rgba(2,7,13,.16) 72%); }
.guild-card:hover img { transform:scale(1.04); }
.guild-copy { position:absolute; inset:auto 0 0; z-index:2; padding:24px; }
.guild-copy span { color:var(--cyan); font-size:9px; letter-spacing:.18em; }
.guild-copy h3 { margin:7px 0 5px; font-size:25px; }
.guild-copy p { margin:0; color:#aabac5; font-size:12px; }

.hunter-section { background:#050d17; }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 28px; }
.filter-chip { border:1px solid var(--line); border-radius:999px; background:transparent; color:#9fb1be; padding:8px 14px; cursor:pointer; font-size:12px; transition:.2s; }
.filter-chip span { opacity:.58; margin-left:4px; }
.filter-chip:hover { color:#e8f7ff; border-color:var(--line-strong); }
.filter-chip.active { background:rgba(70,199,239,.14); border-color:var(--cyan-2); color:var(--cyan); }
.hunter-grid { grid-template-columns:repeat(4,1fr); }
.hunter-card .card-image { aspect-ratio:3/4; }
.hunter-card .card-image::after, .creature-card .card-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,11,18,.68),transparent 42%); pointer-events:none; }
.hunter-card .card-image, .creature-card .card-image { position:relative; }
.meta-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.meta-row span { font-size:9px; color:#9dcfe0; border:1px solid rgba(89,200,232,.2); padding:3px 7px; border-radius:3px; }

.dungeon-section { background:#07121d; }
.dungeon-stack { display:grid; gap:16px; }
.dungeon-card { min-height:390px; display:grid; grid-template-columns:1.25fr .75fr; background:#07111d; border:1px solid var(--line); overflow:hidden; cursor:pointer; padding:0; color:inherit; text-align:left; }
.dungeon-card:nth-child(even) { grid-template-columns:.75fr 1.25fr; }
.dungeon-card:nth-child(even) .dungeon-image { order:2; }
.dungeon-image { overflow:hidden; }
.dungeon-image img { width:100%; height:100%; object-fit:cover; transition:transform .65s ease; }
.dungeon-card:hover .dungeon-image img { transform:scale(1.035); }
.dungeon-copy { padding:46px; display:flex; flex-direction:column; justify-content:center; }
.dungeon-copy .eyebrow { margin-bottom:12px; }
.dungeon-copy h3 { font-size:32px; margin:0 0 12px; letter-spacing:-.04em; }
.dungeon-copy p { color:var(--muted); font-size:13px; }
.dungeon-facts { margin-top:25px; display:grid; gap:8px; }
.dungeon-facts span { border-top:1px solid var(--line); padding-top:8px; color:#b6c6d0; font-size:11px; }
.dungeon-facts b { color:#5e798a; font-weight:500; width:70px; display:inline-block; }

.creature-section { background:#040b13; }
.creature-catalog { display:grid; gap:64px; }
.creature-category { display:grid; gap:18px; }
.creature-category-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.creature-category-heading p { margin:0; color:#5e8295; font-size:10px; letter-spacing:.18em; }
.creature-category-heading h3 { margin:0; font-size:24px; letter-spacing:-.025em; }
.creature-category-heading h3 span { margin-left:7px; color:var(--cyan); font-size:12px; font-weight:600; vertical-align:middle; }
.creature-grid { grid-template-columns:repeat(5,1fr); }
.creature-card .card-image { aspect-ratio:3/4; }
.creature-card .card-body { padding:14px; }
.creature-card .card-body h3 { font-size:15px; }
.threat { position:absolute; left:10px; top:10px; z-index:2; background:rgba(3,8,14,.8); border:1px solid rgba(255,255,255,.16); font-size:9px; padding:4px 7px; letter-spacing:.1em; backdrop-filter:blur(6px); }
.threat.boss { color:#ffd4d8; border-color:rgba(217,73,88,.6); background:rgba(57,4,12,.82); }
.threat.mutant { color:#e9c7ff; border-color:rgba(163,90,218,.5); }

.abyss-section { min-height:900px; position:relative; padding:130px 0; background:#090307; overflow:hidden; }
.abyss-backdrop { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(7,1,4,.93),rgba(7,1,4,.67)),url('assets/images/backgrounds/심연시장_경매장.webp'); background-size:cover; background-position:center; opacity:.56; }
.abyss-backdrop::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 15%,rgba(119,13,34,.32),transparent 38%),linear-gradient(0deg,#090307 0,transparent 35%,#090307 100%); }
.abyss-content { position:relative; z-index:2; }
.abyss-eyebrow { color:#d77a83; }
.abyss-ledger { display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid rgba(208,75,92,.22); border-bottom:1px solid rgba(208,75,92,.22); margin-bottom:26px; color:#a67b7f; font-size:10px; letter-spacing:.16em; }
.abyss-ledger b { color:#e8838f; }
.abyss-ledger i { flex:1; height:1px; background:rgba(208,75,92,.22); }
.abyss-person-link { display:inline-flex; align-items:center; gap:14px; min-height:54px; padding:0 20px; border:1px solid rgba(208,75,92,.35); background:rgba(68,8,20,.48); color:#f0bdc4; font-size:13px; font-weight:700; }
.abyss-person-link span { color:#e8838f; font-size:18px; transition:transform .2s ease; }
.abyss-person-link:hover span { transform:translateX(4px); }
.villain-grid { grid-template-columns:repeat(4,1fr); }
.villain-card { border-color:rgba(174,54,70,.24); background:#12070b; }
.villain-card .card-image { aspect-ratio:3/4; }
.villain-card .card-kicker { color:#d87c88; }

.relations-section { background:#07111c; }
.relation-layout { display:grid; grid-template-columns:260px 1fr; border:1px solid var(--line); min-height:520px; }
.relation-list { border-right:1px solid var(--line); padding:12px; display:grid; align-content:start; gap:6px; max-height:520px; overflow:auto; }
.relation-person { appearance:none; border:1px solid transparent; background:transparent; color:#9cafbc; text-align:left; padding:11px 12px; cursor:pointer; border-radius:5px; font-size:13px; }
.relation-person:hover { background:rgba(255,255,255,.03); color:#fff; }
.relation-person.active { border-color:var(--line-strong); background:rgba(40,164,204,.1); color:var(--cyan); }
.relation-stage { position:relative; min-height:520px; padding:45px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.relation-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(37,173,213,.1),transparent 42%); pointer-events:none; }
.relation-center { position:relative; z-index:2; display:grid; grid-template-columns:170px 1fr; gap:34px; align-items:center; }
.relation-center img { width:170px; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--line-strong); }
.relation-center h3 { font-size:34px; margin:0 0 6px; }
.relation-center p { color:var(--muted); margin:0; }
.relation-nodes { margin-top:28px; display:flex; gap:9px; flex-wrap:wrap; }
.relation-node { border:1px solid var(--line); padding:9px 12px; color:#b7c9d5; background:rgba(4,11,18,.72); font-size:11px; }
.relation-node b { color:var(--cyan); margin-right:7px; }

.gallery-section { background:#040a11; }
.gallery-grid { columns:4 250px; column-gap:12px; }
.gallery-item { break-inside:avoid; margin:0 0 12px; position:relative; overflow:hidden; border:1px solid var(--line); cursor:pointer; background:#07111d; }
.gallery-item img { width:100%; height:auto; transition:transform .45s ease,filter .3s; }
.gallery-item:hover img { transform:scale(1.025); filter:brightness(1.08); }
.gallery-caption { position:absolute; inset:auto 0 0; padding:28px 14px 11px; background:linear-gradient(0deg,rgba(2,7,12,.9),transparent); font-size:11px; color:#dae9f1; }

.final-cta { padding:140px 0; background:linear-gradient(135deg,#071421,#02070d); text-align:center; position:relative; overflow:hidden; }
.final-cta::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(65,205,243,.1),transparent 38%); }
.final-cta-inner { position:relative; }
.final-cta h2 { font-size:clamp(38px,6vw,76px); line-height:1.14; letter-spacing:-.04em; margin:0 0 20px; }
.final-cta p:not(.eyebrow) { color:var(--muted); margin:0 0 30px; }
footer { background:#02060b; border-top:1px solid var(--line); }
.footer-inner { min-height:120px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#708494; font-size:11px; }
.footer-inner > a { color:var(--cyan); letter-spacing:.12em; }

.detail-modal, .search-modal { border:1px solid var(--line-strong); padding:0; color:var(--ink); background:rgba(5,13,22,.97); box-shadow:var(--shadow); }
.detail-modal::backdrop, .search-modal::backdrop { background:rgba(0,3,8,.78); backdrop-filter:blur(8px); }
.detail-modal { width:min(980px,calc(100vw - 36px)); max-height:min(820px,calc(100svh - 36px)); overflow:auto; border-radius:10px; }
.modal-close { position:sticky; float:none; display:block; top:14px; z-index:5; width:44px; height:44px; margin:14px 14px -58px auto; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(2,7,13,.78); color:#fff; cursor:pointer; font-size:24px; backdrop-filter:blur(10px); }
.modal-layout { display:grid; grid-template-columns:minmax(300px,45%) 1fr; min-height:600px; }
.modal-media { min-height:600px; display:grid; place-items:center; overflow:hidden; background:#08111a; }
.modal-media img { display:block; width:auto; max-width:100%; height:auto; max-height:min(780px,calc(100svh - 72px)); object-fit:contain; object-position:center; }
.modal-copy { padding:64px 48px 44px; }
.modal-copy .eyebrow { margin-bottom:12px; }
.modal-copy h2 { font-size:42px; line-height:1.12; letter-spacing:-.035em; margin:0 0 10px; }
.modal-subtitle { color:var(--cyan); margin:0 0 28px; }
.modal-description { color:#adbfca; }
.detail-list { display:grid; gap:0; margin:30px 0; border-top:1px solid var(--line); }
.detail-list div { display:grid; grid-template-columns:100px 1fr; padding:11px 0; border-bottom:1px solid var(--line); font-size:12px; }
.detail-list dt { color:#607b8d; }
.detail-list dd { margin:0; color:#d7e6ee; }
.search-modal { width:min(700px,calc(100vw - 28px)); max-height:min(680px,calc(100svh - 40px)); border-radius:12px; overflow:hidden; }
.search-head { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.search-head > span { color:var(--cyan); font-size:25px; }
.search-head input { width:100%; border:0; background:transparent; color:#fff; outline:0; font-size:16px; }
.search-results { padding:10px; overflow:auto; max-height:560px; }
.search-result { width:100%; display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:13px; padding:9px; background:transparent; color:#dcecf4; border:1px solid transparent; border-radius:7px; text-align:left; cursor:pointer; }
.search-result:hover, .search-result:focus { background:rgba(65,187,225,.08); border-color:var(--line); outline:0; }
.search-result img { width:52px; height:52px; object-fit:cover; border-radius:4px; }
.search-result small { color:#6f8797; }
.search-empty { padding:34px; text-align:center; color:#718696; }

@media (max-width: 1020px) {
  .site-nav { display:none; }
  .nav-toggle { display:block; justify-self:center; border:1px solid var(--line); background:rgba(3,9,16,.5); color:#d5e3eb; padding:7px 14px; border-radius:999px; }
  .site-nav.open { display:grid; position:absolute; top:64px; left:20px; right:20px; padding:18px; grid-template-columns:repeat(4,1fr); background:rgba(3,9,16,.96); border:1px solid var(--line); backdrop-filter:blur(16px); }
  .hero-status span:nth-child(2), .hero-status span:nth-child(3) { display:none; }
  .location-grid { grid-template-columns:repeat(2,1fr); }
  .guild-grid { grid-template-columns:repeat(2,1fr); }
  .hunter-grid { grid-template-columns:repeat(3,1fr); }
  .creature-grid { grid-template-columns:repeat(4,1fr); }
}

@media (max-width: 720px) {
  :root { --shell:min(100% - 28px,1180px); --radius:12px; }
  .topbar { height:62px; padding:0 14px; gap:12px; }
  .header-actions { gap:4px; }
  .language-tabs { padding:2px; gap:0; }
  .language-tabs button { min-width:27px; height:27px; padding:0 5px; font-size:9px; }
  .language-tabs button[data-lang="ko"] { font-size:0; }
  .language-tabs button[data-lang="ko"]::after { content:"KO"; font-size:9px; }
  .language-tabs button[data-lang="ja"] { font-size:0; }
  .language-tabs button[data-lang="ja"]::after { content:"JP"; font-size:9px; }
  .language-tabs button[data-lang="zh"] { font-size:0; }
  .language-tabs button[data-lang="zh"]::after { content:"CN"; font-size:9px; }
  .search-button span { display:none; }
  .search-button { padding:5px; border:0; background:transparent; }
  .search-button kbd { display:none; }
  .brand small { display:none; }
  .site-nav.open { grid-template-columns:repeat(2,1fr); top:58px; }
  .hero { min-height:760px; }
  .hero-image { object-position:64% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(2,7,14,.98) 5%,rgba(2,7,14,.55) 70%,rgba(2,7,14,.48)); }
  .hero-content { padding-top:40px; align-self:center; }
  .hero h1 { font-size:clamp(34px,10.4vw,42px); line-height:1.16; letter-spacing:-.075em; }
  body[data-language="en"] .hero h1 { font-size:clamp(31px,9.2vw,38px); letter-spacing:-.045em; }
  body[data-language="ja"] .hero h1, body[data-language="zh"] .hero h1 { letter-spacing:-.045em; }
  .hero-title-line + .hero-title-line { margin-top:5px; }
  .hero-note { font-size:13px; }
  .hero-status { bottom:20px; }
  .hero-status span { padding:0 12px 0 0; }
  .hero-status .live { margin-left:auto; padding-left:12px; }
  .scroll-cue { display:none; }
  .section { padding:86px 0; }
  .split-heading { grid-template-columns:1fr; gap:18px; }
  .world-grid { grid-template-columns:1fr; }
  .world-feature { min-height:auto; padding:26px; }
  .world-feature h3 { margin-top:28px; }
  .opening-strip { min-height:700px; align-items:flex-end; padding-bottom:70px; }
  .opening-strip::after { background:linear-gradient(0deg,rgba(2,7,14,.98) 20%,rgba(2,7,14,.42) 100%); }
  .opening-strip > img { object-position:center; }
  .location-grid, .hunter-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .location-grid .card-body { padding:14px; }
  .guild-grid { grid-template-columns:1fr; }
  .guild-card { min-height:300px; }
  .hunter-card .card-body p { display:none; }
  .hunter-card .card-body { padding:12px; }
  .hunter-card .card-body h3 { font-size:15px; }
  .dungeon-card, .dungeon-card:nth-child(even) { grid-template-columns:1fr; }
  .dungeon-card:nth-child(even) .dungeon-image { order:0; }
  .dungeon-image { min-height:250px; }
  .dungeon-copy { padding:26px; }
  .creature-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .creature-catalog { gap:48px; }
  .creature-category-heading h3 { font-size:21px; }
  .villain-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .relation-layout { grid-template-columns:1fr; }
  .relation-list { display:flex; overflow:auto; border-right:0; border-bottom:1px solid var(--line); }
  .relation-person { flex:0 0 auto; }
  .relation-stage { padding:25px; min-height:460px; }
  .relation-center { grid-template-columns:110px 1fr; gap:20px; }
  .relation-center img { width:110px; }
  .relation-center h3 { font-size:26px; }
  .gallery-grid { columns:2 140px; }
  .modal-layout { grid-template-columns:1fr; }
  .modal-media { min-height:0; height:auto; }
  .modal-media img { width:100%; max-width:100%; height:auto; max-height:none; }
  .modal-copy { padding:30px 23px 35px; }
  .modal-copy h2 { font-size:34px; }
  .footer-inner { min-height:150px; flex-direction:column; justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}