/* ═══════════════════════════════════════════════════════════════════
   리커버 — NOL 레퍼런스 레이아웃 레이어
   로드 순서: kt.css(골격) → am.css(더뷰티모아 로즈) → bm-mobile.css → **rc-home.css**

   ★★★2026-09-01 전면 재작성. 첫 판이 "전혀 다른 사이트"라는 지적을 받았고, 실제 화면을 열어 보니
      원인이 셋이었다. 같은 실수를 다시 하지 않도록 남긴다.
      ① **am.css 가 색을 var 가 아니라 하드코딩**한다. `:root` 만 덮으면 화면은 그대로 더뷰티모아다.
         특히 `am.css:276 .kt-menubar{background:linear-gradient(#DE3D75,#D6336C)}` — 마젠타 띠.
         ⇒ 아래에서 **선택자 단위로 다시 덮는다**. 색 변수만 바꾸고 끝냈다고 믿지 말 것.
      ② 홈이 **좌측 사이드바를 그대로 달고** 나왔다(자매서비스 배너·지역위젯). NOL 은 전폭이다.
         (index.php 가 `$kt_layout='full'` 을 head.php **다음에** 설정해 무효였다 — PHP 쪽에서 고침)
      ③ NOL 은 **화면 전체가 사진**인데 CSS 그라데이션으로 만들었다. ⇒ 전부 실사진으로 교체.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 팔레트 ─────────────────────────────────────────────────────────
   더뷰티모아는 파스텔 핑크였다. 리커버는 마사지·회복 업종이라 핑크는 업종을 잘못 말한다.
   대비는 전부 흰 배경 기준 실측값이다. */
:root {
  --kt-primary:   #0d6e6e;   /* 링크·강조 딥틸 (5.93:1) */
  --kt-primary-d: #095353;   /* hover (7.98:1) */
  --kt-accent:    #d2482f;   /* 배지 코랄딥 (4.93:1) */
  --kt-ink:       #16202a;   /* 본문 (15.9:1 · AAA) */
  --kt-ink2:      #3a4a58;   /* 소제목 (9.1:1) */
  --kt-mute:      #64737f;   /* 보조 (5.2:1) */
  --kt-line:      #e6ebef;
  --kt-soft:      #f2f7f7;
  --rc-wrap:      1280px;
}
body { background: #fff; }

/* ── ★am.css 하드코딩 덮기 ──────────────────────────────────────── */
.kt-menubar {
  background: #fff !important;              /* 마젠타 띠 제거 — NOL 은 흰 배경 탭이다 */
  border-bottom: 1px solid var(--kt-line) !important;
  box-shadow: none !important;
}
.kt-menubar a       { color: var(--kt-ink2) !important; }
.kt-menubar a:hover { color: var(--kt-primary) !important; }
.kt-menubar a.on    { color: var(--kt-ink) !important; }
.kt-menubar a:after { display: none !important; }   /* 원본의 금색 밑줄 장식 */
.kt-utilbar { background: #fff; border-bottom: 1px solid var(--kt-line); }
.kt-logorow { border-bottom: 0; }

/* ── 헤더 1행: 로고 · 검색 · 유틸 (NOL) ─────────────────────────── */
.kt-logorow .kt-wrap { height: 84px; gap: 0; }
.kt-hdsearch {
  flex: 1 1 auto; max-width: 560px; margin: 0 32px;
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 6px 0 22px;
  border: 2px solid var(--kt-primary); border-radius: 999px;
  background: #fff; color: var(--kt-mute); font-size: 15px;
}
.kt-hdsearch span { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kt-hdsearch i { flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--kt-primary); font-size: 18px; }
.kt-hdsearch:hover { border-color: var(--kt-primary-d); }

.kt-hdutil { display: flex; align-items: center; gap: 2px; flex: none; }
.kt-hdutil a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 62px; padding: 6px 4px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: var(--kt-ink2); letter-spacing: -.03em;
}
.kt-hdutil a i { font-size: 18px; color: var(--kt-ink2); }
.kt-hdutil a:hover { background: var(--kt-soft); color: var(--kt-primary); }
.kt-hdutil a:hover i { color: var(--kt-primary); }

/* ── 메뉴바: 햄버거 '전체 카테고리' + 탭 (NOL 2행) ──────────────── */
.kt-menubar .kt-wrap { display: flex; align-items: center; gap: 0; height: 52px; }
.kt-menubar a {
  position: relative; display: flex; align-items: center; height: 100%;
  padding: 0 18px; font-size: 16px; font-weight: 700; letter-spacing: -.035em;
}
.kt-menubar a.on::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--kt-ink);
  display: block !important;
}
.rc-allcat {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding-right: 18px; margin-right: 6px; border-right: 1px solid var(--kt-line);
  font-size: 16px; font-weight: 700; color: var(--kt-ink); letter-spacing: -.035em;
}
.rc-allcat i { font-size: 17px; }

