/* 홈(B안 다섯 판) 전용 마감 층 — impeccable typeset · layout · colorize · delight (2026-10-13).
   `landing-a/style.css` 는 A안 검토 장(`/landing-a`)과 같이 쓰므로 거기를 고치지 않고 **여기에 얹는다.**
   `hero.css` 다음에 불러온다. 문구는 한 글자도 안 바꾼다. */

/* ── 1. typeset ───────────────────────────────────────────────────────────────
   역할 = 히어로 제목(display, hero.css 정본 — 안 건드린다) · 절 제목 h2 · 기능 제목 h3 · 본문 · 라벨.
   ① 히어로 아래 절 제목이 34/44/32/38px 네 크기에 굵기 550 · 행간 1.38~1.5 였다 — 히어로(700 · 1.14)와
      다른 목소리로 읽혔고 「Connect your Google Calendar.」 만 혼자 컸다. 한 역할 = 한 크기.
   ② ko·ja 히어로만 시스템 글꼴(Apple SD Gothic Neo / Hiragino)이고 그 아래는 Noto 였다 — 한 장에 한글
      서체 둘. 히어로가 페이지 글꼴을 물려받게 한다(en 은 원래 둘 다 시스템 글꼴이라 그대로).
   ③ en 본문 행간 1.9~1.95 는 라틴 16px 엔 헐겁다(줄이 따로 논다) → 1.65. ko·ja 는 1.8 로 덜 줄인다. */
html:lang(ko) #lb-hero,html:lang(ja) #lb-hero{font-family:inherit}

body[data-hero] main :is(#explore-title,#connection-title,#faq-title){
  font-size:clamp(30px,2.75vw,38px);font-weight:650;line-height:1.2}
body[data-hero] #closing-title{font-size:clamp(32px,3.3vw,46px);font-weight:650;line-height:1.16}
body[data-hero] :is(.monthly-feature,.feature-card) h3{font-size:clamp(26px,2.2vw,30px);font-weight:650;line-height:1.22}
body[data-hero] .explore-copy h3{font-size:24px;font-weight:650;line-height:1.25}
html:lang(en) body[data-hero] main :is(h2,h3){letter-spacing:-.022em}

body[data-hero] .feature-copy>p:not(.feature-label),
body[data-hero] .connection>div>p:not(.eyebrow),
body[data-hero] .review-intro p:not(.eyebrow){line-height:1.65}
body[data-hero] :is(.trust-list p,.faq details p){line-height:1.65}
html:lang(ko) body[data-hero] :is(.feature-copy>p:not(.feature-label),.connection>div>p:not(.eyebrow),.trust-list p,.faq details p),
html:lang(ja) body[data-hero] :is(.feature-copy>p:not(.feature-label),.connection>div>p:not(.eyebrow),.trust-list p,.faq details p){line-height:1.8}
body[data-hero] .trust-list p{font-size:15px}
body[data-hero] .feature-label{font-weight:600}
body[data-hero] .mid-cta strong{font-size:20px;font-weight:650;line-height:1.3}
body[data-hero] .choice-note{line-height:1.7}
/* ja 점프 링크가 390 에서 `見なが/ら計画` 처럼 낱말 가운데서 갈렸다 — 본문과 같은 구 단위 줄바꿈. */
html:lang(ja) body[data-hero] .intro-strip a{word-break:auto-phrase}

@media(max-width:620px){
  body[data-hero] main :is(#explore-title,#connection-title,#faq-title){font-size:29px}
  body[data-hero] #closing-title{font-size:30px}
  body[data-hero] :is(.monthly-feature,.feature-card) h3{font-size:26px}
}

/* ── 2. layout ────────────────────────────────────────────────────────────────
   ① 「Google 연동」 절 제목이 4줄 목록의 **세로 가운데**에 떠 있었다(align-items:center) — 목록보다
      70px 아래에서 시작해 무엇의 제목인지 흐려졌다. 위끝을 맞춘다.
   ② 바로 아래 FAQ 와 오른쪽 칸 시작선이 갈렸다(1fr 1fr · 80 vs 1fr 1.5fr · 80 → x 760 / 648). 연달아 읽는
      두 절이라 같은 5:7 칸을 쓴다 — 오른쪽 목록 둘이 한 선에 선다.
   ③ 768 에서 FAQ 는 이미 한 단인데 Google 절만 두 단이라 제목 칸이 230px 로 눌렸다 → 900 이하에서 한 단. */
body[data-hero] :is(.connection,.faq){grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
body[data-hero] .connection>div:first-child{padding-top:22px}
body[data-hero] .faq>div:first-child{padding-top:24px}
@media(max-width:900px){
  body[data-hero] :is(.connection,.faq){grid-template-columns:1fr;row-gap:32px}
  body[data-hero] :is(.connection,.faq)>div:first-child{padding-top:0}
}

/* ── 3. colorize ──────────────────────────────────────────────────────────────
   전략: 색은 늘리지 않고 **역할을 하나씩** 준다. 차분한 온도 그대로.
   ① 주 행동 = 한 색. 「Web 에서 시작」 이 히어로에선 #191d1a(거의 검정), 아래 세 곳(중간·마무리·하단 고정 바)에선
      #244b40(초록)이었다 — 같은 버튼이 두 색. 브랜드 잉크 #25352F 하나로(흰 글자 12.9:1).
      초록은 「돌아보기」 띠의 **면**으로만 남는다(행동 색과 겹치지 않게).
   ② 절 라벨 = 한 색. 기능 라벨·「Before you begin」 은 올리브, 「Works with…」·마무리 라벨은 잉크였다 →
      전부 --accent-ink(#5f6e1f — 흰 5.6 · 마무리 면 4.7 · 기능 카드 세 면 4.9:1). 어두운 띠 위 라벨은 그대로.
   ③ 점프 링크 셋 앞에 **그 카드의 면 색** 견본 — 띠에서 고른 것이 아래 어느 카드인지 색으로 잇는다(글자가
      이미 말하므로 색만으로 전하는 정보는 없다). 모양은 로고 타일과 같은 둥근 네모.
   ④ 브라우저가 그리는 면 — 선택 영역·체크박스(안드로이드 창)·캐럿을 팔레트로. */
body[data-hero]{--brand-ink:#25352F;--brand-ink-hover:#17221e}
#lb-hero,#androidModal{--btn:#25352F;--btn-hover:#17221e}
body[data-hero] .button:not(.secondary){background:var(--brand-ink);border-color:var(--brand-ink)}
body[data-hero] .button:not(.secondary):hover{background:var(--brand-ink-hover);border-color:var(--brand-ink-hover)}

body[data-hero] main :is(.feature-label,.connection .eyebrow,.faq .eyebrow,.closing .eyebrow){color:var(--accent-ink)}

body[data-hero] .intro-strip a{display:inline-flex;align-items:baseline;gap:10px}
body[data-hero] .intro-strip a::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;transform:translateY(1px);background:var(--sw)}
body[data-hero] .intro-strip a[href="#monthly"]{--sw:#c4d8b2}
body[data-hero] .intro-strip a[href="#daily"]{--sw:#e0d1b4}
body[data-hero] .intro-strip a[href="#habits"]{--sw:#c7cdeb}

body[data-hero] ::selection{background:#E1F5EE;color:#25352F}
body[data-hero] .explore ::selection{background:#e7edc9;color:#284630}
body[data-hero]{accent-color:#25352F;caret-color:#25352F}

/* ── 4. delight — 범례 스포트라이트 (hero.js §5) ──────────────────────────────
   한 문장: 주기는 달력 뒤의 조용한 층이고, 궁금할 때 들여다봤다가 다시 물러난다.
   알약을 가리키면 그 시기의 면만 남고 나머지는 낮아진다 · 알약 자신도 같은 규칙. 지수 감속, 움직임 줄이기에선
   hero.css 의 전역 규칙이 전환을 끈다(상태는 그대로 바뀐다). */
#lb-hero .grid.on .field div{transition:opacity .32s cubic-bezier(.16,1,.3,1)}
#lb-hero .legend .ph-pill{transition:opacity .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1);touch-action:manipulation}
#lb-hero .cal[data-spot] .grid.on .field div{opacity:.18}
#lb-hero .cal[data-spot] .legend .ph-pill{opacity:.45}
/* ⚠️ 남기는 쪽은 낮추는 규칙(.grid.on .field div = 1,4,1)보다 특정성이 커야 한다 — :is() 로 묶으면 1,4,0 이라 져서 고른 시기까지 낮아졌다. */
#lb-hero .cal[data-spot=m] .grid.on .field .f-m,#lb-hero .cal[data-spot=f] .grid.on .field .f-f,
#lb-hero .cal[data-spot=o] .grid.on .field .f-o,#lb-hero .cal[data-spot=l] .grid.on .field .f-l,
#lb-hero .cal[data-spot=m] .legend .ph-m,#lb-hero .cal[data-spot=f] .legend .ph-f,
#lb-hero .cal[data-spot=o] .legend .ph-o,#lb-hero .cal[data-spot=l] .legend .ph-l{opacity:1}
#lb-hero .cal[data-spot=m] .legend .ph-m{box-shadow:inset 0 0 0 1px var(--ph-m-ink)}
#lb-hero .cal[data-spot=f] .legend .ph-f{box-shadow:inset 0 0 0 1px var(--ph-f-ink)}
#lb-hero .cal[data-spot=o] .legend .ph-o{box-shadow:inset 0 0 0 1px var(--ph-o-ink)}
#lb-hero .cal[data-spot=l] .legend .ph-l{box-shadow:inset 0 0 0 1px var(--ph-l-ink)}