/* ============================================================================
   とめばん LP — src/_lp/tomeban-x/tomeban-x.css
   ----------------------------------------------------------------------------
   読み込み順は tokens.css → shell.css → themes.css → **このファイル**。
   ★ themes.css に tomeban の項目は無い（botch / pareidol / koborebi の3本だけ）。
     つまり tomeban は tokens.css の :root をそのまま受けている。ここで
     html[data-app="tomeban"] を書けば、上書きではなく «初めて与える» ことになる。

   【この案の決め】
   ① **差し色は ライム #C8E04B ひとつ。**アイコンの «時間のリング» の色で、
      このアプリで唯一の彩度。
      ★★ 地 #F3F3F3 に対して **1.55:1** しかない。**字には絶対に使わない。**
        読めなくても意味が失われない «印» だけに使う。
      ★★ 2026-08-12 に **背面のリングを外した**（Ryo さん「車の周りのメーターは
        表示させなくてOK」）。そのため、いまライムが載っているのは
        **§7 の行頭の 6px 角ひとつだけ**。ここを消すと、このページから
        彩度が完全に無くなる。
        ★ 逆に、ここを赤系にするのは将来も不可。駐車禁止標識に誤読される
          （アイコン側の注記にも同じことが書いてある）。
   ② **くるまくん**が identity（Ryo さん「そのまま持っていきたい」）。
      絵は design/icon/tomeban_icon.svg のパスをそのまま、
      動きは lib/app/widgets/animated_mascot_car.dart の数値をそのまま。
   ③ 節の番号は **■**。掲載文（store_listing_ja.md）が ■ で節を切っているので、
     その印をそのまま持ってきた。en 案の «丸» と対になる。
   ④ 常時ループは **2本**（呼吸・まばたき）。ホームの作法の上限ちょうど。
   ========================================================================== */


/* ═══ §1  トークン ════════════════════════════════════════════════════════ */

html[data-app="tomeban"]{
  color-scheme: light;

  --bg          : #F3F3F3;
  --surface     : #FFFFFF;
  --surface-2   : #E7E7E7;
  --fg-1        : #101010;
  --fg-2        : #4A4A4A;
  --fg-3        : #656565;
  --rule        : rgba(16,16,16,.12);
  --rule-2      : rgba(16,16,16,.07);
  --rule-hair   : rgba(0,0,0,.08);

  /* ★① 差し色。**面にだけ**使う。字色として参照しないこと。 */
  --tb-lime     : #C8E04B;
  /* 字や罫に «強い側» が要るときは無彩を指す（en 案と同じ扱い）。 */
  --accent      : #101010;
  --accent-line : rgba(16,16,16,.22);
  --accent-soft : rgba(16,16,16,.05);
  --accent-ink  : #F3F3F3;

  --shadow-card : 0 4px 18px rgba(0,0,0,.07);

  --font-display: var(--font-body);
  --font-num    : var(--font-body);

  /* 面の角。アプリ本体が角丸を強く使わないので、ホームの --r-lg のまま。 */
  --tb-r        : 14px;
  --btn-r       : var(--r-pill);

  /* --- 節の段（ポータルと同値。4案とも同じ）------------------------------ */
  --tb-sec-gap  : clamp(56px,  7vw, 88px);
  --tb-head-pad : clamp(12px, 1.4vw, 18px);
  --tb-head-gap : clamp(28px, 3.4vw, 44px);
  --tb-fs-h1    : clamp(26px, 1.10rem + 2.40vw, 42px);
}

@media (prefers-color-scheme: dark){
  html[data-app="tomeban"]{
    color-scheme: dark;
    --bg          : #0F0F0F;
    --surface     : #191919;
    --surface-2   : #232323;
    --fg-1        : #F2F2F2;
    --fg-2        : #B9B9B9;
    --fg-3        : #949494;
    --rule        : rgba(242,242,242,.14);
    --rule-2      : rgba(242,242,242,.08);
    --rule-hair   : rgba(255,255,255,.10);
    --accent      : #F2F2F2;
    --accent-line : rgba(242,242,242,.24);
    --accent-soft : rgba(242,242,242,.06);
    --accent-ink  : #0F0F0F;
    --shadow-card : 0 4px 18px rgba(0,0,0,.5);
    /* ★ ライムは暗い地でも同じ。#0F0F0F に対して 12.2:1 と十分明るいが、
       ここでも «字には使わない» を守る（明暗が反転しても役割は変えない）。 */
  }
}


