/* ============================================================
   pricing — 요금제 상세 (플랜 상세 카드 + 비교 표)
   카드/헤더는 글래스, 비교 표는 평면(데이터 가독 우선).
   ============================================================ */

/* ── 헤더 (글래스 바, 로고 왼쪽) ── */
.pr-top { position:sticky; top:0; z-index:20; padding:var(--header-top) 0 0; }
.pr-top .wrap { width:min(calc(100% - 2 * var(--page-x)), var(--page-max)); margin:0 auto; }
.pr-top .bar { border-radius: var(--radius-input);
  background:var(--ground-hi); border:1px solid var(--rule);
  box-shadow:none; }
/* 타깃 높이는 min-height 가 아니라 대칭 패딩으로 만든다 — align-items:baseline 이라
   min-height 만 주면 글자가 박스 위쪽에 붙고 옆 내비와 중심선이 어긋난다. */
/* 워드마크는 'by' 바로 뒤에 붙는다 — 구분선을 두면 락업이 둘로 갈려 "AX CONCIERGE"
   와 "by XERKONIX" 가 별개 요소로 읽힌다. 간격만 남기고 선은 뺐다. */
.pr-home { display:inline-flex; align-items:center; margin-left: var(--space-2); }
.pr-top .bar > .brand-by { display:inline-flex; align-items:center; margin-left: var(--space-2); }
.pr-brand { display:inline-flex; align-items:baseline; gap: var(--space-2); padding: var(--space-3) 0; text-decoration:none; }
.pr-brand b { font: 600 var(--fs-lead)/1 var(--font); letter-spacing:.4px; color:var(--ink); }
.pr-nav { display:flex; gap: var(--space-5); }
.pr-nav a { display:inline-flex; align-items:center; min-height:44px; font:500 var(--fs-body)/1 var(--font); color:var(--ink); text-decoration:none; }
/* 랜딩의 .nav .cta 와 같은 높이로 맞춘다 — 페이지를 옮길 때 헤더 액션이 흔들리지 않게 */
.pr-cta-top { display:inline-flex; align-items:center; min-height:37px; padding: 0 var(--space-4); border-radius: var(--radius-input); font:600 var(--fs-body)/1 var(--font); text-decoration:none; }

/* ── 본문 ── */
.pr-page { position:relative; z-index:2; width:min(calc(100% - 2 * var(--page-x)), var(--page-max)); margin:0 auto; padding:var(--section-space) 0; }
.pr-head { text-align:center; max-width:720px; margin: 0 auto var(--space-6); }
/* 한글 라벨 자간 — layout.css .eyebrow 와 같은 이유로 좁힌다(요금제는 layout.css 미로드) */
.pr-head .eyebrow { font:500 var(--fs-label)/1.3 var(--font); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink); }
.pr-head h1 { font-family:var(--font); font-weight:600; font-size: var(--fs-h1); line-height:1.22; letter-spacing:var(--ls-tighter); margin: var(--space-4) 0 0; word-break:keep-all; }
.pr-head p { font:400 var(--fs-body-lg)/1.65 var(--font); color:var(--ink); margin: var(--space-4) auto 0; max-width:560px; word-break:keep-all; }

/* ── 결제 주기 토글(월 결제 / 12개월 결제 — 6개월은 2026-10-05 폐지) ── */
.pr-billing { display:flex; justify-content:center; margin: 0 auto var(--space-6); }
/* 주기가 많아지면 좁은 화면에서 두 줄로 접는다(지금은 월·12개월 둘). */
@media (max-width:560px){ .pr-billing .seg { flex-wrap:wrap; justify-content:center; } .pr-billing .seg label { padding: 0 var(--space-3); } }
/* 토글 자체는 .seg(base.css) 를 쓴다 — 배지만 이 파일 몫. 토글 버튼 자체가
   이미 pill 이다(.seg label) — 안에 또 pill 배지를 넣으면 둥근 모양이 중첩돼
   무겁다. 배경·radius 없이 강조색 텍스트만 얹는다. 색은 --accent-deep(var(--ink)) 이
   아니라 --text-strong 이다 — 라벨이 선택되면 글자도 --text-strong 이 되는데,
   accent-deep 은 그보다 살짝 옅어서 선택한 순간 배지가 라벨보다 흐리게 보였다(실측). */
