/* ─────────────────────────────────────────────────────────────
   MPLANIT 대시보드 앱 스타일 (2026-08-19)
   스킬: .claude/skills/mplanit-dashboard-app-style — DESIGN-SYSTEM.md가 단일 원본

   styles.css **다음에** 읽혀 색·글꼴만 갈아끼운다. 구조(클래스명·레이아웃)는
   건드리지 않으므로, 이 파일 링크 한 줄을 빼면 예전 화면으로 그대로 돌아온다.
   mobile.css는 이 파일 뒤에 와야 한다 — 모바일 레이아웃 규칙이 이겨야 하기 때문.
   ───────────────────────────────────────────────────────────── */

/* ── 폰트: Paperlogy 4종. CDN이 아니라 우리 서버 /static/fonts 에서 준다 ── */
@font-face { font-family: "Paperlogy"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/Paperlogy-4Regular.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/Paperlogy-6SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/Paperlogy-7Bold.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 800; font-display: swap;
  src: url("/static/fonts/Paperlogy-8ExtraBold.woff2") format("woff2"); }

:root {
  /* 브랜드 토큰 (DESIGN-SYSTEM.md §1 — 그대로) */
  --c-primary: #19448C;
  --c-secondary: #379BC1;
  --c-accent: #064EC8;
  --c-link: #2576C1;
  --c-text: #111111;
  --c-text-sub: #5A5A5A;
  --c-bg: #F8F9FA;
  --c-card: #E9F0F2;
  --c-border: #DFDFDF;
  --c-thead-bg: #DFE8F5;
  --c-thead-text: #19448C;
  --c-table-border: #C9D7EC;
  --c-white: #FFFFFF;
  --c-danger: #C0392B;  --c-danger-bg: #FBEDEB;
  --c-good:   #1E7A46;  --c-good-bg:   #E9F5EE;
  --c-warn:   #8A6D1A;  --c-warn-bg:   #FBF4DE;
  --c-sidebar: #153A77;
  --radius: 12px;

  /* 기존 변수 갈아끼우기 — styles.css의 규칙들이 그대로 새 색을 따라온다.
     --green은 '네이버 그린'이 아니라 '주조색' 자리로 쓰이고 있어 브랜드색으로 바꾼다.
     진짜 '좋음'을 뜻하던 자리(증감·상태)는 아래에서 따로 --c-good으로 되돌린다. */
  --green: #19448C;
  --green-dark: #064EC8;
  --bg: #F8F9FA;
  --card: #FFFFFF;
  --border: #DFDFDF;
  --text: #111111;
  --muted: #5A5A5A;

  /* 차트 채널색은 **각 스토어의 브랜드 컬러를 그대로 쓴다**(2026-08-19 지시).
     styles.css의 원래 값(--smartstore·--coupang…)을 덮지 않고 그대로 둔다 —
     한때 브랜드 블루 계열로 통일했다가, 어느 채널인지 한눈에 알아보는 쪽이
     낫다고 판단해 되돌렸다. 색 구분력은 마켓 로고색이 서로 달라 충분하다. */
  --pc: #19448C;
}

body {
  font-family: "Paperlogy", "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.55;
}

/* ── 상단바 ── */
#topbar { background: var(--c-white); border-bottom: 1px solid var(--c-border); }
.topbar-left #page-title { font-weight: 800; color: var(--c-text); }

/* 브랜드 블록 — 사이드바 좌상단 코너. ad-monitor와 같은 구조·수치를 쓴다.
   엠블럼은 칩 없이 남색 위에 그대로 올린다(묻히는 톤 — ad-monitor에서 정한 선택). */
.side-brand-block {
  display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; cursor: pointer;
}
.side-brand-block .logo-chip {
  width: 38px; height: 38px; background: transparent;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.side-brand-block .logo-chip img { height: 32px; display: block; }
.side-brand-block .app-name {
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  line-height: 1.2; white-space: nowrap;
}
.side-brand-block .app-sub {
  display: block; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .62);
  letter-spacing: -0.01em; margin-top: 2px;
}
/* PC에서 사이드바를 접으면 심볼만 남긴다 */
#sidebar.collapsed .side-brand-block { justify-content: center; padding: 14px 0 10px; }
#sidebar.collapsed .side-brand-block .app-name { display: none; }
#sidebar.collapsed .side-brand-block .logo-chip { width: 34px; height: 34px; }
#sidebar.collapsed .side-brand-block .logo-chip img { height: 22px; }

/* ── 사이드바: 본문 primary보다 한 톤 진한 남색 면 ──
   화면 최상단까지 올라온다 — 상단바가 오른쪽 본문 칸 안에 있어서 브랜드 블록이
   좌상단 코너를 차지한다(ad-monitor와 같은 골격). */
