:root {
        --color-bg: #faf9f6;
        --color-surface: #ffffff;
        --color-text: #2e3856;
        --color-text-muted: #939bb4;
        --color-border: #e0e4ef;
        --color-border-soft: #eef0f6;
        --color-accent: #4563e8;
        --color-accent-soft: #eef2ff;
        --color-btn-nav-bg: #f3f4f6;
        --color-btn-nav-border: #d1d5db;
        --color-btn-nav-text: #374151;
        --color-unlearned: #42a5f5;
        --color-btn-mask-bg: #e8f4fe;
        --color-btn-mask-border: #b8dcfb;
        --color-btn-mask-text: #42a5f5;
        --color-english: #0f766e;
        --color-reading: #6b7280;
        --color-nav-active-bg: #eef2ff;
        --color-nav-active-text: #4563e8;
        --color-nav-active-border: #b8c4ff;
        --radius-sm: 8px;
        --radius-md: 12px;
        --space-xs: 4px;
        --space-sm: 8px;
        --space-md: 12px;
        --space-lg: 16px;
        --font-ui: "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-size-nav: clamp(13px, 3.4vw, 15px);
        --font-size-tab: clamp(13px, 3.5vw, 15px);
        --font-size-header: clamp(13px, 3.6vw, 15px);
        --font-size-word: clamp(17px, 4.6vw, 20px);
        --font-size-reading: clamp(14px, 3.8vw, 16px);
        --font-size-english: clamp(14px, 3.7vw, 16px);
        --font-size-detail: clamp(13px, 3.5vw, 15px);
        --font-size-btn: clamp(15px, 4vw, 17px);
        --font-size-stat: clamp(20px, 5.5vw, 26px);
        --line-height-tight: 1.25;
        --line-height-body: 1.5;
        --line-height-detail: 1.45;
        /* 意味・例文のインラインルビ（ことば・さがす共通。em でフォントに比例） */
        --vocab-inline-line-height: 1.88;
        --vocab-inline-rt-size: 0.5em;
        --vocab-inline-rt-shift: 0.36em;
        --search-inline-rt-shift: 0.4em;
        --vocab-inline-block-pad: 0.28em;
        /* ブロック間隔（--vocab-type-base 連動。ブレークポイントは type-base のみ変更） */
        --vocab-space-scale: 0.42;
        --vocab-gap-ratio-english-meaning: 1.35;
        --vocab-gap-ratio-meaning-example: 0.55;
        --vocab-space-base: calc(var(--vocab-type-base) * var(--vocab-space-scale));
        --vocab-gap-english-meaning: calc(var(--vocab-space-base) * var(--vocab-gap-ratio-english-meaning));
        --vocab-gap-meaning-example: calc(var(--vocab-space-base) * var(--vocab-gap-ratio-meaning-example));
        --touch-min: 44px;
        --chk-size: clamp(22px, 5.5vw, 26px);
        --chk-wrap-min-width: calc(var(--chk-size) + 15px);
        --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.05);
        --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
        --golden-ratio: 1.618;
        --flash-card-max-width: 600px;
        --flash-ui-overhead: 254px;
        --flash-undo-size: 30px;
        --flash-action-gap: 8px;
        --flash-card-undo-gap: 10px;
        --flash-action-height: var(--flash-circle-btn-size);
        --flash-circle-btn-size: clamp(81px, 21.3vw, 97px);
        --flash-answer-btn-gap: clamp(44px, 13vw, 60px);
        --flash-unknown-circle-bg: #42a5f5;
        --flash-known-circle-bg: #66bb2e;
        --flash-known-circle-border: #5aa825;
        --flash-known-circle-border-active: #4e9620;
        --flash-known-glow-rgb: 102, 187, 46;
        --flash-unknown-glow-rgb: 66, 165, 245;
        --flash-undo-color: #b2b8c7;
        --flash-undo-border: #e0e4ef;
        --flash-undo-color-active: #9aa3b8;
        /* ことばモード */
        --learn-cat-gap: 6px;
        --learn-stack-gap: 18px;
        --flash-card-action-gap: 24px;
        --flash-action-lift: 10px;
        --learn-card-pad-x: clamp(12px, 3vw, 20px);
        --learn-card-pad-y: clamp(10px, 2.5vw, 16px);
        --learn-front-pad-y: clamp(8px, 2vw, 12px);
        /* 語彙タイポグラフィ：意味を基準に比率で階層化（ブレークポイントは --vocab-type-base のみ変更） */
        --vocab-type-base: clamp(15px, 3.8vmin, 19px);
        --vocab-ratio-example: 0.87;
        --vocab-ratio-reading: 0.84;
        --vocab-ratio-learn-english: 1.15;
        --vocab-ratio-learn-title: 2.55;
        --vocab-ratio-search-english: 1.08;
        --vocab-ratio-search-title: 1.16;
        --vocab-ratio-search-reading: 0.78;
        --learn-font-meaning: var(--vocab-type-base);
        --learn-font-english: calc(var(--vocab-type-base) * var(--vocab-ratio-learn-english));
        --learn-font-example: calc(var(--vocab-type-base) * var(--vocab-ratio-example));
        --learn-font-reading: calc(var(--vocab-type-base) * var(--vocab-ratio-reading));
        --learn-font-word: clamp(32px, calc(var(--vocab-type-base) * var(--vocab-ratio-learn-title)), 52px);
        --learn-font-cat: clamp(12px, 3.2vw, 14px);
        --learn-font-progress: clamp(10px, 2.6vw, 11px);
        --learn-font-btn: clamp(16px, 4.3vw, 18px);
        --flash-front-optical-shift: -0.06;
        --flash-front-optical-nudge: 0px;
        --learn-head-ruby-gap: clamp(4px, 1.2vmin, 8px);
        --learn-color-word: #2e3856;
        --learn-color-reading: #939bb4;
        --learn-color-meaning: #2e3856;
        --learn-color-example: #586380;
        --learn-color-card-border: #cfd6e6;
        --learn-color-card-bg: #ffffff;
        --learn-color-progress-done: #b5de92;
        --learn-color-progress-skip: #b3ddfa;
        --learn-color-progress-upcoming: #e0e4ef;
        --color-cat-基本: #4563e8;
        --color-cat-基本-soft: #eef2ff;
        --color-cat-基本-border: #b8c4ff;
        --color-cat-介護: #22c07a;
        --color-cat-介護-soft: #e8faf1;
        --color-cat-介護-border: #8fe8be;
        --color-cat-医療: #f8a0b4;
        --color-cat-医療-dark: #f05678;
        --color-cat-医療-soft: #ffecf0;
        --color-cat-医療-border: #ffb8c8;
        --color-cat-社会: #9b5de5;
        --color-cat-社会-soft: #f3edff;
        --color-cat-社会-border: #d4b8ff;
        --learn-color-primary: #4563e8;
        --learn-color-primary-border: #3b56d4;
        --learn-color-primary-soft-bg: #eef2ff;
        --learn-color-primary-text: #4563e8;
        --learn-color-action-primary-bg: var(--learn-color-english);
        --learn-color-action-primary-text: #ffffff;
        --learn-color-action-primary-border: #0d6b63;
        --learn-color-action-secondary-bg: #ffffff;
        --learn-color-action-secondary-text: #586380;
        --learn-color-action-secondary-border: #e0e4ef;
        --learn-color-english: #0f766e;
        --learn-radius-btn: 999px;
        --learn-radius-card: 20px;
        --learn-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(46, 56, 86, 0.06), 0 5px 14px rgba(46, 56, 86, 0.08), 0 12px 28px rgba(46, 56, 86, 0.04);
        --learn-shadow-action: 0 1px 2px rgba(46, 56, 86, 0.06), 0 3px 10px rgba(69, 99, 232, 0.2);
        --learn-shadow-action-active: 0 1px 2px rgba(69, 99, 232, 0.12);
        --learn-shadow-action-secondary: 0 1px 2px rgba(46, 56, 86, 0.05), 0 2px 6px rgba(46, 56, 86, 0.06);
        --learn-shadow-action-secondary-active: 0 1px 2px rgba(46, 56, 86, 0.04);
        --learn-color-unknown-bg: #ffffff;
        --learn-color-unknown-text: #586380;
        --learn-color-unknown-border: #e0e4ef;
        --learn-color-known-soft-bg: #eff8e8;
        --learn-color-known-border: #c5e8a8;
}

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
}

html,
body {
        height: 100%;
        height: 100dvh;
        overflow: hidden;
}

body {
        font-family: var(--font-ui);
        background-color: var(--color-bg);
        color: var(--color-text);
        height: 100dvh;
        display: flex;
        flex-direction: column;
        padding: max(var(--space-xs), env(safe-area-inset-top)) max(var(--space-sm), env(safe-area-inset-left)) max(var(--space-sm), env(safe-area-inset-bottom)) max(var(--space-sm), env(safe-area-inset-right));
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
}

.container {
        max-width: 640px;
        flex: 1;
        min-height: 0;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
}

.view-panel {
        display: none;
        flex: 1;
        min-height: 0;
        flex-direction: column;
}

.view-panel.active {
        display: flex;
}

#panelLearn {
        display: none;
        flex-direction: column;
        min-height: 0;
        gap: 8px;
        padding: 0 4px;
}

#panelLearn.active {
        display: flex;
}

.learn-top {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: 0 2px;
        width: 100%;
        min-width: 0;
}

#panelLearn > .learn-top,
#panelLearn > .learn-header-banner {
        flex-shrink: 0;
}

#panelSearch {
        gap: var(--space-xs);
        --search-font-body: var(--vocab-type-base);
        --search-font-english: calc(var(--vocab-type-base) * var(--vocab-ratio-search-english));
        --search-font-example: calc(var(--vocab-type-base) * var(--vocab-ratio-example));
        --search-font-title: calc(var(--vocab-type-base) * var(--vocab-ratio-search-title));
        --search-font-reading: calc(var(--vocab-type-base) * var(--vocab-ratio-search-reading));
}

#panelSearch.active {
        display: flex;
}

#panelSearch > .search-filter-panel {
        flex-shrink: 0;
        margin-bottom: 0;
}

