/* Meta Logic — Thumbnail Maker (1280×720) */

@font-face {
    font-family: "Hiragino W9";
    src: url("../images/font/ヒラギノ角ゴシック%20W9.ttc") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body.tm-body {
    font-family: var(--font-family-base);
    --tm-sticky-rail-top: var(--ml-header-offset);
    --tm-controls-max-height: calc(100vh - var(--ml-header-offset) - var(--space-3));
}

.tm-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.tm-main {
    max-width: var(--content-max-width-lg);
    margin: 0 auto;
    padding: var(--space-page-y) var(--space-page-x) var(--space-page-bottom);
}

.tm-hero {
    text-align: center;
    margin-bottom: var(--space-5);
}

.tm-hero h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: 900;
    background: linear-gradient(90deg, var(--color-text-inverse), var(--color-warning));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tm-hero p {
    margin: 0 auto;
    max-width: var(--content-max-width-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.tm-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: var(--space-5);
    align-items: start;
}

.tm-controls-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.tm-history-toolbar,
.tm-editor-dock {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-surface-1);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.tm-editor-dock__row {
    display: flex;
    gap: var(--space-2);
    width: 100%;
}

.tm-editor-dock__history {
    flex: 1 1 auto;
}

.tm-editor-dock__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.tm-editor-dock .tm-btn-history {
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 52px;
    padding: var(--space-2);
}

.tm-editor-dock .tm-btn-reset-all {
    flex: 1 1 100%;
    width: 100%;
    min-height: 44px;
    margin-top: var(--space-1);
}

.tm-btn-history {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-md);
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--duration-fast), border-color var(--duration-fast), opacity var(--duration-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tm-btn-history svg {
    display: block;
    flex-shrink: 0;
}

.tm-btn-history:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-text-accent);
}

.tm-btn-history:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-btn-history:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tm-btn-reset-all {
    flex: 1 1 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface-2);
    color: var(--color-danger);
    cursor: pointer;
    transition: background var(--duration-fast), border-color var(--duration-fast), opacity var(--duration-fast);
}

.tm-btn-reset-all:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.12);
    border-color: var(--color-danger);
}

