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

/* ---------- 1. 토큰 ---------- */
:root {
  /* 종이와 먹 — THREE 앱 아이콘의 바탕(#F4F1EC)과 같은 종이 */
  --paper: #f4f1ec;
  --paper-2: #ece8e1;     /* 카드·구획 */
  --ink: #1c1c1e;         /* 본문 */
  --ink-2: #5d5d60;       /* 보조 글 */
  --ink-3: #8e8d8a;       /* 흐린 글, 캡션 */
  --rule: #d9d5ce;        /* 가는 선 */
  --ring: #b8b7b3;        /* 빈 동그라미 — 앱의 CheckStroke */
  --device: #1c1c1e;      /* 기기 테두리 */
  --screen: #fbfaf8;      /* 기기 화면 */

  /* 잉크 열 가지 — THREE의 강조 색상과 같은 값, 같은 이름.
     가죽의 색 이름과 집중 도구의 색도 여기서 고른다. */
  --감: #bc5729;   --단풍: #b5323a;  --진달래: #be4a82; --산포도: #6e4282; --밤하늘: #2d4f8c;
  --물빛: #1e7f8c; --이끼: #4a6b2f;  --밤: #7a5232;    --안개비: #6c757c; --먹: #1c1c1e;

  --accent: var(--감);

  /* 글 — 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: #141414;
    --paper-2: #1e1e1f;
    --ink: #f2f2f0;
    --ink-2: #b4b3b0;
    --ink-3: #85847f;
    --rule: #2e2e2f;
    --ring: #5a5a5c;
    --device: #2a2a2c;
    --screen: #0b0b0b;
    /* 다크의 잉크 — 앱과 같이 조금 밝게 */
    --감: #ee8650;   --단풍: #e35f64;  --진달래: #e276aa; --산포도: #a97bc0; --밤하늘: #7496d6;
    --물빛: #4fb2be; --이끼: #86aa5f;  --밤: #b88b63;    --안개비: #a1aab1; --먹: #f2f2f7;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141414;
  --paper-2: #1e1e1f;
  --ink: #f2f2f0;
  --ink-2: #b4b3b0;
  --ink-3: #85847f;
  --rule: #2e2e2f;
  --ring: #5a5a5c;
  --device: #2a2a2c;
  --screen: #0b0b0b;
  /* 다크의 잉크 — 앱과 같이 조금 밝게 */
  --감: #ee8650;   --단풍: #e35f64;  --진달래: #e276aa; --산포도: #a97bc0; --밤하늘: #7496d6;
  --물빛: #4fb2be; --이끼: #86aa5f;  --밤: #b88b63;  --안개비: #a1aab1; --먹: #f2f2f7;
  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(--먹); }

