@charset "utf-8";

/* ============================================================
   layout.css — Frame Layout / 반응형
   전제: reset.css → tokens.css → components.css → layout.css
   ============================================================ */

html {
  overflow: hidden;
}
body {
  overflow-x: auto;
  overflow-y: hidden;
}
.app {
  display: flex;
  flex-direction: column;
  min-width: 84rem;
  width: 100%;
  height: 100%;
}
.app_body {
  display: flex;
  position: relative;
  flex: 1;
  min-height: 0;
}
.app_center {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

/* ---- sidebar_left ---- */
.sidebar_left {
  position: relative;
  flex: none;
  width: var(--sidebar-left-width);
  border-right: 0.1rem solid var(--color-line);
}
.sidebar_left .thumb_btn_wrap {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1.6rem;
  background: var(--color-bg-gnb); /* #fbf9f7 */
}
.sidebar_left .panel_arrow {
  top: 1rem;
  left: 13.9rem;
}
/* 썸네일 리스트 */
.thumb_list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  height: calc(100% - 7.8rem);
  padding: 2rem;
  background: var(--color-bg-thumb-list);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ---- main ---- */
/* ⚠ .sidebar_right는 position:absolute라 flex 흐름에서 빠져 있습니다.
   margin-right로 비켜주지 않으면 .main이 사이드바 밑까지 깔려서
   가운데 정렬된 page_doc의 오른쪽이 사이드바 아래로 들어갑니다.
   (.footer도 같은 이유로 같은 처리를 합니다)

   padding: 아무리 확대해도 문서 사방으로 남는 여백. 맞춤 계산도 이 값을 실측해 씁니다.
   ⚠ 스크롤 컨테이너의 끝쪽(아래·오른쪽) padding은 블록 컨테이너에선 스크롤 영역에
     안 잡히는 경우가 있는데, .main은 **flex 컨테이너**라 양쪽 다 잡힙니다.
     display:flex를 빼면 그쪽 4rem이 사라집니다. */
.main {
  display: flex;
  flex: 1;
  margin-right: var(--sidebar-right-width);
  padding: 4rem;
  background: var(--color-bg-canvas);
  overflow: auto;
  transition: margin-right 0.25s ease;
}
/* 가운데 정렬은 align-items가 아니라 **margin: auto**로 겁니다.
   align-items:center는 문서가 표시 영역보다 커지면 위쪽이 잘려 스크롤로도 못 올라갑니다.
   auto 마진은 남는 공간이 없으면 0이 되어 넘친 부분이 정상 스크롤됩니다.
   flex: none — 확대 시 flex-shrink로 문서가 찌그러지면 안 됩니다.
   height — A4 비율(210:297). 실측 897은 반올림값이라 계산식으로 고정합니다. */
.page_doc {
  flex: none;
  width: 63.4rem;
  height: calc(63.4rem * 297 / 210);
  margin: auto;
  background: var(--color-bg-white);
}

/* ---- footer (파일 탭) ----  */
.footer {
  display: flex;
  flex: none;
  gap: 0.2rem;
  align-items: flex-start;
  height: var(--footer-height);
  margin-right: var(--sidebar-right-width);
  padding: 0.4rem 0 0 1rem;
  /* ⚠ 상단 구분선을 border가 아니라 **배경**으로 그립니다.
     border는 padding box 바깥이라 overflow(가로 스크롤) 때문에 잘려서
     활성 탭이 그 위로 올라올 수 없습니다. 배경은 부모가 먼저 칠하고
     자식(탭)이 그 위에 칠해지므로, 활성 탭이 선을 덮어 본문과 이어져 보입니다. */
  background:
    linear-gradient(var(--color-line), var(--color-line)) no-repeat 0 0 / 100%
      0.1rem,
    var(--color-bg-gnb); /* #fbf9f7 */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.footer .file_tab.active {
  margin-top: -0.4rem;
}
/* ---- sidebar_right (주석 툴바) ---- */
.sidebar_right {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  width: var(--sidebar-right-width);
  border-left: 0.1rem solid var(--color-line);
  background: var(--color-bg-gnb);
}
.sidebar_right .panel_arrow {
  top: -0.1rem;
  left: -2.4rem;
}
.sb_rt_btn_wrap {
  display: flex;
  flex: none;
  gap: 0.4rem;
  padding: 0.8rem;
}
.sb_rt_tools {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin-left: 0.7rem;
}
.sb_rt_list {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.8rem;
  width: var(--btn-size-large);
}
.bt_line_small {
  flex: none;
  width: 1.6rem;
  height: 0.1rem;
  margin: 2rem auto;
  background: var(--color-line);
}
/* 챗봇 — 툴바 최하단 고정 */
.sb_rt_chatbot {
  margin-top: auto;
  margin-bottom: 4rem;
}
/* 챗봇 — hover도 활성과 같은 원형 radius */
.sb_rt_chatbot:hover {
  border-radius: 4.6rem;
}
/* 챗봇 활성화 */
.sb_rt_chatbot.selected,
.sb_rt_chatbot.selected:hover {
  border-radius: 4.6rem;
  background: var(--point);
  color: var(--color-bg-white);
}

/* 챗봇 패널 — 오른쪽 사이드바 왼편, 챗봇 버튼 근처 */
.chatbot_panel {
  right: calc(var(--sidebar-right-width) + 0.4rem);
  bottom: 3.4rem;
}

/* gnb 버튼 아래로 열리는 드롭다운 */
.dd_below {
  top: calc(100% + 0.9rem);
  left: 0;
}
/* gnb 우측에 가까운 버튼(마스킹/보기 등)은 왼쪽으로 펼쳐야 화면 밖으로 안 잘립니다 */
.dd_below.dd_right {
  top: calc(100% + 0.9rem);
  left: auto;
  right: 0;
}

/* 주석 툴바(오른쪽 사이드바) — 하위 메뉴는 왼쪽으로 열립니다 */
.dd_left {
  top: 0;
  right: calc(100% + 1rem);
}
/* 썸네일 우클릭 메뉴 — JS가 좌표를 잡습니다 */
#dd_thumb {
  width: 16rem;
}
/* 썸네일 우클릭 메뉴(삭제·북마크 설정/해제)는 왼쪽 정렬
   (다른 드롭다운은 가운데 정렬 유지) */
#dd_thumb .dropdown_label {
  text-align: left;
}
/* 북마크만 보기 */
.thumb_list.only_bookmark .thumb:not(.bookmarked) {
  display: none;
}
/* 더보기 ⋯ 메뉴 — gnb 우측 끝이라 오른쪽 정렬, 서브메뉴 폭 120 */
.dd_more {
  top: calc(100% + 0.4rem);
  right: 0;
}
.dd_more .dropdown_sub {
  width: 12rem;
}

