/*
 * 맘스토어 v2 시안 — 공통 부품
 * 모든 배치 분기점은 @container frame 으로 쓴다(@media 로 앱 배치를 바꾸지 않는다).
 *   360px 기준 → (min-width: 768px) 태블릿 → (min-width: 1024px) 데스크톱(가로 머리글·옆 칸)
 * 클래스 이름은 ms- 로 시작한다. 화면 전용 규칙은 css/screens/sN.css(화면마다 한 파일)에만 쓴다. 새 공용 부품(v3)은 css/v3-components.css.
 */

/* ---------- 시안 표시(모든 화면) ---------- */
.ms-sian {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  padding: 4px 12px;
  background: var(--sian-bg);
  border-bottom: 1px dashed var(--sian-line);
  font-size: var(--fs-11);
  line-height: 1.5;
  color: var(--sian-fg);
}

.ms-sian__pill {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--sian-pill-line);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-weight: 800;
  color: var(--sian-pill-fg);
}

/* 띠가 화면 위로 지나간 뒤에도 보이는 작은 알약(틀 위쪽 가운데, 누르기를 막지 않음) */
.ms-sian-float {
  position: fixed;
  top: calc(var(--tb-h) + 2px);
  left: var(--frame-left);
  width: var(--frame-w);
  z-index: 145;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.ms-sian-float[hidden] {
  display: none;
}

.ms-sian-float .ms-sian__pill {
  font-size: var(--fs-11);
  line-height: 1.5;
  box-shadow: var(--elevation-soft);
}

/* ---------- 앱 틀 ---------- */
.ms-app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 736px;
  background: var(--background);
}

.ms-main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
}

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

.ms-skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ms-skip:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-cta);
  background: var(--card);
  font-weight: 700;
  box-shadow: var(--elevation-card);
}

.ms-container {
  width: 100%;
  max-width: var(--container-page);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.ms-container--reading {
  max-width: var(--container-reading);
}

.ms-container--narrow {
  max-width: var(--container-narrow);
}

@container frame (min-width: 768px) {
  .ms-container:not(.ms-container--narrow) {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@container frame (min-width: 1024px) {
  .ms-container:not(.ms-container--narrow) {
    padding-left: 28px;
    padding-right: 28px;
  }
}

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

@container frame (min-width: 1024px) {
  .ms-page {
    padding-top: 28px;
    padding-bottom: 56px;
  }
}

/* 보이기·숨기기(틀 폭 기준) */
.ms-desk-only,
.ms-desk-flex,
.ms-desk-inline {
  display: none !important;
}

@container frame (min-width: 1024px) {
  .ms-desk-only { display: block !important; }
  .ms-desk-flex { display: flex !important; }
  .ms-desk-inline { display: inline-flex !important; }
  .ms-mob-only { display: none !important; }
}

/* ---------- 머리글 ---------- */
.ms-header {
  position: sticky;
  top: var(--tb-h);
  z-index: 30;
  background: rgb(255 250 250 / 0.94);
  border-bottom: 1px solid rgb(248 199 215 / 0.6);
  backdrop-filter: blur(10px);
}

.ms-header__in {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
}

@container frame (min-width: 1024px) {
  .ms-header__in {
    height: 74px;
    gap: 24px;
  }
}

/* 3차 수정 추가 ②: 예전 테스트 목업의 글자 로고 그대로 — momstore(Nunito 800 24px, 자간 -1px) + 작은 맘스토어(13px).
   로고 색(--logo-en·--logo-ko)은 로고에만 쓴다. 작은 "맘스토어"는 고운돋움으로 고정(예전 목업은 기기 기본 고딕이라 기기마다 달랐음) */
.ms-logo {
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  margin-left: -4px;
  padding: 0 4px;
  border-radius: var(--radius-cta);
  font-family: var(--font-logo);
  font-size: 24px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -1px;
  white-space: nowrap;
  color: var(--logo-en);
}

.ms-logo__ko {
  margin-left: 4px;
  font-family: var(--font-sans);   /* 한글은 모두 고운돋움 — 기기 기본 고딕(기기마다 다름)으로 그려지지 않게 고정 */
  font-size: 13px;
  letter-spacing: 0;
  color: var(--logo-ko);
}

.ms-nav {
  align-items: center;
  gap: 4px;
  flex: 1;
}

.ms-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  color: var(--muted-foreground);
  white-space: nowrap;
}

.ms-nav__link:hover {
  color: var(--primary);
}

.ms-nav__link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}

.ms-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.ms-header__aside {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ms-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-cta);
  background: var(--card);
  font-size: var(--fs-14);
  color: var(--muted-foreground);
  white-space: nowrap;
}

.ms-hbtn:hover {
  border-color: var(--pink-line);
  background: var(--pink-soft);
}

.ms-hbtn__count {
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--primary);
}

.ms-menuwrap {
  position: relative;
}

.ms-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
  box-shadow: var(--elevation-card);
}

.ms-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: var(--fs-14);
  text-align: left;
}

.ms-menu__item:hover {
  background: var(--pink-soft);
}

/* ---------- 하단 고정(BottomDock: 아래부터 하단 탭 → 행동 줄) ---------- */
.ms-dock {
  position: sticky;
  bottom: 0;
  z-index: 30;
}

.ms-tabbar {
  display: grid;
  grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr));
  background: rgb(255 255 255 / 0.97);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

@container frame (min-width: 1024px) {
  .ms-tabbar {
    display: none;
  }
}

.ms-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-tab .ms-ico {
  width: 22px;
  height: 22px;
}

.ms-tab[aria-current="page"] {
  color: var(--primary);
  font-weight: 800;
}

/* 선택된 탭은 주색 아이콘·글씨(+ 굵기)로만 — 위쪽 분홍 막대는 참고 그림에 없어 뺐다 */

.ms-actionbar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--card);
  border-top: 1px solid var(--border);
}

/* ---------- 바닥글 ---------- */
.ms-footer {
  border-top: 1px solid var(--border);
  background: var(--card);
}

.ms-footer__in {
  padding-top: 24px;
  padding-bottom: 28px;
  font-size: var(--fs-12);
  line-height: 1.7;
  color: var(--muted-foreground);
}

.ms-footer__in > * + * {
  margin-top: 6px;
}

.ms-footer__brand {
  font-family: var(--font-logo);
  font-weight: 700;
  color: var(--foreground);
}

.ms-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.ms-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ms-footer__nav a.ms-footer__privacy {
  font-weight: 800;
  color: var(--primary);
}

.ms-footer details summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--foreground);
  cursor: pointer;
}

