/**
 * ADONG HOMEPAGE - RESPONSIVE STYLES
 * Mobile-First 반응형 디자인 (768px+ 태블릿, 1024px+ 데스크톱)
 * 황금비율 기반 브레이크포인트 시스템
 */


/* ==========================================
 * MOBILE & TABLET OPTIMIZATION (<1024px) - PHASE 4A 정리
 * ========================================== */

@media (max-width: 1023px) { /* PHASE 3A - 태블릿까지 스크롤 허용 확대 */
  /* 모바일/태블릿에서 스크롤 강제 허용 - base.css 오버라이드 */
  html,
  body {
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
  }

  /* 모달 열렸을 때 body 스크롤 막기 */
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
  }

  body.modal-open #fullpage,
  body.modal-open .mobile-scroll,
  body.modal-open main,
  body.modal-open .section {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* 모바일 모달 폼 최적화 - 한 화면에 모두 표시 */
  .modal-overlay {
    padding: 8px !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
  }

  .modal-overlay.show {
    display: flex !important;
  }

  .modal-container {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .modal-header {
    padding: 0.75rem 1rem !important;
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .modal-close {
    font-size: 1.5rem !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  .modal-body {
    padding: 0.5rem 1rem 1rem !important;
    overflow-y: auto !important;
  }

  .modal-header h2,
  .modal-title {
    font-size: 1rem !important;
  }

  .email-form {
    padding: 0 !important;
  }

  .form-group {
    margin-bottom: 0.4rem !important;
  }

  .form-label {
    font-size: 0.75rem !important;
    margin-bottom: 0.2rem !important;
    padding-left: 2px !important;
  }

  .form-input {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
    min-height: 36px !important;
    height: 36px !important;
  }

  .form-row {
    gap: 0.4rem !important;
  }

  .email-form .btn,
  .modal-content .btn {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
    min-height: 44px !important;
  }

  /* 모바일/태블릿 Hero CTA 버튼 - 화면에 맞게 표시 */
  .hero-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.75rem, 3vw, 1rem) !important;
    width: 100% !important;
    max-width: 90vw !important;
  }

  .hero-cta .btn {
    width: 100% !important;
    font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    padding: clamp(0.75rem, 3vw, 1rem) clamp(1rem, 4vw, 1.5rem) !important;
  }

  /* 모바일/태블릿에서만 다운로드 섹션 제거 - 데스크탑은 유지 */
  .section[data-anchor="download"] {
    display: none !important;
  }

  /* 푸터에 모바일 다운로드 버튼 스타일 */
  .footer-mobile-download {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 1.5rem 0 1rem 0 !important;
    padding: 0 16px !important;
  }

  /* 모바일/태블릿에서 이메일 입력칸 숨기기 */
  .footer-mobile-download .inline-email-form,
  .footer-mobile-download .inline-email-input-group,
  .footer-mobile-download .inline-email-input,
  .inline-email-form-mobile .inline-email-input {
    display: none !important;
  }

  .footer-mobile-download .btn {
    width: 100% !important;
    max-width: 300px !important;
    min-height: 56px !important;
    font-size: clamp(1rem, 4vw, 1.125rem) !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    background: #7C3AED !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .footer-mobile-download .btn:hover,
  .footer-mobile-download .btn:active {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(76, 175, 255, 0.4) !important;
  }

  /* 모바일 푸터 간소화 - 양쪽 21px 패딩 유지 */
  .footer-section {
    padding: clamp(1.5rem, 4vw, 2rem) 21px clamp(1rem, 3vw, 1.5rem) 21px !important;
    min-height: auto !important;
    height: auto !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .footer-content {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(1rem, 3vw, 1.5rem) !important;
    margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    min-height: auto !important;
    width: 100% !important;
    text-align: center !important;
  }

  .footer-brand {
    text-align: center !important;
    min-width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer-logo {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    margin-bottom: clamp(0.5rem, 2vw, 0.75rem) !important;
    text-align: center !important;
  }

  .footer-tagline {
    font-size: clamp(0.75rem, 3vw, 0.875rem) !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  .footer-nav {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .footer-link {
    font-size: clamp(0.75rem, 3vw, 0.875rem) !important;
    padding: 0.25rem !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  .footer-bottom {
    padding-top: clamp(0.75rem, 2vw, 1rem) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    gap: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  .copyright {
    font-size: clamp(0.625rem, 2.5vw, 0.75rem) !important;
    text-align: center !important;
  }

  .footer-company-logo-center {
    height: clamp(16px, 4vw, 20px) !important;
    width: auto !important;
  }

  /* 모바일/태블릿에서 비디오 캔버스 최적화 */
  .feature-video-canvas {
    max-width: calc(100vw - 32px);
    margin: 0 auto;
  }

  .feature-video-container {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  }

  .feature-video {
    object-fit: contain;
  }

  /* 태블릿 전용 히어로 오버레이 레이아웃 (768px-1023px) */
  @media (min-width: 768px) and (max-width: 1023px) {
    .section.hero .container .hero-content {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 80vh !important;
      text-align: center !important;
      overflow: visible !important;
    }

    .section.hero .hero-text {
      position: relative !important;
      z-index: 2 !important;
      width: 100% !important;
      max-width: 600px !important;
      margin: 0 auto !important;
      padding-top: 60px !important; /* 캐릭터 공간 확보 */
    }

    .section.hero .hero-visual {
      position: absolute !important;
      top: 20px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      z-index: 100 !important;
      width: 120px !important;
      height: 120px !important;
      display: block !important;
      visibility: visible !important;
      pointer-events: none !important;
    }

    /* 창 배경 완전 제거 */
    .section.hero .hero-visual .character-background {
      display: none !important;
    }

    .section.hero .hero-visual .character-window {
      display: none !important;
    }

    .section.hero .hero-visual .character-image {
      width: 120px !important;
      height: 120px !important;
      object-fit: contain !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      z-index: 101 !important;
    }

    .hero-title {
      font-size: clamp(2rem, 6vw, 3rem) !important;
      font-weight: 700 !important;
      margin-bottom: 1.5rem !important;
    }

    .hero-description {
      font-size: clamp(1.125rem, 3vw, 1.375rem) !important;
      line-height: 1.6 !important;
      margin-bottom: 2rem !important;
      opacity: 0.9 !important;
    }
  }

  .mobile-scroll html,
  .mobile-scroll body,
  html.mobile-scroll,
  body.mobile-scroll {
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
  }

  /* fullPage.js 관련 클래스들 무력화 (PHASE 3A - 강화된 비활성화) */
  #fullpage {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }

  .mobile-scroll #fullpage {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }

  /* 모든 섹션에서 스크롤 허용 - layout.css 오버라이드 (PHASE 3A - 강화된 섹션 스타일) */
  .section:not(.hero) {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
    padding: 1rem 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .mobile-scroll .section:not(.hero) {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
    padding: 1rem 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* fullPage.js 네비게이션 모바일/태블릿에서 숨김 - 일반 스크롤 사용 */
  #fp-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* fullPage.js 관련 모든 UI 요소 숨김 */
  .fp-controlArrow,
  .fp-slidesNav,
  .fp-tooltip {
    display: none !important;
    visibility: hidden !important;
  }

  /* 워터마크와 컨트롤 화살표만 숨기기 */
  .fp-watermark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Force single column layout on mobile with highest specificity */
  .features .container .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-large);
    width: 100%;
    max-width: none;
  }

  /* Mobile: Features stack vertically with visual first */
  .feature-section {
    min-height: auto !important;
    height: auto !important;
    padding: 1rem 0 !important;
  }

  .feature-container {
    grid-template-columns: 1fr;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
    height: auto !important;
    min-height: auto !important;
  }

  .feature-visual {
    order: 1;
    height: auto !important;
    min-height: auto !important;
  }

  .feature-content {
    order: 2;
    text-align: center;
    max-width: none;
    height: auto !important;
    min-height: auto !important;
    padding: 0.5rem !important;
  }

  .feature-visual .video-placeholder {
    max-width: 100%;
    height: auto;
  }

  /* 🎨 모바일 활용법 카드 완전 개선 (USECASE CARDS MOBILE OPTIMIZATION) */
  .usecases-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(1.25rem, 4vw, 2rem) !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* 모바일 카드 기본 스타일 완전 개선 */
  .usecase-card {
    background: var(--color-surface-primary) !important;
    border-radius: 16px !important;
    padding: clamp(1.5rem, 5vw, 2rem) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .usecase-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
  }

  /* 카드 내부 컨텐츠 레이아웃 개선 */
  .usecase-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: clamp(0.75rem, 3vw, 1rem) !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* 📱 모바일 아이콘 크기 최적화 */
  .usecase-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(56px, 15vw, 80px) !important;
    height: clamp(56px, 15vw, 80px) !important;
    margin-bottom: clamp(0.75rem, 3vw, 1rem) !important;
    flex-shrink: 0 !important;
  }

  .usecase-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
  }

  /* 📝 모바일 활용법 카드 텍스트 최적화 */
  .usecase-card .usecase-title {
    font-size: clamp(1.125rem, 5vw, 1.375rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--color-text-primary) !important;
    margin: 0 0 clamp(0.5rem, 2vw, 0.75rem) 0 !important;
    padding: 0 !important;
    text-align: center !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: keep-all !important; /* 한국어 단어 보호 */
    hyphens: auto !important;
  }

  .usecase-card .usecase-description {
    font-size: clamp(0.875rem, 4vw, 1rem) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--color-text-secondary) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: keep-all !important; /* 한국어 단어 보호 */
    hyphens: auto !important;
    white-space: normal !important;
  }

  /* 모바일 타이포그래피 수정 - 텍스트 오버플로우 방지 (PHASE 1C - 강화된 안전장치) */
  .hero-title {
    font-size: clamp(1.5rem, 7vw, 2.5rem);
    line-height: 1.2;
    max-width: calc(100vw - 32px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .hero-description {
    font-size: clamp(0.8rem, 3.5vw, 1.125rem);
    line-height: 1.5;
    max-width: calc(100vw - 32px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* 히어로 섹션 내 모든 텍스트 요소 안전성 강화 */
  .hero-title *,
  .hero-description * {
    max-width: calc(100% - var(--space-small));
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .title-line,
  .title-highlight {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  /* 모바일에서 모든 텍스트 요소 안전성 보장 */
  .hero-content * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 모든 섹션의 큰 타이틀들 반응형 최적화 (PHASE 1C - 강화된 안전장치) */
  .section-title,
  .feature-title,
  h2 {
    font-size: clamp(1.25rem, 5vw, 2.5rem) !important;
    line-height: 1.3 !important;
    max-width: calc(100vw - 32px) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* 모든 설명문 텍스트 반응형 최적화 (PHASE 1C - 강화된 안전장치) */
  .section-description,
  .feature-description,
  p {
    font-size: clamp(0.875rem, 3.5vw, 1.125rem) !important;
    line-height: 1.5 !important;
    max-width: calc(100vw - 32px) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* 활용법 카드 제목들 */
  .usecase-title,
  h3 {
    font-size: clamp(1rem, 4vw, 1.5rem) !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 0 var(--space-small) !important;
    box-sizing: border-box !important;
  }

  /* 버튼 텍스트 반응형 */
  .btn,
  button {
    font-size: clamp(0.875rem, 3vw, 1rem) !important;
    white-space: nowrap !important;
  }

  /* 네비게이션 텍스트 */
  .nav-link,
  .footer-links a {
    font-size: clamp(0.8rem, 3vw, 0.9rem) !important;
  }

  /* 푸터 텍스트 반응형 최적화 */
  .footer-brand h3,
  .footer-brand .brand-title {
    font-size: clamp(1.125rem, 4vw, 1.5rem) !important;
    line-height: 1.3 !important;
  }

  .footer-brand p,
  .footer-description {
    font-size: clamp(0.75rem, 3vw, 0.875rem) !important;
    line-height: 1.4 !important;
  }

  .footer-content p,
  .footer-copyright {
    font-size: clamp(0.7rem, 2.5vw, 0.8rem) !important;
    line-height: 1.3 !important;
  }

  /* 모바일 버튼 크기 최적화 (PHASE 4B - 접근성 개선) */
  .lang-btn,
  .btn,
  button {
    min-width: 44px !important; /* WCAG 터치 타겟 최소 크기 */
    min-height: 44px !important;
    font-size: clamp(0.8rem, 3vw, 0.9rem) !important;
    padding: 0.75rem 1rem !important;
    touch-action: manipulation !important; /* 터치 반응성 개선 */
    -webkit-tap-highlight-color: transparent !important; /* iOS 탭 하이라이트 제거 */
  }

  /* 접근성 개선: 포커스 표시 강화 */
  .lang-btn:focus-visible,
  .btn:focus-visible,
  button:focus-visible,
  a:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
  }

  .mobile-menu-toggle {
    display: none !important; /* 모바일에서 햄버거 버튼 숨김 - 기능이 없어서 혼란 방지 */
  }

  /* 모바일/태블릿 캐릭터 이미지 - 화면에 맞게 축소 */
  .hero-visual {
    display: block !important;
    order: 2 !important;
    max-width: 60vw !important;
    margin: 0 auto !important;
  }

  .character-background {
    width: 100% !important;
    max-width: 60vw !important;
  }

  .character-window {
    width: clamp(100px, 25vw, 180px) !important;
    height: clamp(100px, 15vh, 180px) !important; /* 세로도 vh 기반 반응형 */
    max-height: 18vh !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .character-image {
    width: clamp(90px, 22vw, 160px) !important;
    height: clamp(90px, 12vh, 160px) !important; /* 세로도 vh 기반 반응형 */
    max-height: 15vh !important;
    object-fit: contain !important;
  }

  /* 비디오 플레이어 아이콘 크기 조절 */
  .play-icon {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0.5rem !important;
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }

  /* 활용법 카드 이미지 최적화 (PHASE 4B - 접근성 개선) */
  .usecase-card img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* 모든 카드와 클릭 가능한 요소에 접근성 개선 */
  .usecase-card,
  .feature-card,
  .card {
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .usecase-card:hover,
  .feature-card:hover,
  .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  .usecase-card:focus-visible,
  .feature-card:focus-visible,
  .card:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    transform: translateY(-2px) !important;
  }

  /* 스크린 리더를 위한 텍스트 개선 */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* 모바일 헤더 및 히어로 섹션 레이아웃 수정 */
  .header,
  header,
  .nav,
  nav {
    height: auto !important;
    min-height: 40px !important;
    padding: 0.125rem 0 !important;
  }

  /* 모바일 헤더 요소들 크기 조정 */
  .nav-brand {
    font-size: 16px !important;
  }

  .language-toggle {
    padding: 1px !important;
    gap: 0 !important;
  }

  .language-toggle .language-btn {
    padding: 2px 4px !important;
    font-size: 10px !important;
    min-width: 12px !important;
  }

  /* 히어로 섹션 - 모바일 전체화면 최적화 */
  .hero,
  .hero-section,
  .section.hero {
    padding-top: 65px !important; /* 헤더 높이(55px) + 여유(10px) */
    padding-bottom: 20px !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .hero .container,
  .section.hero .container {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 15px !important; /* 추가 여백 */
  }

  .section.hero .hero-content,
  .hero .hero-content,
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 상단부터 시작 */
    padding: 0 16px !important;
    gap: clamp(1rem, 2.5vh, 1.5rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* 모바일 히어로 텍스트 - 위에 배치 */
  .hero-text {
    order: 1 !important;
    text-align: center !important;
    margin: 0 !important;
    margin-bottom: clamp(0.5rem, 2vh, 1rem) !important;
    padding: 0 12px !important;
    padding-left: 12px !important; /* layout.css의 padding-left 오버라이드 */
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    top: 0 !important;
    flex-shrink: 0 !important;
  }

  /* 모바일 히어로 타이틀 - 잘리지 않게 */
  .hero .hero-title,
  .hero-section .hero-title {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem) !important;
    line-height: 1.3 !important;
    margin-bottom: clamp(0.5rem, 2vh, 0.75rem) !important;
    word-break: keep-all !important;
    white-space: normal !important;
  }

  .hero .title-line,
  .hero .title-highlight {
    display: block !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  /* 모바일 히어로 설명 */
  .hero .hero-description {
    font-size: clamp(0.75rem, 3.5vw, 0.9rem) !important;
    line-height: 1.5 !important;
    margin-bottom: clamp(0.75rem, 2vh, 1rem) !important;
    padding: 0 4px !important;
  }

  /* 모바일 캐릭터 - 200x200 크기 (layout.css의 min-height: 70vh 오버라이드) */
  .section.hero .hero-visual,
  .hero .hero-visual,
  .hero-section .hero-visual,
  .hero-visual {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important; /* 70vh 오버라이드 */
    padding: 0 !important; /* layout.css padding 오버라이드 */
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  .section.hero .character-background,
  .hero .character-background,
  .character-background {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .section.hero .character-window,
  .hero .character-window,
  .character-window {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    min-height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .section.hero .character-image,
  .hero .character-image,
  .character-image {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
    min-height: auto !important;
    object-fit: contain !important;
    position: relative !important;
    top: 10px !important;
  }

  /* 모바일에서 섹션 간격 조정 - hero 제외 */
  .section:not(.hero) {
    padding: var(--space-huge) 0 !important;
    margin-bottom: var(--space-large) !important;
  }

  .feature-section {
    padding: var(--space-large) 0 !important;
    margin-bottom: var(--space-large) !important;
  }

  /* 다운로드 섹션과 푸터 사이 간격 제거 */
  .section[data-anchor="download"] {
    margin-bottom: 0 !important;
  }

  .footer {
    margin-top: 0 !important;
    padding-top: var(--space-medium) !important;
  }

  /* 모바일 컨테이너 패딩 최적화 (PHASE 1B - 최소 16px 보장) */
  .container {
    padding-left: max(16px, var(--space-medium)) !important;
    padding-right: max(16px, var(--space-medium)) !important;
    max-width: 100% !important;
  }

  /* 모바일 카드 레이아웃 최적화 */
  .usecase-card {
    margin-bottom: var(--space-large) !important;
    padding: var(--space-medium) !important;
  }

  /* 비디오 플레이어 컨테이너 최적화 */
  .video-placeholder {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }

  /* 주요 기능 섹션 - 모바일에서 최적화된 레이아웃 (PHASE 3B - 개선된 Flexbox) */
  .feature-container,
  .feature-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  .feature-text {
    order: 1 !important; /* 텍스트를 먼저 */
    text-align: center !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .feature-media,
  .feature-video-canvas {
    order: 2; /* 영상을 나중에 */
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
  }

  /* 주요 기능 텍스트들 중앙 정렬 */
  .feature-title,
  .feature-description {
    text-align: center !important;
  }

  .feature-content h2,
  .feature-content p {
    text-align: center !important;
  }

}

/* ==========================================
 * TABLET BREAKPOINT (768px+)
 * ========================================== */

@media (min-width: 768px) and (max-width: 1023.98px) {
  /* 태블릿에서 스크롤바 숨기기 */
  html, body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }

  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none; /* WebKit */
  }

  /* 태블릿에서 fullPage 네비게이션 도트 숨김 - 일반 스크롤 사용 */
  #fp-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 태블릿에서 Feature 3 텍스트 줄바꿈 처리 (PHASE 2B - 한국어 특화 개선) */
  [data-anchor="feature3"] .feature-description {
    word-break: keep-all !important; /* 한국어 단어 유지 */
    overflow-wrap: break-word !important; /* 긴 영어 단어만 자름 */
    line-height: 1.6 !important; /* 한국어 최적 줄간격 */
    hyphens: auto !important;
    white-space: normal !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* 태블릿 푸터 레이아웃 개선 */
  .footer-content {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: clamp(1rem, 2vw, 2rem) !important;
    max-width: 100% !important;
  }

  .footer-brand {
    flex: 1 !important;
    text-align: left !important;
  }

  .footer-nav {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: clamp(0.75rem, 1.5vw, 1.25rem) !important;
    justify-content: flex-end !important;
  }

  .footer-link {
    white-space: nowrap !important;
  }

  .footer-bottom {
    margin-top: 2rem !important;
    text-align: center !important;
  }

  /* Typography Scaling */
  .hero-title {
    line-height: 1.2;
    font-size: clamp(32px, 4.5vw, 42px);
  }

  /* Header & Navigation */
  .nav-menu {
    display: block;
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .nav-list {
    flex-direction: row;
    gap: var(--space-large);
  }

  .mobile-menu-toggle {
    display: none;
  }

  /* Hero Section - 2-Column Layout */
  .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-huge);
    align-items: center;
    min-height: 80vh;
  }

  .hero-text {
    text-align: left;
    order: 1;
  }

  .hero-visual {
    order: 2;
  }

  .hero-cta {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Tablet: Single column layout for features - text over video */
  .feature-container {
    grid-template-columns: 1fr;
    gap: var(--space-medium);
    padding: var(--space-medium);
    max-width: 95%;
    margin: 0 auto;
  }

  .feature-content {
    text-align: center;
    max-width: none;
    order: 1;
  }

  .feature-visual {
    order: 2;
  }

  /* 모든 feature 섹션에서 텍스트 먼저, 영상 나중에 */
  .feature-text {
    order: 1;
    text-align: center;
  }

  .feature-media,
  .feature-video-canvas {
    order: 2;
  }

  /* 개별 섹션별 강제 적용 */
  [data-anchor="feature1"] .feature-text,
  [data-anchor="feature2"] .feature-text,
  [data-anchor="feature3"] .feature-text {
    order: 1 !important;
    text-align: center !important;
  }

  [data-anchor="feature1"] .feature-media,
  [data-anchor="feature2"] .feature-media,
  [data-anchor="feature3"] .feature-media {
    order: 2 !important;
  }

  /* 주요기능 텍스트 요소들 중앙정렬 강제 적용 */
  .feature-title {
    text-align: center !important;
  }


  .feature-visual .video-placeholder,
  .feature-media .video-placeholder {
    max-width: 42rem !important;
    height: 20rem !important;
    margin: 0 auto !important;
    width: 95% !important;
  }

  /* 개별 섹션별 강제 적용 */
  [data-anchor="feature1"] .video-placeholder,
  [data-anchor="feature2"] .video-placeholder,
  [data-anchor="feature3"] .video-placeholder {
    max-width: 42rem !important;
    height: 20rem !important;
    width: 95% !important;
    margin: 0 auto !important;
  }

  /* 💻 태블릿 활용법 카드 개선 - 세로배열로 변경 */
  .usecases-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(1.5rem, 4vw, 2.5rem) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  .usecase-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: clamp(2rem, 5vw, 2.5rem) !important;
    border-radius: 20px !important;
    background: var(--color-surface-primary) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    max-height: none !important;
    width: 100% !important;
  }

  .usecase-content {
    padding: 0 !important;
    gap: clamp(1rem, 3vw, 1.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .usecase-icon {
    width: clamp(64px, 10vw, 80px) !important;
    height: clamp(64px, 10vw, 80px) !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .usecase-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }

  .usecase-title {
    font-size: clamp(1.125rem, 3.5vw, 1.25rem) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    word-break: keep-all !important;
  }

  .usecase-description {
    font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: var(--color-text-secondary) !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: keep-all !important; /* 한국어 단어 보호 */
    white-space: normal !important;
  }


  /* Modal Optimization */
  .modal-container {
    max-width: 32.5rem; /* Golden ratio based */
  }

  /* 높이 반응형 - 태블릿에서만 vh 기반 조정 */
  [data-anchor="feature1"] .feature-content,
  [data-anchor="feature2"] .feature-content,
  [data-anchor="feature3"] .feature-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2vh !important;
    padding: 2vh 3vw !important;
    max-height: 90vh !important;
    height: auto !important;
  }

  [data-anchor="feature1"] .feature-text,
  [data-anchor="feature2"] .feature-text,
  [data-anchor="feature3"] .feature-text {
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  [data-anchor="feature1"] .feature-title,
  [data-anchor="feature2"] .feature-title,
  [data-anchor="feature3"] .feature-title {
    margin-bottom: 1vh !important;
  }

  [data-anchor="feature1"] .feature-description,
  [data-anchor="feature2"] .feature-description,
  [data-anchor="feature3"] .feature-description {
    margin-bottom: 1vh !important;
  }

  [data-anchor="feature1"] .feature-video-canvas,
  [data-anchor="feature1"] .feature-image-container,
  [data-anchor="feature2"] .feature-video-canvas,
  [data-anchor="feature2"] .feature-image-container,
  [data-anchor="feature3"] .feature-video-canvas,
  [data-anchor="feature3"] .feature-image-container {
    max-width: 700px;
    margin: 0 auto;
  }

  [data-anchor="feature1"] .feature-video-container,
  [data-anchor="feature2"] .feature-video-container,
  [data-anchor="feature3"] .feature-video-container {
    max-height: 50vh;
    padding-top: min(56.25%, 50vh); /* 16:9 비율 유지하되 최대 높이 제한 */
  }
}

/* 태블릿 + 높이 600px 이하 추가 조정 */
@media (min-width: 768px) and (max-width: 1023.98px) and (max-height: 600px) {
  [data-anchor="feature1"] .feature-content,
  [data-anchor="feature2"] .feature-content,
  [data-anchor="feature3"] .feature-content {
    gap: 1vh !important;
    padding: 70px 3vw 1vh 3vw !important;
  }

  [data-anchor="feature1"] .feature-title,
  [data-anchor="feature2"] .feature-title,
  [data-anchor="feature3"] .feature-title {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;
    margin-bottom: 0.5vh !important;
    line-height: 1.2 !important;
  }

  [data-anchor="feature1"] .feature-description,
  [data-anchor="feature2"] .feature-description,
  [data-anchor="feature3"] .feature-description {
    font-size: clamp(0.75rem, 1.3vw, 0.85rem) !important;
    margin-bottom: 0.5vh !important;
    line-height: 1.3 !important;
  }

  [data-anchor="feature1"] .feature-video-canvas,
  [data-anchor="feature1"] .feature-image-container,
  [data-anchor="feature2"] .feature-video-canvas,
  [data-anchor="feature2"] .feature-image-container,
  [data-anchor="feature3"] .feature-video-canvas,
  [data-anchor="feature3"] .feature-image-container {
    max-width: 100%;
    margin: 0 auto;
  }

  [data-anchor="feature1"] .feature-video-container,
  [data-anchor="feature2"] .feature-video-container,
  [data-anchor="feature3"] .feature-video-container {
    max-height: 45vh;
    padding-top: min(56.25%, 45vh); /* 16:9 비율 유지하되 최대 높이 제한 */
  }
}

/* ==========================================
 * DESKTOP BREAKPOINT (1024px+)
 * ========================================== */

@media (min-width: 1024px) {
  /* Enhanced Typography */

  /* Hero Section Enhancements */
  .hero {
    min-height: 100vh;
  }

  .hero-content {
    gap: var(--space-massive);
  }

  .hero-description {
    max-width: 46.875rem;
  }

  /* Desktop: Enhanced full-width sections for features */
  .feature-container {
    max-width: var(--container-xl);
    padding: var(--space-massive) var(--space-large);
    gap: var(--space-massive);
  }

  .feature-visual .video-placeholder {
    max-width: 34.375rem;
    height: 23.75rem;
  }

  /* Feature Content - Vertical Layout managed in layout.css */

  /* Feature Video Canvas - Desktop Optimization */
  .feature-video-canvas {
    max-width: min(80vw, 1200px);
    padding: 0;
  }

  /* Use Cases - Desktop: Three column layout */
  .usecases-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-large), 4.8125vw, var(--space-huge));
    max-width: var(--container-xl);
  }

  .usecase-card {
    max-width: none;
    margin: 0;
    padding: clamp(var(--space-large), 4.8125vw, var(--space-huge));
  }


  /* Advanced Interactions */
  .usecase-card:hover {
    transform: translateY(-0.25rem);
  }

  .usecase-content {
    max-width: clamp(31.25rem, 43.75rem, 72rem);
  }

  /* Navigation Enhancements */
  .nav-actions {
    gap: var(--space-medium);
  }

  /* Footer Layout */
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .footer-brand {
    text-align: left;
  }

  .footer-nav {
    justify-content: flex-end;
  }

  .footer-links {
    flex-direction: row;
    gap: var(--space-medium);
  }

}

/* ==========================================
 * LARGE DESKTOP BREAKPOINT (1280px+)
 * ========================================== */

@media (min-width: 1280px) {
  /* Container Max-Width */
  .container {
    max-width: var(--container-2xl);
  }

  /* Hero Visual Optimization */
  .character-image {
    max-width: 17.5rem;
  }

  .video-container {
    max-width: var(--width-golden-lg);
  }

  /* Grid Gaps Enhancement */
  .features-grid,
  .usecases-grid {
    gap: var(--space-giant);
  }

  /* Typography Fine-Tuning */
  .hero-description {
    max-width: 56.25rem;
  }

  .section-description {
    max-width: 45rem;
  }
}

/* ==========================================
 * ULTRA-WIDE BREAKPOINT (1536px+)
 * ========================================== */

@media (min-width: 1536px) {
  /* Hero Section - Asymmetric Layout */
  .hero-content {
    grid-template-columns: 1.618fr 1fr; /* Golden ratio */
  }

  /* Enhanced Visual Elements */
  .character-image {
    max-width: 18.75rem;
  }

  /* Advanced Grid Layouts */
  .features-grid {
    grid-template-columns: 1fr;
    max-width: 87.5rem;
    margin: 0 auto;
  }

  /* Ultra-wide: Maximum container width for features */
  .feature-container {
    max-width: 87.5rem;
  }

  .feature-visual .video-placeholder {
    max-width: 37.5rem;
    height: 26.25rem;
  }

  /* Use Cases Grid - Ultra-wide enhancements */
  .usecases-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 75rem;
    margin: 0 auto;
  }

  .usecase-card {
    max-width: none;
    padding: var(--space-large);
  }

}

/* ==========================================
 * MOBILE LANDSCAPE OPTIMIZATION
 * ========================================== */

@media (orientation: landscape) and (max-height: 600px) {
  .hero {
    min-height: 100vh;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .hero-content {
    gap: var(--space-large);
  }

  .hero-title {
    margin-bottom: var(--space-small);
  }

  .hero-description {
    margin-bottom: var(--space-medium);
  }
}

/* ==========================================
 * HIGH-DPI DISPLAY OPTIMIZATION
 * ========================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Enhanced border rendering */
  .feature-card,
  .usecase-card,
  .card {
    border-width: 0.03125rem;
  }

  /* Crisp icon rendering */
  .usecase-icon,
  .character-face {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ==========================================
 * REDUCED MOTION ACCESSIBILITY
 * ========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .gentle-bounce {
    animation: none;
  }

  .feature-card:hover,
  .usecase-card:hover {
    transform: none;
  }
}

/* ==========================================
 * PRINT STYLES
 * ========================================== */

@media print {
  .header,
  .nav,
  .modal-overlay {
    display: none !important;
  }

  .hero,
  .section {
    page-break-inside: avoid;
  }

  .feature-card,
  .usecase-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 0.0625rem solid var(--neutral-300);
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .features-grid,
  .usecases-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
 * ULTRA-SMALL MOBILE (320px) OPTIMIZATION
 * ========================================== */

@media (max-width: 320px) {
  /* 컨테이너 패딩 개선 (PHASE 1B - 16px 최소값 보장) */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 영상 컨테이너 최적화 (PHASE 1B - 새로운 패딩 반영) */
  .video-placeholder {
    max-width: 288px !important; /* 320px - 32px padding */
    width: 100% !important;
    margin: 0 auto !important;
    padding: 8px !important;
  }

  .video-content {
    padding: 12px !important;
  }

  .video-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /* 텍스트 최적화 */
  .feature-title {
    font-size: clamp(16px, 4vw, 18px) !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
    padding: 0 4px !important;
  }

  .feature-description {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
    padding: 0 4px !important;
    margin: 8px 0 !important;
  }

  /* 히어로 섹션 텍스트 */
  .hero-title {
    font-size: clamp(20px, 6vw, 24px) !important;
    line-height: 1.2 !important;
    padding: 0 8px !important;
  }

  .hero-description {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1.3 !important;
    padding: 0 8px !important;
  }

  /* 섹션 제목 */
  .section-title {
    font-size: clamp(18px, 5vw, 20px) !important;
    line-height: 1.2 !important;
    padding: 0 8px !important;
  }

  .section-description {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1.3 !important;
    padding: 0 8px !important;
  }

  /* 버튼 최적화 */
  .btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
    margin: 4px !important;
  }

  /* 📱 초소형 모바일 활용법 카드 최적화 (320px) */
  .usecase-card {
    margin: 8px 0 !important;
    padding: 16px !important;
    border-radius: 12px !important;
    background: var(--color-surface-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  .usecase-content {
    gap: 0.75rem !important;
  }

  .usecase-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0.75rem !important;
  }

  .usecase-icon svg {
    max-width: 48px !important;
    max-height: 48px !important;
  }

  .usecase-title {
    font-size: clamp(14px, 4.5vw, 16px) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    word-break: keep-all !important;
  }

  .usecase-description {
    font-size: clamp(11px, 3.8vw, 13px) !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: keep-all !important; /* 한국어 단어 보호 */
    white-space: normal !important;
    color: var(--color-text-secondary) !important;
  }

  /* Feature 3 초소형 모바일에서도 텍스트 줄바꿈 보장 (PHASE 2B - 한국어 특화) */
  [data-anchor="feature3"] .feature-description {
    font-size: clamp(10px, 3.2vw, 12px) !important;
    line-height: 1.5 !important; /* 한국어 최적 줄간격 */
    word-break: keep-all !important; /* 한국어 단어 유지 */
    overflow-wrap: break-word !important; /* 긴 영어 단어만 자름 */
    hyphens: auto !important;
    padding: 0 4px !important;
    white-space: normal !important;
  }
}

/* ==========================================
 * 모든 FEATURE 섹션 텍스트 안전한 중앙정렬 (PHASE 1A,2B - 한국어 특화 개선)
 * ========================================== */
.section.feature-section .feature-description,
.section.feature-section p.feature-description {
  width: 100% !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: keep-all !important; /* 한국어 단어 보호 */
  hyphens: auto !important;
  line-height: 1.6 !important; /* 한국어 최적 줄간격 */
  white-space: normal !important;
}

/* ==========================================
 * 데스크탑 최적화 (1024px+)
 * ========================================== */

/* 데스크탑에서 푸터 다운로드 버튼 숨김 - 기존 다운로드 섹션 사용 */
@media screen and (min-width: 1024px) {
  .footer-mobile-download {
    display: none !important;
  }

  /* 데스크탑에서도 usecase 카드 균일한 크기 적용 */
  .usecase-card {
    min-height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .usecase-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    text-align: center !important;
  }
}

/* 대형 화면에서도 usecase 카드 균일한 크기 유지 (1536px+) */
@media screen and (min-width: 1536px) {
  .usecases-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(2rem, 3vw, 3rem) !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
  }

  .usecase-card {
    min-height: 380px !important;
    max-height: 480px !important;
    min-width: 400px !important;
    max-width: 500px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 auto !important;
  }

  .usecase-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    text-align: center !important;
    padding: clamp(2rem, 3vw, 3rem) !important;
  }
}

/* ==========================================
 * LARGE DESKTOP BREAKPOINT (1400px+)
 * ========================================== */

@media (min-width: 1400px) {
  /* Feature Video Canvas - Large Desktop Optimization */
  .feature-video-canvas {
    max-width: 1400px;
  }

  .feature-video-container {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  }
}

/* ==========================================
 * FOOTER EDGE-TO-EDGE OVERRIDE (All Sizes)
 * 항상 양쪽 21px 패딩 유지 - .section 클래스 오버라이드
 * ========================================== */
.footer-section,
.section.footer-section,
section.footer-section,
[data-anchor="footer"].footer-section {
  align-items: stretch !important;
  padding-left: 21px !important;
  padding-right: 21px !important;
}

.footer-section .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.footer-content {
  width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.footer-bottom {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================
 * VW/VH PROPORTIONAL SCALING SYSTEM (1024px+)
 * 기준 해상도: 1440x1080 - 모든 요소 비율 유지 스케일링
 * ========================================== */
@media (min-width: 1024px) {
  /* === 타이포그래피 스케일링 === */
  .hero-title {
    font-size: var(--vw-title-hero) !important; /* 60px at 1440 */
  }

  .section-title,
  .feature-title {
    font-size: var(--vw-title-section) !important; /* 48px at 1440 */
  }

  .hero-description,
  .feature-description,
  .section-description {
    font-size: var(--vw-text-large) !important; /* 20px at 1440 */
    line-height: 1.7 !important;
  }

  .usecase-title {
    font-size: var(--vw-title-card) !important; /* 22px at 1440 */
  }

  .usecase-description {
    font-size: var(--vw-text-body) !important; /* 16px at 1440 */
  }

  /* === 버튼 스케일링 === */
  .btn {
    padding: var(--vw-button-padding-y) var(--vw-button-padding-x) !important;
    font-size: var(--vw-text-body) !important;
    border-radius: var(--vw-radius-md) !important;
  }

  .btn-primary {
    padding: var(--vw-button-padding-y) var(--vw-button-padding-x) !important;
  }

  /* === 컨테이너/섹션 패딩 스케일링 === */
  .container {
    padding-left: var(--vw-container-padding) !important;
    padding-right: var(--vw-container-padding) !important;
  }

  .section {
    padding-top: var(--vh-section-padding) !important;
    padding-bottom: var(--vh-section-padding) !important;
  }

  .footer-section {
    padding-left: var(--vw-container-padding) !important;
    padding-right: var(--vw-container-padding) !important;
  }

  /* === 카드 스케일링 - 균일 크기 === */
  .usecase-card {
    padding: var(--vw-card-padding) !important;
    border-radius: var(--vw-radius-xl) !important;
    min-height: 20vh !important; /* 균일한 최소 높이 */
    max-height: 28vh !important; /* 균일한 최대 높이 */
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .usecases-grid {
    gap: var(--vw-gap-cards) !important;
    align-items: stretch !important; /* 카드 높이 균일화 */
  }

  .usecase-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-align: center !important;
  }

  /* === 비디오 컨테이너 스케일링 === */
  .feature-video-canvas {
    max-width: var(--vw-video-max) !important;
  }

  .feature-video-container {
    border-radius: var(--vw-radius-lg) !important;
  }

  /* === 캐릭터 이미지 스케일링 === */
  .character-image {
    width: var(--vw-character-size) !important;
    height: var(--vw-character-size) !important;
    max-width: 300px !important;
    max-height: 300px !important;
  }

  .character-background {
    max-width: calc(var(--vw-character-size) * 1.3) !important;
  }

  /* === 헤더 스케일링 === */
  .header,
  header {
    height: var(--vh-header) !important;
    min-height: 50px !important;
  }

  .nav-brand {
    font-size: var(--vw-text-large) !important;
  }

  /* === 간격 스케일링 === */
  .feature-content {
    gap: var(--vw-space-lg) !important;
  }

  .feature-text {
    margin-bottom: var(--vw-space-lg) !important;
  }

  .hero-cta {
    gap: var(--vw-space-md) !important;
  }

  /* === 아이콘 스케일링 - 적절한 크기 === */
  .usecase-icon {
    width: 3.5vw !important;  /* 약 50px at 1440 */
    height: 3.5vw !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    margin-bottom: 1vw !important;
  }

  .usecase-icon svg {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ==========================================
 * FULLPAGE.JS 호환성 (데스크탑 1024px+)
 * ========================================== */
@media (min-width: 1024px) {
  /* 섹션이 화면에 꽉 차고 스크롤 비활성화 */
  .section {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 섹션 내부 스크롤 완전 비활성화 */
  .section *,
  .section .container,
  .section .fp-overflow {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .section .container {
    height: auto !important;
    max-height: 90vh !important;
  }

  /* fullPage.js 스크롤 오버플로우 비활성화 */
  .fp-overflow {
    overflow: hidden !important;
    max-height: 100vh !important;
  }

  .fp-scrollable {
    overflow: hidden !important;
  }

  /* 히어로 섹션 */
  .section.hero {
    padding-top: var(--vh-header) !important;
  }

  .hero-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3vw !important;
    align-items: center !important;
    max-width: 90vw !important;
  }

  /* 피처 섹션들 - 컨텐츠 중앙 정렬 */
  .feature-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-height: 85vh !important;
  }

  .feature-text {
    text-align: center !important;
    margin-bottom: 2vh !important;
  }

  .feature-video-canvas {
    max-height: 55vh !important;
  }

  .feature-video-container {
    max-height: 50vh !important;
  }

  /* 활용법 섹션 - 컨텐츠가 화면에 맞게 */
  .section[data-anchor="usecases"] .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  .section-header {
    margin-bottom: 3vh !important;
  }

  .usecases-grid {
    max-height: 60vh !important;
  }

  /* 푸터 섹션 - 화면의 1/3 높이 */
  .section.footer-section,
  .section[data-anchor="footer"] {
    height: 33.33vh !important;
    min-height: 33.33vh !important;
    max-height: 33.33vh !important;
  }

  .footer-section .container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* ==========================================
 * DESKTOP HERO TEXT FIX (1024px+)
 * 히어로 타이틀 잘림 방지 - 모든 데스크탑 크기
 * ========================================== */
@media (min-width: 1024px) {
  /* 히어로 타이틀 반응형 크기 조정 - 컨테이너 폭에 맞춤 */
  .hero-title {
    font-size: clamp(1.75rem, 2.8vw, 3.2rem) !important;
    line-height: 1.25 !important;
  }

  /* 타이틀 라인 래핑 허용 - 잘림 방지 */
  .title-line {
    white-space: normal !important;
    word-break: keep-all !important;
    display: block !important;
  }

  .title-highlight {
    white-space: normal !important;
    word-break: keep-all !important;
    display: block !important;
  }

  /* 히어로 텍스트 영역 패딩 조정 */
  .hero-text {
    padding-left: clamp(1rem, 2vw, 2rem) !important;
    padding-right: clamp(0.5rem, 1vw, 1rem) !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* 히어로 설명 텍스트 반응형 */
  .hero-description {
    font-size: clamp(0.95rem, 1.2vw, 1.25rem) !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    word-break: keep-all !important;
  }

  /* 히어로 컨텐츠 그리드 간격 조정 */
  .hero-content {
    gap: clamp(2rem, 3vw, 4rem) !important;
  }
}

/* 1600px 이상 대형 화면 - 타이틀 크기 추가 조정 */
@media (min-width: 1600px) {
  .hero-title {
    font-size: clamp(2.5rem, 2.5vw, 3rem) !important;
  }

  .hero-description {
    font-size: clamp(1rem, 1.1vw, 1.2rem) !important;
  }
}