@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
#bo_v > header {
  display: none;
}

/* --------------- PC modal start-------------- */
.modal_open_btn {
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.7);

  z-index: 9999999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.modal_iner {
  width: 60vw;
  background: #fff;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;

  border-radius: 2vw;
  padding: 2vw;
}

.modal.on_modal {
  opacity: 1;
  visibility: visible;
}

.modal_hd {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: var(--headM);
  font-weight: 600;
  margin-bottom: 2vw;

  width: 100%;
}

.modal_body {
  width: 100%;
  height: 60vh;
  overflow-y: scroll;
  font-size: var(--bodyM);
  line-height: 1.5;
}

/* 항 사이 여백 — 연속 <br> 대신(css-check 차단) */
.policy-section-gap {
  display: block;
  height: 1em;
}

.modal_close {
  width: 100%;
  height: 2vw;
  background: #000;
  color: #fff;
  font-size: var(--bodyL);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1vw;
  cursor: pointer;
  margin-top: 2vw;
  font-weight: 500;
}

/* ---------------quick start-------------- */
/* 고정 상담바 — 전 페이지 공통. 시안 crop main 10989~11075 */
.quick {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  box-sizing: border-box;
  height: calc(var(--px) * 84);
  background: var(--c-blue);
  z-index: 9000;
  /* 상속: 바 안 텍스트는 전부 SUIT */
  font-family: var(--font-suit);
  font-weight: 400;
  letter-spacing: -0.05em;
}

/* 시안은 중앙정렬이 아니다 — 좌측 인물·말풍선 자리를 비우려 폼이 우측으로 치우쳐 있다(첫 입력 x551.5) */
/* 모바일 스크롤 게이지 — 바탕은 .quick 이 깔고(모바일에서 민트로 전환) 파랑이 이 위로
   좌→우 차오른다. 채움량은 GSAP(ani_quickBar)이 clip-path 로 소유하고, 초기 = 0%.
   position/inset 은 .absol.inset-0 유틸 소유. PC 는 .mobile 유틸이 display:none.
   ★ 왜 별도 요소인가 — ::before 였으면 GSAP 이 직접 트윈할 수 없다(의사요소는 CSS
   변수 우회가 필요). 실요소로 두면 fill 아이콘과 같은 clip-path 트윈을 그대로 쓴다. */
.quick__progress {
  background: var(--c-blue);
  clip-path: inset(0 100% 0 0);
}

/* 게이지가 absol = positioned 라 그냥 두면 폼·버튼 위로 칠해진다 → 내용을 위로 올린다
   (.quick__chat 은 이미 z-index:1) */
.quick__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding-left: calc(var(--px) * 551.5);
  gap: 0;
}

.quick__form {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 7);
}

.quick__input {
  box-sizing: border-box;
  min-width: 0;
  width: calc(var(--px) * 217);
  height: calc(var(--px) * 52);
  padding: 0 calc(var(--px) * 17);
  background: #fff;
  border: 0;
  border-radius: calc(var(--px) * 10);
  font-family: inherit;
  font-size: var(--bodyXL);
  letter-spacing: inherit;
  color: #000;
}

.quick__input::placeholder {
  color: #000;
}

.quick__agree {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3);
  margin-left: calc(var(--px) * 22);
  cursor: pointer;
}

.quick__agree-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quick__agree-mark {
  display: block;
  box-sizing: border-box;
  width: calc(var(--px) * 21);
  height: calc(var(--px) * 21);
  background: #fff;
  border-radius: 50%;
}

.quick__agree-input:checked + .quick__agree-mark {
  border: calc(var(--px) * 4) solid #fff;
  background: var(--c-blue);
}

/* aura 후광색 = 버튼 배경색(q_btn.webp = 흰 버튼). margin 은 래퍼가 소유한다 —
   버튼에 두면 래퍼 안쪽에 갇혀 빛 테두리가 그만큼 벌어진다(library.css .aura 주석).
   ★ --aura-radius 필수 — ::before/::after 의 border-radius:inherit 이 상속하는 건
   "버튼 모양"이 아니라 래퍼 자신의 radius 다. 기본값 999px 은 pill CTA 전용이고,
   이 버튼은 pill 이 아니라 코너 6px 라운드 사각형이라(q_btn.webp 218×55 알파 실측:
   상단 들여쓰기 6px, pill 이면 27.5px) 기본값을 쓰면 후광만 알약으로 부푼다. */
.aura:has(> .quick__submit) {
  --aura: 255 255 255;
  --aura-radius: calc(var(--px) * 6);
  margin-left: calc(var(--px) * 17);
}

