@charset "UTF-8";
/* dc-chrome.css — 129장 공용 부품 (2026-08-18)
   CSS정리-지시서 v2 §2. 머리 · 꼬리 · 하단바 · 모달을 한 파일에 모읍니다.

   값은 시안에서 읽었습니다:
     하단바   인덱스 모바일.dc.html 맨 아래 sticky 바
              padding:10px 14px calc(10px + env(safe-area-inset-bottom))
              배경 #fff · 위 테두리 1px #d8e0f0
              그림자 0 -2px 12px rgba(11,28,77,.08)
     모달     signup-mock.dc.html 폼 카드
     머리     히어로 하단 템플릿.dc.html(데스크탑) · 인덱스 모바일.dc.html(모바일)
     꼬리     시안에 없음 — 현행 유지 (chrome-white.css 의 .ft 를 그대로 옮김)

   ⚠️ !important 를 쓰지 않습니다. 쓰고 싶어지면 옛 시트가 아직 로드 중입니다.
   ⚠️ 이 파일을 부르는 장에서는 아래 넷을 빼야 합니다:
      chrome-white.css · footer.css · footer-white.css · mobile-bar.css
      (하단바·모달의 나머지 절반은 components.css 에 있어 그것도 함께 빠집니다) */

/* ═══════════════════════════════════════════════════════════════
   1. 하단 고정바
   지금 주인이 다섯 곳으로 쪼개져 있었습니다:
     components.css:1046  position:fixed · 뼈대
     mobile-bar.css:6     색 · 여백 덮개
     styles.css:1316      또 한 벌 (2장만 부름)
     cable-guide.css:394  .mfix (권역 랜딩 계열)
     cite.css:298         2-6 색 덮개
   여기서 한 벌로 합칩니다. 마크업이 두 갈래라 둘 다 받습니다:
     .mobile-fixed-buttons  상품 페이지 계열
     .mfix                  index · 권역 랜딩 계열
   ═══════════════════════════════════════════════════════════════ */
.mobile-fixed-buttons,
.mfix{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #d8e0f0;
  box-shadow: 0 -2px 12px rgba(11, 28, 77, .08);
  box-sizing: border-box;
}

