/* ══════════════════════════════════════════════════════════════════════
   견적 v5 — 디자인 토큰 (데모 :root 에서 떠 온 것)

   ⚠ :root 가 아니라 #view-plan / #planBar 에 깐다. 문서 전체에 두면 다른
     페이지의 같은 이름 토큰(--gutter·--wrap 등)까지 덮어써 사이트가 흔들린다.

   ⚠ 이 파일이 없으면 글자 크기가 통째로 어긋난다. plan.css 가
     font-size:var(--fs-h2) 처럼 토큰으로만 적혀 있어, 값이 없으면 브라우저
     기본 크기로 떨어진다 — 한때 그래서 데모와 폰트가 달라 보였다.

   ⚠ 화면 폭에 따라 값이 바뀌는 토큰이 있다(@media). 차례를 지킨다.
   ══════════════════════════════════════════════════════════════════════ */

#view-plan,#planBar,#view-product,#productBar,#view-buy,#buyBar,#view-result,#resultBar{
  --color-brand-primary:#EE4947; --color-brand-hover:#D93D3B; --color-brand-sub:#FFF0EF; --color-brand-border:rgba(238,73,71,.22);
  --color-grey-50:#FAFAFA; --color-grey-75:#F2F2F2; --color-grey-100:#EEEEEE; --color-grey-200:#DDDDDD;
  --color-grey-400:#999999; --color-grey-600:#666666; --color-grey-900:#222222;
  --color-bg-page:#FFFFFF; --color-bg-surface:#FAFAFA; --color-bg-surface-2:#EFEFEF; --color-bg-hover:#F6F6F6; --color-bg-placeholder:var(--color-bg-surface-2);
  --color-text-primary:#222222; --color-text-secondary:#666666; --color-text-disabled:#999999; --color-text-faint:#BBBBBB;
  --color-border-default:#DDDDDD; --color-border-light:#EEEEEE;
  --color-bg-dark:#111111; --color-bg-dark-soft:#1A1A1A; --color-bg-footer:#333333; --color-text-inverse:#FFFFFF;
  --color-border-on-dark:rgba(255,255,255,.12);
  --color-button-primary:var(--color-brand-primary); --color-button-hover:var(--color-brand-hover);
  --track:#F1F1F3; /* 세그먼트 트랙 — 프로덕션 plan-toggle 실측값 */
  --mood-beige:#CDA973; --mood-white:#DEDEDE; --mood-walnut:#8F8070;
  --font-family-base:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --radius-card:15px; --radius-button:12px; --radius-input:6px; --radius-search:var(--radius-button);
  --transition-fast:150ms ease; --transition-base:250ms ease; --ease:cubic-bezier(.22,1,.36,1);
  --ls:-1px; --ls-sm:-.5px;
  /* 시안 제안값 — 레이아웃·글자 크기 */
  --wrap:1120px; --gutter:20px; --sec-pad:80px;
  --fs-display:28px; --fs-h2:20px; --fs-eyebrow:14px; --fs-lead:13px; --fs-stat:28px;
}
#view-plan,#planBar,#view-product,#productBar,#view-buy,#buyBar,#view-result,#resultBar{
  --c-w2b:var(--color-bg-page); --c-b2w:var(--color-text-primary); --c-w2w:#FFFFFF;
  --c-grey-1:var(--color-text-secondary); --c-grey-2:var(--color-border-light);
  --c-red-1:var(--color-brand-primary); --hover:#F6F6F6;
  /* 페이지 CSS 축약 별칭 — 라이브 .index-v4-demo 가 참조하는 이름 */
  --red:var(--color-brand-primary); --red-hover:var(--color-brand-hover); --red-sub:var(--color-brand-sub);
  --ink:var(--color-text-primary); --sub:var(--color-text-secondary); --mute:var(--color-text-disabled);
  --faint:var(--color-text-faint); --line:var(--color-border-light); --line-soft:var(--color-grey-75);
  --surface:var(--color-bg-surface); --surface-2:var(--color-bg-surface-2);
}
@media (min-width:768px){
  #view-plan,#planBar,#view-product,#productBar,#view-buy,#buyBar,#view-result,#resultBar{ --gutter:32px; --sec-pad:104px; --fs-display:38px; --fs-h2:20px; --fs-eyebrow:14px; --fs-lead:16px; --fs-stat:38px; }
}
@media (min-width:1024px){
  #view-plan,#planBar,#view-product,#productBar,#view-buy,#buyBar,#view-result,#resultBar{ --gutter:40px; --sec-pad:128px; --fs-display:38px; --fs-h2:20px; --fs-eyebrow:14px; --fs-lead:16px; --fs-stat:38px; }
}
@media (max-width:767px){
  #view-plan,#planBar,#view-product,#productBar,#view-buy,#buyBar,#view-result,#resultBar{ --sec-pad:56px; }
}
#view-plan,#planBar,#view-product,#productBar,#view-buy,#buyBar,#view-result,#resultBar{--hh:56px;--barh:72px}
@media (min-width:768px){
  #view-plan,#planBar,#view-product,#productBar,#view-buy,#buyBar,#view-result,#resultBar{ --fs-h2:24px; }
}
@media (min-width:1024px){
  #view-plan,#planBar,#view-product,#productBar,#view-buy,#buyBar,#view-result,#resultBar{ --fs-h2:28px; }
}

