/* ============================================================
   GWATOP - 홈페이지(index.html) 전용 모바일(폰) 스타일
   ============================================================
   폰은 홈페이지 외 다른 페이지는 접근 자체가 차단되므로(가드 스크립트),
   '터치 기기용' 스타일이 실제로 적용되는 건 사실상 태블릿뿐이었음.
   그런데 태블릿은 데스크탑과 100% 동일한 인터페이스여야 한다는 방침(2026-07-11)에
   따라, 아래 규칙들은 원래 style.css(모든 페이지 공용)에 있던 것을 이 파일로
   옮기고 index.html에서만 불러오게 함 — 홈페이지의 실제 폰 방문자 경험은
   그대로 유지하면서, 다른 24개 페이지는 태블릿에서도 데스크탑과 완전히
   동일하게(이 파일을 아예 안 불러오므로) 렌더링됨.
   ============================================================ */

@media (max-width: 768px) and (hover: none) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .mobile-only-flex { display: flex !important; }
}

@media (max-width: 900px) and (hover: none) {
  .quiz-layout { flex-direction: column; }
  .quiz-layout.chat-open { max-width: 100%; }
  .quiz-layout.chat-open .quiz-card-container { width: 100%; }
  .quiz-chat-panel { flex: none; width: 100%; position: static; height: 400px; border-radius: var(--radius-md); }
}

@media (max-width: 768px) and (hover: none) {
  .history-row { flex-wrap: wrap; }
  .history-row .history-card-actions { flex-basis: 100%; margin-top: 2px; }
  .history-row .history-card-actions .btn-primary.btn-sm { flex: 1; }
}

