/* "テーマの色やサイズ"をまとめて管理 */
:root {
    --container: 980px;                            /* 横幅の上限（見やすい中央寄せ幅） */

    --bg1: #0b1220;                              /* 背景の上側の暗色 */
    --bg2: #111b33;                              /* 背景の下側の暗色 */

    --surface: rgba(255, 255, 255, 0.08);        /* カード背景（通常） */
    --surface2: rgba(255, 255, 255, 0.12);       /* カード背景（ホバー時） */
    --border: rgba(255, 255, 255, 0.14);         /* 枠線の色（薄い色） */

    --text: rgba(255, 255, 255, 0.92);           /* 文字の基本色 */
    --muted: rgba(255, 255, 255, 0.72);          /* 文字（薄め） */
    --muted2: rgba(255, 255, 255, 0.55);         /* 文字（さらに薄め） */

    --shadow: 0 12px 36px rgba(0, 0, 0, 0.35);   /* カード影 */

    --link: rgba(180, 210, 255, 0.95);
    --focus: rgba(255, 255, 255, 0.35);

    --btn-active: rgba(255, 255, 255, 0.18);
}

/* ここの設定で"paddingを含めた幅計算"に統一して崩れを減らす */
* {
    box-sizing: border-box;
}

/* 背景や擬似要素の計算が安定するよう、高さ100%を確保 */
html,
body {
    height: 100%;
}

/* ページ全体の基本スタイル */
body {
    margin: 0;                                   /* ブラウザ既定の余白を消す */
    color: var(--text);                          /* 全体の文字色 */
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow-x: hidden;                          /* 横はみ出し対策 */
}

/* ==================================================
   テーマ1：ホワイト
   - body に class="theme-white" が付いている時に有効
   ================================================== */
