/* =========================================
   이음 메인(홈) — 디자인 시안 incoming/메인시안안.png 기준
   공통 리셋·토큰·글자 스타일(.fs-*)·태그·GNB 는 tokens.css 사용
========================================= */
.app{background:var(--white);padding-bottom:calc(120px + env(safe-area-inset-bottom))}

/* ---------- 헤더: 로고 + 검색·알림 ---------- */
/* 홈 좌우 여백 20px 통일 — 우측은 아이콘 버튼(44px) 안쪽 여백 10px 을 빼서 아이콘 자체가 20px 에 보이게 */
.home-head{display:flex;align-items:center;justify-content:space-between;
  padding:calc(24px + env(safe-area-inset-top)) 10px 0 20px}
.home-head__logo{display:flex;line-height:0}
/* logo-heritage.svg 는 흰색 도형 → 흰 배경에서 검정으로 렌더 */
.home-head__logo img{width:119px;height:32px;filter:brightness(0)}
.home-head__actions{display:flex}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;color:var(--g900)}
/* 안 읽은 알림이 있다 — 종 오른쪽 위의 점. 색은 마이페이지 'N'(.badge-n)과 같은 새 소식 색이다 */
.iconbtn{position:relative}
.iconbtn__dot{position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--teal-500);box-shadow:0 0 0 2px var(--white)}

/* ---------- 인트로: 헤드라인 + CTA + 3D 한옥 ---------- */
.home-intro{position:relative;padding:28px 20px 0}
.home-intro__title{position:relative;z-index:1;font-size:24px;font-weight:500;line-height:30px;
  letter-spacing:-.6px;color:var(--g900)}
.home-intro__cta{z-index:1;display:inline-flex;align-items:center;height:36px;margin-top:14px;padding:0 16px;
  border-radius:var(--radius-full);background:var(--blue-500);color:var(--white);
  font-size:15px;font-weight:500;letter-spacing:-.375px}
/* 이미지 여백(투명 영역)을 감안해 CTA 하단 라인에 한옥 기단이 맞도록 살짝 내림 */
/* 이미지 우측 투명 여백(약 10px)을 감안해 보이는 기단 끝이 20px 선에 오도록 right:10px */
.home-intro__img{position:absolute;right:10px;bottom:-8px;width:168px;height:auto;pointer-events:none}

/* ---------- 테마 묶음 리스트 (제목·코멘트·카운트 + Swiper 슬라이드) ---------- */
.home-themes{display:flex;flex-direction:column;gap:40px;margin-top:40px}
.home-theme{display:flex;flex-direction:column;gap:16px}
.home-theme__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 20px}
.home-theme__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
/* 현재/전체 카운트 — 제목(.fs-title 26px) 첫 줄과 높이 맞춤 */
.home-theme__count{flex:none;line-height:26px;font-variant-numeric:tabular-nums}
.home-theme__count b{color:var(--g900);font-weight:600}
/* 한 장 + 다음 카드 0.3장 노출: 좌 오프셋 20 + 카드 + 간격 12 + 카드×0.3 = 100% */
.home-theme__swiper .swiper-slide{width:calc((100% - 32px) / 1.3)}
/* Swiper 기본 .swiper{margin-left/right:auto} 해제 — 세로 flex(.home-theme) 안에서 auto 마진이 있으면
   stretch 가 꺼져 폭이 카드 최소폭 합(fit-content)으로 잡힘 → 좁은 화면에서 슬라이더가 넘쳐 마지막 카드가 잘림 */
.home-theme__swiper{margin-left:0;margin-right:0}
/* 테마 슬라이드 카드 제목만 16px/600 — 묶음 제목(18px)과 위계 구분 (피드 카드 제목은 공통 .fs-title 18px 유지) */
.home-theme .excard .fs-title{font-size:16px;font-weight:600;letter-spacing:-.4px;line-height:24px}

/* ---------- 즐길거리 피드 카드 (아래로 하나씩) ---------- */
.home-feed{display:flex;flex-direction:column;gap:40px;margin-top:40px;padding:0 20px}
.excard{display:flex;flex-direction:column;gap:20px}
.excard__photo{aspect-ratio:25/24;border-radius:24px;overflow:hidden;background:var(--g100)}
.excard__photo img,.excard__photo video{width:100%;height:100%;object-fit:cover;display:block}
/* 텍스트는 공통 .fs-cap(지역)/.fs-title(제목), 태그는 .tags/.tag--line (tokens.css) */
/* 캡션은 사진 안쪽으로 살짝(좌우 12px) 들여 카드 단위로 묶여 보이게 (홈 정렬선 20 + 12 = 32px) */
.excard__body{display:flex;flex-direction:column;gap:6px;padding:0 12px}
.excard__tags{flex-wrap:wrap;margin-top:8px}

/* ---------- 홈 광고 배너 (js/promo.js 가 이 클래스로 그린다) ---------- */
.home-banner{margin-top:40px;padding:0 20px}
.mice{position:relative;display:flex;align-items:center;justify-content:space-between;background:var(--g50);
  border-radius:16px;padding:20px;overflow:hidden}
/* 안쪽(사진·글)은 공통 .promo__* (tokens.css) 사용 — js/promo.js 가 그린다.
   아이콘을 스프라이트에서 오려 쓰던 규칙은 MICE 안내와 함께 걷어냈다(2026-09-16) */

/* ---------- 이곳도 즐겨보세요 — 사진 배너 슬라이드 (구 메인에서 이관 · Swiper) ---------- */
.home-spots{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.home-spots__title{padding:0 20px}
/* .swiper 의 overflow:hidden 으로 둥근 모서리 클립 (swiper 기본 margin:auto 덮어씀) */
.spotslider{margin:0 20px;border-radius:16px}
.spot{position:relative;height:150px;overflow:hidden;background:var(--g50)}
.spot__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 10%,rgba(0,0,0,.4) 71%)}
.spot__count{position:absolute;right:16px;bottom:22px;z-index:2;background:rgba(17,17,17,.4);color:var(--white);
  font-size:13px;font-weight:500;letter-spacing:-.275px;padding:0 8px;height:20px;display:inline-flex;
  align-items:center;border-radius:var(--radius-full);pointer-events:none}
.spot__copy{position:absolute;left:21px;bottom:19px;z-index:2;color:var(--white)}
.spot__sub{font-size:14px;letter-spacing:-.35px;line-height:20px}
.spot__name{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:700;letter-spacing:-.4px;
  line-height:24px;margin-top:4px}

/* 초소형(~374px): 한옥 일러스트가 헤드라인 2행과 겹치지 않게 축소 */
@media (max-width:374px){
  .home-intro__img{width:140px}
}
/* 태블릿(600px~): 카드 사진이 과도하게 길어지지 않게 가로 비율로 */
@media (min-width:600px){
  .home-intro__img{width:200px}
  .excard__photo{aspect-ratio:16/10}
  .spot{height:220px}
}