/* ============================================================
   yohaku.css — 「余白」デザイン(モノトーン × 一色の群青 / 細いゴシック)

   白(または墨)の地に、細い罫線と、ひとつだけのアクセント(群青)。
   飾りは使わず、「大きな数字・文字の大小・余白・線」だけで見せる(誌面のような一覧)。
   書体は Zen Kaku Gothic New(細い・標準・太い)。vendor/fonts/ に同梱してある。

   <html data-skin="yohaku"> のときだけ効く。作り方は chic.css と同じ:
   1. tokens.css の変数(色・線・書体・形)を入れ替える → 既存の部品の色が、自動で変わる
   2. 形や飾りを変えたい部品だけを、この下で上書きする

   ★ 約束は変えない: 達成率を出さない / 赤を使わない / 空の枠を出さない
   ★ 明るい(白)と暗い(墨)の両方がある。端末の設定に従う(設定 → 見た目 で固定もできる)
   ★ 文字サイズ(--fs-*)は、ここでは変えない(設定の「文字の大きさ」を効かせるため)
   ============================================================ */

/* ---- 0. 書体(同梱。使うときに初めて読み込まれる) ---------- */
@font-face {
  font-family: "Zen Kaku Gothic New"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/zenkaku-300.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/zenkaku-400.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/zenkaku-700.woff2") format("woff2");
}

/* ---- 1. 色・書体・形の入れ替え ------------------------------ */
html:root[data-skin="yohaku"] {
  color-scheme: light;

  --bg:          #F6F6F2;
  --bg-card:     #FFFFFF;
  --bg-sunken:   #ECECE6;

  --line:        #D5D5CE;
  --line-strong: #8A8D96;

  --text:        #111214;
  --text-sub:    #4A4D56;
  --text-weak:   #5F626C;

  --accent:      #2330C8;   /* 群青(ひとつだけ) */
  --accent-2:    #2330C8;
  --accent-weak: #E3E5FA;
  --brown:       #2330C8;

  --warn:        #B4410F;
  --warn-weak:   #F6E6DC;

  --ink:         #111214;
  --on-ink:      #F6F6F2;

  --font: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-quote: var(--font);

  --radius:      0px;
  --radius-sm:   0px;
  --radius-full: 999px;
  --shadow:      none;
  --lh:          1.8;

  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  html:root[data-skin="yohaku"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #101114;
    --bg-card:     #181A1F;
    --bg-sunken:   #0B0C0E;
    --line:        #2A2C33;
    --line-strong: #6A6D78;
    --text:        #F2F2EE;
    --text-sub:    #B6B8C0;
    --text-weak:   #959AA6;
    --accent:      #8F9BFF;
    --accent-2:    #8F9BFF;
    --accent-weak: #1E2250;
    --brown:       #8F9BFF;
    --warn:        #F0996A;
    --warn-weak:   #2C211B;
    --ink:         #F2F2EE;
    --on-ink:      #101114;
  }
}
html:root[data-skin="yohaku"][data-theme="dark"] {
  color-scheme: dark;
  --bg:          #101114;
  --bg-card:     #181A1F;
  --bg-sunken:   #0B0C0E;
  --line:        #2A2C33;
  --line-strong: #6A6D78;
  --text:        #F2F2EE;
  --text-sub:    #B6B8C0;
  --text-weak:   #959AA6;
  --accent:      #8F9BFF;
  --accent-2:    #8F9BFF;
  --accent-weak: #1E2250;
  --brown:       #8F9BFF;
  --warn:        #F0996A;
  --warn-weak:   #2C211B;
  --ink:         #F2F2EE;
  --on-ink:      #101114;
}

html:root[data-skin="yohaku"] { --gutter: 24px; --tabbar-h: 60px; --header-h: 56px; }

html[data-skin="yohaku"] body { background: var(--bg); letter-spacing: 0.03em; }
html[data-skin="yohaku"] ::selection { background: var(--accent); color: var(--bg); }
html[data-skin="yohaku"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-skin="yohaku"] .view { padding-top: 28px; }

