/* service.css — 서비스(service.html) 전용 스타일.
 * 레벨 개요(프로세스 타임라인) · 결제 방식 뱃지 · 상품 블록 · 옵션/추가 상품 · 비교표 · 가격.
 * 공통 뼈대는 base.css 참고.
 */

/* ── 서비스 페이지 — 히어로 가운데 정렬 ── */
.page--service .page-hero { text-align: center; }
.page--service .page-hero .kicker { justify-content: center; }
.page--service .page-hero h1,
.page--service .page-hero .lede { margin-inline: auto; }
.page--service .page-hero .lede strong { color: var(--color-ink); font-weight: 700; }

/* ══════════════════════════════════════════════════
 * 레벨 개요 — 파인드코어 · 그로우코어 · 선택형 추가
 * 원(투명, 결제 방식 색 테두리) + 관통하는 가로선 + 굵은 단어/부제
 * 원과 리스트를 같은 그리드 칸에 둬서 항상 가운데가 맞게 정렬(겹치지 않음)
 * ════════════════════════════════════════════════ */
.levels-section { padding-block: var(--space-2xl) var(--space-section); }

.levels {
  --level-circle-d: clamp(9.5rem, 15vw, 12.5rem);
  list-style: none;
  margin: 0;
  padding-block: var(--space-lg) 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl) var(--space-lg);
}

/* 가로 연결선 — 원들 뒤로 지나가는 하나의 선. 위치는 원 지름의 절반으로 계산 */
.levels::before {
  content: "";
  position: absolute;
  top: calc(var(--space-lg) + var(--level-circle-d) / 2);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-rule-2);
  z-index: 0;
}

.level {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  text-align: center;
}

/* 원 — 배경 없음(투명), 결제 방식 색 체계 그대로 이어감.
 * 리스트와 같은 칸에서 justify-items:center로만 정렬해서(음수 마진 없음)
 * 원과 그 아래 리스트가 항상 같은 가운데 축에 맞춰짐 */
.level__circle {
  width: var(--level-circle-d);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 2px solid var(--color-accent);
  background: transparent;
}
.level:nth-child(2) .level__circle { border-color: var(--color-teal); }
.level:nth-child(3) .level__circle { border-color: var(--color-rule); border-style: dashed; }

/* 상품명 · 부제 — 배경을 살짝 입혀서 연결선이 글자 뒤에서 가려지게 함 */
.level__name {
  background: var(--color-paper);
  padding-inline: 0.4em;
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-accent);
}
.level:nth-child(2) .level__name { color: color-mix(in oklch, var(--color-teal) 70%, var(--color-ink)); }
.level:nth-child(3) .level__name { color: var(--color-muted); }

.level__sub {
  background: var(--color-paper);
  padding-inline: 0.4em;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.level__list {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  text-align: center;
}

.level__list li {
  position: relative;
  color: var(--color-ink-2);
  font-size: var(--text-base);
  line-height: 1.5;
}

.level__list .level__opt {
  margin-block-start: var(--space-2xs);
  color: var(--color-accent-text);
  font-weight: 700;
}

/* 반응형 — 모바일에서 연결선 해제하고 1열 스택 */
@media (max-width: 52rem) {
  .levels {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .levels::before { display: none; }
}

/* ── 결제 방식 뱃지 (레벨·상품·비교표에서 공용) ── */
.pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.pay-badge svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

/* 일회성 — 코럴 아웃라인 */
.pay-badge--once {
  color: var(--color-accent-text);
  border-color: color-mix(in oklch, var(--color-accent) 50%, transparent);
  background: color-mix(in oklch, var(--color-accent) 9%, transparent);
}

/* 월 구독 — 청록(딥씨) 아웃라인 */
.pay-badge--sub {
  color: color-mix(in oklch, var(--color-teal) 65%, var(--color-ink));
  border-color: color-mix(in oklch, var(--color-teal) 55%, transparent);
  background: color-mix(in oklch, var(--color-teal) 12%, transparent);
}

/* 선택 — 조용한 회색 */
.pay-badge--opt {
  color: var(--color-muted);
  border-color: var(--color-rule);
  background: transparent;
  border-style: dashed;
}

/* ── 서비스 · 상품 블록 ───────────────────────── */

/* 상품 섹션 상단 배너: 텍스트(좌) + 아이콘(우) */
.product__banner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin-block-end: var(--space-xl);
}

.product__meta { flex: 1; }

.product__icon {
  flex-shrink: 0;
  width: clamp(80px, 10vw, 120px);
  height: auto;
  overflow: visible;
}

#growcore .way-icon__gem { animation-delay: -1.5s; }

@media (max-width: 40rem) {
  .product__icon { display: none; }
}

.product {
  padding-block: var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  scroll-margin-top: 6.5rem;
}

.product__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-block-end: var(--space-lg);
}

