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

/* === s8 === 앱(향후) */
/*
 * 앱 화면은 .ms-phone(360px, 컨테이너 이름 frame) 안에 그린다 → 휴대폰 안 규칙은 360px 한 가지.
 * 휴대폰 밖 시안 설명 칸(.s8-desk__notes / __nav)만 #frame 폭(1024px 이상)에 반응한다.
 */

/* ---------- 데스크톱 시안 틀: 휴대폰 가운데 + 양옆 시안 설명(앱 화면의 일부가 아님) ---------- */
.s8-desk__notes,
.s8-desk__nav {
  display: none;
}

@container frame (min-width: 1024px) {
  .s8-desk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    padding: 0 24px;
    background: var(--muted);
  }
  .s8-desk > .ms-phone-stage {
    grid-column: 2;
    grid-row: 1;
    background: transparent;
  }
  .s8-desk__notes,
  .s8-desk__nav {
    display: block;
    grid-row: 1;
    position: sticky;
    top: calc(var(--tb-h) + 24px);
    width: 100%;
    max-width: 300px;
    margin-top: 64px;
  }
  .s8-desk__notes {
    grid-column: 1;
    justify-self: end;
  }
  .s8-desk__nav {
    grid-column: 3;
    justify-self: start;
  }
  /* 앱 화면의 시트는 넓은 폭에서도 휴대폰 폭 아래쪽 판(휴대폰이 틀 가운데라 위치가 맞음) */
  #frame:has(.s8-desk) .ms-ovl {
    align-items: flex-end;
  }
  #frame:has(.s8-desk) .ms-sheet {
    width: 360px;
    max-height: 86vh;
    padding: 4px 16px 24px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
}

.s8-deskcard {
  padding: 18px 18px 20px;
  border: 1px dashed var(--input);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s8-deskcard + .s8-deskcard {
  margin-top: 16px;
}

.s8-deskcard__pill {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 1px 10px;
  border: 1px solid var(--muted-foreground);
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--foreground);
}

.s8-deskcard__list {
  margin-top: 10px;
}

.s8-deskcard__list li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-14);
  line-height: 1.65;
}

.s8-deskcard__list li + li {
  margin-top: 8px;
}

.s8-deskcard__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

.s8-deskcard__refs {
  margin-top: 14px;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.s8-desknav ul {
  margin-top: 8px;
}

.s8-desknav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px 0 12px;
  border-radius: 10px;
  font-size: var(--fs-14);
  font-weight: 700;
}

.s8-desknav a:hover {
  background: var(--pink-pale);
}

.s8-desknav a[aria-current="page"] {
  background: var(--pink-soft);
  color: var(--primary);
}

.s8-desknav .ms-ico {
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
}

/* ---------- 휴대폰 안 공통 ---------- */
.s8-page {
  padding-top: 20px;
  padding-bottom: 32px;
}

.s8-tone--pink { background: var(--pink-soft); }
.s8-tone--lav { background: var(--lav); }
.s8-tone--peach { background: var(--peach); }
.s8-tone--mint { background: var(--mint); }

.s8-sep {
  height: 1px;
  margin: 12px 0 4px;
  background: var(--border);
}

/* 카드 하나에 메시지 하나 */
.s8-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--elevation-soft);
}

.s8-card--care {
  border-color: var(--pink-line);
}

.s8-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.s8-card__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--pink-soft);
  color: var(--primary);
}

.s8-card__ico .ms-ico {
  width: 24px;
  height: 24px;
}

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

.s8-card__count {
  flex-shrink: 0;
  padding-top: 2px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
}

.s8-card__foot {
  margin-top: 14px;
}

.s8-card__head .ms-link {
  margin-right: -8px;
  flex-shrink: 0;
}

/* 홈 하루표 카드: 마지막 기록 */
.s8-carecard__last {
  padding: 16px;
  border-radius: var(--radius-tile);
  background: var(--pink-pale);
}

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

.s8-carecard__ago {
  margin-top: 2px;
  font-size: var(--fs-29);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.04em;
}

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

/* 소개: 지키는 것 */
.s8-principles {
  display: grid;
  gap: 10px;
}

.s8-principles li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s8-principles__title {
  font-size: var(--fs-15);
  font-weight: 800;
}

.s8-principles__text {
  margin-top: 2px;
  font-size: var(--fs-13);
  line-height: 1.65;
  color: var(--muted-foreground);
}

/* ---------- 하루표 머리 ---------- */
.s8-sharebar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius-tile);
  background: var(--card);
  text-align: left;
}

.s8-sharebar:hover {
  background: var(--pink-pale);
}

.s8-sharebar > .ms-ico:first-child {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.s8-sharebar__title {
  display: block;
  font-size: var(--fs-15);
  font-weight: 800;
}

.s8-sharebar__sub {
  display: block;
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

.s8-headnote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--tag-soon-foreground);
  border-radius: var(--radius-md);
  background: var(--tag-soon);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.6;
  color: var(--foreground);
}

.s8-headnote .ms-ico {
  margin-top: 2px;
  color: var(--tag-soon-foreground);
}

/* ---------- 빠른 입력(QuickRecordBar): 큰 버튼 2×2, 48px 이상, 글자 라벨 + 선 아이콘 ---------- */
.s8-quick {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.s8-quick__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.s8-quick__now {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

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

.s8-quick__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.s8-quick--big .s8-quick__grid {
  margin-top: 0;
  gap: 12px;
}

.s8-qcell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 116px;
  padding: 10px;
  border-radius: var(--radius-tile);
}

.s8-qcell__label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
  font-size: var(--fs-15);
  font-weight: 800;
}

.s8-qcell__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
}

.s8-qbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  text-align: center;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}

.s8-qbtn:hover {
  box-shadow: var(--elevation-soft);
  border-color: var(--pink-line);
}

.s8-qbtn:active {
  transform: scale(0.98);
}

.s8-qbtn__text {
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.s8-qbtn__label {
  font-size: var(--fs-16);
  font-weight: 800;
  line-height: 1.3;
}

.s8-qbtn__sub {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.s8-qbtn__sub .ms-ico {
  width: 14px;
  height: 14px;
}

/* 칸 전체가 버튼(유축·이유식·배변) */
.s8-qbtn--cell {
  align-items: flex-start;
  justify-content: space-between;
  min-height: 116px;
  padding: 14px;
  border-color: transparent;
  border-radius: var(--radius-tile);
  text-align: left;
}

.s8-qbtn--cell .s8-qbtn__ico {
  width: 28px;
  height: 28px;
}

.s8-qbtn--cell .s8-qbtn__label {
  font-size: var(--fs-18);
}

.s8-qbtn--cell .s8-qbtn__sub {
  color: var(--foreground);
  font-weight: 500;
}

.s8-qbtn--cell.s8-tone--lav { background: var(--lav); }
.s8-qbtn--cell.s8-tone--peach { background: var(--peach); }
.s8-qbtn--cell.s8-tone--mint { background: var(--mint); }
.s8-qbtn--cell.s8-tone--pink { background: var(--pink-soft); }

/* 시간 재는 중 */
.s8-qbtn.s8-qbtn--running,
.s8-qbtn.s8-qbtn--running:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.s8-qbtn--running .s8-qbtn__sub,
.s8-qbtn--cell.s8-qbtn--running .s8-qbtn__sub {
  color: var(--primary-foreground);
  font-weight: 800;
}

/* 빠른 입력 화면(크게) */
.s8-quick--big {
  padding: 0;
  border: 0;
  background: transparent;
}

.s8-quick--big .s8-qcell,
.s8-quick--big .s8-qbtn--cell {
  min-height: 152px;
}

.s8-quick--big .s8-qcell__pair .s8-qbtn {
  min-height: 92px;
}

.s8-quick--big .s8-qbtn__label {
  font-size: var(--fs-18);
}

.s8-quick--big .s8-qbtn--cell .s8-qbtn__label {
  font-size: var(--fs-23);
}

.s8-quick--big .s8-qcell__label {
  font-size: var(--fs-16);
}

/* 시간 재기(ElapsedTimer) */
.s8-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 12px 12px 14px;
  border: 2px solid var(--primary);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s8-timer__ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--pink-soft);
  color: var(--primary);
}

