/* 하위 페이지 공용 테마
 *
 * 하위 페이지들은 원래 베이지 사이트를 색상만 일괄 치환해 다크로 바꾼 것이라,
 * 타이포와 레이아웃은 예전 그대로였다. 이 파일이 홈(index.html)의 기준에 맞춰
 * 그 위를 덮는다. 각 페이지의 <style> 뒤에 로드되므로 같은 우선순위면 이쪽이 이긴다.
 *
 * 페이지별로 고칠 게 생기면 이 파일 한 곳만 보면 된다.
 */

:root {
  --sp-paper: #F1F0EE;
  --sp-paper-2: #E7E5E2;
  --sp-ink-on-paper: #161616;
  --sp-ink-on-paper-dim: #55534F;
}

/* ─────────────────────────────────────────────
   1. 타이포 — 홈과 같은 크기·행간
   ───────────────────────────────────────────── */

.section-sub {
  font-size: 16px !important;
  line-height: 1.95 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  max-width: 720px;
}

.section-title {
  font-size: clamp(30px, 2.7vw, 44px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em;
}

.section-label-text {
  font-size: 13px !important;
  letter-spacing: 0.24em !important;
  color: var(--gold) !important;
  text-transform: uppercase;
}

.section-label-line {
  width: 36px;
  height: 1px;
  background: var(--gold);
}

.for-whom-card h4,
.service-item h4,
.process-step h4 {
  font-size: 18px !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
}

.for-whom-card p,
.service-item p,
.process-step p {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

.faq-q { font-size: 16px !important; line-height: 1.6 !important; }
.faq-a, .faq-a-inner { font-size: 15px !important; line-height: 1.95 !important; }

/* 가독성 하한선.
 * 페이지마다 제각각인 12.5~13px 본문을 한 번에 끌어올린다. nav·footer·고정
 * 레일은 자체 크기가 맞으므로 건드리지 않는다. */
section p,
section li,
.section p,
.section li {
  font-size: 15px;
  line-height: 1.9;
}

/* 페이지마다 카드·리스트 클래스 이름이 제각각이라 (profile-list, expert-hero-point,
 * info-box …) 이름 패턴으로 잡는다. 페이지별 규칙과 특정도가 같으면 이 파일이
 * 나중에 로드되므로 이쪽이 이긴다. */
[class*="-card"] p, [class*="-card"] li,
[class*="-list"] li,
[class*="-intro"] p,
[class*="-point"] p,
[class*="-item"] p, [class*="-item"] li,
[class*="-box"] p, [class*="-box"] li,
[class*="-body"] p, [class*="-body"] li {
  font-size: 15px;
  line-height: 1.85;
}

[class*="-point"] h4,
[class*="-card"] h4 { font-size: 17px; }

/* 전문가 소개의 3단 카드는 폭이 116px 밖에 안 돼서 15px 면 두 어절마다
 * 줄이 바뀐다. 이 카드만 한 단계 줄인다. */
.expert-hero-point p { font-size: 14px; line-height: 1.8; }

/* 좁은 카드에서 양쪽정렬 + word-break:keep-all 이 만나면 단어 사이가
 * 벌어져 글이 흩어진다. 카드 본문은 왼쪽정렬로 고정한다. */
[class*="-card"] p, [class*="-card"] li,
[class*="-point"] p,
[class*="-item"] p, [class*="-item"] li,
[class*="-list"] li,
[class*="-box"] p { text-align: left; }

.mission-kw-desc,
.info-box-title,
.value-card-sub,
.channel-card-link,
.btn-white,
.cta-btn,
.story-principle-label { font-size: 14px !important; }

.mission-kw-eyebrow,
.page-header-eyebrow-text,
.step-badge { font-size: 12px !important; letter-spacing: 0.16em; }

/* 신청 폼: 라벨과 안내·동의 문구는 실제로 읽고 판단해야 하는 내용이라
 * 12px 로 두면 안 된다. */
.flbl-a { font-size: 13px !important; letter-spacing: 0.06em; }

.frow > div,
.frow label,
.fcheck,
.fcheck label,
.fcheck span,
.info-item,
.apply-form-card > div { font-size: 14px; line-height: 1.75; }

/* ─────────────────────────────────────────────
   2. 페이지 히어로 — 대형 영문 워터마크
   섹션에 data-wm="COURT" 를 달면 그 글자가 배경에 깔린다.
   ───────────────────────────────────────────── */

.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero[data-wm]::after {
  content: attr(data-wm);
  position: absolute;
  right: -0.04em;
  bottom: 4vh;
  z-index: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(72px, 12vw, 190px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.055);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.page-hero > * { position: relative; z-index: 1; }

.page-hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.34 !important;
}

/* ─────────────────────────────────────────────
   3. 섹션 리듬 — 서비스 내용 섹션만 라이트로 뒤집는다
   전부 어두우면 스크롤할 때 구간이 구분되지 않는다.
   ───────────────────────────────────────────── */

.service-content {
  background: var(--sp-paper) !important;
  position: relative;
  overflow: hidden;
}

.service-content .section-title { color: var(--sp-ink-on-paper) !important; }
.service-content .section-sub { color: var(--sp-ink-on-paper-dim) !important; }

/* --burgundy-on-dark 는 어두운 배경용 로즈다. 밝은 배경 위에서는 읽히지
   않으므로 원래의 진한 버건디로 되돌린다. */
.service-content .section-title em,
.service-content em,
.service-content strong { color: #8E2237 !important; }
.service-content .section-label-text { color: #8E2237 !important; }
.service-content .section-label-line { background: #8E2237; }

.service-content[data-wm]::before {
  content: attr(data-wm);
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(78px, 12vw, 180px);
  letter-spacing: 0.06em;
  color: rgba(20, 20, 20, 0.045);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 라이트 섹션 안의 카드는 어두운 카드로 대비를 준다 */
.service-content .service-item {
  background: #191919 !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.service-content .service-item h4 { color: #fff !important; }
.service-content .service-item p { color: rgba(255, 255, 255, 0.62) !important; }

/* ─────────────────────────────────────────────
   4. 카드 — 경계와 호버
   ───────────────────────────────────────────── */

.for-whom-card,
.service-item,
.process-step {
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.for-whom-card:hover,
.service-item:hover,
.process-step:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 151, 106, 0.45);
}

.for-whom-num,
.process-step-num {
  font-size: 54px !important;
  color: rgba(255, 255, 255, 0.13) !important;
}

/* 그리드 간격: 2px 는 붙어 보인다 */
.for-whom-grid,
.service-grid,
.process-steps,
.process-grid {
  gap: 12px !important;
  margin-top: 56px !important;
}

/* ─────────────────────────────────────────────
   5. 섹션 여백 — 홈과 같은 호흡
   ───────────────────────────────────────────── */

.section {
  padding-top: 120px !important;
  padding-bottom: 110px !important;
}

@media (max-width: 1024px) {
  .for-whom-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .process-steps, .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  .section { padding-top: 64px !important; padding-bottom: 56px !important; }
  .section-title { font-size: 27px !important; }
  .section-sub { font-size: 15px !important; }
  .for-whom-grid,
  .service-grid,
  .process-steps,
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 32px !important;
  }
  .page-hero[data-wm]::after,
  .service-content[data-wm]::before { font-size: 62px !important; }
  .for-whom-card, .service-item, .process-step { padding: 28px 24px !important; }
  .for-whom-card h4, .service-item h4, .process-step h4 { font-size: 17px !important; }
}