/* loglog 홈페이지 공용 스타일
   색·서체 = 브랜드 정본(~/dev/loglog/design.md · v3/src/styles.css).
   종이: 지면=모눈, 쓰는 면=옥스포드 줄공책(견본 원색 #cfd6e4 · #e2a8a0). */

@font-face {
  font-family: 'Inter';
  src: url('inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #fbfaf4; --panel: #ffffff; --panel2: #f7f6f3;
  --line: #e7e5e0; --line2: #efedea;
  --ink: #23252b; --sub: #6e7178; --faint: #a5a8af;
  --accent: #3b5bdb; --on-accent: #ffffff;
  --accent-soft: rgba(59, 91, 219, 0.09);
  --good: #2f9e63; --good-soft: rgba(47, 158, 99, 0.12);
  --warn: #d64545;
  --hl: #fff0a0;
  --grid: #dcdfe6; --rule: #cfd6e4; --margin: #e2a8a0; --write: #faf7ee;
  --grid-major: color-mix(in srgb, var(--grid) 62%, var(--faint));
  --tape: color-mix(in srgb, var(--hl) 80%, transparent);
  --grain-opacity: 0.035; --grain-filter: none;
  --shadow-1: 0 1px 2px rgba(35, 37, 43, 0.05), 0 6px 18px rgba(35, 37, 43, 0.05);
  --shadow: 0 1px 2px rgba(35, 37, 43, 0.05), 0 12px 32px rgba(35, 37, 43, 0.08);
  --r-tick: 6px; --r-ctl: 8px; --r-panel: 12px; --r-card: 16px;
  --rule-size: 32px;
  --sans: 'Inter', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --hand: var(--sans);   /* 09-22 손글씨 폐지 — 강조는 색·굵기로 */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161c; --panel: #1c1f27; --panel2: #171a21;
    --line: #2a2e38; --line2: #232732;
    --ink: #e9eaee; --sub: #9ca0aa; --faint: #808591;
    --accent: #7c93f2; --on-accent: #14161c;
    --accent-soft: rgba(124, 147, 242, 0.13);
    --good: #4cbb84; --good-soft: rgba(76, 187, 132, 0.14);
    --warn: #e06c6c;
    --hl: rgba(250, 204, 21, 0.32);
    --grid: #1c1f27; --rule: #242832; --margin: #5b3a3a; --write: #171a21;
    --grain-opacity: 0.05; --grain-filter: invert(1);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.2);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14161c; --panel: #1c1f27; --panel2: #171a21;
  --line: #2a2e38; --line2: #232732;
  --ink: #e9eaee; --sub: #9ca0aa; --faint: #808591;
  --accent: #7c93f2; --on-accent: #14161c;
  --accent-soft: rgba(124, 147, 242, 0.13);
  --good: #4cbb84; --good-soft: rgba(76, 187, 132, 0.14);
  --warn: #e06c6c;
  --hl: rgba(250, 204, 21, 0.32);
  --grid: #1c1f27; --rule: #242832; --margin: #5b3a3a; --write: #171a21;
  --grain-opacity: 0.05; --grain-filter: invert(1);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.2);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* ── 기본 ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
