@font-face{font-family:'Gmarket Sans';font-weight:300;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff) format('woff')}
@font-face{font-family:'Gmarket Sans';font-weight:500;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff) format('woff')}
@font-face{font-family:'Gmarket Sans';font-weight:700;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff) format('woff')}
/* ===== MUSEPICK 디자인 시스템 (style_guide.html 토큰 기반 + Figma 실측 보정) ===== */
:root{
  --primary:#4EC4DE; --primary-hover:#3CA9C2; --primary-dark:#2E92A8; --primary-tint:#EAF8FC;
  --ink:#28282B; --gray-700:#4D4D53; --gray-500:#707076; --gray-400:#B0B0B9; --gray-300:#E0E0E7;
  --surface:#FAFAFD; --surface-2:#F4F4F9; --white:#fff;
  --border:#E9EAEC; --border-strong:#DADADD;
  --logo-yellow:#FDE400; --naver:#03CF5D; --kakao:#FEE500;
  --font-display:'Gmarket Sans'; --accent-amber:#FEB700; --accent-lime:#DBDE4E; --sale:#EF3F4F;
  --ok:#03A55A; --warn:#E5A400; --danger:#E5484D;
  --r-btn:8px; --r-card:12px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(0,0,0,.05); --sh-md:0 4px 14px rgba(0,0,0,.07); --sh-lg:0 10px 30px rgba(0,0,0,.10);
  --gnb-h:80px; --maxw:1520px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Spoqa Han Sans Neo',Pretendard,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--surface);
  font-size:15px;line-height:1.6;letter-spacing:-0.03em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-0.03em}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
main.main{min-height:60vh;padding:28px 0 64px}
main.main--full{padding:0 0 64px}
.muted{color:var(--gray-500)}
.small{font-size:13px}
.center{text-align:center}
.row{display:flex;gap:12px}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.wrap{flex-wrap:wrap}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt40{margin-top:40px}
.sec-title{font-size:22px;font-weight:800;margin:8px 0 16px}
.sec-head{display:flex;justify-content:space-between;align-items:end;margin:32px 0 16px}
.sec-head h2{font-size:22px;font-weight:800}
.sec-head a{color:var(--gray-500);font-size:14px}

/* ===== GNB ===== */
.gnb{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border)}
.gnb__inner{max-width:var(--maxw);margin:0 auto;height:var(--gnb-h);display:flex;align-items:center;gap:20px;padding:0 20px}
.gnb__logo{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;letter-spacing:-.5px}
.gnb__logo b{color:var(--primary)}
.gnb__nav{display:flex;gap:22px;font-weight:600;color:var(--gray-700)}
.gnb__nav a:hover{color:var(--ink)}
.gnb__nav a.is-active{color:var(--primary)}
.gnb__search{flex:1;max-width:380px;display:flex;align-items:center;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:0 6px 0 14px;margin-left:auto}
.gnb__search input{flex:1;border:0;background:transparent;height:38px;font-size:14px;outline:none}
.gnb__search button{border:0;background:transparent;font-size:15px;padding:6px}
.gnb__right{display:flex;align-items:center;gap:10px}
.gnb__write{background:linear-gradient(135deg,var(--primary),#37b89a);color:#fff;font-weight:700;
  padding:8px 14px;border-radius:var(--r-pill);font-size:14px;white-space:nowrap}
.gnb__icon{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);font-size:16px}
.gnb__badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;font-size:10px;
  font-weight:700;min-width:16px;height:16px;padding:0 4px;border-radius:9px;display:grid;place-items:center}
.gnb__profile{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--surface-2)}
.gnb__profile img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{width:100%;height:100%;display:grid;place-items:center;background:var(--primary-tint);
  color:var(--primary-dark);font-weight:700}

