/* 루트 랜딩의 컴포넌트 모양만 — ADR 0086·0135(정식 출시판). 마크업은 apps/site/scripts/site-core-content.ts(renderLanding)가 만든다.
   첫 화면 → 공감 → 3단계 + 지켜 주는 것 → 글 종류별 정리(전환기) → 알아서 나뉘고 내 것은 그대로 → AI 연결(대화 예시 전환기) →
   자주 묻는 질문 → 받기 띠 + 휴대폰 하단 받기 버튼. 색·크기 숫자는 site/tokens.css 변수다. 스크립트·영상·외부 자원은 없다.
   세로 규격 규칙(ADR 0135): 그림 틀 비율은 둘뿐(휴대폰 전체 화면 360:736, 카드 그림 4:3), 한 줄 카드는 subgrid로 번호·제목·글·그림 줄을
   맞추고, 간격은 8px 척도(8·12·16·24·32·40·48). 움직임은 CSS만 쓰고 미지원·움직임 줄이기에서는 모든 글이 보이는 정지 화면이다. */

/* 출처 안내(/sources/)의 돌아가기 링크 — 같은 컴포넌트 CSS를 쓴다. */
.back {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.back:hover {
  color: var(--text);
}

/* 구획 공통 — 같은 머리 모양·같은 세로 여백·같은 머리↔내용 간격 */
.band {
  padding: var(--section-y) 0;
}
.band > .wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.why,
.kinds,
.ai {
  background: var(--surface);
}
.flow,
.own,
.faq {
  background: var(--canvas);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 40em;
}
.section-head h2 {
  font-size: calc(var(--h2-size) + 10px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: var(--heading-tracking);
  text-wrap: balance;
}
.section-head p {
  color: var(--text-2);
  font-size: 17px;
  line-height: var(--leading);
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* 알약 표시 */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--small-size);
  font-weight: 500;
}
.pill-accent {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* 스토어 배지 — 공식 Google Play 배지 그림(둘레 여백 포함 646×250)과 준비 중 글자 배지. Play 배지가 더 크다(배지 규칙). */
.store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.store-play {
  display: inline-flex;
  border-radius: var(--radius);
}
.store-play img {
  width: auto;
  height: 76px;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
}
.store svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.store-label {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.store-small {
  font-size: var(--tiny-size);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.store-big {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.store-get {
  background: var(--ink);
  color: var(--on-ink);
}
a.store-get:hover {
  background: var(--ink-hover);
}
.store-soon {
  border-color: var(--stroke-strong);
  background: var(--canvas);
  color: var(--muted);
}
/* 웹 버전 배지(2026-11-05 공개, ADR 0145) — PC·브라우저에서 바로 쓰는 링크. 준비 중 배지와 같은 크기의 테두리 배지이고 글자는 진하다. */
.store-web {
  border-color: var(--stroke-strong);
  background: var(--canvas);
  color: var(--text);
}
a.store-web:hover {
  border-color: var(--text-2);
}

/* 확인 표시가 붙은 목록(첫 화면 세 줄 · 지켜 주는 것) */
.hero-facts svg,
.promises svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

/* 첫 화면 — 글(왼쪽) + 휴대폰 화면(오른쪽), 가운데 맞춤은 이 구획 하나뿐 */
.hero {
  padding: 72px 0 80px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--small-size);
  font-weight: 700;
}
.hero h1 {
  font-size: var(--display-size);
  line-height: var(--display-leading);
  font-weight: 800;
  letter-spacing: var(--display-tracking);
}
.hero-lead {
  max-width: 34em;
  color: var(--text-2);
  font-size: 19px;
  line-height: 1.65;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
}
.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-shot {
  justify-self: center;
}
/* 첫 화면에 앱 화면이 없으면(캡처 전) 글만 한 단 */
.hero-grid-solo {
  grid-template-columns: minmax(0, 1fr);
}
.hero-grid-solo .hero-copy {
  max-width: 44rem;
}

/* 휴대폰 틀 하나 — 첫 화면·글 종류 전환기가 같은 폭·같은 비율(360:736)을 쓴다. */
.hero-shot.shot-phone,
.kind-shot .shot-phone {
  width: 300px;
  height: auto;
}
.hero-shot.shot-phone img,
.kind-shot .shot-phone img {
  aspect-ratio: 360 / 736;
  object-fit: cover;
  object-position: top;
}

/* 공감 — 장면 셋(같은 높이) + 답 한 줄 */
.why-scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.why-scene {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: var(--canvas);
}
.why-tag {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.why-scene p {
  color: var(--text);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  text-wrap: balance;
}
.why-answer {
  max-width: 48em;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 500;
}

/* 한 줄 카드(3단계 · 알아서 나뉘고) — subgrid로 번호·제목·글·그림 줄을 서로 맞춘다. 그림은 4:3 틀 하나. */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
}
.steps-row {
  grid-template-rows: auto auto auto 1fr;
}
.own-row {
  grid-template-rows: auto auto 1fr;
}
.card {
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 12px;
  align-content: start;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.step {
  grid-row: span 4;
}
.own-card {
  grid-row: span 3;
  border: 1px solid var(--stroke);
  background: var(--canvas);
}
.card h3 {
  font-size: 21px;
  line-height: var(--heading-leading);
  font-weight: 700;
  letter-spacing: var(--heading-tracking);
  text-wrap: balance;
}
.card p {
  color: var(--text-2);
  line-height: 1.6;
}
.card .card-media {
  align-self: end;
  width: 100%;
  margin-top: 4px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--canvas);
}
.card .card-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: top;
}
@supports not (grid-template-rows: subgrid) {
  .card {
    display: flex;
    flex-direction: column;
  }
  .card .card-media {
    margin-top: auto;
  }
}
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
}

/* 지켜 주는 것 — 상자 없이 세 줄, 위 선 하나 */
.promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--stroke);
  color: var(--text-2);
  line-height: 1.6;
}
.promises li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.promises svg {
  margin-top: 2px;
}
.promises strong {
  display: block;
  color: var(--text);
  font-weight: 700;
}

