@charset "UTF-8";
/* ═════════════════════════════════════════════════════════════════════════
 * 공통 색상 시스템 (Design Tokens)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 프로젝트 전역에서 사용되는 색상 변수 정의
 * ═════════════════════════════════════════════════════════════════════════
 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
:root {
  --color-text: #111;
  --color-text-sub: #333;
  --color-text-muted: #666;
  --color-text-placeholder: #999;
  --color-bg: #fff;
  --color-bg-hover: #f5f5f5;
  --color-bg-active: #eee;
  --color-border: #ddd;
  --color-border-hover: #bbb;
  --color-focus: #0066cc;
  --color-focus-ring: rgba(0, 102, 204, 0.15);
  --color-primary: #4763e4;
  --color-primary-hover: #3a52c5;
  --color-primary-active: #2e42a0;
  --color-blue: #3b82f6;
  --color-blue-hover: #2563eb;
  --color-danger: #e53e3e;
  --color-danger-hover: #c53030;
  --color-danger-active: #9b2c2c;
  --color-excel: #217346;
  --color-excel-hover: #1a5c38;
  --color-excel-active: #14472b;
  --color-selection: #e0e0e0;
  --form-height: 40px;
  --form-radius: 4px;
  --form-font-size: 16px;
  --color-dark-text: #e5e7eb;
  --color-dark-border: #30363d;
  --color-dark-hover: #273548;
  --color-dark-active: #1e293b;
  --color-dark-filled: #33373D;
  --color-dark-filled-hover: #3f4550;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ██████╗  ███████╗ ███████╗ ███████╗ ████████╗
 * ██╔══██╗ ██╔════╝ ██╔════╝ ██╔════╝ ╚══██╔══╝
 * ██████╔╝ █████╗   ███████╗ █████╗      ██║
 * ██╔══██╗ ██╔══╝   ╚════██║ ██╔══╝      ██║
 * ██║  ██║ ███████╗ ███████║ ███████╗    ██║
 * ╚═╝  ╚═╝ ╚══════╝ ╚══════╝ ╚══════╝    ╚═╝
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 공통 CSS Reset 스타일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 파일 정보                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 설명: 브라우저 기본 스타일 초기화 및 공통 스타일 정의                 │
 * │ • 작성자: 유대경                                                        │
 * │ • 주의: 삭제 및 수정 금지                                               │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */
/* ═════════════════════════════════════════════════════════════════════════
 * [1] 전역 요소 초기화
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 모든 HTML 요소의 기본 margin, padding, border 제거
 * ═════════════════════════════════════════════════════════════════════════
 */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  padding: 0;
  border: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  line-height: 1.5;
  vertical-align: baseline;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [2] HTML5 블록 요소 정의
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: HTML5 시맨틱 요소들의 display: block 설정
 * ═════════════════════════════════════════════════════════════════════════
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [3] 리스트 및 인용문 초기화
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 리스트 스타일 제거, 인용문 따옴표 제거
 * ═════════════════════════════════════════════════════════════════════════
 */
ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [4] 테이블 및 폼 요소 초기화
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 테이블 border 통합, 폼 요소 기본 스타일 제거
 * ═════════════════════════════════════════════════════════════════════════
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

