:root {
  --bg: #f6f2ea;
  --surface: #ffffff;
  --surface-2: #efe9dd;
  --ink: #2a2723;
  --ink-2: #615a50;
  --line: #e2dbcd;
  --accent: #2e8b67;
  --accent-ink: #ffffff;
  --accent-soft: #dcefe5;
  --warm: #e8a33d;
  --warm-soft: #fbedd5;
  --warm-ink: #8a5a0f;
  --danger: #c4513b;
  --shadow: 0 1px 2px rgb(60 45 20 / 6%), 0 6px 20px rgb(60 45 20 / 8%);
  --radius: 18px;
  --font-round: 'Zen Maru Gothic', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #181614;
    --surface: #232019;
    --surface-2: #2d2a22;
    --ink: #f1ece3;
    --ink-2: #aaa293;
    --line: #3a352c;
    --accent: #4fbf92;
    --accent-ink: #0f1f18;
    --accent-soft: #1f3a2f;
    --warm-soft: #3d2f17;
    --warm-ink: #f0c070;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 30%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  line-height: 1.6;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-round); line-height: 1.35; margin: 0; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ヘッダー */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-round); font-weight: 700; font-size: 18px; }
.icon-btn {
  border: 0; background: var(--surface); color: var(--ink);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: var(--shadow); cursor: pointer;
}
.icon-btn { position: relative; flex: none; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px; background: var(--danger); color: #fff;
  font: 700 11px/18px system-ui, sans-serif; text-align: center;
}

main { max-width: 560px; margin: 0 auto; padding: 8px 16px 40px; }
.screen { display: flex; flex-direction: column; gap: 14px; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* ボタン */
.btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 20px;
  border-radius: 99px; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none;
  cursor: pointer; transition: transform .1s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn:focus-within, .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-xl { min-height: 62px; font-size: 18px; }
.btn[disabled] { filter: grayscale(.6) opacity(.6); pointer-events: none; }

/* ホーム */
.hero { padding: 8px 0 6px; }
.hero-art { display: flex; align-items: center; gap: 10px; margin: 6px 0 22px; }
.hero-card {
  flex: 1; aspect-ratio: 4 / 3; border-radius: var(--radius); position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-card span {
  position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 700;
  background: rgb(255 255 255 / 85%); color: #2a2723; padding: 1px 8px; border-radius: 99px;
}
.hero-card.before {
  background:
    radial-gradient(circle at 22% 30%, #e76f51 0 9%, transparent 9.5%),
    radial-gradient(circle at 68% 24%, #7aa6c2 0 7%, transparent 7.5%),
    linear-gradient(28deg, transparent 46%, #e9c46a 46% 54%, transparent 54%) 10% 60% / 50% 40% no-repeat,
    linear-gradient(-18deg, transparent 44%, #8ab17d 44% 56%, transparent 56%) 80% 70% / 45% 35% no-repeat,
    radial-gradient(circle at 52% 58%, #b8a1d9 0 6%, transparent 6.5%),
    #efe2cc;
}
.hero-card.after {
  background:
    linear-gradient(#7aa6c2, #7aa6c2) 14% 62% / 22% 42% no-repeat,
    linear-gradient(#e9c46a, #e9c46a) 42% 62% / 22% 42% no-repeat,
    linear-gradient(#8ab17d, #8ab17d) 70% 62% / 16% 42% no-repeat,
    linear-gradient(#cdbb9c, #cdbb9c) 0 84% / 100% 6% no-repeat,
    #f3ead9;
}
.hero-arrow { font-size: 22px; color: var(--accent); font-weight: 700; }
.hero h1 { font-size: clamp(24px, 7vw, 30px); }
.lead { color: var(--ink-2); margin: 10px 0 4px; font-size: 15px; }

.tips { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.tips li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.tips b {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 13px;
}

/* 写真 */
.photo-frame {
  margin: 0; border-radius: var(--radius); overflow: hidden; position: relative;
  background: var(--surface-2); box-shadow: var(--shadow);
}
.photo-frame img { width: 100%; max-height: 62dvh; object-fit: contain; margin: 0 auto; }
.scanning img { filter: saturate(.7) brightness(.95); }
.scanline {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 45%, transparent) 48%, transparent 52%);
  background-size: 100% 220%;
  animation: scan 2.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes scan { 0% { background-position: 0 100%; } 100% { background-position: 0 0%; } }

/* 進行ステップ */
.steps { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.steps li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  background: var(--surface); border-radius: 14px; padding: 14px 16px; color: var(--ink-2);
  box-shadow: var(--shadow); font-weight: 600; font-size: 15px;
}
.steps li::before {
  content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line);
}
.steps li small { flex-basis: 100%; padding-left: 32px; font-weight: 400; font-size: 12px; }
.steps li.active { color: var(--ink); }
.steps li.active::before { border-color: var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }
.steps li.done { color: var(--ink); }
.steps li.done::before {
  border-color: var(--accent); background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 比較スライダー */
.compare {
  margin: 0; position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: var(--surface-2); touch-action: pan-y;
  --pos: 50%;
}
.compare > img { width: 100%; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-before img { width: 100%; height: 100%; object-fit: cover; }
.compare-label {
  position: absolute; top: 10px; font-size: 12px; font-weight: 700;
  background: rgb(0 0 0 / 55%); color: #fff; padding: 2px 10px; border-radius: 99px; pointer-events: none;
}
.compare-label { transition: opacity .15s ease; }
.compare-label.gone, .compare-before.gone { opacity: 0; visibility: hidden; }
.compare-label.left { left: 10px; }
.compare-label.right { right: 10px; background: var(--accent); color: var(--accent-ink); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: #fff; pointer-events: none; box-shadow: 0 0 8px rgb(0 0 0 / 30%);
}
.compare-handle span {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow);
}
.compare-handle span::before {
  content: '‹ ›'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #2a2723; font-weight: 700; letter-spacing: 2px;
}
.compare input[type='range'] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}

/* After 画像の番号ピン */
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  background: var(--accent); color: var(--accent-ink); border: 2px solid #fff;
  font: 700 15px/1 var(--font-round);
  box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
  transition: opacity .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pin::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid #fff; opacity: .7; animation: ping 2s ease-out infinite;
}
.pin:active { transform: translate(-50%, -50%) scale(.92); }
.pin:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pin.covered { opacity: 0; pointer-events: none; }
@keyframes ping { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin::after { animation: none; } }
.pin-hint { margin: -4px 0 0; font-size: 12px; color: var(--accent); font-weight: 600; }
/* 番号を隠す／表示するボタン（画像の右下） */
.pins.off { display: none; }
.pins-toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px 6px 10px;
  border: 0; border-radius: 99px; background: rgb(0 0 0 / 30%); color: rgb(255 255 255 / 85%);
  font: 700 12px/1 var(--font-round, inherit); cursor: pointer; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(2px); opacity: .75; transition: opacity .15s ease;
}
.pins-toggle:hover, .pins-toggle:active, .pins-toggle:focus-visible { opacity: 1; }
.pins-toggle .eye-off { display: none; }
.pins-toggle[aria-pressed='true'] .eye-off { display: inline; }
.pins-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.product { scroll-margin-top: 72px; }
.product.flash { animation: flash 1.4s ease; }
@keyframes flash {
  0%, 40% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
  100% { box-shadow: var(--shadow); }
}

/* カード */
.card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.summary p { margin: 0; }
.eyebrow { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.found-title { margin: 14px 0 6px; font-size: 13px; color: var(--ink-2); font-weight: 700; }
.found-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.found-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 14px;
}
.found-name { font-weight: 600; min-width: 0; }
.found-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.found-brand {
  font-size: 11px; font-weight: 700; padding: 0 8px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}
.found-coverage { margin: -2px 0 8px; font-size: 12px; color: var(--ink-2); }
.found-list li.is-missing .found-name { color: var(--ink-2); }
.found-missing {
  font-size: 11px; font-weight: 700; padding: 0 8px; border-radius: 99px;
  background: var(--warm-soft); color: var(--warm-ink);
}
.found-to {
  margin-left: auto; border: 0; cursor: pointer;
  font: 700 12px/1 var(--font-round); padding: 5px 10px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.section-head h2 { font-size: 20px; }
.total { margin: 0; font-size: 13px; color: var(--ink-2); }
.total strong { font-size: 18px; color: var(--ink); }

.pr-note { margin: -4px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.pr-note span {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--ink-2); color: var(--ink-2);
}
.product-list { display: grid; gap: 14px; }
.product-head { display: flex; gap: 12px; }
.product-no {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-family: var(--font-round);
}
.product-name { font-size: 17px; }
.product-reason { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.product-for { margin-top: 8px; }

.offers { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.offer {
  display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center;
  padding: 10px; border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none;
}
.offer img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.offer-body { min-width: 0; }
.offer-title {
  font-size: 13px; line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.offer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.offer-price { font-size: 17px; font-weight: 700; color: var(--ink); }
.offer-shop { font-weight: 700; }
.offer-cta {
  grid-column: 1 / -1; text-align: center; padding: 9px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px;
}
.offer.best { border-color: var(--accent); }
.best-tag { font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 0 8px; border-radius: 99px; }
.partner-tag { font-size: 11px; font-weight: 700; color: var(--ink-2, #6b645b); border: 1px solid currentColor; padding: 0 7px; border-radius: 6px; }
.offer-coupon { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.product-need { margin: 8px 0 0; font-size: 13px; color: var(--ink); }
.product-need span {
  display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 700; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px;
}
.offer-fit { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.offer-fit b { font-size: 11px; padding: 1px 8px; border-radius: 99px; margin-right: 4px; }
.offer-fit.ok b { background: var(--accent-soft); color: var(--accent); }
.offer-fit.check b { background: var(--warm-soft); color: var(--warm-ink); }
.image-note { margin: -4px 0 0; font-size: 12px; color: var(--ink-2); }
.no-offers { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }

.more-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.more-links span { flex-basis: 100%; }
.more-links a {
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); padding: 5px 12px; border-radius: 99px;
}

.fineprint { font-size: 11px; color: var(--ink-2); margin: 0; }
.fineprint a { color: var(--ink-2); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
/* 利用規約・プライバシーポリシーのページ */
a.brand { color: inherit; text-decoration: none; }
button.brand {
  border: 0; background: none; padding: 4px 6px 4px 0; margin: 0;
  color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  white-space: nowrap; flex-shrink: 0;
}
button.brand:active { opacity: .6; }
a.icon-btn { text-decoration: none; }
.doc { line-height: 1.85; font-size: 15px; }
.doc h1 { font-size: 24px; margin: 8px 0 4px; }
.doc h2 { font-size: 17px; margin: 28px 0 8px; padding-left: 10px; border-left: 4px solid var(--accent); }
.doc p, .doc li { max-width: 40em; }
.doc ul, .doc ol { padding-left: 1.4em; margin: 8px 0; }
.doc li + li { margin-top: 4px; }
.doc a { color: var(--accent); }
.doc-meta { color: var(--ink-2); font-size: 13px; margin-top: 0; }
.table-wrap { overflow-x: auto; margin: 10px 0; }
.doc-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13px; line-height: 1.6; }
.doc-table th, .doc-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc-table th { background: var(--surface-2); }
.doc-contact { background: var(--surface); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.mail { user-select: all; word-break: break-all; }
.doc-links { margin-top: 28px; font-size: 14px; }

/* アプリ下部のリンク */
.site-footer {
  max-width: 560px; margin: 0 auto; padding: 0 16px calc(env(safe-area-inset-bottom) + 28px);
  font-size: 12px; color: var(--ink-2); text-align: center;
}
.site-footer a { color: var(--ink-2); }
.send-note { margin: -6px 0 0; text-align: center; font-size: 11px; color: var(--ink-2); line-height: 1.6; }
.send-note a { color: var(--ink-2); }

.quota-note { margin: -6px 0 0; text-align: center; font-size: 12px; color: var(--ink-2); }
.quota-note.empty-quota { color: var(--danger); font-weight: 600; }
.btn-sm { min-height: 42px; padding: 8px 14px; font-size: 14px; }

/* 条件の指定 */
.options { padding: 0; }
.options summary {
  list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.options summary::-webkit-details-marker { display: none; }
.options summary::after { content: '＋'; margin-left: auto; color: var(--accent); font-size: 18px; }
.options[open] summary::after { content: '－'; }
.options summary small { color: var(--ink-2); font-weight: 400; }
.opt-body { display: grid; gap: 16px; padding: 0 16px 16px; }
.opt-row { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.opt-label { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 0; }
.opt-label small { font-weight: 400; }
.opt-help { margin: -4px 0 0; font-size: 12px; color: var(--ink-2); }
.options select, .options input[type='number'] {
  font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px;
}
.opt-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.opt-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center; padding: 9px 4px; border-radius: 10px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer;
}
.seg input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.seg input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.size-inputs { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.size-inputs input { width: 5.5em; margin: 0 4px; }
.owned { display: flex; flex-wrap: wrap; gap: 8px; }
.owned:empty { display: none; }
.owned figure { position: relative; margin: 0; width: 84px; }
.owned img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.owned figcaption { font-size: 11px; color: var(--ink-2); text-align: center; }
.owned-del {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: var(--ink); color: var(--bg); font-weight: 700; cursor: pointer;
}
.owned-use { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px; border-radius: 14px; background: var(--accent-soft); }
.owned-use img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.owned-use p { margin: 0; font-size: 13px; }

/* 結果画面の追加ブロック */
.cond-chips { margin-top: -4px; }
.cond-chips:empty { display: none; }
.budget-note { margin: -6px 0 0; font-size: 13px; color: var(--accent); font-weight: 600; }
.budget-note.over { color: var(--danger); }
.block { display: grid; gap: 10px; }
.block h2 { font-size: 18px; }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.block-meta { margin: 0; font-size: 12px; color: var(--ink-2); }
.block-help { margin: 0; font-size: 13px; color: var(--ink-2); }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.todo input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.todo-body { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.todo-body b { font-size: 15px; color: var(--ink); }
.todo-body small { font-size: 11px; }
.todo li.done .todo-body b { text-decoration: line-through; color: var(--ink-2); }
.letgo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.letgo li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-2); }
.letgo li b { color: var(--ink); font-size: 14px; }
.letgo li > span:last-child { flex-basis: 100%; }
.letgo-tag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; }
.letgo-tag.toss { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.letgo-tag.pass { background: var(--accent-soft); color: var(--accent); }
.letgo-tag.review { background: var(--warm-soft); color: var(--warm-ink); }
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.triple figure { margin: 0; min-width: 0; }
.triple img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.triple figcaption { text-align: center; font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.remake { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.share-preview { margin: 0; }
.share-preview img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }

/* 買う物リストに追加 */
.offer-save {
  margin-top: 6px; width: 100%; border: 1px dashed var(--line); background: transparent; color: var(--ink-2);
  font: 600 13px/1 inherit; padding: 10px; border-radius: 99px; cursor: pointer;
}
.offer-save.on { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* 履歴・買う物リスト画面 */
.page-title { font-size: 24px; margin-top: 4px; }
.empty { margin: 8px 0; padding: 24px 16px; text-align: center; color: var(--ink-2); font-size: 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.history, .buy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.history-item { display: grid; gap: 8px; padding: 10px; }
.history-open {
  display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; text-align: left;
  border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer;
}
.history-open img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.history-body { display: grid; gap: 2px; min-width: 0; font-size: 12px; color: var(--ink-2); }
.history-body b { font-size: 16px; color: var(--ink); font-family: var(--font-round); }
.history-del {
  justify-self: end; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; padding: 4px 8px;
}
.history-del.confirm { color: #fff; background: var(--danger); border-radius: 99px; }
.list-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.list-summary p { margin: 0; }
.list-summary strong { font-size: 20px; }
.buy-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px; }
.buy-item.bought { opacity: .55; }
.buy-item.bought .offer-title { text-decoration: line-through; }
.buy-check input { width: 24px; height: 24px; accent-color: var(--accent); }
.buy-link { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.buy-link img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.buy-body { display: grid; gap: 2px; min-width: 0; }
.buy-body small { font-size: 11px; color: var(--ink-2); }
.buy-del { border: 0; background: none; color: var(--ink-2); font-size: 20px; cursor: pointer; width: 32px; height: 32px; }

/* いちばん上に戻るボタン（少しスクロールすると右下に薄く出る） */
.to-top {
  position: fixed; z-index: 15;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--ink);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.to-top.show { opacity: .55; transform: none; pointer-events: auto; }
.to-top.show:hover, .to-top.show:focus-visible { opacity: 1; }
.to-top:active { transform: scale(.94); }
.to-top:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

.toast.ok { background: var(--ink); color: var(--bg); }

/* トースト */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 16px);
  max-width: 528px; margin: 0 auto; z-index: 20;
  background: var(--danger); color: #fff; padding: 12px 16px; border-radius: 14px;
  box-shadow: var(--shadow); font-size: 14px; animation: fade .2s ease;
}

/* =========================================================
   UI/UX 調整（2026-10）
   ========================================================= */

/* ヘッダー：アイコンに文字ラベルを付けて、何のボタンか分かるように */
.nav-btn {
  position: relative; flex: none;
  display: grid; justify-items: center; gap: 1px;
  min-width: 48px; min-height: 44px; padding: 4px 6px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  font: 600 10px/1.2 system-ui, sans-serif; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn:active { background: var(--surface-2); }
.nav-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.nav-btn .badge { top: 0; right: 4px; }
.top-actions { gap: 2px; }

/* 撮影後：写真の上に「撮り直す」、整頓ボタンは画面下に固定 */
.photo-frame { position: relative; }
.photo-retake {
  position: absolute; right: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px; border-radius: 99px;
  background: rgb(0 0 0 / 55%); color: #fff; backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.screen.has-dock { padding-bottom: 110px; }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 12px) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent));
  display: grid; gap: 6px; justify-items: stretch;
}
.dock > * { width: 100%; max-width: 528px; margin: 0 auto; }
.dock .quota-note { margin: 0; }
.send-note { margin: 0; text-align: left; font-size: 12px; }
.screen.has-dock ~ .to-top, body:has(#screen-preview:not([hidden])) .to-top { display: none; }
body:has(#screen-preview:not([hidden])) .site-footer { display: none; }

/* 処理中：経過時間と進み具合、待っている間の片付けのコツ */
.progress { display: grid; gap: 10px; }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.progress-head b { font-size: 15px; }
.progress-time { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13px; }
.progress-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress-bar span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--warm)));
  transition: width .5s linear;
}
.progress-note { margin: 0; font-size: 12px; color: var(--ink-2); }
.steps li { padding: 12px 14px; font-size: 14px; }
.steps li:not(.active):not(.done) { opacity: .6; }
.tip {
  margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.7;
  background: var(--accent-soft); color: var(--ink);
}
@media (prefers-reduced-motion: reduce) { .progress-bar span { transition: none; } }

/* 結果：After / 比べる / Before の切り替え */
.view-toggle {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  margin-top: -4px; border-radius: 99px; background: var(--surface-2);
}
.view-toggle button {
  min-height: 38px; border: 0; border-radius: 99px; background: transparent; color: var(--ink-2);
  font: 700 13px/1 inherit; cursor: pointer;
}
.view-toggle button[aria-pressed='true'] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.view-toggle button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.image-note { margin: -4px 0 0; line-height: 1.6; }
#pinHint { color: var(--accent); font-weight: 700; }
#pinHint::after { content: ''; display: block; }

.summary { display: grid; gap: 6px; }
.summary-text { font-size: 15px; line-height: 1.7; }
.summary .cond-chips { margin: 4px 0 0; }

/* 結果の中を移動するメニュー（ヘッダーの下に固定） */
.jump {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 9;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
  flex: none; padding: 7px 14px; border-radius: 99px; text-decoration: none;
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
}
.jump a[hidden] { display: none; }
#sec-products, #stepsCard, #sec-found, #sec-more, .product { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 116px); }
.anchor { height: 0; margin: 0; }

/* 商品カード：収める物を短く */
.product-for { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.product-for b {
  display: inline-block; margin-right: 6px; font-size: 11px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px;
}
.inline-more {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  font: 700 13px/1.6 inherit; color: var(--accent); text-decoration: underline;
}

/* 見つけた物：折りたたみ */
.more-btn {
  justify-self: center; min-height: 40px; padding: 8px 18px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 13px/1 inherit;
}
.found-list li[hidden] { display: none; }
.found-to { min-height: 32px; padding: 6px 12px; }

/* 処理中は写真を低めにして、進み具合が最初から見えるように */
.scanning img { max-height: 32dvh; width: 100%; object-fit: cover; }

/* 整頓後のイメージを作っている間・作れなかったとき */
.compare.pending > img { filter: blur(6px) saturate(.6) brightness(.85); transform: scale(1.04); }
.compare.pending .compare-before, .compare.pending .compare-handle, .compare.pending .compare-label,
.compare.pending input[type='range'] { display: none; }
.img-status {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px;
  text-align: center; color: #fff;
  background: linear-gradient(180deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 45%));
}
.img-status b { font-size: 16px; font-family: var(--font-round); text-shadow: 0 1px 4px rgb(0 0 0 / 40%); }
.img-status span:not(.img-spinner) { font-size: 12px; line-height: 1.6; max-width: 26em; text-shadow: 0 1px 3px rgb(0 0 0 / 50%); font-variant-numeric: tabular-nums; }
.img-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgb(255 255 255 / 35%); border-top-color: #fff;
  animation: spin .9s linear infinite;
}
.img-status[data-state='failed'] .img-spinner { display: none; }
.img-status .btn { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .img-spinner { animation-duration: 2.5s; } }
.view-toggle[hidden] { display: none; }
.is-disabled { opacity: .45; pointer-events: none; }
/* =========================================================
   ペルソナ確認をふまえた調整
   ========================================================= */

/* 文字を全体に少し大きく（小さすぎる注意書きをなくす） */
.lead { font-size: 16px; }
.tips li { font-size: 15px; }
.image-note, .send-note, .block-help, .pr-note, .found-coverage, .quota-note, .progress-note { font-size: 13px; }
.fineprint { font-size: 12px; }
.product-reason { font-size: 15px; }
.product-for, .offer-fit, .offer-meta { font-size: 13px; }
.offer-title { font-size: 14px; }
.chip { font-size: 13px; }
.compare-label { font-size: 13px; }
.site-footer { font-size: 13px; }

/* 撮影前の注意（写してほしくない物） */
.shoot-note {
  display: flex; gap: 8px; align-items: flex-start; margin: -2px 0 0;
  padding: 10px 12px; border-radius: 12px; background: var(--accent-soft);
  font-size: 13px; line-height: 1.6; color: var(--ink);
}
.shoot-note svg { flex: none; margin-top: 2px; color: var(--accent); }

/* 撮影後：雰囲気を選ぶ */
.style-pick { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.style-pick .opt-label { font-size: 14px; color: var(--ink); }

/* 共有：横長／縦長 */
.seg-2 { grid-template-columns: 1fr 1fr; }
.seg-2 span { font-size: 13px; padding: 10px 4px; }
.share-preview img { max-height: 60dvh; width: auto; max-width: 100%; margin: 0 auto; }
.share-preview.story img { max-height: 70dvh; }
.share-help { color: var(--accent); font-weight: 600; }

/* 商品カード：写真を大きく、タップで拡大 */
.offer { grid-template-columns: 96px 1fr; }
.offer-thumb { position: relative; display: block; width: 96px; height: 96px; cursor: zoom-in; border-radius: 10px; }
.offer-thumb img { width: 96px; height: 96px; }
.offer-thumb:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.zoom-badge {
  position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: rgb(0 0 0 / 55%)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='white' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5L20 20M11 8.5v5M8.5 11h5' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}

/* 拡大表示 */
.lightbox {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgb(0 0 0 / 70%); animation: fade .15s ease;
}
.lightbox[hidden] { display: none; }
.lb-panel {
  position: relative; width: 100%; max-width: 480px; max-height: 100%; overflow: auto;
  background: var(--surface); border-radius: 20px; box-shadow: 0 20px 60px rgb(0 0 0 / 40%);
}
.lb-panel img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 20px 20px 0 0; }
.lb-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.lb-title { margin: 0; font-size: 15px; line-height: 1.6; }
.lb-meta { margin: 0; display: flex; gap: 10px; align-items: baseline; }
.lb-meta .offer-price { font-size: 20px; }
.lb-close {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgb(0 0 0 / 55%); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.lb-close:focus-visible { outline: 3px solid #fff; }
body.no-scroll { overflow: hidden; }
/* 収納の雰囲気（5種類）と「安い物中心」 */
.seg-wrap { grid-template-columns: repeat(3, 1fr); }
.seg-wrap span { font-size: 13px; padding: 10px 2px; }
.cheap-toggle {
  margin-top: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); font-size: 14px; line-height: 1.5; cursor: pointer;
}
.cheap-toggle:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* 飾りつけの「飾りたい物の写真」 */
.decor-owned { margin-top: 14px; }
.decor-owned .opt-help { margin: 2px 0 8px; }
/* 飾りつけの「今ある家具は変えない」 */
.keep-toggle {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); font-size: 14px; line-height: 1.5; cursor: pointer; flex-wrap: wrap;
}
.keep-toggle small { flex-basis: 100%; padding-left: 28px; font-size: 12px; color: var(--ink-2); }
.keep-toggle:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* 買う物のまとめ */
.buy-summary { display: grid; gap: 10px; border: 2px solid var(--accent); }
.buy-summary h2 { font-size: 19px; }
.buy-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.buy-line {
  width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
  min-height: 44px; padding: 8px 10px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--surface-2); color: var(--ink); font: inherit;
}
.buy-line:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.buy-no {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 700 13px/1 var(--font-round);
}
.buy-name { font-size: 15px; font-weight: 600; min-width: 0; }
.buy-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buy-total { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 0; border-top: 1px dashed var(--line); }
.buy-total span { font-size: 14px; color: var(--ink-2); }
.buy-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.btn-done { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
/* いちばん上に戻るボタン：大きく、気づきやすく（邪魔にならない右下のまま） */
.to-top {
  width: 56px; height: 56px; gap: 0; align-content: center;
  border: 2px solid var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.to-top span { font: 700 10px/1 system-ui, sans-serif; margin-top: -2px; }
.to-top.show { opacity: .9; }
/* 別の案：5つのボタン（今の案は押せない）／商品が見つからなかった小物の注意 */
.remake { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.remake .btn.is-current { opacity: .55; cursor: default; }
.remake .btn { flex-direction: column; gap: 0; line-height: 1.3; }
.remake .btn.is-current::after { content: '今の案'; display: block; font-size: 11px; font-weight: 400; }
.remake .btn:disabled:not(.is-current) { opacity: .45; }
.buy-missing {
  margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  background: color-mix(in srgb, #e9a23b 14%, var(--surface)); color: var(--ink);
}
/* 履歴：雰囲気などの条件 */
.history-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.history-tags .chip { font-size: 11px; padding: 2px 8px; }

/* 買う物リスト：商品が決まっていない「探す物」 */
.buy-search .search-tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 99px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; color: #8a5a00; background: color-mix(in srgb, #e9a23b 22%, var(--surface));
}
.search-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.search-links a {
  font-size: 12px; padding: 5px 10px; border-radius: 99px; text-decoration: none;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
/* 見本：最初の画面のリンクと、結果画面の案内 */
.sample-btn {
  display: block; margin: 2px auto 0; padding: 10px 8px; border: 0; background: none; cursor: pointer;
  font: 700 15px/1.4 var(--font-round, system-ui); color: var(--accent); text-decoration: underline; text-underline-offset: 4px;
}
.sample-btn small { font-weight: 400; font-size: 12px; color: var(--ink-2); }
.sample-banner {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.sample-banner p { margin: 0; flex: 1; font-size: 14px; line-height: 1.6; }
.sample-banner .btn { flex-shrink: 0; width: auto; }
body.is-sample #realCard, body.is-sample #remakeCard, body.is-sample #shareCard,
body.is-sample .jump a[href="#sec-more"] { display: none; }
/* 最初の画面：片付け前・後の実例写真 */
.hero-photo { margin: 6px 0 20px; }
.hero-fade, .hero-pair {
  display: block; width: 100%; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
}
.hero-fade { position: relative; aspect-ratio: 498 / 332; }
.hero-fade img { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); object-fit: cover; }
.hero-fade .hero-after { animation: hero-fade 7s ease-in-out infinite; }
@keyframes hero-fade { 0%, 35% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
.hero-pair { display: none; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero-fade { display: none; }
  .hero-pair { display: block; }
}
.hero-photo figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.hero-more { font-weight: 700; color: var(--accent); white-space: nowrap; }
.hero-photo.is-link { cursor: pointer; }
.hero-photo.is-link:active .hero-fade, .hero-photo.is-link:active .hero-pair { opacity: .85; }
/* ---------- モード（片付け / 飾りつけ） ---------- */
body:not([data-mode="decor"]) [data-only="decor"], body[data-mode="decor"] [data-only="tidy"] { display: none !important; }
body[data-mode="decor"] { --accent: #a84f42; --accent-ink: #ffffff; --accent-soft: #f6e1dc; }
@media (prefers-color-scheme: dark) {
  body[data-mode="decor"] { --accent: #e8907f; --accent-ink: #2a120d; --accent-soft: #3d2420; }
}
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 4px 0 16px; border-radius: 99px; background: var(--surface-2); }
.mode-switch button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; border-radius: 99px;
  background: none; color: var(--ink-2); font: 700 15px/1 var(--font-round, system-ui); cursor: pointer;
}
.mode-switch button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }

/* 最初の画面：見出し・STEP の見出し・やりたいことを選ぶカード */
.home-title { margin: 6px 0 10px; text-align: center; font-size: clamp(22px, 6.4vw, 28px); }
.step-title { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font: 700 15px/1.4 var(--font-round, system-ui); }
.step-title b {
  padding: 3px 9px; border-radius: 99px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; letter-spacing: .04em; white-space: nowrap;
}
.mode-cards { gap: 10px; padding: 0; margin: 0 0 8px; border-radius: 0; background: none; }
.mode-cards button {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 92px; padding: 10px 8px;
  border: 2px solid var(--line, var(--surface-2)); border-radius: 16px; background: var(--surface); color: var(--ink-2);
  text-align: center; line-height: 1.3;
}
.mode-cards button b { font-size: 17px; color: var(--ink); }
.mode-cards button small { font: 500 12px/1.4 system-ui, sans-serif; color: var(--ink-2); }
.mode-cards button[aria-checked="true"] {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); box-shadow: var(--shadow);
}
.mode-cards button[aria-checked="true"] b { color: var(--accent); }
.mode-cards button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
#screen-home .hero { margin: 0 0 4px; padding: 0; }
#screen-home .hero-photo { margin: 2px 0 6px; }

/* 撮影後：写真を選べた印・選び直し・今の設定 */
.photo-ok {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 99px; background: var(--accent); color: var(--accent-ink);
  font: 700 13px/1 var(--font-round, system-ui); box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}
.repick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.repick .btn { width: 100%; min-height: 44px; }
.settings-now { display: grid; gap: 4px; }
.settings-now .step-title { margin: 0; }
.settings-line { margin: 0; font-size: 14px; color: var(--ink-2); }
.decor-pick { border: 0; margin: 0 0 12px; padding: 0; }
.pick-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; font: 700 16px/1.4 var(--font-round, system-ui); }
.pick-title b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 13px; }
.pick-next { margin-top: 16px; }
.decor-styles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.decor-card {
  position: relative; display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line);
}
.decor-card input { position: absolute; opacity: 0; }
.decor-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.decor-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.decor-card b { font-size: 15px; }
.decor-card small { font-size: 11px; color: var(--ink-2); }
.decor-swatch { display: flex; gap: 4px; margin-bottom: 4px; }
.decor-swatch i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 12%); }
.shoot-btn.is-disabled { opacity: .45; }
.pick-first { margin: 4px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent); }
/* 飾りつけの雰囲気が8つになったので、カードを少し詰めて撮影ボタンが最初の画面に入るように */
.decor-card { padding: 7px 10px; gap: 0; }
.decor-swatch { margin-bottom: 3px; }
.decor-swatch i { width: 13px; height: 13px; }
.decor-card b { font-size: 14px; }
.decor-pick .pick-next { margin-top: 12px; }.decor-styles { gap: 6px; }
.decor-pick .pick-title { margin-bottom: 8px; }
body[data-mode="decor"] .mode-switch { margin-bottom: 10px; }
body[data-mode="decor"] .hero { padding-bottom: 0; }
body[data-mode="decor"] .hero .lead { margin-bottom: 12px; }
/* 飾りつけ：利用者の「こうしたい」 */
.decor-note { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 700; }
.decor-note small { font-weight: 400; color: var(--ink-2); }
.decor-note textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px; padding: 8px 10px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: 400 16px/1.5 system-ui, sans-serif; /* 16px 未満だと iPhone で入力時に画面が拡大されるため */
}
.decor-note textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.pick-help { margin: -4px 0 8px; font-size: 12px; color: var(--ink-2); }

/* ---------- ご意見 ---------- */
.feedback-card h2 { margin-bottom: 10px; }
.fb-body { display: grid; gap: 10px; }
.rating { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rating button {
  display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 700 13px/1.3 system-ui, sans-serif;
}
.rating button span { font-size: 24px; line-height: 1; }
.rating button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.feedback-card textarea, .fb-dialog textarea {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 400 16px/1.5 system-ui, sans-serif;
}
.feedback-card textarea:focus, .fb-dialog textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.fb-thanks { margin: 0; padding: 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; text-align: center; }
.fb-open {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 16px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); font: 700 14px/1 system-ui, sans-serif;
}
.fb-dialog {
  width: min(92vw, 480px); padding: 0; border: 0; border-radius: 18px; background: var(--bg, var(--surface)); color: var(--ink);
  box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
}
.fb-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.fb-form { display: grid; gap: 10px; padding: 18px; }
.fb-form h2 { margin: 0; font-size: 18px; }
.fb-form .block-help { margin: 0; }
.fb-actions { display: flex; justify-content: flex-end; gap: 8px; }
.fb-actions .btn { width: auto; }
/* 飾りつけモードの実例写真は縦横の比率が少し違う */


/* 画像の上の番号：商品に重ねず外に置き、点と線で商品を指す */
.pin-mark { position: absolute; width: 0; height: 0; pointer-events: none; }
.pin-mark.covered { opacity: 0; }
.pin-mark.covered .pin { pointer-events: none; }
.pin-mark .pin-dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 25%);
}
.pin-mark .pin-line {
  position: absolute; left: -1px; width: 2px; height: var(--len); background: #fff; box-shadow: 0 0 2px rgb(0 0 0 / 45%);
}
.pin-mark.up .pin-line { bottom: 0; }
.pin-mark.down .pin-line { top: 0; }
.pin-mark .pin { left: 0; }
.pin-mark.up .pin { top: calc(-1 * (var(--len) + 17px)); }
.pin-mark.down .pin { top: calc(var(--len) + 17px); }

/* 飾りつけの雰囲気カード：横に1列、指で横スクロール */
.decor-styles {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none;
}
.decor-styles::-webkit-scrollbar { display: none; }
.decor-card { flex: 0 0 132px; scroll-snap-align: start; }
.decor-card small { white-space: normal; }
/* fieldset は中身の幅に合わせて広がるため、画面の幅に収める */
.decor-pick { min-width: 0; max-width: 100%; }
.decor-styles { width: calc(100% + 32px); box-sizing: border-box; }

/* 番号の線（SVG）と、商品を指す点 */
.pin-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pin-lines .pin-line-shadow { stroke: rgb(0 0 0 / 35%); stroke-width: 4; stroke-linecap: round; }
.pin-lines .pin-line { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.pins .pin-dot {
  position: absolute; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; box-sizing: border-box;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 25%); pointer-events: none;
}
.pins [data-x].covered { opacity: 0; }
.pins .pin.covered { pointer-events: none; }
/* 見本を開いたときは、トップの写真と同じ 3:2 の枠で見せる（写真は枠いっぱいに広げ、はみ出す端は切る） */
body.is-sample .compare { aspect-ratio: 498 / 332; }
body.is-sample .compare > img { height: 100%; object-fit: cover; }
/* 見本の写真には「前／後」のラベルが写真の中に入っているので、アプリのラベルは出さない */
body.is-sample .compare-label { display: none; }

/* 雰囲気カードの左右の矢印とぼかし（横にスクロールできることを伝える） */
.decor-scroll { position: relative; }
.decor-scroll::before, .decor-scroll::after {
  content: ''; position: absolute; top: 0; bottom: 8px; width: 36px; pointer-events: none; opacity: 0; transition: opacity .2s;
}
.decor-scroll::before { left: -16px; background: linear-gradient(90deg, var(--bg), transparent); }
.decor-scroll::after { right: -16px; background: linear-gradient(270deg, var(--bg), transparent); }
.decor-scroll.more-left::before, .decor-scroll.more-right::after { opacity: 1; }
.scroll-arrow {
  position: absolute; top: calc(50% - 4px); z-index: 1; width: 34px; height: 34px; margin-top: -17px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}
.scroll-arrow.left { left: -6px; }
.scroll-arrow.right { right: -6px; }
.scroll-arrow[hidden] { display: none; }
/* カードが止まる位置を画面の余白（16px）に合わせる（最初から少しずれて左の矢印が出ないように） */
.decor-styles { scroll-padding-inline: 16px; }

/* アプリでできることのひとこと（モード切り替えの上） */
.app-tagline { margin: 2px 0 8px; text-align: center; font: 700 14px/1.4 var(--font-round, system-ui); color: var(--ink-2); letter-spacing: .04em; }

/* 使い方の動画（ボタンとポップアップ） */
.howto-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 12px; padding: 10px 20px; min-height: 44px;
  border: 1.5px solid var(--accent); border-radius: 99px; background: var(--surface); color: var(--accent);
  font: 700 15px/1 var(--font-round, system-ui); cursor: pointer; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 18%, transparent);
}
.howto-btn:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.howto-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.howto-dialog {
  width: min(94vw, 420px); max-height: calc(100dvh - 24px); padding: 12px; border: 0; border-radius: 18px;
  background: var(--bg, var(--surface)); color: var(--ink); box-shadow: 0 20px 60px rgb(0 0 0 / 35%); overflow: auto;
}
.howto-dialog[open] { display: grid; gap: 10px; }
.howto-dialog::backdrop { background: rgb(0 0 0 / 60%); }
.howto-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.howto-head h2 { margin: 0 0 0 4px; font-size: 16px; }
.howto-close {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.howto-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 縦長の動画。画面の高さに収まるようにする（PC でも縦に長くなりすぎない） */
.howto-video {
  display: block; width: 100%; height: auto; max-height: calc(100dvh - 170px); aspect-ratio: 9 / 16;
  object-fit: contain; border-radius: 12px; background: #000;
}
.howto-error { margin: 0; font-size: 13px; color: var(--ink-2); }
.howto-start { width: 100%; }

/* ホーム画面への追加の案内 */
.install-card { border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); }
.install-card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.install-card .btn { width: auto; }

/* 「高級」のときの「安い物を中心に」 */
.cheap-toggle.is-off { opacity: .55; }
.cheap-off { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }

/* 最初の画面の「今日あと◯回」 */
.home-quota { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--ink-2); }
.home-quota.empty-quota { padding: 8px 10px; border-radius: 10px; background: var(--warm-soft); color: var(--warm-ink); font-weight: 700; }

/* ダークモードで「探す物」の印を読みやすく */
@media (prefers-color-scheme: dark) {
  .buy-search .search-tag { color: #f3c77a; background: color-mix(in srgb, #e9a23b 22%, var(--surface)); }
}

/* 画面のいちばん下のリンクを押しやすく */
.site-footer a { display: inline-block; padding: 12px 4px; }
/* 「今日あと◯回」は撮影ボタンのすぐ下（アルバムボタンとの間） */
.home-quota { margin: -2px 0 10px; }

/* ホーム画面への追加の帯（画面の下） */
.install-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 19;
  max-width: 540px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px;
  border-radius: 16px; background: var(--surface); border: 1.5px solid var(--accent); box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
  animation: fade .25s ease;
}
.install-bar[hidden] { display: none; }
.install-bar p { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--ink); }
.install-bar p b { color: var(--accent); }
.install-bar .btn { width: auto; flex-shrink: 0; }
.install-bar-close {
  flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
/* 帯が出ている間は、右下の「上へ」ボタンを隠して重ならないように */
body.has-install-bar .to-top { display: none; }