@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;
}

/* 개인정보처리방침 모달 — privacy-modal 스킬 규격
   구조: .modal.prtd > .modal_iner > .modal_hd / .modal_body > .policy_text / .modal_close
   트리거: 아무 요소에나 .modal_open_btn 만 붙이면 동작 (footer.js 가 위임) */
/* --------------- PC modal start-------------- */
.modal_open_btn {
    cursor: pointer;
}

/* 문구 일부만 트리거로 쓸 때(폼 동의문 등) — 주변 텍스트 스타일을 그대로 상속하고 밑줄만 얹는다 */
.modal_open_btn--link {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

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

    /* 스킬 규격의 .prtd 클래스는 프로젝트에 따라 없을 수 있어 여기서 직접 지정한다 */
    font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif;

    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: 1.4vw;
    font-weight: 600;
    margin-bottom: 2vw;

    width: 100%;
}

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

.policy_text p + p {
    margin-top: 1.4em;
}

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

/* --------------- MO modal start-------------- */

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

.footer__top-icon {
    width: calc(var(--px)*45);
    aspect-ratio: 45 / 45;
}
/* /IMG:AUTO footer */

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

.quick__call-icon {
    width: calc(var(--px)*31);
    aspect-ratio: 31 / 31;
}

.quick__submit-img {
    width: calc(var(--px)*175);
    aspect-ratio: 175 / 42;
}
/* /IMG:AUTO quick */

#policyWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  position: absolute;
  left: 50%;
  z-index: 2000;
  height: 50px;
  margin-left: -50px;
  background: #fff;
  text-align: center;
  border-radius: 5px;
}

#policy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  position: relative;
  height: 87%;
  margin: 0 auto;
  padding: 1px;
  text-align: left;
}

#policy div.policy_title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  height: auto;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 0vw;
}

#policy div.policy_title h2 {
  font-weight: 700;
  font-size: 25px;
  color: #000;
}

#policy div.policy_con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2.5vh;
  /* padding: 20px 0px 20px 0px; */
  background: #fff;
  border-radius: 0px;
  height: 80%;
}

#policy p.policy_text {
  overflow-y: scroll;
  height: 100%;
  padding-right: 20px;
  font-size: 14px;
  text-align: justify;
  line-height: 18px;
}

#policyLoader {
  padding-top: 10px;
}

@font-face {
  font-family: "GmarketSansBold";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* ---------------footer start-------------- */
.footer {
  width: 100%;
  background-color: #fafafa;
}

/* footer 는 전역 `section img{width:100%}` 밖이라 폭을 직접 준다 — 폭 0 이면 lazy 교차판정이
   성립 안 해 로드가 영영 안 걸린다. display:block 은 inline baseline 갭이 래퍼를 +7px 밀어내는 것 차단 */
.footer__logo img,
.footer__top-icon img {
  display: block;
  width: 100%;
}

.footer_iner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--px) * 102) 0 calc(var(--px) * 92) 0;
}

/* 아래 margin 은 정본 간격(잉크 bbox 기준 31/40/37/96)에서 각 텍스트의 half-leading 을
   뺀 값이다 — line-box(30.08/49.91/24.95)가 잉크(18/42/17)보다 크므로 그대로 쓰면 27.94px 누적 초과 */
.footer__policy {
  margin-top: calc(var(--px) * 25);
  border: 0;
  padding: 0;
  text-decoration: underline;
}

.footer__info {
  margin-top: calc(var(--px) * 30);
}

.footer__copyright {
  margin-top: calc(var(--px) * 29);
  opacity: .502;
}

.footer__top-btn {
  position: fixed;
  right: calc(var(--px) * 4);
  bottom: calc(var(--px) * 89.5);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0;
}
/* ---------------footer end-------------- */
/* ---------------quick start-------------- */
.quick {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1111;
  background-color: #2e201a;
}

.quick_iner {
  display: flex;
  justify-content: center;
  align-items: center;
  /* .front 의 width:100% 에 padding-left 180 이 content-box 로 더해져 2100 이 되던 것 차단 */
  box-sizing: border-box;
  /* 상하 합 38 유지(바 80) · 시안 크롭이 상단 footer 를 2.5px 물고 있어 콘텐츠 기준선이 19.5 다 */
  padding: calc(var(--px) * 19.5) 0 calc(var(--px) * 18.5) calc(var(--px) * 180);
  overflow: visible;
}

/* FONT:AUTO 가 spec 원값을 그대로 냈으나 line-box 가 바 높이(콘텐츠 42 + padding 38 = 80)를 밀어올린다.
   잉크 높이는 폰트가 정하므로 정본 h 는 그대로 두고 line-box 만 42 안으로 내린다.
   agree-label 의 5.94 는 spec texts[5].lineHeight 5.937 로, 같은 섹션 다른 텍스트(1.15~1.88) 대비 이상값이다 */
/* FONT:AUTO 관리블록이 파일 뒤(605행)라 같은 특정도로는 덮인다 — 부모를 얹어 특정도로 이긴다 */
.quick .quick__call-num {
  line-height: 1;
}

.quick .quick__agree-label {
  line-height: 1.2;
}

.quick img {
  display: block;
  width: 100%;
}

.quick__bowl {
  position: absolute;
  left: calc(var(--px) * 282);
  bottom: 0;
}

.quick__call {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3);
  text-decoration: none;
}

.quick__form {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 12.5);
  margin-left: calc(var(--px) * 22);
}

.quick__input {
  width: calc(var(--px) * 175);
  height: calc(var(--px) * 42); /* HEIGHT: 승인 완료 — spec rects[1..3] 폼 컨트롤 175×42 고정 */
  /* spec 역산: 텍스트 x790 − 박스 716 = 74 = (175−27)/2 → placeholder 는 가운데 정렬이다 */
  padding: 0;
  text-align: center;
  background-color: #ffffff;
  border-radius: calc(var(--px) * 5);
  box-sizing: border-box;
}

.quick__input::placeholder {
  color: rgba(6, 6, 6, .502);
}

.quick__input--select {
  color: rgba(6, 6, 6, .502);
}

.quick__agree {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3.5);
  margin-left: calc(var(--px) * 15);
}

.quick__agree-check {
  width: calc(var(--px) * 12.5);
  height: calc(var(--px) * 12.5); /* HEIGHT: 승인 완료 — spec 실측 체크박스 12.5×12.5 고정 */
  border: calc(var(--px) * 1) solid #ffffff;
  box-sizing: border-box;
  cursor: pointer;
  flex-shrink: 0;
}

