/* 전체 틀: 화면 가운데 둥근 "창" 하나 (1번 예시 컨셉)
   ╭ [탭]                      (─)(□)(✕) ╮
   │ (←)(→)(↻)(⌂)  ( 🔍 주소창 )         │  도구줄
   ├────────┬────────────────────────────┤
   │ 메뉴   │ 본문                       │
   ├────────┴────────────────────────────┤
   ╰            made by ...              ╯ */

.browser {
  width: min(1080px, calc(100% - 40px));
  margin: 44px auto 64px;
  background: var(--chrome);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--line) 22%, transparent);
}

/* ── 맨 위: 탭 + 창 버튼 ── */
.b-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 16px 0; }
.b-tabs { display: flex; gap: 6px; min-width: 0; }
.b-tab {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 18px 6px; margin-bottom: calc(var(--bw) * -1);
  background: var(--chrome-2);
  border: var(--bw) solid var(--line); border-bottom: 0;
  border-radius: 12px 12px 0 0;
  font-family: var(--pixel); font-size: 13px; text-decoration: none;
  position: relative; z-index: 1;
}
.b-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-tab .ico { color: var(--accent); }
.b-ctrl { display: flex; gap: 6px; padding-bottom: 10px; }
.b-ctrl i {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: var(--bw) solid var(--line); border-radius: 9px; background: var(--chrome-2);
  font-style: normal; font-size: 12px; font-weight: 800;
}

/* ── 도구줄: 동그란 버튼 + 주소창 ── */
.b-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--chrome-2);
  border-top: var(--bw) solid var(--line);
}
.b-nav {
  width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0;
  border: var(--bw) solid var(--line); border-radius: 50%; background: var(--chrome-2); color: var(--ink);
  font-size: 15px; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer;
}
.b-nav:hover { background: var(--pane); color: var(--accent); }
.b-nav svg { width: 17px; height: 17px; }
.b-url {
  flex: 1; min-width: 0; max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 18px; border: var(--bw) solid var(--line); border-radius: 999px;
  background: var(--chrome-2);
  font-family: var(--pixel); font-size: 13px;
  overflow: hidden; white-space: nowrap;
}
.b-url span { overflow: hidden; text-overflow: ellipsis; }
.b-url svg { width: 14px; height: 14px; flex-shrink: 0; }
.b-menu-btn { display: none; }

/* ── 본문: 왼쪽 메뉴 칸 | 내용 칸 ── */
.b-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  background: var(--pane);
  border-top: var(--bw) solid var(--line);
  border-bottom: var(--bw) solid var(--line);
}
.sidebar {
  padding: 20px 14px;
  background: var(--pane-2);
  border-right: var(--bw) solid var(--line);
  display: flex; flex-direction: column; gap: 18px;
}
.main { min-width: 0; padding: 26px 28px 32px; display: flex; flex-direction: column; gap: 22px; }

/* 왼쪽 메뉴 (티스토리 스킨의 폴더 목록 느낌) */
.menu-label { padding: 0 10px 6px; font-family: var(--pixel); font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--r-sm);
  font-family: var(--pixel); font-size: 13px; text-decoration: none;
  transition: background .15s, color .15s;
}
.menu .ico {
  width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0;
  border: var(--bw) solid var(--line); border-radius: 50%; background: var(--pane);
  font-size: 12px; color: var(--ink);
}
.menu a:hover { color: var(--accent); }
.menu a:hover .ico { border-color: var(--accent); color: var(--accent); }
.menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.menu a[aria-current="page"] .ico { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ── 바닥줄 ── */
.b-foot {
  padding: 9px 16px; text-align: center;
  font-size: 13px; font-style: italic; color: var(--dim);
}
.b-foot a { color: var(--ink); text-underline-offset: 3px; }

/* 페이지 머리 (각 페이지 맨 위 제목) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { display: flex; align-items: center; gap: 10px; font-family: var(--pixel); font-size: 18px; font-weight: normal; letter-spacing: .06em; }
.page-head h1::before { content: '✿'; color: var(--accent); }

/* ── 휴대폰·좁은 화면 ── */
@media (max-width: 860px) {
  .browser { width: auto; margin: 10px; border-radius: 16px; }
  .b-top { padding: 10px 10px 0; }
  .b-ctrl { padding-bottom: 8px; }
  .b-ctrl i { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
  .b-ctrl i:not(:last-child) { display: none; }
  .b-toolbar { padding: 8px 10px; gap: 6px; }
  .b-nav { width: 32px; height: 32px; }
  .b-nav.refresh { display: none; }
  .b-url { padding: 3px 12px; }
  .b-menu-btn { display: grid; }
  .b-body { grid-template-columns: minmax(0, 1fr); }
  /* 메뉴는 ☰ 버튼을 누르면 펼쳐짐 */
  .sidebar { display: none; border-right: 0; border-bottom: var(--bw) solid var(--line); padding: 14px; }
  .browser.menu-open .sidebar { display: flex; }
  .main { padding: 18px 16px 24px; }
}