/* ── 홈 컨테이너 ───────────────────────────────────────────────── */
.rc-home { max-width: var(--rc-wrap); margin: 0 auto; padding: 22px 20px 80px; }
.rc-sec { margin-top: 54px; }
.rc-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rc-sechead h2 { font-size: 23px; font-weight: 800; letter-spacing: -.05em; color: var(--kt-ink); }
.rc-sechead p { margin-top: 6px; font-size: 14px; color: var(--kt-mute); letter-spacing: -.02em; }
.rc-more { flex: none; font-size: 14px; font-weight: 600; color: var(--kt-mute); }
.rc-more:hover { color: var(--kt-primary); }
.rc-more::after { content: ' ›'; font-weight: 700; }

/* ── 히어로: 실사진 풀블리드 ───────────────────────────────────── */
.rc-hero { position: relative; }
.rc-hero-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: 18px; scrollbar-width: none;
}
.rc-hero-track::-webkit-scrollbar { display: none; }
.rc-hero-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  aspect-ratio: 1600 / 560; min-height: 300px; overflow: hidden;
}
.rc-hero-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ★사진 위 흰 글자는 사진에 따라 대비가 무너진다 — 왼쪽에 어두운 그라데이션을 깔아 글자 자리를 만든다.
     (NOL 도 같은 방식이다. 그라데이션 없이 얹으면 밝은 사진에서 글자가 사라진다) */
.rc-hero-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,20,24,.86) 0%, rgba(8,20,24,.66) 42%, rgba(8,20,24,.12) 100%);
}
.rc-hero-body {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 60px; max-width: 760px; color: #fff;
}
.rc-hero-badge {
  align-self: flex-start; margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 6px;
  background: var(--kt-accent); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: -.02em;
}
.rc-hero-badge.tealbg { background: var(--kt-primary); }
.rc-hero-body h1, .rc-hero-body h2 {
  font-size: 36px; font-weight: 800; letter-spacing: -.055em; line-height: 1.24; color: #fff;
}
.rc-hero-body p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); letter-spacing: -.025em; }
.rc-hero-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.rc-hero-chips a {
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: rgba(255,255,255,.17); color: #fff; border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(2px);
}
.rc-hero-chips a:hover { background: #fff; color: var(--kt-ink); }

.rc-hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: #16202a; font-size: 19px;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.rc-hero-nav:hover { background: #fff; }
.rc-hero-nav.prev { left: 18px; }
.rc-hero-nav.next { right: 18px; }
.rc-hero-count {
  position: absolute; right: 22px; bottom: 20px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.46); color: #fff; font-size: 13px; font-weight: 600;
}
.rc-hero-count button { border: 0; background: none; color: #fff; cursor: pointer; font-size: 13px; padding: 0; }

/* ── 가입 유도 밴드 (NOL '가입하고 쿠폰 받으세요') ──────────────── */
.rc-band {
  margin-top: 16px; padding: 18px 24px; border-radius: 12px; background: var(--kt-soft);
  display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center;
}
.rc-band b { font-size: 15.5px; font-weight: 800; color: var(--kt-ink); letter-spacing: -.035em; }
.rc-band span { display: block; margin-top: 3px; font-size: 13px; color: var(--kt-mute); }
.rc-band a {
  flex: none; padding: 10px 18px; border-radius: 8px;
  background: var(--kt-primary); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.03em;
}
.rc-band a:hover { background: var(--kt-primary-d); }

/* ── 업종 타일 (NOL 원형 아이콘 행) ─────────────────────────────── */
.rc-cats { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-top: 32px; }
.rc-cats a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 10px 2px; border-radius: 12px; }
.rc-cats a:hover { background: var(--kt-soft); }
.rc-cat-ico {
  position: relative; width: 66px; height: 66px; border-radius: 20px; overflow: hidden;
  background: var(--kt-soft); box-shadow: 0 1px 3px rgba(22,32,42,.10);
}
.rc-cat-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-cats a b { font-size: 13px; font-weight: 600; letter-spacing: -.04em; color: var(--kt-ink2); text-align: center; }
.rc-cats a:hover b { color: var(--kt-primary); }
.rc-cat-tag {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 999px; background: var(--kt-accent); color: #fff;
  font-size: 10px; font-weight: 800; white-space: nowrap; z-index: 1;
}