#panelSearch > .search-status-bar {
        flex-shrink: 0;
}

#panelSearch > .search-result-scroll {
        flex: 1;
        min-height: 0;
}

#panelSearch > .search-control-area {
        border-top: none;
        padding-top: 0;
}

/* さがす: スクロール時に上下UIを自動で隠す */
#panelSearch.active > .search-filter-panel,
#panelSearch.active > .search-status-bar,
#panelSearch.active > .search-control-area {
        transition:
                opacity 0.22s ease,
                max-height 0.28s ease,
                padding 0.22s ease,
                margin 0.22s ease,
                border-width 0.22s ease;
        overflow: hidden;
}

#panelSearch.active > .search-filter-panel {
        max-height: 160px;
}

#panelSearch.active > .search-status-bar {
        max-height: 32px;
}

#panelSearch.active > .search-control-area {
        max-height: 72px;
}

#panelSearch.active.search-chrome-collapsed {
        gap: 0;
}

#panelSearch.active.search-chrome-collapsed > .search-filter-panel,
#panelSearch.active.search-chrome-collapsed > .search-status-bar,
#panelSearch.active.search-chrome-collapsed > .search-control-area {
        display: none;
        flex: 0 0 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        opacity: 0;
        padding: 0 !important;
        margin: 0 !important;
        border-width: 0 !important;
        visibility: hidden;
        pointer-events: none;
}

body.search-chrome-collapsed:has(#panelSearch.active) .bottom-nav-bar {
        display: none;
        flex: 0 0 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        opacity: 0;
        overflow: hidden;
        padding: 0 !important;
        visibility: hidden;
        pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
        #panelSearch.active > .search-filter-panel,
        #panelSearch.active > .search-status-bar,
        #panelSearch.active > .search-control-area,
        .bottom-nav-bar {
                transition: none;
        }
}

/* ボトムナビゲーション */
.bottom-nav-bar {
        display: flex;
        gap: var(--space-sm);
        padding: 4px 0 0;
        background-color: var(--color-bg);
        flex-shrink: 0;
        max-height: 56px;
        transition: opacity 0.22s ease, max-height 0.28s ease, padding 0.22s ease;
        overflow: hidden;
}

.nav-btn {
        position: relative;
        flex: 1;
        min-height: 40px;
        padding: 8px var(--space-xs);
        font-family: inherit;
        font-size: var(--font-size-nav);
        font-weight: 600;
        border: 1px solid var(--learn-color-unknown-border);
        background-color: var(--learn-color-unknown-bg);
        border-radius: var(--learn-radius-btn);
        cursor: pointer;
        text-align: center;
        color: var(--color-text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: var(--line-height-tight);
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
        transition:
                color 0.12s ease,
                border-color 0.12s ease,
                font-weight 0.12s ease;
}

.nav-btn.active {
        color: var(--color-text);
        font-weight: 700;
        background-color: var(--learn-color-unknown-bg);
        border-color: var(--learn-color-unknown-border);
        box-shadow: none;
}

.nav-btn.active::after {
        content: "";
        position: absolute;
        bottom: 4px;
        left: 18%;
        right: 18%;
        height: 2px;
        border-radius: 2px;
        background-color: #6d758f;
        pointer-events: none;
}

.nav-btn:active {
        opacity: 0.85;
}

/* 1. ことば — カテゴリタブ */
.learn-cat-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--learn-cat-gap);
        flex-shrink: 0;
        width: 100%;
        min-width: 0;
}

.learn-tab-bar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        flex-shrink: 0;
}

.learn-tab-btn {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 7px 4px;
        font-family: inherit;
        font-size: var(--learn-font-cat);
        font-weight: 600;
        border: 1px solid var(--learn-color-unknown-border);
        background-color: var(--learn-color-unknown-bg);
        border-radius: var(--learn-radius-btn);
        cursor: pointer;
        text-align: center;
        box-shadow: none;
        line-height: 1.2;
        color: var(--color-text-muted);
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-appearance: none;
        appearance: none;
        transition:
                background-color 0.12s ease,
                border-color 0.12s ease,
                color 0.12s ease,
                box-shadow 0.12s ease,
                opacity 0.12s ease;
}

.learn-tab-btn.cat-auto,
.learn-tab-btn.cat-基本,
.learn-tab-btn.cat-介護,
.learn-tab-btn.cat-医療,
.learn-tab-btn.cat-社会 {
        position: relative;
        color: var(--color-text-muted);
        border-color: var(--learn-color-unknown-border);
        background-color: var(--learn-color-unknown-bg);
        box-shadow: none;
        font-weight: 600;
}

.learn-tab-btn:not(.active) {
        color: var(--color-text-muted);
        font-weight: 600;
        opacity: 0.68;
}

.learn-tab-btn.active {
        opacity: 1;
        font-weight: 700;
        background-color: var(--learn-color-unknown-bg);
        border-color: var(--learn-color-unknown-border);
        box-shadow: none;
}

.learn-tab-btn.active.cat-auto {
        color: var(--color-text);
}

.learn-tab-btn.active.cat-auto::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 10%;
        right: 10%;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--color-cat-基本) 0%, var(--color-cat-介護) 33%, var(--color-cat-医療-dark) 66%, var(--color-cat-社会) 100%);
        opacity: 0.9;
        pointer-events: none;
}

.learn-tab-btn.active.cat-基本 {
        color: var(--color-cat-基本);
}

.learn-tab-btn.active.cat-介護 {
        color: var(--color-cat-介護);
}

.learn-tab-btn.active.cat-医療 {
        color: var(--color-cat-医療-dark);
}

.learn-tab-btn.active.cat-社会 {
        color: var(--color-cat-社会);
}

.learn-tab-btn.active.cat-基本::after,
.learn-tab-btn.active.cat-介護::after,
.learn-tab-btn.active.cat-医療::after,
.learn-tab-btn.active.cat-社会::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 12%;
        right: 12%;
        height: 2px;
        border-radius: 2px;
        pointer-events: none;
}

.learn-tab-btn.active.cat-基本::after {
        background-color: var(--color-cat-基本);
}

.learn-tab-btn.active.cat-介護::after {
        background-color: var(--color-cat-介護);
}

.learn-tab-btn.active.cat-医療::after {
        background-color: var(--color-cat-医療-dark);
}

.learn-tab-btn.active.cat-社会::after {
        background-color: var(--color-cat-社会);
}

.learn-cat-row.is-locked .learn-tab-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
}

.learn-header-banner {
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md);
        display: flex;
        align-items: center;
        flex-shrink: 0;
        min-height: 44px;
        font-size: var(--font-size-header);
        font-weight: 700;
        box-shadow: var(--shadow-soft);
}

.learn-header-banner.bg-auto {
        background-color: var(--color-cat-基本-soft);
        color: var(--color-cat-基本);
}

.learn-header-banner.bg-基本 {
        background-color: var(--color-cat-基本-soft);
        color: var(--color-cat-基本);
}

.learn-header-banner.bg-介護 {
        background-color: var(--color-cat-介護-soft);
        color: var(--color-cat-介護);
}

.learn-header-banner.bg-医療 {
        background-color: var(--color-cat-医療-soft);
        color: var(--color-cat-医療-dark);
}

.learn-header-banner.bg-社会 {
        background-color: var(--color-cat-社会-soft);
        color: var(--color-cat-社会);
}

.learn-header-text {
        width: 100%;
        line-height: var(--line-height-body);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
}

#panelLearn > .learn-top,
#panelLearn > .learn-header-banner {
        flex-shrink: 0;
}

.learn-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0 var(--space-xs);
}

.learn-header-banner[hidden] {
        display: none !important;
}

.flash-study {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: var(--space-sm) 0 var(--space-md);
}

/* 1枚のカード = 黄金比（高さ1・幅φ） */
.flashcard-stack {
        --flash-card-area-height: calc(100dvh - var(--flash-ui-overhead) - var(--flash-action-height) - var(--flash-undo-size) - var(--flash-card-undo-gap) - var(--learn-stack-gap) * 2 - 8px);
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 auto;
        width: min(100%, var(--flash-card-max-width));
        gap: var(--learn-stack-gap);
        overflow: visible;
        padding-top: 8px;
        padding-bottom: var(--flash-action-lift);
}

.flashcard-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--flash-card-undo-gap);
        width: min(100%, calc(var(--flash-card-area-height) * var(--golden-ratio)));
        overflow: visible;
}

.flashcard-block .flashcard {
        width: 100%;
        align-self: stretch;
}

.flash-study[hidden],
.flash-complete[hidden] {
        display: none !important;
}

.flashcard-area {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--space-xs);
}

.flashcard {
        position: relative;
        width: min(100%, calc(var(--flash-card-area-height) * var(--golden-ratio)));
        max-height: var(--flash-card-area-height);
        aspect-ratio: var(--golden-ratio) / 1;
        height: auto;
        align-self: center;
        background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
        border: 1.5px solid var(--learn-color-card-border);
        border-radius: var(--learn-radius-card);
        box-shadow: var(--learn-shadow-card);
        padding: var(--learn-card-pad-y) var(--learn-card-pad-x);
        display: grid;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1.618fr);
        align-items: stretch;
        justify-items: stretch;
        user-select: none;
        -webkit-user-select: none;
        text-align: center;
        overflow: hidden;
        box-sizing: border-box;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition:
                opacity 0.32s ease,
                transform 0.32s ease,
                box-shadow 0.32s ease;
        will-change: opacity, transform;
}

.flashcard::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.flashcard.is-leaving-known {
        opacity: 1;
        transform: none;
        transition: none;
        animation: flash-known-glow 0.78s ease-in-out forwards;
        pointer-events: none;
}

