/* 새판 화면 틀 모양 tokens — 색 · 글자 · 여백 토큰
   지금 판 도쿄 web/shell.css(국내판 tokens.css + app.css 틀 규칙을 뽑은 것)를 그대로 옮겨 600줄 아래로 나눴다(2026-10-14).
   손으로 고칠 때는 국내판 모양과 같은지 먼저 본다 · 새판에만 있는 것은 head-extra.css · parts.css */
/* ============================================================
 * 디자인 토큰 — 기획서가 못 박은 화면 규칙을 여기 한 곳에 고정한다.
 * 근거: 원본 6장(버튼 최소 48px), 부록3 58장(가독성), 63장(로고), 64장(글꼴 이원화)
 *
 * 이 값들을 화면 코드에서 직접 바꾸지 말 것.
 * 크기를 줄이고 싶으면 반드시 58장 기준을 먼저 확인할 것.
 * ============================================================ */

:root {
  /* ---------- 글꼴 이원화 (64장) ----------
   * "보여주는 글자는 고급스럽게, 눌러야 하는 글자는 명확하게"
   *   세리프  = 브랜드·화면 제목·축제명·대표 문구
   *   산세리프 = 버튼·안내문·목록·가격 (실제로 읽고 눌러야 하는 것)      */
  --tm-font-brand: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', serif;
  --tm-font-ui: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

  /* ---------- 글자 크기 (58장) ----------
   * 검토용 시안에서 8~10px까지 줄였던 것은 축소판일 뿐이다.
   * 실제 서비스는 아래 최소값을 지킨다. 축제장에는 고령 이용자가 특히 많다. */
  --tm-text-body: 15px;      /* 본문 최소 */
  --tm-text-button: 18px;    /* 버튼 안 글자 최소 */
  --tm-text-key: 20px;       /* 핵심 선택 버튼 최소 */
  --tm-text-sub: 15px;       /* 보조 설명도 15px 아래로 내리지 않는다 */
  --tm-text-title: 22px;
  --tm-text-price: 24px;

  /* ---------- 터치 영역 ---------- */
  --tm-tap-min: 48px;        /* 원본 6장: 버튼 최소 48 CSS px */
  --tm-button-h: 60px;       /* 58장: 핵심 버튼 높이 60px 안팎 */

  /* ---------- 여백 ----------
   * 글자를 키운 만큼 한 화면에 넣는 정보는 줄인다. 여백을 넉넉히 둔다. */
  --tm-gap-xs: 6px;
  --tm-gap-sm: 10px;
  --tm-gap: 16px;
  --tm-gap-lg: 14px;   /* 2026-09-17 촘촘하게: 24 → 14. 세로 간격 전용으로 쓴다 */
  --tm-gap-xl: 20px;   /* 2026-09-17 촘촘하게: 32 → 20 */
  --tm-radius: 14px;
  --tm-radius-sm: 10px;

  /* ---------- 색 ----------
   * 63장: 공식 로고는 금색 세리프 계열. 시즌마다 색만 바뀌고 구성은 동일하다.
   * 현재 = 겨울(금색). */
  --tm-gold: #B08628;
  --tm-gold-deep: #8A6818;
  --tm-gold-soft: #F5EEDC;
  --tm-gold-line: #E2D2A8;

  --tm-bg: #FAF8F4;
  --tm-surface: #FFFFFF;
  --tm-surface-alt: #F3F0E9;

  --tm-text: #1F1B16;        /* 고령 이용자 대비를 위해 충분히 진하게 */
  --tm-text-weak: #5C544A;
  --tm-text-faint: #8A8176;

  --tm-line: #DED8CC;
  --tm-line-strong: #C4BCAC;

  --tm-danger: #B3291E;      /* 노쇼 안내 배너 */
  --tm-danger-bg: #FDF1EF;
  --tm-danger-line: #E9C2BC;

  --tm-ok: #1F6B3B;
  --tm-ok-bg: #EDF6F0;

  --tm-tight: #9A6206;       /* "시간이 빠듯해요" */
  --tm-tight-bg: #FDF4E6;

  --tm-focus: #2B6CB0;

  --tm-shadow: 0 1px 3px rgba(31, 27, 22, .08), 0 6px 18px rgba(31, 27, 22, .05);
  --tm-shadow-bar: 0 -2px 12px rgba(31, 27, 22, .10);

  /* ---------- 레이아웃 ----------
   * 부록2 14장: 상단 고정 헤더 — 스크롤 콘텐츠 — 하단 고정 바의 3단 구조 */
  --tm-max-w: 480px;
  --tm-header-h: auto;
  /* 렌더할 때 실제 헤더 높이로 바뀐다. 단계 이동 줄이 헤더 아래 붙게 하려고 쓴다. */
  --tm-header-real: 0px;
  --tm-bottombar-h: 72px;
}

