/* =============================================================================
   kofa-common.css
   -----------------------------------------------------------------------------
   목차
   01. 기반 — 웹폰트와 전역 토큰
   02. 전역 레이아웃
   03. 공용 컴포넌트
   ============================================================================= */

@charset "UTF-8";

/* =============================================================================
   기반 — 웹폰트와 전역 토큰
   ============================================================================= */

/*
 * 본문 기본 글꼴이다. 한글 11,172자와 CJK 통합한자 7,138자를 담고 있어
 * 이 사이트가 쓰는 한글·라틴·한자를 혼자 거의 다 그린다.
 */
@font-face {
  font-family: "Pretendard GOV";
  src: url("/fonts/pretendard-gov/PretendardGOVVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --kofa-color-focus-ring: #1f6feb;
  --kofa-outline-focus-width: 2px;
  --kofa-outline-focus-offset: -2px;
  --kofa-color-neutral-black-90: rgb(0 0 0 / 90%);
  --kofa-color-neutral-black-80: rgb(0 0 0 / 80%);
  --kofa-color-neutral-black-70: rgb(0 0 0 / 70%);
  --kofa-color-neutral-black-60: rgb(0 0 0 / 60%);
  --kofa-color-neutral-black-50: rgb(0 0 0 / 50%);
  --kofa-color-neutral-black-40: rgb(0 0 0 / 40%);
  --kofa-color-neutral-black-30: rgb(0 0 0 / 30%);
  --kofa-color-neutral-black-20: rgb(0 0 0 / 20%);
  --kofa-color-neutral-black-10: rgb(0 0 0 / 10%);
  --kofa-color-neutral-black-08: rgb(0 0 0 / 8%);
  --kofa-color-neutral-black-06: rgb(0 0 0 / 6%);
  --kofa-color-neutral-black-04: rgb(0 0 0 / 4%);
  --kofa-color-neutral-black-02: rgb(0 0 0 / 2%);
  --kofa-color-neutral-black-0: rgb(0 0 0 / 0%);
  --kofa-color-neutral-white-100: #ffffff;
  --kofa-color-neutral-white-75: rgb(255 255 255 / 75%);
  --kofa-color-neutral-white-50: rgb(255 255 255 / 50%);
  --kofa-color-neutral-white-25: rgb(255 255 255 / 25%);
  --kofa-color-neutral-white-10: rgb(255 255 255 / 10%);
  --kofa-color-neutral-white-0: rgb(255 255 255 / 0%);
  --kofa-color-gray-50: #f9f9f9;
  --kofa-color-gray-100: #ededed;
  --kofa-color-gray-150: #e1e1e1;
  --kofa-color-gray-200: #d4d4d6;
  --kofa-color-gray-300: #bbbcbe;
  --kofa-color-gray-400: #a8a9ad;
  --kofa-color-gray-500: #8b8c90;
  --kofa-color-gray-600: #727276;
  --kofa-color-gray-700: #58585a;
  --kofa-color-gray-800: #424345;
  --kofa-color-gray-900: #262831;
  --kofa-color-white: #ffffff;
  /* 공개 전역 토큰: 브랜드 외곽선 그라데이션 */
  --kofa-color-brand-border-gradient: linear-gradient(90deg, var(--kofa-color-icon-error), #a3586c 50%, #767c97);
  --kofa-color-black: #000000;
  --kofa-color-error-50: #f7e7e9;
  --kofa-color-error-100: #f3d3d6;
  --kofa-color-error-150: #f0bec2;
  --kofa-color-error-200: #ebabb0;
  --kofa-color-error-300: #e2838b;
  --kofa-color-error-400: #d85c66;
  --kofa-color-error-500: #cf3541;
  --kofa-color-error-600: #ab2933;
  --kofa-color-error-700: #841f27;
  --kofa-color-error-800: #621017;
  --kofa-color-error-900: #39090d;
  --kofa-color-success-50: #e5f0f1;
  --kofa-color-success-100: #d3e8ea;
  --kofa-color-success-150: #c2e1e3;
  --kofa-color-success-200: #b1d8dc;
  --kofa-color-success-300: #90c8cd;
  --kofa-color-success-400: #6eb8be;
  --kofa-color-success-500: #4ea6ad;
  --kofa-color-success-600: #3f868c;
  --kofa-color-success-700: #30666b;
  --kofa-color-success-800: #1c4a4e;
  --kofa-color-success-900: #0f282b;
  --kofa-color-warning-50: #fffaeb;
  --kofa-color-warning-100: #fff5d6;
  --kofa-color-warning-150: #ffe9ad;
  --kofa-color-warning-200: #ffd97a;
  --kofa-color-warning-300: #ffc847;
  --kofa-color-warning-400: #ffb114;
  --kofa-color-warning-500: #e9980c;
  --kofa-color-warning-600: #bd7a0f;
  --kofa-color-warning-700: #905a09;
  --kofa-color-warning-800: #613905;
  --kofa-color-warning-900: #3c2102;
  --kofa-color-information-50: #f4f7fa;
  --kofa-color-information-100: #e2ecf4;
  --kofa-color-information-150: #cee0f0;
  --kofa-color-information-200: #bad5eb;
  --kofa-color-information-300: #94bde1;
  --kofa-color-information-400: #6fa6d6;
  --kofa-color-information-500: #498fcb;
  --kofa-color-information-600: #3277b1;
  --kofa-color-information-700: #285d8b;
  --kofa-color-information-800: #1d4466;
  --kofa-color-information-900: #0e2b44;
  --kofa-color-red-50: #fdf8f8;
  --kofa-color-red-100: #f9e4e5;
  --kofa-color-red-150: #f6cfd0;
  --kofa-color-red-200: #f5b8ba;
  --kofa-color-red-300: #ee8e92;
  --kofa-color-red-400: #e86369;
  --kofa-color-red-500: #e23940;
  --kofa-color-red-600: #cd1e25;
  --kofa-color-red-700: #a2181e;
  --kofa-color-red-800: #781216;
  --kofa-color-red-900: #52070a;
  --kofa-color-amber-50: #efe9e1;
  --kofa-color-amber-100: #e8decf;
  --kofa-color-amber-150: #e2d3be;
  --kofa-color-amber-200: #dac7ad;
  --kofa-color-amber-300: #cbb18b;
  --kofa-color-amber-400: #bc9a6a;
  --kofa-color-amber-500: #a9834c;
  --kofa-color-amber-600: #88693d;
  --kofa-color-amber-700: #674f2e;
  --kofa-color-amber-800: #4a361a;
  --kofa-color-amber-900: #261c0d;
  --kofa-color-key-50: var(--kofa-color-gray-50);
  --kofa-color-key-100: var(--kofa-color-gray-100);
  --kofa-color-key-150: var(--kofa-color-gray-150);
  --kofa-color-key-200: var(--kofa-color-gray-200);
  --kofa-color-key-300: var(--kofa-color-gray-300);
  --kofa-color-key-400: var(--kofa-color-gray-400);
  --kofa-color-key-500: var(--kofa-color-gray-500);
  --kofa-color-key-600: var(--kofa-color-gray-600);
  --kofa-color-key-700: var(--kofa-color-gray-700);
  --kofa-color-key-800: var(--kofa-color-gray-800);
  --kofa-color-key-900: var(--kofa-color-gray-900);

  /* Figma 뱃지 전용 색. 기존 팔레트에 같은 값이 없어 Figma 원시값을 토큰으로 둔다. */
  --kofa-color-badge-count: #a0181c;
  --kofa-color-badge-notice: #008907;

  --kofa-color-background-white: var(--kofa-color-white);
  --kofa-color-background-gray-subtler: var(--kofa-color-gray-50);
  --kofa-color-background-gray-subtle: var(--kofa-color-gray-100);
  --kofa-color-background-inverse: var(--kofa-color-gray-900);
  --kofa-color-background-bg-dim: var(--kofa-color-neutral-black-50);
  --kofa-color-surface-white: var(--kofa-color-white);
  --kofa-color-surface-black: var(--kofa-color-black);
  --kofa-color-surface-primary-subtle: var(--kofa-color-key-50);
  --kofa-color-surface-secondary-subtle: var(--kofa-color-red-50);
  --kofa-color-surface-danger-subtle: var(--kofa-color-error-50);
  --kofa-color-surface-success-subtle: var(--kofa-color-success-50);
  --kofa-color-surface-information-subtle: var(--kofa-color-information-50);
  --kofa-color-surface-warning-subtle: var(--kofa-color-warning-50);
  --kofa-color-surface-gray-subtle: var(--kofa-color-gray-50);
  --kofa-color-surface-primary: var(--kofa-color-key-900);
  --kofa-color-surface-disabled: var(--kofa-color-gray-100);
  --kofa-color-surface-inactive: var(--kofa-color-gray-150);
  --kofa-color-text-01: var(--kofa-color-gray-900);
  --kofa-color-text-02: var(--kofa-color-gray-700);
  --kofa-color-text-03: var(--kofa-color-gray-600);
  --kofa-color-text-04: var(--kofa-color-gray-500);
  --kofa-color-text-white: var(--kofa-color-white);
  --kofa-color-text-primary: var(--kofa-color-key-900);
  --kofa-color-text-secondary-amber: var(--kofa-color-amber-500);
  --kofa-color-text-secondary-red: var(--kofa-color-red-500);
  --kofa-color-text-danger: var(--kofa-color-error-500);
  --kofa-color-text-success: var(--kofa-color-success-700); /* Figma color/text/success #30666b */
  --kofa-color-text-information: var(--kofa-color-information-700);
  --kofa-color-text-warning: var(--kofa-color-warning-600);
  --kofa-color-divider-01: var(--kofa-color-gray-50);
  --kofa-color-divider-02: var(--kofa-color-gray-150);
  --kofa-color-border-primary: var(--kofa-color-key-900);
  --kofa-color-border-default: var(--kofa-color-gray-150);
  --kofa-color-border-inactive: var(--kofa-color-gray-200);
  --kofa-color-border-gray-dark: var(--kofa-color-gray-300);
  --kofa-color-border-secondary-amber: var(--kofa-color-amber-400);
  --kofa-color-border-secondary-red: var(--kofa-color-red-500);
  --kofa-color-border-danger: var(--kofa-color-error-500);
  --kofa-color-border-success: var(--kofa-color-success-500);
  --kofa-color-border-information: var(--kofa-color-information-600);
  --kofa-color-border-warning: var(--kofa-color-warning-600);
  --kofa-color-icon-default: var(--kofa-color-gray-900);
  --kofa-color-icon-white: var(--kofa-color-white);
  --kofa-color-icon-primary: var(--kofa-color-key-900);
  --kofa-color-icon-disabled: var(--kofa-color-gray-150);
  --kofa-color-icon-gray: var(--kofa-color-gray-500);
  --kofa-color-icon-error: var(--kofa-color-error-500);
  --kofa-color-icon-information: var(--kofa-color-information-600);
  --kofa-color-icon-success: var(--kofa-color-success-500);
  --kofa-color-icon-warning: var(--kofa-color-warning-600);

  --kofa-space-base: 1rem;
}

/*
 * 타이포그래피 토큰. KMDb와 같은 Figma 라이브러리를 쓰므로 KMDb 값을 그대로 쓴다.
 * `-mobile` 접미사 토큰은 599px 이하 밴드에서 쓴다.
 */
:root {
  --kofa-font-body:
    "Pretendard GOV", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --kofa-font-weight-regular: 400;
  --kofa-font-weight-semibold: 600;
  --kofa-font-weight-bold: 700;
  --kofa-line-height-base: 1.5;
  /* Figma 전역 자간이다. 모든 타이포가 이 값을 쓴다. */
  --kofa-letter-spacing-base: -0.6px;
  --kofa-typo-display-3-size: 60px;
  --kofa-typo-display-2-size: 44px;
  --kofa-typo-display-1-size: 36px;
  --kofa-typo-display-3-size-mobile: 40px;
  --kofa-typo-display-2-size-mobile: 32px;
  --kofa-typo-display-1-size-mobile: 28px;
  --kofa-typo-headline-6-size: 40px;
  --kofa-typo-headline-5-size: 32px;
  --kofa-typo-headline-4-size: 24px;
  --kofa-typo-headline-compact-size: 22px;
  --kofa-typo-headline-3-size: 20px;
  --kofa-typo-headline-2-size: 18px;
  --kofa-typo-headline-1-size: 16px;
  --kofa-typo-headline-6-size-mobile: 28px;
  --kofa-typo-headline-5-size-mobile: 26px;
  --kofa-typo-headline-4-size-mobile: 20px;
  --kofa-typo-headline-3-size-mobile: 20px;
  --kofa-typo-headline-2-size-mobile: 18px;
  --kofa-typo-headline-1-size-mobile: 16px;
  --kofa-typo-body-5-size: 18px;
  --kofa-typo-body-4-size: 16px;
  --kofa-typo-body-3-size: 14px;
  --kofa-typo-body-2-size: 12px;
  --kofa-typo-body-1-size: 10px;
}

/*
 * 아이콘 토큰. 아이콘 SVG는 `/icons/{분류}/{이름}.svg`에 둔다.
 */
:root {
  --kofa-icon-size-12: 12px;
  --kofa-icon-size-16: 16px;
  --kofa-icon-size-20: 20px;
  --kofa-icon-size-24: 24px;
  --kofa-icon-size-32: 32px;
  --kofa-icon-size-40: 40px;
  --kofa-icon-touch-target: 44px;
}

/*
 * 반응형 밴드. 미디어 쿼리는 변수를 쓸 수 없으므로 값을 직접 적는다.
 * desktop 기준: 기본 선언이 1280px 이상이다.
 * tablet: `@media (max-width: 1279px)`
 * mobile: `@media (max-width: 599px)`
 * 이 두 형태 외의 폭을 근거 없이 추가하지 않는다.
 */
:root {
  --kofa-layout-max: 1280px;
  --kofa-layout-safe-gutter: 40px;
  --kofa-layout-safe-width: min(
    var(--kofa-layout-max),
    calc(100% - (var(--kofa-layout-safe-gutter) * 2))
  );
}
@media (max-width: 599px) {
  :root { --kofa-layout-safe-gutter: 16px; }
}

:root {
  --kofa-radius-4: 4px;
  --kofa-radius-6: 6px;
  --kofa-radius-8: 8px;
  --kofa-radius-10: 10px;
  --kofa-radius-12: 12px;
  --kofa-radius-16: 16px;
  --kofa-radius-20: 20px;
  --kofa-radius-1000: 1000px;
  --kofa-radius-43: 43px;
  --kofa-radius-full: 999px;
}

/* 키보드 포커스 기본값. 에디터·외부 인증 영역과 숨겨진 대리 input은 제외한다. */
:where(a[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex]):not(:where(:disabled, [aria-disabled="true"], [tabindex="-1"], .kofa-checkbox__input, .kofa-mypage-switch__input, .kofa-select__native, .kofa-member-login-method--anyid, [data-anyid-area] *, .kmdb-editor, .kmdb-editor *, [class~="kmdb-editor-lightbox"] *, [class*="__editor"] *, [class*="-editor"] *, [data-privacy-body] *)):focus-visible {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

body {
  margin: 0;
  background: var(--kofa-color-background-white);
  color: var(--kofa-color-text-01);
  font-family: var(--kofa-font-body);
}

/* 시안은 헤더 바로 아래에 경로·페이지 제목이 붙는다. main은 위아래 여백을 두지 않고, 간격은 각 구역이 소유한다. */
.kofa-page-main {
  padding-block: 0;
}
/* 개발용 화면. 섹션 없이 본문을 바로 두므로 main이 폭과 위아래 여백을 소유 */
.kofa-page-main--contained {
  width: var(--kofa-layout-safe-width);
  margin-inline: auto;
  padding-block: calc(var(--kofa-space-base) * 2);
}

/* 사이트 공통 헤더 */
.kofa-common-header {
  --kofa-common-header-hover-background: #f5f5f5;
  position: sticky;
  z-index: 100;
  top: 0;
  background: var(--kofa-color-white);
  color: var(--kofa-color-text-01);
  letter-spacing: var(--kofa-letter-spacing-base);
  transition: transform 180ms ease;
}
@media (max-width: 1279px) {
  .kofa-common-header { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  .kofa-common-header { transition: none; }
}

.kofa-common-header[data-site-hidden] { transform: translateY(-100%); }
.kofa-common-header__skip {
  position: fixed;
  z-index: 101;
  top: 0.5rem;
  left: 1rem;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--kofa-color-white);
  color: var(--kofa-color-text-01);
}
.kofa-common-header__skip:focus { width: auto; height: auto; padding: 0.75rem 1rem; overflow: visible; clip-path: none; }
.kofa-common-header__frame {
  width: var(--kofa-layout-safe-width);
  margin-inline: auto;
}
/* Figma GNB 상단 프레임(2061:10713)은 위·아래 1px 선을 포함해 113px, GNB 전체 191px */
.kofa-common-header__top {
  padding-block: 12px 16px;
  border-top: 1px solid var(--kofa-color-divider-02);
  border-bottom: 1px solid var(--kofa-color-divider-02);
}
@media (max-width: 1279px) {
  .kofa-common-header__top { padding-block: 12px; border: 0; box-shadow: inset 0 -1px 0 var(--kofa-color-divider-02); }
}
.kofa-common-header__utility {
  padding-block: 6px;
  font-size: var(--kofa-typo-body-3-size);
  line-height: var(--kofa-line-height-base);
}
@media (max-width: 1279px) {
  .kofa-common-header__utility { display: none; }
}
.kofa-common-header__utility .kofa-common-header__frame {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.kofa-common-header__utility a { color: inherit; text-decoration: none; }
.kofa-common-header__brand-row .kofa-common-header__frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.kofa-common-header__brand { position: relative; display: block; flex: 0 0 176px; }
@media (max-width: 1279px) {
  .kofa-common-header__brand { flex-basis: 112.64px; }
}

.kofa-common-header__logo { display: block; width: 100%; height: 50px; object-fit: cover; }
@media (max-width: 1279px) {
  .kofa-common-header__logo { height: 32px; }
}

.kofa-common-header__logo--inverse { display: none; }
.kofa-common-header__actions { display: flex; align-items: center; gap: 22px; min-width: 0; }
@media (max-width: 1279px) {
  .kofa-common-header__actions { gap: 0; }
}

.kofa-common-header__accounts { display: flex; align-items: center; gap: 16px; }
@media (max-width: 1279px) {
  .kofa-common-header__accounts { gap: 0; }
}

.kofa-common-header__search {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 300px;
  height: 48px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--kofa-color-surface-disabled);
  color: inherit;
  font-size: var(--kofa-typo-body-3-size);
  line-height: var(--kofa-line-height-base);
  text-decoration: none;
}
@media (max-width: 1279px) {
  .kofa-common-header__search { display: none; }
}
.kofa-common-header__search input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; }
.kofa-common-header__search input::placeholder { color: inherit; opacity: 1; }
.kofa-common-header__search input::-webkit-search-cancel-button { display: none; }
.kofa-common-header__search input:focus { outline: 0; }
.kofa-common-header__search:has(input:focus-visible) { outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring); outline-offset: var(--kofa-outline-focus-offset); }
.kofa-common-header__search button { display: flex; flex: none; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.kofa-common-header__search-link { display: none; }


.kofa-common-header__account { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--kofa-typo-body-4-size); font-weight: var(--kofa-font-weight-semibold); line-height: var(--kofa-line-height-base); text-decoration: none; white-space: nowrap; cursor: pointer; }
@media (max-width: 1279px) {
  .kofa-common-header__account { width: 44px; height: 44px; justify-content: center; gap: 0; }
}
@media (max-width: 1279px) {
  .kofa-common-header__account > span:last-child { display: none; }
}
.kofa-common-header__account:hover { text-decoration: underline; text-underline-offset: 4px; }
.kofa-common-header__accounts > a:last-child { display: inline-flex; }
@media (max-width: 1279px) {
  .kofa-common-header__accounts > a:last-child { display: none; }
}
@media (max-width: 1279px) {
  .kofa-common-header--guest .kofa-common-header__accounts > a:last-child { display: inline-flex; }
}
/* 회원 메뉴 — Figma logout popup PC 3497:260704 · 태블릿 3530:340901 · 모바일 3530:341037 */
.kofa-common-header__member { position: relative; display: flex; }
/* 1279 이하 패널은 헤더 아래 4px, 콘텐츠 오른쪽 끝에 맞춘다. 기준 상자를 헤더로 넘긴다. */
@media (max-width: 1279px) {
  .kofa-common-header__member { position: static; }
}
/* Figma PC는 패널 오른쪽이 버튼보다 76px 밖이다. 좁은 desktop에서는 화면 밖으로 나가지 않게 좌우 여백 안에서 줄인다. */
.kofa-common-header__member-menu { position: absolute; z-index: 6; top: calc(100% + 8px); right: calc(-1 * clamp(0px, max((100vw - var(--kofa-layout-max)) / 2, var(--kofa-layout-safe-gutter)) - 16px, 76px)); box-sizing: border-box; width: 219px; padding: 17px; border: 1px solid var(--kofa-color-text-01); border-radius: var(--kofa-radius-16); background: var(--kofa-color-surface-white); color: var(--kofa-color-text-01); }
@media (max-width: 1279px) {
  .kofa-common-header__member-menu { top: calc(100% + 4px); right: var(--kofa-layout-safe-gutter); }
}
.kofa-common-header__member-menu[hidden] { display: none; }
.kofa-common-header__member-summary { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--kofa-color-divider-02); }
.kofa-common-header__member-name { margin: 0; font-size: var(--kofa-typo-body-4-size); font-weight: var(--kofa-font-weight-bold); line-height: var(--kofa-line-height-base); overflow-wrap: anywhere; }
.kofa-common-header__member-session { display: flex; flex-direction: column; gap: 8px; font-size: var(--kofa-typo-body-3-size); line-height: var(--kofa-line-height-base); }
.kofa-common-header__member-session-label { margin: 0; color: var(--kofa-color-text-02); }
.kofa-common-header__member-session-row { display: flex; align-items: center; gap: 12px; }
.kofa-common-header__member-session-time { display: inline-flex; align-items: center; gap: 4px; color: var(--kofa-color-information-700); }
.kofa-common-header__member-session-time::before { content: ""; flex: none; width: 18px; height: 18px; background: url("/icons/card/card-clock.svg") center / contain no-repeat; }
.kofa-common-header__member-session-extend { padding: 0; border: 0; background: transparent; color: var(--kofa-color-text-01); font: inherit; cursor: pointer; }
.kofa-common-header__member-session-extend:hover { text-decoration: underline; text-underline-offset: 4px; }
.kofa-common-header__member-links { margin: 12px 0; padding: 0; list-style: none; }
/* Figma 행 높이 40px(글자 21px) */
.kofa-common-header__member-links a { display: block; padding: 9.5px 0; color: inherit; font-size: var(--kofa-typo-body-3-size); line-height: var(--kofa-line-height-base); text-decoration: none; }
.kofa-common-header__member-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kofa-common-header__member-logout { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 14px 0 5px; border: 0; border-top: 1px solid var(--kofa-color-divider-02); background: transparent; color: inherit; font: inherit; font-size: var(--kofa-typo-body-3-size); line-height: var(--kofa-line-height-base); cursor: pointer; }
/* 홈 다크 헤더는 actions 안 img를 반전 아이콘으로 바꾸므로 패널 아이콘은 배경으로 그린다. */
.kofa-common-header__member-logout::before { content: ""; flex: none; width: 20px; height: 20px; background: url("/images/site/gnb-logout-dark-frame.svg") center / contain no-repeat; }
.kofa-common-header__member-logout:hover { text-decoration: underline; text-underline-offset: 4px; }
.kofa-common-header__icon { display: flex; flex: none; align-items: center; width: 20px; height: 20px; }
@media (max-width: 1279px) {
  .kofa-common-header__icon { width: 24px; height: 24px; }
}
.kofa-common-header__icon picture { display: contents; }
.kofa-common-header__icon img { flex: none; }
.kofa-common-header__action-icon--inverse { display: none; }
/* Figma 78px 메뉴 행은 하단 stroke(inside)를 포함한다. 선이 높이를 늘리지 않게 inset 그림자로 그린다. */
.kofa-common-header__nav { box-shadow: inset 0 -1px 0 var(--kofa-color-divider-02); }
@media (max-width: 1279px) {
  .kofa-common-header__nav { display: none; }
}

