/* 데스크톱 좌측 패널 프레임
   1300px 이상에서 [패널 560][모바일 500] 을 한 덩어리로 가운데 정렬한다. (시안: 패널 560 · 모바일 480)
   → 모바일 기둥의 중심이 기존 가운데보다 패널 폭의 절반(280px) 오른쪽으로 간다.
   1300 = 패널 560 + 모바일 500 + 양옆 여백 최소 120씩. 그 아래에서는 전부 꺼져 기존 레이아웃 그대로다.

   밀어내는 방식 두 가지:
   - 흐름(flow) 블록: body padding-left 로 한 번에. margin:0 auto 로 가운데 잡는 블록들은
     body 콘텐츠 영역이 좁아진 만큼 자동으로 280px 이동한다. 중첩된 자식까지 같이 가므로 개별 보정 불필요.
   - position:fixed 이면서 viewport 기준으로 가운데를 잡는 요소만 개별 보정.
     left/right:0 + margin auto 형은 margin-left 로, left:50% + translateX(-50%) 형은 left 로.
     left 없이 width:100% 인 fixed(.fix--menu01~04, .vmMenuFixed)는 static 위치를 따르므로 보정 불필요. */

:root {
  --vk-panel-w: 560px;
  --vk-shift: 280px; /* = 패널 폭 / 2 */
}

.vk-side-panel {
  display: none;
}

@media only screen and (min-width: 1300px) {

  body {
    padding-left: var(--vk-panel-w);
  }

  .vk-side-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: calc(50% - 530px); /* (패널 560 + 모바일 500) / 2 */
    width: var(--vk-panel-w);
    height: 100vh;
    box-sizing: border-box;
    padding: 56px 80px; /* 시안: 상하 56 · 좌우 80 → 콘텐츠 폭 400 */
    background: #FFFFFF;
    color: #222222;
    letter-spacing: -0.01em;
    overflow-y: auto;
    z-index: 1;
  }

  /* 화면 높이가 넉넉하면 세로 가운데, 모자라면 위에서부터 스크롤 (justify-content:center 는 넘칠 때 위가 잘린다) */
  .vk-panel-inner {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .vk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* 로고 + 검색 */
  .vk-panel-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .vk-panel-logo img {
    display: block;
    width: 148px;
    height: 60px;
  }
  .vk-panel-search {
    margin: 0;
    height: 56px;
    box-sizing: border-box;
    padding: 0 16px 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1.5px solid #222222;
    border-radius: 8px;
  }
  .vk-panel-search input {
    flex-grow: 1;
    min-width: 0;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: #222222;
  }
  .vk-panel-search input::placeholder {
    color: #999999;
  }
  .vk-panel-search button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  /* 실시간 인기 검색어 */
  .vk-panel-rank-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 4px 8px;
  }
  .vk-panel-rank-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #222222;
  }
  .vk-panel-rank-head span {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
  }
  .vk-panel-rank ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .vk-panel-rank li a {
    height: 46px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid #F0F0F0;
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    text-decoration: none;
  }
  .vk-panel-rank li:last-child a {
    border-bottom: 1px solid #F0F0F0;
  }
  .vk-panel-rank li a:hover span {
    color: #FF2282;
  }
  .vk-panel-rank em {
    width: 20px;
    font-style: normal;
    font-size: 15px;
    font-weight: 800;
    color: #999999;
  }
  .vk-panel-rank em.top {
    color: #FF2282; /* 1~3위만 */
  }
  .vk-panel-rank span {
    flex-grow: 1;
  }
  .vk-trend {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
  }
  .vk-trend.up {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF2282' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5M6 11l6-6 6 6'/></svg>");
  }
  .vk-trend.down {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A90E2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M6 13l6 6 6-6'/></svg>");
  }
  .vk-trend.same {
    width: 14px;
    height: 2px;
    background: #C9C9C9;
    border-radius: 1px;
  }

  /* 브랜드 태그 */
  .vk-panel-brand {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .vk-panel-brand a {
    height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    background: #F4F6F8;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 600;
    color: #222222;
    text-decoration: none;
  }
  .vk-panel-brand a.all {
    color: #666666;
  }
  .vk-panel-brand a:hover {
    color: #FF2282;
  }

  /* QR 카드 */
  .vk-panel-qr {
    box-sizing: border-box;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #F4F6F8;
    border-radius: 12px;
  }
  .vk-panel-qr-code {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 6px;
    background: #FFFFFF;
    border-radius: 6px;
  }
  .vk-panel-qr-code .vk-panel-qr-svg {
    display: block;
    width: 76px;
    height: 76px;
  }
  .vk-panel-qr-code .vk-panel-qr-icon {
    position: absolute;
    left: 33px;
    top: 33px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
  }
  .vk-panel-qr-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .vk-panel-qr-text strong {
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #222222;
  }
  .vk-panel-qr-text span {
    font-size: 13px;
    line-height: 18px;
    color: #666666;
  }
  .vk-panel-qr-text b {
    color: #FF2282;
  }

  /* fixed + left/right:0 + width 500 + margin:0 auto */
  #vpm-header,
  #newVpm-header,
  .vp-cart-change-box,
  .vmSlChBox {
    margin-left: calc(50% - 250px + var(--vk-shift)) !important;
    margin-right: 0 !important;
  }

  /* fixed + width 460 + margin:0 auto */
  #show-cart-header .header {
    margin-left: calc(50% - 230px + var(--vk-shift)) !important;
    margin-right: 0 !important;
  }

  /* fixed + left:50% + translateX(-50%) */
  .downupPopup,
  .coupon-modal-overlay,
  .coupon-banner-toast,
  .cart-rec-cate-wrap {
    left: calc(50% + var(--vk-shift)) !important;
  }

  /* 전체 화면 오버레이(.popup) 안의 290px 박스(.popup__container)는 margin auto 로 가운데.
     오버레이에 패널 폭만큼 padding 을 주면 박스가 모바일 기둥 중심에 맞는다. */
  .popup {
    padding-left: var(--vk-panel-w);
    box-sizing: border-box;
  }

  /* 하단 플로팅 배너: fixed + width 100% + flex 가운데. 같은 방식으로 padding 으로 민다. */
  .floatBn230427 {
    padding-left: var(--vk-panel-w);
    box-sizing: border-box;
  }
}