/* ---------- 화면 머리(PageHero) ---------- */
.ms-hero {
  background: var(--hero-gradient);
}

.ms-hero__in {
  padding-top: 28px;
  padding-bottom: 24px;
}

@container frame (min-width: 768px) {
  .ms-hero__in {
    padding-top: 44px;
    padding-bottom: 32px;
  }
}

.ms-hero--compact .ms-hero__in {
  padding-top: 16px;
  padding-bottom: 18px;
}

@container frame (min-width: 768px) {
  .ms-hero--compact .ms-hero__in {
    padding-top: 24px;
    padding-bottom: 22px;
  }
}

.ms-hero__back {
  margin: -10px 0 2px;
}

.ms-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--primary);
}

.ms-hero__title {
  margin-top: 12px;
  font-size: var(--fs-26);   /* v3: 화면 제목 26px/800 -0.03em(SPEC 3.1 — 예전 29px) */
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ms-hero__title:first-child {
  margin-top: 0;
}

@container frame (min-width: 768px) {
  .ms-hero__title {
    font-size: var(--fs-35);
  }
}

.ms-hero--compact .ms-hero__title {
  font-size: var(--fs-23);
}

@container frame (min-width: 768px) {
  .ms-hero--compact .ms-hero__title {
    font-size: var(--fs-29);
  }
}

.ms-hero__lead {
  margin-top: 8px;
  max-width: 38rem;
  font-size: var(--fs-15);
  line-height: 1.7;
  color: var(--muted-foreground);
}

.ms-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ms-hero__extra {
  margin-top: 16px;
}

@container frame (min-width: 1024px) {
  .ms-hero--split .ms-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 32px;
    align-items: center;
  }
}

/* ---------- 제목·문단 ---------- */
.ms-h2 {
  font-size: var(--fs-17);   /* v3: 카드 제목 17px/700(SPEC 3.1 — 예전 18px/800) */
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ms-h3 {
  font-size: var(--fs-15);   /* v3: 15px/700(SPEC 3.1 — 예전 16px/800) */
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ms-p {
  font-size: var(--fs-15);
  line-height: 1.75;
  max-width: 42.5rem; /* 읽기 줄 길이 약 680px(VR24) */
}

.ms-muted { color: var(--muted-foreground); }
.ms-primary-text { color: var(--primary); }
.ms-small { font-size: var(--fs-13); }
.ms-xsmall { font-size: var(--fs-12); }
.ms-bold { font-weight: 800; }
.ms-center { text-align: center; }
.ms-nowrap { white-space: nowrap; }

.ms-hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* 쌓기·줄 */
.ms-stack > * + * { margin-top: 16px; }
.ms-stack-sm > * + * { margin-top: 8px; }
.ms-stack-lg > * + * { margin-top: 24px; }
.ms-stack-xl > * + * { margin-top: 32px; }

.ms-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ms-row--between {
  justify-content: space-between;
}

.ms-row--top {
  align-items: flex-start;
}

.ms-row--nowrap {
  flex-wrap: nowrap;
}

.ms-grow {
  flex: 1;
  min-width: 0;
}

/* 격자: 1 → 2 → 3열 */
.ms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

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

@container frame (min-width: 1024px) {
  .ms-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ms-grid {
    gap: 16px;
  }
}

/* 조건별 보기 품목 목록(CompareCategoryList): 360～767px 2열 · 768px 이상 4열, 칸 44px 이상 */
.ms-grid--cats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

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

/* 본문 + 옆 칸 */
.ms-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@container frame (min-width: 1024px) {
  .ms-two {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
  }
  .ms-two--left {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .ms-two__sticky {
    position: sticky;
    top: calc(var(--tb-h) + 90px);
  }
  .ms-two.ms-mylayout {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 28px;
  }
}

/* 마이 메뉴(U.myMenu — 마이 화면 묶음이 함께 씀, 8장 4.15·6.2) */
/* 1024px 이상은 왼쪽 마이 메뉴가 있어 머리의 "마이" 돌아가기를 숨긴다 */
@container frame (min-width: 1024px) {
  .ms-myhero .ms-hero__back {
    display: none;
  }
}

.ms-mylayout__main {
  min-width: 0;
}

.ms-mymenu {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.ms-mymenu__title {
  padding: 4px 10px 8px;
  font-size: var(--fs-13);
  font-weight: 800;
  color: var(--muted-foreground);
}

.ms-mymenu__list > li + li {
  margin-top: 2px;
}

.ms-mymenu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--foreground);
}

.ms-mymenu__link:hover {
  background: var(--pink-pale);
}

.ms-mymenu__link[aria-current="page"] {
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--primary);
}

.ms-mymenu__emoji {
  flex: none;
  width: 24px;
  font-size: var(--fs-18);
  text-align: center;
}

.ms-mymenu__tag {
  flex: none;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

/* ---------- 패널·카드 ---------- */
.ms-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  padding: 20px;
}

@container frame (min-width: 768px) {
  .ms-panel {
    padding: 22px;
  }
}

.ms-panel--soft {
  background: var(--pink-pale);
  border-color: var(--pink-soft);
}

.ms-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ms-fcard {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  padding: 20px;
  transition: box-shadow var(--motion-base);
}

a.ms-fcard:hover {
  box-shadow: var(--elevation-card);
}

.ms-fcard__title {
  margin-top: 14px;
  font-size: var(--fs-16);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ms-fcard__text {
  margin-top: 6px;
  font-size: var(--fs-13);
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* 이모지 칸(장식, 낭독기에서 숨김) */
.ms-tile {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

.ms-tile--sm { width: 36px; height: 36px; border-radius: 11px; font-size: 20px; }
.ms-tile--md { width: 48px; height: 48px; border-radius: var(--radius-tile); font-size: 24px; }
.ms-tile--lg { width: 64px; height: 64px; border-radius: 20px; font-size: 32px; }
.ms-tile--thumb { width: 100%; height: 112px; border-radius: var(--radius-tile); font-size: 48px; }

@container frame (min-width: 768px) {
  .ms-tile--thumb { height: 144px; font-size: 60px; }
}

.ms-tile--pink { background: var(--pink-soft); }
.ms-tile--lav { background: var(--lav); }
.ms-tile--mint { background: var(--mint); }
.ms-tile--peach { background: var(--peach); }
.ms-tile--cream { background: var(--cream); }
.ms-tile--thumb-bg { background: var(--thumb-gradient); }

/* 우선 항목 한 줄(PriorityItem — 줄 전체가 링크, 상태 버튼 없음) */
.ms-pitem {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

a.ms-pitem:hover {
  border-color: var(--pink-line);
  background: var(--pink-pale);
}

.ms-pitem__title {
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.4;
}

.ms-pitem__desc {
  margin-top: 2px;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.ms-pitem__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* ---------- 버튼·링크 ---------- */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch-main);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-cta);
  font-size: var(--fs-15);   /* v3: 버튼 15px/700(SPEC 3.1 — 예전 14px/800), 작은 버튼 14px/700 */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--motion-fast);
}

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

.ms-btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--elevation-cta);
}

