/*
 B2B MADE unified brand skin.
 IMPORTANT: layout/contents are owned by existing templates.
 This file changes identity layer only.
*/
:root{
  --b2b-navy:#0B4A88;
  --b2b-blue:#1E88E5;
  --b2b-gold:#F59E0B;
  --b2b-light:#F5F7FA;
  --b2b-ink:#173856;
  --b2b-line:#DCE6EE;
}

/* ---- shared brand typography / focus ---- */
body{
  color:var(--b2b-ink);
}
a:focus-visible,button:focus-visible{
  outline:3px solid rgba(30,136,229,.28);
  outline-offset:2px;
}

/* ---- visual official logo; original text remains in DOM ---- */
.brand{
  position:relative;
}
.brand{
  color:transparent!important;
  text-shadow:none!important;
  background-image:url("/assets/b2bmade_brand/logo.svg")!important;
  background-repeat:no-repeat!important;
  background-position:left center!important;
  background-size:contain!important;
  min-width:188px!important;
  min-height:48px!important;
  display:inline-flex!important;
  align-items:center!important;
}
.brand > span{
  visibility:hidden!important;
}

/* official slogan without changing template body */
body:not(.shop)::after{
  content:"";
}

/* ---- brand hub : same current UI, dual brand colors ---- */
body.brand-hub,
body:has(.launchbox){
  --accent:var(--b2b-navy);
}
body.brand-hub h1,
body:has(.launchbox) h1{
  color:var(--b2b-navy)!important;
}
body.brand-hub .btn.primary,
body:has(.launchbox) .btn.primary{
  background:var(--b2b-navy)!important;
  border-color:var(--b2b-navy)!important;
}
body.brand-hub .btn.secondary,
body:has(.launchbox) .btn.secondary{
  border-color:var(--b2b-blue)!important;
  color:var(--b2b-navy)!important;
}

/* ---- b2bsale : BLUE/NAVY ---- */
body.public{
  --accent:var(--b2b-blue);
}
body.public h1,
body.public h2,
body.public h3{
  color:var(--b2b-navy);
}
body.public .btn.primary,
body.public .primary,
body.public button[type="submit"]{
  background:var(--b2b-navy)!important;
  border-color:var(--b2b-navy)!important;
  color:#fff!important;
}
body.public .kicker,
body.public .eyebrow{
  color:var(--b2b-blue)!important;
}
body.public .card,
body.public .service,
body.public .step,
body.public .linkbox{
  border-color:var(--b2b-line)!important;
}

/* ---- kalbon : current minimal UI + orange consumer identity ---- */
body.shop{
  --accent:var(--b2b-gold);
}
body.shop .notice{
  background:#FFF3D9!important;
  color:#805100!important;
  border-color:#F3D18C!important;
}
body.shop .kicker,
body.shop .eyebrow,
body.shop .category .num{
  color:#B76D00!important;
}
body.shop h1,
body.shop h2,
body.shop h3{
  color:#172E45;
}
body.shop .btn.primary{
  background:var(--b2b-navy)!important;
  border-color:var(--b2b-navy)!important;
}
body.shop .btn.secondary{
  color:var(--b2b-navy)!important;
  border-color:var(--b2b-blue)!important;
}
body.shop .category,
body.shop .use,
body.shop .policy{
  border-color:#E5E8EA!important;
}
body.shop .buybox{
  background:#FFF3DD!important;
}
body.shop .buybox strong{
  color:var(--b2b-navy);
}

/* Category identity icons via pseudo-elements: content/layout remains unchanged */
body.shop .category{
  position:relative;
}
body.shop .category::after{
  content:"";
  position:absolute;
  top:18px;
  right:18px;
  width:30px;
  height:30px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.9;
}
body.shop .category:nth-child(1)::after{
  background-image:url("/assets/b2bmade_brand/icons/best.svg");
}
body.shop .category:nth-child(2)::after{
  background-image:url("/assets/b2bmade_brand/icons/event.svg");
}
body.shop .category:nth-child(3)::after{
  background-image:url("/assets/b2bmade_brand/icons/tag.svg");
}
body.shop .category:nth-child(4)::after{
  background-image:url("/assets/b2bmade_brand/icons/company.svg");
}

/* Header slogan: generated visual identity only */
.header .nav::after,
.topbar .nav::after{
  content:"필요한 것을, 맞춤으로 만듭니다.";
  display:block;
  margin-left:auto;
  color:#6E7D89;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
body.shop .header .nav::after{
  color:#B76D00;
}

@media(max-width:900px){
  .header .nav::after,
  .topbar .nav::after{
    display:none;
  }
  .brand{
    min-width:150px!important;
    min-height:40px!important;
  }
}