:root{ --brand:#c61e1e; --ink:#222; --muted:#6b7280; --line:#e5e7eb; --bg:#fff; --bg-soft:#f6f7f9; --price:#d80000; --maxw:1200px; }
*{box-sizing:border-box}
body{margin:0; font-family:'Noto Sans KR',system-ui,apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:#fff}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* 유틸바 */
.util{background:#f3f4f6; border-bottom:1px solid var(--line); font-size:13px}
.util .container{display:flex; justify-content:space-between; padding:8px 20px}
.util a{margin-left:14px; color:#555}

/* 헤더 기본 */
header{position:sticky; top:0; z-index:3000; background:#fff; border-bottom:1px solid var(--line)}
.head-grid{display:grid; grid-template-columns:230px 1fr 300px; align-items:center; gap:16px; padding:16px 20px}
.logo{display:flex;align-items:center;gap: 0px;font-weight:900}
.logo .box{width:40px;height:40px;border-radius:8px;background: linear-gradient(135deg, #ffffff, #fbfbfb);display:grid;place-items:center}
.logo .t1{font-size:20px; line-height:1}
.logo .t2{font-size:12px; color:#888; font-weight:700}

.search{position:relative}
.search input{width:100%; padding:12px 44px; border-radius:999px; border:1px solid var(--line); font-size:15px}
.search .icon{position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.7}

/* 우측 아이콘 */
.icons{display:flex; justify-content:flex-end; align-items:flex-start; gap:18px}
.ico-col{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; min-width:56px}
.ico-col .fig{position:relative; width:36px; height:36px; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; background:#fff}
.icons small{margin-top:6px; font-size:12px; line-height:1; color:#333}
.badge{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:#c40000; color:#fff; font-size:11px; line-height:18px; text-align:center}

/* 네비게이션 */
.nav{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; overflow:visible}
.nav .container{display:grid; grid-template-columns:180px 1fr; align-items:center}
.cat-wrap{position:relative}
.cat-btn{width:100%;height:44px;background: #2196F3;color:#fff;border:0;border-radius:4px;display:inline-flex;align-items:center;gap:10px;justify-content:center;font-weight:900;cursor:pointer}
.menu{display:flex; gap:18px; padding:0 16px}
.menu a{display:inline-block; padding:12px 6px; font-weight:700; color:#333}
.menu a:hover{color:var(--brand)}

/* CATEGORY 드롭다운 */
#catMenu{position:absolute; left:0; top:100%; width:260px; min-height:420px; background:#fff; border:1px solid #e5e7eb; border-radius:4px; box-shadow:0 18px 40px rgba(0,0,0,.08); padding:6px 0; z-index:5000; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, visibility 0s .16s}
@media (hover:hover){ .cat-wrap.hovering #catMenu, .cat-wrap:hover #catMenu{opacity:1; visibility:visible; pointer-events:auto} }
#catMenu.open{opacity:1; visibility:visible; pointer-events:auto}
.cat-wrap::after{content:""; position:absolute; left:0; top:100%; width:260px; height:12px}
#catMenu a{display:block; padding:12px 16px; font-size:14px; color:#333}
#catMenu a:hover{background:#f6f7f9}

/* + 버튼 */
.more-btn{width:32px; height:32px; padding:0; display:inline-grid; place-items:center; border:1px solid #dadde2; border-radius:6px; background:#fff; font-size:18px; line-height:1; color:#333}

/* 로그인 패널 */
.login-wrap{position:relative}
.login-trigger{cursor:pointer}
.login-panel{position:absolute; right:0; top:calc(100% + 8px); width:320px; background:#fff; border:1px solid #e5e7eb; border-radius:6px; box-shadow:0 18px 40px rgba(0,0,0,.12); padding:14px; z-index:6000; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px); transition:opacity .16s ease, transform .16s ease, visibility 0s .16s}
.login-panel.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
.login-head{font-weight:700; margin-bottom:10px; color:#333}
.field{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.field input{padding:10px 12px; border:1px solid #d9dfe6; border-radius:6px; background:#f7f9fc}
.check{display:flex; align-items:center; gap:8px; font-size:13px; color:#555; margin:6px 0 10px}
.login-btn{width:100%; height:40px; border-radius:6px; border:1px solid #cfd4da; background:#fff; font-weight:700}
.join-btn{width:100%; height:40px; margin-top:8px; border-radius:6px; border:0; background:#222; color:#fff; font-weight:700}
.util-links{text-align:right; margin-top:10px; font-size:12px}
header{position:sticky; top:0; z-index:3000} .nav{overflow:visible}

/* 히어로 */
.hero{background:#f6eee8}
.slider{position:relative; overflow:hidden}
.slides{display:flex; transition:transform .5s ease}
.slide{min-width:100%; height:360px; position:relative}
.slide .left{position:absolute; left:8%; top:50%; transform:translateY(-50%); max-width:520px}
.slide h2{margin:0 0 8px; font-size:40px}
.slide .sub{color:#666; font-size:18px}
.slide .phone{position:absolute; right:10%; top:50%; transform:translateY(-50%); width:min(340px,36vw); aspect-ratio:9/16; border:12px solid #111; border-radius:26px; background:#fff; display:grid; place-items:center; box-shadow:0 30px 80px rgba(0,0,0,.25)}
.slide .barcode{width:70%; height:36%; border:2px solid #eee; background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 6px)}
.arw{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.9); display:grid; place-items:center}
.prev{left:14px} .next{right:14px}

/* 브랜드 로고 띠 */
.brand-row{border-bottom:1px solid var(--line); background:#fff}
.brand-row .container{display:flex; gap:28px; align-items:center; padding:16px 20px; overflow:auto}
.chip-logo{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; white-space:nowrap}

/* 섹션/그리드 */
section .container{padding:28px 20px}
.section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.section-head h3{margin:0; font-size:22px}
.under{height:2px; width:64px; background:var(--brand); margin-top:8px}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; display:flex; flex-direction:column}
.thumb{aspect-ratio:4/3; background:#f3f4f6; display:grid; place-items:center}
.meta{padding:12px 14px}
.title{margin:0 0 8px; font-size:15px; line-height:1.4}
.price{color:var(--price); font-weight:900; margin-bottom:8px}
.stars{font-size:14px; color:#ffb300}
.act{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line)}
.btn{flex:1; display:inline-flex; justify-content:center; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer}
.btn.red{background: #2196f3;color:#fff;border-color: #2196f3;}

/* 플로팅 버튼 */
.floating{position:fixed; right:16px; top:45%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:40}
.fab{width:44px; height:44px; border-radius:10px; background:var(--brand); color:#fff; display:grid; place-items:center}
.fab.dark{background:#111}

/* 푸터 */
.footer-top{background: #2196f3;color:#fff}
.footer-top .container{display:flex; justify-content:space-between; padding:12px 20px}
footer{background:#1a1c21; color:#cfd4dc}
footer .container{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:20px; padding:28px 20px}
.sns{display:flex; gap:10px; margin-top:8px}
.sns a{width:28px; height:28px; border-radius:999px; background:#2a2e36; display:inline-grid; place-items:center}
.copyright{border-top:1px solid #2b3038; color:#98a2b3; font-size:13px; text-align:center; padding:12px 20px}

/* 반응형 */
@media (max-width:1024px){
  .head-grid{grid-template-columns:1fr; gap:10px}
  .nav .container{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .slide{height:320px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .slide h2{font-size:30px}
  .slide .phone{display:none}
  .cat-menu{width:min(86vw,340px)}
}
/* --- Terms --- */
.terms-wrap{margin:14px 0 18px}
.terms-wrap h3{margin:0 0 8px; font-size:16px}
.terms-box{border:1px solid var(--line); border-radius:6px; background:#fff}
.terms-box textarea{width:100%; min-height:180px; border:0; padding:12px; resize:vertical; background:#fff; color:#333}
.terms-check{display:flex; align-items:center; gap:8px; margin-top:8px; color:#333}
.terms-check.all{border-top:1px dashed var(--line); padding-top:10px; margin-top:16px}
#btn-next[disabled]{cursor:not-allowed}
/* ------- Register form ------- */
.form{display:grid; gap:16px}
.group{border:1px solid var(--line); border-radius:8px; padding:14px; background:#fff}
.group legend{font-weight:700; padding:0 4px}
.field{display:grid; align-items:center; gap:12px; margin:10px 0}
.field .lbl{color:#333}
.field .ipt{position:relative; display:flex; align-items:center}
.field .ipt input{width:100%; padding:10px 12px 10px 36px; border:1px solid #d9dfe6; border-radius:8px; background:#fff}
.field .ipt .ico{position:absolute; left:10px; width:18px; height:18px; stroke:#666; fill:none; stroke-width:2}
.field .ipt.phone input{flex:1}
.field .ipt.phone .btn{margin-left:8px}
.field .ipt.code input{flex:1}
.field .ipt.code .btn{margin-left:8px}
.check{display:flex; align-items:center; gap:8px; margin:8px 0}
.captcha .cap-row{display:flex; align-items:center; gap:8px; margin-top:6px}
.hint{font-size:12px; color:#666; margin-top:6px}
.actions{display:flex; gap:8px; justify-content:flex-end; margin-top:6px}
.btn{display:inline-flex; align-items:center; justify-content:center; border:1px solid #dadde2; border-radius:8px; padding:10px 16px; background:#fff; cursor:pointer}
.btn.small{height:36px; padding:0 12px}
.btn.red{background: #2196f3;color:#fff;border-color: #2196f3;}
.btn.gray{background:#f3f4f6}
/* === 상품 썸네일 통일 === */
/* 기본 비율(4:3) — 바꾸고 싶으면 1/1(정사각), 3/4 세팅 */
:root { --prod-thumb-ratio: 4/3; }

/* 카드 썸네일 영역을 고정 칸으로 */
.grid .thumb{
  aspect-ratio: var(--prod-thumb-ratio);
  background:#f3f4f6;
  border-radius:12px;
  overflow:hidden;            /* 넘치는 부분 잘라내기 */
  display:block;
}

/* 이미지가 칸을 꽉 채우며 중앙 크롭되도록 */
.grid .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;           /* 포커스: 중앙 기준으로 ‘같은 칸’ */
  object-position:center;
  display:block;
}

/* (선택) 로딩 안정화: 작은 화면에서 너무 높아지지 않게 */
@media (max-width:560px){
  .grid .thumb{ border-radius:10px; }
}

/* 우측 플로팅 */
.mini-fab{
  position:fixed; right:16px; top:45%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:12px; background:#fff; color:#fff;
  display:grid; place-items:center; z-index:9997; border:none; cursor:pointer;    border: 3px solid #d9d9d9;
}
.mini-fab-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; line-height:18px;
  padding:0 4px; border-radius:999px; background:#c40000; color:#fff; font-size:11px;
  pointer-events:none; /* 배지가 클릭 가로막지 않도록 */
}
/* 오버레이 & 드로어 */
.mini-mask{
  position:fixed; inset:0;
  z-index:70; 
}
/* === Mini Drawer Polishing === */
.mini-drawer{width:340px;max-width:86vw;position:fixed;top:0;right:0;height:100dvh;background:#fff;
  border-left:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.25);transform:translateX(100%);
  transition:transform .22s ease;z-index:12000;display:flex;flex-direction:column}
.mini-drawer.open{transform:translateX(0)}
.mini-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:800}
.mini-close{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}

.mini-sec{padding:12px 14px;border-bottom:1px solid #f0f2f6}
.mini-sec > header{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:10px}
.mini-sec .cnt{min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#c40000;color:#fff;
  font-size:12px;line-height:24px;text-align:center}

.mini-list{display:flex;flex-direction:column;gap:10px;max-height:38vh;overflow:auto;padding-right:2px}
.mini-item{display:grid;grid-template-columns:64px 1fr 28px;gap:10px;align-items:center;border:1px solid var(--line);
  border-radius:10px;padding:8px}
.mini-thumb{width:64px;height:48px;border-radius:8px;background:#f6f7f9;overflow:hidden;display:grid;place-items:center}
.mini-thumb img{width:100%;height:100%;object-fit:contain}
.mini-info{display:flex;flex-direction:column;gap:4px}
.mini-name{font-weight:700;line-height:1.25;max-height:2.6em;overflow:hidden}
.mini-price{color:#111;font-weight:800}
.mini-remove{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}

.mini-qty{display:inline-grid;grid-template-columns:36px 64px 36px;gap:6px;align-items:center;margin-top:4px}
.mini-qminus,.mini-qplus{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:18px;line-height:1;cursor:pointer}
.mini-qinput{height:36px;width:64px;text-align:center;border:1px solid var(--line);border-radius:10px;background:#f7f9fc;
  font-weight:700}
.mini-qinput::-webkit-outer-spin-button,.mini-qinput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mini-qinput[type=number]{-moz-appearance:textfield}

.mini-actions{display:flex;justify-content:flex-end;margin-top:8px}
.mini-go{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.mini-empty{padding:12px;border:1px dashed var(--line);border-radius:10px;color:#666;text-align:center}
/* ===== 모바일 전용 레이어(기본 숨김) ===== */
.mbar, .mnav, .msearch { display:none; }

/* ===== 768px 이하: 모바일 레이아웃 ===== */
@media (max-width: 768px){
  /* 데스크톱 헤더/유틸은 감춤 */
  .util, header .head-grid, header .nav { display:none !important; }

  /* 모바일 상단 바 */
  .mbar{display:flex; align-items:center; justify-content:space-between;
        position:sticky; top:0; z-index:4000; height:52px; padding:0 12px;
        background:#fff; border-bottom:1px solid var(--line);}
  .mbar-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff}
  .mbar-logo{font-weight:900; color:#111; text-decoration:none}
  .mbar-right{display:flex; align-items:center; gap:6px}
  .mbar-ico{position:relative;width: 64px;height:40px;line-height: 40px;border: none;font-size: 13px;border-radius:8px;cursor: pointer;background:#fff}
  .m-badge{position:absolute; right:-6px; top:-6px; min-width:18px; height:18px; line-height:18px;
           font-size:11px; color:#fff; background:#c40000; border-radius:999px; padding:0 4px; text-align:center}

  /* 오프캔버스 */
  .mnav{display:block; position:fixed; inset:0 30% 0 0; max-width:320px;
        transform:translateX(-100%); transition:transform .18s ease;
        background:#fff; z-index:5000; border-right:1px solid var(--line); overflow:auto}
  .mnav.open{transform:translateX(0)}
  .mnav-head{display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid var(--line); background:#f6f7f9}
  .mnav-quick{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px}
  .mnav-qbtn{display:inline-block; text-align:center; padding:10px 0; border:1px solid var(--line); border-radius:8px; background:#fff}
  .mnav-sec{padding:10px 14px; font-size:12px; color:#777; border-top:1px solid var(--line)}
  .mnav-list{list-style:none; padding:0; margin:0}
  .mnav-list li a{display:block; padding:14px; border-bottom:1px solid var(--line); color:#111}
  .mnav-brands{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px}
  .mnav-brand{display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:8px}
  .mnav-brand img{width:28px;height:28px;object-fit:contain}
  .mnav-brand-fallback{width:28px;height:28px;border-radius:999px;background:#f3f4f6;display:grid;place-items:center;font-weight:700}
  .mnav-bottom{padding:12px; display:flex; gap:8px}
  .mnav-auth{flex:1; text-align:center; padding:10px 0; border:1px solid var(--line); border-radius:8px}

  /* 모바일 검색 오버레이 */
  .msearch{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5);
           backdrop-filter:saturate(120%) blur(2px); z-index:4900; opacity:0; visibility:hidden; transition:opacity .16s ease}
  .msearch.open{opacity:1; visibility:visible}
  .msearch-bar{position:absolute; left:0; right:0; top:10px; margin:0 auto; width:clamp(280px, 92vw, 620px);
               background:#fff; border-radius:10px; border:1px solid var(--line); display:flex; gap:8px; padding:10px}
  .msearch-bar input{flex:1; border:0; outline:0}

  /* 상품 그리드 조정(2열) */
  .grid{grid-template-columns:repeat(2,1fr) !important; gap:12px !important}
  .card .thumb{aspect-ratio:3/2}
  .card .act .btn{padding:9px 8px}

  /* 히어로 슬라이드 높이 축소 */
  .slide{height:240px}
  .slide h2{font-size:26px}
  .slide .phone{display:none}
}