/* ══════════════════════════════════════════════════════
   responsive-tablet.css
   태블릿 반응형 — iPad / Galaxy Tab
   대상: 600px ~ 1023px
   ══════════════════════════════════════════════════════
   Breakpoints:
     소형 태블릿      : 600px+  (iPad mini 세로, Galaxy Tab A)
     iPad mini        : 744px+  (iPad mini 가로 / iPad 세로 기준)
     iPad / Galaxy Tab: 768px+  (표준 태블릿)
     iPad Air/Pro 11" : 820px+
     iPad Pro 12.9"   : 1024px  (→ desktop로 처리)
   ══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   1. 소형 태블릿 (600px ~ 743px) — Galaxy Tab A, iPad mini 세로
   ────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 743px) {
  :root { --sheet-max: 560px; }
  .app-wrap { max-width: 580px; }
  #bottom-nav { max-width: 580px; }
  #mini-player { max-width: 580px; left: 0; right: 0; margin: 0 auto; }
  #fullplayer .fp-inner { max-width: 100%; }

  /* 2열 그리드 시작 */
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .genre-btn-grid, .mood-grid { grid-template-columns: repeat(5, 1fr); }
  .adv-instrument-grid { grid-template-columns: repeat(5, 1fr); }
  .comm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .comm-list-item { margin-bottom: 0; }

  /* 폰트/여백 확대 */
  .section-title { font-size: 22px; }
  .create-hero-title { font-size: 26px; }
  .prompt-card { padding: 16px; }
  .prompt-area { min-height: 100px; }

  /* 바텀시트 폭 */
  .rv-popup  { max-width: 420px; }
  .rv-sheet  { max-width: 540px; }
  .rv-wide   { max-width: 640px; }
}

/* ──────────────────────────────────────────────────────
   2. 표준 태블릿 (744px ~ 1023px) — iPad mini 가로, iPad, Galaxy Tab S
   ────────────────────────────────────────────────────── */
