/*
  House Tape 랜딩 — 스타일 한 벌(docs/design/LANDING.md §11 · §12).
  바탕(색 · 글자 · 폰 틀)은 브랜드 기준서(docs/design/BRAND.md)에서, 쪽 배치는 A2 시안에서 왔다.
*/

@font-face { font-family: 'Plex'; src: url('fonts/plex-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('fonts/plex-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('fonts/plex-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bebas'; src: url('fonts/bebas.woff2') format('woff2'); font-display: swap; }

:root {
  --night: #0B1433;
  --night-2: #121C42;
  --paper: #F6F1EA;
  --paper-2: #FFFCF7;
  --sunk: #EDE6DB;
  --line: #E2D9CB;
  --ink: #1A1730;
  --art-ink: #1A131B;
  --muted: #6B6577;
  --cobalt: #1E3478;
  --sky: #6F93E8;
  --pink: #E97A9B;
  --pink-face: #F8DCE4;
  --mustard: #D8BB61;
  --lamp: #E2986D;

  /* 글자 — 한 서체(Plex), 굵기로 위계. 영문 곁말은 Bebas 하나. */
  --t-hero: clamp(44px, 7.4vw, 128px);
  --t-h2: clamp(32px, 4.6vw, 76px);
  --t-h3: clamp(22px, 2.2vw, 34px);
  --t-body: clamp(16px, 1.25vw, 20px);
  --track-tight: -0.035em;
  --gutter: clamp(16px, 5vw, 80px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--paper); color: var(--ink); font-family: 'Plex', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.mark { font-family: 'Bebas'; letter-spacing: 0.16em; color: var(--pink); text-shadow: 1.5px 1.5px 0 var(--art-ink); }

/*
  폰 틀 — 실제 앱 화면(apps/site/assets/app/*)을 담는다. 틀은 CSS로 그리지 않고 **평평한 먹 테두리 하나**:
  우리 그림의 굵은 잉크 선과 같은 결이라 사진 같은 목업보다 그림 옆에 어울린다.
*/
.phone {
  --w: 300px;
  --b: calc(var(--w) * 0.03);
  position: relative;
  width: var(--w);
  border-radius: calc(var(--w) * 0.16);
  border: var(--b) solid var(--art-ink);
  background: var(--art-ink);
  overflow: hidden;
  box-shadow: calc(var(--w) * 0.025) calc(var(--w) * 0.025) 0 var(--art-ink);
}
/*
  화면 안쪽이 **정확히 기기 화면 비율(1206:2622)** 이어야 한다. 틀 전체에 비율을 걸었더니 테두리만큼 안쪽이 좁아져
  가득 채우기가 양옆을 3%쯤 잘랐고, iOS 26 중간 높이 시트의 좌우 틈이 사라져 아래 틈만 남았다(2026-09-28, 사용자).
  첫 장은 흐름 안에서 높이를 만들고, 나머지는 그 위에 겹친다. 자르지 않는다(fill).
*/
/* 모든 그림 · 영상은 높이를 비율로 — width · height 속성(자리 흔들림 막기)의 높이가 CSS 폭과 어긋나 다섯 그림 · 폰 화면이 세로로 늘어났다(2026-09-29, 사용자). 높이를 정하는 규칙(height: 100% 등)은 따로 이긴다. */
img, video { height: auto; }
/* height: auto — 그림 · 영상에 붙인 width · height 속성(자리 흔들림 막기)이 높이를 1311px로 박아 화면이 세로로 늘어났다(2026-09-29). 비율은 aspect-ratio가 정한다. */
.phone > img, .phone > video { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: fill; border-radius: calc(var(--w) * 0.13); }
.phone > :not(:first-child) { position: absolute; left: 0; top: 0; }
/* 다이내믹 아일랜드는 그리지 않는다 — 스크린샷에 이미 찍혀 있어 두 개가 어긋나 겹쳤다(2026-09-27, 사용자) */

.cta { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.cta a { font-weight: 700; font-size: 17px; text-decoration: none; border-radius: 999px; padding: 14px 24px; border: 2px solid var(--art-ink); background: var(--art-ink); color: var(--paper); }
.cta a + a { background: transparent; color: var(--art-ink); }
.on-night .cta a { border-color: var(--paper); background: var(--paper); color: var(--night); }
.on-night .cta a + a { background: transparent; color: var(--paper); }
/* 출시 전 알림 — 누르는 것이 아니라서 버튼처럼 채우지 않고 테두리만 */
.cta .soon { font-weight: 700; font-size: 17px; border-radius: 999px; padding: 14px 24px; border: 2px solid var(--art-ink); color: var(--art-ink); }
.on-night .cta .soon { border-color: var(--paper); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── 쪽 ── */

  /*
    A2 — A(붙은 폰)를 뼈대로, **다른 앱보다 나은 점**과 **우리 취향**이 보이게(docs/design/LANDING.md §11).
    나은 점은 「보통은 → 여기서는」 네 걸음(product/PARITY.md §3 「이미 앞서는 것」의 사실만, 경쟁 앱 이름은 쓰지 않는다).
    취향은 「숫자 대신 말로, 요란함 대신 조용히」(product/TASTE.md §3) — 실제 앱 문구와 머리 그림으로 보인다.
    마감 규칙: 글 · 폰 · 알약이 서로 가리지 않는다(자리를 셈한다) · 모바일은 따로 짠다 · 영상은 보일 때 재생(되감지 않는다).
    브랜드: 밝은 판에 분홍 글자 금지 → 강조는 분홍 형광펜(--pink-face) · 카드 그림자 금지 → 평평한 먹 테두리.
  */
  .phone { box-shadow: none; }
  body { word-break: keep-all; overflow-wrap: break-word; } /* 한국어는 낱말 단위로 — 「남아 / 요.」처럼 음절이 잘렸다 */
  mark { background: linear-gradient(transparent 58%, var(--pink-face) 58%); color: inherit; padding: 0 0.06em; } /* system-ok: 형광펜 한 줄 — 매끈한 그라데이션이 아니라 두 색의 경계 */
  .on-art mark, .night mark { background: none; color: var(--pink); }

  .top { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); z-index: 40; pointer-events: none; }
  .top .mark { font-size: 24px; }
  .top .cta { pointer-events: auto; }
  .top .cta a { padding: 10px 18px; font-size: 15px; }
  /* 머리띠 바탕은 그 아래 판을 따른다 — 그림 위는 투명, 종이 판은 종이, 밤 판은 남색. 바탕 없이 두었더니 로고가 지나가는 글 위에 얹혔다 */
  .top { transition: background-color 0.2s var(--ease-out); }
  .top.on-paper { background: var(--paper); }
  .top.on-dark { background: var(--night); }
  .top.on-dark .cta a { border-color: var(--paper); background: var(--paper); color: var(--night); }

  /* ── 폰 하나 — 첫 화면에서 올라와 이야기 내내 붙어 있다 ── */
  /*
    폰 크기는 폭과 높이로 묶는다. 붙어 있는 동안 폰과 이름표 아래에 늘 --below만큼 비운다(화면 아래에 붙어 보였다, 2026-09-30 사용자).
    높이 몫: 머리띠 약 80 + 위 틈 16 + 이름표 28 + --below. 폰 높이 = 폭 × 2.104. 실제 크기는 landing.js sizePhone이 다시 잰다.
  */
  :root { --below: max(24px, 5vh); }
  #phone { --w: min(330px, 24vw, calc((100vh - 130px - var(--below)) * 0.47)); position: fixed; left: 0; top: 0; z-index: 20; visibility: hidden; }
  #phone .s { opacity: 0; transition: opacity 0.3s var(--ease-out); }
  #phone .s.on { opacity: 1; }

  /* ① 첫 화면 */
  .hero { height: 170vh; position: relative; }
  .hero .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .hero .art { position: absolute; inset: 0; overflow: hidden; }
  .hero .art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .hero .copy { position: absolute; left: var(--gutter); top: 17vh; z-index: 2; color: var(--paper); text-shadow: 2px 2px 0 var(--art-ink); }
  .hero h1 { font-size: var(--t-hero); font-weight: 700; line-height: 1.08; letter-spacing: var(--track-tight); }
  .hero h1 b { color: var(--pink); font-weight: 700; }
  /* 숫자 한 줄 밑의 주석 — 어떻게 셌는지, 가장 작은 글로 */
  .hero .copy .note { margin-top: 10px; font-size: 13px; font-weight: 400; line-height: 1.5; max-width: 30em; opacity: 0.85; }

  /* ①½ 누구를 위해 — 종이 판, 제목만. 폰은 아직 없다(다음 판과 함께 올라온다) */
  .who { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 18vh var(--gutter); }
  .who h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.14; letter-spacing: var(--track-tight); }

  /* ② 다섯 걸음 — 요일 · 시각 머리 + 제목만, 폰이 오른쪽에 붙는다 */
  .story { position: relative; height: 1100vh; } /* 걸음 다섯 × 약 190vh + 들고 나는 몫 */
  .story .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .story .col { position: absolute; left: var(--gutter); top: 0; bottom: 0; width: min(46vw, 640px); }
  .step { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  .step h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.14; letter-spacing: var(--track-tight); }
  .step .when, .wow .when { margin: 0 0 14px; font-size: clamp(14px, 1.1vw, 17px); font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; color: var(--muted); }
  /* 월요일 밤 — 판 전체가 밤. 붙은 폰은 위(z 20)에 그대로 서고, 지훈 씨 폰과 이름표는 이 판에 놓인다(자리는 landing.js layoutWow) */
  .wow { position: absolute; inset: 0; z-index: 1; background: var(--night); color: var(--paper); visibility: hidden; opacity: 0; }
  .wow .wtext { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(46vw, 640px); }
  .wow.stacked .wtext { top: 11vh; right: var(--gutter); transform: none; }
  .wow h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.14; letter-spacing: var(--track-tight); }
  .wow .when { color: var(--paper); opacity: 0.7; }
  .wow mark { background: none; color: var(--pink); }
  .wow .mate { position: absolute; left: 0; top: 0; }
  .wow .tag { position: absolute; left: 0; top: 0; text-align: center; font-size: 15px; font-weight: 600; line-height: 20px; opacity: 0.75; }
  #phone { transform-origin: 0 0; transition: translate 0.5s var(--ease-out), scale 0.5s var(--ease-out); }
  .rail { position: absolute; left: var(--gutter); bottom: 6vh; display: flex; gap: 10px; }
  .rail i { width: 36px; height: 3px; background: var(--line); }
  .rail i.on { background: var(--ink); }

  /* ③ 흩어지는 일들 — 제목은 위, 폰은 아래 가운데, 알약은 폰 양옆의 빈 칸에만 */
  .burst { position: relative; height: 180vh; }
  .burst .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .burst h2 { position: absolute; left: var(--gutter); right: var(--gutter); top: 13vh; text-align: center; font-size: var(--t-h2); font-weight: 700; line-height: 1.14; letter-spacing: var(--track-tight); z-index: 22; }
  .pill { position: absolute; left: 0; top: 0; z-index: 21; display: flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 999px; background: var(--paper-2); border: 2px solid var(--art-ink); font-weight: 700; font-size: clamp(15px, 1.25vw, 20px); white-space: nowrap; }
  .pill img { width: 2em; height: 2em; border-radius: 50%; border: 2px solid var(--art-ink); background: var(--pink-face); object-fit: cover; }
  .pill small { font-weight: 400; color: var(--muted); margin-left: 4px; }

  /* ④ 취향 — 밤 판. 실제 앱의 말을 활자로, 머리 그림은 시간마다 바뀐다 */
  .night { background: var(--night); color: var(--paper); }
  .taste { padding: 22vh var(--gutter) 18vh; }
  .taste h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.14; letter-spacing: var(--track-tight); max-width: 14em; }
  .taste .lead { margin-top: 22px; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.7; color: var(--paper); opacity: 0.8; max-width: 30em; }
  .words { margin-top: 12vh; display: grid; gap: 5vh; }
  .words blockquote { font-size: clamp(30px, 4.6vw, 76px); font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.1; }
  .words blockquote:nth-child(2) { padding-left: 12vw; }
  .words blockquote:nth-child(3) { padding-left: 4vw; color: var(--pink); }
  .words blockquote:nth-child(4) { padding-left: 18vw; }
  .words cite { display: block; margin-top: 10px; font-style: normal; font-size: var(--t-body); font-weight: 400; letter-spacing: 0; opacity: 0.6; }
  .heads { margin-top: 16vh; }
  .heads .strip { display: flex; gap: 12px; }
  .heads figure { flex: 1; min-width: 0; }
  .heads img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 2px solid var(--art-ink); border-radius: 10px; }
  .heads figcaption { margin-top: 10px; font-family: 'Bebas'; letter-spacing: 0.12em; font-size: 18px; opacity: 0.7; }
  .heads p { margin-top: 26px; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.7; opacity: 0.8; max-width: 30em; }

  /* ⑤ 그 밖에도 — 애플의 끝 목록처럼: 묶음 이름 굵게 한 줄, 항목은 작은 글 한 줄씩. 카드 · 칸 테두리 · 아이콘 없음 */
  .more { padding: 20vh var(--gutter) 18vh; }
  .more h2, .keep h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.14; letter-spacing: var(--track-tight); }
  .lists { margin-top: 10vh; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px 32px; }
  .lists h3 { font-size: clamp(17px, 1.35vw, 21px); font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 16px; }
  .lists ul { list-style: none; }
  /* 애플 끝 목록처럼 읽히는 크기 · 먹색 — 15px 흐린 색은 넓은 화면에서 작고 약했다(2026-09-30) */
  .lists li { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; padding: 6px 0; color: var(--ink); }

  /* ⑤½ 우리가 지키는 것 — 방 안의 밤(끝은 동네의 밤). 그림 한 장 위에 제목, 그 아래 종이 띠에 약속 넷을 한 줄로 */
  .keep .scene { position: relative; height: 100vh; overflow: hidden; background: var(--night); }
  .keep .scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; color: transparent; } /* 그림이 아직 없을 때 대체 글이 비치지 않게 */
  .keep .scene .copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12vh; }
  .keep .scene h2 { color: var(--paper); text-shadow: 2px 2px 0 var(--art-ink); font-size: var(--t-hero); line-height: 1.08; }
  .keep ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; padding: 9vh var(--gutter) 14vh; }
  .keep li { border-top: 2px solid var(--art-ink); padding-top: 20px; font-size: var(--t-h3); font-weight: 700; line-height: 1.3; letter-spacing: var(--track-tight); }
  @media (max-width: 1100px) and (min-width: 761px) {
    .lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ⑥ 끝 */
  .end { position: relative; height: 100vh; overflow: hidden; }
  .end img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
  .end .copy { position: absolute; left: var(--gutter); top: 15vh; color: var(--paper); text-shadow: 2px 2px 0 var(--art-ink); }
  .end h2 { font-size: var(--t-hero); font-weight: 700; line-height: 1.08; letter-spacing: var(--track-tight); }
  .end h2 b { color: var(--pink); }
  .end .cta { margin-top: 40px; text-shadow: none; }

  .ln { white-space: nowrap; }

  @media (max-width: 760px) {
    .top .cta { display: none; }
    /* 폰은 통째로 보여야 한다 — 아래가 잘리면 화면 아래의 버튼 · 동작이 사라진다(2026-09-29, 사용자). 폭과 높이 둘로 묶는다(글 자리 약 270px + 아래 여백). */
    #phone { --w: min(86vw, 420px, calc((100svh - 290px) * 0.46)); }
    .hero h1, .end h2 { font-size: 8.6vw; }
    .hero .copy { top: 13vh; }
    .story .col { width: auto; right: var(--gutter); }
    .step { top: 11vh; transform: none; }
    .step h2 { font-size: 27px; }
    .rail { display: none; }
    .burst h2 { font-size: 27px; top: 11vh; }
    .words blockquote { padding-left: 0 !important; }
    .heads .strip { overflow-x: auto; }
    .heads figure { flex: 0 0 62vw; }
    .who h2 { font-size: 27px; }
    .hero .copy .note { font-size: 12px; margin-top: 8px; }
    .step .when, .wow .when { font-size: 13px; margin-bottom: 8px; }
    .wow h2, .more h2, .keep h2 { font-size: 27px; }
    .wow .tag { font-size: 13px; }
    .lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; margin-top: 6vh; }
    .lists h3 { font-size: 16px; margin-bottom: 10px; }
    .lists li { font-size: 15px; padding: 4px 0; }
    .keep .scene h2 { font-size: 8.6vw; }
    .keep .scene .copy { bottom: 10vh; }
    .keep ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding: 7vh var(--gutter) 10vh; }
    .keep li { font-size: 18px; padding-top: 14px; }
  }

