/* ============================================================================
   portal.css — My SSANCAR 수출 포털 컴포넌트 스타일
   ----------------------------------------------------------------------------
   근거   : design/01_dashboard/SPEC.md (목업 실측 사양서)
   토큰   : assets/portal/portal-tokens.css
   접두사 : .pt-  (portal)

   규칙
   1. 색은 100% var(--*). hex 리터럴 0개.
   2. 간격·타이포·반경도 토큰이 있으면 반드시 var(--*) 를 쓴다.
   3. 토큰이 없는 "컴포넌트 고유 치수"(헤더 높이, 썸네일 높이, 레일 폭 등)는
      SPEC 실측 리터럴을 쓰고 "SPEC" 주석을 단다. 새 수치를 창작하지 않는다.
   4. SPEC 에 근거가 없는 값은 "미측정" 주석으로 표기한다.

   브레이크포인트 (모바일 우선)
     기본        390px 기준 — SPEC 모바일 실측값
     ≥ 768px    SPEC 미측정 구간. 새 수치를 만들지 않고 **데스크톱 실측값을
                 앞당겨 적용**한다. 1440 고정폭 그리드가 필요한 것만 1200 으로 미룬다.
     ≥ 1200px   SPEC 데스크톱(1440) 실측값 전량 — 6열 차량 그리드, stage-rail,
                 파이프라인 범례, 1fr 340px 본문 분할.

   간격 정규화 주의
     --sp-* 는 목업 원본을 4px 배수로 반올림한 값이라 최대 ±2px 이동이 있다
     (SPEC 부록 A). 그 결과 모바일/데스크톱 패딩이 같은 토큰으로 수렴하는 곳이
     있으며, 해당 지점에는 주석으로 원본값을 남겼다.
     예외 1건: .pt-stage-rail 의 gap 2px 는 SPEC 부록 A 가 명시적으로
     "정규화 제외 권장"이라 리터럴 2px 을 유지한다.
   ============================================================================ */

@import url('./portal-tokens.css');

/* ==========================================================================
   0. 기반
   ========================================================================== */

.pt-shell,
.pt-shell *,
.pt-shell *::before,
.pt-shell *::after { box-sizing: border-box; }

.pt-shell {
  /* 고정 탭바 높이. 실측 구성요소의 합이며 임의값이 아니다:
     상단패딩 8 + 링크(패딩 8·8 + 아이콘 14 + gap 8 + 라벨 10 = 48) + 하단패딩 12 = 68 */
  --pt-tabbar-h: 68px;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  color: var(--ink-900);
  font-family: var(--ff-body);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  -webkit-font-smoothing: antialiased;
}

.pt-shell a { color: var(--nv-700); text-decoration: none; }
.pt-shell a:hover { color: var(--nv-900); text-decoration: underline; }

/* 접근성 — SPEC §1.5 전역 규칙 실측: outline 2px solid --gd-600, offset 2px */
.pt-shell :focus-visible {
  outline: 2px solid var(--gd-600);
  outline-offset: 2px;
}

/* VIN / B\L / INV 등 식별번호 */
.pt-mono {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
}

/* ERP 미연동 구간 표시. 실데이터가 아님을 바이어에게 분명히 알린다.
   눈에 띄되 콘텐츠를 가리지 않도록 가장 약한 중립색(--ink-300)만 쓴다. */
.pt-stub-badge {
  display: inline-block;             /* float 금지 — flex/grid 자식 안에서 예측 불가 */
  margin-left: var(--sp-2);
  vertical-align: baseline;
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-9);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-12);
  text-transform: uppercase;
  color: var(--ink-300);
}

/* ==========================================================================
   1. 레이아웃 — .pt-header / .pt-nav / .pt-main / .pt-container
   ========================================================================== */

.pt-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: 52px;                      /* SPEC 1.2 모바일 */
  padding-inline: var(--sp-4);       /* SPEC 16px */
  background: var(--nv-900);
}

.pt-header__brand { display: flex; align-items: baseline; gap: var(--sp-2); } /* SPEC 7px */
.pt-header__name {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);           /* SPEC 모바일 */
  line-height: var(--lh-1);
  letter-spacing: var(--ls-tight-1);
  color: var(--surface);
}
.pt-header__kicker {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-8);            /* SPEC 모바일 "PORTAL" */
  line-height: var(--lh-1);
  letter-spacing: var(--ls-18);
  color: var(--gd-600);
}
.pt-header__tools { display: flex; align-items: center; gap: var(--sp-4); } /* SPEC 14px */
/* 헤더 안의 바이어명. 지정이 없으면 .pt-shell 의 --ink-900(거의 검정)이 상속돼
   네이비 배경 위에서 사실상 보이지 않는다. 2026-08-09 발견·수정. */
.pt-header__buyer {
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-1);
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}
.pt-header__avatar {
  flex: none;
  width: 26px; height: 26px;         /* SPEC 모바일 */
  border-radius: var(--radius);
  background: var(--gd-600);
  color: var(--nv-900);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-10);
  line-height: 26px;                 /* SPEC: 아바타 정중앙 정렬용 px 행간 */
  text-align: center;
  letter-spacing: var(--ls-04);
}
/* 검색창 — SPEC §5.1 #3: 모바일에는 존재하지 않음 */
.pt-header__search { display: none; }
/* 언어 전환 — SPEC §5.1 #4: 모바일에는 존재하지 않음 */
.pt-header__lang { display: none; }

/* 상단 네비 — SPEC §5.1 #1: 모바일에서는 하단 탭바로 대체되므로 숨김 */
.pt-nav { display: none; }

/* 하단 탭바 (모바일 전용) — 화면 하단 고정(2026-08-08 확정).
   목업에는 position 선언이 없었으나 고정으로 확정했다. */
.pt-nav--tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;                       /* 본문 위. 구조값이며 실측 수치 아님 */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--bw-1) solid var(--line);
  background: var(--surface);
  padding: var(--sp-2) var(--sp-2) var(--sp-3);  /* SPEC 8px 6px 12px */
  /* iOS 홈 인디케이터 영역만큼 아래 패딩을 더 준다 */
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
}
.pt-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);                  /* SPEC 6px */
  padding-block: var(--sp-2);        /* SPEC 6px */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-10);
  line-height: var(--lh-1);
  color: var(--ink-500);
}
.pt-shell .pt-nav__link:hover { text-decoration: none; }
.pt-nav__icon {
  width: 14px; height: 14px;         /* SPEC */
  border-radius: var(--radius-sm);
  border: var(--bw-1-5) solid var(--ink-500);
}
.pt-nav__link--active { color: var(--nv-900); }
.pt-nav__link--active .pt-nav__icon {
  border-color: transparent;
  background: var(--nv-900);
}

.pt-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);                  /* SPEC 섹션 간 10px */
  padding: var(--sp-3) var(--sp-4) var(--sp-4);   /* SPEC 12px 16px 16px */
  /* 고정 탭바가 본문 끝을 가리지 않도록 하단 여백을 보정한다.
     SPEC 실측 여백(--sp-4) + 탭바 높이 + safe-area. */
  padding-bottom: calc(var(--sp-4) + var(--pt-tabbar-h) + env(safe-area-inset-bottom));
}

.pt-container {
  width: 100%;
  max-width: 1440px;                 /* 2026-08-08 확정. 목업 아트보드 폭과 동일 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 카드 공통 표면 */
.pt-actions,
.pt-metric,
.pt-manager,
.pt-vehicles,
.pt-identity {
  background: var(--surface);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
}

/* ==========================================================================
   2. .pt-tier-badge — 등급 배지
   ========================================================================== */

.pt-tier-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--sp-1);                  /* SPEC 모바일 5px */
  padding: var(--sp-1) var(--sp-2);  /* SPEC 모바일 4px 7px */
  border: var(--bw-1) solid var(--gd-600);
  border-radius: var(--radius);
  background: var(--nv-900);
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-9);            /* SPEC 모바일 */
  line-height: var(--lh-1);
  letter-spacing: var(--ls-12);
  text-transform: uppercase;
  color: var(--gd-400);
}
/* 마름모 — 정사각형 45° 회전. border-radius 없음 (SPEC §2.1) */
.pt-tier-badge__mark {
  width: 6px; height: 6px;           /* SPEC 모바일 */
  background: currentColor;
  transform: rotate(45deg);
}

/* silver = SPEC 실측 (목업에 렌더된 유일한 등급). 배경은 기본값 --nv-900 유지 */
.pt-tier-badge--silver { color: var(--gd-400); }
/* gold / bronze = 목업 미렌더 → 디자인 확정값(2026-08-08).
   테두리는 지정받지 않아 기본값 --gd-600 을 그대로 상속한다.
   마름모(__mark)는 currentColor 라 각 변형의 글자색을 따라간다. */
.pt-tier-badge--gold   { background: var(--gd-400); color: var(--nv-900); }
.pt-tier-badge--bronze { background: var(--bz-500); color: var(--surface); }

/* ==========================================================================
   3. .pt-tally — 12개월 매니페스트 탤리 (시그니처)
   --------------------------------------------------------------------------
   SPEC §3. 마크는 DOM 노드로 300개를 렌더한다(1마크 = 차량 1대).
   모바일·태블릿에서는 짝수 마크를 숨겨 150개만 보이게 하며, 이때 1마크가
   차량 2대를 뜻한다 — SPEC 이 실측한 모바일 캡션 "ONE MARK PER 2 VEHICLES"
   와 정확히 일치한다. 채움 142개 중 홀수는 71개이고
   71 × 2.2px = 156.2px 로 SPEC 의 모바일 채움 폭 156px 과 맞는다.
   ========================================================================== */

.pt-tally {
  display: block;
  /* 진행률 데이터 훅. 기본값은 SPEC 실측 142/300.
     실제 구현에서는 서버가 계산한 백분율로 이 변수만 덮어쓰면 된다. */
  --pt-tally-progress: 47.3333%;
}

.pt-tally__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-9);            /* SPEC 모바일 */
  line-height: var(--lh-1);
  letter-spacing: var(--ls-13);      /* SPEC 모바일 */
  color: var(--ink-500);
}
/* SPEC §3.2: 모바일 캡션에는 우측 "GOLD THRESHOLD 300" 이 없다 */
.pt-tally__caption-goal { display: none; color: var(--gd-600); }

/* 캡션 문구 자체가 브레이크포인트마다 다르다.
   ≥1200 에서만 1마크 = 차량 1대이고, 그 아래에서는 1마크 = 2대다. */
.pt-tally__caption-wide { display: none; }
.pt-tally__caption-narrow { display: inline; }

.pt-tally__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.8px;                        /* SPEC 모바일 주기 2.2px − 마크 1.4px */
  height: 20px;                      /* SPEC 모바일 */
  margin-top: var(--sp-2);           /* SPEC 7px */
}

.pt-tally__mark {
  flex: 1 1 0;
  min-width: 0;
  background: var(--line);
}
.pt-tally__mark--is-filled { background: var(--nv-700); }

/* 모바일·태블릿: 1마크 = 2대 */
.pt-tally__mark:nth-child(even) { display: none; }

/* 현재 위치 표시선 — 호출부가 --pt-tally-progress 로 진행률을 넘긴다.
   기본값은 값이 없을 때의 안전한 폴백일 뿐 의미는 없다. */
.pt-tally__today,
.pt-tally__goal {
  position: absolute;
  top: -3px; bottom: -3px;           /* SPEC 모바일: 높이 26px = 20 + 3 + 3 */
}
.pt-tally__today {
  left: var(--pt-tally-progress, 47.3333%);
  width: 1.5px;                      /* SPEC */
  background: var(--nv-900);
}
.pt-tally__goal {
  right: 0;
  width: 2px;                        /* SPEC */
  background: var(--gd-600);
}

.pt-tally__scale {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);           /* SPEC 모바일 7px */
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-10);
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}
.pt-tally__tick--today { color: var(--nv-900); font-weight: var(--fw-semibold); }
.pt-tally__tick--goal,
.pt-tally__tick--goal-narrow { color: var(--gd-600); font-weight: var(--fw-semibold); }
/* SPEC §5.1 #16 — 모바일 눈금은 "142 TODAY / 158 TO GOLD" 양끝 2개뿐이다.
   중간 눈금(0/100/200)과 데스크톱 문구 "300 GOLD" 는 숨긴다. */
.pt-tally__tick--q1,
.pt-tally__tick--q2,
.pt-tally__tick--start,
.pt-tally__tick--goal { display: none; }
.pt-tally__tick--goal-narrow { display: inline; }

/* ==========================================================================
   4. .pt-actions — Action required
   ========================================================================== */

.pt-actions { overflow: hidden; counter-reset: pt-action; }

.pt-actions__banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);                  /* SPEC 모바일 8px */
  padding: var(--sp-3) var(--sp-4);  /* SPEC 모바일 10px 14px */
  background: var(--alert-banner-bg);
  border-bottom: var(--bw-1) solid var(--alert-banner-line);
}
.pt-actions__dot {
  width: 8px; height: 8px;           /* SPEC */
  flex: none;
  border-radius: var(--radius-xs);
  background: var(--stage-purchase);
}
.pt-actions__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  line-height: var(--lh-1);
  color: var(--ink-900);
}
.pt-actions__count {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-10);           /* SPEC 모바일 */
  line-height: var(--lh-1);
  padding: var(--sp-1) var(--sp-2);  /* SPEC 모바일 4px 7px */
  border-radius: var(--radius-pill);
  background: var(--alert-pill-bg);
  color: var(--stage-purchase);
}
/* 배너 우측 주석 — SPEC §5.1 #19: 모바일에는 없음 */
.pt-actions__note { display: none; }

/* 행 골격은 grid-template-areas 로 잡는다. SPEC §2.3 데스크톱은 금액(1행)과
   상태(2행)가 같은 190px 열에 세로로 쌓이고, 순번·본문·버튼이 두 행을 가로지른다.
   금액이 없는 행(02·03)은 amount 트랙이 비어 자동으로 높이가 0이 되므로
   "상태 문구가 셀 첫 줄"이라는 SPEC 실측 거동이 그대로 재현된다. */
.pt-actions__row {
  counter-increment: pt-action;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "body   amount"
    "status status"
    "hint   hint"
    "btn    btn";
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);      /* 행 간격 SPEC 4px */
  padding: var(--sp-3) var(--sp-4);  /* SPEC 모바일 12px 14px */
  border-bottom: var(--bw-1) solid var(--line);
}
.pt-actions__row:last-child { border-bottom: 0; }

/* 01 / 02 / 03 넘버링 — SPEC §5.1 대로 모바일에서는 숨김 */
.pt-actions__row::before {
  content: counter(pt-action, decimal-leading-zero);
  grid-area: num;
  display: none;
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  line-height: var(--lh-1);
  color: var(--ink-500);
}

.pt-actions__body { grid-area: body; }
.pt-actions__label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-13-5);         /* SPEC 모바일 */
  line-height: var(--lh-13);
}
.pt-actions__amount {
  grid-area: amount;
  justify-self: end;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);           /* SPEC 모바일 */
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
}
.pt-actions__status {
  grid-area: status;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: var(--lh-13);
  color: var(--stage-purchase);
}
.pt-actions__status--alert { color: var(--stage-alert); }
.pt-actions__sub {
  margin-top: var(--sp-1);           /* SPEC 4px */
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-135);
  color: var(--ink-700);
}
/* 보조 문구 — SPEC §2.3 데스크톱 02·03행의 우측 둘째 줄.
   SPEC §5.1 대로 모바일에서는 노출되지 않는다. */
.pt-actions__hint {
  grid-area: hint;
  display: none;
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-1);
  color: var(--ink-500);
}
/* 인용 번호(INV-2839 등)는 본문보다 한 단계 얇다 — SPEC §2.3 */
.pt-actions__label .pt-mono { font-weight: var(--fw-medium); }

.pt-actions__row .pt-btn {
  grid-area: btn;
  margin-top: var(--sp-2);
  width: 100%;
  padding: var(--sp-3);              /* SPEC 모바일 전폭 버튼 12px 균일 */
  font-size: var(--fs-13);           /* SPEC 모바일 */
}

/* ==========================================================================
   5. .pt-metric — 지표 카드
   ========================================================================== */

.pt-metric { padding: var(--sp-3); }  /* SPEC 모바일 12px */

.pt-metric__label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-9-5);          /* SPEC 모바일 */
  line-height: var(--lh-1);
  letter-spacing: var(--ls-10);
  text-transform: uppercase;
  color: var(--ink-500);
}
.pt-metric__figure {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-2);           /* SPEC 모바일 8px */
}
.pt-metric__value {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);           /* SPEC 모바일 */
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
  /* SPEC §2.4: 모바일 수치에는 --ls-tight-2 가 없다. 데스크톱에서만 적용 */
}
.pt-metric__unit {
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  line-height: var(--lh-1);
  color: var(--ink-700);
}
.pt-metric__foot {
  margin-top: var(--sp-2);           /* SPEC 모바일 6px */
  font-weight: var(--fw-regular);
  font-size: var(--fs-11-5);         /* SPEC 모바일 */
  line-height: var(--lh-13);
  color: var(--ink-700);
}
.pt-metric__delta { font-weight: var(--fw-semibold); color: var(--stage-done); }
.pt-metric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.pt-metric__link {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-11-5);
  line-height: var(--lh-1);
}
.pt-metric__pin {
  width: 6px; height: 6px;           /* SPEC */
  flex: none;
  border-radius: var(--radius-circle);
  background: var(--stage-ship);
}

/* Growth Credit 강조 변형 — SPEC §2.4 */
.pt-metric--highlight {
  box-shadow: inset 0 3px 0 var(--gd-600);   /* SPEC */
  padding: var(--sp-3) var(--sp-4);          /* SPEC 모바일 12px 14px (일반 카드 12px 와 다름) */
  grid-column: 1 / -1;                       /* SPEC §5.1 #5: 모바일에서 Growth Credit 은
                                                2열 그리드의 한 칸이 아니라 전폭 별도 섹션 */
}
.pt-metric--highlight .pt-metric__label { color: var(--gd-800); }

/* ==========================================================================
   6. .pt-stage — 11단계 상태 배지 (4그룹)
   ========================================================================== */

.pt-stage {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);  /* SPEC 모바일 3px 8px */
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-10-5);         /* SPEC 모바일 */
  line-height: var(--lh-14);         /* SPEC 모바일 */
  white-space: nowrap;
}
.pt-stage--purchase { background: var(--stage-purchase-bg); color: var(--stage-purchase); }
.pt-stage--prep     { background: var(--stage-prep-bg);     color: var(--stage-prep); }
.pt-stage--ship     { background: var(--stage-ship-bg);     color: var(--stage-ship); }
.pt-stage--done     { background: var(--stage-done-bg);     color: var(--stage-done); }

