/* ================================================================
   style.css — Hunters  /  SF · 다종족 · 헌터물
   BLACK × WHITE × ELECTRIC BLUE
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;500;600;700&family=Barlow:wght@300;400;500;600&family=Noto+Sans+KR:wght@300;400;500;700&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ━ 다크 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
    --bg:#04060b; --bg1:#080c14; --bg2:#0c1220; --bg3:#101828; --bg4:#172035;
    --bg-glass:rgba(4,6,11,0.94);
    --line:rgba(45,139,255,0.08); --line-mid:rgba(45,139,255,0.16); --line-hi:rgba(45,139,255,0.30);
    --text:#e8eeff; --text-sub:#6878a0; --text-dim:#2e3a52;
    --accent:#1e7fff; --accent-rgb:30,127,255; --accent-bright:#4da6ff; --accent2:#00d4ff;
    --red:#ff3355; --green:#00f5a0; --gold:#ffd166;
    --muted-acc:rgba(30,127,255,0.08); --muted-acc2:rgba(30,127,255,0.04);
    --font-head:'Bebas Neue','Noto Sans KR',sans-serif;
    --font-cond:'Barlow Condensed','Noto Sans KR',sans-serif;
    --font-ui:'Barlow','Noto Sans KR',sans-serif;
    --font-body:'Noto Sans KR',sans-serif;
    --font-mono:'DM Mono',monospace;
    --r:6px; --r-lg:10px; --r-xl:16px;
    --trans:0.12s ease; --trans2:0.22s ease;
    --topbar-h:52px; --sidebar-w:256px;
    --shadow-sm:0 2px 12px rgba(0,0,0,0.7); --shadow-md:0 8px 32px rgba(0,0,0,0.8); --shadow-lg:0 20px 64px rgba(0,0,0,0.9);
    --glow-acc:0 0 20px rgba(30,127,255,0.25); --glow-sm:0 0 8px rgba(30,127,255,0.18);
}
/* ━ 라이트 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="light"] {
    --bg:#ffffff; --bg1:#f4f7ff; --bg2:#e8edf8; --bg3:#dae1f2; --bg4:#c8d3ec;
    --bg-glass:rgba(255,255,255,0.94);
    --line:rgba(10,40,120,0.08); --line-mid:rgba(10,40,120,0.14); --line-hi:rgba(10,40,120,0.26);
    --text:#040c20; --text-sub:#2a3d6a; --text-dim:#8898c0;
    --accent:#0055e5; --accent-rgb:0,85,229; --accent-bright:#1a6fff; --accent2:#0099cc;
    --red:#cc0030; --green:#007a50; --gold:#b58900;
    --muted-acc:rgba(0,85,229,0.07); --muted-acc2:rgba(0,85,229,0.03);
    --shadow-sm:0 1px 6px rgba(0,0,0,0.07); --shadow-md:0 4px 20px rgba(0,0,0,0.09); --shadow-lg:0 12px 48px rgba(0,0,0,0.11);
    --glow-acc:0 0 0 rgba(0,85,229,0); --glow-sm:0 0 0 rgba(0,85,229,0);
}
/* ━ 폰트/사이즈 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-font="noto-sans"]    { --font-body:'Noto Sans KR',sans-serif;       --font-ui:'Noto Sans KR',sans-serif; }
[data-font="noto-serif"]   { --font-body:'Noto Serif KR',serif;           --font-ui:'Noto Serif KR',serif; }
[data-font="ibm-plex"]     { --font-body:'IBM Plex Sans KR',sans-serif;   --font-ui:'IBM Plex Sans KR',sans-serif; }
[data-font="nanum-round"]  { --font-body:'Nanum Square Round',sans-serif; --font-ui:'Nanum Square Round',sans-serif; }
[data-font="do-hyeon"]     { --font-body:'Do Hyeon',sans-serif;           --font-ui:'Do Hyeon',sans-serif; }
[data-font="black-han"]    { --font-body:'Black Han Sans',sans-serif;     --font-ui:'Black Han Sans',sans-serif; }
[data-font="gowun-dodum"]  { --font-body:'Gowun Dodum',sans-serif;        --font-ui:'Gowun Dodum',sans-serif; }
/* 구버전 호환 */
[data-font="nanum-gothic"] { --font-body:'Noto Sans KR',sans-serif;       --font-ui:'Noto Sans KR',sans-serif; }
[data-font="nanum-myeong"] { --font-body:'Noto Serif KR',serif;           --font-ui:'Noto Serif KR',serif; }
[data-font="gothic"]       { --font-body:'Noto Sans KR',sans-serif;       --font-ui:'Noto Sans KR',sans-serif; }
[data-font="serif"]        { --font-body:'Noto Serif KR',serif;           --font-ui:'Noto Serif KR',serif; }
[data-font="sans"]         { --font-body:'Noto Sans KR',sans-serif; }
[data-font="mono"]         { --font-body:'DM Mono',monospace; }
[data-fontsize="sm"] { font-size:13px; } [data-fontsize="md"] { font-size:15px; }
[data-fontsize="lg"] { font-size:17px; } [data-fontsize="xl"] { font-size:19px; }

/* ━ 리셋 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:15px; font-weight:400; line-height:1.75; min-height:100vh; transition:background var(--trans2),color var(--trans2); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font-ui); cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select { font-family:var(--font-body); color:var(--text); }
img { display:block; max-width:100%; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(var(--accent-rgb),.4); }

/* ━ 레이아웃 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#app { display:grid; grid-template-rows:var(--topbar-h) 1fr; height:100vh; overflow:hidden; }
html[data-tabpos="bottom"] #app    { grid-template-rows:1fr var(--topbar-h); }
html[data-tabpos="bottom"] #topbar { order:2; border-top:1px solid var(--line-mid); border-bottom:none; top:auto; bottom:0; position:sticky; }
html[data-tabpos="bottom"] #main   { order:1; }
html[data-tabpos="side"] #topbar   { display:none !important; }
html[data-tabpos="side"] #app      { grid-template-rows:1fr; }
html[data-tabpos="side"] #main     { grid-row:1; min-height:100vh; }

/* ════════════════════════════════════════════════
   사이트 전역 배경 레이어 (모든 탭 공통)
════════════════════════════════════════════════ */
#site-bg-layer { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#site-bg-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.45; }
/* 격자 */
#site-bg-layer::before { content:''; position:absolute; inset:0; }
.site-bg-grain {
    display:none;
}
[data-theme="light"] .site-bg-grain { display:none; }

/* 사이트 전역 거친 스크래치 레이어 (제거됨) */
.site-bg-scratch {
    display:none;
}
[data-theme="light"] .site-bg-scratch { display:none; }

.site-bg-vignette { display:none; }

/* 콘텐츠 컨테이너를 배경 위로 + 자체 배경 투명화 */
#topbar, #sidebar, #btn-sidebar-open, #btn-hamburger { position:relative; z-index:300; }
#main { position:relative; z-index:1; background:transparent; }
.page { background:transparent; }

/* ━ 탑바 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#topbar {
    display:flex; align-items:center; padding:0 16px;
    border-bottom:1px solid var(--line-mid); background:var(--bg);
    backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
    position:sticky; top:0; z-index:300; height:var(--topbar-h); gap:6px;
    box-shadow:0 1px 0 var(--line-mid),0 2px 24px rgba(0,0,0,0.6);
}
#topbar::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 0%,var(--accent) 40%,var(--accent2) 60%,transparent 100%); opacity:.45; }
.topbar-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.topbar-logo { font-family:var(--font-head); font-size:1.5rem; letter-spacing:.18em; color:var(--text); cursor:pointer; line-height:1; user-select:none; position:relative; }
.topbar-logo::before { content:''; position:absolute; left:-8px; top:15%; bottom:15%; width:2px; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.topbar-nav { display:flex; align-items:center; gap:1px; flex:1; justify-content:center; overflow-x:auto; scrollbar-width:none; }
.topbar-nav::-webkit-scrollbar { display:none; }
.topbar-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:5px 9px; border-radius:var(--r); color:var(--text-dim); transition:var(--trans); border:1px solid transparent; min-width:42px; position:relative; }
.topbar-nav a i { font-size:19px; line-height:1; }
.topbar-nav a .nav-label { display:none; }
.topbar-nav a:hover { color:var(--text-sub); background:rgba(var(--accent-rgb),.06); }
.topbar-nav a.active { color:var(--accent-bright); background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.22); }
.topbar-nav a.active::after { content:''; position:absolute; bottom:-1px; left:20%; right:20%; height:2px; background:var(--accent); box-shadow:0 0 6px var(--accent); border-radius:1px; }
.topbar-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; }
.theme-toggle-btn { display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:var(--r); border:1px solid var(--line-mid); color:var(--text-sub); font-family:var(--font-cond); font-size:.82rem; font-weight:500; letter-spacing:.04em; cursor:pointer; transition:var(--trans); background:none; }
.theme-toggle-btn:hover { color:var(--text); border-color:var(--line-hi); background:rgba(var(--accent-rgb),.06); }
.theme-toggle-btn i { font-size:15px; }
.topbar-auth { display:flex; align-items:center; gap:5px; }
#btn-hamburger { display:none; width:36px; height:36px; border-radius:var(--r); align-items:center; justify-content:center; font-size:19px; color:var(--text-sub); flex-shrink:0; transition:var(--trans); border:1px solid transparent; order:-1; margin-right:2px; }
#btn-hamburger:hover { background:var(--bg2); color:var(--text); border-color:var(--line-mid); }

/* ━ 사이드바 (side 모드) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); z-index:290; }
#sidebar-overlay.open { display:block; }
#sidebar { position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh; background:var(--bg1); border-right:1px solid var(--line-mid); z-index:310; display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
#sidebar::before { content:''; position:absolute; top:0; right:0; width:1px; height:40%; background:linear-gradient(to bottom,var(--accent),transparent); opacity:.6; }
#sidebar.open { transform:translateX(0); }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
.sidebar-logo { font-family:var(--font-head); font-size:1.5rem; letter-spacing:.18em; color:var(--text); }
.sidebar-close { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:var(--r); color:var(--text-dim); font-size:17px; transition:var(--trans); border:1px solid transparent; }
.sidebar-close:hover { background:var(--bg2); color:var(--text); border-color:var(--line-mid); }
.sidebar-nav { flex:1; padding:8px; display:flex; flex-direction:column; gap:1px; }
.sidebar-nav a { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--r-lg); color:var(--text-sub); font-family:var(--font-cond); font-size:.95rem; font-weight:500; letter-spacing:.04em; transition:var(--trans); border:1px solid transparent; }
.sidebar-nav a i { font-size:18px; color:var(--text-dim); flex-shrink:0; transition:var(--trans); }
.sidebar-nav a:hover { color:var(--text); background:rgba(var(--accent-rgb),.06); }
.sidebar-nav a.active { color:var(--accent-bright); background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.2); }
.sidebar-nav a.active i { color:var(--accent); }
.sidebar-footer { padding:14px 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
#btn-sidebar-open { display:none; position:fixed; top:12px; left:14px; z-index:280; width:38px; height:38px; border-radius:var(--r-lg); background:var(--bg1); border:1px solid var(--line-mid); align-items:center; justify-content:center; font-size:19px; color:var(--text-sub); box-shadow:var(--shadow-sm); transition:var(--trans); }
#btn-sidebar-open:hover { color:var(--accent-bright); border-color:var(--line-hi); }
[data-tabpos="side"] #btn-sidebar-open { display:flex; }

/* ━ 메인/페이지 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#main { height:calc(100vh - var(--topbar-h)); display:flex; flex-direction:column; overflow:hidden; }
[data-tabpos="side"] #main { min-height:100vh; }
.page { display:none; flex:1; min-height:0; overflow:hidden; }
.page.active { display:flex; flex-direction:column; }

/* ━ 버튼 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn { font-family:var(--font-cond); font-size:.85rem; font-weight:500; letter-spacing:.05em; padding:8px 18px; border-radius:var(--r); transition:var(--trans); cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:1px solid transparent; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; box-shadow:0 0 16px rgba(var(--accent-rgb),.3); }
.btn-primary:hover { background:var(--accent-bright); border-color:var(--accent-bright); box-shadow:0 0 24px rgba(var(--accent-rgb),.45); }
.btn-primary:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.btn-ghost { color:var(--text-sub); border-color:var(--line-mid); }
.btn-ghost:hover { color:var(--text); border-color:var(--line-hi); background:rgba(var(--accent-rgb),.06); }
.btn-danger { color:var(--red); border-color:rgba(255,51,85,.22); }
.btn-danger:hover { background:rgba(255,51,85,.08); border-color:rgba(255,51,85,.4); }
.btn-sm { padding:4px 12px; font-size:.78rem; }
.btn-full { width:100%; justify-content:center; }
.btn-icon { padding:7px; aspect-ratio:1; justify-content:center; }

/* ━ 모달 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.modal-overlay { display:none; position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--bg2); border:1px solid var(--line-hi); border-radius:var(--r-xl); padding:28px; max-width:500px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 24px 70px rgba(0,0,0,.7), 0 0 60px rgba(var(--accent-rgb),.1); animation:modalIn .18s cubic-bezier(.34,1.2,.64,1); }
.modal-box::before { content:''; position:absolute; top:0; left:0; width:40px; height:2px; background:var(--accent); }
.modal-box::after  { content:''; position:absolute; top:0; left:0; width:2px; height:40px; background:var(--accent); }
.modal-box.wide { max-width:740px; }
.modal-box.narrow { max-width:380px; }
@keyframes modalIn { from { transform:scale(.96) translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:12px; }
.modal-title { font-family:var(--font-head); font-size:1.6rem; letter-spacing:.1em; color:var(--text); line-height:1.1; }
.modal-subtitle { font-family:var(--font-mono); font-size:.72rem; color:var(--text-dim); margin-top:3px; }
.modal-close { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r); color:var(--text-dim); font-size:15px; flex-shrink:0; transition:var(--trans); border:1px solid transparent; }
.modal-close:hover { background:var(--bg2); color:var(--text); border-color:var(--line-mid); }
.modal-actions { display:flex; gap:8px; margin-top:18px; }

/* ━ 폼 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.field { margin-bottom:16px; }
.field label { display:block; font-family:var(--font-mono); font-size:.68rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.field input,.field textarea,.field select { width:100%; background:var(--bg); border:1px solid var(--line-mid); border-radius:var(--r); padding:10px 12px; color:var(--text); font-size:.9rem; line-height:1.5; transition:border-color var(--trans); outline:none; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1); }
.field input::placeholder,.field textarea::placeholder { color:var(--text-dim); }
.field textarea { resize:vertical; min-height:80px; }
.field select option { background:var(--bg1); }
.field input[type="color"] { height:42px; cursor:pointer; padding:3px; }
.field-row { display:grid; gap:12px; }
.field-row.col2 { grid-template-columns:1fr 1fr; }
.field-row.col3 { grid-template-columns:1fr 1fr 1fr; }
.field-check { display:flex; align-items:center; gap:10px; font-family:var(--font-ui); font-size:.85rem; color:var(--text-sub); margin-bottom:16px; cursor:pointer; }
.field-check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.search-wrap { position:relative; display:flex; align-items:center; }
.search-wrap i { position:absolute; left:10px; font-size:14px; color:var(--text-dim); pointer-events:none; }
.search-input { background:var(--bg); border:1px solid var(--line-mid); border-radius:var(--r); padding:7px 12px 7px 32px; color:var(--text); font-family:var(--font-cond); font-size:.85rem; outline:none; width:200px; transition:border-color var(--trans); }
.search-input:focus { border-color:var(--accent); }
.search-input::placeholder { color:var(--text-dim); }

/* ━ 페이지 헤더 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-header { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg-glass); backdrop-filter:blur(14px); z-index:100; flex-wrap:wrap; gap:10px; }
[data-tabpos="side"] .page-header { top:0; padding-left:64px; }
.page-header h1 { font-family:var(--font-head); font-size:1.8rem; font-weight:400; letter-spacing:.12em; color:var(--text); }
.page-header h1::before { content:'// '; color:var(--accent); font-size:.9em; opacity:.7; }
.page-header-right { display:flex; align-items:center; gap:8px; }

/* ━ 빈상태/로딩 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; text-align:center; gap:12px; flex:1; }
.empty-icon { font-family:var(--font-head); font-size:2.6rem; color:var(--text-dim); letter-spacing:.1em; }
.empty-text { font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim); letter-spacing:.06em; }
.loading-bar { height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent); background-size:200% 100%; animation:shimmer 1.2s ease-in-out infinite; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton { background:var(--bg2); border-radius:var(--r); animation:skelPulse 1.4s ease-in-out infinite; }
@keyframes skelPulse { 0%,100%{opacity:.4} 50%{opacity:.8} }

/* ━ 토스트/라이트박스 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#toast-container { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:900; display:flex; flex-direction:column; gap:8px; pointer-events:none; align-items:center; }
.toast { font-family:var(--font-mono); font-size:.78rem; padding:9px 18px; background:var(--bg2); border:1px solid var(--line-mid); border-radius:var(--r-lg); color:var(--text); box-shadow:var(--shadow-md); animation:toastIn .18s ease; white-space:nowrap; }
.toast.success { border-color:rgba(var(--accent-rgb),.4); color:var(--accent-bright); }
.toast.error   { border-color:rgba(255,51,85,.4); color:var(--red); }
@keyframes toastIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
#lightbox { display:none; position:fixed; inset:0; z-index:800; background:rgba(0,0,0,.94); align-items:center; justify-content:center; cursor:zoom-out; }
#lightbox.open { display:flex; }
#lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:var(--r-lg); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   홈 페이지
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-home { padding:0; overflow-y:auto; position:relative; }

/* 콘텐츠를 배경 위로 */
.home-hero, .home-3col { position:relative; z-index:1; }
/* 3단 그리드 패널을 살짝 투과시켜 배경이 비치게 */
.home-left  { background:transparent !important; }
.home-main  { background:transparent; }
.home-right { background:transparent !important; }

