/* components.css — 두 곳 이상에서 쓰는 부품 (상위 20-Ⅰ 기준)
   모양은 여기서만 정한다. 페이지 scoped 는 배치(margin·gap·정렬)만 얹는다 */

/* ── 알약 버튼 (220: 전부 알약형) ── */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;                      /* 220 주 버튼 높이·--tap 충족 */
  font-weight: 800; font-size: 14.5px; text-decoration: none;
  border-radius: var(--radius-pill); padding: 12px 24px;
  transition: transform .15s;
  border: 0; cursor: pointer; font-family: inherit;
}
@media (hover: hover) { .pill:hover { transform: translateY(-2px); } }
.pill.hot {
  background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 8px 26px rgba(245, 158, 11, .4);
}
.pill.ghost {
  background: rgba(251, 250, 246, .85); color: var(--green-700);
  border: 1.5px solid var(--line-ui);    /* 기능 테두리 3:1 (230 Ⅳ) */
  backdrop-filter: blur(4px);
}
.pill.glass {
  background: rgba(255, 255, 255, .14); color: #FFF8EC;
  border: 1.5px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(6px);
}

/* ── 칩 (220: 필터. aria-pressed 병행) ── */
.chip {
  flex: none; min-height: var(--tap);
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  padding: 0 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-ui); background: var(--panel); color: var(--ink-soft);
  box-shadow: 0 1px 6px rgba(20, 33, 26, .08);
}
.chip[aria-pressed="true"] { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.chip.ev[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.chip.food[aria-pressed="true"] { background: #A16207; border-color: #A16207; color: #fff; }

/* ── 지도 상시 라벨 (앱·깃발 지도 공용 — 220 「지도 위 요소」) ── */
.lbl { display: flex; align-items: center; gap: 4px; transform: translate(-6px, -6px); cursor: pointer; }
.lbl i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); flex: none;
  display: flex; align-items: center; justify-content: center; }
.lbl i svg { width: 10px; height: 10px; display: block; }
.lbl span { font-size: 12px; font-weight: 700; color: #14211A; line-height: 1;
  background: rgba(255, 255, 255, .92); padding: 3px 7px; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbl.t12 i { background: #1F7A4D; } .lbl.t14 i { background: #2456C9; }
.lbl.t28 i { background: #0D9488; } .lbl.t39 i { background: #EA580C; }
.lbl.t38 i { background: #9333EA; } .lbl.t25 i, .lbl.t32 i, .lbl.t15 i { background: #64748B; }
.lbl.cafe i { background: #A16207; }
.lbl.fest i { background: var(--flag-500); }

/* ── 바텀 시트 (앱 목록·상세 공용 — 220 오버레이 시트) ── */
.sheet-grab { flex: none; padding: 10px 16px 6px; cursor: grab; touch-action: none; }
.sheet-grab::before { content: ""; display: block; width: 36px; height: 4px;
  border-radius: 2px; background: var(--line); margin: 0 auto 8px; }

/* ── 배지 (실내/실외/행사 — 앱 목록·상세 공용) ── */
.badge { flex: none; font-size: 10.5px; font-weight: 800;
  border-radius: var(--radius-pill); padding: 3px 8px; }
.badge.in { background: #E3EBFA; color: #2456C9; }
.badge.out { background: var(--green-100); color: var(--green-600); }
.badge.ev { background: #FDEBC8; color: #8A5A00; }

/* ── 검색 필드 (F-11 — 20-Ⅳ 입력 규격: 16px+, 높이 48, 라벨 필수) ── */
.search-field {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 6px 0 12px;
  border: 1.5px solid var(--line-ui); border-radius: var(--radius-pill);
  background: var(--bg);
}
.search-field:focus-within { border-color: var(--green-600); }
.search-field svg { width: 18px; height: 18px; color: var(--ink-soft); flex: none; }
.search-field input {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit;
  font-size: 16px; color: var(--ink); outline: none; height: 44px;
}
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field button {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--line); color: var(--ink); font-size: 14px; cursor: pointer;
}

/* ── 테마 버튼 (F-11 — 다중 선택, aria-pressed) ── */
.theme-btn {
  min-height: var(--tap); padding: 0 10px;
  border: 1.5px solid var(--line-ui); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-btn[aria-pressed="true"] {
  background: var(--green-100); border-color: var(--green-600); color: var(--green-700);
}

/* grab 터치 목표 보장 */
.sheet-grab { min-height: 28px; width: 100%; border: 0; background: none; cursor: grab; }