/* 앱 셸 — 상단바 + 좌측 사이드바 + 본문 (D-115).
   구조 수치는 opensea.io 라이트 실측(docs/WEB_REDESIGN_OPENSEA.md), 색·타이포는
   기존 토스톤 토큰(tokens.css) 그대로. OpenSea의 로고·아이콘·서체는 쓰지 않는다.

   ⚠ 38개 템플릿이 layout.html 하나를 공유한다. 여기 클래스명을 바꾸면 전 페이지가 영향받는다. */

/* ── 상단바 ─────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 30;
  display: flex; align-items: center; gap: var(--s-lg); padding: 0 var(--s-xl);
  background: var(--bg, var(--background)); border-bottom: 1px solid var(--divider);
}
.topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; white-space: nowrap; }
.topbar .brand .dot { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--success); }
.topbar .brand b { color: var(--primary); }

/* 검색바를 상단바 정중앙에. `margin:auto`만으로는 좌(브랜드 110px)·우(액션 68px) 폭이
   달라 중앙에서 어긋난다(실측 21px). 좌우 영역에 같은 flex를 줘서 대칭을 만든다. */
.top-search {
  flex: 0 1 560px; display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text-tertiary); font-size: 14px;
}
.top-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; letter-spacing: inherit; color: var(--text-primary);
}
.top-search input::placeholder { color: var(--text-tertiary); }
.top-search kbd {
  font-family: inherit; font-size: 12px; color: var(--text-disabled);
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 1px 7px;
}

/* 검색바가 margin:auto로 중앙에 서므로 여기서 margin-left:auto를 주면 안 된다
   (중앙 정렬이 깨진다). 대신 좌측 브랜드와 대칭이 되도록 폭만 잡아 준다. */
.topbar .brand { flex: 1 1 0; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 0; }

/* 모드 전환 (D-123) — 세그먼트 컨트롤. 높이는 상단바의 다른 버튼(40px)과 맞춘다. */
.mode-toggle {
  display: inline-flex; align-items: center; padding: 3px; gap: 2px;
  height: 40px; border-radius: var(--r-full); background: var(--surface-alt);
  border: 1px solid var(--border);
}
.mode-toggle button {
  height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--text-tertiary);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.mode-toggle button:hover { color: var(--text-secondary); }
/* 선택된 쪽은 **메인 컬러 알약**. 흰 알약은 회색 트랙 위에서 대비가 약해
   "지금 어느 모드인지"가 한눈에 안 읽혔다(사용자 피드백). */
.mode-toggle button.on {
  background: var(--primary); color: #fff;
  box-shadow: 0 1px 3px rgba(49, 130, 246, .35);
}
.mode-toggle button.on:hover { color: #fff; }

/* 좁은 화면에서는 검색을 접고 토글을 남긴다 — 세무사에게는 검색보다 모드가 중요하다. */
@media (max-width: 720px) {
  .mode-toggle button { padding: 0 10px; font-size: 12px; }
}
/* 상단바 버튼은 검색바와 같은 높이(40px)로 맞춘다 — 기본 .btn(48px)은 너무 크다. */
.topbar .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary);
}
.icon-btn:hover { background: var(--surface-alt); }

/* ── 셸 ─────────────────────────────────────────────── */
.shell { display: flex; padding-top: var(--topbar-h); min-height: 100vh; }

.sidebar {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 20;
  width: var(--sidebar-w); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: 12px 10px;
  background: var(--bg, var(--background)); border-right: 1px solid var(--divider);
  transition: width .18s ease;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 12px; border-radius: var(--r-md);
  font-weight: 600; font-size: 15px; color: var(--text-secondary); white-space: nowrap;
}
.nav-item:hover { background: var(--surface-alt); }
.nav-item.active { background: var(--primary-light); color: var(--primary); }
.nav-item svg {
  flex: 0 0 22px; width: 22px; height: 22px;
  stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-sep { height: 1px; background: var(--divider); margin: 10px 8px; }
.nav-foot { margin-top: auto; }
.nav-logout { width: 100%; text-align: left; }

.collapse-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  height: 44px; padding: 0 12px; margin-top: 6px; border-radius: var(--r-md);
  color: var(--text-tertiary); font-weight: 600; font-size: 14px; white-space: nowrap;
}
.collapse-btn:hover { background: var(--surface-alt); }
.collapse-btn svg {
  flex: 0 0 22px; width: 22px; height: 22px;
  stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s;
}

/* 접힘(레일) — 라벨만 감추고 아이콘은 남긴다. */
html.rail .sidebar { width: var(--rail-w); padding: 12px 7px; }
html.rail .nav-item,
html.rail .collapse-btn { padding: 0 10px; gap: 0; justify-content: center; }
html.rail .nlabel { display: none; }
html.rail .collapse-btn svg { transform: rotate(180deg); }
html.rail .main { margin-left: var(--rail-w); }

.main {
  flex: 1; margin-left: var(--sidebar-w); min-width: 0;
  padding: 24px 28px 64px; transition: margin-left .18s ease;
  max-width: calc(var(--sidebar-w) + var(--shell-max));
}

/* 셸 안의 푸터 — 본문 흐름 끝에 붙는다. */
.shell-footer {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border);
  color: var(--text-tertiary); font-size: 13px;
}
.shell-footer a { color: var(--text-secondary); }

/* ── 모바일(≤768px): 사이드바를 드로어로 ───────────── */
.hamburger { display: none; }
.drawer-scrim { display: none; }
@media (max-width: 768px) {
  .hamburger { display: inline-flex; }
  .top-search { display: none; }
  .sidebar {
    width: var(--sidebar-w) !important; padding: 12px 10px !important;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  html.drawer-open .sidebar { transform: none; box-shadow: 0 8px 40px rgba(17, 31, 40, .18); }
  html.drawer-open .drawer-scrim {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 15;
    background: rgba(0, 0, 0, .35);
  }
  /* 모바일에선 접기 개념이 없다 — 라벨을 항상 보이게 되돌린다. */
  html.rail .nlabel { display: inline; }
  html.rail .nav-item, html.rail .collapse-btn { padding: 0 12px; gap: 12px; justify-content: flex-start; }
  .collapse-btn { display: none; }
  .main { margin-left: 0 !important; padding: 16px 16px 48px; }
}