/* ===================================================================
   Marketing OS — 디자인 시스템 2.0 (2026-10-02)

   tokens.css · app.css 위에 **마지막으로** 얹는 층이다. 컴포넌트의 구조(레이아웃·
   반응형·접근성 규칙)는 app.css 가 계속 맡고, 여기서는 "어떻게 보이는가"만 바꾼다.
   토큰을 바꾸면 app.css 의 모든 컴포넌트가 따라 바뀐다 — 그래서 이 파일의 앞쪽 절반이
   토큰이고, 뒤쪽 절반은 토큰만으로 안 되는 모양(상단 바·사이드바·카드·표·버튼)이다.

   방향 — 한국 B2B SaaS(토스·당근 비즈) 문법을 따른다.
     · 바탕은 옅은 회색, 면은 흰색. **테두리 대신 아주 옅은 그림자와 여백**으로 층을 만든다.
     · 색은 하나다 — 파랑. 상태 색(초록·호박·빨강)은 점·작은 면에만 쓴다.
     · 제목은 크고 굵게(28/700), 본문은 14/1.65, 숫자는 항상 tabular-nums.
     · 모서리는 크게(카드 16 · 조작물 10). 큰 면일수록 둥글다.
     · 상단 바는 흰색 반투명 + 블러. 사이드바는 아이콘 + 글자, 활성은 옅은 파랑 면.
     · 첫 화면 진입 때만 섹션이 6px 올라오며 나타난다(이후 상호작용에는 모션을 더하지 않는다).

   명도 대비(WCAG AA) — bg #F4F5F7 / 흰 카드 기준으로 실측했다.
     ink #191F28 15.3   ink-2 #4E5968 6.6   mute #5E6978 5.0(bg) 5.6(card)
     primary #2257D6 6.2(card) · 흰 글자 6.2    danger #C42A3A 5.6(card) · wash 위 4.8
     ok-ink #0B6B49 6.4   warn-ink #8F5200 6.3
   =================================================================== */

:root {
  /* ── 색 ── */
  --navy:      #FFFFFF;          /* 상단 바 배경으로 쓰이던 토큰 — 이제 흰색 */
  --navy-2:    #F2F4F6;

  --ink:       #191F28;
  --ink-2:     #4E5968;
  --mute:      #5E6978;

  --bg:        #F4F5F7;
  --surface:   #FFFFFF;
  --surface-2: #F8F9FB;
  --surface-3: #EFF1F4;

  --line:        #E3E6EA;
  --line-2:      #EEF0F3;
  --line-strong: #858F9C;        /* 조작물 경계 — 흰 면 위 3.2:1 */

  --primary:      #2257D6;
  --primary-d:    #1B47B3;
  --primary-l:    #EAF1FE;
  --primary-line: #C7D8FA;

  --ok:        #12946B;
  --warn:      #D98200;
  --danger:    #C42A3A;
  --ok-ink:    #0B6B49;
  --warn-ink:  #8F5200;
  --ok-wash:     #E6F6EF;
  --warn-wash:   #FFF4E0;
  --danger-wash: #FDECEE;

  --scrim: rgba(25, 31, 40, 0.5);

  /* 차트용 — 2단계 성과 화면이 쓴다. 파랑 하나를 기준선(비교 기간)과 구분하려고 회색을 둔다. */
  --chart-1: #2257D6;            /* 이번 기간 */
  --chart-2: #9AA5B4;            /* 직전 기간(점선) */
  --chart-3: #12946B;
  --chart-4: #D98200;
  --chart-5: #7B61D1;
  --chart-grid: #E9ECF0;
  --chart-axis: #5E6978;

  /* ── 형태 ── */
  --radius-sm: 6px;              /* 칩·태그 */
  --radius:    10px;             /* 버튼·입력칸·타일 */
  --radius-lg: 16px;             /* 카드·표·패널 */
  --radius-xl: 20px;

  --border:      1px solid var(--line);
  --border-soft: 1px solid var(--line-2);

  /* 그림자는 파랑기 도는 회색으로 틴트한다. 순수 검정 그림자는 흙탕처럼 보인다. */
  --shadow-sm: 0 0 0 1px rgba(25, 31, 40, 0.04), 0 1px 2px rgba(25, 31, 40, 0.04);
  --shadow-md: 0 12px 32px rgba(25, 31, 40, 0.14), 0 2px 6px rgba(25, 31, 40, 0.06);
  --shadow-card: 0 0 0 1px rgba(25, 31, 40, 0.045), 0 2px 8px rgba(25, 31, 40, 0.04);

  /* ── 타이포 ── */
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2x: 22px;
  --fs-3x: 28px;
  --fs-4x: 36px;

  /* ── 레이아웃 ── */
  --topbar-h: 60px;
  --side-w:   248px;
  --content-max: 1320px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 0.14s var(--ease);
  --t-base: 0.22s var(--ease);
}

