/*
 * 이트라이브 작업 디자인 시스템 v0.14 · 부품과 앱 화면 (ui.css)
 * 부품: 버튼, 링크, 입력, 고르기(체크 · 라디오 · 스위치 · 세 칸), 탭, 표, 카드, 핵심 숫자, 칩, 알림, 토스트, 대화 상자,
 *       툴팁, 아바타, 진행 막대, 단계, 경로, 쪽 번호, 빈 상태. 앱 틀: 왼쪽 메뉴 + 본문, 쪽 머리, 도구줄, 나눔, 패널.
 * 쓰는 곳: 앱 화면(body.et-ui), 웹 페이지(body.et-web + web.css), 문서 속 부품. 먼저 불러올 것: fonts.css, tokens.css
 * 라이트 · 다크: 색은 역할 토큰만 쓰므로 <html data-theme="dark"> 또는 .et-dark 구역에서 그대로 맞는다(theme.js로 전환).
 *
 * 원칙(브랜드 레드는 로고의 이트라이브 레드 #DA2128로 쓴다)
 *   - 앱 화면은 회색 캔버스(--et-canvas) 위에 흰 카드다. 카드 · 패널 · 칩 · 메뉴의 경계는 선이 아니라 면으로 가른다.
 *     선은 표 · 입력 · 탭 밑줄처럼 없으면 칸이 읽히지 않는 곳에만 쓴다.
 *   - 한 화면에 1차 행동은 하나(.et-btn--primary). 1차 버튼은 이트라이브 레드 단색 알약에 흰 글자다(대비 4.97:1).
 *   - 레드는 1차 버튼, 현재 위치(메뉴 · 탭 · 쪽 번호), 체크 표시, 숫자 배지, 회사 표식에만 포인트로 쓴다. 상태는 도트 + 글자로 말한다.
 *   - 그라데이션 · 빛 번짐 · 한쪽 변 강조선 · 버튼과 링크 끝 화살표는 쓰지 않는다.
 *   - 평소에는 조용히: 실패·빈 상태 문구는 실제로 그 상태일 때만 보인다.
 *   - 사람이 읽는 요약이 먼저, 기술 정보(ID·JSON·코드)는 접어서 뒤에.
 */

.et-ui {
  margin: 0;
  background: var(--et-canvas);
  color: var(--et-text);
  font-family: var(--et-font);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: var(--et-track-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.et-ui *,
.et-ui *::before,
.et-ui *::after { box-sizing: border-box; }
.et-ui :focus-visible { outline: 2px solid var(--et-focus); outline-offset: 2px; }
.et-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.et-icon--lg { width: 20px; height: 20px; }

/* 틀: 왼쪽 메뉴 + 본문 */
.et-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.et-side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--et-space-1);
  padding: var(--et-space-5) var(--et-space-3);
  background: var(--et-surface);
}
.et-side__brand { display: flex; align-items: center; gap: var(--et-space-3); padding: var(--et-space-1) var(--et-space-3) var(--et-space-5); }
.et-side__brand .et-logo { height: 18px; width: auto; }
.et-side__product { font-size: 13px; font-weight: 600; color: var(--et-text-3); }
.et-side__group { margin: var(--et-space-4) 0 var(--et-space-1); padding: 0 var(--et-space-3); font-size: 13px; font-weight: 600; color: var(--et-text-3); }
.et-side__foot { margin-top: auto; padding: var(--et-space-3); font-size: 13px; color: var(--et-text-3); }
.et-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--et-space-3);
  height: 36px;
  padding: 0 var(--et-space-3);
  border-radius: var(--et-r-1);
  color: var(--et-text-2);
  text-decoration: none;
  font-weight: 400;
}
.et-nav-item:hover { background: var(--et-inset); color: var(--et-text); }
.et-nav-item[aria-current="page"] { color: var(--et-accent-text); font-weight: 700; background: var(--et-accent-tint); }
/* 현재 위치는 옅은 브랜드 면과 글자색으로 보인다. 한쪽 변 강조선은 쓰지 않는다 */
.et-nav-item__count { margin-left: auto; font-size: 13px; color: var(--et-text-3); font-variant-numeric: tabular-nums; }

.et-main { min-width: 0; padding: var(--et-space-8) var(--et-space-10) var(--et-space-16); --et-card: var(--et-card-raised); }

