/* ==========================================================================
   지리산권 ESG 가치여행 — components.css
   이용자 화면과 관리자 화면이 함께 쓰는 컴포넌트.
   목차
   01 버튼 c-btn · 아이콘 버튼 c-iconbtn · 스피너 c-spinner
   02 칩 c-chip · 태그 c-tag · 배지 c-badge · 숫자 배지 c-count
   03 아이콘 타일 c-tile · 썸네일 c-thumb · 아바타 c-avatar
   04 카드 c-card · 섹션 머리 c-sectionhead · 구분 c-divider
   05 안내 상자 c-callout · 알림 줄 c-banner
   06 목록 c-list · 메뉴 목록 c-menu · 정의 목록 c-kv · 타임라인 c-timeline
   07 입력 c-field c-input c-select c-textarea c-search · 체크 c-check c-radio c-switch · 선택 카드 c-choice
   08 단계 c-steps · 세그먼트 c-segmented · 탭 c-tabs
   09 미터 c-meter · 통계 c-stats
   10 모달 c-modal · 시트 c-sheet · 토스트 c-toast
   11 빈 상태 c-empty · 스켈레톤 c-skeleton · 아코디언 c-accordion · 읽는 글 c-prose · 표 감싸개 c-tablewrap
   12 지도 c-map · 핀 c-pin · 인증 구역 c-geofence · 내 위치 c-me · 광역 개략도 c-mapstage
   13 브랜드 c-brand · 영수증 견본 c-receipt
   ========================================================================== */

/* 01 버튼 ---------------------------------------------------------------- */
.c-btn {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-control-md); padding: 0.5rem 1rem;
  border: 1.5px solid var(--btn-bd); border-radius: var(--radius-md);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap;
  -webkit-user-select: none; user-select: none;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.c-btn:hover { --btn-bg: var(--color-primary-hover); }
.c-btn:active { --btn-bg: var(--color-primary-active); transform: scale(0.98); }
.c-btn .ic { font-size: 1.25rem; }

/* 종류 */
.c-btn--secondary { --btn-bg: var(--color-primary-subtle); --btn-fg: var(--color-primary); }
.c-btn--secondary:hover { --btn-bg: var(--blue-200); }
.c-btn--secondary:active { --btn-bg: var(--blue-300); }
.c-btn--outline { --btn-bg: var(--color-surface); --btn-fg: var(--color-primary); --btn-bd: var(--color-primary); }
.c-btn--outline:hover { --btn-bg: var(--color-primary-subtler); }
.c-btn--outline:active { --btn-bg: var(--color-primary-subtle); }
.c-btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-primary); }
.c-btn--ghost:hover { --btn-bg: var(--color-primary-subtler); }
.c-btn--ghost:active { --btn-bg: var(--color-primary-subtle); }
.c-btn--neutral { --btn-bg: var(--color-surface); --btn-fg: var(--color-text); --btn-bd: var(--gray-300); }
.c-btn--neutral:hover { --btn-bg: var(--color-surface-subtle); }
.c-btn--neutral:active { --btn-bg: var(--color-surface-sunken); }
.c-btn--danger { --btn-bg: var(--color-danger); --btn-fg: var(--color-text-inverse); }
.c-btn--danger:hover, .c-btn--danger:active { --btn-bg: var(--red-700); }
.c-btn--danger-outline { --btn-bg: var(--color-surface); --btn-fg: var(--color-danger-text); --btn-bd: var(--red-500); }
.c-btn--danger-outline:hover, .c-btn--danger-outline:active { --btn-bg: var(--color-danger-bg-subtle); }
.c-btn--success { --btn-bg: var(--color-success); --btn-fg: var(--color-text-inverse); }
.c-btn--success:hover, .c-btn--success:active { --btn-bg: var(--green-700); }
/* 어두운 채움(쿠폰·앱바) 위 */
.c-btn--inverse { --btn-bg: var(--color-surface); --btn-fg: var(--color-primary); }
.c-btn--inverse:hover, .c-btn--inverse:active { --btn-bg: var(--blue-100); }

/* 크기 */
.c-btn--lg { min-height: var(--size-control-lg); padding: 0.75rem 1.25rem; font-size: 1.0625rem; }
.c-btn--sm { min-height: var(--size-control-sm); padding: 0.375rem 0.75rem; font-size: 0.9375rem; border-radius: var(--radius-sm); }
.c-btn--xs { min-height: var(--size-control-xs); padding: 0.25rem 0.625rem; font-size: 0.8125rem; border-radius: var(--radius-sm); gap: var(--space-1); }
.c-btn--sm .ic, .c-btn--xs .ic { font-size: 1rem; }
.c-btn--block { display: flex; width: 100%; }

/* 상태 */
.c-btn:disabled, .c-btn[aria-disabled="true"] {
  --btn-bg: var(--gray-200); --btn-fg: var(--gray-600); --btn-bd: transparent; transform: none;
}
.c-btn.is-loading, .c-btn[aria-busy="true"] { position: relative; pointer-events: none; }
.c-btn.is-loading > *, .c-btn[aria-busy="true"] > * { opacity: 0; }   /* 글자는 보이지 않게만 하고 이름은 남깁니다(화면낭독기가 읽음) */
.c-btn.is-loading::after, .c-btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: c-spin 0.8s linear infinite;
}

