/* ==========================================================================
   지리산권 ESG 가치여행 — base.css
   1. 리셋  2. 문서 기본  3. 초점·모션  4. 레이아웃 기본형(l-)  5. 유틸리티(u-)
   클래스 규칙: c- 컴포넌트 · l- 레이아웃 · u- 유틸리티 · t- 글자 스타일 · is-/has- 상태 · ic- 아이콘
   상태는 가능한 한 ARIA 속성(aria-current, aria-pressed, aria-selected, aria-expanded,
   aria-invalid, disabled)으로 표현하고 CSS가 그 속성을 따라갑니다.
   ========================================================================== */

/* 1. 리셋 ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;                    /* 1rem = 16px. 브라우저·OS 글자 확대를 막지 않습니다. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* 마이 > 글자 크기 설정(ui.js가 <html data-font-scale>을 바꿉니다) */
html[data-font-scale="lg"] { font-size: 112.5%; }
html[data-font-scale="xl"] { font-size: 125%; }
/* (선택) iOS '더 큰 텍스트' 설정 연동. 실기기 검증 후 <html class="use-dynamic-type">로 켭니다. */
@supports (font: -apple-system-body) {
  html.use-dynamic-type { font: -apple-system-body; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;               /* 17px */
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;               /* 한글은 어절 단위로 줄바꿈 */
  overflow-wrap: anywhere;            /* 긴 영문·URL은 넘치지 않게 끊음 */
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul[class], ol[class] { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th { font-weight: inherit; text-align: inherit; }
address, em, i { font-style: normal; }
strong, b { font-weight: 700; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
dialog { padding: 0; border: 0; color: inherit; max-width: none; max-height: none; }
dialog:focus-visible { outline: none; }          /* 열릴 때 창 자체에 생기는 초점 테두리는 숨깁니다(안쪽 요소의 초점은 그대로) */
[hidden] { display: none !important; }

/* 2. 문서 기본 ------------------------------------------------------------ */
::selection { background: var(--blue-200); color: var(--gray-900); }
::placeholder { color: var(--gray-600); opacity: 1; }   /* 예시 글자도 4.5:1 유지 */

/* 3. 초점·모션 ------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.is-on-dark :focus-visible,
.is-on-dark:focus-visible { outline-color: var(--color-focus-inverse); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. 레이아웃 기본형 -------------------------------------------------------- */
/* 간격은 수정자 클래스(--xs/sm/md/lg/xl)로만 바꿉니다.
   사용자 정의 속성(--gap)은 안쪽 레이아웃으로 상속되어 간격이 새므로 쓰지 않습니다. */

/* 세로 쌓기 */
.l-stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.l-stack--xs { gap: var(--space-1); }
.l-stack--sm { gap: var(--space-2); }
.l-stack--md { gap: var(--space-3); }
.l-stack--lg { gap: var(--space-6); }
.l-stack--xl { gap: var(--space-8); }

/* 가로 묶음: 넘치면 줄바꿈 */
.l-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.l-cluster--xs { gap: var(--space-1); }
.l-cluster--md { gap: var(--space-3); }
.l-cluster--lg { gap: var(--space-4); }
.l-cluster--between { justify-content: space-between; }
.l-cluster--end { justify-content: flex-end; }
.l-cluster--nowrap { flex-wrap: nowrap; }

/* 가로 한 줄: 줄바꿈 없음, 가운데 정렬 */
.l-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.l-row--sm { gap: var(--space-2); }
.l-row--lg { gap: var(--space-4); }
.l-row--top { align-items: flex-start; }
.l-row > .l-row__grow { flex: 1; min-width: 0; }

/* 균등 격자 */
.l-grid { display: grid; gap: var(--space-3); }
.l-grid--sm { gap: var(--space-2); }
.l-grid--lg { gap: var(--space-4); }
.l-grid--top { align-items: start; }
.l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.l-grid--auto { grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 9rem), 1fr)); }

/* 가로 스크롤 줄(칩 목록 등): 스크롤바 숨김, 양끝 여백 유지 */
.l-scroller {
  position: relative; display: flex; gap: var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-inline: var(--size-gutter); scroll-padding-inline: var(--size-gutter);
}
.l-scroller::-webkit-scrollbar { display: none; }
.l-scroller > * { flex: none; }

/* 5. 유틸리티 -------------------------------------------------------------- */
.u-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* 본문 바로가기: 키보드 초점이 오면 화면에 나타남 */
.u-skip {
  position: absolute; left: var(--space-2); top: var(--space-2); z-index: 1000;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-primary); font-weight: 700;
  box-shadow: var(--shadow-md); transform: translateY(-200%);
}
.u-skip:focus { transform: none; }

.u-num { font-variant-numeric: tabular-nums; }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-grow { flex: 1; min-width: 0; }
.u-none { display: none; }

.u-text { color: var(--color-text); }
.u-text-secondary { color: var(--color-text-secondary); }
.u-text-tertiary { color: var(--color-text-tertiary); }
.u-text-primary { color: var(--color-primary); }
.u-text-green { color: var(--color-success-text); }
.u-text-accent { color: var(--color-accent-text); }
.u-text-danger { color: var(--color-danger-text); }
.u-text-warning { color: var(--color-warning-text); }
.u-text-inverse { color: var(--color-text-inverse); }
.u-weight-regular { font-weight: 400; }
.u-weight-semibold { font-weight: 600; }
.u-weight-bold { font-weight: 700; }

