/*
 * 맘스토어 v3 시안 — 화면 전용 규칙 — 상품 상세·비교 탭·판매처 시트(S4)
 * 5차 수정(정체성 재구성 + 추천·가격 도입): 비교표 규칙은 공용 .ms-ct(css/v3-components.css)로 옮겨 갔고(10차: 첫 열 고정·가로 스크롤은 지웠다),
 * 판매처 줄은 공용 .ms-offer 로 바뀌었다. 여기에는 이 화면만의 자리 규칙(.s4-…)만 남긴다.
 * 7차 수정(SPEC 6절): 상세 머리 카드의 두 버튼 · "우리 집 조건" 줄(.ms-fitrow — 추천 시트 U.recSheetBody 도 같은 줄을 그린다) ·
 *   [조건 편집](10차: "고치기" → "편집") · 비교 빈 상태. .ms-fitrow 는 공용 부품 모양이라 통합 때 css/v3-components.css 끝("7차 통합" 절)으로 옮겼다.
 * 10차 수정(2026-10-11): 비교 탭을 한 화면 구성으로 — 화면 자리(.s4-cmp · 조건 줄 · 결론 카드 · 범례 · 1개 상태)는 여기,
 *   비교표(.ms-ct)·판정 원(.ms-vcircle)·판매처 고정 줄(.ms-cmpdock)·판매처 시트(.ms-offer)는 공용 부품이라 css/v3-components.css.
 * 모바일 360 전용. 토큰 밖 색·글자 크기를 쓰지 않는다. 한글 14px 미만은 굵기 400～600(SPEC 0).
 * .s4-srcbtn · .s4-srclist 는 S3 가이드 화면도 같이 쓴다(지우지 않는다).
 */

/* === s4 === 상품 상세 */

/* ----- 제목(브랜드 작게 · 모델명 굵게) ----- */
.s4-h1-brand {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gray, var(--muted-foreground));
}

.s4-h1-model {
  display: block;
}

