/* ============================================================
   TimeNest — 사이트 디자인 토큰
   ------------------------------------------------------------
   앱의 문법을 그대로 옮긴다 (mobile/lib/core/theme/menu_palette.dart):

     · 색은 브랜드 골드 하나만, 나머지는 웜 아이보리의 밝기 단계로 위계 표현
     · 네온/원색 액센트 금지, 카드·칩의 좌측 컬러 바(띠) 금지
     · 디바이더 대신 여백으로 구분

   예전 index.html 은 인라인 style 이 315개였고 그 안에서 font-family 를
   110번 다시 선언했다. 섹션을 하나 더할 때마다 그 섹션만의 디자인이 하나
   더 생기는 구조라, 스크롤을 내릴수록 다른 사이트처럼 보였다. 규칙을 여기
   한 곳에 둔다.
   ============================================================ */

:root {
    /* --- 마케팅 면 -------------------------------------------
       App Store 스크린샷 배경에서 그대로 뽑은 값이다. 사람들이
       스토어에서 본 그 색으로 랜딩이 열려야 같은 물건으로 읽힌다. */
    --teal-top: #216282;
    --teal-bottom: #183B4F;
    --on-teal: #FFFFFF;
    --on-teal-dim: rgba(255, 255, 255, 0.82);   /* 틸 위 4.35 → 5.3 */
    --on-teal-faint: rgba(255, 255, 255, 0.75); /* 2.67 → 4.58 (레인 축·범례가 이걸 쓴다) */
    --hairline-teal: rgba(255, 255, 255, 0.14);

    /* --- 앱 면 ------------------------------------------------
       menu_palette.dart 의 라이트 모드 값. */
    --paper: #F7F5F1;
    --paper-deep: #EFEBE3;
    --ink: #1C1A16;
    --gold: #7A611A;        /* 밝은 바탕 위 — paper-deep 에서 4.02 → 4.6 */
    /* 틸 위의 **글자와 선**. #CBA135 는 여기서 2.77:1 이라 못 쓴다.
       4.5 를 넘기려면 샴페인 쪽으로 밝혀야 한다 — 계산으로 찾은 최소값이다. */
    --gold-bright: #E7D3A0; /* 틸 위 4.54:1 */

    /* 골드 **채움**(버튼). 채움은 그 위에 얹는 잉크 글자가 대비를 내므로
       브랜드 골드를 그대로 지킨다. */
    --gold-fill: #CBA135;

    /* 위계는 밝기 단계로만 만든다 — 새 색을 들이지 않는다 */
    --ink-70: rgba(28, 26, 22, 0.70);
    --ink-55: rgba(28, 26, 22, 0.68);   /* 3.80 → 5.9 */
    --ink-35: rgba(28, 26, 22, 0.61);   /* 2.17 → 4.60 */
    --hairline: rgba(28, 26, 22, 0.08);

    /* --- 여백 --------------------------------------------------
       구분은 선이 아니라 이 값들이 한다. */
    --s-1: 0.5rem;
    --s-2: 0.75rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2rem;
    --s-6: 3rem;
    --s-7: 4.5rem;
    --s-8: 7rem;

    /* 섹션 상하 여백 — 화면이 좁으면 함께 줄어든다 */
    --section-y: clamp(4rem, 9vw, 8rem);

    /* --- 서체 --------------------------------------------------
       앱이 쓰는 것과 같은 얼굴. Space Grotesk 가 라틴 기본이고
       (typography.dart 의 _spaceGrotesk), 한글은 IBM Plex Sans KR
       이 받는다 — 위젯이 쓰는 바로 그 서체다. */
    --sans: 'Space Grotesk', 'IBM Plex Sans KR', -apple-system,
            BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --num: 'Dosis', var(--sans);

    /* --- 글자 크기 -------------------------------------------
       여백에는 토큰이 있는데 글자에는 없어서 0.98 / 0.92 / 0.875 / 0.85 /
       0.75 / 0.74 / 0.72 / 0.62rem 이 흩어져 있었다. 서로 0.5px 차이는
       위계가 아니라 잡음이다. 네 단계로 못박는다. */
    --fs-xs: 0.8125rem;   /* 13px — 범례·축·꼬리표 */
    --fs-sm: 0.9375rem;   /* 15px — 보조 설명 */
    --fs-md: 1.0625rem;   /* 17px — 본문 */
    --fs-lg: 1.25rem;     /* 20px — 리드 */

    --wrap: 1120px;
    --wrap-narrow: 680px;
}

