/*
 * 맘스토어 v2 시안 — 디자인 토큰(v3 정체성 재구성, 2026-10-09 — SPEC 2절·3.3절)
 * 기존 토큰은 이름을 유지하고 값만 바꿨다(바뀐 값: --muted-foreground·--placeholder 둘뿐 → #75636d).
 * 새 토큰: 별칭(--ink --gray --gray-line --brand-dark --yellow --toast-bg) · 판정 3색(--ok --check --mismatch 계열) ·
 *          추천·광고·정보·막대·링·오래된 가격·초안(--rec-* --ad-* --info-* --fit-* --ring-* --price-stale --draft-*).
 * 대비값은 WCAG 2.1 상대 휘도 식으로 계산한 값(SPEC 2절 표 그대로 — tools/contrast.js 가 같은 쌍을 다시 계산한다).
 * 통과 기준: 18px 미만 글자(및 18.67px 미만 굵게) 4.5:1 · 큰 글자 3:1 · 뜻 있는 비글자(테두리·점·막대) 3:1. "장식"은 기준 없음.
 * 원칙(브리프 C): 색만으로 뜻 전달 금지(아이콘 + 글자 병기) · 장식용 색 금지(그라데이션·그림자·틴트 바탕만 예외) · 작은 글자 AA.
 * 브랜드 분홍(--brand #ef6195)은 흰 글자 3.08:1 — 장식 전용(그라데이션·탭 활성 막대·로고 마크). 글자·버튼 바탕·선택 테두리에 쓰지 않는다.
 * 글자 크기 단계(VR9 + v3 추가 17·20·26): 11·12·13·14·15·16·17·18·20·23·24·26·29·35px. 모서리 5단계(VR10): 8·12·16·22·알약 + 버튼 14.
 */