.kofa-common-header__nav-list { display: flex; align-items: center; justify-content: center; gap: 16px; width: max-content; min-width: min(100%, 1280px); margin-inline: auto; }

.kofa-common-header__menu { display: flex; align-items: center; gap: 8px; padding: 24px 16px; border: 0; background: transparent; color: var(--kofa-color-text-02); cursor: pointer; font-family: inherit; font-size: var(--kofa-typo-headline-3-size); font-weight: var(--kofa-font-weight-bold); line-height: var(--kofa-line-height-base); letter-spacing: inherit; white-space: nowrap; }
.kofa-common-header__menu-label { box-shadow: inset 0 -3px 0 transparent; }
.kofa-common-header__menu:focus-visible { outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring); outline-offset: var(--kofa-outline-focus-offset); }
.kofa-common-header__menu[aria-expanded="true"] .kofa-common-header__menu-label { box-shadow: inset 0 -3px 0 currentcolor; }
.kofa-common-header__chevron { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; transition: transform 180ms ease; }
@media (prefers-reduced-motion: reduce) {
  .kofa-common-header__chevron { transition: none; }
}
.kofa-common-header__menu[aria-expanded="true"] .kofa-common-header__chevron { transform: rotate(180deg); }
/* 34px 알약은 78px 메뉴 행 가운데에 선다. */
.kofa-common-header__booking { background: transparent; font-family: inherit; cursor: pointer; text-decoration: none; margin: 0 16px; padding: 4px 11px; border: 1px solid var(--kofa-color-gray-500); border-radius: 39px; color: var(--kofa-color-text-02); font-size: var(--kofa-typo-body-4-size); font-weight: var(--kofa-font-weight-semibold); line-height: var(--kofa-line-height-base); white-space: nowrap; }

body[data-site-home] .kofa-common-header:not([data-site-mega-open]) { background: var(--kofa-color-black); color: var(--kofa-color-white); }
/* 홈 다크 헤더는 시안 대조 전이라 기존 높이를 유지한다 */
body[data-site-home] .kofa-common-header__top { border-top: 0; border-color: var(--kofa-color-gray-150); }
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__top { border-color: rgb(225 225 225 / 50%); }
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__top { padding-block: 6px; box-shadow: inset 0 -1px 0 rgb(225 225 225 / 50%); }
}
@media (max-width: 599px) {
  body[data-site-home] .kofa-common-header__top { padding-block: 12px; box-shadow: none; }
}
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__nav { box-shadow: none; }
/* 홈 로고는 Figma의 컬러 심볼·흰 워드마크 합성 프레임을 그대로 쓴다. */
body[data-site-home] .kofa-common-header__logo { height: 50.44px; }
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__logo { display: none; }
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__logo { height: 32px; }
}

@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__brand { flex-basis: 111.657px; }
}
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__logo--inverse { display: block; }
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__search { border: 1px solid rgb(231 235 238 / 40%); background: transparent; }
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__search { border: 0; }
}
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__actions img:not(.kofa-common-header__action-icon--inverse) { display: none; }
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__actions .kofa-common-header__action-icon--inverse { display: block; }
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__account { box-sizing: border-box; flex-direction: column; width: auto; min-width: 60px; height: 56px; padding: 4px 12px 0; gap: 4px; border-radius: 8px; font-size: var(--kofa-typo-body-3-size); }
}
@media (max-width: 599px) {
  body[data-site-home] .kofa-common-header__account { box-sizing: border-box; flex-direction: column; width: auto; min-width: 52px; height: 56px; padding: 4px 8px 0; gap: 4px; border-radius: 8px; font-size: var(--kofa-typo-body-3-size); }
}
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__account > span:last-child { display: block; }
}
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__accounts > a:last-child { width: 71px; }
}
@media (max-width: 599px) {
  body[data-site-home] .kofa-common-header__accounts > a:last-child { width: 63px; }
}
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__icon { width: 20px; height: 20px; }
}
@media (max-width: 599px) {
  body[data-site-home] .kofa-common-header__accounts > a:last-child .kofa-common-header__icon { width: 24px; height: 24px; }
}
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__icon img { width: 100%; height: 100%; }
}
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__menu { color: var(--kofa-color-white); }
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__booking { border-color: var(--kofa-color-white); color: var(--kofa-color-white); }

