/* =========================================================================
   page-pricing.css — LLM Capsule /pricing
   2026-08-05 full conversion: rebuilt in the Capsule design language shared
   with home (front-page.php inline styles) and /product (page-product.css).
   Uses the theme's REAL custom properties directly (--color-*, --font-sans,
   --font-mono, --container-max, --radius-card, --section-py) — not the
   --c-*/--f-* fallback-only pattern the old 1:1 Framer port used (those
   tokens are undefined anywhere in the codebase; they only "worked" because
   every var() call carried a hardcoded fallback — see llmcapsule-ia.html
   /pricing plan, issue 5/7).

   pr-* class prefix throughout (replaces s1-s6). No dark full-bleed
   sections — home and product use zero of them; this page previously had
   two (calculator + closing CTA), both now light, matching house style.
   Comparison-table semantics use the checkmark/triangle glyph system
   ported 1:1 from home's .cap-cmp__list (✓ blue / △ amber / plain neutral)
   instead of the old tone system that was defined in content but never
   actually implemented in CSS.
   ========================================================================= */

.pricing-page,
.pricing-page *,
.pricing-page *::before,
.pricing-page *::after { box-sizing: border-box; }

.pricing-page {
  font-family: var(--font-sans);
  color: var(--color-text);
  word-break: keep-all;
}

/* ---------- Shared section rhythm ---------- */
.pr-inner { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 0 clamp(20px, 4vw, 80px); }
.pr-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 44px; }
.pr-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-eyebrow); }
.pr-h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-heading); text-wrap: balance; }
.pr-sub { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); max-width: 640px; text-wrap: pretty; }

/* ---------- S1+S2 · Hero + Pricing tiers (merged, 2026-08-05) ---------- */
.pr-hero {
  padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 112px);
  /* Section rhythm starts on WHITE and alternates (전하 피드백 2026-08-05):
     hero(white) → compare(subtle) → finder(white) → faq(subtle) → cta(band),
     matching the home page where white is the default surface. */
  background-color: var(--color-bg);
  container-type: inline-size;
}
.pr-hero__inner { max-width: 880px; margin: 0 auto clamp(48px, 6vw, 72px); padding: 0 clamp(20px, 4vw, 80px); text-align: center; }
.pr-hero .pr-eyebrow { margin-bottom: 16px; }
.pr-h1 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--color-heading); margin-bottom: 20px; text-wrap: balance; }
.pr-h1__accent { color: var(--color-primary); font-weight: 700; }
.pr-hero__desc { font-size: clamp(16px, 1.5vw, 18px); color: var(--color-text-muted); max-width: 680px; margin: 0 auto; line-height: 1.65; text-wrap: pretty; }

.pr-tiers__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@container (min-width: 768px) { .pr-tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1024px) { .pr-tiers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pr-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 14px);
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pr-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(15, 17, 48, 0.18); }
.pr-card--featured {
  border: 1.5px solid var(--color-primary);
  box-shadow: 0 18px 40px -22px rgba(26, 111, 255, 0.32);
}
.pr-card--featured:hover { box-shadow: 0 22px 46px -20px rgba(26, 111, 255, 0.4); }

/* Card header: tier name (the single heading) + the "Most common" badge
   inline top-right on the same row, instead of floating above the card
   border (2026-08-05, 전하 피드백— ref: inline top-right badge). */
.pr-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pr-badge {
  flex: 0 0 auto; margin-top: 4px;
  background-color: var(--color-accent-green-tint); color: var(--color-primary-hover);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-pill, 999px);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
/* The tier name is the card's single heading. Since every "price" here is
   a word ("Custom" / "Pay through AWS"), not a number, the price sits
   below the name as a quieter qualifier rather than competing with it. */
.pr-tier-name { margin: 0; font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--color-heading); letter-spacing: -0.02em; }
.pr-price { font-size: 19px; font-weight: 600; color: var(--color-heading); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 8px; }
.pr-period { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.4; }

/* "What's included" divider label — separates the tier/price block from the
   feature list, giving the card a clear two-part hierarchy (ref pattern). */
