/* ==========================================================================
   지리산권 ESG 가치여행 — user.css  (이용자 모바일 웹)
   목차
   01 앱 셸 l-app · 앱바 c-appbar · 하단 탭 c-tabbar · 하단 행동 바 c-actionbar
   02 히어로 c-hero · 푸터 c-sitefoot
   03 리워드 진행 c-rewardtrack · 단계 카드 c-stages · 조건 목록 c-checklist
   04 인증 바로가기 c-shortcut · 군 바로가기 c-county
   05 거점 카드 c-spot · 인증 내역 c-cert · 알림 c-noti · 점포 c-shop
   06 지도 화면 c-map--course/--sheet/--region · 지도 시트 c-mapsheet · 필터 줄 c-filterbar
   07 방문인증 레이더 c-radar · 결과 c-result
   08 촬영 화면 c-scanner · 사진 칸 c-photoslot
   09 스탬프 c-stamp · 쿠폰 c-coupon · 인증서 c-certcard · PIN c-code
   10 코스 c-course · 리포트 공유 카드 c-sharecard · 이용 방법 c-howto
   11 그 밖의 이용자 화면 조각
   ※ 지도 기본형(c-map, c-pin, c-geofence), 브랜드(c-brand), 영수증 견본(c-receipt)은 components.css에 있습니다.
   ========================================================================== */

/* 01 앱 셸 ---------------------------------------------------------------- */
body.is-app { background: var(--gray-100); }
.l-app {
  position: relative; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  max-width: var(--size-app-max); margin-inline: auto; background: var(--color-bg);
}
@media (min-width: 600px) {
  .l-app { box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm); }
}
.l-app__main { flex: 1; min-width: 0; padding-bottom: var(--space-10); }
.l-app__main--flush { padding-bottom: 0; }
.l-app__main--surface { background: var(--color-surface); }
/* 지도처럼 화면 높이를 꽉 채우는 화면 */
.l-app--fixed { height: 100vh; height: 100dvh; overflow: hidden; }
.l-app--fixed > .l-app__main { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }

/* 앱바: 기본은 브랜드 채움. 뒤로 버튼은 44px 터치 영역 */
.c-appbar {
  position: sticky; top: 0; z-index: var(--z-appbar);
  display: flex; align-items: center; gap: var(--space-1);
  min-height: var(--size-appbar); padding: 0.375rem 0.5rem; padding-top: calc(0.375rem + env(safe-area-inset-top, 0px));
  background: var(--color-primary); color: var(--color-on-primary);
}
.c-appbar__titles { flex: 1; min-width: 0; padding-inline: 0.5rem; }
.c-appbar > .c-iconbtn + .c-appbar__titles { padding-left: 0.125rem; }
.c-appbar__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-appbar__sub { color: var(--color-text-inverse-secondary); font-size: 0.8125rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-appbar__actions { display: flex; align-items: center; flex: none; }
.c-appbar--plain { background: var(--color-surface); color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.c-appbar--plain .c-appbar__sub { color: var(--color-text-tertiary); }
.c-appbar--tall { align-items: flex-start; padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)); padding-bottom: 0.75rem; }
.c-appbar--tall .c-appbar__title { font-size: 1.375rem; white-space: normal; }
/* 앱바 아래 이어지는 브랜드 영역(검색 줄 등) */
.c-appbar__below { padding: 0 var(--size-gutter) var(--space-3); background: var(--color-primary); color: var(--color-on-primary); }

/* 하단 탭: 현재 위치는 aria-current="page" (색 + 굵기 + 위쪽 막대) */
.c-tabbar {
  position: sticky; bottom: 0; z-index: var(--z-appbar);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.c-tabbar__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem;
  min-height: var(--size-tabbar); padding: 0.375rem 0.125rem;
  color: var(--color-text-tertiary); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-align: center;
}
.c-tabbar__item .ic { font-size: 1.625rem; }
.c-tabbar__item:hover { color: var(--color-text); }
.c-tabbar__item[aria-current="page"] { color: var(--color-primary); font-weight: 700; }
.c-tabbar__item[aria-current="page"]::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 2rem; height: 3px; margin-left: -1rem;
  border-radius: 0 0 3px 3px; background: var(--color-primary);
}
.c-tabbar__item:focus-visible { outline-offset: -3px; }

/* 하단 고정 행동 바: 주 행동 1개 + 보조 1개까지 */
.c-actionbar {
  position: sticky; bottom: 0; z-index: var(--z-actionbar);
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3) var(--size-gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.c-actionbar > .c-btn { flex: 1; min-width: 0; }
.c-actionbar > .c-btn--fit { flex: none; }
.c-actionbar__note { flex: 0 0 100%; color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.5; text-align: center; }
.c-actionbar--plain { background: var(--color-bg); border-top: 0; }

/* 02 히어로·푸터 -------------------------------------------------------------- */

.c-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) var(--size-gutter) 8.5rem;
  background: var(--blue-900); color: var(--color-text-inverse);
}
.c-hero__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
/* 글자 뒤 스크림: 사진으로 바꿔도 대비가 유지되도록 항상 깔아 둡니다 */
.c-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(6, 38, 74, 0.78) 0%, rgba(6, 38, 74, 0.6) 46%, rgba(6, 38, 74, 0) 84%),
    linear-gradient(180deg, rgba(6, 38, 74, 0.3) 0%, rgba(6, 38, 74, 0.3) 58%, rgba(6, 38, 74, 0) 82%);
}
.c-hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--size-tap); }
.c-hero__pill {
  display: inline-block; margin-top: var(--space-3); padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full); background: var(--color-surface); color: var(--green-700); font-size: 0.8125rem; font-weight: 700; line-height: 1.3;
}
.c-hero__title { margin-top: var(--space-3); font-size: 1.75rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; text-shadow: 0 1px 3px rgba(6, 38, 74, 0.45); }
.c-hero__title em { color: #FFE4A3; }
.c-hero__sub { margin-top: 0.375rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; text-shadow: 0 1px 2px rgba(6, 38, 74, 0.45); }
.c-hero--standalone { padding-bottom: 8rem; }   /* 겹침 카드 없이 단독으로 쓸 때 */
/* 히어로에 겹치는 첫 섹션 */
.l-section--overlap { position: relative; margin-top: -4.5rem; }

.c-sitefoot { margin-top: var(--space-10); padding: var(--space-6) var(--size-gutter) 0; border-top: 1px solid var(--color-border); color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.6; }
.c-sitefoot__org { color: var(--color-text-secondary); font-weight: 700; font-size: 0.9375rem; }
.c-sitefoot__links { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-4); margin-top: var(--space-3); }
.c-sitefoot__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-text-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.c-sitefoot__links a.is-strong { color: var(--color-text); font-weight: 700; }

