/* ======================================================================
   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; }
}





/* ==================================================
   HANCOT 공통 화면설정 패널
================================================== */

.hc-settings-panel {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 1200;

    width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;

    padding: 18px;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}

.hc-settings-panel[hidden] {
    display: none !important;
}

.hc-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.hc-settings-close {
    border: 0;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.hc-settings-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
}

.hc-settings-label {
    font-weight: 600;
    font-size: 14px;
}

.hc-settings-options,
.hc-settings-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hc-settings-options label {
    font-size: 13px;
}

.hc-settings-scale button {
    width: 44px;
    height: 40px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
}

.hc-settings-body select {
    width: 100%;
    min-height: 42px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
}

.hc-settings-reset {
    margin-top: 12px;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: #1e40af;
    color: white;
    cursor: pointer;
}

@media (max-width: 768px) {
    .hc-settings-panel {
        top: 12px;
        right: 12px;
        max-height: calc(100dvh - 24px);
    }
}


/* =========================================================
   HANCOT - 좌측 / 중앙 / 우측 너비 설정 연동
   PC: 사용자 설정값 적용
   모바일: 기존 Bootstrap 반응형 유지
========================================================= */

@media (min-width: 992px) {

    /* 검색 결과 페이지의 3열 영역 */
    .hc-page-container .row.g-0.content {
        display: flex;
        flex-wrap: nowrap;
    }

    /* 왼쪽 영역 */
    .hc-page-container .row.g-0.content > .content-left {
        flex: 0 0 var(--hc-left-percent, 20%);
        width: var(--hc-left-percent, 20%);
        max-width: var(--hc-left-percent, 20%);
        min-width: 0;
    }

    /* 중앙 영역 */
    .hc-page-container .row.g-0.content > .content-center {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    /* 오른쪽 영역 */
    .hc-page-container .row.g-0.content > .content-right {
        flex: 0 0 var(--hc-right-percent, 20%);
        width: var(--hc-right-percent, 20%);
        max-width: var(--hc-right-percent, 20%);
        min-width: 0;
    }
}