/* 디럭스 픽 공용 — 디자인 #596 의 바탕(helmet)과 폭 갈래(720·1100). 쪽 CSS 는 pages/*.html 안에 */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#F6F4EE;color:#252821;-webkit-text-size-adjust:100%}
a{color:#252821}
a:hover{color:#C75337}
img{max-width:100%}
[hidden]{display:none!important}
/* 넓은 폭(1100 이상) */
:root{--pk-asideOrder:0;--pk-heroPhotoOrder:0;--pk-heroPhotoSpan:auto;--pk-heroCols:280px minmax(0,1fr) 260px;
  --pk-gridCols:repeat(auto-fill,minmax(200px,1fr));--pk-listCols:repeat(auto-fill,minmax(210px,1fr));
  --pk-railDisplay:block;--pk-railWidth:260px;--pk-railPos:static;--pk-railPad:0;--pk-railShadow:none;--pk-railMaxH:none;--pk-railBorder:0}
/* 가운데 폭(720~1099) */
@media (max-width:1099.98px){:root{--pk-heroPhotoOrder:3;--pk-heroPhotoSpan:1 / -1;--pk-heroCols:minmax(0,1fr) 260px}}
/* 좁은 폭(720 미만) — 거르기는 아래에서 올라오는 칸 */
@media (max-width:719.98px){
  :root{--pk-asideOrder:2;--pk-heroPhotoSpan:auto;--pk-heroCols:minmax(0,1fr);
    --pk-gridCols:repeat(2,minmax(0,1fr));--pk-listCols:repeat(2,minmax(0,1fr));--pk-railDisplay:none;--pk-railWidth:100%}
  :root.pk-sheet-open{--pk-railDisplay:block;--pk-railPos:fixed;--pk-railPad:22px 20px 20px;
    --pk-railShadow:0 -8px 30px rgba(37,40,33,.18);--pk-railMaxH:80vh;--pk-railBorder:1px solid #252821}
  .pk-ge720{display:none!important}
}
@media (min-width:720px){.pk-lt720{display:none!important}}
/* 물품 저장 서랍(#2127) — 마크업은 pick.js 가 찍는다. 모서리 없음·잉크 #252821 · 강조 #C75337 */
.pk-save,.pk-fab,.pk-dw button,.pk-dw a{font-family:'Noto Sans KR',sans-serif}
.pk-save{display:inline-flex;align-items:center;min-height:44px;margin:0 0 12px;padding:0 16px;background:transparent;color:#252821;font-size:15px;font-weight:700;border:1px solid rgba(37,40,33,.3);cursor:pointer}
.pk-save::before{content:"☆";margin-right:6px;color:#C75337}
.pk-save:hover{border-color:#252821}
.pk-save[aria-pressed=true]{background:#252821;border-color:#252821;color:#F6F4EE}
.pk-save[aria-pressed=true]::before{content:"★";color:#F6F4EE}
.pk-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;background:#252821;color:#F6F4EE;font-size:15px;font-weight:700;border:0;box-shadow:0 8px 30px rgba(37,40,33,.25);cursor:pointer}
.pk-fab b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:#F6F4EE;color:#252821;font-size:14px}
.pk-save:focus-visible,.pk-fab:focus-visible,.pk-dw a:focus-visible,.pk-dw button:focus-visible{outline:2px solid #C75337;outline-offset:3px}
.pk-dw{position:fixed;inset:0;z-index:80}
.pk-dw__bg{position:absolute;inset:0;background:rgba(37,40,33,.45)}
.pk-dw__box{position:absolute;top:0;right:0;bottom:0;width:min(100%,440px);display:flex;flex-direction:column;background:#F6F4EE;color:#252821;box-shadow:-8px 0 30px rgba(37,40,33,.18);animation:pk-dw-in .28s cubic-bezier(.32,.72,0,1)}
@keyframes pk-dw-in{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.pk-dw__box{animation:none}}
.pk-dw__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 22px;border-bottom:1px solid rgba(37,40,33,.18)}
.pk-dw__hd h2{margin:0;font-family:'Hahmlet','Noto Serif KR',serif;font-size:22px;font-weight:500}
.pk-dw__x{min-width:44px;min-height:44px;background:none;border:0;color:#252821;font-size:26px;cursor:pointer}
.pk-dw__note{margin:0;padding:10px 22px 0;font-size:14px;line-height:1.55;color:#5A5D55}
.pk-dw__body{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:14px 22px 22px}
.pk-dw__empty{font-size:15px;line-height:1.6;color:#5A5D55}
.pk-dw__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(37,40,33,.18)}
.pk-dw__list>li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 0;border-bottom:1px solid rgba(37,40,33,.18)}
.pk-dw__title{font-size:16px;font-weight:700;line-height:1.45;text-underline-offset:4px}
.pk-dw__sub{margin:0;font-size:14px;line-height:1.5;color:#5A5D55}
.pk-dw__buy{display:flex;flex-wrap:wrap;gap:8px}
.pk-dw__btn,.pk-dw__line{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.pk-dw__btn{background:#252821;color:#F6F4EE;border:1px solid #252821}
.pk-dw__btn:hover{background:#C75337;border-color:#C75337;color:#F6F4EE}
.pk-dw__line{background:transparent;color:#252821;border:1px solid rgba(37,40,33,.3)}
.pk-dw__line:hover{border-color:#252821;color:#252821}
.pk-dw__del{min-height:44px;padding:0;background:none;border:0;color:#5A5D55;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pk-dw__del:hover{color:#C75337}
.pk-dw__cmp{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:12px;overflow-x:auto}
.pk-dw__cmp>li{display:flex;flex-direction:column;gap:10px;padding:16px;background:#FFFFFF;border:1px solid rgba(37,40,33,.18)}
.pk-dw__cmp dl{margin:0}
.pk-dw__cmp dl>div{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid rgba(37,40,33,.18)}
.pk-dw__cmp dt{font-size:14px;font-weight:700;color:#C75337}
.pk-dw__cmp dd{margin:0;font-size:15px;line-height:1.5}
.pk-dw__cmp .pk-dw__buy{flex-direction:column}
.pk-dw__ft{padding:12px 22px calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(37,40,33,.18)}
.pk-dw__ft .pk-dw__line{width:100%}
