@charset "UTF-8";

/* ============================================================
   header.css（YAMA★STA ヘッダー + Drawer + Flash）
   ------------------------------------------------------------
   目的：
   - 共通ヘッダー（header.php）の見た目を統一し、PC/スマホ両対応にする
   - 左：ロゴ（アイコン＋YAMA★STA文字）＋主要メニュー（PC）
   - 右：通知/マイページ/管理/ログアウト/ログイン（PC）
   - スマホ：☰のみ表示（窮屈さ解消）→ 右ドロワー（重ね表示）
   - メニュー外タップ（オーバーレイ）/ ESC / 閉じるボタンで閉じる
   - スクロール：下方向でヘッダーを隠し、上方向で再表示（JSが class 付与）
   - Flash をヘッダー直下に表示（1回表示で消える）
   ------------------------------------------------------------
   クラス運用（header.js 前提）：
   - body.is-menu-open：ドロワー開、背景スクロール抑止
   - .site-header.is-hidden：下スクロール中に隠す
   - .site-header.is-elevated：影を付ける
   ------------------------------------------------------------
   ランドネ風（案①②③④）：
   ① 文字主役／ロゴ控えめ（“そっと添える”）
   ② やわらかいサンセリフ + 字間（空気感）
   ③ 上下余白で紙感（通常ゆったり→スクロール時キュッ）
   ④ 見出しっぽい“細い線”を小さく添える（やりすぎ注意）
============================================================ */

/* ============ Theme (Landne-ish) ============ */
:root{
  /* ほんのり白＋森色アクセント */
  --hd-bg: rgba(255,255,255,0.88);
  --hd-paper: rgba(255,255,255,0.96);
  --hd-border: rgba(20,40,35,0.10);
  --hd-shadow: 0 10px 28px rgba(10,20,18,0.10);

  --ink: #1c2a26;
  --accent: #2f6b5a;
  --badge: #e11d48;

  --overlay: rgba(14, 22, 20, 0.38);

  --tap: 44px;
  --radius: 18px;

  /* ヘッダー高さ：通常ゆったり→スクロール時キュッ（案③） */
  --hd-h: 68px;
  --hd-h-compact: 56px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 140ms;
  --dur: 220ms;

  /* ロゴ周り（案①②④） */
  --logo-gap: 12px;
  --logo-img: 26px;
  --logo-img-compact: 22px;

  --logo-size: 18px;
  --logo-weight: 600;
  --logo-track: .14em; /* ← ランドネ感の核（案②） */
  --logo-line: rgba(20,40,35,0.14);
}

/* ===== ベース（ヘッダー） ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;

  background: var(--hd-bg);
  border-bottom: 1px solid var(--hd-border);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: none;
  transform: translateY(0);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.site-header.is-elevated{
  box-shadow: var(--hd-shadow);
}

/* 下スクロールで隠す（JSが付与） */
.site-header.is-hidden{
  transform: translateY(-110%);
}

.site-header__inner{
  max-width: 1100px;
  margin: 0 auto;

  /* 案③：紙感＝上下余白を増やす（通常） */
  padding: 0 16px;
  height: var(--hd-h);

  display: flex;
  align-items: center;
  gap: 14px;
}

/* JS側で “compact” クラスを付けている構成なら効く（付いてなくてもOK） */
.site-header.site-header--compact .site-header__inner{
  padding: 0 14px;
  height: var(--hd-h-compact);
}

/* ===== ロゴ（案①②③④） ===== */
.site-logo{
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap);

  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;

  /* 案②：やわらかいサンセリフ */
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Helvetica Neue",
    Arial,
    sans-serif;

  /* 案②：軽くする（800→600） */
  font-weight: var(--logo-weight);

  /* 案②：字間で“空気”を作る */
  letter-spacing: var(--logo-track);

  font-size: var(--logo-size);
  line-height: 1;
  position: relative;
}

/* 案①：ロゴ控えめ（小さめ＋少し透過） */
.site-logo__img{
  width: var(--logo-img);
  height: var(--logo-img);
  display: block;
  object-fit: contain;
  opacity: .86;
  transform: translateY(0.5px);
}

/* 案③：スクロール時にキュッ（ロゴも少し小さく） */
.site-header.site-header--compact .site-logo__img{
  width: var(--logo-img-compact);
  height: var(--logo-img-compact);
}

/* テキスト本体（必要なら将来ここで色味調整） */
.site-logo__text{
  display: inline-block;
  text-transform: uppercase; /* 案④：誌面っぽい見出し感（強すぎたら外してOK） */
}

/* 案④：小さな線を添える（やりすぎない） */
.site-logo__text::after{
  content: none;
  display: block;
  height: 1px;
  width: 44%;
  margin-top: 4px;
  background: var(--logo-line);
  transform: translateX(1px);
  opacity: .9;
}