/* ── 글자 바탕 — 데모의 body 와 같게 맞춘다 ──────────────────────────
   ⚠ 이것이 없으면 크기가 통째로 어긋난다. 데모 body 는 16px/1.3 에
     letter-spacing:var(--ls) 인데 우리 테마 body 는 15px 이라, 떠 온 규칙의
     상대 크기(em·%)와 줄간격이 전부 그 차이만큼 밀린다.
   ⚠ body 를 고치지 않는다 — 다른 페이지가 15px 를 쓰고 있다. 우리 화면
     안에서만 바탕을 다시 깐다. */
#view-plan, #planBar, #view-product, #productBar, #view-buy, #buyBar, #view-result, #resultBar {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-primary);
  /* ⚠ !important 로 되받는다. common.css:10 이
       `body,div,p,h1…{letter-spacing:-0.5px !important}` 를 전역으로 박아
       두어, 같은 무게가 아니면 이긴다. page-index.css 도 같은 방식으로
       푼다. 데모 본문은 -1px 라 안 되받으면 글자 폭이 누적으로 벌어진다. */
  letter-spacing: var(--ls) !important;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

/* 자간을 스스로 정하지 않는 칸 — 부모(-1px)를 물려받게 되돌린다.
   ⚠ common.css:10 이 div·section·p·span 까지 -0.5px !important 로 짚어,
     가만 두면 물려받지 못하고 그 값에 걸린다. 같은 무게로 되받는다.
   ⚠ 여기 적은 것은 plan.css 가 자간을 안 정한 자리뿐이다. 정한 자리는
     그쪽도 !important 라 뒤에 오는 plan.css 가 이긴다. */
#view-plan .search-header,#view-product .search-header,#view-buy .search-header,#view-result .search-header,
#view-plan .pick-opt,#view-product .pick-opt,#view-buy .pick-opt,#view-result .pick-opt,
#view-plan .pick-opt__price,#view-product .pick-opt__price,#view-buy .pick-opt__price,#view-result .pick-opt__price,
#view-plan .pick-gal__slide,#view-product .pick-gal__slide,#view-buy .pick-gal__slide,#view-result .pick-gal__slide,
#view-plan .pcmp__labels,#view-product .pcmp__labels,#view-buy .pcmp__labels,#view-result .pcmp__labels,
#planBar .actbar__in,#productBar .actbar__in,#buyBar .actbar__in,#resultBar .actbar__in {
  letter-spacing: inherit !important;
}