/* ==========================================================================
   推し活交流サイト 共通スタイル（素のCSS / モバイルファースト）
   ========================================================================== */

:root {
    /* 白基調・KUMON 風のクリーンで統一感のある配色（信頼のブルー＋温かいオレンジの差し色） */
    --c-bg: #ffffff;           /* 背景は純白（グレー背景は使わない） */
    --c-surface: #ffffff;      /* カード・ヘッダー（枠線で区別） */
    --c-soft: #f2f7fb;         /* 淡い青みの面（チップ・サムネ等の小面積のみ／ページ背景には使わない） */
    --c-text: #333333;         /* KUMON 風のやわらかい黒文字 */
    --c-muted: #6b7684;        /* 補助テキスト（青みグレー） */
    --c-primary: #1596d6;      /* ブランドブルー（ボタン塗り/リンク/アクティブ等） */
    --c-primary-dark: #0f75ad; /* リンク等のテキスト用（可読性のため少し濃いブルー） */
    --c-accent: #ff9800;       /* 温かいオレンジの差し色（強調・会員限定など） */
    --c-border: #e3e8ee;       /* 淡い青みグレーの境界線 */
    --c-danger: #e0455a;
    --c-success: #1ea672;
    --radius: 12px;            /* KUMON 風のやさしい角丸 */
    --shadow: 0 2px 10px rgba(20, 80, 130, 0.06);  /* 青みを帯びた控えめな影 */
    --maxw: 640px;              /* スマホ幅基準。PCは中央寄せ */

    /* ---- 文字サイズ変更（中/大/特大）。中=1 を既定とし本文テキストのみ比例拡大 ---- */
    --fs-scale: 1;
    --fs-base:    calc(16px * var(--fs-scale));   /* 本文 */
    --fs-sm:      calc(14px * var(--fs-scale));
    --fs-xs:      calc(13px * var(--fs-scale));
    --fs-2xs:     calc(12px * var(--fs-scale));
    --fs-title:   calc(20px * var(--fs-scale));   /* ページ見出し */
    --fs-name:    calc(15px * var(--fs-scale));
    --fs-heading: calc(18px * var(--fs-scale));   /* プロフィール名等 */
}

/* 文字サイズレベル（html要素に付与） */
html.fs-dai     { --fs-scale: 1.18; }   /* 大 */
html.fs-tokudai { --fs-scale: 1.36; }   /* 特大 */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    color: var(--c-text);
    /* jamas.or.jp 準拠の和文ゴシックスタック（メイリオ／ヒラギノ角ゴ系） */
    font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴシック", "Hiragino Sans", "ＭＳ Ｐゴシック", "MS PGothic",
        Helvetica, Arial, sans-serif;
    font-size: var(--fs-base);   /* jamas 準拠: 本文 16px 基準（文字サイズ変更で拡大） */
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--c-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---- レイアウト枠 ---- */
.app {
    max-width: var(--maxw);
    margin: 0 auto;
    min-height: 100vh;
    background: var(--c-bg);
    display: flex;
    flex-direction: column;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--c-surface);
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-header .logo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--c-text);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .02em;
}
.site-header .logo-img { width: 30px; height: 30px; display: block; flex-shrink: 0; }
/* ヘッダータイトルは虹色ドーナツに合わせたレインボーグラデーション */
.site-header .logo-text {
    background: linear-gradient(90deg, #ff2d55, #ff7a00, #f2b600, #22c55e, #06b6d4, #3b82f6, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.site-header .logo:hover { text-decoration: none; opacity: .8; }
.site-header .header-actions { display: flex; gap: 10px; align-items: center; }
.site-header .header-actions a { color: var(--c-text); font-size: 13px; }

.main {
    flex: 1;
    padding: 16px 16px 88px; /* 下部ナビ分の余白 */
}

/* ---- 下部ナビ（モバイルアプリ風） ---- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--maxw);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    display: flex;
    justify-content: space-around;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    z-index: 30;
}
.bottom-nav a {
    flex: 1;
    text-align: center;
    color: var(--c-muted);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.bottom-nav a.active { color: var(--c-primary); font-weight: 700; }  /* 選択タブはブランドブルー */
.bottom-nav a:hover { text-decoration: none; }
.bottom-nav .ico { display: flex; align-items: center; justify-content: center; height: 22px; }
.bottom-nav .ico svg { width: 22px; height: 22px; display: block; }  /* 単色ラインアイコン（currentColor） */

/* ---- 見出し（KUMON 風：ブランドブルーの左アクセントで統一） ---- */
.page-title {
    font-size: var(--fs-title); font-weight: 700; margin: 4px 0 16px;
    padding-left: 12px; border-left: 5px solid var(--c-primary); line-height: 1.3;
}
.section-title {
    font-size: var(--fs-base); font-weight: 700; margin: 20px 0 10px; color: var(--c-text);
    padding-left: 10px; border-left: 4px solid var(--c-primary);
}

/* ---- カード ---- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    margin-bottom: 14px;
}

/* ---- ボタン ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    background: var(--c-border);
    color: var(--c-text);
    transition: opacity .15s;
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn-primary {
    background: var(--c-primary);   /* ブランドブルーの単色ボタン */
    color: #fff;
}
.btn-primary:hover { background: var(--c-primary-dark); opacity: 1; }  /* KUMON 風：ホバーで色を深める */
.btn-accent { background: var(--c-accent); color: #fff; }
.btn-accent:hover { background: #f08800; opacity: 1; }
.btn-outline { background: transparent; border: 1.5px solid var(--c-primary); color: var(--c-primary-dark); }
.btn-outline:hover { background: var(--c-soft); opacity: 1; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }

/* ---- フォーム ---- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }
.input, .textarea, .select {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    font-size: var(--fs-base);   /* jamas 準拠 + iOS のフォーカス時ズーム防止 */
    background: #fff;
    color: var(--c-text);
    font-family: inherit;
}
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--c-primary);
}
.textarea { min-height: 110px; resize: vertical; }
.form-hint { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; }

