/* ══════════════════════════════════════════════════════════════
   테마 B — gnhost.kr 전용

   site.css 를 그대로 쓰고 이 파일이 뒤에서 덮어씁니다.
   A 는 대표홈페이지와 비슷한 결로 두고, B 는 확실히 다르게 갑니다.

   A (iotweek.kr)                  B (이 파일 · gnhost.kr)
   ─────────────────────────────   ─────────────────────────────
   흰 바탕 + 자주 포인트           미색 바탕 + 짙은 먹 상단
   제목 명조, 왼쪽 정렬            제목 고딕 굵게, 가운데 정렬
   카드에 색 채움                  카드는 흰 바탕 + 굵은 윗선
   플로팅 버튼 오른쪽 세로 띠      플로팅 버튼 아래 가로 알약

   브랜드색 자주 #930452 는 두 사이트가 같이 쓴다 (로고 색이라 바꾸면 안 된다)
   ══════════════════════════════════════════════════════════════ */

/* ── 색감 ─────────────────────────────────────── */
.site-b{
  --navy:#241C21;
  --navy-2:#4B3F46;
  --navy-deep:#1A1218;
  --wine:#930452;           /* 강조 — 번호·라벨·버튼 */
  --wine-soft:#C4699B;
  --bg:#FBF7F9;
  --bg-soft:#F3EAEF;
  --surface:#fff;
  --ink:#241C21;
  --ink-soft:#5C5460;
  --muted:#948C93;
  --line:#EADFE5;
  --line-dark:rgba(255,255,255,.16);
}

body.site-b{background:var(--bg);color:var(--ink)}

/* ── 제목은 고딕 굵게, 가운데 (A 는 명조·왼쪽) ── */
.site-b .hero__title,
.site-b .sec__title,
.site-b .split__txt h3,
.site-b .prem h3,
.site-b .phead__in h1{
  font-family:var(--font);font-weight:800;letter-spacing:-.045em}

@media (min-width:781px){
  .site-b .sec__head{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
  .site-b .sec__lead{margin-left:auto;margin-right:auto}
  .site-b .sec__no{font-size:32px;opacity:.16;letter-spacing:-.04em}
  .site-b .note{text-align:center}
  .site-b .chip{display:block;width:fit-content;margin-left:auto;margin-right:auto}
}
.site-b .sec__eyebrow{color:var(--wine)}

/* ── 어두운 섹션은 진짜 어둡게 ────────────────── */
.site-b .sec--dark,
.site-b .sec--deep{background:var(--navy-deep);color:#fff}
.site-b .sec--dark .sec__title,
.site-b .sec--deep .sec__title{color:#fff}
.site-b .sec--dark .sec__lead,
.site-b .sec--deep .sec__lead{color:rgba(255,255,255,.74)}
.site-b .sec--dark .sec__eyebrow,
.site-b .sec--deep .sec__eyebrow{color:var(--wine-soft)}
.site-b .sec--dark .note,
.site-b .sec--deep .note{color:rgba(255,255,255,.5)}
.site-b .sec--dark .prem article,
.site-b .sec--deep .prem article{background:rgba(255,255,255,.06)}
.site-b .sec--dark .prem h3,
.site-b .sec--deep .prem h3{color:#fff}
.site-b .sec--dark .prem p,
.site-b .sec--deep .prem p{color:rgba(255,255,255,.72)}
.site-b .sec--dark .clubs article,
.site-b .sec--deep .clubs article{background:transparent;
  border-color:rgba(255,255,255,.16);color:#fff}
.site-b .sec--dark .facts,
.site-b .sec--deep .facts{border-color:rgba(255,255,255,.16)}

/* ── 카드는 미색 바탕 + 굵은 윗선 ─────────────── */
.site-b .prem{background:transparent;border:0}
.site-b .prem article{background:var(--surface);
  border-top:3px solid var(--wine);border-radius:0}
.site-b .prem b{color:var(--wine)}
.site-b .clubs article{background:var(--surface);
  border:1px solid var(--line);border-radius:0}
.site-b .clubs span{color:var(--wine)}

/* ── 상단바 ───────────────────────────────────── */
.site-b .nav{background:var(--bg);color:var(--ink);
  box-shadow:inset 0 -1px 0 var(--line)}
.site-b .nav:hover,
.site-b .nav.is-solid{background:var(--bg);color:var(--ink)}
.site-b .nav__logo{color:var(--navy)}
@media (min-width:1081px){
  .site-b .nav:not(.is-solid):not(:hover) .nav__logo{color:var(--navy)}
}
.site-b .nav__cta{background:var(--wine);color:#fff}
.site-b .foot__logo{color:var(--navy)}

/* ── 히어로 ───────────────────────────────────── */
/* A 는 아래를 눌러 흰 글씨를 지키고, B 는 왼쪽에서 오른쪽으로 눕힌다. */
.site-b .hero::after{background:linear-gradient(100deg,
  rgba(26,18,24,.72) 0%, rgba(26,18,24,.38) 48%, rgba(26,18,24,.10) 100%)}
.site-b .hero__tag::before{background:var(--wine-soft)}

/* ── 등록 배너·푸터 ───────────────────────────── */
.site-b .cta{background:var(--navy-deep);color:#fff}
.site-b .cta h2{color:#fff}
.site-b .cta p{color:rgba(255,255,255,.76)}
.site-b .foot{background:var(--bg-soft);color:var(--ink-soft);
  border-top:1px solid var(--line)}
.site-b .foot b{color:var(--ink)}

/* ── 플로팅 버튼 (B) ───────────────────────── */
/* A 는 오른쪽 세로 띠. B 는 화면 아래에 떠 있는 가로 알약으로 간다. */
@media (min-width:1081px){
  .site-b .quick{right:auto;left:50%;top:auto;bottom:26px;
    transform:translateX(-50%);flex-direction:row;gap:6px;
    background:rgba(36,28,33,.92);border-radius:999px;padding:8px;
    box-shadow:0 10px 30px rgba(26,18,24,.28);backdrop-filter:blur(6px)}
  .site-b .quick a,
  .site-b .quick button{flex-direction:row;width:auto;height:auto;
    padding:11px 20px;gap:9px;border-radius:999px;border-top:0;
    background:transparent;color:rgba(255,255,255,.9);box-shadow:none}
  .site-b .quick a:hover,
  .site-b .quick button:hover{background:rgba(255,255,255,.12);color:#fff;transform:none}
  .site-b .quick__vr,
  .site-b .quick__reg,
  .site-b .quick__tel{background:transparent}
  .site-b .quick__reg{background:var(--wine);color:#fff}
  .site-b .quick__reg:hover{background:var(--wine);filter:brightness(1.08)}
  .site-b .quick b{font-size:13px;line-height:1}
  .site-b .quick__ico{width:19px;height:19px}

  /* TOP 은 알약 오른쪽 끝에 동그랗게 */
  .site-b .quick__top{position:static;width:40px;height:40px;padding:0;
    border-radius:50%;background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
  .site-b .quick__top:hover{background:rgba(255,255,255,.24)}
  .site-b .quick__top b{display:none}
}