/* 쪽 머리: 제목 + 한 줄 설명 + 행동 */
.et-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--et-space-6); margin-bottom: var(--et-space-6); }
.et-pagehead h1 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 800; letter-spacing: var(--et-track-head); }
.et-pagehead p { margin: var(--et-space-1) 0 0; color: var(--et-text-3); }
.et-actions { display: flex; align-items: center; gap: var(--et-space-2); flex: none; }

/* 버튼 */
.et-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--et-space-2);
  height: 36px;
  padding: 0 var(--et-space-4);
  border: 1px solid var(--et-line-input);
  border-radius: var(--et-r-dot);
  background: transparent;
  color: var(--et-text);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--et-dur-fast) var(--et-ease), border-color var(--et-dur-fast) var(--et-ease);
}
.et-btn:hover { background: var(--et-inset); }
.et-btn--primary { border-color: transparent; background: var(--et-primary-bg); color: var(--et-primary-text); }
.et-btn--primary:hover { background: var(--et-primary-hover); }
.et-btn--quiet { border-color: transparent; background: transparent; color: var(--et-text-2); }
.et-btn--quiet:hover { background: var(--et-inset); color: var(--et-text); }
.et-btn--danger { color: var(--et-status-problem-text); }
.et-btn--sm { height: 30px; padding: 0 var(--et-space-3); font-size: 13px; }
.et-btn--icon { width: 36px; padding: 0; }
.et-btn:disabled,
.et-btn[aria-disabled="true"] { cursor: not-allowed; color: var(--et-text-off); background: transparent; border-color: var(--et-line); }
/* 버튼 변형: 2차(검정 알약) · 큰 크기. 1차 버튼 색은 프로젝트 테마가 정한다(브랜드 또는 먹색). 브랜드 면 위 1차는 면 위 글자색 알약 */
.et-btn--secondary { border-color: transparent; background: var(--et-strong); color: var(--et-on-strong); }
.et-btn--secondary:hover { background: var(--et-text-2); }
.et-btn--lg { height: 48px; padding: 0 var(--et-space-6); font-size: 16px; }
.et-link { color: var(--et-accent-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--et-accent-line); text-underline-offset: 3px; }
.et-link:hover { text-decoration-color: currentColor; }

/* 입력: 이름표는 칸 위에, 도움말은 아래에. 자리표시 글자를 이름표로 쓰지 않는다 */
.et-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.et-field__label { font-size: 13px; font-weight: 600; color: var(--et-text); }
.et-field__help { font-size: 13px; color: var(--et-text-3); }
.et-field__error { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--et-status-problem-text); }
.et-input,
.et-select,
.et-textarea {
  width: 100%;
  height: 36px;
  padding: 0 var(--et-space-3);
  border: 1px solid var(--et-line-input);
  border-radius: var(--et-r-1);
  background: transparent;
  color: var(--et-text);
  font: inherit;
}
.et-textarea { height: auto; min-height: 96px; padding: var(--et-space-2) var(--et-space-3); line-height: 1.6; resize: vertical; }
.et-select--auto { width: auto; }
.et-input::placeholder,
.et-textarea::placeholder { color: var(--et-text-3); }
.et-input:focus-visible,
.et-select:focus-visible,
.et-textarea:focus-visible { outline: 2px solid var(--et-focus); outline-offset: 1px; }
.et-input[aria-invalid="true"] { border-color: var(--et-status-problem); }
.et-search { position: relative; }
.et-search .et-icon { position: absolute; left: 12px; top: 10px; color: var(--et-text-3); pointer-events: none; }
.et-search .et-input { padding-left: 36px; }
.et-check { display: inline-flex; align-items: center; gap: var(--et-space-2); }
.et-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--et-brand-fill); }

/* 탭: 밑줄 하나. 알약 모양 탭은 쓰지 않는다 */
.et-tabs { display: flex; gap: var(--et-space-6); margin: 0 0 var(--et-space-5); padding: 0; border-bottom: 1px solid var(--et-line); list-style: none; }
.et-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  margin-bottom: -1px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--et-text-3);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.et-tab:hover { color: var(--et-text); }
.et-tab[aria-selected="true"] { color: var(--et-text); border-bottom-color: var(--et-accent); }
.et-tab__count { font-weight: 400; font-variant-numeric: tabular-nums; }