.ms-btn--primary:hover {
  background: var(--primary-hover);
}

.ms-btn--outline {
  border-color: var(--pink-line);
  background: var(--card);
  color: var(--secondary-foreground);
}

.ms-btn--outline:hover {
  background: var(--pink-soft);
}

.ms-btn--soft {
  background: var(--tag-now);
  color: var(--tag-now-foreground);
}

.ms-btn--soft:hover {
  background: var(--soft-hover);
}

.ms-btn--ghost {
  background: transparent;
  color: var(--muted-foreground);
}

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

.ms-btn--neutral {
  border-color: var(--input);
  background: var(--card);
  color: var(--foreground);
}

.ms-btn--danger {
  border-color: var(--danger-border);
  background: var(--card);
  color: var(--destructive);
}

.ms-btn--sm {
  min-height: var(--touch);
  padding: 0 14px;
  font-size: var(--fs-14);
}

/* 관리자 표 안 보조 버튼만 32px(VR32, AG-07). data-small-ok 를 함께 단다 */
.ms-btn--xs {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: var(--fs-12);
}

.ms-btn--block {
  width: 100%;
  white-space: normal;
}

.ms-btn--wrap {
  white-space: normal;
}

.ms-btn:disabled,
.ms-btn[aria-disabled="true"] {
  opacity: 0.55;
  box-shadow: none;
}

.ms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-actions--stack {
  flex-direction: column;
}

.ms-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--touch);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 800;
  color: var(--primary);
  text-underline-offset: 4px;
}

.ms-link:hover {
  text-decoration: underline;
}

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

.ms-link--muted {
  font-weight: 500;
  color: var(--muted-foreground);
}

/* 문단 안 글자 링크(44px 예외 — data-inline-link 를 단다) */
.ms-ilink {
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 태그·배지·칩 ---------- */
.ms-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-tag);   /* v3: 태그 12px/600(SPEC 3.1 — 14px 미만 규칙 안) */
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.ms-tag--now { background: var(--tag-now); color: var(--tag-now-foreground); }
.ms-tag--soon { background: var(--tag-soon); color: var(--tag-soon-foreground); }
.ms-tag--later { background: var(--tag-later); color: var(--tag-later-foreground); }
.ms-tag--done { background: var(--tag-done); color: var(--tag-done-foreground); }
.ms-tag--past { background: var(--tag-past); color: var(--tag-past-foreground); }
.ms-tag--skip { background: var(--tag-later); color: var(--tag-later-foreground); }
/* 필요도: 테두리형(시기 태그와 구분) */
.ms-tag--need { background: var(--card); border-color: var(--pink-line); color: var(--secondary-foreground); }
.ms-tag--nice { background: var(--card); border-color: var(--tag-nice-border); color: var(--tag-past-foreground); }
.ms-tag--optional { background: var(--card); border-color: var(--tag-optional-border); color: var(--muted-foreground); }
/* 대상: 엄마 / 아기 */
.ms-tag--mother { background: var(--peach); color: var(--foreground); }
.ms-tag--baby { background: var(--mint); color: var(--foreground); }
/* 기타 */
.ms-tag--info { background: var(--muted); color: var(--foreground); }
.ms-tag--ad { background: var(--secondary); color: var(--secondary-foreground); }
/* 10차: 「제휴」는 작은 회색 테두리(판매처 시트 · 상세 판매처 카드 — 같은 정보는 같은 모양) — 회색 글자 흰 5.58 · 테두리 --gray-line 3.84(비글자) */
.ms-tag--aff { background: var(--card); border-color: var(--gray-line); color: var(--gray); }
.ms-tag--review { background: var(--cream); border-color: var(--tag-review-border); color: var(--foreground); font-size: var(--fs-13); }

/* 태그를 누르면 뜻 풀이가 열리는 경우: 보이는 알약은 작게, 누르는 영역은 44px */
.ms-tagbtn {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
}

.ms-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.ms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch);
  padding: 0 14px;
  border: 1px solid var(--input);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--foreground);
}

.ms-chip[aria-pressed="true"],
.ms-chip[aria-current="page"],
.ms-chip[aria-checked="true"] {
  border-color: var(--primary);
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.ms-chip[aria-pressed="true"]::before,
.ms-chip[aria-current="page"]::before,
.ms-chip[aria-checked="true"]::before {
  content: "✓";
  font-weight: 800;
}

.ms-infochip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius-pill);
  background: var(--pink-soft);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--tag-now-foreground);
}

/* v3 판정 3색(SPEC 2.4): 맞음 청록 --ok · 확인 필요 호박 --check · 어긋남 빨강 --mismatch(예전 회색). 칩 안 이름은 잉크, 결과 글자는 판정색 */

/* ---------- 고지·안내 ---------- */
.ms-note {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--pink-soft);
  border-radius: 13px;
  background: var(--pink-pale);
  font-size: var(--fs-13);
  line-height: 1.7;
  color: var(--muted-foreground);
}

.ms-note__emoji {
  flex-shrink: 0;
}

.ms-note__body {
  min-width: 0;
}

.ms-note__body > * + * {
  margin-top: 4px;
}

.ms-note strong {
  color: var(--foreground);
}

.ms-note--plain {
  border-color: var(--border);
  background: var(--card);
}

.ms-note--cream {
  border-color: var(--note-cream-border);
  background: var(--cream);
  color: var(--foreground);
}

.ms-note--sensitive {
  border-color: var(--note-sensitive-border);
  background: var(--lav);
  color: var(--foreground);
}

.ms-note--sian {
  border: 1px dashed var(--sian-note-line);
  background: var(--sian-note-bg);
  color: var(--sian-note-fg);
}

/* 쿠팡 고지(본문보다 크거나 다른 색 — 판매처 목록 창 맨 위) */
.ms-coupang {
  padding: 12px 14px;
  border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: var(--secondary);
  font-size: var(--fs-14);
  line-height: 1.6;
  font-weight: 700;
  color: var(--secondary-foreground);
}

