/* thankskim · IA 1차안 — 다크 글래스 테마(레퍼런스: 짙은 청록 배경 + 민트 포인트 + 유리 카드). 모션은 iOS 곡선(--ios) 하나로 통일 */
:root {
  /* 룩: 흰 바탕 + 연회색 패널 + 청록 포인트(보스 레퍼런스 2). 단일 테마 — 테마 선택 기능은 2026-10-20 지시로 삭제 */
  --bg: #f3f6f9; --bg2: #eaf0f4; --panel: #ffffff; --card: #ffffff; --card2: #f5f8fa;
  --line: #e6ebf0; --line2: #d5dde5; --ink: #1f2a37; --muted: #6b7a8a; --dim: #9aa7b3;
  --mint: #17b9a4; --mint2: #0f9d8c; --mint-soft: rgba(23,185,164,.12); --mint-line: rgba(23,185,164,.4);
  --rose: #ef4d6e; --rose-soft: rgba(239,77,110,.12); --amber: #f0a63a; --amber-soft: rgba(240,166,58,.16); --sky: #4a8dff;
  /* 예전 이름(화면 코드가 참조) */
  --paper: var(--bg); --cream: var(--card2); --white: var(--card); --olive: var(--mint); --green: var(--mint2); --olive-soft: var(--mint-soft); --warn: var(--rose); --ok: var(--mint); --info: var(--sky);
  --sb-w: 232px; --sb-w-collapsed: 72px; --top-h: 60px; --r: 12px; --r-sm: 8px;
  --ios: cubic-bezier(.32, .72, 0, 1); --ios-fast: .32s var(--ios); --ios-slow: .55s var(--ios);
  --shadow: 0 1px 2px rgba(31,42,55,.04), 0 10px 30px -22px rgba(31,42,55,.25);
  --display: 'Pretendard', -apple-system, 'Segoe UI', sans-serif;
  --on-accent: #ffffff; --accent-hover: #1ccdb6; --accent-grad: linear-gradient(135deg, #1dd1b8, #0ea5e9);
  --bg-layers: linear-gradient(180deg, #f3f6f9, #eef2f6); --grid-opacity: 0;
  --surface-solid: #ffffff; --toast-bg: #1f2a37; --toast-ink: #ffffff;
  --input-bg: #f5f8fa; --row-bg: #fafcfd; --row-hover: #eef7f6; --topbar-fade: linear-gradient(180deg, rgba(243,246,249,.95), rgba(243,246,249,0));
  --sb-bg: #ffffff; --sb-ink: #1f2a37; --sb-muted: #6b7a8a; --sb-dim: #9aa7b3; --sb-card: #f5f8fa; --sb-card2: #eef2f6; --sb-line: #e6ebf0; --sb-line2: #d5dde5; --sb-active-bg: rgba(23,185,164,.12); --sb-active-ink: #0f9d8c; --sb-ico-radius: 8px;
  --chart-grid: rgba(31,42,55,.08); --chart-tick: #6b7a8a; --chart-bg: #ffffff; --palette: #17b9a4,#4a8dff,#8b5cf6,#f0a63a,#ef4d6e,#22c55e,#06b6d4,#f97316,#64748b,#e879f9;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); font-family: 'Pretendard', -apple-system, 'Segoe UI', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; background: var(--bg); position: relative; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: var(--bg-layers); transition: opacity .4s; }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grid-opacity); background-image:
  linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px;
  mask-image: radial-gradient(1200px 700px at 30% 20%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(1200px 700px at 30% 20%, #000 20%, transparent 80%); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; transition: transform .18s var(--ios), background .2s, border-color .2s, color .2s; }
button:active { transform: scale(.96); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--mint-line); outline-offset: 2px; }
.nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mint-line); }
.nav-item.active:focus-visible { box-shadow: inset 3px 0 0 var(--mint), 0 0 0 2px var(--mint-line); }
.gg .kpis .kpit:nth-child(-n+3) b { font-size: clamp(22px, 2vw, 30px); }
select option { background: #fff; color: #1f2a37; }
input::placeholder, textarea::placeholder { color: var(--dim); }
a { color: var(--mint); }
kbd { font: 11px ui-monospace, Menlo, Consolas, monospace; border-radius: 6px; padding: 2px 7px; background: var(--mint-soft); color: var(--mint); border: 1px solid var(--mint-line); }
.brand-mark { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.6px; }
.brand-mark.sm { font-size: 19px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eyebrow { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mint); font-weight: 700; }
.muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ───────── 모션(iOS 참고): 페이지 슬라이드 · 시트 · 팝 · 토스트 ───────── */
@keyframes pageInR { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes pageInL { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { opacity: 0; transform: translateY(36px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
#stage.enter-r { animation: pageInR var(--ios-slow) both; }
#stage.enter-l { animation: pageInL var(--ios-slow) both; }

/* ───────── ① 로그인(live 전용 · mock 은 로그인 없이 바로 쉘) ───────── */
.screen { min-height: 100vh; }
#screen-login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.login-story { padding: 6vh 5vw; display: flex; flex-direction: column; justify-content: space-between; }
.login-story h2 { font-weight: 800; font-size: clamp(34px, 4vw, 54px); line-height: 1.15; margin: 14px 0 18px; letter-spacing: -1px; }
.login-story p { color: var(--muted); line-height: 1.8; max-width: 420px; }
.login-foot { font-size: 11.5px; color: var(--dim); }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 6vh 6vw; position: relative; }
.login-box { max-width: 380px; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.login-box h3 { font-size: 24px; margin: 8px 0 10px; letter-spacing: -0.5px; }
.login-note { color: var(--muted); line-height: 1.7; margin-bottom: 22px; font-size: 13px; }
.login-box label, .nu-form label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.login-box input, .nu-form input:not([type=checkbox]), .nu-form select, .nu-form textarea, .field input, .field select, .field textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--input-bg); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.login-box input:focus, .nu-form input:focus, .nu-form select:focus, .nu-form textarea:focus, .field input:focus, .field select:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.login-box input[aria-invalid="true"] { border-color: var(--rose); }
.login-error { color: var(--rose); font-size: 12.5px; margin: 4px 0 12px; }
.login-small { margin-top: 14px; font-size: 11.5px; color: var(--muted); line-height: 1.7; }

/* ───────── 버튼 · 칩 · 배지 ───────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card2); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn:hover { background: var(--card2); border-color: var(--line2); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn.xs { padding: 3px 9px; font-size: 11px; }
.btn.primary, .btn-dark, .btn.olive { background: var(--mint); color: var(--on-accent); border-color: var(--mint); box-shadow: 0 8px 20px -10px rgba(23,185,164,.6); }
.btn.primary:hover, .btn-dark:hover, .btn.olive:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-dark { width: 100%; padding: 13px; border-radius: 12px; font-weight: 700; margin-top: 4px; }
.btn.danger { color: var(--rose); border-color: rgba(255,111,141,.35); }
.btn.danger.solid { background: var(--rose); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--card2); }
.btn.active, .seg button.active, .chip.active { background: var(--mint); color: var(--on-accent); border-color: var(--mint); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; background: var(--card); padding: 2px; gap: 2px; }
.seg button { padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 999px; color: var(--muted); }
.seg button:hover { color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 12px; font-weight: 600; color: var(--ink); }
.chip:hover { background: var(--card2); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--mint)); }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .2px; background: var(--card2); color: var(--muted); border: 1px solid transparent; }
.badge-api { background: rgba(90,209,255,.14); color: var(--sky); }
.badge-api-done { background: var(--mint-soft); color: var(--mint); }
.badge-manual { background: var(--amber-soft); color: var(--amber); }
.badge-partial { background: var(--rose-soft); color: var(--rose); }
.badge-none { background: var(--card2); color: var(--muted); }

/* ───────── ③ 쉘 ───────── */
#app { display: grid; grid-template-columns: var(--sb-w) 1fr; min-height: 100vh; transition: grid-template-columns var(--ios-slow); }
body.sb-collapsed #app { grid-template-columns: var(--sb-w-collapsed) 1fr; }
#sidebar { --ink: var(--sb-ink); --muted: var(--sb-muted); --dim: var(--sb-dim); --card: var(--sb-card); --card2: var(--sb-card2); --line: var(--sb-line); --line2: var(--sb-line2); color: var(--sb-ink); background: var(--sb-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 10px 18px; }
.logo-img { height: 30px; width: auto; max-width: 150px; display: block; }
body.sb-collapsed .logo-img { height: 18px; max-width: 48px; }
.sb-collapse { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.sb-collapse:hover { background: var(--card2); color: var(--ink); }
.sb-collapse svg { transition: transform var(--ios-fast); }
body.sb-collapsed .sb-collapse svg { transform: rotate(180deg); }
body.sb-collapsed .brand-mark.sm, body.sb-collapsed .ts-text, body.sb-collapsed .sb-search span, body.sb-collapsed .sb-search kbd, body.sb-collapsed .nav-item .lbl, body.sb-collapsed .nav-item .badge, body.sb-collapsed .nav-item .chev, body.sb-collapsed .nav-sec-title, body.sb-collapsed .sb-menu-label, body.sb-collapsed .sb-bottom .who, body.sb-collapsed .sb-link, body.sb-collapsed .nav-sub, body.sb-collapsed .nav-edit, body.sb-collapsed .nav-item .nav-act { display: none !important; }
body.sb-collapsed .sb-top { padding: 18px 0 12px; justify-content: center; flex-direction: column; gap: 8px; }
body.sb-collapsed .nav-item { justify-content: center; padding: 8px 0; }
body.sb-collapsed .sb-user { justify-content: center; }
body.sb-collapsed .sb-search { justify-content: center; padding: 10px 0; }
.sb-menu-label { padding: 6px 20px 4px; font-size: 10px; letter-spacing: 1.8px; color: var(--dim); font-weight: 700; }
.team-switch { position: relative; margin: 0 12px 8px; }
.ts-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.ts-text { display: flex; flex-direction: column; }
.ts-label { font-weight: 700; font-size: 13.5px; }
.ts-sub { font-size: 11px; color: var(--muted); }
.ts-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface-solid); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); z-index: 20; padding: 4px; animation: popIn var(--ios-fast); }
.ts-item { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 9px; text-align: left; }
.ts-item:hover { background: var(--card2); }
.ts-item small { display: block; color: var(--muted); font-size: 11px; }
.sb-search { margin: 4px 12px 10px; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--input-bg); color: var(--muted); font-size: 12.5px; }
.sb-search:hover { border-color: var(--line2); color: var(--ink); }
.sb-nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.nav-sec { margin-bottom: 10px; }
.nav-sec-title { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 12px 10px 6px; display: flex; justify-content: space-between; align-items: center; }
.nav-row { display: flex; align-items: center; }
.nav-row > .nav-item { flex: 1; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; text-align: left; font-size: 13.5px; color: var(--muted); position: relative; min-width: 0; border: 1px solid transparent; }
.nav-item:hover { background: var(--card2); color: var(--ink); }
.nav-item.active { background: var(--sb-active-bg); color: var(--sb-active-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--mint); }
.nav-item.parent-active:not(.active) { color: var(--ink); }
.nav-item .ico { width: 28px; height: 28px; padding: 6px; flex: none; border-radius: var(--sb-ico-radius); background: var(--card2); color: var(--muted); transition: background .2s, color .2s; }
.nav-item:hover .ico, .nav-item.active .ico, .nav-item.parent-active .ico { background: var(--mint-soft); color: var(--mint); }
.nav-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-left: 3px; }
.nav-item .badge { font-size: 10px; padding: 1px 7px; }
.nav-item.active .badge { background: var(--mint-soft); color: var(--mint); }
.nav-item .chev { width: 14px; height: 14px; transition: transform var(--ios-fast); opacity: .5; }
.nav-item[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-item .nav-act { font-size: 10.5px; font-weight: 700; color: var(--mint); border: 1px dashed var(--mint-line); border-radius: 7px; padding: 1px 7px; margin-left: 2px; white-space: nowrap; }
.nav-item .nav-act:hover { background: var(--mint-soft); }
/* 하위 메뉴: 높이를 iOS 곡선으로 접고 편다(grid-template-rows 0fr↔1fr) */
.nav-sub { display: grid !important; grid-template-rows: 1fr; transition: grid-template-rows var(--ios-slow), opacity .3s; padding-left: 14px; margin: 2px 0 4px 16px; border-left: 1px solid var(--line); opacity: 1; }
.nav-sub[hidden] { grid-template-rows: 0fr; opacity: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; }
.nav-sub-in { min-height: 0; overflow: hidden; }
.nav-sub .nav-item { padding: 6px 9px; font-size: 12.5px; border-radius: 10px; }
.nav-sub .nav-sub { margin-left: 10px; padding-left: 10px; }
.nav-sub .nav-sub .nav-item { font-size: 12px; padding: 5px 8px; }
.nav-item.is-hidden { opacity: .45; text-decoration: line-through; }
.nav-item.is-custom .lbl::after { content: ' ✦'; color: var(--mint); font-size: 10px; }
.nav-edit { display: none; gap: 2px; flex: none; }
body.nav-editing .nav-edit { display: inline-flex; }
.nav-edit button { width: 20px; height: 20px; border-radius: 5px; font-size: 11px; color: var(--muted); display: grid; place-items: center; }
.nav-edit button:hover { background: var(--card2); color: var(--ink); }
body.nav-editing .sb-nav { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(44,232,169,.05) 10px 20px); border-radius: 12px; }
.nav-add { width: 100%; padding: 6px 10px; border-radius: 10px; font-size: 12px; color: var(--mint); border: 1px dashed var(--mint-line); margin-top: 4px; display: none; }
body.nav-editing .nav-add { display: block; }
.sb-bottom { border-top: 1px solid var(--line); padding: 10px 12px 14px; display: grid; gap: 2px; }
.sb-link { width: 100%; text-align: left; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.sb-link:hover { background: var(--card2); color: var(--ink); }
.sb-link.on { color: var(--mint); font-weight: 700; }
.sb-link kbd { font-size: 10px; }
.sb-user { display: flex; align-items: center; gap: 9px; padding: 8px 4px 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-grad); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.who { flex: 1; min-width: 0; line-height: 1.2; }
.who b { display: block; font-size: 13px; }
.who small { color: var(--muted); font-size: 11px; }
.sb-logout { font-size: 11.5px; color: var(--muted); }
.sb-logout:hover { color: var(--rose); }
#sb-scrim { display: none; }

#main { min-width: 0; display: flex; flex-direction: column; }
#topbar { height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 12px 24px 0; position: sticky; top: 0; z-index: 10; background: var(--topbar-fade); }
.tb-menu { display: none; }
.tb-search { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(380px, 40vw); padding: 9px 6px 9px 16px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.tb-search:hover { border-color: var(--line2); color: var(--ink); }
.tb-search kbd { padding: 5px 9px; border-radius: 999px; }
.crumbs { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; white-space: nowrap; padding-left: 6px; }
.crumbs b { color: var(--ink); }
.crumbs .sep { opacity: .5; }
.tb-actions { display: flex; gap: 8px; align-items: center; }
.api-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.api-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.api-pill.live i { background: var(--mint); }
.api-pill.empty i { background: var(--rose); }
#stage { flex: 1; padding: 22px 24px 56px; max-width: 1440px; width: 100%; }

/* ───────── 페이지 공통 ───────── */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; margin: 4px 0 6px; letter-spacing: -0.7px; display: flex; align-items: center; gap: 10px; font-weight: 800; }
.page-head .sub { color: var(--muted); font-size: 13px; line-height: 1.6; }
.page-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.src-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--card); }
.src-chip code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink); }
.date-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: 16px; }
.date-bar .presets { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.date-range-label { font-size: 12px; color: var(--muted); margin-left: 6px; }
.date-custom { display: flex; align-items: center; gap: 6px; }
.date-custom input { padding: 6px 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--input-bg); color: var(--ink); font-size: 12px; }
/* KPI 타일: 한 행에 전부(2026-10-26 보스 지시 · 12개까지). 글자는 뷰포트에 따라 줄고(clamp), 좁은 화면에서만 6개·3개씩 줄바꿈 */
.kpi-grid { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 8px 9px; transition: border-color .2s, transform var(--ios-fast); flex: 1 1 0; min-width: 0; }
.kpi .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; font-size: 10.5px; }
.kpi .v { font-size: clamp(12px, 1.02vw, 22px); letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .d { white-space: nowrap; }
@media (max-width: 1180px) { .kpi-grid { flex-wrap: wrap; } .kpi { flex: 1 1 calc(16.66% - 8px); } .kpi .v { font-size: 18px; } }
@media (max-width: 720px) { .kpi { flex: 1 1 calc(33.33% - 8px); } }
.kpi:hover { border-color: var(--line2); transform: translateY(-1px); }
.kpi .k { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.kpi .v { font-weight: 800; margin-top: 5px; font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 11px; margin-top: 6px; }
.kpi .d .diff, .diff { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
/* ?view= 딥링크로 열었을 때(캡처·공유): 모션 없이 정착 상태로 */
body.capture *, body.capture *::before, body.capture *::after { animation: none !important; transition: none !important; }
/* 증감 색: + 빨강 · − 초록 (2026-10-26 요청, 모든 탭 동일). .up/.down 단독은 상태 표시(정상/오류)용이라 그대로. */
.diff.up { background: var(--rose-soft); color: var(--rose); } .diff.down { background: var(--mint-soft); color: var(--mint); }
.up { color: var(--mint); } .down { color: var(--rose); }
.kpi .d .formula { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
/* 인스타 오디언스 성별 막대(요청 2026-10-26) */
.ig-gender { padding: 6px 4px 2px; }
.ig-gbar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--line); }
.ig-gbar .f { background: var(--rose); } .ig-gbar .m { background: var(--sky); }
.ig-glab { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.ig-glab i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ig-glab .f i { background: var(--rose); } .ig-glab .m i { background: var(--sky); }
.ig-gtitle { font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 2px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 14px; min-width: 0; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.card-head h3::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--mint); flex: none; }
.card-head .tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.card-sub { color: var(--muted); font-size: 12px; margin-top: -6px; margin-bottom: 10px; line-height: 1.6; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-2 > .card { margin-bottom: 0; }
.chart-wrap { position: relative; height: 280px; }
.chart-wrap.sm { height: 200px; }
.tbl-wrap { overflow-x: auto; border-radius: 12px; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 12.5px; }
.tbl th, .tbl td { padding: 9px 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl th:first-child, .tbl td:first-child, .tbl .l { text-align: left; }
.tbl th { font-size: 11.5px; color: var(--muted); font-weight: 600; background: transparent; position: sticky; top: 0; border-bottom: 1px solid var(--line); }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--mint); }
.tbl th.sorted::after { content: ' ▾'; color: var(--mint); } .tbl th.sorted.asc::after { content: ' ▴'; }
.tbl tbody td { background: var(--row-bg); }
.tbl tbody td:first-child { border-radius: 10px 0 0 10px; } .tbl tbody td:last-child { border-radius: 0 10px 10px 0; }
.tbl tbody tr:hover td { background: var(--row-hover); }
.tbl tr.total td { font-weight: 700; background: var(--mint-soft); color: var(--ink); }
.tbl .bar { display: inline-block; height: 6px; border-radius: 4px; background: var(--c, var(--mint)); vertical-align: middle; margin-right: 6px; }
.bar-list { display: grid; gap: 9px; }
.bar-list .row { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-list .track { height: 8px; background: var(--row-hover); border-radius: 5px; overflow: hidden; }
.bar-list .fill { height: 100%; background: var(--c, var(--mint)); border-radius: 5px; }
.bar-list .val { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 28px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line2); border-radius: 12px; }
.loading { padding: 40px; text-align: center; color: var(--muted); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line2); border-top-color: var(--mint); border-radius: 50%; margin: 0 auto 10px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.note { font-size: 12px; color: var(--muted); line-height: 1.7; }
.callout { padding: 12px 14px; border-radius: 12px; background: var(--mint-soft); color: var(--mint); font-size: 12.5px; line-height: 1.7; margin-bottom: 14px; border: 1px solid var(--mint-line); }
.callout.warn { background: var(--rose-soft); color: var(--rose); border-color: rgba(255,111,141,.35); }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.subtabs button { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.subtabs button.active { color: var(--mint); border-bottom-color: var(--mint); }
.thumb { aspect-ratio: 4/3; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; background: linear-gradient(160deg, rgba(0,0,0,.25), rgba(0,0,0,.6)), var(--c, #456); position: relative; overflow: hidden; border: 1px solid var(--line); transition: transform var(--ios-fast); }
.thumb:hover { transform: translateY(-2px); }
.thumb small { position: absolute; left: 8px; bottom: 6px; font-size: 10.5px; opacity: .85; font-weight: 500; }
.thumb.best { outline: 2px solid var(--mint); }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ig-grid .thumb { aspect-ratio: 1; font-size: 11px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.toggle input, .nu-check input { accent-color: var(--mint); }
.field { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pre { background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; line-height: 1.6; max-height: 320px; overflow: auto; }
.report-text { line-height: 1.85; font-size: 13.5px; }
.report-text h4 { margin: 14px 0 6px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 12.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--muted); }
.status-dot.ok { background: var(--mint); } .status-dot.warn { background: var(--amber); } .status-dot.bad { background: var(--rose); }
.progress { height: 8px; background: var(--row-hover); border-radius: 5px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--mint); width: 0; transition: width .4s var(--ios); }


/* ───────── 오버레이(iOS 시트) ───────── */
.overlay { position: fixed; inset: 0; background: rgba(5, 10, 9, .55); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; animation: fadeIn .3s ease-out; }
.modal-box { width: 100%; max-width: 620px; background: var(--surface-solid); border: 1px solid var(--line2); border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); padding: 22px 24px 24px; animation: sheetUp var(--ios-slow) both; }
.modal-box.wide { max-width: 980px; } .modal-box.xl { max-width: 1180px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.modal-head button { width: 30px; height: 30px; border-radius: 50%; color: var(--muted); background: var(--card2); }
.modal-head button:hover { background: var(--row-hover); color: var(--ink); }
.modal-sub { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin-bottom: 14px; }
.nu-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.nu-check { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; color: var(--ink) !important; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
legend { font-size: 12px; color: var(--muted); padding: 0 6px; }
.nu-secret { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--input-bg); border: 1px solid var(--line); padding: 12px; border-radius: 12px; margin: 10px 0; }
.nu-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; background: var(--card2); color: var(--muted); margin-right: 3px; }
.nu-chip.on { background: var(--mint-soft); color: var(--mint); font-weight: 700; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-ink); border: 1px solid var(--line2); padding: 11px 18px; border-radius: 999px; font-size: 13px; z-index: 99; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); animation: toastUp var(--ios-fast) both; }
.palette-box { width: 100%; max-width: 560px; background: var(--surface-solid); border: 1px solid var(--line2); border-radius: 20px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); overflow: hidden; animation: popIn var(--ios-fast) both; }
.palette-box input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 15px; outline: none; color: var(--ink); }
#palette-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
#palette-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
#palette-list li.sel, #palette-list li:hover { background: var(--card2); }
#palette-list li small { margin-left: auto; color: var(--muted); font-size: 11px; }
#palette-list .ico { width: 16px; height: 16px; opacity: .7; color: var(--mint); }
.palette-hint { padding: 8px 14px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }

/* API 설정 드로어 */
#api-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 94vw); background: var(--surface-solid); border-left: 1px solid var(--line2); z-index: 60; box-shadow: -30px 0 80px -30px rgba(0,0,0,.7); display: flex; flex-direction: column; transform: translateX(calc(100% + 24px)); transition: transform var(--ios-slow); }
#api-drawer.open { transform: none; }
.drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 22px 40px; }
.ep-table td input, .ep-table td select { width: 100%; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--input-bg); color: var(--ink); font-size: 12px; }
.ep-table td.m { width: 86px; } .ep-table td.k { width: 170px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }
.ep-table tr.changed td { background: var(--amber-soft); }
.ep-table td { text-align: left; white-space: normal; }

@media (max-width: 960px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { position: fixed; left: 0; top: 0; bottom: 0; margin: 10px; width: var(--sb-w); height: calc(100vh - 20px); z-index: 40; transform: translateX(calc(-100% - 20px)); transition: transform var(--ios-slow); }
  body.sb-open #sidebar { transform: none; }
  body.sb-open #sb-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 39; animation: fadeIn .3s; }
  .tb-menu { display: grid; }
  .tb-search { width: auto; flex: 1; }
  .crumbs { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  #screen-login { grid-template-columns: 1fr; }
  .login-story { display: none; }
  #stage { padding: 16px; }
  #topbar { padding: 10px 16px 0; }
}
@media print { body::before, body::after { display: none; } body { background: #fff; color: #000; } #sidebar, #topbar, .date-bar, .page-actions { display: none !important; } #app { grid-template-columns: 1fr; } }