/* =============== 기블리퀵 메인 페이지 (scoped to #ghq-main) =============== */
html, body { max-width:100%; overflow-x:hidden; }
#ghq-main { overflow-x: clip; } 

#ghq-main .hero,
#ghq-main .alerts,
#ghq-main .section4,
#ghq-main .vehicle-section { overflow-x: clip; }

#ghq-main{
  --bg1:#5EC6F3;   /* 히어로 배경 */
  --bg2:#BFE4FF;   /* 두번째 섹션 배경 */
  --text:#333;
  --accent:#2E74FF;
}

#ghq-main .ghq-zoom{
  transform-origin: top center;
  transform: scale(var(--ghqScale, 1));
  height: var(--ghqHeight, auto);
  /* 부모 section이 스케일된 박스를 감싸도록 */
  display:block;
}

@media (max-width:560px){
  #ghq-main .ghq-zoom{
    transform:none;
    height:auto;
  }
}

#ghq-main .hero .ghq-zoom a.cta2,
#ghq-main .hero a.cta2,
#ghq-main a.cta2,
a.cta2[href^="tel:"] {
  display: none !important;
  visibility: hidden !important;
}

/* 공통 */
#ghq-main *{ box-sizing:border-box; }
#ghq-main{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR","Apple SD Gothic Neo","Pretendard","Malgun Gothic","맑은 고딕",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  word-break:keep-all;
  color:var(--text);
}
#ghq-main section{ width:100%; padding:clamp(40px,6vw,100px) 5%; }

/* =============== 섹션 1: 히어로 =============== */
#ghq-main .hero{
  background:var(--bg1);
  color:#fff;
  height:700px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(24px,4vh,40px);
}
#ghq-main .hero h1{ margin:10px; font-weight:900; font-size:clamp(28px,7vw,64px); line-height:1.15; }
#ghq-main .hero .lead{ margin:0; font-size:clamp(16px,4vw,28px); font-weight:600; line-height:1.25; }
#ghq-main .hero .cta{
  display:inline-block; padding:clamp(12px,2.5vw,20px) clamp(28px,6vw,60px);
  border-radius:999px; background:#fff; color:var(--accent); font-weight:800; font-size:clamp(16px,4vw,22px);
  text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,.12); transition:.2s ease;
}
#ghq-main .hero .cta:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.16); }
#ghq-main .hero .cta2{
  display:inline-block; padding:clamp(12px,2.5vw,20px) clamp(28px,5vw,50px);
  border-radius:999px; background:#fff; color:var(--accent); font-weight:800; font-size:clamp(16px,4vw,26px);
  text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,.12); transition:.2s ease;
  position: relative; right: -80%;
}
#ghq-main .hero .cta2:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.16); }

@media (max-width:560px){
#ghq-main .hero .cta2 {
  right: -40%;
  bottom: 20%;
}

  }

/* ===== 섹션 1-sub event: 히어로프로모션 배너 ===== */
#ghq-main .quick-event{
  background:#04A6F6;         /* 시안과 비슷한 블루 */
  color:#fff;
  padding:clamp(40px,6vw,120px) 3vw;
}
#ghq-main .quick-event .qe-stage{
  width:min(1560px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.1fr;  /* 좌 일러스트 / 우 카피 */
  gap:clamp(24px,4vw,80px);
  align-items:center;
}

/* 좌 일러스트 */
#ghq-main .quick-event .qe-visual img{
  width:70%;
  height:auto;
  display:flex;
  position: relative;
  left: 15%;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.18));
}

/* 우 카피 */
#ghq-main .quick-event .qe-copy{ text-align:right; position: relative; right: 15%;}
#ghq-main .quick-event .qe-eyebrow{
  margin:0 0 clamp(8px,1.8vw,16px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  font-size:clamp(18px,2.6vw,44px);
  opacity:.98;
}
#ghq-main .quick-event .qe-headline{
  margin:0;
  font-weight:900;
  line-height:1.14;
  letter-spacing:-.02em;
  font-size:clamp(28px,4.8vw,76px);  /* 두 줄 큰 제목 */
}
#ghq-main .quick-event .qe-headline .span {
font-weight: 700;
}

#ghq-main .quick-event .qe-headline strong{
  display:block; font-weight:900;
}
#ghq-main .quick-event .qe-headline em{
  font-style:normal; font-weight:900;
  font-size:1.22em;                 /* ‘최대 10%’ 강조 */
  color: #ffff00;
}
#ghq-main .quick-event .qe-note{
  margin-top:clamp(10px,1.8vw,18px);
  margin-top: -10px;
  font-weight:600;
  font-size:clamp(14px,1.8vw,20px);
  opacity:.92;
}
/* 반응형 */
@media (max-width:1024px){
  #ghq-main .qe-visual{
    width: 120%;
  }
  #ghq-main .quick-event{
    padding:clamp(28px,8vw,40px) 5vw;
  }
  #ghq-main .quick-event .qe-headline em{ font-size:1.9em; }
  #ghq-main .quick-event .qe-headline span{ font-size:1em; }
  #ghq-main .quick-event .qe-headline strong{ font-size:0.9em; }
  #ghq-main .quick-event .qe-eyebrow { font-size:2.1em; }
  #ghq-main .quick-event .qe-note{ font-size:1.3em; margin-top:1px;}

}


@media (max-width:560px){
  #ghq-main .quick-event{
    padding:clamp(28px,8vw,40px) 5vw;
  }
  #ghq-main .quick-event .qe-headline em{ font-size:1.2em; }
  #ghq-main .quick-event .qe-headline span{ font-size:0.8em; }
  #ghq-main .quick-event .qe-headline strong{ font-size:0.7em; }
  #ghq-main .quick-event .qe-eyebrow { font-size:1em; }
  #ghq-main .quick-event .qe-note{ font-size:0.6em; margin-top:1px;}

}


/* =============== 섹션 2: 서비스 소개(요금변경/취소) =============== */
#ghq-main .features{
  background:var(--bg2);
  text-align:left;
  height:800px;
}
#ghq-main .stage{
  max-width:1560px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr 1fr; column-gap:clamp(24px,3.5vw,48px); align-items:start;
}