.tm-btn-reset-all:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-btn-reset-all:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* プレビュー＋進む/戻る — スクロールでナビ下に張り付く（上に戻ると元の位置へ） */
.tm-sticky-rail {
    position: sticky;
    top: var(--tm-sticky-rail-top);
    z-index: calc(var(--z-sticky-toolbar) + 2);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.tm-sticky-wizard-host {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: var(--space-3);
    background: var(--color-bg-surface-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.tm-sticky-wizard-host .tm-wizard-nav {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.tm-sticky-wizard-host .tm-wizard-nav[hidden] {
    display: none !important;
}

.tm-preview-panel {
    background: var(--color-bg-surface-1);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.tm-preview-panel h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.tm-preview-meta {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.tm-canvas-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-md);
}

.tm-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.tm-canvas-wrap canvas.tm-dragging {
    cursor: grabbing;
}

.tm-canvas-wrap canvas.tm-resizing {
    cursor: nwse-resize;
}

.tm-canvas-wrap.tm-canvas-draggable canvas {
    cursor: grab;
}

.tm-hint-inline {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: var(--line-height-tight);
}

.tm-dev-sliders-block {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}

.tm-bg-mode {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.tm-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    cursor: pointer;
}

.tm-field-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
}

.tm-field input[type="color"] {
    width: 100%;
    height: var(--control-height-md);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-input);
    cursor: pointer;
}

.tm-field input[type="color"]:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-bg-asset-panel {
    width: 100%;
    min-width: 0;
}

.tm-bg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    align-content: start;
    max-height: min(36vh, 280px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: var(--space-1);
    scrollbar-gutter: stable;
    overscroll-behavior: auto !important;
}

@media (min-width: 380px) {
    .tm-bg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tm-bg-thumb {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: var(--color-bg-input);
    transition: border-color var(--duration-normal), box-shadow var(--duration-normal), transform var(--duration-normal);
}

.tm-bg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

.tm-bg-thumb:hover {
    border-color: var(--color-text-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-focus);
}

.tm-bg-thumb.is-active {
    border-color: #ff6f00;
    box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.45), var(--shadow-sm);
}

.tm-bg-thumb:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* 操作パネル — 縦長の内側スクロール（調整エリアを広く） */
.tm-controls {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: var(--tm-controls-max-height);
    max-height: var(--tm-controls-max-height);
    min-height: min(520px, var(--tm-controls-max-height));
    overflow: hidden;
    padding: 0;
    position: sticky;
    top: var(--tm-sticky-rail-top);
    align-self: start;
    touch-action: auto;
}

.tm-controls-scroll,
.control-panel-inner {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 var(--space-2) var(--space-3) 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto !important;
    touch-action: pan-y;
    scrollbar-gutter: stable;
}

/* --- 狭い画面: ページ1本スクロール・プレビュー＋進む/戻るを上に張り付け --- */
@media (max-width: 1024px) {
    /* fixed 背景は sticky / JS 固定を壊す（DevTools スマホ表示含む） */
    body.tm-body {
        background-attachment: scroll !important;
    }

    body.tm-body main.tm-main {
        overflow: visible;
        flex: none;
        min-height: 0;
    }

    .tm-workspace {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .tm-pinned-history-toolbar {
        display: none;
        flex-direction: row;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding: 0;
    }

    .tm-pinned-history-toolbar:not([hidden]) {
        display: flex;
    }

    .tm-pinned-history-toolbar .tm-editor-dock__label {
        display: none;
    }

    .tm-pinned-history-toolbar .tm-btn-history {
        flex: 1;
        flex-direction: row;
        min-height: var(--control-hit-min);
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .tm-sticky-wizard-host {
        position: relative;
        z-index: 1;
    }

    .tm-controls-column {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        position: relative;
        z-index: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .tm-controls {
        position: static;
        height: auto;
        max-height: none;
        min-height: 0;
        overflow: visible;
    }

    .tm-controls-scroll,
    .control-panel-inner {
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .tm-editor-dock {
        order: 10;
        flex-direction: column;
        gap: var(--space-3);
        margin-top: var(--space-2);
        margin-bottom: var(--space-6);
        padding: var(--space-4);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
    }

    .tm-bg-grid,
    .tm-char-step2-grid,
    .tm-layer-list {
        max-height: none;
        overflow-y: visible;
    }

    .tm-finish-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .tm-finish-actions h3 {
        margin: 0 0 var(--space-1);
    }

    .tm-finish-actions .tm-btn-download,
    .tm-finish-actions .tm-btn-camera-roll,
    .tm-finish-actions .tm-btn-copy {
        width: 100%;
    }

    /* --- スマホ表示時: キャンバス ＆ 矢印単独固定 --- */
    /* 1. 親コンテナ自体の固定を解除（次へ/戻るボタン等をスクロールで流すため） */
    .tm-sticky-rail {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. キャンバスと矢印を内包するピン留めコア要素のみを画面上部に完全固定 */
    .tm-sticky-rail-pin {
        position: fixed !important;
        top: var(--tm-sticky-rail-top, 60px) !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: #0b0b0b !important;
        padding: var(--space-3) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
    }

    /* 3. プレビューの不要なテキスト見出しやメタ情報をスマホ時のみ非表示 */
    .tm-preview-panel h2,
    .tm-preview-panel .tm-preview-head,
    .tm-preview-meta {
        display: none !important;
    }

    .tm-preview-panel {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* 4. 合体させたUndo/Redoボタンを矢印アイコンだけのコンパクト仕様に */
    .tm-pinned-history-toolbar {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--space-3) !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: var(--space-1) 0 0 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .tm-pinned-history-toolbar .tm-btn-history {
        flex: 1 !important;
        max-width: 120px !important;
        min-height: var(--control-hit-min) !important;
        height: auto !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid var(--color-border-subtle) !important;
        border-radius: var(--radius-sm) !important;
    }

    .tm-pinned-history-toolbar .tm-editor-dock__label {
        display: none !important;
    }

    .tm-pinned-history-toolbar .tm-btn-history svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    /* 5. 固定プレビュー分のヒーロー押し下げ（実測高さは JS で設定） */
    .tm-hero {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
        margin-bottom: var(--space-4) !important;
    }

    .tm-sticky-rail-flow-spacer {
        display: block;
        width: 100%;
        flex-shrink: 0;
    }

    body.tm-body.ml-vv-keyboard-open .tm-sticky-rail-pin {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* 6. 次へ／戻るウィザードは固定せず自然にスクロール */
    .tm-sticky-wizard-host {
        position: relative !important;
        z-index: 1 !important;
        margin-top: var(--space-3) !important;
        margin-bottom: var(--space-3) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    .tm-wizard-progress {
        position: relative !important;
        z-index: 1 !important;
        margin-bottom: var(--space-4) !important;
    }

    .tm-controls-column {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
        gap: var(--space-4) !important;
    }

    /* 巨大空白を招く要素の完全隠蔽 */
    .tm-sticky-rail-placeholder,
    .tm-sticky-rail-placeholder.is-active,
    .tm-sticky-rail-sentinel {
        display: none !important;
    }

    .tm-controls {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .tm-controls-scroll,
    .control-panel-inner {
        overflow: visible !important;
        max-height: none !important;
        padding: 0 !important;
    }
}

/* スマホ実機・DevTools: visualViewport が tm-controls に height を付与すると sticky が壊れる */
@media (max-width: 1024px) {
    body.tm-body .tm-controls.ml-vv-keyboard,
    body.tm-body .tm-controls-scroll.ml-vv-keyboard,
    body.tm-body .control-panel-inner.ml-vv-keyboard {
        height: auto !important;
        max-height: none !important;
    }
}

/* --- 広い画面（PC）: 2カラム・右のみ内側スクロール --- */
@media (min-width: 1025px) {
    .tm-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        gap: var(--space-5);
        align-items: start;
    }

    .tm-sticky-rail {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: var(--tm-sticky-rail-top);
        background: transparent;
        border-radius: 0;
        padding-bottom: 0;
        box-shadow: none;
    }

    .tm-sticky-rail-pin.is-preview-pinned {
        position: static;
        left: auto !important;
        width: auto !important;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .tm-pinned-history-toolbar {
        display: none !important;
    }

    .tm-controls-column {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .tm-editor-dock {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 0;
        margin-bottom: 0;
        padding: var(--space-2) var(--space-3);
        border: none;
        box-shadow: var(--shadow-sm);
    }

    .tm-editor-dock__row {
        display: contents;
    }

    .tm-editor-dock .tm-btn-history {
        flex: 1;
        flex-direction: row;
        min-height: var(--control-hit-min);
        gap: var(--space-2);
    }

    .tm-editor-dock__label {
        display: none;
    }

    .tm-editor-dock .tm-btn-reset-all {
        flex: 1 1 100%;
        margin-top: 0;
        min-height: var(--control-hit-min);
    }
}

.tm-saved-in-scroll.ml-saved-data-panel {
    margin-top: var(--space-4);
    margin-bottom: 0;
}

/* サムネメイカー内 共通スクロールバー（半透明・領域常時確保） */
.tm-scroll,
.tm-controls-scroll,
.control-panel-inner,
.tm-bg-grid,
.tm-char-step2-grid,
.tm-char-modal-grid,
.tm-layer-list,
.tm-char-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.tm-controls-scroll > .tm-guide-box,
.tm-controls-scroll > .tm-section {
    margin-bottom: var(--space-4);
}

.tm-controls-scroll > .tm-section:last-child {
    margin-bottom: 0;
}

.tm-section {
    background: var(--color-bg-surface-2);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.tm-section h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tm-field {
    margin-bottom: var(--space-3);
}

.tm-field:last-child {
    margin-bottom: 0;
}

.tm-field label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
    font-weight: var(--font-weight-semibold);
}

.tm-field select,
.tm-field input[type="text"] {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    line-height: 1.2;
    box-sizing: border-box;
}

.tm-field select:focus,
.tm-field input[type="text"]:focus {
    border-color: var(--color-text-accent);
    box-shadow: var(--shadow-focus);
}

.tm-field select:focus-visible,
.tm-field input[type="text"]:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-field select:focus:not(:focus-visible),
.tm-field input[type="text"]:focus:not(:focus-visible) {
    outline: none;
}

.tm-sliders {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}

.tm-sliders summary {
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-2);
    user-select: none;
}

.tm-slider-row {
    margin-bottom: var(--space-3);
}

.tm-slider-row label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-1);
}

.tm-slider-row label span {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.tm-slider-row input[type="range"] {
    width: 100%;
    accent-color: var(--color-accent);
}

.tm-btn-copy {
    width: 100%;
    padding: var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    cursor: pointer;
    background: linear-gradient(135deg, #c62828 0%, #ff6f00 100%);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 16px rgba(255, 111, 0, 0.35);
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}

.tm-btn-copy:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-btn-copy:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 111, 0, 0.45);
}

.tm-dev-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    background: var(--color-bg-input);
    color: var(--color-warning);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--space-1);
    margin-left: var(--space-2);
    vertical-align: middle;
}

/* キャラ選択ボタン */
.tm-char-pick-btn {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface-1);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-normal), background var(--duration-normal);
}

.tm-char-pick-btn:hover {
    border-color: var(--color-text-accent);
    background: rgba(30, 87, 153, 0.2);
}

.tm-char-pick-btn:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* マイ写真 */
.tm-btn-photo-upload-wrap {
    display: block;
    cursor: pointer;
}

.tm-btn-photo-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border-strong);
    background: rgba(90, 168, 214, 0.12);
    color: var(--color-text-accent);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.tm-btn-photo-upload-wrap:hover .tm-btn-photo-upload {
    border-color: var(--color-text-accent);
    background: rgba(90, 168, 214, 0.2);
}

.tm-photo-sliders-root {
    margin-top: var(--space-3);
}

.tm-photo-layer-block {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
}

.tm-photo-layer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tm-photo-layer-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

.tm-photo-layer-remove {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(42, 21, 21, 0.9);
    color: var(--color-danger);
    cursor: pointer;
    font-family: inherit;
}

.tm-photo-layer-remove:hover {
    border-color: var(--color-danger);
}

.tm-photo-layer-remove:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* キャラグリッドモーダル */
.tm-char-modal[hidden] {
    display: none !important;
}

.tm-char-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-5) var(--space-3);
    overflow-y: scroll;
    scrollbar-gutter: stable;
    touch-action: pan-y;
}

.tm-char-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

.tm-char-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    max-height: min(92vh, 880px);
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.tm-char-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.tm-char-modal-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
}

.tm-char-modal-close {
    width: var(--control-height-md);
    height: var(--control-height-md);
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.tm-char-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.tm-char-modal-close:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-char-modal-search {
    margin: var(--space-3) var(--space-4) 0;
    width: calc(100% - var(--space-8));
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
}

.tm-char-modal-search:focus {
    border-color: var(--color-text-accent);
    box-shadow: var(--shadow-focus);
}

.tm-char-modal-search:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-char-modal-search:focus:not(:focus-visible) {
    outline: none;
}

.tm-char-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
    overflow-y: scroll;
    flex: 1;
    min-height: 0;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    overscroll-behavior: auto !important;
}

.tm-char-modal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
    cursor: pointer;
    transition: border-color var(--duration-normal), transform var(--duration-fast), box-shadow var(--duration-normal);
    font-family: inherit;
    color: var(--color-text-primary);
    text-align: center;
}

