/**
 * ウチノ娘カルテ 全体スタイル定義 (Theme Switcher 対応)
 * ブロック構成整理版 (Phase 1)
 */

/* ==========================================
   1. 【Variables & Themes】変数・テーマ定義
   ========================================== */
:root {
    /* ==========================================
       デフォルトテーマ: サイバーパンク・ホログラム
       ========================================== */
    --bg-main: #050510;
    --bg-card: rgba(10, 20, 40, 0.5);
    --bg-card-hover: rgba(15, 30, 60, 0.7);
    --text-main: #e0f2fe;
    --text-muted: #38bdf8;
    --primary: #0ea5e9;
    --primary-hover: #38bdf8;
    --accent: #f472b6;
    --accent-glow: rgba(244, 114, 182, 0.6);
    --danger: #f43f5e;
    --success: #10b981;
    --border: rgba(14, 165, 233, 0.4);
    --border-focus: #38bdf8;
    --radius: 4px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* 固有エフェクト用変数 */
    --bg-pattern: linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 233, 0.05) 1px, transparent 1px);
    --bg-size: 30px 30px;
    --shadow-main-glow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary);
    --shadow-accent-glow: 0 0 8px var(--accent-glow);
    --shadow-text-glow: 0 0 5px var(--primary);
    --shadow-box-glow: 0 0 20px rgba(14, 165, 233, 0.1), inset 0 0 20px rgba(14, 165, 233, 0.05);
    --display-hologram: block;
    --result-bg: linear-gradient(135deg, rgba(10, 20, 40, 0.6) 0%, rgba(5, 10, 25, 0.8) 100%);
    --glass-blur: blur(12px);
}

html.theme-codex {
    /* ==========================================
       テーマ2: Codex（古代写本・羊皮紙）
       ========================================== */
    --bg-main: #f4ebd8;
    /* 羊皮紙のアイボリー */
    --bg-card: rgba(244, 235, 216, 0.85);
    --bg-card-hover: rgba(234, 222, 199, 0.95);
    --text-main: #3e2723;
    /* 焦げ茶色のインク */
    --text-muted: #5d4037;
    --primary: #8b0000;
    /* 深いクリムゾンレッド（印章風） */
    --primary-hover: #b71c1c;
    --accent: #b8860b;
    /* アンティークゴールド */
    --accent-glow: transparent;
    --danger: #c62828;
    --success: #2e7d32;
    --border: rgba(93, 64, 55, 0.3);
    --border-focus: #5d4037;
    --radius: 2px;
    /* 紙っぽく少し角ばらせる */

    /* 固有エフェクトの上書き（ネオンやホログラムを無効化） */
    /* ノイズテクスチャをSVGデータURIで適用し、紙の質感を表現 */
    --bg-pattern: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    --bg-size: auto;
    --shadow-main-glow: none;
    --shadow-accent-glow: none;
    --shadow-text-glow: none;
    --shadow-box-glow: 0 4px 15px rgba(62, 39, 35, 0.1);
    /* 自然な影 */
    --display-hologram: none;
    --result-bg: var(--bg-card);
    --glass-blur: blur(5px);
}

html.theme-darkfantasy {
    /* ==========================================
       テーマ3: Dark Fantasy（漆黒・深紅・禍々しい闇）
       ========================================== */
    --bg-main: #0a0505;
    --bg-card: rgba(25, 5, 5, 0.82);
    --bg-card-hover: rgba(45, 8, 8, 0.92);
    --text-main: #f5e0e0;
    --text-muted: #c0706a;
    --primary: #b91c1c;
    --primary-hover: #dc2626;
    --accent: #ff4500;
    --accent-glow: rgba(255, 69, 0, 0.55);
    --danger: #f87171;
    --success: #34d399;
    --border: rgba(185, 28, 28, 0.4);
    --border-focus: #dc2626;
    --radius: 4px;

    --bg-pattern: linear-gradient(rgba(185, 28, 28, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 28, 28, 0.06) 1px, transparent 1px);
    --bg-size: 30px 30px;
    --shadow-main-glow: 0 0 10px #b91c1c, 0 0 25px #b91c1c, 0 0 50px #7f1010;
    --shadow-accent-glow: 0 0 8px rgba(255, 69, 0, 0.65);
    --shadow-text-glow: 0 0 6px #b91c1c;
    --shadow-box-glow: 0 0 20px rgba(185, 28, 28, 0.18), inset 0 0 20px rgba(185, 28, 28, 0.08);
    --display-hologram: block;
    --result-bg: linear-gradient(135deg, rgba(35, 5, 5, 0.75) 0%, rgba(10, 3, 3, 0.92) 100%);
    --glass-blur: blur(12px);
}