/* 제휴 일반 고지(부품 목록에만 — 3차 수정 작업 1부터 이용자 화면에서 지움) */
.ms-affnote {
  padding: 10px 12px;
  border: 1px solid var(--pink-line);
  border-radius: 12px;
  background: var(--card);
  font-size: var(--fs-13);
  line-height: 1.6;
  font-weight: 600;
  color: var(--secondary-foreground);
}

/* 광고 영역(별도 자리 + 「광고」 표시). 첫 출시에는 0건이라 그리지 않는다 → 시안에서는 "향후(M2) 예시" 로만 */
.ms-ad {
  padding: 16px;
  border: 2px dashed var(--input);
  border-radius: var(--radius-card);
  background: var(--card);
}

.ms-ad__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 12px;
}

.ms-ad__label {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--foreground);
  font-size: var(--fs-13);
  font-weight: 800;
  color: var(--on-dark);
}

.ms-ad__note {
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

/* ---------- 상품 정보 ---------- */
.ms-source {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--muted-foreground);
}

.ms-attr--unknown {
  color: var(--muted-foreground);
}

.ms-kc {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: var(--fs-13);
  line-height: 1.6;
}

.ms-kc__label {
  font-weight: 800;
}

.ms-kc__item {
  color: var(--muted-foreground);
}

.ms-kc__value {
  font-weight: 800;
  color: var(--foreground);
}

.ms-kc__note {
  color: var(--foreground);
}

.ms-txline {
  font-size: var(--fs-13);
  line-height: 1.7;
}

.ms-txline dt {
  font-weight: 800;
  display: inline;
}

.ms-txline dd {
  display: inline;
  margin: 0;
  color: var(--muted-foreground);
}

/* ---------- 진행 링·미니 타임라인·통계 ---------- */
.ms-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ms-ring__hole {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--card);
}

.ms-ring__text {
  position: relative;
  font-size: var(--fs-12);
  line-height: 1.3;
  text-align: center;
}

.ms-ring__num {
  display: block;
  font-size: var(--fs-18);
  font-weight: 800;
  color: var(--primary);
}

.ms-tl {
  position: relative;
  padding-left: 22px;
}

.ms-tl::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 6px;
  width: 2px;
  background: rgb(248 199 215 / 0.7);
}

.ms-tl__step {
  position: relative;
  padding: 0 0 16px 18px;
}

.ms-tl__step:last-child {
  padding-bottom: 0;
}

.ms-tl__dot {
  position: absolute;
  top: 4px;
  left: -22px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 3px solid var(--pink-line);
  background: var(--card);
}

.ms-tl__step[aria-current="step"] .ms-tl__dot {
  border-color: var(--pink-soft);
  background: var(--brand);
}

.ms-tl__title {
  font-size: var(--fs-13);
  font-weight: 700;
}

.ms-tl__detail {
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

.ms-stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.ms-stat__label {
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

.ms-stat__value {
  margin-top: 2px;
  font-size: var(--fs-24);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ms-stat__sub {
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

.ms-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border);
  overflow: hidden;
}

.ms-progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--fit-fill);   /* v3: 막대 채움은 맞음 색(SPEC 2.6 — 예전 --brand 는 장식 전용) */
}

/* ---------- 빈 상태·상태 화면 ---------- */
.ms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
  border: 1px dashed var(--pink-line);
  border-radius: var(--radius-card);
  background: var(--card);
  text-align: center;
}

.ms-empty__title {
  margin-top: 12px;
  font-size: var(--fs-16);
  font-weight: 800;
}

.ms-empty__text {
  margin-top: 6px;
  max-width: 28rem;
  font-size: var(--fs-13);
  line-height: 1.7;
  color: var(--muted-foreground);
}

.ms-empty .ms-actions {
  justify-content: center;
  margin-top: 16px;
}

.ms-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 0 56px;
  text-align: center;
}

.ms-status__title {
  font-size: var(--fs-23);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ms-status__text {
  max-width: 26rem;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* ---------- 양식 ---------- */
.ms-form > * + * {
  margin-top: 18px;
}

.ms-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ms-label {
  font-size: var(--fs-14);
  font-weight: 700;
}

.ms-req {
  margin-left: 4px;
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--primary);
}

.ms-opt {
  margin-left: 4px;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-input,
.ms-select,
.ms-textarea {
  width: 100%;
  min-height: var(--touch-main);
  padding: 0 14px;
  border: 1px solid var(--input);
  border-radius: 12px;
  background: var(--card);
  font-size: var(--fs-16);
  color: var(--foreground);
}

.ms-textarea {
  min-height: 120px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}

.ms-input::placeholder,
.ms-textarea::placeholder {
  color: var(--placeholder);
}

.ms-input[aria-invalid="true"],
.ms-select[aria-invalid="true"],
.ms-textarea[aria-invalid="true"] {
  border-color: var(--destructive);
}

.ms-inputwrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-inputwrap .ms-input {
  flex: 1;
  min-width: 0;
}

.ms-suffix {
  font-size: var(--fs-14);
  color: var(--muted-foreground);
  white-space: nowrap;
}

.ms-help {
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.ms-error {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--destructive);
}

.ms-fieldset {
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: 0;
}

.ms-fieldset > legend {
  padding: 0;
  margin-bottom: 8px;
}

.ms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--touch);
  padding: 10px 0;
  font-size: var(--fs-14);
  line-height: 1.55;
  cursor: pointer;
}

.ms-check input,
.ms-rcard input,
.ms-radio input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--primary);
}

.ms-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  font-size: var(--fs-14);
  cursor: pointer;
}

.ms-radios--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.ms-rcard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--touch);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
  cursor: pointer;
}

.ms-rcard:has(input:checked) {
  border-color: var(--primary);
  background: var(--pink-pale);
}

/* 숨긴 입력을 대신하는 카드에도 불투명 윤곽선(VR13) */
.ms-rcard:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ms-rcard__title {
  font-weight: 800;
}

.ms-rcard__desc {
  margin-top: 2px;
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

/* 동의 항목(ConsentItem: 체크 + 제목 + 오른쪽 "자세히" 44px) */
.ms-consent {
  border-bottom: 1px solid var(--border);
}

.ms-consent__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ms-consent__row .ms-check {
  flex: 1;
  min-width: 0;
}

.ms-consent__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ms-consent__summary {
  margin: -6px 0 10px 32px;
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

.ms-consent__detail {
  margin: 0 0 12px 32px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.7;
}

.ms-consent__detail dt {
  font-weight: 800;
}

.ms-consent__detail dd {
  margin: 0 0 6px;
}

.ms-reqtag {
  display: inline-block;
  margin-right: 4px;
  font-weight: 800;
  color: var(--primary);
}

.ms-reqtag--opt {
  color: var(--muted-foreground);
}

/* 세그먼트(필터·보기 전환) */
.ms-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-cta);
  background: var(--muted);
}

.ms-seg__item {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--touch);
  padding: 0 10px;
  border-radius: 10px;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.ms-seg__item[aria-current="page"],
.ms-seg__item[aria-pressed="true"],
.ms-seg__item[aria-checked="true"] {
  background: var(--card);
  color: var(--secondary-foreground);
  box-shadow: var(--elevation-soft);
}

.ms-seg__item[aria-current="page"]::before,
.ms-seg__item[aria-pressed="true"]::before,
.ms-seg__item[aria-checked="true"]::before {
  content: "✓";
}

/* 스위치 줄(SwitchRow: 줄 전체가 role=switch 버튼) */
.ms-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--touch-main);
  padding: 4px 0;
  font-size: var(--fs-14);
  font-weight: 700;
  text-align: left;
}

.ms-switch__track {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border: 2px solid var(--input);
  border-radius: var(--radius-pill);
  background: var(--card);
  transition: background-color var(--motion-fast);
}

.ms-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--input);
  transition: transform var(--motion-fast);
}

.ms-switch[aria-checked="true"] .ms-switch__track {
  border-color: var(--primary);
  background: var(--primary);
}

.ms-switch[aria-checked="true"] .ms-switch__track::after {
  background: var(--card);
  transform: translateX(22px);
}

.ms-switch__state {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

/* 단계 표시(Stepper: "n / 5 단계" 글자) */
.ms-stepper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-stepper__text {
  font-size: var(--fs-13);
  font-weight: 800;
  color: var(--muted-foreground);
}

/* ---------- 목록 줄 ---------- */
.ms-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  overflow: hidden;
}

.ms-lrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  text-align: left;
}

.ms-lrow + .ms-lrow,
.ms-list > li + li {
  border-top: 1px solid var(--border);
}

a.ms-lrow:hover,
button.ms-lrow:hover {
  background: var(--pink-pale);
}

.ms-lrow__title {
  font-size: var(--fs-15);
  font-weight: 700;
}

.ms-lrow__desc {
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

.ms-lrow__aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--muted-foreground);
  font-size: var(--fs-13);
}

/* 접기(Disclosure: details/summary, 44px, 접혀도 제목·개수 보임) */
.ms-disc {
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.ms-disc > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-main);
  padding: 8px 16px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.ms-disc > summary::-webkit-details-marker {
  display: none;
}

.ms-disc > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.ms-disc[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.ms-disc__meta {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted-foreground);
}

.ms-disc__body {
  padding: 0 16px 16px;
}

/* ---------- 품목별 고정 안내 한 줄(U.fitDisclaimer — .ms-cgroup__disc) ---------- */
.ms-cgroup__disc {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--muted);
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--foreground);
}

/* ---------- 표 ---------- */
.ms-tscroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.ms-table th,
.ms-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-14);
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}

.ms-table tr:last-child th,
.ms-table tr:last-child td {
  border-bottom: 0;
}

.ms-table th {
  font-weight: 700;
}

.ms-table thead th {
  background: var(--pink-pale);
  font-size: var(--fs-13);
  white-space: nowrap;
}

.ms-table--kv th {
  width: 38%;
  background: var(--pink-pale);
}

.ms-table--compact th,
.ms-table--compact td {
  padding: 8px 10px;
  font-size: var(--fs-13);
}

.ms-kv {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 8px 12px;
  font-size: var(--fs-14);
}

.ms-kv dt {
  color: var(--muted-foreground);
}

.ms-kv dd {
  margin: 0;
}

/* ---------- 시트·대화상자·토스트 ---------- */
.ms-ovl {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--frame-left);
  width: var(--frame-w);
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(52 42 52 / 0.45);
}

.ms-sheet {
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 4px 16px 24px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--card);
  box-shadow: var(--elevation-card);
}

@container frame (min-width: 1024px) {
  .ms-ovl {
    align-items: center;
  }
  .ms-sheet {
    width: 560px;
    max-height: 80vh;
    border-radius: var(--radius-card);
    padding: 8px 24px 28px;
  }
}

.ms-sheet__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  background: var(--card);
}

.ms-sheet__title {
  flex: 1;
  font-size: var(--fs-17);   /* v3: 카드 제목 17px/700(SPEC 3.1) */
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ms-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--muted-foreground);
}

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

.ms-sheet__foot {
  margin-top: 20px;
}

.ms-toast-root {
  position: fixed;
  left: var(--frame-left);
  width: var(--frame-w);
  bottom: 96px;
  z-index: 160;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.ms-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 8px 8px 8px 16px;
  border-radius: 14px;
  background: var(--toast-bg);   /* v3: 토스트 바탕 #382c34(흰 글자 13.31 — SPEC 2.1) */
  color: var(--on-dark);
  font-size: var(--fs-14);
  box-shadow: var(--elevation-card);
  pointer-events: auto;
}

.ms-toast__msg {
  padding: 4px 0;
}

.ms-toast__btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;           /* v3 통합: "되돌리기"가 두 줄로 꺾이지 않게 */
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-weight: 800;
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 아이콘 ---------- */
.ms-ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 앱(향후) 틀: 데스크톱에서도 휴대폰 화면 ---------- */
.ms-phone-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ms-phone-note {
  display: none;
}

.ms-phone {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 736px;
  background: var(--background);
  container-type: inline-size;
  container-name: frame;
}

@container frame (min-width: 768px) {
  .ms-phone-stage {
    padding: 28px 16px 48px;
    background: var(--phone-stage);
    min-height: 736px;
  }
  .ms-phone-note {
    display: block;
    margin-bottom: 14px;
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--foreground);
  }
  .ms-phone {
    width: 360px;
    min-height: 720px;
    border-radius: 32px;
    outline: 8px solid var(--phone-bezel);
    box-shadow: 0 20px 50px rgb(40 20 35 / 0.25);
    overflow: clip;
  }
}

.ms-appbar {
  position: sticky;
  top: var(--tb-h);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 8px 0 16px;
  background: #fffafa;   /* 3차 수정 추가 ③: 불투명 — 로고 작은 "맘스토어" 3.30:1 고정(아래로 지나가는 내용과 상관없이) */
  border-bottom: 1px solid var(--border);
}

.ms-appbar__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-16);
  font-weight: 800;
}

.ms-appbar__back {
  margin-left: -8px;
}