/* 상단 흰 배지 */
#ghq-main .badge{
  width:620px; grid-column:2 / 4; justify-self:end; margin:0 4vw 40px 0;
  background:#fff; border-radius:24px; padding:clamp(14px,2.4vw,26px) clamp(20px,4vw,36px);
  box-shadow:0 14px 28px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06); text-align:center;
  transform:translateY(130px); will-change:contents;
}
#ghq-main .headline-2{ margin:0; font-weight:900; font-size:clamp(18px,3.2vw,40px); line-height:1.3; }
#ghq-main .headline-2 .muted{ color:#8B8B8B; font-weight:800; font-size:clamp(18px,3.2vw,33px); }
#ghq-main .headline-2 .accent{ color:var(--accent); }

/* 좌: 아이폰 + 지도 */
#ghq-main .pos-left{ grid-column:1; }
#ghq-main .device-wrap{ position:relative; max-width:400px; width:100%; }
#ghq-main .device{ width:90%; height:auto; display:block; }
#ghq-main .map-overlay{
  position:absolute; width:100%; left:54%; bottom:8%;
  transform:translateX(-8%); filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* 중/우: 카드 + 캡션 */
#ghq-main .pos-mid{ grid-column:2; margin-top:clamp(0,2vw,24px); margin-left:30px; transform:translateY(35%); }
#ghq-main .pos-right{ grid-column:3; margin-top:clamp(0,4vw,80px); transform:translateY(208%); position:relative; z-index:2; }
#ghq-main .cancel-img{ width:80% !important; transform:translateX(-35%) !important;}
#ghq-main .changeprice-img{ width:70% !important; transform:translateX(-2%) !important;}

#ghq-main .caption1{
  display:flex; align-items:center; 
  justify-content: flex-start;
  gap: 8px;
  font-weight:700; font-size:clamp(15px,1.6vw,23px); color:#0062ff; text-align:left;
  transform:translateX(65%); padding-bottom: 5%; 
}
#ghq-main .caption2{
  display:flex; align-items:center; 
  justify-content: flex-start;
  gap: 8px; z-index:2; line-height: 1.4;
  font-weight:700; font-size:clamp(15px,1.6vw, 23px); color:#0062ff; text-align:left; transform:translateX(5%);
   transform:translateY(-50%);
}
#ghq-main .caption1 p,#ghq-main .caption2 p{ font-weight:800; }
#ghq-main .caption1 .upanddownicon1 {
width: 28%;
height: auto;
flex-shrink: 0;
}
#ghq-main .caption2 .cancelredicon1 {
width: 20%;
height: auto;
flex-shrink: 0;
}


/* 섹션2 반응형 */
/* ── 태블릿/모바일: 1단 스택 + 절대좌표 해제 ── */
@media (min-width: 561px) and (max-width: 1024px){
  #ghq-main .features{ height: auto; }
  #ghq-main .features .stage{
    grid-template-columns: .9fr 1.1fr;
    column-gap: clamp(18px,3vw,28px);
    align-items: start;
  }
  #ghq-main .features .badge{
    width: min(520px, 86%);
    margin: 0 0 12px auto;
    transform: translateY(40px);
    padding: clamp(12px,2vw,22px) clamp(18px,3vw,28px);
    position: relative;
    left: 30%;
  }
  #ghq-main .features .pos-left { position: relative; left: -60%; width: 280px; }
  #ghq-main .features .pos-mid{
    margin-top: 0; margin-left: 0;
    transform: none;
    position: absolute;
    left: 35%;
    bottom: -40%;
  }
  #ghq-main .features .pos-mid .like-screenshot1 { width: 60%; }
  #ghq-main .features .pos-right{
    margin-top: 0; transform: none;
    position: relative; left: 60%; bottom: -48%;
  }
  #ghq-main .features .changeprice-img{ width: 82% !important; transform: none !important; }
  #ghq-main .features .cancel-img{ width: 86% !important; transform: none !important; }
  .caption1, .caption2{ transform: none !important; }
  #ghq-main .caption1{ justify-content: flex-start; font-size: clamp(14px,1.8vw,18px); }
  #ghq-main .caption2{ justify-content: flex-start; font-size: clamp(14px,1.8vw,18px); }
}

@media (max-width:560px) {
  #ghq-main .features{ height:auto; }
  #ghq-main .features .stage{ grid-template-columns: 1fr; gap: 28px; }
   #ghq-main .features .pos-left {width: min(280px, 70%)}


  #ghq-main .features .badge{
    grid-column: 1;
    justify-self: center;
    margin: 0 0 16px 0;
    transform: none;     /* 절대적 위치값 제거 */
    width: min(640px, 92%);
  }

  #ghq-main .features .pos-left,
  #ghq-main .features .pos-mid,
  #ghq-main .features .pos-right{
    grid-column: 1;
    margin-top: 0;
    transform: none;     /* 위치 변환 제거 → 레이아웃으로 자연 배치 */
  }


  #ghq-main .features .device-wrap{ width: min(420px, 92%); margin: 0 auto; }
  #ghq-main .features .like-screenshot1 { margin: 0 auto; }
  #ghq-main .features .like-screenshot1 .changeprice-img {position: relative; align-items: center; display: flex;
  left: 10%;}
  #ghq-main .features .like-screenshot2 .cancel-img {position: relative; align-items: center; display: flex; left:38%;}
  #ghq-main .features .caption1{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:12px, auto;
    font-weight:800;
    font-size:clamp(20px, 3.6vw, 18px);
    color:#0062ff;
    text-align:left;  /* 가운데 전체 정렬하면서, 텍스트는 자연스럽게 왼쪽 */
    transform:none;
    margin-bottom: 10px;
  }
  #ghq-main .features .caption2{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:12px auto;
    font-weight:800;
    font-size:clamp(18px, 3.6vw, 18px);
    color:#0062ff;
    text-align:left;  /* 가운데 전체 정렬하면서, 텍스트는 자연스럽게 왼쪽 */
    transform:none;
    margin-bottom: 30px;
  }
}