html.theme-pastellavender {
    /* ==========================================
       テーマ4: Pastel Lavender（ラベンダー・やわらかくかわいい）
       ========================================== */
    --bg-main: #fdf2f8;
    --bg-card: rgba(255, 240, 252, 0.92);
    --bg-card-hover: rgba(252, 228, 248, 0.98);
    --text-main: #4a2060;
    --text-muted: #b06ec0;
    --primary: #d946ef;
    --primary-hover: #e879f9;
    --accent: #fb7185;
    --accent-glow: rgba(251, 113, 133, 0.45);
    --danger: #f43f5e;
    --success: #34d399;
    --border: rgba(217, 70, 239, 0.28);
    --border-focus: #e879f9;
    --radius: 12px;

    --bg-pattern: radial-gradient(circle, rgba(217, 70, 239, 0.07) 1px, transparent 1px);
    --bg-size: 24px 24px;
    --shadow-main-glow: 0 0 12px rgba(217, 70, 239, 0.4), 0 0 24px rgba(217, 70, 239, 0.2);
    --shadow-accent-glow: 0 0 6px rgba(251, 113, 133, 0.5);
    --shadow-text-glow: 0 0 4px rgba(217, 70, 239, 0.4);
    --shadow-box-glow: 0 4px 20px rgba(217, 70, 239, 0.12), inset 0 0 12px rgba(217, 70, 239, 0.05);
    --display-hologram: none;
    --result-bg: var(--bg-card);
    --glass-blur: blur(8px);
}

html.theme-pastellmint {
    /* ==========================================
       テーマ5: Pastel Mint（爽やかな緑・自然・ナチュラル）
       ========================================== */
    --bg-main: #f0fdf4;
    --bg-card: rgba(220, 252, 231, 0.88);
    --bg-card-hover: rgba(200, 245, 215, 0.96);
    --text-main: #14532d;
    --text-muted: #16a34a;
    --primary: #16a34a;
    --primary-hover: #22c55e;
    --accent: #34d399;
    --accent-glow: rgba(52, 211, 153, 0.45);
    --danger: #f43f5e;
    --success: #16a34a;
    --border: rgba(22, 163, 74, 0.28);
    --border-focus: #22c55e;
    --radius: 10px;

    --bg-pattern: radial-gradient(circle, rgba(22, 163, 74, 0.08) 1px, transparent 1px);
    --bg-size: 22px 22px;
    --shadow-main-glow: 0 0 10px rgba(22, 163, 74, 0.4), 0 0 20px rgba(22, 163, 74, 0.2);
    --shadow-accent-glow: 0 0 6px rgba(52, 211, 153, 0.5);
    --shadow-text-glow: 0 0 4px rgba(22, 163, 74, 0.4);
    --shadow-box-glow: 0 4px 20px rgba(22, 163, 74, 0.12), inset 0 0 12px rgba(22, 163, 74, 0.05);
    --display-hologram: none;
    --result-bg: var(--bg-card);
    --glass-blur: blur(8px);
}

/* ==========================================
   テーマ別: カルテ詳細パネル（補足事項）の上書き
   ========================================== */
/* Codex (魔法書・古代文献風) */
html.theme-codex .carte-option-block {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    border-left: 3px double var(--accent);
}

/* Dark Fantasy (禍々しい闇) */
html.theme-darkfantasy .carte-option-block {
    background: rgba(30, 5, 5, 0.6);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
    border-left: 3px dashed var(--accent);
}

/* Pastel Lavender (ライトテーマ・白系) */
html.theme-pastellavender .carte-option-block {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Pastel Mint (ライトテーマ・白系) */
html.theme-pastellmint .carte-option-block {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8);
}


/* ==========================================
   2. 【Reset & Base】リセット・ベーススタイル
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-main);
    background-image: var(--bg-pattern);
    background-size: var(--bg-size);
    color: var(--text-main);
    font-family: 'Inter', "Segoe UI", Roboto, "Helvetica Neue", Arial, serif;
    line-height: 1.6;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* ランダム背景コンテナ */
.random-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.random-bg-container.is-loaded {
    opacity: 0.15; /* テーマの色越しにうっすら見えるように調整 */
}



/* ==========================================
   3. 【Layouts】全体レイアウト
   ========================================== */
/* ==========================================
   レイアウトとヘッダー
   ========================================== */
.site-header {
    background-color: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    padding: 15px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-box-glow);
    text-align: center;
}

.site-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--text-main);
    text-transform: uppercase;
    text-shadow: var(--shadow-main-glow);
    margin: 0 0 8px 0;
}

.site-title-link {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.site-title-link:hover {
    color: var(--primary);
}

/* ヘッダー内部レイアウト（タイトル＋ハンバーガーボタンの行） */
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 8px;
}

/* ヘッダーナビゲーション（PC: 横並び） */
.site-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 4px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: var(--transition);
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--text-main);
    border-color: var(--primary);
    box-shadow: var(--shadow-box-glow);
}