/* 아이콘 버튼: 반드시 aria-label */
.c-iconbtn {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--size-tap); height: var(--size-tap); border-radius: var(--radius-full); color: inherit;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.c-iconbtn:hover { background: rgba(15, 27, 48, 0.06); }
.c-iconbtn:active { background: rgba(15, 27, 48, 0.12); }
.is-on-dark .c-iconbtn:hover, .c-iconbtn.is-on-dark:hover { background: rgba(255, 255, 255, 0.16); }
.c-iconbtn--outline { border: 1px solid var(--color-border); background: var(--color-surface); }
.c-iconbtn--soft { background: var(--color-surface-sunken); }
.c-iconbtn--frost { background: rgba(6, 38, 74, 0.44); color: var(--color-text-inverse); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.c-iconbtn--frost:hover { background: rgba(6, 38, 74, 0.6); }
.c-iconbtn--sm { width: 2.25rem; height: 2.25rem; }
.c-iconbtn--sm .ic { font-size: 1.125rem; }
.c-iconbtn__dot {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--color-danger); box-shadow: 0 0 0 2px var(--color-surface);
}
.c-iconbtn--frost .c-iconbtn__dot { box-shadow: 0 0 0 2px var(--blue-900); }

.c-spinner {
  display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 3px solid var(--blue-200); border-top-color: var(--color-primary); animation: c-spin 0.8s linear infinite;
}
.c-spinner--lg { width: 2.5rem; height: 2.5rem; border-width: 4px; }
@keyframes c-spin { to { transform: rotate(360deg); } }

/* 02 칩·태그·배지 ---------------------------------------------------------- */
/* 칩: 필터 선택. <button class="c-chip" aria-pressed="true|false"> */
.c-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: var(--size-control-sm); padding: 0 0.875rem;
  border: 1px solid var(--gray-300); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: 0.9375rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.c-chip:hover { background: var(--color-surface-subtle); }
.c-chip .ic { font-size: 1.125rem; }
.c-chip[aria-pressed="true"], .c-chip[aria-selected="true"], .c-chip[aria-current="true"] {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary);
}
.c-chip--sm { min-height: 2rem; padding: 0 0.625rem; font-size: 0.8125rem; }
.c-chip--nature:not([aria-pressed="true"]) .ic { color: var(--color-nature); }
.c-chip--history:not([aria-pressed="true"]) .ic { color: var(--color-history); }
.c-chip--activity:not([aria-pressed="true"]) .ic { color: var(--color-activity); }

/* 태그: 분류 표시(읽기 전용). 거점 유형은 항상 아이콘과 함께 */
.c-tag {
  display: inline-flex; align-items: center; gap: 0.25rem; flex: none;
  min-height: 1.625rem; padding: 0 0.625rem; border-radius: var(--radius-full);
  background: var(--color-surface-sunken); color: var(--color-text-secondary);
  font-size: 0.8125rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.c-tag .ic { font-size: 0.875rem; }
.c-tag--nature { background: var(--color-nature-bg); color: var(--color-nature-text); }
.c-tag--history { background: var(--color-history-bg); color: var(--color-history-text); }
.c-tag--activity { background: var(--color-activity-bg); color: var(--color-activity-text); }
.c-tag--info { background: var(--blue-200); color: var(--blue-700); }
.c-tag--outline { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--gray-300); }
.c-tag--on-dark { background: rgba(255, 255, 255, 0.16); color: var(--color-text-inverse); }
.c-tag--lg { min-height: 2rem; padding: 0 0.75rem; font-size: 0.9375rem; }

/* 배지: 처리 상태. 색 + 아이콘 + 글자를 항상 함께 */
.c-badge {
  display: inline-flex; align-items: center; gap: 0.25rem; flex: none;
  min-height: 1.5rem; padding: 0 0.5rem; border-radius: var(--radius-xs);
  background: var(--color-surface-sunken); color: var(--color-text-secondary);
  font-size: 0.8125rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
.c-badge .ic { font-size: 0.875rem; }
.c-badge--success { background: var(--color-success-bg); color: var(--color-success-text); }
.c-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.c-badge--danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.c-badge--info { background: var(--color-info-bg); color: var(--color-info-text); }
.c-badge--live { background: var(--color-success-bg); color: var(--color-success-text); border-radius: var(--radius-full); padding: 0 0.75rem; min-height: 1.75rem; }
.c-badge--live::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-success); }
.c-badge--lg { min-height: 1.75rem; padding: 0 0.625rem; font-size: 0.9375rem; border-radius: var(--radius-sm); }

.c-count {
  display: inline-grid; place-items: center; flex: none; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem;
  border-radius: var(--radius-full); background: var(--color-danger); color: var(--color-text-inverse);
  font-size: 0.8125rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.c-count--neutral { background: var(--color-surface-sunken); color: var(--color-text-secondary); }

/* 03 아이콘 타일·썸네일·아바타 ------------------------------------------------- */
.c-tile {
  display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem;
  border-radius: var(--radius-md); background: var(--color-surface-sunken); color: var(--color-text-secondary);
}
.c-tile--sm { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); }
.c-tile--sm .ic { font-size: 1.25rem; }
.c-tile--lg { width: 3.5rem; height: 3.5rem; border-radius: 14px; }
.c-tile--lg .ic { font-size: 1.75rem; }
.c-tile--xl { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-xl); }
.c-tile--xl .ic { font-size: 2.25rem; }
.c-tile--round { border-radius: 50%; }
.c-tile--visit { background: var(--color-visit-bg); color: var(--color-visit); }
.c-tile--action, .c-tile--nature, .c-tile--success { background: var(--color-action-bg); color: var(--color-action); }
.c-tile--spend, .c-tile--history { background: var(--color-spend-bg); color: var(--color-spend); }
.c-tile--activity { background: var(--color-activity-bg); color: var(--color-activity); }
.c-tile--warning { background: var(--color-warning-bg); color: var(--amber-700); }
.c-tile--danger { background: var(--color-danger-bg); color: var(--red-500); }
.c-tile--primary { background: var(--color-primary); color: var(--color-on-primary); }
.c-tile--solid-success { background: var(--color-success); color: var(--color-text-inverse); }