.product__head h2 { font-size: var(--text-xl); }

.product__lede { margin-block-start: var(--space-md); max-width: 38rem; color: var(--color-ink-2); }

.product h3 {
  margin-block-start: var(--space-xl);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-ink-2);
}

/* 받으시는 것 — 코럴 번호 리스트 */
.deliver {
  list-style: none;
  counter-reset: deliver;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  max-width: 36rem;
}

.deliver li {
  counter-increment: deliver;
  position: relative;
  padding-inline-start: 2.1rem;
}

.deliver li::before {
  content: counter(deliver);
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-paper-3);
  color: var(--color-accent-text);
  font-size: 0.8125rem;
  font-weight: 800;
}

.deliver strong { font-weight: 700; }
.deliver .sub { color: var(--color-muted); }

.price-card__flag {
  flex-shrink: 0;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ── 파인드코어 진입 CTA — 진단 폼(findcore.html)으로 보내는 버튼 ── */
.product__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-block-start: var(--space-xl);
}

.product__cta-note { font-size: var(--text-sm); color: var(--color-muted); }

/* 그로우코어 월 사이클 — 가로 흐름 */
.cycle {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
}

.cycle li {
  background: var(--color-paper-2);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.cycle li strong { color: var(--color-accent-text); font-weight: 800; margin-inline-end: 0.35em; }

/* ── 선택형 추가 상품 ─────────────────────────── */
.addons {
  padding-block: var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.addon-grid {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.addon-card,
.price-card {
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}

.addon-card:hover,
.price-card:hover {
  border-color: color-mix(in oklch, var(--color-accent) 55%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glass);
}

.addon-card__tag {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.addon-card h3 {
  margin-block-start: var(--space-sm);
  font-size: var(--text-md);
  font-weight: 800;
}

.addon-card p { margin-block-start: var(--space-sm); color: var(--color-ink-2); }

.addons__note {
  margin-block-start: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.addons__note a { color: var(--color-accent-text); text-underline-offset: 0.2em; }

@media (max-width: 40rem) {
  .addon-grid { grid-template-columns: 1fr; }
}

/* ── 서비스 · 비교표 ──────────────────────────── */
.compare { padding-block: var(--space-2xl); border-block-start: var(--rule-hair) solid var(--color-rule); }

.compare__scroll { margin-block-start: var(--space-xl); overflow-x: auto; }

/* 좁은 화면에서 표(min-width 34rem)가 화면 폭을 넘어가 가로 스크롤이 필요한데
 * 오른쪽이 그냥 잘려 보여 스크롤 가능하다는 힌트가 없었음(실측: 그로우코어 열이
 * 거의 안 보임) → 오른쪽 옅은 그림자(스크롤 중엔 안 보이는 위치까지 스크롤되면
 * 자연히 옅어짐)로 "더 있다" 신호 + 안내 문구 추가 */
.compare__hint {
  display: none;
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@media (max-width: 40rem) {
  .compare__scroll { box-shadow: inset -20px 0 12px -12px color-mix(in oklch, var(--color-ink) 18%, transparent); }
  .compare__hint { display: block; }
}

.compare table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}

.compare th, .compare td {
  padding: var(--space-sm) var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  vertical-align: top;
}

.compare thead th {
  border-block-start: none;
  font-size: var(--text-md);
  font-weight: 800;
  padding-block-end: var(--space-md);
}

.compare thead th:first-child { width: 18%; }

.compare tbody th {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-muted);
  white-space: nowrap;
}

.compare td { color: var(--color-ink-2); }
.compare td em { font-style: normal; color: var(--color-accent-text); font-weight: 700; }

/* 결제 방식 행 — 강조 */
.compare tr.is-key th,
.compare tr.is-key td {
  background: color-mix(in oklch, var(--color-teal) 5%, transparent);
  padding-block: var(--space-md);
}
.compare tr.is-key th { color: var(--color-ink); }
.compare .pay-desc {
  display: block;
  margin-block-start: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ── 서비스 · 가격 ────────────────────────────── */
/* 티어 그리드 — 카드 안에 CTA·구분선·체크 목록까지 들어가서 열이 좁으면 답답해요.
   그래서 .levels(52rem)보다 조금 이른 58rem에서 1열로 떨어뜨려요. */
/* row-gap이 카드 사이가 아니라 카드 "안" 줄 간격이에요 — 아래 subgrid 때문에
   카드들이 같은 행 트랙을 나눠 쓰거든요. 카드 사이 간격은 column-gap. */
.price-grid {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  align-items: start;
}

/* 파인드코어는 2티어라 카드가 2장이에요 (2026-07-28). 3열 트랙에 그냥 두면
   오른쪽 한 칸이 비어요. auto-fit을 안 쓴 이유 — 열 수가 카드 개수가 아니라
   화면 폭으로 결정돼서, 같은 클래스를 쓰는 그로우코어 3장이 중간 폭에서
   2열로 접히고 세 번째 티어만 아래 줄에 혼자 남아요. 가격 계단은 나란히
   놓여야 비교가 되니까 개수를 마크업에 선언하는 쪽을 골랐어요.
   카드 수가 또 바뀌면 service.html의 이 클래스도 같이 고쳐요. */
.price-grid--duo { grid-template-columns: repeat(2, 1fr); }

/* 테두리·모서리·패딩·hover는 .addon-card에서 물려받아요 */
.price-card {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  justify-items: start;
}

/* 구분선 아래 전부를 한 덩어리로 — subgrid는 남는 자식을 마지막 행에 겹쳐
   쌓아버려서(암시적 행을 안 만들어요), 카드마다 자식 수가 같아야 해요. */
.price-card__details {
  width: 100%;
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  justify-items: start;
}

/* 이름·약속·가격·버튼·나머지 다섯 줄을 카드들이 같은 행에 놓아요.
   설명 길이가 카드마다 달라서 이게 없으면 가격과 버튼이 계단처럼 어긋나요.
   span 5는 카드 "안" 자식 수예요 — 카드 장수와 무관하니 2티어에서도 그대로예요.
   대신 .price-card의 직계 자식을 5개(이름묶음·약속·가격·버튼·details)에서
   벗어나게 만들면 안 돼요. 항목을 더할 때는 details 안 <ul>에 <li>로 넣어요. */
@supports (grid-template-rows: subgrid) {
  .price-card {
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
}

/* 제품 섹션(#findcore·#growcore) 안 티어 그리드 — 앞에 오는 게 h3/문단이라
   위 간격을 따로 줘요. */
.product .price-grid { margin-block-start: var(--space-xl); }

/* 티어 이름 + "기본 추천" 뱃지를 한 줄에 — 뱃지가 grid 아이템이면 이름 위
   별도 줄로 떠서 카드마다 첫 줄 높이가 어긋나요. */
.price-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
}

.price-card__name { font-size: var(--text-md); font-weight: 800; }

.price-card__promise { color: var(--color-ink-2); }
.price-card__promise strong { color: var(--color-ink); font-weight: 800; }
/* 라이트의 "새로 찾아오게 만드는 건 아직 아니에요" 같은 정직한 단서 */
.price-card__promise em { font-style: normal; color: var(--color-muted); }

.price-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* CTA 아래 얇은 선 — "여기까지가 결정, 아래는 내용" 경계 */
.price-card__divider {
  width: 100%;
  height: var(--rule-hair);
  margin: var(--space-2xs) 0;
  border: 0;
  background: var(--color-rule-2);
}

/* "기본에 있는 것 전부, 그리고" — 예전엔 목록 첫 항목이었는데,
   나머지 항목과 성격이 달라서(포함관계 선언 vs 개별 항목) 라벨로 올렸어요. */
.price-card__plus-label {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-ink-2);
}

.price-card__list li { position: relative; padding-inline-start: 1.35rem; }
.price-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent-text);
  font-weight: 800;
}

/* 그 티어에 "없는 것" — 라이트와 스탠다드를 가르는 축이라 눈에 보이게 해요 */
.price-card__list .is-off { color: var(--color-muted); }
.price-card__list .is-off::before { content: "—"; left: 0; color: var(--color-rule); }

/* 이중 가격 — 어느 폭에서든 2행 그리드예요. flex+wrap이면 단위나 정가가
   예측 못 할 지점에서 혼자 떨어져요. */
.price-tag { display: grid; gap: 0; margin-block-start: var(--space-2xs); }

.price-tag__was { font-size: var(--text-sm); color: var(--color-muted); }
.price-tag s { text-decoration-thickness: 1px; }

.price-tag__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35em; }

/* 가격이 카드에서 제일 먼저 눈에 들어와야 해서 히어로급 토큰을 재사용해요
   (새 px를 만들지 않으려고 --text-display-s를 빌려 썼어요) */
.price-tag__now {
  font-size: var(--text-display-s);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-accent-text);
}

