@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════
 * khan-mobile-dock.css
 * 모바일 하단 CTA(kh-fixed-cta / kd-mobile-bar)를 반투명 글래스 플로팅 dock으로
 * 재도색하는 오버레이 스타일시트. 이 파일은 다른 모든 public CSS 다음에 로드되어야
 * 한다(<head> 마지막 <link>).
 *
 * 소유 범위: application/views/partials/mobile_cta.php 가 출력하는
 *   .kh-fixed-cta[.kd-mobile-bar].kh-glass-dock 네임스페이스만 다룬다.
 * 절대 건드리지 않는 것: khan.css/khan-detail-v10.css 등 공용 파일 자체, 다른
 *   컴포넌트의 셀렉터, 레이아웃 include 순서. 여기서는 오직 캐스케이드
 *   순서(로드 순서)와 클래스 결합 특이도만으로 기존 규칙을 덮어쓴다.
 *
 * 기존 가시성 브레이크포인트(max-width:1023px)와 폼 작성 페이지 숨김 동작
 * (layouts/app.php 의 write 뷰 제외 include)은 그대로 유지되며 이 파일에서는
 * 재정의하지 않는다.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* body 하단 여백 · 탑버튼 오프셋을 새 dock 실측 높이에 맞춰 갱신.
   * dock 자체 padding에는 safe-area 를 넣지 않으므로(아래 참조) 이 한 곳에서만
   * safe-area-inset-bottom 을 더해 이중 여백을 방지한다.
   * (kh-top-btn 은 khan.css 에서 calc(24px + var(--cta-h)) 를 그대로 참조하므로
   *  --cta-h 갱신만으로 탑버튼 오프셋도 함께 보정된다.) */
  :root {
    /* 66px = dock 캡슐 높이(border 2px + padding 8px*2 + 버튼 48px)
     * 10px = 바닥에서 뜨는 인셋 간격(bottom offset)
     *  8px = 콘텐츠와의 여유 버퍼
     * safe-area 는 이 한 줄에서만 더해 body 패딩과 dock 자체 padding에서
     * 중복 가산되지 않도록 한다. */
    --cta-h: calc(66px + 10px + 8px + env(safe-area-inset-bottom));
  }

  /* The late CI integration layer uses literal padding/offsets, so override
     those explicitly rather than relying on the older variable-only rules. */
  body[data-form="0"] { padding-bottom: var(--cta-h); }
  body[data-form="0"] .kh-top-btn { bottom: calc(12px + var(--cta-h)); z-index: 94; }

  /* ── dock 컨테이너: 엣지투엣지 바 → 인셋 플로팅 캡슐 ─────────────────── */
  .kh-fixed-cta.kh-glass-dock {
    position: fixed;
    inset: auto 16px calc(10px + env(safe-area-inset-bottom)) 16px;
    left: 16px; right: 16px; bottom: calc(10px + env(safe-area-inset-bottom));
    top: auto;
    margin-inline: auto;
    width: auto;
    max-width: 480px;
    z-index: 95; /* kh-fpanel(110/120), kh-fsheet-backdrop(110), kh-mobile 드로어(100/400)보다 낮게 유지 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow:
      0 12px 32px rgba(16, 24, 40, .18),
      0 1px 0 rgba(255, 255, 255, .5) inset;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    overflow: hidden;
    isolation: isolate;
  }

  /* ── 일반(kh-glass-dock--actions) · 상세(kh-glass-dock--detail) 공통 버튼 ── */
  .kh-glass-dock .kh-fixed-cta__btn,
  .kh-glass-dock .kd-mobile-save,
  .kh-glass-dock .kd-mobile-phone {
    min-height: 44px;
    height: 48px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: background-color .15s var(--ease, ease), color .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
  }

  /* 일반 모드: 2버튼(매물 찾기 / 매물 등록·전화 상담) */
  .kh-glass-dock--actions {
    padding: 8px;
  }
  .kh-glass-dock--actions .kh-fixed-cta__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .8);
    color: var(--ink);
  }
  .kh-glass-dock--actions .kh-fixed-cta__btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .kh-glass-dock--actions .kh-fixed-cta__btn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--brand-rgb), .38);
  }

  /* 상세 모드: 관심매물 토글 + 담당자 전화 상담 */
  .kh-glass-dock--detail {
    padding: 8px;
    gap: 10px;
  }
  .kh-glass-dock--detail .kd-mobile-save {
    flex: 0 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .8);
    color: var(--sub);
    font-size: 12px;
    cursor: pointer;
  }
  .kh-glass-dock--detail .kd-mobile-save svg { width: 19px; height: 19px; }
  /* 저장됨(active) 상태 → 참조 이미지의 옅은 보라 캡슐 강조를 재현 */
  .kh-glass-dock--detail .kd-mobile-save[aria-pressed="true"] {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand);
  }
  .kh-glass-dock--detail .kd-mobile-save[aria-pressed="true"] svg { fill: currentColor; }
  .kh-glass-dock--detail .kd-mobile-phone {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--brand-rgb), .38);
  }
  .kh-glass-dock--detail .kd-mobile-phone .kh-glass-dock__label { font-size: 14px; }
  /* 2026-10-05 사용자 지시: 대표 전화(왼쪽)는 보조 버튼 — 연한 회색·좁게(2:3), 담당자 전화만 보라 주 버튼 */
  .kh-glass-dock--detail .kd-mobile-phone { flex: 3 1 0; }
  .kh-glass-dock--detail .kd-mobile-phone--rep { flex: 2 1 0; background: #EEF0F4; color: #3D4350; box-shadow: none; font-weight: 600; }
  .kh-glass-dock--detail .kd-mobile-phone--rep .kh-glass-dock__label { font-size: 13px; }
  .kh-glass-dock--detail .kd-mobile-phone--rep:active { background: #E3E6EC; }

  .kh-glass-dock__label { white-space: nowrap; }
}

/* ═══════════ backdrop-filter 미지원 시 불투명 대체 배경 ═══════════ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1023px) {
    .kh-fixed-cta.kh-glass-dock {
      background: rgba(255, 255, 255, .98);
    }
  }
}

/* ═══════════ 투명도 축소 선호 시 완전 불투명(가독성 우선) ═══════════ */
@media (max-width: 1023px) and (prefers-reduced-transparency: reduce) {
  .kh-fixed-cta.kh-glass-dock {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ═══════════ 강제 색상 모드(고대비 OS 설정) ═══════════ */
@media (max-width: 1023px) and (forced-colors: active) {
  .kh-fixed-cta.kh-glass-dock {
    background: Canvas;
    border: 1px solid CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .kh-glass-dock .kh-fixed-cta__btn,
  .kh-glass-dock .kd-mobile-save,
  .kh-glass-dock .kd-mobile-phone {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .kh-glass-dock--actions .kh-fixed-cta__btn--primary,
  .kh-glass-dock--detail .kd-mobile-phone {
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
  .kh-glass-dock--detail .kd-mobile-save[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
}

/* 데스크톱(≥1024px)에서는 khan.css 의 기존 규칙(display:none 계열)이 그대로
 * 적용되도록 이 파일은 1023px 이하에서만 동작한다. 별도 선언 불필요. */

@media (prefers-reduced-motion: reduce) {
  .kh-glass-dock a, .kh-glass-dock button { transition: none; }
}

/* 2026-09-29 하단 바 3버튼(매물 찾기 / 매물 등록 / 매수 등록) */
@media (max-width: 1023px) {
  .kh-glass-dock--actions { gap: 6px; }
  .kh-glass-dock--actions .kh-fixed-cta__btn { min-width: 0; padding: 0 6px; gap: 5px; font-size: 13.5px; white-space: nowrap; }
  .kh-glass-dock--actions .kh-fixed-cta__btn svg { width: 17px; height: 17px; }
}

/* 2026-09-29 맨 위로 버튼(40px, 하단 바 위)이 푸터 마지막 줄을 가리지 않게 푸터 아래 여백 확보 */
@media (max-width: 1023px) {
  .kh-footer { padding-bottom: 88px; }
}

/* ═══════════ 2026-10-04 플로팅 캡슐 → 화면 폭 100% 고정 바 ═══════════
 * 바닥에 붙는 fixed 바(좌우 여백·라운드 없음). 아래로 스크롤하면 바 높이만큼 아래로 슬라이딩해 숨고,
 * 위로 스크롤하면 다시 올라온다(khan-mobile-dock.js 가 body.kh-dock-hidden 을 토글).
 * 바 높이 = border-top 1px + padding 8px*2 + 버튼 48px = 65px (+ safe-area 는 바 자체 padding-bottom 에 넣는다). */
@media (max-width: 1023px) {
  :root { --cta-h: calc(65px + 8px + env(safe-area-inset-bottom)); }

  .kh-fixed-cta.kh-glass-dock {
    inset: auto 0 0 0;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-radius: 0;
    border-width: 1px 0 0;
    border-color: rgba(16, 24, 40, .08);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .08);
    transform: translateY(0);
    transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .32s ease;
    will-change: transform;
  }
  .kh-fixed-cta.kh-glass-dock.is-hidden {
    transform: translateY(100%);
    box-shadow: none;
  }
  .kh-glass-dock--actions .kh-fixed-cta__btn,
  .kh-glass-dock--detail .kd-mobile-save,
  .kh-glass-dock--detail .kd-mobile-phone { border-radius: 14px; }

  /* 바가 숨으면 우하단 플로팅(최근 본 매물·밴드·카톡·TOP)과 최근 본 매물 패널도 같은 속도로 바닥까지 내려온다. */
  .kh-float { transition: bottom .32s cubic-bezier(.2, .7, .2, 1); }
  body.kh-dock-hidden .kh-float { bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.kh-dock-hidden .kh-recent { bottom: calc(14px + env(safe-area-inset-bottom)); }
  body[data-form="0"] .kh-top-btn { transition: bottom .32s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
  body[data-form="0"].kh-dock-hidden > .kh-top-btn { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .kh-fixed-cta.kh-glass-dock, .kh-float, body[data-form="0"] .kh-top-btn { transition: none; }
}

/* ═══════════ 2026-10-04 하단 바 iOS 글라스(탭바) 배경 ═══════════
 * 불투명에 가까운 흰색(.9) → 반투명 흰색 + 강한 blur·채도(iOS UITabBar 기본 머티리얼과 같은 방식).
 * 위쪽 0.5px 헤어라인 + 안쪽 흰 하이라이트 1px 로 유리 가장자리를 만든다. 뒤 콘텐츠 색이 비쳐 보인다. */
@media (max-width: 1023px) {
  .kh-fixed-cta.kh-glass-dock {
    background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .5) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-top: .5px solid rgba(60, 60, 67, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 -6px 20px rgba(16, 24, 40, .06);
  }
  .kh-fixed-cta.kh-glass-dock.is-hidden { box-shadow: none; }
  /* 보조 버튼도 유리 위에서 같이 비치도록 반투명 */
  .kh-glass-dock--actions .kh-fixed-cta__btn:not(.kh-fixed-cta__btn--primary),
  .kh-glass-dock--detail .kd-mobile-save {
    background: rgba(255, 255, 255, .38);
    border-color: rgba(255, 255, 255, .55);
  }
}
/* blur 미지원 브라우저·투명도 줄이기 설정에서는 다시 불투명 흰색(가독성 우선) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1023px) { .kh-fixed-cta.kh-glass-dock { background: rgba(255, 255, 255, .97); } }
}
@media (max-width: 1023px) and (prefers-reduced-transparency: reduce) {
  .kh-fixed-cta.kh-glass-dock { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ═══════════ 2026-10-04 모바일·태블릿 전체 메뉴(aside 드로어) ═══════════
 * 오른쪽에서 스르륵(iOS 시트 곡선 .42s) 들어오고, 뒤쪽 화면은 어둡게 + blur.
 * 패널 폭은 화면의 84%(최대 360px)라 왼쪽에 흐려진 원래 화면이 비친다. 닫을 때도 같은 곡선으로 나간다(khan.js setOpen). */
@media (max-width: 1023px) {
  .kh-mobile {
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0);
    -webkit-backdrop-filter: blur(0) saturate(100%);
    backdrop-filter: blur(0) saturate(100%);
    transition: background-color .38s ease, -webkit-backdrop-filter .38s ease, backdrop-filter .38s ease;
  }
  .kh-mobile.is-open {
    background: rgba(15, 23, 42, .32);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }
  .kh-mobile .kh-mobile-panel {
    width: min(84vw, 360px);
    max-width: 360px;
    animation: none;
    transform: translate3d(100%, 0, 0);
    transition: transform .42s cubic-bezier(.32, .72, 0, 1);
    box-shadow: -16px 0 48px rgba(15, 23, 42, .18);
    will-change: transform;
    outline: none;
  }
  .kh-mobile.is-open .kh-mobile-panel { transform: translate3d(0, 0, 0); }
  /* 드로어 로고도 헤더 로고(120px)와 같은 크기 */
  .kh-mobile-head .kh-logo--mobile { width: 120px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1023px) { .kh-mobile.is-open { background: rgba(15, 23, 42, .5); } }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .kh-mobile, .kh-mobile .kh-mobile-panel { transition: none; }
}

/* ═══════════ 2026-10-04 모바일 애니메이션 버벅임 개선 ═══════════
 * 1) 하단 바: transform 만 전환(그림자 전환 제거), 유리 blur 24→16px(blur 반경이 클수록 매 프레임 비용↑)
 * 2) 우하단 버튼: 하단 바를 따라 내려갈 때 bottom(레이아웃) 대신 translate 로 이동 → khan-float.css 끝 블록. 여기 bottom 규칙은 되돌린다.
 * 3) 전체 메뉴 배경: blur 반경(0→10px)을 매 프레임 바꾸던 것을, blur 고정 레이어(::before)의 opacity 만 바꾸는 방식으로. */
@media (max-width: 1023px) {
  .kh-fixed-cta.kh-glass-dock {
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .kh-fixed-cta.kh-glass-dock.is-hidden { transform: translate3d(0, 100%, 0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 -6px 20px rgba(16, 24, 40, .06); }

  .kh-float { transition: none; }
  body.kh-dock-hidden .kh-float { bottom: calc(12px + var(--cta-h, 0px)); }

  .kh-mobile {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
  }
  .kh-mobile.is-open { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kh-mobile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .32);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    opacity: 0;
    transition: opacity .32s ease;
  }
  .kh-mobile.is-open::before { opacity: 1; }
  .kh-mobile .kh-mobile-panel {
    position: relative;
    z-index: 1;
    transition: transform .38s cubic-bezier(.32, .72, 0, 1);
    box-shadow: -8px 0 28px rgba(15, 23, 42, .16);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
/* 2026-10-05 햄버거 메뉴가 폰에서 느리거나 안 눌린다는 의견: 화면 전체를 덮는 backdrop blur 레이어가 저사양 폰(특히 안드로이드 크롬·iOS 사파리)에서
 * 첫 프레임을 수십~수백 ms 늦추는 가장 큰 원인이라, 폰(≤767px)에서는 blur 없이 어둡게만 깔고 태블릿(768~1023px)에만 blur를 남긴다. */
@media (max-width: 767px) {
  .kh-mobile::before {
    background: rgba(15, 23, 42, .46);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: opacity .22s ease;
  }
  .kh-mobile .kh-mobile-panel { transition-duration: .3s; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1023px) { .kh-mobile::before { background: rgba(15, 23, 42, .5); } }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .kh-mobile::before, .kh-mobile .kh-mobile-panel, .kh-fixed-cta.kh-glass-dock { transition: none; }
}