@media (min-width: 744px) and (max-width: 1023px) {
  :root { --sheet-max: 680px; }
  .app-wrap { max-width: 720px; }
  #bottom-nav { max-width: 720px; }
  #mini-player { max-width: 720px; left: 0; right: 0; margin: 0 auto; }
  #fullplayer .fp-inner { max-width: 100%; }

  /* 헤더 */
  .app-header { padding: 16px 24px 14px; }
  .logo { font-size: 20px; }

  /* 섹션 */
  .section-title { font-size: 26px; }
  .create-hero-title { font-size: 30px; }
  .create-hero-sub { font-size: 15px; }

  /* 프롬프트 카드 */
  .prompt-card { padding: 20px; }
  .prompt-area { min-height: 120px; font-size: 15px; }
  .form-input { font-size: 15px; padding: 12px; }

  /* 장르/분위기 — 5열 */
  .genre-btn-grid, .mood-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .genre-btn { padding: 12px 6px 8px; font-size: 11px; }
  .genre-ico { font-size: 22px !important; }
  .mood-chip { font-size: 11px; padding: 8px 4px; }
  .mood-ico { font-size: 18px !important; }

  /* 생성 폼: 2열 그리드 */
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .opt-group { min-width: 0; }
  /* 악기 그리드: 5열 */
  .adv-instrument-grid { grid-template-columns: repeat(5, 1fr); }

  /* 생성 버튼 */
  .gen-btn { padding: 16px; font-size: 16px; }

  /* 결과 카드 */
  .results-inner { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .batch-cards-wrap { width: 100%; }
  .rc-cover { height: 200px; }

  /* 히스토리 그리드: 3열 */
  .hist-view-grid.grid-mode { grid-template-columns: repeat(3, 1fr) !important; }

  /* 커뮤니티 카드: 2열 */
  .comm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .comm-list-item { margin-bottom: 0; }
  .comm-reaction-sm { padding: 5px 10px; }
  .comm-list-actions { gap: 8px; }
  .comm-featured-cover { height: 240px; }
  .comm-featured-title { font-size: 20px; }

  /* 바텀 네비 */
  .bnav-label { font-size: 11px; }
  .bnav-svg { width: 24px; height: 24px; }

  /* 미니플레이어 */
  #mini-player .mp-body { padding: 8px 14px; }
  .mp-title { font-size: 15px; }
  .mp-controls { gap: 10px; }

  /* 풀플레이어 — 태블릿 레이아웃 */
  .fp-inner { max-width: 100%; padding: 0 10px; }
  .fp-scroll { padding: 0 40px 32px; }
  .fp-title { font-size: 28px; }
  .fp-tags { font-size: 14px; }
  .fp-play-btn { width: 76px; height: 76px; }
  .fp-play-btn svg { width: 50px; height: 50px; }
  .fp-ctrl-btn { width: 52px; height: 52px; }
  .fp-ctrl-btn svg { width: 34px; height: 34px; }
  .fp-controls { gap: 28px; margin-bottom: 22px; }
  .fp-prog-section { margin-top: 28px; }
  .fp-prog-wrap { height: 5px; }
  .fp-prog-time { font-size: 12px; }
  .fp-extra-controls { gap: 18px; }
  .fp-extra-btn { font-size: 13px; }
  .fp-extra-label { font-size: 11px; }
  .fp-header { padding: env(safe-area-inset-top, 50px) 32px 12px; }
  .fp-lyrics-box { font-size: 16px; }
  .fp-lline { font-size: 16px; line-height: 2.2; }
  .fp-side-actions { gap: 12px; }
  .fp-side-btn { width: 46px; height: 46px; }
  .fp-cover-wrap { position: absolute; inset: 0; z-index: 0; }
  .fp-cover { width: 100%; height: 100%; opacity: .35; }
  .fp-bg { filter: blur(80px) brightness(.18) saturate(1.8); }

  /* 모달/시트 폭 확장 */
  .ai-sheet-box, .hes-sheet, .modal, .rc-sheet-box,
  .hes-panel, .fes-panel, .mds-panel, .queue-panel, .dm-panel,
  .comment-sheet, .share-panel, .report-sheet, .comm-share-box,
  .rc-sheet-panel { max-width: 600px; }
  .share-confirm-panel, .asp-modal, .glp-modal,
  .lyrics-gen-box { max-width: min(88vw, 420px); }
  #claude-chat-panel { max-width: 600px; height: 75vh; }

  /* 바텀시트 */
  .rv-popup  { max-width: 420px; }
  .rv-sheet  { max-width: 540px; }
  .rv-wide   { max-width: 640px; }

  /* 설정 */
  .settings-section { max-width: none; margin-bottom: 16px; }

  /* 로딩뷰 */
  .loading-card.on { padding: 32px 28px env(safe-area-inset-bottom, 24px); }
  .loading-card.on::before { width: 480px; height: 480px; }
  .ld-ring-wrap { width: 180px; height: 180px; margin-bottom: 16px; }
  .ld-waveform { height: 36px; gap: 4px; }
  .ld-bar { width: 5px; }
  .ld-mode-badge { font-size: 13px; padding: 8px 20px; }
  #ld-percent { font-size: 32px !important; }
  #ld-eta { font-size: 14px !important; }
  #ld-sub { font-size: 15px !important; }
  .ld-tip-card { font-size: 14px; max-width: 500px; }
  .ld-step-wrap { max-width: 500px; }

  /* 스플래시 */
  .splash-logo { font-size: 60px; }
  .splash-domain { font-size: 16px; }
  .splash-card { padding: 36px 56px; border-radius: 28px; }
  .splash-glow-ring { width: 340px; height: 340px; }
  .splash-dot { width: 10px; height: 10px; }
  .splash-insight { font-size: 15px; }

  /* 스크롤바 폭 */
  ::-webkit-scrollbar { width: 4px; }
}

/* ──────────────────────────────────────────────────────
   3. iPad Air / iPad Pro 11" (820px ~ 1023px)
   ────────────────────────────────────────────────────── */
@media (min-width: 820px) and (max-width: 1023px) {
  :root { --sheet-max: 740px; }
  .app-wrap { max-width: 780px; }
  #bottom-nav { max-width: 780px; }
  #mini-player { max-width: 780px; }

  /* 히스토리 그리드: 4열 */
  .hist-view-grid.grid-mode { grid-template-columns: repeat(4, 1fr) !important; }

  /* 커뮤니티: 3열 */
  .comm-list { grid-template-columns: repeat(3, 1fr); }

  /* 장르: 6열 */
  .genre-btn-grid, .mood-grid { grid-template-columns: repeat(6, 1fr); }
  .adv-instrument-grid { grid-template-columns: repeat(6, 1fr); }

  /* 결과 카드: 2열 */
  .results-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .batch-cards-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .rc-cover { height: 210px; }

  /* 모달 폭 */
  .ai-sheet-box, .hes-sheet, .modal, .rc-sheet-box,
  .hes-panel, .fes-panel, .mds-panel, .queue-panel, .dm-panel,
  .comment-sheet, .share-panel, .report-sheet, .comm-share-box,
  .rc-sheet-panel { max-width: 680px; }
  #claude-chat-panel { max-width: 680px; }
}

/* ──────────────────────────────────────────────────────
   4. 태블릿 가로 모드 / 큰 화면 높이
   ────────────────────────────────────────────────────── */
@media (min-width: 744px) and (min-height: 900px) {
  /* 풀플레이어 커버 영역 확장 */
  .fp-cover-wrap { position: absolute; inset: 0; z-index: 0; }
  .fp-cover { width: 100%; height: 100%; opacity: .3; }
  .fp-bg { filter: blur(90px) brightness(.16) saturate(2); }
  .fp-lyrics-main { max-height: 50vh; }
}

/* ──────────────────────────────────────────────────────
   5. 다크모드 — 태블릿 해상도 보정 (600px+)
   ────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  /* 다크모드 카드/배경 — 큰 화면에서 경계 강화 */
  :root:not([data-theme="light"]) .hist-card,
  body:not([data-theme="light"]) .hist-card { background: var(--card); border: 1px solid var(--border2); box-shadow: var(--card-shadow); }
  :root:not([data-theme="light"]) .comm-list-item,
  body:not([data-theme="light"]) .comm-list-item { background: var(--card); border: 1px solid var(--border2); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
  :root:not([data-theme="light"]) .result-card,
  body:not([data-theme="light"]) .result-card { background: var(--card); border: 1px solid var(--border2); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
  :root:not([data-theme="light"]) .prompt-card,
  body:not([data-theme="light"]) .prompt-card { background: var(--card); border: 1px solid var(--border); }
  :root:not([data-theme="light"]) .settings-card,
  body:not([data-theme="light"]) .settings-card { background: var(--card); border: 1px solid var(--border); }
  :root:not([data-theme="light"]) .plan-card,
  body:not([data-theme="light"]) .plan-card { background: var(--card); border: 1px solid var(--border); }
  :root:not([data-theme="light"]) .mode-panel,
  body:not([data-theme="light"]) .mode-panel { background: var(--card); border: 1px solid var(--border); }

  /* 다크모드 풀플레이어 — 태블릿에서 커버 선명도 */
  :root:not([data-theme="light"]) .fp-bg,
  body:not([data-theme="light"]) .fp-bg { filter: blur(80px) brightness(.18) saturate(1.8); }

  /* 라이트모드 — 태블릿 그리드 카드 보정 */
  [data-theme="light"] .hist-card { background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
  [data-theme="light"] .comm-list-item { background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
  [data-theme="light"] .result-card { background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
  [data-theme="light"] .prompt-card { background: #fff; border: 1px solid rgba(0,0,0,.04); box-shadow: none; }
  [data-theme="light"] .settings-card { background: #fff; border: 1px solid rgba(0,0,0,.04); }
  [data-theme="light"] .plan-card { background: #fff; border: 1px solid rgba(0,0,0,.06); }
  [data-theme="light"] .mode-panel { background: #fff; border: 1px solid transparent; box-shadow: none; }
  [data-theme="light"] .fp-bg { filter: blur(80px) brightness(1.3) saturate(.4); opacity: .18; }
}