/* リセットと基本スタイル */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary-color: #3498db;
    --primary-rgb: 52, 152, 219;
    --primary-hover: #20638f;
    --success-color: #2eb84e;
    --success-hover: #1c7430;
    --danger-color: #d14747;
    --danger-hover: #ad1d1d;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    /* ボタン・ホバー・ドロップゾーン・パネル等の共通背景 */
    --btn-bg: #f1f5f9;
    --border-color: #e2e8f0;
    --text-color: #1e293b;
    --text-muted: #64748b;
    --selected-bg: #eff6ff;
    /* アクティブ・バッジ等のアクセント背景 */
    --accent-bg: #dbeafe;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --dialog-backdrop-blur: 2px;
    /* 状態色（disabled, warning, danger/success 背景） */
    --disabled-color: #94a3b8;
    --border-light: #cbd5e1;
    --warning-color: #d45511;
    --warning-bg: #fff7ed;
    --danger-bg: #fef2f2;
    --success-bg: #f0fdf4;
    --success-border: #dcfce7;
}

html {
    font-size: 62.5%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.app-wrapper {
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    min-height: 100vh;
}

.app-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

/* タイトルバナー */
.title-banner {
    position: relative;
    background: linear-gradient(135deg, #0feeb4 0%, #0372d8 100%);
    text-align: center;
    padding: 28px 20px 24px;
    color: #fff;
}

/* 言語切り替え（サブタイトル下・中央揃え） */
.lang-switcher {
    position: relative;
    margin-top: 12px;
    text-align: center;
    font-size: 1.28rem;
}

.lang-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    color: #fff;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.lang-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

.lang-switcher-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.7);
}

.lang-switcher-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.lang-switcher-btn[aria-expanded="true"] .lang-switcher-chevron {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    min-width: 140px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.lang-dropdown[hidden] {
    display: none;
}

.lang-dropdown-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: #333;
    font-size: 1.36rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s;
}

.lang-dropdown-option:hover {
    background: #f0f0f0;
}

.lang-dropdown-option:first-child {
    border-radius: 8px 8px 0 0;
}

.lang-dropdown-option:last-child {
    border-radius: 0 0 8px 8px;
}

.lang-dropdown-option.is-current {
    font-weight: 600;
    background: rgba(3, 114, 216, 0.1);
    color: #0372d8;
}

