/* 맘스토어 v2 시안 — 화면 전용 규칙 — s9 개발 전용(/dev/logo · /dev/fonts). S6 담당(5차 수정 v3 — SPEC S6-3·S6-4).
   - 로고 마크(.ms-logo--mark)는 /dev/logo 안에서만 그린다. 머리글에는 적용하지 않는다.
   - 글씨체 섹션(.s9-set[data-font])은 tokens.css 의 [data-font=…] 선택자로 --font-sans/--font-num 이 바뀌지만,
     font-family 는 body 에서 한 번 계산돼 상속되므로 여기서 font-family: var(--font-sans) 를 다시 선언한다(SPEC 3.3·S6-4). */

/* ---------- /dev/logo ---------- */
/* 머리글과 같은 바탕(--pink-soft)·높이(64px) 위에 로고를 올려 실제 크기로 본다 */
.s9-stage {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--pink-soft);
}

/* 크기 비교: 두 로고(글자 ≈160px · 마크 ≈195px)는 360 의 카드 안(288px)에 한 줄로 들어가지 않으므로
   같은 왼쪽 기준선에 64px 줄 두 개로 쌓아 크기 차이를 본다(SPEC S6-3 "나란히"의 360 대응) */
.s9-stage--row {
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
}

.s9-stage--row > .ms-logo {
  min-height: 64px;
}

/* 안 1: 하트 마크 + 글자 로고(SPEC S6-3) — 마크 28×28, 모서리 9px, 바탕 --brand-gradient(#ff9dbc → #ef6195), 흰 하트 16px 채움.
   .ms-logo 는 baseline 정렬이라 마크만 align-self: center 로 가운데에 둔다. 마크 색은 장식(로고 예외 — data-logo 안). */
.ms-logo--mark .ms-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 9px;
  background: var(--brand-gradient);
}

.ms-logo--mark .ms-logo__mark .ms-ico {
  width: 16px;
  height: 16px;
  fill: #fff;
  stroke: #fff;
  stroke-width: 1.5;
}

/* ---------- /dev/fonts ---------- */
/* 세트 (가)·(나)·(나')의 --font-sans/--font-num 은 tokens.css 의 [data-font=…] 선택자가 섹션 단위로 바꾼다(통합에서 (가) 블록을 tokens.css 에 더함). */
.s9-set[data-font] {
  font-family: var(--font-sans);
}

.s9-set .t-price,
.s9-set .t-num,
.s9-set .ms-fit__text {
  font-family: var(--font-num);
}

/* 인사말 줄(.t-greet)의 고운돋움은 (나') 섹션에서만 — html 이 (나')여도 (가)·(나) 섹션은 세트 글꼴 500 으로 되돌린다 */
.s9-set[data-font="noto"] .t-greet,
.s9-set[data-font="pretendard"] .t-greet {
  font-family: var(--font-sans);
  font-weight: 500;
}

/* 숫자 폭 맞춤(tnum)은 Pretendard 섹션에서만(DM Sans 에는 tnum 이 없어 (가)에서는 효과가 없다 — base.css 와 같은 규칙을 섹션 단위로) */
.s9-set[data-font="noto"] .t-price,
.s9-set[data-font="noto"] .t-num,
.s9-set[data-font="noto"] .ms-fit__text {
  font-feature-settings: normal;
}

.s9-set__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.s9-sample {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s9-sample .ms-tblock {
  margin-bottom: 4px;
}

.s9-sample__body,
.s9-sample__nums {
  margin: 0;
}

.s9-sample__nums {
  font-variant-numeric: tabular-nums;
}

/* ---------- /dev/components(7차 — SPEC 11.1, app.js 의 공통 부품 모음 화면 배치) ---------- */
/* 표본 사이 간격 */
.s9-gap {
  margin-top: 16px;
}

/* 표본 이름 + 표본(적합도 막대 세 모양 · 가격 두 모양) */
.s9-kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 12px 0 0;
}

.s9-kv dt {
  margin-top: 8px;
  color: var(--muted-foreground);
  font-size: var(--fs-13);
  font-weight: 500;
}

.s9-kv dd {
  margin: 0;
}

/* 상품 그림 14품목: 360 폭(카드 안 ≈ 288px)에 세 칸씩 */
.s9-arts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s9-arts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.s9-arts__name {
  word-break: keep-all;
}

/* 하단 탭 바 표본: 실제 탭 바처럼 바닥에 붙지 않고 카드 안에 그대로(테두리로 구분). 표본의 "지금 탭"은 aria-current="true" 라 같은 모양을 여기서 준다 */
.s9-tabsample {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.s9-tabsample .ms-tabbar {
  display: grid;
}

.s9-tabsample .ms-tab[aria-current="true"] {
  color: var(--primary);
}

.s9-tabsample .ms-tab[aria-current="true"] .ms-tab__label {
  font-weight: 600;
}

.s9-tabsample .ms-tab[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28%;
  right: 28%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--brand);
}

/* 머리글 아이콘 표본(44px 두 개) */
.s9-hicons {
  display: flex;
  gap: 8px;
}