/* ===== RC-2.0.1 Step Layout ===== */

/* ── Grid System v1 ─────────────────────────────────────── */
:root {
  --g-pad:     20px;   /* container side padding */
  --g-gap:     12px;   /* grid column/row gap     */
  --g-section: 20px;   /* vertical section spacing */

  --pad-x:               20px;  /* step shell horizontal padding */
  --gap-progress-to-step: 24px; /* progress bar → step header gap */
}

.grid { display: grid; gap: 12px; }
.grid--1, .grid--2, .grid--3 { display: grid; gap: var(--g-gap); }
.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.step-grid { margin: 0; padding: 0; }
.step-grid--chips { /* grid behavior from .grid--2 only */ }

/* Safety guard — Steps 1–2 chips, Step 3 selection cards (Step4 unaffected) */
#screen > .grid--2 > .chip { padding-left: 0; }
.selection-step[data-step="3"] .selection-card { padding-left: 0; }

/* step title */
/* Steps 5-6 visible heading → content = 20px (Steps 3-4: .selection-title display:none) */
.stepTitle{ font-size:16px; font-weight:1000; margin:0 0 20px; }

/* ── Step 1~3 grid: 360px safe ── */
.chipgrid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  justify-items:stretch;
}
.chip{
  outline-offset:-2px;
  min-width:0;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* Step 5 SSOT: 섹션 타이틀(label) → 버튼 그룹(chipgrid) = 20px
   Only matches Step5 context (no other steps use .label + .chipgrid adjacency) */
.label + .chipgrid{ margin-top:20px; }

/* Step 3 cards: min-height = 3-line name baseline */
.chip[data-id]{
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* result display */
.resultBig{ font-size:30px; font-weight:1000; letter-spacing:-.4px; line-height:1.3; }
.resultSub{ color:var(--muted); font-size:13px; margin-top:4px; }

.footnote{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.55; }

/* ── Share modal — Zeplin pixel spec ── */
.shareGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.shareBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
img.shareIcon{
  width:32px;
  height:32px;
  object-fit:contain;
  margin-bottom:6px;
}
.shareLabel{
  font:400 16px/1.25 'SUIT', sans-serif;
  letter-spacing:-0.32px;
  color:#070707;
  text-align:center;
}
.shareBtn--disabled{
  opacity:0.35;
  pointer-events:none;
  cursor:default;
}

/* debug grid */
.dbgGrid{ display:grid; grid-template-columns: 140px 1fr; gap:6px 10px; font-size:12px; color:#0f172a; }
.dbgKey{ color:var(--muted); }

/* upload line */
.fileLine{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.fileName{ font-size:12px; color:#334155; }

/* =========================
   STEP SHELL — 3-row grid
   Reusable for Step 1–7
========================= */

/* Shell: 360×680 grid container */
.step-shell {
  width: 360px;
  margin: 0 auto;
  min-height: 680px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  box-sizing: border-box;
}

/* Top row: header (full-width) + progress + step-header; no global h-padding */
.step-top {
  padding: 0;
}

/* Step header: sits var(--gap-progress-to-step) below progress (or top of .step-top) */
.step-header {
  margin-top: var(--gap-progress-to-step);
}

.step-kicker {
  font: 700 18px/23px 'SUIT', sans-serif;
  letter-spacing: -0.36px;
  color: #CE0F2D;
}

.step-heading {
  margin-top: 4px;
  font: 700 22px/28px 'SUIT', sans-serif;
  letter-spacing: -0.44px;
  color: #070707;
}

/* Content row: card grid (2 cols × 154px + 12px gap fits in 320px) */
.step-content {
  padding: 0 var(--pad-x);
}

/* Heading→card gap: 20px — Zeplin Step1 .title margin:4px 222px 20px 20px,
   Step2 .title margin:4px 218px 20px 20px (design-raw/Step1/8.png, Step2/9.png) */
.step-content:has(.step1-card),
.step-content:has(.step2-card) {
  padding-top: 20px;
}

/* Bottom row: natural height; app__main bottom padding handles footer clearance */
.step-bottom {
}

/* =========================
   STEP1 — Shell gates
   Replaces stale > .grid--2 > .chip[data-v] selectors in components.css
========================= */

/* Neutralize #screen card frame */
#screen:has(.step-shell) {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

/* Remove app__main margin/padding so shell starts flush at stage top */
.app__main:has(#screen .step-shell) {
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Hide spacer above #screen */
.app__main:has(#screen .step-shell) > .sp {
  display: none;
}

/* Override position:absolute on chips — make them flow items in .step-content grid */
.step-content .chip[data-v="dog"],
.step-content .chip[data-v="cat"],
.step-content .chip[data-v="normal"],
.step-content .chip[data-v="prescription"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

/* Step1 CTA overrides removed — now global in components.css (SSOT commonization) */

/* =========================
   STEP 1 — Card (XD pixel-match)
========================= */

.step1-card {
  width: 154px !important;
  height: 182px !important;
  border-radius: 8px !important;
  border: 1px solid #E3E3E3 !important;
  background: #FFFFFF !important;
  padding: 10px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.step1-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.step1-icon {
  width: 136px;
  height: 136px;
  flex-shrink: 0;
  object-fit: contain;
}

.step1-card b {
  margin-top: auto;
  margin-bottom: 12px;
  font: 500 19px/24px 'SUIT', sans-serif;
  letter-spacing: -0.38px;
  color: #070707;
  text-align: center;
}

.step1-card.selected {
  background: #FFE6EB !important;
  border-color: #CE0F2D !important;
}

.step1-card.selected b {
  color: #CE0F2D;
}

/* =========================
   STEP 2 — Card (XD pixel-match)
========================= */

.step2-card {
  width: 154px !important;
  height: 124px !important;
  border-radius: 8px !important;
  border: 1px solid #E3E3E3 !important;
  background: #FFFFFF !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.step2-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.step2-logo {
  width: 128px;
  height: 68px;
  object-fit: contain;
  flex-shrink: 0;
}

.step2-card b {
  margin-top: 8px;
  font: 500 19px/24px 'SUIT', sans-serif;
  letter-spacing: -0.38px;
  color: #070707;
  text-align: center;
}

.step2-card.selected {
  background: #FFE6EB !important;
  border-color: #CE0F2D !important;
}

.step2-card.selected b {
  color: #CE0F2D;
  font-weight: 700;
}

/* =========================
   STEP SHELL — header + progress inside .step-top
   ONE global xd-header hidden; shell provides its own.
========================= */

/* Hide global xd-header when shell is active (shell .step-top has its own) */
.stage:has(#screen .step-shell) > .xd-header {
  display: none;
}

/* .xd-header inside .step-top: stays position:relative (needed for abs logo/title);
   resets z-index so it doesn't lift above modals */
.step-top .xd-header {
  z-index: auto;
}

/* Progress inside .step-top: header bottom → progress top = 20px (XD spec) */
.step-top .progress {
  margin-top: 20px;
  margin-left:  var(--pad-x);
  margin-right: var(--pad-x);
}

/* Step header inside .step-top: 20px side padding for XD left-20px alignment */
.step-top .step-header {
  padding-left:  var(--pad-x);
  padding-right: var(--pad-x);
  /* margin-top: var(--gap-progress-to-step) from .step-header base rule */
}

/* =========================
   STEP 3 — step-shell overrides
   selection-step needs full 360px width for pixel modes
========================= */

/* Remove step-content padding for steps that manage their own internal spacing.
   :has() gate preserved — heading→card 20px handled by margin-top on child elements. */
.step-content:has(.selection-step[data-step="3"]),
.step-content:has(.selection-step[data-step="4"]) {
  padding: 0;
}

/* Step3: heading → first card = 20px (via chipgrid margin; pixel modes override with margin:0!important) */
.step-shell .selection-step[data-step="3"] .chipgrid.selection-list {
  margin-top: 20px;
}

/* Hide legacy ::before/::after title when step-shell provides step-header */
.step-shell .selection-step > .selection-title {
  display: none !important;
}


/* =========================
   STEP4 — Container Reset
========================= */

#screen:has(.selection-step[data-step="4"]) {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

.app__main:has(#screen:has(.selection-step[data-step="4"])) {
  padding-left: 0;
  padding-right: 0;
}

.app__main:has(#screen:has(.selection-step[data-step="4"])) > .sp {
  display: none;
}

/* =========================
   STEP4 — Grid Layout
========================= */

.selection-step[data-step="4"] {
  padding: 0;
}

/* Stage: 2-column grid SSOT — always 2-col, left-aligned, 12px gap, 20px side padding
   배열: 3개→2+1, 2개→2+0 (justify-content:start guarantees left alignment) */
.selection-step[data-step="4"] .step4-stage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 20px;
  justify-content: start;
}

/* When step4-title is removed (step-shell provides title), heading → card = 20px */
.step-shell .selection-step[data-step="4"] .step4-stage {
  margin-top: 20px;
}

/* =========================
   STEP4 — Card Base
========================= */

.step4-card {
  position: static;
  width: 154px;
  height: 182px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #E3E3E3;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  justify-self: start;
}

.step4-card.is-selected {
  background: #FFE6EB;
  border-color: #CE0F2D;
}

/* Thumb: flow item inside flex card */
.step4-card .life-thumb {
  width: 138px;
  height: 136px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Senior thumb exception: cat senior ONLY — scoped class, 전역 thumb CSS 수정 금지
   dog senior thumb = 136px (default), cat senior thumb = 96px (design 보정) */
.step4--cat-2 .step4-card[data-k="senior"] .life-thumb,
.step4--cat-3 .step4-card[data-k="senior"] .life-thumb {
  height: 96px;
}

/* Label: pushed to bottom via auto top margin */
.step4-card .life-label {
  margin-top: auto;
  padding-bottom: 18px;
  width: 100%;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  color: #070707;
}

.step4-card.is-selected .life-label {
  color: #CE0F2D;
  font-weight: 700;
}

/* =========================
   STEP4 — Thumbnail Assets
========================= */

/* Dog: SVG normal, PNG @2x selected */
.step4-card .life-thumb--dog-puppy  { background-image: url('../assets/image/4%20dog_puppy.svg'); }
.step4-card .life-thumb--dog-adult  { background-image: url('../assets/image/4%20dog_adult.svg'); }
.step4-card .life-thumb--dog-senior { background-image: url('../assets/image/4%20dog_senior.svg'); }

.step4-card .life-thumb--dog-puppy.is-selected {
  background-image: -webkit-image-set(url('../assets/image/4%20dog_puppy_toggle.png') 1x, url('../assets/image/4%20dog_puppy_toggle@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20dog_puppy_toggle.png') 1x, url('../assets/image/4%20dog_puppy_toggle@2x.png') 2x);
}
.step4-card .life-thumb--dog-adult.is-selected {
  background-image: -webkit-image-set(url('../assets/image/4%20dog_adult_toggle.png') 1x, url('../assets/image/4%20dog_adult_toggle@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20dog_adult_toggle.png') 1x, url('../assets/image/4%20dog_adult_toggle@2x.png') 2x);
}
.step4-card .life-thumb--dog-senior.is-selected {
  background-image: -webkit-image-set(url('../assets/image/4%20dog_senior_toggle.png') 1x, url('../assets/image/4%20dog_senior_toggle@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20dog_senior_toggle.png') 1x, url('../assets/image/4%20dog_senior_toggle@2x.png') 2x);
}

/* Cat: PNG @2x normal + selected */
.step4-card .life-thumb--cat-kitten {
  background-image: -webkit-image-set(url('../assets/image/4%20cat_kitten.png') 1x, url('../assets/image/4%20cat_kitten@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20cat_kitten.png') 1x, url('../assets/image/4%20cat_kitten@2x.png') 2x);
}
.step4-card .life-thumb--cat-adult {
  background-image: -webkit-image-set(url('../assets/image/4%20cat_adult.png') 1x, url('../assets/image/4%20cat_adult@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20cat_adult.png') 1x, url('../assets/image/4%20cat_adult@2x.png') 2x);
}
.step4-card .life-thumb--cat-senior {
  background-image: -webkit-image-set(url('../assets/image/4%20cat_senior.png') 1x, url('../assets/image/4%20cat_senior@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20cat_senior.png') 1x, url('../assets/image/4%20cat_senior@2x.png') 2x);
}

.step4-card .life-thumb--cat-kitten.is-selected {
  background-image: -webkit-image-set(url('../assets/image/4%20cat_kitten_toggle.png') 1x, url('../assets/image/4%20cat_kitten_toggle@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20cat_kitten_toggle.png') 1x, url('../assets/image/4%20cat_kitten_toggle@2x.png') 2x);
}
.step4-card .life-thumb--cat-adult.is-selected {
  background-image: -webkit-image-set(url('../assets/image/4%20cat_adult_toggle.png') 1x, url('../assets/image/4%20cat_adult_toggle@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20cat_adult_toggle.png') 1x, url('../assets/image/4%20cat_adult_toggle@2x.png') 2x);
}
.step4-card .life-thumb--cat-senior.is-selected {
  background-image: -webkit-image-set(url('../assets/image/4%20cat_senior_toggle.png') 1x, url('../assets/image/4%20cat_senior_toggle@2x.png') 2x);
  background-image: image-set(url('../assets/image/4%20cat_senior_toggle.png') 1x, url('../assets/image/4%20cat_senior_toggle@2x.png') 2x);
}

/* =========================
   STEP5 — Step-Shell + Button SSOT
   Step5 renders via step-shell (shared with Step1–4).
   Buttons: 44px flat, 4px radius, 400 weight, centered.
   Grid: 2-col default, 3-col for 목적/활동량/상태 및 환경.
========================= */

/* heading (step-header) → first grid = 20px */
.step-content:has(.selection-step[data-step="5"]) {
  padding-top: 20px;
}

/* 3-col override — .grid--3 class added by renderStep5() */
.selection-step[data-step="5"] .chipgrid.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Button base: 44px height, 4px radius, centered text */
.selection-step[data-step="5"] .chip {
  height: 44px;
  border-radius: 4px;
  border: 1px solid #E3E3E3;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  box-shadow: none;
  outline: none;
}

/* Button text: weight 400 (override <b> default bold) */
.selection-step[data-step="5"] .chip b {
  font-weight: 400;
}

/* Button selected state */
.selection-step[data-step="5"] .chip.selected {
  background: #FFE6EB;
  border-color: #CE0F2D;
  outline: none;
}

/* Button hover: no effect (mobile-first, matches Step1-2 pattern) */
.selection-step[data-step="5"] .chip:hover {
  transform: none;
  box-shadow: none;
}

/* In-content section label (2nd section in two-section cases)
   Typography = step-heading (Bold 22px/28px), section gap = 20px */
.selection-step[data-step="5"] .step5-section-label {
  margin-top: 52px;
  font: 700 22px/28px 'SUIT', sans-serif;
  letter-spacing: -0.44px;
  color: #070707;
}

/* Section label → button grid = 20px */
.selection-step[data-step="5"] .step5-section-label + .chipgrid {
  margin-top: 20px;
}

/* =========================
   STEP6 — Weight Input Pixel Publishing (2026-02-25)
   Gate: .step6-content  (step-shell 공통 구조 내부)
   Container reset / app__main 패딩 → step-shell 공통 (line 185) 자동 적용
   SSOT: step-heading→label 8px, label→input 20px, block↔block 52px(dual)
========================= */

/* ── step-heading→label gap: step-header 하단 → step-content 상단 = 8px ── */
.step6-content {
  padding-top: 8px;
}

/* ── DogAdjust 2nd heading (목표 체중 — step-content 내부) ── */
.step6-content .step6-heading {
  font: 700 22px/28px 'SUIT', sans-serif;
  letter-spacing: -0.44px;
  color: #070707;
  margin-bottom: 8px;  /* heading→label = 8px */
}

/* ── Label/subtitle ── */
.step6-content .label {
  font: 300 16px/1 'SUIT', sans-serif;  /* Zeplin: Light 300, 16px */
  color: #6F6F6F;
  letter-spacing: -0.32px;
  margin-bottom: 20px;  /* label→input = 20px */
}

/* ── Input field ── */
.step6-content input[type="text"] {
  height: 44px;
  padding: 0 48px 0 16px;  /* right 48px: room for "kg" suffix */
  border-radius: 5px;
  border: 1px solid #E3E3E3;
  font: 400 16px/1 'SUIT', sans-serif;
  color: #000000;
  box-sizing: border-box;
}
.step6-content input[type="text"]::placeholder {
  color: #BABABA;
}
.step6-content input[type="text"]:focus {
  border-color: #CE0F2D;
  box-shadow: none;
}

/* ── Input wrap + "kg" suffix ── */
.step6-content .input-wrap {
  position: relative;
  width: 100%;
}
.step6-content .input-wrap input[type="text"] {
  width: 100%;
}
.step6-content .input-kg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font: 400 16px/1 'SUIT', sans-serif;
  color: #070707;
  pointer-events: none;
}

/* ── Error state ── */
.step6-content input.invalid {
  border-color: #CE0F2D !important;
  box-shadow: none !important;
}
.step6-content .hint {
  margin-top: 8px;
  font-size: 14px;
  color: #CE0F2D;
  font-weight: 400;
  line-height: 1.45;
}

/* ── Dual-field: stack vertically (Zeplin 320px full-width fields) ── */
.step6-content .row {
  flex-direction: column;
  gap: 0;
}
.step6-content .col + .col {
  margin-top: 52px;  /* Zeplin: 두 번째 섹션 margin-top */
}

/* =========================
   STEP7 — Result Pixel Publishing (2026-02-25)
   Gate: .step7-content (step-shell 공통 구조 내부)
   타입1 (.step7--single): 권장급여량 결과 (single card + footnote)
   타입2 (.step7--stages): 단계별 급여가이드 (card stack + footnote)
   Zeplin source: answer.md §Step 7
========================= */

/* ── step-heading→label gap ── */
.step7-content {
  padding-top: 8px;
}

/* ── Label/subtitle ── */
.step7-content > .label {
  font: 300 16px/1 'SUIT', sans-serif;
  color: #6F6F6F;
  letter-spacing: -0.32px;
  margin-bottom: 20px;
}

/* ── Card base — Zeplin: 320×auto, radius:8, border:#E3E3E3, bg:#F7F7F7 ── */
.step7-content .card {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #E3E3E3;
  background-color: #F7F7F7;
  box-shadow: none;
}

/* ── resultBig: 케이스1 = 25px, 케이스2 = 18px ── */
.step7--single .resultBig {
  font: 700 25px/normal 'SUIT', sans-serif;
  letter-spacing: -0.5px;
  color: #070707;
  margin-bottom: 8px;
}
.step7--stages .resultBig {
  font: 700 18px/normal 'SUIT', sans-serif;
  letter-spacing: -0.36px;
  color: #070707;
  margin: 8px 0;
}

/* ── Accent (gram values in red) ── */
.step7-content .result-accent {
  font-weight: 700;
  color: #CE0F2D;
}

/* ── resultSub ── */
.step7-content .resultSub {
  font: 300 14px/normal 'SUIT', sans-serif;
  letter-spacing: -0.28px;
  color: #BABABA;
  margin: 8px 0 12px;
}

/* ── Stage label (1단계, 2단계, 최종 단계) ── */
.step7-content .stage-label {
  font: 800 18px/normal 'SUIT', sans-serif;
  letter-spacing: -0.36px;
  color: #CE0F2D;
  margin-bottom: 8px;
}

/* ── hr ── */
.step7-content .hr {
  margin: 0 0 12px;
  border: none;
  border-top: 1px solid #E3E3E3;
}

/* ── resultSmall (분할 급여) — Zeplin .txt3 ── */
.step7-content .resultSmall {
  font: 400 16px/1.5 'SUIT', sans-serif;
  letter-spacing: -0.32px;
  color: #070707;
}

/* ── resultNote (muted 안내) — Zeplin .txt4 ── */
.step7-content .resultNote {
  font: 300 13px/1.54 'SUIT', sans-serif;
  letter-spacing: -0.26px;
  color: #070707;
  margin-top: 12px;
}

/* ── details/accordion — Zeplin: bordered box, 14px bold #424242, chevron 16×16 ── */
.step7-content details {
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #E3E3E3;
  background: #fff;
  padding: 12px;
}
.step7-content details summary {
  font: 700 14px/1.29 'SUIT', sans-serif;
  letter-spacing: -0.28px;
  color: #424242;
  cursor: pointer;
  display: flex;
  align-items: center;
  list-style: none;
}
.step7-content details summary::-webkit-details-marker {
  display: none;
}
.step7-content details summary::before {
  content: '';
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
  background: no-repeat center / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2.3 5.5L8 11.2 13.7 5.5' stroke='%23424242' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.step7-content details[open] summary::before {
  transform: rotate(180deg);
}
.step7-content details .resultNote {
  margin-top: 10px;
}

/* ── Footnote — Zeplin: 12px/1.58, 300, #070707 ── */
.step7-content .footnote {
  font: 300 12px/1.58 'SUIT', sans-serif;
  letter-spacing: -0.24px;
  color: #070707;
  margin-top: 0;
  margin-bottom: 20px;
}
.step7-content .footnote b {
  font-weight: 700;
}

/* =========================
   PC Layout — Step4 @2x force (zoom: 1.5889 bypasses image-set DPR)
========================= */
@media (min-width: 1200px) {
  /* Dog selected: force @2x */
  .step4-card .life-thumb--dog-puppy.is-selected {
    background-image: url('../assets/image/4%20dog_puppy_toggle@2x.png');
  }
  .step4-card .life-thumb--dog-adult.is-selected {
    background-image: url('../assets/image/4%20dog_adult_toggle@2x.png');
  }
  .step4-card .life-thumb--dog-senior.is-selected {
    background-image: url('../assets/image/4%20dog_senior_toggle@2x.png');
  }
  /* Cat normal: force @2x */
  .step4-card .life-thumb--cat-kitten {
    background-image: url('../assets/image/4%20cat_kitten@2x.png');
  }
  .step4-card .life-thumb--cat-adult {
    background-image: url('../assets/image/4%20cat_adult@2x.png');
  }
  .step4-card .life-thumb--cat-senior {
    background-image: url('../assets/image/4%20cat_senior@2x.png');
  }
  /* Cat selected: force @2x */
  .step4-card .life-thumb--cat-kitten.is-selected {
    background-image: url('../assets/image/4%20cat_kitten_toggle@2x.png');
  }
  .step4-card .life-thumb--cat-adult.is-selected {
    background-image: url('../assets/image/4%20cat_adult_toggle@2x.png');
  }
  .step4-card .life-thumb--cat-senior.is-selected {
    background-image: url('../assets/image/4%20cat_senior_toggle@2x.png');
  }
}