@charset "utf-8";

/* ============================================================
   components.css — 공통 컴포넌트
   전제: reset.css(유틸) → tokens.css → components.css 순서로 로드
   reset.css에 있는 유틸(.flex/.gap8/.fs16 …)은 마크업에서 직접 쓰고,
   여기에는 reset.css에 없는 것만 정의합니다.
   ============================================================ */

/* ------------------------------------------------------------
   1. Icon — CSS mask 방식
   SVG를 mask로 써서 색을 currentColor로 제어합니다.
   → 부모 버튼의 color만 바꾸면 hover/selected 색이 따라옵니다.
   ------------------------------------------------------------ */
.ico {
  display: inline-block;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / 100% 100%;
  mask: var(--ico) no-repeat center / 100% 100%;
}
.ico.ico_s {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
}

.ico_file {
  --ico: url(../images/icon_file.svg);
}
.ico_left {
  --ico: url(../images/icon_left.svg);
}
.ico_right {
  --ico: url(../images/icon_right.svg);
}
.ico_plus {
  --ico: url(../images/icon_plus.svg);
}
.ico_minus {
  --ico: url(../images/icon_minus.svg);
}
.ico_more {
  --ico: url(../images/icon_more.svg);
}
.ico_see {
  --ico: url(../images/icon_see.svg);
}
.ico_masking {
  --ico: url(../images/icon_masking.svg);
}
.ico_masking_close {
  --ico: url(../images/icon_masking_close.svg);
}
.ico_90left {
  --ico: url(../images/icon_90left.svg);
}
.ico_90right {
  --ico: url(../images/icon_90right.svg);
}
.ico_text_zoom {
  --ico: url(../images/icon_text_zoom.svg);
}
.ico_capture_pic {
  --ico: url(../images/icon_capture_pic.svg);
}
.ico_fit_wid {
  --ico: url(../images/icon_fit_wid.svg);
}
.ico_fit_hei {
  --ico: url(../images/icon_fit_hei.svg);
}
.ico_2page {
  --ico: url(../images/icon_2page.svg);
}
.ico_caret_down {
  --ico: url(../images/icon_caret_down.svg);
}
.ico_hide_see {
  --ico: url(../images/icon_hide_see.svg);
}
.ico_align_left {
  --ico: url(../images/icon_align_left.svg);
}
.ico_align_center {
  --ico: url(../images/icon_align_center.svg);
}
.ico_align_right {
  --ico: url(../images/icon_align_right.svg);
}
.ico_up {
  --ico: url(../images/icon_up.svg);
}
.ico_down {
  --ico: url(../images/icon_down.svg);
}
/* 삼각형 4방향 — panel_arrow / select */
.ico_triangle_down {
  --ico: url(../images/icon_triangle_down.svg);
}
.ico_triangle_up {
  --ico: url(../images/icon_triangle_up.svg);
}
.ico_triangle_left {
  --ico: url(../images/icon_triangle_left.svg);
}
.ico_triangle_right {
  --ico: url(../images/icon_triangle_right.svg);
}
/* 반응형에서 병합되는 caret 버튼용 */
.ico_view {
  --ico: url(../images/icon_view.svg);
}
.ico_rotate {
  --ico: url(../images/icon_rotate.svg);
}
/* sidebar_left */
.ico_viewthumbnail {
  --ico: url(../images/icon_viewthumbnail.svg);
}
.ico_list {
  --ico: url(../images/icon_list.svg);
}
.ico_bookmark {
  --ico: url(../images/icon_bookmark.svg);
}
.ico_trash {
  --ico: url(../images/icon_trash.svg);
}
.ico_copy {
  --ico: url(../images/icon_copy.svg);
}
/* sidebar_right — 주석 툴바 */
.ico_shape {
  --ico: url(../images/icon_shape.svg);
}
.ico_pen_color {
  --ico: url(../images/icon_pen_color.svg);
}
/* 도형 하위 — 사각형은 icon_max */
.ico_max {
  --ico: url(../images/icon_max.svg);
}
.ico_circle {
  --ico: url(../images/icon_circle.svg);
}
.ico_polygon {
  --ico: url(../images/icon_polygon.svg);
}
.ico_line {
  --ico: url(../images/icon_line.svg);
}
.ico_line_arrow {
  --ico: url(../images/icon_line_arrow.svg);
}
/* 마스킹 하위 */
.ico_square_fill {
  --ico: url(../images/icon_square_fill.svg);
}
.ico_circle_fill {
  --ico: url(../images/icon_circle_fill.svg);
}
/* 컬러 반영 레이어 — 본체와 좌표가 동일한 겹침용 아이콘 */
.ico_pen_color_line {
  --ico: url(../images/icon_pen_color_line.svg);
}
.ico_highlight_line {
  --ico: url(../images/icon_highlight_line.svg);
}
.ico_polygon_fill {
  --ico: url(../images/icon_polygon_fill.svg);
}

