/*
 * Layout — ヘッダー / フッター / コンテナ / セクション
 */

/* 本文・フォーム用の狭いコンテナ。max-width だけだと左端に貼り付くので、
   他のページ (.dra-wire-main) と同じように中央へ置き、左右に余白を持たせる。 */
.dra-container-narrow {
  max-width: var(--dra-container-narrow);
  margin-inline: auto;
  padding-inline: 14px;
}

/* ── Site Header ── DRAMAP マップヘッダー (map-header) と同じ視覚言語で統一
 *   左: タグライン + h1 (EB Garamond) + ドラマップ ruby
 *   右: mh-toggle と同じピル型のメニューボタン + ナビ
 */
.dra-site-header {
  position: relative;   /* モバイル時のドロップメニュー基準。sticky 不要 (v6 README) */
  z-index: var(--dra-z-header);
  padding: 10px 20px;
  background: var(--dra-bg);
  border-bottom: 1px solid var(--dra-border);
}
.dra-site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}

/* ヘッダー右 CTA (v6: ご案内を受けた方へ / ピル型) */
.dra-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  border-radius: 24px;
  padding: 9px 16px;
  font-size: 15px;
  color: #1f2937;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.dra-header-cta:hover { background: #f3f4f6; border-color: #9ca3af; color: #1f2937; }
.dra-header-cta .mat-icon { font-size: 18px; }

/* ── Brand (DRAMAP ロゴ: tagline + h1 + ruby) ── */
.dra-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: var(--dra-text-strong);
}
.dra-brand:hover { color: var(--dra-text-strong); }
.dra-brand-tagline {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #222;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.dra-brand-h1-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 4px;
}
.dra-brand-h1 {
  font-family: var(--dra-font-serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
  color: #222;
  line-height: 1;
}
.dra-brand-ruby {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  font-weight: 800;
  color: #222;
  line-height: 1;
  margin: 0 10px 0 5px;
  padding: 0 2px;
}
.dra-brand-ruby > span { display: inline-block; }

/* ── Site Header Right (Nav) ── */

/* ── Primary Navigation ── */
/*   ヘッダーがドロワーに切り替わる幅は 1000px。この 1 か所だけが基準で、
 *   下の「デスクトップではドロワーを出さない」と assets/js/main.js の
 *   リサイズ判定も同じ数値に揃えること。ずれると、ボタンは出ているのに
 *   ドロワーが表示されない (または開いたまま残る) 幅ができる。
 *
 *   デスクトップ (>1000px): メニューを横並び表示、トグルは非表示
 *   モバイル   (≤1000px): リンクはドロワーへ集約、トグルで開閉
 */
.dra-nav-primary {
  display: flex;
  align-items: center;
  gap: 12px;
}
#dra-nav-primary-menu {
  display: flex;
  gap: var(--dra-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
#dra-nav-primary-menu li { margin: 0; }
#dra-nav-primary-menu a {
  color: var(--dra-text);
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  padding: 6px 0;
}
#dra-nav-primary-menu a:hover { color: var(--dra-link-hover); }
#dra-nav-primary-menu .current-menu-item > a { color: var(--dra-text-strong); font-weight: 700; }

/* Mobile menu toggle — DRAMAP mh-toggle と同じピル型 (border-radius 24px) */
.dra-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 24px;
  cursor: pointer;
  color: #1f2937;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.dra-nav-toggle:hover { background: #f3f4f6; border-color: #9ca3af; }
.dra-nav-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.dra-nav-toggle .mat-icon { font-size: 18px; line-height: 1; }
.dra-nav-toggle-label { font-weight: 500; line-height: 1; font-size: 14px; }

/* ヘッダーだけ折り返し幅が広い。
   ナビ 5 リンク (よくある質問を追加) を 16px で 1 行に置くと 529px 必要で、
   ロゴ (180) + CTA (193) + 余白 40 + 左右 padding 40 を足すと
   982px を下回ると収まらない。そのため 1000px 以下はドロワーに切り替える。 */
@media (max-width: 1000px) {
  /* ロゴ + メニューボタンの 2 カラム。CTA はドロワー内へ移す */
  .dra-site-header-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .dra-nav-toggle          { display: inline-flex; }
  #dra-nav-primary-menu    { display: none; }   /* リンクはドロワーに集約 */
  .dra-site-header .dra-header-cta { display: none; }
}
@media (max-width: 480px) {
  .dra-brand-h1 { font-size: 30px; }
}

/* ── モバイル ドロワー ────────────────────────────────
 *   DRAMAP 本体のマップガイド (.mh-drawer) と同じ意匠・挙動
 *   (加藤さん指示 2026-08-14)
 */
.dra-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--dra-z-drawer);
}
.dra-drawer.hidden { display: none; }
.dra-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.4);
}
.dra-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  animation: dra-slide-in 0.22s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
  outline: none;
}
@keyframes dra-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dra-drawer-panel { animation: none; }
}

