/* 색은 파랑·하늘색·흰색·검정만 쓴다. 값을 여기 한 군데 모아둬서 톤을 바꾸고 싶을 때
   이 블록만 손대면 되게 했다. 글자는 검정 계열로 읽고, 파랑은 강조에만 쓴다. */
:root {
  --navy: #0b2545;        /* 가장 진한 남색 — 상단바, 강조 텍스트 */
  --blue-900: #12326e;
  --blue-800: #1e3a8a;
  --blue-700: #1d4ed8;   /* 남겨두긴 하지만 지금은 안 쓴다 — 파랑 글씨는 전부 --blue-800 */
  --blue-600: #2563eb;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --sky-500: #7fa8cf;
  --sky-200: #cfe0ee;
  --sky-100: #e9f1f8;
  --blue-50: #eff6ff;

  --bg: #fff;             /* 페이지 바탕 — 흰색 */
  --surface: #fff;
  /* 선은 전부 검정. 표 안쪽 행 구분선까지 진한 검정으로 두면 줄마다 실선이 그어져
     숫자보다 선이 먼저 보이므로, 같은 검정을 옅게 깐 값을 쓴다(색은 같고 투명도만 다름). */
  --line: #000;           /* 카드·표 테두리, 구분선 */
  --line-soft: rgba(0, 0, 0, 0.14);   /* 표 안쪽 행 구분선 */
  --hover: #f7fafd;       /* 마우스 올렸을 때만 아주 옅게 */
  --text: #17181c;        /* 본문 — 거의 검정 */
  --text-mid: #5b6b7f;    /* 보조 설명 */
  --text-soft: #9bacbf;   /* 비활성·placeholder */
}

* { box-sizing: border-box; }
/* 스크롤바 자리를 항상 비워둔다. 탭마다 페이지 길이가 달라서(특이사항 탭이 제일 짧다)
   세로 스크롤바가 생겼다 없어졌다 하면, 가운데 정렬된 .container와 상단바가 그때마다
   스크롤바 폭의 절반(약 7.5px)씩 좌우로 밀려 "정렬이 흔들리는" 느낌을 준다. */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: "Pretendard", "Malgun Gothic", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.topbar {
  background: var(--blue-800);
  color: #fff;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
}
.topbar .brand { font-weight: 600; }
.topbar nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
  font-size: 14px;
}
.topbar nav a:hover { text-decoration: underline; }
.topbar nav .inline-form-btn { display: inline; margin-left: 20px; }
.topbar nav .link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.topbar nav .link-btn:hover { text-decoration: underline; }

.login-card { max-width: 360px; margin: 40px auto; }
.login-card .form-row { margin-top: 12px; }
.login-card input[type="password"] { flex: 1; }

/* 콘텐츠 폭. 1320px까지 늘리면 그래프·카드가 휑해서 1100으로 좁혔다.
   안쪽 요소들은 원래 정렬(대개 왼쪽)을 그대로 쓰고, 이 컨테이너만 가운데로 온다. */
.container { max-width: 1100px; margin: 32px auto; padding: 0 20px; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--line);
}
/* 새로고침 버튼은 탭과 같은 글씨 크기로 두되, 아래 실선에 얹힌 것처럼 아래 모서리는 각지게. */
.page-head .btn {
  font-size: 14px;
  padding: 6px 14px;
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
}

h1 { font-size: 20px; margin: 0 0 8px; }
h2 { font-size: 15px; margin: 0 0 12px; color: var(--blue-900); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.view-tabs {
  display: flex;
  gap: 4px;
}
.view-tab {
  padding: 10px 18px;
  color: var(--text-mid);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.view-tab:hover { color: var(--blue-800); }
.view-tab.active {
  color: var(--blue-800);
  border-bottom-color: var(--blue-800);
}

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-mid);
  font-size: 13px;
  text-decoration: none;
}
.pill:hover { border-color: var(--sky-500); background: var(--hover); }
.pill.active {
  background: var(--blue-900);
  border-color: var(--blue-900);
  color: #fff;
  font-weight: 600;
}
.pill-count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sky-100);
  color: var(--blue-800);
}
.pill.active .pill-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sort-link:hover { color: var(--blue-600); }
.sort-link.active { color: var(--blue-900); }
.sort-link .arrow { font-size: 9px; }