/* ===================================================================
   기본
   =================================================================== */
body { background: var(--bg); letter-spacing: -0.005em; }
h1, h2, h3, h4 { letter-spacing: -0.03em; }
::selection { background: var(--primary-l); color: var(--primary-d); }

/* 본문 건너뛰기 — 키보드 사용자가 사이드바를 매번 지나가지 않게 */
.skip {
  position: fixed; left: var(--s4); top: -64px; z-index: 200;
  padding: var(--s3) var(--s4);
  background: var(--ink); color: #fff; border-radius: var(--radius);
  font-weight: 600; transition: top var(--t-fast);
}
.skip:focus { top: var(--s3); text-decoration: none; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* ===================================================================
   상단 바 — 흰색 반투명 + 블러
   =================================================================== */
.topbar {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  gap: var(--s5);
}
.topbar__brand { color: var(--ink); gap: 10px; }
.topbar__brand:hover { opacity: 1; }
.topbar__mark {
  width: 28px; height: 28px; border-radius: 9px; background: none; flex: 0 0 auto;
  display: inline-flex;
}
.topbar__mark svg { display: block; width: 28px; height: 28px; }
.topbar__name { font-size: 17px; font-weight: 700; letter-spacing: -0.04em; }
.topbar__name b { font-weight: 700; color: var(--primary); opacity: 1; }

.topbar__actor { color: var(--mute); font-size: var(--fs-sm); font-weight: 500; }
.topbar__logout {
  height: 36px; padding: 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-2); background: var(--surface);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.topbar__logout:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink); }

.switcher__select {
  min-height: 40px; min-width: 168px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E6978' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 36px 0 var(--s4);
  -webkit-appearance: none; appearance: none;
  font-weight: 600;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.switcher__select:hover { background-color: var(--surface-3); border-color: var(--line-strong); }

.topbar__bell { color: var(--ink-2); border-radius: var(--radius); transition: background var(--t-fast); }
.topbar__bell:hover { background: var(--surface-3); color: var(--ink); }
.topbar__badge { background: var(--danger); top: 5px; right: 3px; box-shadow: 0 0 0 2px #fff; }

/* 모바일 메뉴 버튼 */
.menu__button { border-radius: var(--radius); }
.menu__bar { background: var(--ink); }

/* ===================================================================
   사이드바 — 아이콘 + 글자, 활성은 옅은 파랑 면
   =================================================================== */
@media (min-width: 1200px) {
  .shell { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side {
    background: var(--surface);
    border-right: 1px solid var(--line);
    padding: var(--s5) var(--s4) var(--s8);
  }
  .side__group { margin-bottom: var(--s5); }
  .side__group-label {
    padding: var(--s2) var(--s3);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--mute);
  }
  .side__link {
    justify-content: flex-start; gap: var(--s3);
    min-height: 44px; padding: 0 var(--s3);
    border-radius: 12px;
    color: var(--ink-2); font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .side__label { flex: 1 1 auto; min-width: 0; }
  .side__link:hover { background: var(--surface-3); color: var(--ink); }
  .side__link[aria-current="page"] {
    background: var(--primary-l); color: var(--primary-d);
    box-shadow: none; font-weight: 600;
  }
  .side__link .navicon { flex: 0 0 20px; color: var(--mute); transition: color var(--t-fast); }
  .side__link:hover .navicon { color: var(--ink-2); }
  .side__link[aria-current="page"] .navicon { color: var(--primary); }
  .side__badge { background: var(--primary); border-radius: 999px; font-weight: 700; }
}
.menu__link .navicon, .tabbar__link .navicon { display: none; }

/* 모바일 메뉴 시트·하단 탭바 */
.menu__sheet { border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-md); }
.menu__link { border-radius: 12px; }
.tabbar {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
}

/* ===================================================================
   본문·페이지 머리
   =================================================================== */
.wrap { max-width: var(--content-max); padding: var(--s10) var(--s8) var(--s16); }
@media (max-width: 760px) { .wrap { padding: var(--s6) var(--s4) calc(var(--tabbar-h) + var(--s10)); } }

.crumbs { font-size: 12.5px; margin-bottom: var(--s1); }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--primary); text-decoration: none; }