.dra-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  flex: 0 0 auto;
}
.dra-drawer-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  text-align: center;
}
.dra-drawer-close {
  min-width: 32px;
  min-height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #4b5563;
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1;
}
.dra-drawer-close:hover { background: #f3f4f6; }
.dra-drawer-close:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.dra-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}
.dra-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dra-drawer-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  color: #1f2937;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.dra-drawer-item:hover { background: #f3f4f6; border-color: #9ca3af; color: #1f2937; }
.dra-drawer-item:focus-visible { outline: 2px solid #6b7280; outline-offset: 2px; }

/* ドロワー内の CTA — ヘッダーのピルと同じ役割 */
.dra-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0;
  padding: 14px 16px;
  background: #1f2937;
  color: #fff;
  border: 1px solid #1f2937;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.dra-drawer-cta:hover { background: #111827; color: #fff; }
.dra-drawer-cta .mat-icon { font-size: 18px; }

/* 補助リンク (仕組み配下・よくある質問 等) */
.dra-drawer-list-sub {
  gap: 0;
  border-top: 1px solid #f3f4f6;
  padding-top: 8px;
}
.dra-drawer-subitem {
  display: block;
  padding: 12px 4px;
  font-size: 14px;
  color: #6b7280;
  text-decoration: none;
}
.dra-drawer-subitem:hover { color: #5b21b6; }

/* デスクトップではドロワーを出さない (切り替え幅は上の 1000px と同じ) */
@media (min-width: 1001px) {
  .dra-drawer { display: none !important; }
}

/* ── Site Main ── */
/*   公式サイトはワイヤー通り: 薄グレー地 (#f9fafb) の上に白カードセクションが並ぶ */
.dra-site-main {
  flex: 1;
  background: #f9fafb;
}
/* v6 ワイヤーの <main> と同じコンテンツ幅 */
.dra-wire-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
/* 直後に CTA バンドが続くページでは、枠の下余白を持たせない */
.dra-wire-main:has(+ .dra-cta-full) { padding-bottom: 0; }
.dra-wire-main img { max-width: 100%; height: auto; }

/* grid の子は既定で min-width:auto のため、中身 (固定 px の図解) の幅まで
   トラックが押し広げられて画面からはみ出す。0 を明示して縮めるようにする。
   flex には掛けない — テキスト列が折り返さずに痩せてしまうため。 */
:is(.dra-wire-main, .dra-hero-full) [style*="display:grid"] > * { min-width: 0; }

/* ── TOP メインビジュアル (加藤さん指示 2026-08-14: PC は横幅フルスクリーン) ──
 *   .dra-wire-main の外側に出力し、帯を画面幅いっぱいに広げる。
 *   中身 (.dra-hero-inner) は他セクションと同じ 1100px で中央に揃える。
 */
.dra-hero-full {
  background: var(--dra-bg);
  border-bottom: 1px solid var(--dra-border);
}
.dra-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 721px) {
  /* カードの装飾 (枠線・角丸・下マージン) を外して帯に馴染ませ、上下の余白を広げる */
  .dra-hero-inner {
    border: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 64px 32px !important;
  }
}
@media (max-width: 720px) {
  /* モバイルは従来どおりカード表示。.dra-wire-main と同じ左右余白を持たせる */
  /* スマホでも帯は画面幅いっぱい。カードの枠線・角丸・外側の余白は付けない
     (加藤さん指示 2026-08-14)。左右 14px は本文が端に触れないための内側余白。 */
  .dra-hero-full {
    background: var(--dra-bg);
    border-bottom: 1px solid var(--dra-border);
    padding: 0;
  }
  .dra-hero-inner {
    border: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 28px 14px !important;
  }
}

/* ── 共通サンプル CTA バンド ────────────────────────────
 *   MV と同じく画面幅いっぱい。中身 (.dra-cta) は 1100px 中央寄せ。
 *   フッターと隙間なく接するよう、下の余白は持たせない。
 */
.dra-cta-full {
  background: var(--dra-bg-panel);
  border-top: 1px solid var(--dra-border);
}

/* ── マップ図解の横スクロール枠 (main.js が生成) ──────────────
 *   図解はワイヤー由来の固定 px レイアウト。縮小すると読めなくなるため、
 *   DRAMAP 本体の .map-stage と同じく横スクロールで見せる
 *   (加藤さん指示 2026-08-14)。
 */
.dra-fig-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* スクロール可能なことが分かるよう、端で薄く切れる余白を確保 */
  padding-bottom: 2px;
}
.dra-fig-scroll > * { flex: none; }

