/* 애크미오브 쇼핑몰 — 흰 바탕 · 남색 포인트 · Pretendard 하나 · 빨강은 로고 점과 구매 버튼에만 */
:root{
  --ink:#1B1B1A; --ink-2:#5E5D5A; --ink-3:#9A9893;
  --line:#ECEAE6; --line-2:#F4F3F0; --bg:#FFFFFF; --soft:#F8F8F6;
  --navy:#1F3A5F; --navy-2:#E9EEF4; --red:#DA291C; --red-2:#B92216;
  --ok:#2E6B4F; --warn:#9A5B12;
  --wrap:1280px; --gut:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum"}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.lb{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hide{display:none!important}

/* 시험판 띠 */
.testbar{background:var(--navy);color:#fff;font-size:12px;text-align:center;padding:7px 16px;letter-spacing:0}
.testbar b{font-weight:600}

/* 헤더 */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line-2)}
.hd-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:76px;display:flex;align-items:center;gap:24px}
.brand{display:flex;flex-direction:column;flex-shrink:0}
.brand .mk{font-size:19px;font-weight:500;letter-spacing:.32em;line-height:1;color:var(--ink)}
.brand .mk i{font-style:normal;color:var(--red);letter-spacing:0}
.brand .sub{font-size:10px;color:var(--ink-3);letter-spacing:.1em;margin-top:7px}
.nav{display:flex;gap:34px;margin:0 auto}
.nav a{font-size:12.5px;font-weight:500;letter-spacing:.18em;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{border-color:var(--ink)}
.util{display:flex;align-items:center;gap:20px;font-size:13px;color:var(--ink-2)}
.util a:hover{color:var(--ink)}
.cartlink{display:inline-flex;align-items:center;gap:7px;color:var(--ink)!important}
.cartlink .n{min-width:18px;height:18px;border-radius:9px;background:var(--navy);color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 5px}
.cartlink .n.zero{background:var(--line);color:var(--ink-3)}
.menu-btn{display:none;width:36px;height:36px;margin-right:-8px;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;content:""}
.menu-btn span::before{position:absolute;top:-6px}
.menu-btn span::after{position:absolute;top:6px}
.drawer{position:fixed;inset:0;z-index:80;display:none}
.drawer.on{display:block}
.drawer .dim{position:absolute;inset:0;background:rgba(20,20,20,.28)}
.drawer .pan{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;padding:26px 26px 40px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.drawer .pan a{font-size:15px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.drawer .pan a.big{font-size:13px;font-weight:500;letter-spacing:.2em}
.drawer .x{align-self:flex-end;font-size:13px;color:var(--ink-3);padding:4px 0 14px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 30px;font-size:14px;font-weight:600;border:1px solid transparent;border-radius:2px;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn-buy{background:var(--red);color:#fff}
.btn-buy:hover{background:var(--red-2)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#17304F}
.btn-line{border-color:var(--ink);color:var(--ink);background:#fff}
.btn-line:hover{background:var(--soft)}
.btn-ghost{border-color:var(--line);color:var(--ink-2);background:#fff}
.btn[disabled]{background:var(--line)!important;color:var(--ink-3)!important;border-color:var(--line)!important;cursor:not-allowed}
.btn-wide{width:100%}
.tlink{font-size:13.5px;font-weight:500;border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .2s}
.tlink:hover{border-color:var(--ink)}

/* 히어로 */
.hero{display:grid;grid-template-columns:minmax(440px,46%) 1fr;min-height:600px;border-bottom:1px solid var(--line-2)}
.hero .tx{display:flex;flex-direction:column;justify-content:center;padding:72px 64px 72px 0}
.hero .tx-in{max-width:480px;margin-left:auto;padding-left:var(--gut)}
.hero h1{font-size:44px;line-height:1.24;font-weight:600;letter-spacing:-.045em;margin-top:26px}
.hero p.s{margin-top:22px;font-size:15px;line-height:1.85;color:var(--ink-2)}
.hero .btns{display:flex;align-items:center;gap:24px;margin-top:38px}
.hero .im{overflow:hidden;background:var(--soft)}
.hero .im img{width:100%;height:100%;min-height:600px;object-fit:cover;object-position:58% 50%}

/* 구역 */
.sec{padding:104px 0}
.sec.tight{padding-top:0}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.sec-hd h2{font-size:24px;font-weight:600;letter-spacing:-.035em;margin-top:12px}
.sec-hd .note{font-size:13px;color:var(--ink-3);margin-top:6px}

/* 상품 카드 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 26px}
.card{display:block;position:relative}
.card .ph{position:relative;aspect-ratio:4/5;background:var(--soft);overflow:hidden}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .8s cubic-bezier(.2,.6,.2,1)}
.card .ph img.b{opacity:0}
.card:hover .ph img.b{opacity:1}
.card:hover .ph img.a{transform:scale(1.03)}
.tag{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;font-weight:600;letter-spacing:.18em;background:#fff;color:var(--navy);padding:4px 8px}
.tag.so{color:var(--ink-3)}
.card .nm{margin-top:16px;font-size:14px;font-weight:500;line-height:1.45}
.card .pr{margin-top:6px;font-size:14px;color:var(--ink-2)}
.card .pr s{color:var(--ink-3);margin-left:6px;font-size:12.5px}
.card.so .ph img{opacity:.55}
.sw{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.sw i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}

/* 분류 타일 */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.cat .ph{aspect-ratio:1/1;overflow:hidden;background:var(--soft)}
.cat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.cat:hover .ph img{transform:scale(1.04)}
.cat .cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cat:hover .cap{border-color:var(--ink)}
.cat .cap b{font-size:13.5px;font-weight:500;letter-spacing:.2em}
.cat .cap em{font-style:normal;font-size:12px;color:var(--ink-3)}
.cat .d{margin-top:10px;font-size:12.5px;color:var(--ink-2)}

/* 콜라보 */
.collab{display:grid;grid-template-columns:1fr 1fr;background:var(--navy-2)}
.collab .im{min-height:620px;overflow:hidden}
.collab .im img{width:100%;height:100%;object-fit:cover;object-position:50% 80%}
.collab .tx{padding:88px 80px;display:flex;flex-direction:column;justify-content:center}
.collab h3{font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.38;margin-top:20px}
.kv{margin-top:32px;border-top:1px solid rgba(31,58,95,.18)}
.kv div{display:flex;gap:22px;padding:14px 0;border-bottom:1px solid rgba(31,58,95,.18);font-size:14px}
.kv dt{width:48px;flex-shrink:0;color:var(--navy);font-size:12px;font-weight:600;padding-top:1px}
.collab .price{margin-top:26px;font-size:15px;font-weight:500}
.collab .btns{margin-top:30px}

/* 브랜드 */
.about{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center}
.about .im{aspect-ratio:5/4;overflow:hidden;background:var(--soft)}
.about .im img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:34px;font-weight:300;letter-spacing:.06em;margin-top:14px}
.about .body{max-width:460px;margin-top:22px;font-size:14.5px;line-height:1.95;color:var(--ink-2)}
.brands{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.brands img{height:24px;width:auto}
.brands span{font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--ink-2)}

/* 푸터 */
.ft{border-top:1px solid var(--line);background:var(--soft);padding:72px 0 36px;font-size:12.5px;color:var(--ink-2);line-height:1.9}
.ft-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding-bottom:44px}
.ft h4{font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--ink-3);margin-bottom:14px}
.ft .cs{font-size:22px;font-weight:500;color:var(--ink);letter-spacing:.02em;margin-bottom:6px}
.ft-links{display:flex;flex-direction:column;gap:6px}
.ft a:hover{color:var(--ink)}
.ft-biz{padding-top:22px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3);line-height:2}
.ft-biz .sep{margin:0 8px;opacity:.5}

/* 목록 화면 */
.page-hd{padding:56px 0 30px}
.page-hd h1{font-size:28px;font-weight:600;letter-spacing:-.04em;margin-top:10px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.tabs a{height:36px;padding:0 16px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:18px;font-size:13px;color:var(--ink-2)}
.tabs a.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.bar{display:flex;justify-content:space-between;align-items:center;padding:16px 0 26px;font-size:13px;color:var(--ink-3)}
.bar select{border:0;background:none;font-size:13px;color:var(--ink-2);padding:4px 2px}
.empty{padding:90px 0;text-align:center;color:var(--ink-3);font-size:14px}

/* 상품 상세 */
.pd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;padding:40px 0 80px}
.gal .main{aspect-ratio:4/5;background:var(--soft);overflow:hidden}
.gal .main img{width:100%;height:100%;object-fit:cover}
.gal .thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.gal .thumbs::-webkit-scrollbar{display:none}
.gal .thumbs button{flex:0 0 72px;aspect-ratio:4/5;background:var(--soft);outline:1px solid transparent;outline-offset:-1px;opacity:.6}
.gal .thumbs button.on{outline-color:var(--ink);opacity:1}
.gal .thumbs img{width:100%;height:100%;object-fit:cover}
.buy{position:sticky;top:100px;align-self:start}
.crumb{font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.crumb a:hover{color:var(--ink)}
.buy h1{font-size:24px;font-weight:600;letter-spacing:-.035em;line-height:1.4;margin-top:12px}
.buy .price{margin-top:14px;font-size:22px;font-weight:600}
.buy .price s{font-size:15px;color:var(--ink-3);font-weight:400;margin-left:8px}
.buy .summary{margin-top:18px;font-size:14px;color:var(--ink-2);line-height:1.8}
.buy .ship{margin-top:22px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);display:grid;grid-template-columns:64px 1fr;gap:6px 14px}
.buy .ship dt{color:var(--ink-3)}
.og{margin-top:24px}
.og .t{font-size:13px;font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between}
.og .t span{font-weight:400;color:var(--ink-2)}
.og + .og{margin-top:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:2px;font-size:13px;background:#fff;display:inline-flex;align-items:center;gap:8px}
.chip i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.chip:hover{border-color:var(--ink-3)}
.chip.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600}
.chip.off{color:var(--ink-3);text-decoration:line-through;background:var(--soft)}
.picked{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.pk{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--soft);padding:12px 14px;font-size:13.5px}
.pk .nm{flex:1;min-width:0}
.pk .rm{color:var(--ink-3);font-size:18px;line-height:1;padding:0 4px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;height:34px}
.qty button{width:32px;height:32px;font-size:16px;color:var(--ink-2)}
.qty input{width:38px;text-align:center;border:0;height:32px;background:none;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}
.sum b{font-size:22px;font-weight:600}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.msg{margin-top:12px;font-size:13px;color:var(--warn);min-height:20px}
.detail-tabs{display:flex;border-bottom:1px solid var(--line);margin-top:20px;position:sticky;top:76px;background:#fff;z-index:5}
.detail-tabs a{padding:16px 22px;font-size:13.5px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.detail-tabs a.on{color:var(--ink);border-color:var(--ink);font-weight:600}
.detail{max-width:860px;margin:0 auto;padding:56px 0 80px;font-size:14px;line-height:1.85;color:var(--ink-2)}
.detail img{margin:0 auto;height:auto}
.detail table{border-collapse:collapse;margin:16px auto;font-size:13px}
.detail td,.detail th{border:1px solid var(--line);padding:6px 10px}
.policy{max-width:860px;margin:0 auto;padding:0 0 100px;font-size:13.5px;color:var(--ink-2);line-height:1.9}
.policy h3{font-size:15px;color:var(--ink);margin:30px 0 8px}
.policy ul{padding-left:18px}

/* 장바구니 · 주문서 */
.two{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;padding:10px 0 100px;align-items:start}
.box{border:1px solid var(--line);padding:28px}
.box + .box{margin-top:16px}
.box h2{font-size:16px;font-weight:600;margin-bottom:18px}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:16px;padding:18px 0;border-top:1px solid var(--line-2);align-items:start}
.line:first-child{border-top:0;padding-top:0}
.line .ph{aspect-ratio:4/5;background:var(--soft);overflow:hidden}
.line .ph img{width:100%;height:100%;object-fit:cover}
.line .nm{font-size:14px;font-weight:500}
.line .op{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.line .pr{font-size:14px;font-weight:600;text-align:right;white-space:nowrap}
.line .ctl{display:flex;align-items:center;gap:14px;margin-top:12px}
.line .rm{font-size:12.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.line .warn{font-size:12.5px;color:var(--red);margin-top:6px}
.side{position:sticky;top:100px}
.tot{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:14px;color:var(--ink-2)}
.tot .g{font-size:15px;color:var(--ink);font-weight:600;padding-top:14px;border-top:1px solid var(--line);margin-top:4px}
.tot .g + b{font-size:20px;padding-top:14px;border-top:1px solid var(--line);margin-top:4px;color:var(--ink)}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:12px;line-height:1.7}
.f{display:grid;grid-template-columns:110px 1fr;gap:10px 16px;align-items:center}
.f label{font-size:13px;color:var(--ink-2)}
.f .full{grid-column:1/-1}
.in{width:100%;height:46px;border:1px solid var(--line);padding:0 14px;font-size:14px;background:#fff;border-radius:2px}
.in:focus{outline:0;border-color:var(--navy)}
textarea.in{height:auto;padding:12px 14px;min-height:80px}
.row{display:flex;gap:8px}
.row .in{flex:1}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--navy)}
.pay-area{min-height:120px}
.notice-box{background:var(--soft);padding:14px 16px;font-size:12.5px;color:var(--ink-2);line-height:1.7;margin-top:14px}
.notice-box b{color:var(--navy)}

/* 주문 결과 */
.result{max-width:640px;margin:0 auto;padding:64px 0 100px}
.result h1{font-size:26px;font-weight:600;letter-spacing:-.04em;margin-top:12px}
.result .lead{margin-top:10px;color:var(--ink-2);font-size:14px}
.kvs{margin-top:28px;border-top:1px solid var(--ink)}
.kvs div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.kvs dt{color:var(--ink-3);font-size:13px}
.state{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;background:var(--navy-2);color:var(--navy)}
.state.canceled,.state.failed{background:#F6EDEC;color:#9C2A20}

/* 휴대폰 */
@media (max-width:960px){
  :root{--gut:20px}
  .hd-in{height:60px;gap:12px}
  .brand .mk{font-size:16px;letter-spacing:.28em}
  .brand .sub{font-size:9px;margin-top:5px}
  .nav,.util .pc{display:none}
  .util{margin-left:auto;gap:14px}
  .menu-btn{display:inline-flex}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero .im{order:1}
  .hero .im img{min-height:0;height:380px;object-position:62% 40%}
  .hero .tx{order:2;padding:40px 0 52px}
  .hero .tx-in{max-width:none;margin:0;padding:0 var(--gut)}
  .hero h1{font-size:29px;margin-top:18px}
  .hero p.s{font-size:14px;margin-top:16px}
  .hero .btns{margin-top:28px;gap:20px}
  .btn{height:50px;padding:0 22px;font-size:13.5px}
  .sec{padding:60px 0}
  .sec-hd{margin-bottom:26px}
  .sec-hd h2{font-size:20px}
  .grid{grid-template-columns:repeat(2,1fr);gap:30px 12px}
  .card .nm{font-size:13px;margin-top:12px}
  .card .pr{font-size:13px}
  .cats{grid-template-columns:repeat(2,1fr);gap:26px 12px}
  .cat .cap b{font-size:12.5px;letter-spacing:.16em}
  .cat .d{font-size:11.5px}
  .collab{grid-template-columns:1fr}
  .collab .im{min-height:0;aspect-ratio:4/3}
  .collab .tx{padding:44px var(--gut) 56px}
  .collab h3{font-size:23px}
  .about{grid-template-columns:1fr;gap:32px}
  .about h2{font-size:28px}
  .ft{padding:52px 0 30px}
  .ft-top{grid-template-columns:1fr;gap:30px;padding-bottom:30px}
  .page-hd{padding:34px 0 18px}
  .page-hd h1{font-size:23px}
  .tabs{margin-top:18px}
  .pd{grid-template-columns:1fr;gap:26px;padding:0 0 40px}
  .pd .gal{margin:0 calc(var(--gut) * -1)}
  .gal .thumbs{padding:0 var(--gut)}
  .buy{position:static}
  .buy h1{font-size:20px}
  .detail-tabs{top:60px}
  .detail-tabs a{padding:14px 16px}
  .detail{padding:36px 0 60px}
  .two{grid-template-columns:1fr;gap:16px;padding-bottom:120px}
  .box{padding:20px 18px}
  .side{position:static}
  .line{grid-template-columns:72px 1fr;gap:12px}
  .line .pr{grid-column:2;text-align:left}
  .f{grid-template-columns:1fr;gap:6px}
  .f label{margin-top:8px}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px}
  .mbar .btn{flex:1}
}
@media (min-width:961px){.mbar{display:none}}