/* sentence.today 랜딩 (홈)
   한 가지 생각: 한 문장을 쓰고, 인주로 도장을 찍으면 그걸로 끝이다(고칠 수 없다).
   첫 화면은 그대로 써 볼 수 있는 빈 종이이고, 그 아래로 앱 화면이 옆으로 지나가고, 한 해가 하루 한 줄씩 채워진다.
   색은 style.css의 앱 토큰(--paper, --ink, --ink-2, --hairline, --accent)을 쓴다. 인주색 = --accent.

   성능 원칙: 스크롤마다 바꾸는 것은 몇 개 요소의 transform과 캔버스 한 장뿐이다(landing.js).
   동작 줄이기·스크립트 없음: 도장이 찍힌 첫 화면과, 손으로 넘기는 화면 목록이 보인다. */

/* 한글 세리프: 앱과 같은 고운바탕(사이트에 쓰인 글자만, scripts/subset_web_fonts.py) */
@font-face { font-family: "Gowun Batang Web"; src: url("/fonts/gowun-batang-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gowun Batang Web"; src: url("/fonts/gowun-batang-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

/* 배치: 화면 폭 전체를 쓰는 색면 + 최대 1240px 글줄. 활자가 곧 그림이다. */
:root {
  --display: ui-serif, "New York", "Iowan Old Style", Georgia, "Gowun Batang Web", "Hiragino Mincho ProN", "Noto Serif KR", "Noto Serif JP", serif;
  --gutter: max(24px, calc((100vw - 1240px) / 2));
  --prominent: #1B1A18;
  --on-prominent: #F7F4EE;
  --bezel: #1E1D1B;
  --bezel-edge: #3A3834;
  --glass: rgba(247, 244, 238, 0.94);
  --shadow: rgba(40, 30, 20, 0.18);
  --tint: rgba(181, 69, 42, 0.12);
  --indigo: #3F4F8C;
  --seal-blend: multiply;
  /* 밤 (테마와 무관) */
  --n-bg: #0E0E13;
  --n-ink: #F2EEE6;
  --n-ink-2: #9D9AA8;
  --n-line: #2B2B36;
  /* 인주 색면 (테마와 무관) */
  --v-bg: #B5452A;
  --v-ink: #FBF5EC;
  --k: 0.6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --prominent: #4A463F;
    --bezel: #2A2926;
    --bezel-edge: #45423D;
    --glass: rgba(30, 29, 27, 0.94);
    --shadow: rgba(0, 0, 0, 0.55);
    --tint: rgba(224, 122, 95, 0.16);
    --indigo: #8C9BDB;
    --seal-blend: normal;
    --n-bg: #07070B;
    --v-bg: #A23C23;
  }
}
:root[data-theme="dark"] {
  --prominent: #4A463F;
  --bezel: #2A2926;
  --bezel-edge: #45423D;
  --glass: rgba(30, 29, 27, 0.94);
  --shadow: rgba(0, 0, 0, 0.55);
  --tint: rgba(224, 122, 95, 0.16);
  --indigo: #8C9BDB;
  --seal-blend: normal;
  --n-bg: #07070B;
  --v-bg: #A23C23;
}

/* ---------- 바탕 ---------- */
.landing-page header.site { border-bottom: 0; }
.landing-page nav.pages { padding-top: 24px; }
.landing { padding: 0; overflow-x: clip; }
.landing h1, .landing h2 { text-wrap: balance; }
.landing h2 { margin: 0; }
:where(.landing) p, :where(.landing) li { margin: 0; }
.landing [hidden] { display: none !important; }
.landing svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.landing button { font: inherit; color: inherit; cursor: pointer; }
.landing button:focus-visible, .landing summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.kicker, .step {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 20px;
}
.step { color: var(--accent); }
.body { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.big, .tour-head h2, .year-head h2, .dawn-head h2, .care-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 6.4vw, 104px); line-height: 0.96; letter-spacing: -0.035em;
  margin: 0 0 24px;
}
.soon { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 15px; font-weight: 600; }
.soon-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.link-btn { padding: 0; border: 0; background: none; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: var(--hairline); }
.link-btn:hover { text-decoration-color: currentColor; }
.q-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.mark-lg, .mark-sm { display: inline-flex; align-items: center; }
.mark-lg i, .mark-sm i { display: block; border-radius: 2px; background: var(--ink); }
.mark-lg b, .mark-sm b { display: block; border-radius: 50%; background: var(--accent); }
.mark-lg { gap: 6px; } .mark-lg i { width: 40px; height: 3px; } .mark-lg b { width: 9px; height: 9px; }
.mark-sm { gap: 4px; } .mark-sm i { width: 18px; height: 2px; } .mark-sm b { width: 5px; height: 5px; }

/* ==========================================================================
   1. 첫 화면 — 빈 종이와 도장
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100svh, 1000px);
  padding: 8px var(--gutter) 40px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
}
.hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hero-top .kicker { margin: 0; }
.hero-date { font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.01em; }
.desk { display: grid; align-content: center; gap: 22px; min-width: 0; }
.hero-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.hero-q .q-text { font-family: var(--display); font-size: clamp(18px, 1.8vw, 24px); color: var(--ink-2); }

.sheet-wrap { --fs: clamp(56px, 10.4vw, 170px); position: relative; min-width: 0; }
.sheet, .sheet-input {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs); line-height: 1.02; letter-spacing: -0.04em;
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
  color: var(--ink);
}
.sheet { min-height: 2.04em; }
.sheet-input {
  display: none;
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; resize: none; overflow: hidden;
  background: transparent; caret-color: var(--accent);
}
.sheet-input::placeholder { color: var(--ink-2); opacity: .35; }
.sheet-input:focus { outline: none; }

/* 인주 도장 */
.seal {
  position: absolute; right: 0; bottom: -0.2em; z-index: 2;
  width: clamp(120px, 1.2em, 250px); font-size: var(--fs); aspect-ratio: 1;
  color: var(--accent); mix-blend-mode: var(--seal-blend);
  transform: rotate(-14deg); pointer-events: none;
}
.seal-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.landing .seal .seal-svg { width: 100%; height: 100%; fill: none; stroke: none; }
.seal-ring-text { font: 700 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 4.2px; }
.seal-date { font: 700 36px/1 var(--display); letter-spacing: -1px; }

.desk-meter { position: relative; display: flex; align-items: center; height: 18px; }
.desk-meter::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--hairline); }
.meter-line { position: relative; display: block; height: 4px; width: 18.3%; border-radius: 2px; background: var(--ink); transition: width .15s ease-out, background .2s; }
.meter-dot { position: relative; display: block; flex: none; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: var(--accent); transition: transform .2s; }
.desk.over .meter-line { background: var(--accent); }
.desk.over .meter-dot { transform: scale(1.3); }
.desk-foot { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; }
.desk-count { font-variant-numeric: tabular-nums; }
.desk-count b { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 4vw, 64px); line-height: .9; letter-spacing: -0.04em; }
.desk-count small { font-size: 16px; color: var(--ink-2); }
.desk-over { font-size: 15px; font-weight: 600; color: var(--accent); }
.desk-hint { display: none; flex: 1; min-width: 14em; font-size: 15px; color: var(--ink-2); }
.landing .desk-post { display: none; margin-left: auto; height: 56px; padding: 0 28px; border: 0; border-radius: 28px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 16px; transition: opacity .2s, transform .2s; }
.landing .desk-post:not(:disabled):hover { transform: translateY(-2px); }
.landing .desk-post:disabled { opacity: .3; cursor: default; }
.desk-sealed { display: flex; align-items: baseline; gap: 10px 20px; flex-wrap: wrap; font-size: 17px; color: var(--ink-2); }
.desk-sealed b { color: var(--accent); font-weight: 700; }
.hero > .soon { justify-self: start; }

