/* 도입 패키지 · 자주 묻는 질문 · 도입 문의 — 페이지 끝의 «거래» 장 셋.
 *
 * ★토큰만 본다. 도입 패키지는 밝은 장(`theme-light`)이고 나머지 둘은 어두운 장인데,
 *   여기 적힌 색은 전부 `var(--…)` 라 같은 규칙이 두 바탕에서 다 선다. 어두운 값을
 *   직접 적는 순간(#032029, rgba(0,7,13,…)) 밝은 장에서 그 조각만 «다른 페이지» 가 된다.
 * ★blocks.css 에 있던 옛 규칙과 이름이 같다. 이 파일이 뒤에 읽히므로 같은 속성은
 *   여기 것이 이기지만, 옛 규칙만 건드리던 속성(테두리·바탕·그림자·여백)은 여기서
 *   **명시적으로 다시 적는다** — 옛 줄이 남아 있어도 새지 않게.
 */

/* ══ 도입 — 단일 가격 ══
 * ★★ **비교 열이 아니다.** 값이 하나면 비교할 것이 없다. 카드 하나를 세 칸 그리드에
 *   외롭게 세우면 «뭔가 빠진 화면» 으로 읽히므로, **금액 한 덩어리 + 포함 목록**으로
 *   나눈다. 왼쪽이 값, 오른쪽이 «이게 다 들어간다» 다.
 * ★ 옛 `.plans` / `.plan*` 규칙은 이 파일과 apple-sections.css 에서 함께 걷어냈다.
 *   한쪽만 지우면 남은 쪽이 «죽은 규칙» 으로 남아 다음 사람이 찾아 헤맨다.
 * ★ 색은 전부 토큰이다. `theme-light` 가 --bg-tile·--accent 를 갈아 끼우므로
 *   여기서 어두운 값을 직접 적으면 그 조각만 «다른 페이지» 가 된다. */
.price {
  display: grid; grid-template-columns: minmax(250px, 330px) 1fr;
  gap: var(--s-6); align-items: start;
  padding: var(--s-6); border-radius: var(--r-xl);
  background: var(--bg-tile); border: 1px solid var(--accent-line);
}
.price__tag { display: grid; gap: 10px; align-content: start; }
.price__amount {
  font-size: clamp(38px, 5vw, 58px); font-weight: 700; line-height: 1;
  letter-spacing: -0.04em; color: var(--text-strong);
}
.price__unit { font-size: 15px; color: var(--text-muted); }
/* ★여기서만 큰 버튼을 쓴다. 예전엔 카드 셋에 버튼 셋이 서면 버튼만 보여서 문장형
 *   링크였는데, 이제 하나뿐이라 그 이유가 사라졌다. */
.price__cta { margin-top: var(--s-4); justify-self: start; }

.price__included {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: var(--s-5);
}
.price__group h3 {
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
  font-size: 14px; font-weight: 650; letter-spacing: 0.02em; color: var(--accent);
}
.price__group ul { display: grid; gap: 9px; }
.price__group li {
  position: relative; padding-left: 18px;
  font-size: 14.5px; line-height: 1.45; color: var(--text);
}
.price__group li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
}

/* ★★아직 결선되지 않은 것. **포함 상자 밖**에 둔다 — 같은 칸에 있으면 포함으로 읽히고,
 *   단일 가격에서 그 오해는 그대로 «약속했잖아» 가 된다. */
.price__roadmap {
  margin-top: var(--s-4); padding-left: var(--s-4);
  border-left: 2px solid var(--line-soft);
  font-size: 14px; line-height: 1.6; color: var(--text-muted);
}

@media (max-width: 860px) {
  .price { grid-template-columns: 1fr; padding: var(--s-5); }
}

/* 도입 조건 — 상자 없이, 위에 실선 하나, 아이콘 → 제목 → 한 줄.
 * ★고정 4칸이 아니라 «들어가는 만큼» 이다. 조건이 5개가 되면서 마지막 하나만
 *   다음 줄에 홀로 떨어져 있었다 — 항목을 하나 더 적을 때마다 CSS 를 고치게
 *   만들지 않는다. */