/* ============================================================
   바탕
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* ============================================================
   레이아웃
   ============================================================ */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--s-4);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
    padding: var(--section-y) 0;
}

/* 마케팅 면 — 열고 닫는 자리에만 쓴다. 가운데를 이걸로 채우면
   스크롤 내내 어두워서 정작 강조할 곳이 없어진다. */
.section--teal {
    background: linear-gradient(180deg, var(--teal-top) 0%, var(--teal-bottom) 100%);
    color: var(--on-teal);
}

.section--paper { background: var(--paper); }
.section--deep { background: var(--paper-deep); }

/* 좁은 단을 넓은 단 **안에** 둘 때. `.wrap` 이 이미 좌우 여백을 줬으므로
   여기서 또 주면 두 겹이 된다. */
.wrap .wrap--narrow { padding-left: 0; padding-right: 0; }

/* ============================================================
   여백 유틸
   ------------------------------------------------------------
   딱 이만큼만 둔다. 예전 index.html 이 인라인 style 315개까지 불어난
   것은 이런 한 줄짜리를 그때그때 적어 넣었기 때문이다 — 이름을 붙여
   두면 다음 사람이 같은 자리에 같은 값을 쓴다.
   ============================================================ */

.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.center { text-align: center; }

/* ============================================================
   글자
   ============================================================ */

/* 섹션 라벨 — 앱의 sectionLabel 과 같은 문법(골드 대문자 + 넓은 자간).
   한글에는 자간을 주지 않는다. 앱에서도 같은 이유로 갈라 둔다
   (menu_palette.dart 의 wideTracking) — "진 행 률"로 벌어진다. */
.eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 var(--s-3);
}

.section--teal .eyebrow { color: var(--gold-bright); }

.h1, .h2, .h3 {
    margin: 0 0 var(--s-4);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-wrap: balance;
}

.h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); line-height: 1.3; margin-bottom: var(--s-2); }

.lede {
    font-size: clamp(1.05rem, 1.6vw, var(--fs-lg));
    line-height: 1.6;
    color: var(--ink-70);
    margin: 0 0 var(--s-5);
    max-width: 46ch;
    text-wrap: pretty;
}

.section--teal .lede { color: var(--on-teal-dim); }

.body { color: var(--ink-70); margin: 0 0 var(--s-3); }
.section--teal .body { color: var(--on-teal-dim); }

.fine {
    font-size: var(--fs-sm);
    color: var(--ink-35);
    margin: var(--s-3) 0 0;
}
.section--teal .fine { color: var(--on-teal-faint); }

/* ============================================================
   버튼
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    /* 완전 알약(999px)은 어느 템플릿에나 붙어 있는 모양이다.
       모서리를 살짝만 접으면 같은 자리에서 훨씬 덜 흔하다. */
    padding: 0.95rem 1.9rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: filter 0.15s ease;
}

/* 떠오르는 hover 대신 밝기 한 단계. 1px 씩 뜨는 버튼도 같은 출처 표시다 */
.btn:hover { filter: brightness(1.07); }
.btn:active { filter: brightness(0.96); }

/* 골드는 핵심 CTA 에만 — 앱에서도 그렇게 쓴다 */
.btn--gold {
    background: var(--gold-fill);
    color: #1A1408;
}

.btn--ink {
    background: var(--ink);
    color: var(--paper);
}

.btn--quiet {
    border-color: var(--hairline-teal);
    color: var(--on-teal);
}

.section--paper .btn--quiet,
.section--deep .btn--quiet {
    border-color: var(--hairline);
    color: var(--ink);
}