/* 글 종류별 정리 — 왼쪽 글·종류 고르기, 오른쪽 휴대폰 화면. 라디오 묶음이라 Tab 한 번에 들어가 화살표로 바꾼다. */
.band > .wrap.kinds-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.kinds-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.kind-tabs {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}
.kind-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 8px 18px;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-pill);
  background: var(--canvas);
  color: var(--text-2);
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}
/* 고르기를 못 쓰는 브라우저(:has 미지원)에서는 셋이 모두 보이므로 입력을 초점 순서에서도 뺀다. 고르기가 되면 눈에만 숨긴다(아래 @supports). */
.kind-tab input,
.ai-use input {
  display: none;
}
.kind-tab:hover {
  border-color: var(--accent-line);
  color: var(--text);
}
.kind-tab:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.kind-tab:has(input:focus-visible),
.ai-use:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.kind-notes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kind-note {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: var(--canvas);
}
.kind-note h3 {
  font-size: 21px;
  line-height: var(--heading-leading);
  font-weight: 700;
  letter-spacing: var(--heading-tracking);
}
.kind-note p {
  color: var(--text-2);
  line-height: 1.6;
}
.kind-slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.kind-slots li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: var(--small-size);
  font-weight: 700;
}
.kind-slots li + li::before {
  content: "→";
  color: var(--muted);
  font-weight: 500;
}
.kinds-more {
  color: var(--muted);
  font-size: var(--small-size);
  line-height: var(--small-leading);
}
.kind-shots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
/* 고르기를 지원하면 하나만 보인다. 미지원이면 탭이 숨고 셋이 모두 보인다. */
@supports selector(:has(a)) {
  .kind-tabs {
    display: flex;
  }
  .kind-tab input,
  .ai-use input {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .kind-note,
  .kind-shot {
    display: none;
  }
  .kinds:has(input[value="recipe"]:checked) [data-kind="recipe"],
  .kinds:has(input[value="procedure"]:checked) [data-kind="procedure"],
  .kinds:has(input[value="pricing"]:checked) [data-kind="pricing"] {
    display: flex;
  }
}

/* 알아서 나뉘고, 내 것은 그대로 — 흰 카드 셋(3단계와 같은 틀) */

/* AI 연결(MCP 준비 중) — 머리(제목·설명 + 로고 칩·준비 중 표시) → 할 수 있는 일(왼쪽, 대화 예시를 고른다) + 대화 예시(오른쪽, 같은 높이) */
.ai-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
}
.ai .section-head {
  max-width: 36em;
}
.ai-logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control);
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  background: var(--canvas);
  font-size: 15px;
  font-weight: 700;
}
.ai-chips img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.ai-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ai-more {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--accent);
  font-size: var(--small-size);
  font-weight: 600;
}
.ai-more:hover {
  color: var(--accent-hover);
}
.ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: stretch;
}
.ai-uses {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-use {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}
.ai-use:hover {
  border-color: var(--accent-line);
}
.ai-use:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ai-use-title {
  font-size: 17px;
  line-height: var(--heading-leading);
  font-weight: 700;
}
.ai-use:has(input:checked) .ai-use-title {
  color: var(--accent);
}
.ai-use-text {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}
.ai-permission {
  margin-top: auto;
  padding: 4px 4px 0;
  color: var(--muted);
  font-size: var(--small-size);
  line-height: var(--small-leading);
}
.ai-permission strong {
  color: var(--text-2);
}
.ai-demo {
  display: grid;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--on-ink);
}
.ai-convo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-convo + .ai-convo {
  margin-top: 24px;
}
.ai-bubble {
  max-width: 92%;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: 15px;
  line-height: 1.6;
}
.ai-me {
  align-self: flex-end;
  border-bottom-right-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
/* 상태 줄과 답이 같은 칸에 겹친다 — 답 자리가 처음부터 최종 높이라 재생 중에도 카드 높이가 그대로다. */
.ai-reply {
  display: grid;
  align-items: start;
}
.ai-reply > * {
  grid-area: 1 / 1;
}
.ai-status {
  display: none;
  align-items: center;
  gap: 10px;
  justify-self: start;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--on-ink-stroke);
  color: var(--on-ink-muted);
  font-size: var(--small-size);
  font-weight: 600;
}
.ai-dots {
  display: inline-flex;
  gap: 4px;
}
.ai-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--on-ink-muted);
}
.ai-answer {
  justify-self: start;
  border-bottom-left-radius: var(--radius-sm);
  background: var(--on-ink-stroke);
  color: var(--on-ink);
}
.ai-answer p + p {
  margin-top: 8px;
}
.ai-sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}
.ai-sources li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--on-ink-muted);
  font-size: 13px;
  font-weight: 600;
}
.ai-answer .ai-sources li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-line);
}
.ai-note {
  max-width: 48em;
  color: var(--muted);
  font-size: var(--small-size);
  line-height: var(--small-leading);
}
/* 고르기를 지원하면 대화 하나만 보인다(미지원이면 셋이 차례로 보인다). */
@supports selector(:has(a)) {
  .ai-convo {
    display: none;
  }
  .ai-convo + .ai-convo {
    margin-top: 0;
  }
  .ai-grid:has(input[value="0"]:checked) [data-ask="0"],
  .ai-grid:has(input[value="1"]:checked) [data-ask="1"],
  .ai-grid:has(input[value="2"]:checked) [data-ask="2"] {
    display: flex;
  }
}