#sidebar {
  background: var(--c-sidebar); border-right: none;
  top: 0; height: 100vh;
}
#main-col { display: flex; flex-direction: column; min-width: 0; }
#topbar { flex-shrink: 0; }
.nav-parent { color: rgba(255, 255, 255, .88); font-weight: 600; border-radius: 9px; }
.nav-parent:hover { background: rgba(255, 255, 255, .08); }
.nav-group.open > .nav-parent { color: #fff; }
.nav-caret { color: rgba(255, 255, 255, .55); }
.nav-children button { color: rgba(255, 255, 255, .72); border-left-color: transparent; }
.nav-children button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-children button.active {
  background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700;
  border-left-color: var(--c-secondary);
}
.nav-children button.nav-sub::before { color: rgba(255, 255, 255, .38); }
.nav-children button.nav-sub.active::before { color: var(--c-secondary); }
/* 메뉴 아이콘 — 이모지 금지(스킬 §8). 1.6px stroke 단색 라인 SVG만 쓰고 글자색을 따라간다 */
.nav-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; }
.nav-ico svg {
  width: 18px; height: 18px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 브랜드 선택 블록 — 그라데이션 금지(스킬 §8). 반투명 흰 블록으로 바꾼다 */
.side-adv {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
}
.side-adv select { border: 1px solid var(--c-border); }

/* ── 버튼 3종 ── */
button { border-radius: 8px; font-weight: 600; color: var(--c-text-sub); }
button.primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }
button.primary:hover { background: var(--c-accent); border-color: var(--c-accent); }
button.danger { background: #fff; border-color: var(--c-danger); color: var(--c-danger); }
select, input, textarea { border-radius: 8px; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--c-secondary); outline-offset: -1px; }

/* ── KPI 카드: 수치는 항상 브랜드색 ── */
.card { border-radius: var(--radius); border-color: var(--c-border); }
.card .label { color: var(--c-text-sub); font-weight: 600; font-size: 12px; }
.card .value { color: var(--c-primary); font-weight: 800; }
.card .sub { color: var(--c-text-sub); }
/* 증감은 지표 성격이 아니라 색으로만 읽힌다 — 상태색 고정 4종 */
.mom.up { color: var(--c-good); }
.mom.down { color: var(--c-danger); }

/* ── 표: 헤더는 연한 브랜드 틴트 + 브랜드색 볼드 (진한 면 금지) ── */
.table-wrap { border-radius: var(--radius); border-color: var(--c-border); }
th { background: var(--c-thead-bg); color: var(--c-thead-text); font-weight: 700; border-bottom: 1px solid var(--c-table-border); }
th, td { border-bottom-color: var(--c-border); }
tr:hover td { background: #F3F7FD; }
/* 위계 3단 — 일반행 < 소계 < 합계. 배경 톤으로만 구분한다 */
tr.subtotal td { background: var(--c-bg); font-weight: 700; }
tr.total td, tr.sum td, tfoot td {
  background: var(--c-thead-bg); font-weight: 800; color: var(--c-primary);
  border-top: 2px solid var(--c-table-border);
}
.kw-block { border-radius: var(--radius); border-color: var(--c-border); }
.kw-block h3 { background: var(--c-white); color: var(--c-primary); font-weight: 700;
  border-bottom: 1px solid var(--c-border); }

/* ── 배지·칩·상태: 상태색 4종 고정 ── */
.badge { background: var(--c-thead-bg); color: var(--c-primary); border-radius: 9px;
  padding: 2px 9px; font-size: 11px; font-weight: 700; }
.badge.mock { background: var(--c-warn-bg); color: var(--c-warn); }
.chip { background: var(--c-card); color: var(--c-text-sub); border-radius: 9px; font-weight: 600; }
.chip.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.chip.crit { background: var(--c-danger-bg); color: var(--c-danger); }
.chip.via24 { background: var(--c-thead-bg); color: var(--c-primary); }
.chip.src { border-color: var(--c-border); color: var(--c-text-sub); }
.status.good { color: var(--c-good); }
.status.warn { color: var(--c-warn); }
.status.crit { color: var(--c-danger); }
.rank-badge { background: var(--c-primary); border-radius: 6px; }

/* ── 패널·섹션·차트 ── */
.chart-box { border-radius: var(--radius); border-color: var(--c-border); }
.section-title { color: var(--c-primary); font-weight: 800; border-top-color: var(--c-border); }
.legend { color: var(--c-text-sub); }
#tooltip { border-radius: 10px; border-color: var(--c-border); box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
.msel.open .msel-btn { border-color: var(--c-secondary); }
.msel-item input { accent-color: var(--c-primary); }

/* ── 모달: 헤더는 브랜드 면 + 흰 글자 ── */
.modal-card, .modal-card.wide { border-radius: var(--radius); }
.modal-card > h3, .modal-card > h2 {
  background: var(--c-primary); color: #fff; margin: -20px -20px 16px;
  padding: 14px 20px; border-radius: var(--radius) var(--radius) 0 0; font-weight: 700;
}

/* ── 화면 설명: 한 줄만 보이고, ?를 누르면 자세한 내용이 펼쳐진다 ── */
.help-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; padding: 0; margin-left: 4px; vertical-align: middle;
  border: 1px solid var(--c-border); border-radius: 50%; background: #fff;
  color: var(--c-text-sub); font-size: 11px; font-weight: 700; line-height: 1;
}
.help-q:hover { border-color: var(--c-secondary); color: var(--c-primary); }
.help-q[aria-expanded="true"] {
  background: var(--c-thead-bg); border-color: var(--c-table-border); color: var(--c-primary);
}
.help-more {
  display: block; margin-top: 6px; padding: 8px 10px;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px;
}
/* display:block이 브라우저 기본 [hidden]{display:none}을 눌러 버려서, 접힌 상태를 따로 못박는다 */
.help-more[hidden] { display: none; }

/* ── 로딩 링 ── */
#load-ring .bar { stroke: var(--c-primary); }

/* ── 로그인 ── */
.login-card { border-radius: var(--radius); }
.login-card h2 { color: var(--c-primary); font-weight: 800; }