/*
 * 맘스토어 v3 시안 — 화면 전용 규칙 — 맘스토어 탭(추천 · 가이드 · 맘스토어 머리)·전체 카테고리·이름으로 찾기·판정 기준·검수 방법
 * 7차(SPEC v5 4절 · 5.3 · 5.4): 예전 조건별 보기(세 묶음 카드 · 질문 카드 · 추천 상자 · 종류 칩 · 뒤로 링크) 규칙은 지웠다.
 *   공용 부품의 모양(.ms-pchip · .ms-subtabs · .ms-ichips · .ms-cbox · .ms-fit · .ms-price--row · .ms-part · .ms-hicon)은 css/v3-components.css 에 있다.
 *   여기는 배치(여백·격자·줄 배치)와 이 화면 묶음만의 모양(.ms-storehead · .ms-prow · .s3-…).
 * 화면 담당은 자기 파일 안에만 규칙을 더한다. 배치 분기점은 @container frame (min-width: 768px / 1024px) 으로 쓴다.
 * 14px 미만 규칙(SPEC 0): 한글이 들어간 14px 미만 글자는 굵기 400～600. 누르는 곳 44px 이상.
 */

/* === s3 === */

/* ---------- 7차: 맘스토어 탭 틀(SPEC 4 — 참고 그림 "맘스토어_우리집템_예시" · "조건입력_예시") ----------
 * 맘스토어 머리(.ms-storehead)가 있는 화면은 틀 머리글(로고 줄) 없이(U.shell header:false — 7차 통합) 시기 줄이 맨 위가 된다(그림처럼 — 홈만 로고 줄).
 * 추천·가이드(.s3-store)는 흰 바탕 중심(브리프 공통 디자인). 준비표(HOME)는 바탕을 그 화면이 정한다 — 머리만 흰 판 */
.ms-app:has(.s3-store) {
  background: var(--card);
}

.s3-store.ms-page {
  padding-top: 20px;
  padding-bottom: 40px;
}

/* 맘스토어 머리: 흰 판 + 안쪽 16px 여백. main 바로 아래(준비표)에 두면 틀 폭 그대로,
 * .ms-container(16px 여백 — 추천·가이드) 안에 두면 판을 화면 끝까지 깔고, 쪽 위 여백(20px)을 덮는다 */
.ms-storehead {
  padding: 0 16px;
  background: var(--card);
}

.ms-main > .ms-storehead {
  padding-top: 6px;
}

.ms-container .ms-storehead {
  margin: 0 -16px;
}

.ms-page .ms-storehead:first-child {
  margin-top: -20px;
  padding-top: 6px;
}

/* 시기 줄: 왼쪽 큰 글씨 [7～12개월 ▾](h1 이 아님) · 오른쪽 검색·저장 아이콘(44px) */
.ms-storehead__top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
}