/* =============== 섹션 3: 알림톡 =============== */
#ghq-main .alerts{
  background:#BFE4FF;
  overflow: hidden;
  height: auto;
}
#ghq-main .alerts .stage-3{
  position:relative;
  width:min(1560px,100%);
  max-width: 1560px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr 1fr; /* 좌 텍스트 / 우 비주얼 */
  align-items:start;
  gap: clamp(24px, 3vw, 48px);
  height: auto;
}

/* 왼쪽 카피 */
#ghq-main .alerts .left-copy{
  position:relative;
  color:#fff;
  padding-top: 45%;
}
#ghq-main .alerts .h-hero{
  margin:0;
  font-weight:900;
  line-height:1.18;
  letter-spacing:-0.02em;
  font-size: clamp(28px,6.6vw,60px);
}
#ghq-main .alerts .white-badge{
  display:block;
  width:min(680px,44vw);
  min-height:120px;
  margin-top: clamp(22px,3vw,76px);
  border-radius:22px;
  background:#fff;
  color:#6F7683;
  text-align:center;
  padding: clamp(14px,2.2vw,20px) clamp(20px,3.6vw,28px);
  box-shadow:0 16px 30px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
}
#ghq-main .alerts .white-badge .muted{
  font-weight:800;
  font-size: clamp(16px,2.2vw,28px);
}
#ghq-main .alerts .white-badge .accent{
  color:#2E74FF;
  font-weight:900;
  font-size: clamp(20px,3.2vw,40px);
}

/* 오른쪽 비주얼 묶음 */
#ghq-main .alerts .right-visual{
  position:relative;
  min-height: 560px;
}
#ghq-main .alerts .bell{
  position:absolute;
  width:min(180px,14vw);
  left: 10%;
  top: 30%;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.15));
  transform: translateY(32%);
  z-index:3;
}

/* 알약 라벨들 */
#ghq-main .alerts .pill{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  padding: 16px 28px;
  border-radius: 20px;
  font-weight:900;
  font-size: clamp(18px,2.2vw,36px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  z-index:4;
  white-space:nowrap;
}
#ghq-main .alerts .pill-yellow{
  background:#FFD400; color:#1a1a1a;
  width: clamp(180px,26vw,420px); height: clamp(54px,6.2vw,82px);
  left: 11%; top: 77%;
}
#ghq-main .alerts .pill-gray{
  background:#EFE9E7; color:#1a1a1a;
  width: clamp(180px,26vw,420px); height: clamp(54px,6.2vw,82px);
  left: 20%; bottom: -25%;
}

/* 아이폰 */
#ghq-main .alerts .iphone{
  position:absolute;
  right:0;
  top:35%;
  width:min(300px,22vw);
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.22));
  z-index:2;
}

/* 반응형: 세로 스택 */
@media (max-width:560px){
  #ghq-main .alerts .stage-3{ 
  grid-template-columns:1fr;
  gap: 24px;
  min-height: 1150PX;
}

  #ghq-main .alerts .left-copy{position:static; text-align: center; padding-top:0; }
  #ghq-main .alerts .white-badge{
    padding:10px; width: 250px; margin-left:auto; margin-right:auto; 
    margin-top: 20px;   
    margin-bottom: 4px;
    min-height: unset;
  }
   
    #ghq-main .alerts .right-visual{
    margin-top: 20%;
    left: 20%;
    position: absolute;
    display:block
  }

   #ghq-main .alerts .bell{
    position:relative;
    left:-43%; top:180px;
    margin: 0 auto clamp(10px,3vw,16px);
    display:block;
    width: min(150px, 24vw);
  }

  #ghq-main .alerts .iphone{
    position:relative;
    right:auto; top:auto;
    margin: 0 auto;
    width: min(280px, 56vw);
    z-index:2;
  }

  #ghq-main .alerts .pill-yellow{position:absolute; left: -30%; text-align: center; }
  #ghq-main .alerts .pill-gray{ position:absolute; left: -10%; text-align: center;}


  /* pill 2개를 아이폰 아래 중앙에 세로 스택 */
  #ghq-main .alerts .pill{
    position:relative;
    top:545px;
    margin: clamp(12px,3vw,16px) auto 0;
    width: min(440px, 86vw);
    height: clamp(50px, 12vw, 66px);
    font-size: clamp(18px, 4.6vw, 24px);
  }


  /* 순서/간격 감각적으로 */
  #ghq-main .alerts .bell{ width: min(160px,38vw); margin-bottom: 10px; }
  #ghq-main .alerts .pill{width:220px; height: auto; margin-bottom: 16px; }
  #ghq-main .alerts .iphone{ width: min(360px,68vw);}
}


/* ===== 섹션 4: 어느 환경에서도 편리한 접수 과정 ===== */
#ghq-main .section4{
  background:#E9F2FF;
  padding: clamp(56px,6vw,88px) 3vw;
}
#ghq-main .section4 .stage4{
  position:relative;
  width:min(1560px,100%);
  height:700px;
  margin:0 auto;
}

/* --- 좌측 텍스트/아이콘 --- */
#ghq-main .section4 .left-col{
  position:absolute;
  left:1%;
  top: 4vw;
  color:#2B2B2B;
  z-index:2;
}
#ghq-main .section4 .customers{
  display:grid;
  grid-template-columns:repeat(2, minmax(120px,150px));
  gap: clamp(12px,2.4vw,28px);
  align-items:end;
  margin-bottom: clamp(20px,2.5vw,28px);
}
#ghq-main .section4 .customers .item{ display:grid; justify-items:center; gap:8px; }
#ghq-main .section4 .customers img{ width:min(120px,16vw); height:auto; display:block; }
#ghq-main .section4 .customers .label{
  font-size:clamp(16px,1.8vw,28px);
  font-weight:700;
  color:#3b3b3b;
}

/* 헤드라인 */
#ghq-main .section4 .headline{
  margin: clamp(76px,2vw,34px) 0 0;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-0.02em;
  font-size:clamp(28px,5.6vw,45px);
  color:#3b3b3b;
}