/* 종이 결: 고정 레이어 하나에만(스크롤 컨테이너에 걸면 매 프레임 다시 칠한다) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  opacity: var(--grain-opacity); filter: var(--grain-filter);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .15 0 0 0 0 .17 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a, button, summary, select, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
.hand { font-weight: 700; letter-spacing: -0.01em; }
.skip {
  position: absolute; left: 16px; top: -48px; z-index: 40;
  background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: var(--r-ctl);
  font-size: 14px; font-weight: 600;
}
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 종이 ─────────────────────────────────────────── */
/* 옥스포드 줄공책: 가로줄 타일 + 본문 왼쪽 여백선 */
.ruled {
  --mx: max(10px, calc((100% - 1120px) / 2 + 6px));
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, transparent var(--mx), var(--margin) var(--mx), var(--margin) calc(var(--mx) + 1px), transparent calc(var(--mx) + 1px)),
    linear-gradient(180deg, transparent calc(var(--rule-size) - 1px), var(--rule) calc(var(--rule-size) - 1px));
  background-size: 100% 100%, 100% var(--rule-size);
  background-repeat: no-repeat, repeat;
}
/* 모눈종이: 24px 잔눈 + 5칸마다 굵은 눈 */
.grid-paper {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* ── 내비게이션 ───────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line2);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.wordmark {
  display: block; width: 92px; height: 28px; background: currentColor;
  -webkit-mask: url('wordmark.png') no-repeat center / contain;
  mask: url('wordmark.png') no-repeat center / contain;
}
.nav-links { display: flex; gap: 22px; font-size: 14.5px; font-weight: 500; color: var(--sub); }
.nav-links a { padding-block: 8px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sound-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer;
  color: var(--sub); font-size: 13.5px; font-weight: 500; line-height: 1.2;
  transition: background 0.15s, color 0.15s;
}
.sound-btn:hover { background: var(--panel2); color: var(--ink); }
.sound-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.sound-btn svg { width: 18px; height: 18px; flex: none; }
.sound-btn .wave { opacity: 0.25; transition: opacity 0.15s; }
.sound-btn[aria-pressed="true"] .wave { opacity: 1; }

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--r-ctl);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  font: 600 15.5px/1.2 var(--sans);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn-ghost { background: var(--panel); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--faint); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }
/* 앱 다운로드 배지(09-22) — 히어로·마무리의 주동작. 스토어 배지 어법 그대로
   왼쪽 플랫폼 로고 + 작은 윗줄 + 큰 아랫줄이고, 두 장은 언제나 같은 크기다 */
