/**
 * YouTube BoosTer — PC·모바일 공통 반응형
 * 데스크톱: 기존 레이아웃 유지 / 모바일: 줄바꿈·터치 영역·가로 스크롤 방지
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* ── 태블릿 ─────────────────────────────────── */
@media (max-width: 1024px) {
  .container {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
  }

  .plans-wrap,
  .plans-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── 모바일 (세로 위주) ─────────────────────── */
@media (max-width: 768px) {
  /* 상단 바: 높이 자동, 두 줄까지 자연스럽게 */
  nav,
  header {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 52px;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-bottom: 10px !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    gap: 10px;
    row-gap: 8px;
  }

  nav > .logo,
  header > .logo,
  nav > a.logo {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
  }

  .nav-right,
  header nav,
  .nav-links {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 8px;
    row-gap: 8px;
    max-width: 100%;
  }

  /* 링크·버튼 터치 최소 영역 */
  .nav-right a,
  header nav a,
  .nav-links a,
  .nav-right .btn-nav-ghost,
  .btn-logout {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 10px;
  }

  /* 대시보드 입력 행 */
  .cbi-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cbi-field {
    min-width: 100% !important;
    width: 100%;
  }

  .btn-cbi,
  .btn-cbi-secondary {
    width: 100% !important;
    align-self: stretch !important;
    min-height: 48px;
    justify-content: center;
  }

  /* 트렌드: 플랜 바 */
  .plan-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left;
  }

  .plan-bar > a:last-child {
    width: 100%;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 키워드 / 유튜브 행 */
  .keyword-item {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    padding: 14px 0;
  }

  .kw-name {
    flex: 1 1 100%;
    order: 2;
    padding-left: 38px;
    margin-top: -4px;
  }

  .kw-rank {
    order: 1;
  }

  .kw-growth {
    order: 3;
    margin-left: auto;
  }

  .yt-item {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    padding: 14px 0;
  }

  .yt-num {
    width: 24px;
  }

  .yt-title {
    flex: 1 1 100%;
    order: 3;
    padding-left: 0;
    margin-top: 4px;
    font-size: 14px !important;
    line-height: 1.5;
  }

  .yt-cat {
    order: 2;
  }

  .yt-views {
    order: 4;
    margin-left: auto;
    align-self: flex-start;
  }

  /* 캘린더 생성 폼 */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .btn-generate {
    width: 100%;
    min-height: 48px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .cal-grid {
    grid-template-columns: 1fr !important;
  }

  /* 캘린더 뷰: 월 그리드 — 작은 화면에서 스크롤 허용 */
  .month-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(7, minmax(40px, 1fr));
    gap: 3px;
    padding-bottom: 8px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .day-cell {
    min-height: 72px !important;
    padding: 5px !important;
  }

  .day-title {
    font-size: 9px !important;
    -webkit-line-clamp: 2;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .page-header .btn,
  .page-header a.btn {
    width: 100%;
    justify-content: center;
  }

  .stats-bar {
    flex-direction: column;
  }

  .stat-chip {
    min-width: 100% !important;
  }

  .view-toggle {
    flex-wrap: wrap;
  }

  .view-btn {
    flex: 1;
    min-width: calc(50% - 4px);
    min-height: 44px;
  }

  /* 요금제 */
  .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero h1 {
    font-size: clamp(24px, 8vw, 40px) !important;
  }

  .plans-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .plans-grid {
    grid-template-columns: 1fr !important;
  }

  .current-plan,
  .founding-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* 모달 */
  .modal,
  .modal-box {
    margin: max(12px, env(safe-area-inset-top)) 12px 12px !important;
    max-height: min(88vh, calc(100vh - env(safe-area-inset-top) - 24px)) !important;
    padding: 28px 20px !important;
  }

  /* 어드민 테이블 */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -4px;
    margin-right: -4px;
    border-radius: var(--radius, 12px);
  }

  .table-wrap table {
    min-width: 560px;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .tabs {
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 0;
  }

  .tab {
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
    text-align: center;
    padding: 12px 10px !important;
    min-height: 44px;
  }
}

/* ── 아주 좁은 폰 ───────────────────────────── */
@media (max-width: 380px) {
  nav .logo,
  header .logo,
  nav > a.logo {
    font-size: 15px !important;
  }

  .month-grid {
    grid-template-columns: repeat(7, minmax(36px, 1fr));
  }

  .day-cell {
    min-height: 64px !important;
  }
}

/* ── 가로 모드 (짧은 높이) ─────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .modal,
  .modal-box {
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
}

/* ── 피드백 페이지 ─────────────────────────── */
@media (max-width: 768px) {
  body header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  header nav a {
    margin-left: 0 !important;
    margin-right: 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .type-row {
    flex-direction: column;
  }

  .type-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .card {
    padding: 24px 18px !important;
  }

  .submit-btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ── 어드민 상단 (로고+배지) ───────────────── */
@media (max-width: 768px) {
  nav .nav-badge {
    margin-left: auto;
  }
}