/* --- 우측 디바이스 묶음 --- */
#ghq-main .section4 .right-col{
  position:absolute;
  right:12%;
  top:-5%;
  width:min(880px,60vw);
  min-height:520px;
}
#ghq-main .section4 .mac{
  position:absolute;
  left:-10%;
  bottom:0;
  width:min(650px,48vw);
  height:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.18));
  z-index:1;
}
#ghq-main .section4 .phone{
  position:absolute;
  right:22%;
  bottom:-14%;
  width:min(230px,16vw);
  height:auto;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.22));
  z-index:2;
}

/* --- 우측 하단 문구 + 플랫폼 아이콘 --- */
#ghq-main .section4 .bottom-row{
  position:absolute;
  right:3%;
  align-items:flex-end;
  gap: clamp(20px,3.2vw,40px);
  z-index:3;
  top:13%;
}
#ghq-main .section4 .platform-word{ text-align:center; }
#ghq-main .section4 .platform-word p{
  margin:0;
  font-size:clamp(18px,2.2vw,32px);
  font-weight:800;
  line-height:1.4;
}

#ghq-main .section4 .platforms{
  display:grid;
  grid-auto-flow:column;
  gap: clamp(28px,0,24px);
  align-items:center;
  text-align:center;
  position: relative;
  bottom: -3vw;
  left: 5%;
}
#ghq-main .section4 .platforms .p-item{ display:grid; justify-items:center; gap:10px; }
#ghq-main .section4 .platforms img{ width:min(90px,0); height:auto; display:block; }
#ghq-main .section4 .platforms .p-label{
  font-weight:800;
  font-size:clamp(16px,1.8vw,28px);
  color:#3b3b3b;
}

@media (max-width: 1024px){
  #ghq-main .section4 .left-col{position: relative; left: -15%;}
  #ghq-main .section4 .right-col{left: 35%; top: -18%;}
  #ghq-main .section4 .bottom-row{right: -13%;}
  }


/* ===== 반응형(모바일) : 한 열로 스택 ===== */
@media (max-width:560px){
  #ghq-main .section4 .stage4{ height:auto; }

  #ghq-main .section4 .right-col{
    position: relative;            /* 겹침 기준 컨테이너 */
    width: 100%;
    height: clamp(360px, 88vw, 520px); /* 겹쳐 놓을 세로 공간 */
    margin: 12px auto 0;
    left: 40%;
    margin-bottom: -30%;
  }

  /* 맥북: 가운데, 아래에 깔림 */
  #ghq-main .section4 .mac{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(560px, 92vw);       /* 화면에 맞게 자동 축소 */
    height: auto;
    z-index: 1;
    filter: drop-shadow(0 22px 40px rgba(0,0,0,.18));
  }

  /* 아이폰: 가운데, 맥북 위로 살짝 올라오게 */
  #ghq-main .section4 .phone{
    position: absolute;
    left: 40%;
    bottom: clamp(18px, 9vw, 44px); /* 맥북 베젤 위로 살짝 */
    transform: translateX(-45%);
    width: min(180px, 40vw);       /* 비율 유지하며 축소 */
    height: auto;
    z-index: 2;
    top: 5%;                 
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.22));
  }

  #ghq-main .section4 .left-col,
  #ghq-main .section4 .bottom-row{ position:static; }
  #ghq-main .section4 .left-col{ text-align:center; margin-bottom:24px; }
  #ghq-main .section4 .customers{ justify-content:center; margin-bottom: -10%; }
  #ghq-main .section4 .right-col{ width:100%; min-height:0; }
  #ghq-main .section4 .mac{
    position:relative; left:auto; bottom:auto;
    width:min(720px,92%); margin:0 auto; display:block;
  }

  #ghq-main .section4 .stage4 .personalicon1 {
    width: 100%;
  }
  #ghq-main .section4 .stage4 .businessicon1 {
    width: 100%;
  }

  #ghq-main .section4 .bottom-row{
    margin-top:24px; justify-content:center;
  }
 #ghq-main .section4 .platforms {
    display: flex;                
    justify-content: center;      
    gap: 30px;
    left: -1%;                    
  }

  #ghq-main .section4 .platforms .p-item {
    text-align: center;            
  }

}

/* ===== 섹션 5: 이메일 전송 / PDF 문서 발급 ===== */
#ghq-main .section5{
  background:#E9F2FF;
  padding: clamp(56px,6vw,92px) 3vw;
}
#ghq-main .section5 .stage5{
  position: relative;
  width: min(1560px, 100%);
  margin: 0 auto;
  min-height: 680px;
}

/* ----- 왼쪽 카피 ----- */
#ghq-main .section5 .left{
  position: absolute;
  left: 1%;
  top: 4vw;
  color:#2B2B2B;
}
#ghq-main .section5 .headline{
  margin: 0 0 clamp(24px,2.6vw,36px) 0;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 6.2vw, 76px);
}
#ghq-main .section5 .bullets{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#ghq-main .section5 .bullet{
  display: flex; align-items: center; gap: 18px;
  font-size: clamp(18px, 2.3vw, 36px);
  font-weight: 800;
  color:#7A7A7A;
}
#ghq-main .section5 .bullet .icon{
  width: min(70px, 6vw); height: auto; flex: 0 0 auto;
}

/* ----- 오른쪽 비주얼 ----- */
#ghq-main .section5 .right{
  position: absolute;
  left: 35%;
  top: 1vw;
  width: min(980px, 64vw);
  height: 560px;
}
#ghq-main .section5 .screen{
  position: absolute; right: 1vw; top: 1vw;
  width: min(580px, 45vw);
  height: auto;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.18));
}

/* 확대 콜아웃 (탭/버튼) */
/* #ghq-main .section5 .callout-tabs{
  position: absolute; right: 30%; top: 14%;
  width: min(420px, 26vw);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.16));
} */
#ghq-main .section5 .callout-tabs{
  position: relative;
  width: min(250px, 76vw);
  height: auto;
  margin: 0 auto;
  left: 1%;
  top: -420%;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.16));
}
/* #ghq-main .section5 .callout-buttons{
  position: absolute; right: 30%; bottom: 10%;
  width: min(520px, 34vw);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.16));
} */
/* 3) 버튼 영역 콜아웃 */
#ghq-main .section5 .callout-buttons{
  position: relative;
  width: min(350px, 88vw);
  height: auto;
  margin: 0 auto;
  top: -220%;
  left: -5%;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.16));
}