@keyframes flash-known-glow {
        0% {
                border-color: var(--learn-color-card-border);
                box-shadow: var(--learn-shadow-card);
        }

        16% {
                border-color: var(--flash-known-circle-bg);
                box-shadow:
                        inset 0 1px 0 rgba(255, 255, 255, 0.95),
                        inset 0 0 0 2px rgba(var(--flash-known-glow-rgb), 0.42),
                        0 0 0 5px rgba(var(--flash-known-glow-rgb), 0.58),
                        0 0 26px rgba(var(--flash-known-glow-rgb), 0.34),
                        0 10px 24px rgba(var(--flash-known-glow-rgb), 0.2),
                        0 12px 28px rgba(46, 56, 86, 0.06);
        }

        50% {
                border-color: var(--flash-known-circle-bg);
                box-shadow:
                        inset 0 1px 0 rgba(255, 255, 255, 0.95),
                        inset 0 0 0 2px rgba(var(--flash-known-glow-rgb), 0.32),
                        0 0 0 4px rgba(var(--flash-known-glow-rgb), 0.46),
                        0 0 18px rgba(var(--flash-known-glow-rgb), 0.24),
                        0 8px 20px rgba(var(--flash-known-glow-rgb), 0.14),
                        0 12px 28px rgba(46, 56, 86, 0.05);
        }

        100% {
                border-color: var(--learn-color-card-border);
                box-shadow: var(--learn-shadow-card);
        }
}

.flashcard.is-leaving-skip {
        opacity: 1;
        transform: none;
        transition: none;
        animation: flash-unknown-glow 0.78s ease-in-out forwards;
        pointer-events: none;
}

@keyframes flash-unknown-glow {
        0% {
                border-color: var(--learn-color-card-border);
                box-shadow: var(--learn-shadow-card);
        }

        16% {
                border-color: var(--flash-unknown-circle-bg);
                box-shadow:
                        inset 0 1px 0 rgba(255, 255, 255, 0.95),
                        inset 0 0 0 2px rgba(var(--flash-unknown-glow-rgb), 0.42),
                        0 0 0 5px rgba(var(--flash-unknown-glow-rgb), 0.58),
                        0 0 26px rgba(var(--flash-unknown-glow-rgb), 0.34),
                        0 10px 24px rgba(var(--flash-unknown-glow-rgb), 0.2),
                        0 12px 28px rgba(46, 56, 86, 0.06);
        }

        50% {
                border-color: var(--flash-unknown-circle-bg);
                box-shadow:
                        inset 0 1px 0 rgba(255, 255, 255, 0.95),
                        inset 0 0 0 2px rgba(var(--flash-unknown-glow-rgb), 0.32),
                        0 0 0 4px rgba(var(--flash-unknown-glow-rgb), 0.46),
                        0 0 18px rgba(var(--flash-unknown-glow-rgb), 0.24),
                        0 8px 20px rgba(var(--flash-unknown-glow-rgb), 0.14),
                        0 12px 28px rgba(46, 56, 86, 0.05);
        }

        100% {
                border-color: var(--learn-color-card-border);
                box-shadow: var(--learn-shadow-card);
        }
}

.flashcard.is-arriving-prep {
        opacity: 1;
        transform: translateY(10px) scale(0.985);
        transition: none;
}

.flashcard.is-arriving {
        opacity: 1;
        transform: translateY(0) scale(1);
}

.flashcard-front {
        grid-row: 1;
        align-self: stretch;
        justify-self: stretch;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 1fr;
        align-items: center;
        justify-items: center;
        width: 100%;
        overflow: hidden;
        padding: 0 var(--space-xs);
        box-sizing: border-box;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        text-align: center;
}

.flash-head-stack {
        grid-row: 2;
        grid-column: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--learn-head-ruby-gap);
        max-width: 100%;
        transform: translateY(calc(var(--learn-font-word) * var(--flash-front-optical-shift) + var(--flash-front-optical-nudge)));
}

.flash-word {
        flex-shrink: 0;
        font-size: var(--learn-font-word);
        font-weight: 800;
        line-height: 1;
        color: var(--learn-color-word);
        letter-spacing: 0.04em;
        margin: 0;
        padding: 0;
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
}

.flash-reading:not([hidden]) {
        position: static;
        width: 100%;
        text-align: center;
        pointer-events: none;
        flex-shrink: 0;
        line-height: 1;
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
}

.flash-reading {
        font-size: var(--learn-font-reading);
        color: var(--learn-color-reading);
        font-weight: 500;
        letter-spacing: 0.06em;
        line-height: 1;
        margin: 0;
        padding: 0;
}

.flashcard-back {
        grid-row: 2;
        min-height: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-top: 1px solid #dde3ef;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: safe center;
        gap: 0;
        padding: clamp(8px, 2vmin, 14px) var(--space-xs);
        box-sizing: border-box;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        scrollbar-width: thin;
        scrollbar-color: #c5cad8 transparent;
        touch-action: pan-y;
        text-align: center;
}

.flash-reveal-hint {
        margin: 0;
        font-size: clamp(12px, 3.2vw, 14px);
        font-weight: 500;
        color: var(--color-text-muted);
        line-height: 1.3;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        user-select: none;
        pointer-events: none;
}

.flashcard.revealed .flash-reveal-hint {
        display: none;
}

.flashcard-back.is-revealed {
        cursor: default;
}

.flashcard.revealed {
        overflow: hidden;
}

.flashcard.revealed .flashcard-front {
        min-height: 0;
        overflow: hidden;
}

.flashcard.revealed .flashcard-back {
        cursor: default;
        min-height: 0;
        overflow-y: auto;
}

.flash-reading[hidden] {
        display: none !important;
}

.flashcard:not(.revealed) .flashcard-back .flash-english,
.flashcard:not(.revealed) .flashcard-back .flash-meaning,
.flashcard:not(.revealed) .flashcard-back .flash-example {
        opacity: 0;
        transform: translateY(6px);
        transition: none;
}

.flashcard.revealed .flashcard-back .flash-english,
.flashcard.revealed .flashcard-back .flash-meaning,
.flashcard.revealed .flashcard-back .flash-example {
        opacity: 1;
        transform: translateY(0);
        transition:
                opacity 0.16s ease-out,
                transform 0.16s ease-out;
}

.flash-action-slot {
        width: 100%;
        min-height: var(--flash-action-height);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--flash-action-gap);
        margin-top: calc(var(--flash-card-action-gap) - var(--learn-stack-gap) - var(--flash-action-lift));
}

.flash-undo-btn-study {
        flex: 0 0 auto;
        margin: 0;
        align-self: flex-start;
}

.flash-answer-btns {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--flash-answer-btn-gap);
        width: 100%;
}

.flash-circle-btn {
        flex: 0 0 var(--flash-circle-btn-size);
        width: var(--flash-circle-btn-size);
        height: var(--flash-circle-btn-size);
        border-radius: 50%;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        color: #ffffff;
        font-family: inherit;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
        transition:
                filter 0.12s ease,
                transform 0.12s ease,
                box-shadow 0.12s ease;
}

.flash-circle-btn-icon {
        display: block;
        width: clamp(23px, 6.3vw, 29px);
        height: clamp(23px, 6.3vw, 29px);
        flex-shrink: 0;
}

.flash-circle-btn-icon-text {
        width: clamp(26px, 7vw, 32px);
        height: clamp(26px, 7vw, 32px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(22px, 5.8vw, 28px);
        font-weight: 700;
        line-height: 1;
}

.flash-circle-btn-icon-check {
        width: clamp(26px, 7vw, 32px);
        height: clamp(26px, 7vw, 32px);
}

.flash-circle-btn-label {
        font-size: clamp(13px, 3.3vw, 16px);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0.02em;
}

.flash-unknown-btn {
        background-color: var(--flash-unknown-circle-bg);
}

.flash-unknown-btn:active {
        filter: brightness(0.94);
        transform: scale(0.97);
}

.flash-unknown-btn.is-unknown-bounce,
.flash-unknown-btn.is-unknown-bounce:active {
        animation: flash-unknown-btn-bounce 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        transition: none;
        filter: none;
        transform: none;
}

.flash-known-btn {
        background-color: var(--flash-known-circle-bg);
}

.flash-known-btn:active {
        filter: brightness(0.94);
        transform: scale(0.97);
}

.flash-known-btn.is-known-bounce,
.flash-known-btn.is-known-bounce:active {
        animation: flash-known-btn-bounce 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        transition: none;
        filter: none;
}

.flash-unknown-btn.is-pressed-feedback {
        transform: scale(0.96);
        transition: transform 0.12s ease;
}

.flash-answer-btns[hidden] {
        display: none !important;
}

.flash-answer-btns.is-busy {
        pointer-events: none;
        opacity: 1;
}

.flash-progress {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 3px var(--space-xs) 0;
        margin-top: -11px;
        flex-shrink: 0;
        overflow: visible;
}

.flash-undo-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--flash-undo-size);
        width: var(--flash-undo-size);
        height: var(--flash-undo-size);
        padding: 0;
        border: 1px solid var(--flash-undo-border);
        border-radius: 999px;
        background-color: var(--color-surface);
        color: var(--flash-undo-color);
        font-family: inherit;
        font-size: clamp(16px, 4.2vw, 19px);
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
}

.flash-undo-btn:active:not(:disabled) {
        background-color: #f3f4f6;
        border-color: #d5dae6;
        color: var(--flash-undo-color-active);
}

.flash-undo-btn:disabled {
        cursor: default;
}

.flash-undo-btn.is-unavailable {
        visibility: hidden;
        pointer-events: none;
}

.flash-test-mode-label {
        display: none;
        flex-shrink: 0;
        width: 100%;
        text-align: center;
        font-size: clamp(18px, 5vw, 24px);
        font-weight: 700;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
        line-height: 1.15;
        white-space: nowrap;
        padding: 0 var(--space-xs);
        margin: 0 0 8px;
}

body.env-test .flash-study {
        padding-top: 0;
}

body.env-test .flash-test-mode-label {
        display: block;
        margin-top: -10px;
        margin-bottom: 10px;
}

body.env-test #panelLearn:has(#flashStudy[hidden]) .flash-test-mode-label {
        display: none;
}

.flash-progress[hidden] {
        display: none !important;
}

.flash-progress-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
}

.flash-progress-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        border: 1.5px solid var(--learn-color-progress-upcoming);
        background-color: transparent;
        flex-shrink: 0;
        box-sizing: border-box;
        transition:
                background-color 0.15s ease,
                border-color 0.15s ease,
                transform 0.15s ease;
}

.flash-progress-dot.is-done-known {
        background-color: var(--learn-color-progress-done);
        border-color: var(--learn-color-progress-done);
}

.flash-progress-dot.is-done-skip {
        background-color: var(--learn-color-progress-skip);
        border-color: var(--learn-color-progress-skip);
}

.flash-progress-dot.is-current {
        transform: scale(1.2);
}

.flash-progress-dot.is-upcoming {
        background-color: transparent;
        border-color: var(--learn-color-progress-upcoming);
}

.flash-progress-dot.is-pop-known {
        animation: flash-dot-known-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        transition: none;
}

@keyframes flash-dot-known-pop {
        0% {
                transform: scale(1);
        }

        50% {
                transform: scale(1.3);
        }

        100% {
                transform: scale(1);
        }
}

@media (prefers-reduced-motion: reduce) {
        .flashcard.revealed .flashcard-back .flash-english,
        .flashcard.revealed .flashcard-back .flash-meaning,
        .flashcard.revealed .flashcard-back .flash-example {
                transition: none;
                transform: none;
        }

        .flashcard.is-leaving-known {
                animation: flash-known-glow-reduced 0.52s ease-in-out forwards;
                transition: none;
        }

        .flashcard.is-leaving-skip {
                animation: flash-unknown-glow-reduced 0.52s ease-in-out forwards;
                transition: none;
        }

        .flash-known-btn.is-known-bounce,
        .flash-known-btn.is-known-bounce:active {
                animation: flash-known-btn-bounce-reduced 0.2s ease forwards;
        }

        .flash-unknown-btn.is-unknown-bounce,
        .flash-unknown-btn.is-unknown-bounce:active {
                animation: flash-unknown-btn-bounce-reduced 0.2s ease forwards;
        }

        .flash-progress-dot.is-pop-known {
                animation: flash-dot-known-pop-reduced 0.2s ease forwards;
                transition: none;
        }
}

@keyframes flash-known-glow-reduced {
        0% {
                border-color: var(--learn-color-card-border);
                box-shadow: var(--learn-shadow-card);
        }

        30% {
                border-color: var(--flash-known-circle-bg);
                box-shadow:
                        inset 0 1px 0 rgba(255, 255, 255, 0.95),
                        0 0 0 4px rgba(var(--flash-known-glow-rgb), 0.48),
                        0 6px 16px rgba(var(--flash-known-glow-rgb), 0.16);
        }

        100% {
                border-color: var(--learn-color-card-border);
                box-shadow: var(--learn-shadow-card);
        }
}

@keyframes flash-unknown-glow-reduced {
        0% {
                border-color: var(--learn-color-card-border);
                box-shadow: var(--learn-shadow-card);
        }

        30% {
                border-color: var(--flash-unknown-circle-bg);
                box-shadow:
                        inset 0 1px 0 rgba(255, 255, 255, 0.95),
                        0 0 0 4px rgba(var(--flash-unknown-glow-rgb), 0.48),
                        0 6px 16px rgba(var(--flash-unknown-glow-rgb), 0.16);
        }

        100% {
                border-color: var(--learn-color-card-border);
                box-shadow: var(--learn-shadow-card);
        }
}

@keyframes flash-known-btn-bounce-reduced {
        0% {
                transform: scale(0.98);
        }

        100% {
                transform: scale(1);
        }
}

@keyframes flash-unknown-btn-bounce-reduced {
        0% {
                transform: scale(0.98);
        }

        100% {
                transform: scale(1);
        }
}

@keyframes flash-dot-known-pop-reduced {
        0% {
                transform: scale(1);
        }

        50% {
                transform: scale(1.15);
        }

        100% {
                transform: scale(1);
        }
}

.flash-english.is-empty,
.flash-meaning.is-empty,
.flash-example.is-empty {
        display: none;
}

.flash-english {
        font-size: var(--learn-font-english);
        font-weight: 700;
        color: var(--learn-color-english);
        line-height: var(--line-height-tight);
        flex-shrink: 0;
        width: 100%;
        text-align: center;
}

.flash-meaning {
        font-size: var(--learn-font-meaning);
        line-height: var(--vocab-inline-line-height);
        color: var(--learn-color-meaning);
        font-weight: 600;
        word-break: break-word;
        max-width: 100%;
        flex-shrink: 0;
        width: 100%;
        text-align: center;
        margin: var(--vocab-gap-english-meaning) 0 0;
        padding-top: var(--vocab-inline-block-pad);
}

.flash-meaning ruby,
.flash-example ruby,
.search-item-body .word-meaning ruby,
.search-item-body .word-example ruby {
        ruby-align: center;
        line-height: 1;
        ruby-position: over;
        -webkit-ruby-position: before;
}

.flash-meaning rt,
.flash-example rt {
        font-size: var(--vocab-inline-rt-size);
        font-weight: 500;
        color: var(--color-reading);
        letter-spacing: 0.01em;
        line-height: 1;
        padding: 0;
        margin: 0;
        transform: translateY(var(--vocab-inline-rt-shift));
}

.search-item-body .word-meaning rt,
.search-item-body .word-example rt {
        font-size: var(--vocab-inline-rt-size);
        font-weight: 500;
        color: var(--color-reading);
        letter-spacing: 0.01em;
        line-height: 1;
        padding: 0;
        margin: 0;
        transform: translateY(var(--search-inline-rt-shift));
}

.flash-example {
        font-size: var(--learn-font-example);
        line-height: var(--vocab-inline-line-height);
        color: var(--learn-color-example);
        word-break: break-word;
        max-width: 100%;
        flex-shrink: 0;
        width: 100%;
        text-align: center;
        margin: var(--vocab-gap-meaning-example) 0 0;
        padding-top: var(--vocab-inline-block-pad);
}

.flash-unknown-btn.is-pressed-feedback {
        transform: scale(0.96);
        transition: transform 0.12s ease;
}

@keyframes flash-known-btn-bounce {
        0% {
                transform: scale(0.96);
        }

        45% {
                transform: scale(1.08);
        }

        100% {
                transform: scale(1);
        }
}

@keyframes flash-unknown-btn-bounce {
        0% {
                transform: scale(0.96);
        }

        45% {
                transform: scale(1.08);
        }

        100% {
                transform: scale(1);
        }
}

.flash-complete {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-lg);
        text-align: center;
        padding: var(--space-lg) var(--space-md) var(--space-md);
}

.flash-complete-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
}

.flash-complete-message {
        font-size: clamp(22px, 5.8vw, 28px);
        font-weight: 800;
        margin: 0;
        line-height: 1.35;
        white-space: pre-line;
        color: var(--learn-color-word);
        letter-spacing: 0.01em;
}

.flash-complete-detail {
        margin: 0;
        font-size: clamp(15px, 4vw, 18px);
        font-weight: 600;
        line-height: var(--line-height-tight);
        color: var(--color-text-muted);
        letter-spacing: 0.02em;
}

.flash-complete-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        width: min(280px, 100%);
}

.flash-complete-finish-wrap {
        width: 100%;
        min-height: calc(var(--touch-min) + var(--flash-action-gap) + var(--flash-undo-size));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--flash-action-gap);
}

.flash-complete-finish-wrap .flash-finish-btn {
        width: 100%;
}

.flash-complete-skip-note {
        width: 100%;
        margin: 0;
        padding: 0 2px;
        font-size: clamp(10px, 2.6vw, 12px);
        font-weight: 500;
        line-height: 1.35;
        color: var(--color-text-muted);
        text-align: right;
}

.flash-restart-btn {
        flex: none;
        width: 100%;
        min-height: var(--touch-min);
        font-family: inherit;
        font-size: var(--learn-font-btn);
        font-weight: 700;
        border-radius: var(--learn-radius-btn);
        cursor: pointer;
        color: #ffffff;
        background-color: var(--flash-known-circle-bg);
        border: 2px solid var(--flash-known-circle-border);
        box-shadow: 0 4px 16px rgba(var(--flash-known-glow-rgb), 0.28);
        line-height: var(--line-height-tight);
        transition:
                background-color 0.12s ease,
                border-color 0.12s ease,
                box-shadow 0.12s ease,
                transform 0.08s ease;
}

.flash-restart-btn:active {
        background-color: var(--flash-known-circle-border);
        border-color: var(--flash-known-circle-border-active);
        box-shadow: 0 2px 10px rgba(var(--flash-known-glow-rgb), 0.22);
        transform: translateY(1px);
}

.flash-finish-btn {
        width: 100%;
        min-height: var(--touch-min);
        font-family: inherit;
        font-size: var(--learn-font-btn);
        font-weight: 700;
        border-radius: var(--learn-radius-btn);
        cursor: pointer;
        color: var(--learn-color-unknown-text);
        background-color: var(--learn-color-unknown-bg);
        border: 1px solid var(--learn-color-unknown-border);
        box-shadow: var(--shadow-soft);
        line-height: var(--line-height-tight);
}

.flash-finish-btn:active {
        background-color: #f3f4f6;
        border-color: #d1d5db;
}

.flash-finish-btn[hidden] {
        display: none !important;
}

.word-list {
        display: flex;
        flex-direction: column;
        min-height: 0;
        gap: var(--space-sm);
}

#panelLearn .word-list {
        gap: 3px;
}

.word-list.word-list-scroll {
        overflow-y: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
}

.word-list.word-list-fit {
        overflow: hidden;
        justify-content: flex-start;
        gap: 3px;
}

.word-list.word-list-fit.word-list-fit-partial {
        justify-content: flex-start;
        gap: 3px;
}

.word-list.word-list-fit .word-card {
        flex-shrink: 0;
}

.word-list.hide-details .word-english,
.word-list.hide-details .word-meaning,
.word-list.hide-details .word-example,
.word-list.hide-details .word-detail {
        visibility: hidden !important;
}

.word-card {
        background-color: var(--color-surface);
        padding: var(--space-sm);
        display: flex;
        align-items: flex-start;
        gap: var(--space-sm);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        border: 1px solid var(--color-border-soft);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-soft);
}

#panelLearn .word-card {
        --word-card-pad-y: 11px;
        padding: var(--word-card-pad-y) 7px;
        gap: 7px;
}

