@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:scon01 */
/* 모바일: 좌우 화살표 열 제거 후 슬라이드 1.x장 노출로 접는다 */
.scon01 {
  background-color: #ffffff;

  & .scon01__deco {
    top: 0;
    right: 0;
  }

  & .scon01_iner {
    display: grid;
    grid-template-columns: calc(var(--px)*43) calc(var(--px)*1239) calc(var(--px)*43);
    justify-content: center;
    column-gap: calc(var(--px)*39);
    row-gap: calc(var(--px)*74);
    padding-block: calc(var(--px)*179) calc(var(--px)*85);
    padding-right: calc(var(--px)*2);
  }

  & .scon01__title {
    grid-column: 2;
  }

  & .scon01__swiper {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    margin-inline: 0; /* swiper 기본 margin auto 가 grid stretch 를 끄고 max-content 로 폭을 키움 */
  }

  & .scon01__nav--prev {
    grid-column: 1;
  }

  & .scon01__nav--next {
    grid-column: 3;
  }

  & .scon01__nav {
    grid-row: 2;
    align-self: center;
    margin-bottom: calc(var(--px)*2);
    padding-block: calc(var(--px)*6);
    border-radius: 50%;
    background-color: #c6c6c6;
    transition: background-color .25s ease-out;

    &.swiper-button-disabled {
      opacity: 1; /* common.css 의 disabled opacity:.3 — 더미 4건이면 잠겨도 시안은 활성색 */
    }

    &:focus-visible {
      background-color: var(--primary);
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--primary);
      }
    }
  }

  & .scon01__nav-icon--prev {
    transform: rotate(180deg);
  }

  & .scon01__card {
    border: 1px solid #bfd1c9;
    border-radius: calc(var(--px)*26);
    background-color: #ffffff;

    @media (hover: hover) {
      &:hover .scon01__thumb img {
        transform: scale(1.06);
      }
    }
  }

  & .scon01__thumb {
    position: relative;
    border-radius: calc(var(--px)*26 - 1px); /* 카드 1px 보더 안쪽 반경 */
    overflow: hidden;

    & img {
      transition: transform .35s ease-out;
    }

    &::after { /* PSD Rectangle 1 copy 15 — 라운드 도형에 묶인 딤이라 자산에서 빼고 CSS 로 (가로 균일·세로 그라디언트) */
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.012) 30%, rgba(0, 0, 0, 0.067) 50%, rgba(0, 0, 0, 0.165) 65%, rgba(0, 0, 0, 0.271) 75%, rgba(0, 0, 0, 0.388) 85%, rgba(0, 0, 0, 0.526) 95%, rgba(0, 0, 0, 0.585) 100%);
    }
  }

  & .scon01__name {
    padding-block: calc(var(--px)*28) calc(var(--px)*27);
  }
}

/* IMG:AUTO scon01 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.scon01__deco {
    width: calc(var(--px)*714);
    aspect-ratio: 714 / 657;
}

.scon01__thumb {
    width: 100%; /* OVR */
    aspect-ratio: 290 / 258;
}
/* /IMG:AUTO scon01 END */

/* FONT:AUTO scon01 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.scon01 {
    line-height: 1.2;
}

.scon01__title {
    font-family: var(--font-poppins);
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #101111;
}

.scon01__nav-icon.scon01__nav-icon--prev,
.scon01__nav-icon.scon01__nav-icon--next {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.scon01__swiper {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: center;
    color: #101111;
}
/* /FONT:AUTO scon01 END */

/* INK:AUTO scon01 */
.scon01__title { margin-top: calc(var(--px) * -14.5); margin-bottom: calc(var(--px) * 1.5); } /* base 0,0 */
.scon01__name { margin-top: calc(var(--px) * -2.2); margin-bottom: calc(var(--px) * 4.01); } /* base 0,0 */
/* /INK:AUTO scon01 END */