.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-pad { padding: var(--space-4); }
.u-gutter { padding-inline: var(--size-gutter); }

/* 링크 모양(본문 안 링크, '더보기') */
.u-link { color: var(--color-text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.u-link:hover { color: var(--color-primary-hover); }

/* 6. 화면 상태 전환 ---------------------------------------------------------
   컨테이너에 data-state="상태", 자식에 data-show="보일 상태들(공백 구분)"을 답니다.
   컨테이너의 data-state 값만 바꾸면(서버 렌더링이든 스크립트든) 해당 블록만 남습니다.
   · 상태 이름은 아래 목록만 사용합니다. 새 상태가 필요하면 여기에 한 줄 추가합니다.
   · data-state 컨테이너를 중첩하지 않습니다.
   -------------------------------------------------------------------------- */
[data-state="loading"] [data-show]:not([data-show~="loading"]) { display: none !important; }
[data-state="empty"] [data-show]:not([data-show~="empty"]) { display: none !important; }
[data-state="error"] [data-show]:not([data-show~="error"]) { display: none !important; }
[data-state="ready"] [data-show]:not([data-show~="ready"]) { display: none !important; }
[data-state="locating"] [data-show]:not([data-show~="locating"]) { display: none !important; }
[data-state="outside"] [data-show]:not([data-show~="outside"]) { display: none !important; }
[data-state="inside"] [data-show]:not([data-show~="inside"]) { display: none !important; }
[data-state="done"] [data-show]:not([data-show~="done"]) { display: none !important; }
[data-state="hold"] [data-show]:not([data-show~="hold"]) { display: none !important; }
[data-state="denied"] [data-show]:not([data-show~="denied"]) { display: none !important; }
[data-state="offline"] [data-show]:not([data-show~="offline"]) { display: none !important; }
[data-state="duplicate"] [data-show]:not([data-show~="duplicate"]) { display: none !important; }
[data-state="scanning"] [data-show]:not([data-show~="scanning"]) { display: none !important; }
[data-state="result"] [data-show]:not([data-show~="result"]) { display: none !important; }
[data-state="fail"] [data-show]:not([data-show~="fail"]) { display: none !important; }
[data-state="unmet"] [data-show]:not([data-show~="unmet"]) { display: none !important; }
[data-state="submitted"] [data-show]:not([data-show~="submitted"]) { display: none !important; }
[data-state="soldout"] [data-show]:not([data-show~="soldout"]) { display: none !important; }
[data-state="step1"] [data-show]:not([data-show~="step1"]) { display: none !important; }
[data-state="step2"] [data-show]:not([data-show~="step2"]) { display: none !important; }
[data-state="step3"] [data-show]:not([data-show~="step3"]) { display: none !important; }
[data-state="step4"] [data-show]:not([data-show~="step4"]) { display: none !important; }
[data-state="map"] [data-show]:not([data-show~="map"]) { display: none !important; }
[data-state="overview"] [data-show]:not([data-show~="overview"]) { display: none !important; }
[data-state="list"] [data-show]:not([data-show~="list"]) { display: none !important; }
[data-state="on"] [data-show]:not([data-show~="on"]) { display: none !important; }
[data-state="off"] [data-show]:not([data-show~="off"]) { display: none !important; }

/* 7. 글자 스타일 ------------------------------------------------------------- */
/* ── 글자 스타일(tokens.mjs에서 생성). 크기는 rem이라 글자 확대 설정을 따릅니다. ── */
.t-display { font-size: 1.75rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; } /* 28px · 히어로 헤드라인. 화면당 1회. */
.t-title-xl { font-size: 1.5rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; } /* 24px · 결과·온보딩 화면 대제목, 관리자 페이지 제목. */
.t-title-lg { font-size: 1.375rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.015em; } /* 22px · 모달 제목, 강조 제목. */
.t-title-md { font-size: 1.1875rem; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; } /* 19px · 섹션 제목, 앱바 제목. */
.t-title-sm { font-size: 1.0625rem; line-height: 1.45; font-weight: 700; letter-spacing: -0.005em; } /* 17px · 카드·목록 항목 제목. */
.t-body-lg { font-size: 1.0625rem; line-height: 1.6; font-weight: 400; letter-spacing: 0; } /* 17px · 본문(읽는 글): FAQ 답변, 약관, 안내문. */
.t-body-md { font-size: 0.9375rem; line-height: 1.55; font-weight: 400; letter-spacing: 0; } /* 15px · 보조 설명, 목록 메타. */
.t-caption { font-size: 0.8125rem; line-height: 1.5; font-weight: 400; letter-spacing: 0; } /* 13px · 캡션, 날짜, 각주. 가장 작은 글자. */
.t-label-lg { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; } /* 17px · 큰 버튼. */
.t-label-md { font-size: 0.9375rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; } /* 15px · 기본 버튼, 칩, 탭, 입력 라벨. */
.t-label-sm { font-size: 0.8125rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; } /* 13px · 배지, 태그, 하단 탭 이름. */
.t-number-xl { font-size: 2rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; } /* 32px · KPI·금액 강조 숫자. */
.t-number-lg { font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; } /* 24px · 통계 타일 숫자. */