/* 하단 파일 아이콘(XLSX, PDF) */
#ghq-main .section5 .file-icons{
  position: absolute; right: 10%; bottom: 14%;
  width: min(200px, 18vw);
  height: auto;

}

/* 클릭 손가락 아이콘 */
#ghq-main .section5 .click-finger {
  position: absolute;
  right: 50%;
  top: 70%;
  width: min(120px, 10vw);
  height: auto;
  z-index: 5;
}

/* ===== 반응형: 세로 스택 ===== */
@media (max-width:560px){
  #ghq-main .section5 .left, #ghq-main .section5 .right{ position: static; }
  #ghq-main .section5 .left{ text-align: left; margin-bottom: 28px; }
  #ghq-main .section5 .right{ width: 100%; height: auto; margin-bottom: -300px; }

  #ghq-main .section5 .stage5.autoscale{
    transform:none !important;
    height:auto !important;
  }

  #ghq-main .section5 .bullet {
  position: relative;
  left: 10%;
  align-items: center;
  }

  #ghq-main .section5 .bullet .icon {
    width: 12%;
  }

  #ghq-main .section5{
    padding: clamp(40px,7vw,56px) 4vw;
    min-height: 0;
  }

  /* 오른쪽 덩어리(화면+콜아웃+파일아이콘) 세로 스택 */
  #ghq-main .section5 .right{
    position: static;
    width: 100%;
    height: auto;
    display: grid;
    justify-items: center;
    row-gap: clamp(12px, 3.5vw, 18px);
  }

  /* 1) 상단 메인 스크린 */
  #ghq-main .section5 .screen{
    position: relative;
    width: min(460px, 92vw);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 18px 36px rgba(0,0,0,.18));
  }

  /* 2) 탭 확대 콜아웃 (화면 아래) */
  #ghq-main .section5 .callout-tabs{
    position: relative;
    width: min(250px, 76vw);
    height: auto;
    margin: 0 auto;
    left: 1%;
    top: -420%;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.16));
  }

  /* 3) 버튼 영역 콜아웃 */
  #ghq-main .section5 .callout-buttons{
    position: relative;
    width: min(350px, 88vw);
    height: auto;
    margin: 0 auto;
    top: -220%;
    left: -5%;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.16));
  }

  /* 4) 파일 아이콘 (엑셀/PDF) */
  /* #ghq-main .section5 .file-icons{
    position: relative;
    width: min(220px, 58vw);
    height: auto;
    top: -130%;
    left: 2%;
    margin: clamp(6px,2vw,10px) auto 0;
    filter: drop-shadow(8px 12px 5px rgba(0,0,0,.16));
  } */
  #ghq-main .section5 .file-icons{
    position: relative;
    width: min(220px, 58vw);
    height: auto;
    top: -130%;
    left: 2%;
    margin: clamp(6px,2vw,10px) auto 0;
    filter: drop-shadow(8px 12px 5px rgba(0,0,0,.16));
  }

  /* (선택) 클릭 손가락 아이콘을 쓰는 경우 */
  /* #ghq-main .section5 .click-finger{
    position: relative;
    width: min(100px, 26vw);
    height: auto;
    top: -500%;
    left: -5%;
    margin: 2px auto 0;
    z-index: 1;
  } */
  #ghq-main .section5 .click-finger{
    position: relative;
    width: min(100px, 26vw);
    height: auto;
    top: -500%;
    left: -5%;
    margin: 2px auto 0;
    z-index: 1;
  }
}

/* =============== 섹션 6: 즐겨찾기/주소 등록 =============== */
#ghq-main .section6{ background:#AFCDF6; padding:clamp(56px,6vw,88px) 3vw; }
#ghq-main .section6 .stage6{
  width:min(1560px,100%); margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(28px,3.5vw,64px); align-items:center; position: relative;
}
#ghq-main .section6 .visual{ position:relative; min-height:520px; }
#ghq-main .section6 .screen{ width:min(840px,100%); height:auto; display:block; filter:drop-shadow(0 22px 44px rgba(0,0,0,.18)); border-radius:16px; }
#ghq-main .section6 .modal{ position:absolute; right:-10%; bottom:-15%; width:min(420px,44%); height:auto; display:block; filter:drop-shadow(0 18px 32px rgba(0,0,0,.22)); border-radius:16px; }
#ghq-main .section6 .copy{ color:#0F3E8A; }
#ghq-main .section6 .copy .row-title{ display:flex; align-items:center; gap:clamp(8px,1.4vw,16px); margin-bottom:clamp(12px,1.8vw,18px); }
#ghq-main .section6 .copy .star{ margin-top:-10%; width:min(72px,6vw); height:auto; display:block; }
#ghq-main .section6 .title{ margin:0; font-weight:900; line-height:1.22; letter-spacing:-.02em; font-size:clamp(26px,4.8vw,60px); }
#ghq-main .section6 .title em{ color:#0B55C5; font-style:normal; }
#ghq-main .section6 .sub-note1{
  margin-top:clamp(8px,2vw,20px); margin-left:8%; display:inline-block; color:#fff;
  padding:clamp(18px,2.6vw,26px) clamp(24px,4vw,36px); font-weight:600; line-height:1.2; font-size:clamp(20px,3.8vw,48px);
}

@media (max-width:1024px){
  #ghq-main .section6 .stage6{
    grid-template-columns: 1fr;         
    row-gap: clamp(16px, 3vw, 28px);
    align-items: start;
  }
  #ghq-main .section6 .row-title{
    display: flex;
    align-items: center;   
    gap: 12px;
    justify-content: flex-start; 
  }
  #ghq-main .section6 .star{
    margin: 0;
    padding-top: 0;    
    width: min(60px, 6vw);
    height: auto;
    position: relative;
    top: 0;               
  }
}

