/* ══════════════════════════════════════════════════════════════
   테마 B — 더대표홈페이지.com 전용

   site.css 를 그대로 쓰고 이 파일이 뒤에서 덮어씁니다.
   같은 현장이지만 A 사이트와 다른 인상을 주는 것이 목적입니다.

   A 사이트                         B 사이트 (이 파일)
   ─────────────────────────────    ─────────────────────────────
   차가운 남색 계열                 따뜻한 모래빛 계열
   강조색 와인 #781b1b              강조색 청동 #97764a
   글자색 남색 #001241              글자색 먹빛 #26211c
   메뉴가 히어로 위에 투명하게      메뉴는 항상 흰 바탕, 아래 실선
   섹션 제목 왼쪽, 번호는 작게      섹션 제목 가운데, 번호는 크게
   네이비 어두운 섹션이 섞임        전체가 밝게 (모래빛으로 통일)
   카드에 네이비 채움               카드는 흰 바탕에 얇은 테두리
   등록 배너가 와인색 통짜          등록 배너는 모래빛 + 외곽선 버튼
   푸터가 진한 네이비               푸터도 모래빛
   히어로 사진→영상 0.8초           1.8초 붙잡았다가 1.6초에 걸쳐

   더샵 로고는 두 사이트 모두 그대로입니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 색감 ───────────────────────────────────────
   A 는 차가운 남색 계열, B 는 따뜻한 모래빛 계열로 간다.
   로고와 주요 버튼은 더샵 남색을 그대로 써서 브랜드는 지키고,
   바탕·글자·강조색만 따뜻한 쪽으로 옮긴다.

              A                      B
   바탕       회백 #f4f3f0           모래빛 #faf8f4
   글자       남색 #001241           먹빛 #26211c
   강조       와인 #781b1b           청동 #97764a
   선         회색 #e2e0da           따뜻한 베이지 #e6dfd3
   ─────────────────────────────────────────────── */
.site-b{
  --bg:#faf8f4;
  --surface:#fff;
  --ivory:#f2ede4;          /* A 의 어두운 섹션 자리를 대신한다 */
  --ivory-deep:#e9e2d5;
  --line:#e6dfd3;

  --bronze:#97764a;         /* B 의 강조색 — 번호·라벨·밑줄 */
  --bronze-deep:#7c5f38;

  --ink:#26211c;            /* 먹빛 — 남색보다 따뜻하다 */
  --ink-soft:#5f574c;
  --muted:#9a9184;

  --nav-h:84px;
}
/* 강조색을 와인에서 청동으로 옮긴다 (로고·버튼의 남색은 그대로) */
.site-b .sec__eyebrow,
.site-b .clubs span,
.site-b .prem b,
.site-b .hero__tag{color:var(--bronze)}
.site-b .hero__tag::after{background:var(--bronze)}
.site-b .tab.is-on{color:var(--ink);border-bottom-color:var(--bronze)}
.site-b .type__area dd,
.site-b .facts dd{color:var(--ink)}

/* site.css 뒤쪽에 body{background:#fff} 가 있어서 --bg 가 덮인다.
   body.site-b 로 한 단계 더 구체적으로 잡아야 모래빛이 살아난다. */
body.site-b{background:var(--bg)}

/* ── 메뉴 : 항상 흰 바탕 ─────────────────────── */
.site-b .nav{
  background:var(--surface);color:var(--ink);
  box-shadow:none;border-bottom:1px solid var(--line);
}
.site-b .nav.is-solid{box-shadow:none;border-bottom:1px solid var(--line)}
.site-b .nav__list{justify-content:flex-end;gap:2px}
.site-b .nav__gtitle{
  font-size:14px;font-weight:500;letter-spacing:.01em;padding:0 17px;
}
.site-b .nav__cta{
  background:none;color:var(--ink);
  border:1px solid var(--ink);border-radius:0;
}
.site-b .nav__cta:hover{background:var(--ink);color:#fff}

/* ── 히어로 : 가운데 정렬 ────────────────────── */
.site-b .hero{align-items:center;min-height:92vh}
.site-b .hero::after{
  background:
    radial-gradient(ellipse 82% 62% at 50% 50%,
      rgba(8,12,18,.50) 0%, rgba(8,12,18,.30) 52%, rgba(8,12,18,0) 100%),
    linear-gradient(180deg,
      rgba(8,12,18,.30) 0%, rgba(8,12,18,0) 20%,
      rgba(8,12,18,.06) 52%, rgba(8,12,18,.34) 78%,
      rgba(8,12,18,.48) 100%);
}
/* 가운데 정렬이라 글자가 하늘과 겹친다 — 그림자를 조금 더 준다 */
.site-b .hero__in{text-shadow:0 2px 22px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45)}
.site-b .hero__sub{color:rgba(255,255,255,.92)}
.site-b .hero__tag{color:#fff}
.site-b .hero__meta dt{color:rgba(255,255,255,.78)}
.site-b .hero__meta dd small{opacity:.85}
.site-b .hero__in{text-align:center;padding-bottom:0}
.site-b .hero__tag{justify-content:center}
.site-b .hero__tag::before{display:none}
.site-b .hero__tag::after{content:"";width:32px;height:1px;background:var(--bronze)}
.site-b .hero__title{letter-spacing:-.04em;line-height:1.16}
.site-b .hero__sub{margin-left:auto;margin-right:auto}
.site-b .hero__meta{
  justify-content:center;max-width:880px;margin-left:auto;margin-right:auto;
  border-top:1px solid rgba(255,255,255,.24);
  border-bottom:1px solid rgba(255,255,255,.24);
}
.site-b .hero__meta div{padding:24px 26px;text-align:center}
.site-b .hero__scroll{left:50%;right:auto;transform:translateX(-50%);
  writing-mode:horizontal-tb;letter-spacing:.3em;bottom:34px}

/* ── 섹션 머리 : 가운데 + 큰 번호 ─────────────── */
.site-b .sec{padding:118px 0}
.site-b .sec__head{text-align:center;padding-left:0;margin-bottom:58px}
.site-b .sec__no{
  position:static;display:block;margin:0 auto 14px;
  font-family:var(--font-en);
  font-size:40px;font-weight:600;letter-spacing:.04em;
  color:var(--ivory-deep);line-height:1;
}
.site-b .sec__no::after{display:none}
.site-b .sec__eyebrow{letter-spacing:.3em;font-family:var(--font-en);font-weight:500}
.site-b .sec__title{letter-spacing:-.035em;font-weight:600}
.site-b .sec__lead{margin-left:auto;margin-right:auto;text-align:center}

/* ── 어두운 섹션을 밝게 뒤집는다 ───────────────── */
.site-b .sec--dark,
.site-b .sec--deep{background:var(--ivory);color:var(--ink)}
.site-b .sec--dark .sec__lead,
.site-b .sec--deep .sec__lead{color:var(--ink-soft)}
.site-b .sec--dark .sec__no,
.site-b .sec--deep .sec__no{color:#ded5c4}
.site-b .sec--dark .note,
.site-b .sec--deep .note{color:var(--muted)}
.site-b .sec--dark .band figcaption,
.site-b .sec--dark .band figcaption b{color:var(--ink)}

/* ── 프리미엄 카드 : 네이비 채움 → 흰 바탕 ────── */
.site-b .prem{background:var(--line);border:1px solid var(--line)}
.site-b .prem article{background:#fff;padding:42px 34px}
.site-b .prem article:hover{background:var(--ivory)}

.site-b .prem h3{color:var(--ink)}
.site-b .prem p{color:var(--ink-soft)}

/* ── 커뮤니티 카드 ─────────────────────────────── */
.site-b .clubs article{background:#fff}
.site-b .clubs span{letter-spacing:.24em;font-family:var(--font-en);font-weight:500}

/* ── 세대 타입 ─────────────────────────────────── */
.site-b .tabs{justify-content:center}

.site-b .type{background:#fff;padding:44px}
.site-b .type__more{
  background:none;color:var(--ink);border:1px solid var(--ink);
}
.site-b .type__more:hover{background:var(--ink);color:#fff}

/* ── 서브페이지 머리 ───────────────────────────── */
.site-b .phead__eng{letter-spacing:.06em}
.site-b .pnav{background:rgba(255,255,255,.10)}

/* ── 등록 배너 : 와인 통짜 → 아이보리 ──────────── */
.site-b .cta{background:var(--ivory);color:var(--ink);padding:96px 0;
  border-top:1px solid var(--line)}
.site-b .cta p{color:var(--ink-soft)}
.site-b .btn{
  background:none;color:var(--ink);border:1px solid var(--ink);
  padding:17px 50px;letter-spacing:.02em;
}
.site-b .btn:hover{background:var(--ink);color:#fff;transform:none}

/* ── 푸터 : 진한 네이비 → 아이보리 ─────────────── */
.site-b .foot{background:var(--ivory-deep);color:var(--ink-soft);
  border-top:1px solid var(--line)}
.site-b .foot b{color:var(--ink)}
.site-b .foot__link a{border-color:#d8d3c6}

/* ── 개인정보처리방침 ──────────────────────────── */
.site-b .priv__intro{background:var(--ivory)}

/* ── 모바일 ────────────────────────────────────── */
@media (max-width:1080px){
  .site-b{--nav-h:60px}
  .site-b .nav__list{justify-content:flex-start}
  .site-b .sec{padding:74px 0}
  .site-b .sec__no{font-size:26px}
  .site-b .hero__meta div{padding:18px 14px}
  .site-b .type{padding:24px}
}

/* ── 히어로 : 사진 → 영상 전환을 더 천천히 ─────── */
/* A 는 0.8초, B 는 1.6초에 걸쳐 녹아들게 한다 */
.site-b .hero__bg{transition:opacity 1.6s ease}

/* ── 오른쪽 빠른버튼 : A 의 와인·남색 → B 의 먹빛·청동 ─── */
.site-b .quick__reg{background:var(--bronze);color:#fff}
.site-b .quick__reg:hover{background:var(--bronze-deep)}
.site-b .quick__tel{background:var(--ink);color:#fff}
.site-b .quick__tel:hover{background:#3a332b}
.site-b .quick__vr{background:#fff;color:var(--ink)}
.site-b .quick__vr:hover{background:var(--ivory)}
.site-b .quick__top{background:#fff;color:var(--ink)}
.site-b .quick__top:hover{background:var(--ivory)}

/* ══ 서브페이지 머리 ═══════════════════════════════
   A 는 영문이 크고(OVERVIEW) 한글이 작다. 왼쪽 정렬에 남색 띠.
   B 는 반대로 간다 — 한글을 크게, 영문은 작고 넓게, 가운데 정렬.
   ══════════════════════════════════════════════════ */
.site-b .phead{min-height:52vh;align-items:center}
.site-b .phead::after{
  background:
    radial-gradient(ellipse 78% 68% at 50% 46%,
      rgba(20,16,12,.52) 0%, rgba(20,16,12,.30) 55%, rgba(20,16,12,.06) 100%),
    linear-gradient(180deg,
      rgba(20,16,12,.30) 0%, rgba(20,16,12,0) 24%,
      rgba(20,16,12,.20) 70%, rgba(20,16,12,.46) 100%);
}
.site-b .phead__in{
  text-align:center;padding-bottom:0;
  text-shadow:0 2px 20px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
}

/* 영문 — 크게에서 작고 넓게 (A 와 정반대) */
.site-b .phead .phead__eng{
  font-size:12.5px;font-weight:500;letter-spacing:.42em;
  color:rgba(255,255,255,.82);margin:0 0 18px;
  padding-left:.42em;            /* 자간 때문에 오른쪽으로 밀리는 것 보정 */
}
/* 한글 — 작게에서 크게 */
.site-b .phead h1{
  font-size:clamp(32px,4.4vw,54px);font-weight:600;letter-spacing:-.045em;
  margin:0 0 16px;
}
.site-b .phead h1::after{
  content:"";display:block;width:44px;height:1px;margin:20px auto 0;
  background:rgba(255,255,255,.55);
}
.site-b .phead .phead__lead{
  margin-left:auto;margin-right:auto;color:rgba(255,255,255,.9);
}

/* 경로 메뉴 — 어두운 띠에서 밝고 가운데로 */
.site-b .pnav{
  background:rgba(255,255,255,.94);
  border-top:0;border-bottom:1px solid var(--line);
}
.site-b .pnav__in{justify-content:center}
.site-b .pnav__home{color:var(--muted)}
.site-b .pnav__home:hover{color:var(--ink)}
.site-b .pnav__group{
  color:var(--ink);font-weight:600;
  border-inline:1px solid var(--line);
}
.site-b .pnav__link{color:var(--ink-soft)}
.site-b .pnav__link:hover{color:var(--ink)}
.site-b .pnav__link.is-on{
  color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--bronze);
}
.site-b .phead__caution{color:rgba(255,255,255,.75)}

/* ══ 관심고객등록 ══════════════════════════════════ */
.site-b .submit{background:var(--ink);border-radius:0}
.site-b .submit:hover{background:var(--bronze)}
.site-b .rbenefit__no{color:var(--bronze)}
.site-b .rcall__num{color:var(--ink)}
.site-b .agree__check b{color:var(--bronze)}
.site-b .done__mark{background:var(--bronze)}
.site-b .done__btn{background:var(--ink);border-radius:0}
.site-b .table{border-top-color:var(--bronze)}
.site-b .table th{background:var(--ivory);color:var(--ink)}
.site-b .chip:hover{border-color:var(--ink);color:var(--ink)}
.site-b .priv h2{color:var(--ink);}
.site-b .priv__intro{border-left-color:var(--bronze)}
.site-b .priv__list li::before{color:var(--bronze)}

@media (max-width:1080px){
  .site-b .phead{min-height:40vh}
  .site-b .phead .phead__eng{font-size:10.5px;letter-spacing:.3em}
  .site-b .pnav__in{justify-content:flex-start}
}

/* ══ 유니트 페이지 ═════════════════════════════════
   남색 알약 배지·와인 글씨가 A 색 그대로 남아 있어 맞춘다.
   ══════════════════════════════════════════════════ */
.site-b .uinfo__head{background-color:#2b241c}
.site-b .uinfo__head::after{background:rgba(24,19,14,.46)}
.site-b .uinfo__count em{color:#d8b487}

.site-b .ublock__badge{
  background:none;color:var(--ink);
  border:1px solid var(--ink);border-radius:0;font-weight:600;
}
.site-b .ukey{background:var(--ivory)}
.site-b .ukey__tit{color:var(--bronze)}

.site-b .utab:hover{color:var(--ink)}
.site-b .utab.is-on{background:var(--ink);color:#fff}

.site-b .uplan__label{
  background:var(--ivory);color:var(--ink);border-radius:0;font-weight:600;
}

.site-b .glayer{background:rgba(24,19,14,.6)}
.site-b .glayer__tab:hover{color:var(--ink)}
.site-b .glayer__tab.is-on{background:var(--ink);color:#fff}

/* 배치도·조경 등에서 쓰는 알약 라벨들도 같이 */
.site-b .band figcaption b{color:var(--ink)}
.site-b .gal figcaption b{color:var(--ink)}
.site-b .sheet__cap{color:var(--muted)}