/* ============================================================
   techo.css — 「手帳」デザイン(方眼ノート × 手書きふうの書体)

   方眼のノートに、蛍光ペンの線と、付箋、点線の罫。
   書体は Klee One(教科書体ふうの、手書きに近い書体)。vendor/fonts/ に同梱してある。

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

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

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

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

  --bg:          #FBFBF7;   /* ノートの紙 */
  --bg-card:     #FFFFFF;
  --bg-sunken:   #F0F1EA;

  --line:        #D3D9E2;
  --line-strong: #B2BAC8;
  --grid:        #EAEEF1;   /* 方眼 */
  --desk:        #E6E1D5;   /* ノートの外(綴じ穴から見える色) */

  --text:        #243049;   /* 青黒いインク */
  --text-sub:    #4C566C;
  --text-weak:   #626C82;

  --accent:      #2F4D8E;   /* 青いペン */
  --accent-2:    #2F4D8E;
  --accent-weak: #FFF0A8;   /* 蛍光ペン(うすい) */
  --brown:       #2F4D8E;

  --warn:        #8F5233;
  --warn-weak:   #F6E7DD;

  --ink:         #243049;   /* 濃い線・主なボタンの縁 */
  --on-ink:      #FBFBF7;
  --hard:        #243049;   /* ボタンの、ずらした影 */
  --marker:      #FFE27A;   /* 蛍光ペン */
  --on-marker:   #243049;
  --tape-sky:    #BCD8EE;
  --tape-mint:   #BFE3D0;
  --tape-pink:   #F5C9C4;

  --font: "Klee One", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-quote: var(--font);

  --radius:      8px;
  --radius-sm:   8px;
  --radius-full: 999px;
  --shadow:      2px 3px 0 rgba(36, 48, 73, 0.10);
  --lh:          1.8;
  --rule:        calc(32px * var(--fs-scale));   /* 罫線の間隔(文字の大きさに合わせる) */

  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  html:root[data-skin="techo"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #151A24;
    --bg-card:     #1D2431;
    --bg-sunken:   #111620;
    --line:        #2A3345;
    --line-strong: #3E4A62;
    --grid:        #1B2230;
    --desk:        #0B0F15;
    --text:        #E6E9F0;
    --text-sub:    #B2BACB;
    --text-weak:   #929CB2;
    --accent:      #A9BDF2;
    --accent-2:    #A9BDF2;
    --accent-weak: #3D3919;
    --brown:       #A9BDF2;
    --warn:        #E0A27E;
    --warn-weak:   #2C2420;
    --ink:         #E6E9F0;
    --on-ink:      #151A24;
    --hard:        #07090D;
    --marker:      #6A5E1F;
    --on-marker:   #F6F1D2;
    --tape-sky:    #2F4E6E;
    --tape-mint:   #2F5A49;
    --tape-pink:   #6A3F44;
    --shadow:      2px 3px 0 rgba(0, 0, 0, 0.35);
  }
}
html:root[data-skin="techo"][data-theme="dark"] {
  color-scheme: dark;
  --bg:          #151A24;
  --bg-card:     #1D2431;
  --bg-sunken:   #111620;
  --line:        #2A3345;
  --line-strong: #3E4A62;
  --grid:        #1B2230;
  --desk:        #0B0F15;
  --text:        #E6E9F0;
  --text-sub:    #B2BACB;
  --text-weak:   #929CB2;
  --accent:      #A9BDF2;
  --accent-2:    #A9BDF2;
  --accent-weak: #3D3919;
  --brown:       #A9BDF2;
  --warn:        #E0A27E;
  --warn-weak:   #2C2420;
  --ink:         #E6E9F0;
  --on-ink:      #151A24;
  --hard:        #07090D;
  --marker:      #6A5E1F;
  --on-marker:   #F6F1D2;
  --tape-sky:    #2F4E6E;
  --tape-mint:   #2F5A49;
  --tape-pink:   #6A3F44;
  --shadow:      2px 3px 0 rgba(0, 0, 0, 0.35);
}