.ms-storehead__period {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: var(--touch, 44px);
  margin-left: -4px;
  padding: 0 4px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font-size: 1.75rem;            /* 28px — SPEC 4.1(토큰에 28 이 없어 rem 으로) */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.ms-storehead__period:hover {
  background: var(--muted);
}

.ms-storehead__plabel {
  font-variant-numeric: tabular-nums;
}

.ms-storehead__chev {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  stroke-width: 2.4;
}

.ms-storehead__acts {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: -10px;            /* 아이콘 선이 오른쪽 여백(16px)에 맞게 — 버튼 안쪽 빈 곳만큼 당긴다(홈 머리글과 같게) */
}

/* 위쪽 작은 탭: 화면 끝까지(세 칸 같은 폭 · 선택 = 잉크 굵은 글씨 + 주색 밑줄 3px — 모양은 공용) */
.ms-storehead .ms-subtabs {
  margin: 4px -16px 0;
}

/* 품목 칩 줄: 화면 끝까지 가로 스크롤 + 오른쪽 ▾ 붙박이 */
.ms-storehead .ms-ichips {
  margin: 0 -16px;
  padding: 16px 0 4px;
}

.ms-storehead .ms-ichips__scroll {
  padding-left: 16px;
}

/* 왼쪽 흰 그라데이션(장식 — 오른쪽 ▾ 앞 그라데이션과 짝): 칩 줄을 밀면 앞 칩의 끝 조각(칩 사이 8px)을 덮는다.
 * 처음 자리(스크롤 0)에서는 이 16px 이 빈 여백이라 보이는 차이가 없다 */
.ms-storehead .ms-ichips::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 16px;
  background: linear-gradient(to right, var(--card, #ffffff) 0, var(--card, #ffffff) 9px, rgb(255 255 255 / 0) 16px);
  pointer-events: none;
}

.ms-storehead .ms-ichips__all {
  margin-right: 6px;
}

/* 본문: 머리 아래 */
.s3-store__body {
  padding-top: 16px;
}

.ms-storehead--checklist + .s3-store__body {
  padding-top: 20px;
}

/* ---------- 7차: 추천(SPEC 4.2～4.4) ---------- */
/* 조건 칸 → (초록 띠) → 품목 제목 → 상태 한 줄 → 목록 */
.s3-rec .s3-head {
  margin-top: 24px;
}

.s3-rec .ms-band + .s3-head {
  margin-top: 16px;
}

.s3-rec--empty .s3-head {
  margin-top: 4px;
}

/* 품목 제목 h1(28px 800 잉크) — 가이드도 같은 글자 */
.ms-store__title {
  font-size: 1.75rem;            /* 28px — SPEC 4.3 */
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.ms-store__title:focus {
  outline: none;
}

.s3-head__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.s3-head__basis {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.45;
  color: var(--gray);            /* 흰 5.58 */
}

/* 적합도순에서 어긋남 상품을 뒤로 보냈다는 회색 한 줄(맘맵 .mm-note 와 같은 뜻 — 어긋남이 있을 때만) */
.s3-head__mis {
  margin-top: 2px;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.45;
  color: var(--gray);
}

/* [적합도순 ▾]: 잉크 15px 600 — 줄 높이는 늘리지 않고 누르는 곳만 44px */
.s3-sortbtn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-height: var(--touch, 44px);
  margin: -10px -8px -10px 0;
  padding: 0 8px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 600;
  white-space: nowrap;
}

.s3-sortbtn:hover {
  background: var(--muted);
}

.s3-sortbtn__chev {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

/* 추천 상태 한 줄(배지가 없을 때만 — 목록 바로 위, 회색 13px) */
.s3-recstate {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--muted);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray);            /* #f6eff2 위 4.93 */
}

/* 상품 한 줄 목록(.ms-plist > .ms-prow): 번호 칸 42 · 그림 96 · 글(12px 띄움) / 버튼 줄은 그림 왼쪽 끝부터 오른쪽 끝까지 같은 폭 두 개 */
.ms-plist {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ms-prow {
  display: grid;
  grid-template-columns: 42px 96px minmax(0, 1fr);
  grid-template-areas:
    "no art body"
    ". btns btns"
    ". hint hint";
  align-items: start;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line-soft);
}

.ms-plist > .ms-prow:first-child {
  border-top: 0;
  padding-top: 14px;
}

/* 적합도순이 아니면 번호 칸 자체가 없다 */
.ms-plist--nonum .ms-prow {
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "art body"
    "btns btns"
    "hint hint";
}

.ms-prow__no {
  grid-area: no;
  padding-top: 18px;
  font-family: var(--font-num);
  font-size: 1.75rem;            /* 28px 800 숫자 — SPEC 4.4 */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ms-prow__art {
  grid-area: art;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-tile);
}

.ms-prow__art .ms-part {
  display: grid;
}

.ms-prow__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding-left: 12px;
}

/* "맘스토어 추천": 주색 채움 흰 글씨 12px 600(배지 — 이유 한 줄과 함께만) */
.ms-prow__rec {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 2px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--primary-foreground, #ffffff);   /* 5.34 */
}