.tm-char-modal-cell:hover {
    border-color: var(--color-text-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-focus);
}

.tm-char-modal-cell:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-char-modal-cell img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.tm-char-modal-caption {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-char-modal-cell.is-none {
    justify-content: center;
    min-height: 108px;
    border: 1px dashed var(--color-border-default);
    color: var(--color-text-tertiary);
}

.tm-char-modal-none-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--space-1);
}

/* display:flex が [hidden] の display:none を上書きしないよう明示 */
.tm-char-modal-cell[hidden],
.tm-char-step2-cell[hidden],
.tm-bg-modal-cell[hidden] {
    display: none !important;
}

/* ステップ2 インライングリッド */
.tm-char-step2-section {
    padding-bottom: var(--space-1);
}

.tm-char-step2-search {
    width: 100%;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
}

.tm-char-step2-search:focus {
    border-color: var(--color-text-accent);
    box-shadow: var(--shadow-focus);
}

.tm-char-step2-search:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-char-step2-search:focus:not(:focus-visible) {
    outline: none;
}

.tm-char-step2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--space-2);
    max-height: min(52vh, 420px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: var(--space-1) var(--space-2) var(--space-2) var(--space-1);
    margin: 0 calc(var(--space-1) * -1);
    scrollbar-gutter: stable;
    touch-action: pan-y;
    overscroll-behavior: auto !important;
}

