/* ======================================================================
   ひとり立ち (HITORIDACHI) — Design System
   Aesthetic: "技術図面 / Drafting-Sheet — Warm-Grey on Ivory"
   ----------------------------------------------------------------------
   Differentiation anchor (signature device):
     DIMENSION LINE (寸法線) — the technical-drawing dimension rule
     with terracotta tick-arrow caps and JetBrains-Mono dimension
     values. It encodes the site's axis (予算 + 設置スペース) directly:
     budget is dimensioned in yen, installation space in millimeters.
     The same device runs along the hero, between sections, on each
     SET card (3 dimensions: budget / width / depth), and on the
     diagnostic step counter ("|<-- 1 / 5 -->|").
   ----------------------------------------------------------------------
   Why this is NOT generic AI-slop:
     - Not editorial apothecary (no cream + serif Mincho).
     - Not pixel-neon (no black ground + acid accent).
     - Not broadsheet (no hairline + radius 0 + multi-column).
     - The site reads as a drafted spec-sheet, the way appliance
       manufacturers publish dimensional drawings — not a "家電比較サイト
       のテーブル". The diagnostic UI is framed as a take-measurement
       checklist, not a quiz.
     - Color quadrant: warm-grey #5C5651 dominant, ivory #FAFAF7 ground,
       terracotta #C58B77 *only* on CTA + dimension arrows + ItemList
       numerals + FAQ caret. ≤8% of visible surface = "trim accent",
       not "color scheme #2".
     - Hue/value distinct from:
         site16 coral / site17 teal / site18 periwinkle /
         site19 sage / site20 crimson-noir / site21 Kodak yellow /
         site22 ink-black + brass / site01 espresso / site02 grey-violet.
       Warm-grey + ivory + terracotta occupies its own corner.
     - Typography distinct from all 22 prior sites:
         Big Shoulders Display (industrial-condensed display, none
         of the sites uses it; reads as drafting-board lettering),
         Noto Sans JP (body — shared as a JP default but pairing
         and weight rhythm is unique to this site),
         JetBrains Mono (numerals — distinct from Space/Plex/Red Hat/
         IBM mono used by other sites).
   ====================================================================== */

:root {
  /* === Color: warm-grey dominant, ivory ground, terracotta trim === */
  --grey:         #5C5651;  /* dominant text + structure ink */
  --grey-1:       #3A3633;  /* heaviest copy + numerals */
  --grey-2:       #6E6862;  /* secondary copy */
  --grey-3:       #8B8580;  /* muted captions */
  --grey-4:       #B8B2AB;  /* hairline + spec-rule */
  --grey-5:       #DCD7CF;  /* dimension extension line */

  --ivory:        #FAFAF7;  /* page ground (paper) */
  --ivory-2:      #F2EFE7;  /* aged drafting paper for inset panels */
  --ivory-3:      #E8E4D9;  /* paper edge / SET card foot */

  --terracotta:     #C58B77; /* CTA + dimension arrow + ItemList # */
  --terracotta-deep:#A06B57; /* CTA pressed / focus ring */
  --terracotta-soft:#E8C7B8; /* terracotta wash for highlight band */

  --ink-on-paper: #2C2825;

  /* === Spacing rhythm — 8mm drafting module === */
  --gap-1:  6px;
  --gap-2:  12px;
  --gap-3:  20px;
  --gap-4:  32px;
  --gap-5:  48px;
  --gap-6:  72px;
  --gap-7: 104px;
  --gap-8: 144px;

  /* === Typography === */
  --f-display: "Big Shoulders Display", "Big Shoulders Text",
               "Noto Sans JP", "Hiragino Sans", sans-serif;
  --f-body:    "Noto Sans JP", "Hiragino Sans",
               "Yu Gothic", sans-serif;
  --f-num:     "JetBrains Mono", "Courier New", monospace;

  --max-w: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  background: var(--ivory);
  color: var(--grey-1);
  line-height: 1.85;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  /* Subtle drafting-paper grain via radial dots */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(184,178,171,0.04) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(184,178,171,0.035) 0 1px, transparent 1.5px);
  background-size: 64px 64px, 96px 96px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ======================================================================
   DIMENSION-LINE SYSTEM — the signature device
   ----------------------------------------------------------------------
   .dim-line     : a horizontal dimension rule:  |←——— [VALUE] ———→|
                   Used between sections and on SET cards.
   .dim-line__val: the centered VALUE label (JetBrains Mono).
   .dim-line__cap: the terracotta arrow tick at either end.
   .dim-line.is-vertical : rotated 90° for vertical extension lines.
   .dim-step     : the diagnostic step counter: |←——— 2 / 5 ———→|
   ====================================================================== */

.dim-line {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: var(--gap-2);
  width: 100%;
  padding: var(--gap-2) 0;
}

.dim-line__cap {
  /* terracotta tick-arrow cap — drawn with two diagonal lines */
  width: 14px;
  height: 14px;
  position: relative;
}
.dim-line__cap::before,
.dim-line__cap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--terracotta);
}
/* left cap: > shape */
.dim-line__cap.is-left::before {
  clip-path: polygon(0 50%, 100% 0, 100% 35%, 30% 50%, 100% 65%, 100% 100%);
}
.dim-line__cap.is-left::after { display: none; }
/* right cap: < shape (mirror) */
.dim-line__cap.is-right::before {
  clip-path: polygon(100% 50%, 0 0, 0 35%, 70% 50%, 0 65%, 0 100%);
}
.dim-line__cap.is-right::after { display: none; }

.dim-line__rule {
  height: 1px;
  background: linear-gradient(to right, var(--grey-4), var(--grey-4));
  position: relative;
}
/* extension tick at the rule terminus (the small perpendicular line that
   marks the "extension line meets dimension line" point) */
.dim-line__rule::before,
.dim-line__rule::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--grey-4);
}
.dim-line__rule::before { left: 0; }
.dim-line__rule::after  { right: 0; }

