/* ================================================================
   런트립 — /runtrip/ 전용 스타일
   모든 선택자는 .rt 안에서만 동작한다. 다른 페이지에 영향 없음.
   ================================================================ */
.rt {
  --rt-ink: #000000;
  --rt-ink2: #333333;
  --rt-mute: #333333;
  --rt-line: #000000;
  --rt-bg: #f4f4f4;
  --rt-brand: #000000;
  --rt-brand-d: #333333;
  --rt-accent: #000000;
  --rt-open: #000000;
  --rt-wait: #333333;
  --rt-closed: #333333;
  --rt-radius: 0px;
  color: var(--rt-ink);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
}
.rt *, .rt *::before, .rt *::after { box-sizing: border-box; }
.rt img { max-width: 100%; height: auto; display: block; }
.rt a { color: inherit; text-decoration: none; }

/* ---------- 공통 조각 ---------- */
.rt-h2 {
  font-size: 22px; font-weight: 800; margin: 0 0 16px;
  letter-spacing: -.02em;
}
.rt-badge {
  display: inline-block; vertical-align: middle;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 6px 9px; border-radius:0; margin-left: 8px;
  border: 1px solid currentColor; white-space: nowrap;
}
.rt-badge--open   { color: var(--rt-open); background:#f4f4f4; }
.rt-badge--wait   { color: var(--rt-wait); background:#f4f4f4; }
.rt-badge--soon   { color: var(--rt-brand); background:#f4f4f4; }
.rt-badge--closed { color: var(--rt-closed); background:#f4f4f4; }

.rt-price { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.rt-price span { font-size: 16px; font-weight: 700; margin-left: 2px; }
.rt-price--none { font-size: 18px; font-weight: 700; color: var(--rt-mute); }

.rt-crumb {
  font-size: 13px; color: var(--rt-mute); margin: 0 0 18px;
  display: flex; gap: 8px; align-items: center;
}
.rt-crumb a:hover { color: var(--rt-brand); text-decoration: underline; }
.rt-crumb strong { color: var(--rt-ink2); font-weight: 600; }

/* ================================================================
   축 맞추기 — 하나투어 규칙 : 콘텐츠는 1200px 중앙정렬 한 줄
   사이트 상단 메뉴(ul)가 width 1200 중앙정렬이라 이것과 세로선이 정확히 맞는다.
   ================================================================ */

/* 🚨 테마의 본문 컨테이너 .ri-prose 가 «읽기 좋은 폭»으로 max-width 714px 을 건다.
   기사·안내문에는 맞지만 상품 상세에는 안 맞는다 — 오른쪽 스펙 칸이 110px 로 눌려
   글자가 세로 한 줄씩 흘렀다. 런트립 화면에서만 그 제한을 푼다.
   (이 CSS 는 /runtrip/ 에서만 읽히므로 다른 페이지의 .ri-prose 는 그대로다.) */
/* 테마 utmb.css 의 «.page article.ri-prose { max-width: 47em }» 를 이겨야 한다.
   테마 스스로도 특정 페이지는 «.page-id-2714 article.ri-prose { max-width:none }» 로 푼다.
   같은 관례를 따르되, 페이지 번호 대신 런트립일 때만 붙는 body 클래스로 건다. */
body.ri-runtrip article.ri-prose,
body.ri-runtrip .ri-prose { max-width: none; width: auto; }

.rt-detail {
  flex: 1 1 100%;          /* 콘텐츠 폭으로 쭈그러들지 않게 */
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* 메인은 풀블리드다. flex-basis 를 주면 JS 가 넣는 실폭이 무시되므로 auto 로 둔다. */
.rt-main { flex: 0 0 auto; min-width: 0; }

/* 페이지 제목(런트립 — 달리러 떠나는 여행)은 런트립에서 쓰지 않는다.
   하나투어도 GNB 위에 페이지 제목을 두지 않는다.
   이 CSS 는 /runtrip/ 에서만 읽히고, 헤더 밖의 .ri-main 안으로만 한정한다. */
.ri-main .ri-wrap > h1 { display: none !important; }

/* ================================================================
   상세페이지
   ================================================================ */
.rt-detail__top {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 44px; align-items: start; margin-bottom: 56px;
}
.rt-figure {
  margin: 0; border: 1px solid var(--rt-line); border-radius:0;
  overflow: hidden; background: var(--rt-bg);
}
.rt-figure img { width: 100%; }
.rt-figure--empty {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  color: var(--rt-mute); font-size: 14px;
}
.rt-thumbs {
  display: flex; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0;
  flex-wrap: wrap;
}
.rt-thumb {
  width: 74px; height: 74px; padding: 0; cursor: pointer; background: none;
  border: 2px solid var(--rt-line); border-radius:0; overflow: hidden;
}
.rt-thumb.is-on { border-color: var(--rt-brand); }
.rt-thumb img { width: 100%; height: 100%; object-fit: cover; }

.rt-detail__name {
  font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em;
  margin: 0 0 18px; padding-bottom: 18px; border-bottom: 2px solid var(--rt-ink);
}

.rt-spec { margin: 0 0 24px; }
.rt-spec__row {
  display: grid; grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rt-line);
  font-size: 14px; align-items: baseline;
}
.rt-spec__row dt { color: var(--rt-mute); font-weight: 600; margin: 0; }
.rt-spec__row dd { margin: 0; color: var(--rt-ink2); }
.rt-spec__row--price dd { color: var(--rt-ink); }

.rt-order {
  background: var(--rt-bg); border: 1px solid var(--rt-line);
  border-radius:0; padding: 16px 18px; margin-bottom: 16px;
}
.rt-order__line {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  font-size: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rt-line);
}
.rt-order__name { font-weight: 600; }
.rt-qty { display: inline-flex; border: 1px solid var(--rt-line); border-radius:0; background:#ffffff; }
.rt-qty__btn {
  width: 32px; height: 34px; border: 0; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--rt-ink2);
}
.rt-qty__num {
  width: 46px; height: 34px; border: 0; border-left: 1px solid var(--rt-line);
  border-right: 1px solid var(--rt-line); text-align: center; font-size: 14px;
  font-variant-numeric: tabular-nums; background: none; color: inherit;
}
.rt-order__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; font-size: 14px; color: var(--rt-mute);
}
.rt-order__total strong {
  font-size: 22px; font-weight: 800; color: var(--rt-accent);
  font-variant-numeric: tabular-nums;
}

.rt-actions { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px; }
.rt-btn {
  height: 54px; border-radius:0; font-size: 15px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--rt-line); background:#ffffff;
  color: var(--rt-ink); transition: background .15s, border-color .15s;
}
.rt-btn:hover { border-color: var(--rt-ink2); }
.rt-btn--primary {
  background: var(--rt-brand); border-color: var(--rt-brand); color:#ffffff;
}
.rt-btn--primary:hover { background: var(--rt-brand-d); border-color: var(--rt-brand-d); }
.rt-btn[disabled], .rt-btn.is-off { opacity: .45; cursor: not-allowed; }
.rt-actions__note { font-size: 12px; color: var(--rt-mute); margin: 10px 0 0; }

.rt-detail__body { margin-bottom: 48px; }
/* 원본이 1000px 계열이다. 1200 폭에 억지로 늘리면 뿌옇게 깨진다 — 원본 크기까지만. */
.rt-detail__imgs img { width: 100%; max-width: 1000px; margin: 0 auto; }

/* 판매자 고지 */
.rt-notice {
  border: 1px solid var(--rt-line); border-left: 4px solid var(--rt-accent);
  border-radius:0; background:#f4f4f4; padding: 20px 22px; margin-bottom: 32px;
  font-size: 13.5px; color: var(--rt-ink2); line-height: 1.75;
}
.rt-notice__tit { font-size: 15px; font-weight: 800; color: var(--rt-ink); margin: 0 0 10px; }
.rt-notice p { margin: 0 0 8px; }
.rt-notice strong { color: var(--rt-ink); }
.rt-notice__src { color: var(--rt-mute); font-size: 12px; margin-top: 12px !important; }
.rt-seller {
  margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rt-line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
}
.rt-seller > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; font-size: 12.5px; }
.rt-seller dt { color: var(--rt-mute); margin: 0; }
.rt-seller dd { margin: 0; color: var(--rt-ink2); }
@media (max-width: 640px) {
  .rt-seller { grid-template-columns: 1fr; }
  .rt-seller > div { grid-template-columns: 96px minmax(0, 1fr); }
}

.rt-back { font-size: 14px; }
.rt-back a { color: var(--rt-brand); font-weight: 600; }
.rt-back a:hover { text-decoration: underline; }

/* ---------- 폰 ---------- */
@media (max-width: 900px) {
  .rt-detail__top { grid-template-columns: 1fr; gap: 24px; }
  .rt-detail__name { font-size: 21px; }
  .rt-spec__row { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
  .rt-actions { grid-template-columns: 1fr 1fr; }
  .rt-actions .rt-btn--primary { grid-column: 1 / -1; }
}

/* ---------- 다크 전환 없음 ----------
   여행 구간은 어두운 화면을 쓰지 않는다. OS 가 다크여도 밝은 톤 그대로 간다. */
.rt { color-scheme: light; background:#ffffff; }

/* ══════════════════════════════════════════════════════════════
   순차 리빌 (2026-09-24 · C)  — /runtrip/ 안에서만
   🚨 선택자를 «.rt» 로 가둔다. 머리글·푸터·다른 지면·전역에는 닿지 않는다.
   🚨 클래스는 «JS 가» 붙인다. JS 가 죽으면 아무 일도 안 일어나고 글은 그대로 보인다.
   🚨 한 번 떠오르고 끝난다. 무한 애니메이션은 쓰지 않는다(깜빡임 전례).
   🚨 첫 화면 안에 있는 것에는 걸지 않는다(JS 에서 거른다).
   수치는 /inside/ 의 in-rv 와 같게 맞췄다 — .58s · cubic-bezier(.22,.61,.36,1) · 18px.
   ══════════════════════════════════════════════════════════════ */
.rt .rt-rv{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .58s cubic-bezier(.22,.61,.36,1),
             transform .58s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.rt .rt-rv.rt-rv-on{
  opacity:1;
  transform:none;
  will-change:auto;
}
@media (prefers-reduced-motion:reduce){
  .rt .rt-rv{ opacity:1; transform:none; transition:none }
}
@media print{
  .rt .rt-rv{ opacity:1; transform:none; transition:none }
}

/* ══════════════════════════════════════════════════════════════
   「모객마감」 딱지 글자 대비 (2026-09-24 · C)
   실측 : 글자 rgb(139,144,153) / 바탕 #f1f2f4 → 대비 2.86 (WCAG AA 4.5 미달).
   회색 느낌은 그대로 두고 한 단계만 진하게 → 계산 대비 5.21.
   🚨 원래 규칙을 고치지 않고 «뒤에» 덧붙여 이긴다. 되돌리려면 이 블록만 지우면 된다.
   ══════════════════════════════════════════════════════════════ */
.rt .rt-badge--closed{ color:#333333}