/* ========================================
   EBOOK BASE STYLES
   ======================================== */
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: #f3f4f6;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: #222222;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ========================================
   MOBILE CONTAINER
   ======================================== */
.mobile-container {
  width: 100%;
  max-width: 420px;
  background-color: #ffffff;
  min-height: 100vh;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.mobile-container::-webkit-scrollbar {
  display: none;
}
.mobile-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========================================
   GLOBAL RESETS FOR EBOOK
   ======================================== */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* styles.css의 .hidden !important 충돌 해결 */
.mobile-container .hidden {
  display: none !important;
}
.mobile-container .hidden.flex-col {
  display: none !important;
}

/* 아코디언 열린 상태 */
.mobile-container .flex-col:not(.hidden) {
  display: flex !important;
}

/* ========================================
   TYPOGRAPHY - MOBILE OPTIMIZED
   ======================================== */

/* 최소 폰트 크기 보장 */
.mobile-container p,
.mobile-container span,
.mobile-container button,
.mobile-container a {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* 긴 텍스트 줄바꿈 */
.mobile-container h1,
.mobile-container h2,
.mobile-container h3,
.mobile-container h4,
.mobile-container p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ========================================
   TOUCH TARGETS - MINIMUM 44px
   ======================================== */
.mobile-container button,
.mobile-container [onclick] {
  min-height: 44px;
  cursor: pointer;
}

/* 작은 배지/버튼은 예외 */
.mobile-container span[onclick],
.mobile-container .text-\[10px\],
.mobile-container .text-\[11px\] {
  min-height: auto;
}

/* ========================================
   SAFE AREA (iPhone notch)
   ======================================== */
@supports (padding-top: env(safe-area-inset-top)) {
  .mobile-container > header {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  .mobile-container > footer,
  .mobile-container .footer {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

/* ========================================
   SMOOTH SCROLLING & PERFORMANCE
   ======================================== */
.mobile-container {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* GPU 가속 for smooth animations */
.mobile-container [class*="transition"],
.mobile-container [class*="active:"] {
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ========================================
   IMAGES - PREVENT OVERFLOW
   ======================================== */
.mobile-container img {
  max-width: 100%;
  height: auto;
}

/* Character images - fixed positioning */
.mobile-container .pointer-events-none img {
  object-fit: contain;
}

/* ========================================
   CARDS & INTERACTIVE ELEMENTS
   ======================================== */

/* 카드 터치 피드백 */
.mobile-container [class*="active:scale"] {
  transition: transform 0.15s ease;
}

.mobile-container [class*="active:opacity"] {
  transition: opacity 0.15s ease;
}

/* Chat bubbles - session2 */
.mobile-container .chat-bubble {
  max-width: 100%;
}

/* ========================================
   FOOTER OVERRIDE FOR EBOOK
   ======================================== */
.mobile-container .footer {
  background: #f6f6f6;
  padding: 2rem 1.25rem;
  font-size: 0.75rem;
}

.mobile-container .footer .company-name {
  padding: 2% 0;
}

.mobile-container .footer .company-name img {
  max-width: 120px;
  height: auto;
}

.mobile-container .footer .company-name-text {
  font-size: 0.8125rem;
  padding-top: 1rem;
  margin-bottom: 0.5rem;
}

.mobile-container .footer .company-details,
.mobile-container .footer .company-address {
  font-size: 0.6875rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
  display: block;
  margin-right: 0;
}

.mobile-container .footer .copyright {
  font-size: 0.625rem;
  margin-top: 1rem;
}

/* ========================================
   DOWNLOAD MODAL - MOBILE FIT
   ======================================== */
.mobile-container .download-modal-content {
  max-width: 90%;
  padding: 1.5rem;
}

.mobile-container .download-modal-buttons {
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.mobile-container .cta-button img {
  height: 2.75rem;
}

/* ========================================
   RESPONSIVE FINE-TUNING
   ======================================== */

/* 매우 작은 화면 (iPhone SE, Galaxy S series) */
@media (max-width: 374px) {
  .mobile-container {
    max-width: 100%;
  }

  /* 폰트 사이즈 소폭 축소 */
  .mobile-container h2[class*="text-[22px]"] {
    font-size: 20px !important;
  }

  .mobile-container h1[class*="text-[34px]"] {
    font-size: 28px !important;
  }

  /* 패딩 조정 */
  .mobile-container .px-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .mobile-container .px-6 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* 일반 모바일 (375px ~ 420px) */
@media (min-width: 375px) and (max-width: 420px) {
  .mobile-container {
    max-width: 100%;
  }
}