/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* 글로벌 리셋 + 반응형 베이스. 컴포넌트별 inline style 과 함께 사용. */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;     /* iOS 가로전환 시 자동 폰트 확대 방지 */
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }
a { color: #0066cc; }


/* =============================================================
 * AppHeader — 데스크톱 inline / 모바일 navbar 분리
 * ============================================================= */

.app-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.app-header__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.app-header__crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.app-header__crumb-label {
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__nav-desktop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.app-header__nav-mobile { display: none; }
.app-header__user-mobile { display: none; }

/* =============================================================
 * 모바일 (≤ 640px) — navbar 별도 row
 * ============================================================= */

@media (max-width: 640px) {
  .app-header { padding-bottom: 0; }
  .app-header__main {
    padding-bottom: 12px;
  }
  .app-header__brand h1 { font-size: 18px !important; }

  /* 데스크톱 nav 숨김, 모바일 우측에는 admin 뱃지만 */
  .app-header__nav-desktop { display: none; }
  .app-header__user-mobile {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* 모바일 네비게이션 — 헤더 아래 별도 row */
  .app-header__nav-mobile {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-header__nav-mobile__item {
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .app-header__nav-mobile__item--primary {
    background: #0066cc;
    color: #fff;
    border-color: #0066cc;
  }

  /* 페이지 좌우 여백 압축 */
  .responsive-page { padding-left: 12px !important; padding-right: 12px !important; margin-top: 16px !important; }
}

/* 작은 화면 공통 — 페이지 컴포넌트별 적응 */
@media (max-width: 640px) {
  /* 책 상세 hero — 표지 + 메타 가로 배치를 세로로 */
  .detail-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .detail-hero__cover {
    align-self: center;
  }

  /* 메타데이터 표 — 셀 wrap */
  .detail-meta-table td {
    word-break: break-all;
  }

  /* 액션 버튼들 — 줄바꿈 + 같은 폭 */
  .detail-actions { width: 100%; }
  .detail-actions a, .detail-actions button {
    flex: 1 1 100%;
    text-align: center;
  }

  /* 리스트 카드 — 패딩 줄임 */
  .book-card { padding: 12px !important; }
  .book-card__meta { font-size: 12px !important; }

  /* Reader — TOC 사이드바를 화면 전체 폭의 드로어(오버레이)로 */
  .reader-aside {
    position: absolute !important;
    top: 0; bottom: 0; left: 0;
    width: 86vw !important;
    max-width: 320px;
    z-index: 20;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease-out;
    /* 모바일에선 React 가 display 를 끄지 않게 inline 으로 강제 */
    display: block !important;
  }
  .reader-aside--closed {
    transform: translateX(-105%);
  }
  /* 모바일 — 드로어 닫혀있으면 백드롭도 숨김 */
  .reader-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 15;
  }

  /* Reader 헤더 — 진행률 표시 같은 부가 요소 압축 */
  .reader-header__progress { display: none; }
  .reader-header__title { font-size: 13px !important; }
}

/* 데스크톱에서는 백드롭 숨김, 사이드바는 React 측 inline display 가 결정 */
@media (min-width: 641px) {
  .reader-backdrop { display: none; }
  .reader-aside { transform: none !important; }
}