/**
 * [ARTNET Design System]
 * - 역할: artnet 디자인 시스템(v1.0) 기반 전역 토큰·베이스·공통 컴포넌트 스타일
 * - 작성/수정일: 2026-08-07
 * - 참고: design/디자인시스템 가이드 문서 완성/artnet 디자인시스템 가이드.dc.html
 *
 * 원칙
 * 1) 무채색 단일 팔레트 — 강조는 색이 아니라 대비·굵기·여백
 * 2) 1px 보더로 구획, 그림자는 떠 있는 레이어에만
 * 3) Pretendard 단일 서체 + weight 위계
 * 4) 컴포넌트에는 HEX 직접 기입 금지 → CSS 변수만 사용
 */

/* --------------------------------------------------------------------------
 * 01. FONT
 * -------------------------------------------------------------------------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* --------------------------------------------------------------------------
 * 02. DESIGN TOKENS
 * -------------------------------------------------------------------------- */
:root {
  /* Color — Light */
  --primary-color: #171717;
  --primary-color-opc: 23, 23, 23;
  --title-color: #171717;
  --title-color-opc: 23, 23, 23;
  --text-color: #595959;
  --text-color2: #545454;
  --text-color-opc: 89, 89, 89;
  --muted-color: #7c7c7c;
  --border-color: #eeeeee;
  --border-color-opc: 238, 238, 238;
  --divider-color: #d9d9d9;
  --white-color: #ffffff;
  --surface-color: #ffffff;
  --bg-color: #ffffff;
  --section-bg-color: #f9f9f9;
  --section-bg-color2: #fbf8f8;
  --chip-color: #f2f2f2;
  --inverse-color: #ffffff;
  --line-color: #f0f0f0;
  --bg-soft: #f6f6f6;
  --ink: #171717;
  --on-dark: #f5f5f5;
  --danger-color: #c62828;
  --danger-strong: #b42318;
  --success-color: #166534;
  --ok-color: #2563eb;
  --cta-surface: #171717;
  --cta-surface-hover: #2a2a2a;

  /* Typography */
  --font-base:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --letter-tight: -0.02em;
  --letter-display: -0.03em;

  /* Type scale: size / weight / line-height
   * 반응형은 아래 @media :root 에서 덮어씀 (PC 기본 → 991.98 태블릿 → 575.98 모바일)
   * — 작성/수정일: 2026-08-21
   */
  --fs-display: 64px;
  --fs-h1: 46px;
  --fs-h2: 36px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-icon: 22px;
  /* [헤더 아이콘]
   * - 역할: 헤더(언어·테마·로그인·검색·알림 등) Bootstrap Icon 일괄 크기
   * - 작성/수정일: 2026-08-20
   */
  --fs-header-icon: 18px;
  --fs-lead: 28px;
  --fs-h6: 18px;
  --fs-body-l: 20px;
  --fs-body: 16px;
  --fs-body-s: 15px;
  --fs-label: 14px;
  --fs-sm: 13px;
  --fs-caption: 12px;
  --fs-xs: 11px;
  --fs-micro: 10px;

  /* Spacing (5의 배수) */
  --space-6: 6px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;
  --space-55: 55px;
  --space-70: 70px;
  --space-80: 80px;
  --space-90: 90px;
  --space-100: 100px;
  --space-120: 120px;
  --space-130: 130px;
  --space-150: 150px;

  /* Layout */
  --container-max: 1320px;
  --container-pad: 12px;
  --gutter: 30px;
  --content-prose-max: 660px;

  /* Radius */
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* [전시 포스터] A4 세로 1:√2 ≈ 480×679 — 작성/수정일: 2026-08-20 */
  --ex-poster-ratio: 480 / 679;

  /* Elevation — 떠 있는 레이어 전용 */
  --shadow-sm: 5px 2px 30px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 5px 3px 40px rgba(0, 72, 88, 0.1);
  --shadow-xl: 4px 4px 31px rgba(0, 0, 0, 0.25);

  /* Motion */
  --duration-base: 0.6s;
  --duration-underline: 0.75s;
  --duration-menu: 0.55s;
  --duration-image: 0.8s;
  --ease-menu: ease-in-out;

  /* Z-index */
  --z-sticky: 9999;
  --z-modal: 10000;
  --z-login: 10000;
  --z-dialog: 11000; /* SweetAlert — 로그인 모달보다 위 */

  /* [에디터 툴바] PC sticky nav(56px) 아래 고정 — 작성/수정일: 2026-08-07 */
  --an-editor-toolbar-sticky-top: 56px;
}

/**
 * [다크 테마]
 * - 역할: html.dark / body.dark 에서 토큰 값만 교체 (마크업 동일)
 * - 작성/수정일: 2026-08-08
 */
html.dark,
body.dark {
  --primary-color: #ffffff;
  --primary-color-opc: 255, 255, 255;
  --title-color: #ffffff;
  --title-color-opc: 255, 255, 255;
  --text-color: #d3d3d3;
  --text-color2: #d3d3d3;
  --text-color-opc: 211, 211, 211;
  --muted-color: #8a8a8a;
  --border-color: #4a4a4a;
  --border-color-opc: 74, 74, 74;
  --divider-color: #4a4a4a;
  --white-color: #171717;
  --surface-color: #171717;
  --bg-color: #171717;
  --section-bg-color: #171717;
  --section-bg-color2: #171717;
  --chip-color: #2e2e2e;
  --inverse-color: #171717;
  --bg-soft: #2a2a2a;
  --ink: #171717;
  --on-dark: #f5f5f5;
  --danger-color: #f97066;
  --danger-strong: #f97066;
  --success-color: #86efac;
  --ok-color: #93c5fd;
  --cta-surface: #2e2e2e;
  --cta-surface-hover: #3a3a3a;
  /* [ARTNET] 카드·입력 경계가 배경에 붙지 않게 — 작성/수정일: 2026-08-15 */
  --line-color: #4a4a4a;

  /* 다크에서는 그림자 대신 보더 대비로 레이어 구분 */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
}

html.dark,
html.dark body,
body.dark {
  background-color: var(--bg-color);
  color: var(--title-color);
}

/* --------------------------------------------------------------------------
 * 03. RESET & BASE
 * -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-color);
  color: var(--title-color);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
input,
textarea,
button,
select {
  font-family: var(--font-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--title-color);
  letter-spacing: var(--letter-tight);
  word-break: keep-all;
}

p {
  margin: 0;
  color: var(--text-color);
}

a {
  color: var(--title-color);
  text-decoration: none;
  transition:
    opacity var(--duration-base),
    color var(--duration-base);
}

a:hover {
  opacity: 0.65;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: #171717;
  color: #fff;
}

html.dark ::selection,
body.dark ::selection {
  background: #ffffff;
  color: #171717;
}

:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
#hd_login_msg {
  display: none;
}
.sound_only {
  display: none !important;
}
.sound_only:focus-visible {
  outline: none;
}
/* --------------------------------------------------------------------------
 * 04. TYPOGRAPHY
 * -------------------------------------------------------------------------- */
.an-display,
.text-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--letter-display);
  color: var(--title-color);
}

h1,
.an-h1,
.text-h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.25;
}

h2,
.an-h2,
.text-h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
}

/**
 * [목록 제목]
 * - 역할: 카드·리스트 행의 글제목·작가명·갤러리명. 전역 h2(섹션 36px)와 분리해 한곳에서 관리
 * - 작성/수정일: 2026-08-20
 */
h2.an-list-title {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.4;
}

h3,
.an-h3,
.text-h3,
.section-title h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
}

h4,
.an-h4,
.text-h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
}

h5,
.an-h5,
.text-h5 {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.45;
}

h6,
.an-h6,
.text-h6 {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.5;
}

.text-body-l,
.section-title p {
  font-size: var(--fs-body-l);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-color);
}

.text-body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-color);
}

.text-label {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.5;
  color: var(--title-color);
}

.text-caption {
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted-color);
}

.text-muted {
  color: var(--muted-color);
}

.text-title {
  color: var(--title-color);
}

.prose-max {
  max-width: var(--content-prose-max);
}

/**
 * [반응형 브레이크]
 * - 역할: Bootstrap 5 · DS 표준만 사용 (575.98 / 767.98 / 991.98 / 1199.98 / 1399.98)
 * - 작성/수정일: 2026-08-21
 */
/**
 * [반응형 타이포]
 * - 역할: :root --fs-* 스케일을 브레이크별로 한곳에서 관리. 컴포넌트는 var(--fs-*)만 사용
 * - 원칙: 제목(display~h5)은 축소, 본문·캡션은 가독성 우선으로 소폭/유지, micro는 10px 하한
 * - 작성/수정일: 2026-08-21
 *
 * | 토큰        | PC    | ≤991.98 | ≤575.98 |
 * |-------------|-------|---------|---------|
 * | display     | 64    | 42      | 36      |
 * | h1          | 46    | 34      | 30      |
 * | h2          | 36    | 28      | 24      |
 * | h3          | 32    | 26      | 22      |
 * | h4          | 24    | 22      | 20      |
 * | h5          | 20    | 18      | 18      |
 * | h6          | 18    | 17      | 16      |
 * | lead        | 28    | 24      | 22      |
 * | body-l      | 20    | 18      | 17      |
 * | body        | 16    | 16      | 15      |
 * | body-s      | 15    | 15      | 14      |
 * | label       | 14    | 14      | 13      |
 * | sm          | 13    | 13      | 12      |
 * | caption     | 12    | 12      | 12      |
 * | xs          | 11    | 11      | 11      |
 * | micro       | 10    | 10      | 10      |
 * | icon        | 22    | 20      | 20      |
 * | header-icon | 18    | 18      | 18      |
 */