.pr-incl-label {
  /* equal space above and below the divider line (전하 피드백): margin-top
     == padding-top so the rule sits centered in its gap. */
  margin: 22px 0 14px; padding-top: 22px; border-top: 1px solid var(--color-border);
  font-size: 12px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.01em;
}
.pr-features { list-style: none; padding: 0; margin: 0; flex: 1; }
.pr-feature {
  font-size: 14px; padding: 8px 0 8px 24px; position: relative;
  color: var(--color-text); line-height: 1.5; overflow-wrap: break-word;
}
.pr-feature::before {
  content: "\2713"; position: absolute; left: 0; top: 8px;
  color: var(--color-primary); font-weight: 700; font-size: 14px; line-height: 1;
}
.pr-cta-wrap { margin-top: auto; padding-top: 28px; }
.pr-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 600;
  line-height: 1; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s;
  text-decoration: none; width: 100%; text-align: center; border: none;
}
.pr-btn--primary { background: var(--color-heading); color: #fff; }
.pr-btn--primary:hover { background: var(--color-primary); }
.pr-btn--ghost { background: transparent; color: var(--color-heading); border: 1.5px solid var(--color-border); }
.pr-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Slack free banner (slim) */
.pr-slack {
  margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-radius: var(--radius-card, 14px); background-color: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
}
.pr-slack__badge {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: var(--radius-pill, 999px);
  background-color: var(--color-accent-green-tint); color: var(--color-primary-hover);
}
.pr-slack__text { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; color: var(--color-text); line-height: 1.4; overflow-wrap: break-word; }
.pr-slack__link { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.pr-slack__link:hover { color: var(--color-primary-hover); }
/* Non-clickable "Coming soon" tag shown while the Slack App page isn't live. */
.pr-slack__soon {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: 4px 10px; border-radius: var(--radius-pill, 999px);
  background-color: var(--color-bg); border: 1px solid var(--color-border); white-space: nowrap;
}
@container (max-width: 599px) {
  .pr-slack { flex-wrap: wrap; gap: 8px 10px; }
  .pr-slack__text { flex: 1 1 100%; order: 3; }
}

/* ---------- S3 · Feature comparison ---------- */
.pr-compare { padding: var(--section-py, 92px) 0; background-color: var(--color-surface-subtle); container-type: inline-size; }
.pr-compare .pr-inner { max-width: var(--container-max, 1280px); }
/* Borderless zebra table (2026-08-05, 전하 ref: b.stage/Pagedone compare
   tables): no outer border or per-cell grid lines; alternating rows carry a
   subtle gray; the Enterprise column stays a continuous vertical highlight
   (a td background paints over the row's zebra, so no !important needed).
   Cells get generous padding, with extra left padding on the first column
   so the feature names don't hug the edge. */
/* The compare section sits on the subtle-gray band, so the table rides in a
   white card — this keeps the white/gray zebra readable (odd rows show the
   card's white; even rows the subtle gray) and gives the table a clear edge.
   overflow-x:auto also makes overflow-y compute to auto, so the radius clips
   the row corners cleanly while horizontal scroll still works on mobile. */
.pr-table-wrap {
  overflow-x: auto; scrollbar-width: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 14px);
}
.pr-table-wrap::-webkit-scrollbar { display: none; }
.pr-table { width: 100%; border-collapse: collapse; min-width: 640px; table-layout: fixed; }
.pr-table th, .pr-table td { padding: 15px 20px; text-align: left; font-size: 13px; overflow-wrap: break-word; }
.pr-table th:first-child, .pr-table td:first-child { padding-left: 24px; }
/* Header row: bold feature label + a bold, larger tier name with its price
   below (2026-08-05, 전하 ref: compare-table headers repeat name + price). */
.pr-table thead th { padding-top: 18px; padding-bottom: 18px; vertical-align: middle; border-bottom: 1.5px solid var(--color-border); }
.pr-th-feature-label { font-size: 13px; font-weight: 700; color: var(--color-heading); }
.pr-th-tier { display: block; font-size: 16px; font-weight: 700; color: var(--color-heading); letter-spacing: -0.01em; line-height: 1.2; }
.pr-th-price { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.pr-th-featured .pr-th-tier { color: var(--color-primary-hover); }
.pr-table tbody tr:nth-child(even) { background-color: var(--color-surface-subtle); }
/* Column widths (table-layout:fixed reads them from this header row): the
   Enterprise column is widened so its long values fit on one line, and the
   others shrink to compensate (2026-08-05, 전하 피드백). Feature col + featured
   are set explicitly; the two remaining tier cols auto-split what's left. */
.pr-table thead th:first-child { width: 24%; }
.pr-th-featured { width: 30%; background-color: var(--color-accent-green-tint); color: var(--color-primary-hover); border-bottom-color: var(--color-primary-soft); }
/* Featured column keeps its own zebra so it doesn't read as one flat blob
   (전하 피드백): odd rows a very light sky, even rows the deeper brand tint —
   matching the gray/white rhythm of the other columns (even = deeper). */
.pr-td-featured { background-color: #EFF4FF; }
.pr-table tbody tr:nth-child(even) .pr-td-featured { background-color: var(--color-accent-green-tint); }
.pr-td-feature { font-weight: 600; color: var(--color-heading); width: 26%; }

/* Filled colored circle icons so the two states read at a glance by color
   (2026-08-05, 전하 피드백): full = brand-blue circle + white check,
   partial/limited = amber circle + white minus. neutral cells have no icon.

   All value columns reserve a fixed left icon zone (padding-left) so the
   value TEXT lines up across every cell whether or not it carries an icon
   (전하 피드백: 정렬 안 맞음). The icon is then absolutely positioned inside
   that zone, so it never shifts the text. */
.pr-yes { font-weight: 700; color: var(--color-text); }
/* Only BODY value cells reserve the icon zone; the header tier names keep the
   base padding so they left-align with the icon column, not the indented
   value text (전하 피드백: 제목열은 아이콘 쪽에 정렬). The icon's left matches
   the header padding so header text and icons share one left edge. */
.pr-table td:not(:first-child) { padding-left: 46px; }
.pr-table td.pr-yes, .pr-table td.pr-mid { position: relative; }
.pr-yes::before, .pr-mid::before {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: #fff;
}
.pr-yes::before { content: "\2713"; background-color: var(--color-primary); }
.pr-mid::before { content: "\2212"; background-color: #E28A00; }
@container (min-width: 1024px) {
  .pr-table th, .pr-table td { padding: 17px 24px; font-size: 14px; }
  .pr-table th:first-child, .pr-table td:first-child { padding-left: 28px; }
  .pr-table td:not(:first-child) { padding-left: 52px; }
  .pr-yes::before, .pr-mid::before { left: 24px; }
}

/* ---------- S4 · Tier finder (3-stop slider) ----------
   Reference-styled (rounded thumb on a gradient fill, big tier name, gray
   summary rows, CTA) but the axis is TIER, not volume: 3 discrete stops,
   each a real tier. Reworked 2026-08-05 (전하 방향 결정) because CUBIG
   pricing is Custom (no number to animate) and tier is intent-driven, so a
   volume slider collapsed to "always Enterprise". --pr-pick-pct (0-100%) is
   set by JS on the track. */
.pr-finder { padding: var(--section-py, 92px) 0; background-color: var(--color-bg); container-type: inline-size; }
.pr-finder .pr-inner { max-width: 640px; }

.pr-picker { }
.pr-picker__slider-wrap { margin-bottom: 32px; }
.pr-picker__track {
  position: relative; height: 12px; border-radius: var(--radius-pill, 999px);
  background-color: var(--color-border);
}
.pr-picker__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--pr-pick-pct, 50%);
  border-radius: var(--radius-pill, 999px);
  background-image: linear-gradient(90deg, var(--color-primary-soft), var(--color-primary));
  pointer-events: none; transition: width 0.2s ease;
}
.pr-picker__dot {
  position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background-color: #fff; opacity: 0.85; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 1;
}
.pr-picker__slider {
  position: relative; z-index: 2; display: block; width: 100%; height: 12px; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; outline: none; cursor: pointer;
}
.pr-picker__slider::-webkit-slider-runnable-track { background: transparent; height: 12px; }
.pr-picker__slider::-moz-range-track { background: transparent; height: 12px; border: none; }
.pr-picker__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -7px; border-radius: 50%;
  background-color: #fff; border: 1px solid var(--color-border); cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 17, 48, 0.22);
}
.pr-picker__slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background-color: #fff; border: 1px solid var(--color-border); cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 17, 48, 0.22);
}
.pr-picker__slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Stop labels under the track */
.pr-picker__stops { display: flex; margin-top: 12px; }
/* Each stop label takes an equal 1/3 track slice and centers its text, so the
   middle label's center lands on the track midpoint (= its dot) regardless of
   the neighbors' differing widths. space-between put the middle label off by
   ~17px because it spaced by the GAPS between boxes, not box centers (전하
   피드백 2026-08-05: 가운데 라벨 중앙 안 맞음). Ends align to the track edges. */