.kofa-common-header__menu-button { display: none; }
@media (max-width: 1279px) {
  .kofa-common-header__menu-button { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; }
}
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__menu-button { box-sizing: border-box; flex-direction: column; width: 71px; height: 56px; padding: 4px 12px 0; gap: 4px; border-radius: 8px; font-family: inherit; font-size: var(--kofa-typo-body-3-size); font-weight: var(--kofa-font-weight-semibold); line-height: var(--kofa-line-height-base); letter-spacing: inherit; white-space: nowrap; }
}
@media (max-width: 599px) {
  body[data-site-home] .kofa-common-header__menu-button { flex-direction: column; width: 63px; height: 56px; padding: 4px 8px 0; gap: 4px; border-radius: 8px; font-family: inherit; font-size: var(--kofa-typo-body-3-size); font-weight: var(--kofa-font-weight-semibold); line-height: var(--kofa-line-height-base); letter-spacing: inherit; white-space: nowrap; }
}
.kofa-common-header__menu-button-label { display: none; }
@media (max-width: 1279px) {
  body[data-site-home] .kofa-common-header__menu-button-label { display: block; }
}
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__chevron img:first-child { display: none; }
body[data-site-home] .kofa-common-header:not([data-site-mega-open]) .kofa-common-header__chevron .kofa-common-header__action-icon--inverse { display: block; }
.kofa-common-header__mega { position: absolute; top: 100%; inset-inline: 0; z-index: 5; background: var(--kofa-color-white); color: var(--kofa-color-text-01); box-shadow: 0 2px 8px rgb(0 0 0 / 8%); animation: kofa-common-header-reveal 180ms ease; }
@media (prefers-reduced-motion: reduce) {
  .kofa-common-header__mega { animation: none; }
}
.kofa-common-header__backdrop { position: fixed; z-index: 99; inset: 0; background: var(--kofa-color-neutral-black-50); }
.kofa-common-header__backdrop[hidden] { display: none; }
.kofa-common-header__mega[hidden] { display: none; }
.kofa-common-header__mega-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; column-gap: 40px; padding-block: 16px; width: min(calc(100% - 80px), 1300px); margin-inline: auto; }
.kofa-common-header__sections { grid-column: 1; grid-row: 1; display: grid; gap: 4px; align-content: start; }
.kofa-common-header__section { grid-column: 1; align-self: start; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 24px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: start; font: inherit; font-size: var(--kofa-typo-body-5-size); line-height: var(--kofa-line-height-base); letter-spacing: inherit; cursor: pointer; text-decoration: none; }
.kofa-common-header__section:is(:hover, :focus-visible) { background: var(--kofa-common-header-hover-background); }
.kofa-common-header__section:focus-visible { outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring); outline-offset: var(--kofa-outline-focus-offset); }
.kofa-common-header__section:is([aria-expanded="true"], [data-site-menu-current]:not([data-site-menu-section])) { background: var(--kofa-color-gray-100); color: var(--kofa-color-text-01); font-weight: var(--kofa-font-weight-bold); }
.kofa-common-header__section-arrow { display: flex; flex: none; }
.kofa-common-header__destinations { grid-column: 2; grid-row: 1; padding-inline: 40px; min-width: 0; }
.kofa-common-header__destinations[hidden] { display: none; }
.kofa-common-header__destination-title { margin: 0 0 16px; padding: 10px; font-size: var(--kofa-typo-headline-4-size); font-weight: var(--kofa-font-weight-bold); line-height: var(--kofa-line-height-base); }
.kofa-common-header__link-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; }
.kofa-common-header__destination { display: flex; gap: 8px; align-items: baseline; padding: 10px 8px; border-radius: 6px; color: inherit; font-size: var(--kofa-typo-body-5-size); line-height: var(--kofa-line-height-base); text-decoration: none; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.kofa-common-header__destination[aria-current] { font-weight: var(--kofa-font-weight-semibold); }
.kofa-common-header__destination::before { content: ""; flex: none; width: 12px; height: 2px; background: currentcolor; align-self: center; }
.kofa-common-header__destination:is(:hover, :focus-visible) { background: var(--kofa-common-header-hover-background); }
.kofa-site-drawer { position: fixed; inset: 0; box-sizing: border-box; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--kofa-color-text-01); overflow: clip; }
.kofa-site-drawer * { box-sizing: border-box; }
.kofa-site-drawer::backdrop { background: rgb(0 0 0 / 50%); opacity: 0; transition: opacity 240ms cubic-bezier(0.2, 0, 0, 1); }
@media (max-width: 599px) {
  .kofa-site-drawer::backdrop { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .kofa-site-drawer::backdrop { transition: none; }
}
.kofa-site-drawer[data-state="open"]::backdrop { opacity: 1; }
@media (max-width: 599px) {
  .kofa-site-drawer[data-state="open"]::backdrop { background: transparent; }
}
.kofa-site-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(375px, 100%); overflow: hidden; background: var(--kofa-color-white); transform: translateX(100%); transition: transform 240ms cubic-bezier(0.2, 0, 0, 1); }
@media (max-width: 599px) {
  .kofa-site-drawer__panel { width: 100%; opacity: 0; transform: none; transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .kofa-site-drawer__panel { transition: none; }
}
.kofa-site-drawer[data-state="open"] .kofa-site-drawer__panel { transform: translateX(0); }
@media (max-width: 599px) {
  .kofa-site-drawer[data-state="open"] .kofa-site-drawer__panel { opacity: 1; transform: none; }
}
.kofa-site-drawer__header { display: flex; height: 56px; flex: 0 0 56px; align-items: center; justify-content: space-between; padding-left: 16px; border-bottom: 2px solid var(--kofa-color-icon-default); }
.kofa-site-drawer__logo { line-height: 0; }
.kofa-site-drawer__logo img { display: block; width: auto; height: 32px; }
.kofa-site-drawer__close { display: inline-grid; width: 44px; height: 44px; padding: 10px; place-items: center; border: 0; background: transparent; cursor: pointer; }
.kofa-site-drawer__close img { width: 24px; height: 24px; }
.kofa-site-drawer__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.kofa-site-drawer__scroll::-webkit-scrollbar { width: 0; height: 0; }
.kofa-site-drawer__navigation { display: block; }
.kofa-site-drawer__section h3 { margin: 0; }
.kofa-site-drawer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 0 0 16px; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: var(--kofa-typo-headline-3-size); font-weight: var(--kofa-font-weight-bold); line-height: 1.5; letter-spacing: inherit; text-align: left; cursor: pointer; }
.kofa-site-drawer__disclosure { display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; place-items: center; }
.kofa-site-drawer__disclosure img { width: 24px; height: 24px; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  .kofa-site-drawer__disclosure img { transition: none; }
}
.kofa-site-drawer__toggle[aria-expanded="true"] .kofa-site-drawer__disclosure img { transform: rotate(180deg); }
.kofa-site-drawer__toggle[data-site-menu-current] { text-decoration: underline; text-underline-offset: 6px; }
.kofa-site-drawer__toggle:focus-visible { outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring); outline-offset: var(--kofa-outline-focus-offset); }
.kofa-site-drawer__submenu { display: flex; flex-direction: column; padding: 10px 0; background: var(--kofa-color-background-gray-subtler); }
.kofa-site-drawer__submenu[hidden] { display: none; }
.kofa-site-drawer__submenu h4 { margin: 0; padding: 12px 16px 0; color: var(--kofa-color-text-02); font-size: var(--kofa-typo-body-3-size); font-weight: var(--kofa-font-weight-regular); line-height: 1.5; }
.kofa-site-drawer__submenu [data-site-drawer-group][data-site-menu-current] h4 { box-shadow: inset 3px 0 0 currentcolor; font-weight: var(--kofa-font-weight-bold); }
.kofa-site-drawer__submenu a { display: flex; min-height: 48px; flex: 0 0 auto; align-items: center; padding: 8px 16px; color: inherit; font-size: var(--kofa-typo-body-4-size); font-weight: var(--kofa-font-weight-semibold); line-height: 1.5; text-decoration: none; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.kofa-site-drawer__submenu a[aria-current] { font-weight: var(--kofa-font-weight-bold); text-decoration-line: underline; text-underline-offset: 4px; }
.kofa-site-drawer__submenu a:is(:hover, :focus-visible) { background: var(--kofa-color-surface-disabled); text-decoration-line: underline; }
.kofa-site-drawer__submenu > a[aria-current] { background: var(--kofa-color-black); color: var(--kofa-color-white); text-decoration: none; }
.kofa-site-drawer__account { display: flex; min-height: 48px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 15px 0 16px; border-top: 1px solid var(--kofa-color-divider-02); font-size: var(--kofa-typo-body-3-size); font-weight: var(--kofa-font-weight-regular); line-height: 1.5; }
.kofa-site-drawer__account a { display: inline-flex; min-height: 44px; align-items: center; color: inherit; text-decoration: none; }
.kofa-site-drawer__member { min-width: 0; flex: 1; }
.kofa-site-drawer__member span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kofa-site-drawer__logout { flex: none; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.kofa-site-drawer__bottom { display: flex; min-height: 48px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 15px 0 16px; border-top: 1px solid var(--kofa-color-divider-02); background: var(--kofa-color-white); font-size: var(--kofa-typo-body-3-size); line-height: 1.5; }
.kofa-site-drawer__bottom a { display: inline-flex; min-height: 44px; align-items: center; color: var(--kofa-color-text-02); text-decoration: none; }
.kofa-site-drawer__divider { width: 1px; height: 12px; flex: 0 0 1px; background: var(--kofa-color-divider-02); }

/* 사이트 공통 푸터 */
.kofa-common-footer { background: var(--kofa-color-white); color: var(--kofa-color-text-01); letter-spacing: var(--kofa-letter-spacing-base); }
.kofa-common-footer__frame { width: var(--kofa-layout-safe-width); margin-inline: auto; }
.kofa-common-footer__partners { border-top: 1px solid var(--kofa-color-divider-02); padding-block: 30px; }
@media (max-width: 1279px) {
  .kofa-common-footer__partners { display: none; }
}
.kofa-common-footer__partner-list { display: flex; align-items: center; justify-content: center; gap: 89.091px; width: min(100% - 2rem, 1264px); margin-inline: auto; }
@media (max-width: 1279px) {
  .kofa-common-footer__partner-list { flex-wrap: wrap; gap: 24px 32px; }
}
/* 원본 로고 이미지는 여백을 포함한다. Figma 이미지 크롭(크기·위치)을 그대로 옮긴다. */
.kofa-common-footer__partner { position: relative; display: block; flex: none; width: 181.364px; height: 38px; overflow: hidden; }
.kofa-common-footer__partner img { position: absolute; display: block; max-width: none; }
.kofa-common-footer__partner--mcst img { top: -10.14px; left: -5.8px; width: 194.99px; height: 57.28px; }
.kofa-common-footer__partner--kofic img { top: -45.48px; left: -20.72px; width: 222.81px; height: 122.24px; }
.kofa-common-footer__partner--kmrb img { top: 0; left: 22.46px; width: 136.691px; height: 38px; }
.kofa-common-footer__partner--alio img { top: -18.77px; left: -16.71px; width: 215.81px; height: 69.37px; }
.kofa-common-footer__partner--culture img { top: -12.95px; left: 35.05px; width: 111.26px; height: 63.05px; }
.kofa-common-footer__primary { padding-block: 32px; border-top: 1px solid var(--kofa-color-divider-02); }
@media (max-width: 599px) {
  .kofa-common-footer__primary { padding-block: 32px 24px; }
}
.kofa-common-footer__brand { position: relative; display: block; width: 161.92px; }
@media (max-width: 1279px) {
  .kofa-common-footer__brand { width: 140.8px; }
}
.kofa-common-footer__brand img { display: block; width: 100%; height: 46px; object-fit: cover; }
@media (max-width: 1279px) {
  .kofa-common-footer__brand img { height: 40px; }
}
.kofa-common-footer__columns { display: grid; grid-template-columns: minmax(0, 718px) minmax(0, 536px); gap: 0; margin-top: 40px; }
@media (max-width: 1279px) {
  .kofa-common-footer__columns { grid-template-columns: minmax(0, 507fr) minmax(0, 397fr); gap: 40px; margin-top: 32px; }
}
@media (max-width: 599px) {
  .kofa-common-footer__columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.kofa-common-footer__contacts { display: flex; flex-direction: column; gap: 16px; min-width: 0; font-size: var(--kofa-typo-body-4-size); line-height: var(--kofa-line-height-base); overflow-wrap: anywhere; }
.kofa-common-footer__contacts p { display: flex; gap: 16px; margin: 0; color: var(--kofa-color-text-02); }
.kofa-common-footer__contacts strong { flex: none; color: var(--kofa-color-text-01); font-weight: var(--kofa-font-weight-semibold); }
.kofa-common-footer__contacts a { color: inherit; text-decoration: none; }
.kofa-common-footer__contact-group { display: flex; flex-direction: column; gap: 8px; }
.kofa-common-footer__contact-group--aligned strong { width: 60px; }
.kofa-common-footer__resources { display: grid; align-content: start; gap: 25px; width: min(100%, 536px); min-width: 0; }
@media (max-width: 1279px) {
  .kofa-common-footer__resources { gap: 24px; }
}
@media (max-width: 599px) {
  .kofa-common-footer__resources { gap: 32px; }
}
.kofa-common-footer__links { display: grid; grid-template-columns: repeat(2, minmax(80px, max-content)); column-gap: 24px; row-gap: 10px; }
@media (max-width: 1279px) {
  .kofa-common-footer__links { grid-template-columns: repeat(2, 80px); }
}
@media (max-width: 599px) {
  .kofa-common-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kofa-common-footer__links a { color: inherit; font-size: var(--kofa-typo-body-3-size); font-weight: var(--kofa-font-weight-semibold); line-height: var(--kofa-line-height-base); text-decoration: underline; }
.kofa-common-footer__social { display: flex; flex-direction: column; gap: 17px; }
@media (max-width: 1279px) {
  .kofa-common-footer__social { gap: 16px; }
}
.kofa-common-footer__channels { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
@media (max-width: 1279px) {
  .kofa-common-footer__channels { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 16px 24px; }
}
@media (max-width: 599px) {
  .kofa-common-footer__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kofa-common-footer__channel { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: var(--kofa-typo-body-3-size); line-height: var(--kofa-line-height-base); white-space: nowrap; }
@media (max-width: 1279px) {
  .kofa-common-footer__channel { justify-self: start; max-width: 100%; min-width: 0; white-space: normal; }
}
@media (max-width: 599px) {
  .kofa-common-footer__channel { justify-self: stretch; }
}
.kofa-common-footer__sns { display: flex; align-items: center; gap: 20px; }
/* 28px 원 안의 아이콘 위치는 Figma 아이콘 틀 좌표를 그대로 옮긴 값이다. */
.kofa-common-footer__social-icon { position: relative; display: block; flex: none; box-sizing: border-box; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; }
.kofa-common-footer__social-icon img { display: block; }
.kofa-common-footer__social-icon--green { padding: 3px 0 0 3.13px; background: linear-gradient(#00e193, #0dcdce); }
.kofa-common-footer__social-crop { display: block; width: 22.459px; height: 22.432px; overflow: hidden; }
.kofa-common-footer__social-crop img { width: 23.113px; height: 23.336px; max-width: none; }
.kofa-common-footer__social-icon--dark { padding: 3.853px; background: #202124; }
.kofa-common-footer__social-icon--dark img { width: 20.295px; height: 20.295px; }
.kofa-common-footer :is(.kofa-common-footer__brand, .kofa-common-footer__partner, .kofa-common-footer__social-icon):focus-visible {
  outline: 0;
}
.kofa-common-footer :is(.kofa-common-footer__brand, .kofa-common-footer__partner, .kofa-common-footer__social-icon):focus-visible::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--kofa-outline-focus-width) var(--kofa-color-focus-ring);
  content: "";
  pointer-events: none;
}

/* 테두리가 없는 문자 링크는 글자를 덮지 않도록 간격 없이 바깥에 표시한다. */
.kofa-common-footer :is(.kofa-common-footer__policy-link, .kofa-common-footer__channel, .kofa-common-footer__links a, .kofa-common-footer__contacts a):focus-visible {
  outline-offset: 0;
}

.kofa-common-footer__bottom { padding-block: 10px; }
@media (max-width: 1279px) {
  .kofa-common-footer__bottom { padding-block: 16px; }
}
.kofa-common-footer__bottom .kofa-common-footer__frame { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; }
@media (max-width: 1279px) {
  .kofa-common-footer__bottom .kofa-common-footer__frame { justify-content: flex-start; gap: 16px 24px; }
}
@media (max-width: 599px) {
  .kofa-common-footer__bottom .kofa-common-footer__frame { align-items: flex-start; flex-direction: column; }
}
.kofa-common-footer__bottom p { margin: 0 0 0 auto; color: var(--kofa-color-text-02); font-size: var(--kofa-typo-body-2-size); line-height: var(--kofa-line-height-base); }
@media (max-width: 1279px) {
  .kofa-common-footer__bottom p { width: min(100%, 536px); margin: 0; text-align: right; }
}
@media (max-width: 599px) {
  .kofa-common-footer__bottom p { width: 100%; text-align: left; }
}
.kofa-common-footer__policy { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 1279px) {
  .kofa-common-footer__policy { gap: 8px 18px; }
}
@media (max-width: 599px) {
  .kofa-common-footer__policy { column-gap: 12px; }
}
.kofa-common-footer__policy-link { color: inherit; font-size: var(--kofa-typo-body-3-size); font-weight: var(--kofa-font-weight-semibold); line-height: var(--kofa-line-height-base); text-decoration: none; white-space: nowrap; }
.kofa-common-footer__policy-link--privacy { color: var(--kofa-color-success-700); text-decoration: underline; }
.kofa-placeholder {
  box-sizing: border-box;
  width: var(--kofa-layout-safe-width);
  margin-inline: auto;
  padding: calc(var(--kofa-space-base) * 10) calc(var(--kofa-space-base) * 2);
  border: 1px solid currentcolor;
}

.kofa-placeholder__title {
  margin: 0;
  font-size: 1.5rem;
}

.kofa-placeholder__url {
  margin: var(--kofa-space-base) 0 0;
  overflow-wrap: anywhere;
}


/* =============================================================================
   공용 컴포넌트
   섹션 마커 사이에만 쓴다. 자기 마커 밖의 줄을 고치지 않는다.
   ============================================================================= */


/* ===== button ===== */
/* 버튼 — kofa-button, kofa-text-button */
/*
 * Figma 밖 유지: kofa-is-focused·kofa-is-error(키보드 초점, 검증 상태 계약), transition 0.15s.
 */

.kofa-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 100px;
  height: 56px;
  min-height: 56px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: var(--kofa-radius-10);
  color: var(--kofa-color-text-01);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

@media (max-width: 599px) {
  .kofa-button {
    max-width: 100%;
  }
}

.kofa-button[hidden] { display: none; }

.kofa-button:focus-visible,
.kofa-button.kofa-is-focused {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-button:disabled,
.kofa-button[aria-disabled="true"],
.kofa-button.kofa-is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

.kofa-button--xlarge {
  min-width: 100px;
  height: 56px;
  min-height: 56px;
  padding: 16px;
  border-radius: var(--kofa-radius-10);
  font-size: var(--kofa-typo-body-4-size);
}

.kofa-button--large {
  min-width: 90px;
  height: 48px;
  min-height: 48px;
  padding: 16px;
  border-radius: var(--kofa-radius-10);
  font-size: var(--kofa-typo-body-4-size);
}

/* mobile에서만 xlarge(56px). 로그인 문의 FAQ(3554:40421)처럼 넓은 폭은 large·mobile은 xlarge인 인스턴스용 */
@media (max-width: 599px) {
  .kofa-button--mobile-xlarge {
    min-width: 100px;
    height: 56px;
    min-height: 56px;
    padding: 16px;
    border-radius: var(--kofa-radius-10);
    font-size: var(--kofa-typo-body-4-size);
  }
}

@media (max-width: 1279px) {
  .kofa-button--responsive-medium {
    min-width: 60px;
    height: 34px;
    min-height: 34px;
    padding: 8px;
    border-radius: var(--kofa-radius-8);
    font-size: var(--kofa-typo-body-2-size);
  }
}

/* Figma Button size=medium(3039:11339 등)은 HUG로 padding 8 + 글자 18 + 8 = 34px. FIXED 32px 인스턴스는 개별 조정이다. */
.kofa-button--medium {
  min-width: 60px;
  height: 34px;
  min-height: 34px;
  padding: 8px;
  border-radius: var(--kofa-radius-8);
  font-size: var(--kofa-typo-body-2-size);
}

/* 좁은 폭 48px 변형. --medium과 함께 쓰면 좁은 폭이 이겨야 하므로 --medium 뒤에 둔다 */
@media (max-width: 1279px) {
  .kofa-button--responsive-large {
    min-width: 90px;
    height: 48px;
    min-height: 48px;
    padding: 16px;
    border-radius: var(--kofa-radius-10);
    font-size: var(--kofa-typo-body-4-size);
  }
}

/* mobile에서만 large(48px). 소장자료 상세 관련 안내처럼 넓은 폭은 medium·mobile은 large인 인스턴스용 */
@media (max-width: 599px) {
  .kofa-button--mobile-large {
    min-width: 90px;
    height: 48px;
    min-height: 48px;
    padding: 16px;
    border-radius: var(--kofa-radius-10);
    font-size: var(--kofa-typo-body-4-size);
  }
}

.kofa-button--small {
  gap: 2px;
  min-width: 50px;
  height: 24px;
  min-height: 24px;
  padding: 8px;
  border-radius: var(--kofa-radius-8);
  font-size: var(--kofa-typo-body-2-size);
}

.kofa-button--primary {
  color: var(--kofa-color-text-white);
  background: var(--kofa-color-surface-primary);
  border-color: var(--kofa-color-surface-primary);
}

.kofa-button--primary:not(:disabled):not([aria-disabled="true"]):hover,
.kofa-button--primary.kofa-is-hovered {
  background: var(--kofa-color-gray-600);
  border-color: var(--kofa-color-gray-600);
}

.kofa-button--primary:not(:disabled):not([aria-disabled="true"]):active,
.kofa-button--primary.kofa-is-pressed {
  background: var(--kofa-color-gray-600);
  border-color: var(--kofa-color-gray-600);
}

.kofa-button--outline {
  color: var(--kofa-color-text-02);
  background: var(--kofa-color-surface-white);
  border-color: var(--kofa-color-border-default);
}

/* 페이지 시안의 outline 버튼 중 글자가 text/01인 것(예: 기획전시 '자세히 보기' 2981:304020). */
.kofa-button--outline-strong {
  color: var(--kofa-color-text-01);
}

.kofa-button--outline:not(:disabled):not([aria-disabled="true"]):hover,
.kofa-button--outline.kofa-is-hovered {
  background: var(--kofa-color-gray-100);
  border-color: var(--kofa-color-gray-150);
}

.kofa-button--outline:not(:disabled):not([aria-disabled="true"]):active,
.kofa-button--outline.kofa-is-pressed {
  background: var(--kofa-color-gray-100);
  border-color: var(--kofa-color-gray-150);
}

.kofa-button--secondary {
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-disabled);
  border-color: var(--kofa-color-surface-disabled);
}

.kofa-button--secondary:not(:disabled):not([aria-disabled="true"]):hover,
.kofa-button--secondary.kofa-is-hovered {
  background: var(--kofa-color-surface-inactive);
  border-color: var(--kofa-color-surface-inactive);
}

.kofa-button--secondary:not(:disabled):not([aria-disabled="true"]):active,
.kofa-button--secondary.kofa-is-pressed {
  background: var(--kofa-color-surface-inactive);
  border-color: var(--kofa-color-surface-inactive);
}

.kofa-button--destructive-secondary {
  color: var(--kofa-color-text-white);
  background: var(--kofa-color-error-500);
  border-color: var(--kofa-color-error-500);
}

.kofa-button--destructive-secondary:not(:disabled):not([aria-disabled="true"]):hover,
.kofa-button--destructive-secondary.kofa-is-hovered {
  background: var(--kofa-color-error-600);
  border-color: var(--kofa-color-error-600);
}

.kofa-button--destructive-secondary:not(:disabled):not([aria-disabled="true"]):active,
.kofa-button--destructive-secondary.kofa-is-pressed {
  background: var(--kofa-color-error-700);
  border-color: var(--kofa-color-error-700);
}

.kofa-button--primary-line {
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-white);
  border-color: var(--kofa-color-border-primary);
}

.kofa-button--primary-line:not(:disabled):not([aria-disabled="true"]):hover,
.kofa-button--primary-line.kofa-is-hovered {
  color: var(--kofa-color-text-03);
  border-color: var(--kofa-color-gray-600);
}

.kofa-button--primary-line:not(:disabled):not([aria-disabled="true"]):active,
.kofa-button--primary-line.kofa-is-pressed {
  color: var(--kofa-color-text-03);
  border-color: var(--kofa-color-gray-600);
}

.kofa-button--destructive-primary {
  color: var(--kofa-color-text-danger);
  background: var(--kofa-color-surface-inactive);
  border-color: var(--kofa-color-surface-inactive);
}

.kofa-button--destructive-primary:not(:disabled):not([aria-disabled="true"]):hover,
.kofa-button--destructive-primary.kofa-is-hovered {
  color: var(--kofa-color-error-600);
}

.kofa-button--destructive-primary:not(:disabled):not([aria-disabled="true"]):active,
.kofa-button--destructive-primary.kofa-is-pressed {
  color: var(--kofa-color-error-700);
}

.kofa-button.kofa-is-error {
  color: var(--kofa-color-text-danger);
  background: var(--kofa-color-surface-danger-subtle);
  border-color: var(--kofa-color-border-danger);
}

.kofa-button__icon {
  flex: 0 0 auto;
  width: var(--kofa-icon-size-24);
  height: var(--kofa-icon-size-24);
  background-color: currentcolor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.kofa-button__icon--image {
  background-color: transparent;
}

.kofa-button__icon--plus {
  mask-image: url("/icons/action/plus.svg");
}

.kofa-button__icon--chevron-right {
  mask-image: url("/icons/chevron/chevron-right.svg");
}

.kofa-button--large .kofa-button__icon {
  width: var(--kofa-icon-size-20);
  height: var(--kofa-icon-size-20);
}

@media (max-width: 599px) {
  .kofa-button--mobile-xlarge .kofa-button__icon {
    width: var(--kofa-icon-size-24);
    height: var(--kofa-icon-size-24);
  }
}

.kofa-button--medium .kofa-button__icon,
.kofa-button--small .kofa-button__icon,
.kofa-button--responsive-medium .kofa-button__icon {
  width: var(--kofa-icon-size-16);
  height: var(--kofa-icon-size-16);
}

@media (max-width: 1279px) {
  .kofa-button--responsive-large .kofa-button__icon {
    width: var(--kofa-icon-size-20);
    height: var(--kofa-icon-size-20);
  }
}

@media (max-width: 599px) {
  .kofa-button--mobile-large .kofa-button__icon {
    width: var(--kofa-icon-size-20);
    height: var(--kofa-icon-size-20);
  }
}

.kofa-text-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  color: var(--kofa-color-text-03);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  text-decoration: none;
}

.kofa-text-button--large {
  gap: 4px;
  height: 56px;
  font-size: var(--kofa-typo-body-4-size);
}

.kofa-text-button--medium {
  gap: 4px;
  height: 32px;
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-text-button--small {
  gap: 2px;
  height: 24px;
  font-size: var(--kofa-typo-body-2-size);
}

.kofa-text-button--success {
  color: var(--kofa-color-text-success);
}

.kofa-text-button:hover,
.kofa-text-button.kofa-is-hovered {
  background: var(--kofa-color-surface-primary-subtle);
}

.kofa-text-button:active,
.kofa-text-button.kofa-is-pressed {
  color: var(--kofa-color-text-02);
  background: var(--kofa-color-surface-disabled);
}

.kofa-text-button:focus-visible,
.kofa-text-button.kofa-is-focused {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-text-button:disabled,
.kofa-text-button[aria-disabled="true"],
.kofa-text-button.kofa-is-disabled {
  color: var(--kofa-color-text-04);
  cursor: not-allowed;
  pointer-events: none;
}

.kofa-text-button.kofa-is-error {
  color: var(--kofa-color-text-danger);
  background: var(--kofa-color-surface-danger-subtle);
}

.kofa-text-button__icon {
  flex: 0 0 auto;
  width: var(--kofa-icon-size-24);
  height: var(--kofa-icon-size-24);
  background-color: currentcolor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.kofa-text-button__icon--plus {
  mask-image: url("/icons/action/plus.svg");
}

.kofa-text-button__icon--chevron-right {
  mask-image: url("/icons/chevron/chevron-right.svg");
}

.kofa-text-button--medium .kofa-text-button__icon {
  width: var(--kofa-icon-size-20);
  height: var(--kofa-icon-size-20);
}

.kofa-text-button--small .kofa-text-button__icon {
  width: var(--kofa-icon-size-16);
  height: var(--kofa-icon-size-16);
}

/* ===== /button ===== */



/* ===== search-field ===== */
/* 통합검색 — kofa-search-field. default는 가로 한 줄, 599px 이하는 mobile 두 줄이다. */
.kofa-search-field {
  letter-spacing: var(--kofa-letter-spacing-base);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12.5px 20px 12.5px 30px;
  border: 2.5px solid transparent;
  border-radius: 156px;
  background: linear-gradient(white, white) padding-box, var(--kofa-color-brand-border-gradient) border-box;
}
@media (max-width: 599px) {
  .kofa-search-field { display: grid; gap: 8px; padding: 0; border: 0; border-radius: 0; }
}
.kofa-search-field .kofa-search-field__scope {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 114px;
}
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__scope { display: flex; justify-content: space-between; padding: 14.5px 20px 14.5px 24px; border: 2.5px solid transparent; border-radius: 156px; background: linear-gradient(white, white) padding-box, var(--kofa-color-brand-border-gradient) border-box; }
}
.kofa-search-field .kofa-search-field__query {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__query { padding: 12px 20px 12px 24px; border: 2.5px solid transparent; border-radius: 156px; background: linear-gradient(white, white) padding-box, var(--kofa-color-brand-border-gradient) border-box; }
}
.kofa-search-field .kofa-search-field__brand {
  display: block;
  flex: 0 0 23.063px;
  width: 23.063px;
  height: 26.875px;
  overflow: hidden;
}
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__brand { flex-basis: 17.163px; width: 17.163px; height: 20px; }
}
.kofa-search-field .kofa-search-field__brand img { display: block; max-width: none; width: 73.125px; height: 41.438px; }
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__brand img { width: 54.419px; height: 30.837px; }
}
.kofa-search-field .kofa-search-field__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kofa-color-text-01);
  font: inherit;
  font-size: var(--kofa-typo-body-5-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
}
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__input { font-size: var(--kofa-typo-body-4-size); }
}
.kofa-search-field .kofa-search-field__input:focus-visible {
  outline: 0;
}
.kofa-search-field:has(.kofa-search-field__input:focus-visible) {
  background: var(--kofa-color-surface-white);
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}
@media (max-width: 599px) {
  .kofa-search-field:has(.kofa-search-field__input:focus-visible) { outline: 0; }
}
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__query:has(.kofa-search-field__input:focus-visible) {
    background: var(--kofa-color-surface-white);
    outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
    outline-offset: var(--kofa-outline-focus-offset);
  }
}
.kofa-search-field .kofa-search-field__submit {
  flex: 0 0 auto;
  min-width: 100px;
  padding: 16px;
  border: 0;
  border-radius: 1000px;
  background: var(--kofa-color-text-01);
  color: var(--kofa-color-text-white);
  font: inherit;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  cursor: pointer;
}
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__submit { min-width: 60px; padding: 7px 8px; font-size: var(--kofa-typo-body-2-size); }
}
.kofa-search-field .kofa-search-field__scope-select { position: relative; flex: 0 0 82px; width: 82px; }
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__scope-select { flex: 1; width: 100%; }
}
.kofa-search-field .kofa-search-field__scope-divider { flex: 0 0 16px; height: 24px; background: linear-gradient(var(--kofa-color-divider-02), var(--kofa-color-divider-02)) center / 1px 24px no-repeat; }
@media (max-width: 599px) {
  .kofa-search-field .kofa-search-field__scope-divider { display: none; }
}
.kofa-search-field .kofa-search-field__scope-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--kofa-color-text-01); font-size: var(--kofa-typo-body-5-size); font-weight: var(--kofa-font-weight-semibold); line-height: var(--kofa-line-height-base); list-style: none; cursor: pointer; }
.kofa-search-field .kofa-search-field__scope-toggle::-webkit-details-marker { display: none; }
/* ===== /search-field ===== */