/* ==========================================
   ハンバーガーボタン（スマホのみ表示）
   ========================================== */
.hamburger-btn {
    display: none;
    /* PCでは非表示 */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 200;
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-muted);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* ×印への変形アニメーション */
.hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
    background: var(--primary);
}

.hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
    background: var(--primary);
}

/* ==========================================
   スマホ時のナビゲーション
   ========================================== */
@media (max-width: 768px) {
    .site-header {
        text-align: left;
        padding: 12px 20px;
    }

    .site-header-inner {
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .site-header h1 {
        font-size: 1.3rem;
        margin: 0;
    }

    /* ハンバーガーボタンをスマホで表示 */
    .hamburger-btn {
        display: flex;
    }

    /* ナビをデフォルトで非表示 */
    .site-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-card);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-box-glow);
        padding: 8px 0;
        z-index: 150;
        gap: 0;
    }

    /* is-open クラスで展開 */
    .site-nav.is-open {
        display: flex;
    }

    /* ナビリンクを縦並び・タップしやすいサイズに */
    .nav-link {
        padding: 14px 24px;
        font-size: 1rem;
        letter-spacing: 0.05em;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--border);
        white-space: normal;
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    .nav-link:hover {
        border-color: transparent;
        border-bottom: 1px solid var(--border);
        background: var(--bg-card-hover);
        box-shadow: none;
    }
}

.site-main {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.site-footer {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.9em;
    letter-spacing: 0.1em;
}

.footer-copyright {
    margin-top: 15px;
}

.fanart-disclaimer {
    font-size: 0.85em;
    color: var(--text-muted);
    opacity: 0.8;
    margin-bottom: 5px;
    line-height: 1.4;
}

/* ==========================================
   フッター・ポータルリンク（Stellar Nexus）
   ========================================== */
.footer-portal-link {
    margin-bottom: 12px;
}

.footer-portal-link .nexus-link {
    font-family: 'Cinzel', 'Shippori Mincho', serif;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.footer-portal-link .nexus-link:hover {
    opacity: 1;
    color: var(--primary);
    text-shadow: var(--shadow-text-glow);
}

/* ==========================================
   フッターリンク
   ========================================== */
.footer-links {
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    opacity: 0.7;
}

.footer-link:hover {
    color: var(--primary);
    opacity: 1;
}

.footer-separator {
    color: var(--text-muted);
    opacity: 0.4;
    margin: 0 8px;
}


/* ==========================================
   4. 【Components】汎用コンポーネント（UIパーツ）
   ========================================== */
/* テーマスイッチャー（フッター配置） */
.theme-switcher-container {
    margin-bottom: 15px;
}

.theme-select {
    appearance: none;
    background-color: var(--bg-main);
    color: var(--text-main);
    border: 1px solid var(--primary);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-text-glow);
    outline: none;
    text-align: center;
    text-align-last: center;
}

.theme-select:focus {
    border-color: var(--accent);
}

/* ==========================================
   ボタン
   ========================================== */
.form-actions {
    text-align: center;
    margin-top: 40px;
}

.btn {
    display: inline-block;
    padding: 15px 50px;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.btn-primary {
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--primary);
    box-shadow: var(--shadow-box-glow);
    text-shadow: var(--shadow-text-glow);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
    display: var(--display-hologram);
    /* ホログラム時のみ表示 */
}

.btn-primary:hover {
    background-color: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-main-glow);
    text-shadow: none;
}

.btn-primary:hover::before {
    left: 150%;
}

.btn-accent {
    background-color: var(--accent);
    color: var(--bg-main);
    border: 1px solid var(--accent);
    font-size: 1rem;
}

.btn-accent:hover {
    background-color: transparent;
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent-glow);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 1rem;
}

.btn-secondary:hover {
    color: var(--text-main);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-box-glow);
}

/* 生成画面の投稿導線 */
.post-action-area {
    text-align: center;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px dashed var(--border);
}

/* 詳細画面の下部ナビゲーション */
.detail-bottom-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px dashed var(--border);
    flex-wrap: wrap;
}

.detail-bottom-nav .btn {
    padding: 12px 30px;
    font-size: 0.9rem;
}

/* ラジオボタン (性別選択) */
.radio-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.radio-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-main);
    padding: 10px 25px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--transition);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.radio-label:hover,
.radio-label:has(input:checked) {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    color: var(--text-main);
    box-shadow: var(--shadow-box-glow);
}

.radio-label input[type="radio"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    filter: drop-shadow(var(--shadow-text-glow));
}

/* ==========================================
   トグルスイッチ (不穏な要素等)
   ========================================== */
.unrest-toggle-section {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.toggle-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-main);
    padding: 12px 25px;
    border-radius: 30px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.toggle-label:hover,
.toggle-label:has(input:checked) {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    box-shadow: var(--shadow-box-glow);
}

