/* 파운데이션 : 폰트 선언 · :root 토큰 · 리셋 (변환 시 최우선 로드) */
@charset "utf-8";
/* ============================================================
   소담스퀘어 경북 기획관 협업 포털 — 공통 스타일 v3
   기준: 클로드 디자인 시안 `소담스퀘어 경북 서비스페이지.dc.html` 실측
         + SPEC.md 6-2절 A / docs/디자인가이드.md

   [이 파일의 성격]
   시안은 클래스가 하나도 없고 인라인 style 712개로만 짜인 `min-width:1440px`
   데스크톱 전용 문서다. 이 파일은 그 인라인 값을 토큰과 클래스로 옮기고,
   시안에 없던 반응형을 새로 얹은 것이다.

   [규칙]
   1. 색·간격·라운드·타이포·그리드 비율은 시안 실측값을 그대로 쓴다.
      임의로 다듬지 않는다. 값 옆 주석의 숫자가 시안 원본이다.
   2. `min-width:1440px` 은 이식하지 않는다. 대신 브레이크포인트를 만든다.
        ≥1200px  시안 원본 그대로 (이 파일의 기본값 = 데스크톱 퍼스트)
        768~1199px  2열
        <768px      1열 스택
   3. 16px 하한 — 어떤 브레이크포인트에서도, 미디어쿼리 안쪽을 포함해서.
      (이용자의 60대 이상 비중 42.3% / SPEC 0장 · 6-2 A)
      "본문만"이 아니라 이용자가 눈으로 읽는 글자는 전부 해당한다. 시안이
      15/14/13/12px 로 쓴 라벨·배지·힌트·캡션·칩·푸터·네비도 16px 로 올렸다.
        16px 이상 : 문단 / 카드 설명 / 표 값 / FAQ 답 / 안내박스 본문 / 체크리스트
                    / 입력값·폼 라벨·힌트·오류 / 배지·태그 / 네비·CTA / 푸터
        예외(순수 장식) : --fs-deco 12px = 라틴 아이브로우(VALUE·PROCESS·FOR YOU)
                          --fs-glyph 13px = 원 안의 번호·기호 글리프(①·1)
      --fs-label / --fs-cap / --fs-micro 는 이름만 남고 값은 전부 16px 이다.
      새 규칙을 미디어쿼리 안에 넣을 때 이 셋을 다시 내리지 말 것.
   4. 터치 대상 48px 이상 — 어떤 브레이크포인트에서도.
      시안의 헤더 CTA 44px 는 48px 로 올린다. (유일한 치수 상향)
   5. 외부 CDN·웹폰트 금지. Pretendard 는 폰트 스택으로만 적는다.
   6. 상세페이지(.st-detail)에는 절대 영향을 주지 않는다(21장 격리 블록).

   [클래스 이름 규약]
   4개 페이지가 공유하는 것만 이 파일에 둔다. 전부 `st-` 접두어.
   페이지 고유 스타일은 각 페이지의 <style> 에 두고 `ik-`(intake)
   `pv-`(preview) `a-`(apply) 같은 자기 접두어를 쓴다.

   [목차]
    1 토큰            2 리셋/기본        3 레이아웃·그리드
    4 헤더/네비/고지  5 히어로           6 섹션·제목·아이브로우
    7 버튼            8 카드             9 배지·태그·번호
   10 지표 칩        11 안내 박스       12 ✓/× 대비 리스트
   13 절차·진행단계  14 아코디언        15 다크 밴드·페이지헤드
   16 표             17 폼              18 푸터
   19 유틸           20 반응형          21 레거시 별칭
   22 상세페이지 격리 23 인쇄
   ============================================================ */

/* ============================================================
   1. 토큰
   ------------------------------------------------------------
   값 뒤 주석은 시안에서 몇 번 쓰였는지 / 어디에 쓰였는지다.
   ============================================================ */
:root {
  color-scheme: light;

  /* ---- 색 : 시안 실측 ---- */
  --green:        #2C5943;  /* 94회 — 주 색, CTA, 링크, 강조 */
  --green-dark:   #1E3A2A;  /*  8회 — 다크 섹션 / 밴드 배경 */
  --green-hover:  #244836;  /* 13회 — CTA hover */
  --green-weak:   #F0EFE6;  /* 14회 — 번호 뱃지·배지 배경 */
  --green-weak-2: #EDEFE7;  /*        히어로 아이브로우 배지 */
  --tint:         #F7F6F1;  /* 40회 — 섹션 배경 1, 표 헤더셀 */
  --tint-2:       #FFFBF0;  /* 11회 — 섹션 배경 2, 강조 박스 */
  --tint-3:       #FBFAF6;  /*        폼 화면 바탕 */
  --cream:        #FFFBF0;  /*  4회 — 주의 안내 박스 */
  --gold:         #C9A227;  /*  3회 — 크림 박스 좌측 룰 */

  --fg:           #23241F;  /* 105회 — 본문/강한 텍스트 */
  --heading:      #1E3A2A;  /* 26회 — 제목 */
  --body:         #55564F;  /* 101회 — 보조 본문 */
  /* 시안 --muted 는 #8B95A1 이다. 흰 배경 대비 3.04:1 로 WCAG AA(4.5:1) 미달인데,
     16px 하한 정책 때문에 "작은 보조 글자" 예외(3:1)에도 해당하지 않는다.
     캡션·힌트·푸터 문장까지 이 색이라 실패 범위가 넓다 — 같은 계열로 어둡게 내린다.
     실측: #FFF 5.19 / --tint 4.94 / --tint-2 4.78 / --green-weak 4.58 : 모두 AA 통과. */
  --muted:        #7C7C72;  /* 43회 — 캡션 (시안 #8B95A1 → AA 미달로 상향) */
  /* 시안 #7FA98C 는 흰 배경 2.64:1. 아이브로우는 12px 라틴 장식이지만 굵은 12px 는
     "큰 글자" 예외에 들지 않는다. 세이지 색조를 유지한 채 5.04:1 까지 내린다. */
  --eyebrow:      #7C7C72;  /*  5회 — VALUE / PROCESS 라벨 (시안 #7FA98C → AA 미달로 상향) */

  --border:       #EDEBE3;  /* 18회 — 표 내부 구분선 */
  --line:         #E6E4DC;  /* 44회 — 카드/헤더 경계선 (가장 흔함) */
  --line-soft:    #EFEDE6;  /* 12회 — 요약표 구분선 */
  /* 입력·체크박스 테두리만 시안값에서 올린다.
     시안 #DDE3DF 는 흰 배경 1.30:1, #D5DDD8 은 1.38:1 — 조작 요소의 경계는
     WCAG 1.4.11(비텍스트 3:1) 대상이고, 60대 이상 42.3% 사용자에게는
     "어디에 쓰는 칸인지 안 보이는" 문제로 직결된다. #828F89 = 3.37:1(흰) / 3.20:1(--tint).
     카드·섹션 구분선(--line / --border / --line-chip)은 장식이므로 시안값 그대로 둔다. */
  --line-input:   #8E8D80;  /*  5회 — 입력 테두리 (시안 #DDE3DF → 1.4.11 미달로 상향) */
  --line-check:   #8E8D80;  /*        동의 체크박스 테두리 (시안 #D5DDD8 → 같은 이유) */
  --line-btn:     #DEDCD2;  /*  9회 — 보조 버튼 테두리 */
  --line-chip:    #E6E4DC;  /*  8회 — 스텝 칩 / 플로팅 카드 */
  --line-chip-2:  #E6E4DC;  /*        히어로 지표 칩 */
  --line-tint:    #EAE3D0;  /*  5회 — 연녹 박스 테두리 */
  --line-hover:   #CFC9B4;  /* 12회 — 카드 hover 테두리 */

  --danger:       #C33C36;  /*  6회 — 오류 텍스트 */
  /* 시안 reqColor #D14A44 는 흰 배경 4.40:1 — 테두리(3:1)로는 되지만
     `.st-req` 의 "필수" 글자로는 0.1 모자란다. 최소한으로만 어둡게 내려 4.79:1. */
  --req:          #C9443E;  /*        필수 표시 · 오류 입력 테두리 (시안 #D14A44 → AA 미달로 상향) */
  --danger-mark:  #B4443F;  /*  5회 — × 표시 */
  --danger-weak:  #FDF6F6;  /*  3회 — 오류 박스 배경 */
  --danger-line:  #F0D2D0;  /*  3회 — 오류 박스 테두리 */
  --neutral-weak: #F0EFE9;  /*        선택 동의 배지 배경 */
  --terms-bg:     #FBFAF6;  /*        약관 전문 배경 */
  /* 시안 #B0B8B3 는 흰 배경 2.03:1. placeholder 도 WCAG 1.4.3 의 텍스트다.
     게다가 `.pv-sum__v.is-empty`("미입력") 처럼 진짜 내용에도 쓰인다 → 4.91:1 로 올린다.
     입력값(--fg 16.7:1)과는 여전히 확연히 구분된다. */
  --placeholder:  #77776C;  /*        placeholder (시안 #B0B8B3 → AA 미달로 상향) */

  --white:        #ffffff;
  --on-dark:      #C2D2C4;  /* 12회 — 다크 위 보조 텍스트 (green-dark 대비 5.55:1 OK) */
  /* 시안 #8FBBA0 은 --green-dark 대비 4.24:1 로 AA 미달.
     ①②③ 번호 글리프와 밴드 캡션에 쓰이는 읽는 글자다 → 5.02:1 로 밝힌다. */
  --on-dark-2:    #A9C2AF;  /*  7회 — 다크 위 캡션·번호 (시안 #8FBBA0 → AA 미달로 상향) */
  --on-dark-3:    #D5E0D7;  /*        상단 고지 바 텍스트 (6.77:1 OK) */
  --on-dark-fill: rgba(255, 255, 255, .10);  /* 다크 위 카드 */
  --on-dark-line: rgba(255, 255, 255, .28);
  --dot:          #8FBF9E;  /*        자동저장 점 */

  /* ---- 폰트 ---- */
  --font: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif;

  /* ---- 타이포 : 데스크톱(시안 원본). 20장에서 축소 ---- */
  --fs-h1:    46px;   --lh-h1: 1.391;  /* 시안 46/64 */
  --fs-h2:    34px;   --lh-h2: 1.412;  /* 시안 34/48 */
  --fs-h3:    28px;   --lh-h3: 1.462;  /* 시안 26/38 */
  --fs-h4:    26px;   --lh-h4: 1.5;    /* 시안 24/36 — 폼 단계 제목 */
  --fs-h5:    21px;                    /* 시안 19 — 카드 제목 */
  --fs-lead:  20px;   --lh-lead: 1.706;/* 시안 17/29 */
  --fs-body:  18px;   --lh-body: 1.625;/* 시안 16/26 — 본문 하한 */
  /* 아래 3종은 시안이 14/13/12 로 쓰던 보조 텍스트 토큰이다.
     "보조"라도 이용자가 눈으로 읽는 글자면 16px 하한을 지킨다(60대 이상 42.3%).
     이름은 용도 구분을 위해 그대로 두고 값만 하한까지 올린다.
     어떤 브레이크포인트에서도 이 값을 다시 내리지 않는다. */
  --fs-label: 18px;   --lh-label: 1.5;    /* 폼 라벨·칩·푸터 (시안 14) */
  --fs-cap:   18px;   --lh-cap:   1.5;    /* 힌트·캡션        (시안 13) */
  --fs-micro: 18px;   --lh-micro: 1.5;    /* 배지·태그        (시안 12) */

  /* 순수 장식 전용 — 읽는 문장이 아닌 것만 쓴다.
     아이브로우 라틴 라벨(VALUE·PROCESS), 원 안의 번호·기호 글리프(①·1·01), 아이콘.
     한국어 문장·라벨에는 절대 쓰지 않는다. */
  --fs-deco:  14px;   --lh-deco: 1.667;   /* 라틴 아이브로우 */
  --fs-glyph: 15px;                       /* 원형 번호·기호 글리프 */

  /* ---- 라운드 : 시안 실측 빈도순 ---- */
  --r-btn:    2px;  /* 39회 — 주/보조 CTA, 스텝 칩, 아코디언 */
  --r-card:   2px;  /* 29회 — 카드 */
  --r-input:  2px;  /* 25회 — 입력·안내 박스 */
  --r-badge:  2px;  /* 14회 — 번호 뱃지, 중형 버튼 */
  --r-sm:     2px;  /* 11회 — 작은 박스 */
  --r-xs:     2px;  /* 10회 — 지표 칩 */
  --r-table:  2px;  /*  9회 — 표 바깥 테두리 */
  --r-panel:  2px;  /*  8회 — 폼 패널 */
  --r-band:   2px;  /*        다크 밴드 / 히어로 아트 */
  --r-hero:   2px;  /*        큰 강조 박스 */
  --r-tag:    2px;  /*        태그·배지 */
  --r-note:   0 2px 2px 0;  /* 7회 — 좌측 룰 안내 박스 */

  /* ---- 그림자 : 시안에 단 하나 ---- */
  --shadow-pop: 0 10px 26px rgba(20, 60, 35, .10);

  /* ---- 치수 ---- */
  --wrap:      1440px;  /* 시안 컨테이너 폭 */
  --wrap-pad:    60px;  /* 시안 좌우 여백 */
  --wrap-narrow: 860px;
  --h-header:    78px;  /* 시안 헤더 높이 */
  --h-btn:       56px;  /* 시안 주 CTA */
  /* 시안은 52·54 혼재(md 3개 중 2개가 54). 54 로 통일한다. */
  --h-btn-md:    60px;  /* 시안 중형 CTA */
  --h-tap:       52px;  /* 터치 최소치 — 시안 44 를 상향 */
  --h-input:     60px;  /* 시안 입력 높이 */
  --h-step:      64px;  /* 시안 진행단계 칩 */
  --h-chip:      38px;  /* 시안 지표 칩 */

  /* ---- 섹션 리듬 : 시안 실측 ---- */
  --sec-pad:     96px;  /* 시안 `padding:96px 60px 0` */
  --sec-pad-sm:  72px;  /* 시안 `padding:72px 60px 0` */
  --sec-pad-end:100px;  /* 시안 마지막 섹션 하단 */

  /* ---- 간격 ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;  --sp-8: 44px; --sp-9: 60px;
}

/* ============================================================
   2. 리셋 / 기본
   ------------------------------------------------------------
   요소 셀렉터는 전부 :where() 로 특정도 0.
   intake / preview 가 자기 <style> 을 뒤에 실어 덮어쓸 수 있게 둔다.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--sp-3);
  color: var(--heading);
  font-weight: 800;
  letter-spacing: -.02em;
}
:where(h1) { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.03em; }
:where(h2) { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.025em; }
:where(h3) { font-size: var(--fs-h3); line-height: var(--lh-h3); }
:where(h4) { font-size: var(--fs-h4); line-height: var(--lh-h4); }
:where(h5) { font-size: var(--fs-h5); line-height: 1.45; }

:where(p)      { margin: 0 0 var(--sp-4); }
:where(ul, ol) { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
:where(li)     { margin-bottom: var(--sp-2); }
:where(strong, b) { font-weight: 700; }
:where(small)  { font-size: var(--fs-label); }
:where(dl, dd) { margin: 0; }

:where(a) {
  color: var(--green);
  text-decoration: none;
  text-underline-offset: .22em;
  text-decoration-thickness: .07em;
}
:where(a):hover { color: var(--green-hover); text-decoration: underline; }

:where(button, input, select, textarea) { font-family: inherit; }
::placeholder { color: var(--placeholder); opacity: 1; }

/* 포커스 표시
   ------------------------------------------------------------
   초록 링(#176B3E)은 흰·연녹 배경에서는 잘 보이지만 다크 밴드(--green-dark)
   위에서는 1.39:1 이라 사실상 보이지 않는다. 링 색을 토큰으로 빼고
   다크 표면에서만 흰색으로 뒤집는다(9.11:1).
   `border-radius` 는 여기서 지정하지 않는다 — 요소 자신의 모서리를 4px 로
   덮어써 포커스 순간 버튼 모양이 튀는 부작용만 있고, 최신 브라우저는
   outline 을 이미 요소의 border-radius 를 따라 그린다. */
:root { --focus-ring: var(--green); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* 다크 표면 안쪽에서는 흰 링으로 */
.st-notice,
.st-pagehead,
.st-band,
.st-sec--dark { --focus-ring: #fff; }

/* 스킵 링크가 포커스를 옮기는 지점. 조작 요소가 아니므로 화면 전체를 두르는
   링은 그리지 않는다 — 포커스가 본문으로 넘어간 것만으로 목적을 다한다. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; }

hr { height: 1px; margin: var(--sp-6) 0; border: 0; background: var(--border); }

/* 본문 바로가기 */
.st-skip { position: absolute; left: -9999px; top: 0; }
.st-skip:focus {
  left: 0; z-index: 300;
  display: inline-flex;
  align-items: center;
  min-height: var(--h-tap);
  padding: 0 18px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* 스크린리더 전용 */
.st-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}