/* ==================================================================
   抽屉侧边栏导航（共享样式）
   被 index.html 与 gallery.html 共同引用；修改菜单视觉只需改这里。
   层次：把手 200 / 遮罩 210 / 面板 220（高于页面内一切内容）。
   ================================================================== */
:root{
  --dw-pink-1:#ff5d8f;   /* deep pink  */
  --dw-pink-2:#ff8fab;   /* main pink  */
  --dw-pink-3:#ffb3c6;   /* light pink */
  --dw-green:#6fbf93;
  --dw-text-1:#6b2d43;
  --dw-text-2:#a4637c;
}

/* ---------- 左侧竖型把手（常驻，点击唤醒抽屉） ---------- */
.drawer-handle{
  position:fixed;left:0;top:50%;transform:translateY(-50%);
  width:12px;height:72px;z-index:200;
  border:none;padding:0;cursor:pointer;
  border-radius:0 14px 14px 0;
  background:linear-gradient(180deg,var(--dw-pink-1),var(--dw-pink-2));
  box-shadow:2px 0 14px rgba(255,93,143,.45);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  animation:dw-breathe 2.6s ease-in-out infinite;
}
.drawer-handle::after{                          /* 中间的小白点，暗示"可点" */
  content:'';position:absolute;top:50%;left:2px;transform:translateY(-50%);
  width:3px;height:42%;border-radius:99px;background:rgba(255,255,255,.85);
}
@keyframes dw-breathe{
  0%,100%{box-shadow:2px 0 14px rgba(255,93,143,.45)}
  50%{box-shadow:2px 0 24px rgba(255,93,143,.8)}
}

/* ---------- 遮罩 ---------- */
.drawer-bg{
  position:fixed;inset:0;z-index:210;
  background:rgba(107,45,67,.38);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.drawer-bg.open{opacity:1;pointer-events:auto}

/* ---------- 抽屉面板 ---------- */
.drawer-panel{
  position:fixed;top:0;bottom:0;left:0;z-index:220;
  width:min(78vw,320px);
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,#fff5f8 0%,#ffe3ec 55%,#ffd9e6 100%);
  transform:translateX(-102%);
  transition:transform .3s cubic-bezier(.22,.9,.32,1);
  box-shadow:8px 0 34px rgba(255,93,143,.22);
  padding:calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 18px);
}
.drawer-panel.open{transform:translateX(0)}

.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer-head .title{
  font-size:18px;letter-spacing:4px;color:var(--dw-pink-1);font-weight:700;
}
.drawer-close{
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.85);color:var(--dw-pink-1);
  font-size:15px;line-height:1;box-shadow:0 4px 12px rgba(255,93,143,.18);
}

.drawer-menu{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.drawer-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:16px;text-decoration:none;cursor:pointer;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,143,171,.25);
  color:var(--dw-text-2);font-size:15.5px;letter-spacing:3px;
  transition:all .2s ease;-webkit-tap-highlight-color:transparent;
  font-family:inherit;
}
.drawer-item .icon{font-size:19px}
.drawer-item.active{
  background:linear-gradient(120deg,var(--dw-pink-1),var(--dw-pink-2));
  color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(255,93,143,.35);
}
.drawer-item.disabled{opacity:.45;cursor:default}
.drawer-item:not(.disabled):not(.active):active{transform:scale(.96)}
.drawer-item .tag{
  margin-left:auto;font-size:11px;letter-spacing:1px;color:var(--dw-text-2);
  background:rgba(255,255,255,.85);border-radius:999px;padding:2px 10px;
}
.drawer-item.active .tag{background:rgba(255,255,255,.28);color:#fff}

.drawer-foot{
  margin-top:auto;text-align:center;font-size:12px;letter-spacing:2px;
  color:var(--dw-text-2);border-top:1px dashed rgba(255,143,171,.4);padding-top:16px;
}
.drawer-foot .heart{color:var(--dw-pink-1)}

@media (min-width:768px){
  .drawer-item{font-size:16.5px}
}