/* 핵심 컴포넌트 — 프로토타입 클래스를 토큰 기반으로 승격(docs/09 §7).
   화면별 세부/View Cell 컴포넌트화는 M2에서 확장. 인라인 style 금지. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--c-page-bg);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* 모바일 앱 컨테이너 */
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: #fff; }

/* 헤더 */
.header {
  background: var(--c-header-bg);
  color: var(--c-header-text);
  padding: var(--s-lg) var(--s-xl);
  display: flex; align-items: center; gap: var(--s-md);
}
.header .logo { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.header .title { font-size: 17px; font-weight: 600; }
.header .right { margin-left: auto; font-size: var(--fs-body); background: #fff; color: var(--c-dark); padding: 6px 14px; border-radius: var(--r-pill); }

/* 카드 */
.card { background: #fff; border-radius: var(--r-2xl); margin: var(--s-lg); padding: var(--s-2xl); box-shadow: var(--sh-elev); }
.product-card { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: var(--r-xl); margin: var(--s-md) var(--s-lg); padding: var(--s-xl); box-shadow: var(--sh-card); }
.product-card.highlight { border: 2px solid var(--c-primary); background: #fff8f0; }

/* 버튼 */
.btn { display: block; width: 100%; padding: var(--s-lg); border: none; border-radius: var(--r-lg); font-size: var(--fs-btn); font-weight: 700; text-align: center; cursor: pointer; text-decoration: none; }
.btn-orange  { background: var(--c-primary); color: #fff; }
.btn-green   { background: var(--c-success); color: #fff; }
.btn-pink    { background: var(--c-action-pink); color: #fff; }
.btn-dark    { background: var(--c-dark); color: #fff; }
.btn-outline { background: #fff; border: 2px solid var(--c-primary); color: var(--c-primary); }
.btn-kakao   { background: var(--c-kakao); color: #191600; }
.btn-naver   { background: var(--c-naver); color: #fff; }

/* 배지/상태 */
.free-badge { display: inline-block; background: var(--c-success); color: #fff; font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); }
.station-result { text-align: center; padding: var(--s-md); margin: var(--s-sm) var(--s-lg); border-radius: var(--r-md); font-size: 15px; font-weight: 600; }
.station-result.found { background: #e8f5e9; color: #2e7d32; }

/* 폼 */
.form-group { margin: var(--s-lg); }
.form-group label { display: block; font-size: 12px; color: #777; margin-bottom: 6px; }
.form-group input, .form-group select { width: 100%; padding: var(--s-md); border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-body); outline: none; }
.form-group .hint { font-size: var(--fs-xs); color: var(--c-hint); margin-top: 4px; }

/* 유틸 */
.muted { color: var(--c-muted); font-size: var(--fs-sm); }
.section { margin: var(--s-lg); }
.footer { padding: var(--s-xl) var(--s-lg); text-align: center; font-size: 10px; color: var(--c-muted); line-height: 1.8; background: #f9f9f9; }