.terms {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-6) var(--s-5); margin-top: var(--s-9);
}
.term { padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
.term__icon { display: block; min-height: 28px; margin-bottom: var(--s-4); color: var(--accent); }
.term .ico { width: 28px; height: 28px; }
.term h4 { font-size: 17px; letter-spacing: -0.02em; }
.term p { margin-top: var(--s-2); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.pricing__note {
  max-width: var(--wrap-narrow); margin: var(--s-7) auto 0; text-align: center;
  font-size: 13px; color: var(--text-faint);
}

/* ══ 자주 묻는 질문 ══
 * 상자 없이 실선으로만 나눈다. 질문은 크게, 답은 본문 크기, 오른쪽에 +/− 표시 하나.
 * ★<details> 라 JS 없이 열리고 닫히며 Ctrl+F 에도 잡힌다 (faq.html 주석). */
.faqs { display: block; border-bottom: 1px solid var(--line-soft); }
.faq { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; overflow: visible; }
.faq[open] { border-color: var(--line-soft); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__q {
  font-size: clamp(19px, 1.7vw, 21px); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.025em; color: var(--text-strong); text-wrap: pretty;
}
.faq__mark { position: relative; flex: none; width: 22px; height: 22px; margin-top: 3px; }
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.6px;
  background: var(--accent); transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease);
}
.faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .faq__mark::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { padding: 0 var(--s-8) var(--s-6) 0; }
/* ★펼칠 때 답이 살짝 떠오른다. `rise` 키프레임은 components.css 에 있다(.more__body 와 같은 것). */
details[open] > .faq__a { animation: rise .4s var(--ease) both; }
.faq__a p { font-size: 17px; line-height: 1.6; color: var(--text-muted); }
/* ★답이 여러 문단이면 사이를 띄운다. 붙여 놓으면 «①②» 같은 갈래가 한 덩이로
 *   보여서, 두 가지를 말하고 있다는 것 자체가 눈에 안 들어온다. */
.faq__a p + p { margin-top: var(--s-4); }
.faq__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.faq__tags span {
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-soft);
  font-size: 11px; font-weight: 600; color: var(--text-faint);
}

/* ══ 도입 문의 ══
 * 왼쪽 글(머리말 → 계약 전 3단계 → 접힌 «계약 뒤» → 직접 연락), 오른쪽 폼 타일.
 * ★머리말은 `.shead--left` 다. 폼과 절차가 왼쪽에서 시작하니 제목도 왼쪽이다 (base.css). */
.contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-9); align-items: start;
}
.contact .shead { margin-bottom: var(--s-7); }
.contact .shead h2 { font-size: clamp(32px, 3.6vw, 48px); }
.contact .shead__lead { font-size: 18px; }

.contact__steps { display: grid; gap: var(--s-4); margin-top: 0; }
.contact__steps li {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); align-items: start;
  padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
}
/* ★단계 번호는 본문 글꼴로 크게. 고정폭은 tabular-nums 로 지키고 모노 글꼴은 쓰지 않는다 —
 *   큰 모노 숫자는 «콘솔» 처럼 읽힌다 (hero.css 의 스탯 숫자와 같은 판단). */
.contact__steps .num {
  font-family: var(--font); font-size: 28px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em; color: var(--accent); padding-top: 0;
}
.contact__steps strong { display: block; font-size: 19px; letter-spacing: -0.02em; color: var(--text-strong); }
.contact__steps p { margin-top: 6px; font-size: 15px; color: var(--text-muted); }
.contact__after { margin-top: var(--s-6); }
.contact__steps--after { margin-top: var(--s-5); }

.contact__direct {
  display: grid; gap: 10px; margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}
.contact__direct li { display: flex; gap: var(--s-4); align-items: baseline; font-size: 15px; }
.contact__direct span { min-width: 4em; padding-top: 0; font-size: 12px; font-weight: 600; color: var(--text-faint); }
.contact__direct a { color: var(--accent); }
.contact__direct em { font-style: normal; color: var(--text); }

/* 폼 타일. 칸 모양 자체는 components.css 의 .field / .pick 이 정한다. */
.cform {
  display: grid; gap: var(--s-5); padding: clamp(32px, 3.4vw, 40px);
  border-radius: var(--r-xl); background: var(--bg-tile); border: 1px solid var(--line-soft);
}
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.cform .btn { margin-top: var(--s-2); }
.cform__status { font-size: 14px; min-height: 1.2em; }
.cform__status.is-ok { color: var(--state-stable); }
.cform__status.is-bad { color: var(--state-unstable); }
.cform__privacy { font-size: 12px; color: var(--text-faint); }

/* ── 좁은 화면 ── */
@media (max-width: 1100px) {
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .price__amount { font-size: 34px; }
  .terms { margin-top: var(--s-7); }
  .faq__a { padding-right: 0; }
  .contact .shead { margin-bottom: var(--s-6); }
  .contact__steps li { grid-template-columns: 44px 1fr; }
  .contact__steps .num { font-size: 24px; }
  .cform { padding: var(--s-5); }
  .cform__row { grid-template-columns: 1fr; }
}