.btn-dl {
  height: 58px; padding: 0 20px 0 18px; gap: 12px;
  background: var(--ink); color: var(--bg); border-color: transparent;
}
.btn-dl:hover { box-shadow: var(--shadow); }
.btn-dl svg { width: 23px; height: 23px; flex: none; }
.btn-dl .dl-t { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.btn-dl .dl-t small { font-size: 11.5px; font-weight: 500; line-height: 1.1; opacity: 0.7; }
.btn-dl .dl-t b { font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.link { color: var(--accent); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 곁줄 주석(옛 손글씨 자리) · 연필 선 ──────────── */
.anno { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; color: var(--accent); }
.pencil { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mark {
  background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 82% / 0% 44%;
  transition: background-size 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
  padding-inline: 2px; margin-inline: -2px;
}
.mark.on { background-size: 100% 44%; }

/* 테이프로 붙인 스크린샷 */
.taped { position: relative; margin: 0; }
.taped img {
  border-radius: 28px; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--panel);
}
.tape {
  position: absolute; z-index: 1; width: 96px; height: 28px; background: var(--tape);
  clip-path: polygon(0 0, 100% 0, 97% 22%, 100% 44%, 97% 66%, 100% 88%, 98% 100%, 0 100%, 3% 80%, 0 58%, 3% 36%, 0 14%);
}
.tape.t1 { top: -10px; left: -26px; transform: rotate(-34deg); }
.tape.t2 { top: -8px; right: -24px; transform: rotate(30deg); }

/* ── 섹션 공통 ───────────────────────────────────── */
.sec { padding-block: 96px; }
.sec-head { max-width: 640px; }
.sec-head h2 {
  margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 38px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance;
}
.sec-head p { margin: 0; font-size: 17px; color: var(--sub); }

/* ── 히어로 ──────────────────────────────────────── */
.hero { padding-block: 32px 64px; overflow: hidden; }
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 40px; align-items: start;
}
.hello { position: relative; width: min(500px, 100%); margin-left: -10px; }
.hello svg { display: block; width: 100%; height: auto; overflow: visible; }
.hello .ink { fill: none; stroke: var(--ink); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.hello-replay {
  position: absolute; right: -18px; top: 6px;
  display: inline-block; text-align: right;
  padding: 4px 8px; border: 0; border-radius: var(--r-tick); background: none; cursor: pointer;
  font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--accent);
}
.hello-replay:hover { background: var(--accent-soft); }
.hello-replay[disabled] { opacity: 0.5; cursor: default; }
.hero h1 {
  margin: 0 0 16px; font-size: clamp(34px, 4.6vw, 52px); font-weight: 700;
  line-height: 1.23; letter-spacing: -0.028em; text-wrap: balance;
}
.hero-sub { margin: 0 0 32px; max-width: 29em; font-size: 17.5px; line-height: 32px; color: var(--sub); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
/* 히어로 주동작 밑 한 줄 — 버전·요구 사양과 설치 안내. 내려받기 자체는 위 배지가 맡는다 */
/* 다운로드 버튼 + 바로 아래 요구 사양(09-22: 한 줄로 묶여 있던 버전 줄을 버튼별로 쪼갬) */
.dlwrap { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.dlwrap .btn-dl { width: 100%; }
.dl-req { font-size: 14px; line-height: 1.4; color: var(--faint); font-variant-numeric: tabular-nums; }

.hero-shot { position: relative; padding-top: 40px; }
.hero-shot .taped { width: min(300px, 82%); margin-inline: auto; transform: rotate(2.5deg); }
.a-hero { position: absolute; left: -64px; top: 250px; width: 150px; font-size: 25px; transform: rotate(-7deg); }
.a-hero svg { display: block; width: 70px; height: 40px; margin: 6px 0 0 76px; }

/* ── 만든 사람 이야기 ─────────────────────────────── */
.maker-in { max-width: 780px; margin-inline: auto; }
.maker h2 {
  margin: 0 0 20px; font-size: clamp(40px, 5.6vw, 62px); line-height: 1.05;
  color: var(--ink); text-wrap: balance;
}
.maker .lead { margin: 0 0 20px; font-size: 18px; color: var(--sub); max-width: 34em; }
.xlist {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; line-height: 1.45; color: var(--sub);
}
.xlist li { position: relative; white-space: nowrap; }
.xlist svg { position: absolute; left: -4px; top: 0; overflow: visible; pointer-events: none; color: var(--ink); }
.xlist .pencil { stroke-width: 2.4; opacity: 0.85; }
.maker .punch {
  margin: 12px 0 8px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 700;
  line-height: 1.4; letter-spacing: -0.02em;
}
.sign { margin: 0; font-size: 32px; color: var(--sub); }

/* ── 바인더(기능) ─────────────────────────────────── */
.binder { position: relative; margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.binder-page {
  --mx: 64px;
  position: relative; display: grid; align-content: center; min-height: 576px; padding: 48px 48px 48px 96px;
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow);
  background-color: var(--write);
  background-image:
    linear-gradient(90deg, transparent var(--mx), var(--margin) var(--mx), var(--margin) calc(var(--mx) + 1px), transparent calc(var(--mx) + 1px)),
    linear-gradient(180deg, transparent calc(var(--rule-size) - 1px), var(--rule) calc(var(--rule-size) - 1px));
  background-size: 100% 100%, 100% var(--rule-size);
  background-repeat: no-repeat, repeat;
  background-position: 0 0, 0 15px;
}
/* 루스리프 구멍: 지면 색이 뚫려 보이게 */
.binder-page::before {
  content: ""; position: absolute; left: 18px; top: 36px; bottom: 36px; width: 24px;
  background: radial-gradient(circle, var(--bg) 0 7px, var(--line) 7.5px 8.5px, transparent 9px) center top / 24px 64px repeat-y;
}
.tabs { display: flex; flex-direction: column; gap: 6px; padding-top: 40px; margin-left: -1px; }
.tab {
  --tab: var(--accent);
  display: flex; align-items: center; gap: 8px; min-width: 128px; height: 52px; padding: 0 20px 0 18px;
  border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--r-panel) var(--r-panel) 0;
  background: color-mix(in srgb, var(--tab) 10%, var(--panel2));
  color: var(--sub); font: 600 15px/1.2 var(--sans); text-align: left; cursor: pointer;
  transform: translateX(-8px); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tab:hover { color: var(--ink); transform: translateX(-4px); }
.tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--tab) 22%, var(--write)); color: var(--ink);
  transform: translateX(0); box-shadow: 4px 3px 12px rgba(35, 37, 43, 0.06);
}
.tab-todo { --tab: var(--accent); }
.tab-cal { --tab: var(--good); }
.tab-time { --tab: color-mix(in srgb, var(--hl) 60%, var(--warn)); }
.tab-money { --tab: var(--margin); }
.bp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 48px; align-items: center; }
.bp[hidden] { display: none; }
.bp.enter { animation: pageIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px) rotate(-0.3deg); } to { opacity: 1; transform: none; } }
.bp h3 { margin: 0; font-size: 30px; font-weight: 700; line-height: 64px; letter-spacing: -0.02em; }
.bp .tagline { margin: 0 0 8px; font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--accent); }
.bp p { margin: 0 0 16px; font-size: 16.5px; line-height: 32px; color: var(--sub); max-width: 27em; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 32px; font-weight: 500; }
.checks li::before {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--good);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6c1.3 1 2.4 2.2 3.3 3.6C7.6 8.4 10 5.2 13.6 2.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6c1.3 1 2.4 2.2 3.3 3.6C7.6 8.4 10 5.2 13.6 2.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bp-visual { position: relative; display: flex; justify-content: center; }
.bp-visual .taped { width: min(236px, 100%); transform: rotate(-1.8deg); }
.bp-visual .anno { position: absolute; font-size: 16px; width: 148px; }
.bp-visual .a-left { left: -104px; bottom: 56px; }
.bp-visual .a-right { right: -22px; top: 70px; }
.bp-visual .td-hint { position: static; width: auto; margin-top: 14px; font-size: 16px; }

