/* ============================================================
site-chrome.css — オコジョさんの庭 共通デザインシステム v2
暖色・オーガニックテーマ／コンパクトヘッダー／右端フライアウトナビ
既存の完成済みページ（tools/, music/theory/ 内）は当面インライン
スタイルのまま据え置き、無理に寄せない（仕様書8章の方針）。
ただし本ファイルを読み込むページは自動でこのテーマになる。
フォントは各ページので以下を読み込む想定（このファイルからは
@importしない＝表示速度を優先）:
============================================================ */
:root{
/* ---- 既存名を維持しつつ、値だけ暖色オーガニックへ差し替え ---- */
--teal:#d9814f; /* 旧: 水色 → クレイ（テラコッタ）に差し替え。主要アクセント */
--teal-deep:#a1552b;
--violet:#8aab6d; /* 旧: 紫 → モス（セージグリーン）。セカンダリ */
--violet-deep:#4f6b3c;
--coral:#b98bb0; /* 旧: 赤珊瑚 → プラム。ラベル・タグ用のポイントカラー */
--coral-deep:#7c4f74;
--cream:#f9f0e1; /* 暖色オフホワイト（紙の色） */
--ink:#46331f; /* 暖色の濃い茶インク */
--muted:#7a6248; /* 暖色の落ち着いた茶 */
--line:#e2cfa8; /* 暖色の罫線色 */
/* ---- 新規トークン ---- */
--den:#3a2415; /* ヘッダー/ナビの深い巣穴色 */
--den-warm:#5c3a20;
--paper-deep:#f0e1c4; /* セクションの背景を少し変えたい時用 */
--paper-card:#fffaf7; /* カードの下地（旧#fffaf2相当） */
--pop: rgba(58,36,21,.20); /* ベタ影（ステッカー風） */
--r-s:14px; --r-m:22px; --r-l:30px;
--home-btn-w:clamp(2.5em,9vw,3.4em);
/* ---- 用途別パステル（花壇の色分け／ナビの目印に使用） ---- */
--clay:var(--teal); --clay-deep:var(--teal-deep); --clay-soft:#f4ddc6;
--moss:var(--violet); --moss-deep:var(--violet-deep); --moss-soft:#e3ecd5;
--plum:var(--coral); --plum-deep:var(--coral-deep); --plum-soft:#f0dced;
--mustard:#d9a53f; --mustard-deep:#875c14; --mustard-soft:#f4e4bd;
--rose:#d9948a; --rose-deep:#a45a4f; --rose-soft:#f6e0db;
--lavender:#a696c4;--lavender-deep:#6c5a91;--lavender-soft:#e9e0f3;
--harebell:#8fadd0;--harebell-deep:#4c6e93;--harebell-soft:#dfe9f3;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
font-family:'Zen Maru Gothic','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',Meiryo,sans-serif;
margin:0; padding:0;
background:var(--cream);
color:var(--ink);
line-height:1.8;
position:relative;
}
/* 紙のざらつき（うっすら・サイト全体） */
body::before{
content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
opacity:.045; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
header, nav, main, footer{ position:relative; z-index:1; }
:focus-visible{ outline:3px solid var(--teal-deep); outline-offset:2px; border-radius:4px; }
/* ---------- header（コンパクト・アニメーションなし） ---------- */
header{
background:linear-gradient(135deg,var(--den-warm),var(--den) 75%);
color:var(--cream); padding:.85em 0 .6em; text-align:center;
position:sticky; top:0; z-index:1000;
box-shadow:0 3px 8px rgba(0,0,0,.14);
}
header h1{
margin:0; font-weight:900; letter-spacing:.02em; font-size:1.3em;
display:inline-flex; align-items:center; gap:.35em;
}
header h1 svg{ width:.8em; height:.8em; color:#e9d2b2; flex:none; }
header .header-sub{
margin:.2em 0 0; font-size:.76em; opacity:.82; font-weight:500;
font-family:'Yomogi',cursive;
}
.header-wave{ line-height:0; margin-top:-2px; }
.header-wave svg{ width:100%; height:14px; display:block; }
.header-wave path{ fill:var(--cream); }
/* ---------- header home button（左端いっぱいの「ホームへ戻る」） ---------- */
.header-home-btn{
position:absolute; left:0; top:0; bottom:0; z-index:2;
display:flex; align-items:center; justify-content:center;
width:var(--home-btn-w);
color:var(--cream); text-decoration:none;
background:rgba(255,255,255,.05);
border-right:2px solid rgba(233,210,178,.22);
transition:background .15s ease, transform .15s ease;
}
.header-home-btn:hover, .header-home-btn:focus-visible{ background:rgba(255,255,255,.16); }
.header-home-btn:active{ transform:scale(.94); }
.header-home-btn svg{ width:46%; height:46%; }
.header-okojo-avatar{
position:absolute; left:var(--home-btn-w); top:0; bottom:0;
z-index:2; line-height:0;
}
.header-okojo-avatar img{ display:block; height:100%; width:auto; }
@media (max-width:600px){ .header-okojo-avatar{ display:none; } }
/* ---------- nav（右端フライアウト・コンパクト・手作り感） ----------
.nav-handle は常にその場（navbarの実サイズを決める通常フロー要素）。
.nav-panel は absolute + z-index で、開いた時にハンドルの真上に
重なって覆い隠す（横に並んで両方見える状態を作らない）。 */
#navbar{
position:fixed; top:50%; right:0; transform:translateY(-50%);
z-index:1000;
}
.nav-handle{
position:relative; z-index:1;
writing-mode:vertical-rl; text-orientation:mixed;
background:var(--den-warm); color:var(--cream); border:none; cursor:pointer;
font-family:'Yomogi',cursive; font-size:.82rem; letter-spacing:.14em;
padding:.8em .3em; border-radius:14px 0 0 14px;
box-shadow:-3px 4px 0 var(--pop);
transform:translateX(0); opacity:1;
transition:padding .15s ease, transform .22s ease, opacity .22s ease;
}
.nav-handle:hover, .nav-handle:focus-visible{ padding-right:.5em; }
/* メニュータブが開く瞬間、ハンドルは左へスライドして消える。
閉じる時は同じ経路を通って左から戻ってくる。 */
@media (hover:hover){
#navbar:hover .nav-handle{ transform:translateX(-18px); opacity:0; }
}
#navbar.open .nav-handle{ transform:translateX(-18px); opacity:0; }
.nav-panel{
position:absolute; top:50%; right:0; z-index:2;
list-style:none; margin:0; padding:.6em; display:flex; flex-direction:column; gap:.35em;
background:var(--den-warm); border-radius:16px 0 0 16px; box-shadow:-4px 4px 0 var(--pop);
transform:translate(106%,-50%); opacity:0; visibility:hidden;
transition:transform .22s ease, opacity .22s ease;
max-height:80vh; overflow-y:auto;
}
@media (hover:hover){
#navbar:hover .nav-panel{ transform:translate(0,-50%); opacity:1; visibility:visible; }
}
#navbar.open .nav-panel{ transform:translate(0,-50%); opacity:1; visibility:visible; }
.nav-link{
position:relative; display:flex; align-items:center; gap:.5em;
background:var(--cream); color:var(--ink); text-decoration:none; font-weight:700; font-size:.82rem;
white-space:nowrap; padding:.42em .85em .42em .65em;
border-radius:12px 4px 12px 4px; border:2px solid var(--den-warm);
box-shadow:2px 2px 0 var(--pop); transition:transform .15s ease;
}
.nav-link::before{
content:""; width:6px; height:6px; border-radius:50%; flex:none;
background:var(--dot, var(--teal-deep));
}
.nav-panel li:nth-child(odd) .nav-link{ transform:rotate(-1deg); }
.nav-panel li:nth-child(even) .nav-link{ transform:rotate(1deg); }
.nav-link:hover, .nav-link:focus-visible{ transform:translateX(-3px) rotate(0deg); }
.nav-link.current{ background:var(--den-warm); color:var(--cream); border-color:var(--cream); }
.nav-link.current::before{ background:var(--cream); }
.nav-link[data-dot="moss"]{ --dot:var(--moss-deep); }
.nav-link[data-dot="mustard"]{ --dot:var(--mustard-deep); }
.nav-link[data-dot="harebell"]{ --dot:var(--harebell-deep); }
.nav-link[data-dot="plum"]{ --dot:var(--plum-deep); }
.nav-link[data-dot="rose"]{ --dot:var(--rose-deep); }
.nav-link[data-dot="lavender"]{ --dot:var(--lavender-deep); }
.nav-link[data-dot="clay"]{ --dot:var(--clay-deep); }
/* ---------- footer ---------- */
footer#footer{
background:var(--den-warm); color:var(--cream); text-align:center;
padding:1.3em 1em 1.5em; font-size:.88em;
}
footer#footer a{ color:#f0dcc0; font-weight:700; text-decoration:none; }
footer#footer a:hover{ text-decoration:underline; }
.container{ max-width:880px; margin:0 auto; padding:1.8em 1.4em 3.2em; }
/* ---------- shared type & layout ---------- */
h2{ font-size:1.5em; font-weight:900; margin:1.7em 0 .5em; color:var(--teal-deep); }
h2 .eyebrow{
display:block; font-size:.5em; letter-spacing:.03em; font-weight:700;
color:var(--coral-deep); margin-bottom:.35em; font-family:'Yomogi',cursive;
}
section p{ margin:.6em 0; }
.lead{ font-size:1.05em; color:var(--ink); }
small.note{ color:var(--muted); font-size:.85em; }
.card{
background-color:var(--paper-card);
border:2px solid var(--line);
border-radius:var(--r-m);
box-shadow:3px 4px 0 var(--pop);
padding:1.3em 1.5em; margin:1.1em 0;
transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--pop); }
.btn{
display:inline-flex; align-items:center; gap:.35em;
margin:.5em .3em .2em 0; padding:.6em 1.3em;
background:var(--clay-soft); color:var(--teal-deep); border:2px solid var(--teal-deep);
text-decoration:none; border-radius:999px; font-weight:700;
box-shadow:3px 3px 0 var(--pop); transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--pop); }
.btn:active{ transform:translate(0,0); box-shadow:1px 1px 0 var(--pop); }
.btn.secondary-btn{
background:var(--moss-soft); color:var(--violet-deep); border-color:var(--violet-deep);
}
.hero{ padding-top:.4em; }
.hero .eyebrow{
font-family:'Yomogi',cursive; letter-spacing:.03em; font-size:.9em;
color:var(--coral-deep); font-weight:700;
}
.hero h1{ font-size:1.9em; font-weight:900; margin:.3em 0 .3em; color:var(--ink); }
.hero .lead{ color:var(--muted); max-width:38em; }
.card-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1em; margin:1.1em 0;
}
.card-grid .card{ margin:0; }
.card-grid .card h3{ margin:.1em 0 .4em; color:var(--teal-deep); font-size:1.05em; }
.card-grid .card p{ color:var(--muted); font-size:.92em; margin:.2em 0 .8em; }
.tag{
display:inline-block; font-size:.76em; font-family:'Yomogi',cursive;
color:var(--coral-deep); background:rgba(124,79,116,.14); border-radius:99px;
padding:.15em .75em; margin:0 .3em .3em 0; font-weight:700;
}
.breadcrumb{ font-size:.8em; color:var(--muted); margin:0 0 1em; }
.breadcrumb a{ color:var(--teal-deep); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.placeholder-box{
border:2px dashed var(--line); border-radius:var(--r-m); padding:2em;
text-align:center; color:var(--muted); background:rgba(255,255,255,.5);
}
/* ---------- entrance animation（ページ読込時のみ・軽め） ---------- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.reveal{ opacity:0; animation:riseIn .6s cubic-bezier(.22,1,.36,1) forwards; }
.reveal:nth-of-type(1){ animation-delay:.04s; }
.reveal:nth-of-type(2){ animation-delay:.12s; }
.reveal:nth-of-type(3){ animation-delay:.2s; }
@media (prefers-reduced-motion:reduce){ .reveal{ animation:none; opacity:1; } }
/* ============================================================
blog article / listing — ブログ記事ページ・一覧ページ用
（BlogAdmin管理ツールが生成するcontent.htmlをそのまま流し込む前提）
============================================================ */
.blog-article .post-date{ color:var(--muted); font-size:.85em; margin:0 0 .1em; }
.blog-article .post-date .post-updated{ margin-left:.4em; }
.blog-article .post-title{ font-size:1.7em; font-weight:900; margin:.15em 0 .5em; color:var(--ink); }
.blog-article .post-tags{ margin:0 0 1em; }
.blog-article .post-tags .tag{ text-decoration:none; }
.blog-article .post-cover{ width:100%; max-height:360px; object-fit:cover; border-radius:var(--r-m); margin:0 0 1.2em; box-shadow:3px 4px 0 var(--pop); }
.post-body{ font-size:1.03em; }
.post-body h2{ font-size:1.3em; margin:1.6em 0 .5em; }
.post-body h3{ font-size:1.1em; margin:1.3em 0 .5em; color:var(--violet-deep); }
/* Enter1回＝詰めた改行(
)で書く運用なので、段落そのものの余白は控えめに。
はっきり間を空けたい時は空行（＝独立した段落）を挟む（BlogAdmin側の挙動と対応） */
.post-body p{ margin:0; }
.post-body ul, .post-body ol{ margin:.75em 0; padding-left:1.4em; }
.post-body li{ margin:.35em 0; }
.post-body figure{ margin:1.1em 0; text-align:center; }
.post-body figure img{ max-width:100%; border-radius:var(--r-s); box-shadow:3px 4px 0 var(--pop); }
.post-body figcaption{ font-size:.82em; color:var(--muted); margin-top:.5em; }
.post-body img{ max-width:100%; border-radius:var(--r-s); }
.post-body blockquote{
border-left:4px solid var(--teal); margin:1em 0; padding:.5em 1em; color:var(--muted);
background:var(--paper-deep); border-radius:0 var(--r-s) var(--r-s) 0;
}
.post-body hr{ border:none; border-top:2px dashed var(--line); margin:1.8em 0; }
.post-body a{ color:var(--teal-deep); }
/* 「コーヒーを奢る」ボタン（2026-08-30追加）：BlogAdminのrender.jsが全記事の末尾に自動挿入する。
可愛く・控えめに＝小さめフォント／ブログのカテゴリ色（rose）／ステッカー風の軽い影のみ。 */
.post-coffee{
margin:2.4em 0 .3em; padding-top:1.1em;
border-top:1px dashed var(--line);
text-align:center;
}
.post-coffee-note{
font-family:'Yomogi',cursive; font-size:.82em; color:var(--muted);
margin:0 0 .55em;
}
.coffee-btn{
display:inline-flex; align-items:center; gap:.35em;
padding:.35em .85em; font-size:.78em; font-weight:700;
font-family:'Zen Maru Gothic','Hiragino Kaku Gothic ProN',sans-serif;
background:var(--rose-soft); color:var(--rose-deep); border:2px solid var(--rose-deep);
border-radius:999px; text-decoration:none; line-height:1.4;
box-shadow:2px 2px 0 var(--pop); transition:transform .15s ease, box-shadow .15s ease;
}
.coffee-btn:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--pop); }
.coffee-btn:active{ transform:translate(0,0); box-shadow:1px 1px 0 var(--pop); }
.coffee-btn-emoji{ font-size:1em; }
/* 脚注（BlogAdminの「脚注」ボタンが挿入する.fn-marker / .footnotes と対応） */
.post-body .fn-marker a{ color:var(--coral-deep); text-decoration:none; font-weight:700; }
.post-body .footnotes{
margin-top:2.2em; padding-top:1em; border-top:1px dashed var(--line);
font-size:.85em; color:var(--muted);
}
.post-body .footnotes-title{ font-weight:700; color:var(--ink); margin:0 0 .5em; }
.post-body .footnotes ol{ padding-left:1.3em; }
.post-body .fn-back{ color:var(--teal-deep); text-decoration:none; margin-left:.3em; }
/* コード進行の埋め込みプレースホルダー（将来Okojo-Chordsのプレイヤーに差し替え予定） */
.post-body .chord-embed-placeholder{
border:2px dashed var(--mustard-deep); border-radius:var(--r-m); padding:.9em 1.1em; margin:1.2em 0;
background:var(--mustard-soft); color:var(--mustard-deep); font-weight:700;
}
/* YouTube/ニコニコ動画/Spotify/Xのリンクプレビュー埋め込み（BlogAdminのリンク挿入から） */
.post-body .embed-card{ margin:1.2em 0; }
.post-body .embed-youtube, .post-body .embed-nico{
position:relative; width:100%; padding-top:56.25%; border-radius:var(--r-m); overflow:hidden;
background:#000; box-shadow:3px 4px 0 var(--pop);
}
.post-body .embed-youtube iframe, .post-body .embed-nico iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.post-body .embed-spotify iframe{ width:100%; height:152px; border:0; border-radius:12px; }
.post-body .twitter-tweet{ margin:1.2em 0; }
/* 楽器パート別の動き（メロディ/ハモリ/ベースなど）を色分けして書くための小さなブロック */
.post-body .music-note{
background:var(--paper-deep); border-radius:var(--r-s); padding:.7em 1em; margin:.6em 0;
font-family:'JetBrains Mono',monospace; font-size:.92em;
}
.post-body .music-note .mn-line{ display:block; }
.post-body .music-note .mn-label{ font-weight:900; margin-right:.5em; }
.post-body .music-note .mn-melody{ color:var(--ink); }
.post-body .music-note .mn-harmony{ color:var(--harebell-deep); }
.post-body .music-note .mn-bass{ color:var(--mustard-deep); }
.post-body .music-note .mn-annot{ color:var(--muted); font-size:.88em; margin-left:.6em; font-family:'Zen Maru Gothic',sans-serif; }
/* ---- ブログ一覧（/blog/）：タグ絞り込み・検索 ---- */
.blog-toolbar{ display:flex; flex-wrap:wrap; gap:.6em; align-items:center; margin:1em 0 1.4em; }
.blog-search{
flex:1; min-width:180px; padding:.55em .9em; border:2px solid var(--line); border-radius:999px;
font-family:inherit; font-size:.95em; background:#fff; color:var(--ink);
}
.blog-tagfilter{ display:flex; flex-wrap:wrap; gap:.4em; }
.blog-tagfilter button{
font-family:'Yomogi',cursive; font-size:.82em; font-weight:700; cursor:pointer;
border:none; border-radius:999px; padding:.3em .85em; background:rgba(124,79,116,.14); color:var(--coral-deep);
}
.blog-tagfilter button.active{ background:var(--coral-deep); color:#fff; }
.blog-list{ display:flex; flex-direction:column; gap:1em; margin:1.2em 0; }
.blog-list .card{ margin:0; display:flex; gap:1.1em; align-items:flex-start; }
.blog-list .card .bl-thumb{ width:120px; height:90px; object-fit:cover; border-radius:var(--r-s); flex:none; box-shadow:2px 3px 0 var(--pop); }
.blog-list .card .bl-main{ flex:1; min-width:0; }
.blog-list .card h3{ margin:.1em 0 .3em; font-size:1.1em; color:var(--teal-deep); }
.blog-list .card h3 a{ color:inherit; text-decoration:none; }
.blog-list .card h3 a:hover{ text-decoration:underline; }
.blog-list .card .bl-date{ font-size:.78em; color:var(--muted); }
.blog-list .card p{ color:var(--muted); font-size:.92em; margin:.3em 0 .5em; }
@media (max-width:520px){
.blog-list .card{ flex-direction:column; }
.blog-list .card .bl-thumb{ width:100%; height:150px; }
}