:root {
  /* 1. 기본 역할 색 */
  --background: #fffafa;            /* 앱 바탕(브리프 바탕) */
  --foreground: #342a34;            /* 잉크 — 흰 13.75 · 바탕 13.30 */
  --card: #ffffff;
  --card-foreground: #342a34;
  --primary: #c72964;               /* 진한 주색 역할: 라벨 글자·링크·주 버튼 바탕·추천 배지 바탕 — 흰 글자 5.34 · 흰 바탕 5.34 · #fffafa 5.17 · #fff0f5 4.84 */
  --primary-foreground: #ffffff;
  --primary-hover: #b2255a;         /* 눌림·초점선 — 흰 글자 6.35 */
  --secondary: #fff0f5;
  --secondary-foreground: #8a2350;
  --muted: #f6eff2;
  --muted-foreground: #75636d;      /* v3 값 변경(예전 #6b5a66): 회색 글자(한 문장 설명·보조·확인일·오래된 가격) — 흰 5.58 · #fffafa 5.40 · #fff0f5 5.06 · #f6eff2 4.93 */
  --accent: #fff0f5;
  --accent-foreground: #8a2350;
  --destructive: #c42b1c;           /* 삭제·오류 글자 — 흰 5.66 */
  --border: #f0dfe7;                /* 카드 경계선(장식 — 흰 1.28, 카드는 흰 면과 그림자로도 구분) */
  --input: #a08593;                 /* 입력 칸 테두리(뜻 있는 비글자) — 흰 3.35 */
  --ring: #c72964;
  --focus-ring: #b2255a;            /* 초점선 — 흰 6.35 */
  --focus-ring-inverse: #ffffff;    /* 어두운 바탕 위 */

  /* 2. 별칭(v3 새 이름 — 값은 위 토큰을 가리킨다) */
  --ink: var(--foreground);
  --gray: var(--muted-foreground);
  --gray-line: #8f7d89;             /* 브리프의 회색 #8f7d89 — 글자에는 쓰지 않는다(흰 3.84 — 작은 글자 AA 미달). 광고 테두리·구분 점·아이콘 선 같은 뜻 있는 비글자(3:1)에만 */
  --brand-dark: #d9477e;            /* 브리프 진한 주색 — 장식 전용(--brand-gradient 끝 색 후보·/dev/logo 마크). 흰 글자 4.08 미달 */
  --yellow: var(--cream);           /* 브리프 "노랑" 틴트 = 기존 --cream */
  --toast-bg: #382c34;              /* 토스트 바탕(2026-09 시연용 HTML(사용자 제작) 토스트) — 흰 글자 13.31 */

  /* 맘스토어 고유 색 — 장식 전용 */
  --brand: #ef6195;                 /* 그라데이션·탭 활성 막대·로고 마크만. 글자·버튼 바탕·선택 테두리 금지(#fffafa 2.98 · #fff0f5 2.79) */
  --brand-light: #ff9dbc;
  /* 3차 수정 추가 ② 로고 전용 색(예전 테스트 목업 로고 그대로) — 로고에만 쓴다(WCAG 로고 예외, QA [data-logo] 제외). 글자·버튼에는 쓰지 않는다 */
  --logo-en: #F83E79;   /* momstore */
  --logo-ko: #e95781;   /* 맘스토어(작은 글자) — 웹 머리글 #fff0f5 3.10:1 · 앱 윗줄 #fffafa 3.30:1 */
  --pink-soft: #fff0f5;             /* 연분홍 면(선택된 카드·지금 태그 바탕·화면 바탕 --canvas) — 잉크 12.47 */
  --pink-pale: #fff7fa;
  --pink-line: #f8c7d7;

  /* 3. 틴트 4개(브리프 C — 아이콘 상자·섹션 면·세 기둥 카드). 틴트 위 아이콘·글자는 --ink(12 이상) · 회색 --gray(4.95 이상) · 라벨 --primary(4.74 이상) */
  --lav: #f4efff;
  --mint: #eefaf5;
  --peach: #fff3ec;
  --cream: #fff8dc;
  --sky: #e8f4fb;                   /* 7차: 다섯째 틴트(= --info-bg) — 분류 시트 "씻길 때"·맘맵 위생·편의. 잉크 12.29 · 회색 4.99 · --info 5.30 */
  /* 7차: 틴트 위 선 그림 색(U.productArt · 분류 아이콘 — 장식, aria-hidden). 각 틴트 위 3:1 이상(뜻 없는 그림이라 기준은 없지만 또렷하게) */
  --pink-ink: var(--primary);       /* #fff0f5 위 4.84 */
  --lav-ink: #553a9e;               /* #f4efff 위 7.50 */
  --mint-ink: var(--ok);            /* #eefaf5 위 5.12 */
  --peach-ink: #a24a17;             /* #fff3ec 위 5.47 */
  --cream-ink: var(--check);        /* #fff8dc 위 4.99 */
  --sky-ink: var(--info);           /* #e8f4fb 위 5.30 */
  /* 7차: 칩(조건 칸 · 품목 칩 · 분류 칩) — 선택 = 잉크 바탕 흰 글씨(13.75), 기본 = 흰 바탕 연한 회색 테두리 */
  --chip-line: #e3d8de;             /* 기본 칩 테두리(장식 — 칩은 글자로 구분) */
  --chip-line-strong: #cdbfc7;      /* 분류 시트 "현재 시기 품목" 진한 테두리 */
  --chip-line-faint: #efe8ec;       /* 분류 시트 "다른 시기 품목" 아주 연한 테두리 */
  --chip-fill: var(--muted);        /* 답한 조건 회색 칩 바탕 #f6eff2 — 잉크 12.15 */
  --seg-off: #ece4e8;               /* 적합도 칸 빈칸(장식 — 개수는 글자 "N개 중 M개 맞아요"가 전한다) */
  --line-soft: #f1e9ed;             /* 연한 구분선(목록 줄 사이·조건 묶음 사이) */

  /* 4. 시기·상태 태그(바탕 + 글자, 모두 AA, 색과 글자(+아이콘)를 함께 쓴다) — 지금 분홍 · 다음 호박 · 완료 초록 */
  --tag-now: #fff0f5;
  --tag-now-foreground: #b2255a;    /* 5.76 */
  --tag-soon: #fff7df;
  --tag-soon-foreground: #8a650f;   /* 4.97 — "다음"에도 쓴다(= 판정 "확인 필요" 호박, 문맥과 글자가 다르다 — SPEC 충돌 2-4) */
  --tag-next: var(--tag-soon);      /* v3 별칭: "다음" 태그 */
  --tag-next-foreground: var(--tag-soon-foreground);
  --tag-done: #eff9f5;
  --tag-done-foreground: #2b6f56;   /* 5.57 */
  --tag-later: #f6eff2;             /* 이제 "나중에·건너뜀"만(판정 "어긋남"은 --mismatch 계열) */
  --tag-later-foreground: #6b5a66;  /* 5.66 */
  --tag-past: #f4efff;
  --tag-past-foreground: #553a9e;

  /* 5. 판정 3색(맞음 청록 · 확인 필요 호박 · 어긋남 빨강 — 주색 분홍 336° 과 색상이 확실히 다르다: 175° · 45° · 4°).
     점·칩에는 늘 아이콘(circle-check · circle-help · circle-x)과 글자(맞음 · 확인 필요 · 어긋남)를 함께 둔다 */
  --ok: #0f766e;                    /* 맞음 글자·점·막대 채움 — 흰 5.47 · #fffafa 5.38 */
  --ok-bg: #e6f7f3;                 /* 맞음 칩 바탕 — --ok 4.94 · 잉크 12.42 · 회색 5.04 */
  --ok-border: #bfe6dc;             /* 맞음 칩 테두리(장식) */
  --check: #8a650f;                 /* 확인 필요 글자·점(= --tag-soon-foreground) — 흰 5.32 */
  --check-bg: #fff7df;              /* 확인 필요 칩 바탕(= --tag-soon) — --check 4.97 · 잉크 12.85 · 회색 5.22 */
  --check-border: #eedc9d;          /* 칩 테두리(장식) */
  --mismatch: #b42318;              /* 어긋남 글자·점 — 흰 6.57 · #fffafa 6.36 */
  --mismatch-bg: #fdeceb;           /* 어긋남 칩 바탕 — --mismatch 5.75 · 잉크 12.03 · 회색 4.88 */
  --mismatch-border: #f0c5c1;       /* 칩 테두리(장식) */

  /* 6. 추천 배지 · 광고 표시 · 정보색 · 막대·링 · 오래된 가격 · 초안 */
  --rec-bg: var(--primary);         /* "맘스토어 추천" 배지 채움(주색 채움 + 흰 글자 12px/700 — 5.34) */
  --rec-fg: #ffffff;
  --ad-border: var(--gray-line);    /* 광고 자리 테두리(회색 1px 실선 — 채움 없음·알약 아님·모서리 --radius-md. 추천 배지와 절대 같은 모양 금지) — 흰 3.84(비글자) */
  --ad-fg: var(--gray);             /* "광고" 글자 — 흰 5.58 */
  --info: #0b6a9a;                  /* 정보색(하늘) — 출처 칩·KC 칩 글자 — 흰 5.93 · #fffafa 5.73 */
  --info-bg: #e8f4fb;               /* 정보 칩 바탕 — --info 5.30 · 잉크 12.29 · 회색 4.99 */
  --info-border: #bcdcee;           /* 정보 칩 테두리(장식) */
  --fit-fill: var(--ok);            /* 적합도 막대 채움(맞은 개수 = 맞음 색) — --fit-track 위 4.94(비글자) */
  --fit-track: var(--ok-bg);        /* 적합도 막대 바닥 */
  --ring-fill: var(--primary);      /* 준비 현황 링 채움(예전 --brand 2.41 → 교체) — --ring-track 위 4.72(비글자). 실제 색은 U.progressRing 의 inline conic-gradient(F2) */
  --ring-track: var(--muted);       /* 링 바닥 */
  --price-stale: var(--gray);       /* 오래된 가격 글자(회색) — 흰 5.58 */
  --draft-fg: var(--gray);          /* "초안이에요" 태그 글자 */
  --draft-border: #c9bfc5;          /* "초안이에요" 태그 연한 테두리(장식) */
  /* 8차(SPEC 13.2): [카카오로 시작하기] 버튼 — 카카오 로그인 디자인 가이드 색. 이 버튼(.ms-kakao-btn)에만 쓴다(우리 색 체계 밖의 예외) */
  --kakao-bg: #fee500;              /* 버튼 바탕 */
  --kakao-fg: rgba(0, 0, 0, 0.85);  /* 버튼 글자 — #fee500 위 12.48 */
  --kakao-sym: #000000;             /* 말풍선 심볼(장식, aria-hidden) */

  /* 6차(SPEC 7.2): 맘맵 가짜 지도(SVG — 그림 전체 aria-hidden, 장식) · 소아 의료 분류 점. 글자 대비 기준 밖이지만 덩어리 이름은 AA 로 맞춘다 */
  --map-land: #f3f0ee;              /* 땅 */
  --map-block: #ebe4ec;             /* 이름 붙은 덩어리(예시몰·예시역) */
  --map-park: #dcf0e5;              /* 공원 덩어리 */
  --map-label: #6b5a66;             /* 덩어리 이름 — #ebe4ec 위 5.14 · 땅 위 5.64 */
  --map-label-park: #3f6f5c;        /* 공원 이름 — #dcf0e5 위 4.85 */
  --map-medical: #d64545;           /* 소아 의료 분류 점(장식) */

  /* 부품 보조 색(테두리·눌림·자리 글자) — 부품은 이 토큰만 쓴다(UI-01) */
  --on-dark: #ffffff;               /* 어두운 바탕 위 글자·흰 점 */
  --on-dark-muted: #efe6ec;         /* 어두운 바탕 위 보조 글자 */
  --soft-hover: #ffe3ee;            /* 옅은 분홍 버튼 눌림 */
  --danger-border: #e7b7b1;
  --placeholder: #75636d;           /* v3 값 변경(예전 #85737f): 입력 칸 자리 글자 — 흰 5.58 */
  --tag-nice-border: #d9cdf3;
  --tag-optional-border: #e1d3da;
  --tag-review-border: #eadb9c;
  --note-cream-border: #f1e3a8;
  --note-sensitive-border: #e2d8f7;
  --app-bg: #fcf9fa;                /* 앱 화면 바탕 */
  --canvas: var(--pink-soft);       /* 2차 수정: 웹·앱 화면 바탕 — 연한 단색 바탕 위 흰 카드(원칙 B) */
  --admin-bar-line: #8d7f89;        /* 관리자 윗줄 버튼 테두리 */
  --admin-bar-hover: #4a3f49;

  /* 시안 표시·기기 틀(앱 밖 — 실제 서비스에는 없음) */
  --sian-bg: #f3eff1;
  --sian-line: #cdbfc6;
  --sian-fg: #574a54;
  --sian-pill-line: #8c7d87;
  --sian-pill-fg: #463b44;
  --sian-note-line: #b9a9b3;
  --sian-note-bg: #f7f4f6;
  --sian-note-fg: #4f444d;
  --phone-stage: #f1edf0;
  --phone-bezel: #3b343a;

  /* 그림자 3토큰(VR10) — 장식 */
  --elevation-card: 0 14px 38px rgb(170 67 108 / 0.12);
  --elevation-soft: 0 4px 14px rgb(116 53 79 / 0.04);
  --elevation-cta: 0 9px 20px rgb(199 41 100 / 0.2);

  /* 그라데이션 — 장식. --brand-gradient 는 /dev/logo 하트 마크만(hero-card 에는 쓰지 않는다 — SPEC 4.23) */
  --hero-gradient: linear-gradient(110deg, #fff1f6, #fffaf7);
  --thumb-gradient: linear-gradient(145deg, #fff5ef, #fff0f5);
  --brand-gradient: linear-gradient(135deg, #ff9dbc, #ef6195);

  /* 모서리 */
  --radius-sm: 0.5rem;      /* 8 */
  --radius-md: 0.75rem;     /* 12 */
  --radius-tile: 1rem;      /* 16 */
  --radius-card: 1.375rem;  /* 22 */
  --radius-hero: 1.75rem;   /* 28 */
  --radius-cta: 0.875rem;   /* 14 버튼 */
  --radius-pill: 999px;

  /* 글자 크기 단계(VR9 + v3 추가: 17 카드 제목 · 20 섹션 제목 · 26 화면 제목 — SPEC 3.1) */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-23: 1.4375rem;
  --fs-24: 1.5rem;
  --fs-26: 1.625rem;
  --fs-29: 1.8125rem;
  --fs-35: 2.1875rem;
  --fs-num: 3.25rem;    /* 2차 수정: 화면 맨 위 큰 숫자 전용 52px(원칙 A) — v3 에서는 화면에서 쓰지 않는다(.ms-bign__num 은 남겨 둠) */
  --text-tab: 0.875rem;     /* 준비표 탭 이름 14px 고정(가칭 text-tab) */
  --text-tag: 0.75rem;      /* 태그 최소 크기 12px */

  /* 폭·간격·높이 */
  --container-page: 73.75rem;     /* 1180px 목록 */
  --container-reading: 59.375rem; /* 950px 읽기 */
  --container-narrow: 32rem;      /* 512px 양식 */
  --gutter: 1rem;                 /* 16px (768px 24px, 1024px 28px) */
  --header-h: 4rem;               /* 64px (데스크톱 74px) */
  --touch: 2.75rem;               /* 44px 조작 최소 */
  --touch-main: 3rem;             /* 48px 주 버튼·빠른 입력 */

  /* 글꼴 — 7차(SPEC 8절 끝): 기본은 세트 (나) Pretendard(자체 보관 css/fonts-pretendard.css — 외부 요청 없음). <html data-font="pretendard">.
     세트 (가) Noto Sans KR + DM Sans · (나') Pretendard + 고운돋움 인사말은 주소 ?font= 로만(비교·검사용 — 도구 줄 고르기는 지웠다). 아래 [data-font] 블록.
     기존 "MS Latin"(Nunito)·"MS Latin DM"·고운돋움·Nunito 파일과 css/fonts.css 는 그대로 둔다(로고 --font-logo · 세트 (가)·(나') 가 쓴다). */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-num: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; /* 가격·큰 숫자·개수(.t-price .t-num 등) */
  --font-logo: "Nunito", sans-serif;                            /* 글자 로고(그대로) */
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* 움직임 */
  --motion-fast: 120ms;
  --motion-base: 200ms;

  /* 목업 도구(앱 밖) — 중립 회색 */
  --mk-bg: #e6e6ea;
  --mk-bar: #3a3a41;
  --mk-bar-fg: #ffffff;
  --mk-bar-muted: #d4d4da;
  --mk-btn: #50505a;
  --mk-btn-on: #ffffff;
  --mk-btn-on-fg: #26262b;
  --tb-h: 0px;          /* 목업 도구 높이 — app.js 가 잰 값으로 바꾼다 */
  --frame-left: 0px;    /* 프레임 왼쪽 위치 — 시트·토스트 고정 위치용 */
  --frame-w: 360px;
}

/* 글꼴 세트 (가) Noto Sans KR + DM Sans — 7차부터 기본이 아니다(?font=noto 일 때만). [data-font="noto"] 단독 선택자는 /dev/fonts 의
   section[data-font="noto"] 가 html 이 (나)·(나')일 때도 (가)로 그려지게 하기 위한 것(통합 — S6 보고). */
:root[data-font="noto"],
[data-font="noto"] {
  --font-sans: "MS Latin DM", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-num: "DM Sans", "Noto Sans KR", sans-serif;
}

/* 글꼴 세트 (나) Pretendard(7차 기본 — :root 값과 같다) · (나') Pretendard + 고운돋움 인사말 — <html data-font="pretendard|pretendard-gowun">.
   [data-font=…] 단독 선택자는 /dev/fonts 의 section[data-font] 안에서도 세트가 바뀌게 하기 위한 것(SPEC 3.3·S6-4 —
   font-family 는 body 에서 한 번 계산돼 상속되므로 section 쪽은 s9.css 가 font-family: var(--font-sans) 를 다시 선언한다).
   (나') 인사말 한 줄(.t-greet)의 고운돋움은 base.css 의 [data-font="pretendard-gowun"] .t-greet 규칙. */
:root[data-font="pretendard"],
[data-font="pretendard"],
:root[data-font="pretendard-gowun"],
[data-font="pretendard-gowun"] {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-num: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}