.c-thumb {
  position: relative; display: block; flex: none; width: 6rem; aspect-ratio: 4 / 3;
  border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-sunken);
}
.c-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.c-thumb--sq { aspect-ratio: 1; }
.c-thumb--sm { width: 4rem; }
.c-thumb--lg { width: 7.5rem; }
.c-thumb--wide { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.c-thumb--hero { width: 100%; aspect-ratio: 3 / 2; border-radius: 0; }
.c-thumb__tag { position: absolute; left: 0.75rem; top: 0.75rem; }

.c-avatar {
  display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--color-primary-subtle); color: var(--color-primary); font-size: 0.9375rem; font-weight: 700;
}
.c-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: 1.1875rem; }
.c-avatar--on-dark { background: var(--blue-500); color: var(--color-text-inverse); }
.c-avatar--danger { background: var(--color-danger-bg); color: var(--color-danger); }

/* 04 카드·섹션 ------------------------------------------------------------- */
.c-card {
  display: block; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: var(--space-4); min-width: 0;
}
.c-card--raised { border-color: transparent; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.c-card--flat { box-shadow: none; }
.c-card--flush { padding: 0; overflow: hidden; }
.c-card--subtle { background: var(--color-surface-subtle); border-color: transparent; box-shadow: none; }
.c-card--success { background: var(--green-50); border-color: var(--color-success-border); box-shadow: none; }
.c-card--warm { background: var(--orange-50); border-color: var(--orange-200); box-shadow: none; }
.c-card--info { background: var(--blue-50); border-color: var(--blue-200); box-shadow: none; }
a.c-card, button.c-card, .c-card--link { transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
a.c-card:hover, button.c-card:hover { border-color: var(--blue-300); }
a.c-card:active, button.c-card:active { transform: scale(0.99); }
.c-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.c-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.45; }
.c-card__title--lg { font-size: 1.1875rem; line-height: 1.4; letter-spacing: -0.01em; }
.c-card__foot { margin-top: var(--space-4); }

.l-section { padding-inline: var(--size-gutter); margin-top: var(--space-6); }
.l-section--tight { margin-top: var(--space-4); }
.l-section--flush { padding-inline: 0; }
.c-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); min-height: 2rem; }
.c-sectionhead__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.c-sectionhead__link {
  display: inline-flex; align-items: center; gap: 0.125rem; flex: none; min-height: var(--size-tap); margin-block: -0.5rem;
  color: var(--color-text-tertiary); font-size: 0.9375rem; font-weight: 600;
}
.c-sectionhead__link .ic { font-size: 1.125rem; }
.c-sectionhead__link:hover { color: var(--color-primary); }
.c-sectionhead__meta { color: var(--color-text-tertiary); font-size: 0.9375rem; font-weight: 600; }

.c-divider { display: block; height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-border); }
.c-divider--block { height: 0.5rem; margin: var(--space-6) 0 0; background: var(--color-surface-sunken); }

/* 05 안내 상자·알림 줄 -------------------------------------------------------- */
.c-callout {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: 0.875rem 1rem;
  border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-info-text);
  font-size: 0.9375rem; line-height: 1.5;
}
.c-callout > .ic { flex: none; font-size: 1.25rem; margin-top: 0.0625rem; }
.c-callout__body { flex: 1; min-width: 0; }
.c-callout__title { font-weight: 700; }
.c-callout__title + p { margin-top: 0.125rem; }
.c-callout p { color: var(--color-text-secondary); }
.c-callout--strong { align-items: center; font-weight: 700; }
.c-callout--success { background: var(--green-50); color: var(--color-success-text); }
.c-callout--warning { background: var(--amber-50); color: var(--color-warning-text); }
.c-callout--danger { background: var(--color-danger-bg-subtle); color: var(--color-danger-text); }
.c-callout--neutral { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.c-callout--neutral > .ic { color: var(--color-text-tertiary); }
.c-callout--warm { background: var(--orange-50); color: var(--color-accent-text); }
.c-callout--bordered { border: 1px solid var(--color-info-border); }
.c-callout--drop { border-style: dashed; cursor: pointer; }   /* 파일 올리는 자리(label로 씀) */
.c-callout--success.c-callout--bordered { border-color: var(--color-success-border); }
.c-callout--warning.c-callout--bordered { border-color: var(--color-warning-border); }
.c-callout--danger.c-callout--bordered { border-color: var(--color-danger-border); }
a.c-callout:hover { background: var(--blue-200); }

/* 화면 최상단 시스템 알림(오프라인, 점검 예고) */
.c-banner {
  display: flex; align-items: center; gap: var(--space-2); padding: 0.625rem var(--size-gutter);
  background: var(--amber-50); color: var(--color-warning-text); border-bottom: 1px solid var(--color-warning-border);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.4;
}
.c-banner .ic { flex: none; font-size: 1.25rem; }
.c-banner--info { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border); }
.c-banner--danger { background: var(--color-danger-bg-subtle); color: var(--color-danger-text); border-color: var(--color-danger-border); }

/* 06 목록 ------------------------------------------------------------------ */
.c-list { display: flex; flex-direction: column; gap: var(--space-3); }
.c-list--tight { gap: var(--space-2); }
.c-list--divided { gap: 0; }
.c-list--divided > * + * { border-top: 1px solid var(--color-border); }

/* 메뉴 목록(마이, 설정): 한 줄 = 터치 영역 56px 이상 */
.c-menu { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.c-menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 3.5rem; padding: 0.75rem var(--space-4);
  color: var(--color-text); font-size: 1.0625rem; font-weight: 600; line-height: 1.4;
}
.c-menu__item + .c-menu__item, .c-menu li + li > .c-menu__item { border-top: 1px solid var(--color-border); }
a.c-menu__item:hover, button.c-menu__item:hover { background: var(--color-surface-subtle); }
.c-menu__item > .ic:first-child { color: var(--color-text-tertiary); }
.c-menu__label { flex: 1; min-width: 0; }
.c-menu__value { color: var(--color-text-tertiary); font-size: 0.9375rem; font-weight: 400; }
.c-menu__item > .ic-chevron-right { color: var(--gray-500); font-size: 1.25rem; }