/* スマホでは図解の左右余白を個別に詰めて、表示できる幅を稼ぐ
   (加藤さん指示 2026-08-14: マップ内の横方向の余白は個別に調整) */
@media (max-width: 720px) {
  /* 図解を囲うセクションの内側パディングを縮める */
  .dra-sec, .dra-sec--lg, .dra-sec--tight, .dra-cta, .dra-hero-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .dra-cta-full { padding: 0; }
  /* スクロール枠はセクションの内側パディング分だけ左右に広げ、
     カードの端いっぱいまでマップを見せる。
     max-width:100% のままだと負マージンが打ち消されるので解除する。 */
  .dra-fig-scroll {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    max-width: none;
    width: auto;
  }
}

/* ── 横に広い表のスクロール枠 (main.js が生成) ── */
.dra-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dra-scroll-x > .dra-table { min-width: 680px; }
.dra-scroll-x > table { min-width: 560px; }

/* ── モバイル: 段組みの畳み方 ────────────────────────────
 *   一律 1 列にすると 9 色チップのような小さな格子まで縦に伸びてしまうため、
 *   レイアウトの性質ごとに畳み方を分ける。
 */

/* (a-0) TOP の MV は全幅帯のぶん本文列が痩せやすいので、他より早く 1 列にする。
        520px の図解 + 見出しが窮屈にならない下限として 1000px を境にする。 */
@media (max-width: 1000px) {
  .dra-hero-inner.dra-split-fig { grid-template-columns: 1fr !important; }
  /* 1 列にしたぶん図解は中央へ。トラック幅は広げない */
  .dra-hero-inner > * { justify-self: stretch; }
  .dra-hero-inner .dra-fig-scroll { margin-left: auto; margin-right: auto; }
}

/* (a) 図解や写真など固定幅の列を含む段組み → 1 列 */
@media (max-width: 860px) {
  .dra-cta,
  .dra-split-fig,
  .dra-step,
  .dra-media,
  .dra-legend,
  .dra-split-46,
  .dra-split-46--v2,
  .dra-split-chips {
    grid-template-columns: 1fr !important;
  }
}