/* 余白と寸法(綴じ穴のぶん、左を少し広く) */
html:root[data-skin="techo"] { --gutter: 20px; --tabbar-h: 60px; --header-h: 56px; }

html[data-skin="techo"] body { background: var(--bg); letter-spacing: 0.02em; }
html[data-skin="techo"] ::selection { background: var(--marker); color: var(--on-marker); }
html[data-skin="techo"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 2. 方眼の紙・綴じ穴 ------------------------------------ */
html[data-skin="techo"] #app {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
html[data-skin="techo"] body::before {            /* 綴じ穴(左はしに3つ) */
  content: ""; position: fixed; left: 7px; top: 0; bottom: 0; width: 14px; z-index: 1; pointer-events: none;
  background-repeat: no-repeat; background-size: 14px 14px;
  background-image:
    radial-gradient(circle at 7px 7px, var(--desk) 5px, var(--line-strong) 5.5px, var(--line-strong) 6.5px, transparent 7px),
    radial-gradient(circle at 7px 7px, var(--desk) 5px, var(--line-strong) 5.5px, var(--line-strong) 6.5px, transparent 7px),
    radial-gradient(circle at 7px 7px, var(--desk) 5px, var(--line-strong) 5.5px, var(--line-strong) 6.5px, transparent 7px);
  background-position: 0 24%, 0 52%, 0 80%;
}
html[data-skin="techo"] .view { padding-left: 34px; padding-right: var(--gutter); }

/* ---- 3. 見出し ----------------------------------------------- */
html[data-skin="techo"] h1,
html[data-skin="techo"] h2,
html[data-skin="techo"] h3 { font-weight: 600; letter-spacing: 0.04em; }
html[data-skin="techo"] .header__title { font-weight: 600; font-size: calc(18px * var(--fs-scale)); letter-spacing: 0.06em; }
html[data-skin="techo"] .section__title { font-size: calc(19px * var(--fs-scale)); font-weight: 600; color: var(--text); letter-spacing: 0.04em; }
html[data-skin="techo"] .subtitle,
html[data-skin="techo"] .lead { color: var(--text-sub); }
html[data-skin="techo"] .meta { color: var(--text-weak); }

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

/* ---- 5. ヘッダー・下タブ -------------------------------------- */
html[data-skin="techo"] .header {
  background: var(--bg);
  border-bottom: 1.5px dashed var(--line-strong);
  padding-left: 30px;
}
html[data-skin="techo"] .header__action { color: var(--text); }
html[data-skin="techo"] .header__action:active { color: var(--accent); }

html[data-skin="techo"] .tabbar {
  background: var(--bg);
  border-top: 1.5px solid var(--ink);
}
html[data-skin="techo"] .tabbar__item { color: var(--text-weak); font-size: calc(13px * var(--fs-scale)); gap: 3px; letter-spacing: 0.02em; }
html[data-skin="techo"] .tabbar__item svg {       /* どのタブも同じ大きさの枠(文字の高さをそろえる) */
  stroke-width: 1.6; box-sizing: border-box; width: 52px; height: 30px; padding: 4px 15px; border-radius: 15px;
}
html[data-skin="techo"] .tabbar__item .emo { height: 30px; }
html[data-skin="techo"] .tabbar__item.is-active { color: var(--text); font-weight: 600; }
html[data-skin="techo"] .tabbar__item.is-active svg {       /* 蛍光ペンで、丸く囲む */
  background: var(--marker); stroke: var(--on-marker);
}

/* ---- 6. 「＋」ボタン ------------------------------------------- */
html[data-skin="techo"] .fab {
  background: var(--marker); color: var(--on-marker);
  border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--hard);
}
html[data-skin="techo"] .fab .ic { stroke: var(--on-marker); stroke-width: 2; width: 24px; height: 24px; }
html[data-skin="techo"] .fab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hard); }

