/* 달봉감자 공통 토큰 — 실제 간판 색을 그대로 쓴다 */
:root {
  --yellow: #ffd400;
  --yellow-dk: #e8c000;
  --orange: #f05a28;
  --red: #e54d2e;
  --brick: #b6472a;
  --cream: #fdf9ea;      /* 간판 배경과 같은 크림색 — 태블릿 첫 화면 */
  --green: #2e9e4f;
  --black: #111111;
  --white: #ffffff;

  --ink: #1a1a1a;
  --ink-2: #4d4d4d;
  --ink-3: #8c8c8c;
  --line: #e3e3e3;
  --bg: #f4f4f4;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .28);

  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  border-radius: var(--r-md);
  transition: filter .12s ease, transform .06s ease;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary { background: var(--yellow); color: var(--black); }
.btn-orange  { background: var(--orange); color: var(--white); }
.btn-danger  { background: var(--red);    color: var(--white); }
.btn-green   { background: var(--green);  color: var(--white); }
.btn-dark    { background: var(--black);  color: var(--white); }
.btn-ghost   { background: var(--white);  color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }

.btn-xl { height: 78px; font-size: 26px; padding: 0 34px; }
.btn-lg { height: 62px; font-size: 21px; padding: 0 26px; }
.btn-md { height: 50px; font-size: 17px; padding: 0 20px; }
.btn-sm { height: 38px; font-size: 14px; padding: 0 14px; border-radius: var(--r-sm); }

/* 달봉감자 간판 마크 */
.mark {
  background: var(--yellow);
  color: var(--black);
  border: 3px solid var(--black);
  border-radius: 7px;
  padding: 4px 9px;
  font-weight: 900;
  font-size: 17px;
  line-height: 1.02;
  text-align: center;
  white-space: pre-line;
  flex: none;
}