/* sentence.today 첫 페이지 — 스크롤리텔링 (docs/DESIGN.md §4.23, 2026-10-18 개선)
   붙잡는 장면은 셋(머리·쓰기·기록장). 나머지는 보일 때 한 번, 또는 지나는 만큼 움직인다. 움직임은 landing.js(GSAP).
   여기 적힌 기본 모습이 각 장면의 '끝난 모습'이다. html.gs(움직임 켜짐)에서만 겹치거나 숨겨 두는 것이 있다.
   원칙: 쉬는 요소에 그림자·선·그라데이션 없음(표면은 밝기 차이로), 글자 크기 다섯 단계, 인주색은 마침표와 별에만.
   두 보기 방식: :root[data-mode="quiet"]이면 밤의 종이. 스위치 자리에서 원이 번지며 바뀐다(View Transition). */

@font-face { font-family: "Newsreader Web"; src: url("/fonts/newsreader.woff") format("woff"); font-weight: 200 600; font-display: swap; }
/* 한글 세리프: 사이트 글자만 담은 작은 파일이 먼저, 그 밖의 한글(써 보기에 치는 글 등)은 보충 파일이 필요할 때만 받는다 */
@font-face { font-family: "Gowun Batang Ext"; src: url("/fonts/gowun-batang-regular-ext.woff") format("woff"); font-weight: 200 800; font-display: swap; unicode-range: U+AC00-D7A3, U+3131-318E; }
@font-face { font-family: "Gowun Batang Web"; src: url("/fonts/gowun-batang-regular.woff") format("woff"); font-weight: 200 500; font-display: swap; }
@font-face { font-family: "Gowun Batang Web"; src: url("/fonts/gowun-batang-bold.woff") format("woff"); font-weight: 600 800; font-display: swap; }

/* ---------- 토큰 ---------- */
body.landing-page {
  --paper: #F1F1EC; --surface: #E8E8E2; --card: #FAFAF7; --ink: #17191B; --ink-2: #565A5D; --ink-3: #8C8F90; --seal: #B5452A; --on-ink: #F6F5F0;
  --screen: #F8F4EE; --bezel: #141518;
  --night: #12151C; --lamp: #EFE6D2; --lamp-2: #A8A190; --ember: #E3956F;
  --serif: "Newsreader Web", "Gowun Batang Web", "Gowun Batang Ext", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif KR", "Noto Serif JP", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Hiragino Sans", "Noto Sans KR", "Noto Sans JP", "Segoe UI", sans-serif;
  /* 글자 다섯 단계 */
  --t-small: 14px;
  --t-body: clamp(16px, calc(.4vw + 14.5px), 18px);
  --t-lead: clamp(19px, calc(1vw + 15px), 24px);
  --t-head: clamp(34px, 7.4vw, 66px);
  --t-display: clamp(58px, 16vw, 168px);
  --gutter: clamp(20px, 5vw, 64px);
  --out: cubic-bezier(.22, 1, .36, 1);
  --inout: cubic-bezier(.76, 0, .24, 1);
  background: var(--paper); color: var(--ink);
  transition: background-color .9s var(--inout), color .9s var(--inout);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.landing-page { --paper: #0F1012; --surface: #17181B; --card: #1C1D21; --ink: #ECEDEA; --ink-2: #A3A6A8; --ink-3: #74777A; --seal: #E07A5F; --on-ink: #0F1012; }
}
:root[data-theme="dark"] body.landing-page { --paper: #0F1012; --surface: #17181B; --card: #1C1D21; --ink: #ECEDEA; --ink-2: #A3A6A8; --ink-3: #74777A; --seal: #E07A5F; --on-ink: #0F1012; }
:root[data-mode="quiet"] body.landing-page { --paper: #12151C; --surface: #191D26; --card: #1E2330; --ink: #EFE6D2; --ink-2: #ADA694; --ink-3: #7E786B; --seal: #E3956F; --on-ink: #12151C; }
html:has(> body.landing-page) { background: #F1F1EC; scroll-padding-top: 24px; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]):has(> body.landing-page) { background: #0F1012; } }
html[data-theme="dark"]:has(> body.landing-page) { background: #0F1012; }
html[data-mode="quiet"]:has(> body.landing-page) { background: #12151C; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }

/* ---------- 머리글 (맨 위에만, 덮지 않는다) ---------- */
.landing-page .skip { position: absolute; z-index: 40; left: 12px; top: 12px; padding: 10px 14px; border-radius: 99px; background: var(--ink); color: var(--on-ink); font-size: var(--t-small); font-weight: 600; transform: translateY(-160%); transition: transform .2s var(--out); }
.landing-page .skip:focus { transform: none; }
.landing-page .topbar { position: absolute; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 14px; background: transparent; border: 0; color: var(--ink); }
.landing-page .topbar .brand { color: inherit; }
.landing-page .topbar .mark i { background: currentColor; }
.landing-page .lang-menu summary { color: inherit; }
.landing-page .lang-list { background: var(--card); color: var(--ink); }
.landing-page .lang-list a { color: var(--ink-2); }
.landing-page .lang-list a[aria-current="true"] { color: var(--ink); }
.landing-page .topbar .langs { white-space: nowrap; }
@media (max-width: 400px) { .landing-page .topbar .langs a { margin-left: 8px; } .landing-page .topbar .brand { gap: 8px; } }
.landing-page nav.pages { border-top: 0; padding-top: 32px; }
.landing-page footer.site { border-top: 0; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.landing-page nav.pages a, .landing-page footer.site, .landing-page footer.site a { color: var(--ink-2); }

/* ---------- 바탕 ---------- */
.landing { position: relative; padding: 0; overflow-x: clip; font-family: var(--sans); font-size: var(--t-body); }
.landing h1, .landing h2 { margin: 0; font-weight: inherit; }
:where(.landing) p, :where(.landing) li, :where(.landing) ol, :where(.landing) ul, :where(.landing) dl, :where(.landing) dd, :where(.landing) dt, :where(.landing) figure, :where(.landing) fieldset { margin: 0; padding: 0; border: 0; }
:where(.landing) ol, :where(.landing) ul { list-style: none; }
.landing [hidden] { display: none !important; }
.landing svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; 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; }
:where(.landing) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
.landing :focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 6px; }
html:lang(ko) .landing { word-break: keep-all; }
html:lang(ja) .landing * { word-break: normal; line-break: strict; }
/* 중국어: 한자는 그 나라 명조(송체)로 — 일본어 명조가 먼저 잡히지 않게 */
html:lang(zh-Hant) { --serif: "Newsreader Web", "Songti TC", "PMingLiU", "Noto Serif TC", "Noto Serif CJK TC", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Segoe UI", sans-serif; }
html:lang(zh-Hans) { --serif: "Newsreader Web", "Songti SC", "SimSun", "Noto Serif SC", "Noto Serif CJK SC", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif; }
html:lang(zh-Hant) .landing *, html:lang(zh-Hans) .landing * { word-break: normal; line-break: strict; }
.period { color: var(--seal); font-weight: inherit; }
.note { font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

/* 단추: 납작하고 완전히 둥글다. 누르면 살짝 작아진다 */
.landing .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: var(--t-body); font-weight: 650; text-decoration: none; transition: transform .14s var(--out), background-color .2s; }
.landing .btn svg { font-size: 1.15em; stroke-width: 1.8; }
.landing .btn:active { transform: scale(.97); }
.landing .btn:disabled { background: var(--surface); color: var(--ink-3); cursor: default; transform: none; }
.landing .btn-ghost { background: var(--surface); color: var(--ink); }
@media (hover: hover) { .landing .btn:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); } .landing .btn-ghost:hover { background: color-mix(in srgb, var(--surface) 80%, var(--ink)); color: var(--ink); } }

/* 장면 */
.scene { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.cap { font-family: var(--serif); font-weight: 400; font-size: var(--t-head); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; max-width: 13em; }
.cap-b { margin-top: 14px; max-width: 30ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
html:lang(en) .cap-b { max-width: 34ch; }

/* 휴대폰 틀: 검은 테와 섬만 (그림자 없음), 화면 색은 앱의 종이색 */
.phone { --w: min(60vw, 300px); position: relative; display: block; width: var(--w); aspect-ratio: 600 / 1380;
  padding-top: calc(var(--w) * .1); border: calc(var(--w) * .03) solid var(--bezel); border-radius: calc(var(--w) * .15); background: var(--screen); overflow: hidden; }
.phone::before { content: ""; position: absolute; z-index: 2; top: calc(var(--w) * .03); left: 50%; width: 32%; height: calc(var(--w) * .075); margin-left: -16%; border-radius: 999px; background: var(--bezel); }
.phone img { display: block; width: 100%; height: auto; }
:root[data-mode="quiet"] .phone, .md-night .phone { border-color: #2C313D; }

/* ==========================================================================
   머리: 수많은 한 줄 사이 "작품 하나, 한 줄."
   ========================================================================== */
.s-intro { display: grid; align-items: end; padding: 0 var(--gutter) clamp(56px, 12svh, 120px); }
.voices { position: absolute; inset: 0; pointer-events: none; }
.vc { position: absolute; display: flex; align-items: baseline; gap: .5em; white-space: nowrap; font-family: var(--serif); font-size: 17px; color: var(--ink); opacity: var(--o, .3); }
.vc b { display: inline-flex; align-items: center; gap: 3px; font-family: var(--sans); font-size: .7em; font-weight: 700; color: var(--seal); }
.vc b svg { fill: currentColor; stroke: none; }
.vc:nth-child(1)  { left: 40%; top: 12%; --o: .36; }
.vc:nth-child(2)  { left: -10%; top: 18%; --o: .26; }
.vc:nth-child(3)  { left: 22%; top: 24%; --o: .22; }
.vc:nth-child(4)  { left: 52%; top: 30%; --o: .32; }
.vc:nth-child(5)  { left: 4%;  top: 36%; --o: .22; }
.vc:nth-child(6)  { left: -18%; top: 9%; --o: .2; }
.vc:nth-child(7)  { left: 58%; top: 20%; --o: .24; }
.vc:nth-child(8)  { left: 30%; top: 41%; --o: .2; }
.vc:nth-child(9)  { left: 12%; top: 29%; --o: .2; }
.vc:nth-child(10) { left: 64%; top: 38%; --o: .24; }
@media (min-width: 900px) {
  .vc:nth-child(1)  { left: 52%; top: 14%; } .vc:nth-child(2)  { left: 6%;  top: 11%; } .vc:nth-child(3)  { left: 56%; top: 26%; }
  .vc:nth-child(4)  { left: 62%; top: 38%; } .vc:nth-child(5)  { left: 30%; top: 19%; } .vc:nth-child(6)  { left: 58%; top: 50%; }
  .vc:nth-child(7)  { left: 66%; top: 62%; } .vc:nth-child(8)  { left: 60%; top: 74%; } .vc:nth-child(9)  { left: 70%; top: 86%; }
  .vc:nth-child(10) { left: -4%; top: 25%; }
}
.intro-copy { position: relative; z-index: 2; display: grid; justify-items: start; gap: 22px; }
.h-title { display: grid; font-family: var(--serif); font-weight: 400; font-size: var(--t-display); line-height: .94; letter-spacing: -0.05em; margin-left: -.04em; }
html:lang(ja) .h-title { font-size: clamp(46px, 12.6vw, 150px); }
.ht-l { display: block; }
.h-sub { max-width: 26ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
html:lang(en) .h-sub { max-width: 32ch; }
.h-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.h-soon { font-size: var(--t-body); color: var(--ink-2); }
.one-line { display: none; }
@media (min-width: 900px) {
  .vc { font-size: 22px; }
  .s-intro { padding-bottom: 12svh; }
}

/* ==========================================================================
   쓰기: 휴대폰 옆에서 한 줄이 써진다
   ========================================================================== */
.s-write { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: calc(10svh + env(safe-area-inset-top, 0px)) var(--gutter) 0; }
.w-copy { order: -1; }
.w-sheet { margin-top: 28px; display: grid; gap: 12px; }
.w-stars { display: flex; gap: 6px; color: var(--seal); font-size: var(--t-head); }
.w-stars svg { fill: currentColor; stroke: none; }
.w-stars .half .o { fill: none; stroke: currentColor; stroke-width: 1.3; }
.w-stars .half .f { clip-path: inset(0 50% 0 0); }
.w-line { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.45; max-width: 24ch; }
html:lang(en) .w-line { max-width: 30ch; }
.w-count { font-size: var(--t-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.w-count b { color: var(--ink); font-weight: 650; }
.ph-write { --w: min(52vw, 290px); justify-self: end; align-self: end; margin-bottom: -14svh; }
@media (min-width: 900px) {
  .s-write { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; align-items: center; column-gap: 80px; padding-top: 0; }
  .w-copy { order: 0; }
  .ph-write { --w: min(calc((100svh - 140px) * .435), 340px); justify-self: center; align-self: center; margin: 0; }
}

/* ==========================================================================
   기록장: 옆으로 흐른다
   ========================================================================== */
.s-journal { display: grid; grid-template-rows: auto minmax(0, 1fr); padding-top: calc(10svh + env(safe-area-inset-top, 0px)); background: var(--surface); }
.j-head { padding: 0 var(--gutter); }
.j-prog { margin-top: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; max-width: 520px; font-size: var(--t-body); color: var(--ink-2); }
.j-work { font-family: var(--serif); font-size: var(--t-body); color: var(--ink); }
.j-prog i { height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.j-prog i b { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; }
.j-ep { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.j-rail { position: relative; min-height: 0; overflow-x: auto; scrollbar-width: none; }
.j-rail::-webkit-scrollbar { display: none; }
.j-track { display: flex; align-items: center; gap: 14px; height: 100%; width: max-content; padding: 5svh var(--gutter) 7svh; }
.ent { flex: none; width: min(76vw, 340px); display: grid; gap: 14px; padding: 24px; border-radius: 28px; background: var(--card); }
.ent-m { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ent-m span:last-child { color: var(--ink); font-weight: 650; }
.ent-t { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.42; }
.ent-t s { color: var(--ink-2); text-decoration-thickness: 1px; }
.ent-s { display: flex; align-items: center; gap: 10px; font-size: var(--t-body); color: var(--ink-2); }
.ent-s svg { fill: var(--seal); stroke: none; margin-right: -6px; }
.ent-spoil .blur { filter: blur(6px); }
.ent-last { background: var(--ink); color: var(--on-ink); }
.ent-last .ent-m, .ent-last .ent-s, .ent-last .ent-m span:last-child { color: color-mix(in srgb, var(--on-ink) 72%, transparent); }
.ent-phone { flex: none; padding-left: 26px; }
.ph-journal { --w: min(52vw, 280px); }

/* ==========================================================================
   함께: 다른 사람의 한 줄이 모인다
   ========================================================================== */
.s-together { display: grid; grid-template-rows: auto minmax(0, 1fr); padding-top: calc(10svh + env(safe-area-inset-top, 0px)); }
.g-copy { position: relative; z-index: 3; padding: 0 var(--gutter); }
.ph-work { --w: min(56vw, 300px); position: absolute; right: var(--gutter); bottom: -8svh; }
.g-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 1200px; }
.gc { position: absolute; width: min(68vw, 320px); }
.gc-face { display: grid; gap: 10px; padding: 18px 20px; border-radius: 24px; background: var(--card); font-family: var(--serif); font-size: var(--t-lead); line-height: 1.4; color: var(--ink); outline: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.gc-face small { display: flex; gap: 10px; font-family: var(--sans); font-size: var(--t-body); color: var(--ink-2); }
.gc-face small b { font-weight: 650; color: var(--ink); }
.gc-face small em { font-style: normal; }
.gc-flip { left: var(--gutter); top: 44%; }
.gc-in { position: relative; display: grid; transform-style: preserve-3d; transform: rotateY(180deg); }
.gc-in > .gc-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gc-back { transform: rotateY(180deg); }
.gc-2 { left: calc(var(--gutter) + 6vw); top: 62%; }
.gc-3 { left: var(--gutter); bottom: 8%; }
.g-reacts { position: absolute; right: var(--gutter); bottom: 4%; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 70vw; }
.g-reacts span { padding: 10px 15px; border-radius: 99px; background: var(--ink); color: var(--on-ink); font-size: var(--t-body); font-weight: 650; }
:root[data-mode="quiet"] .g-cards, :root[data-mode="quiet"] .ph-work { opacity: .4; }
@media (min-width: 900px) {
  .s-together { grid-template-rows: none; align-items: center; padding-top: 0; }
  .g-copy { width: 42vw; }
  .ph-work { --w: min(calc((100svh - 160px) * .435), 320px); right: auto; left: 56%; bottom: auto; top: 50%; transform: translateY(-50%); }
  .gc-flip { left: auto; right: var(--gutter); top: 14%; }
  .gc-2 { left: auto; right: calc(var(--gutter) + 2vw); top: 44%; }
  .gc-3 { left: calc(56% - 300px); bottom: 10%; }
  .g-reacts { bottom: 9%; }
}

/* ==========================================================================
   센텐시: 먹색 장 (밝은·어두운 모드 모두 같은 먹)
   ========================================================================== */
.ask-sheet { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: calc(10svh + env(safe-area-inset-top, 0px)) var(--gutter) 7svh; background: #17191B; color: #EFEDE6; }
.ask-sheet .cap-b { color: #A9ACAE; }
.ask-sheet .period { color: #E07A5F; }
.ask-chat { align-self: center; width: min(100%, 640px); display: grid; gap: 22px; }
.ask-who { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: var(--t-lead); }
.landing .a-face { width: 1.4em; height: 1.4em; stroke: none; }
.af-bg { fill: #EFEDE6; } .af-eye { fill: #17191B; } .af-mouth { fill: none; stroke: #17191B; stroke-width: 8.1; stroke-linecap: round; } .af-dot { fill: #E07A5F; }
.ask-q { justify-self: end; max-width: 86%; padding: 14px 18px; border-radius: 22px 22px 6px 22px; background: #EFEDE6; color: #17191B; font-size: var(--t-body); line-height: 1.5; }
.ask-a { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.55; letter-spacing: -0.01em; }
.ask-a mark { padding: 0 .12em; border-radius: 4px; background: rgba(224, 122, 95, .3); color: inherit; }
.a-chip { display: inline-block; margin: 0 .12em; padding: .08em .55em; border-radius: 99px; background: #2A2D31; font-family: var(--sans); font-size: max(13px, .6em); font-weight: 650; vertical-align: .2em; white-space: nowrap; }
.ask-g { display: flex; align-items: center; gap: 8px; font-size: var(--t-body); color: #A9ACAE; }
.ask-g i { width: 8px; height: 8px; border-radius: 50%; background: #E07A5F; }
@media (min-width: 900px) {
  .ask-sheet { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: none; align-items: center; column-gap: 80px; padding-top: 0; }
  .ask-chat { justify-self: end; }
}

/* ==========================================================================
   달력: 날짜 칸에 표지가 떨어진다
   ========================================================================== */
.s-cal { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: calc(10svh + env(safe-area-inset-top, 0px)) var(--gutter) 6svh; }
.cal { align-self: center; width: min(100%, 700px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-m { grid-column: 1 / -1; margin-bottom: 10px; font-family: var(--serif); font-size: var(--t-lead); }
.cal-w { text-align: center; font-size: var(--t-small); color: var(--ink-3); padding-bottom: 4px; }
.cal-d { position: relative; aspect-ratio: 3 / 4.6; border-radius: 10px; background: var(--surface); }
.cal-d { padding-top: 20px; }
.cal-d > span { position: absolute; left: 0; right: 0; top: 2px; text-align: center; font-size: var(--t-small); line-height: 1.2; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-d .cv { position: absolute; left: 3px; right: 3px; top: 22px; bottom: 3px; width: auto; height: auto; border-radius: 6px; }
.cal-d .cv + .cv { transform: translate(7%, -6%) rotate(4deg); z-index: -1; }
@media (min-width: 900px) {
  .s-cal { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); grid-template-rows: none; align-items: center; column-gap: 72px; padding-top: 0; }
  .cal { justify-self: end; gap: 8px; }
}
/* 표지 (지어낸 예시, landing.js가 종류에 맞게 칠한다). 그림의 무늬라 그라데이션을 쓴다. taste-skill-ignore */
.cv { position: relative; display: block; overflow: hidden; background: var(--c1, #2A2D31); color: var(--c2, #F1EFE8); container-type: inline-size; }
.cv .cv-t { position: absolute; left: 9%; right: 9%; font-family: var(--serif); font-size: 13cqi; line-height: 1.15; overflow-wrap: anywhere; display: none; }
@media (min-width: 700px) { .cv .cv-t { display: block; } .cal-d .cv .cv-t { display: none; } }
.cv[data-kind="movie"] .cv-t { bottom: 9%; }
.cv[data-kind="movie"]::before { content: ""; position: absolute; left: 9%; right: 9%; top: 9%; height: 46%; background: var(--c3, rgba(255,255,255,.08)); border-radius: 1px; }
.cv[data-kind="tv"] .cv-t { top: 22%; }
.cv[data-kind="tv"]::after { content: ""; position: absolute; left: 9%; right: 9%; bottom: 9%; height: 4%; background: repeating-linear-gradient(90deg, currentColor 0 8%, transparent 8% 13%); opacity: .7; } /* taste-skill-ignore */
.cv[data-kind="book"] .cv-t { top: 50%; transform: translateY(-50%); text-align: center; }
.cv[data-kind="book"]::before { content: ""; position: absolute; inset: 7%; border: 1px solid currentColor; opacity: .5; } /* taste-skill-ignore */
.cv[data-kind="music"]::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 1; transform: translateY(-50%); background: radial-gradient(circle at 50% 50%, var(--c3) 0 16%, var(--c4) 16.5% 100%); } /* taste-skill-ignore */
.cv[data-kind="music"] .cv-t { bottom: 6%; font-size: 10cqi; }

/* ==========================================================================
   두 방식: 밤이 번진다
   ========================================================================== */
.s-modes { min-height: 0; }
.md { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: calc(10svh + env(safe-area-inset-top, 0px)) var(--gutter) 0; overflow: hidden; }
.md-day { background: #F1F1EC; color: #17191B; }
.md-night { background: var(--night); color: var(--lamp); }
.md-day .cap-b { color: #565A5D; } .md-night .cap-b { color: var(--lamp-2); }
.md-day .period { color: #B5452A; } .md-night .period { color: var(--ember); }
.md-name { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-body); font-weight: 700; }
.md-name svg { font-size: 1.2em; }
.md .phone { justify-self: end; align-self: end; margin-bottom: -12svh; --w: min(56vw, 300px); }
@media (min-width: 900px) {
  .md { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; align-items: center; padding-top: 0; }
  .md .phone { justify-self: center; align-self: center; margin: 0; --w: min(calc((100svh - 160px) * .435), 320px); }
}

/* ==========================================================================
   써 보기 (직접 해 보는 곳)
   ========================================================================== */
.s-end { display: grid; gap: 40px; padding: clamp(96px, 16svh, 200px) var(--gutter) 40px; }
.e-head { display: grid; justify-items: start; gap: 24px; }
.landing .end-mark { width: min(36vw, 180px); height: auto; overflow: visible; fill: none; }
.end-wave { stroke: var(--ink); stroke-width: 22; stroke-linecap: round; }
.end-dot { fill: var(--seal); stroke: none; transform-box: fill-box; transform-origin: center; }
.e-title { font-family: var(--serif); font-weight: 400; font-size: var(--t-head); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; max-width: 12em; }
.e-mode { display: none; }
.js .e-mode { display: block; }
.mode-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--surface); font-size: var(--t-body); font-weight: 650; isolation: isolate; }
.mode-switch > span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; white-space: nowrap; color: var(--ink-2); transition: color .4s var(--out); }
.mode-switch svg { font-size: 1.1em; }
.ms-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transition: transform .45s var(--out), background-color .9s; }
.mode-switch[aria-checked="false"] .ms-std, .mode-switch[aria-checked="true"] .ms-quiet { color: var(--on-ink); }
.mode-switch[aria-checked="true"] .ms-knob { transform: translateX(100%); }
.pen { width: min(100%, 640px); display: grid; gap: 14px; }
.pen-rate { display: flex; align-items: center; gap: 14px; }
.rate { display: flex; gap: 4px; color: var(--seal); }
.rate-star { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.rate-star svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.3; fill: none; }
.rate-star .f { fill: currentColor; stroke: none; clip-path: inset(0 var(--cut, 100%) 0 0); transition: clip-path .18s var(--out); }
.rate-star button { position: absolute; top: 0; bottom: 0; width: 50%; }
.rate-star button:first-of-type { left: 0; } .rate-star button:last-of-type { right: 0; }
.rate-n { font-family: var(--serif); font-size: var(--t-lead); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pen-input { width: 100%; min-height: 120px; resize: vertical; padding: 18px 20px; border: 0; border-radius: 24px; background: var(--card); color: var(--ink); font-family: var(--serif); font-size: var(--t-lead); line-height: 1.55; caret-color: var(--seal); }
.pen-input::placeholder { color: var(--ink-3); }
.pen-input:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.pen-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.pen-share { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-body); cursor: pointer; }
.pen-share input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tog { position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; background: var(--surface); transition: background-color .25s var(--out); }
.tog i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-3); transition: transform .25s var(--out), background-color .25s; }
.pen-share input:checked + .tog { background: var(--ink); }
.pen-share input:checked + .tog i { transform: translateX(18px); background: var(--on-ink); }
.pen-share input:focus-visible + .tog { outline: 2px solid var(--seal); outline-offset: 3px; }
.pen-count { font-size: var(--t-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pen-count b { font-weight: 650; color: var(--ink); }
.pen.over .pen-count b { color: var(--seal); }
.pen-lines, .pen-note { font-size: var(--t-body); color: var(--ink-2); }
/* 남긴 한 줄은 피드 카드로 보인다 */
.pen-card { display: grid; gap: 10px; padding: 22px 22px 18px; border-radius: 28px; background: var(--ink); color: var(--on-ink); }
.pc-m { display: flex; gap: 10px; font-size: var(--t-body); color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.pc-m b { color: var(--on-ink); }
.pc-r { display: flex; gap: 2px; color: var(--seal); font-size: var(--t-body); }
.pc-r svg { fill: currentColor; stroke: none; }
.pc-r .half { clip-path: inset(0 50% 0 0); }
.pc-t { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-n { font-size: var(--t-body); color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.pen-again { min-height: 44px; margin-left: 4px; text-decoration: underline; text-underline-offset: 4px; color: var(--on-ink); }
.e-soon { font-size: var(--t-body); color: var(--ink-2); }
.cta-wrap { margin-top: 6px; }
@media (min-width: 900px) {
  .s-end { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: start; }
  .e-soon { grid-column: 2; margin-top: -20px; }
  .pen-bar { display: flex; flex-wrap: wrap; gap: 14px; }
  .pen-share { grid-column: auto; }
  .pen-count { margin-left: auto; }
}

/* ==========================================================================
   약속 · 질문 · 커피 한 잔
   ========================================================================== */
.s-more { display: grid; gap: clamp(72px, 10svh, 140px); padding: clamp(72px, 12svh, 160px) var(--gutter) 32px; }
.sec-t { font-family: var(--serif); font-weight: 400; font-size: var(--t-head); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; max-width: 14em; }
.promises { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 720px; }
.promises li { padding: 12px 18px; border-radius: 99px; background: var(--surface); font-size: var(--t-body); color: var(--ink); }
.qa { margin-top: 28px; display: grid; gap: 28px; max-width: 720px; }
.qa-item { display: grid; gap: 6px; }
.qa dt { font-size: var(--t-body); color: var(--ink-2); }
.qa dd { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.22; letter-spacing: -0.015em; }
.qa .dot { display: inline-block; width: .2em; height: .2em; margin-left: .08em; border-radius: 50%; background: var(--seal); vertical-align: .02em; }
.bmc { display: grid; justify-items: start; gap: 16px; padding: 28px 24px; border-radius: 32px; background: var(--surface); max-width: 720px; }
.bmc-t { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.4; }
.bmc .btn { background: var(--ink); color: var(--on-ink); }
@media (min-width: 900px) {
  .s-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; }
  .faq { grid-column: 2; grid-row: 1 / 3; }
  .s-more > .note { grid-column: 1 / -1; }
}

/* ==========================================================================
   움직임 켜짐 (html.gs)
   ========================================================================== */
.gs .one-line { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 50%; display: grid; justify-items: start; gap: 14px; transform: translateY(-50%); pointer-events: none; }
.gs .ol-t { font-family: var(--serif); font-size: clamp(40px, 8vw, 116px); line-height: 1.08; letter-spacing: -0.04em; max-width: 11em; text-wrap: balance; }
.gs .ol-r { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-body); font-weight: 700; color: var(--seal); }
.gs .ol-r svg { fill: currentColor; stroke: none; }
.gs .j-rail { overflow: visible; }
.gs .s-modes { height: 100vh; height: 100svh; overflow: hidden; }
.gs .md { position: absolute; inset: 0; }
.gs .md-night { clip-path: circle(0% at 70% 80%); }

/* 동작 줄이기: 끝난 모습 그대로 */
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html:has(> body.landing-page) { scroll-behavior: auto; }
}

/* 앱 안 소개 (html.in-app): 머리글이 없다 */
html.in-app body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.in-app .s-more { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }