/**
 * assets/css/page.css — 안내 페이지 공통 (기능·요금·도입 절차·DNS·문의·약관)
 *
 * ⚠️ 페이지 전용 클래스만 둔다. 전역 요소 스타일은 base.css 에만 적는다.
 *
 * @version 1.4.2 (2026-09-14) 실제 넘치는 모바일 안내 표의 스크롤 문구.
 * @version 1.4.1 (2026-09-14) 안내 설명 폭·담당 표 열 너비·관련 안내 제목.
 * @version 1.4.0 (2026-09-14) 운영 준비 문서의 본문·링크·모바일 줄바꿈.
 * @version 1.3.2 (2026-09-09) 연락 정보 안내 축소·템플릿 제목과 둘러보기 링크 한 줄 배치.
 * @version 1.3.1 (2026-09-09) 연락받을 정보 필수 그룹·입력 오류 표시.
 * @version 1.3.0 (2026-09-09) 상담 폼 2열 그리드·간결한 여백, 모바일 1열 대응.
 * @version 1.2.1 (2026-09-09) 기능·체험 카드의 최소 폭이 모바일 본문 폭을 넘지 않도록 제한.
 * @version 1.2.0 (2026-08-10) 토큰 이름을 base.css 한 벌(--color-… · --radius-…)로 맞췄다. 값은 그대로다
 * @version 1.1.0 (2026-08-07) 환불 안내 문서형 페이지용 블록(.doc-list/.doc-steps/.doc-contact)
 *   추가 + 요금·기능 블록을 DS07 색으로 통일. 커밋 affcb7f·0077377
 * @version 1.0.1 (2026-08-07) 정의되지 않은 var(--shadow) 를 쓰던 무효 선언 제거
 * @version 1.0.0
 */

/* ── 문서형 페이지 (환불 안내 등) ───────────────────────────────────────
   ⚠️ 테마 번호 배지(.tpl-card__no)는 여기에 두지 않는다. 갤러리 화면은 이 파일이
      아니라 templates.css 를 로드하므로 그쪽에만 있어야 한다. */
.doc-list { margin: 0 0 8px; padding-left: 20px; }
.doc-list li { color: var(--color-text-light); line-height: 1.85; }
.doc-list li + li { margin-top: 6px; }

.doc-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.doc-steps li {
    position: relative; padding: 16px 0 16px 44px;
    border-bottom: 1px solid var(--color-border);
}
.doc-steps li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 16px;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 700;
}
.doc-steps b { display: block; margin-bottom: 3px; }
.doc-steps span { color: var(--color-text-light); font-size: 14px; }

.doc-contact {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    padding: 22px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg-gray);
}
.doc-contact b { display: block; margin-bottom: 4px; font-size: 14px; }
.doc-contact span { color: var(--color-text-light); font-size: 14px; }

@media (max-width: 560px) {
    .doc-contact { grid-template-columns: 1fr; }
}

/* 운영 준비 문서 */
.page-head--setup p { max-width: none; }
.setup-guide { max-width: 960px; overflow-wrap: anywhere; }
.setup-guide .info-table th[scope="row"] { width: 48%; }
.setup-guide .setup-guide__scroll-hint { margin: -10px 0 20px; color: var(--color-text-light); font-size: 13px; text-align: center; }
@media (min-width: 900px) {
    .setup-guide .info-table th[scope="row"] { white-space: nowrap; }
}
.setup-guide p, .setup-guide li { line-height: 1.85; }
.setup-guide > h2 { margin: 36px 0 12px; font-size: 22px; }
.setup-guide .feature { min-width: 0; }
.setup-guide .feature p + p { margin-top: 14px; }
.setup-guide .doc-steps li { padding-top: 20px; padding-bottom: 20px; }
.setup-guide .doc-steps li::before { top: 22px; }
.setup-guide a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.setup-guide__nav { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.setup-guide__nav h2 { margin: 0 0 14px; font-size: 20px; }
.setup-guide__nav ul { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }

/* ── 기능 안내 ─────────────────────────────────────────────────────────── */
.feature-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; margin-top: 8px;
}
.feature-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.feature {
    padding: 24px; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); background: #fff;
}
.feature h2 { font-size: 17px; margin-bottom: 8px; }
.feature p { margin: 0; font-size: 15px; color: var(--color-text-light); }