/* ---------- 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); }
.dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accent); vertical-align: 0.12em; }

/* ---------- 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: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
/* 가운데 알약 메뉴 */
.site-nav { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--screen); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px -10px rgba(0,0,0,.18), inset 0 0 0 1px color-mix(in srgb, var(--rule) 60%, transparent); font-size: var(--t-s); }
.site-nav a { text-decoration: none; color: var(--ink-2); padding: 7px 16px; font-weight: 500; border-radius: 999px; line-height: 1.4; transition: background .2s, color .2s; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { background: var(--ink); color: var(--paper); }
/* 오른쪽 도구: 언어 · 해/달 · Say Hello */
.head-tools { display: flex; align-items: center; gap: 6px; justify-self: end; }
.tool { display: inline-grid; place-items: center; min-width: 36px; height: 36px; 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: 18px; height: 18px; }
.lang-menu { position: relative; }
.lang-btn { display: inline-flex; gap: 6px; padding: 0 10px; }
.lang-btn svg { width: 17px; height: 17px; }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--screen); border-radius: 14px; box-shadow: 0 12px 40px -12px rgba(0,0,0,.35), inset 0 0 0 1px var(--rule); z-index: 20; }
.lang-list[hidden] { display: none; }
.lang-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 9px 12px; border-radius: 9px; font-size: var(--t-s); text-decoration: none; color: var(--ink); }
.lang-list a:hover { background: var(--paper-2); color: var(--ink); }
.lang-list a small { color: var(--ink-3); font-size: var(--t-xs); }
.lang-list a[aria-current="true"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.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; 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; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); transition: opacity .2s; }
.hello:hover { color: var(--paper); opacity: .86; }
.hello svg { width: 15px; height: 15px; }
@media (max-width: 800px) {
  /* 휴대폰: 로고 · 도구 한 줄, 그 아래 알약 탭 — 앱 · 소개 페이지로 갈 수 있게 */
  .site-head .wrap { grid-template-columns: 1fr auto; height: auto; padding-block: 10px 8px; row-gap: 8px; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .site-nav a { padding: 6px 14px; }
}
@media (max-width: 359px) { .hello span { display: none; } .hello { padding: 0 10px; } }

.site-foot { padding-block: var(--s5) var(--s6); font-size: var(--t-s); color: var(--ink-3); }
.site-foot .wrap { display: grid; gap: var(--s3); grid-template-columns: 1fr auto; align-items: start; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.site-foot a { text-decoration: none; }
@media (max-width: 720px) { .site-foot .wrap { grid-template-columns: 1fr; } }

/* ---------- 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-3 { display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); }
.grid-2 { display: grid; gap: var(--s5); grid-template-columns: 1fr 1fr; align-items: center; }
.grid-3.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-3.two { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; gap: var(--s4); } }

.card { background: var(--paper-2); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); text-decoration: none; color: inherit; position: relative; transition: transform .3s ease; }
a.card:hover { color: inherit; transform: translateY(-2px); }
.card .art { aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: var(--s1); }
.card h3 { font-size: var(--t-l); display: flex; align-items: baseline; gap: 10px; }
.card .tag { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.card .more { margin-top: auto; font-size: var(--t-s); color: var(--ink-2); }

/* 제품 그림 — 모두 같은 선 굵기, 동그라미와 둥근 사각형만 */
.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(--감); }
.mark-focus { width: 120px; height: 120px; border-radius: 30px; background: var(--paper); box-shadow: inset 0 0 0 3px var(--ring); display: grid; place-items: center; }
.mark-focus span { width: 34px; height: 34px; border-radius: 50%; background: var(--먹); }
.mark-leather { width: 168px; height: 112px; border-radius: 14px; background: var(--밤); position: relative; }
.mark-leather::before { content: ""; position: absolute; inset: 9px; border: 2px dashed color-mix(in srgb, var(--paper) 55%, transparent); border-radius: 8px; }
.mark-leather span { position: absolute; right: 22px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); opacity: .9; }

/* ---------- 문의 ---------- */
.contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s5); align-items: center; }
.contact h2 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.contact p { color: var(--ink-2); max-width: 28em; }
.contact-card { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: inherit; justify-self: start; }
.contact-card .icon { width: 56px; height: 56px; border-radius: 14px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.contact-card .icon svg { width: 24px; height: 24px; }
.contact-card b { display: block; font-weight: 600; }
.contact-card .addr { color: var(--accent); }
.contact-card:hover .addr { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .contact { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------- 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); }

/* ---------- 7. 원칙 목록 ---------- */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); counter-reset: p; }
.principles li { list-style: none; border-top: 1px solid var(--ink); padding-top: var(--s2); }
.principles li::before { counter-increment: p; content: "0" counter(p); display: block; font-size: var(--t-xs); color: var(--ink-3); margin-bottom: var(--s3); }
.principles h3 { font-size: var(--t-m); margin-bottom: var(--s1); }
.principles p { font-size: var(--t-s); color: var(--ink-2); }
.principles { padding: 0; margin: 0; }
@media (max-width: 900px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principles { grid-template-columns: 1fr; } }

/* ---------- 8. 기기 — THREE 화면 ---------- */
.phone { width: 300px; aspect-ratio: 300 / 620; border-radius: 52px; background: var(--device); padding: 11px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.35); margin-inline: auto; }
.phone .screen { height: 100%; border-radius: 42px; background: var(--screen); padding: 64px 26px 26px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.phone .screen::before { content: ""; position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 96px; height: 28px; border-radius: 20px; background: #000; }
.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; }
[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); margin-top: 18px; padding-left: 36px; }
.year-ago { margin-top: auto; opacity: .5; font-size: 12.5px; }
.year-ago b { font-weight: 500; display: block; margin-bottom: 6px; color: var(--ink-2); }
.year-ago div { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.year-ago i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--ring); }
.year-ago i.on { background: var(--ink-3); box-shadow: none; }

/* 위젯 */
.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); margin-top: 8px; }

/* ---------- 9. 기능 목록 ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); }
.features h3 { font-size: var(--t-m); margin-bottom: var(--s1); display: flex; gap: 10px; align-items: baseline; }
.features h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; translate: 0 -2px; }
.features p { color: var(--ink-2); font-size: var(--t-s); }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* 하지 않는 것 */
.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-child { 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; }

/* 문서(약관·개인정보) */
.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); }
.panel { background: var(--screen); border-radius: 32px; padding: clamp(28px, 5vw, 64px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 55%, transparent); position: relative; overflow: hidden; }
.panel.dots { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.2px); background-size: 22px 22px; }
.display { font-size: clamp(2.75rem, 7.6vw, 6.25rem); line-height: .98; letter-spacing: -0.05em; font-weight: 800; }
.display-2 { font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; }
.soft { background: linear-gradient(100deg, var(--ink) 0%, var(--ink-3) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow-soft { font-size: var(--t-m); color: var(--ink-2); margin-bottom: var(--s2); }
.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); }
.intro { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); line-height: 1.8; color: var(--ink-2); margin-top: var(--s4); max-width: 40em; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 4px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-weight: 600; font-size: .9em; text-decoration: none; vertical-align: 1px; box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.chip:hover { color: var(--ink); background: color-mix(in srgb, var(--c, var(--ink)) 14%, var(--paper-2)); }
.chip i { width: 18px; height: 18px; border-radius: 6px; background: var(--c, var(--ink)); display: inline-grid; place-items: center; }
.chip i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--screen); }

/* 펼친 카드 */
.fan { display: flex; justify-content: center; margin: var(--s6) calc(-1 * clamp(28px, 5vw, 64px)) calc(-1 * clamp(28px, 5vw, 64px)); padding: 0 var(--s3) clamp(40px, 5vw, 64px); }
.fan-card { --r: 0deg; --y: 0px; position: relative; flex: 0 0 auto; width: clamp(196px, 19vw, 236px); aspect-ratio: 5 / 6; margin-left: -28px; padding: 26px 24px 22px; border-radius: 26px; background: color-mix(in srgb, var(--c) 24%, var(--screen)); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; transform: translateY(var(--y)) rotate(var(--r)); box-shadow: 0 24px 48px -28px rgba(0,0,0,.45), inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.fan-card:first-child { margin-left: 0; }
.fan-card:hover, .fan-card:focus-visible { transform: translateY(calc(var(--y) - 14px)) rotate(0deg); z-index: 5; color: var(--ink); box-shadow: 0 34px 60px -28px rgba(0,0,0,.5); }
.fan-card h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); letter-spacing: -0.04em; font-weight: 800; }
.fan-card p { font-size: var(--t-s); color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.fan-card .kind { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; }
.fan-card .art { flex: 1; display: grid; place-items: center; }
.fan-card .go { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: var(--t-xs); font-weight: 600; transform: rotate(calc(var(--r) * -0.4)); }
.fan-card .go.quiet { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); }
@media (max-width: 820px) {
  .fan { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-top: 16px; scrollbar-width: none; }
  .fan::-webkit-scrollbar { display: none; }
  .fan-card { margin-left: 0; scroll-snap-align: center; width: 230px; transform: rotate(calc(var(--r) * .35)); }
}

/* 앱 그림 — 같은 동그라미 언어 */
.mark-one { width: 64px; height: 64px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 18%, transparent); }
.mark-zero { width: 70px; height: 70px; border-radius: 50%; box-shadow: inset 0 0 0 9px var(--c); }
.fan-card .mark-three span:first-child { background: var(--c); border-color: var(--c); }
.fan-card .mark-three { gap: 9px; }
.fan-card .mark-three span { width: 24px; height: 24px; border-width: 2.5px; }
.fan-card .mark-focus { width: 96px; height: 96px; border-radius: 26px; }

/* 판 안의 원칙 · 색 */
.panel .principles { margin-top: var(--s6); }
.panel .inks { align-self: center; }

.mark-two { display: flex; gap: 12px; }
.mark-two span { width: 40px; height: 40px; border-radius: 50%; background: var(--c); }
.mark-two span + span { background: transparent; box-shadow: inset 0 0 0 7px var(--c); }
.mark-one { width: 54px; height: 54px; }
.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); }

