/*
 * 맘스토어 v2 시안 — 화면 전용 규칙 — 후기
 * (v3: css/screens.css 를 화면별로 나눈 것. 내용은 그대로, 파일만 나눴다. 끝의 "옮긴 규칙" 묶음은 예전 screens.css 끝 블록에서 온 것이다.)
 * 화면 담당은 자기 파일 안에만 규칙을 더한다. 클래스 이름은 자기 접두사로 시작한다(.s5-…).
 * 배치 분기점은 @container frame (min-width: 768px / 1024px) 으로 쓴다. 토큰 밖 색·글자 크기를 쓰지 않는다(UI-01).
 */

/* === s5 === 후기 */

/* ---------- 후기 전체: 위쪽 안내(대가 후기 미접수 · 후기 운영 기준 요약) ---------- */
.s5-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@container frame (min-width: 1024px) {
  .s5-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.s5-policy {
  font-size: var(--fs-14);
  line-height: 1.7;
}

.s5-policy dt {
  margin-top: 12px;
  font-weight: 800;
}

.s5-policy dt:first-child {
  margin-top: 0;
}

.s5-policy dd {
  margin-top: 2px;
  color: var(--muted-foreground);
}

/* ---------- 조건별 집계(ReviewAggregateLine) — 개수와 분모만, 막대·퍼센트 없음 ---------- */
.s5-rule {
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.s5-rule--foot {
  margin-top: 12px;
}

.s5-agg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

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

.s5-agg__cell {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--background);
}

.s5-agg__cond {
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--secondary-foreground);
}

.s5-agg__q {
  margin-top: 2px;
  font-size: var(--fs-15);
  font-weight: 800;
  line-height: 1.45;
}

.s5-agg__den {
  margin-top: 10px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
}

.s5-agg__sub .s5-agg__den {
  margin-top: 2px;
}

.s5-anslist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.s5-ans {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-13);
}

.s5-ans strong {
  font-weight: 800;
}

.s5-agg__few {
  margin-top: 10px;
  font-size: var(--fs-14);
  font-weight: 800;
}

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

.s5-agg__sub {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--pink-line);
}

.s5-agg__scope {
  display: inline-block;
  margin-top: 10px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--tag-past);
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--tag-past-foreground);
}

.s5-agg__sub .s5-agg__scope {
  margin-top: 0;
}

.s5-agg__empty {
  margin-top: 12px;
  font-size: var(--fs-14);
  line-height: 1.6;
}

/* ---------- 후기 목록 배치(360px 한 열 · 1024px 이상 왼쪽 조건 필터 + 오른쪽 카드) ---------- */
.s5-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

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

.s5-filter {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.s5-filter > * + * {
  margin-top: 12px;
}

.s5-filter__pre {
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1.6;
  color: var(--secondary-foreground);
}

.s5-filter__sorttitle {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* 조건 묶음: 왼쪽 묶음 이름 + 오른쪽 칩(세로 길이를 줄임) */
.s5-fgroup {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.s5-fgroup__name {
  padding-top: 13px;
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.s5-fgroup .ms-chips {
  gap: 6px;
}

.s5-fgroup .ms-chip {
  padding: 0 12px;
}

.s5-tagsec .s5-fgroup {
  grid-template-columns: minmax(0, 1fr);
}

.s5-tagsec .s5-fgroup__name {
  padding-top: 0;
}

.s5-list > * + * {
  margin-top: 12px;
}

.s5-count {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
}

.s5-more {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1px dashed var(--pink-line);
  border-radius: var(--radius-card);
  background: var(--card);
}

.s5-more__title {
  font-size: var(--fs-15);
  font-weight: 800;
  line-height: 1.5;
}

.s5-more__text {
  margin: 4px 0 0;
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* 8차(SPEC 13.5): [카카오로 시작하기] 하나 — 상자 폭 가득(아이콘·글 아래 줄) */
.s5-more {
  flex-wrap: wrap;
}

.s5-more__acts {
  flex: 1 1 100%;
  margin-top: 4px;
}

/* ---------- 후기 카드(ReviewCard) ---------- */
.s5-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.s5-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.s5-card > * + * {
  margin-top: 10px;
}

.s5-card--hidden {
  border-style: dashed;
  background: var(--muted);
}

.s5-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.s5-card__nick {
  font-size: var(--fs-16);
  font-weight: 800;
}

.s5-card__date {
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

.s5-hiddenmsg {
  font-size: var(--fs-14);
  font-weight: 700;
}

/* 대가·샘플·초대 테스트 배지: 카드 맨 윗줄, 본문(14px)보다 큰 굵은 글씨 + 구분되는 색(RG-7) */
.s5-badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--tag-soon-foreground);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.s5-badge__name {
  font-size: var(--fs-16);
  font-weight: 800;
}

.s5-badge__text {
  font-size: var(--fs-13);
  line-height: 1.6;
}

.s5-facts,
.s5-conds,
.s5-pc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s5-fact {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
}

.s5-cond {
  padding: 2px 10px;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--secondary-foreground);
}

/* 좋았던 점 / 아쉬웠던 점: 같은 크기·같은 모양 두 칸(360px 위아래 · 1024px 이상 좌우 — VR29) */
.s5-pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
}

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

.s5-pc__box {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
}

.s5-pc__title {
  font-size: var(--fs-13);
  font-weight: 800;
}

.s5-pc__tags {
  margin-top: 6px;
}

.s5-pctag {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-12);
  font-weight: 700;
}

.s5-pc__text {
  margin-top: 6px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

.s5-free {
  font-size: var(--fs-14);
  line-height: 1.7;
}

.s5-qa > summary {
  min-height: var(--touch);
  font-size: var(--fs-14);
}

.s5-upds {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--pink-pale);
}

.s5-upd {
  font-size: var(--fs-13);
  line-height: 1.6;
}

.s5-upd + .s5-upd {
  margin-top: 4px;
}

.s5-upd__date {
  font-weight: 800;
  color: var(--secondary-foreground);
}

/* 「제조사·판매처 의견」(라벨 고정) */
.s5-brand {
  padding: 12px 14px;
  border-left: 4px solid var(--input);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--muted);
}

.s5-brand__label {
  font-size: var(--fs-13);
  font-weight: 800;
}

.s5-brand__text {
  margin-top: 4px;
  font-size: var(--fs-13);
  line-height: 1.6;
}

.s5-card__foot {
  display: flex;
  justify-content: flex-end;
}

.s5-card__foot .ms-link {
  justify-content: center;
  min-width: var(--touch);
  padding: 0 8px;
}

/* ---------- 후기 쓰기(512px 양식) ---------- */
.s5-form .ms-fieldset + .ms-error,
.s5-form div > .ms-error {
  margin-top: 6px;
}

.s5-nav {
  display: flex;
  gap: 8px;
}

.s5-nav > * {
  flex: 1;
}

.ms-form > .s5-nav__note {
  margin-top: 8px;
  text-align: center;
}

.s5-stop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--tag-soon-foreground);
  border-radius: var(--radius-tile);
  background: var(--cream);
}

.s5-stop__title {
  font-size: var(--fs-16);
  font-weight: 800;
}

.s5-stop__text {
  margin: 4px 0 12px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

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

.s5-pcform .ms-textarea {
  min-height: 150px;
}

.s5-countnum {
  margin-top: 4px;
  font-size: var(--fs-12);
  color: var(--muted-foreground);
  text-align: right;
}

.s5-tagsec > * + * {
  margin-top: 10px;
}

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

.s5-guide__title {
  font-size: var(--fs-14);
  font-weight: 800;
}

.s5-guide__list {
  margin-top: 6px;
  padding-left: 18px;
  list-style: disc;
  font-size: var(--fs-13);
  line-height: 1.7;
  color: var(--muted-foreground);
}

.s5-guide__list li + li {
  margin-top: 2px;
}

/* ---------- 후기 신고 ---------- */
.s5-target {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s5-target__label {
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--muted-foreground);
}

.s5-target__meta {
  margin-top: 8px;
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

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

.s5-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.s5-prod__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.s5-prod__model {
  font-size: var(--fs-14);
  font-weight: 800;
}

.s5-mycard {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--background);
}

.s5-mycard > * + * {
  margin-top: 8px;
}

.s5-mycard__title {
  font-size: var(--fs-15);
  font-weight: 800;
  line-height: 1.45;
}

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

.s5-mycard__text {
  font-size: var(--fs-14);
  line-height: 1.6;
}

/* 상태 안내(ModerationNotice — 고정 문구) */
.s5-modnote {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--tag-soon);
  font-size: var(--fs-13);
  line-height: 1.6;
}

.s5-modnote--temp_hidden,
.s5-modnote--hidden,
.s5-modnote--removed {
  background: var(--muted);
}

.s5-modnote > * + * {
  margin-top: 4px;
}

.s5-statusref {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  font-size: var(--fs-13);
  line-height: 1.6;
}

.s5-sechelp {
  margin-bottom: 12px;
}

.s5-reports > li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.s5-reports + .ms-help {
  margin-top: 12px;
}