/* ═══ §2  版面 ════════════════════════════════════════════════════════════
   ★ --shell-max-wide は «中身の幅» なので、padding を内側に取るなら
     上限は 1120 ＋ gutter×2（Pareidol 案で踏んだ罠。4案とも同じ書き方）。 */
.lptb{
  max-inline-size: calc(var(--shell-max-wide, 1120px) + var(--gutter, 40px) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 5vw, 40px));
  padding-block-end: clamp(64px, 9vw, 120px);
}
.lptb .tb-act{ margin-block-start: var(--tb-sec-gap); }


/* ═══ §3  節の見出し ══════════════════════════════════════════════════════
   ポータルの .dw-sec__head / .dw-sec__h を値ごと写した。
   ★③ 番号は **■**。掲載文が ■ で節を切っているのをそのまま持ってきた
     （数字を振ると «手順» に見えるが、実際は性質を並べたものなので嘘になる）。 */
.lptb .sec-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-block-end: var(--tb-head-pad);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--tb-head-gap);
}
.lptb .sec-index{
  inline-size: 8px;
  block-size: 8px;
  background: var(--fg-1);
  display: inline-block;
  transform: translateY(-1px);
}
.lptb .sec-head__h{
  margin: 0;
  font-size: clamp(16px, .74rem + .66vw, 21px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--fg-1);
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §4  名のり ══════════════════════════════════════════════════════════ */

.lptb .tb-stage{
  padding-block: clamp(56px, 11vh, 108px) clamp(8px, 2vw, 20px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.5vw, 56px);
  align-items: center;
}
@media (min-width: 900px){
  .lptb .tb-stage{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.lptb .tb-stage__in{ max-inline-size: 46em; min-inline-size: 0; }

.lptb .tb-brand{
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}
/* 枠の規則は icons.json の frame に合わせる（角丸 22.5%）。4案とも同値。 */
.lptb .tb-appicon{
  flex: 0 0 auto;
  inline-size: clamp(38px, 3.4vw, 48px);
  block-size: clamp(38px, 3.4vw, 48px);
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule-hair);
}
.lptb .tb-appicon img{ display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

.lptb .wordmark{
  display: inline-block;
  font-size: clamp(19px, 1.1vw + 13px, 24px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--fg-1);
  text-decoration: none;
}
.lptb .tagline{
  margin: 14px 0 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--fg-3);
}
.lptb .tb-h1{
  margin: clamp(22px, 3.4vw, 40px) 0 0;
  font-size: var(--tb-fs-h1);
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: .01em;
  color: var(--fg-1);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lptb .lead{
  margin: clamp(16px, 2.2vw, 24px) 0 0;
  max-inline-size: 34em;
  font-size: clamp(14px, .68rem + .5vw, 16.5px);
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §5  ★② くるまくん ══════════════════════════════════════════════════
   絵は design/icon/tomeban_icon.svg の車のパスをそのまま。面の色だけ
   #F2F1EE → #FBFBFA へ上げて、シルエットの外周に muted(#8B8A86) の細線を
   足してある（index.njk の注記に理由を書いた）。
   ★ アイコンと違って **背景の角丸の黒い板も、時間のリングも置かない。**
     ページの地に直接くるまくんが居る形（アイコンの縮小版ではなく
     «キャラクター» として出す）。
   ★ リングを外したぶん viewBox を車の外接まで詰めたので（index.njk の注記）、
     380px のままだと車そのものが 380px になって主張が強すぎる。
     **320px** に下げて、名のりの文字組みと釣り合う大きさにした。 */
.lptb .tb-mascot{
  justify-self: center;
  inline-size: min(100%, 320px);
}
.lptb .tb-mascot__svg{
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

/* --- 呼吸 ---------------------------------------------------------------
   ★★ 数値は **アプリ本体のまま**（lib/app/widgets/animated_mascot_car.dart）:
       周期 2400ms ／ scaleY 1.0 ↔ 0.965 ／ Curves.easeInOutSine
     easeInOutSine の CSS 相当は cubic-bezier(.37,0,.63,1)。
   ★ 原点は **車の底**。真ん中を原点にすると «浮き沈み» に見えて、
     アプリでの «ふくらんで縮む» と別の生き物になる。
   ★ transform-box: fill-box を付けないと、原点が SVG のビューポート基準に
     なって車が画面外へ飛ぶ。 */
.lptb .tb-car{
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
html.js .lptb .tb-car{
  animation: tb-breathe 2400ms cubic-bezier(.37,0,.63,1) infinite alternate;
}
@keyframes tb-breathe{
  from{ transform: scaleY(1); }
  to  { transform: scaleY(.965); }
}

/* --- まばたき -----------------------------------------------------------
   ★ アプリは «3〜6秒のあいだでランダム、閉じ 120ms・開き 150ms»。
     CSS に乱数は無いので **5秒の固定周期** にした（見た目の役はまったく同じ。
     ランダムかどうかは1つしか居ない画面では誰にも分からない）。
       120ms / 5000ms = 2.4%  ／  (120+150)ms = 5.4%
   ★ 目は «潰す» だけ（消さない）。0 にすると一瞬 «目が無い顔» になる。 */
.lptb .tb-eyes{
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
html.js .lptb .tb-eyes{
  animation: tb-blink 5000ms linear infinite;
}
@keyframes tb-blink{
  0%   { transform: scaleY(1); }
  2.4% { transform: scaleY(.08); }
  5.4% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}


/* ═══ §6  本文 ════════════════════════════════════════════════════════════ */

.lptb .tb-body{ max-inline-size: 38em; }
.lptb .tb-body p{
  margin: 0;
  font-size: clamp(14px, .66rem + .48vw, 16px);
  line-height: 2.05;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lptb .tb-body p + p{ margin-block-start: 1.5em; }


/* ═══ §7  並び（料金体系）════════════════════════════════════════════════
   掲載文で ・ の箇条になっている4行。**文は1字も変えていない。**
   ★ ここだけライムを «行頭の印» として使う。字ではないので §1 の禁を破らない。
     6px の四角で、読めなくても意味が失われない位置。 */
.lptb .tb-list{
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: 44em;
  border-block-start: 1px solid var(--rule-2);
}
.lptb .tb-list li{
  position: relative;
  padding: 14px 0 14px 22px;
  border-block-end: 1px solid var(--rule-2);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lptb .tb-list li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(14px + .95em - 3px);
  inline-size: 6px;
  block-size: 6px;
  background: var(--tb-lime);
  /* ★ ライムは明るいので、明るい地では輪郭を1本入れて «在る» ことを保つ。 */
  box-shadow: 0 0 0 1px rgba(16,16,16,.16);
}
@media (prefers-color-scheme: dark){
  .lptb .tb-list li::before{ box-shadow: none; }
}
.lptb .tb-list + .tb-body{ margin-block-start: clamp(22px, 3vw, 30px); }
.lptb .tb-body + .tb-shots{ margin-block-start: clamp(28px, 3.4vw, 44px); }


/* ═══ §8  図版（アプリの実画面）══════════════════════════════════════════
   ★ 出典は ParkingApp/.tmp_shots の **clean**（説明の帯が焼き込まれていない版）。
     store/ の版は帯つきなので、ページの見出しと文が二重になる。
   ★ 実画面は 1170×2532（0.462 の縦長）。640px 幅の JPEG に落としてある。
   ★★ アプリの地は **#E9E8E4 の紙色**で、このページの地（#F3F3F3）と
     ほとんど同じ明るさ（1.06:1）。輪郭を入れないと «画面» が地に溶けて、
     どこからどこまでが実画面なのか分からなくなる。だから rule-hair の
     1px を必ず回す。 */
.lptb .tb-shots{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 32px);
  margin-block-start: clamp(28px, 3.4vw, 44px);
  /* ★ 2枚のときは版面いっぱいに広げない。実画面は縦長なので、
     560px を超えると1枚が背より高くなって «並び» が読めなくなる。 */
  max-inline-size: 620px;
}
.lptb .tb-shots--one{ max-inline-size: 300px; grid-template-columns: minmax(0, 1fr); }
.lptb .tb-shot{ margin: 0; min-inline-size: 0; }
.lptb .tb-frame{ position: relative; }
.lptb .tb-shot img{
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--tb-r);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--rule-hair), 0 6px 22px rgba(0,0,0,.10);
}


/* ═══ §9  注意書き ════════════════════════════════════════════════════════
   ★ 掲載文の末尾の ※。**消さない。**これが無いと «正確な料金計算» の節が
     言い過ぎになる（料金は目安、というのがこのアプリの性質そのもの）。
   ★ 小さくはするが、薄くしすぎない（--fg-2 まで。--fg-3 だと 4.5:1 を割る
     大きさになる）。 */
.lptb .tb-note{
  margin: var(--tb-sec-gap) 0 0;
  padding-block-start: clamp(20px, 2.6vw, 28px);
  border-block-start: 1px solid var(--rule-2);
  max-inline-size: 44em;
  font-size: 13px;
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §10  扉 ═════════════════════════════════════════════════════════════
   ★★ **ストアのリンクは1本も無い（審査待ち）。**押せるものを出すと嘘になる。 */
.lptb .tb-act--gate{ margin-block-start: var(--tb-sec-gap); }
.lptb .tb-gate{
  padding: clamp(26px, 4vw, 44px);
  border-radius: var(--tb-r);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule-hair), var(--shadow-card);
  max-inline-size: 40em;
}
.lptb .tb-gate .tag{
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--accent-soft);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--fg-2);
}
.lptb .tb-gate h2{
  margin: 16px 0 0;
  font-size: clamp(19px, .9rem + 1.1vw, 27px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-1);
}
.lptb .tb-gate p{
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--fg-2);
}


/* ═══ §11  入場（一度きり）════════════════════════════════════════════════ */

html.js .lptb [data-in]{ opacity: 0; }
html.js .lptb [data-in].is-in{
  opacity: 1;
  animation: dw-fade-up var(--dur-in, .5s) var(--ease-inout) backwards;
}
html.js .lptb .tb-stage .tagline.is-in{ animation-delay: calc(var(--dur-step, .06s) * 1); }
html.js .lptb .tb-stage .tb-h1.is-in  { animation-delay: calc(var(--dur-step, .06s) * 2); }
html.js .lptb .tb-stage .lead.is-in   { animation-delay: calc(var(--dur-step, .06s) * 3); }
html.js .lptb .tb-stage .tb-mascot.is-in{ animation-delay: calc(var(--dur-step, .06s) * 2); }

@media print{
  html.js .lptb [data-in],
  html.js .lptb [data-in].is-in{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* ★ 呼吸とまばたきも止める。**止めた姿がそのまま素の絵**（scaleY(1)）なので、
     紙の上でも1pxも欠けない。 */
  html.js .lptb .tb-car,
  html.js .lptb .tb-eyes{ animation: none !important; transform: none !important; }
  .lptb .tb-shot img{ box-shadow: none; border: 1px solid #ccc; }
}


/* ═══ §12  ★ prefers-reduced-motion: reduce ═══════════════════════════════
   ★ Ryo さんの PC は **OS の設定で reduce が入っている**。ここが効いている
     ときが «既定の見え方» だと思って書くこと。 */

@media (prefers-reduced-motion: reduce){
  html .lptb,
  html .lptb *{ transition: none; }
  html .lptb *::before,
  html .lptb *::after{ transition: none; }
  html .lptb,
  html .lptb *{ animation-delay: 0s !important; }

  html.js .lptb [data-in],
  html.js .lptb [data-in].is-in{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* ★★ くるまくんは **止めるが、消さない。**
     呼吸もまばたきも «素の姿からの変形» なので、animation を切れば
     scaleY(1)・目は開いた丸、つまり **アイコンとまったく同じ絵** に戻る。
     ★ transform も !important で戻す。shell.css §6 が reduce のとき
       duration を .01ms にするが、**描かれていないタブではその .01ms が
       永久に終わらない**ので、途中の «目が潰れた顔» で固まる恐れがある
       （en 案の打ち込みで実際に踏んだ罠）。 */
  html.js .lptb .tb-car,
  html.js .lptb .tb-eyes{ animation: none !important; transform: none !important; }
}