/**
 * 미리보기 화면 공용 스타일 (2026-08-25)
 *
 * 실제 관리자 패널의 레이아웃(좌측 메뉴 + 상단바 + 본문 카드/표)을 그대로 옮기되,
 * 색은 랜딩(index.html)의 토큰을 그대로 써서 랜딩 ↔ 미리보기 사이에 이질감이 없게 한다.
 *
 * 모바일 우선. 표는 각각 가로 스크롤 컨테이너 안에 넣어 본문이 옆으로 밀리지 않게 한다.
 */

:root{
  --primary:#2563EB; --primary-light:#3B82F6; --primary-dark:#1D4ED8;
  --accent:#F59E0B; --accent-light:#FBBF24;
  --bg:#FFFFFF; --bg-alt:#F8FAFC; --bg-warm:#FFFBF0;
  --text:#1E293B; --text-secondary:#475569; --text-muted:#94A3B8;
  --border:#E2E8F0; --success:#10B981; --danger:#EF4444;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --side-w:236px;
  --bar-h:auto;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text); background:var(--bg-alt); line-height:1.7;
  -webkit-font-smoothing:antialiased; font-size:15px;
  word-break:keep-all; overflow-wrap:break-word;
}
a{color:inherit; text-decoration:none}

/* ── 상단 고정 고지 배너 ──────────────────────────────
   스크롤해도 따라온다. 숫자가 샘플이라는 사실을 화면마다 명시한다. */
