/* ============================================================================
   こぼれび — アプリ固有CSS
   読み込み順: tokens.css → shell.css → themes.css → このファイル
   ----------------------------------------------------------------------------
   ・上書きしてよいのは tokens.css §2 のテーマ17トークンだけ。
     §1 のシェルトークン（--sp-* / --fs-* / --lh-* / --ls-* / --r-* /
     --gutter / --shell-max* / --dur-* / --ease / --hair …）は1つも再定義しない。
   ・色は themes.css の html[data-app="koborebi"] が配る値／レガシー別名
     （--card --ink --muted --faint --bengara --gold --edge --serif --latin）
     経由で受け取る。実 hex を直書きするのは、themes.css が
     「こぼれび固有の直書き色」として名指ししている2つだけ：
       #F7F1E8  … CTA／登録ボタンの文字色
       rgba(38,35,28,.14) … 篆刻の影
   ・裸の要素セレクタ（html / body / a / section / h1 …）は書かない。
     section だけは移植元の余白を保つため .lp 配下にスコープして残す。
   ・html{background} / body{background} / body{overflow-x} は書かない
     （shell.css §3 が持っている。書くと Pareidol の雲が死ぬ規約に触れる）。
   ============================================================================ */


/* ═══ LP（/koborebi） ═════════════════════════════════════════════════════ */

/* 移植元 body の組版（line-height:2）。字送り・字間はシェルと同値なので触らない。 */
html[data-app="koborebi"] .lp{
  line-height: var(--lh-doc);
}

/* 版面：移植元 .wrap（max-width:920px / padding:0 24px）を共通の余白グリッドへ。
   ★ .hero .tate（縦書き）が right:0 でこの内寸に張り付くので、
     この2行を消すと縦書きが本文に重なる。 */
html[data-app="koborebi"] .lp .wrap{
  max-width: calc(var(--shell-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- 篆刻風ブランドロック ------------------------------------------------- */
html[data-app="koborebi"] .lp .kb-brand{
  display: flex; align-items: center; gap: 14px;
}
/* 44px の弁柄の角丸に明朝の「灯」。共通シェルの 28px 落款（.seal）とは
   別物なので .kb-seal という別名にしてある（.seal を当てると縮む）。 */
html[data-app="koborebi"] .lp .kb-seal{
  width: 44px; height: 44px; flex: none;
  background: var(--bengara); color: var(--accent-ink);
  border-radius: var(--r-seal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1;
  box-shadow: 0 1px 3px rgba(38,35,28,.14);
  user-select: none;
}
/* 縦書きその1 */
html[data-app="koborebi"] .lp .seal-read{
  writing-mode: vertical-rl;
  font-size: 10px; color: var(--faint); letter-spacing: .35em; height: 44px;
}
html[data-app="koborebi"] .lp .brand-rule{
  width: 1px; height: 40px; background: var(--edge); flex: none;
}
html[data-app="koborebi"] .lp .brand-name .ja{
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  letter-spacing: .14em; line-height: 1.25;
}
html[data-app="koborebi"] .lp .brand-name .en{
  font-size: 10px; color: var(--gold); letter-spacing: .5em; margin-top: 2px;
}

/* --- ヒーロー ------------------------------------------------------------- */
html[data-app="koborebi"] .lp .hero{ padding: 84px 0 64px; position: relative; }
html[data-app="koborebi"] .lp .hero h1{
  letter-spacing: .1em; line-height: 1.7;   /* 移植元の実測値 */
}
html[data-app="koborebi"] .lp .kb-accent{ color: var(--bengara); }
html[data-app="koborebi"] .lp .kb-lead{
  margin: 28px 0 0; color: var(--muted); max-width: 34em;
}
/* 縦書きその2。親 .hero の position:relative と .wrap の内寸に依存する。 */
html[data-app="koborebi"] .lp .tate{
  position: absolute; right: 0; top: 88px;
  writing-mode: vertical-rl; font-family: var(--serif);
  color: var(--faint); letter-spacing: .4em; font-size: 13px;
}
@media (max-width: 720px){
  html[data-app="koborebi"] .lp .hero{ padding: 64px 0 48px; }
  html[data-app="koborebi"] .lp .tate{ display: none; }   /* 落とすとモバイルで崩れる */
}

/* --- CTA バンド ----------------------------------------------------------- */
html[data-app="koborebi"] .lp .beta{
  background: var(--card);
  border: var(--hair) solid var(--edge);
  border-radius: var(--r-md);
  padding: 34px 34px 30px;
  margin: 8px 0 0;
  position: relative;   /* ★ ::before の透かしの基準 */
  overflow: hidden;     /* ★ これが無いと「募」がはみ出して横スクロールが出る */
}
/* 巨大な明朝の「募」を地色で抜いた透かし。色が --bg 依存なので、
   カード地（--card）を変えると見えなくなる／浮き上がる。 */
html[data-app="koborebi"] .lp .beta::before{
  content: "募";
  position: absolute; right: -14px; bottom: -38px;
  font-family: var(--serif); font-size: 150px; color: var(--bg);
  font-weight: 600; line-height: 1; pointer-events: none;
}
html[data-app="koborebi"] .lp .beta .tag{
  display: inline-block;
  border: var(--hair) solid var(--bengara); color: var(--bengara);
  font-size: 12px; letter-spacing: .25em; padding: 3px 14px;
  border-radius: 3px; font-family: var(--serif);
}
html[data-app="koborebi"] .lp .beta h2{
  font-size: 22px; letter-spacing: .1em; margin: 16px 0 6px;
}
html[data-app="koborebi"] .lp .beta p{ color: var(--muted); font-size: 14px; margin: 0; }

html[data-app="koborebi"] .lp .beta .cta{
  display: inline-block;
  background: var(--bengara); color: #F7F1E8; text-decoration: none;
  font-family: var(--serif); letter-spacing: .18em; font-size: 15px;
  padding: 13px 34px; border-radius: var(--btn-r);
  margin: 20px 0 6px;
  box-shadow: 0 2px 8px var(--accent-line);
  transition: opacity var(--dur-1) var(--ease);
}
/* 和の淡い当たり。ここを共通ボタンの transform に寄せると印象が変わる。 */
html[data-app="koborebi"] .lp .beta .cta:hover{ opacity: .88; }

html[data-app="koborebi"] .lp .beta .note{
  font-size: 12px; color: var(--faint); margin-top: 6px;
}
html[data-app="koborebi"] .lp .beta .android{
  margin-top: 18px; padding-top: 16px;
  border-top: var(--hair) solid var(--edge);
  font-size: 13px; color: var(--muted);
}
html[data-app="koborebi"] .lp .beta .android b{ color: var(--ink); font-weight: 500; }

/* --- Android版ウェイトリスト --------------------------------------------- */
html[data-app="koborebi"] .lp .waitlist{
  margin: 22px 0 6px; padding-top: 20px;
  border-top: var(--hair) solid var(--edge);
}
html[data-app="koborebi"] .lp .waitlist h4{
  font-family: var(--serif); font-size: 15px; letter-spacing: .12em;
  font-weight: 600; margin: 0 0 6px;
}
html[data-app="koborebi"] .lp .waitlist p{ font-size: 13px; color: var(--muted); margin: 0 0 14px; }
html[data-app="koborebi"] .lp .waitlist form{ display: flex; gap: 10px; }
html[data-app="koborebi"] .lp .waitlist input[type="email"]{
  flex: 1; min-width: 0;
  background: var(--bg); border: var(--hair) solid var(--edge);
  border-radius: var(--r-pill); padding: 11px 18px;
  font-size: 14px; color: var(--ink); font-family: var(--font-body);
  transition: border-color var(--dur-1) var(--ease);
}
/* 移植元は outline:none だったが、共通シェルの :focus-visible リングは残す
   （キーボード操作で行方不明にならないため）。枠が金に変わる演出は同じ。 */
html[data-app="koborebi"] .lp .waitlist input[type="email"]:focus{ border-color: var(--gold); }
html[data-app="koborebi"] .lp .waitlist button{
  flex: none;
  background: var(--bengara); color: #F7F1E8; border: 0; cursor: pointer;
  font-family: var(--serif); letter-spacing: .18em; font-size: 14px;
  padding: 11px 26px; border-radius: var(--r-pill);
  transition: opacity var(--dur-1) var(--ease);
}
html[data-app="koborebi"] .lp .waitlist button:hover{ opacity: .88; }
html[data-app="koborebi"] .lp .waitlist button:disabled{ opacity: .55; cursor: default; }
html[data-app="koborebi"] .lp .waitlist .msg{ font-size: 13px; margin-top: 12px; }
html[data-app="koborebi"] .lp .waitlist .msg.ok{ color: var(--ink); }
html[data-app="koborebi"] .lp .waitlist .msg.err{ color: var(--bengara); }
@media (max-width: 560px){
  html[data-app="koborebi"] .lp .waitlist form{ flex-direction: column; }
  html[data-app="koborebi"] .lp .waitlist button{ width: 100%; }
}

/* --- セクション見出し ----------------------------------------------------- */
html[data-app="koborebi"] .lp section{ padding: 72px 0 0; }
html[data-app="koborebi"] .lp .sec-head{
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 36px;
}
/* 〇一 / 〇二 / 〇三。連番の見た目はアプリのまま残す（共通化しない）。 */
html[data-app="koborebi"] .lp .sec-index{
  font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: .1em;
}
html[data-app="koborebi"] .lp .sec-title{
  font-size: 24px; letter-spacing: .16em;
}
html[data-app="koborebi"] .lp .sec-rule{
  flex: 1; height: var(--hair); background: var(--edge); transform: translateY(-6px);
}

/* --- しくみ（3ステップ） -------------------------------------------------- */
html[data-app="koborebi"] .lp .steps{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 720px){
  html[data-app="koborebi"] .lp .steps{ grid-template-columns: 1fr; }
}
html[data-app="koborebi"] .lp .step{
  border-top: var(--hair) solid var(--edge); padding-top: 18px; position: relative;
}
html[data-app="koborebi"] .lp .step .no{
  font-family: var(--serif); font-size: 36px; color: var(--edge);
  font-weight: 500; line-height: 1;
}
html[data-app="koborebi"] .lp .step h3{
  font-size: 18px; letter-spacing: .14em; margin: 10px 0 8px;
}
html[data-app="koborebi"] .lp .step h3 .sub{
  font-size: 11px; color: var(--gold); letter-spacing: .3em; margin-left: 10px;
}
html[data-app="koborebi"] .lp .step p{ font-size: 14px; color: var(--muted); margin: 0; }

/* --- 画面（横スクロール） -------------------------------------------------
   padding の 6px / 18px は影（--shadow-card）を上下で切らないための逃げ。
   ここを詰めると影が切れる。 */
html[data-app="koborebi"] .lp .screens{
  display: flex; gap: 20px; overflow-x: auto;
  padding: 6px 2px 18px;
  -webkit-overflow-scrolling: touch;
}
html[data-app="koborebi"] .lp .screens figure{ flex: none; width: 216px; margin: 0; }
html[data-app="koborebi"] .lp .screens img{
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  border: var(--hair) solid var(--edge);
  box-shadow: var(--shadow-card);
}
html[data-app="koborebi"] .lp .screens figcaption{
  text-align: center; font-size: 12px; color: var(--faint);
  margin-top: 10px; letter-spacing: .14em; font-family: var(--serif);
}

/* --- たのしみかた（3カード） ---------------------------------------------- */
html[data-app="koborebi"] .lp .feats{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 720px){
  html[data-app="koborebi"] .lp .feats{ grid-template-columns: 1fr; }
}
html[data-app="koborebi"] .lp .feat{
  background: var(--card);
  border: var(--hair) solid var(--edge);
  border-radius: var(--card-r);
  padding: 24px 24px 20px;
}
html[data-app="koborebi"] .lp .feat .mark{
  color: var(--bengara); font-family: var(--serif); font-size: 20px;
}
html[data-app="koborebi"] .lp .feat h3{
  font-size: 16.5px; letter-spacing: .12em; margin: 8px 0 6px;
}
html[data-app="koborebi"] .lp .feat p{ font-size: 13.5px; color: var(--muted); margin: 0; }

/* --- 結び ----------------------------------------------------------------- */
html[data-app="koborebi"] .lp .closing{ text-align: center; padding: 88px 0 0; }
html[data-app="koborebi"] .lp .closing p{
  font-family: var(--serif); font-size: clamp(19px, 3.4vw, 24px);
  letter-spacing: .22em; line-height: 2.4; margin: 0;
}
html[data-app="koborebi"] .lp .closing .drop{ color: var(--gold); }


/* ═══ 法務ページ（/koborebi/privacy） ═════════════════════════════════════
   組版そのものは shell.css §6 の .doc / .doc--counter に載せている。
   ここで足すのは、移植元にしか無かった3つだけ：
     1. 見出し下の 48px の朱の罫（.rule）
     2. 条文を1条ずつ罫で区切る（移植元の li の見え方）
     3. 「静かな立ち上がり」と、ホームリンクの gap アニメーション
   ★ .rise / li の入場アニメは animation-fill-mode:backwards で書く。
     静的状態の opacity は 1 のままなので、CSS が届かなくても・
     セレクタが1行ずれても条文は必ず見える（白紙事故が起きない）。
     移植元の main li{opacity:0} はこの理由で採用しない。
   ======================================================================== */

html[data-app="koborebi"] .doc .eyebrow{
  font-family: var(--latin);   /* KOBOREBI · PRIVACY POLICY を欧文書体で */
}
html[data-app="koborebi"] .doc .rule{
  inline-size: 48px; block-size: var(--hair);
  background: var(--accent); opacity: .7;
  margin: 0 0 var(--sp-5);
}

/* 条文の区切り罫。shell.css は .doc h2 に罫を持たせるが、
   li ごとに h2 が入ると :first-of-type が全条に当たって罫が消えるため、
   li 側で引き直す（移植元と同じ見え方）。 */
html[data-app="koborebi"] .doc--counter ol > li{
  padding-block: clamp(28px, 4vw, 38px);
  border-top: var(--hair) solid var(--rule);
}
html[data-app="koborebi"] .doc--counter ol > li:last-child{
  border-bottom: var(--hair) solid var(--rule);
}
html[data-app="koborebi"] .doc--counter ol > li > h2{
  margin: 0 0 var(--sp-3);
  padding-top: 0;
  border-top: 0;
}
html[data-app="koborebi"] .doc--counter ol > li > p:last-child{ margin-bottom: 0; }

/* 静かな立ち上がり（スタッガー無し＝全条同時。移植元の意図どおり）
   ★★ opacity は動かさない。transform だけを動かす。 ★★
   移植元は opacity:0 → 1 のフェードだったが、それは実測で危険だと確認した：
   バックグラウンドで開かれたタブなど「一度も描画されていない文書」では
   document.timeline.currentTime が 0 のまま進まず、アニメーションが
   currentTime:0 で止まる。opacity を 0 から始めると、その状態の条文は
   **完全に不可視**になる（実際に computed opacity:0 を観測した）。
   法務ページが白紙なのはストア審査上ペイしないので、
   shell.css §6 の「法務ページに入場アニメは付けない」の趣旨に合わせ、
   静止状態でも必ず読める形（transform だけ）に落として演出を残す。
   これなら万一タイムラインが止まっても「16px 下にいるだけ」で済む。 */
@keyframes kb-rise{
  from{ transform: translateY(16px); }
  to  { transform: none; }
}
html[data-app="koborebi"] .doc .rise,
html[data-app="koborebi"] .doc--counter ol > li{
  animation: kb-rise var(--dur-3) var(--ease) both;
}

/* ホームへもどる。gap がゆっくり開く（--dur-2 = .5s）のが移植元の演出。 */
html[data-app="koborebi"] .doc .back{
  margin-top: var(--sp-8); text-align: center;
}
html[data-app="koborebi"] .doc .back a{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-family: var(--serif); font-size: 14px; letter-spacing: .12em;
  color: var(--ink);
  transition: color var(--dur-2) ease, gap var(--dur-2) ease;
}
html[data-app="koborebi"] .doc .back a:hover{ color: var(--accent); gap: 15px; }
html[data-app="koborebi"] .doc .back .arw{
  font-family: var(--latin); font-size: 18px; line-height: 1;
}