:root {
  --bg: #f2f2ef;
  --surface: #ffffff;
  --ink: #17171a;
  --ink-2: #6d6d76;
  --ink-3: #a1a1a9;
  --line: #ebebe8;
  --accent: #1d9bf0;
  --warn: #e0245e;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(23, 23, 26, .05), 0 8px 24px -12px rgba(23, 23, 26, .12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }

/* 日本語は単語の区切りが無いため、既定の折り返しだと文節の途中で切れて読みにくい。
   auto-phrase は文節単位で折り返す（未対応ブラウザでは従来どおりになるだけ） */
body { word-break: auto-phrase; }
/* 最終行に1〜2文字だけ残るのを避ける */
p, li, figcaption { text-wrap: pretty; }
/* 見出しは行の長さを揃えたほうが収まりが良い */
h1, h2, h3 { text-wrap: balance; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* ---------- header ---------- */
.app-header { padding: 40px 0 28px; }
.header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.brand h1 { font-size: 23px; }
/* 見出しは検索結果と揃えたいので、広い画面ではtitleと同じ長い文字列を出す。
   狭い画面では3行になってヘッダーが画面の半分近くを占めるため、短い名前に切り替える */
.h1-short { display: none; }
.tagline { margin-top: 2px; color: var(--ink-2); font-size: 14px; }
.formats {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
  /* 幅を絞ると、右に余白があるのに折り返してしまう。
     行の長さは .wrap の最大幅（1180px）と右の「端末内で処理」の表示で十分に決まる */
}
.formats strong { color: var(--ink-2); font-weight: 600; }
/* 精度を売りにしている以上、どこまでを保証しているかは先に言っておく */
.caveat { margin-top: 4px; }

.privacy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-2);
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}

/* ---------- segmented control ---------- */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #f0f0ed;
  border-radius: 999px;
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(23, 23, 26, .1);
}
.segmented.small .seg-btn { font-size: 12.5px; padding: 4px 12px; }

/* 他の segmented はカード（白）の上に載るが、モードタブだけはページ地の上に載る。
   地をグレーにしたぶん、トラックも一段暗くしないと沈んで見えなくなる */
