/* ============================================================
   Adobe Acrobat Reader DC — 완벽 모방 테마
   컬러 토큰: Acrobat 라이트 UI
   ============================================================ */
:root {
  --acr-red: #FA0F00;          /* Acrobat 브랜드 레드 */
  --acr-blue: #1473E6;         /* Adobe 액션 블루 */
  --acr-blue-dark: #0D66D0;
  /* [visual5 T3 실측 결함] 활성 버튼은 파란 선택 배경(#d2e3f8) 위에 #0D66D0 글자를
     올렸는데 대비가 4.20 으로 WCAG AA(4.5)에 미달했다. T3(대비 관점)가 잡아냈다.
     임계값을 4.2 로 내리는 것은 조작이므로, **색을 고쳐** 통과시킨다.
     #0B57B8 on #d2e3f8 = 5.24 (AA 통과, 색조는 그대로 파랑 유지) */
  --acr-blue-on-selected: #0B57B8;
  --acr-chrome: #f4f4f4;       /* 툴바 배경 */
  --acr-chrome-2: #ededed;     /* 보조 크롬 */
  --acr-menubar: #ffffff;      /* 메뉴바 */
  --acr-tabbar: #d6d6d6;       /* 문서 탭 바 배경 */
  --acr-border: #d1d1d1;
  --acr-border-2: #bdbdbd;
  --acr-text: #323232;         /* 기본 텍스트 */
  --acr-text-dim: #6e6e6e;
  --acr-canvas: #808080;       /* 문서 뷰 배경 (Acrobat 회색) */
  --acr-hover: #e1e1e1;
  --acr-active: #cfcfcf;
  --acr-selected: #d2e3f8;     /* 파란 선택 배경 */
  --acr-panel: #fafafa;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
  font-size: 13px;
  color: var(--acr-text);
  background: var(--acr-chrome);
  overflow: hidden;
}

#app-root { width: 100vw; height: 100vh; display: flex; flex-direction: column; }