/* 스크립트가 있을 때: 직접 쓸 수 있다 */
.js .sheet-input { display: block; }
.js .desk-hint { display: block; }
.js .landing .desk-post { display: inline-flex; align-items: center; }
.js .desk.demo .sheet-input { opacity: 0; }                        /* 시연 중: 손글씨는 .sheet가 보여 준다 */
.js .desk.user .sheet { visibility: hidden; }                      /* 직접 쓰는 중: .sheet는 높이만 맞춘다 */
.js .desk:not(.sealed) .seal { opacity: 0; transform: rotate(-30deg) scale(2.2); }
.js .desk.sealed .seal { opacity: .94; transform: rotate(-14deg) scale(1); transition: opacity .12s, transform .32s cubic-bezier(.2, 1.4, .4, 1); }
.js .desk.sealed .sheet-wrap { animation: thud .32s ease-out .14s; }
.js .desk.demo .desk-post, .js .desk.sealed .desk-post, .js .desk.sealed .desk-hint { visibility: hidden; }
.js .desk .caret::after { content: ""; display: inline-block; width: 0.06em; height: 0.9em; margin-left: 0.03em; vertical-align: -0.08em; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes thud { 30% { transform: translateY(3px); } 100% { transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   3. 앱 둘러보기
   ========================================================================== */
.tour { position: relative; padding: 120px 0 40px; }
.tour-pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.tour-head { padding: 0 var(--gutter); }
.tour-head h2 { margin-bottom: 0; }
.tour-strip {
  display: flex; gap: clamp(32px, 6vw, 96px); align-items: flex-start;
  padding: 0 var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory;
}
.tour-item { flex: none; margin: 0; display: grid; gap: 18px; justify-items: start; scroll-snap-align: center; }
.tour-item figcaption { width: calc(414px * var(--k)); display: grid; gap: 6px; }
.tour-item figcaption b { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; }
.tour-item figcaption span { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tour-progress { display: none; }

/* 아카이브 화면 */
.cal-title { margin: 22px 0 10px; font-family: var(--display); font-size: 20px; font-weight: 600; }
.cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-variant-numeric: tabular-nums; font-size: 15px; }
.cal li { height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.cal .wk { height: 22px; font-size: 11px; letter-spacing: 0.06em; }
.cal .w { color: var(--ink); background: var(--hairline); }
.cal .today { background: var(--ink); color: var(--paper); }
.cal .f { opacity: 0.35; }
.cal-note { margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.ago { margin-top: 22px; padding: 16px 18px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hairline); }
.ago-s { margin-top: 8px; font-family: var(--display); font-size: 19px; line-height: 1.4; }

/* ==========================================================================
   5. 한 해
   ========================================================================== */
.year { padding: 150px var(--gutter) 40px; }
.year-head { max-width: 44rem; }
.year-board { position: relative; margin-top: 40px; display: grid; gap: 20px; }
.year-canvas { display: block; width: 100%; height: auto; aspect-ratio: 31 / 9.5; }
.year-count { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.year-count b { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 7vw, 112px); line-height: .9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.year-count span { font-size: 16px; color: var(--ink-2); }
.keep-list { list-style: none; margin: 32px 0 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 3px solid var(--ink); }
.keep-list li { display: grid; gap: 4px; font-size: 15px; }
.keep-list b { font-family: var(--display); font-weight: 700; font-size: 22px; }
.keep-list span { color: var(--ink-2); }

/* ==========================================================================
   휴대폰 목업 (앱 화면)
   ========================================================================== */
.device { position: relative; width: calc(414px * var(--k)); height: calc(868px * var(--k)); }
.phone { position: absolute; left: 0; top: 0; width: 414px; height: 868px; transform: scale(var(--k)); transform-origin: 0 0; }
.phone-body {
  width: 100%; height: 100%; padding: 12px; border-radius: 68px;
  background: var(--bezel);
  box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 50px 90px -40px var(--shadow);
  transform-origin: 50% 80%;
}
.screen {
  position: relative; width: 390px; height: 844px;
  border-radius: 56px; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-size: 15px; line-height: 1.4;
  contain: layout paint;
}
.screen img { display: block; max-width: none; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 6; }
.view:has(.shot) { z-index: 6; }

.status { position: absolute; z-index: 4; inset: 0 0 auto; height: 54px; padding: 0 30px 0 44px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.sys { display: inline-flex; align-items: flex-end; gap: 2px; }
.sys i { width: 3px; border-radius: 1px; background: var(--ink); }
.sys i:nth-child(1) { height: 5px; } .sys i:nth-child(2) { height: 8px; } .sys i:nth-child(3) { height: 11px; }
.sys b { width: 25px; height: 12px; margin-left: 6px; border-radius: 4px; border: 1.5px solid var(--ink); padding: 1.5px; background: linear-gradient(90deg, var(--ink) 70%, transparent 70%) content-box; }

.view { position: absolute; inset: 0; padding: 64px 22px 0; display: none; }
.view.on { display: block; }
.masthead { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.01em; line-height: 1.15; }
.screen .meta { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.tabbar {
  position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 26px;
  height: 64px; padding: 0 8px; border-radius: 32px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 10px 24px -16px var(--shadow);
  font-size: 10px; font-weight: 500; color: var(--ink-2);
}
.tabbar span { display: grid; justify-items: center; gap: 3px; }
.tabbar svg { font-size: 23px; }
.screen[data-tab="today"] .tabbar [data-tab="today"],
.screen[data-tab="home"] .tabbar [data-tab="home"] { color: var(--ink); }

.question { margin-top: 22px; padding: 16px 18px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hairline); }
.q-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.q-text { margin-top: 6px; font-family: var(--display); font-size: 19px; line-height: 1.4; }
.q-more { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.compose { position: relative; margin-top: 26px; min-height: 152px; }
.typed, .placeholder { font-family: var(--display); font-size: 27px; line-height: 1.42; word-break: keep-all; overflow-wrap: anywhere; }
.placeholder { position: absolute; inset: 0 0 auto; color: var(--ink-2); opacity: 0; }
.compose-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 99px; font-size: 13px; box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-2); }
.count { margin-left: auto; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.count b { font-weight: 500; color: var(--ink); }
.attach { margin-top: 18px; width: 96px; height: 72px; object-fit: cover; border-radius: 12px; }
.post-btn { position: absolute; left: 22px; right: 22px; bottom: 108px; height: 52px; border-radius: 26px; display: grid; place-items: center; background: var(--prominent); color: var(--on-prominent); font-weight: 600; font-size: 16px; transition: opacity .35s, transform .35s; }
.posted-note { position: absolute; left: 22px; right: 22px; bottom: 112px; display: grid; justify-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); text-align: center; opacity: 0; transition: opacity .45s .1s; }

.mark-lg, .mark-sm { display: inline-flex; align-items: center; }
.mark-lg i, .mark-sm i { display: block; border-radius: 2px; background: var(--ink); }
.mark-lg b, .mark-sm b { display: block; border-radius: 50%; background: var(--accent); }
.mark-lg { gap: 6px; } .mark-lg i { width: 40px; height: 3px; } .mark-lg b { width: 9px; height: 9px; }
.mark-sm { gap: 4px; } .mark-sm i { width: 18px; height: 2px; } .mark-sm b { width: 5px; height: 5px; }

.segment { display: inline-flex; margin-top: 12px; padding: 3px; border-radius: 99px; background: var(--hairline); font-size: 13px; font-weight: 500; }
.segment span { padding: 6px 16px; border-radius: 99px; color: var(--ink-2); }
.segment .on { background: var(--paper); color: var(--ink); }
.feed-window { position: absolute; left: 0; right: 0; top: 160px; bottom: 0; padding: 0 22px; overflow: hidden; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.feed li::after { content: ""; display: block; clear: both; }
.feed .s { font-family: var(--display); font-size: 20px; line-height: 1.45; word-break: keep-all; }
.feed .has-thumb img { float: right; width: 72px; height: 54px; margin: 4px 0 6px 14px; border-radius: 10px; object-fit: cover; }
.row-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.rx { display: inline-flex; gap: 14px; font-size: 17px; }
.feed.dim { margin-top: 6px; opacity: 0.45; }

.v-detail { padding-top: 58px; }
.sheet-top { display: flex; justify-content: center; position: relative; height: 34px; }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--hairline); margin-top: 4px; }
.close { position: absolute; right: 0; top: -4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 17px; }
.detail-s { margin-top: 14px; font-family: var(--display); font-size: 28px; line-height: 1.4; word-break: keep-all; }
.author { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.detail-img { margin-top: 18px; width: 346px; height: 230px; border-radius: 18px; object-fit: cover; }
.reactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.rbtn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--hairline); transition: background .3s, box-shadow .3s, color .3s; }
.rbtn svg { font-size: 17px; }
.actions { display: flex; gap: 22px; margin-top: 22px; font-size: 13px; color: var(--ink-2); }
.actions span { display: inline-flex; align-items: center; gap: 6px; }
.actions svg { font-size: 17px; }

.focus-row { margin-top: 22px; padding: 18px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--hairline); }
.swap { display: grid; }
.swap > .s { grid-area: 1 / 1; font-family: var(--display); font-size: 21px; line-height: 1.5; word-break: keep-all; transition: opacity .45s, transform .45s; }
.swap .tr { opacity: 0; transform: translateY(6px); }
.tr-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; }
.tr-btn svg { font-size: 16px; }
.tr-label-b { display: none; }
.tr-note { margin-top: 8px; font-size: 12px; color: var(--ink-2); opacity: 0; transition: opacity .4s; }
.v-translate.translated .orig { opacity: 0; transform: translateY(-6px); }
.v-translate.translated .tr { opacity: 1; transform: none; }
.v-translate.translated .tr-label-a { display: none; }
.v-translate.translated .tr-label-b { display: inline; }
.v-translate.translated .tr-note { opacity: 1; }


/* ==========================================================================
   2. 띠
   ========================================================================== */
.ribbon {
  position: relative; z-index: 3;
  width: 112vw; margin: -2.4vw 0 0 -6vw;
  padding: 22px 0 26px;
  background: var(--v-bg); color: var(--v-ink);
  transform: rotate(-2deg);
  overflow: hidden;
}
.ribbon-track {
  display: flex; width: max-content;
  font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5.6vw, 84px);
  line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
}
.ribbon-track span { display: inline-flex; align-items: center; gap: 0.5em; padding-right: 0.5em; }
.ribbon-track span::after { content: ""; width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--v-ink); }