/* ---- アラート / バリデーション ---- */
.alert {
    padding: 11px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: var(--fs-sm);
}
.alert-success { background: #e3f7ef; color: var(--c-success); }
.alert-error { background: #fdeaed; color: var(--c-danger); }
.field-error { color: var(--c-danger); font-size: var(--fs-xs); margin-top: 4px; }

/* ---- 推しカード（グリッド） ---- */
.oshi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.oshi-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-align: center;
}
.oshi-card .thumb {
    aspect-ratio: 1 / 1;
    background: var(--c-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--c-primary-dark);
    font-weight: 700;
}
.oshi-card .body { padding: 10px; }
.oshi-card .name { font-weight: 700; font-size: var(--fs-name); }
.oshi-card .cat { font-size: var(--fs-2xs); color: var(--c-muted); }

/* ---- バッジ / メタ ---- */
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    background: var(--c-soft);
    color: var(--c-primary-dark);
    border: 1px solid var(--c-border);
}
.badge-members { background: #fff2df; color: #a5670a; border-color: #ffe0b8; } /* 会員限定＝オレンジ差し色 */
.badge-group { background: #e5f1fa; color: var(--c-primary-dark); border-color: #cbe4f5; } /* グループ＝ブルー系 */
.meta { font-size: var(--fs-xs); color: var(--c-muted); }

/* ---- 投稿 ---- */
.post .post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: #e5f1fa;
    color: var(--c-primary-dark); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.post .post-body { white-space: pre-wrap; word-break: break-word; }
.post .media-list { display: grid; gap: 8px; margin-top: 10px; grid-template-columns: repeat(2, 1fr); }
.post .media-list.single { grid-template-columns: 1fr; }
.post .media-list img, .post .media-list video { width: 100%; border-radius: 10px; }
.post .post-actions { display: flex; gap: 16px; margin-top: 10px; font-size: var(--fs-xs); color: var(--c-muted); }

/* ---- コメント ---- */
.comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--c-border); }
.comment .avatar { width: 30px; height: 30px; font-size: 12px; }
.comment .c-body { flex: 1; }
.comment .c-name { font-weight: 700; font-size: var(--fs-sm); }
.comment .c-text { font-size: var(--fs-name); white-space: pre-wrap; word-break: break-word; }