/* 화면을 아주 좁게 쓰는 기기에서도 글자 최소 기준은 유지한다.
   줄일 것은 글자가 아니라 여백이다. */
@media (max-width: 360px) {
  :root {
    --tm-gap: 13px;
    --tm-gap-lg: 12px;
    --tm-gap-xl: 16px;
  }
}

/* ============================================================
 * 로고 계절 색 (부록3 63장 · 12장 계절별 색상 변경 컨셉)
 *   "시즌마다 색상만 바뀌고 구성은 동일하게 유지된다."
 *   2026-09-17 사장님이 주신 네 계절 로고 그림에 맞췄다.
 *     봄 = 초록 · 새싹      여름 = 남색 · 물결
 *     가을 = 갈색 · 은행잎   겨울 = 금색 · 눈꽃
 *
 *   이 변수가 바꾸는 것: 모바일 테두리, 로고 틀·칸막이·3줄, 엠블럼, "타머넷" 글자, 양옆 장식.
 *   바꾸지 않는 것: 버튼·테두리의 --tm-gold (글자 대비 검사를 거친 값).
 *
 *   --tm-logo-rim   고리 테두리 금박 — 네 그림 모두 금색 테두리라 계절과 상관없이 같다
 *   --tm-scene-*    고리 안 풍경의 하늘·땅 색
 * ============================================================ */
:root {
  /* 기본 = 겨울 (63장에서 확정된 실제 적용 예시) */
  --tm-logo-light: #E2C477;
  --tm-logo-main:  #B08628;
  --tm-logo-deep:  #7A5A12;
  --tm-logo-bg:    #FFFDF7;
  --tm-logo-rim:   #C9A24A;
  --tm-scene-top:  #D6E2F1;
  --tm-scene-bottom: #F4F8FC;
}
:root[data-season="spring"] {   /* 봄 — 초록 숲 · 새싹 */
  --tm-logo-light: #7DBF5A;
  --tm-logo-main:  #2E7D32;
  --tm-logo-deep:  #1B5220;
  --tm-logo-bg:    #F7FBF3;
  --tm-scene-top:  #CFE8FF;
  --tm-scene-bottom: #7CC46A;
}
:root[data-season="summer"] {   /* 여름 — 남색 바다 · 물결 */
  --tm-logo-light: #5B8DEF;
  --tm-logo-main:  #1E4FA3;
  --tm-logo-deep:  #142B63;
  --tm-logo-bg:    #F4F8FE;
  --tm-scene-top:  #8FD0F5;
  --tm-scene-bottom: #1F8FCB;
}
:root[data-season="autumn"] {   /* 가을 — 갈색 들판 · 은행잎 */
  --tm-logo-light: #E0A43A;
  --tm-logo-main:  #8E4A16;
  --tm-logo-deep:  #5E2E0C;
  --tm-logo-bg:    #FFF9F0;
  --tm-scene-top:  #F9D68B;
  --tm-scene-bottom: #D9962E;
}
:root[data-season="winter"] {   /* 겨울 — 금색 설경 · 눈꽃 */
  --tm-logo-light: #E2C477;
  --tm-logo-main:  #B08628;
  --tm-logo-deep:  #7A5A12;
  --tm-logo-bg:    #FFFDF7;
  --tm-scene-top:  #D6E2F1;
  --tm-scene-bottom: #F4F8FC;
}

/* 업종 분위기 색 (2026-09-17 사장님 "식당·카페·호프 활성 화면 색을 각기 분위기에 맞게")
   식당 — 고추장·불 향의 따뜻한 붉은색 / 카페 — 에스프레소 갈색 /
   호프 — 맥주 호박색 / 미용실 — 차분한 자두색.
   흰 글자를 얹는 진한 색은 글자 대비 4.5 이상으로 골랐다 (고령 이용자 가독성) */
:root {
  --tm-cat-food: #B3321A;  --tm-cat-food-soft: #FDF1EC;
  --tm-cat-cafe: #6B4428;  --tm-cat-cafe-soft: #F6EFE7;
  --tm-cat-hof:  #8A5106;  --tm-cat-hof-soft:  #FCF4E2;
  --tm-cat-hair: #7B3F73;  --tm-cat-hair-soft: #F7EEF5;
}