.dim-line__val {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--grey-1);
  white-space: nowrap;
  padding: 0 var(--gap-2);
  background: var(--ivory);
}

/* Simplified variant: only the rule + value (no caps), used on cards */
.dim-line.is-quiet {
  grid-template-columns: 1fr auto 1fr;
}
.dim-line.is-quiet .dim-line__cap { display: none; }

/* Vertical extension-line decoration on hero corners */
.ext-line-v {
  width: 1px;
  background: var(--grey-4);
  position: relative;
}
.ext-line-v::before,
.ext-line-v::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 11px;
  height: 1px;
  background: var(--grey-4);
}
.ext-line-v::before { top: 0; }
.ext-line-v::after  { bottom: 0; }

/* ======================================================================
   LAYOUT PRIMITIVES
   ====================================================================== */

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap-4);
}

/* ======================================================================
   PR / DISCLOSURE BANNER
   ====================================================================== */

.pr-banner {
  background: var(--ivory-2);
  border-bottom: 1px solid var(--grey-4);
  color: var(--grey-2);
  font-size: 12px;
  text-align: center;
  padding: var(--gap-1) var(--gap-3);
  letter-spacing: 0.04em;
}
.pr-banner strong {
  color: var(--terracotta-deep);
  font-family: var(--f-num);
  letter-spacing: 0.12em;
  margin-right: var(--gap-2);
}

/* ======================================================================
   SITE HEADER — drafting title-block style
   ====================================================================== */

.site-header {
  background: var(--ivory);
  border-bottom: 1px solid var(--grey-4);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
  background: rgba(250, 250, 247, 0.92);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--gap-2);
  padding-bottom: var(--gap-2);
  gap: var(--gap-4);
}

.brand-mark {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
}
.brand-mark .wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.18em;
  color: var(--grey-1);
  text-transform: uppercase;
}
.brand-mark .jp {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--grey-2);
  letter-spacing: 0.18em;
}
.brand-mark .tag-stamp {
  display: none;
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grey-3);
  border: 1px solid var(--grey-4);
  padding: 2px 6px;
}

.nav-links {
  display: flex;
  gap: var(--gap-4);
  align-items: center;
}
.nav-links a {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--grey-2);
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover {
  color: var(--terracotta-deep);
  border-bottom-color: var(--terracotta);
}

@media (max-width: 720px) {
  .brand-mark .jp { display: none; }
  .nav-links { gap: var(--gap-3); flex-wrap: wrap; justify-content: flex-end; }
  .nav-links a { font-size: 10px; }
}

/* ======================================================================
   HERO — drawing-sheet title block
   ====================================================================== */

.hero {
  position: relative;
  padding: var(--gap-7) 0 var(--gap-6);
  background: var(--ivory);
  border-bottom: 1px solid var(--grey-4);
  overflow: hidden;
}

/* faint grid behind hero — drafting paper feel */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(184,178,171,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(184,178,171,0.10) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  opacity: 0.55;
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

.hero-inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-4);
}

.hero-frame-stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--grey-2);
  text-transform: uppercase;
  border: 1px solid var(--grey-4);
  padding: 4px 10px;
  width: max-content;
  background: var(--ivory);
}
.hero-frame-stamp .dot {
  width: 6px;
  height: 6px;
  background: var(--terracotta);
}

.hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: 0.02em;
  color: var(--grey-1);
  text-transform: none;
}
.hero h1 .ja {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  margin-top: var(--gap-3);
  color: var(--grey-1);
}

.hero-sub {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  max-width: 640px;
  line-height: 1.95;
}

/* the hero's big dimension diagram: 4 SET dimensions stacked */
.hero-dim {
  margin-top: var(--gap-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-3);
  padding: var(--gap-4) var(--gap-3);
  border: 1px solid var(--grey-4);
  background: var(--ivory-2);
  position: relative;
}
.hero-dim::after {
  content: "DRAWING NO. HITORIDACHI / 23-001";
  position: absolute;
  right: var(--gap-3);
  top: -10px;
  background: var(--ivory);
  padding: 0 var(--gap-2);
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grey-3);
}
.hero-dim__row {
  display: grid;
  grid-template-columns: 90px 1fr 110px;
  align-items: center;
  gap: var(--gap-3);
}
.hero-dim__label {
  font-family: var(--f-num);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--grey-2);
  text-transform: uppercase;
}
.hero-dim__rule { position: relative; height: 1px; background: var(--grey-4); }
.hero-dim__rule::before,
.hero-dim__rule::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--grey-4);
}
.hero-dim__rule::before { left: 0; }
.hero-dim__rule::after  { right: 0; }
.hero-dim__rule .arrow {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  background: var(--terracotta);
  transform: translateY(-50%);
}
.hero-dim__rule .arrow.is-left  { left: 0;  clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.hero-dim__rule .arrow.is-right { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.hero-dim__value {
  font-family: var(--f-num);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--grey-1);
  text-align: right;
}

.hero-cta {
  margin-top: var(--gap-4);
  display: flex;
  gap: var(--gap-3);
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 14px var(--gap-4);
  border: 1px solid var(--grey-1);
  background: var(--ivory);
  color: var(--grey-1);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--terracotta-deep); outline-offset: 3px; }

.btn.is-primary {
  background: var(--terracotta);
  color: var(--ivory);
  border-color: var(--terracotta);
}
.btn.is-primary:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
}
.btn .btn-arrow {
  font-family: var(--f-num);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
}

/* ======================================================================
   SECTION SCAFFOLD
   ====================================================================== */