/* エレメント内の名前/タイトル（投稿者名・コメント者名など）＝薄いピンク */
.author-name, .author-name a,
.comment .c-name a { color: #f48fb1; }

/* ---- 空状態 ---- */
.empty { text-align: center; color: var(--c-muted); padding: 40px 16px; font-size: var(--fs-sm); }

/* ---- ページネーション（窓型・折り返し可） ---- */
.pagination { display: flex; gap: 5px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: wrap; list-style: none; padding: 0; }
.pagination li { display: flex; }
.pagination a, .pagination li > span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--c-border);
    background: #fff; font-size: var(--fs-xs); color: var(--c-text); text-decoration: none;
}
.pagination a:hover { text-decoration: none; border-color: var(--c-primary); }
.pagination .active > span { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
/* 「…」と無効な矢印は枠なし・淡色 */
.pagination .dots > span,
.pagination .disabled > span { border-color: transparent; background: transparent; color: var(--c-muted); min-width: 0; padding: 6px 4px; }

/* ---- SNS 埋め込み（掲示板・コメント本文） ---- */
.c-text .embed,
.post-body .embed { margin: 8px 0; }
.embed-yt {
    position: relative;
    width: 100%;
    max-width: 100%;      /* コメント欄の幅いっぱいに表示 */
    aspect-ratio: 16 / 9;
}
.embed-yt iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 10px;
}
/* 公式ウィジェット（X / TikTok）の余白調整 */
.c-text .twitter-tweet,
.c-text .tiktok-embed { margin: 8px 0 !important; }
.c-text iframe { max-width: 100%; }

/* ---- 文字サイズ変更 ボタン / ポップアップ ---- */
.fs-btn {
    background: var(--c-soft);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    height: 30px;         /* ボタン高さを統一（中身のフォントサイズに依存させない） */
    padding: 0 8px;
    font-size: 12px;      /* ヘッダーUIは固定サイズ */
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;  /* 縦中央揃え */
    gap: 1px;
}
.fs-btn .fs-btn__s { font-size: 11px; }
.fs-btn .fs-btn__l { font-size: 15px; }

.fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .12);
}
.fs-overlay[hidden] { display: none; }

.fs-panel {
    position: fixed;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--maxw), 100%);
    padding: 0 16px;
    z-index: 41;
    box-sizing: border-box;
}
.fs-panel[hidden] { display: none; }
.fs-panel__inner {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(40, 30, 80, .16);
    padding: 14px;
    margin-left: auto;
    max-width: 260px;
}
.fs-panel__title { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--c-text); }
.fs-panel__opts { display: flex; gap: 8px; }
.fs-opt {
    flex: 1;
    border: 1.5px solid var(--c-border);
    background: #fff;
    border-radius: 10px;
    padding: 10px 4px;
    cursor: pointer;
    color: var(--c-text);
    font-weight: 700;
    line-height: 1.2;
}
.fs-opt small { display: block; font-size: 11px; color: var(--c-muted); font-weight: 400; margin-top: 2px; }
.fs-opt[data-fs="chu"]     { font-size: 15px; }
.fs-opt[data-fs="dai"]     { font-size: 18px; }
.fs-opt[data-fs="tokudai"] { font-size: 22px; }
.fs-opt.is-active {
    border-color: var(--c-primary);
    background: var(--c-soft);
    color: var(--c-primary-dark);
}

/* ---- クイックリンク（トップの ランキング/グループ/お知らせ 等） ---- */
.quick-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0;
}
.quick-link {
    display: flex;
    flex-direction: row;            /* アイコン左＋ラベル右 */
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;             /* しっかり厚みを持たせる */
    border: none;
    border-radius: 8px;
    color: #fff;                    /* 白文字ラベル */
    font-weight: 700;
    font-size: var(--fs-base);      /* ラベルを少し大きく */
    text-align: center;
    transition: filter .15s;
}
.quick-link:hover { text-decoration: none; filter: brightness(1.06); }
.quick-link .ql-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quick-link .ql-ico svg { width: 19px; height: 19px; display: block; }  /* 白ラインアイコン（currentColor=白） */

/* 色バリエーション（ソリッドな 青 / 緑 / 黄。ビビッド） */
.quick-link.ql-blue   { background: #1e9bef; }
.quick-link.ql-green  { background: #3fbb4a; }
.quick-link.ql-yellow { background: #ffbf1f; }

/* ---- PC 表示の微調整 ---- */
@media (min-width: 700px) {
    .app { box-shadow: 0 0 40px rgba(40,30,80,.07); }
    .oshi-grid { grid-template-columns: repeat(3, 1fr); }
}