@media (max-width:560px){
  #ghq-main .section6 .stage6{
    grid-template-columns: 1fr;       
    row-gap: clamp(16px, 3vw, 28px);
    align-items: start;
  }

  /* 비주얼(좌) – 오버레이 모달은 흐름으로 복귀 */
  #ghq-main .section6 .visual{
    min-height: 0;
  }
  #ghq-main .section6 .screen{
    width: min(880px, 96%);
    margin: 0 auto;
  }
  #ghq-main .section6 .modal{
    position: static !important;         
    right: auto; bottom: auto;
    width: min(520px, 86%);
    margin: clamp(12px, 2.4vw, 18px) auto 0;
    display: block;
  }

  /* 카피(우) – 중앙 정렬 & 여백 */
  #ghq-main .section6 .copy{
    text-align: center;
    padding: 0 4vw;
  }
  #ghq-main .section6 .row-title{
    flex-direction: column;       
    align-items: center;         
    justify-content: center;
    gap: clamp(8px, 2vw, 14px);    
    text-align: center;
    display: flex;
  }
  #ghq-main .section6 .star{
    position:static;             
    width: min(48px, 10vw);       
    margin:0 auto;  
    display: block;
  }

  #ghq-main .section6 .title{
    font-size: clamp(18px, 6.2vw, 32px);
    text-align: center;
    margin: 0;
    padding-top: 5%;
  }

  /* 큰 문구 박스 */
  #ghq-main .section6 .sub-note1{
    display: inline-block;
    font-size: clamp(22px, 4vw, 20px);
  }
}

@media (max-width:560px){
 #ghq-main .section6 .visual{
    position: relative;         
    min-height: 420px;              
  }

  #ghq-main .section6 .visual .screen{
    position: absolute;              
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, 84vw);        
    height: auto;
    display: block;
  }

  /* 앞쪽 모달 – 스크린 위로 살짝 내려 겹치기 */
  #ghq-main .section6 .visual .modal{
    position: absolute;             
    transform: translateY(30%); 
    width: min(250px, 64vw);
    height: auto;
    z-index: 2;                  
  }
}
/* =============== 섹션 7: 1회 등록으로 결제까지… =============== */
#ghq-main .section7{ background:#AFCDF6; padding:clamp(56px,6vw,88px) 3vw; }
#ghq-main .section7 .stage7{
  width:min(1560px,100%); margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(28px,3.5vw,64px); align-items:center; position:relative;
}
#ghq-main .section7 .copy{ color:#0F3E8A; }
#ghq-main .section7 .title-row{ display:flex; align-items:center; gap:clamp(8px,1.4vw,16px); margin-bottom:clamp(10px,1.6vw,14px); }
#ghq-main .section7 .star{ position:absolute; width:min(64px,5.4vw); height:auto; display:block; top:37%; }
#ghq-main .section7 .headline{ position:absolute; left:5%; font-weight:700; line-height:1.18; letter-spacing:-.02em; font-size:clamp(28px,5.2vw,60px); color:#103E7A; }
#ghq-main .section7 .subnote{ position:absolute; margin-top:clamp(80px,1.6vw,16px); left:5%; font-weight:900; color:#6B6B6B; font-size:clamp(18px,2.6vw,32px); }
#ghq-main .section7 .cc{ position:absolute; left:18%; top:-8%; width:min(200px,15vw); height:auto; filter:drop-shadow(0 18px 32px rgba(0,0,0,.18)); pointer-events:none; }
#ghq-main .section7 .visual{ position:relative; min-height:400px; }
#ghq-main .section7 .screen{ width:min(980px,100%); height:auto; display:block; filter:drop-shadow(0 26px 46px rgba(0,0,0,.20)); border-radius:18px; opacity:.95; }
#ghq-main .section7 .modal-back{ position:absolute; right:10%; top:16%; width:min(340px,34%); height:auto; display:block; opacity:.85; filter:drop-shadow(0 18px 36px rgba(0,0,0,.22)); }
#ghq-main .section7 .modal-front{ position:absolute; right:37%; top:20%; width:min(360px,36%); height:auto; display:block; filter:drop-shadow(0 22px 44px rgba(0,0,0,.26)); }

  @media (max-width:1024px){
  #ghq-main .section7 .ghq-zoom{
    height: auto;  
    margin-bottom: -30%;
  }

  #ghq-main .section7 .stage7{
    grid-template-columns: 1fr;         
    row-gap: clamp(16px, 3vw, 28px);
    align-items: start;
  }


  #ghq-main .section7 .copy{
    padding-top: 200px;
  }

  #ghq-main .section7 .star,
  #ghq-main .section7 .headline,
  #ghq-main .section7 .subnote{
    position: static !important;
    left: auto; top: auto;
    transform: none;
  }
  
   #ghq-main .section7 .subnote{
    position: relative;
    margin-top:-10px;
    margin-left:80px;
  }

  #ghq-main .section7 .cc{
    position: relative;
    top: -130%;
    left: 60%;
  }
   #ghq-main .section7 .visual{
    margin-top: -100px;
   }
}

  @media (max-width:560px){
  #ghq-main .section7 .stage7{
    grid-template-columns:1fr;    
    row-gap: clamp(16px, 3vw, 28px);
    height: auto;
    padding-bottom: 280px;
  }

  /* 절대배치 요소들 → 흐름으로 복귀 */
  #ghq-main .section7 .cc {width:100%; position:relative; left:auto; top:20%; margin:8px auto; }
  #ghq-main .section7 .star,
  #ghq-main .section7 .headline,
  #ghq-main .section7 .subnote{
    position: static !important;
    left: auto; top: auto;
    transform: none;
  }

  #ghq-main .section7 .copy{
    text-align:center;
    padding: 0 4vw;
  }

  #ghq-main .section7 .title-row{
    display: flex;
    gap: 6px;
    align-items: center;
  }

  /* 아이콘/텍스트 크기 & 간격 */
  #ghq-main .section7 .title-row .star{
    width: min(60px, 10vw);
    margin-right: 16px;
  }
  #ghq-main .section7 .headline{
    margin: clamp(6px, 1.8vw, 12px) 0 0;
    font-size: clamp(24px, 6vw, 36px);
    line-height: 1.25;
    margin-left: 3px;
  }
  #ghq-main .section7 .subnote{
    margin-top: clamp(6px, 1.8vw, 10px);
    font-size: clamp(14px, 3.6vw, 18px);
    margin-right: 56%;
  }
   #ghq-main .section7 .stage7 .cc{
    width: min(120px, 28vw) !important;
    margin: clamp(6px, 2vw, 12px) auto 0;
    position: static !important;
  }

  #ghq-main .section7 .visual{
    position:relative; 
    min-height:420px; 
    margin-top: 2%;

  }
  #ghq-main .section7 .screen{
    width:min(460px, 90%);
    margin:0 auto;
    display:block;
  }
  #ghq-main .section7 .modal-back,
  #ghq-main .section7 .modal-front{
    position:absolute; 
    width:min(260px, 70%); 
    height:auto;
    display:block;
    left:50%; 
    transform:translateX(-50%);
  }
  #ghq-main .section7 .modal-back{
    top:18%; 
    opacity:0.85;
  }
  #ghq-main .section7 .modal-front{
    top:28%;
    z-index:2;
    width: min(250px, 50vw);
  }

  /* 가운데 장식 카드 아이콘 위치 */
  #ghq-main .section7 .cc{
    position: static !important;
    margin: clamp(6px, 2vw, 12px) auto 0;
    width: 60%;
  }

  #ghq-main .section7 .headline{
    font-size: clamp(20px, 7vw, 24px);
    letter-spacing: -0.01em;
    line-height: 1.28;
  }
  #ghq-main .section7 .subnote{
    font-size: clamp(13px, 3.8vw, 16px);
  }
  #ghq-main .section7 .title-row{
    gap: 5px;
  }
  #ghq-main .section7 .star{
    width: 30px;
  }
  #ghq-main .section7 .subnote {margin: 0 auto; position: absolute; right: 20%; top: -3%;}
}

