/* assets/css/chungwol-index.css
 * 5/20 청월당 100% 카피 — paljalab/index.html 컴포넌트
 * 사토시 큰 방향 재정의: 사이트 wide 청월 색 그대로 먼저, 우리 골드/크림 토큰 보류
 * 컴포넌트: 색 토큰 / 영상 banner / 리뷰 carousel / 하단 fixed nav / 추천 섹션 청월 톤
 */

/* ========== 청월 색 토큰 ========== */
:root {
  --cw-dark:         #111111;
  --cw-navy:         #1B2F49;
  --cw-blue:         #04336D;
  --cw-blue-mid:     #2B557E;
  --cw-cream:        #F5F3EC;
  --cw-sky:          #BDCEED;
  --cw-border:       #F1F1F1;
  --cw-border-mid:   #E1E1E1;
  --cw-gray:         #757575;
  --cw-text-mid:     #4A4A4A;
  --cw-star-on-1:    #FFD988;
  --cw-star-on-2:    #FFB921;
  --cw-star-off:     #D9D9D9;
  --cw-font:         'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}

/* ========== Pretendard Variable 폰트 = head 안 link 로 이동 (5/20 사토시 P0 fix)
   기존 @font-face URL "cdn.jsdelivr.net/.../woff2/PretendardVariable.woff2" = 404 Not Found
   → 폰트 로드 실패 → fallback Noto Sans/sans-serif 로 떨어짐 → "스타일 풀림" 사토시 발견
   → index.html head 안 NPM CSS link 박음 (https://cdn.jsdelivr.net/npm/pretendard@1.3.9/.../pretendardvariable.min.css) */

/* ========== Hero carousel 사진 슬라이드 (5/22 사토시: TOP 배지·라벨 전부 사진 안 박힘, 4:5 사진만) ========== */
.hero-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: var(--cw-dark);
}
.hero-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 5/22: hero 일부 0.758 비율 섞임 → contain 으로 배지/라벨 잘림 0 (다크 배경 letterbox 블렌드) */
  display: block;
}

/* ========== 추천 섹션 (5/20 사토시 P0 — 흰 배경 단일 / 두 줄 깨짐 영구 fix / SSoT) ========== */
/* 5/20: style.css 안 옛 .reco-section* 정의 폐기 후 chungwol-index.css SSoT. !important 박아 다른 잔재 cascade override 차단 */
.reco-section--chungwol {
  position: relative;
  background: #ffffff !important;
  padding: 32px 16px 24px !important;
  margin: 8px 0 0 !important;
}
.reco-section--chungwol .reco-section__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}
.reco-section--chungwol .reco-section__title {
  font-family: var(--cw-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--cw-dark) !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  padding: 0 !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
  background: transparent !important;
}
.reco-section--chungwol .reco-section__login-hint {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--cw-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--cw-gray) !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
}
.reco-section--chungwol .reco-section__next {
  position: absolute;
  right: 10px;
  top: 64%;
  transform: translateY(-50%);
  z-index: 5;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid var(--cw-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  color: var(--cw-dark);
  transition: transform 0.15s ease;
}
.reco-section--chungwol .reco-section__next:hover { transform: translateY(-50%) translateX(2px); }
.reco-section--chungwol .reco-section__next svg { width: 16px; height: 16px; }

/* ========== 추천 carousel "이거 내 이야긴데" — 텍스트 박힌 사진 자리 (사토시 추후 자산 교체) ========== */
.reco-section--chungwol .reco-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reco-section--chungwol .reco-carousel::-webkit-scrollbar { display: none; }
.reco-section--chungwol .reco-card {
  position: relative;
  flex: 0 0 160px;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cw-dark);
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
}
.reco-section--chungwol .reco-card picture,
.reco-section--chungwol .reco-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reco-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.reco-card__label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  color: #fff;
  font: 700 14px/1.3 var(--cw-font);
  letter-spacing: -0.025em;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  z-index: 2;
}
.reco-card__label-sub {
  display: block;
  margin-top: 2px;
  font: 400 11px/1.3 var(--cw-font);
  color: rgba(255,255,255,.82);
  letter-spacing: -0.01em;
}

/* ========== 섹션 분리 (5/20 사토시 깨달음 — "옅게 나 분리됐어요,," subtle) ========== */
.cw-divider {
  display: block;
  width: calc(100% - 32px);
  margin: 20px auto;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.04);   /* 거의 안 보이는 옅은 라인 */
}
.cw-section-gap {
  display: block;
  height: 24px;
}

/* ========== 영상 banner (5/20 사토시 P0 — 사이트 배경 흰색 유지, 영상 자체는 다크 inner) ========== */
.video-banner {
  margin: 24px 0 8px;
  padding: 0 16px;
  background: #fff;
}
.video-banner__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cw-dark);
}
.video-banner__video,
.video-banner__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.video-banner__caption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  right: 18px;
  color: #fff;
  font: 600 16px/1.4 var(--cw-font);
  letter-spacing: -0.025em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.video-banner__sub {
  display: block;
  margin-top: 4px;
  font: 400 12px/1.4 var(--cw-font);
  color: rgba(255,255,255,.78);
  letter-spacing: 0;
}

