@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   MTS 디자인 토큰 — 브랜드 패키지의 뿌리. 여기 없는 값은 화면에 쓰지 않는다.
   문서: docs/디자인시스템.md

   ★ 이 파일이 있는 이유 (리바이벌에서 얻은 교훈)
     리바이벌은 브랜드 패키지와 공용 부품을 정하지 않고 개발해서, 페이지·모듈마다
     색·간격·버튼이 따로 놀았다. 고칠 때 25곳을 찾아다녀야 하고, 어느 게 정답인지
     아무도 모르게 된다. mts는 그 반대로 간다 —
     **색·간격·글자크기는 전부 여기 변수로만 있고, 화면은 변수를 부른다.**

   ⚠ 규칙 (CLAUDE.md에도 있음)
     1. 템플릿·CSS에 색 코드(#1d3557)·px 간격을 직접 쓰지 않는다. var(--…)를 쓴다.
     2. 새 값이 필요하면 여기에 토큰을 먼저 추가하고, 왜 필요한지 한 줄 남긴다.
     3. 토큰 이름은 "쓰임"으로 짓는다(--brand, --danger). "무슨 색"이 아니라.
        (색 이름으로 지으면 나중에 색을 바꿀 때 이름이 거짓말이 된다)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ 1. 원색 단계 (팔레트) — 2026-10-18 · 사장님 「브랜드 패키지 색상파렛트 틀부터 만들어」 ═══
     ★ 왜: 종전엔 색이 낱개(네이비 3 · 금 2 · 회색 9개가 제각각 이름)라, 「조금 연한 네이비」가 필요한 화면이
       **손으로 색을 지어냈다** — 포털 화면에 #f8fffe·#b7d9c6·#2470b3 같은 브랜드 밖 색이 생긴 까닭이다.
     ⇒ 원색은 셋뿐이다: **네이비(로고 왼쪽 끝) · 금(로고 오른쪽 끝) · 회색**. 각각 50(가장 옅음)~900(가장 짙음).
     ⚠ 화면은 원색 단계를 **직접 부르지 않는다** — 아래 2·3의 「쓰임」 이름(--brand · --ink · --ok …)을 부른다.
       원색 단계를 부르는 것은 이 파일과 components.css 뿐이다(쓰임에 없는 새 자리가 생기면 쓰임 토큰부터 만든다).
     ⚠ 대비: 글자로 쓰는 단계 = 네이비 600 이상 · 금 700 이상 · 회색 500 이상(흰 바탕 4.5:1) — core/test_palette.py 가 잰다. */
  --navy-50:  #f3f6fb;
  --navy-100: #e4eaf4;
  --navy-200: #cdd8ea;
  --navy-300: #a8b9d6;
  --navy-400: #7b93bd;
  --navy-500: #52699c;
  --navy-600: #3a5182;
  --navy-700: #2a3e6e;
  --navy-800: #1d2e5a;             /* ★ 확정 로고 심볼 왼쪽 끝 = 브랜드 색 */
  --navy-900: #14203f;

  --gold-50:  #fcf9eb;
  --gold-100: #f7f0cd;
  --gold-200: #efe6a4;             /* 로고 가운데 원 */
  --gold-300: #e4d576;
  --gold-400: #d8c450;
  --gold-500: #ccb22f;             /* ★ 확정 로고 심볼 오른쪽 끝 = 강조 한 방울 */
  --gold-600: #a99220;
  --gold-700: #7d6c17;             /* 금색 **글자**는 여기부터(흰 바탕에서 읽힌다) */
  --gold-800: #5b4e10;

  --gray-0:   #ffffff;
  --gray-50:  #f5f6f8;
  --gray-100: #eef0f3;
  --gray-200: #e3e6ea;
  --gray-300: #cbd5e1;
  --gray-400: #8a94a3;
  --gray-500: #667085;
  --gray-600: #556070;
  --gray-700: #475569;
  --gray-900: #222222;

  /* 옛 이름 — 단계를 가리키게만 둔다(새로 쓰지 않는다 · 쓰인 곳이 사라지면 지운다) */
  --navy: var(--navy-800);
  --gold: var(--gold-500);
  --gold-soft: var(--gold-200);
  /* ⚠ 옛 포털 그린 — 확정 로고에 없는 색(2026-08-10 화면에서 걷어냈다). legacy.css 이름만 남았다 · **새로 쓰지 말 것.**
     「초록이어야 해」 싶으면 그건 상태색이다 → --ok. */
  --green-700: #1a7a42;
  --green: #1d6f42;

  /* ═══ 2. 브랜드 쓰임 ═══
     ★ 사무실·포털 같은 네이비(2026-08-10) — 구분은 색이 아니라 형태로(아래 [data-surface="portal"]).
     ⚠ 사무소별 대표색(core/branding.py · Office.brand_color)은 --brand 하나만 덮는다 — 그래서 화면은 --brand 를 부른다. */
  --brand: var(--navy-800);
  --brand-ink: var(--gray-0);      /* 브랜드 색 위에 얹는 글자 */
  --brand-soft: var(--navy-200);   /* 브랜드의 옅은 면·테두리 */
  --brand-tint: var(--navy-50);    /* 브랜드 기운이 도는 바탕(고른 줄·안내 상자) */
  --brand-accent: var(--gold-500); /* 강조 한 방울 — 선·점 · ⛔ 글자색으로 쓰지 않는다(흰 바탕 대비 부족) */
  --brand-accent-ink: var(--gold-700);   /* 금색 글자가 꼭 필요할 때 */
  /* 로고 심볼과 같은 기울기 — 표지·배너 등 넓은 면에만. 글자 배경으로 쓰지 말 것 */
  --brand-gradient: linear-gradient(90deg, var(--navy-800), var(--gold-500));

  /* ═══ 3. 의미색 (상태) — 항상 「글자 + 바탕」 한 쌍(배지·알림·표 칸이 같은 쌍을 쓴다) ═══
     ⚠ 상태색은 원색 팔레트 밖이다 — 초록·노랑·빨강은 **뜻**이라 브랜드와 겹치면 안 된다(빨강 = 늘 위험). */
  --ok: #1a7a42;            --ok-bg: #d9f2e3;
  --warn: #8f6300;          --warn-bg: #fdf1d8;   /* 2026-10-18 #9a6b00 → 한 단계 짙게: 노란 바탕 위 4.19:1 이라 작은 글자가 안 읽혔다(test_palette 가 잡음) */
  --danger: #c0392b;        --danger-bg: #fdecea;
  --info: #0b5394;          --info-bg: #d7ecff;
  --accent: #4b3f8f;        --accent-bg: #e5e0f7;   /* 보관·완료 등 "끝난 것" */
  --neutral: var(--gray-600); --neutral-bg: var(--gray-100);

  /* ═══ 4. 상품 층 색 — 무료 · 유료 · 기장 (2026-10-18 · 사장님 「구분이 되야된다니까」) ═══
     ★ 브랜드 안에서 가른다: **기장 = 네이비**(사무소가 매달 맡는 몸통) · **유료 = 금**(한 단계 위 · 세무사 손) ·
       **무료 = 회색**(누구나 · 코드만). 잣대 = docs/상품설계-무료-유료-기장전용_2026-10-11.md 2026-10-18 정정.
     ⚠ 층 표시는 배지·띠 같은 **작은 표식**에만 — 화면 전체를 층 색으로 칠하지 않는다(상태색과 섞이면 뜻이 흐려진다). */
  --tier-free: var(--gray-700);     --tier-free-bg: var(--gray-100);
  --tier-paid: var(--gold-800);     --tier-paid-bg: var(--gold-100);
  --tier-book: var(--navy-800);     --tier-book-bg: var(--navy-100);

  /* 그래프·게이지용 단색 (A/B/C 비율 바 등) */
  --chart-ok: #2f9e5f;
  --chart-warn: #f0a733;
  --chart-danger: #d9534f;

  /* ═══ 5. 중립 쓰임 (글자·선·바탕) — 회색 단계를 가리킨다 ═══
     3단계 이상 쓰지 않는다. 회색이 5종류가 되는 순간 화면이 흐려진다. */
  --ink: var(--gray-900);         /* 본문 */
  --ink-2: var(--gray-700);       /* 표 머리·보조 제목 */
  --muted: var(--gray-500);       /* 설명문 */
  --muted-2: var(--gray-400);     /* 힌트·타임스탬프 (⚠ 작은 글자 본문엔 --muted) */

  --line: var(--gray-200);        /* 카드 테두리 */
  --line-2: var(--gray-100);      /* 표 안쪽 줄 */
  --line-3: var(--gray-300);      /* 입력칸 테두리 */

  --surface: var(--gray-0);       /* 카드 바탕 */
  --surface-2: var(--gray-100);   /* 표 머리·연한 강조 */
  --canvas: var(--gray-50);       /* 화면 바탕 (사무실) */
  --canvas-portal: var(--gray-100); /* 화면 바탕 (포털) */
  /* ═══ 6. 종이 (인쇄 · A4) — 2026-10-18 · 사장님 「인쇄는?」 ═══
     ★ 종이는 화면과 다른 매체다 — **흑백 레이저**로 뽑혀 관청·공단·거래처에 간다. 그래서 브랜드 색이 아니라
       **잉크의 짙기**로 가른다: 본문 검정 · 공식 서식 굵은 선 검정 · 보조 표 선 회색 · 머리칸 옅은 회색.
     ★ 종전엔 양식함(§11)·수임문서·청구견적서가 **제각각** #111·#000·#333·#555·#999·#f2f2f2·#f2f4f7·#f7f7f7 을 썼다
       ⇒ 같은 「머리칸」이 문서마다 다른 회색으로 뽑혔다. 이제 아래 이름만 쓴다(core/test_palette.py 가 대비를 잰다).
     ⚠ 채울 자리 표시(.sheet-var)만 브랜드 색을 쓴다 — 흑백에서도 보이게 밑줄을 함께 단다(§12).
     ⚠ 크기(pt·mm)는 토큰으로 묶지 않는다 — 공식 서식은 쪽마다 A4 한 장에 맞춘 치수라 바꾸면 잘린다(engagement_documents §pg0 기록). */
  --paper: var(--gray-0);           /* 종이 바탕 */
  --paper-ink: #111111;             /* 본문 글자 */
  --paper-ink-2: #333333;           /* 표 안 글자 · 보조 */
  --paper-muted: #555555;           /* 부제·안내 한 줄 (흑백에서 읽히는 가장 옅은 글자) */
  --paper-rule: #000000;            /* 공식 서식의 굵은 선(계약서·위임장 · 관청 양식 그대로) */
  --paper-line: #8c8c8c;            /* 보조 표 선 · 밑줄 칸 — 종전 #999 는 흰 종이 2.85:1 이라 흑백 레이저에서 날아갔다(test_palette 3:1) */
  --paper-faint: #bbbbbb;           /* 도장 자리 점선 · 「여기 찍으세요」 (글자로 읽히지 않아도 되는 것만) */
  --paper-head: #f2f2f2;            /* 표 머리칸 · 강조 칸 바탕 — 흑백 인쇄에서 옅은 회색으로 남는 값 */
  --paper-box: #fafafa;             /* 안내 상자 바탕 */
  --paper-font: 'Batang', '바탕', serif;          /* 관청에 내는 문서 본문(양식함 · 의사록) */
  --paper-font-sans: 'Malgun Gothic', '맑은 고딕', sans-serif;   /* 원본 서식이 고딕인 것(공단 위임장 · 계약서 · 청구서) */
  --paper-shadow: 0 4px 14px rgba(0, 0, 0, .10);  /* 화면에서만 — 인쇄 땐 없다 */
  --viewer-bg: #525659;             /* 인쇄 미리보기 바탕(PDF 뷰어와 같은 짙은 회색 — 흰 종이가 떠 보이게) */
  /* ── 간격 — 4px 배수 한 종류만 ─────────────────────────
     "여기만 13px" 같은 예외를 만들지 않는다. 그게 쌓이면 정렬이 무너진다. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;

  /* ── 모서리 ────────────────────────────────────────── */
  --r-sm: 5px;              /* 작은 버튼·배지 */
  --r: 8px;                 /* 카드·버튼 (사무실) */
  --r-lg: 14px;             /* 카드 (포털 — 모바일에서 더 둥글게) */
  --r-pill: 999px;

  /* ── 글자 ──────────────────────────────────────────── */
  --font: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', system-ui, sans-serif;   /* 견적마켓과 같은 글꼴 · 파일은 화면 머리의 CDN 링크 */
  --fs-xs: 11.5px;          /* 배지·플래그 */
  --fs-sm: 12.5px;          /* 조밀한 표 */
  --fs-md: 13.5px;          /* 본문 */
  --fs-lg: 15px;            /* 포털 버튼·강조 */
  --fs-h2: 17px;
  --fs-h1: 20px;
  --lh: 1.55;

  /* ── 그림자 ────────────────────────────────────────── */
  --shadow-card: 0 4px 14px rgba(0, 0, 0, .07);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .14);

  /* ── 레이아웃 ──────────────────────────────────────── */
  --page-w: 960px;          /* 사무실 기본 */
  --page-w-wide: 1220px;    /* 표가 넓은 화면(업무관리·통장대사) */
  --page-w-portal: 560px;   /* ★ 포털은 폰 한 손 — 원칙 2 "모바일 우선" */
  --tap: 44px;              /* 엄지 터치 타깃 최소 높이 */

  /* ── 남의 화면 흉내(.mock · components.css §35) — 「받는 사람이 실제로 보는 모양」 미리보기 전용 (2026-10-21) ──
     사장님 「실제 쏠라피도 그 디자인 색상 그대로 보여 주잖아」 ⇒ 카톡·문자·메일 앱의 색 그대로. ⛔ 우리 화면의 다른 곳에 쓰지 않는다(브랜드 색이 아니다). */
  --mock-phone: #1c1c1e;        /* 휴대폰 테두리 */
  --mock-kakao: #fee500;        /* 카톡 노랑(내 말풍선 · 알림톡 머리) */
  --mock-kakao-ink: #191919;    /* 카톡 노랑 위 글자 */
  --mock-kakao-chat: #b2c7da;   /* 카톡 대화방 바탕 */
  --mock-sms-bubble: #e9e9eb;   /* 문자 받은 말풍선 */
  --mock-mail: #03c75a;         /* 웹메일 머리 띠(네이버 메일 색) */
}