/* ---- 2. 見出し ----------------------------------------------- */
html[data-skin="yohaku"] h1,
html[data-skin="yohaku"] h2,
html[data-skin="yohaku"] h3 { font-weight: 700; letter-spacing: 0.04em; }
html[data-skin="yohaku"] .header__title { font-size: calc(15px * var(--fs-scale)); font-weight: 700; letter-spacing: 0.1em; }
html[data-skin="yohaku"] .section { margin-bottom: 36px; }
html[data-skin="yohaku"] .section__title {                 /* 見出し + 細い黒の罫線 */
  font-size: calc(15px * var(--fs-scale)); font-weight: 700; color: var(--text); letter-spacing: 0.06em;
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--ink);
}
html[data-skin="yohaku"] .section__title .ic { display: none; }
html[data-skin="yohaku"] .subtitle,
html[data-skin="yohaku"] .lead { color: var(--text-sub); }
html[data-skin="yohaku"] .meta { color: var(--text-weak); }

/* ---- 3. アイコン --------------------------------------------- */
html[data-skin="yohaku"] .ic { stroke: currentColor; stroke-width: 1.5; vertical-align: -0.18em; }
html[data-skin="yohaku"] .row__icon .ic,
html[data-skin="yohaku"] .sheet__icon .ic,
html[data-skin="yohaku"] .tile__icon .ic,
html[data-skin="yohaku"] .quote__mark .ic,
html[data-skin="yohaku"] .sheet__grid-item .ic,
html[data-skin="yohaku"] .row__avatar .ic,
html[data-skin="yohaku"] .person__photo .ic,
html[data-skin="yohaku"] .action .ic { stroke: var(--text); }
html[data-skin="yohaku"] .btn .ic,
html[data-skin="yohaku"] .chip .ic,
html[data-skin="yohaku"] .more .ic { margin-right: 0.4em; }

/* ---- 4. ヘッダー・下タブ -------------------------------------- */
html[data-skin="yohaku"] .header { background: var(--bg); border-bottom: 1px solid var(--line); }
html[data-skin="yohaku"] .header__action { color: var(--text); }
html[data-skin="yohaku"] .header__action:active { color: var(--accent); }

html[data-skin="yohaku"] .tabbar { background: var(--bg); border-top: 1px solid var(--ink); }
html[data-skin="yohaku"] .tabbar__item { position: relative; color: var(--text-weak); font-size: calc(13px * var(--fs-scale)); gap: 4px; letter-spacing: 0.02em; }
html[data-skin="yohaku"] .tabbar__item svg { stroke-width: 1.5; }
html[data-skin="yohaku"] .tabbar__item.is-active { color: var(--text); font-weight: 700; }
html[data-skin="yohaku"] .tabbar__item.is-active svg { stroke: var(--text); }
html[data-skin="yohaku"] .tabbar__item.is-active::before {   /* 選んでいる項目の上に、群青の太い線 */
  content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 3px; background: var(--accent);
}

/* ---- 5. 「＋」ボタン(四角) ------------------------------------- */
html[data-skin="yohaku"] .fab { background: var(--ink); color: var(--on-ink); border-radius: 0; box-shadow: none; }
html[data-skin="yohaku"] .fab .ic { stroke: var(--on-ink); stroke-width: 1.6; width: 24px; height: 24px; }
html[data-skin="yohaku"] .fab:active { background: var(--accent); }
html[data-skin="yohaku"] .fab:active .ic { stroke: var(--bg); }