/* ---- 7. カード・タイル ------------------------------------------ */
html[data-skin="techo"] .card,
html[data-skin="techo"] .tile {
  background: var(--bg-card); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
html[data-skin="techo"] .tile:active { background: var(--accent-weak); }
html[data-skin="techo"] .tile { position: relative; }
html[data-skin="techo"] .tile::before {               /* マスキングテープ */
  content: ""; position: absolute; top: -9px; left: 50%; width: 46px; height: 15px; margin-left: -23px;
  transform: rotate(-2deg); background: var(--marker); opacity: 0.92;
}
html[data-skin="techo"] .tile:nth-child(4n+2)::before { background: var(--tape-sky); transform: rotate(2deg); }
html[data-skin="techo"] .tile:nth-child(4n+3)::before { background: var(--tape-mint); }
html[data-skin="techo"] .tile:nth-child(4n)::before   { background: var(--tape-pink); transform: rotate(2deg); }
html[data-skin="techo"] .quote {
  background: var(--bg-card); color: var(--text); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
html[data-skin="techo"] .quote__mark { color: var(--text-sub); }
html[data-skin="techo"] .quote__src { color: var(--text-sub); }
html[data-skin="techo"] .home__date { font-weight: 600; }
html[data-skin="techo"] .timerow__time,
html[data-skin="techo"] .timerow[class*="k-"] .timerow__time,
html[data-skin="techo"] .meta-time { color: var(--text-sub); }

/* ---- 8. ボタン(縁取り+ずらした影。押すと、沈む) --------------- */
html[data-skin="techo"] .btn {
  min-height: 48px; border: 1.5px solid var(--ink); border-radius: 12px;
  background: var(--bg-card); color: var(--text); font-weight: 600; letter-spacing: 0.04em;
  box-shadow: 3px 3px 0 var(--hard);
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
}
html[data-skin="techo"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hard); }
html[data-skin="techo"] .btn--primary { background: var(--marker); border-color: var(--ink); color: var(--on-marker); }
html[data-skin="techo"] .btn--primary .ic { stroke: var(--on-marker); }
html[data-skin="techo"] .btn--danger { background: var(--bg-card); border-color: var(--warn); color: var(--warn); box-shadow: 3px 3px 0 var(--warn-weak); }
html[data-skin="techo"] .btn--danger .ic { stroke: var(--warn); }
html[data-skin="techo"] .btn--quiet { border: 1.5px dashed var(--line-strong); color: var(--text-sub); box-shadow: none; font-weight: 400; }
html[data-skin="techo"] .btn--quiet:active { transform: none; }
html[data-skin="techo"] .btn--small { min-height: 44px; font-size: calc(14px * var(--fs-scale)); border-radius: 10px; box-shadow: 2px 2px 0 var(--hard); }
html[data-skin="techo"] .more { color: var(--text-sub); }

/* ---- 9. チップ(付箋のような札) -------------------------------- */
html[data-skin="techo"] .chip {
  border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--bg-card); color: var(--text-sub);
}
html[data-skin="techo"] .chip.is-active { background: var(--marker); border-color: var(--ink); color: var(--on-marker); font-weight: 600; }
html[data-skin="techo"] .chip.is-active .ic { stroke: var(--on-marker); }
html[data-skin="techo"] .chip--suggest { border-style: dashed; color: var(--text-sub); }
html[data-skin="techo"] .listen {
  color: var(--text); border: 1.5px solid var(--ink); background: var(--bg-card); font-weight: 600;
  box-shadow: 3px 3px 0 var(--hard);
}
html[data-skin="techo"] .listen:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hard); }

/* ---- 10. 入力欄(罫線の入ったページ) ----------------------------- */
html[data-skin="techo"] .field,
html[data-skin="techo"] .editor__body,
html[data-skin="techo"] .editor__quote {
  background-color: var(--bg-card); color: var(--text);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: none; font-family: var(--font);
}
html[data-skin="techo"] .field:focus,
html[data-skin="techo"] .editor__body:focus,
html[data-skin="techo"] .editor__quote:focus { outline: none; border-color: var(--ink); box-shadow: 3px 3px 0 var(--marker); }
html[data-skin="techo"] .field::placeholder,
html[data-skin="techo"] .editor__body::placeholder,
html[data-skin="techo"] .editor__title::placeholder { color: var(--text-weak); }
/* 本文は、罫線の上に書く */
html[data-skin="techo"] .editor__body,
html[data-skin="techo"] .field--area {
  line-height: var(--rule); padding: 4px 14px 0;
  background-image: repeating-linear-gradient(transparent 0, transparent calc(var(--rule) - 1px), var(--line) calc(var(--rule) - 1px), var(--line) var(--rule));
  background-position: 0 4px; background-attachment: local;
}
html[data-skin="techo"] .editor__title { font-weight: 600; background: transparent; border-bottom: 1.5px dashed var(--line-strong); }
html[data-skin="techo"] .editor__title:focus { border-bottom-color: var(--ink); }
html[data-skin="techo"] .editor__date {
  display: inline-block; color: var(--text); font-weight: 600;
  background: linear-gradient(transparent 58%, var(--marker) 58%); padding: 0 4px;
}
html[data-skin="techo"] .editor__label,
html[data-skin="techo"] .fieldrow__label { color: var(--text-sub); }
html[data-skin="techo"] .switchrow input,
html[data-skin="techo"] .checkrow input,
html[data-skin="techo"] .dup__pick input { accent-color: var(--accent); }
html[data-skin="techo"] .dictate__btn { background: var(--bg-card); border: 1.5px solid var(--ink); color: var(--text); }
html[data-skin="techo"] .dictate__btn.is-on { background: var(--marker); color: var(--on-marker); border-color: var(--ink); }
@keyframes techo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 226, 122, 0.7); } 50% { box-shadow: 0 0 0 9px rgba(255, 226, 122, 0); } }
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="techo"] .dictate__btn.is-on { animation: techo-pulse 1.4s ease-in-out infinite; }
}

/* ---- 11. チェックボックス ---------------------------------------- */
html[data-skin="techo"] .check__box { border: 1.5px solid var(--ink); border-radius: 5px; background: var(--bg-card); }
html[data-skin="techo"] .check__box.is-done { background: var(--marker); border-color: var(--ink); }
html[data-skin="techo"] .check__box.is-done::after { border-color: var(--on-marker); }
html[data-skin="techo"] .check__title.is-done { color: var(--text-weak); }

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

/* ---- 13. カレンダー ------------------------------------------------ */
html[data-skin="techo"] .cal__nav { color: var(--text); }
html[data-skin="techo"] .cal__label { font-weight: 600; letter-spacing: 0.1em; }
html[data-skin="techo"] .cal__cell { border: 1.5px solid transparent; border-radius: 6px; }
html[data-skin="techo"] .cal__cell.is-today { color: var(--text); font-weight: 600; background: linear-gradient(transparent 58%, var(--marker) 58%); }
html[data-skin="techo"] .cal__cell.is-selected { background: var(--marker); color: var(--on-marker); border-color: var(--ink); }
html[data-skin="techo"] .cal__cell.is-selected.is-today { background: var(--marker); }
html[data-skin="techo"] .cal__dot { box-shadow: none; }

/* ---- 14. シート・ダイアログ ---------------------------------------- */
html[data-skin="techo"] .overlay__scrim { background: rgba(21, 26, 36, 0.45); }
html[data-skin="techo"] .sheet__card {
  background: var(--bg); border-top: 1.5px solid var(--ink); border-radius: 18px 18px 0 0;
}
html[data-skin="techo"] .sheet__title { font-weight: 600; letter-spacing: 0.08em; }
html[data-skin="techo"] .sheet__item:active { background: var(--accent-weak); }
html[data-skin="techo"] .sheet__grid-item {
  background: var(--bg-card); border: 1.5px solid var(--ink); border-radius: 12px; color: var(--text);
  box-shadow: 2px 2px 0 var(--hard);
}
html[data-skin="techo"] .sheet__grid-item:active { background: var(--accent-weak); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--hard); }
html[data-skin="techo"] .sheet__cancel { color: var(--text-sub); }
html[data-skin="techo"] .dialog__card {
  background: var(--bg-card); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--hard);
}
html[data-skin="techo"] .dialog__title { font-weight: 600; }
html[data-skin="techo"] .viewer { background: rgba(14, 17, 24, 0.97); }