.quick__agree-check:checked {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 6.3l3 3.1 5.8-6.4' fill='none' stroke='%232e201a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.quick__agree-label {
  cursor: pointer;
  white-space: nowrap;
}

.quick__submit {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: calc(var(--px) * 18);
}
/* ---------------quick end-------------- */
/* 로딩 */
.loading-overlay {
  position: fixed; /* 화면 전체를 덮도록 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 배경 */
  z-index: 9999; /* 다른 요소들보다 위에 표시 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3; /* 회색 테두리 */
  /* 브랜드 메인색상. footer.css 가 library.css 보다 늦게 로드돼 var(--primary) 를 덮어쓰던 것을
     토큰 참조로 통일(2026-07-29). library.css 가 안 붙는 게시판 페이지 대비로 fallback 을 둔다. */
  border-top: 5px solid var(--primary, red);
  border-radius: 50%;
  animation: spin 1s linear infinite; /* 회전 애니메이션 */
}


/* FONT:AUTO footer */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.footer__policy {
    font-family: var(--font-wanted);
    font-size: var(--bodyM);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.88;
    color: #000000;
}

.footer__info {
    font-family: var(--font-wanted);
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.56;
    text-align: center;
    color: #000000;
}

.footer__copyright {
    font-family: var(--font-wanted);
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.56;
    text-align: center;
    color: #000000;
}
/* /FONT:AUTO footer */

/* FONT:AUTO quick */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.quick__call-num {
    font-family: var(--font-wanted);
    font-size: var(--titleS);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fadfb4;
}

.quick__form {
    font-family: var(--font-wanted);
    font-size: var(--bodyM);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.88;
    color: #060606;
}

.quick__agree-label {
    font-family: var(--font-wanted);
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 5.94;
    color: #ffffff;
}
/* /FONT:AUTO quick */

/* ★ 모바일 단일 블록 — FONT:AUTO 뒤에 둬야 같은 특정도로 폰트값을 덮는다 */
@media screen and (max-width: 599px) {
  /* ---------------footer start-------------- */
  .footer_iner {
    /* 하단 padding = 고정 quick 바(≈21vw) + TOP 버튼(bottom 24vw + 높이 11vw)보다 크게 —
       저작권 줄이 바에도 버튼에도 가리지 않는 최소값이 40vw 다 */
    padding: 14vw 5vw 40vw;
    box-sizing: border-box;
  }

  /* 관리블록의 aspect-ratio(122/122)는 남긴다 — 로고가 lazy 라 폭만 바꾸고 높이 선점은 유지 */
  .footer__logo {
    width: 26vw;
  }

  .footer__policy {
    margin-top: 5vw;
    font-size: var(--bodyM);
  }

  .footer__info {
    margin-top: 6vw;
    font-size: var(--bodyS);
    line-height: 1.65;
  }

  .footer__copyright {
    margin-top: 6vw;
    font-size: var(--bodyXS);
  }

  /* top 버튼 = quick 바 위에 띄운다 */
  .footer__top-btn {
    right: 3vw;
    bottom: 24vw;
  }

  .footer__top-icon {
    width: 11vw;
  }
  /* ---------------footer end-------------- */

  /* ---------------quick start-------------- */
  .quick {
    /* 가로 overflow 가 있어도 바가 밀리지 않도록 width 대신 left/right 로 잡는다 */
    right: 0;
    width: auto;
    box-sizing: border-box;
  }

  /* 2행 4열 — 1행: 전화 / 개인정보 동의, 2행: 성함 · 연락처 · 점포보유 · 문의버튼.
     4열 균등 = 폼 컨트롤 4개 폭 통일. 최장 카피(점포보유 유/무 77.7px @390)가 셀 내부폭에 들어간다 */
  .quick_iner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 1.8vw 1.2vw;
    padding: 2.8vw 3vw;
  }

  /* form 래퍼를 평탄화해 input 3개가 그대로 grid 셀이 된다 */
  .quick__form {
    display: contents;
  }

  .quick__call {
    grid-area: 1 / 1 / 2 / 3;
    justify-self: start;
    gap: 1.2vw;
  }

  .quick__call-icon {
    width: 4.4vw;
  }

  .quick__call-num {
    font-size: var(--subheadM);
  }

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

  .quick__agree-check {
    width: 3.6vw;
    height: 3.6vw; /* HEIGHT: PC 승인분(12.5×12.5 고정 히트영역)의 모바일 대응 — 체크박스는 콘텐츠가 없다 */
  }

  .quick .quick__agree-label {
    font-size: var(--bodyXS);
  }

  /* 높이는 padding + line-box 가 만든다(고정 height 없음).
     line-height 는 FONT:AUTO 의 1.88 을 눌러 제출버튼 pill 과 같은 높이로 맞춘다 */
  .quick__input {
    grid-row: 2;
    width: 100%;
    height: auto;
    padding: 2.2vw 0.8vw;
    border-radius: 1.4vw;
    font-size: var(--bodyXS);
    line-height: 1.4;
  }

  .quick__submit {
    grid-area: 2 / 4 / 3 / 5;
    margin-left: 0;
  }

  /* PC 는 이미지 pill(q_02.webp) — 모바일 폭에선 글자가 안 읽혀 같은 색으로 CSS pill 을 쓴다.
     그라디언트·글자색은 q_02.webp 실측 샘플값 */
  .quick__submit-pill {
    width: 100%;
    box-sizing: border-box;
    padding: 2.2vw 0.8vw;
    line-height: 1.4;
    border-radius: 50vw;
    background-image: linear-gradient(90deg, #fde4ac 0%, #d6ae73 26%, #fcf9cb 50%, #e2c48d 74%, #dcb77e 100%);
    color: #000000;
    font-size: var(--bodyXS);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }
  /* ---------------quick end-------------- */

  /* ---------------개인정보 모달 start-------------- */
  .modal_iner {
    width: 93vw;
    border-radius: 4vw;
    padding: 6vw;
  }

  .modal_hd {
    font-size: 5vw;
    margin-bottom: 6vw;
  }

  .modal_close {
    height: auto;
    padding: 2.2vw 0;
    font-size: 3.6vw;
    border-radius: 2.8vw;
    margin-top: 6vw;
  }

  .modal_body {
    font-size: 3.3vw;
  }
  /* ---------------개인정보 모달 end-------------- */
}