/* ============================================================
   DRUMZONE · Layout
   헤더 / 푸터 / 컨테이너 / 섹션 / 그리드 / 페이지별 레이아웃
   브레이크포인트: 1200px(태블릿) · 768px(모바일)
   ============================================================ */

/* ------------------------------------------------------------
   Page frame — 푸터 바닥 고정
   본문이 짧아도(검색 결과 1건 · 로그인 · 오류 화면) 푸터가 화면 바닥에
   붙습니다. body 를 세로 flex 로 두고 main 이 남는 높이를 차지합니다.
   고정 요소(탭바 · 토스트 · 바텀시트)는 흐름 밖이라 영향이 없습니다.
   ------------------------------------------------------------ */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .dz-footer { flex-shrink: 0; margin-top: auto; }

/* ------------------------------------------------------------
   Container · Section
   ------------------------------------------------------------ */
.dz-container {
  width: 100%;
  max-width: calc(var(--dz-container) + var(--dz-gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--dz-gutter);
}
.dz-section { padding-block: var(--dz-sp-18); border-bottom: 1px solid var(--dz-line-soft); }
.dz-section--tight { padding-block: var(--dz-sp-14); }
.dz-section--raised { background: var(--dz-bg-raised); }

.dz-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dz-sp-5);
  flex-wrap: wrap;
}
.dz-section__head h2 { margin-top: var(--dz-sp-3); }

/* 섹션 번호 — 01, 02 … 에디토리얼 목차 느낌.
   main 안의 섹션에만, 머리표가 있을 때만 붙습니다. */
main { counter-reset: dz-sec; }
main .dz-section { counter-increment: dz-sec; }
main .dz-section__head .dz-eyebrow::before {
  content: counter(dz-sec, decimal-leading-zero);
  width: auto; height: auto;
  background: none;
  color: var(--dz-text-disabled);
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   Grid
   ------------------------------------------------------------ */
.dz-grid { display: grid; gap: var(--dz-sp-6); }
.dz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dz-sp-4); }
.dz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dz-sp-3); }
.dz-stack   { display: flex; flex-direction: column; gap: var(--dz-sp-3); }

@media (max-width: 1200px) {
  .dz-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dz-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .dz-grid--4,
  .dz-grid--5,
  .dz-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dz-sp-3); }
  .dz-grid--2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Global Header — 스크롤 시 내용이 비쳐 지나가는 반투명 바
   ------------------------------------------------------------ */
.dz-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--dz-header-h);
  background: color-mix(in srgb, var(--dz-bg) 76%, transparent);
  border-bottom: 1px solid var(--dz-line-soft);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
/* backdrop-filter 미지원 브라우저는 불투명 배경으로 */
@supports not (backdrop-filter: blur(1px)) {
  .dz-header { background: var(--dz-bg); }
}
.dz-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--dz-sp-6);
}
.dz-header__left { display: flex; align-items: center; gap: var(--dz-sp-10); min-width: 0; }
.dz-header__right { display: flex; align-items: center; gap: var(--dz-sp-2); }

.dz-logo {
  font-family: var(--dz-font-mono);
  font-weight: var(--dz-fw-mono); font-size: 19px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.dz-logo span { color: var(--dz-accent-fg); }

.dz-nav { display: flex; align-items: center; gap: 2px; }
.dz-nav a {
  position: relative;
  height: 36px; padding: 0 var(--dz-sp-3);
  display: inline-flex; align-items: center;
  color: var(--dz-text-3); font-size: var(--dz-fs-sm); font-weight: 500;
}
/* 밑줄이 자라는 방식 — 배경 알약 대신 */
.dz-nav a::after {
  content: "";
  position: absolute; left: var(--dz-sp-3); right: var(--dz-sp-3); bottom: 4px;
  height: 2px;
  background: var(--dz-accent-fg);
  border-radius: var(--dz-r-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dz-dur) var(--dz-ease);
}
.dz-nav a:hover { color: var(--dz-text); }
.dz-nav a:hover::after { transform: scaleX(1); }
.dz-nav a[aria-current="page"] { color: var(--dz-text); }
.dz-nav a[aria-current="page"]::after { transform: scaleX(1); }

.dz-header__burger { display: none; }

@media (max-width: 1200px) {
  .dz-header__left { gap: var(--dz-sp-6); }
  .dz-header .dz-search--sm { width: 190px; }
}
@media (max-width: 768px) {
  .dz-nav,
  .dz-header .dz-search--sm { display: none; }
  .dz-header__burger { display: inline-flex; }
  .dz-logo { font-size: 16px; }

  /* 모바일 헤더는 '로그인(또는 MY) + 메뉴' 두 개만 남깁니다.
     회원가입·관리자 진입은 각각 로그인 화면과 데스크톱에서 처리합니다. */
  .dz-header__inner { gap: var(--dz-sp-3); }
  .dz-header__right { gap: var(--dz-sp-2); min-width: 0; }
  .dz-header__right .dz-btn--primary,
  .dz-header__right .dz-btn--ghost.dz-btn--sm { display: none; }
  .dz-header .dz-btn { padding: 0 var(--dz-sp-4); }
}

/* ------------------------------------------------------------
   Mobile Tabbar — 모바일에서만 노출
   ------------------------------------------------------------ */
.dz-tabbar { display: none; }
@media (max-width: 768px) {
  .dz-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: var(--dz-tabbar-h);
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--dz-bg-raised) 88%, transparent);
    border-top: 1px solid var(--dz-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .dz-tabbar a {
    flex-grow: 1; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    color: var(--dz-text-4); font-size: 11px; font-weight: 500;
  }
  .dz-tabbar a[aria-current="page"] { color: var(--dz-accent-fg); }
  .dz-tabbar__mark { font-size: 17px; line-height: 1; }
}