/* ========== 리뷰 carousel ========== */
.review-section {
  padding: 28px 0 8px;
  background: #fff;
}
.review-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 12px;
}
.review-section__title {
  font: 700 18px/1.4 var(--cw-font);
  color: var(--cw-dark);
  letter-spacing: -0.025em;
  margin: 0;
  word-break: keep-all;
}
.review-section__count {
  font: 500 13px/1 var(--cw-font);
  color: var(--cw-gray);
}

.review-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 4px 16px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.review-carousel::-webkit-scrollbar { display: none; }

/* 5/20 사토시 P0: 프사 X, 별점→서비스→후기→이름·시간 순 단순 카드 */
.review-card {
  flex: 0 0 240px;
  border: 1px solid var(--cw-border);
  border-radius: 10px;
  background: #fff;
  scroll-snap-align: start;
  transition: box-shadow .15s ease, transform .15s ease;
}
.review-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  transform: translateY(-1px);
}

/* 5/22 사토시: 인물 사진 후기 카드 (4:5 사진 + 하단 scrim + 후기 카피 overlay) */
.review-card--photo {
  flex: 0 0 200px;
  position: relative;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cw-dark);
}
.review-card--photo:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.review-card__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.review-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.84) 100%);
  pointer-events: none;
}
.review-card__quote {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
}
.review-card--photo .review-card__stars { margin-bottom: 6px; }
.review-card--photo .review-card__star { width: 13px; height: 13px; }
.review-card--photo .review-card__body {
  margin: 0 0 6px;
  color: #fff;
  font: 600 12.5px/1.5 var(--cw-font);
  letter-spacing: -0.02em;
  word-break: keep-all;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.review-card--photo .review-card__name {
  color: rgba(255,255,255,.85);
  font: 500 11.5px/1 var(--cw-font);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.review-card__btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 152px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.review-card__stars {
  display: flex;
  gap: 1px;
  margin-bottom: 8px;
}
.review-card__star {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.review-card__service {
  font: 600 13px/1.3 var(--cw-font);
  color: var(--cw-dark);
  letter-spacing: -0.025em;
  margin: 0 0 10px;
}
.review-card__body {
  flex: 1;
  font: 400 13px/1.6 var(--cw-font);
  color: var(--cw-text-mid);
  letter-spacing: -0.015em;
  word-break: keep-all;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 11px/1 var(--cw-font);
  color: var(--cw-gray);
}
.review-card__name {
  font-weight: 500;
  color: var(--cw-dark);
}
.review-card__sep {
  display: inline-block;
  width: 1px;
  height: 9px;
  background: var(--cw-border-mid);
}
.review-card__time {
  color: var(--cw-gray);
}

/* ========== 하단 fixed tab-bar (paljalab 기존 .tab-bar 청월 톤 override) ========== */
/* 5/20 사토시 P0: "네비게이션 제대로해봐" — 청월 톤 (흰 배경 + 옅은 border-top, AI 티 X) */
.tab-bar {
  position: fixed !important;
  bottom: 0;
  left: 50% !important;
  transform: translateX(-50%);
  width: 100% !important;
  max-width: var(--site-max, 448px) !important;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: 60px !important;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: #fff !important;
  border-top: 1px solid var(--cw-border) !important;
  box-shadow: none !important;
  z-index: 60;
}
.tab-bar__item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px !important;
  flex: 1;
  height: 100%;
  text-decoration: none;
  background: transparent !important;
  border: 0;
  color: var(--cw-gray) !important;
  font: 500 11px/1 var(--cw-font) !important;
  letter-spacing: -0.02em;
  cursor: pointer;
  padding: 0 !important;
}
.tab-bar__item--active {
  color: var(--cw-dark) !important;
  font-weight: 600 !important;
}
.tab-bar__icon {
  width: 22px !important;
  height: 22px !important;
  display: block;
  stroke: currentColor;
}
.tab-bar__label {
  font: inherit;
  color: inherit;
}
.tab-bar-spacer {
  height: calc(60px + env(safe-area-inset-bottom, 0));
}

/* 옛 .bottom-tab-bar 클래스 (chungwol-index.css 자체 박힌 거) — 미사용 cleanup */

/* ========== 별점 SVG 스타일 (use href shadow DOM 호환) ========== */
.cw-star-on { fill: url(#cwStarGrad); }
.cw-star-off { fill: var(--cw-star-off); }

/* ========== 페이지 푸터 spacing (하단 nav 가리지 않게) ========== */
body.has-bottom-nav { padding-bottom: 0; }