/*
* sketchy.css — Claude Design v3 由来の手書き風テーマ。
*
* 大枠のみ提供 (テーマ変数 / body / navbar / box / btn / toast / 文字サイズ)。
* 個別画面 (ダッシュボードチャート等) のクラスは、機能実装時にこのファイルへ追記する。
*
* フォント (Patrick Hand / Caveat / Kalam) は public/fonts/ に woff2 同梱、
* 下記 @font-face で local 配信 (= Issue #145 Capacitor 初回起動時 FOUT 対策、
* かつ Web 版でもネットワーク待ち削減)。
* → CSP を有効化する場合は font-src 'self' のみで足り、fonts.gstatic.com の許可は不要。
*/
/* ローカル同梱フォント (= Google Fonts latin subset 相当)。日本語は system-ui fallback。
Caveat は variable font (= 単一 woff2 で 500/700 両対応)、Kalam は static (= weight 別)、
Patrick Hand は 400 のみ。unicode-range は Google Fonts 配信の latin subset と同一範囲。 */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("/fonts/caveat-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Kalam';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/kalam-400-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Kalam';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/kalam-700-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Patrick Hand';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/patrick-hand-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--ink: #1a1a1a;
--ink-2: #3a3a3a;
--paper: #fbf8f1;
--paper-2: #f3eee0;
--muted: #6e6b60;
--accent: #ff7a45;
--accent-2: #ffd23f;
--accent-3: #4ea8de;
--accent-4: #7ac74f;
/* danger (危険ゾーン / 破壊的操作) */
--danger: #cc0000;
--danger-bg: #ffe5e5;
--danger-soft-border: rgba(204,0,0,0.35); /* sketch-box-danger-soft 用、削除より弱い警告強度 */
/* navbar 高さ参照変数。navbar 自体の高さは padding/content で決まり、この変数に引きずられない。
参照側 (flash toast の top-offset 等) が --navbar-height を使うことで、
navbar 高さを変更した際に参照箇所を一括更新できる (= Issue #174 B)。
基準値 64px = padding 8px×2 + ボタン約 46px + border-bottom 2px (= Issue #49 slim 化後の実測値)。
iPhone PWA 端末では env(safe-area-inset-top) が 8px を超える分だけ追加で拡大 (= Issue #190)。 */
--navbar-height: calc(64px + max(0px, env(safe-area-inset-top, 0px) - 8px));
}
/* body 全体を紙質背景に。layout から bg-base-200 は外す前提。
min-height 100vh は viewport 短コンテンツ時に下端余白が崩れる事象 (= Web 版で稀に「下が切れる」) への予防策。 */
html, body { min-height: 100vh; }
body {
background: var(--paper);
background-image:
radial-gradient(circle at 20% 10%, rgba(0,0,0,0.025) 0 1px, transparent 1px),
radial-gradient(circle at 80% 60%, rgba(0,0,0,0.02) 0 1px, transparent 1px);
background-size: 8px 8px, 12px 12px;
color: var(--ink);
font-family: 'Patrick Hand', 'Kalam', system-ui, sans-serif;
}
/* ---------- navbar ---------- */
/* Issue #49: padding 14px → 8px に縮小して navbar 高さを 74px → 約 64px に slim 化。
ボタン自体の高さ 46px は維持するため WCAG 2.5.5 (= 44px タップ領域) は引き続き満たす。
Issue #47 (= sketch-btn 全体 44px 化) のゴールと両立する設計、design-reviewer 事前相談で確定。
sticky 化 (= position: sticky; top: 0): スクロール時も navbar が常時画面上部に残る。
z-index: 30 < flash toast z-50 のため、トーストは navbar より前面に出る (= 階層整合済)。
background: var(--paper) は半透明背景 (= scroll で下のコンテンツが透けるのを防ぐ) と
sticky 重なり時の視認性確保のためそのまま維持。 */
.sketch-navbar {
display: flex; align-items: center; justify-content: space-between;
/* iPhone PWA / Dynamic Island 端末で padding-top を env(safe-area-inset-top) に拡大、ノッチ侵入回避 (= Issue #190)。
Android Chrome / Desktop は env = 0px のため max(8px, 0px) = 8px で従来挙動維持。
env(..., 0px) 第 2 引数は古い Chrome (< 69) / IE 等の未サポート環境向け fallback。
padding-bottom 8px は固定 (= 画面下端の safe-area-inset-bottom は navbar の下端には発生しない)。
--navbar-height も連動して env 値ぶん拡大するため、flash toast の top-offset も追従する。 */
padding: max(8px, env(safe-area-inset-top, 0px)) 20px 8px; gap: 12px;
border-bottom: 2px solid var(--ink);
background: var(--paper);
position: sticky; top: 0; z-index: 30;
/* transition は本体側に置く: .is-scrolled 側にだけ書くと付く方向のみ効いて
外す方向 (scroll up) で shadow が即時消滅して「バグっぽい」印象になるため (3 者レビュー指摘)。 */
transition: box-shadow .15s ease;
}
.sketch-navbar-title {
font-family: 'Caveat', cursive; font-weight: 700; font-size: 32px;
line-height: 1; color: var(--ink); text-decoration: none;
}
/* "daily." の下に黄色マーカーを引く swoosh 装飾。
SVG 背景画像で上下端にゆらぎを入れた蛍光ペン跡を描く (linear-gradient は直線で機械的に見えるため不採用)。
preserveAspectRatio=none で文字幅に応じて横に伸縮、background-size で文字の下半分にだけ帯を表示。 */
.sketch-swoosh {
display: inline-block;
padding: 0 6px;
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 42%;
background-image: url("data:image/svg+xml;utf8,");
}
/* scroll 中は浮遊感として shadow を付与。
navbar_scroll_controller.js が window.scrollY > 4px のとき .is-scrolled を element に付与する。
transition は .sketch-navbar 本体に書いてあるため両方向 (付く / 外す) で .15s ease が効く。
JS は class の付け外しのみ担当 (= 責務分離)。 */
.sketch-navbar.is-scrolled {
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.sketch-navbar-right { display: flex; align-items: center; gap: 12px; }
.sketch-navbar-name {
font-family: 'Kalam', cursive; font-size: 14px; color: var(--ink-2);
max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ---------- button ---------- */
/* button_to が