/* Drawer (sheet) – full v1.6 */

/* 스크롤락 */
body.no-scroll{ overflow:hidden; }

/* ── 공통 표시/레이어 ───────────────────────────── */
.drawer[data-variant="sheet"]{
  position: fixed;
  inset: 0;
  z-index: 600;                 /* 헤더(50) ↑, 팝업/로딩보다 낮게/높게 조정 가능 */
  display: none;               /* 기본 숨김 */
}
.drawer[data-variant="sheet"].active{ display:block; }

.drawer[data-variant="sheet"] .backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  z-index:1;
  pointer-events:auto;
}
.drawer[data-variant="sheet"] .panel{
  position:absolute;
  background:#fff; color:#111;
  overflow:auto;
  padding:16px 16px 28px;
  z-index:2;                   /* 패널이 항상 backdrop 위 */
  pointer-events:auto;
}

/* 닫기 버튼 */
.drawer[data-variant="sheet"] .close{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border:none; background:none;
  color:#111; font-size:28px; line-height:1; cursor:pointer;
}

/* ── 내부 콘텐츠 스타일 ─────────────────────────── */
.drawer[data-variant="sheet"] .profile{
  display:grid; justify-items:center; gap:8px;
  padding:36px 12px 14px; border-bottom:1px solid #ecebf2;
}
.drawer[data-variant="sheet"] .profile .avatar{
  width:84px; height:84px; border-radius:999px;
  background:#e7e7ea var(--avatar, url('/static/img/webshop/mobile/bg_profilepic.png')) center/cover no-repeat;
}
.drawer[data-variant="sheet"] .profile .name{ font-weight:900; font-size:22px; margin:0; color:#111; text-align:center; }
.drawer[data-variant="sheet"] .profile .uid{ font-weight:700; font-size:14px; color:#666; margin:0; }

.drawer[data-variant="sheet"] .profile .logout{
  margin-top:6px; color:#666; font-size:14px; font-weight:700; text-decoration:underline;
  background:none; border:0; padding:0; cursor:pointer; display:inline;
}

.drawer[data-variant="sheet"] .menu-list{ display:grid; gap:18px; padding:40px 12px 40px; }
.drawer[data-variant="sheet"] .menu-list .item{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:18px; color:#111; text-decoration:none;
}
.drawer[data-variant="sheet"] .menu-list .item .icon{
  flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  background:#111; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:900;
}
.drawer[data-variant="sheet"] .menu-list .item.return .icon::before{ content:'\2190'; }
.drawer[data-variant="sheet"] .menu-list .item .icon-img{ flex:0 0 36px; width:36px; height:36px; display:block; }
.drawer[data-variant="sheet"] .menu-list .item .ext{
  margin-left:auto; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
}
.drawer[data-variant="sheet"] .menu-list .item .ext::before{ content:'\2197'; font-size:18px; }

.drawer[data-variant="sheet"] .cta-add{
  width:100%; height:52px; border-radius:999px; border:0;
  background:#111; color:#fff; font-weight:900; font-size:16px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:18px 0 8px;
}
.drawer[data-variant="sheet"] .cta-add .plus{
  width:22px; height:22px; border-radius:50%; background:#fff; color:#111;
  display:inline-flex; align-items:center; justify-content:center; font-weight:900;
}
.drawer[data-variant="sheet"] .divider{ height:1px; border:0; background:#ecebf2; margin:32px 0 32px; }
.drawer[data-variant="sheet"] .lang-row{ display:flex; align-items:center; justify-content:center; gap:10px; padding:0 12px 36px; }
.drawer[data-variant="sheet"] .lang-row .globe{ font-size:18px; }
.drawer[data-variant="sheet"] .lang-row select{
  min-width:180px; padding:8px 10px; border-radius:8px; border:1px solid #d9d9e0; background:#fff; color:#111; font-weight:700;
}
.drawer[data-variant="sheet"] .socials{ display:flex; gap:14px; align-items:center; justify-content:center; padding:2px 0 20px; }
.drawer[data-variant="sheet"] .socials img{ height:28px; filter:invert(1); }

/* ── 레이아웃(애니메이션)만 반응형 ───────────────── */
@media (max-width:767.98px){
  .drawer[data-variant="sheet"] .panel{
    inset:0; width:100%; height:100%;
    animation: drawer-in .22s ease-out both;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  @keyframes drawer-in{ from{ opacity:0; transform:translateY(6%); } to{ opacity:1; transform:translateY(0); } }
}
@media (min-width:768px){
  .drawer[data-variant="sheet"] .panel{
    top:0; right:0; bottom:0; left:auto;
    width: min(420px, 86%);
    animation: slide-in-right .22s ease-out both;
    box-shadow: -24px 0 40px rgba(0,0,0,.35);
  }
}
@media (min-width:1200px){
  .drawer[data-variant="sheet"] .panel{
    width: clamp(380px, 32vw, 460px);
  }
}

@keyframes slide-in-right{ from{ transform:translateX(16px); opacity:0; } to{ transform:translateX(0); opacity:1; } }