/* ==========================================================================
   HAPPY — Dark Medieval Fantasy  |  design system
   ========================================================================== */
/* self-hosted fonts (no external dependency — fast on IP or domain) */
@font-face{font-family:'Cinzel';src:url('../fonts/Cinzel-var.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url('../fonts/CinzelDecorative-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url('../fonts/CinzelDecorative-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Nanum Myeongjo';src:url('../fonts/NanumMyeongjo-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nanum Myeongjo';src:url('../fonts/NanumMyeongjo-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Nanum Myeongjo';src:url('../fonts/NanumMyeongjo-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Gowun Dodum';src:url('../fonts/GowunDodum-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{
  --ink:#0a0907; --ink-1:#100d09; --ink-2:#16120b; --ink-3:#1e1810;
  --line:rgba(200,162,74,.22); --line-soft:rgba(200,162,74,.12);
  --gold:#c8a24a; --gold-2:#e7c879; --gold-3:#f4e3b0; --gold-deep:#7d5f28;
  --ember:#e0702f; --ember-2:#f1933f; --ember-glow:rgba(224,112,47,.45);
  --parch:#e9ddc3; --muted:#a99b7e; --muted-2:#79705d;
  --silver:#b9cde0; --silver-deep:#476c90;
  --blood:#8c2f27;
  --f-disp:"Cinzel",serif;
  --f-dec:"Cinzel Decorative","Cinzel",serif;
  --f-ko:"Nanum Myeongjo",serif;
  --f-body:"Gowun Dodum","Nanum Myeongjo",sans-serif;
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body); color:var(--parch); background:var(--ink);
  line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  position:relative; text-wrap:pretty; word-break:keep-all; overflow-wrap:break-word;
}
/* 줄바꿈 다듬기: 한글은 어절(띄어쓰기) 단위로만 끊고, 짧은 블록은 균형 */
h1,h2,h3,h4,.section-title,.phead h1,.lead,
.card .desc,.card h3,.feat h3,.feat p,.ev-card h3,.ev-card p,
.realm h3,.realm p,.realm__note,.step h4,.step p,.dl-card h2,
.inq__body,.modal__title{text-wrap:balance}
/* atmosphere: vignette + warm glow + fine noise + gold filigree dust */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='rgba(200,162,74,0.045)' stroke-width='1'%3E%3Cpath d='M44 2 L86 44 L44 86 L2 44 Z'/%3E%3C/g%3E%3Ccircle cx='44' cy='44' r='1.3' fill='rgba(200,162,74,0.06)'/%3E%3Ccircle cx='2' cy='44' r='1' fill='rgba(200,162,74,0.05)'/%3E%3Ccircle cx='86' cy='44' r='1' fill='rgba(200,162,74,0.05)'/%3E%3C/svg%3E") 0 0/88px 88px repeat,
    radial-gradient(1200px 700px at 50% -10%, rgba(224,112,47,.10), transparent 60%),
    radial-gradient(900px 900px at 85% 20%, rgba(200,162,74,.06), transparent 60%),
    radial-gradient(1200px 1000px at 50% 120%, rgba(0,0,0,.6), transparent 60%),
    linear-gradient(180deg,#0b0906,#0a0806 40%,#080604);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ember);color:#120a04}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---- scrollbar ---- */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0a0806}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-deep),#2a2012);border:2px solid #0a0806;border-radius:9px}

/* ---- typography ---- */
h1,h2,h3{font-family:var(--f-disp);font-weight:700;letter-spacing:.02em;line-height:1.1;color:var(--gold-3)}
.ko{font-family:var(--f-ko)}
.eyebrow{
  font-family:var(--f-disp);font-size:13px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold); display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before,.eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.section-title{font-family:var(--f-ko);font-size:clamp(28px,4vw,46px);font-weight:800;color:var(--gold-3);
  text-shadow:0 2px 18px rgba(224,112,47,.25)}
.lead{color:var(--muted);font-size:16px;max-width:60ch;text-wrap:balance}

/* ---- gold ornaments ---- */
.flourish{display:block;margin:18px auto;width:min(420px,70%);height:22px;color:var(--gold)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0}

/* decorative ornate frame for panels */
.ornate{position:relative;background:
   linear-gradient(180deg,rgba(30,24,16,.86),rgba(12,10,7,.92));
   border:1px solid var(--line);border-radius:4px}
.ornate::before,.ornate::after{
  content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:.75}
.ornate::before{top:8px;left:8px;border-right:0;border-bottom:0}
.ornate::after{bottom:8px;right:8px;border-left:0;border-top:0}

/* ---- buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-disp);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;
  padding:15px 30px;color:var(--gold-3);background:linear-gradient(180deg,#241b0e,#140e07);
  border:1px solid var(--gold-deep);border-radius:3px;cursor:pointer;transition:.35s var(--ease);overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:
  radial-gradient(140px 60px at var(--mx,50%) 120%,var(--ember-glow),transparent 70%);opacity:0;transition:.35s}
.btn:hover{color:#fff5df;border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 26px rgba(224,112,47,.28)}
.btn:hover::after{opacity:1}
.btn--primary{background:linear-gradient(180deg,#3a2a12,#241709);border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(231,200,121,.18) inset,0 8px 26px rgba(0,0,0,.5)}
.btn--ember{color:#1a0d04;background:linear-gradient(180deg,var(--ember-2),var(--ember));border-color:#f6ad5a}
.btn--ember:hover{color:#1a0d04;box-shadow:0 10px 34px rgba(224,112,47,.5)}
.btn--ghost{background:transparent}
.btn--lg{padding:18px 40px;font-size:14px}

/* ================= HEADER ================= */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s var(--ease)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:66px;transition:.4s var(--ease)}
.site-head.scrolled{backdrop-filter:blur(10px);background:rgba(8,6,4,.88)}
.site-head.scrolled .bar{height:58px}
/* GNB — full-width global nav bar, items evenly distributed */
.gnb{border-top:1px solid var(--line-soft);background:rgba(8,6,4,.34);backdrop-filter:blur(4px);transition:.4s var(--ease)}
.site-head.scrolled .gnb{background:transparent;border-top-color:var(--line)}
.gnb .wrap{display:flex;justify-content:space-between;align-items:stretch}
.gnb a{flex:1 1 0;text-align:center;padding:13px 4px;font-family:var(--f-ko);font-weight:700;font-size:15px;
  color:var(--parch);opacity:.84;position:relative;white-space:nowrap;transition:.22s}
.gnb a+a{border-left:1px solid var(--line-soft)}
.gnb a:hover,.gnb a.on{color:var(--gold-3);opacity:1;background:linear-gradient(180deg,rgba(224,112,47,.08),transparent)}
.gnb a::after{content:"";position:absolute;left:50%;bottom:0;width:58%;height:2px;transform:translateX(-50%) scaleX(0);
  transform-origin:center;background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:.3s var(--ease)}
.gnb a:hover::after,.gnb a.on::after{transform:translateX(-50%) scaleX(1)}
/* 몬스터 메뉴 하위(호버) 드롭다운 */
.gnb-item{flex:1 1 0;position:relative;display:flex}
.gnb-item>a{flex:1 1 0}
.gnb .wrap>a+.gnb-item,.gnb .wrap>.gnb-item+a{border-left:1px solid var(--line-soft)}
.caret{font-size:9px;opacity:.55;margin-left:2px;font-style:normal}
.gnb-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:180px;padding-top:8px;
  opacity:0;visibility:hidden;transition:.18s var(--ease);z-index:300}
.gnb-item:hover .gnb-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.gnb-drop>a{display:block;padding:12px 18px;font-family:var(--f-ko);font-weight:700;font-size:14px;color:var(--parch);
  white-space:nowrap;text-align:left;background:linear-gradient(180deg,#141009,#0d0a06);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.gnb-drop>a:first-child{border-top:1px solid var(--line);border-radius:10px 10px 0 0;box-shadow:0 -1px 0 var(--line)}
.gnb-drop>a:last-child{border-bottom:1px solid var(--line);border-radius:0 0 10px 10px;box-shadow:0 24px 50px rgba(0,0,0,.55)}
.gnb-drop>a+a{border-top:1px solid var(--line-soft)}
.gnb-drop>a:hover,.gnb-drop>a.cur{color:var(--gold-3);background:linear-gradient(180deg,rgba(224,112,47,.12),rgba(20,16,9,.9))}
.mnav-sub{font-size:13px!important;opacity:.72;padding-left:18px!important}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:40px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.brand .brandtext{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--f-dec);font-weight:900;font-size:22px;color:var(--gold-3);letter-spacing:.03em;
  text-shadow:0 2px 14px rgba(224,112,47,.3)}
.brand .brandtext>span{font-family:var(--f-disp);font-size:9px;letter-spacing:.44em;color:var(--muted);margin-top:3px}
.nav{display:flex;align-items:center;gap:0}
.nav a{font-family:var(--f-ko);font-weight:700;font-size:14px;color:var(--parch);padding:9px 11px;position:relative;opacity:.84;transition:.25s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:.3s var(--ease)}
.nav a:hover{opacity:1;color:var(--gold-3)}
.nav a:hover::after{transform:scaleX(1)}
.head-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--gold)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;
  background:#000 center/cover no-repeat;transform:scale(1.08);will-change:transform}
.hero__bg img,.hero__bg video{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero__veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(52% 48% at 50% 46%,rgba(5,3,1,.8),transparent 72%),
  linear-gradient(180deg,rgba(7,5,3,.5),rgba(7,5,3,.28) 32%,rgba(7,5,3,.72) 72%,rgba(6,4,2,.96) 92%,var(--ink))}
.embers{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero .wrap{position:relative;z-index:3;width:100%;text-align:center;padding-top:72px}
.hero__crest{width:92px;margin:0 auto 8px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.7))}
.hero__title{display:block}
.hero h1{font-family:var(--f-dec);font-weight:900;font-size:clamp(50px,9vw,122px);
  color:#f0d488;line-height:.95;letter-spacing:.02em;
  text-shadow:0 3px 16px rgba(0,0,0,.92),0 0 44px rgba(224,112,47,.5)}
.hero__ko{font-family:var(--f-ko);font-weight:800;font-size:clamp(22px,3.4vw,38px);color:#fff;
  margin-top:10px;letter-spacing:.34em;text-shadow:0 2px 16px rgba(0,0,0,.9)}
.hero__sub{color:var(--parch);max-width:52ch;margin:20px auto 0;font-size:17px;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.hero__crest{filter:drop-shadow(0 6px 24px rgba(0,0,0,.85))}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.hero__scroll{display:none;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:var(--muted);
  font-family:var(--f-disp);font-size:10px;letter-spacing:.4em;text-align:center}
.hero__scroll i{display:block;width:1px;height:46px;margin:12px auto 0;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--gold-3);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{top:-50%}60%,100%{top:100%}}

/* live status strip */
.status-strip{position:relative;z-index:3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,14,9,.75),rgba(10,8,5,.75));backdrop-filter:blur(6px)}
.status-strip .wrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px;text-align:left}
.stat{display:flex;align-items:center;gap:12px;padding:4px 18px;flex:1 1 auto;justify-content:center;border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
.stat b{font-family:var(--f-disp);font-size:22px;color:var(--gold-3)}
.stat small{display:block;color:var(--muted);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.dot{width:9px;height:9px;border-radius:50%;background:#57f287;box-shadow:0 0 10px #57f287;animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.4}}

/* ================= SECTIONS ================= */
.sec{padding:110px 0;position:relative}
.sec__head{text-align:center;margin-bottom:56px}
.sec__head .section-title{margin-top:14px}

/* ---- TWO REALMS ---- */
.realms{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.realm{position:relative;border-radius:5px;overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--line);transition:.5s var(--ease);isolation:isolate}
.realm__art{position:absolute;inset:0;z-index:-2}
.realm__art img,.realm__art video{width:100%;height:100%;object-fit:cover;transition:.9s var(--ease);transform:scale(1.03)}
.realm:hover .realm__art video{transform:scale(1.1)}
.realm::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,5,3,.15),rgba(6,5,3,.55) 50%,rgba(6,5,3,.96))}
.realm:hover{transform:translateY(-6px);border-color:var(--gold)}
.realm:hover .realm__art img{transform:scale(1.1)}
.realm__tag{position:absolute;top:22px;left:22px;z-index:2;font-family:var(--f-disp);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  padding:7px 16px;border:1px solid currentColor;border-radius:3px;background:rgba(6,5,3,.5);backdrop-filter:blur(3px)}
.realm__body{position:relative;z-index:2;padding:34px}
.realm h3{font-family:var(--f-ko);font-weight:800;font-size:34px;color:#fff;letter-spacing:.04em}
.realm p{color:var(--muted);margin:10px 0 18px;font-size:15px;line-height:1.75;text-wrap:balance}
.balance{text-wrap:balance}
.realm--main{--c:var(--gold)}
.realm--main .realm__tag{color:var(--gold-2)}
.realm--ladder{--c:var(--silver)}
.realm--ladder .realm__tag{color:var(--silver)}
.realm--ladder::before{background:linear-gradient(180deg,rgba(4,7,11,.15),rgba(4,8,13,.5) 50%,rgba(4,8,13,.96))}
.realm .btn{border-color:var(--c)}

/* ---- FEATURES ---- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{padding:34px 28px;text-align:center}
.feat__ico{width:58px;height:58px;margin:0 auto 18px;color:var(--gold);display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(224,112,47,.18),transparent 70%)}
.feat h3{font-family:var(--f-ko);font-weight:800;font-size:20px;color:var(--gold-3)}
.feat p{color:var(--muted);font-size:14px;margin-top:8px}

/* ---- panels grid (notice + ranking preview) ---- */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:stretch}
.grid-2>.ornate{display:flex;flex-direction:column}
.grid-2 .notice-list,.grid-2 .rk-panel{flex:1;display:flex;flex-direction:column;justify-content:space-around}

