@charset "utf-8";
/* ==============================================================================
   reservation_membership.css  —  /reservation 멤버십 등급·가격 블록
   생성 2026-08-19

   [무엇을 대체했나]
     기존에는 이미지 한 장(/images/img_vip_price.png · 643KB)이었습니다.
     내용이 오래돼(BLACK 2.2억·연간 15일 등) 웹 브로슈어 확정본 기준으로
     글자·표로 다시 만들었습니다.

   [이미지를 글자로 바꾼 이점]
     · 숫자가 바뀔 때 블레이드 파일만 고치면 됩니다 (이미지 재제작 불필요)
     · 643KB 이미지가 사라져 페이지가 빨라집니다
     · 모바일에서 확대하지 않아도 읽힙니다
     · 검색엔진이 가격·등급을 읽습니다

   [원본으로 되돌리려면]
     reservation/index.blade.php 에서 주석 처리한 <img> 를 되살리고
     이 파일 로드 줄을 지우면 됩니다.

   [적용 범위]
     .rm_ 으로 시작하는 클래스만 씁니다. 다른 페이지·섹션에 영향이 없습니다.
     styles.css · reactive.css 는 건드리지 않았습니다.
   ============================================================================== */

:root{
  --rm-gold:#c5a059;
  --rm-gold-lt:#dbb465;
  --rm-line:rgba(197,160,89,.28);
  --rm-ink:#fff;
  --rm-ink-mute:rgba(255,255,255,.62);
}

/* ------------------------------------------------------------------------------
   틀
   ------------------------------------------------------------------------------ */
.rm_wrap{
  width:100%; max-width:1240px;
  margin:0 auto;
  text-align:left;
}

/* 상단 안내문 — 이미지의 「한정된 멤버십 정원으로…」 자리 */
.rm_lede{
  text-align:center;
  margin-bottom:14px;
  font-size:22px; font-weight:600; line-height:1.5;
  color:var(--rm-gold-lt);
}
.rm_sub{
  text-align:center;
  margin:0 auto 48px;
  max-width:760px;
  font-size:16px; line-height:1.75;
  color:var(--rm-ink-mute);
}

/* ------------------------------------------------------------------------------
   등급 카드 3장
   ------------------------------------------------------------------------------ */
.rm_grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.rm_card{
  position:relative;
  display:flex; flex-direction:column;
  padding:38px 30px 32px;
  border:1px solid var(--rm-line);
  border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 100%);
  backdrop-filter:blur(2px);
}

/* 최상위 등급만 골드 테두리로 강조 (이미지에서 PLATINUM 을 은색으로 띄운 것과 같은 역할) */
.rm_card.is_top{
  border-color:rgba(197,160,89,.62);
  background:linear-gradient(180deg, rgba(197,160,89,.14) 0%, rgba(197,160,89,.03) 60%, rgba(255,255,255,.015) 100%);
}
.rm_card.is_top:before{
  content:'TOP TIER';
  position:absolute; top:-1px; left:30px;
  padding:6px 12px 5px;
  border-radius:0 0 4px 4px;
  background:var(--rm-gold);
  color:#1a1408;
  font-size:11px; font-weight:700; letter-spacing:.08em;
}

/* 등급 이름 */
.rm_grade{
  font-size:26px; font-weight:700; letter-spacing:.04em;
  color:var(--rm-gold-lt);
  line-height:1.2;
}
.rm_kr{
  margin-top:6px;
  font-size:15px;
  color:var(--rm-ink-mute);
}

/* 연간 DAY — 카드에서 가장 큰 숫자 */
.rm_day{
  display:flex; align-items:baseline; gap:6px;
  margin-top:26px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.10);
}
.rm_day strong{
  font-size:52px; font-weight:700; line-height:1;
  color:var(--rm-ink);
  letter-spacing:-.02em;
}
.rm_day span{
  font-size:18px; font-weight:600;
  color:var(--rm-gold-lt);
  letter-spacing:.06em;
}
.rm_day_sub{
  margin-top:8px;
  font-size:14px;
  color:var(--rm-ink-mute);
}

/* 가격 — 3줄 (LAND & SEA / SEA·VIP 추가 / 합계) */
.rm_price{
  margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
}
.rm_price > div{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px;
  padding:7px 0;
}
.rm_price dt{
  font-size:14px;
  color:var(--rm-ink-mute);
}
.rm_price dd{
  font-size:19px; font-weight:600;
  color:var(--rm-ink);
  white-space:nowrap;
}
.rm_price dd em{ font-size:14px; font-weight:500; font-style:normal; }
.rm_price .is_add dd{ color:var(--rm-ink-mute); font-weight:500; }

/* 합계 줄만 골드로 띄움 */
.rm_price .is_sum{
  margin-top:8px; padding-top:14px;
  border-top:1px dashed rgba(197,160,89,.35);
}
.rm_price .is_sum dt{ color:var(--rm-gold-lt); font-weight:600; }
.rm_price .is_sum dd{ color:var(--rm-gold-lt); font-size:22px; font-weight:700; }

/* 혜택 목록 */
.rm_feat{
  margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
}
.rm_feat li{
  position:relative;
  padding-left:16px;
  font-size:15px; line-height:1.65;
  color:rgba(255,255,255,.86);
}
.rm_feat li + li{ margin-top:9px; }
.rm_feat li:before{
  content:''; position:absolute;
  top:10px; left:0;
  width:4px; height:4px; border-radius:50%;
  background:var(--rm-gold);
}
/* 「예정」이 붙은 항목은 한 톤 낮춤 — 아직 제공되지 않는 혜택임을 눈으로 구분 */
.rm_feat li.is_soon{ color:var(--rm-ink-mute); }


