/* ============================================================
   chrome.css — haircarelab 共通ヘッダー/フッター（全ページ読み込み）
   ・ヘッダー/フッターは class="site-chrome" にスコープし、
     記事ページの <header class="entry-header"> 等と衝突させない。
   ・TOPページ専用の装飾は home.css（TOPのみ読み込み）に分離。
   ============================================================ */

/* デザイン変数（全ページ共通で使えるよう :root に定義） */
:root{
  --milk:#F6F3F1; --paper:#FFFFFF;
  --plum:#3A2233; --plum-2:#56354B; --plum-soft:#7A5670;
  --champ:#C9A24B; --champ-lt:#E4C988; --lilac:#CDBBD6;
  --ink:#2C2530; --sub:#8B8088; --line:#EAE1E5;
  --serif:"Zen Kaku Gothic New",sans-serif;
  --sans:"Zen Kaku Gothic New",sans-serif;
  --fr:"Fraunces",Georgia,serif;
}

/* ヘッダー/フッターのベース（スコープ内のみ・他ページに影響させない） */
.util, .util *, header.site-chrome, header.site-chrome *, footer.site-chrome, footer.site-chrome *{box-sizing:border-box;}
.util a, header.site-chrome a, footer.site-chrome a{color:inherit;text-decoration:none;}
.util, header.site-chrome, footer.site-chrome{font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;}
header.site-chrome{color:var(--ink);}
header.site-chrome p, footer.site-chrome p, footer.site-chrome h5{margin:0;}

/* 共通コンテナ */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.serif{font-family:var(--serif);letter-spacing:.05em;}

/* utility bar */
.util{background:var(--plum);color:#E9DEE6;font-size:11.5px;letter-spacing:.05em;}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;}
.util .pr{opacity:.7;font-family:var(--fr);font-style:italic;}

/* header */
header.site-chrome{position:sticky;top:0;z-index:50;background:rgba(246,243,241,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
header.site-chrome .wrap{display:flex;align-items:center;height:74px;gap:30px;}
header.site-chrome .logo{display:flex;align-items:center;gap:9px;}
header.site-chrome .logo .gem{width:24px;height:24px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(135deg,var(--champ-lt),var(--champ) 55%,var(--plum-2));
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.6);}
header.site-chrome .logo b{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.04em;color:var(--plum);}
header.site-chrome nav.main{display:flex;gap:26px;font-size:13.5px;font-weight:500;margin-left:6px;}
header.site-chrome nav.main a{padding:8px 0;position:relative;}
header.site-chrome nav.main a:after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1.5px;background:var(--champ);transition:width .25s;}
header.site-chrome nav.main a:hover:after{width:100%;}
header.site-chrome .search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:22px;padding:8px 16px;color:var(--sub);font-size:12.5px;min-width:180px;}

/* footer */
footer.site-chrome{background:#241019;color:#A99BA3;font-size:12.5px;}
footer.site-chrome .wrap{padding:46px 28px 26px;}
footer.site-chrome .ftop{display:flex;justify-content:space-between;gap:40px;padding-bottom:28px;border-bottom:1px solid #3a2a33;flex-wrap:wrap;}
footer.site-chrome .fbrand b{font-family:var(--serif);font-size:21px;color:#fff;}
footer.site-chrome .fbrand p{max-width:250px;margin-top:12px;font-size:12px;line-height:1.8;}
footer.site-chrome .fcols{display:flex;gap:56px;flex-wrap:wrap;}
footer.site-chrome .fcol h5{color:#fff;font-size:12.5px;margin-bottom:13px;letter-spacing:.08em;}
footer.site-chrome .fcol a{display:block;padding:5px 0;font-size:12.5px;}
footer.site-chrome .fcol a:hover{color:var(--champ-lt);}
footer.site-chrome .fbot{display:flex;justify-content:space-between;padding-top:18px;font-size:11px;color:#776a72;flex-wrap:wrap;gap:8px;}
footer.site-chrome .prnote{background:#1a0c12;color:#6f6168;font-size:11px;text-align:center;padding:12px;line-height:1.7;}

/* responsive（ヘッダー） */
@media(max-width:880px){
  header.site-chrome nav.main, header.site-chrome .search{display:none;}
}
@media(prefers-reduced-motion:reduce){
  header.site-chrome nav.main a:after{transition:none;}
}