/* Petty our boss — 시안 v4 공통 스타일 (철학: 완벽보다 거침, 규칙보다 자유) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&family=Gaegu:wght@400;700&family=Dokdo&family=Special+Elite&display=swap');
:root{
  --paper:#f1e7d3;--paper2:#e8dcc4;--ink:#2b1a14;--red:#a8432c;--blue:#2f6090;--leather:#6b3a2a;
  --pink:#e3a0a8;--mint:#9cc9c7;--mustard:#d9a441;
  --dirt:'Rubik Dirt',sans-serif;--type:'Special Elite',monospace;--hand:'Gaegu',cursive;--brush:'Dokdo',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{font-family:Pretendard,sans-serif;color:var(--ink);background:var(--paper);font-size:15px;line-height:1.65}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.5;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.dirt{font-family:var(--dirt);font-weight:400}.type{font-family:var(--type)}.hand{font-family:var(--hand)}

/* ── 상단 메뉴: 항상 보임 ── */
.top{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--ink)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:6px;
  background:repeating-linear-gradient(90deg,var(--leather) 0 10px,transparent 10px 18px);opacity:.55}
.top-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:10px 24px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:52px;transform:rotate(-7deg);transition:transform .15s steps(2)}
.brand:hover img{transform:rotate(7deg)}
.brand img.wm{width:auto;height:30px;transform:none}
.brand b{font-family:var(--dirt);font-weight:400;font-size:25px;color:var(--red);line-height:1}
.gnb{display:flex;gap:22px;margin-left:24px;font-family:var(--type);font-size:14px}
.gnb a{position:relative;padding:4px 2px}
.gnb a.on::before,.gnb a:hover::before{content:"";position:absolute;inset:-6px -12px;border:2px solid var(--red);border-radius:52% 48% 55% 45%/60% 45% 55% 40%;transform:rotate(-3deg)}
.util{margin-left:auto;display:flex;gap:16px;align-items:center;font-family:var(--type);font-size:13px}
.util .cnt{background:var(--red);color:var(--paper);border-radius:50%;width:20px;height:20px;display:inline-grid;place-items:center;font-size:11px;margin-left:3px}
.only-m{display:none}
.burger{display:none;background:none;border:0;font-family:var(--type);font-size:14px;border:1.5px solid var(--ink);padding:4px 10px}

/* ── 가죽 태그 버튼 ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;white-space:nowrap;
  background:var(--ink);color:var(--paper);font-family:var(--brush);font-size:25px;letter-spacing:.02em;border:0;cursor:pointer;
  border-radius:6px 14px 7px 12px;box-shadow:0 5px 0 var(--leather);transform:rotate(-1deg);transition:transform .08s steps(1),box-shadow .08s steps(1)}
.btn::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(241,231,211,.55);border-radius:4px 10px 5px 9px;pointer-events:none}
.btn::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:6px;margin-top:-3px;pointer-events:none;
  background:radial-gradient(circle,#c9a46a 2.4px,transparent 3px) left/6px 6px no-repeat,radial-gradient(circle,#c9a46a 2.4px,transparent 3px) right/6px 6px no-repeat}
.btn:hover{transform:rotate(1deg)}
.btn:active{transform:translateY(5px) rotate(0);box-shadow:0 0 0 var(--leather)}
.btn small{font-family:var(--type);font-size:11px;white-space:nowrap;opacity:.7;letter-spacing:.12em}
.btn.red{background:var(--red);box-shadow:0 5px 0 #6e2a1b}
.btn.blue{background:var(--blue);box-shadow:0 5px 0 #1d3d5c}
.btn.wide{width:100%}
.note-btn{display:inline-block;font-family:var(--brush);font-size:23px;background:#fffaf0;border:2px solid var(--leather);padding:6px 18px;transform:rotate(2deg);box-shadow:3px 3px 0 rgba(43,26,20,.18)}
.note-btn:hover{transform:rotate(-2deg);background:var(--pink)}
.badge{display:inline-block;font-family:var(--type);font-size:11px;padding:3px 9px;background:var(--mustard);color:var(--ink);transform:rotate(-4deg)}
.badge.pink{background:var(--pink)}.badge.mint{background:var(--mint)}.badge.red{background:var(--red);color:var(--paper)}

/* ── 공통 섹션 ── */
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.page-title{text-align:center;padding:60px 0 28px}
.page-title h1{font-family:var(--dirt);font-weight:400;font-size:clamp(46px,7vw,92px);color:var(--ink);line-height:.95}
.page-title p{font-family:var(--hand);font-size:22px;color:var(--leather)}
.stitch-line{height:3px;background:repeating-linear-gradient(90deg,var(--leather) 0 12px,transparent 12px 20px);opacity:.5;margin:20px 0}

/* ── 상품 카드 ── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 28px}
.card{display:block}
.card .ph{position:relative;aspect-ratio:3/4;background:#e6e3de;overflow:hidden;border-radius:4px 10px 4px 8px}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .ph img{transform:scale(1.04)}
.card .badge{position:absolute;top:12px;left:12px}
.card .tag{position:absolute;right:-6px;bottom:18px;background:var(--paper);border:1.5px solid var(--ink);font-family:var(--type);font-size:12px;padding:4px 14px 4px 18px;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);transform:rotate(-3deg)}
.card .no{font-family:var(--type);font-size:12px;color:var(--leather);margin-top:12px}
.card b{display:block;font-size:15px}
.card .price{font-family:var(--type);font-size:14px}
.card .price del{opacity:.5;margin-right:6px}

/* ── 하단: 영수증 ── */
.receipt{max-width:min(460px,calc(100% - 32px));margin:90px auto 60px;background:#fffaf0;padding:28px 26px 22px;font-family:var(--type);font-size:12px;line-height:1.85;transform:rotate(-1deg);
  -webkit-mask:radial-gradient(circle 7px at 50% 0,#0000 98%,#000) top/20px 51% repeat-x,radial-gradient(circle 7px at 50% 100%,#0000 98%,#000) bottom/20px 51% repeat-x}
.receipt h4{font-family:var(--dirt);font-weight:400;font-size:26px;color:var(--red);text-align:center}
.receipt .row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(43,26,20,.3)}
.receipt .links{display:flex;justify-content:center;gap:14px;margin-top:10px}
.receipt .thx{text-align:center;font-family:var(--hand);font-size:19px;margin-top:8px}

.draft{position:fixed;left:14px;bottom:14px;z-index:95;font-size:11px;background:var(--ink);color:var(--paper);padding:4px 10px;border-radius:999px;opacity:.75}

@media(max-width:860px){
  .draft{display:none}
  .gnb,.util .hide-m{display:none}.burger{display:block;margin-left:auto}
  .top-in{gap:12px;padding:8px 14px}.util{margin-left:0}.brand img{width:40px}.brand img.wm{height:20px}
  .gnb.open .only-m{display:block}
  .gnb.open a.on::before,.gnb.open a:hover::before{inset:-2px auto -2px -12px;width:min(160px,60%)}
  .gnb.open a{padding:10px 2px}
  .gnb.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);padding:18px 24px;border-bottom:2px solid var(--ink);margin:0}
  .grid{grid-template-columns:1fr 1fr;gap:30px 14px}
}

/* ── 공통: 토스트·검색·폼·문서 ── */
#pb-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);z-index:200;background:var(--ink);color:var(--paper);font-family:var(--brush);font-size:22px;padding:10px 24px;border-radius:6px 12px 6px 10px;box-shadow:0 5px 0 var(--leather);transition:transform .25s}
#pb-toast.on{transform:translate(-50%,0)}
#pb-search{position:fixed;inset:0;z-index:150;background:rgba(43,26,20,.55);display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 0}
#pb-search.on{display:flex}
#pb-search .sbox{position:relative;width:min(560px,100%);background:#fffaf0;padding:30px 26px 22px;transform:rotate(-1deg);box-shadow:8px 10px 0 rgba(43,26,20,.25)}
#pb-search .x{position:absolute;right:14px;top:10px;background:none;border:0;font-size:20px;cursor:pointer}
#pb-search .sl{font-family:var(--type);font-size:12px;letter-spacing:.2em;color:var(--leather)}
#pb-search input{width:100%;margin:10px 0 16px;font:inherit;font-family:var(--hand);font-size:22px;border:0;border-bottom:2.5px solid var(--ink);background:transparent;padding:6px 2px;outline:none}
#pb-search .sres{display:grid;gap:8px;max-height:50vh;overflow:auto}
#pb-search .sres a{display:flex;gap:12px;align-items:center;padding:6px;border:1.5px dashed transparent}
#pb-search .sres a:hover{border-color:var(--leather)}
#pb-search .sres img{width:56px;height:56px;object-fit:cover;background:#e6e3de}
#pb-search .sres b{display:block;font-size:14px}#pb-search .sres span{font-family:var(--type);font-size:12px}
#pb-search .none{font-family:var(--hand);font-size:19px}
.empty{grid-column:1/-1;text-align:center;padding:50px 10px;font-family:var(--hand);font-size:22px;color:var(--leather)}
.form{max-width:440px;margin:0 auto;background:#fffaf0;padding:34px 30px;transform:rotate(-1deg);box-shadow:6px 9px 0 rgba(43,26,20,.13)}
.form label{display:block;font-family:var(--type);font-size:12px;letter-spacing:.12em;margin:14px 0 4px}
.form input{width:100%;font:inherit;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:8px 2px;outline:none}
.form .agree{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:18px 0}
.form .btn{width:100%;margin-top:6px}
.doc{max-width:820px;margin:0 auto;background:#fffaf0;padding:44px 6%;box-shadow:6px 9px 0 rgba(43,26,20,.12);font-size:14.5px;line-height:1.85}
.doc h2{font-family:var(--type);font-size:16px;margin:26px 0 6px;color:var(--red)}
.doc .draftnote{font-family:var(--hand);font-size:18px;color:var(--leather);border:1.5px dashed var(--leather);padding:8px 14px;margin-bottom:10px}
.tabs{display:flex;justify-content:center;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.tabs button{font-family:var(--brush);font-size:22px;background:#fffaf0;border:2px solid var(--leather);padding:4px 18px;cursor:pointer;transform:rotate(-1deg)}
.tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.posts{max-width:860px;margin:0 auto;border-top:2px solid var(--ink)}
.posts details{border-bottom:1.5px dashed rgba(43,26,20,.35);padding:14px 4px}
.posts summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center}
.posts summary .k{font-family:var(--type);font-size:11px;padding:2px 8px;text-align:center}
.posts summary .d{font-family:var(--type);font-size:12px;color:var(--leather)}
.posts .body{margin:10px 0 4px 82px;font-size:14px;color:#4b3a33}
@media(max-width:600px){.posts summary{grid-template-columns:56px 1fr}.posts summary .d{display:none}.posts .body{margin-left:0}}