/* ---- 6. カード・タイル ------------------------------------------- */
html[data-skin="yohaku"] .card { background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; padding: 20px 18px; }
html[data-skin="yohaku"] .tile {                              /* 記録の入口: 大きな数字 */
  align-items: flex-start; text-align: left; gap: 2px; padding: 18px 14px;
  background: transparent; border: 1px solid var(--ink); border-radius: 0; box-shadow: none;
}
html[data-skin="yohaku"] .tile__label { font-weight: 700; margin-top: 8px; }
html[data-skin="yohaku"] .tile__count { font-size: 30px; font-weight: 300; line-height: 1.2; color: var(--text); letter-spacing: -0.02em; }
html[data-skin="yohaku"] .tile:active { background: var(--accent-weak); }
html[data-skin="yohaku"] .quote { background: transparent; color: var(--text); border: none; border-radius: 0; box-shadow: none; padding: 0; }
html[data-skin="yohaku"] .quote__mark { color: var(--accent); font-size: calc(13px * var(--fs-scale)); letter-spacing: 0.14em; font-weight: 700; }
html[data-skin="yohaku"] .quote__text { font-weight: 400; }
html[data-skin="yohaku"] .quote__src { color: var(--text-weak); }
html[data-skin="yohaku"] .home__date { font-weight: 300; }
html[data-skin="yohaku"] .timerow__time,
html[data-skin="yohaku"] .timerow[class*="k-"] .timerow__time,
html[data-skin="yohaku"] .meta-time { color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---- 7. ボタン(四角・細い黒の線 / 黒ベタ) ----------------------- */
html[data-skin="yohaku"] .btn {
  min-height: 48px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--text);
  font-weight: 400; letter-spacing: 0.1em; box-shadow: none; transition: background .2s, color .2s;
}
html[data-skin="yohaku"] .btn:active { background: var(--accent-weak); }
html[data-skin="yohaku"] .btn--primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
html[data-skin="yohaku"] .btn--primary:active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
html[data-skin="yohaku"] .btn--primary .ic { stroke: var(--on-ink); }
html[data-skin="yohaku"] .btn--danger { background: transparent; border-color: var(--warn); color: var(--warn); }
html[data-skin="yohaku"] .btn--danger:active { background: var(--warn-weak); }
html[data-skin="yohaku"] .btn--danger .ic { stroke: var(--warn); }
html[data-skin="yohaku"] .btn--quiet { border-color: var(--line-strong); color: var(--text-sub); }
html[data-skin="yohaku"] .btn--small { min-height: 44px; font-size: calc(14px * var(--fs-scale)); }
html[data-skin="yohaku"] .more { color: var(--text-sub); letter-spacing: 0.1em; }

/* ---- 8. チップ(四角い札) ----------------------------------------- */
html[data-skin="yohaku"] .chip { border: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--text-sub); }
html[data-skin="yohaku"] .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
html[data-skin="yohaku"] .chip.is-active .ic { stroke: var(--on-ink); }
html[data-skin="yohaku"] .chip--suggest { border-style: dashed; color: var(--accent); }
html[data-skin="yohaku"] .chip--person { border-radius: 0; }

/* ---- 9. 入力欄(四角い線) ------------------------------------------ */
html[data-skin="yohaku"] .field,
html[data-skin="yohaku"] .editor__body,
html[data-skin="yohaku"] .editor__quote {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--ink); border-radius: 0; box-shadow: none; font-family: var(--font);
}
html[data-skin="yohaku"] .field:focus,
html[data-skin="yohaku"] .editor__body:focus,
html[data-skin="yohaku"] .editor__quote:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
html[data-skin="yohaku"] .field::placeholder,
html[data-skin="yohaku"] .editor__body::placeholder,
html[data-skin="yohaku"] .editor__title::placeholder { color: var(--text-weak); }
html[data-skin="yohaku"] .editor__body { line-height: 1.9; font-size: calc(var(--fs-md) + 1px); }
html[data-skin="yohaku"] .editor__title { font-weight: 700; background: transparent; border-bottom: 1px solid var(--ink); }
html[data-skin="yohaku"] .editor__title:focus { border-bottom-color: var(--accent); }
html[data-skin="yohaku"] .editor__date {                    /* 日付を、細くて大きな数字で */
  font-size: 34px; font-weight: 300; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px;
}
html[data-skin="yohaku"] .editor__label,
html[data-skin="yohaku"] .fieldrow__label { color: var(--text-sub); letter-spacing: 0.1em; }
html[data-skin="yohaku"] .switchrow input,
html[data-skin="yohaku"] .checkrow input,
html[data-skin="yohaku"] .dup__pick input { accent-color: var(--accent); }
html[data-skin="yohaku"] .dictate__btn { background: transparent; border: 1px solid var(--ink); border-radius: 0; color: var(--text); }
html[data-skin="yohaku"] .dictate__btn.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
@keyframes yohaku-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(35, 48, 200, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(35, 48, 200, 0); } }
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="yohaku"] .dictate__btn.is-on { animation: yohaku-pulse 1.4s ease-in-out infinite; }
}

/* ---- 10. チェックボックス ------------------------------------------- */
html[data-skin="yohaku"] .check__box { border: 1px solid var(--ink); border-radius: 0; background: transparent; }
html[data-skin="yohaku"] .check__box.is-done { background: var(--ink); border-color: var(--ink); }
html[data-skin="yohaku"] .check__box.is-done::after { border-color: var(--on-ink); }
html[data-skin="yohaku"] .check__title.is-done { color: var(--text-weak); }

/* ---- 11. 一覧の行(細い罫線) ------------------------------------------ */
html[data-skin="yohaku"] .row,
html[data-skin="yohaku"] .linkrow,
html[data-skin="yohaku"] .quoterow,
html[data-skin="yohaku"] .timerow,
html[data-skin="yohaku"] .fieldrow,
html[data-skin="yohaku"] .switchrow,
html[data-skin="yohaku"] .result,
html[data-skin="yohaku"] .sheet__item { border-bottom: 1px solid var(--line); }
html[data-skin="yohaku"] .row:last-child { border-bottom: none; }
html[data-skin="yohaku"] .row:active,
html[data-skin="yohaku"] .quoterow:active,
html[data-skin="yohaku"] .timerow:active { background: var(--accent-weak); }
html[data-skin="yohaku"] .row__avatar { background: var(--bg-card); border-radius: 0; box-shadow: 0 0 0 1px var(--line-strong); }
html[data-skin="yohaku"] .person__photo { background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 0; }
html[data-skin="yohaku"] .thumb { border: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; }
html[data-skin="yohaku"] .timerow[class*="k-"] { border-left: none; padding-left: 0; }