.section {
  padding: var(--gap-7) 0;
  border-bottom: 1px solid var(--grey-4);
  position: relative;
}
.section:last-of-type { border-bottom: none; }

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--gap-3);
  align-items: baseline;
  margin-bottom: var(--gap-5);
}
.section-head__num {
  font-family: var(--f-num);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--terracotta-deep);
  border-right: 1px solid var(--grey-4);
  padding-right: var(--gap-3);
}
.section-head__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: 0.04em;
  color: var(--grey-1);
  line-height: 1.15;
  text-transform: uppercase;
}
.section-head__title .ja {
  display: block;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: 4px;
  color: var(--grey-1);
}
.section-head__stamp {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--grey-3);
  text-transform: uppercase;
  white-space: nowrap;
}

.section-lead {
  font-size: 16px;
  color: var(--grey-2);
  max-width: 740px;
  margin-bottom: var(--gap-5);
  line-height: 1.95;
}

/* ======================================================================
   EDITOR'S NOTE
   ====================================================================== */

.editor-note {
  background: var(--ivory-2);
  border: 1px solid var(--grey-4);
  padding: var(--gap-5);
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.editor-note::before {
  content: "NOTE FROM EDITOR";
  position: absolute;
  top: -10px;
  left: var(--gap-4);
  background: var(--ivory);
  padding: 0 var(--gap-2);
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--grey-2);
}
.editor-note h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--grey-1);
  margin-bottom: var(--gap-3);
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
.editor-note h2 .ja {
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--grey-2);
  font-weight: 500;
}
.editor-note p {
  margin-bottom: var(--gap-3);
  line-height: 2.0;
  color: var(--grey-1);
}
.editor-note p:last-child { margin-bottom: 0; }
.editor-note .verbatim {
  border-left: 2px solid var(--terracotta);
  padding-left: var(--gap-3);
  color: var(--ink-on-paper);
}

/* ======================================================================
   DIAGNOSTIC — the take-measurement checklist
   ====================================================================== */

.diagnostic {
  background: var(--ivory);
  padding: var(--gap-5) var(--gap-4);
  border: 1px solid var(--grey-4);
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}
.diagnostic::before {
  content: "MEASUREMENT CHECKLIST";
  position: absolute;
  top: -10px;
  left: var(--gap-4);
  background: var(--ivory);
  padding: 0 var(--gap-2);
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--grey-2);
}

/* step counter dimension line */
.dim-step {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: var(--gap-2);
  margin-bottom: var(--gap-4);
}
.dim-step__cap {
  width: 12px;
  height: 12px;
  background: var(--terracotta);
}
.dim-step__cap.is-left  { clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.dim-step__cap.is-right { clip-path: polygon(100% 50%, 0 0, 0 100%); }
.dim-step__rule {
  height: 1px;
  background: var(--grey-4);
  position: relative;
}
.dim-step__val {
  font-family: var(--f-num);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--grey-1);
  padding: 0 var(--gap-3);
  background: var(--ivory);
  white-space: nowrap;
}

.q-card { display: none; }
.q-card.is-active { display: block; }

.q-card h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.04em;
  color: var(--grey-1);
  margin-bottom: var(--gap-2);
  text-transform: uppercase;
}
.q-card h3 .ja {
  display: block;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);
  letter-spacing: 0.04em;
  margin-top: 4px;
  color: var(--grey-1);
}

.q-card .helper {
  color: var(--grey-3);
  font-size: 13px;
  margin-bottom: var(--gap-4);
  line-height: 1.7;
}

.q-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-2);
  margin-bottom: var(--gap-4);
}
.q-option {
  background: var(--ivory);
  border: 1px solid var(--grey-4);
  padding: var(--gap-3);
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-2);
  align-items: start;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  color: var(--grey-1);
}
.q-option:hover {
  border-color: var(--terracotta);
  background: var(--ivory-2);
  transform: translateY(-1px);
}
.q-option:focus-visible {
  outline: 2px solid var(--terracotta-deep);
  outline-offset: 2px;
}
.q-option.is-selected {
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}
.q-option .opt-mark {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--grey-3);
  text-transform: uppercase;
  width: 28px;
  border-right: 1px solid var(--grey-4);
  padding-right: var(--gap-2);
}
.q-option.is-selected .opt-mark { color: var(--terracotta-deep); }
.q-option .opt-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--grey-1);
  line-height: 1.6;
}
.q-option .opt-sub {
  display: block;
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--grey-3);
  margin-top: 4px;
}

.q-controls {
  display: flex;
  gap: var(--gap-3);
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--grey-4);
  padding-top: var(--gap-3);
}
.q-controls .btn { padding: 10px var(--gap-3); font-size: 12px; }

/* multi-select (Q5) */
.q-card[data-multi="true"] .q-option {
  /* no transform: stays toggleable */
}
.q-card[data-multi="true"] .q-option .opt-mark::after {
  content: "□";
  display: inline-block;
  margin-left: 4px;
  color: var(--grey-4);
}
.q-card[data-multi="true"] .q-option.is-selected .opt-mark::after {
  content: "■";
  color: var(--terracotta-deep);
}

/* DIAGNOSTIC RESULT */
.result {
  display: none;
}
.result.is-active { display: block; }
.result-head {
  border-top: 2px solid var(--terracotta);
  padding-top: var(--gap-4);
  margin-bottom: var(--gap-5);
}
.result-head__stamp {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--terracotta-deep);
  text-transform: uppercase;
}
.result-head h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: 0.04em;
  margin-top: var(--gap-2);
  color: var(--grey-1);
  text-transform: uppercase;
}
.result-head h3 .ja {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--grey-1);
  margin-top: 4px;
}
.result-head .helper {
  color: var(--grey-2);
  font-size: 14px;
  margin-top: var(--gap-2);
  max-width: 640px;
  line-height: 1.85;
}

/* ======================================================================
   PRODUCT CARDS (used by diagnostic result + finder-db)
   ====================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-4);
}

.card {
  background: var(--ivory);
  border: 1px solid var(--grey-4);
  padding: var(--gap-3);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  position: relative;
}

.card .card-stamp {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--grey-3);
  text-transform: uppercase;
  border-bottom: 1px solid var(--grey-5);
  padding-bottom: var(--gap-1);
}

.card .frame-image {
  background: var(--ivory-2);
  border: 1px solid var(--grey-5);
  aspect-ratio: 1 / 1;
  padding: var(--gap-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.frame-image img {
  /* the cross-issue rule: explicit width/height + object-fit so the
     image always renders inside the frame (not just max-width) */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card .card-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--grey-1);
  min-height: 3em;
}