/* ── 접근성 · 정식판 ── */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--art-ink); color: var(--paper); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 999px; }

/*
  ── 발치 — 끝 장면(밤 동네) 아래, 가장 조용한 글(.words cite 결)로 ──
  끝 장면과 발치가 함께 한 화면을 채운다(끝 장면 높이에서 발치만큼 뺀다). 발치가 끝 장면을 밀어 올리면
  맨 아래에서 제목이 머리띠 밑으로 들어갔다(landing-check 칸 59).
*/
:root { --foot-h: calc(80px + env(safe-area-inset-bottom)); }
.end { height: calc(100vh - var(--foot-h)); }
.foot { min-height: var(--foot-h); background: var(--night); color: var(--paper); padding: 0 var(--gutter) env(safe-area-inset-bottom); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; gap: 8px 24px; font-size: 14px; line-height: 22px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: inherit; opacity: 0.6; text-decoration: none; }
.foot a:hover { opacity: 0.9; text-decoration: underline; text-underline-offset: 3px; }
.foot p { opacity: 0.6; }
@media (max-width: 760px) {
  :root { --foot-h: calc(100px + env(safe-area-inset-bottom)); }
  .foot { flex-direction: column; justify-content: center; align-items: flex-start; }
}

/* ── 읽기 쪽 — /privacy · /delete-account. 종이 판 한 단, 랜딩의 글자 토큰 그대로 ── */
.doc { max-width: 42rem; margin: 0 auto; padding: 40px 16px 64px; font-size: 16px; line-height: 1.75; }
.doc .home { display: inline-block; margin-bottom: 40px; font-size: 22px; text-decoration: none; }
.doc h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.2; letter-spacing: var(--track-tight); }
.doc h2 { margin-top: 44px; padding-top: 20px; border-top: 2px solid var(--art-ink); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; scroll-margin-top: 16px; }
.doc p { margin-top: 12px; }
.doc .lead { margin-top: 16px; color: var(--muted); }
.doc ul { list-style: none; margin-top: 12px; }
.doc li { padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.doc li b { display: block; font-weight: 600; }
.doc li span { color: var(--muted); }
.doc a:not(.home) { color: var(--cobalt); text-underline-offset: 3px; }
.doc .foot-note { margin-top: 48px; font-size: 14px; color: var(--muted); }

/* 주석 — 애플처럼 제목엔 작은 번호, 설명은 페이지 맨 아래(히어로 · 절에 설명 문장을 붙이지 않는다, 2026-09-30) */
.fn-ref { font-size: 0.32em; vertical-align: super; margin-left: 0.15em; }
.fn-ref a { color: inherit; text-decoration: none; opacity: 0.6; }
.step .fn { margin-top: 18px; max-width: 24em; color: var(--muted); font-size: 13px; line-height: 1.6; }