@media (max-width: 599px) {
  .scon01 {
    & .scon01__deco {
      width: 52vw;
    }

    & .scon01_iner {
      grid-template-columns: 1fr 1fr;
      column-gap: 4.2667vw;
      row-gap: 10.6667vw;
      padding-block: 11.2vw 10.6667vw; /* OVR: 상단 INK 상쇄(-2.85px) 보정해 렌더 40px 유지 */
      padding-inline: 4.2667vw;
    }

    & .scon01__title {
      grid-column: 1 / -1;
      grid-row: 1;
      font-size: 10.6667vw; /* 40px — displayM(85px) 은 Grand Open 이 한 줄에 안 들어감(한계 56px) */
    }

    & .scon01__swiper {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    & .scon01__nav {
      grid-row: 3;
      width: 10.6667vw;
      aspect-ratio: 1;
      margin-top: -4.2667vw;
      margin-bottom: 0;
      padding-block: 0;
    }

    & .scon01__nav--prev {
      grid-column: 1;
      justify-self: end;
    }

    & .scon01__nav--next {
      grid-column: 2;
      justify-self: start;
    }

    & .scon01__card {
      border-radius: 4.2667vw;
    }

    & .scon01__thumb {
      border-radius: calc(4.2667vw - 1px);
    }

    & .scon01__name {
      padding-block: 4.2667vw;
    }
  }
}

/* /merge-build:scon01 */
/* merge-build:scon02 */
/* scon02 — 매장 찾기(검색바 + 목록 패널 + 지도). 모바일: 검색바 폭 100% · 보드 column(지도 위·목록 아래) */
.scon02 {
  background: linear-gradient(180deg, #fff 15%, #fff8dd 82%);
}
.scon02_iner {
  padding-top: calc(var(--px)*98);
  padding-bottom: calc(var(--px)*176);
}

.scon02__search {
  z-index: 2; /* 보드가 패널·마커의 relative 앵커라 DOM 순서(검색 먼저)를 못 바꿈 */
  width: calc(var(--px)*845);
  margin-bottom: calc(var(--px)*-42);
  padding: calc(var(--px)*22) calc(var(--px)*31) calc(var(--px)*22) calc(var(--px)*71);
  border: 1px solid #eaf1ee;
  background: #fff;
  border-radius: calc(var(--px)*47);
  box-shadow: 0 0 calc(var(--px)*20) rgba(22, 39, 32, 0.09);
}
.scon02__search-input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--bodyL);
  letter-spacing: -0.05em;
  color: #a1a6a4;
}
.scon02__search-input::placeholder {
  color: inherit;
  opacity: 1;
}
.scon02__search-btn {
  flex-shrink: 0;
  padding: calc(var(--px)*12);
  border: 0;
  border-radius: 50%;
  background: #009e5a;
  cursor: pointer;
  transition: background-color .25s ease-out;
}
.scon02__search-btn:focus-visible {
  background-color: color-mix(in srgb, #009e5a 85%, black);
}

.scon02__board {
  width: calc(var(--px)*1600);
  border: 1px solid #a5bdb3;
  border-radius: calc(var(--px)*40);
  overflow: hidden;
  background: #fff;
}
.scon02__map {
  width: calc(var(--px)*1598);
  height: calc(var(--px)*668); /* HEIGHT: 카카오맵 컨테이너 — 흐름 콘텐츠가 없어 높이를 줘야 지도가 그려짐 */
  isolation: isolate; /* 카카오맵 내부 레이어가 z-index 를 걸어 목록 패널 위로 올라옴 */
}
.scon02__map img {
  pointer-events: auto; /* 전역 img pointer-events 차단 시 마커 클릭이 죽음 */
}

.scon02__panel {
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--px)*371);
  overflow-y: auto;
  border-right: 1px solid #a5bdb3;
  background: #fff;
}
.scon02__list {
  padding-top: calc(var(--px)*14);
}
.scon02__store {
  padding: calc(var(--px)*60) calc(var(--px)*42) calc(var(--px)*30) calc(var(--px)*62);
  transition: background-color .25s ease-out;
}
.scon02__store:focus-visible {
  background-color: #f6faf8;
}
.scon02__store + .scon02__store {
  border-top: 1px solid rgba(165, 189, 179, 0.302);
}
.scon02__store-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px)*16.52); /* 줄마다 걸린 INK 상쇄(위아래 8.26)를 되돌려 한 문단 행간 31.5 유지 */
  margin-top: calc(var(--px)*30);
}
.scon02__store-naver {
  align-self: flex-end;
  margin-top: calc(var(--px)*14);
  padding: calc(var(--px)*8.5) calc(var(--px)*13);
  border-radius: calc(var(--px)*5);
  background: #03cd5c;
  transition: filter .2s ease-out;
}
.scon02__store-naver:focus-visible {
  filter: brightness(.92);
}
.scon02__pop-dim {
  position: fixed;
  inset: 0;
  z-index: 10000; /* 헤더·퀵바(fixed · z-index:9999) 위로 덮는 모달 딤 */
  display: none;
  padding: calc(var(--px)*20);
  background: rgba(0, 0, 0, 0.5);
}
.scon02__pop-dim.is-open {
  display: flex;
}
.scon02__pop {
  width: calc(var(--px)*900);
  max-height: 100%;
  overflow-y: auto;
  gap: calc(var(--px)*34);
  padding: calc(var(--px)*25);
  border: 1px solid #a5bdb3;
  border-radius: calc(var(--px)*20);
  background: #fff;
}
.scon02__pop-close {
  top: calc(var(--px)*16);
  right: calc(var(--px)*16);
  width: calc(var(--px)*40);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-size: var(--headL);
  line-height: 1;
  color: #888;
  cursor: pointer;
  transition: color .2s ease-out;
}
.scon02__pop-close:focus-visible {
  color: #000;
}
.scon02__pop-photo {
  flex-shrink: 0;
  width: calc(var(--px)*410);
  aspect-ratio: 410 / 343;
  border-radius: calc(var(--px)*20);
  overflow: hidden;
  background: #f2f2f2;
}
.scon02__pop-photo img {
  height: 100%;
  object-fit: cover;
}
.scon02__pop-body {
  flex: 1 1 0;
  min-width: 0;
  padding-top: calc(var(--px)*50);
  padding-right: calc(var(--px)*40);
}
.scon02__pop-name {
  font-size: var(--headS);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.3;
}
.scon02__pop-info {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: calc(var(--px)*6);
  margin-top: calc(var(--px)*18);
  padding-top: calc(var(--px)*19);
  border-top: 1px solid #d9e3df;
  font-size: var(--bodyM);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.6;
  color: #555;
}
.scon02__pop-row {
  display: grid;
  grid-template-columns: calc(var(--px)*50) minmax(0, 1fr);
}
.scon02__pop-label {
  font-weight: 600;
  color: #000;
}
.scon02__pop-naver {
  gap: calc(var(--px)*8);
  margin-top: calc(var(--px)*35);
  padding: calc(var(--px)*10) calc(var(--px)*18);
  border-radius: calc(var(--px)*5);
  background: #03cd5c;
  font-size: var(--bodyM);
  font-weight: 600;
  color: #fff;
  transition: filter .2s ease-out;
}
.scon02__pop-naver:focus-visible {
  filter: brightness(.92);
}