.pagehead { margin-bottom: var(--s8); align-items: flex-end; }
.pagehead h1 { font-size: var(--fs-3x); font-weight: 700; letter-spacing: -0.04em; line-height: 1.25; }
.pagehead__lede { font-size: 15px; color: var(--ink-2); margin-top: var(--s2); max-width: 64ch; line-height: 1.6; }
.pagehead__date { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .pagehead { margin-bottom: var(--s6); }
  .pagehead h1 { font-size: 24px; }
}

/* 탭 — 밑줄형. 활성은 굵게 + 파랑 밑줄, 비활성은 회색 */
.tabs { border-bottom: 1px solid var(--line); margin-bottom: var(--s8); gap: var(--s2); }
.tabs__link {
  padding: var(--s3) var(--s4); min-height: 46px;
  display: inline-flex; align-items: center;
  font-weight: 500; color: var(--mute);
  border-bottom-width: 2px; border-radius: 8px 8px 0 0;
}
.tabs__link:hover { color: var(--ink); background: var(--surface-3); text-decoration: none; }
.tabs__link[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--primary); background: transparent; }

/* ===================================================================
   섹션·카드 — 테두리 대신 옅은 그림자
   =================================================================== */
.section { margin-bottom: var(--s12); }
.section__title { font-size: 18px; font-weight: 700; letter-spacing: -0.035em; margin-bottom: var(--s4); }
.section__meta { font-size: 12.5px; color: var(--mute); font-weight: 500; }
.section__note { font-size: 13.5px; color: var(--mute); }

.card, .rows, .table, .tile, .brief, .conn-group, .dialog__panel {
  border: 0;
  box-shadow: var(--shadow-card);
}
.card { border-radius: var(--radius-lg); padding: var(--s6) var(--s8); }
.card + .card { margin-top: var(--s4); }
.rows, .table { border-radius: var(--radius-lg); }
.row { padding: var(--s4) var(--s6); border-bottom: 1px solid var(--line-2); transition: background var(--t-fast); }
.row:hover { background: var(--surface-2); }
.row__title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.row__sub { font-size: 13px; }