.price-tag__unit { font-size: var(--text-sm); color: var(--color-muted); }
/* 구분점은 CSS로 — 스크린리더가 "가운뎃점"을 읽지 않게요 */
.price-tag__unit::before { content: "· "; }

/* 그로우코어 6개월 선납가 — 세 번째 숫자라 톤을 확 낮춰요.
   정가(취소선) · 월 구독가(큼) · 선납가(작고 조용히) 순으로 읽히게. */
.price-tag__prepay {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.price-tag__prepay strong { color: var(--color-accent-text); font-weight: 800; }

/* 비교표 안에서는 숫자를 한 단계 줄여 행 높이를 다른 행과 맞춰요 */
.price-tag--inline .price-tag__now { font-size: var(--text-md); }

.price-card__note { font-size: var(--text-sm); color: var(--color-muted); }
.price-card__note strong { color: var(--color-ink-2); font-weight: 700; }

/* 추천 티어 — 테두리 두께는 그대로 둬요. 굵히면 옆 카드와 1px 어긋나요.
   대신 코럴 글로우로 띄워요. box-shadow는 박스 크기를 안 건드려서 정렬이 안 흔들려요. */
.price-card.is-featured {
  border-color: var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 4%, var(--color-paper));
  box-shadow: 0 28px 56px -30px color-mix(in oklch, var(--color-accent) 40%, transparent),
              var(--shadow-glass);
}

