/* =========================================================
   AI-Men · 교회 관리자 콘솔 — 디자인 토큰 & 컴포넌트
   Navy sidebar · Light content · Gold accent · Pretendard
   ========================================================= */
:root{
  /* brand */
  --navy:#0A1024; --navy-2:#121A36; --navy-3:#1E2A52; --navy-line:rgba(255,255,255,0.09);
  --gold:#FFC529; --gold-2:#C99A2E; --gold-ink:#8A6A12; --gold-soft:#FBF3D9; --gold-soft-2:#F6ECCB;
  /* ink */
  --ink:#16203A; --ink-2:#566076; --ink-3:#8A93A8; --ink-4:#AEB6C6;
  /* surfaces */
  --bg:#F1F3F8; --panel:#FFFFFF; --panel-2:#F7F9FC; --fill:#EEF1F6;
  --line:#E4E8F0; --line-2:#EDF0F6;
  /* status */
  --done:#1F9D57; --done-bg:#E5F5EC;
  --wip:#E08A1E; --wip-bg:#FBEFD9;
  --todo:#8A93A8; --todo-bg:#EDEFF4;
  --blue:#3565C4; --blue-bg:#E7EEFB;
  --danger:#E0483D; --danger-bg:#FCEAE8;
  --purple:#7B5BD6; --purple-bg:#F0EBFB;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(16,24,48,0.05), 0 1px 3px rgba(16,24,48,0.04);
  --shadow:0 4px 14px rgba(16,24,48,0.07);
  --shadow-lg:0 18px 50px rgba(16,24,48,0.18);
  --sidebar-w:250px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Pretendard Variable',Pretendard,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:14px; line-height:1.5; letter-spacing:-0.2px;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:-0.2px;}
input,textarea,select{font-family:inherit;letter-spacing:-0.2px;color:inherit;}
img{display:block;max-width:100%;}
::selection{background:var(--gold);color:var(--navy);}

/* brand cross */
.cross{ position:relative; flex:0 0 auto; width:22px; height:22px; }
.cross::before,.cross::after{ content:''; position:absolute; background:var(--gold); border-radius:3px; }
.cross::before{ width:4.5px; height:100%; left:50%; transform:translateX(-50%); }
.cross::after{ height:4.5px; width:74%; top:33%; left:50%; transform:translateX(-50%); }

/* ============ LAYOUT ============ */
.shell{ display:flex; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 auto; position:fixed; inset:0 auto 0 0; z-index:40;
  background:linear-gradient(185deg,#0C1430 0%, #0A1024 60%, #0B0F22 100%);
  color:#E7EBF6; display:flex; flex-direction:column; padding:22px 16px 16px;
  border-right:1px solid rgba(255,255,255,0.05);
}
.sb-brand{ display:flex; align-items:center; gap:12px; padding:6px 10px 20px; }
.sb-brand .logo{ width:38px; height:38px; border-radius:11px; background:linear-gradient(160deg,#1B2A5A,#0E1838); border:1px solid rgba(255,197,41,0.35); display:grid; place-items:center; box-shadow:inset 0 0 18px rgba(255,197,41,0.12); }
.sb-brand .logo .cross{ width:18px; height:18px; }
.sb-brand .bt{ font-size:17px; font-weight:900; letter-spacing:-0.5px; color:#fff; line-height:1; }
.sb-brand .bs{ font-size:11px; font-weight:700; color:#8C97BC; margin-top:3px; letter-spacing:0.2px; white-space:nowrap; }
.sb-sec{ font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#646F92; padding:16px 12px 7px; }
.sb-nav{ display:flex; flex-direction:column; gap:3px; }
.sb-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; color:#AEB7D4; font-size:14px; font-weight:600; position:relative; transition:background .14s, color .14s; width:100%; text-align:left; white-space:nowrap; }
.sb-item .ic{ width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center; color:#7E89AE; transition:color .14s; }
.sb-item .ic svg{ width:19px; height:19px; }
.sb-item-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sb-item-label{ font-size:14px; font-weight:600; line-height:1.2; }
.sb-item-app{ font-size:10.5px; font-weight:600; color:#646F92; letter-spacing:-0.1px; }
.sb-item.on .sb-item-app{ color:#A98E4E; }
.sb-item:hover .sb-item-app{ color:#828DAE; }
.sb-item:hover{ background:rgba(255,255,255,0.05); color:#EAEEF8; }
.sb-item:hover .ic{ color:#C2CBE6; }
.sb-item.on{ background:linear-gradient(100deg,rgba(255,197,41,0.18),rgba(255,197,41,0.07)); color:#FFFFFF; }
.sb-item.on .ic{ color:var(--gold); }
.sb-item.on::before{ content:''; position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:4px; height:22px; background:var(--gold); border-radius:0 4px 4px 0; }
.sb-item .badge{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--gold); color:var(--navy); font-size:11.5px; font-weight:800; display:grid; place-items:center; }
.sb-item .badge.red{ background:var(--danger); color:#fff; }
.sb-foot{ margin-top:auto; padding-top:14px; }
.sb-user{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:13px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); }
.sb-user .av{ width:36px; height:36px; border-radius:50%; flex:0 0 auto; background:linear-gradient(150deg,#FFD873,#E0A82E); display:grid; place-items:center; font-weight:800; color:#3A2D07; font-size:14px; }
.sb-user .nm{ font-size:13.5px; font-weight:800; color:#EDF0F8; line-height:1.2; white-space:nowrap; }
.sb-user .rl{ font-size:11px; color:#8C97BC; margin-top:2px; }
.sb-user .out{ margin-left:auto; color:#7E89AE; width:18px; height:18px; }

/* ---- Main ---- */
.main{ flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:30; height:68px; flex:0 0 auto; background:rgba(241,243,248,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px; padding:0 32px; }
.tb-title{ display:flex; flex-direction:column; gap:2px; }
.tb-title .t{ font-size:20px; font-weight:900; letter-spacing:-0.6px; }
.tb-title .s{ font-size:12.5px; color:var(--ink-3); font-weight:500; }
.tb-spacer{ flex:1; }
.tb-search{ display:flex; align-items:center; gap:9px; height:40px; width:280px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:0 13px; color:var(--ink-3); transition:border-color .15s, box-shadow .15s; }
.tb-search:focus-within{ border-color:var(--gold-2); box-shadow:0 0 0 3px var(--gold-soft); }
.tb-search svg{ width:17px; height:17px; flex:0 0 auto; }
.tb-search input{ border:none; outline:none; background:none; flex:1; font-size:14px; color:var(--ink); }
.tb-icon{ width:40px; height:40px; border-radius:11px; background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); position:relative; transition:background .14s; }
.tb-icon:hover{ background:var(--fill); }
.tb-icon svg{ width:19px; height:19px; }
.tb-icon .dot{ position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:1.5px solid var(--panel); }
.tb-date{ font-size:13px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; }

.content{ padding:28px 32px 56px; flex:1; }
.page{ max-width:1280px; margin:0 auto; }
.page-narrow{ max-width:1080px; margin:0 auto; }

/* page guide banner — explains which app screen this admin page controls */
.page-guide{ display:flex; align-items:center; gap:14px; padding:14px 18px; margin-bottom:20px; border-radius:var(--r-lg); background:linear-gradient(100deg,#FBF3D9,#FFFDF7); border:1px solid var(--gold-2); }
.page-guide .pg-icon{ width:40px; height:40px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; background:var(--gold); color:#3A2D07; }
.page-guide .pg-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.page-guide .pg-app{ font-size:11.5px; font-weight:800; color:var(--gold-ink); letter-spacing:-0.1px; }
.page-guide .pg-text{ font-size:13.5px; color:var(--ink-2); line-height:1.5; letter-spacing:-0.2px; }

/* fade-in on screen switch — transform-only so content stays visible even if
   the animation is paused/frozen (never gate visibility on opacity here). */
@media (prefers-reduced-motion: no-preference){
  .screen-anim{ animation:fadeUp .34s cubic-bezier(.2,.7,.3,1); }
  @keyframes fadeUp{ from{ transform:translateY(9px);} to{ transform:none;} }
}

/* ============ PRIMITIVES ============ */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.card-pad{ padding:20px 22px; }
.row{ display:flex; align-items:center; gap:12px; }
.col{ display:flex; flex-direction:column; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grow{ flex:1; min-width:0; }
.muted{ color:var(--ink-3); }
.mono{ font-family:var(--mono); }
.tnum{ font-variant-numeric:tabular-nums; }

.eyebrow{ font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold-2); }
.sec-title{ font-size:16px; font-weight:800; letter-spacing:-0.4px; }
.sec-sub{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* status badges */
.st{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; letter-spacing:-0.2px; white-space:nowrap; }
.st .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.st.done{ background:var(--done-bg); color:var(--done); }
.st.wip{ background:var(--wip-bg); color:var(--wip); }
.st.todo{ background:var(--todo-bg); color:var(--todo); }
.st.gold{ background:var(--gold-soft); color:var(--gold-ink); }
.st.blue{ background:var(--blue-bg); color:var(--blue); }
.st.danger{ background:var(--danger-bg); color:var(--danger); }
.st.purple{ background:var(--purple-bg); color:var(--purple); }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; padding:0 16px; border-radius:11px; font-size:14px; font-weight:700; border:1px solid var(--line); background:var(--panel); color:var(--ink); transition:background .14s, border-color .14s, transform .06s, box-shadow .14s; white-space:nowrap; }
.btn:hover{ background:var(--fill); }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:17px; height:17px; }
.btn.primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn.primary:hover{ background:#161F3E; }
.btn.gold{ background:var(--gold); border-color:var(--gold); color:#3A2D07; box-shadow:0 2px 0 var(--gold-2); }
.btn.gold:hover{ background:#FFCF45; }
.btn.gold:active{ box-shadow:none; }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--ink-2); }
.btn.ghost:hover{ background:var(--fill); }
.btn.danger{ background:var(--danger-bg); border-color:transparent; color:var(--danger); }
.btn.danger:hover{ background:#F8DCD9; }
.btn.ok{ background:var(--done-bg); border-color:transparent; color:var(--done); }
.btn.ok:hover{ background:#D6EFDF; }
.btn.sm{ height:32px; padding:0 11px; font-size:13px; border-radius:9px; gap:5px; }
.btn.sm svg{ width:15px; height:15px; }
.btn.icon{ width:40px; padding:0; }
.btn.icon.sm{ width:32px; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* chips / filter tabs */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:10px; font-size:13px; font-weight:700; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); transition:all .13s; }
.chip:hover{ border-color:var(--ink-4); color:var(--ink); }
.chip.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.chip .n{ font-size:11.5px; font-weight:800; padding:1px 6px; border-radius:999px; background:var(--fill); color:var(--ink-2); }
.chip.on .n{ background:rgba(255,255,255,0.2); color:#fff; }
.chip.gold.on{ background:var(--gold); border-color:var(--gold); color:#3A2D07; }

/* pill tabs (underline) */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tab{ padding:11px 16px; font-size:14px; font-weight:700; color:var(--ink-3); position:relative; transition:color .14s; }
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--ink); }
.tab.on::after{ content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2.5px; border-radius:3px; background:var(--gold); }
.tab .n{ font-size:11px; font-weight:800; margin-left:6px; color:var(--gold-2); }

/* ============ KPI ============ */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.kpi .kicon{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px; }
.kpi .kicon svg{ width:20px; height:20px; }
.kpi .klabel{ font-size:13px; color:var(--ink-3); font-weight:600; }
.kpi .kval{ font-size:30px; font-weight:900; letter-spacing:-1px; margin-top:5px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi .kfoot{ display:flex; align-items:center; gap:6px; margin-top:11px; font-size:12px; font-weight:700; }
.kpi .kfoot .up{ color:var(--done); } .kpi .kfoot .down{ color:var(--danger); }
.kpi .kfoot .lbl{ color:var(--ink-3); font-weight:500; }
.kpi.feature{ background:linear-gradient(150deg,#11193A,#0A1024); border-color:var(--navy); color:#fff; }
.kpi.feature .klabel{ color:#9AA4C6; }
.kpi.feature .kval{ color:#fff; }
.kpi.feature .kicon{ background:rgba(255,197,41,0.16); color:var(--gold); }

/* ============ TABLE ============ */
.tbl{ width:100%; border-collapse:separate; border-spacing:0; }
.tbl th{ text-align:left; font-size:11.5px; font-weight:800; color:var(--ink-3); letter-spacing:0.3px; text-transform:uppercase; padding:0 16px 11px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th.sortable{ cursor:pointer; user-select:none; }
.tbl th .arr{ display:inline-block; margin-left:4px; color:var(--gold-2); font-size:10px; }
.tbl td{ padding:13px 16px; border-bottom:1px solid var(--line-2); font-size:14px; vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition:background .12s; }
.tbl tbody tr:hover{ background:var(--panel-2); }
.tbl tbody tr.hi{ background:var(--gold-soft); }
.tbl tbody tr.hi:hover{ background:var(--gold-soft-2); }
.cell-user{ display:flex; align-items:center; gap:11px; }
.avatar{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; background:var(--fill); display:grid; place-items:center; font-weight:800; color:var(--ink-2); font-size:14px; overflow:hidden; border:1px solid var(--line); }
.avatar.sm{ width:30px; height:30px; font-size:12px; }
.avatar.gold{ background:linear-gradient(150deg,#FFE08A,#E7B23E); color:#3A2D07; border-color:transparent; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.u-name{ font-weight:700; letter-spacing:-0.3px; white-space:nowrap; }
.u-sub{ font-size:12px; color:var(--ink-3); margin-top:1px; }

/* ============ FORM ============ */
.field{ display:flex; flex-direction:column; gap:7px; }
.label{ font-size:12.5px; font-weight:800; color:var(--ink-2); }
.label .req{ color:var(--danger); }
.input,.textarea,.select{ width:100%; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 13px; font-size:14px; color:var(--ink); outline:none; transition:border-color .14s, box-shadow .14s; }
.input:focus,.textarea:focus,.select:focus{ border-color:var(--gold-2); box-shadow:0 0 0 3px var(--gold-soft); }
.input::placeholder,.textarea::placeholder{ color:var(--ink-4); }
.textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.hint{ font-size:12px; color:var(--ink-3); }
.count{ font-size:12px; color:var(--ink-4); font-variant-numeric:tabular-nums; }

/* checkbox / radio */
.check{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink); padding:9px 11px; border-radius:10px; border:1px solid var(--line); transition:background .12s, border-color .12s; }
.check:hover{ background:var(--panel-2); }
.check .box{ width:19px; height:19px; border-radius:6px; border:2px solid var(--ink-4); flex:0 0 auto; display:grid; place-items:center; transition:all .12s; }
.check .box svg{ width:12px; height:12px; color:#fff; opacity:0; }
.check.on{ border-color:var(--gold-2); background:var(--gold-soft); }
.check.on .box{ background:var(--gold-2); border-color:var(--gold-2); }
.check.on .box svg{ opacity:1; }
.check.radio .box{ border-radius:50%; }

/* toggle */
.toggle{ width:42px; height:25px; border-radius:999px; background:var(--ink-4); position:relative; transition:background .16s; flex:0 0 auto; cursor:pointer; }
.toggle::after{ content:''; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:transform .16s; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.toggle.on{ background:var(--done); }
.toggle.on::after{ transform:translateX(17px); }

/* segmented */
.seg{ display:inline-flex; background:var(--fill); border-radius:11px; padding:3px; gap:2px; }
.seg button{ padding:7px 14px; border-radius:8px; font-size:13px; font-weight:700; color:var(--ink-3); transition:all .13s; }
.seg button.on{ background:var(--panel); color:var(--ink); box-shadow:var(--shadow-sm); }

/* ============ CHART ============ */
.chart-bars{ display:flex; align-items:flex-end; gap:10px; height:160px; padding-top:8px; }
.chart-bars .bcol{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.chart-bars .bcol .bg{ width:100%; max-width:34px; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,#D7DEEA,#C7D0E0); transition:height .5s cubic-bezier(.2,.7,.3,1); position:relative; }
.chart-bars .bcol.on .bg{ background:linear-gradient(180deg,var(--gold),var(--gold-2)); }
.chart-bars .bcol .bl{ font-size:11px; color:var(--ink-3); font-weight:600; }
.chart-line{ width:100%; height:170px; }
.donut-wrap{ display:flex; align-items:center; gap:22px; }
.donut{ width:128px; height:128px; border-radius:50%; flex:0 0 auto; position:relative;
  -webkit-mask:radial-gradient(circle 42px at center, transparent 98%, #000 100%);
          mask:radial-gradient(circle 42px at center, transparent 98%, #000 100%); }
.donut .center{ position:absolute; inset:0; -webkit-mask:none; mask:none; display:grid; place-items:center; }

/* legend */
.legend-list{ display:flex; flex-direction:column; gap:11px; }
.legend-row{ display:flex; align-items:center; gap:10px; font-size:13px; }
.legend-row .sw{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.legend-row .lv{ margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums; }

/* ============ TODO QUEUE ============ */
.todo-item{ display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:13px; border:1px solid var(--line); background:var(--panel); transition:border-color .14s, box-shadow .14s, transform .06s; cursor:pointer; }
.todo-item:hover{ border-color:var(--gold-2); box-shadow:var(--shadow-sm); }
.todo-item:active{ transform:translateY(1px); }
.todo-item .ti{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; }
.todo-item .ti svg{ width:20px; height:20px; }
.todo-item .tt{ font-size:14px; font-weight:700; }
.todo-item .td{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.todo-item .cnt{ margin-left:auto; min-width:26px; height:26px; padding:0 9px; border-radius:999px; display:grid; place-items:center; font-size:14px; font-weight:900; }

/* ============ MENTOR ============ */
.mentor-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.mentor-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:transform .14s, box-shadow .14s, border-color .14s; box-shadow:var(--shadow-sm); }
.mentor-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gold-2); }
.mentor-card .fig{ aspect-ratio:1/1; background:radial-gradient(ellipse 80% 70% at 50% 95%, #EEF2FA, #F7F9FC); display:flex; align-items:flex-end; justify-content:center; position:relative; }
.mentor-card .fig img{ width:88%; height:96%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 8px 12px rgba(20,30,70,0.14)); }
.mentor-card .no{ position:absolute; top:9px; left:11px; font-family:var(--mono); font-size:11px; font-weight:800; color:var(--ink-4); }
.mentor-card .pub{ position:absolute; top:8px; right:9px; }
.mentor-card .meta{ padding:11px 13px 13px; border-top:1px solid var(--line); }
.mentor-card .nm{ font-size:14.5px; font-weight:800; letter-spacing:-0.4px; }
.mentor-card .nm .en{ font-family:var(--mono); font-size:10px; font-weight:600; color:var(--ink-4); margin-left:5px; }
.mentor-card .tl{ font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.35; }

/* ============ MODAL / DRAWER ============ */
.scrim{ position:fixed; inset:0; z-index:60; background:rgba(11,16,34,0.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:40px; }
.modal{ background:var(--panel); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); width:100%; max-width:540px; max-height:88vh; overflow:auto; animation:modalIn .26s cubic-bezier(.2,1.1,.4,1); }
@keyframes modalIn{ from{ transform:scale(.96) translateY(8px); } to{ transform:none; } }
.modal-head{ display:flex; align-items:flex-start; gap:14px; padding:24px 26px 0; }
.modal-body{ padding:18px 26px 0; }
.modal-foot{ display:flex; gap:10px; justify-content:flex-end; padding:22px 26px 24px; }
.drawer-scrim{ position:fixed; inset:0; z-index:60; background:rgba(11,16,34,0.45); backdrop-filter:blur(2px); display:flex; justify-content:flex-end; }
.drawer{ width:560px; max-width:94vw; height:100%; background:var(--panel); box-shadow:var(--shadow-lg); overflow-y:auto; animation:drawerIn .3s cubic-bezier(.2,.8,.3,1); }
@keyframes drawerIn{ from{ transform:translateX(36px); } to{ transform:none; } }

/* ============ TOAST ============ */
.toast-wrap{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast{ display:flex; align-items:center; gap:11px; background:var(--navy); color:#fff; padding:13px 18px; border-radius:13px; box-shadow:var(--shadow-lg); font-size:14px; font-weight:600; animation:toastIn .3s cubic-bezier(.2,1.1,.4,1); }
.toast .ic{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; }
.toast .ic svg{ width:14px; height:14px; }
.toast.ok .ic{ background:var(--done); } .toast.info .ic{ background:var(--gold); color:var(--navy); } .toast.danger .ic{ background:var(--danger); }
@keyframes toastIn{ from{ transform:translateY(14px); } to{ transform:none; } }

/* phone preview (notice) */
.phone-prev{ width:300px; flex:0 0 auto; border-radius:34px; border:9px solid #0A0F22; background:#0b1020; overflow:hidden; box-shadow:var(--shadow-lg); position:relative; height:600px; }
.phone-prev .pp-status{ height:38px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; color:#fff; font-size:12px; font-weight:700; }
.phone-prev .pp-stage{ position:absolute; inset:38px 0 0; overflow-y:auto; padding:8px 16px 20px; }

/* misc */
.divider{ height:1px; background:var(--line); margin:0; border:none; }
.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:60px 20px; color:var(--ink-3); }
.empty .ea{ width:54px; height:54px; border-radius:16px; background:var(--fill); display:grid; place-items:center; margin-bottom:14px; }
.skeleton{ background:linear-gradient(90deg,#EEF1F6 25%,#E3E8F0 37%,#EEF1F6 63%); background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:6px; }
@keyframes sk{ from{ background-position:100% 0; } to{ background-position:0 0; } }

.scroll-x{ overflow-x:auto; }
.nowrap{ white-space:nowrap; }
.tag{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); border:1px solid var(--line); border-radius:6px; padding:2px 7px; background:var(--panel-2); }

/* ===== 캐릭터·멘토 크게 보기 라이트박스 ===== */
.char-light-scrim{ position:fixed; inset:0; z-index:70; background:rgba(11,16,34,0.62); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:40px; }
.char-light{ position:relative; width:100%; max-width:480px; background:var(--panel); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); animation:modalIn .26s cubic-bezier(.2,1.1,.4,1); }
.char-light-x{ position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.85); backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--ink-2); box-shadow:var(--shadow-sm); }
.char-light-x:hover{ background:#fff; }
.char-light-stage{ aspect-ratio:1/1; display:flex; align-items:flex-end; justify-content:center; }
.char-light-img{ width:80%; height:92%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 16px 22px rgba(20,30,70,0.28)); }
.char-light-meta{ padding:22px 26px 26px; text-align:center; }
.char-light-title{ font-size:24px; font-weight:900; letter-spacing:-0.7px; }
.char-light-en{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink-4); margin-left:9px; }
.char-light-sub{ font-size:14px; color:var(--ink-3); margin-top:4px; }
.char-light-tags{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; flex-wrap:wrap; }
.char-light-verse{ font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); }
.char-light-verse b{ display:block; color:var(--gold-2); font-size:12.5px; margin-top:5px; }