/* 표 — 머리글 옅게, 행 호버, 숫자열 정렬 */
.table th {
  background: var(--surface-2); color: var(--mute);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line);
}
.table td { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-2); font-size: 14px; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 타일 — 숫자는 크게, 라벨은 위에 작게. 증감은 칩이 아니라 글자색으로 */
.tile { border-radius: var(--radius-lg); padding: var(--s5) var(--s6); }
.tile__label { font-size: 13px; font-weight: 500; color: var(--mute); margin-bottom: var(--s2); }
.tile__value { font-size: 30px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile__delta { font-size: 13px; font-weight: 600; margin-top: var(--s2); }

/* 브리핑 판 */
.brief { border-left: 0; border-radius: var(--radius-lg); padding: var(--s8); background: var(--surface); position: relative; }
.brief::before {
  content: ""; position: absolute; left: 0; top: var(--s8); bottom: var(--s8);
  width: 4px; border-radius: 0 4px 4px 0; background: var(--primary);
}
.brief__line { font-size: 19px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.5; color: var(--ink); }
.brief__notice {
  border-radius: 12px; border-left-width: 0; padding: var(--s4) var(--s5);
  background: var(--surface-2); color: var(--ink-2);
}
.brief__notice--error { background: var(--danger-wash); color: var(--ink); }
.brief__notice--error strong { color: var(--danger); }

/* ===================================================================
   버튼
   =================================================================== */
.btn {
  min-height: 44px; padding: 0 var(--s5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  box-shadow: 0 1px 1px rgba(25, 31, 40, 0.04);
  transition: background var(--t-fast), border-color var(--t-fast), transform 0.08s var(--ease), box-shadow var(--t-fast);
}
.btn:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink); }
.btn:active { transform: scale(0.98); background: var(--line-2); }
.btn--primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 1px 2px rgba(34, 87, 214, 0.35);
}
.btn--primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn--soft { background: var(--primary-l); border-color: transparent; color: var(--primary-d); box-shadow: none; }
.btn--soft:hover { background: #DCE8FD; border-color: transparent; color: var(--primary-d); }
.btn--danger { color: var(--danger); border-color: var(--line); }
.btn--danger:hover { background: var(--danger-wash); border-color: #F2B8BE; color: var(--danger); }
.btn--sm { min-height: 36px; padding: 0 var(--s4); font-size: 13px; border-radius: 9px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; transform: none; }

/* ===================================================================
   입력
   =================================================================== */
.input, .textarea, select.input, .field__control {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); min-height: 44px; padding: var(--s2) var(--s4);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .textarea:focus, .field__control:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-l);
}
.field__label { font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ===================================================================
   칩·배너·토스트·대화상자
   =================================================================== */
.chip { border-radius: 8px; font-weight: 600; }
.chip--neutral { background: var(--surface-3); border-color: transparent; color: var(--ink-2); }
.chip--wait { background: var(--warn-wash); }
.chip--fail { background: var(--danger-wash); }
.chan { border-radius: 8px; }

.banner { border-radius: 14px; border-left-width: 0; box-shadow: none; }
.toast { border-radius: 14px; box-shadow: var(--shadow-md); }
.dialog__panel { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.empty { border-radius: var(--radius-lg); }

/* 오래 걸림 표시 줄 */
.busy__bar { background: linear-gradient(90deg, var(--primary), #5B8DEF); }

/* ===================================================================
   첫 진입 모션 — 섹션이 6px 올라오며 나타난다. transform·opacity 만 쓴다.
   =================================================================== */
@keyframes mos-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.wrap > .section, .wrap > .tiles, .wrap > .tabs, .wrap > .brief {
  animation: mos-rise 0.34s var(--ease) both;
}
.wrap > .section:nth-of-type(2) { animation-delay: 0.04s; }
.wrap > .section:nth-of-type(3) { animation-delay: 0.08s; }
.wrap > .section:nth-of-type(n+4) { animation-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .wrap > .section, .wrap > .tiles, .wrap > .tabs, .wrap > .brief { animation: none; }
}

/* 스크롤바 — 좁고 옅게 */
* { scrollbar-width: thin; scrollbar-color: #C9CFD8 transparent; }

/* ===================================================================
   다듬기 (스크린샷 확인 후) — 페이지 머리 날짜 위치·행 머리글·카드 안의 카드
   =================================================================== */
.pagehead { align-items: flex-start; }
.pagehead__actions { padding-top: var(--s2); }
.crumbs a { min-width: 0; margin-left: 0; padding: 0 var(--s1); }
.crumbs a:first-child { padding-left: 0; }

/* 표의 행 머리글(<th scope="row">)은 머리글 배경을 쓰지 않는다 — 열 머리글과 구분 */
.table tbody th {
  background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line-2);
}
.table tbody tr:last-child th { border-bottom: 0; }

/* 카드(.brief) 안에 또 카드가 들어가면 테두리·그림자를 걷고 머리선만 남긴다 */
.brief .rows, .brief .table, .brief .tile, .card .rows, .card .table {
  box-shadow: none; border: 1px solid var(--line-2);
}

/* ===================================================================
   모바일 — 흰 상단 바·하단 탭바에 맞춰 옛 남색용 글자색을 되돌린다
   (옛 CSS 가 남색 바 위의 흰 글자를 전제로 해서, 탭바 글자가 안 보였다)
   =================================================================== */
.menu__button:hover, .menu[open] > .menu__button { background: var(--surface-3); }
.menu__sheet { border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .topbar { padding-left: var(--s4); padding-right: var(--s3); gap: var(--s2); }
  .topbar__name { display: none; }                       /* 마크만 — 사업체 선택에 폭을 준다 */
  .topbar__right { flex: 1 1 auto; justify-content: flex-end; gap: var(--s1); min-width: 0; }
  .switcher { flex: 1 1 auto; min-width: 0; }
  .switcher__select { min-width: 0; width: 100%; max-width: 60vw; }
  .topbar__user { display: none; }                       /* 로그아웃은 메뉴 시트 안에 있다 */

  .tabbar {
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid var(--line);
    min-height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
  .tabbar__link { color: var(--mute); font-weight: 600; letter-spacing: -0.01em; transition: color var(--t-fast); }
  .tabbar__link:hover { color: var(--ink); }
  .tabbar__link[aria-current="page"] { color: var(--primary); }
  .tabbar__link[aria-current="page"]::before {
    top: 0; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary);
  }
  .tabbar__badge { background: var(--danger); }
}

/* 상단 바 보조 링크 — 사업체 추가(대표만)·비밀번호 변경 */
.topbar__add, .topbar__pw {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s3);
  border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.topbar__add { color: var(--primary-d); background: var(--primary-l); }
.topbar__add:hover { background: #DCE8FD; text-decoration: none; }
.topbar__pw:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
@media (max-width: 1199px) { .topbar__pw { display: none; } }
@media (max-width: 760px) { .topbar__add { display: none; } }
.menu__foot { flex-wrap: wrap; gap: var(--s2); }
.menu__foot .mute { flex: 1 1 100%; }

/* ===================================================================
   디자인 검수 1회차 수정 (2026-10-02)
   F1 빈 타일 · F2 모바일 표→카드 · F3 줄 목록 · F5 온보딩 상단 · F7 탭 · F8 탭바 글자 · 참고 몇 가지
   =================================================================== */

/* F1 — 값이 없는 타일의 안내는 숫자 크기가 아니라 캡션 크기. 가장 큰 글자가 '없음'이 되지 않게 */
.tile__value--empty {
  font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.55; color: var(--mute);
}

/* F5 — 온보딩 상단 바를 앱 골격과 같은 마크·글자로 */
.onb__top { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid var(--line); }
.onb__brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.04em; text-transform: none; }
.onb__brand b { color: var(--primary); font-weight: 700; }
.onb__brand:hover { text-decoration: none; }
.onb__mark svg { display: block; }
.onb__exit { color: var(--ink-2); font-weight: 500; }

/* 참고 — 상태 칩은 한 줄로, 접힌 설명 summary 에 펼침 표시 */
.chip--wait, .chip--fail, .chip--ok, .chip--live { white-space: nowrap; }
details.kwterms > summary { list-style: none; gap: var(--s2); }
details.kwterms > summary::-webkit-details-marker { display: none; }
details.kwterms > summary::before { content: "▸"; color: var(--mute); transition: transform var(--t-fast); }
details.kwterms[open] > summary::before { transform: rotate(90deg); }

/* F8 — 하단 탭바의 「메뉴」 버튼이 button 의 기본 글자 크기(14px)를 따라 혼자 컸다 */
.tabbar__link, .tabbar__more, .tabbar__link span { font-size: 11.5px; line-height: 1.2; }

@media (max-width: 760px) {
  /* F2 — 표→카드 변환: 라벨 있는 칸은 좌우 배치, 라벨 없는 칸은 위에서 아래로 왼쪽 정렬, 빈 칸 숨김 */
  .table td { text-align: left; align-items: baseline; }
  .table td.num { text-align: right; }
  .table td:not([data-label]) { display: block; }
  .table td:not([data-label])::before { content: none; }
  .table td:empty { display: none; }
  .table tbody tr {
    border: 0; box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg); padding: var(--s4) var(--s5); margin-bottom: var(--s3);
  }
  .table tbody th { display: block; padding: 0 0 var(--s2); border: 0; font-size: 15px; }
  .table td::before { font-size: 12.5px; }

  /* F3 — 줄 목록: 버튼이 있으면 아래 줄로 내리고 설명은 말줄임 없이 전부 */
  .rows .row { flex-wrap: wrap; align-items: flex-start; row-gap: var(--s2); padding: var(--s4); }
  .rows .row__main { flex: 1 1 100%; }
  .rows .row__sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .rows .row .btn, .rows .row__actions { margin-left: 0; }
  .rows .row__side { text-align: left; }
  .row__when { min-width: 48px; }

  /* F7 — 탭은 한 줄로 두고 옆으로 민다(3줄로 감겨 본문이 밀리지 않게). 오른쪽 끝은 흐리게 */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    padding-right: var(--s6);
  }
  .tabs__link { flex: 0 0 auto; scroll-snap-align: center; }
}

/* 성과 › 팀 효과 — 왼쪽 강조선과 글 사이에 여백(디자인 검수 지적). 오늘 브리핑 카드와 같은 문법 */
.teff__lead { padding: var(--s5) var(--s6) var(--s5) var(--s6); border-left-width: 4px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--surface); box-shadow: var(--shadow-card); }
.teff__legend { margin-bottom: var(--s4); }
@media (max-width: 520px) { .teff__lead { padding: var(--s4) var(--s4) var(--s4) var(--s5); } }

/* ===================================================================
   모바일 선택 바 (2026-10-02, 실기기 신고) — 바가 목록·미리보기를 가려 버튼을 누를 수 없었다.
   한 줄 높이로 줄이고(글 수 한 줄 + 버튼 세 개 한 줄), 위에 쌓이는 그림자를 가볍게 한다.
   =================================================================== */
@media (max-width: 768px) {
  .selbar--on {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    margin-top: var(--s3);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 16px rgba(25, 31, 40, 0.12);
  }
  .selbar__msg { flex-wrap: nowrap; gap: var(--s2); }
  .selbar__text { font-size: 13.5px; min-width: 0; }
  .selbar__msg .btn { flex: 0 0 auto; min-height: 36px; padding: 0 var(--s3); font-size: 12.5px; }
  .selbar__acts { flex-wrap: nowrap; gap: 6px; margin-top: 8px; }
  .selbar__acts .btn { flex: 1 1 0; min-width: 0; padding: 0 4px; min-height: 44px; font-size: 13px; letter-spacing: -0.03em; white-space: nowrap; }
  /* 선택 바가 떠 있는 동안 본문 맨 아래에 바 높이만큼 여백을 둬 마지막 줄도 누를 수 있게 */
  .has-selbar .wrap { padding-bottom: calc(var(--tabbar-h) + 120px); }
}

/* iPhone 홈 화면 앱: 앱 틀 아래·위로 남는 띠가 회색 바탕으로 드러나 레이아웃이 깨져 보였다(실기기 신고).
   바깥 바탕을 하단 탭바·상단 바와 같은 흰색으로 하고, 본문 영역만 회색(.main)으로 둔다. */
@media (max-width: 1199px) {
  html, body { background: var(--surface); }
}

/* QA-B: design.css 가 app.css 의 모바일 44px 규칙을 36/40px 로 덮어써서 일감·성과 등 곳곳의 작은 버튼이
   손가락 크기 미만이었다. 태블릿 폭까지 같은 기준을 되돌린다(선택 바의 버튼은 위에서 따로 정한 값이 우선). */
@media (max-width: 1024px) {
  .btn--sm { min-height: 44px; }
  .switcher__select { min-height: 44px; }
  .topbar__add, .topbar__pw, .topbar__logout { min-height: 44px; height: auto; }
}

/* 오래 걸림 — 이동·제출은 화면 전체를 덮는다(.is-block). 가는 막대·말풍선은 제자리 대기(fetch)용으로 남긴다. */
.busy__veil { display: none; }
html.is-block .busy { position: fixed; inset: 0; pointer-events: auto; cursor: progress; }
html.is-block .busy__label { display: none; }
html.is-block .busy__veil {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(247, 248, 250, 0.72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: busy-veil-in .2s ease both;
}
.busy__card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 200px; padding: 28px 32px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);
}
.busy__ring {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-top-color: var(--primary);
  animation: busy-spin .8s linear infinite;
}
.busy__msg { font-size: 16px; font-weight: 600; color: var(--ink); }
.busy__sub { font-size: 14px; color: var(--mute); }
@keyframes busy-veil-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.is-block .busy__veil { animation: none; }
  .busy__ring { animation-duration: 2s; }
}