.title-banner h2 {
    font-size: 2.96rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.title-banner-subtitle {
    margin-top: 6px;
    font-size: 1.44rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
}

/* 設定エリア */
.settings-area {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* ドロップゾーン */
.drop-zone {
    flex: 1;
    min-width: 280px;
    background: var(--btn-bg);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.drop-zone:hover {
    border-color: var(--primary-color);
    background: var(--accent-bg);
}

.drop-zone.drag-over {
    border-color: var(--primary-color);
    background: var(--accent-bg);
    transform: scale(1.01);
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.drop-icon {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.drop-zone p {
    color: var(--text-muted);
    font-size: 1.52rem;
}

.drop-hint {
    font-size: 1.2rem !important;
    color: var(--text-muted);
}

.file-types {
    font-size: 1.28rem !important;
    color: var(--text-muted);
    margin-top: -8px;
}

.local-processing-note {
    font-size: 0.96rem !important;
    font-style: italic;
    color: var(--text-muted);
    opacity: 0.9;
    line-height: 1.4;
    margin-top: 10px;
    max-width: 420px;
}

/* 出力設定 */
.output-settings {
    flex: 1;
    min-width: 280px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    position: relative;
}

.output-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.output-settings-header h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.btn-settings {
    padding: 6px;
    background: var(--btn-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.btn-settings:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-settings svg {
    width: 18px;
    height: 18px;
}

.output-settings h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-color);
}

.setting-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 1.44rem;
}

.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.setting-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.setting-row-page-size {
    align-items: center;
}

.setting-row-page-size .setting-item {
    flex-shrink: 0;
}

.setting-row-page-size .size-input-group {
    flex-shrink: 0;
}

.size-input-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.size-input-inline .size-label {
    font-size: 1.44rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.size-input-inline input[type="number"] {
    width: 72px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1.36rem;
    text-align: right;
}

.size-input-inline input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
}

.size-input-inline input[type="number"]:disabled {
    background: var(--bg-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.size-input-inline .size-sep {
    font-size: 1.44rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.size-input-inline .unit-label {
    font-size: 1.36rem;
    color: var(--text-color);
    min-width: 24px;
    flex-shrink: 0;
}

.size-input-inline .alt-value {
    font-size: 1.28rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.setting-row[hidden] {
    display: none;
}

.setting-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.setting-item label {
    font-size: 1.44rem;
    color: var(--text-muted);
}

.setting-item select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    font-size: 1.44rem;
    cursor: pointer;
}

.setting-item select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* サイズ入力欄 */
.size-inputs {
    flex-direction: column;
    gap: 8px;
}

.unit-toggle-group {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.unit-btn {
    padding: 4px 12px;
    font-size: 1.28rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.unit-btn:hover {
    background: var(--btn-bg);
    color: var(--text-color);
}

/* トグルボタン共通 active スタイル */
.unit-btn.active,
.orientation-btn.active,
.fit-mode-btn.active,
.btn-convert-type.active,
.btn-orientation-option.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.unit-action-btn {
    padding: 4px 10px;
    font-size: 1.2rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.unit-action-btn:hover {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.unit-action-btn:disabled {
    background: var(--btn-bg);
    color: #ccc;
    cursor: not-allowed;
    border-color: var(--border-color);
}

.toggle-separator {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 8px;
}

.orientation-btn {
    padding: 4px 12px;
    font-size: 1.28rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.orientation-btn:hover {
    background: var(--btn-bg);
    color: var(--text-color);
}


.orientation-btn:disabled {
    background: var(--btn-bg);
    color: #ccc;
    cursor: not-allowed;
    border-color: var(--border-color);
}

.size-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.size-input-group>label {
    width: 36px;
    font-size: 1.44rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.size-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.size-input-wrapper input[type="number"] {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1.36rem;
    text-align: right;
}

.size-input-wrapper input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
}

.size-input-wrapper input[type="number"]:disabled {
    background: var(--bg-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.unit-label {
    font-size: 1.36rem;
    color: var(--text-color);
    min-width: 24px;
}

.alt-value {
    font-size: 1.28rem;
    color: var(--text-muted);
    margin-left: 4px;
}

/* ボタン */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.52rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn-sm svg {
    width: 16px;
    height: 16px;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

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

.btn-success {
    background: var(--success-color);
    color: white;
    width: 100%;
}

.btn-success:hover:not(:disabled) {
    background: var(--success-hover);
}

.btn-success:disabled {
    background: var(--disabled-color);
    cursor: not-allowed;
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-hover);
}

.btn-danger:disabled {
    background: var(--disabled-color);
    cursor: not-allowed;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 1.36rem;
}

.btn-icon {
    padding: 6px;
    background: var(--btn-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-icon:hover:not(:disabled) {
    background: var(--btn-bg);
    color: var(--text-color);
}

.btn-icon.btn-primary {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-icon.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-icon.btn-danger {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.btn-icon.btn-danger:hover:not(:disabled) {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
}

/* パネルヘッダーの主要ボタン：アイコン色（currentColor）を常に白で固定 */
#headerFileAddBtn,
#downloadPdfBtn,
#sharePdfBtn,
#clearAllBtn {
    color: #fff;
}

#headerFileAddBtn:hover:not(:disabled),
#downloadPdfBtn:hover:not(:disabled),
#sharePdfBtn:hover:not(:disabled),
#clearAllBtn:hover:not(:disabled),
#headerFileAddBtn:active:not(:disabled),
#downloadPdfBtn:active:not(:disabled),
#sharePdfBtn:active:not(:disabled),
#clearAllBtn:active:not(:disabled),
#headerFileAddBtn:focus-visible,
#downloadPdfBtn:focus-visible,
#sharePdfBtn:focus-visible,
#clearAllBtn:focus-visible {
    color: #fff;
}

.btn-icon.btn-danger:disabled {
    background: var(--disabled-color);
    border-color: var(--disabled-color);
    cursor: not-allowed;
}


.btn-icon.btn-delete:hover {
    background: var(--danger-bg);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

/* メインエリア */
.main-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

/* ページ一覧パネル */
.page-list-panel {
    flex: 1;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.panel-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* 親の角丸に合わせて欠け防止 */
}

.panel-header-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

.panel-header-center {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.panel-header-right {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.page-list {
    flex: 1;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: background 0.2s ease, border-color 0.2s ease;
    /* ドラッグ操作と干渉しないようテキスト選択を禁止 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.page-list.drag-over {
    background: var(--accent-bg);
    outline: 2px dashed var(--primary-color);
    outline-offset: -2px;
}

.main-area .license-link {
    flex-shrink: 0;
    font-size: 1.28rem;
    color: var(--text-muted);
    text-decoration: none;
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.main-area .license-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* タッチドラッグ時のゴースト（長押しで表示） */
.touch-drag-ghost {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md, 6px);
}

/* ファイルドロップ時の挿入位置インジケーター（ページとページの間の枠） */
.drop-indicator {
    flex-shrink: 0;
    height: 24px;
    margin: 2px 0;
    border: 2px dashed var(--primary-color);
    border-radius: var(--radius-md);
    background: var(--accent-bg);
    pointer-events: none;
}

.empty-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 1.52rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none; /* ドラッグイベントを親の #pageList に透過させる */
}

.empty-message p {
    margin: 0;
    font-size: 1.36rem;
}

.empty-message .btn {
    padding: 6px 10px;
    font-size: 1.36rem;
    gap: 4px;
    pointer-events: auto; /* ボタンのクリックは有効に保つ */
}

.empty-message .btn svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 2px;
}

.empty-message-icon {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-bottom: 4px;
}

/* ファイルあり時は空メッセージをコンパクトに（常に一番下に表示） */
.page-list:has(.page-item) .empty-message {
    padding: 16px 20px;
}

.page-list:has(.page-item) .empty-message-icon {
    width: 24px;
    height: 24px;
}

.panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-color);
}

/* ページアイテム */
.page-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    background: var(--bg-color);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    /* タッチ：長押しドラッグのためにコンテキストメニュー等を抑制 */
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.page-item:hover {
    background: var(--btn-bg);
}

.page-item.selected {
    background: var(--selected-bg);
    border-color: var(--primary-color);
}

.page-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.page-item.drag-over {
    border-color: var(--primary-color);
    background: var(--accent-bg);
}

/* ページ番号 + 選択チェックボックス（縦並び） */
.page-select-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ページ番号：.page-item の左上に張り付くバッジ */
.page-select-cell .page-number {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--btn-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    line-height: 1;
}

/* ページ選択チェックボックス（アイコンのみ、ボタン枠なし） */
.btn-select-checkbox {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 -6px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
    position: relative;
}

.btn-select-checkbox:hover {
    color: var(--primary-color);
}

.btn-select-checkbox svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
}

/* オフ時: チェックなし表示、オン時: チェックあり非表示 */
.btn-select-checkbox .icon-on {
    display: none;
}

/* オフ時: チェックなし非表示、オン時: チェックあり表示 */
.page-item.selected .btn-select-checkbox .icon-off {
    display: none;
}

.page-item.selected .btn-select-checkbox .icon-on {
    display: block;
}

/* 選択状態: アイコン色を青に */
.page-item.selected .btn-select-checkbox {
    color: var(--primary-color);
}

.page-item.selected .btn-select-checkbox:hover {
    color: var(--primary-hover);
}

.page-thumbnail-wrap {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 用紙形状（出力サイズのアスペクト比を反映） */
.page-thumbnail-paper {
    position: relative;
    background: white;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    /* width/height は JS で設定 */
}

/* コンテンツ領域（用紙内で配置・スケール） */
.page-thumbnail-content {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* position/size は applyScalePositionToElement で設定 */
}

.page-thumbnail {
    display: block;
    /* width, height, object-fit は JS で設定 */
}

.page-info {
    flex: 1;
    min-width: 0;
    margin-left: -6px;
    position: relative;
}

/* 回転・変換アイコンを page-info の右上に配置 */
.page-info-status-badges {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-info-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ステータスバッジがある時はヘッダーに余白を確保（回転・変換・GPS） */
.page-info:has(.page-info-status-badges) .page-info-header {
    padding-right: 90px;
}

.page-type-badge {
    display: inline-block;
    font-size: 1.04rem;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--accent-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

.page-info-header .page-type-badge {
    flex-shrink: 0;
}

/* PDFページ数バッジ（複数ページのPDFの場合のみ表示） */
.page-count-badge {
    display: inline-block;
    background: var(--accent-bg);
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-left: -3px;
    padding: 1px 2px;
    text-align: center;
}

/* GPSバッジ（GPS情報がある画像に表示。ボタンとしてクリックでGPS情報維持をトグル） */
.page-gps-badge {
    background: var(--accent-bg);
    color: var(--text-muted);
    font-weight: 600;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
}

/* status-badges 内のGPSバッジ（回転・変換バッジと同じ高さ） */
.page-gps-badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    box-sizing: border-box;
}

.page-gps-badge .page-gps-icon {
    width: 12px;
    height: 12px;
    color: inherit;
    flex-shrink: 0;
}

.page-gps-badge-stripped .page-gps-icon {
    color: var(--disabled-color);
}

.page-gps-badge:hover {
    filter: brightness(0.95);
}

.page-gps-badge:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

/* GPSバッジ（GPS情報を維持しない=削除する場合、グレーアウトで「出力から除外」を示す） */
.page-gps-badge-stripped {
    position: relative;
    background: #e5e7eb;
    color: var(--disabled-color);
    opacity: 0.85;
}

/* グレー時：アイコンの上にオレンジのバツ印を重ねる */
.page-gps-badge-stripped::before,
.page-gps-badge-stripped::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 1px;
    background: var(--warning-color);
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.page-gps-badge-stripped::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.page-gps-badge-stripped::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 回転バッジ（アイコンのみ、90/180/270度で同じアイコン表示、オレンジ系。ボタンとしてクリック可能） */
.page-rotation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    box-sizing: border-box;
    background: var(--warning-bg);
    color: var(--warning-color);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
}

.page-info-status-badges .page-rotation-badge {
    cursor: pointer;
}

.page-rotation-badge:hover {
    filter: brightness(0.95);
}

.page-rotation-badge:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

.page-rotation-badge .page-rotation-icon {
    width: 12px;
    height: 12px;
    color: var(--warning-color);
    flex-shrink: 0;
}

/* 回転バッジ・変換バッジのグレーアウト（非適用時、薄め） */
.page-rotation-badge.inactive,
.page-convert-badge.inactive,
.page-size-badge.inactive {
    background: #f8fafc;
    color: var(--border-light);
}

.page-rotation-badge.inactive .page-rotation-icon,
.page-convert-badge.inactive .page-convert-icon,
.page-size-badge.inactive .page-size-icon {
    color: var(--border-light);
}

/* 変換バッジ（JPG/PNG相当で共通アイコン、回転バッジと同じオレンジ系。ボタンとしてクリック可能） */
.page-convert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    box-sizing: border-box;
    background: var(--warning-bg);
    color: var(--warning-color);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
}

.page-info-status-badges .page-convert-badge {
    cursor: pointer;
}

.page-convert-badge:hover {
    filter: brightness(0.95);
}

.page-convert-badge:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

.page-convert-badge .page-convert-icon {
    width: 12px;
    height: 12px;
    color: var(--warning-color);
    flex-shrink: 0;
}

/* サイズ変更バッジ（出力サイズが元と異なる場合に表示、表示専用） */
.page-size-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    box-sizing: border-box;
    background: var(--warning-bg);
    color: var(--warning-color);
    border: none;
    border-radius: 3px;
    font: inherit;
}

.page-info-status-badges .page-size-badge {
    cursor: pointer;
}

.page-size-badge:hover {
    filter: brightness(0.95);
}

.page-size-badge:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

.page-size-badge .page-size-icon {
    width: 12px;
    height: 12px;
    color: var(--warning-color);
    flex-shrink: 0;
}

/* ファイル名：左揃え、ホバーでツールチップ全文表示 */
.page-source {
    font-size: 1.2rem;
    margin-left: 4px;
    padding: 4px 0;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* page-info の最下行（解像度・出力サイズバッジと出力サイズボタン） */
.page-info-bottom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    min-height: 0;
}

.page-info-bottom-row .page-badges-row {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.page-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.page-resolution-badge {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--success-color);
    background: var(--success-border);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

/* 出力サイズバッジ（回転・変換と同じオレンジ系） */
.page-output-size-badge {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--warning-color);
    background: var(--warning-bg);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

.page-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-actions .btn-icon {
    padding: 4px;
}

.page-actions .btn-icon svg {
    width: 16px;
    height: 16px;
}


.page-size-source-btn {
    height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.36rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-size-source-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    background: var(--selected-bg);
}

.page-size-source-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.page-size-source-btn:disabled {
    background: var(--btn-bg);
    color: var(--disabled-color);
    cursor: not-allowed;
    border-color: var(--border-color);
}


.btn-round-output-size {
    padding: 4px 10px;
    font-size: 1.2rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-round-output-size:hover:not(:disabled) {
    border-color: var(--primary-color);
    /* unit-btn:hover と同じ */
    background-color: var(--btn-bg);
    color: var(--text-color);
}

.btn-round-output-size:disabled {
    background: var(--btn-bg);
    color: var(--disabled-color);
    cursor: not-allowed;
    border-color: var(--border-color);
    opacity: 0.7;
}

/* 四捨五入ボタンは .output-size-section-btn も持つため、無効時の色を確実にグレーアウトさせる */
.btn-round-output-size.output-size-section-btn:disabled {
    color: var(--disabled-color);
    opacity: 0.7;
}

/* ダイアログ表示中は背景スクロールをブロック */
body:has(dialog[open]) {
    overflow: hidden;
    /* iOS Safari: body の慣性スクロールも確実に止める */
    touch-action: none;
}

/* ダイアログ共通スタイル（中央配置・外観・背景） */
.output-size-dialog,
.confirm-dialog,
.license-dialog,
.page-size-dialog {
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    /* ダイアログ内スクロールが背景に伝搬しないように */
    overscroll-behavior: contain;
    /* ダイアログ自体のタッチ操作は許可 */
    touch-action: auto;
}

.output-size-dialog::backdrop,
.confirm-dialog::backdrop,
.license-dialog::backdrop,
.page-size-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--dialog-backdrop-blur));
    /* backdrop でのタッチイベントが背景に伝わらないように */
    touch-action: none;
}

/* 出力サイズダイアログ */
.output-size-dialog {
    max-width: 400px;
}

.output-size-dialog .dialog-content {
    padding: 0;
    /* タブ切り替えで高さが変わらないよう、コンテンツ領域を固定高さにする（出力サイズタブがスクロールせず収まる高さ） */
    height: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* 出力サイズダイアログのヘッダー（タブ上のファイル情報） */
.output-size-dialog-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
}

/* ダイアログ全体の中央にタイトルを置くための左右スペーサー */
.output-size-header-spacer {
    flex: 1;
    min-width: 0;
}
.output-size-header-spacer-right {
    display: flex;
    justify-content: flex-end;
}

.output-size-header-source {
    flex: 0 1 auto;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

.output-size-header-close-btn {
    flex-shrink: 0;
    padding: 4px;
    width: 26px;
    height: 26px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.output-size-header-close-btn:hover {
    color: var(--text-color);
    background: var(--btn-bg);
}

.output-size-header-close-btn svg {
    width: 16px;
    height: 16px;
}

.output-size-dialog .dialog-content > .output-size-dialog-tabs {
    flex-shrink: 0;
}

.output-size-dialog .dialog-content > .output-size-dialog-body {
    flex: 1;
    min-height: 0; /* flex子要素の縮小を許可 */
}

/* 出力サイズダイアログのタブバー（ピル型タブ） */
.output-size-dialog-tabs {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.output-size-tab-info {
    flex-shrink: 0;
    padding: 6px;
    margin-left: auto;
}

.output-size-tab-close {
    flex-shrink: 0;
    padding: 6px;
}

.output-size-tab-btn {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-size: 1.36rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.output-size-tab-btn:hover {
    color: var(--text-color);
    background: var(--btn-bg);
}

.output-size-tab-btn.active {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.output-size-dialog-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
}

/* 出力サイズダイアログのタブパネル（1つだけ表示） */
.output-size-tab-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px;
    min-height: 0;
    flex: 1; /* 親の固定高さの残りをすべて使う */
    box-sizing: border-box;}

/* 非表示のタブパネルは確実に隠す（hidden属性・activeクラス両対応） */
.output-size-tab-panel[hidden],
.output-size-tab-panel:not(.active) {
    display: none !important;
}

.output-size-tab-panel.active {
    display: flex !important;
}

/* ファイル情報タブ: パネルを相対配置にして画像と情報を重ねる */
.output-size-tab-panel[data-tab="fileinfo"] {
    position: relative;
}

/* ファイル情報タブ: 画像エリア（パネル全体に広げる） */
.fileinfo-image-area {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--btn-bg);
}

.fileinfo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.fileinfo-loading-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    z-index: 10;
}

.fileinfo-loading-indicator.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ファイル情報タブ: 画像クリックでカーソル変更 */
.fileinfo-image-area {
    cursor: pointer;
}

/* ファイル情報タブ: 情報セクション（画像の上に重ねる） */
.output-size-fileinfo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding: 8px 16px 12px;
    font-size: 1.36rem;
    color: #e2e8f0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    transition: opacity 0.2s, visibility 0.2s;
}

.output-size-fileinfo.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.output-size-fileinfo-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.25;
}

.output-size-fileinfo-multi {
    flex-wrap: wrap;
    gap: 6px;
}

.fileinfo-line {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    text-align: left;
    font-size: 1.36rem;
    color: #f1f5f9;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0, 0.25);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-size-fileinfo .fileinfo-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0, 0.25);
    font-size: 1.36rem;
    color: #f1f5f9;
    min-width: 0;
    max-width: 100%;
}

.output-size-fileinfo .fileinfo-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.output-size-fileinfo .fileinfo-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-size-fileinfo .preview-source {
    font-size: 1.36rem;
    color: #f1f5f9;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-size-fileinfo .preview-exif {
    font-size: 1.36rem;
    color: #f1f5f9;
    white-space: nowrap;
}

.output-size-fileinfo .preview-gps.gps-present,
.output-size-fileinfo .preview-gps.gps-absent {
    color: #f1f5f9;
}

.output-size-tab-panel[data-tab="convert"] .output-size-dialog-convert-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* 出力サイズダイアログ内の画像変換セクション（画像変換ダイアログと同じ見た目） */
.output-size-dialog-convert-section {
    width: 100%;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* 各ブロックを中央揃えにする共通行 */
.output-size-dialog-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.output-size-source-row {
    position: relative;
    padding-right: 34px; /* 右側アイコン分の余白 */
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.output-size-source-info {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px;
}

.output-size-source {
    width: 100%;
    margin-left: 0; /* .page-source の左オフセットを打ち消し */
    padding: 0; /* .page-source の上下paddingを詰める */
    line-height: 1.1;
    text-align: center;
}

.output-size-selection-info {
    font-size: 1.12rem;
    color: var(--text-muted);
    opacity: 0.9;
    line-height: 1.1;
    text-align: center;
}

.output-size-dialog-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    margin-top: 12px;
    /* 用紙アスペクト比の変化で下のUIがずれないよう高さを固定 */
    height: 210px;
    cursor: default;
    flex-shrink: 0;
    position: relative;
}

/* 寸法図を中央に配置（余白は wrapper の padding で確保） */
.output-size-dialog-preview .size-diagram-wrapper {
    margin: 0 auto;
}

/* プレビュー下バー：単位切り替えと回転ボタン（プレビューと用紙セクションの間） */
.output-size-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: -8px;
    padding: 8px 10px;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
}

/* 左=余白をなくす、中央=回転、右=mm/in/pt（中央を確実にセンターに） */
.output-size-preview-bar-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
}

.output-size-preview-bar-center {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.output-size-preview-bar-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

.output-size-preview-bar .unit-toggle-group-preview {
    position: static;
    margin-left: 0;
}

.output-size-preview-bar .output-size-preview-rotation-btn {
    position: static;
}

/* プレビュー内にあったときの用紙回転ボタン（絶対配置は .output-size-dialog-preview 内のみ。バー内では上で上書き） */
.output-size-preview-rotation-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.output-size-preview-rotation-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    background-color: var(--btn-bg);
    color: var(--text-color);
    filter: none;
}

/* プレビュー左下の単位切り替え（mm / in / pt） */
.output-size-dialog-preview .unit-toggle-group-preview {
    position: absolute;
    left: 8px;
    bottom: 8px;
}

.output-size-preview-rotation-btn:disabled,
.output-size-preview-rotation-btn.inactive {
    background: var(--btn-bg);
    color: var(--text-muted);
    border-color: var(--border-color);
}

.output-size-preview-rotation-btn.inactive .page-rotation-icon {
    color: inherit;
}

.output-size-preview-rotation-btn .page-rotation-icon {
    width: 16px;
    height: 16px;
    color: inherit;
}

/* プリセットサイズドロップダウン */
.output-size-dialog-body .page-size-select-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.output-size-dialog-body .output-size-preset-row {
    flex-shrink: 0;
}

.output-size-dialog-body .output-size-preset-row .page-size-select {
    flex: 0 0 auto;
}

.output-size-dialog-body .page-size-select-label {
    font-size: 1.44rem;
    font-weight: 500;
    color: var(--text-color);
    flex-shrink: 0;
}

.output-size-dialog-body .page-size-select {
    flex: 1;
    min-width: 0;
    max-width: 150px;
    min-height: 32px;
    padding: 6px 12px;
    font-size: 1.44rem;
    font-weight: 500;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-sm);
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
}

.output-size-dialog-body .page-size-select:hover:not(:disabled) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.output-size-dialog-body .page-size-select:focus {
    outline: none;
    border-color: var(--primary-hover);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.output-size-dialog-body .page-size-select:disabled {
    background-color: var(--disabled-color);
    border-color: var(--disabled-color);
    color: white;
    cursor: not-allowed;
}

/*  Fit mode（余白を入れる / はみ出しを切る） */
.fit-mode-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fit-mode-label {
    font-size: 1.36rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.fit-mode-toggle {
    display: flex;
    gap: 4px;
}

.fit-mode-btn {
    padding: 6px 12px;
    font-size: 1.28rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.fit-mode-btn:hover {
    border-color: var(--primary-color);
    background: var(--selected-bg);
}


/* 出力サイズ寸法図（縦横の見た目を図示） */
.size-preview-diagram {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

/* 寸法図の上段（スワップ・回転・用紙枠を1行に） */
.size-preview-diagram-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* 寸法図の下段（四捨五入・余白をなくす） */
.size-preview-diagram-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* 出力サイズダイアログ下段に移動した単位切り替えは左余白をなくす */
.size-preview-diagram-actions .unit-toggle-group-preview {
    margin-left: 0;
}

/* 「四捨五入」「余白をなくす」を同じボタン幅に揃える */
.size-preview-diagram-actions .btn-round-output-size {
    width: 94px; /* 現状の「余白をなくす」に合わせる */
}

.size-diagram-wrapper {
    position: relative;
    padding-bottom: 44px;
    /* 用紙サイズはJSで明示的に設定。寸法線はオーバーフローで表示 */
}

.size-diagram-paper {
    /* width / height は JS で設定（プレビュー領域内に収まるよう計算） */
    border: none;
    border-radius: 0px;
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-color) 100%);
    position: relative;
    box-sizing: border-box;
}

/* 用紙枠をサムネイルの上に描画（サムネイル→枠の順で表示） */
.size-diagram-paper::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--primary-color);
    border-radius: 0px;
    pointer-events: none;
    z-index: 1;
}

/* 寸法図内のサムネイル画像（ラッパーで回転時のオーバーフローをクリップ） */
.size-diagram-thumbnail-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 0;
}

.size-diagram-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

/* 寸法線 |----------| を図として表示（CSS描画） */
.size-dimension-line {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    pointer-events: none; /* サムネイル以外はクリック対象にしない */
}

.size-dimension-width {
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    justify-content: center;
}

/* 幅の寸法線：左右の縦線（|）＋中央の横線 */
.size-dimension-width .dim-cap {
    flex-shrink: 0;
    width: 1px;
    height: 5px;
    background: currentColor;
}

.size-dimension-width .dim-line {
    flex: 1;
    min-width: 16px;
    height: 0;
    border-bottom: 1px solid currentColor;
}

.size-dimension-width .dim-value {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.size-dimension-height {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    margin-left: 6px;
    flex-direction: column;
    justify-content: center;
}

/* 高さの寸法線：上下の横線（|）＋中央の縦線 */
.size-dimension-height .dim-cap {
    flex-shrink: 0;
    width: 5px;
    height: 1px;
    background: currentColor;
}

.size-dimension-height .dim-line {
    flex: 1;
    min-height: 16px;
    width: 0;
    border-left: 1px solid currentColor;
}

.size-dimension-height .dim-value {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 6px;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.output-size-dialog-size-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* サイズプリセット + 幅/高さ + 入れ替え を1行にまとめる */
.output-size-preset-and-size-row {
    flex-wrap: nowrap;          /* 常に1行 */
    overflow-x: auto;           /* 万一はみ出したら横スクロールで保持 */
    scrollbar-width: thin;
}

.output-size-preset-and-size-row .page-size-select {
    flex: 0 1 150px;            /* プリセットは固定寄り */
    max-width: 150px;
}

/* プリセット行: select と幅・高さ入力の高さを揃え、狭い領域でも崩れないように */
.output-size-preset-and-size-row .size-input-with-stepper {
    flex-shrink: 0;             /* 幅/高さ入力が潰れないように */
    min-height: 32px;           /* .page-size-select の min-height に合わせる */
    box-sizing: border-box;
}

/* 四捨五入ボタン（用紙セクションヘッダー・入れ替えボタンの左） */
.paper-section .output-size-section-header #roundOutputSizeBtn {
    flex-shrink: 0;
    height: 28px;
    padding: 4px 10px;
    font-size: 1.2rem;
}

/* 幅・高さ入れ替えボタン（用紙セクションヘッダー右上・コンテンツの回転ボタンと同じサイズ・角丸） */
.paper-section .output-size-section-header #swapWidthHeightBtn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}
.paper-section .output-size-section-header #swapWidthHeightBtn svg {
    width: 16px;
    height: 16px;
}

/* ── 出力サイズタブ: 用紙 / コンテンツ セクション ── */
.output-size-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(420px, 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    padding: 10px;
}

.output-size-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.output-size-section-label {
    font-size: 1.36rem;
    color: var(--text-muted);
}

/* 用紙セクション：ヘッダー右側のボタン群（四捨五入・入れ替え） */
.output-size-section-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* セクションヘッダー内のボタン（回転など） */
.output-size-section-btn.page-rotation-badge,
.output-size-section-btn.page-rotation-badge.inactive {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.output-size-section-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    background-color: var(--btn-bg);
    color: var(--text-color);
    filter: none;
}

.output-size-section-btn:disabled,
.output-size-section-btn.inactive {
    background: var(--btn-bg);
    color: var(--text-muted);
    cursor: not-allowed;
    border-color: var(--border-color);
}

.output-size-section-btn.inactive .page-rotation-icon {
    color: inherit;
}

.output-size-section-btn .page-rotation-icon {
    width: 16px;
    height: 16px;
    color: inherit;
}

/* ── コンテンツスケール・配置コントロール ── */
.content-layout-row {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
}

/* スケールスライダー（1行: スライダー幅いっぱい + %表示） */
.content-scale-control {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.content-scale-slider {
    flex: 1;
    min-width: 0;
    accent-color: var(--primary-color);
}

.content-scale-slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.content-scale-value {
    font-size: 1.36rem;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    min-width: 3.5em;
    text-align: right;
    flex-shrink: 0;
}

.content-drag-hint {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin: 0;
    width: 100%;
}
/* スケール100%のときはグレーアウト */
.content-drag-hint.content-drag-hint--disabled {
    opacity: 0.5;
    color: var(--text-muted);
}

/* 寸法図サムネイル：ドラッグで配置変更可能なときは grab カーソル */
.size-diagram-thumbnail-wrap.is-draggable {
    cursor: grab;
}
.size-diagram-thumbnail-wrap.is-draggable:active {
    cursor: grabbing;
}

/* 変換設定（出力サイズダイアログ内の画像変換タブで使用） */
.convert-dialog-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.convert-dialog-body .convert-type-toggle-group {
    justify-content: center;
}

.convert-dialog-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.convert-control {
    width: min(420px, 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.convert-control.is-disabled {
    /* .btn-round-output-size:disabled に寄せた「薄いグレー」 */
    filter: none;
    opacity: 1;
}

/* 変更不可時は「外側（カード枠/ヘッダー）」は通常のまま、
   「内側（プリセット群/スライダー）」だけグレーアウトする */
.convert-control.is-disabled .convert-control-value {
    /* 例: "75", "300 dpi" の値テキスト */
    color: rgba(148, 163, 184, 0.5);
}

.convert-control.is-disabled .convert-presets,
.convert-control.is-disabled .convert-range {
    filter: grayscale(1);
    opacity: 0.55;
}

.convert-control.is-disabled .convert-presets {
    position: relative;
}

.convert-control.is-disabled .convert-presets::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(148, 163, 184, 0.12);
    pointer-events: none;
}

.convert-control.is-disabled .convert-presets .btn.btn-preset,
.convert-control.is-disabled .convert-presets .btn.btn-preset.active {
    background: var(--btn-bg);
    color: rgba(148, 163, 184, 0.7);
    border-right-color: var(--border-color);
}

.convert-control-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.convert-control-label {
    font-size: 1.36rem;
    color: var(--text-muted);
}

.convert-control-value-group {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.convert-control-value {
    font-size: 1.36rem;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.convert-presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.btn.btn-preset {
    /* 品質/解像度プリセット: 高さを固定して揃える */
    height: 32px;
    padding: 0 10px;
    font-size: 1.36rem;
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--border-color);
    background: var(--btn-bg);
    color: var(--text-color);
    white-space: nowrap;
}

.convert-presets .btn.btn-preset:last-child {
    border-right: 0;
}

.btn.btn-preset.active {
    background: var(--primary-color);
    border-right-color: var(--primary-color);
    color: #fff;
}

.convert-range {
    width: 100%;
    accent-color: var(--primary-color);
}

.convert-dialog-output {
    display: flex;
    justify-content: center;
    align-items: center;
}

.convert-dialog-output .pdf-dpi-output-info {
    font-size: 1.2rem;
    color: var(--text-muted);
}

.convert-dialog-output .pdf-dpi-output-info.disabled {
    color: var(--text-muted);
    opacity: 0.7;
}

/* プレビュー内の単位切り替え */
.unit-toggle-group-preview {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    margin-left: 4px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.unit-toggle-group-preview .unit-btn {
    flex: 1 1 0;
    min-width: 28px;
    /* 高さを「余白をなくす」ボタン(.btn-round-output-size)と同じに */
    height: 24px;
    padding: 0 2px;
    font-size: 1.2rem;
    font-weight: 500;
    border: none;
    border-radius: 0;
    background: var(--btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.unit-toggle-group-preview .unit-btn:not(:first-child) {
    box-shadow: inset 1px 0 0 var(--border-color);
}

.unit-toggle-group-preview .unit-btn:hover:not(.active) {
    background: var(--btn-bg);
    color: var(--text-color);
}

/* プレビュー内単位トグルの選択中はプライマリ色で上書き（.unit-toggle-group-preview .unit-btn の background より後に指定） */
.unit-toggle-group-preview .unit-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 変換形式トグルボタン */
.convert-type-toggle-group {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.btn-convert-type {
    flex: 1 1 0;
    min-width: 0;
    /* 変換形式トグル: 高さを固定して揃える */
    height: 32px;
    padding: 0 12px;
    font-size: 1.28rem;
    font-weight: 500;
    border: none;
    border-radius: 0;
    background: var(--btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

/* 区切り線は box-shadow で描画（border だと 2 つ目以降の内容幅が 1px 狭くなり外形とボタンサイズがずれる） */
.btn-convert-type:not(:first-child) {
    box-shadow: inset 1px 0 0 var(--border-color);
}

.btn-convert-type:hover:not(:disabled):not(.active) {
    background: var(--btn-bg);
    color: var(--text-color);
}


.btn-convert-type:disabled {
    background: var(--btn-bg);
    color: var(--disabled-color);
    cursor: not-allowed;
}

/* 変換設定ドロップダウン */
.convert-select {
    padding: 6px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1.28rem;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.convert-select:hover {
    border-color: var(--text-muted);
    background-color: var(--btn-bg);
}

.convert-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.pdf-dpi-output-info {
    font-size: 1.2rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.pdf-dpi-output-info.disabled {
    color: var(--border-light);
    opacity: 0.7;
}

.convert-select:disabled {
    background-color: var(--bg-color);
    color: var(--disabled-color);
    cursor: not-allowed;
    border-color: var(--border-color);
}

.convert-select:disabled:hover {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}


/* ファイル情報タブ内のGPS表示（.preview-gps は output-size-fileinfo 内で使用） */
.preview-gps {
    font-size: 1.2rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.preview-gps.gps-present {
    color: #16a34a;
    background: var(--success-bg);
}

.preview-gps.gps-absent {
    color: var(--text-muted);
    background: var(--bg-color);
}

/* ローディングオーバーレイ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-overlay[hidden] {
    display: none;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-overlay p {
    color: white;
    margin-top: 16px;
    font-size: 1.6rem;
}

/* レスポンシブ */
@media (max-width: 480px) {
    .settings-area {
        flex-direction: column;
    }

    .app-content {
        padding: 12px;
    }

    .title-banner {
        padding: 22px 16px 18px;
    }

    .lang-switcher {
        margin-top: 10px;
        font-size: 1.2rem;
    }

    .title-banner h2 {
        font-size: 2.32rem;
    }

    .title-banner-subtitle {
        font-size: 1.28rem;
    }

    .drop-zone {
        padding: 24px;
    }
}

/* 確認ダイアログ */
.confirm-dialog {
    max-width: 400px;
}

.dialog-content {
    padding: 24px;
    text-align: center;
}

.dialog-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: var(--danger-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-icon svg {
    width: 28px;
    height: 28px;
    color: var(--danger-color);
}

.dialog-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.dialog-message {
    font-size: 1.52rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.dialog-actions .btn {
    min-width: 100px;
    border: 1px solid transparent;
}

.dialog-actions .btn-cancel {
    background: var(--btn-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.dialog-actions .btn-cancel:hover {
    background: var(--btn-bg);
}

/* ライセンスダイアログ */
.license-dialog {
    max-width: 400px;
    max-height: 90vh;
}

.license-dialog .dialog-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.license-dialog-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    flex-shrink: 0;
}

.license-dialog-header .dialog-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-color);
    text-align: center;
}

.license-dialog-header .btn-close-dialog {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.license-dialog-body {
    padding: 16px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.license-block {
    margin-bottom: 20px;
}

.license-block:last-child {
    margin-bottom: 0;
}

.license-name {
    font-size: 1.52rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 4px 0;
}

.license-meta {
    font-size: 1.28rem;
    color: var(--text-muted);
    margin: 0 0 8px 0;
}

.license-summary {
    font-size: 1.44rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

.license-summary .license-name-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.license-summary .license-name-link:hover {
    text-decoration: underline;
}

.license-summary .license-link {
    color: var(--primary-color);
    text-decoration: none;
}

.license-summary .license-link:hover {
    text-decoration: underline;
}

.license-summary .license-name-plain {
    font-weight: 600;
    color: var(--text-color);
}

.license-summary .license-plain {
    color: var(--text-muted);
}

.license-text {
    font-size: 1.2rem;
    line-height: 1.45;
    color: var(--text-muted);
    background: var(--btn-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 180px;
    overflow-y: auto;
}

.btn-close-dialog {
    padding: 4px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.btn-close-dialog:hover {
    background: var(--btn-bg);
    color: var(--text-color);
}

.btn-close-dialog svg {
    width: 20px;
    height: 20px;
}

.settings-section {
    padding: 20px;
}

.settings-label {
    display: block;
    font-size: 1.44rem;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 10px;
}

.unit-toggle-group-dialog {
    display: flex;
    gap: 8px;
}

.unit-toggle-group-dialog .unit-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 1.44rem;
}

.settings-hint {
    font-size: 1.28rem;
    color: var(--text-muted);
    margin-top: 10px;
    margin-bottom: 0;
}

.settings-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 1.44rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    cursor: pointer;
}

.settings-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.settings-section+.settings-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.settings-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.settings-toggle-row .settings-label {
    margin-bottom: 0;
}

/* トグルボタン */
.toggle-btn {
    position: relative;
    width: 48px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 13px;
    background: var(--border-light);
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toggle-btn[aria-pressed="true"] {
    background: var(--primary-color);
}

.toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.toggle-btn[aria-pressed="true"] .toggle-slider {
    transform: translateX(22px);
}

/* 出力サイズボタン */
.btn-page-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1.44rem;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 100px;
}

.btn-page-size:hover {
    border-color: var(--primary-color);
    background: var(--selected-bg);
}

.btn-page-size svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* 縦横切り替えボタン */
.btn-orientation {
    padding: 6px 14px;
    font-size: 1.36rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 44px;
}

.btn-orientation:hover:not(:disabled) {
    background: var(--primary-hover);
}

.btn-orientation:disabled {
    background: var(--disabled-color);
    cursor: not-allowed;
}

/* 縦横選択（2ボタン・どちらか選択状態） */
.orientation-toggle-group {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.btn-orientation-option {
    padding: 6px;
    border: none;
    border-radius: 0;
    background: var(--btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 36px;
    min-height: 36px;
}

.orientation-toggle-group .btn-orientation-option svg {
    width: 20px;
    height: 20px;
    display: block;
}

.btn-orientation-option:not(:first-child) {
    border-left: 1px solid var(--border-color);
}

.btn-orientation-option:hover:not(:disabled):not(.active) {
    background: var(--btn-bg);
    color: var(--text-color);
}


.btn-orientation-option:disabled {
    background: var(--btn-bg);
    color: var(--disabled-color);
    cursor: not-allowed;
}

/* 出力サイズ選択ダイアログ */
.page-size-dialog {
    max-width: 320px;
}

.page-size-dialog .dialog-content {
    padding: 0;
}

.page-size-dialog .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.page-size-dialog .dialog-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.page-size-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px;
}

.page-size-option {
    padding: 12px 8px;
    font-size: 1.44rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.page-size-option:hover {
    border-color: var(--primary-color);
    background: var(--selected-bg);
}

.page-size-option.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.page-size-option-wide {
    grid-column: span 3;
}

/* ダウンロードダイアログ開くボタン */
.btn-download-open {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.btn-download-open:hover:not(:disabled) {
    background: var(--success-hover);
    border-color: var(--success-hover);
}

.btn-download-open:disabled {
    background: var(--disabled-color);
    border-color: var(--disabled-color);
    cursor: not-allowed;
}

.btn-share-open {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.btn-share-open:hover:not(:disabled) {
    background: var(--success-hover);
    border-color: var(--success-hover);
}

.btn-share-open:disabled {
    background: var(--disabled-color);
    border-color: var(--disabled-color);
    cursor: not-allowed;
}

/* 全選択ボタン */
.btn-select-all {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.btn-select-all:hover:not(:disabled) {
    background: var(--selected-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-select-all:disabled {
    background: var(--card-bg);
    color: var(--text-muted);
    border-color: var(--border-color);
    cursor: not-allowed;
}

/* 幅・高さの表示のみ（編集不可） */
.size-display-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.size-display-inline .size-label {
    font-size: 1.44rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.size-display-value {
    font-size: 1.44rem;
    font-weight: 500;
    color: var(--text-color);
    min-width: 3em;
    text-align: right;
}

/* プレビュー内の幅・高さ入力（編集可能）+ ステッパー */
.size-input-with-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-color);
    overflow: hidden;
}
.size-input-with-stepper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}
.size-input-with-stepper:has(.size-display-input:disabled) {
    opacity: 0.6;
    pointer-events: none;
}

.size-display-input {
    font-size: 1.44rem;
    font-weight: 500;
    color: var(--text-color);
    width: 4.5em;
    min-width: 3em;
    padding: 2px 4px 2px 6px;
    text-align: right;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: textfield;
    -moz-appearance: textfield;
}
.size-display-input::-webkit-outer-spin-button,
.size-display-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.size-display-input:focus {
    outline: none;
}

.size-stepper {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
}
.size-stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 12px;
    padding: 0;
    border: none;
    background: var(--btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.size-stepper-btn:hover:not(:disabled) {
    background: var(--btn-bg);
    color: var(--text-color);
}
.size-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.size-stepper-btn svg {
    width: 10px;
    height: 10px;
}
.size-stepper-up {
    border-bottom: 1px solid var(--border-color);
}

.size-display-inline .size-sep {
    font-size: 1.44rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.size-display-inline .unit-label {
    font-size: 1.36rem;
    color: var(--text-color);
    min-width: 24px;
    flex-shrink: 0;
}

/* ========== 複数選択UI ========== */

/* 複数選択時のページアイテム強調 */
.page-item.selected {
    position: relative;
}

/* ========== フォーカスリング制御 ========== */
/* :focus-visible 対応ブラウザでは「マウス操作で付くフォーカス囲み」だけ消し、
   キーボード（Tab）操作のフォーカス表示は残す。 */
@supports selector(:focus-visible) {
    :focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }
}