/* 랜딩 — 히어로, 카드 그리드, 프로세스, 안심 카피 */

/* ──────────────────────────────────────────────────────────────────────
 * 노드 네트워크 배경 캔버스 — code.heal7.com landing-network 미러링 (2026-05-12).
 *   - body 직속 자식: <canvas id="landing-network-canvas">
 *   - z-index -1: body 배경 그라디언트 위, 본문(nav/main 자연 흐름) 뒤.
 *   - 라이트(default): multiply blend + 약한 불투명도 — 흰 배경에 진한 시안/그레이 노드.
 *   - 다크: screen blend + 강한 불투명도 — 검정 배경에 별처럼 빛나는 노드.
 *   - 청광 오버레이(body::before/::after, z-index 50)는 canvas 위로 덮여 야간 톤 적용됨.
 * ────────────────────────────────────────────────────────────────────── */
#landing-network-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  display: block;
  /* 라이트 모드 (default) — 흰 배경에 어두운 노드.
     2026-05-12: 사용자 보고 — 라이트 모드에서 노드가 거의 안 보임 → opacity 30% 증강
     (0.34 → 0.44). multiply 모드에서 강도는 opacity가 결정(brightness 올리면 색이 옅어져
     반대 효과). saturate도 0.85 → 1.0으로 시안 톤 또렷하게. */
  opacity: 0.44;
  mix-blend-mode: multiply;
  filter: saturate(1.0) brightness(0.98);
}
:root[data-theme="dark"] #landing-network-canvas {
  /* 다크 모드 — 검정 배경 위에 별처럼 빛나는 노드, screen blend */
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: saturate(1.15);
}
/* prefers-reduced-motion 사용자 — RAF 애니메이션은 JS 내부에서 처리하지 않으나
   캔버스 자체를 약하게 또는 숨김으로 시각 자극 줄임. */
@media (prefers-reduced-motion: reduce) {
  #landing-network-canvas { opacity: 0.18; }
}

.hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  overflow: hidden;
}
.hero__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HERO --split — 좌 슬로건 / 우 3D ASCII 물결 폭포 (2-column)
   code.heal7.com의 lp-hero-text/lp-hero-visual 패턴과 일관.
   ============================================================ */
.hero--split { padding: var(--space-12) 0 var(--space-10); }
.hero__inner--split {
  max-width: var(--container);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-10);
  align-items: center;
  text-align: left;
}
.hero__inner--split .hero__title,
.hero__inner--split .hero__lede {
  margin-left: 0;
  margin-right: 0;
}
.hero__inner--split .hero__compose { justify-content: flex-start; }
.hero__visual {
  /* WHY (2026-05-11 디자인 갱신): 라운드 사각/글래스카드 컨테이너 제거.
     "비처럼 내려가는" 정서는 경계 없는 흐름 — 컨테이너 박스는 정서를 거스름.
     캔버스 투명 배경으로 페이지와 자연스럽게 블렌딩, 가장자리는 자연 fade. */
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  max-height: 560px;
}
.hero__waterfall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 1024px) {
  .hero__inner--split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-8);
  }
  .hero__inner--split .hero__compose { justify-content: center; }
  /* 태블릿(768~1024px): 1-column으로 떨어진 상태에서 슬로건 아래 폭포를 작게 보존. */
  .hero__visual { max-width: 420px; margin: 0 auto; aspect-ratio: 1 / 1; }
}
@media (max-width: 799px) {
  /* 8인치 이하(<800px): 우측 폭포 숨김 + JS init 가드(hero-waterfall.js)로
     페인트·rAF·메모리·배터리 부담 모두 0.
     기준: iPad mini 8.3"(744) / Galaxy Tab A 8.0"(800) 등 소형 태블릿+phone 포함.
     iPad 10.2"(810) 이상은 1-col layout으로 폭포를 슬로건 아래 작게 보존. */
  .hero__visual { display: none; }
}
@media (max-width: 560px) {
  .hero--split { padding: var(--space-10) 0 var(--space-8); }
}
.hero__eye {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  border: 1px solid var(--line);
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: var(--space-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__eye-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-copper);
  box-shadow: 0 0 0 3px rgba(31,58,138,0.18);
}
.hero__title { margin: 0; }
.hero__title-2 { display: block; margin-top: 8px; color: var(--ink-soft); font-weight: 500; font-size: clamp(18px, 2.4vw, 24px); font-family: var(--font-sans); letter-spacing: -0.005em; line-height: 1.4; }
/* "글벗" 옆에 한자 병기 — 메인 타이포 무게를 깨지 않게 명조 + copper 톤으로 한 톤 낮춤.
   2026-05-11: 위첨자(+0.32em) → 아랫첨자(-0.06em), font-size 0.42→0.36em으로 시각 정렬.
   2026-05-11 (후속 #1): 한자 가독성 보강을 위해 0.36em → 0.468em (+30%).
   2026-05-11 (후속 #2): 추가 +30% → 0.6084em (원본 대비 약 +69%, 한글 대비 ~61% 크기).
   vertical-align(-0.06em)도 em 단위라 비례 보정되어 베이스라인 정렬은 그대로 유지된다.
   screen reader에는 sr-only "(문우)"로 한글 발음 제공. */