/* ============================================================
   살아 있는 도시 레인 (히어로)
   ------------------------------------------------------------
   **축이 하나다.** 왼쪽 끝이 보는 사람의 00:00, 오른쪽 끝이 24:00. 각
   도시의 잠·일과는 시차만큼 밀려서 그려지므로, "저쪽의 밤이 내 낮에
   걸쳐 있다"가 모양으로 읽힌다. 앱 타임라인과 같은 짜임이다.

   색은 여기서도 골드 하나만 쓴다 — 지금 선과 다 같이 되는 시간에만.
   ============================================================ */

:root {
    /* 줄과 덧그림이 같은 자리를 쓰도록 폭을 한 곳에 둔다 */
    --strip-city: 6.2rem;
    --strip-time: 4.6rem;
    --strip-gap: 0.9rem;
}

.strip {
    margin-top: var(--s-5);
    border-top: 1px solid var(--hairline-teal);
    border-bottom: 1px solid var(--hairline-teal);
    padding: var(--s-4) 0;
}

.strip__axis {
    display: grid;
    grid-template-columns: var(--strip-city) 1fr var(--strip-time);
    gap: var(--strip-gap);
    font-size: var(--fs-xs);
    color: var(--on-teal-faint);
    margin-bottom: var(--s-2);
}

.strip__ticks {
    display: flex;
    justify-content: space-between;
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
}

.strip__rows {
    position: relative;
    cursor: grab;
    outline: none;
    touch-action: pan-y;
}
.strip__rows.is-dragging { cursor: grabbing; }
.strip__rows:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 8px; }

.strip__row {
    display: grid;
    grid-template-columns: var(--strip-city) 1fr var(--strip-time);
    align-items: center;
    gap: var(--strip-gap);
    padding: 0.32rem 0;
    transition: opacity 0.4s ease;
}

/* 자는 시간대.
 *
 * **줄 전체에 `opacity` 를 걸면 안 된다.** 그러면 글자 알파(0.82)에 곱해져
 * 대비가 3.48:1 로 떨어진다 — 읽으라고 적어 둔 도시 이름과 시각이다.
 * 통과하는 값까지 올리면(0.92) 흐려진 티가 안 나서 신호 구실을 못 한다.
 *
 * 그래서 흐림은 **레인에만** 걸고, 자고 있다는 것은 달 표시가 말한다.
 * 대비에 기대지 않는 신호라 어느 쪽으로도 잃는 게 없다. */
.strip__row.is-asleep .strip__lane { opacity: 0.55; }

.strip__row.is-asleep .strip__city,
.strip__row.is-asleep .strip__time { color: var(--on-teal-faint); }

.strip__row.is-asleep .strip__city::after {
    content: ' \263E';           /* ☾ */
    opacity: 0.8;
}

.strip__city {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--on-teal-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 보는 사람의 자리. 자기 시간이 있어야 나머지가 비교가 된다 */
.strip__row--home .strip__city { color: var(--gold-bright); font-weight: 700; }

/* 레인 — 깨어 있고 한가한 시간이 바탕이고, 그 위에 잠과 일과를 얹는다 */
.strip__lane {
    position: relative;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.24);
}

.strip__seg { position: absolute; top: 0; bottom: 0; display: block; }
.strip__seg--sleep { background: rgba(9, 26, 36, 0.66); }
.strip__seg--work  { background: rgba(255, 255, 255, 0.06); }

/* 지금 선과 겹치는 시간은 줄들을 **가로질러야** 하므로 덧그림에 둔다.
   레인 칸과 정확히 같은 자리를 쓰려고 위의 폭 값을 그대로 쓴다. */
.strip__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--strip-city) + var(--strip-gap));
    right: calc(var(--strip-time) + var(--strip-gap));
    pointer-events: none;
}

/* 모두가 연락될 만한 구간 */
.strip__meet {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    background: rgba(231, 211, 160, 0.18);
    border-left: 1px solid rgba(231, 211, 160, 0.6);
    border-right: 1px solid rgba(231, 211, 160, 0.6);
}