.card .card-note {
  font-size: 13px;
  color: var(--grey-2);
  line-height: 1.75;
  padding-top: var(--gap-2);
  border-top: 1px solid var(--grey-5);
}

.card .card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  padding-top: var(--gap-2);
}
.card .card-amazon {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--terracotta);
  padding: 8px 14px;
  border: 1px solid var(--terracotta);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.card .card-amazon:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  transform: translateY(-1px);
}
.card .card-amazon::after {
  content: " →";
  font-family: var(--f-num);
  letter-spacing: 0;
}
.card .card-lane {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--grey-3);
  text-transform: uppercase;
}

/* the per-card dimension footer: budget / width / depth */
.card-spec {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap-2);
  margin-top: var(--gap-2);
  padding-top: var(--gap-2);
  border-top: 1px solid var(--grey-5);
}
.card-spec__item {
  text-align: center;
}
.card-spec__item .lbl {
  display: block;
  font-family: var(--f-num);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--grey-3);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.card-spec__item .val {
  font-family: var(--f-num);
  font-size: 12px;
  color: var(--grey-1);
  letter-spacing: 0.04em;
}

/* ======================================================================
   FINDER-DB — tabbed set browser
   ====================================================================== */

.finder-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--grey-4);
  margin-bottom: var(--gap-5);
}
.finder-tab {
  background: var(--ivory);
  border: none;
  border-right: 1px solid var(--grey-4);
  padding: var(--gap-3) var(--gap-2);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finder-tab:last-child { border-right: none; }
@media (max-width: 720px) {
  .finder-tab { border-right: none; border-bottom: 1px solid var(--grey-4); }
  .finder-tab:last-child { border-bottom: none; }
}
.finder-tab:hover { background: var(--ivory-2); }
.finder-tab.is-active {
  background: var(--grey-1);
  color: var(--ivory);
}
.finder-tab__no {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--grey-3);
  text-transform: uppercase;
}
.finder-tab.is-active .finder-tab__no { color: var(--terracotta-soft); }
.finder-tab__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--grey-1);
  text-transform: uppercase;
}
.finder-tab.is-active .finder-tab__name { color: var(--ivory); }
.finder-tab__sub {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--grey-3);
}
.finder-tab.is-active .finder-tab__sub { color: var(--ivory-3); }

.finder-set-head {
  margin-bottom: var(--gap-4);
}
.finder-set-head h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 28px);
  letter-spacing: 0.04em;
  color: var(--grey-1);
  margin-bottom: var(--gap-2);
  text-transform: uppercase;
}
.finder-set-head h3 .ja {
  display: block;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 4px;
  color: var(--grey-1);
}
.finder-set-head .lead {
  color: var(--grey-2);
  line-height: 1.85;
  max-width: 680px;
}

.finder-lane-group { margin-bottom: var(--gap-5); }
.finder-lane-group h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--grey-2);
  text-transform: uppercase;
  border-bottom: 1px solid var(--grey-4);
  padding-bottom: var(--gap-1);
  margin-bottom: var(--gap-3);
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
.finder-lane-group h4 .num {
  font-family: var(--f-num);
  color: var(--terracotta-deep);
}

/* ======================================================================
   SCENE MATRIX
   ====================================================================== */

.matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--grey-4);
  background: var(--ivory);
}
.matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.matrix th, .matrix td {
  border: 1px solid var(--grey-5);
  padding: var(--gap-3);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.6;
}
.matrix thead th {
  background: var(--ivory-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-1);
  text-align: center;
}
.matrix tbody th {
  background: var(--ivory-2);
  font-weight: 500;
  color: var(--grey-1);
  font-size: 13px;
  min-width: 140px;
}
.matrix td.is-best { background: var(--terracotta-soft); color: var(--grey-1); }
.matrix td.mark {
  text-align: center;
  font-family: var(--f-num);
  font-size: 18px;
  color: var(--grey-2);
}
.matrix td.mark.is-best  { color: var(--terracotta-deep); font-weight: 700; }
.matrix-caption {
  font-size: 12px;
  color: var(--grey-3);
  margin-top: var(--gap-2);
  line-height: 1.7;
}

/* ======================================================================
   FAQ — accordion with terracotta caret
   ====================================================================== */

.faq-list { display: flex; flex-direction: column; gap: var(--gap-2); }
.faq-item {
  border: 1px solid var(--grey-4);
  background: var(--ivory);
  padding: 0;
}
.faq-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--gap-3) var(--gap-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-3);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--grey-1);
  line-height: 1.6;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-num {
  font-family: var(--f-num);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--terracotta-deep);
}
.faq-caret {
  width: 12px;
  height: 12px;
  position: relative;
}
.faq-caret::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--terracotta);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform 0.18s;
}
details[open] .faq-caret::before {
  transform: rotate(45deg);
}
.faq-body {
  padding: 0 var(--gap-4) var(--gap-4);
  color: var(--grey-2);
  line-height: 2.0;
  font-size: 14px;
  border-top: 1px solid var(--grey-5);
  padding-top: var(--gap-3);
}

/* ======================================================================
   FOOTER
   ====================================================================== */

.site-footer {
  background: var(--grey-1);
  color: var(--ivory-3);
  padding: var(--gap-6) 0 var(--gap-5);
  margin-top: var(--gap-6);
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-4);
}
.site-footer .brand-mark .wordmark { color: var(--ivory); }
.site-footer .brand-mark .jp { color: var(--ivory-3); }
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-4);
  margin-top: var(--gap-3);
}
.site-footer h5 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ivory);
  text-transform: uppercase;
  margin-bottom: var(--gap-2);
  border-bottom: 1px solid var(--grey-3);
  padding-bottom: 4px;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: var(--gap-1); }