/* ---- 15. お知らせ・取り消し ------------------------------------------ */
html[data-skin="techo"] .snackbar {
  background: var(--ink); color: var(--on-ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--hard);
}
html[data-skin="techo"] .snackbar__action { color: var(--on-ink); }
html[data-skin="techo"] .updatebar {
  background: var(--marker); color: var(--on-marker); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--hard);
}
html[data-skin="techo"] .updatebar button { color: var(--on-marker); }
html[data-skin="techo"] .notice,
html[data-skin="techo"] .warnline { border: 1.5px dashed var(--warn); background: var(--warn-weak); color: var(--warn); border-radius: var(--radius-sm); }
html[data-skin="techo"] .saved-pill { background: var(--tape-mint); color: var(--text); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--hard); }

/* ---- 16. はじめての画面 ------------------------------------------------ */
html[data-skin="techo"] .welcome__text { font-weight: 400; line-height: 2.1; }
html[data-skin="techo"] .dot { background: var(--line-strong); }
html[data-skin="techo"] .dot.is-on { background: var(--ink); }

/* ---- 17. 写真から読み取る ------------------------------------------------ */
html[data-skin="techo"] .scan__preview { border: 1.5px solid var(--line-strong); }
html[data-skin="techo"] .scan__state { color: var(--text); }

/* ---- 18. アプリロック ------------------------------------------------------ */
html[data-skin="techo"] .lock { background: var(--bg); }
html[data-skin="techo"] .lock__brand { color: var(--text-sub); letter-spacing: 0.2em; }
html[data-skin="techo"] .lock__dot { border: 1.5px solid var(--ink); }
html[data-skin="techo"] .lock__dot.is-on { background: var(--ink); border-color: var(--ink); }
html[data-skin="techo"] .lock__key { background: var(--bg-card); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--hard); font-family: var(--font); }
html[data-skin="techo"] .lock__key:active { background: var(--marker); color: var(--on-marker); transform: translate(2px, 2px); box-shadow: none; }
html[data-skin="techo"] .lock__key--blank { background: none; border: none; box-shadow: none; }
html[data-skin="techo"] .lock__danger { background: var(--bg-card); color: var(--warn); border: 1.5px solid var(--warn); }
html[data-skin="techo"] .dup__why.is-strong { color: var(--warn); }
html[data-skin="techo"] select.field option { background: var(--bg); color: var(--text); }

/* ---- 19. 操作のタイル・歴史書・ダッシュボード --------------------------------- */
html[data-skin="techo"] .action {
  border: 1.5px solid var(--ink); border-radius: 12px; background: var(--bg-card); min-height: 88px;
  box-shadow: 2px 2px 0 var(--hard); color: var(--text);
}
html[data-skin="techo"] .action:nth-child(3n+1) { background: var(--marker); color: var(--on-marker); }
html[data-skin="techo"] .action:nth-child(3n+2) { background: var(--tape-sky); }
html[data-skin="techo"] .action:nth-child(3n)   { background: var(--tape-mint); }
html[data-skin="techo"] .action:nth-child(3n+1) .ic { stroke: var(--on-marker); }
html[data-skin="techo"] .action:active { transform: translate(2px, 2px); box-shadow: none; }
html[data-skin="techo"] .legend { color: var(--text-sub); }

html[data-skin="techo"] .book__name { font-weight: 600; letter-spacing: 0.12em; }
html[data-skin="techo"] .book__eyebrow,
html[data-skin="techo"] .book__chno,
html[data-skin="techo"] .book__tochead,
html[data-skin="techo"] .book__era { color: var(--text-sub); }
html[data-skin="techo"] .book__chname { font-weight: 600; }
html[data-skin="techo"] .book__text { line-height: 2.1; }
html[data-skin="techo"] .book__toc { border-top: 1.5px dashed var(--line-strong); border-bottom: 1.5px dashed var(--line-strong); }
html[data-skin="techo"] .book__entry { border-bottom: 1.5px dashed var(--line-strong); }