/* (b) カードの 2 列 → 幅が足りなくなってから 1 列 */
@media (max-width: 700px) {
  .dra-duo, .dra-duo--v2, .dra-duo--v4, .dra-duo--v5,
  .dra-row-auto, .dra-row-auto--v2,
  .dra-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* (c) 特性カードの 3 列 → 入るだけ詰める (9 行に伸ばさない) */
@media (max-width: 860px) {
  .dra-cards3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
}

/* (d) 9 色チップの 3×3 格子は 3 列のまま維持 (畳むと縦に伸びるだけ)。 */

/* ── モバイル: 横並び (flex) の畳み方 ──────────────────────
 *   ワイヤーは固定幅を前提に横並びを組んでいるため、そのままだと
 *   本文列が数十 px まで痩せて極端に縦長になる。
 */
@media (max-width: 700px) {
  /* 写真 (固定幅) + プロフィール本文 (運営者情報 p11) は縦積みに */
  .dra-profile { flex-direction: column; }
  /* ボタンの横並びは、収まらなければ折り返す (ラベルを途中で折らない) */
  .dra-btn-row { flex-wrap: wrap; }
  .dra-btn-row > .dra-lnk { white-space: nowrap; }
  /* TOP の運営者カード — 写真 / 本文 / ボタンが 1 行に収まらないので折り返す */
  .dra-owner-card { flex-wrap: wrap; }
  /* 9 色チップの 3×3 格子は 3 列を保ったまま、枠内に収める */
  /* 9 色チップの 3×3 格子は 3 列を保ったまま枠内に収める。
     1fr は下限が min-content なので minmax(0,1fr) で縮められるようにする。 */
  /* 9 色チップの 3×3 格子は 3 列のまま維持 (畳むと縦に伸びるだけ)。
     ただし関係ラインの並び (.dra-blk-77 の中) は 1 枚が 150px あり
     3 列だと潰れるので、pages.css 側の 2 列指定に任せる。 */
  .dra-chips3:not(.dra-blk-77 *), .dra-chips3--v2:not(.dra-blk-77 *) {
    max-width: 100%;
    min-width: 0;
    /* pages.css より後勝ちにする (読み込み順が pages.css の方が後のため) */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .dra-blk-77 .dra-chips3--v2 { max-width: 100%; min-width: 0; }
  .dra-chips3 > *, .dra-chips3--v2 > * { min-width: 0; }
  /* 本文列 (flex:1) は 1 行を占有させて折り返す */
  :is(.dra-wire-main, .dra-hero-full) [class*="u-fx-1"],
  /* 比較表は畳まずスクロールさせるので除外 */
  .dra-scroll-x .dra-trow { flex-wrap: nowrap; }
  .dra-scroll-x [class*="u-fx-1"] { min-width: 0; }
}

/* JS が包んだ比較表 — 畳まず横スクロール */
.dra-scroll-x > [data-dra-table] { min-width: 620px; }

/* (b) カードの 2 列 → 幅が足りなくなってから 1 列 */
@media (max-width: 700px) {
  :is(.dra-wire-main, .dra-hero-full) [style*="grid-template-columns:1fr 1fr"],
  :is(.dra-wire-main, .dra-hero-full) [style*="grid-template-columns:1fr auto"],
  .dra-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* (c) 特性カードの 3 列 → 入るだけ詰める (9 行に伸ばさない) */
@media (max-width: 860px) {
  :is(.dra-wire-main, .dra-hero-full) [style*="grid-template-columns:repeat(3,1fr);gap:16px"] {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  }
}

/* (d) 9 色チップの 3×3 格子は 3 列のまま維持 (justify-items:center が目印)。
       畳むと縦に長くなるだけなので、ここでは何もしない。 */
/* フォームページ (dramap-bare) は従来通り白背景 */
body.dramap-bare .dra-site-main { background: var(--dra-bg); padding: var(--dra-space-7) 0; }

/* ── Site Footer (v6: 3 カラム DRAMAP / COMPANY / LEGAL) ── */
.dra-site-footer {
  background: var(--dra-bg);
  border-top: 1px solid var(--dra-border);
  padding: 34px 20px 20px;
}
.dra-site-footer-cols {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 60px;
  justify-content: center;
}
.dra-footer-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #9ca3af;
  margin-bottom: 12px;
}
.dra-footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dra-footer-links-2col {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 28px;
}
.dra-footer-links a {
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
}
.dra-footer-links a:hover { color: var(--dra-accent-link, #5b21b6); }
.dra-site-footer-bottom {
  max-width: 1100px;
  margin: 26px auto 0;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9ca3af;
}
@media (max-width: 720px) {
  .dra-site-footer-cols { grid-template-columns: 1fr; gap: 28px; justify-content: start; }
  .dra-site-footer-bottom { flex-direction: column; gap: 6px; }
}