.site-footer a {
  color: var(--ivory-3);
  font-size: 13px;
  border-bottom: 1px solid transparent;
}
.site-footer a:hover { color: var(--ivory); border-bottom-color: var(--terracotta); }
.site-footer .disclosure {
  font-size: 12px;
  color: var(--grey-4);
  line-height: 1.75;
  border-top: 1px solid var(--grey-3);
  padding-top: var(--gap-3);
  margin-top: var(--gap-3);
}
.site-footer .copyright {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--grey-4);
  text-transform: uppercase;
  margin-top: var(--gap-3);
}

/* ======================================================================
   SUB-PAGE (about / contact / privacy / disclaimer)
   ====================================================================== */

.subpage {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--gap-6) var(--gap-4);
}
.subpage h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: 0.04em;
  color: var(--grey-1);
  margin-bottom: var(--gap-2);
  text-transform: uppercase;
}
.subpage h1 .ja {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 4px;
  color: var(--grey-1);
}
.subpage .updated {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--grey-3);
  text-transform: uppercase;
  margin-bottom: var(--gap-5);
  display: block;
}
.subpage h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.10em;
  color: var(--grey-1);
  text-transform: uppercase;
  margin: var(--gap-5) 0 var(--gap-2);
  border-bottom: 1px solid var(--grey-4);
  padding-bottom: 4px;
}
.subpage h2 .ja {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey-2);
  margin-left: var(--gap-2);
}
.subpage p { margin-bottom: var(--gap-3); line-height: 1.95; color: var(--grey-1); }
.subpage ul, .subpage ol {
  margin: 0 0 var(--gap-3) var(--gap-3);
  line-height: 1.95;
  color: var(--grey-1);
}
.subpage li { margin-bottom: 4px; }
.subpage a {
  color: var(--terracotta-deep);
  border-bottom: 1px solid var(--terracotta);
}
.subpage a:hover { color: var(--grey-1); }

/* ======================================================================
   DIMENSION INPUT — number fields styled as filled-in spec drawing
   ----------------------------------------------------------------------
   The signature dimension line wraps each <input>, so typing a value
   reads as "filling in the dimension on a drafting sheet". Terracotta
   tick-caps + JetBrains Mono numerals carry through.
   ====================================================================== */

.space-block {
  border: 1px solid var(--grey-4);
  background: var(--ivory);
  padding: var(--gap-4) var(--gap-3) var(--gap-3);
  margin-bottom: var(--gap-4);
  position: relative;
}
.space-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--terracotta);
  border-left: 2px solid var(--terracotta);
}
.space-block__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--grey-1);
  text-transform: uppercase;
  border-bottom: 1px solid var(--grey-4);
  padding-bottom: var(--gap-1);
  margin-bottom: var(--gap-3);
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  flex-wrap: wrap;
}
.space-block__title .num {
  font-family: var(--f-num);
  color: var(--terracotta-deep);
  font-size: 12px;
  letter-spacing: 0.10em;
}
.space-block__title .space-block__sub {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grey-3);
  margin-left: auto;
}

.dim-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-3);
}

.dim-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-1);
  padding: var(--gap-2) 4px;
  position: relative;
}
.dim-input__cap {
  width: 10px;
  height: 10px;
  background: var(--terracotta);
}
.dim-input__cap.is-left  { clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.dim-input__cap.is-right { clip-path: polygon(100% 50%, 0 0, 0 100%); }
.dim-input__rule {
  height: 1px;
  background: var(--grey-4);
  align-self: center;
}
.dim-input__field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 6px;
  background: var(--ivory);
  padding: 0 var(--gap-2);
  position: relative;
  z-index: 1;
}
.dim-input__label {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--grey-3);
  text-transform: uppercase;
}
.dim-input__field input {
  font-family: var(--f-num);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--grey-1);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--grey-4);
  padding: 4px 2px;
  width: 100%;
  text-align: center;
  outline: none;
  transition: border-color 0.15s, color 0.15s;
  -moz-appearance: textfield;
}
.dim-input__field input::-webkit-outer-spin-button,
.dim-input__field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dim-input__field input:focus,
.dim-input__field input:hover {
  border-bottom-color: var(--terracotta);
  color: var(--terracotta-deep);
}
.dim-input__unit {
  font-family: var(--f-num);
  font-size: 11px;
  color: var(--grey-3);
  letter-spacing: 0.04em;
}
.dim-input__hint {
  grid-column: 1 / -1;
  font-size: 11px;
  font-family: var(--f-body);
  color: var(--grey-3);
  letter-spacing: 0.02em;
  text-align: center;
  padding-top: 2px;
  line-height: 1.5;
}

.dim-select {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: var(--gap-3);
  padding: var(--gap-2) var(--gap-3);
  border: 1px dashed var(--grey-4);
  background: var(--ivory-2);
}
.dim-select__label {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--grey-3);
  text-transform: uppercase;
}
.dim-select select {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--grey-1);
  background: var(--ivory);
  border: 1px solid var(--grey-4);
  padding: 8px var(--gap-2);
  border-radius: 0;
  outline: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--terracotta) 50%),
                    linear-gradient(135deg, var(--terracotta) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.dim-select select:focus {
  border-color: var(--terracotta);
}
.dim-select__hint {
  font-size: 11px;
  color: var(--grey-3);
  line-height: 1.5;
}

/* "Can't measure" fallback CTA inside Q2 */
.space-fallback {
  margin-top: var(--gap-4);
  padding: var(--gap-3);
  background: var(--ivory-2);
  border: 1px solid var(--grey-4);
  border-left: 3px solid var(--terracotta);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-2);
}
.space-fallback__lead {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--grey-1);
  text-transform: uppercase;
  margin: 0;
}
.space-fallback__btn {
  width: max-content;
}
.space-fallback__note {
  font-size: 12px;
  color: var(--grey-3);
  line-height: 1.7;
  margin: 0;
}