/* 이야기 — 3 · 2 · 1 · 0 */
.countdown { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.countdown li { border-radius: 22px; padding: var(--s4) var(--s3); background: color-mix(in srgb, var(--c) 12%, var(--screen)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent); }
.countdown b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: .9; letter-spacing: -0.06em; color: var(--c); }
.countdown h3 { font-size: var(--t-l); margin-top: var(--s3); }
.countdown .scope { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; letter-spacing: .04em; margin: 2px 0 var(--s2); }
.countdown p:last-child { font-size: var(--t-s); color: var(--ink-2); }
.story-note { margin-top: var(--s5); color: var(--ink-2); max-width: 42em; }
@media (max-width: 900px) { .countdown { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .countdown { grid-template-columns: 1fr; } }

/* 한글 자간 — 영문용 좁은 자간이 한글을 붙여 보이게 해서, 한국어 페이지는 따로 연다 */
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) .display { letter-spacing: -0.03em; line-height: 1.08; }
html:lang(ko) .display-2 { letter-spacing: -0.025em; line-height: 1.14; }
html:lang(ko) .lede, html:lang(ko) .intro { letter-spacing: -0.005em; }
html:lang(ko) .fan-card h3, html:lang(ko) .countdown h3 { letter-spacing: -0.03em; } /* 앱 이름(영문)은 그대로 단단하게 */

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

/* ---------- 바닥글 (애플식) ---------- */
.site-foot { border-top: 1px solid var(--rule); padding: var(--s4) 0 var(--s6); margin-top: var(--s6); font-size: var(--t-xs); color: var(--ink-3); }
.site-foot .wrap { display: block; }
.foot-row { display: flex; align-items: center; gap: var(--s2) var(--s5); flex-wrap: wrap; }
.foot-row .copy { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-links a + a::before { content: "|"; color: var(--rule); margin: 0 12px; }
.foot-region { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; }
.foot-region:hover { color: var(--ink); }
.biz { margin-top: var(--s3); line-height: 1.8; max-width: 72em; }
@media (max-width: 720px) { .foot-region { margin-left: 0; } }

/* ---------- 앱 화면 목업 ---------- */
/* one 화면 (소개 페이지와 앱 목록이 함께 쓴다) */
.one-screen { padding: 60px 24px 24px; gap: 0; }
.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); }
.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-screen { padding: 60px 24px 24px; }
.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; }
.mem-more { margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.mem-more b { color: var(--accent); }
.mem-call { display: inline-flex; margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; align-self: flex-start; }
.mem-next { margin-top: auto; font-size: 12px; color: var(--ink-3); }
.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; }