/* 자주 묻는 질문 — 펼침(details). 글은 처음부터 문서 안에 있다. */
.band > .wrap.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  align-items: start;
}
.faq-list {
  border-top: 1px solid var(--stroke);
  interpolate-size: allow-keywords;
}
.faq-item {
  border-bottom: 1px solid var(--stroke);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px 0;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}
.faq-item[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.faq-item summary:hover {
  color: var(--accent);
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.faq-item::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 0.25s var(--ease-out),
    content-visibility 0.25s allow-discrete;
}
.faq-item[open]::details-content {
  height: auto;
}
.faq-a {
  max-width: 44em;
  padding: 0 0 20px;
  color: var(--text-2);
  line-height: 1.7;
}

/* 받기 띠 */
.download {
  padding: var(--section-y) 0;
  background: var(--ink);
  color: var(--on-ink);
}
.download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.download .section-head h2 {
  color: var(--on-ink);
}
.download .section-head p {
  color: var(--on-ink-muted);
}
.download-guide {
  color: var(--on-ink);
  font-size: 15px;
  font-weight: 600;
}
.download .store-soon {
  border-color: var(--on-ink-stroke);
  background: transparent;
  color: var(--on-ink-muted);
}
.download .store-web {
  border-color: var(--on-ink-stroke);
  background: transparent;
  color: var(--on-ink);
}
.download a.store-web:hover {
  border-color: var(--on-ink-muted);
}

/* 휴대폰 하단 받기 버튼 — 좁은 화면에서만. */
.cta-bar {
  display: none;
}

/* 손맛 — 카드는 올리면 살짝 떠오른다(움직임 줄이기면 base.css가 전환을 끈다). */
.step,
.own-card {
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}
.step:hover,
.own-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* 움직임 — 움직임 줄이기가 아닐 때만. */
@media (prefers-reduced-motion: no-preference) {
  /* 고른 종류의 화면·설명은 짧게 떠오르며 바뀐다(새로 그려질 때마다 0부터). */
  .kind-note,
  .kind-shot {
    animation: rise-in 0.24s var(--ease-out) both;
  }

  /* 대화 예시 — 화면에 들어오면 한 번, 약 2.5초. 질문 → 상태 줄 → 답 → 문단 → 출처. 다른 예시를 고르면 그 대화가 처음부터. */
  @supports (animation-timeline: view()) {
    .ai-demo {
      animation: ai-gate linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }
    /* 숨김과 재생 모두 스타일 쿼리 안에서만 — 들어오기 전(--ai-play: 0)에는 숨기고 들어오면(1) 재생한다.
       스타일 쿼리를 못 쓰는 브라우저에서는 어느 쪽도 듣지 않아 대화가 그대로 보인다. */
    @container style(--ai-play: 0) {
      .ai-convo .ai-me,
      .ai-convo .ai-answer {
        opacity: 0;
      }
    }
    @container style(--ai-play: 1) {
      .ai-convo .ai-me {
        animation: rise-in 0.24s var(--ease-out) both;
      }
      .ai-status {
        display: inline-flex;
        animation: ai-think 0.9s 0.3s var(--ease-out) both;
      }
      .ai-dots i {
        animation: ai-dot 0.6s ease-in-out infinite;
      }
      .ai-dots i:nth-child(2) {
        animation-delay: 0.1s;
      }
      .ai-dots i:nth-child(3) {
        animation-delay: 0.2s;
      }
      .ai-convo .ai-answer {
        animation: rise-in 0.32s 1.2s var(--ease-emph) both;
      }
      .ai-convo .ai-answer p {
        animation: rise-in 0.24s 1.3s var(--ease-out) both;
      }
      .ai-convo .ai-answer p:nth-child(2) {
        animation-delay: 1.46s;
      }
      .ai-convo .ai-answer p:nth-child(3) {
        animation-delay: 1.62s;
      }
      .ai-convo .ai-sources li {
        animation: rise-in 0.2s 1.9s var(--ease-out) both;
      }
      .ai-convo .ai-sources li:nth-child(2) {
        animation-delay: 2s;
      }
      .ai-convo .ai-sources li:nth-child(3) {
        animation-delay: 2.1s;
      }
    }

    /* 그림·카드는 스크롤에 맞춰 살짝 올라온다(글은 움직이지 않는다). */
    .card .card-media,
    .kind-shots {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@keyframes ai-gate {
  from {
    --ai-play: 0;
  }
  to {
    --ai-play: 1;
  }
}
@keyframes ai-think {
  0% {
    opacity: 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ai-dot {
  0%,
  100% {
    opacity: 0.4;
    translate: 0 0;
  }
  50% {
    opacity: 1;
    translate: 0 -3px;
  }
}

@media (max-width: 860px) {
  .hero {
    padding: 48px 0 56px;
  }
  .hero-grid,
  .band > .wrap.kinds-grid,
  .band > .wrap.faq-grid,
  .why-scenes,
  .promises,
  .ai-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .card-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 16px;
  }
  .card {
    grid-row: auto;
    grid-template-rows: none;
  }
  .hero-copy {
    gap: 20px;
  }
  .hero-lead {
    font-size: 17px;
  }
  .section-head h2 {
    font-size: var(--h2-size);
  }
  .band > .wrap {
    gap: 28px;
  }
  .band > .wrap.kinds-grid,
  .band > .wrap.faq-grid {
    gap: 28px;
  }
  .ai-head {
    align-items: flex-start;
  }
  .ai-bubble {
    max-width: 100%;
  }
  .why-scene p,
  .why-answer {
    font-size: 17px;
  }

  /* 휴대폰 하단 받기 버튼 — 첫 화면이 지나간 뒤 나타나고, 받기 띠가 보이면 비켜 준다(지원 브라우저). 초점이 가려지지 않게 바닥 여백을 둔다. */
  .cta-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: block;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--stroke);
    background: var(--canvas);
    box-shadow: var(--shadow-bar);
  }
  .cta-bar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--control);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--on-ink);
    font-weight: 700;
    text-decoration: none;
    touch-action: manipulation;
  }
  .cta-bar-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }
  html {
    scroll-padding-bottom: 96px;
  }
  /* 버튼이 떠 있는 동안 바닥글 마지막 줄이 가려지지 않게 문서 바닥에 버튼 높이만큼 여백을 둔다(움직임 줄이기·미지원에서는 늘 떠 있다). */
  body {
    padding-bottom: 80px;
  }
  /* 첫 화면이 지나면 나타나고 받기 띠에서 비켜 준다 — 움직임 줄이기가 아니고 스크롤 연동을 쓸 수 있을 때만. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      body {
        timeline-scope: --hero-view, --download-view;
      }
      .hero {
        view-timeline: --hero-view block;
      }
      .download {
        view-timeline: --download-view block;
      }
      .cta-bar {
        animation:
          bar-in linear both,
          bar-out linear forwards;
        animation-timeline: --hero-view, --download-view;
        animation-range:
          exit 40% exit 100%,
          entry 0% entry 60%;
      }
    }
  }
}
@keyframes bar-in {
  from {
    translate: 0 110%;
  }
  to {
    translate: 0 0;
  }
}
@keyframes bar-out {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 110%;
    visibility: hidden;
  }
}

@media (max-width: 560px) {
  .card,
  .why-scene,
  .kind-note {
    padding: 20px;
  }
  .store-play img {
    height: 68px;
  }
  .hero-shot.shot-phone,
  .kind-shot .shot-phone {
    width: 260px;
  }
}

@media (max-width: 350px) {
  .hero-shot.shot-phone,
  .kind-shot .shot-phone {
    width: 240px;
  }
}