/* FITBRUSH — illustrated questionnaire (shared by EN + KO).
   Loaded after /css/style.css by web/en/survey.html and web/ko/survey.html. Adds nothing global:
   every rule is scoped to the survey's own containers so the page works
   under either the left rail or the top-header layout. */

/* ---------- question hero illustration ---------- */
.q-hero { display: flex; justify-content: center; margin: 2px 0 16px }
.q-hero img {
  width: clamp(96px, 32vw, 140px); height: auto; aspect-ratio: 1 / 1;
  border-radius: 26px; display: block;
}

/* ---------- illustrated option grid ---------- */
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: stretch }
@media (min-width: 560px) {
  .opt-grid { grid-template-columns: repeat(3, 1fr) }
  .opt-grid[data-n="2"] { grid-template-columns: repeat(2, 1fr) }
  .opt-grid[data-n="4"], .opt-grid[data-n="8"] { grid-template-columns: repeat(4, 1fr) }
}

.opt.img-opt {
  position: relative; height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 12px 10px 14px; border-radius: 20px; border: 2px solid transparent;
  background: var(--surface); box-shadow: var(--sh-pill);
  text-align: center; font-size: 13.5px; line-height: 1.35; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em;
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
.img-opt .thumb-img {
  width: 100%; max-width: 96px; height: auto; aspect-ratio: 1 / 1;
  border-radius: 16px; display: block; object-fit: contain;
}
/* fallback when an option has no illustration yet */
.img-opt .thumb-ic {
  display: flex; align-items: center; justify-content: center;
  background: var(--mint-bg); color: var(--mint);
}
.img-opt .opt-lb { display: block; overflow-wrap: anywhere; word-break: keep-all }

/* selected state — violet border, wash fill, check badge */
.opt.img-opt.on,
.opt.img-opt[aria-pressed="true"] {
  border-color: var(--mint); background: var(--mint-bg);
  box-shadow: 0 6px 18px rgba(69, 36, 219, .22); font-weight: 700;
}
.img-opt .tick,
#seg-cat.cat-grid .opt .tick {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: var(--mint); display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.opt.img-opt.on .tick,
.opt.img-opt[aria-pressed="true"] .tick,
#seg-cat.cat-grid .opt.on .tick { display: flex }
.img-opt .tick svg, #seg-cat.cat-grid .tick svg { width: 18px; height: 18px }

/* ---------- category picker cards (pre-screen) ---------- */
#seg-cat.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch }
#seg-cat.cat-grid .opt {
  position: relative; height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  padding: 12px 8px 14px; border-radius: 20px; border: 2px solid transparent;
  background: var(--surface); box-shadow: var(--sh-pill);
  text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
#seg-cat.cat-grid .opt img {
  width: 100%; max-width: 84px; height: auto; aspect-ratio: 1 / 1;
  border-radius: 16px; display: block; margin: 0 auto;
}
#seg-cat.cat-grid .opt.on {
  border-color: var(--mint); background: var(--mint-bg);
  box-shadow: 0 6px 18px rgba(69, 36, 219, .22); font-weight: 700;
}

/* ---------- interaction: hover, focus, motion ---------- */
@media (hover: hover) {
  .opt.img-opt:hover, #seg-cat.cat-grid .opt:hover { transform: translateY(-2px); box-shadow: var(--sh-card) }
}
.opt.img-opt:focus-visible, #seg-cat.cat-grid .opt:focus-visible {
  outline: 3px solid var(--mint-deep); outline-offset: 3px;
}
.opt.img-opt:active, #seg-cat.cat-grid .opt:active { transform: translateY(0) }

@media (prefers-reduced-motion: reduce) {
  .opt.img-opt, #seg-cat.cat-grid .opt { transition: none }
  .opt.img-opt:hover, #seg-cat.cat-grid .opt:hover { transform: none }
}

/* forced-colours / high-contrast: keep the selection readable without colour */
@media (forced-colors: active) {
  .opt.img-opt.on, .opt.img-opt[aria-pressed="true"], #seg-cat.cat-grid .opt.on { border-style: solid; border-width: 3px }
}