/* ------------------------------------------------------------
   Hero (HOME) — 왼쪽 정렬 에디토리얼 + 무대 조명
   ------------------------------------------------------------ */
.dz-hero {
  position: relative; overflow: hidden;
  padding-block: var(--dz-sp-22) var(--dz-sp-18);
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left;
  border-bottom: 1px solid var(--dz-line-soft);
}
/* 오선 배경 — 아주 낮게 깔립니다 */
.dz-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.85; }
/* 무대 조명: 왼쪽 위에서 떨어지는 라임 글로우 한 줄기 */
.dz-hero::before {
  content: "";
  position: absolute;
  left: -25%; top: -80%;
  width: 95%; height: 175%;
  background: radial-gradient(closest-side, var(--dz-accent-soft), transparent 72%);
  pointer-events: none;
}
.dz-hero > *:not(.dz-hero__bg) { position: relative; width: 100%; }

.dz-hero__title {
  margin-top: var(--dz-sp-5);
  max-width: 16ch;
  font-size: var(--dz-fs-display);
  line-height: var(--dz-lh-display);
  letter-spacing: var(--dz-ls-display);
}
.dz-hero__sub { margin-top: var(--dz-sp-5); max-width: 46ch; font-size: var(--dz-fs-lg); color: var(--dz-text-3); }
.dz-hero__search { max-width: 640px; margin: var(--dz-sp-8) 0 0; }
.dz-hero__keywords { margin-top: var(--dz-sp-4); display: flex; align-items: center; gap: var(--dz-sp-2); flex-wrap: wrap; }
.dz-hero__cta { margin-top: var(--dz-sp-10); display: flex; align-items: center; gap: var(--dz-sp-4); flex-wrap: wrap; }

@media (max-width: 768px) {
  .dz-hero { padding-block: var(--dz-sp-12); }
  .dz-hero__title { max-width: none; }
  .dz-hero__cta { justify-content: stretch; }
  .dz-hero__cta > .dz-btn { flex-grow: 1; }
}

/* ------------------------------------------------------------
   Catalog (악보 목록) — 좌측 필터 + 우측 그리드
   ------------------------------------------------------------ */
.dz-catalog { display: flex; align-items: flex-start; gap: var(--dz-sp-10); padding-block: var(--dz-sp-10) var(--dz-sp-18); }
.dz-catalog__filters { width: 240px; flex-shrink: 0; position: sticky; top: calc(var(--dz-header-h) + var(--dz-sp-5)); }
.dz-catalog__results {
  flex-grow: 1; min-width: 0;
  /* 페이지 이동 시 이 지점으로 스크롤합니다 — 고정 헤더에 가려지지 않게 여백을 둡니다 */
  scroll-margin-top: calc(var(--dz-header-h) + var(--dz-sp-4));
}
.dz-filtergroup + .dz-filtergroup { margin-top: var(--dz-sp-6); padding-top: var(--dz-sp-6); border-top: 1px solid var(--dz-line-soft); }
.dz-filtergroup__title {
  margin-bottom: var(--dz-sp-3);
  font-family: var(--dz-font-mono); font-size: var(--dz-fs-eyebrow); font-weight: var(--dz-fw-mono);
  letter-spacing: var(--dz-ls-eyebrow); text-transform: uppercase;
  color: var(--dz-text-4);
}
.dz-filtergroup__opts { display: flex; flex-wrap: wrap; gap: var(--dz-sp-2); }

