/* ============================================
   킵앤머니 랜딩페이지
   ============================================ */

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #000;
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul, ol { list-style: none; margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p { margin: 0; }

/* Tokens */
:root {
  --color-primary: #897358;
  --color-primary-dark: #7f6e59;
  --color-dark: #202020;
  --color-dark-2: #363c3a;
  --color-bg: #f7f5f0;
  --color-white: #ffffff;
  --color-text: #000000;
  --color-text-sub: #2d2d2d;
  --color-muted: #8c8c8c;
  --color-muted-2: #a4a4a4;
  --color-line: #e0e0e0;
  --color-line-dark: #444;
  --color-warn: #cfb465;
  --color-naver: #3bb044;
  --color-kakao: #fee500;

  --page-max: 600px;
  --gutter: 20px;
  --radius: 4px;

  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.1);
  --shadow-cta: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Layout container */
body {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: 88px; /* space for CTA bar */
  overflow-anchor: none; /* 로고 바 접힘 시 스크롤 앵커링 간섭 방지 */
}

@media (min-width: 601px) {
  body {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}

/* ============================================
   Header (fixed dark bar)
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-dark);
  color: var(--color-white);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 12px;
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
}

/* 스크롤 내릴 때 로고 바 접힘 */
.header.is-inner-hidden .header__inner {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.header__logo-img {
  height: 48px;
  width: auto;
}

.header__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.header__logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.gnb {
  border-top: 1px solid #2f2f2f;
}

.gnb__list {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.gnb__list::-webkit-scrollbar { display: none; }

.gnb__item {
  position: relative;
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--color-muted);
}

.gnb__item + .gnb__item {
  margin-left: 12px;
  padding-left: 12px;
}
.gnb__item + .gnb__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #2f2f2f;
}

.gnb__item a {
  display: block;
  padding: 12px 0;
  white-space: nowrap;
}

.gnb__item.is-active {
  color: #fff;
  font-weight: 500;
}

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  background: var(--color-dark);
  color: #fff;
  overflow: hidden;
}

.hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 400;
  background: #191919;
  overflow: hidden;
}

.hero__visual.swiper {
  display: flex;
}

.hero__visual .swiper-wrapper {
  width: 100%;
}

.hero__visual .swiper-slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
}

.hero__visual .swiper-pagination {
  bottom: 12px;
}

.hero__visual .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.6);
}

.hero__visual .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 1);
}

/* Visual.png 안에 타이틀/카피가 포함되어 있어 오버레이 요소는 숨김 */
.hero__bg,
.hero__car,
.hero__money,
.hero__company { display: none; }