/* =============== 섹션 8: 거래처/톡방/간편접수 =============== */
#ghq-main .section8{ background:#F3F7FC; padding:clamp(60px,6vw,100px) 3vw; }
#ghq-main .section8 .stage8{
  width:min(1560px,100%); margin:0 auto; display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(28px,3.5vw,64px); align-items:center;
}
#ghq-main .section8 .phone{ width:min(300px,85%); height:auto; display:block; margin:0 20%; filter:drop-shadow(0 18px 36px rgba(0,0,0,.18)); }
#ghq-main .section8 .companybadges{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.8vw,40px); align-items:center; margin:0; }
#ghq-main .section8 .badge3{ display:flex; justify-content:center; align-items:center; }
#ghq-main .section8 .badge3 img{ width:100%; max-width:390px; height:auto; display:block; filter:drop-shadow(0 12px 26px rgba(0,0,0,.12)); }

/* =============== 섹션 8 (모바일 반응형 커스텀) =============== */
/* =============== 섹션 8 (모바일 전용: 폰 고정 + 배지 가로 스와이프) =============== */
@media (max-width: 560px){


  /* 전체 레이어 기준점 */
  #ghq-main .section8 .stage8{
    position: relative;
    display: block;          
    height: auto;
    padding-bottom: 700px;
  }

  /* 휴대폰: 화면 상단 좌측 고정(스크롤해도 섹션 내 위치 유지) */
  #ghq-main .section8 .phone{
    position: absolute;
    left: 6%;
    top: 24px;
    width: min(250px, 76vw);
    margin: 0;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.16));
    z-index: 1;              
    pointer-events: none;    
  }

  /* 배지 트랙: 가로 스와이프 + 스냅 */
  #ghq-main .section8 .companybadges{
    position: absolute;
    left: 0; right: 0;
    top: 40%;                
    display: flex;
    gap: 16px;
    padding: 0 20px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    align-items: center;
    z-index: 1;             
  }

  /* 스크롤바 미니멀 */
  #ghq-main .section8 .companybadges::-webkit-scrollbar{ height: 8px; }
  #ghq-main .section8 .companybadges::-webkit-scrollbar-thumb{
    background:#d6deea; border-radius: 8px;
  }

  /* 개별 배지 카드: 한 장씩 중앙에 ‘딱’ 스냅 */
  #ghq-main .section8 .badge3{
    flex: 0 0 72vw;          
    max-width: 300px;
    aspect-ratio: 1 / 1;     
    display: grid;
    place-items: center;
    scroll-snap-align: center;
    background: transparent;  
  }

  /* 배지 이미지 */
  #ghq-main .section8 .badge3 img{
    width: 100%;
    height: auto;
    display: block;
    max-width: none;
  }
}


/* =============== 섹션 9: 차량 뷰어 =============== */
#ghq-main .vehicle-section{ background:#F5FAFF; padding:clamp(10px,2vw,40px) 3vw; overflow: hidden; }
#ghq-main .vehicle-stage{ max-width:1700px; height: 700px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,60px); align-items:center; }

#ghq-main .vehicle-info{
  background:#fff; border-radius:18px; width:350px; height:500px; position:absolute;
  box-shadow:0 10px 30px rgba(10,40,90,.08); padding:clamp(20px,2vw,32px); color:#1d1f24;
}
#ghq-main .vehicle-info .accent{ color:#2E74FF; }
#ghq-main .info-title{ margin:0 0 16px; font-size:clamp(22px,3.6vw,32px); line-height:1.15; }
#ghq-main .info-heading{ margin:18px 0 8px; color:#2E74FF; font-size:clamp(18px,2.2vw,26px); }
#ghq-main .info-desc{ margin:0; font-size:clamp(16px,1.8vw,22px); line-height:1.5; }
#ghq-main .divider{ height:1px; background:#E7EEF7; margin:16px 0; }

#ghq-main .viewer{ position:relative; left: 65%; text-align:center; margin:0 auto; touch-action: pan-y; }
#ghq-main .vehicle-name{ margin:0 auto; font-size:clamp(26px,4.5vw,54px); letter-spacing:-.02em; }
/* #ghq-main .vehicle-img{ max-width:min(720px,68vw); width:740px; height:100%; display:block; margin:clamp(6px,1.4vw,14px) auto 0; filter:drop-shadow(0 16px 32px rgba(0,0,0,.18)); } */
#ghq-main .vehicle-img{ max-width:min(720px,68vw); width:720px; height:80%; display:block; margin:clamp(6px,1.4vw,14px) auto 0; filter:drop-shadow(0 16px 32px rgba(0,0,0,.18)); } 