/* 빠른상담 버튼 — q_btn.webp 를 CSS 로 대체(2026-08-06). 이미지는 코너가 6px 인데
   aura 후광 radius 와 계속 어긋났고, 글자도 spec 상 웹폰트라 CSS 재현이 정확하다.
   폰트 6속성 = spec.json texts[0].segments[0] 실측(Pretendard / 700 / 23.78px →
   --subheadM(24px) 스냅 / #001c7f = --c-blue / letter-spacing -0.05em).
   .quick 이 상속시키는 SUIT 를 여기서만 끊는다. display 는 마크업의 .flex-cc 소유.
   크기(width·aspect-ratio)는 아래 IMG:AUTO quick 블록이 계속 소유한다. */
.quick__submit {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: calc(var(--px) * 6);
  background: var(--c-white);
  font-family: var(--font-pretendard);
  font-size: var(--subheadM);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--c-blue);
  cursor: pointer;
}

/* 좌측 인물·말풍선 — 바 위로 bleed */
.quick__chat {
  position: absolute;
  left: calc(var(--px) * 259);
  /* 인물 하단이 바 밑변보다 2px 위에서 끝난다(spec q_img 10908+163=11071 < 바 11073) */
  bottom: calc(var(--px) * 2);
  display: flex;
  align-items: flex-end;
  z-index: 1;
  pointer-events: none;
}

.quick__chat-bubble {
  display: block;
  margin-bottom: calc(var(--px) * 37);
}

.quick__chat-person {
  display: block;
  margin-left: calc(var(--px) * 17);
}

/* 우측 플로팅 — 바와 독립된 fixed 레이어 */
.quick__float {
  position: fixed;
  right: calc(var(--px) * 90.5);
  bottom: calc(var(--px) * 137);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 10);
  z-index: 9100;
}

/* 3D 아이콘 — 민트 육각형 위에 흰 아이콘. 채움 모션은 애니 phase 소관.
   position/display 는 마크업의 .rltv.flex-cc 유틸 소유 — 겹치는 두 벌의 정렬은
   부모가 갖는다. fill-wrap 은 .absol 만 붙이고 top/left 를 안 줘서 flex 의
   static-position 중앙정렬을 그대로 받는다(수치 앵커로 맞추지 않는다) */
.quick__float-icon {
  line-height: 0;
}

/* 두 wrap 다 부모 폭을 물려받아야 한다 — flex item(line-wrap)·absol(fill-wrap) 은
   기본이 shrink-to-fit 이라 그냥 두면 img 자연폭 68px 로 굳어 --px 스케일이 죽는다 */
.quick__float-icon-fill-wrap,
.quick__float-icon-line-wrap {
  width: 100%;
}

/* 초기 = 비어 있음. GSAP(ani_quickFloat)이 스크롤 진행률로 inset 하단을 걷어낸다.
   JS 가 죽어도 "가득 찬 상태"로 남지 않게 CSS 가 빈 상태를 소유한다.

   margin-left = 에셋 오프셋 보정이지 정렬 핵이 아니다. 두 webp 는 캔버스가 68×78 로
   같은데 그려진 육각형 중심이 다르다(실측: line 33.50 / fill 34.50 = fill 이 1px
   오른쪽). 부모 .flex-cc 는 "캔버스"를 겹쳐줄 뿐이라 그림끼리는 계속 어긋난다 →
   캔버스 정렬은 부모가 갖고, 그림 차이만 여기서 뺀다. -1 = 실측 중심차 그대로(유저
   육안 확정). 에셋을 다시 뽑아 두 그림의 중심이 맞으면 지울 값.
   ★ 이 보정은 wrap 이 아니라 img 가 가져야 한다 — wrap 은 .absol 이라 left 가 auto,
   그 static-position 을 부모 flex 의 center 가 계산하는데 거기에 margin 을 주면
   마진박스 폭이 함께 줄어 center 가 절반을 되돌려준다(실측 -2 지정 → 실효 -1). */
.quick__float-icon-fill {
  clip-path: inset(100% 0 0 0);
  margin-left: calc(var(--px) * -1);
}

.quick__float-icon img {
  display: block;
  width: 100%;
}

/* 흰 윤곽이 민트 채움 위에 와야 한다(fill-wrap 이 absol = positioned 라 그냥 두면
   나중에 칠해져 윤곽을 덮는다) */
.quick__float-icon-line {
  position: relative;
  z-index: 1;
}

.quick__totop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--px) * 68);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sc);
  font-family: var(--font-pretendard);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #000;
  cursor: pointer;
}

