/* ==========================================================================
   내폰얼마 — 디자인 시스템
   토큰에 없는 값은 쓰지 않는다. (08_ARCHITECTURE_AND_STACK.md 6장)
   ========================================================================== */

:root {
  /* 색 — 뉴트럴 */
  --c-bg:        #ffffff;
  --c-bg-soft:   #f6f7f9;
  --c-bg-sunken: #eef0f4;
  --c-line:      #e3e6ec;
  --c-line-soft: #eef0f4;

  --c-ink:       #0d1425;   /* 본문 */
  --c-ink-2:     #4a5364;   /* 보조 */
  --c-ink-3:     #7c8595;   /* 캡션 */
  --c-ink-inv:   #ffffff;

  /* 색 — 브랜드 */
  --c-navy:      #0f1b3d;
  --c-navy-2:    #1b2a53;
  --c-brand:     #1f56e3;
  --c-brand-2:   #1745be;
  --c-brand-soft:#eaf0ff;

  /* 색 — 상태 */
  --c-ok:        #0f7a52;
  --c-ok-soft:   #e6f5ee;
  --c-warn:      #9a5b00;
  --c-warn-soft: #fff4e0;
  --c-danger:    #b3261e;
  --c-danger-soft:#fdecea;

  /* 라운드 — 4단계만 */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* 그림자 — 2단계만 */
  --sh-card:    0 1px 2px rgba(13,20,37,.05), 0 4px 16px rgba(13,20,37,.06);
  --sh-overlay: 0 8px 32px rgba(13,20,37,.16);

  /* 간격 스케일 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* 모션 — duration 2종, easing 1종 */
  --d-micro: 150ms;
  --d-move:  250ms;
  --ease:    cubic-bezier(.4, 0, .2, 1);

  --maxw: 1120px;
  --header-h: 64px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Pretendard, 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', system-ui, sans-serif;
  /* 본문 17px — 40~50대 고객이 폰으로 보는 화면이다. 16px 은 작다는 피드백 반영 */
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* 숫자는 항상 고정폭 — 금액 정렬 */
.num, td.num, .price, .amount { font-variant-numeric: tabular-nums; }

/* 포커스 링 — 접근성. 절대 제거하지 않는다 */
:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* ---------- 레이아웃 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-4); }
.section { padding: var(--s-8) 0; }
.section--soft { background: var(--c-bg-soft); }
.stack > * + * { margin-top: var(--s-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 타이포 ---------- */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--c-brand); text-transform: uppercase;
}
.h1 { font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.h2 { font-size: 26px; font-weight: 800; line-height: 1.3;  letter-spacing: -.02em; }
.h3 { font-size: 19px; font-weight: 700; line-height: 1.4; }
.h4 { font-size: 16px; font-weight: 700; }
.lead   { font-size: 18px; color: var(--c-ink-2); }
.muted  { color: var(--c-ink-2); }
.caption{ font-size: 14px; color: var(--c-ink-3); line-height: 1.6; }
.center { text-align: center; }

@media (min-width: 768px) {
  .h1 { font-size: 46px; }
  .h2 { font-size: 32px; }
  .section { padding: var(--s-9) 0; }
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-lg);
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background-color var(--d-micro) var(--ease),
              border-color var(--d-micro) var(--ease),
              color var(--d-micro) var(--ease);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary   { background: var(--c-brand); color: #fff; }
.btn--primary:hover:not(:disabled)  { background: var(--c-brand-2); }
.btn--primary:active:not(:disabled) { background: #1239a0; }

.btn--navy      { background: var(--c-navy); color: #fff; }
.btn--navy:hover:not(:disabled)  { background: var(--c-navy-2); }

.btn--ghost     { background: #fff; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover:not(:disabled) { border-color: var(--c-ink-3); background: var(--c-bg-soft); }

.btn--quiet     { background: transparent; color: var(--c-ink-2); min-height: 40px; padding: 0 var(--s-3); }
.btn--quiet:hover { color: var(--c-ink); background: var(--c-bg-soft); }

.btn--lg  { min-height: 56px; padding: 0 var(--s-6); font-size: 17px; }
.btn--sm  { min-height: 38px; padding: 0 var(--s-3); font-size: 14px; border-radius: var(--r-md); }

/* 모바일 터치 영역 — 손가락으로 정확히 누를 수 있는 최소 크기는 44px 다.
   38px 짜리 작은 버튼도 모바일에서는 44px 로 키운다. */
@media (max-width: 899px) {
  .btn--sm    { min-height: 44px; padding: 0 var(--s-4); font-size: 15px; }
  .btn--quiet { min-height: 44px; }
  .hd__nav a  { padding: 12px; }
}
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row--center { justify-content: center; }

/* ---------- 카드 ---------- */
.card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-xl); padding: var(--s-5);
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--sh-card); border-color: var(--c-line-soft); }
.card--link { transition: border-color var(--d-micro) var(--ease); }
.card--link:hover { border-color: var(--c-brand); }

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 배지 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5;
}
.badge--ok     { background: var(--c-ok-soft);     color: var(--c-ok); }
.badge--warn   { background: var(--c-warn-soft);   color: var(--c-warn); }
.badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.badge--brand  { background: var(--c-brand-soft);  color: var(--c-brand-2); }
.badge--neutral{ background: var(--c-bg-sunken);   color: var(--c-ink-2); }

/* ---------- 데모/샘플 표시 ---------- */
.demo-bar {
  background: var(--c-navy); color: #b9c6e2;
  font-size: 12.5px; text-align: center; padding: 7px var(--s-4); line-height: 1.5;
  letter-spacing: -.01em;
}
.demo-bar strong {
  color: #fff; font-weight: 700;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 1px 8px; margin-right: 8px; font-size: 11.5px; letter-spacing: .04em;
}
/* 모바일에서는 한 줄로 줄인다. 두 줄이 되면 sticky 헤더에 가려 잘린다. */
@media (max-width: 720px) {
  .demo-bar { font-size: 12.5px; padding: 8px 12px; white-space: nowrap; }
  .demo-bar__more { display: none; }
}
.sample-note {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--c-warn-soft); color: var(--c-warn);
  font-size: 12.5px; font-weight: 700;
}