/* .ico_stack — 아이콘 겹치기. DOM 순서가 곧 z 순서입니다.
     펜/형광펜 : 본체 → 색상 라인(위)
     도형      : 내부 채움 → 테두리(위)
   색은 팔레트에서 고를 때 app.js가 :root에 --tool-stroke/--tool-fill로 씁니다. */
.ico_stack {
  position: relative;
  display: inline-flex;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
}
.ico_stack > .ico {
  position: absolute;
  inset: 0;
}
[data-tool-tint="stroke"] {
  color: var(--tool-stroke, var(--color-icon-primary));
}
[data-tool-tint="fill"] {
  color: var(--tool-fill, var(--color-bg-white));
}
/* 선/화살표처럼 내부가 없는 도형은 채움 레이어를 숨깁니다 */
.ico_stack > .ico[hidden] {
  display: none;
}
/* 기타 주석 하위 */
.ico_check {
  --ico: url(../images/icon_check.svg);
}
.ico_watermark {
  --ico: url(../images/icon_watermark.svg);
}
.ico_highlight {
  --ico: url(../images/icon_highlight.svg);
}
.ico_erase {
  --ico: url(../images/icon_erase.svg);
}
.ico_text {
  --ico: url(../images/icon_text.svg);
}
.ico_paint {
  --ico: url(../images/icon_paint.svg);
}
.ico_stamp {
  --ico: url(../images/icon_stamp.svg);
}
.ico_memo {
  --ico: url(../images/icon_memo.svg);
}
.ico_chatbot {
  --ico: url(../images/icon_chatbot.svg);
}
/* 16px */
.ico_arrow_left {
  --ico: url(../images/icon_arrow_left.svg);
}
.ico_arrow_right {
  --ico: url(../images/icon_arrow_right.svg);
}
.ico_caret_left {
  --ico: url(../images/icon_caret_left.svg);
}
.ico_caret_right {
  --ico: url(../images/icon_caret_right.svg);
}
.ico_ai {
  --ico: url(../images/icon_ai.svg);
}
/* 체크박스 안의 체크 */
.ico_check16 {
  --ico: url(../images/icon_check16.svg);
}
/* chatbot */
.ico_close {
  --ico: url(../images/icon_close.svg);
}
.ico_send {
  --ico: url(../images/icon_send.svg);
}

/* ------------------------------------------------------------
   btn_iconOnly 
   size  : large 46 / medium 40(기본) / small 32 / xsmall 20
   ------------------------------------------------------------ */
.btn_ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--btn-size-medium);
  height: var(--btn-size-medium);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--color-icon-primary);
  cursor: pointer;
  overflow: hidden;
}
.btn_ico.size_large {
  width: var(--btn-size-large);
  height: var(--btn-size-large);
}
.btn_ico.size_small {
  width: var(--btn-size-small);
  height: var(--btn-size-small);
}
.btn_ico.size_xsmall {
  width: var(--btn-size-xsmall);
  height: var(--btn-size-xsmall);
}

.btn_ico:hover {
  background: var(--color-btn-hover);
}
.btn_ico:active,
.btn_ico.selected {
  background: var(--color-btn-pressed);
}

/* 활성 강조(포인트색 #7c553b + 흰 아이콘)
   · 좌측 썸네일 보기/북마크 토글의 선택 버튼
   · 우측 컬러/폰트 속성 버튼 — 팝업(prop_pop) 열렸을 때 */
.thumb_btn_wrap .btn_ico.selected,
.sidebar_right [data-dropdown="dd_prop"][aria-expanded="true"] {
  background: var(--point);
  color: var(--color-bg-white);
}

/* disabled — 배경은 그대로, 아이콘만 흐려집니다 */
.btn_ico:disabled {
  background: transparent;
  color: var(--color-icon-disabled);
  cursor: default;
}

/* icon + caret (하위 메뉴가 있는 버튼) — 46x46
   caret 오른쪽 = top_gnb / caret 왼쪽 = sidebar_right(주석 툴바) */