/* ==========================================================================
   7. .pt-stage-rail — 11칸 진행 바
   --------------------------------------------------------------------------
   SPEC §4 / §5.1 #9 : 데스크톱 전용. 모바일에는 존재하지 않는다.
   상태는 완료·미완 2가지뿐이며 "현재" 전용 색은 미측정(존재하지 않음).
   ========================================================================== */

.pt-stage-rail { display: none; }

.pt-stage-rail__seg { background: var(--line); }
.pt-stage-rail__seg--is-done { background: var(--pt-rail-fill, var(--ink-500)); }

.pt-stage-rail--purchase { --pt-rail-fill: var(--stage-purchase); }
.pt-stage-rail--prep     { --pt-rail-fill: var(--stage-prep); }
.pt-stage-rail--ship     { --pt-rail-fill: var(--stage-ship); }
.pt-stage-rail--done     { --pt-rail-fill: var(--stage-done); }

/* ==========================================================================
   8. .pt-vehicle-row — 차량 목록 행
   ========================================================================== */

.pt-vehicles { overflow: hidden; }

.pt-vehicles__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);                  /* SPEC 모바일 8px */
  padding: var(--sp-3) var(--sp-4);  /* SPEC 모바일 11px 14px */
  border-bottom: var(--bw-1) solid var(--line);
}
.pt-vehicles__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  line-height: var(--lh-1);
}
.pt-vehicles__sub { display: none; }   /* SPEC: 모바일 카드 헤더에 부제 없음 */
.pt-vehicles__link {
  margin-left: auto;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: var(--lh-1);
}

/* 파이프라인 범례 — SPEC §5.1 #10: 데스크톱 전용 */
.pt-vehicles__legend { display: none; }
.pt-vehicles__legend-item { display: flex; align-items: center; gap: var(--sp-2); }
.pt-vehicles__legend-dot {
  width: 7px; height: 7px;           /* SPEC */
  border-radius: var(--radius-xs);
}
.pt-vehicles__legend-dot--purchase { background: var(--stage-purchase); }
.pt-vehicles__legend-dot--prep     { background: var(--stage-prep); }
.pt-vehicles__legend-dot--ship     { background: var(--stage-ship); }
.pt-vehicles__legend-dot--done     { background: var(--stage-done); }

/* 표 헤더 행 — SPEC §5.1 #8: 데스크톱 전용 */
.pt-vehicles__columns { display: none; }

/* 데스크톱 6열(thumb·vehicle·port·stage·date·chevron) 중 stage 칸이 실제 그리드
   셀이 되도록 영역 이름을 쓴다. 모바일에서는 stage 가 본문 아래로 내려간다. */
.pt-vehicle-row {
  display: grid;
  grid-template-columns: 52px 1fr;   /* SPEC 모바일 */
  grid-template-areas:
    "thumb body"
    "thumb status";
  align-items: center;
  gap: var(--sp-3);                  /* SPEC 모바일 12px */
  padding: var(--sp-3) var(--sp-4);  /* SPEC 모바일 11px 14px */
  border-bottom: var(--bw-1) solid var(--line-subtle);
}
.pt-vehicle-row:last-child { border-bottom: 0; }
.pt-vehicle-row__body { grid-area: body; }

.pt-vehicle-row__thumb {
  grid-area: thumb;
  height: 38px;                      /* SPEC 모바일 */
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(
    45deg,
    var(--ph-a) 0 6px,
    var(--ph-b) 6px 12px
  );                                 /* SPEC 실측 패턴 */
}
.pt-vehicle-row__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-13-5);
  line-height: var(--lh-12);
}
.pt-vehicle-row__vin {
  margin-top: var(--sp-1);           /* SPEC 3px */
  font-family: var(--ff-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-11);           /* SPEC 모바일 */
  line-height: var(--lh-1);
  color: var(--ink-500);
}
.pt-vehicle-row__status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: var(--sp-2);                  /* SPEC 8px */
  margin-top: var(--sp-2);           /* SPEC 6px */
  flex-wrap: wrap;
}
/* 모바일에서는 항구·날짜가 한 문자열로 병합된다 (SPEC §5.1 #11) */
.pt-vehicle-row__meta {
  font-weight: var(--fw-regular);
  font-size: var(--fs-11);           /* SPEC 모바일 */
  line-height: var(--lh-1);
  color: var(--ink-700);
}
.pt-vehicle-row__port { grid-area: port; display: none; }
.pt-vehicle-row__date { grid-area: date; display: none; }
/* 셰브런 — SPEC §5.1 #12: 모바일에는 없음 */
.pt-vehicle-row__chevron { grid-area: chev; display: none; }

/* ==========================================================================
   9. .pt-manager — 담당 매니저 카드
   ========================================================================== */

.pt-manager {
  display: flex;
  align-items: center;
  gap: var(--sp-3);                  /* SPEC 모바일 12px */
  padding: var(--sp-4);              /* SPEC 모바일 14px */
}
.pt-manager__label { display: none; }  /* SPEC §5.1 #13: 모바일에는 라벨 없음 */

.pt-manager__photo {
  flex: none;
  width: 52px; height: 52px;         /* SPEC 모바일 */
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  background: repeating-linear-gradient(
    45deg,
    var(--ph-a) 0 6px,
    var(--ph-b) 6px 12px
  );                                 /* SPEC 모바일 패턴 6px/12px */
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-manager__photo-text { display: none; }  /* SPEC: 모바일 아바타에 캡션 없음 */

.pt-manager__body { flex: 1; min-width: 0; }
.pt-manager__name {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);           /* SPEC 모바일 */
  line-height: var(--lh-12);
}
.pt-manager__role {
  margin-top: var(--sp-1);           /* SPEC 3px */
  font-weight: var(--fw-regular);
  font-size: var(--fs-11-5);         /* SPEC 모바일 */
  line-height: var(--lh-13);
  color: var(--ink-700);
}
/* 상태 목록 — SPEC §5.1 #14: 모바일에서는 직함 한 줄로 축약 */
.pt-manager__status { display: none; }
.pt-manager__status-dot {
  width: 6px; height: 6px;           /* SPEC */
  flex: none;
  border-radius: var(--radius-circle);
  background: var(--ink-300);
}
.pt-manager__status-dot--online { background: var(--stage-done); }
.pt-manager__actions { flex: none; }
/* 이메일 버튼 — SPEC §5.1 #13: 모바일에는 WhatsApp 1개만 */
.pt-manager__actions .pt-btn + .pt-btn { display: none; }

/* ==========================================================================
   10. .pt-btn
   ========================================================================== */

.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);  /* SPEC 모바일 12px / 12px 14px */
  border: var(--bw-1) solid transparent;
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12-5);         /* SPEC 모바일 */
  line-height: var(--lh-1);
  cursor: pointer;
  /* 2026-08-08 확정: 색 속성 3종만 120ms ease-out.
     transform 은 금지(레이아웃 흔들림·모션 민감 사용자 부담). */
  transition:
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    color 120ms ease-out;
}
.pt-btn--primary {
  background: var(--nv-900);
  color: var(--surface);
}
.pt-btn--secondary {
  background: var(--surface);
  color: var(--nv-700);
  border-color: var(--ink-300);
}
/* 호버는 SPEC §5.1 #21 대로 데스크톱에만 선언한다 (모바일 목업에 호버 없음).
   터치 기기에서 sticky hover 가 남는 문제도 함께 피한다. */

/* ==========================================================================
   11. 보조 — 아이덴티티 헤더 (탤리를 담는 섹션)
   ========================================================================== */

.pt-identity { padding: var(--sp-4); }   /* SPEC 모바일 14px */
.pt-identity__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.pt-identity__name {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);           /* SPEC 모바일 h2 */
  line-height: var(--lh-12);
}
.pt-identity__meta {
  margin-top: var(--sp-1);           /* SPEC 5px */
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-1);
  color: var(--ink-700);
}
.pt-identity__stats { display: none; }  /* SPEC §5.1 #15: 모바일에는 없음 */
.pt-identity__tally { margin-top: var(--sp-4); }  /* SPEC 모바일 14px */