.s5-report__title {
  font-size: var(--fs-14);
  font-weight: 800;
}

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

.s5-ok {
  font-size: var(--fs-15);
  font-weight: 800;
  color: var(--tag-done-foreground);
}

.s5-ok + .ms-p {
  margin-top: 6px;
}

.s5-ok ~ .ms-help {
  margin-top: 6px;
}
/* ---------- 3차 수정: 후기 카드 단순하게 ---------- */
.s5-card {
  border: 0;
  box-shadow: var(--elevation-soft);
}

.s5-card__facts {
  margin-top: 4px;
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.s5-pcline {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: var(--fs-14);
  line-height: 1.6;
}

.s5-pcline__k {
  font-weight: 800;
}

.s5-cardmore {
  margin-top: 8px;
}

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

.s5-rule1 {
  padding-top: 0;
}

.s5-agg {
  margin-top: 8px;
}
/* === end s5 === */

/* ---------- 옮긴 규칙: 예전 css/screens.css 끝 블록(글씨체 숫자 강조 · 14px 미만 규칙 · 작업 2 · 3차 추가 ④⑥)에서 이 화면의 선택자만, 원래 순서대로 ---------- */

/* ===== 3차 수정 추가 ② 글씨체 — 화면별 숫자 강조는 Nunito =====
 * 하루표 마지막 기록·시각·양, 수정 시트 큰 값·± 단추, 준비표 정리 개수, 관리자 숫자 카드·표 숫자, 비교 막대, 글자 수, 판정 규칙 코드.
 * 한글이 섞이면(예: "2시간 10분 전") 한글은 고운돋움으로 이어 그린다.
 * 줄 양(.cr-row__val "120ml")은 문장 속 숫자와 같게 기본 글씨체(안 D — 숫자·영문은 Nunito 600 이하)로 둔다 — 하루 합계 "분유 450ml"과 같은 모양.
 */
.s5-countnum {
  font-family: var(--font-num);
}

/* ==========================================================================
   v3 — 14px 미만 규칙(SPEC 3.2): 한글이 들어간 14px 미만 글자는 굵기 400～600 을 쓴다.
   Noto Sans KR·Pretendard 는 500·600 이 진짜 굵기라 작은 글자 강조에 써도 번지지 않는다. 700 이상은 14px 이상에서만.
   예전(3차 추가 ③) 14px 미만 400 덮어쓰기 블록을 이 규칙으로 바꿨다: 13px 로 두고 400 으로 내렸던 선택자는 500,
   14px 로 올려 굵기를 지킨 선택자는 그대로. QA smallBold 는 "한글 포함 · 14px 미만 · 700 이상"을 잡는다.
   ========================================================================== */
/* 14px 로 올려 굵기 유지 — 작은 제목·버튼·한글이 섞인 숫자 강조 */
.s5-ans strong,
.s5-brand__label {
  font-size: var(--fs-14);
}

/* 400 — 크기 그대로(13px) */
.s5-agg__den,
.s5-count,
.s5-filter__pre,
.s5-upd__date {
  font-weight: 500;
}

/* 400 + 11～12px → 13px(가늘어 보이지 않게) */
.s5-agg__cond,
.s5-agg__scope,
.s5-fgroup__name,
.s5-target__label {
  font-size: var(--fs-13);
  font-weight: 500;
}

/* 이용 제한 띠·내 후기 상태 안내의 첫마디는 제목 구실 — 14px 로 올려 굵기 유지 */
.s5-modnote p strong {
  font-size: var(--fs-14);
}

/* ---------- 7차 검수(V3 · 브리프 공통 디자인 "흰 바탕 중심"): 후기 화면도 흰 바탕 ----------
 * 후기 목록·후기 쓰기·신고·고치기·내 후기(본문에 .s5- 클래스가 있는 화면)와 후기 상태 화면(.s5-status)은
 * 상품 상세·추천 목록·홈과 같은 흰 바탕. 로고 머리글(.ms-header — 기본 연분홍 면)도 흰 면.
 * 흰 바탕 위 카드는 그림자 대신 연한 테두리(홈·가이드 카드와 같은 모양 — border 1px var(--chip-line)) */
.ms-app:has(#main :is([class^="s5-"], [class*=" s5-"])),
.ms-app:has(#main :is([class^="s5-"], [class*=" s5-"])) .ms-header {
  background: var(--card);
}

#main:has(:is([class^="s5-"], [class*=" s5-"])) :is(.ms-scard, .ms-panel, .ms-fcard, .s5-card) {
  border: 1px solid var(--chip-line);
  box-shadow: none;
}