/* =====================================================================
   base.css — サイト統一デザイン基盤（全ページ共通で読み込む）
   方向: 大理石・城のファンタジー × スタイリッシュ
   昼(morning)=白大理石 / 夜(night)=黒曜の城  （html[data-mode] で切替）
   ===================================================================== */
:root{
  /* フォント階層（3種に統一） */
  --font-head:'Noto Serif JP',serif;
  --font-body:'Noto Sans JP',sans-serif;
  --font-brand:'Cormorant Garamond',serif;
  /* 共通アクセント（昼夜共通の金） */
  --gold:#d4a853; --gold-light:#f0d693; --gold-dim:rgba(212,168,83,.45);
  --live:#d8453f;
  /* モーション規約 */
  --dur-fast:.18s; --dur:.32s; --ease:cubic-bezier(.22,1,.36,1);
  /* ヘッダー高さ（JS注入の位置ズレ防止に予約） */
  --header-h:64px;
}
/* 夜（黒曜の城）＝既定 */
html[data-mode="night"], html:not([data-mode]){
  --bg:#100d12; --surface:rgba(255,255,255,.04); --panel:rgba(20,18,28,.72);
  --line:rgba(226,201,135,.18); --text:#f3ead6; --dim:#aab0c6;
  --marble:
    radial-gradient(900px 320px at 50% -12%, rgba(120,90,40,.16), transparent 60%),
    repeating-linear-gradient(54deg, transparent 0 52px, rgba(255,235,190,.04) 52px 53px),
    linear-gradient(160deg,#161318 0%,#100d12 45%,#1c1722 100%);
}
/* 昼（白大理石） */
html[data-mode="morning"]{
  --bg:#efe9dd; --surface:rgba(255,255,255,.55); --panel:rgba(255,255,255,.72);
  --line:rgba(176,138,62,.30); --text:#34301f; --dim:#7c7464;
  --marble:
    radial-gradient(600px 220px at 20% 0%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(520px 320px at 90% 100%, rgba(214,225,240,.6), transparent 60%),
    repeating-linear-gradient(58deg, transparent 0 40px, rgba(180,170,150,.10) 40px 41px),
    linear-gradient(135deg,#f6f3ec 0%,#eae3d6 50%,#dfe4ec 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
/* 全ページ共通の大理石の地（最背面） */
.site-marble{position:fixed;inset:0;z-index:-2;background:var(--marble)}
h1,h2,h3,.brand{font-family:var(--font-head);font-weight:600;letter-spacing:.02em}
.brand-en{font-family:var(--font-brand)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}
/* ---- ボタンキット（単色・グラデ禁止） ---- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 30px;font-family:var(--font-body);
  font-size:15px;font-weight:600;letter-spacing:.12em;text-decoration:none;cursor:pointer;
  border:0;overflow:hidden;transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast);
}
.btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
/* 主CTA: 単色ゴールド（最も目立つ。グラデ無し） */
.btn-gold{background:var(--gold);color:#1a160e;border:0}
.btn-gold .watch-ico{font-size:11px;line-height:1;opacity:.9}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(212,168,83,.36);filter:brightness(1.05)}
.btn-gold .dot{width:8px;height:8px;border-radius:50%;background:#1a160e;animation:btnBlink 1s steps(1) infinite}
/* ① スイープ・フィル：枠線→ホバーで単色が左から流し込み＋矢印射出 */
.btn-sweep{color:var(--gold-light);border:1px solid var(--gold-dim);background:transparent}
.btn-sweep .fill{position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);
  transition:transform .26s var(--ease);z-index:0}
.btn-sweep .lbl,.btn-sweep .ar{position:relative;z-index:1}
.btn-sweep .lbl{transition:color .2s .03s}
.btn-sweep .ar{transform:translateX(-4px);opacity:.6;transition:transform .26s var(--ease),opacity .2s,color .2s}
.btn-sweep:hover .fill{transform:translateX(0)}
.btn-sweep:hover .lbl,.btn-sweep:hover .ar{color:#1a160e}
.btn-sweep:hover .ar{transform:translateX(6px);opacity:1}
/* ライブ時の赤バリアント */
.btn-sweep.is-live{color:#f3c9c7;border-color:rgba(216,69,63,.6)}
.btn-sweep.is-live .fill{background:var(--live)}
.btn-sweep.is-live:hover .lbl,.btn-sweep.is-live:hover .ar{color:#fff}
.btn-sweep.is-live .dot{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;
  background:currentColor;animation:btnBlink 1s steps(1) infinite}
@keyframes btnBlink{0%,60%{opacity:1}61%,100%{opacity:.25}}
/* ④ ボーダー・ドロー：ホバーで枠線が四辺を一瞬で描く */
.btn-border{color:var(--gold-light);background:transparent;border:1px solid var(--gold-dim)}
.btn-border > i{position:absolute;background:var(--gold-light)}
.btn-border .t{top:0;left:0;height:1px;width:100%;transform:scaleX(.16);transform-origin:left;transition:transform .2s}
.btn-border .b{bottom:0;right:0;height:1px;width:100%;transform:scaleX(.16);transform-origin:right;transition:transform .2s}
.btn-border .l{left:0;top:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top;transition:transform .2s .04s}
.btn-border .r{right:0;top:0;width:1px;height:100%;transform:scaleY(0);transform-origin:bottom;transition:transform .2s .04s}
.btn-border:hover .t,.btn-border:hover .b{transform:scaleX(1)}
.btn-border:hover .l,.btn-border:hover .r{transform:scaleY(1)}
.btn-border:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){
  .btn-sweep .fill{transition:none}
  .btn-sweep .dot{animation:none}
  .btn-border > i{transition:none}
  .btn-border:hover{transform:none}
}

/* ---- 共通フッター（site-chrome.js 注入） ---- */
.site-chrome-footer{border-top:1px solid var(--line);padding:40px 28px;margin-top:60px;color:var(--dim)}
.site-foot-inner{max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.foot-nav{display:flex;gap:18px}
.foot-nav a{color:var(--dim);text-decoration:none;font-size:13px}
.foot-nav a:hover{color:var(--gold-light)}
/* JS注入ヘッダーの高さ予約（プレースホルダ段階の位置ズレ防止） */
#site-header:empty{min-height:0}

/* =====================================================================
   統一ヘッダー（自己完結。全ページで #site-header に site-chrome.js が注入）
   構造＋配色をここに集約。昼夜はトークンで自動追従。
   ===================================================================== */
#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 28px;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .4s, height .3s;
}
#siteHeader.scrolled{ border-bottom-color:var(--line); height:56px; }
#siteHeader .header-title{
  font-family:var(--font-brand); color:var(--gold);
  font-size:22px; font-weight:600; letter-spacing:.08em; text-decoration:none; cursor:pointer;
}
#siteHeader .header-nav{ display:flex; align-items:center; gap:6px; }
#siteHeader .nav-link{
  font-family:var(--font-body); font-size:13px; font-weight:500;
  color:var(--dim); letter-spacing:.08em; padding:8px 14px; border-radius:6px;
  text-decoration:none; cursor:pointer; transition:color var(--dur);
}
#siteHeader .nav-link:hover, #siteHeader .nav-link.is-active{ color:var(--gold); background:transparent; }
/* 主役CTA「ギルドに入る」= 単色ゴールド（昼夜とも明確に視認できる） */
#siteHeader .st-join{
  display:inline-flex; align-items:center; gap:6px; margin-left:10px;
  padding:9px 20px; border:0; border-radius:6px;
  background:var(--gold); color:#1a160e;
  font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast);
}
#siteHeader .st-join:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 4px 16px rgba(212,168,83,.34); }
/* ログイン = 控えめなゴーストリンク（脇役）。phase4 ゲートに依存せず常時表示し、
   ログイン中は site-chrome.js が非表示化する */
#siteHeader .nav-login{
  display:inline-flex; align-items:center; gap:6px; margin-left:6px;
  padding:8px 13px; border:1px solid var(--line); border-radius:6px;
  background:transparent; color:var(--dim);
  font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.1em; white-space:nowrap; text-decoration:none;
  transition:color var(--dur), border-color var(--dur);
}
#siteHeader .nav-login:hover{ color:var(--gold); border-color:var(--gold-dim); background:transparent; transform:none; }
#siteHeader .nav-login svg{ opacity:.8; }
/* メンバーチップ（ログイン中）= 控えめな金ヘアラインのピル。hidden 属性で出し分け */
#siteHeader .nav-chip{
  align-items:center; gap:8px; margin-left:6px; padding:4px 12px 4px 4px;
  border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--gold) 8%, transparent);
  text-decoration:none; color:inherit; transition:border-color var(--dur), background var(--dur);
}
#siteHeader .nav-chip:not([hidden]){ display:inline-flex; }
#siteHeader .nav-chip:hover{ border-color:var(--gold-dim); background:color-mix(in srgb, var(--gold) 14%, transparent); }
#siteHeader .nav-chip-avatar{ width:28px; height:28px; border-radius:50%; overflow:hidden; flex-shrink:0; }
#siteHeader .nav-chip-avatar svg{ width:100%; height:100%; }
#siteHeader .nav-chip-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
#siteHeader .nav-chip-avatar img[hidden]{ display:none; }
#siteHeader .nav-chip-who{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
#siteHeader .nav-chip-name{ font-size:13px; font-weight:600; color:var(--text); }
#siteHeader .nav-chip-role{ font-size:11px; letter-spacing:.06em; color:var(--dim); }
#siteHeader .nav-chip-arrow{ display:inline-flex; align-items:center; color:var(--gold); opacity:.7; margin-left:2px; transition:transform .2s, opacity .2s; }
#siteHeader .nav-chip:hover .nav-chip-arrow{ transform:translateX(2px); opacity:1; }
/* ハンバーガー */
#siteHeader .hamburger{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:36px; height:36px; padding:0; background:none; border:0; cursor:pointer; z-index:102;
}
#siteHeader .hamburger span{ display:block; width:22px; height:2px; border-radius:1px; background:var(--text); transition:transform .3s, opacity .3s; }
#siteHeader .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#siteHeader .hamburger.open span:nth-child(2){ opacity:0; }
#siteHeader .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(max-width:768px){
  #siteHeader{ padding:0 18px; }
  #siteHeader .hamburger{ display:flex; }
  #siteHeader .header-nav{
    position:fixed; top:0; right:-100%; width:240px; height:100vh;
    flex-direction:column; align-items:stretch; gap:0; padding:80px 24px 32px;
    background:var(--panel); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-left:1px solid var(--line); transition:right .3s ease; z-index:101;
  }
  #siteHeader .header-nav.open{ right:0; }
  #siteHeader .nav-link{ padding:14px 0; font-size:14px; border-bottom:1px solid rgba(255,255,255,.06); }
  #siteHeader .st-join{ margin-left:0; margin-top:8px; }
  #siteHeader .nav-login{ margin-left:0; margin-top:8px; justify-content:center; }
  /* ドロワー内のメンバーチップは全幅・ラベル表示で他の項目と揃える */
  #siteHeader .nav-chip{ width:100%; box-sizing:border-box; justify-content:flex-start; gap:10px; margin:8px 0 0; padding:10px 14px; border-radius:10px; }
  #siteHeader .nav-chip-who{ display:flex; }
  #siteHeader .nav-chip-arrow{ margin-left:auto; }
}