/* mooha — 공통 디자인 시스템
   모든 페이지(mooha 홈, THREE, 앞으로의 집중 도구·가죽)가 이 한 파일을 쓴다.
   제품 페이지는 <body data-ink="감"> 처럼 잉크 하나만 바꿔 자기 색을 갖는다. */

/* ---------- 1. 토큰 ---------- */
:root{
  /* 종이와 먹 — THREE 앱 아이콘의 바탕(#F4F1EC)과 같은 종이 */
  --paper: #f4f1ec;
  /* 바탕 다섯 (10/22): 한지 · 먹 · 소나무 · 대나무 · 재 — 회색은 전부 여기서 뽑는다. 아래 값은 섞은 결과를 미리 계산한 것(color-mix 없는 옛 브라우저에서도 읽히게) */
  --한지: #f4f1ec; --먹: #1c1b19; --소나무: #2f3a2f; --대나무: #8a9478; --재: #a8a29a;
  --paper-2: #e6e3dd;   /* 카드·구획 — 재 18% 위 한지 */
  --ink: var(--먹);                                               /* 본문 */
  --ink-2: #5a6259;   /* 보조 글 — 소나무 78% */
  --ink-3: #5f6655;   /* 흐린 글, 캡션 — 대나무 + 소나무 쪽 (카드 위 4.6:1) */
  --rule: #d2cdc7;    /* 가는 선 — 재 45% 위 한지 */
  --ring: var(--재);                                              /* 빈 동그라미 — 재 */
  --screen: #fbfaf8;      /* 기기 화면 */

  /* 잉크 열 가지 — THREE의 강조 색상과 같은 값, 같은 이름.
     가죽의 색 이름과 집중 도구의 색도 여기서 고른다. */
  --감: #b34e29;   --단풍: #b5323a;  --진달래: #b03a6e; --산포도: #6e4282; --밤하늘: #2d4f8c;
  --물빛: #1e7f8c; --이끼: #3e7537;  --밤: #7a5232;    --안개비: #6c757c; --잉크먹: #1c1b19;
  --송화: #876808; --청자: #1c746c; --쪽빛: #2b5fa6; --도라지: #6a48a8; /* THREE 2.0 Accent.swift */

  --accent: var(--감);
  --accent-text: color-mix(in srgb, var(--accent) 82%, var(--ink)); /* 작은 강조 글자 — 감 값은 그대로, 글자만 진하게 */

  /* 글 — Pretendard 하나. 크기는 1.25배 계단 */
  /* 영문은 Figtree(본문)·Bricolage Grotesque(제목), 한글은 그 뒤의 Pretendard가 받는다 */
  --font: "Figtree", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --t-xs: 0.8125rem;  /* 13 캡션 */
  --t-s: 0.9375rem;   /* 15 보조 */
  --t-m: 1.0625rem;   /* 17 본문 */
  --t-l: 1.375rem;    /* 22 소제목 */
  --t-xl: clamp(1.75rem, 3.2vw, 2.5rem);     /* 섹션 제목 */
  --t-xxl: clamp(2.5rem, 6.4vw, 5rem);       /* 첫 화면 */

  /* 간격 — 8의 배수 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 72px; --s7: 120px;
  --wrap: 1120px;
  --radius: 20px;
}

/* 다크 — 시스템을 따르되, 머리글의 해·달 버튼으로 고르면 그걸 따른다 (assets/js/site.js가 <html data-theme> 를 단다) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]){
    --paper: var(--먹);
    --paper-2: #222420;   /* 카드 — 소나무 30% 위 먹 */
    --ink: var(--한지);
    --ink-2: #afb5a1;   /* 보조 글 — 대나무 65% + 한지 */
    --ink-3: var(--재);   /* 캡션 — 재 */
    --rule: var(--소나무);                                        /* 가는 선 — 소나무 */
    --ring: #5f645a;
    --screen: #262a24;
    /* 다크의 잉크 — 앱과 같이 조금 밝게 */
    --감: #ec8656;   --단풍: #e35f64;  --진달래: #ee8ab4; --산포도: #a97bc0; --밤하늘: #7496d6;
    --물빛: #4fb2be; --이끼: #9cc48f;  --밤: #b88b63;    --안개비: #a1aab1; --잉크먹: #ecebe7;
    --송화: #e6c25c; --청자: #6fc4b9; --쪽빛: #8cb1e8; --도라지: #b59ce6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper: var(--먹);
  --paper-2: #222420;   /* 카드 — 소나무 30% 위 먹 */
  --ink: var(--한지);
  --ink-2: #afb5a1;   /* 보조 글 — 대나무 65% + 한지 */
  --ink-3: var(--재);   /* 캡션 — 재 */
  --rule: var(--소나무);                                        /* 가는 선 — 소나무 */
  --ring: #5f645a;
  --screen: #262a24;
  /* 다크의 잉크 — 앱과 같이 조금 밝게 */
  --감: #ec8656;   --단풍: #e35f64;  --진달래: #ee8ab4; --산포도: #a97bc0; --밤하늘: #7496d6;
  --물빛: #4fb2be; --이끼: #9cc48f;  --밤: #b88b63;  --안개비: #a1aab1; --잉크먹: #ecebe7;
  --송화: #e6c25c; --청자: #6fc4b9; --쪽빛: #8cb1e8; --도라지: #b59ce6;
  color-scheme: dark;
}
/* 테마에 따라 바뀌는 그림 — <img class="only-light"> / <img class="only-dark"> */
.only-dark{ display: none !important; }
:root[data-theme="dark"] .only-dark{ display: revert !important; }
:root[data-theme="dark"] .only-light{ display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-dark{ display: revert !important; }
  :root:not([data-theme="light"]) .only-light{ display: none !important; }
}

/* 페이지의 잉크 */
[data-ink="감"]{ --accent: var(--감); }
[data-ink="단풍"]{ --accent: var(--단풍); }
[data-ink="진달래"]{ --accent: var(--진달래); }
[data-ink="산포도"]{ --accent: var(--산포도); }
[data-ink="밤하늘"]{ --accent: var(--밤하늘); }
[data-ink="물빛"]{ --accent: var(--물빛); }
[data-ink="이끼"]{ --accent: var(--이끼); }
[data-ink="밤"]{ --accent: var(--밤); }
[data-ink="안개비"]{ --accent: var(--안개비); }
[data-ink="먹"]{ --accent: var(--잉크먹); }
[data-ink="송화"]{ --accent: var(--송화); }
[data-ink="청자"]{ --accent: var(--청자); }
[data-ink="쪽빛"]{ --accent: var(--쪽빛); }
[data-ink="도라지"]{ --accent: var(--도라지); }