/* 이미지에 텍스트가 있으므로 실제 텍스트는 접근성/SEO용으로만 유지 */
.hero__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hero__bg {
  position: absolute;
  inset: -80% -43% -42% -110%;
  background:
    radial-gradient(circle at 60% 40%, rgba(137, 115, 88, 0.28), transparent 60%),
    linear-gradient(160deg, #232323, #101010);
}

.hero__car {
  position: absolute;
  top: -8%;
  right: -22%;
  width: 78%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 40% 60%, #4a4a4a, #1a1a1a 70%);
  border-radius: 50%;
  filter: blur(0.4px);
}
.hero__car::before {
  content: "🚗";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  opacity: 0.9;
}

.hero__money {
  position: absolute;
  left: 7%;
  top: 15%;
  width: 34%;
  aspect-ratio: 120 / 132;
  background: linear-gradient(135deg, #cfa46b, #7f6e59);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  transform: rotate(-8deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.hero__money::before { content: "💰"; }

.hero__company {
  position: absolute;
  right: 3%;
  bottom: 18%;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-dark);
  border-radius: 4px;
  transform: rotate(-4deg);
}

.hero__text {
  padding: 0 var(--gutter);
  margin-top: 24px;
}

.hero__title {
  font-size: 28px;
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero__sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.43;
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================
   Section common
   ============================================ */
.section {
  padding: 60px var(--gutter);
}

.sec-head { margin-bottom: 24px; }

.sec-head__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 20px;
}

.sec-head__dot {
  display: block;
  width: 16px;
  height: 1px;
  margin: 12px 0 18px;
  background: var(--color-primary);
}

.sec-head__title {
  font-size: 24px;
  line-height: 1.33;
  font-weight: 700;
  color: #000;
}

.sec-head__title .accent { color: var(--color-primary-dark); }

.sec-head__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.47;
  color: #000;
}

.sec-head__desc .underline {
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================
   Intro - Feature list (image + text row)
   ============================================ */
.intro { background: var(--color-bg); padding-bottom: 0; }

.feature-list { display: flex; flex-direction: column; gap: 12px; }

.feature-list__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 160px;
}

.feature-list__item--pic-first .feature-list__pic { order: 0; }
.feature-list__item--pic-first .feature-list__txt { order: 1; }

.feature-list__txt {
  background: #fff;
  padding: 20px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
}

.feature-list__title {
  font-size: 18px;
  line-height: 1.44;
  font-weight: 500;
  color: var(--color-primary);
}

.feature-list__desc {
  font-size: 14px;
  line-height: 1.43;
  color: #000;
  word-break: keep-all;
}

.feature-list__pic {
  background: #e7e3de center/cover no-repeat;
  min-height: 160px;
  position: relative;
}
.feature-list__pic[data-img="businessman-mobile"]  { background-image: url("../images/cont_01_img_01.png"); }
.feature-list__pic[data-img="businessman-terrace"] { background-image: url("../images/cont_01_img_02.png"); }
.feature-list__pic[data-img="businessman-graph"]   { background-image: url("../images/cont_01_img_03.png"); }

/* ============================================
   Facility
   ============================================ */
.facility { background: var(--color-bg); }

.facility-cards { display: flex; flex-direction: column; gap: 24px; }

.facility-card {
  position: relative;
  min-height: 300px;
}

.facility-card__img {
  width: 75%;
  aspect-ratio: 1;
  background: #363c3a center/cover no-repeat;
  position: relative;
}
.facility-card__img::before {
  content: attr(data-img);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c8785;
  font-size: 12px;
}

.facility-card__img[data-img="garage"]   { background-image: url("../images/cont_02_img_03.png"); }
.facility-card__img[data-img="showroom"] { background-image: url("../images/cont_02_img_04.png"); }
.facility-card__img[data-img="garage"]::before,
.facility-card__img[data-img="showroom"]::before { content: none; }

.facility-card--left .facility-card__img { margin-left: 6.25%; margin-top: 40px; }
.facility-card--right .facility-card__img { margin-left: 25%; }

.facility-card__box {
  position: absolute;
  width: 75%;
  background: #fff;
  padding: 20px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.facility-card--left .facility-card__box { top: 0; left: 0; }
.facility-card--right .facility-card__box { bottom: 0; right: 40px; }

.facility-card__title { font-size: 18px; font-weight: 500; line-height: 1.44; color: #000; }
.facility-card__desc { font-size: 14px; line-height: 1.43; color: #000; word-break: keep-all; }

/* ============================================
   Step section
   ============================================ */
.step-section {
  background: #fff;
  padding: 40px var(--gutter);
}

.step-section__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  margin-bottom: 16px;
}

.step-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 0;
}

.step-list__item {
  flex: 0 0 calc((100% - 24px) / 3);
  min-height: 140px;
  border: 1px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 0;
}

/* 화살표 없는 간격 (STEP 05 ~ 마스코트, 열 정렬용) */
.step-list__spacer { flex: 0 0 12px; }

/* 마스코트 칸 (2행 3열, 테두리 없음) */
.step-list__mascot {
  flex: 0 0 calc((100% - 24px) / 3);
  height: 140px;
  background: center bottom / contain no-repeat url("../images/cont_0201_img_06.png");
}

.step-list__num {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-primary);
}

.step-list__name {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #000;
}

.step-list__ico {
  width: 59px;
  height: auto;
}

.step-list__arrow {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  font-size: 0;
  background: center / contain no-repeat url("../images/arrow_right.png");
  align-self: center;
}

/* On the 4→5 wrap position, hide the 5→(empty) arrow visually if wraps oddly */
@media (max-width: 340px) {
  .step-list__item { flex-basis: calc((100% - 12px) / 2); }
}

/* ============================================
   Special section (dark bg accordion cards)
   ============================================ */
.special-section {
  background: var(--color-dark);
  color: #fff;
  padding: 40px var(--gutter);
}

.special-section__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 16px;
}

.special-list { display: flex; flex-direction: column; gap: 12px; }

.special-item {
  overflow: hidden;
}

.special-item__head {
  background: var(--color-primary-dark);
  color: #fff;
  padding: 12px 20px;
  font-size: 18px;
  line-height: 1.44;
}

.special-item__body {
  background: var(--color-bg);
  color: #000;
  padding: 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.special-item__desc {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.43;
  word-break: keep-all;
}

.special-item__ico {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.special-item__ico[data-ico="limit"]  { background-image: url("../images/cont_0202_img_01.png"); }
.special-item__ico[data-ico="clock"]  { background-image: url("../images/cont_0202_img_02.png"); }
.special-item__ico[data-ico="shield"] { background-image: url("../images/cont_0202_img_03.png"); }
.special-item__ico[data-ico="lock"]   { background-image: url("../images/cont_0202_img_04.png"); }

/* ============================================
   FAQ
   ============================================ */
.faq-section { background: var(--color-bg); }

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: #fff;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
}

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  text-align: left;
}