/* 정의 목록: 항목-값 */
.c-kv { display: grid; grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr); gap: 0.625rem var(--space-4); font-size: 0.9375rem; line-height: 1.5; }
.c-kv dt { color: var(--color-text-tertiary); }
.c-kv dd { color: var(--color-text); font-weight: 600; }
.c-kv--end dd { text-align: right; }
/* 줄 구분형(자동 추출 결과 등) */
.c-kvrows { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.c-kvrows__row { display: flex; align-items: center; gap: var(--space-3); min-height: 3.5rem; padding: 0.5rem var(--space-4); }
.c-kvrows__row + .c-kvrows__row { border-top: 1px solid var(--color-border); }
.c-kvrows__key { flex: none; width: 4.75rem; color: var(--color-text-tertiary); font-size: 0.9375rem; }
.c-kvrows__val { flex: 1; min-width: 0; font-size: 1.0625rem; font-weight: 700; }
.c-kvrows__val--em { font-size: 1.375rem; font-weight: 800; color: var(--color-primary); letter-spacing: -0.01em; }

/* 타임라인: 처리 이력 */
.c-timeline { display: flex; flex-direction: column; }
.c-timeline__item { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); font-size: 0.9375rem; line-height: 1.5; }
.c-timeline__item:last-child { padding-bottom: 0; }
.c-timeline__item::before {
  content: ""; position: absolute; left: 0.5625rem; top: 1.375rem; bottom: 0; width: 2px; background: var(--color-border);
}
.c-timeline__item:last-child::before { display: none; }
.c-timeline__dot {
  position: relative; z-index: 1; display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem;
  border-radius: 50%; background: var(--color-surface); border: 2px solid var(--gray-300); color: var(--color-text-inverse);
}
.c-timeline__dot .ic { font-size: 0.75rem; }
.c-timeline__item.is-done .c-timeline__dot { background: var(--color-success); border-color: var(--color-success); }
.c-timeline__item.is-current .c-timeline__dot { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--blue-200); }
.c-timeline__item.is-warning .c-timeline__dot { background: var(--color-warning); border-color: var(--color-warning); color: var(--gray-900); }
.c-timeline__item.is-fail .c-timeline__dot { background: var(--color-danger); border-color: var(--color-danger); }
.c-timeline__body { flex: 1; min-width: 0; }
.c-timeline__title { font-weight: 700; color: var(--color-text); }
.c-timeline__meta { color: var(--color-text-tertiary); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.c-timeline__item:not(.is-done):not(.is-current):not(.is-warning):not(.is-fail) .c-timeline__title { color: var(--color-text-tertiary); font-weight: 600; }

/* 07 입력 ------------------------------------------------------------------ */
.c-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.c-field__label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--color-text); }
.c-field__req { color: var(--color-danger-text); font-size: 0.8125rem; font-weight: 700; }
.c-field__opt { color: var(--color-text-tertiary); font-size: 0.8125rem; font-weight: 400; }
.c-field__help { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.5; }
.c-field__error { display: flex; align-items: flex-start; gap: 0.25rem; color: var(--color-danger-text); font-size: 0.8125rem; font-weight: 600; line-height: 1.5; }
.c-field__error .ic { flex: none; font-size: 1rem; margin-top: 0.0625rem; }
.c-field__count { align-self: flex-end; color: var(--color-text-tertiary); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.c-input, .c-select, .c-textarea {
  display: block; width: 100%; min-height: var(--size-control-lg); padding: 0 0.875rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-size: 1.0625rem; line-height: 1.4;       /* 16px 미만이면 iOS가 입력 시 화면을 확대합니다 */
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.c-input:hover, .c-select:hover, .c-textarea:hover { border-color: var(--gray-700); }
.c-input:focus-visible, .c-select:focus-visible, .c-textarea:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 0; border-color: var(--color-primary); border-radius: var(--radius-md);
}
.c-input[aria-invalid="true"], .c-select[aria-invalid="true"], .c-textarea[aria-invalid="true"] {
  border-color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger);
}
.c-input:disabled, .c-select:disabled, .c-textarea:disabled, .c-input[readonly] {
  background: var(--color-surface-subtle); border-color: var(--gray-300); color: var(--color-text-tertiary);
}
.c-textarea { min-height: 7.5rem; padding: 0.75rem 0.875rem; line-height: 1.55; resize: vertical; }
.c-select {
  padding-right: 2.75rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465264' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem;
}
.c-input--md, .c-select--md { min-height: var(--size-control-md); font-size: 0.9375rem; }
.c-input--sm, .c-select--sm { min-height: var(--size-control-sm); font-size: 0.9375rem; border-radius: var(--radius-sm); }
.c-input--code { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; padding-left: 1.25rem; }