/* 등급 설명 한 줄 — 브로슈어의 tdesc */
.rm_desc{
  margin-top:12px;
  min-height:76px;                /* 세 카드의 아래 요소 높이를 맞춥니다 */
  font-size:14.5px; line-height:1.7;
  color:var(--rm-ink-mute);
}

/* 연간 DAY 옆의 「13 + 1」 보너스 표기 */
.rm_bonus{
  margin-left:8px; padding:4px 9px;
  border:1px solid var(--rm-line);
  border-radius:100px;
  font-size:12.5px; font-weight:500; letter-spacing:0;
  color:var(--rm-ink-mute);
  white-space:nowrap;
}
.rm_bonus em{ font-style:normal; color:var(--rm-gold-lt); font-weight:600; }

.rm_day_lbl{
  margin-top:8px;
  font-size:13px; letter-spacing:.02em;
  color:var(--rm-gold-lt);
}

/* ------------------------------------------------------------------------------
   포함 / 추가 안내  —  브로슈어 「Clear & Simple」 구획
   ------------------------------------------------------------------------------ */
.rm_common{
  margin-top:28px;
  padding:34px 30px 30px;
  border:1px solid var(--rm-line);
  border-radius:6px;
  background:rgba(255,255,255,.035);
}

.rm_common_head{ margin-bottom:24px; }
.rm_common_eyebrow{
  display:block;
  font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--rm-gold);
  text-transform:uppercase;
}
.rm_common_ttl{
  margin-top:8px;
  font-size:20px; font-weight:600; line-height:1.5;
  color:var(--rm-ink);
}

/* 위 3개(기본 서비스) 는 3단, 아래 2개(크레딧·별도비용) 는 2단으로 놓습니다.
   grid 를 6칸으로 나눠 2칸씩 / 3칸씩 쓰게 하면 줄바꿈이 자연스럽습니다. */
.rm_common_grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.rm_cbox{ grid-column:span 2; }
.rm_cbox.is_sub{ grid-column:span 3; }

.rm_cbox{
  padding:22px 20px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:5px;
  background:rgba(0,0,0,.18);
}
.rm_cbox.is_sub{ background:rgba(197,160,89,.05); border-color:var(--rm-line); }

.rm_cbox h4{
  font-size:15px; font-weight:700; letter-spacing:.01em;
  color:var(--rm-gold-lt);
}
.rm_cbox > ul{ margin-top:12px; }
.rm_cbox > ul > li{
  position:relative; padding-left:14px;
  font-size:14.5px; line-height:1.65;
  color:rgba(255,255,255,.84);
}
.rm_cbox > ul > li + li{ margin-top:8px; }
.rm_cbox > ul > li:before{
  content:''; position:absolute; top:9px; left:0;
  width:4px; height:4px; border-radius:50%;
  background:var(--rm-gold);
}

/* ------------------------------------------------------------------------------
   안내 문구
   ------------------------------------------------------------------------------ */
.rm_notes{ margin-top:24px; }
.rm_notes li{
  position:relative;
  padding-left:15px;
  font-size:14px; line-height:1.75;
  color:rgba(255,255,255,.52);
  text-align:left;
}
.rm_notes li + li{ margin-top:7px; }
.rm_notes li:before{
  content:'·'; position:absolute; left:3px; top:0;
  color:var(--rm-gold);
}

/* ==============================================================================
   반응형 — 사이트 기존 기준점과 동일
   ============================================================================== */
@media screen and (max-width:1439px){
  .rm_wrap{ max-width:1100px; }
  .rm_card{ padding:34px 24px 28px; }
  .rm_grade{ font-size:21px; }
  .rm_desc{ min-height:88px; font-size:14px; }
  .rm_day strong{ font-size:46px; }
  .rm_price dd{ font-size:18px; }
  .rm_price .is_sum dd{ font-size:20px; }
  .rm_common_ttl{ font-size:18px; }
}

@media screen and (max-width:1023px){
  /* 3단 → 1단. 좁은 화면에서 가로 3장은 글자가 너무 작아집니다 */
  .rm_grid{ grid-template-columns:1fr; gap:16px; }
  .rm_lede{ font-size:19px; }
  .rm_lede br{ display:none; }
  .rm_sub{ margin-bottom:32px; font-size:15px; }
  .rm_card{ padding:30px 22px 26px; }
  .rm_desc{ min-height:0; }
  .rm_day strong{ font-size:42px; }
  /* 포함/추가 안내도 1단으로 */
  .rm_common{ padding:28px 22px 24px; }
  .rm_common_grid{ grid-template-columns:1fr; gap:14px; }
  .rm_cbox,
  .rm_cbox.is_sub{ grid-column:auto; }
}

@media screen and (max-width:767px){
  .rm_lede{ font-size:17px; }
  .rm_sub{ font-size:14px; line-height:1.7; }
  .rm_sub br{ display:none; }
  .rm_card{ padding:26px 18px 24px; }
  .rm_grade{ font-size:19px; }
  .rm_day strong{ font-size:38px; }
  .rm_day span{ font-size:16px; }
  .rm_bonus{ font-size:11.5px; padding:3px 8px; }
  .rm_price dd{ font-size:17px; }
  .rm_price .is_sum dd{ font-size:19px; }
  .rm_feat li{ font-size:14px; }
  .rm_common_ttl{ font-size:17px; }
  .rm_cbox{ padding:20px 16px; }
  .rm_cbox > ul > li{ font-size:13.5px; }
  .rm_notes li{ font-size:13px; }
}