/* 소개 — 이루고 싶은 것 */
.mission { margin-top: var(--s6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.mission > div { border-top: 2px solid var(--c); padding-top: var(--s3); }
.mission i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-bottom: var(--s3); }
.mission h3 { font-size: var(--t-l); margin-bottom: var(--s1); }
.mission p { font-size: var(--t-s); color: var(--ink-2); }
.mission a, .mission span { display: inline-block; margin-top: var(--s2); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); text-decoration: none; }
.mission a:hover { color: var(--c); }
@media (max-width: 900px) { .mission { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mission { grid-template-columns: 1fr; } }

/* ---------- 앱 목록 (benshih /fun처럼) ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--s6); }
.proj { position: relative; overflow: hidden; display: block; min-height: 480px; padding: 28px; border-radius: 26px; background: color-mix(in srgb, var(--c) 18%, var(--screen)); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); isolation: isolate; }
a.proj:hover { color: var(--ink); }
.proj.wide { grid-column: span 2; }
.proj.full { grid-column: 1 / -1; min-height: 340px; }
.proj-text { position: relative; z-index: 2; max-width: 24em; }
.proj .kind { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }
.proj h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; margin: 4px 0 8px; }
.proj-text > p:not(.kind) { font-size: var(--t-s); color: var(--ink-2); }
.proj-link { margin-top: var(--s2); }
.proj .status { position: absolute; top: 24px; right: 24px; z-index: 2; padding: 6px 12px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; background: var(--screen); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.proj-art { position: absolute; z-index: 1; left: 50%; bottom: -230px; translate: -50% 0; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.proj.wide .proj-art { left: auto; right: 56px; translate: 0 0; bottom: -190px; transform: rotate(-4deg); }
.proj-art .phone { width: 250px; margin: 0; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
a.proj:hover .proj-art { transform: translateY(-14px); }
a.proj.wide:hover .proj-art { transform: rotate(-2deg) translateY(-14px); }
.proj:not(.wide):not(.full) .proj-art:has(.mark-two) { bottom: 90px; }
.mark-two.big span { width: 96px; height: 96px; }
.mark-two.big span + span { box-shadow: inset 0 0 0 16px var(--c); }
.mark-two.big { gap: 22px; }
.proj.full .proj-art { left: auto; right: 12%; bottom: 50%; translate: 0 50%; }
.block-3d { width: 200px; height: 200px; border-radius: 52px; background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 92%, white), var(--paper-2)); box-shadow: 0 40px 70px -30px rgba(0,0,0,.5), inset 0 -10px 24px rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.7); display: grid; place-items: center; transform: rotate(8deg); }
.block-3d span { width: 58px; height: 58px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 -4px 8px rgba(255,255,255,.12); }
@media (max-width: 900px) {
  .proj-grid { grid-template-columns: 1fr; }
  .proj.wide, .proj.full { grid-column: auto; }
  .proj, .proj.full { min-height: 460px; }
  .proj.wide .proj-art { right: auto; left: 50%; translate: -50% 0; transform: none; bottom: -230px; }
  .proj.full .proj-art { right: auto; left: 50%; bottom: 40px; translate: -50% 0; }
}

.foot-mark { display: inline-flex; font-size: 1.25rem; color: var(--ink); margin-bottom: var(--s3); }
.foot-mark:hover { color: var(--ink); }

/* ---------- 이야기 · 소개 카드 (앱 목록과 같은 판) ---------- */
.proj.corner .proj-art { left: auto; right: 28px; bottom: 22px; translate: none; transform: none; }
a.proj.corner:hover .proj-art { transform: translateY(-8px); }
.digit { font-family: var(--display); font-weight: 800; font-size: clamp(9rem, 18vw, 15rem); line-height: .78; letter-spacing: -0.06em; color: var(--c); }
.proj.corner:not(.wide) .digit { font-size: clamp(8rem, 14vw, 12rem); }
.proj.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; min-height: 0; }
.proj.split .proj-art, .proj.rich .proj-art { position: static; translate: none; transform: none; }
.proj.rich { min-height: 0; }
.proj.rich .proj-text { max-width: none; }
.proj.rich .principles { margin-top: var(--s5); }
.proj .principles li { border-top-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.proj-link span { font-weight: 600; font-size: var(--t-s); color: var(--ink); }
.flows { display: grid; gap: 14px; }
.flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--screen) 70%, transparent); }
.flow small { flex-basis: 100%; color: var(--ink-2); font-size: var(--t-xs); }
.flow-arr { color: var(--ink-3); }
.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; }
.proj .mark-three { gap: 14px; }
.proj .mark-three span { width: 44px; height: 44px; border-width: 4px; }
.proj .mark-three span:first-child { background: var(--c); border-color: var(--c); }
.block-3d.small { width: 140px; height: 140px; border-radius: 38px; }
.block-3d.small span { width: 42px; height: 42px; }
@media (max-width: 900px) {
  .proj.split { grid-template-columns: 1fr; }
  .proj.corner { min-height: 380px; }
}

/* ---------- 움직임 (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 .proj.rv.in { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .5s cubic-bezier(.2,.7,.2,1); }

.motion h1.lines .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.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; } }

.motion .fan-card { transform: perspective(1000px) translateY(var(--y)) rotate(var(--r)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.motion .fan-card:hover { transform: perspective(1000px) translateY(calc(var(--y) - 14px)) rotate(0deg) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.motion .fan.stacked .fan-card { transform: translateX(var(--from)) translateY(30px) rotate(calc(var(--fi) * 2deg - 4deg)); opacity: .0; transition: none; }
.motion .fan.spread .fan-card { transition: transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--fi) * 70ms), opacity .6s ease calc(var(--fi) * 70ms), box-shadow .35s; }

.proj-art .phone { transform: translateY(var(--py, 0px)); transition: transform .2s linear; }
.cnt { font-variant-numeric: tabular-nums; }
.digit, .big-num { font-variant-numeric: tabular-nums; }

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