.faq-item__mark {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

.faq-item__title {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #000;
  padding-top: 2px;
  word-break: keep-all;
}

.faq-item__arrow {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-top: 8px;
  background: center/contain no-repeat url("../images/drop_down.png");
}

.faq-item.is-open .faq-item__arrow {
  background-image: url("../images/drop_up.png");
}

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.43;
  color: #000;
  transition: max-height 0.25s ease, padding 0.25s ease;
  word-break: keep-all;
}

.faq-item.is-open .faq-item__a {
  max-height: 500px;
  padding: 0 16px 16px;
}

/* ============================================
   Location
   ============================================ */
.location { background: #fff; padding-top: 60px; padding-bottom: 30px; }

.location__map {
  width: 100%;
  aspect-ratio: 320 / 240;
  background: #eee;
  position: relative;
  margin-bottom: 16px;
  overflow: hidden;
}

.location__address {
  font-size: 16px;
  line-height: 24px;
  color: #000;
  margin-bottom: 16px;
}

.br-pc { display: none; }

.location__tel { margin-bottom: 16px; }
.location__tel-label {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-muted);
}
.location__tel-num {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
}

.location__links { display: flex; gap: 8px; }

.location__link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  position: relative;
  color: transparent;
}
.location__link {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.location__link[data-link="naver-map"] { background-image: url("../images/cont_04_icon_01.png"); }
.location__link[data-link="kakao-map"] { background-image: url("../images/cont_04_icon_02.png"); }
.location__link[data-link="call"]      { background-image: url("../images/cont_04_icon_03.png"); }

/* ============================================
   News
   ============================================ */
.news { background: #fff; padding-top: 30px; padding-bottom: 60px; }

.news-list {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  overflow: hidden;
  margin-bottom: 24px;
}
.news-list.swiper { display: flex; }
.news-list .swiper-wrapper { width: 100%; }
.news-list .swiper-slide {
  width: auto;
  height: auto;
}
.news-list .swiper-slide > a {
  display: block;
}

.news-item {
  width: 140px;
}

.news-item__thumb {
  width: 140px;
  height: 140px;
  background: #eee center/cover no-repeat;
  border-radius: 2px;
  margin-bottom: 12px;
  position: relative;
}
.news-item__thumb[data-img="blog-1"] { background-image: url("../images/blog-1.png"); }
.news-item__thumb[data-img="blog-2"] { background-image: url("../images/blog-2.png"); }
.news-item__thumb[data-img="blog-3"] { background-image: url("../images/blog-3.png"); }

.news-item__title {
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-sub);
  word-break: keep-all;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.news__more {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 15px;
  color: #121212;
}

.news__more-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-line);
  margin: 0 4px;
}

.news__more-icon {
  width: 32px;
  height: 32px;
  background: center/contain no-repeat url("../images/cont_05_icon_01.png");
  border-radius: 6px;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--color-dark);
  color: #fff;
  padding: 60px var(--gutter) 100px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.footer__logo-img {
  height: 28px;
  width: auto;
}

.footer__logo-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer__logo-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.footer__company p {
  font-size: 15px;
  line-height: 22px;
}

.footer__company .footer__ceo { margin-left: 4px; }

.footer__addr {
  font-size: 13px !important;
  line-height: 18px !important;
  margin-top: 8px !important;
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-muted-2);
}

.footer__meta li { position: relative; }
.footer__meta li + li { padding-left: 9px; }
.footer__meta li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background: var(--color-line-dark);
}
.footer__meta li:first-child { color: #fff; }

/* 줄의 맨 앞 항목은 앞쪽 구분선/여백 제거 */
.footer__meta li.is-row-start { padding-left: 0; }
.footer__meta li.is-row-start::before { content: none; }

.footer__meta a { color: inherit; }

.footer__warn {
  margin-top: 20px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-warn);
  word-break: keep-all;
}

/* ============================================
   CTA Bar (fixed bottom)
   ============================================ */
.cta-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-max);
  background: #fff;
  box-shadow: var(--shadow-cta);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 20px;
  z-index: 50;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.cta-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

.cta-bar__btn--naver {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--color-naver);
  color: var(--color-naver);
  background: #fff;
}

.cta-bar__btn--kakao {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-kakao);
  color: #000;
}

.cta-bar__btn--call {
  flex: 0 0 48px;
  width: 48px;
  padding: 0;
  background: var(--color-primary);
  color: #fff;
  font-size: 20px;
}