/* ---------- 2. 바탕 ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.65;
  letter-spacing: -0.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--accent); }
h1, h2, h3, p{ margin: 0; }
h1, h2, h3{ font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; font-optical-sizing: auto; }
::selection{ background: var(--accent); color: var(--paper); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.num{ font-variant-numeric: tabular-nums; }

.wrap{ width: min(var(--wrap), 100% - 2 * var(--s3)); margin-inline: auto; }
@media (max-width: 560px) { .wrap{ width: calc(100% - 2 * var(--s2)); } }

section{ padding-block: var(--s7); }
@media (max-width: 720px) { section{ padding-block: var(--s6); } }
.rule{ border-top: 1px solid var(--rule); }

.eyebrow{ font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.lede{ font-size: var(--t-l); line-height: 1.55; color: var(--ink-2); letter-spacing: -0.02em; max-width: 34em; }
.muted{ color: var(--ink-2); }
.small{ font-size: var(--t-s); }

/* ---------- 3. 머리와 꼬리 ---------- */
.site-head{ position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-head .wrap{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; gap: var(--s2); }
.wordmark{ font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.04em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; justify-self: start; }
.wordmark:hover{ color: var(--ink); }
.wordmark i{ width: 5px; height: 5px; border-radius: 50%; background: var(--감); display: inline-block; } /* 머리글 점은 어느 페이지든 감 (10/22) */
/* 가운데 알약 메뉴 */
.site-nav{ display: flex; gap: 30px; font-size: var(--t-s); } /* 글자만 — 알약 모양은 빌려 온 것이라 뺐다 (사용자 결정 10/22) */
.site-nav a{ text-decoration: none; color: var(--ink-3); padding: 6px 0; font-weight: 500; line-height: 1.4; transition: color .2s; }
.site-nav a:hover{ color: var(--ink); }
.site-nav a[aria-current]{ color: var(--ink); box-shadow: inset 0 -1.5px 0 currentColor; }
/* 오른쪽 도구: 언어 · 해/달 · Say Hello */
.head-tools{ display: flex; align-items: center; gap: 6px; justify-self: end; }
.tool{ display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); font: 600 var(--t-xs)/1 var(--font); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.tool:hover{ background: var(--paper-2); color: var(--ink); }
.tool svg{ width: 24px; height: 24px; } /* 카카오 머리글만큼 (10/23) */
.lang-menu{ position: relative; }
.lang-btn{ display: inline-grid; padding: 0 8px; } /* 지구본만 — 해·달 버튼과 같은 크기 */
.lang-btn svg{ width: 24px; height: 24px; }
.theme .sun{ display: none; }
:root[data-theme="dark"] .theme .sun{ display: block; }
:root[data-theme="dark"] .theme .moon{ display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun{ display: block; }
  :root:not([data-theme="light"]) .theme .moon{ display: none; }
}
.hello{ display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; height: 38px; padding: 0 16px; margin-left: 4px; border-radius: 11px; background: var(--ink); color: var(--paper); font: 600 var(--t-s)/1 var(--font); text-decoration: none; transition: opacity .2s; }
.hello:hover{ color: var(--paper); opacity: .86; }
.hello svg{ width: 15px; height: 15px; }
@media (max-width: 800px) {
  /* 휴대폰도 한 줄 (10/24, A안): 로고 · 가운데 메뉴 · 도구 — 데스크톱과 같은 배치. say hello가 바닥글로 가서 자리가 생겼다 */
  .site-head .wrap{ height: 60px; }
  .site-nav{ gap: 20px; }
  .head-tools{ gap: 0; }
  .tool{ min-width: 40px; height: 40px; }
}
@media (max-width: 359px) { .hello span{ display: none; } .hello{ padding: 0 10px; } }


/* ---------- 4. 버튼 ---------- */
.btn{ display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; font: 500 var(--t-m)/1 var(--font); text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
.btn:hover{ color: var(--paper); opacity: 0.86; }
.btn.ghost{ background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover{ border-color: var(--ink); color: var(--ink); opacity: 1; }
.btn[aria-disabled="true"]{ cursor: default; }
.btn svg{ width: 18px; height: 18px; }

/* ---------- 5. 그리드와 카드 ---------- */

.grid-2{ display: grid; gap: var(--s5); grid-template-columns: 1fr 1fr; align-items: center; }

@media (max-width: 900px) {  .grid-2{ grid-template-columns: 1fr; gap: var(--s4); } }

/* 제품 그림 — 모두 같은 선 굵기, 동그라미와 둥근 사각형만 */
.mark-three{ display: grid; gap: 14px; }
.mark-three span{ width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ring); }
.mark-three span:first-child{ background: var(--감); border-color: var(--감); }

/* ---------- 6. 잉크 견본 ---------- */
.inks{ display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3) var(--s2); }
@media (max-width: 560px) { .inks{ grid-template-columns: repeat(2, 1fr); } }
.ink{ display: flex; align-items: center; gap: 12px; font-size: var(--t-s); background: none; border: 0; padding: 0; color: inherit; font-family: inherit; text-align: left; }
.ink i{ width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--c); }
.ink small{ display: block; color: var(--ink-3); font-size: var(--t-xs); }
button.ink{ cursor: pointer; }
button.ink i{ box-shadow: 0 0 0 0 var(--paper), 0 0 0 0 var(--c); transition: box-shadow .2s; }
button.ink[aria-pressed="true"] i{ box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c); }

/* ---------- 8. 기기 — THREE 화면 ---------- */
/* 화면만 띄우기 — 휴대폰 테두리 없이 둥근 화면 한 장 (10/21, 무거운 검은 테두리 대신) */

.app-top{ display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; margin-bottom: 34px; }
.app-top .more{ color: var(--ink-3); letter-spacing: 1px; }
.row{ display: flex; gap: 14px; height: 78px; padding-top: 6px; border-bottom: 1px solid var(--rule); }
.row:last-of-type{ border-bottom: 0; }
.check{ width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--ring); flex: none; margin-top: 3px; display: grid; place-items: center; }
.check svg{ width: 11px; height: 11px; opacity: 0; color: #fff; }
.row.done .check{ background: var(--accent); box-shadow: none; }
.row.done .check svg{ opacity: 1; color: var(--paper); }
[data-ink="먹"] .row.done .check svg{ color: var(--paper); }
.row .text{ font-size: 19px; line-height: 1.35; letter-spacing: -0.02em; }
.row.done .text{ color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ring); }
.row .meta{ font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.row.done .meta{ color: var(--ink-3); }
.app-note{ font-size: 12.5px; color: var(--accent-text); margin-top: 18px; padding-left: 36px; }

/* 위젯 */
.widgets{ display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.widget{ background: var(--screen); border-radius: 26px; padding: 18px; box-shadow: 0 1px 0 var(--rule), 0 20px 40px -24px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.widget.s{ width: 170px; height: 170px; }
.widget.m{ width: 364px; height: 170px; max-width: 100%; }
.widget .w-date{ font-size: 12px; color: var(--ink-3); font-weight: 500; }
.widget .w-dots{ display: flex; gap: 5px; margin-top: auto; }
.widget .w-dots i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ring); }
.widget .w-dots i.on{ background: var(--accent); }
.widget .w-item{ display: flex; gap: 9px; align-items: center; font-size: 15px; margin-top: 10px; letter-spacing: -0.02em; }
.widget .w-item:first-of-type{ font-weight: 600; }
.widget .w-item .check{ width: 18px; height: 18px; margin: 0; }
.widget .w-last{ font-size: 12px; color: var(--accent-text); margin-top: 8px; }

/* ---------- 9. 기능 목록 ---------- */

/* 하지 않는 것 */
.nots{ display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.nots li{ list-style: none; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; font-size: var(--t-s); color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ring); }

/* FAQ */
details{ border-top: 1px solid var(--rule); padding-block: var(--s3); }
details:last-of-type{ border-bottom: 1px solid var(--rule); }
summary{ cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
summary::-webkit-details-marker{ display: none; }
summary::after{ content: "+"; color: var(--ink-3); font-weight: 400; }
details[open] summary::after{ content: "–"; }
details p{ color: var(--ink-2); margin-top: var(--s2); font-size: var(--t-s); max-width: 40em; }
/* FAQ 끝 메일 한 줄 (지원 연락처) */
.faq-mail{ margin-top: var(--s4); color: var(--ink-2); font-size: var(--t-s); }
.faq-mail a{ color: var(--ink); text-decoration: underline; }

/* 문서(약관·개인정보) */
.doc{ max-width: 680px; }
.doc h1{ font-size: var(--t-xl); margin-bottom: var(--s2); }
.doc h2{ font-size: var(--t-m); margin-top: var(--s5); margin-bottom: var(--s1); }
.doc p, .doc li{ color: var(--ink-2); font-size: var(--t-s); }
.doc p + p{ margin-top: var(--s2); }
.doc ul{ padding-left: 1.2em; }

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

/* ---------- 10. 홈 (benshih처럼 둥근 판을 쌓는다) ---------- */
.home{ padding-bottom: var(--s6); }
.home > section{ padding-block: 0; }
.home > section + section{ margin-top: var(--s3); }

.soft{ color: var(--ink-3); }

.badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s4); }
.badge i{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* 앱 그림 — 같은 동그라미 언어 */
.mark-one{ width: 54px; height: 54px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 18%, transparent); }