/* ============================================================
   site-logo hover（icon-btn と同系の分かりやすさ）
============================================================ */
.site-logo{
  border-radius: 14px; /* icon-btn と揃える */
  padding: 6px 8px;    /* 見た目は変えすぎない程度 */
  margin-left: -8px;  /* padding分を相殺してズレ防止 */

  transition:
    background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.site-logo:hover{
  background: rgba(47,107,90,0.07);        /* icon-btn と同色 */
  box-shadow: 0 8px 20px rgba(10,20,18,0.08);
  transform: translateY(-1px);
}

.site-logo:active{
  transform: translateY(0);
  box-shadow: none;
}

/* キーボード操作対応（重要） */
.site-logo:focus-visible{
  outline: 2px solid rgba(47,107,90,0.35);
  outline-offset: 2px;
}

/* ===== ナビ（PC：左側の主要） ===== */
.site-nav{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px; /* 少しだけ呼吸 */
}

/* ===== 右側（PC：アイコン群 / スマホ：☰のみ） ===== */
.site-nav-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   アイコンボタン
============================================================ */
.icon-btn{
  width: var(--tap);
  height: var(--tap);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--ink);
  text-decoration: none;

  border: 1px solid rgba(20,40,35,0.14);
  background: rgba(255,255,255,0.82);

  position: relative;
  cursor: pointer;

  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.icon-btn:hover{
  background: rgba(47,107,90,0.07);
  border-color: rgba(47,107,90,0.22);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10,20,18,0.08);
}

.icon-btn:active{
  transform: translateY(0);
}

.icon-btn:focus-visible,
.menu-toggle:focus-visible{
  outline: 2px solid rgba(47,107,90,0.35);
  outline-offset: 2px;
}

/* SVGのサイズ */
.icon-btn__icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
}

.icon-btn__icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* 塗り/線：currentColor前提 */
.icon-btn__icon svg [fill]:not([fill="none"]){ fill: currentColor; }
.icon-btn__icon svg [stroke]{ stroke: currentColor; }

.icon-btn--admin{
  color: var(--accent);
}

/* ツールチップ（PCでのみ使う想定） */
.icon-btn[data-tip]{
  position: relative;
}
.icon-btn[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

/* 未読バッジ（ベル用） */
.notify-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--badge);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border: 2px solid rgba(255,255,255,0.95);
}

/* スマホ：☰に付くドット */
.menu-dot{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--badge);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.92);
}

.logout-form{
  margin: 0;
  display: inline-flex;
}

/* ============================================================
   オーバーレイ + 右ドロワー（スマホ）
============================================================ */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: var(--overlay);

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);

  z-index: 1400;
}

/* 右から出るパネル（重ねる） */
.mobile-menu{
  position: fixed;
  top: 0;
  right: 0;

  height: 100dvh;                 /* iOS対策 */
  width: min(86vw, 360px);

  background: var(--hd-paper);
  border-left: 1px solid var(--hd-border);
  box-shadow: -18px 0 40px rgba(10,20,18,0.16);

  transform: translateX(105%);
  transition: transform 280ms var(--ease);

  z-index: 1500;

  padding: 14px 14px 18px;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* 閉じている時はタップ不可 */
  pointer-events: none;
}

.mobile-menu__title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 8px 4px 10px;
  border-bottom: 1px solid rgba(20,40,35,0.08);
}

/* ドロワーのブランドも同じトーンで（案②） */
.mobile-menu__brand{
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .10em;
  text-transform: uppercase;
}

.mobile-menu__inner{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.mobile-menu a{
  display: block;
  padding: 12px 12px;

  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);

  background: rgba(47,107,90,0.06);
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.mobile-menu a:hover{
  background: rgba(47,107,90,0.10);
  transform: translateY(-1px);
}

.mobile-menu a:active{
  transform: translateY(0);
}

.mobile-menu__btn{
  width: 100%;
  padding: 12px 12px;

  border-radius: 14px;
  border: 1px solid rgba(20,40,35,0.14);

  background: rgba(28,42,38,0.06);
  color: var(--ink);

  font-weight: 700;
  text-align: left;
  cursor: pointer;

  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.mobile-menu__btn:hover{
  background: rgba(28,42,38,0.10);
  transform: translateY(-1px);
}
.mobile-menu__btn:active{
  transform: translateY(0);
}

/* open state（JSが body に付与） */
body.is-menu-open .menu-overlay{
  opacity: 1;
  pointer-events: auto;
}

body.is-menu-open .mobile-menu{
  transform: translateX(0);
  pointer-events: auto;
}

/* 背面スクロール抑止（iOS対策も兼ねる） */
body.is-menu-open{
  overflow: hidden;
  touch-action: none;
}

/* ===== トグルボタン（スマホでのみ表示） ===== */
.menu-toggle{
  display: none;
}

/* ============================================================
   レスポンシブ
============================================================ */

/* スマホ：左ナビを隠して☰だけにする（窮屈さ解消） */
@media (max-width: 860px){
  .site-header__inner{
    gap: 10px;
  }

  .site-nav{
    display: none;
  }

  /* PC用アイコン群を隠す（☰に集約） */
  .site-nav-right > a.icon-btn,
  .site-nav-right > form.logout-form{
    display: none;
  }

  .menu-toggle{
    display: inline-flex;
  }

  /* ツールチップはスマホでは邪魔なのでオフ */
  .icon-btn[data-tip]:hover::after{
    display: none;
  }
}

/* ============================================================
   Flash（フラッシュメッセージ）
============================================================ */
.flash-stack{
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 14px;
  display: grid;
  gap: 10px;
}

.flash{
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(20,40,35,0.12);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 24px rgba(10,20,18,0.06);

  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

/* 種別（色は控えめ） */
.flash-error{
  border-color: rgba(225, 29, 72, 0.26);
  background: rgba(225, 29, 72, 0.06);
}

.flash-success{
  border-color: rgba(47, 107, 90, 0.22);
  background: rgba(47, 107, 90, 0.06);
}

.flash-info{
  border-color: rgba(90, 108, 103, 0.22);
  background: rgba(90, 108, 103, 0.06);
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .site-header,
  .menu-overlay,
  .mobile-menu,
  .icon-btn{
    transition: none !important;
  }
}