.toggle-label-text {
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    transition: var(--transition);
}

.toggle-label:has(input:checked) .toggle-label-text {
    color: var(--text-main);
}

.toggle-switch {
    position: relative;
    width: 46px;
    height: 24px;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: var(--transition);
}

.toggle-slider {
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s;
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-label:has(input:checked) .toggle-switch {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: var(--primary);
}

.toggle-label:has(input:checked) .toggle-slider {
    transform: translateX(22px);
    background-color: var(--primary);
    box-shadow: var(--shadow-text-glow);
}

/* ナンバー入力 */
.number-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.number-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.number-input {
    width: 80px;
    padding: 10px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-main);
    border-radius: var(--radius);
    text-align: center;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    transition: var(--transition);
    text-shadow: var(--shadow-text-glow);
}

.number-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-box-glow);
}

.separator {
    color: var(--primary);
    text-shadow: var(--shadow-text-glow);
}

/* SNSアカウント入力 */
.sns-input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sns-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.sns-icon {
    font-size: 1.4rem;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.text-input {
    flex: 1;
    padding: 10px 15px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-main);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
}

.text-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-box-glow);
}

.text-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

/* 必須バッジ */
.required-badge {
    font-size: 0.75rem;
    background: var(--danger);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    vertical-align: middle;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* バリデーションヒント */
.validation-hint {
    font-size: 0.85rem;
    color: var(--accent);
    margin-top: 8px;
    font-weight: 500;
}

.validation-hint.hidden {
    display: none;
}

/* 投稿結果メッセージ */
.post-result-area {
    margin-top: 25px;
    padding: 20px;
    border-radius: var(--radius);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.post-result-area.hidden {
    display: none;
}

.post-result--success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--success);
    color: var(--success);
}

.post-result--error {
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
}

/* ==========================================
   SNSシェアボタンエリア（投稿直後のみ表示）
   ========================================== */
.carte-share-area {
    max-width: 800px;
    margin: 25px auto 0;
    padding: 20px;
    background-color: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    text-align: center;
    box-shadow: 0 0 15px var(--shadow-accent-glow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.carte-share-header {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 15px;
}

.carte-share-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.carte-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

/* X（旧Twitter）シェアボタン */
.carte-share-btn--x {
    background-color: #000;
    color: #fff;
    border: 1px solid #333;
}

.carte-share-btn--x:hover {
    background-color: #1a1a1a;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Blueskyシェアボタン */
.carte-share-btn--bsky {
    background-color: #0085ff;
    color: #fff;
    border: 1px solid #339bff;
}

.carte-share-btn--bsky:hover {
    background-color: #0070dd;
    box-shadow: 0 0 12px rgba(0, 133, 255, 0.4);
    transform: translateY(-2px);
}

/* ==========================================
   フローティングアクションボタン (FAB)
   ========================================== */
.fab-regenerate {
    position: fixed;
    bottom: 24px;
    /* 元の24px + ボタン1つ分(60px) */
    right: 24px;
    /* 右下隅から24pxマージン */
    width: 60px;
    height: 60px;
    border-radius: 50%;

    /* .btn-primary ベースのデザイン */
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--primary);
    box-shadow: var(--shadow-box-glow);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

/* ホログラムエフェクト */
.fab-regenerate::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
    display: var(--display-hologram);
}

.fab-regenerate.hidden {
    display: none !important;
}

.fab-regenerate:hover {
    background-color: var(--primary);
    color: #ffffff;
    transform: translateY(-2px) scale(1.05) rotate(15deg);
    box-shadow: var(--shadow-main-glow);
}

.fab-regenerate:hover::before {
    left: 150%;
}

.fab-regenerate:active {
    transform: scale(0.95);
}

.fab-regenerate svg {
    transition: transform 0.4s ease;
}

.fab-regenerate:active svg {
    transform: rotate(180deg);
}

/* PC環境ではキーボードショートカットがあるため非表示 */
@media screen and (min-width: 769px) {
    .fab-regenerate {
        display: none !important;
    }
}


/* ==========================================
   5. 【Features - Generator】機能：カルテ生成（お題ガチャ）
   ========================================== */
/* ==========================================
   フォームUI
   ========================================== */
.generator-container {
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 35px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-box-glow);
}

.form-section {
    margin-bottom: 35px;
}

.form-section h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--accent);
    border-bottom: 1px dashed var(--accent);
    padding-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-shadow: var(--shadow-accent-glow);
}

/* ==========================================
   結果表示エリア (ホログラムパネル / 羊皮紙)
   ========================================== */
@keyframes themeFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.result-area {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
    position: relative;
    scroll-margin-top: 100px;
    /* 固定ヘッダーに隠れないようにスクロール位置を調整 */
}

/* トップの装飾ライン */
.result-area::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--primary);
    box-shadow: var(--shadow-main-glow);
    display: var(--display-hologram);
}