@media (max-width: 991.98px) {
  :root {
    --fs-display: 42px;
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-h3: 26px;
    --fs-h4: 22px;
    --fs-h5: 18px;
    --fs-h6: 17px;
    --fs-lead: 24px;
    --fs-body-l: 18px;
    --fs-body: 16px;
    --fs-body-s: 15px;
    --fs-label: 14px;
    --fs-sm: 13px;
    --fs-caption: 12px;
    --fs-xs: 11px;
    --fs-micro: 10px;
    --fs-icon: 20px;
    --fs-header-icon: 18px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --fs-display: 36px;
    --fs-h1: 30px;
    --fs-h2: 24px;
    --fs-h3: 22px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-lead: 22px;
    --fs-body-l: 17px;
    --fs-body: 15px;
    --fs-body-s: 14px;
    --fs-label: 13px;
    --fs-sm: 12px;
    --fs-caption: 12px;
    --fs-xs: 11px;
    --fs-micro: 10px;
    --fs-icon: 20px;
    --fs-header-icon: 18px;
  }
}

/* --------------------------------------------------------------------------
 * 05. LAYOUT & SPACING
 * -------------------------------------------------------------------------- */
.section-pad-30 {
  padding-top: var(--space-30);
  padding-bottom: var(--space-30);
}
/**
 * [컨테이너]
 * - 역할: 디자인 시스템 콘텐츠 폭(1320px) · Bootstrap .container 와 병행 가능
 * - 작성/수정일: 2026-08-07
 */
.an-container,
.container-an {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/**
 * [본문 그리드]
 * - 역할: 헤더·히어로와 동일 끝선. 스킨 an-container 이중 패딩 제거
 * - 작성/수정일: 2026-08-08
 */
.an-page-main__hero {
  margin-bottom: 0;
}

.an-page-main__body {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.an-page-main__body > .an-container,
.an-page-main__body .an-container {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/**
 * [전역 브레드크럼·타이틀]
 * - 역할: 서브페이지 공통 경로(메뉴 계층) + H1
 * - 작성/수정일: 2026-08-08
 */
.an-page-hero {
  margin-bottom: var(--space-25, 24px);
}

.an-page-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: var(--space-20, 20px);
  color: var(--muted-color, #7c7c7c);
  font-size: var(--fs-caption, 12px);
}

.an-page-crumb a {
  color: inherit;
  text-decoration: none;
}

.an-page-crumb a:hover {
  color: var(--title-color, #171717);
}

.an-page-crumb__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.an-page-crumb__icon,
.an-page-crumb__rss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.an-page-crumb__icon i,
.an-page-crumb__rss i {
  font-size: 14px;
  line-height: 1;
}

.an-page-crumb__rss:hover {
  color: var(--title-color, #171717);
}

.an-page-hero__title {
  margin: 0;
  font-size: var(--fs-h3, 28px);
  font-weight: 700;
  letter-spacing: var(--letter-tight, -0.02em);
  color: var(--title-color, #171717);
  line-height: 1.3;
}

.an-page-hero__desc {
  margin-top: 0px;
  max-width: 640px;
  color: var(--text-color, #444);
  font-size: var(--fs-body, 15px);
  line-height: 1.7;
}

.an-page-hero__desc p {
  margin: 0;
}

.an-page-hero__desc p + p {
  margin-top: 0.5em;
}

/* 목록 설명이 바로 이어질 때 간격 조정 */
.an-page-hero:has(.an-page-hero__title) {
  margin-bottom: var(--space-30, 32px);
}

.an-page-hero[data-an-mode="view"] {
  margin-bottom: var(--space-16, 16px);
}

.an-page-hero[data-an-mode="view"] .an-page-crumb {
  margin-bottom: 0;
}

/* 12컬럼 그리드 — Bootstrap .row 와 충돌 방지용 전용 클래스 */
.an-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.an-grid > .col-12 {
  grid-column: span 12;
}
.an-grid > .col-6 {
  grid-column: span 6;
}
.an-grid > .col-4 {
  grid-column: span 4;
}
.an-grid > .col-3 {
  grid-column: span 3;
}

@media (max-width: 991.98px) {
  .an-grid > .col-6,
  .an-grid > .col-4,
  .an-grid > .col-3 {
    grid-column: span 12;
  }
}

/* 섹션 상하 패딩 — 브레이크포인트별 */
.section-pad,
.pt-130 {
  padding-top: var(--space-130);
  padding-bottom: var(--space-130);
}

.section-pad--first {
  padding-top: var(--space-150);
  padding-bottom: var(--space-130);
}

@media (min-width: 1400px) {
  .section-pad,
  .pt-130 {
    padding-top: var(--space-150);
    padding-bottom: var(--space-150);
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .section-pad,
  .pt-130 {
    padding-top: var(--space-130);
    padding-bottom: var(--space-130);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .section-pad,
  .pt-130 {
    padding-top: var(--space-120);
    padding-bottom: var(--space-120);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .section-pad,
  .pt-130 {
    padding-top: var(--space-100);
    padding-bottom: var(--space-100);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .section-pad,
  .pt-130 {
    padding-top: var(--space-90);
    padding-bottom: var(--space-90);
  }
}

@media (max-width: 575.98px) {
  .section-pad,
  .pt-130,
  .section-pad--first {
    padding-top: var(--space-80);
    padding-bottom: var(--space-80);
  }
}

.section-bg {
  background: var(--section-bg-color);
}

.section-bg-2 {
  background: var(--section-bg-color2);
}

.section-title {
  margin-bottom: var(--space-40);
}

.section-title h3 {
  margin-bottom: var(--space-15);
}

/* --------------------------------------------------------------------------
 * 06. ELEVATION & SURFACE
 * -------------------------------------------------------------------------- */
.surface {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.radius-sm {
  border-radius: var(--radius-sm);
}
.radius-md {
  border-radius: var(--radius-md);
}
.radius-pill {
  border-radius: var(--radius-pill);
}
.radius-full {
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
 * 07. BUTTONS
 * -------------------------------------------------------------------------- */

/**
 * [버튼 공통]
 * - 역할: Primary/Secondary/아이콘 호버를 opacity·배경색 전환으로 통일 (원형 확산 제거)
 * - 작성/수정일: 2026-08-07
 */
.primary-btn1,
.primary-btn2,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  border-radius: var(--radius-md);
  line-height: 1;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 500;
  border: 1px solid transparent;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  cursor: pointer;
}

/* 템플릿용 빈 <strong> 리플 레이어 — 렌더링하지 않음 */
.primary-btn1 strong,
.primary-btn2 strong,
.secondary-btn strong {
  display: none;
}

/* Primary Large — 배너 CTA · 폼 제출 */
.primary-btn1 {
  padding: 19px 22px;
  background-color: var(--primary-color);
  color: var(--white-color);
}

.primary-btn1:hover {
  color: var(--white-color);
  opacity: 0.85;
}

/* Primary Small — 헤더 · 카드 · 인라인 · 필터 적용 */
.primary-btn2 {
  /* [버튼] 소형 패딩 — 작성/수정일: 2026-08-09 */
  padding: 10px 14px;
  font-size: var(--fs-label, 14px);
  background-color: var(--primary-color);
  color: var(--white-color);
}

.primary-btn2:hover {
  color: var(--white-color);
  opacity: 0.85;
}

/* Secondary — 취소 · 초기화 · 보조 액션 */
.secondary-btn {
  /* [버튼] 보더 흐리게 · 소형 패딩 — 작성/수정일: 2026-08-09 */
  padding: 10px 14px;
  font-size: var(--fs-label, 14px);
  background-color: transparent;
  color: var(--title-color);
  border-color: var(--border-color);
}

.secondary-btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
  opacity: 1;
}

.primary-btn1:disabled,
.primary-btn2:disabled,
.secondary-btn:disabled,
.primary-btn1.is-disabled,
.primary-btn2.is-disabled,
.secondary-btn.is-disabled {
  background: var(--section-bg-color);
  color: var(--muted-color);
  border-color: var(--border-color);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}

/**
 * [다크 Primary/Secondary]
 * - 역할: 순백 반전 CTA 대신 톤다운 surface (게시판 목록·전역 공용)
 * - 작성/수정일: 2026-08-08
 */
html.dark .primary-btn1,
html.dark .primary-btn2,
body.dark .primary-btn1,
body.dark .primary-btn2 {
  background-color: var(--cta-surface);
  border-color: var(--border-color);
  color: var(--on-dark);
}

html.dark .primary-btn1:hover,
html.dark .primary-btn2:hover,
body.dark .primary-btn1:hover,
body.dark .primary-btn2:hover {
  background-color: var(--cta-surface-hover);
  border-color: var(--divider-color);
  color: var(--on-dark);
  opacity: 1;
}

html.dark .secondary-btn,
body.dark .secondary-btn {
  background-color: transparent;
  border-color: var(--border-color);
  color: var(--title-color);
}

html.dark .secondary-btn:hover,
body.dark .secondary-btn:hover {
  background-color: var(--cta-surface);
  border-color: var(--divider-color);
  color: var(--on-dark);
  opacity: 1;
}

/**
 * [라이트 목록 보기 토글]
 * - 역할: 활성 세그먼트 칩형 톤다운 (primary CTA와 위계 분리)
 * - 작성/수정일: 2026-08-08
 */
.an-ex-view-toggle button.is-active,
.an-aw-view-toggle button.is-active,
.an-ar-view-toggle button.is-active {
  background: #ececec;
  color: #171717;
}

/**
 * [다크 목록 보기 토글]
 * - 역할: exhibitions/artists/artworks 그리드·리스트 토글
 * - 작성/수정일: 2026-08-08
 */
html.dark .an-ex-view-toggle,
html.dark .an-aw-view-toggle,
html.dark .an-ar-view-toggle,
html.dark .an-gl-view-toggle,
body.dark .an-ex-view-toggle,
body.dark .an-aw-view-toggle,
body.dark .an-ar-view-toggle,
body.dark .an-gl-view-toggle {
  border-color: var(--border-color);
  background: var(--section-bg-color);
}

html.dark .an-ex-view-toggle button,
html.dark .an-aw-view-toggle button,
html.dark .an-ar-view-toggle button,
html.dark .an-gl-view-toggle button,
body.dark .an-ex-view-toggle button,
body.dark .an-aw-view-toggle button,
body.dark .an-ar-view-toggle button,
body.dark .an-gl-view-toggle button {
  background: transparent;
  color: var(--muted-color);
}

html.dark .an-ex-view-toggle button.is-active,
html.dark .an-aw-view-toggle button.is-active,
html.dark .an-ar-view-toggle button.is-active,
html.dark .an-gl-view-toggle button.is-active,
body.dark .an-ex-view-toggle button.is-active,
body.dark .an-aw-view-toggle button.is-active,
body.dark .an-ar-view-toggle button.is-active,
body.dark .an-gl-view-toggle button.is-active {
  background: var(--cta-surface-hover);
  color: var(--title-color);
}

/**
 * [다크 목록 필터 버튼]
 * - 역할: 모바일 필터 열기 버튼 (전시·작품·작가)
 * - 작성/수정일: 2026-08-08
 */
html.dark .an-ex-main__filter-btn,
html.dark .an-aw-main__filter-btn,
html.dark .an-ar-main__filter-btn,
body.dark .an-ex-main__filter-btn,
body.dark .an-aw-main__filter-btn,
body.dark .an-ar-main__filter-btn {
  background: #212121;
  border-color: #3a3a3a;
  color: #f0f0f0;
}

html.dark .an-ex-main__filter-btn:hover,
html.dark .an-aw-main__filter-btn:hover,
html.dark .an-ar-main__filter-btn:hover,
body.dark .an-ex-main__filter-btn:hover,
body.dark .an-aw-main__filter-btn:hover,
body.dark .an-ar-main__filter-btn:hover {
  background: #2e2e2e;
  border-color: #5a5a5a;
}

/* View All — 섹션 더보기 */
.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--title-color);
  background: transparent;
  border: 0;
  transition: opacity 0.2s ease;
}

.view-all-btn:hover {
  opacity: 0.65;
}

/* 아이콘 버튼 — 아이콘만, 호버 시 색만 변경 */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--title-color);
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--muted-color);
  background: transparent;
  opacity: 1;
}

.icon-btn[aria-pressed="true"] {
  color: var(--title-color);
  background: transparent;
  opacity: 1;
}

/* --------------------------------------------------------------------------
 * 08. FORM
 * -------------------------------------------------------------------------- */
.form-inner {
  width: 100%;
}

.form-inner + .form-inner {
  margin-top: var(--space-20);
}

.form-inner label {
  display: block;
  margin-bottom: var(--space-10);
  color: var(--title-color);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.5;
}

.form-inner input,
.form-inner textarea,
.form-inner select {
  width: 100%;
  height: 50px;
  padding: 10px 20px;
  background-color: var(--white-color);
  color: var(--title-color);
  font-size: var(--fs-label);
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-base);
}

.form-inner textarea {
  height: auto;
  min-height: 120px;
  padding: 20px;
  font-weight: 400;
  resize: vertical;
}

.form-inner input::placeholder,
.form-inner textarea::placeholder {
  color: var(--muted-color);
  font-weight: 400;
}

.form-inner input:focus,
.form-inner textarea:focus,
.form-inner select:focus {
  border-color: var(--primary-color);
}

/**
 * [Select 화살표]
 * - 역할: 네이티브 화살표(끝 붙음) 제거 후 안쪽 16px 여백 커스텀 화살표
 * - 작성/수정일: 2026-08-08
 */
.form-inner select,
.form-inner3 select,
.an-bo-search__sfl,
.an-search__select,
.an-ex-sort select,
.an-ar-sort select,
.an-aw-sort select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237c7c7c' d='M6 8 0 2l1.4-1.4L6 5.2l4.6-4.6L12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.form-inner select::-ms-expand,
.form-inner3 select::-ms-expand,
.an-bo-search__sfl::-ms-expand,
.an-search__select::-ms-expand,
.an-ex-sort select::-ms-expand,
.an-ar-sort select::-ms-expand,
.an-aw-sort select::-ms-expand {
  display: none;
}

html.dark .form-inner select,
html.dark .form-inner3 select,
html.dark .an-bo-search__sfl,
html.dark .an-search__select,
html.dark .an-ex-sort select,
html.dark .an-ar-sort select,
html.dark .an-aw-sort select,
body.dark .form-inner select,
body.dark .form-inner3 select,
body.dark .an-bo-search__sfl,
body.dark .an-search__select,
body.dark .an-ex-sort select,
body.dark .an-ar-sort select,
body.dark .an-aw-sort select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a3a3a3' d='M6 8 0 2l1.4-1.4L6 5.2l4.6-4.6L12 2z'/%3E%3C/svg%3E");
}

/* 대시보드형 — 보더 없는 면 처리 */
.form-inner3 input,
.form-inner3 textarea,
.form-inner3 select {
  background-color: var(--section-bg-color);
  border: none;
}

.form-inner3 input:focus,
.form-inner3 textarea:focus,
.form-inner3 select:focus {
  outline: 1px solid var(--primary-color);
}

.form-error {
  margin-top: 6px;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--muted-color);
}

/* --------------------------------------------------------------------------
 * 09. BADGE & TAG
 * -------------------------------------------------------------------------- */
.an-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
  background: var(--primary-color);
  color: var(--white-color);
  border: 1px solid transparent;
}

.an-badge--outline {
  background: transparent;
  border-color: var(--primary-color);
  color: var(--title-color);
}

.an-badge--muted {
  background: var(--section-bg-color);
  border-color: var(--border-color);
  color: var(--muted-color);
}

.an-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-base);
}