@media (max-width: 768px) and (hover: none) {
  /* ── CSS Variable overrides ── */
  :root { --nav-height: 48px; }

  /* ── 다크모드 버튼 숨김 ── */
  #theme-toggle-btn { display: none !important; }

  /* ── App-like Nav: 로고 가운데 고정 ── */
  .nav-links { display: none; }
  .nav-username { display: none; }
  .nav-logout-btn { display: none; }
  .nav-dropdown { display: none !important; }
  .nav-avatar-menu::after { display: none; }
  .nav-avatar-menu { padding: 3px; }
  .nav-inner { gap: 0; padding: 0 14px; justify-content: space-between; }
  .nav-logo {
    position: absolute !important;
    left: 50%; transform: translateX(-50%);
    gap: 5px;
  }
  .nav-logo-icon { display: none !important; }
  .nav-logo-text { font-size: 15px !important; letter-spacing: 0.4px !important; font-weight: 900 !important; font-family: 'Plus Jakarta Sans', var(--font) !important; }
  /* studio.html처럼 로고 옆에 "내 파일/내 퀴즈/AI 채팅" 탭(.st-sb-nav-group)도
     가운데 정렬되는 페이지에서는 로고와 탭 글자가 정확히 같은 자리에서 겹쳐 보였음
     — 이 경우엔 지금 페이지 안의 실제 이동 탭이 더 중요하므로 로고를 숨김 */
  .st-sidebar:has(.st-sb-nav-group) .nav-logo { display: none !important; }
  .nav-right { gap: 7px; }
  .nav-plan-badge { font-size: 9px; padding: 3px 8px; }

  /* ── 컨테이너 좌우 여백 확대 ── */
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .quiz-main { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── 카드 좌우 여백: 앱처럼 작고 여유있게 ── */
  .quiz-card, .results-card, .upload-card,
  .history-card, .scrap-card, .pricing-card, .feature-card,
  .profile-card, .mypage-section, .stat-card, .package-card,
  .post-card, .section-card, .intro-summary-card,
  .sp-card, .game-entry-card,
  .feedback-post-card, .feedback-reply-card,
  .post-detail-card, .xp-form-card {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  /* ── Sections ── */
  .section { padding: 32px 0; }
  .section-header { margin-bottom: 18px; }
  .section-title { font-size: 19px !important; }
  .section-subtitle { font-size: 13px; }

  /* ── Hero ── */
  .hero { padding: 20px 0 28px; }
  .hero-badge { font-size: 11px; padding: 5px 12px; margin-bottom: 16px; }
  .hero-title { letter-spacing: -1px; }
  .hero-subtitle { font-size: 14px; margin-bottom: 20px; }

  /* ── Feature Cards ── */
  .features-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feature-card { padding: 16px 14px; }
  .feature-icon { width: 38px; height: 38px; font-size: 18px; margin-bottom: 10px; }
  .feature-title { font-size: 13px; }
  .feature-desc { font-size: 12px; }

  /* ── Pricing Cards ── */
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 400px !important; }
  .pricing-card { padding: 20px 16px; }
  .pricing-price { font-size: 32px !important; letter-spacing: -1px; }
  .pricing-period { font-size: 13px; margin-bottom: 16px; }
  .pricing-features { gap: 8px; margin-bottom: 18px; }
  .pricing-features li { font-size: 13px; }

  /* ── Upload ── */
  .upload-card { padding: 16px 14px; border-radius: var(--radius-lg); }
  .upload-zone { padding: 18px 12px; }
  .upload-icon { font-size: 30px; margin-bottom: 8px; }
  .upload-title { font-size: 14px; }
  .upload-sub { font-size: 13px; margin-bottom: 12px; }
  .type-options { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .type-option-label { padding: 10px 6px; font-size: 12px; gap: 4px; }
  .type-option-label .type-icon { font-size: 18px; }
  .settings-pill span { padding: 10px 4px; font-size: 12.5px; }
  .settings-segment-item span { font-size: 12.5px; padding: 8px 4px; }
  .count-credit-chip { font-size: 11px; }
  .count-slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .count-slider { height: 8px; }
  .quiz-settings { margin-top: 16px; gap: 14px; }

  /* ── 생성 버튼 하단 고정 ── */
  .btn-generate-wrap {
    position: fixed; bottom: env(safe-area-inset-bottom, 0px); left: 0; right: 0;
    padding: 8px 14px; background: var(--bg); border-top: 1px solid var(--glass-border);
    z-index: 80; box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  }
  .btn-generate-wrap .btn-generate { margin-top: 0; }
  .btn-generate-placeholder { display: block; height: 68px; }

  /* ── Modal ── */
  .modal { padding: 22px 16px; max-width: calc(100vw - 32px); }
  .modal-icon { font-size: 38px; margin-bottom: 12px; }
  .modal-title { font-size: 18px; }
  .modal-desc { font-size: 14px; margin-bottom: 18px; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; justify-content: center; }

  /* ── Quiz Topbar ── */
  .quiz-topbar { padding: 8px 14px; }
  .quiz-topbar-inner { gap: 10px; }

  /* ── Quiz ── */
  .quiz-main { padding-top: calc(var(--nav-height) + var(--banner-height, 0px) + 68px); padding-bottom: 16px; }
  .quiz-card { padding: 18px 14px; }
  .quiz-question { font-size: 15px; margin-bottom: 18px; }
  .quiz-option { padding: 12px 13px; font-size: 14px; }
  .option-marker { width: 26px; height: 26px; font-size: 12px; flex-shrink: 0; }
  .ox-options { gap: 10px; }
  .ox-option { padding: 18px 10px; font-size: 36px; min-height: 44px; }
  .quiz-actions { flex-direction: column-reverse; }
  .quiz-actions .btn { width: 100%; justify-content: center; }
  .quiz-actions .quiz-ask-btn { width: 100%; justify-content: center; }
  .short-answer-input { min-height: 88px; font-size: 16px; }

  /* ── AI 채팅 → 모바일 바텀시트 ── */
  .quiz-chat-panel {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    height: 0 !important;
    max-height: 75vh;
    border-radius: 20px 20px 0 0 !important;
    border-left: none; border-right: none; border-bottom: none;
    z-index: 200;
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.4,0,0.2,1) !important;
    animation: none !important;
    flex-shrink: 0;
  }
  .quiz-chat-panel.open {
    height: 70vh !important;
    display: flex !important;
    animation: none !important;
  }
  .quiz-chat-handle {
    display: block;
    width: 36px; height: 4px;
    background: var(--glass-border);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  .quiz-chat-messages { max-height: calc(70vh - 120px); }

  /* 바텀시트 뒷배경 */
  #mobile-chat-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 199;
  }
  #mobile-chat-backdrop.visible { display: block; }

  /* ── Results ── */
  .results-wrap { padding-top: calc(var(--nav-height) + var(--banner-height, 0px) + 20px); padding-bottom: 20px; }
  .results-card { padding: 22px 16px; }
  .results-actions { flex-direction: column; }
  .results-actions .btn { width: 100%; justify-content: center; }
  .results-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .results-stat { padding: 12px 8px; }
  .results-stat-num { font-size: 22px; }

  /* ── Toast ── */
  .toast-container { bottom: calc(env(safe-area-inset-bottom, 8px) + 8px); right: 12px; left: 12px; }
  .toast { min-width: unset; max-width: 100%; width: 100%; font-size: 13px; padding: 11px 14px; }

  /* ── History ── */
  .history-grid { grid-template-columns: 1fr; }
  /* 선택 모드(텍스트만 쌓는 예전 레이아웃)만 해당 — 일반 모드는 "내 파일" 카드처럼
     미리보기가 카드 끝까지 꽉 차야 해서 여기서 패딩 주면 안 됨 */
  .history-card.select-mode { padding: 14px; gap: 8px; }
  .history-card.select-mode .history-card-title { font-size: 13px; }
  .history-header { padding: 20px 0 14px; }

  /* ── Scrap ── */
  .scrap-grid { grid-template-columns: 1fr; }
  .scrap-header { padding: 20px 0 14px; }

  /* ── Upgrade Banner ── */
  .upgrade-banner { flex-direction: column; text-align: center; gap: 10px; padding: 16px; }
  .upgrade-banner-icon { font-size: 24px; }

  /* ── Footer ── */
  .footer { padding: 24px 0 20px; }
  .footer-links { gap: 14px; font-size: 12px; }

  /* ── Page bottom padding ── */
  .page { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ── Mobile Bottom Nav: 숨김 ── */
  .mobile-bottom-nav { display: none !important; }

  /* ── Touch targets ── */
  .file-info-remove { padding: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .scrap-remove-btn { padding: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* ── 앱 스타일: 배경 & 카드 (테두리 제거, 그림자만) ── */
  body { background: var(--bg-secondary); }
  .bg-gradient { display: none; }
  .bg-noise { display: none; }

  .upload-card {
    border: none !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .history-card {
    border: none !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .pricing-card {
    border: none !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .feature-card {
    border: none !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .scrap-card {
    border: none !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .quiz-card {
    border: none !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .results-card {
    border: none !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }

  /* 모달 */
  .modal {
    border: none !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: var(--surface-container) !important;
  }

  /* 상단 nav: 배경 없이 콘텐츠 위에 바로 떠 있게 */
  .nav {
    background: transparent !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* 하단 탭바 강화 */
  .mobile-bottom-nav {
    background: var(--bg-primary) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: 0 -1px 0 var(--glass-border), 0 -2px 14px rgba(0,0,0,0.05) !important;
  }
  .mbn-item.active {
    color: #004ac6 !important;
    background: rgba(0,74,198,0.1) !important;
    border-radius: 12px !important;
  }
  /* 푸터 숨김 (앱엔 푸터 없음) */
  .footer { display: none !important; }

  /* 피드백 FAB: 하단 탭바 위 */
  .feedback-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 12px;
    font-size: 12px;
    padding: 8px 14px;
  }
  .feedback-fab span { font-size: 15px; }

  /* 퀴즈 옵션은 테두리 유지 (정답/오답 구분 필요) */
  .quiz-option { border: 1px solid var(--glass-border) !important; background: var(--bg-primary) !important; }
  .quiz-option.correct { border-color: rgba(16,185,129,0.5) !important; background: var(--success-bg) !important; }
  .quiz-option.wrong { border-color: rgba(239,68,68,0.4) !important; background: var(--error-bg) !important; }
  .quiz-option.selected:not(.correct):not(.wrong) { border-color: rgba(59,130,246,0.45) !important; background: rgba(79,142,245,0.08) !important; }

  /* ── mypage ── */
  .mypage-wrap { padding-top: calc(var(--nav-height) + var(--banner-height, 0px) + 20px) !important; padding-bottom: 20px !important; }
  .profile-card { flex-direction: column !important; text-align: center; padding: 22px 16px !important; gap: 14px !important; background: var(--bg-primary) !important; border: none !important; box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 16px !important; }
  .profile-name { font-size: 18px !important; }
  .profile-tags { justify-content: center; }
  .mypage-section { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 18px 16px !important; border-radius: 14px !important; }
  .stat-card { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 14px 10px !important; border-radius: 12px !important; }
  .stat-value { font-size: 22px !important; }

  /* ── payment: 3열 가로 정렬 ── */
  .packages-grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 100% !important; gap: 8px !important; }
  .package-card { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 2px 14px rgba(0,0,0,0.1) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 14px 8px !important; }
  .package-emoji { font-size: 18px !important; margin-bottom: 3px !important; }
  .package-name { font-size: 10px !important; margin-bottom: 4px !important; }
  .package-credits { font-size: 11px !important; margin-bottom: 8px !important; }
  .package-price { font-size: 20px !important; letter-spacing: -0.5px !important; margin-bottom: 2px !important; }
  .package-unit-price { display: none !important; }
  .package-features { display: none !important; }

  /* ── community ── */
  .post-card { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 14px !important; }

  /* ── my-analyses ── */
  #analyses-list { grid-template-columns: 1fr !important; }

  /* ── explain: how-it-works 3카드 가로 정렬 ── */
  #how-it-works { flex-wrap: nowrap !important; gap: 6px !important; }
  #how-it-works > div { min-width: 0 !important; flex: 1 !important; padding: 10px 6px !important; }
  #how-it-works > div > div:last-child { display: none !important; }

  /* ── explain 결과 화면 ── */
  #results-main { padding: 10px 14px 80px !important; }
  .section-card, .intro-summary-card { border: none !important; background: var(--bg-primary) !important; box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* ── support ── */
  .sp-card { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* ── game ── */
  .game-entry-card { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* ── feedback ── */
  .feedback-post-card, .feedback-reply-card { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 14px !important; }

  /* ── post (게시판 글 상세) ── */
  .post-detail-card { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* ── exam-upload ── */
  .xp-form-card { background: var(--bg-primary) !important; border: none !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* ── create: 업로드 카드 전체 너비, 불필요 요소 숨김 ── */
  .upload-formats { display: none !important; }
  .mobile-page-header { display: none !important; }
  .free-credit-details { display: none !important; }
  .create-page-grid { display: block !important; padding-top: 20px; }
  .create-main { max-width: none !important; width: 100% !important; }
  .create-main .upload-card { margin-left: 0 !important; margin-right: 0 !important; }

  /* ── explain: 업로드 카드 전체 너비, 상단 여백 ── */
  .explain-page-grid { display: block !important; padding-top: 20px; }
  .explain-main { max-width: none !important; width: 100% !important; }
  .explain-main .upload-card { margin-left: 0 !important; margin-right: 0 !important; }

  /* ── 로딩 오버레이 (퀴즈 생성 중 미니게임) 모바일 최적화 ── */
  .loading-overlay { padding: 16px 12px 20px !important; gap: 8px !important; -webkit-overflow-scrolling: touch; }
  #loading-game-header { max-width: 100% !important; padding: 12px 14px !important; }
  #loading-thoughts { max-width: 100% !important; height: 80px !important; }
  #mini-game-container { max-width: 100% !important; padding: 10px 10px 12px !important; }
}

@media (max-width: 360px) and (hover: none) {
  .modal { max-width: calc(100vw - 24px) !important; padding: 18px 12px; }
  .modal-overlay { padding: 10px; }
  .modal-icon { font-size: 30px; }
  .modal-title { font-size: 16px; }
  .hero-title { font-size: 42px !important; letter-spacing: -1px; }
  .nav-inner { gap: 3px; padding: 0 8px; }
  .nav-logo-text { font-size: 14px; }
  .nav-plan-badge { font-size: 9px; padding: 2px 6px; }
  .nav-avatar, .nav-avatar-fallback { width: 24px; height: 24px; }
  .section-title { font-size: 18px !important; }
  .quiz-question { font-size: 14px; }
  .quiz-option { padding: 10px 11px; font-size: 13px; }
  .option-marker { width: 24px; height: 24px; font-size: 11px; }
  .ox-option { padding: 14px 8px; font-size: 30px; }
  .history-card.select-mode { padding: 14px; gap: 8px; }
  .history-card-icon { font-size: 22px; }
  .scrap-sq-grid { grid-template-columns: 1fr !important; }
  .features-grid { grid-template-columns: 1fr; }
  .upload-card { padding: 14px 12px; }
  .upload-zone { padding: 14px 10px; }
}

@media (hover: none) and (pointer: coarse) {
  .glass, .nav, .upload-card, .quiz-card, .quiz-topbar, .results-card,
  .toast, .modal-overlay, .modal, .mobile-bottom-nav, #game-active-badge,
  .footer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .nav { background: transparent; }
  /* 불투명 색(흰색이든 옅은 파란색이든)은 결국 고정된 단일 색이라, 위치마다 진하기가
     계속 바뀌는 .bg-gradient와는 어느 지점에서든 경계가 보임(아이패드에서 확인됨).
     .nav처럼 아예 투명하게 둬서 뒤에 고정된 .bg-gradient가 블러 없이 그대로 비치게
     하면 색이 항상 100% 일치해서 경계 자체가 생기지 않음. */
  .quiz-topbar { background: transparent; }
  .mobile-bottom-nav { background: rgba(255,255,255,0.97); }
  .modal-overlay { background: rgba(15,23,42,0.45); }
  .upload-card, .quiz-card, .results-card { background: var(--surface-container); }
  .toast { background: var(--surface-container-high); }
  #game-active-badge { background: rgba(15,23,42,0.88); }
}

@media (min-width: 481px) and (max-width: 768px) and (hover: none) {
  .features-grid { grid-template-columns: 1fr 1fr; }
  .history-grid { grid-template-columns: repeat(2, 1fr); }
  .modal { max-width: 420px; }
}