/* 3차 수정 추가 ②: 제목 없는 앱 첫 화면 윗줄의 글자 로고 — 오른쪽 단추는 끝으로 */
.ms-appbar__logo {
  margin-right: auto;
}

/* ---------- 관리자 웹 틀 ---------- */
.ms-admin {
  display: flex;
  flex-direction: column;
  min-height: 736px;
  background: var(--app-bg);
}

.ms-admin__bar {
  position: sticky;
  top: var(--tb-h);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 56px;
  padding: 6px 12px 6px 16px;
  background: var(--foreground);
  color: var(--on-dark);
}

/* 관리자 윗줄: 같은 글자 로고 + "관리자"(어두운 바탕 위).
   360px 에서 [메뉴][로고][로그아웃]이 한 줄에 들어가도록 작은 "맘스토어"는 숨기고 momstore 관리자로만 보인다(접근 이름 "맘스토어 관리자") */
.ms-admin__brand {
  min-height: 44px;
}

.ms-admin__brand .ms-logo__ko {
  display: none;
}

.ms-admin__brand .ms-logo__extra {
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--on-dark);
}

.ms-admin__who {
  order: 5;
  flex: 1 0 100%;
  padding-bottom: 4px;
  font-size: var(--fs-12);
  color: var(--on-dark-muted);
}

.ms-admin__logout {
  margin-left: auto;
}

@container frame (min-width: 1024px) {
  .ms-admin__who {
    order: 0;
    flex: 1 1 auto;
    padding-bottom: 0;
  }
}

.ms-admin__barbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--admin-bar-line);
  border-radius: 10px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--on-dark);
}

.ms-admin__barbtn:hover {
  background: var(--admin-bar-hover);
}

.ms-admin__body {
  display: flex;
  flex: 1 0 auto;
}

.ms-admin__side {
  display: none;
}

@container frame (min-width: 1024px) {
  .ms-admin__side {
    display: block;
    flex: none;
    width: 236px;
    padding: 16px 12px;
    border-right: 1px solid var(--border);
    background: var(--card);
  }
  .ms-admin__menubtn,
  .ms-admin__mnav {
    display: none !important;
  }
}

.ms-admin__mnav {
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.ms-admin__navgroup {
  margin: 12px 0 4px;
  padding: 0 12px;
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--muted-foreground);
}

.ms-admin__navgroup:first-child {
  margin-top: 0;
}

.ms-admin__navlink {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: var(--fs-14);
  color: var(--foreground);
}

.ms-admin__navlink:hover {
  background: var(--pink-pale);
}

.ms-admin__navlink[aria-current="page"] {
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-weight: 800;
}

.ms-admin__navcount {
  margin-left: auto;
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--primary);
}

.ms-admin__omitted {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--muted);
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.ms-admin__main {
  flex: 1;
  min-width: 0;
  padding: 16px;
}

@container frame (min-width: 1024px) {
  .ms-admin__main {
    padding: 24px 28px 48px;
  }
}

.ms-admin__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.ms-admin__title {
  font-size: var(--fs-23);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ms-admin__lead {
  margin-top: 4px;
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

/* ---------- 비교 담기 상태 등 작은 표시 ---------- */
.ms-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.ms-sep::before {
  content: "·";
  margin: 0 4px;
  color: var(--muted-foreground);
}

.ms-placeholder {
  border: 2px dashed var(--pink-line);
  border-radius: var(--radius-card);
  padding: 28px 20px;
  text-align: center;
  background: var(--card);
}

/* =====================================================================
   2차 수정(2026-10-07) — 단순하게(원칙 A～I)
   - 연한 단색 바탕(--canvas) 위에 흰 둥근 카드. 테두리·구분선 대신 여백으로 나눈다(원칙 B)
   - 강조색(--primary)은 핵심 버튼과 상태 표시에만(원칙 H)
   - 같은 종류의 정보는 같은 부품: 카드 머리(ms-scard) · 체크 줄(ms-crow) · 상품 줄(ms-pline)(원칙 G)
   ===================================================================== */
.ms-app--web,
.ms-app--app {
  background: var(--canvas);
}

.ms-header {
  /* 3차 수정 추가 ③: 바탕을 불투명하게 — 진한 버튼·글자가 아래로 지나가도 로고 작은 "맘스토어"가 3:1 아래로 내려가지 않게(#fff0f5 위 3.10:1 고정) */
  background: var(--pink-soft);
  border-bottom: 0;
}

.ms-hero {
  background: transparent;
}

.ms-panel,
.ms-fcard {
  border: 0;
  box-shadow: var(--elevation-soft);
}

.ms-panel--soft {
  background: var(--card);
}

.ms-footer {
  border-top: 0;
  background: transparent;
}

.ms-flip {
  transform: rotate(180deg);
}

/* ---------- 큰 숫자(원칙 A) ---------- */
.ms-bign {
  padding: 4px 4px 0;
}

.ms-bign__kicker {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-bign__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.ms-bign__name {
  font-size: var(--fs-23);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ms-bign__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.ms-bign__label {
  font-size: var(--fs-18);
  font-weight: 700;
}

.ms-bign__num {
  font-size: var(--fs-num);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ms-bign__unit {
  font-size: var(--fs-18);
  font-weight: 700;
}

.ms-bign__sub {
  margin-top: 4px;
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-bign__extra {
  margin-top: 8px;
}

/* ---------- 카드(원칙 B·G) ---------- */
.ms-scard {
  border-radius: var(--radius-card);
  background: var(--card);
  padding: 18px 20px 20px;
  box-shadow: var(--elevation-soft);
}

@container frame (min-width: 768px) {
  .ms-scard {
    padding: 20px 24px 24px;
  }
}

.ms-scard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 8px;
}

.ms-scard__title {
  min-width: 0;
  font-size: var(--fs-17);   /* v3: 카드 제목 17px/700(SPEC 3.1) */
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ms-scard__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  border-radius: var(--radius-sm);
}

.ms-scard__link .ms-ico {
  width: 22px;
  height: 22px;
  color: var(--muted-foreground);
}

.ms-scard__aside {
  flex: none;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-scard__foot {
  margin-top: 14px;
}

.ms-grayline {
  padding: 12px 0 2px;
  font-size: var(--fs-14);
  line-height: 1.6;
  text-align: center;
  color: var(--muted-foreground);
}

.ms-grayline--left {
  text-align: left;
}

/* 데스크톱 2열(원칙 B — 같은 원칙으로 카드 2열) */
.ms-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.ms-cols > * {
  min-width: 0;
}

.ms-colstack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.ms-colstack > * {
  min-width: 0;
}

@container frame (min-width: 1024px) {
  .ms-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .ms-cols--wide {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .ms-cols__full {
    grid-column: 1 / -1;
  }
}

/* ---------- 큰 아이콘 + 2～4글자(원칙 C) ---------- */
.ms-iacts {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 4px;
}

.ms-iact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  border-radius: var(--radius-tile);
  text-align: center;
}

.ms-iact__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}

.ms-iact__ico .ms-ico {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}

/* v3 통합: 틴트 바탕에 아이콘은 잉크 한 색(U.iconTile 과 같게 — 색이 뜻을 갖지 않게. 예전 톤별 글자색은 지움) */
.ms-iact__ico--pink { background: var(--pink-soft); color: var(--ink, var(--foreground)); }
.ms-iact__ico--lav { background: var(--lav); color: var(--ink, var(--foreground)); }
.ms-iact__ico--mint { background: var(--mint); color: var(--ink, var(--foreground)); }
.ms-iact__ico--peach { background: var(--peach); color: var(--ink, var(--foreground)); }
.ms-iact__ico--cream { background: var(--cream); color: var(--ink, var(--foreground)); }

.ms-iact__label {
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.3;
}

.ms-iact__sub {
  margin-top: -4px;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-iact.is-on .ms-iact__ico {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@container frame (min-width: 768px) {
  .ms-iact__ico {
    width: 60px;
    height: 60px;
  }
}

/* ---------- 옆으로 넘기기(원칙 D) ---------- */
.ms-pager__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-sm);
}

.ms-pager__track::-webkit-scrollbar {
  display: none;
}

.ms-pager__page {
  position: relative; /* 화면 낭독기용 숨은 글자(.sr-only)가 넘기기 상자 밖으로 새지 않게 */
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.ms-pager__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 20px;
  margin-top: 8px;
}

.ms-pager__dots {
  display: inline-flex;
  gap: 7px;
}

.ms-pager__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag-optional-border);
}

.ms-pager__dot.is-on {
  background: var(--primary);
}

.ms-pager__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted-foreground);
}

.ms-pager__btn:hover {
  background: var(--pink-soft);
}

/* "더 보기"(원칙 D) */
.ms-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-more:hover {
  background: var(--pink-pale);
}

.ms-more[aria-expanded="true"] .ms-ico {
  transform: rotate(180deg);
}

/* ---------- 체크 줄(원칙 E·G) ---------- */
.ms-crows > * + * {
  margin-top: 2px;
}

.ms-crow__main {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.ms-crow__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: -11px;
  cursor: pointer;
}

.ms-crow__box input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.ms-crow__text {
  flex: 1;
  min-width: 0;
  padding: 10px 0 8px;
}

.ms-crow__title {
  overflow: hidden;
  font-size: var(--fs-15);
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-crow__titlelink {
  display: block;
  overflow: hidden;
  min-height: 44px;
  margin: -11px 0 -12px;
  padding: 11px 0 12px;
  border-radius: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-crow__titlelink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ms-crow__desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 1px;
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--muted-foreground);
}

.ms-crow.is-checked .ms-crow__title {
  color: var(--muted-foreground);
}

.ms-crow__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px 0 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
}

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