.tm-char-step2-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-2) var(--space-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
    cursor: pointer;
    transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
    font-family: inherit;
    color: var(--color-text-primary);
}

.tm-char-step2-cell:hover {
    border-color: var(--color-text-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-focus);
}

.tm-char-step2-cell:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-char-step2-cell:active {
    transform: scale(0.97);
}

.tm-char-step2-cell img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.tm-char-step2-caption {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

/* 5ステップ プログレスバー */
.tm-wizard-progress {
    margin-bottom: var(--space-5);
    padding: 0 var(--space-2);
}

.tm-progress-list {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.tm-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 56px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-tertiary);
    transition: border-color var(--duration-normal), background var(--duration-normal), color var(--duration-normal);
}

.tm-progress-item.is-active {
    border-color: var(--color-text-accent);
    background: rgba(30, 87, 153, 0.4);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-focus);
}

.tm-progress-item.is-done {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.25);
    color: var(--color-success);
}

.tm-progress-num {
    font-size: var(--font-size-md);
    font-weight: 900;
    line-height: 1;
}

.tm-progress-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

.tm-progress-connector {
    width: var(--space-5);
    height: 2px;
    background: linear-gradient(90deg, var(--color-border-subtle), var(--color-border-default));
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .tm-progress-connector {
        display: none;
    }
    .tm-progress-list {
        gap: var(--space-1);
    }
    .tm-progress-item {
        min-width: 48px;
        padding: var(--space-1) var(--space-2);
    }
    .tm-progress-label {
        font-size: 0.65rem;
    }
}

