/*
 * 요정 이용요금 페이지 — 정적 HTML/CSS 버전 스타일시트.
 * 원본: Figma 9UcYIss15uxgyYxzdn9NRY · landing/pricing (node 1470:1125)
 * 수치는 apps/web(React 판)과 동일하게 Figma 실측값을 그대로 쓴다.
 */

/* ── 디자인 토큰 (요정 DESIGN_SYSTEM.md) ──────────────────────────── */
:root {
  --color-primary-500: #1a80ff; /* 브랜드 */
  --color-primary-600: #0a6be8;
  --color-primary-700: #0754bf;

  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f0f0f0;
  --color-neutral-300: #d9d9d9;
  --color-neutral-700: #4d4d4d;
  --color-neutral-900: #1a1a1a;

  --text-title: #1a1a1a;
  --text-body: #333333;
  --text-label: #6b6b6b;
  --text-caption: #8f8f8f;
  --text-inverse: #ffffff;

  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-pill: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, 0.08);

  /* 레이아웃 실측값 */
  --content-w: 1200px;
  --col-label: 240px;
  --col-plan: 320px;
}

/* ── reset ────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  color: var(--text-body);
  background: var(--color-neutral-0);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.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;
}

/* 아이콘 공통 — 크기는 Figma export 원본 그대로 */
.ic {
  display: block;
  flex: none;
  fill: none;
}
.ic--16 { width: 16px; height: 16px; }
.ic--18 { width: 18px; height: 18px; }
.ic--20 { width: 20px; height: 20px; }
.ic--title { color: var(--text-title); }
.ic--label { color: var(--text-label); }
.ic--n300 { color: var(--color-neutral-300); }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* 결제 주기 상태 보관용 radio — 화면에는 보이지 않는다 */
.cycle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ── 버튼 (Figma Button 38:164) ───────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.btn:hover {
  filter: brightness(0.95);
}
.btn--sm {
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.btn--lg {
  height: 48px;
  padding: 0 20px;
  font-size: 15px;
  line-height: 20px;
}
.btn--block {
  width: 100%;
}
.btn--primary {
  background: var(--color-primary-500);
  color: var(--text-inverse);
  font-weight: 500;
}
.btn--ghost {
  background: var(--color-neutral-100);
  color: var(--text-label);
  font-weight: 400;
}
/* pressed: 배경만 한 단계 진하게, 텍스트 유지 */
.btn--primary:active {
  background: var(--color-primary-700);
  filter: none;
}
.btn--ghost:active {
  background: var(--color-neutral-300);
  filter: none;
}

/* ── nav/header (1470:1126) — h72 는 border 포함 ──────────────────── */
.header {
  display: flex;
  justify-content: center;
  height: 72px;
  background: var(--color-neutral-0);
  border-bottom: 1px solid var(--color-neutral-100);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--content-w);
  height: 100%;
}
.header__left {
  display: flex;
  align-items: center;
  gap: 40px;
}
.header__logo img {
  width: 62px;
  height: 34px;
  object-fit: contain;
}
.gnb {
  display: flex;
  align-items: center;
  gap: 36px;
}
.gnb__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-label);
  white-space: nowrap;
}
.gnb__item.is-active {
  color: var(--color-primary-600);
}
.header__right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header__login {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-body);
}

/* ── 본문 레이아웃 ────────────────────────────────────────────────── */
.main {
  display: flex;
  flex: 1;
  justify-content: center;
}
.content {
  width: var(--content-w);
  padding-top: 85px; /* 헤더 아래 85 (Figma content y=157 − header 72) */
}

/* ── hero (1470:1156) ─────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.hero__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
  color: var(--text-title);
  white-space: nowrap;
}
.hero__sub {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-body);
  white-space: nowrap;
}

/* ── billing-cycle (1552:1298) — 424×85 ───────────────────────────── */
.billing {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}
.billing__box {
  position: relative;
  width: 424px;
  height: 85px;
}

/* segmented-3 (1557:1302) */
.segmented {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 4px;
  width: 424px;
  height: 44px;
  padding: 4px;
  background: var(--color-neutral-100);
  border-radius: 10px;
}
.segmented__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 36px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-caption);
  white-space: nowrap;
  cursor: pointer;
}

/*
 * 선택 상태 — 세그먼트 i 의 중앙 x = 4 + i*140 + 68 → 72 / 212 / 352
 * (Figma tail 실측 x=212 와 일치)
 */
#cycle-1:checked ~ .main .segmented__seg[for='cycle-1'],
#cycle-12:checked ~ .main .segmented__seg[for='cycle-12'],
#cycle-24:checked ~ .main .segmented__seg[for='cycle-24'] {
  background: var(--color-neutral-0);
  box-shadow: var(--shadow-segment);
  font-weight: 500;
  color: var(--text-title);
}

/* save-pill (1552:1299) + tail (1555:1302) */
.save-pill {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-neutral-0);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pill);
  transform: translateX(-50%);
}
.save-pill p {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-body);
  white-space: nowrap;
}
.save-pill em {
  font-style: normal;
  font-weight: 500;
  color: var(--color-primary-600);
}
/* 삼각형은 24×19 캔버스의 (6,4)~(18,11) → 캔버스를 (center−12, 23) 에 두면 꼭짓점이 (center, 27) */
.save-tail {
  position: absolute;
  top: 23px;
  pointer-events: none;
}

/* 기본은 모두 숨기고, 선택된 주기의 것만 보인다 */
.save-pill,
.save-tail,
.save-pill__pct-12,
.save-pill__pct-24 {
  display: none;
}

#cycle-12:checked ~ .main .save-pill {
  display: flex;
  left: 212px;
}
#cycle-12:checked ~ .main .save-tail {
  display: block;
  left: 200px; /* 212 − 12 */
}
#cycle-12:checked ~ .main .save-pill__pct-12 {
  display: inline;
}

#cycle-24:checked ~ .main .save-pill {
  display: flex;
  left: 352px;
}
#cycle-24:checked ~ .main .save-tail {
  display: block;
  left: 340px; /* 352 − 12 */
}
#cycle-24:checked ~ .main .save-pill__pct-24 {
  display: inline;
}
/* 1개월은 할인 0% → 말풍선 없음 (위 규칙에 걸리지 않아 자동으로 숨겨진다) */

/* ── pricing-table (1549:1239) — 1200×1440 ────────────────────────── */
.table {
  position: relative;
  display: grid;
  grid-template-columns: var(--col-label) repeat(3, var(--col-plan));
  width: var(--content-w);
  margin-top: 64px;
}
/* STANDARD 컬럼 하이라이트 — 표 전체 높이, 라운드 없음 (렌더 픽셀 실측 #fafafa) */
.table__highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--col-label) + var(--col-plan));
  width: var(--col-plan);
  background: var(--color-neutral-50);
  pointer-events: none;
}
/* 그리드 셀은 하이라이트 위에 그린다 */
.table > *:not(.table__highlight) {
  position: relative;
}

.table__spacer {
  height: 320px;
}

/* plan-head (1549:1275 / 1327 / 1386) — 320×320 */
.plan-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 320px;
  padding: 32px 24px 24px;
}
.plan-head__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--text-title);
  white-space: nowrap;
}
.plan-head__tagline {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-caption);
  white-space: nowrap;
}

/*
 * plan-icon — 프레임 79.051×88 (마스터 106×118 의 0.7458 배).
 * export SVG 캔버스(115×124 free / 115×129 standard·pro)는 드롭섀도 bleed 를 포함하고
 * 그 bleed 가 비대칭이라 단순 중앙정렬로는 글리프가 우상단으로 밀린다.
 * 오프셋은 Figma 원본 plan-head PNG(320×320, 1:1)와 픽셀 SSD 를 최소화해 실측한 값.
 */
.plan-icon {
  position: relative;
  flex: none;
  width: 79.051px;
  height: 88px;
}
.plan-icon__img {
  position: absolute;
  max-width: none;
  width: 85.76px; /* 115 × 0.745764 */
}
.plan-icon__img--free {
  left: -2.75px;
  top: -0.25px;
  height: 92.47px; /* 124 × 0.745764 */
}
.plan-icon__img--std,
.plan-icon__img--pro {
  left: -5px;
  top: -0.25px;
  height: 96.2px; /* 129 × 0.745764 */
}

/* 가격 — 선택된 주기의 것만 보인다 */
.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.price--1,
.price--12,
.price--24 {
  display: none;
}
#cycle-1:checked ~ .main .price--1,
#cycle-12:checked ~ .main .price--12,
#cycle-24:checked ~ .main .price--24 {
  display: flex;
}
.price__amt {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: var(--text-title);
}
.price__per {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-caption);
}
.price__list {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-caption);
  text-decoration: line-through;
}

/* 카테고리 88 / 기능 라벨·값 64 */
.cat {
  display: flex;
  align-items: flex-end;
  height: 88px;
  padding-bottom: 16px;
}
.cat h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: var(--text-title);
  white-space: nowrap;
}
.cat-spacer {
  height: 88px;
}
.feat {
  display: flex;
  align-items: center;
  height: 64px;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-body);
  white-space: nowrap;
}
.val {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-body);
  white-space: nowrap;
}
.val__dash {
  color: var(--text-caption);
}

/* ── faq (1472:1299) ──────────────────────────────────────────────── */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--content-w);
  margin-top: 64px;
}
.faq__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: var(--text-title);
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 32px;
}

/* faq-item (1569:195) — collapsed 68 = 22 + 24 + 22 */
.faq-item {
  background: var(--color-neutral-50);
  border-radius: var(--radius-md);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-body);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary span {
  flex: 1;
}
.faq-item__chev {
  transition: transform 0.15s;
}
.faq-item[open] .faq-item__chev {
  transform: rotate(180deg);
}
.faq-item p {
  padding: 0 24px 22px;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-label);
}

/* ── footer/main (1472:1321) ──────────────────────────────────────── */
.footer {
  display: flex;
  justify-content: center;
  margin-top: 120px;
  background: var(--color-neutral-900);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: var(--content-w);
  padding: 80px 0 48px;
}
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__logo {
  width: 169px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-inverse);
  white-space: nowrap;
}
.footer__links .is-bold {
  font-weight: 700;
}
.footer__company {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-caption);
}
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__divider {
  width: 100%;
  height: 1px;
  background: var(--color-neutral-700);
}
.footer__legal p {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-caption);
}