.btn_ico.has_caret {
  gap: 0.2rem;
  justify-content: center;
  width: var(--btn-size-large);
  height: var(--btn-size-large);
  padding: 1.2rem 0.2rem 1.2rem 0.8rem;
  border-radius: var(--radius-m);
}
.btn_ico.has_caret_left {
  gap: 0.2rem;
  justify-content: center;
  width: var(--btn-size-large);
  height: var(--btn-size-large);
  padding: 1.2rem 0.8rem 1.2rem 0.2rem;
  border-radius: var(--radius-m);
}

/* ON/OFF 상태 라벨이 있는 드롭다운 버튼 (좁은 화면 마스킹/주석)
   아이콘+caret 을 위에, ON/OFF(12px) 를 아래에 세로로 쌓습니다. */
.btn_ico.btn_onoff_trigger {
  flex-direction: column;
  gap: 0.2rem;
  width: auto;
  min-width: var(--btn-size-large);
  height: auto;
  padding: 0.4rem 0.6rem;
}
.btn_onoff_trigger .btn_onoff_row {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.btn_onoff_trigger .btn_onoff_state {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}

.panel_arrow {
  display: inline-flex;
  position: absolute;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 5rem;
  border: 0.1rem solid var(--color-panel-border);
  border-radius: 0 0.8rem 0.8rem 0;
  background: var(--color-bg-gnb);
  color: var(--color-icon-primary);
  cursor: pointer;
}

/* ------------------------------------------------------------
   thumb — 썸네일 아이템 (sidebar_left)
   ------------------------------------------------------------ */
.thumb {
  flex: none;
  width: 10rem;
}
.thumb_box {
  position: relative;
  width: 10rem;
  height: 14.14rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: 0.4rem;
  background: var(--color-bg-white);
  cursor: pointer;
}
/* 현재 페이지  */
.thumb.act .thumb_box {
  border-color: var(--point);
  background: var(--color-thumb-selected-bg);
}
.thumb.act .thumb_label {
  color: var(--color-text-strong);
}
/* hover 시 표시  */
.thumb:not(.act) .thumb_box:hover {
  border-color: var(--color-line);
  background: var(--primary-light);
}
.thumb_bookmark {
  position: absolute;
  top: 0.4rem;
  left: 7.6rem;
  color: var(--color-icon-primary);
}
.thumb:not(.bookmarked) .thumb_bookmark {
  display: none;
}
.thumb_label {
  padding-top: 0.4rem;
  color: var(--text-secondary);
  font-size: 1.4rem;
  line-height: 1.4rem;
  text-align: center;
  white-space: nowrap;
}

/* ------------------------------------------------------------
    file_tab — 하단 파일 탭 (footer)
   ------------------------------------------------------------ */
.file_tab {
  display: flex;
  flex: none;
  align-items: center;
  height: 2.2rem;
  padding: 0 0.6rem;
  border: 0.1rem solid var(--color-line);
  border-radius: 0.8rem;
  background: var(--primary-main);
  color: var(--color-text-strong);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}
.file_tab.active {
  height: 2.6rem;
  padding-top: 0.4rem;
  border-radius: 0 0 0.8rem 0.8rem;
  background: var(--color-bg-canvas);
  /* 위쪽만 캔버스색 — 푸터의 구분선을 덮어 본문 영역과 이어져 보이게 합니다 */
  border-top-color: var(--color-bg-canvas);
}

.file_tab .file_tab_close {
  --ico: url(../images/icon_close.svg);
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.4rem;
  color: var(--color-icon-primary);
  cursor: pointer;
}
.file_tab .file_tab_close:hover {
  color: var(--point);
}
.file_tab .file_tab_name {
  flex: none;
  white-space: nowrap;
  max-width: 18rem;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ------------------------------------------------------------
   field/text — 밑줄형 입력 (페이지 번호)
   ------------------------------------------------------------ */
.field_text {
  width: 4rem;
  height: 4rem;
  padding: 1rem var(--padding-med) 1.1rem;
  border-bottom: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body1);
  text-align: left;
}

/* ------------------------------------------------------------
   field/select
   ------------------------------------------------------------ */
.select_wrap {
  display: inline-flex;
  position: relative;
  flex: none;
  align-items: center;
  color: var(--color-icon-primary);
}
.select_wrap .select_arrow {
  position: absolute;
  top: 50%;
  right: 1.3rem;
  transform: translateY(-50%);
  pointer-events: none;
}
/* 열림/닫힘 화살표 교체 */
.select_wrap .select_arrow.ico_triangle_up {
  display: none;
}
.select_wrap.open .select_arrow.ico_triangle_down {
  display: none;
}
.select_wrap.open .select_arrow.ico_triangle_up {
  display: inline-block;
}
select.field_select {
  appearance: none;
  -webkit-appearance: none;
  width: 10rem;
  height: 4rem;
  padding: 0 3.4rem 0 1.3rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body1);
  cursor: pointer;
}
/* 배율 select만 넓힘 — "너비 맞춤"·"높이 맞춤"이 안 잘리도록.
   공용 .field_select(폰트 크기·테두리 두께 등)는 10rem 그대로 둡니다. */
