/* Royal Odds Lounge — 共通クロム＋再利用コンポーネント
 * ヘッダー / サブバー / フッター / ボタン / フォーム原子を集約。
 * ページ固有の見た目は pages/*.css 側で上書きする（読み込み順: tokens → app → pages）。 */

/* ---- レイアウト幅（body クラスで切替）---- */
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
.is-wide .wrap{max-width:1040px}
.is-form .wrap{max-width:680px}
.is-narrow .wrap{max-width:600px}
.is-pay .wrap{max-width:560px}

main{display:block}

/* ---- ヘッダー（共通トップバー）---- */
.site-header{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
  background:rgba(15,22,38,.86);
  backdrop-filter:blur(8px);
}
.bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;max-width:980px;margin:0 auto;flex-wrap:wrap;gap:14px;
}
.is-wide .bar,.is-form .bar{max-width:1040px}

.brand{font-family:var(--serif);font-size:18px;letter-spacing:.06em;color:var(--gold2)}
.is-wide .brand,.is-form .brand{font-size:21px;letter-spacing:.07em}

.nav{display:flex;align-items:center;gap:22px;font-size:13px}
.nav a{font-size:13px;color:var(--muted);padding-bottom:3px}
.nav a:hover{color:var(--gold2)}
.nav a.on{color:var(--gold2);border-bottom:1px solid var(--gold)}
.nav a.lo{display:flex;align-items:center;gap:5px}

/* ---- サブバー（ログイン会員のみ）---- */
.subbar{border-bottom:1px solid var(--line)}
.subbar .in{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;max-width:980px;margin:0 auto;
  font-size:12px;color:var(--muted);flex-wrap:wrap;gap:8px;
}
.subbar .status{
  color:var(--gold2);border:1px solid rgba(198,162,86,.5);
  padding:3px 12px;border-radius:2px;display:flex;align-items:center;gap:6px;
}

/* ---- フッター ---- */
.site-footer{background:var(--ink);border-top:1px solid var(--line);padding:34px 0 30px}
.site-footer.is-slim{
  padding:24px 0;margin-top:30px;text-align:center;
  font-size:11px;color:var(--muted);letter-spacing:.1em;
}
.flinks{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--muted);margin-bottom:18px}
.flinks a{color:var(--muted)}
.flinks span{color:var(--line)}
.disc{font-size:11px;color:var(--muted);line-height:1.85;text-align:center;max-width:560px;margin:0 auto 16px}
.copy{text-align:center;font-size:11px;color:var(--muted);letter-spacing:.1em}

/* ---- ボタン ---- */
.btn{display:inline-block;border-radius:2px;cursor:pointer;letter-spacing:.08em;transition:all .25s;font-family:var(--sans)}
.btn-gold{
  display:inline-block;background:var(--gold);color:var(--navy);border:1px solid var(--gold);
  padding:14px 44px;border-radius:2px;font-size:14px;letter-spacing:.1em;cursor:pointer;
  font-family:var(--sans);transition:all .25s;text-align:center;
}
.btn-gold:hover{background:var(--gold2);color:var(--navy)}
.btn-ghost{
  display:inline-block;background:transparent;color:var(--ivory);border:1px solid var(--line);
  padding:12px 30px;font-size:13px;border-radius:2px;letter-spacing:.08em;cursor:pointer;transition:all .25s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold2)}
.btn-ghost.sm{padding:7px 16px;font-size:12px}

/* ---- 飾り罫 ---- */
.ornament{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0}
.ornament .ln{height:1px;width:84px;background:var(--line)}
.ornament .dia{width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}

/* ---- フォーム原子（apply / contact / payment / login / info edit 共通）---- */
.field{margin-bottom:20px}
label.fl{display:block;font-size:13px;margin-bottom:8px;color:var(--ivory)}
.req{font-size:11px;color:var(--gold2);border:1px solid var(--line);padding:1px 7px;border-radius:2px;margin-left:7px;letter-spacing:.05em}
.opt{font-size:11px;color:var(--muted);margin-left:7px}
input,select,textarea{
  width:100%;background:var(--ink);border:1px solid var(--line);color:var(--ivory);
  padding:11px 14px;border-radius:2px;font-size:14px;font-family:var(--sans);
  outline:none;transition:border-color .2s;
}
input::placeholder,textarea::placeholder{color:#5C6478}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{resize:vertical}
.chk{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:13px;line-height:1.6;cursor:pointer}
.chk input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--gold);padding:0}
.submit{text-align:center;padding:26px 0 12px}
.subnote{text-align:center;font-size:11px;color:var(--muted);line-height:1.8;padding-bottom:30px}

/* ---- 見出し共通（サイズはページ側で上書き）---- */
.hero{text-align:center;padding:clamp(50px,10vw,76px) 0 28px}
.kicker{font-size:12px;letter-spacing:.34em;color:var(--gold);margin-bottom:22px}
.h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,6.5vw,2.4rem);letter-spacing:.08em;color:var(--ivory);margin-bottom:18px}
.lead{font-family:var(--jserif);font-size:14px;color:var(--muted);line-height:1.95;max-width:460px;margin:0 auto}

/* ---- バリデーションエラー ---- */
.field-error{color:#E08C8C;font-size:12px;margin-top:6px}

/* ---- 入力エラー時の枠 ---- */
input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#E08C8C}