/* 전화번호 텍스트: 모바일 숨김, PC에서 노출 */
.cta-bar__num {
  display: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.cta-bar__ico {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: center/contain no-repeat;
}
.cta-bar__ico[data-ico="naver-talk"] { background-image: url("../images/ic_naver.png"); }
.cta-bar__ico[data-ico="kakao"]      { background-image: url("../images/ic_kakao.png"); }
.cta-bar__ico[data-ico="call"]       { background-image: url("../images/ic_call.png"); }

/* ============================================
   팝업 (Bottom Sheet)
   ============================================ */
.popup-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 9999;
}

.popup-sheet.is-open {
  display: flex;
  flex-direction: column;
}

.popup-sheet__dim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.popup-sheet__panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-max);
  background: var(--color-white);
  border-radius: 16px 16px 0 0;
  animation: slideUp 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(100%);
  }
  to {
    transform: translateX(-50%) translateY(0);
  }
}

.popup-sheet__close {
  align-self: flex-end;
  padding: 8px;
  color: var(--color-text);
  cursor: pointer;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  position: absolute;
  top:-50px;
}

.popup-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.popup-sheet__img {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 240;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}

.popup-sheet__content {
  width: 100%;
  height: 100%;
}

.popup-sheet__content img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-sheet__btns {
  display: flex;
  gap: 8px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.popup-sheet__btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.popup-sheet__btn:active {
  opacity: 0.8;
}

.popup-sheet__btn--ghost {
  background-color: #f4f4f4;
  color: #666;
}

.popup-sheet__btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   Responsive tweaks
   ============================================ */
@media (min-width: 601px) {
  /* PC에서만 좌우 패딩 40px (모바일은 20px) */
  :root { --gutter: 40px; }

  .hero__title { font-size: 32px; }
  .sec-head__title { font-size: 26px; }
  .step-list__item { min-height: 140px; }

  /* Intro feature-list: 3-column masonry */
  .feature-list {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .feature-list__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* 가운데 열(이미지 먼저)은 아래로 내려서 지그재그 */
  .feature-list__item--pic-first { margin-top: 48px; }

  .feature-list__txt {
    position: relative;
    z-index: 2;
  }
  .feature-list__pic {
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 0;
  }
  /* 텍스트카드와 이미지가 살짝 겹치도록 */
  .feature-list__item--txt-first .feature-list__pic { margin-top: -24px; }
  .feature-list__item--pic-first .feature-list__txt { margin-top: -24px; }

  /* CTA 전화 버튼: 아이콘 옆에 전화번호 노출 */
  .cta-bar__btn--call {
    flex: 0 0 auto;
    width: auto;
    padding: 0 16px;
    gap: 8px;
    font-size: 15px;
  }
  .cta-bar__num { display: inline; }

  /* Facility: 2-column masonry */
  .facility-cards {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .facility-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* 오른쪽 카드는 아래로 내려서 지그재그 */
  .facility-card--right { margin-top: 56px; }

  .facility-card__img {
    width: 100%;
    margin: 0;
    aspect-ratio: 1 / 1;
  }
  .facility-card__box {
    position: static;
    width: 88%;
    z-index: 2;
  }
  /* 왼쪽: 텍스트박스 위 → 이미지 아래(박스가 이미지를 덮음) */
  .facility-card--left .facility-card__box { order: 0; align-self: flex-start; }
  .facility-card--left .facility-card__img { order: 1; margin: -24px 0 0; }
  /* 오른쪽: 이미지 위 → 텍스트박스 아래(박스가 이미지를 덮음) */
  .facility-card--right .facility-card__img { margin: 0; }
  .facility-card--right .facility-card__box { align-self: flex-end; margin-top: -24px; }

  /* 킵앤머니의 특별함: 2×2 그리드 */
  .special-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }
  .special-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .special-item__body {
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
  }
  /* 아이콘을 우측 하단으로 */
  .special-item__ico {
    align-self: flex-end;
    margin-top: auto;
  }

  /* 오시는 길: 좌측 정보(콘텐츠 폭) + 우측 지도(최대 확장) 2열 */
  .br-pc { display: inline; }

  .location {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "head  map"
      "addr  map"
      "tel   map"
      "links map";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 20px;
    align-items: start;
  }
  .location .sec-head { grid-area: head; margin-bottom: 0; }
  .location__address { grid-area: addr; margin: 24px 0 0; }
  .location__tel { grid-area: tel; margin: 24px 0 0; }
  .location__links { grid-area: links; margin: 24px 0 0; }
  .location__map {
    grid-area: map;
    margin: 0;
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
    min-height: 360px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}