/* journal.css — ADR-LG-020 D5 ジャーナル意匠の共有スタイル（意匠の正本は design.md）。
   Phase B は app.html から読み込む。Phase D で他ページへ展開するときも本ファイルを共有する。
   外部依存なし（Tailwind/Font Awesome CDN を使わず自前CSS。テクスチャは data URI の SVG feTurbulence）。 */

:root {
  --desk-navy: #04152b;
  --desk-pale: #e6f0f9;  /* Tak FB 2026-08-09：本文の地は淡い青（2回目FBでさらに淡く。紺はヘッダー/フッター/カレンダーのみ） */
  --ink: #1a2a40;
  --ink-deep: #0b1c31;
  --paper: #f4fafd;
  --peri-light: #dbe2fa;
  --peri-mid: #b7c7e4;
  --blue-gray: #8191ac;
  --slate: #5d6478;
  --text-strong: #161d1f;
  --text-sub: #44474d;
  --craft-blue: #dbe2fa;
  --recycled: #e2e9ec;
  --jl-error: #ba1a1a;
  --font-head: 'Playfair Display', 'Noto Serif JP', Georgia, serif;
  --font-hand: 'Playfair Display', 'Noto Serif JP', Georgia, serif;
  /* 革の質感（design.md核心要素①「レザー/ファブリック質感」）。
     Tak FB 2026-08-09（6周目）＝Italian Saffiano レザー（MOTHERHOUSE系参考）の
     「細かい格子の型押し＋角度で表情が変わる艶」を、写真は使わず（商用商品写真の
     無断組み込みは著作権上できないため）自前CSSで近似する：
     ①細かい格子の型押し（対角2方向のクロスハッチ、明暗の線で凹凸を表現）
     ②広い斜めの艶スイープ（見る角度で表情が変わる光沢）
     ③粒状のグレイン（革そのものの微細な凹凸）
     ヘッダー/カレンダー/フッター等の紺系chromeに background-blend-mode:overlay
     で重ねて使う。 */
  --jl-leather:
    repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(25deg, rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 5px),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.18) 45%, rgba(255,255,255,.03) 75%, rgba(0,0,0,.10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='lg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23lg)' opacity='0.18'/%3E%3C/svg%3E");
}

/* ===== 机の背景（淡い青 + 薄い透かし質感。紺はヘッダー/フッター/カレンダーのみ）
   Tak FB 2026-08-09：「もう少し質感が欲しい・薄い透かしのようなデザイン」への対応。
   手帳のドット方眼（bullet journal 風）を極薄で敷く＋既存のノイズ粒状感を重ねる。 */
.jl-desk {
  background-color: var(--desk-pale);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2.5' cy='2.5' r='1.4' fill='%231a2a40' fill-opacity='0.09'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 28px 28px, auto;
}


/* ===== アプリ共通ヘッダ（design.md「部品の声」ヘッダ・全ページ同形状の chrome）
   2026-09-05: 12ファイルに同一定義が重複していたため共有 SSOT へ引き上げ（doc-sync T12）。
   本ファイルは各ページの <style> より先に読まれるため、ページ側の同名宣言が従来どおり優先される
   ＝既存ページの見えは不変（追加のみ）。新規ページは本定義だけで同じヘッダが得られる。
   ページ固有なのは全幅化の負マージン（.wrap の余白量に依存）だけ＝各ページで指定する。
   右上は sync.js の同期バッジ（#_lf_badge・z-index最大）が占有するため、ページ名は左に置く。 */
.app-header {
  position: sticky; top: 0; z-index: 36; height: 60px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 18px;
  background-color: rgba(4, 21, 43, .96);
  background-image: var(--jl-leather);
  background-blend-mode: overlay;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
}
.app-header .logo-img { height: 44px; width: auto; display: block; }
.app-header .page-name {
  position: absolute; left: 18px;
  font-family: var(--font-head); font-size: 11px; letter-spacing: .06em; color: var(--peri-light);
}

/* ===== 紙カード ===== */
.paper-card {
  position: relative;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  border-radius: 4px 26px 4px 26px;
  box-shadow: 0 14px 26px rgba(4, 21, 43, .38), 0 3px 8px rgba(4, 21, 43, .28);
}
/* 質感バリエーション（design.md「紙カードの質感4種」） */
.paper-card.tex-craft {
  background-color: var(--craft-blue);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");
}
.paper-card.tex-recycled {
  background-color: var(--recycled);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
.paper-card.tex-lined {
  background-image: repeating-linear-gradient(var(--paper) 0 27px, var(--peri-light) 27px 28px);
}
/* 微傾き（±1°交互）。カード単位で個別付与も可（.tilt-l / .tilt-r） */
.paper-card.tilt-l { transform: rotate(-1deg); }
.paper-card.tilt-r { transform: rotate(1deg); }

/* 真鍮クリップ（design.md 核心要素④・削らない宣言）。
   .paper-card::before で自動付与＝JS の innerHTML 差し替えで消えない
   （子要素として置くと render() のたびに上書きされるため）。
   不要な場合だけ .no-clip を付与。横型は .clip-side。 */
.paper-card::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 40px; height: 16px;
  margin-left: -20px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--peri-mid), var(--blue-gray));
  box-shadow: 0 2px 5px rgba(4, 21, 43, .5);
}
.paper-card::after {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--ink-deep);
}
.paper-card.no-clip::before, .paper-card.no-clip::after { content: none; }
.paper-card.clip-side::before {
  top: 50%; left: -8px;
  width: 16px; height: 40px;
  margin-left: 0; margin-top: -20px;
  background: linear-gradient(90deg, var(--peri-mid), var(--blue-gray));
}
.paper-card.clip-side::after {
  top: 50%; left: -1px;
  margin-left: 0; margin-top: -2.5px;
}

