/* 글꼴이 늦게 오면 그 화면은 대체 글꼴로 끝까지 그리고 바꿔 그리지 않는다(optional, 2026-10-15). 페이지를 옮길 때마다
   글자 모양이 한 번 바뀌어 화면이 덜 그려졌다가 다시 그려지는 것처럼 보이던 현상을 없앤다. 레이아웃 <head>가 미리 받아 둔다(preload) */
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/vendor/pretendard/Pretendard-Regular.subset-97213db5c578498e3bab52fb858e720a.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("/vendor/pretendard/Pretendard-SemiBold.subset-3ba9cd1e8bcb4824f073865d2ed81d34.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/vendor/pretendard/Pretendard-Bold.subset-40b92fb6e0e447ca7f0c7fddb6cec9c6.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url("/vendor/pretendard/Pretendard-ExtraBold.subset-6dec4607c4804775486c0b22e1b96f4b.woff2") format("woff2");
}

:root {
  --color-bg: #f5f4f1;
  --color-surface: #ffffff;
  --color-surface-inverse: #1c1917;
  --color-surface-soft: #efede8;
  --color-text: #1c1917;
  --color-text-muted: #6f6863;
  --color-text-faint: #746d68;
  --color-text-inverse: #f5f4f1;
  --color-text-inverse-muted: #a8a29e;
  --color-border: #e7e5e0;
  --color-border-strong: #d6d3cd;
  --color-border-interactive: #918b86;
  --color-accent: #d97706;
  --color-accent-strong: #b45309;
  --color-accent-active: #92400e;
  --color-accent-soft: #e8a33d;
  --color-accent-wash: rgb(217 119 6 / 12%);
  --color-accent-highlight: rgb(217 119 6 / 25%);
  --color-header: rgb(245 244 241 / 92%);
  --color-success: #166534;
  --color-success-bg: #dcfce7;
  /* 위험 글자가 연한 위험 배경(#fee2e2)과 페이지 바탕 위에서도 4.5:1을 넘도록 #dc2626에서 한 단계 진하게(2026-10-23 접근성 점검) */
  --color-danger: #b91c1c;
  --color-danger-bg: #fee2e2;
  --color-kakao: #fee500;
  --color-naver: #03c75a;
  --color-kakao-text: #191919;
  --color-focus: #b45309;
  --color-weekend-sat: #2563eb;

  /* 운영시설(COMCD, cominfo) 고유색. 화면마다 같은 운영시설을 같은 색 점으로 보인다(2026-10-14). 운영시설이 늘면 여기와 components.css .com-dot에 한 줄씩 더한다. */
  --com-01: #e8590c; /* 동작아트갤러리 */
  --com-02: #1971c2; /* 상도어울마당 아트홀 */
  --com-03: #7048e8; /* 본동어울마당 아트홀 */
  --com-04: #0c8599; /* 까망돌어울마당 아트홀 */
  --com-05: #2f9e44; /* 사당생활문화센터 */
  --com-06: #e64980; /* 이수역 버스킹 공연장 */
  --com-07: #f59f00; /* 김영삼도서관 */
  --com-08: #5c940d; /* 까망돌도서관 */
  --com-09: #862e9c; /* 동작영어마루도서관 */
  --com-10: #364fc7; /* 사당솔밭도서관 */
  --com-11: #795548; /* 사육신역사관 */

  --font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 5.25rem;
  --font-h1: 3.5rem;
  --font-h2: 2.625rem;
  --font-h3: 1.375rem;
  --font-lead: 1.125rem;
  --font-body: 1rem;
  --font-small: 0.875rem;
  --font-caption: 0.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  --radius-small: 0.375rem;
  --radius-control: 0.75rem;
  --radius-media: 0.875rem;
  --radius-menu: 1.125rem;
  --radius-card: 1.5rem;
  --radius-dialog: 1.75rem;
  --radius-section: 2rem;
  --radius-pill: 999rem;

  --border-default: 1px solid var(--color-border);
  --border-strong: 1.5px solid var(--color-border-strong);
  --shadow-menu: 0 1.125rem 2.5rem rgb(28 25 23 / 12%);
  --shadow-card: 0 1rem 2.5rem rgb(28 25 23 / 10%);
  --motion-fast: 140ms ease-out;
  --motion-base: 220ms ease-in-out;
  --motion-emphasis: 800ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-max: 80rem;
  --header-height: 4.5rem;
  --drawer-actions-height: 4.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 20rem;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

body.site-nav-open {
  overflow: hidden;
}

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

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

button {
  padding: 0;
}

img,
svg {
  display: block;
}

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

h1,
h2,
h3,
p {
  margin-block: 0;
}

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

::selection {
  background: rgb(217 119 6 / 20%);
}

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

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
  border-radius: var(--radius-control);
  transform: translateY(-200%);
  transition: transform var(--motion-fast);
}

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

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 동작 줄이기: 위치·크기가 움직이는 전환과 애니메이션은 끄되, 색·투명도 변화는 남겨 호버·선택 같은 상태 변화가 여전히 보이게 한다(2026-10-23) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, opacity, box-shadow !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 같은 사이트 안 페이지 이동을 흰 화면 깜빡임 없이 짧게 겹쳐 넘긴다(2026-10-15). 지원하지 않는 브라우저와 동작 줄이기 설정은 기존 이동 그대로다.
   헤더처럼 두 화면에 똑같이 있는 부분은 겹쳐도 그대로 보여 고정된 것처럼 느껴진다 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
  }
}