html[data-skin="techo"] .dash__eyebrow { color: var(--text-sub); letter-spacing: 0.3em; }
html[data-skin="techo"] .dash__seg { border: 1.5px solid var(--ink); border-radius: 12px; }
html[data-skin="techo"] .dash__seg button { border-radius: 8px; }
html[data-skin="techo"] .dash__seg button.is-active { background: var(--marker); color: var(--on-marker); font-weight: 600; }
html[data-skin="techo"] .dash__nav button { color: var(--text); }
html[data-skin="techo"] .dash__label { font-weight: 600; }
html[data-skin="techo"] .kpis { border-top: 1.5px dashed var(--line-strong); border-bottom: 1.5px dashed var(--line-strong); }
html[data-skin="techo"] .kpi + .kpi { border-left: 1.5px dashed var(--line-strong); }
html[data-skin="techo"] .kpi__num,
html[data-skin="techo"] .trio b,
html[data-skin="techo"] .totals b { font-weight: 600; }
html[data-skin="techo"] .dcard { border: 1.5px solid var(--line-strong); box-shadow: var(--shadow); }
html[data-skin="techo"] .dcard__title { color: var(--text); font-size: calc(14px * var(--fs-scale)); letter-spacing: 0.2em; font-weight: 600; }
html[data-skin="techo"] .wk__day,
html[data-skin="techo"] .mini__cell { border-radius: 6px; }
html[data-skin="techo"] .wk__day.is-today { border: 1.5px solid var(--ink); background: var(--marker); color: var(--on-marker); }
html[data-skin="techo"] .wk__day.is-today .wk__dow,
html[data-skin="techo"] .wk__day.is-today .wk__count { color: var(--on-marker); }
html[data-skin="techo"] .mini__cell.is-today { color: var(--text); box-shadow: 0 0 0 1.5px var(--ink) inset; background: var(--marker); }

/* ============================================================
   20. ホーム(手帳のページ)
   ============================================================ */
html[data-skin="techo"] .lp__hero { display: flex; flex-direction: column; padding: 8px 0 28px; }
html[data-skin="techo"] .lp__date {                /* 日付に、蛍光ペンの線 */
  order: 1; align-self: flex-start;
  font-size: 44px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3;
  background: linear-gradient(transparent 58%, var(--marker) 58%); padding: 0 6px; margin: 0;
}
html[data-skin="techo"] .lp__eyebrow {
  text-transform: none; letter-spacing: 0.06em; font-size: calc(14px * var(--fs-scale)); color: var(--text-sub); margin: 8px 0 0;
}
html[data-skin="techo"] .lp__hero .lp__eyebrow { order: 2; }
html[data-skin="techo"] .lp__greet { order: 3; margin: 10px 0 0; font-size: calc(15px * var(--fs-scale)); color: var(--text-sub); }
html[data-skin="techo"] .lp__hero .quote {                   /* 付箋 */
  order: 4; position: relative; align-self: flex-start; max-width: 100%;
  margin: 26px 0 0; padding: 14px 18px 12px;
  background: var(--marker); color: var(--on-marker);
  border: none; border-radius: 2px; box-shadow: 2px 3px 0 rgba(36, 48, 73, 0.16);
  transform: rotate(-1.2deg);
}
html[data-skin="techo"] .lp__hero .quote::before {           /* マスキングテープ */
  content: ""; position: absolute; top: -10px; left: 50%; width: 54px; height: 18px; margin-left: -27px;
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(36, 48, 73, 0.12); transform: rotate(2deg);
}
html[data-skin="techo"] .lp__hero .quote__mark { color: var(--on-marker); font-size: calc(13px * var(--fs-scale)); opacity: 0.9; margin-bottom: 6px; }
html[data-skin="techo"] .lp__hero .quote__text { font-size: calc(18px * var(--fs-scale)); line-height: 1.8; color: var(--on-marker); }
html[data-skin="techo"] .lp__hero .quote__src { color: var(--on-marker); opacity: 0.9; }
html[data-skin="techo"] .lp__hero .listen { order: 5; margin: 22px 0 0; justify-content: center; width: 100%; min-height: 50px; font-size: calc(17px * var(--fs-scale)); border-radius: 14px; }

html[data-skin="techo"] .lp__block { margin-top: 36px; }
html[data-skin="techo"] .lp__block > .lp__eyebrow { display: none; }     /* 見出しがあるので、英語の小見出しは省く */
html[data-skin="techo"] .lp__index > .lp__eyebrow { display: block; }
html[data-skin="techo"] .lp__h2 { font-size: calc(22px * var(--fs-scale)); font-weight: 600; margin: 0 0 4px; letter-spacing: 0.08em; }
html[data-skin="techo"] .lp__grouptitle {                     /* 蛍光ペンの札 */
  display: inline-block; margin: 22px 0 4px; padding: 2px 14px; border-radius: 999px;
  font-size: calc(13px * var(--fs-scale)); font-weight: 600; letter-spacing: 0.1em; color: var(--text); background: var(--marker);
}
html[data-skin="techo"] .lp__group:nth-of-type(2) .lp__grouptitle { background: var(--tape-sky); }
html[data-skin="techo"] .lp__group:nth-of-type(3) .lp__grouptitle { background: var(--tape-mint); }
html[data-skin="techo"] .lp__group:nth-of-type(4) .lp__grouptitle { background: var(--tape-pink); }
html[data-skin="techo"] .lp__item { padding: 12px 2px 10px; border-bottom: 1.5px dotted var(--line-strong); gap: 12px; }
html[data-skin="techo"] .lp__no { color: var(--text-sub); font-size: calc(14px * var(--fs-scale)); width: 26px; }
html[data-skin="techo"] .lp__label { font-size: calc(18px * var(--fs-scale)); font-weight: 600; letter-spacing: 0.04em; }
html[data-skin="techo"] .lp__label small { font-size: calc(13px * var(--fs-scale)); font-weight: 400; color: var(--text-sub); }
html[data-skin="techo"] .lp__arrow { background: var(--text-weak); }
html[data-skin="techo"] .lp__arrow::after { border-color: var(--text-weak); }
html[data-skin="techo"] .lp__item:active { background: var(--accent-weak); }
html[data-skin="techo"] .lp__foot { color: var(--text-weak); letter-spacing: 0.3em; }

/* 今日の予定: 題名は折り返す(書体が幅広いので、省略せずに全部見せる)。種類の名前を、付箋の札で */
html[data-skin="techo"] .timerow .row__title { white-space: normal; }
html[data-skin="techo"] .timerow__time { width: 50px; font-size: calc(15px * var(--fs-scale)); }
html[data-skin="techo"] .timerow__cat {
  display: inline-flex; flex: 0 0 auto; align-items: center;
  font-size: calc(13px * var(--fs-scale)); padding: 2px 9px; border-radius: 4px; color: var(--text);
  background: var(--bg-sunken);
  background: color-mix(in srgb, var(--k, var(--tape-sky)) 28%, var(--bg-card));
}

/* ---- 動き: ページをめくるように、そっと ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="techo"] .view { animation: techo-in 380ms cubic-bezier(.2, .7, .2, 1) both; }
  html[data-skin="techo"] .lp--enter .lp__hero > * { animation: techo-in 600ms cubic-bezier(.2, .7, .2, 1) both; }
  html[data-skin="techo"] .lp--enter .lp__hero > :nth-child(2) { animation-delay: 80ms; }
  html[data-skin="techo"] .lp--enter .lp__hero > :nth-child(3) { animation-delay: 160ms; }
  html[data-skin="techo"] .lp--enter .lp__hero > :nth-child(4) { animation-delay: 240ms; }
  html[data-skin="techo"] .lp--enter .lp__hero > :nth-child(5) { animation-delay: 320ms; }
}
@keyframes techo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 付箋は、少し傾いたまま現れる(動きの最後に、傾きが消えないように) */
@keyframes techo-in-quote { from { opacity: 0; transform: translateY(8px) rotate(-1.2deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="techo"] .lp--enter .lp__hero > .quote { animation-name: techo-in-quote; }
}