.pt-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;    /* SPEC 모바일 */
  gap: var(--sp-3);                  /* SPEC 모바일 10px */
}
.pt-split { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ==========================================================================
   ≥ 768px — SPEC 미측정 구간.
   새 수치를 만들지 않고 데스크톱(1440) 실측값을 앞당겨 적용한다.
   1440 고정폭 그리드가 필요한 항목만 1200 으로 미룬다.
   ========================================================================== */

@media (min-width: 768px) {

  .pt-header {
    height: 56px;                    /* SPEC 데스크톱 */
    gap: var(--sp-7);                /* SPEC 28px */
    justify-content: flex-start;
    padding-inline: var(--sp-6);     /* SPEC 24px */
  }
  .pt-header__name   { font-size: var(--fs-16); }
  .pt-header__kicker { font-size: var(--fs-9); letter-spacing: var(--ls-18); }
  .pt-header__tools  { margin-left: auto; }
  .pt-header__avatar {
    width: 28px; height: 28px;       /* SPEC 데스크톱 */
    font-size: var(--fs-11);
    line-height: 28px;               /* SPEC */
  }
  .pt-header__search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);                /* SPEC 8px */
    width: 200px;                    /* SPEC */
    padding: var(--sp-2) var(--sp-3);/* SPEC 6px 10px */
    border: var(--bw-1) solid var(--nv-600);
    border-radius: var(--radius);
    background: var(--nv-700);
    font-weight: var(--fw-regular);
    font-size: var(--fs-12);
    line-height: var(--lh-1);
    color: var(--ink-600);
  }
  .pt-header__search-icon {
    width: 8px; height: 8px;         /* SPEC */
    flex: none;
    border: var(--bw-1-5) solid var(--ink-600);
    border-radius: var(--radius-circle);
  }
  .pt-header__lang {
    display: inline-block;
    font-weight: var(--fw-medium);
    font-size: var(--fs-12);
    line-height: var(--lh-1);
    color: var(--ink-400);
  }
  .pt-shell .pt-header__lang { color: var(--ink-400); }

  /* 상단 네비 등장 / 하단 탭바 퇴장 — SPEC §5.1 #1 */
  .pt-nav {
    display: flex;
    align-items: center;
    gap: 2px;                        /* SPEC 실측. --sp-1(4px)로 정규화하면
                                        링크 간격이 2배가 되어 리터럴 유지 */
  }
  .pt-nav--tabs { display: none; }
  .pt-nav .pt-nav__link {
    flex-direction: row;
    gap: 0;
    padding: var(--sp-5) var(--sp-3) var(--sp-4);  /* SPEC 18px 12px 16px */
    font-weight: var(--fw-medium);
    font-size: var(--fs-13);
    color: var(--ink-400);
  }
  .pt-nav .pt-nav__icon { display: none; }
  .pt-nav .pt-nav__link:hover { color: var(--surface); }
  .pt-nav .pt-nav__link--active {
    font-weight: var(--fw-semibold);
    color: var(--surface);
    box-shadow: inset 0 -2px 0 var(--gd-600);   /* SPEC */
  }

  .pt-main { padding: var(--sp-3) var(--sp-6) var(--sp-4); }  /* SPEC 12px 24px 14px */

  /* 호버 — SPEC §5.1 #21: 데스크톱 전용 */
  .pt-btn--primary:hover { background: var(--nv-700); }
  .pt-btn--secondary:hover { border-color: var(--nv-900); }

  /* 아이덴티티 — 데스크톱 실측 */
  .pt-identity { padding: var(--sp-4) var(--sp-5) var(--sp-4); }  /* SPEC 16px 20px 14px */
  .pt-identity__top {
    align-items: flex-end;
    gap: var(--sp-6);                /* SPEC 24px — 회사명 블록 ↔ 통계 블록 */
  }
  .pt-identity__meta-since { display: inline; }
  .pt-identity__name { font-size: var(--fs-22); line-height: var(--lh-11); letter-spacing: var(--ls-tight-1); }
  .pt-identity__meta { margin-top: var(--sp-2); font-size: var(--fs-12-5); }
  .pt-identity__stats {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-7);                /* SPEC 28px */
    text-align: right;
  }
  .pt-identity__stat-label {
    font-weight: var(--fw-medium);
    font-size: var(--fs-10);
    line-height: var(--lh-1);
    letter-spacing: var(--ls-10);
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .pt-identity__stat-value {
    margin-top: var(--sp-2);         /* SPEC 6px */
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-30);         /* SPEC */
    line-height: var(--lh-1);
    letter-spacing: var(--ls-tight-2);
    font-variant-numeric: tabular-nums;
  }
  .pt-identity__stat-value--goal { color: var(--nv-700); }
  .pt-identity__stat-unit {
    font-family: var(--ff-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-14);
    color: var(--ink-700);
  }
  .pt-identity__divider {
    width: 1px; height: 38px;        /* SPEC */
    background: var(--line);
  }
  .pt-identity__tally { margin-top: var(--sp-3); }  /* SPEC 10px */

  /* 탤리 — 데스크톱 캡션/눈금 */
  .pt-tally__caption { font-size: var(--fs-9-5); letter-spacing: var(--ls-14); }
  .pt-tally__caption-goal { display: inline; }
  .pt-tally__tick--goal { display: inline; }
  .pt-tally__tick--goal-narrow { display: none; }
  .pt-tally__scale { margin-top: var(--sp-2); }     /* SPEC 6px */
  .pt-tally__tick--start,
  .pt-tally__tick--q1,
  .pt-tally__tick--q2 { display: block; }
  /* 데스크톱 눈금은 절대위치. 위치는 SPEC 계산식 n/300 에서 도출 */
  .pt-tally__scale { display: block; height: 16px; }  /* SPEC */
  .pt-tally__tick {
    position: absolute;
    left: var(--pt-tick-pos, 0);
    transform: translateX(-50%);
  }
  .pt-tally__tick--start { left: 0; transform: none; }
  .pt-tally__tick--goal  { left: auto; right: 0; transform: none; }
  /* q1 / today 의 위치는 등급 목표에 따라 달라지므로 --pt-tick-pos 를 호출부가
     style 속성으로 넘긴다. 값이 아니라 **데이터**라 클래스로 표현할 수 없다.
     (bronze 는 30/120·48/120, silver 는 120/300·N/300 …) */

  /* Action required — 4열 그리드 + 넘버링 (SPEC §5.1 #6) */
  .pt-actions__banner { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }  /* SPEC 11px 16px */
  .pt-actions__count  { font-size: var(--fs-11); padding: var(--sp-1) var(--sp-2); }
  .pt-actions__note {
    display: block;
    margin-left: auto;
    font-weight: var(--fw-regular);
    font-size: var(--fs-12);
    line-height: var(--lh-1);
    color: var(--gd-800);
  }
  .pt-actions__row {
    grid-template-columns: 26px 1fr 190px 168px;   /* SPEC */
    grid-template-areas:
      "num body amount btn"
      "num body status btn"
      "num body hint   btn";
    align-items: center;
    gap: var(--sp-1) var(--sp-4);    /* 열 간격 SPEC 16px */
    padding: var(--sp-2) var(--sp-4);/* SPEC 8px 16px */
  }
  .pt-actions__row::before { display: block; align-self: center; }
  .pt-actions__hint { display: block; justify-self: end; text-align: right; }
  .pt-actions__label { font-size: var(--fs-14); line-height: var(--lh-13); }
  .pt-actions__amount {
    justify-self: end;
    font-size: var(--fs-17);         /* SPEC */
  }
  .pt-actions__status { justify-self: end; text-align: right; font-size: var(--fs-12); line-height: var(--lh-1); }
  .pt-actions__sub { margin-top: var(--sp-1); font-size: var(--fs-12-5); line-height: var(--lh-13); color: var(--ink-700); }
  .pt-actions__row .pt-btn {
    align-self: center;
    margin-top: 0;
    width: auto;
    justify-self: end;
    padding: var(--sp-3) var(--sp-4);/* SPEC 10px 16px */
    font-size: var(--fs-12-5);       /* SPEC 데스크톱 */
  }

  /* 지표 3열 — SPEC §5.1 #5 */
  .pt-metrics-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }  /* SPEC 12px */
  .pt-metric,
  .pt-metric--highlight { padding: var(--sp-4); }    /* SPEC 14px 16px */
  .pt-metric--highlight { grid-column: auto; }       /* SPEC §5.1 #5: 데스크톱은 3열 중 1칸 */
  .pt-metric__label { font-size: var(--fs-10); }
  .pt-metric__figure { margin-top: var(--sp-3); }    /* SPEC 10px */
  .pt-metric__value {
    font-size: var(--fs-28);                         /* SPEC */
    letter-spacing: var(--ls-tight-2);               /* SPEC 데스크톱 전용 */
  }
  .pt-metric__foot { margin-top: var(--sp-2); font-size: var(--fs-12); line-height: var(--lh-1); }

  /* 배지 — 데스크톱 실측 */
  .pt-tier-badge {
    gap: var(--sp-2);                /* SPEC 7px */
    font-size: var(--fs-10);
    letter-spacing: var(--ls-14);
  }
  .pt-tier-badge__mark { width: 7px; height: 7px; }  /* SPEC */

  .pt-stage { font-size: var(--fs-11); line-height: var(--lh-15); gap: var(--sp-2); }  /* SPEC */

  /* 차량 카드 헤더 */
  .pt-vehicles__head { padding: var(--sp-2) var(--sp-4); gap: var(--sp-3); }  /* SPEC 9px 16px 8px */
  .pt-vehicles__sub {
    display: block;
    font-weight: var(--fw-regular);
    font-size: var(--fs-12);
    line-height: var(--lh-1);
    color: var(--ink-500);
  }

  /* 매니저 — 세로 카드 (SPEC §5.1 #13) */
  .pt-manager {
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-4);            /* SPEC 16px */
  }
  .pt-manager__label {
    display: block;
    font-weight: var(--fw-medium);
    font-size: var(--fs-10);
    line-height: var(--lh-1);
    letter-spacing: var(--ls-10);
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .pt-manager__photo {
    width: auto;
    height: 78px;                    /* SPEC 데스크톱 */
    margin-top: var(--sp-3);         /* SPEC 10px */
    background: repeating-linear-gradient(
      45deg,
      var(--ph-a) 0 7px,
      var(--ph-b) 7px 14px
    );                               /* SPEC 데스크톱 패턴 7px/14px */
  }
  .pt-manager__photo-text {
    display: block;
    font-family: var(--ff-mono);
    font-weight: var(--fw-regular);
    font-size: var(--fs-10-5);
    line-height: var(--lh-1);
    letter-spacing: var(--ls-08);
    color: var(--ink-500);
  }
  .pt-manager__name { margin-top: var(--sp-3); font-size: var(--fs-17); }  /* SPEC 12px */
  .pt-manager__role { margin-top: var(--sp-1); font-size: var(--fs-12-5); line-height: var(--lh-14); }
  .pt-manager__status {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);                /* SPEC 5px */
    margin-top: var(--sp-3);         /* SPEC 10px */
    font-weight: var(--fw-regular);
    font-size: var(--fs-12);
    line-height: var(--lh-14);
    color: var(--ink-700);
  }
  .pt-manager__status-line { display: flex; align-items: center; gap: var(--sp-2); }  /* SPEC 7px */
  .pt-manager__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);                /* SPEC 8px */
    margin-top: auto;                /* SPEC §2.8 버튼 영역 */
  }
  .pt-manager__actions .pt-btn { width: 100%; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-13); }
  .pt-manager__actions .pt-btn + .pt-btn { display: inline-flex; }
}

/* ==========================================================================
   ≥ 1200px — SPEC 데스크톱(1440) 실측값 전량
   ========================================================================== */

@media (min-width: 1200px) {

  /* 탤리 — 1마크 = 차량 1대 */
  .pt-tally__mark:nth-child(even) { display: block; }
  .pt-tally__caption-wide { display: inline; }
  .pt-tally__caption-narrow { display: none; }
  .pt-tally__track {
    height: 24px;                    /* SPEC 데스크톱 */
    gap: 1.5px;                      /* SPEC 주기 4.5px − 마크 3px */
    margin-top: var(--sp-2);         /* SPEC 6px */
  }
  .pt-tally__today,
  .pt-tally__goal { top: -4px; bottom: -4px; }  /* SPEC 높이 32px = 24 + 4 + 4 */

  /* 파이프라인 범례 — SPEC §5.1 #10 */
  .pt-vehicles__legend {
    display: flex;
    align-items: center;
    gap: var(--sp-5);                /* SPEC 18px */
    padding: var(--sp-1) var(--sp-4);/* SPEC 5px 16px */
    background: var(--surface-alt);
    border-bottom: var(--bw-1) solid var(--line);
    font-family: var(--ff-mono);
    font-weight: var(--fw-regular);
    font-size: var(--fs-10-5);
    line-height: var(--lh-14);
    color: var(--ink-700);
    white-space: nowrap;
  }
  .pt-vehicles__legend-link { margin-left: auto; }

  /* 표 헤더 행 — SPEC §5.1 #8 */
  .pt-vehicles__columns {
    display: grid;
    grid-template-columns: 58px 1fr 150px 210px 116px 14px;   /* SPEC */
    align-items: center;
    gap: var(--sp-4);                /* SPEC 14px */
    padding: var(--sp-2) var(--sp-4);/* SPEC 6px 16px */
    border-bottom: var(--bw-1) solid var(--line);
    font-weight: var(--fw-medium);
    font-size: var(--fs-9-5);
    line-height: var(--lh-1);
    letter-spacing: var(--ls-12);
    text-transform: uppercase;
    color: var(--ink-500);
  }

  /* 차량 행 6열 */
  .pt-vehicle-row {
    grid-template-columns: 58px 1fr 150px 210px 116px 14px;   /* SPEC */
    grid-template-areas: "thumb body port status date chev";
    gap: var(--sp-4);                /* SPEC 14px */
    padding: var(--sp-1) var(--sp-4);/* SPEC 4px 16px */
  }
  .pt-vehicle-row__thumb { height: 34px; }   /* SPEC 데스크톱 */
  .pt-vehicle-row__vin { font-size: var(--fs-11-5); }
  .pt-vehicle-row__status { display: block; margin-top: 0; }
  .pt-vehicle-row__meta { display: none; }   /* 항구·날짜가 독립 열로 분리됨 */
  .pt-vehicle-row__port {
    display: block;
    font-weight: var(--fw-regular);
    font-size: var(--fs-12-5);
    line-height: var(--lh-13);
    color: var(--ink-700);
  }
  .pt-vehicle-row__date {
    display: block;
    font-weight: var(--fw-medium);
    font-size: var(--fs-12-5);
    line-height: var(--lh-13);
    color: var(--ink-900);
  }
  .pt-vehicle-row__chevron {
    display: block;
    font-weight: var(--fw-regular);
    font-size: var(--fs-15);
    line-height: var(--lh-1);
    text-align: right;
    color: var(--ink-500);
  }

  /* stage-rail 등장 — SPEC §4 */
  .pt-stage-rail {
    display: flex;
    gap: 2px;                        /* SPEC 부록 A: 정규화 제외 권장 항목.
                                        --sp-1(4px)로 올리면 세그먼트(약 11.8px)
                                        대비 간격 비율이 2배가 되어 리터럴 유지 */
    width: 150px;                    /* SPEC */
    margin-top: var(--sp-2);         /* SPEC 7px */
  }
  .pt-stage-rail__seg {
    flex: 1 1 0;
    min-width: 0;
    height: 3px;                     /* SPEC */
    border-radius: var(--radius-hairline);
  }

  /* 본문 분할 — SPEC §1.4 */
  .pt-split {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-3);                /* SPEC 12px */
  }
  .pt-split__main { flex: 1; min-width: 0; }
  .pt-split__aside { flex: none; width: 340px; }   /* SPEC */

  .pt-vehicles { display: flex; flex-direction: column; }
}

/* ==========================================================================
   12. STEP E — 목록/상세/서류함/결제 화면 (모바일 우선)
   --------------------------------------------------------------------------
   토큰 변수만 사용한다. hex 리터럴 금지 규칙은 여기서도 동일하다.
   ========================================================================== */

/* --- 화면 상단 요약 한 줄 --------------------------------------------------- */
.pt-summary {
  font-weight: var(--fw-regular);
  font-size: var(--fs-12-5);
  line-height: var(--lh-13);
  color: var(--ink-700);
}

/* --- 필터 바 --------------------------------------------------------------- */
.pt-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
}
.pt-filterbar__label {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-9-5);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-12);
  text-transform: uppercase;
  color: var(--ink-500);
}
.pt-filterbar__spacer { flex: 1 1 auto; }

/* 상태 그룹 칩 */
.pt-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border: var(--bw-1) solid var(--ink-300);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: var(--lh-15);
  color: var(--nv-700);
  white-space: nowrap;
}
.pt-chip--is-on {
  background: var(--nv-900);
  border-color: var(--nv-900);
  color: var(--surface);
}
.pt-shell a.pt-chip:hover { text-decoration: none; }

/* 셀렉트 */
.pt-select {
  appearance: none;
  padding: var(--sp-1) var(--sp-3);
  border: var(--bw-1) solid var(--ink-300);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-15);
  color: var(--ink-900);
  cursor: pointer;
}

/* --- 일괄 액션 바 ---------------------------------------------------------- */
.pt-bulkbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-alt);
  border-bottom: var(--bw-1) solid var(--line);
}
.pt-check { width: 14px; height: 14px; flex: none; accent-color: var(--nv-900); }

/* --- 탭 (GET ?tab= 방식, JS 없음) ------------------------------------------ */
.pt-tabs {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  padding: 0 var(--sp-4);
  border-bottom: var(--bw-1) solid var(--line);
  background: var(--surface);
}
.pt-tabs__link {
  flex: none;
  padding: var(--sp-3) var(--sp-3);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12-5);
  line-height: var(--lh-1);
  color: var(--ink-700);
  white-space: nowrap;
}
.pt-tabs__link--is-on {
  font-weight: var(--fw-semibold);
  color: var(--nv-900);
  box-shadow: inset 0 -2px 0 var(--gd-600);
}
.pt-shell .pt-tabs__link:hover { text-decoration: none; color: var(--nv-900); }

/* --- 스펙 그리드 (차량 상세) ------------------------------------------------ */
.pt-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
}
.pt-specs__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-1) solid var(--line-subtle);
}
.pt-specs__k {
  font-weight: var(--fw-medium);
  font-size: var(--fs-11-5);
  line-height: var(--lh-13);
  letter-spacing: var(--ls-10);
  text-transform: uppercase;
  color: var(--ink-500);
}
.pt-specs__v {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12-5);
  line-height: var(--lh-13);
  text-align: right;
}

/* --- 사진 자리표시 --------------------------------------------------------- */
.pt-photo {
  height: 180px;
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, var(--ph-a) 0 7px, var(--ph-b) 7px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-10-5);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-08);
  color: var(--ink-500);
}

/* --- 11단계 세로 타임라인 --------------------------------------------------- */
.pt-timeline { display: flex; flex-direction: column; margin-top: var(--sp-3); }
.pt-timeline__row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  position: relative;
}
/* 점을 잇는 세로선 — 마지막 행은 제외 */
.pt-timeline__row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.pt-timeline__dot {
  width: 14px; height: 14px;
  border-radius: var(--radius-circle);
  border: var(--bw-1-5) solid var(--line);
  background: var(--surface);
  position: relative;
  z-index: 1;
}
.pt-timeline__row--done .pt-timeline__dot    { background: var(--pt-rail-fill, var(--ink-500)); border-color: var(--pt-rail-fill, var(--ink-500)); }
.pt-timeline__row--current .pt-timeline__dot { border-color: var(--pt-rail-fill, var(--ink-500)); border-width: 4px; }
.pt-timeline__label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12-5);
  line-height: var(--lh-13);
}
.pt-timeline__row--upcoming .pt-timeline__label { font-weight: var(--fw-regular); color: var(--ink-500); }
.pt-timeline__meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-11);
  line-height: var(--lh-13);
  color: var(--ink-500);
  white-space: nowrap;
}

/* --- 안내 블록 (기존 시스템으로 연결되는 탭) --------------------------------- */
.pt-notice {
  padding: var(--sp-4);
  background: var(--surface-alt);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
}
.pt-notice__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  line-height: var(--lh-12);
}
.pt-notice__body {
  margin-top: var(--sp-2);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12-5);
  line-height: var(--lh-14);
  color: var(--ink-700);
}

/* --- 빈 상태 --------------------------------------------------------------- */
.pt-empty {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  font-weight: var(--fw-regular);
  font-size: var(--fs-12-5);
  line-height: var(--lh-14);
  color: var(--ink-500);
}

/* --- 서류함 ---------------------------------------------------------------- */
.pt-doc-car {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bw-1) solid var(--line-subtle);
}
.pt-doc-car:last-child { border-bottom: 0; }
.pt-doc-car__head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.pt-doc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}
.pt-doc-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-13);
  border-bottom: var(--bw-1) solid var(--line-subtle);
}
.pt-doc-cell__name { color: var(--ink-700); }
.pt-doc-cell__state {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-10-5);
  letter-spacing: var(--ls-10);
  text-transform: uppercase;
}
.pt-doc-cell--ready   .pt-doc-cell__state { color: var(--stage-done); }
.pt-doc-cell--pending .pt-doc-cell__state { color: var(--ink-300); }

/* --- 결제 상태 배지 — .pt-stage 파생(같은 토큰 재사용) ----------------------- */
.pt-stage--unpaid  { background: var(--stage-purchase-bg); color: var(--stage-purchase); }
.pt-stage--partial { background: var(--stage-prep-bg);     color: var(--stage-prep); }
.pt-stage--paid    { background: var(--stage-done-bg);     color: var(--stage-done); }

/* --- 미결제 총액 대형 표시 -------------------------------------------------- */
.pt-outstanding { padding: var(--sp-4); }
.pt-outstanding__label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-10);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-10);
  text-transform: uppercase;
  color: var(--ink-500);
}
.pt-outstanding__value {
  margin-top: var(--sp-2);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-30);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-tight-2);
  font-variant-numeric: tabular-nums;
  color: var(--stage-purchase);
}

/* --- 인보이스 행 (모바일 카드형 → 데스크톱 표) ------------------------------- */
.pt-inv-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bw-1) solid var(--line-subtle);
}
.pt-inv-row:last-child { border-bottom: 0; }
.pt-inv-row__no { font-family: var(--ff-mono); font-weight: var(--fw-semibold); font-size: var(--fs-12-5); }
.pt-inv-row__amount {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pt-inv-row__meta {
  font-weight: var(--fw-regular);
  font-size: var(--fs-11-5);
  line-height: var(--lh-13);
  color: var(--ink-700);
}
.pt-inv-row__state { justify-self: end; }

/* --- 토스트 (portal.js) ----------------------------------------------------- */
.pt-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pt-tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  max-width: 88vw;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--nv-900);
  color: var(--surface);
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12-5);
  line-height: var(--lh-13);
  text-align: center;
}

@media (min-width: 768px) {
  .pt-specs { grid-template-columns: 1fr 1fr; }
  .pt-doc-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-1) var(--sp-4); }
  .pt-photo { height: 260px; }
  .pt-toast { bottom: var(--sp-6); }

  /* 인보이스: 카드형 → 표 */
  .pt-inv-row {
    grid-template-columns: 132px 1fr 120px 120px 108px;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
  }
  .pt-inv-row__meta  { font-size: var(--fs-12); }
  .pt-inv-row__state { justify-self: start; }
}

@media (min-width: 1200px) {
  .pt-doc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   13. STEP E-2 — Success Partner (design/02_success_partner/SPEC.md 실측)
   --------------------------------------------------------------------------
   ★ 신규 색 대체 규칙 — 목업에 기존 토큰에 없는 색 6종이 있으나 전부 RGB 거리
     3~7.6 으로 기존 토큰과 사실상 같은 색이다. portal-tokens.css 를 임의로
     늘리지 않기 위해 최근접 토큰으로 대체하고 지점마다 근거를 남긴다.
     승인되면 SPEC §4 의 제안대로 토큰을 신설해 교체하면 된다.
       #C4CDDB → --ink-300      (거리 4.4)  네이비 위 보조 텍스트
       #E3F1E7 → --stage-done-bg(거리 3.2)  Paid 배지 배경
       #FBF0DE → --stage-purchase-bg(3.0)   소멸카드 그라데이션 끝
       #FDF9F1 → --alert-banner-bg (7.6)    강조 혜택 카드 배경
       #FBF3E4 → --alert-banner-bg (7.0)    GOLD ONLY 뱃지 배경
       #F8F9FB → --surface-alt     (3.0)    잠금 열 배경
   ========================================================================== */

/* 타이포 3종(--fs-19 / --fs-26 / --ls-tight-15)은 2026-08-09 에
   portal-tokens.css 로 승격됐다. 여기 있던 지역 변수 정의는 제거함.
   색 6종은 승격하지 않고 최근접 토큰 대체를 유지한다(위 대체 규칙 참조). */

/* --- 등급 블록 (네이비 전면) ------------------------------------------------ */
.pt-tier-block {
  background: var(--nv-900);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6) var(--sp-5);   /* SPEC 20px 24px 18px */
  color: var(--surface);
}
.pt-tier-block__top { display: flex; flex-direction: column; gap: var(--sp-5); }
.pt-tier-block__meta {
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-1);
  color: var(--ink-400);
}
.pt-tier-block__h1 {
  margin: var(--sp-3) 0 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-19);                        /* SPEC 모바일 19px */
  line-height: var(--lh-12);
  letter-spacing: var(--ls-tight-1);
  max-width: 560px;                               /* SPEC */
  text-wrap: pretty;
}
.pt-tier-block__lead {
  margin: var(--sp-2) 0 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-13-5);
  line-height: var(--lh-15);
  color: var(--ink-400);
  max-width: 560px;
  text-wrap: pretty;
}
/* 등급 배지 — 네이비 블록 안에서는 배경이 한 단계 밝다 */
.pt-tier-block .pt-tier-badge { background: var(--nv-700); }

.pt-tier-block__perks-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-10);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-12);
  text-transform: uppercase;
  color: var(--ink-600);
}
/* gap:1px + 컨테이너 배경으로 헤어라인 구분선을 만드는 기법 (SPEC §2.1) */
.pt-tier-block__perks {
  margin-top: var(--sp-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--nv-600);
  border: var(--bw-1) solid var(--nv-600);
  border-radius: var(--radius);
  overflow: hidden;
}
.pt-perk { background: var(--nv-900); padding: var(--sp-3) var(--sp-3); }  /* SPEC 11px 13px */
.pt-perk__value {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-17);
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
  color: var(--surface);
}
.pt-perk__value--gold { color: var(--gd-400); }
.pt-perk__label {
  margin-top: var(--sp-1);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-135);
  color: var(--ink-300);            /* 목업 #C4CDDB — 대체 */
}

.pt-tier-block__tally {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--bw-1) solid var(--nv-600);
}

/* 탤리 네이비 변형 — 색만 바꾸고 구조는 .pt-tally 그대로 재사용 */
.pt-tally--on-navy .pt-tally__caption      { color: var(--ink-600); }
.pt-tally--on-navy .pt-tally__caption-goal { color: var(--gd-400); }
.pt-tally--on-navy .pt-tally__mark             { background: var(--nv-600); }
.pt-tally--on-navy .pt-tally__mark--is-filled  { background: var(--gd-400); }
.pt-tally--on-navy .pt-tally__today { background: var(--surface); }
.pt-tally--on-navy .pt-tally__scale { color: var(--ink-600); }
.pt-tally--on-navy .pt-tally__tick--today { color: var(--surface); }
.pt-tally--on-navy .pt-tally__tick--goal,
.pt-tally--on-navy .pt-tally__tick--goal-narrow { color: var(--gd-400); }

/* --- 크레딧 4분할 ----------------------------------------------------------- */
.pt-credit-grid {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pt-credit-cell { background: var(--surface); padding: var(--sp-3) var(--sp-4); }
.pt-credit-cell--primary { box-shadow: inset 0 3px 0 var(--gd-600); }   /* SPEC */
.pt-credit-cell__label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-10);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-10);
  text-transform: uppercase;
  color: var(--ink-500);
}
.pt-credit-cell--primary .pt-credit-cell__label { color: var(--gd-800); }
.pt-credit-cell__value {
  margin-top: var(--sp-2);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-22);
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
}
.pt-credit-cell--primary .pt-credit-cell__value {
  font-size: var(--fs-30);
  letter-spacing: var(--ls-tight-2);
}
.pt-credit-cell__value--pending { color: var(--stage-prep); }
.pt-credit-cell__foot {
  margin-top: var(--sp-2);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-13);
  color: var(--ink-700);
}
.pt-accrual-note {
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-14);
  color: var(--ink-700);
}