.table-scroll { overflow-x: auto; border-radius: 8px; }
.balance-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.balance-table th, .balance-table td {
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  white-space: nowrap;
}
.brand-search-col { min-width: 150px; }
.balance-table th {
  background: var(--surface);
  color: var(--blue-900);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  border-bottom: 2px solid var(--line);
}
.balance-table tr:last-child td { border-bottom: none; }
.balance-table tbody tr:hover { background: var(--hover); }

.amount { font-weight: 600; }
/* 빨강을 안 쓰기로 해서, 경고는 색 대신 진한 남색 + 하늘색 배경 칩으로 눈에 띄게 한다. */
.runway-alert {
  color: var(--blue-900);
  font-weight: 700;
  background: var(--sky-100);
  padding: 2px 8px;
  border-radius: 999px;
}




.summary-strip {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* 차트가 없는 카드는 높이가 남으니 내용을 가운데로 모아 나란히 보이게 한다. */
.summary-card:not(.wide) { display: flex; flex-direction: column; justify-content: center; }
.summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
}
.summary-card .label { font-size: 11px; color: var(--text-mid); margin-bottom: 3px; }
.summary-card .value { font-size: 15px; font-weight: 700; color: var(--text); }
.summary-card .card-delta { font-size: 11px; color: var(--text-mid); margin-top: 3px; }
/* 강조 카드도 바탕은 흰색으로 두고, 왼쪽에 하늘색 굵은 선을 세워 표시한다. */
.summary-card.highlight {
  border-left: 3px solid var(--sky-500);
}
.summary-card.highlight .value { color: var(--blue-800); }
/* 챙겨야 하는 카드는 같은 자리 선을 더 진하게 해서 무게를 준다. */
.summary-card.warn {
  border-left: 3px solid var(--blue-800);
}
.summary-card.warn .value { color: var(--blue-900); }

/* 미니 차트가 들어가는 카드는 폭을 더 준다. 좁으면 선이 뭉개져서 흐름이 안 보인다. */
.summary-card.wide { flex: 1 1 300px; min-width: 280px; }
/* viewBox 비율대로 늘리면 카드 폭이 넓을 때 세로로도 같이 커져 카드가 200px 넘게 높아진다.
   가로만 늘리고 높이는 고정한다 — 추세 모양만 보면 되는 그래프라 비율이 깨져도 상관없다. */