.an-tag:hover,
.an-tag[aria-pressed="true"],
.an-tag.is-active {
  background: var(--primary-color);
  color: var(--white-color);
  border-color: transparent;
  opacity: 1;
}

/* --------------------------------------------------------------------------
 * 10. CARD (base)
 * -------------------------------------------------------------------------- */
.an-card {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.an-card__media {
  position: relative;
  overflow: hidden;
}

.an-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-image);
}

.an-card:hover .an-card__media img {
  transform: scale(1.08);
}

.an-card__body {
  padding: 22px 20px;
}

.an-card__meta {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-color);
}

.an-card__title {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.5;
  color: var(--title-color);
}

.an-card__title a:hover {
  opacity: 0.65;
}

/* 작품/전시 카드 이미지 비율 */
.card-img {
  aspect-ratio: 3 / 4.25;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-image);
}

/* --------------------------------------------------------------------------
 * 11. PAGINATION
 * -------------------------------------------------------------------------- */
.an-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  justify-content: center;
  align-items: center;
}

.an-pagination a,
.an-pagination span {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--title-color);
  transition: all var(--duration-base);
}

.an-pagination a:hover,
.an-pagination a.active,
.an-pagination .active {
  background: var(--primary-color);
  color: var(--white-color);
  border-color: transparent;
  opacity: 1;
}

/**
 * [ARTNET Pagination]
 * - 역할: 다크 모드 활성/호버 — 순백 면 대신 칩·보더 대비로 눈부심 완화
 * - 작성/수정일: 2026-08-16
 */
html.dark .an-pagination a:hover,
html.dark .an-pagination a.active,
html.dark .an-pagination .active,
body.dark .an-pagination a:hover,
body.dark .an-pagination a.active,
body.dark .an-pagination .active {
  background: var(--chip-color);
  color: var(--title-color);
  border-color: var(--muted-color);
}

.an-pagination a[aria-disabled="true"],
.an-pagination .disabled {
  color: var(--muted-color);
  pointer-events: none;
}