/* 히어로 — 전체 너비, 3단 위 독립 배치 */
.home-hero {
    position:relative; width:100%; min-height:180px; max-height:240px;
    background:var(--bg); display:flex; align-items:flex-end;
    padding:24px 32px; border-bottom:1px solid var(--line-mid);
    overflow:hidden; flex-shrink:0;
}
.home-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(30,127,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(30,127,255,0.04) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; }
.home-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%),linear-gradient(to top,var(--bg) 0%,transparent 60%); pointer-events:none; z-index:1; }
.home-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.2; mix-blend-mode:screen; filter:saturate(.5) hue-rotate(200deg); z-index:0; }

/* ── 방사형 펄스 리플 (레퍼런스: 별 폭발/동심원 물결) ── */
.home-hero-pulse { position:absolute; left:50%; top:50%; width:4px; height:4px; transform:translate(-50%,-50%); pointer-events:none; z-index:0; }
.home-hero-pulse::before, .home-hero-pulse::after {
    content:''; position:absolute; left:50%; top:50%; width:40px; height:40px;
    border:1px solid var(--accent); border-radius:50%;
    transform:translate(-50%,-50%); opacity:0;
    animation:heroPulse 5.5s ease-out infinite;
}
.home-hero-pulse::after { animation-delay:2.75s; border-color:var(--accent2); }
@keyframes heroPulse {
    0%   { width:40px; height:40px; opacity:.5; }
    70%  { opacity:.12; }
    100% { width:620px; height:620px; opacity:0; }
}

/* ── Canvas 파티클 네트워크 ── */
.home-hero-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:.85; }

.home-hero-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:.18; }
.home-scanline { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent); pointer-events:none; z-index:3; animation:scanDown 7s linear infinite; }
@keyframes scanDown { 0%{top:-1px;opacity:0} 4%{opacity:.55} 96%{opacity:.55} 100%{top:100%;opacity:0} }

/* ── 노이즈 그레인 텍스처 (레퍼런스: 글리치 표면) ── */
.home-hero-grain {
    position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.06; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grainShift .4s steps(3) infinite;
}
@keyframes grainShift { 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-1%)} 100%{transform:translate(0,0)} }
[data-theme="light"] .home-hero-grain { mix-blend-mode:multiply; opacity:.04; }
.home-hero-content { position:relative; z-index:2; }
.home-hero-eyebrow { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; color:var(--accent); opacity:.55; margin-bottom:7px; text-transform:uppercase; }
.home-hero-title { font-family:var(--font-head); font-size:3.2rem; letter-spacing:.2em; color:var(--text); line-height:1; margin-bottom:7px; position:relative; }
.home-hero-title::before { content:attr(data-text); position:absolute; inset:0; color:var(--accent); opacity:0; clip-path:polygon(0 28%,100% 28%,100% 46%,0 46%); animation:glitch1 9s steps(1) infinite; }
.home-hero-title::after  { content:attr(data-text); position:absolute; inset:0; color:var(--accent2); opacity:0; clip-path:polygon(0 62%,100% 62%,100% 76%,0 76%); animation:glitch2 9s steps(1) infinite; }
@keyframes glitch1 { 0%,88%,92%,100%{opacity:0;transform:none} 89%{opacity:.7;transform:translateX(-4px)} 90%{opacity:0} 91%{opacity:.5;transform:translateX(3px)} }
@keyframes glitch2 { 0%,83%,87%,100%{opacity:0;transform:none} 84%{opacity:.6;transform:translateX(5px)} 85%{opacity:0} 86%{opacity:.4;transform:translateX(-2px)} }
.home-hero-sub { font-family:var(--font-mono); font-size:.68rem; color:var(--accent-bright); letter-spacing:.1em; opacity:.7; }
.home-hero-sub::after { content:'_'; animation:blink .9s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.home-hero-coords { position:absolute; top:14px; right:18px; z-index:2; font-family:var(--font-mono); font-size:.57rem; color:var(--accent); opacity:.32; line-height:1.7; text-align:right; user-select:none; }

/* 홈 3단 그리드 */
/* top/bottom: left 숨김  |  side: left 표시 */
html:not([data-tabpos="side"]) .home-left { display:none !important; }
html:not([data-tabpos="side"]) .home-3col { grid-template-columns:1fr 250px !important; }
html[data-tabpos="side"] .home-3col { grid-template-columns:220px 1fr 250px !important; }
.home-3col { display:grid; grid-template-columns:230px 1fr 250px; flex:1; min-height:0; overflow:hidden; }
.home-left { border-right:1px solid var(--line); background:transparent; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
.home-left-body { padding:14px 10px; display:flex; flex-direction:column; gap:20px; flex:1; }
.home-main { overflow-y:auto; padding:24px 28px; display:flex; flex-direction:column; gap:28px; }
.home-right {
    border-left:none; background:transparent;
    overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:22px;
}
.home-section-title { font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.home-section-title a { font-size:.65rem; color:var(--accent-bright); font-weight:400; opacity:.8; transition:opacity var(--trans); }
.home-section-title a:hover { opacity:1; }
.home-content-block { display:flex; flex-direction:column; gap:10px; }
.home-content-block-title { font-family:var(--font-head); font-size:1.3rem; letter-spacing:.1em; color:var(--text); border-bottom:1px solid var(--line); padding-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.home-content-block-title a { font-family:var(--font-mono); font-size:.67rem; color:var(--accent-bright); font-weight:400; }
.home-quick-nav { display:flex; flex-direction:column; gap:1px; }
.home-quick-btn { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r); font-family:var(--font-cond); font-size:.9rem; font-weight:500; letter-spacing:.04em; color:var(--text-sub); cursor:pointer; border:1px solid transparent; transition:var(--trans); }
.home-quick-btn:hover { color:var(--text); background:rgba(var(--accent-rgb),.07); border-color:var(--line); }
.home-quick-btn i { font-size:16px; color:var(--text-dim); flex-shrink:0; transition:var(--trans); }
.home-quick-btn:hover i { color:var(--accent); }
.home-char-mini { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:var(--r-lg); cursor:pointer; border:1px solid transparent; transition:var(--trans); }
.home-char-mini:hover { background:rgba(var(--accent-rgb),.06); border-color:var(--line); }
.home-char-mini-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:top; background:var(--bg3); border:1px solid var(--line-mid); flex-shrink:0; }
.home-char-mini-name { font-family:var(--font-cond); font-size:.88rem; font-weight:500; color:var(--text); line-height:1.25; letter-spacing:.02em; }
.home-char-mini-faction { font-family:var(--font-mono); font-size:.64rem; color:var(--text-dim); }

/* data-widget */
.data-widget { background:var(--bg2); border:1px solid var(--line-hi); border-radius:var(--r-lg); padding:10px 12px; position:relative; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.data-widget::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,var(--accent),var(--accent2)); opacity:.4; }
.data-widget-label { font-family:var(--font-mono); font-size:.57rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; }
.data-widget-value { font-family:var(--font-cond); font-size:.9rem; font-weight:500; color:var(--text); letter-spacing:.03em; }
.data-widget-value.accent { color:var(--accent-bright); }
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 5px var(--green)} 50%{opacity:.3;box-shadow:none} }

/* 히어로 코너 마커 */
.home-hero-corners { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }

/* 콘텐츠 블록 타이틀 B안 */
.hcb-accent-bar { width:3px; height:22px; background:var(--accent); opacity:.85; flex-shrink:0; border-radius:1px; }
.hcb-sublabel { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em; color:var(--accent-bright); opacity:.6; text-transform:uppercase; margin-bottom:1px; }
.home-content-block-title { font-family:var(--font-head); font-size:1.18rem; letter-spacing:.1em; color:var(--text); border-bottom:1px solid rgba(var(--accent-rgb),.18); padding-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.home-content-block-title a { font-family:var(--font-mono); font-size:.67rem; color:var(--accent-bright); font-weight:400; }

/* 고정 공지 경보 플래시 */
@keyframes alertPulse {
  0%,100% { background:rgba(255,30,30,.06); border-color:rgba(255,50,50,.4); box-shadow:0 0 0 0 rgba(255,30,30,0); }
  50%      { background:rgba(255,30,30,.18); border-color:rgba(255,60,60,.9); box-shadow:0 0 18px 2px rgba(255,30,30,.25); }
}
@keyframes alertDot { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.notice-card { padding:12px 14px; border-radius:var(--r-lg); border:1px solid var(--line-hi); cursor:pointer; transition:border-color var(--trans),background var(--trans); display:flex; gap:10px; align-items:flex-start; margin-bottom:5px; background:var(--bg2); position:relative; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.notice-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; transition:background var(--trans); }
.notice-card:hover::before { background:var(--accent); }

.notice-card-alert { border-color:rgba(255,60,60,.5) !important; border-width:1.5px !important; }
.notice-card-alert::before { background:#ff2828 !important; width:3px !important; }
.notice-alert-scan { display:none; }
.notice-alert-dot { width:8px; height:8px; border-radius:50%; background:#ff2828; flex-shrink:0; margin-top:2px; animation:alertDot .8s step-end infinite; }
.notice-card-alert .notice-title { color:#ff6060; font-weight:600; }
.notice-card-alert .notice-pin { color:#ff4444 !important; background:rgba(255,40,40,.18) !important; border-color:rgba(255,40,40,.5) !important; }

.notice-pin { font-family:var(--font-mono); font-size:.62rem; font-weight:500; color:var(--accent-bright); background:rgba(var(--accent-rgb),.1); padding:2px 7px; border-radius:var(--r); white-space:nowrap; margin-top:2px; border:1px solid rgba(var(--accent-rgb),.2); }
.notice-title { font-family:var(--font-cond); font-size:.92rem; font-weight:500; color:var(--text); margin-bottom:3px; }
.notice-meta { font-family:var(--font-mono); font-size:.68rem; color:var(--text-dim); }

/* 공지/이벤트/일정 */
.event-banner-home { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); margin-bottom:7px; cursor:pointer; transition:all var(--trans); position:relative; min-height:100px; background:var(--bg2); display:flex; align-items:flex-end; padding:14px; }
.event-banner-home:hover { border-color:var(--accent); }
.event-banner-home img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25; }
.event-banner-home-content { position:relative; z-index:1; }
.event-banner-tag { font-family:var(--font-mono); font-size:.62rem; font-weight:500; letter-spacing:.1em; color:var(--accent-bright); margin-bottom:3px; }
.event-banner-title-home { font-family:var(--font-head); font-size:1.2rem; letter-spacing:.06em; color:var(--text); }

/* 스케줄 아이템 — 일반 먼저, next는 이후 override */
.schedule-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); align-items:center; }
.schedule-item:last-child { border-bottom:none; }
.schedule-date { font-family:var(--font-mono); font-size:.63rem; font-weight:500; color:var(--accent-bright); background:rgba(var(--accent-rgb),.1); padding:2px 7px; border-radius:var(--r); white-space:nowrap; min-width:52px; text-align:center; }
.schedule-text { font-family:var(--font-cond); font-size:.86rem; color:var(--text-sub); }

/* 카운트다운 타이머 (일반 schedule-item 뒤에 선언해서 override) */
@keyframes scdBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
.schedule-item-next { display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:4px !important; background:rgba(var(--accent-rgb),.05) !important; border-radius:var(--r) !important; padding:9px 10px !important; border-bottom:1px solid var(--line) !important; border-left:2px solid var(--accent) !important; }
.schedule-countdown { display:flex; align-items:center; gap:7px; padding-top:3px; }
.scd-label { font-family:var(--font-mono); font-size:.52rem; letter-spacing:.16em; color:rgba(var(--accent-rgb),.55); text-transform:uppercase; }
.scd-time { font-family:var(--font-mono); font-size:.85rem; font-weight:700; color:var(--accent-bright); letter-spacing:.1em; animation:scdBlink 1s step-end infinite; }

/* 미니 캘린더 */
.mini-calendar { background:var(--bg2); border:1px solid var(--line-mid); border-radius:var(--r-lg); overflow:hidden; }
.cal-header { padding:7px 12px 5px; border-bottom:1px solid var(--line); }
.cal-month { font-family:var(--font-mono); font-size:.72rem; font-weight:500; color:var(--accent-bright); letter-spacing:.08em; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); padding:4px 3px 6px; gap:1px; }
.cal-day-label { font-family:var(--font-mono); font-size:.53rem; font-weight:500; color:var(--text-dim); text-align:center; padding:3px 0; }
.cal-day { font-family:var(--font-mono); font-size:.67rem; color:var(--text-sub); text-align:center; padding:4px 2px; border-radius:var(--r); position:relative; line-height:1.3; }
.cal-day.today { background:rgba(var(--accent-rgb),.15); color:var(--accent-bright); font-weight:600; box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3); }
.cal-day.has-event { color:var(--text); }
.cal-dot { display:block; width:3px; height:3px; border-radius:50%; background:var(--accent-bright); margin:1px auto 0; }

/* 스토리 요약 */
.story-summary-inner { background:var(--bg2); border:1px solid var(--line-hi); border-left:3px solid var(--accent); border-radius:0 var(--r-lg) var(--r-lg) 0; padding:13px 15px; box-shadow:0 2px 12px rgba(0,0,0,.35); }
.story-episode-badge { font-family:var(--font-mono); font-size:.62rem; font-weight:500; letter-spacing:.12em; color:var(--accent-bright); background:rgba(var(--accent-rgb),.1); display:inline-block; padding:2px 8px; border-radius:var(--r); margin-bottom:7px; border:1px solid rgba(var(--accent-rgb),.22); }
.story-summary-text { font-family:var(--font-cond); font-size:.9rem; color:var(--text-sub); line-height:1.75; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.story-summary-meta { display:flex; align-items:center; justify-content:space-between; margin-top:9px; font-family:var(--font-mono); font-size:.62rem; color:var(--text-dim); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   캐릭터
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-characters { padding:0; flex-direction:column; flex:1; min-height:0; overflow:hidden; position:relative; }
.char-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:12px; padding:20px 24px; }

/* ━━ HUD 캐릭터 셀렉트 카드 (레퍼런스: CHARACTER SELECT) ━━ */
.char-gallery-card {
    background:linear-gradient(160deg, rgba(var(--accent-rgb),.06), var(--bg1) 60%);
    border:1px solid var(--line-mid); border-radius:4px;
    overflow:hidden; cursor:pointer; transition:all var(--trans2); position:relative;
    aspect-ratio:3/4;
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
/* 이미지 */
.cgc-imgwrap { position:absolute; inset:0; z-index:0; }
.char-gallery-card img { width:100%; height:100%; object-fit:cover; object-position:top; background:var(--bg2); display:block; transition:transform .4s ease; }
.char-gallery-card:hover img { transform:scale(1.05); }
/* 어두운 하단 그라데이션 + 상단 스캔 틴트 */
.char-gallery-card::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 46%),
              linear-gradient(180deg, rgba(var(--accent-rgb),.10) 0%, transparent 18%); }