/* ── 고객 포털 ────────────────────────────────────────────
   ★ 2026-08-10 결정: **포털도 같은 브랜드 색(네이비)을 쓴다.**
     예전엔 그린이었는데, 그 그린은 **확정 로고 어디에도 없는 색**이었다.
     브랜드에 없는 색이 화면 하나에만 있는 것 — 그게 "페이지마다 따로 논다"의 시작이다.

   그럼 직원이 「지금 고객 화면」임을 어떻게 아나 → **색이 아니라 형태로 구분한다.**
     · 폭 560px 한 손 레이아웃 · 크게 둥근 카드 · 엄지 버튼 · **상단 골드 라인**
   그래서 여기서 바꾸는 건 바탕·모서리·액센트뿐이고, 브랜드 색은 사무실과 같다. */
[data-surface="portal"] {
  --canvas: var(--canvas-portal);
  --r: var(--r-lg);
  --brand-soft: var(--navy-200);
}

/* ── 사무실 셸 — 좌측 접이 메뉴 + 상단 탭 (2026-10-02 · 리바이벌과 같은 틀) ─────────
   ★ 2판(「세무사의 책상」 아날로그)을 시도했다가 **사장님 결정으로 원래(네이비) 디자인으로 되돌렸다**(2026-10-02).
     셸(메뉴·탭)은 색과 별개로 요청된 틀이라 남기고, 리바이벌처럼 **진한 남색 메뉴**로 입혔다.
     기록 = docs/디자인시스템.md §0. */