.an-pagination .an-pagination__nav {
  width: auto;
  min-width: 72px;
  padding: 0 14px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.an-pagination .an-pagination__ellipsis {
  border: 0;
  background: transparent;
  color: var(--muted-color);
  min-width: auto;
  width: auto;
  padding: 0 4px;
  pointer-events: none;
}

/* [페이징]
 * - 역할: 반응형 PC/좁은화면 마크업 전환 (G5_IS_MOBILE 미사용)
 * - 작성/수정일: 2026-08-07
 */
.an-pagination--desktop {
  display: flex;
}

.an-pagination--mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .an-pagination--desktop {
    display: none;
  }

  .an-pagination--mobile {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .an-pagination--mobile::-webkit-scrollbar {
    display: none;
  }

  .an-pagination--mobile a,
  .an-pagination--mobile span {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .an-pagination--mobile .an-pagination__nav {
    min-width: 52px;
    width: auto;
    padding: 0 8px;
    font-size: 11px;
  }

  .an-pagination--mobile .an-pagination__ellipsis {
    width: auto;
    min-width: 16px;
    padding: 0 2px;
  }
}

/* --------------------------------------------------------------------------
 * 12. TABS · ACCORDION · MODAL (primitives)
 * -------------------------------------------------------------------------- */
.an-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
}

.an-tabs__link {
  padding: 15px 10px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-color);
  border: none;
  background: transparent;
  transition: color var(--duration-base);
}

.an-tabs__link:hover {
  color: var(--title-color);
  opacity: 1;
}

.an-tabs__link.active,
.an-tabs__link[aria-selected="true"] {
  font-weight: 600;
  color: var(--title-color);
  box-shadow: inset 0 -2px 0 var(--primary-color);
}

.an-accordion__item {
  border-bottom: 1px solid var(--border-color);
}

.an-accordion__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  font-size: 19px;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-color);
  text-align: left;
  transition: color var(--duration-base);
}

.an-accordion__button:not(.collapsed),
.an-accordion__button[aria-expanded="true"] {
  font-weight: 600;
  color: var(--title-color);
}

.an-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 23, 23, 0.55);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.an-modal {
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 28px;
  background: var(--white-color);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

.an-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.an-modal__title {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.45;
  color: var(--title-color);
  letter-spacing: var(--letter-tight);
}

.an-modal__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -6px -6px 0 0;
  color: var(--muted-color);
  font-size: 18px;
  background: transparent;
  border: 0;
  transition: color var(--duration-base);
}

.an-modal__close:hover {
  color: var(--title-color);
}

.an-modal__body {
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-color);
  word-break: keep-all;
}

.an-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

/**
 * [메시지 페이지 모달]
 * - 역할: PHP alert/confirm/alert_close 디자인 시스템 UI
 * - 작성/수정일: 2026-08-07
 */
.an-msg-page {
  min-height: 100vh;
  background: var(--section-bg-color);
}

.an-msg-overlay {
  display: flex;
}

.an-msg .an-modal__body {
  white-space: normal;
}

.an-msg__hint {
  margin: 14px 0 0;
  font-size: var(--fs-caption);
  color: var(--muted-color);
}

.an-msg__back {
  margin: 16px 0 0;
  text-align: center;
  font-size: var(--fs-label);
}

.an-msg__back a {
  color: var(--text-color);
  text-decoration: underline;
}

.an-msg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-base);
  border: 1px solid transparent;
}

.an-msg__btn--primary {
  background: var(--primary-color);
  color: var(--white-color);
}

.an-msg__btn--primary:hover {
  opacity: 0.85;
  color: var(--white-color);
}

.an-msg__btn--secondary {
  background: transparent;
  color: var(--title-color);
  border-color: var(--primary-color);
}

.an-msg__btn--secondary:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

/**
 * [SweetAlert2 — ARTNET 모달 스킨]
 * - 역할: alert/confirm UI를 디자인 시스템 모달과 동일하게 맞춤
 * - 작성/수정일: 2026-08-07
 */
.an-swal.swal2-popup {
  width: 100%;
  max-width: 560px;
  padding: 28px;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-base);
}

.an-swal .swal2-header {
  display: flex;
  align-items: flex-start;
  padding: 0;
  margin: 0 0 16px;
}

.an-swal .an-swal__title,
.an-swal .swal2-title {
  margin: 0;
  padding: 0;
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.45;
  color: var(--title-color);
  letter-spacing: var(--letter-tight);
  text-align: left;
}

.an-swal .swal2-html-container,
.an-swal .an-swal__body {
  margin: 0;
  padding: 0;
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-color);
  text-align: left;
  word-break: keep-all;
}

.an-swal .swal2-actions,
.an-swal .an-swal__actions {
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
  gap: 10px;
  justify-content: flex-end;
}

.an-swal .swal2-styled {
  margin: 0;
  box-shadow: none !important;
}

.an-swal .an-swal__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: auto;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--primary-color);
  color: var(--white-color);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  transition: opacity var(--duration-base);
}

.an-swal .an-swal__confirm:hover {
  opacity: 0.85;
}

.an-swal .an-swal__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: auto;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--title-color);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  transition: all var(--duration-base);
}

.an-swal .an-swal__cancel:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.an-swal .an-swal__close,
.an-swal .swal2-close {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  color: var(--muted-color);
  font-size: 28px;
  font-weight: 300;
  transition: color var(--duration-base);
}

.an-swal .an-swal__close:hover,
.an-swal .swal2-close:hover {
  color: var(--title-color);
  background: transparent;
}

.an-swal .swal2-icon {
  display: none !important;
}

.swal2-container.an-swal-container {
  z-index: var(--z-dialog) !important;
}

.swal2-container.an-swal-container > .swal2-backdrop-show,
.swal2-container.an-swal-container.swal2-backdrop-show {
  background: rgba(23, 23, 23, 0.55);
}

html.dark .an-swal.swal2-popup,
body.dark .an-swal.swal2-popup {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
 * 13. MEDIA
 * -------------------------------------------------------------------------- */
.avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.avatar--sm {
  width: 32px;
  height: 32px;
}

.avatar--md {
  width: 48px;
  height: 48px;
}

.bi {
  color: currentColor;
}

/* --------------------------------------------------------------------------
 * 14. UTILITIES
 * -------------------------------------------------------------------------- */
.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;
}

.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-6 {
  gap: var(--space-6);
}
.gap-10 {
  gap: var(--space-10);
}
.gap-15 {
  gap: var(--space-15);
}
.gap-20 {
  gap: var(--space-20);
}
.gap-30 {
  gap: var(--space-30);
}

.w-full {
  width: 100%;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.border {
  border: 1px solid var(--border-color);
}
.border-t {
  border-top: 1px solid var(--border-color);
}
.border-b {
  border-bottom: 1px solid var(--border-color);
}
.divide-y > * + * {
  border-top: 1px solid var(--border-color);
}

.bg-surface {
  background: var(--surface-color);
}
.bg-section {
  background: var(--section-bg-color);
}
.bg-chip {
  background: var(--chip-color);
}

/* --------------------------------------------------------------------------
 * 15. FOOTER (고정 다크 — 테마 토글과 무관)
 * -------------------------------------------------------------------------- */
.footer-section {
  background: #171717;
  padding-top: var(--space-90);
  color: #d3d3d3;
}

.footer-section h5 {
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  margin-bottom: 18px;
}

.footer-section p,
.footer-section a {
  color: #d3d3d3;
  font-size: var(--fs-label);
  line-height: 1.8;
}

.footer-section a:hover {
  color: #fff;
  opacity: 1;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
}

/* --------------------------------------------------------------------------
 * 16. HEADER & NAVIGATION
 * - 역할: 2단 헤더(상단바·메뉴바) — 이미지 레이아웃 + 디자인 시스템 토큰
 * - 작성/수정일: 2026-08-20
 * -------------------------------------------------------------------------- */
.an-header {
  position: relative;
  z-index: 100;
  background: var(--surface-color);
  color: var(--title-color);
}

/* [헤더 아이콘]
 * - 역할: 유틸 아이콘을 18px 고정. 버튼 `font:inherit`·라벨 14px 상속 차단. 패스가 작은 BI 글립은 광학 보정.
 * - 작성/수정일: 2026-08-20
 */
.an-header .bi {
  font-size: var(--fs-header-icon) !important;
  line-height: 1;
  flex: 0 0 auto;
}

.an-header .bi::before {
  font-size: inherit !important;
  line-height: 1;
  vertical-align: 0;
}

.an-header__lang-btn > .bi:not(.bi-chevron-down),
.an-header__theme-btn > .bi,
.an-header__notify > .bi,
.an-header__search-toggle > .bi,
.an-header__search-btn > .bi,
.an-header__auth-link > .bi,
.an-header__menu-toggle > .bi,
.an-header__nav-drawer-close > .bi,
.an-header__profile-bell > .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fs-header-icon);
  height: var(--fs-header-icon);
  flex: 0 0 var(--fs-header-icon);
}

/* box-arrow / person-plus 는 16 viewBox 대비 패스 여백이 커서 같은 font-size여도 작아 보임 */
.an-header .bi-box-arrow-in-right::before,
.an-header .bi-person-plus::before {
  font-size: 1.22em !important;
}

.an-header-hr {
  display: none;
}

