/* ============================================================
   Otsuge 共通スタイル
   全ページで共通のカラー変数・基本レイアウトをここに集約。
   ページ固有の見た目(ヘッダーの余白差など)は、各HTMLの
   <style>内に小さな上書きルールとして残しています。
   ============================================================ */

:root {
    --bg-color: #070a12;
    --card-bg: linear-gradient(145deg, #121826 0%, #0b0f19 100%);
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --gold-primary: #d4af37;
    --gold-gradient: linear-gradient(135deg, #f39c12 0%, #d4af37 50%, #f1c40f 100%);
    --border-color: rgba(212, 175, 55, 0.25);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(212, 175, 55, 0.05);
    --open-color: #5dcaa5;
    --wait-color: #e0a94e;
}

body {
    font-family: 'Shippori Mincho', "Times New Roman", serif;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 70%),
        radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

.topbar {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    font-size: 0.85rem;
}
.topbar a { color: var(--gold-primary); text-decoration: none; }

.page-body {
    display: flex;
    justify-content: center;
    padding: 25px 15px 40px;
}

header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}
header::after {
    content: "◆ ✦ ◆";
    position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
    background: var(--bg-color); padding: 0 15px; color: var(--gold-primary);
    font-size: 0.8rem; letter-spacing: 4px;
}
.header-title {
    font-family: 'Cinzel', 'Shippori Mincho', serif; font-size: 2rem; font-weight: 800;
    letter-spacing: 3px; background: var(--gold-gradient); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; margin-bottom: 6px;
}
.subtitle { color: var(--text-muted); font-size: 1rem; letter-spacing: 1.5px; }

.card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--gold-gradient); opacity: 0.7; border-radius: 8px 8px 0 0;
}

h2 {
    font-size: 1.08rem; color: var(--gold-primary); display: flex;
    align-items: center; gap: 10px; margin: 0 0 18px;
}
h2::before { content: "✦"; font-size: 0.9rem; }

.btn-submit {
    width: 100%; background: var(--gold-gradient); color: #070a12; font-family: inherit;
    font-weight: bold; font-size: 1.05rem; padding: 16px; border: none; border-radius: 30px;
    cursor: pointer; letter-spacing: 2px;
}