/* ======================================================================
   FIT BADGE — displayed on fridge/washer cards in diagnostic result
   ====================================================================== */

.fit-badge {
  margin-top: var(--gap-2);
  padding: var(--gap-2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-2);
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid var(--grey-5);
}
.fit-badge__mark {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 14px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
}
.fit-badge.is-fit {
  background: var(--ivory-2);
  border-color: var(--terracotta);
  color: var(--terracotta-deep);
}
.fit-badge.is-fit .fit-badge__text {
  color: var(--grey-1);
}
.fit-badge.is-warn {
  background: #FCF3EE;
  border-color: var(--terracotta-deep);
  color: var(--terracotta-deep);
}
.fit-badge.is-warn .fit-badge__text {
  color: var(--ink-on-paper);
  font-weight: 500;
}
.fit-badge.is-unknown {
  background: var(--ivory-2);
  border-color: var(--grey-4);
  color: var(--grey-3);
}
.fit-badge.is-unknown .fit-badge__text {
  color: var(--grey-2);
}

/* ======================================================================
   DIMENSION SUMMARY (in result-head) — echoes the user's measurements
   ====================================================================== */

.dim-summary {
  margin-top: var(--gap-3);
  padding: var(--gap-3);
  border: 1px solid var(--grey-4);
  background: var(--ivory-2);
  position: relative;
}
.dim-summary__stamp {
  position: absolute;
  top: -10px;
  left: var(--gap-3);
  background: var(--ivory);
  padding: 0 var(--gap-2);
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--terracotta-deep);
  text-transform: uppercase;
}
.dim-summary__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap-2);
}
.dim-summary__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap-2);
  padding: 4px var(--gap-2);
  border-bottom: 1px dashed var(--grey-4);
  align-items: baseline;
}
.dim-summary__lbl {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--grey-3);
  text-transform: uppercase;
}
.dim-summary__val {
  font-family: var(--f-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-1);
  letter-spacing: 0.04em;
}

/* ======================================================================
   PALETTE STEP (Q6) — drafting-sheet swatch + isometric shape + dim-indicator toggle
   ----------------------------------------------------------------------
   Color chips read as 矩形 swatch cards stamped on the drafting sheet
   (small swatch tile + JetBrains-Mono color code), shape chips use
   abstract isometric SVG silhouettes, and weight toggles are drawn as
   dimension indicators with a terracotta arrow that flips ON.
   ====================================================================== */

.palette-block {
  border: 1px solid var(--grey-4);
  background: var(--ivory);
  padding: var(--gap-4) var(--gap-3) var(--gap-3);
  margin-bottom: var(--gap-4);
  position: relative;
}
.palette-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--terracotta);
  border-left: 2px solid var(--terracotta);
}
.palette-block__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--grey-1);
  text-transform: uppercase;
  border-bottom: 1px solid var(--grey-4);
  padding-bottom: var(--gap-1);
  margin-bottom: var(--gap-3);
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  flex-wrap: wrap;
}
.palette-block__title .num {
  font-family: var(--f-num);
  color: var(--terracotta-deep);
  font-size: 12px;
  letter-spacing: 0.10em;
}
.palette-block__title .palette-block__sub {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grey-3);
  margin-left: auto;
}
.palette-helper {
  font-size: 12px;
  color: var(--grey-3);
  line-height: 1.7;
  margin-bottom: var(--gap-3);
}

/* Grid for color + shape chips */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap-2);
}
.palette-grid.is-color {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.palette-grid.is-shape {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Chip — drafting-stamped swatch card with tick-cap corners */
.palette-chip {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--grey-4);
  padding: var(--gap-2);
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-2);
  align-items: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  color: var(--grey-1);
  font: inherit;
  min-height: 64px;
}
.palette-chip::before,
.palette-chip::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--grey-4);
  background: var(--ivory);
  transition: border-color 0.15s, background 0.15s;
}
.palette-chip::before { top: -1px;    left: -1px;    border-right: none;  border-bottom: none; }
.palette-chip::after  { bottom: -1px; right: -1px;   border-left: none;   border-top: none; }
.palette-chip:hover {
  border-color: var(--terracotta);
  background: var(--ivory-2);
  transform: translateY(-1px);
}
.palette-chip:hover::before,
.palette-chip:hover::after {
  border-color: var(--terracotta);
}
.palette-chip:focus-visible {
  outline: 2px solid var(--terracotta-deep);
  outline-offset: 2px;
}
.palette-chip.is-selected {
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}
.palette-chip.is-selected::before,
.palette-chip.is-selected::after {
  background: var(--terracotta);
  border-color: var(--terracotta);
}

/* Color swatch tile (the small painted square) */
.palette-chip__swatch {
  width: 38px;
  height: 38px;
  display: block;
  position: relative;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.palette-chip__swatch--any {
  background: var(--ivory-2);
  border: 1px dashed var(--grey-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-num);
  font-size: 16px;
  color: var(--grey-3);
}

/* Shape icon (SVG) */
.palette-chip__icon {
  width: 44px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-1);
  flex-shrink: 0;
}
.palette-chip__icon svg {
  width: 100%;
  height: 100%;
}
.palette-chip__icon--any {
  background: var(--ivory-2);
  border: 1px dashed var(--grey-4);
  font-family: var(--f-num);
  font-size: 16px;
  color: var(--grey-3);
}
.palette-chip:hover .palette-chip__icon,
.palette-chip.is-selected .palette-chip__icon {
  color: var(--terracotta-deep);
}

.palette-chip__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-1);
  line-height: 1.4;
}
.palette-chip__sub {
  display: block;
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--grey-3);
  margin-top: 2px;
}
.palette-chip.is-selected .palette-chip__label { color: var(--grey-1); }
.palette-chip.is-selected .palette-chip__sub   { color: var(--terracotta-deep); }
.palette-chip.is-any.is-selected {
  background: var(--ivory-2);
}