/* 지금. 스스로 걸어가고, 끌면 사람이 몬다.
   한 걸음이 1분이라 그냥 두면 톡톡 튄다 — 걸음 간격만큼 흐르게 한다.
   끌 때는 손을 따라와야 하므로 전환을 끈다. */
.strip__cursor {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--gold-bright);
    transition: left 0.38s linear;
}

.strip__rows.is-dragging .strip__cursor { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .strip__cursor { transition: none; }
}

.strip__time {
    font-family: var(--num);
    font-size: 1.02rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--on-teal);
}

/* 날짜가 어긋난 줄에만 꼬리표가 붙는다.
 *
 * **글자가 없어도 자리는 지킨다.** 내용이 있을 때만 상자가 생기게 두었더니
 * 끌다가 날짜가 넘어가는 순간 그 줄만 키가 커졌고, 히어로가 2단 그리드에
 * `align-items: center` 라서 옆의 앱 화면까지 위아래로 흔들렸다.
 */
.strip__time::after {
    content: attr(data-day);
    display: block;
    font-family: var(--sans);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--on-teal-faint);
    line-height: 1.2;
    min-height: 1.2em;
}

.strip__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-3);
    margin-top: var(--s-3);
    font-size: var(--fs-xs);
    color: var(--on-teal-faint);
}

.strip__key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.strip__key::before {
    content: '';
    width: 14px;
    height: 8px;
    border-radius: 2px;
    /* 레인과 같은 바탕(0.24) 위에 같은 값을 얹어야 범례가 제가 설명하는
       색을 보여준다. 예전에는 틸 배경 위에 칠해서 실제와 달랐다. */
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 99px rgba(255, 255, 255, 0.16);
}
.strip__key--sleep::before {
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 99px rgba(9, 26, 36, 0.66);
}
.strip__key--meet::before {
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 99px rgba(231, 211, 160, 0.18);
    border: 1px solid rgba(231, 211, 160, 0.6);
}

/* 이 앱만 할 수 있는 대답이다 — 보는 사람의 시간대로 계산된 "언제 되는가".
   범례와 같은 클래스에 얹어 11px 각주로 렌더되고 있었다. */
.strip__answer {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    font-weight: 600;
    color: var(--gold-bright);
    margin: 0 0 var(--s-3);
    min-height: 1.5em;
}

.strip__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--on-teal-faint);
}

.strip__hint.is-used { opacity: 0; transition: opacity 0.4s ease; }

.strip__reset {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--gold-bright);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    flex: none;
}

@media (max-width: 980px) {
    :root { --strip-city: 5.2rem; --strip-time: 4.2rem; --strip-gap: 0.7rem; }
}

@media (max-width: 780px) {
    :root { --strip-city: 4.6rem; --strip-time: 3.9rem; --strip-gap: 0.6rem; }
    .strip__city { font-size: var(--fs-xs); }
    .strip__time { font-size: var(--fs-sm); }
}

/* ============================================================
   "아래에 더 있다"
   ------------------------------------------------------------
   히어로가 뷰포트보다 길어서 섹션 끝에 붙이면 도착한 사람에게는 안 보인다.
   화면 아래에 붙여 두고, 조금이라도 내리면 사라진다.

   말투는 앱 스크린샷의 것을 따른다 — "Scroll down" 이 아니라 지금 보고
   있는 것에 대한 한마디여야 한다.
   ============================================================ */

.scrollcue {
    position: fixed;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    z-index: 20;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;

    padding: 0.55rem 1.05rem 0.5rem;
    border-radius: 999px;
    background: rgba(12, 34, 46, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);

    font-size: var(--fs-sm);
    color: var(--on-teal-dim);
    text-decoration: none;
    white-space: nowrap;

    transition: opacity 0.35s ease, transform 0.35s ease;
}

.scrollcue:hover { color: var(--on-teal); }

/* 할 일을 마친 표시가 계속 떠 있으면 그때부터는 방해다 */
.scrollcue.is-gone {
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
}

/* 통통 튀는 화살표. 골드는 지금 선과 같은 자리에서만 쓰는 색이라,
   여기서도 "여기를 보라"는 뜻으로 쓴다. */
