/* =====================================================================
   JANGPRO storefront styles
   팔레트:  ink #16181d / paper #ffffff / mist #f4f5f7 / line #e8e9ec
            accent(price·sale) #ff2e4d / point(navy) #1f2a44
   타입:    Pretendard (display 800 / body 400~600)
===================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --ink:#14161c; --sub:#5b606b; --mute:#8a8f99;
  --paper:#fff; --mist:#f4f5f7; --line:#e8e9ec;
  --accent:#ff2e4d; --accent-dk:#e21f3c; --accent-soft:#ffe9ec; --navy:#1f2a44; --navy-soft:#eef1f7;
  --radius:18px; --radius-sm:12px; --radius-lg:26px; --maxw:1200px;
  --shadow:0 10px 30px rgba(20,22,28,.09);
  --shadow-sm:0 2px 10px rgba(20,22,28,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-size:15px; line-height:1.5; letter-spacing:-.01em;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font-family:inherit; cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---------- 상단 유틸 바 ---------- */
.topbar{background:var(--ink); color:#cfd2da; font-size:12.5px}
.topbar .wrap{display:flex; justify-content:flex-end; gap:18px; height:36px; align-items:center}
.topbar a{color:#cfd2da; opacity:.85}
.topbar a:hover{opacity:1; color:#fff}
.topbar .hi{margin-right:auto; opacity:.9}
.topbar .hi b{color:#fff}

/* ---------- 헤더 ---------- */
.header{border-bottom:1px solid var(--line); position:sticky; top:0; z-index:80; background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(10px)}
.header .wrap{display:flex; align-items:center; justify-content:flex-end; gap:28px; height:92px}
.logo{font-weight:900; font-size:30px; letter-spacing:-.04em; color:var(--ink)}
.logo b{color:var(--accent)}
.search{flex:1; max-width:560px; position:relative}
.search input{
  width:100%; height:50px; border:2.5px solid var(--ink); border-radius:30px;
  padding:0 56px 0 22px; font-size:15px; outline:none;
}
.search button{
  position:absolute; right:6px; top:6px; width:38px; height:38px; border:0;
  border-radius:50%; background:var(--ink); color:#fff; font-size:16px;
}
.head-icons{display:flex; gap:22px; margin-left:auto; align-items:center}
.head-icons a{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11.5px; color:var(--sub)}
.head-icons .ic{font-size:21px; line-height:1}
.cart-ic{position:relative}
.cart-ic .badge{
  position:absolute; top:-6px; right:-9px; background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ---------- 메가 카테고리 GNB ---------- */
.gnb{border-bottom:1px solid var(--line); position:relative; background:#fff}
.gnb .wrap{display:flex; align-items:stretch; gap:0}
.all-cat{position:relative}
.gnb .all{
  display:flex; align-items:center; gap:10px; font-weight:800; padding:0 26px 0 4px;
  height:54px; color:var(--ink); background:none; border:0; font-size:16px; cursor:pointer;
  font-family:inherit;
}
.gnb .all .bars{display:inline-flex; flex-direction:column; gap:3px}
.gnb .all .bars span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.all-cat.open .all .bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.all-cat.open .all .bars span:nth-child(2){opacity:0}
.all-cat.open .all .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* 전체 카테고리 펼침 패널 */
.megapanel{
  position:absolute; top:100%; left:0; z-index:60; width:280px;
  background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink);
  box-shadow:var(--shadow); border-radius:0 0 10px 10px; padding:8px 0; margin-top:-1px;
}
.megapanel[hidden]{display:none}
.mega-list{list-style:none; margin:0; padding:0}
.mega-list>li{position:relative}
.mega-top{display:flex; align-items:center; gap:10px; padding:11px 20px; font-weight:700; font-size:14.5px}
.mega-top:hover{background:var(--mist); color:var(--accent)}
.mega-emoji{font-size:9.5px; font-weight:800; letter-spacing:.02em; color:#fff; background:var(--accent); padding:3px 6px; border-radius:5px; line-height:1}
.mega-list>li:hover .mega-sub{display:flex}
.mega-sub{
  display:none; position:absolute; left:100%; top:0; min-width:200px; min-height:100%;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  flex-direction:column; padding:8px 0; border-radius:0 8px 8px 0;
}
.mega-sub a{padding:9px 20px; font-size:14px; color:var(--sub)}
.mega-sub a:hover{background:var(--mist); color:var(--accent)}

.gnb-menu{display:flex; gap:4px}
.gnb-menu>li{position:relative}
.gnb-menu>li>a{display:flex; align-items:center; height:54px; padding:0 18px; font-weight:700; font-size:15.5px}
.gnb-menu>li>a:hover{color:var(--accent)}
.gnb-menu>li:hover .submenu{display:block}
.submenu{
  display:none; position:absolute; top:100%; left:0; min-width:180px; z-index:40;
  background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink);
  box-shadow:var(--shadow); padding:8px 0; border-radius:0 0 8px 8px;
}
.submenu a{display:block; padding:9px 18px; font-size:14px; color:var(--sub)}
.submenu a:hover{background:var(--mist); color:var(--accent)}
.gnb .promo{margin-left:auto; display:flex; align-items:center; gap:18px; font-size:13px; color:var(--sub)}
.gnb .promo b{color:var(--accent)}

/* ---------- 히어로 슬라이더 ---------- */
.hero{margin:26px 0}
.hero .wrap{display:flex; gap:16px}
.slider{
  flex:1; position:relative; height:380px; border-radius:var(--radius); overflow:hidden;
}
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  display:flex; flex-direction:column; justify-content:center; padding:0 56px; color:#fff;
}
.slide.on{opacity:1}
.slide .eyebrow{font-size:13px; letter-spacing:.04em; opacity:.85; font-weight:600; margin-bottom:14px}
.slide h2{margin:0; font-size:38px; font-weight:900; letter-spacing:-.03em; line-height:1.2}
.slide p{margin:14px 0 0; font-size:17px; opacity:.92}
.slide .go{
  margin-top:26px; align-self:flex-start; background:#fff; color:var(--ink);
  font-weight:800; padding:13px 26px; border-radius:30px; font-size:14px;
}
.slider .dots{position:absolute; bottom:18px; left:56px; display:flex; gap:8px; z-index:5}
.slider .dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.45);
}
.slider .dots button.on{background:#fff; width:24px; border-radius:5px}
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border:0; border-radius:50%; background:rgba(0,0,0,.28);
  color:#fff; font-size:20px; backdrop-filter:blur(2px);
}
.slider .nav.prev{left:16px} .slider .nav.next{right:16px}
.slider .nav:hover{background:rgba(0,0,0,.5)}

/* 사이드 더블 배너 */
.hero-side{width:300px; display:flex; flex-direction:column; gap:16px}
.hero-side a{
  flex:1; border-radius:var(--radius); padding:22px; color:#fff; display:flex;
  flex-direction:column; justify-content:space-between; font-weight:800;
}
.hero-side .s1{background:linear-gradient(135deg,#ff5a7a,#ff2e4d)}
.hero-side .s2{background:linear-gradient(135deg,#3a4a78,#1f2a44)}
.hero-side small{font-weight:600; opacity:.9; font-size:13px}
.hero-side strong{font-size:20px; line-height:1.3}

/* ---------- 카테고리 퀵링크 ---------- */
.quick{margin:30px 0}
.quick ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.quick a{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 8px; background:var(--mist); border-radius:var(--radius);
  font-weight:700; font-size:14px; transition:.15s;
}
.quick a:hover{background:#fff; box-shadow:var(--shadow); color:var(--accent)}
.quick .emoji{font-size:11px; font-weight:800; letter-spacing:.02em; color:#fff; background:var(--accent); padding:5px 11px; border-radius:20px; line-height:1}

/* ---------- 섹션 헤더 ---------- */
.section{margin:54px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px}
.sec-head h3{margin:0; font-size:26px; font-weight:900; letter-spacing:-.03em}
.sec-head h3 span{color:var(--accent)}
.sec-head .desc{color:var(--mute); font-size:14px; margin-top:6px}
.sec-head .more{font-size:13px; color:var(--sub); font-weight:600}
.sec-head .more:hover{color:var(--accent)}

/* ---------- 상품 그리드 / 카드 ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px}
.card{display:block; position:relative; transition:transform .25s ease}
.card:hover{transform:translateY(-4px)}
.card .thumb{
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--mist);
  aspect-ratio:1/1; box-shadow:var(--shadow-sm); transition:box-shadow .25s ease;
}
.card:hover .thumb{box-shadow:var(--shadow)}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.card:hover .thumb img{transform:scale(1.04)}
.card .tags{position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:2}
.tag{font-size:11px; font-weight:800; padding:4px 8px; border-radius:6px; color:#fff}
.tag.best{background:var(--accent)} .tag.new{background:var(--navy)}
.card .brand{margin-top:14px; font-size:12.5px; color:var(--mute); font-weight:700}
.card .name{
  margin-top:5px; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:42px;
}
.card .price{margin-top:9px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.card .rate{color:var(--accent); font-weight:900; font-size:18px}
.card .sale{font-weight:900; font-size:18px; color:var(--ink)}
.card .sale i{font-style:normal; font-size:14px; font-weight:700}
.card .orig{color:var(--mute); text-decoration:line-through; font-size:13px}
.card .review{margin-top:8px; font-size:12px; color:var(--mute)}
.card .review b{color:#ffa400}

/* ---------- 띠 배너 ---------- */
.ribbon{
  margin:54px 0; border-radius:var(--radius); padding:34px 40px; color:#fff;
  background:linear-gradient(120deg,#1f2a44,#33406b);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.ribbon h4{margin:0; font-size:23px; font-weight:900}
.ribbon p{margin:8px 0 0; opacity:.85}
.ribbon .btn{background:#fff; color:var(--navy); font-weight:800; padding:13px 28px; border-radius:30px}

/* ---------- 푸터 ---------- */
.footer{margin-top:70px; border-top:1px solid var(--line); background:var(--mist); color:var(--sub)}
.footer .wrap{padding:44px 20px}
.foot-top{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; font-weight:700; color:var(--ink); padding-bottom:18px; border-bottom:1px solid var(--line)}
.foot-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; padding:26px 0}
.foot-cols h5{margin:0 0 12px; font-size:14px; color:var(--ink)}
.foot-cols p{margin:5px 0; font-size:13px; line-height:1.7}
.foot-cs .num{font-size:26px; font-weight:900; color:var(--ink); letter-spacing:-.02em}
.foot-bottom{font-size:12px; color:var(--mute); padding-top:18px; border-top:1px solid var(--line)}

/* ---------- 페이지 공통(목록/상세) ---------- */
.page-head{padding:30px 0; border-bottom:1px solid var(--line)}
.page-head h1{margin:0; font-size:28px; font-weight:900}
.breadcrumb{font-size:13px; color:var(--mute); margin-bottom:10px}
.breadcrumb a:hover{color:var(--accent)}
.empty{padding:80px 0; text-align:center; color:var(--mute)}

/* 상품 상세 */
.detail{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin:36px 0}
.detail .gallery .main{border-radius:var(--radius); overflow:hidden; background:var(--mist); aspect-ratio:1/1}
.detail .gallery .main img{width:100%; height:100%; object-fit:cover}
.detail .info .brand{color:var(--mute); font-weight:700}
.detail .info h1{margin:8px 0 0; font-size:26px; font-weight:800; line-height:1.4}
.detail .info .summary{margin:14px 0; color:var(--sub)}
.detail .pricebox{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; margin:22px 0}
.detail .pricebox .orig{color:var(--mute); text-decoration:line-through}
.detail .pricebox .now{display:flex; align-items:baseline; gap:10px; margin-top:6px}
.detail .pricebox .rate{color:var(--accent); font-size:28px; font-weight:900}
.detail .pricebox .sale{font-size:30px; font-weight:900}
.detail .buybtns{display:flex; gap:12px; margin-top:24px}
.detail .buybtns button{flex:1; height:58px; border:0; border-radius:10px; font-size:16px; font-weight:800}
.btn-cart{background:#fff; border:2px solid var(--ink)!important; color:var(--ink)}
.btn-buy{background:var(--accent); color:#fff}
.detail-desc{margin:50px 0; padding-top:30px; border-top:2px solid var(--ink)}
.detail-desc h3{font-size:20px}

/* ---------- 반응형 ---------- */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .quick ul{grid-template-columns:repeat(3,1fr)}
  .hero-side{display:none}
  .detail{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .header .wrap{height:auto; flex-wrap:wrap; gap:14px; padding:14px 16px}
  .search{order:3; max-width:100%; flex-basis:100%}
  .head-icons{gap:16px}
  .gnb-menu{display:none}
  .megapanel{width:calc(100vw - 32px); max-width:340px}
  .mega-sub{position:static; display:flex; border:0; box-shadow:none; padding:2px 0 8px 30px; min-height:0}
  .mega-list>li:hover .mega-sub{display:flex}
  .grid{grid-template-columns:repeat(2,1fr); gap:18px 12px}
  .quick ul{grid-template-columns:repeat(3,1fr)}
  .slider{height:240px}
  .slide{padding:0 26px}
  .slide h2{font-size:25px}
  .sec-head h3{font-size:21px}
}

/* ---------- 인증/회원/안내 페이지 ---------- */
.auth-wrap{max-width:440px; margin:60px auto; padding:0 20px}
.auth-card{border:1px solid var(--line); border-radius:16px; padding:38px; box-shadow:var(--shadow)}
.auth-card h1{margin:0 0 6px; font-size:24px; font-weight:900; text-align:center}
.auth-card .lead{text-align:center; color:var(--mute); font-size:14px; margin:0 0 26px}
.fld{margin-bottom:16px}
.fld label{display:block; font-size:13.5px; font-weight:700; margin-bottom:7px}
.fld input{width:100%; height:48px; border:1px solid #d7d9de; border-radius:9px; padding:0 14px; font-size:15px; font-family:inherit}
.fld input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(31,42,68,.1)}
.fld .hint{color:var(--mute); font-size:12px; margin-top:6px}
.btn-full{width:100%; height:52px; border:0; border-radius:10px; background:var(--accent); color:#fff;
  font-size:16px; font-weight:800; cursor:pointer; margin-top:8px}
.btn-full:hover{background:var(--accent-dk)}
.auth-foot{text-align:center; margin-top:20px; font-size:13.5px; color:var(--sub)}
.auth-foot a{color:var(--navy); font-weight:700}
.alert{padding:13px 16px; border-radius:9px; font-size:14px; margin-bottom:18px; font-weight:600}
.alert.err{background:#fdeaec; color:#c0283c}
.alert.ok{background:#e8f7ee; color:#137a3f}

.page{max-width:920px; margin:0 auto; padding:0 20px 70px}
.page .ph2{padding:34px 0 24px; border-bottom:2px solid var(--ink); margin-bottom:30px}
.page .ph2 h1{margin:0; font-size:28px; font-weight:900}
.page .ph2 p{margin:8px 0 0; color:var(--mute)}
.cs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px}
.cs-card{border:1px solid var(--line); border-radius:12px; padding:24px; text-align:center}
.cs-card .ic{font-size:30px}
.cs-card h3{margin:12px 0 6px; font-size:16px}
.cs-card p{margin:0; color:var(--mute); font-size:13px}
.cs-cs{background:var(--mist); border-radius:14px; padding:28px; text-align:center; margin-bottom:36px}
.cs-cs .num{font-size:34px; font-weight:900; letter-spacing:-.02em}
.cs-cs .sub{color:var(--sub); margin-top:6px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:18px 4px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--mute)}
.faq details[open] summary::after{content:'−'}
.faq .ans{padding:0 4px 18px; color:var(--sub); line-height:1.7}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0 36px}
.step{border:1px solid var(--line); border-radius:12px; padding:22px 16px; text-align:center}
.step .n{width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px}
.step b{display:block; margin-bottom:4px}
.step span{color:var(--mute); font-size:13px}
.mypage-box{border:1px solid var(--line); border-radius:14px; padding:30px; margin-bottom:24px}
.mypage-box .row2{display:flex; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.mypage-box .row2 b{width:120px; color:var(--sub); font-weight:600}
@media (max-width:640px){.cs-grid,.steps{grid-template-columns:1fr 1fr}}

/* 접근성 */
:focus-visible{outline:3px solid var(--navy); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- 장바구니 ---------- */
.cart-table{width:100%;border-collapse:collapse;background:#fff}
.cart-table th{background:var(--mist);font-size:12.5px;color:var(--sub);padding:12px 16px;text-align:left;font-weight:700}
.cart-table td{padding:16px;border-top:1px solid var(--line);vertical-align:middle}
.cart-table th:nth-child(2),.cart-table td:nth-child(2),
.cart-table th:nth-child(3),.cart-table td:nth-child(3){text-align:center;width:140px}
.cart-table th:nth-child(4),.cart-table td:nth-child(4){width:50px;text-align:center}
.ci{display:flex;gap:14px;align-items:center}
.ci img{width:74px;height:74px;border-radius:10px;object-fit:cover;border:1px solid var(--line);flex-shrink:0}
.ci-brand{font-size:12px;color:var(--mute);font-weight:700}
.ci-name{font-weight:600;font-size:14.5px;display:block;margin-top:2px}
.ci-name:hover{color:var(--accent)}
.ci-opt{font-size:12.5px;color:var(--sub);margin-top:3px}
.ci-unit{font-size:13px;color:var(--mute);margin-top:4px}
.qbox{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qbox button{width:36px;height:38px;border:0;background:#fff;font-size:16px;cursor:pointer}
.qbox span{width:44px;height:38px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line);border-right:1px solid var(--line);font-weight:700}
.ci-total b{font-size:16px}
.ci-del{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--mute);font-size:18px;cursor:pointer}
.ci-del:hover{color:var(--accent);border-color:var(--accent)}
.cart-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:24px;flex-wrap:wrap}
.cart-sum{margin-left:auto;min-width:280px}
.cart-sum>div{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px;color:var(--sub)}
.cart-sum>div b{color:var(--ink)}
.cart-sum .grand{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-size:17px;font-weight:900;color:var(--ink)}
.cart-sum .grand b{color:var(--accent);font-size:20px}
.cart-actions{display:flex;gap:12px;width:100%;justify-content:flex-end}
.btn-line{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;border:1px solid var(--ink);border-radius:10px;font-weight:800}
.btn-pay{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;background:var(--accent);color:#fff;border-radius:10px;font-weight:800}
.btn-pay:hover{background:var(--accent-dk)}

/* ---------- 결제 ---------- */
.checkout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.co-box{border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:20px}
.co-box h3{margin:0 0 16px;font-size:17px}
.co-line{display:flex;gap:14px;align-items:center;padding:10px 0}
.co-line img{width:60px;height:60px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.co-line-info{flex:1}
.co-line-info .nm{font-weight:600;font-size:14.5px}
.co-line-info .op{font-size:12.5px;color:var(--sub);margin-top:2px}
.co-line-info .qt{font-size:13px;color:var(--mute);margin-top:3px}
.co-line-total{font-weight:800}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:14px;cursor:pointer;font-weight:600;font-size:14px}
.pay-opt:has(input:checked){border-color:var(--accent);background:#fff5f6;color:var(--accent)}
.pay-opt input{width:18px;height:18px;accent-color:var(--accent)}
.co-summary{position:sticky;top:20px}
.co-summary .srow{display:flex;justify-content:space-between;padding:8px 0;font-size:14.5px;color:var(--sub)}
.co-summary .srow b{color:var(--ink)}
.co-summary .grand{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-size:16px;font-weight:900;color:var(--ink)}
.co-summary .grand b{color:var(--accent);font-size:20px}
.btn-pay-full{width:100%;height:54px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:16px;font-weight:800;cursor:pointer;margin-top:16px}
.btn-pay-full:hover{background:var(--accent-dk)}
.co-note{font-size:12px;color:var(--mute);text-align:center;margin:12px 0 0;line-height:1.5}

/* ---------- 주문완료 ---------- */
.oc-hero{text-align:center;padding:40px 0 30px}
.oc-check{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.oc-hero h1{margin:0;font-size:26px;font-weight:900}
.oc-hero p{margin:10px 0 0;color:var(--sub)}
.oc-hero b{color:var(--ink)}

/* 주문내역(마이페이지) */
.order-card{border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:14px}
.order-card .oc-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.order-card .ono{font-weight:800}
.order-card .odate{color:var(--mute);font-size:13px}
.order-card .ostatus{font-size:12px;font-weight:800;padding:5px 10px;border-radius:6px;background:var(--mist);color:var(--navy)}
.order-card .oitems{font-size:14px;color:var(--sub)}
.order-card .ofoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.order-card .opay{font-size:13px;color:var(--sub)}
.order-card .oamt{font-weight:900;font-size:17px}

@media (max-width:760px){
  .checkout{grid-template-columns:1fr}
  .co-summary{position:static}
  .pay-grid{grid-template-columns:1fr}
  .cart-table th:nth-child(3),.cart-table td:nth-child(3){display:none}
}

/* =====================================================================
   라이브 방송 섹션
===================================================================== */
.live-section{margin:54px 0}
.live-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px}
.live-card{
  position:relative; display:block; border-radius:var(--radius); overflow:hidden;
  background:var(--ink); aspect-ratio:4/5; box-shadow:var(--shadow-sm); transition:.25s;
}
.live-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.live-card .lc-media{position:absolute; inset:0}
.live-card .lc-media img{width:100%; height:100%; object-fit:cover; opacity:.85}
.live-card .lc-media iframe{width:100%; height:100%; border:0}
.live-card .lc-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.05) 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px; color:#fff; pointer-events:none;
}
.live-badge{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
  padding:5px 10px; border-radius:999px; margin-bottom:auto;
}
.live-badge.live{background:var(--accent); color:#fff}
.live-badge.live::before{content:''; width:7px; height:7px; border-radius:50%; background:#fff; animation:live-dot 1.4s infinite}
.live-badge.upcoming{background:rgba(255,255,255,.92); color:var(--navy)}
@keyframes live-dot{0%,100%{opacity:1}50%{opacity:.25}}
.live-card h4{margin:0; font-size:17px; font-weight:800; line-height:1.35}
.live-card p{margin:6px 0 0; font-size:12.5px; opacity:.85}
.live-card .lc-time{font-size:12px; opacity:.75; margin-top:6px}
.live-empty{padding:50px 20px; text-align:center; color:var(--mute); background:var(--mist); border-radius:var(--radius)}

/* =====================================================================
   플로팅 액션 버튼 (챗봇 · 카카오채널)
===================================================================== */
.fab-stack{position:fixed; right:22px; bottom:22px; z-index:200; display:flex; flex-direction:column; align-items:flex-end; gap:14px}
.fab-btn{
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(20,22,28,.22); border:0; cursor:pointer; position:relative; transition:.2s;
}
.fab-btn:hover{transform:translateY(-3px) scale(1.04)}
.fab-btn.fab-chat{background:var(--ink); color:#fff}
.fab-btn.fab-kakao{background:#FEE500; color:#3c1e1e}
.fab-btn svg{width:26px; height:26px}
.fab-tip{
  position:absolute; right:70px; top:50%; transform:translateY(-50%); background:var(--ink); color:#fff;
  font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:8px; white-space:nowrap; opacity:0;
  pointer-events:none; transition:.15s;
}
.fab-btn:hover .fab-tip{opacity:1}
.fab-ping{position:absolute; top:-3px; right:-3px; width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid #fff}

/* 챗봇 위젯 */
.chat-window{
  position:fixed; right:22px; bottom:92px; z-index:201; width:340px; max-width:calc(100vw - 32px);
  height:460px; max-height:calc(100vh - 140px); background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 24px 60px rgba(20,22,28,.28); display:flex; flex-direction:column;
  transform:translateY(16px) scale(.97); opacity:0; pointer-events:none; transition:.2s ease;
}
.chat-window.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto}
.chat-head{background:var(--ink); color:#fff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between}
.chat-head strong{font-size:14.5px}
.chat-head small{display:block; opacity:.7; font-size:11.5px; margin-top:2px}
.chat-close{background:none; border:0; color:#fff; font-size:20px; opacity:.8; line-height:1}
.chat-close:hover{opacity:1}
.chat-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--mist)}
.chat-msg{max-width:82%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.55}
.chat-msg.bot{background:#fff; align-self:flex-start; border-bottom-left-radius:4px; box-shadow:var(--shadow-sm)}
.chat-msg.user{background:var(--ink); color:#fff; align-self:flex-end; border-bottom-right-radius:4px}
.chat-quick{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; background:var(--mist)}
.chat-quick button{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:700; color:var(--sub);
}
.chat-quick button:hover{border-color:var(--ink); color:var(--ink)}
.chat-foot{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff}
.chat-foot input{flex:1; border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-size:13.5px; font-family:inherit; outline:none}
.chat-foot input:focus{border-color:var(--ink)}
.chat-foot button{width:40px; height:40px; border-radius:50%; border:0; background:var(--ink); color:#fff; font-size:16px; flex-shrink:0}
@media (max-width:640px){
  .fab-stack{right:14px; bottom:14px}
  .chat-window{right:14px; bottom:84px}
}