/* ============================================================
   kfa (맛있는대구) — 디자인 토큰
   시안: https://claude.ai/artifact/22TfX4C8X3FT1oUQEyDSGF
   화이트 + 오렌지 포인트 + 남색 / Noto Sans KR
   ============================================================ */
:root {
  /* 컬러 */
  --color-bg:         #ffffff;
  --color-bg-alt:     #FFF5EF;
  --color-bg-soft:    #FAF8F6;
  --color-surface:    #ffffff;
  --color-text:       #1B2233;
  --color-text-muted: #5F5A55;
  --color-text-soft:  #8A847F;
  --color-accent:     #D9480F;   /* 버튼·링크 (흰 글자 대비 4.5:1) */
  --color-accent-hover: #B93C0B;
  --color-accent-deco: #E8501A;  /* 로고·장식 */
  --color-accent-soft: #FDE7DC;
  --color-navy:       #1B2233;
  --color-event:      #1E3A8A;
  --color-border:     #EEE8E3;
  --color-border-strong: #D9D3CE;
  --color-success:    #15803D;
  --color-danger:     #B42318;
  --color-warning:    #C88A2E;
  --color-price:      #1B2233;

  /* 타이포그래피 */
  --font-display: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  36px;
  --fs-3xl:  clamp(42px, 6vw, 72px);

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* 반경 (시안: 둥근 카드) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* 그림자 */
  --shadow-soft: 0 2px 8px rgba(27, 34, 51, 0.04), 0 8px 24px rgba(27, 34, 51, 0.06);
  --shadow-hover: 0 6px 16px rgba(27, 34, 51, 0.08), 0 16px 48px rgba(27, 34, 51, 0.10);

  /* 모션 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;

  /* 레이아웃 */
  --container:     1240px;
  --container-narrow: 960px;
  --header-h:      96px;
  --z-header:      100;
  --z-drawer:      200;
  --z-modal:       300;
}

/* ============================================================
   글로벌 리셋·베이스
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

h1 { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); font-weight: 900; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-accent); }

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

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* 스크린리더 전용 */
.sound_only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}