/* 도구줄 */
.et-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--et-space-2); margin-bottom: var(--et-space-4); }
.et-toolbar .et-search { flex: 1 1 280px; max-width: 360px; }

/* 나눔: 왼쪽 목록 + 오른쪽 상세(400px). 좁으면 위아래로 */
.et-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--et-space-6); align-items: start; }
@media (max-width: 1280px) { .et-split { grid-template-columns: minmax(0, 1fr); } }

/* 표: 가로선, 머리 아래 진한 선, 숫자는 오른쪽 */
.et-table-wrap { overflow-x: auto; }
.et-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.et-table th {
  position: sticky;
  top: 0;
  height: 40px;
  padding: 0 var(--et-space-4) 0 0;
  border-bottom: 1px solid var(--et-line-strong);
  background: var(--et-card);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--et-text-3);
  white-space: nowrap;
}
.et-table td { height: 48px; padding: var(--et-space-2) var(--et-space-4) var(--et-space-2) 0; border-bottom: 1px solid var(--et-line); vertical-align: middle; }
.et-table :is(th, td):last-child { padding-right: 0; }
.et-table :is(th, td).num { text-align: right; }
.et-table :is(th, td).num + :is(th, td):not(.num) { padding-left: var(--et-space-6); }
.et-table tbody tr:hover { background: var(--et-inset); }
.et-table tbody tr[aria-selected="true"] { background: var(--et-accent-tint); }
.et-table a { color: inherit; font-weight: 600; text-decoration: none; }
.et-table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.et-cell-sub { display: block; font-size: 13px; color: var(--et-text-3); }
.et-truncate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 꼬리표(.et-tag)와 번호 원(.et-no)은 tokens.css에 있다. 덱 · 문서에서도 쓰기 때문이다 */

/* 패널: 테두리 없이 바닥과 다른 면으로 선다(회색 캔버스 위 흰 면, 흰 종이 위 회색 면). 그림자 없음 */
.et-panel { border-radius: var(--et-r-2); background: var(--et-card); }
.et-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--et-space-4); padding: var(--et-space-4) var(--et-space-5) 0; }
.et-panel__head h2 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 700; }
.et-panel__body { padding: var(--et-space-5); }
.et-panel__body > :last-child { margin-bottom: 0; }
.et-section-title { margin: var(--et-space-6) 0 var(--et-space-2); font-size: 13px; font-weight: 600; color: var(--et-text-3); }
.et-section-title:first-child { margin-top: 0; }

/* 이름-값 목록 */
.et-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--et-space-2) var(--et-space-4); margin: 0; }
.et-kv dt { color: var(--et-text-3); }
.et-kv dd { margin: 0; }

/* 결론 문장: 상세 화면 맨 위 */
.et-summary { margin: 0 0 var(--et-space-4); font-size: 16px; line-height: 1.65; }

/* 할 일 목록 */
.et-checklist { margin: 0; padding: 0; list-style: none; }
.et-checklist li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--et-space-3); align-items: start; padding: var(--et-space-2) 0; }
.et-checklist input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--et-brand-fill); }
.et-checklist .et-cell-sub { margin-top: 2px; }
.et-checklist li > .et-dot { margin: 8px 4px 0; }

/* 접는 기술 정보 */
.et-details { margin-top: var(--et-space-4); }
.et-details summary { display: flex; align-items: center; gap: var(--et-space-2); height: 40px; color: var(--et-text-3); cursor: pointer; list-style: none; }
.et-details summary::-webkit-details-marker { display: none; }
.et-details summary::before { content: "+"; width: 16px; text-align: center; font-weight: 600; }
.et-details[open] summary::before { content: "−"; }
.et-details pre { margin: 0; padding: var(--et-space-3); background: var(--et-inset); border-radius: var(--et-r-1); font-family: var(--et-font-mono); font-size: 13px; overflow: auto; }

/* 빈 상태: 무엇이 없는지 + 다음 행동. 그림을 넣지 않는다 */
.et-empty { padding: var(--et-space-12) var(--et-space-6); text-align: left; }
.et-empty h3 { margin: 0 0 var(--et-space-1); font-size: 15px; font-weight: 700; }
.et-empty p { margin: 0 0 var(--et-space-4); color: var(--et-text-3); }

