:root {
      color-scheme: light;

      /* ---- 중립 표면 · 텍스트 램프 (하나의 차가운 회색 계열로 통일) ---- */
      --bg: #F1F3F6;
      --surface: #FFFFFF;
      --surface-alt: #F7F8FA;
      --surface-sunken: #EDEFF3;
      --border: #E5E8ED;
      --border-strong: #D0D5DE;
      --text: #14171E;
      --text-secondary: #565D6B;
      --text-muted: #868C98;

      /* ---- 브랜드 (주황) ---- */
      --brand: #EA5B33;
      --brand-dark: #C2410C;
      --brand-darker: #9A3412;
      --brand-light: #FDF2ED;
      --brand-border: #F5CDB9;
      --brand-rgb: 234, 91, 51;

      /* ---- 시맨틱 ---- */
      --slate: #64748B;
      --teal: #0D9488;
      --amber: #B45309;
      --danger: #DC2626;
      --danger-light: #FEF2F2;
      --danger-border: #F6CFCF;
      --warning: #B45309;
      --warning-light: #FEF6E7;
      --warning-border: #F3DFB8;
      --success: #15803D;
      --success-light: #F1F8F2;
      --success-border: #CBE5CE;

      /* ---- 차트 계열색: CVD 검증(OKLab ΔE)을 통과한 고정 순서 팔레트에서 가져온 값 ---- */
      --chart-sales: #EB6834;
      --chart-purchase: #2A78D6;

      /* ---- 헤더 · 푸터 ---- */
      --header-orange: #F8511D;
      --header-orange-deep: #E84410;
      --header-beige: #F7E0B4;
      --footer-bg: #1B1E24;

      /* ---- 표 헤더: 밝은 회색 배경 + 진한 글씨 + 강한 하단 구분선 ---- */
      --table-header: #E4E8EF;
      --table-header-text: #2A2F3A;
      --table-header-line: #BEC5D1;

      /* ---- 페이지 가로 폭 ----
         헤더 안쪽, 안내 띠, 본문 카드, 푸터가 모두 같은 좌우 경계에 맞도록 한 곳에서 정한다.
         띠·카드류는 --page-width를 그대로 쓰고, 좌우 안쪽 여백이 있는 헤더 계열은
         --page-width에 그 여백만큼을 더해 콘텐츠 경계가 카드 경계와 일치하게 한다. */
      --page-width: 1500px;
      --page-gutter: 20px;

      --radius-lg: 16px;
      --radius-md: 10px;
      --radius-sm: 8px;
      --radius-xs: 6px;

      /* ---- 그림자: 두 겹으로 쌓아 은은한 깊이를 만든다 (단일 그림자보다 자연스럽다) ---- */
      --shadow-xs: 0 1px 2px rgba(18, 21, 28, 0.05);
      --shadow-sm: 0 1px 2px rgba(18, 21, 28, 0.05), 0 2px 6px rgba(18, 21, 28, 0.04);
      --shadow-md: 0 2px 4px rgba(18, 21, 28, 0.04), 0 8px 20px rgba(18, 21, 28, 0.07);
      --shadow-lg: 0 8px 16px rgba(18, 21, 28, 0.08), 0 28px 56px rgba(18, 21, 28, 0.16);
      --focus-ring: 0 0 0 3px rgba(var(--brand-rgb), 0.22);

      /* ---- 본문 폰트: 한글 가독성이 좋은 순서로 폴백을 구성한다 ---- */
      --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
        'Segoe UI Variable Text', 'Segoe UI', system-ui, 'Apple SD Gothic Neo',
        'Malgun Gothic', 'Noto Sans KR', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    @font-face {
      font-family: 'Paperlogy';
      src: url('../fonts/Paperlogy-6SemiBold.woff2') format('woff2');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Paperlogy';
      src: url('../fonts/Paperlogy-7Bold.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    /* 얇고 중립적인 스크롤바: 표·모달 등 내부 스크롤 영역이 많아 기본 스크롤바가 시각적으로 튄다 */
    * { scrollbar-width: thin; scrollbar-color: #C6CBD4 transparent; }
    ::-webkit-scrollbar { width: 11px; height: 11px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: #C6CBD4; border-radius: 999px;
      border: 3px solid transparent; background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: #AAB1BD; background-clip: content-box; }
    ::-webkit-scrollbar-corner { background: transparent; }

    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-anchor: none;
      padding: 28px 20px;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      /* 한글은 어절 단위로 줄바꿈해야 자연스럽다. 긴 영문·URL만 예외적으로 강제 줄바꿈 */
      word-break: keep-all;
      overflow-wrap: break-word;
    }

    ::selection { background: rgba(var(--brand-rgb), 0.18); }

    /* 키보드 이동 시에만 포커스 링을 보여 마우스 사용 시의 잔상을 없앤다 */
    :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

    /* ---------- 상단 헤더 (로고 + 사이트 제목 + 가로 메뉴) ---------- */
    .site-header {
      background: linear-gradient(180deg, var(--header-orange) 0%, var(--header-orange-deep) 100%);
      width: 100%;
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    }

    .site-header-inner {
      max-width: calc(var(--page-width) + var(--page-gutter) * 2);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 24px;
      padding: 14px var(--page-gutter) 5px;
    }

    .site-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .site-title {
      font-family: 'Paperlogy', var(--font-sans);
      font-size: 28.5px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #FFFFFF;
      white-space: nowrap;
      text-shadow: 0 1px 1px rgba(120, 30, 0, 0.16);
    }


    .nav-toggle {
      display: none;
      flex: none;
      width: 32px;
      min-width: 0;
      height: 32px;
      padding: 0;
      border: none;
      border-radius: var(--radius-xs);
      background: none;
      box-shadow: none;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .nav-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      background: #FFFFFF;
      border-radius: 1px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-toggle:hover { background: rgba(255, 255, 255, 0.14); transform: none; box-shadow: none; }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      margin-right: 16px;
    }

    .site-auth {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    button.site-auth-btn {
      flex: none;
      width: auto;
      min-width: 0;
      padding: 8px 15px;
      font-size: 12.5px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.14);
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.42);
      box-shadow: none;
    }
    button.site-auth-btn:hover {
      background: rgba(255, 255, 255, 0.24);
      border-color: rgba(255, 255, 255, 0.6);
      color: #FFFFFF;
      transform: none;
      box-shadow: none;
    }
    button.site-auth-btn-primary {
      background: #FFFFFF;
      color: var(--brand-dark);
      border-color: #FFFFFF;
      box-shadow: 0 1px 2px rgba(120, 30, 0, 0.18);
    }
    button.site-auth-btn-primary:hover {
      background: #FFFFFF;
      border-color: #FFFFFF;
      color: var(--brand-darker);
      box-shadow: 0 2px 8px rgba(120, 30, 0, 0.24);
    }

    .nav-item { position: relative; }

    button.nav-tab {
      display: block;
      flex: none;
      width: auto;
      min-width: 0;
      background: none;
      border: none;
      border-radius: var(--radius-sm);
      padding: 9px 14px;
      margin: 0;
      font-size: 13.5px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.88);
      box-shadow: none;
      cursor: pointer;
      text-align: center;
      white-space: nowrap;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    button.nav-tab:hover {
      background: rgba(255, 255, 255, 0.16);
      color: #FFFFFF;
      transform: none;
      box-shadow: none;
    }

    button.nav-tab.active {
      background: #FFFFFF;
      color: var(--brand-dark);
      font-weight: 700;
      box-shadow: 0 1px 3px rgba(120, 30, 0, 0.2);
    }

    button.nav-tab:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

    button.nav-tab.nav-parent {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .nav-arrow {
      font-size: 10px;
      color: inherit;
      opacity: 0.75;
      transition: transform 0.2s ease;
    }

    button.nav-tab.nav-parent.expanded .nav-arrow { transform: rotate(180deg); }

    /* 하위 메뉴: 떠 있는 드롭다운 카드 대신, 선택된 상위 탭 바로 아래에 작은 버튼으로 바로 펼쳐지는 형태.
       이 줄의 공간은 항상 확보해 두어(=상시 존재) 열고 닫을 때 레이아웃이 흔들리지 않는다. */
    .nav-submenu { display: none; }

    .nav-submenu.expanded {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .nav-submenu-bar {
      max-width: calc(var(--page-width) + var(--page-gutter) * 2);
      margin: 0 auto;
      width: 100%;
      height: 27px;
      display: flex;
      align-items: center;
      /* 위쪽 주 메뉴와 같은 좌우 여백을 줘야 하위 탭이 주 메뉴 아래로 정렬된다 */
      padding: 0 var(--page-gutter) 7px;
    }

    button.nav-tab.nav-sub {
      padding: 2px 14px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.01em;
      border-radius: 999px;
      min-width: max-content;
      color: rgba(255, 255, 255, 0.82);
    }

    button.nav-tab.nav-sub:hover { background: rgba(255, 255, 255, 0.2); }

    button.nav-tab.nav-sub.active {
      background: rgba(255, 255, 255, 0.95);
      color: var(--brand-dark);
      font-weight: 700;
      box-shadow: none;
    }

    .app-layout {
      max-width: var(--page-width);
      margin: 0 auto;
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }

    .form-note {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 10px;
      line-height: 1.6;
    }

    button.goto-btn {
      display: inline-block;
      flex: none;
      width: auto;
      min-width: 0;
      margin-top: 12px;
      padding: 9px 16px;
      font-size: 12.5px;
    }

    /* ---- 금액 입력창: 숫자가 세로로 정렬되도록 고정폭 숫자(tabular-nums)를 쓴다 ---- */
    input.etc-amount,
    input.etc-tax,
    input.genp-amount, input.genp-tax, input.card-amount, input.card-tax,
    input.pv-amount, input.pv-tax,
    input.credit-input {
      width: 100%;
      text-align: right;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-xs);
      background: var(--surface);
      padding: 6px 8px;
      font-size: 12.5px;
      font-family: inherit;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    input.etc-amount:focus, input.etc-tax:focus,
    input.genp-amount:focus, input.genp-tax:focus,
    input.card-amount:focus, input.card-tax:focus,
    input.pv-amount:focus, input.pv-tax:focus,
    input.credit-input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: var(--focus-ring);
    }

    /* 천 단위 쉼표를 넣어 보여주는 금액 입력창은 type="number"를 쓸 수 없어 type="text"로 둔다.
       숫자만 받도록 inputmode="numeric"을 함께 지정하고, 서식은 JS에서 입힌다 */
    input.credit-input { max-width: 180px; margin-left: auto; display: block; }

    /* 숫자 입력창의 증감 화살표는 금액 입력에서 오조작을 유발하고 정렬도 흐트러뜨려 감춘다 */
    input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .vat-report-total, .total-box {
      background: var(--brand-light);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-md);
      padding: 16px 18px;
      margin-top: 14px;
      text-align: right;
    }
    .vat-report-total p:first-child, .total-box p:first-child {
      color: var(--brand-dark); font-size: 12.5px; font-weight: 600;
      letter-spacing: 0.01em; margin: 0 0 6px 0;
    }
    .vat-report-total p:last-child, .total-box p:last-child {
      font-size: 22px; font-weight: 700; color: var(--brand-darker);
      letter-spacing: -0.015em; margin: 0;
    }

    .vat-report-note {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 10px;
      line-height: 1.6;
    }

    .modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(17, 19, 25, 0.46);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 1000;
      animation: modal-fade 0.16s ease-out;
    }

    .modal-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 26px;
      max-width: 420px;
      width: 100%;
      box-shadow: var(--shadow-lg);
      animation: modal-rise 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
    }

    @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes modal-rise {
      from { opacity: 0; transform: translateY(8px) scale(0.985); }
      to { opacity: 1; transform: none; }
    }

    .modal-box p {
      font-size: 14px;
      color: var(--text);
      line-height: 1.7;
      margin-bottom: 18px;
    }

    .modal-actions { display: flex; gap: 10px; }
    .modal-actions button { flex: 1; min-width: 0; }

    .app-footer {
      max-width: var(--page-width);
      margin: 22px auto 0;
      padding: 20px 24px;
      text-align: left;
      background: var(--footer-bg);
      border-radius: var(--radius-md);
    }
    .footer-links {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      margin-bottom: 10px;
    }
    .footer-links button {
      flex: none;
      min-width: 0;
      width: auto;
      background: none;
      border: none;
      box-shadow: none;
      padding: 0;
      color: rgba(255, 255, 255, 0.86);
      font-size: 12.5px;
      font-weight: 500;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.28);
      cursor: pointer;
      transition: color 0.15s ease, border-color 0.15s ease;
    }
    .footer-links button:hover {
      background: none; color: #FFFFFF;
      border-bottom-color: rgba(255, 255, 255, 0.8);
      transform: none; box-shadow: none;
    }
    .footer-links button:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; }
    .footer-divider { color: rgba(255, 255, 255, 0.3); font-size: 12px; }
    .footer-copy { color: rgba(255, 255, 255, 0.62); font-size: 11.5px; line-height: 1.7; }

    .policy-modal .modal-box {
      max-width: 640px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
    }
    .policy-modal .modal-box h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }
    .policy-modal .policy-content {
      overflow-y: auto;
      padding-right: 8px;
      margin-bottom: 16px;
    }
    .policy-modal .policy-content h4 {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--text);
      margin: 18px 0 6px;
    }
    .policy-modal .policy-content h4:first-child { margin-top: 0; }
    .policy-modal .policy-content p,
    .policy-modal .policy-content li {
      font-size: 12.5px;
      color: var(--text-secondary);
      line-height: 1.8;
    }
    .policy-modal .policy-content ul { padding-left: 20px; margin-bottom: 8px; }
    .policy-modal .modal-actions {
      border-top: 1px solid var(--border);
      padding-top: 16px;
    }
    .policy-modal .modal-actions button { flex: none; margin-left: auto; padding: 9px 22px; }

    /* ---- 대시보드 세로 막대그래프 (vchart) ---- */
    .vchart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-bottom: 14px;
    }
    .vchart-legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
    }
    .vchart-legend-swatch {
      width: 11px;
      height: 11px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .vchart-scroll {
      overflow-x: auto;
      overflow-y: visible;
      padding-top: 60px;
      margin-top: -60px;
      padding-bottom: 2px;
    }
    .vchart-plot {
      display: flex;
      align-items: flex-end;
      gap: 20px;
      height: 200px;
      min-width: fit-content;
      padding: 34px 10px 0;
      border-bottom: 1px solid var(--border-strong);
    }
    .vchart-col-group {
      flex: 1 0 78px;
      min-width: 78px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }
    .vchart-bars {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 5px;
      width: 100%;
      height: 100%;
    }
    .vchart-bar-wrap {
      position: relative;
      width: 32px;
      max-width: 32px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      cursor: default;
      outline: none;
    }
    .vchart-bar-value {
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      margin-bottom: 7px;
      white-space: nowrap;
    }
    .vchart-bar {
      width: 100%;
      min-height: 3px;
      border-radius: 4px 4px 0 0;
      transition: height 0.4s ease, filter 0.15s ease;
    }
    .vchart-bar-wrap:hover .vchart-bar,
    .vchart-bar-wrap:focus-visible .vchart-bar {
      filter: brightness(1.08) saturate(1.05);
    }
    /* 매출·매입 2계열 비교: CVD 검증을 통과한 주황↔파랑 조합 (회색 계열은 "데이터 없음"처럼 읽혀 사용하지 않는다) */
    .vchart-bar-primary,
    .vchart-bar-sales { background: var(--chart-sales); }
    .vchart-bar-negative { background: var(--amber); }
    .vchart-bar-purchase { background: var(--chart-purchase); }
    .vchart-tooltip {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translate(-50%, 0);
      margin-bottom: 9px;
      background: #14171E;
      color: #fff;
      font-size: 11px;
      line-height: 1.5;
      font-weight: 600;
      padding: 7px 11px;
      border-radius: var(--radius-xs);
      box-shadow: var(--shadow-md);
      white-space: nowrap;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
      z-index: 5;
    }
    .vchart-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #14171E;
    }
    .vchart-bar-wrap:hover .vchart-tooltip,
    .vchart-bar-wrap:focus-visible .vchart-tooltip {
      opacity: 1;
      transform: translate(-50%, -3px);
    }
    .vchart-x-label {
      margin-top: 10px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-secondary);
      text-align: center;
      white-space: nowrap;
      max-width: 100%;
    }
    .vchart-x-sub {
      margin-top: 3px;
      font-size: 10.5px;
      color: var(--text-muted);
      text-align: center;
      white-space: nowrap;
    }
    /* 원가율은 매출·매입 비교 그래프에서 가장 중요하게 봐야 하는 값이므로 강조 배지로 표시 */
    .vchart-x-sub-cost {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--brand-dark);
      background: var(--brand-light);
      border: 1px solid var(--brand-border);
      border-radius: 999px;
      padding: 3px 10px;
      text-align: center;
      white-space: nowrap;
    }

    /* ---- 매출·매입 총액 비교 표: 원가율 열 강조 ---- */
    .cost-ratio-header { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
    .cost-ratio-cell { background: var(--brand-light); }
    .cost-ratio-badge {
      display: inline-block;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--brand-dark);
      background: var(--surface);
      border: 1px solid var(--brand-border);
      border-radius: 999px;
      padding: 3px 12px;
    }
    .cost-ratio-diff-up { color: var(--danger); font-weight: 700; }
    .cost-ratio-diff-down { color: var(--success); font-weight: 700; }

    /* ---- 대시보드 원형(도넛) 그래프: 도착국가별 매출 비중 ---- */
    .dash-pie-periods {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .dash-pie-period-label {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    /* 조기환급신고로 한 버킷에 여러 달이 묶였을 때, 표로 보기에 월별로 나누어 표시하는 소제목 표 */
    .dash-subperiod-table + .dash-subperiod-table { margin-top: 14px; }
    .dash-subperiod-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--brand-dark);
      background: var(--brand-light);
      border: 1px solid var(--brand-border);
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      margin-bottom: 6px;
    }
    .dash-pie-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .dash-pie-svg-box {
      position: relative;
      width: 140px;
      height: 140px;
      flex-shrink: 0;
    }
    .dash-pie-svg { width: 100%; height: 100%; display: block; }
    .dash-pie-segment {
      cursor: default;
      outline: none;
      transition: filter 0.15s ease, opacity 0.15s ease;
    }
    .dash-pie-segment:hover,
    .dash-pie-segment:focus-visible {
      filter: brightness(1.1);
    }
    .dash-pie-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
      padding: 0 14px;
    }
    .dash-pie-center-label { font-size: 10px; color: var(--text-muted); font-weight: 600; }
    .dash-pie-center-value { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-top: 3px; line-height: 1.3; }
    .dash-pie-legend {
      flex: 1;
      min-width: 130px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .dash-pie-legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 11.5px;
    }
    .dash-pie-legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .dash-pie-legend-label {
      flex: 1;
      color: var(--text-secondary);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dash-pie-legend-pct { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }

    @media (max-width: 720px) {
      .dash-pie-periods { grid-template-columns: 1fr; }
    }

    .dashboard-example-wrap {
      opacity: 0.92;
    }
    .dashboard-example-card {
      position: relative;
      border: 1px dashed var(--brand-border);
      background: var(--brand-light);
    }
    .dashboard-example-badge {
      position: absolute;
      top: 14px;
      right: 16px;
      background: var(--brand-dark);
      color: white;
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 999px;
      letter-spacing: 0.02em;
    }
    .dashboard-example-badge-static { position: static; display: inline-block; }
    .dashboard-example-stats-badge-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }

    /* 아직 확정 데이터가 없을 때 안내하는 카드: 대시보드 핵심 지표 타일과 동일한 브랜드 강조 배경/테두리를 재사용한다.
       .section-card와 클래스 조합 선택자로 묶어 뒤에 나오는 .section-card 규칙에 덮어써지지 않도록 한다 */
    .section-card.dashboard-empty-card {
      background: var(--brand-light);
      border: 1px solid var(--brand-border);
    }
    .section-card.dashboard-empty-card h3 { color: var(--brand-darker); }

    /* ---- 대시보드 레이아웃: 요약 타일 · 2단 그리드 · 접이식 표 ---- */
    .dash-stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }
    /* 매출세액·매입세액·납부세액·상품매입원가율은 이 페이지의 핵심 지표이지만, 아래 그래프 카드(.section-card)와
       배경/테두리 톤을 통일해 페이지 전체의 시각적 일관성을 우선한다. 텍스트도 브랜드 주황이 아닌 기본 텍스트색을 사용한다 */
    .dash-stat-tile {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 15px 16px;
    }

    .dash-stat-label { font-size: 11.5px; color: var(--text-secondary); font-weight: 600; letter-spacing: 0.01em; margin-bottom: 8px; }
    .dash-stat-value { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-bottom: 6px; }
    .dash-stat-value-badge {
      display: inline-block; color: var(--text); background: var(--surface);
      border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 14px;
    }
    .dash-stat-extra { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 3px; }
    .dash-stat-prev-inline { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-left: 5px; }
    .dash-stat-delta { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; font-weight: 600; }
    .dash-stat-delta.up { color: var(--success); }
    .dash-stat-delta.down { color: var(--danger); }
    .dash-stat-delta.flat { color: var(--text-muted); font-weight: 500; }
    .dash-stat-delta-sub { font-size: 10.5px; font-weight: 500; color: var(--text-muted); }

    .dash-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    .dash-grid-2col > .section-card { margin-bottom: 0; }

    .dash-table-toggle { margin-top: 14px; }
    .dash-table-toggle summary {
      cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary);
      padding: 6px 0; list-style: none; user-select: none;
      transition: color 0.15s ease;
    }
    .dash-table-toggle summary:hover { color: var(--brand-dark); }
    .dash-table-toggle summary::-webkit-details-marker { display: none; }
    .dash-table-toggle summary::before { content: '▸ '; }
    .dash-table-toggle[open] summary::before { content: '▾ '; }
    .dash-table-toggle .data-preview { margin-top: 10px; margin-bottom: 0; }

    /* ---- 신고 및 납부: 해당하는 사람만 펼쳐보는 첨부서류·기타 서식 작성법 안내 ---- */
    .ref-form-toggle {
      margin-top: 18px;
      border-top: 1px dashed var(--border-strong);
      padding-top: 14px;
    }
    .ref-form-toggle summary {
      cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text);
      list-style: none; user-select: none; padding: 2px 0;
      transition: color 0.15s ease;
    }
    .ref-form-toggle summary:hover { color: var(--brand-dark); }
    .ref-form-toggle summary::-webkit-details-marker { display: none; }
    .ref-form-toggle summary::before { content: '▸ '; color: var(--brand-dark); }
    .ref-form-toggle[open] summary::before { content: '▾ '; }
    .ref-form-toggle-body { margin-top: 12px; }
    .ref-form-toggle-body h4 { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
    .ref-form-toggle-body > * + h4 { margin-top: 16px; }

    @media (max-width: 900px) {
      .dash-stat-grid { grid-template-columns: repeat(2, 1fr); }
      .dash-grid-2col { grid-template-columns: 1fr; }
      /* 그리드 아이템의 기본 최소 너비(auto)는 내부 표·차트의 콘텐츠 크기를 기준으로 잡혀 카드가
         화면 폭보다 넓어지고 옆으로 잘려 보이는 원인이 된다. 0으로 낮춰 카드가 화면 폭에 맞게 줄어들게 하고,
         내부의 표/차트는 각자의 overflow:auto 영역에서만 가로 스크롤되도록 한다 */
      .dash-grid-2col > .section-card { min-width: 0; }

      /* 좁은 화면에서는 좌우 여백을 한 단계 줄인다. 이 값을 쓰는 곳(헤더 안쪽 여백 등)이
         함께 따라오도록 개별 규칙이 아니라 변수를 재정의한다 */
      :root { --page-gutter: 16px; }

      body { padding: 16px 12px; }
      .app-layout { flex-direction: column; align-items: stretch; gap: 14px; }
      .container { padding: 22px 18px; border-radius: var(--radius-md); }

      /* 좁은 화면에서는 가로 메뉴를 접이식 드롭다운(햄버거)으로 전환 */
      .site-header-inner { flex-wrap: wrap; padding: 12px var(--page-gutter); }
      .nav-toggle { display: flex; }

      .site-brand { min-width: 0; max-width: calc(100% - 44px); flex: 1 1 auto; }
      .site-title {
        display: block;
        min-width: 0;
        max-width: 100%;
        font-size: 21px;
        line-height: 1.25;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
      }

      .site-auth {
        order: 2;
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
        margin-top: 10px;
      }
      button.site-auth-btn { padding: 6px 12px; font-size: 11.5px; }

      .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        order: 3;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.24);
      }

      .site-nav.open { display: flex; }

      .nav-item { width: 100%; }
      button.nav-tab { width: 100%; text-align: center; }

      .nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        min-width: 0;
        margin-top: 2px;
        margin-left: 12px;
        padding: 4px;
        box-shadow: none;
        border: none;
        background: transparent;
      }

      .nav-submenu.expanded { display: block; }

      /* 데스크톱 전용 하위메뉴 바는 모바일에서 사용하지 않음 */
      .nav-submenu-bar { display: none !important; }
    }

    @media (max-width: 480px) {
      .dash-stat-grid { grid-template-columns: 1fr; }
    }

    /* 영세율 매출 관련 색상 (teal 계열) */
    button.btn-yeongsero {
      background: var(--teal);
      color: white;
      border: 1px solid var(--teal);
      box-shadow: var(--shadow-xs);
    }
    button.btn-yeongsero:hover {
      background: #0B7D73;
      border-color: #0B7D73;
      color: white;
      box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25);
    }

    /* 항목 구분용 행 색상: 강조가 필요 없는 "분류" 행은 동일한 중립 톤 + 좌측 컬러 스트라이프로만
       구분하고(과도한 원색 배경 지양), 사용자의 주의가 필요한 "차감/경고" 행만 색이 있는 배경으로 강조한다. */
    tr.row-yeongsero td { background: var(--surface-alt); }
    tr.row-yeongsero td:first-child { border-left: 3px solid var(--teal); }
    tr.row-yeongsero:hover td { background: var(--surface-sunken); }

    tr.row-general td { background: var(--surface-alt); }
    tr.row-general td:first-child { border-left: 3px solid var(--slate); }
    tr.row-general:hover td { background: var(--surface-sunken); }

    /* 그 밖의 매출/일반매입 탭 표: 구분/내용 열의 좌측 강조 테두리 미사용 */
    #etcSalesTable tr.row-general td:first-child,
    #ilbanMaeipTable tr.row-general td:first-child { border-left: none; }

    tr.row-card td { background: var(--surface-alt); }
    tr.row-card td:first-child { border-left: 3px solid var(--amber); }
    tr.row-card:hover td { background: var(--surface-sunken); }

    /* 신용카드 사용내역 탭 표: 구분/내용 열의 좌측 강조 테두리 미사용 */
    #cardUsageTable tr.row-card td:first-child { border-left: none; }

    /* 매입세액 불공제 관련 색상 (붉은 계열 - 차감 표시, 강조 필요) */
    tr.row-nondeduct td { background: var(--danger-light); color: var(--danger); }
    tr.row-nondeduct td:first-child { border-left: 3px solid var(--danger); }
    tr.row-nondeduct:hover td { background: #FCE7E7; }

    /* 가산세 관련 색상 (황색 계열 - 경고/추가 표시, 강조 필요) */
    tr.row-penalty td { background: var(--warning-light); color: var(--warning); }
    tr.row-penalty td:first-child { border-left: 3px solid var(--warning); }
    tr.row-penalty:hover td { background: #FBEBCF; }

    input.penalty-amount {
      width: 100%;
      text-align: right;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-xs);
      background: var(--surface);
      padding: 6px 8px;
      font-size: 12.5px;
      font-family: inherit;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    input.penalty-amount:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

    button.btn-card {
      background: var(--amber);
      color: white;
      border: 1px solid var(--amber);
      box-shadow: var(--shadow-xs);
    }
    button.btn-card:hover {
      background: #92400A;
      border-color: #92400A;
      color: white;
      box-shadow: 0 2px 8px rgba(146, 64, 10, 0.25);
    }

    .main-content { flex: 1; min-width: 0; }

    .tab-view { display: none; }
    .tab-view.active { display: block; }

    .placeholder-view {
      text-align: center;
      padding: 100px 20px;
      color: var(--text-muted);
    }
    .placeholder-view h2 { font-size: 17px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
    .placeholder-view p { font-size: 13px; line-height: 1.7; }

    .container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      max-width: var(--page-width);
      width: 100%;
      margin: 0 auto;
      padding: 34px 36px;
    }

    h1 { font-size: 23px; font-weight: 700; color: var(--text); margin-bottom: 6px; text-align: left; letter-spacing: -0.02em; }
    .subtitle { font-size: 13.5px; color: var(--text-secondary); text-align: left; line-height: 1.6; margin-bottom: 26px; }

    .section-card {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 18px 20px;
      margin-bottom: 16px;
    }

    .section-card h3 { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 5px; }
    .section-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }

    .tax-period-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

    /* 기본 select의 OS 화살표 대신 통일된 셰브론 아이콘을 쓴다 (배경 이미지는 data: URI라 외부 요청이 없다).
       과세기간 선택과 문의 폼의 select가 서로 다르게 보이지 않도록 한 규칙으로 함께 묶는다 */
    .tax-period-controls select,
    .vat-inc-helper-row select,
    select.inquiry-input {
      appearance: none; -webkit-appearance: none;
      background-color: var(--surface);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5L6 7.75 9.25 4.5' fill='none' stroke='%23565D6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 11px center;
      background-size: 12px 12px;
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .tax-period-controls select,
    .vat-inc-helper-row select {
      padding: 8px 32px 8px 12px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-family: inherit;
      font-weight: 500;
      min-width: 104px;
      box-shadow: var(--shadow-xs);
    }
    select.inquiry-input { padding-right: 32px; }
    .tax-period-controls select:hover,
    .vat-inc-helper-row select:hover,
    select.inquiry-input:hover { border-color: #BFC5D0; }
    .tax-period-controls select:focus-visible,
    .vat-inc-helper-row select:focus-visible {
      outline: none; border-color: var(--brand); box-shadow: var(--focus-ring);
    }

    .vat-inc-helper-row input[type="number"] {
      padding: 8px 12px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-family: inherit;
      background: var(--surface);
      color: var(--text);
      box-shadow: var(--shadow-xs);
    }
    .vat-inc-helper-row input[type="number"]:hover { border-color: #BFC5D0; }
    .vat-inc-helper-row input[type="number"]:focus-visible {
      outline: none; border-color: var(--brand); box-shadow: var(--focus-ring);
    }

    /* 세그먼티드 컨트롤: 가라앉은 트랙 위에 선택된 항목만 흰 알약으로 떠오르게 한다 */
    .half-toggle {
      display: flex; gap: 4px;
      background: var(--surface-sunken);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 3px;
    }
    .half-toggle label {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 13px; border-radius: var(--radius-xs);
      font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .half-toggle label:hover { color: var(--text); }
    .half-toggle input[type="radio"] { accent-color: var(--brand); }
    .half-toggle label:has(input:checked) {
      background: var(--surface);
      color: var(--brand-dark);
      font-weight: 600;
      box-shadow: var(--shadow-xs);
    }

    .status-note { font-size: 12px; color: var(--brand-dark); margin-top: 10px; font-weight: 500; }

    /* ---- 문의사항: 폼 필드 공용 스타일 ---- */
    .inquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
    .inquiry-field { display: flex; flex-direction: column; gap: 6px; }
    .inquiry-field-full { grid-column: 1 / -1; }
    .inquiry-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
    .inquiry-required { color: var(--danger); }
    .inquiry-hint { font-weight: 400; color: var(--text-muted); }
    .inquiry-input {
      width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
      padding: 8px 10px; font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--surface);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .inquiry-input::placeholder { color: var(--text-muted); }
    .inquiry-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
    .inquiry-textarea { resize: vertical; min-height: 110px; line-height: 1.7; }
    .inquiry-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .inquiry-file-row button { flex: none; width: auto; min-width: 0; }

    @media (max-width: 900px) {
      .inquiry-form { grid-template-columns: 1fr; }
    }

    /* 드롭존임이 한눈에 읽혀야 하므로 점선 테두리는 옅게 죽이지 않고 브랜드색을 반투명으로 쓴다 */
    .upload-section {
      background: var(--surface-alt); border: 1.5px dashed rgba(var(--brand-rgb), 0.55); border-radius: var(--radius-md);
      padding: 32px 24px; text-align: center; cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .upload-section:hover { background: var(--brand-light); border-color: var(--brand); box-shadow: var(--shadow-xs); }
    .upload-section.active { background: var(--brand-light); border-color: var(--brand); border-style: solid; }
    .upload-text h2 { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 8px; }
    .upload-text p { font-size: 12.5px; color: var(--text-secondary); margin: 0; }

    input[type="file"] { display: none; }

    .progress-section { margin-top: 18px; display: none; }
    .progress-section.active { display: block; }
    .progress-bar { width: 100%; height: 6px; background: var(--surface-sunken); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
    .progress-fill { height: 100%; background: var(--brand); width: 0%; transition: width 0.3s ease; border-radius: 999px; }
    .status-text { font-size: 12.5px; color: var(--text-secondary); text-align: center; }

    .row-count-text { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; }

    /* 좌측 안내 문구 + 우측 보조 버튼(예: 표 위의 "저장")을 한 줄에 배치할 때 쓰는 공용 레이아웃 */
    .section-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .section-header-row button { flex: none; width: auto; min-width: 0; }

    .data-preview {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
      overflow: auto; margin-bottom: 14px; max-height: 460px; max-width: 100%;
    }

    /* 표 안의 모든 숫자는 고정폭 숫자로 자리수를 세로로 맞춘다 (금액 표의 가독성을 좌우하는 부분) */
    .data-preview table {
      width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed;
      font-variant-numeric: tabular-nums;
    }

    .data-preview col.col-source   { width: 210px; }
    .data-preview col.col-page     { width: 60px; }
    .data-preview col.col-company  { width: 150px; }
    .data-preview col.col-date     { width: 100px; }
    .data-preview col.col-tracking { width: 170px; }
    .data-preview col.col-country  { width: 90px; }
    .data-preview col.col-qty      { width: 90px; }
    .data-preview col.col-amount   { width: 130px; }
    .data-preview col.col-currency { width: 80px; }
    .data-preview col.col-rate     { width: 110px; }
    .data-preview col.col-krw      { width: 140px; }

    .data-preview thead { background: var(--table-header); position: sticky; top: 0; z-index: 10; }
    /* sticky thead는 border-collapse 환경에서 테두리가 스크롤과 함께 사라질 수 있어,
       하단 구분선을 border 대신 inset box-shadow로 그린다. 배경도 th에 직접 지정해야 안전하다 */
    .data-preview th {
      padding: 9px 12px; text-align: center; font-weight: 700;
      background: var(--table-header); color: var(--table-header-text);
      box-shadow: inset 0 -1.5px 0 var(--table-header-line);
      white-space: nowrap; font-size: 11.5px;
      letter-spacing: 0.01em; line-height: 1.3;
      overflow: hidden; text-overflow: ellipsis;
    }
    .data-preview td {
      padding: 7px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
    }
    .data-preview tbody tr { transition: background 0.12s ease; }
    .data-preview tbody tr:hover { background: var(--surface-alt); }
    .data-preview tbody tr:last-child td { border-bottom: none; }

    .data-preview tr.out-of-period td { background: var(--surface-alt); color: var(--text-muted); }
    .data-preview tr.out-of-period:hover td { background: var(--surface-sunken); }

    .data-preview .empty-row td { color: var(--text-muted); text-align: center; padding: 26px 10px; white-space: normal; }

    .guide-table-center td { text-align: center; }
    /* 가운데 정렬 표라도 셀 안의 목록까지 가운데 정렬하면 글머리 기호만 왼쪽 끝에 떨어져 문장과 따로 논다.
       목록 자체는 inline-block으로 가운데에 놓되, 안의 글은 왼쪽 정렬해 기호와 문장을 붙인다 */
    .guide-table-center td > ul,
    .guide-table-center td > ol { display: inline-block; text-align: left; }

    /* 표 안의 구역 제목 행(과세표준 및 매출세액 / 매입세액 / 공제받지 못할 매입세액 / 가산세).
       헤더 행과 톤이 겹치지 않도록, 배경으로 누르는 대신 좌측 스트라이프 + 진한 글씨로 위계를 만든다
       ("분류"용 강조는 좌측 스트라이프, "차감/경고"용만 배경색이라는 전체 원칙과 동일한 방식) */
    tr.table-group-row td {
      background: var(--surface-alt);
      color: var(--text);
      font-weight: 700;
      border-left: 3px solid var(--slate);
    }
    tr.table-group-row:hover td { background: var(--surface-alt); }
    tr.table-group-row.group-danger td { background: var(--danger-light); color: var(--danger); border-left-color: var(--danger); }
    tr.table-group-row.group-danger:hover td { background: var(--danger-light); }
    tr.table-group-row.group-warning td { background: var(--warning-light); color: var(--warning); border-left-color: var(--warning); }
    tr.table-group-row.group-warning:hover td { background: var(--warning-light); }

    /* 설명·입력용 표는 긴 문구가 잘리지 않도록 줄바꿈 허용 (메인 데이터 그리드는 기존대로 nowrap 유지) */
    .data-preview.wrap-table table { table-layout: auto; }
    .data-preview.wrap-table td, .data-preview.wrap-table th {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    .data-preview .editable { user-select: none; }
    .data-preview.edit-mode .editable { cursor: text; background: var(--brand-light); }
    .data-preview.edit-mode .editable:hover { background: var(--brand-border); }

    .note-text {
      font-size: 12px; color: var(--text-secondary); line-height: 1.7; background: var(--brand-light);
      border: 1px solid var(--brand-border); border-left: 3px solid var(--brand);
      padding: 11px 14px; border-radius: var(--radius-xs);
    }

    /* 안내 노트의 의미별 변형. 인라인 style로 배경만 바꾸면 테두리는 브랜드색으로 남아 색이 어긋나므로,
       배경·테두리·글자색을 한 벌로 묶어 클래스로 제공한다 */
    .note-text.note-warning {
      background: var(--warning-light);
      border-color: var(--warning-border);
      border-left-color: var(--warning);
      color: var(--warning);
    }
    .note-text.note-danger {
      background: var(--danger-light);
      border-color: var(--danger-border);
      border-left-color: var(--danger);
      color: var(--text);
    }

    /* 목록 항목 안에서 경고를 강조해야 할 때 (조회 방법 목록의 주의사항 등) */
    li.note-danger-inline {
      color: var(--text);
      background: var(--danger-light);
      border: 1px solid var(--danger-border);
      border-left: 3px solid var(--danger);
      border-radius: var(--radius-xs);
      padding: 10px 12px;
      margin: 8px 0;
      list-style-position: inside;
    }
    li.note-danger-inline strong { color: var(--danger); }

    /* ---- 앱 입력값이 국세청 제출이 아님을 상시 알리는 안내 띠 ---- */
    .submission-notice {
      max-width: var(--page-width);
      margin: 14px auto 0;
      background: var(--warning-light);
      border: 1px solid var(--warning-border);
      border-left: 3px solid var(--warning);
      border-radius: var(--radius-xs);
      padding: 10px 14px;
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--warning);
    }
    .submission-notice strong { font-weight: 700; }

    /* ---- 부가세 포함 금액 변환 도우미 ---- */
    .vat-inc-helper {
      margin-top: 18px;
      padding: 14px 16px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    .vat-inc-helper-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
    .vat-inc-helper-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 12px; }
    .vat-inc-helper-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .vat-inc-helper-row select { min-width: 220px; }
    .vat-inc-helper-row input[type="number"] { flex: 1 1 180px; min-width: 150px; }
    .vat-inc-helper-row button { flex: 0 0 auto; }

    @media (max-width: 640px) {
      .vat-inc-helper-row { flex-direction: column; align-items: stretch; }
      /* 세로 배치에서는 flex-basis가 높이로 해석되므로(금액 입력란이 180px 높이로 늘어남)
         flex 지정을 함께 해제해야 한다 */
      .vat-inc-helper-row select,
      .vat-inc-helper-row input[type="number"],
      .vat-inc-helper-row button { width: 100%; min-width: 0; flex: 0 0 auto; }
    }

    .inline-tab-link,
    .hometax-link {
      color: var(--brand-dark); font-weight: 600;
      text-decoration: underline; text-decoration-thickness: 1px;
      text-underline-offset: 2px; cursor: pointer;
      transition: color 0.15s ease;
    }
    .inline-tab-link:hover,
    .hometax-link:hover { color: var(--brand-darker); }

    .edit-buttons { display: flex; gap: 10px; margin-top: 12px; }
    .edit-buttons button { flex: 1; }

    .button-group { display: flex; gap: 10px; flex-wrap: wrap; }

    /* 기본(보조) 버튼: 중립 톤으로 절제해, 강조가 필요한 주요 동작(.primary)만 브랜드 색으로 두드러지게 한다 */
    button {
      flex: 1; min-width: 140px; padding: 9px 16px; background: var(--surface);
      color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer;
      font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.45;
      border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs);
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    button:hover { background: var(--surface-alt); border-color: #BFC5D0; color: var(--text); transform: none; }
    button.primary { background: var(--brand); color: white; border: 1px solid var(--brand); box-shadow: 0 1px 2px rgba(var(--brand-rgb), 0.28); }
    button.primary:hover {
      background: var(--brand-dark);
      border-color: var(--brand-dark);
      color: white;
      box-shadow: 0 2px 8px rgba(194, 65, 12, 0.28);
    }
    button:active { transform: translateY(0); box-shadow: none; }
    button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
    button:disabled:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text-secondary); }
    button.primary:disabled:hover { background: var(--brand); border-color: var(--brand); color: white; }

    .error-message {
      background: var(--danger-light); border: 1px solid var(--danger-border); color: var(--danger);
      padding: 11px 14px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.6;
      margin-top: 12px; display: none;
    }
    .error-message.active { display: block; }
    .success-message {
      background: var(--success-light); border: 1px solid var(--success-border); color: var(--success);
      padding: 11px 14px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.6;
      margin-top: 12px; display: none;
    }
    .success-message.active { display: block; }

    /* 움직임 최소화 설정을 켠 사용자에게는 전환·애니메이션을 끈다 */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }