/*
 * 맘스토어 v2 시안 — 화면 전용 규칙 — 로그인 전·시작(s1)
 * 8차(SPEC 13 — "카카오로 시작하기" 단일 가입): 시작 화면(/start) · 카카오 동의 자리(/start/kakao) · 아이 정보 1장(/start/child) ·
 *   비회원 홈('/' — 본문은 홈 담당의 MS.homeBody, 여기서는 맨 위 고지 한 줄만). 지운 화면(가입 동의 한 쪽 · 이메일 인증 · 로그인 ·
 *   비밀번호 재설정 · 온보딩 3단계 · 예전 첫 화면 소개 묶음)의 옛 선택자는 지웠다.
 *   [카카오로 시작하기] 버튼 모양(.ms-kakao-btn)과 같은 폭 버튼(.ms-cq__opt)은 css/v3-components.css 공용 부품 그대로 쓴다.
 * 화면 담당은 자기 파일 안에만 규칙을 더한다. 클래스 이름은 자기 접두사로 시작한다(.s1-…).
 * 배치 분기점은 @container frame (min-width: 768px / 1024px) 으로 쓴다. 토큰 밖 색·글자 크기를 쓰지 않는다(UI-01 — 시작 화면 그림의 면 색은 SVG 안).
 * 14px 미만 규칙(SPEC 3.2): 한글이 들어간 14px 미만 글자는 굵기 400～600.
 */

/* === s1 === 로그인 전·시작 */

/* ---------- 공개 모드 회색 고지 한 줄(비회원 홈 · 시작 화면 맨 위 — 굵게 하지 않음 · 14px · 대비 AA) ---------- */
.s1-devnote {
  padding: 2px 4px 0;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray, var(--muted-foreground));
}

/* 비회원 홈: 고지 한 줄 바로 아래부터 홈 본문(MS.homeScreen 의 U.page 안 — 좌우 여백은 틀이 정한다) */
.s1-devnote + .s2-home {
  margin-top: 8px;
}

/* ---------- 시작 화면 /start(SPEC 13.2) — 탭 바·머리글·바닥글 없이 틀 높이 가득 ---------- */
.s1-start {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 640px;
  padding: 10px var(--gutter) 28px;
  /* 따뜻한 틴트(살구 → 연분홍 → 연보라) — 사진·외부 그림 없이 */
  background: linear-gradient(180deg, var(--peach) 0%, var(--pink-soft) 52%, var(--lav) 100%);
}

.s1-start > .s1-devnote {
  text-align: center;
}

.s1-start__art {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 12px 0 4px;
}

.s1-start__svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

.s1-start__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 글자 로고(링크 아님 — 장식 크기 크게) */
.s1-start__logo {
  align-self: flex-start;
  min-height: 0;
  margin: 0 0 6px -2px;
  padding: 0;
  font-size: 34px;
  line-height: 1.2;
}

.s1-start__logo .ms-logo__ko {
  font-size: var(--fs-14);
}

/* 큰 문구 두 줄(30px 800 잉크) */
.s1-start__title {
  margin: 0 0 24px;
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink, var(--foreground));
  word-break: keep-all;
}

.s1-start__title:focus {
  outline: none;
}

.s1-start__l1,
.s1-start__l2 {
  display: block;
}

.s1-start__acts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

/* 버튼 아래 작은 글씨 링크 "먼저 둘러볼게요"(44px 누름 영역, 회색 밑줄 글자) */
.s1-start__browse {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--gray, var(--muted-foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s1-start__browse:hover {
  color: var(--ink, var(--foreground));
}

/* ---------- 집중 흐름 화면(카카오 동의 자리 · 아이 정보 1장) 공통 ---------- */
.s1-flow .ms-page {
  padding-top: 24px;
  padding-bottom: 32px;
}

.s1-kakao__title,
.s1-child__title {
  font-size: var(--fs-26);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink, var(--foreground));
  word-break: keep-all;
}

.s1-kakao__title:focus,
.s1-child__title:focus {
  outline: none;
}

.s1-kakao__lead,
.s1-child__lead {
  margin-top: 8px;
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--gray, var(--muted-foreground));
  word-break: keep-all;
}