/* ===== ボタン ===== */
.gold-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body, inherit);
  font-size: 13px; font-weight: 600;
  color: var(--ink-deep);
  background: linear-gradient(180deg, var(--peri-light), var(--peri-mid));
  border: none; border-radius: 999px;
  padding: 8px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 5px rgba(4, 21, 43, .25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gold-btn:hover { filter: brightness(1.04); }
.gold-btn:active { transform: translateY(1px); }
.gold-btn:disabled { opacity: .4; cursor: default; filter: none; }
.gold-btn.gold-btn-round { border-radius: 50%; width: 32px; height: 32px; padding: 0; }
.gold-btn.gold-btn-active { background: linear-gradient(180deg, var(--peri-mid), var(--blue-gray)); }

/* ===== セクションピル・ナビ（アンカージャンプ） ===== */
.section-pills {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 2px 2px 10px;
  margin-bottom: 18px;
  scrollbar-width: none;
}
.section-pills::-webkit-scrollbar { display: none; }
.section-pills a {
  flex: 0 0 auto;
  font-size: 12px; font-weight: 600;
  color: var(--ink-deep);
  text-decoration: none;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(26, 42, 64, .18);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.section-pills a:hover, .section-pills a:focus-visible {
  background: #fff;
  color: var(--ink);
  border-color: var(--blue-gray);
}

/* ===== 手書き風入力欄 ===== */
.handwriting-input {
  font-family: var(--font-hand);
  font-style: italic;
  font-size: 15px;
  color: var(--text-strong);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--blue-gray);
  transform: rotate(-1deg);
  padding: 4px 2px;
  width: 100%;
}
.handwriting-input:focus { outline: none; border-bottom-color: var(--ink); }

/* ===== 体調アイコン5段階 ===== */
.cond-row { display: flex; gap: 10px; justify-content: space-between; }
.cond-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
  opacity: .55;
}
.cond-btn .cond-face {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  border: 2px dashed transparent;
  background: var(--recycled);
}
.cond-btn .cond-text { font-size: 10px; color: var(--text-sub); }
.cond-btn.selected { opacity: 1; }
.cond-btn.selected .cond-face {
  background: var(--ink); color: #fff;
  border-color: var(--peri-mid);
}

/* ===== 週の自己約束 ===== */
.commit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--blue-gray);
}
.commit-row:first-child { border-top: none; }
.commit-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--ink); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.commit-check.done { background: var(--ink); }
.commit-text { flex: 1; font-size: 13.5px; color: var(--text-strong); }
.commit-row.done .commit-text { text-decoration: line-through; color: var(--slate); }

/* ===== 仕事タイムライン ===== */
.timeline { position: relative; padding-left: 18px; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px;
  width: 1px; background: var(--blue-gray);
}
.timeline-row { position: relative; padding: 4px 0 10px; }
.timeline-row::before {
  content: ""; position: absolute; left: -18px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.timeline-time {
  font-size: 11px; color: var(--slate); letter-spacing: .04em;
}
.timeline-text { font-size: 13.5px; color: var(--text-strong); margin-top: 2px; }

/* ===== 下部固定ナビ（journal 版・app.html スコープ）
   スマホ最適化（Tak FB 2026-08-09）：タップ領域 48px 以上・折返し防止・
   safe-area は左右individually・OTHERSポップアップはバー高さと連動。 ===== */
.jl-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  background-color: rgba(4, 21, 43, .96);
  background-image: var(--jl-leather);
  background-blend-mode: overlay;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .35);
  padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  font-family: var(--font-body, inherit);
}
.jl-bottom-nav a, .jl-bottom-nav summary {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  text-align: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--peri-light);
  text-decoration: none;
  padding: 8px 2px;
  min-height: 50px;
  border-radius: 10px;
  border: none; background: none;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.jl-bottom-nav a .nav-icon, .jl-bottom-nav summary .nav-icon { font-size: 16px; line-height: 1; }
.jl-bottom-nav a .nav-text, .jl-bottom-nav summary .nav-text { line-height: 1; }
.jl-bottom-nav summary::-webkit-details-marker { display: none; }
.jl-bottom-nav a[aria-current="page"], .jl-bottom-nav summary[aria-current="page"] {
  color: #fff;
  background: rgba(219, 226, 250, .14);
}
.jl-bottom-nav .app-nav-others { position: static; flex: 1; display: flex; }
.jl-bottom-nav .app-nav-others-list {
  position: fixed; left: 8px; right: 8px;
  bottom: 66px;
  max-height: 60vh;
  overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--desk-navy);
  border: 1px solid rgba(219, 226, 250, .25);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .4);
}
@media (max-width: 380px) {
  .jl-bottom-nav a, .jl-bottom-nav summary { font-size: 9px; letter-spacing: 0; padding: 10px 1px; }
}
.jl-bottom-nav .app-nav-others-list a {
  flex: 0 0 auto;
  text-transform: none; font-size: 12.5px; font-weight: 500;
  background: rgba(219, 226, 250, .1);
  border: 1px solid rgba(219, 226, 250, .2);
  border-radius: 999px;
  padding: 9px 14px;
}