/* ===== NCafe 브랜드 테마 =====
 * newtil 컴포넌트 위에 얹는 "브랜드가 정한 값" 한 벌. 페이지는 이 파일을 링크만 하고 컴포넌트 변수를 직접 덮지 않는다.
 * 형식 설명: themes/README.md
 * 순서: design-tokens → materials → 이 파일 → 페이지 CSS(레이아웃만).
 *
 * ── 사용 규약 (마크업에서 고를 옵션) ─────────────────────────────────────
 *  버튼   기본  : <button class="m3-btn">                     (filled, 40px)
 *         보조  : <button class="m3-btn btn:outlined">
 *         위험  : <button class="m3-btn btn:outlined btn-color:danger">
 *         작게  : + btn-size:xs  (표 안·카드 안, 32px)
 *         크게  : + btn-size:md  (히어로·폼 제출, 44px)
 *         알약/각진 모서리 옵션(btn-shape)은 쓰지 않는다 — 모서리는 이 테마가 정한다.
 *  카드   <div class="m3-card card:outlined card-padding:self">   (elevated·filled 안 씀)
 *  입력   <div class="m3-text-field field:outlined field-label:top"> <label>…</label> <input> </div>
 *         레이블 없는 필터/검색: field-label:none.  select 도 같은 래퍼 안에.
 *  배지   <span class="m3-badge badge:inline badge-color:…">
 *  방     공개 페이지는 모두 <div class="m3-site"> (헤더 site-header · 본문 site-main · 푸터 site-footer). m3-top-app-bar 는 쓰지 않는다.
 *         왼쪽 필터/카테고리 사이드: site-body:aside (기본 폭).  오른쪽 주문 요약/합계 패널: site-body:aside-end + m3-site 에 site-aside:lg
 *  목록   상품 카드 격자: <ul class="m3-grid grid-cols:3"> 안에 <li class="m3-card card:outlined card-size:compact">
 *         썸네일은 card-media:landscape (4:3).  카드 액션 줄의 하트는 icon-btn:outlined icon-btn-size:sm, 담기는 btn-size:xs — 둘 다 32px.
 *  글     상세 설명·영양 정보·유의 사항 같은 덩어리는 <section class="m3-section section:divided">. 표는 m3-table(항목–값이면 table:key-value). 경로는 m3-breadcrumb.
 *  선택지 온도·사이즈·수령 방법처럼 라디오 묶음은 m3-form 안 <fieldset class="form-group form-group:inline"> (요약 패널처럼 좁으면 inline 없이).
 *  수량   <div class="m3-stepper"> (기본 34px). 상세 페이지의 큰 수량은 stepper-size:lg. 페이지가 −/＋ 를 아이콘 버튼으로 짜지 않는다.
 *  ─────────────────────────────────────────────────────────────────────── */

/* 브랜드 씨앗 — 램프(--_hue-green-*)와 on-primary 는 design-tokens 0.2.3 이 이 값에서 계산한다. 단계를 손으로 정하려면 --_hue-green-N 을 hex 로 덮는다 */
:root {
  --brand: #5c3d2e;   /* 갈색 */

  /* 따뜻한 회색 — 표면·글자·테두리 */
  --_hue-gray-50:  #faf9f7;
  --_hue-gray-100: #f7f5f2;
  --_hue-gray-200: #e6e1da;
  --_hue-gray-300: #d8d2cb;
  --_hue-gray-400: #b0a79e;
  --_hue-gray-500: #8a817a;
  --_hue-gray-600: #7b736a;
  --_hue-gray-700: #4a423c;
  --_hue-gray-800: #2e2824;
  --_hue-gray-900: #1f1b18;
  --_hue-gray-950: #14110f;

  --font-family-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── 버튼: 8px 모서리, 단계별 높이 40/32/44 ── */
.m3-btn {
  --btn-border-radius: var(--radius-3);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-gap: 0.375rem;
  --btn-height-sm: 2.5rem;  --btn-padding-sm: 0 1rem;     --btn-font-size-sm: 0.875rem;
  --btn-height-xs: 2rem;    --btn-padding-xs: 0 0.75rem;  --btn-font-size-xs: 0.8125rem;
  --btn-height-md: 2.75rem; --btn-padding-md: 0 1.25rem;  --btn-font-size-md: 0.9375rem;
  /* 옵션 없는 기본 = sm 단계 */
  --btn-height: var(--btn-height-sm); --btn-padding: var(--btn-padding-sm); --btn-font-size: var(--btn-font-size-sm);
}
.m3-btn.btn\:outlined { --btn-background-color: var(--color-surface); }
.m3-btn.btn\:outlined.btn-color\:danger { --btn-border-color: var(--color-danger-subtle); }

/* ── 카드: 16px 모서리, 24px 여백 ── */
.m3-card {
  --card-border-radius: 1rem;
  --card-padding-x: 1.5rem;
  --card-padding-y: 1.5rem;
}

/* ── 텍스트 필드(외부 레이블·테두리형): 40px, 8px 모서리, 카드와 같은 테두리색 ── */
.m3-text-field.field\:outlined.field-label\:top,
.m3-text-field.field\:outlined.field-label\:none {
  --field-border-radius: var(--radius-3);
  --field-input-box-border-radius: var(--radius-3);
  --field-background: var(--color-surface);
  --field-padding-top: 0;
  --field-outline-color: var(--color-border);
  --field-label-weight: var(--font-weight-semibold);
  --field-font-size: 0.875rem;
  --field-outline-color-focus: var(--color-primary);
}
/* 높이 40px — 외부 레이블 모드는 안쪽 상자가, 레이블 없는 모드는 컨테이너가 상자다 */
.m3-text-field.field\:outlined.field-label\:top  { --field-input-box-min-height: 2.5rem; }
.m3-text-field.field\:outlined.field-label\:none { --field-min-height: 2.5rem; }