/* ---------- 카카오 동의 자리 /start/kakao(SPEC 13.3) — 회색 테두리 상자(흰 바탕 · 1.5px · 둥근 16px) ---------- */
.s1-kbox {
  margin-top: 20px;
  padding: 16px 16px 6px;
  border: 1.5px solid #d9cdd4;
  border-radius: var(--radius-tile);
  background: var(--card);
}

.s1-kbox__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--muted);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--gray, var(--muted-foreground));
  word-break: keep-all;
}

.s1-kbox__ico {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.s1-kbox__title {
  margin: 18px 0 2px;
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--ink, var(--foreground));
}

.s1-krow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.s1-krow:first-child {
  border-top: 0;
}

.s1-krow__main {
  flex: 1;
  min-width: 0;
}

.s1-krow__name {
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink, var(--foreground));
  word-break: keep-all;
}

/* (필수)/(선택) 태그 — 필수 = 주색 글자 연분홍 바탕, 선택 = 회색 글자 연회색 바탕(글자가 뜻을 전한다) */
.s1-krow__tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-right: 2px;                         /* 수정: 태그 뒤 띄어쓰기(낭독용)가 있어 여백을 줄인다 — 보이는 틈은 그대로 */
  padding: 0 7px;
  border-radius: 6px;
  background: var(--pink-soft);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  vertical-align: 2px;
}

.s1-krow__tag--opt {
  background: var(--muted);
  color: var(--gray, var(--muted-foreground));
}

.s1-krow__short {
  margin-top: 3px;
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray, var(--muted-foreground));
  word-break: keep-all;
}

/* [내용 보기] — 44px 글자 버튼 */
.s1-krow__view {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 4px 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--gray, var(--muted-foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

.s1-krow__view:hover {
  color: var(--ink, var(--foreground));
}

.s1-kakao__opt {
  margin-top: 12px;
  padding: 0 2px;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--gray, var(--muted-foreground));
  word-break: keep-all;
}

.s1-kakao__acts {
  display: grid;
  gap: 6px;
  margin-top: 20px;
}

/* [내용 보기] 시트 */
.s1-ksheet__kind {
  font-size: var(--fs-14);
  color: var(--gray, var(--muted-foreground));
}

.s1-ksheet {
  margin-top: 8px;
}

.s1-ksheet > div {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.s1-ksheet > div:first-child {
  border-top: 0;
}

.s1-ksheet dt {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--ink, var(--foreground));
}

.s1-ksheet dd {
  margin-top: 2px;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--ink, var(--foreground));
  word-break: keep-all;
}

.s1-ksheet__doc {
  margin-top: 6px;
  font-size: var(--fs-14);
  color: var(--gray, var(--muted-foreground));
}

/* ---------- 아이 정보 1장 /start/child(SPEC 13.4) ---------- */
.s1-child__form {
  margin-top: 24px;
}

.s1-child__date {
  font-size: var(--fs-16);
}

/* 날짜를 고르면 바로 아래 회색 확인 줄("임신 28주로 봐요" / "생후 8개월로 봐요") */
.s1-child__read {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink, var(--foreground));
}

.s1-child__read[hidden] {
  display: none;
}

.s1-child__readico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ok);
}

.s1-child__err {
  margin-top: 8px;
}

.s1-child__acts {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

/* 날짜 없이 시작 → 시기만 고르기: 같은 폭 버튼 2×2(.ms-cq__opt 공용 — 선택 = 잉크 바탕 흰 글씨) */
.s1-child__periods {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.s1-child__legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--ink, var(--foreground));
}

.s1-child__later {
  margin-top: 12px;
  font-size: var(--fs-14);
  color: var(--gray, var(--muted-foreground));
}

/* === end s1 === */