/* ===== text-field ===== */
/* 입력 — kofa-text-field */
/*
 * Figma 밖 유지: hover는 gray-dark border, pressed는 selected border, focus는 공용 포커스 규격.
 * 비밀번호 눈 아이콘은 Figma asset이 없어 /icons/input/input-{on,off}.svg를 20px로 쓴다.
 * 공유 인스턴스(568px)가 base(343px)와 달라 고정 max-width 없이 부모 폭을 따른다.
 */
.kofa-text-field {
  display: grid;
  gap: 6px;
  width: 100%;
  color: var(--kofa-color-text-01);
}

.kofa-text-field__label-control {
  display: grid;
  gap: 8px;
}

.kofa-text-field__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kofa-typo-body-3-size);
  font-weight: var(--kofa-font-weight-regular);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

.kofa-text-field__required {
  color: var(--kofa-color-text-danger);
}

.kofa-text-field__input-wrap {
  position: relative;
}

.kofa-text-field__control {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--kofa-color-border-default);
  border-radius: var(--kofa-radius-16);
  outline: 0;
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-white);
  font: inherit;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-regular);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  transition: border-color 0.15s ease;
}

.kofa-text-field__control:focus-visible,
.kofa-text-field.kofa-is-focused .kofa-text-field__control {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-text-field__control::placeholder {
  color: var(--kofa-color-text-03);
  opacity: 1;
}

.kofa-text-field__control:where(:not(:disabled):not([readonly])):hover {
  border-color: var(--kofa-color-border-gray-dark);
}

.kofa-text-field__control:where(:not(:disabled):not([readonly])):focus,
.kofa-text-field__control:where(:not(:disabled):not([readonly])):active {
  border-color: var(--kofa-color-border-primary);
}

.kofa-text-field__control:disabled {
  cursor: not-allowed;
}

.kofa-text-field__control[readonly] {
  cursor: default;
}

.kofa-text-field__toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  place-items: center;
  width: var(--kofa-icon-touch-target);
  height: var(--kofa-icon-touch-target);
  padding: 0;
  border: 0;
  border-radius: var(--kofa-radius-4);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.kofa-text-field__toggle:focus-visible {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-text-field__toggle:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.kofa-text-field__toggle-icon {
  width: var(--kofa-icon-size-20);
  height: var(--kofa-icon-size-20);
}

.kofa-text-field__footer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 18px;
  padding: 0 8px;
}

.kofa-text-field__description {
  margin: 0;
  color: var(--kofa-color-text-02);
  font-size: var(--kofa-typo-body-2-size);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

.kofa-text-field__counter {
  flex: none;
  color: var(--kofa-color-text-02);
  font-size: var(--kofa-typo-body-2-size);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

.kofa-text-field--small .kofa-text-field__control {
  height: 48px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: var(--kofa-radius-12);
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-text-field--password .kofa-text-field__control {
  padding-right: 52px;
}

/* Figma text field `right icon`: 오른쪽 padding 16px + 아이콘 20px + gap 8px. */
.kofa-text-field--icon .kofa-text-field__control {
  padding-right: 44px;
}

/* 20px 틀 안의 glyph 위치는 Figma 벡터 inset이다. 아이콘은 입력을 가리지 않게 클릭을 통과시킨다. */
.kofa-text-field__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  width: var(--kofa-icon-size-20);
  height: var(--kofa-icon-size-20);
  padding: 1.667px 0 0 1.667px;
  pointer-events: none;
  transform: translateY(-50%);
}

.kofa-text-field.kofa-is-hovered .kofa-text-field__control {
  border-color: var(--kofa-color-border-gray-dark);
}

.kofa-text-field.kofa-is-focused .kofa-text-field__control,
.kofa-text-field.kofa-is-pressed .kofa-text-field__control,
.kofa-text-field.kofa-is-selected .kofa-text-field__control {
  border-color: var(--kofa-color-border-primary);
}

.kofa-text-field.kofa-is-successful .kofa-text-field__control {
  border-color: var(--kofa-color-border-success);
}

.kofa-text-field--textarea.kofa-is-successful .kofa-text-field__control {
  border-color: var(--kofa-color-border-information);
}

.kofa-text-field.kofa-is-error .kofa-text-field__control,
.kofa-text-field.kofa-is-required .kofa-text-field__control {
  border-color: var(--kofa-color-border-danger);
}

.kofa-text-field.kofa-is-error .kofa-text-field__description,
.kofa-text-field.kofa-is-error .kofa-text-field__counter,
.kofa-text-field.kofa-is-required .kofa-text-field__description,
.kofa-text-field.kofa-is-required .kofa-text-field__counter {
  color: var(--kofa-color-text-danger);
}

.kofa-text-field.kofa-is-successful .kofa-text-field__description,
.kofa-text-field.kofa-is-successful .kofa-text-field__counter {
  color: var(--kofa-color-text-success);
}

.kofa-text-field--textarea.kofa-is-successful .kofa-text-field__description,
.kofa-text-field--textarea.kofa-is-successful .kofa-text-field__counter {
  color: var(--kofa-color-text-information);
}

.kofa-text-field.kofa-is-disabled {
  opacity: 0.4;
}

.kofa-text-field.kofa-is-disabled .kofa-text-field__control {
  cursor: not-allowed;
}

.kofa-text-field.kofa-is-readonly .kofa-text-field__control {
  border-color: transparent;
  background: var(--kofa-color-surface-gray-subtle);
}

.kofa-text-field--small.kofa-is-readonly .kofa-text-field__control,
.kofa-text-field.kofa-is-readonly.kofa-is-filled .kofa-text-field__control {
  border-color: var(--kofa-color-border-default);
}

.kofa-text-field--textarea {
  gap: 2px;
}

textarea.kofa-text-field__control {
  min-height: 100px;
  height: auto;
  padding-top: 14px;
  padding-bottom: 14px;
  font-family: inherit;
  line-height: var(--kofa-line-height-base);
  resize: vertical;
}

.kofa-text-field--small textarea.kofa-text-field__control {
  min-height: 90px;
}


/* ===== /text-field ===== */



/* ===== select ===== */
/*
 * Figma에 trigger hover·pressed가 없어 selected border(#262831)를 쓰고 focus는 공용 규격을 따른다.
 * small 메뉴 154px: Figma 수치가 없어 44px option 기준 마지막 항목이 절반 보이게 했다. large 194px는 Figma 값.
 * inline 메뉴 최소 폭 120px: Figma에 없어 옵션을 읽을 수 있는 폭으로 정했다.
 */
.kofa-select {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 343px;
  flex-direction: column;
  gap: 8px;
}

.kofa-select--navigation { max-width: none; }

.kofa-select--inline {
  display: inline-block;
  width: auto;
  max-width: none;
}

.kofa-select__label {
  width: 100%;
  color: var(--kofa-color-text-01);
  font-size: var(--kofa-typo-body-3-size);
  font-weight: var(--kofa-font-weight-regular);
  letter-spacing: var(--kofa-letter-spacing-base);
  line-height: var(--kofa-line-height-base);
}

.kofa-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kofa-select__details {
  position: relative;
}

.kofa-select__details summary {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 56px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--kofa-color-border-default);
  border-radius: var(--kofa-radius-16);
  background: var(--kofa-color-surface-white);
  color: var(--kofa-color-text-01);
  cursor: pointer;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-regular);
  letter-spacing: var(--kofa-letter-spacing-base);
  line-height: var(--kofa-line-height-base);
  list-style: none;
}

.kofa-select__details summary::-webkit-details-marker {
  display: none;
}

.kofa-select__details summary:hover,
.kofa-select__details summary:active,
.kofa-select.kofa-is-hovered .kofa-select__details summary,
.kofa-select.kofa-is-pressed .kofa-select__details summary,
.kofa-select.kofa-is-selected .kofa-select__details summary {
  border-color: var(--kofa-color-border-primary);
}

.kofa-select__details summary:focus-visible,
.kofa-select.kofa-is-focused .kofa-select__details summary {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-select--small .kofa-select__details summary {
  height: 48px;
  padding: 10px 16px;
  border-radius: var(--kofa-radius-12);
  font-size: var(--kofa-typo-body-3-size);
}

/* 소장자료 목록의 라벨 포함 필터(4028:181510). 정렬 값·목록은 기존 select 계약을 쓴다. */
@media (max-width: 599px) {
  .kofa-select--filter .kofa-select__details summary { width: max-content; max-width: 100%; height: auto; min-height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--kofa-color-text-01); font-size: var(--kofa-typo-body-4-size); font-weight: var(--kofa-font-weight-semibold); }
}
@media (max-width: 599px) {
  .kofa-select--filter .kofa-select__details summary:focus-visible { outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring); outline-offset: var(--kofa-outline-focus-offset); }
}