.hero__title-hanja {
  display: inline-block;
  font-family: var(--font-serif), "Noto Serif KR", serif;
  font-weight: 500;
  font-size: 0.6084em;
  letter-spacing: 0.04em;
  color: var(--brand-copper);
  vertical-align: -0.06em;   /* 아랫첨자: 한글 베이스라인보다 살짝 아래 */
  opacity: 0.92;
}
:root[data-theme="dark"] .hero__title-hanja { color: var(--accent-soft, #C7B79A); }
.hero__lede {
  margin: var(--space-5) auto 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: var(--fz-18);
  line-height: 1.75;
  font-weight: 500;
}
.hero__cta {
  display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-8);
}
.hero__cta .btn { min-width: 180px; }
.hero__chips {
  list-style: none; padding: 0; margin: var(--space-8) auto 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 560px;
}
.hero__chips li {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  font-size: var(--fz-13);
  color: var(--ink-mute);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* hero bg ornaments */
.hero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__bg::before, .hero__bg::after {
  content: ""; position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}
.hero__bg::before {
  width: 380px; height: 380px;
  top: 8%; left: -90px;
  background: radial-gradient(circle, rgba(31,58,138,0.18), transparent 70%);
}
.hero__bg::after {
  width: 460px; height: 460px;
  bottom: -120px; right: -120px;
  background: radial-gradient(circle, rgba(31,58,138,0.20), transparent 70%);
}
:root[data-theme="dark"] .hero__bg::before {
  background: radial-gradient(circle, rgba(138,180,248,0.22), transparent 70%);
}
:root[data-theme="dark"] .hero__bg::after {
  background: radial-gradient(circle, rgba(46,80,181,0.18), transparent 70%);
}

/* Process */
.process {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-4);
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
}
.process__step {
  padding: var(--space-6);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.process__num {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-indigo), var(--brand-copper));
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fz-14);
}
.process__title { margin: 8px 0 0; }
.process__desc { color: var(--ink-soft); font-size: var(--fz-14); line-height: 1.65; }
.process__arrow {
  display: grid; place-items: center;
  color: var(--brand-copper);
  opacity: 0.6;
}
:root[data-theme="dark"] .process__arrow { color: var(--accent-soft); }
.process__arrow svg { width: 36px; height: 24px; }

@media (max-width: 720px) {
  .process { grid-template-columns: 1fr; }
  .process__arrow { transform: rotate(90deg); margin: 6px auto; }
}

/* Cards grid — 기본 4-col, 3-col modifier(why 글벗 6장 카드용) */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.feat-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .feat-grid,
  .feat-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .feat-grid,
  .feat-grid--3col { grid-template-columns: 1fr; }
}

.feat-card {
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none !important;
  color: var(--ink);
  min-height: 220px;
}
.feat-card[aria-disabled="true"] {
  opacity: 0.65;
  pointer-events: none;
}
.feat-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(223,231,251,0.92));
  border: 1px solid rgba(31,58,138,0.14);
  display: grid; place-items: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-sans);
  font-size: 24px; line-height: 1;
  box-shadow: 0 8px 18px rgba(31,58,138,0.10);
}
:root[data-theme="dark"] .feat-card__icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(138,180,248,0.18));
  border-color: rgba(138,180,248,0.20);
}
.feat-card__title { margin: 0; }
.feat-card__desc { color: var(--ink-soft); font-size: var(--fz-14); line-height: 1.65; flex: 1; }
.feat-card__more {
  font-size: var(--fz-13);
  color: var(--accent);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: auto;
}

/* Reassure block */
.reassure-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(31,58,138,0.06), rgba(31,58,138,0.10));
  border: 1px solid var(--line);
}
:root[data-theme="dark"] .reassure-block {
  background: linear-gradient(135deg, rgba(138,180,248,0.08), rgba(46,80,181,0.10));
}
.reassure-block .quote {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
.reassure-block .quote .copper { font-style: normal; }
.reassure-block .small { color: var(--ink-soft); font-size: var(--fz-14); }

/* ============================================================
   HERO — 작가 보조 도구 톤 (재서술 2026-05-11)
   ============================================================ */
.hero__compose {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 560px;
  flex-wrap: wrap;
}
.hero__compose-label {
  flex: 1 1 280px;
  min-width: 0; /* WHY: hero--split 768~1024px 컬럼 폭이 좁을 때 label이 wrap 안 되게 — 입력+CTA 1줄 유지 */
  display: block;
}
.hero__compose-label input {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  padding: 12px 4px;
  font: 400 var(--fz-16)/1.5 var(--font-sans);
  color: var(--ink-strong);
  outline: none;
  transition: border-color var(--dur-2) var(--easing-standard);
}
.hero__compose-label input:focus {
  border-bottom-color: var(--accent);
}
.hero__compose-label input::placeholder {
  color: var(--ink-faint);
}
.hero__compose-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink-strong);
  color: var(--ink-strong);
  font: 600 var(--fz-15)/1.5 var(--font-sans);
  cursor: pointer;
  transition: gap var(--dur-2) var(--easing-standard),
              border-color var(--dur-2) var(--easing-standard);
}
.hero__compose-cta:hover {
  gap: 12px;
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.hero__sub-cta {
  margin-top: var(--space-5);
  font-size: var(--fz-14);
}
.hero__sub-cta a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color var(--dur-2);
}
.hero__sub-cta a:hover {
  color: var(--accent);
}
/* SUB-HERO — 세 자리 카드 */
.three-seats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.three-seats__card {
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.three-seats__num {
  font-size: var(--fz-24);
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}
.three-seats__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-serif);
}
.three-seats__when {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--fz-14);
  font-style: italic;
}
.three-seats__how {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fz-15);
  line-height: 1.7;
}
.three-seats__anchor {
  margin: var(--space-8) 0 0;
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fz-13);
  letter-spacing: 0.02em;
}
@media (max-width: 840px) {
  .three-seats { grid-template-columns: 1fr; }
}