.ms-crow__detail {
  margin: 2px 0 12px 33px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--pink-pale);
  font-size: var(--fs-14);
  line-height: 1.65;
}

.ms-crow__detail > * + * {
  margin-top: 10px;
}

/* ---------- 상품 줄(원칙 G) ---------- */
.ms-plines > * + * {
  margin-top: 6px;
}

.ms-pline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.ms-pline__text {
  flex: 1;
  min-width: 0;
}

.ms-pline__brand {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-pline__name {
  font-size: var(--fs-15);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ms-pline__name a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px 0 -8px;
  border-radius: 4px;
}

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

.ms-pline__desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--muted-foreground);
}

.ms-pline__aside {
  flex: none;
}

/* ---------- 값 칸(출처 줄 없이 — 원칙 E) ---------- */
.ms-vgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 16px;
}

.ms-vgrid dt {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.ms-vgrid dd {
  margin: 2px 0 0;
  font-size: var(--fs-15);
  line-height: 1.45;
  font-weight: 800;
}

/* ---------- KC 한 줄·경고 한 줄(상품 상세 맨 위) ---------- */
.ms-kcbadge,
.ms-warnline {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: var(--fs-14);
  line-height: 1.45;
  font-weight: 700;
  text-align: left;
}

.ms-kcbadge > .ms-ico:first-child {
  color: var(--tag-done-foreground);
}

.ms-kcbadge > .ms-ico:last-of-type,
.ms-warnline > .ms-ico:last-of-type {
  width: 18px;
  height: 18px;
  color: var(--muted-foreground);
}

.ms-warnline {
  background: var(--cream);
}

.ms-warnline__sym {
  flex: none;
  font-size: var(--fs-16);
  line-height: 1;
}

.ms-footline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 6px;
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

.ms-footline .ms-link {
  font-size: var(--fs-12);
}

/* ---------- 가입 동의 한 쪽(참고 화면의 배치 원칙) ---------- */
.ms-allagree {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  font-size: var(--fs-16);
  font-weight: 800;
  cursor: pointer;
}

.ms-allagree input,
.ms-crow2__check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.ms-crows2 {
  margin-top: 16px;
}

.ms-crow2__row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ms-crow2__check {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  font-size: var(--fs-15);
  line-height: 1.45;
  cursor: pointer;
}

.ms-crow2__kind {
  font-weight: 800;
}

.ms-crow2__kind--opt {
  color: var(--muted-foreground);
}

.ms-crow2__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted-foreground);
}

.ms-crow2__arrow .ms-ico {
  transition: transform var(--motion-fast);
}

.ms-crow2__arrow[aria-expanded="true"] .ms-ico {
  transform: rotate(90deg);
}

.ms-crow2__sub {
  margin: -8px 0 4px 36px;
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

.ms-crow2__detail {
  margin: 4px 0 10px 36px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--pink-pale);
  font-size: var(--fs-13);
  line-height: 1.7;
}

.ms-crow2__detail dt {
  font-weight: 800;
}

.ms-crow2__detail dd {
  margin: 0 0 6px;
}

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

.ms-twobtns .ms-btn {
  width: 100%;
}

/* 고지 상자: 연한 바탕(--canvas) 위에서도 보이게 흰 바탕, 테두리 없음(2차 수정 — 문구·위치는 그대로) */
.ms-coupang {
  background: var(--card);
}

