/* 발리 시크릿 · 한 화면 앱 스타일
   여행 매거진 화보 톤 + 카드 + 둥근 모서리. 색은 우리 것(황토·올리브)을 쓴다. */
:root{
  /* 값은 base.css 한 곳에 있다. 매거진(#pane-read)·지도(#pane-map)도 같은 곳을 본다.
     색 하나를 바꾸면 다섯 탭이 함께 바뀐다. */
  --ink:var(--c-ink); --ink2:var(--c-ink2); --ink3:var(--c-ink3);
  --line:var(--c-line); --line2:var(--c-line2); --soft:var(--c-soft);
  --brand:var(--c-brand); --brand-d:var(--c-brand-d); --brand-ink:var(--c-brand-d);
  --brand-50:var(--c-brand-50); --olive:var(--c-olive); --hot:var(--c-hot);
  --shadow-sm:var(--sh-sm); --shadow-md:var(--sh-md);
  --ease-out-quint:cubic-bezier(.23,1,.32,1);   /* base.css --ease 와 거의 같은 곡선, 이름만 명시적으로 */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{background:var(--c-bg); color:var(--ink);
     font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
     -webkit-font-smoothing:antialiased;
     padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit;}
img{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px;}

/* ── 상단 ── */
.top{position:sticky; top:0; z-index:60; background:rgba(251,247,239,.93);
     backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);}
.top-in{display:flex; align-items:center; gap:14px; height:56px;}
.logo{font-weight:800; font-size:17px; letter-spacing:-.4px; white-space:nowrap;}
.logo em{color:var(--brand); font-style:normal;}
.pcnav{display:none; margin-left:8px; gap:2px;}
.pcnav button{padding:8px 13px; border-radius:var(--r-xs); font-size:14px; font-weight:600; color:var(--ink2);}
.pcnav button.on{background:var(--soft); color:var(--ink); font-weight:800;}
.top-cta{margin-left:auto; display:none; background:var(--brand); color:#fff; font-weight:800;
         font-size:13.5px; padding:9px 16px; border-radius:var(--r-xs); white-space:nowrap;}

/* ── 검색 ── */
.sbox{display:flex; align-items:center; gap:10px; background:var(--soft);
      border:1.5px solid transparent; border-radius:var(--r-sm); padding:12px 15px; transition:.15s;}
.sbox:focus-within{background:#fff; border-color:var(--ink);}
.sbox input{flex:1; min-width:0; border:0; outline:0; background:transparent;
            font-size:15px; font-family:inherit; color:var(--ink);}
.sbox input::placeholder{color:var(--ink3);}

/* ── 카테고리 ── */
.cats{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:14px 0 6px;}
.cat{display:flex; flex-direction:column; align-items:center; gap:7px; padding:8px 2px;
     border-radius:var(--r-sm); transition:transform .15s var(--ease);}
.cat:active{transform:scale(.94);}
.cat .ic{width:46px; height:46px; border-radius:15px; display:grid; place-items:center;}
.cat .nm{font-size:11.5px; font-weight:700; color:var(--ink2); letter-spacing:-.2px;}

/* ── 우리 투어 (돈) ──
   히어로는 우리 배에서 실제로 찍은 영상이 돌아간다. 스톡 사진과 구별되는 유일한 지점이라
   여기 한 곳에만 힘을 준다. 영상이 못 뜨는 환경에서는 사진 그대로 보이고 아무것도 깨지지 않는다. */
/* 모바일 기준. 영상 원본이 720×1280(세로)인데 예전엔 200px 짜리 가로 칸에 넣어
   object-fit:cover 로 위아래를 잘라내는 바람에 원본의 6분의 1만 보였다.
   폰에서는 세로로 길게 잡아 배와 노을이 실제로 보이게 하고, 넓은 화면에서만 가로로 눕힌다. */
.hero{margin:12px 0 4px; border-radius:26px; overflow:hidden; position:relative;
      background:#0B1114; display:flex; align-items:flex-end;
      aspect-ratio:4/5; min-height:380px; max-height:68vh;
      box-shadow:0 16px 40px rgba(20,24,30,.16);}
/* 발리다운 첫인상 — 사진·영상을 아주 천천히 확대해 살아있는 느낌을 준다(켄 번즈).
   순간이 아니라 '지금 이 순간 저기서 실제로 벌어지는 일'처럼 보이게 하는 게 목적이라
   확대 폭은 8%로 작게 잡았다. 크게 하면 화면이 어지럽다. */
.hero-still{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6;
            animation:heroZoom 22s ease-in-out infinite alternate;}
.hero-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
          opacity:0; transition:opacity 900ms linear; pointer-events:none;
          animation:heroZoom 22s ease-in-out infinite alternate;}
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
/* 재생이 실제로 시작된 뒤에만 사진과 바꿔치기한다. 검은 화면이 스치는 일이 없다. */
.hero.vid-on .hero-vid{opacity:.62;}
.hero.vid-on .hero-still{opacity:0; transition:opacity 900ms linear;}
/* 골드 톤 덧입힌 이중 그라디언트는 사진 위에서 줄/그레인처럼 얼룩져 보여 도로 뺐다
   (2026-08-08). 글자 읽히게 하는 단일 그라디언트만 남긴다. */
.hero-in{position:relative; padding:18px; width:100%;
         background:linear-gradient(transparent,rgba(6,10,8,.88) 62%);}
/* 제목·설명·예약 버튼은 항상 보이는 게 기본값이다 — 애니메이션은 "덤"이지 조건이 아니다.
   opacity:0 으로 숨겨뒀다가 애니메이션으로만 드러내는 방식은, 그 애니메이션이 무슨 이유로든
   안 돌면(카카오톡 인앱 브라우저, 백그라운드 로드 등) 글자·예약 버튼이 영영 안 보이게 된다.
   실제로 그렇게 되어 2026-08-08에 되돌렸다. transform 만 움직이고 opacity 는 건드리지 않는다
   — 애니메이션이 안 돌아도 제자리(translateY(0))에 그대로 보인다. */
.hero-tag{display:inline-flex; align-items:center; gap:5px; background:var(--hot); color:#fff;
          font-size:10.5px; font-weight:800; padding:4px 10px 4px 8px; border-radius:var(--r-pill); margin-bottom:9px;
          animation:heroRise 560ms var(--ease-out-quint) 120ms both;}
.hero-tag svg{width:11px; height:11px; flex:0 0 auto;}
.hero h2{margin:0 0 6px; font-size:26px; font-weight:900; color:#fff; letter-spacing:-.9px; line-height:1.22;
         animation:heroRise 560ms var(--ease-out-quint) 200ms both;}
.hero p{margin:0 0 13px; font-size:13.5px; color:rgba(255,255,255,.86); line-height:1.5; word-break:keep-all;
        animation:heroRise 560ms var(--ease-out-quint) 280ms both;}
.hero-row{display:flex; align-items:center; gap:11px; flex-wrap:wrap;
          animation:heroRise 560ms var(--ease-out-quint) 360ms both;}
.hero-go{background:var(--brand); color:#fff; font-weight:800; font-size:15px;
         padding:14px 24px; border-radius:var(--r-md);
         transition:transform 160ms var(--ease), box-shadow 160ms var(--ease);}
.hero-meta{font-size:11.5px; color:rgba(255,255,255,.72); line-height:1.5;}
@media (hover:hover){
  .hero:hover .hero-go{transform:translateY(-2px); box-shadow:0 8px 20px rgba(200,150,62,.34);}
}
.hero:active .hero-go{transform:scale(.97);}
@keyframes heroRise{ from{ transform:translateY(14px); } to{ transform:translateY(0); } }

/* 실제 손님 사진 스트립 — 만든 사진이 아니라는 걸 캡션 톤으로도 밝힌다. */
.rp-strip{margin:14px 0 4px;}
.rp-head{display:flex; align-items:baseline; gap:8px; margin-bottom:9px;}
.rp-head b{font-size:13.5px; font-weight:800;}
.rp-head span{font-size:11.5px; color:var(--ink3);}
.rp-rail{gap:9px;}
.rp{width:118px; margin:0;}
.rp .th,.rp img{display:block; width:118px; height:118px; border-radius:var(--r-md); overflow:hidden; object-fit:cover;}
.rp figcaption{margin-top:6px; font-size:11.5px; font-weight:700; color:var(--ink2); text-align:center;}
@media (hover:hover){
  .rp img{transition:transform 240ms var(--ease-out-quint);}
  .rp:hover img{transform:scale(1.06);}
  .post .th img,.prod .th img{transition:transform 240ms var(--ease-out-quint);}
  .post:hover .th img,.prod:hover .th img{transform:scale(1.06);}
  .owncard{transition:transform 180ms var(--ease-out-quint), box-shadow 180ms var(--ease-out-quint);}
  .owncard:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(200,150,62,.22);}
}

.sec-n{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink3);
       font-variant-numeric:tabular-nums;}
.more-wide{display:block; width:100%; margin-top:12px; padding:13px;
           border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
           font-size:14px; font-weight:700; color:var(--ink2);
           transition:transform .15s var(--ease), background .15s var(--ease);}
.more-wide:active{transform:scale(.985); background:var(--soft);}

/* 지금, 스랑안 — 실제 영상 위에 발리의 현재 시각을 얹는다.
   한국과 한 시간 차라는 걸 말로 설명하는 것보다 이게 빠르다. */
.hero-now{position:absolute; top:12px; right:12px; z-index:2;
          display:flex; align-items:center; gap:8px;
          padding:6px 11px 6px 9px; border-radius:var(--r-pill);
          background:rgba(8,14,12,.46); backdrop-filter:blur(10px) saturate(150%);
          border:1px solid rgba(255,255,255,.16);
          /* 2026-08-17: 모노스페이스를 걷어냈다. 마이리얼트립은 산세리프 하나만 쓰고
             모노가 0건이다 — 명조와 모노를 섞은 게 화면이 AI스럽다는 인상의 원인이었다.
             숫자 폭은 폰트가 아니라 font-variant-numeric 으로 맞춘다. 자간도 한글에서
             양수로 벌리면 어색해서 0으로 되돌린다. */
          font-size:11.5px; font-weight:600; letter-spacing:0;
          color:rgba(255,255,255,.82); font-variant-numeric:tabular-nums;}
.hero-now b{font-weight:700; color:#fff;}
.hero-now-w{color:rgba(255,255,255,.62);}
.hero-now-w:empty{display:none;}
.hero-now-dot{width:6px; height:6px; border-radius:50%; background:#7BC47F; flex:0 0 auto;
              animation:nowPulse 2.4s ease-in-out infinite;}

/* 왼쪽 짝: 실제 평점·후기. hero-now 와 대칭이라 눈이 자연히 두 배지를 함께 읽는다. */
.hero-rate{position:absolute; top:12px; left:12px; z-index:2;
          display:flex; align-items:center; gap:6px;
          padding:6px 11px; border-radius:var(--r-pill);
          background:rgba(8,14,12,.46); backdrop-filter:blur(10px) saturate(150%);
          border:1px solid rgba(255,255,255,.16);
          font-size:11.5px; font-weight:600; color:rgba(255,255,255,.86);}
.hero-rate b{color:#FFD37A; font-weight:800; font-size:12.5px;}
@keyframes nowPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.42; transform:scale(.76); }
}

/* ── 짜는 중 ──
   숫자를 계기판처럼 읽히게 한다. 홈 히어로의 '지금, 스랑안' 배지와 같은 모노 서체를 써서
   "실제로 재고 있는 값"이라는 신호를 사이트 안에서 일관되게 준다. */
/* 결과 화면과 같은 왼쪽 기준선을 쓴다. 가운데 정렬했더니 결과로 넘어갈 때 글이 옆으로 튀었다. */
.load{padding:26px 0 40px; max-width:620px;}
  /* 자간은 숫자에만 준다. 한글에 letter-spacing 을 주면 '짜는  중'처럼 벌어져 보인다. */
.load-eyebrow{display:inline-block; font-size:11.5px; font-weight:800; color:var(--brand-d);
              background:var(--brand-50); padding:5px 10px; border-radius:var(--r-xs); margin-bottom:12px;}
.load-h h2{margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:-.6px;}
.load-h p{margin:0 0 20px; font-size:13.5px; color:var(--ink2); line-height:1.55; word-break:keep-all;}
.load-bar{height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:6px;}
.load-bar i{display:block; height:100%; width:0; background:var(--brand);
            transition:width 420ms cubic-bezier(.33,1,.68,1);}

.load-steps{list-style:none; margin:0; padding:0;}
.ls{display:flex; align-items:flex-start; gap:12px; padding:14px 2px;
    border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(6px);
    transition:opacity 260ms cubic-bezier(.23,1,.32,1), transform 260ms cubic-bezier(.23,1,.32,1);}
.ls.on{opacity:1; transform:none;}
.ls-mark{flex:0 0 auto; width:18px; height:18px; margin-top:2px; border-radius:50%;
         border:2px solid var(--line); position:relative; transition:border-color 200ms ease;}
.ls.on .ls-mark{border-color:var(--brand); border-right-color:transparent;
                animation:lsSpin .7s linear infinite;}
.ls.done .ls-mark{border-color:var(--brand); background:var(--brand); animation:none;}
.ls.done .ls-mark::after{content:''; position:absolute; left:4px; top:1px; width:5px; height:9px;
                         border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg);
                         animation:lsPop 200ms cubic-bezier(.23,1,.32,1);}
@keyframes lsSpin{to{transform:rotate(360deg);}}
@keyframes lsPop{from{opacity:0; transform:rotate(43deg) scale(.5);}}

.ls-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ls-txt b{font-size:14px; font-weight:700; letter-spacing:-.3px; word-break:keep-all;}
.ls-txt span{font-size:12.5px; color:var(--ink3); line-height:1.45; word-break:keep-all;}
.ls-n{flex:0 0 auto;   /* 모노 제거(2026-08-17) — 위 .ls-badge 와 같은 이유 */
      font-size:12.5px; font-weight:600; color:var(--ink3); font-variant-numeric:tabular-nums;
      padding-top:2px;}
.ls-n em{font-style:normal; font-size:15px; font-weight:700; color:var(--ink); margin-right:1px;}
.ls.done .ls-n em{color:var(--brand-d);}
.load-foot{margin:16px 0 0; font-size:11.5px; color:var(--ink3); line-height:1.55; word-break:keep-all;}

@media (prefers-reduced-motion: reduce){
  .ls{opacity:1; transform:none; transition:none;}
  .ls.on .ls-mark{animation:none;}
  .ls.done .ls-mark::after{animation:none;}
  .load-bar i{transition:none;}
  .hero-now-dot{animation:none;}
  .hero-vid,.hero-still{transition:none; animation:none;}
  .home-hero-vid,.hh-ph,.plan-hero .ph-vid,.plan-hero .ph-bg,.vbanner .vb-vid,.vbanner .vb-bg{transition:none; animation:none;}
  .hero-tag,.hero h2,.hero p,.hero-row{animation:none; opacity:1; transform:none;}
  .rp .th img,.post .th img,.prod .th img,.owncard{transition:none;}
}

/* ── 담기 전에 알아두세요 ──
   장식을 넣지 않는다. 보증 배지나 자물쇠 아이콘을 붙이면 오히려 파는 말처럼 읽힌다.
   문답을 그냥 활자로 두는 편이 사실로 읽힌다. */
.trust{margin:26px 0 4px; padding:20px 20px 8px; background:var(--soft); border-radius:20px;}
.trust h4{margin:0 0 14px; font-size:14px; font-weight:800; letter-spacing:-.3px;}
.trust-l{display:grid; gap:15px;}
.trust-i{padding-left:13px; position:relative;}
.trust-i::before{content:''; position:absolute; left:0; top:7px; width:5px; height:5px;
                 border-radius:50%; background:var(--brand);}
.trust-i b{display:block; font-size:13.5px; font-weight:700; letter-spacing:-.2px;
           margin-bottom:4px; word-break:keep-all;}
.trust-i p{margin:0; font-size:12.5px; color:var(--ink2); line-height:1.62; word-break:keep-all;}
@media (min-width:820px){
  .trust{padding:22px 24px 22px;}
  .trust-l{grid-template-columns:1fr 1fr; gap:18px 30px;}
}

/* ── 섹션 ── */
.sec{padding:28px 0 4px;}
.sec-h{display:flex; align-items:baseline; gap:9px; margin-bottom:3px;}
.sec-h h3{margin:0; font-size:17px; font-weight:800; letter-spacing:-.4px;}
.sec-h .more{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink3);}
.sec-p{margin:0 0 13px; font-size:12.5px; color:var(--ink3); word-break:keep-all;}
.wide-cta{width:100%; background:var(--ink); color:#fff; font-weight:800; font-size:15px;
          padding:15px; border-radius:var(--r-sm); transition:transform .15s var(--ease);}
.wide-cta:active{transform:scale(.985);}

/* margin:0 -16px 로 .wrap 패딩을 상쇄해 화면 끝까지 붙이던 걸 없앴다(2026-08-11).
   .wrap 이 max-width:1180px 로 가운데 정렬되는 화면에서는 이 여백이 이미 크게 남아 있어
   "화면 끝까지 붙는" 효과가 안 보이고, 오히려 레일만 옆 섹션(제목·버튼·지도)보다
   16px 씩 양쪽으로 더 튀어나온 것처럼만 보였다. 다른 섹션과 같은 좌우 경계에 맞춘다. */