.scrollcue__mark {
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--gold-bright);
    border-bottom: 2px solid var(--gold-bright);
    transform: rotate(45deg);
    animation: scrollcue-hop 1.7s ease-in-out infinite;
}

@keyframes scrollcue-hop {
    0%, 60%, 100% { transform: rotate(45deg) translate(0, 0); }
    30%           { transform: rotate(45deg) translate(3px, 3px); }
}

@media (max-width: 780px) {
    .scrollcue { bottom: 1rem; font-size: var(--fs-xs); }
}

/* 움직임을 줄여 달라고 한 사람에게는 튀지 않는다 — 자리는 지킨다 */
@media (prefers-reduced-motion: reduce) {
    .scrollcue__mark { animation: none; }
    .scrollcue { transition: none; }
}

/* ============================================================
   이야기 블록 — 글 한 덩어리 + 화면 한 장
   ------------------------------------------------------------
   App Store 스크린샷이 이미 한 장에 한 문장씩 들고 있어서, 랜딩은
   그것을 되풀이하지 않고 이어 붙이기만 한다.
   ============================================================ */

.story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.story + .story { margin-top: var(--s-8); }

/* 짝수 번째는 좌우를 바꾼다 — 같은 배치가 이어지면 스크롤이 지루하다 */
.story--flip .story__art { order: -1; }

.story__art img {
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.section--paper .story__art img,
.section--deep .story__art img {
    box-shadow: 0 20px 60px rgba(28, 26, 22, 0.14);
}

/* ------------------------------------------------------------
   맨 화면을 받는 액자 (.shot)
   ------------------------------------------------------------
   story-01~06 은 App Store 용으로 **구워진** 컷이다 — 사진 안에
   이미 기기 테두리와 틸 배경이 들어 있다. 그런데 앱에서 바로 뽑은
   컷(타임박스·브리핑·데일리)은 배경도 테두리도 없는 맨 스크린샷이라,
   같은 자리에 놓으면 혼자 종이 위에 떠 있는 것처럼 보였다.
   사용자가 "이미지 배경이 기존 거랑 다르다"고 한 자리가 여기다.

   컷을 다시 굽지 않고 **액자를 CSS 로 두른다**: 구워진 컷과 같은 틸
   그라디언트 판 위에, 같은 두께의 기기 테두리. 아래로 살짝 흘려보내는
   것까지 구워진 컷의 구도를 따른다.

   반지름은 px 이 아니라 백분율(가로/세로)로 준다. 폭이 502px 이든
   340px 이든 화면 모서리가 같은 곡률로 보여야 한다.
   ------------------------------------------------------------ */

.shot {
    margin: 0;
    padding: 4.5% 7% 0;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--teal-top) 0%, var(--teal-bottom) 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.section--paper .shot,
.section--deep .shot {
    box-shadow: 0 20px 60px rgba(28, 26, 22, 0.16);
}

/* 기기 테두리. 흑단 한 겹이 아니라 위에서 빛을 받는 금속처럼 — 한 겹만
   칠하면 스티커처럼 납작하다. */
.shot__frame {
    padding: 1.7%;
    background: linear-gradient(150deg, #6A6B70 0%, #2B2C30 18%, #131416 55%, #4A4B50 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 10px 30px rgba(0, 0, 0, 0.35);
    /* 판 아래로 흘려보낸다 — 구워진 컷도 기기 아랫부분이 잘려 있다 */
    margin-bottom: -6%;
}

.shot__frame img {
    display: block;
    width: 100%;
    box-shadow: none;
}

/* ------------------------------------------------------------
   모서리 — 애플의 곡률로
   ------------------------------------------------------------
   iPhone 화면 모서리는 **원호가 아니다.** 반지름 55pt 의 연속 곡선
   (continuous corner) 이라, 같은 반지름의 `border-radius` 를 주면
   모서리가 더 둥글고 물러 보인다. 구워진 목업 컷(story-01~06)에는 그
   곡선이 사진으로 들어 있어서, CSS 액자만 혼자 다른 모서리였다.

   숫자는 실제 기기에서 온다: 393pt 폭에 55pt → 폭의 14.0%. 컷이
   920×2000 이므로 세로로는 6.44%(=128.8px) 가 같은 길이다. 테두리는
   그 안쪽 반지름에 베젤 두께(1.7%)를 더한 값이다.

   `corner-shape` 가 없는 브라우저에는 원호를 주되 반지름을 줄인다 —
   같은 반지름의 원호는 눈에 더 둥글게 잡히기 때문이다.
   ------------------------------------------------------------ */

.shot__frame { border-radius: 12% / 5.6%; }
.shot__frame img { border-radius: 11% / 5.05%; }

@supports (corner-shape: squircle) {
    .shot__frame {
        corner-shape: squircle;
        border-radius: 15.2% / 7.13%;
    }
    .shot__frame img {
        corner-shape: squircle;
        border-radius: 14% / 6.44%;
    }
}

/* `.story__art img` 의 둥근 모서리·그림자가 액자 안에서 또 한 번 지지 않도록 */
.story__art .shot img { box-shadow: none; }

/* ============================================================
   기능 격자
   ------------------------------------------------------------
   카드에 테두리도 채움도 주지 않는다. 앱의 규칙이 "디바이더 대신
   여백"이고, 카드 위아래에 컬러 띠를 두르는 것은 금지다.
   ============================================================ */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-6) clamp(2rem, 5vw, 4rem);
}