/* 상품 이름: 18px 700, 2줄 뒤 말줄임. 링크는 위아래로 누르는 곳을 넓힌다(44px — 겉보기 줄 간격은 그대로) */
.ms-prow__name {
  align-self: stretch;
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.ms-prow__name a {
  display: flex;
  align-items: center;
  min-height: var(--touch, 44px);
  margin: -10px 0;
  padding: 10px 0;
  color: var(--ink);
  text-decoration: none;
}

.ms-prow__name a:hover .ms-prow__nametext {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ms-prow__nametext {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: keep-all;
}

.ms-prow__body .ms-price--row {
  margin-top: 2px;
}

/* 적합도 막대: 글 칸(약 178px)에서 막대와 "4개 중 3개 맞아요"가 한 줄에 들어가게(참고 그림) — 칸·글자를 조금 줄인다 */
.ms-prow__body .ms-fit {
  gap: 4px 8px;
  margin-top: 2px;
}

.ms-prow__body .ms-fit__segs {
  gap: 3px;
}

.ms-prow__body .ms-fit__seg {
  width: 14px;
  height: 7px;
}

.ms-prow__body .ms-fit__text {
  font-size: var(--fs-13);       /* 13px 600 — 한글 14px 미만 굵기 600 이하 */
}

/* 확인 필요 개수(U.fitBar 의 .ms-fit__chk — 막대 옆, 좁으면 다음 줄): 줄 안 막대 글자와 같은 13px */
.ms-prow__body .ms-fit__chk {
  font-size: var(--fs-13);
}

/* 이유(회색 14px) · 확인 필요(회색) · 어긋남(빨강 14px) 한 줄 — 글은 한 절·한 가지(JS), 그래도 길면 2줄에서 자른다(회색 설명 1줄, 많아야 2줄) */
.ms-prow__why,
.ms-prow__miss {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 2px 0 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  word-break: keep-all;
}

.ms-prow__why {
  font-weight: 400;
  color: var(--gray);            /* 흰 5.58 */
}

.ms-prow__miss {
  font-weight: 500;
  color: var(--mismatch);        /* 흰 6.57 */
}

/* [+ 비교 담기] [판매처 보기]: 같은 폭 두 개, 48px, 알약 */
.ms-prow__btns {
  grid-area: btns;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ms-prow__btns .ms-btn {
  min-width: 0;
  min-height: 48px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-size: var(--fs-15);
  font-weight: 600;
}

.ms-prow__btns .ms-btn .ms-ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.ms-prow__cmp {
  border-color: var(--chip-line);
  color: var(--ink);
}

/* 담았어요: 연한 회분홍 바탕 + 잉크 체크(aria-pressed="true") — 주색은 [판매처 보기]만 쓴다(두 버튼이 같아 보이지 않게) */
.ms-prow__cmp.is-on,
.ms-prow__cmp[aria-pressed="true"] {
  border-color: var(--muted);
  background: var(--muted);
  color: var(--ink);             /* #f6eff2 위 잉크 — 높은 대비 */
}

.ms-prow__cmp.is-on:hover,
.ms-prow__cmp[aria-pressed="true"]:hover {
  border-color: var(--chip-line);
}

.ms-prow__seller {
  border-color: var(--pink-line);
  color: var(--primary);         /* 흰 5.34 */
}

.ms-prow__hint {
  grid-area: hint;
  margin-top: 10px;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.45;
  color: var(--gray);
}

/* 목록 아래 발치: 가격 안내 · KC 제외 한 줄 묶음 · 고정 안내(회색 작은 글자) → 광고 자리 */
.s3-recfoot {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.s3-recfoot__price,
.s3-kcout {
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.55;
  color: var(--gray);
}

.s3-notes {
  display: grid;
  gap: 4px;
}

.s3-note {
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray);
}

.s3-rec .ms-adslot {
  margin-top: 20px;
}

/* 상품 목록이 없는 품목: 빈 상태 카드 + [가이드 보기] */
.s3-emptywrap {
  margin-top: 20px;
}

.s3-emptywrap .ms-empty {
  border-style: solid;
  border-color: var(--chip-line);
}

/* ---------- 7차: 시트(시기 · 정렬 · 분류) ---------- */
.s3-sheetline {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray);
}

.s3-sheetline--later {
  padding: 4px 4px 0;
}

/* 같은 폭 48px 버튼 줄(시기 4개 · 정렬 5개) — 선택 = 잉크 바탕 + 흰 글씨 + 흰 체크(aria-pressed="true").
 * 홈 바꾸기 시트·날짜 없이 시작의 시기 칩(.ms-cq__opt)과 같은 선택 모양(브리프 "선택된 칩: 잉크색 바탕 + 흰 글씨") */
.s3-opts {
  display: grid;
  gap: 8px;
}

.s3-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--chip-line);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-16);
  font-weight: 500;
  text-align: left;
}