.mark-grid{ display: grid; grid-template-columns: repeat(5, 14px); gap: 9px; }
.mark-grid i{ width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.mark-grid i.on{ background: var(--ink); }
.mark-grid i.now{ background: var(--c); }

/* 한글 자간 — 영문용 좁은 자간이 한글을 붙여 보이게 해서, 한국어 페이지는 따로 연다 */
html:lang(ko) body{ letter-spacing: 0; }
html:lang(ko) h1, html:lang(ko) h2, html:lang(ko) h3{ letter-spacing: -0.015em; }

html:lang(ko) .lede { letter-spacing: -0.005em; }

/* 탭으로 옮겨 갈 때 머리글에 가리지 않게 */
.home > section, [id]{ scroll-margin-top: 88px; }

/* ---------- 바닥글 (애플식) ---------- */

/* ---------- 앱 화면 목업 ---------- */
/* one 화면 (소개 페이지와 앱 목록이 함께 쓴다) */

.aff-label, .rung .when, .step .label{ font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; }
.aff{ font-size: 19px; font-weight: 600; line-height: 1.35; margin: 4px 0 22px; letter-spacing: -0.02em; }
.rung{ padding: 12px 0; border-top: 1px solid var(--rule); }
.rung .what{ font-size: 16px; margin-top: 2px; letter-spacing: -0.01em; }
.rung .dots{ display: flex; gap: 5px; margin-top: 8px; }
.rung .dots i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ring); }
.rung .dots i.on{ background: var(--accent); }
.rung.now .what{ font-weight: 600; }
.rung .since{ font-size: 11px; color: var(--accent-text); }
.step{ display: flex; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--paper-2); }
.step .text{ font-size: 15px; margin-top: 2px; }
.steps{ margin-top: auto; font-size: 12px; color: var(--ink-3); }
.lock{ width: 340px; max-width: 100%; border-radius: 22px; padding: 16px 18px; background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--paper); box-shadow: 0 20px 40px -24px rgba(0,0,0,.4); }
.lock .l1{ font-size: 13px; opacity: .7; }
.lock .l2{ font-size: 16px; font-weight: 600; margin-top: 4px; }
.lock .l3{ font-size: 13px; margin-top: 6px; display: flex; gap: 8px; align-items: center; opacity: .9; }
.lock .l3 i{ width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
/* memori 화면 (소개 페이지와 앱 목록이 함께 쓴다) */

.mem-top{ font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 18px; }
.person b{ display: block; font-size: 22px; letter-spacing: -0.02em; }
.person span{ font-size: 12px; color: var(--ink-3); }
.mem-num{ margin: 14px 0 12px; font-size: 15px; color: var(--ink-2); }
.mem-num b{ font-family: var(--display); font-size: 56px; line-height: 1; color: var(--accent); letter-spacing: -0.04em; margin-right: 4px; }
.mem-dots{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.mem-dots i, .wdots i{ aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.3px var(--ring); }
.mem-dots i.on, .wdots i.on{ background: var(--ink); box-shadow: none; }
.wdots i.now{ background: var(--accent); box-shadow: none; }

.wdots{ display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin-top: auto; }
.widget.m .wdots{ grid-template-columns: repeat(20, 1fr); }
.widget .w-big{ font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin-top: 2px; }
.price{ max-width: 380px; margin-inline: auto; border-radius: 26px; padding: 28px; background: var(--screen); box-shadow: 0 20px 40px -24px rgba(0,0,0,.25); }
.price .p1{ font-size: 14px; color: var(--ink-3); }
.price .p2{ font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin: 6px 0; line-height: 1.2; }
.price .p2 b{ color: var(--accent); }
.price .p3{ font-size: 14px; color: var(--ink-2); }
.price .p4{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); font-weight: 600; }

/* ---------- 앱 목록 (benshih /fun처럼) ---------- */




/* ---------- 이야기 · 소개 카드 (앱 목록과 같은 판) ---------- */

.digit{ font-family: var(--display); font-weight: 800; font-size: clamp(9rem, 18vw, 15rem); line-height: .78; letter-spacing: -0.06em; color: var(--c); }

.mark-one.big{ width: 110px; height: 110px; box-shadow: 0 0 0 18px color-mix(in srgb, var(--c) 18%, transparent); }
.mark-grid.big{ grid-template-columns: repeat(5, 22px); gap: 12px; }
.mark-grid.big i{ width: 22px; height: 22px; }


/* ---------- 움직임 (html.motion 일 때만 — 동작 줄이기·스크립트 없음이면 모두 그냥 보인다) ---------- */
html.motion{ scroll-behavior: smooth; }
.site-head{ transition: box-shadow .3s, background .3s; }
.site-head.scrolled{ background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 1px 0 var(--rule); }

.motion .rv{ opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.motion .rv.in{ opacity: 1; transform: none; }

.motion h1.lines .ln{ display: block; overflow: hidden; padding: .04em 0 .22em; margin: -.04em 0 -.22em; } /* p·y·g 같은 내림 글자가 잘리지 않게 */
.motion h1.lines .ln > span{ display: inline-block; transform: translateY(105%); animation: rise .9s cubic-bezier(.2,.75,.15,1) forwards; animation-delay: calc(var(--i) * 110ms + 120ms); }
@keyframes rise { to { transform: none; } }

.cnt{ font-variant-numeric: tabular-nums; }
.digit, .big-num{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html.motion{ scroll-behavior: auto; }
}

/* ember — Mac 노치 */
.notch{ display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; border-radius: 0 0 18px 18px; background: var(--먹); color: var(--한지); font: 600 15px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--한지) 16%, transparent); }
.notch i{ width: 9px; height: 9px; border-radius: 50%; background: var(--단풍); }
@keyframes glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--단풍) 18%, transparent), 0 0 28px var(--단풍); } }
.notch b{ font: 600 12px/1 var(--font); opacity: .6; letter-spacing: 0; }

/* 영어 페이지의 잉크 뜻 */
.ink-note{ margin-top: var(--s2); font-size: var(--t-xs); color: var(--ink-3); max-width: 34em; line-height: 1.6; }
button.ink span small{ display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }

/* 기기 없이, 크게 — THREE 강조 색 섹션 (색을 고르면 이 세 줄이 물든다) */
.big-lines{ width: 100%; max-width: 460px; justify-self: center; }
.big-lines .app-top{ font-size: var(--t-s); color: var(--ink-3); margin-bottom: var(--s2); }
.big-lines .app-top .more{ display: none; }
.big-lines .row{ height: auto; gap: 18px; padding: 22px 0; align-items: flex-start; }
.big-lines .check{ width: 32px; height: 32px; margin-top: 2px; box-shadow: inset 0 0 0 2px var(--ring); }
.big-lines .check svg{ width: 15px; height: 15px; }
.big-lines .row .text{ font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.25; letter-spacing: -0.025em; }
.big-lines .row .meta{ font-size: var(--t-s); margin-top: 6px; }
.big-lines .app-note{ padding-left: 50px; font-size: var(--t-s); margin-top: var(--s2); }
.big-lines .check, .big-lines .app-note{ transition: background .35s, color .35s; }