.result-area:not(.hidden) {
    animation: themeFadeIn 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.result-area.hidden {
    display: none;
}

.result-area h2 {
    text-align: center;
    color: var(--text-main);
    margin-bottom: 30px;
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    text-shadow: var(--shadow-main-glow);
}

.shortcut-hint {
    font-size: 0.45em;
    color: var(--text-muted);
    font-family: monospace, sans-serif;
    margin-left: 15px;
    letter-spacing: 0.05em;
    vertical-align: middle;
    text-shadow: none;
    opacity: 0.7;
}

.shortcut-hint-btn {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.7);
    font-family: monospace, sans-serif;
    margin-left: 8px;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

@media screen and (max-width: 768px) {

    .shortcut-hint,
    .shortcut-hint-btn {
        display: none !important;
        /* スマホでは非表示 */
    }
}

.result-content h3 {
    font-size: 1.4rem;
    color: var(--text-main);
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 600;
    letter-spacing: 0.2em;
    border-left: 4px solid var(--accent);
    padding-left: 12px;
    text-shadow: var(--shadow-accent-glow);
}

.result-list {
    list-style-type: none;
    background: var(--result-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 18px;
    border-radius: var(--radius);
    margin-bottom: 30px;
    border: 1px solid var(--border);
    border-left: 2px solid var(--primary);
    box-shadow: var(--shadow-box-glow);
    position: relative;
    overflow: hidden;
}

/* ホログラムの走査線エフェクト */
.result-list::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(14, 165, 233, 0.03) 51%);
    background-size: 100% 4px;
    pointer-events: none;
    display: var(--display-hologram);
}

.result-item {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--border);
    position: relative;
    z-index: 1;
}

.result-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.result-item.item-continued {
    margin-top: -12px;
    padding-top: 0;
    border-top: none;
}

.result-item.result-category-label {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 5px;
}

.result-item.item-value-row {
    padding-left: 15px;
}

.result-item.item-value-row::before {
    content: '-';
    position: absolute;
    left: 0;
    top: 5px;
    color: var(--text-muted);
}

/* タイポグラフィの強弱 */
.item-label {
    font-size: 1.2rem;
    color: var(--accent);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 700;
    text-shadow: var(--shadow-accent-glow);
}

.item-value {
    font-size: 1.8rem;
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    /* サイバーパンク時のみ青い光、それ以外はnone */
    text-shadow: var(--shadow-text-glow);
    word-break: break-word;
    /* 長い単語の折り返し対策 */
}

/* 検索リンクを含む行コンテナ */
.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

/* ボタン群をまとめるコンテナ */
.item-actions {
    display: flex;
    gap: 8px;
    /* ボタン同士の隙間 */
    flex-shrink: 0;
}

/* 画像検索「G」ボタン */
.item-search-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;

    font-size: 1.2rem;
    font-weight: 900;
    color: var(--primary);
    text-decoration: none !important;
    text-decoration-line: none !important;
    /* Firefox等の下線ライン自体を消去 */
    text-decoration-color: transparent !important;
    /* 万が一消えない場合も下線を透明化 */

    background-color: var(--bg-main);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-box-glow);
    transition: var(--transition);

    cursor: pointer;
}

.item-search-link:hover,
.item-search-link:focus,
.item-search-link:active {
    background-color: var(--primary);
    color: var(--bg-main);
    box-shadow: var(--shadow-main-glow);
    transform: translateY(-1px);
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
}

.error-msg {
    color: var(--text-main);
    text-align: center;
    font-weight: 600;
    background: rgba(244, 63, 94, 0.2);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--danger);
    box-shadow: var(--shadow-box-glow);
}


/* ==========================================
   6. 【Features - Gallery】機能：ギャラリー・カルテ詳細
   ========================================== */
/* ==========================================
   ギャラリー一覧画面（タイル表示）
   ========================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gallery-tile {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.gallery-tile:hover {
    transform: scale(1.03);
    border-color: var(--primary);
    box-shadow: var(--shadow-main-glow);
    z-index: 1;
}

.gallery-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-tile:hover .gallery-tile-img {
    transform: scale(1.08);
}

/* 日付オーバーレイ */
.gallery-tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    pointer-events: none;
}

.gallery-tile-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   ギャラリー詳細画面
   ========================================== */
.detail-nav {
    margin-bottom: 25px;
}

.detail-image-section {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.image-nav-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.detail-image {
    width: 100%;
    max-height: 600px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-box-glow);
    object-fit: contain;
    display: block;
}

/* ナビゲーションボタン */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
    transition: var(--transition);
    z-index: 10;
    opacity: 0.6;
}

.nav-btn:hover {
    opacity: 1;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-main-glow);
}

.nav-btn-prev {
    left: -25px;
}

.nav-btn-next {
    right: -25px;
}