.s8-timer__title {
  font-size: var(--fs-15);
  font-weight: 800;
}

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

.s8-timer__clock {
  display: block;
  font-size: var(--fs-18);
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.s8-timer__acts {
  display: flex;
  gap: 6px;
  width: 100%;
}

.s8-timer__acts .ms-btn {
  min-width: 64px;
}

.s8-timer__acts .ms-btn:first-child {
  flex: 1;
}

/* 저장 직후 안내(되돌리기) */
.s8-saved {
  padding: 12px 8px 8px 14px;
  border: 1px solid var(--tag-done-foreground);
  border-radius: var(--radius-md);
  background: var(--tag-done);
}

.s8-saved__text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-right: 6px;
  font-size: var(--fs-14);
  line-height: 1.6;
}

.s8-saved__text > .ms-ico {
  margin-top: 2px;
  color: var(--tag-done-foreground);
}

.s8-saved__sub {
  display: block;
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

.s8-saved__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.s8-saved__acts .ms-iconbtn {
  margin-left: auto;
}

/* 첫 이유식 뒤 준비표 안내 카드(HintCard) */
.s8-hint {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--cream);
}

.s8-hint__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.s8-hint__head .ms-muted {
  margin-top: 2px;
  line-height: 1.6;
}

.s8-hint__acts {
  margin-top: 12px;
}

.s8-hint__row {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
}

/* ---------- 오늘 합계(DaySummary) ---------- */
.s8-sum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.s8-sum__item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s8-sum__item--wide {
  grid-column: 1 / -1;
}

.s8-sum__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
}

.s8-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--foreground);
}

.s8-dot .ms-ico {
  width: 15px;
  height: 15px;
}

.s8-sum__value {
  margin-top: 6px;
  font-size: var(--fs-18);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.s8-sum__sub {
  margin-top: 2px;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* ---------- 하루 목록(DayLog) ---------- */
.s8-logs {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  overflow: hidden;
}

.s8-logs > li + li {
  border-top: 1px solid var(--border);
}

.s8-log {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px 10px 14px;
  text-align: left;
}

button.s8-log:hover {
  background: var(--pink-pale);
}

.s8-log__time {
  width: 42px;
  flex-shrink: 0;
  font-size: var(--fs-14);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.s8-log__ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
}

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

.s8-log__body {
  flex: 1;
  min-width: 0;
}

.s8-log__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
}

.s8-log__type {
  font-size: var(--fs-15);
  font-weight: 700;
}

.s8-log__val {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

.s8-log__edit {
  display: grid;
  place-items: center;
  width: 28px;
  flex-shrink: 0;
  color: var(--muted-foreground);
}

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

.s8-by {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.s8-by--me {
  background: var(--pink-soft);
  color: var(--primary);
}

.s8-lastline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-14);
  color: var(--muted-foreground);
}

.s8-lastline strong {
  color: var(--foreground);
}

.s8-sianbox {
  padding: 4px 14px 8px;
  border: 1px dashed var(--input);
  border-radius: var(--radius-md);
}

.s8-sianbox .ms-note {
  margin: 8px -6px 4px;
  border: 0;
  padding: 4px 6px;
  background: transparent;
}

/* ---------- 이번 주 ---------- */
.s8-week th[scope="row"] {
  white-space: nowrap;
}

.s8-week__today {
  display: block;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--muted-foreground);
}

.s8-week__none {
  color: var(--muted-foreground);
}

.s8-bars {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s8-bars li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.s8-bars__date {
  font-size: var(--fs-13);
  font-weight: 700;
}

.s8-bars__track {
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--muted);
}

.s8-bars__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--input);
}

.s8-bars__num {
  font-size: var(--fs-13);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.s8-bars__none {
  grid-column: 2 / -1;
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

/* ---------- 알림 설정 ---------- */
.s8-perm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s8-perm > .ms-ico {
  margin-top: 2px;
  color: var(--primary);
}

.s8-perm__title {
  font-size: var(--fs-14);
  font-weight: 800;
}

.s8-rems {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.s8-rem {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 16px;
}

.s8-rem + .s8-rem {
  border-top: 1px solid var(--border);
}

.s8-hm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.s8-lock {
  padding: 18px 14px 14px;
  border-radius: var(--radius-card);
  background: var(--foreground);
}

.s8-lockcard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card);
}

.s8-lockcard__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--brand-gradient);
  color: var(--primary-foreground);
  font-weight: 800;
}

.s8-lockcard__app {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.s8-lockcard__text {
  margin-top: 2px;
  font-size: var(--fs-14);
  font-weight: 700;
}

.s8-lock__cap {
  margin-top: 10px;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--primary-foreground);
}

/* ---------- 보호자 초대 ---------- */
.s8-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.s8-kinds li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-14);
  font-weight: 700;
}

.s8-kinds .ms-ico {
  width: 18px;
  height: 18px;
  color: var(--tag-done-foreground);
}

.s8-kinds--no .ms-ico {
  color: var(--muted-foreground);
}

.s8-code {
  padding: 20px 16px 16px;
  border: 2px dashed var(--pink-line);
  border-radius: var(--radius-card);
  background: var(--pink-pale);
  text-align: center;
}

.s8-code__value {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-24);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.s8-code__meta {
  margin: 4px 0 16px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--primary);
}

/* ---------- 위젯 안내 ---------- */
.s8-hs {
  padding: 18px 16px 14px;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--lav), var(--pink-soft) 60%, var(--peach));
}

.s8-hs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.s8-hs__icon {
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--card);
  opacity: 0.6;
}

.s8-widget {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--elevation-card);
}

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

.s8-widget__kind {
  margin-top: 4px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted-foreground);
}

.s8-widget__ago {
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.s8-widget__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: auto;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--fs-14);
  font-weight: 800;
}

.s8-widget__btn:hover {
  background: var(--primary-hover);
}

.s8-hs__cap {
  margin-top: 14px;
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--foreground);
}

.s8-yesno {
  display: grid;
  gap: 12px;
}

.s8-yesno > section {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s8-yesno .s8-kinds {
  margin-top: 8px;
}

.s8-steps {
  padding-left: 20px;
  list-style: decimal;
  font-size: var(--fs-14);
  line-height: 1.8;
}

/* ---------- 하루표 켜기 ---------- */
.s8-facts {
  display: grid;
  gap: 8px;
}

.s8-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-tile);
  background: var(--card);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.5;
}

.s8-code__ex {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted-foreground);
}

.s8-tags {
  margin-top: 8px;
}
/* ---------- 3차 수정: 아기 하루표(웹·앱 같음) — 아이콘 한 줄 · 마지막 기록 3칸 · 날짜별 목록 · 수정 시트 ---------- */
.cr-icons {
  gap: 2px;
}

.cr-icons .ms-iact__ico {
  width: 44px;
  height: 44px;
}

.cr-icons .ms-iact__ico .ms-ico {
  width: 22px;
  height: 22px;
}

.cr-icons .ms-iact__label {
  font-size: var(--fs-13);
}

.cr-icons .ms-iact__sub {
  margin-top: -2px;
  font-size: var(--fs-11);
  color: var(--tag-past-foreground);
}

.cr-sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.cr-sum__cell {
  padding: 10px 8px;
  border-radius: var(--radius-md);
  background: var(--pink-pale);
  text-align: center;
}

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

.cr-sum__big {
  text-wrap: balance;
  margin-top: 2px;
  font-size: var(--fs-15);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;
}

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

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

.cr-day__sum + .cr-rows,
.cr-day__sum + .cr-day__sum + .cr-rows {
  margin-top: 8px;
}

.cr-rows > li + li {
  margin-top: 2px;
}

.cr-rows--home {
  margin-top: 12px;
}

.cr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 6px 0;
  border-radius: var(--radius-md);
  text-align: left;
}

button.cr-row:hover {
  background: var(--pink-pale);
}

.cr-row > .ms-ico:last-of-type {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted-foreground);
}

.cr-row__time {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 64px;
  font-size: var(--fs-16);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cr-row__time small {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-foreground);
}

.cr-row__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

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

.cr-row__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cr-row__type {
  font-size: var(--fs-15);
  font-weight: 800;
}

.cr-row__val,
.cr-row__memo,
.cr-row__by {
  font-size: var(--fs-13);
  color: var(--muted-foreground);
}

.cr-row__by {
  flex: none;
  font-size: var(--fs-12);
}

.cr-row__tag {
  flex: none;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--tag-soon);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--tag-soon-foreground);
}

.cr-all {
  display: flex;
  justify-content: flex-end;
}

/* 수정 시트 */
/* 수정 시트의 [삭제]/[저장]은 내용이 길어도 시트 아래에 붙어 있게 */
.ms-sheet:has(.cr-sheet) .ms-sheet__foot {
  position: sticky;
  bottom: -24px;
  z-index: 1;
  margin: 20px -16px -24px;
  padding: 12px 16px 24px;
  background: var(--card);
  border-top: 1px solid var(--border);
}

.cr-sheet > * + * {
  margin-top: 18px;
}

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

.cr-field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: 800;
}

.cr-field__help,
.cr-field__sub {
  font-size: var(--fs-12);
  color: var(--muted-foreground);
}

.cr-field__sub {
  margin-top: 2px;
  font-size: var(--fs-13);
  font-weight: 700;
}

.cr-big {
  margin-top: 4px;
  font-size: var(--fs-29);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cr-big--input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 4px 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cr-big__unit {
  font-size: var(--fs-18);
  font-weight: 700;
}

.cr-amtrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cr-unit {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-13);
  font-weight: 800;
}

.cr-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.cr-step {
  min-height: 44px;
  padding: 0 2px;
  border: 1px solid var(--input);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-13);
  font-weight: 800;
  white-space: nowrap;
}

.cr-step:hover,
.cr-unit:hover {
  background: var(--pink-pale);
}

.cr-field .ms-btn--block {
  margin-top: 8px;
}

.cr-seg {
  margin-top: 6px;
}
/* === end s8 === */

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

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

.cr-sum__big,
.cr-row__time,
.cr-big,
.cr-step {
  font-weight: 700;
}

/* 400 — 크기 그대로(13px) */
.s8-code__meta,
.s8-widget__kind,
.cr-icons .ms-iact__label {
  font-weight: 500;
}

/* 400 + 11～12px → 13px(가늘어 보이지 않게) */
.cr-sum__label,
.cr-row__time small,
.s8-code__ex,
.s8-lockcard__app,
.s8-widget__brand {
  font-size: var(--fs-13);
  font-weight: 500;
}

/* 하루표 아이콘 아래 상태(수면 중): 11px 700 → 12px 400(타일 안 자리) */
.cr-icons .ms-iact__sub {
  font-size: var(--fs-12);
  font-weight: 500;
}

/* 눌러야 열리는 곳(시트·접힌 자세히·관리자 표)도 같은 규칙 */
.cr-step {
  font-size: var(--fs-14);   /* 시트 제목·판매처 이동 글·하루표 조정 버튼("-10분") — 14px 로 올려 굵기 유지 */
}

.s8-bars__date,
.s8-bars__num,
.cr-field__sub {
  font-weight: 500;
}

.s8-deskcard__pill,
.cr-row__tag {
  font-size: var(--fs-13);
  font-weight: 500;
}

/* ---------- v3: 하루표를 아직 쓸 수 없는 회원(임신 중 · 날짜 없음) — 제목 블록 + 「준비 중」 카드(D-day 큰 숫자 없음) ---------- */
.cr-notyet > .ms-tblock {
  margin-bottom: 16px;
}

.cr-notyet__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cr-notyet__row .t-body {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.6;
}