/* ============================================================
   kream-product-mobile.css — product-detail-kream.html 모바일 클론
   원본: claude.ai/design "Kream Product Mobile.dc.html" (Wanted DS)
   ------------------------------------------------------------
   전략: 데스크탑 DOM/레이아웃은 그대로 두고, ≤768px에서만
   display:contents + order 로 동일 DOM을 단일 컬럼 모바일 순서로
   재배열한다. 모바일 전용 chrome(갤러리 오버레이/dots/고정 하단 CTA/
   캘린더 바텀시트)은 HTML에 mobile-only로 추가, 데스크탑에선 숨김.

   모바일 섹션 순서(디자인):
   갤러리 → 가격/제목 → 위치 → 공간세부정보 → 호스트(+AI) → 리뷰 → 비슷한상품
   + 고정 하단 CTA(관심/투어/예약) + 캘린더 바텀시트
   ============================================================ */

/* 모바일 전용 요소는 기본(데스크탑) 숨김 */
.kc-m-only { display: none !important; }

@media (max-width: 768px) {
  /* ── 상단 사이트 헤더/브레드크럼 숨김(디자인: 갤러리 오버레이 헤더로 대체) ── */
  .kc-header, #kcBreadcrumb { display: none !important; }

  /* ── main: 단일 컬럼, 풀폭, 하단 CTA 공간 확보 ── */
  #kcMain {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 100% !important;
    padding: 0 0 90px 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
  }
  /* 좌/우 래퍼 박스 제거 → 자식들이 main의 flex item 으로 승격 */
  .kc-left, .kc-right { display: contents !important; }

  /* ── 모바일 섹션 순서(order) ── */
  #kcGallery       { order: 1; }
  .kc-grp-price    { order: 2; }
  #kcLocationSection { order: 3; }
  #kcSpecsSection  { order: 4; }
  #kcHostSection   { order: 5; }
  #kcAiSection     { order: 6; }
  #kcReviewsSection { order: 7; }
  #kcSimilarSection { order: 8; }
  #kcCalWrap       { order: 9; }
  .kc-actions      { order: 10; }

  /* 모바일 비노출 섹션(디자인에 없음) */
  #thumbs,
  #kcHostProductsSection,
  #kcDescSection { display: none !important; }

  /* 모바일 전용 요소 노출 */
  .kc-m-only { display: flex !important; }

  /* ── 1. 갤러리: 풀블리드 정사각 + 오버레이 헤더 + dots ── */
  #kcGallery {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100%;
  }
  #kcGallery > div:first-child { border-radius: 0 !important; }
  #kcGalleryMainImg { cursor: pointer !important; }
  /* 모바일은 화살표 대신 dots+스와이프 → 좌우 화살표 숨김 */
  #kcGallery .banner-nav-arrow { display: none !important; }
  /* 카운터 위치는 디자인과 동일(우하단) */
  #kcGalleryCount { right: 14px !important; left: auto !important; bottom: 14px !important; font-weight: 600; padding: 3px 9px !important; border-radius: 11px !important; }

  /* 갤러리 오버레이 헤더(뒤로/공유)
     상단 인셋 가산 금지: TWA는 상태바 아래에서 콘텐츠가 시작되는데 펀치홀 기기가
     safe-area-inset-top을 보고해 버튼이 과하게 내려가는 실기기 이슈 확인(v4.0) */
  #kcGalleryHeaderM {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; z-index: 6;
  }
  #kcGalleryHeaderM button {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.12);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--ws-text-strong);
  }
  /* 갤러리 dots */
  #kcGalleryDots {
    position: absolute; left: 0; right: 0; bottom: 14px;
    display: flex; justify-content: center; gap: 5px; z-index: 4;
  }
  #kcGalleryDots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
  #kcGalleryDots span.on { background: #fff; }

  /* ── 2. 가격 + 제목 그룹 ── */
  .kc-grp-price {
    display: flex; flex-direction: column;
    padding: 18px 18px 20px !important;
    border-bottom: none !important;
  }
  /* 시세 비교 칩을 최상단으로(디자인 순서) */
  #kcMarketCompare { order: -1; margin: 0 0 12px 0 !important; }
  #kcDepositRow { order: 0; }
  #kcPriceOriginal { order: 0; }
  .kc-grp-price > div:nth-child(3) { order: 0; } /* 할인/가격/단위 flex 행 */
  .kc-grp-price > .kc-title-block { order: 0; margin-top: 16px; border-bottom: none !important; padding-bottom: 0 !important; }

  /* 제목: 모바일은 ws-title3 톤(24/700) */
  #kcTitle { font: 700 24px/1.35 var(--font-sans) !important; letter-spacing: -0.023em !important; }
  #kcAddr  { font: 500 15px/22px var(--font-sans) !important; margin-top: 4px !important; }
  #kcRatingRow { margin-top: 8px !important; }

  /* 편의시설: 가로 스크롤 풀블리드 */
  #amenities {
    flex-wrap: nowrap !important; overflow-x: auto;
    margin: 14px -18px 0 !important; padding: 0 18px !important;
    scrollbar-width: none;
  }
  #amenities::-webkit-scrollbar { display: none; }
  #amenities > * { flex-shrink: 0; }

  /* ── 공통 섹션: 8px 회색 구분바 + 패딩 ── */
  #kcLocationSection,
  #kcSpecsSection,
  #kcHostSection,
  #kcReviewsSection {
    border-top: 8px solid var(--ws-bg-alt) !important;
    margin: 0 !important;
    padding: 22px 18px !important;
  }
  /* ── 3. 위치 ── */
  #kcLocationSection #kcMap { aspect-ratio: 4/3 !important; }

  /* ── 4. 공간 세부 정보 ── */
  #kcSpecsSection .ws-headline2 { font: 600 20px/28px var(--font-sans) !important; letter-spacing: -0.012em; margin-bottom: 10px !important; }

  /* ── 5. 호스트 + AI(같은 흰 영역, 그 사이 회색바 없음) ── */
  #kcHostSection { padding-bottom: 18px !important; }
  #kcAiSection {
    order: 6;
    border-top: none !important;
    margin: 0 !important;
    padding: 0 18px 22px !important;
  }

  /* ── 6. 리뷰 ── */
  #kcReviewMedia { margin-left: -18px !important; margin-right: -18px !important; padding: 0 18px; }

  /* ── 7. 비슷한 상품: 가로 스크롤 ── */
  #kcSimilarSection {
    border-top: 8px solid var(--ws-bg-alt) !important;
    margin: 0 !important;
    padding: 22px 0 24px !important;
  }
  #kcSimilarSection > div:first-child { padding: 0 18px !important; }   /* 헤더(제목+전체보기) */
  #moreProducts {
    display: flex !important; grid-template-columns: none !important;
    gap: 12px !important; overflow-x: auto; padding: 0 18px !important;
    scrollbar-width: none;
  }
  #moreProducts::-webkit-scrollbar { display: none; }
  #moreProducts > * { width: 150px; flex-shrink: 0; }

  /* ── 고정 하단 CTA 바 (관심 / 투어 / 예약하기) ──
     하단 인셋: 앱(WebView)은 env() 미지원 → MainActivity가 주입하는 --app-safe-bottom 우선,
     브라우저(iOS 등)는 env() 폴백. 키보드 열리면 앱이 변수를 0으로 바꿈. */
  .kc-actions {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 120;
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 10px 16px calc(var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)) + 14px) !important;
    margin: 0 !important;
    background: var(--ws-bg); box-shadow: inset 0 1px 0 var(--ws-line);
    transition: padding-bottom 0.15s ease-out;
  }
  /* 관심: 세로 아이콘+라벨 */
  #kcInterestBtn { flex-direction: column; gap: 2px; padding: 0 4px !important; flex-shrink: 0; color: var(--ws-text-neutral); }
  #kcInterestBtn::after { content: '관심'; font-size: 10px; font-weight: 600; }
  #kcInterestBtn[aria-pressed="true"] { color: var(--ws-primary); }
  /* 공유는 하단바에서 숨김(갤러리 오버레이로 이동) */
  #kcShareBtn { display: none !important; }
  /* 투어: 아웃라인 */
  #kcTourBtn {
    flex: 0 0 auto !important; height: 52px !important; padding: 0 18px !important;
    border-radius: 12px !important; background: var(--ws-bg) !important;
    color: var(--ws-text-neutral) !important; box-shadow: inset 0 0 0 1px var(--ws-line) !important;
    font-weight: 600; white-space: nowrap;
  }
  /* 예약하기: primary + 가격 부제 */
  #kcReserve {
    flex: 1 !important; height: 52px !important; border-radius: 12px !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; line-height: 1.1; padding: 0 !important;
  }
  #kcReserve .kc-reserve-label { font-size: 16px; font-weight: 700; }
  #kcReservePriceM { display: block !important; font-size: 11px; opacity: .92; font-weight: 500; }

  /* ── 예약 가능일: 버튼 행/비교 숨김, 캘린더는 바텀시트 ── */
  #kcCalWrap { margin: 0 !important; }
  .kc-cal-buttons { display: none !important; }

  /* 바텀시트 백드롭 */
  #kcSheetBackdrop {
    position: fixed; inset: 0; z-index: 140; background: var(--material-dimmer, rgba(23,23,25,.52));
    animation: mFadeIn .12s ease;
  }
  @keyframes mFadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mSheetIn { from { transform: translateY(100%); } to { transform: none; } }

  /* 캘린더 드롭다운 → 바텀시트 */
  #kcCalDropdown {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 150;
    margin: 0 !important; border: none !important;
    border-radius: 20px 20px 0 0 !important;
    background: var(--ws-bg-elevated, #fff); box-shadow: 0 -8px 40px rgba(0,0,0,.2);
    padding: 0 0 calc(var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)) + 20px) !important;
    max-height: 86vh; overflow-y: auto;
    animation: mSheetIn .3s cubic-bezier(.32,.72,0,1);
  }
  /* 시트 내부 패딩 래퍼 */
  #kcCalDropdown > div:not(.kc-sheet-head):not(.kc-sheet-foot) { padding-left: 20px; padding-right: 20px; }
  /* 시트 핸들 + 헤더(mobile-only) */
  .kc-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 20px 8px !important; position: relative;
  }
  .kc-sheet-head::before {
    content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: var(--ws-fill-strong);
  }
  .kc-sheet-head h2 { font: 700 20px/28px var(--font-sans); color: var(--ws-text-strong); margin-top: 8px; }
  .kc-sheet-head button { background: none; border: none; cursor: pointer; color: var(--ws-text-neutral); width: 32px; height: 32px; margin-top: 8px; display: flex; align-items: center; justify-content: center; }
  /* 시트 푸터 확정 버튼(mobile-only) */
  .kc-sheet-foot { display: block; padding: 12px 20px 4px !important; box-shadow: inset 0 1px 0 var(--ws-line); margin-top: 8px; }
  .kc-sheet-foot button {
    width: 100%; height: 50px; border: none; border-radius: 12px;
    background: var(--ws-primary); color: var(--ws-text-on-primary);
    font: 700 15px/1 var(--font-sans); cursor: pointer;
  }
  /* 시트 월 네비게이션 — 년/월·화살표 확대 */
  #kcCalDropdown #kcCalMonth { font: 700 19px/1 var(--font-sans) !important; color: var(--ws-text-strong) !important; }
  #kcCalDropdown #kcCalPrev,
  #kcCalDropdown #kcCalNext {
    font-size: 28px !important; line-height: 1 !important;
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ws-text-strong) !important; padding: 0 !important;
  }
  #kcCalDropdown #kcCalPrev:active,
  #kcCalDropdown #kcCalNext:active { background: var(--ws-fill); }

  /* 캘린더 셀 모바일 확대 */
  #kcWeekDays { gap: 6px !important; margin: 0 0 8px !important; }
  #kcCalDays { gap: 6px !important; }
  #kcCalDays > div { aspect-ratio: 1/1; font-size: 14px !important; }

  /* 라이트박스 화살표는 모바일에서도 유지(전체화면 보기) */
}

/* 데스크탑: 시트 전용 요소 숨김 보장 */
@media (min-width: 769px) {
  .kc-sheet-head, .kc-sheet-foot, #kcSheetBackdrop, #kcGalleryHeaderM, #kcGalleryDots { display: none !important; }
}