@media (max-width: 768px) {
    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .nav-btn-prev {
        left: 5px;
    }

    .nav-btn-next {
        right: 5px;
    }
}

.nav-arrow {
    line-height: 1;
    margin-top: -4px;
}

/* 投稿者名 */
.poster-name-display {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.1em;
    text-shadow: var(--shadow-text-glow);
}

/* コメントブロック */
.comment-block {
    background: var(--bg-card);
    border-left: 4px solid var(--accent);
    padding: 20px 25px;
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-main);
    box-shadow: var(--shadow-box-glow);
}

/* SNSリンク */
.sns-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sns-link-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    padding: 8px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-main);
}

.sns-link-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-box-glow);
    color: var(--text-main);
}

/* 投稿メタ情報 */
.detail-meta {
    margin-top: 30px;
    text-align: right;
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ==========================================
   ギャラリー詳細画面 (デモHTMLベースのLiquid Layout)
   ========================================== */

/* メインコンテナ */
.carte-interface {
    width: 100%;
    max-width: 960px;
    margin: 40px auto;
    padding: 0 20px;
    background-color: var(--bg-card);
    border: 1px solid var(--primary);
    box-shadow: var(--shadow-box-glow);
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* 枠線の発光装飾 */
.carte-interface::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 20px var(--shadow-accent-glow);
    border: 2px solid var(--primary);
    pointer-events: none;
}

/* ヘッダーカットアウト */
.carte-frame-top {
    position: relative;
    width: calc(100% + 40px);
    /* padding相殺 */
    margin-left: -20px;
    height: auto;
    min-height: 60px;
    background-color: var(--bg-main);
    clip-path: polygon(0 0,
            30% 0, 32% 10px, 68% 10px, 70% 0,
            100% 0, 100% 100%, 0 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid var(--primary);
    z-index: 10;
}

.carte-title-ref {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.carte-title-main {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: bold;
}

/* 2カラムレイアウト（Grid） */
.carte-profile-section {
    display: grid;
    grid-template-columns: 1fr;
    /* スマホデフォルト */
    gap: 30px;
    padding: 20px 0;
}

@media screen and (min-width: 768px) {
    .carte-profile-section {
        grid-template-columns: 460px 1fr;
        /* PC時 */
    }
}

/* 写真エリア */
.carte-photo-area {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 424 / 600;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ナビゲーションを写真に重ねるためのラッパー調整 */
.carte-photo-area .image-nav-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 写真フレーム装飾 */
.carte-photo-frame {
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary);
    box-shadow: 0 0 10px var(--shadow-main-glow);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius); /* clip-pathの代わりにテーマに応じた角丸を適用 */
}

.carte-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: var(--bg-main);
    padding: 15px 0; /* 上下の隙間を確保 */
    /* 余白の背景色 */
}


/* ステータスエリア */
.carte-status-area {
    padding-left: 0;
}

.carte-status-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
    width: 100%;
}

.carte-status-header-text {
    color: var(--text-main);
}

.carte-status-header-accent {
    color: var(--accent);
    font-size: 0.8rem;
    margin-left: 10px;
    display: inline-block;
}

/* ステータステーブル */
.carte-status-table {
    width: 100%;
    font-size: 0.9rem;
    border-collapse: collapse;
}

.carte-status-table td {
    padding: 6px 0;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* 微細な境界線 */
}

.carte-status-label {
    color: var(--text-muted);
    width: 100px;
    white-space: nowrap;
    font-weight: 600;
}

.carte-status-separator {
    color: var(--text-muted);
    padding: 0 10px;
}

.carte-status-value {
    color: var(--text-main);
    word-break: break-word;
}

/* スタンプ画像 */
.carte-stamp-container {
    margin-top: auto;
    padding-top: 60px;
    display: flex;
    justify-content: flex-start;
    /* 左寄りに変更 */
    padding-left: 40px;
    /* 左端の余白を減らす */
    margin-bottom: -35px;
    /* 下の補足事項エリアとの隙間を埋めるために押し出す */
    position: relative;
    z-index: 5;
    /* 下の要素に重なっても表示されるように */
    opacity: 0.85;
}

.carte-stamp {
    width: 220px;
    /* 大きめに調整 */
    max-width: 80%;
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    /* ホバー時に少し反応させるお遊び要素 */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.carte-stamp:hover {
    transform: scale(1.05) rotate(0deg) !important;
}

/* 下部補足事項エリア（グリッドレイアウト） */
.carte-extra-section {
    margin-top: 15px;
    padding-top: 20px;
    position: relative;
}

.carte-extra-section .carte-status-header {
    margin-bottom: 15px;
}

.carte-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.carte-option-block {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 12px 15px;
    border-radius: var(--radius);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.carte-option-category {
    font-size: 0.95rem;
    color: var(--accent);
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 6px;
    text-shadow: var(--shadow-accent-glow);
}

.carte-option-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.carte-option-items li {
    font-size: 0.9rem;
    color: var(--text-main);
    padding: 4px 0;
    position: relative;
    padding-left: 14px;
    word-break: break-word;
}

.carte-option-items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 50%;
    box-shadow: var(--shadow-text-glow);
}

/* コメントセクション */
.carte-comment-section {
    padding: 20px 0;
    padding-bottom: 140px;
    /* 署名エリア用のスペース確保 */
    border-top: 1px solid var(--primary);
    position: relative;
    margin-top: 20px;
}

.carte-comment-header {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--primary);
    text-transform: uppercase;
}