/* 案内メッセージ */
.tm-guide-box {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(90, 168, 214, 0.35);
    background: linear-gradient(135deg, rgba(30, 87, 153, 0.35) 0%, rgba(18, 18, 28, 0.9) 100%);
    box-shadow: var(--shadow-sm);
}

.tm-guide-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-base);
    font-weight: 900;
    color: var(--color-text-accent);
}

.tm-guide-text {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}

.tm-guide-step5-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    background: rgba(90, 168, 214, 0.18);
    border: 1px solid rgba(90, 168, 214, 0.45);
    color: var(--color-text-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.tm-photo-empty {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border-default);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
    line-height: var(--line-height-normal);
}

.ml-dev-section {
    margin-top: var(--space-3);
    padding-top: 0;
    border-top: none;
    opacity: 1;
}

.ml-dev-section .tm-btn-copy,
.ml-dev-section .hm-btn-dev-copy {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border-default);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-tertiary);
    box-shadow: none;
}

.ml-dev-section .tm-btn-copy:hover,
.ml-dev-section .hm-btn-dev-copy:hover {
    transform: none;
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.06);
}

.ml-dev-section .hm-dev-hint {
    font-size: 0.7rem;
    margin-top: var(--space-2);
}

.tm-wizard-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}

.tm-wizard-nav-final {
    gap: var(--space-3);
}

.tm-btn-next {
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    background: linear-gradient(135deg, var(--color-accent-gradient-start) 0%, var(--color-accent-gradient-end) 100%);
    color: var(--color-text-inverse);
    box-shadow: 0 6px 20px rgba(90, 168, 214, 0.4);
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}

.tm-btn-next:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-btn-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(90, 168, 214, 0.5);
}

.tm-btn-back {
    width: 100%;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    cursor: pointer;
}

.tm-btn-back:hover {
    border-color: var(--color-text-accent);
    color: var(--color-text-primary);
}