/* --- 소멸 카드 (앰버) ------------------------------------------------------- */
.pt-expiring {
  background: var(--surface);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pt-expiring__head {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);   /* SPEC 14px 18px 13px */
  /* 목업 #FDF6EA → #FBF0DE. 끝 색은 --stage-purchase-bg 로 대체 */
  background: linear-gradient(180deg, var(--alert-banner-bg) 0%, var(--stage-purchase-bg) 100%);
  border-bottom: var(--bw-1) solid var(--alert-banner-line);
}
.pt-expiring__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.pt-expiring__label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-10);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-10);
  text-transform: uppercase;
  color: var(--gd-800);
}
.pt-expiring__when {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-11);
  line-height: var(--lh-1);
  color: var(--gd-800);
}
.pt-expiring__figure { margin-top: var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-2); }
.pt-expiring__value {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-30);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-tight-2);
  color: var(--ink-900);
}
.pt-expiring__unit { font-weight: var(--fw-medium); font-size: var(--fs-13); line-height: var(--lh-12); color: var(--gd-800); }
.pt-expiring__body { padding: var(--sp-4) var(--sp-5) var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.pt-expiring__pitch { font-weight: var(--fw-semibold); font-size: var(--fs-13); line-height: var(--lh-135); text-wrap: pretty; }
.pt-expiring__list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.pt-expiring__item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-regular); font-size: var(--fs-12-5); line-height: var(--lh-13); color: var(--ink-700);
}
.pt-dot-gold { width: 5px; height: 5px; flex: none; border-radius: var(--radius-circle); background: var(--gd-600); }
.pt-expiring .pt-btn { margin-top: auto; width: 100%; }

/* --- 혜택 카탈로그 --------------------------------------------------------- */
.pt-catalog { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); }
.pt-catalog__col { background: var(--surface); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.pt-catalog__col--locked { background: var(--surface-alt); }   /* 목업 #F8F9FB — 대체 */
.pt-catalog__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pt-catalog__name { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-13); line-height: var(--lh-1); }
.pt-catalog__dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-xs); }
.pt-catalog__dot--prep { background: var(--stage-prep); }
.pt-catalog__dot--ship { background: var(--stage-ship); }
.pt-catalog__dot--gold { background: var(--gd-600); border-radius: 0; transform: rotate(45deg); }
.pt-catalog__items { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }

.pt-tier-pill {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-10);
  line-height: var(--lh-1);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
}
.pt-tier-pill--bronze { color: var(--ink-700); background: var(--page-bg); border: var(--bw-1) solid var(--line); }
.pt-tier-pill--silver { color: var(--nv-900);  background: var(--page-bg); border: var(--bw-1) solid var(--ink-300); }
/* 목업 #FBF3E4 → --alert-banner-bg 로 대체 */
.pt-tier-pill--gold   { color: var(--gd-800);  background: var(--alert-banner-bg); border: var(--bw-1) solid var(--alert-banner-line); }

.pt-benefit {
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-3);              /* SPEC 12px 13px */
  background: var(--surface);
  transition: border-color 120ms ease-out;
}
.pt-benefit__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.pt-benefit__name { font-weight: var(--fw-semibold); font-size: var(--fs-13-5); line-height: var(--lh-12); }
.pt-benefit__rate {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.pt-benefit__meta { margin-top: var(--sp-2); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pt-benefit__note { font-weight: var(--fw-regular); font-size: var(--fs-12); line-height: var(--lh-13); color: var(--ink-700); }
.pt-benefit__cap {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11-5);
  line-height: var(--lh-1);
  color: var(--ink-700);
  flex: none;
}
.pt-benefit .pt-btn { margin-top: var(--sp-3); width: 100%; padding: var(--sp-2); }
/* 강조 (125%) — 목업 배경 #FDF9F1 → --alert-banner-bg 로 대체 */
.pt-benefit--highlight { border-color: var(--gd-600); background: var(--alert-banner-bg); }
.pt-benefit--highlight .pt-benefit__rate { color: var(--gd-800); }
/* 잠금 — 이름/비율/설명/한도를 한 단계 낮추고 버튼을 없앤다 */
.pt-benefit--locked .pt-benefit__name { color: var(--ink-700); }
.pt-benefit--locked .pt-benefit__rate,
.pt-benefit--locked .pt-benefit__note,
.pt-benefit--locked .pt-benefit__cap  { color: var(--ink-500); }

/* 월 한도 소진 — 게이지가 아니라 문장 한 줄이다 (SPEC §2.4) */
.pt-capnote {
  margin-top: 2px;
  border: var(--bw-1) dashed var(--ink-300);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-3);
  background: var(--surface-alt);
}
.pt-capnote__main { font-weight: var(--fw-semibold); font-size: var(--fs-12-5); line-height: var(--lh-135); color: var(--ink-700); }
.pt-capnote__sub  { margin-top: var(--sp-1); font-weight: var(--fw-regular); font-size: var(--fs-12); line-height: var(--lh-135); color: var(--ink-500); }

/* --- Gold 잠금 블록 -------------------------------------------------------- */
.pt-unlock { margin-top: 2px; background: var(--nv-900); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.pt-unlock__head { display: flex; align-items: center; gap: var(--sp-2); }
.pt-unlock__mark { width: 7px; height: 7px; flex: none; background: var(--gd-400); transform: rotate(45deg); }
.pt-unlock__kicker {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-10);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-14);
  text-transform: uppercase;
  color: var(--gd-400);
}
.pt-unlock__text { margin-top: var(--sp-2); font-weight: var(--fw-semibold); font-size: var(--fs-13); line-height: var(--lh-135); color: var(--surface); text-wrap: pretty; }
/* 미니 탤리 — 큰 탤리와 같은 3px/4.5px 주기, 높이만 5px */
.pt-unlock__rail {
  position: relative;
  margin-top: var(--sp-3);
  height: 5px;
  border-radius: var(--radius-hairline);
  background: repeating-linear-gradient(90deg, var(--nv-600) 0 3px, transparent 3px 4.5px);
}
.pt-unlock__fill {
  position: absolute; left: 0; top: 0; height: 5px;
  width: var(--pt-unlock-pct, 47.3%);
  background: repeating-linear-gradient(90deg, var(--gd-400) 0 3px, transparent 3px 4.5px);
}
.pt-unlock__meta {
  margin-top: var(--sp-2);
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono); font-weight: var(--fw-medium);
  font-size: var(--fs-10); line-height: var(--lh-1);
  font-variant-numeric: tabular-nums; color: var(--ink-600);
}
.pt-unlock__meta strong { color: var(--surface); font-weight: var(--fw-medium); }

/* --- 클레임 행 ------------------------------------------------------------- */
.pt-claim-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bw-1) solid var(--line-subtle);
}
.pt-claim-row__title { font-weight: var(--fw-semibold); font-size: var(--fs-13-5); line-height: var(--lh-12); }
.pt-claim-row__sub   { margin-top: var(--sp-1); font-weight: var(--fw-regular); font-size: var(--fs-12); line-height: var(--lh-13); color: var(--ink-700); }
.pt-claim-row__amount {
  font-family: var(--ff-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-15); line-height: var(--lh-1);
  font-variant-numeric: tabular-nums; text-align: right;
}
.pt-claim-row__note { margin-top: var(--sp-1); font-weight: var(--fw-regular); font-size: var(--fs-11-5); line-height: var(--lh-1); color: var(--ink-500); }
/* 상태 배지 — .pt-stage 파생. Paid 는 목업 #E3F1E7 ≒ --stage-done-bg */
.pt-stage--awaiting { background: var(--stage-purchase-bg); color: var(--stage-purchase); }
.pt-section-foot {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-weight: var(--fw-regular); font-size: var(--fs-12-5); line-height: var(--lh-14); color: var(--ink-700);
}

/* --- 원장 ------------------------------------------------------------------ */
.pt-ledger-head, .pt-ledger-row {
  display: grid;
  grid-template-columns: 64px 1fr 92px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
}
.pt-ledger-head {
  border-bottom: var(--bw-1) solid var(--line);
  font-weight: var(--fw-medium); font-size: var(--fs-9-5); line-height: var(--lh-1);
  letter-spacing: var(--ls-12); text-transform: uppercase; color: var(--ink-500);
}
.pt-ledger-row { padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw-1) solid var(--line-subtle); }
.pt-ledger-row__date { font-family: var(--ff-mono); font-size: var(--fs-12); line-height: var(--lh-1); color: var(--ink-700); }
.pt-ledger-row__type { font-weight: var(--fw-semibold); font-size: var(--fs-11); line-height: var(--lh-1); color: var(--ink-700); }
.pt-ledger-row__type--earned { color: var(--stage-done); }
.pt-ledger-row__src { font-weight: var(--fw-medium); font-size: var(--fs-13); line-height: var(--lh-13); }
/* Earned 행만 밑줄 링크 — "Earned rows open the vehicle they came from" */
.pt-shell a.pt-ledger-row__link {
  color: var(--nv-700);
  border-bottom: var(--bw-1) solid var(--ink-300);
  justify-self: start;
  text-decoration: none;
}
.pt-shell a.pt-ledger-row__link:hover { border-color: var(--nv-900); text-decoration: none; }
.pt-ledger-row__amount {
  font-family: var(--ff-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-13-5); line-height: var(--lh-1);
  font-variant-numeric: tabular-nums; text-align: right;
}
.pt-ledger-row__amount--earned { color: var(--stage-done); }