.carte-comment-body {
    color: var(--text-main);
    line-height: 1.8;
    font-size: 0.95rem;
    white-space: pre-wrap;
}

/* フッター情報 */
.carte-footer-info {
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.8;
}

/* 署名エリア */
.carte-signature-area {
    position: absolute;
    bottom: 30px;
    right: 0;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.carte-signature {
    font-family: 'Dancing Script', 'Alex Brush', cursive, serif;
    font-size: 2rem;
    color: var(--accent);
    margin: 5px 0;
    line-height: 1;
}

.carte-signature-sns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.carte-sns-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}

.carte-sns-link:hover {
    color: var(--accent);
}

/* 枠外警告 */
.carte-bottom-warning {
    position: absolute;
    bottom: -30px;
    left: 20px;
    color: var(--accent);
    font-size: 0.75rem;
}

@media screen and (max-width: 480px) {
    .carte-title-ref {
        font-size: 0.6rem;
    }

    .carte-title-main {
        font-size: 0.9rem;
    }

    .carte-signature {
        font-size: 1.5rem;
    }

    .carte-comment-section {
        padding-bottom: 160px;
    }

    /* 枠外警告文をさらに下へ逃がして被りを防止 */
    .carte-bottom-warning {
        bottom: -45px;
    }

    /* スマホ時はSNSで縦に伸びるため余白増 */
    .carte-interface {
        margin-bottom: 60px;
    }
}

/* ==========================================
   アーカイブ投稿画面
   ========================================== */
.archive-page-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    letter-spacing: 0.2em;
    color: var(--text-main);
    text-shadow: var(--shadow-main-glow);
}

/* データなし表示 */
.no-data-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 2;
}

.no-data-message.hidden {
    display: none;
}

.link-accent {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 600;
    transition: var(--transition);
}

.link-accent:hover {
    color: var(--primary);
    text-shadow: var(--shadow-text-glow);
}

/* ファイル選択 */
.file-upload-area {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.file-input-hidden {
    display: none;
}

.file-upload-label {
    display: inline-block;
    padding: 10px 25px;
    font-size: 1rem;
    cursor: pointer;
}

.file-name-display {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* 画像プレビュー */
.image-preview-container {
    margin-top: 20px;
    text-align: center;
}

.image-preview-container.hidden {
    display: none;
}

.image-preview {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-box-glow);
    object-fit: contain;
}


/* コメント欄 */
.comment-area {
    width: 100%;
    padding: 15px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-main);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    transition: var(--transition);
}

.comment-area:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-box-glow);
}

.comment-area::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* 文字数カウンター */
.char-counter-container {
    text-align: right;
    margin-top: 8px;
}

.char-counter {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.char-counter--over {
    color: var(--danger);
    text-shadow: 0 0 8px var(--danger);
}


/* ==========================================
   7. 【Pages】その他独立画面
   ========================================== */
/* ==========================================
   ログイン選択画面
   ========================================== */
.login-page-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 10px;
    letter-spacing: 0.2em;
    color: var(--text-main);
    text-shadow: var(--shadow-main-glow);
}

.login-description {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 35px;
}

.login-error-message {
    text-align: center;
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    padding: 12px 20px;
    margin-bottom: 25px;
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 600;
}

.login-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto 30px;
}

/* ログインボタン共通 */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 24px;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.login-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.login-btn-icon svg {
    display: block;
}

.login-btn-text {
    white-space: nowrap;
}