/* Weight toggles — dimension indicators with terracotta arrows that flip ON */
.palette-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-2);
}
.palette-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  background: var(--ivory);
  border: 1px solid var(--grey-4);
  cursor: pointer;
  text-align: left;
  color: var(--grey-1);
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.palette-toggle:hover {
  border-color: var(--terracotta);
  background: var(--ivory-2);
}
.palette-toggle:focus-visible {
  outline: 2px solid var(--terracotta-deep);
  outline-offset: 2px;
}
.palette-toggle.is-on {
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}
.palette-toggle__indicator {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grey-4);
  background: var(--ivory);
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.palette-toggle.is-on .palette-toggle__indicator {
  border-color: var(--terracotta);
  background: var(--ivory);
}
.palette-toggle__arrow {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--grey-4);
  transition: border-left-color 0.15s, transform 0.2s;
}
.palette-toggle.is-on .palette-toggle__arrow {
  border-left-color: var(--terracotta);
  transform: rotate(90deg) translate(2px, 0);
}
.palette-toggle__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.palette-toggle__jp {
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-1);
  line-height: 1.4;
}
.palette-toggle__en {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--grey-3);
  text-transform: uppercase;
}
.palette-toggle.is-on .palette-toggle__en { color: var(--terracotta-deep); }
.palette-toggle__state {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grey-3);
  padding: 2px 6px;
  border: 1px solid var(--grey-4);
}
.palette-toggle.is-on .palette-toggle__state {
  color: var(--terracotta-deep);
  border-color: var(--terracotta);
  background: var(--ivory);
}

/* Palette legend — drawing legend of current selections */
.palette-legend {
  position: relative;
  margin-top: var(--gap-4);
  padding: var(--gap-3);
  border: 1px solid var(--terracotta);
  background: var(--ivory-2);
}
.palette-legend__stamp {
  position: absolute;
  top: -10px;
  left: var(--gap-3);
  background: var(--ivory);
  padding: 0 var(--gap-2);
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--terracotta-deep);
  text-transform: uppercase;
}
.palette-legend__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.palette-legend__empty {
  font-size: 12px;
  color: var(--grey-3);
  line-height: 1.7;
  margin: 0;
}
.palette-legend__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--gap-2);
  padding: 4px var(--gap-2);
  border-bottom: 1px dashed var(--grey-4);
  align-items: center;
}
.palette-legend__row:last-child {
  border-bottom: none;
}
.palette-legend__lbl {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grey-3);
  text-transform: uppercase;
}
.palette-legend__val {
  font-size: 12px;
  color: var(--grey-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2);
}
.palette-legend__swatches {
  display: inline-flex;
  gap: 4px;
}
.palette-legend__swatch {
  width: 18px;
  height: 18px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.palette-legend__shapes {
  display: inline-flex;
  gap: 4px;
  color: var(--grey-1);
}
.palette-legend__shape {
  width: 24px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.palette-legend__shape svg {
  width: 100%;
  height: 100%;
}
.palette-legend__weight {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--terracotta-deep);
  padding: 2px 8px;
  border: 1px solid var(--terracotta);
  background: var(--ivory);
}
.palette-legend__txt {
  font-family: var(--f-body);
}

/* ======================================================================
   PALETTE BADGE — displayed on each result card, parallel to fit-badge
   ====================================================================== */

.palette-badge {
  margin-top: var(--gap-2);
  padding: var(--gap-2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-2);
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid var(--grey-5);
}
.palette-badge__mark {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 14px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
}
.palette-badge.is-full {
  background: var(--ivory-2);
  border-color: var(--terracotta);
  color: var(--terracotta-deep);
}
.palette-badge.is-full .palette-badge__text { color: var(--grey-1); }
.palette-badge.is-partial {
  background: var(--ivory);
  border-color: var(--grey-4);
  color: var(--grey-2);
}
.palette-badge.is-partial .palette-badge__text { color: var(--grey-1); }
.palette-badge.is-unknown {
  background: var(--ivory-2);
  border-color: var(--grey-4);
  color: var(--grey-3);
}
.palette-badge.is-unknown .palette-badge__text { color: var(--grey-2); }
.palette-badge.is-mismatch {
  background: var(--ivory-2);
  border: 1px dashed var(--grey-3);
  color: var(--grey-2);
}
.palette-badge.is-mismatch .palette-badge__mark { border-color: var(--grey-3); }
.palette-badge.is-mismatch .palette-badge__text { color: var(--grey-1); }

/* ======================================================================
   PALETTE SUMMARY (in result-head) — echoes the user's tone selections
   ====================================================================== */

.palette-summary {
  margin-top: var(--gap-3);
  padding: var(--gap-3);
  border: 1px solid var(--terracotta);
  background: var(--ivory-2);
  position: relative;
}
.palette-summary__stamp {
  position: absolute;
  top: -10px;
  left: var(--gap-3);
  background: var(--ivory);
  padding: 0 var(--gap-2);
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--terracotta-deep);
  text-transform: uppercase;
}
.palette-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.palette-summary__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--gap-2);
  padding: 4px var(--gap-2);
  border-bottom: 1px dashed var(--grey-4);
  align-items: center;
}
.palette-summary__row:last-child {
  border-bottom: none;
}
.palette-summary__lbl {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grey-3);
  text-transform: uppercase;
}
.palette-summary__val {
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2);
}
.palette-summary__swatches,
.palette-summary__shapes,
.palette-summary__weights {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.palette-summary__swatch {
  width: 22px;
  height: 22px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.palette-summary__shape {
  width: 28px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-1);
}
.palette-summary__shape svg { width: 100%; height: 100%; }
.palette-summary__weight {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--terracotta-deep);
  padding: 2px 8px;
  border: 1px solid var(--terracotta);
  background: var(--ivory);
}