.an-skip a {
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 100000;
  padding: 10px 16px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: var(--fs-label);
  font-weight: 600;
}

.an-skip a:focus {
  top: 0;
  opacity: 1;
}

/* --- Top bar --- */
.an-header__top {
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-color);
}

.an-header__top-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 88px;
  padding-block: 18px;
}

.an-header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  opacity: 1;
}

.an-header__logo:hover {
  opacity: 0.75;
}

.an-header__logo img {
  display: block;
  height: 28px;
  width: auto;
}

/* Search — section-bg 면 + 우측 아이콘 */
.an-header__search {
  flex: 1 1 auto;
  max-width: 640px;
  margin-inline: auto;
}

.an-header__search fieldset {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.an-header__search input[type="text"] {
  width: 100%;
  height: 50px;
  padding: 0 52px 0 20px;
  background: var(--section-bg-color);
  color: var(--title-color);
  font-size: var(--fs-label);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-base);
}

.an-header__search input[type="text"]::placeholder {
  color: var(--muted-color);
  font-weight: 400;
}

.an-header__search input[type="text"]:focus {
  border-color: var(--primary-color);
  background: var(--white-color);
}

.an-header__search-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--title-color);
  font-size: var(--fs-header-icon);
  border: 0;
  background: transparent;
  transition: opacity var(--duration-base);
}

.an-header__search-btn:hover {
  opacity: 0.65;
}

/**
 * [ARTNET Header 검색]
 * - 역할: 다크 모드에서 검색창이 헤더 배경과 구분되도록 면·보더 대비
 * - 작성/수정일: 2026-08-16
 */
html.dark .an-header__search input[type="text"],
body.dark .an-header__search input[type="text"] {
  background: var(--chip-color);
  border-color: var(--border-color);
  color: var(--title-color);
}

html.dark .an-header__search input[type="text"]::placeholder,
body.dark .an-header__search input[type="text"]::placeholder {
  color: var(--muted-color);
}

html.dark .an-header__search input[type="text"]:focus,
body.dark .an-header__search input[type="text"]:focus {
  border-color: var(--primary-color);
  background: var(--bg-soft);
}

html.dark .an-header__search-btn,
body.dark .an-header__search-btn {
  color: var(--title-color);
}

/* Utils — 언어 · 테마 · 인증 · 계정 */
.an-header__utils {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.an-header__lang {
  position: relative;
}

.an-header__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  font-size: var(--fs-header-icon);
  font-weight: 500;
  color: var(--title-color);
  background: transparent;
  border: 0;
  white-space: nowrap;
  transition: opacity var(--duration-menu);
}

.an-header__lang-btn > span {
  font-size: var(--fs-label);
}

.an-header__lang-btn:hover {
  opacity: 0.65;
}

.an-header__lang-btn .bi-chevron-down,
.an-header__lang-btn .bi-chevron-down::before {
  width: auto;
  height: auto;
  flex-basis: auto;
  font-size: var(--fs-caption) !important;
}

.an-header__lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  padding: 8px 0;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 20;
}

/* [언어 드롭다운]
 * - 역할: 버튼↔메뉴 간격 hover 브릿지
 * - 작성/수정일: 2026-08-07
 */
.an-header__lang-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.an-header__lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-color);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.an-header__lang-flag {
  width: var(--fs-header-icon);
  height: var(--fs-header-icon);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.an-header__lang-menu button:hover {
  color: var(--title-color);
  background: var(--section-bg-color);
}

.an-header__theme {
  position: relative;
}

.an-header__theme-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--title-color);
  font-size: var(--fs-header-icon);
}

.an-header__theme-btn:hover {
  opacity: 0.65;
}

/* [알림] PC 헤더 벨 — 작성/수정일: 2026-08-18 */
.an-header__notify {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--title-color);
  font-size: var(--fs-header-icon);
  text-decoration: none;
}

.an-header__notify:hover {
  opacity: 0.65;
  color: var(--title-color);
}

.an-header__notify-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color, #171717);
  border: 1.5px solid var(--white-color, #fff);
}

.an-header__theme-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 160px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.an-header__theme.is-open .an-header__theme-menu,
.an-header__theme-menu:not([hidden]) {
  display: block;
}

.an-header__theme-menu[hidden] {
  display: none !important;
}

.an-header__theme-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--text-color);
  font-size: var(--fs-label);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.an-header__theme-menu button:hover {
  background: var(--section-bg-color);
  color: var(--title-color);
}

.an-header__theme-menu button.is-active {
  color: #2f6fed;
  font-weight: 600;
}

.an-header__theme-check {
  margin-left: auto;
  opacity: 0;
}

.an-header__theme-menu button.is-active .an-header__theme-check {
  opacity: 1;
}

.an-header__auth {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.an-header__auth-sep {
  color: var(--border-color);
  font-weight: 300;
  user-select: none;
}

.an-header__auth-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--title-color);
  font-size: var(--fs-header-icon);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
}

.an-header__auth-link > span {
  font-size: var(--fs-label);
}

.an-header__auth-link:hover {
  opacity: 0.65;
  color: var(--title-color);
}

.an-header__account {
  position: relative;
}

.an-header__account-btn--member {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 4px 0 2px;
  background: transparent;
  color: var(--title-color);
  font-size: var(--fs-label);
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-md);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--duration-base);
  opacity: 1;
}

.an-header__account-btn--member:hover {
  opacity: 0.75;
  color: var(--title-color);
}

.an-header__account-avatar,
.an-header__account-card-avatar {
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--section-bg-color);
}

.an-header__account-avatar {
  width: 32px;
  height: 32px;
}

.an-header__account-avatar img,
.an-header__account-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.an-header__account-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* [계정 드롭다운]
 * - 역할: 프로필 카드 + 메뉴
 * - 작성/수정일: 2026-08-08
 */
.an-header__account-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 0;
  margin: 0;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 30;
  overflow: hidden;
}

.an-header__account.is-open .an-header__account-menu,
.an-header__account-menu:not([hidden]) {
  display: block;
}

.an-header__account-menu[hidden] {
  display: none !important;
}

.an-header__account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.an-header__account-card-avatar {
  width: 56px;
  height: 56px;
}

.an-header__account-card-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.an-header__account-card-name {
  color: var(--title-color);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
}

.an-header__account-card-id {
  color: var(--muted-color);
  font-size: var(--fs-caption);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.an-header__account-list {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

.an-header__account-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-color);
  text-align: left;
  opacity: 1;
}

.an-header__account-list a:hover {
  color: var(--title-color);
  background: var(--section-bg-color);
  opacity: 1;
}

.an-header__account-list .bi {
  width: 1.1em;
  text-align: center;
}

.an-header__search-toggle {
  display: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-header-icon);
}

.an-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--title-color);
  font-size: var(--fs-header-icon);
  background: transparent;
  cursor: pointer;
}

.an-header__nav-drawer-head,
.an-header__nav-backdrop {
  display: none;
}

/* --- Nav bar --- */
.an-header__nav {
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow var(--duration-menu) var(--ease-menu);
}

.an-header__nav.is-sticky {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-lg);
}

.an-header.has-sticky-nav {
  padding-bottom: 56px; /* nav 높이 보정 — 레이아웃 점프 방지 */
}

.an-header__nav-inner {
  display: flex;
  align-items: center;
  min-height: 56px;
}

.main-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu__item {
  position: relative;
  padding: 0 25px;
}

.main-menu__item:first-child {
  padding-left: 0;
}

.main-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--title-color);
  white-space: nowrap;
  transition: all var(--duration-menu) var(--ease-menu);
  opacity: 1;
  box-shadow: inset 0 0 0 transparent;
}

.main-menu__link:hover {
  opacity: 0.65;
}

.main-menu__item.active > .main-menu__link,
.main-menu__item:hover > .main-menu__link {
  font-weight: 600;
  opacity: 1;
  box-shadow: inset 0 -2px 0 var(--primary-color);
}

.main-menu__link .bi-chevron-down,
.main-menu__link .bi-chevron-down::before {
  font-size: var(--fs-caption) !important;
  transition: transform var(--duration-menu) var(--ease-menu);
}

.main-menu__item:hover > .main-menu__link .bi-chevron-down {
  transform: rotate(180deg);
}

.main-menu__empty {
  padding: 16px 0;
  font-size: var(--fs-label);
  color: var(--muted-color);
}

.main-menu__empty a {
  margin-left: 8px;
  font-weight: 600;
  text-decoration: underline;
}

/* 2뎁스 드롭다운 */
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.14);
  z-index: 30;
}

.main-menu__item:hover > .sub-menu,
.main-menu__item:focus-within > .sub-menu {
  display: block;
}

.sub-menu > li > a:not(.sub-menu__featured) {
  display: block;
  padding: 9px 20px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-color);
  opacity: 1;
  transition:
    color var(--duration-base),
    background var(--duration-base);
}

/* [GNB 서브메뉴] featured · 구분선 · 그룹 — 작성/수정일: 2026-08-23 */
.sub-menu__divider {
  height: 1px;
  margin: 8px 16px;
  padding: 0;
  background: var(--border-color);
  list-style: none;
}

.sub-menu__item--featured {
  border-bottom: 1px solid var(--border-color);
}