.pr-picker__stop-label {
  flex: 1 1 0; text-align: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted); cursor: pointer; transition: color 0.15s;
}
.pr-picker__stop-label.is-first { text-align: left; }
.pr-picker__stop-label.is-last { text-align: right; }
.pr-picker__stop-label.is-active { color: var(--color-primary-hover); }
.pr-picker__stop-label:hover { color: var(--color-heading); }

/* Reveal panel — this is a RESULT readout, not a second section header. The
   "Your tier" label is a small pill chip (distinct from the section eyebrow,
   which is plain blue kicker text) so the two don't read as twin kicker+heading
   pairs (전하 피드백 2026-08-05: 위계 뒤섞임). The tier name is the single focal
   answer below the chip. */
.pr-picker__panel { text-align: center; }
.pr-picker__reclabel {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
  background-color: var(--color-surface-subtle); padding: 5px 12px; border-radius: var(--radius-pill, 999px);
}
.pr-picker__tier {
  margin: 0 0 24px; font-size: clamp(30px, 4vw, 44px); font-weight: 700;
  color: var(--color-heading); letter-spacing: -0.025em; line-height: 1.1;
}
.pr-picker__rows { margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.pr-picker__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-radius: 12px;
  /* subtle-gray pill on the now-white finder section so each row reads as its
     own box (전하 피드백 2026-08-05: 흰 배경과 겹쳐 안 보임). */
  background-color: var(--color-surface-subtle); text-align: left;
}
.pr-picker__row dt { font-size: 14px; font-weight: 600; color: var(--color-heading); }
.pr-picker__row dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--color-text-muted); text-align: right; }
.pr-picker__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 15px 24px; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600;
  line-height: 1; text-decoration: none; border: none; cursor: pointer;
  background-color: var(--color-primary); color: #fff; transition: background 0.18s;
}
.pr-picker__cta:hover { background-color: var(--color-primary-hover); }