/* 입력 + 버튼 한 줄 */
.c-inputgroup { display: flex; gap: var(--space-2); align-items: stretch; }
.c-inputgroup > .c-input { flex: 1; min-width: 0; }
.c-inputgroup > .c-btn { flex: none; min-height: var(--size-control-lg); }
/* 입력 안 오른쪽 보조(남은 시간 등) */
.c-inputwrap { position: relative; }
.c-inputwrap > .c-input { padding-right: 4.5rem; }
.c-inputwrap__suffix { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--color-danger-text); font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 검색 필드 */
.c-search {
  display: flex; align-items: center; gap: var(--space-2); min-height: 3rem; padding-left: 0.875rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text);
}
.c-search > .ic { flex: none; color: var(--color-text-tertiary); font-size: 1.375rem; }
.c-search__input { flex: 1; min-width: 0; height: 2.875rem; border: 0; background: none; font-size: 1.0625rem; -webkit-appearance: none; appearance: none; }
.c-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.c-search__input:focus-visible { outline: none; }
.c-search:focus-within { outline: 3px solid var(--color-focus); outline-offset: 0; border-color: var(--color-primary); }
.c-search__btn { flex: none; display: grid; place-items: center; width: 3rem; height: 2.875rem; border-left: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.c-search--borderless { border-color: transparent; box-shadow: var(--shadow-sm); }

/* 체크박스·라디오: 실제 input을 투명하게 겹쳐 두어 네이티브 동작·접근성을 그대로 씁니다 */
.c-check, .c-radio { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--size-tap); padding-block: 0.625rem; cursor: pointer; }
.c-check > input, .c-radio > input { position: absolute; left: 0; top: 0.625rem; width: 1.5rem; height: 1.5rem; margin: 0; opacity: 0; cursor: pointer; }
.c-check__box, .c-radio__box {
  position: relative; flex: none; width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.c-check__box { border-radius: 6px; }
.c-radio__box { border-radius: 50%; }
.c-check__box::after {
  content: ""; position: absolute; inset: 0; background: var(--color-on-primary); opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 1rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.c-radio__box::after { content: ""; position: absolute; inset: 0.3125rem; border-radius: 50%; background: var(--color-primary); opacity: 0; }
.c-check > input:checked + .c-check__box { background: var(--color-primary); border-color: var(--color-primary); }
.c-check > input:checked + .c-check__box::after, .c-radio > input:checked + .c-radio__box::after { opacity: 1; }
.c-radio > input:checked + .c-radio__box { border-color: var(--color-primary); border-width: 2px; }
.c-check > input:focus-visible + .c-check__box, .c-radio > input:focus-visible + .c-radio__box { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.c-check > input:disabled + .c-check__box, .c-radio > input:disabled + .c-radio__box { background: var(--color-surface-sunken); border-color: var(--gray-300); }
.c-check__label, .c-radio__label { flex: 1; min-width: 0; font-size: 1.0625rem; line-height: 1.45; padding-top: 0.0625rem; }
.c-check__label small, .c-radio__label small { display: block; color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.5; margin-top: 0.125rem; }
.c-check--sm .c-check__label { font-size: 0.9375rem; }
/* 표·목록 안에서 글자 없이 쓰는 작은 체크박스. input에 aria-label 필수 */
.c-check--bare { display: inline-flex; min-height: 0; padding: 0; vertical-align: middle; }
.c-check--bare > input { top: 0; width: 1.25rem; height: 1.25rem; }
.c-check--bare > .c-check__box { width: 1.25rem; height: 1.25rem; border-radius: 5px; }
.c-check--bare > .c-check__box::after { -webkit-mask-size: 0.875rem; mask-size: 0.875rem; }
/* 약관 동의 줄: 체크 + '보기' 버튼 */
.c-agree { display: flex; align-items: center; gap: var(--space-2); }
.c-agree > .c-check { flex: 1; min-width: 0; }
.c-agree__req { color: var(--color-primary); font-weight: 700; }
.c-agree__opt { color: var(--color-text-tertiary); font-weight: 600; }

/* 스위치 */
.c-switch { position: relative; display: inline-flex; align-items: center; flex: none; min-height: var(--size-tap); cursor: pointer; }
.c-switch > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.c-switch__track { position: relative; width: 3rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--gray-500); transition: background-color var(--duration-base) var(--ease-standard); }
.c-switch__track::after { content: ""; position: absolute; left: 0.1875rem; top: 0.1875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-xs); transition: transform var(--duration-base) var(--ease-standard); }
.c-switch > input:checked + .c-switch__track { background: var(--color-primary); }
.c-switch > input:checked + .c-switch__track::after { transform: translateX(1.25rem); }
.c-switch > input:focus-visible + .c-switch__track { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* 선택 카드(라디오 카드): <label class="c-choice"><input type="radio"><span class="c-choice__box">…</span></label> */
.c-choice { position: relative; display: block; cursor: pointer; }
.c-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.c-choice__box {
  display: flex; align-items: center; gap: var(--space-3); min-height: 4.5rem; padding: 0.75rem;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.c-choice:hover .c-choice__box { border-color: var(--gray-300); }
.c-choice__text { flex: 1; min-width: 0; }
.c-choice__title { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.c-choice__desc { display: block; color: var(--color-text-tertiary); font-size: 0.9375rem; line-height: 1.45; }
.c-choice__mark {
  position: relative; flex: none; width: 1.625rem; height: 1.625rem; border-radius: 50%; border: 1.5px solid var(--color-border-strong); background: var(--color-surface);
}
.c-choice__mark::after {
  content: ""; position: absolute; inset: 0; background: var(--color-text-inverse); opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 1rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.c-choice > input:checked + .c-choice__box { border-color: var(--color-primary); background: var(--color-primary-subtler); }
.c-choice > input:checked + .c-choice__box .c-choice__mark { background: var(--color-primary); border-color: var(--color-primary); }
.c-choice > input:checked + .c-choice__box .c-choice__mark::after { opacity: 1; }
.c-choice--green > input:checked + .c-choice__box { border-color: var(--color-success); background: var(--green-50); }
.c-choice--green > input:checked + .c-choice__box .c-choice__mark { background: var(--color-success); border-color: var(--color-success); }
.c-choice > input:focus-visible + .c-choice__box { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* 08 단계·세그먼트·탭 --------------------------------------------------------- */
/* 단계 표시: <ol class="c-steps"><li class="c-steps__item is-done|aria-current="step"> */
.c-steps { display: flex; align-items: center; gap: var(--space-2); }
.c-steps__item { display: flex; align-items: center; gap: var(--space-2); flex: none; color: var(--color-text-tertiary); font-size: 0.9375rem; font-weight: 600; }
.c-steps__item + .c-steps__item { flex: 1; min-width: 0; justify-content: flex-end; }
.c-steps__item + .c-steps__item::before { content: ""; flex: 1; min-width: 0.75rem; height: 1px; background: var(--gray-300); }
.c-steps__num {
  display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--color-surface-sunken); color: var(--color-text-secondary); font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.c-steps__num .ic { font-size: 1rem; }
.c-steps__item[aria-current="step"] { color: var(--color-primary); font-weight: 700; }
.c-steps__item[aria-current="step"] .c-steps__num { background: var(--color-primary); color: var(--color-on-primary); }
.c-steps__item.is-done { color: var(--color-text-secondary); }
.c-steps__item.is-done .c-steps__num { background: var(--color-success); color: var(--color-text-inverse); }
.c-steps__item.is-done + .c-steps__item::before { background: var(--color-success); }

/* 세그먼트: 보기 전환(지도/목록). <div class="c-segmented" role="group"><button aria-pressed> */
.c-segmented { display: inline-flex; padding: 0.1875rem; border-radius: var(--radius-full); background: var(--color-surface-sunken); }
.c-segmented__btn {
  min-height: 2.25rem; padding: 0 1rem; border-radius: var(--radius-full);
  color: var(--color-text-secondary); font-size: 0.9375rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.c-segmented__btn[aria-pressed="true"], .c-segmented__btn[aria-selected="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.c-segmented--float { background: var(--color-surface); box-shadow: var(--shadow-md); }
.c-segmented--block { display: flex; }
.c-segmented--block .c-segmented__btn { flex: 1; }
/* 균등 필터(전체/승인/반려/심사 중) */
.c-segmented--spread { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); padding: 0; background: none; }
.c-segmented--spread .c-segmented__btn { min-height: var(--size-tap); padding: 0 0.5rem; border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.c-segmented--spread .c-segmented__btn[aria-pressed="true"] { background: var(--color-primary); }

/* 탭: 같은 화면 안 내용 전환. role="tablist" / role="tab" aria-selected / role="tabpanel" */
.c-tabs { display: flex; gap: var(--space-5); padding-inline: var(--size-gutter); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.c-tabs::-webkit-scrollbar { display: none; }
.c-tabs__tab {
  position: relative; flex: none; min-height: 3rem; padding: 0 0.125rem;
  color: var(--color-text-tertiary); font-size: 1.0625rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.c-tabs__tab[aria-selected="true"] { color: var(--color-text); font-weight: 700; }
.c-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--color-primary); }
.c-tabs__tab .c-count { margin-left: 0.25rem; vertical-align: 0.0625rem; }
.c-tabs--on-brand { border-bottom: 0; background: var(--color-primary); }
.c-tabs--on-brand .c-tabs__tab { color: rgba(255, 255, 255, 0.8); }
.c-tabs--on-brand .c-tabs__tab[aria-selected="true"] { color: var(--color-text-inverse); }
.c-tabs--on-brand .c-tabs__tab[aria-selected="true"]::after { bottom: 0; background: var(--sky-400); }
.c-tabs--flush { padding-inline: 0; }

/* 09 미터·통계 -------------------------------------------------------------- */
/* 미터: style="--value: 63.2%" (선택: --mark: 48%). 트랙은 채움과 같은 계열의 옅은 색 */
.c-meter { position: relative; display: block; height: 0.5rem; border-radius: var(--radius-full); background: var(--meter-track, var(--blue-100)); }
.c-meter__fill { display: block; width: var(--value, 0%); height: 100%; border-radius: inherit; background: var(--meter-fill, var(--color-primary)); }
.c-meter__mark { position: absolute; left: var(--mark, 0%); top: -0.25rem; bottom: -0.25rem; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--gray-900); }
.c-meter--lg { height: 0.75rem; }
.c-meter--green { --meter-track: var(--green-100); --meter-fill: var(--color-success); }
.c-meter--amber { --meter-track: var(--amber-100); --meter-fill: var(--amber-500); }
.c-meter--red { --meter-track: var(--red-100); --meter-fill: var(--color-danger); }
.c-meter--orange { --meter-track: var(--orange-100); --meter-fill: var(--orange-500); }
.c-meter--gold { --meter-track: rgba(255, 255, 255, 0.16); --meter-fill: var(--gold-300); }
.c-meter--gradient { --meter-track: var(--color-surface-sunken); }
.c-meter--gradient .c-meter__fill { background: linear-gradient(90deg, var(--green-600), var(--sky-400)); }

.c-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.c-stat { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0.75rem 0.5rem; border-radius: var(--radius-md); background: var(--color-surface-subtle); text-align: center; min-width: 0; }
.c-stat__label { color: var(--color-text-tertiary); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.c-stat__value { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.c-stat__unit { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-tertiary); margin-left: 0.125rem; }
a.c-stat:hover { background: var(--color-surface-sunken); }

/* 10 모달·시트·토스트 --------------------------------------------------------- */
/* 네이티브 <dialog> 사용: showModal()이 초점 가두기·Esc 닫기·뒤 화면 비활성을 처리합니다 */
.c-modal, .c-sheet { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.c-modal::backdrop, .c-sheet::backdrop { background: var(--color-overlay); }
.c-modal { width: min(100% - 2rem, 24rem); margin: auto; border-radius: var(--radius-xl); padding: var(--space-6) var(--space-5) var(--space-5); }
.c-modal--wide { width: min(100% - 2rem, 35rem); }
.c-modal[open] { animation: c-pop var(--duration-slow) var(--ease-standard); }
.c-sheet {
  width: 100%; max-width: var(--size-app-max); margin: auto auto 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-2) var(--size-gutter) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
}
.c-sheet[open] { animation: c-rise var(--duration-slow) var(--ease-standard); }
.c-sheet__handle { display: block; width: 2.5rem; height: 0.25rem; margin: 0.25rem auto var(--space-3); border-radius: var(--radius-full); background: var(--gray-300); }
.c-dialog__icon { display: grid; place-items: center; margin: 0 auto var(--space-4); }
.c-dialog__title { font-size: 1.375rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.c-dialog__desc { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.55; }
.c-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.c-dialog__actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.c-dialog__actions > .c-btn { flex: 1; }
.c-dialog__actions--stack { flex-direction: column; }
.c-modal--center { text-align: center; }
/* 문서·가이드에서 펼쳐 보여 주는 정적 표시 */
.c-modal.is-static, .c-sheet.is-static { position: static; display: block; margin-inline: auto; animation: none; }
@keyframes c-pop { from { opacity: 0; transform: scale(0.96); } }
@keyframes c-rise { from { opacity: 0; transform: translateY(1.5rem); } }

/* 토스트: <div class="c-toasts" role="status" aria-live="polite"> 안에 추가 */
.c-toasts {
  position: fixed; left: 50%; bottom: calc(var(--size-tabbar) + var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2); width: min(100% - 2rem, 26rem); transform: translateX(-50%); pointer-events: none;
}
.c-toast {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-md);
  background: var(--gray-900); color: var(--color-text-inverse); box-shadow: var(--shadow-md);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.45; pointer-events: auto; animation: c-rise var(--duration-base) var(--ease-standard);
}
.c-toast .ic { flex: none; font-size: 1.25rem; }
.c-toast--success .ic { color: var(--green-400); }
.c-toast--danger .ic { color: var(--red-200); }
.c-toast.is-static { animation: none; }

/* 11 빈 상태·스켈레톤·아코디언 --------------------------------------------------- */
.c-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; }
.c-empty__title { margin-top: var(--space-2); font-size: 1.0625rem; font-weight: 700; line-height: 1.45; }
.c-empty__desc { color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.55; max-width: 20rem; }
.c-empty > .c-btn { margin-top: var(--space-3); }
.c-empty--compact { padding: var(--space-8) var(--space-4); }

.c-skeleton {
  display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 37%, var(--gray-100) 63%);
  background-size: 400% 100%; animation: c-shimmer 1.4s ease infinite;
}
.c-skeleton--text { height: 1em; border-radius: 4px; }
@keyframes c-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 아코디언: <details class="c-accordion__item"><summary>질문</summary><div class="c-accordion__body">답</div></details> */
.c-accordion { border-top: 1px solid var(--color-border); }
.c-accordion__item { border-bottom: 1px solid var(--color-border); }
.c-accordion__item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-height: 3.5rem; padding: 1rem 0;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.45;
}
.c-accordion__item > summary .ic { flex: none; color: var(--gray-500); transition: transform var(--duration-base) var(--ease-standard); margin-top: 0.0625rem; }
.c-accordion__item[open] > summary .ic { transform: rotate(180deg); }
.c-accordion__item[open] > summary { color: var(--color-primary); }
.c-accordion__q { flex: 1; min-width: 0; }
.c-accordion__tag { margin-right: 0.375rem; vertical-align: 0.125em; }
.c-accordion__body { padding: 0 0 var(--space-5); color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.6; }
.c-accordion__body > * + * { margin-top: var(--space-2); }
.c-accordion--card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding-inline: var(--space-4); }
.c-accordion--card .c-accordion__item:last-child { border-bottom: 0; }

/* 읽는 글(약관·안내문) */
.c-prose { color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.7; }
.c-prose > * + * { margin-top: var(--space-3); }
.c-prose h2 { margin-top: var(--space-8); color: var(--color-text); font-size: 1.1875rem; font-weight: 700; line-height: 1.4; }
.c-prose h3 { margin-top: var(--space-6); color: var(--color-text); font-size: 1.0625rem; font-weight: 700; }
.c-prose ul, .c-prose ol { padding-left: 1.25rem; }
.c-prose li + li { margin-top: 0.25rem; }
.c-prose a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 0.2em; }
.c-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.c-prose th, .c-prose td { padding: 0.625rem 0.75rem; border: 1px solid var(--color-border); vertical-align: top; text-align: left; }
.c-prose th { background: var(--color-surface-subtle); color: var(--color-text); font-weight: 700; }
/* 좁은 화면에서 표가 찌그러지지 않게 가로로 밀어 보게 합니다.
   마크업: <div class="c-tablewrap c-tablewrap--wide" role="region" aria-labelledby="캡션 id" tabindex="0"><table>…
   (가로로 밀리는 영역은 키보드로도 밀 수 있게 tabindex="0"과 이름을 줍니다) */
.c-tablewrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* relative: 안쪽의 숨김 글자(u-sr-only)가 스크롤 영역 밖으로 새지 않게 */
.c-tablewrap--wide > table { min-width: 32rem; }   /* 칸이 많은 글 표. 관리자 표(c-table)는 --table-min 으로 따로 지정 */

/* 12 지도 위 요소 ------------------------------------------------------------- */
/* .c-map__canvas 자리에 네이버 지도(Web Dynamic Map)를 올립니다.
   핀·구역·내 위치는 지도의 커스텀 오버레이(HTML 마커)로 같은 마크업을 씁니다. 퍼블리싱의 지도 그림은 자리표시입니다. */
.c-map { position: relative; flex: 1; min-height: 18rem; overflow: hidden; background: #E6EEE3; isolation: isolate; }
.c-map--inline { flex: none; height: 12rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.c-map--panel { flex: none; height: 24rem; border-radius: var(--radius-sm); }   /* 관리자 패널 안의 큰 지도 */
.c-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-map__ctrl { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: var(--space-2); }
.c-map__ctrl--tr { top: var(--space-3); right: var(--space-3); }
.c-map__ctrl--tl { top: var(--space-3); left: var(--space-3); }
.c-map__ctrl--br { bottom: var(--space-3); right: var(--space-3); }
.c-map__ctrl--bl { bottom: var(--space-3); left: var(--space-3); }
.c-mapbtn { display: grid; place-items: center; width: var(--size-tap); height: var(--size-tap); border-radius: 50%; background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-md); }
.c-mapbtn:hover { background: var(--color-surface-subtle); }
.c-maplegend { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0 0.75rem; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-md); color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: 600; }

/* 핀: 유형별 색 + 유형별 아이콘. 위치는 left/top(%)으로 지정(샘플), 운영에서는 지도 좌표에 붙는 HTML 마커 */
.c-pin {
  --pin: var(--color-primary);
  position: absolute; z-index: 1; display: grid; place-items: start center; width: 2.25rem; height: 2.75rem; padding-top: 0.5rem;
  transform: translate(-50%, -100%); color: var(--color-text-inverse); filter: drop-shadow(0 2px 3px rgba(15, 27, 48, 0.3));
}
.c-pin::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pin);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 44'%3E%3Cpath d='M18 0C8.06 0 0 8.06 0 18c0 12.6 15.3 24.7 16.9 25.6a2 2 0 0 0 2.2 0C20.7 42.7 36 30.6 36 18 36 8.06 27.94 0 18 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 44'%3E%3Cpath d='M18 0C8.06 0 0 8.06 0 18c0 12.6 15.3 24.7 16.9 25.6a2 2 0 0 0 2.2 0C20.7 42.7 36 30.6 36 18 36 8.06 27.94 0 18 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c-pin .ic { font-size: 1.125rem; }
.c-pin__num { font-size: 0.9375rem; font-weight: 800; line-height: 1.25rem; }
.c-pin--nature { --pin: var(--color-nature); }
.c-pin--history { --pin: var(--color-history); }
.c-pin--activity { --pin: var(--color-activity); }
.c-pin--shop { --pin: var(--color-spend); }   /* 소비인증 가능 점포 */
.c-pin--sm { width: 1.5rem; height: 1.875rem; padding-top: 0.3125rem; }
.c-pin--sm .ic { font-size: 0.75rem; }
.c-pin.is-selected { z-index: 2; transform: translate(-50%, -100%) scale(1.2); transform-origin: 50% 100%; }
.c-pin.is-done { --pin: var(--gray-600); }
.c-pin__label {
  position: absolute; left: 50%; top: calc(100% + 0.25rem); transform: translateX(-50%); padding: 0.125rem 0.5rem; border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.c-maplabel { position: absolute; z-index: 0; transform: translate(-50%, -50%); color: var(--blue-800); font-size: 0.9375rem; font-weight: 800; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; }
.c-maplabel--sm { color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: 600; }

/* 내 위치 */
.c-me { position: absolute; z-index: 2; width: 1.25rem; height: 1.25rem; border-radius: 50%; transform: translate(-50%, -50%); background: var(--blue-500); border: 3px solid var(--color-surface); box-shadow: 0 0 0 0.5rem rgba(31, 116, 196, 0.2), var(--shadow-sm); }

/* 방문인증 구역(반경). 지름은 --d 로 지정(샘플) */
.c-geofence {
  position: absolute; z-index: 0; width: var(--d, 8rem); height: var(--d, 8rem); border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(230, 122, 18, 0.18); border: 2px solid var(--orange-600);
}
.c-geofence__label {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); padding: 0.125rem 0.5rem; border-radius: var(--radius-xs);
  background: var(--orange-700); color: var(--color-text-inverse); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.c-geofence.is-inside { background: rgba(31, 122, 77, 0.18); border-color: var(--color-success); }
.c-geofence.is-inside .c-geofence__label { background: var(--green-700); }

/* 광역 개략도(6개 군) 위의 군 묶음 표시: SVG 안에서 씁니다 */
.c-mapstage { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-mapstage text { font-family: var(--font-sans); }
.c-cluster { cursor: pointer; }
.c-cluster__halo { fill: var(--color-primary); opacity: 0.22; }
.c-cluster__dot { fill: var(--color-primary); }
.c-cluster__num { fill: var(--color-text-inverse); font-size: 30px; font-weight: 800; text-anchor: middle; }
.c-cluster__name { fill: var(--blue-800); font-size: 27px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }

/* 13 브랜드·증빙 견본 --------------------------------------------------------- */
/* BI 확정 전 임시 심벌 + 서비스명 */
.c-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 1.0625rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.c-brand__mark { flex: none; width: 2rem; height: 2rem; }
.c-brand__sub { display: block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; opacity: 0.85; }
.c-brand--lg { font-size: 1.375rem; gap: var(--space-3); }
.c-brand--lg .c-brand__mark { width: 3rem; height: 3rem; }

/* 영수증 실물 표현(샘플·검수 화면 공용). 실제 서비스에서는 촬영 이미지가 들어갑니다 */
.c-receipt {
  position: relative; width: min(100%, 14.5rem); padding: 1rem 0.875rem 1.25rem; background: #F6F5F1; color: #23262B;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; transform: rotate(-2deg); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 96% 100%, 92% calc(100% - 6px), 88% 100%, 84% calc(100% - 6px), 80% 100%, 76% calc(100% - 6px), 72% 100%, 68% calc(100% - 6px), 64% 100%, 60% calc(100% - 6px), 56% 100%, 52% calc(100% - 6px), 48% 100%, 44% calc(100% - 6px), 40% 100%, 36% calc(100% - 6px), 32% 100%, 28% calc(100% - 6px), 24% 100%, 20% calc(100% - 6px), 16% 100%, 12% calc(100% - 6px), 8% 100%, 4% calc(100% - 6px), 0 100%);
}
.c-receipt--flat { transform: none; box-shadow: 0 1px 4px rgba(15, 27, 48, 0.16); width: 100%; }
.c-receipt__name { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 800; text-align: center; }
.c-receipt__center { text-align: center; }
.c-receipt__thanks { margin-top: 0.375rem; }
.c-receipt__rule { margin: 0.375rem 0; border: 0; border-top: 1px dashed #8A8F98; }
.c-receipt__row { display: flex; justify-content: space-between; gap: var(--space-2); }
.c-receipt__total { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 800; }
.c-receipt__hl { margin-inline: -0.25rem; padding-inline: 0.25rem; background: rgba(46, 160, 96, 0.2); box-shadow: inset 0 0 0 1.5px #2A9D61; border-radius: 2px; }
.c-receipt__hl--warn { background: rgba(220, 74, 49, 0.14); box-shadow: inset 0 0 0 1.5px var(--red-500); }