.s3-opt:hover {
  background: var(--muted);
}

.s3-opt[aria-pressed="true"],
.s3-opt[aria-pressed="true"]:hover {
  border-color: var(--ink);
  background: var(--ink);        /* 흰 글씨 13.75 */
  color: var(--on-dark, #ffffff);
  font-weight: 700;
}

.s3-opt__ico {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 2.6;
  color: var(--primary);
}

.s3-opt[aria-pressed="true"] .s3-opt__ico {
  color: var(--on-dark, #ffffff);
}

/* 분류 시트: 안내 한 줄 · 상황 묶음 6개(32px 아이콘 칸 + 17px 제목) · 칩. 제목은 다른 시트(시기 · 정렬 · 바꾸기)처럼 왼쪽 */

.s3-clsheet {
  display: grid;
  gap: 22px;
  padding-bottom: 8px;
}

.s3-cls__intro {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.55;
  color: var(--gray);
}

.s3-cls__intro strong {
  font-weight: 700;
  color: var(--ink);
}

/* 7차(통합): 뒤 절은 줄을 나누지 않는다 — "진하게," 뒤에서 바뀌어 둘째 줄이 "●는 지금 준비할 품목이에요" 한 덩어리 */
.s3-cls__nw {
  white-space: nowrap;
}

.s3-cls__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 2px 0 1px;
  border-radius: 50%;
  background: var(--brand);       /* 장식 */
  vertical-align: 0;
}

.s3-cls__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: var(--fs-17);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.s3-cls__title .ms-itile {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.s3-cls__title .ms-itile .ms-ico {
  width: 18px;
  height: 18px;
}

.s3-cls__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 7차: 가이드(SPEC 5.3) — 머리 아래 품목 이름 h1 → 왜 → 기준 → [추천 목록 보기] → 접힘 3개 ---------- */
.s3-ghead {
  margin-top: 4px;
}

.s3-ghead__when {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--primary);         /* 흰 5.34 */
}

.s3-ghead__lead {
  margin-top: 6px;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.55;
  color: var(--gray);
}

.s3-guide {
  margin-top: 20px;
}

/* 흰 바탕 위 가이드 카드: 그림자 대신 연한 테두리 */
.s3-guide .ms-scard {
  border: 1px solid var(--chip-line);
  box-shadow: none;
}

.s3-gmain {
  margin-top: 4px;
}

/* 접힘 3개(준비표에서 이 품목 · 사기 빌리기 물려받기 전에 · 안전 관련 사실) */
.s3-gdiscs {
  display: grid;
  gap: 8px;
}

.s3-gdisc {
  border: 1px solid var(--chip-line);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s3-gdisc > summary {
  font-size: var(--fs-15);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.s3-gdisc .ms-disc__body > * + * {
  margin-top: 12px;
}

.s3-acqrows > li + li,
.s3-safe2 > li + li {
  margin-top: 12px;
}

.s3-acqrows__m,
.s3-safe2__t {
  font-size: var(--fs-15);
  font-weight: 700;
}

.s3-acqrows__t,
.s3-safe2__d {
  margin-top: 2px;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray);
}

.s3-safe2 .ms-link {
  margin-top: 2px;
}

.s3-acq2 {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  font-size: var(--fs-13);
  line-height: 1.6;
}

.s3-acq2 strong {
  font-weight: 500;
  color: var(--foreground);
}

.s3-gfixed {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--cream);
}

.s3-gsrc {
  margin-top: 4px;
}

.s3-srcbtn {
  min-height: var(--touch);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 출처와 변경 기록 시트 */
.s3-srclist {
  margin: 12px 0;
}

.s3-srclist > li + li {
  margin-top: 10px;
}

.s3-srclist__name {
  font-size: var(--fs-14);
  font-weight: 700;
}

.s3-revs {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
  font-size: var(--fs-13);
  line-height: 1.6;
}

.s3-revs__date {
  font-weight: 500;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}

/* ---------- 공통 조각(판정 기준·검수 방법·전체 카테고리·찾기) ---------- */
.s3-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

.s3-sechead .ms-h2:focus {
  outline: none;
}

.s3-block > * + * {
  margin-top: 14px;
}

.s3-note-sm {
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray);
}

.s3-scope {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.5;
  color: var(--foreground);
}

.s3-bullets {
  display: grid;
  gap: 6px;
  font-size: var(--fs-13);
  line-height: 1.7;
}

.s3-bullets li {
  position: relative;
  padding-left: 14px;
}

.s3-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray-line);
}