/* Brief pop when the active stop changes (JS restarts .is-updating). */
.pr-picker__panel.is-updating { animation: pr-pick-pop 0.28s ease; }
@keyframes pr-pick-pop {
  0% { transform: scale(0.98); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-picker__fill { transition: none; }
  .pr-picker__panel.is-updating { animation: none; }
}

/* ---------- S5 · Pricing FAQ (accordion) ---------- */
.pr-faq { padding: var(--section-py, 92px) 0; background-color: var(--color-surface-subtle); container-type: inline-size; }
.pr-faq .pr-inner { max-width: var(--container-max, 1280px); }
/* Native <details> accordion matching the site standard (home .cap-faq):
   a chevron that rotates on open and the ::details-content height/opacity
   transition — no custom JS (2026-08-05, 전하 피드백: FAQ가 사이트 디자인 아님). */
.pr-faq-wrap { max-width: 880px; margin: 0 auto; interpolate-size: allow-keywords; }
.pr-faq-item { border-bottom: 1px solid var(--color-border); }
.pr-faq-item:first-child { border-top: 1px solid var(--color-border); }
.pr-faq-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; cursor: pointer; list-style: none; transition: color 0.15s;
}
.pr-faq-summary::-webkit-details-marker { display: none; }
.pr-faq-summary:hover .pr-question { color: var(--color-primary); }
.pr-question { font-size: 17px; font-weight: 600; color: var(--color-heading); line-height: 1.3; overflow-wrap: break-word; flex: 1; transition: color 0.15s; }
.pr-faq-chevron { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-text-muted); transition: transform 0.25s ease; }
.pr-faq-item[open] .pr-faq-chevron { transform: rotate(180deg); }
.pr-answer { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; overflow-wrap: break-word; margin: 0; padding: 0 4px 22px; max-width: 760px; }
.pr-faq-item::details-content {
  block-size: 0; opacity: 0; overflow: hidden;
  transition: block-size 0.28s ease, opacity 0.28s ease, content-visibility 0.28s allow-discrete;
}
.pr-faq-item[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pr-faq-item::details-content { transition: none; }
  .pr-faq-chevron { transition: none; }
}

/* ---------- S6 · Closing CTA ----------
   Light gradient band ported from home's .cap-s--cta (front-page.php
   lines ~1327-1338) — no dark full-bleed image band. */
.pr-cta {
  position: relative; padding: var(--section-py, 92px) clamp(20px, 4vw, 80px); text-align: center;
  background:
    radial-gradient(620px 300px at 14% -8%, rgba(26, 111, 255, 0.13), transparent 62%),
    radial-gradient(700px 340px at 88% 108%, rgba(82, 144, 255, 0.15), transparent 62%),
    linear-gradient(180deg, #F8FBFF 0%, #EDF3FE 100%);
  border-top: 1px solid #E4EDFB;
}
.pr-cta__inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.pr-cta__h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: var(--color-heading); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; overflow-wrap: break-word; text-wrap: balance; }
.pr-cta__sub { font-size: 15px; color: var(--color-text-muted); line-height: 1.65; margin-bottom: 28px; overflow-wrap: break-word; text-wrap: pretty; }
.pr-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pr-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 600;
  line-height: 1; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s;
  text-decoration: none; border: 1px solid transparent;
}
.pr-cta-btn--primary { background: var(--color-primary); color: #fff; }
.pr-cta-btn--primary:hover { background: var(--color-primary-hover); }
.pr-cta-btn--ghost { background: transparent; color: var(--color-primary-hover); border-color: var(--color-primary-soft); }
.pr-cta-btn--ghost:hover { background: #EAF2FF; border-color: var(--color-primary); }
@container (max-width: 599px) {
  .pr-cta__actions { flex-direction: column; align-items: center; }
  .pr-cta-btn { width: 100%; max-width: 320px; }
}