/* 좁은 폭 현재 메뉴 선택기(3687:96280): 48px, 선 1px, 글자·아이콘 간격 12 */
.kofa-select--navigation .kofa-select__details summary {
  height: 48px;
  gap: 12px;
  padding: 12px 16px;
  border-color: var(--kofa-color-border-primary);
  border-radius: var(--kofa-radius-8);
  font-weight: var(--kofa-font-weight-semibold);
}

.kofa-select--inline .kofa-select__details summary {
  width: auto;
  height: auto;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--kofa-color-text-02);
}

.kofa-select--inline-large .kofa-select__details summary {
  font-size: var(--kofa-typo-body-4-size);
}

.kofa-select--inline-medium .kofa-select__details summary {
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-select--inline-small .kofa-select__details summary {
  font-size: var(--kofa-typo-body-2-size);
}

.kofa-select.kofa-is-empty .kofa-select__value {
  color: var(--kofa-color-text-03);
}

.kofa-select.kofa-is-filled .kofa-select__value,
.kofa-select.kofa-is-selected .kofa-select__value,
.kofa-select.kofa-is-error .kofa-select__value {
  color: var(--kofa-color-text-01);
}

.kofa-select.kofa-is-readonly .kofa-select__details summary {
  border-color: transparent;
  background: var(--kofa-color-surface-gray-subtle);
  cursor: default;
}

.kofa-select--small.kofa-is-readonly .kofa-select__details summary,
.kofa-select.kofa-is-readonly.kofa-is-filled .kofa-select__details summary {
  border-color: var(--kofa-color-border-default);
}

.kofa-select.kofa-is-disabled {
  opacity: 0.4;
}

.kofa-select.kofa-is-disabled .kofa-select__details summary {
  cursor: not-allowed;
}

.kofa-select.kofa-is-error .kofa-select__details summary {
  border-color: var(--kofa-color-border-danger);
}

.kofa-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .kofa-select--filter .kofa-select__value { display: none; }
}

.kofa-select__filter { display: none; }
@media (max-width: 599px) {
  .kofa-select--filter .kofa-select__filter { display: inline-flex; align-items: center; gap: 8px; min-width: 60px; white-space: nowrap; }
}
.kofa-select__filter img { display: block; width: 24px; height: 24px; flex: 0 0 24px; }

.kofa-select__icon {
  width: var(--kofa-icon-size-24);
  height: var(--kofa-icon-size-24);
  flex: 0 0 var(--kofa-icon-size-24);
  background: var(--kofa-color-icon-default);
  mask: url("/icons/chevron/chevron-down.svg") center/100% 100% no-repeat;
}
@media (max-width: 599px) {
  .kofa-select--filter .kofa-select__icon { display: none; }
}

.kofa-select--small .kofa-select__icon {
  width: var(--kofa-icon-size-20);
  height: var(--kofa-icon-size-20);
  flex-basis: var(--kofa-icon-size-20);
}

.kofa-select--navigation .kofa-select__icon { width: 18px; height: 18px; flex-basis: 18px; }

.kofa-select--inline .kofa-select__icon {
  width: var(--kofa-icon-size-12);
  height: var(--kofa-icon-size-12);
  flex-basis: var(--kofa-icon-size-12);
}

.kofa-select__menu {
  box-sizing: border-box;
  position: absolute;
  z-index: 20;
  /* 펼침 시안(영상도서관 검색 2370:13002): 메뉴가 버튼 바로 아래 붙고 그림자 0 2px 16px 8%. 펼친 버튼 테두리는 기본색 그대로. */
  top: 100%;
  left: 0;
  display: flex;
  width: 100%;
  max-height: 194px;
  flex-direction: column;
  overflow-y: auto;
  border: 1px solid var(--kofa-color-border-default);
  border-radius: var(--kofa-radius-12);
  background: var(--kofa-color-surface-white);
  box-shadow: 0 2px 16px rgb(0 0 0 / 8%);
  scrollbar-width: none;
}

.kofa-select__menu::-webkit-scrollbar {
  display: none;
}

.kofa-select--small .kofa-select__menu {
  max-height: 154px;
}
@media (max-width: 599px) {
  .kofa-select--filter .kofa-select__menu { right: 0; left: auto; width: max-content; min-width: 120px; max-width: 343px; }
}

.kofa-select--inline .kofa-select__menu {
  right: 0;
  left: auto;
  min-width: 120px;
}

.kofa-select__option {
  box-sizing: border-box;
  position: relative;
  display: flex;
  width: 100%;
  height: 56px;
  min-height: 56px;
  align-items: center;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--kofa-color-text-02);
  cursor: pointer;
  font: inherit;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-regular);
  letter-spacing: var(--kofa-letter-spacing-base);
  line-height: var(--kofa-line-height-base);
  text-align: left;
}
/* 첫·마지막 옵션의 포커스선이 메뉴의 둥근 모서리에 잘리지 않게 맞춘다. */
.kofa-select__option:first-child { border-start-start-radius: calc(var(--kofa-radius-12) - 1px); border-start-end-radius: calc(var(--kofa-radius-12) - 1px); }
.kofa-select__option:last-child { border-end-start-radius: calc(var(--kofa-radius-12) - 1px); border-end-end-radius: calc(var(--kofa-radius-12) - 1px); }
.kofa-select--navigation .kofa-select__option { text-decoration: none; }
@media (max-width: 1279px) {
  .kofa-select--navigation .kofa-select__option { height: auto; flex-shrink: 0; overflow-wrap: anywhere; }
}

.kofa-select__option:hover,
.kofa-select__option:active,
.kofa-select__option.kofa-is-hovered,
.kofa-select__option.kofa-is-pressed {
  background: var(--kofa-color-background-gray-subtler);
}

.kofa-select__option:focus-visible,
.kofa-select__option.kofa-is-focused {
  background: var(--kofa-color-background-gray-subtler);
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-select__option[aria-selected="true"],
.kofa-select__option.kofa-is-selected {
  font-weight: var(--kofa-font-weight-semibold);
}

/* 빈 값(기본 정렬 등)이 선택된 상태는 미선택으로 본다. 시안 2370:13002는 이때 모든 옵션을 Default 400으로 그린다. */
.kofa-select.kofa-is-empty .kofa-select__option[aria-selected="true"] {
  font-weight: var(--kofa-font-weight-regular);
}

.kofa-select__option.kofa-is-hovered.kofa-is-selected {
  background: var(--kofa-color-background-gray-subtler);
}

.kofa-select--small .kofa-select__option {
  height: 44px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-select__message {
  margin: 4px 0 0;
  color: var(--kofa-color-text-danger);
  font-size: var(--kofa-typo-body-2-size);
  line-height: var(--kofa-line-height-base);
}


/* ===== /select ===== */



/* ===== checkbox ===== */
.kofa-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kofa-color-text-01);
  font-size: var(--kofa-typo-body-4-size);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  cursor: pointer;
}

.kofa-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kofa-checkbox__control {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--kofa-icon-size-24);
  height: var(--kofa-icon-size-24);
  border: 0;
  border-radius: var(--kofa-radius-1000);
  background: transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.kofa-checkbox__control::after {
  position: absolute;
  inset: 0;
  background: var(--kofa-color-icon-gray);
  content: "";
  mask: url("/icons/action/check.svg") center/100% 100% no-repeat;
}

.kofa-checkbox--round .kofa-checkbox__control {
  border: 1px solid var(--kofa-color-border-inactive);
  background: var(--kofa-color-surface-white);
}

.kofa-checkbox--round .kofa-checkbox__input:checked + .kofa-checkbox__control {
  border-color: var(--kofa-color-border-primary);
  background: var(--kofa-color-surface-primary);
}

.kofa-checkbox--round .kofa-checkbox__input:checked + .kofa-checkbox__control::after {
  background: var(--kofa-color-icon-white);
}

.kofa-checkbox__input:indeterminate + .kofa-checkbox__control {
  border-color: var(--kofa-color-border-primary);
  background: var(--kofa-color-surface-primary);
}

.kofa-checkbox__input:indeterminate + .kofa-checkbox__control::after {
  inset: 50% auto auto 50%;
  width: 10px;
  height: 2px;
  background: var(--kofa-color-icon-white);
  mask: none;
  transform: translate(-50%, -50%);
}

.kofa-checkbox:hover .kofa-checkbox__control,
.kofa-checkbox.kofa-is-hovered .kofa-checkbox__control,
.kofa-checkbox.kofa-is-pressed .kofa-checkbox__control {
  border-color: var(--kofa-color-border-primary);
}