.tm-btn-back:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-btn-download {
    width: 100%;
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    cursor: pointer;
    background: linear-gradient(135deg, #2e7d32 0%, #66bb6a 100%);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 16px rgba(102, 187, 106, 0.35);
}

.tm-btn-download:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-btn-download:hover {
    filter: brightness(1.06);
}

/* カメラロール保存ボタン */
.tm-btn-camera-roll {
    width: 100%;
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(90, 168, 214, 0.45);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    cursor: pointer;
    background: rgba(90, 168, 214, 0.12);
    color: rgba(90, 168, 214, 0.95);
    transition: background var(--duration-fast), border-color var(--duration-fast);
}
.tm-btn-camera-roll:hover {
    background: rgba(90, 168, 214, 0.2);
    border-color: rgba(90, 168, 214, 0.7);
}
.tm-btn-camera-roll:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-step-panel[hidden] {
    display: none !important;
}

/* レイヤーパネル（header_maker 準拠） */
.tm-layer-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 280px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: var(--space-1);
    scrollbar-gutter: stable;
    touch-action: pan-y;
    overscroll-behavior: auto !important;
}

.tm-object-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: none;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: background var(--duration-fast), box-shadow var(--duration-fast);
}

.tm-object-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.tm-object-row.is-selected {
    background: rgba(30, 87, 153, 0.35);
    box-shadow: inset 0 0 0 1px rgba(90, 168, 214, 0.55);
}

.tm-object-row.is-hidden-layer {
    opacity: 0.55;
}

.tm-object-row.is-hidden-layer .tm-object-name {
    color: var(--color-text-secondary);
}

.tm-object-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-object-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    flex-shrink: 0;
}

.tm-icon-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
    transition: var(--duration-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tm-icon-btn svg {
    display: block;
    flex-shrink: 0;
}

.tm-icon-btn:hover:not(:disabled) {
    border-color: var(--color-text-accent);
    color: #7dd3fc;
}

.tm-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tm-icon-btn:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-icon-btn-danger:hover {
    border-color: var(--color-danger);
    color: #fecaca;
}

/* ステップ4 — メインテキスト文字スタイル */
.tm-text-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.tm-text-style-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: rgba(0, 0, 0, 0.28);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}

.tm-text-style-btn:hover {
    border-color: rgba(90, 168, 214, 0.45);
}

.tm-text-style-btn.is-active {
    border-color: var(--color-text-accent);
    box-shadow: var(--shadow-focus);
    background: rgba(30, 87, 153, 0.35);
}