/* ── 카드 레일 (NOL 큰 사진 카드) ──────────────────────────────── */
.rc-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rc-card { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(22,32,42,.10); }
.rc-card-thumb { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--kt-soft); }
.rc-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-card-tags { position: absolute; left: 10px; top: 10px; display: flex; gap: 5px; z-index: 1; }
.rc-tag { padding: 4px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; background: rgba(0,0,0,.62); color: #fff; }
.rc-tag.hot  { background: var(--kt-accent); }
.rc-tag.pick { background: var(--kt-primary); }
.rc-card-b { padding: 13px 14px 15px; }
.rc-card-b em { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--kt-primary); }
.rc-card-b strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 15.5px; font-weight: 700; letter-spacing: -.04em; line-height: 1.38; color: var(--kt-ink);
  min-height: 2.76em;
}
.rc-card-b span { display: block; margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--kt-line); font-size: 12.5px; color: var(--kt-mute); }

/* ── 프로모 2x3 사진 그리드 (NOL) ──────────────────────────────── */
.rc-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 54px; }
.rc-promo { position: relative; display: block; aspect-ratio: 800/520; border-radius: 14px; overflow: hidden; }
.rc-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-promo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,24,.06) 0%, rgba(8,20,24,.34) 44%, rgba(8,20,24,.82) 100%);
}
.rc-promo-b { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: #fff; }
.rc-promo-b b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.05em; line-height: 1.3; }
.rc-promo-b span { display: block; margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.88); letter-spacing: -.02em; }
.rc-promo-tag {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  padding: 5px 11px; border-radius: 6px; background: rgba(255,255,255,.94);
  color: var(--kt-ink); font-size: 11.5px; font-weight: 800; letter-spacing: -.02em;
}

/* ── 아코디언 ─────────────────────────────────────────────────── */
.rc-acc { border: 1px solid var(--kt-line); border-radius: 14px; margin-top: 12px; overflow: hidden; }
.rc-acc > summary {
  list-style: none; cursor: pointer; padding: 19px 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16.5px; font-weight: 700; letter-spacing: -.04em; color: var(--kt-ink);
}
.rc-acc > summary::-webkit-details-marker { display: none; }
.rc-acc > summary::after { content: '\f107'; font-family: FontAwesome; font-size: 18px; color: var(--kt-mute); }
.rc-acc[open] > summary::after { content: '\f106'; }
.rc-acc[open] > summary { border-bottom: 1px solid var(--kt-line); }
.rc-acc-body { padding: 20px 24px 24px; }
.rc-chipgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-chipgrid a {
  padding: 9px 15px; border: 1px solid var(--kt-line); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--kt-ink2); background: #fff;
}
.rc-chipgrid a:hover { border-color: var(--kt-primary); color: var(--kt-primary); background: var(--kt-soft); }