.save-badge { font: 600 var(--fs-small)/1 var(--font); color:var(--ink); }
.pr-billing-note { text-align:center; margin: calc(var(--space-5) * -1) auto var(--space-6); font:400 var(--fs-body-sm)/1.6 var(--font); color:var(--ink-2); }

/* ── 플랜 카드 (표와 합침: 이름·가격·문의·포함 범위가 한 장) ── */
.pr-plans { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-4); align-items:stretch; }
/* 요금제 두 층(2026-10-03 결정): 1층 「개인」(무료·Personal) · 2층 「팀·회사」(팀 스탠다드·팀 프로·Enterprise).
   층 사이는 여백과 층 제목으로만 나눈다 — 구분선·색 띠·장식 점 없음. 두 층은 같은 3칸 격자라 카드 폭이 같고,
   좁은 화면에서도 DOM 순서대로 개인 → 팀·회사로 쌓인다. 층 제목 영문은 전역 사전의 「개인」(coTact 「Personal」)과
   겹치지 않도록 두 언어 글을 함께 두고 문서 언어로 하나만 보인다. */
.pricing-inline .pr-layer { margin:0; padding:0; background:none; border:0; }
.pricing-inline .pr-layer + .pr-layer { margin-top: var(--space-7); }
.pr-layer-title { margin: 0 0 var(--space-4); font: 600 var(--fs-lead)/1.3 var(--font); letter-spacing:-.01em; color:var(--ink); }
/* Personal 대상 설명 「개인」(2026-10-05 결정)도 같은 이유로 두 언어 글을 함께 두고 하나만 보인다. */
.pr-layer-title .pr-lang-en, .pr-plan .who .pr-lang-en { display:none; }
:root[lang="en"] .pr-layer-title .pr-lang-ko, :root[lang="en"] .pr-plan .who .pr-lang-ko { display:none; }
:root[lang="en"] .pr-layer-title .pr-lang-en, :root[lang="en"] .pr-plan .who .pr-lang-en { display:inline; }
.pr-plan { display:flex; flex-direction:column; padding: var(--space-5) var(--space-5); }
.v6-marketing .pr-plans .pr-plan.panel {
  background:var(--surface-raised); border:0; box-shadow:var(--panel-shadow);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.pr-plan .pname-row { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); min-height:28px; }
.pr-plan .pname { font: 600 var(--fs-lead)/1 var(--font); color:var(--ink); }
.pr-plan .pop { flex-shrink:0; }
/* 인기(Pro) 강조 — Aquamarine(2026-10-02 결정). 카드 테두리는 네 변 전부 1px(한쪽 변만 칠하는 바는 쓰지 않는다),
   「인기」는 알약 칩. 글자는 AA(4.5:1)를 위해 라이트 --accent 를 잉크 쪽으로 짙게 섞은 파생색. */
.v6-marketing .pr-plans .pr-plan.panel.popular { border:0; box-shadow:var(--glass-float-shadow); }
.pr-plan .pop.tag.flag {
  --accent:var(--palette-aquamarine-light); /* 화면당 한 곳 */
  display:inline-flex; align-items:center; min-height:24px; padding: 0 var(--space-3); border-radius:var(--radius-pill);
  border:0; background:color-mix(in srgb, var(--accent) 11%, var(--surface));
  color:color-mix(in srgb, var(--accent) 54%, var(--ink)); font: 600 var(--fs-caption)/1 var(--font); letter-spacing:.02em; white-space:nowrap;
}
.pr-plan .who { margin: var(--space-2) 0 0; font: 400 var(--fs-small)/1.45 var(--font); color:var(--ink-2); word-break:keep-all; }
/* 글 → 버튼은 DS --text-to-action(24px). 카드는 flex 세로라 여백이 겹치지 않는다 — 버튼 위 여백은 0 으로 두고
   버튼 바로 위 글(가격, 또는 장기 결제 줄)의 아래 여백 하나로 24px 를 만든다(브라우저 간격 검사가 잰다). */