.sub-menu__item--group-end {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
}

.sub-menu__featured {
  display: block;
  padding: 14px 20px 12px;
  text-decoration: none;
  transition:
    background var(--duration-base),
    color var(--duration-base);
}

.sub-menu__featured:hover,
.sub-menu__featured:focus-visible {
  background: var(--section-bg-color);
}

.sub-menu__featured-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sub-menu__featured-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--title-color);
}

.sub-menu__featured-icon {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--muted-color);
  transition:
    transform var(--duration-base),
    color var(--duration-base);
}

.sub-menu__featured-desc {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted-color);
}

.sub-menu__featured:hover .sub-menu__featured-desc,
.sub-menu__featured:focus-visible .sub-menu__featured-desc {
  color: var(--text-color);
}

.sub-menu__featured:hover .sub-menu__featured-icon,
.sub-menu__featured:focus-visible .sub-menu__featured-icon {
  color: var(--title-color);
  transform: translateX(2px);
}

.sub-menu > li > a:not(.sub-menu__featured):hover {
  color: var(--title-color);
  background: var(--section-bg-color);
  opacity: 1;
}

.sub-menu--nested {
  top: 0;
  left: 100%;
  margin-left: 4px;
}

html.dark .sub-menu,
html.dark .an-header__lang-menu,
html.dark .an-header__account-menu,
html.dark .an-header__theme-menu,
html.dark .an-compose-modal,
body.dark .sub-menu,
body.dark .an-header__lang-menu,
body.dark .an-header__account-menu,
body.dark .an-header__theme-menu,
body.dark .an-compose-modal {
  box-shadow: none;
}

/* [글작성 일괄 UI]
 * - 역할: 헤더·FAB 트리거 · 등록 유형 모달
 * - 작성/수정일: 2026-08-21
 */
.an-compose {
  position: relative;
}

.an-compose--nav {
  display: none;
  margin-left: auto;
  flex-shrink: 0;
}

.an-compose--fab {
  display: none;
}

.an-compose__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-decoration: none;
}

.an-compose__btn .bi {
  font-size: var(--fs-label, 14px);
  line-height: 1;
}

/*
 * [글작성 PC nav]
 * - 역할: GNB 메뉴와 같은 텍스트 톤 (+ 아이콘 유지, filled CTA 제거)
 * - 작성/수정일: 2026-08-21
 */
.an-compose--nav .an-compose__btn,
.an-compose--nav .an-compose__btn.primary-btn2 {
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--title-color);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  box-shadow: none;
  opacity: 1;
}

.an-compose--nav .an-compose__btn:hover,
.an-compose--nav .an-compose__btn:focus-visible,
.an-compose--nav .an-compose__btn.primary-btn2:hover,
.an-compose--nav .an-compose__btn.primary-btn2:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--title-color);
  opacity: 0.65;
}

.an-compose--nav .an-compose__btn .bi {
  font-size: 15px;
}

html.dark .an-compose--nav .an-compose__btn.primary-btn2,
body.dark .an-compose--nav .an-compose__btn.primary-btn2 {
  background: transparent;
  color: var(--title-color);
}

html.dark .an-compose--nav .an-compose__btn.primary-btn2:hover,
html.dark .an-compose--nav .an-compose__btn.primary-btn2:focus-visible,
body.dark .an-compose--nav .an-compose__btn.primary-btn2:hover,
body.dark .an-compose--nav .an-compose__btn.primary-btn2:focus-visible {
  background: transparent;
  color: var(--title-color);
  opacity: 0.65;
}

.an-compose-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 23, 23, 0.55);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.an-compose-overlay.is-open,
.an-compose-overlay:not([hidden]) {
  display: flex;
}

.an-compose-overlay[hidden] {
  display: none !important;
}

.an-compose-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: min(90vh, 780px);
  margin: auto;
  padding: 32px 24px 24px 24px;
  background: var(--white-color);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

.an-compose-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-color);
  font-size: 18px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color var(--duration-base),
    background var(--duration-base);
}

.an-compose-modal__close:hover {
  color: var(--title-color);
  background: var(--section-bg-color);
}

.an-compose-modal__head {
  flex: 0 0 auto;
  padding-right: 40px;
  margin-bottom: 18px;
}

.an-compose-modal__kicker {
  margin: 0 0 6px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-color);
}

.an-compose-modal__title {
  margin: 0;
  font-size: var(--fs-h3, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--title-color);
  letter-spacing: var(--letter-tight);
}

.an-compose-modal__desc {
  margin: 10px 0 0;
  font-size: var(--fs-body, 1rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted-color);
}

.an-compose__list {
  list-style: none;
  margin: 0;
  padding: 0 2px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* [글작성 카드뉴스]
 * - 역할: background cover · 16/5 · 텍스트 좌측 중앙 · 호버 딤
 * - 작성/수정일: 2026-08-21
 * - 주의: 전역 `a:hover { opacity: 0.65 }` 가 흐림을 만들므로 반드시 opacity:1 고정
 */
.an-compose__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 88px;
  padding: 16px 48px 16px 20px;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  background-color: #171717;
  opacity: 1;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
  transition:
    transform var(--duration-base),
    box-shadow var(--duration-base);
}

.an-compose__item--photo {
  aspect-ratio: 16 / 5;
  min-height: 0;
  background-image: var(--an-compose-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.an-compose__item:hover,
.an-compose__item:focus-visible,
a.an-compose__item:hover,
a.an-compose__item:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.14));
  outline: none;
  color: #fff;
}

.an-compose__item--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* [글작성 카드] 기본 딤을 살짝 낮춰 호버 전 이미지를 밝게 — 작성/수정일: 2026-08-21 */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.34) 48%,
    rgba(0, 0, 0, 0.14) 100%
  );
  pointer-events: none;
}

.an-compose__item--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.an-compose__item--photo:hover::after,
.an-compose__item--photo:focus-visible::after,
a.an-compose__item--photo:hover::after,
a.an-compose__item--photo:focus-visible::after {
  opacity: 1;
}

.an-compose__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 78%;
  text-align: left;
}