#panelSearch .search-item-row {
        --word-card-pad-y: 10px;
        padding: var(--word-card-pad-y) 7px;
        gap: 7px;
}

#panelLearn .word-content,
#panelSearch .search-item-body {
        gap: 0;
}

#panelLearn .word-meaning {
        margin-top: var(--vocab-gap-english-meaning);
}

#panelSearch .search-item-body .word-meaning {
        margin-top: var(--vocab-gap-english-meaning);
}

#panelLearn .word-ja-block {
        gap: 1px;
}

#panelLearn .word-meaning,
#panelLearn .word-example {
        line-height: var(--vocab-inline-line-height);
}

#panelLearn .word-example {
        margin-top: var(--vocab-gap-meaning-example);
}

#panelLearn .learn-cat-row {
        gap: var(--learn-cat-gap);
}

#panelLearn .learn-tab-btn {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 7px 4px;
}

#panelLearn .learn-header-banner {
        padding: var(--space-xs) var(--space-sm);
        min-height: 40px;
}

.learn-words-block {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
}

#panelLearn:has(.word-list-fit) .learn-words-block,
#panelLearn:has(.word-list-fit-partial) .learn-words-block {
        flex: 0 0 auto;
}

#panelLearn .learn-words-block .word-list {
        min-height: 0;
}

#panelLearn .learn-words-block .word-list.word-list-fit,
#panelLearn .learn-words-block .word-list.word-list-fit-partial {
        flex: 0 0 auto;
}

#panelLearn .learn-words-block .word-list.word-list-scroll {
        flex: 1 1 auto;
        min-height: 0;
}

#panelLearn .learn-page-nav {
        flex-shrink: 0;
        margin-top: var(--space-sm);
        padding: 2px 0;
}

.learn-panel-spacer {
        flex: 1 1 auto;
        min-height: var(--space-md);
}

#panelLearn:has(.word-list-scroll) .learn-panel-spacer {
        flex: 0 0 var(--space-md);
        min-height: 0;
}

#panelLearn .learn-nav-footer {
        flex-shrink: 0;
        margin-top: 0;
        padding-bottom: 3px;
        position: relative;
        z-index: 5;
        background-color: var(--color-bg);
}

#panelLearn .learn-nav-footer[hidden] {
        display: none !important;
}

.container:has(#panelLearn.active) {
        gap: 3px;
}

.word-card.checked {
        background-color: var(--learn-color-known-soft-bg);
        border-color: var(--learn-color-known-border);
}

.word-chk-wrap,
.search-item-chk-wrap {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-shrink: 0;
        align-self: flex-start;
        min-width: var(--chk-wrap-min-width);
        min-height: var(--touch-min);
        height: calc(var(--font-size-word) * var(--line-height-tight));
        cursor: pointer;
}

.word-custom-chk {
        width: var(--chk-size);
        height: var(--chk-size);
        border: 2.5px solid;
        border-radius: 6px;
        background-color: var(--color-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
                background-color 0.12s ease,
                border-color 0.12s ease;
}

.word-custom-chk.chk-基本 {
        border-color: var(--color-cat-基本);
}
.word-custom-chk.chk-介護 {
        border-color: var(--color-cat-介護);
}
.word-custom-chk.chk-医療 {
        border-color: var(--color-cat-医療-dark);
}
.word-custom-chk.chk-社会 {
        border-color: var(--color-cat-社会);
}

.word-card.checked .word-custom-chk.chk-基本,
.search-item-row.checked .word-custom-chk.chk-基本 {
        background-color: var(--color-cat-基本);
        border-color: var(--color-cat-基本);
}

.word-card.checked .word-custom-chk.chk-介護,
.search-item-row.checked .word-custom-chk.chk-介護 {
        background-color: var(--color-cat-介護);
        border-color: var(--color-cat-介護);
}

.word-card.checked .word-custom-chk.chk-医療,
.search-item-row.checked .word-custom-chk.chk-医療 {
        background-color: var(--color-cat-医療-dark);
        border-color: var(--color-cat-医療-dark);
}

.word-card.checked .word-custom-chk.chk-社会,
.search-item-row.checked .word-custom-chk.chk-社会 {
        background-color: var(--color-cat-社会);
        border-color: var(--color-cat-社会);
}

.word-card.checked .word-custom-chk::after,
.search-item-row.checked .word-custom-chk::after {
        content: "";
        display: block;
        width: 6px;
        height: 11px;
        border: solid #ffffff;
        border-width: 0 2.5px 2.5px 0;
        transform: rotate(45deg);
        margin-bottom: 2px;
}

#panelSearch .word-custom-chk.chk-基本,
#panelSearch .word-custom-chk.chk-介護,
#panelSearch .word-custom-chk.chk-医療,
#panelSearch .word-custom-chk.chk-社会 {
        border-color: var(--learn-color-unknown-border);
}

#panelSearch .search-item-row.checked .word-custom-chk {
        background-color: var(--flash-known-circle-bg);
        border-color: var(--flash-known-circle-bg);
}

.word-content,
.search-item-body .word-ja-block,
.search-item-body .word-meaning,
.search-item-body .word-example,
.search-item-body .word-detail {
        flex: 1;
        min-width: 0;
}

.word-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        flex: 1;
        min-width: 0;
}

.word-ja-block {
        display: flex;
        flex-direction: column;
        gap: 2px;
}

.word-title-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-xs) var(--space-sm);
        min-width: 0;
}

.word-title {
        font-size: var(--font-size-word);
        font-weight: 800;
        color: #111827;
        line-height: var(--line-height-tight);
        word-break: break-word;
        letter-spacing: 0.04em;
}

.word-reading {
        font-size: var(--font-size-reading);
        font-weight: 600;
        color: var(--color-reading);
        line-height: var(--line-height-tight);
        word-break: break-word;
        flex-shrink: 0;
}

.word-english {
        font-size: var(--font-size-english);
        color: var(--color-english);
        font-weight: 700;
        line-height: var(--line-height-tight);
        word-break: break-word;
        flex: 1;
        min-width: 0;
}

.word-detail {
        font-size: var(--font-size-detail);
        line-height: var(--line-height-detail);
        color: #374151;
        white-space: pre-line;
        word-break: break-word;
}

.word-meaning {
        font-size: var(--font-size-detail);
        line-height: var(--line-height-detail);
        color: #374151;
        word-break: break-word;
}

.word-example {
        font-size: clamp(12px, 3.2vw, 14px);
        line-height: var(--line-height-detail);
        color: #4b5563;
        word-break: break-word;
        flex-shrink: 0;
}

.learn-nav-footer {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        padding-bottom: var(--space-xs);
}

.learn-page-nav {
        display: flex;
        align-items: center;
        justify-content: center;
}

.learn-page-indicator {
        text-align: center;
        font-size: clamp(12px, 3.2vw, 14px);
        font-weight: 700;
        color: var(--color-text-muted);
        line-height: var(--line-height-tight);
}

.action-container {
        flex-shrink: 0;
        display: flex;
        gap: var(--space-sm);
}

.mask-toggle-btn {
        flex: 0 0 22%;
        min-height: var(--touch-min);
        font-family: inherit;
        font-size: var(--font-size-btn);
        font-weight: 700;
        color: var(--color-btn-mask-text);
        background-color: var(--color-btn-mask-bg);
        border: 1px solid var(--color-btn-mask-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-soft);
}

.mask-toggle-btn:active {
        background-color: #bae6fd;
}

.prev-btn {
        flex: 0 0 22%;
        min-height: var(--touch-min);
        font-family: inherit;
        font-size: var(--font-size-btn);
        font-weight: 700;
        color: var(--color-btn-nav-text);
        background-color: var(--color-btn-nav-bg);
        border: 1px solid var(--color-btn-nav-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-soft);
}

.prev-btn:active:not(:disabled) {
        background-color: #e5e7eb;
}

.prev-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
}

.submit-btn {
        flex: 1;
        min-height: var(--touch-min);
        font-family: inherit;
        font-size: var(--font-size-btn);
        font-weight: 800;
        color: #ffffff;
        background-color: var(--color-accent);
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        box-shadow: var(--shadow-card);
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.04em;
}

.submit-btn:disabled {
        background-color: #9ca3af !important;
        box-shadow: none;
        cursor: not-allowed;
}

/* 2. きろく */
.daily-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        gap: var(--space-sm);
}

.daily-stats-row {
        display: flex;
        gap: var(--space-sm);
        flex-shrink: 0;
}

.daily-stat-card {
        flex: 1;
        min-width: 0;
        border-radius: var(--radius-md);
        padding: var(--space-sm) 4px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        box-shadow: var(--shadow-soft);
}

.daily-stat-card.streak {
        background-color: #fff7ed;
        border: 1px solid #ffedd5;
}

.daily-stat-card.streak .daily-stat-label {
        font-size: clamp(11px, 2.9vw, 13px);
        font-weight: 700;
        color: #c2410c;
        line-height: var(--line-height-tight);
}

.daily-stat-card.streak .daily-stat-value,
.daily-stat-card.today .daily-stat-value,
.daily-stat-card.words .daily-stat-value {
        font-size: clamp(22px, 5.6vw, 28px);
        font-weight: 800;
        line-height: 1.1;
}

.daily-stat-value .daily-stat-unit {
        font-size: 0.58em;
        font-weight: 700;
}

.daily-stat-card.streak .daily-stat-value {
        color: #ea580c;
}

.daily-stat-card.today {
        background-color: #fffbeb;
        border: 1px solid #fde68a;
}

.daily-stat-card.today .daily-stat-label {
        font-size: clamp(11px, 2.9vw, 13px);
        font-weight: 700;
        color: #b45309;
        line-height: var(--line-height-tight);
}

.daily-stat-card.today .daily-stat-value {
        color: #d97706;
}

.daily-stat-card.words {
        background-color: #fefce8;
        border: 1px solid #fef08a;
}

.daily-stat-card.words .daily-stat-label {
        font-size: clamp(11px, 2.9vw, 13px);
        font-weight: 700;
        color: #a16207;
        line-height: var(--line-height-tight);
}

.daily-stat-card.words .daily-stat-value {
        color: #ca8a04;
}

.roadmap-title {
        font-size: clamp(13px, 3.5vw, 15px);
        font-weight: 700;
        color: var(--color-text-muted);
        padding-left: 2px;
        flex-shrink: 0;
}

.roadmap-scroll-wrapper {
        flex: 1;
        overflow-y: auto;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background-color: var(--color-surface);
        min-height: 0;
        box-shadow: var(--shadow-soft);
        -webkit-overflow-scrolling: touch;
}

.roadmap-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
}

.roadmap-table th {
        position: sticky;
        top: 0;
        background-color: #f8fafc;
        font-size: clamp(11px, 3vw, 13px);
        font-weight: 700;
        padding: var(--space-sm) 0;
        border-bottom: 1px solid var(--color-border);
        z-index: 10;
}

.roadmap-table th.th-week {
        color: var(--color-text-muted);
        width: 24%;
}

.roadmap-table th.th-day {
        color: #475569;
        width: 11%;
}

.roadmap-table th.th-sat {
        color: var(--color-cat-基本);
}
.roadmap-table th.th-sun {
        color: #dc2626;
}

.roadmap-table td {
        padding: var(--space-sm) 0;
        font-size: clamp(12px, 3.2vw, 14px);
        border-bottom: 1px solid var(--color-border-soft);
        vertical-align: middle;
}

.roadmap-table td.roadmap-day-gray {
        font-size: clamp(10px, 2.7vw, 12px);
}

.roadmap-table td.roadmap-day-star {
        font-size: clamp(15px, 4vw, 17px);
}

.roadmap-table td.td-week {
        font-size: clamp(11px, 3vw, 13px);
        font-weight: 700;
        color: #475569;
        background-color: #f8fafc;
        border-right: 1px solid var(--color-border-soft);
}

.roadmap-table tr.current-week td {
        background-color: #fff7ed;
}

.roadmap-table tr.current-week td.td-week {
        background-color: #ffedd5;
        color: #c2410c;
}

/* 3. さがす */
.search-control-area {
        background-color: var(--color-bg);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        padding-top: var(--space-xs);
}

.search-input-wrapper {
        display: flex;
        align-items: center;
        min-height: var(--touch-min);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background-color: var(--color-surface);
        padding: 0 var(--space-md);
        gap: var(--space-sm);
        box-shadow: var(--shadow-soft);
}

.search-input-wrapper:focus-within {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.search-icon-box {
        font-size: 18px;
        line-height: 1;
        color: var(--color-text-muted);
        flex-shrink: 0;
}

.search-input-field {
        flex: 1;
        min-height: 40px;
        border: none;
        outline: none;
        font-family: inherit;
        font-size: clamp(15px, 4vw, 17px);
        color: var(--color-text);
        background: transparent;
}

#panelSearch .search-input-field {
        font-size: clamp(16px, 4.2vw, 18px);
}

.search-input-field::placeholder {
        color: #9ca3af;
}

.search-filter-panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
        background-color: var(--color-surface);
        border: 1px solid var(--color-border-soft);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
}

.filter-chip-row {
        display: flex;
        gap: var(--space-sm);
}

.filter-chip-row-cats {
        gap: var(--space-xs);
}

.filter-chip-row:not(.filter-chip-row-cats) {
        justify-content: center;
}

.filter-chip-row:not(.filter-chip-row-cats) .filter-chip {
        flex: 0 1 auto;
        min-width: 5.5em;
        max-width: 38%;
        padding-left: 10px;
        padding-right: 10px;
}

#panelSearch.active {
        touch-action: pan-x pan-y pinch-zoom;
}

#panelSearch.active .search-filter-panel,
#panelSearch.active .search-status-bar,
#panelSearch.active .search-control-area {
        touch-action: manipulation;
}

#panelSearch .search-filter-panel .filter-chip {
        min-height: 34px;
        font-size: clamp(12px, 3.2vw, 14px);
        padding: 5px 4px;
}

#panelSearch .filter-chip.chip-learned,
#panelSearch .filter-chip.chip-unlearned,
#panelSearch .filter-chip.chip-cat-基本,
#panelSearch .filter-chip.chip-cat-介護,
#panelSearch .filter-chip.chip-cat-医療,
#panelSearch .filter-chip.chip-cat-社会 {
        position: relative;
}

.filter-chip {
        flex: 1;
        min-height: 38px;
        font-family: inherit;
        font-size: clamp(13px, 3.5vw, 15px);
        font-weight: 700;
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        border-radius: var(--radius-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4b5563;
        user-select: none;
        transition:
                background-color 0.12s ease,
                border-color 0.12s ease,
                color 0.12s ease;
        box-shadow: var(--shadow-soft);
}

.filter-chip.chip-learned.active {
        background-color: #ffffff;
        color: var(--flash-known-circle-bg);
        border-color: var(--color-border);
        box-shadow: var(--shadow-soft);
}

.filter-chip.chip-unlearned.active {
        background-color: #ffffff;
        color: var(--flash-unknown-circle-bg);
        border-color: var(--color-border);
        box-shadow: var(--shadow-soft);
}

#panelSearch .filter-chip.chip-learned.active::after,
#panelSearch .filter-chip.chip-unlearned.active::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 12%;
        right: 12%;
        height: 2px;
        border-radius: 2px;
        pointer-events: none;
}

#panelSearch .filter-chip.chip-learned.active::after {
        background-color: var(--flash-known-circle-bg);
}

#panelSearch .filter-chip.chip-unlearned.active::after {
        background-color: var(--flash-unknown-circle-bg);
}

.filter-chip.chip-cat-基本 {
        color: var(--color-cat-基本);
        border-color: var(--color-cat-基本-border);
}
.filter-chip.chip-cat-介護 {
        color: var(--color-cat-介護);
        border-color: var(--color-cat-介護-border);
}
.filter-chip.chip-cat-医療 {
        color: var(--color-cat-医療-dark);
        border-color: var(--color-cat-医療-border);
}
.filter-chip.chip-cat-社会 {
        color: var(--color-cat-社会);
        border-color: var(--color-cat-社会-border);
}

.filter-chip.chip-cat-基本.active {
        background-color: #ffffff;
        color: var(--color-cat-基本);
        border-color: var(--color-border);
        box-shadow: var(--shadow-soft);
}
.filter-chip.chip-cat-介護.active {
        background-color: #ffffff;
        color: var(--color-cat-介護);
        border-color: var(--color-border);
        box-shadow: var(--shadow-soft);
}
.filter-chip.chip-cat-医療.active {
        background-color: #ffffff;
        color: var(--color-cat-医療-dark);
        border-color: var(--color-border);
        box-shadow: var(--shadow-soft);
}
.filter-chip.chip-cat-社会.active {
        background-color: #ffffff;
        color: var(--color-cat-社会);
        border-color: var(--color-border);
        box-shadow: var(--shadow-soft);
}

#panelSearch .filter-chip.chip-cat-基本.active::after,
#panelSearch .filter-chip.chip-cat-介護.active::after,
#panelSearch .filter-chip.chip-cat-医療.active::after,
#panelSearch .filter-chip.chip-cat-社会.active::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 12%;
        right: 12%;
        height: 2px;
        border-radius: 2px;
        pointer-events: none;
}

#panelSearch .filter-chip.chip-cat-基本.active::after {
        background-color: var(--color-cat-基本);
}

#panelSearch .filter-chip.chip-cat-介護.active::after {
        background-color: var(--color-cat-介護);
}

#panelSearch .filter-chip.chip-cat-医療.active::after {
        background-color: var(--color-cat-医療-dark);
}

#panelSearch .filter-chip.chip-cat-社会.active::after {
        background-color: var(--color-cat-社会);
}

.search-status-bar {
        font-size: clamp(12px, 3.2vw, 14px);
        font-weight: 700;
        color: #6d758f;
        line-height: var(--line-height-tight);
        padding: 2px;
        flex-shrink: 0;
}

.search-result-scroll {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-x pan-y pinch-zoom;
}

.search-item-row {
        padding: var(--space-sm);
        border: 1px solid var(--color-border-soft);
        border-radius: var(--radius-sm);
        background-color: var(--color-surface);
        display: flex;
        align-items: flex-start;
        gap: var(--space-sm);
        user-select: none;
        -webkit-user-select: none;
        box-shadow: var(--shadow-soft);
        content-visibility: auto;
        contain-intrinsic-size: auto 72px;
}

.search-item-row + .search-item-row {
        margin-top: var(--space-xs);
}

.search-item-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
}

.search-item-body .word-title-row {
        align-items: flex-start;
        column-gap: var(--space-sm);
        row-gap: var(--space-xs);
}

.search-item-body .word-head-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        min-width: 0;
        flex: 1;
}

.search-item-body .word-title-line {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px var(--space-sm);
        min-width: 0;
}

.search-item-body .word-title {
        font-size: var(--search-font-title);
        font-weight: 800;
        line-height: 1.2;
}

.search-item-body .word-reading {
        font-size: var(--search-font-reading);
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.06em;
        color: var(--color-reading);
}

.search-item-body .word-english {
        font-size: var(--search-font-english);
        font-weight: 700;
        line-height: 1.2;
        flex: 0 1 auto;
}

.search-item-body .word-meaning {
        font-size: var(--search-font-body);
        line-height: var(--vocab-inline-line-height);
        color: #374151;
        padding-top: var(--vocab-inline-block-pad);
}

.search-item-body .word-example {
        font-size: var(--search-font-example);
        line-height: var(--vocab-inline-line-height);
        color: #4b5563;
        margin-top: var(--vocab-gap-meaning-example);
        padding-top: var(--vocab-inline-block-pad);
}

.search-item-body .word-title-row .search-item-badge {
        margin-left: auto;
        align-self: flex-start;
        margin-top: 0;
        min-height: var(--chk-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
}

#panelSearch .search-item-row:has(.word-reading:not([hidden])) .search-item-body .word-title-row .search-item-badge {
        margin-top: 14px;
}

#panelSearch .search-item-chk-wrap {
        align-self: flex-start;
        height: auto;
        min-height: 0;
        padding-top: 0;
        margin-top: 0;
        align-items: center;
}