/* ==========================================================================
   4. 없는 것들
   ========================================================================== */
.without { padding: 160px var(--gutter) 120px; }
.strikes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.35em; }
.strikes li { font-family: var(--display); font-weight: 700; font-size: clamp(42px, 8vw, 128px); line-height: 1.02; letter-spacing: -0.04em; color: var(--ink-2); }
.strikes li:not(:last-child)::after { content: ","; }
.strikes span {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 58% / 100% max(4px, 0.085em);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.without-end { margin-top: 48px; font-family: var(--display); font-weight: 700; font-size: clamp(42px, 8vw, 128px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.without-end b { display: inline-block; position: relative; color: transparent; }
.without-end b::after { content: ""; position: absolute; left: 0.04em; bottom: 0.1em; width: 0.19em; height: 0.19em; border-radius: 50%; background: var(--accent); }


/* ==========================================================================
   6. 새벽에 쓰인 문장 — 늘 밤
   ========================================================================== */
.dawn { position: relative; background: var(--n-bg); color: var(--n-ink); padding: 140px 0 128px; overflow: hidden; }
.dawn-head { position: relative; padding: 0 var(--gutter); }
.dawn .step { color: #E07A5F; }
.dawn .big { color: var(--n-ink); }
.dawn .body { color: var(--n-ink-2); }
.dawn-clock {
  position: absolute; right: calc(var(--gutter) - 0.04em); top: -0.18em;
  font-family: var(--display); font-weight: 700; font-size: clamp(120px, 26vw, 420px); line-height: 1;
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px var(--n-line);
  pointer-events: none;
}
.dawn-head > :not(.dawn-clock) { position: relative; }
.drift { margin-top: 88px; display: grid; gap: 26px; }
.drift-row { display: flex; width: max-content; white-space: nowrap; font-family: var(--display); font-size: clamp(24px, 3.2vw, 48px); letter-spacing: -0.015em; color: var(--n-ink); padding-left: var(--gutter); }
.drift-row span { display: inline-flex; align-items: center; gap: 0.9em; padding-right: 0.9em; }
.drift-row span::after { content: ""; width: 0.2em; height: 0.2em; border-radius: 50%; background: #8C9BDB; }
.drift-row:nth-child(2) { color: var(--n-ink-2); transform: translateX(-18%); }
.drift-row:nth-child(3) { transform: translateX(-6%); }


/* ==========================================================================
   7. 안전
   ========================================================================== */
.care { padding: 140px var(--gutter) 40px; content-visibility: auto; contain-intrinsic-size: auto 560px; }
.care-head { max-width: 44rem; }
.care-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.care-grid li { display: grid; align-content: start; gap: 8px; padding: 26px 24px 8px 0; font-size: 15px; line-height: 1.55; }
.care-grid li + li { padding-left: 24px; border-left: 1px solid var(--hairline); }
.care-grid svg { font-size: 30px; color: var(--accent); margin-bottom: 10px; }
.care-grid b { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.care-grid span { color: var(--ink-2); }


/* ==========================================================================
   8. 질문
   ========================================================================== */
.faq { max-width: 880px; margin: 0 auto; padding: 140px 24px 40px; content-visibility: auto; contain-intrinsic-size: auto 600px; }
.faq h2 { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 28px; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:first-of-type { border-top: 3px solid var(--ink); }
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.01em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-2); transition: background .2s, box-shadow .2s; }
.faq details[open] summary::after { background: var(--accent); box-shadow: none; }
.faq details p { padding: 0 0 24px; color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 36em; }


/* ==========================================================================
   9. 맺음 — 먹색 전면
   ========================================================================== */
.closing {
  margin-top: 120px;
  background: var(--n-bg); color: var(--n-ink);
  padding: 140px var(--gutter) 96px;
  display: grid; justify-items: start;
}
.closing-line { font-family: var(--display); font-weight: 700; font-size: clamp(64px, 12.5vw, 210px); line-height: 0.88; letter-spacing: -0.05em; }
.closing-line span { display: block; }
.closing-dot { display: inline-block; position: relative; color: transparent; }
.closing-dot::after { content: ""; position: absolute; left: 0.04em; bottom: 0.1em; width: 0.19em; height: 0.19em; border-radius: 50%; background: var(--accent); }
.closing-mark { display: flex; align-items: center; gap: 14px; width: 100%; margin: 56px 0 8px; }
.closing-mark i { flex: 1; height: 6px; border-radius: 3px; background: var(--n-ink); transform-origin: 0 50%; }
.closing-mark b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.closing .soon { margin-top: 36px; color: var(--n-ink); }
.langs-note { margin-top: 14px; font-size: 15px; color: var(--n-ink-2); }
.example-note { margin-top: 56px; font-size: 12px; color: var(--n-ink-2); }


/* ---------- 좁은 화면 ---------- */
@media (max-width: 859px) {
  .hero { min-height: min(100svh, 860px); padding-bottom: 28px; }
  .sheet-wrap { --fs: clamp(44px, 14vw, 80px); }
  .seal { width: clamp(96px, 30vw, 140px); bottom: -0.5em; }
  .desk-foot { gap: 12px 18px; }
  .landing .desk-post { margin-left: 0; width: 100%; justify-content: center; }
  .desk-hint { min-width: 0; flex-basis: 100%; order: 3; }
  .tour { padding-top: 96px; }
  .year, .care, .faq { padding-top: 110px; }
  .year-canvas { aspect-ratio: 31 / 14; }
  .keep-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .without { padding-top: 120px; padding-bottom: 88px; }
  .dawn { padding: 112px 0 96px; }
  .dawn-clock { top: -0.1em; }
  .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-grid li:nth-child(3) { padding-left: 0; border-left: 0; }
  .care-grid li:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .closing { margin-top: 88px; padding-top: 104px; padding-bottom: 72px; }
  .ribbon { padding: 16px 0 18px; }
}
@media (max-width: 480px) {
  .care-grid { grid-template-columns: minmax(0, 1fr); }
  .care-grid li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
}

html:lang(ja) .landing * { word-break: normal; line-break: strict; }

/* ==========================================================================
   스크롤 연출 (스크립트 + 동작 줄이기 꺼짐)
   스크립트가 직접 바꾸는 것: .tour-strip / .tour-progress 의 transform, .drift-row 의 transform, 한 해 캔버스
   ========================================================================== */

/* 시연 중 써지는 글자 */
.motion .desk .ch { display: inline-block; white-space: pre; animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.motion .desk .wd { display: inline-block; white-space: nowrap; }
@keyframes rise { from { opacity: 0; transform: translateY(.25em); } to { opacity: 1; transform: none; } }
.motion .desk.clearing .sheet { opacity: 0; transform: translateY(-0.15em); transition: opacity .35s, transform .35s; }

/* 앱 둘러보기: 고정하고 옆으로 */
.motion .tour { height: 520svh; padding: 0; }
.motion .tour-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding-block: max(28px, 5svh) 28px; gap: 3svh; }
.motion .tour-strip { overflow: visible; width: max-content; padding-bottom: 0; will-change: transform; align-items: center; }
.motion .tour-item { transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); opacity: .3; transform: scale(.92); transform-origin: 50% 60%; }
.motion .tour-item.on { opacity: 1; transform: none; }
.motion .tour-progress { display: flex; align-items: center; gap: 8px; margin: 0 var(--gutter); height: 16px; position: relative; }
.motion .tour-progress::before { content: ""; position: absolute; left: 0; right: 24px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--hairline); }
.motion .tour-progress i { position: absolute; left: 0; right: 24px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.motion .tour-progress b { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); will-change: transform; }

/* 화면마다 한 번씩 살아난다 */
.motion .tour-item .typed .ch { display: inline-block; white-space: pre; opacity: 0; transition: opacity .25s; }
.motion .tour-item .typed .wd { display: inline-block; white-space: nowrap; }
.motion .tour-item .typed .ch.on { opacity: 1; }
.motion .tour-item .compose.empty .placeholder { opacity: .6; }
.motion .tour-item .posted .post-btn { opacity: 0; transform: translateY(10px) scale(.96); }
.motion .tour-item .posted .posted-note { opacity: 1; }
.motion .tour-item .posted .mark-lg b { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both .12s; }
.motion .tour-item[data-k="home"] .feed { transition: transform 5s cubic-bezier(.4, 0, .2, 1) .4s; }
.motion .tour-item[data-k="home"].on .feed { transform: translate3d(0, -300px, 0); }
.motion .tour-item[data-k="detail"].on .rbtn.pick { background: var(--tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); transition-delay: .7s; }
.motion .tour-item[data-k="detail"].on .rbtn.pick svg { fill: currentColor; }
.motion .tour-item[data-k="translate"] .swap > .s, .motion .tour-item[data-k="translate"] .tr-note { transition-delay: 0s; }
.motion .tour-item[data-k="translate"].on .orig { opacity: 0; transform: translateY(-6px); transition-delay: .9s; }
.motion .tour-item[data-k="translate"].on .tr { opacity: 1; transform: none; transition-delay: .9s; }
.motion .tour-item[data-k="translate"].on .tr-note { opacity: 1; transition-delay: 1.1s; }
.motion .tour-item[data-k="archive"].on .cal .w { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.motion .tour-item[data-k="archive"].on .cal li:nth-child(n+12) { animation-delay: .25s; }
.motion .tour-item[data-k="archive"].on .cal li:nth-child(n+19) { animation-delay: .45s; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes stamp { from { opacity: 0; transform: scale(3); } to { opacity: 1; transform: scale(1); } }

/* 띠가 흐른다 (합성만) */
.motion .ribbon-track { animation: ribbon 36s linear infinite; will-change: transform; }
@keyframes ribbon { to { transform: translate3d(-50%, 0, 0); } }

/* 없는 것들: 줄이 그어진다 */
.motion .strikes span { background-size: 0% max(4px, 0.085em); transition: background-size .55s cubic-bezier(.6, 0, .2, 1); }
.motion .strikes li.struck span { background-size: 100% max(4px, 0.085em); }
.motion .without-end { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .8s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.motion .without-end.seen { opacity: 1; transform: none; }
.motion .without-end b::after { transform: scale(0); }
.motion .without-end.seen b::after { animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) both .5s; }

.motion .drift-row { will-change: transform; }

/* 맺음: 화면 폭의 줄이 그어지고 마침표가 찍힌다 */
.motion .closing-mark i { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.6, 0, .2, 1); }
.motion .closing-mark b { opacity: 0; }
.motion .closing.seen .closing-mark i { transform: scaleX(1); }
.motion .closing.seen .closing-mark b { animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) both 1s; }
.motion .closing .closing-dot::after { transform: scale(0); }
.motion .closing.seen .closing-dot::after { animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) both .2s; }

@media (max-width: 859px) {
  .motion .tour { height: 560svh; }
  .motion .tour-item figcaption b { font-size: 24px; }
  .tour-head h2 { font-size: clamp(36px, 10vw, 48px); }
}