/* ---- 12. カレンダー --------------------------------------------------- */
html[data-skin="yohaku"] .cal__nav { color: var(--text); }
html[data-skin="yohaku"] .cal__label { font-weight: 300; font-size: calc(24px * var(--fs-scale)); letter-spacing: 0.04em; }
html[data-skin="yohaku"] .cal__cell { border: 1px solid transparent; border-radius: 0; }
html[data-skin="yohaku"] .cal__cell.is-today { color: var(--accent); font-weight: 700; }
html[data-skin="yohaku"] .cal__cell.is-selected { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
html[data-skin="yohaku"] .cal__cell.is-selected.is-today { color: var(--on-ink); }
html[data-skin="yohaku"] .cal__dot { border-radius: 0; box-shadow: none; }

/* ---- 13. シート・ダイアログ -------------------------------------------- */
html[data-skin="yohaku"] .overlay__scrim { background: rgba(10, 11, 14, 0.5); }
html[data-skin="yohaku"] .sheet__card { background: var(--bg); border-top: 1px solid var(--ink); border-radius: 0; }
html[data-skin="yohaku"] .sheet__title { font-weight: 700; letter-spacing: 0.12em; }
html[data-skin="yohaku"] .sheet__item:active { background: var(--accent-weak); }
html[data-skin="yohaku"] .sheet__grid-item { background: transparent; border: 1px solid var(--ink); border-radius: 0; color: var(--text); }
html[data-skin="yohaku"] .sheet__grid-item:active { background: var(--accent-weak); }
html[data-skin="yohaku"] .sheet__cancel { color: var(--text-sub); }
html[data-skin="yohaku"] .dialog__card { background: var(--bg); border: 1px solid var(--ink); border-radius: 0; box-shadow: none; }
html[data-skin="yohaku"] .dialog__title { font-weight: 700; }
html[data-skin="yohaku"] .viewer { background: rgba(10, 11, 14, 0.97); }

/* ---- 14. お知らせ・取り消し --------------------------------------------- */
html[data-skin="yohaku"] .snackbar { background: var(--ink); color: var(--on-ink); border-radius: 0; box-shadow: none; }
html[data-skin="yohaku"] .snackbar__action { color: var(--on-ink); }
html[data-skin="yohaku"] .updatebar { background: var(--bg); color: var(--text); border: 1px solid var(--accent); border-radius: 0; }
html[data-skin="yohaku"] .updatebar button { color: var(--accent); }
html[data-skin="yohaku"] .notice,
html[data-skin="yohaku"] .warnline { border: 1px solid var(--warn); background: var(--warn-weak); color: var(--warn); border-radius: 0; }
html[data-skin="yohaku"] .saved-pill { background: var(--bg-card); color: var(--text-sub); border: 1px solid var(--ink); border-radius: 0; box-shadow: none; }

/* ---- 15. はじめての画面・写真・ロック --------------------------------------- */
html[data-skin="yohaku"] .welcome__text { font-weight: 300; font-size: calc(var(--fs-lg) + 2px); line-height: 2; letter-spacing: 0.08em; }
html[data-skin="yohaku"] .dot { background: var(--line-strong); border-radius: 0; }
html[data-skin="yohaku"] .dot.is-on { background: var(--accent); }
html[data-skin="yohaku"] .scan__preview { border: 1px solid var(--line-strong); border-radius: 0; }
html[data-skin="yohaku"] .scan__state { color: var(--text); }
html[data-skin="yohaku"] .lock { background: var(--bg); }
html[data-skin="yohaku"] .lock__brand { color: var(--text-sub); letter-spacing: 0.3em; font-size: calc(13px * var(--fs-scale)); }
html[data-skin="yohaku"] .lock__title { font-weight: 300; font-size: calc(26px * var(--fs-scale)); }
html[data-skin="yohaku"] .lock__dot { border: 1px solid var(--ink); border-radius: 0; }
html[data-skin="yohaku"] .lock__dot.is-on { background: var(--ink); }
html[data-skin="yohaku"] .lock__key { background: transparent; border: 1px solid var(--ink); border-radius: 0; font-family: var(--font); font-weight: 300; }
html[data-skin="yohaku"] .lock__key:active { background: var(--ink); color: var(--on-ink); }
html[data-skin="yohaku"] .lock__key--blank { background: none; border: none; }
html[data-skin="yohaku"] .lock__danger { background: transparent; color: var(--warn); border: 1px solid var(--warn); border-radius: 0; }
html[data-skin="yohaku"] .dup__why.is-strong { color: var(--warn); }
html[data-skin="yohaku"] select.field option { background: var(--bg); color: var(--text); }

/* ---- 16. 操作のタイル・歴史書・ダッシュボード ---------------------------------- */
html[data-skin="yohaku"] .action { border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--text); min-height: 88px; }
html[data-skin="yohaku"] .action:active { background: var(--accent-weak); }
html[data-skin="yohaku"] .legend { color: var(--text-sub); }

