/* ==========================================================================
   HOME Responsive MQ (Tablet & Mobile) - FINAL
   - base layout : home.css
   - JS control  : home-ui.js
   - goals:
     1) Tablet/Mobile: '+' (FAB) => transparent circular (glass)
     2) Fix bottom menu "더보기" not clickable (z-index/pointer-events)
     3) Mobile: photo card edge padding = 0 (full-bleed)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0) 공통: 클릭 이슈 방지 기본값
   - 어떤 오버레이/가상 레이어가 화면 아래까지 덮는 경우가 많음
-------------------------------------------------------------------------- */
.page-home .home3-hero,
.page-home .left-card,
.page-home .left-main{
  position: relative;
}

/* --------------------------------------------------------------------------
   1) Tablet (≤ 1024px)
-------------------------------------------------------------------------- */
@media (max-width: 1024px){

  /* HERO : 좌/우 → 상/하 */
  .page-home .home3-hero{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 행사·여행 / 건강 높이 균형 */
  .page-home .side-card,
  .page-home .health-box{
    min-height: unset;
  }

  /* FEEDS : 4 → 2열 */
  .page-home .home3-feeds{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
  }

  /* 큐레이션 : 5 → 4 */
  .page-home .curation-card .cur-grid{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }

  /* 날씨 : 2열 유지 */
  .page-home .weather-box{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* -------------------------------------------------------
     (A) '+' FAB 버튼: 원형/투명 글래스 (Tablet도 적용)
     - 대상: .hero-fab .fab-btn / .fab-plus
  ------------------------------------------------------- */
  .page-home .hero-fab{
    right: 14px;
    bottom: 14px;
    z-index: 50;               /* HERO 내에서 충분히 위로 */
  }

  .page-home .hero-fab .fab-btn{
    width: 56px !important;
    height: 56px !important;
    border-radius: 999px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background: rgba(255,255,255,.26) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.22) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* iOS 탭 하이라이트/눌림 개선 */
    -webkit-tap-highlight-color: transparent;

    /* 클릭 가능 보장 */
    pointer-events: auto;
  }

  .page-home .hero-fab .fab-plus{
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1;
    transform: translateY(-1px);
  }

  /* 메뉴도 hero 위에서 잘 떠야 함 */
  .page-home .hero-fab .fab-menu{
    z-index: 60;
  }
}


/* --------------------------------------------------------------------------
   2. Mobile Large (≤ 820px)
-------------------------------------------------------------------------- */
@media (max-width: 820px){

  /* HERO 이미지 높이 제한 */
  .page-home .left-main{
    min-height: 420px;
  }

  /* FEEDS : 2 → 1열 */
  .page-home .home3-feeds{
    grid-template-columns: 1fr !important;
  }

  /* 큐레이션 : 4 → 3 */
  .page-home .curation-card .cur-grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }

  /* 건강 라운지 CTA : 2 x 2 */
  .page-home .health-cta{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  /* FAB 살짝 키우기(엄지 터치 안정) */
  .page-home .hero-fab .fab-btn{
    width: 58px !important;
    height: 58px !important;
  }
}


/* --------------------------------------------------------------------------
   3. Mobile (≤ 640px)
-------------------------------------------------------------------------- */
@media (max-width: 640px){

  /* -------------------------------------------------------
     (B) "사진카드 에지 패딩 0" : 홈에서만 full-bleed
     - 기존: .layout-inner {padding:12px} 때문에 양옆이 비는 상태
     - 홈은 좌우 패딩을 0으로 만들고,
       카드 내부만 적당히 라운드/여백 유지
  ------------------------------------------------------- */
  .page-home .layout-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* HERO 전폭: 카드 라운드 유지하되, 화면을 꽉 채움 */
  .page-home .left-card{
    border-radius: 16px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .page-home .left-main{
    min-height: 360px;
    border-radius: 16px;
  }

  /* HERO 내부 캡션은 좌우 여백 약간만(가독성) */
  .page-home .photo-caption{
    left: 12px;
    right: 12px;
  }

  /* -------------------------------------------------------
     (C) 하단 메뉴 "더보기" 클릭 불가 해결
     - 원인: HERO의 어떤 레이어가 화면 아래까지 덮어 pointer-events 먹는 경우
     - 해결: HERO 메인 배경 레이어는 클릭 막고(필요한 버튼만 클릭),
             하단 바는 최상단 z-index
  ------------------------------------------------------- */

  /* 1) left-main이 하단까지 덮는 경우 대비: 배경은 클릭 통과 */
  .page-home .left-main{
    pointer-events: none; /* ✅ 배경은 터치/클릭 통과 */
  }

  /* 2) 하지만 HERO 안에서 클릭되어야 하는 요소들은 다시 살린다 */
  .page-home .photo-caption,
  .page-home .hero-fab,
  .page-home .hero-fab * ,
  .page-home .chip,
  .page-home .chip-admin{
    pointer-events: auto !important;
  }

  /* 3) 하단 네비게이션(있다면) 최상단 */
  .page-home .bottom-nav,
  .page-home .mobile-nav,
  .page-home .home-bottom-nav{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  /* 4) iOS 사파리에서 fixed nav가 있을 때 본문이 가려지지 않게 */
  .page-home .page-main{
    padding-bottom: 90px;
  }

  /* -------------------------------------------------------
     (D) FAB 위치 안정 + 원형 글래스 유지
  ------------------------------------------------------- */
  .page-home .hero-fab{
    right: 12px;
    bottom: 12px;
    z-index: 70;   /* 캡션/이미지보다 위 */
  }

  .page-home .hero-fab .fab-btn{
    width: 56px !important;
    height: 56px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.26) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .page-home .hero-fab .fab-plus{
    font-size: 28px !important;
  }

  /* -------------------------------------------------------
     기존 모바일 규칙 유지(너가 쓰던 것들)
  ------------------------------------------------------- */

  /* 큐레이션 : 3 → 2 (터치 안정) */
  .page-home .curation-card .cur-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px;
  }

  /* 큐레이션 하단 버튼 세로 스택 */
  .page-home .curation-card .cur-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .page-home .curation-card .cur-actions a{
    width: 100%;
    justify-content: center;
  }

  /* 날씨 : 2 → 1 */
  .page-home .weather-box{
    grid-template-columns: 1fr !important;
  }

  /* 손주 액션바 : 2줄 허용 */
  .page-home .kid-bar{
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-home .kid-dd,
  .page-home .kid-link{
    width: 100%;
  }
  .page-home .kid-btn,
  .page-home .kid-link{
    width: 100%;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   4. Small Mobile (≤ 420px)
-------------------------------------------------------------------------- */
@media (max-width: 420px){

  /* HERO 이미지 과도한 높이 방지 */
  .page-home .left-main{
    min-height: 320px;
  }

  /* 텍스트 밀집 방지 */
  .page-home .photo-caption{
    font-size: 12px;
    line-height: 1.4;
  }

  /* 건강 CTA : 세로 */
  .page-home .health-cta{
    grid-template-columns: 1fr !important;
  }

  /* FAB 조금 더 작게(화면 좁을 때) */
  .page-home .hero-fab .fab-btn{
    width: 52px !important;
    height: 52px !important;
  }
}

@media (max-width: 640px){
  .page-home .home-inner{ padding-left:0 !important; padding-right:0 !important; }
}

/* =========================================================
 * MOBILE INPUT TEXT FIX (사진첩 검색 글씨 안 보임 해결)
 * - iOS Safari 포함
 * - 글자색/placeholder/자동완성 색상까지 복구
 * ========================================================= */
@media (max-width: 640px){

  /* 1) 일반 입력 글자색 강제 */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  textarea,
  select{
    color: #0f172a !important;                 /* ✅ 글자색 */
    background: #fff !important;              /* ✅ 배경 */
    border-color: rgba(15,23,42,.18) !important;
    -webkit-text-fill-color: #0f172a !important; /* ✅ iOS에서 글자색 먹히게 */
    caret-color: #2563eb;                     /* 커서 */
  }

  /* 2) placeholder 색(연하게) */
  input::placeholder,
  textarea::placeholder{
    color: rgba(15,23,42,.45) !important;
    opacity: 1; /* iOS에서 placeholder 흐림 과도 방지 */
  }

  /* 3) iOS 자동완성(노란 배경/글자색 꼬임) 대응 */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus{
    -webkit-text-fill-color: #0f172a !important;
    transition: background-color 9999s ease-in-out 0s; /* 배경색 튐 완화 */
  }
}