/* TearMark サイト共通スタイル。
   配色はアプリの意匠（紙色・墨色）に合わせる。ライト/ダーク両対応 */

:root {
  --paper: #F5F2E8;
  --ink: #26262A;
  --sub: #6B6B72;
  --line: #E2DED0;
  --accent: #2C3B57;
  --tint: rgba(127, 127, 127, .07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1C1C1E;
    --ink: #E8E6E1;
    --sub: #9A9AA2;
    --line: #33333A;
    --accent: #A8BBD8;
    --tint: rgba(127, 127, 127, .12);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  line-height: 1.9;
  font-size: 16px;
  padding: 72px 24px 96px;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 640px; margin: 0 auto; }

/* ブランドを左、言語バーを右に置く一行のヘッダー */
.pagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  min-height: 30px;   /* ナビの有無で見出し位置がずれないよう高さを確保 */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sub);
}
/* ヘッダーのナビゲーション（DAY-212）。ヘッダーはブランドとメインメニューだけ。
   英日は lang.js が片方だけ出す。**.lang-ready の規則より前に書く**——JS が効かないときは
   両方の言語が並び、効いたら後ろの .lang-ready 側が片方を消す */
.pagehead { flex-wrap: wrap; row-gap: 12px; }
.sitenav { margin-left: auto; font-size: 14px; }
.sitenav [data-lang] { display: flex; gap: 18px; }
.sitenav a { color: var(--sub); text-decoration: none; }
.sitenav a:hover { color: var(--ink); text-decoration: underline; }
/* 現在位置はヘッダーとフッターで同じ表現にする: 太字＋本文色（下線は hover だけ） */
.sitenav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
/* 幅が足りないときは、ナビを2行目に回して左端から並べる。ブランド＋5項目は英語で
   本文幅 約500px を要するので、余白 48px を足した 600px を境にする */
@media (max-width: 600px) {
  .sitenav { order: 3; flex-basis: 100%; margin-left: 0; }
}

/* 大文字組みの光学中心はアイコンよりわずかに高く見えるので、1px 下げて揃える */
.brand a { color: inherit; text-decoration: none; position: relative; top: 2px; }
.brand a:hover { text-decoration: underline; }

/* アプリアイコンのモチーフ（大きな紙 + ちぎれた小さな紙）。ブランド名の左に置く */
.mark {
  width: 26px;
  height: 26px;
  flex: none;
  fill: var(--ink);
}

/* 見出しは段ごとにサイズで差を付ける（DAY-166）。太さでは分けられない——
   Hiragino Sans は 600 と 700 の差がほとんど出ないため、h3 を本文と同じ 16px/700 に
   していたときは本文中の <strong> と見分けが付かなかった。
   行間は body の 1.9 を引き継ぐと見出しが間延びするので、ここで詰める */
h1 { font-size: 28px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }

h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  margin: 44px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: none; padding-top: 0; }

h3 { font-size: 18px; font-weight: 700; line-height: 1.5; margin: 28px 0 8px; }

/* 段はここで止まる。h4 は本文と同じ 16px で、見出しであることは
   「上に空き、下は詰まっている」位置関係が示す（下のブロックとの近さで束ねる）。
   これ以上小さくすると本文より弱くなり、ラベルとして働かない */
h4 { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 24px 0 4px; }

p { margin-bottom: 16px; }
ul { margin: 0 0 16px 1.4em; }
li { margin-bottom: 8px; }
strong { font-weight: 700; }
/* 本文中のリンクは下線を残す。本文色との差が 1.5 程度しかなく、
   色だけでは文中で見分けがつかないため。日本語は下線が文字に近づくので離す */
a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.date { color: var(--sub); font-size: 14px; margin-bottom: 48px; }

/* 導入文。本文より一段大きく、地色を敷いて浮かせる */
.lead {
  font-size: 18px;
  line-height: 1.85;
  padding: 20px 24px;
  background: var(--tint);
  border-radius: 10px;
  margin-bottom: 40px;
}

/* フッターは全ページ共通。上から メインメニュー／ユーティリティ／最下段（コピーライトと言語切り替え）。
   左右に振り分けていたときは、項目名の長い日本語でメニューが折り返して窮屈に噛み合っていた */
footer {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--sub);
  font-size: 14px;
  /* 本文は左寄せだが、フッターは中央に置く。ページの終わりを示す帯として
     独立して見え、日本語で折り返したときも重心が崩れない */
  text-align: center;
}
/* 段ごとに役割を分ける（DAY-212）。メインメニューは本文色で一段大きく、ユーティリティは
   小さく薄く。コピーライトと言語切り替えは罫線で区切った最下段に置き、メニューと混ざらないようにする。
   JS が効かないときは両方の言語が並ぶ（.lang-ready の規則より前に書く理由は .sitenav と同じ） */
footer nav [data-lang] { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; row-gap: 4px; }
/* スマホ幅では間隔を詰める。20px のままだと日本語のメインメニュー5項目が 375px に収まらず、
   「サポート」だけが2行目に落ちた */
@media (max-width: 600px) {
  footer nav [data-lang] { column-gap: 12px; }
}
.footer-main { font-size: 15px; margin-bottom: 8px; }
.footer-main a { color: var(--ink); }
.footer-utility { font-size: 13px; }
.footer-utility a { color: var(--sub); }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer a[aria-current="page"] { color: var(--ink); font-weight: 700; }
/* 最下段は罫線で区切り、コピーライトを左・言語切り替えを右に置く。上のメニューは中央寄せなので、
   ここだけ左右に振り分けてページの終わりの帯として見せる */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.footer-copyright { margin: 0; font-size: 13px; }

/* --- 言語切り替え -------------------------------------------------------
   JS が効くまでは両方の言語が見える。lang-ready が付いてから片方だけにする
   （審査担当者の環境で JS が動かなくても内容が読めなくならないように） */

.langbar { display: none; gap: 4px; }
.lang-ready .langbar { display: inline-flex; }

.langbar button {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 7px 14px;
  color: var(--sub);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.langbar button:hover { color: var(--ink); }
.langbar button.is-current {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.lang-ready [data-lang] { display: none; }
.lang-ready [data-lang].is-active { display: block; }
.lang-ready .sitenav [data-lang].is-active { display: flex; }
.lang-ready footer nav [data-lang].is-active { display: flex; }
.lang-ready footer .langbar { display: flex; }

/* JS 無しで両方並ぶときだけ、英語ブロックの上に区切りを出す。
   本文のセクションだけが対象（フッターの言語切り替えには効かせない） */
main > section[data-lang="en"] { margin-top: 88px; padding-top: 40px; border-top: 2px solid var(--line); }
.lang-ready main > section[data-lang="en"] { margin-top: 0; padding-top: 0; border-top: none; }

/* --- LP（トップページ） -------------------------------------------------
   ここから下は body.lp 専用。privacy / support には影響しない */

.lp .hero { padding: 32px 0 8px; margin-bottom: 24px; }
.lp .hero h1 { font-size: 44px; line-height: 1.3; margin-bottom: 20px; }
.lp .hero-lead { font-size: 18px; line-height: 1.9; margin-bottom: 28px; }
@media (max-width: 520px) {
  .lp .hero h1 { font-size: 34px; }
}

kbd {
  font: inherit;
  font-size: .9em;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--tint);
  white-space: nowrap;
}

/* 紙の色スウォッチ。色値はアプリの EntryColor（surface）と同じもの */
.swatches {
  display: flex;
  gap: 10px;
  margin: 14px 0 18px;
}
.swatches i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.sw-paper  { background: #FFFFFF; }
.sw-red    { background: #FBEDEC; }
.sw-orange { background: #FBF0E4; }
.sw-green  { background: #EAF5EC; }
.sw-blue   { background: #E9F1FB; }
.sw-purple { background: #F1ECFA; }
@media (prefers-color-scheme: dark) {
  .sw-paper  { background: #1E1E1E; }
  .sw-red    { background: #3B2829; }
  .sw-orange { background: #3B2E1C; }
  .sw-green  { background: #1F3324; }
  .sw-blue   { background: #1E2E40; }
  .sw-purple { background: #2D243B; }
}

/* 困りごとの列挙。箇条書きではなく「声」として1つずつ面で見せる */
.pains {
  list-style: none;
  margin: 20px 0 20px;
  padding: 0;
}
.pains li {
  margin-bottom: 10px;
  padding: 14px 18px;
  background: var(--tint);
  border-radius: 10px;
}

/* App Store バッジ。**Apple 公式のアートワークをそのまま置く**（Marketing Tools から
   取得した SVG）。色を変える・角丸を付け直す・似せて自作する、はいずれもガイドライン
   違反なので、こちらで見た目を触る余地は無い。明暗は黒白2枚の出し分けで合わせる */
.store-badge {
  display: inline-block;
  line-height: 0;   /* インライン画像の下に出る余白を消す */
}
.store-badge img {
  height: 40px;     /* 幅は言語で違う（英 156 / 日 140）ので高さで揃える */
  width: auto;
}

/* --- 製品の画像 ---------------------------------------------------------
   素材は scripts/screenshots/capture.sh が撮った**透過のままの窓**で、
   site-assets.sh が表示サイズの2倍に縮めて WebP にしたもの。
   見出しや説明は画像に焼き込まず HTML に残してある（言語切り替えに追従させ、
   検索と読み上げに拾わせるため）。ライト/ダークは <picture> で出し分ける */

.shot {
  margin: 32px 0 8px;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* 影は box-shadow で出す。**filter: drop-shadow は使わない。**
   drop-shadow は画像のアルファをぼかすので、デコードが終わるまで影の形が決まらず、
   読み込み時に「絵が出る → あとから影が付く」の二段階に見える。
   窓はどれも角丸の矩形なので、同じ形の箱を1つ置いて影を出せば足りる
   （ぼかし 26px に対して、半径の1〜2px のずれは見えない）。
   **z-index: -1 を必ず付ける。** ::before は position: absolute なので、
   付けないと画像より後に描かれ、箱の外に出た影が画像の上に乗る。ヒーローでは
   しっぽが箱の外にあるため、しっぽだけ影で暗くなって色が違って見える
   （実際にそうなった）。isolation で picture の中に閉じ込めてから下げる */
.shot picture { display: block; position: relative; isolation: isolate; }
.shot picture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}
@media (prefers-color-scheme: dark) {
  .shot picture::before { box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
}
/* ヒーローは画像の上端がしっぽの先なので、影を出す箱はその高さぶん下げる。
   下げないと本体の上に影の帯が乗り、しっぽが影の中に埋まって見える。
   2.25% は素材でのしっぽの高さ 18px / 800px（バブルは正方形なので % で合う） */
.shot-hero picture::before { top: 2.25%; }

/* ヒーロー。バブルは実寸 400pt 相当まで。しっぽが指す先としてメニューバーの帯を
   CSS で描く（実物を写すと他の常駐アイコンと時計が入り、撮り分けも要る）。
   しっぽは画像の上端中央にあるので、アイコンも帯の中央に置けば合う */
.shot-hero { margin: 36px 0 8px; }
/* 帯は本文の幅いっぱいに引く。バブルと同じ幅にすると、メニューバーではなく
   ウィンドウのタイトルバーに見えてしまう。
   **角は丸めず、両端はフェードさせる。** 角丸や切り落とした端があると帯そのものが
   枠に見え、ひどく狭いモニターの画面上端を写したように読めてしまう。実際の
   メニューバーは画面の端まで続くので、続きがあるように消す */
.shot-menubar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  /* 地とヘアラインをまとめて消したいので、要素ごとマスクする */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.shot-menubar .mark { width: 17px; height: 17px; }
/* 実機では帯としっぽの間に隙間がある。接させると帯がバブルの一部に見える */
.shot-hero picture { max-width: 400px; margin: 10px auto 0; }

/* 一覧・フッターの窓。縦長なので本文の幅いっぱいには広げない */
.shot-panel picture { max-width: 340px; margin: 0 auto; }

/* 付箋。画面の隅に貼った状態を、少しずつ傾けて重ねて表す。
   **「紙の色で、見分ける」の節で使う。** もとは「ちぎって貼っておく」に置いて
   いたが、あちらは動画に差し替えた（DAY-135）。この3枚は紫・青・橙の紙が
   並ぶ絵なので、色の話の隣に置くほうが本来の使いどころになる */
.shot-stickies {
  position: relative;
  aspect-ratio: 640 / 390;
}
.shot-stickies .st {
  position: absolute;
  width: 44%;
}
.st-1 { left: 0;  top: 3%;  transform: rotate(-2.5deg); }
.st-2 { left: 28%; top: 34%; transform: rotate(1.5deg); z-index: 2; }
.st-3 { right: 0; top: 1%;  transform: rotate(3deg); }

/* ちぎるの動画（DAY-135）。**静止画の付箋3枚から差し替えた。**
   絵の地は壁紙まで写っている不透明な矩形なので、透過の付箋のように影を
   別の箱で出す必要はない。角丸と控えめな影だけ足す */
.shot-tear video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}
@media (prefers-color-scheme: dark) {
  .shot-tear video { box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
}

/* 狭い画面では3枚だと1枚あたりが 150px を切り、本文が潰れて模様になる。
   枚数を2枚に減らして、そのぶん大きく見せる */
@media (max-width: 520px) {
  .shot-stickies { aspect-ratio: 36 / 32; }
  .shot-stickies .st { width: 68%; }
  .st-1 { top: 0; }
  .st-2 { left: auto; right: 0; top: 38%; }
  /* .shot picture（0-1-1）に負けないよう、親クラスを重ねて 0-2-0 にする */
  .shot-stickies .st-3 { display: none; }
}

/* --- 価格 */

.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 16px;
}
@media (max-width: 520px) {
  .pricing { grid-template-columns: 1fr; }
}
.price-card {
  padding: 20px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.price-card .plan {
  margin-bottom: 6px;
  color: var(--sub);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.price-card .amount { font-size: 28px; font-weight: 700; margin-bottom: 0; }
.price-card .amount small { font-size: 14px; font-weight: 400; color: var(--sub); }
.price-card .note { margin: 6px 0 0; color: var(--sub); font-size: 14px; }
/* カードごとの購入ボタン。押したプランがそのまま決済に出る（DAY-156）。
   幅いっぱいに伸ばすのは、2枚のカードでボタンの左端を揃えるため */
.card-cta { margin: 16px 0 0; }
.card-cta .buy-btn { display: block; text-align: center; padding: 9px 16px; font-size: 15px; }

.fineprint { color: var(--sub); font-size: 13px; }

/* 打ち消しの但し書き。**RevenueCat の解錠メールが誤った案内をしている**ため、
   そこから着地した人にその場で訂正を出す（DAY-147）。メールの Step 1 は
   「Install latest app」＋ Apple の公式バッジ、Step 2 は「On your mobile device」で、
   どちらも Mac アプリには当てはまらない。文面は RevenueCat 側で編集できない
   （ダウンロードリンク欄が必須で、空にすると保存できない）。
   本文に埋めると読み飛ばされるので、左罫で視線を止める */
.notice {
  border-left: 3px solid var(--accent);
  padding: 12px 0 12px 16px;
  margin: 0 0 32px;
  color: var(--sub);
  font-size: 15px;
}
.notice strong { color: var(--ink); }

/* --- 購入導線（/buy/ と LP の直販リンク） ------------------------------
   直販のボタンは自前の意匠で描く。App Store バッジは Apple のアートワークを
   そのまま置く決まりなので、隣に並べるこちらは**似せない**ことで区別する */

/* 下は但し書きが続く。全称セレクタで margin を 0 にしているので、ここで
   下余白を持たないとボタンに文章がくっつく（p の 16px より少し広く取る:
   塗りのボタンは輪郭が強く、同じ間隔だと詰まって見えるため） */
.buy-cta { margin: 14px 0 20px; }
.buy-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
.buy-btn:hover { opacity: .88; }
/* Mac 以外で「Mac へ送る」を出すときは button で描く（DAY-208）。
   a と同じ見た目にするため、ブラウザ既定の枠と文字設定を外す */
button.buy-btn { font: inherit; font-weight: 700; border: 0; cursor: pointer; }

/* 販売開始前の状態（DAY-139 の Purchase Link 待ち）。**リンクにしない**——
   href="#" のボタンは押せてしまい、押しても何も起きない方が壊れて見える。
   span にして塗りを外し、押す対象ではないことを見た目でも示す */
.buy-btn.is-pending {
  background: transparent;
  color: var(--sub);
  border: 1px dashed var(--line);
  font-weight: 400;
}

/* LP の購入ボタンの下に添える App Store への導線。主従を逆にしたので（DAY-156）、
   ここは一段引いた小さな行にする。**バッジ画像は使わない**: 塗りのボタンと並ぶと
   同じ重さで competing し、どちらが主か分からなくなる。バッジは購入ページの
   「App Store で購入する」節に残してあり、そこでは文脈が支えるので成立する */
.alt-buy { color: var(--sub); font-size: 14px; }

/* LP の主ボタンの下に来るのは本文ではなく従属の導線。離しすぎると別の塊に
   見えるので、購入ページの但し書き（20px）より詰める */
.lp .buy-cta { margin-bottom: 14px; }

/* --- 特定商取引法に基づく表記。項目名と内容の2列。狭い画面では縦積み */
.legal { margin: 24px 0; }
.legal dt {
  font-weight: 700;
  margin-top: 20px;
}
.legal dd {
  margin: 4px 0 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .legal {
    display: grid;
    grid-template-columns: 13em 1fr;
    column-gap: 20px;
  }
  .legal dt {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .legal dd {
    margin: 0;
    padding: 14px 0;
  }
}