/* 미창친 공식 홈페이지 — «달과 숲» 다크 단일 테마.
   토큰은 planner-app/app/globals.css(2026-08-18 James 확정)의 값을 그대로 옮겼다.
   ⚠️ 새 색을 만들지 않는다. 순백(#fff)을 쓰지 않는다. 액션 위 글씨는 달빛(--moon). */

:root {
  color-scheme: dark;
  --bg: #080b09;          /* 밤 */
  --panel: #131a15;       /* 카드 */
  --panel2: #1c261f;      /* 선택·강조 */
  --border: #26332a;
  --hover: #1a231c;
  --fg: #e9ede7;
  --fg-soft: #c0c9bf;
  --fg-mute: #929c92;
  --fg-faint: #7e877e;
  --forest: #22704f;      /* 주 액션 */
  --forest-600: #1a5b40;
  --deep: #0f3626;        /* 밤 패널 */
  --deep-900: #0a2419;
  --leaf: #6bbf92;        /* 초록 글씨는 여기부터 */
  --moon: #f0e6cd;        /* 브랜드 포인트 · 액션 위 글씨 */
  --ok: #57c98c;
  --caution: #d9b86a;

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mark: "MC Wordmark", var(--sans);

  --r: 14px;              /* 모서리 체계: 카드 14 · 버튼 pill · 폰 22 */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --max: 1160px;

  /* 서가 — 앱 globals.css(다크)의 값을 그대로 옮겼다 */
  --shelf-1: #2a3a31;                                 /* 판의 윗면 */
  --shelf-2: #141b17;                                 /* 판의 아랫면 */
  --shelf-edge: #101713;                              /* 판 아래 그림자 턱 */
  --shelf-cast: 0 6px 14px -6px rgb(0 0 0 / 0.9);     /* 판이 드리우는 그림자 */
  --book-cast: 0 10px 18px -10px rgb(0 0 0 / 0.9);    /* 책 한 권이 드리우는 그림자 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* 🔴 한국어는 어절 안에서 줄이 갈리면 안 된다 — keep-all이 없으면
     「오늘 앉아 있던 시간 / 을 재고」처럼 조사만 다음 줄로 떨어진다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 4px;
}
::selection { background: var(--forest); color: var(--moon); }

.wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 720px); margin-inline: auto; }

/* ── 상단바 (WhatsApp 구조: 로고 · 기능 드롭다운+링크 · 로그인 · 다운로드) ── */
.nav { position: sticky; top: 0; z-index: 20; height: 72px; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--moon); flex: none; }
.brand img { width: 28px; height: 28px; }
.brand .en { font-family: var(--mark); font-weight: 400; letter-spacing: .06em; font-size: 16px; line-height: 1; }
.nav-main { display: flex; align-items: center; gap: 1.6rem; font-size: 15px; color: var(--fg-soft); font-weight: 500; flex: 1; }
.nav-main > a:hover, .menu summary:hover { color: var(--fg); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu[open] summary::after { transform: translateY(1px) rotate(225deg); }
.menu-panel { position: absolute; top: calc(100% + 14px); left: -12px; min-width: 200px; padding: .5rem; border-radius: var(--r); background: var(--panel); border: 1px solid var(--border); display: grid; box-shadow: 0 12px 40px rgb(0 0 0 / .5); }
.menu-panel a { padding: .6rem .8rem; border-radius: 8px; color: var(--fg-soft); font-size: 15px; }
.menu-panel a:hover { background: var(--hover); color: var(--fg); }
.nav-right { display: flex; align-items: center; gap: 1.25rem; flex: none; }
.nav-right .login { font-size: 15px; font-weight: 600; color: var(--fg); }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; margin-left: auto; padding: 8px; }
.nav-toggle span { display: block; height: 2px; background: var(--fg); border-radius: 2px; }
.mnav { display: grid; padding: .5rem 1.25rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.mnav a { padding: .8rem 0; border-bottom: 1px solid var(--border); color: var(--fg-soft); font-size: 16px; }
.mnav a:last-child { border: 0; color: var(--fg); font-weight: 600; }
@media (max-width: 960px) {
  .nav-main, .nav-right .login { display: none; }
  .nav .wrap { gap: 1rem; }
  .nav-right { margin-left: auto; }
  .nav-toggle { display: flex; margin-left: 0; }
}

/* ── 버튼 (pill 하나) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: 48px; padding: 0 1.4rem; border-radius: 999px; font-weight: 600; font-size: 15.5px; white-space: nowrap; border: 1px solid transparent; transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-lg { height: 56px; padding: 0 1.8rem; font-size: 17px; }
.btn-primary { background: var(--forest); color: var(--moon); }
.btn-primary:hover { background: var(--forest-600); }
.btn-ghost { background: transparent; color: var(--fg); border-color: #3a4a3f; }
.btn-ghost:hover { background: var(--hover); }
.nav .btn { height: 40px; padding: 0 1.1rem; font-size: 14.5px; }
.ic { width: 18px; height: 18px; flex: none; }
.link { color: var(--leaf); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.link::after { content: "→"; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.fine { color: var(--fg-mute); font-size: .9rem; margin: .9rem 0 0; }
.fine a { color: var(--fg-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ── 히어로: 글 왼쪽 · 큰 둥근 이미지 오른쪽 ── */
.hero { padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 4rem); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 1.2rem; text-wrap: balance; }
.hero .lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--fg-soft); margin: 0 0 1.75rem; max-width: 30em; }
.hero-img { margin: 0; }
/* ── 공통 섹션 ── */
.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.18; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 1rem; text-wrap: balance; }
.split-text p, .full-text p { color: var(--fg-soft); font-size: clamp(1rem, 1.25vw, 1.15rem); max-width: 36em; margin: 0 0 1.5rem; }
.tag { color: var(--leaf) !important; font-weight: 700 !important; font-size: .95rem !important; margin: 0 0 .6rem !important; }