/* Googleボタン */
.login-btn-google {
    background-color: #ffffff;
    color: #3c4043;
    border-color: #dadce0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.login-btn-google:hover {
    background-color: #f8f9fa;
    border-color: #c6c9cc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* 𝕏ボタン */
.login-btn-x {
    background-color: #000000;
    color: #ffffff;
    border-color: #333333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.login-btn-x:hover {
    background-color: #1a1a1a;
    border-color: #555555;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1), 0 0 15px rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

/* 注意書き */
.login-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    opacity: 0.7;
    line-height: 1.6;
}

/* 𝕏権限に関する情報ボックス */
.login-info-box {
    max-width: 400px;
    margin: 20px auto 0;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: var(--radius);
    text-align: left;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.7;
    opacity: 0.85;
}

.login-info-title {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 6px;
    color: var(--text-main);
    opacity: 0.9;
}

.login-info-box p {
    margin-bottom: 4px;
}

.login-info-box p:last-child {
    margin-bottom: 0;
}

.login-info-box strong {
    color: var(--text-main);
    opacity: 0.9;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .login-buttons {
        max-width: 100%;
    }

    .login-btn {
        padding: 14px 20px;
        font-size: 0.95rem;
    }
}

/* ==========================================
   プライバシーポリシー・利用規約ページ
   ========================================== */
.policy-page {
    line-height: 1.9;
}

.policy-page-title {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 10px;
    letter-spacing: 0.15em;
    color: var(--text-main);
    text-shadow: var(--shadow-main-glow);
}

.policy-intro {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 30px;
    line-height: 1.8;
}

.policy-section {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border);
}

.policy-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.policy-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 10px;
    letter-spacing: 0.08em;
    text-shadow: var(--shadow-accent-glow);
}

.policy-section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    margin-top: 14px;
    margin-bottom: 6px;
    opacity: 0.9;
}

.policy-section p {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.policy-section ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 8px;
}

.policy-section ul li {
    font-size: 0.88rem;
    color: var(--text-muted);
    padding-left: 1.2em;
    position: relative;
    margin-bottom: 4px;
}

.policy-section ul li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--primary);
}

.policy-section strong {
    color: var(--text-main);
}

.policy-note {
    font-size: 0.82rem !important;
    opacity: 0.8;
    font-style: italic;
}

.policy-link {
    color: var(--primary);
    text-decoration: underline;
    transition: var(--transition);
}

.policy-link:hover {
    color: var(--accent);
}

.policy-contact {
    list-style: none !important;
}

.policy-contact li::before {
    content: "" !important;
}

.policy-contact li {
    padding-left: 0 !important;
}

/* ==========================================
   年齢確認モーダル
   ========================================== */
.modal-overlay-public {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(5, 5, 16, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content-public {
    background: var(--bg-card);
    border: 2px solid var(--accent);
    padding: 40px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow-main-glow);
    max-width: 90%;
    width: 400px;
}


/* ==========================================
   8. 【Utilities & Media Queries】ユーティリティ・例外的なレスポンシブ
   ========================================== */
/* ==========================================
   スマホ時のレスポンシブ調整（スタンプ非表示など）
   ========================================== */
@media screen and (max-width: 768px) {
    .carte-stamp-container {
        display: none !important;
    }
}

/* ==========================================
   noUiSlider カスタムスタイル & ステッパー
   ========================================== */
.slider-section {
    padding: 10px 15px;
    margin-bottom: 0px;
}

h2.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* .form-section h2 として元々の色やボーダーが効きます */
}

.slider-label {
    margin: 0;
    border-bottom: none;
}

.stepper-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.stepper-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px;
    background: var(--bg-card);
}

.step-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.step-btn:hover {
    background: var(--primary);
    color: #fff;
}

.step-btn:active {
    transform: scale(0.9);
}

.step-val {
    width: 24px;
    text-align: center;
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--text-main);
}

.stepper-separator {
    color: var(--border);
    font-weight: bold;
}

.slider-wrapper {
    padding: 0 10px;
    margin-top: 45px; /* ツールチップがh2のボーダーに重ならないよう余白を追加 */
    margin-bottom: 10px;
}

/* ==========================================
   noUiSlider テーマオーバーライド（ウチノ娘カルテ用）
   ========================================== */
/* ベースのトラック（レール） */
.noUi-target {
    background: var(--bg-main) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* 水平スライダーの高さ調整 */
.noUi-horizontal {
    height: 8px !important;
}

/* 選択された範囲（コネクト） */
.noUi-connect {
    background: var(--primary) !important;
    box-shadow: 0 0 8px var(--primary) !important;
}

/* ツマミ（ハンドル）の形状とサイズ */
.noUi-horizontal .noUi-handle {
    width: 24px !important;
    height: 24px !important;
    right: -12px !important;
    top: -9px !important;
    border-radius: 50% !important;
    background-color: var(--bg-main) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.8), inset 0 0 5px var(--primary) !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

/* ツマミのデフォルト縦線を消す */
.noUi-handle::before,
.noUi-handle::after {
    display: none !important;
}

/* ツマミホバー時／ドラッグ時のエフェクト */
.noUi-handle:hover,
.noUi-active .noUi-handle {
    transform: scale(1.15) !important;
    box-shadow: 0 0 15px var(--primary), inset 0 0 8px var(--primary) !important;
    background-color: var(--primary) !important;
}

/* ツールチップ（上に出る数値） */
.noUi-tooltip {
    font-size: 0.85rem !important;
    padding: 3px 8px !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    font-weight: bold !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
    text-shadow: var(--shadow-text-glow) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}