@media (hover: hover) {
  .scon02__pop-close:hover {
    color: #000;
  }
  .scon02__pop-naver:hover {
    filter: brightness(.92);
  }
  .scon02__search-btn:hover {
    background-color: color-mix(in srgb, #009e5a 85%, black);
  }
  .scon02__store:hover {
    background-color: #f6faf8;
  }
  .scon02__store-naver:hover {
    filter: brightness(.92);
  }
}

/* IMG:AUTO scon02 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.scon02__search-icon {
    width: calc(var(--px)*26);
    aspect-ratio: 26 / 26;
}

.scon02__store-naver-icon,
.scon02__pop-naver-icon {
    width: calc(var(--px)*14);
    aspect-ratio: 14 / 12;
}
/* /IMG:AUTO scon02 END */

/* FONT:AUTO scon02 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.scon02 {
    font-family: var(--font-pretendard);
    color: #000000;
}

.scon02__store-name {
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 2.55;
}

.scon02__store-info {
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.97;
}
/* /FONT:AUTO scon02 END */

/* INK:AUTO scon02 */
.scon02__store-name { margin-top: calc(var(--px) * -17.27); margin-bottom: calc(var(--px) * -17.27); } /* base 0,0 */
.scon02__store-addr { margin-top: calc(var(--px) * -8.26); margin-bottom: calc(var(--px) * -8.26); } /* base 0,0 */
.scon02__store-tel { margin-top: calc(var(--px) * -8.26); margin-bottom: calc(var(--px) * -8.26); } /* base 0,0 */
.scon02__store-hours { margin-top: calc(var(--px) * -8.26); margin-bottom: calc(var(--px) * -8.26); } /* base 0,0 */
/* /INK:AUTO scon02 END */


@media (max-width: 599px) {
  .scon02_iner {
    padding-top: 10.6667vw;
    padding-bottom: 16vw;
  }

  .scon02__search {
    width: 92vw;
    margin-bottom: -6.4vw;
    padding: 3.2vw 5.3333vw 3.2vw 10.6667vw;
    border-radius: 8.5333vw;
  }
  .scon02__search-btn {
    padding: 2.1333vw;
  }

  .scon02__board {
    width: 92vw;
    border-radius: 6.4vw;
    isolation: isolate; /* map.js 가 붙이는 .map-touch-lock{z-index:30} 을 보드 안에 가둬 겹친 검색바를 덮지 않게 */
  }
  .scon02__map {
    width: 100%;
    height: 90vw; /* HEIGHT: 카카오맵 컨테이너 — 흐름 콘텐츠가 없어 높이를 줘야 지도가 그려짐 */
  }

  .scon02__panel {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-height: 90vw; /* 지도와 같은 높이 — 목록이 늘어도 보드가 고정되고 2번째 항목이 중간에서 잘려 스크롤을 알림 */
    overscroll-behavior: contain; /* 목록 끝에서 페이지가 따라 튀지 않게 */
    border-right: 0;
    border-top: 1px solid #a5bdb3;
  }
  .scon02__list {
    padding-top: 2.1333vw;
  }
  .scon02__store {
    padding: 8.5333vw 6.4vw 4.2667vw;
  }
  .scon02__store-info {
    gap: 2.1333vw;
    margin-top: 4.2667vw;
  }
  .scon02__store-naver {
    margin-top: 2.1333vw;
    padding: 1.6vw 2.1333vw;
    border-radius: 0.5333vw;
  }

  .scon02__search-icon {
    width: 4.2667vw;
  }
  .scon02__store-naver-icon {
    width: 3.2vw; /* 8px 스텝은 터치 타겟이 얕아 인접 스텝(12px) 채택 */
  }

  .scon02__pop-dim {
    padding: 4.2667vw;
  }
  .scon02__pop {
    flex-direction: column;
    width: 100%;
    gap: 4.2667vw;
    padding: 4.2667vw;
    border-radius: 4.2667vw;
  }
  .scon02__pop-close {
    top: 6.4vw;
    right: 6.4vw;
    width: 10.6667vw;
  }
  .scon02__pop-photo {
    width: 100%;
    border-radius: 3.2vw;
  }
  .scon02__pop-body {
    padding: 0 1.0667vw 1.0667vw;
  }
  .scon02__pop-info {
    gap: 1.0667vw;
    margin-top: 3.2vw;
    padding-top: 3.2vw;
  }
  .scon02__pop-row {
    grid-template-columns: 10.6667vw minmax(0, 1fr);
  }
  .scon02__pop-naver {
    gap: 1.6vw;
    margin-top: 5.3333vw;
    padding: 2.1333vw 4.2667vw;
    border-radius: 1.0667vw;
  }
  .scon02__pop-naver-icon {
    width: 3.2vw;
  }
}

/* /merge-build:scon02 */
/* merge-build:sub-hero */
/* sub-hero — 모바일: head 는 column 그대로 가운데 정렬, 엠블럼은 하단 중앙 유지 */
.sub-hero {
  z-index: 2; /* 빼면 visual-verify 렌더가 백지로 나옴(실측) — 걷지 말 것 */
  overflow: visible;
  padding-bottom: calc(var(--px)*63); /* 그린 면 아래로 내려오는 엠블럼 범프를 섹션 안에 포함 */
}

.sub-hero_iner {
  background-color: #009e5a;
}

.sub-hero__head {
  width: calc(var(--px)*1241);
  padding-top: calc(var(--px)*223);
  padding-bottom: calc(var(--px)*114);
  gap: calc(var(--px)*2);
}

.sub-hero__emblem {
  inset-inline: 0;
  bottom: calc(var(--px)*-8); /* 자산 날개 흰띠 7.75px — 섹션 하단과 맞물림 */
}

.sub-hero__logo {
  bottom: calc(var(--px)*-51);
}

/* IMG:AUTO sub-hero */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.sub-hero__bump {
    width: calc(var(--px)*652);
    aspect-ratio: 652 / 88;
}

.sub-hero__logo {
    width: calc(var(--px)*125);
    aspect-ratio: 125 / 125;
}
/* /IMG:AUTO sub-hero END */

/* FONT:AUTO sub-hero */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.sub-hero {
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.sub-hero__title {
    font-family: var(--font-poppins);
    font-size: var(--displayL);
    letter-spacing: -0.0249em; /* OVR */
}

.sub-hero__desc {
    font-family: var(--font-pretendard);
    font-size: var(--subheadL);
    letter-spacing: -0.04em;
    font-weight: 700;
}
/* /FONT:AUTO sub-hero END */

@media (max-width:599px) {
  .sub-hero {
    padding-bottom: 6.4vw;
  }

  .sub-hero__head {
    width: 89.3333vw;
    padding-top: 21.3333vw;
    padding-bottom: 12.8vw;
    gap: 0.5333vw;
    align-items: center;
  }

  .sub-hero__title {
    font-size: 13.8667vw; /* 52px — 토큰 --displayL(63px)이면 최장 COMMUNITY 395.7px 로 head 335px 을 넘친다 */
  }

  .sub-hero__bump {
    width: 70vw;
  }

  .sub-hero__logo {
    width: 13.3333vw;
    bottom: -5.3333vw;
  }

  .sub-hero__emblem {
    bottom: -0.8533vw;
  }
}

/* /merge-build:sub-hero */