#ghq-main .nav{ position:absolute; top:50%; transform:translateY(-50%); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#ghq-main .nav:hover{ transform:translateY(-50%) scale(1.06); }
#ghq-main .nav.left{ left:-8%; }
#ghq-main .nav.right{ right:-8%; }

#ghq-main .peek{ position:absolute; bottom:10%; width:min(320px,22vw); height:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.1)); pointer-events:none;}
#ghq-main .peek-right{ right:-60%; }
#ghq-main .peek-left{ left:6%; display:none; }

#ghq-main .cta{
  display:inline-block; margin-top:clamp(18px,2.6vw,26px);
  font-size: 18px;
  padding:clamp(14px,1.8vw,18px) clamp(28px,4vw,46px); border-radius:999px; background:#fff; color:#2E74FF; font-weight:900; text-decoration:none; box-shadow:0 16px 26px rgba(0,0,0,.1);
}
#ghq-main .cta:hover{ transform:translateY(-2px); }

@media (max-width:1024px){
  #ghq-main .vehicle-section {
    padding-bottom:170px;
  }
  #ghq-main .vehicle-stage{
    grid-template-columns: 1fr; height: auto; row-gap: clamp(16px,3vw,24px);
  }
  #ghq-main .vehicle-info{
    position: relative; width: 100%; max-width: 520px; height: 350px; margin: 0 auto;
  }
  #ghq-main .viewer{
    left: -20%; margin: 30px auto 0; width: 100%; max-width: 860px;
  }
  #ghq-main .vehicle-img{ width: min(680px, 78vw); height: auto; }
  #ghq-main .nav.left{ left: -3%; }
  #ghq-main .nav.right{ right: -3%;}

}
@media (max-width:560px){
  #ghq-main .vehicle-stage{ grid-template-columns:1fr; row-gap: 20px;
 }
 /* 정보카드: 좌우 고정 해제, 가운데 정렬 */
  #ghq-main .vehicle-info{
    position: relative;      
    width: 100%;
    max-width: 420px;
    height: auto;             
    margin: 0 auto;         
  }

   #ghq-main .viewer{
    position: relative;
    left: auto;              
    margin: 16px auto 0;
    width: 100%;
    max-width: 640px; 
  }
  
  /* 화살표 크기/터치 영역 살짝 키우기(선택) */
  #ghq-main .nav{
    padding: 8px;
  }

  #ghq-main .nav.left{ left:-1%; } 
  #ghq-main .nav.right{ right:-1%; }
  #ghq-main .peek{ display:none; }
  #ghq-main .cta{font-size: 15px;}
}

/* =============== Q&A Section =============== */
#ghq-main .section-faq{ background:#FBFBFB; padding:clamp(40px,6vw,96px) 3vw; }
#ghq-main .faq-container{ max-width:1100px; margin:0 auto; }
#ghq-main .faq-eyebrow{ margin:0 0 8px; text-align:center; color:#6b7280; font-size:clamp(14px,2.4vw,24px); }
#ghq-main .faq-title{ margin:0 0 clamp(24px,4vw,36px); text-align:center; color:#2E74FF; font-size:clamp(22px,5.2vw,36px); font-weight:900; }

/* Accordion */
#ghq-main .accordion{ list-style:none; padding:0; margin:0; border-top:1px solid #E5EAF2; }
#ghq-main .acc-item{ border-bottom:1px solid #E5EAF2; }
#ghq-main .acc-summary{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:clamp(14px,2.8vw,22px) clamp(10px,2vw,14px); background:#fff; border:0; font:inherit; text-align:left; cursor:pointer;
}
#ghq-main .acc-summary:focus-visible{ outline:3px solid rgba(46,116,255,.3); outline-offset:2px; }
#ghq-main .q-badge{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#EAF1FF; color:#2E74FF; font-weight:800; font-size:20px; }
#ghq-main .a-badge{ color:#6b7280; font-size:16px; font-weight:800; }
#ghq-main .acc-question{ color:#111827; font-weight:800; font-size:clamp(16px,3.3vw,22px); letter-spacing:-.01em; }
#ghq-main .acc-caret{ width:20px; height:20px; border-right:3px solid #B4BCCB; border-bottom:3px solid #B4BCCB; transform:rotate(-45deg); transition:transform .2s ease; }
#ghq-main .acc-summary[aria-expanded="true"] .acc-caret{ transform:rotate(135deg); }
#ghq-main .acc-panel{
  box-sizing: border-box;
  max-height: 0;
  display:grid; grid-template-columns:1fr;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  padding:0 clamp(10px,2vw,14px) clamp(18px,3vw,22px) calc(36px + 16px + 10px);
  font-size:clamp(14px,2.8vw,18px); color:#374151; line-height:1.65; max-height:0; overflow:hidden; transition:max-height .28s ease, padding .2s ease, opacity .2s ease;
}
#ghq-main .acc-panel.open{ padding-top:8px; padding-bottom: clamp(18px, 3vw, 22px); opacity: 1;}
@media (max-width:560px){
  #ghq-main .acc-summary{ gap:12px; }
  #ghq-main .acc-panel{ padding-left:calc(36px + 12px + 6px); }
}

/* 플로팅 배너 / 3가지 */
.float-banner {
  position: fixed;
  right: 20px;
  bottom: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}
.float-banner img {
  display: block;
  width: 100px;
  height: auto;
}

/* 기본(데스크톱): 전화/카톡 숨김 → 온라인만 보임 */
.float-banner .ghiblicall {
  display: none;
}

/* 데스크톱에서 카톡까지 숨기고, 전화도 숨기면 → 온라인만 노출됨 */
@media (min-width: 821px){
  .float-banner .kakao { display: none; }
}

/* 모바일(≤820px): 세 개 다 보임, DOM 순서대로 (온라인 → 전화 → 카톡) */
@media (max-width: 820px){
  .float-banner .ghiblicall,
  .float-banner .kakao {
    display: block;
  }
  .float-banner {
    right: 1px;
  }
  .float-banner img {
    width: 60px;
  }
}