:root{--bg:#080f1e;--surface:#111e32;--surface2:#18283e;--surface3:#203650;--line:#2d455f;--ink:#edf5ff;--muted:#9bb1cc;--link:#71c6ff;--gold:#f0c276;--green:#83dcc1;--warn:#f19a85;--shadow:0 15px 50px #0004;color-scheme:dark}
.branchCard{margin:16px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.branchCard h4{margin:0 0 6px;font-size:16px}.branchConditions{margin:8px 0 14px;padding-left:22px;color:var(--muted)}
.branchOptions{border-left:2px solid var(--gold);margin-left:6px;padding-left:18px;display:grid;gap:10px}
.branchOption{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:0 12px;min-width:0}
.branchOption:before{content:'';position:absolute;top:24px;left:-20px;width:18px;border-top:2px solid var(--gold)}
.branchOption.unresolved{border-style:dashed}.branchOption.unresolved summary,.branchOption.unresolved strong{color:var(--warn)}
.branchResult{padding:8px 0}.branchResult>strong{color:var(--green);font-size:12px}.branchResult p{margin:6px 0;overflow-wrap:anywhere}
.branchProof summary{font-size:12px;color:var(--muted)}.branchOpen{margin:12px 0 0}.branchCard summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(max-width:520px){.branchCard{padding:12px}.branchOptions{padding-left:12px}.branchOption:before{left:-14px;width:12px}}
@media print{.branchOption>.branchResult{display:block!important}.branchProof{display:none}.branchCard{break-inside:avoid}}
body.light{--bg:#f1f4f7;--surface:#fff;--surface2:#eef3f7;--surface3:#e4eef5;--line:#cddae5;--ink:#172a3c;--muted:#546b7d;--link:#126a9a;--gold:#8b632a;--green:#1c745d;--warn:#b24437;--shadow:0 12px 40px #29466318;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.8 system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button,a{transition:.15s}a{color:var(--link);text-underline-offset:3px}a:hover{filter:brightness(1.12)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.05em}h2{letter-spacing:-.035em}.site{display:grid;grid-template-columns:258px minmax(320px,1fr);min-height:100vh}.nav{position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface);border-right:1px solid var(--line);padding:26px 19px}.sigil{display:inline-flex;border:1px solid #a17e4f;border-radius:8px;color:var(--gold);font-size:12px;padding:3px 9px;letter-spacing:.2em;font-weight:800}.brand{font-size:28px;font-weight:900;letter-spacing:-.06em;line-height:1.35;margin:16px 0 0}.subbrand{color:var(--muted);font-size:12px;line-height:1.5;margin:8px 0 24px}.navTitle{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.2em;margin:22px 8px 10px}.navbtn{width:100%;background:none;color:var(--ink);border:none;text-align:left;display:flex;align-items:center;justify-content:space-between;border-radius:10px;padding:9px 10px;margin:3px 0}.navbtn:hover,.navbtn.active{background:var(--surface3)}.navbtn.active{border-left:3px solid var(--gold);color:var(--gold)}.counter{font-size:11px;color:var(--muted);background:var(--bg);padding:1px 8px;border-radius:100px}.tiny{font-size:12px;color:var(--muted)}.main{padding:26px clamp(18px,3.2vw,54px) 100px;max-width:1580px;width:100%;margin:0 auto}.top{display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px}.topTitle{font-size:13px;font-weight:850;color:var(--muted)}.topActions{display:flex;gap:8px;flex-wrap:wrap}.btn{background:var(--surface2);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:7px 12px}.btn:hover{background:var(--surface3)}.hero{margin:28px 0 22px;padding:28px 30px;background:radial-gradient(circle at 92% 0%,#31527340,transparent 44%),linear-gradient(110deg,var(--surface),var(--surface2));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.kicker{color:var(--gold);font-size:11px;letter-spacing:.18em;font-weight:850}.hero h1{font-size:clamp(29px,4vw,44px);line-height:1.25;margin:10px 0}.hero p{max-width:870px;color:var(--muted);margin-bottom:0}.statline{display:flex;gap:14px;flex-wrap:wrap;margin-top:17px;font-size:12px}.statline b{color:var(--gold);font-variant-numeric:tabular-nums}.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:18px 0}.search{min-width:240px;flex:1;background:var(--surface);border:1px solid var(--line);border-radius:11px;color:var(--ink);padding:11px 14px}.sel{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:11px 10px;border-radius:11px}.metaLine{color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 0 13px}.entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin-bottom:30px}.entry{padding:17px 19px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-align:left;color:var(--ink);min-height:145px;display:flex;flex-direction:column;gap:7px;cursor:pointer}.entry:hover,.entry.current{border-color:var(--gold);background:var(--surface2);transform:translateY(-1px)}.entry h3{font-size:16px;margin:0;font-weight:850}.cn{color:var(--muted);font-size:12px;overflow-wrap:anywhere}.tags{display:flex;flex-wrap:wrap;gap:6px}.pill{display:inline-flex;gap:5px;align-items:center;font-size:11px;font-weight:750;border:1px solid var(--line);background:var(--surface2);padding:2px 8px;border-radius:100px;color:var(--muted)}.pill.ok{color:var(--green)}.pill.partial{color:var(--gold)}.pill.todo{color:var(--warn)}.desc{font-size:12px;color:var(--muted);line-height:1.6;max-height:3.3em;overflow:hidden}.empty{background:var(--surface);padding:20px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}.detail{margin-top:35px;padding:clamp(20px,3.6vw,43px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.detailTitle{font-size:clamp(26px,3.5vw,38px);letter-spacing:-.055em;line-height:1.3;margin:12px 0 10px}.origline{color:var(--muted);font-size:13px;overflow-wrap:anywhere}.detail h3{margin:30px 0 10px;font-size:17px;border-bottom:1px solid var(--line);padding-bottom:7px;letter-spacing:-.02em}.steps{list-style:none;padding:0;margin:0;counter-reset:n}.steps li{display:flex;gap:13px;align-items:flex-start;padding:11px 6px;border-bottom:1px dashed var(--line)}.steps li:last-child{border:0}.steps .check{margin-top:6px;accent-color:#d8ab6e;width:17px;height:17px;flex-shrink:0}.steps li.done .steptxt{text-decoration:line-through;color:var(--muted);opacity:.65}.stepNo{min-width:24px;color:var(--gold);font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;margin-top:4px}.steptxt{flex:1}.spec{padding:13px 16px;background:var(--surface2);border-left:3px solid var(--gold);border-radius:8px}.spec p{margin:0}.qlist{margin:0;padding-left:22px}.qlist li{padding:4px 0}.tableWrap{overflow-x:auto}.choice{border-collapse:collapse;width:100%;min-width:540px;font-size:13px}.choice th{text-align:left;color:var(--muted);background:var(--surface2)}.choice td,.choice th{border-bottom:1px solid var(--line);padding:11px;vertical-align:top}.choice td:first-child{font-family:ui-sans-serif,system-ui;color:var(--gold)}.warning{border-left:3px solid var(--warn);padding:9px 15px;background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:6px;margin:8px 0}.srcs{display:flex;flex-wrap:wrap;gap:8px}.source{padding:9px 11px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;max-width:100%;overflow-wrap:anywhere;font-size:12px}.related{display:flex;flex-wrap:wrap;gap:8px}.related button{border:1px solid var(--line);background:var(--surface2);color:var(--link);border-radius:8px;padding:6px 10px}.tail{font-size:12px;color:var(--muted);line-height:1.7;margin:32px 0}.footerLinks{display:flex;flex-wrap:wrap;gap:12px}.idline{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted)}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:920px){.site{display:block}.nav{position:relative;height:auto;max-height:none;border-right:none;border-bottom:1px solid var(--line);padding:13px 18px}.brand{font-size:21px;margin:8px 0}.subbrand{margin:4px 0 10px}.navTitle{margin:8px 0}.navlist{display:flex;overflow-x:auto;gap:5px;padding-bottom:5px}.navbtn{white-space:nowrap;width:auto;gap:9px;padding:7px 10px}.main{padding:16px 15px 55px}.hero{padding:22px 19px}.detail{padding:20px 16px}.entries{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.topTitle{display:none}}
@media print{body{color:#000;background:#fff}.nav,.topActions,.toolbar,.entries,.metaLine,.hero,.footerLinks,.btn,.check{display:none!important}.site{display:block}.main{padding:0}.detail{background:#fff;border:none;box-shadow:none;padding:0;margin:0}.detail *{color:#111!important}.spec,.source,.choice th,.related button,.branchCard,.branchOption,.pill{background:#fff}.warning{background:#fff;border-left-color:#777}.choice td,.choice th{border-color:#bbb}}

.entry{text-decoration:none}.related a{border:1px solid var(--line);border-radius:8px;padding:6px 10px;text-decoration:none}.evidence{margin-top:28px;padding-top:15px;border-top:1px solid var(--line)}summary{cursor:pointer;color:var(--gold);padding:10px 0}.source{margin:8px 0}.source p{margin:5px 0 0}.roster td:nth-child(3){white-space:nowrap}.roster a{display:inline-block;padding:4px}.detail{scroll-margin-top:12px}#browse .entries{max-height:65vh;overflow:auto;padding:8px 2px}.search{min-width:0;width:100%}html{overflow-wrap:break-word}@media(max-width:520px){.toolbar{display:grid;grid-template-columns:1fr 1fr}.search{grid-column:1/-1}.sel{min-width:0;width:100%}.hero{padding:16px}.main{min-width:0}.detail{padding:16px 12px}.topActions{gap:5px}.btn{padding:7px 9px}.steptxt{min-width:0;overflow-wrap:anywhere}.steps li{gap:8px}.detailTitle{overflow-wrap:anywhere}.nav{min-width:0}}@media print{#browse,summary{display:none!important}.tableWrap{overflow:visible}.choice{min-width:0}.evidence:not([open]){display:none}}

.filterField{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:100%;font-size:12px;color:var(--muted)}
.filterField .sel{width:100%;font-size:14px}.toolbar{align-items:flex-end}.toolbar .search{align-self:flex-end}
.kindPill{color:var(--gold);border-color:var(--gold)}.entryRegions{font-size:12px;color:var(--muted);margin:0;overflow-wrap:anywhere}
.regionLinks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.regionLinks a{border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:13px}

.storyCourse {margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:14px;overflow-wrap:anywhere}
.storyCourse > summary {cursor:pointer;font-weight:700;line-height:1.7}
.storySection h2 {font-size:1.1rem;margin:24px 0 10px}
.storySection li {margin:10px 0;line-height:1.7}
.storySection .tiny {display:inline-block;margin-left:6px}
.storyNavigation {margin:28px 0}
.storyLinks {display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.storyLinks a {flex:1 1 180px;padding:10px;border:1px solid var(--line);border-radius:8px}


/* Astryx v0.7.11 OKLCH Semantic Token System: 01. 수묵 장경각 (m1, stone-gold) & 04. 낙양 만권당 (m4, suite-slate) */
:root,body.dark,body[data-preset="m1"].dark{
  --color-background-body:#12110e;
  --color-background-surface:#1b1814;
  --color-background-card:#221f19;
  --color-background-muted:#28241d;
  --color-border:#383127;
  --color-border-emphasized:#564a39;
  --color-text-primary:#f6f2eb;
  --color-text-secondary:#b9ae9c;
  --color-text-accent:#e6ae49;
  --color-accent:#d9a038;
  --color-accent-muted:rgba(217,160,56,.14);
  --bg:var(--color-background-body);
  --surface:var(--color-background-surface);
  --surface2:var(--color-background-card);
  --surface3:var(--color-background-muted);
  --line:var(--color-border);
  --ink:var(--color-text-primary);
  --muted:var(--color-text-secondary);
  --link:var(--color-text-accent);
  --gold:var(--color-accent);
  --green:#3ce396;
  --warn:#f87171;
  --shadow:0 6px 20px rgba(0,0,0,.34);
  --radius-element:6px;
  --radius-container:10px;
  color-scheme:dark;
}
body.light,body[data-preset="m1"].light{
  --color-background-body:#f7f4ee;
  --color-background-surface:#fcfaf6;
  --color-background-card:#efe9de;
  --color-background-muted:#e4dccb;
  --color-border:#dcd2c0;
  --color-border-emphasized:#bfae91;
  --color-text-primary:#1d1914;
  --color-text-secondary:#5c5243;
  --color-text-accent:#94620a;
  --color-accent:#b37814;
  --color-accent-muted:rgba(179,120,20,.12);
  --bg:var(--color-background-body);
  --surface:var(--color-background-surface);
  --surface2:var(--color-background-card);
  --surface3:var(--color-background-muted);
  --line:var(--color-border);
  --ink:var(--color-text-primary);
  --muted:var(--color-text-secondary);
  --link:var(--color-text-accent);
  --gold:var(--color-accent);
  --green:#0f6e46;
  --warn:#b91c1c;
  --shadow:0 4px 14px rgba(29,25,20,.06);
  --radius-element:6px;
  --radius-container:10px;
  color-scheme:light;
}
body[data-preset="m4"].dark{
  --color-background-body:#0f1217;
  --color-background-surface:#161b22;
  --color-background-card:#1c222b;
  --color-background-muted:#212834;
  --color-border:#2c3545;
  --color-border-emphasized:#435168;
  --color-text-primary:#f0f4f8;
  --color-text-secondary:#9aa8bc;
  --color-text-accent:#e5ad48;
  --color-accent:#d89b35;
  --color-accent-muted:rgba(216,155,53,.15);
  --bg:var(--color-background-body);
  --surface:var(--color-background-surface);
  --surface2:var(--color-background-card);
  --surface3:var(--color-background-muted);
  --line:var(--color-border);
  --ink:var(--color-text-primary);
  --muted:var(--color-text-secondary);
  --link:var(--color-text-accent);
  --gold:var(--color-accent);
  --green:#34d399;
  --warn:#f87171;
  --shadow:0 4px 14px rgba(0,0,0,.35);
  --radius-element:5px;
  --radius-container:8px;
  color-scheme:dark;
}
body[data-preset="m4"].light{
  --color-background-body:#f3f5f8;
  --color-background-surface:#ffffff;
  --color-background-card:#eef2f7;
  --color-background-muted:#e2e8f0;
  --color-border:#cfd7e3;
  --color-border-emphasized:#9fb0c7;
  --color-text-primary:#131922;
  --color-text-secondary:#4a586d;
  --color-text-accent:#9a6407;
  --color-accent:#b87914;
  --color-accent-muted:rgba(184,121,20,.12);
  --bg:var(--color-background-body);
  --surface:var(--color-background-surface);
  --surface2:var(--color-background-card);
  --surface3:var(--color-background-muted);
  --line:var(--color-border);
  --ink:var(--color-text-primary);
  --muted:var(--color-text-secondary);
  --link:var(--color-text-accent);
  --gold:var(--color-accent);
  --green:#0d6e49;
  --warn:#b91c1c;
  --shadow:0 2px 10px rgba(15,23,42,.05);
  --radius-element:5px;
  --radius-container:8px;
  color-scheme:light;
}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
a{color:var(--link);text-underline-offset:.16em}
a:hover{color:var(--gold);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skipLink{position:absolute;left:-9999px;top:0;z-index:30;background:var(--surface);color:var(--ink);padding:10px 14px;border:1px solid var(--line);border-radius:6px}
.skipLink:focus{left:16px;top:12px}
.webMain{max-width:1400px;margin:auto;padding:20px clamp(20px,3.5vw,44px) 64px}
.webNav{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:20px;padding:12px 18px;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:10px;box-shadow:var(--shadow)}
.webNav .brandLink{font-family:'Noto Serif KR','Batang',Georgia,serif;font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--gold);margin-right:auto;text-decoration:none}
.webNav a:not(.brandLink){font-size:14px;font-weight:600;padding:6px 10px;border-radius:6px;text-decoration:none;color:var(--ink)}
.webNav a:not(.brandLink):hover{background:var(--surface2);color:var(--gold)}
.webNav .btn{background:var(--surface2);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:6px 11px;font-size:13px;font-weight:600}
.webNav .btn:hover{background:var(--surface3);color:var(--ink);border-color:var(--gold)}
.webFooter{border-top:1px solid var(--line);margin-top:44px;padding-top:20px;display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.breadcrumbs{font-size:13px;color:var(--muted)}
h1,h2,h3,.wikiHero h1,.gameCard h3{font-family:'Noto Serif KR','Batang',Georgia,serif;line-height:1.3;color:var(--ink)}
.webMain .hero{background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--ink)}
.wikiHero,.webMain .wikiHero{position:relative;padding:24px 28px;margin:0 0 24px;background:linear-gradient(135deg,var(--surface2) 0%,var(--surface) 100%);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.wikiHero::before{content:'';position:absolute;right:2%;top:18px;width:160px;height:160px;border:1px solid var(--line);border-radius:50%;opacity:.35;pointer-events:none}
.wikiHero::after{content:'';position:absolute;right:64px;top:76px;width:110px;height:1px;background:var(--gold);transform:rotate(-28deg);opacity:.28;pointer-events:none}
.wikiHero>*{position:relative;z-index:1;max-width:none}
.wikiHero h1{font-size:clamp(28px,4vw,38px);margin:0 0 6px;letter-spacing:-.02em;color:var(--gold)}
.wikiHero .kicker{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin:0 0 8px}
.wikiHero p{margin:6px 0;color:var(--muted);max-width:75ch}
.quickLinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin-top:16px}
.quickLinks a{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:9px 14px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;font-size:14px}
.quickLinks a::after{content:'→';color:var(--gold);font-size:13px;margin-left:8px}
.quickLinks a:hover{background:var(--surface3);border-color:var(--gold);color:var(--gold)}
.directoryLayout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.categoryNav{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto;padding:16px 12px;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.categoryNav h2,.categoryNav h3{font-size:15px;margin:0 0 10px;padding:0 6px;color:var(--gold)}
.categoryNav ul{list-style:none;margin:0;padding:0}
.categoryNav li{list-style:none;margin:0;padding:0}
.categoryNavLink,.mapCategoryLink,.codexCategoryLink,.allCategoryLink{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;box-sizing:border-box;padding:7px 10px;margin:2px 0;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px;line-height:1.35}
.categoryNavLink:hover,.categoryNavLink:focus-visible,.mapCategoryLink:hover,.mapCategoryLink:focus-visible,.codexCategoryLink:hover,.codexCategoryLink:focus-visible,.allCategoryLink:hover,.allCategoryLink:focus-visible{background:var(--surface2);color:var(--gold)}
.categoryNavLink[aria-current],.mapCategoryLink[aria-current],.codexCategoryLink[aria-current],.allCategoryLink[aria-current]{background:var(--surface3);color:var(--gold);border-left:3px solid var(--gold);font-weight:700}
.categoryNavTitle{min-width:0;overflow-wrap:anywhere}
.categoryNavCount{flex:none;font:700 12px/1.4 system-ui,sans-serif;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:1px 7px;border-radius:999px;white-space:nowrap}
.categoryNavLink[aria-current] .categoryNavCount,.mapCategoryLink[aria-current] .categoryNavCount,.codexCategoryLink[aria-current] .categoryNavCount,.allCategoryLink[aria-current] .categoryNavCount{color:var(--gold);border-color:var(--gold)}
.directoryBody{min-width:0}
.directorySearch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end;margin:0 0 20px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);width:auto;min-width:0}
.directorySearch>input{grid-column:1/-1;width:100%;box-sizing:border-box;min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.directorySearch .search,.directorySearch .search input,#search{width:100%;min-width:0;max-width:100%}
.directorySearch .search{flex:none}
.filterField{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px;font-weight:700;color:var(--muted)}
.filterField select{width:100%;min-height:40px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px}
.directorySearch button{min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.directorySearch button:hover{background:var(--surface3);border-color:var(--gold);color:var(--gold)}
#results{font-size:14px;color:var(--muted);margin:0 0 12px}
#empty{padding:24px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);text-align:center}
.categoryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.categoryPanel{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.categoryPanel h2{margin:0;padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--line);border-left:4px solid var(--gold);font-size:17px;color:var(--ink);display:flex;gap:10px;align-items:center;justify-content:space-between}
.categoryPanel h2 a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;margin:-12px 0 -12px -16px;padding:12px 16px;border-radius:0;box-sizing:border-box;min-height:44px}
.categoryPanel h2 a:hover,.categoryPanel h2 a:focus-visible{background:var(--surface3);color:var(--gold);text-decoration:none}
.categoryCount{font:700 12px/1.4 system-ui,sans-serif;color:var(--gold);background:var(--bg);border:1px solid var(--line);padding:2px 9px;border-radius:999px;white-space:nowrap}
.guideList{display:block;margin:0;padding:0;list-style:none}
.guideRow{display:flex;flex-direction:column;justify-content:center;min-height:60px;box-sizing:border-box;padding:11px 16px;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;transform:none;background:var(--surface);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.guideRow:first-child{border-top:0}
.guideRow:hover,.guideRow:focus-visible{background:var(--surface2);color:var(--ink);box-shadow:inset 3px 0 var(--gold);transform:none;border-color:var(--line)}
.guideRow .guideTitle{display:block;font-size:15px;font-weight:700;line-height:1.38;color:var(--ink)}
.guideRow:hover .guideTitle{color:var(--gold)}
.guideRow .guideMeta{display:block;margin-top:4px;font-size:12px;color:var(--muted);line-height:1.4}
.categoryMore{margin-top:auto;border-top:1px solid var(--line);background:var(--surface2)}
.categoryMore summary[data-more-label]{padding:10px 16px;cursor:pointer;color:var(--gold);font-size:13px;font-weight:700;min-height:44px;box-sizing:border-box}
.categoryMore summary:hover{background:var(--surface3)}
.categoryMore[open] summary{border-bottom:1px solid var(--line)}
.categoryMore .guideRow:first-child{border-top:0}
body.filters-active .categoryMore summary[data-more-label]{color:var(--muted);background:var(--surface2);font-size:12px;font-weight:600;min-height:40px;padding:8px 12px}
body.filters-active .categoryMore[open] summary{border-bottom-color:var(--line)}
.webMain .detail{max-width:920px;margin:22px auto;padding:32px;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);overflow-wrap:anywhere}
.webMain .detail p,.webMain .detail li{line-height:1.75}
.webMain .detail p{margin:.8em 0}
.webMain .detail h2,.webMain .detail h3{margin-top:1.4em}
.webMain .detail table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1em 0}
.webMain .detail th,.webMain .detail td{padding:9px 12px;border:1px solid var(--line);white-space:normal}
.webMain .detail th{background:var(--surface2);color:var(--gold);font-weight:700}
.webMain .detail td{background:var(--surface);color:var(--ink)}
.original,.branch,.source{border:1px solid var(--line);background:var(--surface2);color:var(--ink);padding:12px 14px;border-radius:6px;margin:12px 0}
.original a,.branch a,.source a{color:var(--link)}
.portalHero{padding:30px 0 24px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.webMain .portalHero{padding:30px 0 24px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.gameCard{display:flex;gap:24px;align-items:flex-start;padding:24px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.gameCard h3{font-size:26px;margin:8px 0}
.gameCard h3 a{color:var(--gold);text-decoration:none}
.gameCard img{flex-shrink:0;border-radius:8px}
.gameCard>div{min-width:0}
.shareFeedback{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.shareFeedback input{display:block;width:100%;box-sizing:border-box;padding:10px;margin:8px 0;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.adSlot{margin:32px 0;padding:12px 0;border-block:1px solid var(--line);min-height:130px;text-align:center}
button,.button{border-radius:6px}
@media(max-width:900px){
.directoryLayout{display:block}
.categoryNav{position:static;max-height:none;overflow:visible;display:block;margin-bottom:20px;padding:12px}
.categoryNav h2,.categoryNav h3{width:100%;margin:0 0 8px}
.categoryNav ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.categoryNav li{display:block;list-style:none;margin:0;padding:0}
.categoryNavLink,.mapCategoryLink,.codexCategoryLink,.allCategoryLink{display:inline-flex;align-items:center;justify-content:space-between;gap:6px;min-height:42px;box-sizing:border-box;border:1px solid var(--line);background:var(--bg);margin:0;padding:6px 10px;border-radius:6px}
.categoryNavLink[aria-current],.mapCategoryLink[aria-current],.codexCategoryLink[aria-current],.allCategoryLink[aria-current]{background:var(--surface3);color:var(--gold);border-color:var(--gold)}
}
@media(max-width:680px){
.webMain{padding:20px 16px 52px}
.wikiHero::before,.wikiHero::after{opacity:.22;right:-40px}
.directorySearch{grid-template-columns:repeat(2,minmax(0,1fr))}
.directorySearch>input,.directorySearch button{grid-column:1/-1}
.categoryGrid{grid-template-columns:1fr}
.gameCard{flex-direction:column;padding:20px}
.gameCard img{width:72px;height:72px}
.webMain .detail{padding:22px 18px;margin-top:16px}
.webNav{gap:10px 14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{
.webNav,.webFooter,.adSlot,.skipLink,.directorySearch,.directoryMetaBar,#results,#empty,.breadcrumbs,.backToTopBtn,.stepResetBtn,.branchToggleAll,.astryxOutlineRail,.astryxSuiteSideNav{display:none!important}
body{background:#fff!important;color:#000!important}
.webMain{max-width:none!important;padding:0!important}
.webMain .detail,.categoryPanel,.gameCard{max-width:none;padding:0;border:0;box-shadow:none;background:#fff;color:#000}
.webMain .hero,.wikiHero,.portalHero{background:#fff;border:0;border-radius:0;box-shadow:none;padding:0 0 16px;margin-bottom:14px}
.wikiHero::before,.wikiHero::after{display:none}
.directoryLayout,.categoryGrid{display:block}
.categoryNav{display:none}
.categoryPanel{break-inside:avoid;margin:0 0 20px}
.categoryPanel h2{background:#fff;color:#000;border-bottom:2px solid #000}
.guideRow{min-height:0;padding:5px 0;border-top:1px solid #bbb;border-radius:0;box-shadow:none;transform:none;color:#000}
.guideRow .guideTitle,.guideRow .guideMeta{color:#000}
.categoryMore summary{list-style:none;color:#000;border-top:1px solid #bbb;padding:5px 0}
.categoryMore>summary::-webkit-details-marker{display:none}
.categoryMore>summary~*{display:block!important}
.categoryMore::details-content{content-visibility:visible;display:block!important}
.webMain .detail table{display:table;width:100%;overflow:visible}
.webMain .detail th,.webMain .detail td{border-color:#777}
.original,.branch,.source{background:#fff;color:#000;border-color:#777}
a{color:#000;text-decoration:underline}
}
.steamLibraryBanner {
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-height: 260px;
}

.steamLibraryBanner img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  object-position: center 35%;
  height: auto;
}

.heroGameMeta {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
/* Read article refinements: every selector is scoped beneath .webMain .detail. */
.webMain .detail {
  overflow-wrap: anywhere;
}
.webMain .detail h1,
.webMain .detail .detailTitle {
  letter-spacing: -0.03em;
  line-height: 1.28;
}
.webMain .detail h1 {
  font-size: 2rem;
}
.webMain .detail h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.35;
}
.webMain .detail h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.2rem;
  line-height: 1.4;
}
.webMain .detail p,
.webMain .detail .stepText,
.webMain .detail .qlist {
  max-width: 70ch;
  line-height: 1.8;
}
.webMain .detail .qlist {
  padding-left: 1.25rem;
}
.webMain .detail .qlist li {
  margin: 0.35rem 0;
}
.webMain .detail .stepText {
  margin: 0 0 1rem;
}
.webMain .detail .stepText > :first-child {
  margin-top: 0;
}
.webMain .detail .stepText > :last-child {
  margin-bottom: 0;
}
.webMain .detail .steptxt,
.webMain .detail table,
.webMain .detail .tableWrap {
  max-width: none;
}
.webMain .detail .tableWrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.webMain .detail table {
  width: 100%;
  border-collapse: collapse;
}
.webMain .detail .spec,
.webMain .detail .warning {
  border-left-width: 1px;
}
.webMain .detail .spec {
  border-left: 1px solid var(--green);
  padding-left: 0.9rem;
}
.webMain .detail .warning {
  border-left: 1px solid var(--warn);
  padding-left: 0.9rem;
}
.webMain .detail .readToc {
  display: block;
  margin: 1.5rem 0 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
}
.stepProgress {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
}
.stepProgressMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}
.stepResetBtn {
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.stepProgressBar {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.stepProgressFill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width 0.2s ease;
}
.branchSectionBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
}
.branchSectionBar p {
  margin: 0;
}
.branchToggleAll {
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink);
  cursor: pointer;
}
.branchToggleAll:hover {
  background: var(--surface3);
}
.webMain .detail .branchCard {
  margin: 1rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
}
.webMain .detail .branchOption {
  margin: 0.5rem 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.webMain .detail .branchOption > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}
.webMain .detail .branchResult {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
}
.mapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface2);
  font-size: 13px;
  font-weight: 600;
}
.mapLegendItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mapLegendDot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.mapDotEntry { background: #3ce396; }
.mapDotTarget { background: #ffc94d; }
.mapDotItem { background: #5bc0ff; }
.mapDotBoss { background: #ff6b6b; }
.mapDotConflict { background: var(--warn); }
.mapRegionalCard {
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.mapRegionalCard:hover {
  border-color: var(--gold);
}
.webMain .detail .readToc > p {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--ink);
}
.webMain .detail .readToc ol {
  display: block;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink);
}
.webMain .detail .readToc li {
  margin: 0.35rem 0;
  max-width: none;
}
.webMain .detail .readToc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.15rem;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.webMain .detail .readToc a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.webMain .detail h2:target,
.webMain .detail summary:target,
.webMain .detail caption:target {
  scroll-margin-top: 1rem;
}
.webMain .detail ::selection {
  background: var(--gold);
  color: var(--surface);
}
.webMain .detail {
  caret-color: var(--ink);
}
@media (max-width: 680px) {
  .webMain .detail .readToc ol {
    padding-left: 1rem;
  }
  .webMain .detail .readToc a {
    display: flex;
    width: 100%;
  }
}
@media (min-width: 900px) {
  .webMain .detail .readToc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}
@media print {
  .webMain .detail .readToc {
    display: none;
  }
  .webMain .detail .tableWrap {
    overflow: visible;
  }
  .webMain .detail table {
    break-inside: avoid;
  }
}

/* Contrast fixes: tag pills and .choice table headers, light + dark. */
.webMain .detail .tags .pill,
.pill {
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
}
.choice th,
.webMain .detail .choice th {
  color: var(--gold);
  background: var(--surface3);
  border-bottom: 2px solid var(--line);
}
.choice td {
  background: var(--surface);
  color: var(--ink);
}
.mapAtlas,
.codexAtlas,
.companionDashboard {
  margin: 0 0 28px;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.mapAtlasHeader h2,
.codexAtlasHeader h2,
.companionDashboard h2 {
  margin: 0 0 10px;
  font-size: 22px;
  color: var(--gold);
}
.mapNotice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: var(--surface2);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
}
.mapLayerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.mapLayerCard {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
}
.mapLayerCard strong {
  color: var(--gold);
  font-size: 14px;
}
.mapFilterBar,
.codexFilterBar,
.companionFilterBar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface2);
}
.mapSearchField,
.codexSearchField,
.companionSearchField {
  grid-column: 1 / -1;
}
.mapSearchInput {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.directoryMetaBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.directoryMetaBar #results {
  margin: 0;
}
.categoryToggleBtn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--gold);
  cursor: pointer;
}
.categoryToggleBtn:hover {
  background: var(--surface3);
  border-color: var(--gold);
}
.mapRegionalCardLink {
  margin-top: 2px;
  font-weight: 700;
}
.mapStageLinks {
  font-weight: 600;
  margin-left: 6px;
}
.backToTopBtn {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 40;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--gold);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  cursor: pointer;
}
.backToTopBtn:hover {
  background: var(--gold);
  color: var(--bg);
}
.mapClearBtn {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface3);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mapClearBtn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.mapDetailTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.mapDetailTab {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mapDetailTab:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.mapDetailTab.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: #141210;
}
.mapCanvasWrap {
  width: 100%;
  max-width: 100%;
  margin: 10px 0 18px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #141918;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: var(--shadow);
}
.mapSvg {
  display: block;
  width: 100%;
  min-height: 520px;
  height: auto;
}
.mapSvgBg {
  fill: #141918;
}
.mapSvgPinLink {
  text-decoration: none;
}
.mapSvgPin {
  cursor: pointer;
  transition: filter 0.15s ease;
}
.mapSvgPinLabelBg {
  fill: rgba(14, 18, 24, 0.86);
  stroke: rgba(255, 215, 110, 0.85);
  stroke-width: 0.22;
}
.mapSvgPin circle {
  fill: #3ce396;
  stroke: #ffffff;
  stroke-width: 0.45;
}
.mapSvgPin.mapPinType-boss circle {
  fill: #ff6b6b;
}
.mapSvgPin.mapPinType-item circle {
  fill: #5bc0ff;
}
.mapSvgPin.mapPinType-target circle {
  fill: #ffc94d;
}
.mapSvgPin.mapPinVerify-conflict circle {
  fill: var(--warn);
}
.mapSvgPin:hover circle,
.mapSvgPin:focus circle,
.mapSvgPin.is-selected circle {
  stroke: var(--gold);
  stroke-width: 0.85;
  r: 1.75;
}
.mapSvgPin:hover .mapSvgPinLabelBg,
.mapSvgPin:focus .mapSvgPinLabelBg,
.mapSvgPin.is-selected .mapSvgPinLabelBg {
  fill: rgba(218, 165, 32, 0.95);
  stroke: #ffffff;
}
.mapSvgPin text {
  fill: #fff8e7;
  font-size: 1.55px;
  font-weight: 700;
}
.mapSvgPin:hover text,
.mapSvgPin:focus text,
.mapSvgPin.is-selected text {
  fill: #111518;
}
.mapDetailStage {
  margin: 10px 0 18px;
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #141918;
  box-shadow: var(--shadow);
}
.mapDetailStage img {
  display: block;
  width: 100%;
  max-height: 860px;
  object-fit: contain;
  margin: 0 auto;
  height: auto;
}
.mapDetailStage figcaption {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface2);
  border-top: 1px solid var(--line);
}
.mapRegionalGallery {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface2);
}
.mapRegionalGallery > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  padding: 4px 0;
}
.mapRegionalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.mapRegionalCard {
  margin: 0;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 10px;
  overflow: hidden;
  background: #141918;
  display: flex;
  flex-direction: column;
}
.mapRegionalCard img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  height: auto;
  background: #141918;
}
.mapRegionalCard figcaption {
  padding: 12px 14px;
  background: var(--surface2);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.mapPinTitleLink {
  color: var(--ink);
  text-decoration: none;
}
.mapPinTitleLink:hover {
  color: var(--gold);
  text-decoration: underline;
}
.mapPinGrid,
.codexGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.mapPinCard,
.codexCard {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 10px;
  background: var(--surface2);
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mapPinCard.is-selected {
  border-color: var(--gold);
  box-shadow: inset 3px 0 var(--gold);
}
.mapPinCard h3 {
  margin: 4px 0 2px;
  font-size: 16px;
}
.mapPinBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
.mapPinBadges .pill {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
}
.mapVerify-conflict {
  border-color: var(--warn) !important;
  color: var(--warn) !important;
  font-weight: 700;
}
.mapPinPos {
  margin: 2px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}
.mapBadgeShot {
  border-color: var(--green) !important;
  color: var(--green) !important;
  font-weight: 700;
}
.mapPinFigure {
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.mapPinFigure img {
  display: block;
  width: 100%;
  height: auto;
}
.mapPinFigure figcaption {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.mapPinSummary {
  margin: 4px 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.mapPinLink {
  margin: auto 0 0;
  padding-top: 6px;
  font-size: 13px;
  font-weight: 700;
}
.locationGuide {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  background: var(--surface2);
  font-size: 14px;
}
.codexCategoryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.codexCategoryCard {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.codexCategoryCard strong {
  color: var(--gold);
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.codexCategoryCard:hover,
.codexCategoryCard.is-active {
  background: var(--surface3);
  border-color: var(--gold);
  box-shadow: inset 3px 0 var(--gold);
}
.codexFilterBar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}
.companionFilterBar {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto;
}
.codexTableDetails {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface2);
}
.codexTableDetails > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  padding: 4px 0;
}
.codexGradePill {
  background: rgba(217, 164, 65, 0.14) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  font-weight: 700;
}
.mapRegionalStageCanvas {
  position: relative;
  width: 100%;
  background: #141918;
}
.mapRegionalOverlaySvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mapRegionalPinLink {
  pointer-events: auto;
  text-decoration: none;
}
.mapRegionalPin text {
  font-size: 2.1px;
}
.mapRegionalHotspotBar {
  padding: 10px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.mapRegionalHotspotLead {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.mapRegionalChipGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mapRegionalChip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
}
.mapRegionalChip strong {
  font-size: 13px;
  color: var(--link);
}
.mapRegionalChip:hover,
.mapRegionalChip.is-selected {
  border-color: var(--gold);
  box-shadow: inset 3px 0 var(--gold);
}
.companionProgress {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}
.companionProgressMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}
.companionProgressBar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface2);
  overflow: hidden;
}
.companionProgressFill {
  display: block;
  height: 100%;
  background: var(--green);
  transition: width 0.2s ease;
}
.companionToggleField {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.companionCheckLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.companionTable tr.done td {
  opacity: 0.72;
}
.companionSpecialSection {
  margin-top: 20px;
}
.webMain .detail .stepShot {
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface2);
}
.webMain .detail .stepShot img {
  display: block;
  max-width: 100%;
  height: auto;
}
.webMain .detail .stepShot figcaption {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  .mapPinGrid,
  .codexGrid,
  .codexCategoryGrid,
  .mapRegionalChipGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mapFilterBar,
  .codexFilterBar,
  .companionFilterBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mapClearBtn {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  .mapAtlas,
  .codexAtlas,
  .companionDashboard {
    padding: 14px;
  }
  .mapSvg {
    min-height: 280px;
  }
  .mapLayerGrid,
  .mapRegionalGrid,
  .mapPinGrid,
  .mapFilterBar,
  .codexGrid,
  .codexCategoryGrid,
  .codexFilterBar,
  .companionFilterBar,
  .mapRegionalChipGrid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Astryx v0.7.11 Dual-Preset Architecture:
   01. 수묵 장경각 (m1 · Stone × Gold) ↔ 04. 낙양 만권당 (m4 · AppShell Suite)
   ========================================================================== */
.webNav {
  position: sticky;
  top: 10px;
  z-index: 35;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: var(--color-border-emphasized, var(--line));
}
.webNav .astryxPresetBtn {
  background: var(--color-accent-muted);
  color: var(--link);
  border-color: var(--gold);
  font-weight: 700;
}
.webNav .astryxPresetBtn:hover {
  background: var(--gold);
  color: var(--bg);
}

/* Astryx No-Card-Soup Section & List Refinements */
.categoryPanel {
  box-shadow: none;
  border-radius: var(--radius-container, 10px);
  border-color: var(--line);
}
.categoryPanel h2 {
  background: var(--surface2);
  border-left-width: 3px;
  font-size: 16px;
}
.guideRow {
  transition: background-color 0.14s ease, box-shadow 0.14s ease;
}
.webMain .detail {
  box-shadow: none;
  border-radius: var(--radius-container, 10px);
}
.webMain .detail tbody tr:hover td,
.companionTable tbody tr:hover td,
.editorDictTable tbody tr:hover td {
  background: var(--color-accent-muted);
}

/* Astryx Sticky Right-Hand Sliding Outline & Contextual Inspector */
.astryxOutlineRail {
  position: sticky;
  top: 74px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 14px 16px;
  border-left: 2px solid var(--line);
  background: transparent;
  font-size: 13px;
}
.astryxOutlineTitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.astryxOutlineList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.astryxOutlineLink {
  position: relative;
  display: block;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.38;
  font-size: 12.5px;
}
.astryxOutlineLink:hover {
  color: var(--ink);
  background: var(--surface2);
}
.astryxOutlineLink.is-active {
  color: var(--link);
  font-weight: 700;
  background: var(--color-accent-muted);
}
.astryxOutlineLink.is-active::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--gold);
}
.astryxInspectorCard {
  padding: 12px 14px;
  border-radius: var(--radius-container, 8px);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.astryxInspectorLabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.astryxInspectorTitle {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.astryxInspectorMeta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

/* Astryx Suite Left SideNav (used in m4 AppShell on pages without .categoryNav) */
.astryxSuiteSideNav {
  display: none;
}

@media (min-width: 1220px) {
  /* 01. 수묵 장경각 (m1): 2-Column Article + Sticky Sliding Outline */
  body[data-preset="m1"] .astryxArticleShell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 28px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
  }
  body[data-preset="m1"] .astryxArticleShell > .detail {
    margin: 0;
    max-width: none;
  }

  /* 04. 낙양 만권당 (m4 · AppShell Suite): Full-Viewport 3-Region Workstation */
  body[data-preset="m4"] .webMain {
    max-width: none;
    padding: 0;
  }
  body[data-preset="m4"] .webNav {
    top: 0;
    margin-bottom: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 10px 24px;
  }
  body[data-preset="m4"] #content {
    padding: 20px 28px 48px;
  }
  body[data-preset="m4"] .webFooter {
    margin-top: 0;
    padding: 18px 28px 36px;
  }
  body[data-preset="m4"] .directoryLayout.has-astryx-outline {
    grid-template-columns: 248px minmax(0, 1fr) 290px;
    gap: 24px;
  }
  body[data-preset="m4"] .categoryNav {
    top: 66px;
    border-radius: var(--radius-container, 8px);
    box-shadow: none;
  }
  body[data-preset="m4"] .categoryGrid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }
  body[data-preset="m4"] .astryxOutlineRail {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-container, 8px);
    padding: 16px;
  }
  body[data-preset="m4"] .astryxOutlineLink.is-active::before {
    left: 0;
  }
  body[data-preset="m4"] .astryxSuiteSideNav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 74px;
    align-self: start;
    padding: 16px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-container, 8px);
  }
  body[data-preset="m4"] .astryxSuiteGroupTitle {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--gold);
    text-transform: uppercase;
    padding: 0 8px;
    margin-bottom: 4px;
  }
  body[data-preset="m4"] .astryxSuiteNavLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
  }
  body[data-preset="m4"] .astryxSuiteNavLink:hover,
  body[data-preset="m4"] .astryxSuiteNavLink.is-current {
    background: var(--color-accent-muted);
    color: var(--link);
  }
  body[data-preset="m4"] .astryxArticleShell,
  body[data-preset="m4"] .astryxPortalShell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 290px;
    gap: 24px;
    align-items: start;
  }
  body[data-preset="m4"] .astryxArticleShell > .detail {
    margin: 0;
    max-width: none;
  }
}
@media (max-width: 1219px) {
  .astryxOutlineRail,
  .astryxSuiteSideNav {
    display: none !important;
  }
}