/* ── 요금 ──────────────────────────────────────────────────────────────── */
/* box-shadow 는 base.css 금지 2번이라 쓰지 않는다. 1px 실선으로 구분한다.
   (1.0.1 이전에는 정의된 적 없는 var(--shadow) 를 쓰고 있어 선언이 무효였다 —
    화면에는 원래부터 그림자가 없었다) */
.price-card {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    overflow: hidden; background: #fff;
}
.price-card__head { padding: 28px 28px 20px; border-bottom: 1px solid var(--color-border); }
.price-card__head h2 { font-size: 21px; margin-bottom: 4px; }
.price-card__sub { margin: 0; color: var(--color-text-light); font-size: 15px; }

.price-card__figures {
    display: grid; grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--color-border);
}
.price-figure { padding: 26px 28px; }
.price-figure + .price-figure { border-left: 1px solid var(--color-border); }
.price-figure--main { background: var(--color-mint); }
.price-figure__label { display: block; font-size: 14px; color: var(--color-text-light); font-weight: 600; }
.price-figure__value { display: block; font-size: 32px; color: var(--color-text); letter-spacing: -.02em; margin: 4px 0 2px; }
.price-figure__note { font-size: 13.5px; color: var(--color-text-light); }
/* 부가세 별도 표기 — 작게 두되 반드시 보이게 한다 */
.price-figure__note small { font-size: 12.5px; }

.price-card__list { list-style: none; padding: 24px 28px; margin: 0; }
.price-card__list li { padding-left: 24px; position: relative; margin-bottom: 10px; }
.price-card__list li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--color-primary); font-weight: 800;
}
.price-card__foot { padding: 0 28px 28px; }

/* ── 문의 폼 ───────────────────────────────────────────────────────────── */
.form { margin-top: 8px; }

.contact-head { padding: 30px 0 26px; }
.contact-section { padding: 30px 0 48px; }
.contact-form {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px; margin: 0;
}
.contact-form .form__row { min-width: 0; margin: 0; }
.contact-form__full { grid-column: 1 / -1; }
.contact-form__reach { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-form__reach legend { padding: 0; }
.contact-form__row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.contact-form__row-head .form__label { flex-shrink: 0; margin: 0; }
.contact-form__hint { color: var(--color-text-light); font-size: 12px; white-space: nowrap; }
.contact-form__browse { font-size: 13px; white-space: nowrap; }
.contact-form__reach-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.contact-form__error { color: var(--color-danger-text); }
.contact-form [aria-invalid="true"] { border-color: var(--color-danger-text); }
.contact-form__selection {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    padding: 14px 16px; border: 1px solid var(--color-border);
    background: var(--color-bg-gray);
}
.contact-form__selection p { margin: 0; }
.contact-form textarea { display: block; resize: vertical; }
.contact-form__footer { display: flex; align-items: center; gap: 24px; }
.contact-form__footer .form__consent { flex: 1; margin: 0; }
.contact-form__footer .form__actions { flex-shrink: 0; margin: 0; }

@media (max-width: 640px) {
    .contact-head { padding: 24px 0 20px; }
    .contact-section { padding: 24px 0 36px; }
    .contact-form { grid-template-columns: 1fr; gap: 16px; }
    .contact-form__reach-fields { grid-template-columns: 1fr; }
    .contact-form__footer { flex-direction: column; align-items: stretch; gap: 16px; }
    .contact-form__footer .btn { width: 100%; }
    .price-card__figures { grid-template-columns: 1fr; }
    .price-figure + .price-figure { border-left: 0; border-top: 1px solid var(--color-border); }
    .price-figure__value { font-size: 28px; }
}