/* ---------- 헤더 ---------- */
/* 데모 안내 바 + 헤더를 하나로 묶어 화면 상단에 고정한다.
   ★ sticky 는 '부모 높이 안에서만' 붙는다.
     안쪽 래퍼에 걸면 부모가 헤더 높이뿐이라 붙을 공간이 없어 그냥 밀려 올라간다.
     그래서 body 의 직계 자식인 #siteHeader 에 건다. */
/* ── 모바일 하단 고정 액션 바 ──────────────────────────────────────────
   데스크톱에서는 아예 렌더링하지 않는다(display:none).
   iOS 홈 인디케이터를 피하려고 safe-area-inset 을 더한다.          */
.mbar { display: none; }

@media (max-width: 899px) {
  .mbar {
    display: flex; align-items: center; gap: var(--s-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 10px var(--s-3) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 -4px 20px rgba(13, 20, 37, .07);
  }
  .mbar .btn { flex: 1; min-height: 52px; font-size: 16px; }
  .mbar__amt { flex: 1.15; min-width: 0; padding-left: 4px; }
  .mbar__label { display: block; font-size: 11.5px; font-weight: 700; color: var(--c-ink-3); }
  .mbar__value {
    display: block; font-size: 19px; font-weight: 800; color: var(--c-brand-2);
    letter-spacing: -.02em; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 바가 푸터 마지막 줄을 가리지 않도록 본문 아래를 비워둔다 */
  body { padding-bottom: 84px; }
}

/* ── 플로팅 상담 버튼 ────────────────────────────────────────────────
   중고폰은 "이거 팔려도 되나?" 같은 질문이 전환 직전에 터진다.
   전화·카톡을 항상 화면에 띄워두면 그 순간을 놓치지 않는다.        */
.fab {
  position: fixed; right: 14px; z-index: 65;
  bottom: 96px;                       /* 하단 고정 바 위에 올린다 */
  display: grid; gap: 10px;
}
@media (min-width: 900px) { .fab { bottom: 24px; right: 24px; } }
.fab a {
  width: 50px; height: 50px; border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(13, 20, 37, .18);
  transition: transform var(--d-fast, 160ms) var(--ease-out);
}
.fab a:active { transform: scale(.94); }
.fab a svg { width: 22px; height: 22px; display: block; }
.fab__top  { background: var(--c-navy); color: #fff; }
.fab__tel  { background: var(--c-brand); color: #fff; }
.fab__talk { background: #FEE500; color: #191600; }

/* 여백 — 모바일에서 섹션이 붙어 보이면 답답하다. 숨 쉴 틈을 준다 */
@media (max-width: 899px) {
  .section { padding: var(--s-7) 0; }
  .card { border-radius: var(--r-xl); padding: var(--s-5); }
}

#siteHeader { position: sticky; top: 0; z-index: 60; }
.site-top { display: block; }

.hd { background: rgba(255,255,255,.94);
      backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--c-line); }
.hd__in { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); }
.hd__logo { display: flex; align-items: center; gap: var(--s-2); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.hd__mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--c-navy);
  color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.hd__nav { display: none; gap: var(--s-1); margin-left: var(--s-4); }
.hd__nav a { padding: 8px 12px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; color: var(--c-ink-2);
             white-space: nowrap; }
.hd__nav a:hover { color: var(--c-ink); background: var(--c-bg-soft); }
.hd__nav a[aria-current="page"] { color: var(--c-brand); background: var(--c-brand-soft); }
/* 메뉴 글자와 전화번호가 두 줄로 접히면 헤더 높이가 무너져 보인다.
   글자는 절대 줄바꿈시키지 않고, 자리가 모자라면 메뉴 쪽이 먼저 줄어들게 한다.
   오른쪽 버튼 묶음은 손님이 실제로 누르는 것들이라 줄이지 않는다. */
.hd__nav   { flex: 0 1 auto; min-width: 0; }
.hd__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); flex: none; }
.hd__right .btn { white-space: nowrap; }
.hd__tel { display: none; font-weight: 800; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.hd__burger { display: inline-flex; }
.hd__in > * { min-width: 0; }          /* flex 자식이 줄어들다 글자가 세로로 깨지는 것 방지 */
.hd__right .btn { white-space: nowrap; flex: none; }

/* 모바일 헤더는 '로고 + 메뉴' 두 개만 둔다.
   좁은 화면에 로고·거래조회·CTA·메뉴 넷을 밀어 넣으면 flex 가 버튼을 줄이다가
   글자가 한 자씩 세로로 접힌다(실제로 그렇게 깨졌다).
   거래조회와 주 CTA 는 하단 고정 바(.mbar)에 이미 있으므로 여기서는 감춘다. */
@media (max-width: 999px) {
  .hd__right .btn--primary,
  .hd__right .btn--quiet { display: none; }
  /* 로그인 표시도 같은 이유로 감춘다. 모바일에서는 하단 바와 메뉴가 그 자리를 한다. */
  .hd__auth { display: none; }
}

/* 로그인 표시 — 로그인 전에는 버튼 하나, 후에는 이름 + 로그아웃 */
.hd__auth { display: inline-flex; align-items: center; gap: var(--s-2); }
.hd__who {
  font-size: 14px; font-weight: 700; color: var(--c-ink-2);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd__pic {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--c-line); flex: none;
}
@media (min-width: 1000px) {
  .hd__nav { display: flex; }
  .hd__tel { display: inline-flex; }
  .hd__burger { display: none; }
}
.hd__mobile { display: none; border-top: 1px solid var(--c-line); background: #fff; padding: var(--s-3) 0 var(--s-4); }
.hd__mobile.is-open { display: block; }
.hd__mobile a { display: block; padding: 12px var(--s-4); border-radius: var(--r-md); font-weight: 600; }
.hd__mobile a:hover { background: var(--c-bg-soft); }

/* 메뉴 안의 로그인 줄. 메뉴 항목들과 섞이지 않게 선으로 끊어 준다.
   넓은 화면에서는 헤더 오른쪽에 이미 있으므로 이 블록 자체가 안 보인다. */
.hd__mauth { margin-top: var(--s-3); padding: var(--s-3) var(--s-4) 0; border-top: 1px solid var(--c-line); }
.hd__mwho  { display: block; margin-bottom: var(--s-2); font-size: 14px; font-weight: 700; color: var(--c-ink-2); }
/* .hd__mobile a 규칙(display:block)이 버튼보다 우선순위가 높아
   버튼이 한 글자 폭으로 쪼그라들 수 있다. 이 사이트에서 이미 한 번 그렇게 깨졌다.
   여기서 못을 박아 둔다. */
.hd__mauth .btn { display: flex; width: 100%; justify-content: center; white-space: nowrap; }
@media (min-width: 1000px) { .hd__mauth { display: none; } }

/* ---------- 히어로 ---------- */
.hero { background: linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%); padding: var(--s-7) 0 var(--s-8); }
.hero__in { display: grid; gap: var(--s-6); }
.hero h1 em { font-style: normal; color: var(--c-brand); }
.hero__note { font-size: 13px; color: var(--c-ink-3); }
@media (min-width: 900px) {
  .hero { padding: var(--s-8) 0 var(--s-9); }
  .hero__in { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s-7); }
}

/* 가격 카드 */
.pricecard { background: var(--c-navy); color: #fff; border-radius: var(--r-xl); padding: var(--s-5); }
.pricecard__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pricecard__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #9fb0d8; }
.pricecard__list { margin-top: var(--s-4); display: grid; gap: 2px; }
.pricecard__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 12px 14px; border-radius: var(--r-md);
  transition: background-color var(--d-micro) var(--ease);
}
.pricecard__row:hover { background: rgba(255,255,255,.07); }
.pricecard__name { font-size: 14px; font-weight: 600; }
.pricecard__cap  { font-size: 12px; color: #9fb0d8; }
.pricecard__amt  { font-size: 17px; font-weight: 800; }
.pricecard__foot { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.12);
                   font-size: 12px; color: #9fb0d8; }

/* ---------- 신뢰 요소 ---------- */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (min-width: 900px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-4); }
.trust__t { font-weight: 700; font-size: 15px; }
.trust__d { font-size: 13px; color: var(--c-ink-2); margin-top: 2px; }

/* ---------- 스텝 ---------- */
.steps { counter-reset: step; display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--c-line); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -13px; left: 0; background: #fff; padding-right: 10px;
  font-size: 13px; font-weight: 800; color: var(--c-brand); font-variant-numeric: tabular-nums;
}
.step__t { font-weight: 700; }
.step__d { font-size: 14px; color: var(--c-ink-2); margin-top: 4px; }

/* ---------- 폼 ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field__label { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.req { color: var(--c-danger); font-size: 13px; }
.field__help { font-size: 12.5px; color: var(--c-ink-3); }
.field__err  { font-size: 12.5px; color: var(--c-danger); font-weight: 600; display: none; }
.field.is-invalid .field__err { display: block; }
.field.is-invalid .input, .field.is-invalid .select { border-color: var(--c-danger); }

.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease);
}
.textarea { min-height: 108px; resize: vertical; padding-top: 12px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft);
}
.input::placeholder, .textarea::placeholder { color: #a9b1bf; }
.input:disabled, .select:disabled { background: var(--c-bg-sunken); color: var(--c-ink-3); cursor: not-allowed; }
.select { appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%234a5364' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }

.row { display: grid; gap: var(--s-2); }
.row--2 { grid-template-columns: 1fr; }
.row--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .row--2 { grid-template-columns: 1fr 1fr; }
  .row--3 { grid-template-columns: 160px 1fr 1fr; }
  .row--addr { grid-template-columns: 1fr auto; }
}

/* 신청서 라벨 좌측 배치 (데스크톱) */
.frow { display: grid; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line-soft); }
.frow:last-of-type { border-bottom: 0; }
@media (min-width: 768px) {
  .frow { grid-template-columns: 148px 1fr; gap: var(--s-4); align-items: start; }
  .frow > .field__label { padding-top: 12px; }
}

