/* ======================================================================
   HANCOT 공통 레이아웃 CSS v2
   파일 위치: src/main/resources/static/css/hancot-layout.css
   적용 순서: bootstrap.min.css → hancot-common.css → 이 파일 → 페이지별 CSS

   [구성] 1행 헤더 / 2행 검색 / 3행 내비게이션 / 4행 본문 / 5행 푸터
   [주의] hancot-base.html의 .hc-fixed-header가 상단 3행을 감싸는 구조.
          따라서 3개 행을 각각 sticky로 하지 않고, 부모를 sticky로 고정함.
   [변경] 높이·너비·메뉴 폭은 아래 :root 변수만 수정하면 됨.
   ====================================================================== */
:root {
  /* 01. 상단 각 행의 예상 높이: 실제 콘텐츠가 더 높으면 자동으로 늘어남 */
  --hc-header-1-height: 64px;
  --hc-header-2-height: 64px;
  --hc-header-3-height: 48px;
  --hc-sticky-height: calc(var(--hc-header-1-height) + var(--hc-header-2-height) + var(--hc-header-3-height));

  /* 02. 본문: 기본 최대 너비 1440px, 기본 비율 좌20% / 중앙60% / 우20% */
  --hc-content-max: 1440px;
  --hc-left-percent: 20%;
  --hc-right-percent: 20%;
  --hc-layout-gap: 16px;

  /* 03. 사용자 화면 설정: JS가 아래 값을 변경함 */
  --hc-page-scale: 1;
  --hc-font-scale: 1;
  --hc-drawer-width: 290px;
}

/* 04. 공통 페이지 골격: 하단 푸터가 내용이 짧아도 화면 아래에 위치 */
html { scroll-padding-top: calc(var(--hc-sticky-height) + 16px); }
body.domain-body { margin: 0; min-height: 100vh; }
.page-wrapper, .hc-page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* 05. 상단 1~3행을 한 덩어리로 고정: 본문 스크롤 시 검색창 유지
   주의: 상위 요소에 overflow:hidden/auto 또는 transform을 적용하면
   sticky 동작이 달라질 수 있음. */
.hc-fixed-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
}
.hc-header-row-1, .hc-header-row-2, .hc-header-row-3 {
  position: relative;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.hc-header-row-1 { min-height: var(--hc-header-1-height); }
.hc-header-row-2 { min-height: var(--hc-header-2-height); }
.hc-header-row-3 { min-height: var(--hc-header-3-height); }

/* 06. 본문 4행과 하단 5행 */
.main-content, .hc-main-content { flex: 1 0 auto; width: 100%; min-width: 0; }
.hc-footer { flex: 0 0 auto; margin-top: auto; background: #fff; border-top: 1px solid #e2e8f0; }

/* 07. 본문 너비: 기본 / 넓게 / 전체 화면은 JS의 width 설정으로 제어 */
.hc-page-container {
  width: calc(100% - 32px);
  max-width: var(--hc-content-max);
  margin-inline: auto;
}
/* 페이지 콘텐츠에 이 클래스를 추가하면 확대/축소(80~120%) 적용.
   zoom은 최신 브라우저 지원 기능이며 실제 모니터 해상도는 바꾸지 않음. */
.hc-page-container--scaled { zoom: var(--hc-page-scale); }
/* 글자 크기 조절은 이 클래스를 지정한 영역에 적용됨 */
.hc-font-scaled { font-size: calc(1rem * var(--hc-font-scale)); }

/* 08. 좌/중/우 3열 레이아웃: JS가 좌우 비율을 10~30%로 변경 */
.hc-three-columns {
  display: grid;
  grid-template-columns: minmax(0,var(--hc-left-percent)) minmax(0,1fr) minmax(0,var(--hc-right-percent));
  gap: var(--hc-layout-gap);
  align-items: start;
}
.hc-three-columns > * { min-width: 0; }
/* 마우스 드래그 핸들: 실제 조절 기능은 JS와 data-hc-resize 연결 필요 */
.hc-resize-handle {
  width: 8px; min-height: 42px; border-radius: 6px;
  background: #dbeafe; cursor: col-resize; touch-action: none;
}
.hc-resize-handle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* 09. 왼쪽 슬라이드 메뉴: 평소 숨김, body.hc-drawer-open 시 열림 */
.hc-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(15,23,42,.45); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.hc-drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 1091;
  width: min(var(--hc-drawer-width),88vw);
  overflow-y: auto; background: #fff;
  box-shadow: 6px 0 28px rgba(15,23,42,.15);
  transform: translateX(-105%); transition: transform .2s ease;
}
body.hc-drawer-open .hc-drawer { transform: translateX(0); }
body.hc-drawer-open .hc-drawer-backdrop { opacity: 1; visibility: visible; }
body.hc-drawer-open { overflow: hidden; }

/* 10. 화면 설정 팝업: 상단 '화면설정' 버튼과 JS로 열고 닫음 */
.hc-settings-panel {
  position: fixed; top: 76px; right: 16px; z-index: 1080;
  width: min(350px,calc(100vw - 32px)); max-height: calc(100dvh - 92px);
  overflow-y: auto; padding: 20px; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15,23,42,.16);
}
.hc-settings-panel[hidden] { display: none !important; }

/* 11. 태블릿/모바일: 3열을 1열로 전환, 드래그 핸들 숨김 */
@media (max-width: 991.98px) {
  :root { --hc-header-1-height: 56px; --hc-header-2-height: 56px; --hc-header-3-height: 44px; }
  .hc-three-columns { grid-template-columns: minmax(0,1fr); }
  .hc-resize-handle { display: none; }
  .hc-page-container { width: calc(100% - 24px); }
}
@media (max-width: 575.98px) {
  :root { --hc-header-1-height: 52px; --hc-header-2-height: 52px; --hc-header-3-height: 42px; }
  .hc-page-container { width: calc(100% - 20px); }
  .hc-settings-panel { right: 10px; width: calc(100vw - 20px); }
  /* 상단 3행의 실제 내용이 너무 높으면 모바일에서 메뉴 일부를 줄여야 함 */
}
/* 12. 모션 최소화 OS 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .hc-drawer, .hc-drawer-backdrop { transition: none; }
}