.kofa-checkbox__input:focus-visible + .kofa-checkbox__control,
.kofa-checkbox.kofa-is-focused .kofa-checkbox__control {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-checkbox--round .kofa-checkbox__input:disabled + .kofa-checkbox__control {
  border-color: transparent;
  background: var(--kofa-color-surface-disabled);
}

.kofa-checkbox--round .kofa-checkbox__input:disabled + .kofa-checkbox__control::after {
  background: var(--kofa-color-icon-white);
}

.kofa-checkbox--check-mark .kofa-checkbox__input:checked + .kofa-checkbox__control::after {
  background: var(--kofa-color-icon-primary);
}

.kofa-checkbox--check-mark .kofa-checkbox__input:disabled + .kofa-checkbox__control::after {
  background: var(--kofa-color-icon-disabled);
}

.kofa-checkbox__input:disabled ~ .kofa-checkbox__label {
  color: var(--kofa-color-text-04);
  cursor: not-allowed;
}

.kofa-checkbox__label {
  color: inherit;
}

.kofa-checkbox--small {
  gap: 4px;
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-checkbox--small .kofa-checkbox__control {
  width: var(--kofa-icon-size-20);
  height: var(--kofa-icon-size-20);
}

.kofa-checkbox--small.kofa-checkbox--round .kofa-checkbox__control {
  border-width: 0.833px;
}

.kofa-checkbox--large {
  font-size: var(--kofa-typo-body-4-size);
}

.kofa-checkbox--check-mark .kofa-checkbox__control {
  border-radius: 0;
}

.kofa-checkbox--regular {
  font-weight: var(--kofa-font-weight-regular);
}

.kofa-checkbox--semibold {
  font-weight: var(--kofa-font-weight-semibold);
}

.kofa-checkbox.kofa-is-error {
  color: var(--kofa-color-text-danger);
}

.kofa-checkbox.kofa-is-error .kofa-checkbox__control {
  border-color: var(--kofa-color-border-danger);
}

.kofa-checkbox--check-mark.kofa-is-error .kofa-checkbox__control::after {
  background: var(--kofa-color-icon-error);
}


/* ===== /checkbox ===== */



/* ===== chip ===== */
/* 칩과 뱃지 — kofa-chip, kofa-badge */

.kofa-chip {
  --kofa-chip-icon-size: var(--kofa-icon-size-12);
  --kofa-chip-border-color: transparent;

  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Figma INSIDE stroke는 padding과 글자 영역을 차지하지 않는다. */
  border: 0;
  box-shadow: inset 0 0 0 1px var(--kofa-chip-border-color);
  color: var(--kofa-color-text-02);
  font-family: inherit;
  font-weight: var(--kofa-font-weight-regular);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.kofa-chip:hover,
.kofa-chip.kofa-is-hovered {
  --kofa-chip-border-color: var(--kofa-color-border-primary);
}

.kofa-chip:active,
.kofa-chip.kofa-is-pressed {
  font-weight: var(--kofa-font-weight-semibold);
}

.kofa-chip:focus-visible,
.kofa-chip.kofa-is-focused {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-chip[aria-pressed="true"],
.kofa-chip.kofa-is-selected {
  font-weight: var(--kofa-font-weight-semibold);
}

.kofa-chip:disabled,
.kofa-chip[aria-disabled="true"],
.kofa-chip.kofa-is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.kofa-chip[aria-invalid="true"],
.kofa-chip.kofa-is-error {
  --kofa-chip-border-color: var(--kofa-color-border-danger);

  color: var(--kofa-color-text-danger);
  background: var(--kofa-color-surface-danger-subtle);
}

.kofa-chip--small {
  --kofa-chip-icon-size: var(--kofa-icon-size-12);

  height: 26px;
  padding: 4px 8px;
  font-size: var(--kofa-typo-body-2-size);
}

.kofa-chip--medium {
  --kofa-chip-icon-size: var(--kofa-icon-size-16);

  height: 37px;
  padding: 8px 10px;
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-chip--large {
  --kofa-chip-icon-size: var(--kofa-icon-size-20);

  height: 44px;
  padding: 10px 16px;
  font-size: var(--kofa-typo-body-4-size);
}

.kofa-chip--circle {
  border-radius: var(--kofa-radius-1000);
}

.kofa-chip--square {
  border-radius: var(--kofa-radius-10);
}

.kofa-chip--small.kofa-chip--square {
  border-radius: var(--kofa-radius-8);
}

.kofa-chip--line {
  --kofa-chip-border-color: var(--kofa-color-border-default);

  background: var(--kofa-color-surface-white);
}

.kofa-chip--fill {
  background: var(--kofa-color-surface-gray-subtle);
}

.kofa-chip--line:active,
.kofa-chip--line.kofa-is-pressed,
.kofa-chip--line[aria-pressed="true"],
.kofa-chip--line.kofa-is-selected {
  --kofa-chip-border-color: var(--kofa-color-border-primary);

  color: var(--kofa-color-text-primary);
  background: var(--kofa-color-surface-white);
}

.kofa-chip--fill:active,
.kofa-chip--fill.kofa-is-pressed,
.kofa-chip--fill[aria-pressed="true"],
.kofa-chip--fill.kofa-is-selected {
  --kofa-chip-border-color: var(--kofa-color-surface-primary);

  color: var(--kofa-color-text-white);
  background: var(--kofa-color-surface-primary);
}

/* 선택된 fill 칩의 어두운 배경에서 삭제 아이콘 대비 */
.kofa-chip--fill:active .kofa-chip__remove,
.kofa-chip--fill.kofa-is-pressed .kofa-chip__remove,
.kofa-chip--fill[aria-pressed="true"] .kofa-chip__remove,
.kofa-chip--fill.kofa-is-selected .kofa-chip__remove {
  filter: brightness(0) invert(1);
}

.kofa-chip__icon {
  display: block;
  width: var(--kofa-chip-icon-size);
  height: var(--kofa-chip-icon-size);
  flex: 0 0 var(--kofa-chip-icon-size);
  object-fit: none;
}

.kofa-chip__count {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border-radius: var(--kofa-radius-1000);
  color: var(--kofa-color-text-02);
  /* Figma chip(line) 숫자 배지 2356:140946 = surface/disabled #ededed */
  background: var(--kofa-color-surface-disabled);
  font-size: var(--kofa-typo-body-1-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
}

.kofa-chip--medium .kofa-chip__count {
  min-width: 18px;
  height: 18px;
  font-size: var(--kofa-typo-body-2-size);
}

.kofa-chip--large .kofa-chip__count {
  min-width: 21px;
  height: 21px;
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-chip--fill .kofa-chip__count {
  box-shadow: inset 0 0 0 1px var(--kofa-color-border-default);
  background: var(--kofa-color-background-white);
}

.kofa-chip--line[aria-pressed="true"] .kofa-chip__count,
.kofa-chip--line.kofa-is-selected .kofa-chip__count {
  color: var(--kofa-color-text-white);
  background: var(--kofa-color-background-inverse);
}

.kofa-chip__remove {
  width: var(--kofa-chip-icon-size);
  height: var(--kofa-chip-icon-size);
  flex: 0 0 var(--kofa-chip-icon-size);
  padding: 0;
  border: 0;
  border-radius: var(--kofa-radius-full);
  background: transparent url("/icons/action/chip-close.svg") center/45% no-repeat;
  cursor: pointer;
}

.kofa-chip__remove:focus-visible {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

/* 공개 변수 --kofa-chip-list-gap: 페이지 자기 선택자에서 간격을 지정한다. 기본 6은 시네마테크 섹션 필터(3687:74584). */
.kofa-chip-list {
  display: flex;
  align-items: center;
  gap: var(--kofa-chip-list-gap, 6px);
}

.kofa-chip-list--scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.kofa-chip-list--wrap {
  flex-wrap: wrap;
}

.kofa-chip-list--choices {
  gap: 6px;
}

.kofa-badge {
  --kofa-badge-color: var(--kofa-color-gray-900);
  --kofa-badge-light-color: var(--kofa-color-gray-50);

  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: var(--kofa-radius-6);
  font-family: inherit;
  font-weight: var(--kofa-font-weight-regular);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  text-align: center;
  white-space: nowrap;
}

.kofa-badge--square {
  border-radius: var(--kofa-radius-6);
}

.kofa-badge--round {
  width: 50px;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--kofa-color-badge-notice);
  border-radius: var(--kofa-radius-43);
  color: var(--kofa-color-badge-notice);
  background: var(--kofa-color-surface-white);
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-semibold);
}

.kofa-badge--small {
  height: 22px;
  padding: 2px 6px;
  font-size: var(--kofa-typo-body-2-size);
}

.kofa-badge--large {
  height: 29px;
  padding: 4px 10px;
  font-size: var(--kofa-typo-body-3-size);
}

/* Figma stroke는 inside라 크기에 들어가지 않는다. 테두리 대신 inset 그림자로 그린다. */
.kofa-badge--outline {
  box-shadow: inset 0 0 0 1px var(--kofa-badge-color);
  color: var(--kofa-badge-color);
  background: var(--kofa-color-surface-white);
}

.kofa-badge--solid-pastel {
  border: 0;
  color: var(--kofa-badge-color);
  background: var(--kofa-badge-light-color);
}

.kofa-badge--solid {
  border: 0;
  color: var(--kofa-color-text-white);
  background: var(--kofa-badge-color);
}

.kofa-badge--primary {
  --kofa-badge-color: var(--kofa-color-gray-900);
  --kofa-badge-light-color: var(--kofa-color-gray-50);
}

.kofa-badge--secondary {
  --kofa-badge-color: var(--kofa-color-amber-500);
  --kofa-badge-light-color: var(--kofa-color-red-50);
}

.kofa-badge--danger {
  --kofa-badge-color: var(--kofa-color-error-500);
  --kofa-badge-light-color: var(--kofa-color-error-50);
}

.kofa-badge--success {
  --kofa-badge-color: var(--kofa-color-success-600);
  --kofa-badge-light-color: var(--kofa-color-success-50);
}

.kofa-badge--information {
  --kofa-badge-color: var(--kofa-color-information-700);
  --kofa-badge-light-color: var(--kofa-color-information-50);
}

.kofa-badge--gray {
  --kofa-badge-color: var(--kofa-color-gray-600);
  --kofa-badge-light-color: var(--kofa-color-gray-50);
}

/* 어두운 배경 위 흰색 배지. 라이브러리 color 변형에는 없고 시안 인스턴스가 흰색으로 덮어 쓴다(박물관 기획전시). */
.kofa-badge--inverse {
  --kofa-badge-color: var(--kofa-color-white);
}

.kofa-badge--outline.kofa-badge--inverse {
  background: transparent;
}

.kofa-count-badge {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: var(--kofa-radius-1000);
  color: var(--kofa-color-text-white);
  background: var(--kofa-color-badge-count);
  font-size: var(--kofa-typo-body-1-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

.kofa-dot-badge {
  display: inline-block;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border: 1px solid var(--kofa-color-icon-white);
  border-radius: var(--kofa-radius-1000);
  background: var(--kofa-color-badge-count);
}

/* ===== /chip ===== */



/* ===== breadcrumb ===== */
/* 경로와 페이지 헤더 — kofa-breadcrumb, kofa-page-header */
/*
 * Figma 밖 유지: focus outline 2px, 가로 스크롤과 fade(긴 경로 대응).
 * 1280px보다 좁으면 320px 좌우 margin 대신 viewport를 채운다.
 */
.kofa-breadcrumb {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--kofa-color-neutral-black-0) var(--kofa-color-neutral-black-0);
  color: var(--kofa-color-text-01);
  font-size: var(--kofa-typo-body-3-size);
  font-weight: var(--kofa-font-weight-regular);
  letter-spacing: var(--kofa-letter-spacing-base);
  line-height: var(--kofa-line-height-base);
}

.kofa-breadcrumb::-webkit-scrollbar {
  height: 4px;
  border-radius: var(--kofa-radius-full);
  background: var(--kofa-color-neutral-black-0);
}

.kofa-breadcrumb::-webkit-scrollbar-track {
  border-radius: var(--kofa-radius-full);
  background: var(--kofa-color-neutral-black-0);
}

.kofa-breadcrumb::-webkit-scrollbar-thumb {
  border-radius: var(--kofa-radius-full);
  background: var(--kofa-color-neutral-black-0);
}

.kofa-breadcrumb[data-scrolling] {
  scrollbar-color: var(--kofa-color-neutral-black-40) var(--kofa-color-neutral-black-0);
}

.kofa-breadcrumb[data-scrolling]::-webkit-scrollbar-thumb {
  background: var(--kofa-color-neutral-black-40);
}

.kofa-breadcrumb[data-scroll-fading] {
  scrollbar-color: var(--kofa-color-neutral-black-0) var(--kofa-color-neutral-black-0);
}

.kofa-breadcrumb[data-scroll-fading]::-webkit-scrollbar-thumb {
  background: var(--kofa-color-neutral-black-0);
}

.kofa-breadcrumb > * {
  flex: 0 0 auto;
}

.kofa-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding-inline: 4px;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  white-space: nowrap;
}

.kofa-breadcrumb__item--home {
  gap: 5px;
}

.kofa-breadcrumb__item:focus-visible,
.kofa-breadcrumb__item.kofa-is-focused {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-breadcrumb__item[aria-disabled="true"] {
  pointer-events: none;
}

.kofa-breadcrumb__icon {
  position: relative;
  width: var(--kofa-icon-size-16);
  height: var(--kofa-icon-size-16);
  flex: 0 0 var(--kofa-icon-size-16);
}

.kofa-breadcrumb__icon-image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
}

.kofa-breadcrumb__icon-image--home {
  width: 14.3351px;
  height: 13.6664px;
}

.kofa-breadcrumb__separator {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: var(--kofa-icon-size-16);
  padding-inline: 4px;
}

.kofa-breadcrumb__icon-image--separator {
  width: 6.33334px;
  height: 10.3333px;
  transform: translate(-50%, -50%) scaleX(-1);
}

.kofa-page-header {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  padding: 40px calc((100% - var(--kofa-layout-safe-width)) / 2) 30px;
  background: var(--kofa-color-surface-white);
}
@media (max-width: 1279px) {
  .kofa-page-header { padding: 32px var(--kofa-layout-safe-gutter) 24px; }
}

.kofa-page-header--stacked {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (max-width: 1279px) {
  .kofa-page-header--stacked { gap: 24px; padding-top: 24px; }
}

@media (max-width: 599px) {
  .kofa-page-header--stacked { padding-top: 16px; }
}

/*
 * 서브 레이아웃 콘텐츠 열 상단(kofa-sub-layout__content 안). breadcrumb → 페이지 제목.
 * Figma 3436:55270 · 3687:73383 · 3687:73779 외 대메뉴 PC 프레임 공통.
 * 다음 구역까지 간격은 --kofa-sub-layout-header-gap(기본 32, mobile 24). 페이지가 자기 선택자에서 정할 수 있다.
 */
.kofa-page-header--content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: auto;
  margin: 0 0 var(--kofa-sub-layout-header-gap, 32px);
  padding: 0;
  background: transparent;
}
@media (max-width: 1279px) {
  .kofa-page-header--content { gap: 24px; }
}
@media (max-width: 599px) {
  .kofa-page-header--content { margin-bottom: var(--kofa-sub-layout-header-gap, 24px); }
}

.kofa-page-header__introduction {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.kofa-page-header__title {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--kofa-color-text-01);
  font-size: var(--kofa-typo-headline-6-size);
  font-weight: var(--kofa-font-weight-bold);
  letter-spacing: var(--kofa-letter-spacing-base);
  line-height: var(--kofa-line-height-base);
}
@media (max-width: 1279px) {
  .kofa-page-header__title { font-size: var(--kofa-typo-headline-6-size-mobile); }
}

.kofa-page-header--content .kofa-page-header__title {
  font-size: var(--kofa-typo-headline-5-size);
}
@media (max-width: 1279px) {
  .kofa-page-header--content .kofa-page-header__title { font-size: var(--kofa-typo-headline-4-size); }
}



/* ===== /breadcrumb ===== */



/* ===== side-nav ===== */
/* 좌측 내비게이션 — kofa-side-nav */

/* Figma 3436:54353 공통 기준. 페이지별 grouped·flush 간격 변형은 사용하지 않는다. */
.kofa-side-nav {
  display: flex;
  width: 236px;
  align-self: start;
  flex-direction: column;
  gap: 24px;
  color: var(--kofa-color-text-01);
}

@media (max-width: 1279px) {
  .kofa-side-nav {
    display: none;
  }
}

.kofa-side-nav__title {
  margin: 0;
  font-size: var(--kofa-typo-headline-5-size);
  font-weight: var(--kofa-font-weight-bold);
  letter-spacing: var(--kofa-letter-spacing-base);
  line-height: var(--kofa-line-height-base);
}

.kofa-side-nav__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kofa-side-nav__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kofa-side-nav__link {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--kofa-radius-8);
  background: var(--kofa-color-surface-gray-subtle);
  color: var(--kofa-color-text-01);
  font: inherit;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-semibold);
  letter-spacing: var(--kofa-letter-spacing-base);
  line-height: var(--kofa-line-height-base);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.kofa-side-nav__link:hover,
.kofa-side-nav__link.kofa-is-hovered {
  background: var(--kofa-color-background-gray-subtle);
}

.kofa-side-nav__link:focus-visible,
.kofa-side-nav__link.kofa-is-focused {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-side-nav__link[aria-disabled="true"] {
  background: var(--kofa-color-surface-disabled);
  color: var(--kofa-color-text-04);
  cursor: not-allowed;
  pointer-events: none;
}

.kofa-side-nav__link.kofa-is-error {
  background: var(--kofa-color-surface-danger-subtle);
  color: var(--kofa-color-text-danger);
}

.kofa-side-nav__label {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.kofa-side-nav__chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentcolor;
  mask: url("/icons/chevron/chevron-down.svg") center / 18px 18px no-repeat;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

/* 펼친 제목은 chevron up. 페이지 시안이 아래여도 공용 기준을 따른다(사용자 확정). */
.kofa-side-nav__link[aria-expanded="true"] .kofa-side-nav__chevron {
  transform: rotate(180deg);
}

.kofa-side-nav__sublist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kofa-side-nav__sublist[hidden] {
  display: none;
}

.kofa-side-nav__sublink {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 12px 16px 12px 24px;
  border-radius: var(--kofa-radius-8);
  color: var(--kofa-color-text-01);
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-regular);
  letter-spacing: var(--kofa-letter-spacing-base);
  line-height: var(--kofa-line-height-base);
  text-decoration: none;
}

.kofa-side-nav__sublink:hover,
.kofa-side-nav__sublink.kofa-is-hovered {
  background: var(--kofa-color-background-gray-subtler);
}

.kofa-side-nav__sublink:focus-visible,
.kofa-side-nav__sublink.kofa-is-focused {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-side-nav__sublink[aria-current="page"] {
  font-weight: var(--kofa-font-weight-semibold);
}

.kofa-side-nav__sublink[aria-disabled="true"] {
  color: var(--kofa-color-text-04);
  cursor: not-allowed;
  pointer-events: none;
}

.kofa-side-nav__sublink.kofa-is-error {
  color: var(--kofa-color-text-danger);
}

.kofa-current-menu { display: none; }
@media (max-width: 1279px) {
  .kofa-current-menu { display: block; box-sizing: border-box; width: 100%; min-width: 0; padding-block: 0; }
}

/* ===== /side-nav ===== */



/* ===== sub-layout ===== */
/* 서브 레이아웃 — kofa-sub-layout */
/*
 * LNB가 있는 하위 페이지 골격. desktop: 좌 LNB(대메뉴 제목+메뉴) 236 + 간격 64 + 우 콘텐츠 열.
 * 콘텐츠 열은 kofa-page-header--content(breadcrumb → 제목) → __menu(좁은 폭 현재 메뉴) → 본문 순서다.
 * 1279 이하는 단일 열, LNB 숨김, __menu에 side-nav.js가 현재 메뉴 선택기를 넣는다(data-side-nav-target).
 * Figma 3436:55270(PC 위100·아래80) · 3687:73383(Tablet 위72·아래64) · 3687:73779(Mobile 위48·아래64).
 */
.kofa-sub-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
  box-sizing: border-box;
  width: var(--kofa-layout-safe-width);
  margin-inline: auto;
  padding-block: 100px 80px;
}
@media (max-width: 1279px) {
  .kofa-sub-layout { grid-template-columns: minmax(0, 1fr); padding-block: 72px 64px; }
}
/* mobile 위아래 48(영상도서관 3687:96583, 박물관 3652:16995, 소장자료 3802:95090) */
@media (max-width: 599px) {
  .kofa-sub-layout { padding-block: 48px; }
}

.kofa-sub-layout__content {
  min-width: 0;
}

.kofa-sub-layout__menu {
  display: none;
}
@media (max-width: 1279px) {
  .kofa-sub-layout__menu { display: block; margin-bottom: var(--kofa-sub-layout-header-gap, 32px); }
}
@media (max-width: 599px) {
  .kofa-sub-layout__menu { margin-bottom: var(--kofa-sub-layout-header-gap, 24px); }
}

/* ===== /sub-layout ===== */



/* ===== tab ===== */
/* 탭 — kofa-tab */
/*
 * underline·large·boxed·error·segment·item--flex는 Figma 근거가 없어 없앴다.
 * kofa-tab__item--full은 공용 fragment 호환용이며 기본 항목과 규격이 같다.
 */

.kofa-tab {
  width: 100%;
  max-width: 100%;
}

.kofa-tab__list {
  /* 탭 테두리가 열 너비를 바꾸지 않도록 flex 대신 같은 너비 grid 열을 쓴다. */
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (max-width: 599px) {
  .kofa-tab__list { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
}

.kofa-tab__item {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  /* Figma tab3 = 본문 52.5(stroke 1.5 + 12 + 27 + 12) + 간격 1 + 하단선. 아래 padding 13px로 글자 위치를 맞춘다. */
  height: 53.5px;
  padding: 12px 28px 13px;
  border-top: 1.5px solid var(--kofa-color-border-inactive);
  border-right: 0;
  border-bottom: 0;
  border-left: 1.5px solid var(--kofa-color-border-inactive);
  border-radius: var(--kofa-radius-12) var(--kofa-radius-12) 0 0;
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-white);
  font: inherit;
  font-size: var(--kofa-typo-body-5-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 599px) {
  .kofa-tab__item { min-width: 0; height: auto; min-height: 52px; padding: 16px 4px 12px; border: 0; border-radius: 0; color: var(--kofa-color-text-03); font-size: var(--kofa-typo-body-4-size); font-weight: var(--kofa-font-weight-regular); white-space: normal; overflow-wrap: anywhere; }
}

/* 아래 검은 선. 세로 테두리 자리까지 덮어야 탭 경계에서 끊기지 않는다.
   Figma tab3 하단선은 4px CENTER stroke가 프레임에 잘려 2px만 보인다(2981:309774, 2630:31925). */
.kofa-tab__item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: -1.5px;
  height: 2px;
  background: var(--kofa-color-border-primary);
  content: "";
}

@media (max-width: 599px) {
  .kofa-tab__item::after { left: 0; height: 1px; background: var(--kofa-color-border-default); }
}

.kofa-tab__item:last-child {
  border-right: 1.5px solid var(--kofa-color-border-inactive);
}

@media (max-width: 599px) {
  .kofa-tab__item:last-child { border-right: 0; }
}

/* 첫 탭은 왼쪽으로 넘기지 않는다. 넘기면 목록이 가로로 넘쳐 스크롤바가 생긴다. */
.kofa-tab__item:first-of-type::after {
  left: 0;
}

.kofa-tab__item:hover:not([aria-disabled="true"]):not(:disabled):not([aria-selected="true"]):not([aria-current="page"]),
.kofa-tab__item.kofa-is-hovered:not([aria-disabled="true"]):not(:disabled):not([aria-selected="true"]):not([aria-current="page"]) {
  background: var(--kofa-color-background-gray-subtler);
}

.kofa-tab__item:active:not([aria-disabled="true"]):not(:disabled):not([aria-selected="true"]):not([aria-current="page"]),
.kofa-tab__item.kofa-is-pressed:not([aria-disabled="true"]):not(:disabled):not([aria-selected="true"]):not([aria-current="page"]) {
  background: var(--kofa-color-background-gray-subtle);
}

.kofa-tab__list .kofa-tab__item:focus-visible,
.kofa-tab__list .kofa-tab__item.kofa-is-focused {
  z-index: 2;
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-tab__list .kofa-tab__item:focus-visible::after,
.kofa-tab__list .kofa-tab__item.kofa-is-focused::after {
  display: block;
  left: 0;
  height: var(--kofa-outline-focus-width);
  background: var(--kofa-color-focus-ring);
}

/* 경로 이동형 탭은 링크 항목에 aria-current="page"를 둔다. 선택 표현은 aria-selected와 같다. */
.kofa-tab__item[aria-selected="true"],
.kofa-tab__item[aria-current="page"] {
  z-index: 1;
  border-top-color: var(--kofa-color-border-primary);
  border-right: 1.5px solid var(--kofa-color-border-primary);
  border-left-color: var(--kofa-color-border-primary);
}

@media (max-width: 599px) {
  .kofa-tab__item[aria-selected="true"],
  .kofa-tab__item[aria-current="page"] { border: 0; color: var(--kofa-color-text-01); font-weight: var(--kofa-font-weight-semibold); }
}

.kofa-tab__item[aria-selected="true"]::after,
.kofa-tab__item[aria-current="page"]::after {
  display: none;
}

@media (max-width: 599px) {
  .kofa-tab__item[aria-selected="true"]::after,
  .kofa-tab__item[aria-current="page"]::after { display: block; height: 2px; background: var(--kofa-color-border-primary); }
}

.kofa-tab__item[aria-selected="true"] + .kofa-tab__item,
.kofa-tab__item[aria-current="page"] + .kofa-tab__item {
  border-left: 0;
}

.kofa-tab__item[aria-disabled="true"],
.kofa-tab__item:disabled,
.kofa-tab__item.kofa-is-disabled {
  border-color: var(--kofa-color-border-inactive);
  color: var(--kofa-color-text-04);
  background: var(--kofa-color-surface-disabled);
  cursor: not-allowed;
}

.kofa-tab__item[aria-disabled="true"]::after,
.kofa-tab__item:disabled::after,
.kofa-tab__item.kofa-is-disabled::after {
  background: var(--kofa-color-border-inactive);
}

.kofa-tab__item[aria-invalid="true"],
.kofa-tab__item.kofa-is-error {
  border-color: var(--kofa-color-border-danger);
  color: var(--kofa-color-text-danger);
}

.kofa-tab__item[aria-invalid="true"]::after,
.kofa-tab__item.kofa-is-error::after {
  background: var(--kofa-color-border-danger);
}

.kofa-tab__item--full {
  flex: 1 1 0;
  min-width: 120px;
}

@media (max-width: 599px) {
  .kofa-tab__item--full { min-width: 0; }
}

/* 내용 폭 탭 — 통합 일정 tab3(3363:287059). 기본 균등 폭은 유지한다. */
.kofa-tab--content-width .kofa-tab__list {
  display: flex;
}

.kofa-tab--content-width .kofa-tab__list::after {
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  border-bottom: 2px solid var(--kofa-color-border-primary);
  content: "";
}

.kofa-tab--content-width .kofa-tab__item {
  flex: 0 0 auto;
  min-width: 0;
}

/* 상자형 유지 탭 — 영상도서관 자료 유형(T 3687:96285, M 3687:96597).
   좁은 두 밴드에서 글자 18px·높이 53.5px, mobile에서도 밑줄형으로 바꾸지 않는다. */
@media (max-width: 1279px) {
  .kofa-tab--boxed .kofa-tab__item { min-width: 0; height: 53.5px; padding: 12px 16px 13px; font-size: var(--kofa-typo-body-5-size); }
}

@media (max-width: 599px) {
  .kofa-tab--boxed .kofa-tab__item { min-height: 0; border-top: 1.5px solid var(--kofa-color-border-inactive); border-left: 1.5px solid var(--kofa-color-border-inactive); border-radius: var(--kofa-radius-12) var(--kofa-radius-12) 0 0; color: var(--kofa-color-text-01); font-weight: var(--kofa-font-weight-semibold); white-space: nowrap; }
}

@media (max-width: 599px) {
  .kofa-tab--boxed .kofa-tab__item::after { left: -1.5px; height: 2px; background: var(--kofa-color-border-primary); }
}

@media (max-width: 599px) {
  .kofa-tab--boxed .kofa-tab__item:first-of-type::after { left: 0; }
}

@media (max-width: 599px) {
  .kofa-tab--boxed .kofa-tab__item:last-child { border-right: 1.5px solid var(--kofa-color-border-inactive); }
}

@media (max-width: 599px) {
  .kofa-tab--boxed .kofa-tab__item[aria-selected="true"],
  .kofa-tab--boxed .kofa-tab__item[aria-current="page"] { border-top: 1.5px solid var(--kofa-color-border-primary); border-right: 1.5px solid var(--kofa-color-border-primary); border-left: 1.5px solid var(--kofa-color-border-primary); }
}

@media (max-width: 599px) {
  .kofa-tab--boxed .kofa-tab__item[aria-selected="true"]::after,
  .kofa-tab--boxed .kofa-tab__item[aria-current="page"]::after { display: none; }
}

@media (max-width: 599px) {
  .kofa-tab--boxed .kofa-tab__item[aria-selected="true"] + .kofa-tab__item,
  .kofa-tab--boxed .kofa-tab__item[aria-current="page"] + .kofa-tab__item { border-left: 0; }
}

/* 작은 상자형 탭 — 발간물 mobile(4199:29004). kofa-tab--boxed와 함께 쓴다. */
@media (max-width: 599px) {
  .kofa-tab--boxed-small .kofa-tab__item { height: 50.5px; padding: 12px 16px; font-size: var(--kofa-typo-body-4-size); }
}

@media (max-width: 599px) {
  .kofa-tab--boxed-small .kofa-tab__panel { padding: 20px 16px; }
}

/* 고정 폭 가로 스크롤 탭 — 소장자료 자료 구분(M 3802:95117). 선택 선의 2px CENTER stroke 외부 1px도 수용한다(4028:181494). */
@media (max-width: 599px) {
  .kofa-tab--scroll .kofa-tab__list { grid-auto-columns: max-content; padding-bottom: 1px; overflow-x: auto; scrollbar-width: none; }
}

@media (max-width: 599px) {
  .kofa-tab--scroll .kofa-tab__item { min-width: 100px; white-space: nowrap; overflow-wrap: normal; }
}
@media (max-width: 599px) {
  .kofa-tab--scroll .kofa-tab__item[aria-selected="true"]::after,
  .kofa-tab--scroll .kofa-tab__item[aria-current="page"]::after { bottom: -1px; }
}

@media (max-width: 599px) {
  .kofa-tab--scroll .kofa-tab__meta { display: inline; color: inherit; font-size: inherit; }
}

.kofa-tab__selection {
  display: none;
}

.kofa-tab__meta {
  color: var(--kofa-color-text-03);
  font-size: var(--kofa-typo-body-4-size);
}

@media (max-width: 599px) {
  .kofa-tab__meta { display: none; }
}

.kofa-tab__item[aria-selected="true"] .kofa-tab__meta,
.kofa-tab__item[aria-current="page"] .kofa-tab__meta {
  color: var(--kofa-color-text-01);
}

.kofa-tab__panel {
  padding: 24px;
  border-right: 1.5px solid var(--kofa-color-border-primary);
  border-bottom: 1.5px solid var(--kofa-color-border-primary);
  border-left: 1.5px solid var(--kofa-color-border-primary);
  border-radius: 0 0 var(--kofa-radius-16) var(--kofa-radius-16);
  background: var(--kofa-color-surface-white);
}

.kofa-tab__panel[hidden] {
  display: none;
}

/* ===== /tab ===== */



/* ===== accordion ===== */
/* 아코디언 — kofa-accordion */
/*
 * Figma 펼친 panel frame(592px 고정)은 root보다 넘쳐 고정 폭 없이 부모 폭을 따른다.
 * Figma에 없는 상태 중 focus·disabled만 접근성 식별용으로 둔다. 아이콘은 mask로 토큰 색을 입힌다.
 */

.kofa-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.kofa-accordion__item {
  min-width: 0;
}

.kofa-accordion__heading {
  margin: 0;
}

.kofa-accordion__trigger {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  border: 0;
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-white);
  font: inherit;
  font-size: var(--kofa-typo-headline-1-size);
  font-weight: var(--kofa-font-weight-bold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  text-align: left;
  cursor: pointer;
}

@media (max-width: 599px) {
  .kofa-accordion--stacked-icon-mobile .kofa-accordion__trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 8px;
    padding: 16px;
  }
}

.kofa-accordion--compact .kofa-accordion__trigger {
  min-height: 64px;
  padding: 20px;
  font-size: var(--kofa-typo-headline-1-size);
  font-weight: var(--kofa-font-weight-semibold);
}

.kofa-accordion__trigger:hover,
.kofa-accordion__trigger.kofa-is-hovered,
.kofa-accordion__trigger:active,
.kofa-accordion__trigger.kofa-is-pressed {
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-white);
}

.kofa-accordion__trigger:focus-visible,
.kofa-accordion__trigger.kofa-is-focused {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-accordion__trigger[aria-expanded="true"] {
  color: var(--kofa-color-text-01);
}

.kofa-accordion__trigger:disabled,
.kofa-accordion__trigger[aria-disabled="true"] {
  color: var(--kofa-color-text-04);
  background: var(--kofa-color-surface-white);
  cursor: not-allowed;
}

.kofa-accordion__item:not(:last-child) .kofa-accordion__trigger,
.kofa-accordion__item:last-child .kofa-accordion__trigger[aria-expanded="true"] {
  border-bottom: 1px solid var(--kofa-color-divider-02);
}

.kofa-accordion__label {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 599px) {
  .kofa-accordion--stacked-icon-mobile .kofa-accordion__label {
    grid-column: 1;
    grid-row: 2;
  }
}

.kofa-accordion__leading-icon {
  width: var(--kofa-icon-size-24);
  height: var(--kofa-icon-size-24);
  flex: 0 0 var(--kofa-icon-size-24);
  background-color: var(--kofa-color-icon-default);
  mask: url("/icons/popover/info-stroke.svg") center / 24px 24px no-repeat;
}

@media (max-width: 599px) {
  .kofa-accordion--stacked-icon-mobile .kofa-accordion__leading-icon {
    grid-column: 1;
    grid-row: 1;
    width: 20px;
    height: 20px;
    mask-size: 20px 20px;
  }
}

.kofa-accordion__action {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

@media (max-width: 599px) {
  .kofa-accordion--stacked-icon-mobile .kofa-accordion__action {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

.kofa-accordion__action-label {
  color: var(--kofa-color-text-03);
  font-size: var(--kofa-typo-body-2-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

.kofa-accordion__icon {
  width: var(--kofa-icon-size-24);
  height: var(--kofa-icon-size-24);
  flex: 0 0 var(--kofa-icon-size-24);
  background-color: var(--kofa-color-icon-default);
  mask: url("/icons/chevron/chevron-down.svg") center / 24px 24px no-repeat;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 599px) {
  .kofa-accordion--stacked-icon-mobile .kofa-accordion__icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    mask-size: 20px 20px;
  }
}

.kofa-accordion--compact .kofa-accordion__icon {
  width: var(--kofa-icon-size-16);
  height: var(--kofa-icon-size-16);
  flex-basis: var(--kofa-icon-size-16);
  background-color: var(--kofa-color-icon-gray);
  mask-size: 16px 16px;
}

.kofa-accordion__trigger[aria-expanded="true"] .kofa-accordion__icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .kofa-accordion__icon {
    transition: none;
  }
}

.kofa-accordion__trigger:disabled .kofa-accordion__icon,
.kofa-accordion__trigger[aria-disabled="true"] .kofa-accordion__icon {
  background-color: var(--kofa-color-icon-disabled);
}

.kofa-accordion__panel {
  /*
   * 항상 overflow를 숨긴다. 펼침 동작 중에만 숨기면 자식 margin 병합 여부가
   * 애니메이션 전후로 달라져 마지막에 높이가 튄다.
   */
  /* 높이 애니메이션이 padding을 포함한 값으로 움직이도록 border-box로 둔다. */
  box-sizing: border-box;
  overflow: hidden;
  padding: 16px 20px;
  color: var(--kofa-color-text-02);
  background: var(--kofa-color-surface-white);
  font-size: var(--kofa-typo-body-3-size);
  font-weight: var(--kofa-font-weight-regular);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

.kofa-accordion__panel[hidden] {
  display: none;
}

.kofa-accordion__item--error {
  color: var(--kofa-color-text-01);
}

.kofa-accordion__item--error .kofa-accordion__trigger {
  color: var(--kofa-color-text-01);
}

.kofa-accordion__message {
  margin: 0;
  padding: 0 20px 16px;
  color: var(--kofa-color-text-02);
  font-size: var(--kofa-typo-body-3-size);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}




/* ===== /accordion ===== */



/* ===== pagination ===== */
/* 페이지네이션 — kofa-pagination */
/*
 * Figma 밖 유지: hover·pressed·focus·disabled·error·생략 표기(접근성·진단 계약).
 */

[data-pagination-start] {
  scroll-margin-top: 24px;
}

.kofa-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1279px) {
  .kofa-pagination {
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
}

/* 라이브러리 274:16578 기준 전 폭 간격 0. 공개 변수 --kofa-pagination-gap의 기본값도 0이다. */
.kofa-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--kofa-pagination-gap, 0);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1279px) {
  .kofa-pagination__list {
    width: max-content;
    margin: 0 auto;
  }
}

.kofa-pagination__item {
  display: flex;
}

.kofa-pagination__item[hidden] { display: none; }

.kofa-pagination__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 9px 16px;
  overflow: clip;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--kofa-color-text-03);
  background: var(--kofa-color-surface-white);
  font-size: var(--kofa-typo-body-3-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.kofa-pagination__link:hover,
.kofa-pagination__link:active,
.kofa-pagination__link.kofa-is-hovered,
.kofa-pagination__link.kofa-is-pressed {
  border-radius: var(--kofa-radius-10);
  border-color: var(--kofa-color-border-default);
  background: var(--kofa-color-surface-gray-subtle);
}

.kofa-pagination__link:focus-visible,
.kofa-pagination__link.kofa-is-focused {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-pagination__link[aria-current="page"],
.kofa-pagination__link.kofa-is-selected {
  border-radius: var(--kofa-radius-10);
  color: var(--kofa-color-text-white);
  background: var(--kofa-color-surface-black);
}

.kofa-pagination__link[aria-disabled="true"],
.kofa-pagination__link.kofa-is-disabled {
  outline: 0;
  color: var(--kofa-color-text-04);
  background: var(--kofa-color-surface-white);
  border-color: transparent;
  cursor: not-allowed;
  opacity: 0.3;
  pointer-events: none;
}

.kofa-pagination__link[aria-invalid="true"],
.kofa-pagination__link.kofa-is-error {
  color: var(--kofa-color-text-danger);
  border-color: var(--kofa-color-border-danger);
}

.kofa-pagination__link--nav {
  width: 60px;
  padding: 8px 13px;
}

@media (max-width: 599px) {
  .kofa-pagination--compact-mobile .kofa-pagination__link--nav { width: 40px; }
}

.kofa-pagination__link--icon {
  width: 40px;
  padding: 8px 13px;
}

.kofa-pagination__icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.kofa-pagination__icon::before,
.kofa-pagination__icon::after {
  position: absolute;
  top: 4.25px;
  left: 7.25px;
  width: 9.5px;
  height: 15.5px;
  background: url("/icons/pagination-chevron-gray.svg") center / 9.5px 15.5px no-repeat;
  content: "";
}

.kofa-pagination__icon--double-previous::before {
  left: 4.25px;
}

.kofa-pagination__icon--double-previous::after {
  left: 9.25px;
}

.kofa-pagination__icon--next {
  transform: rotate(180deg);
}

.kofa-pagination__icon--double-next {
  transform: rotate(180deg);
}

.kofa-pagination__icon--double-next::before {
  left: 4.25px;
}

.kofa-pagination__icon--double-next::after {
  left: 9.25px;
}

.kofa-pagination__icon--previous::after,
.kofa-pagination__icon--next::after {
  display: none;
}

.kofa-pagination__ellipsis {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--kofa-color-text-03);
  font-size: var(--kofa-typo-body-3-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}


/* ===== /pagination ===== */


/* ===== back-button ===== */
/* 이전 버튼 — kofa-back-button */
/*
 * Figma 라이브러리 `이전 버튼`의 왼쪽 묶음. 오른쪽 묶음은 쓰는 화면이 없어 두지 않았다.
 * 동작은 data-history-back(main.js)이 맡는다. 폭·바깥 간격은 쓰는 화면이 정한다.
 */
.kofa-back-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  border: 0;
  color: var(--kofa-color-black);
  background: var(--kofa-color-surface-white);
  font: inherit;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  cursor: pointer;
}

.kofa-back-button:focus-visible {
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

/* 화살촉과 가로선을 같은 칸에 겹쳐 세로 가운데에 둔다. Figma 31.5×24 아이콘 틀이다. */
.kofa-back-button__icon {
  display: grid;
  align-items: center;
  width: 31.5px;
  height: 24px;
}

.kofa-back-button__icon img {
  grid-area: 1 / 1;
}
/* ===== /back-button ===== */


/* ===== section-title ===== */
/* 구역 제목 — kofa-section-title */
/*
 * Figma 라이브러리 `editor title`. 모듈형 에디터 본문(kmdb-editor)이 아니라 화면 구역 제목이다.
 * 원본: 왼쪽 4×24 세로선, 글자 시작 22px, 24/700/36. 폭은 쓰는 화면이 정한다.
 */
.kofa-section-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  color: var(--kofa-color-text-01);
  font-size: var(--kofa-typo-headline-4-size);
  font-weight: var(--kofa-font-weight-bold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

@media (max-width: 1279px) {
  .kofa-section-title { font-size: var(--kofa-typo-headline-compact-size); }
}

.kofa-section-title::before {
  flex: 0 0 4px;
  height: 24px;
  background: currentcolor;
  content: "";
}

@media (max-width: 1279px) {
  .kofa-section-title::before { height: 21px; }
}
/* ===== /section-title ===== */


/* ===== table-cell ===== */
/* 표 칸 — kofa-table-cell */
/*
 * Figma 라이브러리 `table`의 type=body·title 변형.
 * 원본 stroke는 레이아웃에 포함돼 기본 칸 높이가 53px(위 선 변형 54px)이다.
 * 행 높이·열 너비는 쓰는 화면이 정한다. 칸 안 글자 강조는 쓰는 화면의 내용 요소가 맡는다.
 */
.kofa-table-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kofa-color-border-default);
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-white);
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-regular);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

/* position=top: 위 선을 더한다. */
.kofa-table-cell--top {
  border-top: 1px solid var(--kofa-color-border-default);
}

/* type=title: 표 머리 칸. 원본 위 선 4px stroke가 칸 안쪽으로 절반만 보여 2px, 전체 59px이다. */
.kofa-table-cell--title {
  padding-block: 16px;
  border-top: 2px solid var(--kofa-color-black);
  background: var(--kofa-color-surface-gray-subtle);
  font-weight: var(--kofa-font-weight-semibold);
}

/* 좁은 칸. 라이브러리에 크기 변형은 없고 시안 인스턴스가 padding을 8 16으로 덮는다(소장자료 기증자 tooltip 표, 41px). */
.kofa-table-cell--compact {
  padding-block: 8px;
}

/* text position=middle */
.kofa-table-cell--center {
  justify-content: center;
  text-align: center;
}
/* ===== /table-cell ===== */


/* ===== empty-state ===== */
/* 빈 결과 — kofa-empty-state */
/*
 * 라이브러리 원본이 없어 KMDb kmdb-empty-state 규격을 옮긴 공용 커스텀이다. 문구 하나만 받는다.
 * 빈 목록·내용 자리가 위아래 요소에 붙지 않도록 최소 높이와 위아래 padding으로 기본 높이를 항상 확보한다.
 * 쓰는 화면은 이 여백을 0으로 덮지 않는다. 폭·바깥 간격만 정한다.
 */
.kofa-empty-state {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 164px;
  padding: 50px 20px;
  text-align: center;
}

@media (max-width: 599px) {
  .kofa-empty-state {
    min-height: 140px;
    padding: 36px 16px;
  }
}

.kofa-empty-state[hidden] {
  display: none;
}

/* 작은 빈 결과. 상영일정 시안 2625:26207: 높이 96, 위아래 36, 아이콘 없음, 글자 text/02. */
.kofa-empty-state--compact {
  min-height: 96px;
  padding: 36px 20px;
}

.kofa-empty-state--compact .kofa-empty-state__icon {
  display: none;
}

.kofa-empty-state--compact .kofa-empty-state__message {
  color: var(--kofa-color-text-02);
}

.kofa-empty-state__icon {
  width: 28px;
  height: 28px;
}

.kofa-empty-state__message {
  width: 100%;
  margin: 0;
  color: var(--kofa-color-text-01);
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-regular);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
  word-break: keep-all;
}
/* ===== /empty-state ===== */


/* ===== toast ===== */
/* 토스트 — kofa-toast */
/*
 * Figma 라이브러리 `toast`(type=information·success·error): 343×41, padding 10, gap 6, radius 8, 14px.
 * 위치는 소장자료 시안(2471:32987) 기준 화면 오른쪽 40px·아래 49px, 좁은 폭은 로그인 시안(3554:34374·34477) 기준 오른쪽 16px·아래 24px. 표시·제거는 js/components/toast.js가 맡는다.
 * 599px 이하는 하단 중앙 정렬
 */
.kofa-toast-region {
  position: fixed;
  z-index: 300;
  right: 40px;
  bottom: 49px;
  display: grid;
  justify-items: end;
  gap: 10px;
  pointer-events: none;
}

@media (max-width: 1279px) {
  .kofa-toast-region {
    right: 16px;
    bottom: 24px;
  }
}

@media (max-width: 599px) {
  .kofa-toast-region {
    left: 16px;
    justify-items: center;
  }
}

.kofa-toast {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 343px;
  max-width: 100%;
  padding: 10px;
  border-radius: var(--kofa-radius-8);
  box-shadow: 0 2px 16px rgb(0 0 0 / 8%);
  color: var(--kofa-color-text-information);
  background: var(--kofa-color-surface-information-subtle);
}

.kofa-toast--success {
  color: var(--kofa-color-success-700);
  background: var(--kofa-color-success-50);
}

.kofa-toast--error {
  color: var(--kofa-color-text-danger);
  background: var(--kofa-color-error-50);
}

/* 아이콘은 /icons/toast/. Figma Icons-Semantic 색(info #3277B1, success #4EA6AD, error #CF3541)으로 칠한 사본이다. */
.kofa-toast__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.kofa-toast__message {
  margin: 0;
  font-size: var(--kofa-typo-body-3-size);
  line-height: var(--kofa-line-height-base);
  /* Figma toast 문구는 자간 -2%(14px에서 -0.28px). 기본 -0.6px가 아니다. */
  letter-spacing: -0.28px;
}
/* ===== /toast ===== */



/* ===== dialog ===== */
/* 팝업과 바텀시트 — kofa-dialog, kofa-bottom-sheet */
/*
 * 기본 팝업은 Figma dialog(3039:27786 인스턴스 3487:199902·3479:187646): radius 16, 제목 20/30, 본문 16/24 #58585a, shadow 0 2 16 8%.
 * select 변형은 Figma node가 없어 기존 조정값 radius 20을 유지한다.
 * KMDb 색과 같은 KOFA 토큰이 없어 hover 배경·focus·disabled 글자는 의미가 같은 토큰으로 대체했다.
 */

html.kofa-is-page-scroll-locked {
  overflow: hidden;
  padding-right: var(--kofa-dialog-scrollbar-width, 0);
}

body.kofa-is-page-scroll-locked {
  overflow: hidden;
}

.kofa-dialog {
  box-sizing: border-box;
  width: min(calc(100% - 32px), 360px);
  max-width: none;
  padding: 20px 16px 16px;
  overflow: visible;
  border: 0;
  border-radius: var(--kofa-radius-16);
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-white);
  box-shadow: 0 2px 16px rgb(0 0 0 / 8%);
  opacity: 0;
  transform: scale(0.96);
}

@media (max-width: 1279px) {
  .kofa-dialog { width: min(calc(100% - 32px), 310px); }
}

.kofa-dialog[open] {
  display: block;
}

.kofa-dialog::backdrop {
  background: var(--kofa-color-background-bg-dim);
  opacity: 0;
}

.kofa-dialog[data-state="open"] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.kofa-dialog[data-state="closing"] {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.kofa-dialog[data-state="open"]::backdrop {
  opacity: 1;
  transition: opacity 0.18s ease;
}

.kofa-dialog[data-state="closing"]::backdrop {
  transition: opacity 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .kofa-dialog[data-state="open"],
  .kofa-dialog[data-state="closing"] {
    transition-duration: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kofa-dialog[data-state="open"]::backdrop,
  .kofa-dialog[data-state="closing"]::backdrop {
    transition-duration: 0s;
  }
}

.kofa-dialog__title {
  margin: 0;
  text-align: center;
  font-size: var(--kofa-typo-headline-3-size);
  font-weight: var(--kofa-font-weight-bold);
  line-height: var(--kofa-line-height-base);
  letter-spacing: var(--kofa-letter-spacing-base);
}

.kofa-dialog__description {
  margin: 10px 0 0;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: var(--kofa-color-text-02);
  font-size: var(--kofa-typo-body-4-size);
  line-height: var(--kofa-line-height-base);
}

.kofa-dialog__actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.kofa-dialog__actions .kofa-button {
  flex: 1 1 0;
}

/* 자동 로그아웃 안내 팝업의 남은 시간 상자 — Figma dialog 3497:260564 */
.kofa-session-remaining {
  margin: 16px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--kofa-color-divider-02);
  border-radius: var(--kofa-radius-12);
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-semibold);
  line-height: var(--kofa-line-height-base);
  text-align: center;
}

.kofa-session-remaining strong {
  color: var(--kofa-color-information-700);
}

.kofa-dialog--single .kofa-dialog__actions {
  flex-direction: column;
}

.kofa-dialog--double .kofa-dialog__actions {
  flex-direction: row;
}

@media (max-width: 1279px) {
  .kofa-dialog--double .kofa-dialog__actions { flex-direction: column; }
}

/* 선택 목록 팝업: 제목, 검색, 스크롤 목록, 하단 버튼. 목록 끝은 버튼 위 그라데이션 아래로 흐른다. */
.kofa-dialog--select {
  box-sizing: border-box;
  width: min(calc(100% - 32px), 670px);
  padding: 20px 32px 16px;
  border-radius: var(--kofa-radius-20);
  box-shadow: 0 12px 40px var(--kofa-color-neutral-black-20);
}

@media (max-width: 1279px) {
  .kofa-dialog--select { width: min(calc(100% - 32px), 600px); padding-inline: 20px; }
}

@media (max-width: 599px) {
  .kofa-dialog--select { padding-inline: 16px; }
}

.kofa-dialog--select .kofa-dialog__title {
  text-align: left;
  font-size: var(--kofa-typo-headline-3-size);
}

.kofa-dialog--select .kofa-dialog__actions {
  position: relative;
  margin-top: 0;
}

.kofa-dialog--select .kofa-dialog__actions::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 40px;
  background: linear-gradient(var(--kofa-color-neutral-white-0), var(--kofa-color-surface-white));
  pointer-events: none;
  content: "";
}

.kofa-dialog__search {
  margin-top: 16px;
}

.kofa-dialog__scroll {
  max-height: 398px;
  margin-top: 16px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.kofa-dialog__scroll::-webkit-scrollbar {
  width: 6px;
}

.kofa-dialog__scroll::-webkit-scrollbar-track {
  margin-block: 4px;
  border-radius: 1000px;
  background: var(--kofa-color-gray-100);
}

.kofa-dialog__scroll::-webkit-scrollbar-thumb {
  border-radius: 1000px;
  background: var(--kofa-color-text-01);
}

@supports not selector(::-webkit-scrollbar) {
  .kofa-dialog__scroll {
    scrollbar-color: var(--kofa-color-text-01) var(--kofa-color-gray-100);
    scrollbar-width: thin;
  }
}

.kofa-bottom-sheet {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: clip;
  border: 0;
  background: transparent;
}

.kofa-bottom-sheet[open] {
  display: block;
}

.kofa-bottom-sheet::backdrop {
  background: var(--kofa-color-background-bg-dim);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1);
}

.kofa-bottom-sheet[data-state="open"]::backdrop {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .kofa-bottom-sheet::backdrop {
    transition-duration: 0s;
  }
}

.kofa-bottom-sheet__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  max-height: min(calc(100% - 40px), 640px);
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  border-radius: var(--kofa-radius-20) var(--kofa-radius-20) 0 0;
  background: var(--kofa-color-surface-white);
  box-shadow: 0 -4px 8px var(--kofa-color-neutral-black-06);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.kofa-bottom-sheet[data-state="open"] .kofa-bottom-sheet__panel {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .kofa-bottom-sheet__panel {
    transition-duration: 0s;
  }
}

.kofa-bottom-sheet__handle {
  display: grid;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
}

.kofa-bottom-sheet__handle::before {
  width: 75px;
  height: 4px;
  border-radius: var(--kofa-radius-full);
  background: var(--kofa-color-surface-disabled);
  content: "";
}

.kofa-bottom-sheet__title {
  margin: 0;
  padding: 10px 16px;
  color: var(--kofa-color-text-01);
  font-size: var(--kofa-typo-headline-3-size);
  font-weight: var(--kofa-font-weight-bold);
  line-height: var(--kofa-line-height-base);
}

.kofa-bottom-sheet__items {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kofa-bottom-sheet__item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border: 0;
  color: var(--kofa-color-text-01);
  background: var(--kofa-color-surface-white);
  cursor: pointer;
  font: inherit;
  font-size: var(--kofa-typo-body-4-size);
  font-weight: var(--kofa-font-weight-regular);
  line-height: var(--kofa-line-height-base);
  text-align: left;
}

.kofa-bottom-sheet__item:hover,
.kofa-bottom-sheet__item.kofa-is-hovered {
  background: var(--kofa-color-background-gray-subtler);
}

.kofa-bottom-sheet__item:active,
.kofa-bottom-sheet__item.kofa-is-pressed {
  background: var(--kofa-color-background-gray-subtle);
}

.kofa-bottom-sheet__item:focus-visible,
.kofa-bottom-sheet__item.kofa-is-focused {
  z-index: 1;
  background: var(--kofa-color-background-gray-subtler);
  outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring);
  outline-offset: var(--kofa-outline-focus-offset);
}

.kofa-bottom-sheet__item[aria-pressed="true"],
.kofa-bottom-sheet__item.kofa-is-selected {
  font-weight: var(--kofa-font-weight-semibold);
}

.kofa-bottom-sheet__item[aria-pressed="true"]::before,
.kofa-bottom-sheet__item.kofa-is-selected::before {
  width: var(--kofa-icon-size-20);
  height: var(--kofa-icon-size-20);
  flex: 0 0 var(--kofa-icon-size-20);
  background: currentcolor;
  content: "";
  mask: url("/icons/action/check.svg") center / 20px 20px no-repeat;
}

.kofa-bottom-sheet__item[aria-disabled="true"],
.kofa-bottom-sheet__item.kofa-is-disabled {
  color: var(--kofa-color-text-03);
  cursor: not-allowed;
  pointer-events: none;
}

.kofa-bottom-sheet__item.kofa-is-error {
  color: var(--kofa-color-text-danger);
  background: var(--kofa-color-surface-danger-subtle);
}

.kofa-bottom-sheet__footer {
  display: grid;
  min-height: 96px;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px 16px;
  background: linear-gradient(
    to bottom,
    var(--kofa-color-neutral-white-0),
    var(--kofa-color-surface-white) 28px
  );
}

@media (max-width: 599px) {
  .kofa-bottom-sheet__footer { box-sizing: border-box; min-height: 76px; gap: 10px; }
}

.kofa-bottom-sheet__footer .kofa-button {
  width: 100%;
}

/* ===== /dialog ===== */

/* ===== image-placeholder ===== */
img.kofa-image-fallback[data-image-fallback-src] {
  box-sizing: border-box;
  padding: 16px;
  object-fit: scale-down;
  object-position: center;
  background-color: var(--kofa-color-background-gray-subtler);
}

.kofa-image-placeholder {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--kofa-color-border-default);
  border-radius: inherit;
  background: var(--kofa-color-background-gray-subtler);
}

.kofa-image-placeholder__icon {
  display: block;
  width: 64px;
  height: 64px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* ===== /image-placeholder ===== */

/* 1920px 시안의 본문 오른쪽 바깥 간격을 넓은 화면에서도 유지한다. */
.kofa-scroll-top {
  position: fixed;
  right: max(60px, calc((100% - var(--kofa-layout-max)) / 2 - 260px));
  bottom: 40px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0.929px solid var(--kofa-color-icon-default);
  border-radius: 50%;
  background: var(--kofa-color-surface-white);
  cursor: pointer;
}
@media (max-width: 1279px) {
  .kofa-scroll-top {
    right: var(--kofa-layout-safe-gutter);
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-width: 0.786px;
  }
}
.kofa-scroll-top__icon {
  display: flex;
  transform: rotate(90deg);
}

/* Async request feedback */
.kofa-request-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kofa-skeleton { pointer-events: none; user-select: none; }
.kofa-skeleton__line {
  display: inline-block;
  width: 12rem;
  max-width: 100%;
  height: 0.85em;
  border-radius: var(--kofa-radius-4);
  background: var(--kofa-color-gray-100);
  color: transparent;
  vertical-align: middle;
}
.kofa-skeleton__line--short { width: 5rem; }
.kofa-skeleton__line--long { width: 18rem; }
.kofa-skeleton .kofa-skeleton__box {
  border-color: transparent;
  background: var(--kofa-color-gray-100);
  border-radius: var(--kofa-radius-4);
  color: transparent;
}
.kofa-skeleton .kofa-chip,
.kofa-skeleton .kofa-badge {
  border-color: transparent;
  background: var(--kofa-color-gray-100);
  color: transparent;
  box-shadow: none;
}
.kofa-skeleton .kofa-chip > *,
.kofa-skeleton .kofa-badge > * { visibility: hidden; }