/* ==========================================================================
   세븐닷 — 헤더 공통 스타일 (b2b · b2c 공용)
   각 페이지 :root 에서 아래 변수를 정의합니다:
     --hd-radius   : 알약 border-radius (b2c=16px / b2b=999px)
     --hd-logo-h   : 로고 높이        (b2c=22px  / b2b=20px)
     --hd-nav-fz   : 네비 font-size   (clamp 값)
     --hd-hover-bg : role 드롭다운 hover 배경색
   ========================================================================== */

/* ── 헤더 래퍼 ── */
.hd{position:fixed;top:18px;left:0;right:0;z-index:60;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hd.is-hidden{transform:translateY(calc(-100% - 28px))}
.hd-in{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.hd-pill{
  background:#fff;
  border-radius:var(--hd-radius,16px);
  box-shadow:0 6px 24px rgba(18,41,31,.10);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 10px 28px;
  transition:box-shadow .35s,padding .35s;
}
.hd.scr .hd-pill{box-shadow:0 12px 34px rgba(18,41,31,.18);padding:7px 9px 7px 24px}

/* ── 로고 ── */
.hd-logo img{height:var(--hd-logo-h,22px);width:auto}

/* ── 네비게이션 ── */
.hd-nav{display:flex;gap:34px;font-size:var(--hd-nav-fz,clamp(15px,1.41vw,16px));font-weight:600;color:#3A423E}
.hd-nav a:hover{color:var(--green)}
.hd-nav .b2b{color:var(--green);font-weight:700}
.hd-nav .b2c{color:var(--green);font-weight:700}

/* ── 우측 영역 ── */
.hd-right{display:flex;align-items:center;gap:10px}
.hd-cta{
  background:var(--green);color:#fff;font-weight:700;font-size:16px;
  padding:12px 26px;
  border-radius:var(--hd-radius,16px);
  border:none;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;
}
.hd-cta:hover{filter:brightness(1.06)}

/* ── 햄버거 ── */
.hd-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:7px;flex-shrink:0}
.hd-burger span{display:block;width:20px;height:2px;background:var(--gray-900);border-radius:2px;transition:.28s}

/* ── 모바일 ── */
@media(max-width:900px){
  .hd-in{padding:0 16px}
  .hd-nav{
    display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
    background:#fff;border-radius:16px;box-shadow:0 12px 32px rgba(18,41,31,.13);
    flex-direction:column;gap:0;padding:8px 0;z-index:10
  }
  .hd-nav.open{display:flex}
  .hd-nav a{padding:13px 24px;font-size:15px;border-radius:10px}
  .hd-cta{padding:10px 18px;border-radius:12px}
  .hd-burger{display:flex}
  .hd-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
  .hd-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hd-pill{position:relative;padding:8px 10px 8px 20px}
}

/* ── 입장 드롭다운 ── */
.hd-role-wrap{position:relative}
.hd-chev{width:16px;height:16px;vertical-align:middle;margin-left:3px;transition:transform .2s;flex-shrink:0}
.hd-role-wrap.open .hd-chev{transform:rotate(180deg)}
.hd-role-drop{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:110px;
  background:#fff;border-radius:12px;
  box-shadow:0 8px 28px rgba(18,41,31,.15),0 0 0 1px rgba(18,41,31,.06);
  padding:5px;
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .16s,transform .16s;
  z-index:300;
}
.hd-role-wrap.open .hd-role-drop{opacity:1;transform:translateY(0);pointer-events:auto}
.hd-role-item{
  display:block;
  padding:10px 15px;border-radius:8px;
  font-size:14px;font-weight:600;color:#1A2D22;
  transition:background .12s;text-decoration:none;
}
.hd-role-item:hover{background:var(--hd-hover-bg,#F0FAF4);color:var(--green)}