/* 상업용 고급 2단 헤더 레이아웃 & 트랜지션 (수정/교체본)
   - 접두사: sdh-
   - 한국어 주석: 또리님을 위한 상세 설명 */

/* 루트 변수: 크기/속도/이징 */
:root{
    --sdh-top-h: 72px;                /* 상단 행 높이 */
    --sdh-bottom-h: 54px;             /* 하단 행 높이 */
    --sdh-bg: rgba(255,255,255,0.86);
    --sdh-blur: 6px;
    --sdh-ease: cubic-bezier(.22,.61,.36,1);     /* 기본 이징 */
    --sdh-duration: 420ms;                           /* 공통 트랜지션 */
    /* 하단(2단) 전용 더 빠른 트랜지션 → 겹침 인상 최소화 */
    --sdh-bottom-duration: 240ms;
    --sdh-bottom-ease: cubic-bezier(.33,.66,.1,1);   /* 더 빠르게 사라짐 */
    --sdh-shadow: 0 12px 30px rgba(0,0,0,0.06);
  }
  
  .sdh-header{
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10000;
    backdrop-filter: blur(var(--sdh-blur));
    -webkit-backdrop-filter: blur(var(--sdh-blur));
    width: 100%;
    will-change: transform;
    transform: translateZ(0);
  }
  
  /* 행 공통 */
  .sdh-row{
    width: 100%;
    background: var(--sdh-bg);
    transition: transform var(--sdh-duration) var(--sdh-ease), opacity var(--sdh-duration) var(--sdh-ease);
  }
  
  /* 상단/하단 레이어 순서 지정: 하단이 위로 올라오며 겹쳐 보이는 문제 최소화 */
  .sdh-row--top{ position: relative; z-index: 5; }
  #sdh-row-bottom{ position: relative; z-index: 3; }
  
  /* 상단 행 */
  .sdh-row--top{
    height: var(--sdh-top-h);
    display: grid;
    align-items: center;
    box-shadow: var(--sdh-shadow);
  }
  .sdh-top-inner{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  
  /* 좌/우측 영역 */
  .sdh-top-left,
  .sdh-top-right{
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  
  /* 로고 */
  .sdh-logo{
    margin: 0;
    line-height: 1;
    text-align: center;
    font-family: "Cinzel", serif;   /* 고급스러운 세리프 */
    font-weight: 600;
    letter-spacing: 0.12em;
    font-size: clamp(18px, 2.1vw, 24px);
  }
  .sdh-logo-link{
    color: #111;
    text-decoration: none;
    display: inline-block;
    transform: translateZ(0);
  }
  
  /* 아이콘 버튼 */
  .sdh-icon-btn{
    border: 0; background: transparent; padding: 8px; cursor: pointer;
  }
  .sdh-icon{ width: 18px; height: 18px; display: inline-block; }
  
  /* (요청) 장바구니 배지 완전 비활성화 안전장치 */
  .sdh-badge{ display: none !important; }
  
  /* 하단 행: 기본 표시 상태 (전용 빠른 트랜지션 적용) */
  #sdh-row-bottom{
    height: var(--sdh-bottom-h);
    display: grid; align-items: center;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--sdh-shadow);
    transition: transform var(--sdh-bottom-duration) var(--sdh-bottom-ease),
                opacity   var(--sdh-bottom-duration) var(--sdh-bottom-ease);
  }
  
  /* 하단 메뉴 */
  .sdh-primary-nav{ max-width: 1440px; margin: 0 auto; padding: 0 24px; }
  .sdh-menu{
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: clamp(12px, 2vw, 28px);
    align-items: center; justify-content: center;
  }
  .sdh-link{
    text-decoration: none; color: #111;
    font-family: "Montserrat", system-ui, -apple-system, "Noto Sans KR", sans-serif;
    font-weight: 600; letter-spacing: .06em;
    font-size: clamp(12px, 1vw, 14px);
    padding: 8px 2px; position: relative;
  }
  .sdh-link::after{
    content:""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
    background: #111; transform: scaleX(0);
    transform-origin: center;
    transition: transform 240ms var(--sdh-ease);
  }
  .sdh-link:hover::after{ transform: scaleX(1); }
  
  /* (요청) 스크롤 다운: 하단 행만 빠르게 숨김(슬라이드 + 페이드) */
  .sdh-header.sdh--condensed #sdh-row-bottom{
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  
  /* 모바일 가시성 제어 */
  .sdh-only-desktop{ display: inline-flex; }
  /* (중요) 데스크톱에서 모바일 요소 강제 숨김 */
  .sdh-only-mobile{ display: none !important; }
  
  @media (max-width: 1024px){
    :root{ --sdh-top-h: 64px; --sdh-bottom-h: 0px; }
    /* 태블릿/모바일: 하단 주 메뉴는 기본적으로 숨기고 모바일 드로어로 대체 */
    #sdh-row-bottom{ display: none; }
    .sdh-only-desktop{ display: none !important; }
    .sdh-only-mobile{ display: inline-flex !important; }
  }
  
  /* 모바일 드로어 & 오버레이 */
  .sdh-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; transition: opacity var(--sdh-duration) var(--sdh-ease);
  }
  .sdh-overlay[aria-hidden="false"]{ opacity: 1; }
  
  .sdh-mobile-drawer{
    position: fixed; top: 0; right: 0; height: 100svh; width: min(84vw, 360px);
    background: #0a0a0a; color: #fff;
    transform: translateX(100%); transition: transform var(--sdh-duration) var(--sdh-ease);
    padding: 72px 20px 24px;
  }
  .sdh-mobile-drawer[aria-hidden="false"]{ transform: translateX(0); }
  .sdh-mobile-drawer ul{
    list-style: none; padding: 0; margin: 0; display: grid; gap: 18px;
  }
  .sdh-mobile-drawer a{
    color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: .04em;
  }
  
  /* 모바일 햄버거 */
  .sdh-hamburger{
    width: 36px; height: 36px; display: inline-grid; place-items: center;
    border: 0; background: transparent; cursor: pointer;
  }
  .sdh-hamburger span{
    display: block; width: 24px; height: 2px; background: #111; border-radius: 2px;
    transition: transform 260ms var(--sdh-ease), opacity 260ms var(--sdh-ease);
  }
  .sdh-hamburger span + span{ margin-top: 6px; }
  .sdh-hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .sdh-hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .sdh-hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
  
  /* (요청) 드로어 내부 'X' 닫기 버튼 */
  .sdh-close{
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px; border-radius: 999px;
    border: 0; background: rgba(255,255,255,0.08); color: #fff;
    font-size: 22px; line-height: 40px; text-align: center; cursor: pointer;
  }
  .sdh-close:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }