/* =====================================================================
   OBSIDIAN FORGE — +313 검 만들기
   흑요석 · 달궈진 쇠 · 담금질한 금 · 강철 · 양피지
   ===================================================================== */
:root{
  --obsidian:#0f0c0a;
  --obsidian-2:#161210;
  --obsidian-3:#1e1915;
  --soot:#2a241f;
  --ash:#3a332c;
  --ember:#ff7a3d;
  --ember-deep:#c2451a;
  --gold:#e4bd6e;
  --gold-deep:#a87f3a;
  --gold-pale:#f6e3b4;
  --steel:#b7c3cf;
  --steel-dim:#6f7b88;
  --parchment:#f2e8d6;
  --parchment-dim:#b9ad99;
  --ink:#8b8172;
  --blood:#e0607e;
  --ok:#8fd19e;
  --radius-s:6px;
  --radius-m:10px;
  --radius-l:16px;
  --shadow-stage:0 40px 120px rgba(255,122,61,.14), 0 10px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--parchment);
  font:15px/1.6 'Noto Sans KR',system-ui,sans-serif;
  background:
    radial-gradient(900px 500px at 50% -120px,rgba(255,122,61,.16),transparent 70%),
    radial-gradient(1200px 700px at 50% 110%,rgba(228,189,110,.06),transparent 60%),
    var(--obsidian);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* 미세한 쇠가루 질감 */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .6 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.38}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
b,strong{font-weight:700}

.app{position:relative;z-index:1;max-width:1560px;margin:0 auto;padding:22px 28px 110px}

/* ---------- 사이트로 돌아가기 (달빛 수풀잎) ---------- */
.site-back{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 10px;font-size:12.5px}
.site-back a{color:var(--gold);text-decoration:none;font-weight:700;letter-spacing:.02em;opacity:.85}
.site-back a:hover{opacity:1;text-decoration:underline}
.site-back span{color:var(--ink);font-size:11.5px}

/* ---------- 머리 ---------- */
header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:6px 0 22px;position:relative}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep) 20%,var(--gold) 50%,var(--gold-deep) 80%,transparent)}
.brand{display:flex;gap:16px;align-items:center}
.logo{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;color:var(--gold-pale);
  background:radial-gradient(circle at 35% 30%,#3a2d1c,#120e0a 70%);
  border:1px solid var(--gold-deep);
  box-shadow:inset 0 0 0 4px var(--obsidian),inset 0 0 0 5px rgba(228,189,110,.35),0 0 30px rgba(255,122,61,.18);
}
.brand h1{margin:0;font:800 28px/1.1 'Nanum Myeongjo',serif;letter-spacing:-.5px;color:var(--parchment)}
.brand small{display:block;margin-top:5px;font:italic 500 13px 'Cormorant',serif;letter-spacing:.14em;color:var(--gold)}
.resources{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:flex;align-items:baseline;gap:8px;padding:10px 14px;border-radius:var(--radius-m);
  background:var(--obsidian-2);border:1px solid var(--soot);
  font-weight:700;font-variant-numeric:tabular-nums;color:var(--parchment)
}
.chip span{color:var(--ink);font-size:12px;font-weight:500}

/* ---------- 큰 틀 ---------- */
.layout{display:grid;grid-template-columns:212px minmax(0,1fr) 304px;gap:24px;margin-top:24px}
.panel{background:var(--obsidian-2);border:1px solid var(--soot);border-radius:var(--radius-l)}
.main{min-width:0}
.page{display:none}
.page.active{display:block}

/* 왼쪽 목차 — 금선 목록 */
.side{padding:18px 14px;align-self:start;position:sticky;top:18px;background:transparent;border:0}
.side .over{margin:4px 10px 14px;font:italic 500 13px 'Cormorant',serif;letter-spacing:.14em;color:var(--gold)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{
  width:100%;text-align:left;border:0;border-left:2px solid transparent;color:var(--parchment-dim);background:transparent;
  border-radius:0 var(--radius-s) var(--radius-s) 0;padding:12px 12px;font-weight:500;transition:color .15s,border-color .15s,background .15s
}
.nav button:hover{color:var(--parchment);background:rgba(255,255,255,.03)}
.nav button.active{color:var(--gold-pale);border-left-color:var(--gold);background:linear-gradient(90deg,rgba(228,189,110,.12),transparent)}
.sidebar-note{margin:22px 12px 0;padding-top:18px;border-top:1px solid var(--soot);color:var(--ink);font-size:12px;line-height:2}

/* ---------- 무대 (유일한 주인공) ---------- */
.hero{
  position:relative;overflow:hidden;border-radius:var(--radius-l);text-align:center;padding:28px 20px 22px;min-height:520px;
  background:
    radial-gradient(60% 55% at 50% 62%,rgba(255,122,61,.22),transparent 70%),
    radial-gradient(90% 40% at 50% 100%,rgba(194,69,26,.25),transparent 70%),
    linear-gradient(180deg,#1a1410,#0e0b09);
  border:1px solid rgba(228,189,110,.28);
  box-shadow:var(--shadow-stage);
}
.hero::before{ /* 모루 바닥 선 */
  content:"";position:absolute;left:8%;right:8%;bottom:118px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(228,189,110,.5),transparent)
}
.hero::after{ /* 떠오르는 불티 */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 70%,rgba(255,170,100,.9),transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 48%,rgba(255,150,80,.8),transparent 60%),
    radial-gradient(2px 2px at 68% 62%,rgba(255,180,110,.9),transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 38%,rgba(255,140,70,.7),transparent 60%),
    radial-gradient(1px 1px at 55% 30%,rgba(255,200,140,.8),transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 80%,rgba(255,160,90,.8),transparent 60%);
  animation:sparks 9s linear infinite;opacity:.9
}
.hero>*{position:relative;z-index:1}
.eyebrow{font:italic 500 14px 'Cormorant',serif;letter-spacing:.16em;color:var(--gold)}
.hero h2{margin:12px 0 4px;font:800 clamp(28px,3.4vw,40px)/1.15 'Nanum Myeongjo',serif;letter-spacing:-.5px;color:var(--parchment);text-shadow:0 2px 30px rgba(255,122,61,.25)}
.hero .meta{font-size:13px;color:var(--parchment-dim)}
.muted{color:var(--parchment-dim)}
.stage{height:300px;display:grid;place-items:center;position:relative;margin-top:6px}
.halo{
  position:absolute;width:250px;height:250px;border-radius:50%;
  border:1px solid rgba(228,189,110,.35);
  box-shadow:0 0 80px rgba(255,122,61,.25),inset 0 0 60px rgba(255,122,61,.12);
  animation:spin 40s linear infinite
}
.halo::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(228,189,110,.22)}
.halo::after{content:"✦ ✧ ✦ ✧ ✦ ✧";position:absolute;inset:12px;color:rgba(228,189,110,.45);font-size:26px;letter-spacing:14px;display:grid;place-items:center}
.sword{height:286px;width:146px;transform:rotate(32deg);filter:drop-shadow(0 0 18px var(--weapon)) drop-shadow(0 20px 30px rgba(0,0,0,.6));transition:filter .3s}
.sword svg{height:100%;width:100%;overflow:visible}
.sword.burst{animation:burst .6s cubic-bezier(.2,.8,.2,1)}
.stage::after{ /* 강화 성공 충격파 */
  content:"";position:absolute;width:40px;height:40px;border-radius:50%;border:2px solid var(--gold-pale);opacity:0;pointer-events:none
}
.stage:has(.sword.burst)::after{animation:shock .6s ease-out}
.milestones{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.milestones span{padding:6px 11px;border-radius:999px;border:1px solid var(--ash);background:rgba(15,12,10,.6);color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums}

/* ---------- 구역 ---------- */
.section{padding:24px;margin-top:18px}
.heading{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.heading h3{margin:0;font:700 20px/1.3 'Nanum Myeongjo',serif;color:var(--parchment)}
.heading p{margin:6px 0 0;color:var(--parchment-dim);font-size:13px;line-height:1.7}
.section>h2{margin:8px 0 2px;font:800 26px/1.2 'Nanum Myeongjo',serif;color:var(--parchment)}
.pill{padding:8px 14px;border-radius:999px;border:1px solid var(--gold-deep);background:rgba(228,189,110,.1);color:var(--gold-pale);font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.btn{
  border:1px solid var(--ash);background:var(--obsidian-3);color:var(--parchment);border-radius:var(--radius-m);
  padding:14px 12px;font-weight:700;min-height:50px;transition:transform .12s,background .15s,border-color .15s
}
.btn:hover:not(:disabled){border-color:var(--steel-dim);background:#262019}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.gold{
  color:#2a1b08;border-color:#caa35a;
  background:linear-gradient(180deg,#fbe7b6 0%,#e4bd6e 55%,#c99a4b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(120,80,20,.35),0 8px 26px rgba(228,189,110,.22)
}
.btn.gold:hover:not(:disabled){background:linear-gradient(180deg,#fff0c8,#eac67a 55%,#d0a252);border-color:#e4bd6e}
.btn.violet{
  color:var(--steel);border-color:#4a5563;
  background:linear-gradient(180deg,#2b3340,#1b2029);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.btn.violet:hover:not(:disabled){border-color:var(--steel-dim)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.stat{background:var(--obsidian);border:1px solid var(--soot);border-radius:var(--radius-m);padding:14px 16px;min-width:0}
.stat label{display:block;color:var(--ink);font-size:12px;margin-bottom:6px}
.stat strong{font-size:18px;font-variant-numeric:tabular-nums;word-break:break-all;color:var(--parchment)}
.subnote{color:var(--parchment-dim);line-height:1.8;font-size:13px;margin-top:14px}

/* ---------- 오른쪽 연대기 ---------- */
.right{align-self:start;position:sticky;top:18px;display:grid;gap:16px}
.right .panel{padding:18px}
.right h3{margin:0 0 12px;font:700 16px 'Nanum Myeongjo',serif;color:var(--parchment)}
.enemy{text-align:center;font-size:72px;padding:14px 0 8px;filter:drop-shadow(0 0 22px rgba(224,96,126,.35));animation:breathe 2.8s ease-in-out infinite}
.bar{height:8px;background:var(--soot);border-radius:999px;overflow:hidden;margin:12px 0 6px}
.bar>b{display:block;height:100%;background:linear-gradient(90deg,var(--ember-deep),var(--ember),#ffb27a);transition:width .2s}
.battle-summary{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--parchment-dim)}
.feed{height:220px;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--parchment-dim);scrollbar-width:thin;scrollbar-color:var(--ash) transparent}
.feed div{padding:8px 10px;border-radius:var(--radius-s);background:var(--obsidian);border-left:2px solid var(--gold-deep)}
.feed div:first-child{border-left-color:var(--ember);color:var(--parchment)}
.keyval{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--soot);font-variant-numeric:tabular-nums}
.keyval:last-child{border-bottom:0}
.keyval span{color:var(--ink)}

/* ---------- 도감 · 제작 ---------- */
.collection,.craft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.item{position:relative;border:1px solid var(--soot);background:var(--obsidian);border-radius:var(--radius-m);padding:18px;min-width:0;transition:border-color .15s}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:var(--weapon,var(--ash));opacity:.9}
.item.owned{border-color:var(--gold-deep);background:linear-gradient(180deg,rgba(228,189,110,.06),transparent 60%),var(--obsidian)}
.item .glyph{font-size:36px;display:block;margin:8px 0}
.item .thumb{display:block;width:124px;height:176px;margin:4px auto 2px;filter:drop-shadow(0 0 10px var(--weapon));transform:rotate(18deg)}
.inventory-entry .inv-thumb{display:flex;align-items:center;justify-content:center;width:44px;height:56px;flex:none}
.inventory-entry .thumb.small{width:40px;height:56px;filter:drop-shadow(0 0 6px var(--weapon));transform:rotate(22deg)}
.item h4{margin:4px 0;font:700 16px 'Nanum Myeongjo',serif;color:var(--parchment)}
.item p{margin:6px 0;color:var(--parchment-dim);font-size:12px;line-height:1.7}
.item .tiny{font:italic 500 13px 'Cormorant',serif;letter-spacing:.08em;color:var(--gold)}
.item button{width:100%;margin-top:10px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
.filter{padding:8px 12px;border:1px solid var(--soot);background:transparent;color:var(--parchment-dim);border-radius:999px;font-size:13px}
.filter:hover{border-color:var(--steel-dim);color:var(--parchment)}
.filter.active{color:#2a1b08;background:var(--gold);border-color:var(--gold)}
.progress{height:8px;background:var(--soot);border-radius:999px;overflow:hidden}
.progress b{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-pale))}

/* ---------- 랭킹 · 업적 ---------- */
.rankline{display:flex;align-items:center;gap:16px;border:1px solid var(--soot);background:var(--obsidian);border-radius:var(--radius-m);padding:16px 18px;margin-top:8px}
.rankline strong{margin-left:auto;font-variant-numeric:tabular-nums}
.rankline.me{border-color:var(--gold-deep);background:linear-gradient(90deg,rgba(228,189,110,.12),var(--obsidian) 60%)}
.rankindex{font:600 24px 'Cormorant',serif;color:var(--gold);width:30px;text-align:center}
.ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ach{padding:16px 18px;border:1px solid var(--soot);background:var(--obsidian);border-radius:var(--radius-m)}
.ach.done{border-color:var(--gold-deep)}
.ach b{display:block;margin-bottom:6px;font-family:'Nanum Myeongjo',serif}
.ach small{color:var(--parchment-dim);line-height:1.7}

/* ---------- 토스트 · 바닥 ---------- */
.toast{
  position:fixed;z-index:20;bottom:28px;left:50%;transform:translateX(-50%) translateY(100px);opacity:0;transition:.3s;
  background:var(--gold);color:#2a1b08;border-radius:999px;padding:14px 26px;font-weight:900;box-shadow:0 18px 50px rgba(0,0,0,.6);pointer-events:none;text-align:center
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.footer{text-align:center;color:var(--ink);padding:48px 0 0;font:italic 500 13px 'Cormorant',serif;letter-spacing:.14em}
.mobile-nav{display:none}
.label-rare{color:var(--weapon)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes burst{40%{transform:rotate(32deg) scale(1.16);filter:drop-shadow(0 0 60px var(--weapon)) drop-shadow(0 0 20px #fff)}}
@keyframes shock{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(9)}}
@keyframes breathe{50%{transform:scale(1.07)}}
@keyframes sparks{from{transform:translateY(0)}to{transform:translateY(-40px)}}

/* ---------- 반응형 ---------- */
@media(max-width:1250px){
  .layout{grid-template-columns:180px minmax(0,1fr)}
  .right{grid-column:2;position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .right .panel:last-child{grid-column:1/-1}
}
@media(max-width:790px){
  .app{padding:14px 14px 100px}
  .layout{display:block;margin-top:16px}
  .side{display:none}
  .right{display:grid;grid-template-columns:1fr 1fr;margin-top:16px}
  .hero{min-height:470px;padding:22px 14px 16px}
  .hero::before{bottom:98px}
  .stage{height:280px}
  .stats{grid-template-columns:1fr 1fr}
  .collection,.craft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;justify-content:space-around;
    background:rgba(15,12,10,.92);backdrop-filter:blur(16px);border-top:1px solid var(--soot);
    padding:8px 4px max(8px,env(safe-area-inset-bottom))
  }
  .mobile-nav button{background:none;border:0;color:var(--ink);font-size:10px;padding:5px 3px;min-width:44px}
  .mobile-nav button b{display:block;font-size:21px}
  .mobile-nav button.active{color:var(--gold-pale)}
  header{flex-wrap:wrap;align-items:center;padding-bottom:14px}
  .resources{width:100%}
  .resources{gap:5px}
  .chip{padding:7px 10px;font-size:12px}
  .chip span{font-size:11px}
  .brand h1{font-size:20px}
  .brand small{font-size:11px}
  .logo{height:44px;width:44px;font-size:20px}
  .btns{grid-template-columns:1fr 1fr}
  .btns button:last-child{grid-column:1/-1}
  .section{padding:16px}
}
@media(max-width:430px){
  .right{grid-template-columns:1fr}
  .collection,.craft-grid{grid-template-columns:1fr 1fr}
  .item{padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .halo,.enemy,.hero::after{animation:none}
  .sword.burst,.stage:has(.sword.burst)::after{animation:none}
}

/* FINAL EDITION */
.notice-risk{margin:0 0 16px;padding:13px 16px;border:1px solid rgba(224,96,126,.35);background:linear-gradient(90deg,rgba(224,96,126,.09),transparent);border-radius:10px;color:#f5c4cb;font-size:13px}
.inventory-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--soot);padding-top:20px;margin-top:22px;font-family:'Nanum Myeongjo',serif;color:var(--gold-pale)}
.inventory-heading small{font-family:'Noto Sans KR',sans-serif;color:var(--ink);font-size:11px}
.inventory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px;max-height:320px;overflow-y:auto}
.inventory-entry{display:flex;align-items:center;gap:10px;background:#100e0d;border:1px solid #3a3026;border-radius:10px;padding:12px;text-align:left;color:var(--parchment);min-width:0}
.inventory-entry.active{border-color:var(--gold);background:#2c2419}
.inventory-entry span{font-size:23px}.inventory-entry strong{font-size:12px}.inventory-entry small{display:block;color:var(--ink);font-size:11px}
.more-btn{display:block;margin:18px auto 0;max-width:340px;width:100%}
.item{overflow:hidden}.item h4{overflow-wrap:anywhere}.item .cap{display:inline-block;padding:3px 8px;border:1px solid var(--gold-deep);border-radius:20px;color:var(--gold);font-size:11px;margin:6px 0}
.item.hidden-relic{opacity:.6}.item.hidden-relic::after{content:'?';position:absolute;right:12px;top:10px;font:italic 25px 'Cormorant',serif;color:#685443}
.status-risk{color:#f0a6ae}.status-safe{color:#a5dfb7}
@media(max-width:550px){.inventory-list{grid-template-columns:1fr}.inventory-heading{align-items:flex-start;flex-direction:column;gap:3px}}

/* ETERNAL OBSIDIAN V4 — progressive revelation */
:root{--gold:#eac47e;--gold-deep:#a78a57;--ember:#f3935a;--obsidian:#0c0b0b;--obsidian-2:#151413;--obsidian-3:#201d1a;--soot:#302b25;--parchment:#f5ecdb;--ink:#998d7b;--shadow-stage:0 30px 110px rgba(242,152,73,.10),0 24px 60px rgba(0,0,0,.45)}
body{background:radial-gradient(700px 460px at 52% -140px,rgba(238,188,104,.13),transparent 75%),radial-gradient(800px 600px at 85% 100%,rgba(62,52,71,.12),transparent 75%),var(--obsidian)}
.panel{box-shadow:0 12px 34px rgba(0,0,0,.12)}.hero{border:1px solid rgba(244,195,125,.25);background:radial-gradient(65% 56% at 50% 65%,rgba(255,137,54,.2),transparent 70%),radial-gradient(80% 55% at 50% 110%,rgba(130,61,24,.2),transparent 70%),linear-gradient(175deg,#1b1714 0%,#0d0b0a 100%)}
.hero-badge{display:inline-flex;align-items:center;justify-content:center;margin:10px auto 0;border:1px solid rgba(241,200,129,.22);border-radius:100px;letter-spacing:.21em;font:600 11px 'Cormorant',serif;color:#cdb88f;padding:8px 15px;background:rgba(16,12,9,.55)}
.forge-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}.forge-odds span{display:block;padding:10px 6px;border:1px solid rgba(228,189,110,.17);border-radius:8px;background:rgba(10,9,8,.5);text-align:center;font-size:11px;color:var(--parchment-dim)}.forge-odds span:first-child{color:var(--gold-pale)}.forge-odds span:nth-child(2){color:#f0a6ae}.forge-odds span:last-child{color:#93d0a6}
.section-kicker{color:var(--gold);font:italic 600 13px 'Cormorant',serif;letter-spacing:.14em}
.progression-card{margin:18px 0 14px;padding:22px 20px;border-radius:12px;border:1px solid rgba(228,189,110,.3);background:radial-gradient(circle at 100% 0%,rgba(240,183,104,.10),transparent 55%),linear-gradient(135deg,#252018,#141210);line-height:1.85;font-size:13px;color:var(--parchment-dim)}.progression-card b{display:block;color:var(--gold-pale);font:700 17px 'Nanum Myeongjo',serif;margin-bottom:7px}.progression-card strong{color:var(--gold)}
.secrecy-tail{text-align:center;margin-top:20px;border:1px dashed rgba(228,189,110,.19);border-radius:12px;background:repeating-linear-gradient(-45deg,rgba(188,154,103,.02),rgba(188,154,103,.02) 4px,transparent 4px,transparent 10px);padding:23px 16px 24px;display:flex;flex-direction:column;align-items:center;gap:5px}.secrecy-tail b{font-family:'Nanum Myeongjo',serif;color:#d7bd8d}.secrecy-tail small{color:var(--ink);font-size:12px}.sealed-mark{font-size:30px;color:#bd9956;line-height:1.3}
.craft-grid,.collection{grid-template-columns:repeat(2,minmax(0,1fr))}.item.owned{border-color:rgba(234,196,126,.5)}.item .cap{border-color:#675234;color:#d6ba84}.item .glyph{filter:drop-shadow(0 5px 12px var(--weapon,transparent));font-size:37px}
.codex-inscription{margin:18px 0 6px;padding:11px 16px;border-top:1px solid var(--soot);border-bottom:1px solid var(--soot);text-align:center;color:#8b7253;font:italic 500 12px 'Cormorant',serif;letter-spacing:.17em}
.oath-header{margin:25px 0 0}.oath-header h3,.relic-section h3{font:700 19px 'Nanum Myeongjo',serif;margin:5px 0;color:var(--parchment)}.oath-next{margin-top:12px;padding:25px;border:1px solid rgba(234,196,126,.32);border-radius:12px;background:radial-gradient(circle at 100% 0%,rgba(219,174,96,.16),transparent 60%),linear-gradient(135deg,#262117,#100f0e)}.oath-next h4{color:var(--gold-pale);font:700 19px 'Nanum Myeongjo',serif;margin:6px 0}.oath-next p{font-size:13px;color:var(--parchment-dim);margin:8px 0}.oath-next small{color:var(--ink)}.oath-next .reward{color:var(--gold);margin-top:12px}.ach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ach{padding:14px 16px}.ach small{font-size:11px}.oath-archive{color:var(--ink);font-size:12px;margin-top:14px}
.hunt-progress{padding:13px 0}.hunt-caption{display:flex;justify-content:space-between;gap:10px;color:var(--parchment-dim);font-size:12px}.hunt-caption b{color:var(--gold-pale)}.relic-section{margin-top:18px;border-top:1px solid var(--soot);padding-top:25px}.encounter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}.encounter{min-width:0;min-height:110px;border-radius:11px;border:1px solid var(--soot);padding:13px 7px;text-align:center;background:linear-gradient(180deg,#201c18,#0e0c0b)}.encounter .eg{font-size:30px}.encounter strong{display:block;font-size:11px;line-height:1.55;overflow-wrap:anywhere;margin-top:4px}.encounter small{font-size:10px;color:var(--ink)}.encounter.unknown{opacity:.48;filter:grayscale(1)}.encounter.boss{border-color:#9e6847}.monster-type{color:var(--gold);font-size:11px;letter-spacing:.13em;margin:12px 0 0}
.rank-veil{position:relative;overflow:hidden;text-align:center;padding:28px 16px 26px;margin:16px 0 19px;border:1px solid rgba(220,186,122,.23);border-radius:14px;background:radial-gradient(circle at 50% 10%,rgba(222,177,91,.09),transparent 60%),linear-gradient(130deg,#1e1a16,#0f0e0d)}.rank-veil:before{content:'♛';position:absolute;font-size:210px;line-height:1;right:-8px;top:-55px;color:rgba(228,189,110,.03)}.rank-veil .seal-logo{font-size:43px;color:#d4b679}.rank-veil h3{font:700 23px 'Nanum Myeongjo',serif;margin:10px 0}.rank-veil p{color:var(--parchment-dim);font-size:13px}.rankline{margin-bottom:8px}.rankline .masked{filter:blur(7px);user-select:none;color:#86786a}.rankline strong.masked{font-family:monospace;letter-spacing:.17em}.rankline .rankindex{color:#796d5a}.rankline.me{border-style:dashed;border-color:var(--gold-deep)}.rank-footnote{text-align:center;padding:20px;color:var(--ink);font-size:12px}.rank-footnote strong{font-size:22px;color:var(--gold-pale)}
.pager{display:flex;justify-content:center;gap:8px;align-items:center;margin:16px 0 2px}.pager button{border:1px solid var(--ash);border-radius:8px;background:var(--obsidian-3);color:var(--parchment);padding:8px 14px;font-size:12px}.pager button:disabled{opacity:.32}.pager span{color:var(--ink);font-size:12px}.zone-travel{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:16px 0 4px;padding:13px 15px;background:var(--obsidian);border:1px solid var(--soot);border-radius:10px}.zone-travel label{color:var(--ink);font-size:12px}.zone-travel select{border:1px solid var(--ash);background:var(--obsidian-3);color:var(--parchment);font:inherit;max-width:65%;border-radius:8px;padding:9px}.inventory-entry{min-height:70px}.inventory-entry strong{white-space:normal;overflow-wrap:anywhere}.inventory-list{max-height:290px}.notice-risk{border-color:rgba(224,96,126,.22);background:rgba(95,48,46,.1)}
@media(max-width:590px){.forge-odds{grid-template-columns:1fr;gap:5px}.forge-odds span{padding:8px}.encounter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ach-grid{grid-template-columns:1fr}.craft-grid,.collection{grid-template-columns:repeat(2,minmax(0,1fr))}.section h2{font-size:22px}}
@media(max-width:380px){.craft-grid,.collection{grid-template-columns:1fr}}