/* 쩝쩝대학 디자인 토큰 — 1안 시안 확정값. 임의 변경 금지.
   그라디언트 / 블러 / 반투명 오버레이는 사용하지 않는다. */

:root {
  --paper: #FAF7F2;
  --ink: #17150F;
  --line: #17150F;
  --ketchup: #E8442E;
  --yolk: #FFC93C;
  --lettuce: #3E9B4F;   /* 카페학부 */
  --soda: #3D7BD9;      /* 편의점학부 */
  --grape: #9B59B6;     /* 술자리학부 */
  --muted: #8A8577;
  --canvas: #E9E4DA;    /* 데스크톱 여백 */
  --white: #FFFFFF;

  --radius-card: 16px;
  --radius-field: 14px;
  --border: 2px solid var(--ink);
  --border-thin: 1.5px solid var(--ink);
  --dash: 1.5px dashed var(--ink);
  --shadow: 3px 3px 0 var(--ink);
  --shadow-pressed: 1px 1px 0 var(--ink);

  --tap: 44px;          /* 최소 터치 타깃 */
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Black Han Sans', var(--font-body);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--canvas);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

/* 모바일 우선. 데스크톱은 중앙 정렬 대응만 한다. */
.app {
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--paper);
  border-left: var(--border);
  border-right: var(--border);
}

/* 하드 섀도 공통 형태 */
.hard {
  border: var(--border);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow);
  transition: transform .08s, box-shadow .08s;
}
.hard:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-pressed);
}

/* 접근성: 키보드 포커스 링을 항상 보이게 한다. */
:focus-visible {
  outline: 3px solid var(--soda);
  outline-offset: 2px;
}

button, a { min-height: var(--tap); }

.divider { border: 0; border-top: var(--dash); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}