.mobile-fixed-buttons > *,
.mfix > a{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 52px;
  padding: 0 12px;
  border: 0;
  border-radius: 13px;
  font-family: inherit;
  font-size:var(--fs-body);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

/* 색 — 통합지시서 2-6
   상담 = 흰 바탕 + 파란 테두리 · 전화 = 파란 바탕 + 흰 글씨 */
.mobile-fixed-buttons .mobile-inquiry-btn,
.mfix .c{
  background: #fff;
  color: #1E40AF;
  box-shadow: inset 0 0 0 1.5px #1E40AF;
}
.mobile-fixed-buttons .mobile-call-btn,
.mfix .t{
  background: #1E40AF;
  color: #fff;
}
.mobile-fixed-buttons .mobile-inquiry-btn svg,
.mfix .c svg{ color: #1E40AF; }
.mobile-fixed-buttons .mobile-call-btn svg,
.mfix .t svg{ color: #fff; }
.mobile-fixed-buttons svg,
.mfix svg{ width: 17px; height: 17px; flex: 0 0 auto; }

/* 전화 칸은 조금 좁게 — 옛 mobile-bar.css 와 같은 비율 */
.mfix .t{ flex: .7; }

@media (max-width: 820px){
  .mobile-fixed-buttons,
  .mfix{ display: flex; }
  body{ padding-bottom: 88px; }
}

/* ═══════════════════════════════════════════════════════════════
   2. 상담 모달
   지금 주인: components.css:2780 (숨김 처리). 빼면 본문에 펼쳐집니다.
   ═══════════════════════════════════════════════════════════════ */
/* ⚠️ align-items:center 였다. 상자(847px)가 화면(812px)보다 크면 위아래로
   삐져나가는데, scrollTop 은 음수가 될 수 없어 잘린 윗부분을 영영 못 본다.
   제목·상품 선택이 화면 밖에 갇히고 아래로도 67px 밖에 안 움직였다.
   flex-start 로 두어야 위에서부터 정상으로 스크롤된다.
   B 모달(.scm-ov)은 처음부터 flex-start 라 멀쩡했다 — 두 벌로 만든 대가다.
   (사장님 2026-08-19 「팝업 스크롤 안돼」 · 「인덱스 랜딩 팝업이 안돼」) */
.consult-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  background: rgba(11, 28, 77, .55);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.consult-modal-overlay.active{ display: flex; }

.consult-modal{
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 22px 18px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(11, 28, 77, .28);
  box-sizing: border-box;
}
.modal-close-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  font-size:var(--fs-lead);
  line-height: 1;
  color: #5b6b8f;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   3. 머리 (헤더 · 탭바)
   지금 주인: chrome-white.css · header.css
   시안 값:
     데스크탑  히어로 하단 템플릿.dc.html
               높이 64px · 좌우 24px · gap 14px
               로고 32px · 상호 15px/700 · 부제 11px/1.3 #5b6b8f
     모바일    인덱스 모바일.dc.html
               높이 56px · 좌우 14px · gap 10px
               로고 30px · 상호 14px/700 · 부제 10.5px
     카톡 버튼 44x44 · #FEE500 · 반지름 8px · 글리프 #3C1E1E
   ═══════════════════════════════════════════════════════════════ */
.nav{
  background: #fff;
  border-bottom: 1px solid #e4eaf5;
  position: relative;
  z-index: 100;
}
.nav-in{
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  max-width: none;
  padding-left: max(24px, calc((100% - 1080px) / 2));
  padding-right: max(24px, calc((100% - 1080px) / 2));
  box-sizing: border-box;
}
.nav .brand{
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  text-decoration: none;
}
.nav .brand img{ height: 32px; width: auto; display: block; }
.nav .brand-txt{ display: flex; flex-direction: column; gap: 1px; }
.nav .brand-txt b{
  font-size:var(--fs-body); font-weight: 700; color: #0b1c4d; letter-spacing: -.01em;
}
.nav .brand-txt small{
  font-size:var(--fs-micro); line-height: 1.3; color: #5b6b8f; white-space: nowrap;
}
.nav-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-kakao{
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  background: #FEE500; color: #3C1E1E;
  border-radius: 8px; text-decoration: none;
}
.nav-kakao svg{ width: 22px; height: 22px; display: block; }
.nav .navburger{
  width: 44px; height: 44px; flex: 0 0 auto;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: none; border: 0; cursor: pointer;
}
.nav .navburger span{
  width: 18px; height: 2px; background: #0b1c4d; border-radius: 1px; display: block;
}
.nav .navmenu{ display: flex; align-items: center; gap: 18px; }
.nav .navmenu a{
  font-size:var(--fs-sm); font-weight: 600; color: #2B3D63; text-decoration: none;
}
.nav .navmenu a:hover{ color: #1E40AF; }
/* 드롭 메뉴 — 흐름 안에 있으면 열 때 탭바·본문이 통째로 아래로 밀립니다
   (사장님 2026-08-18 「누르면 네비게이터도 밀려」).
   머리 아래에 겹쳐 뜨게 합니다. .nav 가 기준이 되도록 position:relative 를 줍니다. */
.nav{ position: relative; }
.navdrop{
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 1000;
  background: #fff; border-bottom: 1px solid #e4eaf5;
  box-shadow: 0 8px 24px rgba(11, 28, 77, .12);
  padding: 6px 14px 14px;
  flex-direction: column;
}
/* ⚠️ 2026-08-18 .open 을 보고 있었는데 toggleNav() 는 .on 을 붙입니다.
      그래서 모바일에서 햄버거를 눌러도 열리지 않았습니다. 둘 다 받습니다. */
.navdrop.on,
.navdrop.open{ display: flex; }
.navdrop a{
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid #eef1f7;
  font-size:var(--fs-body); font-weight: 600; color: #0b1c4d; text-decoration: none;
}

@media (max-width: 820px){
  .nav-in{ height: 56px; gap: 10px; padding-left: 14px; padding-right: 14px; }
  .nav .brand{ gap: 8px; min-width: 0; }
  .nav .brand img{ height: 30px; }
  .nav .brand-txt b{ font-size:var(--fs-sm); }
  .nav .brand-txt small{ font-size:var(--fs-micro); }
  .nav-right{ gap: 6px; }
  .nav .navburger{ display: flex; }
  .nav .navmenu{ display: none; }
}

/* 탭바 — 통합지시서 2-3, 시안 navTabs */
.dc-tabs{
  background: #fff; border-bottom: 1px solid #e4eaf5;
  padding: 9px 14px 11px;
  display: flex; gap: 7px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.dc-tabs::-webkit-scrollbar{ display: none; }
.dc-tabs a{
  display: inline-flex; align-items: center; flex: 0 0 auto;
  min-height: 40px; padding: 0 13px;
  background: #F5F8FD; border: 1px solid #d8e0f0; border-radius: 20px;
  font-size:var(--fs-sm); font-weight: 600; color: #2B3D63;
  text-decoration: none; white-space: nowrap;
}
.dc-tabs a[aria-current="page"]{ background: #fff; border-color: #1E40AF; color: #1E40AF; }
@media (min-width: 821px){
  .dc-tabs{
    justify-content: center; gap: 4px; padding: 0;
    padding-left: max(24px, calc((100% - 1080px) / 2));
    padding-right: max(24px, calc((100% - 1080px) / 2));
  }
  .dc-tabs a{
    background: none; border: 0; border-radius: 0;
    min-height: 46px; padding: 0 14px;
    border-bottom: 2px solid transparent;
  }
  .dc-tabs a[aria-current="page"]{
    background: none; border-bottom-color: #1E40AF; color: #1E40AF;
  }
}

/* 브레드크럼 — 마크업이 두 갈래입니다.
   평문(권역 랜딩)과 <ol class="breadcrumb-list">(상품 페이지) 둘 다 받습니다. */
.breadcrumb{
  max-width: 1080px; margin: 2px auto 0; padding: 6px 16px;
  font-size:var(--fs-xs); line-height: 1.6; color: #8b96b8; word-break: keep-all;
}
.breadcrumb a,
.breadcrumb .breadcrumb-link{ color: #5b6b8f; text-decoration: none; }
.breadcrumb .breadcrumb-container{ max-width: none; margin: 0; padding: 0; }
.breadcrumb .breadcrumb-list{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.breadcrumb .breadcrumb-item{ display: flex; align-items: center; gap: 6px; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  content: "›"; color: #c3cbe0;
}
.breadcrumb .breadcrumb-item[aria-current="page"],
.breadcrumb .breadcrumb-current{ color: #3c4770; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   4. 꼬리 (푸터)
   ⚠️ 시안에 없습니다 — 현행 유지.
      chrome-white.css 의 .ft 규칙을 값 그대로 옮겼습니다(§3-2 표).
   ═══════════════════════════════════════════════════════════════ */
.ft{
  background: #050c22; color: #6a7bab;
  font-size:var(--fs-xs); line-height: 1.9; text-align: left;
  padding: 30px 16px 40px;
}
.ft *{ box-sizing: border-box; }
.ft .ft-in{ position: relative; max-width: 1080px; margin: 0 auto; }
.ft b{ color: #9fb0d9; }
.ft a{ color: #FFC400; text-decoration: none; }
.ft .ft-links{ display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; }
.ft .ft-links a{ white-space: nowrap; }
.ft .ft-biz{ display: block; margin-top: 8px; color: #8593b8; line-height: 1.7; }
.ft .ft-sns{ display: flex; gap: 14px; margin: 12px 0 4px; }
.ft .ft-sns a{ color: #9fb0d9; font-size:var(--fs-subtitle); line-height: 1; }
.ft .ft-sns a:hover{ color: #FFC400; }
.ft .ft-sns a svg{ width: 20px; height: 20px; display: block; }
.ft .ft-brand{
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 900; font-size:var(--fs-body); letter-spacing: -.01em; color: #fff;
}
.ft .ft-brand .ft-brand-mark{
  width: 24px; height: 24px; border-radius: 50%;
  background: #FFC400; color: #050c22;
  display: inline-flex; align-items: center; justify-content: center;
  font-size:var(--fs-xs); font-weight: 900;
}
.ft-cert{
  position: absolute; top: 30px; right: 0;
  width: 190px; height: auto; border-radius: 12px;
}
@media (max-width: 820px){
  .ft-cert{
    position: static; display: block;
    width: 200px; max-width: 66%; margin: 8px 0 30px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. 상담 폼 — 모달 안과 페이지 안 둘 다
   지금 주인이던 components.css 를 빼면서 입력칸이 0x0 이 되었습니다.
   값은 signup-mock.dc.html 에서 읽었습니다:
     라벨 12.5px/600 #5b6b8f · 별표 #1E40AF
     입력 높이 48px · 좌우 13px · 테두리 1px #d8e0f0 · 반지름 8px
          글자 15.5px #0b1c4d · 배경 #fff
     칸 사이 13px · 두 칸은 minmax(200px,1fr)
   ═══════════════════════════════════════════════════════════════ */
.contact-form{ display: flex; flex-direction: column; gap: 13px; }
.form-row-2col{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 13px;
}
/* ⚠️ 2026-08-19 .form-group 은 이름이 흔해 다른 장 폼까지 잡습니다.
      signup.html 의 .name-id-row(display:grid 2열)를 flex 로 덮어
      이름칸이 오른쪽 끝으로 밀렸습니다. 상담 모달 안으로 좁힙니다. */
.consult-modal .form-group,
.dc-cta .form-group{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-label{
  font-size:var(--fs-xs); font-weight: 600; color: #5b6b8f;
}
.form-label span{ color: #1E40AF; }
.form-label small{ font-weight: 500; color: #5b6b8f; }

.contact-form input[type="tel"],
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.single-phone-input{
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid #d8e0f0;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size:var(--fs-body);
  color: #0b1c4d;
  box-sizing: border-box;
}
.contact-form textarea,
textarea.single-phone-input{
  height: auto;
  min-height: 78px;
  padding: 11px 13px;
  line-height: 1.6;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{ outline: 2px solid #1E40AF; outline-offset: -2px; }
.contact-form input[type="hidden"]{ display: none; }

/* 동의 줄 */
.privacy-check-row,
.privacy-inline{
  display: flex; align-items: flex-start; gap: 8px;
  font-size:var(--fs-sm); line-height: 1.6; color: #374151;
}
.privacy-check-row input[type="checkbox"],
.privacy-inline input[type="checkbox"]{
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: #1E40AF; flex: 0 0 auto;
}
.detail-toggle{
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size:var(--fs-xs); color: #1E40AF;
  text-decoration: underline; cursor: pointer;
}
#privacy-content{ display: none; }
#privacy-content.active{
  display: block;
  margin-top: 6px; padding: 10px 12px;
  background: #F5F8FD; border: 1px solid #d8e0f0; border-radius: 8px;
  font-size:var(--fs-xs); line-height: 1.75; color: #5b6b8f;
}

/* 보내기 버튼 */
.contact-form button[type="submit"],
.consult-call-btn{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  border: 0; border-radius: 9px;
  background: #1E40AF; color: #fff;
  font-family: inherit; font-size:var(--fs-body); font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.consult-call-btn{
  background: #fff; color: #1E40AF;
  box-shadow: inset 0 0 0 1.5px #1E40AF;
}

/* 모달 머리 — 배지 · 제목 · 고른 상품 */
.consult-brand-badge{
  display: flex; align-items: center; gap: 8px;
  font-size:var(--fs-xs); font-weight: 700; color: #2B3D63;
}
.consult-brand-badge__ico{ width: 22px; height: 22px; object-fit: contain; }
.modal-title{
  margin: 10px 0 4px; font-size:var(--fs-lead); font-weight: 800;
  letter-spacing: -.02em; color: #0b1c4d;
}
.selected-badge{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 10px 0; padding: 11px 13px;
  background: #F5F8FD; border: 1px solid #d8e0f0; border-radius: 9px;
  font-size:var(--fs-sm); color: #5b6b8f;
}
.badge-label{ flex: 0 0 auto; }
.badge-value{ font-weight: 700; color: #1E40AF; text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   6. 제휴카드 모달
   지금 주인이던 components.css:8166 을 빼면서 본문에 펼쳐졌습니다.
   ═══════════════════════════════════════════════════════════════ */
/* 6. 제휴카드 모달 — 2026-08-18 걷어냈습니다.
      시안에 모달이 없고, 카드 3줄이 EXTRA 접기 안에서 바로 펼쳐집니다.
      규칙은 dc-body.css 의 .dc-card-promo 로 옮겼습니다. */

.consult-modal .privacy-content{
  padding: 11px 13px; border-top: 1px solid #d8e0f0;
  font-size:var(--fs-xs); line-height: 1.7; color: #5b6b8f;
}
.consult-modal .privacy-content p{ margin: 0 0 5px; }
.consult-modal .privacy-content p:last-child{ margin-bottom: 0; }
.consult-hours{
  margin: 12px 0 0; text-align: center;
  font-size:var(--fs-xs); color: #5b6b8f;
}

/* 8. 「우리 지역 확인」 모달 — qna.html
      components.css 가 숨기고 있어, 그 시트를 걷자 본문에 591px 로 펼쳐졌습니다.
      ⚠️ 죽은 모달이 아닙니다. qna.html 1680줄의 openRegionModal() 이 실제로 엽니다. */
.mobile-inquiry-modal{
  display: none; position: fixed; inset: 0; z-index: 1200;
  background: rgba(11, 28, 77, .55);
  overflow-y: auto;
}
.mobile-modal-content{
  width: 90%; max-width: 460px; margin: 4vh auto;
  background: #fff; border-radius: 14px; padding: 0;
  max-height: calc(100dvh - 8vh); overflow-y: auto;
  box-shadow: 0 18px 48px rgba(11, 28, 77, .28);
}

/* 상자 자체가 스크롤하게 — 오버레이만 스크롤시키면 터치가 상자 위에서 안 먹는
   기기가 있다 (2026-08-19). */
.consult-modal-overlay .consult-modal{
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}