/* 상품 상세 전용 스타일 — fishing-tour.html · sunset-boat.html
 *
 * 왜 별도 파일인가
 *   홈(index.html)은 웹팀1이 unified.css 로 작업한다. 같은 파일을 둘이 만지면
 *   충돌이 나므로 상세 전용은 전부 여기에 둔다. unified.css 는 읽기만 하고 고치지 않는다.
 *
 * 무엇을 하나
 *   마이리얼트립 상품 상세와 "느낌"을 맞춘다. 구조와 순서는 HTML 에서 이미 맞췄고,
 *   여기서는 눈에 보이는 것 세 가지를 맞춘다. 전부 마이리얼트립에서 직접 잰 값이다.
 *
 *   1) 모서리   우리는 999px·28·24·22·20·18·16·14·12·10·6px 로 11 종류가 흩어져 있었다.
 *              마이리얼트립은 375px 화면에서 12px 가 154 회로 압도적이고, 배지 6px,
 *              pill 버튼 99px, 일반 버튼 8px 이다. 그 넷으로 줄인다.
 *
 *   2) 그림자   ⚠️ 이게 제일 크게 다른 부분이다.
 *              마이리얼트립은 그림자를 거의 쓰지 않는다. 카드를 띄우지 않고
 *              1px 테두리로만 구분한다(그것도 border 가 아니라 box-shadow 로 그려서
 *              레이아웃이 밀리지 않게 한다). 우리는 카드마다 shadow-md·shadow-lg 를 써서
 *              전부 떠 있었고, 그래서 화면이 붕 뜨고 어수선해 보였다.
 *
 *   3) 구분 띠  섹션 사이를 1px 선이 아니라 16px 회색 면(#F1F3F5)으로 나눈다.
 *              선은 "칸막이"로, 면은 "다른 이야기가 시작된다"로 읽힌다.
 *
 * 값의 출처: .deploy/mrt-tokens-2026-08-15.md (직접 실측)
 *
 * ⚠️ unified.css 를 싣지 않는 이유
 *   375px 값(--mrt-*)은 웹팀1이 unified.css :root 에 넣어 두었다. 처음엔 그 파일을
 *   같이 실어 토큰을 읽으려 했는데, unified.css 의 .card 는 홈 목록 카드용이라
 *   display:grid; grid-template-columns:78px 1fr 30px 가 걸려 있다(unified.css:600).
 *   싣는 순간 상세의 포함·불포함 카드가 통째로 어그러졌다. 실제로 화면에서 확인했다.
 *   그래서 토큰은 아래에 같은 값으로 다시 적는다. 값이 두 곳이 되는 건 감수한다 —
 *   홈 스타일이 상세로 새는 쪽이 훨씬 나쁘다.
 *   웹팀1이 --mrt-* 값을 바꾸면 여기도 같이 고칠 것.
 */

:root {
  /* 웹팀1이 375px 에서 실측한 값. unified.css :root 와 같은 값을 유지한다. */
  --mrt-gutter: 20px;
  --mrt-header-h: 48px;
  --mrt-divider-h: 16px;
  --mrt-divider-bg: #F1F3F5;
  --mrt-chip-gap: 6px;
  --mrt-img-ratio-square: 1;

  --pd-radius-card: 12px;   /* 카드·이미지 기본 */
  --pd-radius-badge: 6px;   /* 배지·작은 라벨 */
  --pd-radius-btn: 8px;     /* 일반 버튼 */
  --pd-radius-pill: 99px;   /* 알약형 버튼 */

  /* 그림자 대신 테두리. 마이리얼트립 --elevation-z0-border 와 같은 방식 */
  --pd-hairline: 0 0 0 1px #e9ecef;
  --pd-lift: 0 2px 4px 0 rgba(33, 37, 41, .1), 0 0 0 1px #e9ecef;
}

/* ── 1. 모서리 ───────────────────────────────────────────────── */
.card,
#hero-bg,
#location > div > div {
  border-radius: var(--pd-radius-card);
}

.stat-card {
  border-radius: var(--pd-radius-card);
}

.badge,
.chip {
  border-radius: var(--pd-radius-badge);
}

/* 갤러리 타일은 인라인으로 border-radius:var(--r-md) 이 박혀 있어서 !important 가 필요하다.
   ⚠️ 비율(aspect-ratio)은 건드리지 않는다. 16:9 · 1:1 · 21:9 가 섞인 건 실수가 아니라
      모자이크로 짠 것이고, 전부 1:1 로 맞추면 레이아웃이 무너진다.
      마이리얼트립의 "대표 이미지 1:1"은 상품 목록 카드 얘기지 상세 안 갤러리가 아니다. */
.gal,
.gal img {
  border-radius: var(--pd-radius-card) !important;
}

/* ── 2. 그림자 걷어내기 ──────────────────────────────────────────
   카드를 띄우지 않는다. 얇은 테두리로만 구분한다. */
.card {
  box-shadow: var(--pd-hairline);
}

/* 숫자 카드는 히어로 위로 걸쳐 올라오므로 그것만 아주 살짝 띄운다.
   여기까지 평평하게 하면 배경 사진에 파묻혀 안 읽힌다. */
.stat-card {
  box-shadow: var(--pd-lift);
}

/* 본문 안의 큰 사진도 떠 있을 이유가 없다 */
#about-photo,
.rv[style*="box-shadow"] {
  box-shadow: var(--pd-hairline) !important;
}

/* 언어 메뉴처럼 실제로 떠 있어야 하는 것만 그림자를 남긴다 */
#lang-menu {
  box-shadow: 0 8px 16px 0 rgba(33, 37, 41, .15), 0 0 0 1px #e9ecef !important;
  border-radius: var(--pd-radius-card) !important;
}

