/* ══════════════════════════════════════════════════════
   responsive-desktop.css
   데스크탑 반응형 — PC / 노트북
   대상: 1024px 이상
   ══════════════════════════════════════════════════════
   Breakpoints:
     표준 PC / 노트북 : 1024px+  (MacBook 13", FHD 1080p)
     중간 와이드       : 1280px+  (MacBook 14"/16", QHD)
     와이드 모니터     : 1440px+  (27" 2K)
     울트라 와이드     : 1920px+  (FHD 듀얼, 4K)
   ══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   1. 표준 PC / 노트북 (1024px ~ 1279px)
   ────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --sheet-max: 800px; }
  .app-wrap { max-width: calc(100% - 40px); padding: 0 20px; }
  #bottom-nav { max-width: calc(100% - 40px); }
  #mini-player { max-width: calc(100% - 40px); left: 0; right: 0; margin: 0 auto; }

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

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

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

  /* 장르: 6열 */
  .genre-btn-grid, .mood-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .genre-btn { padding: 12px 6px 8px; font-size: 12px; }
  .genre-ico { font-size: 24px !important; }
  .mood-chip { font-size: 11px; padding: 8px 4px; }
  .mood-ico { font-size: 20px !important; }
  .adv-instrument-grid { grid-template-columns: repeat(6, 1fr); }

  /* 생성 폼: 2열 그리드 */
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .opt-group { min-width: 0; }

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

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

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

  /* 커뮤니티: 3열 */
  .comm-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .comm-list-item { margin-bottom: 0; }
  .comm-featured-cover { height: 260px; }

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

  /* 풀플레이어 */
  .fp-inner { max-width: 100%; padding: 0 20px; }
  .fp-cover-wrap { position: absolute; inset: 0; z-index: 0; }
  .fp-cover { width: 100%; height: 100%; opacity: .3; }
  .fp-bg { filter: blur(100px) brightness(.15) saturate(2); }
  .fp-side-btn { width: 48px; height: 48px; }
  .fp-play-btn { width: 80px; height: 80px; }
  .fp-play-btn svg { width: 36px; height: 36px; }
  .fp-ctrl-btn { width: 56px; height: 56px; }
  .fp-controls { gap: 32px; }
  .fp-scroll { padding: 0 60px 40px; }
  .fp-title { font-size: 30px; }
  .fp-tags { font-size: 15px; }
  .fp-prog-time { font-size: 13px; }
  .fp-prog-wrap { height: 6px; }
  .fp-lyrics-box { font-size: 17px; }
  .fp-lline { font-size: 17px; line-height: 2.2; }

  /* 모달/시트 폭 확장 */
  .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: 700px; }
  .share-confirm-panel, .asp-modal, .glp-modal,
  .lyrics-gen-box { max-width: min(90vw, var(--sheet-max, 480px)); }
  #claude-chat-panel { max-width: 700px; height: 80vh; }

  /* 바텀시트 */
  .rv-popup  { max-width: 460px; }
  .rv-sheet  { max-width: 600px; }
  .rv-wide   { max-width: 720px; }

  /* 설정 */
  #settings-view .settings-section { max-width: none; }
  .preset-carousel { max-width: none; }

  /* 로딩뷰 */
  .loading-card.on { padding: 32px 28px; }
  .loading-card.on::before { width: 560px; height: 560px; }
  .ld-ring-wrap { width: 200px; height: 200px; margin-bottom: 20px; }
  .ld-waveform { height: 40px; gap: 5px; }
  .ld-bar { width: 6px; }
  #ld-percent { font-size: 36px !important; }
  #ld-eta { font-size: 15px !important; }
  #ld-sub { font-size: 16px !important; }
  .ld-tip-card { font-size: 15px; max-width: 600px; }
  .ld-step-wrap { max-width: 600px; }

  /* 스플래시 */
  .splash-logo { font-size: 72px; }
  .splash-domain { font-size: 18px; }
  .splash-card { padding: 40px 64px; border-radius: 32px; }
  .splash-glow-ring { width: 420px; height: 420px; }
  .splash-insight { font-size: 16px; }

}

/* ──────────────────────────────────────────────────────
   2. 중간 와이드 (1280px ~ 1439px) — MacBook 14", QHD
   ────────────────────────────────────────────────────── */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root { --sheet-max: 860px; }
  .app-wrap { max-width: calc(100% - 48px); padding: 0 24px; }
  #bottom-nav { max-width: calc(100% - 48px); }
  #mini-player { max-width: calc(100% - 48px); }

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

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

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

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

/* ──────────────────────────────────────────────────────
   3. 와이드 데스크탑 (1440px ~ 1919px) — 1440x900, 27" 2K
   ────────────────────────────────────────────────────── */