.card-chart { width: 100%; height: 46px; display: block; margin-top: 8px; }
.card-line {
  fill: none; stroke: #5b7fb5; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
/* 전월 선은 참고용이라 뒤로 물러나 보이게 점선 + 회색. */
.card-line.prev { stroke: var(--text-soft); stroke-width: 1.6; stroke-dasharray: 4 3; }
.card-baseline { stroke: var(--text-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.card-dot { fill: var(--blue-800); }
.card-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 10px; color: var(--text-mid); margin-top: 5px;
}
.card-swatch { display: inline-block; width: 14px; margin-right: 4px; vertical-align: middle; }
.card-swatch.line { border-top: 2px solid #5b7fb5; }
.card-swatch.dash { border-top: 2px dashed var(--text-soft); }
.chart-caption { font-size: 12px; color: var(--text-mid); }

/* 홈 그래프 카드는 위아래 두 단이다.
   위: 두 달 비교 두 개를 좌우로. 아래: 본부별·계정별 비중을 위아래로. */
.home-chart { display: flex; flex-direction: column; }
.home-row { display: flex; gap: 28px; }
.home-row .compare-block { flex: 1 1 50%; min-width: 0; }
.home-shares {
  display: flex; flex-direction: column; gap: 26px;
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-soft);
}
.compare-title { font-size: 12px; color: var(--text-mid); margin-bottom: 12px; }

/* 두 달 비교 세로 막대. 막대를 길게 뽑아야 차이가 눈에 들어온다. */
/* 막대·기준선·라벨을 전부 절대 위치로 얹는다. 라벨을 칸 안에 그냥 두면 그만큼 자리를
   차지해서 height:100%인 막대가 눌리고, 큰 값이 오히려 짧게 그려진다. */
/* 오른쪽 칸(본부별+계정별)이 훨씬 길어서 왼쪽에 빈 공간이 남는다. 남는 높이를 막대가
   가져가게 해서 두 칸 길이를 맞춘다 — 막대 높이는 %라 칸이 커지면 같이 커진다. */
/* 왼쪽 칸은 비교 블록 두 개(전월 전체 / 전월 동기간)를 위아래로 쌓는다. 하나만 두면
   오른쪽 높이를 맞추려고 막대가 400px 넘게 길어져서 과했다. */
.compare-block { display: flex; flex-direction: column; }
.compare-bars {
  position: relative;
  display: flex; gap: 52px; align-items: flex-end; justify-content: center;
  height: 150px; margin-bottom: 30px;
}
.compare-col { position: relative; }
.compare-bar { position: absolute; left: 0; right: 0; bottom: 0; }
.compare-label { position: absolute; left: 0; right: 0; bottom: -22px; }
.compare-delta { position: absolute; left: 0; right: 0; }
.compare-delta { font-size: 11px; font-weight: 700; text-align: center; }
/* 막대가 서 있는 바닥선. 막대보다 위에 그려야 선이 끊기지 않고 쭉 이어져,
   막대가 선 위에 얹혀 있는 것처럼 보인다. */
.compare-base {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  border-top: 1px solid var(--line); pointer-events: none; z-index: 2;
}
/* 폭을 좁히고 높이를 키워 세로로 길쭉한 모양으로. 뭉툭한 막대보다 차이가 잘 읽힌다. */
.compare-col { flex: 0 1 74px; height: 100%; }
.compare-bar { background: #5b7fb5; border-radius: 3px 3px 0 0; min-height: 2px; }
.compare-bar.prev { background: #cfdae6; }
.compare-label { font-size: 11px; color: var(--text-mid); text-align: center; }
.compare-nums { font-size: 12px; line-height: 1.7; }
.compare-nums .muted { margin-right: 2px; }
.compare-note { font-size: 10px; color: var(--text-soft); margin-top: auto; padding-top: 6px; }

/* 팀 비중 가로 막대. 비율이 목적이라 전체 폭을 100%로 채운다.
   왼쪽 세로 막대(250px)와 나란히 놓이므로, 얇으면 한쪽만 비어 보인다 — 높이를 키우고
   목록도 넉넉히 벌려 두 칸의 무게를 맞춘다. */
/* 왼쪽이 길어진 만큼 오른쪽도 요소 사이를 벌려 아래가 비어 보이지 않게 한다.
   남는 높이를 요소 사이에 균등하게 나눠주면 끝에 빈 공간이 몰리지 않는다. */
.home-half.bordered { justify-content: space-between; }
.compare-bar:hover { opacity: .78; }
.compare-bar { transition: opacity .12s; }

/* 전월 대비 편차: 증가/감소를 두 칸으로 나눠 각각 큰 순으로. 한 줄에 섞여 있으면
   "어느 쪽인지" 매번 판단해야 해서 안 꽂힌다 → 아예 좌우로 가른다. */
.dev-caption { font-weight: 400; color: var(--text-soft); font-size: 11px; }
/* 전월 '전체' 기준 표에만 붙는 한 줄 안내. 제목 바로 아래, 표와 붙여둔다. */
.dev-note { color: var(--text-soft); font-size: 11px; margin: -4px 0 10px; }
.dev-cols { display: flex; gap: 28px; }
.dev-col { flex: 1; min-width: 0; }
.dev-col-head {
  font-size: 12px; font-weight: 700; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 2px solid;
}
.dev-col.up .dev-col-head { color: var(--blue-800); border-color: var(--blue-800); }
/* 감소는 주황 계열 — 파랑(증가)과 확실히 구분되고, 빨강(브랜드검색 알림)과도 안 겹친다. */
.dev-col.down .dev-col-head { color: #b45309; border-color: #e6b877; }
.dev-empty { font-size: 12px; color: var(--text-soft); padding: 4px 0; }
.dev-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.dev-name { width: 80px; font-size: 12px; font-weight: 600; flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-bar-track { flex: 1; min-width: 0; height: 14px; }
.dev-bar2 { display: block; height: 100%; border-radius: 3px; transition: opacity .12s; }
.dev-item:hover .dev-bar2 { opacity: .78; }
.dev-col.up .dev-bar2 { background: var(--blue-800); }
.dev-col.down .dev-bar2 { background: #d9893a; }
.dev-val2 { font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.dev-col.up .dev-val2 { color: var(--blue-800); }
.dev-col.down .dev-val2 { color: #b45309; }

@media (max-width: 720px) {
  .dev-cols { flex-direction: column; gap: 18px; }
}

/* 계정별은 순위를 보는 지표라 100% 스택 대신 한 줄에 하나씩 눕힌 막대로 보여준다.
   스택 막대와 아래 목록이 같은 내용을 두 번 말하던 걸 한 줄로 합친 것이다. */
.share-block { display: flex; flex-direction: column; }
/* 비중 블록들 사이에도 월비교↔비중 사이와 같은 구분선을 둔다. 첫 블록엔 빼고 둘째부터. */
.share-block + .share-block { padding-top: 26px; border-top: 1px solid var(--line-soft); }
.rank-list { display: flex; flex-direction: column; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.rank-name { min-width: 92px; font-size: 12px; font-weight: 600; }
/* 회색 트랙을 깔면 비중 값이 작을 때(최대 25% 남짓) 대부분이 빈 칸으로 남아
   "채워야 하는데 안 찼다"처럼 보인다. 바탕을 없애고 막대만 둔다 — 길이는 그대로 비중에 비례. */
.rank-track { flex: 1; min-width: 0; height: 14px; }
.rank-fill { display: block; height: 100%; border-radius: 3px; transition: opacity .12s; }
.rank-fill:hover { opacity: .78; }
.rank-amount { min-width: 108px; text-align: right; font-size: 11px; color: var(--text-mid); }
.rank-pct { min-width: 48px; text-align: right; font-size: 12px; font-weight: 700; color: var(--blue-800); }

@media (max-width: 860px) {
  /* 좁은 화면에서는 옆에 붙이면 둘 다 뭉개져서 아래로 내린다. */
  .home-chart { flex-direction: column; }
  .home-half.bordered { border-left: 0; border-top: 1px solid var(--line-soft); padding: 16px 0 0; }
  .compare-bars { height: 170px; }
}

.roas-value { font-weight: 700; color: var(--blue-800); }

/* 소진액 묶음은 칠하는 대신 좌우 하늘색 실선으로 구역을 잡는다. */
.spend-col { border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
/* 월간 표에서 눈이 먼저 가야 하는 건 '지금 잔액이 얼마 남았나'라, 파란 강조는 잔액 쪽에 둔다.
   소진액·전환매출액은 나란히 읽는 값이라 같은 평문 검정으로 맞췄다.
   상세 모드의 '누적' 칸도 .amount를 쓰기 때문에 잔액 전용 클래스로 걸어야 그쪽이 안 물든다. */
.balance-amount { color: var(--blue-800); }

.chart-card { padding: 18px 20px 8px; position: relative; }
.chart-legend { display: flex; gap: 16px; margin-bottom: 4px; font-size: 12px; color: var(--text-mid); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }
.legend-swatch.bar { background: #86a4cd; }
.monthly-chart { width: 100%; height: auto; display: block; }
.chart-axis { stroke: var(--line-soft); stroke-width: 1; }
.chart-axis-label { font-size: 9px; fill: var(--text-soft); text-anchor: middle; }
.chart-bar { fill: #86a4cd; }

/* 매체 색은 채도를 낮춘 파랑 한 계열로만 쓰고, 파워링크 > 쇼핑검색 > 브랜드검색 > GFA
   순서로 점점 연해지게 네 단계를 잡았다. 색상(hue)을 틀지 않고 밝기만으로 구분하므로
   초록기나 청록기가 섞이지 않는다 — 모든 값에서 파랑(B)이 초록(G)보다 뚜렷이 높다. */
.chart-bar.ch-PL,  .legend-swatch.bar.ch-PL  { fill: #5b7fb5; background: #5b7fb5; }
.chart-bar.ch-SH,  .legend-swatch.bar.ch-SH  { fill: #86a4cd; background: #86a4cd; }
.chart-bar.ch-BS,  .legend-swatch.bar.ch-BS  { fill: #b3c6e0; background: #b3c6e0; }
.chart-bar.ch-GFA, .legend-swatch.bar.ch-GFA { fill: #dae3ef; background: #dae3ef; }
.chart-bar.ch-META,.legend-swatch.bar.ch-META{ fill: #1e3a8a; background: #1e3a8a; }
.chart-bar.ch-ETC, .legend-swatch.bar.ch-ETC { fill: #eef2f7; background: #eef2f7; }
.chart-bar.ch-ALL, .legend-swatch.bar.ch-ALL { fill: #c9d6e6; background: #c9d6e6; }
/* '전체' 탭에서는 매체 대신 갈래(검색광고/GFA)로 쌓는다. 탭 앞 점 색과 같은 값을 쓴다. */
.chart-bar.ch-SA,  .legend-swatch.bar.ch-SA  { fill: #5b7fb5; background: #5b7fb5; }
/* 파스텔이라 인접한 조각이 붙어 보여서, 흰 실선으로 경계를 그어준다. */
/* 가장 연한 단계(GFA)가 흰 바탕에 묻히지 않도록 조각 경계는 흰 선으로 얇게만 긋는다. */
.chart-bar { stroke: #fff; stroke-width: 0.5; }

.channel-tabs { margin-bottom: 10px; }
/* 매체 탭 앞에 그 매체 색 점을 찍어서 차트 범례와 눈으로 이어지게 한다. */
.channel-tabs .pill.ch-PL::before,
.channel-tabs .pill.ch-SH::before,
.channel-tabs .pill.ch-BS::before,
.channel-tabs .pill.ch-GFA::before,
.channel-tabs .pill.ch-META::before,
.channel-tabs .pill.ch-ETC::before,
.channel-tabs .pill.ch-ALL::before,
.channel-tabs .pill.grp-SA::before,
.channel-tabs .pill.grp-GFA::before,
.channel-tabs .pill.grp-META::before,
.channel-tabs .pill.grp-ALL::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 6px; vertical-align: middle;
}
.channel-tabs .pill.ch-PL::before  { background: #5b7fb5; }
.channel-tabs .pill.ch-SH::before  { background: #86a4cd; }
.channel-tabs .pill.ch-BS::before  { background: #b3c6e0; }
.channel-tabs .pill.ch-GFA::before { background: #dae3ef; }
.channel-tabs .pill.ch-META::before{ background: #1e3a8a; }
.channel-tabs .pill.ch-ETC::before { background: #eef2f7; }
.channel-tabs .pill.ch-ALL::before { background: #c9d6e6; }
.channel-tabs .pill.grp-SA::before  { background: #5b7fb5; }
.channel-tabs .pill.grp-GFA::before { background: #dae3ef; }
.channel-tabs .pill.grp-META::before{ background: #1e3a8a; }
.channel-tabs .pill.grp-ALL::before { background: #c9d6e6; }

.channel-col { border-left: 1px solid var(--line-soft); }

/* 2단 매체 탭: 아래 단은 한 단계 들어가 있다는 게 보이게 살짝 줄이고 들여쓴다. */
/* 2단 매체 탭(검색광고 하위). 1단 탭 바로 아래에 한 단계 들여써서 둔다.
   1단 filter-bar의 margin-bottom(14px)만큼 이미 떨어져 있으니, 살짝만 끌어올려 붙인다. */
.channel-subtabs { margin-top: -2px; margin-bottom: 16px; }
.channel-subtabs .pill { font-size: 12px; padding: 5px 12px; }

.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.metric-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.metric-option {
  padding: 4px 12px; font-size: 12px; color: var(--text-mid); background: var(--surface);
  border: 0; cursor: pointer; font-family: inherit;
}
.metric-option + .metric-option { border-left: 1px solid var(--line); }
.metric-option:hover { background: var(--hover); }
.metric-option.active { background: var(--blue-800); color: #fff; }

/* 지표별 그래프를 두 벌 그려두고 선택된 것만 보여준다. 버튼이 링크가 아니라서
   페이지가 다시 로드되지 않고, 보던 스크롤 위치도 그대로 유지된다. */
.chart-pane { display: none; }
.chart-card[data-metric="spend"] .chart-pane[data-pane="spend"],
.chart-card[data-metric="conv"] .chart-pane[data-pane="conv"] { display: block; }
.metric-word { display: none; }
.chart-card[data-metric="spend"] .metric-word[data-pane="spend"],
.chart-card[data-metric="conv"] .metric-word[data-pane="conv"] { display: inline; }

.chart-bar { transition: opacity .12s; }
.chart-bar:hover { opacity: .72; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--blue-800); color: #fff; font-size: 12px; line-height: 1.4;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  transform: translate(-50%, -100%); box-shadow: 0 2px 8px rgba(11, 37, 69, .28);
}
.chart-tip[hidden] { display: none; }
.delta-up { color: var(--blue-800); font-weight: 600; }
.delta-down { color: var(--text-soft); font-weight: 600; }

.insight-filter-form { margin-bottom: 14px; }
.anomaly-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anomaly-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
}
.anomaly-name { font-weight: 700; }
.anomaly-desc { color: var(--text-mid); }
.anomaly-desc strong { color: var(--text); }

/* 태그도 파랑 한 계열이라, 급한 것일수록 진하게 칠해서 무게를 나눈다
   (danger가 가장 진하고 muted가 가장 옅다). */
.insight-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.insight-tag.tag-danger { background: var(--blue-800); color: #fff; }
.insight-tag.tag-warn { background: var(--sky-500); color: #fff; }
.insight-tag.tag-up { background: var(--sky-100); color: var(--blue-800); }
.insight-tag.tag-down { background: var(--blue-50); color: var(--text-mid); }
.insight-tag.tag-info { background: var(--sky-100); color: var(--blue-800); }
.insight-tag.tag-muted { background: var(--blue-50); color: var(--text-soft); }

.section-divider {
  margin: 32px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.section-divider h2 { margin: 0; }

.detail-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.account-select-form select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
}

/* 위 담당자 필터(pill)와 헷갈리지 않게, 요약/상세는 세그먼트 스위치 모양으로 구분한다. */
.mode-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.mode-option {
  padding: 6px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  text-decoration: none;
}
.mode-option:hover { color: var(--blue-800); }
.mode-option.active {
  background: var(--sky-100);
  color: var(--blue-900);
}

.account-link, .account-link:visited { color: inherit; text-decoration: none; }
.account-link:hover { color: var(--blue-600); text-decoration: underline; }
.account-link.active { color: var(--blue-800); font-weight: 600; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; color: var(--text-mid); }
.muted { color: var(--text-soft); }
.error-text { color: var(--blue-900); font-weight: 600; text-decoration: underline dotted; }

.btn {
  /* 상단 띠와 같은 색. 화면에서 파랑으로 꽉 찬 면은 이 색 하나로 통일한다. */
  background: var(--blue-800);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.btn:hover { background: var(--navy); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.ghost { background: var(--surface); color: var(--blue-900); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--hover); }
/* 삭제 버튼: 빨강을 못 쓰니 채워진 파랑 대신 테두리만 있는 모양으로 확실히 구분한다
   (실수로 누르기 쉬운 자리라 일반 버튼과 생김새가 달라야 한다). */
.btn.danger {
  background: var(--surface);
  color: var(--blue-900);
  border: 1px solid var(--blue-900);
  font-weight: 600;
}
.btn.danger:hover { background: var(--blue-900); color: #fff; }

.form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.form-row input, .form-row select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}
.form-row input[type="text"] { flex: 1; min-width: 140px; }

.actions { display: flex; gap: 6px; align-items: center; }
.inline-form-btn { display: inline; margin: 0; }

td input[type="text"], td input[type="number"] {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
}
td input[type="number"] { width: 90px; }

.checkbox-label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-mid); }

/* 쿠키 만료처럼 사람이 손을 써야 풀리는 상황을 화면 맨 위에 띄운다.
   GFA만 조용히 빠지는 실패라 알려주지 않으면 며칠씩 모르고 지나간다. */
.alert-bar {
  background: var(--sky-100);
  border: 1px solid var(--blue-800);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.6;
}
.alert-bar b { color: var(--blue-900); }
.alert-how { font-size: 11px; color: var(--text-mid); margin-top: 6px; }
.alert-how summary { cursor: pointer; font-weight: 600; }
.alert-how ol { margin: 6px 0 0; padding-left: 18px; line-height: 1.8; }
.alert-how code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; }

/* 브랜드검색 임박 배너. 실제 놓치면 광고가 끊기는 중요 알림이라 어두운 붉은색으로 강조한다
   (세션 만료 배너는 파랑 계열이라 색으로도 구분됨). */
.alert-brand {
  border-color: #991b1b; background: #fef4f4; color: #7f1d1d;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
}
.alert-brand b { color: #7f1d1d; }

/* 토큰 만료 예고. 쿠키 배너(파랑)와 구분되게 주황 계열 — 브랜드검색 임박(붉은색)만큼
   급하진 않지만 넘기면 안 되는 일이라 그 사이 톤으로 둔다.
   .alert-bar b가 파랑으로 고정돼 있어서 굵은 글씨 색도 같이 눌러줘야 한다. */
.alert-token { background: #fdf3e7; border-color: #d9893a; color: #8a5216; }
.alert-token b { color: #8a5216; }
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.alert-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.alert-dday {
  font-size: 12px; font-weight: 700; color: #fff; background: #991b1b;
  border-radius: 999px; padding: 1px 9px; min-width: 42px; text-align: center;
}
.alert-sub { color: #9b6a6a; font-size: 11px; }

.empty { color: var(--text-mid); padding: 20px 0; }



/* 모든 화면 상단 공용 메모(공지). 관리자는 클릭해서 그 자리에서 편집, 팀원은 읽기 전용. */
.memo-box {
  margin-bottom: 35px;
  /* 공지용이라 진한 남색 테두리를 굵게 둘러 또렷하게 강조한다. */
  border: 2px solid var(--blue-800);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
}
.memo-title { font-size: 14px; font-weight: 600; color: var(--blue-800); margin-bottom: 8px; }
.memo-view { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.memo-view.empty { color: var(--text-soft); }
/* 수정·취소 버튼 테두리도 박스와 같은 남색으로 맞춘다. */
/* 수정·취소 버튼 테두리도 박스와 같은 남색으로 맞춘다. */
.memo-box .btn.ghost { border-color: var(--blue-800); color: var(--blue-800); }

/* 읽기/편집은 data-mode로 하나만 보인다(둘 다 뜨는 겹침 방지). */
.memo-admin[data-mode="read"] .memo-edit { display: none; }
.memo-admin[data-mode="edit"] .memo-read { display: none; }

/* 문구가 여러 줄이어도 버튼이 첫 줄에 붙지 않고 세로 중앙에 오게 한다. */
.memo-admin { position: relative; }
.memo-read { display: flex; align-items: center; gap: 12px; min-height: 32px; padding-right: 66px; }
/* 수정 버튼은 박스 내용 영역(패딩 안쪽) 기준 세로 정중앙에 둔다.
   top/bottom:0 + margin:auto가 transform 방식보다 패딩 비대칭에 안 흔들린다. */
.memo-read .memo-btn-edit {
  position: absolute; right: 14px; top: 0; bottom: 0; margin: auto 0; height: fit-content;
}
.memo-read .memo-text {
  flex: 1; white-space: pre-wrap; word-break: break-word; cursor: text;
}
.memo-read .memo-text.empty { color: var(--text-soft); }
.memo-read .btn { flex-shrink: 0; align-self: center; }

.memo-edit textarea {
  width: 100%; resize: vertical; min-height: 44px;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; background: #fff;
  font-family: inherit; font-size: 13px; line-height: 1.6; color: var(--text);
}
.memo-edit textarea::placeholder { color: var(--text-soft); }
.memo-edit .memo-actions { display: flex; gap: 6px; margin-top: 8px; }