.gnb_g4 select.field_select {
  width: 13rem;
}

/* --- ver_line_samll — 세로 구분선 --- */
.ver_line {
  flex: none;
  width: 0.1rem;
  height: 1rem;
  background: var(--color-line);
}

/* ------------------------------------------------------------
   Alert / Popup
   ------------------------------------------------------------ */
.dim {
  display: flex;
  position: fixed;
  z-index: 100;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}
.dim[hidden] {
  display: none;
}
.alert {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 32rem;
  padding: 1.2rem 2.4rem 2.4rem;
  border-radius: 0.8rem;
  background: var(--color-bg-white);
  box-shadow: var(--shadow-alert);
  overflow: hidden;
}
.alert_body {
  flex: none;
  width: 100%;
  min-height: 4.4rem;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body1);
  text-align: left;
  word-break: break-word;
}
/* 3버튼 */
.alert_foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* 2버튼 */
.alert_foot.center {
  gap: 2rem;
  justify-content: center;
}

.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 6.4rem;
  height: 4rem;
  padding: 0.9rem 1.8rem;
  border: 0.1rem solid transparent;
  border-radius: var(--radius-s);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-body1);
  white-space: nowrap;
  cursor: pointer;
}

/* fill */
.btn_primary {
  background: var(--point);
  color: var(--color-bg-white);
}
/* point 테두리 */
.btn_secondary {
  border-color: var(--point);
  background: var(--color-bg-white);
  color: var(--point);
}
/* error 테두리 */
.btn_cancel {
  border-color: var(--error-main);
  background: var(--color-bg-white);
  color: var(--error-main);
}

/* pressed(:active)  */
.btn_primary:active {
  background: var(--grey-900);
}
.btn_secondary:active {
  background: var(--primary-main);
}
.btn_cancel:active {
  background: rgba(255, 56, 60, 0.2);
}

/* ----- Checkbox / Radio ------- */
.check,
.radio {
  display: inline-flex;
  flex: none;
  gap: 0.8rem;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body1);
  white-space: nowrap;
  cursor: pointer;
}
.check > input,
.radio > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.check_box,
.radio_box {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--color-bg-white);
}

/* 체크박스 */
.check_box {
  position: relative;
  border: 0.1rem solid var(--grey-500);
  border-radius: var(--radius-s);
}
.check_box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-white);
  opacity: 0;
  -webkit-mask: url(../images/icon_check16.svg) no-repeat center / 100% 100%;
  mask: url(../images/icon_check16.svg) no-repeat center / 100% 100%;
}
.check > input:checked + .check_box {
  border-color: var(--point);
  background: var(--point);
}
.check > input:checked + .check_box::after {
  opacity: 1;
}
.check:has(input:checked) {
  color: var(--color-text-primary);
}

/* 라디오 */
.radio_box {
  border: 0.1rem solid var(--grey-500);
  border-radius: 50%;
}
.radio > input:checked + .radio_box {
  border: 0.4rem solid var(--point);
}
.radio:has(input:checked) {
  color: var(--color-text-primary);
}

/* disabled */
.check > input:disabled + .check_box,
.radio > input:disabled + .radio_box {
  border-color: var(--text-disabled);
  background: var(--grey-100);
}
.check:has(input:disabled),
.radio:has(input:disabled) {
  color: var(--text-disabled);
  cursor: default;
}

/* ------- Popup (도장 · 워터마크) --------- */
.popup {
  display: flex;
  flex-direction: column;
  width: 40rem;
  max-height: 90vh;
  border-radius: 0.8rem;
  background: var(--color-bg-white);
  box-shadow: var(--shadow-alert);
  overflow: hidden;
}
.popup_head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2.4rem;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: 700;
}
.popup_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.6rem;
  min-height: 0;
  padding: 0.4rem 2.4rem 2rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.popup_foot {
  display: flex;
  flex: none;
  gap: 2rem;
  justify-content: center;
  padding: 0 2.4rem 2.4rem;
}