.s3-bullets--lg {
  max-width: 42.5rem;
  font-size: var(--fs-14);
}

.s3-bullets strong {
  font-weight: 700;
}

.s3-steps {
  display: grid;
  gap: 8px;
  max-width: 42.5rem;
  padding-left: 1.4em;
  list-style: decimal;
  font-size: var(--fs-14);
  line-height: 1.7;
}

/* 쪽 안 이동(버튼) */
.s3-toc {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.s3-toc__title {
  margin-bottom: 8px;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--gray);
}

.s3-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s3-toc__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 12px;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--secondary-foreground);
}

.s3-toc__btn:hover {
  background: var(--pink-soft);
}

/* ---------- 전체 카테고리 ---------- */
.s3-icongrid__wrap {
  margin-top: 12px;
}

.s3-topdiscs > li + li {
  margin-top: 12px;
}

.s3-topdisc__ico {
  margin-right: 8px;
  vertical-align: middle;
}

.s3-topdisc .ms-list {
  border-radius: var(--radius-md);
}

/* ---------- 이름으로 찾기·전체 상품 ---------- */
.s3-search {
  max-width: 40rem;
}

.s3-suggest {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.s3-cmpcats .ms-disc__body {
  padding-top: 4px;
}

.s3-cmpcats__note {
  margin-top: 10px;
}

.s3-catgrid > li {
  display: flex;
  min-width: 0;
}

.s3-catlink {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.35;
}

.s3-catlink:hover {
  border-color: var(--pink-line);
  background: var(--pink-pale);
}

.s3-catlink__name {
  min-width: 0;
}

.s3-allcats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@container frame (min-width: 1024px) {
  .s3-allcats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.s3-allcats__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: var(--fs-14);
  font-weight: 700;
}

.s3-allcats__ico {
  display: inline-flex;
  color: var(--gray-line);
}

.s3-allcats__ico .ms-ico {
  width: 16px;
  height: 16px;
}

/* ---------- 판정 기준(SPEC 5.4) ---------- */
.s3-version {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: var(--fs-13);
}

.s3-version strong {
  font-weight: 500;
  color: var(--foreground);
}

.s3-kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@container frame (min-width: 768px) {
  .s3-kinds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.s3-kind {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--input);
  border-radius: var(--radius-tile);
  background: var(--card);
  font-size: var(--fs-14);
  line-height: 1.65;
}

.s3-kind--mis { border-left-color: var(--mismatch); }
.s3-kind--chk { border-left-color: var(--check); }
.s3-kind--ok { border-left-color: var(--ok); }

.s3-kind__name {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.s3-frdisc .ms-disc__body > * + * {
  margin-top: 10px;
}

/* 품목별 조건: 조건 이름 · 선택지 · 판정 기준 한 줄 · 함께 쓰는 품목 */
.s3-crules {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s3-crule {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s3-crule__name {
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.s3-crule__opts {
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.s3-crule__basis {
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.6;
  color: var(--foreground);
}

.s3-crule__shared {
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray);
}

/* ---------- 검수·출처 방법 ---------- */
.s3-verdictrow .ms-vbadge {
  vertical-align: 1px;
}

.s3-example {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px dashed var(--pink-line);
  border-radius: var(--radius-tile);
  background: var(--card);
  font-size: var(--fs-14);
}

.s3-example__k {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--gray);
}

.s3-example__k:not(:first-child) {
  margin-top: 8px;
}

.s3-srctypes,
.s3-cycle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

@container frame (min-width: 768px) {
  .s3-srctypes,
  .s3-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.s3-srctypes > li,
.s3-cycle > li {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s3-honest {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--secondary);
}

.s3-honest__title {
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  color: var(--secondary-foreground);
}

.s3-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

@container frame (min-width: 1024px) {
  .s3-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.s3-flow > li {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s3-flow__k {
  font-size: var(--fs-14);
  font-weight: 700;
}
/* === end s3 === */