@media (min-width: 1440px) and (max-width: 1919px) {
  :root { --sheet-max: 960px; }
  .app-wrap { max-width: calc(100% - 48px); padding: 0 24px; }
  #bottom-nav { max-width: calc(100% - 48px); }
  #mini-player { max-width: calc(100% - 48px); left: 0; right: 0; margin: 0 auto; }

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

  /* 커뮤니티: 4열 */
  .comm-list { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .comm-list-item { margin-bottom: 0; }

  /* 결과 카드: 3열 */
  .results-inner { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .batch-cards-wrap { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .rc-cover { height: 220px; }

  /* 모달/시트 */
  .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: 800px; }
  #claude-chat-panel { max-width: 800px; }

  /* 바텀시트 */
  .rv-popup  { max-width: 480px; }
  .rv-sheet  { max-width: 660px; }
  .rv-wide   { max-width: 800px; }

  /* 섹션 */
  .section-title { font-size: 32px; }
  .create-hero-title { font-size: 36px; }
  .prompt-area { min-height: 160px; }
}

/* ──────────────────────────────────────────────────────
   4. 울트라 와이드 (1920px+) — 4K, FHD 듀얼 모니터
   ────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  :root { --sheet-max: 1000px; }
  .app-wrap { max-width: calc(100% - 80px); padding: 0 40px; }
  #bottom-nav { max-width: calc(100% - 80px); }
  #mini-player { max-width: calc(100% - 80px); }

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

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

  /* 결과 카드: 4열 */
  .results-inner { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .batch-cards-wrap { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .rc-cover { height: 240px; }

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

  /* 섹션 */
  .section-title { font-size: 36px; }
  .create-hero-title { font-size: 40px; }
  .create-hero-sub { font-size: 18px; }
  .prompt-area { min-height: 180px; font-size: 16px; }
  .logo { font-size: 24px; }

  /* 모달 */
  .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: 900px; }
  #claude-chat-panel { max-width: 900px; height: 80vh; }
}

/* ──────────────────────────────────────────────────────
   5. 데스크탑 공통 — 마우스 hover 효과 강화
   ────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────
   6. 다크모드 — 데스크탑 해상도 보정 (1024px+)
   ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* 다크모드 — 큰 화면에서 카드/컨테이너 경계 + 그림자 강화 */
  :root:not([data-theme="light"]) .app-wrap,
  body:not([data-theme="light"]) .app-wrap { background: var(--bg); }
  :root:not([data-theme="light"]) .hist-card,
  body:not([data-theme="light"]) .hist-card { background: var(--card); border: 1px solid var(--border2); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
  :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 4px 16px rgba(0,0,0,.3); border-radius: var(--r); }
  :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 20px rgba(0,0,0,.35); }
  :root:not([data-theme="light"]) .prompt-card,
  body:not([data-theme="light"]) .prompt-card { background: var(--card); border: 1px solid var(--border2); }
  :root:not([data-theme="light"]) .settings-card,
  body:not([data-theme="light"]) .settings-card { background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.25); }
  :root:not([data-theme="light"]) .plan-card,
  body:not([data-theme="light"]) .plan-card { background: var(--card); border: 1px solid var(--border2); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
  :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"]) .app-header,
  body:not([data-theme="light"]) .app-header { border-bottom: 1px solid var(--border); }
  :root:not([data-theme="light"]) #bottom-nav,
  body:not([data-theme="light"]) #bottom-nav { border-top: 1px solid var(--border); }
  :root:not([data-theme="light"]) #mini-player,
  body:not([data-theme="light"]) #mini-player { border-top: 1px solid var(--border2); box-shadow: 0 -4px 20px rgba(0,0,0,.4); }

  /* 다크모드 풀플레이어 — 데스크탑 커버 블러 강화 */
  :root:not([data-theme="light"]) .fp-bg,
  body:not([data-theme="light"]) .fp-bg { filter: blur(100px) brightness(.15) saturate(2); }

  /* 다크모드 — 모달/시트 배경 */
  :root:not([data-theme="light"]) .ai-sheet-box,
  body:not([data-theme="light"]) .ai-sheet-box { background: var(--card); border: 1px solid var(--border2); box-shadow: 0 8px 40px rgba(0,0,0,.5); }

  /* 라이트모드 — 데스크탑 카드 보정 */
  [data-theme="light"] .hist-card { background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
  [data-theme="light"] .comm-list-item { background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 8px rgba(0,0,0,.04); border-radius: var(--r); }
  [data-theme="light"] .result-card { background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 12px 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); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
  [data-theme="light"] .plan-card { background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  [data-theme="light"] .app-header { border-bottom: 1px solid rgba(0,0,0,.06); }
  [data-theme="light"] #bottom-nav { border-top: 1px solid rgba(0,0,0,.06); }
  [data-theme="light"] #mini-player { border-top: 1px solid rgba(0,0,0,.08); box-shadow: 0 -2px 12px rgba(0,0,0,.06); }
  [data-theme="light"] .ai-sheet-box { background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 8px 40px rgba(0,0,0,.12); }
  [data-theme="light"] .fp-bg { filter: blur(100px) brightness(1.3) saturate(.4); opacity: .18; }
}

@media (min-width: 1024px) and (hover: hover) {
  /* 카드 hover 효과 — 다크모드 */
  :root:not([data-theme="light"]) .hist-card:hover,
  body:not([data-theme="light"]) .hist-card:hover { background: rgba(124, 58, 237, .08); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
  :root:not([data-theme="light"]) .comm-list-item:hover,
  body:not([data-theme="light"]) .comm-list-item:hover { background: rgba(124, 58, 237, .06); transform: translateY(-1px); }
  :root:not([data-theme="light"]) .result-card:hover,
  body:not([data-theme="light"]) .result-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.4); transform: translateY(-1px); }
  /* 카드 hover 효과 — 라이트모드 */
  [data-theme="light"] .hist-card:hover { background: rgba(124, 58, 237, .04); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
  [data-theme="light"] .comm-list-item:hover { background: rgba(124, 58, 237, .03); transform: translateY(-1px); }
  [data-theme="light"] .result-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-1px); }
  /* 공통 hover */
  .spotlight-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
  .mood-card:hover { transform: scale(1.02); }
  .attend-banner:hover { transform: translateY(-2px); }
  .genre-btn:hover { transform: translateY(-1px); }

  /* 버튼 hover */
  .gen-btn:hover { transform: translateY(-2px); }
  .fp-side-btn:hover { background: rgba(255,255,255,.15); }
  .fp-ctrl-btn:hover { background: rgba(255,255,255,.1); }

  /* 커서 */
  .hist-card, .comm-list-item, .spotlight-card, .mood-card,
  .genre-btn, .chart-item { cursor: pointer; }

}