.mode-tabs { margin-bottom: 20px; background: #e6e6e2; }

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 20px;
  align-items: start;
  padding-bottom: 48px;
}
.editors, .previews {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.previews { position: sticky; top: 20px; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.card-head h2 { font-size: 16px; }
.sub { margin-top: 1px; font-size: 13px; color: var(--ink-3); }
.head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.dim { color: var(--ink-3); font-weight: 400; }

/* ---------- mode visibility ---------- */
body.mode-icon   #editor-header,
body.mode-icon   #export-header-row,
body.mode-icon   #pv-profile-box,
body.mode-header #editor-icon,
body.mode-header #export-icon-row,
body.mode-header #pv-icon-box { display: none; }
body.mode-header #export-header-row { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- dropzone ---------- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 168px;
  padding: 24px;
  text-align: center;
  background: #fbfbfa;
  border: 1px dashed #dcdcd7;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, background .15s, transform .15s;
}
.dropzone:hover,
.dropzone:focus-visible { border-color: var(--accent); background: #f5fafe; }
.dropzone.dragover {
  border-color: var(--accent);
  background: #eef7fe;
  transform: scale(1.006);
}
.dz-icon { width: 26px; height: 26px; color: var(--ink-3); margin-bottom: 8px; }
.dropzone:hover .dz-icon, .dropzone.dragover .dz-icon { color: var(--accent); }
.dz-main { font-size: 15px; font-weight: 600; }
.dz-sub { font-size: 13px; color: var(--ink-3); }
.dz-formats {
  margin-top: 10px;
  font-size: 12.5px;
  color: #b9b9c0;
  letter-spacing: .02em;
}
kbd {
  font: inherit;
  font-size: 12.5px;
  background: #f0f0ed;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-2);
}

/* ---------- crop stage ---------- */
.crop-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #f0f0ed;
  touch-action: none;
}
.crop-stage canvas.dragging { cursor: grabbing !important; }
.hint { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* ---------- zoom ---------- */
.zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.zoom-btn {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.zoom-btn:hover:not(:disabled) { background: #f7f7f5; border-color: #dcdcd7; }
.zoom-btn:disabled { opacity: .35; cursor: not-allowed; }
.zoom-slider { flex: 1 1 auto; width: auto; min-width: 0; }
.zoom-slider:disabled { opacity: .35; cursor: not-allowed; }
/* ---------- 余白と色 ---------- */
.margin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.btn-margin.active { color: var(--ink); border-color: #d8d8d3; background: #f7f7f5; }
.palette { display: flex; gap: 6px; }
.swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 7px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.swatch:hover { transform: translateY(-1px); }
.swatch.active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.swatch-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
}
.swatch-custom input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  cursor: pointer;
}
.zoom-value {
  flex: none;
  min-width: 44px;
  text-align: right;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.key-blue { color: var(--accent); font-weight: 600; }
.key-red { color: var(--warn); font-weight: 600; }
/* ボタンは半透明で下の絵が透けるので、隠れる範囲の赤とは区別する */
.key-gray { color: #6b6b73; font-weight: 600; }

/* ---------- sharpen ---------- */
.slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.slider-label { font-size: 14px; font-weight: 600; }
.sharpen-head { margin-top: 22px; }
.value-badge {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: #f4f4f1;
  border-radius: 999px;
  padding: 2px 11px;
  white-space: nowrap;
}
input[type="range"] {
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #e8e8e4;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid #d8d8d3;
  box-shadow: 0 1px 4px rgba(23, 23, 26, .2);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid #d8d8d3;
  box-shadow: 0 1px 4px rgba(23, 23, 26, .2);
  cursor: grab;
}
.range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.compare-hint { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }
.compare {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.compare figure { margin: 0; flex: 1; min-width: 0; }
.compare canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #f0f0ed;
  cursor: grab;
  touch-action: none;
}
.compare canvas.dragging { cursor: grabbing; }
figcaption {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.5;
}
.mini { display: block; font-size: 11.5px; color: #b9b9c0; }
/* スライダー操作中は簡易品質で描いているので、仕上がりと見分けられるようにする */
.render-state {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.7;
  background: #eef0f4;
  color: var(--ink-3);
}
.render-state.busy { background: #fdf0d5; color: #8a6200; }
.render-state.done { background: #e7f4ec; color: #1c7a45; }

/* ---------- previews ---------- */
.preview-box + .preview-box { margin-top: 22px; }
.box-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.link-btn:hover { opacity: .75; }
#pv-profile { cursor: zoom-in; }
.preview-box canvas { display: block; max-width: 100%; }
#pv-profile {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #f0f0ed;
}
.icon-previews {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.icon-previews figure { margin: 0; }
.icon-previews canvas { border-radius: 50%; background: #f0f0ed; }
#pv-icon-large { border-radius: 12px; }

/* 片方が非表示のときに余白が残らないように */
body.mode-icon #pv-icon-box,
body.mode-header #pv-profile-box { margin-top: 0; }

/* 片方だけのモードでは調整対象を選ぶ必要がない */
body:not(.mode-both) .sharpen-tabs { display: none; }

/* 環境切替はヘッダー編集とプレビューの両方に効くので、どちらにも置いて状態を共有する。
   プレビュー側はカード全体に効くことが伝わるよう、見出しの下に1行で全幅にする */
.preview-card .env-tabs { display: flex; margin-bottom: 18px; }
.preview-card .env-tabs .seg-btn { flex: 1; }
/* ヘッダーの見え方を変えるものなので、アイコンだけのときは出さない */
body.mode-icon .env-tabs { display: none; }

/* プレビューを見て「自分の機種と違う」と思った瞬間が、いちばん報告してもらいやすい。
   だから問い合わせページではなく、プレビューの直下に導線を置く */
.preview-report {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.preview-report a { color: var(--accent); }

/* ダーク背景でのプレビュー */
.preview-card.dark {
  background: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
}
.preview-card.dark h2 { color: #e7e9ea; }
.preview-card.dark .label,
.preview-card.dark figcaption { color: #71767b; }
.preview-card.dark .mini { color: #5a5f63; }
.preview-card.dark .preview-report { color: #5a5f63; border-top-color: #2f3336; }
.preview-card.dark .segmented { background: #202327; }
.preview-card.dark .seg-btn { color: #8b98a5; }
.preview-card.dark .seg-btn.active { background: #2f3336; color: #e7e9ea; box-shadow: none; }
.preview-card.dark #pv-profile,
.preview-card.dark .icon-previews canvas { background: #16181c; }

/* ---------- export ---------- */
.export-row + .export-row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.export-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.export-label { font-size: 14px; font-weight: 600; }

.btn-primary {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn-primary:hover:not(:disabled) { background: #35353c; }
.btn-primary:disabled { background: #e8e8e4; color: var(--ink-3); cursor: not-allowed; }

.btn-ghost {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  padding: 3px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: #f7f7f5; border-color: #dcdcd7; }

/* ガイドの表示切替とスポイト。押されている＝その状態が続いていると分かるようにする */
.btn-guide::before,
.btn-pick::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
  background: #d5d5d0;
}
.btn-guide.active,
.btn-pick.active { color: var(--ink); border-color: #d8d8d3; }
.btn-guide.active::before,
.btn-pick.active::before { background: var(--warn); }
.pick-hint { margin-top: 8px; font-size: 13px; color: var(--ink-3); }

/* ヘッダーに重なるボタンの数。プロフィールの状態で変わるので選べるようにする */
.nav-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.nav-count select {
  flex: 1;
  min-width: 0;
  max-width: 120px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
/* 数だけでは何を選ぶのか分からないので、表で説明を出す */
.nav-help-btn {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.nav-help-btn:hover { background: #f7f7f5; color: var(--ink); border-color: #dcdcd7; }

.nav-help-panel { width: min(420px, 100%); }
.help-cap {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.help-cap:first-child { margin-top: 0; }
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.help-table th,
.help-table td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: center;
}
.help-table thead th {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: #f7f7f5;
  line-height: 1.5;
}
.help-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.help-table td { font-variant-numeric: tabular-nums; }
/* 既定にしている段。ヘッダーを見るのは主に他人なので、そこに目が行くようにする */
.help-table .highlight td,
.help-table .highlight th { background: #fdf6e3; }

.export-status {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  min-height: 1.4em;
}
.export-status.warn { color: var(--warn); }
.note { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }

/* せっかく調整した画質を最後で落とさないための注意。書き出しの直後＝
   これからXに設定しに行く場面で出すので、他のnoteより強く見せる */
.note-strong {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfbfa;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}
.note-strong strong { color: var(--ink); }
.note-strong code {
  font-size: 12px;
  background: #f0f0ed;
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---------- 実物大プレビュー ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 26, .5);
}
.modal-panel {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 20px;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.modal-head h2 { font-size: 16px; }
.modal-tools { display: flex; align-items: center; gap: 10px; }
.modal-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: #f0f0ed;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: #e6e6e2; color: var(--ink); }
.modal-body { overflow-x: auto; }
/* 実物大なので縮めない。狭い画面では横スクロールさせる */
#pv-profile-actual { display: block; max-width: none; border-radius: 12px; }

.modal-panel.dark { background: #000; }
.modal-panel.dark h2 { color: #e7e9ea; }
.modal-panel.dark .sub { color: #71767b; }
.modal-panel.dark .segmented { background: #202327; }
.modal-panel.dark .seg-btn { color: #8b98a5; }
.modal-panel.dark .seg-btn.active { background: #2f3336; color: #e7e9ea; box-shadow: none; }
.modal-panel.dark .modal-close { background: #202327; color: #8b98a5; }
.modal-panel.dark .modal-close:hover { background: #2f3336; color: #e7e9ea; }

/* 実物大は「原寸で出す」ことに意味があるので、画面が狭いときは余白を捨てて
   内容の幅を優先する。411dpの端末で411dpのモックがちょうど収まる */
@media (max-width: 700px) {
  .modal { padding: 0; }
  .modal-panel {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 16px 0 24px;
  }
  .modal-head { padding-inline: 16px; flex-wrap: wrap; gap: 12px; }
  .modal-body { padding-bottom: 4px; }
  #pv-profile-actual { border-radius: 0; }
  /* 左右の余白を捨てるのは実物大のモックのため。
     説明の表は原寸である必要が無いので、読みやすさを優先して余白を戻す */
  .nav-help-panel { padding-inline: 16px; }
  .nav-help-panel .modal-head { padding-inline: 0; }
}

.hidden { display: none !important; }

/* ---------- 説明ページ（About / プライバシー / お問い合わせ） ---------- */
.page {
  max-width: 720px;
  margin-inline: auto;
  padding-bottom: 56px;
  font-size: 15px;
  color: var(--ink-2);
}
.page h2 {
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 20px;
}
.page h3 {
  font-size: 16px;
  color: var(--ink);
  margin-top: 32px;
  margin-bottom: 8px;
}
.page h4 {
  font-size: 15px;
  color: var(--ink);
  margin-top: 24px;
  margin-bottom: 6px;
}
.page p { margin-bottom: 14px; line-height: 1.85; }

/* 解説記事の図。横長なので、狭い画面では自分の中で横スクロールさせる */
.article-figure { margin: 20px 0 24px; }
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.article-figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* 凡例は画像の中ではなくHTMLで持つ。図を縮めても文字が潰れないため */
.legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.legend li { display: flex; align-items: center; gap: 7px; }
.swatch {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(23, 23, 26, .12);
}
/* 図の地 rgb(236,240,244) に半透明色を重ねた結果を、そのまま計算して置いている */
.sw-cut  { background: #e690ae; }
.sw-btn  { background: #909396; }
.sw-icon { background: #e688a8; }
.sw-safe { background: #c0ddd4; border-color: #22965e; }
.page strong { color: var(--ink); font-weight: 600; }
.page a { color: var(--accent); }
.page code {
  font-size: 13px;
  background: #ebebe6;
  border-radius: 4px;
  padding: 1px 6px;
}

.table-scroll { overflow-x: auto; margin: 16px 0 20px; }
.page table { border-collapse: collapse; width: 100%; font-size: 14px; }
.page th, .page td {
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
}
.page th { color: var(--ink); font-weight: 600; background: #fbfbfa; }

.revised { font-size: 13px; color: var(--ink-3); margin-top: 28px; }
.back-link { display: inline-block; margin-top: 28px; font-size: 14px; }
.home-link { color: inherit; text-decoration: none; }
.home-link:hover { text-decoration: underline; }

/* ---------- お問い合わせ ---------- */
/* フォームは外部（Googleフォーム）なので、送信ボタンではなく「別ページへ移る」と
   分かる見た目にする。押した先で何が起きるかは .form-note で先に書く */
.form-cta { margin: 24px 0 12px; }
.btn-link {
  display: inline-block;
  border-radius: 10px;
  background: var(--ink);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 11px 28px;
  transition: background .15s;
}
.btn-link:hover { background: #35353c; }
/* ---------- 協力のお願い ---------- */
/* 手順は「いくつあるか」と「いま何番か」が一目で要るので番号を大きく出す */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 16px;
  line-height: 1.8;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.step-note {
  display: block;
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.plain-list { margin: 14px 0 20px; padding-left: 22px; }
.plain-list li { margin-bottom: 8px; line-height: 1.8; }

.form-note { font-size: 13.5px; line-height: 1.75; color: var(--ink-3); }
/* code の見た目は .page code に任せる。ここで背景を持つと、ページ地を
   グレーにしたときに同色になって消える（実際に一度消した） */
.form-note code { font-size: 12.5px; }

/* ---------- footer ---------- */
.app-footer {
  padding-bottom: 40px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.footer-nav a { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  /* 縦一列になるので、画像を入れる→調整する→結果を見る→書き出す の順に並べる。
     プレビューを上に置いても、画像を入れる前は見るものが無い */
  .previews { position: static; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .app-header { padding: 28px 0 20px; }
  .card { padding: 18px; }
  .icon-previews { gap: 12px; }
  /* 長いtitleのままだと3行になり、ヘッダーだけで画面の半分近くを使ってしまう */
  .h1-full { display: none; }
  .h1-short { display: inline; }
  /* 見出しと操作を横に並べると窮屈なので、縦に積む */
  .card-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .head-tools { justify-content: flex-start; }
  /* 比較画像も横に2枚並べると1枚が画面の4割しかなく、ヘッダーだと横1割しか見えない。
     縦に積んで全幅にすると1枚あたり2倍以上広くなる */
  /* 見出しは画像の下に付く。縦に積むと次の画像との距離が近すぎて
     どちらの見出しか読み違えるので、組の間隔を見出しより広く取る */
  .compare { flex-direction: column; gap: 22px; }
  .compare figure { flex: 0 0 auto; width: 100%; }
  /* 縦に積むとスライダーから遠いほうが「調整後」になる。
     いじりながら見たいのは調整後なので、スライダーのすぐ下へ入れ替える */
  .compare figure:last-child { order: -1; }
}