/* 요약 내용 보기 팝업 */
.popup_summary {
  width: 56rem;
  height: 48rem;
  padding-bottom: 2.4rem;
}
.summary_para {
  color: var(--color-text-primary);
  font-size: 1.4rem;
  line-height: 1.7;
  word-break: break-word;
}
/* 라벨 + 컨트롤 한 줄 */
.form_row {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.form_label {
  flex: none;
  width: 8rem;
  color: var(--color-text-primary);
  font-size: 1.4rem;
  white-space: nowrap;
}
.form_ctrl .form_label {
  width: auto;
  white-space: nowrap;
}
.form_row > .form_ctrl {
  display: flex;
  flex: 1;
  gap: 0.8rem;
  align-items: center;
  min-width: 0;
}

.form_row[hidden] {
  display: none;
}
/* 미리보기 영역 */
.preview_box {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: 1rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s);
  background: var(--color-bg-white);
}
/* 최종 도장 썸네일 */
.stamp_preview {
  display: inline-block;
  max-width: 100%;
  padding: 0.6rem 1rem;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 워터마크 텍스트 입력 */
/* 폼 안의 입력 필드 — gnb 입력(.field_text)과 동일한 밑줄 스타일.
   이미지 경로(버튼)·텍스트 입력이 서로, 그리고 gnb와 같아 보이도록 통일합니다. */
.field_line {
  flex: 1;
  min-width: 0;
  height: 4rem;
  padding: 1rem var(--padding-med) 1.1rem;
  border-bottom: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body1);
  text-align: left;
}
/* 이미지 경로는 클릭 버튼이라 라벨을 세로 가운데로 */
button.field_line {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.field_line.placeholder,
.field_line::placeholder {
  color: var(--text-assistive);
}

/* ------------------------------------------------------------
   Font Settings
   폰트 유형 ▼ / 크기 ▼ / 글자 색 / 배경색 / 스타일 / 정렬
   ------------------------------------------------------------ */
.select_wrap.font_family {
  flex: 1;
  min-width: 0;
}
.select_wrap.font_size {
  flex: none;
  width: 9rem;
}
.select_wrap.font_family > select.field_select,
.select_wrap.font_size > select.field_select {
  width: 100%;
  height: 3.4rem;
  padding: 0 3rem 0 1rem;
  font-size: 1.4rem;
}
/* 글자색/배경색 — 색 스와치 (Coloris) */
.color_field {
  display: inline-flex;
  position: relative;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s);
  background: var(--color-bg-white);
  cursor: pointer;
  overflow: hidden;
}
.color_field .clr-field {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.color_field .clr-field input {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.color_field .clr-field button {
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border-radius: 0;
}
/* 폰트 스타일 / 정렬 — 토글 버튼 묶음 */
.btn_group {
  display: flex;
  flex: none;
  gap: 0.4rem;
}
.btn_group .btn_ico {
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: 1.3rem;
  line-height: 1;
}
.btn_group .btn_ico.selected {
  background: var(--color-btn-pressed);
}
/* 스타일 / 정렬  */
.btn_stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

/* ------- 6. Dropdown / Context Menu ------- */
.dropdown_host {
  display: inline-flex;
  position: relative;
  flex: none;
}
.dropdown_con {
  display: flex;
  position: absolute;
  z-index: 10;
  flex-direction: column;
  gap: 0.4rem;
  width: 18rem;
  padding: 0.6rem 0;
  border: 0.1rem solid var(--color-line);
  border-radius: 0.4rem;
  background: var(--color-dropdown-bg);
  box-shadow: var(--shadow-dropdown);
}
.dropdown_con[hidden] {
  display: none;
}
.dropdown_item {
  display: flex;
  position: relative;
  flex: none;
  align-items: center;
  width: 100%;
  padding: 0.2rem 0.4rem;
}
.dropdown_base {
  display: flex;
  flex: 1 0 0;
  gap: 1rem;
  align-items: center;
  min-width: 0;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-m);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body1);
  cursor: pointer;
}
/* hover */
.dropdown_base:hover {
  background: var(--color-btn-hover);
}
.dropdown_base.selected {
  background: var(--color-dropdown-hover);
}
.dropdown_base:active {
  background: var(--primary-dark);
}
.dropdown_item.open > .dropdown_base {
  background: var(--color-dropdown-hover);
}
.dropdown_label {
  flex: 1 0 0;
  min-width: 0;
  text-align: center;
}
.dropdown_divider {
  flex: none;
  width: 16.8rem;
  height: 0.1rem;
  margin: 0 auto;
  background: var(--color-line);
}
/* 서브메뉴 */
.dropdown_con.dropdown_sub {
  width: 16rem;
  background: var(--color-dropdown-sub-bg);
}

