/* ============================================================
   Stay Moments · 도시 추천 UI
   prefix: sm-city-  /  모든 규칙은 .sm-city 하위로만 적용됩니다.
   ============================================================ */

.sm-city{
  /* ── 색상 토큰 (여기만 바꾸면 전체 톤이 바뀝니다) ── */
  --sm-city-brand:#1f5b45;      /* 딥그린 — 선택 탭, 강조 */
  --sm-city-brand-dark:#17452f;
  --sm-city-brand-soft:#e7f0ec;
  --sm-city-ink:#1a1a1a;        /* 제목·도시명 */
  --sm-city-ink-soft:#3d4a52;
  --sm-city-slate:#6a7780;      /* 보조 텍스트 */
  --sm-city-mute:#9aa4ab;
  --sm-city-paper:#f7f8f8;      /* 아주 연한 회색 배경 */
  --sm-city-card:#ffffff;
  --sm-city-line:#ebebeb;
  --sm-city-line-2:#dcdcdc;
  --sm-city-point:#a8760f;      /* 비행시간 골드 */
  --sm-city-ph:#eef0ef;         /* 이미지 플레이스홀더 */
  --sm-city-radius:16px;
  --sm-city-max:1440px;
  --sm-city-pad:16px;

  box-sizing:border-box;
  background:var(--sm-city-paper);
  color:var(--sm-city-ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:15px;
  line-height:1.6;
  padding:40px 0 56px;
  -webkit-font-smoothing:antialiased;
}
.sm-city *,
.sm-city *::before,
.sm-city *::after{box-sizing:border-box}

/* 테마 스타일이 새어 들어오는 것을 막는 최소 리셋 */
.sm-city h2,
.sm-city h3,
.sm-city p,
.sm-city ul,
.sm-city li{margin:0;padding:0;border:0;background:none}
.sm-city ul{list-style:none}
.sm-city a{text-decoration:none;color:inherit}
.sm-city img{display:block;max-width:100%;height:auto;border:0}
.sm-city button,
.sm-city input,
.sm-city select{
  font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;
  margin:0;border-radius:0;-webkit-appearance:none;appearance:none;
}
.sm-city button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
.sm-city :focus-visible{outline:2px solid var(--sm-city-brand);outline-offset:3px;border-radius:6px}

.sm-city__inner{max-width:var(--sm-city-max);margin:0 auto;padding:0 var(--sm-city-pad)}
.sm-city__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 상단 콘텐츠 ─────────────────────────────────────── */
.sm-city__head{max-width:760px;margin-bottom:28px}
.sm-city__title{
  font-family:'Nanum Myeongjo','Noto Serif KR',serif;
  font-size:clamp(28px,6.2vw,44px);
  font-weight:700;
  line-height:1.34;
  letter-spacing:-.02em;
  word-break:keep-all;
  text-wrap:balance;
  color:var(--sm-city-ink);
}
.sm-city__desc{
  margin-top:16px;
  font-size:15px;
  line-height:1.8;
  color:var(--sm-city-slate);
  word-break:keep-all;
}
.sm-city__br{display:none}

/* ── 도시 검색 ───────────────────────────────────────── */
.sm-city__searchwrap{position:relative;max-width:420px;margin-bottom:26px}
.sm-city__search{
  width:100%;height:48px;
  padding:0 40px 0 44px;
  background:var(--sm-city-card);
  border:1px solid var(--sm-city-line-2);
  border-radius:999px;
  font-size:15px;color:var(--sm-city-ink);
  transition:border-color .18s ease;
}
.sm-city__search::placeholder{color:var(--sm-city-mute)}
.sm-city__search:hover{border-color:#c2c2c2}
.sm-city__search:focus{border-color:var(--sm-city-brand);outline:none;box-shadow:0 0 0 3px rgba(31,91,69,.12)}
.sm-city__searchicon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--sm-city-mute);pointer-events:none;
}
.sm-city__clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  display:none;align-items:center;justify-content:center;color:var(--sm-city-slate);
}
.sm-city__clear:hover{background:var(--sm-city-paper)}
.sm-city__searchwrap.is-filled .sm-city__clear{display:flex}