:root {
  --side-w: 232px;          /* 좌측 메뉴(펼침) — 리바이벌 셸과 같은 값 */
  --side-w-min: 56px;       /* 좌측 메뉴(접힘 = 레일) */
  --appbar-h: 52px;
  --tab-h: 36px;
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, .22);
  --appbar-bg: var(--navy);           /* 메뉴·탭 띠 바탕 */
  --appbar-ink: var(--gray-0);        /* 그 위 글자 */
  --appbar-soft: var(--navy-200);     /* 그 위 보조 글자 */
  --appbar-line: var(--navy-900);
  --label-paper: rgba(255, 255, 255, .08);   /* 메뉴·탭 위 옅은 면 */
  --paper: var(--surface);            /* 지금 화면(탭·메뉴)의 밝은 면 */
  --seal: var(--gold);                /* 지금 화면 표시선 */
  --thread-light: rgba(255, 255, 255, .14);
  /* 로고 색 — 바탕마다 여기서 바꾼다(글자는 놓인 자리 글자색을 따른다 · brand_logo 태그).
     ⚠ 기본 = 확정 로고 그대로(네이비→금). 진한 바탕에서 심볼 왼쪽이 묻히면 그 바탕에서 --logo-start 를 밝게. */
  --logo-start: var(--navy);
  --logo-end: var(--gold);
  --logo-dot-a: var(--gold-soft);
  --logo-dot-b: #cbb84f;              /* 확정 로고 파일의 점 색 그대로(로고 자산 — 팔레트 밖 예외) */
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}

/* 진한 남색 메뉴 위 = **단색 로고**(사장님 2026-10-02 「로고 색상이 어울리지 않아 · 단색으로」).
   네이비→금 그라데이션은 흰 바탕용이다 — 진한 바탕에선 왼쪽이 묻히고 금만 떠 보였다. 놓인 자리 글자색(흰색) 하나로. */
.sidebar, .mobile-bar { --logo-start: currentColor; --logo-end: currentColor; --logo-dot-a: currentColor; --logo-dot-b: currentColor; }