/* 03 리워드 진행 -------------------------------------------------------------- */
/* 3단계 진행 트랙. style="--progress: 62%" = 첫 노드에서 끝 노드까지의 채움 비율 */
.c-rewardtrack { position: relative; padding-top: 0.125rem; }
.c-rewardtrack__bar { position: absolute; left: 0; right: 1rem; top: 0.875rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-surface-sunken); }
.c-rewardtrack__fill { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-600), var(--sky-400)); }
.c-rewardtrack__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-rewardtrack__step { display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: 0.375rem; color: var(--color-text-tertiary); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.c-rewardtrack__node {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--gray-300); color: var(--color-text-tertiary);
  font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.c-rewardtrack__node .ic { font-size: 1.125rem; }
.c-rewardtrack__step.is-done { color: var(--color-success-text); }
.c-rewardtrack__step.is-done .c-rewardtrack__node { background: var(--color-success); border-color: var(--color-success); color: var(--color-text-inverse); }
.c-rewardtrack__step[aria-current="step"] { color: var(--color-primary); font-weight: 700; }
.c-rewardtrack__step[aria-current="step"] .c-rewardtrack__node { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 4px var(--blue-200); }

/* 단계 카드 3개 */
.c-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.c-stage {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 0.375rem; min-width: 0;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); text-align: center;
}
.c-stage__mark {
  display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 0.125rem; border-radius: 50%;
  background: var(--color-surface-sunken); color: var(--color-text-tertiary); font-size: 0.9375rem; font-weight: 700;
}
.c-stage__mark .ic { font-size: 1.125rem; }
.c-stage__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
.c-stage__reward { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.35; }
.c-stage.is-done { border-color: var(--color-success-border); background: var(--green-50); }
.c-stage.is-done .c-stage__mark { background: var(--color-success); color: var(--color-text-inverse); }
.c-stage[aria-current="step"] { border-color: var(--blue-400); background: var(--blue-50); }
.c-stage[aria-current="step"] .c-stage__mark { background: var(--color-surface); color: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary); }

/* 조건 목록: 달성(is-done) / 확인 중(is-pending) / 남음 */
.c-checklist { display: flex; flex-direction: column; }
.c-checklist__item { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0; font-size: 0.9375rem; line-height: 1.5; }
.c-checklist__item + .c-checklist__item { border-top: 1px solid var(--color-border); }
.c-checklist__item > .ic { flex: none; font-size: 1.375rem; color: var(--gray-500); }
.c-checklist__text { flex: 1; min-width: 0; }
.c-checklist__title { display: block; font-weight: 700; color: var(--color-text); }
.c-checklist__meta { display: block; color: var(--color-text-tertiary); font-size: 0.8125rem; }
.c-checklist__state { flex: none; font-size: 0.8125rem; font-weight: 700; color: var(--color-text-tertiary); padding-top: 0.125rem; }
.c-checklist__item.is-done > .ic { color: var(--color-success); }
.c-checklist__item.is-done .c-checklist__state { color: var(--color-success-text); }
.c-checklist__item.is-pending > .ic { color: var(--amber-700); }
.c-checklist__item.is-pending .c-checklist__state { color: var(--color-warning-text); }

/* 04 바로가기 ---------------------------------------------------------------- */
.c-shortcut {
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0.875rem 0.375rem; min-width: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs); text-align: center;
  transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.c-shortcut:hover { border-color: var(--blue-300); }
.c-shortcut:active { transform: scale(0.98); }
.c-shortcut > .c-tile { margin-bottom: 0.375rem; }
.c-shortcut__label { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }
.c-shortcut__sub { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.35; }

.c-county {
  display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; min-height: 3.75rem; padding: 0.625rem 0.5rem 0.625rem 0.75rem; min-width: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.c-county:hover { border-color: var(--blue-300); }
.c-county__name { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.c-county__meta { display: block; color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.c-county > .ic { flex: none; color: var(--gray-500); font-size: 1.125rem; }
@media (max-width: 359px) { .c-county > .ic { display: none; } .c-county { padding-right: 0.75rem; } }

/* 05 거점·인증·알림·점포 ------------------------------------------------------- */
.c-spot {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); min-width: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
}
.c-spot__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; flex: 1; min-width: 0; }
.c-spot__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.45; }
.c-spot__title > a { display: inline-block; }   /* 누르는 높이 24px 이상(줄 높이만큼) */
.c-spot__body > * { max-width: 100%; }
.c-spot__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.125rem 0.375rem; color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.45; }
.c-spot__meta .ic { font-size: 0.875rem; }
.c-spot__desc { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.45; }
.c-spot__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex: none; }
.c-spot__dist { color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.c-spot--stack { flex-wrap: wrap; }
/* 좁은 화면에서는 버튼을 아래 줄로 내립니다 */
@media (max-width: 359px) {
  .c-spot { flex-wrap: wrap; }
  .c-spot__side { flex: 0 0 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}

.c-cert { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.c-cert__main { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); min-width: 0; }
a.c-cert__main:hover { background: var(--color-surface-subtle); }
.c-cert__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1875rem; flex: 1; min-width: 0; }
.c-cert__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.c-cert__meta { display: flex; align-items: center; gap: 0.25rem; color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.45; }
.c-cert__meta .ic { flex: none; font-size: 0.875rem; }
.c-cert__main > .ic-chevron-right { flex: none; color: var(--gray-500); font-size: 1.25rem; }
.c-cert__reject { margin: 0 var(--space-3) var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-danger-bg-subtle); }
.c-cert__reject-title { display: flex; align-items: center; gap: 0.375rem; color: var(--color-danger-text); font-size: 0.9375rem; font-weight: 700; }
.c-cert__reject-title .ic { font-size: 1.25rem; color: var(--red-500); }
.c-cert__reject p { margin-top: 0.25rem; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.5; }
.c-cert__reject .c-btn { margin-top: var(--space-3); }

.c-noti { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--size-gutter); background: var(--color-surface); }
.c-noti + .c-noti { border-top: 1px solid var(--color-border); }
.c-noti.is-unread { background: var(--color-primary-subtler); }
.c-noti__body { flex: 1; min-width: 0; }
.c-noti__title { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.c-noti__text { display: block; margin-top: 0.125rem; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.5; }
.c-noti__time { display: block; margin-top: 0.25rem; color: var(--color-text-tertiary); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.c-noti__new { flex: none; margin-top: 0.375rem; }

.c-shop { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; }
.c-shop + .c-shop { border-top: 1px solid var(--color-border); }
.c-shop__body { flex: 1; min-width: 0; }
.c-shop__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.c-shop__meta { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.5; }
.c-shop__tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.c-shop__dist { flex: none; color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 0.125rem; }

/* 06 지도 ------------------------------------------------------------------- */
/* 지도 기본형(c-map, c-pin, c-geofence 등)은 components.css 12번에 있습니다. 아래는 이용자 화면 전용 */
.c-map--course { flex: none; aspect-ratio: 5 / 3; min-height: 0; }   /* 자리표시 그림(800×480)과 비율을 맞춰 핀 위치가 어긋나지 않게 */
.c-map--sheet .c-map__ctrl--br, .c-map--sheet .c-map__ctrl--bl { bottom: calc(var(--space-3) + 1.25rem); }

/* 지도 아래 목록 시트(항상 보이는 패널). 드래그 높이는 개발에서 연결: --peek / --half / --full */
.c-mapsheet {
  position: relative; z-index: 4; flex: none; margin-top: -1.25rem; padding: var(--space-2) var(--size-gutter) var(--space-3);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--color-surface); box-shadow: var(--shadow-lg);
  max-height: 46%; overflow-y: auto; overscroll-behavior: contain;
}
.c-mapsheet--peek { max-height: 12.5rem; }
/* 접힌 상태: 손잡이와 제목 줄만 보임(광역 보기) */
.c-mapsheet--collapsed { max-height: 4.5rem; overflow: hidden; }
.c-map--region { background: #DCE9D5; }
.c-mapsheet--full { flex: 1; max-height: none; margin-top: 0; border-radius: 0; box-shadow: none; }
.c-mapsheet__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-mapsheet__handle-btn { display: block; width: 100%; padding: 0.25rem 0 0.125rem; }
/* 필터 줄(군·유형 칩) */
.c-filterbar { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-3); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }

/* 07 방문인증 ---------------------------------------------------------------- */
/* 레이더: 거점(가운데)과 내 위치의 관계를 그림으로. 상태는 부모 [data-state]가 바꿉니다 */
.c-radar {
  position: relative; width: min(100%, 17rem); aspect-ratio: 1; margin-inline: auto; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-100) 0 38%, var(--blue-50) 38% 70%, transparent 70%);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.c-radar__zone { position: absolute; inset: 31%; border-radius: 50%; background: rgba(230, 122, 18, 0.18); border: 2px dashed var(--orange-600); }