/* 카드 셋 (가로 스냅) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 1.1rem 0 .4rem; }
.card p { color: var(--fg-soft); margin: 0; }
.dl-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2.5rem; }
.dl-row .fine { margin: 0; }

/* 좌우 분할 */
.split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.split.alt .split-text { order: 2; }
.split-img { margin: 0; }
@media (max-width: 860px) { .split .wrap { grid-template-columns: 1fr; } .split.alt .split-text { order: 0; } }

/* 전폭 이미지 + 위 글 */
.full-text { max-width: 44rem; margin-bottom: 2rem; }
.full-img { margin: 0; }
.about { text-align: left; }
.about .ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

/* 타일 셋 */
.tiles { display: grid; grid-template-columns: 4fr 3fr 3fr; gap: 1.25rem; margin-bottom: 2.5rem; align-items: stretch; }
.tiles img { height: 100%; object-fit: cover; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr 1fr; } .tiles img:first-child { grid-column: 1 / -1; } }

/* 마무리 */
.closing { text-align: center; padding-top: 1rem; }
.closing .fine { margin-top: 1rem; }

/* ── 푸터: 소셜 · 4열 · 바닥줄 ── */
.footer { border-top: 1px solid var(--border); padding: 3rem 0 2.5rem; color: var(--fg-mute); font-size: .95rem; }
.social { display: flex; gap: 1.25rem; margin-bottom: 2.5rem; }
.social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-soft); }
.social a:hover { color: var(--moon); border-color: #3a4a3f; }
.cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); }
.cols h4 { margin: 0 0 .9rem; color: var(--fg); font-size: 1rem; font-weight: 700; }
.cols a, .cols .soon { display: block; padding: .3rem 0; color: var(--fg-mute); }
.cols a:hover { color: var(--fg); }
.cols .soon { color: var(--fg-faint); }
.bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: .9rem; }
.bottom nav { display: flex; gap: 1.25rem; }
.bottom a:hover { color: var(--fg); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr 1fr; } }

