/*
 * cf_web 모바일 퀵메뉴 하단 전환 (이슈 #287)
 *
 * D-1: 신규 규칙은 전부 @media (max-width:768px) 안에서만 선언한다.
 *      기존 ._pc/._mo(1024px 기준선)는 사용하지 않는다 — 두 기준선은 서로
 *      다른 셀렉터 집합을 다루므로 공존 안전(769~1024px 구간은 완전 무변경).
 * D-6: 데스크톱(>=769px) 무변경 보장 — 미디어쿼리 밖 신규 전역 규칙은
 *      `.qm-bar,.qm-top-fab{display:none}` 1줄뿐이다(신규 전용 셀렉터 한정).
 * 컴포넌트 스펙: z-index는 #288 토큰(--z-quick/--z-drawer-dim/--z-drawer)만
 *      참조하고 신규 정수를 부여하지 않는다.
 */

/* D-6 유일 예외 — 신규 전용 셀렉터의 기본 숨김. 데스크톱 렌더링에는 영향 없음(신규 노드만 대상).
   미디어쿼리 앞(기본값)에 두어 아래 @media(max-width:768px) 블록이 후순위로 이겨 모바일에서 노출되게 한다(#287 수정). */
.qm-bar,.qm-top-fab,.qm-sheet-close{display:none}

@media (max-width:768px){
  /* 1) 기존 우측 세로 스택 해제 + body 하단 여백 확보 (M-2, M-4, M-7)
     display:block — 리뷰 P1-1: cu_ref_optimizer_user.css 의
     @media(max-width:1024px){.quick_menu{display:none}} 가 이 파일을 로드하는
     14페이지에서 생존해 있어, 여기서 display 를 선언하지 않으면 그 규칙이
     이겨 .quick_menu 전체(자손 .boxQuick/.boxPhoto 포함)가 숨어 바텀시트가
     렌더되지 않는다. 이 파일이 로드 순서상 최후위라 아래 선언이 이긴다. */
  .quick_menu{display:block;position:static;transform:none;right:auto;top:auto}
  .quick_menu .menu{display:none}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* 2) .qm-bar — 하단 고정 바 (5슬롯) */
  .qm-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-quick);
    display:flex;height:calc(60px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border-top:1px solid rgba(0,0,0,.06);box-shadow:0 -4px 16px rgba(0,0,0,.08);
    transition:transform .3s ease;
  }
  .qm-bar.is-hidden{transform:translateY(100%)}
  .qm-bar__item{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:4px;min-height:44px;padding-top:6px;
    color:#444;background:none;border:0;font:inherit;
    -webkit-tap-highlight-color:transparent;text-decoration:none;
  }
  .qm-bar__item:active{background:rgba(147,111,70,.08)}
  .qm-bar__item:focus-visible{outline:2px solid var(--main-color-dark);outline-offset:-2px}
  .qm-bar__icon{width:20px;height:20px;color:var(--main-color-dark)}
  .qm-bar__label{font-size:11px;font-weight:600;line-height:1}

  /* 3) .qm-top-fab — TOP 미니 FAB */
  .qm-top-fab{
    position:fixed;right:14px;
    bottom:calc(60px + env(safe-area-inset-bottom) + 12px);
    width:44px;height:44px;border-radius:50%;z-index:var(--z-quick);
    background:var(--main-color-dark);color:#fff;border:0;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    opacity:0;pointer-events:none;transform:translateY(8px);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .2s ease,transform .2s ease;
  }
  .qm-top-fab.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
  .qm-top-fab:active{background:#7a5a38}

  @media (prefers-reduced-motion:reduce){
    .qm-bar,.qm-top-fab{transition:none}
  }

  /* 4) .boxG 모바일 바텀시트 (기존 .boxQuick/.boxPhoto 오버라이드, D-3) */
  .quick_menu .boxG{
    position:fixed;top:auto;left:0;right:auto;bottom:0;
    width:100vw;padding:35px 20px;padding-right:20px;
    max-height:88vh;max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:20px 20px 0 0;z-index:var(--z-drawer);
    transform:translateY(100%);transition:transform .3s ease;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .quick_menu .boxG.on{transform:translateY(0)}
  /* 시트 열림용 딤 강등 — 헤더(100)·본문 위, 시트(800) 아래. 드로어 딤(790)과 별개 상태 */
  .aside_bg.qm-sheet-dim{z-index:600}
  /* 시트 닫기(X) 버튼 — 우상단 44px 터치 타깃, 핸들(::before)과 겹치지 않게 우측 배치 */
  .qm-sheet-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:8px;right:8px;width:44px;height:44px;
    padding:0;border:0;border-radius:50%;background:transparent;color:#666;
    cursor:pointer;
  }
  .qm-sheet-close:active{background:rgba(0,0,0,.06)}
  .qm-sheet-close svg{width:22px;height:22px}
  .quick_menu .boxG::before{
    content:'';position:absolute;top:12px;left:50%;
    width:36px;height:4px;border-radius:2px;background:rgba(0,0,0,.15);
    transform:translateX(-50%);
  }

  @media (prefers-reduced-motion:reduce){
    .quick_menu .boxG{transition:none}
  }

  @media (max-width:359px){
    .qm-bar__label{font-size:10px}
  }
}