/* ── 1단 지역 탭 ─────────────────────────────────────── */
.sm-city__tabsrow{
  margin:0 calc(var(--sm-city-pad) * -1) 14px;
  padding:2px var(--sm-city-pad) 6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.sm-city__tabsrow::-webkit-scrollbar{display:none}
.sm-city__tabs{display:flex;gap:8px;width:max-content;min-width:100%}
.sm-city__tab{
  flex:0 0 auto;
  min-height:44px;
  padding:10px 20px;
  background:var(--sm-city-card);
  border:1px solid var(--sm-city-line-2);
  border-radius:999px;
  font-size:15px;font-weight:400;
  color:var(--sm-city-slate);
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.sm-city__tab:hover{border-color:var(--sm-city-brand);color:var(--sm-city-brand)}
.sm-city__tab:active{transform:translateY(1px)}
.sm-city__tab[aria-selected="true"]{
  background:var(--sm-city-brand);
  border-color:var(--sm-city-brand);
  color:#fff;
  font-weight:700;              /* 색상 외의 선택 단서 */
}

/* ── 2단 지역 필터 ───────────────────────────────────── */
.sm-city__sub{margin-bottom:22px}
.sm-city__subtabs{display:none;flex-wrap:wrap;gap:6px 18px;align-items:center}
.sm-city__subtab{
  min-height:32px;
  padding:4px 2px;
  font-size:14px;
  color:var(--sm-city-slate);
  border-bottom:1.5px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.sm-city__subtab:hover{color:var(--sm-city-brand)}
.sm-city__subtab[aria-pressed="true"]{
  color:var(--sm-city-brand);
  font-weight:700;              /* 색상 외의 선택 단서 */
  border-bottom-color:var(--sm-city-brand);
}
.sm-city__selectwrap{position:relative;display:block;max-width:360px}
.sm-city__selectlabel{display:block;font-size:13px;color:var(--sm-city-slate);margin-bottom:6px}
.sm-city__select{
  width:100%;min-height:46px;
  padding:0 40px 0 16px;
  background:var(--sm-city-card);
  border:1px solid var(--sm-city-line-2);
  border-radius:12px;
  font-size:15px;color:var(--sm-city-ink);
}
.sm-city__selectwrap::after{
  content:"";position:absolute;right:16px;bottom:18px;
  width:8px;height:8px;border-right:1.5px solid var(--sm-city-slate);
  border-bottom:1.5px solid var(--sm-city-slate);transform:rotate(45deg);pointer-events:none;
}

/* ── 안내 문구 / 상태 줄 ─────────────────────────────── */
.sm-city__statusrow{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 16px;padding-bottom:14px;border-bottom:1px solid var(--sm-city-line);margin-bottom:8px;
}
.sm-city__count{font-size:14px;color:var(--sm-city-slate)}
.sm-city__count b{color:var(--sm-city-ink);font-weight:700}
.sm-city__notice{font-size:12.5px;line-height:1.6;color:var(--sm-city-mute);word-break:keep-all}

/* ── 카드 그리드 ─────────────────────────────────────── */
.sm-city__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  padding:24px 0 0;
}
.sm-city-card{
  display:block;
  background:var(--sm-city-card);
  border:1px solid var(--sm-city-line);
  border-radius:var(--sm-city-radius);
  overflow:hidden;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.sm-city-card:hover{
  transform:translateY(-3px);
  border-color:var(--sm-city-line-2);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.sm-city-card:focus-visible{outline:2px solid var(--sm-city-brand);outline-offset:3px}

.sm-city-card__media{
  position:relative;
  height:224px;
  background:var(--sm-city-ph);
  overflow:hidden;
}
.sm-city-card__img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.sm-city-card:hover .sm-city-card__img{transform:scale(1.035)}
.sm-city-card__media.is-empty .sm-city-card__img{display:none}
.sm-city-card__en{
  position:absolute;left:14px;bottom:12px;
  font-size:11px;font-weight:500;letter-spacing:.16em;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.sm-city-card__media.is-empty .sm-city-card__en{color:var(--sm-city-mute);text-shadow:none}

.sm-city-card__badge{
  position:absolute;left:12px;top:12px;
  display:inline-flex;align-items:center;gap:5px;
  max-width:calc(100% - 24px);
  padding:6px 11px;
  background:rgba(255,255,255,.96);
  border-radius:999px;
  font-size:12px;font-weight:500;line-height:1.3;
  color:var(--sm-city-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sm-city-card__badge b{color:var(--sm-city-point);font-weight:700}

.sm-city-card__body{padding:16px 18px 18px}
.sm-city-card__name{
  font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  color:var(--sm-city-ink);word-break:keep-all;
}
.sm-city-card__meta{
  margin-top:6px;
  font-size:13.5px;color:var(--sm-city-slate);
  word-break:keep-all;
}
.sm-city-card__note{
  margin-top:8px;font-size:12.5px;color:var(--sm-city-mute);word-break:keep-all;
}

/* ── 빈 상태 / 더보기 ────────────────────────────────── */
.sm-city__empty{padding:64px 20px;text-align:center;color:var(--sm-city-slate);font-size:15px}
.sm-city__empty[hidden]{display:none}
.sm-city__morewrap{display:flex;justify-content:center;padding-top:32px}
.sm-city__morewrap[hidden]{display:none}
.sm-city__more{
  min-height:50px;
  padding:12px 30px;
  background:var(--sm-city-card);
  border:1px solid var(--sm-city-line-2);
  border-radius:999px;
  font-size:15px;font-weight:500;color:var(--sm-city-ink);
  transition:background-color .18s ease,border-color .18s ease;
}
.sm-city__more:hover{background:#fff;border-color:var(--sm-city-brand);color:var(--sm-city-brand)}
.sm-city__more span{color:var(--sm-city-slate);font-weight:400}

/* ══ 태블릿 768px 이상 ═══════════════════════════════ */
@media (min-width:768px){
  .sm-city{--sm-city-pad:24px;padding:56px 0 72px}
  .sm-city__head{margin-bottom:32px}
  .sm-city__desc{font-size:16px}
  .sm-city__br{display:inline}
  .sm-city__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .sm-city-card__media{height:auto;aspect-ratio:16/10}
  .sm-city__subtabs{display:flex}
  .sm-city__selectwrap{display:none}
  .sm-city__statusrow{padding-bottom:16px}
}

/* ══ PC 1024px 이상 ═════════════════════════════════ */
@media (min-width:1024px){
  .sm-city{--sm-city-pad:32px;padding:72px 0 88px}
  .sm-city__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .sm-city-card__body{padding:24px 22px 26px}
  .sm-city-card__name{font-size:21px}
}

/* ══ 대형 PC 1440px 이상 ════════════════════════════ */
@media (min-width:1440px){
  .sm-city__grid{gap:30px}
}

/* ══ 소형 모바일 대응 ═══════════════════════════════ */
@media (max-width:400px){
  .sm-city{--sm-city-pad:16px}
  .sm-city-card__badge{font-size:11px;padding:5px 9px;gap:4px}
  .sm-city-card__name{font-size:19px}
  .sm-city__tab{padding:10px 16px;font-size:14.5px}
}

/* ══ 모션 최소화 ════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .sm-city *,
  .sm-city *::before,
  .sm-city *::after{transition:none !important;animation:none !important}
  .sm-city-card:hover{transform:none}
  .sm-city-card:hover .sm-city-card__img{transform:none}
}