/* public/css/layout.css — 화면 틀. 단독 모드: 헤더(로고·업무 탭·도구) + 사이드바 + 본문. 월 모드(data-wall="1"): 헤더 없이
   사이드바 맨 위에 업무 전환, 맨 아래에 언어·처음으로(TV 월 머리글과 두 겹이 되지 않게). 본문은 남은 높이를 페이지에 준다. */

.app[data-state='ready'] {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--header-h) minmax(0, 1fr);
  grid-template-areas:
    'header header'
    'sidebar main';
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.app[data-state='ready'][data-wall='1'] {
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'sidebar main';
}

/* ── 헤더(단독 모드) ───────────────────────────────────────────── */

.app-header {
  grid-area: header;
  display: flex;
  align-items: stretch;
  min-width: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* 로고 칸은 사이드바와 같은 폭, 로고는 메뉴 아이콘과 같은 선에서 시작한다 */
.brand {
  flex: 0 0 var(--sidebar-w);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--side-pad) + var(--item-pad));
  border-right: 1px solid var(--line);
}

.brand img {
  width: auto;
  height: 3.2rem;
  max-height: 49px; /* 원본 PNG(247×49)보다 키우지 않는다 — 큰 화면에서도 흐려지지 않게 */
}

/* 업무 탭: 카드형 버튼이 아니라 글자 탭 + 활성 밑줄. 첫 탭 글자가 본문 제목과 같은 선에서 시작한다 */
.ws-tabs {
  display: flex;
  align-items: stretch;
  gap: 4rem;
  margin-left: var(--pad-x);
}

.ws-tab {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
  font-size: var(--fs-tab);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text-2);
}

.ws-tab[aria-current='true'] {
  color: var(--blue);
  font-weight: 800;
}

.ws-tab[aria-current='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0.4rem;
  border-radius: 0.2rem 0.2rem 0 0;
  background: var(--blue);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-left: auto;
  padding: 0 var(--pad-x) 0 2.4rem;
}

.tools-divider {
  width: 1px;
  height: 3.2rem;
  margin: 0 0.4rem;
  background: var(--line);
}

/* ── 사이드바 ─────────────────────────────────────────────────── */

.app-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 3.2rem var(--side-pad) 2.4rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.app[data-wall='1'] .app-sidebar {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* 메뉴가 넘치면 이 칸만 스크롤한다. 좌우로 사이드바 끝까지 넓혀 활성 막대(사이드바 왼쪽 끝)가 잘리지 않게 한다 */
.nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 calc(-1 * var(--side-pad));
  padding: 0 var(--side-pad);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.nav-caption {
  margin: 0 0 1.2rem;
  padding: 0 var(--item-pad);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
  min-height: 5.6rem;
  padding: 0.6rem var(--item-pad);
  border-radius: var(--radius-sm);
  font-size: var(--fs-menu);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-2);
}

.nav-icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--muted);
}

.nav-label {
  flex: 1 1 auto;
  min-width: 0;
  word-break: keep-all; /* 한국어는 띄어쓰기에서만 줄을 바꾼다 */
  overflow-wrap: anywhere;
}

.nav-count {
  flex: 0 0 auto;
  font-size: var(--fs-table);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.nav-chevron {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--muted);
  transition: transform 0.2s ease-out;
}

/* 활성 메뉴: 파란 글자 + 옅은 파란 바탕 + 왼쪽 0.4rem 막대(사이드바 끝) */
.nav-item[aria-current='page'] {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 800;
}

.nav-item[aria-current='page'] .nav-icon,
.nav-item[aria-current='page'] .nav-count {
  color: var(--blue);
}

.nav-item[aria-current='page']::before {
  content: '';
  position: absolute;
  top: 0.8rem;
  bottom: 0.8rem;
  left: calc(-1 * var(--side-pad));
  width: 0.4rem;
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--blue);
}

/* 상품 아코디언: 고른 상품만 펼친다. 펼친 상품 줄은 진한 글자, 활성 표시는 펼친 안쪽 메뉴가 갖는다 */
.nav-group.is-open > .nav-item {
  color: var(--ink);
  font-weight: 800;
}

.nav-group.is-open > .nav-item .nav-icon {
  color: var(--blue);
}

.nav-group.is-open > .nav-item .nav-chevron {
  transform: rotate(90deg);
  color: var(--ink);
}

/* 안쪽 메뉴: 아이콘 가운데를 지나는 1px 안내선, 글자는 위 상품 이름과 같은 선 */
.nav-sub {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.2rem 0 0.6rem calc(var(--item-pad) + 1.2rem - 0.5px);
  padding-left: 1.2rem;
  border-left: 1px solid var(--line);
}

.nav-subitem {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 4.8rem;
  padding: 0.4rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-menu);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-2);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.nav-subitem[aria-current='page'] {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 800;
}

/* 안쪽 메뉴의 막대는 안내선 위에 놓인다 */
.nav-subitem[aria-current='page']::before {
  content: '';
  position: absolute;
  top: 0.8rem;
  bottom: 0.8rem;
  left: calc(-1.4rem - 0.5px);
  width: 0.4rem;
  border-radius: 0.2rem;
  background: var(--blue);
}

@media (hover: hover) {
  .nav-item:not([aria-current='page']):hover,
  .nav-subitem:not([aria-current='page']):hover {
    background: var(--bg);
    color: var(--ink);
  }
}

/* 월 모드: 업무 전환(두 칸 분할 버튼) */
.ws-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 2.8rem;
  padding: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.ws-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 6.4rem;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-control);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--text-2);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.ws-switch-btn[aria-current='true'] {
  background: var(--blue);
  color: var(--on-fill);
}

/* 월 모드: 맨 아래 언어·처음으로. 사이드바 폭 전체의 1px 선으로 메뉴와 나눈다 */
.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem calc(-1 * var(--side-pad)) 0;
  padding: 2rem var(--side-pad) 0;
  border-top: 1px solid var(--line);
}

/* ── 본문과 페이지 ───────────────────────────────────────────── */

/* 본문: 남은 높이를 페이지에 준다. 페이지가 넘치면(목록 등) 본문만 스크롤한다 */
.app-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--pad-y) var(--pad-x);
}

/* 페이지 루트([data-page]): 본문의 남은 높이 전부. Main·지도처럼 스크롤 없이 들어가야 하는 화면은 이 안에서 flex로 나눈다 */
.page {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* 채움(fill) 없음: 끝나면 transform이 남지 않아 페이지가 position:fixed 자식(툴팁 등)의 기준 상자가 되지 않는다 */
.page-enter {
  animation: page-enter var(--enter) ease-out;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}