/* ----- 맨 위 KC·리콜 한 줄(pageHero 의 pre 자리 — 이름보다 위) ----- */
.s4-top {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.s4-warn__sym {
  display: inline-flex;
  align-items: center;
  color: var(--check, var(--tag-soon-foreground));
}

.s4-warn__sym .ms-ico {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* ----- 머리 카드: 가격(확인일) · 적합도 막대 · 추천 배지 · [+ 비교 담기][판매처 보기] ----- */
.s4-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s4-head .ms-price {
  margin: 0;
}

.s4-head .ms-rec {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 같은 폭 두 버튼(추천 목록 한 줄 .ms-prow 와 같은 짝 — 48px) */
.s4-head__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.s4-head__btns--one {
  grid-template-columns: 1fr;
}

.s4-head__btn {
  min-height: 48px;
  padding: 0 12px;
  font-size: var(--fs-15);
  font-weight: 600;
}

.s4-head__btn .ms-ico {
  width: 18px;
  height: 18px;
}

/* [+ 비교 담기]: 흰 바탕 + 연한 회색 테두리 + 잉크 글씨 · 담긴 상태(aria-pressed) = 연분홍 바탕 + 주색 글씨 + 체크 */
.s4-head__cmp {
  border-color: var(--chip-line-strong, #cdbfc7);
  background: var(--card, #ffffff);
  color: var(--ink, var(--foreground));
}

.s4-head__cmp:hover {
  background: var(--muted, #f6eff2);
}

.s4-head__cmp.is-on {
  border-color: var(--pink-line, #f8c7d7);
  background: var(--pink-soft, #fff0f5);
  color: var(--primary, #c72964);   /* 연분홍 4.84 */
}

/* [판매처 보기]: 주색 글씨 · 주색 연한 테두리 */
.s4-head__seller {
  border-color: var(--pink-line, #f8c7d7);
  color: var(--primary, #c72964);
}

/* ----- 우리 집 조건(조건마다 한 줄 — 줄 모양 .ms-fitrow 는 v3-components.css) ----- */
.s4-condcount {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--gray, var(--muted-foreground));
}

.s4-cond .ms-cgroup__disc {
  margin-top: 10px;
}

/* [조건 편집 ›] — 주색 글자 링크(44px) */
.s4-condedit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--touch, 44px);
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--primary, #c72964);
  text-decoration: none;
}

.s4-condedit:hover {
  background: var(--pink-soft, #fff0f5);
}

.s4-condedit__ico {
  width: 18px;
  height: 18px;
}

.s4-cond .ms-scard__foot {
  margin-top: 4px;
}

/* ----- 한눈에 보기(핵심 값 — 칸을 누르면 출처·확인일 시트) ----- */
.s4-kgrid .s4-prime {
  grid-column: 1 / -1;
}

.s4-kbtn {
  display: block;
  width: 100%;
  min-height: var(--touch, 44px);
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: var(--radius-sm);
  font: inherit;
  line-height: 1.45;
  text-align: left;
  color: inherit;
  background: transparent;
}

.s4-kbtn:hover,
.s4-kbtn:active {
  background: var(--soft-hover, var(--pink-pale));
}

/* 표 값 14px/500(브리프 B) — 800 은 가격(20)과 이름(h1)에만. 먼저 볼 값은 한 줄 전체 · 15px/700 */
.s4-kgrid dt {
  font-size: var(--fs-13);
  font-weight: 500;
}

.s4-kgrid dd,
.s4-kgrid dd .s4-kbtn {
  font-size: var(--fs-14);
  font-weight: 500;
}

.s4-kgrid .s4-prime dd .s4-kbtn {
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.4;
}

.s4-basis {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray, var(--muted-foreground));
}

.s4-fixline {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--cream);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.6;
}

.s4-fixline strong {
  font-weight: 600;
  color: var(--ink, var(--foreground));
}

.s4-keynote {
  margin-top: 12px;
}

/* ----- 후기 미리보기(조건별 집계 — 후기 수 없이) ----- */
.s4-agg > li + li {
  padding-top: 10px;
}

.s4-agg__q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.5;
}

.s4-agg__a {
  margin-top: 4px;
  font-size: var(--fs-14);
  line-height: 1.6;
}

.s4-agg__few {
  margin-top: 4px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--gray, var(--muted-foreground));
}

.s4-agg__head {
  font-weight: 700;
}

/* [후기 모두 보기] [후기 쓰기] 같은 폭 */
.s4-rv-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.s4-rv-acts--one {
  grid-template-columns: 1fr;
}

.s4-rv-acts .ms-btn {
  width: 100%;
  padding: 0 12px;
}

/* ----- 판매처 카드(이름만 — 가격·확인일은 시트에) ----- */
.s4-sellerline {
  margin-top: 2px;
  font-size: var(--fs-14);
  line-height: 1.8;
  font-weight: 700;
}

.s4-sellerline__item {
  white-space: nowrap;
}

.s4-sellerline__note {
  font-weight: 500;
  color: var(--gray, var(--muted-foreground));
}

.s4-tx {
  margin-top: 12px;
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray, var(--muted-foreground));
}

.s4-tx .ms-txline {
  margin-bottom: 4px;
}

/* ----- 맨 아래 "정보 확인일 · 정보 출처 보기" ----- */
.s4-srcline {
  margin-top: 20px;
}

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

.s4-srclist {
  margin: 12px 0;
}

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

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

.s4-srclist__doc {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--gray, var(--muted-foreground));
}

/* ----- 값 칸 시트(값 + 출처 · 확인일) ----- */
.s4-valsheet {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s4-valsheet__prod {
  margin: 0;
}

.s4-valsheet__val {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.4;
}

.s4-valsheet__src {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
}

.s4-valsheet__ico {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--info, #0b6a9a);
}

/* ----- 조건 칸 시트(판정 이유) ----- */
.s4-csheet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.s4-csheet > * {
  margin: 0;
}

.s4-csheet .ms-kv {
  width: 100%;
}

.s4-csheet__line {
  font-size: var(--fs-15);
  line-height: 1.6;
}

/* === s4 === 비교 탭 /compare(10차 — 2026-10-11 "상품 3개를 옆으로 밀지 않고 한 화면에서 비교")
 * 위 → 아래: 제목 "비교 N개" → (품목이 섞이면) 품목 칩 → 우리 집 조건 줄(회색 요약 · 주색 "편집 ›") → 결론 카드(연초록) → "다른 점만 보기" 스위치
 * → 비교표(.ms-ct — v3-components.css) → 범례 → 회색 안내 → (고정 안내·판정 안내 작은 글) — 판매처 고정 줄(.ms-cmpdock)은 하단 탭 바로 위.
 * 세로는 페이지 하나로 넘긴다(표와 그 조상에 overflow·touch-action 없음). */
.s4-cmp {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 담은 상품이 없을 때(빈 상태 — 화면 가운데 큰 아이콘 · h1 · 회색 한 줄 · [맘스토어로 가기]) */
.s4-cmpempty {
  padding-top: 24px;
}

/* 제목 "비교 3개"(26px 800 — 오른쪽 버튼 없음) */
.s4-cmp__title {
  margin: 0;
  font-weight: 800;
}

.s4-cmp > .ms-grayline {
  margin: -6px 0 0;
}

/* 품목 칩(품목이 둘 이상 담겼을 때) */
.s4-cmpcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 우리 집 조건 줄(줄 전체가 버튼 — 44px): 왼쪽 회색 요약(한 줄 말줄임) · 오른쪽 주색 "편집 ›" */
.s4-condrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--touch, 44px);
  margin: -8px 0 -6px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
}

.s4-condrow:hover .s4-condrow__edit {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s4-condrow__sum {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--gray, var(--muted-foreground));   /* 흰 5.58 */
}

.s4-condrow__edit {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 1px;
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--primary, #c72964);                /* 흰 5.34 */
}

.s4-condrow__ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

/* 초록 띠 "조건이 바뀌어서 다시 비교했어요" — 조건 줄 바로 아래(줄 간격은 .s4-cmp 의 gap) */
.s4-cmp #cmp-cond-band {
  margin: 0;
}

/* 결론 카드(연초록 틴트 — 잉크 12.42 · 회색 5.04). 답 전·다 맞는 상품 없음은 연한 회색(잉크 12.15 · 회색 4.93) */
.s4-concl {
  padding: 16px 18px;
  border-radius: var(--radius-tile, 1rem);
  background: var(--ok-bg, #e6f7f3);
}

.s4-concl--ask,
.s4-concl--none {
  background: var(--muted, #f6eff2);
}

.s4-concl__title {
  margin: 0;
  font-size: var(--fs-17);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink, var(--foreground));
  word-break: keep-all;
}

.s4-concl__why {
  margin: 6px 0 0;
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.55;
  color: var(--gray, var(--muted-foreground));
  word-break: keep-all;
}

.s4-concl__ask {
  margin-top: 12px;
}

/* "다른 점만 보기" 스위치 줄(U.switchRow — 16px 700) */
.s4-cmp > .ms-switch {
  margin: -4px 0;
  font-size: var(--fs-16);
}

/* 범례: ● 맞음 ● 확인 필요 ● 어긋남(가운데) */
.s4-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: -2px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink, var(--foreground));
}

.s4-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 작은 회색 안내 한 줄 */
.s4-cmphint {
  margin: -6px 0 0;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--gray, var(--muted-foreground));
  word-break: keep-all;
}