.grid__item .h3 { color: var(--ink); }
.section--teal .grid__item .h3 { color: var(--on-teal); }

.grid__item p {
    margin: 0;
    color: var(--ink-55);
    font-size: var(--fs-md);
}
.section--teal .grid__item p { color: var(--on-teal-dim); }

/* ============================================================
   수치 — Forbes 인용 등
   ============================================================ */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-5);
    margin: var(--s-6) 0 0;
    padding: 0;
    list-style: none;
}

.stats__n {
    display: block;
    font-family: var(--num);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.stats li p {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-55);
    line-height: 1.5;
}

/* ============================================================
   하루 일정표 — 타임박싱 가이드의 예시
   ------------------------------------------------------------
   시각은 Dosis 로 자릿수를 고정한다. 앱·위젯이 숫자에 쓰는 그 서체다.
   ============================================================ */

.daysheet { margin-top: var(--s-5); }

.daysheet__row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-top: 1px solid var(--hairline);
    color: var(--ink-70);
}

.daysheet__row:last-child { border-bottom: 1px solid var(--hairline); }

.daysheet__t {
    font-family: var(--num);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}

/* 가운데로 세운 단에서는 본문도 함께 가운데로 온다 */
.center .lede { margin-left: auto; margin-right: auto; }

/* ============================================================
   FAQ — <details> 로 짠다. 여닫는 스크립트가 필요 없다.
   ============================================================ */

.faq { max-width: var(--wrap-narrow); margin: 0 auto; }

.faq details {
    border-top: 1px solid var(--hairline);
    padding: var(--s-4) 0;
}

.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }

.faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: '+';
    font-family: var(--num);
    font-weight: 600;
    color: var(--gold);
    flex: none;
    transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
    margin: var(--s-3) 0 0;
    color: var(--ink-70);
    max-width: 60ch;
}

/* ============================================================
   좁은 화면
   ============================================================ */

/* 900px 부터 1단으로 내린다. 780px 로 두었더니 800px 뷰포트에서 레인이
   150px 로 눌려 24시간을 시간당 6px 로 그렸다. */
@media (max-width: 900px) {
    body { font-size: 16px; }

    .story {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    /* 세로로 쌓이면 앱 화면이 먼저 와야 한다 — 레인은 증명이고
       스크린샷은 소개다. 소개가 먼저다. */
    #hero .story__art { order: -1; }

    /* 세로로 쌓이면 좌우 교대가 뜻을 잃는다. 글이 늘 먼저 온다 */
    .story--flip .story__art { order: 0; }

    .story + .story { margin-top: var(--s-7); }
}

/* 움직임을 줄여 달라고 한 사람에게는 줄인다 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
    .btn:hover { transform: none; }
}