/* ==========================================================================
   한메뉴 (HanMenu) - Design Tokens
   AI Studio 전달용 디자인 토큰 파일 (Section 3 명세 준수)
   ========================================================================== */

/* 웹폰트 불러오기: Pretendard (한글·영문·베트남어) & Noto Sans SC (중국어 간체) */
@import url("fonts/fonts.css");

:root {
  /* 1. 글꼴 토큰 (한글·베트남어 성조 ạ ư ế · 중국어 간체 · 우즈베크어 ' 모두 지원) */
  --font: "Pretendard Variable", "Pretendard", "Noto Sans SC Variable", "Noto Sans SC", "Noto Sans", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-display: "Pretendard Variable", "Pretendard", "Noto Sans SC Variable", "Noto Sans SC", "Noto Sans", sans-serif;

  /* 2. 글자 크기 단계 */
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-16: 16px; /* 어르신 사장님 및 모바일 가독성을 위한 최소 본문 크기 */
  --fs-19: 19px;
  --fs-24: 24px;
  --fs-34: 34px;
  --fs-48: 48px;

  /* 3. 줄간격 단계 */
  --lh: 1.6;        /* 본문 기본 줄간격 */
  --lh-tight: 1.25; /* 제목 줄간격 (1.2 ~ 1.3) */

  /* 4. 색상표 (음식·식당의 따뜻함과 높은 명도 대비 확보) */
  --red: #8B1E1E;         /* 주색: 따뜻하고 깊은 식욕 자극 버건디 레드 */
  --red-hover: #731717;   /* 주색 호버 */
  --red-light: #FDF3F3;   /* 주색 배경 틴트 */
  --gold: #E8B45A;        /* 보조색: 가격 배지, 강조 골드 */
  --gold-hover: #D69F40;
  --gold-light: #FEF9EE;
  --ink: #1C1816;         /* 글자색 (배경 대비 4.5:1 이상 충족) */
  --muted: #6B635C;       /* 흐린 글자색 / 설명 보조 텍스트 */
  --bg: #F7F1E7;          /* 전체 배경색: 따뜻한 미색 베이지 */
  --card: #FFFFFF;        /* 카드 및 팝업 배경색 */
  --line: #E6DED3;        /* 경계선 및 디바이더 */

  /* 상태별 보조 색상 (상태 클래스 전용) */
  --st-ready-bg: #FEF3C7;
  --st-ready-text: #92400E;
  --st-review-bg: #E0E7FF;
  --st-review-text: #3730A3;
  --st-failed-bg: #FEE2E2;
  --st-failed-text: #991B1B;
  --st-done-bg: #DCFCE7;
  --st-done-text: #166534;

  /* 5. 형태 및 모서리 둥글기 */
  --radius: 14px;         /* 기본 라운딩 (12~18px 권장 범위) */
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* 6. 간격 단계 (화면 양쪽 여백 최소 16px) */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-40: 40px;
  --sp-56: 56px;

  /* 7. 터치 및 인터랙션 기준 (손가락으로 누르는 모든 버튼/입력창) */
  --tap: 48px;

  /* 8. 그림자 */
  --shadow-sm: 0 1px 3px rgba(28, 24, 22, 0.05);
  --shadow-md: 0 4px 12px rgba(28, 24, 22, 0.08);
  --shadow-lg: 0 10px 25px rgba(28, 24, 22, 0.12);
  --shadow-pop: 0 20px 40px rgba(28, 24, 22, 0.18);
}

/* ==========================================================================
   글로벌 리셋 & 베이스 스타일 (순수 CSS)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

html {
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: var(--lh);
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea, label, div, li, td, th {
  word-break: break-word;
  overflow-wrap: anywhere;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  max-width: 100%;
}

/* ==========================================================================
   반드시 지켜야 할 프로그램 상태 클래스 (Section 2 - 4번 규칙)
   .on, .hidden, .st.ready, .st.review, .st.failed, .toast.on
   ========================================================================== */

/* 1. .hidden (숨김 상태) */
.hidden {
  display: none !important;
}

/* 2. .on (선택/활성화 상태) */
/* 탭 버튼 선택 시 */
[data-tab].on {
  color: var(--red);
  border-bottom: 3px solid var(--red);
  font-weight: 700;
  background-color: rgba(139, 30, 30, 0.04);
}

/* 만들기 탭 메뉴 선택 카드 (.pick.on) */
.pick.on {
  border: 2px solid var(--red) !important;
  background-color: var(--red-light) !important;
  box-shadow: 0 0 0 1px var(--red);
}
.pick.on .pick-check {
  background-color: var(--red) !important;
  color: #FFFFFF !important;
  border-color: var(--red) !important;
}

/* 3. 진행 상태 배지 (.st, .st.ready, .st.review, .st.failed, .st.done) */
.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  background-color: #F3F4F6;
  color: #4B5563;
}

/* 대기 */
.st.ready {
  background-color: var(--st-ready-bg);
  color: var(--st-ready-text);
  border: 1px solid #FDE68A;
}

/* 만드는 중 (기본 진행 상태) */
.st.making {
  background-color: #FEF3C7;
  color: #B45309;
  border: 1px solid #FCD34D;
}

/* 운영자 확인 중 */
.st.review {
  background-color: var(--st-review-bg);
  color: var(--st-review-text);
  border: 1px solid #C7D2FE;
}

/* 실패 */
.st.failed {
  background-color: var(--st-failed-bg);
  color: var(--st-failed-text);
  border: 1px solid #FECACA;
}

/* 완료 */
.st.done {
  background-color: var(--st-done-bg);
  color: var(--st-done-text);
  border: 1px solid #BBF7D0;
}

/* 4. 알림 표시 토스트 (.toast.on) */
#toast, .toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: rgba(28, 24, 22, 0.95);
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-15);
  font-weight: 600;
  box-shadow: var(--shadow-pop);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  text-align: center;
}

#toast.on, .toast.on {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   터치 타겟 및 폼 요소 공통 (베트남어/우즈베크어 줄바꿈 깨짐 방지 & 터치 48px)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background-color: var(--red);
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(139, 30, 30, 0.25);
}
.btn-primary:hover {
  background-color: var(--red-hover);
}

.btn-secondary {
  background-color: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover {
  background-color: #FAF6F0;
  border-color: #D6CBC0;
}

.btn-gold {
  background-color: var(--gold);
  color: #382402;
  box-shadow: 0 4px 10px rgba(232, 180, 90, 0.3);
}
.btn-gold:hover {
  background-color: var(--gold-hover);
}

.btn-danger {
  background-color: #FFFFFF;
  color: #DC2626;
  border: 1px solid #FCA5A5;
}
.btn-danger:hover {
  background-color: #FEF2F2;
}

.btn[disabled], .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 폼 인풋 기본 스타일 */
.input, input[type="text"], input[type="tel"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background-color: #FFFFFF;
  color: var(--ink);
  font-size: var(--fs-16);
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus, input[type="password"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(139, 30, 30, 0.15);
}

/* 사진 및 영상 자리 표시용 플레이스홀더 (회색 상자) */
.media-placeholder {
  background: linear-gradient(135deg, #ECE5DC 0%, #DFD7CD 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px dashed #D1C6BA;
}

/* 한국어는 단어 중간에서 줄이 바뀌지 않게(예: "만/들어요" 방지). 중국어에는 적용하지 않음 */
html:lang(ko) :is(h1, h2, h3, h4, p, span, a, button, label, div, li, summary, small, b) {
  word-break: keep-all;
}