/* ===== 1. 色と共通寸法 =====
   先頭の変数を変えると、離れた部品の色や高さを一括で揃えられます。
   --line は区切り線・カード枠などの装飾用、--control-border は入力欄やチェック枠など
   「操作できる部品」の境界用です。後者は白背景に対して3:1以上のコントラストを保ちます。
   --muted の補足文字は、薄い背景の上でも6:1以上になる濃さにしています。
   補足文字の最小サイズは13pxです。日本語は12px以下で判読しにくくなるため、これより小さくしません。 */
:root { color-scheme:light; --ink:#302d3a; --muted:#5b5663; --line:#e1dde5; --control-border:#948da0; --placeholder:#767078; --canvas:#f7f6f2; --surface:#fff; --surface-soft:#faf9fc; --field:#fff; --accent:#655181; --accent-dark:#4e3c69; --soft:#f2eef7; --focus:#765e9a; --control-height:44px; --control-radius:8px; --preview-stage:#f0eef2; --preview-paper:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic UI","Meiryo",sans-serif; font-size:15px; }
:root[data-resolved-theme="dark"] { color-scheme:dark; --ink:#f1eef5; --muted:#bbb5c2; --line:#403a47; --control-border:#726a7d; --placeholder:#a29bab; --canvas:#17151c; --surface:#211e27; --surface-soft:#292530; --field:#26222c; --accent:#c4addf; --accent-dark:#dcc9f2; --soft:#342d40; --focus:#c5abe7; --preview-stage:#17151c; --preview-paper:#211e27; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--canvas); color:var(--ink); }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,.text-button { cursor:pointer; }
button { border:0; background:none; }
button,.text-button,.settings-import,.mobile-tabs button,.device-switch button { white-space:nowrap; }
button,input,select,.file-drop,a { touch-action:manipulation; }
button:disabled,a[aria-disabled="true"] { opacity:.55; cursor:default; }
/* 主要ボタンは無効でも文言が読めるよう、透明度ではなく色で無効を示します。 */
.primary:disabled { opacity:1; background:#e4dfea; color:#4e3c69; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
/* ===== 2. 共通ヘッダー ===== */
.site-header { height:82px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 max(28px,calc((100vw - 1344px)/2)); border-bottom:1px solid var(--line); }
.header-actions { display:flex; align-items:center; gap:10px; }
.theme-control { display:flex; align-items:center; gap:8px; font-weight:600; white-space:nowrap; }
.help-button { min-height:40px; padding:8px 14px; font-size:14px; }
/* 使い方ダイアログ。PC／スマホの切替はタブで行い、端末判定で初期表示を決めます。 */
.help-dialog { width:min(640px,calc(100vw - 32px)); max-height:min(85vh,calc(100vh - 32px)); margin:auto; padding:22px 24px 24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:0 18px 48px #302d3a33; overflow:auto; overscroll-behavior:contain; }
.help-dialog::backdrop { background:#302d3a66; }
.help-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.help-head h2 { margin:0; font-size:18px; }
.help-head .text-button { color:var(--accent-dark); text-decoration:underline; font-size:14px; }
.help-tabs { margin-bottom:16px; }
.help-tabs button { flex:1; }
.help-lead { margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.7; }
.help-panel ol { margin:0; padding-left:22px; font-size:14px; line-height:1.85; }
.help-panel li + li { margin-top:8px; }
.help-panel kbd { padding:1px 6px; border-radius:5px; background:var(--soft); font-size:13px; }
.help-note { margin:14px 0 0; padding:12px 14px; border-radius:8px; background:var(--surface-soft); color:var(--muted); font-size:13px; line-height:1.8; }
.theme-control > span { color:var(--muted); font-size:12px; }
.theme-control select { width:auto; min-width:104px; min-height:var(--control-height); padding-left:12px; }
.brand { display:block; padding:8px 0; text-align:left; border-radius:6px; cursor:pointer; }
.brand > span { display:block; margin:0; font-size:20px; font-weight:700; letter-spacing:.02em; }
.brand > small { display:block; margin:4px 0 0; color:var(--muted); font-size:14px; font-weight:400; letter-spacing:.025em; }
main { max-width:1400px; padding:0 28px; margin:0 auto; }
/* ===== 3. ホーム画面 ===== 読む順序が崩れないよう、本文幅と間隔をまとめます。 */
.home-view { max-width:960px; margin:0 auto; padding:48px 0; }
.home-intro { max-width:780px; }
.home-intro h1 { margin:0; font-size:clamp(28px,3.2vw,40px); line-height:1.45; letter-spacing:.01em; }
/* 見出しの途中で折り返さない。狭い画面や OS の文字拡大で収まらないときは「原稿を、」の後でだけ改行する */
.home-intro h1 .keep { display:inline-block; }
.home-intro > p:not(.eyebrow) { max-width:760px; margin:16px 0 0; color:var(--muted); font-size:16px; line-height:1.75; }
.primary.home-primary { min-width:190px; min-height:50px; margin-top:24px; justify-content:space-between; }
.home-section { margin-top:40px; }
.home-section > h2 { margin:0; font-size:17px; }
/* 端末ごとの始め方。設定欄と同じ開閉部品を使い、該当端末の項目だけ app.js が開きます。 */
.device-guide > h2 { margin-bottom:16px; }
.device-item { border-bottom:1px solid var(--line); padding:0 4px; }
.device-item + .device-item { margin-top:0; }
.device-item > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; cursor:pointer; list-style:none; }
.device-item > summary::-webkit-details-marker { display:none; }
.device-item > summary strong,.device-item > summary small { display:block; }
.device-item > summary strong { font-size:15px; }
.device-item > summary small { margin-top:3px; color:var(--muted); font-size:13px; }
.device-item[data-recommended] > summary strong::after { content:"この端末"; display:inline-block; white-space:nowrap; margin-left:10px; padding:2px 8px; border-radius:99px; background:var(--soft); color:var(--accent-dark); font-size:12px; font-weight:600; vertical-align:middle; }
.device-item ol { margin:0 0 16px; padding-left:22px; color:var(--ink); font-size:14px; line-height:1.75; }
.device-item li + li { margin-top:8px; }
.device-item code,.device-item kbd { padding:1px 6px; border-radius:5px; background:var(--soft); font-size:13px; }
/* 「必ずお読みください」は免責と同じ折りたたみ枠。見出し（dt）を太字にし、説明（dd）を続ける */
.must-read { margin-top:24px; }
.must-read-list { max-width:780px; margin:0; padding:0 16px 16px; }
.must-read-list dt { margin-top:10px; color:var(--ink); font-size:14px; font-weight:700; }
.must-read-list dt:first-child { margin-top:0; }
.must-read-list dd { margin:4px 0 0; line-height:1.75; }
.legal-notice { margin-top:18px; border:1px solid var(--accent); border-radius:10px; background:var(--soft); color:var(--muted); font-size:13px; }
.legal-notice summary { padding:14px 16px; cursor:pointer; color:var(--accent-dark); font-size:15px; font-weight:700; }
.legal-notice p { max-width:780px; margin:0; padding:0 16px 16px; line-height:1.75; }
.home-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.home-footer p { margin:0; color:var(--muted); font-size:14px; }
.home-footer a { color:var(--accent); }
.version-label { margin-left:14px; font-variant-numeric:tabular-nums; }
/* 更新案内は状態表示より上に重ね、操作中の画面を隠さない幅に収めます。 */
.update-notice { position:fixed; z-index:30; top:12px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; max-width:min(560px,calc(100vw - 32px)); padding:10px 12px 10px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font-size:14px; line-height:1.6; box-shadow:0 6px 24px #302d3a24; }
.update-notice button { min-height:36px; padding:6px 14px; font-size:14px; }
body[data-view="home"] .mobile-action { display:none; }
/* ===== 4. 変換画面の骨組み ===== PCは2列、スマホは後半で1列にします。 */
.workspace { display:grid; grid-template-columns:minmax(350px,.88fr) minmax(0,1.35fr); align-items:start; gap:22px; margin-top:28px; }
.editor-column { display:grid; gap:20px; min-width:0; }
.card { padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:12px; min-width:0; }
.section-heading,.section-heading > div { display:flex; align-items:center; }
.section-heading { justify-content:space-between; gap:8px; margin-bottom:16px; }
.section-heading > div { gap:9px; }
.section-heading h2 { margin:0; font-size:17px; font-weight:700; }
.step-number { font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.text-button { min-height:var(--control-height); font-size:14px; line-height:1.4; color:var(--accent); padding:10px 9px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; justify-content:center; border-radius:var(--control-radius); }
.text-button:hover:not(:disabled) { color:var(--accent-dark); background:var(--soft); }
/* ===== 5. 原稿入力とファイル一覧 ===== */
.file-drop { display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; gap:6px; padding:19px 10px; background:var(--surface-soft); border:1px dashed var(--control-border); border-radius:10px; cursor:pointer; }
.file-drop:hover,.file-drop.dragging { background:var(--soft); border-color:var(--accent); }
.file-drop:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.file-drop input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.upload-icon { color:var(--accent); border:1px solid #e0d9ea; border-radius:7px; font-size:23px; width:32px; height:32px; display:grid; place-items:center; margin-bottom:3px; }
.folder-icon { font-size:20px; }
.file-drop strong { font-size:15px; font-weight:600; }
.file-drop > span:last-of-type { font-size:13px; color:var(--muted); }
.loaded-row { margin-top:16px; display:grid; gap:8px; }
.source-mode-fieldset { border:0; margin:0 0 12px; padding:0; min-width:0; }
.source-mode-fieldset legend { margin-bottom:10px; font-size:14px; font-weight:600; }
.file-format-note { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }

.loaded-row > div { display:flex; justify-content:space-between; gap:10px; }
.loaded-row strong { font-size:14px; }
.loaded-row span { color:var(--muted); font-size:13px; }
.loaded-row .reorder-hint { margin:2px 0; color:var(--muted); font-size:13px; line-height:1.7; }
.loaded-row ol { display:grid; gap:6px; max-height:260px; overflow:auto; margin:2px 0; padding:0; list-style:none; counter-reset:file-order; }
.loaded-row li { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:48px; padding:4px 5px 4px 9px; border:1px solid var(--line); border-radius:7px; background:var(--surface); counter-increment:file-order; }
.loaded-row li::before { content:counter(file-order); display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--soft); color:var(--accent); font-size:12px; font-weight:700; }
.loaded-row li.dragging { opacity:.5; }
.loaded-row li.drop-target { border-color:var(--accent); background:var(--soft); }
.file-item-name { min-width:0; overflow-wrap:anywhere; color:var(--ink); font-size:13px; line-height:1.5; }
.file-item-name small { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.file-order-buttons { display:flex; gap:3px; }
.file-order-buttons button { width:44px; height:44px; border-radius:6px; color:var(--accent); font-size:16px; }
.file-order-buttons button:hover:not(:disabled) { background:var(--soft); }
.file-order-buttons .file-remove { color:#88474b; }
.file-order-buttons .file-remove:hover:not(:disabled) { background:#f8eded; }
.loaded-row .text-button { justify-self:end; }
.mixed-warning { margin-top:13px; padding:14px; border:1px solid #e3c78e; border-radius:9px; background:#fff8e8; color:#70552d; }
.mixed-warning > strong { font-size:14px; }
.mixed-warning p { margin:7px 0 13px; font-size:13px; line-height:1.7; }
.force-row { display:flex; align-items:flex-start; gap:9px; margin-top:12px; line-height:1.7; cursor:pointer; }
.force-row input { flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent); }
.inline-feedback { margin:10px 0 0; padding:10px 12px; border-radius:7px; background:#edf5ef; color:#4f6b57; font-size:13px; line-height:1.6; }
.inline-feedback.error { background:#f8eded; color:#863c40; }
.field { display:grid; gap:8px; }
/* ===== 6. 原稿形式の対応表 ===== */
.format-help { margin:0 0 16px; }
.format-help-group table { width:100%; border-collapse:collapse; table-layout:fixed; color:var(--muted); font-size:13px; line-height:1.6; }
.format-help-group th,.format-help-group td { padding:7px 6px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.format-help-group th { color:var(--ink); font-weight:600; }
.format-help-group th:first-child,.format-help-group td:first-child { width:47%; }
.format-help-group table:has(th:nth-child(3)) { table-layout:auto; }
.format-help-group table:has(th:nth-child(3)) th:first-child,.format-help-group table:has(th:nth-child(3)) td:first-child { width:34%; }
.format-help-group table:has(th:nth-child(3)) th:nth-child(2),.format-help-group table:has(th:nth-child(3)) td:nth-child(2) { width:31%; }
.official-references { margin:12px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.official-references a { color:var(--accent); text-underline-offset:2px; }
.sample-switch { width:100%; margin:0 0 16px; }
label { font-size:14px; font-weight:600; }
input[type="text"],input[type="number"],select,textarea { width:100%; min-width:0; background-color:var(--field); border:1px solid var(--control-border); border-radius:var(--control-radius); padding:10px; }
input[type="text"],select { min-height:var(--control-height); font-size:14px; }
select { appearance:none; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23655181' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:16px 16px; }
select:hover:not(:disabled),input:hover:not(:disabled),textarea:hover:not(:disabled) { border-color:var(--accent); }
input::placeholder,textarea::placeholder { color:var(--placeholder); }
.source-label { display:flex; justify-content:flex-end; margin-bottom:8px; }
.source-label span { font-size:13px; color:var(--muted); }
textarea { display:block; min-height:235px; resize:vertical; font-family:Consolas,"Yu Gothic UI",monospace; font-size:14px; line-height:1.85; padding:14px; background:var(--field); tab-size:2; }
.source-bottom { display:flex; align-items:center; justify-content:flex-end; padding-top:4px; }
/* ===== 7. 空行・書式設定 ===== 状態はJavaScript、見た目はCSSが担当します。 */
.spacing-fieldset { border:0; margin:0; padding:0; min-width:0; }
.spacing-fieldset legend { font-size:14px; margin-bottom:10px; }
.segmented { display:flex; padding:4px; background:var(--surface-soft); border-radius:8px; }
.segmented label { position:relative; flex:1; cursor:pointer; }
.segmented label input { position:absolute; opacity:0; }
.segmented label span,.segmented button { display:block; text-align:center; padding:10px 7px; border-radius:6px; font-size:13px; font-weight:600; white-space:nowrap; }
.segmented label input:checked + span,.segmented button[aria-pressed="true"],.segmented button[aria-selected="true"] { color:var(--accent-dark); background:var(--surface); box-shadow:inset 0 0 0 1px var(--control-border); }
.segmented label input:focus-visible + span { outline:3px solid var(--focus); }
.spacing-intro { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:20px 0 13px; }
.spacing-intro strong { font-size:14px; font-weight:600; }
.spacing-intro > span { color:var(--muted); font-size:13px; }
.unified-inputs { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.number-wrap { position:relative; }
.number-wrap input { padding-right:14px; font-size:16px; }
.number-wrap > span { position:absolute; right:52px; top:14px; color:var(--muted); font-size:13px; pointer-events:none; }
input[type="number"] { appearance:textfield; }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { appearance:none; margin:0; }
.stepper-field { display:grid; grid-template-columns:44px minmax(30px,1fr) 44px; width:100%; border:1px solid var(--control-border); border-radius:var(--control-radius); background:var(--field); }
.stepper-field > input { grid-column:2; grid-row:1; border:0; border-radius:0; min-width:0; min-height:44px; height:44px; padding-block:8px; padding-left:0; text-align:center; background:transparent; }
.number-stepper { display:contents; }
.number-stepper button:first-child { grid-column:3; border-left:1px solid var(--line); border-radius:0 7px 7px 0; }
.number-stepper button { display:grid; place-items:center; min-width:44px; min-height:44px; color:var(--accent); font-size:16px; line-height:1; grid-row:1; }
.number-stepper button + button { grid-column:1; border-right:1px solid var(--line); border-radius:7px 0 0 7px; }
.number-stepper button:hover:not(:disabled) { background:var(--soft); color:var(--accent-dark); }
.number-stepper button:active:not(:disabled) { background:#e8e0f1; }
.number-stepper button:focus-visible { position:relative; z-index:1; outline-width:2px; outline-offset:-2px; }
.spacing-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.spacing-table thead th { color:var(--muted); font-size:13px; font-weight:600; padding:8px 4px; }
.spacing-table th:first-child { text-align:left; width:30%; }
.spacing-table tbody tr { border-bottom:1px solid var(--line); }
.spacing-table tbody th { font-size:13px; font-weight:600; }
.spacing-table td { padding:6px 5px; }
.spacing-table input { min-height:44px; padding:8px; text-align:center; font-size:16px; }
.spacing-table .stepper-field { display:flex; flex-direction:column; }
.spacing-table .number-stepper { display:flex; border-top:1px solid var(--line); }
.spacing-table .number-stepper button { flex:1; min-width:44px; }
.spacing-table .number-stepper button:first-child { order:2; border-radius:0 0 7px 0; }
.spacing-table .number-stepper button + button { order:1; border:0; border-radius:0 0 0 7px; }
.type-symbol { display:inline-block; margin-right:6px; color:var(--muted); font-size:12px; }
.note-symbol { font-size:18px; }
.priority-spacing { display:grid; grid-template-columns:minmax(0,1fr) 140px; align-items:center; gap:16px; margin:16px 0 0; }
.priority-spacing label { font-weight:700; }
.hint { font-size:13px; line-height:1.75; color:var(--muted); margin:13px 0 20px; }
.edge-options { display:grid; gap:8px; margin:0 0 16px; }
.edge-options label { display:flex; align-items:center; gap:8px; min-height:44px; font-weight:500; cursor:pointer; }
.edge-options input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.settings-group { border-top:1px solid var(--line); }
.settings-group > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; cursor:pointer; list-style:none; }
.settings-group > summary::-webkit-details-marker { display:none; }
.settings-group > summary strong,.settings-group > summary small { display:block; }
.settings-group > summary strong { font-size:15px; }
.settings-group > summary small { margin-top:4px; color:var(--muted); font-size:13px; }
.details-mark { flex:0 0 8px; width:8px; height:8px; margin:0 4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; color:var(--accent); transform:rotate(45deg); transition:transform .15s; }
.settings-group[open] > summary .details-mark,.device-item[open] > summary .details-mark,.help-details[open] > summary .details-mark { transform:rotate(225deg); }
.help-details { margin-top:8px; }
.help-details > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; cursor:pointer; list-style:none; color:var(--accent-dark); font-size:14px; font-weight:600; }
.help-details > summary::-webkit-details-marker { display:none; }
.spacing-help { margin-bottom:16px; }
.help-details .hint { margin:8px 0 16px; }
/* 開いたグループの見出し直下に線を引かない（他のグループと揃える） */
.conversion-options { padding-bottom:16px; }
.bold-fieldset { min-width:0; margin:0; padding:0 0 16px; border:0; }
.bold-fieldset legend { float:left; width:100%; font-size:14px; font-weight:600; margin-bottom:12px; }
.bold-options { clear:both; display:flex; gap:8px; }
.bold-options label { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; min-height:44px; border:1px solid var(--control-border); border-radius:7px; cursor:pointer; font-size:14px; white-space:nowrap; }
.bold-options label:has(input:checked) { background:var(--soft); border-color:var(--accent); color:var(--accent-dark); }
.bold-options input { accent-color:var(--accent); width:18px; height:18px; margin:0; }
.format-fieldset { margin-top:0; padding-top:0; }
.format-options { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:8px; }
.format-options label { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border:1px solid var(--control-border); border-radius:7px; cursor:pointer; font-size:14px; white-space:nowrap; }
.format-options label:has(input:checked) { background:var(--soft); border-color:var(--accent); color:var(--accent-dark); }
.format-options input { flex:0 0 auto; accent-color:var(--accent); width:18px; height:18px; margin:0; }
.format-fieldset > .hint { clear:both; }
.list-settings-body { display:grid; gap:18px; padding:0 0 16px; }
.list-settings-body input[type="text"] { min-height:44px; font:inherit; }
.list-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.list-style-grid fieldset { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; margin:0; padding:0; border:0; }
.list-style-grid legend { padding:0; color:var(--muted); font-size:13px; font-weight:600; }
.list-style-grid label { display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px; cursor:pointer; white-space:nowrap; }
.list-style-grid input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.marker-settings-body { display:grid; gap:0; padding:0 0 16px; }
.marker-rule { display:grid; grid-template-columns:minmax(126px,.75fr) minmax(0,1.25fr); align-items:end; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.marker-name { display:grid; gap:7px; align-self:start; }
.marker-name > strong { font-size:14px; }
.marker-name > div { display:grid; gap:6px; }
.marker-name input { min-height:42px; font-family:Consolas,"Yu Gothic UI",monospace; }
.marker-pair { grid-template-columns:1fr 1fr; }
.marker-pair label { grid-row:1; color:var(--muted); font-size:13px; }
.marker-pair input { grid-row:2; }
.marker-rule fieldset { min-width:0; margin:0; padding:0; border:0; }
.marker-rule legend { margin-bottom:8px; color:var(--muted); font-size:13px; font-weight:600; }
.marker-mode { display:grid; grid-template-columns:repeat(2,minmax(112px,1fr)); gap:4px; }
.marker-mode label span { padding-inline:6px; white-space:nowrap; font-size:13px; }
.marker-example code { color:var(--ink); }
#preview h1,#preview h2,#preview h3 { font-weight:500; }
#preview strong { font-weight:750; }
.toggle-row { display:flex; position:relative; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; padding:12px 0; }
.toggle-row:last-child { padding-bottom:0; }
.toggle-row strong { display:block; font-size:14px; font-weight:600; }
.toggle-row small { display:block; font-size:13px; font-weight:400; color:var(--muted); margin-top:5px; line-height:1.65; }
.toggle-row input { position:absolute; right:0; width:44px; height:28px; opacity:0; }
.switch { display:block; width:44px; height:28px; border-radius:16px; background:#d8d4dd; flex-shrink:0; transition:background .15s; }
.switch::after { content:""; display:block; width:20px; height:20px; border-radius:50%; background:white; margin:4px; box-shadow:0 1px 3px #302d3a20; transition:transform .15s; }
.toggle-row input:checked + .switch { background:var(--accent); }
.toggle-row input:checked + .switch::after { transform:translateX(16px); }
.toggle-row input:focus-visible + .switch { outline:3px solid var(--focus); outline-offset:3px; }
.danger-toggle strong { color:#7f3d42; }
.danger-toggle input:checked + .switch { background:#9a4b50; }
.limit-warning { margin:12px 0; padding:12px 14px; border:1px solid #e2b8ba; border-radius:8px; background:#f9eded; color:#7f3d42; font-size:13px; line-height:1.75; }
.settings-files { display:grid; gap:16px; padding-top:16px; border-top:1px solid var(--line); }
.settings-files > div:first-child > strong { font-size:15px; }
.settings-files > div:first-child > p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.settings-file-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; }
.settings-file-actions .primary,.settings-file-actions .secondary { padding-inline:9px; text-align:center; }
.settings-import { position:relative; cursor:pointer; }
.settings-import input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.settings-import:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.result-card { position:sticky; top:20px; padding:24px 0 0; background:transparent; border:0; border-radius:0; }
/* 結果カードは固定表示のため、画面の高さに収めないと低い画面でコピーボタンが隠れる。
   カードを縦の flex にして、プレビュー欄だけを伸縮させ、ボタン類は常に見える位置に置く。 */
.result-card { display:flex; flex-direction:column; max-height:calc(100vh - 20px); }
/* ===== 8. TALTO表示プレビューとコピー欄 ===== */
.preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.preview-toolbar > span { color:var(--muted); font-size:13px; }
.device-switch { padding:3px; }
.device-switch button { font-size:13px; min-width:55px; padding:8px 10px; }
.preview-stage { flex:1 1 auto; background:var(--preview-stage); border-radius:12px; padding:16px; min-height:240px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.preview-paper { max-width:780px; min-height:380px; padding:28px; margin:0 auto; background:#fff; border-radius:4px; overflow-wrap:anywhere; }
.preview-stage[data-device="mobile"] .preview-paper { max-width:375px; padding:24px 20px; }
#preview { color:#333; font-family:"Helvetica Neue","Noto Sans JP",-apple-system,Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased; }
#preview > * { margin:0; }
#preview h1 { padding-bottom:8px; border-bottom:1px solid #e2e2e2; font-size:32px; font-weight:normal; line-height:1.6; }
#preview h2 { font-size:24px; font-weight:normal; line-height:1.6; }
#preview h3 { font-size:20px; font-weight:normal; line-height:1.6; }
#preview blockquote { padding:24px; color:#777; background:#f8f8f8; border:0; border-radius:8px; font-size:12px; line-height:1.6; }
#preview p { min-height:1rem; }
#preview strong { font-weight:bold; }
.preview-stage[data-device="mobile"] #preview { font-size:14px; line-height:1.6; }
.preview-stage[data-device="mobile"] #preview h1 { padding-bottom:4px; font-size:24px; line-height:1.4; }
.preview-stage[data-device="mobile"] #preview h2 { font-size:18px; line-height:1.4; }
.preview-stage[data-device="mobile"] #preview h3 { font-size:16px; line-height:1.4; }
.preview-stage[data-device="mobile"] #preview blockquote { padding:16px; }
#preview code { font-family:Consolas,monospace; background:#f1eef4; padding:1px 3px; border-radius:3px; }
.empty-preview { text-align:center; padding:25px 0 15px; }
.empty-preview p { color:#5b5663; font-size:14px; line-height:1.75; }
.preview-note { font-size:13px; color:var(--muted); line-height:1.7; margin:10px 0 16px; }
.warning-details { padding:12px 14px; margin:15px 0; background:#fbf5e9; color:#886535; border:1px solid #efe4cc; border-radius:8px; font-size:13px; }
.warning-details summary { cursor:pointer; min-height:22px; font-weight:600; }
.warning-details ul { margin:8px 0 0; padding-left:18px; line-height:1.8; }
.warning-details li + li { margin-top:6px; }
.export-area { padding-top:0; }
.copy-choice { display:grid; grid-template-columns:auto minmax(0,180px); align-items:center; justify-content:end; gap:8px; margin-bottom:12px; }
.copy-choice select { min-height:44px; }
.primary,.secondary { min-height:var(--control-height); padding:11px 16px; border-radius:var(--control-radius); font-size:15px; font-weight:600; line-height:1.4; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; }
.primary { background:var(--accent); color:white; }
.primary:hover:not(:disabled) { background:var(--accent-dark); }
.secondary { color:var(--accent-dark); border:1px solid var(--control-border); background:var(--surface); }
.secondary:hover:not(:disabled) { background:var(--soft); }
.copy-primary { width:100%; min-height:49px; }
.copy-primary > span { flex:0 0 20px; margin-left:auto; font-size:18px; line-height:1; text-align:center; }
.copy-primary > span:first-child { flex:1; margin-left:20px; font-size:15px; line-height:1.4; }
.copy-feedback { margin:10px 0 2px; padding:11px 12px; border-radius:7px; background:#edf5ef; color:#4f6b57; font-size:13px; line-height:1.7; text-align:center; }
.copy-feedback.error { background:#f8eded; color:#863c40; }
.paste-hint { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 12px; font-size:13px; line-height:1.75; color:var(--muted); margin:8px 0 0; }
.paste-hint .text-button { padding-inline:0; font-size:13px; color:var(--accent-dark); text-decoration:underline; }
/* 手動コピー欄：iOSでは自動コピーが許可されない場合があるため、選択→コピーを利用者の操作で行えるようにします。
   contenteditable は「すべて選択」の呼び出しを容易にするために使い、inputmode="none" でキーボードは出しません。 */
.manual-copy { margin-top:16px; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.manual-copy h3 { margin:0 0 6px; font-size:15px; }
.manual-copy-reason { margin:0 0 6px; font-size:13px; line-height:1.7; color:#863c40; }
.manual-copy-steps { margin:0 0 12px; font-size:13px; line-height:1.8; color:var(--muted); }
.manual-copy-actions { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.manual-copy-actions .text-button { color:var(--accent-dark); text-decoration:underline; font-size:13px; }
.manual-copy-area { display:block; width:100%; max-height:45vh; min-height:120px; overflow:auto; padding:16px 18px; border:1px solid var(--control-border); border-radius:8px; background:var(--preview-paper); color:var(--ink); font-size:15px; line-height:1.9; overflow-wrap:anywhere; -webkit-user-select:text; user-select:text; resize:vertical; }
.manual-copy-rich h1,.manual-copy-rich h2,.manual-copy-rich h3 { margin:0.6em 0 0.3em; }
.manual-copy-rich p { margin:0; }
textarea.manual-copy-area { font-family:inherit; white-space:pre-wrap; }
.status { position:fixed; z-index:20; bottom:24px; left:50%; transform:translateX(-50%); max-width:min(560px,calc(100vw - 32px)); width:max-content; border-radius:10px; padding:13px 18px; background:#393244; color:white; font-size:13px; line-height:1.7; box-shadow:0 6px 24px #302d3a24; }
.status.error { background:#913f43; }
.mobile-tabs,.mobile-action { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
/* ===== 9. ダークモード固有の補正 ===== 共通変数だけで読みにくい色を直します。 */
:root[data-resolved-theme="dark"] .upload-icon { border-color:#51475c; }
:root[data-resolved-theme="dark"] .segmented { background:#19171e; }
:root[data-resolved-theme="dark"] .mixed-warning { background:#332a18; border-color:#80662d; color:#f2d998; }
:root[data-resolved-theme="dark"] .inline-feedback,
:root[data-resolved-theme="dark"] .copy-feedback { background:#203328; color:#bfe0c8; }
:root[data-resolved-theme="dark"] .manual-copy-reason { color:#f0b7bc; }
:root[data-resolved-theme="dark"] .inline-feedback.error,
:root[data-resolved-theme="dark"] .copy-feedback.error,
:root[data-resolved-theme="dark"] .limit-warning { background:#3a2226; color:#f0b7bc; border-color:#784a50; }
:root[data-resolved-theme="dark"] .warning-details { background:#302918; color:#efd99d; border-color:#65562f; }
:root[data-resolved-theme="dark"] .primary { background:#8063a5; color:#fff; }
:root[data-resolved-theme="dark"] .primary:hover:not(:disabled) { background:#9475bd; }
:root[data-resolved-theme="dark"] .primary:disabled { background:#3a3344; color:#dcc9f2; }
/* 赤系の警告文字は暗い背景では沈むため、明るい赤へ置き換えます。 */
:root[data-resolved-theme="dark"] .file-order-buttons .file-remove,
:root[data-resolved-theme="dark"] .danger-toggle strong { color:#f0b7bc; }
:root[data-resolved-theme="dark"] .file-order-buttons .file-remove:hover:not(:disabled) { background:#3a2226; }
:root[data-resolved-theme="dark"] .mobile-action { background:#17151cf2; border-color:var(--line); }
:root[data-resolved-theme="dark"] select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23c4addf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-resolved-theme="dark"] .number-stepper button:active:not(:disabled) { background:#42364f; }
:root[data-resolved-theme="dark"] .switch { background:#514b58; }
:root[data-resolved-theme="dark"] .toggle-row input:checked + .switch { background:#8063a5; }
:root[data-resolved-theme="dark"] .danger-toggle input:checked + .switch { background:#a9585e; }
/* ===== 10. 画面幅別の配置 ===== 901〜1060pxは中間幅（iPad横向きなど）、900px以下はスマホ・iPad縦向き・狭いSplit Viewで工程表示です。 */
@media (min-width:901px) and (max-width:1060px) {
  main { padding:0 20px; }
  .workspace { grid-template-columns:minmax(330px,1fr) minmax(0,1.1fr); gap:15px; }
  .card { padding:18px; }
  .preview-stage { padding:12px; }
  .preview-paper { padding:22px; }
}
@media (max-width:900px) {
  .site-header { height:73px; padding:0 18px; gap:8px; }
  .help-button { min-height:36px; padding:6px 10px; font-size:13px; }
  .help-dialog { padding:18px 16px 20px; }
  .brand > span { font-size:16px; }
  .brand > small { font-size:12px; }
  .header-actions { gap:7px; }
  .theme-control > span { display:none; }
  .theme-control select { min-width:84px; min-height:44px; font-size:13px; }
  main { padding:0 16px; }
  .home-view { padding:32px 0; }
  /* 見出し（約12.6文字幅）が1行に収まる大きさまで画面幅に合わせて縮める。360px で約26px */
  .home-intro h1 { font-size:min(28px,calc((100vw - 32px) / 12.6)); line-height:1.4; }
  .home-intro > p:not(.eyebrow) { margin-top:17px; font-size:15px; line-height:1.85; }
  .home-primary { width:100%; margin-top:23px; min-height:52px; }
  .home-section { margin-top:32px; }
  .home-footer { align-items:flex-start; flex-direction:column; }
  .workspace { margin-top:0; }
  .mobile-tabs { display:flex; gap:4px; position:sticky; top:0; z-index:5; background:var(--canvas); padding:8px 0; }
  .mobile-tabs button { flex:1; border-radius:6px 6px 0 0; min-height:46px; font-size:14px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; }
  .mobile-tabs button > span { font-size:11px; margin-right:3px; opacity:.8; }
  .mobile-tabs button[aria-current="step"] { background:var(--soft); color:var(--accent-dark); border-bottom-color:var(--accent); font-weight:700; }
  .workspace,.editor-column { display:block; }
  .card { padding:16px; border-radius:12px; }
  .section-heading { margin-bottom:18px; }
  .section-heading h2 { font-size:16px; }
  body:not([data-step="source"]) .source-card,body:not([data-step="format"]) .format-card,body:not([data-step="settings"]) .settings-card,body:not([data-step="preview"]) .result-card { display:none; }
  .result-card { position:static; display:block; max-height:none; padding:16px 0 0; }
  .file-drop { padding:18px 8px; }
  .source-mode-switch label span { min-height:52px; display:grid; place-items:center; line-height:1.45; white-space:nowrap; }
  .settings-file-actions { grid-template-columns:1fr 1fr; }
  .settings-file-actions #resetSettings { grid-column:1 / -1; justify-self:end; }
  input[type="text"],select,textarea { font-size:16px; }
  input[type="text"],select { min-height:46px; }
  textarea { min-height:270px; line-height:1.8; padding:12px; }
  .text-button { min-height:44px; font-size:14px; }
  .segmented label span { min-height:44px; padding:12px 5px; font-size:13px; }
  .toggle-row { min-height:78px; gap:10px; }
  .type-symbol { display:none; }
  .spacing-table th:first-child { width:30%; }
  .spacing-table td { padding:8px 3px; }
  .format-options { grid-template-columns:1fr 1fr; }
  .list-style-grid { grid-template-columns:1fr; }
  .marker-rule { grid-template-columns:1fr; align-items:stretch; }
  .preview-stage { padding:8px; max-height:none; min-height:340px; overflow:visible; }
  .preview-paper,.preview-stage[data-device="mobile"] .preview-paper { padding:21px 16px; min-height:320px; }
  .device-switch button { min-height:44px; min-width:50px; font-size:13px; }
  .preview-toolbar > span { line-height:1.7; }
  .copy-choice { grid-template-columns:auto minmax(0,180px); gap:8px; }
  .copy-primary { display:none; }
  body[data-view="helper"] main { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  .mobile-action { display:block; position:fixed; z-index:10; bottom:0; left:0; right:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#f7f6f2f5; border-top:1px solid var(--line); backdrop-filter:blur(10px); }
  .mobile-action button { width:100%; min-height:50px; font-size:15px; justify-content:space-between; padding:12px 18px; }
  .status { bottom:calc(88px + env(safe-area-inset-bottom)); }
}
/* ソフトウェアキーボード表示中（visualViewport が縮んだとき）は固定ボタンを隠し、入力欄を覆わないようにします。 */
body[data-keyboard="open"] .mobile-action { display:none !important; }
body[data-keyboard="open"] main { padding-bottom:24px; }
/* 処理中はボタン類を薄くし、二重操作を防ぎます。 */
body[data-busy] .copy-primary,body[data-busy] .mobile-action button,body[data-busy] .file-drop { pointer-events:none; opacity:.6; }
@media (max-width:360px) {
  main { padding:0 10px; }
  .card { padding:17px 13px; }
}
/* 動きを減らすOS設定を尊重し、開閉アニメーションを強制しません。 */
@media (prefers-reduced-motion:reduce) { *,*::after { transition:none !important; } }