.tm-text-style-btn:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.tm-text-style-swatch {
    display: block;
    height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.tm-text-style-label {
    line-height: 1.25;
}

.tm-style-preview-red-yellow .tm-text-style-swatch {
    background: linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #ffe600 50%, #ffe600 100%);
}

.tm-style-preview-yellow-red .tm-text-style-swatch {
    background: linear-gradient(90deg, #ffe600 0%, #ffe600 50%, #ff0000 50%, #ff0000 100%);
}

.tm-style-preview-yellow .tm-text-style-swatch {
    background: #ffe600;
}

.tm-style-preview-red .tm-text-style-swatch {
    background: #ff0000;
}

.tm-style-preview-yellow-orange .tm-text-style-swatch {
    background: linear-gradient(180deg, #ffe600 0%, #ff8c00 100%);
}

.tm-style-preview-red-black .tm-text-style-swatch {
    background: linear-gradient(180deg, #ff0000 0%, #000000 100%);
}

.tm-style-preview-white .tm-text-style-swatch {
    background: #ffffff;
}

.tm-style-preview-custom .tm-text-style-swatch {
    background:
        linear-gradient(135deg, #ffe600 25%, transparent 25%),
        linear-gradient(225deg, #ff0000 25%, transparent 25%),
        linear-gradient(45deg, #5aa8d6 25%, transparent 25%),
        linear-gradient(315deg, #a855f7 25%, #1e293b 25%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 0, 8px -8px, 0 8px;
}

.tm-custom-style-panel {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: none;
    background: rgba(0, 0, 0, 0.2);
}

.tm-custom-mode-row {
    margin-bottom: var(--space-3);
}

/* キャラクター動的追加・削除 UI */
.tm-extra-char-block {
    margin-top: var(--space-3);
}

.tm-extra-char-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    cursor: pointer;
}

.tm-extra-char-summary .tm-btn-delete-character {
    flex-shrink: 0;
}

.tm-btn-add-character,
.hm-btn-add-character {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: var(--space-2) !important;
    margin-top: var(--space-3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px dashed var(--color-border-subtle) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-muted) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tm-btn-add-character:hover,
.hm-btn-add-character:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--color-text-muted) !important;
    color: var(--color-text) !important;
}

.tm-btn-delete-character,
.hm-btn-delete-character {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-1) var(--space-2) !important;
    cursor: pointer !important;
    font-size: var(--font-size-xs) !important;
}

.tm-btn-delete-character:hover,
.hm-btn-delete-character:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
}

.tm-btn-delete-character:disabled,
.hm-btn-delete-character:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (min-width: 1025px) {
    .tm-controls-column {
        max-height: calc(100vh - var(--tm-sticky-rail-top, 88px) - var(--space-6));
        min-height: 0;
    }

    .tm-controls-scroll,
    .control-panel-inner {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* 追加キャラ操作ボタン行 */
.tm-extra-char-actions {
    display: block !important;
    width: 100% !important;
    margin-top: var(--space-3);
}

.tm-extra-char-actions button {
    width: 100% !important;
}

/* カラーモードトグル（単色 / 2色） */
.tm-color-ui-toggle-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.tm-toggle-btn {
    flex: 1;
    min-height: var(--control-hit-min);
    padding: var(--space-2) var(--space-3);
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--color-border-subtle) !important;
    color: var(--color-text-muted) !important;
    font-family: inherit;
    font-size: var(--font-size-sm);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tm-toggle-btn.active {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #ffffff !important;
}

.tm-toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 入力欄の1行スマート化（上書き保証） */
.tm-field input[type="text"] {
    width: 100% !important;
    height: 36px !important;
    padding: 6px 10px !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* ================================================
   "全ての画像から選ぶ" button (bg / char sections)
   ================================================ */
.tm-btn-show-all {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
    box-sizing: border-box;
}
.tm-btn-show-all:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-text-accent);
    color: var(--color-text-primary);
}

/* ================================================
   bg グリッド — 5件プレビュー（スクロールなし）
   ================================================ */
.tm-bg-grid {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* ================================================
   背景画像ピッカーモーダルのグリッド
   ================================================ */
.tm-bg-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    overflow-y: scroll;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.tm-bg-modal-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
    transition: border-color var(--duration-fast), background var(--duration-fast);
    padding: 0;
}
.tm-bg-modal-cell:hover { border-color: var(--color-text-accent); }
.tm-bg-modal-cell:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.tm-bg-modal-cell.is-active { border-color: #ff6f00; box-shadow: 0 0 0 2px rgba(255, 111, 0, 0.45); }

.tm-bg-modal-cell img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.tm-bg-modal-caption {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: center;
    padding: 4px 8px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* ================================================
   キャラクター クイック選択グリッド (step 3 / 5)
   ================================================ */
.tm-char-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
    width: 100%;
    margin-bottom: var(--space-2);
}

.tm-char-quick-cell {
    aspect-ratio: 1;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    overflow: hidden;
    padding: 2px;
    font-family: inherit;
    transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.tm-char-quick-cell:hover {
    border-color: var(--color-text-accent);
    transform: translateY(-2px);
}
.tm-char-quick-cell:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.tm-char-quick-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ===================================================
   ピンズ UI
   =================================================== */
.tm-asset-category-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: var(--space-3) 0 var(--space-2);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.tm-pin-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
    width: 100%;
    margin-bottom: var(--space-2);
}

.tm-pin-quick-grid button {
    aspect-ratio: 1;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    overflow: hidden;
    padding: 3px;
    font-family: inherit;
    transition: border-color 0.15s, transform 0.1s;
}

.tm-pin-quick-grid button:hover {
    border-color: var(--color-text-accent);
    transform: translateY(-2px);
}

.tm-pin-quick-grid button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tm-pin-sliders-root .tm-photo-layer-block {
    margin-top: var(--space-3);
}