html[data-skin="yohaku"] .book__name { font-weight: 300; font-size: 34px; letter-spacing: 0.04em; }
html[data-skin="yohaku"] .book__eyebrow,
html[data-skin="yohaku"] .book__chno,
html[data-skin="yohaku"] .book__tochead,
html[data-skin="yohaku"] .book__era { color: var(--accent); }
html[data-skin="yohaku"] .book__chname { font-weight: 300; font-size: calc(28px * var(--fs-scale)); }
html[data-skin="yohaku"] .book__text { line-height: 2; }
html[data-skin="yohaku"] .book__toc { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
html[data-skin="yohaku"] .book__entry { border-bottom: 1px solid var(--line); }

html[data-skin="yohaku"] .dash__eyebrow { color: var(--accent); letter-spacing: 0.3em; }
html[data-skin="yohaku"] .dash__seg { border: 1px solid var(--ink); border-radius: 0; padding: 0; gap: 0; }
html[data-skin="yohaku"] .dash__seg button { border-radius: 0; }
html[data-skin="yohaku"] .dash__seg button.is-active { background: var(--ink); color: var(--on-ink); }
html[data-skin="yohaku"] .dash__nav button { color: var(--text); }
html[data-skin="yohaku"] .dash__label { font-weight: 300; font-size: calc(26px * var(--fs-scale)); }
html[data-skin="yohaku"] .kpis { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
html[data-skin="yohaku"] .kpi + .kpi { border-left: 1px solid var(--line); }
html[data-skin="yohaku"] .kpi__num,
html[data-skin="yohaku"] .trio b,
html[data-skin="yohaku"] .totals b { font-weight: 300; letter-spacing: -0.02em; }
html[data-skin="yohaku"] .dcard { background: transparent; border: none; border-top: 1px solid var(--ink); border-radius: 0; padding: 20px 0; }
html[data-skin="yohaku"] .dcard__title { color: var(--text); font-weight: 700; letter-spacing: 0.2em; }
html[data-skin="yohaku"] .wk__day,
html[data-skin="yohaku"] .mini__cell { border-radius: 0; }
html[data-skin="yohaku"] .wk__day { border-color: var(--line); }
html[data-skin="yohaku"] .wk__day.is-today { border-color: var(--accent); }
html[data-skin="yohaku"] .mini__cell.is-today { color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
html[data-skin="yohaku"] .swatch { border-radius: 0; }

/* ============================================================
   17. ホーム(誌面のように)
   ============================================================ */
html[data-skin="yohaku"] .lp__hero { display: flex; flex-direction: column; padding: 0 0 8px; }

html[data-skin="yohaku"] .lp__bar {                      /* 上の帯: 名前と年月 */
  display: flex; order: 0; justify-content: space-between;
  font-size: calc(13px * var(--fs-scale)); letter-spacing: 0.16em; color: var(--text-weak);
}
html[data-skin="yohaku"] .lp__cal { display: flex; order: 1; align-items: flex-end; gap: 16px; margin-top: 14px; }
html[data-skin="yohaku"] .lp__cal-day {                  /* 大きな「08」 */
  font-size: 132px; font-weight: 300; line-height: 0.82; letter-spacing: -0.05em; margin-left: -6px;
  font-variant-numeric: lining-nums; color: var(--text);
}
html[data-skin="yohaku"] .lp__cal-side { padding-bottom: 6px; }
html[data-skin="yohaku"] .lp__cal-side b { display: block; font-size: calc(13px * var(--fs-scale)); font-weight: 700; letter-spacing: 0.16em; color: var(--accent); }
html[data-skin="yohaku"] .lp__cal-side i { display: block; font-style: normal; font-size: calc(20px * var(--fs-scale)); font-weight: 400; margin-top: 4px; color: var(--text); }
html[data-skin="yohaku"] .lp__cal-side em { display: block; font-style: normal; font-size: calc(13px * var(--fs-scale)); color: var(--text-weak); }

/* 日付の見出し・英語の日付は、大きな日付にまとめたので、画面には出さない(読み上げ用には残す) */
html[data-skin="yohaku"] .lp__hero .lp__date {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-skin="yohaku"] .lp__hero .lp__eyebrow { display: none; }

html[data-skin="yohaku"] .lp__greet {
  order: 3; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--ink);
  font-size: calc(22px * var(--fs-scale)); font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; color: var(--text);
}
html[data-skin="yohaku"] .lp__hero .quote { order: 4; margin: 18px 0 0; }
html[data-skin="yohaku"] .lp__hero .quote__text { font-size: calc(17px * var(--fs-scale)); line-height: 1.9; }
html[data-skin="yohaku"] .lp__hero .listen {              /* 黒い帯のボタン */
  order: 5; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;
  width: 100%; min-height: 56px; margin: 22px 0 0; padding: 0 20px;
  background: var(--ink); color: var(--on-ink); border: none; border-radius: 0;
  font-size: calc(16px * var(--fs-scale)); letter-spacing: 0.1em;
}
html[data-skin="yohaku"] .lp__hero .listen .ic { stroke: var(--on-ink); margin: 0; width: 22px; height: 22px; }
html[data-skin="yohaku"] .lp__hero .listen:active { background: var(--accent); color: var(--bg); }
html[data-skin="yohaku"] .lp__hero .listen:active .ic { stroke: var(--bg); }

html[data-skin="yohaku"] .lp__block { margin-top: 36px; }
html[data-skin="yohaku"] .lp__eyebrow { font-size: calc(13px * var(--fs-scale)); letter-spacing: 0.16em; color: var(--text-weak); font-weight: 400; margin-bottom: 8px; }
html[data-skin="yohaku"] .lp__h2 { font-size: calc(15px * var(--fs-scale)); font-weight: 700; letter-spacing: 0.06em; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
html[data-skin="yohaku"] .lp__grouptitle { margin: 26px 0 0; font-size: calc(13px * var(--fs-scale)); letter-spacing: 0.16em; color: var(--text-weak); }
html[data-skin="yohaku"] .lp__item { gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
html[data-skin="yohaku"] .lp__no { width: 28px; font-size: calc(13px * var(--fs-scale)); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
html[data-skin="yohaku"] .lp__label { font-size: calc(22px * var(--fs-scale)); font-weight: 400; line-height: 1.25; letter-spacing: 0.04em; }
html[data-skin="yohaku"] .lp__label small { font-size: calc(13px * var(--fs-scale)); margin-top: 3px; color: var(--text-weak); letter-spacing: 0.04em; }
html[data-skin="yohaku"] .lp__arrow { width: 22px; background: var(--ink); }
html[data-skin="yohaku"] .lp__arrow::after { border-color: var(--ink); }
html[data-skin="yohaku"] .lp__item:active { background: var(--accent-weak); }
html[data-skin="yohaku"] .lp__item:active .lp__arrow { background: var(--accent); }
html[data-skin="yohaku"] .lp__item:active .lp__arrow::after { border-color: var(--accent); }
html[data-skin="yohaku"] .lp__foot { color: var(--text-weak); letter-spacing: 0.3em; }

/* 今日の予定: 時刻 | 題名 | 種類(四角い色の印+名前) */
html[data-skin="yohaku"] .timerow { gap: 12px; padding: 12px 0; }
html[data-skin="yohaku"] .timerow__time { width: 52px; font-size: calc(15px * var(--fs-scale)); }
html[data-skin="yohaku"] .timerow .row__title { white-space: normal; font-size: calc(16px * var(--fs-scale)); }
html[data-skin="yohaku"] .timerow__cat {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; font-size: calc(13px * var(--fs-scale)); color: var(--text-sub);
}
html[data-skin="yohaku"] .timerow__cat::before { content: ""; width: 8px; height: 8px; background: var(--k, var(--accent)); }

/* ---- 動き: 静かに、すっと ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="yohaku"] .view { animation: yohaku-in 320ms cubic-bezier(.2, .7, .2, 1) both; }
  html[data-skin="yohaku"] .lp--enter .lp__hero > * { animation: yohaku-in 520ms cubic-bezier(.2, .7, .2, 1) both; }
  html[data-skin="yohaku"] .lp--enter .lp__hero > :nth-child(3) { animation-delay: 80ms; }
  html[data-skin="yohaku"] .lp--enter .lp__hero > :nth-child(4) { animation-delay: 160ms; }
  html[data-skin="yohaku"] .lp--enter .lp__hero > :nth-child(5) { animation-delay: 240ms; }
}
@keyframes yohaku-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }