/* ============================================================
   krds-base.css — KRDS 준수 + 완성도 기본 스타일
   krds-tokens.css 를 먼저 불러온 뒤 이 파일을 연결한다.
     <link rel="stylesheet" href="krds-tokens.css">
     <link rel="stylesheet" href="krds-base.css">
   ============================================================ */

/* --- 공식 서체: Pretendard GOV ------------------------------
   KRDS 공식 글꼴은 Pretendard GOV 다. 운영이 폐쇄망이라 CDN 을 못 쓰므로
   저장소에 담은 Pretendard 를 같은 자리에서 쓴다 (자형이 같은 계열이다).
   굵기는 KRDS 원칙대로 400·700 두 가지만 싣는다. */
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard GOV Regular"), local("Pretendard Regular"),
       url("../../pretendard/1/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard GOV Bold"), local("Pretendard Bold"),
       url("../../pretendard/1/Pretendard-Bold.woff2") format("woff2");
}

:root {
  --krds-font: "Pretendard GOV", Pretendard, -apple-system, "Malgun Gothic",
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --krds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --krds-shadow-md: 0 2px 8px rgba(0, 0, 0, .08);
  --krds-shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);   /* 모달 전용 */
  --krds-ease: 140ms ease-out;

  /* 프로파일 기본값 — assets/profiles/*.css 를 연결하면 덮어쓴다.
     연결하지 않으면 KRDS 공식 기본 클래스와 동일한 lg 규격으로 동작한다. */
  --krds-ui-h:        var(--krds-input-h-lg);    /* 56px */
  --krds-ui-h-sub:    var(--krds-input-h-md);
  --krds-ui-px:       var(--krds-input-px-lg);
  --krds-ui-rd:       var(--krds-input-rd-lg);
  --krds-ui-fz:       var(--krds-fz-body-lg);    /* 19px */
  --krds-ui-fz-sub:   var(--krds-fz-detail-lg);
  --krds-ui-fz-label: var(--krds-fz-label-lg);
  --krds-ui-fz-title: var(--krds-fz-title-xxlg);
  --krds-ui-fz-sect:  var(--krds-fz-title-lg);
  --krds-ui-lh:       1.7;
  --krds-gap-1: var(--krds-spacer-2);
  --krds-gap-2: var(--krds-spacer-4);
  --krds-gap-3: var(--krds-spacer-6);
  --krds-gap-4: var(--krds-spacer-12);
  --krds-gap-5: var(--krds-spacer-16);
  --krds-content-max: 1200px;
  --krds-measure: 72rem;
  --krds-row-h: 5.6rem;
}

/* --- 리셋 -------------------------------------------------- */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
/* hidden 속성이 컴포넌트의 display 규칙에 밀리지 않게 한다 */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--krds-font);
  font-size: var(--krds-ui-fz);
  font-weight: 400;
  line-height: var(--krds-ui-lh);
  color: var(--krds-gray-80);
  background: var(--krds-white);
  word-break: keep-all;              /* 한글 단어 단위 줄바꿈 */
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }   /* 묶음은 .form-group 이 그린다 */
legend { padding: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* --- 초점: 절대 제거하지 않는다 ------------------------------ */
:focus-visible {
  outline: 2px solid var(--krds-primary);
  outline-offset: 2px;
  border-radius: var(--krds-rd-2);
}

/* --- 스크린 리더 전용 --------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* 건너뛰기 링크: 초점이 오면 나타난다 */
.skip-link {
  position: absolute; left: 50%; top: -100px; z-index: 1000;
  transform: translateX(-50%);
  padding: var(--krds-spacer-3) var(--krds-spacer-6);
  background: var(--krds-gray-90); color: var(--krds-white);
  border-radius: 0 0 var(--krds-rd-8) var(--krds-rd-8);
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --- 타이포그래피 ------------------------------------------- */
.krds-page-title    { font-size: var(--krds-ui-fz-title); font-weight: 700; line-height: 1.35; color: var(--krds-gray-90); letter-spacing: -.02em; }
.krds-section-title { font-size: var(--krds-ui-fz-sect);   font-weight: 700; line-height: 1.4;  color: var(--krds-gray-90); letter-spacing: -.01em; }
.krds-body          { font-size: var(--krds-ui-fz); line-height: var(--krds-ui-lh); }
.krds-detail        { font-size: var(--krds-ui-fz-sub); line-height: 1.6; color: var(--krds-gray-60); }
.krds-measure       { max-width: var(--krds-measure); }   /* 본문 1줄 40~50자 */

/* --- 레이아웃 ----------------------------------------------- */
.krds-container {
  width: 100%; max-width: var(--krds-content-max);
  margin-inline: auto;
  padding-inline: var(--krds-spacer-6);          /* PC 24px */
}
@media (max-width: 768px) {
  .krds-container { padding-inline: var(--krds-spacer-4); }  /* 모바일 16px */
}
.krds-section { padding-block: var(--krds-gap-4); }
.krds-stack > * + * { margin-top: var(--krds-gap-2); }
.krds-stack-lg > * + * { margin-top: var(--krds-gap-4); }

/* --- 버튼 --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--krds-spacer-2);
  height: var(--krds-ui-h);
  padding-inline: var(--krds-ui-px);
  border: 1px solid transparent;
  border-radius: var(--krds-ui-rd);
  font-size: var(--krds-ui-fz); font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--krds-ease), border-color var(--krds-ease), color var(--krds-ease);
}
.btn.sm { height: var(--krds-ui-h-sub); padding-inline: var(--krds-spacer-3); font-size: var(--krds-ui-fz-sub); }
.btn.lg { height: var(--krds-btn-h-lg); padding-inline: var(--krds-btn-px-lg); font-size: var(--krds-btn-fz-lg); }
.btn.primary        { background: var(--krds-primary); color: var(--krds-white); }
.btn.primary:hover  { background: var(--krds-primary-60); }
.btn.primary:active { background: var(--krds-primary-70); }
.btn.secondary       { background: var(--krds-white); color: var(--krds-primary); border-color: var(--krds-primary); }
.btn.secondary:hover { background: var(--krds-primary-5); }
.btn.tertiary        { background: var(--krds-white); color: var(--krds-gray-80); border-color: var(--krds-gray-30); }
.btn.tertiary:hover  { background: var(--krds-gray-5); }
/* 지우기·반려처럼 되돌리기 어려운 동작. 채우지 않고 테두리로만 — 화면에서 가장 센 자리는 primary 하나뿐이다 */
.btn.danger          { background: var(--krds-white); color: var(--krds-danger); border-color: var(--krds-danger); }
.btn.danger:hover    { background: var(--krds-danger-5); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--krds-gray-20); color: var(--krds-gray-50);
  border-color: transparent; cursor: not-allowed;
}
.btn-wrap { display: flex; gap: var(--krds-spacer-3); flex-wrap: wrap; }
.btn-wrap.center { justify-content: center; }

/* --- 폼 ----------------------------------------------------- */
.form-group + .form-group { margin-top: var(--krds-gap-3); }
.form-tit { margin-bottom: var(--krds-gap-1); }
.form-tit label { font-size: var(--krds-ui-fz-label); font-weight: 700; color: var(--krds-gray-80); }
.form-tit .required { color: var(--krds-danger); margin-left: .2rem; }
.form-control {
  width: 100%; height: var(--krds-ui-h);
  padding-inline: var(--krds-ui-px);
  border: 1px solid var(--krds-gray-60);   /* KRDS 공식 기본 테두리 색 */
  border-radius: var(--krds-ui-rd);
  background: var(--krds-white);
  font-size: var(--krds-ui-fz);
  transition: border-color var(--krds-ease), box-shadow var(--krds-ease);
}
textarea.form-control { height: auto; min-height: 12rem; padding-block: var(--krds-spacer-3); resize: vertical; }
.form-control::placeholder { color: var(--krds-gray-50); }
.form-control:hover { border-color: var(--krds-gray-60); }
/* 강조 테두리 + 그림자 고리. outline 은 지우지 않고 투명으로 둔다 —
   고대비 모드에서는 브라우저가 이 자리를 실제 테두리로 그려 준다 */
.form-control:focus {
  border-color: var(--krds-primary);
  box-shadow: 0 0 0 1px var(--krds-primary);
  outline: 2px solid transparent; outline-offset: 1px;
}
.form-control:disabled { background: var(--krds-gray-10); color: var(--krds-gray-50); cursor: not-allowed; }
.form-hint { margin-top: var(--krds-gap-1); font-size: var(--krds-ui-fz-sub); color: var(--krds-gray-60); }
.form-conts.is-error .form-control { border-color: var(--krds-danger); }
.form-hint-invalid {
  display: flex; align-items: flex-start; gap: var(--krds-spacer-1);
  margin-top: var(--krds-spacer-1);
  font-size: var(--krds-ui-fz-sub); color: var(--krds-danger);
}
/* 레이블 자리에 오는 안내 글 (묶음 제목처럼 쓰는, <label> 이 아닌 것) */
.form-tit .form-label { font-size: var(--krds-ui-fz-label); font-weight: 700; color: var(--krds-gray-80); }

/* 목록 상자 — 화살표는 배경 이미지 대신 기본 것을 쓴다 (폐쇄망에서 깨지지 않게) */
select.form-control { padding-right: var(--krds-ui-px); cursor: pointer; }

/* --- 선택: 체크박스·라디오 ---------------------------------- */
.chk-area { display: flex; flex-wrap: wrap; gap: var(--krds-gap-2) var(--krds-gap-4); }
.form-check { display: flex; align-items: center; gap: var(--krds-spacer-2); min-height: var(--krds-ui-h-sub); }
.form-check input[type="checkbox"], .form-check input[type="radio"] {
  width: 2.4rem; height: 2.4rem; flex: none; margin: 0;
  accent-color: var(--krds-primary); cursor: pointer;
}
.form-check label { font-size: var(--krds-ui-fz); color: var(--krds-gray-90); cursor: pointer; }
.form-check input:disabled { cursor: not-allowed; }
.form-check input:disabled + label { color: var(--krds-gray-50); cursor: not-allowed; }
.form-conts.is-error .form-check input { outline: 2px solid var(--krds-danger); outline-offset: 2px; }

/* --- 카드: 테두리·그림자·배경 중 하나만 --------------------- */
.krds-card {
  padding: var(--krds-gap-4);
  border: 1px solid var(--krds-gray-20);
  border-radius: var(--krds-rd-12);
  background: var(--krds-white);
}
a.krds-card, .krds-card.is-link {
  display: block; text-decoration: none; color: inherit;
  transition: border-color var(--krds-ease), box-shadow var(--krds-ease);
}
a.krds-card:hover, .krds-card.is-link:hover {
  border-color: var(--krds-primary-30);
  box-shadow: var(--krds-shadow-md);
}

/* --- 표 ----------------------------------------------------- */
.krds-table { width: 100%; border-collapse: collapse; }
.krds-table caption {
  margin-bottom: var(--krds-gap-2); text-align: left;
  font-size: var(--krds-ui-fz-sub); color: var(--krds-gray-60);
}
.krds-table th, .krds-table td {
  height: var(--krds-row-h); padding: var(--krds-gap-2) var(--krds-gap-3);
  border-bottom: 1px solid var(--krds-gray-20);
  text-align: left; font-size: var(--krds-ui-fz-sub);
}
.krds-table thead th {
  background: var(--krds-gray-5); color: var(--krds-gray-80);
  font-weight: 700; border-top: 2px solid var(--krds-gray-70);
}
.krds-table td.num, .krds-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.krds-table td.center, .krds-table th.center { text-align: center; }
.krds-table tbody tr:hover td { background: var(--krds-gray-5); }
/* 왼쪽 머리칸(항목 이름) — 값과 구분되게 바탕을 준다 */
.krds-table tbody th[scope="row"] { width: 16rem; background: var(--krds-gray-5); font-weight: 700; }
.krds-table td a { color: var(--krds-gray-90); }

/* --- 아코디언 / 디스클로저 -----------------------------------
   details/summary 로 만든다. 스크립트 없이 키보드·낭독기가 바로 동작한다.
   펼침 표시는 CSS 로 그린 꺾쇠 — 이모지를 쓰지 않는다. */
.krds-accordion { border-top: 2px solid var(--krds-gray-70); }
.krds-accordion > details { border-bottom: 1px solid var(--krds-gray-20); }
.krds-accordion > details > summary {
  display: flex; align-items: center; gap: var(--krds-gap-2);
  min-height: var(--krds-ui-h);
  padding: var(--krds-gap-2) var(--krds-gap-3);
  list-style: none; cursor: pointer;
  font-size: var(--krds-ui-fz); font-weight: 700; color: var(--krds-gray-90);
}
.krds-accordion > details > summary::-webkit-details-marker { display: none; }
.krds-accordion > details > summary::after {
  content: ''; margin-left: auto; flex: none;
  width: 1rem; height: 1rem;
  border-right: 2px solid var(--krds-gray-60);
  border-bottom: 2px solid var(--krds-gray-60);
  transform: rotate(45deg);
  transition: transform var(--krds-ease);
}
.krds-accordion > details[open] > summary::after { transform: rotate(-135deg); }
.krds-accordion > details > summary:hover { background: var(--krds-gray-5); }
.krds-accordion .panel {
  padding: var(--krds-gap-2) var(--krds-gap-3) var(--krds-gap-4);
  border-top: 1px solid var(--krds-gray-10);
}

/* --- 배지 --------------------------------------------------- */
.krds-badge {
  display: inline-flex; align-items: center; height: 2.6rem;
  padding-inline: var(--krds-spacer-2);
  border-radius: var(--krds-rd-4);
  font-size: var(--krds-fz-detail-md); font-weight: 700;
  background: var(--krds-gray-10); color: var(--krds-gray-70);
}
.krds-badge.primary { background: var(--krds-primary-5); color: var(--krds-primary-60); }
.krds-badge.success { background: var(--krds-success-5); color: var(--krds-success); }
.krds-badge.danger  { background: var(--krds-danger-5); color: var(--krds-danger); }
.krds-badge.warning { background: var(--krds-warning-5); color: var(--krds-warning-70); }   /* 본문 대비 4.5:1 이상인 짙은 주황 */

/* --- 빈 상태 ------------------------------------------------ */
.krds-empty {
  padding: var(--krds-spacer-16) var(--krds-spacer-6);
  text-align: center; color: var(--krds-gray-60);
}
.krds-empty p { margin-bottom: var(--krds-spacer-5); }

/* --- 모션 최소화 요청 존중 ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}