/* 발광 프레임 (호버) */
.char-gallery-card::before { content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
    border:1px solid transparent; border-radius:4px; transition:border-color var(--trans2);
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.char-gallery-card:hover { transform:translateY(-4px); border-color:var(--card-color); box-shadow:0 12px 40px rgba(0,0,0,.7), 0 0 22px rgba(var(--accent-rgb),.22); }
.char-gallery-card:hover::before { border-color:var(--card-color); }

/* 코너 마커 */
.cgc-corner { position:absolute; width:12px; height:12px; z-index:4; pointer-events:none; opacity:.7; transition:opacity var(--trans2); }
.cgc-corner.tl { top:5px; left:5px; border-top:2px solid var(--card-color); border-left:2px solid var(--card-color); }
.cgc-corner.tr { top:5px; right:5px; border-top:2px solid var(--card-color); border-right:2px solid var(--card-color); }
.cgc-corner.bl { bottom:5px; left:5px; border-bottom:2px solid var(--card-color); border-left:2px solid var(--card-color); }
.cgc-corner.br { bottom:5px; right:5px; border-bottom:2px solid var(--card-color); border-right:2px solid var(--card-color); }
.char-gallery-card:hover .cgc-corner { opacity:1; }

/* HO## ID 라벨 */
.cgc-id { position:absolute; top:8px; left:12px; z-index:4; font-family:var(--font-head); font-size:1.5rem; letter-spacing:.08em; line-height:1; color:#fff; text-shadow:0 0 10px rgba(var(--accent-rgb),.6), 0 1px 3px rgba(0,0,0,.8); }
.cgc-id::before { content:''; position:absolute; left:-12px; top:2px; bottom:2px; width:3px; background:var(--card-color); box-shadow:0 0 8px var(--card-color); }

/* JOB / AFFIL 메타 세로 슬롯 (우측) */
.cgc-meta { position:absolute; top:42px; right:0; z-index:4; display:flex; flex-direction:column; gap:3px; align-items:flex-end; padding-right:0; }
.cgc-meta-row { display:flex; flex-direction:column; align-items:flex-end; background:rgba(0,0,0,.5); border-left:2px solid var(--card-color); padding:3px 7px 3px 8px; max-width:108px; }
.cgc-meta-key { font-family:var(--font-mono); font-size:.5rem; letter-spacing:.12em; color:var(--card-color); line-height:1.2; }
.cgc-meta-val { font-family:var(--font-ui); font-size:.62rem; color:rgba(255,255,255,.88); line-height:1.25; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }

.char-gallery-info { position:absolute; bottom:0; left:0; right:0; z-index:4; padding:12px 14px; }
.char-gallery-name { font-family:var(--font-head); font-size:1.18rem; letter-spacing:.06em; color:#fff; line-height:1.15; margin-bottom:2px; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.char-gallery-handle { font-family:var(--font-mono); font-size:.62rem; color:rgba(255,255,255,.45); letter-spacing:.04em; }
/* 하단 발광 바 */
.char-gallery-info::after { content:''; display:block; height:2px; margin-top:7px; width:38px; background:var(--card-color); box-shadow:0 0 6px var(--card-color); transition:width var(--trans2); }
.char-gallery-card:hover .char-gallery-info::after { width:70px; }
#char-detail-panel { position:fixed; inset:0; z-index:500; background:var(--bg); display:none; flex-direction:column; overflow:hidden; }
#char-detail-panel.open { display:flex; }
.char-detail-header { display:flex; align-items:center; gap:10px; padding:0 20px; height:var(--topbar-h); border-bottom:1px solid var(--line); background:var(--bg-glass); backdrop-filter:blur(8px); flex-shrink:0; flex-wrap:wrap; }
.char-detail-back { display:flex; align-items:center; gap:6px; font-family:var(--font-cond); font-size:.85rem; font-weight:500; color:var(--text-sub); padding:5px 10px; border-radius:var(--r); transition:var(--trans); border:1px solid var(--line-mid); }
.char-detail-back:hover { color:var(--text); border-color:var(--line-hi); background:rgba(var(--accent-rgb),.06); }
.char-detail-body { display:grid; grid-template-columns:290px 1fr; flex:1; overflow-y:auto; }
.char-detail-left { padding:24px 20px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:14px; position:sticky; top:0; max-height:calc(100vh - var(--topbar-h)); overflow-y:auto; }
.char-detail-right { padding:24px 30px; overflow-y:auto; }
.char-detail-image { width:100%; border-radius:var(--r-lg); object-fit:cover; object-position:top; cursor:zoom-in; background:var(--bg2); border:1px solid var(--line); }
.char-detail-name-big { font-family:var(--font-head); font-size:2.4rem; letter-spacing:.1em; color:var(--text); line-height:1; margin-bottom:4px; }
.char-detail-handle-big { font-family:var(--font-mono); font-size:.72rem; color:var(--text-dim); margin-bottom:18px; }
.info-section { margin-bottom:24px; }
.info-section-title { font-family:var(--font-mono); font-size:.67rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.info-cell { background:var(--bg1); padding:10px 13px; }
.info-label { font-family:var(--font-mono); font-size:.63rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:3px; }
.info-value { font-family:var(--font-cond); font-size:.92rem; color:var(--text); letter-spacing:.02em; }
.keyword-tags { display:flex; flex-wrap:wrap; gap:5px; }
.keyword-tag { font-family:var(--font-mono); font-size:.68rem; padding:3px 10px; border-radius:var(--r-xl); background:rgba(var(--accent-rgb),.08); color:var(--accent-bright); border:1px solid rgba(var(--accent-rgb),.2); }
.radar-section { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.radar-svg { flex-shrink:0; width:130px; height:130px; }
.radar-stats { flex:1; display:flex; flex-direction:column; gap:5px; min-width:110px; }
.stat-row { display:flex; align-items:center; gap:7px; }
.stat-label { font-family:var(--font-mono); font-size:.6rem; color:var(--text-dim); min-width:26px; }
.stat-bar-wrap { flex:1; height:3px; background:var(--bg3); border-radius:2px; overflow:hidden; }
.stat-bar { height:100%; border-radius:2px; transition:width .4s ease; }
.stat-val { font-family:var(--font-mono); font-size:.66rem; color:var(--text-sub); min-width:22px; text-align:right; }
.inv-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.inv-slot { aspect-ratio:1; background:var(--bg); border:1px solid var(--line-mid); border-radius:var(--r); display:flex; align-items:center; justify-content:center; position:relative; cursor:default; transition:border-color var(--trans); overflow:hidden; }
.inv-slot:has(img) { cursor:pointer; }
.inv-slot:has(img):hover { border-color:var(--accent); }
.inv-slot img { width:100%; height:100%; object-fit:cover; }
.inv-count { position:absolute; bottom:2px; right:3px; font-family:var(--font-mono); font-size:.58rem; color:#fff; background:rgba(0,0,0,.7); padding:1px 4px; border-radius:3px; }
.inv-tooltip { display:none; position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); background:var(--bg3); border:1px solid var(--line-mid); border-radius:var(--r-lg); padding:9px 11px; width:140px; z-index:10; box-shadow:var(--shadow-md); pointer-events:none; }
.inv-slot:hover .inv-tooltip { display:block; }
.inv-tooltip-name { font-family:var(--font-cond); font-size:.85rem; font-weight:500; color:var(--text); margin-bottom:3px; }
.inv-tooltip-desc { font-family:var(--font-mono); font-size:.68rem; color:var(--text-sub); line-height:1.5; }
/* bgm-player 구버전 호환 (미사용) */
.bgm-player { display:none; }
/* 플로팅 버튼 재생 중 펄스 */
#bgm-float-btn.playing {
    animation: bgmPulse 2s ease-in-out infinite;
}
@keyframes bgmPulse {
    0%,100% { box-shadow: 0 4px 24px rgba(30,127,255,0.7), 0 0 0 0 rgba(30,127,255,0.4); }
    50%      { box-shadow: 0 4px 24px rgba(30,127,255,0.7), 0 0 0 10px rgba(30,127,255,0); }
}
.feed-phase-tab { font-family:var(--font-mono); font-size:.68rem; padding:3px 10px; border-radius:var(--r-xl); color:var(--text-dim); cursor:pointer; border:1px solid transparent; transition:var(--trans); }
.feed-phase-tab:hover { color:var(--text-sub); border-color:var(--line-mid); }
.feed-phase-tab.active { color:var(--accent-bright); border-color:rgba(var(--accent-rgb),.35); background:rgba(var(--accent-rgb),.08); }
.feed-item { border-bottom:1px solid var(--line); padding:16px 0; display:flex; flex-direction:column; gap:8px; position:relative; }
.feed-item:last-child { border-bottom:none; }
.feed-image { width:100%; max-height:280px; object-fit:cover; border-radius:var(--r-lg); cursor:zoom-in; background:var(--bg2); }
.feed-title { font-family:var(--font-head); font-size:1rem; letter-spacing:.04em; color:var(--text); }
.feed-content { font-family:var(--font-cond); font-size:.9rem; color:var(--text-sub); line-height:1.8; white-space:pre-wrap; }
.feed-meta { font-family:var(--font-mono); font-size:.66rem; color:var(--text-dim); }
.feed-delete-btn { position:absolute; top:14px; right:0; font-size:14px; color:var(--text-dim); padding:5px 7px; border-radius:var(--r); transition:var(--trans); }
.feed-delete-btn:hover { color:var(--red); background:rgba(255,51,85,.08); }

/* ━ 세계관/아카이브/상점/배틀/던전/미니게임 ━━━━━━━━━━━━━━━━ */
#page-lore { padding:0; overflow-y:auto; }
.lore-layout { display:grid; grid-template-columns:210px 1fr; flex:1; overflow:hidden; }
.lore-nav { border-right:1px solid var(--line); overflow-y:auto; padding:14px 0; }
.lore-nav-item { display:flex; align-items:center; gap:8px; padding:9px 18px; font-family:var(--font-cond); font-size:.9rem; color:var(--text-sub); cursor:pointer; transition:var(--trans); border-left:2px solid transparent; }
.lore-nav-item:hover { color:var(--text); background:rgba(var(--accent-rgb),.04); }
.lore-nav-item.active { color:var(--accent-bright); border-left-color:var(--accent); background:rgba(var(--accent-rgb),.06); }
.lore-content { overflow-y:auto; padding:28px 36px; }
.lore-section-title { font-family:var(--font-head); font-size:2rem; letter-spacing:.08em; color:var(--text); margin-bottom:18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lore-image { width:100%; max-height:260px; object-fit:cover; border-radius:var(--r-lg); margin-bottom:18px; }
.lore-body { font-size:.94rem; color:var(--text-sub); line-height:2; white-space:pre-wrap; }
#page-archive { padding:0; overflow-y:auto; }
.archive-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; padding:22px 26px; }
.archive-card { background:var(--bg1); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:all var(--trans); }
.archive-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.archive-card-cover { width:100%; height:150px; object-fit:cover; background:var(--bg2); display:block; }
.archive-card-body { padding:14px; }
.archive-episode { font-family:var(--font-mono); font-size:.68rem; font-weight:500; letter-spacing:.1em; color:var(--accent-bright); margin-bottom:5px; }
.archive-title { font-family:var(--font-head); font-size:1.15rem; letter-spacing:.04em; color:var(--text); margin-bottom:7px; }
.archive-summary { font-family:var(--font-cond); font-size:.85rem; color:var(--text-sub); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.archive-viewer { position:fixed; inset:0; z-index:500; background:var(--bg); display:flex; flex-direction:column; transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); overflow:hidden; }
.archive-viewer.open { transform:translateY(0); }
.archive-viewer-header { display:flex; align-items:center; gap:10px; padding:0 18px; height:var(--topbar-h); border-bottom:1px solid var(--line-mid); background:var(--bg-glass); backdrop-filter:blur(12px); flex-shrink:0; }
.archive-viewer-header-center { display:flex; align-items:center; gap:10px; flex:1; min-width:0; overflow:hidden; }
.archive-viewer-episode-badge { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; color:var(--accent-bright); background:rgba(var(--accent-rgb),.10); border:1px solid rgba(var(--accent-rgb),.22); border-radius:var(--r); padding:2px 8px; flex-shrink:0; }
.archive-viewer-title-text { font-family:var(--font-head); font-size:1.1rem; letter-spacing:.06em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.archive-page-indicator { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; color:var(--text-dim); flex-shrink:0; }

/* 페이지 슬라이더 */
.archive-pages-wrap { flex:1; overflow:hidden; position:relative; display:flex; align-items:stretch; }
.archive-pages-track { display:flex; width:100%; height:100%; transition:transform .32s cubic-bezier(.4,0,.2,1); flex:1; min-width:0; }
.archive-page { flex:0 0 100%; width:100%; height:100%; overflow-y:auto; display:flex; flex-direction:column; position:relative; }
.archive-page-content { max-width:700px; margin:0 auto; width:100%; padding:40px 36px 60px; flex:1; }
.archive-page-number { position:absolute; bottom:16px; right:24px; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em; color:var(--text-dim); pointer-events:none; }

/* 페이지 화살표 버튼 */
.archive-page-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; background:var(--bg-glass); border:1px solid var(--line-mid); color:var(--text-sub); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .2s, background var(--trans); font-size:20px; backdrop-filter:blur(8px); }
.archive-page-arrow:hover { background:var(--bg3); color:var(--text); border-color:var(--line-hi); }
.archive-page-arrow-left  { left:16px; }
.archive-page-arrow-right { right:16px; }

/* 커버 페이지 */
.archive-page-cover { position:relative; align-items:center; justify-content:flex-end; overflow:hidden; }
.archive-cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; }
.archive-cover-overlay { position:relative; z-index:1; text-align:center; padding:40px 36px; width:100%; background:linear-gradient(to top, rgba(4,6,11,.95) 0%, rgba(4,6,11,.5) 60%, transparent 100%); }
.archive-cover-episode { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--accent-bright); margin-bottom:12px; }
.archive-cover-title { font-family:var(--font-head); font-size:2.8rem; letter-spacing:.1em; color:var(--text); line-height:1.1; margin-bottom:16px; }
.archive-cover-summary { font-family:var(--font-ui); font-size:.88rem; color:var(--text-sub); line-height:1.8; max-width:480px; margin:0 auto; }

/* 본문 텍스트 */
.archive-log-text { font-family:var(--font-body); font-size:.95rem; color:var(--text-sub); line-height:2.1; white-space:pre-wrap; word-break:break-word; }

/* 하단 네비 */
.archive-viewer-nav { display:flex; align-items:center; padding:10px 18px; border-top:1px solid var(--line); background:var(--bg1); gap:8px; flex-shrink:0; height:52px; }
.archive-nav-left { flex:1; display:flex; justify-content:flex-start; }
.archive-nav-right { flex:1; display:flex; justify-content:flex-end; }
.archive-page-nav { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.archive-page-dot { width:6px; height:6px; border-radius:50%; background:var(--bg4); border:none; cursor:pointer; padding:0; transition:var(--trans); flex-shrink:0; }
.archive-page-dot.active { background:var(--accent-bright); width:18px; border-radius:3px; }
.archive-page-dot:hover:not(.active) { background:var(--text-dim); }
#page-shop { padding:0; overflow-y:auto; }
/* 상점 헤더를 본문과 같은 배경으로 통일 (이음매 제거) */
#page-shop .page-header { background:var(--bg); backdrop-filter:none; border-bottom:none; }
#page-shop .shop-cart { background:var(--bg); }
.shop-layout { display:grid; grid-template-columns:1fr 280px; flex:1; overflow:hidden; }
.shop-items { padding:20px 24px; overflow-y:auto; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
.shop-item-card { background:var(--bg2); border:1px solid var(--line-hi); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:all var(--trans); box-shadow:0 4px 18px rgba(0,0,0,.45); }
.shop-item-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 18px rgba(var(--accent-rgb),.18); }
.shop-item-img { width:100%; aspect-ratio:1; object-fit:cover; background:var(--bg2); display:block; }
.shop-item-body { padding:11px; }
.shop-item-name { font-family:var(--font-cond); font-size:.9rem; font-weight:500; color:var(--text); margin-bottom:4px; }
.shop-item-price { font-family:var(--font-mono); font-size:.78rem; font-weight:500; color:var(--accent-bright); }
.shop-item-stock { font-family:var(--font-mono); font-size:.66rem; color:var(--text-dim); margin-top:2px; }
.shop-cart { padding:20px 18px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.shop-cart-title { font-family:var(--font-head); font-size:1.3rem; letter-spacing:.06em; color:var(--text); margin-bottom:4px; }
.my-gold { display:flex; justify-content:space-between; align-items:center; padding:9px 13px; background:var(--muted-acc); border-radius:var(--r-lg); border:1px solid rgba(var(--accent-rgb),.2); font-family:var(--font-mono); font-size:.78rem; color:var(--text-sub); }
.my-gold span:last-child { color:var(--accent-bright); font-size:.88rem; font-weight:500; }
.cart-item { display:flex; align-items:center; gap:6px; padding:8px 0; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:.78rem; }
.cart-item-name { flex:1; color:var(--text-sub); }
.cart-item-price { color:var(--accent-bright); }
.cart-total { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:.8rem; color:var(--text-sub); padding-top:8px; border-top:1px solid var(--line-mid); }
.cart-total span:last-child { font-size:.92rem; font-weight:500; color:var(--accent-bright); }
#page-battle { padding:0; overflow-y:auto; }
.battle-layout { padding:20px 26px; }
.battle-history-list { margin-top:14px; }
.battle-history-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg1); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:7px; }
.battle-result-badge { font-family:var(--font-mono); font-size:.66rem; font-weight:500; padding:2px 9px; border-radius:var(--r-xl); }
.battle-result-badge.win  { background:rgba(0,245,160,.1); color:var(--green); border:1px solid rgba(0,245,160,.25); }
.battle-result-badge.lose { background:rgba(255,51,85,.08); color:var(--red); border:1px solid rgba(255,51,85,.25); }
.battle-result-badge.draw { background:var(--bg3); color:var(--text-sub); border:1px solid var(--line-mid); }
#page-dungeon { padding:0; overflow-y:auto; }
.dungeon-layout { padding:20px 26px; }
.dungeon-floors { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:14px; }
.floor-card { background:var(--bg1); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 16px; cursor:pointer; transition:all var(--trans); text-align:center; position:relative; overflow:hidden; }
.floor-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.floor-card.cleared { border-color:rgba(0,245,160,.3); }
.floor-num { font-family:var(--font-head); font-size:2.4rem; color:var(--text-dim); letter-spacing:.1em; margin-bottom:5px; }
.floor-card.cleared .floor-num { color:var(--green); }
.floor-name { font-family:var(--font-cond); font-size:.9rem; font-weight:500; color:var(--text); margin-bottom:5px; }
.floor-status { font-family:var(--font-mono); font-size:.68rem; }
.floor-status.cleared { color:var(--green); }
.floor-status.locked  { color:var(--text-dim); }
.floor-status.open    { color:var(--accent-bright); }
.floor-clear-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:.75rem; }
.floor-clear-row:last-child { border-bottom:none; }
.floor-clear-name { color:var(--text-sub); }
.floor-clear-date { color:var(--text-dim); }
.floor-detail-status.cleared { color:var(--green); }
.floor-detail-status.locked  { color:var(--text-dim); }
.floor-detail-status.open    { color:var(--accent-bright); }
#page-minigame { padding:0; overflow-y:auto; }
.minigame-layout { padding:20px 26px; }
.minigame-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:14px; }
.minigame-card { background:var(--bg2); border:1px solid var(--line-hi); border-radius:var(--r-lg); padding:26px 20px; text-align:center; transition:all var(--trans); box-shadow:0 4px 18px rgba(0,0,0,.45); }
.minigame-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 18px rgba(var(--accent-rgb),.18); }
.minigame-icon { font-size:2.4rem; margin-bottom:12px; display:block; color:var(--text-dim); }
.minigame-name { font-family:var(--font-head); font-size:1.25rem; letter-spacing:.05em; color:var(--text); margin-bottom:7px; }
.minigame-desc { font-family:var(--font-cond); font-size:.88rem; color:var(--text-sub); line-height:1.6; }
.card-tile { aspect-ratio:1; background:var(--bg2); border:1px solid var(--line-mid); border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.6rem; transition:all .2s; user-select:none; }
.card-tile:hover { border-color:rgba(var(--accent-rgb),.35); transform:scale(1.04); }

/* ━ 설정 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-settings { padding:0; overflow-y:auto; }
.settings-layout {
    max-width:1100px; margin:0 auto; padding:28px 26px;
    display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch;
}
/* 섹션을 카드화 — 배경 위로 떠 보이게 */
.settings-section {
    background:var(--bg2); border:1px solid var(--line-hi); border-radius:var(--r-lg);
    padding:18px 20px; box-shadow:0 4px 18px rgba(0,0,0,.4);
}
/* 디스플레이: 좌측 열 전체 (탭바+계정 2행에 걸쳐) */
.settings-section:nth-of-type(1) { grid-column:1; grid-row:1/3; display:flex; flex-direction:column; justify-content:space-between; }
.settings-section:nth-of-type(2) { grid-column:2; grid-row:1; }
.settings-section:nth-of-type(3) { grid-column:2; grid-row:2; }
/* 관리자 섹션은 전체 너비 */
#admin-panel-section { grid-column:1/-1; }
.settings-section-title { font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); gap:16px; }
.settings-row:last-child { border-bottom:none; padding-bottom:0; }
@media (max-width:760px) {
    .settings-layout { grid-template-columns:1fr; }
    .settings-section:nth-of-type(1),.settings-section:nth-of-type(2),.settings-section:nth-of-type(3) { grid-column:1; grid-row:auto; }
}
.settings-row:last-child { border-bottom:none; }
.settings-label { font-family:var(--font-cond); font-size:.95rem; color:var(--text); }
.settings-desc  { font-family:var(--font-mono); font-size:.72rem; color:var(--text-sub); margin-top:2px; }
.toggle { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; background:var(--bg3); border-radius:12px; cursor:pointer; transition:background .2s; border:1px solid var(--line-mid); }
.toggle input:checked + .toggle-track { background:var(--accent); border-color:var(--accent); }
.toggle-thumb { position:absolute; top:4px; left:4px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; pointer-events:none; }
.toggle input:checked ~ .toggle-thumb { transform:translateX(20px); }
.option-group { display:flex; gap:6px; flex-wrap:wrap; }
.option-btn { font-family:var(--font-cond); font-size:.82rem; font-weight:500; padding:6px 14px; border-radius:var(--r); border:1px solid var(--line-mid); color:var(--text-sub); transition:var(--trans); cursor:pointer; }
.option-btn:hover { color:var(--text); border-color:var(--line-hi); }
.option-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:500; }

/* ━ 공지 뷰어 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#notice-viewer { position:fixed; inset:0; z-index:500; background:var(--bg); display:flex; flex-direction:column; transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); }
#notice-viewer.open { transform:translateY(0); }
.notice-viewer-header { display:flex; align-items:center; gap:12px; padding:0 22px; height:var(--topbar-h); border-bottom:1px solid var(--line); background:var(--bg-glass); backdrop-filter:blur(8px); flex-shrink:0; }
.notice-viewer-body { flex:1; overflow-y:auto; padding:36px; max-width:740px; margin:0 auto; width:100%; font-size:.94rem; color:var(--text-sub); line-height:2; white-space:pre-wrap; }

/* ━ 모바일 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:768px) {
    #btn-hamburger { display:flex; }
    .topbar-nav { display:none; }
    .topbar-brand { flex:1; }
    .topbar-nav.mobile-open { display:flex !important; flex-direction:column; position:fixed; top:var(--topbar-h); left:0; right:0; background:var(--bg1); border-bottom:1px solid var(--line-mid); padding:6px 0; z-index:299; box-shadow:var(--shadow-lg); max-height:calc(100vh - var(--topbar-h)); overflow-y:auto; }
    .topbar-nav.mobile-open a { flex-direction:row; border-radius:0; padding:13px 20px; justify-content:flex-start; gap:12px; border:none; border-bottom:1px solid var(--line); min-width:unset; }
    .topbar-nav.mobile-open a .nav-label { display:inline; font-family:var(--font-cond); font-size:.92rem; }
    .topbar-nav.mobile-open a.active::after { display:none; }
}
/* ━ 반응형 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:1100px) {
    .home-3col { grid-template-columns:1fr 230px; }
    .home-left { display:none; }
    .char-detail-body { grid-template-columns:260px 1fr; }
    .lore-layout { grid-template-columns:1fr; }
    .lore-nav { position:static; height:auto; border-right:none; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; padding:8px; max-height:none; }
    .shop-layout { grid-template-columns:1fr; }
    .shop-cart { border-left:none; border-top:1px solid var(--line); }
}
@media (max-width:820px) { .home-3col { grid-template-columns:1fr; } .home-right { border-left:none; border-top:1px solid var(--line); } }
@media (max-width:768px) { .char-detail-body { grid-template-columns:1fr; } .char-detail-left { position:static; max-height:none; border-right:none; border-bottom:1px solid var(--line); } .char-gallery { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:10px; padding:14px; } .page-header { padding:14px 16px; } .page-header h1 { font-size:1.5rem; } }
@media (max-width:480px) { .char-gallery { grid-template-columns:repeat(2,1fr); } .inv-grid { grid-template-columns:repeat(4,1fr); } .dungeon-floors { grid-template-columns:repeat(2,1fr); } .archive-list { grid-template-columns:1fr; } .modal-box { padding:20px; border-radius:var(--r-lg); } .field-row.col2,.field-row.col3 { grid-template-columns:1fr; } }

/* ━ 유틸 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn .24s ease forwards; }
.admin-only { display:none; }
body.is-admin .admin-only { display:revert; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   캐릭터 상세 — 탭 레이아웃 개편
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 이미지 50 / 정보 50 */
.char-detail-body { display:grid; grid-template-columns:1fr 1fr; flex:1; overflow:hidden; }
.char-detail-left { overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:0; border-right:1px solid var(--line); }
.char-detail-image { width:100%; height:100%; object-fit:cover; object-position:top center; cursor:zoom-in; display:block; min-height:300px; max-height:calc(100vh - var(--topbar-h) - 80px); }
.char-detail-right { padding:24px 28px; overflow-y:auto; display:flex; flex-direction:column; gap:0; }

/* 이름 영역 */
.char-name-row { margin-bottom:18px; }
.char-detail-name-big { font-family:var(--font-head); font-size:2.8rem; letter-spacing:.1em; color:var(--text); line-height:1; margin-bottom:5px; }
.char-detail-handle-big { font-family:var(--font-mono); font-size:.75rem; color:var(--text-dim); margin-bottom:10px; }
.char-faction-badge { display:inline-block; font-family:var(--font-mono); font-size:.68rem; font-weight:500; padding:3px 10px; border-radius:var(--r); border:1px solid; letter-spacing:.06em; }

/* 정보 탭 */
.char-info-tabs { display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:0; }
.char-info-tab {
    font-family:var(--font-cond); font-size:.92rem; font-weight:500; letter-spacing:.04em;
    padding:8px 16px; border-radius:var(--r) var(--r) 0 0;
    color:var(--text-dim); cursor:pointer; border:1px solid transparent;
    border-bottom:none; transition:var(--trans); position:relative; bottom:-1px;
    background:none;
}
.char-info-tab:hover { color:var(--text-sub); background:var(--bg2); }
.char-info-tab.active {
    color:var(--accent-bright); background:var(--bg);
    border-color:var(--line-mid); border-bottom-color:var(--bg);
}

/* 탭 패널 */
.char-tab-panel { display:none; }
.char-tab-panel.active { display:block; }

/* 정보 그리드 — 커진 버전 */
.info-grid-large {
    display:grid; grid-template-columns:1fr 1fr;
    gap:1px; background:var(--line);
    border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
}
.info-cell-lg { background:var(--bg1); padding:13px 16px; }
.info-label { font-family:var(--font-mono); font-size:.65rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; }
.info-value-lg { font-family:var(--font-cond); font-size:1.05rem; font-weight:500; color:var(--text); letter-spacing:.02em; }

/* 본문 텍스트 — 커진 버전 */
.info-text-lg { font-family:var(--font-cond); font-size:1rem; color:var(--text-sub); line-height:1.9; white-space:pre-wrap; }