/* ------------------------------------------------------------
   list_sub_wrap — 주석 툴바 하위 메뉴
   ------------------------------------------------------------ */
.list_sub_wrap {
  display: flex;
  position: absolute;
  z-index: 10;
  gap: 0.4rem;
  align-items: center;
  padding: 0;
  border: 0.1rem solid var(--color-line);
  border-radius: 0.8rem;
  background: var(--color-dropdown-sub-bg);
  box-shadow: var(--shadow-dropdown);
}
.list_sub_wrap[hidden] {
  display: none;
}

.list_sub_wrap .btn_ico:hover,
.quick_menu .btn_ico:hover {
  background: var(--color-dropdown-hover);
}

.list_sub_wrap > .btn_ico:first-child,
.quick_menu > .btn_ico:first-child {
  border-top-left-radius: 0.7rem;
  border-bottom-left-radius: 0.7rem;
}
.list_sub_wrap > .btn_ico:last-child,
.quick_menu > .btn_ico:last-child {
  border-top-right-radius: 0.7rem;
  border-bottom-right-radius: 0.7rem;
}

/* ------------------------------------------------------------
   quick_menu — 문서영역 퀵메뉴
   주석 객체 선택 시 뜨는 메뉴. 구성: 속성 / 삭제 / 복사
   ------------------------------------------------------------ */
.quick_menu {
  display: inline-flex;
  position: absolute;
  z-index: 10;
  gap: 0.4rem;
  align-items: center;
  border: 0.1rem solid var(--color-line);
  border-radius: 0.8rem;
  background: var(--color-dropdown-sub-bg);
  box-shadow: var(--shadow-dropdown);
}
.quick_menu[hidden] {
  display: none;
}
.quick_menu::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-left: -0.5rem;
  background: var(--color-dropdown-sub-bg);
  border: 0.1rem solid var(--color-line);
  transform: rotate(45deg);
}
/* 아래로 향하는 꼬리 */
.quick_menu.tail_bottom::after {
  bottom: -0.55rem;
  border-top-color: transparent;
  border-left-color: transparent;
}
/* 위로 향하는 꼬리 */
.quick_menu.tail_top::after {
  top: -0.55rem;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
/* 서브메뉴 위치 */
.dropdown_item > .dropdown_sub {
  top: -0.6rem;
  left: 100%;
}
.dropdown_item > .dropdown_sub.to_left {
  left: auto;
  right: 100%;
}

/* ------------------------------------------------------------
   텍스트 찾기 팝업
   ------------------------------------------------------------ */
.find_pop {
  display: flex;
  position: absolute;
  z-index: 10;
  gap: 0.6rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border: 0.1rem solid var(--color-line);
  border-radius: 0.4rem;
  background: var(--color-dropdown-bg);
  box-shadow: var(--shadow-dropdown);
}
/* 다음/이전/닫기 버튼 */
.find_pop .btn_ico {
  width: 2.6rem;
  height: 2.6rem;
}
.find_pop[hidden] {
  display: none;
}
.find_pop .find_input {
  flex: none;
  width: 16rem;
  height: 3.2rem;
  padding: 0 0.8rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: 1.4rem;
}
.find_pop .find_input::placeholder {
  color: var(--text-assistive);
}
.find_pop .find_count {
  flex: none;
  min-width: 3.2rem;
  color: var(--text-secondary);
  font-size: 1.2rem;
  text-align: center;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   컬러/폰트 속성 창
   ------------------------------------------------------------ */
.prop_pop {
  display: flex;
  position: absolute;
  z-index: 10;
  flex-direction: column;
  gap: 1.2rem;
  width: 26rem;
  padding: 1.2rem;
  border: 0.1rem solid var(--color-line);
  border-radius: 0.8rem;
  background: var(--color-dropdown-sub-bg);
  box-shadow: var(--shadow-dropdown);
}
.prop_pop[hidden] {
  display: none;
}
/* 선택된 도구에 따라 한 섹션만 노출 (도형 / 텍스트) */
.prop_sec {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.prop_sec[hidden] {
  display: none;
}
.prop_row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
/* "폰트 설정"(5자) 이 두 줄로 접히지 않을 만큼 확보 */
.prop_label {
  flex: none;
  width: 5.6rem;
  color: var(--color-text-primary);
  font-size: 1.3rem;
  white-space: nowrap;
}
/* 팔레트 — 스와치 + [+] 는 JS가 채웁니다 */
.palette {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}
.swatch {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s);
  cursor: pointer;
}
/* 7-2 기선택 표시 / 7-3 hover 표시 */
.swatch.selected {
  outline: 0.2rem solid var(--point);
  outline-offset: 0.1rem;
}
.swatch:hover {
  outline: 0.2rem solid var(--color-line);
  outline-offset: 0.1rem;
}
/* 사용자 지정색 스와치 — 지울 수 있게 선택 상태를 따로 표시 */
.swatch.custom.picked {
  outline: 0.2rem solid var(--error-main);
  outline-offset: 0.1rem;
}

/* 7-4 [+] 사용자 지정 색 / 7-5 삭제
   Coloris는 input에 붙으므로, input을 [+] 아이콘 버튼처럼 보이게 감춥니다. */
.palette_tools {
  display: flex;
  flex: none;
  gap: 0.4rem;
  align-items: center;
}
.swatch_add {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s);
  background: var(--color-bg-white);
  color: var(--color-icon-primary);
  cursor: pointer;
}
.swatch_add .ico {
  width: 1.2rem;
  height: 1.2rem;
}
/* Coloris가 만드는 wrapper/input을 [+] 버튼 위에 투명하게 겹칩니다 */
.swatch_add .clr-field {
  position: absolute;
  inset: 0;
}
.swatch_add .clr-field input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
/* Coloris 기본 미리보기 버튼은 숨김 */
.swatch_add .clr-field button {
  display: none;
}
/* 사용자 지정색 삭제 */
.swatch_del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s);
  background: var(--color-bg-white);
  color: var(--color-icon-primary);
  cursor: pointer;
}
.swatch_del .ico {
  width: 1.2rem;
  height: 1.2rem;
}
/* 선택된 사용자 지정색이 없으면 동작 X */
.swatch_del:disabled {
  color: var(--color-icon-disabled);
  cursor: default;
}
.prop_range {
  flex: 1;
  min-width: 0;
  accent-color: var(--point);
  cursor: pointer;
}
.prop_num {
  flex: none;
  width: 5.4rem;
  height: 2.8rem;
  padding: 0 0.6rem;
  border: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: 1.3rem;
  text-align: center;
}

/* ------------------------------------------------------------
   Chat Bubble
   패널 360x378, radius 8, bg #fff / 본문 bg #fbf9f7
   말풍선 #5d5753 — AI는 채움+흰 글씨, 사용자는 흰 배경+테두리
   ------------------------------------------------------------ */
/* 높이는 내용에 맞춰 자동 — 고정하면 title 높이를 키운 만큼
   입력 필드가 패널 밖으로 밀려납니다.
   (title 4.8 + gap 1 + body 27.4 + gap 1 + input 4 + pb 1 = 39.2rem) */
.chatbot_panel {
  display: flex;
  position: absolute;
  z-index: 20;
  flex-direction: column;
  gap: 1rem;
  width: 36rem;
  padding: 0 1rem 1rem;
  border: 0.1rem solid var(--color-line);
  border-radius: 0.8rem;
  background: var(--color-bg-white);
  box-shadow: var(--shadow-dropdown);
}
.chatbot_panel[hidden] {
  display: none;
}
.chatbot_title {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 4.8rem;
  color: var(--color-icon-primary);
}
/* 닫기 X — 버튼(클릭 영역)만 키우고 아이콘 크기는 20 그대로 */
.chatbot_title .btn_close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-s);
  color: var(--color-icon-primary);
  cursor: pointer;
}
.chatbot_title .btn_close:hover {
  background: var(--color-btn-hover);
}
/* 본문 — 기본 높이 274 고정, 넘치면 스크롤 */
.chatbot_body {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1.4rem;
  height: 27.4rem;
  padding: 1rem;
  background: var(--primary-light);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* 말풍선 — AI 말풍선 */
.bubble {
  --tail-w: 0.74rem; /* 7.41 */
  --tail-top: 0.46rem; /* 20 - 15.38 */
  --tail-bottom: 0.47rem; /* 24.65 - 20 */
  --tail-gap: 0.34rem; /* 28 - 24.65 */
  position: relative;
  max-width: 20.4rem;
  padding: 0.4rem 1.26rem;
  border-radius: 0.4rem;
  font-size: 1.4rem;
  line-height: var(--line-height-body1);
  word-break: break-word;
}
/* AI — 좌측, 채움. */
.bubble_ai {
  align-self: flex-start;
  margin-left: var(--tail-w);
  background: var(--color-bubble);
  color: var(--color-bg-white);
}
.bubble_ai::after {
  content: "";
  position: absolute;
  bottom: var(--tail-gap);
  left: calc(-1 * var(--tail-w));
  border-top: var(--tail-top) solid transparent;
  border-right: var(--tail-w) solid var(--color-bubble);
  border-bottom: var(--tail-bottom) solid transparent;
}

/* 사용자 — 우측, 테두리 */
.bubble_user {
  align-self: flex-end;
  margin-right: var(--tail-w);
  border: 0.1rem solid var(--color-bubble);
  background: var(--color-bg-white);
  color: var(--color-text-strong);
  font-size: 1.2rem;
  line-height: 1.6;
}
/* 테두리 말풍선 꼬리 */
.bubble_user::after {
  content: "";
  position: absolute;
  right: -0.4rem;
  bottom: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--color-bg-white);
  border: 0.1rem solid var(--color-bubble);
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-right-radius: 0.2rem;
  transform: rotate(-45deg);
}
/* 클릭 가능한 말풍선 */
.bubble_link {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  cursor: pointer;
}