/* ---------- 화면 조각 띄우기 (Flighty 참고, 기기 없이) — 앱 소개 첫 화면 (ONE · THREE · memori) ---------- */
.frags{ position: relative; width: 100%; max-width: 520px; height: 520px; justify-self: center; }
.frag{ position: absolute; background: var(--screen); border-radius: 18px; padding: 14px 18px; margin: 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rule) 70%, transparent), 0 16px 36px -22px rgba(0,0,0,.28); }
.frags .f-aff{ top: 0; left: 0; width: 80%; padding: 20px 24px; }
.frags .f-aff .aff{ font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 6px 0 0; line-height: 1.3; }
/* 사다리 칸 — 한 줄짜리: 위에 기간, 아래 왼쪽 할 일 · 오른쪽 점 */
.frags .rung{ border-top: 0; width: 60%; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
.frags .rung .when{ grid-column: 1 / -1; }
.frags .rung .what{ font-size: 16px; margin-top: 2px; }
.frags .rung .dots, .frags .rung .since{ margin-top: 2px; }
.frags .r1{ top: 140px; left: 6%; }
.frags .r2{ top: 232px; left: 16%; }
.frags .r3{ top: 324px; left: 26%; }
.frags .step{ top: 422px; left: 36%; width: 60%; margin: 0; background: var(--screen); align-items: center; padding: 14px 18px; }
.frags .f-chip{ top: 30px; right: 0; padding: 8px 14px; border-radius: 999px; font-size: var(--t-xs); color: var(--ink-2); }
.frags .f-aff ~ .f-chip{ top: 148px; }
/* 칸과 칸을 잇는 가는 선 */
.frags .r2::before, .frags .r3::before, .frags .step::before{ content: ""; position: absolute; left: 20px; top: -22px; height: 22px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.frags .r1::before{ content: ""; position: absolute; left: 20px; top: -36px; height: 36px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
@media (max-width: 900px) {
  .frags{ height: auto; display: grid; gap: 16px; max-width: 460px; }
  .frags .frag{ position: relative; top: auto; left: auto; right: auto; width: auto; }
  .frags .r1{ margin-left: 5%; } .frags .r2{ margin-left: 12%; } .frags .r3{ margin-left: 19%; } .frags .step{ margin-left: 26%; }
  .frags .f-chip, .frags .f-aff ~ .f-chip{ justify-self: end; order: 9; top: auto; }
  .frags .r1::before, .frags .r2::before, .frags .r3::before, .frags .step::before{ top: -16px; height: 16px; }
}

/* THREE 조각 */
.frags.three{ height: 540px; }
.frags .row{ height: auto; border: 0; padding: 16px 20px; gap: 14px; align-items: flex-start; }
.frags .row .text{ font-size: 18px; }
.frags .f-date{ top: 0; left: 0; padding: 8px 14px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.frags .t1{ top: 56px; left: 0; width: 66%; }
.frags .t2{ top: 156px; left: 14%; width: 66%; }
.frags .t3{ top: 256px; left: 28%; width: 66%; }
.frags .f-wid{ top: 372px; left: 2%; width: 46%; display: flex; flex-direction: column; gap: 4px; }
.frags .f-wid .w-date{ font-size: 12px; color: var(--ink-3); font-weight: 500; }
.frags .f-wid .w-last{ font-size: 15px; color: var(--accent); font-weight: 600; }
.frags .f-wid .w-dots{ display: flex; gap: 5px; margin-top: 6px; }
.frags .f-wid .w-dots i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ring); }
.frags .f-wid .w-dots i.on{ background: var(--accent); }
.frags .f-ago{ top: 392px; right: 0; width: 44%; font-size: 13px; color: var(--ink-3); }
.frags .f-ago b{ display: block; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; font-size: 12px; }
.frags .f-ago div{ display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.frags .f-ago i{ width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--ring); }
.frags .f-ago i.on{ background: var(--ink-3); box-shadow: none; }

/* memori 조각 */

.frags .f-mem{ top: 0; left: 0; width: 68%; padding: 22px 24px; }
.frags .f-mem .mem-top{ margin-bottom: 12px; }
.frags .f-mem .mem-dots{ gap: 6px; }
.frags .f-next{ top: 26px; right: 0; padding: 8px 14px; border-radius: 999px; font-size: var(--t-xs); color: var(--ink-2); }
.frags .f-more{ top: 84px; right: 4%; padding: 10px 14px; border-radius: 14px; font-size: var(--t-s); color: var(--ink-2); }
.frags .f-more b{ color: var(--accent); }
.frags .f-price{ top: 384px; right: 0; width: 56%; padding: 20px 22px; }
.frags .f-price .p1{ font-size: 13px; color: var(--ink-3); }
.frags .f-price .p2{ font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; margin: 4px 0; line-height: 1.2; }
.frags .f-price .p2 b{ color: var(--accent); }
.frags .f-price .p3{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); font-weight: 600; font-size: var(--t-s); }

@media (max-width: 900px) {
  .frags.three .t2{ margin-left: 8%; } .frags.three .t3{ margin-left: 16%; }
  .frags .f-date{ justify-self: start; }
  .frags .f-next, .frags .f-more{ justify-self: end; }
  .frags .frag[class]{ position: relative; top: auto; left: auto; right: auto; width: auto; }
  .frags .f-date[class], .frags .f-next[class], .frags .f-more[class]{ width: max-content; max-width: 100%; }
  .frags.three { height: auto; } /* 위의 고정 높이가 휴대폰에서도 남던 버그 */
}

/* memori — 이름에 대하여 (memento mori) */
.mori-latin{ font-family: var(--display); font-size: clamp(3.2rem, 10vw, 8rem); font-weight: 700; letter-spacing: -0.03em; line-height: .95; margin: var(--s2) 0 var(--s2); color: var(--ink); }
.mori-latin .soft{ background: none; color: var(--accent); }
.mori-say{ font-size: var(--t-l); color: var(--ink-2); margin: 0; }
.mori-body{ margin-top: var(--s4); column-gap: var(--s5); row-gap: var(--s2); align-items: start; }
.mori-more{ margin-top: var(--s3); }
.mori-more a{ color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- 홈 (10/22 개편) — 첫 화면 · THREE 크게 · ONE과 memori 나란히 · memento mori · 작은 셋 · 가치 ---------- */

/* 정돈된 장면 — 그림자 대신 가는 선, 한 판에 맞춰 정렬 */
.s3 { --line: color-mix(in srgb, var(--ink) 12%, transparent); }
.s3-sheet, .s3-w { background: var(--screen); border: 1px solid var(--line); border-radius: 22px; }
.s3-sheet{ padding: 8px 28px; }
.s3-top{ display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); padding: 18px 0 14px; font-weight: 500; }
.s3-row{ display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--line); }
.s3-row > i{ width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--ink-3); flex: none; display: grid; place-items: center; margin-top: 2px; }
.s3-row.done > i{ background: var(--accent); box-shadow: none; color: var(--paper); }
.s3-row.done > i svg{ width: 14px; height: 14px; }
.s3-row p{ margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.s3-row.done p{ color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.s3-row small{ color: var(--ink-3); font-size: 13px; }
.s3-wids{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.s3-w{ padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; min-height: 132px; }
.s3-w small{ font-size: 12px; color: var(--ink-3); font-weight: 500; }
.s3-w b{ color: var(--accent); font-size: 16px; }
.s3-dots{ display: flex; gap: 6px; margin-top: auto; }
.s3-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.s3-dots i.on { background: var(--accent); }
.s3-w ul{ list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.s3-w li::before{ content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--ink-3); margin-right: 8px; }
.s3-w li.on::before{ background: var(--ink-3); box-shadow: none; }
/* THREE 2.0 — 오늘의 셋 위에 사다리 한 줄, 아래에 매일의 하나(원 + 이번 주 일곱 점). 홈에는 숫자를 두지 않는다 */
.s3-line{ display: flex; align-items: center; gap: 12px; padding: 16px 0; font-size: 14px; }
.s3-line.up{ border-bottom: 1px solid var(--line); }
.s3-line.down{ border-top: 1px solid var(--line); }
.s3-line small{ color: var(--ink-3); font-size: 12px; margin-right: 10px; }
.s3-line b{ font-weight: 500; }
.s3-line em{ margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-3); }
.s3-ring{ width: 24px; height: 24px; flex: none; }
.s3-week{ margin-left: auto; display: flex; gap: 5px; }
.s3-week i{ width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.s3-week i.on{ background: var(--ink-2); }
.s3-week i.now{ box-shadow: inset 0 0 0 1.4px var(--accent); background: none; }

@media (max-width: 900px) {
  .s3-sheet{ padding: 4px 20px; }
  .s3-line em{ display: none; } /* 좁으면 사다리 줄은 이번 주 하나만 */
  .s3-line b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .s3-row p{ font-size: 17px; }
  .s3-wids{ grid-template-columns: 1fr; }
}

/* memento mori는 어디서나 세리프 이탤릭 (Newsreader) — 라틴어 한 줄만 */
.mori-latin { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.015em; }

/* ---------- toss.im 방식 (10/22) — 화면 한 장씩, 스크롤에 맞춰 바뀌는 장면, 왼쪽 차례 눈금. 홈 · 서비스 · 앱 소개가 쓴다 ---------- */
.t-page{ --t-sec: 100svh; }
.t-page .wrap{ max-width: 1200px; }
.t-index{ position: fixed; left: 16px; top: 50%; translate: 0 -50%; z-index: 20; display: grid; gap: 2px; }
.t-index a{ display: block; width: 36px; padding: 7px 6px; border-radius: 6px; } /* 누를 수 있는 넓이 (선은 아래 ::before) */
.t-index a::before{ content: ""; display: block; width: 14px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width .3s, background .3s; }
.t-index a.on::before{ width: 24px; background: var(--ink); }
.t-index a:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }
.t-dark .t-index a::before{ background: color-mix(in srgb, var(--한지) 30%, transparent); }
.t-dark .t-index a.on::before{ background: var(--한지); }
.t-kicker{ font-size: 15px; font-weight: 600; color: var(--accent-text, var(--ink-3)); margin: 0 0 14px; }
.t-h1{ font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 7vw, 6rem); line-height: 1.15; letter-spacing: -0.03em; margin: 0; }
.t-h2{ font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.28; letter-spacing: -0.025em; margin: 0; }
.t-p{ font-size: 18px; line-height: 1.7; color: var(--ink-2); margin: 20px 0 0; }
.t-btn{ display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; text-decoration: none; }
.t-btn.ghost{ background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }

/* 1. 첫 화면 — 화면 가득, 아래쪽에 큰 글. 내리면 둥근 판으로 줄어든다 (toss의 사진이 카드로 줄어드는 장면) */
.t-hero{ height: 220vh; position: relative; }
.t-hero-stick{ position: sticky; top: 72px; height: calc(100svh - 72px); display: grid; place-items: center; }
.t-hero-card{ position: absolute; inset: 0; background: var(--먹); color: var(--한지); overflow: hidden; border-radius: calc(var(--p, 0) * 36px); scale: calc(1 - var(--p, 0) * .12); display: grid; align-content: end; padding: 0 0 9vh; transform-origin: center; }
.t-digits{ position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 6vw; pointer-events: none; }
.t-digits span{ font-family: var(--display); font-weight: 800; font-size: clamp(8rem, 22vw, 20rem); line-height: 1; text-align: center; color: var(--c); opacity: calc(.9 - var(--p, 0) * .6); translate: 0 calc(var(--i) * var(--p, 0) * -40px); letter-spacing: -0.06em; }
.t-hero-text{ position: relative; text-align: center; padding: 0 24px; }
.t-hero-text .t-h1{ color: var(--한지); }
.t-hero-text p{ color: color-mix(in srgb, var(--한지) 70%, var(--대나무)); font-size: clamp(1.1rem, 1.6vw, 1.35rem); margin: 22px 0 0; }

/* 2. THREE — 둥근 판 안에 글과 화면 (toss의 '송금' 장면) */
.t-frame{ min-height: calc(100svh - 72px); display: grid; align-items: center; padding: 48px 0; }
.t-panel{ border-radius: 36px; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); padding: clamp(40px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; min-height: min(720px, calc(100svh - 168px)); }

/* 3. ONE · memori — 왼쪽 제목과 기능 목록, 오른쪽 화면이 스크롤에 맞춰 바뀐다 (toss의 '자산 관리' 장면) */
.t-acc-sec{ position: relative; }
.t-acc-stick{ position: sticky; top: 72px; height: calc(100svh - 72px); display: grid; align-items: center; }
.t-acc{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.t-list{ list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 4px; }
.t-list li{ border-top: 1px solid var(--rule); padding: 18px 0; cursor: pointer; }
.t-list li:last-child{ border-bottom: 1px solid var(--rule); }
.t-list h3{ font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink-3); transition: color .3s; }
.t-list li.on h3{ color: var(--ink); }
.t-stage{ position: relative; height: min(560px, calc(100svh - 200px)); }
.t-stage > .t-scene{ position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; translate: 0 24px; transition: opacity .45s ease, translate .45s ease; }
.t-stage > .t-scene.on{ opacity: 1; translate: 0 0; }
.t-scene > *{ width: min(100%, 460px); }
.t-card{ background: var(--screen); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 28px; padding: 28px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }
.t-card small{ font-size: 13px; color: var(--ink-3); font-weight: 500; }
.t-card .big{ font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; line-height: 1.35; margin: 6px 0 0; }
.t-card .num{ font-family: var(--display); font-weight: 800; font-size: 64px; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }
.t-rows{ margin-top: 18px; }
.t-rows > div{ display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 16px; font-weight: 500; }
.t-rows small{ margin-right: 14px; }
.t-enso{ display: flex; justify-content: center; margin: 14px 0 4px; }
.t-enso img{ width: 150px; height: auto; }
.t-rings{ display: flex; gap: 14px; margin-top: 18px; }
.t-rings svg{ width: 56px; height: 56px; }
.t-breath{ display: grid; place-items: center; height: 150px; }
.t-breath i{ width: 96px; height: 96px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 7%, transparent); }
.t-dots{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.t-dots i{ width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px color-mix(in srgb, var(--ink) 25%, transparent); }
.t-dots i.on{ background: var(--ink); box-shadow: none; }
.t-dots.acc i.on{ background: var(--accent); }
.t-bar{ height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); margin-top: 14px; overflow: hidden; }
.t-bar i{ display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 99px; }

