/* 誕生色と和色メモ v2「色見本帳」: 生成り地・墨色・明朝見出し・標本ラベル */
:root{
  --accent:#7a8b5a;
  --ink:#2e2a24; --ink-soft:#6f675a;
  --paper:#f8f3e8; --paper-deep:#f1e9d8; --card:#fffdf7;
  --line:#ddd2ba; --line-dark:#b9ab8d;
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.85;font-size:16px}
a{color:var(--ink)}
/* ヘッダー: 細い二重罫の見本帳表紙 */
.site-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 12px;background:var(--paper);border-bottom:1px solid var(--ink);box-shadow:0 3px 0 -2px var(--paper),0 4px 0 -1px var(--line-dark);flex-wrap:wrap;gap:6px}
.logo{font-family:var(--serif);font-weight:600;letter-spacing:.06em;color:var(--ink);text-decoration:none;font-size:1.12rem}
.site-head nav a{margin-left:16px;color:var(--ink);text-decoration:none;font-size:.9rem;letter-spacing:.04em}
.site-head nav a:hover{text-decoration:underline;text-underline-offset:4px}
main{max-width:920px;margin:0 auto;padding:22px 16px 56px}
h1{font-family:var(--serif);font-weight:600;font-size:1.65rem;line-height:1.45;letter-spacing:.03em;margin:.2em 0 .35em}
h2{font-family:var(--serif);font-weight:600;font-size:1.22rem;letter-spacing:.04em;margin:38px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line-dark);box-shadow:inset 4px 0 0 -1px var(--paper),inset 7px 0 0 -1px var(--accent);padding-left:14px}
h3{font-family:var(--serif);font-size:1.05rem;margin:20px 0 6px}
.crumb{font-size:.74rem;letter-spacing:.22em;color:var(--ink-soft);margin:0 0 4px;text-transform:uppercase}
.reading{color:var(--ink-soft);letter-spacing:.08em;margin-top:0}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.94em;background:var(--paper-deep);padding:1px 7px;border:1px solid var(--line)}
button{cursor:pointer;font-family:var(--sans);border:1px solid var(--ink);background:var(--card);color:var(--ink);padding:3px 12px;font-size:.82rem;letter-spacing:.05em}
button:hover{background:var(--ink);color:var(--paper)}
/* 広告枠: 見本帳に馴染む破線ラベル */
.ad-slot{border:1px dashed var(--line-dark);color:#a2947a;text-align:center;padding:13px;margin:22px 0;font-size:.72rem;letter-spacing:.5em;background:rgba(255,253,247,.55)}
/* ===== 色面ヒーロー（標本） ===== */
.specimen-hero{margin:18px 0 6px;padding:14px;box-shadow:inset 0 0 0 1px rgba(46,42,36,.28),0 1px 0 rgba(46,42,36,.12)}
.specimen-frame{border:1px solid currentColor;padding:26px 22px 20px;display:flex;flex-direction:column;min-height:290px}
.specimen-top,.specimen-bottom{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.24em;opacity:.85}
.specimen-bottom{border-top:1px solid currentColor;padding-top:12px;font-size:.82rem;letter-spacing:.14em}
.hero-name{font-family:var(--serif);font-weight:600;font-size:clamp(2.9rem,11vw,4.6rem);line-height:1.15;letter-spacing:.1em;margin:auto 0 2px;padding-top:26px}
.hero-reading{font-size:1rem;letter-spacing:.34em;margin:0 0 26px;opacity:.9}
/* ===== 標本ラベル表 ===== */
.spec{background:var(--card);border:1px solid var(--line-dark);padding:6px 22px 14px;margin-top:20px}
.spec h2{margin-top:16px}
.spec-list{margin:0}
.spec-list>div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec-list>div:last-child{border-bottom:none}
.spec-list dt{font-size:.74rem;letter-spacing:.3em;color:var(--ink-soft)}
.spec-list dd{margin:0}
.spec-name{font-family:var(--serif);font-size:1.25rem;letter-spacing:.06em}
.spec-name small{font-size:.85rem;color:var(--ink-soft);margin-left:10px;letter-spacing:.14em}
/* ===== 塗料チップ ===== */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.chip{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-dark);text-decoration:none;color:var(--ink);overflow:hidden}
.chip .sw{display:block;height:56px;box-shadow:inset 0 0 0 1px rgba(46,42,36,.18);border-bottom:1px solid var(--line)}
.chip-label{padding:8px 11px 9px;font-family:var(--serif);font-size:.98rem;letter-spacing:.03em;line-height:1.5}
.chip-label small{display:block;font-family:var(--sans);color:var(--ink-soft);font-size:.74rem;letter-spacing:.08em}
.chip:hover{outline:2px solid var(--ink);outline-offset:-2px}
/* ===== 月別: 塗料チップ見本帳 ===== */
.month-band{height:16px;margin:14px 0 4px;box-shadow:inset 0 0 0 1px rgba(46,42,36,.25)}
.day-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin-top:14px}
.day-chip{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-dark);text-decoration:none;color:var(--ink);overflow:hidden}
.day-sw{position:relative;display:block;height:88px;box-shadow:inset 0 0 0 1px rgba(46,42,36,.18);border-bottom:1px solid var(--line)}
.day-num{position:absolute;top:5px;left:10px;font-family:var(--serif);font-size:1.45rem;line-height:1}
.day-hex{position:absolute;bottom:5px;left:10px;font-size:.66rem;letter-spacing:.08em;opacity:.85}
.day-meta{padding:7px 10px 8px;line-height:1.5}
.day-meta strong{font-family:var(--serif);font-weight:600;font-size:.95rem;letter-spacing:.02em;display:block}
.day-meta small{color:var(--ink-soft);font-size:.7rem;letter-spacing:.03em;display:block}
.day-chip:hover{outline:2px solid var(--ink);outline-offset:-2px}
/* ===== トップ ===== */
.top-hero{padding:14px 0 4px}
.hero-kicker{font-size:.72rem;letter-spacing:.3em;color:var(--ink-soft);margin:0}
.top-hero h1{font-size:clamp(2rem,7.5vw,2.9rem);margin:.25em 0 .3em}
.band{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin:20px 0 6px}
.band-seg{display:flex;flex-direction:column;gap:5px}
.band-fill{display:block;height:56px;box-shadow:inset 0 0 0 1px rgba(46,42,36,.22)}
.band-label{font-size:.68rem;letter-spacing:.08em;color:var(--ink-soft);text-align:center}
.band-caption{font-size:.76rem;letter-spacing:.14em;color:var(--ink-soft);margin:2px 0 0}
.search-box{background:var(--card);border:1px solid var(--line-dark);padding:8px 24px 22px;margin-top:24px;box-shadow:5px 5px 0 var(--paper-deep)}
.search-box h2{border-bottom:none;box-shadow:none;padding-left:0;font-size:1.35rem}
.search-box form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search-box select{font-size:1.05rem;padding:10px 12px}
.search-box button[type=submit]{background:var(--ink);color:var(--paper);font-size:1rem;padding:11px 22px;letter-spacing:.08em}
.search-box button[type=submit]:hover{background:#000}
.today-box{margin-top:18px;border:1px solid var(--accent);padding:12px 16px;background:var(--paper)}
.today-label{font-size:.72rem;letter-spacing:.3em;color:var(--ink-soft);margin:0}
#today-color{font-family:var(--serif);font-size:1.12rem;margin:2px 0 0}
#today-color a{text-decoration-thickness:1px;text-underline-offset:4px}
/* 月・系統カード（グラデーション帯つき） */
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.month-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-dark);text-decoration:none;color:var(--ink);overflow:hidden}
.month-strip{display:block;height:34px;box-shadow:inset 0 0 0 1px rgba(46,42,36,.18);border-bottom:1px solid var(--line)}
.month-name{font-family:var(--serif);font-weight:600;font-size:1.08rem;letter-spacing:.05em;padding:8px 12px 0}
.month-card small{color:var(--ink-soft);font-size:.72rem;padding:0 12px 10px;letter-spacing:.03em}
.month-card:hover{outline:2px solid var(--ink);outline-offset:-2px}
/* ページャ・フォーム・フッタ */
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:30px;border-top:1px solid var(--line);padding-top:16px}
.pager a{color:var(--ink);font-size:.92rem}
select,input[type=search]{padding:8px 10px;border:1px solid var(--line-dark);border-radius:0;background:var(--card);color:var(--ink);margin:4px;font-family:var(--sans)}
#color-search{display:flex;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);padding:12px 16px}
footer{border-top:1px solid var(--ink);box-shadow:0 -3px 0 -2px var(--paper),0 -4px 0 -1px var(--line-dark);padding:20px 18px 26px;text-align:center;color:var(--ink-soft);font-size:.85rem;background:var(--paper);margin-top:10px}
footer a{color:var(--ink)}
@media (max-width:560px){
  main{padding:16px 12px 44px}
  .band{grid-template-columns:repeat(6,1fr)}
  .band-fill{height:44px}
  .specimen-frame{min-height:240px;padding:20px 16px 16px}
  .spec-list>div{grid-template-columns:74px 1fr}
  .chips{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .day-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .search-box{padding:6px 16px 18px}
}