/* ── 문서 페이지 (약관·방침·지원) ─────────────────────── */
.doc { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 6rem); }
.doc h1 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); letter-spacing: -0.02em; margin: 0 0 .35rem; font-weight: 700; }
.doc .updated { color: var(--fg-mute); margin: 0 0 2.25rem; font-size: .95rem; }
.doc h2 { font-size: 1.15rem; margin: 2.25rem 0 .6rem; font-weight: 700; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--fg-soft); }
.doc p { margin: 0 0 .85rem; }
.doc ul { margin: 0 0 .85rem; padding-left: 1.2rem; }
.doc li { margin: .3rem 0; }
.doc b { color: var(--fg); font-weight: 600; }
.doc a { color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: .5rem 0 1rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .6rem .75rem .6rem 0; }
.doc th { color: var(--fg-mute); font-weight: 600; font-size: .85rem; border-bottom: 1px solid var(--border); }
.doc td { color: var(--fg-soft); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.doc tr:last-child td { border-bottom: 0; }
.doc .table-wrap { overflow-x: auto; }
.doc .lead { font-size: 1.08rem; color: var(--fg-soft); }
.doc details { border-top: 1px solid var(--border); }
.doc details:last-of-type { border-bottom: 1px solid var(--border); }
.doc summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--fg); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: "+"; color: var(--fg-mute); font-weight: 400; flex: none; }
.doc details[open] summary::after { content: "−"; }
.doc details p, .doc details ul { padding-bottom: .5rem; }
.doc .back { display: inline-flex; gap: .4rem; align-items: center; color: var(--fg-mute); margin-bottom: 1.5rem; font-size: .92rem; }
.doc .back:hover { color: var(--fg); }
.doc .contact-box { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); }
.doc .contact-box p { margin: 0; }
.doc .contact-box .mail { font-size: 1.2rem; font-weight: 600; margin-top: .25rem; }

/* ── 스크롤 등장 (동기: 위계 — 읽는 순서대로 드러낸다) ─── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .channel { transition: none; }
}

/* 아이콘 (simple-icons, currentColor) */
.ic { width: 18px; height: 18px; flex: none; }
.btn-disabled .ic { opacity: .8; }
.channel .logo { width: 36px; height: 36px; color: var(--leaf); }
.channel:not(.deep) .logo { color: var(--moon); }
.br { display: none; }
@media (min-width: 861px) { .br { display: block; height: 0; } }
.soc { width: 22px; height: 22px; }
.mnav[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════
   앱 자산으로 그리는 화면 (2026-09-04)
   🔴 앱 스크린샷을 쓰지 않는다. 대신 앱이 실제로 쓰는 것을 쓴다 —
      모노라인 아이콘 22종(stroke=currentColor라 놓인 자리 글자색을 입는다),
      public/art 일러스트, 서재 표지 29장.
   ══════════════════════════════════════════════════════════ */
.mci { display: block; stroke-width: 1.6; }

/* ── 히어로: 달 하나와 그 둘레를 도는 아이콘 ── */
.hero .wrap { align-items: center; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-art { position: relative; margin: 0; aspect-ratio: 1; width: min(100%, 440px); justify-self: center; display: grid; place-items: center; }
.hero-art .glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgb(34 112 79 / .40), rgb(240 230 205 / .06) 45%, transparent 68%); }
.hero-art .moon { position: relative; width: 42%; height: auto; filter: drop-shadow(0 10px 40px rgb(0 0 0 / .6)); }
.hero-art .orbit { position: absolute; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); color: var(--leaf); }
.hero-art .orbit .mci { width: 30px; height: 30px; }
.hero-art .o1 { top: 2%;  left: 46%; color: var(--moon); }
.hero-art .o2 { top: 20%; right: 4%; }
.hero-art .o3 { bottom: 20%; right: 2%; }
.hero-art .o4 { bottom: 2%; left: 48%; color: var(--moon); }
.hero-art .o5 { bottom: 20%; left: 2%; }
.hero-art .o6 { top: 20%; left: 4%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .orbit { animation: bob 6s ease-in-out infinite; }
  .hero-art .o2 { animation-delay: -1s; } .hero-art .o3 { animation-delay: -2s; }
  .hero-art .o4 { animation-delay: -3s; } .hero-art .o5 { animation-delay: -4s; }
  .hero-art .o6 { animation-delay: -5s; }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { order: -1; width: min(78%, 300px); justify-self: start; }
  .hero-art .orbit { width: 48px; height: 48px; }
  .hero-art .orbit .mci { width: 24px; height: 24px; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
}

/* ── 카드 셋 ── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card { padding: 1.75rem; border-radius: 20px; border: 1px solid var(--border); background: var(--panel); }
.cardicon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.25rem; color: var(--moon); background: linear-gradient(135deg, var(--deep), var(--forest)); }
.cardicon .mci { width: 28px; height: 28px; }
.cardicon.b { background: linear-gradient(135deg, #14382a, #2c6b4e); }
.cardicon.c { background: linear-gradient(135deg, #22301a, #4e6b2e); }
.card h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .5rem; }
.card p { color: var(--fg-soft); margin: 0; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

/* ── 분할: 글 + 아트 패널 ── */
.split-art { margin: 0; display: grid; place-items: center; }
.artpanel { width: min(100%, 380px); aspect-ratio: 1; border-radius: 28px; display: grid; place-items: center; gap: 8%; grid-auto-flow: column;
  background: linear-gradient(160deg, var(--deep) 0%, var(--bg) 78%); border: 1px solid var(--border); color: var(--leaf); }
.artpanel .mci { width: 38%; height: auto; }
.artpanel.duo .mci { width: 34%; }
.artpanel img { width: 46%; height: auto; }
.split.alt .artpanel { background: linear-gradient(160deg, var(--panel) 0%, var(--bg) 78%); }
.quote { color: var(--moon) !important; font-weight: 600; padding-left: 1rem; border-left: 2px solid var(--forest); }

/* 난이도·템플릿 줄 */
.levels { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .75rem; }
.levels li { display: flex; align-items: center; gap: .85rem; color: var(--fg-mute); }
.levels b { color: var(--fg); font-weight: 600; min-width: 6.5em; }
.lv { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); color: var(--leaf); }
.lv .mci { width: 22px; height: 22px; }