/* 모바일 */
@media (max-width:768px) {
    .char-detail-body { grid-template-columns:1fr; }
    .char-detail-left { border-right:none; border-bottom:1px solid var(--line); max-height:50vh; }
    .char-detail-image { max-height:50vh; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   캐릭터 상세 패널 — 최적화 레이아웃
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 2단: 이미지 38% / 정보 62% */
.char-detail-body {
    display: grid;
    grid-template-columns: 38% 1fr;
    flex: 1;
    overflow: hidden;
}

/* 좌측 — 이미지가 전체 채움 */
.char-detail-left {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    overflow: hidden;
}
.char-detail-image {
    flex: 1;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    cursor: zoom-in;
    display: block;
    min-height: 0;
}

/* 우측 — 스크롤 가능 */
.char-detail-right {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
}

/* 헤더 영역 */
.cdr-header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.cdr-name {
    font-family: var(--font-head);
    font-size: 2.4rem;
    letter-spacing: .08em;
    color: var(--text);
    line-height: 1;
    margin-bottom: 6px;
}
.cdr-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdr-handle { font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); }
.cdr-faction {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
    padding: 2px 10px; border-radius: var(--r); border: 1px solid; letter-spacing: .05em;
}

/* 섹션 공통 */
.cdr-section {
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.cdr-section-label {
    font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
    margin-bottom: 12px;
}

/* 기본 정보 그리드 — 가로로 촘촘하게 */
.cdr-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}
.cdr-info-item {
    background: var(--bg1);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cdr-info-key {
    font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
.cdr-info-val {
    font-family: var(--font-cond); font-size: 1rem; font-weight: 500;
    color: var(--text); letter-spacing: .02em;
}

/* 능력치 바 — 컴팩트하게 */
.cdr-stat-list { display: flex; flex-direction: column; gap: 6px; }
.cdr-stat-row { display: flex; align-items: center; gap: 10px; }
.cdr-stat-lbl {
    font-family: var(--font-mono); font-size: .66rem; color: var(--text-dim);
    min-width: 28px; text-align: right; flex-shrink: 0;
}
.cdr-stat-bar-wrap {
    flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden;
}
.cdr-stat-bar {
    height: 100%; border-radius: 3px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
}
.cdr-stat-bar::after {
    content: ''; position: absolute; top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    animation: statShine 2.5s ease-in-out infinite;
}
@keyframes statShine { 0%{left:-60%} 100%{left:160%} }
.cdr-stat-num {
    font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
    color: var(--text-sub); min-width: 26px; text-align: right; flex-shrink: 0;
}

/* 탭 (하단부) */
.cdr-section .char-info-tabs { margin-bottom: 16px; }
.cdr-body-text {
    font-family: var(--font-cond); font-size: 1rem; color: var(--text-sub);
    line-height: 1.85; white-space: pre-wrap;
}

/* 모바일 */
@media (max-width: 900px) {
    .char-detail-body { grid-template-columns: 1fr; }
    .char-detail-left { max-height: 45vh; border-right: none; border-bottom: 1px solid var(--line); }
    .char-detail-image { max-height: 45vh; }
    .cdr-info-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   캐릭터 상세 — 세로형 이미지 + 탭 4개
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 이미지 세로형 — aspect 2/3 고정 */
.char-detail-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.char-detail-left {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg1);
}
.char-detail-image {
    width: 100%;
    flex: 1;
    object-fit: cover;
    object-position: top center;
    cursor: zoom-in;
    display: block;
    min-height: 0;
}
.char-detail-right {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* 탭 패널 공통 — 패딩 */
.char-tab-panel {
    display: none;
    padding: 20px 24px;
    flex: 1;
}
.char-tab-panel.active { display: block; }

/* 탭 바 — 헤더에 붙임 */
.char-info-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
    flex-shrink: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}
.char-info-tab {
    font-family: var(--font-cond); font-size: .9rem; font-weight: 500;
    letter-spacing: .04em; padding: 11px 16px;
    color: var(--text-dim); cursor: pointer;
    border: none; border-bottom: 2px solid transparent;
    background: none; transition: var(--trans);
    position: relative;
}
.char-info-tab:hover { color: var(--text-sub); }
.char-info-tab.active { color: var(--accent-bright); border-bottom-color: var(--accent); }

/* 능력치 탭 — 레이더 + 바 나란히 */
.cdr-stats-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.cdr-radar-wrap {
    flex-shrink: 0;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 모바일 */
@media (max-width: 900px) {
    .char-detail-body { grid-template-columns: 1fr; max-height: none; overflow: visible; }
    .char-detail-left { max-height: 55vw; border-right: none; border-bottom: 1px solid var(--line); }
    .char-detail-image { max-height: 55vw; object-position: top; }
    .cdr-stats-layout { flex-direction: column; }
    .cdr-info-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   캐릭터 상세 — 50:50 + 레이더 개선 + 기타 정보
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 50:50 */
.char-detail-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.char-detail-left {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    overflow: hidden;
    background: #000;
}
.char-detail-image {
    flex: 1;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    cursor: zoom-in;
    display: block;
    min-height: 0;
}
.char-detail-right {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* 능력치 탭 — 레이더 위, 바 아래 */
.cdr-stats-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cdr-radar-wrap {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 기타 정보 탭 */
.extra-field-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.extra-field-item:last-child { border-bottom: none; }
.extra-field-key {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-dim); min-width: 80px; flex-shrink: 0;
}
.extra-field-val {
    font-family: var(--font-cond); font-size: 1rem; color: var(--text-sub); flex: 1;
}

/* 모바일 */
@media (max-width: 900px) {
    .char-detail-body { grid-template-columns: 1fr; overflow: visible; }
    .char-detail-left { max-height: 60vw; border-right: none; border-bottom: 1px solid var(--line); }
    .char-detail-image { max-height: 60vw; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   캐릭터 — 이미지 배경 + 성장탭 + 능력치 좌우배치
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 이미지 래퍼 — 배경 위에 PNG */
.char-image-wrap {
    flex: 1; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    min-height: 0;
}
.char-image-bg {
    position: absolute; inset: 0;
}
.char-detail-image {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;          /* 전신이 잘리지 않게 */
    object-position: center bottom; /* 발끝 기준 */
    display: block;
    cursor: zoom-in;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,.5));
}

/* 성장 탭 — 헤더 우측 */
.growth-tabs {
    display: flex; gap: 2px;
    background: var(--bg3); border-radius: var(--r-lg);
    padding: 3px; flex-shrink: 0;
}
.growth-tab {
    font-family: var(--font-cond); font-size: .82rem; font-weight: 500;
    padding: 5px 14px; border-radius: var(--r);
    color: var(--text-dim); cursor: pointer;
    border: none; background: none; transition: var(--trans); letter-spacing: .03em;
}
.growth-tab:hover { color: var(--text-sub); }
.growth-tab.active { background: var(--bg1); color: var(--accent-bright); box-shadow: var(--shadow-sm); }

/* 능력치 — 레이더 좌 / 바 우 */
.cdr-stats-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: center;
}
.cdr-radar-wrap {
    background: var(--bg2); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 12px;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1;
}

@media (max-width: 900px) {
    .cdr-stats-layout { grid-template-columns: 1fr; }
    .cdr-radar-wrap { max-width: 200px; margin: 0 auto; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   캐릭터 이미지 — 박스 제거, 배경에 바로 얹기
   능력치 — 레이더 위 / 바 아래
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 이미지 래퍼 — 테두리/패딩 완전 제거 */
.char-image-wrap {
    flex: 1; position: relative; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: center;
    min-height: 0; background: transparent;
    border: none !important; box-shadow: none !important;
}
.char-image-bg {
    position: absolute; inset: 0;
    border: none;
    /* 배경 그라디언트만 — 메쉬/격자 없이 깔끔하게 */
    background: radial-gradient(ellipse at 50% 110%, var(--char-color, rgba(30,127,255,0.18)) 0%, transparent 70%) !important;
    background-image: none !important;
}
.char-detail-image {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    cursor: zoom-in;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.4));
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* 능력치 탭 — 레이더 위 / 바 아래 수직 배치 */
.cdr-stats-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.cdr-radar-wrap {
    background: transparent;
    border: none;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   이미지 중앙 정렬 + 인벤토리 5x3
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.char-image-wrap {
    align-items: center !important;
    justify-content: center !important;
}
.char-detail-image {
    object-position: center center !important;
    max-height: 100%;
    width: auto !important;
    max-width: 100%;
}
/* 인벤토리 5열 × 3행 고정 */
.inv-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   캐릭터 갤러리 모드 탭
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gallery-mode-tabs {
    display: flex; gap: 2px;
    background: var(--bg3); border-radius: var(--r-lg);
    padding: 3px; flex-shrink: 0;
}
.gallery-mode-tab {
    font-family: var(--font-cond); font-size: .88rem; font-weight: 500;
    padding: 5px 16px; border-radius: var(--r);
    color: var(--text-dim); cursor: pointer;
    border: none; background: none; transition: var(--trans); letter-spacing: .03em;
}
.gallery-mode-tab:hover { color: var(--text-sub); }
.gallery-mode-tab.active { background: rgba(var(--accent-rgb),.14); color: var(--accent-bright); border-color:rgba(var(--accent-rgb),.45); box-shadow:0 0 12px rgba(var(--accent-rgb),.3), inset 0 0 8px rgba(var(--accent-rgb),.12); font-weight:700; }

/* 성장 전: 5×3 고정 그리드 */
#gallery-child {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 20px 24px;
    align-content: start;
}
.char-gallery-empty {
    background: var(--bg2); border: 1px dashed var(--line);
    border-radius: 4px; aspect-ratio: 3/4;
    pointer-events: none; opacity: .3;
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   성장 후: 팀 슬라이더
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   갤러리 모드
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gallery-hidden { display: none; }
.gallery-mode-tabs { display:flex;gap:2px;background:var(--bg3);border-radius:var(--r-lg);padding:3px;flex-shrink:0; }
.gallery-mode-tab { position:relative;font-family:var(--font-cond);font-size:.88rem;font-weight:500;padding:6px 18px;border-radius:var(--r);color:var(--text-dim);cursor:pointer;border:1px solid transparent;background:none;transition:var(--trans);letter-spacing:.02em; }
.gallery-mode-tab:hover { color:var(--text-sub); }
.gallery-mode-tab.active {
    background:rgba(var(--accent-rgb),.14);
    color:var(--accent-bright);
    border-color:rgba(var(--accent-rgb),.45);
    box-shadow:0 0 12px rgba(var(--accent-rgb),.3), inset 0 0 8px rgba(var(--accent-rgb),.12);
    font-weight:700;
}
.gallery-mode-tab.active::after {
    content:''; position:absolute; left:18%; right:18%; bottom:2px; height:2px;
    background:var(--accent-bright); border-radius:2px;
    box-shadow:0 0 6px var(--accent-bright);
}

#gallery-child-wrap { flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto; }
#gallery-child { display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:20px 24px;align-content:start; }
.char-gallery-empty { background:var(--bg2);border:1px dashed var(--line);border-radius:4px;aspect-ratio:3/4;pointer-events:none;opacity:.3;clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }

#gallery-adult { display:none; position:fixed; overflow:hidden; background:var(--bg); z-index:10; }
#gallery-adult.visible { display:flex; flex-direction:column; }

/* 탭바 위치별 — 정확한 inset */
html[data-tabpos="top"]    #gallery-adult { top:var(--topbar-h,52px); left:0; right:0; bottom:0; }
html[data-tabpos="bottom"] #gallery-adult { top:0; left:0; right:0; bottom:var(--topbar-h,52px); }
html[data-tabpos="side"]   #gallery-adult { top:0; left:0; right:0; bottom:0; }
.adult-mode-ctrl { position:absolute;top:14px;right:14px;z-index:20;backdrop-filter:blur(14px);background:rgba(4,6,11,.7);border:1px solid var(--line-mid);border-radius:var(--r-xl);padding:4px 8px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   홀로그램 슬라이더
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.team-slider-wrap {
    display:flex;align-items:center;justify-content:center;gap:0;
    flex:1;min-height:0;padding:0;position:relative;
}
.team-arrow {
    width:40px;height:40px;flex-shrink:0;z-index:20;
    border-radius:50%;background:rgba(4,6,11,.75);
    border:1px solid rgba(var(--accent-rgb),.3);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:var(--accent-bright);cursor:pointer;
    transition:var(--trans);backdrop-filter:blur(8px);
}
.team-arrow:hover { border-color:var(--accent);box-shadow:0 0 20px rgba(var(--accent-rgb),.4); }
.team-slider { flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center; }

.holo-stage {
    display:flex;align-items:center;justify-content:center;
    /* 크기/gap은 JS 인라인 스타일로 제어 */
    height:100%;
}


/* ── 카드 신규 애니메이션 ── */
@keyframes radarSpin  { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
@keyframes radarSpinR { from{transform:rotate(0deg)}   to{transform:rotate(-360deg)} }
@keyframes energyPulse { 0%,100%{height:0%;opacity:.9} 50%{height:100%;opacity:.6} }
@keyframes dotBlink   { 0%,100%{opacity:.9} 50%{opacity:.2} }
@keyframes cornerAnim { 0%,100%{opacity:.7} 50%{opacity:1} }
@keyframes segCycle   { 0%{opacity:0} 8%{opacity:1} 88%{opacity:1} 90%{opacity:0} 100%{opacity:0} }
@keyframes segLastBlink {
    0%,84%{opacity:0}
    86%{opacity:1} 88%{opacity:.15} 90%{opacity:1}
    92%{opacity:.15} 94%{opacity:1} 96%{opacity:.15}
    98%,100%{opacity:1}
}

/* ── 등장 애니메이션 — 홀로그램 투사 + RGB 채널 분리 ── */
@keyframes holoIn {
    /* 0% 투사 빔 시작 */
    0%   { opacity:0;
           clip-path:inset(100% 0 0 0);
           transform:translateY(calc(var(--yoff,0px) + 50px)) scaleY(.5) scaleX(1.1);
           filter:brightness(10) blur(6px) saturate(0) hue-rotate(200deg); }
    /* 스캔하며 차오름 */
    6%   { opacity:1;
           clip-path:inset(88% 0 0 0);
           transform:translateY(calc(var(--yoff,0px) + 38px)) scaleY(.65) scaleX(1.07);
           filter:brightness(7) blur(3px) saturate(0) hue-rotate(160deg); }
    15%  { clip-path:inset(65% 0 0 0);
           transform:translateY(calc(var(--yoff,0px) + 22px)) scaleY(.85) scaleX(1.04);
           filter:brightness(5) blur(1.5px) saturate(.1) hue-rotate(90deg); }
    /* 글리치 — RGB 채널 분리 */
    24%  { clip-path:inset(38% 0 0 0);
           transform:translateY(calc(var(--yoff,0px) + 10px)) translateX(-8px);
           filter:brightness(4) saturate(0) hue-rotate(-60deg); }
    26%  { transform:translateY(calc(var(--yoff,0px) + 8px)) translateX(10px);
           filter:brightness(6) saturate(0) hue-rotate(120deg); }
    28%  { clip-path:inset(18% 0 0 0);
           transform:translateY(calc(var(--yoff,0px) + 5px)) translateX(-4px);
           filter:brightness(3.5) blur(.4px) saturate(.2); }
    /* 정착 직전 */
    38%  { clip-path:inset(3% 0 0 0);
           transform:translateY(calc(var(--yoff,0px) + 1px));
           filter:brightness(2.2) saturate(.7); }
    /* 완전 표시 — 안정화 flicker */
    44%  { clip-path:inset(0% 0 0 0);
           transform:translateY(var(--yoff,0px));
           filter:brightness(3) saturate(1.4); }
    48%  { filter:brightness(.5) saturate(.3); }
    52%  { filter:brightness(2.2) saturate(1.5) hue-rotate(15deg); }
    57%  { filter:brightness(.7) saturate(.5); }
    63%  { filter:brightness(1.8) saturate(1.2); }
    70%  { filter:brightness(.85) saturate(.75); }
    78%  { filter:brightness(1.4) saturate(1.1); }
    86%  { filter:brightness(.92) saturate(.9); }
    93%  { filter:brightness(1.1) saturate(1.02); }
    100% { opacity:1;
           clip-path:inset(0% 0 0 0);
           transform:translateY(var(--yoff,0px));
           filter:brightness(1) blur(0) saturate(1); }
}








/* 카드 기본 */
/* outer: flex 크기 + transform zigzag + 등장 애니메이션 */
.holo-card-outer {
    flex:none;
    transform:translateY(var(--yoff,0px));
    opacity:0;
    animation:holoIn 1.4s cubic-bezier(.16,1,.3,1) var(--delay,0s) forwards;
    isolation:isolate;
    will-change:transform,opacity;
}
/* inner: overflow 허용 — 슬라이스가 카드 밖으로 삐져나갈 수 있게 */
.holo-card {
    width:100%; height:100%;
    position:relative; cursor:pointer;
    border:1px solid rgba(var(--accent-rgb),.20);
    overflow:visible;
    background:#060810;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.holo-card-outer:hover .holo-card {
    border-color:rgba(var(--accent-rgb),.50);
    box-shadow:0 0 14px rgba(var(--accent-rgb),.09), inset 0 0 10px rgba(var(--accent-rgb),.03);
}
.holo-card-outer:hover { z-index:5; isolation:isolate; }
.holo-card-empty { width:100%; height:100%; border:1px dashed rgba(var(--accent-rgb),.06); opacity:.05; pointer-events:none; background:var(--bg1); }

/* 카드별 완전 무작위 타이밍 */
.holo-card:nth-child(1) { --delay:0s;   --ga-dur:14s; --ga-delay:0.5s;  --gb-dur:11s; --gb-delay:3.0s; }
.holo-card:nth-child(2) { --delay:.13s; --ga-dur:10s; --ga-delay:8.4s;  --gb-dur:17s; --gb-delay:2.1s; }
.holo-card:nth-child(3) { --delay:.26s; --ga-dur:18s; --ga-delay:0.7s;  --gb-dur:12s; --gb-delay:9.5s; }
.holo-card:nth-child(4) { --delay:.39s; --ga-dur:12s; --ga-delay:5.3s;  --gb-dur:9s;  --gb-delay:3.2s; }
.holo-card:nth-child(5) { --delay:.52s; --ga-dur:9s;  --ga-delay:7.1s;  --gb-dur:15s; --gb-delay:0.4s; }

/* SF 코너 */
.holo-corner { position:absolute;width:20px;height:20px;z-index:4;pointer-events:none; }
.holo-corner.tl { top:0;left:0;border-top:1.5px solid var(--hcolor,var(--accent));border-left:1.5px solid var(--hcolor,var(--accent));filter:drop-shadow(0 0 2px var(--hcolor,var(--accent))); opacity:.7; }
.holo-corner.tr { top:0;right:0;border-top:1.5px solid var(--hcolor,var(--accent));border-right:1.5px solid var(--hcolor,var(--accent));filter:drop-shadow(0 0 2px var(--hcolor,var(--accent))); opacity:.7; }
.holo-corner.bl { bottom:0;left:0;border-bottom:1.5px solid var(--hcolor,var(--accent));border-left:1.5px solid var(--hcolor,var(--accent));filter:drop-shadow(0 0 2px var(--hcolor,var(--accent))); opacity:.7; }
.holo-corner.br { bottom:0;right:0;border-bottom:1.5px solid var(--hcolor,var(--accent));border-right:1.5px solid var(--hcolor,var(--accent));filter:drop-shadow(0 0 2px var(--hcolor,var(--accent))); opacity:.7; }

/* 스캔라인 — 아래서 위로, 완전 무작위 타이밍 */
@keyframes scanUp {
    0%   { bottom:var(--scan-start,-3px);opacity:0; }
    5%   { opacity:.7; }
    95%  { opacity:.7; }
    100% { bottom:103%;opacity:0; }
}
.holo-scanline {
    position:absolute;left:0;right:0;height:1px;z-index:1;pointer-events:none;
    background:linear-gradient(90deg, transparent 5%, var(--hcolor,var(--accent)) 30%, var(--hcolor,var(--accent)) 70%, transparent 95%);
    box-shadow:0 0 4px var(--hcolor,var(--accent));
    animation:scanUp var(--scan-dur,8s) linear var(--scan-delay,0s) infinite;
}
/* 카드별 완전 다른 속도와 딜레이 */
.holo-card:nth-child(1) .holo-scanline { --scan-dur:9.3s;  --scan-delay:0s;   --scan-start:0%; }
.holo-card:nth-child(2) .holo-scanline { --scan-dur:7.1s;  --scan-delay:2.1s; --scan-start:28%; }
.holo-card:nth-child(3) .holo-scanline { --scan-dur:11.4s; --scan-delay:4.7s; --scan-start:55%; }
.holo-card:nth-child(4) .holo-scanline { --scan-dur:6.8s;  --scan-delay:1.4s; --scan-start:72%; }
.holo-card:nth-child(5) .holo-scanline { --scan-dur:8.7s;  --scan-delay:6.3s; --scan-start:17%; }

/* 도트 질감 — canvas가 렌더링 담당, CSS overlay 비활성 */
.holo-dots-overlay {
    display:none;
}

/* 거친 그레인 텍스처 오버레이 — 비활성 */
.holo-grain-overlay {
    display:none;
}
/* 수평 스크래치 라인 — 비활성 */
.holo-scratch-overlay {
    display:none;
}

/* 노이즈 줄 */

    94%      { opacity:0; }
    94.5%    { opacity:.55;background-position:0 0; }
    95.5%    { opacity:.22;background-position:0 4px; }
    96.5%    { opacity:.44;background-position:0 -3px; }
    97.5%    { opacity:.18;background-position:0 2px; }
    98%      { opacity:0; }
}

.holo-card:nth-child(1) 
.holo-card:nth-child(2) 
.holo-card:nth-child(3) 
.holo-card:nth-child(4) 
.holo-card:nth-child(5) 

/* 이미지 */


/* 하단 정보 */
.holo-info { position:absolute;bottom:0;left:0;right:0;padding:40px 14px 14px;background:linear-gradient(to top, rgba(4,6,11,.98) 0%, rgba(4,6,11,.6) 60%, transparent 100%);z-index:8;text-align:center;transform:translateY(110%);opacity:0;transition:transform .28s ease, opacity .28s ease;pointer-events:none;visibility:hidden; }
.holo-card-outer:hover .holo-info { transform:translateY(0);opacity:1;visibility:visible; }
/* canvas opacity는 항상 1 유지 */
.holo-name    { font-family:var(--font-head);font-size:clamp(1rem,2.2vw,1.8rem);letter-spacing:.08em;color:#fff;margin-bottom:7px;text-shadow:0 0 20px var(--hcolor,var(--accent)),0 0 40px rgba(var(--accent-rgb),.3); }
.holo-faction { font-family:var(--font-mono);font-size:.72rem;color:rgba(255,255,255,.38); }
.holo-id      { position:absolute;top:8px;right:10px;left:auto;z-index:5;font-family:var(--font-mono);font-size:.52rem;color:var(--hcolor,var(--accent));opacity:.55;letter-spacing:.12em;text-shadow:0 0 8px var(--hcolor,var(--accent)); }

/* 큰 영문 이름 (항상 표시, 레퍼런스: NA YURI / KIM JINA) */
.holo-enname {
    position:absolute; left:14px; right:14px; bottom:22px; z-index:6;
    font-family:var(--font-head); font-weight:400;
    font-size:clamp(1.4rem, 3.4vw, 2.6rem); line-height:.96; letter-spacing:.04em;
    color:#fff; word-break:keep-all;
    text-shadow:0 0 10px var(--hcolor,var(--accent)), 0 0 22px rgba(var(--accent-rgb),.18), 0 2px 6px rgba(0,0,0,.9);
    transition:opacity .1s steps(2) .12s;
}
/* 코드네임: 호버 시 글리치로 깨지며 사라짐 */
.holo-card-outer:hover .holo-enname { opacity:0; animation:hglitchOut .2s steps(1) forwards; }
.holo-enname::before, .holo-enname::after {
    content:attr(data-text); position:absolute; left:0; top:0; width:100%;
    color:#fff; opacity:0; pointer-events:none; text-shadow:inherit; clip-path:inset(0);
}
.holo-card-outer:hover .holo-enname::before { animation:hglitchR .2s steps(2) forwards; }
.holo-card-outer:hover .holo-enname::after  { animation:hglitchB .2s steps(2) forwards; }

/* 실명 — 호버 시 코드네임과 동일한 자리/폰트로 글리치 등장 */
.holo-realname {
    position:absolute; left:14px; right:14px; bottom:22px; z-index:7;
    font-family:var(--font-head); font-weight:400;
    font-size:clamp(1.4rem, 3.4vw, 2.6rem); line-height:.96; letter-spacing:.04em;
    color:#fff; word-break:keep-all;
    text-shadow:0 0 10px var(--hcolor,var(--accent)), 0 0 22px rgba(var(--accent-rgb),.18), 0 2px 6px rgba(0,0,0,.9);
    opacity:0; pointer-events:none;
    display:flex; flex-direction:column; gap:5px;
}
.holo-card-outer:hover .holo-realname { animation:hglitchIn .26s steps(1) .1s forwards; }
.holo-realname-main { position:relative; display:inline-block; }
.holo-realname-main::before, .holo-realname-main::after {
    content:attr(data-text); position:absolute; left:0; top:0; width:100%;
    color:#fff; opacity:0; pointer-events:none; text-shadow:none;
}
.holo-card-outer:hover .holo-realname-main::before { animation:hglitchR .26s steps(2) .1s forwards; }
.holo-card-outer:hover .holo-realname-main::after  { animation:hglitchB .26s steps(2) .1s forwards; }
.holo-realname-sub { display:none; }

/* ── 글리치 키프레임 ── */
@keyframes hglitchOut {
    0%   { opacity:1; transform:translate(0); clip-path:inset(0); }
    20%  { opacity:1; transform:translate(-3px,1px); clip-path:inset(20% 0 50% 0); }
    40%  { opacity:1; transform:translate(4px,-2px); clip-path:inset(60% 0 10% 0); }
    60%  { opacity:.7; transform:translate(-5px,0); clip-path:inset(10% 0 70% 0); }
    80%  { opacity:.3; transform:translate(2px,1px); clip-path:inset(40% 0 30% 0); }
    100% { opacity:0; transform:translate(0); }
}
@keyframes hglitchIn {
    0%   { opacity:0; transform:translate(0); clip-path:inset(0); }
    1%   { opacity:1; transform:translate(5px,-1px); clip-path:inset(50% 0 20% 0); }
    25%  { opacity:1; transform:translate(-4px,2px); clip-path:inset(10% 0 60% 0); }
    50%  { opacity:1; transform:translate(3px,-1px); clip-path:inset(70% 0 5% 0); }
    70%  { opacity:1; transform:translate(-2px,1px); clip-path:inset(30% 0 40% 0); }
    100% { opacity:1; transform:translate(0); clip-path:inset(0); }
}
@keyframes hglitchR {
    0%,100% { opacity:0; transform:translate(0); }
    10% { opacity:.85; color:#0ff; transform:translate(-3px,0); }
    40% { opacity:.7;  color:#0ff; transform:translate(-5px,1px); }
    70% { opacity:.5;  color:#0ff; transform:translate(-2px,0); }
}
@keyframes hglitchB {
    0%,100% { opacity:0; transform:translate(0); }
    10% { opacity:.85; color:#f0f; transform:translate(3px,0); }
    40% { opacity:.7;  color:#f0f; transform:translate(5px,-1px); }
    70% { opacity:.5;  color:#f0f; transform:translate(2px,0); }
}

/* 기존 슬라이드업 오버레이 호버 시 비활성 */
.holo-card-outer:hover .holo-info { transform:translateY(110%); opacity:0; visibility:hidden; }

/* ── 레이더 링 (좌상단) ── */
.holo-radar { position:absolute; top:12px; left:10px; width:54px; height:54px; z-index:5; pointer-events:none; overflow:visible; }
.holo-radar-spin  { transform-origin:27px 27px; animation:radarSpin  var(--rs-dur,8s)  linear infinite; }
.holo-radar-spinr { transform-origin:27px 27px; animation:radarSpinR var(--rr-dur,5s) linear infinite; }

/* ── 에너지 바 (우측 세로) ── */
.holo-energy { position:absolute; right:8px; top:78px; bottom:50px; width:6px; z-index:5; display:flex; flex-direction:column; gap:3px; pointer-events:none; }
.holo-energy-bar { flex:1; border:1px solid var(--hcolor,var(--accent)); position:relative; overflow:hidden; background:rgba(4,6,11,.5); }
.holo-energy-fill { position:absolute; bottom:0; left:0; right:0; background:var(--hcolor,var(--accent)); animation:energyPulse var(--ep-dur,2s) ease-in-out var(--ep-dly,0s) infinite; }

/* ── 도트 (좌측 세로) ── */
.holo-dots-left { position:absolute; left:6px; top:78px; z-index:5; display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.holo-dot { width:4px; height:4px; border-radius:50%; background:var(--hcolor,var(--accent)); animation:dotBlink var(--db-dur,1.8s) ease-in-out var(--db-dly,0s) infinite; }

/* ── 세그먼트 에너지 바 (최하단) ── */
.holo-seg-bar { position:absolute; bottom:0; left:0; right:0; height:8px; z-index:6; display:flex; gap:2px; padding:0 4px; align-items:center; pointer-events:none; }
.holo-seg { flex:1; height:5px; background:var(--hcolor,var(--accent)); opacity:0; }
.holo-seg.s1 { animation:segCycle var(--seg-cycle,5s) linear var(--seg-co,0s)                           infinite; }
.holo-seg.s2 { animation:segCycle var(--seg-cycle,5s) linear calc(var(--seg-co,0s) + var(--seg-step,.5s))     infinite; }
.holo-seg.s3 { animation:segCycle var(--seg-cycle,5s) linear calc(var(--seg-co,0s) + var(--seg-step,.5s)*2)   infinite; }
.holo-seg.s4 { animation:segCycle var(--seg-cycle,5s) linear calc(var(--seg-co,0s) + var(--seg-step,.5s)*3)   infinite; }
.holo-seg.s5 { animation:segCycle var(--seg-cycle,5s) linear calc(var(--seg-co,0s) + var(--seg-step,.5s)*4)   infinite; }
.holo-seg.s6 { animation:segLastBlink var(--seg-cycle,5s) linear var(--seg-co,0s) infinite; }

/* 카드별 레이더/세그 타이밍 */
.holo-card:nth-child(1) { --rs-dur:8s;  --rr-dur:5s;  --seg-cycle:4.5s; --seg-step:.5s; --seg-co:0s;   }
.holo-card:nth-child(2) { --rs-dur:12s; --rr-dur:7s;  --seg-cycle:5.5s; --seg-step:.6s; --seg-co:.8s;  }
.holo-card:nth-child(3) { --rs-dur:6s;  --rr-dur:4s;  --seg-cycle:3.8s; --seg-step:.4s; --seg-co:1.2s; }
.holo-card:nth-child(4) { --rs-dur:5s;  --rr-dur:3.5s;--seg-cycle:3.2s; --seg-step:.35s;--seg-co:2s;   }
.holo-card:nth-child(5) { --rs-dur:10s; --rr-dur:6s;  --seg-cycle:4.8s; --seg-step:.55s;--seg-co:.4s;  }

/* 코너 애니메이션 */
.holo-corner { animation:cornerAnim 3s ease-in-out infinite; }
.holo-corner:nth-child(2) { animation-delay:.75s; }
.holo-corner:nth-child(3) { animation-delay:1.5s; }
.holo-corner:nth-child(4) { animation-delay:2.25s; }

/* holo-bracket 제거 */
.holo-bracket { display:none; }

/* SPECIES / FEATURE 메타 슬롯 (우측 세로) */
.holo-meta { position:absolute; top:30px; right:0; z-index:5; display:flex; flex-direction:column; gap:4px; align-items:flex-end;
    opacity:.85; transition:opacity .28s ease; }
/* .holo-meta 호버 시에도 우측 상단 고정 */
.holo-meta-row { display:flex; flex-direction:column; align-items:flex-end; background:rgba(4,6,11,.55); border-right:2px solid var(--hcolor,var(--accent)); padding:3px 8px 3px 7px; backdrop-filter:blur(2px); }
.holo-meta-key { font-family:var(--font-mono); font-size:.46rem; letter-spacing:.14em; color:var(--hcolor,var(--accent)); line-height:1.2; text-shadow:0 0 6px var(--hcolor,var(--accent)); }
.holo-meta-val { font-family:var(--font-ui); font-size:.6rem; color:rgba(255,255,255,.85); line-height:1.25; text-align:right; max-width:96px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 도트 내비 */
.team-dots { display:flex;justify-content:center;gap:8px;padding:10px 0 16px;flex-shrink:0; }
.team-dot { width:5px;height:5px;border-radius:50%;background:var(--bg4);cursor:pointer;transition:all var(--trans); }
.team-dot.active { background:var(--accent);width:16px;border-radius:3px;box-shadow:0 0 6px rgba(var(--accent-rgb),.5); }

@media (max-width:900px) {
    #gallery-child { grid-template-columns:repeat(3,1fr); }
    .holo-stage { gap:4px; }
    .team-slider-wrap { padding:4px 8px; }
}
@media (max-width:600px) {
    #gallery-child { grid-template-columns:repeat(2,1fr); }
}

/* ── 이미지 레이어 기반 글리치 슬라이스 ── */
.holo-img-base,
.holo-slice-a,
.holo-slice-b {
    position:absolute; inset:0;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center top;
    pointer-events:none;
}
.holo-img-base { z-index:2; }

/* 슬라이스 A — 청록 색수차, 여러 조각이 제각각 어긋남 */
@keyframes sliceA {
    0%,100%  { opacity:0; }
    88%      { opacity:0; transform:translateX(0);
               clip-path:polygon(0 0,45% 0,45% 40%,0 40%); }
    88.5%    { opacity:1; transform:translateX(-18px);
               clip-path:polygon(0 0%,45% 0%,45% 12%,0 12%);
               filter:hue-rotate(-90deg) saturate(4) brightness(2.2); }
    89%      { transform:translateX(12px);
               clip-path:polygon(0 12%,45% 12%,45% 26%,0 26%);
               filter:hue-rotate(60deg) saturate(3.5) brightness(1.9); }
    89.5%    { transform:translateX(-22px);
               clip-path:polygon(0 26%,45% 26%,45% 40%,0 40%);
               filter:hue-rotate(180deg) saturate(4) brightness(2.1); }
    90%      { opacity:0; transform:translateX(0);
               clip-path:polygon(0 0,45% 0,45% 40%,0 40%); filter:none; }
}

/* 슬라이스 B — 적색 색수차, 우하단 영역 */
@keyframes sliceB {
    0%,100%  { opacity:0; }
    91%      { opacity:0; transform:translateX(0);
               clip-path:polygon(55% 62%,100% 62%,100% 100%,55% 100%); }
    91.5%    { opacity:1; transform:translateX(20px);
               clip-path:polygon(55% 62%,100% 62%,100% 75%,55% 75%);
               filter:hue-rotate(90deg) saturate(4) brightness(2.1); }
    92%      { transform:translateX(-16px);
               clip-path:polygon(55% 75%,100% 75%,100% 87%,55% 87%);
               filter:hue-rotate(-120deg) saturate(3.5) brightness(2.4); }
    92.5%    { transform:translateX(24px);
               clip-path:polygon(55% 87%,100% 87%,100% 100%,55% 100%);
               filter:hue-rotate(280deg) saturate(4) brightness(1.8); }
    93%      { opacity:0; transform:translateX(0);
               clip-path:polygon(55% 62%,100% 62%,100% 100%,55% 100%); filter:none; }
}

.holo-slice-a {
    z-index:3;
    opacity:0;
    animation:sliceA var(--ga-dur,13s) linear var(--gd1,0s) infinite;
    mix-blend-mode:screen;
    background-color:rgba(0,220,255,.15);
}
.holo-slice-b {
    z-index:3;
    opacity:0;
    animation:sliceB var(--gb-dur,11s) linear var(--gd2,0s) infinite;
    mix-blend-mode:screen;
    background-color:rgba(255,50,80,.12);
}

/* 카드 hover — 이미지 살짝 확대 */
.holo-card:hover .holo-img-base { transform:scale(1.04) translateY(-3px); transition:transform .3s ease; }

.holo-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; display:block; overflow:visible; opacity:1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   관리자 패널
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.settings-group-label {
    font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 8px; margin-top: 4px;
}
.admin-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.admin-action-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; padding: 14px 10px;
    background: var(--bg2); border: 1px solid var(--line);
    border-radius: var(--r-lg); cursor: pointer;
    color: var(--text-sub); font-family: var(--font-cond);
    font-size: .82rem; letter-spacing: .03em;
    transition: var(--trans); text-align: center;
}
.admin-action-btn i { font-size: 1.3rem; color: var(--accent); }
.admin-action-btn:hover {
    background: var(--muted-acc);
    border-color: rgba(var(--accent-rgb), .4);
    color: var(--text);
}

/* ═══════════════════════════════════════════════
   EXPLORE — D-pad 모바일 조작
═══════════════════════════════════════════════ */
.dpad-btn {
    width: 44px; height: 44px;
    background: rgba(15,17,23,0.85);
    border: 1px solid var(--line-mid);
    border-radius: var(--r);
    color: var(--text-sub);
    font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--trans), border-color var(--trans);
    backdrop-filter: blur(6px);
}
.dpad-btn:active, .dpad-btn:hover {
    background: var(--muted-acc);
    border-color: rgba(var(--accent-rgb), .4);
    color: var(--accent);
}
.dpad-btn.dpad-act {
    background: rgba(30,127,255,0.15);
    border-color: rgba(var(--accent-rgb), .35);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
}

/* 조사 텍스트박스 타이핑 커서 */
#explore-text::after {
    content: '▌';
    animation: blink-cursor .7s step-end infinite;
    color: var(--accent);
    font-size: .7em;
    margin-left: 2px;
}
@keyframes blink-cursor { 0%,100%{opacity:1} 50%{opacity:0} }

/* 맵 에디터 오브젝트 패널 */
#me-object-panel {
    font-family: var(--font-ui);
}

/* ═══════════════════════════════════════════════
   EXPLORE — 전투 파티 카드
═══════════════════════════════════════════════ */
@keyframes btEnemyFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.bt-party-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px 6px;
    width: 90px;
    flex-shrink: 0;
    background: rgba(8,12,20,0.75);
    border: 1px solid rgba(45,139,255,0.15);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    backdrop-filter: blur(8px);
}
.bt-party-card img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(45,139,255,0.2);
    transition: border-color .15s;
}
.bt-party-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(30,127,255,0.35);
    transform: translateY(-4px);
}
.bt-party-card.active img {
    border-color: var(--accent);
}
.bt-party-card.dead {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: default;
}
.bt-card-name {
    font-family: var(--font-ui);
    font-size: .65rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.bt-card-hp-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.bt-card-hp-bar > div {
    height: 100%;
    border-radius: 2px;
    transition: width .4s ease;
}
.bt-card-hp-text {
    font-family: var(--font-mono);
    font-size: .58rem;
    color: var(--text-dim);
}
.bt-card-dead {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 1.4rem;
    color: var(--red);
    letter-spacing: .1em;
    text-shadow: 0 0 12px rgba(255,51,85,0.6);
}

/* ═══════════════════════════════════════════════
   EXPLORE — 비주얼노벨 대화창
═══════════════════════════════════════════════ */
@keyframes vnBlink {
    0%,100% { opacity:1; }
    50%      { opacity:0.2; }
}

/* 반신상 등장 애니메이션 */
#vn-portrait-wrap {
    transition: opacity .25s ease;
}
#vn-portrait {
    image-rendering: auto;
}

/* 대화창 슬라이드업 */
#explore-textbox {
    animation: vnSlideUp .2s ease;
}
@keyframes vnSlideUp {
    from { transform: translateY(20px); opacity:0; }
    to   { transform: translateY(0);    opacity:1; }
}

/* 화자명 네임플레이트 느낌 */
#explore-speaker:not(:empty) {
    display: inline-block;
    padding: 2px 12px 2px 0;
    border-bottom: 1.5px solid rgba(30,127,255,0.5);
    margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════
   SETTINGS — 폰트 피커 카드
═══════════════════════════════════════════════ */
.font-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 10px;
    background: var(--bg2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    text-align: left;
}
.font-card:hover {
    border-color: var(--line-hi);
    background: var(--bg3);
}
.font-card.active {
    border-color: var(--accent);
    background: var(--muted-acc);
    box-shadow: var(--glow-sm);
}
.font-card-preview {
    font-size: 1.25rem;
    color: var(--text);
    line-height: 1.4;
}
.font-card-label {
    font-family: var(--font-mono);
    font-size: .6rem;
    color: var(--text-dim);
    letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════
   PROFILE EDIT MODAL — 탭
═══════════════════════════════════════════════ */
.cedit-tab {
    padding: 10px 16px;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .12s, border-color .12s;
    white-space: nowrap;
}
.cedit-tab:hover { color: var(--text); }
.cedit-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.cedit-tab-panel { animation: fadeInUp .15s ease; }
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── EXPLORE 전체화면 ── */
#page-explore {
    position: fixed;
    inset: 0;
    z-index: 10;
    padding: 0 !important;
    overflow: hidden !important;
}
#page-explore.page { display: none; }
#page-explore.page.active { display: block; }