.c-radar__spot { position: absolute; left: 50%; top: 50%; }
.c-radar__me { position: absolute; left: var(--x, 82%); top: var(--y, 24%); }
.c-radar__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue-300); opacity: 0; }
[data-state="locating"] .c-radar__ring { animation: c-ping 1.8s var(--ease-standard) infinite; }
[data-state="locating"] .c-radar__me { display: none; }
[data-state="inside"] .c-radar__zone, [data-state="done"] .c-radar__zone { background: rgba(31, 122, 77, 0.18); border: 2px solid var(--color-success); }
[data-state="inside"] .c-radar__me, [data-state="done"] .c-radar__me { --x: 58%; --y: 44%; }
[data-state="denied"] .c-radar, [data-state="offline"] .c-radar { filter: grayscale(1); opacity: 0.6; }
@keyframes c-ping { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }

/* 결과 화면(인증 완료, 접수 완료) */
.c-result { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--size-gutter) var(--space-6); text-align: center; }
.c-result__title { margin-top: var(--space-3); font-size: 1.5rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
.c-result__desc { color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.55; max-width: 22rem; }
.c-result--compact { padding-top: var(--space-6); }
/* 도장 찍히는 순간(완료 시 1회) */
.c-seal {
  display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: 50%; transform: rotate(-10deg);
  background: var(--orange-50); color: var(--orange-700); border: 3px solid var(--orange-400);
  box-shadow: inset 0 0 0 4px var(--color-surface), inset 0 0 0 5.5px var(--orange-400);
  font-size: 1.375rem; font-weight: 800; line-height: 1.15; text-align: center;
}
.c-seal small { display: block; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; }
.c-seal.is-stamping { animation: c-stamp 0.5s var(--ease-standard) both; }
@keyframes c-stamp { 0% { opacity: 0; transform: rotate(-10deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-10deg) scale(0.94); } 100% { transform: rotate(-10deg) scale(1); } }
.c-seal--green { background: var(--green-50); color: var(--green-700); border-color: var(--green-400); box-shadow: inset 0 0 0 4px var(--color-surface), inset 0 0 0 5.5px var(--green-400); }

/* GPS 정확도 표시 */
.c-gps { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: 600; }
.c-gps__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.875rem; }
.c-gps__bars i { width: 3px; border-radius: 1px; background: var(--gray-300); }
.c-gps__bars i:nth-child(1) { height: 35%; } .c-gps__bars i:nth-child(2) { height: 60%; } .c-gps__bars i:nth-child(3) { height: 100%; }
.c-gps--good .c-gps__bars i { background: var(--color-success); }
.c-gps--fair .c-gps__bars i:nth-child(-n+2) { background: var(--amber-700); }
.c-gps--poor .c-gps__bars i:nth-child(1) { background: var(--red-500); }

/* 08 촬영 화면·사진 칸 ---------------------------------------------------------- */
.c-scanner { position: relative; display: grid; place-items: center; min-height: 20rem; padding: var(--space-6) var(--space-4) 3.5rem; overflow: hidden; background: #1B1E23; color: var(--color-text-inverse); }
.c-scanner--tall { min-height: 26rem; }
.c-scanner__frame { position: absolute; inset: 1.25rem 2.5rem 3.25rem; pointer-events: none; }
.c-scanner__frame i { position: absolute; width: 1.75rem; height: 1.75rem; border: 3px solid var(--sky-400); }
.c-scanner__frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.c-scanner__frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.c-scanner__frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.c-scanner__frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.c-scanner__frame--square { inset: auto; width: min(64vw, 15rem); aspect-ratio: 1; }
.c-scanner__status {
  position: absolute; left: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.75rem;
  border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.72); font-size: 0.9375rem; font-weight: 600;
}
.c-scanner__status .ic { font-size: 1.125rem; color: var(--green-400); }
.c-scanner__action { position: absolute; right: var(--space-3); top: var(--space-3); }
.c-scanner__hint { position: relative; max-width: 16rem; color: rgba(255, 255, 255, 0.86); font-size: 0.9375rem; line-height: 1.5; text-align: center; }
.c-scanner__line { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: var(--sky-400); box-shadow: 0 0 12px var(--sky-400); animation: c-scan 2.4s ease-in-out infinite; }
@keyframes c-scan { 0%, 100% { transform: translateY(-4.5rem); } 50% { transform: translateY(4.5rem); } }

/* 사진 칸 */
.c-photoslot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; aspect-ratio: 4 / 3; padding: var(--space-4);
  border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-secondary);
  font-size: 0.9375rem; font-weight: 600; text-align: center; overflow: hidden;
}
.c-photoslot:hover { border-color: var(--color-primary); color: var(--color-primary); }
.c-photoslot .ic { font-size: 2rem; }
.c-photoslot small { color: var(--color-text-tertiary); font-size: 0.8125rem; font-weight: 400; }
.c-photoslot.has-photo { border: 0; padding: 0; }
.c-photoslot.has-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-photoslot__label { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 1; }
.c-photoslot__remove { position: absolute; right: 0.5rem; top: 0.5rem; z-index: 1; }
.c-photoslot__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 0.375rem; padding: 1.25rem 0.75rem 0.5rem; background: linear-gradient(180deg, transparent, rgba(6, 38, 74, 0.8)); color: var(--color-text-inverse); font-size: 0.8125rem; font-weight: 600; }
.c-photoslot__meta .ic { font-size: 0.875rem; }

/* 09 스탬프·쿠폰·인증서 -------------------------------------------------------- */
.c-stampgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-stamp { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: var(--space-4) 0.25rem; min-width: 0; text-align: center; }
.c-stampgrid > .c-stamp:nth-child(3n+2), .c-stampgrid > .c-stamp:nth-child(3n+3) { border-left: 1px solid var(--color-border); }
.c-stampgrid > .c-stamp:nth-child(n+4) { border-top: 1px solid var(--color-border); }
.c-stamp__seal {
  display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin-bottom: 0.375rem; border-radius: 50%;
  border: 2px dashed var(--gray-300); color: var(--gray-500); line-height: 1.1;
}
.c-stamp__seal .ic { font-size: 1.5rem; }
.c-stamp__ko { display: block; font-size: 1rem; font-weight: 800; }
.c-stamp__en { display: block; margin-top: 0.125rem; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.06em; }
.c-stamp__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }
.c-stamp__meta { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.35; }
.c-stamp.is-earned .c-stamp__seal {
  transform: rotate(-8deg); border: 2.5px solid var(--orange-400); background: var(--orange-50); color: var(--orange-700);
  box-shadow: inset 0 0 0 3px var(--color-surface), inset 0 0 0 4px var(--orange-400);
}