.an-compose__label {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: var(--letter-tight);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.an-compose__hint {
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.an-compose__chev {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

body.is-compose-open {
  overflow: hidden;
}

@media (min-width: 992px) {
  .an-compose--nav {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .an-compose--fab {
    display: block;
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(20px, calc(16px + env(safe-area-inset-bottom, 0px)));
    z-index: 1100;
  }

  .an-compose--fab .an-compose__btn {
    height: 52px;
    padding: 0 18px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }

  .an-compose--fab .an-compose__btn .bi {
    font-size: var(--fs-body, 16px);
  }

  .an-compose-modal {
    max-width: 100%;
    max-height: min(92vh, 780px);
    padding: 28px 14px 14px;
  }

  .an-compose__item {
    padding: 14px 42px 14px 16px;
  }

  /* 전시 필터 드로어 열림 시 FAB 가림 — 작성/수정일: 2026-08-21 */
  body:has(.an-ex-list.is-filter-open) .an-compose--fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 1399.98px) {
  .main-menu__item {
    padding: 0 18px;
  }

  .main-menu__link {
    font-size: 14px;
  }

  /* [글작성 PC] 메뉴와 동일 스케일 — 작성/수정일: 2026-08-21 */
  .an-compose--nav .an-compose__btn {
    font-size: 14px;
  }
}

/* --- Mobile --- */
@media (max-width: 991.98px) {
  :root {
    /* 모바일은 헤더 nav sticky 없음 — 뷰포트 상단 고정 (+ safe-area) */
    --an-editor-toolbar-sticky-top: env(safe-area-inset-top, 0px);
    --an-mobile-header-offset: 64px;
  }

  /* [모바일 Scroll-Aware Sticky Header]
   * - 역할: 상단바만 fixed+slide. 드로어/백드롭은 뷰포트 고정으로 헤더에 가리지 않음
   * - 작성/수정일: 2026-08-07
   */
  body {
    padding-top: var(--an-mobile-header-offset);
  }

  .an-header {
    position: relative;
    z-index: auto;
    background: transparent;
  }

  .an-header__top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 1100;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .an-header.is-header-hidden .an-header__top {
    transform: translate3d(0, -100%, 0);
    pointer-events: none;
  }

  .an-header.is-nav-open .an-header__top,
  .an-header.is-search-open .an-header__top {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .an-header__top-inner {
    /* [모바일 헤더]
     * - 역할: [햄버거+로고 좌측] [유틸 우측]
     * - 작성/수정일: 2026-08-20
     */
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    min-height: 64px;
    padding-block: 12px;
    gap: 16px;
  }

  .an-header__menu-toggle {
    display: inline-flex;
    justify-self: start;
    grid-column: 1;
  }

  .an-header__logo {
    grid-column: 2;
    justify-self: start;
  }

  .an-header__logo img {
    height: 22px;
  }

  .an-header__utils {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
    gap: 6px;
  }

  .an-header__search {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-width: none;
    margin: 0;
    padding: 12px var(--container-pad);
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    z-index: 40;
  }

  .an-header.is-search-open .an-header__search {
    display: block;
  }

  /* [모바일 헤더]
   * - 역할: 언어 버튼 아이콘만 표시
   * - 작성/수정일: 2026-08-07
   */
  .an-header__lang {
    display: block;
  }

  .an-header__lang-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    font-size: var(--fs-header-icon);
  }

  .an-header__lang-btn span,
  .an-header__lang-btn .bi-chevron-down {
    display: none;
  }

  .an-header__auth-link span {
    display: none;
  }

  .an-header__auth-link {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }

  .an-header__auth {
    gap: 6px;
  }

  .an-header__auth-sep {
    display: none;
  }

  .an-header__account-name {
    display: none;
  }

  .an-header__account-btn--member {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }

  .an-header__search-toggle {
    display: inline-flex;
    width: 40px;
    height: 40px;
  }

  .an-header__menu-toggle {
    width: 40px;
    height: 40px;
  }

  /* [모바일 메뉴]
   * - 역할: 왼쪽에서 슬라이드인 드로어 + 스크림
   * - 작성/수정일: 2026-08-07
   */
  .an-header__nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
  }

  .an-header__nav-drawer-title {
    font-size: var(--fs-label, 14px);
    font-weight: 700;
    color: var(--title-color, #171717);
  }

  .an-header__nav-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--title-color, #171717);
    font-size: var(--fs-header-icon);
    cursor: pointer;
  }

  /* [모바일 메뉴 프로필]
   * - 역할: 로그인 회원 드로어 상단 프로필 카드
   * - 작성/수정일: 2026-08-07
   */
  .an-header__nav-drawer-head--profile {
    position: relative;
    display: block;
    padding: 12px 20px 24px;
  }

  .an-header__nav-drawer-head--profile .an-header__nav-drawer-close {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 2;
  }

  .an-header__profile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 8px;
  }

  .an-header__profile-bell {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: var(--radius-full, 999px);
    color: var(--title-color, #171717);
    font-size: var(--fs-header-icon);
    background: var(--white-color, #fff);
  }

  .an-header__profile-bell-dot,
  .an-header__notify-dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color, #171717);
    border: 1.5px solid var(--white-color, #fff);
  }

  .an-header__profile-avatar {
    width: 72px;
    height: 72px;
    margin: 8px 0 12px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--section-bg-color, #f5f5f5);
    border: 1px solid var(--border-color, #e5e5e5);
  }

  .an-header__profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .an-header__profile-name {
    margin: 0;
    font-size: var(--fs-body, 15px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--title-color, #171717);
  }

  .an-header__profile-email {
    margin: 6px 0 0;
    font-size: var(--fs-caption, 12px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--muted-color, #7c7c7c);
    word-break: break-all;
  }

  .an-header__profile-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    min-height: 36px;
    padding: 0 18px;
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: var(--radius-md, 10px);
    background: var(--white-color, #fff);
    color: var(--title-color, #171717);
    font-size: var(--fs-caption, 12px);
    font-weight: 600;
    text-decoration: none;
  }

  .an-header__profile-edit:hover {
    background: var(--section-bg-color, #f5f5f5);
  }

  .an-header__nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    /* 상단바(1100)보다 위 — 작성/수정일: 2026-08-07 */
    z-index: 1200;
    width: min(320px, 86vw);
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--white-color, #fff);
    border-bottom: 0;
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.16));
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
    /* 뷰포트 전환 시 슬라이드 깜빡임 방지 — 햄버거 조작 시에만 motion 클래스 */
    transition: none;
  }

  .an-header.is-nav-motion .an-header__nav {
    transition:
      transform var(--duration-menu, 0.3s) var(--ease-menu, ease),
      visibility var(--duration-menu, 0.3s);
  }

  .an-header.is-nav-open .an-header__nav {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .an-header__nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    /* 상단바 위, 드로어 아래 — 작성/수정일: 2026-08-07 */
    z-index: 1150;
    border: 0;
    background: rgba(23, 23, 23, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }

  .an-header.is-nav-motion .an-header__nav-backdrop {
    transition:
      opacity var(--duration-menu, 0.3s) var(--ease-menu, ease),
      visibility var(--duration-menu, 0.3s);
  }

  .an-header.is-nav-open .an-header__nav-backdrop,
  .an-header__nav-backdrop:not([hidden]) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .an-header__nav-backdrop[hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .an-header.has-sticky-nav {
    padding-bottom: 0;
  }

  .an-header__nav.is-sticky {
    position: fixed;
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.16));
  }

  .an-header__nav-inner {
    display: block;
    min-height: 0;
    max-width: none;
    padding: 8px 0 24px;
  }

  .main-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .main-menu__item {
    padding: 0;
    border-bottom: 1px solid var(--border-color);
  }

  .main-menu__item:first-child {
    padding-left: 0;
  }

  .main-menu__link {
    width: 100%;
    justify-content: space-between;
    height: 52px;
    padding-inline: 20px;
    box-shadow: none !important;
  }

  .main-menu__item.active > .main-menu__link,
  .main-menu__item:hover > .main-menu__link {
    box-shadow: none !important;
    background: var(--section-bg-color, #f5f5f5);
  }

  .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--section-bg-color);
    padding: 4px 0 12px;
  }

  .main-menu__item.is-open > .sub-menu {
    display: block;
  }

  .main-menu__item:hover > .sub-menu,
  .main-menu__item:focus-within > .sub-menu {
    display: none;
  }

  .main-menu__item.is-open:hover > .sub-menu,
  .main-menu__item.is-open:focus-within > .sub-menu {
    display: block;
  }

  .sub-menu > li > a:not(.sub-menu__featured) {
    padding: 10px 20px 10px 32px;
  }

  .sub-menu__featured {
    padding: 14px 20px 12px 32px;
  }

  .sub-menu__divider {
    margin: 8px 20px 8px 32px;
  }
}

/* PC: 드로어 초기화 + 전용 UI 숨김 (뷰포트 토글 시 슬라이드 잔상 방지) */
@media (min-width: 992px) {
  .an-header__nav-drawer-head,
  .an-header__nav-backdrop {
    display: none !important;
  }

  .an-header__nav {
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .an-header__top {
    transform: none !important;
    transition: none !important;
  }
}

/* [리사이즈]
 * - 역할: DevTools 모바일↔PC 토글 시 헤더/드로어 transition 일시 중지
 * - 작성/수정일: 2026-08-07
 */
html.is-an-resize-quiet .an-header__nav,
html.is-an-resize-quiet .an-header__nav-backdrop,
html.is-an-resize-quiet .an-header__top {
  transition: none !important;
}

html.is-an-nav-locked,
html.is-an-nav-locked body,
body.is-an-nav-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
 * 17. REDUCED MOTION
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .an-card:hover .an-card__media img,
  .card-img img {
    transform: none;
  }

  .an-header,
  .an-header__top {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
 * 18. GOOGLE TRANSLATE
 * - 역할: 위젯 상단 배너 숨김 (마운트 노드 자체는 유지)
 * - 작성/수정일: 2026-08-07
 * -------------------------------------------------------------------------- */
html body {
  top: 0 !important;
}

.skiptranslate {
  display: none !important;
  position: fixed;
  top: -1000px;
  height: 0;
  overflow: hidden;
}

#google_translate_element {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
 * [다크모드] 전역 서피스
 * - 역할: 기능 CSS의 #fff 하드코딩을 html.dark에서 덮는다 (페이지별 패치 대신)
 * - 작성/수정일: 2026-08-15
 * -------------------------------------------------------------------------- */
/**
 * [ARTNET 체크박스·라디오]
 * - 역할: 다크 미체크는 라인(아웃라인), 체크 시 칩+체크 표시 — 순백 면 제거
 * - 작성/수정일: 2026-08-16
 */
html.dark input[type="checkbox"],
html.dark input[type="radio"],
body.dark input[type="checkbox"],
body.dark input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--muted-color);
  background-color: transparent;
  background-image: none;
  vertical-align: -0.125em;
  cursor: pointer;
  accent-color: transparent;
  flex-shrink: 0;
}

html.dark input[type="checkbox"],
body.dark input[type="checkbox"] {
  border-radius: 3px;
}

html.dark input[type="radio"],
body.dark input[type="radio"] {
  border-radius: 50%;
}

html.dark input[type="checkbox"]:checked,
body.dark input[type="checkbox"]:checked {
  border-color: var(--muted-color);
  background-color: var(--chip-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: 75% 75%;
  background-position: center;
  background-repeat: no-repeat;
}

html.dark input[type="radio"]:checked,
body.dark input[type="radio"]:checked {
  border-color: var(--muted-color);
  background-color: transparent;
  background-image: radial-gradient(
    circle,
    var(--title-color) 38%,
    transparent 42%
  );
}

html.dark input[type="checkbox"]:focus-visible,
html.dark input[type="radio"]:focus-visible,
body.dark input[type="checkbox"]:focus-visible,
body.dark input[type="radio"]:focus-visible {
  outline: 2px solid var(--muted-color);
  outline-offset: 2px;
}

html.dark input[type="checkbox"]:disabled,
html.dark input[type="radio"]:disabled,
body.dark input[type="checkbox"]:disabled,
body.dark input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* [ARTNET 체크박스] 커스텀 label+span(chk_box)도 미체크는 라인 — 작성/수정일: 2026-08-16 */
html.dark .chk_box input[type="checkbox"] + label span,
body.dark .chk_box input[type="checkbox"] + label span {
  background: transparent !important;
  border-color: var(--muted-color) !important;
}

html.dark .chk_box input[type="checkbox"]:checked + label span,
body.dark .chk_box input[type="checkbox"]:checked + label span {
  background-color: var(--chip-color) !important;
  border-color: var(--muted-color) !important;
}

html.dark .an-lt-card,
body.dark .an-lt-card {
  background: var(--chip-color);
  border-color: var(--border-color);
  box-shadow: none;
}

html.dark .an-lt-card__avatar,
body.dark .an-lt-card__avatar,
html.dark .an-lt-card__thumb,
body.dark .an-lt-card__thumb,
html.dark .an-lt-card__thumb--empty,
body.dark .an-lt-card__thumb--empty {
  background: var(--cta-surface);
}

html.dark .an-lt-card__more,
body.dark .an-lt-card__more {
  background: var(--cta-surface);
  border-color: var(--border-color);
  color: var(--title-color);
}

html.dark .an-lt-card__more:hover,
body.dark .an-lt-card__more:hover {
  background: var(--cta-surface-hover);
  border-color: var(--divider-color);
  color: var(--on-dark);
}

html.dark .an-lt-card__list,
body.dark .an-lt-card__list,
html.dark .an-lt-card__list li,
body.dark .an-lt-card__list li {
  border-color: var(--cta-surface-hover);
}

html.dark .an-cm-hero__nav,
body.dark .an-cm-hero__nav {
  background: var(--cta-surface);
  border-color: var(--border-color);
  color: var(--title-color);
  box-shadow: none;
}

html.dark .an-cm-hero__nav:hover,
html.dark .an-cm-hero__nav:focus-visible,
body.dark .an-cm-hero__nav:hover,
body.dark .an-cm-hero__nav:focus-visible {
  background: var(--cta-surface-hover);
}

html.dark .an-cm-hero__card--dark .an-cm-hero__cta,
body.dark .an-cm-hero__card--dark .an-cm-hero__cta {
  background: var(--cta-surface);
  border-color: var(--divider-color);
  color: var(--title-color);
}

html.dark .an-ex-mode-toggle,
html.dark .an-gl-mode-toggle,
body.dark .an-ex-mode-toggle,
body.dark .an-gl-mode-toggle,
html.dark .an-ex-main__tools .an-ex-mode-toggle,
html.dark .an-gl-main__tools .an-gl-mode-toggle,
body.dark .an-ex-main__tools .an-ex-mode-toggle,
body.dark .an-gl-main__tools .an-gl-mode-toggle {
  background: var(--section-bg-color);
  border-color: var(--border-color);
}

html.dark .an-ex-mode-toggle__btn.is-active,
html.dark .an-gl-mode-toggle__btn.is-active,
body.dark .an-ex-mode-toggle__btn.is-active,
body.dark .an-gl-mode-toggle__btn.is-active,
html.dark .an-ex-main__tools .an-ex-mode-toggle__btn.is-active,
html.dark .an-gl-main__tools .an-gl-mode-toggle__btn.is-active,
body.dark .an-ex-main__tools .an-ex-mode-toggle__btn.is-active,
body.dark .an-gl-main__tools .an-gl-mode-toggle__btn.is-active {
  background: var(--cta-surface-hover);
  color: var(--title-color);
}

html.dark .an-ex-mapview__float--mode .an-ex-mode-toggle__btn.is-active,
html.dark .an-gl-mapview__float--mode .an-gl-mode-toggle__btn.is-active,
body.dark .an-ex-mapview__float--mode .an-ex-mode-toggle__btn.is-active,
body.dark .an-gl-mapview__float--mode .an-gl-mode-toggle__btn.is-active {
  background: var(--cta-surface-hover);
  color: var(--title-color);
}

html.dark .an-gl-main__filter-btn,
body.dark .an-gl-main__filter-btn {
  background: var(--section-bg-color);
  border-color: var(--border-color);
  color: var(--title-color);
}

html.dark .an-ex-mapview__float--search,
html.dark .an-gl-mapview__float--search,
html.dark .an-ex-mapview__float--mode,
html.dark .an-gl-mapview__float--mode,
html.dark .an-ex-mapview__filter-btn,
html.dark .an-gl-mapview__filter-btn,
html.dark .an-ex-mapview__panel,
html.dark .an-gl-mapview__panel,
html.dark .an-ex-mapview__side,
html.dark .an-gl-mapview__side,
body.dark .an-ex-mapview__float--search,
body.dark .an-gl-mapview__float--search,
body.dark .an-ex-mapview__float--mode,
body.dark .an-gl-mapview__float--mode,
body.dark .an-ex-mapview__filter-btn,
body.dark .an-gl-mapview__filter-btn,
body.dark .an-ex-mapview__panel,
body.dark .an-gl-mapview__panel,
body.dark .an-ex-mapview__side,
body.dark .an-gl-mapview__side {
  background: var(--chip-color);
  border-color: var(--border-color);
  color: var(--title-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.dark .an-ex-mapview__filter-btn:hover,
html.dark .an-gl-mapview__filter-btn:hover,
html.dark .an-ex-mapview__filter-btn.is-active,
html.dark .an-gl-mapview__filter-btn.is-active,
body.dark .an-ex-mapview__filter-btn:hover,
body.dark .an-gl-mapview__filter-btn:hover,
body.dark .an-ex-mapview__filter-btn.is-active,
body.dark .an-gl-mapview__filter-btn.is-active {
  background: var(--cta-surface);
}

html.dark .an-ex-mapview__side-head,
html.dark .an-gl-mapview__side-head,
html.dark .an-ex-mapview__panel .an-ex-filter__actions,
html.dark .an-gl-mapview__panel .an-gl-filter__actions,
body.dark .an-ex-mapview__side-head,
body.dark .an-gl-mapview__side-head,
body.dark .an-ex-mapview__panel .an-ex-filter__actions,
body.dark .an-gl-mapview__panel .an-gl-filter__actions {
  border-color: var(--border-color);
}

html.dark .an-ex-map-card.is-active,
html.dark .an-ex-map-card.is-hover,
html.dark .an-gl-map-card.is-active,
html.dark .an-gl-map-card.is-hover,
body.dark .an-ex-map-card.is-active,
body.dark .an-ex-map-card.is-hover,
body.dark .an-gl-map-card.is-active,
body.dark .an-gl-map-card.is-hover {
  background: var(--cta-surface);
  border-color: var(--divider-color);
}

html.dark .an-ex-map-card__media,
html.dark .an-gl-map-card__media,
html.dark .an-ex-map-card__ph,
html.dark .an-gl-map-card__ph,
body.dark .an-ex-map-card__media,
body.dark .an-gl-map-card__media,
body.dark .an-ex-map-card__ph,
body.dark .an-gl-map-card__ph {
  background: var(--cta-surface);
}

html.dark .an-ex-mapview__map-wrap,
html.dark .an-gl-mapview__map-wrap,
body.dark .an-ex-mapview__map-wrap,
body.dark .an-gl-mapview__map-wrap {
  background: var(--bg-color);
}

html.dark .an-ex-mapview__canvas,
html.dark .an-gl-mapview__canvas,
body.dark .an-ex-mapview__canvas,
body.dark .an-gl-mapview__canvas {
  filter: brightness(0.72) contrast(1.08) saturate(0.85);
}

html.dark .an-map-ctrls__zoom,
html.dark .an-map-ctrls__type,
body.dark .an-map-ctrls__zoom,
body.dark .an-map-ctrls__type {
  background: var(--section-bg-color);
  border-color: var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html.dark .an-map-ctrls__zoom-btn,
html.dark .an-map-ctrls__type-btn,
body.dark .an-map-ctrls__zoom-btn,
body.dark .an-map-ctrls__type-btn {
  background: var(--section-bg-color);
  color: var(--title-color);
}

html.dark .an-map-ctrls__zoom-btn:hover,
html.dark .an-map-ctrls__type-btn:not(.is-active):hover,
body.dark .an-map-ctrls__zoom-btn:hover,
body.dark .an-map-ctrls__type-btn:not(.is-active):hover {
  background: var(--cta-surface-hover);
}

html.dark .an-map-ctrls__type-btn + .an-map-ctrls__type-btn,
body.dark .an-map-ctrls__type-btn + .an-map-ctrls__type-btn {
  border-left-color: var(--border-color);
}

html.dark .an-map-ctrls__track,
body.dark .an-map-ctrls__track {
  background: var(--cta-surface-hover);
}

html.dark .an-ex-home-search__field select,
html.dark .an-ex-home-chip,
html.dark .an-ex-home-tabs__btn,
html.dark .an-ex-card--row,
body.dark .an-ex-home-search__field select,
body.dark .an-ex-home-chip,
body.dark .an-ex-home-tabs__btn,
body.dark .an-ex-card--row {
  background: var(--section-bg-color);
  border-color: var(--border-color);
  color: var(--title-color);
}

html.dark .an-ex-home-tabs__btn.is-active,
body.dark .an-ex-home-tabs__btn.is-active {
  background: var(--cta-surface-hover);
  border-color: var(--divider-color);
  color: var(--title-color);
}