.rc-empty { padding: 40px 24px; border: 1px dashed var(--kt-line); border-radius: 14px; text-align: center; color: var(--kt-mute); font-size: 14.5px; line-height: 1.7; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rc-cats { grid-template-columns: repeat(6, 1fr); }
  .rc-rail { grid-template-columns: repeat(2, 1fr); }
  .rc-promos { grid-template-columns: repeat(2, 1fr); }
  .kt-hdsearch { margin: 0 16px; }
}
@media (max-width: 720px) {
  .rc-home { padding: 12px 14px 88px; }
  .rc-hero-slide { aspect-ratio: 4/3; min-height: 0; }
  .rc-hero-body { padding: 0 22px; }
  .rc-hero-body h1, .rc-hero-body h2 { font-size: 23px; }
  .rc-hero-body p { font-size: 13.5px; }
  .rc-hero-nav { display: none; }             /* 모바일은 스와이프 */
  .rc-sec { margin-top: 38px; }
  .rc-sechead h2 { font-size: 19px; }
  .rc-cats { grid-template-columns: repeat(4, 1fr); }
  .rc-cat-ico { width: 58px; height: 58px; border-radius: 17px; }
  .rc-promos { grid-template-columns: 1fr; margin-top: 38px; }
  .rc-band { flex-direction: column; gap: 12px; }
}


/* ── 업소 상세: 사진이 없을 때 히어로를 1단으로 ──────────────────
   `.kt-hero` 는 갤러리(좌) + 요약(우) 2단 그리드다. 사진이 0장이면 좌측 칸이
   빈 채로 자리를 차지해 화면 절반이 흰 여백이 된다. 사진이 들어오면 이 클래스가 안 붙는다. */
.kt-hero.nogal { grid-template-columns: minmax(0, 1fr); }
.kt-hero.nogal .kt-sum { max-width: 720px; }

/* ── 매거진 분류 pill — am.css 의 피치/골드를 딥틸로 덮는다 ────────
   am.css 는 `--am-gold`(코랄) 그라데이션과 rgba(224,123,31,…) 을 **하드코딩**해 두었다.
   `:root` 만 바꿔서는 안 지워진다(오늘 메뉴바에서 같은 함정을 겪었다). */
#bo_gall .bo_cate_link {
  color: var(--kt-primary) !important;
  background: var(--kt-soft) !important;
  border: 1px solid var(--kt-line) !important;
}
#bo_gall .gall_box:hover .bo_cate_link {
  background: var(--kt-primary) !important; color: #fff !important; border-color: var(--kt-primary) !important;
}
#bo_v .bo_v_cate {
  background: var(--kt-primary) !important; color: #fff !important;   /* 흰 글자 5.93:1 */
}

/* ── 업소 카드 바닥 정렬 · 칩 색 ──────────────────────────────────
   ★`lib/kt.shop.php` 주석은 "CSS 에서 margin-top:auto 로 바닥 정렬"이라고 적어 두었는데
     **kt.css 에 그 규칙이 없었다**(`.kt-shop{display:block}`). 그래서 제목 1~2줄·주소 1~2줄에 따라
     하단 칩 줄이 카드마다 다른 높이에 떠 목록이 들쭉날쭉했다(2026-09-01 사용자 지적).
     주석이 있다고 구현된 게 아니다 — 실제 규칙을 확인할 것. */
.kt-shop   { display: flex; flex-direction: column; }
.kt-shop-b { flex: 1 1 auto; display: flex; flex-direction: column; }

/* 제목 2줄 고정 — 1줄짜리와 2줄짜리가 섞여도 아래 줄이 같은 높이에서 시작한다 */
.kt-shop-b h4 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em; color: var(--kt-ink);
}
/* 주소 2줄까지, 넘치면 자름 */
.kt-shop-addr {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--kt-mute);
}
/* 칩 줄은 항상 카드 바닥에 붙인다 */
.kt-shop-foot { margin-top: auto; padding-top: 10px; }
.kt-shop-meta { display: flex; flex-wrap: wrap; gap: 5px; }

/* 칩 색 — am.css 의 옛 로즈/피치를 딥틸로 (여기서도 선택자 단위로 덮는다) */
.kt-shop-meta span, .kt-tagmin {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--kt-primary) !important; background: var(--kt-soft) !important;
  border: 1px solid var(--kt-line) !important;
}