#panelSearch .search-item-row:has(.word-reading:not([hidden])) .search-item-chk-wrap {
        margin-top: 14px;
}

.search-item-badge {
        min-width: 38px;
        text-align: center;
        font-size: clamp(10px, 2.6vw, 11px);
        font-weight: 700;
        color: var(--learn-color-unknown-text);
        padding: 2px 6px;
        border-radius: 999px;
        flex-shrink: 0;
        line-height: 1.3;
}

.search-item-badge.bg-基本 {
        background-color: var(--color-cat-基本-soft);
}
.search-item-badge.bg-介護 {
        background-color: var(--color-cat-介護-soft);
}
.search-item-badge.bg-医療 {
        background-color: var(--color-cat-医療-soft);
}
.search-item-badge.bg-社会 {
        background-color: var(--color-cat-社会-soft);
}

.loading-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background-color: rgba(247, 246, 243, 0.85);
        z-index: 1000;
        align-items: center;
        justify-content: center;
}

.loading-overlay.show {
        display: flex;
}

.loading-box {
        font-size: clamp(14px, 3.8vw, 16px);
        font-weight: 700;
        color: var(--color-text);
        background: var(--color-surface);
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
}

/* スマホ（ことばタブ） */
@media (max-width: 599px) {
        #panelLearn {
                gap: 5px;
                padding: 0 1px;
        }

        :root {
                --flash-ui-overhead: 242px;
                --learn-stack-gap: 12px;
                --flash-card-action-gap: 18px;
                --learn-card-pad-x: 16px;
                --learn-card-pad-y: 14px;
                --flash-front-optical-shift: -0.18;
                --flash-front-optical-nudge: -6px;
        }

        .flashcard-front {
                grid-template-rows: 1.15fr auto 0.85fr;
        }

        .flashcard-back {
                padding: clamp(6px, 1.8vmin, 10px) var(--space-xs);
        }
}

/* 小さい画面（高さ） */
@media (max-height: 700px) {
        :root {
                --font-size-word: clamp(15px, 4.2vw, 18px);
                --font-size-reading: clamp(12px, 3.4vw, 14px);
                --font-size-english: clamp(12px, 3.3vw, 14px);
                --font-size-detail: clamp(11.5px, 3.1vw, 13px);
                --chk-size: 20px;
                --vocab-type-base: clamp(14px, 3.6vmin, 17px);
                --learn-stack-gap: 10px;
                --flash-card-action-gap: 16px;
                --flash-ui-overhead: 238px;
        }

        .learn-tab-btn {
                min-height: 36px;
        }

        .learn-header-banner {
                padding: var(--space-xs) var(--space-sm);
                min-height: 40px;
        }

        .nav-btn,
        .mask-toggle-btn,
        .prev-btn,
        .submit-btn {
                min-height: 40px;
        }
}

/* 大きめの画面（幅） */
@media (min-width: 480px) {
        body {
                padding-top: max(clamp(16px, 2.8vh, 36px), env(safe-area-inset-top));
                padding-bottom: max(clamp(16px, 2.8vh, 36px), env(safe-area-inset-bottom));
                padding-left: max(clamp(var(--space-md), 2.5vw, 24px), env(safe-area-inset-left));
                padding-right: max(clamp(var(--space-md), 2.5vw, 24px), env(safe-area-inset-right));
        }

        .container {
                gap: var(--space-sm);
        }

        .container:has(#panelLearn.active) {
                gap: 3px;
        }

        .word-list {
                gap: var(--space-sm);
        }

        #panelLearn .word-list {
                gap: 3px;
        }

        #panelLearn .word-card {
                --word-card-pad-y: 11px;
                padding: var(--word-card-pad-y) var(--space-md);
        }

        #panelSearch .search-item-row {
                --word-card-pad-y: var(--space-sm);
                padding: var(--word-card-pad-y) var(--space-md);
        }

        body.env-test .flash-test-mode-label {
                font-size: clamp(20px, 3.2vw, 26px);
        }
}

/* 幅480〜599px（タブレット手前）：見出し単語が大きくなりすぎるのを抑える */
@media (min-width: 480px) and (max-width: 599px) {
        :root {
                --vocab-ratio-learn-title: 2.2;
        }
}

/* タブレット以上（ことば・さがす：読みやすさ調整） */
@media (min-width: 600px) {
        :root {
                --font-size-nav: clamp(15px, 2.3vw, 17px);
                --font-size-tab: clamp(15px, 2.3vw, 17px);
                --font-size-header: clamp(14px, 2.3vw, 16px);
                --font-size-word: clamp(18px, 2.8vw, 22px);
                --font-size-reading: clamp(15px, 2.2vw, 17px);
                --font-size-english: clamp(15px, 2.2vw, 17px);
                --font-size-detail: clamp(14px, 2.1vw, 17px);
                --font-size-btn: clamp(16px, 2.4vw, 18px);
                --font-size-stat: clamp(22px, 3.5vw, 30px);
                --vocab-type-base: clamp(18px, 2.6vw, 20px);
                --flash-answer-btn-gap: clamp(56px, 8vw, 88px);
                --learn-head-ruby-gap: 3px;
                --learn-font-progress: clamp(11px, 1.8vw, 12px);
                --learn-font-cat: clamp(15px, 2.4vw, 17px);
                --learn-font-btn: clamp(17px, 2.5vw, 19px);
        }

        .learn-tab-btn,
        #panelLearn .learn-tab-btn {
                min-height: 42px;
                padding: 8px 6px;
                font-size: var(--learn-font-cat);
        }

        .nav-btn {
                min-height: 44px;
                padding: 9px var(--space-sm);
                font-size: var(--font-size-nav);
        }

        #panelLearn {
                --font-size-word: clamp(19px, 2.8vw, 22px);
                --font-size-reading: clamp(16px, 2.3vw, 18px);
                --font-size-english: clamp(16px, 2.3vw, 18px);
                --font-size-detail: clamp(15px, 2.2vw, 17px);
                --chk-size: clamp(24px, 3.5vw, 28px);
        }

        #panelSearch {
                --font-size-detail: clamp(15px, 2.2vw, 17px);
                --chk-size: clamp(26px, 3.8vw, 30px);
        }

        #panelSearch .search-item-row {
                --word-card-pad-y: 14px;
                padding: var(--word-card-pad-y) var(--space-md);
                gap: var(--space-md);
        }

        #panelLearn .word-card {
                --word-card-pad-y: 14px;
                padding: var(--word-card-pad-y) var(--space-md);
        }

        #panelSearch .search-item-row:has(.word-reading:not([hidden])) .search-item-chk-wrap {
                margin-top: 15px;
        }

        #panelSearch .search-item-row:has(.word-reading:not([hidden])) .search-item-body .word-title-row .search-item-badge {
                margin-top: 15px;
        }

        #panelLearn .word-example {
                font-size: var(--learn-font-example);
        }

        #panelSearch .search-item-body .word-example {
                font-size: var(--search-font-example);
        }

        #panelLearn .learn-page-nav {
                margin-top: var(--space-md);
        }

        #panelLearn:has(.word-list-scroll) .learn-panel-spacer {
                flex: 0 0 var(--space-lg);
        }

        #panelLearn:has(.word-list-fit) .learn-panel-spacer,
        #panelLearn:has(.word-list-fit-partial) .learn-panel-spacer {
                min-height: var(--space-lg);
        }

        body.env-test .flash-test-mode-label {
                font-size: clamp(22px, 3vw, 28px);
        }

        #panelSearch .search-filter-panel .filter-chip {
                font-size: clamp(14px, 2.3vw, 16px);
                min-height: 38px;
                padding: 6px 6px;
        }

        .filter-chip {
                font-size: clamp(15px, 2.4vw, 17px);
                min-height: 42px;
        }

        #panelSearch .search-input-field {
                font-size: clamp(17px, 2.5vw, 18px);
        }

        .flashcard-back {
                padding: clamp(10px, 1.8vw, 14px) var(--space-xs);
        }

        .flash-progress-dots {
                gap: 10px;
        }

        .flash-progress-dot {
                width: 11px;
                height: 11px;
                border-width: 2px;
        }

        .flash-progress-dot.is-current {
                transform: scale(1.15);
        }

        .flash-complete {
                gap: var(--space-lg);
                padding: var(--space-lg) var(--space-md);
        }

        .flash-complete-head {
                gap: 12px;
        }

        .flash-complete-message {
                font-size: clamp(26px, 4.5vw, 36px);
        }

        .flash-complete-detail {
                font-size: clamp(17px, 2.7vw, 21px);
        }

        .flash-complete-skip-note {
                font-size: clamp(11px, 1.9vw, 13px);
        }

        .flash-complete-actions {
                width: min(340px, 100%);
                gap: 22px;
        }

        .flash-restart-btn,
        .flash-finish-btn {
                min-height: 48px;
                font-size: var(--learn-font-btn);
        }

        .flash-circle-btn {
                --flash-circle-btn-size: clamp(78px, 20.4vw, 93px);
        }

        .flash-undo-btn {
                font-size: clamp(17px, 2.7vw, 19px);
        }

        /* きろく */
        .daily-container {
                gap: var(--space-md);
        }

        .daily-stat-card {
                padding: var(--space-md) 6px;
                gap: 6px;
        }

        .daily-stat-card.streak .daily-stat-label,
        .daily-stat-card.today .daily-stat-label,
        .daily-stat-card.words .daily-stat-label {
                font-size: clamp(13px, 2.1vw, 15px);
        }

        .daily-stat-card.streak .daily-stat-value,
        .daily-stat-card.today .daily-stat-value,
        .daily-stat-card.words .daily-stat-value {
                font-size: clamp(26px, 4.2vw, 34px);
        }

        .roadmap-title {
                font-size: clamp(15px, 2.3vw, 17px);
        }

        .roadmap-table th {
                font-size: clamp(13px, 2vw, 15px);
                padding: 7px 5px;
        }

        .roadmap-table td {
                font-size: clamp(14px, 2.1vw, 16px);
                padding: 7px 5px;
        }

        .roadmap-table td.roadmap-day-gray {
                font-size: clamp(12px, 1.9vw, 14px);
        }

        .roadmap-table td.roadmap-day-star {
                font-size: clamp(17px, 2.8vw, 20px);
        }

        .roadmap-table td.td-week {
                font-size: clamp(13px, 2vw, 15px);
        }

        /* さがす */
        .search-filter-panel {
                padding: var(--space-sm) var(--space-md);
                gap: var(--space-sm);
        }

        .search-status-bar {
                font-size: clamp(14px, 2.1vw, 16px);
                padding: 4px 2px;
        }

        .search-icon-box {
                font-size: 20px;
        }

        .search-input-wrapper {
                min-height: 44px;
                padding: var(--space-sm) var(--space-md);
        }

        .search-item-badge {
                font-size: clamp(11px, 1.8vw, 12px);
                min-width: 42px;
                padding: 3px 8px;
        }

        .loading-box {
                font-size: clamp(15px, 2.2vw, 17px);
        }
}