.quick__totop-arrow {
  display: block;
  font-size: var(--bodyL);
  line-height: 1;
}

.quick__totop-text {
  display: block;
  font-size: var(--bodyL);
  line-height: 1;
}

/* ---------------footer start-------------- */
/* 시안 crop main 11075~11519 (h444) */
.footer {
  width: 100%;
  background: #000;
  /* 상속: 3개 텍스트가 공유. 폰트 6속성은 FONT:AUTO 블록 소유라 여기 두지 않는다 */
  text-align: center;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--px) * 96);
  /* 시안값 70 + 고정 상담바(.quick) 84 — 안 더하면 카피라이트가 바에 가린다 */
  padding-bottom: calc(var(--px) * 154);
}

.footer__logo {
  display: block;
}

.footer__divider {
  width: 100%;
  height: 1px;
  margin-top: calc(var(--px) * 57);
  background: #2e2e2e;
}

/* 폰트 6속성 = FONT:AUTO footer 블록. 여기는 간격만 소유 */
.footer__info {
  margin-top: calc(var(--px) * 52);
}

/* 대표번호 tel: · 제작사 링크 — 푸터 정보문과 같은 톤(색·밑줄 없음)으로 붙는다 */
.footer__info a,
.footer__vweb a {
  color: inherit;
  text-decoration: none;
}

.footer__copy {
  margin-top: calc(var(--px) * 17);
}

/* FONT:AUTO footer */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.footer__info {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #ffffff;
}

.footer__copy {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.75;
    color: #b2b2b2;
}

.footer__vweb {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.75;
    color: #b2b2b2;
}
/* /FONT:AUTO footer */

/* FONT:AUTO quick */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.quick__agree-label {
    font-family: var(--font-suit);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 10.82;
    color: #ffffff;
}
/* /FONT:AUTO quick */


/* FONT:AUTO 보정 — spec 의 lineHeight 10.82 는 PSD leading 이상값이다.
   단일 줄 + flex 정렬이라 그대로 쓰면 박스가 196px 로 부푼다. 행간만 되돌린다. */
.quick__agree-label {
  line-height: 1;
}

/* copy·vweb 은 시안에서 연속 2줄(글리프 330→354 = 24px)이다.
   spec 의 1.75(28px)는 PSD 레이어별 leading 이라 두 줄이 4px 벌어진다. */
.footer__copy,
.footer__vweb {
  line-height: 1.5;
}

/* ---------------mobile-------------- */

/* IMG:AUTO footer */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.footer__logo {
    width: calc(var(--px)*258);
    aspect-ratio: 258 / 47;
}
/* /IMG:AUTO footer */

/* IMG:AUTO quick */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.quick__submit {
    width: calc(var(--px)*218);
    aspect-ratio: 218 / 55;
}

.quick__chat-bubble {
    width: calc(var(--px)*136);
    aspect-ratio: 136 / 92;
}

.quick__chat-person {
    width: calc(var(--px)*106);
    aspect-ratio: 106 / 163;
}

.quick__float-icon {
    width: calc(var(--px)*68);
    aspect-ratio: 68 / 78;
}

.quick__totop {
    width: calc(var(--px)*68);
    aspect-ratio: 68 / 78;
}
/* /IMG:AUTO quick */

