/* =============================================================================
   kmdb-common.css
   -----------------------------------------------------------------------------
   목차
   01. 기반 — 웹폰트와 전역 토큰
   02. 타이포그래피
   03. 아이콘
   04. 리셋과 접근성
   05. 전역 레이아웃 — 헤더, 푸터, 페이지
   06. 페이지 전환
   07. 기본 컴포넌트 — 버튼, 체크박스, 칩, 다이얼로그, 페이지네이션
   08. 기본 컴포넌트 — 라디오, 탭, 텍스트필드, 토스트, 툴팁
   09. 공용 컴포넌트 — 카탈로그 도구와 콘텐츠 페이지네이션
   10. 공용 컴포넌트 — 이미지 플레이스홀더와 정보 패널
   11. 공용 컴포넌트 — 가로 스크롤, 탐색, 상세 레이아웃, 상세 액션, 선택 드롭다운
   12. 공용 상태와 데이터 관계표
   13. 오류 페이지 — 404
   14. 개발 도구 — 아이콘 데모
   ============================================================================= */

@charset "UTF-8";

/* =============================================================================
   기반 — 웹폰트와 전역 토큰
   다국어 글꼴과 전역 색상·레이아웃·타이포 변수
   ============================================================================= */

/*
 * 본문 기본 글꼴이다. 한글 11,172자와 CJK 통합한자 7,138자를 담고 있어
 * 이 사이트가 쓰는 한글·라틴·한자·가나를 혼자 거의 다 그린다.
 * 아래 Noto 계열은 GOV에 글리프가 없는 문자에만 폴백으로 걸린다.
 */
@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;
}

@font-face {
  font-family: "Pretendard";
  src: url("/fonts/pretendard/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard Bold";
  src: url("/fonts/pretendard/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/notosanskr/noto-sans-kr-v39-korean-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/notosansjp/noto-sans-jp-v56-japanese-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/fonts/notosanssc/noto-sans-sc-v40-chinese-simplified-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/notosanstc/noto-sans-tc-v39-chinese-traditional-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/notosanskr/noto-sans-kr-v39-korean-500.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/notosansjp/noto-sans-jp-v56-japanese-500.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/fonts/notosanssc/noto-sans-sc-v40-chinese-simplified-500.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/notosanstc/noto-sans-tc-v39-chinese-traditional-500.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/notosanskr/noto-sans-kr-v39-korean-600.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/notosansjp/noto-sans-jp-v56-japanese-600.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/fonts/notosanssc/noto-sans-sc-v40-chinese-simplified-600.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/notosanstc/noto-sans-tc-v39-chinese-traditional-600.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/notosanskr/noto-sans-kr-v39-korean-700.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/notosansjp/noto-sans-jp-v56-japanese-700.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/fonts/notosanssc/noto-sans-sc-v40-chinese-simplified-700.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/notosanstc/noto-sans-tc-v39-chinese-traditional-700.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/notosanskr/noto-sans-kr-v39-korean-800.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/notosansjp/noto-sans-jp-v56-japanese-800.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/fonts/notosanssc/noto-sans-sc-v40-chinese-simplified-800.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/notosanstc/noto-sans-tc-v39-chinese-traditional-800.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/notosanskr/noto-sans-kr-v39-korean-900.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/notosansjp/noto-sans-jp-v56-japanese-900.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/fonts/notosanssc/noto-sans-sc-v40-chinese-simplified-900.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/notosanstc/noto-sans-tc-v39-chinese-traditional-900.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans CJK KR";
  src: url("/fonts/notosanscjkkr/NotoSansCJKkr-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-base: var(--font-family-base);
  --color-text-01: #222222;
  --color-text-02: #515458;
  --color-text-03: #838689;
  --color-text-danger: #d9121f;
  --color-icon-default: #222222;
  --color-icon-gray: #838689;
  --color-background-gray-subtler: #f5f8fb;
  --color-surface-black: #000000;
  --color-surface-white: #ffffff;
  --color-surface-disabled: #dbdee1;
  --color-border-disabled: #dbdee1;
  --color-line-default: #222222;
  --color-line-subtle: #d9dee7;
  --color-divider-02: #e7ebee;
  --color-text: var(--color-text-01);
  --color-muted: var(--color-text-02);
  --color-surface: var(--color-surface-white);
  --color-surface-alt: #f5f7fa;
  --color-line: var(--color-line-subtle);
  --color-primary: #c92127;
  --color-primary-hover: #b51d23;
  --color-primary-dark: #92181d;
  --color-secondary: #2f333a;
  --color-secondary-hover: #24272d;
  --color-danger: #d92d20;
  --color-badge-danger: #d9121f;
  --color-danger-hover: #b42318;
  --color-disabled: #c8cdd5;
  --color-disabled-bg: #eef1f5;
  --color-focus: #005fcc;
  --layout-max: 1440px;
  --layout-canvas: 1920px;
  --layout-safe-gutter: 40px;
  --layout-safe-width: min(
    var(--layout-max),
    calc(100% - (var(--layout-safe-gutter) * 2))
  );
  --layout-gutter: 0px;
  --layout-header-desktop-height: 135px;
  --layout-header-top-row-height: 70px;
  --layout-header-navigation-row-height: 63px;
  --layout-narrow-header-height: 56px;
  /* 고정 헤더는 본문·페이지 플로팅 위, 다이얼로그·토스트 아래다. */
  --layout-header-z-index: 900;
  /* 페이지 플로팅은 본문 위, 헤더 스택 아래다. 사이트 드로어가 헤더 안에 있어 헤더보다 높은 값은 드로어를 덮는다. */
  --layout-page-floating-z-index: 890;
  /* dialog와 같은 오버레이 층이다. 고정 헤더 위에 덮는다. */
  --layout-bottom-sheet-z-index: 1000;
  --layout-detail-breadcrumb-gap: 40px;
  --layout-detail-primary-width: 1010px;
  --layout-detail-sidebar-width: 360px;
  --layout-detail-total-width: calc(var(--layout-detail-primary-width) + 70px + var(--layout-detail-sidebar-width));
  --font-family-base:
    "Pretendard GOV", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC",
    "Noto Sans TC", "Noto Sans CJK KR", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --letter-spacing-base: 0;
  --letter-spacing-figma-source: -0.6px;
  --typo-display-3-size: 60px;
  --typo-display-2-size: 44px;
  --typo-display-1-size: 36px;
  --typo-display-3-size-mobile: 40px;
  --typo-display-2-size-mobile: 32px;
  --typo-display-1-size-mobile: 28px;
  --typo-headline-6-size: 40px;
  --typo-headline-5-size: 32px;
  --typo-headline-4-size: 24px;
  --typo-headline-3-size: 20px;
  --typo-headline-2-size: 18px;
  --typo-headline-1-size: 16px;
  --typo-headline-6-size-mobile: 28px;
  --typo-headline-5-size-mobile: 26px;
  --typo-headline-4-size-mobile: 20px;
  --typo-headline-3-size-mobile: 20px;
  --typo-headline-2-size-mobile: 18px;
  --typo-headline-1-size-mobile: 16px;
  --typo-body-5-size: 18px;
  --typo-body-4-size: 16px;
  --typo-body-3-size: 14px;
  --typo-body-2-size: 12px;
  --typo-body-1-size: 10px;
}

@media (max-width: 1439px) {
  :root {
    --layout-safe-gutter: 40px;
    --layout-safe-width: min(var(--layout-max), 100%);
    --layout-gutter: 40px;
  }
}

@media (max-width: 599px) {
  :root {
    --layout-safe-gutter: 16px;
    --layout-gutter: 16px;
  }
}

/* =============================================================================
   타이포그래피
   표시·제목·본문 크기와 굵기 유틸리티
   ============================================================================= */
.kmdb-typo-display-3,
.kmdb-typo-display-2,
.kmdb-typo-display-1,
.kmdb-typo-headline-6,
.kmdb-typo-headline-5,
.kmdb-typo-headline-4,
.kmdb-typo-headline-3,
.kmdb-typo-headline-2,
.kmdb-typo-headline-1,
.kmdb-typo-body-5,
.kmdb-typo-body-4,
.kmdb-typo-body-3,
.kmdb-typo-body-2,
.kmdb-typo-body-1 {
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}

.kmdb-typo-display-3,
.kmdb-typo-display-2,
.kmdb-typo-display-1,
.kmdb-typo-headline-6,
.kmdb-typo-headline-5,
.kmdb-typo-headline-4,
.kmdb-typo-headline-3,
.kmdb-typo-headline-2,
.kmdb-typo-headline-1 {
  font-weight: var(--font-weight-bold);
}

.kmdb-typo-display-3 {
  font-size: var(--typo-display-3-size);
}

@media (max-width: 599px) {
  .kmdb-typo-display-3 {
    font-size: var(--typo-display-3-size-mobile);
  }
}

.kmdb-typo-display-2 {
  font-size: var(--typo-display-2-size);
}

@media (max-width: 599px) {
  .kmdb-typo-display-2 {
    font-size: var(--typo-display-2-size-mobile);
  }
}

.kmdb-typo-display-1 {
  font-size: var(--typo-display-1-size);
}

@media (max-width: 599px) {
  .kmdb-typo-display-1 {
    font-size: var(--typo-display-1-size-mobile);
  }
}

.kmdb-typo-headline-6 {
  font-size: var(--typo-headline-6-size);
}

@media (max-width: 599px) {
  .kmdb-typo-headline-6 {
    font-size: var(--typo-headline-6-size-mobile);
  }
}

.kmdb-typo-headline-5 {
  font-size: var(--typo-headline-5-size);
}

@media (max-width: 599px) {
  .kmdb-typo-headline-5 {
    font-size: var(--typo-headline-5-size-mobile);
  }
}

.kmdb-typo-headline-4 {
  font-size: var(--typo-headline-4-size);
}

@media (max-width: 599px) {
  .kmdb-typo-headline-4 {
    font-size: var(--typo-headline-4-size-mobile);
  }
}

.kmdb-typo-headline-3 {
  font-size: var(--typo-headline-3-size);
}

@media (max-width: 599px) {
  .kmdb-typo-headline-3 {
    font-size: var(--typo-headline-3-size-mobile);
  }
}

.kmdb-typo-headline-2 {
  font-size: var(--typo-headline-2-size);
}

@media (max-width: 599px) {
  .kmdb-typo-headline-2 {
    font-size: var(--typo-headline-2-size-mobile);
  }
}

.kmdb-typo-headline-1 {
  font-size: var(--typo-headline-1-size);
}

@media (max-width: 599px) {
  .kmdb-typo-headline-1 {
    font-size: var(--typo-headline-1-size-mobile);
  }
}

.kmdb-typo-body-5,
.kmdb-typo-body-4,
.kmdb-typo-body-3,
.kmdb-typo-body-2,
.kmdb-typo-body-1 {
  font-weight: var(--font-weight-regular);
}

.kmdb-typo-body-5 {
  font-size: var(--typo-body-5-size);
}

.kmdb-typo-body-4 {
  font-size: var(--typo-body-4-size);
}

.kmdb-typo-body-3 {
  font-size: var(--typo-body-3-size);
}

.kmdb-typo-body-2 {
  font-size: var(--typo-body-2-size);
}

.kmdb-typo-body-1 {
  font-size: var(--typo-body-1-size);
}

.kmdb-typo-semibold {
  font-weight: var(--font-weight-semibold);
}

.kmdb-typo-bold {
  font-weight: var(--font-weight-bold);
}

/* =============================================================================
   아이콘
   공통 크기와 터치 영역 유틸리티
   ============================================================================= */
:root {
  --icon-size-12: 12px;
  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-size-32: 32px;
  --icon-size-40: 40px;
  --icon-touch-target: 44px;
  --icon-stroke-default: 1.5;
}

.kmdb-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon-size-24);
  height: var(--icon-size-24);
  color: currentColor;
  vertical-align: middle;
}

.kmdb-icon--12 {
  width: var(--icon-size-12);
  height: var(--icon-size-12);
}

.kmdb-icon--16 {
  width: var(--icon-size-16);
  height: var(--icon-size-16);
}

.kmdb-icon--20 {
  width: var(--icon-size-20);
  height: var(--icon-size-20);
}

.kmdb-icon--24 {
  width: var(--icon-size-24);
  height: var(--icon-size-24);
}

.kmdb-icon--32 {
  width: var(--icon-size-32);
  height: var(--icon-size-32);
}

.kmdb-icon--40 {
  width: var(--icon-size-40);
  height: var(--icon-size-40);
}

.kmdb-icon-touch-target {
  display: inline-grid;
  min-width: var(--icon-touch-target);
  min-height: var(--icon-touch-target);
  place-items: center;
}

/* =============================================================================
   리셋과 접근성
   기본 요소 정규화와 키보드·스크린리더 지원
   ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  scroll-padding-top: var(--layout-header-desktop-height);
  font-size: 18px;
}

@media (max-width: 1439px) {
  html {
    scroll-padding-top: calc(var(--layout-narrow-header-height) + 2px);
  }
}

/* sticky 헤더 입력의 캐럿이 scroll-padding 안에 있어 입력마다 페이지가 위로 스크롤되는 것을 막는다 */
html:has(.kmdb-site-header :focus),
html:has(.kmdb-content-header :focus) {
  scroll-padding-top: 0;
}

@media (max-width: 1439px) {
  html {
    scrollbar-gutter: auto;
  }
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-surface);
  font-family: var(--font-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}

html.kmdb-is-page-scroll-locked {
  scrollbar-gutter: auto;
  overflow: hidden;
}

body.kmdb-is-page-scroll-locked {
  overflow: hidden;
  padding-inline-end: var(--page-scrollbar-width, 0px);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

:where(input[type="search"])::-webkit-search-cancel-button {
  appearance: none;
  width: 24px;
  height: 24px;
  background: url("/icons/action/delete.svg") center / 24px 24px no-repeat;
  cursor: pointer;
}

:where(input[type="search"], input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"]) {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.kmdb-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  color: #ffffff;
  background: #000000;
  transform: translateY(-160%);
}

.kmdb-skip-link:focus {
  transform: translateY(0);
}

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

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

/* =============================================================================
   전역 레이아웃 — 사이트 헤더
   로고·유틸리티·주 탐색의 공통 상단 구조
   ============================================================================= */
.kmdb-site-header {
  position: sticky;
  z-index: var(--layout-header-z-index);
  top: 0;
  min-height: var(--layout-header-desktop-height);
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-text);
  view-transition-name: kmdb-header;
  transition: transform 180ms ease-out;
}

@media (min-width: 1440px) {
  .kmdb-site-header[data-scroll-header-hidden] {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-site-header {
    transition: none;
  }
}

@media (max-width: 1439px) {
  .kmdb-site-header {
    /* 헤더의 페인트 격리가 뷰포트 고정 메뉴를 헤더 높이로 자르지 않도록 한다 */
    min-height: 0;
    view-transition-name: none;
  }
}

/* =============================================================================
   전역 레이아웃 — 콘텐츠 헤더
   검색·유틸리티·콘텐츠 탐색의 공통 상단 구조
   ============================================================================= */
.kmdb-content-header {
  --layout-header-desktop-height: 126px;
  --layout-header-top-row-height: 63px;
  --layout-header-navigation-row-height: 62px;
  --layout-narrow-header-height: 55px;
  --content-header-navigation-border: 2px solid var(--color-text-01);

  position: sticky;
  z-index: var(--layout-header-z-index);
  top: 0;
  min-height: var(--layout-header-desktop-height);
  background: var(--color-surface-white);
  view-transition-name: kmdb-header;
  transition: transform 180ms ease-out;
}

@media (min-width: 1440px) {
  .kmdb-content-header[data-scroll-header-hidden] {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-content-header {
    transition: none;
  }
}

@media (max-width: 1439px) {
  .kmdb-content-header {
    min-height: 0;
    border-bottom: var(--content-header-narrow-border-width, 1px) solid var(--color-text-01);
    view-transition-name: none;
  }
}

/* =============================================================================
   전역 레이아웃 — 공유 사이트 메뉴
   1440px 이상 헤더 내 탐색과 1439px 이하 전체 메뉴 drawer
   ============================================================================= */
.kmdb-site-menu__top {
  height: var(--layout-header-top-row-height);
}

@media (max-width: 1439px) {
  .kmdb-site-menu__top {
    height: var(--layout-narrow-header-height);
  }
}

.kmdb-site-menu--site-header .kmdb-site-menu__top {
  border-bottom: 2px solid var(--color-text);
}

@media (max-width: 1439px) {
  .kmdb-site-menu--site-header .kmdb-site-menu__top {
    border-bottom: 0;
  }
}

.kmdb-site-menu__top-layout {
  display: grid;
  width: var(--layout-safe-width);
  height: 100%;
  grid-template-columns: auto 340px minmax(0, 1fr) auto;
  column-gap: 30px;
  align-items: center;
  margin: 0 auto;
}

@media (max-width: 1439px) {
  .kmdb-site-menu__top-layout {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0;
    padding-right: var(--layout-gutter);
    padding-left: var(--layout-gutter);
  }
}

.kmdb-site-menu--site-header .kmdb-site-menu__top-layout {
  grid-template-columns: 1fr auto 1fr;
  column-gap: 0;
}

@media (max-width: 1439px) {
  .kmdb-site-menu--site-header .kmdb-site-menu__top-layout {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

.kmdb-site-menu__logo {
  line-height: 0;
}

.kmdb-site-menu--site-header .kmdb-site-menu__logo {
  grid-column: 2;
}

@media (max-width: 1439px) {
  .kmdb-site-menu--site-header .kmdb-site-menu__logo {
    grid-column: 1;
  }
}

.kmdb-site-menu__logo img {
  display: block;
  width: 81px;
  height: auto;
}

@media (max-width: 1439px) {
  .kmdb-site-menu__logo img {
    width: 65px;
    height: auto;
  }
}

.kmdb-site-menu__narrow-actions {
  display: none;
}

@media (max-width: 1439px) {
  .kmdb-site-menu__narrow-actions {
    display: flex;
    grid-column: 3;
    align-items: center;
    justify-self: end;
    gap: 4px;
  }
}

.kmdb-site-menu__member {
  margin: 0;
  color: var(--color-text-01);
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  white-space: nowrap;
}

.kmdb-site-menu__member span {
  font-weight: var(--font-weight-semibold);
}

.kmdb-site-menu__toggle {
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 10px;
  place-items: center;
  border: 0;
  /* 24px 아이콘은 gutter에 맞추고 44px 클릭 영역만 바깥으로 확장 */
  margin-right: -10px;
  background: transparent;
}

.kmdb-site-menu__toggle-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.kmdb-site-menu__search {
  position: relative;
  width: 340px;
  height: 44px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--color-surface-white);
}

@media (max-width: 1439px) {
  .kmdb-site-menu__search {
    display: none;
  }
}

.kmdb-site-menu__search::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid var(--color-icon-default);
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.kmdb-site-menu__search:has(input:focus, button:focus-visible)::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 3px solid var(--color-focus);
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.kmdb-site-menu__search button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}


.kmdb-site-menu--site-header .kmdb-site-menu__search {
  display: none;
}

.kmdb-site-menu__search input {
  width: 100%;
  height: 100%;
  padding: 0 54px 0 19px;
  border: 0;
  color: var(--color-text-01);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  outline: 0;
}

.kmdb-site-menu__search button {
  position: absolute;
  top: 50%;
  right: 19px;
  display: inline-grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
}

.kmdb-site-menu__search img {
  width: 28px;
  height: 28px;
}

.kmdb-site-menu__navigation {
  display: flex;
  height: calc(var(--layout-header-navigation-row-height) + 1px);
  align-items: center;
  border-bottom: var(--content-header-navigation-border, 1px solid var(--color-surface-disabled));
}

@media (max-width: 1439px) {
  .kmdb-site-menu__navigation {
    display: none;
  }
}

.kmdb-site-menu__navigation-links {
  display: flex;
  width: var(--layout-safe-width);
  height: var(--layout-header-navigation-row-height);
  align-items: center;
  gap: 80px;
  margin: 0 auto;
}

.kmdb-site-menu__navigation a {
  position: relative;
  display: inline-flex;
  height: 100%;
  align-items: center;
  padding: 0 40px;
  margin: 0 -40px;
  color: var(--content-header-navigation-color, var(--color-text-02));
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-site-menu__navigation .kmdb-is-active {
  color: var(--color-text-01);
}

.kmdb-site-menu__navigation .kmdb-is-active::after {
  position: absolute;
  right: 40px;
  bottom: 0;
  left: 40px;
  height: 4px;
  background: var(--color-icon-default);
  content: "";
}

.kmdb-site-menu__utility {
  display: flex;
  grid-column: 4;
  align-items: center;
  justify-self: end;
  gap: 14px;
  color: var(--color-text-01);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1439px) {
  .kmdb-site-menu__utility {
    display: none;
  }
}

.kmdb-site-menu__utility a {
  position: relative;
}

.kmdb-site-menu__utility a::before {
  position: absolute;
  top: -12px;
  right: -14px;
  bottom: -12px;
  left: 0;
  content: "";
}

.kmdb-site-menu__utility > a:first-child::before {
  left: -14px;
}

.kmdb-site-menu__utility .kmdb-header-logout-form button {
  position: relative;
}

.kmdb-site-menu__utility .kmdb-header-logout-form button::before {
  position: absolute;
  top: -12px;
  right: -7px;
  bottom: -12px;
  left: 0;
  content: "";
}

.kmdb-site-menu__utility .kmdb-header-logout-form + a::before {
  left: -7px;
}

.kmdb-site-menu__utility a:focus-visible {
  outline: 0;
}

.kmdb-site-menu__utility a:focus-visible::before {
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
}

.kmdb-site-menu__utility .kmdb-header-logout-form button:focus-visible {
  outline: 0;
}

.kmdb-site-menu__utility .kmdb-header-logout-form button:focus-visible::before {
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
}

.kmdb-site-menu__utility a + a {
  padding-left: 14px;
  border-left: 1px solid var(--color-line-subtle);
}

.kmdb-header-logout-form {
  margin: 0;
}

.kmdb-header-logout-form button {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
}

.kmdb-site-menu--site-header .kmdb-site-menu__utility {
  grid-column: 3;
  color: var(--color-muted);
}

.kmdb-site-menu--content-header .kmdb-site-menu__utility {
  color: var(--color-muted);
}

.kmdb-site-menu--site-header .kmdb-site-menu__navigation {
  height: var(--layout-header-navigation-row-height);
  justify-content: center;
  border-bottom: 0;
}

.kmdb-site-menu--site-header .kmdb-site-menu__navigation a {
  color: var(--color-text);
}

.kmdb-site-menu--site-header .kmdb-site-menu__navigation-links {
  justify-content: center;
}

.kmdb-content-header--search
  .kmdb-site-menu--content-header
  .kmdb-site-menu__navigation {
  height: var(--layout-header-navigation-row-height);
  border-bottom: 2px solid var(--color-icon-default);
}

.kmdb-content-header--search
  .kmdb-site-menu--content-header
  .kmdb-site-menu__navigation-links {
  height: calc(var(--layout-header-navigation-row-height) - 2px);
}

/* =============================================================================
   전역 레이아웃 — 좁은 화면 전체 메뉴 drawer
   Figma GNB(device=tablet·mobile)의 375px 우측 패널
   ============================================================================= */
.kmdb-site-drawer {
  position: fixed;
  /* 헤더 스택 안에서 토글보다 위, 페이지 플로팅은 헤더보다 낮춰 이 층 아래에 둔다. */
  z-index: 950;
  inset: 0;
}

.kmdb-site-drawer[hidden] {
  display: none;
}

@media (min-width: 1440px) {
  .kmdb-site-drawer {
    display: none;
  }
}

.kmdb-site-drawer__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--color-background-bg-dim, rgba(0, 0, 0, 0.5));
  transition: opacity 240ms cubic-bezier(0.2, 0, 0, 1);
}

.kmdb-site-drawer.kmdb-is-open .kmdb-site-drawer__backdrop {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-site-drawer__backdrop {
    transition: none;
  }
}

.kmdb-site-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(375px, 100vw);
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface-white);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.kmdb-site-drawer.kmdb-is-open .kmdb-site-drawer__panel {
  transform: translateX(0);
}

/* 모바일은 뒤 배경을 덮는 전체 화면 팝업이다. 우측 슬라이드는 태블릿 밴드만 쓴다. */
@media (max-width: 599px) {
  .kmdb-site-drawer__backdrop {
    display: none;
  }

  .kmdb-site-drawer__panel {
    width: 100%;
    opacity: 0;
    transform: none;
    transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
  }

  .kmdb-site-drawer.kmdb-is-open .kmdb-site-drawer__panel {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-site-drawer__panel {
    transition: none;
  }
}

.kmdb-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(--color-icon-default);
}

.kmdb-site-drawer__logo {
  line-height: 0;
}

.kmdb-site-drawer__logo img {
  display: block;
  width: 65px;
  height: auto;
}

.kmdb-site-drawer__close {
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 10px;
  place-items: center;
  border: 0;
  background: transparent;
}

.kmdb-site-drawer__close img {
  width: 24px;
  height: 24px;
}

/* 목록만 스크롤한다. 스크롤바는 숨기고 계정·언어 막대는 아래에 고정한다. */
.kmdb-site-drawer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}

.kmdb-site-drawer__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.kmdb-site-drawer__navigation {
  display: block;
}

.kmdb-site-drawer__row {
  display: flex;
  height: 56px;
  align-items: center;
}

.kmdb-site-drawer__link {
  display: flex;
  height: 100%;
  flex: 1 1 auto;
  align-items: center;
  padding-left: 16px;
  color: var(--color-text-01);
  font-size: var(--typo-headline-3-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

/* 하위 메뉴가 있는 행은 이동하지 않고 행 전체가 펼침 버튼이다. */
.kmdb-site-drawer__link--toggle {
  justify-content: space-between;
  width: 100%;
  padding-right: 0;
  border: 0;
  font-family: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.kmdb-site-drawer__disclosure {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 10px;
  place-items: center;
}

.kmdb-site-drawer__disclosure img {
  width: 24px;
  height: 24px;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.kmdb-site-drawer__link--toggle[aria-expanded="true"]
  .kmdb-site-drawer__disclosure
  img {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-site-drawer__disclosure img {
    transition: none;
  }
}

.kmdb-site-drawer__submenu {
  display: flex;
  flex-direction: column;
  background: var(--color-background-gray-subtler);
}

.kmdb-site-drawer__submenu[hidden] {
  display: none;
}

.kmdb-site-drawer__submenu a {
  display: flex;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  padding-left: 16px;
  color: var(--color-text-01);
  font-size: var(--typo-body-4-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.kmdb-site-drawer__submenu a:first-child {
  margin-top: 10px;
}

.kmdb-site-drawer__submenu a:last-child {
  margin-bottom: 10px;
}

.kmdb-site-drawer__bottom {
  display: flex;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 16px;
  border-top: 1px solid var(--color-border-disabled);
  background: var(--color-surface-white);
}

.kmdb-site-drawer__account {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-01);
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.kmdb-site-drawer__language {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--typo-body-3-size);
  line-height: 1.5;
}

.kmdb-site-drawer__language span {
  color: var(--color-text-01);
  font-weight: var(--font-weight-semibold);
}

.kmdb-site-drawer__language a {
  color: var(--color-text-02);
  font-weight: var(--font-weight-regular);
}

.kmdb-site-drawer__divider {
  width: 1px;
  height: 12px;
  flex: 0 0 1px;
  background: var(--color-divider-02);
}

/* =============================================================================
   공용 커스텀 컴포넌트 — 사이드 탐색
   마이페이지·고객서비스가 공유하는 좌측 메뉴. 1000px 미만에서는 헤더 drawer가 대신한다.
   ============================================================================= */
.kmdb-side-navigation {
  display: grid;
  gap: 20px;
}

@media (max-width: 1439px) {
  .kmdb-side-navigation {
    gap: 4px;
  }
}

@media (max-width: 999px) {
  .kmdb-side-navigation {
    display: none;
  }
}

.kmdb-side-navigation__member {
  display: flex;
  min-height: 38px;
  align-items: baseline;
  margin: 0;
  padding-left: 20px;
  /* Figma inside stroke는 이름 줄의 padding에 포함되지 않는 장식 */
  box-shadow: inset 4px 0 0 var(--color-line-default);
  line-height: 1.5;
}

@media (max-width: 1439px) {
  .kmdb-side-navigation__member {
    min-height: 30px;
    margin: 0 20px;
  }
}

.kmdb-side-navigation__member strong {
  font-size: var(--typo-headline-4-size);
}

@media (max-width: 1439px) {
  .kmdb-side-navigation__member strong {
    font-size: var(--typo-headline-3-size);
  }
}

.kmdb-side-navigation__member span {
  color: var(--color-text-02);
  font-size: var(--typo-headline-3-size);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 1439px) {
  .kmdb-side-navigation__member span {
    font-size: var(--typo-headline-2-size);
  }
}

.kmdb-side-navigation nav {
  display: grid;
}

@media (max-width: 1439px) {
  .kmdb-side-navigation nav {
    padding: 10px 16px;
  }
}

.kmdb-side-navigation nav a {
  display: flex;
  height: 56px;
  align-items: center;
  padding: 0 20px;
  border-radius: 8px;
  font-size: var(--typo-headline-2-size);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 1439px) {
  .kmdb-side-navigation nav a {
    height: 44px;
    padding: 0 20px;
    font-size: var(--typo-headline-1-size);
  }
}

.kmdb-side-navigation nav a.kmdb-is-active {
  background: var(--color-background-gray-subtler);
}

/* =============================================================================
   전역 레이아웃 — 사이트 푸터
   기관 정보·정책 링크·저작권 영역
   ============================================================================= */
.kmdb-site-footer {
  margin-top: 0;
  color: var(--color-muted);
  border-top: 1px solid var(--color-text);
  background: var(--color-surface);
  view-transition-name: kmdb-footer;
}

.kmdb-site-footer__information-layout {
  display: grid;
  grid-template-columns: minmax(0, 546px) 520px;
  grid-template-areas:
    "info links"
    "copyright links";
  grid-template-rows: auto 1fr;
  column-gap: clamp(70px, calc(100% - 1066px), 374px);
  row-gap: 0;
  width: var(--footer-layout-width, var(--layout-safe-width));
  min-height: var(--footer-min-height, 200px);
  margin: 0 auto;
  padding: 30px 0;
}

@media (max-width: 1439px) {
  .kmdb-site-footer__information-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "links"
      "copyright";
    grid-template-rows: auto;
    gap: 0;
    min-height: var(--footer-min-height, 243px);
    padding: var(--footer-block-padding, 32px) var(--footer-inline-padding, var(--layout-gutter));
  }
}

@media (max-width: 599px) {
  .kmdb-site-footer__information-layout {
    display: flex;
    min-height: var(--footer-min-height, 322px);
    flex-direction: column;
    gap: 36px;
    padding: var(--footer-padding-top, 30px) var(--footer-inline-padding, var(--layout-gutter)) 30px;
  }
}

.kmdb-site-footer__info {
  display: flex;
  grid-area: info;
  flex-direction: column;
}

@media (max-width: 599px) {
  .kmdb-site-footer__info {
    gap: 16px;
  }
}

.kmdb-site-footer__brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  color: var(--color-text);
  line-height: 1.5;
}

@media (max-width: 599px) {
  .kmdb-site-footer__brand {
    gap: 12px;
    align-items: center;
    margin-bottom: 0;
  }
}

.kmdb-site-footer__brand span {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.kmdb-site-footer__name {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.kmdb-site-footer__name img {
  display: block;
  width: 71px;
  height: auto;
}

@media (max-width: 1439px) {
  .kmdb-site-footer__name img {
    width: 65px;
    height: auto;
  }
}

.kmdb-site-footer__address {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
}

@media (max-width: 599px) {
  .kmdb-site-footer__address {
    flex-direction: column;
    gap: 8px;
  }
}

.kmdb-site-footer__address span + span {
  font-family: var(--footer-contact-font, inherit);
  position: relative;
  padding-left: 14px;
}

@media (max-width: 599px) {
  .kmdb-site-footer__address span + span {
    padding-left: 0;
  }
}

.kmdb-site-footer__address span + span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-03, #838689);
  content: "";
  transform: translateY(-50%);
}

@media (max-width: 599px) {
  .kmdb-site-footer__address span + span::before {
    display: none;
  }
}

.kmdb-site-footer__links {
  display: flex;
  grid-area: links;
  flex-wrap: wrap;
  gap: var(--footer-links-gap, 18px);
  justify-content: flex-end;
  align-self: start;
  margin-bottom: 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1439px) {
  .kmdb-site-footer__links {
    justify-content: flex-start;
    margin-top: 26px;
  }
}

@media (max-width: 599px) {
  .kmdb-site-footer__links {
    width: 280px;
    row-gap: 8px;
    column-gap: var(--footer-links-gap, 18px);
    margin-top: 0;
  }

  .kmdb-site-footer__links a:nth-child(4)::before {
    display: none;
  }
}

.kmdb-site-footer__links a + a {
  position: relative;
}

.kmdb-site-footer__links a + a::before {
  position: absolute;
  top: 50%;
  left: calc(var(--footer-links-gap, 18px) / -2);
  width: 1px;
  height: 15px;
  background: var(--color-line);
  content: "";
  transform: translateY(-50%);
}

.kmdb-site-footer__copyright {
  font-family: var(--footer-copyright-font, inherit);
  grid-area: copyright;
  align-self: end;
  margin: 0;
  color: var(--footer-copyright-color, var(--color-muted));
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1439px) {
  .kmdb-site-footer__copyright {
    align-self: auto;
    margin-top: 38px;
  }
}

@media (max-width: 599px) {
  .kmdb-site-footer__copyright {
    margin-top: 0;
  }
}

.kmdb-site-footer--detailed {
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--color-text);
}

.kmdb-site-footer--detailed .kmdb-site-footer__information-layout {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 44px;
  padding: 30px 0;
}

@media (max-width: 1439px) {
  .kmdb-site-footer--detailed .kmdb-site-footer__information-layout {
    gap: 36px;
    padding: 30px var(--layout-gutter);
  }
}

.kmdb-site-footer--detailed .kmdb-site-footer__info {
  gap: 14px;
}

@media (max-width: 1439px) {
  .kmdb-site-footer--detailed .kmdb-site-footer__info {
    gap: 16px;
  }
}

.kmdb-site-footer--detailed .kmdb-site-footer__brand {
  min-height: 33px;
  margin-bottom: 0;
}

@media (max-width: 1439px) {
  .kmdb-site-footer--detailed .kmdb-site-footer__brand {
    min-height: 30px;
  }
}

.kmdb-site-footer__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 36px;
}

@media (max-width: 1439px) {
  .kmdb-site-footer__body {
    column-gap: 40px;
  }
}

@media (max-width: 599px) {
  .kmdb-site-footer__body {
    flex-direction: column;
  }
}

.kmdb-site-footer__channels {
  display: grid;
  gap: 1px;
  align-content: start;
  max-width: 100%;
}

@media (max-width: 1439px) {
  .kmdb-site-footer__channels {
    gap: 0;
  }
}

.kmdb-site-footer__channel-videos {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}

@media (max-width: 1439px) {
  .kmdb-site-footer__channel-videos {
    column-gap: 32px;
  }
}

.kmdb-site-footer__channel-socials {
  display: flex;
  gap: 4px;
}

.kmdb-site-footer__channel-link {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text-01);
  font-size: var(--typo-body-3-size);
  line-height: 28px;
  text-decoration: none;
}

.kmdb-site-footer__channel-icon {
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

.kmdb-site-footer__details {
  display: grid;
  flex: 0 1 718px;
  min-width: 0;
  gap: 16px;
  color: var(--color-text-02);
  font-size: var(--typo-body-4-size);
  line-height: var(--line-height-base);
}

@media (max-width: 1439px) {
  .kmdb-site-footer__details {
    flex-basis: 507px;
  }
}

@media (max-width: 599px) {
  .kmdb-site-footer__details {
    flex-basis: auto;
    width: 100%;
  }
}

.kmdb-site-footer__locations {
  display: grid;
  gap: 8px;
  margin: 0;
  font-style: normal;
}

.kmdb-site-footer__locations p {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  margin: 0;
}

.kmdb-site-footer__locations strong {
  color: var(--color-text-01);
  font-weight: var(--font-weight-semibold);
}

.kmdb-site-footer__locations span {
  margin: 0;
}

.kmdb-site-footer__contacts {
  display: grid;
  gap: 8px;
  margin: 0;
  font-style: normal;
}

.kmdb-site-footer__contacts p {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 16px;
  margin: 0;
}

.kmdb-site-footer__contacts strong {
  color: var(--color-text-01);
  font-weight: var(--font-weight-semibold);
}

.kmdb-site-footer__contacts span {
  margin: 0;
}

.kmdb-site-footer__bottom {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

@media (max-width: 1439px) {
  .kmdb-site-footer__bottom {
    padding: 16px 0 0;
    border-top: 1px solid var(--color-line);
  }
}

@media (max-width: 999px) {
  .kmdb-site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.kmdb-site-footer--detailed .kmdb-site-footer__links {
  --footer-links-gap: 18px;

  width: auto;
  justify-content: flex-start;
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 599px) {
  .kmdb-site-footer--detailed .kmdb-site-footer__links {
    --footer-links-gap: 12px;
  }
}

.kmdb-site-footer--detailed .kmdb-site-footer__copyright {
  align-self: auto;
  margin: 0;
}

@media (max-width: 1439px) {
  .kmdb-site-footer--detailed .kmdb-site-footer__copyright {
    font-size: var(--typo-body-2-size);
  }
}

/* =============================================================================
   전역 레이아웃 — 페이지 본문
   공통 본문 여백과 하단 밀착 변형
   ============================================================================= */
.kmdb-page-main {
  padding: 40px var(--layout-gutter) 80px;
}

.kmdb-page-main--privacy {
  padding-inline: 0;
  padding-bottom: 0;
}

.kmdb-page-main--flush-bottom {
  padding-bottom: 0;
}

/* 사이트맵 */
.kmdb-sitemap {
  letter-spacing: var(--letter-spacing-base);
}

.kmdb-sitemap__introduction {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kmdb-sitemap__introduction p {
  margin: 0;
  color: var(--color-text-02);
  font-size: var(--typo-body-5-size);
  line-height: var(--line-height-base);
}

.kmdb-sitemap__introduction h1 {
  margin: 0;
}

.kmdb-sitemap__guidance {
  width: var(--layout-safe-width);
  margin: 0 auto;
  padding-block: 20px;
  font-size: var(--typo-headline-3-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

@media (max-width: 1439px) {
  .kmdb-sitemap__guidance {
    padding-block: 32px 0;
  }
}

@media (max-width: 599px) {
  .kmdb-sitemap__guidance {
    padding-top: 24px;
  }
}

.kmdb-sitemap__categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 16px;
  width: var(--layout-safe-width);
  margin-inline: auto;
  padding-block: 20px 100px;
}

@media (max-width: 1439px) {
  .kmdb-sitemap__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
    padding-block: 32px 64px;
  }
}

@media (max-width: 599px) {
  .kmdb-sitemap__categories {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 24px;
  }
}

.kmdb-sitemap__category {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-divider-02);
  border-radius: 16px;
  background: var(--color-surface-white);
}

.kmdb-sitemap__category-title {
  margin: 0;
  padding: 14px 16px;
  background: var(--color-text-01);
  color: var(--color-surface-white);
  font-size: var(--typo-headline-2-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: center;
}

.kmdb-sitemap__menus {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kmdb-sitemap__menu {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--color-divider-02);
  color: var(--color-text-01);
  font-size: var(--typo-headline-2-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.kmdb-sitemap__category:last-child .kmdb-sitemap__menus > li:last-child > .kmdb-sitemap__menu {
  border-bottom: 0;
}

.kmdb-sitemap__menu:focus-visible {
  outline-offset: -3px;
}

.kmdb-sitemap__submenus {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kmdb-sitemap__submenu {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 16px;
  background: var(--color-surface-alt);
  color: var(--color-text-01);
  font-size: var(--typo-body-4-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.kmdb-sitemap__submenu:focus-visible {
  outline-offset: -3px;
}

.kmdb-sitemap__category img {
  display: block;
  flex: 0 0 auto;
}

/* =============================================================================
   페이지 전환
   네이티브 전환과 미지원 브라우저 대체 애니메이션
   ============================================================================= */

@view-transition {
  navigation: auto;
}

::view-transition-group(kmdb-header),
::view-transition-group(kmdb-footer) {
  animation: none;
}

::view-transition-old(kmdb-header),
::view-transition-old(kmdb-footer) {
  animation: none;
  opacity: 0;
  mix-blend-mode: normal;
}

::view-transition-new(kmdb-header),
::view-transition-new(kmdb-footer) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}

/*
  가변 크기의 main 대신 뷰포트 크기가 고정된 root를 전환하여
  페이지 높이와 스크롤 위치 차이로 인한 크기·위치 보간을 막는다.
  나가는 화면과 들어오는 화면은 같은 길이·같은 linear 곡선으로 교차한다.
  길이나 곡선이 다르면 두 레이어의 불투명도 합이 중간에 1보다 작아져 한 번 꺼진 듯 보인다.
*/
::view-transition-old(root) {
  animation: kmdb-page-fade-out 210ms linear both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: kmdb-page-fade-in 210ms linear both;
  mix-blend-mode: normal;
}

@keyframes kmdb-page-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes kmdb-page-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@supports not (view-transition-name: root) {
  html[data-kmdb-page-transition="enter"] main#main-content {
    opacity: 0;
    animation: kmdb-page-fade-in 220ms ease-in both;
  }

  body.kmdb-page-leaving main#main-content {
    animation: kmdb-page-fade-out 180ms ease-out both;
  }

  body.kmdb-page-leaving {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  ::view-transition-new(root) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  html[data-kmdb-page-transition="enter"] main#main-content {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  body.kmdb-page-leaving main#main-content {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

/* =============================================================================
   기본 컴포넌트 — 버튼
   크기·의미·상태 변형과 버튼 그룹
   ============================================================================= */
:root {
  --button-radius: 4px;
  --button-primary-fill: #222222;
  --button-primary-hover: #383b3e;
  --button-secondary-fill: #e7ebee;
  --button-outline-border: #dbdee1;
  --button-outline-pressed: #dbdee1;
  --button-gap: 8px;
  --button-xlarge-height: 56px;
  --button-large-height: 48px;
  --button-medium-height: 32px;
  --button-small-height: 24px;
  --button-xlarge-padding-x: 24px;
  --button-large-padding-x: 20px;
  --button-medium-padding-x: 8px;
  --button-small-padding-x: 12px;
  --button-xlarge-min-width: 100px;
  --button-large-min-width: 79px;
  --button-medium-min-width: 60px;
  --button-small-min-width: 50px;
  --button-group-gap-horizontal: 8px;
  --button-group-gap-vertical: 12px;
  --button-group-padding-inline: 16px;

  /* ============================================================================= 기본 컴포넌트 — 체크박스 크기·모양·선택·비활성 상태 ============================================================================= */
  --checkbox-gap: 8px;
  --checkbox-small-size: 20px;
  --checkbox-large-size: 24px;
  --checkbox-border-radius: 4px;
  --checkbox-border-color: var(--color-line);
  --checkbox-selected-color: var(--color-surface-black);
  --checkbox-disabled-color: #9aa1ad;
  --checkbox-disabled-bg: var(--color-disabled-bg);

  /* ============================================================================= 기본 컴포넌트 — 칩 크기·모양·선택 상태와 칩 목록 ============================================================================= */
  --chip-gap: 6px;
  --chip-small-height: 26px;
  --chip-medium-height: 37px;
  --chip-large-height: 44px;
  --chip-small-padding-x: 12px;
  --chip-medium-padding-x: 16px;
  --chip-large-padding-x: 18px;
  --chip-square-radius: 4px;
  --chip-border-color: var(--color-line);

  /* ============================================================================= 기본 컴포넌트 — 다이얼로그 배경막·본문·액션 배치와 상태 안내 변형 ============================================================================= */
  --dialog-width: 310px;
  --dialog-padding-x: 16px;
  --dialog-padding-top: 20px;
  --dialog-padding-bottom: 16px;
  --dialog-title-gap: 10px;
  --dialog-action-gap: 8px;
  --dialog-content-action-gap: 24px;
  --dialog-radius: 8px;
  --dialog-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  --dialog-overlay: rgba(0, 0, 0, 0.45);

  /* ============================================================================= 기본 컴포넌트 — 페이지네이션 페이지 링크·이동 버튼·선택·비활성 상태 ============================================================================= */
  --pagination-item-size: 40px;
  --pagination-nav-width: 60px;
  --pagination-radius: 10px;
  --pagination-border-color: var(--color-line);

  /* ============================================================================= 기본 컴포넌트 — 라디오 단일 선택·크기·카드형 선택지 ============================================================================= */
  --radio-gap: 8px;
  --radio-small-size: 20px;
  --radio-large-size: 24px;
  --radio-card-height: 56px;
  --radio-card-padding-x: 16px;
  --radio-border-color: var(--color-line);
  --radio-selected-color: var(--color-surface-black);
  --radio-disabled-color: #9aa1ad;

  /* ============================================================================= 기본 컴포넌트 — 탭과 세그먼트 탭 너비 변형과 분할 선택 제어 ============================================================================= */
  --tab-height: 36px;
  --tab-block-width: 76px;
  --tab-full-width: 94px;
  --tab-padding-x: 16px;
  --tab-border-color: var(--color-line);
  --segment-control-height: 51px;
  --segment-control-padding: 4px;
  --segment-control-radius: 6px;

  /* ============================================================================= 기본 컴포넌트 — 텍스트필드 입력·텍스트영역·도움말과 검증 상태 ============================================================================= */
  --textfield-width: 343px;
  --textfield-padding-x: 16px;
  --textfield-label-gap: 6px;
  --textfield-helper-gap: 2px;
  --textfield-large-height: 56px;
  --textfield-small-height: 48px;
  --textfield-textarea-large-min-height: 100px;
  --textfield-textarea-small-min-height: 90px;
  --textfield-radius: 4px;
  --textfield-border-color: var(--color-line);
  --textfield-selected-color: var(--color-primary);
  --textfield-success-color: #14804a;
  --textfield-error-color: var(--color-danger);

  /* ============================================================================= 기본 컴포넌트 — 토스트 알림 유형·등장·퇴장 상태 ============================================================================= */
  --toast-width: 343px;
  --toast-min-height: 41px;
  --toast-padding-x: 10px;
  --toast-padding-y: 10px;
  --toast-gap: 6px;
  --toast-radius: 8px;
  --toast-info-color: #0fb356;
  --toast-success-color: #1282d9;
  --toast-error-color: var(--color-danger);
  --toast-info-surface: #e3fdee;
  --toast-success-surface: #e3f1fd;
  --toast-error-surface: #ffe5e8;
}

.kmdb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-width: var(--button-large-min-width);
  min-height: var(--button-large-height);
  padding: 0 var(--button-large-padding-x);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  color: var(--color-text);
  cursor: pointer;
  background: transparent;
  font-size: var(--typo-body-4-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  letter-spacing: var(--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) {
  .kmdb-btn {
    max-width: 100%;
  }
}

.kmdb-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-btn.kmdb-is-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-btn--xlarge {
  min-width: var(--button-xlarge-min-width);
  min-height: var(--button-xlarge-height);
  padding-right: var(--button-xlarge-padding-x);
  padding-left: var(--button-xlarge-padding-x);
  font-size: var(--typo-body-4-size);
}

.kmdb-btn--large {
  min-width: var(--button-large-min-width);
  min-height: var(--button-large-height);
  padding-right: var(--button-large-padding-x);
  padding-left: var(--button-large-padding-x);
  font-size: var(--typo-body-4-size);
}

@media (max-width: 1439px) {
  .kmdb-btn--responsive-medium {
    min-width: var(--button-medium-min-width);
    min-height: var(--button-medium-height);
    padding-right: var(--button-medium-padding-x);
    padding-left: var(--button-medium-padding-x);
    font-size: var(--typo-body-2-size);
  }
}

.kmdb-btn--medium {
  min-width: var(--button-medium-min-width);
  height: var(--button-medium-height);
  min-height: var(--button-medium-height);
  padding-right: var(--button-medium-padding-x);
  padding-left: var(--button-medium-padding-x);
  border-radius: 8px;
  font-size: var(--typo-body-2-size);
}

.kmdb-btn--retry {
  display: flex;
  position: static;
  flex: 0 0 auto;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  height: auto;
  margin: 12px auto 0;
  padding-top: 6px;
  padding-bottom: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.kmdb-btn--retry[hidden] {
  display: none;
}

.kmdb-request-feedback:has(.kmdb-btn--retry:not([hidden])) {
  text-align: center;
}

.kmdb-request-feedback:has(~ .kmdb-btn--retry:not([hidden])) {
  text-align: center;
}

.kmdb-btn--small {
  min-width: var(--button-small-min-width);
  min-height: var(--button-small-height);
  padding-right: var(--button-small-padding-x);
  padding-left: var(--button-small-padding-x);
  font-size: var(--typo-body-2-size);
}

.kmdb-btn--primary {
  color: #ffffff;
  background: var(--button-primary-fill);
  border-color: var(--button-primary-fill);
}

.kmdb-btn--primary:hover {
  background: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
}

.kmdb-btn--primary:active {
  background: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
}

.kmdb-btn--primary.kmdb-is-pressed {
  background: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
}

.kmdb-btn--primary:disabled {
  color: #ffffff;
  background: var(--button-primary-fill);
  border-color: var(--button-primary-fill);
  opacity: 0.4;
}

.kmdb-btn--primary[aria-disabled="true"] {
  color: #ffffff;
  background: var(--button-primary-fill);
  border-color: var(--button-primary-fill);
  opacity: 0.4;
}

.kmdb-btn--primary.kmdb-is-disabled {
  color: #ffffff;
  background: var(--button-primary-fill);
  border-color: var(--button-primary-fill);
  opacity: 0.4;
}

.kmdb-btn--secondary {
  color: #ffffff;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.kmdb-btn--secondary:hover {
  background: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.kmdb-btn--secondary:active {
  background: #17191d;
  border-color: #17191d;
}

.kmdb-btn--secondary.kmdb-is-pressed {
  background: #17191d;
  border-color: #17191d;
}

.kmdb-btn--secondary:disabled {
  color: #7d8490;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
}

.kmdb-btn--secondary[aria-disabled="true"] {
  color: #7d8490;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
}

.kmdb-btn--secondary.kmdb-is-disabled {
  color: #7d8490;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
}

.kmdb-btn--primary-line {
  color: var(--color-primary);
  background: var(--color-surface);
  border-color: var(--color-primary);
}

.kmdb-btn--primary-line:hover {
  color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  background: #fff5f5;
}

.kmdb-btn--primary-line:active {
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  background: #ffe9ea;
}

.kmdb-btn--primary-line.kmdb-is-pressed {
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  background: #ffe9ea;
}

.kmdb-btn--primary-line:disabled {
  color: #9aa1ad;
  background: var(--color-surface);
  border-color: var(--color-disabled);
}

.kmdb-btn--primary-line[aria-disabled="true"] {
  color: #9aa1ad;
  background: var(--color-surface);
  border-color: var(--color-disabled);
}

.kmdb-btn--primary-line.kmdb-is-disabled {
  color: #9aa1ad;
  background: var(--color-surface);
  border-color: var(--color-disabled);
}

.kmdb-btn--destructive-primary {
  color: #ffffff;
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.kmdb-btn--destructive-primary:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.kmdb-btn--destructive-primary:active {
  background: #912018;
  border-color: #912018;
}

.kmdb-btn--destructive-primary.kmdb-is-pressed {
  background: #912018;
  border-color: #912018;
}

.kmdb-btn--destructive-primary:disabled {
  color: #ffffff;
  background: var(--color-disabled);
  border-color: var(--color-disabled);
}

.kmdb-btn--destructive-primary[aria-disabled="true"] {
  color: #ffffff;
  background: var(--color-disabled);
  border-color: var(--color-disabled);
}

.kmdb-btn--destructive-primary.kmdb-is-disabled {
  color: #ffffff;
  background: var(--color-disabled);
  border-color: var(--color-disabled);
}

.kmdb-btn--destructive-secondary {
  color: var(--color-danger);
  background: #fff5f5;
  border-color: #fecaca;
}

.kmdb-btn--destructive-secondary:hover {
  color: var(--color-danger-hover);
  background: #fee4e2;
  border-color: #fda29b;
}

.kmdb-btn--destructive-secondary:active {
  color: #912018;
  background: #fecdca;
  border-color: #f97066;
}

.kmdb-btn--destructive-secondary.kmdb-is-pressed {
  color: #912018;
  background: #fecdca;
  border-color: #f97066;
}

.kmdb-btn--destructive-secondary:disabled {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
}

.kmdb-btn--destructive-secondary[aria-disabled="true"] {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
}

.kmdb-btn--destructive-secondary.kmdb-is-disabled {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
}

.kmdb-btn--outline {
  color: var(--color-text);
  background: #ffffff;
  border-color: var(--button-outline-border);
}

.kmdb-btn--outline:hover {
  border-color: var(--button-secondary-fill);
  background: var(--button-secondary-fill);
}

.kmdb-btn--outline:active {
  background: var(--button-outline-pressed);
  border-color: var(--button-outline-pressed);
}

.kmdb-btn--outline.kmdb-is-pressed {
  background: var(--button-outline-pressed);
  border-color: var(--button-outline-pressed);
}

.kmdb-btn--outline:disabled {
  color: var(--color-text);
  background: #ffffff;
  border-color: var(--button-outline-border);
  opacity: 0.4;
}

.kmdb-btn--outline[aria-disabled="true"] {
  color: var(--color-text);
  background: #ffffff;
  border-color: var(--button-outline-border);
  opacity: 0.4;
}

.kmdb-btn--outline.kmdb-is-disabled {
  color: var(--color-text);
  background: #ffffff;
  border-color: var(--button-outline-border);
  opacity: 0.4;
}

.kmdb-btn--text {
  min-width: auto;
  color: var(--button-text-color, var(--color-primary));
  background: transparent;
  border-color: transparent;
}

.kmdb-btn--text:hover {
  color: var(--color-primary-hover);
  background: #fff5f5;
}

.kmdb-btn--text:active {
  color: var(--color-primary-dark);
}

.kmdb-btn--text.kmdb-is-pressed {
  color: var(--color-primary-dark);
}

.kmdb-btn--text:disabled {
  color: #9aa1ad;
  background: transparent;
}

.kmdb-btn--text[aria-disabled="true"] {
  color: #9aa1ad;
  background: transparent;
}

.kmdb-btn--text.kmdb-is-disabled {
  color: #9aa1ad;
  background: transparent;
}

.kmdb-btn-group {
  display: flex;
  gap: var(--button-group-gap-horizontal);
  align-items: center;
}

.kmdb-btn-group .kmdb-btn {
  flex: 1 1 0;
}

.kmdb-btn-group--vertical {
  flex-direction: column;
  gap: var(--button-group-gap-vertical);
}

.kmdb-btn-group--vertical .kmdb-btn {
  width: 100%;
}

.kmdb-btn-group--padded {
  padding-right: var(--button-group-padding-inline);
  padding-left: var(--button-group-padding-inline);
}

.kmdb-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--checkbox-gap);
  color: var(--color-text);
  font-size: var(--typo-body-4-size);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  cursor: pointer;
}

@media (max-width: 599px) {
  .kmdb-checkbox {
    min-height: 44px;
  }
}

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

.kmdb-checkbox__control {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--checkbox-large-size);
  height: var(--checkbox-large-size);
  place-items: center;
  border: var(--checkbox-border-width, 1.5px) solid var(--checkbox-border-color);
  border-radius: var(--checkbox-border-radius);
  background: var(--color-surface);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.kmdb-checkbox__control::after {
  width: 10px;
  height: 6px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  content: "";
  opacity: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.kmdb-checkbox__input:checked + .kmdb-checkbox__control {
  border-color: var(--checkbox-selected-color);
  background: var(--checkbox-selected-color);
}

.kmdb-checkbox__input:checked + .kmdb-checkbox__control::after {
  opacity: 1;
}

.kmdb-checkbox__input:focus-visible + .kmdb-checkbox__control {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 24%, transparent);
}

.kmdb-checkbox__input:disabled + .kmdb-checkbox__control {
  border-color: var(--color-disabled);
  background: var(--checkbox-disabled-bg);
}

.kmdb-checkbox.kmdb-is-disabled .kmdb-checkbox__control {
  border-color: var(--color-disabled);
  background: var(--checkbox-disabled-bg);
}

.kmdb-checkbox__input:disabled:checked + .kmdb-checkbox__control {
  border-color: var(--color-disabled);
  background: var(--color-disabled);
}

.kmdb-checkbox.kmdb-is-disabled
  .kmdb-checkbox__input:checked
  + .kmdb-checkbox__control {
  border-color: var(--color-disabled);
  background: var(--color-disabled);
}

.kmdb-checkbox__input:disabled ~ .kmdb-checkbox__label {
  color: var(--checkbox-disabled-color);
  cursor: not-allowed;
}

.kmdb-checkbox.kmdb-is-disabled {
  color: var(--checkbox-disabled-color);
  cursor: not-allowed;
}

.kmdb-checkbox--small {
  --checkbox-check-size: var(--checkbox-small-size);
  font-size: var(--typo-body-3-size);
}

.kmdb-checkbox--small .kmdb-checkbox__control {
  width: var(--checkbox-small-size);
  height: var(--checkbox-small-size);
}

.kmdb-checkbox--small .kmdb-checkbox__control::after {
  width: 8px;
  height: 5px;
}

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

.kmdb-checkbox--compact {
  --checkbox-check-size: var(--checkbox-small-size);
  font-size: var(--typo-body-4-size);
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-checkbox--compact .kmdb-checkbox__control {
  width: var(--checkbox-small-size);
  height: var(--checkbox-small-size);
}

.kmdb-checkbox--round .kmdb-checkbox__control {
  border-radius: 50%;
}

.kmdb-checkbox--check-mark .kmdb-checkbox__control {
  border-radius: var(--checkbox-border-radius);
}

.kmdb-checkbox--visible-check {
  --checkbox-selected-color: var(--color-surface-black);
}

.kmdb-checkbox--visible-check .kmdb-checkbox__control {
  border-width: 1px;
}

.kmdb-checkbox--visible-check .kmdb-checkbox__control::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--checkbox-check-size, var(--checkbox-large-size));
  height: var(--checkbox-check-size, var(--checkbox-large-size));
  border: 0;
  background: var(--color-icon-gray);
  mask: url("/icons/action/check.svg") center/100% 100% no-repeat;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.kmdb-checkbox--visible-check
  .kmdb-checkbox__input:checked
  + .kmdb-checkbox__control::after {
  background: var(--color-surface-white);
}

.kmdb-checkbox--media-overlay .kmdb-checkbox__input:checked + .kmdb-checkbox__control {
  border-color: var(--color-surface-white);
}

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

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

.kmdb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chip-gap);
  min-height: var(--chip-medium-height);
  padding: 0 var(--chip-medium-padding-x);
  border: 1px solid var(--chip-border-color);
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--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;
}

@media (max-width: 599px) {
  .kmdb-chip {
    min-height: 44px;
  }
}

.kmdb-chip:hover {
  border-color: var(--color-text);
}

.kmdb-chip:disabled {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-chip[aria-disabled="true"] {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-chip.kmdb-is-disabled {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-chip--small {
  min-height: var(--chip-small-height);
  padding-right: var(--chip-small-padding-x);
  padding-left: var(--chip-small-padding-x);
  font-size: var(--typo-body-2-size);
}

.kmdb-chip--medium {
  min-height: var(--chip-medium-height);
  padding-right: var(--chip-medium-padding-x);
  padding-left: var(--chip-medium-padding-x);
  font-size: var(--typo-body-3-size);
}

.kmdb-chip--large {
  min-height: var(--chip-large-height);
  padding-right: var(--chip-large-padding-x);
  padding-left: var(--chip-large-padding-x);
  font-size: var(--typo-body-4-size);
}

.kmdb-chip--choice {
  gap: 4px;
  min-height: 40px;
  padding-right: 16px;
  padding-left: 16px;
  border-color: #dbdee1;
  border-radius: 1000px;
  color: #515458;
  background: #ffffff;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-chip--circle {
  border-radius: 999px;
}

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

.kmdb-chip--line {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--chip-border-color);
}

.kmdb-chip--fill {
  color: var(--color-text);
  background: var(--color-surface-alt);
  border-color: var(--color-surface-alt);
}

.kmdb-chip[aria-pressed="true"] {
  color: #ffffff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.kmdb-chip.kmdb-is-selected {
  color: #ffffff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.kmdb-chip--line[aria-pressed="true"] {
  color: var(--color-primary);
  background: #fff5f5;
  border-color: var(--color-primary);
}

.kmdb-chip--line.kmdb-is-selected {
  color: var(--color-primary);
  background: #fff5f5;
  border-color: var(--color-primary);
}

.kmdb-chip.kmdb-chip--choice[aria-pressed="true"] {
  border-color: #222222;
  color: #222222;
  background: #ffffff;
  font-weight: var(--font-weight-semibold);
}

.kmdb-chip.kmdb-chip--choice[aria-pressed="true"]::before {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  mask: url("/icons/action/check.svg") center/20px 20px no-repeat;
  -webkit-mask: url("/icons/action/check.svg") center/20px 20px no-repeat;
  content: "";
}

.kmdb-chip__remove {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  margin-right: -4px;
  border: 0;
  border-radius: 50%;
  color: currentColor;
  background: transparent;
  font: inherit;
  line-height: 1;
}

.kmdb-chip-list {
  display: flex;
  gap: var(--chip-gap);
  align-items: center;
  padding-right: 16px;
  padding-left: 16px;
}

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

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

.kmdb-chip-list--choices {
  gap: 8px;
  padding-right: 0;
  padding-left: 0;
}

.kmdb-counter-chip {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--color-border-disabled);
  border-radius: 999px;
  background: var(--color-surface-white);
  color: var(--color-text-02);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-figma-source);
  line-height: 1.5;
}

.kmdb-counter-chip:focus-visible {
  outline: 0;
}

.kmdb-counter-chip:focus-visible::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 3px solid var(--color-focus);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

@media (max-width: 599px) {
  .kmdb-counter-chip {
    min-height: 37px;
    gap: 2px;
    padding: 0 12px;
    font-size: 14px;
  }
}

.kmdb-counter-chip__count {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 32px;
  background: var(--color-surface-disabled);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .kmdb-counter-chip__count {
    min-width: 20px;
    height: 20px;
    padding: 2.5px 6.667px;
    font-size: 10px;
  }
}

.kmdb-counter-chip--small {
  min-height: 40px;
  gap: 2px;
  padding: 0 12px;
  font-size: 14px;
}
.kmdb-counter-chip--small .kmdb-counter-chip__count {
  min-width: 20px;
  height: 20px;
  padding: 2.5px 6.667px;
  font-size: 10px;
}

.kmdb-counter-chip__count[hidden] {
  display: none;
}

.kmdb-skeleton .kmdb-counter-chip {
  min-width: 72px;
}

.kmdb-counter-chip.kmdb-is-active {
  border-color: var(--color-icon-default);
  color: var(--color-text-01);
  font-weight: var(--font-weight-semibold);
}

/*
 * 건수 배지를 가진 chip은 활성 상태에 체크 아이콘을 쓰지 않는다. 아래 규칙이 배지를
 * 검정 배경과 흰 글자로 바꿔 테두리·굵기와 독립된 시각 단서를 이미 준다.
 */
.kmdb-counter-chip.kmdb-is-active .kmdb-counter-chip__count {
  background: var(--color-gray-variation-900, #222222);
  color: var(--color-text-white, #ffffff);
}

.kmdb-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--dialog-overlay);
}

@media (max-width: 599px) {
  .kmdb-dialog-backdrop {
    padding: 16px;
  }
}

.kmdb-dialog-backdrop--auth {
  --dialog-overlay: rgba(0, 0, 0, 0.5);
}

.kmdb-dialog {
  width: min(100%, var(--dialog-width));
  padding: var(--dialog-padding-top) var(--dialog-padding-x)
    var(--dialog-padding-bottom);
  border: 0;
  border-radius: var(--dialog-radius);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--dialog-shadow);
}

.kmdb-dialog::backdrop {
  background: var(--dialog-overlay);
}

.kmdb-dialog__title {
  margin: 0;
  font-size: var(--typo-headline-2-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}

.kmdb-dialog__description {
  margin: var(--dialog-title-gap) 0 0;
  color: var(--color-muted);
  font-size: var(--typo-body-3-size);
  line-height: var(--line-height-base);
}

.kmdb-dialog__actions {
  display: flex;
  gap: var(--dialog-action-gap);
  margin-top: var(--dialog-content-action-gap);
}

.kmdb-dialog__actions .kmdb-btn {
  flex: 1 1 0;
}

.kmdb-dialog--vertical .kmdb-dialog__actions {
  flex-direction: column;
  gap: 12px;
}

.kmdb-dialog__actions--vertical {
  flex-direction: column;
  gap: 12px;
}

.kmdb-dialog--vertical .kmdb-dialog__actions .kmdb-btn {
  width: 100%;
}

.kmdb-dialog__actions--vertical .kmdb-btn {
  width: 100%;
}

.kmdb-dialog--horizontal .kmdb-dialog__actions {
  flex-direction: row;
}

.kmdb-dialog__actions--horizontal {
  flex-direction: row;
}

.kmdb-dialog--status {
  position: relative;
  width: 360px;
  max-width: none;
  padding: 20px 16px 16px;
  border-radius: 16px;
  background: var(--color-surface-white, #ffffff);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  text-align: center;
}

@media (max-width: 599px) {
  .kmdb-dialog--status {
    width: 100%;
    max-width: 360px;
  }
}

.kmdb-dialog--status .kmdb-dialog__title {
  color: var(--color-text-01, #222222);
  font-size: 20px;
  line-height: 1.5;
}

.kmdb-dialog--status .kmdb-dialog__description {
  color: var(--color-text-02, #515458);
  font-size: 16px;
  line-height: 1.5;
}

.kmdb-dialog--status .kmdb-dialog__description strong {
  font-weight: var(--font-weight-semibold);
}

.kmdb-dialog--status .kmdb-dialog__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  background: url("/icons/action/delete.svg") no-repeat center / 24px 24px;
  cursor: pointer;
}

.kmdb-dialog--auth {
  --button-radius: 10px;
  --button-primary-fill: #262831;
  --button-secondary-fill: #ededed;
  --color-text-01: #262831;
  --color-text-02: #58585a;
  --letter-spacing-base: -0.6px;
  width: min(360px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  letter-spacing: var(--letter-spacing-base);
}

.kmdb-dialog--auth .kmdb-btn {
  min-width: 0;
  padding: 0 12px;
  white-space: normal;
}

.kmdb-dialog--auth .kmdb-btn--secondary {
  color: var(--color-text-01);
  background: var(--button-secondary-fill);
  border-color: var(--button-secondary-fill);
}

.kmdb-dialog--auth .kmdb-btn--secondary:hover {
  background: var(--button-outline-pressed);
  border-color: var(--button-outline-pressed);
}

.kmdb-dialog--auth .kmdb-btn--secondary:active {
  background: var(--button-outline-pressed);
  border-color: var(--button-outline-pressed);
}

.kmdb-dialog--auth .kmdb-dialog__close {
  top: 10px;
  right: 7px;
  background-image: url("/icons/auth/dialog-close.svg");
  background-size: auto;
}

.kmdb-dialog__notice {
  margin-top: 16px;
  padding: 8px 12px;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  color: var(--color-text-01);
  background: var(--color-surface-white);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.kmdb-dialog__notice ul {
  margin: 0;
  padding-left: 21px;
  list-style: disc;
}

.kmdb-dialog--auth-verification {
  width: min(360px, 100%);
}

@media (max-width: 1439px) {
  .kmdb-dialog--auth-verification {
    width: min(310px, 100%);
  }
}

@media (max-width: 1439px) {
  .kmdb-dialog--auth-verification .kmdb-dialog__actions {
    flex-direction: column;
  }
}

@media (max-width: 1439px) {
  .kmdb-dialog--auth-verification .kmdb-btn {
    flex: 0 0 auto;
    width: 100%;
  }
}

.kmdb-dialog--access-notice {
  --button-radius: 10px;
  position: fixed;
  width: min(360px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

.kmdb-dialog--access-notice .kmdb-btn--secondary {
  color: var(--color-text-01);
  background: var(--button-secondary-fill);
  border-color: var(--button-secondary-fill);
}

.kmdb-dialog--access-notice .kmdb-btn--secondary:hover {
  background: var(--button-outline-pressed);
  border-color: var(--button-outline-pressed);
}

.kmdb-dialog--access-notice .kmdb-btn--secondary:active {
  background: var(--button-outline-pressed);
  border-color: var(--button-outline-pressed);
}

.kmdb-dialog--message {
  --button-radius: 10px;
  --button-primary-fill: #262831;
  --button-secondary-fill: #ededed;
  --color-text-01: #262831;
  --color-text-02: #58585a;
  --letter-spacing-base: -0.6px;
  position: fixed;
  width: min(360px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.kmdb-dialog--message .kmdb-dialog__description {
  white-space: pre-line;
}

.kmdb-dialog--message .kmdb-btn {
  min-width: 0;
  padding: 0 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.kmdb-dialog--message .kmdb-btn--secondary {
  color: var(--color-text-01);
  background: var(--button-secondary-fill);
  border-color: var(--button-secondary-fill);
}

.kmdb-dialog__input {
  margin-top: 16px;
  text-align: left;
}

.kmdb-dialog--large-selection {
  width: 670px;
  max-width: calc(100vw - 32px);
  height: 566px;
  padding: 26px 20px;
  border-radius: 20px;
  letter-spacing: var(--letter-spacing-figma-source);
}

@media (max-width: 1439px) {
  .kmdb-dialog--large-selection {
    width: 480px;
    height: auto;
  }
}

@media (max-width: 599px) {
  .kmdb-dialog--large-selection {
    width: 100%;
    max-width: calc(100vw - 32px);
    height: auto;
    margin: 0;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: var(--dialog-mobile-radius, 20px);
  }
}

.kmdb-dialog--large-selection .kmdb-dialog__title {
  color: #222222;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-dialog--large-selection .kmdb-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kmdb-dialog--large-selection .kmdb-dialog__close {
  position: relative;
  display: inline-grid;
  width: 44px;
  height: 44px;
  margin: -10px;
  padding: 0;
  place-items: center;
  border: 0;
  background: url("/icons/action/delete.svg") no-repeat center / 24px 24px;
}

.kmdb-dialog--large-selection .kmdb-dialog__search {
  display: grid;
  grid-template-columns: 518px 100px;
  gap: 12px;
}

@media (max-width: 1439px) {
  .kmdb-dialog--large-selection .kmdb-dialog__search {
    grid-template-columns: minmax(0, 1fr) 100px;
  }
}

.kmdb-dialog--large-selection .kmdb-dialog__search .kmdb-textfield__control {
  height: 56px;
  padding-right: 16px;
  padding-left: 16px;
  border-color: #e7ebee;
  border-radius: 16px;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-figma-source);
}

@media (max-width: 1439px) {
  .kmdb-dialog--large-selection .kmdb-dialog__search .kmdb-textfield__control {
    height: 48px;
    border-radius: 12px;
  }
}

.kmdb-dialog--large-selection
  .kmdb-dialog__search
  .kmdb-textfield__control::placeholder {
  color: #838689;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-dialog--large-selection .kmdb-dialog__search button {
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: #222222;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-figma-source);
}

@media (max-width: 1439px) {
  .kmdb-dialog--large-selection .kmdb-dialog__search button {
    height: 48px;
  }
}

.kmdb-dialog--large-selection .kmdb-dialog__selection-viewport {
  width: 630px;
  height: 330px;
  overflow-y: auto;
  scrollbar-color: #000000 #e7ebee;
  scrollbar-width: thin;
}

@media (max-width: 1439px) {
  .kmdb-dialog--large-selection .kmdb-dialog__selection-viewport {
    width: 100%;
  }
}

.kmdb-dialog--large-selection
  .kmdb-dialog__selection-viewport::-webkit-scrollbar {
  width: 4px;
}

.kmdb-dialog--large-selection
  .kmdb-dialog__selection-viewport::-webkit-scrollbar-track {
  border-radius: 6px;
  background: #e7ebee;
}

.kmdb-dialog--large-selection
  .kmdb-dialog__selection-viewport::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #000000;
}

.kmdb-dialog--large-selection .kmdb-dialog__selection-option {
  display: flex;
  height: 44px;
  min-height: 44px;
}

.kmdb-dialog--large-selection .kmdb-dialog__selection-option[hidden] {
  display: none;
}

.kmdb-dialog--large-selection .kmdb-dialog__selection-empty {
  display: grid;
  height: 100%;
  margin: 0;
  place-items: center;
  color: #222222;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-dialog--large-selection .kmdb-dialog__selection-empty[hidden] {
  display: none;
}

.kmdb-dialog--large-selection .kmdb-dialog__footer {
  width: 630px;
}

@media (max-width: 1439px) {
  .kmdb-dialog--large-selection .kmdb-dialog__footer {
    width: 100%;
  }
}

.kmdb-dialog--large-selection .kmdb-dialog__apply {
  width: 630px;
  height: 56px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: #222222;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-figma-source);
}

@media (max-width: 1439px) {
  .kmdb-dialog--large-selection .kmdb-dialog__apply {
    width: 100%;
  }
}

.kmdb-dialog--large-selection .kmdb-dialog__apply:disabled {
  opacity: 0.4;
}

.kmdb-dialog--country-selection {
  --dialog-overlay: rgba(0, 0, 0, 0.5);

  position: fixed;
  inset: 50dvh auto auto 50vw;
  width: 670px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0;
  padding: 26px 20px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.kmdb-dialog--country-selection[open] {
  display: flex;
  flex-direction: column;
}

.kmdb-dialog--country-selection .kmdb-dialog__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.kmdb-dialog--country-selection .kmdb-dialog__title {
  font-size: var(--typo-headline-3-size);
}

.kmdb-dialog--country-selection .kmdb-dialog__close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: -10px;
  padding: 0;
  border: 0;
  background: url("/icons/action/delete.svg") no-repeat center / 24px 24px;
  cursor: pointer;
}

.kmdb-dialog--country-selection .kmdb-dialog__search {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.kmdb-dialog--country-selection .kmdb-dialog__search .kmdb-textfield__control {
  width: 100%;
  height: 56px;
  padding: 14px 52px 14px 16px;
  border-color: var(--color-surface-gray-subtle, #e7ebee);
  border-radius: 16px;
  font-size: var(--typo-body-4-size);
  font-weight: var(--font-weight-regular);
}

.kmdb-dialog--country-selection .kmdb-dialog__search button {
  position: absolute;
  top: 6px;
  right: 4px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 12px;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.kmdb-dialog--country-selection .kmdb-dialog__search input::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}

.kmdb-dialog--country-selection .kmdb-dialog__search img {
  width: 20px;
  height: 20px;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-viewport {
  flex: 0 1 330px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: auto;
  scrollbar-width: auto;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-viewport::-webkit-scrollbar {
  width: 4px;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-viewport::-webkit-scrollbar-track {
  border-radius: 6px;
  background: #e7ebee;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-viewport::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #000000;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-option {
  display: flex;
  height: 44px;
  min-height: 44px;
  gap: 8px;
  padding: 10px 20px 10px 0;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-option[hidden] {
  display: none;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-empty {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-empty[hidden] {
  display: none;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-empty img {
  width: 28px;
  height: 28px;
}

.kmdb-dialog--country-selection .kmdb-dialog__selection-empty p {
  margin: 0;
  font-size: var(--typo-body-4-size);
  line-height: var(--line-height-base);
}

.kmdb-dialog--country-selection .kmdb-dialog__footer {
  flex: 0 0 auto;
  margin-top: 10px;
}

.kmdb-dialog--country-selection .kmdb-dialog__apply {
  width: 100%;
  height: 61px;
  padding: 16px;
  border-radius: 10px;
  font-size: var(--typo-body-4-size);
  font-weight: var(--font-weight-semibold);
}

.kmdb-dialog--country-selection .kmdb-dialog__apply:disabled {
  color: var(--color-text-white, #ffffff);
  background: var(--button-primary-fill, #222222);
  opacity: 0.4;
}

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

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

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

.kmdb-pagination__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.kmdb-pagination__item {
  display: flex;
}

.kmdb-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pagination-item-size);
  min-height: var(--pagination-item-size);
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--pagination-radius);
  color: var(--color-text-03);
  background: var(--color-surface);
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-base);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.kmdb-pagination__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pagination-item-size);
  min-height: var(--pagination-item-size);
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--pagination-radius);
  color: var(--color-text-03);
  background: var(--color-surface);
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-base);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.kmdb-pagination__link:hover {
  border-color: var(--pagination-border-color);
  background: var(--color-surface-alt);
}

.kmdb-pagination__button:hover {
  border-color: var(--pagination-border-color);
  background: var(--color-surface-alt);
}

.kmdb-pagination__link[aria-current="page"] {
  color: var(--color-text-01);
  background: var(--color-surface-white);
  border-color: var(--color-icon-default);
}

.kmdb-pagination__link.kmdb-is-selected {
  color: var(--color-text-01);
  background: var(--color-surface-white);
  border-color: var(--color-icon-default);
}

.kmdb-pagination__button[aria-current="page"] {
  color: var(--color-text-01);
  background: var(--color-surface-white);
  border-color: var(--color-icon-default);
}

.kmdb-pagination__button.kmdb-is-selected {
  color: var(--color-text-01);
  background: var(--color-surface-white);
  border-color: var(--color-icon-default);
}

.kmdb-pagination__link[aria-disabled="true"] {
  color: #9aa1ad;
  background: var(--color-surface);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-pagination__link.kmdb-is-disabled {
  color: #9aa1ad;
  background: var(--color-surface);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-pagination__button:disabled {
  color: #9aa1ad;
  background: var(--color-surface);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-pagination__button[aria-disabled="true"] {
  color: #9aa1ad;
  background: var(--color-surface);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-pagination__button.kmdb-is-disabled {
  color: #9aa1ad;
  background: var(--color-surface);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.kmdb-pagination__link--nav {
  min-width: var(--pagination-nav-width);
}

.kmdb-pagination__button--nav {
  min-width: var(--pagination-nav-width);
}

.kmdb-pagination__link--icon {
  min-width: var(--pagination-item-size);
}

.kmdb-pagination__button--icon {
  min-width: var(--pagination-item-size);
}

.kmdb-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pagination-item-size);
  min-height: var(--pagination-item-size);
  color: var(--color-muted);
  font-size: var(--typo-body-3-size);
}

.kmdb-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--radio-gap);
  color: var(--color-text);
  font-size: var(--typo-body-4-size);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  cursor: pointer;
}

@media (max-width: 599px) {
  .kmdb-radio {
    min-height: var(--radio-min-height, 44px);
  }
}

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

.kmdb-radio__control {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--radio-large-size);
  height: var(--radio-large-size);
  place-items: center;
  border: 1.5px solid var(--radio-border-color);
  border-radius: 50%;
  background: var(--color-surface);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.kmdb-radio__control::after {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--radio-selected-color);
  content: "";
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.kmdb-radio__input:checked + .kmdb-radio__control {
  border-color: var(--radio-selected-color);
}

.kmdb-radio__input:checked + .kmdb-radio__control::after {
  opacity: 1;
  transform: scale(1);
}

.kmdb-radio__input:focus-visible + .kmdb-radio__control {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 24%, transparent);
}

.kmdb-radio__input:disabled + .kmdb-radio__control {
  border-color: var(--color-disabled);
  background: var(--color-disabled-bg);
}

.kmdb-radio.kmdb-is-disabled .kmdb-radio__control {
  border-color: var(--color-disabled);
  background: var(--color-disabled-bg);
}

.kmdb-radio__input:disabled ~ .kmdb-radio__label {
  color: var(--radio-disabled-color);
  cursor: not-allowed;
}

.kmdb-radio.kmdb-is-disabled {
  color: var(--radio-disabled-color);
  cursor: not-allowed;
}

.kmdb-radio--small {
  font-size: var(--typo-body-3-size);
}

.kmdb-radio--small .kmdb-radio__control {
  width: var(--radio-small-size);
  height: var(--radio-small-size);
}

.kmdb-radio--small .kmdb-radio__control::after {
  width: 8px;
  height: 8px;
}

.kmdb-radio--large {
  font-size: var(--typo-body-4-size);
}

.kmdb-radio--semibold {
  font-weight: var(--font-weight-semibold);
}

.kmdb-radio--regular {
  font-weight: var(--font-weight-regular);
}

.kmdb-radio-group {
  display: grid;
  gap: 0;
}

.kmdb-radio-card {
  display: flex;
  align-items: center;
  min-height: var(--radio-card-height);
  padding: 0 var(--radio-card-padding-x);
  border: 1px solid var(--radio-border-color);
  background: var(--color-surface);
}

.kmdb-radio-card + .kmdb-radio-card {
  border-top: 0;
}

.kmdb-radio-card:has(.kmdb-radio__input:checked) {
  position: relative;
  z-index: 1;
  border-color: var(--radio-selected-color);
  background: #fff5f5;
}

.kmdb-radio-card.kmdb-is-selected {
  position: relative;
  z-index: 1;
  border-color: var(--radio-selected-color);
  background: #fff5f5;
}

.kmdb-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--tab-border-color);
}

@media (max-width: 599px) {
  .kmdb-tabs {
    max-width: 100%;
    overflow-x: auto;
  }
}

.kmdb-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tab-block-width);
  min-height: var(--tab-height);
  padding: 0 var(--tab-padding-x);
  border: 0;
  color: var(--color-muted);
  background: transparent;
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-base);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.kmdb-tab:hover {
  color: var(--color-text);
}

.kmdb-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  content: "";
}

.kmdb-tab[aria-selected="true"] {
  color: var(--color-primary);
}

.kmdb-tab.kmdb-is-selected {
  color: var(--color-primary);
}

.kmdb-tab[aria-selected="true"]::after {
  background: var(--color-primary);
}

.kmdb-tab.kmdb-is-selected::after {
  background: var(--color-primary);
}

.kmdb-tab--block {
  width: var(--tab-block-width);
  padding-right: 0;
  padding-left: 0;
}

.kmdb-tab--flex {
  min-width: auto;
}

.kmdb-tab--full {
  flex: 1 1 0;
  min-width: var(--tab-full-width);
}

.kmdb-segment-control {
  display: inline-flex;
  align-items: center;
  min-height: var(--segment-control-height);
  padding: var(--segment-control-padding);
  border: 1px solid var(--tab-border-color);
  border-radius: var(--segment-control-radius);
  background: var(--color-surface-alt);
}

.kmdb-segment-control__item {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: calc(
    var(--segment-control-height) - var(--segment-control-padding) * 2
  );
  padding: 0 var(--tab-padding-x);
  border: 0;
  border-radius: calc(var(--segment-control-radius) - 2px);
  color: var(--color-muted);
  background: transparent;
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.kmdb-segment-control__item[aria-pressed="true"] {
  color: var(--color-text);
  background: var(--color-surface);
}

.kmdb-segment-control__item.kmdb-is-selected {
  color: var(--color-text);
  background: var(--color-surface);
}

.kmdb-textfield {
  display: grid;
  gap: var(--textfield-label-gap);
  width: 100%;
  max-width: var(--textfield-width);
  color: var(--color-text);
}

.kmdb-textfield__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
}

.kmdb-textfield__required {
  color: var(--textfield-error-color);
}

.kmdb-textfield__control {
  width: 100%;
  min-height: var(--textfield-large-height);
  padding: 0 var(--textfield-padding-x);
  border: 1px solid var(--textfield-border-color);
  border-radius: var(--textfield-radius);
  color: var(--color-text);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--typo-body-4-size);
  letter-spacing: var(--letter-spacing-base);
  outline: 0;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.kmdb-textfield__control::placeholder {
  color: var(--textfield-placeholder-color, #9aa1ad);
}

.kmdb-textfield__control:focus {
  border-color: var(--color-focus);
  outline: 0;
  box-shadow: inset 0 0 0 1.5px var(--color-focus);
}

.kmdb-textfield__control:disabled {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  cursor: not-allowed;
}

.kmdb-textfield__control[readonly] {
  background: var(--color-surface-alt);
}

.kmdb-textfield__helper {
  min-height: 18px;
  margin: var(--textfield-helper-gap) 0 0;
  color: var(--color-muted);
  font-size: var(--typo-body-2-size);
  line-height: var(--line-height-base);
}

.kmdb-textfield--small .kmdb-textfield__control {
  min-height: var(--textfield-small-height);
  font-size: var(--typo-body-3-size);
}

.kmdb-textfield__control--soft {
  min-height: 48px;
  padding-right: 16px;
  padding-left: 16px;
  border-color: #e7ebee;
  border-radius: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-textfield__control--soft::placeholder {
  color: #838689;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: -0.6px;
}

.kmdb-textfield--credential {
  --textfield-border-color: var(--color-border-disabled);
  --textfield-selected-color: var(--color-line-default);

  max-width: none;
  gap: 8px;
}

.kmdb-textfield--credential .kmdb-textfield__label {
  font-weight: var(--font-weight-regular);
}

.kmdb-textfield--credential .kmdb-textfield__control {
  border-radius: 16px;
}

.kmdb-textfield--small textarea.kmdb-textfield__control {
  min-height: var(--textfield-textarea-small-min-height);
}

.kmdb-textfield--selected .kmdb-textfield__control {
  border-color: var(--textfield-selected-color);
}

.kmdb-textfield.kmdb-is-selected .kmdb-textfield__control {
  border-color: var(--textfield-selected-color);
}

.kmdb-textfield--success .kmdb-textfield__control {
  border-color: var(--textfield-success-color);
}

.kmdb-textfield.kmdb-is-success .kmdb-textfield__control {
  border-color: var(--textfield-success-color);
}

.kmdb-textfield--success .kmdb-textfield__helper {
  color: var(--textfield-success-color);
}

.kmdb-textfield.kmdb-is-success .kmdb-textfield__helper {
  color: var(--textfield-success-color);
}

.kmdb-textfield--error .kmdb-textfield__control {
  border-color: var(--textfield-error-color);
}

.kmdb-textfield.kmdb-is-error .kmdb-textfield__control {
  border-color: var(--textfield-error-color);
}

.kmdb-textfield--required .kmdb-textfield__control {
  border-color: var(--textfield-error-color);
}

.kmdb-textfield.kmdb-is-required .kmdb-textfield__control {
  border-color: var(--textfield-error-color);
}

.kmdb-textfield--error .kmdb-textfield__helper {
  color: var(--textfield-error-color);
}

.kmdb-textfield.kmdb-is-error .kmdb-textfield__helper {
  color: var(--textfield-error-color);
}

.kmdb-textfield--required .kmdb-textfield__helper {
  color: var(--textfield-error-color);
}

.kmdb-textfield.kmdb-is-required .kmdb-textfield__helper {
  color: var(--textfield-error-color);
}

.kmdb-textfield--disabled {
  color: var(--color-muted);
}

.kmdb-textfield.kmdb-is-disabled {
  color: var(--color-muted);
}

.kmdb-textfield--disabled .kmdb-textfield__control {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  cursor: not-allowed;
}

.kmdb-textfield.kmdb-is-disabled .kmdb-textfield__control {
  color: #9aa1ad;
  background: var(--color-disabled-bg);
  cursor: not-allowed;
}

.kmdb-textfield--readonly .kmdb-textfield__control {
  background: var(--color-surface-alt);
}

.kmdb-textfield.kmdb-is-readonly .kmdb-textfield__control {
  background: var(--color-surface-alt);
}

textarea.kmdb-textfield__control {
  font-family: var(--textarea-font-family, inherit);
  min-height: var(--textfield-textarea-large-min-height);
  padding-top: 14px;
  padding-bottom: 14px;
  line-height: var(--line-height-base);
  resize: vertical;
}

.kmdb-textfield-group {
  display: grid;
  gap: 12px;
}

.kmdb-toast-region {
  position: fixed;
  top: auto;
  right: 64px;
  bottom: 16px;
  left: auto;
  z-index: 1100;
  display: grid;
  gap: 8px;
  width: min(calc(100vw - 128px), var(--toast-width));
  transform: none;
  pointer-events: none;
}

@media (max-width: 1439px) {
  .kmdb-toast-region {
    right: 16px;
    bottom: 16px;
    width: min(calc(100vw - 32px), var(--toast-width));
  }
}

@media (max-width: 599px) {
  .kmdb-toast-region {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    transform: none;
  }
}

.kmdb-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--toast-gap);
  width: 100%;
  min-height: var(--toast-min-height);
  padding: var(--toast-padding-y) var(--toast-padding-x);
  border-radius: var(--toast-radius);
  color: var(--toast-info-color);
  background: var(--toast-info-surface);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  animation: toast-enter 180ms ease-out;
  pointer-events: auto;
}

.kmdb-toast::before {
  display: inline-grid;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #ffffff;
  border: 0;
  border-radius: 50%;
  background: var(--toast-info-color);
  content: "i";
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.kmdb-toast--information {
  color: var(--toast-info-color);
}

.kmdb-toast--success {
  color: var(--toast-success-color);
  background: var(--toast-success-surface);
}

.kmdb-toast--success::before {
  background: var(--toast-success-color);
  content: "✓";
}

.kmdb-toast--error {
  color: var(--toast-error-color);
  background: var(--toast-error-surface);
}

.kmdb-toast--error::before {
  background: var(--toast-error-color);
  content: "!";
}

.kmdb-toast__message {
  min-width: 0;
}

.kmdb-toast.kmdb-is-leaving {
  animation: toast-leave 140ms ease-in forwards;
}

.kmdb-toast__close {
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-right: -6px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: currentColor;
  background: transparent;
  font: inherit;
  line-height: 1;
}

@media (max-width: 599px) {
  .kmdb-toast__close {
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px auto;
  }
}

@keyframes toast-enter {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toast-leave {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-8px);
    opacity: 0;
  }
}

/* =============================================================================
   기본 컴포넌트 — 툴팁
   말풍선 방향·화살표·표시 상태
   ============================================================================= */
:root {
  --tooltip-max-width: 184px;
  --tooltip-padding-x: 12px;
  --tooltip-padding-y: 6px;
  --tooltip-radius: 4px;
  --tooltip-arrow-size: 8px;
  --tooltip-bg: #222222;
}

.kmdb-tooltip {
  position: absolute;
  z-index: 1200;
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  border-radius: var(--tooltip-radius);
  color: #ffffff;
  background: var(--tooltip-bg);
  font-size: var(--typo-body-2-size);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  overflow-wrap: break-word;
  pointer-events: none;
}

@media (max-width: 599px) {
  .kmdb-tooltip {
    max-width: calc(100vw - 32px);
  }
}

.kmdb-tooltip::before {
  position: absolute;
  width: var(--tooltip-arrow-size);
  height: var(--tooltip-arrow-size);
  background: inherit;
  content: "";
  transform: rotate(45deg);
}

.kmdb-tooltip--no-arrow::before {
  content: none;
}

/* 방향별 수직·수평 축 조합을 위한 캐스케이드 분리 */
.kmdb-tooltip--top::before {
  bottom: calc(var(--tooltip-arrow-size) / -2);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.kmdb-tooltip--top-left::before {
  bottom: calc(var(--tooltip-arrow-size) / -2);
}

.kmdb-tooltip--top-right::before {
  bottom: calc(var(--tooltip-arrow-size) / -2);
  right: 16px;
}

.kmdb-tooltip--bottom::before {
  top: calc(var(--tooltip-arrow-size) / -2);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.kmdb-tooltip--bottom-left::before {
  top: calc(var(--tooltip-arrow-size) / -2);
}

.kmdb-tooltip--bottom-right::before {
  top: calc(var(--tooltip-arrow-size) / -2);
  right: 16px;
}

/* 위 규칙들과 같은 속성을 다뤄 순서를 바꾸면 결과가 달라진다. 한 블록으로 합치지 않는다 */
.kmdb-tooltip--top-left::before {
  left: 16px;
}

/* 위 규칙들과 같은 속성을 다뤄 순서를 바꾸면 결과가 달라진다. 한 블록으로 합치지 않는다 */
.kmdb-tooltip--bottom-left::before {
  left: 16px;
}

.kmdb-tooltip--left::before {
  top: 50%;
  right: calc(var(--tooltip-arrow-size) / -2);
  transform: translateY(-50%) rotate(45deg);
}

.kmdb-tooltip--right::before {
  top: 50%;
  left: calc(var(--tooltip-arrow-size) / -2);
  transform: translateY(-50%) rotate(45deg);
}

.kmdb-tooltip-trigger {
  position: relative;
  display: inline-flex;
}

.kmdb-tooltip-trigger .kmdb-tooltip {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}

.kmdb-tooltip-trigger:hover .kmdb-tooltip {
  visibility: visible;
  opacity: 1;
}

.kmdb-tooltip-trigger:focus-within .kmdb-tooltip {
  visibility: visible;
  opacity: 1;
}

/* =============================================================================
   공용 컴포넌트 — 카탈로그 도구
   결과 수·정렬·보기 방식 전환
   ============================================================================= */
.kmdb-catalog-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  scroll-margin-top: 24px;
}

@media (max-width: 599px) {
  .kmdb-catalog-toolbar {
    align-items: center;
    flex-direction: row;
  }
}

.kmdb-catalog-toolbar--bordered {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-icon-default);
}

.kmdb-catalog-toolbar__result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color-text-01);
  font-size: var(--typo-body-4-size);
  line-height: var(--line-height-base);
}

.kmdb-catalog-toolbar__result strong {
  font-weight: var(--font-weight-bold);
}

.kmdb-catalog-toolbar__result-number.kmdb-skeleton {
  display: inline-block;
  width: 4ch;
  height: 1.5em;
  border-radius: 4px;
  background: linear-gradient(90deg, #f3f5f7 25%, #e7ebee 50%, #f3f5f7 75%);
  background-size: 200% 100%;
  color: transparent;
  animation: kmdb-skeleton-shimmer 1.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-catalog-toolbar__result-number.kmdb-skeleton {
    animation: none;
  }
}

.kmdb-catalog-toolbar__result--compact {
  font-size: var(--typo-body-3-size);
}

.kmdb-catalog-toolbar__result.kmdb-skeleton .kmdb-skeleton__line {
  height: 1.5em;
}

.kmdb-catalog-toolbar__result.kmdb-skeleton > span.kmdb-skeleton__line {
  width: 7em;
}

.kmdb-catalog-toolbar__result.kmdb-skeleton > span.kmdb-skeleton__line:last-of-type:not(:first-of-type) {
  width: 4em;
}

.kmdb-catalog-toolbar__result.kmdb-skeleton > strong.kmdb-skeleton__line {
  width: 3.5em;
}

.kmdb-catalog-toolbar__result.kmdb-skeleton > strong.kmdb-skeleton__line:only-child {
  width: 11em;
}

/* 카탈로그 도구 세 종류의 공통 정렬 축 */
.kmdb-catalog-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 599px) {
  .kmdb-catalog-toolbar__actions {
    max-width: 100%;
    overflow: visible;
  }
}

.kmdb-catalog-toolbar__desktop-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 599px) {
  .kmdb-catalog-toolbar__desktop-actions {
    display: none;
  }
}

.kmdb-catalog-toolbar__filter-trigger {
  display: none;
}

@media (max-width: 599px) {
  .kmdb-catalog-toolbar__filter-trigger {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin: -10px 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-02);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
  }
}

.kmdb-catalog-toolbar__filter-trigger img {
  width: 20px;
  height: 20px;
}

.kmdb-catalog-toolbar__divider--mobile-hidden {
  flex: none;
}

@media (max-width: 599px) {
  .kmdb-catalog-toolbar__divider--mobile-hidden {
    display: none;
  }
}

.kmdb-catalog-view-switch {
  display: flex;
  align-items: center;
  gap: var(--catalog-view-gap, 12px);
}

.kmdb-catalog-toolbar__divider {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  flex: 0 0 1px;
  background: var(--color-line-subtle);
}

.kmdb-catalog-view-switch__link {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-items: center;
  opacity: 0.5;
  color: var(--color-icon-gray);
}

.kmdb-catalog-view-switch__link.kmdb-is-active {
  opacity: 1;
  color: var(--color-icon-default);
}

.kmdb-catalog-view-switch__link[aria-current="page"] {
  opacity: 1;
  color: var(--color-icon-default);
}

.kmdb-catalog-view-switch__link[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.kmdb-catalog-view-switch__icon {
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.kmdb-catalog-view-switch__icon--grid {
  mask-image: url("/icons/navigation/album.svg");
  -webkit-mask-image: url("/icons/navigation/album.svg");
}

.kmdb-catalog-view-switch__icon--list {
  mask-image: url("/icons/navigation/menu.svg");
  -webkit-mask-image: url("/icons/navigation/menu.svg");
}

/* =============================================================================
   공용 컴포넌트 — 모바일 카탈로그 필터 바텀시트
   필터·정렬 선택과 취소·확인
   ============================================================================= */
.kmdb-catalog-filter-sheet {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  /* 화면 밖으로 내려둔 패널이 스크롤 가능한 영역을 만들면 열릴 때 브라우저가
     초점 요소를 보이려고 dialog를 스크롤해 패널이 하단에서 떠 보인다. */
  overflow: clip;
  border: 0;
  background: transparent;
}

.kmdb-catalog-filter-sheet[open] {
  display: block;
}

.kmdb-catalog-filter-sheet::backdrop {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.kmdb-catalog-filter-sheet[data-state="open"]::backdrop,
.kmdb-catalog-filter-sheet[data-state="closing"]::backdrop {
  transition: opacity 0.18s ease;
}

.kmdb-catalog-filter-sheet[data-state="open"]::backdrop {
  opacity: 1;
}

.kmdb-catalog-filter-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  width: 100%;
  max-height: min(calc(100% - 40px), 640px);
  grid-template-rows: var(--catalog-filter-sheet-rows, auto auto minmax(0, 1fr) auto);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--color-surface-white);
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
}

.kmdb-catalog-filter-sheet[data-state="open"]
  .kmdb-catalog-filter-sheet__panel,
.kmdb-catalog-filter-sheet[data-state="closing"]
  .kmdb-catalog-filter-sheet__panel {
  transition: transform 0.18s ease;
}

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

.kmdb-catalog-filter-sheet__handle {
  display: grid;
  width: 100%;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  place-items: center;
  background: var(--color-surface-white);
  cursor: pointer;
  touch-action: none;
}

.kmdb-catalog-filter-sheet__handle span {
  width: 75px;
  height: 4px;
  border-radius: 27px;
  background: var(--color-surface-disabled);
}

.kmdb-catalog-filter-sheet__header {
  padding: 10px 16px;
  background: var(--color-surface-white);
}

.kmdb-catalog-filter-sheet__header h2 {
  margin: 0;
  color: var(--color-text-01);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.4px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.kmdb-catalog-filter-sheet__header h2:focus {
  outline: 0;
}

.kmdb-catalog-filter-sheet__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kmdb-catalog-filter-sheet__section {
  display: grid;
  gap: 12px;
  padding: 10px 16px;
}

.kmdb-catalog-filter-sheet__section-title {
  margin: 0;
  color: var(--color-text-01);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.kmdb-catalog-filter-sheet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kmdb-catalog-filter-sheet__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--color-border-disabled);
  border-radius: 1000px;
  background: var(--color-surface-white);
  color: var(--color-text-02);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.kmdb-catalog-filter-sheet__chip[aria-pressed="true"].kmdb-is-selected {
  border-color: var(--color-text-01);
  color: var(--color-text-01);
  font-weight: var(--font-weight-semibold);
}

.kmdb-catalog-filter-sheet__options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.kmdb-catalog-filter-sheet__option {
  position: relative;
  display: flex;
  min-height: 50px;
  gap: 8px;
  align-items: center;
  padding: 13px 16px;
  background: var(--color-surface-white);
  color: var(--color-text-01);
  cursor: pointer;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.kmdb-catalog-filter-sheet__option:hover {
  background: var(--color-background-gray-subtler);
}

.kmdb-catalog-filter-sheet__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.kmdb-catalog-filter-sheet__check {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 2px;
}

.kmdb-catalog-filter-sheet__check::after {
  position: absolute;
  inset: 0;
  background: var(--color-icon-gray);
  content: "";
  mask: url("/icons/action/check.svg") center/24px 24px no-repeat;
  -webkit-mask: url("/icons/action/check.svg") center/24px 24px no-repeat;
}

.kmdb-catalog-filter-sheet__option
  input:checked
  + .kmdb-catalog-filter-sheet__check::after {
  background: var(--color-icon-default);
}

.kmdb-catalog-filter-sheet__option
  input:focus-visible
  + .kmdb-catalog-filter-sheet__check {
  border-radius: 4px;
  outline: 2px solid var(--color-icon-default);
  outline-offset: 2px;
}

.kmdb-catalog-filter-sheet__actions {
  display: grid;
  min-height: var(--catalog-filter-sheet-actions-min-height, 96px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px 16px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    var(--color-surface-white) 28px
  );
}

.kmdb-catalog-filter-sheet__action {
  display: inline-flex;
  min-width: 100px;
  min-height: 56px;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.kmdb-catalog-filter-sheet__action--cancel {
  background: var(--button-secondary-fill);
  color: var(--color-text-01);
}

.kmdb-catalog-filter-sheet__action--apply {
  background: var(--button-primary-fill);
  color: var(--color-text-white, #ffffff);
}

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

@media (prefers-reduced-motion: reduce) {
  .kmdb-catalog-filter-sheet[data-state="open"] .kmdb-catalog-filter-sheet__panel,
  .kmdb-catalog-filter-sheet[data-state="closing"] .kmdb-catalog-filter-sheet__panel {
    transition-duration: 0s;
  }
}

/* =============================================================================
   공용 컴포넌트 — 모바일 액션 바텀시트
   링크·기능 실행과 취소
   ============================================================================= */
.kmdb-action-sheet {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  /* 화면 밖으로 내려둔 패널이 스크롤 가능한 영역을 만들면 열릴 때 브라우저가
     초점 요소를 보이려고 dialog를 스크롤해 패널이 하단에서 떠 보인다. */
  overflow: clip;
  border: 0;
  background: transparent;
}

.kmdb-action-sheet[open] {
  display: block;
}

.kmdb-action-sheet::backdrop {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

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

.kmdb-action-sheet[data-state="closing"]::backdrop {
  transition: opacity 0.18s ease;
}

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

.kmdb-action-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 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: 20px 20px 0 0;
  background: var(--color-surface-white);
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
}

.kmdb-action-sheet[data-state="open"] .kmdb-action-sheet__panel {
  transition: transform 0.18s ease;
  transform: translateY(0);
}

.kmdb-action-sheet[data-state="closing"] .kmdb-action-sheet__panel {
  transition: transform 0.18s ease;
}

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

.kmdb-action-sheet__handle {
  display: grid;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  background: var(--color-surface-white);
}

.kmdb-action-sheet__handle span {
  display: block;
  width: 75px;
  height: 4px;
  border-radius: 27px;
  background: var(--color-surface-disabled);
}

.kmdb-action-sheet__title {
  margin: 0;
  padding: 10px 16px;
  color: var(--color-text-01);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.4px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.kmdb-action-sheet__title:focus {
  outline: 0;
}

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

.kmdb-action-sheet__item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 50px;
  gap: 8px;
  align-items: center;
  padding: 13px 16px;
  border: 0;
  background: var(--color-surface-white);
  color: var(--color-text-01);
  cursor: pointer;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-figma-source);
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
}

.kmdb-action-sheet__item:hover {
  background: var(--color-background-gray-subtler);
}

.kmdb-action-sheet__item:focus-visible {
  outline: 0;
  background: var(--color-background-gray-subtler);
}

.kmdb-action-sheet__item:focus-visible::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 3px solid var(--color-focus);
  content: "";
  pointer-events: none;
}

.kmdb-action-sheet__item[aria-pressed="true"] {
  font-weight: var(--font-weight-semibold);
}

.kmdb-action-sheet__item[aria-pressed="true"]::before {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  mask: url("/icons/action/check.svg") center/20px 20px no-repeat;
  -webkit-mask: url("/icons/action/check.svg") center/20px 20px no-repeat;
  content: "";
}

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

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

.kmdb-action-sheet__footer:has(.kmdb-action-sheet__button--apply) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kmdb-action-sheet__button {
  display: inline-flex;
  min-width: 100px;
  min-height: 56px;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-figma-source);
  line-height: 1.5;
}

.kmdb-action-sheet__button--cancel {
  background: var(--button-secondary-fill);
  color: var(--color-text-01);
}

.kmdb-action-sheet__button--apply {
  background: var(--button-primary-fill);
  color: #ffffff;
}

/* =============================================================================
   공용 컴포넌트 — 카탈로그 빈 상태
   검색·필터 결과가 없는 목록의 안내
   ============================================================================= */
.kmdb-catalog-empty-state {
  display: grid;
  min-height: 320px;
  margin-top: 30px;
  padding: 64px 24px;
  place-content: center;
  justify-items: center;
  border-top: 1px solid var(--color-border-disabled);
  border-bottom: 1px solid var(--color-border-disabled);
  text-align: center;
}

@media (max-width: 599px) {
  .kmdb-catalog-empty-state {
    min-height: 240px;
    margin-top: 24px;
    padding: 48px 20px;
  }
}

.kmdb-catalog-empty-state--bordered {
  border: 1px solid var(--color-border-disabled);
  border-radius: 12px;
}

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

.kmdb-catalog-empty-state img {
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
}

.kmdb-catalog-empty-state strong {
  color: var(--color-text-01);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.kmdb-catalog-empty-state p {
  margin: 8px 0 0;
  color: var(--color-text-02);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.kmdb-catalog-request-error {
  margin-top: 16px;
  color: var(--color-text-02);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: center;
}

.kmdb-catalog-request-error[hidden] {
  display: none;
}

/* =============================================================================
   공용 컴포넌트 — 빈 상태
   Figma 2117:240735 규격 기반
   데이터나 내역이 없는 영역의 단일 안내
   ============================================================================= */
.kmdb-empty-state {
  display: flex;
  min-height: 164px;
  padding: 50px 20px;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

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

.kmdb-empty-state--bordered {
  border: 1px solid var(--color-border-disabled);
  border-radius: 12px;
}

.kmdb-empty-state--compact {
  min-height: 140px;
  padding: 24px 16px;
}

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

.kmdb-empty-state img {
  width: 28px;
  height: 28px;
}

.kmdb-empty-state p {
  width: 100%;
  margin: 0;
  color: var(--color-text-01);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  letter-spacing: var(--typo-letter-spacing, -0.6px);
  word-break: keep-all;
  overflow-wrap: normal;
}

.kmdb-empty-state--inverse p {
  color: #ffffff;
}

.kmdb-empty-state--inverse img {
  filter: invert(1);
  opacity: 0.72;
}

.kmdb-row-navigation {
  cursor: pointer;
}

/* =============================================================================
   공용 컴포넌트 — 콘텐츠 페이지네이션
   콘텐츠 목록 전용 링크형 페이지 이동
   ============================================================================= */
.kmdb-content-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
}

@media (max-width: 599px) {
  .kmdb-content-pagination {
    justify-content: center;
  }
}

.kmdb-content-pagination__link,
.kmdb-content-pagination__button {
  position: relative;
  display: inline-grid;
  min-width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 0;
  background: var(--color-surface-white);
  color: var(--color-text-03);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.kmdb-content-pagination__link:focus-visible,
.kmdb-content-pagination__button:focus-visible {
  outline: 0;
}

.kmdb-content-pagination__link:focus-visible::after,
.kmdb-content-pagination__button:focus-visible::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 3px solid var(--color-focus);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.kmdb-content-pagination__link[aria-current="page"],
.kmdb-content-pagination__button[aria-current="page"] {
  border: 1px solid var(--color-icon-default);
  border-radius: var(--pagination-radius);
  color: var(--color-text-01);
}

.kmdb-content-pagination__link[aria-disabled="true"],
.kmdb-content-pagination__button[aria-disabled="true"],
.kmdb-content-pagination__button:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.kmdb-content-pagination img {
  width: 24px;
  height: 24px;
}

.kmdb-content-pagination__link--nav,
.kmdb-content-pagination__button--nav {
  min-width: 60px;
}

.kmdb-content-pagination__page {
  display: inline-grid;
}

@media (max-width: 599px) {
  .kmdb-content-pagination__page {
    display: none;
  }
}

.kmdb-content-pagination__status {
  display: none;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-01);
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-base);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .kmdb-content-pagination__status {
    display: flex;
  }
}

.kmdb-content-pagination__status strong {
  display: inline-grid;
  width: 30px;
  height: 40px;
  place-items: center;
  color: var(--color-text-01);
  font-size: var(--typo-body-3-size);
  font-weight: var(--font-weight-semibold);
}

.kmdb-content-pagination__status i {
  display: none;
  min-width: 16px;
  height: 40px;
  place-items: center;
  font-style: normal;
}

@media (max-width: 599px) {
  .kmdb-content-pagination__status i {
    display: inline-grid;
  }
}

.kmdb-content-pagination__status span {
  display: none;
  width: 30px;
  height: 40px;
  place-items: center;
  color: var(--color-text-03);
  font-size: var(--typo-body-3-size);
}

@media (max-width: 599px) {
  .kmdb-content-pagination__status span {
    display: inline-grid;
  }
}

/* =============================================================================
   공용 컴포넌트 — 이미지 플레이스홀더
   페이지별 이미지 프레임 안의 유형 아이콘
   ============================================================================= */
.kmdb-image-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-background-gray-subtler) !important;
  box-shadow: inset 0 0 0 1px var(--color-border-disabled);
}

.kmdb-image-frame:has(> img[data-image-fallback$="/movie.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/movie.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/person.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/person.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/organization.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/organization.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/event.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/event.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/incident.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/incident.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/film.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/film.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/dcinema.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/dcinema.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/video.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/video.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/sound.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/sound.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/photo.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/photo.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/poster.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/poster.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/promotion.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/promotion.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/scenario.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/scenario.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/literature.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/literature.webp");
}

.kmdb-image-frame:has(> img[data-image-fallback$="/museum.webp"]) {
  --image-frame-placeholder: url("/images/placeholder/museum.webp");
}

.kmdb-image-frame::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80px, 50%);
  height: min(54px, calc(100% - 12px));
  background: var(--image-frame-placeholder, url("/images/placeholder/default.webp")) center / contain no-repeat;
  transform: translate(-50%, -50%);
  content: "";
}

@media (max-width: 599px) {
  .kmdb-image-frame::before {
    height: min(48px, calc(100% - 12px));
  }
}

.kmdb-image-frame:not(:has(> img[data-image-fallback]))::before {
  content: none;
}

.kmdb-image-frame::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid var(--color-border-disabled);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.kmdb-image-frame > img[data-image-fallback] {
  position: relative;
  display: block;
  width: 100%;
  height: var(--image-frame-image-height, 100%);
  min-height: 0;
  object-fit: var(--image-frame-image-fit, cover);
}

.kmdb-image-frame > img[data-image-fallback][src*="/images/placeholder"] {
  visibility: hidden;
}

.kmdb-image-frame > img[data-image-fallback][src*="/images/mock/"] {
  visibility: hidden;
}

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

.kmdb-image-placeholder__icon {
  display: block;
  width: min(80px, 50%);
  height: 54px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 599px) {
  .kmdb-image-placeholder__icon {
    height: 48px;
  }
}

.kmdb-image-loading {
  --image-placeholder-dcinema: url("/images/placeholder/dcinema.webp");
  --image-placeholder-event: url("/images/placeholder/event.webp");
  --image-placeholder-film: url("/images/placeholder/film.webp");
  --image-placeholder-incident: url("/images/placeholder/incident.webp");
  --image-placeholder-literature: url("/images/placeholder/literature.webp");
  --image-placeholder-movie: url("/images/placeholder/movie.webp");
  --image-placeholder-museum: url("/images/placeholder/museum.webp");
  --image-placeholder-organization: url("/images/placeholder/organization.webp");
  --image-placeholder-person: url("/images/placeholder/person.webp");
  --image-placeholder-photo: url("/images/placeholder/photo.webp");
  --image-placeholder-poster: url("/images/placeholder/poster.webp");
  --image-placeholder-promotion: url("/images/placeholder/promotion.webp");
  --image-placeholder-scenario: url("/images/placeholder/scenario.webp");
  --image-placeholder-sound: url("/images/placeholder/sound.webp");
  --image-placeholder-video: url("/images/placeholder/video.webp");
  --image-placeholder-poster-placeholder: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzYwIiB2aWV3Qm94PSIwIDAgNjQwIDM2MCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsbGVkYnk9InRpdGxlIGRlc2MiPgogIDx0aXRsZSBpZD0idGl0bGUiPlBvc3RlciBwbGFjZWhvbGRlcjwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPlRlbXBvcmFyeSBncmF5IEtNRGIgcGxhY2Vob2xkZXIgZm9yIG1vY2sgZGF0YS48L2Rlc2M+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IiNlNWU3ZWIiLz4KICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjYzOSIgaGVpZ2h0PSIzNTkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NmZDRkYyIvPgogIDx0ZXh0IHg9IjMyMCIgeT0iMTkwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNzI3OTg2IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iNDIiIGZvbnQtd2VpZ2h0PSI3MDAiPktNRGI8L3RleHQ+Cjwvc3ZnPgo=");
  --image-placeholder-thumb-placeholder: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzYwIiB2aWV3Qm94PSIwIDAgNjQwIDM2MCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsbGVkYnk9InRpdGxlIGRlc2MiPgogIDx0aXRsZSBpZD0idGl0bGUiPlRodW1ibmFpbCBwbGFjZWhvbGRlcjwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPlRlbXBvcmFyeSBncmF5IEtNRGIgcGxhY2Vob2xkZXIgZm9yIG1vY2sgZGF0YS48L2Rlc2M+CiAgPHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IiNlNWU3ZWIiLz4KICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjYzOSIgaGVpZ2h0PSIzNTkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NmZDRkYyIvPgogIDx0ZXh0IHg9IjMyMCIgeT0iMTkwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNzI3OTg2IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iNDIiIGZvbnQtd2VpZ2h0PSI3MDAiPktNRGI8L3RleHQ+Cjwvc3ZnPgo=");
  background: #e5e7eb var(--image-loading-placeholder) center / cover no-repeat !important;
}

.kmdb-image-loading--icon {
  background-color: var(--color-background-gray-subtler) !important;
  background-size: min(80px, 50%) auto !important;
}

.kmdb-image-fallback--icon {
  position: static !important;
  width: min(80px, 50%) !important;
  height: 54px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 599px) {
  .kmdb-image-fallback--icon {
    height: 48px !important;
  }
}

.kmdb-has-image-fallback {
  display: grid !important;
  background: var(--color-background-gray-subtler) !important;
  box-shadow: inset 0 0 0 1px var(--color-border-disabled);
  place-items: center;
}

/* =============================================================================
   공용 컴포넌트 — 정보 사이드 패널
   빈 상태·최근 콘텐츠 탭·항목 목록
   ============================================================================= */
.kmdb-information-sidebar-tabs {
  position: relative;
  display: flex;
  flex: none;
  width: 100%;
  padding: 4px;
  border-radius: 1000px;
  background: var(--color-background-gray-subtler, #f5f8fb);
}

.kmdb-information-sidebar-tabs::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: 1000px;
  background: var(--color-surface-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  content: "";
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.kmdb-information-sidebar-tabs.kmdb-is-recent-active::before {
  transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-information-sidebar-tabs::before {
    transition: none;
  }
}

@media (max-width: 1439px) {
  .kmdb-information-sidebar-tabs {
    margin: 16px 0 20px;
  }
}

.kmdb-information-sidebar-tabs button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 1000px;
  color: var(--color-text-03, #838689);
  background: transparent;
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 599px) {
  .kmdb-information-sidebar-tabs:lang(en) button {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.kmdb-information-sidebar-tabs button.kmdb-is-active {
  color: var(--color-text-01, #222222);
  font-weight: var(--font-weight-semibold);
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs {
  position: sticky;
  top: var(--kmdb-header-aware-sticky-top, calc(var(--layout-header-desktop-height) + 20px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  /* 리스트 카드 3개 기준 */
  height: 900px;
  max-height: calc(100dvh - var(--layout-header-desktop-height) - 40px);
  overflow: hidden;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs {
    position: fixed;
    top: 0;
    display: none;
    grid-template-rows: none;
    gap: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs.kmdb-is-responsive-dialog-open {
    display: grid;
  }
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  > .kmdb-responsive-information-dialog__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  > .kmdb-responsive-information-dialog__panel.kmdb-is-recent-panel {
  overflow: hidden;
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  > .kmdb-responsive-information-dialog__panel.kmdb-is-recent-panel
  > h2,
.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  > .kmdb-responsive-information-dialog__panel.kmdb-is-recent-panel
  > .kmdb-information-side-panel__header {
  display: none;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
    > .kmdb-responsive-information-dialog__panel.kmdb-is-recent-panel
    > h2,
  .kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
    > .kmdb-responsive-information-dialog__panel.kmdb-is-recent-panel
    > .kmdb-information-side-panel__header {
    display: flex;
  }
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs:not(.kmdb-is-recent-open)
  > .kmdb-responsive-information-dialog__panel.kmdb-is-recent-panel,
.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs.kmdb-is-recent-open
  > .kmdb-responsive-information-dialog__panel.kmdb-is-information-panel {
  display: none;
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs.kmdb-is-recent-open
  > .kmdb-responsive-information-dialog__panel.kmdb-is-recent-panel {
  display: flex;
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  .kmdb-information-side-panel__recent-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  .kmdb-information-side-panel__recent-tabs::-webkit-scrollbar {
  display: none;
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  .kmdb-information-detail__actions {
  width: calc(100% - 32px);
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  .kmdb-information-detail__actions.kmdb-has-viewer
  > a {
  width: auto;
  min-width: 0;
  max-width: none;
  flex: 1 1 0;
}

.kmdb-responsive-information-dialog.kmdb-has-sidebar-tabs
  .kmdb-information-detail__actions.kmdb-has-viewer
  > button {
  min-width: 0;
  flex: 2 1 0;
}

.kmdb-information-side-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 20px 0;
  border: 1px solid var(--color-border-disabled, #dbdee1);
  border-radius: 20px;
  background: var(--color-surface-white);
}

@media (max-width: 1439px) {
  .kmdb-information-side-panel {
    padding: 0 16px 20px;
  }
}

.kmdb-information-side-panel.kmdb-is-selected-detail {
  border-color: var(--color-divider-02, #e7ebee);
}

.kmdb-information-side-panel__header {
  display: flex;
  flex: none;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

@media (max-width: 1439px) {
  .kmdb-information-side-panel__header {
    height: 52px;
    min-height: 52px;
    padding: 20px 44px 0 0;
  }
}

.kmdb-information-side-panel__header--notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

@media (max-width: 1439px) {
  .kmdb-information-side-panel__header--notice {
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    padding-bottom: 12px;
  }
}

.kmdb-information-side-panel__header--notice > .kmdb-information-side-panel__reset {
  grid-column: 3;
  grid-row: 1;
}

@media (max-width: 1439px) {
  .kmdb-information-side-panel__header--notice > .kmdb-information-side-panel__reset {
    grid-column: 2;
  }
}

.kmdb-information-side-panel__notice {
  min-width: 0;
  margin: 0;
  color: var(--color-badge-danger);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1439px) {
  .kmdb-information-side-panel__notice {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.kmdb-information-side-panel:not(.kmdb-is-selected-detail) .kmdb-information-side-panel__header {
  display: none;
}

@media (max-width: 1439px) {
  .kmdb-information-side-panel:not(.kmdb-is-selected-detail) .kmdb-information-side-panel__header {
    display: flex;
  }
}

.kmdb-information-side-panel h2 {
  min-height: var(--information-side-panel-heading-min-height, auto);
  margin: 0;
  padding: 0;
  color: var(--color-text-01);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

@media (max-width: 1439px) {
  .kmdb-information-side-panel h2 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
  }
}

@media (max-width: 599px) {
  .kmdb-information-side-panel h2 {
    font-size: 18px;
  }
}

.kmdb-information-side-panel__reset {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 32px;
  padding: 8px;
  border: 1px solid var(--color-border-disabled, #dbdee1);
  border-radius: 8px;
  color: var(--color-text-01, #222222);
  background: var(--color-surface-white);
  font-size: 12px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

.kmdb-information-side-panel__reset[hidden] {
  display: none;
}

.kmdb-information-side-panel__reset img {
  width: 16px;
  height: 16px;
}

.kmdb-information-side-panel__empty-state {
  display: grid;
  flex: 1 1 auto;
  justify-items: center;
  align-content: center;
  min-height: 180px;
  padding: 0 24px;
  text-align: center;
}

.kmdb-information-side-panel__empty-state img {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
}

.kmdb-information-side-panel__empty-state strong {
  color: var(--color-text-01);
  font-size: 16px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.5;
}

.kmdb-information-side-panel__empty-state p {
  margin: 8px 0 0;
  color: var(--color-text-02);
  font-size: 14px;
  line-height: 1.5;
}

.kmdb-information-side-panel__empty-state[hidden] {
  display: none;
}

.kmdb-information-side-panel__recent-item[hidden] {
  display: none;
}

.kmdb-information-side-panel--recent-content {
  padding-top: 0;
  padding-bottom: 12px;
}

.kmdb-information-side-panel__recent-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.kmdb-information-side-panel__recent-tabs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow: hidden;
  padding: 0 16px 12px;
}

@media (max-width: 599px) {
  .kmdb-information-side-panel__recent-tabs {
    margin-top: 13px;
    overflow-x: auto;
  }

  .kmdb-information-side-panel__recent-tabs[data-horizontal-chip-scroll] button {
    min-height: 36px;
  }
}

.kmdb-information-side-panel__recent-tabs button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--color-line-subtle);
  border-radius: 999px;
  background: var(--color-surface-white);
  color: var(--color-text-02);
  font-size: 14px;
  white-space: nowrap;
}

.kmdb-information-side-panel__recent-tabs .kmdb-is-active {
  border-color: var(--color-icon-default);
  color: var(--color-text-01);
  font-weight: var(--font-weight-semibold);
}

.kmdb-information-side-panel__recent-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-disabled) transparent;
}

@media (max-width: 1439px) {
  .kmdb-information-side-panel__recent-list {
    min-height: 312px;
  }
}

.kmdb-information-side-panel__recent-list::-webkit-scrollbar {
  width: 6px;
}

.kmdb-information-side-panel__recent-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-disabled);
}

.kmdb-information-side-panel__recent-list::-webkit-scrollbar-track {
  background: transparent;
}

.kmdb-local-recent-empty {
  display: flex;
  height: 100%;
  min-height: 180px;
  margin: 0;
  padding: 20px;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  color: var(--color-text-02);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.kmdb-local-recent-empty img {
  width: 24px;
  height: 24px;
}

.kmdb-information-side-panel__recent-item {
  display: grid;
  gap: 12px;
  padding: 0 16px;
}

.kmdb-information-side-panel__recent-item + .kmdb-information-side-panel__recent-item {
  margin-top: 20px;
}

.kmdb-information-side-panel__recent-media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-surface-disabled);
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media {
  display: flex;
  --poster-width: 41.6667%;
  --poster-overlap: 27.0833%;
  aspect-ratio: 9 / 5;
  justify-content: space-between;
  border-radius: 16px;
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media:has(> span:only-child) {
  --poster-width: 100%;
  --poster-overlap: 0%;
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media:has(> span:nth-child(2):last-child) {
  --poster-width: 55%;
  --poster-overlap: 10%;
}

.kmdb-information-side-panel__recent-item--festival .kmdb-information-side-panel__recent-media {
  aspect-ratio: 3 / 4;
}

.kmdb-information-side-panel__recent-item--article .kmdb-information-side-panel__recent-media {
  aspect-ratio: 4 / 3;
}

.kmdb-information-side-panel__recent-item--collection .kmdb-information-side-panel__recent-media {
  aspect-ratio: 4 / 3;
}

.kmdb-information-side-panel__recent-item--vod .kmdb-information-side-panel__recent-media {
  aspect-ratio: 16 / 9;
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media > span {
  position: relative;
  width: var(--poster-width);
  height: 100%;
  flex: 0 0 var(--poster-width);
  margin-right: calc(-1 * var(--poster-overlap));
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 6.629px 0 9.943px rgba(0, 0, 0, 0.25);
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media > span:nth-child(1) {
  z-index: 5;
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media > span:nth-child(2) {
  z-index: 4;
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media > span:nth-child(3) {
  z-index: 3;
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media > span:nth-child(4) {
  z-index: 2;
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media > span:nth-child(5) {
  z-index: 1;
}

.kmdb-information-side-panel__recent-item--list .kmdb-information-side-panel__recent-media > span:last-child {
  margin-right: 0;
  box-shadow: none;
}

.kmdb-information-side-panel__recent-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kmdb-information-side-panel__recent-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.kmdb-information-side-panel__recent-item small {
  overflow: hidden;
  color: var(--color-text-01);
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kmdb-information-side-panel__recent-item strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-01);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.kmdb-information-side-panel__recent-meta {
  display: flex;
  gap: 6px;
  color: var(--color-text-02);
  font-size: 14px;
  line-height: 1.5;
}

.kmdb-information-detail-host {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.kmdb-information-detail-host[hidden] {
  display: none;
}

.kmdb-information-detail-host.kmdb-is-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
}

.kmdb-information-detail {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

@media (max-width: 1439px) {
  .kmdb-information-detail {
    gap: 16px;
    padding: 0;
  }
}

.kmdb-information-detail:has(img),
.kmdb-information-detail:has(.kmdb-information-detail__media) {
  padding-top: 12px;
}

@media (max-width: 1439px) {
  .kmdb-information-detail:has(img),
  .kmdb-information-detail:has(.kmdb-information-detail__media) {
    padding-top: 0;
  }
}

.kmdb-information-detail__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: inherit;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-disabled) transparent;
}

.kmdb-information-detail__body::-webkit-scrollbar {
  width: 6px;
}

.kmdb-information-detail__body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-disabled);
}

.kmdb-information-detail__body::-webkit-scrollbar-track {
  background: transparent;
}

.kmdb-information-detail__view-switcher {
  display: none;
}

.kmdb-information-detail__body > img,
.kmdb-information-detail > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1439px) {
  .kmdb-information-detail__body > img,
  .kmdb-information-detail > img {
    width: auto;
    max-width: 100%;
    height: 184px;
    aspect-ratio: auto;
    margin-inline: auto;
    border-radius: 8px;
  }
}

.kmdb-information-detail__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

@media (max-width: 1439px) {
  .kmdb-information-detail__media {
    width: auto;
    max-width: 100%;
    height: 184px;
    aspect-ratio: auto;
    margin-inline: auto;
    border-radius: 8px;
  }
}

.kmdb-information-detail__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1439px) {
  .kmdb-information-detail__image {
    width: auto;
    height: 184px;
    max-width: 100%;
  }
}

.kmdb-information-detail--portrait > .kmdb-information-detail__body > img,
.kmdb-information-detail--portrait > img {
  flex: none;
  height: 353px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 1439px) {
  .kmdb-information-detail--portrait > .kmdb-information-detail__body > img,
  .kmdb-information-detail--portrait > img {
    width: auto;
    height: 184px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
}

.kmdb-information-detail--portrait > .kmdb-information-detail__body > .kmdb-information-detail__media,
.kmdb-information-detail--portrait > .kmdb-information-detail__media {
  flex: none;
  height: 353px;
}

@media (max-width: 1439px) {
  .kmdb-information-detail--portrait > .kmdb-information-detail__body > .kmdb-information-detail__media,
  .kmdb-information-detail--portrait > .kmdb-information-detail__media {
    width: auto;
    height: 184px;
    aspect-ratio: 3 / 4;
  }
}

.kmdb-information-detail--portrait .kmdb-information-detail__image {
  object-fit: contain;
}

@media (max-width: 1439px) {
  .kmdb-information-detail--portrait .kmdb-information-detail__image {
    object-fit: cover;
  }
}

.kmdb-information-detail--landscape > .kmdb-information-detail__body > img,
.kmdb-information-detail--landscape > img {
  flex: none;
  height: 353px;
}

@media (max-width: 1439px) {
  .kmdb-information-detail--landscape > .kmdb-information-detail__body > img,
  .kmdb-information-detail--landscape > img {
    width: auto;
    height: 184px;
    aspect-ratio: 4 / 3;
  }
}

.kmdb-information-detail--landscape > .kmdb-information-detail__body > .kmdb-information-detail__media,
.kmdb-information-detail--landscape > .kmdb-information-detail__media {
  flex: none;
  height: 353px;
}

@media (max-width: 1439px) {
  .kmdb-information-detail--landscape > .kmdb-information-detail__body > .kmdb-information-detail__media,
  .kmdb-information-detail--landscape > .kmdb-information-detail__media {
    width: auto;
    height: 184px;
    aspect-ratio: 4 / 3;
  }
}

.kmdb-information-detail__heading {
  display: grid;
  gap: 4px;
  margin: 0 16px;
}

@media (max-width: 1439px) {
  .kmdb-information-detail__heading {
    margin: 0;
  }
}

.kmdb-information-detail__heading > strong {
  color: var(--color-text-01, #222222);
  font-size: 18px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.5;
}

@media (max-width: 1439px) {
  .kmdb-information-detail__heading > strong {
    font-size: 16px;
  }
}

.kmdb-information-detail__heading > small {
  color: var(--color-text-01, #222222);
  font-size: 14px;
  line-height: 1.5;
}

.kmdb-information-detail dl {
  margin: 0 16px;
  padding: 8px 0;
  border-top: 1px solid var(--color-icon-default, #222222);
}

@media (max-width: 1439px) {
  .kmdb-information-detail dl {
    width: 100%;
    margin: -10px 0 0;
  }
}

.kmdb-information-detail dl > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  justify-content: space-between;
  min-height: 0;
  align-items: start;
  padding: 8px 0;
}

@media (max-width: 1439px) {
  .kmdb-information-detail dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px 0;
  }
}

.kmdb-information-detail dl > .kmdb-information-detail__field--stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.kmdb-information-detail dt {
  color: var(--color-text-01, #222222);
  font-size: 14px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
}

.kmdb-information-detail dd {
  margin: 0;
  color: var(--color-text-01, #222222);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.kmdb-information-detail--award-category {
  padding-top: 24px;
}

@media (max-width: 1439px) {
  .kmdb-information-detail--award-category {
    padding-top: 0;
  }
}

.kmdb-information-detail--award-category .kmdb-information-detail__heading > strong {
  font-size: 16px;
}

.kmdb-information-detail--award-category .kmdb-information-detail__groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.kmdb-information-detail--award-category dl {
  margin: 0 16px;
  padding: 8px 0;
  border-top: 1px solid var(--color-icon-default, #222222);
}

@media (max-width: 1439px) {
  .kmdb-information-detail--award-category dl {
    width: auto;
    margin: 0;
  }
}

.kmdb-information-detail--award-category dl + dl {
  border-top-color: var(--color-border-disabled, #dbdee1);
}

.kmdb-information-detail--award-category dl > div {
  align-items: center;
}

@media (max-width: 1439px) {
  .kmdb-information-detail--award-category dl > div {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 0;
    padding: 8px 0;
  }
}

.kmdb-information-detail--award-category dd a {
  color: inherit;
  text-decoration: underline;
}

.kmdb-information-detail__actions {
  display: flex;
  flex: none;
  width: calc(100% - 32px);
  gap: 12px;
  align-items: center;
  margin: 8px auto 0;
  background: var(--color-surface-white, #ffffff);
}

@media (max-width: 1439px) {
  .kmdb-information-detail__actions {
    width: 100%;
    margin-top: 0;
    padding-bottom: 20px;
  }
}

.kmdb-information-detail__actions > a {
  display: flex;
  min-height: 56px;
  flex: 1;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  color: var(--color-text-white, #ffffff);
  background: var(--button-primary-fill, #222222);
  font-size: 16px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 1439px) {
  .kmdb-information-detail__actions > a {
    min-height: 48px;
  }
}

.kmdb-information-detail__actions > button {
  display: flex;
  min-height: 56px;
  flex: 1;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  color: var(--color-text-white, #ffffff);
  background: var(--button-primary-fill, #222222);
  font-size: 16px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 1439px) {
  .kmdb-information-detail__actions > button {
    min-height: 48px;
  }
}

.kmdb-information-detail__actions.kmdb-has-viewer > a {
  width: 117px;
  min-width: 117px;
  max-width: 117px;
  flex: 0 0 117px;
  box-sizing: border-box;
  padding-inline: 13px;
  border: 1px solid var(--color-border-disabled, #dbdee1);
  color: var(--color-text-01, #222222);
  background: var(--color-surface-white, #ffffff);
}

@media (max-width: 599px) {
  .kmdb-information-detail__actions.kmdb-has-viewer > a {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
  }
}

.kmdb-information-detail__actions.kmdb-has-viewer > button {
  flex: 0 0 308px;
}

@media (max-width: 599px) {
  .kmdb-information-detail__actions.kmdb-has-viewer > button {
    min-width: 0;
    flex: 2 1 0;
  }
}

.kmdb-information-detail__actions > a:hover {
  background: var(--button-primary-hover, #3b3e41);
}

.kmdb-information-detail__actions > button:hover {
  background: var(--button-primary-hover, #3b3e41);
}

.kmdb-information-detail__actions.kmdb-has-viewer > a:hover {
  background: var(--color-surface-alt, #f5f7fa);
}

.kmdb-information-detail__actions > a:focus-visible {
  outline: 2px solid var(--color-focus, #0785e6);
  outline-offset: 2px;
}

.kmdb-information-detail__actions > button:focus-visible {
  outline: 2px solid var(--color-focus, #0785e6);
  outline-offset: 2px;
}

.kmdb-information-detail__actions > :where(a, button) > span:first-child {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: currentColor;
}

@media (max-width: 1439px) {
  .kmdb-information-detail__actions > :where(a, button) > span:first-child {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
}

.kmdb-information-detail__actions .kmdb-is-info {
  mask: url("/icons/popover/info-stroke.svg") center/contain no-repeat;
  -webkit-mask: url("/icons/popover/info-stroke.svg") center/contain no-repeat;
}

.kmdb-information-detail__actions .kmdb-is-video {
  mask: url("/icons/action/play.svg") center/contain no-repeat;
  -webkit-mask: url("/icons/action/play.svg") center/contain no-repeat;
}

.kmdb-information-detail__actions .kmdb-is-image {
  mask: url("/icons/action/photo.svg") center/contain no-repeat;
  -webkit-mask: url("/icons/action/photo.svg") center/contain no-repeat;
}

.kmdb-information-detail__actions .kmdb-is-pdf {
  mask: url("/icons/action/file.svg") center/contain no-repeat;
  -webkit-mask: url("/icons/action/file.svg") center/contain no-repeat;
}

.kmdb-information-detail__viewer-notice {
  width: 437px;
  margin: 12px auto 0;
  color: var(--color-error, #d72c2c);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 599px) {
  .kmdb-information-detail__viewer-notice {
    width: 100%;
  }
}

.kmdb-information-detail__pending {
  margin: 16px;
  padding: 16px;
  border: 1px solid #d72c2c;
  border-radius: 10px;
  color: #d72c2c;
  background: #fff4f4;
  font-size: 15px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
}

.kmdb-information-detail__empty {
  margin: 0;
  padding: 24px;
  color: var(--color-text-01, #222222);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.kmdb-information-viewer-dialog {
  position: fixed;
  z-index: 1010;
  inset: 0;
  display: grid;
  padding: 32px;
  place-items: center;
}

.kmdb-information-viewer-dialog[hidden] {
  display: none;
}

.kmdb-information-viewer-dialog__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
}

.kmdb-information-viewer-dialog > section {
  position: relative;
  width: min(760px, calc(100vw - 64px));
  padding: 20px;
  border-radius: 20px;
  background: var(--color-surface-white, #ffffff);
}

.kmdb-information-viewer-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.kmdb-information-viewer-dialog h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
}

.kmdb-information-viewer-dialog header button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 4px;
  place-items: center;
  border: 0;
  background: transparent;
}

.kmdb-information-viewer-dialog header img {
  width: 24px;
  height: 24px;
}

.kmdb-information-viewer-dialog__stage {
  position: relative;
  display: grid;
  height: 440px;
  overflow: hidden;
  place-items: center;
  border-radius: 12px;
  background: #17191d;
}

.kmdb-information-viewer-dialog__stage > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kmdb-information-viewer-dialog.kmdb-is-placeholder
  .kmdb-information-viewer-dialog__stage {
  border: 1px solid var(--color-border-disabled);
  background: var(--color-background-gray-subtler);
}

.kmdb-information-viewer-dialog.kmdb-is-placeholder
  .kmdb-information-viewer-dialog__stage
  > img {
  width: 80px;
  height: 54px;
}

.kmdb-information-viewer-dialog__stage > span {
  position: absolute;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
}

.kmdb-information-viewer-dialog > section > p {
  margin: 12px 0 0;
  color: var(--color-text-02, #515458);
  font-size: 14px;
  line-height: 1.5;
}

/* =============================================================================
   공용 컴포넌트 — 실제 자료 뷰어
   Video.js, Viewer.js, PDF 띠 뷰어의 화면 공통 내부 구조
   ============================================================================= */
.kmdb-content-viewer__video-player {
  width: 100%;
  height: 100%;
}

.kmdb-content-viewer__image-gallery {
  display: none;
}

.kmdb-content-viewer__file-list {
  display: flex;
  max-height: 88px;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  overflow-y: auto;
}

.kmdb-content-viewer__file {
  display: inline-flex;
  max-width: 100%;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--color-border-disabled);
  border-radius: 999px;
  background: var(--color-surface-white);
  color: var(--color-text-02, #515458);
  font-size: 13px;
  line-height: 1.5;
}

.kmdb-content-viewer__file[aria-pressed="true"] {
  border-color: var(--color-text-01);
  color: var(--color-text-01);
  font-weight: 700;
}

.kmdb-content-viewer__file:disabled {
  opacity: 0.45;
}

.kmdb-content-viewer__file-type {
  color: var(--color-text-03, #838689);
  font-size: 12px;
}

.kmdb-content-viewer__file-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kmdb-content-viewer__retry {
  margin-top: 8px;
}

/* 파일 목록·안내문·재시도가 늘어도 대화상자가 뷰포트를 넘지 않게 한다.
   무대만 줄고 나머지는 자연 높이를 유지하며, 그래도 넘치면 대화상자 안에서 스크롤한다.
   64px는 대화상자 컨테이너의 상하 padding이다(전역 border-box). */
.kmdb-content-viewer__dialog {
  display: flex;
  max-height: calc(100dvh - 64px);
  flex-direction: column;
  overflow-y: auto;
}

.kmdb-content-viewer__stage {
  flex-shrink: 1;
  min-height: 0;
}

.kmdb-content-viewer[data-viewer-type="video"] .kmdb-content-viewer__type-icon {
  display: none;
}

.kmdb-content-viewer[data-viewer-type="video"] .kmdb-content-viewer__preview {
  display: none;
}

.kmdb-content-viewer[data-viewer-type="image"] .kmdb-content-viewer__type-icon {
  display: none;
}

.kmdb-content-viewer[data-viewer-type="image"] .kmdb-content-viewer__preview {
  display: none;
}

.kmdb-content-viewer[data-viewer-type="pdf"] .kmdb-content-viewer__type-icon {
  display: none;
}

.kmdb-content-viewer[data-viewer-type="pdf"] .kmdb-content-viewer__dialog {
  width: min(1180px, calc(100vw - 64px));
  height: min(900px, calc(100dvh - 64px));
}

@media (max-width: 599px) {
  .kmdb-content-viewer[data-viewer-type="pdf"] .kmdb-content-viewer__dialog {
    width: calc(100vw - 64px);
    height: calc(100dvh - 64px);
    padding: 12px;
  }
}

.kmdb-content-viewer[data-viewer-type="pdf"] .kmdb-content-viewer__stage {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--color-background-gray-subtler);
}

.kmdb-content-viewer[data-viewer-type="pdf"] .kmdb-content-viewer__preview {
  display: none;
}

.kmdb-pdf-viewer {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--color-text-01);
  background: var(--color-surface-white);
}

.kmdb-pdf-viewer__toolbar {
  display: flex;
  min-height: 64px;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-disabled);
}

.kmdb-pdf-viewer__search {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.kmdb-pdf-viewer__search label {
  display: grid;
  gap: 2px;
  font-size: 12px;
}

.kmdb-pdf-viewer__search input:focus {
  border-color: var(--color-focus);
  outline: 0;
  box-shadow: inset 0 0 0 1.5px var(--color-focus);
}

.kmdb-pdf-viewer__search input {
  width: min(220px, 32vw);
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
}

.kmdb-pdf-viewer__print {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.kmdb-pdf-viewer__print[hidden] {
  display: none;
}

.kmdb-pdf-viewer__print label {
  display: grid;
  gap: 2px;
  font-size: 12px;
}

.kmdb-pdf-viewer__print input:focus {
  border-color: var(--color-focus);
  outline: 0;
  box-shadow: inset 0 0 0 1.5px var(--color-focus);
}

.kmdb-pdf-viewer__print input {
  width: 130px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
}

.kmdb-pdf-viewer__status {
  margin-left: auto;
  color: var(--color-text-02);
  font-size: 13px;
}

.kmdb-pdf-viewer__reading-layout {
  display: grid;
  min-height: 0;
  grid-template-columns: 132px minmax(0, 1fr);
}

@media (max-width: 599px) {
  .kmdb-pdf-viewer__reading-layout {
    grid-template-columns: 84px minmax(0, 1fr);
  }
}

.kmdb-pdf-viewer__thumbnails {
  display: flex;
  margin: 0;
  padding: 12px;
  overflow: auto;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  border-right: 1px solid var(--color-border-disabled);
}

@media (max-width: 599px) {
  .kmdb-pdf-viewer__thumbnails {
    padding: 8px;
    gap: 8px;
  }
}

.kmdb-pdf-viewer__thumbnails button {
  display: grid;
  width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border-disabled);
  color: var(--color-text-02);
  background: var(--color-surface-white);
  font-size: 12px;
  cursor: pointer;
}

.kmdb-pdf-viewer__thumbnails img {
  display: block;
  width: 100%;
  height: auto;
}

.kmdb-pdf-viewer__pages {
  display: flex;
  min-width: 0;
  padding: 20px;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  scroll-behavior: smooth;
}

@media (max-width: 599px) {
  .kmdb-pdf-viewer__pages {
    padding: 10px;
    gap: 12px;
  }
}

.kmdb-pdf-viewer__page {
  position: relative;
  width: min(100%, 760px);
  min-height: 240px;
  flex: 0 0 auto;
  background: var(--color-surface-white);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
}

.kmdb-pdf-viewer__page[data-pdf-page-orientation="landscape"] {
  width: min(100%, 900px);
}

.kmdb-pdf-viewer__page > img {
  display: block;
  width: 100%;
  height: auto;
}

.kmdb-pdf-viewer__page-status {
  display: grid;
  min-height: 240px;
  place-items: center;
  color: var(--color-text-03);
}

.kmdb-pdf-viewer__highlights {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.kmdb-pdf-viewer__highlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgba(255, 221, 0, 0.38);
  stroke: #dc9200;
  stroke-width: 0.2;
}

@media print {
  body.kmdb-is-content-viewer-open > :not(.kmdb-content-viewer) {
    display: none;
  }

  .kmdb-content-viewer[data-viewer-type="pdf"] {
    position: static;
    display: block;
    padding: 0;
  }

  .kmdb-content-viewer[data-viewer-type="pdf"] > button {
    display: none;
  }

  .kmdb-content-viewer[data-viewer-type="pdf"] .kmdb-content-viewer__dialog {
    width: auto;
    height: auto;
    padding: 0;
  }

  .kmdb-content-viewer[data-viewer-type="pdf"]
    .kmdb-content-viewer__dialog
    > header {
    display: none;
  }

  .kmdb-content-viewer[data-viewer-type="pdf"]
    .kmdb-content-viewer__dialog
    > p {
    display: none;
  }

  .kmdb-content-viewer[data-viewer-type="pdf"] .kmdb-content-viewer__stage {
    height: auto;
    overflow: visible;
  }

  .kmdb-pdf-viewer__toolbar {
    display: none;
  }

  .kmdb-pdf-viewer__reading-layout {
    display: block;
  }

  .kmdb-pdf-viewer__thumbnails {
    display: none;
  }

  .kmdb-pdf-viewer__pages {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .kmdb-pdf-viewer__page {
    display: none;
    width: 100%;
    min-height: 0;
    break-after: page;
    box-shadow: none;
  }

  .kmdb-pdf-viewer__page[data-print-selected="true"] {
    display: block;
  }

  .kmdb-pdf-viewer__highlights {
    display: none;
  }
}

/* =============================================================================
   공용 컴포넌트 — 콘텐츠 캐러셀
   카드 이동, 드래그 상태와 스냅 동작
   ============================================================================= */
.kmdb-carousel__viewport {
  overflow: hidden;
}

.kmdb-carousel__track {
  cursor: grab;
  touch-action: pan-y;
  transition: transform 280ms ease;
  user-select: none;
  will-change: transform;
}

.kmdb-carousel__track.kmdb-is-dragging {
  cursor: grabbing;
  transition: none;
}

.kmdb-carousel__track--disabled {
  cursor: auto;
  touch-action: auto;
  user-select: auto;
  will-change: auto;
}

.kmdb-carousel__scroller {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.kmdb-carousel__scroller--single {
  touch-action: pan-y pinch-zoom;
}

.kmdb-carousel__scroller::-webkit-scrollbar {
  display: none;
}

.kmdb-carousel__scroller--snap-proximity {
  scroll-snap-type: x proximity;
}

.kmdb-carousel__scroller--snap-mandatory {
  scroll-snap-type: x mandatory;
}

.kmdb-carousel__scroller--snap-proximity > *,
.kmdb-carousel__scroller--snap-mandatory > * {
  scroll-snap-align: start;
}

.kmdb-carousel__scroller.kmdb-is-scrollable {
  cursor: grab;
  user-select: none;
}

.kmdb-carousel__scroller.kmdb-is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

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

/* =============================================================================
   공용 컴포넌트 — 가로 칩 스크롤
   드래그 상태와 스크롤바 없는 가로 탐색
   ============================================================================= */
.kmdb-horizontal-chip-scroll {
  min-width: 0;
}

.kmdb-horizontal-chip-scroll--edge {
  min-width: 0;
}

@media (max-width: 1439px) {
  .kmdb-horizontal-chip-scroll--edge {
    margin-right: calc(var(--layout-gutter) * -1);
    padding-right: var(--layout-gutter);
  }
}

.kmdb-horizontal-chip-scroll__frame {
  position: relative;
  width: 100%;
  min-width: 0;
}

.kmdb-horizontal-chip-scroll__shade {
  display: none;
}

@media (max-width: 1439px) {
  .kmdb-horizontal-chip-scroll__shade {
    position: absolute;
    z-index: 2;
    top: 0;
    display: block;
    width: 125px;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }
}

.kmdb-horizontal-chip-scroll__shade[hidden] {
  display: none;
}

.kmdb-horizontal-chip-scroll__shade--previous {
  left: 0;
  background: linear-gradient(to left, transparent, var(--color-surface-white));
}

@media (max-width: 599px) {
  .kmdb-horizontal-chip-scroll__frame--edge .kmdb-horizontal-chip-scroll__shade--previous {
    left: calc(var(--layout-gutter) * -1);
  }
}

.kmdb-horizontal-chip-scroll__shade--next {
  right: 0;
  background: linear-gradient(to right, transparent, var(--color-surface-white));
}

@media (max-width: 599px) {
  .kmdb-horizontal-chip-scroll__frame--edge .kmdb-horizontal-chip-scroll__shade--next {
    right: calc(var(--layout-gutter) * -1);
  }
}

.kmdb-horizontal-chip-scroll__control {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.kmdb-horizontal-chip-scroll__control::before {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  border: 0.5px solid var(--color-icon-default);
  border-radius: 50%;
  background: var(--color-surface-white);
  content: "";
}

.kmdb-horizontal-chip-scroll__control:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -7px;
  border-radius: 50%;
}

.kmdb-horizontal-chip-scroll__control--previous {
  left: -10px;
}

@media (max-width: 599px) {
  .kmdb-horizontal-chip-scroll__frame--edge .kmdb-horizontal-chip-scroll__control--previous {
    left: 6px;
  }
}

.kmdb-horizontal-chip-scroll__control--next {
  right: -10px;
}

@media (max-width: 599px) {
  .kmdb-horizontal-chip-scroll__frame--edge .kmdb-horizontal-chip-scroll__control--next {
    right: 6px;
  }
}

.kmdb-horizontal-chip-scroll__control img {
  position: absolute;
  z-index: 1;
  top: 14.8px;
  left: 14.8px;
  width: 14.4px;
  height: 14.4px;
}

[data-horizontal-chip-scroll] {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

[data-horizontal-chip-scroll]::-webkit-scrollbar {
  display: none;
}

[data-horizontal-chip-scroll].kmdb-is-dragging {
  cursor: grabbing;
  user-select: none;
}

[data-horizontal-chip-scroll] button {
  flex: 0 0 auto;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 599px) {
  [data-horizontal-chip-scroll] button {
    min-height: 44px;
  }
}

[data-horizontal-chip-scroll] a {
  flex: 0 0 auto;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 599px) {
  [data-horizontal-chip-scroll] a {
    min-height: 44px;
  }
}

[data-horizontal-chip-scroll].kmdb-is-dragging button {
  cursor: grabbing;
}

[data-horizontal-chip-scroll].kmdb-is-dragging a {
  cursor: grabbing;
}

/* =============================================================================
   공용 컴포넌트 — 페이지 탐색
   브레드크럼·페이지 제목·뒤로가기
   ============================================================================= */
@property --kmdb-breadcrumb-scrollbar-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.kmdb-site-breadcrumb {
  display: flex;
  align-self: flex-start;
  gap: 8px;
  align-items: center;
  color: var(--color-text-03);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

@media (max-width: 599px) {
  .kmdb-site-breadcrumb {
    --kmdb-breadcrumb-scrollbar-color: transparent;

    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--kmdb-breadcrumb-scrollbar-color) transparent;
    transition: --kmdb-breadcrumb-scrollbar-color 240ms ease;
    white-space: nowrap;
  }

  .kmdb-site-breadcrumb::-webkit-scrollbar {
    height: 4px;
    border-radius: 999px;
    background: transparent;
  }

  .kmdb-site-breadcrumb::-webkit-scrollbar-track {
    border-radius: 999px;
    background: transparent;
  }

  .kmdb-site-breadcrumb::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--kmdb-breadcrumb-scrollbar-color);
  }

  .kmdb-site-breadcrumb[data-scrolling] {
    --kmdb-breadcrumb-scrollbar-color: rgba(81, 84, 88, 0.45);
  }

  .kmdb-site-breadcrumb[data-scroll-fading] {
    --kmdb-breadcrumb-scrollbar-color: transparent;
  }

  @supports selector(::-webkit-scrollbar) {
    .kmdb-site-breadcrumb {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }

    .kmdb-site-breadcrumb[data-scrolling] {
      scrollbar-color: auto;
    }

    .kmdb-site-breadcrumb[data-scroll-fading] {
      scrollbar-color: auto;
    }
  }
}

.kmdb-site-breadcrumb a {
  display: inline-grid;
  place-items: center;
  color: inherit;
}

.kmdb-site-breadcrumb:lang(en) {
  max-width: 100%;
  overflow-x: auto;
}

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

.kmdb-site-breadcrumb img {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

.kmdb-site-breadcrumb--original-assets img {
  opacity: 1;
}

.kmdb-site-breadcrumb--original-assets .kmdb-site-breadcrumb__home img {
  width: 18px;
  height: 18px;
}

.kmdb-site-breadcrumb [aria-current="page"] {
  color: var(--color-text-01);
}

.kmdb-site-breadcrumb .kmdb-site-breadcrumb__home {
  width: 18px;
  height: 18px;
  aspect-ratio: 1/1;
}

.kmdb-page-hero {
  width: var(--layout-safe-width);
  margin: 0 auto;
}

@media (max-width: 1439px) {
  .kmdb-page-hero {
    width: 100%;
  }
}

.kmdb-page-hero--stacked {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kmdb-page-hero--section-gap {
  margin-bottom: 40px;
}

.kmdb-page-hero--title-only {
  margin-bottom: 40px;
}

.kmdb-page-tools {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* 상세 페이지의 PC 공통 셸과 본문·사이드바 레이아웃 */
.kmdb-detail-shell {
  width: min(var(--layout-detail-total-width), var(--layout-safe-width));
  margin: 0 auto;
}

@media (max-width: 1439px) {
  .kmdb-detail-shell {
    width: 100%;
  }
}

.kmdb-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--layout-detail-primary-width)) var(--layout-detail-sidebar-width);
  column-gap: 70px;
  align-items: start;
  width: 100%;
  margin-top: var(--layout-detail-breadcrumb-gap);
}

.kmdb-detail-layout__primary {
  min-width: 0;
}

.kmdb-detail-layout__sidebar {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 20px;
  align-self: start;
  align-content: start;
  min-width: 0;
}

.kmdb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-01);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-back-link__icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--color-text-03);
  border-radius: 50%;
}

.kmdb-back-link__icon img {
  width: 16px;
  height: 16px;
}

.kmdb-back-link__icon--asset {
  border: 0;
}

.kmdb-back-link__icon--asset img {
  width: 28px;
  height: 28px;
}

/* =============================================================================
   공용 컴포넌트 — 오버레이 모션
   팝업의 크기와 진입 방향에 따라 최소한의 움직임만 제공
   ============================================================================= */
.kmdb-overlay-motion__backdrop {
  opacity: 0;
}

.kmdb-overlay-motion__panel {
  opacity: 0;
}

.kmdb-overlay-motion--center .kmdb-overlay-motion__panel {
  translate: 0 8px;
  scale: 0.98;
}

.kmdb-overlay-motion--fade .kmdb-overlay-motion__panel {
  translate: none;
  scale: none;
}

.kmdb-overlay-motion--drawer .kmdb-overlay-motion__panel {
  translate: 24px 0;
  scale: none;
}

.kmdb-overlay-motion--sheet .kmdb-overlay-motion__panel {
  translate: 0 24px;
  scale: none;
}

.kmdb-overlay-motion--drawer-sheet .kmdb-overlay-motion__panel {
  translate: 24px 0;
  scale: none;
}

@media (max-width: 599px) {
  .kmdb-overlay-motion--drawer-sheet .kmdb-overlay-motion__panel {
    opacity: 1;
    translate: none;
    transform: translateY(100%);
  }

  .kmdb-overlay-motion.kmdb-overlay-motion--drawer-sheet.kmdb-is-open
    > .kmdb-overlay-motion__panel,
  .kmdb-overlay-motion.kmdb-overlay-motion--drawer-sheet.kmdb-is-closing
    > .kmdb-overlay-motion__panel {
    transition: transform 0.18s ease;
  }

  .kmdb-overlay-motion.kmdb-overlay-motion--drawer-sheet.kmdb-is-open
    > .kmdb-overlay-motion__panel {
    transform: translateY(0);
  }
}

@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .kmdb-overlay-motion.kmdb-overlay-motion--drawer-sheet.kmdb-is-open
    > .kmdb-overlay-motion__panel,
  .kmdb-overlay-motion.kmdb-overlay-motion--drawer-sheet.kmdb-is-closing
    > .kmdb-overlay-motion__panel {
    transition-duration: 0s;
  }
}

.kmdb-overlay-motion--center-sheet .kmdb-overlay-motion__panel {
  translate: 0 8px;
  scale: 0.98;
}

@media (max-width: 599px) {
  .kmdb-overlay-motion--center-sheet .kmdb-overlay-motion__panel {
    opacity: 1;
    translate: none;
    scale: none;
    transform: translateY(100%);
  }

  .kmdb-overlay-motion.kmdb-overlay-motion--center-sheet.kmdb-is-open
    > .kmdb-overlay-motion__panel,
  .kmdb-overlay-motion.kmdb-overlay-motion--center-sheet.kmdb-is-closing
    > .kmdb-overlay-motion__panel {
    transition: transform 0.18s ease;
  }

  .kmdb-overlay-motion.kmdb-overlay-motion--center-sheet.kmdb-is-open
    > .kmdb-overlay-motion__panel {
    transform: translateY(0);
  }
}

@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .kmdb-overlay-motion.kmdb-overlay-motion--center-sheet.kmdb-is-open
    > .kmdb-overlay-motion__panel,
  .kmdb-overlay-motion.kmdb-overlay-motion--center-sheet.kmdb-is-closing
    > .kmdb-overlay-motion__panel {
    transition-duration: 0s;
  }
}

.kmdb-overlay-motion--root-backdrop {
  opacity: 0;
}

.kmdb-overlay-motion--root-backdrop.kmdb-is-open {
  opacity: 1;
}

.kmdb-overlay-motion--panel > .kmdb-overlay-motion__panel {
  opacity: 1;
}

.kmdb-overlay-motion--anchored {
  opacity: 0;
  translate: 0 -6px;
}

.kmdb-overlay-motion--native-center {
  opacity: 0;
  translate: 0 8px;
  scale: 0.98;
}

.kmdb-overlay-motion--native-center::backdrop,
.kmdb-overlay-motion--anchored::backdrop {
  opacity: 0;
}

.kmdb-overlay-motion.kmdb-is-open .kmdb-overlay-motion__backdrop,
.kmdb-overlay-motion.kmdb-is-open .kmdb-overlay-motion__panel,
.kmdb-overlay-motion.kmdb-is-closing .kmdb-overlay-motion__backdrop,
.kmdb-overlay-motion.kmdb-is-closing .kmdb-overlay-motion__panel,
.kmdb-overlay-motion--native-center.kmdb-is-open,
.kmdb-overlay-motion--native-center.kmdb-is-closing,
.kmdb-overlay-motion--root-backdrop.kmdb-is-open,
.kmdb-overlay-motion--root-backdrop.kmdb-is-closing {
  transition:
    opacity 180ms ease-out,
    translate 180ms ease-out,
    scale 180ms ease-out;
}

.kmdb-overlay-motion--anchored.kmdb-is-open,
.kmdb-overlay-motion--anchored.kmdb-is-closing {
  transition:
    opacity 160ms ease-out,
    translate 160ms ease-out;
}

.kmdb-overlay-motion--native-center.kmdb-is-open::backdrop,
.kmdb-overlay-motion--native-center.kmdb-is-closing::backdrop,
.kmdb-overlay-motion--anchored.kmdb-is-open::backdrop,
.kmdb-overlay-motion--anchored.kmdb-is-closing::backdrop {
  transition: opacity 180ms ease-out;
}

.kmdb-overlay-motion.kmdb-is-open > .kmdb-overlay-motion__backdrop,
.kmdb-overlay-motion.kmdb-is-open > .kmdb-overlay-motion__panel,
.kmdb-overlay-motion--native-center.kmdb-is-open,
.kmdb-overlay-motion--anchored.kmdb-is-open {
  opacity: 1;
  translate: 0;
  scale: 1;
}

.kmdb-overlay-motion--native-center.kmdb-is-open::backdrop,
.kmdb-overlay-motion--anchored.kmdb-is-open::backdrop {
  opacity: 1;
}

@media (max-width: 1439px) {
  .kmdb-overlay-motion--panel > .kmdb-overlay-motion__panel {
    opacity: 0;
    translate: 0 12px;
    scale: none;
  }

  .kmdb-overlay-motion--panel.kmdb-is-open > .kmdb-overlay-motion__panel {
    opacity: 1;
    translate: 0;
  }
}

@media (min-width: 600px) {
  .kmdb-overlay-motion--sheet > .kmdb-overlay-motion__backdrop,
  .kmdb-overlay-motion--sheet > .kmdb-overlay-motion__panel {
    opacity: 1;
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-overlay-motion,
  .kmdb-overlay-motion::backdrop,
  .kmdb-overlay-motion__backdrop,
  .kmdb-overlay-motion__panel {
    transition-duration: 0.01ms;
  }

  .kmdb-overlay-motion.kmdb-is-open .kmdb-overlay-motion__backdrop,
  .kmdb-overlay-motion.kmdb-is-open .kmdb-overlay-motion__panel,
  .kmdb-overlay-motion.kmdb-is-closing .kmdb-overlay-motion__backdrop,
  .kmdb-overlay-motion.kmdb-is-closing .kmdb-overlay-motion__panel {
    transition-duration: 0.01ms;
  }
}

/* =============================================================================
   공용 컴포넌트 — 반응형 상세 정보 대화상자
   데스크톱 사이드패널을 태블릿과 모바일에서 중앙 팝업으로 전환
   ============================================================================= */
.kmdb-responsive-information-dialog {
  min-width: 0;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog[data-responsive-information-dialog] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    width: auto;
    height: 100dvh;
    min-height: 100dvh;
    align-content: center;
    align-self: stretch;
    margin: 0;
    padding: 32px;
    place-items: center;
  }
}

@media (max-width: 599px) {
  .kmdb-responsive-information-dialog[data-responsive-information-dialog] {
    padding: 16px;
  }
}

.kmdb-responsive-information-dialog.kmdb-is-responsive-dialog-open {
  min-width: 0;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog.kmdb-is-responsive-dialog-open {
    display: grid;
  }
}

.kmdb-responsive-information-dialog__backdrop {
  display: none;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog__backdrop {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--color-background-bg-dim, rgba(0, 0, 0, 0.5));
  }
}

.kmdb-responsive-information-dialog__panel {
  position: relative;
  width: 100%;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog__panel[data-responsive-information-panel] {
    z-index: 1;
    display: none;
    width: min(480px, 100%);
    height: calc(100dvh - 64px);
    max-height: calc(100dvh - 64px);
    overflow: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 599px) {
  .kmdb-responsive-information-dialog__panel[data-responsive-information-panel] {
    width: min(343px, 100%);
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
  }
}

.kmdb-responsive-information-dialog__panel.kmdb-is-responsive-panel-open {
  min-width: 0;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog__panel.kmdb-is-responsive-panel-open {
    display: flex;
    flex-direction: column;
  }
}

.kmdb-responsive-information-dialog__close {
  display: none;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog__close {
    position: absolute;
    top: 16px;
    right: 6px;
    z-index: 2;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-white);
  }
}

.kmdb-responsive-information-dialog__close img {
  width: 24px;
  height: 24px;
}

@media (max-width: 1439px) {
  .kmdb-responsive-information-dialog__panel > h2 {
    flex: none;
    height: 52px;
    min-height: 52px;
    padding: 20px 64px 0 0;
    font-size: 20px;
  }
}

@media (max-width: 599px) {
  .kmdb-responsive-information-dialog__panel > h2 {
    font-size: 18px;
  }
}

/* =============================================================================
   공용 컴포넌트 — 상세 액션
   상세 화면의 보조 동작 버튼
   ============================================================================= */
.kmdb-responsive-detail-actions {
  flex: none;
}

@media (max-width: 1439px) {
  .kmdb-responsive-detail-actions {
    position: fixed;
    bottom: 20px;
    left: calc(50% - var(--page-scrollbar-width, 0px) / 2);
    z-index: var(--layout-page-floating-z-index);
    width: min(340px, calc(100vw - 32px));
    transform: translateX(-50%);
  }
}

@media (max-width: 1439px) {
  .kmdb-responsive-detail-actions:lang(en) {
    width: min(440px, calc(100vw - 32px));
  }
}

.kmdb-detail-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

@media (max-width: 599px) {
  .kmdb-detail-actions {
    max-width: 100%;
    overflow-x: auto;
  }
}

.kmdb-detail-actions--floating {
  position: relative;
}

@media (max-width: 1439px) {
  .kmdb-detail-actions--floating {
    width: 100%;
    height: 56px;
    gap: 0;
    overflow: hidden;
    border-radius: 56px;
    background: var(--color-surface-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 599px) {
  .kmdb-detail-actions--floating:lang(en) {
    height: auto;
  }
}

.kmdb-detail-actions button {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border-disabled);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-text-01);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.kmdb-detail-actions--floating button {
  flex: none;
}

@media (max-width: 1439px) {
  .kmdb-detail-actions--floating button {
    flex: 1;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    padding: 16px;
    border: 0;
    border-radius: 56px;
    font-size: 16px;
  }
}

@media (min-width: 600px) and (max-width: 1439px) {
  .kmdb-detail-actions--floating:lang(en) button {
    flex: 1 1 auto;
  }
}

@media (max-width: 599px) {
  .kmdb-detail-actions--floating:lang(en) button {
    height: auto;
    min-height: 64px;
    flex-direction: column;
    padding: 8px 4px;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
  }
}

.kmdb-detail-actions .kmdb-detail-actions__recent {
  display: none;
}

@media (max-width: 1439px) {
  .kmdb-detail-actions .kmdb-detail-actions__recent {
    display: inline-flex;
  }
}

.kmdb-detail-actions button:active {
  transform: scale(0.96);
}

.kmdb-detail-actions button.kmdb-is-pulsing {
  animation: detail-action-pulse 220ms ease;
}

.kmdb-detail-actions img {
  width: 18px;
  height: 18px;
}

@media (min-width: 1440px) {
  .kmdb-detail-actions button.kmdb-detail-actions__button--compact-primary {
    width: auto;
    min-width: 60px;
    height: 32px;
    min-height: 32px;
    padding: 8px;
    border-color: var(--color-icon-default);
    background: var(--color-icon-default);
    color: var(--color-surface-white);
    font-size: var(--typo-body-2-size);
  }

  .kmdb-detail-actions button.kmdb-detail-actions__button--compact-primary img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
  }
}

.kmdb-detail-actions--floating img {
  flex: none;
}

@media (max-width: 1439px) {
  .kmdb-detail-actions--floating img {
    width: 20px;
    height: 20px;
  }
}

@keyframes detail-action-pulse {
  50% {
    transform: scale(0.94);
  }
}

/* =============================================================================
   공용 컴포넌트 — 디스클로저 모션
   접힘 패널의 높이 전환 중 내용 클리핑
   ============================================================================= */

.kmdb-disclosure-motion {
  overflow: hidden;
}

/* =============================================================================
   공용 컴포넌트 — 멀티셀렉트 디스클로저
   인라인 칩 목록을 펼치는 복수 선택
   ============================================================================= */

.kmdb-multiselect-disclosure {
  display: grid;
  gap: 10px;
  justify-items: start;
  width: 100%;
}

.kmdb-multiselect-disclosure__trigger {
  display: inline-flex;
  min-width: 84px;
  height: 48px;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid #dbdee1;
  border-radius: 10px;
  color: #838689;
  background: #ffffff;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  letter-spacing: -0.6px;
}

.kmdb-multiselect-disclosure.kmdb-is-active
  .kmdb-multiselect-disclosure__trigger {
  min-width: 90px;
  border-color: #222222;
  color: #ffffff;
  background: #222222;
}

.kmdb-multiselect-disclosure .kmdb-multiselect-disclosure__trigger:disabled {
  border-color: var(--color-disabled);
  color: var(--color-text-03);
  background: var(--color-disabled-bg);
  cursor: not-allowed;
}

.kmdb-multiselect-disclosure__icon {
  width: 20px;
  height: 20px;
}

.kmdb-multiselect-disclosure.kmdb-is-active .kmdb-multiselect-disclosure__icon {
  filter: brightness(0) invert(1);
}

.kmdb-multiselect-disclosure .kmdb-multiselect-disclosure__trigger:disabled .kmdb-multiselect-disclosure__icon {
  filter: grayscale(1);
  opacity: 0.55;
}

.kmdb-multiselect-disclosure__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* =============================================================================
   공용 컴포넌트 — 선택 드롭다운
   요약 트리거·선택 메뉴·필터 칩
   ============================================================================= */

.kmdb-select-dropdown {
  position: relative;
}

.kmdb-select-dropdown--form {
  width: 460px;
}

@media (max-width: 1439px) {
  .kmdb-select-dropdown--form {
    width: 358px;
  }
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--form {
    width: 342px;
    max-width: 100%;
  }
}

.kmdb-select-dropdown__details {
  position: relative;
}

.kmdb-select-dropdown__details summary {
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--color-text-01);
  cursor: pointer;
  list-style: none;
}

.kmdb-select-dropdown__details summary::-webkit-details-marker {
  display: none;
}

.kmdb-select-dropdown__details[open] .kmdb-select-dropdown__icon {
  transform: rotate(180deg);
}

.kmdb-select-dropdown--form .kmdb-select-dropdown__details summary {
  width: 100%;
  height: 56px;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--color-divider-02, #e7ebee);
  border-radius: 16px;
  background: var(--color-surface-white);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
}

.kmdb-select-dropdown--responsive-form .kmdb-select-dropdown__details summary {
  height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--responsive-form .kmdb-select-dropdown__details summary {
    height: 56px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 16px;
  }
}

.kmdb-select-dropdown__icon {
  display: var(--select-dropdown-icon-display, block);
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: var(--color-icon-gray, #838689);
  mask: url("/icons/chevron/chevron-down.svg") center/24px 24px no-repeat;
  transition: transform 160ms ease;
}

.kmdb-select-dropdown--responsive-form .kmdb-select-dropdown__icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  mask-size: 20px 20px;
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--responsive-form .kmdb-select-dropdown__icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    mask-size: 24px 24px;
  }
}

.kmdb-select-dropdown__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  width: 142px;
  max-height: 280px;
  flex-direction: column;
  overflow-y: auto;
  border-radius: 10px;
  background: var(--color-surface-white);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.kmdb-select-dropdown__options {
  display: contents;
}

.kmdb-select-dropdown__menu .kmdb-select-dropdown__sheet-handle,
.kmdb-select-dropdown__sheet-title,
.kmdb-select-dropdown__sheet-actions {
  display: none;
}

@media (max-width: 599px) {
  .kmdb-select-dropdown__menu {
    width: min(142px, calc(100vw - 32px));
  }
}

.kmdb-select-dropdown--form .kmdb-select-dropdown__menu {
  right: auto;
  left: 0;
  width: 100%;
  max-height: 194px;
  border: 1px solid var(--color-divider-02, #e7ebee);
  border-radius: 12px;
  scrollbar-width: none;
}

.kmdb-select-dropdown--responsive-form .kmdb-select-dropdown__menu {
  max-height: 166px;
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--responsive-form .kmdb-select-dropdown__menu {
    max-height: 194px;
  }
}

.kmdb-select-dropdown--form .kmdb-select-dropdown__menu::-webkit-scrollbar {
  display: none;
}

.kmdb-select-dropdown__menu button {
  gap: 4px;
  position: relative;
  display: flex;
  width: 100%;
  height: 37px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--color-text-01);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.kmdb-select-dropdown--form .kmdb-select-dropdown__menu button {
  gap: 8px;
  height: 56px;
  min-height: 56px;
  padding: 14px 16px;
  color: var(--color-text-02, #515458);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
}

.kmdb-select-dropdown--responsive-form .kmdb-select-dropdown__menu button {
  gap: 4px;
  height: 48px;
  min-height: 48px;
  padding: 10px 16px;
  font-size: 14px;
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--responsive-form .kmdb-select-dropdown__menu button {
    gap: 8px;
    height: 56px;
    min-height: 56px;
    padding: 14px 16px;
    font-size: 16px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .kmdb-select-dropdown--form .kmdb-select-dropdown__menu button:hover {
    background: var(--color-background-gray-subtler, #f5f8fb);
  }
}

.kmdb-select-dropdown__menu a {
  gap: 4px;
  position: relative;
  display: flex;
  width: 100%;
  height: 37px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--color-text-01);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .kmdb-select-dropdown__menu button:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-01);
  }
}

@media (hover: hover) and (pointer: fine) {
  .kmdb-select-dropdown__menu a:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-01);
  }
}

.kmdb-select-dropdown__menu button:focus-visible {
  outline: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-01);
}

.kmdb-select-dropdown__menu button:focus-visible::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 3px solid var(--color-focus);
  content: "";
  pointer-events: none;
}

.kmdb-select-dropdown__menu a:focus-visible {
  outline: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-01);
}

.kmdb-select-dropdown__menu a:focus-visible::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 3px solid var(--color-focus);
  content: "";
  pointer-events: none;
}

.kmdb-select-dropdown__menu button[aria-selected="true"] {
  background: transparent;
  color: var(--color-text-01);
  font-weight: var(--font-weight-semibold);
}

.kmdb-select-dropdown__menu button[role="option"]::before {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  mask: url("/icons/action/check.svg") center/16px 16px no-repeat;
  -webkit-mask: url("/icons/action/check.svg") center/16px 16px no-repeat;
  content: "";
  visibility: hidden;
}

.kmdb-select-dropdown__menu button[aria-selected="true"]::before {
  visibility: visible;
}

.kmdb-select-dropdown--form
  .kmdb-select-dropdown__menu
  button[aria-selected="true"] {
  background: transparent;
  font-weight: var(--font-weight-semibold);
}

.kmdb-select-dropdown--form
  .kmdb-select-dropdown__menu
  button[role="option"]::before {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  mask: url("/icons/action/check.svg") center/20px 20px no-repeat;
  -webkit-mask: url("/icons/action/check.svg") center/20px 20px no-repeat;
}

.kmdb-select-dropdown--responsive-form
  .kmdb-select-dropdown__menu
  button[role="option"]::before {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  mask: url("/icons/action/check.svg") center/16px 16px no-repeat;
  -webkit-mask: url("/icons/action/check.svg") center/16px 16px no-repeat;
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--responsive-form
    .kmdb-select-dropdown__menu
    button[role="option"]::before {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    mask: url("/icons/action/check.svg") center/20px 20px no-repeat;
    -webkit-mask: url("/icons/action/check.svg") center/20px 20px no-repeat;
  }
}

.kmdb-select-dropdown__menu a[aria-selected="true"] {
  background: transparent;
  color: var(--color-text-01);
  font-weight: var(--font-weight-semibold);
}

.kmdb-select-dropdown__menu a[role="option"]::before {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  mask: url("/icons/action/check.svg") center/16px 16px no-repeat;
  -webkit-mask: url("/icons/action/check.svg") center/16px 16px no-repeat;
  content: "";
  visibility: hidden;
}

.kmdb-select-dropdown__menu a[aria-selected="true"]::before {
  visibility: visible;
}

.kmdb-select-dropdown--sort .kmdb-select-dropdown__details summary {
  font-size: var(--typo-headline-1-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-select-dropdown--sort .kmdb-select-dropdown__menu {
  width: 120px;
}

.kmdb-select-dropdown--compact .kmdb-select-dropdown__details summary {
  gap: 4px;
  font-size: var(--typo-headline-1-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-select-dropdown--compact .kmdb-select-dropdown__icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  background: var(--color-icon-gray, #838689);
  mask: url("/icons/chevron/sort-chevron.svg") center/9.5px 15.5px no-repeat;
  transform: rotate(-90deg);
}

.kmdb-select-dropdown--compact
  .kmdb-select-dropdown__details[open]
  .kmdb-select-dropdown__icon {
  transform: rotate(90deg);
}

.kmdb-select-dropdown--compact .kmdb-select-dropdown__menu {
  width: 120px;
}

.kmdb-select-dropdown--filter-chip .kmdb-select-dropdown__details summary {
  height: 40px;
  gap: 8px;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--color-icon-default);
  border-radius: 999px;
  background: var(--color-surface-white);
  font-size: var(--typo-body-4-size);
  line-height: 1.5;
}

@media (max-width: 899px) {
  .kmdb-select-dropdown--filter-chip .kmdb-select-dropdown__details summary:focus-visible {
    outline-offset: -3px;
  }
}

.kmdb-select-dropdown--filter-chip .kmdb-select-dropdown__icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  background: var(--color-icon-default);
  mask: url("/icons/chevron/chevron-fill-down.svg") center/18px 18px no-repeat;
}

.kmdb-select-dropdown--filter-chip .kmdb-select-dropdown__details[open] summary {
  border-color: var(--color-surface-black);
  background: var(--color-surface-black);
  color: var(--color-surface-white);
}

.kmdb-select-dropdown--filter-chip
  .kmdb-select-dropdown__details[open]
  .kmdb-select-dropdown__icon {
  background: var(--color-surface-white);
}

.kmdb-select-dropdown--filter-chip .kmdb-select-dropdown__menu {
  top: calc(100% + 4px);
  right: auto;
  left: 0;
  width: 120px;
  max-height: 185px;
}

.kmdb-select-dropdown--search-scope .kmdb-select-dropdown__details,
.kmdb-select-dropdown--search-scope .kmdb-select-dropdown__details summary {
  width: 100%;
  height: 100%;
}

.kmdb-select-dropdown--search-scope .kmdb-select-dropdown__details summary {
  justify-content: space-between;
  padding: 0 20px 0 19px;
  font-size: var(--typo-body-5-size);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 1439px) {
  .kmdb-select-dropdown--search-scope .kmdb-select-dropdown__details summary {
    padding-right: 18.5px;
  }
}

.kmdb-select-dropdown--search-scope .kmdb-select-dropdown__icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  mask-size: 28px 28px;
}

.kmdb-select-dropdown--search-scope .kmdb-select-dropdown__menu {
  top: calc(100% + 4px);
  right: auto;
  left: 0;
  width: 100%;
}

.kmdb-select-dropdown--native-mobile > .kmdb-select-dropdown__native-control {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--native-mobile > .kmdb-select-dropdown__native-control {
    position: static;
    width: 100%;
    height: 100%;
    padding: 0 44px 0 18.5px;
    margin: 0;
    overflow: visible;
    clip: auto;
    appearance: none;
    border: 0;
    background: url("/icons/chevron/chevron-down.svg") right 18.5px center/24px 24px no-repeat;
    color: var(--color-text-01);
    font: inherit;
    font-size: var(--typo-body-4-size);
    font-weight: var(--font-weight-semibold);
    white-space: normal;
  }
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--native-mobile .kmdb-select-dropdown__details {
    display: none;
  }
}

.kmdb-select-dropdown__text {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.kmdb-select-dropdown--filter-chip .kmdb-select-dropdown__text {
  letter-spacing: var(--letter-spacing-figma-source);
}

@media (max-width: 899px) {
  .kmdb-select-dropdown--filter-chip .kmdb-select-dropdown__text {
    font-size: 14px;
  }
}

@media (max-width: 599px) {
  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__details[open]:not([data-custom-select-modal])::before {
    position: fixed;
    z-index: calc(var(--layout-bottom-sheet-z-index) - 1);
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    content: "";
  }

  .kmdb-select-dropdown__sheet-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .kmdb-select-dropdown__sheet-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__menu {
    position: fixed;
    z-index: var(--layout-bottom-sheet-z-index);
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    max-height: min(calc(100dvh - 16px), 796px);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: var(--color-surface-white);
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.06);
    overscroll-behavior: contain;
    transform: translateY(100%);
  }

  .kmdb-select-dropdown--sheet
    .kmdb-select-dropdown__details[data-state="open"]
    .kmdb-select-dropdown__menu {
    transition: transform 0.18s ease;
    transform: translateY(0);
  }

  .kmdb-select-dropdown--sheet
    .kmdb-select-dropdown__details[data-state="closing"]
    .kmdb-select-dropdown__menu {
    transition: transform 0.18s ease;
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-handle {
    display: grid;
    width: 100%;
    height: 28px;
    min-height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border: 0;
    place-items: center;
    background: transparent;
    cursor: pointer;
    touch-action: none;
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-handle span {
    width: 75px;
    height: 4px;
    border-radius: 27px;
    background: var(--color-surface-disabled);
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-title {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px;
    color: var(--color-text-01);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-title:focus {
    outline: 0;
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__options {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;
  }

  .kmdb-select-dropdown--filter-chip.kmdb-select-dropdown--sheet .kmdb-select-dropdown__options {
    max-height: 450px;
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__options button {
    height: 50px;
    min-height: 50px;
    gap: 8px;
    padding: 13px 16px;
    font-size: var(--typo-body-4-size);
    font-weight: var(--font-weight-regular);
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__options button::before {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: var(--color-icon-gray);
    content: "";
    mask: url("/icons/action/check.svg") center/24px 24px no-repeat;
    -webkit-mask: url("/icons/action/check.svg") center/24px 24px no-repeat;
    visibility: hidden;
  }

  .kmdb-select-dropdown--sheet
    .kmdb-select-dropdown__options
    button[aria-selected="true"] {
    gap: 8px;
    font-weight: var(--font-weight-semibold);
  }

  .kmdb-select-dropdown--sheet
    .kmdb-select-dropdown__options
    button[aria-selected="true"]::before {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: var(--color-icon-default);
    mask: url("/icons/action/check.svg") center/24px 24px no-repeat;
    -webkit-mask: url("/icons/action/check.svg") center/24px 24px no-repeat;
    visibility: visible;
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding: 10px 16px;
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-action {
    display: inline-flex;
    width: auto;
    min-width: 100px;
    height: 56px;
    min-height: 56px;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 0;
    border-radius: 10px;
    font-size: var(--typo-body-4-size);
    font-weight: var(--font-weight-semibold);
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-action--cancel,
  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-action--cancel:hover,
  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-action--cancel:focus-visible {
    background: var(--button-secondary-fill);
    color: var(--color-text-01);
  }

  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-action--apply,
  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-action--apply:hover,
  .kmdb-select-dropdown--sheet .kmdb-select-dropdown__sheet-action--apply:focus-visible {
    background: var(--button-primary-fill);
    color: var(--color-surface-white);
  }

  body:has(.kmdb-select-dropdown--sheet .kmdb-select-dropdown__details[open]) {
    overflow: hidden;
  }
}

@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .kmdb-select-dropdown--sheet
    .kmdb-select-dropdown__details[data-state="open"]
    .kmdb-select-dropdown__menu,
  .kmdb-select-dropdown--sheet
    .kmdb-select-dropdown__details[data-state="closing"]
    .kmdb-select-dropdown__menu {
    transition-duration: 0s;
  }
}

.kmdb-select-dropdown--form > .kmdb-select-dropdown__field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-01);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.kmdb-select-dropdown__label {
  font-weight: var(--font-weight-semibold);
}

.kmdb-select-dropdown--form .kmdb-select-dropdown__value {
  color: var(--color-text-01);
}

.kmdb-select-dropdown--form[data-custom-select-empty="true"] .kmdb-select-dropdown__value {
  color: var(--color-text-03);
}

.kmdb-select-dropdown__value {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--font-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kmdb-select-dropdown--sort .kmdb-select-dropdown__value {
  color: var(--color-text-01);
  font-weight: var(--font-weight-bold);
}

.kmdb-select-dropdown--strong-value .kmdb-select-dropdown__value {
  font-weight: var(--font-weight-bold);
}

.kmdb-select-dropdown__options {
  display: contents;
}

.kmdb-date-picker-input[readonly] {
  padding-right: 48px !important;
  background-color: var(--color-surface-white);
  background-image: url("/icons/action/calendar.svg");
  background-position: right 16px center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.kmdb-date-picker {
  position: fixed;
  inset: auto;
  width: 343px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  margin: 0;
  padding: 16px 10px;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  background: var(--color-surface-white);
  color: #404040;
  box-shadow: 0 2px 16px rgb(0 0 0 / 8%);
  font-family: var(--font-family-base);
  font-size: var(--typo-body-3-size);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-date-picker::backdrop {
  background: transparent;
}

.kmdb-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.kmdb-date-picker__navigation {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  background: var(--color-surface-white);
  cursor: pointer;
}

.kmdb-date-picker__navigation:disabled {
  opacity: 0.3;
  cursor: default;
}

.kmdb-date-picker__navigation img {
  width: 7.5px;
  height: 13.5px;
}

.kmdb-date-picker__navigation[data-picker-action="next"] img {
  transform: rotate(180deg);
}

.kmdb-date-picker__heading {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--typo-headline-2-size);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.kmdb-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 4px;
  justify-items: center;
}

.kmdb-date-picker__cell {
  display: grid;
  place-items: center;
  width: 100%;
  height: 40px;
}

.kmdb-date-picker__cell[data-range="start"] {
  background: linear-gradient(to right, transparent 50%, var(--color-background-gray-subtler) 50%);
}

.kmdb-date-picker__cell[data-range="middle"] {
  background: var(--color-background-gray-subtler);
}

.kmdb-date-picker__cell[data-range="end"] {
  background: linear-gradient(to right, var(--color-background-gray-subtler) 50%, transparent 50%);
}

.kmdb-date-picker[data-picker-view="year"] .kmdb-date-picker__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.kmdb-date-picker[data-picker-view="month"] .kmdb-date-picker__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.kmdb-date-picker__weekday {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-03);
}

.kmdb-date-picker__weekday[data-weekday="0"] {
  color: #ff1f1f;
}

.kmdb-date-picker__weekday[data-weekday="6"] {
  color: #015ab2;
}

.kmdb-date-picker__option {
  display: grid;
  place-items: center;
  width: 40px;
  max-width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.kmdb-date-picker__option:hover {
  background: var(--color-background-gray-subtler);
}

.kmdb-date-picker__option[aria-pressed="true"] {
  background: var(--color-surface-black);
  color: var(--color-surface-white);
}

.kmdb-date-picker__option:disabled {
  opacity: 0.3;
  cursor: default;
}

.kmdb-date-picker__option[aria-pressed="true"]:disabled {
  opacity: 1;
}

.kmdb-date-picker[data-picker-view="year"] .kmdb-date-picker__option {
  width: 100%;
  height: 44px;
  border-radius: 10px;
}

.kmdb-date-picker[data-picker-view="month"] .kmdb-date-picker__option {
  width: 100%;
  height: 44px;
  border-radius: 10px;
}

.kmdb-date-picker__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 0 16px;
}

.kmdb-date-picker__cancel {
  height: 61px;
  min-width: 0;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  background: var(--color-background-gray-subtler);
  color: var(--color-text-01);
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-date-picker__confirm {
  height: 61px;
  min-width: 0;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  letter-spacing: var(--letter-spacing-figma-source);
}

.kmdb-date-field {
  position: relative;
  display: block;
  width: 100%;
}

.kmdb-date-field input[readonly] {
  padding-right: 48px;
  background-image: url("/icons/action/calendar.svg");
  background-position: right 16px center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.kmdb-date-field input[readonly]::-webkit-calendar-picker-indicator {
  display: none;
}

.kmdb-date-field__placeholder {
  position: absolute;
  top: 50%;
  left: 16px;
  color: var(--color-text-03);
  font: inherit;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  pointer-events: none;
  transform: translateY(-50%);
}

.kmdb-date-field[data-date-field-empty="false"] .kmdb-date-field__placeholder {
  display: none;
}

.kmdb-date-field[data-date-field-editing="true"] .kmdb-date-field__placeholder {
  display: none;
}

.kmdb-date-field[data-date-field-empty="true"][data-date-field-editing="false"]
  input {
  color: transparent;
}

.kmdb-date-field[data-date-field-empty="true"][data-date-field-editing="false"]
  input::-webkit-datetime-edit {
  color: transparent;
  opacity: 0;
  -webkit-text-fill-color: transparent;
}

/* =============================================================================
   공용 상태와 데이터 관계표
   비동기 상태·숨김 처리와 상세 관계표 열 배치
   ============================================================================= */

@keyframes festival-catalog-loading {
  to {
    background-position: -200% 0;
  }
}

[data-list-watch-dialog] [hidden] {
  display: none;
}

@keyframes article-featured-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes article-featured-fade {
  from {
    opacity: 0.7;
  }

  to {
    opacity: 1;
  }
}

.kmdb-loading-surface.kmdb-is-loading-dimmed {
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

/* 목록 스켈레톤은 실제 카드 노드의 복제본이다.
   크기, 간격과 반응형은 원본 카드 CSS가 그대로 소유하므로 여기서는 색과 shimmer만 덮는다.
   카드 규칙이 파일 뒤쪽에 있어 명시도를 이기려고 `.kmdb-skeleton` 하위 형태로 적는다. */

@keyframes kmdb-skeleton-shimmer {
  to {
    background-position: -200% 0;
  }
}

.kmdb-skeleton {
  pointer-events: none;
  user-select: none;
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.kmdb-skeleton * {
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.kmdb-skeleton img,
.kmdb-skeleton svg,
.kmdb-skeleton video {
  visibility: hidden;
}

.kmdb-skeleton .kmdb-skeleton__block,
.kmdb-skeleton .kmdb-skeleton__line {
  border-color: transparent;
  background: linear-gradient(90deg, #f3f5f7 25%, #e7ebee 50%, #f3f5f7 75%);
  background-size: 200% 100%;
  box-shadow: none;
  color: transparent !important;
  animation: kmdb-skeleton-shimmer 1.2s linear infinite;
}

/* .kmdb-image-frame의 배경 !important가 shimmer를 지우므로 같은 강도로 되돌린다. */
.kmdb-skeleton .kmdb-image-frame.kmdb-skeleton__block {
  background: linear-gradient(90deg, #f3f5f7 25%, #e7ebee 50%, #f3f5f7 75%) !important;
  background-size: 200% 100% !important;
}

/* 칩처럼 자식을 남겨 실제 폭을 유지하는 블록은 자식의 고유 글자색까지 가린다. */
.kmdb-skeleton .kmdb-skeleton__block * {
  color: transparent !important;
}

.kmdb-skeleton .kmdb-skeleton__line {
  border-radius: 4px;
}

.kmdb-skeleton::before {
  visibility: hidden !important;
}

.kmdb-skeleton::after {
  visibility: hidden !important;
}

.kmdb-skeleton *::before {
  visibility: hidden !important;
}

.kmdb-skeleton *::after {
  visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-skeleton .kmdb-skeleton__block,
  .kmdb-skeleton .kmdb-skeleton__line {
    animation: none;
  }
}

[hidden] {
  display: none !important;
}

[data-db-detail-video-relation="true"] th:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-video-relation="true"] td:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-video-relation="true"] th:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-video-relation="true"] td:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-video-relation="true"] th:nth-child(3) {
  width: 36%;
}

[data-db-detail-video-relation="true"] td:nth-child(3) {
  width: 36%;
}

[data-db-detail-video-relation="true"] th:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-video-relation="true"] td:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-video-relation="true"] th:nth-child(5) {
  width: 20%;
  text-align: center;
}

[data-db-detail-video-relation="true"] td:nth-child(5) {
  width: 20%;
  text-align: center;
}

[data-db-detail-sound-relation="true"] th:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-sound-relation="true"] td:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-sound-relation="true"] th:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-sound-relation="true"] td:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-photo-relation="true"] th:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-photo-relation="true"] td:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-photo-relation="true"] th:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-photo-relation="true"] td:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-poster-relation="true"] th:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-poster-relation="true"] td:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-poster-relation="true"] th:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-poster-relation="true"] td:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-promotion-relation="true"] th:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-promotion-relation="true"] td:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-promotion-relation="true"] th:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-promotion-relation="true"] td:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-scenario-relation="true"] th:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-scenario-relation="true"] td:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-scenario-relation="true"] th:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-scenario-relation="true"] td:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-document-relation="true"] th:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-document-relation="true"] td:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-document-relation="true"] th:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-document-relation="true"] td:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-museum-relation="true"] th:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-museum-relation="true"] td:nth-child(1) {
  width: 12%;
  text-align: center;
}

[data-db-detail-museum-relation="true"] th:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-museum-relation="true"] td:nth-child(2) {
  width: 12%;
  text-align: center;
}

[data-db-detail-sound-relation="true"] th:nth-child(3) {
  width: 56%;
}

[data-db-detail-sound-relation="true"] td:nth-child(3) {
  width: 56%;
}

[data-db-detail-photo-relation="true"] th:nth-child(3) {
  width: 56%;
}

[data-db-detail-photo-relation="true"] td:nth-child(3) {
  width: 56%;
}

[data-db-detail-poster-relation="true"] th:nth-child(3) {
  width: 56%;
}

[data-db-detail-poster-relation="true"] td:nth-child(3) {
  width: 56%;
}

[data-db-detail-promotion-relation="true"] th:nth-child(3) {
  width: 56%;
}

[data-db-detail-promotion-relation="true"] td:nth-child(3) {
  width: 56%;
}

[data-db-detail-scenario-relation="true"] th:nth-child(3) {
  width: 56%;
}

[data-db-detail-scenario-relation="true"] td:nth-child(3) {
  width: 56%;
}

[data-db-detail-document-relation="true"] th:nth-child(3) {
  width: 56%;
}

[data-db-detail-document-relation="true"] td:nth-child(3) {
  width: 56%;
}

[data-db-detail-museum-relation="true"] th:nth-child(3) {
  width: 56%;
}

[data-db-detail-museum-relation="true"] td:nth-child(3) {
  width: 56%;
}

[data-db-detail-sound-relation="true"] th:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-sound-relation="true"] td:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-photo-relation="true"] th:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-photo-relation="true"] td:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-poster-relation="true"] th:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-poster-relation="true"] td:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-promotion-relation="true"] th:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-promotion-relation="true"] td:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-scenario-relation="true"] th:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-scenario-relation="true"] td:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-document-relation="true"] th:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-document-relation="true"] td:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-museum-relation="true"] th:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-museum-relation="true"] td:nth-child(4) {
  width: 20%;
  text-align: center;
}

[data-db-detail-sound-series="true"] th {
  text-align: center;
}

[data-db-detail-sound-series="true"] td {
  text-align: center;
}

[data-db-detail-document-series="true"] th {
  text-align: center;
}

[data-db-detail-document-series="true"] td {
  text-align: center;
}

[data-db-detail-sound-series="true"] th:nth-child(1) {
  width: 16%;
}

[data-db-detail-sound-series="true"] td:nth-child(1) {
  width: 16%;
}

[data-db-detail-sound-series="true"] th:nth-child(6) {
  width: 16%;
}

[data-db-detail-sound-series="true"] td:nth-child(6) {
  width: 16%;
}

[data-db-detail-document-series="true"] th:nth-child(1) {
  width: 16%;
}

[data-db-detail-document-series="true"] td:nth-child(1) {
  width: 16%;
}

[data-db-detail-document-series="true"] th:nth-child(6) {
  width: 16%;
}

[data-db-detail-document-series="true"] td:nth-child(6) {
  width: 16%;
}

[data-db-detail-sound-series="true"] th:nth-child(2) {
  width: 36%;
  text-align: left;
}

[data-db-detail-sound-series="true"] td:nth-child(2) {
  width: 36%;
  text-align: left;
}

[data-db-detail-document-series="true"] th:nth-child(2) {
  width: 36%;
  text-align: left;
}

[data-db-detail-document-series="true"] td:nth-child(2) {
  width: 36%;
  text-align: left;
}

[data-db-detail-sound-series="true"] th:nth-child(3) {
  width: 12%;
}

[data-db-detail-sound-series="true"] td:nth-child(3) {
  width: 12%;
}

[data-db-detail-document-series="true"] th:nth-child(3) {
  width: 12%;
}

[data-db-detail-document-series="true"] td:nth-child(3) {
  width: 12%;
}

[data-db-detail-sound-series="true"] th:nth-child(4) {
  width: 10%;
}

[data-db-detail-sound-series="true"] td:nth-child(4) {
  width: 10%;
}

[data-db-detail-sound-series="true"] th:nth-child(5) {
  width: 10%;
}

[data-db-detail-sound-series="true"] td:nth-child(5) {
  width: 10%;
}

[data-db-detail-document-series="true"] th:nth-child(4) {
  width: 10%;
}

[data-db-detail-document-series="true"] td:nth-child(4) {
  width: 10%;
}

[data-db-detail-document-series="true"] th:nth-child(5) {
  width: 10%;
}

[data-db-detail-document-series="true"] td:nth-child(5) {
  width: 10%;
}

[data-db-detail-document-components="true"] th {
  text-align: center;
}

[data-db-detail-document-components="true"] td {
  text-align: center;
}

[data-db-detail-document-components="true"] th:nth-child(1) {
  width: 8%;
}

[data-db-detail-document-components="true"] td:nth-child(1) {
  width: 8%;
}

[data-db-detail-document-components="true"] th:nth-child(2) {
  width: 21%;
  text-align: left;
}

[data-db-detail-document-components="true"] td:nth-child(2) {
  width: 21%;
  text-align: left;
}

[data-db-detail-document-components="true"] th:nth-child(3) {
  width: 29%;
  text-align: left;
}

[data-db-detail-document-components="true"] td:nth-child(3) {
  width: 29%;
  text-align: left;
}

[data-db-detail-document-components="true"] th:nth-child(4) {
  width: 17%;
}

[data-db-detail-document-components="true"] td:nth-child(4) {
  width: 17%;
}

[data-db-detail-document-components="true"] th:nth-child(5) {
  width: 12.5%;
}

[data-db-detail-document-components="true"] td:nth-child(5) {
  width: 12.5%;
}

[data-db-detail-document-components="true"] th:nth-child(6) {
  width: 12.5%;
}

[data-db-detail-document-components="true"] td:nth-child(6) {
  width: 12.5%;
}

/* =============================================================================
   오류 페이지 — 404·403·5xx
   상태 코드·안내문·복귀 동작
   ============================================================================= */
.kmdb-error-page {
  display: grid;
  min-height: 620px;
  place-items: center;
  padding: 120px 24px;
  background: var(--color-background-bg-default, #ffffff);
  /* stylelint-disable-next-line block-no-empty -- 정답지에 있는 빈 규칙을 그대로 보존한다 */
}

@media (max-width: 599px) {
  .kmdb-error-page {
    min-height: 520px;
    padding: 80px 20px;
  }
}

.kmdb-error-page > section {
  max-width: 640px;
  text-align: center;
}

.kmdb-error-page > section h1 {
  margin: 20px 0 0;
  color: var(--color-text-01, #171719);
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

@media (max-width: 599px) {
  .kmdb-error-page > section h1 {
    font-size: 28px;
  }
}

.kmdb-error-page__status-code {
  margin: 0;
  color: var(--color-primary, #0064ff);
  font-size: 96px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

@media (max-width: 599px) {
  .kmdb-error-page__status-code {
    font-size: 72px;
  }
}

.kmdb-error-page__request-guidance {
  margin: 16px 0 0;
  color: var(--color-text-03, #767676);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 599px) {
  .kmdb-error-page__request-guidance br {
    display: none;
  }
}

.kmdb-error-page > section > nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

@media (max-width: 599px) {
  .kmdb-error-page > section > nav {
    flex-direction: column;
  }
}

.kmdb-error-page > section > nav button {
  display: inline-flex;
  min-width: 140px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid var(--color-border-default, #989ba2);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-text-01, #171719);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  text-decoration: none;
}

@media (max-width: 599px) {
  .kmdb-error-page > section > nav button {
    width: 100%;
  }
}

.kmdb-error-page > section > nav a {
  display: inline-flex;
  min-width: 140px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid var(--color-border-default, #989ba2);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-text-01, #171719);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  text-decoration: none;
}

@media (max-width: 599px) {
  .kmdb-error-page > section > nav a {
    width: 100%;
  }
}

/* 위 규칙들과 같은 속성을 다뤄 순서를 바꾸면 결과가 달라진다. 한 블록으로 합치지 않는다 */
.kmdb-error-page > section > nav a {
  /* 주 동작 링크의 강조형 캐스케이드 */
  border-color: var(--color-surface-black, #171719);
  background: var(--color-surface-black, #171719);
  color: #ffffff;
}

/* =============================================================================
   개발 도구 — 아이콘 데모
   아이콘 미리보기·분류·카드 그리드
   ============================================================================= */
.kmdb-dev-icons-page {
  overflow: hidden;
  padding: 64px 0 120px;
  background: var(--color-surface-white);
}

.kmdb-dev-icons-page .kmdb-dev-icon-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: var(--layout-max);
  margin: 0 auto 64px;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--color-icon-default);
}

.kmdb-dev-icons-page .kmdb-dev-icon-hero h1 {
  margin: 4px 0 0;
  color: var(--color-text-01);
  font-size: 40px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-hero > strong {
  color: var(--color-text-01);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-hero__eyebrow {
  margin: 0;
  color: var(--color-badge-danger);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview {
  width: var(--layout-max);
  margin: 0 auto 72px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-line-subtle);
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__header {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 18px;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__header h2 {
  margin: 0;
  color: var(--color-text-01);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__header span {
  color: var(--color-text-03);
  font-size: 14px;
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__grid {
  display: grid;
  grid-template-columns: repeat(17, 72px);
  gap: 12px;
}

.kmdb-dev-icons-page
  .kmdb-dev-icon-preview__section
  + .kmdb-dev-icon-preview__section {
  margin-top: 36px;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__section > header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__section > header h3 {
  margin: 0;
  color: var(--color-text-01);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__section > header span {
  color: var(--color-text-03);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__section > header em {
  color: var(--color-text-03);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__icon-sample {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid var(--color-line-subtle);
  border-radius: 6px;
  background: #f4f5f6;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__icon-sample:hover {
  border-color: var(--color-icon-default);
  background: var(--color-surface-white);
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__icon-sample:focus-visible {
  border-color: var(--color-icon-default);
  background: var(--color-surface-white);
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__icon-sample img {
  width: 24px;
  height: 24px;
}

.kmdb-dev-icons-page .kmdb-dev-icon-preview__icon-sample--custom {
  border-style: dashed;
  background: #ffffff;
}

.kmdb-dev-icons-page .kmdb-dev-icon-group {
  width: var(--layout-max);
  margin: 0 auto 56px;
}

.kmdb-dev-icons-page .kmdb-dev-icon-group__header {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 18px;
}

.kmdb-dev-icons-page .kmdb-dev-icon-group__header h2 {
  margin: 0;
  color: var(--color-text-01);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-group__header span {
  color: var(--color-text-03);
  font-size: 14px;
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.kmdb-dev-icons-page .kmdb-dev-icon-card {
  display: flex;
  min-width: 0;
  padding: 16px;
  flex-direction: column;
  border: 1px solid var(--color-line-subtle);
  border-radius: 6px;
  background: var(--color-surface-white);
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.kmdb-dev-icons-page .kmdb-dev-icon-card:hover {
  border-color: var(--color-icon-default);
  transform: translateY(-2px);
}

.kmdb-dev-icons-page .kmdb-dev-icon-card:focus-visible {
  border-color: var(--color-icon-default);
  transform: translateY(-2px);
}

.kmdb-dev-icons-page .kmdb-dev-icon-card strong {
  margin-top: 14px;
  color: var(--color-text-01);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.kmdb-dev-icons-page .kmdb-dev-icon-card code {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--color-text-03);
  font-size: 11px;
  line-height: 1.45;
}

.kmdb-dev-icons-page .kmdb-dev-icon-card__preview {
  display: grid;
  height: 72px;
  place-items: center;
  border-radius: 4px;
  background: #f4f5f6;
}

.kmdb-dev-icons-page .kmdb-dev-icon-card__preview img {
  width: auto;
  height: auto;
  max-width: 48px;
  max-height: 48px;
}

/* =============================================================================
   공용 영화 결과 카드
   검색 결과와 촬영장소 연관 영화 목록이 동일한 DOM 계약으로 공유한다.
   ============================================================================= */

.kmdb-movie-cards__item {
  min-height: 180px;
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--color-border-disabled);
}

.kmdb-movie-cards__item:last-child {
  border-bottom: 0;
}

.kmdb-movie-card {
  display: flex;
  gap: 24px;
  color: inherit;
  text-decoration: none;
}

.kmdb-movie-card__poster {
  width: 109px;
  height: auto;
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 6px;
}

.kmdb-movie-card__poster:not(.kmdb-image-placeholder):not(.kmdb-has-image-fallback) {
  display: block;
}

.kmdb-movie-card__poster-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kmdb-movie-card__information {
  min-width: 0;
  flex: 1;
  align-self: center;
  color: var(--color-text-02);
  font-size: var(--typo-body-4-size);
}

.kmdb-movie-card__information h3 {
  margin: 0 0 12px;
  color: var(--color-text-01);
  font-size: var(--typo-headline-3-size);
  line-height: 1.5;
}

.kmdb-movie-card__metadata-link,
.kmdb-movie-card__details a {
  color: inherit;
  text-decoration: none;
}

.kmdb-movie-card__title {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (min-width: 600px) {
  .kmdb-movie-card__title {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

.kmdb-movie-card__metadata-link:hover,
.kmdb-movie-card__metadata-link:focus-visible,
.kmdb-movie-card__details a:hover,
.kmdb-movie-card__details a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kmdb-movie-card__information p {
  margin: 0;
  line-height: 1.5;
}

.kmdb-movie-card__meta {
  display: flex;
  flex-wrap: wrap;
}

.kmdb-movie-card__meta > span + span {
  display: inline-flex;
  align-items: center;
}

.kmdb-movie-card__meta > span + span::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 8px;
  border-radius: 50%;
  background: var(--color-surface-disabled, #dbdee1);
  content: "";
}

.kmdb-movie-card__details {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.kmdb-movie-card__details div {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 8px;
}

.kmdb-movie-card__details dt {
  width: 60px;
  color: var(--color-text-02);
  font-weight: var(--font-weight-semibold);
}

.kmdb-movie-card__details dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kmdb-detail-relations__items {
  display: flex;
  gap: 30px;
  min-width: 0;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kmdb-video-dialog {
  position: fixed;
  inset: 0;
  z-index: 1010;
}

.kmdb-video-dialog[hidden] {
  display: none;
}

.kmdb-video-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.kmdb-video-dialog__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 860px;
  /* 헤더 39px와 상하 여백 32px를 제외한 영상 높이 */
  max-width: min(calc(100vw - 32px), calc((100dvh - 71px) * 16 / 9));
  transform: translate(-50%, -50%);
}

@media (max-width: 599px) {
  .kmdb-video-dialog__panel {
    width: calc(100vw - 32px);
  }
}

.kmdb-video-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  margin-bottom: 9px;
  color: #ffffff;
}

.kmdb-video-dialog__header h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.kmdb-video-dialog__close {
  display: grid;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #ffffff;
}

.kmdb-video-dialog__close span {
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url("/icons/action/delete.svg") center/contain no-repeat;
  -webkit-mask: url("/icons/action/delete.svg") center/contain no-repeat;
}

.kmdb-video-dialog__stage {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: #17191d;
}

@media (max-width: 599px) {
  .kmdb-video-dialog__stage {
    border-radius: 12px;
  }
}

.kmdb-video-dialog__video {
  width: 100%;
  height: 100%;
  background: #000000;
  object-fit: contain;
}

/* 재생 시간: 현재 시간 - 진행바 - 전체 시간 순서로 노출, 남은 시간은 숨김 */
/* stylelint-disable selector-class-pattern -- Video.js가 생성하는 외부 클래스(.video-js, .vjs-*)를 그대로 선택한다. */
.kmdb-video-dialog .video-js .vjs-control-bar .vjs-current-time,
.kmdb-video-dialog .video-js .vjs-control-bar .vjs-duration {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
}

@media (max-width: 599px) {
  .kmdb-video-dialog .video-js .vjs-control-bar .vjs-current-time,
  .kmdb-video-dialog .video-js .vjs-control-bar .vjs-duration {
    padding: 0 4px;
  }

  .kmdb-video-dialog .video-js .vjs-control-bar .vjs-control {
    width: 32px;
  }

  .kmdb-video-dialog .video-js .vjs-control-bar .vjs-time-control {
    width: auto;
  }
}

.kmdb-video-dialog .video-js .vjs-control-bar .vjs-current-time {
  order: 1;
}

.kmdb-video-dialog .video-js .vjs-control-bar .vjs-progress-control {
  order: 2;
}

.kmdb-video-dialog .video-js .vjs-control-bar .vjs-duration {
  order: 3;
}

.kmdb-video-dialog .video-js .vjs-control-bar .vjs-playback-rate,
.kmdb-video-dialog .video-js .vjs-control-bar .vjs-picture-in-picture-control,
.kmdb-video-dialog .video-js .vjs-control-bar .vjs-fullscreen-control {
  order: 4;
}

.kmdb-video-dialog .video-js .vjs-control-bar .vjs-time-divider,
.kmdb-video-dialog .video-js .vjs-control-bar .vjs-remaining-time {
  display: none;
}
/* stylelint-enable selector-class-pattern */

/* 유형 선택 칩의 이동 표시 */
.kmdb-sliding-chip-tabs {
  position: relative;
}

.kmdb-sliding-chip-tabs.kmdb-has-sliding-selection > button.kmdb-is-active {
  border-color: transparent;
}

.kmdb-sliding-chip-tabs__selection {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: var(--kmdb-sliding-tab-selection-width, 0);
  height: var(--kmdb-sliding-tab-selection-height, 0);
  border: 1px solid var(--color-icon-default, #222222);
  border-radius: 999px;
  pointer-events: none;
  transform: translate(var(--kmdb-sliding-tab-selection-x, 0), var(--kmdb-sliding-tab-selection-y, 0));
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), width 240ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .kmdb-sliding-chip-tabs__selection {
    transition: none;
  }
}

/* 개인정보처리방침 */
.kmdb-policy-privacy {
  width: min(1280px, calc(100% - var(--layout-gutter) * 2));
  margin-inline: auto;
}

.kmdb-policy-privacy__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kmdb-policy-privacy__header h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 54px;
}

@media (max-width: 599px) {
  .kmdb-policy-privacy__header h1 {
    font-size: 28px;
    line-height: 42px;
  }
}

.kmdb-policy-privacy__body {
  padding-top: 40px;
  padding-bottom: 40px;
}
.kmdb-policy-privacy-history {
  width: min(1280px, calc(100% - var(--layout-gutter) * 2));
  color: #262831;
  font: 400 16px/24px "Pretendard GOV", sans-serif;
  letter-spacing: -0.6px;
  margin-inline: auto;
  padding-top: 16px;
  padding-bottom: 80px;
}
@media (max-width: 1279px) {
  .kmdb-policy-privacy-history {
    padding-bottom: 64px;
  }
}
.kmdb-policy-privacy-history__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #262831;
  font-family: "Pretendard GOV", sans-serif;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
  list-style: none;
  gap: 12px;
  padding: 20px;
  border: 0;
  border-bottom: 1px solid #e1e1e1;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
@media (max-width: 599px) {
  .kmdb-policy-privacy-history__button {
    padding-inline: 16px;
  }
}
.kmdb-policy-privacy-history__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kmdb-policy-privacy-history__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #e1e1e1;
}
@media (max-width: 599px) {
  .kmdb-policy-privacy-history__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-inline: 16px;
  }
}
.kmdb-policy-privacy-history__row--current {
  padding-block: 12px;
}
@media (max-width: 599px) {
  .kmdb-policy-privacy-history__row--current {
    padding-block: 16px;
  }
}
.kmdb-policy-privacy-history__link {
  color: #262831;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}
.kmdb-policy-privacy-history__row--current .kmdb-policy-privacy-history__link {
  color: #30666b;
  font-weight: 600;
}
.kmdb-policy-privacy-history__link:hover {
  text-decoration: underline;
}
.kmdb-policy-privacy-history__link:focus-visible {
  outline: 2px solid #30666b;
  outline-offset: 4px;
  border-radius: 2px;
}
.kmdb-policy-privacy-history__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #fff;
  color: #58585a;
  font: 600 12px/18px "Pretendard GOV", sans-serif;
  letter-spacing: -0.6px;
  cursor: pointer;
}
.kmdb-policy-privacy-history__download[hidden] {
  display: none;
}
.kmdb-policy-privacy-history__download:hover {
  background: #f9f9f9;
}
.kmdb-policy-privacy-history__download:focus-visible {
  outline: 2px solid #30666b;
  outline-offset: 4px;
}
.kmdb-policy-privacy-history__download img {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.kmdb-policy-privacy-history__button::-webkit-details-marker {
  display: none;
}
.kmdb-policy-privacy-history__button::after {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: url("/icons/chevron/chevron-down.svg") center / 24px 24px no-repeat;
}
.kmdb-policy-privacy-history__accordion[open] > .kmdb-policy-privacy-history__button::after {
  transform: rotate(180deg);
}

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