/* ------------------------------------------------------------
   사이드바 접기 (썸네일 바 접힘 / 주석 툴바 접힘)
   → .ico_arrow_open / .ico_arrow_close 두 아이콘을 겹쳐두고 상태에 따라 교체.
   ------------------------------------------------------------ */
.panel_arrow .ico_arrow_close {
  display: inline-block;
}
.panel_arrow .ico_arrow_open {
  display: none;
}
.collapsed .panel_arrow .ico_arrow_close {
  display: none;
}
.collapsed .panel_arrow .ico_arrow_open {
  display: inline-block;
}
.sidebar_right .panel_arrow {
  border-radius: 0.8rem 0 0 0.8rem;
}

/* 접힘 전환 애니메이션 */
.sidebar_left,
.sidebar_right {
  transition:
    width 0.25s ease,
    border-color 0.25s ease;
}
.sidebar_left .panel_arrow,
.sidebar_right .panel_arrow {
  transition: left 0.25s ease;
}
.thumb_list,
.sidebar_left .thumb_btn_wrap,
.sb_rt_btn_wrap,
.sb_rt_tools {
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}
.footer {
  transition: margin-right 0.25s ease;
}

.sidebar_left.collapsed {
  width: 0;
  border-right-color: transparent;
}
.sidebar_right.collapsed {
  width: 0;
  border-left-color: transparent;
}
/* display:none 대신 visibility+opacity — transition */
.sidebar_left.collapsed > *:not(.panel_arrow),
.sidebar_right.collapsed > *:not(.panel_arrow) {
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
.sidebar_left.collapsed .panel_arrow {
  left: 0;
}
/* 우측 사이드바가 접히면 본문·푸터도 끝까지 */
.app_body:has(.sidebar_right.collapsed) .main,
.app_body:has(.sidebar_right.collapsed) .footer {
  margin-right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar_left,
  .sidebar_right,
  .sidebar_left .panel_arrow,
  .sidebar_right .panel_arrow,
  .footer,
  .thumb_list,
  .sb_rt_tools {
    transition: none;
  }
}

/* ------------------------------------------------------------
   top_gnb
   반응형 3단 — 브레이크포인트 1290 / 948
   · full   : > 1290
   · mid    : 949 ~ 1290
   · narrow : ≤ 948
   ------------------------------------------------------------ */
.top_gnb {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--gnb-height);
  padding-right: 2rem;
  border-bottom: 0.1rem solid var(--color-line);
  background: var(--color-bg-gnb);
}

.gnb_logo {
  flex: none;
  width: 8.8rem;
  height: 1.5rem;
  margin-left: 2.6rem;
}
.gnb_logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 그룹 공통 — 그룹 내부 버튼 간격 8px */
.gnb_group {
  display: flex;
  flex: none;
  gap: 0.8rem;
  align-items: center;
}

.gnb_g1 {
  margin-left: 2.6rem;
  padding: 1rem;
}

/* 가변 여백 */
.gnb_spacer {
  flex: 1 1 auto;
  min-width: 0.8rem;
}

/* 구분선은 좌우 12px */
.top_gnb .ver_line {
  margin: 0 1.2rem;
}

/* g4(배율)와 g5(맞춤) 사이는 구분선 없이 8px */
.gnb_g5 {
  margin-left: 0.8rem;
}

/* 페이지 번호 : [1] / 20 */
.page_num {
  display: flex;
  flex: none;
  gap: 0.8rem;
  align-items: center;
}
.page_num .page_now {
  width: 4rem;
  text-align: left;
}
.page_num .page_sep {
  color: var(--color-text-strong);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body1);
}
.page_num .page_total {
  color: var(--color-text-strong);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body1);
  white-space: nowrap;
}

.bp_sub,
.bp_narrow {
  display: none;
}

/* ============================================================
   ≤1290 (mid) : 회전 2개 → [회전▾] 병합 / 페이지 화살표 제거 / 맞춤 1개 /
                마스킹·보기 → [보기▾] 병합 / 2장씩 제거
   ============================================================ */
@media (max-width: 1290px) {
  .bp_full {
    display: none;
  }
  .bp_sub {
    display: inline-flex;
  }
  .dropdown_item.bp_sub {
    display: flex;
  }
  .gnb_spacer {
    min-width: 2rem;
  }
}

/* ============================================================
   ≤948 (narrow) : [보기▾] 제거 / 배율 ± 제거 / 캡처 제거 / g5·g6 사이 구분선 추가
   ============================================================ */
@media (max-width: 948px) {
  .bp_wide {
    display: none;
  }
  .bp_narrow {
    display: inline-flex;
  }
  .dropdown_item.bp_narrow {
    display: flex;
  }
  .gnb_spacer {
    min-width: 0.8rem;
  }
}