.pr-plan .price { display:flex; align-items:baseline; gap: var(--space-2); margin: var(--space-4) 0 var(--text-to-action, var(--space-5)); flex-wrap:wrap; }
.pr-plan .price .per { font: 500 var(--fs-small)/1 var(--font); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pr-plan .price .amt { font: 600 var(--fs-h3)/1.1 var(--font); color:var(--ink); letter-spacing:-.01em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pr-plan .price .amt-was { font: 500 var(--fs-small)/1.1 var(--font); color:var(--ink-2); text-decoration:line-through; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pr-plan .price-term { margin: calc(var(--space-2) - var(--text-to-action, var(--space-5))) 0 var(--text-to-action, var(--space-5)); font: 500 var(--fs-small)/1.4 var(--font); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pr-plan .pcta-row { display:flex; flex-wrap:wrap; gap: var(--space-3); margin: 0 0 var(--space-5); }
/* HTML 이 .pcta 없이 .btn 만 있어도 가격-목록 사이 간격이 빠지지 않게 직계 버튼까지 묶는다. */
.pr-plan > a.btn,
.pr-plan .pcta {
  margin: 0 0 var(--space-5);
  min-height:44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
  border-radius:var(--radius-pill);
  text-decoration:none;
  flex-shrink:0;
}
.pr-plan .pcta-row .pcta,
.pr-plan .pcta-row > a.btn { margin:0; flex:1; min-width:120px; }
@media (max-width:767px), (pointer:coarse) {
  .pr-plan > a.btn,
  .pr-plan .pcta { min-height:44px; padding: var(--space-3) var(--space-4); }
}
.pr-plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-3); }
.pr-plan li { display:flex; gap: var(--space-2); font:400 var(--fs-body-sm)/1.5 var(--font); color:var(--ink); word-break:keep-all; }
.pr-plan li svg { width:15px; height:15px; margin-top: var(--space-1); flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* 카드 항목은 모두 같은 보통 굵기(400). 굵게는 요금제 이름과 가격에만 둔다(2026-10-03 결정). */
/* DOO AI 항목 바로 아래 모델 등급 하위 줄(2026-10-05 결정). 체크 표시 없이 위 항목 글 시작(체크 15px + 틈 8px)에 맞춰
   들여 쓰고, 부제(.who)와 같은 작은 글·보조색만 쓴다. 굵기는 다른 항목과 같은 400. 색 띠·장식 없음. */
.pr-plan li:has(> .pr-sub) { margin-top: calc(var(--space-2) * -1); }
.pr-plan li > .pr-sub { padding-left: var(--space-5); font-size: var(--fs-small); color:var(--ink-2); }

/* 환불 고지(2026-10-03 결정): 카드마다 두지 않고 요금표 아래에 한 번만, 작은 글씨로. 표 아래에는 이 한 줄만 둔다.
   기준 1~3의 긴 설명은 이용약관 제21조의2와 결제창(결제 버튼 바로 위)에만 둔다. */
.pr-refund { text-align:center; margin: var(--space-6) 0 0; font: 400 var(--fs-small)/1.6 var(--font); color:var(--ink-2); word-break:keep-all; }
.pr-refund a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:1000px){ .pr-plans { grid-template-columns:1fr 1fr; } }
/* 랜딩(.nav .links)과 같은 900px 에서 접는다 — 버거 CSS 가 900 미디어쿼리 안에 있어
   720 에 두면 720~900 구간에서 링크는 숨고 버거는 안 나오는 사각지대가 생긴다. */
@media (max-width:900px){ .pr-nav { display:none; } }
@media (max-width:720px){ .pr-plans { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .pr-plans { grid-template-columns:1fr; } }

.pcta.btn-secondary{background:var(--secondary-fill);color:var(--ink);border:1px solid var(--secondary-border)}
.pcta.btn-secondary:hover{background:var(--secondary-hover)}

/* 좁은 화면: clamp() 글자 크기를 DS 토큰 두 단계로 나눈 작은 쪽(DS 준수 이관 2026-10-20) */
@media (max-width: 700px) {
  .pr-head h1 { font-size: var(--fs-h2); }
}