/* ── 매출판 (M1, 2026-10-04) — 오늘 화면 맨 위 ─────────────────────
   큰 숫자 하나가 주인공이다. 나머지는 같은 크기로 나열하지 않고 한 줄 맥락으로 둔다. */
.rboard { padding: var(--s5); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.rboard__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.rboard__big { font-size: 40px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rboard__big small { font-size: var(--fs-base, 16px); font-weight: 600; margin-left: 4px; color: var(--ink-2); }
.rboard__delta { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rboard__up { color: var(--ok-ink); font-weight: 600; }
.rboard__down { color: var(--danger); font-weight: 600; }
.rboard__flat { color: var(--mute); }
.rboard__goal { margin-top: var(--s4); }
.rboard__track { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.rboard__fill { height: 100%; background: var(--primary); border-radius: 4px; }
.rboard__goaltxt { margin-top: var(--s1); font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rboard__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: 0; }
.rboard__stats dt { font-size: var(--fs-sm); color: var(--mute); }
.rboard__stats dd { margin: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rboard__stats .rboard__sub { font-size: var(--fs-sm); font-weight: 400; color: var(--mute); }
.rboard__src { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.rboard__srctitle { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--s2); }
.rboard__srcrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 150px); gap: var(--s3); align-items: center; padding: 3px 0; font-size: var(--fs-sm); }
.rboard__bar { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.rboard__bar > span { display: block; height: 100%; background: var(--primary); }
.rboard__srcval { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rboard__note { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); background: var(--warn-wash); color: var(--warn-ink); border-radius: var(--radius); font-size: var(--fs-sm); }
.rboard__meta { margin: var(--s3) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 768px) {
  .rboard { padding: var(--s4); }
  .rboard__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .rboard__big { font-size: 32px; }
  /* 이름·금액을 한 줄에, 막대는 그 아래. 행과 행 사이는 행 안보다 넓게 띄워 금액이 다음 행 것으로 읽히지 않게 한다. */
  .rboard__srcrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: 6px var(--s3); padding: 0 0 var(--s3); }
  .rboard__srcname { grid-area: name; }
  .rboard__srcval { grid-area: val; text-align: right; }
  .rboard__bar { grid-area: bar; }
}
.rboard__hint { font-size: 12px; color: var(--mute); font-weight: 400; margin-left: 4px; }
.rboard__up, .rboard__down, .rboard__flat { white-space: nowrap; }