/* 3案共通の部品。色や書体は各案の CSS 変数で上書きする */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus, #2b7de9); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* 画像枠（差し替え前提） */
.ph { position: relative; overflow: hidden; background: var(--ph-bg, #e9e7e2); }
.ph > img { width: 100%; height: 100%; object-fit: cover; }
.ph[data-kind="gen"]:not(.is-missing)::after {
  content: "イメージ"; position: absolute; right: 8px; bottom: 8px; z-index: 2;
  padding: 3px 8px; border-radius: 3px; background: rgba(0, 0, 0, .55); color: #fff;
  font: 500 11px/1.4 "Noto Sans JP", sans-serif; letter-spacing: .08em; pointer-events: none;
}
.ph-note { display: none; }
.ph.is-missing > img { display: none; }
.ph.is-missing {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.035) 14px 28px),
    var(--ph-bg, #e9e7e2);
  border: 1px dashed var(--ph-line, rgba(0,0,0,.25));
  min-height: 120px;
}
.ph.is-missing .ph-note {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 12px; text-align: center; color: var(--ph-ink, #6b6760);
  font: 500 12px/1.5 "Noto Sans JP", sans-serif;
}
.ph.is-missing .ph-note b { font-size: 13px; }
.ph.is-missing .ph-note span { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; opacity: .8; word-break: break-all; }

/* ビフォーアフター比較 */
.ba { position: relative; overflow: hidden; --pos: 50%; aspect-ratio: 670 / 768; background: #222; user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.ba .ba-bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; z-index: 3; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.ba .ba-bar::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #222; display: grid; place-items: center;
  font: 700 16px/1 system-ui, sans-serif; letter-spacing: 2px; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.ba input[type=range]:focus-visible ~ .ba-bar::after { outline: 3px solid var(--focus, #2b7de9); }
.ba .ba-lbl { position: absolute; top: 10px; z-index: 3; padding: 3px 9px; border-radius: 3px; background: rgba(0,0,0,.55); color: #fff; font: 500 12px/1.5 "Noto Sans JP", sans-serif; pointer-events: none; }
.ba .ba-lbl.is-b { left: 10px; }
.ba .ba-lbl.is-a { right: 10px; }
.ba[data-kind="gen"]::after {
  content: "イメージ"; position: absolute; right: 8px; bottom: 8px; z-index: 3; padding: 3px 8px; border-radius: 3px;
  background: rgba(0,0,0,.55); color: #fff; font: 500 11px/1.4 "Noto Sans JP", sans-serif; letter-spacing: .08em; pointer-events: none;
}
.ba.is-missing { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.04) 14px 28px), var(--ph-bg, #e9e7e2); }
.ba.is-missing img, .ba.is-missing .ba-bar { display: none; }

/* フォーム共通 */
.form-msg { margin-top: 12px; padding: 10px 12px; border-radius: 6px; background: rgba(0,0,0,.06); font-size: 14px; }

/* プレビュー注記の帯 */
.preview-band { font: 500 12px/1.6 "Noto Sans JP", sans-serif; text-align: center; padding: 6px 16px; background: #1c1c1c; color: #f0eee9; }
.preview-band a { color: inherit; }