/* =========================================
   이음 메인 화면 — Figma node 94:603 퍼블리싱
   공통 리셋·앱 컨테이너·아이콘·GNB 는 tokens.css 사용
========================================= */

.app{background:var(--white);padding-bottom:calc(108px + env(safe-area-inset-bottom))}
.noscroll{scrollbar-width:none;-ms-overflow-style:none}
.noscroll::-webkit-scrollbar{display:none}

/* ---------- 섹션 공통 — 제목 폰트는 공통 .fs-title (tokens.css) 사용 ---------- */
.sec{padding:0 16px;margin-top:40px}
.sec__title{line-height:44px;height:44px;margin-bottom:8px}
.sec__title b{color:var(--blue-500);font-weight:700}
.sec__title--row{display:flex;align-items:center;justify-content:space-between;padding:0;height:auto}
.sec__title--row .sec__title{margin-bottom:0}
/* 당일 특가 카운트다운 */
.dealtimer{display:inline-flex;align-items:center;gap:4px;flex:none}
.dealtimer__unit{min-width:26px;height:26px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-50);color:var(--blue-500);border-radius:6px;font-size:15px;font-weight:700;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;box-sizing:border-box}
.dealtimer__sep{color:var(--blue-500);font-size:14px;font-weight:700;font-style:normal;line-height:1}

/* =========================================
   히어로
========================================= */
.hero{position:relative;height:470px;overflow:hidden;background:var(--g900)}
/* 슬라이드 트랙 — data-i 로 현재 페이지 이동 (JS는 속성만 갱신) */
.hero__track{position:absolute;inset:0;display:flex;transition:transform .5s cubic-bezier(.32,.72,0,1);touch-action:pan-y}
.hero__track[data-i="1"]{transform:translateX(-100%)}
.hero__track[data-i="2"]{transform:translateX(-200%)}
.hero__track[data-i="3"]{transform:translateX(-300%)}
.hero__slide{position:relative;flex:0 0 100%;overflow:hidden}
.hero__bg{position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.46),rgba(0,0,0,.46)),url(../images/photo-hanok.png) center/cover no-repeat}
.hero__bg--2{background-image:linear-gradient(rgba(0,0,0,.46),rgba(0,0,0,.46)),url(../images/photo-night.png)}
.hero__bg--3{background-image:linear-gradient(rgba(0,0,0,.46),rgba(0,0,0,.46)),url(../images/photo-detail.png)}
.hero__top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  min-width:0;height:51px;padding:calc(20px + env(safe-area-inset-top)) 16px 0}
.hero__logo{height:32px;width:181px;flex:none}
.hero__actions{display:flex;gap:8px}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;color:var(--white)}
.hero__copy{position:absolute;left:16px;bottom:140px;z-index:2;color:var(--white)}
.hero__sub{font-size:14px;font-weight:500;letter-spacing:-.35px;line-height:1.4}
.hero__title{font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1.4;margin-top:9px}
/* 페이지 바 — 짧은 게이지: 반투명 트랙 위에 현재 구간만 흰색 채움 (구간당 28px, 가운데 정렬) */
.hero__progress{position:absolute;left:50%;transform:translateX(-50%);bottom:112px;z-index:2;display:flex;
  height:3px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.35)}
.hero__progress span{display:block;flex:0 0 28px;height:100%;border-radius:3px;background:transparent;transition:background .25s}
.hero__progress span.on{background:var(--white)}

/* =========================================
   팝업 광고 (바텀시트) — 이미지 풀블리드 + 오버레이 카피 + 하단 텍스트 바
========================================= */
.adpop__link{position:relative;display:block}
.adpop__img{width:100%;height:420px;object-fit:cover;display:block;background:var(--g100)}
/* 상단 카피 가독용 그라데이션 */
.adpop__link::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0) 55%)}
.adpop__copy{position:absolute;left:24px;top:36px;right:24px;z-index:2;color:var(--white);
  display:flex;flex-direction:column;align-items:flex-start}
.adpop__eyebrow{font-size:14px;font-weight:600;letter-spacing:-.35px}
.adpop__title{font-size:22px;font-weight:700;letter-spacing:-.55px;line-height:1.4;margin-top:8px}
.adpop__cta{margin-top:16px;height:40px;padding:0 16px;display:inline-flex;align-items:center;
  background:var(--g900);color:var(--white);font-size:14px;font-weight:600;letter-spacing:-.35px;border-radius:6px}