/* 알림 줄: 화면 안에 놓는 시스템 알림 */
.et-banner { display: flex; align-items: flex-start; gap: var(--et-space-3); padding: var(--et-space-3) var(--et-space-4); border-radius: var(--et-r-1); background: var(--et-inset); }
.et-banner .et-dot { margin-top: 0.55em; }
.et-banner p { margin: 0; }

/* 잠깐 뜨는 결과 알림 */
.et-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--et-space-3);
  min-height: 44px;
  padding: var(--et-space-2) var(--et-space-4);
  border-radius: var(--et-r-1);
  background: var(--et-strong);
  color: var(--et-on-strong);
  box-shadow: var(--et-shadow-overlay);
}
.et-toast .et-btn--quiet { color: var(--et-on-strong); }

/* 대화 상자 */
.et-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--et-space-6); background: var(--et-overlay); }
.et-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--et-r-2);
  background: var(--et-surface);
  box-shadow: var(--et-shadow-overlay);
}
.et-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--et-space-5) var(--et-space-6) var(--et-space-2); }
.et-modal__head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.et-modal__body { display: grid; gap: var(--et-space-4); padding: var(--et-space-3) var(--et-space-6); overflow: auto; }
.et-modal__foot { display: flex; justify-content: flex-end; gap: var(--et-space-2); padding: var(--et-space-5) var(--et-space-6); }

/* 라디오 · 스위치 · 세 칸 고르기 */
.et-radio { display: inline-flex; align-items: center; gap: var(--et-space-2); }
.et-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--et-brand-fill); }
.et-switch { position: relative; display: inline-flex; align-items: center; gap: var(--et-space-3); cursor: pointer; }
.et-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.et-switch__track { position: relative; width: 40px; height: 22px; flex: none; border-radius: var(--et-r-dot); background: var(--et-line-input); transition: background-color var(--et-dur-fast) var(--et-ease); }
.et-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--et-r-dot); background: var(--et-on-brand); transition: transform var(--et-dur-fast) var(--et-ease); }
.et-switch input:checked + .et-switch__track { background: var(--et-brand-fill); }
.et-switch input:checked + .et-switch__track::after { transform: translateX(18px); }
.et-switch input:focus-visible + .et-switch__track { outline: 2px solid var(--et-focus); outline-offset: 2px; }
.et-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--et-r-dot); background: var(--et-inset); }
.et-seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--et-space-4); border: 0; border-radius: var(--et-r-dot); background: transparent; color: var(--et-text-3); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.et-seg button:hover { color: var(--et-text); }
.et-seg button[aria-pressed="true"] { background: var(--et-surface); color: var(--et-text); box-shadow: var(--et-shadow-sm); }

/* 칩: 상태 도트 + 글자를 담는 알약. 숫자 배지: 레드 면 + 흰 숫자 */
.et-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 var(--et-space-3); border-radius: var(--et-r-dot); background: var(--et-inset); color: var(--et-text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.et-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--et-r-dot); background: var(--et-brand-fill); color: var(--et-on-brand); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* 카드: 그림 · 꼬리표 · 제목 · 설명 · 정보 줄. 테두리 없이 바닥과 다른 면으로 서고, 누를 수 있으면 올렸을 때만 그림자 */
.et-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--et-r-2); background: var(--et-card); color: var(--et-text); text-decoration: none; transition: box-shadow var(--et-dur) var(--et-ease); }
a.et-card:hover { box-shadow: var(--et-shadow-md); }
.et-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--et-inset); }
.et-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.et-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--et-space-2); padding: var(--et-space-5); }
.et-card__tags { display: flex; flex-wrap: wrap; gap: var(--et-space-1); }
.et-card__title { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 800; letter-spacing: var(--et-track-head); }
.et-card__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--et-text-2); }
.et-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--et-space-3); margin-top: auto; padding-top: var(--et-space-3); font-size: 13px; color: var(--et-text-3); }

/* 핵심 숫자: 위에 선, 숫자, 이름, 한 줄 설명. 핵심 하나는 --key(레드 선) + .et-em */
.et-kpi { padding-top: var(--et-space-4); border-top: 2px solid var(--et-line-strong); }
.et-kpi--key { border-top-color: var(--et-accent); }
.et-kpi__value { font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: var(--et-track-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.et-kpi__value small { margin-left: 4px; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.et-kpi__label { margin-top: var(--et-space-2); font-size: 14px; font-weight: 700; }
.et-kpi__note { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--et-text-3); }

/* 알림: 도트 + 제목 + 설명. 테두리 없이 옅은 면. --brand는 옅은 브랜드 면(이트라이브 안내) */
.et-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--et-space-3); align-items: start; padding: var(--et-space-4) var(--et-space-5); border-radius: var(--et-r-2); background: var(--et-inset); }
.et-alert > .et-dot { grid-row: span 2; margin-top: 0.55em; }
.et-alert__title { font-weight: 700; }
.et-alert__text { margin: 0; font-size: 14px; color: var(--et-text-2); }
.et-alert--brand { background: var(--et-accent-tint); }
.et-alert--brand .et-alert__title { color: var(--et-accent-text); }

/* 툴팁 · 아바타 */
.et-tooltip { position: relative; display: inline-block; padding: 6px 10px; border-radius: var(--et-r-1); background: var(--et-strong); color: var(--et-on-strong); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; box-shadow: var(--et-shadow-md); }
.et-tooltip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; background: inherit; transform: translate(-50%, -50%) rotate(45deg); }
.et-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; overflow: hidden; border-radius: var(--et-r-dot); background: var(--et-bg-3); color: var(--et-text); font-size: 13px; font-weight: 700; }
.et-avatar img { width: 100%; height: 100%; object-fit: cover; }
.et-avatar--brand { background: var(--et-brand-fill); color: var(--et-on-brand); }
.et-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.et-avatars { display: inline-flex; }
.et-avatars .et-avatar { margin-left: -8px; border: 2px solid var(--et-bg); }
.et-avatars .et-avatar:first-child { margin-left: 0; }

/* 진행 막대 · 단계 */
.et-progress { height: 8px; overflow: hidden; border-radius: var(--et-r-dot); background: var(--et-inset); }
.et-progress__bar { width: var(--w, 0%); height: 100%; border-radius: inherit; background: var(--et-accent); }
.et-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--et-space-3); margin: 0; padding: 0; list-style: none; counter-reset: et-steps; }
.et-steps li { display: inline-flex; align-items: center; gap: var(--et-space-2); font-size: 14px; color: var(--et-text-3); counter-increment: et-steps; }
.et-steps li::before { content: counter(et-steps); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--et-line-input); border-radius: var(--et-r-dot); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.et-steps li:not(:last-child)::after { content: ""; width: 28px; height: 1px; margin-left: var(--et-space-1); background: var(--et-line); }
.et-steps .is-done { color: var(--et-text-2); }
.et-steps .is-done::before { border-color: transparent; background: var(--et-strong); color: var(--et-on-strong); }
.et-steps .is-current { color: var(--et-text); font-weight: 700; }
.et-steps .is-current::before { border-color: transparent; background: var(--et-brand-fill); color: var(--et-on-brand); }

/* 경로 · 쪽 번호 */
.et-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--et-space-2); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--et-text-3); }
.et-breadcrumb li + li::before { content: "/"; margin-right: var(--et-space-2); color: var(--et-line-input); }
.et-breadcrumb a { color: inherit; text-decoration: none; }
.et-breadcrumb a:hover { color: var(--et-text); }
.et-breadcrumb [aria-current="page"] { color: var(--et-text); font-weight: 600; }
.et-pagination { display: flex; align-items: center; gap: var(--et-space-1); margin: 0; padding: 0; list-style: none; }
.et-pagination :is(a, span) { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--et-space-2); border-radius: var(--et-r-dot); color: var(--et-text-2); font-size: 14px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.et-pagination a:hover { background: var(--et-inset); color: var(--et-text); }
.et-pagination [aria-current="page"] { background: var(--et-accent-tint); color: var(--et-accent-text); }

/* 바뀌는 상태 */
@media (prefers-reduced-motion: reduce) {
  .et-ui * { transition: none !important; animation: none !important; }
}

/* 좁은 화면: 메뉴를 위로 */
@media (max-width: 960px) {
  .et-app { grid-template-columns: minmax(0, 1fr); }
  .et-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--et-space-2) var(--et-space-4); }
  .et-side__brand { padding: 0 var(--et-space-3) 0 0; }
  .et-side__group,
  .et-side__foot { display: none; }
  .et-main { padding: var(--et-space-6) var(--et-space-4) var(--et-space-12); }
  .et-pagehead { flex-direction: column; align-items: flex-start; }
}