.demobar{
  position:sticky; top:0; z-index:60;
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  background:linear-gradient(90deg,#1D4ED8,#2563EB);
  color:#fff; padding:9px 16px; font-size:13px; line-height:1.5;
}
.demobar .msg{flex:1 1 260px; min-width:0}
.demobar b{font-weight:700; color:#FDE68A}
.demobar a{
  flex:none; font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.55); white-space:nowrap;
}
.demobar a:hover{background:rgba(255,255,255,.14)}
.demobar a.cta{background:var(--accent); border-color:var(--accent); color:#3B2500}
.demobar a.cta:hover{background:var(--accent-light)}

/* ── 셸: 좌측 메뉴 + 본문 ───────────────────────────── */
.shell{display:flex; min-height:calc(100vh - 44px); align-items:flex-start}

.side{
  width:var(--side-w); flex:none; background:#0F172A; color:#CBD5E1;
  position:sticky; top:44px; align-self:flex-start; height:calc(100vh - 44px);
  overflow-y:auto; padding-bottom:20px;
}
.side .brand{
  display:flex; align-items:center; gap:9px; padding:16px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.09); color:#fff;
}
.side .brand .mark{
  width:28px; height:28px; flex:none; border-radius:8px; background:var(--primary);
  display:grid; place-items:center; font-size:13px; font-weight:800;
}
.side .brand b{font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.side .grp{
  font-size:11px; font-weight:700; letter-spacing:.08em; color:#64748B;
  padding:15px 16px 6px; text-transform:uppercase;
}
.side .nav-i{
  display:flex; align-items:center; gap:9px; padding:8px 16px;
  font-size:13.5px; color:#CBD5E1; border-left:2.5px solid transparent;
}
.side .nav-i i{font-style:normal; font-size:14px; width:18px; flex:none; text-align:center}
.side .nav-i:hover{background:rgba(255,255,255,.06); color:#fff}
.side .nav-i.on{background:rgba(37,99,235,.22); color:#fff; border-left-color:var(--primary-light); font-weight:600}
.side .nav-i.soon{color:#64748B}
.side .nav-i.soon::after{content:"준비중"; margin-left:auto; font-size:10px; color:#475569}
.side-foot{padding:16px; font-size:11.5px; color:#475569; line-height:1.6}

.main{flex:1; min-width:0; display:flex; flex-direction:column}

/* ── 상단바 ─────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#fff; border-bottom:1px solid var(--border); padding:11px 20px;
  position:sticky; top:44px; z-index:40;
}
.topbar .date{font-size:13.5px; font-weight:600; color:var(--text-secondary)}
.topbar .right{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.chip{
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--bg-alt); border:1px solid var(--border); color:var(--text-secondary);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--success)}
.chip.mode{background:#EFF6FF; border-color:#BFDBFE; color:var(--primary-dark)}
.menubtn{
  display:none; align-items:center; gap:5px; font:inherit; font-size:12.5px; font-weight:600;
  padding:5px 11px; border-radius:8px; border:1px solid var(--border);
  background:#fff; color:var(--text-secondary); cursor:pointer;
}

/* ── 본문 ───────────────────────────────────────────── */
.page{padding:22px 20px 30px; max-width:1140px; width:100%}
.page-head{margin-bottom:22px}
.page-head h1{font-size:clamp(21px,3.6vw,27px); font-weight:800; letter-spacing:-.02em; margin:0 0 6px}
/* "이 화면에서 하는 일" 한 줄 — 사장님이 화면 이름만 보고는 모른다. */
.page-head .does{
  display:inline-block; background:#EFF6FF; border:1px solid #BFDBFE; color:var(--primary-dark);
  font-size:13.5px; font-weight:600; padding:7px 13px; border-radius:var(--radius-sm); margin:0;
}
.page-head .scope{display:block; margin-top:9px; font-size:12.5px; color:var(--text-muted)}

section.blk{margin-bottom:26px}
.sec-head{display:flex; align-items:baseline; gap:10px; margin-bottom:11px; flex-wrap:wrap}
.sec-head h2{font-size:16.5px; font-weight:700; margin:0; letter-spacing:-.01em}
.sec-head span{font-size:12px; color:var(--text-muted)}

.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px}
.card + .card{margin-top:12px}

/* 지표 카드 */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px}
.stat{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow)}
.stat .lbl{font-size:12.5px; color:var(--text-secondary); font-weight:600}
.stat .row{display:flex; align-items:baseline; gap:4px; margin-top:5px}
.stat .v{font-size:25px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat .v.accent{color:var(--primary)}
.stat .v.warn{color:var(--accent)}
.stat .u{font-size:13px; color:var(--text-secondary); font-weight:600}
.stat .note{font-size:11.5px; color:var(--text-muted); margin-top:4px; line-height:1.5}

/* 표 — 반드시 스크롤 컨테이너 안에 */
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:600px}
th,td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; line-height:1.55}
thead th{background:var(--bg-alt); font-size:11.5px; font-weight:700; color:var(--text-secondary); letter-spacing:.03em; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
td.name{font-weight:600; white-space:nowrap}

/* 상태 배지 */
.tag{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap}
.tag.on{background:#ECFDF5; color:#047857}
.tag.soon{background:#FFF7ED; color:#B45309}
.tag.out{background:#FEF2F2; color:#B91C1C}
.tag.wait{background:#EFF6FF; color:var(--primary-dark)}
.tag.done{background:#F1F5F9; color:var(--text-secondary)}
.tag.dup{background:#F5F3FF; color:#6D28D9}

/* 버튼(데모 — 동작하지 않음) */
.btn{
  display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:#fff;
  color:var(--text-secondary); cursor:default; white-space:nowrap;
}
.btn.pri{background:var(--primary); border-color:var(--primary); color:#fff}
.btn.acc{background:var(--accent); border-color:var(--accent); color:#3B2500}
.btn.gho{background:transparent}

/* 매진 임박 줄 */
.soon-row{display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px dashed var(--border); font-size:14px}
.soon-row:last-child{border-bottom:none}
.soon-row .nm{font-weight:600; display:flex; align-items:center; gap:7px}
.soon-row .left{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--accent)}

/* 2단 배치 */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:900px){ .cols{grid-template-columns:1fr} }

/* 본문 하단 안내 */
.foot{
  margin:6px 20px 0; padding:16px 18px; border-top:1px solid var(--border);
  font-size:12.5px; color:var(--text-muted); line-height:1.75;
}
.foot a{color:var(--primary); font-weight:600; text-decoration:underline}

/* ── 하단 고정 3버튼 — 11장을 한 바퀴 돌게 한다 ────────── */
.tourbar{
  position:sticky; bottom:0; z-index:50; margin-top:auto;
  display:flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
  border-top:1px solid var(--border); padding:10px 16px;
}
.tourbar a{
  font-size:13px; font-weight:700; padding:9px 14px; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--text-secondary); white-space:nowrap;
}
.tourbar a:hover{border-color:var(--primary); color:var(--primary)}
.tourbar a.next{background:var(--primary); border-color:var(--primary); color:#fff; flex:1; text-align:center}
.tourbar a.next:hover{background:var(--primary-dark); color:#fff}
.tourbar a.apply{background:var(--accent); border-color:var(--accent); color:#3B2500}
.tourbar a.apply:hover{background:var(--accent-light); color:#3B2500}
.tourbar .pos{font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; flex:none}

/* ── 모바일 ─────────────────────────────────────────── */
.navback{display:none}
@media (max-width:900px){
  .side{
    position:fixed; top:0; left:0; height:100vh; z-index:80;
    transform:translateX(-100%); transition:transform .22s ease;
  }
  .side.open{transform:none}
  .navback{display:block; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:70; opacity:0; pointer-events:none; transition:opacity .22s}
  .navback.on{opacity:1; pointer-events:auto}
  .menubtn{display:inline-flex}
  .topbar{top:0}
  .page{padding:18px 14px 24px}
  .foot{margin:6px 14px 0}
  .tourbar{padding:9px 12px; gap:6px}
  .tourbar a{padding:9px 11px; font-size:12.5px}
  .tourbar .pos{display:none}
  .demobar{font-size:12px; padding:8px 13px}
}
@media (max-width:520px){
  .tourbar a.back span{display:none}
  .stat .v{font-size:22px}
}