body.theme-white {

    color-scheme: light;

    --bg1: #ffffff;
    --bg2: #ffffff;

    --text: rgba(15, 23, 42, 0.92);
    --muted: rgba(15, 23, 42, 0.72);
    --muted2: rgba(15, 23, 42, 0.55);

    --surface: rgba(255, 255, 255, 0.78);
    --surface2: rgba(255, 255, 255, 0.92);
    --border: rgba(15, 23, 42, 0.12);
    --shadow: 0 12px 28px rgba(2, 6, 23, 0.12);

    --link: rgba(37, 99, 235, 0.95);
    --focus: rgba(37, 99, 235, 0.35);
    --btn-active: rgba(15, 23, 42, 0.08);

    background:
        radial-gradient(1200px 700px at 15% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 70%),
        radial-gradient(900px 600px at 80% 10%, rgba(34, 211, 238, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
}

body.theme-white .theme-btn.is-active {
    border-color: rgb(15, 23, 42, 0.28);
}

/* ==================================================
   テーマ2：ネイビー
   - body に class="theme-navy" が付いている時に有効
   ================================================== */
body.theme-navy {
    --bg1: #081225;
    --bg2: #0b1c3a;
    
    --link: rgba(180, 210, 255, 0.95);
    --focus: rgba(180, 210, 255, 0.35);
    --btn-active: rgba(255, 255, 255, 0.18);

    background:
        radial-gradient(1200px 700px at 15% 80%, rgba(120, 160, 210, 0.2) 0%, transparent 60%),
        radial-gradient(900px 600px at 80% 10%, rgba(120, 160, 210, 0.2) 0%, transparent 55%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
}

body.theme-navy .theme-btn.is-active {
    border-color: rgb(255, 255, 255, 0.30);
}

/* ==================================================
   テーマ3：ブラック
   - body に class="theme-black" が付いている時に有効
   ================================================== */
body.theme-black {

    color-scheme: dark;

    --bg1: #07080c;
    --bg2: #000000;

    --surface: rgba(255, 255, 255, 0);
    --surface2: rgba(255, 255, 255, 0.10);
    --border: rgba(255, 255, 255, 0.12);
    --shadow: 0 12px 36px rgba(0, 0, 0, 0.55);

    --link: rgba(190, 220, 255, 0.95);
    --focus: rgba(190, 220, 255, 0.35);
    --btn-active: rgba(255, 255, 255, 0.16);

    background:
        radial-gradient(1200px 700px at 15% 80%, rgba(148, 163, 184, 0.10) 0%, transparent 65%),
        radial-gradient(900px 600px at 80% 10%, rgba(100, 116, 139, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
}

body.theme-black .theme-btn.is-active {
    border-color: rgb(255, 255, 255, 0.26);
}

/* 背景に"薄いベールの光"を追加して、上品に見せる（本文の邪魔はしない） */
body::before {
    content: "";
    position: fixed;                             /* スクロールしても固定 */
    inset: -200px;                               /* 画面外まで広げて端を見せない */
    background: radial-gradient(
        700px 500px at 50% 10%,
        rgba(255, 255, 255, 0.06),
        transparent 70%
    );
    filter: blur(8px);                           /* ふわっとさせる */
    pointer-events: none;                        /* クリックなどを邪魔しない */
    z-index: -1;                                 /* 本文の背面へ */
}

/* ==================================================
   テーマ切り替えボタン
   （JSが .is-active を付け外しする想定）
   ================================================== */
.theme-toggle {
    max-width: var(--container);
    margin: 0 auto 14px;
    padding: 0 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;                   /* 右寄せ */
}

.theme-btn {
    width: 60px;
    height: 30px;
    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    border: 1px solid var(--border);
    cursor: pointer;

    font-weight: 300;

    transition:
        transform 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.theme-btn:hover {
    transform: translateY(-1px);                 /* ちょい浮く */
    filter: brightness(1.03);
}

.theme-btn:active {
    transform: translateY(0);                    /* 押すと戻る（沈む感じ） */
    filter: brightness(0.98);
}

/* キーボード操作のフォーカスは、見えるようにする（重要） */
.theme-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* 選択中（JSが .is-active を付け外し */
.theme-btn.is-active {
    box-shadow: 0 12px 28px rgb(0, 0, 0, 0.10);
    border-color: rgb(255, 255, 255, 0.35);
}

/* white：白背景＋薄い枠＋文字は濃い色 */
.theme-btn[data-theme="white"] {
    background: linear-gradient(180deg, #ffffff, #f4f6fb);
    color: rgb(15, 23, 42, 0.90);
    border-color: rgb(15, 23, 42, 0.18);
}

/* navy：ネイビー背景＋ほんのり発光 */
.theme-btn[data-theme="navy"] {
    background:
        radial-gradient(120px 60px at 25% 30%, rgba(120, 160, 210, 0.28), transparent 60%),
        linear-gradient(180deg, #0b1c3a, #081225);
    color: rgb(255, 255, 255);
    text-shadow: 0 1px 2px rgb(0, 0, 0, 0.55);
    border-color: rgb(255, 255, 255, 0.16);
}

/* black：”黒背景＋ごく控えめな陰影 */
.theme-btn[data-theme="black"] {
    background:
        radial-gradient(120px 60px at 25% 30%, rgba(148, 163, 184, 0.18), transparent 60%),
        linear-gradient(180deg, #07080c, #000000);
        color: rgb(255, 255, 255, 0.92);
        border-color: rgb(255, 255, 255, 0.14);
}

/* 動きが苦手な人向け：OS設定でアニメを減らす */
@media (prefers-reduced-motion: reduce) {
    .theme-btn {
        transition: none;
    }
}

/* タイトル */

.page-title {
    max-width: var(--container);
    margin: 28px auto 10px;
    padding: 0 16px;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1.12;
}

/* Day / 日付などのメタ情報 */
#meta {
    max-width: var(--container);
    margin: 0 auto 18px;
    padding: 0 16px;
    color: var(--muted);
}

/* メタの上に"薄い区切り線"を入れて、ヒーロー領域っぽくする */
#meta::before {
    content: "";
    display: block;
    height: 1px;
    margin: 10px 0 12px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* カード一覧 */
#vocabList {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px 40px;

    display: grid;                               /* 縦積み＋gapが簡単 */
    gap: 14px;                                   /* カード間の隙間 */
}

/* カード1枚の土台（ガラス感） */
.card {
    background: var(--surface);                  /* 半透明の面 */
    border: 1px solid var(--border);             /* 薄い枠線 */
    border-radius: 18px;                         /* 角丸 */
    padding: 16px 16px 14px;                     /* 内側余白 */
    box-shadow: var(--shadow);                   /* 影で浮かせる */
    backdrop-filter: blur(10px);                 /* 背景をぼかしてガラス感 */
}

/* カードにマウスを乗せた時の挙動 */
.card:hover {
    background: var(--surface2);                 /* ちょい明るく */
    transform: translateY(-1px);                 /* 少し浮く */
    transition: 140ms ease;                      /* なめらかに */
}

/* カード上部（見出し語・活用タイプ・品詞の横並び */
.card__top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;                             /* 画面が狭いときに折り返す */
}

/* 見出し語を主役に（大きく太く） */
.card__headword {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* 活用タイプ（ピル形バッジ） */
.card__group {
    font-size: 12px;
    padding: 4px 10px;
    font-weight: 600;
    border-radius: 999px;                        /* これでカプセル化 */
    border: 1px solid var(--border);
    color: var(--muted);
}

/* 品詞（右に寄せてバランスを取る） */
.card__pos {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    margin-left: auto;                           /* 右寄せになる */
}

/* 日本語訳（強めに） */
.card__meaning {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 650;
}

/* 英語訳（小さく薄めに） */
.card__en {
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted2);
}

/* 詳細（語彙区分、形、音節、IPA、例文...） */
.card__meta {
    margin-top: 12px;
    display: grid;
    gap: 10px;
    font-size: 13px;
}

/* "ラベル列 ＋ 内容列"の2列構成にして読みやすくする */
.card__row {
    display: grid;
    grid-template-columns: 110px 1fr;            /* 左：ラベル、右：内容 */
    gap: 10px;
    align-items: start;
}

/* ラベルは薄くして、内容が目立つようにする */
.label {
    color: var(--muted2);
    letter-spacing: 0.03em;
    white-space: nowrap;                           /* ラベルを折り返さない */
}

/* IPAや音節のために等幅フォントを用意 */
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* pre は"改行を保つ"のが目的（形/音節/IPA/例文など） */
pre.mono,
pre.examples {
    margin: 0;
    white-space: pre-wrap;                       /* 改行保持しつつ折り返す */
    word-break: break-word;                      /* 長い単語がはみ出ない */
    line-height: 1.6;
    color: var(--text);
}

/* リンク（発音URL）をそれっぽく */
a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* vocab が0件のときのメッセージ */
.empty {
    color: var(--muted);
}

/* ==================================================
   [発音表示] IPA開始位置を縦に揃える（3カラム化）
             - ラベル列 / 音節列 / IPA列
             - 音節列の幅は JS 側で --syllw を設定
   ================================================== */

.pronBlock {
    display: grid;
    gap: 2px;
}

.pronLine {
    display: grid;
    grid-template-columns: 62px var(--syllw, 10ch) 1fr;
    column-gap: 10px;
    align-items: baseline;
    color: var(--text);
}

.pronLine a,
.pronLine span {
    display: inline-block;
}

.pronLabel {
    color: inherit;
}

.pronSyll,
.pronIpa {
    white-space: nowrap;
}

.pronLink {
    color: var(--link);
    text-decoration: none;
}

.pronLink:hover {
    text-decoration: underline;
}

.pronText {
    display: inline-block;
    white-space: pre-line;
    line-height: 1.6;
}

/* ==================================================
   共通：ヘッダー（topbar）
   ================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    background: rgb(0, 0, 0, 0);                 /* themeごとの背景グラデを活かす */
    backdrop-filter: blur(10px);
}

.topbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ヘッダーのブランド（小さめ・上品） */
.brand {
    margin: 0;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.brand a {
    color: var(--text);
    text-decoration: none;
}

.brand a:hover { text-decoration: underline; }

/* ナビ */
.nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;               /* active時にズレない */
}

.nav a:hover {
    color: var(--text);
    background: var(--btn-active);
    border-color: var(--border);
}

.nav a.is-active {
    color: var(--text);
    background: var(--btn-active);
    border-color: var(--border);
}

/* ヘッダー内では theme-toggle の「中央寄せ制約」を解除 */
.topbar .theme-toggle {
    max-width: none;
    margin: 0;
    padding: 0;
    margin-left: auto;                           /* 右寄せ */
    justify-content: flex-end;
}

/* ==================================================
   共通：レイアウト
   ================================================== */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 18px 16px 40px;
}

.muted { color: var(--muted); }

/* ==================================================
   Home：ヒーロー＆導線
   ================================================== */
.hero {
    padding: 18px 0 6px;
}

.hero h2 {
    margin: 0;
    font-size: clamp(26px, 3.6vw, 42px);
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow);
}

.btn:hover {
    background: var(--surface2);
    transform: translateY(-1px);
    transition: 140ms ease;
}

.btn.primary {
    border-color: color-mix(in srgb, var(--link) 45%, var(--border));
    background: color-mix(in srgb, var(--link) 10%, var(--surface2));
}

/* ==================================================
   Home：カード導線
   ================================================== */
.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.home-card {
    display: block;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    text-decoration: none;
}

.home-card:hover {
    background: var(--surface2);
    transform: translateY(-1px);
    transition: 140ms ease;
}

.home-card h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

/* ==================================================
   Review：問題UI
   ================================================== */
.panel {
    max-width: var(--container);
    margin: 0 auto 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

#reviewRoot {

    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px 40px;
}

.q-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 14px 14px;
    margin: 12px 0;
}

.q-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.q-no {
    color: var(--muted);
    font-size: 13px;
}

.q-prompt {
    font-size: 16px;
    margin: 0;
}

.choices {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.choice {
    text-align: left;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
}

.choice:hover {
    background: var(--btn-active);
}

.choice.correct {
    border-color: rgb(34, 197, 94, 0.45);
    background: rgb(34, 197, 94, 0.12);
}

.choice.wrong {
    border-color: rgb(239, 68, 68, 0.45);
    background: rgb(239, 68, 68, 0.12);
}

.q-foot {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
}

.empty {
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    color: var(--muted);
}

/* ==================================================
   Library：検索バー
   ================================================== */
.toolbar {
    max-width: var(--container);
    margin: 0 auto 14px;
    padding: 0 16px;

    display: flex;
    align-items: center;
    gap:  10px;
    flex-wrap: wrap;
}

.toolbar input {

    -webkit-text-fill-color: var(--text);

    flex: 1;
    min-width: 240px;

    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

.toolbar input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.toolbar input::placeholder {
    color: var(--muted2);
    opacity: 1;
}

/* ==================================================
   Library：コンパクト行（一覧用）
   ================================================== */

/* rows 表示のときは、カードより詰めて表示 */
#vocabList.rows {
    gap: 10px;
}

/* 1行=クリック可能な"単語サマリ" */
.vrow {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 16px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;

    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
}

.vrow:hover {
    background: var(--surface2);
}

.vrow__word {
    font-weight: 750;
    font-size: 18px;
    line-height: 1.15;
}

.vrow__ja {
    margin-top: 3px;
    color: var(--muted);
    font-size: 14px;
}

.vrow__right {
    text-align: right;
    min-width: 160px;
}

.vrow__meta {
    color: var(--muted2);
    font-size: 12px;
    white-space: nowrap;
}

.vrow__tags {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

/* スマホは右カラムを下に落とす */
@media (max-width: 640px) {
    .vrow {
        grid-template-columns: 1fr;
    }

    .vrow__right {
        text-align: left;
        min-width: auto;
    }
}

/* ==================================================
   詳細ダイアログ
   ================================================== */
.dialog {
    border: none;
    padding: 0;
    background: transparent;
}

.dialog::backdrop {
    background: rgb(0, 0, 0, 0.55);
}

.dialog__inner {
    width: min(940px, calc(100vw - 28px));
    margin: 10vh auto;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 14px;
    position: relative;
}

/* 閉じるボタン */
.icon-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--btn-active);
}

/* dialog内の card は"二重の面"になりやすいので軽くする */
.dialog__inner .card {
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0;
}

/* ==================================================
   スマホ幅でラベル列を少し狭くして収まりを良くする
   ================================================== */
@media (max-width: 640px) {
    .card__row {
        grid-template-columns: 90px 1fr;
    }
    .card {
        border-radius: 16px;                     /* ちょい小さくして自然に */
    }
}