/* ─────────────────────────────────────────────────────────────
   base.css — 사이트 전체가 쓰는 단 하나의 기준

   홈·계획·매거진·지도·예약은 원래 각각 다른 페이지였다. 한 페이지로 합칠 때
   색·서체·여백을 세 벌(unified.css / #pane-read / #pane-map) 그대로 들고 왔고,
   그래서 탭을 옮길 때마다 다른 앱처럼 보였다.

   여기가 유일한 원본이다. 나머지 세 파일은 자기 이름표만 여기로 연결한다.
   색을 바꾸고 싶으면 이 파일의 값 하나만 고치면 다섯 탭이 함께 바뀐다.

   2026-08-11 — "한국에서 바라보는 발리" 톤으로 개편.
   관광지 팜플렛처럼 원색을 쓰지 않는다. 여행 매거니 화보에 가깝게 —
   따뜻한 아이보리 바탕, 그을린 브라운 잉크, 액센트는 하나뿐이다.
   규칙 세 가지 (그대로 유지)
   ① 액센트는 하나. (2026-08-11 밤: 금색 → 올리브그린으로 교체. "노란색이 별로다"라는
      사장님 지시. 로고에 쓰던 올리브(옛 --c-olive #4A5D3A)를 액센트 본자리로 올렸다 —
      로고와 완전히 같은 색이라 어울리고 안 어울리고를 고민할 필요가 없다. --c-olive는
      이제 --c-brand의 별칭일 뿐이니 새 코드에서는 --c-brand를 쓸 것.)
   ② '고른 것'은 항상 잉크색. 탭마다 선택 색이 다르면 같은 앱으로 안 읽힌다.
   ③ 바탕은 아이보리 하나. 사진 위에 얹는 스크림(--c-scrim)은 액센트가 아니라
      사진의 그림자일 뿐이라 이 규칙과 별개다.
   ───────────────────────────────────────────────────────────── */
:root{
  /* 글자 — 완전한 검정 대신, 그을린 브라운이 도는 잉크 */
  --c-ink:#211B15;      /* 제목·본문 */
  --c-ink2:#5B5347;     /* 설명 */
  --c-ink3:#938A79;     /* 보조·placeholder */

  /* 면 — 흰색 대신 따뜻한 모래빛 아이보리 */
  --c-bg:#FBF7EF;       /* 바탕 */
  --c-soft:#F3ECDD;     /* 옅은 구획 (검색창·안내 상자) */
  --c-line:#E7DCC5;     /* 경계선 */
  --c-line2:#EFE7D6;    /* 더 옅은 경계선 */

  /* 액센트 — 행동(예약·CTA)과 강조. 하나뿐이다 (2026-08-11 밤: 금색 → 올리브그린) */
  --c-brand:#4A5D3A;
  --c-brand-d:#36442A;
  --c-brand-50:#EEF1E7;
  /* 로고·푸터도 이제 액센트와 같은 색이라 별도 값이 아니라 별칭이다 */
  --c-olive:var(--c-brand);
  --c-hot:#E0524E;
  --c-good:#1AA179;
  /* 사진(바다·노을) 위에 얹는 어두운 그림자. 무채색 검정 대신 깊은 바닷빛 —
     액센트가 아니라 사진을 가라앉혀 글자를 읽히게 하는 용도로만 쓴다. */
  --c-scrim:#0E1712;
  /* 카드뉴스 생성기(2_운영도구/카드뉴스_메이커.html) 전용 — 어두운 사진 배경 위 글자·라벨 강조.
     --c-brand(올리브)는 밝은 바탕 전용이라 사진 위에서는 잘 안 보여서, 올리브를 밝힌 라임톤을
     따로 둔다(2026-08-14). 사이트 탭 UI에는 쓰지 않는다 — "액센트는 하나" 원칙은 사이트 쪽 그대로 유지. */
  --c-card-accent-dark:#C7E86A;

  /* 모서리 — 네 단계면 충분하다. 이보다 늘리면 다시 제각각이 된다 */
  /* 2026-08-18: 아이콘칸·작은 배지처럼 12px 이 확실히 큰 자리가 실제로 있었다.
     코드에는 5·6·8·9·10px 이 손으로 박혀 있었는데, 이름 없는 값으로 흩어져 있느니
     한 단계를 정직하게 만들어 모으는 편이 낫다. */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;

  /* 여백 — 모든 탭의 좌우 기준선. 매거진만 20px 이던 것을 맞췄다 */
  --pad:16px;
  --nav-h:64px;  /* 2026-08-17: 아이콘·라벨 터치영역 48px+ 확보 위해 60→64. calc(var(--nav-h)+...)
                    쓰는 곳(has-booksticky 등)은 변수 참조라 자동으로 따라온다. */

  /* 그림자 — 두 단계. 카드마다 다른 그림자를 쓰면 깊이가 거짓말을 한다 */
  --sh-sm:0 1px 3px rgba(30,24,14,.07);
  --sh-md:0 8px 24px rgba(30,24,14,.12);

  --fn:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* 쓰지 않음(2026-08-16, 마이리얼트립 대조) — 마이리얼트립은 산세리프 하나만 쓴다.
     명조·모노 혼용이 "AI가 뽑은 화면" 인상의 원인으로 지목돼 실제 사용처를 전부 걷어냈다.
     var() 참조가 남아있을 수 있어 정의만 남겨둔다 — 새로 쓰지 말 것. */
  --fn-serif:'Noto Serif KR', 'Songmyung', var(--fn);
  --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── 공통 진입 모션 ──
   IntersectionObserver는 안 쓴다 — 숨은 탭(.pane{display:none})에서 콜백이
   한 번도 안 오는 환경을 이미 두 번 겪었다(unified.js lazyScan 주석 참고).
   대신 .pane.on 이 되는 순간(display:none → block) 브라우저가 애니메이션을
   새로 시작하는 표준 동작만 쓴다 — 관찰자 없이도 탭을 열 때마다 항상 켜진다. */
@keyframes bst-fade-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
/* 사진 히어로용 느린 줌 — 영상 없이도 "살아있는 사진"처럼 보이게 한다 */
@keyframes bst-kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1.16); } }
.pane.on .reveal{ animation:bst-fade-up .6s var(--ease) both; }
.pane.on .reveal-2{ animation:bst-fade-up .6s var(--ease) .08s both; }
.pane.on .reveal-3{ animation:bst-fade-up .6s var(--ease) .16s both; }
@media (prefers-reduced-motion:reduce){
  .pane.on .reveal, .pane.on .reveal-2, .pane.on .reveal-3{ animation:none; }
  .hh-ph{ animation:none !important; }
  .home-hero-vid{ transition:none; }
}

/* ── 얇은 금색 구분선 — 섹션 사이, 팜플렛 풍 굵은 선 대신 ── */
.gold-rule{ display:flex; align-items:center; gap:10px; margin:26px 0;
            color:var(--c-brand-d); }
.gold-rule::before,.gold-rule::after{ content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--c-line),transparent); }
.gold-rule i{ width:5px; height:5px; border-radius:50%; background:var(--c-brand); flex:0 0 auto; }

/* ── 공통 페이지 머리 ──
   탭마다 제목을 다르게 얹던 것을 하나로 모았다.
   매거진은 상단바 + 앱바 + 큰 제목까지 세 겹이라 같은 말이 세 번 나왔다. */
.phead{ padding:20px 0 12px; }
.phead h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.7px; line-height:1.28; }
.phead p{ margin:6px 0 0; font-size:13.5px; color:var(--c-ink2); line-height:1.6; word-break:keep-all; }
.phead .eyebrow{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.06em;
  color:var(--c-brand-d); margin-bottom:7px;
}
@media (min-width:820px){
  .phead{ padding:26px 0 14px; }
  .phead h1{ font-size:30px; }
  .phead p{ font-size:14px; }
}

/* ── 세그먼트 (한 탭 안에서 화면을 가르는 자리) ──
   매거진 아래쪽에 따로 있던 탭바를 이걸로 대신한다. 하단 바가 두 줄로 겹치지 않는다. */
.seg2{
  display:flex; gap:4px; background:var(--c-soft); border:1px solid var(--c-line);
  border-radius:var(--r-md); padding:4px; margin:2px 0 14px;
}
.seg2 button{
  flex:1; padding:10px 8px; border-radius:10px; font-size:13.5px; font-weight:700;
  color:var(--c-ink2); transition:background .15s var(--ease), color .15s;
}
/* 고른 것 표시. 매거진 쪽 코드(mag-pane.js)는 .active 를, 나머지는 .on 을 붙인다 —
   한쪽만 받으면 눌러도 아무 표시가 안 나므로 둘 다 받는다. */
.seg2 button.on,
.seg2 button.active{ background:var(--c-bg); color:var(--c-ink); font-weight:800; box-shadow:var(--sh-sm); }
/* 넓은 화면에서 화면 폭만큼 늘어나면 버튼 두 개가 우스꽝스럽게 커진다 */
@media (min-width:820px){ .seg2{ max-width:340px; } }

/* 화면 밖으로 밀리지 않게 — 표·지도·긴 줄은 자기 칸 안에서만 넘친다 */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.scroll-x::-webkit-scrollbar{ display:none; }