@media (min-width: 768px) {
  .pt-tier-block { padding: var(--sp-5) var(--sp-6) var(--sp-5); }
  .pt-tier-block__top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--sp-8); }
  .pt-tier-block__h1 { font-size: var(--fs-26); letter-spacing: var(--ls-tight-15); line-height: var(--lh-11); }
  .pt-tier-block__perks-wrap { flex: none; width: 520px; }
  .pt-credit-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .pt-catalog { grid-template-columns: 1fr 1fr 1fr; }
  .pt-claim-row { grid-template-columns: 1fr 96px 168px 150px; gap: var(--sp-4); }
  .pt-claim-row__cta { justify-self: end; }
  .pt-ledger-head, .pt-ledger-row { grid-template-columns: 74px 74px 1fr 92px; }
}

@media (min-width: 1200px) {
  /* SPEC §2.2 — 크레딧 섹션은 사이드가 392px (대시보드 340px 과 다름) */
  .pt-split--credit .pt-split__aside { width: 392px; }
}

/* ==========================================================================
   접근성 — 모션 감소
   2026-08-08 확정: 트랜지션을 짧게 줄이는 게 아니라 완전히 제거한다.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pt-shell *,
  .pt-shell *::before,
  .pt-shell *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   14. 로그인 화면 (portal/login.php)
   모바일 우선. 입력 높이 48px+ / 글자 16px+ (iOS 가 16px 미만이면 확대한다).
   데스크톱 1200px+ 에서만 좌측 네이비 브랜드 패널이 나타난다.
   ========================================================================== */
.pt-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
}
.pt-login__brand { display: none; }

.pt-login__panel {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 20px 40px;
}
.pt-login__form-wrap { width: 100%; max-width: 420px; }

.pt-login__mobile-brand {
  padding: 8px 0 28px;
  text-align: center;
}
.pt-login__logo {
  font: 700 26px/1 var(--ff-display);
  letter-spacing: var(--ls-tight-15);
  color: var(--nv-900);
}
.pt-login__tagline {
  margin: 6px 0 0;
  font: 500 12px/1.4 var(--ff-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.pt-login__title {
  margin: 0 0 6px;
  font: 700 22px/1.25 var(--ff-display);
  letter-spacing: var(--ls-tight-15);
  color: var(--ink-900);
}
.pt-login__sub {
  margin: 0 0 24px;
  font: 400 15px/1.5 var(--ff-body);
  color: var(--ink-700);
}

.pt-login__form { display: block; }
.pt-login__label {
  display: block;
  margin: 0 0 6px;
  font: 600 13px/1.3 var(--ff-body);
  color: var(--ink-700);
}
.pt-login__input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: 400 16px/1.3 var(--ff-body);   /* 16px 미만 금지 — iOS 자동 확대 */
  color: var(--ink-900);
  -webkit-appearance: none;
  appearance: none;
}
.pt-login__input:focus {
  outline: none;
  border-color: var(--nv-600);
  box-shadow: 0 0 0 3px rgba(36, 57, 95, .12);
}
.pt-login__submit {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 6px 0 0;
  padding: 15px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--nv-900);
  color: var(--surface);
  font: 600 16px/1.2 var(--ff-body);
  letter-spacing: .01em;
  cursor: pointer;
}
.pt-login__submit:hover { background: var(--nv-700); }
.pt-login__submit:active { transform: translateY(1px); }

.pt-login__help {
  margin: 32px 0 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.pt-login__help-title {
  margin: 0 0 4px;
  font: 600 14px/1.3 var(--ff-body);
  color: var(--ink-900);
}
.pt-login__help-text {
  margin: 0 0 14px;
  font: 400 14px/1.55 var(--ff-body);
  color: var(--ink-700);
}
.pt-login__help-link {
  display: block;
  min-height: 44px;                    /* 터치 타깃 */
  padding: 12px 0 0;
  font: 600 15px/1.3 var(--ff-body);
  color: var(--nv-600);
  text-decoration: none;
}
.pt-login__help-link:hover { text-decoration: underline; }

@media (min-width: 1200px) {
  .pt-login { flex-direction: row; }

  .pt-login__brand {
    display: flex;
    flex: 0 0 46%;
    align-items: center;
    padding: 64px 56px;
    background: var(--nv-900);
    color: var(--surface);
  }
  .pt-login__brand-inner { max-width: 460px; }
  .pt-login__brand .pt-login__logo    { color: var(--surface); font-size: 30px; }
  .pt-login__brand .pt-login__tagline { color: var(--ink-400); }

  .pt-login__headline {
    margin: 40px 0 28px;
    font: 700 38px/1.2 var(--ff-display);
    letter-spacing: var(--ls-tight-15);
    color: var(--surface);
  }
  .pt-login__points { margin: 0; padding: 0; list-style: none; }
  .pt-login__points li {
    position: relative;
    margin: 0 0 14px;
    padding-left: 22px;
    font: 400 15px/1.5 var(--ff-body);
    color: var(--ink-300);
  }
  .pt-login__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gd-400);
  }

  .pt-login__mobile-brand { display: none; }
  .pt-login__panel { align-items: center; padding: 64px 56px; }
  .pt-login__title { font-size: 26px; }
}

/* ==========================================================================
   15. 폼 (claim_new / claim / consignee / requests / payments 상세)
   모바일 우선. 입력 48px+ / 16px+ (iOS 확대 방지). Phase D.
   ========================================================================== */
.pt-steps { display: flex; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.pt-steps__item {
  flex: 1; padding: 8px 4px; border-radius: 8px; background: var(--page-bg);
  font: 600 12px/1.3 var(--ff-body); color: var(--ink-500); text-align: center;
}
.pt-steps__item--on { background: var(--nv-900); color: var(--surface); }

.pt-form { display: block; margin: 0; }
.pt-form__lead  { margin: 0 0 18px; font: 400 15px/1.55 var(--ff-body); color: var(--ink-700); }
.pt-form__note  { margin: 16px 0 0;  font: 400 14px/1.55 var(--ff-body); color: var(--ink-700); }
.pt-form__hint  { margin: -10px 0 18px; font: 400 13px/1.5 var(--ff-body); color: var(--ink-500); }
.pt-form__label { display: block; margin: 0 0 6px; font: 600 13px/1.3 var(--ff-body); color: var(--ink-700); }

.pt-form__input, .pt-form__textarea {
  display: block; width: 100%; min-height: 52px; margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font: 400 16px/1.4 var(--ff-body); color: var(--ink-900);
  -webkit-appearance: none; appearance: none;
}
.pt-form__textarea { min-height: 108px; resize: vertical; }
.pt-form__input:focus, .pt-form__textarea:focus {
  outline: none; border-color: var(--nv-600); box-shadow: 0 0 0 3px rgba(36, 57, 95, .12);
}
.pt-form__input[type="file"] { padding: 12px; font-size: 15px; }

.pt-form__error, .pt-form__ok {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
  font: 500 14px/1.5 var(--ff-body);
}
.pt-form__error { background: #FDECEC; color: #A32222; }
.pt-form__ok    { background: var(--stage-done-bg); color: #1C6B36; }

.pt-form__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.pt-form__actions .pt-btn { min-height: 48px; display: inline-flex; align-items: center; }

.pt-form__group { margin: 0 0 22px; }
.pt-form__group-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font: 600 12px/1.3 var(--ff-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500);
}
.pt-form__lock {
  padding: 3px 8px; border-radius: 999px; background: var(--page-bg);
  font: 600 11px/1.4 var(--ff-body); letter-spacing: .04em; color: var(--ink-600);
}

.pt-choice {
  display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px;
  min-height: 56px; margin: 0 0 8px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  cursor: pointer;
}
.pt-choice__radio { grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; }
.pt-choice__name  { font: 600 15px/1.3 var(--ff-body); color: var(--ink-900); }
.pt-choice__meta  { font: 400 13px/1.3 var(--ff-body); color: var(--ink-500); }
.pt-choice--off   { opacity: .5; cursor: not-allowed; }

.pt-form__review { margin: 0 0 4px; }
.pt-form__review dt {
  margin: 14px 0 2px; font: 600 12px/1.3 var(--ff-body);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500);
}
.pt-form__review dd { margin: 0; font: 400 15px/1.5 var(--ff-body); color: var(--ink-900); }

.pt-btn--off { opacity: .55; cursor: not-allowed; }

.pt-req-list { display: block; }
.pt-req-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.pt-req-row__kind { font: 600 15px/1.3 var(--ff-body); color: var(--ink-900); }
.pt-req-row__ref  { grid-column: 1 / -1; font-size: 12px; color: var(--ink-500); word-break: break-all; }
.pt-req-row__date { font: 400 13px/1.3 var(--ff-body); color: var(--ink-500); }

@media (min-width: 768px) {
  .pt-form__form-wrap, .pt-form { max-width: 620px; }
  .pt-req-row { grid-template-columns: 180px 1fr 120px 110px; align-items: center; }
  .pt-req-row__ref { grid-column: auto; }
}