.rail{display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory;
      padding-bottom:6px;
      scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.rail::-webkit-scrollbar{display:none;}
.rail > *{scroll-snap-align:start; flex:0 0 auto;}

.post{width:190px; display:block;}
.post .th{display:block; width:190px; height:126px; border-radius:var(--r-md); overflow:hidden;
          background:var(--soft); margin-bottom:9px;}
.post .th img{width:100%; height:100%; object-fit:cover;}
.post .ch{display:block; font-size:10.5px; font-weight:800; color:var(--brand); margin-bottom:3px;}
.post .ti{display:-webkit-box; font-size:13.5px; font-weight:700; line-height:1.4;
          -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

.prod{width:180px; display:block;}
.prod .th{display:grid; place-items:center; width:180px; height:120px; border-radius:var(--mrt-radius-card, 18px);
          overflow:hidden; background:var(--soft); margin-bottom:9px; position:relative;}
.prod .th img{width:100%; height:100%; object-fit:cover;}
/* 검색 4.8★ 이상 정렬에서 진짜로 1위인 카드에만 붙는다 — 배지용으로 지어낸 순위가 아니다. */
.prod-top{position:absolute; top:8px; left:8px; z-index:1; background:var(--c-olive); color:#fff;
          font-size:10.5px; font-weight:800; letter-spacing:.01em; padding:4px 9px; border-radius:var(--r-pill);
          box-shadow:0 3px 8px rgba(14,23,18,.28);}
.prod .nm{display:-webkit-box; font-size:13.5px; font-weight:700; line-height:1.38; margin-bottom:2px;
          -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.prod .loc{display:block; font-size:11.5px; color:var(--ink3); margin-bottom:4px;}
.prod .rt{display:block; font-size:12.5px; color:var(--ink2); margin-bottom:3px;}
.prod .rt b{color:#E8A020;}
.prod .pr{display:block; font-size:14px; font-weight:800; letter-spacing:-.3px;}
.prod .pr small{font-size:11.5px; color:var(--ink3); font-weight:600;}

.list{display:grid; gap:9px;}
.li{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center;
    padding:12px; border:1px solid var(--line); border-radius:var(--r-md); transition:transform .15s var(--ease);}
.li:active{transform:scale(.99);}
.li .th{width:64px; height:64px; border-radius:var(--r-sm); overflow:hidden; background:var(--soft);}
.li .th img{width:100%; height:100%; object-fit:cover;}
.li .nm{display:-webkit-box; font-size:14px; font-weight:700; line-height:1.35; margin-bottom:4px;
        -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.li .sub{display:block; font-size:11.5px; color:var(--ink3);}
.li-price{display:block; margin-top:3px; font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.3px;}
.li .go{color:var(--ink3); font-size:17px;}

.chips{display:flex; gap:7px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 14px;
      font-size:13.5px; font-weight:700; color:var(--ink2); white-space:nowrap; transition:.12s;}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink);}

/* ── 계획(퀴즈) ── */
.bar{height:3px; background:var(--soft);}
.bar i{display:block; height:100%; background:var(--brand); width:0; transition:width .4s var(--ease);}
.intro{padding:44px 0 30px; text-align:center;}
.intro .kick{display:inline-block; background:var(--brand-50); color:var(--brand-d);
             font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:var(--r-pill); margin-bottom:18px;}
.intro h1{margin:0 0 13px; font-size:clamp(26px,6.4vw,34px); font-weight:900; line-height:1.26; letter-spacing:-1.1px;}
.intro p{margin:0 0 26px; font-size:14px; color:var(--ink2); line-height:1.65; word-break:keep-all;}
.start{background:var(--ink); color:#fff; font-weight:800; font-size:16px;
       padding:16px 38px; border-radius:var(--r-md); transition:transform .15s var(--ease), box-shadow .15s var(--ease);
       box-shadow:0 10px 24px rgba(21,23,26,.16);}
.start:active{transform:scale(.97);}
.intro .note{margin-top:16px; font-size:12.5px; color:var(--ink3);}

/* ── 마이리얼트립 디자인 토큰 (2026-08-15, 사장님 지시) ──
   experiences.myrealtrip.com/products/6231902 를 375px로 열어 devtools 로 실측한 값.
   "99% 흡사하게" — 색·타이포·모서리·그림자·여백을 그대로 옮긴다. 로고·상표만 우리 것으로,
   할인·마감임박처럼 사실이 아닌 문구만 우리 사실로 바꾼다(아래 각주 참고).
   상품 상세(fishing-tour.html 등)도 이 값을 같이 쓴다 — 웹팀2 product-detail.css 는
   이 :root 변수를 참조만 하고 재정의하지 않기로 함(2026-08-15 합의). */
:root{
  /* 색 — .deploy/mrt-tokens-2026-08-15.md 참고. gray-900(#212529)이 아니라 이 값이 실제 본문색이다 */
  --mrt-ink:#101418; --mrt-ink-2:#848C94; --mrt-ink-3:#666D75;
  --mrt-chip-bg:#F1F3F5; --mrt-red:#EC4937;
  --mrt-radius-card:12px; --mrt-radius-badge:6px; --mrt-radius-btn:8px;
  --mrt-z1:0 2px 4px 0 rgba(33,37,41,.10); --mrt-z2:0 4px 8px 0 rgba(33,37,41,.10);
  --mrt-z3:0 8px 16px 0 rgba(33,37,41,.15);
  --mrt-ease:cubic-bezier(.4,0,.2,1);

  /* 375px 실측 (2026-08-16, 웹팀2 블로킹 해제용) — 크롬 확장 resize_window가 안 먹혀서
     못 쟀던 값. Playwright로 375px 강제 후 experiences.myrealtrip.com/products/6231902 에서
     getBoundingClientRect 직접 측정. */
  --mrt-gutter:20px;              /* 좌우 안쪽 여백. 타이틀·브레드크럼 left 20px */
  --mrt-header-h:48px;            /* 상단 아이콘 헤더(뒤로가기·홈·저장·공유) 높이 */
  --mrt-divider-h:16px;           /* 섹션 사이 두꺼운 회색 구분바. bg #F1F3F5 */
  --mrt-divider-bg:#F1F3F5;
  --mrt-chip-gap:6px;             /* 저장·문의·코스 같은 가로 필터 칩 사이 간격 */
  /* 대표 이미지 비율은 1:1(정사각형, 279×279 실측)이다 — 우리 홈 카드(.th-photo)는
     이미 4:3으로 나갔고 사장님 피드백은 사진 내용·버튼 간격이었지 비율이 아니었어서
     그대로 뒀다. 앞으로 새로 만드는 갤러리·썸네일은 1:1을 기본으로 쓸 것. */
  --mrt-img-ratio-square:1;
}

/* ── 홈 상품 카드 — 낚시 투어를 맨 앞에 (2026-08-15) ──
   마이리얼트립 상품 페이지 레이아웃 그대로: 사진 → 별점 → 제목 → 정보 아이콘 행 → 가격+CTA.
   딱 하나, 마이리얼트립이 쓰는 빨간 "5% 할인" 배지 자리는 우리 브랜드색 "하루 1팀" 배지로
   바꿨다 — 할인이 없는데 할인처럼 보이면 거짓 표시라 이 한 곳만은 원칙대로 우리 사실을 넣었다. */
.tour-hero{
  display:block; margin:14px 0 10px; border-radius:var(--mrt-radius-card); overflow:hidden;
  background:#fff; box-shadow:var(--mrt-z2);
}
@media (hover:hover){
  .tour-hero:hover .th-photo{ transform:scale(1.03); }
}
.th-photo{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .5s var(--ease);
}
.th-info{ padding:16px 16px 18px; }
.th-rating{ margin:0 0 6px; font-size:14px; font-weight:600; line-height:1.38; letter-spacing:-.3px; color:#F5A623; }
.th-rating b{ color:var(--mrt-ink); font-weight:600; }
.th-title{ margin:0 0 10px; font-size:22px; font-weight:700; color:var(--mrt-ink); letter-spacing:-.2px; line-height:1.24; }
.th-facts{ display:grid; grid-template-columns:1fr 1fr; gap:9px 8px; margin:0 0 16px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.th-fact{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; line-height:1.38; letter-spacing:-.1px; color:var(--mrt-ink-3); }
.th-fact svg{ width:18px; height:18px; flex-shrink:0; color:var(--mrt-ink-2); }
.th-price-wrap{ margin-bottom:22px; }
.th-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.th-badge{ display:inline-block; background:var(--brand); color:#fff; font-size:13.5px; font-weight:600;
           line-height:1.38; letter-spacing:-.3px; padding:2px 6px; border-radius:var(--mrt-radius-badge); }
/* 2026-08-16: 진짜 기간 한정 오픈 이벤트라 마이리얼트립의 빨간 할인 배지 색(--mrt-red)을
   그대로 씀 — "하루 1팀"(우리 브랜드색) 배지와는 색으로 구분되게. 날짜는 JS(applyOpenEventPricing,
   OPEN_EVENT_END 상수 하나)가 넣는다 — 이 CSS는 색·모양만 담당.

   2026-08-18: 빨간 채움을 옅은 바탕 + 진한 글자로 바꿨다. 첫 화면에서 손님 눈이
   가는 순서를 재보니 이 배지가 1번, 노란 카카오 버튼이 2번, 정작 팔아야 하는
   상품명과 가격이 3번이었다. 가격은 회색조로 조용히 있는데 그 위 배지가 원색으로
   채워져 있으니 당연한 결과다.
   할인 정보를 없애는 게 아니라 순서를 바로잡는 것이다 — 빨강 계열은 그대로 둬서
   "할인"이라는 신호는 남기고 채도만 낮춘다. 아래 .th-price 를 키운 것과 한 쌍이다.
   "하루 1팀"(.th-badge)은 올리브 채움 그대로 둔다. 그건 할인이 아니라 우리가 내세우는
   사실이고, 이 순서에서 먼저 읽히는 게 맞다. */
.th-badge-event{ background:#FCEBE8; color:#C0392B; }
/* 2026-08-18: 20px 였다. 바로 위 이벤트 배지(13.5px 빨간 채움)보다 시선에서 밀렸다 —
   크기는 컸지만 색이 조용해서 먼저 안 읽혔다. 배지 채도를 낮추면서 이쪽을 키운다. */
.th-price{ margin:0; font-size:24px; font-weight:700; color:var(--mrt-ink); letter-spacing:-.3px; line-height:1.24; }
.th-price span{ font-size:14px; font-weight:600; color:var(--mrt-ink-2); letter-spacing:-.3px; margin-left:1px; }
.th-price span.th-price-was{ text-decoration:line-through; margin-left:0; margin-right:2px; font-weight:500; }
.bs-price-was{ text-decoration:line-through; color:var(--mrt-ink-2); font-weight:500; margin-right:2px; }
/* 2026-08-16: 사장님이 화면 보시고 직접 지시 — 가로 2버튼은 간격이 좁아 오탭 위험, 위계도
   안 보인다고 하셔서 세로 2단으로 바꿈. 웹팀2가 fishing-tour.html에서 쓰던 것과 같은 모양
   (카카오 노랑 필 버튼 + 마이리얼트립 테두리만)으로 맞춰 사이트 전체 일관성도 맞춘다. */
.th-cta-row{ display:flex; flex-direction:column; gap:12px; }
.th-cta{
  display:flex; align-items:center; justify-content:center; gap:6px; text-align:center;
  width:100%; font-weight:700; height:52px; padding:0 16px;
  border-radius:var(--r-pill); transition:transform .15s var(--mrt-ease);
}
.th-cta:active{ transform:scale(.97); }
.th-cta-primary{ background:#FEE500; color:#191919; font-size:16px; }
.th-cta-secondary{ background:#fff; color:var(--mrt-ink-3); box-shadow:inset 0 0 0 1.5px var(--line); font-size:14px; font-weight:600; }
@media (min-width:820px){
  .tour-hero{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; }
  .th-photo{ aspect-ratio:auto; height:100%; }
  .th-info{ display:flex; flex-direction:column; justify-content:center; padding:32px 40px; }
}

/* ── 홈 히어로 — 사진 화보 톤 (2026-08-11) ──
   .intro 를 그대로 쓰되(계획 탭과 레이아웃 규칙 공유), 사진·스크림·세리프만 얹는다.
   사진은 실루엣 위주라 위쪽 하늘은 밝게 남기고, 아래쪽만 짙게 눌러서 글자를 세운다.
   2026-08-11 오후: 바닥을 자르던 물결(clip-path)은 걷어내고 둥근 모서리(border-radius)만
   남겼다 — 사장님이 지그재그가 어색하다고 지적. */
.home-hero{
  position:relative; isolation:isolate; overflow:hidden;
  margin:14px 0 34px; padding:76px 22px 46px; text-align:center; color:#fff;
  border-radius:26px; box-shadow:var(--shadow-md);
}
.hh-ph{
  position:absolute; inset:-4%; z-index:0; background-color:#12201b;
  background-size:cover; background-position:50% 62%; opacity:0;
  transition:opacity 1.6s ease;
  animation:bst-kenburns 26s ease-in-out infinite alternate;
}
.hh-ph.on{ opacity:1; }
/* 첫 장(새벽)만 CSS에 바로 박아 둔다 — JS가 늦게 붙어도 깜빡이지 않는다 */
.hh-ph-a{ background-image:url('photos/serangan/sunrise.jpg'); }
/* 정지 사진 위에 얹는 실제 영상. 화면에 들어오면 initHeroVideo() 가 재생하고 vid-on 을 붙인다 —
   그 전까지는 사진(.hh-ph)만 보이므로 로딩 중에도 빈 화면이 없다. */
.home-hero-vid{
  position:absolute; inset:-4%; z-index:0; width:calc(100% + 8%); height:calc(100% + 8%);
  object-fit:cover; opacity:0; transition:opacity 900ms linear;
}
.home-hero.vid-on .home-hero-vid{ opacity:1; }
.home-hero.vid-on .hh-ph{ opacity:0; transition:opacity 900ms linear; }
.home-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,23,18,.10) 0%, rgba(14,23,18,.30) 42%, var(--c-scrim) 100%);
}
.home-hero > *:not(.hh-ph):not(.home-hero-vid){ position:relative; z-index:2; }
.home-hero .kick{
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.home-hero h1{
  font-weight:700; letter-spacing:-.3px;
  text-shadow:0 3px 20px rgba(6,10,8,.45);
}
.home-hero p{ color:rgba(255,255,255,.92); text-shadow:0 2px 12px rgba(6,10,8,.35); }
.home-hero .start{
  background:linear-gradient(180deg,#729A51,#455F30); color:#fff;
  box-shadow:0 12px 26px rgba(10,15,12,.35);
}
.home-hero .note{ color:rgba(255,255,255,.78); }
.home-hero .note b{ color:#fff; font-weight:800; }
/* 2026-08-17: 사람이 먼저 나오는 카피로 바꾸며 버튼도 낚시 투어(1차)/계획 짜기(2차) 둘로.
   기존 .start(단일 버튼)는 그대로 두고 이 블록에서만 새 버튼 스타일을 쓴다. */
.hh-cta-row{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.hh-cta{ display:flex; align-items:center; justify-content:center; width:100%; height:52px;
  font-weight:700; font-size:16px; border-radius:var(--r-pill); text-decoration:none;
  transition:transform .15s var(--mrt-ease, ease); }
.hh-cta:active{ transform:scale(.97); }
.hh-cta-primary{ background:linear-gradient(180deg,#729A51,#455F30); color:#fff;
  box-shadow:0 12px 26px rgba(10,15,12,.35); }
.hh-cta-secondary{ background:rgba(255,255,255,.1); color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); backdrop-filter:blur(6px); }
@media (min-width:820px){
  .home-hero{ padding:104px 40px 64px; }
}

/* ── 계획 탭 히어로 (2026-08-11 밤) ──
   홈 히어로와 완전히 같은 사진→영상 구조지만, 다른 자리라 다른 이미지·다른 영상을 쓴다.
   그래서 클래스도 분리한다 — .hh-ph 를 그대로 쓰면 홈의 새벽 배 사진이 여기서도 뜬다. */
.plan-hero{
  position:relative; isolation:isolate; overflow:hidden;
  margin:14px 0 22px; padding:52px 22px 30px; text-align:center; color:#fff;
  border-radius:26px; box-shadow:var(--shadow-md);
}
.plan-hero .ph-bg{
  position:absolute; inset:-4%; z-index:0; background-color:#1a2e1c;
  background-image:url('photos/hero/jungle-swing.png'); background-size:cover; background-position:50% 38%;
  animation:bst-kenburns 26s ease-in-out infinite alternate;
}
.plan-hero .ph-vid{
  position:absolute; inset:-4%; z-index:0; width:calc(100% + 8%); height:calc(100% + 8%);
  object-fit:cover; opacity:0; transition:opacity 900ms linear;
}
.plan-hero.vid-on .ph-vid{ opacity:1; }
.plan-hero.vid-on .ph-bg{ opacity:0; transition:opacity 900ms linear; }
.plan-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,23,18,.14) 0%, rgba(14,23,18,.34) 46%, var(--c-scrim) 100%);
}
.plan-hero > *:not(.ph-bg):not(.ph-vid){ position:relative; z-index:2; }
.plan-hero .kick{
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.plan-hero h1{ color:#fff; text-shadow:0 3px 20px rgba(6,10,8,.45); }
.plan-hero p{ color:rgba(255,255,255,.92); text-shadow:0 2px 12px rgba(6,10,8,.35); }
.plan-hero .start{
  background:linear-gradient(180deg,#729A51,#455F30); color:#fff;
  box-shadow:0 12px 26px rgba(10,15,12,.35);
}
.plan-hero .note{ color:rgba(255,255,255,.78); }

/* ── 슬림 영상 배너 (2026-08-11 밤) ──
   히어로만큼 큰 자리가 아닌 곳(지도·매거진 하단, 계획 결과 화면)에 쓰는 가벼운 버전.
   배경 사진 → 화면에 들어오면 영상으로 바꿔치기, 자막처럼 캡션 한 줄만 얹는다.
   재생 로직은 히어로와 동일(playWhenSeen) — 데이터 절약 모드·reduced-motion이면 사진 그대로. */
.vbanner{
  position:relative; isolation:isolate; overflow:hidden;
  margin:20px 0; border-radius:var(--r-md); height:148px; box-shadow:var(--shadow-md);
}
.vbanner .vb-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.vbanner .vb-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 900ms linear;
}
.vbanner.vid-on .vb-vid{ opacity:1; }
.vbanner.vid-on .vb-bg{ opacity:0; transition:opacity 900ms linear; }
.vbanner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,23,18,0) 42%, rgba(14,23,18,.62) 100%);
}
.vbanner .vb-cap{
  position:absolute; left:16px; right:16px; bottom:12px; z-index:2; color:#fff;
}
.vbanner .vb-cap b{ display:block; font-size:14px; font-weight:800; text-shadow:0 2px 8px rgba(6,10,8,.5); }
.vbanner .vb-cap span{ display:block; margin-top:2px; font-size:11.5px; color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(6,10,8,.5); }
@media (min-width:820px){
  .vbanner{ height:200px; }
}

/* ── 신뢰 스트립 (2026-08-11) ──
   히어로와 체크리스트 카드 사이. 숫자는 그 자리에서 실데이터로 계산한다(matchStripHtml).
   2026-08-12: 박스 3개로 나눠 놨더니 "AI가 뚝딱 만든 느낌"이라는 지적 — 카드를 걷어내고
   그냥 한 줄 문장으로. 강조할 숫자만 굵게. */
.match-strip{
  margin:4px 0 20px; padding:0 2px; text-align:center;
  font-size:13.5px; color:var(--ink2); line-height:1.7; word-break:keep-all;
}
.match-strip b{
  font-weight:800; color:var(--brand-d);
  font-variant-numeric:tabular-nums;
}

/* ── 홈 시크릿 픽 카드 (2026-08-18) ──
   히어로가 "검색하면 나오는 데 말고 직접 가본 데로"라고 약속하는데, 그 증거가 홈에
   하나도 없었다. 그래서 매칭 문구 바로 다음(카테고리 그리드 앞)에 놓는다 —
   약속 → 증거 순서다.

   사진을 쓰지 않는다. 꾸따 열다섯 곳의 실제 사진이 자산에 한 장도 없고, AI 생성이나
   스톡을 얹는 순간 "직접 가봤다"는 페이지의 전제가 무너진다. 대신 숫자 15를 시각적
   앵커로 쓴다. 박스를 여러 개 늘어놓지 않고 하나로 간 것도 의도다 — 숫자 카드 세 개를
   나란히 놨다가 "AI가 뚝딱 만든 느낌"이라는 지적을 받은 적이 있다(match-strip 주석 참고). */
.home-pick{
  display:flex; align-items:center; gap:14px;
  width:100%; margin:2px 0 20px; padding:16px 16px 16px 18px;
  text-align:left; border-radius:var(--r-lg);
  background:var(--brand-50); border:1px solid #DDE4D2;
  transition:transform .15s var(--ease);
}
.home-pick:active{ transform:scale(.985); }
.hp-n{
  flex:0 0 auto; font-size:34px; font-weight:800; line-height:1;
  color:var(--brand); letter-spacing:-2px; font-variant-numeric:tabular-nums;
}
.hp-t{ flex:1; min-width:0; }
.hp-t .ey{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  color:var(--brand-d); margin-bottom:3px;
}
.hp-t b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.3px;
         color:var(--ink); line-height:1.4; word-break:keep-all; }
.hp-t span{ display:block; margin-top:3px; font-size:12.5px; color:var(--ink2);
            line-height:1.5; word-break:keep-all; }
.hp-go{ flex:0 0 auto; font-size:16px; color:var(--brand); font-weight:700; }
@media (min-width:820px){
  .home-pick{ padding:20px 20px 20px 24px; gap:18px; }
  .hp-n{ font-size:40px; }
  .hp-t b{ font-size:16px; }
  .hp-t span{ font-size:13.5px; }
}

/* ── 홈 카테고리 그리드 (2026-08-14, 마이리얼트립 참고화면 중 채택한 부분) ──
   예약 탭 카테고리(CAT) 8개를 그대로 4×2로 늘어놓는다. 375px에서도 스크롤 없이
   다 보이는 개수라 마이리얼트립처럼 가로 스크롤을 흉내 내지 않았다. */
.home-catgrid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px 4px;
  margin:2px 0 20px;
}
.hcg-i{ display:flex; flex-direction:column; align-items:center; gap:7px;
        transition:transform .15s var(--ease); }
.hcg-i:active{ transform:scale(.94); }
.hcg-i .ic{ width:48px; height:48px; border-radius:var(--r-md); display:grid; place-items:center; }
.hcg-i .nm{ font-size:12.5px; font-weight:500; color:var(--ink2); }
@media (min-width:820px){
  .home-catgrid{ grid-template-columns:repeat(8,1fr); gap:10px; }
}

.step{padding:30px 0 24px;}
.step-n{font-size:12.5px; font-weight:800; color:var(--brand); letter-spacing:.04em; margin-bottom:9px;}
.step h2{margin:0 0 6px; font-size:20px; font-weight:800; letter-spacing:-.6px; line-height:1.32;}
.step .sub{margin:0 0 20px; font-size:13.5px; color:var(--ink3); word-break:keep-all;}
.opts{display:grid; gap:10px;}
@media(min-width:640px){ .opts{grid-template-columns:1fr 1fr;} }
.opt{display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:14px;
     border:1.5px solid var(--line); border-radius:var(--r-md); padding:16px 17px; text-align:left;
     transition:transform .14s var(--ease), border-color .14s, box-shadow .14s var(--ease);}
.opt:active{transform:scale(.985);}
.opt.on{border-color:var(--brand); background:var(--brand-50); box-shadow:0 6px 16px rgba(200,150,62,.16);}
.opt .ic{width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--soft);}
.opt.on .ic{background:#fff;}
.opt b{display:block; font-size:15px; font-weight:800; letter-spacing:-.3px; margin-bottom:2px;}
.opt span span{display:block; font-size:12.5px; color:var(--ink3); word-break:keep-all;}
.opt .chk{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line);}
.opt.on .chk{border-color:var(--brand); background:var(--brand)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;}
.back{margin-top:20px; font-size:14px; font-weight:800; color:var(--ink2); padding:8px 4px;}

.res-head{padding:26px 0 6px;}
.res-head .kick{font-size:12.5px; font-weight:800; color:var(--brand); margin-bottom:8px;}
.res-head h2{margin:0 0 8px; font-size:22px; font-weight:800; letter-spacing:-.7px; line-height:1.32;}
.res-head p{margin:0; font-size:13.5px; color:var(--ink2); line-height:1.6; word-break:keep-all;}
.basis{margin:10px 0 0; font-size:12.5px; color:var(--ink2); background:var(--soft);
       border-radius:var(--r-xs); padding:11px 13px; line-height:1.55;}
.basis b{color:var(--ink);}

.mine{margin:18px 0 6px; border:1.5px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:#fff;}
.mine-in{padding:15px 16px;}
.mine .tag{display:inline-block; font-style:normal; font-size:10.5px; font-weight:700;
           color:var(--ink3); background:var(--soft); border-radius:var(--r-xs); padding:2px 7px; margin-bottom:8px;}
.mine h3{margin:0 0 5px; font-size:15px; font-weight:700; letter-spacing:-.3px;}
.mine p{margin:0 0 12px; font-size:12.5px; color:var(--ink2); line-height:1.5; word-break:keep-all;}
.mine a{display:inline-block; background:var(--brand); color:#fff; font-weight:700; font-size:13.5px;
        padding:9px 16px; border-radius:var(--r-xs);}

.ownwrap{margin:0 0 16px;}
.ownhead{display:flex; align-items:baseline; gap:8px; margin-bottom:9px;}
.ownhead b{font-size:14px; font-weight:800;}
.ownhead span{font-size:12.5px; color:var(--ink3);}
.owncards{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.owncard{display:flex; flex-direction:column; gap:3px; border:2px solid var(--brand); border-radius:var(--r-sm);
         padding:13px 14px; background:linear-gradient(135deg,#FFFDF8,#FFF4E2);}
.owncard .oc-ic{font-size:20px; margin-bottom:2px;}
.owncard .oc-nm{font-size:14px; font-weight:800; letter-spacing:-.3px;}
.owncard .oc-ft{font-size:11.5px; color:var(--ink2); line-height:1.4; word-break:keep-all;}
.owncard .oc-go{margin-top:7px; font-size:12.5px; font-weight:800; color:var(--brand);}
@media (max-width:520px){
  .owncards{grid-template-columns:1fr;}
}

.route{margin-top:20px; border:1.5px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.route-h{padding:15px 17px 13px; background:var(--soft);}
.route-h b{display:block; font-size:16px; font-weight:800; letter-spacing:-.4px; margin-bottom:3px;}
.route-h span{font-size:12.5px; color:var(--ink3);}
.route-l{padding:6px 17px 15px;}
.stop{display:grid; grid-template-columns:52px 1fr; gap:12px; padding:11px 0;}
.stop + .stop{border-top:1px dashed var(--line);}
.stop .when{font-size:11.5px; font-weight:800; color:var(--brand); padding-top:2px;}
.stop .nm{display:block; font-size:14px; font-weight:700; line-height:1.35;}
.stop .sub{display:block; font-size:11.5px; color:var(--ink3); margin-top:2px;}
.route-note{padding:12px 17px; background:var(--brand-50); font-size:12.5px;
            color:var(--ink2); line-height:1.6; border-top:1px solid var(--line);}

.grp{margin-top:24px;}
.grp-h{display:flex; align-items:baseline; gap:8px; margin-bottom:4px;}
.grp-h h3{margin:0; font-size:16px; font-weight:800; letter-spacing:-.4px;}
.grp-h .n{font-size:12.5px; font-weight:800; color:var(--ink3);}
.grp-p{margin:0 0 12px; font-size:12.5px; color:var(--ink3); word-break:keep-all;}

.card{display:grid; grid-template-columns:78px 1fr 30px; gap:13px; align-items:center; width:100%;
      border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px; margin-bottom:9px; text-align:left;}
.card.on{border-color:var(--brand); background:var(--brand-50);}
.card .th{width:78px; height:64px; border-radius:var(--r-xs); overflow:hidden; background:var(--soft);}
.card .th img{width:100%; height:100%; object-fit:cover;}
.card .nm{display:-webkit-box; font-size:14px; font-weight:700; line-height:1.36; margin-bottom:4px;
          -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card .mt{display:block; font-size:11.5px; color:var(--ink3);}
.card .mt b{color:#E0A020;}
.card .pr{display:block; font-size:13.5px; font-weight:800; margin-top:3px;}
.card .chk{width:24px; height:24px; border-radius:7px; border:1.5px solid var(--line); justify-self:center;}
.card.on .chk{border-color:var(--brand); background:var(--brand)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;}
.moreBtn{width:100%; border:1.5px dashed var(--line); border-radius:var(--r-sm); padding:14px;
         font-size:13.5px; font-weight:700; color:var(--ink2); background:#fff;}

.howto{margin:22px 0 0; background:var(--soft); border-radius:var(--r-sm); padding:16px 17px;}
.howto h4{margin:0 0 9px; font-size:14px; font-weight:800;}
.howto ol{margin:0; padding-left:19px; font-size:13.5px; color:var(--ink2); line-height:1.75;}
.howto .why{margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
            font-size:12.5px; color:var(--ink3); line-height:1.6;}

/* ── 담기 바 ── */
.cartbar{position:fixed; left:0; right:0; bottom:var(--nav-h); z-index:65;
         background:rgba(251,247,239,.97); backdrop-filter:blur(12px);
         border-top:1px solid var(--line); padding:11px 0;}
.cart-in{display:flex; align-items:center; gap:11px;}
.cart-n{flex:1; min-width:0; font-size:12.5px; color:var(--ink3); line-height:1.45;}
.cart-n b{display:block; font-size:14px; font-weight:800; color:var(--ink);}
.cart-go{background:var(--ink); color:#fff; font-weight:800; font-size:14px;
         padding:13px 18px; border-radius:var(--r-sm); white-space:nowrap;}
.cart-go:disabled{background:var(--line); color:var(--ink3);}

/* ── 홈 하단 고정 예약 바 (2026-08-15) ──
   마이리얼트립 상품 페이지의 하단 가격 바(흰 배경 · 12px/16px 여백 · 8px 버튼)를 그대로. */
.booksticky{position:fixed; left:0; right:0; bottom:var(--nav-h); z-index:65; height:64px;
         display:block; text-decoration:none; color:inherit;
         background:#fff; border-top:1px solid var(--line); padding:10px 0; box-sizing:border-box;}
.bs-in{display:flex; align-items:center; gap:12px; height:100%;}
.bs-n{flex:1; min-width:0;}
.bs-n b{display:block; font-size:15px; font-weight:700; letter-spacing:-.3px; color:var(--mrt-ink);}
.bs-n span{font-size:12.5px; letter-spacing:-.1px; color:var(--mrt-ink-2);}
.bs-go{flex-shrink:0; display:flex; align-items:center; justify-content:center;
       background:#FEE500; color:#191919; font-weight:700; font-size:14px;
       height:44px; padding:0 20px; border-radius:var(--r-pill);
       white-space:nowrap; transition:transform .15s var(--mrt-ease);}
.booksticky:active .bs-go{transform:scale(.96);}
body.has-booksticky{ padding-bottom:calc(var(--nav-h) + 64px); }

/* ── 하단 탭 ── */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:70; height:var(--nav-h);
        padding-bottom:env(safe-area-inset-bottom);
        background:rgba(251,247,239,.95); backdrop-filter:saturate(180%) blur(14px);
        border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr);}
.tb{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    font-size:10.5px; font-weight:700; color:var(--ink3);}
.tb.on{color:var(--brand);}
.tb svg{width:24px; height:24px;}

.pane{display:none;} .pane.on{display:block;}
.empty{text-align:center; padding:52px 20px; color:var(--ink3); font-size:14px;}
footer{border-top:1px solid var(--line); margin-top:30px; padding:22px 0 30px;
       color:var(--ink3); font-size:12.5px; line-height:1.7;}
/* 2026-08-18: 푸터의 이동 링크는 실측 14px 이라 손가락으로 겨냥하기 어려웠다.
   문단 안 인라인이라 높이를 직접 못 주는 대신, 위아래 패딩으로 누를 자리를 넓힌다.
   inline-block 이라 줄바꿈 흐름은 그대로 간다. */
footer a{ display:inline-block; padding:7px 2px; }
.aff-note{background:var(--soft); border-radius:var(--r-xs); padding:11px 13px; margin-top:11px; font-size:11.5px;}

@media (min-width:820px){
  body{padding-bottom:0;}
  .tabbar{display:none;}
  .pcnav{display:flex;}
  .top-cta{display:block;}
  /* 홈 탭엔 히어로에 이미 같은 목적의 큰 버튼("지금 만들어보기")이 있다 — 헤더에도 똑같은
     CTA가 뜨면 화면 하나에 "계획 짜기" 버튼이 두 개가 되어 뭐가 다른지 헷갈린다는 지적이 있었다.
     홈에서만 헤더 CTA를 숨기고, 다른 탭(계획 이후 페이지들)에서는 그대로 둔다. */
  body:has(#pane-home.on) .top-cta{display:none;}
  .cats{grid-template-columns:repeat(9,1fr); gap:6px;}
  .hero{aspect-ratio:auto; min-height:290px; max-height:none;}
  .hero h2{font-size:26px;}
  .post{width:236px;} .post .th{width:236px; height:154px;}
  .prod{width:230px;} .prod .th{width:230px; height:150px;}
  .grid-pc{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
  .cartbar{bottom:0;}
}

/* ── 저장한 것 (어느 탭에서든 한 번에 열린다) ──
   예전엔 매거진 탭 → 내 여행 탭, 두 번 들어가야 보였다. */
.savebtn{ position:relative; margin-left:auto; display:flex; align-items:center; justify-content:center;
          width:38px; height:38px; border-radius:11px; color:var(--ink2); transition:background .15s; }
.savebtn:hover{ background:var(--soft); }
.savebtn svg{ width:21px; height:21px; }
.savebtn-n{ position:absolute; top:2px; right:1px; min-width:16px; height:16px; padding:0 4px;
            border-radius:var(--r-pill); background:var(--brand); color:#fff; font-size:10.5px; font-weight:800;
            line-height:16px; text-align:center; display:none; }
.savebtn-n.on{ display:block; }
@media (min-width:820px){ .savebtn{ margin-left:14px; } .top-cta{ margin-left:8px; } }

.savewrap{ position:fixed; inset:0; z-index:120; display:none; }
.savewrap.on{ display:block; }
.saveveil{ position:absolute; inset:0; background:rgba(10,12,14,.4); }
.savesheet{ position:absolute; left:0; right:0; bottom:0; max-height:82vh; background:#fff;
            border-radius:20px 20px 0 0; display:flex; flex-direction:column;
            transform:translateY(100%); transition:transform .28s var(--ease); }
.savewrap.on .savesheet{ transform:none; }
.saveh{ display:flex; align-items:center; gap:10px; padding:16px 18px 12px; border-bottom:1px solid var(--line); }
.saveh b{ font-size:16px; font-weight:800; letter-spacing:-.4px; }
.saveh .c{ font-size:12.5px; color:var(--ink3); }
.saveh .x{ margin-left:auto; font-size:22px; color:var(--ink3); line-height:1; padding:2px 6px; }
.savebody{ overflow-y:auto; padding:10px 18px 20px; -webkit-overflow-scrolling:touch; }
.savei{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px 0;
        border-bottom:1px solid var(--line2, #F1F3F6); }
.savei:last-child{ border-bottom:0; }
.savei .th{ width:56px; height:56px; border-radius:var(--r-xs); overflow:hidden; background:var(--soft); }
.savei .th img{ width:100%; height:100%; object-fit:cover; }
.savei .nm{ font-size:14px; font-weight:700; line-height:1.35; margin-bottom:3px;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.savei .ds{ font-size:11.5px; color:var(--ink3); }
.savei .rm{ font-size:12.5px; font-weight:700; color:var(--ink3); padding:6px 9px; border-radius:var(--r-xs); }
.savei .rm:hover{ background:var(--soft); color:var(--hot); }
.saveempty{ text-align:center; padding:44px 20px; color:var(--ink3); font-size:13.5px; line-height:1.7; }
.saveempty b{ display:block; font-size:15px; color:var(--ink); margin-bottom:6px; font-weight:800; }
@media (min-width:820px){
  .savesheet{ left:50%; right:auto; bottom:auto; top:50%; width:440px; max-height:74vh;
              border-radius:var(--r-md); transform:translate(-50%,-50%) scale(.96); opacity:0; }
  .savewrap.on .savesheet{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}

/* 다중 선택 문항에서만 쓰는 '다음' 버튼. 단일 선택은 고르는 즉시 넘어가서 필요 없다. */
.qnext{ width:100%; margin-top:16px; padding:15px; border-radius:var(--r-sm);
        background:var(--ink); color:#fff; font-size:15px; font-weight:800;
        transition:transform .15s var(--ease); }
.qnext:active{ transform:scale(.985); }
.qnext:disabled{ background:var(--line); color:var(--ink3); }

/* 홈 카테고리를 4개 묶음으로 줄였다. 아이콘 여덟 개를 늘어놓으면 눈이 어디 둘지 모른다. */
.cats{ grid-template-columns:repeat(5,1fr); }
.cat{ min-width:0; }
.cat .nm{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat .sb{ display:block; font-size:10.5px; color:var(--ink3); margin-top:2px; letter-spacing:-.3px;
          max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 좁은 화면에서는 개수만 (기본), 넓어지면 설명까지 */
.cat .sb-f{ display:none; }
@media (min-width:520px){
  .cat .sb-s{ display:none; }
  .cat .sb-f{ display:inline; }
}
@media (min-width:820px){ .cats{ grid-template-columns:repeat(5,1fr); gap:10px; } }

/* 묶음으로 들어왔을 때 "지금 뭘 보고 있는지" 와 되돌아갈 길 */
.bookscope{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink3);
            background:var(--soft); border-radius:var(--r-xs); padding:9px 12px; margin-bottom:12px; }
.bookscope b{ color:var(--ink); }
.bookscope button{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--brand); }

/* ── 준비물 체크리스트 ──
   파는 물건이 아직 적어서, 조언을 먼저 세우고 상품이 생기는 자리만 비워둔다. */
.packlist{ margin:0 0 18px; }
.packhead{ display:flex; flex-direction:column; gap:3px; margin:2px 0 14px; }
.packhead b{ font-size:16px; letter-spacing:-.02em; }
.packhead span{ font-size:13.5px; color:#7A8089; }
.packgrp{ margin-bottom:16px; }
.packgrp h4{
  font-size:12.5px; font-weight:700; color:#7A8089; letter-spacing:.04em;
  margin:0 0 8px; text-transform:none;
}
.packit{
  border:1px solid #E8E6E1; border-radius:var(--r-sm); padding:12px 14px;
  margin-bottom:8px; background:#fff;
}
.packit.must{ border-color:#CBD2C6; background:#FBFCFA; }
.packnm{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; }
.must-b{
  font-style:normal; font-size:10.5px; font-weight:700; color:#556F3F;
  background:#EAEDE8; border-radius:var(--r-xs); padding:1px 5px;
}
.packit p{ margin:6px 0 0; font-size:13.5px; line-height:1.6; color:#4A4A4A; }
.packit p.packtip{ color:#7A8089; font-size:13.5px; }
.packbuy{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; padding:9px 12px; border-radius:var(--r-xs);
  background:#F7F5F0; border:1px solid #E8E6E1;
  font-size:13.5px; font-weight:600; color:#1A1A1A; text-decoration:none;
}
.packbuy:hover{ background:#F1EEE7; }
.packbuy span{ color:#A9A29A; }
@media (min-width:820px){
  .packgrp{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .packgrp h4{ grid-column:1/-1; margin-bottom:2px; }
  .packit{ margin-bottom:0; }
}

/* ═══════════════════════════════════════════════════════════
   코스 지도 · 정거장 (계획 결과)
   이름만 늘어놓으면 명단이지 계획이 아니다. 어디쯤인지·어떤 곳인지가 같이 보여야 한다.
   좁은 화면에서는 지도가 목록 위로 올라가고, 넓어지면 목록 옆에 선다.
   ═══════════════════════════════════════════════════════════ */
.route-body{ display:block; }
.route-mapwrap{ position:relative; margin:0; border-bottom:1px solid var(--line); }
.route-map{ height:190px; width:100%; background:var(--soft); z-index:0; }
.route-mapnote{ position:absolute; left:10px; bottom:8px; z-index:400;
  background:rgba(251,247,239,.92); border-radius:var(--r-xs); padding:4px 9px;
  font-size:10.5px; font-weight:600; color:var(--ink2); pointer-events:none; }
.route-map .leaflet-control-attribution{ font-size:10.5px; opacity:.55; }
/* 지도 핀 번호 — 아래 목록의 번호와 같다 */
.rmk{ width:26px; height:26px; border-radius:50%; background:var(--olive); color:#fff;
  font-size:12.5px; font-weight:800; line-height:26px; text-align:center;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.route-map .gpop b{ font-size:13.5px; }
.route-map .gpop .s{ font-size:12.5px; color:var(--ink2); margin:3px 0 5px; }
.route-map .gpop a{ font-size:12.5px; font-weight:700; color:var(--brand-d); }

.stop{ grid-template-columns:26px 1fr; cursor:pointer; }
.stop:active{ background:var(--brand-50); }
.stop-i{ width:22px; height:22px; border-radius:50%; background:var(--soft); color:var(--ink2);
  font-size:11.5px; font-weight:800; line-height:22px; text-align:center; margin-top:2px; }
.stop-b{ min-width:0; }
.stop .when{ display:inline-block; font-size:11.5px; font-weight:800; color:var(--brand);
  background:var(--brand-50); border-radius:var(--r-xs); padding:1px 7px; margin-bottom:4px; }
.stop .sub b{ color:#E0A020; font-weight:700; }
.stop .sub i{ font-style:normal; color:var(--ink3); }
.stop-map{ display:inline-block; margin-top:5px; font-size:11.5px; font-weight:700;
  color:var(--brand-d); }
@media (min-width:820px){
  .route-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .route-mapwrap{ border-bottom:0; border-right:1px solid var(--line); }
  .route-map{ height:100%; min-height:270px; }
}

/* ═══════════════════════════════════════════════════════════
   종류별 상품 묶음
   한 묶음 6개 — Iyengar & Lepper(2000) 잼 실험에서 6종 매대의 구매율이 24종의 10배였다.
   묶음 머리에 종류 아이콘을 둬서, 지금 뭘 고르는 중인지 눈으로 알게 한다.
   ═══════════════════════════════════════════════════════════ */
.grp-ic{ width:28px; height:28px; border-radius:var(--r-xs); display:grid; place-items:center; flex:0 0 auto; }
.grp-h{ align-items:center; }
.grp-h .n{ margin-left:auto; }
.card .plat{ display:inline-block; font-style:normal; font-size:10.5px; font-weight:700;
  color:var(--ink3); background:var(--soft); border-radius:var(--r-xs); padding:1px 6px; margin-left:6px; }
.morebox{ margin-top:9px; }
.moreBtn{ margin-top:2px; }

/* ═══════════════════════════════════════════════════════════
   담기 (예약 목록)
   예전엔 줄 전체가 링크라 상품 하나 보려면 새 창을 열고 되돌아와야 했다.
   ═══════════════════════════════════════════════════════════ */
.li{ grid-template-columns:64px 1fr auto; padding:0; border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; background:#fff; }
.li-go{ display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center;
  grid-column:1/3; padding:9px 0 9px 9px; min-width:0; }
.li-add{ align-self:center; margin-right:11px; padding:9px 13px; border-radius:var(--r-xs);
  border:1.5px solid var(--line2); background:#fff; white-space:nowrap;
  font-size:12.5px; font-weight:800; color:var(--ink2); }
.li-add.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.li-add:active{ transform:scale(.95); }

/* 담기 바가 떠 있는 동안 마지막 줄이 가리지 않게 */
body.has-cart{ padding-bottom:calc(var(--nav-h) + 74px); }

/* ═══════════════════════════════════════════════════════════
   저장함 — 담은 예약(결제로 가는 길) + 저장한 곳·글
   ═══════════════════════════════════════════════════════════ */
.savesec{ margin-bottom:18px; }
.savesec h4{ display:flex; align-items:baseline; gap:7px; margin:6px 0 8px;
  font-size:13.5px; font-weight:800; letter-spacing:-.2px; }
.savesec h4 span{ font-size:11.5px; font-weight:700; color:var(--ink3); }
.platblk{ border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:10px; }
.platblk-h{ display:flex; align-items:baseline; gap:7px; margin-bottom:2px; }
.platblk-h b{ font-size:13.5px; font-weight:800; }
.platblk-h span{ font-size:11.5px; color:var(--ink3); }
.platgo{ width:100%; margin-top:9px; padding:13px; border-radius:11px;
  background:var(--ink); color:#fff; font-size:14px; font-weight:800; }
.platgo:active{ transform:scale(.985); }
.platgo.done{ background:var(--soft); color:var(--ink2); }
.savenote{ margin:2px 2px 0; font-size:11.5px; color:var(--ink3); line-height:1.65; word-break:keep-all; }

/* ── 코스 한 자리에 붙는 예약 ──
   "우붓 ATV" 라고 코스에 써놓고 예약은 저 아래에서 찾으라고 하면, 손님은 그 둘이
   같은 것인지도 모른다. 필요한 자리 바로 밑에서 바로 고르게 한다.
   기본은 접혀 있다 — 줄마다 상품이 펼쳐져 있으면 코스가 아니라 광고가 된다. */
.stop-buy{ margin:0 0 4px 38px; padding-bottom:8px; }
.sb-t{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r-pill);
       border:1px solid var(--brand); background:var(--brand-50); color:var(--brand-d);
       font-size:11.5px; font-weight:800; letter-spacing:-.2px; }
.sb-t i{ font-style:normal; font-size:10.5px; transition:transform .18s var(--ease); }
.sb-t.on i{ transform:rotate(180deg); }
.sb-t:active{ transform:scale(.97); }
.sb-l{ margin-top:9px; padding:11px 12px 6px; border:1px solid var(--line);
       border-radius:var(--r-sm); background:#fff; }
.sb-p{ margin:0 0 8px; font-size:11.5px; color:var(--ink3); line-height:1.5; word-break:keep-all; }
@media(max-width:420px){ .stop-buy{ margin-left:0; } }

/* ═══════════════════════════════════════════════════════════
   통합 검색 (ai-search.js)
   네이버처럼 "발리 꾸따 가성비 숙소"를 치면 그대로 알아듣고, 종류별로 나눠 보여준다.
   ═══════════════════════════════════════════════════════════ */
.as-hint{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:16px 0 10px; }
.as-hint-k{ font-size:11.5px; font-weight:800; color:var(--ink3); margin-right:2px; }
.as-chip{ font-size:12.5px; font-weight:700; color:var(--ink2);
  background:var(--soft); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 11px; }

/* AI 한마디 — 우리 데이터를 근거로 답한 것만 들어온다 */
.as-ai{ display:flex; align-items:center; gap:8px; margin:0 0 16px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--soft); }
.as-ai.on{ display:block; background:var(--brand-50); border-color:#F0E2C6; }
.as-ai-ask{ font-size:12.5px; color:var(--ink3); }
.as-ai-k{ display:inline-block; font-size:10.5px; font-weight:800; color:#fff;
  background:var(--brand); border-radius:var(--r-xs); padding:2px 7px; margin-bottom:7px; }
.as-ai p{ margin:0; font-size:13.5px; line-height:1.68; color:var(--ink); word-break:keep-all; }
.as-ai-l{ margin:9px 0 0; padding-left:17px; font-size:12.5px; color:var(--ink2); line-height:1.7; }
.as-ai-note{ display:block; margin-top:9px; font-size:11.5px; color:var(--ink3); line-height:1.55; }
.as-ai-dot{ width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--line2); border-top-color:var(--brand); animation:as-spin .7s linear infinite; }
.as-ai-t{ font-size:12.5px; color:var(--ink3); }
@keyframes as-spin{ to{ transform:rotate(360deg); } }

.as-sec{ margin-bottom:24px; }
.as-sec-h{ display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
.as-sec-h h3{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.4px; }
.as-sec-h .n{ font-size:12.5px; font-weight:700; color:var(--ink3); }
.as-sec-p{ margin:0 0 11px; font-size:12.5px; color:var(--ink3); line-height:1.55; word-break:keep-all; }
.as-more{ width:100%; margin-top:9px; padding:13px; border-radius:var(--r-sm);
  border:1.5px dashed var(--line2); background:#fff;
  font-size:13.5px; font-weight:700; color:var(--ink2); }
.as-more:active{ transform:scale(.99); }

/* 장소 한 줄 */
.as-pl{ display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center;
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:7px; background:#fff; }
.as-pl-e{ width:34px; height:34px; border-radius:var(--r-xs); background:var(--soft);
  display:grid; place-items:center; font-size:16px; }
.as-pl-b{ min-width:0; }
.as-pl-b .nm{ display:block; font-size:14px; font-weight:700; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-pl-b .sub{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink3); }
.as-pl-b .sub b{ color:#E0A020; font-weight:700; }
.as-pl-b .sub i{ font-style:normal; }
.as-pl-go{ font-size:11.5px; font-weight:700; color:var(--brand-d); white-space:nowrap; }

/* 예약 상품 한 줄 — 담기 버튼은 예약 탭과 같은 .li-add 를 쓴다 */
.as-pr{ display:grid; grid-template-columns:1fr auto; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:7px; background:#fff; overflow:hidden; }
.as-pr-go{ display:grid; grid-template-columns:62px 1fr; gap:11px; align-items:center;
  padding:9px 0 9px 9px; min-width:0; }
.as-pr .th{ width:62px; height:56px; border-radius:var(--r-xs); overflow:hidden; background:var(--soft); }
.as-pr .th img{ width:100%; height:100%; object-fit:cover; }
.as-pr-b{ min-width:0; }
.as-pr-b .nm{ display:-webkit-box; font-size:13.5px; font-weight:700; line-height:1.35;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.as-pr-b .sub{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink3); }
.as-pr-b .sub b{ color:#E0A020; font-weight:700; }

/* 글 — 가로로 흐르게 두면 몇 편인지 감이 온다 */
.as-porow{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.as-porow::-webkit-scrollbar{ display:none; }
.as-po{ flex:0 0 auto; width:168px; }
.as-po .th{ display:block; width:168px; height:110px; border-radius:var(--r-sm); overflow:hidden; background:var(--soft); }
.as-po .th img{ width:100%; height:100%; object-fit:cover; }
.as-po-b .ch{ display:block; margin-top:7px; font-size:10.5px; font-weight:800; color:var(--brand); }
.as-po-b .nm{ display:-webkit-box; margin-top:2px; font-size:13.5px; font-weight:700; line-height:1.4;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 하루 코스 */
.as-rt{ border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 14px; margin-bottom:8px; }
.as-rt b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.3px; }
.as-rt span{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink3); }
.as-rt p{ margin:7px 0 0; font-size:12.5px; color:var(--ink2); line-height:1.6; word-break:keep-all; }
.as-rt-go{ margin-top:10px; padding:9px 14px; border-radius:var(--r-xs); background:var(--soft);
  font-size:12.5px; font-weight:700; color:var(--ink); }

.empty b{ display:block; font-size:15px; color:var(--ink); margin-bottom:8px; }
.empty i{ font-style:normal; font-weight:700; color:var(--ink2); }

@media (min-width:820px){
  .as-pl, .as-pr{ margin-bottom:9px; }
  .as-po{ width:206px; } .as-po .th{ width:206px; height:134px; }
}

/* ── 발리 처음이세요? 준비 체크리스트 ──
   시점(전·중·끝)으로 나눈 이유는, 손님이 궁금해지는 순간이 그 시점마다 다르기 때문이다.
   출발 전엔 비자를, 도착해서는 그랩을, 돌아올 땐 기념품을 찾는다.
   2026-08-11: 홈에 매칭 히어로 다음으로 남는 유일한 섹션이라, 맨몸 텍스트가 아니라
   카드 한 장으로 들어올린다. */
.sec.prep{
  margin-top:2px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 20px 18px; box-shadow:var(--shadow-sm);
}
.sec-eyebrow{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:var(--brand-d); margin-bottom:6px;
}
.sec.prep .sec-h h3{ font-size:19px; font-weight:700; }
.prep-n{ font-variant-numeric:tabular-nums; color:var(--brand-d); font-weight:800; }
.prep-seg{ display:flex; gap:7px; margin:10px 0 4px; overflow-x:auto; scrollbar-width:none; }
.prep-seg::-webkit-scrollbar{ display:none; }
.prep-tb{ flex:0 0 auto; padding:9px 15px; border-radius:var(--r-pill); border:1px solid var(--line);
          background:#fff; font-size:13.5px; font-weight:600; color:var(--ink2);
          box-shadow:var(--shadow-sm); white-space:nowrap; transition:transform .14s var(--ease); }
.prep-tb:active{ transform:scale(.96); }
.prep-tb.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.prep-s{ margin:10px 0 6px; font-size:12.5px; color:var(--ink3); }
.prep-l{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.prep-i{ display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:start;
         padding:13px 14px; cursor:pointer; }
.prep-i + .prep-i{ border-top:1px solid var(--line); }
.prep-i input{ position:absolute; opacity:0; width:0; height:0; }
.prep-box{ width:20px; height:20px; margin-top:1px; border-radius:var(--r-xs);
           border:2px solid var(--line2); background:#fff; position:relative; transition:.15s; }
.prep-i.on .prep-box{ background:var(--brand); border-color:var(--brand); }
.prep-i.on .prep-box::after{ content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
           border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg); }
.prep-t{ display:block; font-size:14px; font-weight:700; letter-spacing:-.2px; }
.prep-i.on .prep-t{ color:var(--ink3); text-decoration:line-through; }
.prep-must{ font-style:normal; margin-left:6px; font-size:10.5px; font-weight:700; color:#fff;
            background:var(--hot); padding:2px 6px; border-radius:var(--r-xs); vertical-align:1.5px; }
.prep-d{ display:block; margin-top:4px; font-size:12.5px; color:var(--ink2);
         line-height:1.62; word-break:keep-all; }
.prep-note{ display:block; margin-top:5px; font-size:11.5px; color:var(--ink3); }
.prep-go{ display:inline-block; margin:7px 10px 0 0; font-size:11.5px; font-weight:700;
          color:var(--brand-d); }
.prep-go:hover{ text-decoration:underline; }
.as-loading{ margin:0 0 14px; padding:11px 13px; border-radius:11px; background:var(--soft);
  font-size:12.5px; color:var(--ink3); }
.as-sec-p b{ color:var(--ink2); font-weight:700; }

/* 홈의 시작점 하나. 손님이 첫 화면에서 누를 것은 이 버튼이다.
   설명은 버튼 아래로 내린다 — 읽고 나서 누르는 게 아니라, 누르고 나서 읽어도 되는 말이다. */
.home-go{ margin-top:6px; }
.home-go .sec-p{ margin-top:9px; text-align:center; }
.prep-more{ width:100%; margin-top:10px; padding:11px; border-radius:var(--r-sm);
            border:1px solid var(--c-line,#E9EBEF); background:#fff;
            font-size:13.5px; font-weight:600; color:var(--c-ink2,#4B5159); }
.prep-more:active{ transform:scale(.99); }

/* ── 여행상품 추천 (2026-08-11) ──
   .sec.prep 과 같은 카드 톤. .prod 카드(검색 결과와 같은 컴포넌트)를 2열 그리드에 넣어
   180px 고정폭을 이 칸 안에서만 100%로 풀어준다 — 새 카드를 만들지 않는다. */
.sec.recs{
  margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 20px 18px; box-shadow:var(--shadow-sm);
}
.sec.recs .sec-eyebrow{ color:var(--c-olive); }
.sec.recs .sec-h h3{ font-size:19px; font-weight:700; }
.sec.recs .sec-p b{ color:var(--c-olive); }
.sec.recs .chip.on{ background:var(--c-olive); border-color:var(--c-olive); }
/* 2026-08-12: 지역·가격·누구랑 칩 세 줄을 한 화면에 다 늘어놓던 자리를, 계획 탭처럼
   하나씩 물어보는 단계형으로 바꿨다(사장님 지시) — "우리가 골라주는 게 아니라 손님이
   직접 정한다"는 원래 취지는 그대로 두고, 질문을 한 번에 하나만 보여줘 더 가볍게 만들었다. */
.rec-quiz{
  background:var(--soft); border-radius:var(--r-md); padding:18px 16px; margin:2px 0 16px;
}
.rec-quiz-prog{ font-size:11.5px; font-weight:600; color:var(--ink3); letter-spacing:.02em; }
.rec-quiz-q{ font-size:16px; font-weight:700; margin-top:6px; word-break:keep-all; }
.rec-quiz-s{ margin:4px 0 14px; font-size:12.5px; color:var(--ink2); }
.rec-quiz-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.rec-quiz-opt{
  flex:0 0 auto; font-size:13.5px; font-weight:500; padding:10px 16px;
  border:1.5px solid var(--line); border-radius:var(--r-pill); background:#fff; color:var(--ink);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
}
.rec-quiz-opt:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(74,93,58,.14); }
/* "상관없어요"는 보조 선택지다. 위에서 일반 선택지를 500 으로 낮춘 뒤로 이게 600 이면
   건너뛰기가 오히려 더 굵어지는 역전이 생긴다 — 점선 테두리와 흐린 색으로 이미 구별된다. */
.rec-quiz-opt.rec-quiz-skip{ border-style:dashed; color:var(--ink2); font-weight:500; }
.rec-quiz-back{ margin-top:12px; font-size:12.5px; color:var(--ink3); font-weight:700; }
.rec-quiz-cond{ font-size:13.5px; color:var(--ink2); margin:0 0 12px; }
.rec-quiz-cond b{ color:var(--c-olive); }
.rec-quiz-restart{ font-size:12.5px; font-weight:800; color:var(--c-olive); text-decoration:underline; text-underline-offset:2px; margin-left:2px; }
.rec-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px 10px; margin-top:4px; }
.rec-grid .prod{ width:100%; }
.rec-grid .prod .th{ width:100%; height:auto; aspect-ratio:4/3; }
.rec-more-note{ margin:10px 2px 0; font-size:12.5px; color:var(--ink3); text-align:center; }
@media (min-width:520px){
  .rec-grid{ grid-template-columns:repeat(3,1fr); }
}