/* PC（広い画面）— vw ではなく固定サイズで読みやすく */
@media (min-width: 900px) {
        :root {
                --font-size-nav: 17px;
                --font-size-tab: 17px;
                --font-size-header: 16px;
                --font-size-word: 22px;
                --font-size-reading: 17px;
                --font-size-english: 17px;
                --font-size-detail: 17px;
                --font-size-btn: 18px;
                --font-size-stat: 30px;
                --vocab-type-base: 20px;
                --learn-font-progress: 12px;
                --learn-font-cat: 17px;
                --learn-font-btn: 20px;
                --flash-answer-btn-gap: 88px;
                --learn-head-ruby-gap: 2px;
        }

        .learn-tab-btn,
        #panelLearn .learn-tab-btn {
                min-height: 44px;
                padding: 9px 8px;
                font-size: var(--learn-font-cat);
        }

        .nav-btn {
                min-height: 46px;
                padding: 10px var(--space-sm);
                font-size: var(--font-size-nav);
        }

        #panelSearch {
                --chk-size: 30px;
        }

        #panelSearch .search-item-row {
                padding: 16px var(--space-md);
                gap: var(--space-md);
        }

        /* きろく */
        .daily-container {
                gap: var(--space-md);
        }

        .daily-stat-card {
                padding: var(--space-md) 8px;
                gap: 8px;
        }

        .daily-stat-card.streak .daily-stat-label,
        .daily-stat-card.today .daily-stat-label,
        .daily-stat-card.words .daily-stat-label {
                font-size: 15px;
        }

        .daily-stat-card.streak .daily-stat-value,
        .daily-stat-card.today .daily-stat-value,
        .daily-stat-card.words .daily-stat-value {
                font-size: 34px;
        }

        .roadmap-title {
                font-size: 17px;
        }

        .roadmap-table th {
                font-size: 15px;
                padding: 8px 6px;
        }

        .roadmap-table td {
                font-size: 16px;
                padding: 8px 6px;
        }

        .roadmap-table td.roadmap-day-gray {
                font-size: 14px;
        }

        .roadmap-table td.roadmap-day-star {
                font-size: 20px;
        }

        .roadmap-table td.td-week {
                font-size: 15px;
        }

        /* さがす */
        .search-filter-panel {
                padding: var(--space-sm) var(--space-md);
                gap: var(--space-sm);
        }

        .search-status-bar {
                font-size: 16px;
                padding: 4px 2px;
        }

        .search-icon-box {
                font-size: 22px;
        }

        .search-input-wrapper {
                min-height: 48px;
                padding: var(--space-sm) var(--space-md);
        }

        .search-item-badge {
                font-size: 12px;
                min-width: 44px;
                padding: 4px 9px;
        }

        .loading-box {
                font-size: 17px;
        }

        .flash-circle-btn {
                --flash-circle-btn-size: clamp(85px, 19.4vw, 97px);
        }

        .flash-undo-btn {
                font-size: 19px;
        }

        #panelSearch .search-filter-panel .filter-chip {
                font-size: 16px;
                min-height: 40px;
        }

        .filter-chip {
                font-size: 17px;
                min-height: 44px;
        }

        #panelSearch .search-input-field {
                font-size: 18px;
        }

        .flashcard-back {
                padding: var(--space-md) var(--space-sm);
        }

        .flash-progress-dots {
                gap: 11px;
        }

        .flash-progress-dot {
                width: 12px;
                height: 12px;
                border-width: 2px;
        }

        .flash-complete-message {
                font-size: 36px;
        }

        .flash-complete-detail {
                font-size: 21px;
        }

        .flash-complete-skip-note {
                font-size: 13px;
        }

        .flash-complete-actions {
                width: min(360px, 100%);
                gap: 24px;
        }

        .flash-restart-btn,
        .flash-finish-btn {
                min-height: 50px;
                font-size: var(--learn-font-btn);
        }

        body.env-test .flash-test-mode-label {
                font-size: 26px;
        }
}

/* スマホ横向き — 最後に置き min-width 系の上書きを打ち消す。黄金比は維持しない */
@media (orientation: landscape) and (max-height: 520px) {
        :root {
                --learn-stack-gap: 6px;
                --flash-card-action-gap: 0;
                --flash-action-gap: 6px;
                --flash-action-height: auto;
                --learn-card-pad-x: 12px;
                --learn-card-pad-y: 8px;
                --learn-front-pad-y: 4px;
                --vocab-type-base: clamp(11px, 3.4vh, 14px);
                --vocab-ratio-learn-title: 1.9;
                --learn-font-btn: clamp(12px, 3.6vh, 14px);
                --flash-undo-size: 24px;
                --flash-circle-btn-size: clamp(62px, 13.6vh, 81px);
                --flash-answer-btn-gap: clamp(16px, 4vh, 24px);
                --flash-landscape-action-col: clamp(108px, 28vw, 148px);
                --flash-front-optical-shift: -0.1;
        }

        body {
                padding-top: max(2px, env(safe-area-inset-top));
                padding-bottom: max(2px, env(safe-area-inset-bottom));
                padding-left: max(6px, env(safe-area-inset-left));
                padding-right: max(6px, env(safe-area-inset-right));
        }

        .container,
        .container:has(#panelLearn.active) {
                gap: 2px;
                min-height: 0;
                overflow: hidden;
        }

        #panelLearn {
                gap: 2px;
                min-height: 0;
                overflow: hidden;
        }

        .learn-top {
                gap: 0;
        }

        .learn-tab-btn {
                min-height: 26px;
                padding: 2px 2px;
                font-size: clamp(11px, 3vh, 12px);
        }

        .bottom-nav-bar {
                flex-shrink: 0;
                padding-top: 2px;
        }

        .nav-btn {
                min-height: 30px;
                padding: 3px var(--space-xs);
                font-size: clamp(11px, 3vh, 13px);
        }

        .learn-body {
                flex: 1;
                min-height: 0;
                overflow: hidden;
        }

        .flash-study {
                flex: 1;
                min-height: 0;
                overflow: hidden;
                padding: 0;
                justify-content: flex-start;
                display: flex;
                flex-direction: column;
        }

        body.env-test .flash-study {
                padding-top: 0;
                padding-bottom: 0;
        }

        body.env-test .flash-test-mode-label {
                display: none;
        }

        body.env-test .flash-progress::before {
                content: "テストモード";
                font-size: clamp(10px, 2.8vh, 12px);
                font-weight: 600;
                letter-spacing: 0.04em;
                color: var(--color-text-muted);
                line-height: 1;
                flex-shrink: 0;
        }

        .flashcard-area {
                flex: 1;
                min-height: 0;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 0;
        }

        /* 上段: ヘッダー / 下段: 左=ことば・右=操作（高さは内容に合わせる） */
        .flashcard-stack {
                width: 100%;
                max-height: 100%;
                height: auto;
                align-self: center;
                display: grid;
                grid-template-columns: minmax(0, 1fr) var(--flash-landscape-action-col);
                grid-template-rows: auto auto;
                grid-template-areas:
                        "progress progress"
                        "card actions";
                align-items: stretch;
                column-gap: 8px;
                row-gap: 4px;
                overflow: hidden;
                padding-top: 0;
                padding-bottom: 0;
        }

        .flash-progress {
                grid-area: progress;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin-top: 0;
                padding: 0 2px 2px;
                min-height: 0;
        }

        body.env-test .flash-progress {
                justify-content: space-between;
        }

        .flash-progress-dots {
                gap: 6px;
                flex-shrink: 0;
        }

        .flash-progress-dot {
                width: 8px;
                height: 8px;
        }

        .flashcard-block {
                grid-area: card;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                gap: var(--flash-card-undo-gap);
                min-height: 0;
                height: 100%;
                width: 100%;
                overflow: visible;
        }

        .flashcard {
                grid-area: auto;
                display: grid;
                grid-template-rows: minmax(0, 1fr) minmax(0, 1.618fr);
                flex: 1 1 auto;
                min-height: 0;
                height: auto;
                max-height: calc(100dvh - 118px);
                width: 100%;
                aspect-ratio: auto;
                align-self: stretch;
                overflow: hidden;
        }

        .flashcard-front {
                padding: 0 var(--space-xs);
                grid-template-rows: 1.06fr auto 0.94fr;
        }

        .flashcard-back {
                padding: clamp(4px, 1.2vh, 8px) var(--space-xs);
        }

        .flash-action-slot {
                grid-area: actions;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: stretch;
                width: var(--flash-landscape-action-col);
                min-width: 0;
                min-height: 0;
                height: auto;
                align-self: stretch;
                margin-top: 0;
                gap: var(--flash-action-gap);
                padding: 0;
        }

        .flash-answer-btns {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: var(--flash-answer-btn-gap);
                width: 100%;
                flex: 1 1 auto;
                min-height: 0;
        }

        .flash-circle-btn {
                flex: 0 0 var(--flash-circle-btn-size);
                width: var(--flash-circle-btn-size);
                height: var(--flash-circle-btn-size);
        }

        .flash-undo-btn-study {
                flex-shrink: 0;
                align-self: flex-start;
                margin: 0;
        }

        .flash-undo-btn {
                width: var(--flash-undo-size);
                height: var(--flash-undo-size);
                flex: 0 0 var(--flash-undo-size);
                font-size: 14px;
        }
}