/* 쿠폰: 왼쪽 본문(남색) + 오른쪽 절취 부분(QR·유효기간) */
.c-coupon { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 7.25rem; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.c-coupon__main {
  position: relative; isolation: isolate; overflow: hidden; padding: var(--space-4); border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-600), var(--blue-900)); color: var(--color-text-inverse);
}
.c-coupon__main::after {
  content: ""; position: absolute; right: -0.5rem; bottom: 0; z-index: -1; width: 62%; height: 68%; opacity: 0.14; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 38 46l14 16 30-48 26 40 18-22 34 44 16-18 24 42z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 38 46l14 16 30-48 26 40 18-22 34 44 16-18 24 42z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.c-coupon__name { margin-top: var(--space-2); font-size: 1.1875rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.c-coupon__amount { color: var(--gold-300); font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.c-coupon__type { color: rgba(255, 255, 255, 0.8); font-size: 0.8125rem; line-height: 1.5; }
.c-coupon__pin { margin-top: var(--space-3); padding: 0.5rem 0.75rem; border: 1px dashed rgba(255, 255, 255, 0.45); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); }
.c-coupon__pin-label { display: block; color: rgba(255, 255, 255, 0.8); font-size: 0.8125rem; line-height: 1.4; }
.c-coupon__pin-value { display: block; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-coupon__stub {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: var(--space-3) var(--space-2);
  border-left: 2px dashed var(--gray-300); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; text-align: center;
}
.c-coupon__stub::before, .c-coupon__stub::after { content: ""; position: absolute; left: -0.5625rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-bg); }
.c-coupon__stub::before { top: -0.5rem; }
.c-coupon__stub::after { bottom: -0.5rem; }
.c-coupon__qr { width: 4.75rem; height: 4.75rem; }
.c-coupon__sample { color: var(--color-text-tertiary); font-size: 0.8125rem; font-weight: 600; }
.c-coupon__exp-label { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.3; }
.c-coupon__exp { font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.c-coupon.is-used .c-coupon__main { background: var(--gray-600); }
.c-coupon.is-used .c-coupon__amount { color: var(--color-text-inverse); }
.c-coupon.is-used .c-coupon__qr { opacity: 0.25; }
@media (max-width: 359px) {
  .c-coupon { grid-template-columns: minmax(0, 1fr) 5.75rem; }
  .c-coupon__qr { width: 4rem; height: 4rem; }
  .c-coupon__main { padding: var(--space-3); }
  .c-coupon__pin { padding-inline: 0.5rem; }
  .c-coupon__pin-value { font-size: 0.8125rem; letter-spacing: 0; }
}

/* PIN·코드 크게 보기 */
.c-code { display: block; padding: var(--space-4) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-subtle); border: 1px dashed var(--color-border-strong); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.3; text-align: center; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }

/* 디지털 실천 인증서 */
.c-certcard { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--blue-800), var(--blue-900)); color: var(--color-text-inverse); }
.c-certcard::after {
  content: ""; position: absolute; right: 4.5rem; bottom: 0; z-index: -1; width: 46%; height: 70%; opacity: 0.12; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 38 46l14 16 30-48 26 40 18-22 34 44 16-18 24 42z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 38 46l14 16 30-48 26 40 18-22 34 44 16-18 24 42z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.c-certcard__title { margin-top: var(--space-2); font-size: 1.1875rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; padding-right: 4.5rem; }
.c-certcard__title em { color: var(--gold-300); }
.c-certcard__desc { color: rgba(255, 255, 255, 0.8); font-size: 0.8125rem; line-height: 1.5; }
.c-certcard__progress { margin-top: var(--space-4); padding-right: 5rem; }
.c-certcard__progress-row { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: 0.375rem; color: rgba(255, 255, 255, 0.8); font-size: 0.8125rem; }
.c-certcard__progress-row b { color: var(--gold-300); }
.c-certcard__seal {
  position: absolute; right: var(--space-4); bottom: var(--space-4); display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  border: 2px solid var(--gold-300); color: var(--gold-300); font-size: 0.9375rem; font-weight: 800; line-height: 1; text-align: center;
}
.c-certcard__seal small { display: block; font-size: 0.5rem; letter-spacing: 0.06em; margin-top: 0.125rem; }
.c-certcard__ribbon { position: absolute; right: -2.25rem; top: 0.875rem; width: 8rem; padding: 0.1875rem 0; transform: rotate(38deg); background: var(--gold-300); color: var(--blue-900); font-size: 0.8125rem; font-weight: 700; text-align: center; }

/* 10 코스·리포트·이용 방법 ------------------------------------------------------ */
.c-coursehead { padding: var(--space-4) var(--size-gutter) var(--space-3); background: var(--color-surface); }
.c-coursehead__route { display: flex; align-items: center; gap: 0.25rem; color: var(--color-primary); font-size: 0.9375rem; font-weight: 600; }
.c-coursehead__route .ic { font-size: 1rem; }
.c-coursehead__title { font-size: 1.5rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }

.c-coursecard { display: flex; flex-direction: column; gap: var(--space-3); }
.c-coursecard__route { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; color: var(--color-text-secondary); font-size: 0.9375rem; font-weight: 600; }
.c-coursecard__route .ic { font-size: 1rem; color: var(--gray-500); }
.c-coursecard__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }

.c-daylabel { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.75rem; border-radius: var(--radius-sm); background: var(--blue-200); color: var(--blue-700); font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.02em; }
.c-stop { display: flex; align-items: center; gap: var(--space-3); padding: 0.625rem; min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
a.c-stop:hover { border-color: var(--blue-300); }
.c-stop__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; flex: 1; min-width: 0; }
.c-stop__title { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.c-stop__num { color: var(--color-primary); font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.c-stop > .ic-chevron-right { flex: none; color: var(--gray-500); font-size: 1.25rem; }
.c-rest { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--orange-50); }
.c-rest__title { flex: 1; min-width: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }

/* ESG 리포트 공유 카드(이미지로 저장되는 영역, 4:5) */
.c-sharecard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 4 / 5; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--blue-900); color: var(--color-text-inverse); }
.c-sharecard__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.c-sharecard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 38, 74, 0.7) 0%, rgba(6, 38, 74, 0.25) 55%, rgba(6, 38, 74, 0.75) 100%); }
.c-sharecard__title { margin-top: var(--space-4); font-size: 1.5rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }
.c-sharecard__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: auto; }
.c-sharecard__metric { padding: 0.625rem 0.75rem; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c-sharecard__metric b { display: block; font-size: 1.375rem; font-weight: 800; line-height: 1.25; }
.c-sharecard__metric span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.86); }
.c-sharecard__foot { margin-top: var(--space-3); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.86); }

.c-metric { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.c-metric + .c-metric { border-top: 1px solid var(--color-border); }
.c-metric__body { flex: 1; min-width: 0; }
.c-metric__label { font-size: 0.9375rem; font-weight: 700; line-height: 1.4; }
.c-metric__meta { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.45; }
.c-metric__value { flex: none; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; text-align: right; }
.c-metric__value small { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-tertiary); margin-left: 0.125rem; }

/* 이용 방법 3단계(순서가 있는 안내) */
.c-howto { display: flex; flex-direction: column; gap: var(--space-4); counter-reset: howto; }
.c-howto__item { display: flex; align-items: flex-start; gap: var(--space-3); }
.c-howto__body { flex: 1; min-width: 0; }
.c-howto__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.c-howto__desc { color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.5; }

/* 리워드 요약 표(온보딩) */
.c-rewardlist { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.c-rewardlist__item { display: flex; align-items: center; gap: var(--space-3); padding: 0.875rem var(--space-4); }
.c-rewardlist__item + .c-rewardlist__item { border-top: 1px solid var(--color-border); }
.c-rewardlist__step { flex: none; width: 3.25rem; color: var(--color-primary); font-size: 0.9375rem; font-weight: 800; }
.c-rewardlist__body { flex: 1; min-width: 0; }
.c-rewardlist__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.c-rewardlist__cond { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.5; }

/* 글자 크기 미리보기(마이 > 글자 크기) */
.c-fontscale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.c-fontscale__btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.25rem; min-height: 4.5rem; padding: 0.625rem 0.25rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: 600; }
.c-fontscale__btn b { color: var(--color-text); line-height: 1; }
.c-fontscale__btn[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-subtler); color: var(--color-primary); }

/* 만족도 5점 척도 */
.c-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.c-scale__opt { position: relative; }
.c-scale__opt > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.c-scale__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-height: 3.75rem; padding: 0.375rem 0.125rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.8125rem; font-weight: 600; line-height: 1.25; text-align: center; }
.c-scale__box b { font-size: 1.1875rem; color: var(--color-text); }
.c-scale__opt > input:checked + .c-scale__box { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.c-scale__opt > input:checked + .c-scale__box b { color: var(--color-on-primary); }
.c-scale__opt > input:focus-visible + .c-scale__box { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* 11 그 밖의 이용자 화면 조각 ---------------------------------------------------- */
/* 이동 카드: 아이콘 타일 + 제목·설명 + 화살표(인증 선택, 코스 등) */
.c-navcard {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); min-width: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
a.c-navcard:hover { border-color: var(--blue-300); }
a.c-navcard:active { transform: scale(0.99); }
.c-navcard__body { flex: 1; min-width: 0; }
.c-navcard__title { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.c-navcard__desc { display: block; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.5; }
.c-navcard__meta { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.c-navcard > .ic-chevron-right { flex: none; color: var(--gray-500); font-size: 1.25rem; }

/* 지도 묶음 표시(광역 보기). 색 + 숫자 + 군 이름 */

/* 결과·상태 묶음(방문인증 등): 그림 + 제목 + 설명을 가운데 정렬 */
.c-statusblock { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.c-statusblock__title { font-size: 1.375rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.c-statusblock__desc { color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.55; max-width: 22rem; }

/* 번호 있는 안내 순서 */
.c-olist { display: flex; flex-direction: column; gap: var(--space-2); counter-reset: olist; padding: 0; list-style: none; }
.c-olist > li { position: relative; padding-left: 2rem; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.55; counter-increment: olist; }
.c-olist > li::before { content: counter(olist); position: absolute; left: 0; top: 0.0625rem; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--color-primary-subtle); color: var(--color-primary); font-size: 0.8125rem; font-weight: 700; }
/* 점 목록 */
.c-ulist { display: flex; flex-direction: column; gap: 0.375rem; padding: 0; list-style: none; }
.c-ulist > li { position: relative; padding-left: 1rem; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.55; }
.c-ulist > li::before { content: ""; position: absolute; left: 0.125rem; top: 0.625rem; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--gray-500); }

/* 화면 머리 문구(단계형 화면 첫머리) */
.c-headline { text-align: center; }
.c-headline__title { font-size: 1.5rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; color: var(--blue-700); }
.c-headline__title em { color: var(--color-secondary); }
.c-headline__title .ic { color: var(--color-secondary); font-size: 1.5rem; vertical-align: -0.15em; }
.c-headline__desc { margin-top: 0.25rem; color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.5; }

/* 아이콘이 붙은 3칸 요약(내 인증 내역 상단) */
.c-statline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-statline__item { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 0; padding-inline: 0.25rem; }
.c-statline__item + .c-statline__item { border-left: 1px solid var(--color-border); }
.c-statline__label { display: block; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--color-text-secondary); }
.c-statline__value { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--color-primary); }
@media (max-width: 359px) { .c-statline__item { flex-direction: column; gap: 0.25rem; text-align: center; } }

/* 자동 확인 결과 안의 통과 표시 */
.c-passlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.c-pass { display: flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 0.75rem; border: 1px solid var(--color-success-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.c-pass .ic { flex: none; font-size: 1.125rem; color: var(--color-success); }
.c-pass--fail { border-color: var(--color-danger-border); }
.c-pass--fail .ic { color: var(--red-500); }

/* 재고·선착순 표시 */
.c-stock { display: flex; flex-direction: column; gap: var(--space-2); }
.c-stock__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: 0.9375rem; color: var(--color-text-secondary); }
.c-stock__num { font-size: 1.375rem; font-weight: 800; color: var(--color-text); letter-spacing: -0.01em; }

/* 프로필 머리(마이) */
.c-profile { display: flex; align-items: center; gap: var(--space-3); }
.c-profile__name { font-size: 1.1875rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.c-profile__meta { color: var(--color-text-tertiary); font-size: 0.8125rem; line-height: 1.5; }
.c-menutitle { margin: var(--space-6) 0 var(--space-2); padding-inline: 0.25rem; color: var(--color-text-tertiary); font-size: 0.8125rem; font-weight: 700; }
/* 설정 줄: 이름 + 오른쪽 컨트롤 */
.c-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3.5rem; padding: 0.5rem var(--space-4); }
.c-setting + .c-setting { border-top: 1px solid var(--color-border); }
.c-setting__label { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.c-setting__desc { display: block; color: var(--color-text-tertiary); font-size: 0.8125rem; font-weight: 400; line-height: 1.5; }
.c-setting--stack { flex-direction: column; align-items: stretch; padding-block: var(--space-4); }

/* 전체 화면 안내(점검·오류) */
.c-fullmsg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); flex: 1; padding: var(--space-10) var(--space-6); text-align: center; }
.c-fullmsg__title { margin-top: var(--space-3); font-size: 1.5rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
.c-fullmsg__desc { color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.55; max-width: 22rem; }

/* 문의 답변 */
.c-answer { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-subtle); font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-secondary); }
.c-answer__from { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; color: var(--color-primary); font-size: 0.8125rem; font-weight: 700; }
.c-answer__from .ic { font-size: 1rem; }


/* 11-개발 추가 ------------------------------------------------------------------
   퍼블리싱 화면의 한 번짜리 style 속성을 클래스로 올린 것과, 개발에서 더한 화면 조각입니다(디자인가이드_2 "클래스 이름").
   이 줄 위쪽은 퍼블리싱 원본(design/jirisan-esg-ui/assets/css/user.css)과 같아야 합니다. 원본을 고치지 말고 여기에만 더합니다. */
/* 점검·오류 안내(U-25)의 화면 틀: 머리 여백, 안내를 세로 가운데에 두는 본문 */
.c-fullmsghead { margin-top: var(--space-4); }
.c-fullmsgmain { display: flex; flex-direction: column; }
/* 아래 선이 없는 필터 줄: 약관(U-22)의 문서 바로가기 */
.c-filterbar--flat { border-bottom: 0; }
/* 참여 등록(U-01): 전체 동의 아래 구분선의 좁은 여백, 수집 항목 표의 작은 글자 */
.c-divider--tight { margin: var(--space-2) 0; }
.c-prose--compact { font-size: 0.8125rem; line-height: 1.5; }
/* 참여 등록(U-01): 하단 행동 영역 안내 줄의 링크(이미 등록했어요 · 로그인). 누르는 높이를 확보 */
.c-actionbar__link { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* 마이(U-18): 글자 크기 단추의 견본 글자, 눈에 덜 띄는 참여 철회 단추 */
.c-fontscale__btn--md b { font-size: 1.0625rem; }
.c-fontscale__btn--lg b { font-size: 1.3125rem; }
.c-fontscale__btn--xl b { font-size: 1.625rem; }
.c-btn--quiet { --btn-fg: var(--color-text-tertiary); }
/* 거점 정보(U-04): 이름 아래 위치 줄의 조금 큰 글자 */
.c-spot__meta--lg { font-size: 0.9375rem; }
/* 인증거점 지도(U-03): 군별 묶음(c-cluster 그림)을 지도 위 HTML 마커로 올릴 때의 틀. 원의 가운데가 좌표에 오게 둡니다 */
.c-clustermark { position: absolute; display: block; width: 5rem; height: 6.25rem; transform: translate(-50%, -34.7%); }
.c-clustermark > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* QR 인증(U-06): 카메라 영상을 촬영 화면(c-scanner) 바닥에 깝니다. 테두리·안내는 그 위에 그대로 올라옵니다 */
.c-scanner__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* QR 인증(U-06): 상태 줄 안의 작은 스피너(퍼블리싱의 한 번짜리 style 속성을 올린 것) */
.c-spinner--xs { width: 1rem; height: 1rem; border-width: 2px; }
/* 행동인증(U-08): 오늘 이미 인증해 고를 수 없는 유형의 선택 카드 */
.c-choice--done { cursor: default; }
.c-choice--done > input { cursor: default; }
.c-choice--done > .c-choice__box { background: var(--color-surface-sunken); }
.c-choice--done:hover > .c-choice__box { border-color: var(--color-border); }
.c-choice--done .c-choice__mark { visibility: hidden; }
/* 행동인증(U-08): 폭을 채우는 가이드 단추, 가이드 목록의 줄 여백(퍼블리싱의 한 번짜리 style 속성을 올린 것) */
.c-navcard--block { width: 100%; }
.c-guiderow { padding-block: var(--space-3); }
/* 영수증 인증(U-09): 고른 영수증 사진을 촬영 화면(c-scanner) 가운데에 보여 줍니다(퍼블리싱의 견본 영수증 자리). 테두리·상태 줄은 그 위에 그대로 올라옵니다 */
.c-scanner__photo { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }
.c-scanner--tall .c-scanner__photo { max-height: 21rem; }
/* 홈(U-02)의 추천 코스: 군 이름 줄 끝에 붙는 일정 표시의 왼쪽 여백(퍼블리싱의 한 번짜리 style 속성을 올린 것) */
.c-coursecard__route > .c-tag { margin-left: var(--space-1); }
/* 점포 목록(U-17·U-04)과 설정 줄을 담는 카드: 줄마다 위아래 여백이 있어 카드의 위아래 여백을 뺍니다. 그 안의 설정 줄은 좌우 여백을 뺍니다(퍼블리싱의 style 속성을 올린 것) */
.c-card--rows { padding-block: 0; }
.c-setting--inset { padding-inline: 0; }
/* ESG 여행 리포트(U-16): 공유 카드의 기간 줄(퍼블리싱의 style 속성을 올린 것) */
.c-sharecard__period { margin-top: var(--space-1); }
/* 인증거점 지도(U-03): 검색 조건이 켜져 있을 때 검색 조건 단추에 찍는 점 */
.c-search__btn--mark { position: relative; }
.c-search__mark { position: absolute; top: 0.625rem; right: 0.625rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 2px var(--color-surface); }
/* 홈(U-02)의 홈 화면에 추가 안내(PWA, NFR-24): 안내 상자 안의 단추 줄 */
.c-pwainstall__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
/* 모든 이용자 화면(QL-190): 하단 탭·행동 영역이 화면 아래에 붙어 있어(sticky) 키보드로 옮긴 초점이 그 밑에 들어갈 수 있으므로(WCAG 2.2의 2.4.11),
   문서 스크롤의 아래 여백을 둘 가운데 더 높은 행동 영역(단추 + 위아래 여백 + 안전 영역)만큼 둡니다. 공통 CSS는 그대로입니다 */
/* 2026. 10. 18. 접근성 점검: 참여 등록 첫 화면의 행동 영역은 안내 두 줄이 더 있어 약 157px이고(2.4.11), 320px·글자 125%의 WebKit 에서는 안내가 더 감겨 185px까지 커지므로
   그만큼(+8rem, 기본 글자에서 약 220px) 더 둡니다. 스크롤 아래 여백은 초점 이동 때만 쓰여 화면 모양에는 영향이 없습니다 */
html { scroll-padding-bottom: calc(var(--size-control-lg) + var(--space-3) * 2 + var(--space-4) + 8rem + env(safe-area-inset-bottom, 0px)); }
/* 참여 등록(U-01, QL-191): 359px 이하에서는 번호 입력란이 010-0000-0000 13글자를 다 보이도록 "인증번호 받기" 단추를 입력란 아래로 내립니다 */
@media (max-width: 359px) {
  .c-inputgroup--stack-sm { flex-wrap: wrap; }
  .c-inputgroup--stack-sm > .c-input { flex-basis: 100%; }
  .c-inputgroup--stack-sm > .c-btn { flex: 1 1 auto; }
}
/* QR 인증(U-06, QL-194): 실패 상태 줄("인식하지 못했어요")의 아이콘은 실패 색. 어두운 바탕이라 글자용 진한 빨강 대신 밝은 단계를 씁니다(판독 중의 초록이 green-400인 것과 같음) */
.c-scanner__status[data-show="fail"] .ic { color: var(--red-500); }
/* 행동인증(U-08, QL-197): 사진 칸이 둘(잔반제로 식사 전·후)이면 나란히 두지 않고 위아래로 쌓아 16:9로 넓힙니다. 지우기 단추(누르는 넓이 때문에 큼)가 사진을 덜 가립니다 */
.c-photoslots--stack { grid-template-columns: minmax(0, 1fr); }
.c-photoslots--stack .c-photoslot { aspect-ratio: 16 / 9; }
/* 참여 등록(U-01)의 집 주소 단계와 거주지 확인(U-26)의 상태 이름(QL-221): 공통 CSS(base.css 7장)의 상태 목록에 없는 이름은 여기서 숨깁니다 */
[data-state="address"] [data-show]:not([data-show~="address"]) { display: none !important; }
[data-state="none"] [data-show]:not([data-show~="none"]) { display: none !important; }
[data-state="saved"] [data-show]:not([data-show~="saved"]) { display: none !important; }
[data-state="edit"] [data-show]:not([data-show~="edit"]) { display: none !important; }
[data-state="far"] [data-show]:not([data-show~="far"]) { display: none !important; }
[data-state="low"] [data-show]:not([data-show~="low"]) { display: none !important; }
/* 집 주소 검색(U-01·U-26, QL-228): 하단 시트 안에 카카오 우편번호 서비스의 검색 창을 넣는 자리. 높이를 정해 줘야 검색 결과가 보입니다(dvh를 모르는 브라우저는 vh) */
.c-addresssearch { height: min(30rem, 62vh); height: min(30rem, 62dvh); margin-top: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
/* 검색으로 고른 주소가 들어가는 읽기 전용 입력란: 공통의 readonly 모양(쓸 수 없는 칸처럼 흐림) 대신 보통 입력란처럼 보이게 하고, 누르면 검색이 열립니다(QL-228) */
.c-input--picked[readonly] { border-color: var(--color-border-strong); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.c-addresssearch__loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 100%; margin: 0; color: var(--color-text-secondary); }
/* 만족도 조사(U-23, 디자인 검수 2026. 10. 15.): 이름이 두 줄인 칸("매우 불만")과 한 줄인 칸의 높이가 달라 보이지 않게, 칸 안의 상자를 격자 칸 높이에 맞춥니다(다섯 칸이 같은 높이) */
.c-scale__opt { display: flex; }
.c-scale__box { flex: 1 1 auto; }
/* 언어 선택(WO-32, USR-13): 마이 설정의 두 언어 칩(c-chip 재사용, aria-current 가 고른 언어)과 첫 화면 머리·푸터의 "다른 언어" 링크 */
.c-langswitch { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c-langswitch__item--hero { display: inline-flex; align-items: center; min-height: var(--size-tap); padding: 0 var(--space-2); color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
/* 화면 모드(WO-33, USR-16): 마이 설정의 어둡게·기기 설정. 디자인 토큰(tokens.css)은 밝은 단일 테마라 여기(개발 구역)에서 의미 토큰을
   덮어씁니다. 두 블록은 같은 값이어야 합니다(어둡게 = html[data-theme="dark"], 기기 설정 = system + prefers-color-scheme: dark).
   새 색은 토큰 램프(--blue-*, --green-* …)와 그 반투명값만 씁니다. 관리자 화면은 data-theme 을 두지 않아 그대로 밝습니다. */
html[data-theme="dark"] {
  color-scheme: dark;
  /* 회색 램프를 뒤집습니다. 의미 토큰(--color-bg·surface·text·border)은 램프를 가리키므로 함께 바뀝니다. */
  --gray-0: #1C2638;
  --gray-50: #0F1B30;
  --gray-100: #243043;
  --gray-200: #34425A;
  --gray-300: #46546A;
  --gray-400: #6B7A90;
  --gray-500: #8A98AB;
  --gray-600: #A9B5C5;
  --gray-700: #C9D2DC;
  --gray-800: #E2E8EF;
  --gray-900: #F5F7FA;
  /* 옅은 바탕(50·100 단계)을 공통 CSS 가 직접 쓰는 곳(안내 상자·태그·hover)도 어둡게. */
  --blue-50: #16263D;
  --blue-100: #1B3252;
  --sky-50: #122A38;
  --sky-100: #15364A;
  --green-50: #142A1F;
  --green-100: #173A29;
  --orange-50: #33220F;
  --orange-100: #422A12;
  --amber-50: #2E2611;
  --amber-100: #3D3212;
  --red-50: #351A16;
  --red-100: #46201A;
  /* 어두운 바탕 위 글자·채움: 600·700 단계는 너무 어두워 밝은 단계로 바꿉니다. */
  --color-text-inverse: #FFFFFF;
  --color-on-primary: #FFFFFF;
  --color-focus-inverse: #FFFFFF;
  --color-text-link: var(--blue-300);
  --color-primary: var(--blue-500); /* 앱바·주 버튼 채움(흰 글자 4.6:1). 글자로 쓰는 곳은 아래 구성 요소 규칙이 blue-300 으로 올림 */
  --color-primary-hover: var(--blue-400);
  --color-primary-active: var(--blue-300);
  --color-primary-subtle: rgba(31, 116, 196, 0.22);
  --color-primary-subtler: rgba(31, 116, 196, 0.12);
  --color-border-selected: var(--blue-400);
  --color-secondary: var(--green-400);
  --color-accent-text: var(--orange-400);
  --color-success: var(--green-400);
  --color-success-text: var(--green-200);
  --color-success-bg: rgba(38, 135, 85, 0.22);
  --color-success-border: rgba(76, 175, 122, 0.45);
  --color-warning-text: var(--amber-200);
  --color-warning-bg: rgba(230, 161, 23, 0.2);
  --color-warning-border: rgba(230, 161, 23, 0.45);
  --color-danger-text: var(--red-200);
  --color-danger-bg: rgba(220, 74, 49, 0.22);
  --color-danger-bg-subtle: rgba(220, 74, 49, 0.12);
  --color-danger-border: rgba(220, 74, 49, 0.45);
  --color-info: var(--blue-400);
  --color-info-text: var(--blue-200);
  --color-info-bg: rgba(31, 116, 196, 0.22);
  --color-info-border: rgba(94, 158, 223, 0.45);
  --color-nature: var(--green-400);
  --color-nature-text: var(--green-200);
  --color-nature-bg: rgba(38, 135, 85, 0.22);
  --color-history: var(--orange-400);
  --color-history-text: var(--orange-200);
  --color-history-bg: rgba(230, 122, 18, 0.22);
  --color-activity: var(--sky-400);
  --color-activity-text: var(--sky-200);
  --color-activity-bg: rgba(15, 138, 194, 0.24);
  --color-visit: var(--blue-400);
  --color-visit-bg: rgba(31, 116, 196, 0.22);
  --color-action: var(--green-400);
  --color-action-bg: rgba(38, 135, 85, 0.22);
  --color-spend: var(--orange-400);
  --color-spend-bg: rgba(230, 122, 18, 0.22);
  --color-overlay: rgba(0, 0, 0, 0.64);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
  color-scheme: dark;
  /* 회색 램프를 뒤집습니다. 의미 토큰(--color-bg·surface·text·border)은 램프를 가리키므로 함께 바뀝니다. */
  --gray-0: #1C2638;
  --gray-50: #0F1B30;
  --gray-100: #243043;
  --gray-200: #34425A;
  --gray-300: #46546A;
  --gray-400: #6B7A90;
  --gray-500: #8A98AB;
  --gray-600: #A9B5C5;
  --gray-700: #C9D2DC;
  --gray-800: #E2E8EF;
  --gray-900: #F5F7FA;
  /* 옅은 바탕(50·100 단계)을 공통 CSS 가 직접 쓰는 곳(안내 상자·태그·hover)도 어둡게. */
  --blue-50: #16263D;
  --blue-100: #1B3252;
  --sky-50: #122A38;
  --sky-100: #15364A;
  --green-50: #142A1F;
  --green-100: #173A29;
  --orange-50: #33220F;
  --orange-100: #422A12;
  --amber-50: #2E2611;
  --amber-100: #3D3212;
  --red-50: #351A16;
  --red-100: #46201A;
  /* 어두운 바탕 위 글자·채움: 600·700 단계는 너무 어두워 밝은 단계로 바꿉니다. */
  --color-text-inverse: #FFFFFF;
  --color-on-primary: #FFFFFF;
  --color-focus-inverse: #FFFFFF;
  --color-text-link: var(--blue-300);
  --color-primary: var(--blue-500); /* 앱바·주 버튼 채움(흰 글자 4.6:1). 글자로 쓰는 곳은 아래 구성 요소 규칙이 blue-300 으로 올림 */
  --color-primary-hover: var(--blue-400);
  --color-primary-active: var(--blue-300);
  --color-primary-subtle: rgba(31, 116, 196, 0.22);
  --color-primary-subtler: rgba(31, 116, 196, 0.12);
  --color-border-selected: var(--blue-400);
  --color-secondary: var(--green-400);
  --color-accent-text: var(--orange-400);
  --color-success: var(--green-400);
  --color-success-text: var(--green-200);
  --color-success-bg: rgba(38, 135, 85, 0.22);
  --color-success-border: rgba(76, 175, 122, 0.45);
  --color-warning-text: var(--amber-200);
  --color-warning-bg: rgba(230, 161, 23, 0.2);
  --color-warning-border: rgba(230, 161, 23, 0.45);
  --color-danger-text: var(--red-200);
  --color-danger-bg: rgba(220, 74, 49, 0.22);
  --color-danger-bg-subtle: rgba(220, 74, 49, 0.12);
  --color-danger-border: rgba(220, 74, 49, 0.45);
  --color-info: var(--blue-400);
  --color-info-text: var(--blue-200);
  --color-info-bg: rgba(31, 116, 196, 0.22);
  --color-info-border: rgba(94, 158, 223, 0.45);
  --color-nature: var(--green-400);
  --color-nature-text: var(--green-200);
  --color-nature-bg: rgba(38, 135, 85, 0.22);
  --color-history: var(--orange-400);
  --color-history-text: var(--orange-200);
  --color-history-bg: rgba(230, 122, 18, 0.22);
  --color-activity: var(--sky-400);
  --color-activity-text: var(--sky-200);
  --color-activity-bg: rgba(15, 138, 194, 0.24);
  --color-visit: var(--blue-400);
  --color-visit-bg: rgba(31, 116, 196, 0.22);
  --color-action: var(--green-400);
  --color-action-bg: rgba(38, 135, 85, 0.22);
  --color-spend: var(--orange-400);
  --color-spend-bg: rgba(230, 122, 18, 0.22);
  --color-overlay: rgba(0, 0, 0, 0.64);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.55);
  }
}
/* 어두운 화면에서 흰 바탕을 가정한 그림·칩을 살짝 눌러 줍니다. */
html[data-theme="dark"] .c-brand__mark,
html[data-theme="dark"] .c-hero__art { filter: brightness(0.92); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .c-brand__mark,
  html[data-theme="system"] .c-hero__art { filter: brightness(0.92); }
}
/* 어두운 화면에서 주 색(blue-500)을 글자로 쓰는 곳은 밝은 단계로 올리고, 획득한 스탬프 도장은 어두운 주황 바탕 위 밝은 글자로. */
html[data-theme="dark"] .c-rewardlist__step,
html[data-theme="dark"] .c-fontscale__btn[aria-pressed="true"],
html[data-theme="dark"] .c-tabbar__item[aria-current="page"] { color: var(--blue-300); }
html[data-theme="dark"] .c-rewardtrack__step[aria-current="step"],
html[data-theme="dark"] .c-rewardtrack__step[aria-current="step"] .c-rewardtrack__node,
html[data-theme="dark"] .c-stage[aria-current="step"] .c-stage__mark { color: var(--blue-300); }
html[data-theme="dark"] .c-btn--ghost,
html[data-theme="dark"] .c-btn--outline,
html[data-theme="dark"] .c-btn--secondary { --btn-fg: var(--blue-300); --btn-bd: var(--blue-300); }
html[data-theme="dark"] .c-stamp.is-earned .c-stamp__seal { color: var(--orange-200); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .c-rewardlist__step,
  html[data-theme="system"] .c-fontscale__btn[aria-pressed="true"],
  html[data-theme="system"] .c-tabbar__item[aria-current="page"] { color: var(--blue-300); }
  html[data-theme="system"] .c-rewardtrack__step[aria-current="step"],
  html[data-theme="system"] .c-rewardtrack__step[aria-current="step"] .c-rewardtrack__node,
  html[data-theme="system"] .c-stage[aria-current="step"] .c-stage__mark { color: var(--blue-300); }
  html[data-theme="system"] .c-btn--ghost,
  html[data-theme="system"] .c-btn--outline,
  html[data-theme="system"] .c-btn--secondary { --btn-fg: var(--blue-300); --btn-bd: var(--blue-300); }
  html[data-theme="system"] .c-stamp.is-earned .c-stamp__seal { color: var(--orange-200); }
}
/* 어두운 화면의 앱바(탭 포함)는 한 단계 깊은 파랑: 반투명 흰 글자(탭)가 4.5:1 을 넘도록. */
html[data-theme="dark"] .c-appbar:not(.c-appbar--plain),
html[data-theme="dark"] .c-tabs--on-brand { background: var(--blue-600); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .c-appbar:not(.c-appbar--plain),
  html[data-theme="system"] .c-tabs--on-brand { background: var(--blue-600); }
}
/* 긴 글자·영어 검토(2026. 10. 18., docs/qa/UX-검토-2026-10-17.md 8장) */
/* U-10 요약 띠: 영어는 "Visit certification"처럼 낱말이 길어 아이콘 옆 좁은 칸에서 낱말 가운데가 꺾임. 영어에서는 359px 이하와 같이 아이콘 아래로 쌓음. */
html[lang="en"] .c-statline__item { flex-direction: column; gap: 0.25rem; text-align: center; }
/* 리포트의 등록한 게시물 주소: 띄어쓰기 없는 긴 주소가 열 줄 넘게 차지하지 않게 세 줄까지만 보이고 줄임(전체 주소는 운영자 화면에서 봄). */
.c-review-url { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* 홈(U-02)·참여 등록(U-01)·오픈 알림(U-24) 상단 실사 사진(2026. 10. 18. 지시): static/ui/img/hero/jirisan.webp|jpg 가 배포에 있으면 ViewGlobals 가 c-hero--photo 를 붙임.
   사진 위 글자가 읽히도록 스크림(공통 CSS와 같은 남색의 반투명값)을 더 진하게 깔고, 사진은 가운데 위쪽을 보이게 함. 어두운 화면은 조금 더 어둡게. */
.c-hero--photo .c-hero__art { object-position: center 40%; }
.c-hero--photo::before {
  background:
    linear-gradient(105deg, rgba(6, 38, 74, 0.86) 0%, rgba(6, 38, 74, 0.68) 48%, rgba(6, 38, 74, 0.22) 100%),
    linear-gradient(180deg, rgba(6, 38, 74, 0.35) 0%, rgba(6, 38, 74, 0.15) 55%, rgba(6, 38, 74, 0.55) 100%);
}
html[data-theme="dark"] .c-hero--photo .c-hero__art { filter: brightness(0.8); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .c-hero--photo .c-hero__art { filter: brightness(0.8); }
}
/* 상단 사진 슬라이드(WO-36): 관리자가 올린 사진이 여럿이면 겹쳐 두고 하나씩 보임(투명도 전환). 점 표시(인디케이터)는 단추라 키보드로도 고를 수 있음.
   점은 탭 크기(44px)를 지키고 가운데 점만 그림. 색은 어두운 채움 위 글자 토큰(흰색·반투명 흰색). 움직임 줄이기면 전환 없이 바로 바뀜. */
.c-hero__slides { position: absolute; inset: 0; z-index: -2; }
.c-hero__slides .c-hero__art { opacity: 0; transition: opacity 0.6s ease; }
.c-hero__slides .c-hero__art.is-active { opacity: 1; }
/* 점 표시 자리: 홈은 겹침 카드(l-section--overlap, 4.5rem)가 아래를 덮으므로 그 위 1rem, 단독 히어로(참여 등록·오픈 알림)는 아래 가장자리에서 1.25rem. 글자 덩어리와 겹치지 않음. */
.c-hero__dots { position: absolute; left: var(--size-gutter); bottom: calc(4.5rem + 1rem); z-index: 1; display: flex; gap: 0.125rem; margin: 0; padding: 0; }
.c-hero--standalone .c-hero__dots { bottom: 1.25rem; }
.c-hero__dot { position: relative; width: var(--size-tap); height: var(--size-tap); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.c-hero__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--color-text-inverse-secondary); transform: translate(-50%, -50%); transition: width 0.2s ease, background-color 0.2s ease; }
.c-hero__dot[aria-current="true"]::before { width: 1.25rem; background: var(--color-text-inverse); }
.c-hero__dot:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: -0.5rem; }
/* 멈춤 단추(WCAG 2.2.2): 점과 같은 크기, 점 대신 아이콘 */
.c-hero__pause { margin-left: 0.25rem; color: var(--color-text-inverse); }
.c-hero__pause::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  .c-hero__slides .c-hero__art, .c-hero__dot::before { transition: none; }
}

/* 세그먼트·칩 단추의 글자 세로 가운데(2026. 10. 19. 사용자 지시 "버튼 글자 가운데 정렬"): 줄 높이 1인 한글 글자는 줄 상자 가운데보다 약 1.5px 위에
   그려져 글자가 떠 보입니다(내 인증 내역 U-10 상태 필터 등). 위쪽 안쪽 여백 2px로 잉크를 1px 내려 상자 가운데에 맞춥니다(폭·높이는 그대로).
   같은 줄 높이의 칩(지도 군 선택, FAQ 분류, 코스 축)에도 같은 값을 둡니다. 관리자 화면은 admin.css 가 따로 가짐. */
.c-segmented__btn, .c-segmented--spread .c-segmented__btn { padding-top: 0.125rem; } /* 균등 필터는 두 클래스 규칙이 padding 을 덮으므로 같은 세기로 */
.c-chip { padding-top: 0.125rem; }