/* ===== 버튼 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;
  border-radius:var(--r-btn);padding:11px 18px;font-size:15px;font-weight:700;line-height:1;transition:.15s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:var(--ink);color:#fff}
.btn-ghost{background:#fff;border-color:var(--border-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-pill{border-radius:var(--r-pill)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-lg{padding:15px 22px;font-size:16px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-naver{background:var(--naver);color:#fff}
.btn-kakao{background:var(--kakao);color:#3c1e1e}

/* ===== 폼 ===== */
.field{margin-bottom:16px}
.field>label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--gray-700)}
.input,.select,.textarea{width:100%;border:1px solid var(--border-strong);border-radius:var(--r-btn);
  padding:11px 13px;font-size:15px;font-family:inherit;background:#fff;outline:none}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.textarea{min-height:120px;resize:vertical}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:18px;height:18px;accent-color:var(--primary)}
.hint{font-size:12px;color:var(--gray-500);margin-top:6px}
.err{color:var(--danger);font-size:13px;margin-top:6px}

/* ===== 카드 / 패널 ===== */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:24px}

/* ===== 뱃지 / pill ===== */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}
.badge-artist{background:var(--primary-tint);color:var(--primary-dark)}
.badge-supplier{background:#FFF6D6;color:#9A7B00}
.badge-verified{background:var(--ink);color:#fff}
.badge-soft{background:var(--surface-2);color:var(--gray-700)}
.badge-new{background:var(--primary);color:#fff}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:#fff;font-size:13px;font-weight:600;color:var(--gray-700)}
.pill.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== 제품 그리드 ===== */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr)}}
.pcard{display:block}
.pcard__thumb{aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;background:var(--surface-2);position:relative}
.pcard__thumb img{width:100%;height:100%;object-fit:cover}
.pcard__badge{position:absolute;top:10px;left:10px}
.pcard__artist{margin-top:10px;font-size:13px;color:var(--gray-500)}
.pcard__title{font-weight:600;margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pcard__price{font-weight:800;margin-top:4px}
.pcard__rate{font-size:12px;color:var(--gray-500);margin-top:3px}
.star{color:var(--logo-yellow)}

/* ===== 피드(커뮤니티) ===== */
.feed{display:flex;flex-direction:column;gap:18px;max-width:640px;margin:0 auto}
.post{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.post__head{display:flex;align-items:center;gap:10px;padding:14px 16px}
.post__head .avatar-fallback,.post__head img.av{width:40px;height:40px;border-radius:50%;object-fit:cover}
.post__author{font-weight:700;font-size:14px}
.post__media img{width:100%;max-height:560px;object-fit:cover}
.post__body{padding:14px 16px}
.post__actions{display:flex;gap:18px;padding:10px 16px;border-top:1px solid var(--border);color:var(--gray-700);font-size:14px}
.post__actions form{display:inline}
.post__actions button{border:0;background:none;color:inherit;font-size:14px;display:inline-flex;gap:5px;align-items:center}
.tag{color:var(--primary-dark);font-weight:600}

/* ===== 탭 ===== */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin:8px 0 20px;overflow-x:auto}
.tabs a{padding:12px 14px;font-weight:600;color:var(--gray-500);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.is-active{color:var(--ink);border-bottom-color:var(--primary)}
.tabs--center{justify-content:center}
.tabs--center a.is-active{color:var(--primary)}

/* ===== 테이블 ===== */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left}
.table th{color:var(--gray-500);font-weight:600;font-size:13px}

/* ===== 플래시 ===== */
.flash{padding:12px 16px;border-radius:var(--r-btn);margin-bottom:16px;font-size:14px;font-weight:600}
.flash--info{background:var(--primary-tint);color:var(--primary-dark)}
.flash--ok{background:#E7F8EF;color:var(--ok)}
.flash--warn{background:#FDF4DF;color:#9A7B00}
.flash--error,.flash--danger{background:#FDECEC;color:var(--danger)}

/* ===== 수량 스텝퍼 ===== */
.qty{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-btn);overflow:hidden}
.qty button{width:36px;height:38px;border:0;background:#fff;font-size:16px}
.qty input{width:46px;text-align:center;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border)}

/* ===== 별점 입력 ===== */
.rate-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.rate-input input{display:none}
.rate-input label{font-size:24px;color:var(--gray-300);cursor:pointer}
.rate-input input:checked ~ label,.rate-input label:hover,.rate-input label:hover ~ label{color:var(--logo-yellow)}

/* ===== 히어로/배너 ===== */
.hero{background:linear-gradient(135deg,var(--primary-tint),#fff);border-radius:16px;padding:40px;margin-bottom:8px}
.hero h1{font-size:30px;font-weight:800}
.empty{text-align:center;color:var(--gray-500);padding:60px 20px}
.empty .em{font-size:40px}

/* ===== 결제/주문 레이아웃 ===== */
.two-col{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.summary{position:sticky;top:84px}
.summary .line{display:flex;justify-content:space-between;padding:7px 0;font-size:14px}
.summary .total{display:flex;justify-content:space-between;font-size:18px;font-weight:800;border-top:1px solid var(--border);padding-top:12px;margin-top:8px}

/* ===== 스텝 인디케이터 ===== */
.steps{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.steps .step{display:flex;align-items:center;gap:8px;color:var(--gray-400);font-weight:600;font-size:14px}
.steps .step.is-active{color:var(--ink)}
.steps .step.is-done{color:var(--primary-dark)}
.steps .step .n{width:22px;height:22px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:12px}
.steps .step.is-active .n{background:var(--primary);color:#fff}

/* ===== 푸터 ===== */
.footer{background:var(--ink);color:#A1A1AA;margin-top:40px}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:36px 20px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__links{display:flex;gap:18px;flex-wrap:wrap}
.footer__links a{color:#D4D4D8;font-size:14px}
.footer__info{font-size:13px;line-height:1.7}
.footer__cs{font-size:13px;text-align:right}
.footer__cs b{color:#fff;font-size:18px}
.footer__copy{border-top:1px solid #3F3F46;text-align:center;padding:16px;font-size:12px}

/* ===== 머소너리(커뮤니티 사진 피드) ===== */
.masonry{column-count:4;column-gap:18px}
@media(max-width:1100px){.masonry{column-count:3}}
@media(max-width:760px){.masonry{column-count:2}}
.mcard{break-inside:avoid;margin:0 0 18px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;display:block;box-shadow:var(--sh-sm)}
.mcard:hover{box-shadow:var(--sh-md)}
.mcard__img{width:100%;display:block;background:var(--surface-2)}
.mcard__b{padding:12px 14px 4px}
.mcard__title{font-weight:700;font-size:15px;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mcard__excerpt{color:var(--gray-500);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard__tags{padding:0 14px 4px;font-size:12px;color:var(--primary-dark);font-weight:600}
.mcard__foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--border)}
.mcard__author{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;min-width:0}
.mcard__author .av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.mcard__author .avatar-fallback{width:24px;height:24px;font-size:11px}
.mcard__author .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.mcard__author .vb{flex:none;display:inline-flex;align-items:center}
.mcard__stat{display:flex;gap:12px;color:var(--gray-500);font-size:13px;flex:none}
.mcard__stat button{border:0;background:none;color:inherit;font-size:13px;display:inline-flex;gap:4px;align-items:center;cursor:pointer;padding:0}

/* 추천 태그 바 */
.tagbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 20px}
.tagbar .lbl{font-weight:800;font-size:13px;color:var(--gray-500);margin-right:4px}

/* ===== 토스트 ===== */
.mp-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:600;
  box-shadow:var(--sh-lg);z-index:200;transition:.25s;pointer-events:none}
.mp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
[x-cloak]{display:none!important}
.is-liked{color:var(--danger)!important}
svg.ic{vertical-align:middle}
.is-liked svg.ic{fill:currentColor}
.empty .em svg.ic{color:var(--gray-300)}