.adpop__foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--g100);
  padding:0 20px env(safe-area-inset-bottom)}
.adpop__btn{height:56px;background:none;font-size:15px;font-weight:500;color:var(--g500);letter-spacing:-.375px}
.adpop__btn--x{color:var(--g900);font-weight:600}

/* =========================================
   예약 카드 (히어로 위로 겹침)
========================================= */
.resv{position:relative;z-index:3;margin:-86px 16px 0;background:var(--white);border-radius:8px;padding:16px;
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:12px}
.resv__head{display:flex;align-items:center;justify-content:space-between}
.resv__head-left{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
/* D-day 배지(.badge-dday)·텍스트(.fs-*)는 공통 tokens.css 사용 */
.resv__body{display:flex;gap:8px;align-items:flex-start}
/* 썸네일은 공통 .thumb .thumb--60 (tokens.css) 사용 */
.resv__info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.resv__divider{height:1px;background:var(--g200)}
.resv__dates{display:flex}
.resv__date{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.resv__date-value{display:flex;align-items:center;gap:4px}
.resv__date-value em{font-style:normal}

/* =========================================
   테마별 카테고리
========================================= */
/* 아이콘 배경은 공통 .icbox .icbox--56, 라벨은 .fs-cap-b (tokens.css) 사용 */
/* 모바일: 셀이 가로폭을 균등하게 꽉 채움(우측 여백 없음, gap 12px). 태블릿부터 고정폭 좌측정렬 */
.cats{display:flex;justify-content:flex-start;gap:12px}
.cat{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.cat__g{position:relative;width:30px;height:30px;overflow:hidden}
.cat__g img{position:absolute;max-width:none}
.cat__g img.cover{position:static;width:30px;height:30px;object-fit:contain}
.cat__lab{white-space:nowrap}

/* 초소형 화면(~359px)은 56px 아이콘 5개가 여백 없이 꽉 차 다닥다닥 붙어 보임 → 아이콘만 축소해 간격 확보 */
@media (max-width:359px){
  .cat{width:48px}
  .cat__ic{width:48px;height:48px}
  .cat__g{width:26px;height:26px}
  .cat__g img.cover{width:26px;height:26px}
}

/* =========================================
   홈 필터 칩
========================================= */
.chips{display:flex;gap:8px;overflow-x:auto;margin:4px 0 12px}
/* 칩(.chip/.chip--on)은 공통 tokens.css 사용 */

/* =========================================
   카드 캐러셀 (다음 카드 살짝 보이는 슬라이드)
========================================= */
.carousel{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:0 16px;
  scroll-snap-type:x mandatory;scroll-padding-left:16px;-webkit-overflow-scrolling:touch}
.card{flex:0 0 86%;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.card__photo{position:relative;width:100%;height:200px;border-radius:8px;overflow:hidden;background:var(--g50)}
.card__photo img{width:100%;height:100%;object-fit:cover}
.card__info{display:flex;flex-direction:column;gap:8px}
.card__ttl{display:flex;flex-direction:column;gap:4px;min-width:0}

/* =========================================
   와이드 리스트 카드 — 공통 .wcard/.tags/.price/.badge-best/.heart (tokens.css) 사용
========================================= */

/* =========================================
   이 근처 즐길거리 (주변 명소)
========================================= */
/* 이곳도 즐겨보세요 — 가로 스와이프 슬라이더 */
.spotslider{position:relative;border-radius:8px;overflow:hidden}
.spotslider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.spotslider__track::-webkit-scrollbar{display:none}
.spotslider .spot{flex:0 0 100%;border-radius:0;scroll-snap-align:start}
.spot{display:block;position:relative;height:150px;border-radius:8px;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:9999px}
.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}

/* =========================================
   BEST 3 (실시간 급상승 / 예약 많은 / 조회수 많은 — 드래그 전환)
========================================= */
.best{background:var(--g50);padding:16px;margin-top:40px}
.best .sec__title{padding:0}
.best__head{display:flex;align-items:center;justify-content:space-between}
.best__dots{display:flex;align-items:center;gap:5px}
.best__dots span{width:6px;height:6px;border-radius:9999px;background:var(--g300);transition:width .25s,background .25s}
.best__dots span.on{width:18px;background:var(--blue-500)}
/* 페이지 트랙 — data-i 로 슬라이드 (테마 슬라이더와 동일 패턴) */
.best__slider{overflow:hidden;touch-action:pan-y}
.best__track{display:flex;gap:16px;transition:transform .35s ease}
.best__track[data-i="1"]{transform:translateX(calc(-100% - 16px))}
.best__track[data-i="2"]{transform:translateX(calc(-200% - 32px))}
.best__track .best__card{flex:0 0 100%;min-width:0}
.best__card{background:var(--white);border-radius:8px;padding:0 12px;box-shadow:var(--shadow-flat)}
.best__row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--g200)}
.best__row:last-child{border-bottom:0}
/* 썸네일은 공통 .thumb .thumb--56 (tokens.css) 사용 */
.best__thumb .rank{position:absolute;left:0;top:0;width:20px;height:20px;background:var(--g900);color:var(--white);
  font-size:13px;font-weight:600;display:grid;place-items:center;border-bottom-right-radius:8px}
/* 텍스트는 공통 .fs-cap/.fs-name/.fs-cap-b (tokens.css) 사용 */
.best__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.best__price{white-space:nowrap}

/* =========================================
   MICE 단체 문의
========================================= */
.mice{position:relative;display:flex;align-items:center;justify-content:space-between;background:var(--g50);
  border-radius:8px;padding:20px;overflow:hidden}
/* 텍스트는 공통 .fs-label/.fs-cap (tokens.css) 사용 */
.mice__sub{margin-top:4px}
.mice__ic{position:relative;width:66px;height:67px;overflow:hidden;flex:none}
.mice__ic img{position:absolute;max-width:none}

/* =========================================
   이음 라이브 — 중앙 확대 캐러셀 (가운데 카드 강조, 양옆 살짝 보임)
========================================= */
/* 좌우 패딩: %는 부모 콘텐츠 폭(전체-32px) 기준이라 +16px 보정 → 첫/끝 카드도 정확히 중앙 정렬 */
.lives{display:flex;gap:0;overflow-x:auto;margin:0 -16px;padding:8px calc(50% - 94px);
  scroll-snap-type:x mandatory}
/* 양옆 카드 축소(scale .88)로 벌어지는 시각 간격을 음수 마진으로 보정 → 보이는 간격 ≈ 12px (앱 공통) */
.live{position:relative;flex:none;width:220px;height:318px;margin:0 -1px;border-radius:12px;overflow:hidden;background:var(--g50);
  scroll-snap-align:center;transform:scale(.88);opacity:.6;transition:transform .3s ease,opacity .3s ease}
.live--on{transform:scale(1);opacity:1}
/* 2개 이하: 캐러셀 효과 없이 기본 가로 리스트 (스케일이 없으므로 보정 마진 해제, gap 12px 복원) */
.lives--static{gap:12px;padding:8px 16px;scroll-snap-type:none}
.lives--static .live{margin:0;transform:none;opacity:1;scroll-snap-align:none}
.live__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.live::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5))}
.live__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;
  border-radius:9999px;background:rgba(0,0,0,.4);color:var(--white);display:grid;place-items:center;z-index:2}
.live__copy{position:absolute;left:10px;bottom:15px;z-index:2;color:var(--white)}
.live__sub{font-size:13px;letter-spacing:-.325px;line-height:16.5px}
.live__name{font-size:15px;font-weight:500;letter-spacing:-.375px;line-height:22px}

/* =========================================
   태블릿 (600px~) — 폭만 늘어나지 않게 레이아웃 재배치
========================================= */
@media (min-width:600px){
  .cat{flex:none;width:64px}
  .cat__ic{width:64px;height:64px;border-radius:22px}
  .cat__g{width:34px;height:34px}
  .cat__g img.cover{width:34px;height:34px}
  .card{flex:0 0 calc(50% - 6px)}
  .card__photo{height:220px}
  .spot{height:220px}
  .live{width:260px;height:376px;margin:0 -2px} /* 260px 카드 축소분(15.6px) 보정 → 보이는 간격 ≈ 12px */
  .lives{padding:8px calc(50% - 114px)}
}

/* icon-sprite 좌표 (index 카테고리·마이스 아이콘) */
.spr-a{height:401.57%;left:-65.49%;top:-83.53%;width:602.35%}
.spr-b{height:403.15%;left:-173.6%;top:-86%;width:566.79%}
.spr-c{height:324.05%;left:-245.89%;top:-60.76%;width:486.08%}
.spr-d{height:390.84%;left:-444.4%;top:-77.48%;width:593.05%}