@media screen and (max-width: 599px) {
  /* --------------- MO modal start-------------- */
  .modal_iner {
    width: 93vw;
    border-radius: 4vw;
    padding: 6vw;
    box-sizing: border-box;
  }

  .modal_hd {
    margin-bottom: 6vw;
  }

  .modal_body {
    height: 60vh;
    line-height: 1.6;
  }

  .modal_close {
    height: 8vw;
    border-radius: 2.8vw;
    margin-top: 6vw;
  }

  /* 바탕 = 진회색. 파랑(.quick__progress)이 스크롤만큼만 덮는다(PC 는 통 파랑 유지).
     ★ 왜 민트가 아니라 진회색인가 — 바 안 텍스트(.quick__call·.quick__agree-label)가
     게이지 경계를 가로질러 두 배경 위에 동시에 놓인다. 흰 글씨는 파랑 위가 기준인데
     바탕까지 민트면 그 구간에서 흰 글씨가 쨍하고 눈이 아프다(유저 판정). 바탕을 어둡게
     두면 흰 글씨 하나로 두 구간 대비가 모두 산다. 민트는 게이지가 아니라 CTA(빠른상담
     버튼 후광·TOP 버튼)가 계속 쓰므로 바에서 빠져도 브랜드색은 유지된다. */
  .quick {
    height: auto;
    padding: 2.7vw 3vw;
    background: #33363d;
  }

  /* ── quick 한정 aura 상시발광 ────────────────────────────────────────────
     library.css 의 .aura 는 후광 일체(color/conic-gradient/::before·::after/animation)가
     @media (hover:hover) 안 + :hover 에서만 켜진다. 터치 기기엔 그 블록이 통째로
     적용되지 않아 `color` 만 켜봐야 그릴 배경 자체가 없다 → 여기서 규칙을 재현한다.
     library.css 를 고치지 않는 이유 = 전역 CTA 전부가 상시 회전하게 되기 때문
     (CLAUDE.md 코어 라이브러리 변경 지양). @property --aura-angle / @keyframes aura 는
     library.css 전역 선언이라 그대로 재사용한다. 상자 규칙(inline-block/relative/
     padding/radius/자식 z-index)도 미디어쿼리 밖이라 이미 적용돼 있다. */
  .quick .aura {
    color: rgb(var(--aura));
    background-image: conic-gradient(from var(--aura-angle, 0deg), transparent 225deg, currentColor);
    animation: aura var(--aura-duration, 6s) linear infinite;
  }

  .quick .aura::before,
  .quick .aura::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform 이 아니라 translate 속성 — keyframes 의 translateZ 와 자리를 다투지 않는다 */
    translate: -50% -50%;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: inherit;
    background-image: inherit;
    animation: inherit;
    opacity: 0.7;
    filter: blur(0.4rem);
    pointer-events: none;
  }

  .quick .aura::after {
    opacity: 0.3;
    filter: blur(1.6rem);
  }

  .quick__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1.5vw 1vw;
    width: 100%;
    height: auto;
    padding-left: 0;
  }

  .quick__form {
    display: contents;
  }

  .quick__call {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: start;
    align-items: center;
    font-size: var(--bodyM);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
  }

  .quick__input {
    grid-row: 2;
    width: 100%;
    height: 10.6vw;
    padding: 0 1.5vw;
    border-radius: 2vw;
    font-size: var(--bodyS);
  }

  .quick__input--name {
    grid-column: 1;
  }

  .quick__input--tel {
    grid-column: 2;
  }

  .quick__input--email {
    grid-column: 3;
  }

  /* grid 셀은 래퍼가 차지한다 — 버튼을 span.aura 로 감싸면 grid item 이 래퍼로 바뀐다.
     .aura 기본은 width:fit-content(부모 stretch 끊기용)라 셀 폭을 채우려면 되돌린다.
     버튼이 pill 이 아니라 2vw 각이라 --aura-radius 로 빛 테두리 모양을 맞춘다. */
  .aura:has(> .quick__submit) {
    --aura-radius: 2vw;
    grid-column: 4;
    grid-row: 2;
    width: 100%;
    margin-left: 0;
  }

  /* 흰 배경·Pretendard·남색 글자는 PC 규칙에서 상속받는다 — 여기선 모바일에서 달라지는
     것만(셀 폭 채움 / 높이 / radius / 글자크기). 게이지가 좌→우로 지나가며 버튼 밑을
     진회색→파랑으로 갈아치우는데 흰 배경이라야 두 구간 모두에서 대비가 산다. */
  .quick__submit {
    width: 100%;
    height: 10.6vw;
    border-radius: 2vw;
    font-size: var(--bodyS);
  }

  .quick__agree {
    grid-column: 3 / 5;
    grid-row: 1;
    justify-self: end;
    gap: 1vw;
    margin-left: 0;
  }

  .quick__agree-mark {
    width: 4.2vw;
    height: 4.2vw;
  }

  .quick__agree-label {
    font-size: var(--bodyS);
    white-space: nowrap;
  }

  /* 장식 — 모바일 폭에서 자리가 없다 */
  .quick__chat {
    display: none;
  }

  .quick__float {
    right: 4vw;
    bottom: 29vw;
    gap: 2.1vw;
  }

  .quick__float-icon {
    display: none;
  }

  .quick__totop {
    width: 13.3vw;
    height: 13.3vw;
  }

  .quick__totop-arrow,
  .quick__totop-text {
    font-size: var(--bodyM);
  }

  .footer__inner {
    padding-top: 12.8vw;
    padding-bottom: 34vw;
  }

  .footer__logo {
    width: 40vw;
  }

  .footer__divider {
    margin-top: 8vw;
  }

  .footer__info {
    margin-top: 8vw;
    padding: 0 6.4vw;
    font-size: var(--bodyM);
  }

  .footer__copy {
    margin-top: 5.3vw;
  }
}