@media (max-width: 720px) {
  .palette-legend__row,
  .palette-summary__row {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   CHECKLIST PAGE
   ====================================================================== */

.checklist-page {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--gap-6) var(--gap-4);
}

.checklist-hero {
  margin-bottom: var(--gap-6);
  padding-bottom: var(--gap-5);
  border-bottom: 1px solid var(--grey-4);
}
.checklist-hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--grey-1);
  margin: var(--gap-3) 0 var(--gap-3);
}
.checklist-hero h1 .ja {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: var(--gap-2);
  color: var(--grey-1);
}
.checklist-lead {
  font-size: 15px;
  line-height: 2.0;
  color: var(--grey-2);
  max-width: 700px;
  margin-bottom: var(--gap-3);
}
.verbatim-line {
  position: relative;
  background: var(--ivory-2);
  border-left: 2px solid var(--terracotta);
  padding: var(--gap-2) var(--gap-3);
  font-size: 14px;
  color: var(--ink-on-paper);
  line-height: 1.85;
  max-width: 720px;
  margin-bottom: var(--gap-4);
}
.verbatim-line .quote-stamp {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--terracotta-deep);
  text-transform: uppercase;
  margin-right: var(--gap-2);
  border: 1px solid var(--terracotta);
  padding: 2px 6px;
  display: inline-block;
}
.checklist-tools {
  display: flex;
  gap: var(--gap-3);
  flex-wrap: wrap;
  margin-top: var(--gap-3);
}

.checklist-section {
  margin-bottom: var(--gap-6);
  padding-top: var(--gap-3);
}

.drawing-row {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--gap-5);
  align-items: start;
}
@media (max-width: 720px) {
  .drawing-row { grid-template-columns: 1fr; }
}

.drawing {
  margin: 0;
  border: 1px solid var(--grey-4);
  background: var(--ivory);
  padding: var(--gap-3);
  position: relative;
}
.drawing__cap {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grey-3);
  text-transform: uppercase;
  margin-bottom: var(--gap-2);
  border-bottom: 1px solid var(--grey-5);
  padding-bottom: 4px;
}
.drawing svg {
  width: 100%;
  height: auto;
  display: block;
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-3);
  padding: var(--gap-3);
  border: 1px solid var(--grey-4);
  background: var(--ivory);
  align-items: start;
}
.check-box {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--grey-1);
  background: var(--ivory);
  margin-top: 2px;
  position: relative;
  flex-shrink: 0;
}
.check-text h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.10em;
  color: var(--grey-1);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.check-text p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--grey-2);
  margin: 0;
}
.check-text strong {
  color: var(--grey-1);
  font-weight: 700;
}
.check-text em {
  font-style: normal;
  color: var(--terracotta-deep);
}
.check-text .dim-unit {
  display: inline-block;
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--terracotta-deep);
  border: 1px solid var(--terracotta);
  padding: 1px 5px;
  margin-left: 4px;
  text-transform: uppercase;
}

.memo-lead {
  font-size: 14px;
  color: var(--grey-2);
  margin-bottom: var(--gap-3);
  line-height: 1.85;
  max-width: 680px;
}
.memo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-4);
}
@media (max-width: 720px) {
  .memo-grid { grid-template-columns: 1fr; }
}
.memo-block {
  border: 1px solid var(--grey-4);
  padding: var(--gap-3);
  background: var(--ivory);
}
.memo-block__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--grey-1);
  text-transform: uppercase;
  border-bottom: 1px solid var(--grey-4);
  padding-bottom: 4px;
  margin-bottom: var(--gap-3);
}
.memo-block__title .ja {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--grey-3);
  margin-left: var(--gap-2);
  font-weight: 500;
}
.memo-block__lines {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}
.memo-line {
  height: 24px;
  border-bottom: 1px dashed var(--grey-4);
}

.checklist-foot {
  margin-top: var(--gap-5);
  padding-top: var(--gap-4);
  border-top: 1px solid var(--grey-4);
  display: flex;
  gap: var(--gap-3);
  flex-wrap: wrap;
}

/* ======================================================================
   PRINT — A4 friendly version of the checklist page
   ====================================================================== */

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body {
    background: white;
    color: #000;
    font-size: 11pt;
    line-height: 1.55;
    background-image: none;
  }
  .no-print, .pr-banner, .site-header, .site-footer,
  .checklist-tools, .checklist-foot,
  .palette-chip, .palette-toggle, .palette-legend { display: none !important; }
  .checklist-page { max-width: 100%; padding: 0; margin: 0; }
  .checklist-hero { margin-bottom: 8mm; padding-bottom: 4mm; }
  .checklist-hero h1 { font-size: 22pt; }
  .checklist-hero h1 .ja { font-size: 12pt; }
  .checklist-lead, .verbatim-line { font-size: 10pt; }
  .verbatim-line { background: white; border-left: 2px solid #888; }
  .checklist-section { margin-bottom: 8mm; page-break-inside: avoid; }
  .drawing-row { grid-template-columns: 80mm 1fr; gap: 6mm; }
  .drawing { border: 1px solid #333; padding: 3mm; }
  .check-item { border: 1px solid #999; padding: 2mm 3mm; gap: 3mm; }
  .check-box { border-color: #000; }
  .check-text h4 { font-size: 9pt; }
  .check-text p { font-size: 9pt; line-height: 1.5; }
  .check-text .dim-unit { border-color: #888; color: #555; }
  .check-text em { color: #000; font-weight: 700; }
  .memo-grid { grid-template-columns: 1fr 1fr; gap: 4mm; }
  .memo-block { border: 1px solid #888; padding: 3mm; }
  .memo-line { border-bottom: 1px dashed #999; height: 6mm; }
  .section-head__num,
  .section-head__title,
  .section-head__stamp { color: #000 !important; }
  .section-head__title { font-size: 14pt; }
  .section-head__title .ja { font-size: 10pt; }
}

/* ======================================================================
   REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}