/* StickyWord 官网样式
 *
 * 出处是设计稿 `file/WebsiteHome.html`（artifact 打包格式，第 381 行的 template
 * 就是这份 CSS 的原文）。三段照抄：base / 首页 / 文档页 —— 除了下面标了「新增」
 * 的几块，都不要改，改了就和 app 里的纸质感对不上。
 *
 * 色值与 app 的 Pastel 调色板同源（DESIGN_SPEC §2.1）：
 *   --y 便签黄 · --p 莓红 · --g 薄荷 · --b 空色 · --gold 强调金
 */

*{box-sizing:border-box}

:root{
  --paper:#F6F1E6;--ink:#241E17;--ink2:#5A4A38;--mut:#7C654A;--gold:#C39F2C;
  --y:#FEEC9F;--p:#FBD0D9;--g:#CFEBD8;--b:#CFE3F7;--line:rgba(42,34,24,.24)
}

html{scroll-behavior:smooth}
/* 🔴 新增（2026-08-27）：ベトナム語のページだけ本文フォントを系統フォントへ。
 *
 * Zen Maru Gothic は**声調付きラテンをまともに持っていない** —— ベースの
 * `a e o u` は持っているのでフォールバックが起きず、`số` が `sô´`、`về` が
 * ``vê` `` のように記号だけ右へずれて出る（headless Chrome で実測）。
 * アプリ側で D-90 が「ベトナム語は同梱フォントに載せず系統フォント」と決めたのと
 * 同じ理由・同じ結論。
 *
 * ⚠️ 見出しの Shippori Mincho は**触らない** —— ベトナム語サブセットを持っていて
 * 正しく組める（実測）。ここを一緒に外すと、その言語だけ見出しの表情が変わる。
 * ⚠️ 韓国語も触らない —— Zen Maru Gothic にハングルは 1 字も無いので、
 * ブラウザが素直に系統フォントへ落とす（＝混ざらない）。 */
html[lang="vi"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Zen Maru Gothic',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.75}
/* 方格纸背景 —— app 里 `Modifier.gridBackdrop()` 的网页版 */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(90,120,150,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(90,120,150,.05) 1px,transparent 1px);background-size:30px 30px}
main,header,footer{position:relative;z-index:1}
/* height:auto は必須 —— <img> の width/height 属性は CSS の presentational hint に
   なるので、これが無いと属性の 1800px がそのまま高さになって縦に伸びる。
   属性自体は残す（アスペクト比が先に分かるとレイアウトがガタつかない）。 */
img{max-width:100%;display:block;height:auto}
a{color:#8A6E1C}
a:hover{color:var(--gold)}
.mincho{font-family:'Shippori Mincho','Songti SC','Noto Serif JP',serif;font-weight:700}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;letter-spacing:1.6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#2A2218;color:var(--paper);padding:10px 16px;border-radius:4px;z-index:9}

/* ── ヘッダー ── */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .ic{width:40px;height:40px;position:relative;flex:0 0 40px}
.brand .ic i{position:absolute;border-radius:4px;box-shadow:0 3px 8px rgba(50,30,10,.16);font-style:normal}
.brand b{font-family:'Shippori Mincho','Songti SC',serif;font-size:20px;letter-spacing:.5px}
.navlinks{display:flex;gap:24px;align-items:center;font-size:14px;flex-wrap:wrap}
.navlinks a{text-decoration:none;color:var(--ink2)}
.navlinks a:hover{color:var(--gold)}

/* 新增：狭い画面のヘッダー。
   `.navlinks` はリンク 4 本 + 言語切替 + CTA で 390px には収まらず、
   `.nav` の子として max-content のまま置かれるとページ全体が横に溢れる
   （本文まで右端で切れる）。1 行まるごと使わせて内部で折り返させる。 */
@media(max-width:640px){
  .nav{gap:14px;padding:20px 0}
  .navlinks{flex:1 1 100%;gap:16px;font-size:13.5px}
  .navlinks .btn{margin-left:auto}
}

.btn{display:inline-flex;align-items:center;gap:8px;background:#2A2218;color:var(--paper);text-decoration:none;padding:13px 22px;border-radius:5px;font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:15px;box-shadow:0 8px 20px rgba(42,34,24,.22)}
.btn:hover{color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1.6px dashed var(--line);box-shadow:none}
/* 新增（2026-09-30）：商店下载按钮。上架前是虚线的 `.btn.soon` 占位，已随上架删除。
 * 小字固定用英文官方措辞（Download on the / GET IT ON），五语页面一致 ——
 * 与两家官方徽章的英文版同一套说法，不随页面语言翻译。
 * Google Play 的三角用 app 的四色便签（--b/--g/--y/--p）拼，不用官方的饱和色。 */
.btn.store{gap:14px;padding:12px 26px 12px 20px;border-radius:10px;font-family:'Zen Maru Gothic',system-ui,sans-serif;font-size:20px;line-height:1.15;min-width:190px}
.btn.store svg{width:26px;height:26px;flex:none}
.btn.store span{display:flex;flex-direction:column}
/* color:inherit 必须写 —— 全站的 `small{color:var(--mut)}` 会把小字染成褐色，在深底上几乎看不见 */
.btn.store small{color:inherit;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:10.5px;letter-spacing:2px;opacity:.72;margin-bottom:2px}

/* 新增（2026-09-30）：页尾下载区的两张二维码卡片。
 * 二维码是 `assets/img/qr-{ios,android}.svg` —— 静态生成（segno，纠错 M，无留白），
 * 不在页面里跑 JS 库。⚠️ 商店 URL 改了要**重新生成这两张图**，只改 href 的话
 * 按钮和二维码会指向两个地方，而肉眼看不出二维码里写的是什么。
 * 留白（quiet zone）由 `.qrcode` 的白底 padding 提供，别把 padding 压到 12px 以下。 */
.qrpair{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:40px}
.qrcard{position:relative;background:#FFFDF6;border-radius:4px;padding:44px 32px 34px;width:320px;max-width:100%;box-shadow:0 10px 26px rgba(50,30,10,.14);display:flex;flex-direction:column;align-items:center;gap:20px}
.qrcard.ios{transform:rotate(-1deg)}
.qrcard.android{transform:rotate(.8deg)}
/* 胶带：与 .tape 同一个剪影，颜色取卡片对应的便签色 */
.qrcard::before{content:"";position:absolute;top:-14px;left:50%;width:130px;height:30px;transform:translateX(-50%) rotate(-3deg);clip-path:polygon(1% 8%,99% 0,100% 90%,0 100%);opacity:.9}
.qrcard.ios::before{background:var(--b)}
.qrcard.android::before{background:var(--g);transform:translateX(-50%) rotate(2deg)}
.qrcode{background:#fff;padding:16px;border:1.6px dashed var(--line);border-radius:3px}
.qrcode img{width:170px;height:170px}
.callout .qrlabel{margin:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:12px;letter-spacing:4px;color:var(--mut)}
.qror{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:12px;letter-spacing:4px;color:#5A4308}
@media(max-width:720px){
  .qrpair{flex-direction:column;gap:22px}
  .qrcard{width:100%;max-width:320px}
}

.tape{display:inline-block;position:relative}
.tape i{position:absolute;inset:-9px -18px;clip-path:polygon(1% 8%,99% 0,100% 90%,0 100%)}
.tape span{position:relative;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:12px;letter-spacing:5px;color:#5A4308}
.dash{border:0;border-top:1.6px dashed var(--line);margin:0}

h1.hero{font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:clamp(34px,5.4vw,62px);line-height:1.28;letter-spacing:-.5px;margin:26px 0 0}
h2.sec{font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.35;margin:0 0 10px}
h3{font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:19px;margin:0 0 8px}
p.lead{font-size:17px;color:var(--ink2);margin:18px 0 0}
p{color:var(--ink2)}
small,.small{font-size:13px;color:var(--mut)}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.note{background:#FFFDF7;border-radius:6px;padding:24px;box-shadow:0 8px 20px rgba(50,30,10,.10)}
.note p{margin:6px 0 0;font-size:14.5px}
.note .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:2px;color:var(--mut)}

/* ── 首页 ── */
.hero{padding-top:40px}
.herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media(max-width:860px){.herogrid{grid-template-columns:1fr}}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.stack{position:relative;width:100%;padding-bottom:152%}
.stack img{position:absolute;width:78%;border-radius:32px;box-shadow:0 40px 80px rgba(50,30,10,.22),0 10px 26px rgba(50,30,10,.14)}
.stack img.a{left:5%;top:6%;transform:rotate(-4deg);width:52%}
.stack img.b{right:5%;top:0;transform:rotate(4deg);width:52%}
.stack img.c{left:22%;top:15%;width:56%;z-index:2}

.band{margin:96px 0;padding:46px 0;background:#FFFDF7;box-shadow:0 8px 26px rgba(50,30,10,.08)}
.stats{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between}
.stat .k{font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:38px;line-height:1}
.stat .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:2px;color:var(--mut);margin-top:8px}

.feat{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;margin:78px 0}
.feat.rev{grid-template-columns:1.1fr .9fr}
.feat.rev .txt{order:2}
@media(max-width:860px){.feat,.feat.rev{grid-template-columns:1fr}.feat.rev .txt{order:0}}
.shot{border-radius:26px;box-shadow:0 30px 60px rgba(50,30,10,.18);margin:0 auto;max-width:340px}
/* 新增：阶梯间隔那一行小票据（复习节奏是本作的核心，值得看得见） */
.ladder{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:0;list-style:none}
.ladder li{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:1px;color:#5A4308;background:var(--y);border-radius:3px;padding:5px 9px}

.plan{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
@media(max-width:700px){.plan{grid-template-columns:1fr}}
.price{font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:32px;margin:8px 0 0}
.plan ul{margin:10px 0 0;padding-left:18px;font-size:14.5px;color:var(--ink2)}
.plan li{margin-bottom:5px}
.plan .note[data-plus] li{color:#5A4308}

.faq{border-top:1.6px dashed var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:12px 0 0;font-size:15px}

.callout{background:var(--y);border-radius:6px;padding:20px 24px;box-shadow:0 8px 20px rgba(50,30,10,.12)}
.callout p{color:#5A4308;margin:0;font-size:14.5px}

/* ── 文档页（プライバシー / 利用規約） ── */
/* 縦方向だけを指定する。`padding` の一括指定は使わないこと ——
   この要素は `class="wrap narrow doc"` で、左右 28px は `.wrap` が持っている。
   一括指定を書くと後勝ちで左右が 0 に潰れ、本文が画面端に貼り付く。
   PC では max-width:760px で中央寄せされるため気づかず、スマホでだけ露見する。 */
.doc{padding-top:10px;padding-bottom:90px}
.doc h1{font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.3;margin:26px 0 0}
.doc h2{font-family:'Shippori Mincho','Songti SC',serif;font-weight:700;font-size:22px;margin:44px 0 10px;scroll-margin-top:24px}
.doc h2 .num{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:13px;letter-spacing:2px;color:var(--gold);display:block;margin-bottom:6px}
.doc h3{font-size:17px;margin:26px 0 6px}
.doc p,.doc li{font-size:15.5px}
.doc ul{padding-left:20px}
.doc li{margin-bottom:7px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:14.5px;color:var(--ink2)}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1.6px dashed var(--line)}
.doc th{color:var(--ink);font-weight:700}
.tablewrap{overflow-x:auto}
.toc{background:#FFFDF7;border-radius:6px;padding:22px 26px;box-shadow:0 8px 20px rgba(50,30,10,.10)}
.toc ol{margin:10px 0 0;padding-left:20px;font-size:14.5px}
.toc li{margin-bottom:5px}
.toc a{text-decoration:none}
.updated{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:2px;color:var(--mut);margin-top:14px}

footer{border-top:1.6px dashed var(--line);margin-top:20px;padding:34px 0 46px}
.foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--mut)}
.foot a{color:var(--mut);text-decoration:none;margin-right:18px}
.foot a:hover{color:var(--gold)}

/* 新增：言語切替（2026-08-27 に作り直し）。
 *
 * 🔴 **`.navlinks` の中には置かない。** 「機能 / プラン / プライバシーポリシー」は
 * サイトの中身へ連れて行くリンクで、言語切替は**今見ているページの表示を変える操作** ——
 * 性質が違うものを同じ列に並べると、どれもただのリンクに見える。
 * ヘッダーの上に専用の帯（`.utility`）を作り、そこにこれだけを置く。
 * （5 言語になってインライン列挙が長すぎる、という実務上の理由もある。）
 *
 * JS なしの `<details>` 開閉。外側クリックでは閉じないが、
 * もう一度サマリーを押せば閉じる／リンクを踏めばページごと変わるので実害はない。
 * このサイトはスクリプトを 1 行も持たない方針（README「純静的」）。 */
/* ⚠️ `position:relative` + z-index は両方とも要る。
 *  ① 方眼紙の背景（body::before）は position:fixed なので、位置指定のない
 *     ブロックより上に描かれる —— main / header / footer と同じく前に出す。
 *  ② その z-index は header（= 1）より大きくないと、開いたメニューが
 *     ヘッダーの下に潜る（`.utility` は DOM 上ヘッダーより前にあるため）。 */
.utility{display:flex;justify-content:flex-end;padding-top:14px;position:relative;z-index:21}
.langpick{position:relative;font-size:13px}
.langpick>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  color:var(--ink2);background:rgba(255,255,255,.4);border:1.4px dashed var(--line);
  border-radius:999px;padding:5px 13px}
.langpick>summary::-webkit-details-marker{display:none}
.langpick>summary:hover{color:var(--gold)}
.langpick>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.langpick .globe{width:14px;height:14px;flex:0 0 14px;opacity:.75}
.langpick .chev{width:9px;height:9px;flex:0 0 9px;opacity:.6;transition:transform .15s}
.langpick[open] .chev{transform:rotate(180deg)}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:168px;padding:6px;
  background:var(--paper);border:1.4px solid var(--line);border-radius:6px;
  box-shadow:0 12px 28px rgba(42,34,24,.2)}
.langmenu a{display:block;padding:8px 12px;border-radius:4px;text-decoration:none;color:var(--ink2);font-size:13.5px;line-height:1.5}
.langmenu a:hover{background:rgba(195,159,44,.15);color:var(--ink)}
.langmenu a[aria-current="page"]{color:var(--ink);font-weight:700;background:rgba(195,159,44,.1)}
@media(max-width:640px){.utility{padding-top:12px}.langpick{font-size:12.5px}}