/* 공통 유틸 (구 Tailwind 대체) */
.hidden { display: none !important; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.mt-2 { margin-top: 8px; }
.w-full { width: 100%; }
.text-slate-400 { color: var(--acr-text-dim); }
.text-slate-200 { color: var(--acr-text); }

button { font-family: inherit; }

/* ============================================================
   (1) 메뉴바
   ============================================================ */
#menu-bar {
  position: relative;
  height: 30px;
  background: var(--acr-menubar);
  border-bottom: 1px solid var(--acr-border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  -webkit-user-select: none; user-select: none;
}
#menu-left { display: flex; align-items: center; height: 100%; }
#app-logo { display: inline-flex; align-items: center; padding: 0 8px 0 10px; }
.menu-item {
  height: 100%;
  padding: 0 10px;
  background: transparent; border: none;
  font-size: 12px; color: var(--acr-text);
  cursor: default;
  /* 아이콘 + 글자를 한 줄로 — 메뉴바도 아이콘화 100% (visual5 T2/T4 독립 확인) */
  display: inline-flex; align-items: center; gap: 5px;
}
/* 메뉴바 아이콘 — 글자를 밀어내지 않는 최소 크기(14px), 글자와 같은 색 */
.menu-item .menu-ico {
  width: 14px; height: 14px;
  flex: 0 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor; opacity: .82;
}
.menu-item .menu-ico svg { width: 14px; height: 14px; stroke-width: 2; }
.menu-item:hover .menu-ico, .menu-item.open .menu-ico { opacity: 1; }
.menu-item:hover, .menu-item.open { background: var(--acr-selected); }
/* 1군(핵심) 메뉴 강조 — 사용 빈도 최다 카테고리 시각 구별 */
.menu-item-primary { font-weight: 600; }
.menu-item-primary::after {
  content: ''; display: block; height: 2px; margin-top: -2px;
  background: #FA0F00; opacity: .65; border-radius: 1px;
}
.menu-group-sep {
  width: 1px; height: 14px; background: var(--acr-border, #d0d0d0);
  margin: 0 4px; align-self: center; display: inline-block;
}
#menu-right { display: flex; align-items: center; height: 100%; }
#menubar-title { font-size: 12px; color: var(--acr-text-dim); margin-right: 14px; }
.win-btn {
  width: 44px; height: 100%;
  background: transparent; border: none; color: #555;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: default;
}
.win-btn:hover { background: var(--acr-hover); }
.win-btn.win-close:hover { background: #e81123; color: white; }

/* 드롭다운 메뉴 */
#menu-dropdown-root { position: absolute; top: 30px; left: 0; z-index: 300; }
.menu-dropdown {
  position: absolute; top: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid var(--acr-border-2);
  box-shadow: 2px 4px 12px rgba(0,0,0,0.25);
  padding: 4px 0;
  font-size: 12px;
}
.menu-dd-item {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%;
  /* [요청 M] 좌측 30px 들여쓰기를 아이콘 슬롯이 대신한다 (Acrobat 동일 배치) */
  padding: 6px 14px 6px 8px;
  background: transparent; border: none;
  color: var(--acr-text); font-size: 12px; text-align: left;
  cursor: default; white-space: nowrap;
}
.menu-dd-item:hover { background: var(--acr-selected); }
.menu-dd-item .shortcut { color: var(--acr-text-dim); margin-left: auto; padding-left: 40px; font-size: 11px; }
.menu-dd-item[disabled] { color: #b0b0b0; pointer-events: none; }

/* ---- 메뉴 항목 아이콘 슬롯 (요청 M · 아이콘화 100%) ----
   audit_menu_icons.mjs 실측이 0/60 = 0.0% 를 찍은 뒤 추가.
   아이콘이 없는 항목도 동일 폭을 비워 라벨 좌표를 정렬한다. */
.menu-dd-ico {
  flex: 0 0 20px; width: 20px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 8px; color: var(--acr-text-dim);
}
.menu-dd-ico svg { width: 14px; height: 14px; stroke-width: 2; }
.menu-dd-item:hover .menu-dd-ico { color: var(--acr-accent, #2d7ff9); }
.menu-dd-item[disabled] .menu-dd-ico { color: #c8c8c8; }
.menu-dd-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="dark"] .menu-dd-ico { color: #b8b8b8; }
.menu-dd-sep { height: 1px; background: #e4e4e4; margin: 4px 8px; }

/* ============================================================
   (2) 문서 탭 바
   ============================================================ */
#doc-tab-bar {
  height: 30px;
  background: var(--acr-tabbar);
  display: flex; align-items: flex-end;
  padding: 0 6px;
  flex-shrink: 0;
  -webkit-user-select: none; user-select: none;
}
.tab-btn {
  height: 26px;
  padding: 0 18px;
  margin-right: 1px;
  background: transparent; border: none;
  border-top-left-radius: 4px; border-top-right-radius: 4px;
  font-size: 12px; color: var(--acr-text);
  cursor: default;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab-btn:hover { background: rgba(255,255,255,0.5); }
.tab-btn.active-tab {
  background: var(--acr-chrome);
  box-shadow: 0 -1px 2px rgba(0,0,0,0.08);
}
.tab-btn.doc-tab { max-width: 260px; }
.tab-btn.doc-tab #file-name-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px;
}
.doc-tab-icon { width: 13px; height: 13px; color: var(--acr-red); flex-shrink: 0; }
/* [요청 M · visual5] 홈/도구 탭 아이콘 — T4(속성)·T2(픽셀) 두 팀이 독립 확인한
   "아이콘 없음" 결함을 고치며 추가. 문서 탭 아이콘과 같은 치수로 맞춘다. */
.tab-ico { width: 13px; height: 13px; flex-shrink: 0; color: var(--acr-accent, #1473e6); }
.doc-tab-close {
  margin-left: 4px; width: 16px; height: 16px; line-height: 14px;
  text-align: center; border-radius: 3px; font-size: 14px; color: var(--acr-text-dim);
}
.doc-tab-close:hover { background: var(--acr-active); color: var(--acr-text); }

/* ============================================================
   (3) 메인 툴바 — Acrobat 시그니처
   ============================================================ */
#main-toolbar {
  height: 40px;
  background: var(--acr-chrome);
  border-bottom: 1px solid var(--acr-border);
  display: flex; align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
  -webkit-user-select: none; user-select: none;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 2px; flex: 1; }
.tb-right { justify-content: flex-end; }
.tb-center { display: flex; align-items: center; gap: 2px; justify-content: center; }

.tb-btn {
  height: 30px; min-width: 30px;
  padding: 0 5px;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  color: #444; cursor: default;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px;
}
.tb-btn:hover { background: var(--acr-hover); border-color: var(--acr-border); }
.tb-btn:active { background: var(--acr-active); }
.tb-btn.active { background: var(--acr-selected); border-color: #a9c8ee; color: var(--acr-blue-on-selected); }
.tb-btn svg { width: 17px; height: 17px; stroke-width: 1.7; }
.tb-btn.tb-labeled { padding: 0 9px; }
.tb-btn.tb-labeled span { font-size: 12px; }

.tb-sep { width: 1px; height: 22px; background: var(--acr-border-2); margin: 0 6px; }

/* 페이지 번호 박스 */
#page-box {
  min-width: 34px; height: 24px;
  background: white; border: 1px solid var(--acr-border-2); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; margin: 0 4px;
  cursor: text;
}
#page-box:focus-within, #page-box.editing { border-color: var(--acr-blue); }
#page-box input {
  width: 100%; height: 100%; border: none; outline: none; text-align: center;
  font-size: 12px; font-family: inherit; background: transparent;
}
.page-total-label { font-size: 12px; color: var(--acr-text-dim); margin-right: 2px; }

/* 줌 박스 */
#zoom-box {
  height: 24px; min-width: 62px;
  background: white; border: 1px solid var(--acr-border-2); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 0 4px 0 8px;
  font-size: 12px; margin: 0 4px;
}
.zoom-caret { width: 11px !important; height: 11px !important; color: var(--acr-text-dim); }
#zoom-slider { width: 90px; accent-color: var(--acr-blue); margin: 0 4px; }

/* ============================================================
   (4) 컨텍스트(보조) 툴바 — 도구 선택 시 표시
   ============================================================ */
#ribbon-toolbars {
  min-height: 44px;
  background: #fbfbfb;
  border-bottom: 1px solid var(--acr-border);
  flex-shrink: 0;
}
.ribbon-toolbar-row {
  display: flex; align-items: center;
  min-height: 44px;
  overflow-x: auto;
  padding: 2px 10px;
  gap: 2px;
}
.ctx-title {
  font-size: 13px; font-weight: 600; color: var(--acr-text);
  padding-right: 12px; margin-right: 8px; border-right: 1px solid var(--acr-border);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.ctx-title svg { width: 16px; height: 16px; color: var(--acr-blue); }
.ribbon-group { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px; border-right: 1px solid #e4e4e4; }
.ribbon-group:last-of-type { border-right: none; }
.ribbon-group-label { display: none; }
.ribbon-btn {
  height: 34px; min-width: 34px;
  padding: 0 7px;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  color: #444; cursor: default;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px;
  font-size: 11.5px; white-space: nowrap;
}
.ribbon-btn:hover { background: var(--acr-hover); border-color: var(--acr-border); }
.ribbon-btn.active { background: var(--acr-selected); border-color: #a9c8ee; color: var(--acr-blue-on-selected); }
.ribbon-btn svg { width: 17px; height: 17px; stroke-width: 1.7; }
.ribbon-btn[disabled], .ribbon-btn:disabled { opacity: 0.4; pointer-events: none; }
.ctx-close {
  margin-left: auto;
  height: 28px; padding: 0 10px;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  color: var(--acr-text-dim); font-size: 12px; cursor: default;
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.ctx-close:hover { background: var(--acr-hover); border-color: var(--acr-border); }

/* ============================================================
   본문 3단 레이아웃
   ============================================================ */
#body-row { flex: 1; display: flex; overflow: hidden; }

/* 좌측 레일 */
#nav-rail {
  width: 34px;
  background: var(--acr-chrome-2);
  border-right: 1px solid var(--acr-border);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 6px; gap: 2px;
  flex-shrink: 0;
}
.rail-btn {
  width: 28px; height: 30px;
  background: transparent; border: none; border-radius: 3px;
  color: #555; cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
}
.rail-btn:hover { background: var(--acr-hover); }
.rail-btn.active { background: var(--acr-selected); color: var(--acr-blue-on-selected); }
.rail-btn svg { width: 16px; height: 16px; }

/* 탐색 패널 (썸네일) */
#sidebar {
  width: 200px;
  background: var(--acr-panel);
  border-right: 1px solid var(--acr-border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
#sidebar.collapsed { display: none; }
#sidebar-header {
  height: 32px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 12px;
  font-size: 12px; font-weight: 600; color: var(--acr-text);
  border-bottom: 1px solid var(--acr-border);
  flex-shrink: 0;
}
#sidebar-close {
  background: transparent; border: none; border-radius: 3px; color: var(--acr-text-dim);
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  cursor: default;
}
#sidebar-close:hover { background: var(--acr-hover); }
#sidebar-close svg { width: 14px; height: 14px; }
#thumb-list { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 10px; }

/* 썸네일 아이템 */
.thumb-item {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 4px;
  cursor: default;
  position: relative;
}
.thumb-item:hover { background: #ececec; }
.thumb-item.active { border-color: var(--acr-blue); background: var(--acr-selected); }
.thumb-item canvas {
  width: 100%; display: block;
  border: 1px solid var(--acr-border-2);
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.thumb-item .thumb-num { font-size: 11px; color: var(--acr-text-dim); text-align: center; margin-top: 4px; }
.thumb-item .thumb-actions { position: absolute; top: 7px; right: 7px; display: none; gap: 2px; }
.thumb-item:hover .thumb-actions { display: flex; }
.thumb-item .thumb-actions button {
  background: rgba(255,255,255,0.95); border: 1px solid var(--acr-border-2); border-radius: 3px;
  padding: 3px; cursor: default; color: #444;
}
.thumb-item .thumb-actions button:hover { background: var(--acr-selected); border-color: var(--acr-blue); color: var(--acr-blue-on-selected); }

/* ============================================================
   메인 뷰어
   ============================================================ */
#viewer-area {
  flex: 1;
  background: var(--acr-canvas);
  overflow: auto;
  position: relative;
}
#pages-container { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 40px; }

/* PDF 페이지 */
.pdf-page-wrap {
  position: relative;
  display: inline-block;
  background: white;
  box-shadow: 0 0 1px rgba(0,0,0,0.4), 0 3px 10px rgba(0,0,0,0.35);
  margin: 0 auto;
}
.pdf-page-wrap canvas.pdf-base { display: block; }
/* 가상화: 화면 밖 페이지(베이스 캔버스 메모리 해제 상태) — 로딩 자리표시 */
.pdf-page-wrap.offscreen-cached {
  background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #efefef 10px, #efefef 20px);
}
.pdf-page-wrap .text-layer {
  position: absolute; top:0; left:0; right:0; bottom:0;
  opacity: 0.2; line-height: 1; pointer-events: none;
  overflow: hidden;
}
.pdf-page-wrap .text-layer span {
  color: transparent; position: absolute; white-space: pre;
  cursor: text; transform-origin: 0% 0%;
}
.pdf-page-wrap.tool-text-select .text-layer { pointer-events: auto; }
.pdf-page-wrap.tool-text-select .text-layer span { color: transparent; }
.pdf-page-wrap.tool-text-select .text-layer ::selection { background: rgba(20,115,230,0.35); color: transparent; }
.pdf-page-wrap .fabric-layer { position: absolute; top:0; left:0; }

/* ============================================================
   홈 화면 (드롭존 겸용)
   ============================================================ */
#drop-zone { position: absolute; inset: 0; background: white; z-index: 10; overflow: auto; }
#home-view { display: flex; min-height: 100%; }
#home-nav {
  width: 210px; flex-shrink: 0;
  background: #fafafa; border-right: 1px solid var(--acr-border);
  padding: 18px 0;
}
.home-nav-title {
  font-size: 11px; font-weight: 700; color: var(--acr-text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 4px 18px 8px;
}
.home-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 18px;
  background: transparent; border: none;
  font-size: 13px; color: var(--acr-text); text-align: left;
  cursor: default;
}
.home-nav-item:hover { background: var(--acr-hover); }
.home-nav-item.active { background: var(--acr-selected); color: var(--acr-blue-on-selected); font-weight: 600; }
.home-nav-item svg { width: 16px; height: 16px; }

#home-main { flex: 1; padding: 28px 40px; }
#home-main h1 { font-size: 22px; font-weight: 400; margin: 0 0 18px; color: #2c2c2c; }
#home-main h2 { font-size: 15px; font-weight: 600; margin: 32px 0 12px; color: #2c2c2c; }
#home-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.home-card {
  display: flex; align-items: center; gap: 14px;
  width: 330px; padding: 16px;
  background: white; border: 1px solid var(--acr-border); border-radius: 6px;
  cursor: pointer; text-align: left;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.home-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); border-color: var(--acr-blue); }
.home-card-icon {
  width: 46px; height: 46px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.home-card-icon svg { width: 22px; height: 22px; }
.home-card-body { display: flex; flex-direction: column; gap: 3px; }
.home-card-body strong { font-size: 14px; color: #2c2c2c; }
.home-card-body span { font-size: 12px; color: var(--acr-text-dim); line-height: 1.45; }
#recent-empty {
  border: 1px dashed var(--acr-border-2); border-radius: 6px;
  padding: 36px; text-align: center; color: var(--acr-text-dim);
  max-width: 680px;
}
#recent-empty svg { width: 34px; height: 34px; margin-bottom: 10px; color: #b0b0b0; }
#recent-empty p { margin: 0; font-size: 13px; line-height: 1.6; }
#drop-zone.drag-over #home-view { outline: 3px dashed var(--acr-blue); outline-offset: -3px; background: #f0f7ff; }

/* ============================================================
   도구 탭 화면 (도구 갤러리)
   ============================================================ */
#tools-view { position: absolute; inset: 0; background: white; z-index: 11; overflow: auto; padding: 28px 40px; }
#tools-view h1 { font-size: 22px; font-weight: 400; margin: 0 0 20px; color: #2c2c2c; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; max-width: 1060px; }
.tool-card {
  background: white; border: 1px solid var(--acr-border); border-radius: 6px;
  padding: 20px 14px 14px; text-align: center;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.tool-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.tool-card .tc-icon {
  width: 44px; height: 44px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.tool-card .tc-icon svg { width: 24px; height: 24px; }
.tool-card strong { display: block; font-size: 13px; color: #2c2c2c; margin-bottom: 8px; }
.tool-card .tc-open {
  display: inline-block; padding: 4px 16px;
  border: 1px solid var(--acr-blue); border-radius: 99px;
  color: var(--acr-blue); font-size: 12px; font-weight: 600;
}
.tool-card:hover .tc-open { background: var(--acr-blue); color: white; }

/* ============================================================
   우측 도구 창 (Tools Pane)
   ============================================================ */
#tools-pane {
  width: 230px;
  background: var(--acr-panel);
  border-left: 1px solid var(--acr-border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
#tools-pane.collapsed { display: none; }
#tools-pane-list { padding: 8px 0; border-bottom: 1px solid var(--acr-border); }
.tp-search { padding: 6px 12px 10px; }
.tp-search input {
  width: 100%; height: 28px; padding: 0 10px;
  border: 1px solid var(--acr-border-2); border-radius: 99px;
  font-size: 12px; outline: none; background: white;
}
.tp-search input:focus { border-color: var(--acr-blue); }
.tp-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 16px;
  background: transparent; border: none;
  font-size: 13px; color: var(--acr-text); text-align: left;
  cursor: default;
}
.tp-item:hover { background: var(--acr-hover); }
.tp-item.active { background: var(--acr-selected); color: var(--acr-blue-on-selected); }
.tp-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.tp-item .tp-ico-comment { color: #6a53c6; }
.tp-item .tp-ico-fill { color: #7a49a5; }
.tp-item .tp-ico-edit { color: #1473E6; }
.tp-item .tp-ico-page { color: #e4762c; }
.tp-item .tp-ico-ocr { color: #0d8f6a; }
.tp-item .tp-ico-batch { color: #b3543f; }
.tp-item .tp-ico-protect { color: #7c3aed; }
.tp-item .tp-ico-measure { color: #0e7490; }
.tp-item .tp-ico-export { color: #c9252d; }
.tp-item .tp-ico-view { color: #556; }

/* 속성 패널 */
#property-panel { flex: 1; display: flex; flex-direction: column; min-height: 120px; }
#property-header {
  padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--acr-text);
  border-bottom: 1px solid #e4e4e4;
}
#property-content { padding: 4px 0; font-size: 12px; overflow-y: auto; }

.prop-block { padding: 10px 14px; border-bottom: 1px solid #e8e8e8; }
.prop-title { font-size: 12px; font-weight: 600; color: var(--acr-blue-dark); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.prop-id { font-size: 10px; color: #9a9a9a; font-family: ui-monospace, monospace; }
.prop-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12px; }
.prop-row label { min-width: 56px; color: var(--acr-text-dim); font-size: 11px; }
.prop-row input, .prop-row select { flex: 1; background: white; color: var(--acr-text); border: 1px solid var(--acr-border-2); border-radius: 3px; padding: 3px 6px; font-size: 11px; min-width: 0; }
.prop-row input[type="color"] { padding: 1px; height: 22px; min-width: 32px; flex: 0 0 32px; }
.prop-row input[type="number"] { max-width: 80px; }
.prop-actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.prop-btn { flex: 1 1 auto; background: white; color: var(--acr-text); border: 1px solid var(--acr-border-2); border-radius: 3px; padding: 4px 8px; font-size: 11px; cursor: default; min-width: 60px; }
.prop-btn:hover { background: var(--acr-hover); }
.prop-danger { background: #fdf0ef !important; border-color: #f0b6b0 !important; color: #c9252d !important; }
.prop-danger:hover { background: #fbdcd9 !important; }
.prop-empty { padding: 20px 14px; color: #9a9a9a; font-size: 12px; text-align: center; }
.prop-btn-block { display: block; width: 100%; margin-top: 4px; text-align: center; }

#property-content label { display: block; font-size: 11px; color: var(--acr-text-dim); margin: 6px 14px 2px; }
#property-content > div { padding-left: 0; padding-right: 0; }
#property-content input[type="number"],
#property-content input[type="text"],
#property-content textarea,
#property-content select {
  width: calc(100% - 28px); margin: 0 14px; background: white; color: var(--acr-text); border: 1px solid var(--acr-border-2);
  border-radius: 3px; padding: 4px 6px; font-size: 11px; box-sizing: border-box;
}
.prop-block input[type="number"], .prop-block input[type="text"], .prop-block textarea, .prop-block select { width: 100%; margin: 0; }
.prop-block label { margin: 6px 0 2px; }
#property-content input[type="color"] {
  width: 36px; height: 24px; padding: 1px; border: 1px solid var(--acr-border-2);
  border-radius: 3px; background: white; cursor: pointer; vertical-align: middle;
}
#property-content input[type="range"] { width: calc(100% - 28px); margin: 0 14px; accent-color: var(--acr-blue); cursor: pointer; }
.prop-block input[type="range"] { width: 100%; margin: 0; }

/* ============================================================
   상태바
   ============================================================ */
#status-bar {
  height: 24px;
  background: var(--acr-chrome);
  border-top: 1px solid var(--acr-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  font-size: 11px; color: var(--acr-text-dim);
  flex-shrink: 0;
}
.sb-left { display: flex; align-items: center; gap: 14px; }
.sb-center { display: flex; align-items: center; gap: 8px; }
.sb-center > span { display: inline-flex; align-items: center; gap: 4px; }
.sb-center svg { width: 12px; height: 12px; opacity: .7; }
.sb-dot { opacity: .4; }
#history-count { font-family: ui-monospace, monospace; font-size: 10.5px; }
.sb-hint { font-size: 11px; }

/* ============================================================
   모달 (Acrobat 대화 상자 스타일)
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: white; border-radius: 4px; padding: 18px 20px; min-width: 380px;
  border: 1px solid var(--acr-border-2);
  box-shadow: 0 10px 36px rgba(0,0,0,0.35);
  max-width: 90vw; max-height: 90vh; overflow: auto;
  color: var(--acr-text);
}
.modal-box h3 {
  font-size: 15px; font-weight: 600; margin: 0 0 14px; color: #2c2c2c;
  display: flex; align-items: center; gap: 8px;
}
.modal-box h3 svg { width: 17px; height: 17px; color: var(--acr-blue); }
.modal-box label { font-size: 12px; color: var(--acr-text-dim); display: block; margin-top: 10px; }
.modal-box input[type=text], .modal-box input[type=number], .modal-box select, .modal-box textarea {
  width: 100%; padding: 6px 8px; background: white; border: 1px solid var(--acr-border-2);
  border-radius: 3px; color: var(--acr-text); font-size: 13px; margin-top: 3px;
  outline: none;
}
.modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus { border-color: var(--acr-blue); }
.modal-box .modal-actions { margin-top: 18px; display: flex; gap: 8px; justify-content: flex-end; }
.modal-box table { border-collapse: collapse; }
.modal-box th, .modal-box td { border: 1px solid #e4e4e4; padding: 4px 8px; text-align: left; }
.modal-box th { background: #f4f4f4; }

.btn-primary {
  background: var(--acr-blue); color: white; padding: 6px 18px; border-radius: 99px;
  font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--acr-blue);
}
.btn-primary:hover { background: var(--acr-blue-dark); }
.btn-secondary {
  background: white; color: var(--acr-text); padding: 6px 18px; border-radius: 99px;
  font-size: 13px; cursor: pointer; border: 1px solid var(--acr-border-2);
}
.btn-secondary:hover { background: var(--acr-hover); }
.btn-danger {
  background: var(--acr-red); color: white; padding: 6px 18px; border-radius: 99px;
  font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--acr-red);
}
.btn-danger:hover { filter: brightness(0.92); }

/* 인라인 텍스트 편집 */
.inline-text-edit {
  position: absolute;
  background: #fffef5;
  border: 2px solid var(--acr-blue);
  padding: 2px 4px;
  min-width: 30px;
  z-index: 50;
  outline: none;
  font-family: Helvetica, Arial, sans-serif;
  color: #000;
  white-space: pre;
}

/* ============================================================
   토스트
   ============================================================ */
#toast-container {
  position: fixed; bottom: 34px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 10px 14px; border-radius: 4px; font-size: 13px;
  background: #323232; color: #f4f4f4; border-left: 4px solid var(--acr-blue);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35); min-width: 240px;
  animation: slideIn 0.25s ease-out;
}
.toast.success { border-left-color: #2d9d78; }
.toast.error { border-left-color: #e34850; }
.toast.info { border-left-color: var(--acr-blue); }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 진행 표시 */
.progress-bar { width: 100%; height: 8px; background: #ececec; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.progress-bar > div { height: 100%; background: linear-gradient(90deg, var(--acr-blue), #4a9cf5); width: 0%; transition: width 0.2s; }

/* 검색 하이라이트 */
.search-highlight { background: rgba(20,115,230,0.35) !important; color: black !important; }
.search-highlight.current { background: rgba(250,15,0,0.45) !important; }

/* 인쇄 스타일 */
@media print {
  body { background: white !important; }
  #ribbon-container, #menu-bar, #doc-tab-bar, #main-toolbar, #nav-rail, #sidebar,
  #tools-pane, #status-bar, #drop-zone, #tools-view, #autotest-banner { display: none !important; }
  #body-row, #viewer-area { overflow: visible !important; }
  #pages-container { background: white !important; overflow: visible !important; }
  .pdf-page-wrap { box-shadow: none !important; margin: 0 !important; page-break-after: always; break-after: page; }
  .pdf-page-wrap:last-child { page-break-after: auto; break-after: auto; }
  .upper-canvas, .canvas-container > canvas { pointer-events: none; }
  .text-layer { display: none !important; }
}

/* 스크롤바 — Acrobat 라이트 */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 6px; border: 2px solid #f0f0f0; }
::-webkit-scrollbar-thumb:hover { background: #9e9e9e; }

/* ============================================================
   책갈피 패널
   ============================================================ */
#bookmark-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.bm-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 12px;
  background: transparent; border: none;
  font-size: 12px; color: var(--acr-text); text-align: left;
  cursor: default;
}
.bm-item:hover { background: var(--acr-hover); }
.bm-item svg { width: 13px; height: 13px; color: var(--acr-blue); flex-shrink: 0; }
.bm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-empty { padding: 20px 14px; color: #9a9a9a; font-size: 12px; text-align: center; }

/* ============================================================
   홈 화면 최근 목록
   ============================================================ */
#recent-table { text-align: left; }
.recent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid #eee;
  cursor: pointer; border-radius: 4px;
}
.recent-row:hover { background: var(--acr-hover); }
.recent-name { font-size: 13px; color: #2c2c2c; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-meta { font-size: 11px; color: var(--acr-text-dim); flex-shrink: 0; }

/* ============================================================
   접근성 — 키보드 포커스 표시 (WCAG 2.4.7)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--acr-blue);
  outline-offset: 1px;
  border-radius: 3px;
  z-index: 1;
}
.tb-btn:focus-visible, .rail-btn:focus-visible, .menu-item:focus-visible,
.tab-btn:focus-visible, .tp-item:focus-visible, .ribbon-btn:focus-visible {
  outline: 2px solid var(--acr-blue);
  outline-offset: -2px;
}
#page-box:focus-visible, #zoom-box:focus-visible {
  outline: 2px solid var(--acr-blue);
  outline-offset: 1px;
}
/* 스크린리더 전용 텍스트 */
.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;
}
/* 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   반응형 — 태블릿/모바일 브레이크포인트
   ============================================================ */
/* 태블릿 (≤1024px): 도구 창 오버레이화, 중앙 툴바 축약 */
@media (max-width: 1024px) {
  #zoom-slider { display: none; }
  .tb-labeled span { display: none; }
  #tools-pane { width: 220px; }
  #sidebar { width: 180px; }
  #menubar-title { display: none; }
}

/* 모바일 (≤768px): 사이드바/도구창 오버레이, 툴바 간소화 */
@media (max-width: 768px) {
  #menu-bar .menu-item { padding: 0 8px; font-size: 12px; }
  .win-btn { display: none; }
  #main-toolbar { flex-wrap: wrap; gap: 2px; padding: 2px 4px; }
  .tb-center { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--acr-border); padding-top: 2px; }
  .tb-sep { display: none; }
  /* 좌측 패널: 오버레이 */
  #sidebar {
    position: absolute; left: 44px; top: 0; bottom: 0; z-index: 120;
    box-shadow: 2px 0 10px rgba(0,0,0,.25);
  }
  /* 우측 도구 창: 오버레이 */
  #tools-pane {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 120; width: 240px;
    box-shadow: -2px 0 10px rgba(0,0,0,.25);
  }
  #body-row { position: relative; }
  #home-nav { display: none; }
  #home-cards { grid-template-columns: 1fr; }
  #status-bar .sb-hint { display: none; }
}

/* 소형 모바일 (≤480px): 최소 UI */
@media (max-width: 480px) {
  #menu-bar { overflow-x: auto; }
  .page-total-label { font-size: 11px; }
  .tb-btn { min-width: 30px; height: 30px; }
  #tools-pane { width: 85vw; }
  #sidebar { width: 70vw; left: 40px; }
  #nav-rail { width: 40px; }
}

/* ============================================================
   [실측 수정] 모바일 레이아웃 붕괴 대응 (412x915 안드로이드 실측)
   문제(측정값): .ribbon-toolbar-row 는 overflow-x:auto 이지만 자식 .ribbon-group 이
   flex-shrink 기본값(1)이라 찌그러지면서 아이콘/글자가 서로 겹치고, 76개 요소가
   화면 밖(right=417~641 > 412)으로 이탈해 조작이 불가능했다.
   해법: 스크롤 컨테이너의 자식을 shrink 금지 + nowrap 으로 고정해 진짜 가로 스크롤로 만든다.
   ============================================================ */
@media (max-width: 768px) {
  /* 1) 리본: 진짜 가로 스크롤 (겹침 제거) */
  #ribbon-toolbars { overflow: hidden; }
  .ribbon-toolbar-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 6px;
  }
  .ribbon-toolbar-row::-webkit-scrollbar { height: 0; display: none; }
  .ribbon-toolbar-row > * { flex: 0 0 auto; }           /* 찌그러짐 금지 */
  .ribbon-group { flex: 0 0 auto; white-space: nowrap; padding: 0 6px; }
  .ribbon-btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }  /* 터치 타깃 */
  .ctx-title { flex: 0 0 auto; white-space: nowrap; }

  /* 2) 메인 툴바도 동일 원칙 — wrap 대신 가로 스크롤로 통일 */
  #main-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #main-toolbar::-webkit-scrollbar { height: 0; display: none; }
  #main-toolbar > * { flex: 0 0 auto; }
  #main-toolbar .tb-center { order: 0; width: auto; border-top: none; padding-top: 0; }
  .tb-btn { min-width: 40px; min-height: 40px; }        /* 터치 타깃 40px */

  /* 3) 메뉴바: 가로 스크롤 + 터치 타깃 */
  #menu-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #menu-bar::-webkit-scrollbar { height: 0; display: none; }
  #menu-bar > * { flex: 0 0 auto; }
  #menu-bar .menu-item { min-height: 34px; }

  /* 4) 문서 탭 바도 이탈 방지 */
  #doc-tab-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #doc-tab-bar::-webkit-scrollbar { height: 0; display: none; }
  #doc-tab-bar > * { flex: 0 0 auto; }

  /* 5) 상태바 깨짐(세로 밀림) 수정 — nowrap + 넘치면 스크롤 */
  #status-bar {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    padding: 0 8px; scrollbar-width: none;
  }
  #status-bar::-webkit-scrollbar { height: 0; display: none; }
  #status-bar > * { flex: 0 0 auto; white-space: nowrap; }
  .sb-left, .sb-center, .sb-right { white-space: nowrap; }

  /* 6) 패널: 기본 숨김 (JS가 .open 으로 토글) + 백드롭 */
  #sidebar, #tools-pane { display: none; }
  #sidebar.mobile-open, #tools-pane.mobile-open { display: flex; }
  #panel-backdrop {
    position: absolute; inset: 0; z-index: 110;
    background: rgba(0,0,0,.35); display: none;
  }
  #panel-backdrop.show { display: block; }
  /* 문서 영역 최소 확보: 패널이 화면 전체를 덮지 않게 */
  #tools-pane { width: min(320px, 82vw); }
  #sidebar { width: min(280px, 70vw); }
}

/* 초소형(≤380px): 라벨 제거로 폭 확보 */
@media (max-width: 380px) {
  .ribbon-btn span:not(.shortcut) { display: none; }
  .ribbon-btn { min-width: 40px; padding: 0 6px; }
}

/* ============ 서브메뉴 (플라이아웃) ============ */
.menu-sub-wrap { position: relative; }
.menu-submenu {
  display: none;
  position: absolute; left: 100%; top: -4px;
  z-index: 10001;
}
.menu-sub-wrap:hover > .menu-submenu,
.menu-sub-wrap:focus-within > .menu-submenu { display: block; }
.menu-dd-item.has-submenu { width: 100%; }

/* ============ 읽기 모드 (F8) — 크롬 숨김 ============ */
body.read-mode #ribbon-container > *:not(#main-toolbar),
body.read-mode #context-toolbar,
body.read-mode #nav-rail,
body.read-mode #sidebar,
body.read-mode #tools-pane,
body.read-mode #status-bar { display: none !important; }

/* ============ 다크 그레이 표시 테마 (Acrobat 보기>표시 테마) ============ */
html[data-theme="dark"] {
  --acr-bg: #2b2b2b;
  --acr-toolbar-bg: #333333;
  --acr-border-2: #4a4a4a;
  --acr-text: #e8e8e8;
  --acr-text-dim: #9a9a9a;
  --acr-selected: #4a4a4a;
}
html[data-theme="dark"] body { background: #2b2b2b; color: #e8e8e8; }
html[data-theme="dark"] #menu-bar,
html[data-theme="dark"] #doc-tabs,
html[data-theme="dark"] #main-toolbar,
html[data-theme="dark"] #context-toolbar { background: #333; color: #e8e8e8; border-color: #4a4a4a; }
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .tb-btn { color: #e8e8e8; }
html[data-theme="dark"] .menu-dropdown { background: #3c3c3c; border-color: #555; }
html[data-theme="dark"] .menu-dd-item { color: #e8e8e8; }
html[data-theme="dark"] .menu-dd-item:hover { background: #4d4d4d; }
html[data-theme="dark"] #viewer-area { background: #1e1e1e; }
html[data-theme="dark"] #sidebar,
html[data-theme="dark"] #nav-rail,
html[data-theme="dark"] #tools-pane { background: #2f2f2f; color: #e8e8e8; border-color: #4a4a4a; }
html[data-theme="dark"] #status-bar { background: #333; color: #ccc; border-color: #4a4a4a; }

/* ============================================================
   AI 문서 이해 — 플로팅 버튼(FAB) + 하단 시트
   사용자 핵심요구(훑기/OCR/요약/질문/비교)를 메인 뷰어에서 바로 실행하기 위한 UI.
   모바일에서 리본을 잠식하지 않도록 하단 시트로 분리했다(세로 공간 최소 점유).
   터치 타깃은 최소 44px 확보.
   ============================================================ */
#ai-fab {
  position: fixed; right: 14px; bottom: 42px; z-index: 9000;
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; font-size: 20px;
  box-shadow: 0 6px 18px rgba(37,99,235,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
#ai-fab span { font-size: 9px; font-weight: 700; letter-spacing: .5px; }
#ai-fab:active { transform: scale(.94); }
/* 시트가 열리면 FAB가 시트에 깔려 못 누르는 실측 버그 대응 — 시트 실측 높이만큼 위로 */
body.ai-sheet-open #ai-fab {
  bottom: calc(var(--ai-sheet-h, 300px) + 10px);
  z-index: 9200;
  transition: bottom .24s ease;
}

#ai-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9100;
  background: #fff; border-top: 1px solid var(--acr-border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 28px rgba(0,0,0,.22);
  max-height: 78vh; display: flex; flex-direction: column;
  transform: translateY(102%); transition: transform .24s ease;
}
#ai-sheet.open { transform: translateY(0); }
#ai-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: #cbd5e1; margin: 8px auto 4px; }
#ai-sheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 14px 8px; border-bottom: 1px solid var(--acr-border); }
#ai-sheet-head strong { font-size: 14px; }
#ai-sheet-doc { font-size: 11px; color: var(--acr-text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ai-sheet-close { border: none; background: transparent; font-size: 16px; cursor: pointer; min-width: 44px; min-height: 40px; color: #64748b; }
#ai-sheet-actions { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; }
#ai-sheet-actions::-webkit-scrollbar { display: none; }
.ai-act {
  flex: 0 0 auto; min-width: 62px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--acr-border); border-radius: 10px; background: #f8fafc;
  font-size: 17px; cursor: pointer;
}
.ai-act span { font-size: 11px; font-weight: 600; color: #334155; }
.ai-act:active { background: #e2e8f0; }
#ai-sheet-qwrap { padding: 0 12px 8px; }
#ai-question { width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 10px; font-size: 13px; border: 1px solid var(--acr-border); border-radius: 8px; }
/* hidden 속성이 display:flex에 덮이는 버그 방지 — 숨김 상태에서 포인터 이벤트를 먹지 않도록 */
#ai-sheet-progress { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 11px; color: #475569; }
#ai-sheet-progress[hidden] { display: none !important; }
[hidden] { display: none !important; }
#ai-sheet-bar { height: 4px; background: #2563eb; border-radius: 2px; width: 30%; transition: width .3s; flex: 1; max-width: 160px; }
#ai-cancel { border: 1px solid var(--acr-border); background: #fff; border-radius: 6px; min-height: 32px; padding: 0 10px; cursor: pointer; font-size: 11px; }
#ai-sheet-body { overflow-y: auto; padding: 4px 14px 18px; font-size: 13px; line-height: 1.62; -webkit-overflow-scrolling: touch; }
#ai-sheet-body h4 { margin: 8px 0 6px; font-size: 14px; }
.ai-hint { color: #64748b; font-size: 12px; }
.ai-stat { background: #f1f5f9; border-radius: 6px; padding: 6px 9px; font-size: 11.5px; color: #334155; margin: 6px 0; }
.ai-pg { border-left: 3px solid #cbd5e1; padding: 4px 0 4px 9px; margin: 6px 0; font-size: 12px; color: #475569; }
.ai-err { background: #fef2f2; color: #b91c1c; border-radius: 6px; padding: 8px 10px; font-size: 12px; }
.ai-kp { margin: 6px 0 6px 18px; padding: 0; }
.ai-kp li { margin: 3px 0; }
.ai-cite { display: inline-block; background: #dbeafe; color: #1d4ed8; border-radius: 4px; padding: 0 5px; font-size: 10.5px; font-weight: 700; margin-left: 4px; }
.ai-cite-row { font-size: 12px; color: #475569; margin: 4px 0; }
.ai-sec { margin: 8px 0; padding-left: 8px; border-left: 2px solid #e2e8f0; }
.ai-chg { border: 1px solid var(--acr-border); border-radius: 8px; padding: 8px 10px; margin: 7px 0; font-size: 12.5px; }
.ai-badge { display: inline-block; background: #334155; color: #fff; border-radius: 4px; padding: 0 6px; font-size: 10.5px; font-weight: 700; margin-right: 5px; }
.ai-chg-추가 { border-left: 4px solid #16a34a; }
.ai-chg-삭제 { border-left: 4px solid #dc2626; }
.ai-chg-수정 { border-left: 4px solid #d97706; }
.ai-old { color: #b91c1c; font-size: 11.5px; }
.ai-new { color: #15803d; font-size: 11.5px; }
#ai-sheet-body em { color: #64748b; font-size: 11px; font-style: normal; }

@media (min-width: 769px) {
  /* 데스크톱: 우측 하단에 카드 형태로 */
  #ai-sheet { left: auto; right: 16px; width: 420px; max-height: 72vh; border-radius: 14px; bottom: 16px; }
  #ai-fab { bottom: 30px; }
}
html[data-theme="dark"] #ai-sheet { background: #2b2b2b; color: #e8e8e8; }
html[data-theme="dark"] .ai-act { background: #3a3a3a; color: #e8e8e8; }
html[data-theme="dark"] #ai-sheet-body { color: #ddd; }

/* ============================================================
   부팅 게이트 — "보이지만 죽어 있는 구간" 정직하게 표시
   실측 근거: 서버 HTML은 2.4초에 보이는데 기능은 15.0초에 붙어
   12.6초간 눌러도 무반응 + 안내 없음 → 사용자가 "껍데기"로 인식.
   재현: node tool/diag_deadwindow.mjs
   ============================================================ */
#boot-gate { display: none; }
body.app-booting #boot-gate {
  display: flex; align-items: center; gap: 10px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 12000;
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  background: #1f2937; color: #e5e7eb;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  /* [실측 회귀 대응] 이 안내 띠는 메뉴바(top:0)를 덮는다. 게이트 자신이 클릭을
     가로채면 "안내를 띄웠더니 그 안내가 버튼을 막는" 또 다른 버그가 된다.
     탭 차단은 크롬 요소 자체의 pointer-events:none 규칙이 이미 담당하므로
     게이트는 그리기만 하고 포인터는 통과시킨다. 재현: node tool/verify_ui_click.mjs */
  pointer-events: none;
}
#boot-gate-bar {
  width: 74px; height: 4px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #2563eb 100%);
  background-size: 200% 100%;
  animation: bootslide 1.1s linear infinite;
}
@keyframes bootslide { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
/* 준비 안 된 조작부는 명확히 비활성 — 눌렀는데 아무 일도 안 일어나는 상황을 없앤다 */
body.app-booting #menu-bar,
body.app-booting #doc-tab-bar,
body.app-booting #main-toolbar,
body.app-booting #context-toolbar,
body.app-booting #ribbon-toolbars,
body.app-booting #nav-rail,
body.app-booting #tools-pane,
body.app-booting #home-screen {
  opacity: .38; pointer-events: none; user-select: none;
}
body.app-booting #boot-gate.boot-failed { background: #7f1d1d; }
body.app-booting #boot-gate.boot-failed #boot-gate-bar { animation: none; background: #fca5a5; }

/* ============================================================
   홈 화면 본질 우선 배치
   실측 근거: 첫 화면 클릭요소 25개 중 본질(훑기/OCR/요약/비교) 관련 1개(4.0%).
   이 도구의 존재 이유를 첫 화면 최상단 1탭 거리에 놓는다.
   재현: node tool/diag_essence.mjs
   ============================================================ */
#home-purpose { font-size: 20px; font-weight: 700; margin: 4px 0 4px; letter-spacing: -.3px; }
#home-purpose-sub { font-size: 12.5px; color: var(--acr-text-dim, #64748b); margin: 0 0 14px; line-height: 1.55; }
#home-essence {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin-bottom: 22px;
}
.home-ess {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 84px; padding: 10px 6px; cursor: pointer;
  border: 1px solid var(--acr-border, #e2e8f0); border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.home-ess:hover { border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,.14); }
.home-ess:active { transform: scale(.97); }
.home-ess i { width: 22px; height: 22px; color: #2563eb; }
.home-ess strong { font-size: 13px; color: #1e293b; }
.home-ess span { font-size: 10.5px; color: #64748b; text-align: center; line-height: 1.3; }
#home-open-title { font-size: 13px; font-weight: 700; color: #475569; margin: 0 0 8px; }
@media (max-width: 480px) {
  #home-essence { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  #home-purpose { font-size: 17px; }
  .home-ess { min-height: 76px; }
}
body.dark #home-essence .home-ess { background: linear-gradient(180deg, #1e293b, #172033); }
body.dark .home-ess strong { color: #e2e8f0; }

/* ============================================================
   분할 비교 화면 (splitCompare.js) — 같은 화면을 둘로 나눠 두 문서 동시 확인
   설계: 툴바(고정) + 상태줄 + 좌우 패널(그리드, 드래그로 비율 조절) + AI 설명 리포트
   ============================================================ */
#split-compare {
  position: fixed; inset: 0; z-index: 11000;
  display: flex; flex-direction: column;
  background: #f3f4f6;
}
#split-compare[hidden] { display: none !important; }
body.sc-open { overflow: hidden; }

#sc-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; background: #1f2937; color: #e5e7eb;
  font-size: 12px; border-bottom: 1px solid #111827;
}
#sc-title { font-size: 13px; margin-right: 4px; }
#sc-bar .sc-doc {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #374151; padding: 3px 8px; border-radius: 999px;
}
#sc-bar .sc-vs { opacity: .7; }
#sc-bar .sc-sep { width: 1px; height: 18px; background: #4b5563; margin: 0 4px; }
#sc-bar .sc-grow { flex: 1 1 auto; }
#sc-bar .sc-chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sc-btn {
  min-height: 30px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid #4b5563; background: #374151; color: #e5e7eb; font-size: 12px;
}
.sc-btn:hover { background: #4b5563; }
.sc-btn-primary { background: #1473E6; border-color: #1473E6; color: #fff; font-weight: 600; }
.sc-btn-ai { background: #7c3aed; border-color: #7c3aed; color: #fff; font-weight: 600; }
.sc-btn-xls { background: #157347; border-color: #157347; color: #fff; font-weight: 600; }
#sc-bm-toggle[aria-pressed="true"] { background: #0f766e; border-color: #0f766e; color: #fff; }
#sc-page-txt, #sc-zoom-txt { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }

#sc-status { padding: 5px 12px; font-size: 12px; background: #e5e7eb; color: #374151; }
#sc-status.sc-err { background: #fee2e2; color: #7f1d1d; font-weight: 600; }

/* 좌우 비율은 CSS 변수로 조절한다 — 드래그가 책갈피 레일 폭을 건드리지 않게 분리 */
#sc-body {
  flex: 1 1 auto; min-height: 0; display: grid;
  --sc-a: 1fr; --sc-b: 1fr; --sc-bm: 0px;
  grid-template-columns: var(--sc-a) 6px var(--sc-b) var(--sc-bm);
}
#sc-body.with-bm { --sc-bm: 320px; }
#sc-bm { min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: #fff; border-left: 1px solid #d1d5db; }
#sc-body:not(.with-bm) #sc-bm { display: none; }
/* 결함 수정: min-height 누락으로 확대해도 스크롤이 생기지 않던 문제.
   실측(tool/audit_compare.mjs C05/C06): 줌을 110%→200% 로 올려 캔버스가
   462px→840px 로 커졌는데도 scrollHeight - clientHeight = 0 이었다.
   grid/flex 자식의 기본값 min-height:auto 때문에 .sc-pane 이 내용 높이만큼
   늘어나 .sc-scroll(overflow:auto)이 넘치는 상황 자체가 만들어지지 않았고,
   그래서 동기 스크롤 기능이 실사용에서 무력화되어 있었다. */
.sc-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.sc-pane-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; font-size: 11px; font-weight: 700; color: #475569;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.sc-chg-chip { font-weight: 600; color: #b45309; }
.sc-scroll { flex: 1 1 auto; overflow: auto; padding: 10px; background: #eef1f5; }
.sc-canvas { display: block; margin: 0 auto; box-shadow: 0 1px 6px rgba(0,0,0,.18); background: #fff; }
.sc-empty { padding: 28px 12px; text-align: center; color: #94a3b8; font-size: 13px; }
#sc-divider { background: #cbd5e1; cursor: col-resize; }
#sc-divider:hover { background: #94a3b8; }

/* ── 리비전 클라우드(구름 마크) 레이어 ──
   캔버스 위에 SVG를 겹친다. viewBox를 scale=1 좌표계로 고정했기 때문에
   확대/축소해도 좌표 계산을 다시 하지 않는다. 테두리 두께는 non-scaling-stroke로 유지. */
.sc-page-wrap { position: relative; width: max-content; margin: 0 auto; }
svg.sc-cloud { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
svg.sc-cloud g.sc-cl { pointer-events: auto; cursor: pointer; }
svg.sc-cloud g.sc-cl > path { fill: rgba(255,255,255,0); stroke-width: 2; }
svg.sc-cloud g.sc-cl:hover > path { fill: rgba(255, 214, 102, .18); }
.sc-cl-badge { fill: #1f2937; stroke: #fff; stroke-width: 1; }
.sc-cl-num { fill: #fff; font-size: 10px; font-weight: 700; font-family: system-ui, sans-serif; }
/* AI 미분류: 변경 유형 색 */
.sc-cl-add > path { stroke: #16a34a; }
.sc-cl-del > path { stroke: #dc2626; }
.sc-cl-modify > path { stroke: #ea580c; }
.sc-cl-move > path { stroke: #7c3aed; }
/* AI 분류 후: 중요도 색이 유형 색을 덮는다 (LLM 판단이 화면에 반영된 증거) */
.sc-cl-high > path { stroke: #dc2626; stroke-width: 3; }
.sc-cl-high .sc-cl-badge { fill: #dc2626; }
.sc-cl-med > path { stroke: #ea580c; }
.sc-cl-med .sc-cl-badge { fill: #ea580c; }
.sc-cl-low > path { stroke: #9ca3af; }
.sc-cl-low .sc-cl-badge { fill: #6b7280; }
.sc-cl-active > path { stroke: #1473E6 !important; stroke-width: 3.5; fill: rgba(20,115,230,.14); }
.sc-cl-active .sc-cl-badge { fill: #1473E6; }

/* ── 책갈피형 변경 목록 ── */
#sc-bm-head { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; background: #0f766e; color: #fff; font-size: 12px; }
#sc-bm-sum { font-size: 11px; opacity: .9; margin-left: auto; }
#sc-bm-list { flex: 1 1 auto; overflow: auto; padding: 6px; font-size: 12px; }
#sc-bm-foot { padding: 6px 10px; font-size: 10px; color: #6b7280; background: #f8fafc; border-top: 1px solid #e2e8f0; line-height: 1.5; }
.sc-bm-empty { padding: 20px 10px; color: #94a3b8; text-align: center; line-height: 1.6; }
.sc-bm-pg { margin-bottom: 4px; border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; }
.sc-bm-pg.cur { border-color: #1473E6; box-shadow: 0 0 0 2px rgba(20,115,230,.14); }
.sc-bm-pg > summary { padding: 5px 9px; background: #f1f5f9; font-weight: 700; color: #334155; cursor: pointer; }
.sc-bm-cnt { font-weight: 400; color: #64748b; font-size: 11px; margin-left: 4px; }
.sc-bm-i {
  display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid #f1f5f9;
  background: #fff; padding: 6px 9px; cursor: pointer; line-height: 1.5; font-size: 12px;
}
.sc-bm-i:hover { background: #f8fafc; }
.sc-bm-i.cur { background: #eff6ff; box-shadow: inset 3px 0 0 #1473E6; }
.sc-bm-n { font-weight: 700; color: #1f2937; margin-right: 5px; font-variant-numeric: tabular-nums; }
.sc-bm-t { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-right: 5px; }
.sc-t-add { background: #dcfce7; color: #14532d; }
.sc-t-del { background: #fee2e2; color: #7f1d1d; }
.sc-t-modify { background: #fef3c7; color: #78350f; }
.sc-t-move { background: #e0e7ff; color: #312e81; }
.sc-bm-sig { font-size: 10px; font-weight: 700; color: #6b7280; }
.sc-bm-i.sig-high .sc-bm-sig { color: #b91c1c; }
.sc-bm-i.sig-medium .sc-bm-sig { color: #c2410c; }
.sc-bm-i.sig-high { background: #fff5f5; }
.sc-bm-x { display: block; color: #475569; word-break: break-word; }
.sc-bm-ai { display: block; margin-top: 2px; color: #5b21b6; font-size: 11px; }

#sc-report { max-height: 42vh; overflow: auto; background: #fff; border-top: 2px solid #7c3aed; padding: 10px 14px; font-size: 13px; }
#sc-report[hidden] { display: none !important; }
.sc-report-in h4 { margin: 0 0 6px; font-size: 14px; }
.sc-report-in h4 small { font-weight: 400; color: #6b7280; margin-left: 6px; }
.sc-sum { margin: 0 0 10px; line-height: 1.7; color: #374151; }
.sc-unchanged { margin: 0 0 8px; color: #475569; font-size: 12px; }
.sc-unmatched { margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: #fffbeb; border: 1px dashed #d97706; }
.sc-unmatched small { color: #92400e; font-weight: 400; }
.sc-um { margin-top: 5px; padding: 5px 7px; background: #fff; border-radius: 6px; line-height: 1.6; }
.sc-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #e2e8f0; color: #334155; margin-right: 6px; }
.sc-what { font-weight: 600; color: #1f2937; }
.sc-old { color: #7f1d1d; font-size: 12px; }
.sc-new { color: #14532d; font-size: 12px; }
.sc-goto { margin: 4px 6px 0 0; padding: 2px 8px; font-size: 11px; border-radius: 999px; border: 1px solid #7c3aed; background: #f5f3ff; color: #5b21b6; cursor: pointer; font-weight: 600; }
.sc-risk { margin-top: 8px; padding: 7px 9px; border-radius: 7px; background: #fef2f2; color: #7f1d1d; font-weight: 600; }
.sc-loading { padding: 14px; color: #6b7280; }
.sc-err { padding: 10px; background: #fee2e2; color: #7f1d1d; border-radius: 7px; font-weight: 600; }
.sc-raw { white-space: pre-wrap; font-size: 11px; color: #475569; max-height: 30vh; overflow: auto; }

/* 좁은 화면: 좌우 → 위아래 분할 (모바일에서도 "동시에 두 개"를 유지) */
@media (max-width: 820px) {
  #sc-body { grid-template-columns: 1fr !important; grid-template-rows: 1fr 6px 1fr auto; }
  #sc-divider { cursor: row-resize; }
  #sc-bm { border-left: 0; border-top: 1px solid #d1d5db; max-height: 34vh; }
  #sc-bar { font-size: 11px; padding: 5px 8px; }
  #sc-bar .sc-doc { max-width: 120px; }
}

/* ============================================================
   [요청 반영] ezPDF/Foxit 스타일 리본 — 컬러 아이콘 + 그룹 라벨 + 세로 구분선
   근거: 사용자 제공 참조 이미지 실측(understand_images)
     - 리본 본문 흰색, 높이 ~90px
     - 세로 그룹 구분선 #E0E0E0
     - 컬러 2D 아이콘 24~32px (빨강/파랑/초록/노랑 계열)
     - 버튼 라벨 11px 진회색, 아이콘 아래 중앙 정렬, 2줄까지 줄바꿈
     - 그룹 라벨 9px 연회색, 각 그룹 하단 중앙
   구현: buildRibbon() 이 .rb-grp > .rb-grp-btns > .ribbon-btn.rb-big 구조와
         .rb-grp-name 을 생성하고, 아이콘 색은 --rb-c 커스텀 속성으로 주입한다.
   ============================================================ */
#ribbon-toolbars { min-height: 92px; background: #ffffff; }
.ribbon-toolbar-row { min-height: 92px; align-items: stretch; gap: 0; padding: 0 8px; }

.ribbon-toolbar-row > .ctx-title {
  align-self: center; border-right: 1px solid #E0E0E0;
}

/* 그룹: 버튼 줄 + 하단 그룹 라벨 (세로 스택) */
.ribbon-group.rb-grp {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0; padding: 5px 10px 2px;
  border-right: 1px solid #E0E0E0;
}
.ribbon-group.rb-grp:last-of-type { border-right: none; }
.rb-grp-btns { display: inline-flex; align-items: flex-start; gap: 2px; flex: 1 1 auto; }
.rb-grp-name {
  display: block; width: 100%; text-align: center;
  font-size: 9px; line-height: 12px; color: #9aa3ad; letter-spacing: -0.2px;
  padding-top: 1px; white-space: nowrap;
}

/* 큰 버튼: 아이콘 위 / 라벨 아래 (ezPDF 형태) */
.ribbon-btn.rb-big {
  height: auto; min-width: 52px; max-width: 78px;
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; padding: 3px 4px 2px;
  white-space: normal; border-radius: 4px;
}
.ribbon-btn.rb-big .rb-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; color: var(--rb-c, #1565C0);
}
.ribbon-btn.rb-big .rb-ico svg {
  width: 26px; height: 26px; stroke-width: 1.9;
  color: inherit; stroke: currentColor;
}
.ribbon-btn.rb-big .rb-lb {
  font-size: 11px; line-height: 12.5px; color: #3c4450;
  text-align: center; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ribbon-btn.rb-big:hover { background: #eaf2fd; border-color: #c6dcf7; }
.ribbon-btn.rb-big.active { background: #dbeafe; border-color: #93c5fd; }
.ribbon-btn.rb-big.active .rb-lb { color: #12467f; font-weight: 600; }

@media (max-width: 768px) {
  #ribbon-toolbars, .ribbon-toolbar-row { min-height: 88px; }
  .ribbon-group.rb-grp { padding: 4px 7px 2px; }
  .ribbon-btn.rb-big { min-width: 48px; max-width: 68px; min-height: 0; }
  .ribbon-btn.rb-big .rb-ico { width: 26px; height: 26px; }
  .ribbon-btn.rb-big .rb-ico svg { width: 23px; height: 23px; }
}
@media (max-width: 380px) {
  /* 초소형에서도 ezPDF 아이덴티티(라벨)를 유지 — 폭은 축소로 확보 */
  .ribbon-btn.rb-big .rb-lb { display: -webkit-box; font-size: 10px; }
  .ribbon-btn.rb-big { min-width: 44px; max-width: 60px; padding: 3px 2px 2px; }
}

/* ============================================================
   분할 비교 — 동시 제어 상태 배지 + 하이브리드 변경 소스 배지
   ============================================================ */
.sc-state {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
  background: #e5e7eb; color: #6b7280; white-space: nowrap;
}
.sc-state.on { background: #dcfce7; color: #15803d; }

/* 변경 목록의 "무엇으로 찾았는가" 배지 — 근거를 사용자에게 드러낸다 */
.sc-bm-src {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  margin-left: 3px; white-space: nowrap; flex: 0 0 auto;
}
.sc-bm-src.src-vector { background: #ffedd5; color: #c2410c; }   /* 도형 */
.sc-bm-src.src-pixel  { background: #e0f2fe; color: #0369a1; }   /* 그림영역 */
.sc-bm-src.src-ocr    { background: #dcfce7; color: #15803d; }   /* OCR글자 */

/* 페이지 내 위치 표기 — 같은 문구가 여러 곳에서 바뀐 경우를 구분한다 */
.sc-bm-where {
  font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px;
  margin-left: 3px; white-space: nowrap; flex: 0 0 auto;
  background: #f1f5f9; color: #475569;
}
/* 문자 인식 신뢰도 / 확인 필요 — 신뢰도 0% 결과를 사실처럼 보여주지 않기 위함 */
.sc-bm-conf {
  font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px;
  margin-left: 3px; white-space: nowrap; flex: 0 0 auto;
  background: #eef2ff; color: #4338ca;
}
.sc-bm-warn {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  margin-left: 3px; white-space: nowrap; flex: 0 0 auto;
  background: #fef3c7; color: #92400e;
}
.sc-bm-i.need-review { border-left: 3px solid #f59e0b; }

/* ═══════════════ 전체 메뉴 아이콘 패널 (allMenus.js) ═══════════════
   요구: "모든 메뉴를 그룹 안에 숨기지 말고 아이콘화해서 나오게 / 다 보이게" */
.am-wrap { position: fixed; inset: 0; z-index: 9500; background: #fff; display: flex; flex-direction: column; }
.am-wrap.hidden { display: none; }
.am-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid #d8dee9; background: linear-gradient(#fbfcfe, #f1f4f9); flex: 0 0 auto; }
.am-title { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #1f2937; }
.am-title i { width: 18px; height: 18px; }
.am-q { flex: 1 1 320px; max-width: 520px; padding: 7px 11px; border: 1px solid #c7d0dd;
  border-radius: 7px; font-size: 13px; outline: none; }
.am-q:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.am-count { font-size: 12px; color: #64748b; white-space: nowrap; }
.am-sizes { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.am-sz { border: 0; background: #fff; padding: 4px 9px; font-size: 12px; cursor: pointer; color: #475569; }
.am-sz + .am-sz { border-left: 1px solid #e2e8f0; }
.am-sz-on { background: #2563eb; color: #fff; }
.am-close { border: 1px solid #cbd5e1; background: #fff; border-radius: 7px; padding: 6px 11px;
  font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: #334155; }
.am-close:hover { background: #f1f5f9; }
.am-close i { width: 15px; height: 15px; }
.am-body { flex: 1 1 auto; overflow: auto; padding: 12px 14px 40px; }
.am-sec { margin-bottom: 18px; }
.am-sec-h { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: var(--am-c, #475569); text-transform: none; display: flex; align-items: center; gap: 7px; }
.am-sec-h::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--am-c, #475569); }
.am-sec-h span { font-weight: 500; color: #94a3b8; font-size: 11px; }
.am-grid { display: grid; gap: 6px; }
.am-s .am-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
.am-m .am-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.am-l .am-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
.am-i { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px;
  border: 1px solid #e6ebf2; border-radius: 9px; background: #fff; cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s; text-align: center; }
.am-i:hover { background: #f8fbff; border-color: #93c5fd; transform: translateY(-1px); }
.am-i:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.am-i.am-off { opacity: .45; cursor: not-allowed; }
.am-ic { display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: color-mix(in srgb, var(--am-c) 12%, #fff);
  color: var(--am-c); flex: 0 0 auto; }
.am-s .am-ic { width: 28px; height: 28px; } .am-s .am-ic i { width: 16px; height: 16px; }
.am-m .am-ic { width: 34px; height: 34px; } .am-m .am-ic i { width: 19px; height: 19px; }
.am-l .am-ic { width: 42px; height: 42px; } .am-l .am-ic i { width: 24px; height: 24px; }
.am-ltr { font-size: 15px; font-weight: 700; }
.am-lb { font-size: 11px; line-height: 1.25; color: #334155; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-l .am-lb { font-size: 12px; }
.am-sc { font-size: 9.5px; color: #94a3b8; font-family: ui-monospace, monospace; }
.tab-allmenu { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 8px; }
.tab-allmenu i { width: 15px; height: 15px; }

/* ── 영역 그림글자→글자 (vectorTextUI.js) ───────────────────────────── */
/* 영역 선택 오버레이: 화면 전체를 덮고 드래그를 받는다 */
.vt-pick { position: fixed; inset: 0; z-index: 9200; cursor: crosshair;
  background: rgba(15, 23, 42, 0.14); }
.vt-pick-hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: #0f172a; color: #fff; font-size: 12.5px; line-height: 1.5;
  padding: 8px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.28);
  max-width: 90vw; text-align: center; pointer-events: none; }
.vt-pick-box { position: absolute; border: 2px dashed #2563eb;
  background: rgba(37, 99, 235, .12); pointer-events: none; border-radius: 2px; }

/* 결과 카드 */
.vt-card { position: fixed; right: 18px; bottom: 18px; z-index: 9300;
  width: 380px; max-width: calc(100vw - 36px); max-height: 78vh;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dbe2ea; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .22); overflow: hidden; }
.vt-card-bar { display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
  font-size: 13px; font-weight: 700; color: #0f172a; }
.vt-card-bar .vt-x { margin-left: auto; border: 0; background: transparent;
  cursor: pointer; font-size: 16px; line-height: 1; color: #64748b; padding: 2px 6px; border-radius: 5px; }
.vt-card-bar .vt-x:hover { background: #e2e8f0; color: #0f172a; }
.vt-card-body { padding: 10px 12px; overflow: auto; font-size: 12.5px; color: #1e293b; }
.vt-card-foot { display: flex; gap: 6px; padding: 9px 12px;
  border-top: 1px solid #e2e8f0; background: #fafbfc; }
.vt-btn { flex: 1; padding: 7px 10px; font-size: 12.5px; font-weight: 600;
  border: 1px solid #cbd5e1; background: #fff; color: #334155;
  border-radius: 7px; cursor: pointer; }
.vt-btn:hover:not(:disabled) { background: #f1f5f9; }
.vt-btn:disabled { opacity: .45; cursor: not-allowed; }
.vt-btn-go { background: #2563eb; border-color: #2563eb; color: #fff; }
.vt-btn-go:hover:not(:disabled) { background: #1d4ed8; }

/* 항목 행 */
.vt-row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #eef2f6; }
.vt-row:last-child { border-bottom: 0; }
.vt-k { flex: 0 0 92px; color: #64748b; font-size: 11.5px; }
.vt-v { flex: 1; min-width: 0; word-break: break-word; }
.vt-row-ok .vt-v { color: #15803d; font-weight: 600; }
.vt-row-bad .vt-v { color: #b91c1c; font-weight: 600; }
.vt-txt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 5px; padding: 5px 7px; white-space: pre-wrap; word-break: break-all; }
.vt-note { color: #475569; font-size: 11.5px; line-height: 1.55; }
.vt-warn { color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 6px; padding: 7px 9px; font-size: 12px; line-height: 1.55; margin: 6px 0; }
.vt-prev { display: block; max-width: 100%; margin: 6px 0 2px;
  border: 1px solid #e2e8f0; border-radius: 5px; background: #fff; image-rendering: pixelated; }
.vt-load { color: #475569; font-size: 12.5px; padding: 6px 0; }

/* ── 그림 보정·자르기 패널 (photoPanel.js) ──────────────────────────── */
.pp-card { position: fixed; left: 18px; bottom: 18px; z-index: 9250;
  width: 330px; max-width: calc(100vw - 36px); max-height: 76vh;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #dbe2ea; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15,23,42,.22); overflow: hidden; }
.pp-bar { display: flex; align-items: center; padding: 9px 12px;
  background: #eef2f7; border-bottom: 1px solid #e2e8f0;
  font-size: 13px; font-weight: 700; color: #0f172a; }
.pp-x { margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; color: #64748b; padding: 2px 6px; border-radius: 5px; }
.pp-x:hover { background: #dbe2ea; color: #0f172a; }
.pp-sel { padding: 6px 12px; font-size: 11.5px; color: #475569;
  background: #f8fafc; border-bottom: 1px solid #eef2f6; }
.pp-body { padding: 8px 12px; overflow: auto; }
.pp-row { display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px dashed #eef2f6; }
.pp-row:last-child { border-bottom: 0; }
.pp-k { flex: 0 0 66px; font-size: 11.5px; color: #64748b; }
.pp-v { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.pp-b { padding: 4px 9px; font-size: 11.5px; font-weight: 600;
  border: 1px solid #cbd5e1; background: #fff; color: #334155;
  border-radius: 6px; cursor: pointer; white-space: nowrap; }
.pp-b:hover { background: #f1f5f9; border-color: #94a3b8; }
.pp-b.pp-warn { border-color: #fca5a5; color: #b91c1c; }
.pp-b.pp-warn:hover { background: #fef2f2; }
.pp-r { flex: 1; min-width: 90px; accent-color: #2563eb; }
.pp-v > span:last-child { font-size: 11px; color: #475569;
  font-family: ui-monospace, monospace; min-width: 34px; text-align: right; }
.pp-status { padding: 8px 12px; font-size: 11.5px; line-height: 1.5;
  color: #15803d; background: #f0fdf4; border-top: 1px solid #dcfce7; }
.pp-status.pp-bad { color: #b91c1c; background: #fef2f2; border-top-color: #fee2e2; }

/* ── 스탬프 라이브러리 패널 (stampUI.js) ────────────────────────────── */
.sp-card { position: fixed; right: 18px; top: 96px; z-index: 9260;
  width: 340px; max-width: calc(100vw - 36px); max-height: 74vh;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #dbe2ea; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15,23,42,.22); overflow: hidden; }
.sp-bar { display: flex; align-items: center; padding: 9px 12px;
  background: #eef2f7; border-bottom: 1px solid #e2e8f0;
  font-size: 13px; font-weight: 700; color: #0f172a; }
.sp-x { margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; color: #64748b; padding: 2px 6px; border-radius: 5px; }
.sp-x:hover { background: #dbe2ea; color: #0f172a; }
.sp-body { padding: 8px 12px; overflow: auto; }
.sp-sec { font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: none; margin: 9px 0 5px; letter-spacing: .01em; }
.sp-sec:first-child { margin-top: 0; }
.sp-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.sp-b { padding: 5px 10px; font-size: 11.5px; font-weight: 700;
  border: 1.5px solid #cbd5e1; background: #fff; color: #334155;
  border-radius: 6px; cursor: pointer; white-space: nowrap; }
.sp-b:hover { background: #f8fafc; }
.sp-b.sp-go { border-color: #2563eb; background: #2563eb; color: #fff; }
.sp-b.sp-go:hover { background: #1d4ed8; }
.sp-inline { display: flex; align-items: center; gap: 5px; }
.sp-i { flex: 1; min-width: 0; padding: 5px 8px; font-size: 12px;
  border: 1px solid #cbd5e1; border-radius: 6px; }
.sp-c { width: 30px; height: 28px; padding: 0; border: 1px solid #cbd5e1;
  border-radius: 6px; background: #fff; cursor: pointer; }
.sp-f { flex: 1; min-width: 0; font-size: 11px; }
.sp-note { font-size: 11px; line-height: 1.55; color: #64748b; margin: 3px 0 6px; }
.sp-out { margin-top: 4px; }
.sp-thumb { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; cursor: pointer; }
.sp-thumb:hover { border-color: #2563eb; }
.sp-thumb img { max-width: 66px; max-height: 44px; display: block; }
.sp-thumb span { font-size: 9.5px; color: #94a3b8; font-family: ui-monospace, monospace; }
.sp-status { padding: 8px 12px; font-size: 11.5px; line-height: 1.5;
  color: #15803d; background: #f0fdf4; border-top: 1px solid #dcfce7; }
.sp-status.sp-bad { color: #b91c1c; background: #fef2f2; border-top-color: #fee2e2; }

/* ── 구름 수정 모드 (cloudEdit.js) ─────────────────────────────────── */
svg.sc-cloud.ce-on g.sc-cl { cursor: move; }
svg.sc-cloud.ce-on g.sc-cl path { stroke-width: 2.2; }
.ce-h { fill: #fff; stroke: #2563eb; stroke-width: 1.4; cursor: nwse-resize; }
.ce-h[data-dir="n"], .ce-h[data-dir="s"] { cursor: ns-resize; }
.ce-h[data-dir="e"], .ce-h[data-dir="w"] { cursor: ew-resize; }
.ce-h[data-dir="ne"], .ce-h[data-dir="sw"] { cursor: nesw-resize; }
.ce-h:hover { fill: #2563eb; }
.ce-del circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; cursor: pointer; }
.ce-del text { fill: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.ce-del:hover circle { fill: #b91c1c; }
.ce-badge { position: fixed; left: 50%; top: 74px; transform: translateX(-50%);
  z-index: 9400; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 92vw; padding: 8px 15px; border-radius: 9px;
  background: #0f172a; color: #fff; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.ce-badge b { color: #93c5fd; }
.ce-badge .ce-tip { color: #cbd5e1; font-size: 11.5px; }
.ce-badge .ce-msg { color: #86efac; font-family: ui-monospace, monospace; font-size: 11.5px; }
.sc-btn.sc-btn-on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ── CAD 작도 패널 (cadPanel.js) ─────────────────────────────────────
   PDF 편집기 위에 CAD 명령 팔레트를 얹는다. 도구가 60여 개라 photoPanel 의
   행(row) 배치로는 세로가 감당되지 않아, 묶음별 격자(wrap) 배치를 쓴다. */
.cad-card { position: fixed; right: 18px; bottom: 18px; z-index: 9260;
  width: 392px; max-width: calc(100vw - 36px); max-height: 82vh;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #dbe2ea; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15,23,42,.24); overflow: hidden; }
.cad-bar { display: flex; align-items: center; padding: 9px 12px;
  background: #0f172a; border-bottom: 1px solid #1e293b;
  font-size: 13px; font-weight: 700; color: #f8fafc; }
.cad-x { margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 17px; line-height: 1; color: #94a3b8; padding: 2px 6px; border-radius: 5px; }
.cad-x:hover { background: #1e293b; color: #f8fafc; }
.cad-head { padding: 6px 12px; font-size: 11.5px; color: #334155;
  background: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-family: monospace; }
.cad-body { padding: 8px 10px; overflow: auto; }
.cad-g { margin-bottom: 9px; }
.cad-gt { font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.cad-gt b { color: #0ea5e9; }
.cad-gb { display: flex; flex-wrap: wrap; gap: 4px; }
.cad-t { padding: 4px 8px; font-size: 11px; font-weight: 600; font-family: monospace;
  border: 1px solid #cbd5e1; background: #fff; color: #334155;
  border-radius: 5px; cursor: pointer; white-space: nowrap; }
.cad-t:hover { background: #f1f5f9; border-color: #64748b; }
.cad-t.on { background: #0ea5e9; border-color: #0284c7; color: #fff; }
.cad-t.cad-act { font-family: inherit; border-color: #94a3b8; background: #f8fafc; }
.cad-t.cad-warn { font-family: inherit; border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }
.cad-set { align-items: center; gap: 8px 12px; }
.cad-set label { display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: #475569; }
.cad-set input[type=number], .cad-set input[type=text] {
  border: 1px solid #cbd5e1; border-radius: 4px; padding: 2px 5px; font-size: 11.5px; }
.cad-set input[type=color] { width: 30px; height: 22px; padding: 0;
  border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; cursor: pointer; }
.cad-cmdrow { display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; background: #0f172a; border-top: 1px solid #1e293b; }
.cad-cp { font-size: 11.5px; font-weight: 700; color: #38bdf8; font-family: monospace; }
#cad-cmd { flex: 1; min-width: 0; border: 1px solid #334155; background: #1e293b;
  color: #e2e8f0; border-radius: 5px; padding: 4px 8px;
  font-size: 12px; font-family: monospace; }
#cad-cmd:focus { outline: none; border-color: #0ea5e9; }
.cad-status { padding: 6px 12px; font-size: 11.5px; color: #475569;
  background: #f8fafc; border-top: 1px solid #eef2f6; line-height: 1.5; }
.cad-status.cad-bad { color: #b91c1c; background: #fef2f2; }

/* ── 엑셀식 머리글/바닥글 구역 패널 (headerFooterPanel.js) ──────────── */
.hf-card { position: fixed; right: 20px; top: 80px; z-index: 9270;
  width: 440px; max-width: calc(100vw - 40px); max-height: 86vh;
  display: flex; flex-direction: column; background: #ffffff;
  border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden; font-family: system-ui, -apple-system, 'Pretendard', sans-serif; }

.hf-bar { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #edf2f7; }
.hf-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.hf-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.hf-sel { font-size: 11px; color: #64748b; }
.hf-x { border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: #94a3b8; padding: 4px 8px; border-radius: 6px; }
.hf-x:hover { background: #e2e8f0; color: #0f172a; }

/* 상단 탭 */
.hf-tabs { display: flex; background: #f1f5f9; padding: 4px 6px; gap: 4px; border-bottom: 1px solid #e2e8f0; }
.hf-tab { flex: 1; padding: 6px 0; font-size: 12px; font-weight: 600; color: #64748b;
  border: 0; background: transparent; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.hf-tab:hover { color: #0f172a; background: rgba(255,255,255,0.6); }
.hf-tab.active { background: #ffffff; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.hf-body { padding: 14px 16px; overflow-y: auto; flex: 1; min-height: 280px; }
.hf-tab-page { display: none; }
.hf-tab-page.active { display: block; animation: hfFadeIn 0.2s ease; }
@keyframes hfFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

.hf-sec-hd { display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.hf-hint { font-size: 11px; font-weight: 400; color: #94a3b8; }
.hf-cur-badge { font-size: 11px; font-weight: 400; color: #64748b; }
.hf-cur-badge b { color: #2563eb; }

/* 머리글/바닥글 구역 3칸 */
.hf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hf-zone { border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px;
  background: #f8fafc; display: flex; flex-direction: column; gap: 4px; transition: all 0.15s; }
.hf-zone:hover { border-color: #cbd5e1; background: #f1f5f9; }
.hf-zone.on { border-color: #2563eb; background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.hf-zt { font-size: 11px; color: #475569; font-weight: 600; text-align: center; }
.hf-in { width: 100%; box-sizing: border-box; resize: vertical; min-height: 48px;
  font-size: 11px; line-height: 1.4; padding: 5px; color: #0f172a;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hf-in:focus { outline: 0; border-color: #2563eb; background: #ffffff; }
.hf-zb { display: flex; gap: 4px; }
.hf-zb .hf-b { flex: 1; padding: 3px 0; font-size: 10.5px; text-align: center; }

/* 빠른 넣기 칩 */
.hf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.hf-chip { padding: 4px 9px; font-size: 11px; font-weight: 600;
  border: 1px solid #e2e8f0; background: #f8fafc; color: #334155;
  border-radius: 999px; cursor: pointer; transition: all 0.12s; }
.hf-chip:hover { background: #edf2f7; border-color: #cbd5e1; color: #0f172a; }
.hf-chip.hf-hot { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }
.hf-chip.hf-hot:hover { background: #dbeafe; }

/* 서식 및 설정 카드 */
.hf-box-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; }
.hf-row { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid #eef2f6; font-size: 12px; }
.hf-row:last-child { border-bottom: 0; }
.hf-k { flex: 0 0 70px; font-size: 11.5px; font-weight: 600; color: #64748b; }
.hf-v { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: #334155; }
.hf-sub-label { font-size: 11px; color: #64748b; margin-left: 2px; }

/* 공통 컨트롤 버튼 & 인풋 */
.hf-b { padding: 5px 11px; font-size: 11.5px; font-weight: 600;
  border: 1px solid #cbd5e1; background: #ffffff; color: #334155;
  border-radius: 6px; cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.hf-b:hover { background: #f1f5f9; border-color: #94a3b8; }
.hf-b.hf-accent { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }
.hf-b.hf-accent:hover { background: #dbeafe; }
.hf-b.hf-warn { border-color: #fecaca; color: #b91c1c; background: #ffffff; }
.hf-b.hf-warn:hover { background: #fef2f2; }
.hf-b.hf-go { border-color: #2563eb; background: #2563eb; color: #ffffff; }
.hf-b.hf-go:hover { background: #1d4ed8; }

.hf-n { width: 52px; padding: 4px 6px; font-size: 11.5px; color: #0f172a;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; text-align: center; }
.hf-t { flex: 1; min-width: 120px; padding: 4px 8px; font-size: 11.5px;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; }
.hf-s { padding: 4px 8px; font-size: 11.5px; color: #0f172a;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; }
.hf-c { width: 28px; height: 24px; padding: 0; border: 1px solid #cbd5e1;
  border-radius: 4px; background: #ffffff; cursor: pointer; vertical-align: middle; }
.hf-cb { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #475569; cursor: pointer; }
.hf-r { flex: 1; min-width: 80px; accent-color: #2563eb; cursor: pointer; }
.hf-eg { font-family: ui-monospace, monospace; color: #1d4ed8; font-size: 11px; margin-left: 4px; }

/* 하단 푸터 바 */
.hf-footer { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px; }
.hf-status { font-size: 11px; line-height: 1.4; color: #047857; background: #ecfdf5;
  border: 1px solid #a7f3d0; border-radius: 6px; padding: 5px 8px; }
.hf-status.hf-bad { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.hf-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }