/* ═══════════════════════════════════════════════════════════════
   dc-hero.css — 시안 히어로 (2026-08-17)
   ═══════════════════════════════════════════════════════════════
   본: _페이지개편_2026-08-17/시안/인덱스 모바일.dc.html
       _페이지개편_2026-08-17/시안/히어로 하단 템플릿.dc.html

   시안은 인라인 스타일로 값을 박아 두었다. 그 값을 여기로 분리했다.
   ⚠️ 새 파일이다. 기존 히어로 CSS(cable-guide·region)와 섞지 않는다.
   ⚠️ 클래스 앞머리는 dc- 로 통일한다. 옛 .hero 계열과 이름이 겹치지 않게.
   ─────────────────────────────────────────────────────────────── */

.dc-hero{
  background:#0b1c4d;
  padding:20px 16px 24px;
  color:#fff;
}

/* 라벨 — 마스코트 + 상호 + 자칭 */
.dc-hero__brand{ display:flex; align-items:center; gap:9px; }
.dc-hero__brand img{
  width:38px; height:38px; border-radius:50%;
  object-fit:cover; background:rgba(255,255,255,.14);
  flex:0 0 auto; display:block;
}
.dc-hero__who{ display:flex; flex-direction:column; gap:1px; }
.dc-hero__name{ font-size:var(--fs-sm); font-weight:700; color:#fff; }
.dc-hero__role{ font-size:var(--fs-micro); line-height:1.45; color:rgba(255,255,255,.7); text-wrap:pretty; }

/* 킥커 */
.dc-hero__kick{
  margin-top:16px;
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; color:#FFC400;
}

/* h1 */
.dc-hero h1{
  margin:7px 0 0;
  font-size:var(--fs-title); line-height:1.24; font-weight:800;
  letter-spacing:-.03em; color:#fff;
}

/* 리드 */
.dc-hero__lead{
  margin:11px 0 0;
  font-size:var(--fs-sm); line-height:1.7;
  color:rgba(255,255,255,.78); text-wrap:balance;
}

/* 대표 금액 */
.dc-hero__price{
  display:flex; align-items:baseline; gap:5px;
  margin-top:18px; flex-wrap:wrap;
}
.dc-hero__amt{
  font-size:var(--fs-heading); font-weight:800; letter-spacing:-.03em;
  color:#FFC400; font-variant-numeric:tabular-nums;
}
.dc-hero__from{ font-size:var(--fs-body); color:rgba(255,255,255,.7); }
.dc-hero__cond{
  margin-top:7px;
  font-size:var(--fs-micro); line-height:1.7; color:rgba(255,255,255,.62);
}

/* 신뢰 배지 pill 3개 */
.dc-hero__trust{ display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }
.dc-hero__trust span{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid rgba(255,255,255,.28); border-radius:8px;
  padding:5px 9px;
  font-size:var(--fs-micro); color:rgba(255,255,255,.9);
}
.dc-hero__trust img{ width:15px; height:15px; object-fit:contain; }

/* 인용 한 덩어리 — 네이비 위 */
.dc-hero__cite{
  margin-top:18px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:var(--fs-micro); line-height:1.75;
  /* 네이비 위에서 흐려 읽기 어려웠다 — .68 → .72 (지시서 §8) */
  color:rgba(255,255,255,.72);
}
.dc-hero__cite b{ font-weight:700; color:#fff; }
.dc-hero__cite a{ color:#FFC400; font-weight:700; text-decoration:none; }
.dc-hero__cite .nb{ white-space:nowrap; }

/* 계산기는 네이비 위 흰 카드로 */
.dc-hero .jeong-calc{
  background:#fff; border-radius:13px; padding:16px; margin-top:18px;
}

/* 데스크탑 — 히어로 하단 템플릿.dc.html 값 */
@media (min-width:769px){
  .dc-hero{ padding:34px 24px 44px; }
  .dc-hero h1{ font-size:var(--fs-heading); }
  .dc-hero__lead{ font-size:var(--fs-body); }
  .dc-hero__amt{ font-size:var(--fs-heading); }
  .dc-hero__cond{ font-size:var(--fs-xs); }
  .dc-hero__inner{ max-width:1080px; margin:0 auto; }
}

/* 데스크탑 히어로 — 랜딩 23장과 같은 한 단입니다 (사장님 2026-08-18)
   「랜딩하고 구조가 같아야 나중이 편하지」
   계산기는 히어로 밖 CALCULATOR 구역으로 뺐습니다(index.html).

   ── index 만 두 칸 (2026-08-19) ───────────────────────────────
   사장님 「히어로 오른쪽 너무 공간이 많아서 매니저 캐릭터 같은거 삽입」
          「데스크탑만 적용 캐릭터 이미지는」 · 「모바일은 카드 디자인처럼 B로고 오른쪽에」
   ⚠️ 이 시트는 권역 23장·상품 3장도 씁니다. 그래서 .p-index 로 좁힙니다.
      다른 장의 히어로는 한 단 그대로입니다. */
.dc-hero__fig{ display:none; }                 /* 기본은 없음 — 모바일에 그림을 받지 않는다 */

@media (min-width:769px){
  /* 캐릭터가 세로 가운데라 h1 과도 인용과도 선이 맞지 않았다. 위에 맞춘다.
     인용은 두 칸 아래로 빼 한 줄에 길게 두고 잘리지 않게 한다.
     (지시서 「점검-index-데스크탑.md」 §2) */
  .p-index .dc-hero__inner,
  .p-usim .dc-hero__inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px);
    align-items:start; column-gap:40px; }
  .p-index .dc-hero__fig,
  .p-usim .dc-hero__fig{ display:block; justify-self:end; }
  .p-index .dc-hero__fig img,
  .p-usim .dc-hero__fig img{
    width:360px; height:auto; max-width:100%; display:block;
    filter:drop-shadow(0 18px 34px rgba(11,28,77,.18));
  }
  /* 인용 한 덩어리는 두 칸 아래 통째로 — 잘리면 안 되는 문장입니다 */
  .p-index .dc-hero__txt,
  .p-usim .dc-hero__txt{ min-width:0; }
}

/* 모바일 — 카드 디자인처럼 B로고를 오른쪽에 크게 깝니다.
   글 뒤로 지나가므로 흐리게 두고, 4KB 짜리라 무게가 없습니다.
   2026-08-19: index·usim 에만 걸려 있던 것을 모든 히어로로 넓혔습니다.
   권역 23장·상품 3장은 body 클래스가 없어 빠져 있었습니다
   (사장님 「모바일버전 다른 랜딩도 인덱스 처럼 B로고 뒤에 은은하게」).
   ⚠️ 이 구간은 모바일 전용이라 데스크탑 캐릭터(.hero-mas)와 겹치지 않습니다. */
@media (max-width:768px){
  .dc-hero{ position:relative; overflow:hidden; }
  /* 2026-08-21: 세로 중앙(top:50%)에 두었더니 **월 19,800원 금액과 정면으로 겹쳤다.**
     실측 — 히어로 498px 중 크롭 154~344px · 금액 236~275px.
     가장 중요한 숫자 뒤로 로고가 지나가고 있었다.
     오른쪽 위 모서리로 올린다. 거기는 브랜드 라벨 오른쪽이라 비어 있다. */
  .dc-hero::after{
    content:""; position:absolute; z-index:0; pointer-events:none;
    right:-46px; top:-16px;
    width:172px; height:172px;
    background:url("../img/B_logo_white.webp") no-repeat right center/contain;
    opacity:.11;
  }
  .dc-hero__inner{ position:relative; z-index:1; }
}

/* ═══ 계산기 — 시안 구조 (인덱스 모바일.dc.html) ═══════════════
   1 어떤 상품 → 2 인터넷 속도 → 3 휴대폰 결합 → 결과 → 버튼 하나
   ─────────────────────────────────────────────────────────── */
.dc-calc{ background:#fff; border-radius:13px; padding:16px; margin-top:18px; }
.dc-calc__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.dc-calc__title{ font-size:var(--fs-body); font-weight:800; letter-spacing:-.01em; color:#0b1c4d; }
.dc-calc__step{ font-size:var(--fs-micro); color:#5b6b8f; }

.dc-calc__bars{ display:flex; gap:4px; margin-top:9px; }
.dc-calc__bars i{ flex:1; height:3px; border-radius:2px; background:#e4eaf5; }
.dc-calc__bars i.on{ background:#1E40AF; }

.dc-calc__lab{ margin-top:14px; font-size:var(--fs-xs); font-weight:700; color:#2B3D63; }
.dc-calc__lab small{ font-weight:500; color:#5b6b8f; font-size:var(--fs-xs); }
.dc-calc__row{ display:flex; gap:6px; margin-top:7px; }
.dc-calc__row button{
  flex:1 1 0; min-width:0; min-height:46px; padding:0 6px;
  background:#fff; border:1.5px solid #e4eaf5; border-radius:9px;
  font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:#2B3D63;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.dc-calc__row button small{ font-size:var(--fs-micro); font-weight:500; color:#5b6b8f; }
.dc-calc__row button.on{ background:#1E40AF; border-color:#1E40AF; color:#fff; }
.dc-calc__row button.on small{ color:rgba(255,255,255,.75); }

.dc-calc__out{ border-top:1px solid #e4eaf5; margin-top:15px; padding-top:13px; }
.dc-calc__name{ font-size:var(--fs-micro); color:#5b6b8f; }
.dc-calc__price{ display:flex; align-items:baseline; gap:6px; margin-top:3px; }
.dc-calc__amt{
  font-size:var(--fs-num-lg); font-weight:800; letter-spacing:-.03em;
  color:#1E40AF; font-variant-numeric:tabular-nums;
}
.dc-calc__per{ font-size:var(--fs-sm); color:#5b6b8f; }
.dc-calc__note{ font-size:var(--fs-micro); line-height:1.6; color:#5b6b8f; margin-top:5px; }
.dc-calc__go{
  display:flex; align-items:center; justify-content:center;
  height:50px; margin-top:12px;
  background:#1E40AF; border-radius:9px;
  color:#fff; font-size:var(--fs-body); font-weight:700; text-decoration:none;
}


/* index·usim 히어로 — 인용을 두 칸 아래 통째로 (지시서 §2)
   238px 폭에 갇혀 여섯 줄로 늘어지던 것을 한 덩어리로 편다.
   ⚠️ 문장은 한 글자도 바꾸지 않는다 — 인용 세트다. */
@media (min-width:769px){
  /* DOM 순서가 txt → cite → fig 라, 인용을 두 칸으로 펴면 캐릭터가 그 다음
     줄로 밀린다. 행을 못박아 캐릭터는 첫 줄 오른쪽, 인용은 둘째 줄에 둔다. */
  .p-index .dc-hero__txt,
  .p-usim .dc-hero__txt{ grid-column: 1; grid-row: 1; }
  .p-index .dc-hero__fig,
  .p-usim .dc-hero__fig{ grid-column: 2; grid-row: 1; padding-top: 52px; }
  .p-index .dc-hero__cite,
  .p-usim .dc-hero__cite{
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.18);
    max-width: none;
  }
}