/* 4. memento mori — 어두운 화면, 낱말이 하나씩 켜진다 */
.t-mori{ background: var(--먹); color: var(--한지); position: relative; height: 240vh; }
.t-mori-stick{ position: sticky; top: 72px; height: calc(100svh - 72px); display: grid; place-items: center; text-align: center; padding: 0 24px; }
.t-latin{ font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(4rem, 12vw, 10rem); line-height: .95; letter-spacing: -0.015em; margin: 0; }
.t-say{ font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 3rem); letter-spacing: -0.02em; margin: 40px 0 0; line-height: 1.35; }
.t-say .w{ transition: opacity .3s; }
.t-js .t-say .w{ opacity: .38; } /* 스크립트가 준비된 뒤에만 흐리게 — 꺼진 낱말도 읽힐 만큼 */
.t-say .w.on{ opacity: 1; }
.t-mori .t-cite{ margin-top: 36px; color: var(--재); font-size: 15px; }

/* 5. 작은 셋 — 어두운 카드 세 장, 오른쪽 아래 화살표 (toss의 '투자' 카드) */
.t-cards{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.t-cards.one{ grid-template-columns: minmax(0, 560px); justify-content: center; }
.t-dcard{ position: relative; border-radius: 28px; background: var(--먹); color: var(--한지); padding: 32px; min-height: 420px; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.t-dcard small{ color: var(--재); font-size: 14px; font-weight: 600; }
.t-dcard h3{ font-family: var(--display); font-size: 30px; margin: 8px 0 10px; letter-spacing: -0.02em; }
.t-dcard p{ color: color-mix(in srgb, var(--한지) 78%, var(--재)); margin: 0; line-height: 1.6; font-size: 16px; }
.t-dcard .art{ margin-top: auto; display: grid; place-items: center; min-height: 160px; }
.t-dcard .go{ position: absolute; right: 22px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--한지) 12%, transparent); display: grid; place-items: center; font-size: 18px; }
.t-center{ text-align: center; }

/* 서비스 페이지 — 큰 카드 목록 */
.t-svc-hero{ padding: 120px 0 40px; }
.t-group{ padding: 40px 0 80px; }
.t-group > h2{ font-size: 22px; font-weight: 700; margin: 0 0 20px; letter-spacing: -0.01em; }
.t-svc{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.t-svc a, .t-svc div.t-item{ border-radius: 28px; background: color-mix(in srgb, var(--c) 9%, var(--paper-2)); padding: 32px; text-decoration: none; color: var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; min-height: 240px; }
.t-svc h3{ font-family: var(--display); font-size: 32px; letter-spacing: -0.02em; margin: 6px 0 8px; }
.t-svc p{ color: var(--ink-2); margin: 0; line-height: 1.6; }
.t-svc .badge{ font-size: 13px; font-weight: 600; color: var(--c); }
.t-svc .arrow{ width: 44px; height: 44px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-size: 18px; }

/* 앱 소개 첫 화면 */
.t-app-hero{ min-height: calc(100svh - 72px); display: grid; place-items: center; text-align: center; padding: 64px 24px; }

@media (max-width: 900px) {
  .t-index{ display: none; }
  .t-panel, .t-acc{ grid-template-columns: 1fr; }
  .t-panel{ border-radius: 28px; padding: 32px 24px; }
  .t-acc-sec{ height: auto !important; }
  .t-acc-stick{ position: static; height: auto; padding: 88px 0; }
  .t-stage{ height: 420px; }
  .t-cards, .t-svc{ grid-template-columns: 1fr; }
  .t-dcard{ min-height: 320px; }
  .t-digits{ grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .t-hero, .t-mori{ height: auto; }
  .t-hero-stick, .t-mori-stick{ position: static; }
}
/* 옛 홈 규칙(.home > section 여백 0)을 이긴다 */
.t-page > section{ margin-top: 0; }
.t-page > .t-svc-hero{ padding: 120px 0 24px; }
.t-page > .t-group{ padding: 32px 0 72px; }
.t-page > .t-frame{ padding-block: 48px; }
@media (max-width: 900px) {
  .t-digits{ grid-template-columns: repeat(4, 1fr); align-items: start; padding: 14vh 16px 0; }
  .t-digits span{ font-size: 22vw; }
  .t-page > .t-svc-hero{ padding-top: 72px; }
}

/* 앱 소개 — 기존 내용을 그대로 두고 toss 방식으로 배치 */
.hero.t-app .grid-2{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero.t-app{ min-height: calc(100svh - 72px); display: grid; align-items: center; }
.hero.t-app .app-id{ justify-content: center; }
.hero.t-app h1{ font-size: clamp(3rem, 7vw, 6rem); line-height: 1.15; }
.hero.t-app .lede{ margin-inline: auto; max-width: 34em; }
.hero.t-app .cta{ justify-content: center; }
main > section.t-fr{ min-height: calc(100svh - 72px); display: grid; align-content: center; }
main > section.t-fr.t-darkfr{ background: var(--먹); color: var(--한지); --ink: var(--한지); --ink-2: #afb5a1; --ink-3: var(--재); --rule: var(--소나무); }
.frags.solo{ height: auto; display: grid; gap: 14px; max-width: 460px; }
.frags.solo .frag[class]{ position: relative; top: auto; left: auto; right: auto; width: auto; }
.t-list li p{ margin: 0; max-height: 0; opacity: 0; overflow: hidden; color: var(--ink-2); line-height: 1.7; font-size: 16px; transition: max-height .45s ease, opacity .35s ease, margin .35s ease; }
.t-list li.on p{ max-height: 9em; opacity: 1; margin-top: 10px; }
.t-pills{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.t-pills span{ padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: 14px; font-weight: 600; }
.t-pills span:first-child{ background: var(--accent); color: var(--paper); }

.t-cap{ margin: 12px 0 0; color: var(--ink-3); font-size: 14px; }
.t-stage .widgets{ justify-content: center; }
.t-appage .t-acc-sec .t-h2, .t-appage .t-acc h2{ margin: 0; }

.t-stage .frags.solo{ transform: scale(.82); transform-origin: center; }
.t-stage .frags.three{ transform: scale(.9); transform-origin: center; }

/* ---------- 간격 크게 (10/22, "간격들을 큼지막하게") — toss 방식 칸들의 숨 ---------- */
.t-page{ --t-gap: clamp(64px, 9vw, 140px); }
.t-kicker{ margin-bottom: 20px; }
.t-p{ margin-top: 28px; }
.t-btn{ margin-top: 44px; padding: 14px 24px; }
.t-acc{ gap: var(--t-gap); }
.t-list{ margin-top: 64px; }
.t-list li{ padding: 26px 0; }
.t-list li.on p{ margin-top: 14px; }
.t-panel{ padding: clamp(56px, 7vw, 120px); gap: var(--t-gap); }
.t-page > .t-frame{ padding-block: 120px; }
.t-cards{ gap: 28px; margin-top: 88px; }
.t-dcard{ padding: 44px; min-height: 480px; }
.t-dcard h3{ margin: 12px 0 14px; }
.t-say{ margin-top: 56px; }
.t-mori .t-cite{ margin-top: 56px; }
.t-page > .t-svc-hero{ padding: 180px 0 48px; }
.t-page > .t-group{ padding: 64px 0 120px; }
.t-group > h2{ margin-bottom: 32px; }
.t-svc{ gap: 28px; }
.t-svc a, .t-svc div.t-item{ padding: 48px; min-height: 300px; }
.t-svc h3{ margin: 12px 0 12px; }
/* 앱 소개 */
.hero.t-app .app-id{ margin-bottom: 40px; }
.hero.t-app h1{ margin: 0; }
.hero.t-app .lede{ margin-top: 36px; }
.hero.t-app .cta{ margin-top: 52px; }
main > section.t-fr{ padding-block: 140px; }
main > section.t-fr .grid-2{ gap: var(--t-gap, 96px); }
.t-appage .t-acc h2{ margin-bottom: 0; }
 .t-appage .nots{ gap: 28px; }
 main > section.t-fr details{ padding: 30px 0; }
@media (max-width: 900px) {
  .t-page{ --t-gap: 56px; }
  .t-page > .t-frame, main > section.t-fr{ padding-block: 104px; }
  .t-page > .t-svc-hero{ padding-top: 112px; }
  .t-dcard, .t-svc a, .t-svc div.t-item{ padding: 32px; }
  .t-acc-stick{ padding: 112px 0; }
  .t-list{ margin-top: 44px; }
}
/* 앱 소개 기능 장면 — 여섯 줄이 한 화면에 여유 있게: 제목은 작은 머리로 */
.t-appage .t-acc h2{ font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important; }
.t-appage .t-list{ margin-top: 40px; }
.t-appage .t-list li{ padding: 22px 0; }
.t-appage .t-list h3{ font-size: 19px; }

.t-acc-sec, .t-hero, .t-mori{ padding-block: 0; } /* 기본 section 여백(120px)이 붙은 장면을 밀어내던 것 */

/* 소개 페이지 (10/22, toss 방식) */
.ab-sub{ max-width: 36em; margin-inline: auto; }
.ab-missions{ margin-top: 80px; }
.ab-missions .t-item{ align-items: center; min-height: 320px; }
.ab-missions .t-item:first-child{ grid-column: 1 / -1; }
.ab-mark{ display: grid; place-items: center; min-width: 120px; }
.ab-prin{ list-style: none; padding: 0; margin: 96px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; text-align: left; }
.ab-prin li{ border-top: 1px solid var(--rule); padding-top: 24px; }
.ab-prin h3{ font-size: 20px; margin: 0 0 12px; }
.ab-prin p{ color: var(--ink-2); line-height: 1.7; margin: 0; }
.ab-colors{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--t-gap); align-items: center; }
.ab-colors .ink-note{ margin-top: 20px; color: var(--ink-3); font-size: 14px; line-height: 1.7; }
.ab-inks{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
.ab-ink{ display: grid; justify-items: center; gap: 8px; text-align: center; }
.ab-ink i{ width: 72px; height: 72px; border-radius: 50%; background: var(--c); }
.ab-ink b{ font-size: 15px; }
.ab-ink small{ color: var(--ink-3); font-size: 12px; min-height: 1em; line-height: 1.4; }
@media (max-width: 900px) { .ab-prin{ grid-template-columns: 1fr 1fr; } .ab-colors{ grid-template-columns: 1fr; } .ab-ink i{ width: 48px; height: 48px; } .ab-missions .t-item{ min-height: 0; } }
@media (max-width: 900px) { .t-svc div.t-item.t-item{ grid-template-columns: 1fr; } .ab-mark{ display: none; } } /* 휴대폰: 카드에 글만 */

/* 앱 소개 — '하지 않는 것'과 '기기에만'은 한 화면을 다 쓰지 않고 짧게 포인트만 (10/22) */
main > section.t-short{ min-height: 0; padding-block: 96px; }
.t-nots .wrap{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px 64px; align-items: start; }
.t-nots h2{ margin: 0 !important; font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important; }
.t-nots .lede{ grid-column: 1; margin: 0 !important; font-size: 16px; color: var(--ink-3); }
.t-nots .nots{ grid-column: 2; grid-row: 1 / span 2; display: flex !important; flex-wrap: wrap; gap: 10px !important; margin: 0; padding: 0; }
.t-nots .nots li{ list-style: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--소나무); color: var(--ink-2); font-size: 15px; text-decoration: line-through; text-decoration-color: var(--대나무); }
.t-nots .nots li::before{ display: none; }
.t-privacy{ border-top: 0; }
.t-privacy .grid-2{ align-items: center; }
.t-privacy h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important; margin: 0; }
@media (max-width: 900px) {
  main > section.t-short{ padding-block: 72px; }
  .t-nots .wrap{ grid-template-columns: 1fr; }
  .t-nots .nots{ grid-column: 1; grid-row: auto; }
}

main > section.t-darkfr{ background: var(--먹); color: var(--한지); --ink: var(--한지); --ink-2: #afb5a1; --ink-3: var(--재); --rule: var(--소나무); }

/* 첫 화면 — 내리면 3 · 2 · 1 · 0이 가운데로 모인다 (줄여 갈수록 하나로). 판이 줄어드는 장면은 그대로 */
.t-digits span{ translate: calc((2.5 - var(--i)) * var(--p, 0) * 21vw) calc(var(--p, 0) * -30px); }
@media (max-width: 900px) { .t-digits span{ translate: calc((2.5 - var(--i)) * var(--p, 0) * 22vw) 0; } }
/* 모이면서 3 · 2 · 1은 사라지고 0만 가운데 남는다 — 줄여 갈수록, 중요한 게 남는다 */
.t-digits span:not(:last-child){ opacity: calc(1 - var(--p, 0) * 1.5); }
.t-digits span:last-child{ opacity: 1; }

/* memento mori → memori (10/22): 문장이 끝까지 켜진 뒤, 가운데 'ento m'이 접히며 줄어들어 memori가 된다 */
.t-latin .t-cut{ white-space: pre; }
.t-latin .t-cut.folding{ display: inline-block; overflow: clip; overflow-clip-margin: .25em; vertical-align: bottom; opacity: calc(1 - var(--q, 0) * 1.15); } /* 접는 동안만 상자로 — 접기 전에는 글자 사이가 자연스럽게 */
.t-latin{ scale: calc(1 - var(--q, 0) * .18); transition: none; }

/* 기능 목록 버튼 (10/22 접근성) — 보이는 모양은 그대로 */
.t-li-btn{ all: unset; display: block; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.t-li-btn:focus-visible{ outline: 2px solid var(--accent, var(--ink)); outline-offset: 6px; border-radius: 4px; }
/* 스크롤로 넘기지 않는 기능 목록(휴대폰 · 동작 줄이기 · 내용이 화면보다 길 때): 일반 흐름, 누르면 바뀐다 */
.t-acc-sec.t-static{ height: auto !important; }
.t-acc-sec.t-static .t-acc-stick{ position: static; height: auto; padding: 112px 0; }
@media (max-width: 900px) { .t-acc-sec.t-static .t-acc-stick{ padding: 88px 0; } }
.t-reduce .t-hero, .t-reduce .t-mori{ height: auto; }
.t-reduce .t-hero-stick{ position: relative; top: 0; }
.t-reduce .t-mori-stick{ position: static; height: auto; min-height: calc(100svh - 72px); }

.t-svc div.t-item:not(.ab-missions *){ background: color-mix(in srgb, var(--c) 5%, var(--paper-2)); }
.t-svc a{ transition: transform .25s ease, background .25s ease; }
.t-svc a:hover{ transform: translateY(-3px); }

/* 서비스 — 애플 홈의 제품 타일처럼 (10/22): 위에 아이콘 · 이름 · 한 줄 · 버튼 둘, 아래에 그림이 타일 밖으로 살짝 잘린다 */
.sv-group { font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 32px; }
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sv { position: relative; overflow: hidden; border-radius: 28px; background: color-mix(in srgb, var(--c) 9%, var(--paper-2)); min-height: 640px; display: flex; flex-direction: column; text-align: center; padding: 56px 40px 0; }
.sv-top { display: grid; justify-items: center; }
.sv-icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); margin-bottom: 20px; }
.sv h3 { font-family: var(--display); font-size: clamp(2.2rem, 3.4vw, 3rem); letter-spacing: -0.03em; margin: 0; line-height: 1.05; }
.sv-tag { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-2); margin: 12px 0 0; }
.sv-btns { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.sv-b { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; }
.sv-b.fill { background: var(--c); color: var(--paper); }
.sv-b.fill:hover { filter: brightness(1.08); }
.sv-b.line { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); color: var(--c); }
.sv-art { margin-top: auto; padding-top: 48px; display: flex; justify-content: center; align-items: flex-end; min-height: 300px; }
.sv-art > * { width: min(100%, 420px); translate: 0 24px; }
.sv-art .s3 { max-width: 420px; }
.sv-art .s3-sheet { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sv-art .t-card { text-align: left; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sv-art .notch { width: auto; translate: 0 -60px; }
.sv-grid > .sv:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 560px; } /* 홀수 개면 마지막 타일을 넓게 (ember, 10/27) */
@media (max-width: 900px) {
  .sv-grid { grid-template-columns: 1fr; }
  .sv { min-height: 560px; padding: 44px 24px 0; }
}
.sv-art .s3 { text-align: left; }

/* ember 타일 — Mac 화면 윗부분과 노치 (10/22) */
.ember-mac { position: relative; width: min(100%, 440px); height: 260px; border-radius: 20px 20px 0 0; overflow: hidden; background: var(--먹); color: var(--한지); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); text-align: left; }
.em-bar { height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--한지) 12%, transparent); }
.em-bar i { display: inline-block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.5); margin-right: 9px; }
.em-l i:nth-child(1) { width: 10px; background: rgba(255,255,255,.75); } .em-l i:nth-child(2) { width: 28px; } .em-l i:nth-child(3) { width: 20px; } .em-l i:nth-child(4) { width: 24px; }
.em-r i { width: 14px; margin: 0 0 0 9px; } .em-r i:last-child { width: 34px; }
.em-notch { position: absolute; top: 0; left: 50%; translate: -50% 0; height: 36px; padding: 0 18px 2px; background: #000; border-radius: 0 0 16px 16px; display: flex; align-items: center; gap: 10px; color: var(--한지); font: 600 15px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .03em; z-index: 2; }
.em-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--단풍); }
@keyframes emberGlow { 50% { box-shadow: 0 0 16px 6px rgba(240, 120, 60, .55); background: #f2864f; } }
.em-glow { display: none; position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 300px; height: 140px; background: radial-gradient(closest-side, rgba(240, 120, 60, .38), transparent); pointer-events: none; }
.em-win { position: absolute; left: 44px; right: 44px; top: 74px; bottom: -24px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); padding: 14px 16px; }
.em-win > span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); margin-right: 6px; }
.em-win p { margin: 22px 0 0; display: grid; gap: 10px; }
.em-win p i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.em-win p i:nth-child(1) { width: 70%; } .em-win p i:nth-child(2) { width: 85%; } .em-win p i:nth-child(3) { width: 55%; }

/* 10/22 검토 2 — 휴대폰 가로 넘침 · 다크 off 버튼 · 작은 화면 다듬기 */
main > section.t-fr, .t-page > .t-frame { grid-template-columns: minmax(0, 1fr); } /* grid 자식(.wrap)이 내용 최소 폭으로 화면을 밀어내지 않게 */
.t-latin { font-size: clamp(2.75rem, 12vw, 10rem); }
.sv[data-ink="먹"] .sv-b.fill { color: var(--paper); } /* 먹은 다크에서 밝은 색이라 흰 글자가 안 보였다 */
@media (max-width: 600px) {
  .ab-prin { grid-template-columns: 1fr; gap: 32px; }
  #more .t-h2 { font-size: 1.6rem; word-break: keep-all; }
  .widgets { gap: 14px; }
  .widget.m { width: 100%; }
}

/* 마크 (10/22) — 바닥글 · 소개 첫 화면 · 404 */
.mark { display: block; width: 46px; height: 32px; color: var(--ink); }

/* 소개 첫 화면 — 내리면 점이 셋 → 둘 → 하나 → 영 (10/22) */
.ab-hero { height: 200vh; position: relative; padding-block: 0; }
.ab-hero-stick { position: sticky; top: 72px; height: calc(100svh - 72px); display: grid; place-items: center; text-align: center; padding: 0 24px; }
.ab-hero-stick > div { display: grid; justify-items: center; }
.ab-grow { width: 138px; height: 96px; margin-bottom: 36px; }
.ab-grow g { transition: opacity .45s ease, transform .45s ease; transform-origin: center; opacity: 0; transform: translateY(6px) scale(.9); }
.ab-grow .g1 { opacity: 1; transform: none; }
.ab-hero[data-step="1"] .g2, .ab-hero[data-step="2"] .g2, .ab-hero[data-step="3"] .g2, .ab-hero[data-step="4"] .g2 { opacity: 1; transform: none; }
.ab-hero[data-step="2"] .g3, .ab-hero[data-step="3"] .g3, .ab-hero[data-step="4"] .g3 { opacity: 1; transform: none; }
.ab-hero[data-step="3"] .g4, .ab-hero[data-step="4"] .g4 { opacity: 1; transform: none; }
.t-reduce .ab-hero { height: auto; } .t-reduce .ab-hero-stick { position: static; }
.ab-base { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
.ab-base-ink i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
@media (max-width: 900px) { .ab-hero { height: 160vh; } .ab-grow { width: 110px; height: 77px; } }

/* 눌리지 않는 버튼(곧 출시 · 만드는 중)은 눌릴 것처럼 보이지 않게 */
.btn[aria-disabled="true"] { background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); cursor: default; }

/* 소개 첫 화면 — 점과 함께 켜지는 낱말: 셋 · 둘 · 하나 · 영 */
.ab-count { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em; margin: 0 0 40px; }
.ab-count span { opacity: .22; transition: opacity .45s ease; }
.ab-count .c1, .ab-hero[data-step="1"] .c2, .ab-hero[data-step="2"] .c2, .ab-hero[data-step="3"] .c2, .ab-hero[data-step="4"] .c2,
.ab-hero[data-step="2"] .c3, .ab-hero[data-step="3"] .c3, .ab-hero[data-step="4"] .c3,
.ab-hero[data-step="3"] .c4, .ab-hero[data-step="4"] .c4 { opacity: 1; }
.ab-grow { margin-bottom: 24px; }


/* 바닥글 SNS (10/22) — 오른쪽 아래, 아이콘 + 이름 */

/* ---------- 10/22 검토 2단계 ---------- */
/* #18 첫 화면 판은 늘 어두우니 판 안에서는 다크 잉크 */
.t-hero-card{ --감: #ec8656; --진달래: #ee8ab4; --물빛: #4fb2be; --밤하늘: #7496d6; }
/* #19 다크에서 먹 위의 먹 판 — 1px 선으로 가른다 */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(.t-hero-card, .t-dcard){ box-shadow: inset 0 0 0 1px var(--rule); } :root:not([data-theme="light"]) .t-mori{ border-block: 1px solid var(--rule); } }
:root[data-theme="dark"] :is(.t-hero-card, .t-dcard){ box-shadow: inset 0 0 0 1px var(--rule); }
:root[data-theme="dark"] .t-mori{ border-block: 1px solid var(--rule); }
/* #24 휴대폰 첫 화면 — 숫자와 제목을 가운데 한 묶음으로 */
@media (max-width: 900px){
  .t-hero-card{ align-content: center; padding: 0; }
  .t-digits{ inset: auto 0; top: calc(50% - 130px); height: 110px; align-items: center; padding: 0 16px; }
  .t-hero-text{ margin-top: 150px; }
}
/* #25 memento mori 문장 두 줄 */
.t-say{ max-width: 22em; margin-inline: auto; text-wrap: balance; }
/* P3 '만드는 중' — 버튼 모양 없이 글자만 */
.sv-b.line:not(a){ box-shadow: none; color: var(--ink-3); padding-inline: 4px; font-weight: 500; }
/* P3 TWO 큰 원 96 → 64 */
/* P3 탭 영역 44px — 보이는 크기는 그대로 */
.tool{ position: relative; }
.tool::after{ content: ""; position: absolute; inset: -4px; }

/* App Store 공식 배지 (10/22) — 라이트는 검정, 다크는 흰색. 높이 48 · 타일 40, 둘레 여백 = 높이의 1/4. 배지 그림은 고치지 않는다 */
.as-badge{ display: inline-block; padding: 12px; margin: -12px; line-height: 0; }
.as-badge img{ height: 48px; width: auto; }
.as-badge.s{ padding: 10px; margin: -10px 0; }
.as-badge.s img{ height: 40px; }
.as-badge:hover{ opacity: .86; }
/* Apple 상표 표기 — 화면에는 숨기고 소스와 화면 낭독기에만 (사용자 결정 10/22) */
.foot-tm { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* say hello — 바닥글 오른쪽, SNS 아이콘 위 (10/23) */

/* 바닥글 (10/23, A안) — 위: 마크 · 앱 · mooha / 아래: 셋, 둘, 하나, 영. · Copyright · 약관, 오른쪽 say hello 아래 SNS. 마크업은 parts.footer 하나 */
.site-foot{ border-top: 1px solid var(--rule); margin-top: var(--s6); padding: 56px 0 48px; font-size: var(--t-s); color: var(--ink-3); }
.site-foot a{ text-decoration: none; }
.ft-top{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; align-items: start; }
.foot-mark{ display: inline-flex; color: var(--ink); }
.foot-mark:hover{ color: var(--ink); }
.foot-mark .mark{ width: 40px; height: 28px; }
.ft-col{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ft-lab{ margin: 0 0 4px; font: 600 13px/1 var(--font); color: var(--ink); }
.ft-col a{ font-size: 14px; color: var(--ink-2); }
.ft-col a:hover, .ft-legal a:hover{ color: var(--ink); }
.ft-bot{ display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); }
.ft-tag{ margin: 0; font-weight: 600; font-size: 15px; color: var(--ink); }
.ft-copy{ margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.ft-legal{ margin-left: 20px; white-space: nowrap; }
.ft-legal a{ color: var(--ink-2); }
.ft-legal a + a::before{ content: "|"; color: var(--rule); margin: 0 12px; }
.ft-side{ display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.ft-side .hello{ margin-left: 0; }
.foot-social{ display: flex; gap: 2px; margin-right: -12px; } /* 아이콘 누르는 칸(44px) 안쪽 여백만큼 — 아이콘 끝을 say hello 끝에 맞춘다 */
.foot-social a{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-2); }
.foot-social a:hover{ color: var(--ink); }
.foot-social svg{ width: 20px; height: 20px; }
.foot-social a[aria-label="X"] svg{ width: 16px; height: 16px; }
@media (max-width: 720px) {
  .site-foot{ padding: 40px 0; }
  .ft-top{ grid-template-columns: 1fr 1fr; }
  .ft-top .foot-mark{ grid-column: 1 / -1; }
  .ft-bot{ flex-direction: column; align-items: flex-start; }
  .ft-legal{ display: block; margin: 8px 0 0; }
  .ft-side{ align-items: flex-start; }
  .foot-social{ margin: 0 0 0 -12px; }
}

/* 개인정보처리방침 고르기 (10/23) — 알약 버튼, 지금 보는 방침만 채운다. 시행일 · 최종 수정은 맨 아래 */
.doc .pv-pills{ display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 36px; padding: 0; list-style: none; }
.pv-pills a{ display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.pv-pills a:hover{ color: var(--ink); border-color: var(--ink-3); }
.pv-pills a[aria-current="page"]{ background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.pv-dates{ margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); }
.doc .pv-dates p{ margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.8; }

/* 서비스 타일 버튼 (10/23, B안) — 위에 App Store 배지(또는 '곧 출시' 같은 상태), 아래 '더 알아보기 ›' 글자 링크 */
.sv-btns{ flex-direction: column; align-items: center; gap: 14px; }
.sv-b.fill{ background: none; color: var(--c); padding: 0; font-weight: 600; }
.sv-b.fill::after{ content: "\00a0›"; }
.sv-b.fill:hover{ filter: none; text-decoration: underline; text-underline-offset: 4px; }
.sv[data-ink="먹"] .sv-b.fill{ color: var(--ink); }
.as-badge.s{ padding: 0; margin: 0; }
/* 앱 화면은 버튼 아래 같은 자리에서 시작해 타일 바닥까지 — 화면 길이가 달라도 위쪽 빈 공간이 같다 */
.sv-art{ flex: 1; margin-top: 0; align-items: stretch; }
.sv-art .notch, .sv-art .ember-mac{ align-self: flex-end; }

/* 앱 소개 첫 화면 이름 줄 (10/23) — 아이콘 옆 이름 · 한 줄 소개는 좌측 정렬, 두 줄 사이를 좁게 */
.hero.t-app .app-id > div{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.hero.t-app .app-id > div > *{ display: block; line-height: 1.35; }