/* 할 일 데모: 실제 앱 문법(둥근 체크·하위 할 일·칸반)을 축소한 동작하는 미니 UI */
.todo-demo {
  width: 100%; max-width: 400px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1);
  font-size: 14px; line-height: 1.4;
}
.td-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.td-list { display: flex; align-items: baseline; gap: 8px; }
.td-list b { font-size: 15px; font-weight: 700; }
.td-count { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel2); border-radius: var(--r-ctl); }
.seg button {
  height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-tick); background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--sub);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1); }
.td-filter {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 6px 10px;
  background: var(--panel2); border-radius: var(--r-ctl); font-size: 12.5px; color: var(--faint);
}
.td-filter select {
  border: 0; background-color: var(--panel2); font: 600 13px/1.2 var(--sans); color: var(--ink); cursor: pointer; padding: 2px 0;
}
.trow { display: flex; align-items: center; gap: 10px; min-height: 42px; border-top: 1px solid var(--line2); }
.trow:first-child { border-top: 0; }
.trow[hidden] { display: none; }
.trow.sub { padding-left: 32px; min-height: 36px; border-top: 0; }
.ttl { flex: 1; min-width: 0; transition: color 0.2s; }
.trow.done .ttl { text-decoration: line-through; color: var(--faint); }
.tcheck {
  position: relative; flex: none; width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1.6px solid var(--faint); border-radius: 50%; background: none;
  display: grid; place-items: center; transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.tcheck::after { content: ""; position: absolute; inset: -11px; }
.trow.sub .tcheck { width: 18px; height: 18px; }
.tcheck svg { width: 60%; height: 60%; opacity: 0; stroke: var(--on-accent); }
.trow.done .tcheck { background: var(--good); border-color: var(--good); }
.trow.done .tcheck svg { opacity: 1; }
.tcheck:hover { border-color: var(--sub); }
.tcheck:active { transform: scale(0.9); }
.badge {
  flex: none; padding: 3px 7px; border-radius: var(--r-tick);
  font-size: 12px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums;
  background: var(--accent-soft); color: var(--accent);
}
.badge.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.badge.soft { background: var(--panel2); color: var(--sub); }
.td-board { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.todo-demo[data-mode="board"] .td-board { display: grid; }
.todo-demo[data-mode="board"] .td-rows, .todo-demo[data-mode="board"] .td-filter { display: none; }
.kcol { padding: 8px; background: var(--panel2); border-radius: var(--r-ctl); display: grid; gap: 6px; align-content: start; min-height: 172px; }
.kcol h4 { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--sub); }
.kcard { padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 12.5px; line-height: 1.35; }
.kcard small { display: block; margin-top: 4px; color: var(--faint); font-size: 11.5px; }
.kcard.done { color: var(--faint); text-decoration: line-through; }

/* ── 벤토(매일의 작은 기록) ───────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.cell {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  min-height: 300px; padding: 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.cell h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.cell p { margin: 0; font-size: 15.5px; color: var(--sub); max-width: 30em; }
.c-habit { grid-column: span 4; }
.c-wake { grid-column: span 2; }
.c-book { grid-column: span 3; }
.c-study { grid-column: span 3; }
.ic { display: inline-block; flex: none; width: 1.2em; height: 1.2em; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ic-fire { -webkit-mask-image: url('icons/fire.png'); mask-image: url('icons/fire.png'); }
.ic-bed { -webkit-mask-image: url('icons/bed.png'); mask-image: url('icons/bed.png'); }
.ic-books { -webkit-mask-image: url('icons/books.png'); mask-image: url('icons/books.png'); }
.ic-note { -webkit-mask-image: url('icons/note.svg'); mask-image: url('icons/note.svg'); }
.ic-check { -webkit-mask-image: url('icons/check.png'); mask-image: url('icons/check.png'); }
.ic-calendar { -webkit-mask-image: url('icons/calendar.png'); mask-image: url('icons/calendar.png'); }
.ic-clock { -webkit-mask-image: url('icons/clock.svg'); mask-image: url('icons/clock.svg'); }
.ic-wallet { -webkit-mask-image: url('icons/wallet.png'); mask-image: url('icons/wallet.png'); }
.ic-target { -webkit-mask-image: url('icons/target.png'); mask-image: url('icons/target.png'); }

.spring-wrap { margin-top: auto; }
.spring svg { display: block; width: 100%; max-width: 560px; height: auto; overflow: visible; }
.spring .ring { cursor: pointer; }
.spring .ring ellipse { fill: none; stroke: var(--line); stroke-width: 2.4; transition: stroke 0.15s, fill 0.15s; }
.spring .ring.done ellipse { stroke: var(--good); fill: var(--good-soft); }
.spring .ring:hover ellipse { stroke: var(--faint); }
.spring .ring.done:hover ellipse { stroke: var(--good); }
.spring .ring:focus-visible { outline: none; }
.spring .ring:focus-visible ellipse { stroke: var(--accent); }
.spring .wire { fill: none; stroke: var(--good); stroke-width: 2.4; stroke-linecap: round; }
.spring text { font: 500 11px var(--sans); fill: var(--faint); text-anchor: middle; }
.spring text.today { fill: var(--accent); font-weight: 700; }
.cell .streak { margin: 6px 0 0; font-size: 32px; line-height: 1.1; color: var(--good); }
.cell .streak.rest { color: var(--faint); }

/* 모닝콜: 앱에서도 야간 전용 고정 팔레트(다크 토큰 값) */
.c-wake { background: #14161c; border-color: #2a2e38; color: #e9eaee; }
.c-wake p { color: #9ca0aa; }
.wake-time { margin-top: auto; font-size: 60px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wake-meta { font-size: 13px; color: #9ca0aa; font-variant-numeric: tabular-nums; }
.wake-meta b { color: #7c93f2; font-weight: 600; }

.covers { display: flex; gap: 12px; margin-top: auto; padding-top: 8px; }
.cover {
  --c: var(--accent);
  position: relative; flex: none; width: 70px; height: 100px; padding: 10px 8px 8px 14px;
  border-radius: 3px 6px 6px 3px; background: color-mix(in srgb, var(--c) 82%, var(--panel));
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25; box-shadow: var(--shadow-1);
}
.cover::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1.5px; background: rgba(255, 255, 255, 0.35); }
.cover.c2 { --c: var(--good); }
.cover.c3 { --c: var(--warn); }
.cover.c4 { --c: var(--sub); }
.book-meta { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }

.c-study.grid-paper { background-color: var(--panel); }
.study-time { margin-top: auto; font-size: 40px; line-height: 1; color: var(--accent); }
.files { display: grid; gap: 6px; margin-top: 8px; }
.file {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 13.5px;
}
.file .ic { color: var(--sub); }
.file span:last-child { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ── 실시간 연동 ─────────────────────────────────── */
.sync-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.sync .sync-big { display: inline-block; margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--accent); }
.sync h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.sync p { margin: 0 0 20px; font-size: 17px; color: var(--sub); max-width: 26em; }
/* 연동 기기 목업: 모니터 한 대 + 폰 두 대. 화면 안에 플랫폼 심볼만 둔다 */
.syncdevs {
  --sd: #23252b;
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: fit-content; max-width: 100%; margin-inline: auto;
  gap: clamp(28px, 6vw, 64px); padding-block: 32px 8px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .syncdevs { --sd: #39404e; } }
:root[data-theme="dark"] .syncdevs { --sd: #39404e; }
/* 기기 사이를 잇는 점선 = 같은 기록이 오간다는 표시 */
.sdline {
  position: absolute; left: 8px; right: 8px; top: 46%; height: 0;
  border-top: 2px dashed var(--line); z-index: 0;
}
.sdev { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.sdev-scr {
  display: grid; place-items: center; background: var(--panel);
  border: 3px solid var(--sd); box-shadow: var(--shadow-1);
}
.sdev-os { display: flex; align-items: center; gap: 8px; color: var(--sub); }
.sdev-os svg { width: 20px; height: 20px; }
.sdev-lab { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--sub); white-space: nowrap; }
.sdev-mon .sdev-scr { width: clamp(150px, 22vw, 196px); aspect-ratio: 16 / 10; border-radius: 9px; }
.sdev-mon .sdev-neck { width: 16%; height: 14px; background: var(--sd); }
.sdev-mon .sdev-base { width: 40%; height: 5px; border-radius: 3px; background: var(--sd); }
.sdev-ph .sdev-scr { width: clamp(58px, 8vw, 70px); aspect-ratio: 9 / 18; border-radius: 12px; }
.sdev-ph .sdev-os svg { width: 17px; height: 17px; }

/* ── 마무리 CTA ─────────────────────────────────── */
.cta { padding-block: 96px 64px; }
.cta h2 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; }
.cta h2 .under { position: relative; display: inline-block; }
.cta h2 .under svg { position: absolute; left: -4px; right: -4px; bottom: -10px; width: calc(100% + 8px); height: 16px; color: var(--accent); overflow: visible; }
.cta p { margin: 0 0 32px; font-size: 17px; color: var(--sub); max-width: 30em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; }
.cta-row > .link { padding-top: 17px; }
.cta .ps { margin: 64px 0 0; max-width: 34em; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--faint); }

/* ── 서브 페이지 머리 ─────────────────────────────── */
.page-head { padding-block: 64px 32px; }
.page-head h1 { margin: 0 0 12px; font-size: clamp(32px, 4.4vw, 46px); font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; text-wrap: balance; }
.page-head p { margin: 0; font-size: 17px; line-height: 32px; color: var(--sub); max-width: 32em; }
.page-head .anno { font-size: 18px; margin-bottom: 6px; display: inline-block; }

/* ── 다운로드 ───────────────────────────────────── */
.dl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding-bottom: 96px; }
.pf {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.pf.wide { grid-column: span 3; }
.pf.narrow { grid-column: span 2; }
.pf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf h2 { position: relative; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; }
.pf-name { position: relative; display: inline-block; }
.pf-name svg { position: absolute; pointer-events: none; color: var(--accent); overflow: visible; }
.sec.flush { padding-top: 0; }
.bp-visual { flex-direction: column; align-items: center; }
.pricing-body { padding-bottom: 96px; }
@media (prefers-reduced-motion: reduce) { .hello-replay { display: none; } }
.pf p { margin: 0; font-size: 15px; color: var(--sub); }
.status { flex: none; padding: 4px 8px; border-radius: var(--r-tick); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.status.ok { background: var(--good-soft); color: var(--good); }
.status.soon { background: var(--panel2); color: var(--sub); }
.steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; counter-reset: s; font-size: 14.5px; color: var(--sub); }
.steps li { position: relative; padding-left: 26px; counter-increment: s; }
.steps li::before { content: counter(s) "."; position: absolute; left: 0; top: 0; width: 20px; font-size: 15px; font-weight: 700; line-height: inherit; color: var(--accent); }
/* 단축키 목록(09-25) — 번호 대신 점. 설치 단계(숫자) 뒤에 또 1·2·3이 서면 헷갈린다 */
.steps.keys li::before { content: "·"; font-weight: 700; }
.pf-act { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.meta { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.fallback { font-size: 13.5px; color: var(--sub); }
.fallback summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 600; }
.fallback summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf .fallback p { margin: 6px 0 0; font-size: 13.5px; }
.fallback code { padding: 2px 6px; border-radius: var(--r-tick); background: var(--panel2); color: var(--ink); font: 12.5px/1.4 ui-monospace, 'SF Mono', monospace; word-break: break-all; }
.pf .here-note { display: none; position: absolute; right: 24px; top: -12px; padding: 2px 10px; border-radius: var(--r-tick); background: var(--accent); color: var(--on-accent); font-size: 13.5px; font-weight: 700; }
.pf.here .here-note { display: block; }
.pf.here { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* ── 요금제 ─────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.plan.pick { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.plan .pick-note { position: absolute; right: 18px; top: -12px; padding: 2px 10px; border-radius: var(--r-tick); background: var(--accent); color: var(--on-accent); font-size: 13.5px; font-weight: 700; }
.plan h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.plan .for { margin: 0; min-height: 3em; font-size: 14.5px; color: var(--sub); }
.price { display: flex; align-items: flex-end; min-height: 40px; margin: 0; font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price small { font-size: 14px; font-weight: 500; color: var(--sub); letter-spacing: 0; }
.price.tbd { font-size: 26px; font-weight: 600; color: var(--faint); letter-spacing: -0.01em; }
/* 가격 표기(09-14): 큰 숫자 = 연간 환산 월액, 그 옆 작은 줄 = 연 금액·할인. 월 결제는 한 줄 아래에 작게 */
.price { flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.price .amt { font-size: 34px; }
.price .sub { align-self: flex-end; padding-bottom: 5px; font-size: 13.5px; font-weight: 500; color: var(--sub); letter-spacing: 0; }
.price-alt { margin: 6px 0 0; font-size: 13px; color: var(--faint); }
.plan .early { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: 13px; line-height: 1.5; }
.plan ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line2); display: grid; gap: 8px; font-size: 14.5px; }
.plan li { display: flex; gap: 8px; line-height: 1.45; }
.plan li::before {
  content: ""; width: 15px; height: 15px; margin-top: 3px; flex: none; background: var(--good);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6c1.3 1 2.4 2.2 3.3 3.6C7.6 8.4 10 5.2 13.6 2.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6c1.3 1 2.4 2.2 3.3 3.6C7.6 8.4 10 5.2 13.6 2.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.student {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; align-items: center;
  margin-top: 24px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--r-card);
}
.student .anno { font-size: 22px; }
.student h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.student p { margin: 0; font-size: 15px; color: var(--sub); }
.plan-notes { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: var(--faint); }

/* ── 요금제 v2(09-25) — 네 장 · 가입 기념 띠 · 한눈에 비교 · Enterprise 한 줄 ─────────── */
.plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plans.four .plan { padding: 26px 20px; }
.plans.four .price .amt { font-size: 30px; }
.promo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 28px;
  margin: 0 0 32px; padding: 22px 28px; border-radius: var(--r-card);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}
.promo .promo-k { margin: 0; font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.promo h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.promo p { margin: 0; font-size: 15px; color: var(--sub); }
.compare-wrap { margin-top: 48px; }
.compare-wrap > h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; }
.compare-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.compare col.lab { width: 28%; }
.compare th, .compare td { padding: 11px 8px; text-align: center; border-top: 1px solid var(--line2); }
.compare thead th { border-top: 0; padding-top: 18px; font-size: 16px; font-weight: 700; }
.compare thead th span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--faint); }
.compare tbody th { padding-left: 20px; text-align: left; font-weight: 500; color: var(--sub); }
.compare tr.grp th { padding: 18px 20px 6px; font-size: 12.5px; font-weight: 700; color: var(--faint); border-top: 0; }
.compare .pick { background: var(--accent-soft); }
.compare thead th.pick { box-shadow: inset 0 -2px 0 var(--accent); }
.compare td.yes { color: var(--accent); font-weight: 700; }
.compare td.no { color: var(--faint); }
.ent {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 24px; padding: 22px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel);
}
.ent h2 { margin: 0; font-size: 18px; font-weight: 700; }
.ent p { margin: 2px 0 0; font-size: 14.5px; color: var(--sub); }
@media (max-width: 1024px) { .plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .promo { grid-template-columns: 1fr; padding: 20px; } }
@media (max-width: 600px) { .plans.four { grid-template-columns: 1fr; } .ent { padding: 20px; } }

/* ── 푸터 ───────────────────────────────────────── */
.foot { border-top: 1px solid var(--line2); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 32px 48px; font-size: 13.5px; color: var(--faint); }
.foot-in .wordmark { width: 72px; height: 22px; opacity: 0.85; color: var(--sub); }
.foot-in nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-in nav a:hover { color: var(--ink); }
.foot-in .copy { margin-left: auto; }

/* ── 반응형 ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .a-hero { display: none; }
  .bp { gap: 32px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-habit, .c-study { grid-column: span 2; }
  .c-wake, .c-book { grid-column: span 1; }
  .dl { grid-template-columns: 1fr; }
  .pf.wide, .pf.narrow { grid-column: auto; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .sec { padding-block: 64px; }
  .hero { padding-block: 16px 48px; }
  .hero-in { grid-template-columns: 1fr; gap: 8px; }
  .hello { margin-left: -6px; }
  .hello-replay { right: 0; top: -4px; font-size: 25px; }
  .hero-shot { padding-top: 32px; }
  .hero-shot .taped { width: min(240px, 70%); }
  .binder { grid-template-columns: 1fr; margin-top: 32px; }
  .tabs { order: -1; flex-direction: row; gap: 4px; padding: 0 0 0 16px; margin: 0 0 -1px; overflow-x: auto; scrollbar-width: none; }
  .tab {
    min-width: 0; height: 44px; padding: 0 14px; flex: none;
    border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-panel) var(--r-panel) 0 0;
    transform: translateY(6px);
  }
  .tab:hover { transform: translateY(3px); }
  .tab[aria-selected="true"] { transform: none; box-shadow: none; }
  .binder-page { --mx: 36px; min-height: 0; padding: 24px 20px 32px 52px; }
  .binder-page::before { left: 8px; width: 20px; background-size: 20px 56px; background-image: radial-gradient(circle, var(--bg) 0 5px, var(--line) 5.5px 6.5px, transparent 7px); }
  .bp { grid-template-columns: 1fr; }
  .bp-visual { padding-top: 8px; }
  .bp-visual .anno { display: none; }
  .sync-in { grid-template-columns: 1fr; gap: 24px; }
  .syncdevs { gap: 20px; padding-block: 24px 4px; }
  .student { grid-template-columns: 1fr; padding: 24px; }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 18px; }
  .nav-in { gap: 16px; }
  .sound-btn .lbl { display: none; }
  .nav-cta { display: none; }
  .syncdevs { gap: 14px; }
  .hero-ctas .dlwrap { flex: 1 1 calc(50% - 5px); }
  .bento { grid-template-columns: 1fr; }
  .c-habit, .c-study, .c-wake, .c-book { grid-column: auto; }
  .cell { min-height: 0; padding: 24px; }
  .plans { grid-template-columns: 1fr; }
  .foot-in .copy { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bp.enter { animation: none; }
  .mark { transition: none; }
}

/* ── 자주 묻는 질문(index #faq) ─────────────────── */
.faq-list { max-width: 760px; margin-top: 32px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-tick); }
.faq summary h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.faq details p { margin: 0 0 20px; font-size: 16px; line-height: 1.75; color: var(--sub); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }