/* ============================================================
   Vamos Travel Korea · 공용 스타일
   색·서체: Brand Guidelines 2026 (3.1 / 3.2 / 3.4)
   구조: 스페인어권 여행사 사이트 관행 (메뉴, 상품 카드,
         상품 상세 = 요약 + 탭 + 예약 사이드바, 4단 푸터)
   겉모습: jejuslowly.com 과 통일 (2026-10-01). 맨 위 Tangerine 띠, 반투명 고정 메뉴,
         밝은 히어로 + 둥근 사진, 검정 알약 버튼 + 오렌지 원형 화살표, 라운드 14px
   ============================================================ */
:root{
  /* 브랜드 지정색 */
  --soil:#3F2B25;
  --basalt:#1C1B1B;
  --buck:#FBFAF3;
  --tang:#E87A43;
  --mug:#709370;
  --sand:#E0CDB3;

  /* 접근성 보정 (Buckwheat 위 대비 계산값) */
  --tang-ink:#9E532E;   /* 5.38:1  작은 오렌지 글씨 */
  --muted:#666563;      /* 5.56:1  보조 글씨 */
  --ink:#1C1B1B;
  --ink-2:#4E4D4B;
  --line:#E2E1DB;
  --line-2:#EEECE5;
  --paper:#FFFFFF;
  --sand-soft:#F0E7D8;  /* jejuslowly --cream 과 같은 값 */

  --r:14px;             /* 가이드 5.1 · jejuslowly 와 같은 라운드 */
  --r-sm:10px;
  --pill:999px;
  --maxw:1264px;
  --gut:clamp(20px,6.1vw,88px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--buck);color:var(--ink);
  font-family:'Noto Sans','Helvetica Neue',Arial,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Noto Serif',Georgia,serif;font-weight:600;color:var(--soil);line-height:1.25}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--tang-ink);outline-offset:2px;border-radius:3px}
.wrap{max-width:calc(var(--maxw) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 아이콘 */
.ico{width:1em;height:1em;fill:currentColor;flex-shrink:0;display:inline-block;vertical-align:-.15em}

/* ── 맨 위 Tangerine 띠 (jejuslowly.com .promo-bar 와 같은 모양) ── */
.promo-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;
  background:var(--tang);color:var(--basalt);padding:10px 20px;text-align:center;
  font-size:14px;letter-spacing:.01em;transition:background .2s}
.promo-bar:hover{background:#DE6C33}
.promo-tag{font-family:'Noto Serif',Georgia,serif;font-size:15px;font-weight:600}
.promo-text b{font-weight:700}
.promo-cta{font-weight:600;color:var(--buck);background:var(--basalt);border-radius:var(--pill);
  padding:4px 14px;font-size:13px;white-space:nowrap}

/* ── 메인 메뉴 (반투명 고정, 알약 탭) ─────────── */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,250,243,.92);
     -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(63,43,37,.14)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.nav .logo img{height:26px;width:auto}
.menu{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.menu a{padding:9px 16px;border-radius:var(--pill);transition:color .2s,background .2s}
.menu a:hover{color:var(--soil);background:rgba(63,43,37,.06)}
.menu a.on{color:var(--buck);background:var(--soil)}
.nav-cta{padding:10px 20px;font-size:14px}
.menu-mobile{display:none}

/* ── 버튼 ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:.94rem;line-height:1;border-radius:var(--pill);
  padding:14px 24px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.btn .ico{font-size:1.1rem}
.btn-tang{background:var(--tang);color:var(--basalt)}          /* Tangerine 위 글씨는 Basalt */
.btn-tang:hover{background:#DC6C33}
.btn-dark{background:var(--basalt);color:var(--buck)}
.btn-dark:hover{background:var(--soil)}
.btn-line{background:transparent;color:var(--basalt);border:1.5px solid var(--basalt)}
.btn-line:hover{background:var(--basalt);color:var(--buck)}
/* 오렌지 원형 화살표 (jejuslowly 히어로와 같은 장치) */
.btn-arrow{width:46px;height:46px;flex-shrink:0;border-radius:50%;background:var(--tang);color:var(--basalt);
  display:inline-grid;place-items:center;transition:transform .18s}
.btn-arrow:hover{transform:translateX(3px)}
.btn-arrow .ico{font-size:1.25rem}
.btn-light{background:var(--buck);color:var(--soil)}
.btn-light:hover{background:var(--sand)}
.btn-block{width:100%}

/* ── 공통 섹션 머리 (좌측 정렬 + 하단 선) ─────── */
.sec{padding:72px 0}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
    border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:30px}
.sh h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.sh p{color:var(--muted);font-size:.92rem;margin-top:4px}
.sh .more{font-size:.88rem;font-weight:600;color:var(--tang-ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sh .more .ico{font-size:1rem}
.label{font-family:'Noto Serif',Georgia,serif;font-size:15px;font-weight:500;letter-spacing:.005em;color:var(--tang-ink)}

/* ── 상품 카드 (여행사 목록형) ────────────────── */
.trip{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
      display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.trip:hover{border-color:#D6CDBF;box-shadow:0 6px 20px rgba(63,43,37,.08)}
.trip .ph{position:relative;aspect-ratio:4/3;background:var(--sand);overflow:hidden}
/* 세로 사진이 비율 상자를 밀어내지 않도록 이미지를 흐름에서 뺀다 */
.trip .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trip .days{position:absolute;left:12px;bottom:12px;background:var(--basalt);color:var(--buck);
            font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:6px}
.trip .tag{position:absolute;left:12px;top:12px;background:var(--tang);color:var(--basalt);
           font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:6px}
.trip .bd{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.trip .route{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.trip h3{font-size:1.2rem;margin:6px 0 10px}
.trip ul{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:.87rem;color:var(--ink-2);margin-bottom:16px}
.trip li{display:flex;gap:8px;align-items:flex-start}
.trip li .ico{color:var(--mug);font-size:.95rem;margin-top:.28em}
.trip .note{font-size:.76rem;color:var(--muted);margin:-8px 0 14px}
.trip .ft{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
          border-top:1px solid var(--line-2);padding-top:14px}
.trip .pr small{display:block;font-size:.72rem;color:var(--muted)}
.trip .pr b{font-family:'Noto Serif',serif;font-size:1.35rem;color:var(--soil);font-weight:600}
.trip .pr b.q{font-size:1rem}
.trip .go{font-size:.86rem;font-weight:600;color:var(--tang-ink);display:inline-flex;align-items:center;gap:5px}

/* ── 콘텐츠 (블로그·팟캐스트·인스타) ─────────── */
.media-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
.posts{display:flex;flex-direction:column;gap:16px}
.post{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;background:var(--paper);
      border:1px solid var(--line);border-radius:var(--r);overflow:hidden;padding-right:16px}
.post img{width:132px;height:100px;object-fit:cover}
.post .k{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mug)}
.post h3{font-size:.98rem;line-height:1.4;margin-top:4px}
.post:hover h3{color:var(--tang-ink)}
.pod{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:20px}
.pod iframe{width:100%;height:232px;border:0;border-radius:10px;display:block}
.pod .links{display:flex;gap:16px;margin-top:12px;font-size:.84rem;font-weight:600;color:var(--tang-ink)}
.ig{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* 인스타 프로필 임베드: 머리글 + 3열 2줄. 폭에 비례해 높이를 맞춘다 */
.ig iframe{width:100%;height:calc(66.7cqw + 160px);min-height:380px;border:0;display:block}
.ig{container-type:inline-size}
.ig .cap{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:.86rem;border-top:1px solid var(--line-2)}
.ig .cap a{font-weight:600;color:var(--tang-ink);display:inline-flex;gap:6px;align-items:center}

/* ── 여행사 배너 ─────────────────────────────── */
.b2b-band{background:var(--sand-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.b2b-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:34px;padding-bottom:34px}
.b2b-band h2{font-size:1.35rem}
.b2b-band p{color:var(--ink-2);font-size:.93rem;margin-top:4px;max-width:62ch}

/* ── 뉴스레터 ────────────────────────────────── */
.news{background:var(--soil);color:var(--buck)}
.news .wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding-top:38px;padding-bottom:38px}
.news h2{color:var(--buck);font-size:1.3rem}
.news p{font-size:.9rem;color:var(--sand);margin-top:5px}
.news form{display:flex;gap:10px}
.news input{flex:1;min-width:0;padding:13px 18px;border-radius:var(--pill);border:0;font:inherit;font-size:.95rem;background:var(--buck);color:var(--basalt)}
.news .ok{display:none;font-size:.92rem}
.news .ok.on{display:block}
.news .ok a{color:var(--tang);text-decoration:underline;font-weight:600}
.news small{display:block;font-size:.76rem;color:var(--sand);opacity:.8;margin-top:8px}

/* ── 푸터 ────────────────────────────────────── */
footer{background:var(--basalt);color:rgba(251,250,243,.72);font-size:.9rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding:56px 0 40px}
footer h4{font-family:'Noto Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tang);margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a:hover{color:var(--tang)}
footer .brand img{height:28px;margin-bottom:14px}
footer .brand p{max-width:34ch;line-height:1.7}
footer .contact a{display:inline-flex;align-items:center;gap:8px}
footer .contact .ico{color:var(--tang);font-size:1.1rem}
footer .legal{border-top:1px solid rgba(255,255,255,.12);padding:22px 0 30px;font-size:13px;color:rgba(255,255,255,.55);
              display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── 고정 WhatsApp ───────────────────────────── */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;width:54px;height:54px;border-radius:50%;
     background:var(--soil);color:var(--buck);display:flex;align-items:center;justify-content:center;
     box-shadow:0 4px 16px rgba(28,27,27,.22);transition:background .15s}
.fab:hover{background:var(--basalt)}
.fab .ico{font-size:1.65rem}

/* ── 반응형 ──────────────────────────────────── */
@media(max-width:1000px){
  .menu{display:none}
  .nav .wrap{justify-content:flex-start}
  .nav .logo{margin-right:auto}
  .menu-mobile{display:block;position:relative}
  .menu-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--soil)}
  .menu-mobile summary::-webkit-details-marker{display:none}
  .menu-mobile summary .ico{font-size:1.5rem}
  .menu-mobile nav{position:absolute;right:0;top:44px;width:250px;background:var(--paper);border:1px solid var(--line);
                   border-radius:var(--r);box-shadow:0 12px 30px rgba(28,27,27,.14);padding:10px;display:flex;flex-direction:column}
  .menu-mobile nav a{padding:11px 12px;border-radius:8px;font-size:.95rem}
  .menu-mobile nav a:hover{background:var(--sand-soft)}
  .menu-mobile nav .btn{margin-top:8px}
  .media-grid{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .news .wrap{grid-template-columns:1fr}
}
@media(max-width:640px){
  .promo-bar{font-size:12.5px;padding:10px 14px;gap:4px 10px}
  .promo-tag{font-size:13.5px}
  .promo-cta{font-size:12px;padding:3px 11px}
  .promo-long{display:none}
  .nav-cta{display:none}
  .sec{padding:52px 0}
  .sh{flex-direction:column;align-items:flex-start}
  .b2b-band .wrap{flex-direction:column;align-items:flex-start}
  .post{grid-template-columns:104px 1fr}
  .post img{width:104px;height:92px}
  footer .cols{grid-template-columns:1fr}
  .news form{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}