/* 선택형 버튼 (라디오 대체) */
.choice { display: grid; gap: var(--s-2); }
.choice--2 { grid-template-columns: 1fr 1fr; }
.choice--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice__btn {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 14px 16px; min-height: 52px; text-align: left;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  cursor: pointer; font-weight: 600;
  transition: border-color var(--d-micro) var(--ease), background-color var(--d-micro) var(--ease);
}
.choice__btn:hover { border-color: var(--c-ink-3); }
.choice__btn[aria-pressed="true"] {
  border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-2);
}
.choice__btn small { font-weight: 500; font-size: 12.5px; color: var(--c-ink-3); }
.choice__btn[aria-pressed="true"] small { color: var(--c-brand-2); }

/* 체크박스 */
.check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c-brand); flex: none; }
.check__t { font-size: 14.5px; line-height: 1.55; }
.check__t b { font-weight: 700; }

.agree-box { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-2) var(--s-4); }
.agree-box .check + .check { border-top: 1px solid var(--c-line-soft); }
.agree-all { background: var(--c-bg-soft); border-radius: var(--r-md); padding: 2px var(--s-3); margin: var(--s-2) 0; }

/* ---------- 안내 박스 ---------- */
.note {
  border-radius: var(--r-lg); padding: var(--s-4);
  font-size: 13.5px; line-height: 1.7;
}
.note--info   { background: var(--c-brand-soft); color: #1b3a94; }
.note--warn   { background: var(--c-warn-soft);  color: #7a4700; }
.note--danger { background: var(--c-danger-soft);color: #8c1d18; }
.note--plain  { background: var(--c-bg-soft);    color: var(--c-ink-2); }
.note ul { list-style: none; }
.note li { position: relative; padding-left: 14px; }
.note li::before { content: "·"; position: absolute; left: 4px; font-weight: 700; }
.note strong { font-weight: 700; }

/* ---------- 견적서 ---------- */
.quote { border: 1px solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; background: #fff; }
.quote__hd { padding: var(--s-5); border-bottom: 1px solid var(--c-line); background: var(--c-bg-soft); }
.quote__body { padding: var(--s-5); }
.quote__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 9px 0; }
.quote__line + .quote__line { border-top: 1px dashed var(--c-line-soft); }
.quote__line .l { font-size: 14.5px; color: var(--c-ink-2); }
.quote__line .r { font-size: 15px; font-weight: 600; }
.quote__line--minus .r { color: var(--c-danger); }
.quote__line--plus  .r { color: var(--c-ok); }
.quote__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 2px solid var(--c-ink);
}
.quote__total .l { font-size: 16px; font-weight: 700; }
.quote__total .r { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.quote__meta { display: grid; gap: 6px; margin-top: var(--s-4); padding-top: var(--s-4);
               border-top: 1px solid var(--c-line-soft); font-size: 13px; color: var(--c-ink-2); }
.quote__meta > div { display: flex; justify-content: space-between; gap: var(--s-3); }
.quote__meta > div > span:first-child { color: var(--c-ink-3); }

/* 모바일에서만 줄바꿈 */
.mob-br { display: inline; }
@media (min-width: 768px) { .mob-br { display: none; } }

/* ---------- 위저드 ---------- */
.wiz__bar { display: flex; gap: 6px; margin-bottom: var(--s-5); }
.wiz__seg { flex: 1; height: 4px; border-radius: 999px; background: var(--c-bg-sunken); }
.wiz__seg.is-done { background: var(--c-brand); }
.wiz__step { display: none; }
.wiz__step.is-active { display: block; }
.wiz__q + .wiz__q { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--c-line-soft); }
.wiz__qt { font-size: 17px; font-weight: 700; margin-bottom: var(--s-1); }
.wiz__qd { font-size: 13.5px; color: var(--c-ink-3); margin-bottom: var(--s-3); }
.wiz__nav { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.wiz__nav .btn { flex: 1; }

/* ---------- 테이블 ---------- */
.table { font-size: 14.5px; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--c-line-soft); text-align: left; }
.table th { font-weight: 700; background: var(--c-bg-soft); font-size: 13.5px; white-space: nowrap; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); }

/* ---------- 후기 / 거래현황 ---------- */
.ticker { display: grid; gap: var(--s-2); }
.ticker__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 13px var(--s-4); background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: 14px;
}
.ticker__l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ticker__dev { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.review { display: grid; gap: var(--s-2); height: 100%; }
.review__stars { color: #e8a300; font-size: 13px; letter-spacing: 1px; }
.review__txt { font-size: 14.5px; line-height: 1.65; }
.review__meta { font-size: 12.5px; color: var(--c-ink-3); margin-top: auto; }

/* ---------- FAQ / 아코디언 ---------- */
.acc { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.acc details { border-bottom: 1px solid var(--c-line-soft); }
.acc details:last-child { border-bottom: 0; }
.acc summary {
  padding: var(--s-4); font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-weight: 400; font-size: 20px; color: var(--c-ink-3); }
.acc details[open] summary::after { content: "−"; }
.acc summary:hover { background: var(--c-bg-soft); }
.acc__body { padding: 0 var(--s-4) var(--s-4); font-size: 14.5px; color: var(--c-ink-2); line-height: 1.7; }

/* ---------- 빈 상태 ---------- */
.empty { text-align: center; padding: var(--s-8) var(--s-4); color: var(--c-ink-3); }
.empty__t { font-weight: 700; color: var(--c-ink-2); font-size: 16px; }
.empty__d { font-size: 14px; margin-top: 6px; }

/* ---------- 푸터 ---------- */
.ft { background: var(--c-navy); color: #c4cee4; padding: var(--s-8) 0 var(--s-6); font-size: 14px; }
.ft a { color: #c4cee4; }
.ft a:hover { color: #fff; }
.ft__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .ft__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.ft__logo { color: #fff; font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: var(--s-2); }
.ft h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: var(--s-3); }
.ft li + li { margin-top: 8px; }
.ft__biz { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12);
           font-size: 12.5px; color: #8f9dbb; line-height: 1.8; }
.ft__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-3); }
.ft__legal a { font-weight: 600; color: #dfe6f5; }

/* ---------- 법적 문서 ---------- */
.doc { max-width: 800px; margin: 0 auto; padding: var(--s-7) var(--s-4) var(--s-9); }
.doc h2 { font-size: 20px; font-weight: 800; margin: var(--s-7) 0 var(--s-3); letter-spacing: -.01em; }
.doc h3 { font-size: 16px; font-weight: 700; margin: var(--s-5) 0 var(--s-2); }
.doc p  { margin: var(--s-2) 0; font-size: 15px; line-height: 1.85; color: #26303f; }
.doc ol, .doc ul { margin: var(--s-2) 0; padding-left: 20px; }
.doc ol { list-style: decimal; }
.doc ul { list-style: disc; }
.doc li { margin: 6px 0; font-size: 15px; line-height: 1.8; color: #26303f; }
.doc .table-scroll { margin: var(--s-4) 0; }
.doc__meta { font-size: 13px; color: var(--c-ink-3); border-left: 3px solid var(--c-line);
             padding-left: var(--s-3); margin-top: var(--s-4); }
.tbd { background: #fff3cd; color: #7a4700; padding: 1px 6px; border-radius: var(--r-sm);
       font-weight: 700; font-size: 13px; }

/* ==========================================================================
   모션 — 절제된 인터랙션
   원칙: duration 3단계 / easing 2종 / prefers-reduced-motion 전면 존중
   ========================================================================== */
:root {
  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 560ms;
  --ease-out:   cubic-bezier(.16, 1, .3, 1);      /* 감속 — 등장 */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);     /* 대칭 — 전환 */
}

/* ---------- 스크롤 등장 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* 자식들이 차례로 등장 */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 40ms; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 190ms; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 240ms; }
[data-reveal-stagger].is-in > *:nth-child(n+6) { transition-delay: 280ms; }

/* ---------- 카드 상호작용 ---------- */
.model-card, .cat-card, .series-card, .card--link {
  transition: transform var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-out);
}
.model-card:hover, .cat-card:hover, .series-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(13, 20, 37, .10);
}
.model-card:active, .cat-card:active, .series-card:active { transform: translateY(-1px); }

/* 기기 일러스트가 카드 위에서 살짝 떠오른다 */
.model-card__thumb svg, .cat-card__icon svg {
  transition: transform var(--d-base) var(--ease-out);
}
.model-card:hover .model-card__thumb svg { transform: translateY(-4px) scale(1.04); }
.cat-card:hover .cat-card__icon svg { transform: translateY(-3px) scale(1.05); }

/* 시리즈 카드 화살표 */
.series-card__arrow { transition: transform var(--d-fast) var(--ease-out); }
.series-card:hover .series-card__arrow { transform: translateX(4px); }

/* ---------- 버튼 ---------- */
.btn { transform: translateZ(0); }
.btn--primary, .btn--navy {
  box-shadow: 0 1px 2px rgba(13, 20, 37, .12);
  transition: background-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.btn--primary:hover:not(:disabled), .btn--navy:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(31, 86, 227, .22);
}
.btn--navy:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(15, 27, 61, .24); }
.btn--primary:active:not(:disabled), .btn--navy:active:not(:disabled) {
  transform: translateY(0); box-shadow: 0 1px 2px rgba(13, 20, 37, .12);
}

/* 화살표가 붙은 링크 */
.btn .arrow, .lnk .arrow { display: inline-block; transition: transform var(--d-fast) var(--ease-out); }
.btn:hover .arrow, .lnk:hover .arrow { transform: translateX(3px); }

/* ---------- 선택 버튼 ---------- */
.choice__btn, .gcat__btn, .glist__btn {
  transition: border-color var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.choice__btn:active, .gcat__btn:active, .glist__btn:active { transform: scale(.985); }
.gcat__btn[aria-pressed="true"], .glist__btn[aria-pressed="true"],
.choice__btn[aria-pressed="true"] {
  box-shadow: 0 0 0 1px var(--c-brand) inset, 0 4px 14px rgba(31, 86, 227, .12);
}

/* ---------- 등급 목록·설명 등장 ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.glist, .gdesc { animation: riseIn var(--d-base) var(--ease-out) both; }
.glist__btn { animation: riseIn var(--d-base) var(--ease-out) both; }
.glist__btn:nth-child(1) { animation-delay: 30ms; }
.glist__btn:nth-child(2) { animation-delay: 80ms; }
.glist__btn:nth-child(3) { animation-delay: 130ms; }

/* ---------- 견적 카드 ---------- */
.estcard { animation: riseIn var(--d-base) var(--ease-out) both; }
.estcard__amt { transition: color var(--d-fast) var(--ease-out); }
/* 금액이 바뀔 때 한 번 튄다 */
@keyframes amtPulse {
  0%   { transform: none; }
  35%  { transform: scale(1.045); }
  100% { transform: none; }
}
.estcard__amt.is-changed { animation: amtPulse 420ms var(--ease-out); }

/* ---------- 목록 갱신 ---------- */
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.model-grid > *, .series-grid > *, .cat-grid > * {
  animation: fadeSlide var(--d-base) var(--ease-out) both;
}
.model-grid > *:nth-child(1),.series-grid > *:nth-child(1),.cat-grid > *:nth-child(1){animation-delay:20ms}
.model-grid > *:nth-child(2),.series-grid > *:nth-child(2),.cat-grid > *:nth-child(2){animation-delay:50ms}
.model-grid > *:nth-child(3),.series-grid > *:nth-child(3),.cat-grid > *:nth-child(3){animation-delay:80ms}
.model-grid > *:nth-child(4),.series-grid > *:nth-child(4),.cat-grid > *:nth-child(4){animation-delay:110ms}
.model-grid > *:nth-child(5),.series-grid > *:nth-child(5){animation-delay:140ms}
.model-grid > *:nth-child(6),.series-grid > *:nth-child(6){animation-delay:165ms}
.model-grid > *:nth-child(7),.series-grid > *:nth-child(7){animation-delay:185ms}
.model-grid > *:nth-child(n+8),.series-grid > *:nth-child(n+8){animation-delay:200ms}

/* ---------- 헤더 ---------- */
.hd { transition: box-shadow var(--d-base) var(--ease-out),
                  background-color var(--d-base) var(--ease-out); }
.hd.is-stuck { box-shadow: 0 1px 0 var(--c-line), 0 6px 24px rgba(13, 20, 37, .06); }
.hd__nav a { position: relative; }
.hd__nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--c-brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-fast) var(--ease-out);
}
.hd__nav a:hover::after { transform: scaleX(1); }
.hd__nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- 아코디언 ---------- */
.acc details summary::after { transition: transform var(--d-fast) var(--ease-out); }
.acc details[open] summary::after { transform: rotate(180deg); }
.acc__body { animation: riseIn var(--d-base) var(--ease-out) both; }

/* ---------- 진행 바 ---------- */
.wiz__seg { transition: background-color var(--d-base) var(--ease-out); }

/* ---------- 스켈레톤 ---------- */
@keyframes shimmer { 100% { background-position: -200% 0; } }
.skel {
  background: linear-gradient(90deg, var(--c-bg-sunken) 25%, #f4f6fa 50%, var(--c-bg-sunken) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}

/* ---------- 페이지 진입 ---------- */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
main { animation: pageIn var(--d-base) var(--ease-out) both; }

/* ---------- 접근성: 모션 최소화 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .glist, .gdesc, .glist__btn, .estcard, .acc__body, main,
  .model-grid > *, .series-grid > *, .cat-grid > * { animation: none !important; }
  .model-card:hover, .cat-card:hover, .series-card:hover,
  .btn--primary:hover, .btn--navy:hover { transform: none !important; }
  .skel { animation: none; }
}

/* ==========================================================================
   실시간 피드
   ========================================================================== */
.live-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  background: rgba(15, 122, 82, .09); color: var(--c-ok);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.live-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: #16c26a; flex: none;
}
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid #16c26a; opacity: .7;
  animation: livePing 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes livePing {
  0%   { transform: scale(.7); opacity: .8; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* 카운터 */
.live-stat { position: relative; overflow: hidden; }
.live-stat__num { display: inline-block; font-variant-numeric: tabular-nums; }
.live-stat__num.is-bump { animation: statBump 520ms var(--ease-out); }
@keyframes statBump {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); opacity: .35; }
  55%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

/* 피드 ------------------------------------------------------------------
   끊김 방지 원칙
   · 컨테이너 높이를 고정한다 → 줄이 오갈 때 페이지가 밀리지 않는다
   · transform / opacity 만 애니메이션한다 → 레이아웃 재계산이 없다
   · contain 으로 렌더링 범위를 가둔다
   ---------------------------------------------------------------------- */
.feed {
  --row-h: 50px;
  --row-gap: 8px;
  height: calc(var(--row-h) * 6 + var(--row-gap) * 5);
  overflow: hidden;
  contain: layout paint;
}
/* 목록 전체를 감싼 래퍼 하나만 움직인다 → 줄마다 계산할 일이 없다 */
.feed__list { display: grid; gap: var(--row-gap); }

.feed__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  height: var(--row-h); padding: 0 var(--s-4); background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: 14px;
  transition: opacity 320ms linear, border-color 800ms linear;
}
.feed__row.is-enter { opacity: 0; }
.feed__row.is-fresh { border-color: rgba(22, 194, 106, .6); }

.feed__l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.feed__dev { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed__time { font-size: 12px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .feed { --row-h: 62px; }
  .feed__row { flex-wrap: wrap; align-content: center; padding: 0 12px; row-gap: 2px; }
  .feed__time { display: none; }
}

/* 후기 — 오른쪽에서 왼쪽으로 끊김 없이 흐른다 -------------------------------
   같은 목록을 두 벌 이어 붙이고 정확히 절반만큼 밀어 이음매를 없앤다.
   움직이는 것은 트랙 하나뿐 → transform 만 쓰므로 레이아웃 재계산이 없다.
   -------------------------------------------------------------------------- */
.marquee {
  --card-w: 340px;
  --card-gap: 16px;
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  /* 양 끝을 부드럽게 페이드 — 잘린 카드가 어색하지 않다 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--card-gap);
  width: max-content;
  animation: marqueeMove var(--marquee-dur, 46s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marqueeMove {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--card-gap) / 2), 0, 0); }
}

.marquee .review {
  width: var(--card-w); flex: none;
  min-height: 172px;
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.marquee .review:hover { border-color: var(--c-brand); transform: translateY(-2px); }

@media (max-width: 560px) {
  .marquee { --card-w: 268px; --card-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; opacity: .35; }
  .live-stat__num.is-bump { animation: none !important; }
  .feed__row { transition: none !important; }
  /* 흐름을 멈추고 가로 스크롤로 직접 넘겨볼 수 있게 한다 */
  .marquee__track { animation: none !important; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 유틸 ---------- */
.hr { height: 1px; background: var(--c-line); border: 0; margin: var(--s-6) 0; }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.flex { display: flex; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.hidden { display: none !important; }
.text-right { text-align: right; }