/* ── 3. 섹션 구분 띠 ────────────────────────────────────────────
   16px #F1F3F5. 배경색이 있는 섹션끼리는 이미 색으로 나뉘므로
   흰 배경이 이어지는 자리에만 넣는다. */
.pd-divider {
  height: var(--mrt-divider-h, 16px);
  background: var(--mrt-divider-bg, #F1F3F5);
}

/* ── 4. 버튼 ───────────────────────────────────────────────────
   히어로의 큰 CTA 는 알약형을 유지한다(마이리얼트립도 pill 을 22 회 쓴다).
   본문 안에 섞여 있는 작은 링크형 버튼만 8px 로 낮춘다. */
#pricing a[href*="kakao"],
#pricing a[href*="myrealtrip"],
#contact a[href*="kakao"],
#contact a[href*="myrealtrip"] {
  border-radius: var(--pd-radius-btn) !important;
}

/* ── 5. 좌우 여백 ──────────────────────────────────────────────
   마이리얼트립은 375px 에서 좌우 20px 로 고정한다. 우리는 6vw 라
   화면이 좁아질수록 여백이 같이 줄어 답답해진다. */
@media (max-width: 560px) {
  section[id],
  section[style*="6vw"] {
    padding-left: var(--mrt-gutter, 20px) !important;
    padding-right: var(--mrt-gutter, 20px) !important;
  }
  #hero > div,
  .stat-row {
    padding-left: var(--mrt-gutter, 20px);
    padding-right: var(--mrt-gutter, 20px);
  }
}

/* ── 5-1. 숫자 카드는 좁은 화면에서도 한 줄에 셋 ────────────────
   페이지 안 <style> 의 @media(max-width:640px) 에
     .stat-row .stat-card { flex: 1 1 calc(50% - .5rem) }
   가 있다. 숫자 카드가 넷이던 시절 2×2 로 떨어지라고 넣은 규칙인데,
   셋으로 줄인 뒤에는 2 + 1 로 갈라져 세 번째 카드만 아래 줄에 반쪽으로 남는다.

   375px 에서 셋을 나란히 두어도 좁지 않다.
     좌우 여백 20px 씩 빼면 335px, 사이 간격 16px 두 번을 빼면 303px,
     한 장에 101px 이다. "06:00" 이 22.4px 굵게라 90px 이면 들어간다. */
@media (max-width: 640px) {
  .stat-row {
    flex-wrap: nowrap !important;
  }
  .stat-row .stat-card {
    flex: 1 1 0 !important;
    min-width: 0;
    padding: 1.1rem .6rem !important;
  }
}

/* ── 6. 글자 위계 ──────────────────────────────────────────────
   마이리얼트립은 제목 · 소제목 · 본문 · 보조가 눈에 띄게 갈린다.
   우리는 크기 차이가 작아서 다 비슷해 보였다. 실측값으로 벌린다.

   실측에서 찾은 규칙 두 가지 (.deploy/mrt-tokens-2026-08-15.md)
     · 줄간격은 제목류(17px 이상) 1.24, 본문류(16px 이하) 1.38
     · 자간은 두 갈래다. 처음에 "weight 로 갈린다"고 적었는데 틀렸다.
         18px 이상 제목(h1·h2·h3)은 weight 700 인데도 -0.01em 이다
           22px→-0.22 / 20px→-0.2 / 18px→-0.18
         17px 이하 본문·라벨만 weight 를 탄다
           weight 500 → -0.01em (15px→-0.15 / 14px→-0.14)
           weight 600 → -0.02em (17px→-0.34 / 15px→-0.3 / 14px→-0.28 / 13px→-0.26)
       제목에 -0.02em 을 주면 글자가 서로 붙어 보인다. 실측과 대조해 바로잡은 값이다.

   ⚠️ !important 를 쓴 이유
     이 페이지는 제목·본문에 style="font-size:clamp(...)" 같은 인라인 스타일이 붙어 있다.
     인라인은 외부 CSS 보다 강해서 !important 없이는 한 줄도 안 먹는다(실제로 확인함).
     인라인을 걷어내는 게 더 깔끔하지만 손볼 곳이 수십 군데라 지금은 여기서 누른다.
     ⚠️ 그래서 이 블록은 max-width:560px 안에만 둔다. 데스크톱까지 !important 로
        덮으면 나중에 누가 무엇을 고쳐도 안 먹는 상태가 된다. */
@media (max-width: 560px) {
  /* 섹션 제목 — 20px / 700 / 1.24 / -0.02em */
  #include h2, #honest h2, #brand h2,
  #schedule h2, #reviews h2, #faq h2, #pricing h2, #location h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.01em !important;
  }
  /* 카드 소제목 — 18px / 700 / 1.24 */
  #honest .card > p:first-of-type {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.01em !important;
  }
  /* 본문 — 15px / 500 / 1.38 / -0.01em */
  #honest .card > p:last-of-type,
  #brand p,
  #include span {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.38 !important;
    letter-spacing: -0.01em !important;
  }
  /* 보조·라벨 — 13px / 600 / 1.38 / -0.02em */
  .badge,
  #include p[data-i18n^="inc_"] {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    letter-spacing: -0.02em !important;
  }
}

/* ── 7. 대표 이미지 비율 ────────────────────────────────────────
   마이리얼트립 상세의 대표 이미지는 1:1 정사각형이다(375px 에서 279×279 실측).
   갤러리 썸네일에만 적용한다. 히어로는 배경 이미지라 해당 없다. */
.pd-square {
  aspect-ratio: var(--mrt-img-ratio-square, 1);
  object-fit: cover;
  width: 100%;
  border-radius: var(--pd-radius-card);
}