button,
input {
  border: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [5] 가상 요소 및 박스 모델
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: ::before, ::after 초기화, box-sizing 통일
 * ═════════════════════════════════════════════════════════════════════════
 */
::after,
::before {
  content: "";
  position: absolute;
  display: none;
  box-sizing: border-box;
  font-family: inherit;
  color: inherit;
}

* {
  box-sizing: border-box;
  font-family: inherit;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [6] 인라인 요소 스타일
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 링크, 강조, 버튼, 마크 등 인라인 요소 기본 스타일
 * ═════════════════════════════════════════════════════════════════════════
 */
a {
  text-decoration: none;
  color: inherit;
}

em {
  font-style: italic;
}

strong {
  font-weight: 700;
}

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

mark:not([class^=marker-]) {
  background: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ██╗  ██╗ ██████╗  ██████╗  ███████╗
 * ██║ ██╔╝ ██╔══██╗ ██╔══██╗ ██╔════╝
 * █████╔╝  ██████╔╝ ██║  ██║ ███████╗
 * ██╔═██╗  ██╔══██╗ ██║  ██║ ╚════██║
 * ██║  ██╗ ██║  ██║ ██████╔╝ ███████║
 * ╚═╝  ╚═╝ ╚═╝  ╚═╝ ╚═════╝  ╚══════╝
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * KRDS (Korea Government Design System) 타이포그래피
 * 참조: https://www.krds.go.kr/html/site/style/style_03.html
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 기본 원칙                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 본문 기준: 17px                                                      │
 * │ • 줄 간격: 150% (line-height: 1.5)                                      │
 * │ • 글자 두께: regular(400), bold(700) 2가지만 사용                       │
 * │ • 최소 본문 크기: 16px 이상 권장                                        │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */
/* ═════════════════════════════════════════════════════════════════════════
 * [1] 헤딩 스타일 (Heading)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 페이지 제목 및 섹션 구분을 위한 헤딩 요소 스타일
 *
 * ┌──────────┬───────────────┬───────────────┬────────────┐
 * │  요소    │    PC 크기    │  Mobile 크기  │   Weight   │
 * ├──────────┼───────────────┼───────────────┼────────────┤
 * │   h1     │     40px      │     28px    │    700     │
 * │   h2     │     32px      │     24px    │    700     │
 * │   h3     │     24px      │     22px    │    700     │
 * │   h4     │     19px      │       -     │    700     │
 * │   h5     │     17px      │       -     │    700     │
 * │   h6     │     15px      │       -     │    700     │
 * └──────────┴───────────────┴───────────────┴────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }
}

h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 768px) {
  h2 {
    font-size: 24px;
  }
}

h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 768px) {
  h3 {
    font-size: 22px;
  }
}

h4 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

h5 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

h6 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [2] 본문 스타일 (Body Text)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 일반 텍스트, 문단, 보조 텍스트 요소 스타일
 *
 * ┌──────────┬───────────────┬────────────┐
 * │  요소    │      크기     │   Weight   │
 * ├──────────┼───────────────┼────────────┤
 * │    p     │     17px      │    400     │
 * │  small   │     15px      │    400     │
 * └──────────┴───────────────┴────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

small {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ██████╗   ██████╗   ██████╗  ████████╗
 * ██╔══██╗ ██╔═══██╗ ██╔═══██╗ ╚══██╔══╝
 * ██████╔╝ ██║   ██║ ██║   ██║    ██║
 * ██╔══██╗ ██║   ██║ ██║   ██║    ██║
 * ██║  ██║ ╚██████╔╝ ╚██████╔╝    ██║
 * ╚═╝  ╚═╝  ╚═════╝   ╚═════╝     ╚═╝
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Root Font Size 및 기본 요소 정의
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 개요                                                                    │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • rem 단위 계산의 기준이 되는 html font-size 설정                       │
 * │ • 이미지, 미디어 요소 등 기본 스타일 정의                               │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */
/* ═════════════════════════════════════════════════════════════════════════
 * [1] Root Font Size
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: rem 단위 계산의 기준 설정 (1rem = 10px)
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 왜 62.5%인가?                                                           │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 브라우저 기본 font-size = 16px                                        │
 * │ • 16px × 0.625 = 10px                                                   │
 * │ • 즉, "10px 기준을 유지하면서 사용자 설정을 존중"하는 방법              │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 사용자가 브라우저 글꼴 크기를 150%로 설정했을 때                        │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • font-size: 10px (고정값)  → 10px 그대로 (사용자 설정 무시, 접근성↓)   │
 * │ • font-size: 62.5% (상대값) → 16px × 1.5 × 0.625 = 15px (설정 반영)     │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 계산 편의성                                                             │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 1rem = 10px (기본 설정 기준)                                          │
 * │ • font-size: 16px                                                       │
 * │ • padding: 20px                                                         │
 * │ • margin: 24px                                                          │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 미디어쿼리 제거 이유                                                    │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 이전: 해상도 줄어들면 font-size도 줄임 → 역효과                       │
 * │ • 작은 화면에서 글씨가 더 작아지면 가독성 저하                          │
 * │ • 레이아웃 조정은 rem 기반 컴포넌트 크기로 자연스럽게 조절              │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
html {
  font-size: 62.5%;
  /* 16px × 0.625 = 10px 기준 */
  line-height: 1;
  letter-spacing: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [2] 이미지 요소
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 반응형 이미지 및 기본 스타일 정의
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 속성 설명                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • max-width: 100%    → 부모 요소 넘침 방지 (반응형)                     │
 * │ • height: auto       → 비율 유지                                        │
 * │ • border: 0          → 링크 이미지 테두리 제거                          │
 * │ • vertical-align: top → 인라인 이미지 하단 갭 제거                      │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ██████╗  ██████╗  ███╗   ███╗ ███╗   ███╗  ██████╗  ███╗   ██╗
 * ██╔════╝ ██╔═══██╗ ████╗ ████║ ████╗ ████║ ██╔═══██╗ ████╗  ██║
 * ██║      ██║   ██║ ██╔████╔██║ ██╔████╔██║ ██║   ██║ ██╔██╗ ██║
 * ██║      ██║   ██║ ██║╚██╔╝██║ ██║╚██╔╝██║ ██║   ██║ ██║╚██╗██║
 * ╚██████╗ ╚██████╔╝ ██║ ╚═╝ ██║ ██║ ╚═╝ ██║ ╚██████╔╝ ██║ ╚████║
 *  ╚═════╝  ╚═════╝  ╚═╝     ╚═╝ ╚═╝     ╚═╝  ╚═════╝  ╚═╝  ╚═══╝
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 공통 스타일 정의
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 개요                                                                    │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 폰트 임포트 및 body 기본 스타일                                       │
 * │ • 프로젝트 전역에서 사용되는 공통 스타일                                │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */
/* ═════════════════════════════════════════════════════════════════════════
 * [1] 웹폰트 임포트
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 프로젝트에서 사용할 웹폰트 로드
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 폰트 정보                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • Pretendard: 본문 및 UI 텍스트 (한글/영문 모두 지원)                   │
 * │ • 출처: https://github.com/orioncactus/pretendard                       │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
/* ═════════════════════════════════════════════════════════════════════════
 * [2] Body 기본 스타일
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 문서 전체에 적용되는 기본 폰트 및 타이포그래피 설정
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 폰트 스택 (Font Stack)                                                  │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ 1. Pretendard        → 웹폰트 (우선)                                    │
 * │ 2. 맑은 고딕          → Windows 시스템 폰트                              │
 * │ 3. Apple SD 산돌고딕  → macOS/iOS 시스템 폰트                            │
 * │ 4. sans-serif        → 최종 폴백                                        │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  █████╗   ██████╗  ██████╗ ███████╗ ███████╗ ███████╗
 * ██╔══██╗ ██╔════╝ ██╔════╝ ██╔════╝ ██╔════╝ ██╔════╝
 * ███████║ ██║      ██║      █████╗   ███████╗ ███████╗
 * ██╔══██║ ██║      ██║      ██╔══╝   ╚════██║ ╚════██║
 * ██║  ██║ ╚██████╗ ╚██████╗ ███████╗ ███████║ ███████║
 * ╚═╝  ╚═╝  ╚═════╝  ╚═════╝ ╚══════╝ ╚══════╝ ╚══════╝
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 웹 접근성 (Accessibility) 스타일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 개요                                                                    │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 시각적으로 숨기되 스크린 리더에서는 접근 가능한 요소 처리             │
 * │ • W3C 권장 'visually-hidden' 패턴 적용                                  │
 * │ • 접근성 표준 준수를 위한 스타일 정의                                   │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */
/* ═════════════════════════════════════════════════════════════════════════
 * [1] Visually Hidden (시각적 숨김)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 화면에서는 숨기지만 스크린 리더에서는 읽을 수 있도록 처리
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 왜 display: none을 사용하지 않는가?                                     │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • display: none      → 스크린 리더가 읽지 못함 (접근성 위반)            │
 * │ • visibility: hidden → 스크린 리더가 읽지 못함 (접근성 위반)            │
 * │ • visually-hidden    → 화면에만 안 보이고, 스크린 리더는 읽음           │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ W3C 권장 Visually Hidden 패턴                                           │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • position: absolute  → 문서 흐름에서 제거                              │
 * │ • width/height: 1px   → 최소 크기 유지 (0이면 무시될 수 있음)           │
 * │ • margin: -1px        → 레이아웃 영향 제거                              │
 * │ • clip: rect(0,0,0,0) → 가시 영역 제거 (레거시 브라우저 지원)           │
 * │ • clip-path           → 모던 브라우저용 클리핑                          │
 * │ • overflow: hidden    → 넘침 방지                                       │
 * │ • white-space: nowrap → 텍스트 줄바꿈 방지                              │
 * │ • border: 0           → 테두리 제거                                     │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 적용 대상                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • caption  → 테이블 제목 (시각적으로 불필요하나 접근성 필요)            │
 * │ • legend   → 필드셋 제목 (시각적으로 불필요하나 접근성 필요)            │
 * │ • .sr-only → 스크린 리더 전용 텍스트 클래스                             │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * 참조: https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
 * ═════════════════════════════════════════════════════════════════════════
 */
caption,
legend,
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [2] 키보드 포커스 스타일
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 키보드 탐색 시 포커스 요소 시각적 표시 (접근성 필수)
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ :focus vs :focus-visible                                                │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • :focus         → 모든 포커스 (마우스 클릭 포함)                       │
 * │ • :focus-visible → 키보드 탐색 시에만 (마우스 클릭 제외)                │
 * │ • 마우스 사용자에겐 불필요한 outline 제거, 키보드 사용자엔 유지         │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
:focus {
  outline: none;
}

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

/* ═════════════════════════════════════════════════════════════════════════
 * [3] 텍스트 선택 스타일
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 사용자가 텍스트를 드래그하여 선택할 때의 스타일
 * ═════════════════════════════════════════════════════════════════════════
 */
::selection {
  color: var(--color-text);
  background-color: var(--color-selection);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ███████╗  ██████╗ ██████╗   ██████╗  ██╗      ██╗
 * ██╔════╝ ██╔════╝ ██╔══██╗ ██╔═══██╗ ██║      ██║
 * ███████╗ ██║      ██████╔╝ ██║   ██║ ██║      ██║
 * ╚════██║ ██║      ██╔══██╗ ██║   ██║ ██║      ██║
 * ███████║ ╚██████╗ ██║  ██║ ╚██████╔╝ ███████╗ ███████╗
 * ╚══════╝  ╚═════╝ ╚═╝  ╚═╝  ╚═════╝  ╚══════╝ ╚══════╝
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 커스텀 스크롤바 스타일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 브라우저 지원                                                           │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • Webkit: Chrome, Edge, Safari, Opera (::-webkit-scrollbar)            │
 * │ • Firefox: scrollbar-width, scrollbar-color (CSS Scrollbars Level 1)   │
 * │ • IE 11 이하: 지원 불가 (기본 스크롤바 표시)                            │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 디자인 스타일: macOS/iOS 미니멀 스크롤바                                │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • Track (트랙)  : transparent (투명)                                    │
 * │ • Thumb (기본)  : rgba(0,0,0,0.2) - 20% 불투명도                        │
 * │ • Thumb (호버)  : rgba(0,0,0,0.35) - 35% 불투명도                       │
 * │ • Thumb (활성)  : rgba(0,0,0,0.5) - 50% 불투명도                        │
 * │ • 크기          : 8px (슬림)                                            │
 * │ • 모서리        : 10px 라운드 + 2px 내부 여백                           │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */
/* ═════════════════════════════════════════════════════════════════════════
 * [1] Firefox 스크롤바 (CSS Scrollbars Level 1)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: Firefox 브라우저용 스크롤바 스타일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 속성 설명                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • scrollbar-width: thin    → 얇은 스크롤바 (auto, thin, none)           │
 * │ • scrollbar-color          → thumb색상 track색상 순서                   │
 * │ • scrollbar-gutter: stable → 스크롤바 공간 미리 확보 (레이아웃 시프트↓) │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [2] Webkit 스크롤바 (Chrome, Edge, Safari)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: Webkit 기반 브라우저용 스크롤바 스타일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 디자인 컨셉                                                             │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • macOS/iOS 스타일의 미니멀 스크롤바                                    │
 * │ • 투명 트랙 + 반투명 썸으로 콘텐츠 방해 최소화                          │
 * │ • 호버 시 진해지는 인터랙션 효과                                        │
 * │ • 부드러운 트랜지션으로 자연스러운 UX                                   │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 가상 요소 설명                                                          │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • ::-webkit-scrollbar       → 스크롤바 전체 영역                        │
 * │ • ::-webkit-scrollbar-track → 스크롤바 트랙 (배경)                      │
 * │ • ::-webkit-scrollbar-thumb → 스크롤바 썸 (핸들)                        │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ███████╗  ██████╗  ██████╗  ███╗   ███╗ ███████╗
 * ██╔════╝ ██╔═══██╗ ██╔══██╗ ████╗ ████║ ██╔════╝
 * █████╗   ██║   ██║ ██████╔╝ ██╔████╔██║ ███████╗
 * ██╔══╝   ██║   ██║ ██╔══██╗ ██║╚██╔╝██║ ╚════██║
 * ██║      ╚██████╔╝ ██║  ██║ ██║ ╚═╝ ██║ ███████║
 * ╚═╝       ╚═════╝  ╚═╝  ╚═╝ ╚═╝     ╚═╝ ╚══════╝
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 폼 요소 공통 스타일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 개요                                                                    │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 브라우저별 기본 스타일 초기화 및 통일                                 │
 * │ • 크로스브라우저 일관된 폼 요소 렌더링                                  │
 * │ • 접근성을 고려한 포커스 및 상태 스타일                                 │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 디자인 기준                                                             │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 높이: 40px - 터치 친화적 최소 크기                                     │
 * │ • 패딩: 0 12px - 좌우 여백                                              │
 * │ • 테두리: 1px solid #ddd                                                │
 * │ • 라운드: 4px                                                           │
 * │ • 폰트: 16px - 모바일 확대 방지                                         │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */
/* ═════════════════════════════════════════════════════════════════════════
 * [1] 텍스트 입력 요소 (Input, Textarea)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 텍스트 입력 필드 기본 스타일 통일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 크로스브라우저 초기화                                                   │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • appearance: none      → 브라우저 기본 스타일 제거                     │
 * │ • -webkit-appearance    → Safari/Chrome 대응                            │
 * │ • border-radius: 0      → iOS 기본 라운드 제거 후 재설정                │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
input[type=search],
input[type=url],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=time],
textarea {
  width: 100%;
  height: var(--form-height);
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--form-radius);
  font-family: inherit;
  font-size: var(--form-font-size);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

textarea {
  height: auto;
  min-height: 100px;
  padding: 12px;
  resize: vertical;
}

input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover,
input[type=tel]:hover,
input[type=number]:hover,
input[type=search]:hover,
input[type=url]:hover,
input[type=date]:hover,
input[type=datetime-local]:hover,
input[type=month]:hover,
input[type=week]:hover,
input[type=time]:hover,
textarea:hover {
  border-color: var(--color-border-hover);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=url]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
textarea:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: none;
}

input[type=text]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=tel]:disabled,
input[type=number]:disabled,
input[type=search]:disabled,
input[type=url]:disabled,
input[type=date]:disabled,
input[type=datetime-local]:disabled,
input[type=month]:disabled,
input[type=week]:disabled,
input[type=time]:disabled,
textarea:disabled {
  color: var(--color-text-placeholder);
  background-color: var(--color-bg-hover);
  cursor: not-allowed;
}

input[type=text]:read-only,
input[type=password]:read-only,
input[type=email]:read-only,
input[type=tel]:read-only,
input[type=number]:read-only,
input[type=search]:read-only,
input[type=url]:read-only,
textarea:read-only {
  color: var(--color-text-muted);
  background-color: #fafafa;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [2] 셀렉트 박스 (Select)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 드롭다운 선택 요소 스타일 통일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 커스텀 화살표                                                           │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • 기본 화살표 제거 (appearance: none)                                   │
 * │ • SVG 인라인 배경 이미지로 커스텀 화살표 적용                           │
 * │ • 우측 패딩 확보하여 화살표 영역 보호                                   │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
select {
  width: 100%;
  height: var(--form-height);
  padding: 0 32px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--form-radius);
  font-family: inherit;
  font-size: var(--form-font-size);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select:hover {
  border-color: var(--color-border-hover);
}

select:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: none;
}

select:disabled {
  color: var(--color-text-placeholder);
  background-color: var(--color-bg-hover);
  cursor: not-allowed;
}

/* Option 스타일 (제한적 지원) */
option {
  padding: 8px 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-bg);
}

option:disabled {
  color: var(--color-text-placeholder);
}

option:checked {
  background-color: #e6f0ff;
}

/* optgroup 스타일 */
optgroup {
  font-weight: 700;
  font-style: normal;
  color: #333;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [3] 체크박스 & 라디오 버튼
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 커스텀 체크박스/라디오 스타일
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 구현 방식                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • accent-color 사용 (모던 브라우저)                                     │
 * │ • 크기 통일: 18px                                                       │
 * │ • 커서: pointer                                                         │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
input[type=checkbox],
input[type=radio] {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  vertical-align: middle;
}

input[type=checkbox] {
  border-radius: 4px;
}

input[type=radio] {
  border-radius: 50%;
}

input[type=checkbox]:hover,
input[type=radio]:hover {
  border-color: var(--color-focus);
}

input[type=checkbox]:checked {
  border-color: var(--color-focus);
  background-color: var(--color-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2 6l3 3 5-6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

input[type=radio]:checked {
  border-width: 5px;
  border-color: var(--color-focus);
  background-color: var(--color-bg);
}

input[type=checkbox]:disabled,
input[type=radio]:disabled {
  border-color: var(--color-border);
  background-color: var(--color-bg-hover);
  cursor: not-allowed;
}

input[type=checkbox]:disabled:checked {
  background-color: #ccc;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [4] Placeholder 스타일
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 입력 필드 힌트 텍스트 스타일 통일
 * ═════════════════════════════════════════════════════════════════════════
 */
::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [5] 파일 입력 & 범위 슬라이더
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: 특수 입력 요소 기본 스타일
 * ═════════════════════════════════════════════════════════════════════════
 */
input[type=file] {
  width: 100%;
  height: var(--form-height);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--form-radius);
  font-family: inherit;
  font-size: var(--form-font-size);
  line-height: var(--form-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  cursor: pointer;
}

input[type=file]:hover {
  border-color: var(--color-border-hover);
}

input[type=file]:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: none;
}

input[type=file]::file-selector-button {
  height: 100%;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--color-border);
  border-radius: 4px 0 0 4px;
  margin-right: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-sub);
  background-color: var(--color-bg-hover);
  transition: background-color 0.2s;
  cursor: pointer;
}

input[type=file]::file-selector-button:hover {
  background-color: var(--color-bg-active);
}

input[type=range] {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--color-focus);
  transition: transform 0.2s;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--color-focus);
  cursor: pointer;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [6] 폼 요소 사이즈 변형
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: input, select, .btn에 동일한 사이즈 시스템 적용
 *       --form-height, --form-radius, --form-font-size 변수를 오버라이드
 *
 * ┌──────────┬─────────┬──────────┬──────────┐
 * │ 클래스   │ 높이    │ 라운드   │ 폰트     │
 * ├──────────┼─────────┼──────────┼──────────┤
 * │ .ul      │ 56px    │ 8px      │ 20px     │
 * │ .el      │ 48px    │ 6px      │ 18px     │
 * │ .lg      │ 44px    │ 5px      │ 17px     │
 * │ (기본)   │ 40px    │ 4px      │ 16px     │
 * │ .sm      │ 36px    │ 4px      │ 14px     │
 * │ .es      │ 32px    │ 3px      │ 13px     │
 * │ .us      │ 28px    │ 3px      │ 12px     │
 * └──────────┴─────────┴──────────┴──────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
.ul {
  --form-height: 56px;
  --form-radius: 8px;
  --form-font-size: 20px;
}

.el {
  --form-height: 48px;
  --form-radius: 6px;
  --form-font-size: 18px;
}

.lg {
  --form-height: 44px;
  --form-radius: 5px;
  --form-font-size: 17px;
}

.sm {
  --form-height: 36px;
  --form-font-size: 14px;
}

.es {
  --form-height: 32px;
  --form-radius: 3px;
  --form-font-size: 13px;
}

.us {
  --form-height: 28px;
  --form-radius: 3px;
  --form-font-size: 12px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * [7] 버튼 공통 스타일 (.btn)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: .btn 클래스 기반 버튼 시스템
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 사이즈 체계 (input/select/button 높이 통일)                             │
 * ├─────────────┬─────────┬──────────┬──────────┬───────────────────────────┤
 * │ 클래스      │ 높이    │ 패딩     │ 폰트     │ gap                       │
 * ├─────────────┼─────────┼──────────┼──────────┼───────────────────────────┤
 * │ .btn.ul     │ 56px    │ 0 28px   │ 20px     │ 12px  (Ultra Large)       │
 * │ .btn.el     │ 48px    │ 0 24px   │ 18px     │ 10px  (Extra Large)       │
 * │ .btn.lg     │ 44px    │ 0 20px   │ 17px     │ 8px   (Large)             │
 * │ .btn (기본) │ 40px    │ 0 16px   │ 16px     │ 8px   (Medium/Default)    │
 * │ .btn.sm     │ 36px    │ 0 12px   │ 14px     │ 6px   (Small)             │
 * │ .btn.es     │ 32px    │ 0 10px   │ 13px     │ 4px   (Extra Small)       │
 * │ .btn.us     │ 28px    │ 0 8px    │ 12px     │ 4px   (Ultra Small)       │
 * └─────────────┴─────────┴──────────┴──────────┴───────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 색상 변형                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ • .primary  → 파란색 (#4763e4)                                         │
 * │ • .blue     → 밝은 파란색 (#3b82f6)                                    │
 * │ • .danger   → 빨간색 (#e53e3e)                                         │
 * │ • .excel    → 초록색 (#217346)                                         │
 * │ • .dark     → 검정색 (#333)                                            │
 * │ • .reply    → 댓글용 (연회색)                                          │
 * │ • .cancel   → 취소용 (#555)                                            │
 * │ • .ghost    → 다크 배경용 (투명/반투명)                                 │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: var(--form-height);
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--form-radius);
  font-family: inherit;
  font-size: var(--form-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text-sub);
  background-color: var(--color-bg);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-bg-hover);
}
.btn:active {
  background-color: var(--color-bg-active);
}
.btn:focus-visible {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: none;
}
.btn:disabled {
  border-color: #eee;
  color: var(--color-text-placeholder);
  background-color: var(--color-bg-hover);
  cursor: not-allowed;
}
.btn svg {
  flex-shrink: 0;
}
.btn.ul {
  gap: 12px;
  padding: 0 28px;
  --form-height: 56px;
  --form-radius: 8px;
  --form-font-size: 20px;
}
.btn.el {
  gap: 10px;
  padding: 0 24px;
  --form-height: 48px;
  --form-radius: 6px;
  --form-font-size: 18px;
}
.btn.lg {
  gap: 8px;
  padding: 0 20px;
  --form-height: 44px;
  --form-radius: 5px;
  --form-font-size: 15px;
}
.btn.sm {
  gap: 6px;
  padding: 0 12px;
  --form-height: 36px;
  --form-font-size: 14px;
}
.btn.es {
  gap: 4px;
  padding: 0 10px;
  --form-height: 32px;
  --form-radius: 3px;
  --form-font-size: 13px;
}
.btn.us {
  gap: 4px;
  padding: 0 8px;
  --form-height: 28px;
  --form-radius: 3px;
  --form-font-size: 12px;
}
.btn.primary {
  border-color: var(--color-primary);
  color: #fff;
  background-color: var(--color-primary);
}
.btn.primary:hover {
  border-color: var(--color-primary-hover);
  background-color: var(--color-primary-hover);
}
.btn.primary:active {
  background-color: var(--color-primary-active);
}
.btn.blue {
  border-color: var(--color-blue);
  color: #fff;
  background-color: var(--color-blue);
}
.btn.blue:hover {
  border-color: var(--color-blue-hover);
  background-color: var(--color-blue-hover);
}
.btn.danger {
  border-color: var(--color-danger);
  color: #fff;
  background-color: var(--color-danger);
}
.btn.danger:hover {
  border-color: var(--color-danger-hover);
  background-color: var(--color-danger-hover);
}
.btn.danger:active {
  background-color: var(--color-danger-active);
}
.btn.excel {
  border-color: var(--color-excel);
  color: #fff;
  background-color: var(--color-excel);
}
.btn.excel:hover {
  border-color: var(--color-excel-hover);
  background-color: var(--color-excel-hover);
}
.btn.excel:active {
  background-color: var(--color-excel-active);
}
.btn.dark {
  border-color: var(--color-text-sub);
  color: #fff;
  background-color: var(--color-text-sub);
}
.btn.dark:hover {
  border-color: #555;
  background-color: #555;
}
.btn.dark:active {
  background-color: #222;
}
.btn.reply {
  border-color: #ccc;
  background-color: #fafafa;
}
.btn.reply:hover {
  background-color: #f0f0f0;
}
.btn.cancel {
  border-color: #555;
  color: #fff;
  background-color: #555;
}
.btn.cancel:hover {
  border-color: #444;
  background-color: #444;
}
.btn.cancel:active {
  background-color: var(--color-text-sub);
}
.btn.ghost {
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
  background: rgba(255, 255, 255, 0.1);
}
.btn.ghost:hover {
  border-color: var(--color-dark-border);
  background: var(--color-dark-hover);
}
.btn.ghost:active {
  border-color: var(--color-dark-border);
  background: var(--color-dark-active);
}
.btn.ghost:disabled, .btn.ghost[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn.ghost.filled {
  background: var(--color-dark-filled);
}
.btn.ghost.filled:hover {
  background: var(--color-dark-filled-hover);
}

/* ═════════════════════════════════════════════════════════════════════════
 * [7] 아이콘 버튼 (.icon-btn)
 * ─────────────────────────────────────────────────────────────────────────
 * 역할: SVG 아이콘만 포함된 작은 버튼 (복사, 링크 열기 등)
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ 사용 예시                                                               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ <button class="icon-btn">                                               │
 * │   <svg>...</svg>                                                        │
 * │ </button>                                                               │
 * │                                                                         │
 * │ <button class="icon-btn danger">삭제용</button>                         │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ═════════════════════════════════════════════════════════════════════════
 */
.icon-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  transition: background-color 0.15s;
  cursor: pointer;
}
.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: #9ca3af;
}
.icon-btn:hover {
  background-color: #f3f4f6;
}
.icon-btn:hover svg {
  fill: var(--color-primary);
}
.icon-btn.danger:hover {
  background-color: #fef2f2;
}
.icon-btn.danger:hover svg {
  fill: #ef4444;
}
.icon-btn:disabled, .icon-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}