.dz-toolbar { display: flex; align-items: center; gap: var(--dz-sp-2); flex-wrap: wrap; }
.dz-mobile-filter { display: none; }

@media (max-width: 1200px) {
  .dz-catalog { gap: var(--dz-sp-8); }
  .dz-catalog__filters { width: 210px; }
}
@media (max-width: 768px) {
  /* 세로로 쌓일 때는 교차축을 늘려 줍니다. flex-start 로 두면 안쪽의 넓은 표가
     자식 폭을 밀어내 화면이 가로로 스크롤됩니다. */
  .dz-catalog { flex-direction: column; align-items: stretch; gap: var(--dz-sp-5); padding-block: var(--dz-sp-5) var(--dz-sp-12); }
  .dz-catalog__filters { display: none; }
  .dz-catalog__results { width: 100%; }
  .dz-mobile-filter { display: inline-flex; }
}

/* ------------------------------------------------------------
   Detail (악보 상세) — 좌측 미리보기 + 우측 정보
   ------------------------------------------------------------ */
.dz-detail { display: flex; align-items: flex-start; gap: var(--dz-sp-10); padding-top: var(--dz-sp-6); }
/* 미리보기는 페이지와 함께 스크롤합니다. 이전에는 sticky 로 화면에 붙어 따라왔는데,
   본문을 읽는 동안 악보가 오르내리는 것처럼 보여 정적으로 바꿨습니다. */
.dz-detail__preview { width: 600px; flex-shrink: 0; }
.dz-detail__info { flex-grow: 1; min-width: 0; }

@media (max-width: 1200px) {
  .dz-detail { gap: var(--dz-sp-6); }
  .dz-detail__preview { width: 45%; }
}
@media (max-width: 768px) {
  .dz-detail { flex-direction: column; align-items: stretch; gap: var(--dz-sp-6); }
  .dz-detail__preview { width: 100%; position: static; }
}

/* ------------------------------------------------------------
   Checkout / MY / Admin — 본문 + 사이드
   ------------------------------------------------------------ */
.dz-split { display: flex; align-items: flex-start; gap: var(--dz-sp-8); }
.dz-split__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--dz-sp-5); }
.dz-split__side { width: 380px; flex-shrink: 0; position: sticky; top: calc(var(--dz-header-h) + var(--dz-sp-5)); }

.dz-admin__nav { width: 210px; flex-shrink: 0; }
.dz-admin__nav a {
  height: 42px; padding: 0 var(--dz-sp-4);
  display: flex; align-items: center;
  border-radius: var(--dz-r-full);
  color: var(--dz-text-3); font-size: var(--dz-fs-sm); font-weight: 500;
}
.dz-admin__nav a[aria-current="page"] { background: var(--dz-accent-panel); color: var(--dz-accent-fg); }
.dz-admin__nav a:hover { background: var(--dz-surface-hover); }

@media (max-width: 1200px) {
  .dz-split__side { width: 320px; }
}
@media (max-width: 768px) {
  .dz-split { flex-direction: column; align-items: stretch; gap: var(--dz-sp-5); }
  .dz-split__side, .dz-admin__nav { width: 100%; position: static; }
  .dz-admin__nav .dz-stack { flex-direction: row; overflow-x: auto; }
  .dz-table-wrap { overflow-x: auto; }
  .dz-table { min-width: 640px; }
}

/* 좁은 화면에서 인증 폼은 가운데 정렬 */
.dz-narrow { max-width: 420px; margin: 0 auto; padding-block: var(--dz-sp-18); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.dz-footer { background: var(--dz-bg-sunken); padding-block: var(--dz-sp-14); }
.dz-footer__inner { display: flex; justify-content: space-between; gap: var(--dz-sp-10); flex-wrap: wrap; }
.dz-footer__brand { max-width: 440px; }
.dz-footer__cols { display: flex; gap: var(--dz-sp-18); }
.dz-footer__cols h3 {
  margin-bottom: var(--dz-sp-4);
  font-family: var(--dz-font-mono); font-size: var(--dz-fs-eyebrow); font-weight: var(--dz-fw-mono);
  letter-spacing: var(--dz-ls-eyebrow); text-transform: uppercase;
  color: var(--dz-text-4);
}
.dz-footer__cols li + li { margin-top: 10px; }
.dz-footer__cols a { font-size: var(--dz-fs-sm); color: var(--dz-text-2); }

@media (max-width: 768px) {
  .dz-footer { padding-block: var(--dz-sp-10); }
  .dz-footer__cols { gap: var(--dz-sp-10); }
}