.price-card.is-featured:hover {
  box-shadow: 0 32px 64px -28px color-mix(in oklch, var(--color-accent) 50%, transparent),
              var(--shadow-glass);
}

/* 추천 카드를 물리적으로 키우진 않아요 — subgrid로 세 카드 앞 4줄을 같은 행에
   묶어놨는데 여기만 패딩·마진이 다르면 그 정렬이 깨져요. 코럴 테두리 + 틴트 +
   글로우 세 겹이면 이미 충분히 떠 보여요. */

/* 58rem은 3열 기준값이에요 — 여기서 카드 하나가 약 269px이 되고, 그보다 좁으면
   답답해져요. 2열(--duo)은 열이 하나 적으니 같은 카드 폭이 훨씬 늦게 와서,
   1열 전환도 40rem으로 따로 잡아요 (.addon-grid와 같은 지점 — 같은 wrap 안
   2열이라 기하가 같아요). 그래서 3열용 규칙에서 --duo를 빼요. */
@media (max-width: 58rem) {
  /* 1열로 접히면 카드 하나가 800px까지 벌어져요 — 버튼이 그만큼 길어지고
     읽는 줄도 너무 길어져서 폭을 잡아둬요. */
  .price-grid:not(.price-grid--duo) { grid-template-columns: 1fr; max-width: 32rem; row-gap: var(--space-lg); }
  /* 1열이면 나란히 맞출 옆 카드가 없어요 — subgrid를 끄고 row-gap을 카드 사이로 되돌려요 */
  /* 자식 결합자를 써야 해요 — 안 그러면 아직 2열인 --duo 카드의 subgrid까지 꺼져요 */
  .price-grid:not(.price-grid--duo) > .price-card { grid-row: auto; grid-template-rows: none; }
}

@media (max-width: 40rem) {
  /* 2티어 그리드도 여기서 1열로 (위 58rem 블록과 같은 이유·같은 값) */
  .price-grid--duo { grid-template-columns: 1fr; max-width: 32rem; row-gap: var(--space-lg); }
  .price-grid--duo > .price-card { grid-row: auto; grid-template-rows: none; }
}