/* ── 분야 여덟 ── */
.fieldgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fieldgrid li { display: grid; place-items: center; gap: .7rem; padding: 1.75rem 1rem; border-radius: 18px; border: 1px solid var(--border); background: var(--panel); color: var(--leaf); transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.fieldgrid li:hover { border-color: #3a4a3f; background: var(--hover); }
.fieldgrid .mci { width: 34px; height: 34px; }
.fieldgrid b { color: var(--fg); font-weight: 600; font-size: .98rem; }
@media (max-width: 860px) { .fieldgrid { grid-template-columns: repeat(2, 1fr); } }

/* ── 서재 미리보기 줄 ── */
.peekshelf { margin-top: 2.5rem; }

.closing .closemoon { margin: 0 auto 1.25rem; }
.closing .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.channels-sec .ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ══════════════ 서재 ══════════════ */
.lib { padding-bottom: 4rem; }
.libhero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.libmark { margin: 0 auto 1rem; }
.libhero h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; font-weight: 800; margin: 0 0 .75rem; }
.libhero .lede { color: var(--fg-soft); max-width: 34em; margin: 0 auto; }
.shelf { padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--border); }
.shelfname { display: flex; align-items: center; gap: .7rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.shelfname .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.shelfn { color: var(--fg-faint); font-size: .9rem; font-weight: 500; margin-left: auto; }
/* ── 서가 — 앱 태블릿 홈의 그 선반과 같은 그림 (2026-09-04 James) ──
   🔴 책이 «판 위에» 선다. 판이 없으면 표지가 허공에 뜬 그림이 된다(앱 TabletHome 주석).
   🔴 아래가 맞고 위가 들쭉날쭉하다(`align-items: flex-end`) — 그래서 크기가 뒤죽박죽으로 보인다.
   🔴 폭·키는 빌드가 픽셀로 박아 준다(build.py `spine_size`). CSS가 늘리지 않는다 — 늘리면 흐려진다. */
.shelfrow { margin-bottom: 1.6rem; }
.spines { display: flex; align-items: flex-end; gap: 12px; }
.spine { position: relative; display: block; flex: none; overflow: hidden;
  border-radius: 3px 6px 6px 3px; box-shadow: var(--book-cast);
  transition: transform .18s var(--ease); }
.spine img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
/* 표지 종이 — 위에서 비스듬히 드는 빛, 아래로 깔리는 그늘 */
.spine::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, rgb(240 230 205 / .16), transparent 42%),
              linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .32)); }
/* 책등 — 왼쪽으로 접힌 자리 */
.spine::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 3; width: 10px; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .42), rgb(0 0 0 / .1)); }
.spine:hover { transform: translateY(-6px); }
.plank { height: 7px; border-radius: 0 0 3px 3px; background: linear-gradient(to bottom, var(--shelf-1), var(--shelf-2));
  box-shadow: var(--shelf-cast); }