/* notices */
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid var(--line)}
.panel-head h3{font-family:var(--f-ko);font-weight:800;font-size:19px;color:var(--gold-3)}
.panel-head a{font-family:var(--f-disp);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.notice-list{list-style:none}
.notice-list li{display:flex;align-items:center;gap:16px;padding:16px 26px;border-bottom:1px solid var(--line-soft);transition:.25s}
.notice-list li:last-child{border-bottom:0}
.notice-list li:hover{background:rgba(224,112,47,.06)}
.notice-list .tag{font-family:var(--f-disp);font-size:10px;letter-spacing:.16em;padding:3px 9px;border:1px solid var(--line);border-radius:3px;color:var(--gold);white-space:nowrap;text-transform:uppercase}
.notice-list .tag.ev{color:var(--ember-2);border-color:rgba(224,112,47,.4)}
.notice-list .t{flex:1;color:var(--parch);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-list .d{color:var(--muted-2);font-size:12px;font-family:var(--f-disp)}

/* mini ranking */
.rk{list-style:none}
.rk li{display:flex;align-items:center;gap:14px;padding:13px 26px;border-bottom:1px solid var(--line-soft)}
.rk li:last-child{border-bottom:0}
.rk .n{font-family:var(--f-disp);font-weight:700;font-size:16px;width:30px;text-align:center;color:var(--muted)}
.rk .n.g1{color:var(--gold-2);font-size:20px;text-shadow:0 0 12px var(--ember-glow)}
.rk .n.g2{color:#d8d8d8}.rk .n.g3{color:#c08552}
.rk .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2a2012,#141009);border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);font-family:var(--f-disp);font-size:13px}
.rk .nm{flex:1;color:var(--parch);font-weight:700;font-size:15px}
.rk .cls{color:var(--muted);font-size:12px}
.rk .lv{font-family:var(--f-disp);color:var(--gold-3);font-weight:700}

/* ================= PAGE HEADER (subpages) ================= */
.phead{position:relative;padding:150px 0 60px;text-align:center;border-bottom:1px solid var(--line);overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(70% 120% at 50% 0%,rgba(224,112,47,.14),transparent 60%),linear-gradient(180deg,#0d0a07,var(--ink))}
.phead h1{font-family:var(--f-dec);font-weight:900;font-size:clamp(34px,6vw,68px);
  background:linear-gradient(180deg,#fbeec4,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.phead .ko{font-family:var(--f-ko);color:var(--muted);letter-spacing:.3em;margin-top:6px}
.phead::after{content:"";position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:min(340px,62%);height:16px;opacity:.7;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c8a24a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23e7c879'/%3E%3Cstop offset='1' stop-color='%23c8a24a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='20' y1='8' x2='128' y2='8' stroke='url(%23g)' stroke-width='1'/%3E%3Cline x1='172' y1='8' x2='280' y2='8' stroke='url(%23g)' stroke-width='1'/%3E%3Cpath d='M150 1 L159 8 L150 15 L141 8 Z' fill='none' stroke='%23e7c879' stroke-width='1.2'/%3E%3Ccircle cx='150' cy='8' r='2.1' fill='%23e7c879'/%3E%3C/svg%3E")}

/* 섹션 은은한 측면 광원 (영상 없는 밋밋함 완화) */
.sec{isolation:isolate}
.sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background:radial-gradient(640px 320px at 0% 0%,rgba(224,112,47,.045),transparent 60%),radial-gradient(640px 320px at 100% 100%,rgba(200,162,74,.04),transparent 60%)}

/* ---- tabs ---- */
.tabs{display:flex;gap:10px;justify-content:center;margin:0 0 36px;flex-wrap:wrap}
.tab{font-family:var(--f-ko);font-weight:700;font-size:14px;padding:11px 26px;border:1px solid var(--line);border-radius:3px;
  color:var(--muted);cursor:pointer;background:linear-gradient(180deg,rgba(26,20,12,.6),transparent);transition:.3s}
.tab.on,.tab:hover{color:var(--gold-3);border-color:var(--gold);box-shadow:0 0 18px rgba(224,112,47,.18) inset}

/* ---- full ranking table ---- */
.rank-table{width:100%;border-collapse:collapse}
.rank-table th{font-family:var(--f-disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  text-align:left;padding:16px 22px;border-bottom:1px solid var(--line)}
.rank-table td{padding:15px 22px;border-bottom:1px solid var(--line-soft);font-size:15px}
.rank-table tr{transition:.2s}
.rank-table tbody tr:hover{background:rgba(224,112,47,.06)}
.rank-table .rank-n{font-family:var(--f-disp);font-weight:700;color:var(--muted)}
.rank-table tr.top .rank-n{color:var(--gold-2);font-size:18px}
.badge{display:inline-block;font-family:var(--f-disp);font-size:10px;letter-spacing:.12em;padding:3px 10px;border-radius:3px;
  border:1px solid var(--line);color:var(--gold)}

/* ---- download ---- */
.dl-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.dl-card{padding:40px;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.dl-card__bg{position:absolute;inset:0;z-index:-1}
.dl-card__bg video{width:100%;height:100%;object-fit:cover;opacity:.55}
.dl-card__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,9,6,.55),rgba(10,8,5,.86))}
.dl-card .ver{font-family:var(--f-disp);color:var(--muted);letter-spacing:.2em;font-size:12px}
.dl-card h2{font-family:var(--f-ko);font-size:30px;color:var(--gold-3);margin:8px 0 4px}
.dl-card .size{color:var(--muted);font-size:13px;margin-bottom:26px}
.spec{list-style:none;text-align:left;max-width:360px;margin:26px auto 0}
.spec li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.spec li b{color:var(--gold-3);font-family:var(--f-disp);font-weight:700}
.spec li span{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.step{padding:26px;text-align:center}
.step .no{font-family:var(--f-dec);font-weight:900;font-size:34px;color:var(--gold-deep)}
.step h4{font-family:var(--f-ko);color:var(--gold-3);margin:6px 0}
.step p{color:var(--muted);font-size:13px}

/* ---- auth (login/register) ---- */
.auth{max-width:460px;margin:0 auto;padding:44px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--f-ko);font-size:13px;color:var(--muted);margin-bottom:7px;letter-spacing:.05em}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;background:rgba(8,6,4,.7);border:1px solid var(--line);border-radius:3px;
  color:var(--parch);font-family:var(--f-body);font-size:15px;transition:.25s}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 20px rgba(224,112,47,.15)}
.field select{appearance:none;cursor:pointer}
.auth .btn{width:100%;justify-content:center;margin-top:8px}
.auth__alt{text-align:center;color:var(--muted);font-size:14px;margin-top:22px}
.auth__alt a{color:var(--gold-2)}
.dualnote{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-top:4px;margin-bottom:22px;
  border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:3px;background:rgba(224,112,47,.06);font-size:13px;color:var(--muted)}

/* ================= FOOTER ================= */
.foot{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--gold-deep);
  background:linear-gradient(180deg,#0a0806,#060403);padding:72px 0 30px;margin-top:40px}
.foot__bg{position:absolute;inset:0;z-index:-1}
.foot__bg video{width:100%;height:100%;object-fit:cover;opacity:.6}
.foot__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,7,5,.42),rgba(6,4,3,.82) 85%)}
.foot::before{content:"";position:absolute;top:26px;left:50%;transform:translateX(-50%);width:min(300px,56%);height:14px;opacity:.65;pointer-events:none;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16'%3E%3Cdefs%3E%3ClinearGradient id='fg' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c8a24a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23e7c879'/%3E%3Cstop offset='1' stop-color='%23c8a24a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='30' y1='8' x2='132' y2='8' stroke='url(%23fg)' stroke-width='1'/%3E%3Cline x1='168' y1='8' x2='270' y2='8' stroke='url(%23fg)' stroke-width='1'/%3E%3Cpath d='M150 1 L159 8 L150 15 L141 8 Z' fill='none' stroke='%23e7c879' stroke-width='1.2'/%3E%3Ccircle cx='150' cy='8' r='2' fill='%23e7c879'/%3E%3C/svg%3E")}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot .brand{margin-bottom:16px}
.foot p{color:var(--muted-2);font-size:13px;max-width:34ch}
.foot h5{font-family:var(--f-disp);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot ul{list-style:none}
.foot ul li{margin-bottom:10px}
.foot ul a{color:var(--muted);font-size:14px;transition:.2s}
.foot ul a:hover{color:var(--gold-3)}
.foot__bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line-soft);color:var(--muted-2);font-size:12px}

/* ================= AUTH STATE / INQUIRY ================= */
.me{display:inline-flex;flex-direction:row;align-items:center;gap:9px;margin-right:4px}
.me-ava{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid var(--gold-deep);box-shadow:0 1px 5px rgba(0,0,0,.5);transition:.2s;
  display:grid;place-items:center;background:linear-gradient(135deg,#2a2012,#141009)}
.me-ava img{width:100%;height:100%;object-fit:cover;display:block}
.me-ava em{font-style:normal;color:var(--gold);font-family:var(--f-ko);font-size:13px;font-weight:700}
.me-txt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.me b{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:14px}
.me small{color:var(--muted);font-size:10px;letter-spacing:.1em}
.me:hover .me-ava{border-color:var(--gold);box-shadow:0 0 10px var(--ember-glow)}
.me-ava svg{width:19px;height:19px;color:var(--gold)}
/* 대표캐릭 미설정 상태 — 설정 유도 */
.me--set .me-ava{border-style:dashed;animation:mePulse 2.6s ease-in-out infinite}
.me--set:hover .me-ava{animation:none}
.me-cta{color:var(--ember-2)!important;font-weight:700;font-size:10.5px!important}
@keyframes mePulse{0%,100%{box-shadow:0 0 0 0 rgba(224,112,47,0)}50%{box-shadow:0 0 10px 1px rgba(224,112,47,.4)}}
.auth-err{padding:12px 15px;margin-bottom:18px;border:1px solid rgba(192,80,77,.5);border-left:3px solid #c0504d;border-radius:3px;background:rgba(192,80,77,.08);color:#e9b8b6;font-size:14px}
.auth-ok{padding:12px 15px;margin-bottom:18px;border:1px solid rgba(95,202,127,.4);border-left:3px solid #5fca7f;border-radius:3px;background:rgba(95,202,127,.08);color:#bfe8cb;font-size:14px}
.login-gate{text-align:center;padding:30px 10px}
.login-gate p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:22px}
.login-gate small{color:var(--muted-2);font-size:13px}
.inq{border:1px solid var(--line-soft);border-radius:5px;margin:14px 20px;overflow:hidden;background:rgba(10,8,5,.4)}
.inq__head{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.inq__cat{font-family:var(--f-disp);font-size:10px;letter-spacing:.1em;color:var(--gold);border:1px solid var(--line);border-radius:3px;padding:3px 8px}
.inq__title{flex:1;color:var(--parch);font-weight:700;font-size:15px;font-family:var(--f-ko)}
.inq__st{font-family:var(--f-disp);font-size:10px;letter-spacing:.08em;padding:3px 9px;border-radius:3px}
.st-open{color:var(--ember-2);border:1px solid rgba(224,112,47,.4)}
.st-done{color:#5fca7f;border:1px solid rgba(95,202,127,.4)}
.inq__date{color:var(--muted-2);font-size:12px;font-family:var(--f-disp)}
.inq__body{padding:16px 18px;color:var(--muted);font-size:14px;line-height:1.75}
.inq__reply{margin:0 18px 18px;padding:15px 18px;border-left:3px solid var(--gold);background:rgba(224,112,47,.06);border-radius:3px;color:var(--parch);font-size:14px;line-height:1.75}
.inq__replyhead{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:13px;margin-bottom:8px}
.inq__replyhead small{color:var(--muted-2);font-weight:400;font-family:var(--f-disp);margin-left:4px}

/* ================= ADMIN PANEL ================= */
.admin-body{background:var(--ink);min-height:100vh}
.admin-logo{font-family:var(--f-dec);font-weight:900;font-size:22px;color:var(--gold-3);letter-spacing:.04em}
.admin-logo small{font-family:var(--f-disp);font-size:11px;letter-spacing:.3em;color:var(--ember-2);margin-left:6px}
.admin-login{min-height:100vh;display:grid;place-items:center;padding:20px}
.admin-login .ornate{width:100%;max-width:380px;padding:40px}
.admin-login h1{text-align:center;margin-bottom:26px}
.admin-top{display:flex;justify-content:space-between;align-items:center;padding:16px 30px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#140e07,var(--ink))}
.admin-top__r{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:14px}
.admin-top__r .btn{padding:8px 16px}
.admin-wrap{max-width:1080px;margin:0 auto;padding:34px 24px}
.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:14px}
.admin-head h2{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:22px}
.admin-filter{display:flex;gap:8px}
.admin-filter a{font-family:var(--f-ko);font-size:13px;color:var(--muted);padding:7px 15px;border:1px solid var(--line);border-radius:3px;transition:.2s}
.admin-filter a.on,.admin-filter a:hover{color:var(--gold-3);border-color:var(--gold)}
.admin-table{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.admin-table th{font-family:var(--f-disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:#0d0a06;padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)}
.admin-table td{padding:13px 14px;border-bottom:1px solid var(--line-soft);color:var(--parch);font-size:14px}
.admin-table tbody tr{cursor:pointer;transition:.15s}
.admin-table tbody tr:hover{background:rgba(224,112,47,.06)}
.admin-table td.t{color:var(--gold-3);font-weight:600;font-family:var(--f-ko)}
.st{font-family:var(--f-disp);font-size:10px;letter-spacing:.06em;padding:3px 9px;border-radius:3px;white-space:nowrap}
.admin-back{display:inline-block;color:var(--muted);font-size:14px;margin-bottom:18px}
.admin-back:hover{color:var(--gold-2)}
.admin-detail{padding:26px 28px}
.admin-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:14px}
.admin-meta b{color:var(--gold-3)}
.admin-cat{font-family:var(--f-disp);font-size:10px;letter-spacing:.1em;color:var(--gold);border:1px solid var(--line);border-radius:3px;padding:3px 8px}
.admin-date{color:var(--muted-2);font-family:var(--f-disp)}
.admin-title{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:21px;margin-bottom:16px}
.admin-content{color:var(--parch);font-size:15px;line-height:1.85;white-space:normal}
.admin-sub{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:16px;margin-bottom:14px}
.admin-prevreply{padding:15px 18px;border-left:3px solid var(--gold);background:rgba(224,112,47,.06);border-radius:3px;color:var(--parch);font-size:14px;line-height:1.75;margin-bottom:18px}
.admin-replymeta{color:var(--muted-2);font-size:12px;font-family:var(--f-disp);margin-top:10px}

/* ===== admin shell (sidebar layout) ===== */
.admin-top .admin-logo{text-decoration:none}
.admin-shell{display:flex;min-height:calc(100vh - 61px)}
.admin-side{width:210px;flex-shrink:0;border-right:1px solid var(--line);background:linear-gradient(180deg,#0d0a06,var(--ink));padding:20px 0}
.admin-side a{display:block;font-family:var(--f-ko);font-weight:700;font-size:14px;color:var(--muted);padding:13px 24px;border-left:3px solid transparent;transition:.18s}
.admin-side a:hover{color:var(--parch);background:rgba(224,112,47,.05)}
.admin-side a.on{color:var(--gold-3);border-left-color:var(--gold);background:linear-gradient(90deg,rgba(224,112,47,.1),transparent)}
.admin-main{flex:1;padding:30px 34px;max-width:960px}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:26px}
.stat-card{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border:1px solid var(--line);border-radius:5px;background:linear-gradient(180deg,rgba(26,20,12,.5),transparent);transition:.2s}
.stat-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.sc-n{font-family:var(--f-disp);font-size:30px;font-weight:700;color:var(--gold-3)}
.sc-l{font-family:var(--f-ko);font-size:13px;color:var(--muted)}
.admin-card{border:1px solid var(--line);border-radius:6px;background:rgba(10,8,5,.4);padding:24px 26px;margin-bottom:22px;overflow-x:auto}
.admin-card__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.admin-card__h h3{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:17px}
.admin-card__h a{font-family:var(--f-disp);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.admin-card__h a:hover{color:var(--gold-2)}
.admin-table .empty{text-align:center;padding:40px;color:var(--muted-2)}
/* 거래 로그 */
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.admin-search{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.admin-search input{background:rgba(10,8,6,.6);border:0;color:var(--parch);font-family:var(--f-ko);font-size:13px;padding:8px 13px;width:220px}
.admin-search button{background:none;border:0;border-left:1px solid var(--line);color:var(--gold-2);font-family:var(--f-ko);font-size:13px;padding:0 15px;cursor:pointer}
.admin-search button:hover{color:var(--gold-3)}
.admin-table--trade{table-layout:fixed;width:100%}
.admin-table--trade th,.admin-table--trade td{padding:10px 10px;font-size:13px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
.admin-table--trade .t{white-space:normal;word-break:keep-all}
.admin-table--trade .tl-date{font-family:var(--f-disp);color:var(--muted);white-space:nowrap}
.admin-table--trade .tl-ip{font-family:var(--f-disp);font-size:11px;color:var(--muted-2);word-break:break-all;white-space:normal}
/* 컬럼 폭 배분 */
.admin-table--trade th:nth-child(1){width:88px}   /* 일시 */
.admin-table--trade th:nth-child(2){width:78px}   /* 유형 */
.admin-table--trade th:nth-child(4){width:70px}   /* 수량 */
.admin-table--trade th:nth-child(5){width:118px}  /* 가격 */
.admin-table--trade th:nth-child(6),.admin-table--trade th:nth-child(7){width:100px} /* 구매/판매자 */
.admin-table--trade th:nth-child(8){width:120px}  /* IP */
.admin-table--trade td:nth-child(6),.admin-table--trade td:nth-child(7){word-break:break-all}
.admin-table--trade .tl-price{font-family:var(--f-disp);color:var(--gold-2);white-space:nowrap}
.tl-cur{font-style:normal;font-family:var(--f-ko);font-size:10px;padding:1px 6px;border-radius:3px;margin-left:3px}
.tl-cur--a{color:var(--gold-3);border:1px solid var(--gold-deep)}
.tl-cur--p{color:#7fb4ff;border:1px solid rgba(90,160,255,.4)}
.tl-dash{color:var(--muted-2)}
.tlog{display:inline-block;font-family:var(--f-ko);font-size:11px;font-weight:700;padding:3px 10px;border-radius:5px;border:1px solid currentColor;white-space:nowrap}
.tlog-sell{color:var(--gold-2)}
.tlog-buy{color:#7fcf98}
.tlog-cancel{color:#e0706f}
.admin-pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:6px;flex-wrap:wrap}
.admin-pager a{min-width:34px;text-align:center;padding:7px 11px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-family:var(--f-disp);font-size:13px;transition:.2s}
.admin-pager a:hover{color:var(--gold-3);border-color:var(--gold-deep)}
.admin-pager a.on{background:var(--gold-2);color:#140f08;border-color:var(--gold-2)}
.admin-pager__info{margin-left:12px;font-family:var(--f-ko);font-size:12px;color:var(--muted)}
/* 백업 */
.admin-flash{margin:0 0 18px;padding:12px 18px;border-radius:8px;font-family:var(--f-ko);font-size:14px;font-weight:700}
.admin-flash.ok{color:#8fe3a9;border:1px solid rgba(90,200,120,.4);background:rgba(90,200,120,.08)}
.admin-flash.err{color:#e8928f;border:1px solid rgba(220,90,80,.4);background:rgba(220,90,80,.08)}
.bk-meta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-bottom:16px;font-family:var(--f-ko);font-size:13px;color:var(--muted)}
.bk-meta b{color:var(--gold-3)}
.bk-note{margin-left:auto;font-size:12px;color:var(--muted-2)}
.bk-dl{font-family:var(--f-ko);font-size:13px;font-weight:700;color:var(--gold-2);border:1px solid var(--gold-deep);border-radius:6px;padding:6px 13px;transition:.2s}
.bk-dl:hover{color:var(--gold-3);border-color:var(--gold);background:rgba(224,112,47,.1)}
.bk-del{font-family:var(--f-ko);font-size:13px;font-weight:700;color:#e8928f;background:rgba(220,90,80,.08);border:1px solid rgba(220,90,80,.35);border-radius:6px;padding:6px 13px;cursor:pointer;margin-left:6px;transition:.2s}
.bk-del:hover{background:rgba(220,90,80,.18)}
.admin-form .form-row{display:flex;gap:16px;flex-wrap:wrap}
.admin-form .field{margin-bottom:16px}
.admin-form .form-actions{display:flex;gap:10px;margin-top:6px}
.admin-form .chk{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-family:var(--f-ko);margin-bottom:14px;cursor:pointer}
.admin-form .chk input{width:16px;height:16px;accent-color:var(--gold)}
.rowact{white-space:nowrap}
.rowact a{font-size:13px;color:var(--muted);margin-right:12px}
.rowact a:hover{color:var(--gold-2)}
.rowact a.del:hover{color:#e0706f}
.st-off{color:var(--muted-2);border:1px solid var(--line)}
.admin-table tbody tr:has(.rowact){cursor:default}
.admin-table tbody tr:has(.rowact):hover{background:transparent}

/* ===== modal popup ===== */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .22s var(--ease)}
.modal[hidden]{display:none}
.modal.open{opacity:1}
.modal__back{position:absolute;inset:0;background:rgba(4,3,2,.78);backdrop-filter:blur(3px)}
.modal__box{position:relative;width:100%;max-width:620px;max-height:84vh;overflow:hidden;padding:36px 40px;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#14100a,#0c0906);transform:translateY(16px) scale(.98);transition:transform .24s var(--ease)}
.modal.open .modal__box{transform:translateY(0) scale(1)}
.modal__x{position:absolute;top:16px;right:20px;background:none;border:0;color:var(--muted);font-size:30px;line-height:1;cursor:pointer;transition:.2s}
.modal__x:hover{color:var(--gold-2)}
.modal__meta{font-family:var(--f-disp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-2)}
.modal__title{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:23px;margin:10px 0 20px;line-height:1.3;padding-right:30px}
.modal__body{color:var(--parch);font-size:15px;line-height:1.85;white-space:normal;
  flex:1 1 auto;min-height:0;overflow-y:auto;margin-right:-16px;padding-right:16px}
.modal__body p{margin:0 0 6px}
.modal__body p:empty{margin:0;height:4px}
.modal__body img{max-width:100%;height:auto;border-radius:4px;margin:8px 0}
.modal__body a{color:var(--gold-2)}
.modal__body::before{content:"";display:block;width:60px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-bottom:20px}
.ev-more{display:inline-block;margin-top:14px;font-family:var(--f-disp);font-size:11px;letter-spacing:.12em;color:var(--gold-2)}

/* 가입 환영 토스트 */
.welcome-toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:120;max-width:92%;
  padding:14px 24px;border:1px solid var(--gold);border-radius:4px;background:linear-gradient(180deg,#241709,#140e07);
  color:var(--parch);font-family:var(--f-ko);font-size:14px;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 30px rgba(224,112,47,.25);
  animation:wtoast 7s ease forwards}
.welcome-toast b{color:var(--gold-3)}
.welcome-toast a{color:var(--gold-2);margin-left:6px;white-space:nowrap}
@keyframes wtoast{0%{opacity:0;transform:translate(-50%,-12px)}8%{opacity:1;transform:translate(-50%,0)}90%{opacity:1}100%{opacity:0;visibility:hidden}}

/* ===== 회원가입 ===== */
.reg-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch;max-width:1000px;margin:0 auto}
.reg-promo{position:relative;overflow:hidden;isolation:isolate;padding:44px 40px;display:flex;align-items:center}
.reg-promo__bg{position:absolute;inset:0;z-index:-1}
.reg-promo__bg video{width:100%;height:100%;object-fit:cover;opacity:.4}
.reg-promo__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,5,.6),rgba(8,6,4,.9))}
.reg-promo__in h2{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:30px;line-height:1.25;margin:14px 0 14px}
.reg-promo__in>p{color:var(--parch);font-size:14.5px;line-height:1.8;margin-bottom:26px}
.reg-promo__in>p b{color:var(--gold-2)}
.reg-benes{list-style:none;display:flex;flex-direction:column;gap:16px}
.reg-benes li{display:flex;gap:14px;align-items:flex-start}
.reg-benes i{font-style:normal;font-size:19px;width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;
  background:radial-gradient(circle at 50% 30%,rgba(224,112,47,.2),rgba(20,16,10,.6));border:1px solid var(--line)}
.reg-benes b{display:block;font-family:var(--f-ko);font-weight:700;color:var(--gold-3);font-size:14.5px}
.reg-benes span{color:var(--muted);font-size:13px}
.reg-form{padding:40px}
.reg-form__t{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:22px}
.reg-form__s{color:var(--muted);font-size:13px;margin:6px 0 22px}
.agree-box{border:1px solid var(--line-soft);border-radius:4px;padding:14px 16px;margin:6px 0 18px;background:rgba(8,6,4,.4)}
.agree{display:flex;align-items:flex-start;gap:10px;padding:7px 0;cursor:pointer;color:var(--muted);font-size:13.5px;line-height:1.5}
.agree input{width:18px;height:18px;margin-top:1px;accent-color:var(--gold);flex-shrink:0;cursor:pointer}
.agree a{color:var(--gold-2)}
.agree em{font-style:normal;color:var(--ember-2);font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
@media(max-width:820px){ .reg-grid{grid-template-columns:1fr} .reg-promo{display:none} }

/* footer 법적 고지 링크 */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;margin-top:20px}
.foot__bar .foot-legal{margin-top:0}
.foot-legal a{color:var(--muted);font-size:12.5px;font-family:var(--f-ko);position:relative;transition:.2s}
.foot-legal a:hover{color:var(--gold-2)}
.foot-legal a:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--line)}
/* 법적 문서 모달 본문 */
.legal{font-size:13.5px;line-height:1.85;color:var(--parch)}
.legal-lead{color:var(--gold-2);font-family:var(--f-ko);font-weight:700;font-size:15px;margin-bottom:14px}
.legal-h{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:15px;margin:22px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.legal p{margin:0 0 12px;color:var(--muted)}
.legal p b{color:var(--parch)}
.legal-foot{margin-top:18px;color:var(--muted-2);font-size:12.5px}

/* ===== board (notice/update) top + pagination ===== */
.board-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.board-tabs{display:flex;gap:8px;flex-wrap:wrap}
.board-tab{font-family:var(--f-ko);font-weight:700;font-size:14px;color:var(--muted);padding:9px 20px;border:1px solid var(--line);border-radius:3px;transition:.25s;background:linear-gradient(180deg,rgba(26,20,12,.5),transparent)}
.board-tab:hover,.board-tab.on{color:var(--gold-3);border-color:var(--gold);box-shadow:0 0 16px rgba(224,112,47,.16) inset}
.board-title{font-family:var(--f-ko);font-weight:800;color:var(--gold-3);font-size:19px}
.board-search{display:flex;align-items:center;border:1px solid var(--line);border-radius:3px;background:rgba(8,6,4,.7);overflow:hidden}
.board-search input{background:none;border:0;color:var(--parch);font-family:var(--f-body);font-size:14px;padding:11px 15px;width:220px;outline:none}
.board-search input::placeholder{color:var(--muted-2)}
.board-search button{background:none;border:0;border-left:1px solid var(--line);color:var(--gold);font-size:15px;padding:0 15px;align-self:stretch;cursor:pointer;transition:.2s}
.board-search button:hover{background:rgba(224,112,47,.1)}
.board .notice-list li{padding:17px 28px}
.board-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:22px}
.board-count{color:var(--muted);font-size:13px;font-family:var(--f-ko)}
.pager{display:flex;gap:6px;align-items:center;margin-left:auto}
.pager a,.pager .gap{min-width:36px;height:36px;display:grid;place-items:center;font-family:var(--f-disp);font-size:14px;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;transition:.2s;padding:0 6px}
.pager a:hover{color:var(--gold-3);border-color:var(--gold)}
.pager a.on{color:#1a0d04;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:var(--gold);font-weight:700}
.pager a.nav{color:var(--gold)}
.pager .gap{border:0}

/* ranking class portrait */
.rk-cls{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--gold-deep);box-shadow:0 1px 4px rgba(0,0,0,.5);display:block}
.rk-clsx{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2a2012,#141009);border:1px solid var(--line);color:var(--gold);font-family:var(--f-ko);font-size:13px}
.rk-clsname{font-family:var(--f-ko);font-size:12px;color:var(--muted);font-weight:400;margin-left:4px}
.rank-table tr.top .rk-cls{border-color:var(--gold-2);box-shadow:0 0 10px var(--ember-glow)}

/* home ranking: portrait + server toggle */
.rk .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.rk-tabs{display:inline-flex;gap:4px;background:rgba(8,6,4,.6);border:1px solid var(--line);border-radius:4px;padding:3px}
.rk-tab{font-family:var(--f-ko);font-weight:700;font-size:12.5px;color:var(--muted);padding:6px 14px;border:0;background:none;border-radius:3px;cursor:pointer;transition:.2s}
.rk-tab.on{color:#1a0d04;background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.rk-tab:not(.on):hover{color:var(--gold-3)}
.rk-empty{justify-content:center;color:var(--muted);padding:40px 0}
.me{cursor:pointer}
.me:hover b{color:#fff5df}

/* support: 문의자 */
.inq-asker{padding:12px 15px;margin-bottom:18px;border:1px solid var(--line-soft);border-left:3px solid var(--gold-2);border-radius:3px;
  background:rgba(224,112,47,.05);color:var(--muted);font-size:13.5px}
.inq-asker b{color:var(--gold-3);font-family:var(--f-ko)}
.inq-asker small{color:var(--muted-2)}
.inq-asker a{color:var(--gold-2)}

/* ===== MYPAGE ===== */
.my-summary{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 28px}
.my-id{display:flex;align-items:center;gap:16px}
.my-ava{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-size:22px;color:var(--gold-3);
  background:linear-gradient(135deg,#2a2012,#141009);border:1px solid var(--gold-deep)}
.my-acc{font-family:var(--f-ko);font-weight:800;font-size:20px;color:var(--gold-3)}
.my-sub{color:var(--muted);font-size:13px;margin-top:3px}
.my-rep{text-align:right}
.my-rep__lbl{display:block;font-family:var(--f-disp);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.my-rep__val b{font-family:var(--f-ko);font-size:17px;color:var(--gold-3)}
.my-rep__val small{color:var(--muted);font-size:12px;margin-left:5px}
.my-rep__none{color:var(--muted-2);font-size:14px}
.my-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.my-col{padding:0 0 10px}
.my-col .panel-head{padding:18px 22px}
.my-empty{text-align:center;color:var(--muted-2);padding:40px 0;font-size:14px}
.char-list{list-style:none}
.char-list li{display:flex;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid var(--line-soft);transition:.2s}
.char-list li:last-child{border-bottom:0}
.char-list li.is-rep{background:linear-gradient(90deg,rgba(224,112,47,.1),transparent)}
.char-ico{width:42px;height:42px;border-radius:50%;flex-shrink:0;overflow:hidden;border:1px solid var(--gold-deep);
  background:linear-gradient(135deg,#2a2012,#141009);display:grid;place-items:center}
.char-ico img{width:100%;height:100%;object-fit:cover}
.char-ico em{font-style:normal;color:var(--gold);font-family:var(--f-ko);font-size:14px}
.char-info{flex:1;min-width:0}
.char-name{font-family:var(--f-ko);font-weight:700;color:var(--parch);font-size:15px}
.char-name small{color:var(--muted-2);font-weight:400;font-size:12px}
.char-meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.char-set{font-family:var(--f-ko);font-size:12px;color:var(--gold-2);background:none;border:1px solid var(--gold-deep);border-radius:3px;padding:7px 13px;cursor:pointer;transition:.2s;white-space:nowrap}
.char-set:hover{color:var(--gold-3);border-color:var(--gold);background:rgba(224,112,47,.08)}
.char-rep{font-family:var(--f-disp);font-size:10px;letter-spacing:.08em;color:#1a0d04;background:linear-gradient(180deg,var(--gold-2),var(--gold));padding:5px 11px;border-radius:3px;white-space:nowrap}
.my-links{display:flex;gap:12px;justify-content:center;margin-top:30px}
.my-pw{margin-top:22px;padding-bottom:6px}
.my-pw .panel-head{padding:18px 22px}
.my-pw__form{padding:6px 22px 20px;max-width:560px}
.my-pw__form .btn{margin-top:4px}
.form-row2{display:flex;gap:16px}
.form-row2 .field{flex:1}
@media(max-width:860px){ .my-cols{grid-template-columns:1fr} }
@media(max-width:620px){ .form-row2{flex-direction:column;gap:0} }

/* realm season-transfer note */
.realm__note{margin-top:14px;padding:12px 15px;border:1px solid var(--line-soft);border-left:3px solid var(--gold-2);border-radius:3px;
  background:rgba(224,112,47,.05);color:var(--parch);font-size:13.5px;line-height:1.7}
.realm__note b{color:var(--gold-2)}
.realm__badge{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--f-disp);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.realm__badge::before{content:"";width:18px;height:1px;background:var(--gold)}

/* ================= reveal animation ================= */
.reveal{opacity:0;transform:translateY(34px);transition:1s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}
[data-d="4"]{transition-delay:.32s}[data-d="5"]{transition-delay:.4s}
.hero h1,.hero__ko,.hero__sub,.hero__cta,.hero__crest{opacity:0;animation:rise 1.1s var(--ease) forwards}
.hero__crest{animation-delay:.1s}.hero h1{animation-delay:.28s}.hero__ko{animation-delay:.46s}
.hero__sub{animation-delay:.62s}.hero__cta{animation-delay:.78s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* ================= responsive ================= */
@media(max-width:920px){
  .gnb{display:none}
  .head-cta .btn{display:none}
  .burger{display:flex}
}
@media(max-width:900px){
  .realms,.feats,.grid-2,.dl-hero,.steps,.foot__top{grid-template-columns:1fr}
  .feats{gap:16px}
  .sec{padding:72px 0}
  .status-strip .wrap{gap:4px}.stat{flex:1 1 40%;border-right:0}
}
.mnav{position:fixed;inset:0;z-index:60;background:rgba(7,5,3,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:.4s}
.mnav.open{opacity:1;pointer-events:auto}
.mnav a{font-family:var(--f-ko);font-weight:800;font-size:24px;color:var(--parch);padding:12px}
.mnav .x{position:absolute;top:24px;right:28px;font-size:30px;color:var(--gold);background:none;border:0;cursor:pointer}

/* ================= LIVE TICKER (replaces hosting-style stats) ================= */
.ticker{position:relative;z-index:3;display:flex;align-items:stretch;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,12,8,.86),rgba(9,7,4,.86));backdrop-filter:blur(8px)}
.ticker__live{display:flex;align-items:center;gap:12px;padding:16px 26px;white-space:nowrap;
  border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(224,112,47,.1),transparent)}
.ticker__live .dot{width:9px;height:9px;border-radius:50%;background:#57f287;box-shadow:0 0 12px #57f287;animation:pulse 1.6s infinite}
.ticker__live b{font-family:var(--f-disp);font-size:22px;color:var(--gold-3);margin:0 2px}
.ticker__live span{font-family:var(--f-ko);color:var(--muted);font-size:13px;letter-spacing:.05em}
.ticker__view{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__move{display:flex;align-items:center;gap:52px;white-space:nowrap;padding:16px 40px;width:max-content;animation:tick 34s linear infinite}
.ticker:hover .ticker__move{animation-play-state:paused}
.ticker__move span{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-ko);font-size:14px;color:var(--parch)}
.ticker__move i{font-style:normal;font-family:var(--f-disp);font-size:10px;letter-spacing:.14em;padding:3px 9px;border:1px solid var(--line);border-radius:3px;color:var(--gold)}
.ticker__move i.ev{color:var(--ember-2);border-color:rgba(224,112,47,.45)}
.ticker__move em{color:var(--gold-deep);font-style:normal}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* animated gold shimmer sweep on section titles */
.section-title{position:relative;background:linear-gradient(100deg,var(--gold-3) 20%,#fff7e0 46%,var(--gold) 52%,var(--gold-3) 70%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}

/* floating idle motion for realm cards art */
@keyframes floaty{50%{transform:translateY(-6px)}}

@media(max-width:700px){
  .ticker{flex-direction:column}
  .ticker__live{border-right:0;border-bottom:1px solid var(--line);justify-content:center}
}

/* ================= GAME-DB PAGES ================= */
.grade{display:inline-block;font-family:var(--f-disp);font-size:10px;letter-spacing:.08em;padding:2px 8px;border:1px solid currentColor;border-radius:3px}
.g-common{color:#9aa0a6}.g-fine{color:#5fca7f}.g-rare{color:#5aa0ff}.g-hero{color:#b483ff}.g-legend{color:var(--ember-2)}

/* 2-level browser (대분류 → 소분류) */
.browser .lv1-tabs{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:0 0 16px}
.browser .lv1{font-family:var(--f-ko);font-weight:800;font-size:14px;padding:11px 23px;border:1px solid var(--line);border-radius:3px;
  color:var(--muted);cursor:pointer;background:linear-gradient(180deg,rgba(26,20,12,.6),transparent);transition:.3s;position:relative}
.browser .lv1.on,.browser .lv1:hover{color:var(--gold-3);border-color:var(--gold);box-shadow:0 0 18px rgba(224,112,47,.18) inset}
.browser .lv1.on::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%) rotate(45deg);
  width:9px;height:9px;background:var(--gold);box-shadow:0 0 8px var(--ember-glow)}
.subtabs{display:none;flex-wrap:wrap;gap:7px 6px;justify-content:center;margin:0 auto 34px;max-width:860px;
  padding:15px 18px;border:1px solid var(--line-soft);border-radius:4px;background:rgba(13,10,6,.45)}
.subtabs.on{display:flex}
.subtab{font-family:var(--f-ko);font-size:12.5px;color:var(--muted);padding:6px 15px;border:1px solid transparent;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap}
.subtab:hover{color:var(--parch)}
.subtab.on{color:var(--gold-3);border-color:var(--gold-deep);background:linear-gradient(180deg,rgba(224,112,47,.12),transparent)}
.browser-empty{grid-column:1/-1;text-align:center;color:var(--muted-2);font-size:14px;padding:54px 0;font-family:var(--f-ko);border:1px dashed var(--line-soft);border-radius:6px}
.cards.loading{opacity:.45;transition:opacity .15s;pointer-events:none}
.bosstag{font-family:var(--f-disp);font-size:9px;letter-spacing:.12em;color:#1a0d04;background:linear-gradient(180deg,var(--ember-2),var(--ember));padding:2px 7px;border-radius:3px;flex-shrink:0}
/* 착용/사용 직업 포트레이트 */
.cls-row b{display:flex;gap:4px;justify-content:flex-end}
.cls-ico{display:inline-flex;gap:4px}
.cls-ico img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--gold-deep);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.cls-all{font-family:var(--f-disp);font-size:10px;letter-spacing:.08em;color:var(--gold-2);border:1px solid var(--gold-deep);border-radius:3px;padding:2px 7px}
/* 몬스터 드랍 */
.drops{margin-top:13px;padding-top:12px;border-top:1px dashed var(--line-soft)}
.drops__lbl{display:block;font-family:var(--f-disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.drops__list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dchip{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;
  background:radial-gradient(circle at 50% 30%,rgba(224,112,47,.12),rgba(16,12,8,.7));cursor:help;transition:.2s}
.dchip:hover{border-color:var(--gold);transform:translateY(-2px)}
.dchip img{max-width:26px;max-height:26px}
.dchip em{font-style:normal;font-family:var(--f-ko);font-size:10px;color:var(--muted)}
.dchip.d-gold{border-color:var(--gold-2);box-shadow:0 0 10px rgba(231,200,121,.25) inset}
.dchip.d-red{border-color:#c0504d;box-shadow:0 0 10px rgba(192,80,77,.25) inset}
.dmore{font-family:var(--f-disp);font-size:12px;color:var(--muted);padding:0 4px}
.dchip--more{display:none}
.drops__list.show-all .dchip--more{display:grid}
.dmore-btn{font-family:var(--f-ko);font-size:11px;font-weight:700;color:var(--gold-2);background:rgba(224,112,47,.08);
  border:1px solid var(--gold-deep);border-radius:7px;height:34px;padding:0 11px;cursor:pointer;transition:.2s;white-space:nowrap}
.dmore-btn:hover{color:var(--gold-3);border-color:var(--gold);background:rgba(224,112,47,.14)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:18px}
.card{padding:22px 20px;position:relative;transition:.3s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card__ico{width:54px;height:54px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;font-size:24px;
  background:radial-gradient(circle at 50% 30%,rgba(224,112,47,.2),rgba(20,16,10,.6));border:1px solid var(--line)}
.card__ico img{max-width:40px;max-height:40px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.ic-sm{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;
  background:radial-gradient(circle at 50% 30%,rgba(224,112,47,.14),rgba(18,14,9,.7))}
.ic-sm img{max-width:32px;max-height:32px}
.card h3{font-family:var(--f-ko);font-weight:800;font-size:17px;color:var(--gold-3);display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .meta{margin-top:13px;display:flex;flex-direction:column;gap:0}
.card .meta div{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);border-bottom:1px dashed var(--line-soft);padding:7px 0}
.card .meta div:last-child{border-bottom:0}
.card .meta b{color:var(--parch);font-family:var(--f-disp)}
.card .desc{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.65}
.opts{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px}
.opt{font-family:var(--f-ko);font-size:11px;font-weight:700;color:var(--gold-3);
  padding:3px 8px;border:1px solid var(--gold-deep);border-radius:5px;background:rgba(224,112,47,.07);white-space:nowrap}

/* 아이템거래 카드 — 아이콘 왼쪽 + 이름/뱃지 오른쪽 */
.trade-cards .tc-head{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.trade-cards .card__ico{margin-bottom:0;flex-shrink:0;width:60px;height:60px}
.trade-cards .card__ico img{max-width:44px;max-height:44px}
.tc-head__txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.trade-cards .card h3{display:block;width:100%;font-size:16px}
.tc-name{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-en{color:var(--ember-2);font-family:var(--f-disp);margin-right:3px}
.bless{display:inline-block;font-family:var(--f-ko);font-size:10px;padding:2px 7px;border:1px solid currentColor;border-radius:3px;font-weight:700;flex-shrink:0;white-space:nowrap}
.bl-bless{color:var(--gold-2)}
.bl-normal{color:#e5e5e5}
.bl-curse{color:#e0706f}
.tc-qty{font-family:var(--f-disp);font-size:12px;color:var(--muted);font-weight:400}
.tc-price{display:inline-flex;align-items:center;gap:6px;color:var(--gold-2)!important;font-size:14px}
.tc-cur{font-style:normal;font-family:var(--f-ko);font-size:10px;padding:2px 7px;border-radius:3px;font-weight:700}
.tc-cur--adena{color:var(--gold-3);border:1px solid var(--gold-deep);background:rgba(224,112,47,.08)}
.tc-cur--point{color:#7fb4ff;border:1px solid rgba(90,160,255,.4);background:rgba(90,160,255,.08)}

/* 거래 쓰기 UI */
.view-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.view-tab{font-family:var(--f-ko);font-weight:700;font-size:14px;color:var(--muted);
  padding:11px 24px;border:1px solid var(--line);border-radius:9px;background:rgba(18,14,9,.4);transition:.2s}
.view-tab:hover{color:var(--gold-3);border-color:var(--gold-deep)}
.view-tab.on{color:#140f08;background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));border-color:var(--gold-2)}
.trade-flash{margin:0 0 20px;padding:13px 18px;border-radius:9px;font-family:var(--f-ko);font-size:14px;font-weight:700}
.trade-flash.is-ok{color:#8fe3a9;border:1px solid rgba(90,200,120,.4);background:rgba(90,200,120,.08)}
.trade-flash.is-err{color:#e8928f;border:1px solid rgba(220,90,80,.4);background:rgba(220,90,80,.08)}
.trade-me{margin:0 0 26px;display:flex;flex-direction:column;gap:12px}
.trade-me__bal{display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:15px 20px;border:1px solid var(--line);border-radius:11px;
  background:linear-gradient(180deg,rgba(224,112,47,.05),rgba(16,13,9,.4))}
.tmb{display:flex;flex-direction:column;gap:6px;align-items:center}
.tmb em{font-style:normal;font-family:var(--f-ko);font-size:11px;color:var(--muted)}
.tmb b{font-family:var(--f-disp);font-size:20px;display:block;text-align:center;padding:6px 20px;border-radius:8px;min-width:160px}
.tmb-note{margin-left:auto;font-family:var(--f-ko);font-size:12px;color:var(--muted);max-width:360px}
.trade-panel{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:rgba(18,14,9,.4)}
.trade-panel>summary{cursor:pointer;list-style:none;padding:14px 20px;font-family:var(--f-ko);font-weight:800;color:var(--gold-3);
  display:flex;align-items:center;gap:10px;user-select:none}
.trade-panel>summary::-webkit-details-marker{display:none}
.trade-panel>summary::before{content:'▸';color:var(--gold-2);transition:.2s}
.trade-panel[open]>summary::before{transform:rotate(90deg)}
.tp-cnt{font-family:var(--f-disp);font-size:12px;color:var(--parch);background:rgba(224,112,47,.12);border:1px solid var(--gold-deep);border-radius:20px;padding:1px 9px}
.tp-body{padding:4px 20px 20px}
.sell-form{display:flex;flex-direction:column;gap:12px}
.sell-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sell-row--3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sell-form input{width:100%;background:rgba(10,8,6,.7);border:1px solid var(--line);border-radius:8px;
  color:var(--parch);font-family:var(--f-ko);font-size:14px;padding:11px 13px}
.sell-row--2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sf-field{display:flex;flex-direction:column;gap:5px;font-family:var(--f-ko);font-size:12px;color:var(--muted)}
/* 직접 만든 아이템 선택 목록(네이티브 드롭다운 대신 — 한글 렌더 확실) */
/* 약 10개까지 보이고 그 이후 세로 스크롤 */
.sell-picker{display:flex;flex-direction:column;gap:5px;max-height:515px;overflow-y:auto;
  border:1px solid var(--line);border-radius:9px;padding:8px;background:rgba(10,8,6,.5)}
.sell-picker::-webkit-scrollbar{width:9px}
.sell-picker::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:5px}
.sell-picker::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
.sell-pick{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid transparent;border-radius:7px;cursor:pointer;transition:.15s}
.sell-pick:hover{background:rgba(224,112,47,.06)}
.sell-pick.on{border-color:var(--gold-deep);background:rgba(224,112,47,.1)}
.sell-pick input{accent-color:var(--gold-2);flex-shrink:0;width:16px;height:16px;margin:0}
.sp-ico{width:30px;height:30px;display:grid;place-items:center;flex-shrink:0}
.sp-ico img{max-width:28px;max-height:28px}
.sp-nm{flex:1;min-width:0;font-family:var(--f-ko);font-size:14px;color:var(--parch);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sp-ct{font-family:var(--f-disp);font-size:13px;color:var(--muted);white-space:nowrap}
.sell-cur{align-items:center;gap:16px}
.sf-lbl{font-family:var(--f-ko);font-size:13px;color:var(--muted)}
.cur-radios{display:flex;gap:16px;align-items:center}
.cur-radios label{display:flex;align-items:center;gap:6px;font-family:var(--f-ko);font-size:14px;color:var(--parch);cursor:pointer}
.cur-radios input{accent-color:var(--gold-2);width:16px;height:16px;margin:0}
.sell-fee{font-family:var(--f-ko);font-size:12px;color:var(--muted)}
.btn--gold{background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));color:#140f08;border:0;border-radius:8px;
  font-family:var(--f-ko);font-weight:800;font-size:14px;padding:11px 26px;cursor:pointer;transition:.2s;white-space:nowrap;justify-content:center}
.btn--gold:hover{filter:brightness(1.1)}
.btn--buy{width:100%;margin-top:12px;padding:9px;justify-content:center}
.tc-own{margin-top:12px;text-align:center;font-family:var(--f-ko);font-size:12px;font-weight:700;color:var(--muted);
  border:1px dashed var(--line);border-radius:8px;padding:8px}
.mylist{display:flex;flex-direction:column}
.mylist__row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line-soft)}
.mylist__row:last-child{border-bottom:0}
.mylist__row img{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.mylist__nm{flex:1;min-width:0;font-family:var(--f-ko);font-size:14px;color:var(--parch);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mylist__nm small{color:var(--muted);font-family:var(--f-disp)}
.mylist__pr{font-family:var(--f-disp);color:var(--gold-2);white-space:nowrap}
.btn-cancel{background:rgba(220,90,80,.1);border:1px solid rgba(220,90,80,.4);color:#e8928f;border-radius:7px;
  font-family:var(--f-ko);font-weight:700;font-size:13px;padding:7px 14px;cursor:pointer;transition:.2s}
.btn-cancel:hover{background:rgba(220,90,80,.2)}

.trade-list{list-style:none}
.trade-list li{display:flex;align-items:center;gap:16px;padding:15px 24px;border-bottom:1px solid var(--line-soft);transition:.2s}
.trade-list li:hover{background:rgba(224,112,47,.06)}
.trade-list .ti{flex:1;color:var(--parch);font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px}
.trade-list .pr{font-family:var(--f-disp);color:var(--gold-2);font-weight:700;font-size:16px;white-space:nowrap}
.trade-list .sl{color:var(--muted);font-size:13px;width:110px;text-align:right}
.trade-list .tm{color:var(--muted-2);font-size:12px;width:78px;text-align:right}

.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
.ev-card{padding:26px;position:relative}
.ev-status{position:absolute;top:18px;right:18px;font-family:var(--f-disp);font-size:10px;letter-spacing:.1em;padding:3px 10px;border-radius:3px;border:1px solid currentColor}
.ev-on{color:#5fca7f}.ev-soon{color:var(--gold-2)}.ev-end{color:var(--muted-2)}
.ev-card h3{font-family:var(--f-ko);font-weight:800;font-size:20px;color:var(--gold-3);padding-right:76px}
.ev-card .period{font-family:var(--f-disp);font-size:12px;color:var(--ember-2);margin:6px 0 12px}
.ev-card p{color:var(--muted);font-size:14px}

.faq details{border:1px solid var(--line);border-radius:4px;margin-bottom:12px;background:linear-gradient(180deg,rgba(26,20,12,.5),transparent);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--f-ko);font-weight:700;color:var(--parch);display:flex;justify-content:space-between;align-items:center;transition:.2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-disp);color:var(--gold);font-size:22px;line-height:1;transition:.3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold-3)}
.faq .q{display:flex;gap:11px;align-items:center}
.faq .q i{font-style:normal;font-family:var(--f-dec);color:var(--gold-deep);font-weight:900;font-size:17px}
.faq .a{padding:0 22px 20px 50px;color:var(--muted);font-size:14px;line-height:1.85}
.respawn{color:var(--ember-2);font-family:var(--f-disp);font-weight:700}
.support-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:26px;align-items:start}
@media(max-width:860px){ .support-grid,.dl-hero,.grid-2{grid-template-columns:1fr} }