.ms-affnote {
  border: 0;
}

/* 카드 안 메뉴 줄(테두리 없이 여백으로 — 2차 수정 원칙 B) */
.ms-list--plain {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.ms-list--plain > li + li {
  border-top: 0;
}

.ms-list--plain .ms-lrow {
  min-height: 52px;
  padding: 6px 0;
  border-radius: var(--radius-md);
}

/* =====================================================================
   3차 수정(2026-10-07) — 하단 탭 5개 고정 · 떠 있는 비교 버튼 · 하루표
   ===================================================================== */
button.ms-tab {
  width: 100%;
}

/* 7차(SPEC 3.1): 떠 있는 "비교 n" 버튼(.ms-fab)은 지웠다 — 하단 비교 탭의 숫자 배지(.ms-tab__badge, v3-components.css)가 대신한다 */

.ms-footer details .ms-footer__nav {
  margin-top: 4px;
}

/* ===== v3 글씨체(SPEC 3.1·3.3) — 숫자가 주인공인 곳만 --font-num(세트 (가) DM Sans · (나) Pretendard), 한글은 --font-sans 로 이어 그린다 =====
 * 문장 속 숫자·영문은 "MS Latin DM"(base.css 끝 — DM Sans 의 0-9·A-Z·a-z 만, 400～700)이 맡는다.
 * 예전(3차 추가 ②) Nunito 선언은 이 블록으로 바뀌었다. 제목 굵기·크기는 SPEC 3.1 표(위 원 규칙에서 바꿈 — 화면 제목 26/800 · 카드 제목 17/700).
 */
.ms-bign__num,
.ms-stat__value,
.ms-ring__num,
.ms-admin__navcount {
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ms-bign__num {
  letter-spacing: -0.03em;
}

/* 제목 굵기(SPEC 3.1): 화면 제목 800, 카드·시트·작은 제목 700 */
.ms-hero__title {
  font-weight: 800;
}

.ms-bign__name,
.ms-h2,
.ms-h3,
.ms-scard__title,
.ms-sheet__title,
.ms-appbar__title {
  font-weight: 700;
}

/* ==========================================================================
   v3 — 14px 미만 규칙(SPEC 3.2, README·CONTRACT 에 같은 문장):
   "한글이 들어간 14px 미만 글자는 굵기 400～600 을 쓴다. Noto Sans KR·Pretendard 는 500·600 이 진짜 굵기라 작은 글자 강조에
    써도 번지지 않는다. 700 이상은 14px 이상에서만 쓰되, 예외는 둘뿐이다 — ① 작은 라벨 .t-label(12px/800) ② "맘스토어 추천" 배지
    .ms-rec__badge(12px/700 흰 글자). 숫자만 있는 요소는 예외 없이 자유다."
   예전(3차 추가 ③ "14px 미만은 400") 덮어쓰기 블록을 이 규칙으로 바꿨다: 13px 로 두고 400 으로 내렸던 선택자는 500 으로,
   14px 로 올려 굵기를 지킨 선택자는 그대로. .ms-tag 는 12px/600(원 규칙에서 바꿈 — 위 태그 블록).
   QA(js/app.js collectQa 의 smallBold)는 "한글 포함 · 14px 미만 · 700 이상"을 잡고 [data-small-bold-ok] 는 뺀다.
   ========================================================================== */

/* 14px 로 올려 굵기 유지 */
.ms-btn--sm,
.ms-stepper__text,
.ms-tl__title,
.ms-small.ms-bold,
.ms-xsmall.ms-bold,
.ms-note__title {
  font-size: var(--fs-14);
}

/* 500 — 크기 그대로(13px) */
.ms-chip,
.ms-affnote,
.ms-ad__label,
.ms-kc__label,
.ms-txline dt,
.ms-consent__more,
.ms-crow__more,
.ms-scard__aside,
.ms-admin__barbtn,
.ms-ilink,
.ms-table thead th,
.ms-table--compact th,
.ms-note strong {
  font-weight: 500;
}

/* 굵기를 줄인 뒤에도 구분되게 진한 글자색 */
.ms-txline dt,
.ms-kc__label,
.ms-note strong,
.ms-table thead th,
.ms-table--compact th {
  color: var(--foreground);
}

.ms-note__title strong {
  font-weight: 700;
}

/* 500 + 11～12px → 13px. 하단 탭 이름도 여기 — 지금 탭은 분홍 글자와 위쪽 막대로 구분 */
.ms-eyebrow,
.ms-infochip,
.ms-req,
.ms-opt,
.ms-switch__state,
.ms-pline__brand,
.ms-vgrid dt,
.ms-tab,
.ms-tab[aria-current="page"] {
  font-size: var(--fs-13);
  font-weight: 500;
}

/* 시안 알약(목업 전용): 12px 500 */
.ms-sian__pill,
.ms-sian-float .ms-sian__pill {
  font-size: var(--fs-12);
  font-weight: 500;
}

/* 바닥글: 링크 14px(개인정보 처리방침만 굵게·분홍 — 법정 강조), 사업자 정보 13px 500 */
.ms-footer__nav a {
  font-size: var(--fs-14);
  font-weight: 500;
}

.ms-footer__nav a.ms-footer__privacy {
  font-weight: 700;
}

.ms-footer details summary {
  gap: 8px;
  font-size: var(--fs-13);
  font-weight: 500;
  list-style: none;
}

/* "누르면 열리는 줄"로 읽히게 — 작은 꺾쇠(열리면 위로) */
.ms-footer details summary::-webkit-details-marker {
  display: none;
}

.ms-footer details summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.ms-footer details[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* 로고 속 작은 "맘스토어": 400(로고 전체 굵기 800 을 물려받지 않게) */
.ms-logo__ko {
  font-weight: 400;
}

/* 오류 문구는 눈에 띄어야 해서 14px 로 올려 굵기 유지 */
.ms-error {
  font-size: var(--fs-14);
}

.ms-crow2__detail dt,
.ms-consent__detail dt,
.ms-mymenu__title {
  font-weight: 500;
}

.ms-crow2__detail dt,
.ms-consent__detail dt {
  color: var(--foreground);
}

.ms-mymenu__tag,
.ms-admin__navgroup,
.ms-btn--xs {
  font-size: var(--fs-13);
  font-weight: 500;
}

/* 작은 글(.ms-small 13px·.ms-xsmall 12px) 속 강조: 500 + 진한 글자색(예: 판매처 목록 창의 상품 이름) */
.ms-small strong,
.ms-xsmall strong {
  font-weight: 500;
  color: var(--foreground);
}