.plankedge { height: 5px; margin: 0 12px; border-radius: 0 0 8px 8px; background: var(--shelf-edge); }
@media (max-width: 1140px) {
  .spines { overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .spines::-webkit-scrollbar { display: none; }
}

.chip { font-size: .82rem; font-weight: 700; letter-spacing: .01em; }

/* ── 글 화면 ── */
.post { padding: clamp(1.5rem, 4vw, 3rem) 0 4rem; }
.post .chip { display: block; margin: 0 0 .5rem; }
.post h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.3; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 1.5rem; }
.postcover { margin: 0 0 2rem; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); display: grid; place-items: center; padding: 2rem; }
.postcover img { width: min(100%, 280px); height: auto; border-radius: 10px; }
.postbody p { color: var(--fg-soft); font-size: 1.06rem; line-height: 1.95; margin: 0 0 1.4rem; }
.postbody b { color: var(--fg); font-weight: 700; }
.cutoff { position: relative; margin: 0 0 2.5rem; padding: 2rem 1.75rem; border-radius: 18px; background: linear-gradient(180deg, transparent, var(--panel) 22%); border: 1px solid var(--border); text-align: center; }
.cutoff::before { content: ""; position: absolute; left: 0; right: 0; top: -110px; height: 110px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.cutnote { color: var(--fg-mute); margin: 0 0 1.25rem; }
.cutoff .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }

.reactbar { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 2.5rem; }
.likebtn { display: inline-flex; align-items: center; gap: .5rem; height: 44px; padding: 0 1.15rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--fg-soft); font: inherit; font-weight: 600; cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease); }
.likebtn:hover { color: var(--fg); border-color: #3a4a3f; }
.likebtn.on { color: var(--moon); border-color: var(--forest); background: var(--accent-fill, #14382a); }
.likebtn.on .ic { fill: currentColor; }
.likebtn .ic { width: 20px; height: 20px; }
.likecount { font-variant-numeric: tabular-nums; }

/* ── 글 아래 이동 ── */
.btn-sm { height: 38px; padding: 0 1rem; font-size: 14px; justify-self: start; }
.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.pn { padding: 1.1rem 1.25rem; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); display: grid; gap: .3rem; font-weight: 600; letter-spacing: -0.01em; }
.pn:hover { border-color: #3a4a3f; background: var(--hover); }
.pn span { color: var(--fg-faint); font-size: .82rem; font-weight: 500; }
.pn.next { text-align: right; }
@media (max-width: 640px) { .postnav { grid-template-columns: 1fr; } .pn.next { text-align: left; } }

/* ── 블로그·유튜브 미리보기 — 한 줄에 둘씩 (2026-09-04 James) ── */
.feedgroup + .feedgroup { margin-top: clamp(2rem, 4vw, 3rem); }
.feedhead { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1.15rem; }
.feedhead .fic { flex: none; }
.feedhead .link { margin-left: auto; font-size: .9rem; font-weight: 600; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fcard { display: grid; padding: 1.1rem 1.25rem; border-radius: 16px; border: 1px solid var(--border); background: var(--panel);
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease); }
.fcard:hover { border-color: #3a4a3f; background: var(--hover); transform: translateY(-2px); }
.fbody { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.ftitle { font-weight: 600; letter-spacing: -0.015em; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fex { color: var(--fg-mute); font-size: .92rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fmeta { color: var(--fg-faint); font-size: .82rem; margin-top: .15rem; }

/* 네이버 블로그 목록의 꼴 — 글이 왼쪽, 정사각 섬네일이 오른쪽 */
.fcard.blog { grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.fthumb.sq { width: 92px; height: 92px; border-radius: 10px; overflow: hidden; flex: none; background: var(--deep); }
.fthumb.sq img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 유튜브 — 섬네일을 작게 눕힌다 */
.fcard.vid { grid-template-columns: 168px 1fr; gap: 1rem; align-items: center; }
.fthumb.wide { position: relative; display: block; width: 168px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, var(--deep), var(--bg)); }
.fthumb.wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fthumb .play { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(8 11 9 / .62); color: var(--moon); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.fcard.vid:hover .play { background: var(--forest); }
@media (max-width: 860px) { .frow { grid-template-columns: 1fr; } .fcard.vid { grid-template-columns: 132px 1fr; } .fthumb.wide { width: 132px; } .fthumb.sq { width: 76px; height: 76px; } }

/* 푸터 맨 아랫줄 — 지원·개인정보는 여기 작은 글씨로만 (2026-09-04 James) */
.bottom { color: var(--fg-faint); font-size: .82rem; }
.bottom nav { flex-wrap: wrap; gap: 1rem; }

/* ══════════════ 실제 스크린샷 액자 (2026-09-04 James: 합성 이미지 금지) ══════════════ */
.shot { display: block; width: min(100%, 290px); border-radius: 26px; overflow: hidden; border: 1px solid var(--border);
  background: var(--panel); box-shadow: 0 24px 60px rgb(0 0 0 / .45); }
.shot img { width: 100%; height: auto; display: block; }

/* ── 분야 여덟: 이제 눌러서 지문 맛보기로 간다 ── */
.fieldgrid li { padding: 0; }
.fieldgrid a, .fieldgrid .nolink { display: grid; place-items: center; gap: .55rem; padding: 1.6rem 1rem; text-align: center; color: inherit; width: 100%; box-sizing: border-box; }
.fieldgrid a span { color: var(--fg-mute); font-size: .84rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fieldgrid a:hover span { color: var(--fg-soft); }

/* ══════════════ 어휘 맛보기 ══════════════ */
.vocab-sec .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .vocab-sec .wrap { grid-template-columns: 1fr; } }
.vchips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.vchip { font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg-mute); transition: all .18s var(--ease); }
.vchip:hover { border-color: #3a4a3f; color: var(--fg); }
.vchip.on { background: var(--forest); border-color: var(--forest); color: var(--moon); }
.vpanel { display: none; padding: 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--border); background: var(--panel); }
.vpanel.on { display: block; }
.vhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; margin: 0 0 .6rem; }
.vhead b { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.vhanja { color: var(--fg-faint); font-size: .95rem; }
.vstar { color: var(--moon); font-size: .85rem; letter-spacing: .1em; }
.vex { color: var(--fg-faint); font-size: .8rem; margin-left: auto; }
.vmean { color: var(--fg-soft); margin: 0 0 1rem !important; font-size: 1rem !important; }
.vnear { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.vnear li { display: flex; align-items: baseline; gap: .6rem; font-size: .92rem; }
.vc { flex: none; width: 1.6em; height: 1.6em; border-radius: 8px; display: grid; place-items: center; background: var(--deep); color: var(--leaf); font-weight: 700; font-size: .82rem; }
.vw { color: var(--fg); font-weight: 600; }
.vg { color: var(--fg-faint); }
.vgist { color: var(--fg-mute); font-size: .94rem !important; margin: 0 0 1rem !important; padding-left: .9rem; border-left: 2px solid var(--border); }
.vnote { position: relative; padding: 1rem 1.1rem; border-radius: 14px; background: var(--deep); border: 1px solid #1a4a35; }
.vnote p { color: var(--fg-soft); font-size: .95rem !important; margin: 0 !important; line-height: 1.8; }
.vnote b { color: var(--fg); }
.rwho { display: block; color: var(--leaf); font-size: .8rem; font-weight: 700; margin-bottom: .5rem; }
.vfade { color: var(--fg-faint); }
.vlock { margin-top: .8rem !important; color: var(--fg-faint) !important; font-size: .88rem !important; }
.vlock a { color: var(--leaf); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════ 지문 맛보기 (/read/…) ══════════════ */
.readpv .back { display: inline-block; color: var(--fg-mute); font-size: .9rem; margin-bottom: 1.5rem; }
.readpv .back:hover { color: var(--fg); }
.rsrc { color: var(--fg-faint); font-size: .88rem; margin: -1rem 0 1.5rem; }
.rlede { color: var(--fg-mute); background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem 1.25rem; margin: 0 0 2.5rem; line-height: 1.8; }
.rlede b { color: var(--fg); }
.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.rstep { padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.rstep:last-child { border-bottom: 0; }
.rn { color: var(--leaf); font-size: .82rem; font-weight: 700; margin: 0 0 .6rem; }
.rtext { color: var(--fg); font-size: 1.08rem; line-height: 2; margin: 0 0 1.25rem; }
.mk-u { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--leaf); }
.mk-hl { background: rgb(94 138 108 / .28); border-radius: 4px; padding: 0 .15em; }
.mk-box { border: 1px solid var(--leaf); border-radius: 6px; padding: 0 .3em; }
.mk-ct { color: var(--caution); font-weight: 700; }
.mk-ar { color: var(--moon); font-weight: 700; }
.rq { padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); margin-bottom: 1.1rem; }
.rq p { color: var(--fg-soft); margin: 0; line-height: 1.8; }
.rq b { color: var(--fg); }
.rqlabel { display: block; color: var(--fg-faint); font-size: .8rem; font-weight: 700; margin-bottom: .5rem; }
.ropts { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; counter-reset: o; }
.ropts li { counter-increment: o; color: var(--fg-mute); font-size: .95rem; padding-left: 1.8rem; position: relative; line-height: 1.7; }
.ropts li::before { content: counter(o); position: absolute; left: 0; top: .1em; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-size: .72rem; }
.rthink { padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--deep); border: 1px solid #1a4a35; }
.rthink p { color: var(--fg-soft); margin: 0 0 .8rem; line-height: 1.85; }
.rthink p:last-child { margin-bottom: 0; }
.rthink b { color: var(--fg); }
.rthink blockquote { margin: 0 0 .8rem; padding-left: 1rem; border-left: 2px solid var(--forest); color: var(--moon); font-weight: 600; }
.rstep.cut { position: relative; }
.rstep.cut .rthink { position: relative; max-height: 5.5rem; overflow: hidden; }
.rstep.cut .rthink::after { content: ""; position: absolute; inset: auto 0 0; height: 3.5rem; background: linear-gradient(180deg, transparent, var(--bg)); }
.fieldnav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.fieldnav a { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--fg-mute); font-size: .92rem; font-weight: 600; }
.fieldnav a:hover { border-color: #3a4a3f; color: var(--fg); background: var(--hover); }

/* 표지는 원본이 224px다. 늘리면 흐려진다 (2026-09-04 James) */
.postcover img { width: min(100%, 224px); }
@media (max-width: 860px) { .shot { width: min(100%, 240px); } }

/* ── 지문 훈련 맛보기: 한 번에 한 문장 (2026-09-04 James) ── */
.rprog { color: var(--fg-faint); font-size: .82rem; font-weight: 700; letter-spacing: .02em; margin: 0 0 1.25rem; }
.ropts li { padding-left: 0; }
.ropts li::before { content: none; }
.ropt { display: block; width: 100%; text-align: left; font: inherit; font-size: .95rem; line-height: 1.7; cursor: pointer;
  color: var(--fg-soft); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: .7rem 1rem .7rem 2.6rem;
  position: relative; transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease); }
.ropts { counter-reset: o; }
.ropts li { counter-increment: o; }
.ropt::before { content: counter(o); position: absolute; left: .85rem; top: .78rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 1px solid var(--border); display: grid; place-items: center; font-size: .72rem; color: var(--fg-faint); }
.ropt:hover:not(:disabled) { border-color: #3a4a3f; background: var(--hover); color: var(--fg); }
.ropt.ok { border-color: var(--forest); background: var(--deep); color: var(--fg); }
.ropt.ok::before { border-color: var(--leaf); color: var(--leaf); }
.ropt.no { opacity: .55; border-style: dashed; }
.ropt:disabled { cursor: default; }
.rback[hidden] { display: none; }
.rback { display: block; color: var(--caution); font-size: .88rem; line-height: 1.7; margin: .45rem 0 0 2.6rem; }
.rback b { color: var(--caution); font-weight: 700; }
.rwrite { display: grid; gap: .6rem; margin-top: .9rem; }
.rwrite textarea { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  color: var(--fg); font: inherit; padding: .75rem 1rem; resize: vertical; }
.rwrite textarea::placeholder { color: var(--fg-faint); }
.rwrite textarea:focus { outline: 2px solid var(--leaf); outline-offset: 2px; }
.rwrite textarea.need { border-color: var(--caution); }
.rwrite .btn { justify-self: start; }
.rnext { margin-top: 1.1rem; }
.rstep.done .rq { opacity: .85; }

/* 좁은 화면에서는 책을 한 뼘 줄인다 — 인라인 픽셀을 «키»로만 덮고 폭은 그림 비율이 정한다 */
@media (max-width: 640px) {
  .spine { height: 132px !important; width: auto !important; }
  .spine img { width: auto; height: 100%; }
}

/* ── 흐르는 선반 (2026-09-05 James: 「계속해서 옆으로 움직이는 모션을」) ──
   🔴 오른쪽에서 왼쪽으로 미끄러진다(2026-09-05 James — 후기 줄과 같은 방향). 두 벌을 깔고 «절반»만 밀어서 이어 붙는 자리를 감춘다.
   ⚠️ 움직임을 싫어하는 설정에서는 멈춰 세운다 — 자동으로 도는 것은 멀미의 흔한 원인이다. */
.marquee { overflow: hidden; }
.marquee .track { display: flex; width: max-content; animation: shelf-drift 72s linear infinite; }
.marquee .set { display: flex; align-items: flex-end; gap: 12px; padding-right: 12px; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes shelf-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }

/* ── 쓰는 사람들의 말 — 오른쪽에서 왼쪽으로 흐른다 (2026-09-05 James) ──
   선반과 같은 규칙이고 방향도 같다: 같은 묶음을 두 벌 깔고 절반만 민다. 한 벌 끝에도 간격을 준다. */
.rvflow { overflow: hidden; margin-inline: calc(50% - 50vw); padding-inline: max(1.25rem, calc(50vw - var(--max) / 2)); }
.rvtrack { display: flex; width: max-content; animation: rv-drift 80s linear infinite; }
.rvset { display: flex; align-items: stretch; gap: 1.25rem; padding-right: 1.25rem; }
.rvflow:hover .rvtrack { animation-play-state: paused; }
@keyframes rv-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rvtrack { animation: none; } }

.rv { flex: none; width: 340px; display: flex; flex-direction: column; padding: 1.5rem 1.6rem; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--border); }
.rv.big { background: linear-gradient(160deg, var(--deep), var(--panel) 78%); border-color: #1a4a35; }
.rv blockquote { margin: 0 0 1.1rem; color: var(--fg-soft); font-size: .98rem; line-height: 1.85; flex: 1; }
.rv.big blockquote { color: var(--fg); }
.rv blockquote::before { content: "\201C"; display: block; color: var(--leaf); font-size: 2rem; line-height: 1; margin-bottom: .3rem; }
.rv figcaption { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.rvwho { color: var(--fg); font-weight: 700; font-size: .95rem; }
.rvsrc { color: var(--fg-faint); font-size: .84rem; }
@media (max-width: 640px) { .rv { width: 280px; } }

/* ══════════════════════════════════════════════════════════
   좁은 화면 다듬기 (2026-09-06 James: 「모바일로 보면 어색하다」)
   🔴 새 색·새 글꼴 크기를 만들지 않는다. 데스크탑 그림은 건드리지 않는다 —
      여기 있는 것은 전부 좁은 화면에서만 도는 규칙이다.
   ══════════════════════════════════════════════════════════ */

/* 상단바가 72px 붙어 있어서 #room·#vocab2로 뛰면 제목이 그 아래로 숨었다 */
html { scroll-padding-top: 88px; }

@media (max-width: 860px) {
  /* 히어로 — 달을 먼저 보여 주면 첫 화면이 그림뿐이다. 제목·설명·버튼이 먼저 오고 달이 뒤에 선다.
     (whatsapp.com 모바일도 제목이 먼저다 — 이 사이트가 따라간 구조) */
  .hero-art { order: 0; width: min(66%, 280px); justify-self: center; }

  /* 버튼 — 폭이 다른 알약 둘(197px·164px)이 왼쪽에 어긋나 쌓여 있었다. 한 줄에 하나, 꽉 차게. */
  .hero .ctas, .closing .ctas, .about .ctas, .cutoff .ctas, .channels-sec .ctas {
    display: grid; gap: .7rem; grid-template-columns: minmax(0, 420px); }
  .closing .ctas, .cutoff .ctas { justify-content: center; }

  /* 난이도·템플릿 줄 — 이름 칸이 6.5em(104px)으로 못 박혀 설명이 180px에 갇혀 두 줄로 접혔다 */
  .levels li { gap: .7rem; align-items: center; }
  .levels b { min-width: 0; }

  /* 앱 화면 — 240px면 화면 안 글자가 안 읽힌다 */
  .shot { width: min(100%, 280px); }

  /* 일지 아트 — 380 정사각 안에 그림이 46%라 빈 칸이 그림보다 넓었다 */
  .artpanel { width: min(100%, 320px); }
  .artpanel img { width: 54%; }
}

@media (max-width: 560px) {
  /* 유튜브 카드 — 섬네일 132 + 글 132로 갈려 제목이 두 줄에서 잘렸다. 섬네일을 위로 올린다. */
  .fcard.vid { grid-template-columns: 1fr; gap: .85rem; }
  .fthumb.wide { width: 100%; }
}