/* 퀵메뉴 칩 */
.chatbot_quick {
  display: flex;
  flex: none;
  gap: 0.8rem;
  align-items: center;
  justify-content: flex-end;
  color: var(--color-icon-primary);
}
.btn_point {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 3.4rem;
  padding: 0.6rem 1.6rem;
  border: 0.1rem solid var(--point);
  border-radius: var(--radius-s);
  background: var(--color-bg-white);
  color: var(--point);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
}

/* ------------------------------------------------------------
   8. field/search — 챗봇 입력 필드
   ------------------------------------------------------------ */
.field_search {
  display: flex;
  flex: none;
  gap: var(--padding-med);
  align-items: center;
  width: 100%;
  height: 4rem;
  padding: 1rem var(--padding-med) 1.1rem;
  border-bottom: 0.1rem solid var(--color-border-main);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--color-bg-white);
  color: var(--color-icon-primary);
}
.field_search input {
  flex: 1 0 0;
  min-width: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body1);
}
.field_search input::placeholder {
  color: var(--text-assistive);
}
/* 입력 지우기 X */
.field_search [data-input-clear] {
  flex: none;
  cursor: pointer;
}

.field_search .btn_send {
  flex: none;
  color: var(--color-icon-primary);
  cursor: pointer;
}

/* ------------------------------------------------------------
   메모패드 (기획서 37p 10 · WFV_web_3004) — Figma 없이 자체 제작
     closed = 캔버스에 놓인 아이콘 마커
     open   = 아이콘 클릭 시 펼쳐지는 입력 패드
              (속성/삭제 버튼 + "내용을 입력하세요." 텍스트 입력)
     마커 재클릭 / 바깥 클릭 → closed · 삭제(Delete) → 제거
   ------------------------------------------------------------ */
.memo {
  position: relative;
  display: inline-block;
}
/* open — 입력 패드 */
.memo_pad {
  position: absolute;
  top: 0;
  left: calc(100% + 0.6rem);
  z-index: 90; /* 사이드바(z-auto) 위로 나오게 */
  display: flex;
  flex-direction: column;
  width: 24rem;
  border: 0.1rem solid var(--color-line);
  border-radius: 0.8rem;
  background: var(--color-bg-white);
  box-shadow: var(--shadow-alert);
}
/* 오른쪽으로 열면 사이드바/화면을 넘는 경우 → 왼쪽으로 열기 (JS가 토글) */
.memo_pad.open_left {
  left: auto;
  right: calc(100% + 0.6rem);
}
/* 캔버스에 놓인 메모 아이콘(마커)은 hover 효과 없음 */
.memo > [data-memo-toggle]:hover {
  background: transparent;
}
.memo_pad[hidden] {
  display: none;
}
.memo_head {
  display: flex;
  flex: none;
  gap: 0.2rem;
  justify-content: flex-end;
  align-items: center;
  padding: 0.4rem;
  border-bottom: 0.1rem solid var(--color-line);
  background: var(--primary-light);
  border-radius: 0.8rem 0.8rem 0 0;
}
.memo_body {
  flex: 1;
  width: 100%;
  min-height: 12rem;
  padding: 1rem 1.2rem;
  border: none;
  border-radius: 0 0 0.8rem 0.8rem;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 1.4rem;
  line-height: 1.5;
  resize: none;
}
.memo_body::placeholder {
  color: var(--text-assistive);
  font-size: 1.2rem;
}
.memo_body:focus {
  outline: none;
}