/* 고정 안내(법정 표시 문구·설명서 경고) · 판정 안내(fit.disclaimer) · 카시트 장착 안내 — 작은 글 */
.s4-cmpnotes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.s4-cmpnotes > p,
.s4-cmpnotes .ms-cgroup__disc {
  margin: 0;
}

.s4-cmpnote {
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink, var(--foreground));
}

/* 1개 상태: 작은 카드(사진 · 짧은 이름 → 상세 · 적합도 · ✕) + 회색 안내 + [맘스토어에서 담기] */
.s4-one {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.s4-one__card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 8px 12px 12px;
  border: 1px solid var(--chip-line);
  border-radius: var(--radius-tile, 1rem);
}

.s4-one__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: var(--touch, 44px);
  color: var(--ink, var(--foreground));
  text-decoration: none;
}

.s4-one__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.s4-one__brand {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--gray, var(--muted-foreground));
}

.s4-one__name {
  font-size: var(--fs-17);
  font-weight: 700;
  line-height: 1.35;
}

.s4-one__remove {
  margin: -6px -4px 0 0;
}

.s4-one__msg {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--gray, var(--muted-foreground));
}

/* 편집 시트 몸통(맘스토어 조건 칸과 같은 질문 묶음 .ms-cq) */
.s4-condsheet .ms-cbox__sub {
  margin: 0;
}

.s4-condsheet .ms-cq:first-of-type {
  margin-top: 10px;
}

/* === s4 === 바탕 · 카드 테두리(검수 V3 · B14 — 브리프 공통 디자인 "흰 바탕 중심", 참고 그림처럼 흰 면)
 * 상품 상세(.s4-pd2)와 비교 탭(.s4-cmp · 빈 상태 .s4-cmpempty)은 맘스토어 추천 목록·홈과 같은 흰 바탕.
 * 로고 머리글(.ms-header — 기본 연분홍 면)도 같은 흰 면으로. 흰 바탕 위 카드는 그림자 대신 연한 테두리(홈·가이드 카드와 같은 모양) */
.ms-app:has(.s4-pd2),
.ms-app:has(.s4-cmp),
.ms-app:has(.s4-cmpempty),
.ms-app:has(.s4-pd2) .ms-header,
.ms-app:has(.s4-cmp) .ms-header,
.ms-app:has(.s4-cmpempty) .ms-header {
  background: var(--card);
}

.s4-pd2 .ms-scard,
.s4-top .ms-kcbadge {
  border: 1px solid var(--chip-line);
  box-shadow: none;
}

/* === s4 === "맘스토어 추천" 배지(검수 V11 · 원칙 G — 같은 정보는 같은 모양)
 * 추천 목록 줄(.ms-prow__rec)과 같은 모서리 6px 네모 글자 배지(아이콘 없이, 12px/600). 상세 머리 카드 · 비교표 상품 머리(.ms-ct__rec) */
.s4-head .ms-rec__badge {
  height: auto;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.s4-head .ms-rec__ico {
  display: none;
}
/* === end s4 === */