@charset "UTF-8";
/* =========================================================
   비짓강남 리디자인 시안 — page-recommend.css (강남 추천 페이지 전용)
   - style.css · sub.css 다음에 불러온다. 토큰(--ink, --blue, --mint, --pink …)만 사용.
   목차: 1. 히어로  2. 강남 Place  3. 인플루언서 PICK  4. 강남둘레길  5. 강남 K-Pop  6. 공통 보조
   ========================================================= */

/* ---------- 6. 공통 보조 (작은 버튼, 줄바꿈 방지) ---------- */
.btn--sm { min-height: 48px; padding: 0 20px; gap: 8px; font-size: 15px; }
.nowrap { white-space: nowrap; }

/* ---------- 1. 히어로: 오른쪽 하트 창 (메인 2번 슬라이드 모티프) ---------- */
.rec-hero .sub-hero__media { align-self: center; padding: 8px 18px 18px 0; }
.sub-hero__media .rec-heart { width: 100%; max-width: 340px; margin-inline: auto; }
/* 데스크톱은 하트 창이 장식 역할을 하므로 작은 하트(모바일·태블릿 전용)는 숨김 */
@media (min-width: 1280px) {
  .rec-hero .sub-hero__deco { display: none; }
}

/* ---------- 2. 강남 Place ---------- */
.fchip__ico { width: 18px; height: 18px; }
.fchip[aria-pressed="true"] .fchip__ico { color: var(--mint); }
@media (min-width: 768px) {
  /* 칩이 9개라 태블릿 이상에서는 줄바꿈 (가로 스크롤 숨김 방지) */
  .place-filter { flex-wrap: wrap; overflow: visible; }
}

.place-grid .card__media img.place-img--station { object-position: 50% 30%; }
.place-grid .card__media img.place-img--tree { object-position: 50% 22%; }
.place-grid .card__media img.place-img--crowd { object-position: 72% 50%; }
.place-grid .art { padding: 24px; }
@media (max-width: 767.98px) {
  .place-grid .card__media { aspect-ratio: 2 / 1; } /* 모바일: 카드 12개가 너무 길어지지 않도록 낮게 */
  .place-grid .art__icon { width: 32px; height: 32px; }
}
.place-grid .art__icon { width: 40px; height: 40px; margin-bottom: 4px; }
.place-grid .card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.place-grid .card__tags { margin-top: 6px; }
.place-grid .card__tags li { background: var(--mint-soft); color: var(--ink); }
.place-grid .card__foot { flex-wrap: wrap; }
.card__route { display: inline-flex; align-items: center; gap: 4px; color: var(--gray); font-size: 13px; font-weight: 600; }
.card__route .ico { width: 1.1em; height: 1.1em; color: var(--blue); }
.card__foot .card__go { margin-left: auto; }

/* 물길 그래픽 (양재천): 글자 아래로 흐르는 두 줄 물결 */
.place-art--stream > * { z-index: 1; }
.place-art--stream::before,
.place-art--stream::after {
  content: ""; position: absolute; left: -12%; right: -12%; height: 30%; z-index: 0;
  border-radius: 50%; border-top: 10px solid var(--mint);
}
.place-art--stream::before { bottom: -6%; }
.place-art--stream::after { bottom: -22%; border-top-color: #fff; }

.place-note { margin-top: 32px; }
@media (min-width: 768px) { .place-note { margin-top: 40px; } }

/* ---------- 3. 인플루언서 PICK (에디터 예시 코스) ---------- */
.pick-note { margin-bottom: 28px; }
.pick-grid { display: grid; gap: 20px; }
.pick-grid > li { display: flex; }
.pick-card {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); background: #fff;
}
.pick-card__media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.pick-card__media .cover { transition: transform .5s var(--ease); }
.pick-card:hover .pick-card__media .cover { transform: scale(1.04); }
.pick-card__media .cover--pick { gap: 18px; }
.pick-card__media .cover__word { font-size: 40px; line-height: .92; }
.pick-card__media .cover__phone { width: 44px; height: 72px; border-width: 3px; border-radius: 12px; }
.pick-card__media .cover__phone svg { width: 20px; height: 20px; }
.pick-cover--blue { background: var(--blue); }
.pick-cover--blue .cover__word { color: #fff; }
.pick-cover--blue .cover__phone { border-color: var(--mint); }
.pick-cover--pink { background: var(--pink); }
.pick-cover--pink .cover__phone { border-color: var(--ink); }
.pick-cover--pink .cover__phone svg { color: #fff; }

.pick-card__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; }
.pick-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--gray); font-size: 13px; font-weight: 700; }
.pick-card__title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.pick-card__desc { color: var(--gray); font-size: 15px; line-height: 1.65; }
.pick-steps { margin-top: 6px; gap: 10px; }
.pick-steps > li { grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; }
.pick-steps > li::before { width: 36px; height: 36px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 13px; }
.pick-steps .steps__title { padding-top: 5px; font-size: 16px; line-height: 1.5; }
.pick-steps .steps__text { font-size: 14px; line-height: 1.5; }
.pick-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }

@media (min-width: 768px) {
  .pick-card { flex-direction: row; }
  .pick-card__media { flex: 0 0 34%; aspect-ratio: auto; min-height: 100%; }
  .pick-card__body { padding: 28px 28px 30px; }
}
@media (min-width: 1280px) {
  .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .pick-card { flex-direction: column; }
  .pick-card__media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .pick-card__title { font-size: 24px; }
}

/* ---------- 4. 강남둘레길 (블루 섹션) ---------- */
.course-jump { margin-bottom: 28px; }
.course-jump ul { display: flex; flex-wrap: wrap; gap: 8px; }
.course-jump a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 6px;
  border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .7); color: #fff;
  font-size: 15px; font-weight: 600; transition: background-color .2s, border-color .2s, color .2s;
}
.course-jump a:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.course-jump__no {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--mint); color: var(--ink); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.course-jump a:hover .course-jump__no { background: var(--ink); color: var(--mint); }

.course-grid { display: grid; gap: 20px; }
.course-card { display: flex; }
.course-card__inner {
  flex: 1; display: flex; flex-direction: column; padding: 10px;
  border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2);
  transition: border-color .2s, box-shadow .2s;
}
.course-card:hover .course-card__inner { border-color: rgba(255, 255, 255, .5); }
/* 메인의 '자세히 보기'(#course-N)로 들어오면 해당 코스를 강조 */
.course-card:target .course-card__inner { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint); }
.course-card .route { border-radius: 16px; }
.course-card .route__svg { height: auto; aspect-ratio: 2 / 1; } /* 모바일: 위아래를 살짝 잘라 낮게 (preserveAspectRatio=slice) */
@media (min-width: 768px) { .course-card .route__svg { aspect-ratio: 16 / 10; } }
.course-card__body { flex: 1; display: flex; flex-direction: column; padding: 18px 12px 12px; }
.course-card__no { color: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.course-card__title { margin-top: 2px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.course-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.course-card__tags li { padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); font-size: 13px; font-weight: 600; }
.course-card__desc { margin-top: 12px; color: rgba(255, 255, 255, .86); font-size: 15px; line-height: 1.6; }
.course-card .stops__list { margin-top: 14px; }
.course-card .stops__list li { gap: 14px; min-height: 52px; font-size: 16px; line-height: 1.45; }
.course-card .stops__list li::before { width: 36px; height: 36px; font-size: 14px; }
.course-card .stops__list li:not(:last-child)::after { left: 17px; top: 40px; height: calc(100% - 28px); }
.course-card__actions { margin-top: auto; padding-top: 18px; }
.course-card__actions .btn { width: 100%; }

.dulle-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .24);
}
.dulle-foot__note { display: flex; align-items: flex-start; gap: 10px; color: #E6EAFF; font-size: 15px; line-height: 1.6; }
.dulle-foot__note .ico { flex: none; margin-top: 2px; color: var(--mint); }

@media (min-width: 768px) {
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dulle-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .dulle-foot .btn { flex: none; }
}
@media (min-width: 1280px) {
  .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .course-jump { margin-bottom: 40px; }
}

/* ---------- 5. 강남 K-Pop ---------- */
#kpop .feature { display: flex; flex-direction: column; }
/* 태블릿 3열 배치는 sub.css .features--3 공통 규칙이 처리 */
.feature__link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  min-height: 44px; margin-top: auto; padding-top: 12px;
  color: var(--blue); font-size: 15px; font-weight: 700;
}
.feature__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.feature__link .ico { transition: transform .2s var(--ease); }
.feature__link:hover .ico { transform: translateX(4px); }

.kpop-manner {
  display: grid; gap: 20px; padding: 28px 22px;
  border-radius: var(--radius-lg); background: #F6F7F8;
}
.kpop-manner .sub-title { margin-bottom: 8px; }
.kpop-manner__lead { color: var(--gray); font-size: 15px; }
.kpop-manner .check-list a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .kpop-manner { padding: 40px; } }
@media (min-width: 1280px) {
  .kpop-manner { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 72px; padding: 56px; align-items: start; }
  .kpop-manner__head { grid-row: 1 / span 2; }
  .kpop-manner .check-list, .kpop-manner .note-box { grid-column: 2; }
}