/* ============================================================================
   라온링 마케팅/소개 정적 사이트 — 공용 스타일
   ----------------------------------------------------------------------------
   · 이 사이트는 앱(React SPA)과 분리된 "정적 HTML" 사이트다. AI·검색 크롤러가
     읽을 수 있도록 순수 HTML/CSS/최소 JS 로만 만든다(빌드 도구 없음).
   · 디자인 토큰은 기존 로그인전 랜딩(WelcomeLandingPage.css)과 동일하게 맞춘다
     — 크림 배경 #F4F1EC, 먹색 텍스트 #1B1A18, 포인트 골드 #8A6A3F.
   · 모바일 우선. 본문은 가운데 정렬 + 최대폭 제한(앱이 모바일 기준이라 톤 통일).
   ========================================================================== */

:root {
  --rr-bg: #f4f1ec;        /* 크림 배경 */
  --rr-surface: #ffffff;   /* 카드/본문 흰 박스 */
  --rr-text: #1b1a18;      /* 본문 먹색 */
  --rr-text-2: #4a4640;    /* 보조 텍스트 */
  --rr-text-3: #8c877e;    /* 흐린 텍스트 */
  --rr-line: #e7e2d9;      /* 구분선 */
  --rr-gold: #8a6a3f;      /* 포인트(골드) */
  --rr-gold-weak: #f0e7da; /* 골드 배경 톤 */
  --rr-max: 520px;         /* 본문 최대폭(모바일 기준) */
  --rr-radius: 16px;
  --rr-font: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rr-bg);
  color: var(--rr-text);
  font-family: var(--rr-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 랜딩 페이지만 바깥(양옆) 흰색 — 가운데 크림 컬럼은 .rr-welcome 가 칠한다 (사용자 요청). */
body.rr-landing-page { background: #fff; }
/* 소개 하위 페이지(소개·가입조건·비용안내·FAQ)는 배경 흰색 (사용자 요청). */
body.rr-sub-page { background: #fff; }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* 전역 margin 리셋 — 포팅한 앱 원본 컴포넌트(.aboutus-page/.service-page/.eligibility-page/
   .cert-page/.price-info-page)는 전역 리셋을 전제로 만들어졌다. 이 리셋이 없으면 제목·문단에
   브라우저 기본 margin(1em 등)이 붙어 박스마다 여백이 과해진다. 각 컴포넌트는 자기 margin 을
   직접 지정하므로 0 으로 리셋해도 내 컴포넌트엔 영향이 없다. */
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ── 공용 상단 헤더 (소개 하위 페이지용) ─────────────────────────────────── */
.rr-site-header {
  background: var(--rr-surface);
  /* 로고 위(헤더 맨 위)에 라인, 버튼 아래 라인은 없앤다 (사용자 요청). */
  border-top: 1px solid var(--rr-line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.rr-site-header__bar {
  position: relative;
  max-width: var(--rr-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px 6px;
}
.rr-site-header__logo { height: 22px; width: auto; }
/* 로고 왼쪽 X 닫기 — 라온링 알아보기 섹션을 닫고 랜딩으로 (앱 서브페이지 상단바 톤). */
.rr-site-header__close {
  position: absolute;
  left: 12px;
  /* 로고와 같은 줄에 맞춤 — 바 padding(위 14 / 아래 6) 범위 안에서 수직 중앙 정렬. */
  top: 14px;
  bottom: 6px;
  display: flex;
  align-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--rr-text-2);
  text-decoration: none;
  padding: 0 6px;
}

/* 상단 탭 네비 (소개 · 가입조건 · 비용안내 · FAQ) */
.rr-tabs {
  max-width: var(--rr-max);
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  gap: 26px;               /* 버튼 사이 간격 */
  padding: 4px 10px 10px;  /* 로고 밑 간격 줄임 (사용자 요청) */
  overflow-x: auto;
  scrollbar-width: none;
}
.rr-tabs::-webkit-scrollbar { display: none; }
.rr-tabs a {
  flex: 0 0 auto;
  padding: 8px 14px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rr-text-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
/* 선택된 탭은 기존대로 하단 골드 라인 (사용자 요청). 전체폭 라인만 삭제한 것. */
.rr-tabs a.is-active {
  color: var(--rr-text);
  border-bottom-color: var(--rr-gold);
}

/* ── 본문 래퍼 ───────────────────────────────────────────────────────────── */
.rr-wrap {
  max-width: var(--rr-max);
  margin: 0 auto;
  /* 내용 시작 위 여백을 다른 페이지 히어로(40px)와 통일 (사용자 요청). */
  padding: 40px 24px 48px;
}
/* 앱 원본 디자인 본문(.aboutus-page 등)을 담는 칸 — 좌우 패딩 없이 폭만 모바일로 제한해
   섹션 자체 패딩·풀블리드 밴드가 원본 그대로 살아나게 한다(양옆은 흰색). */
.rr-sub-main { max-width: var(--rr-max); margin: 0 auto; }

/* 페이지 상단 제목 */
.rr-page-eyebrow {
  /* eyebrow↔제목 사이 여백도 다른 페이지(16px)와 통일 (사용자 요청). */
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #b28b5a;
}
.rr-page-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
}
.rr-page-lead {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--rr-text-2);
}

/* 콘텐츠 섹션 */
.rr-section { margin: 0 0 32px; }
.rr-section > h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
}
.rr-section > h3 {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 700;
}
.rr-section p { margin: 0 0 12px; font-size: 15px; color: var(--rr-text-2); }
.rr-section ul { margin: 0 0 14px; padding-left: 18px; }
.rr-section li { font-size: 15px; color: var(--rr-text-2); margin: 0 0 6px; }
.rr-section strong { color: var(--rr-text); }

/* 흰 카드 박스 */
.rr-card {
  background: var(--rr-surface);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius);
  padding: 18px 18px;
  margin: 0 0 16px;
}
.rr-card h3 { margin-top: 0; }

/* 번호 스텝 리스트 */
.rr-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.rr-steps li {
  position: relative;
  padding: 0 0 18px 44px;
  margin: 0;
}
.rr-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rr-text);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--rr-line);
}
.rr-steps b { display: block; font-size: 15px; color: var(--rr-text); margin-bottom: 2px; }
.rr-steps span { font-size: 14px; color: var(--rr-text-3); }

/* 가격 표 */
.rr-table-wrap { border: 1px solid var(--rr-line); border-radius: 12px; overflow: hidden; margin: 0 0 10px; }
.rr-table { width: 100%; border-collapse: collapse; background: var(--rr-surface); }
.rr-table th, .rr-table td {
  padding: 12px 12px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid var(--rr-line);
}
.rr-table th { background: var(--rr-gold-weak); font-weight: 700; color: var(--rr-text); }
.rr-table td { color: var(--rr-text-2); }
.rr-table tr:last-child td { border-bottom: 0; }
.rr-table .rr-num { font-weight: 700; color: var(--rr-text); }

.rr-note { font-size: 13px; color: var(--rr-text-3); margin: 6px 0 0; }

/* 인라인 링크/버튼 */
.rr-inline-link { color: var(--rr-gold); font-weight: 700; text-decoration: underline; }

/* FAQ 아코디언(details) */
.rr-faq details {
  background: var(--rr-surface);
  border: 1px solid var(--rr-line);
  border-radius: 12px;
  margin: 0 0 10px;
  overflow: hidden;
}
.rr-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 44px 16px 16px;
  font-size: 15px;
  font-weight: 700;
  position: relative;
}
.rr-faq summary::-webkit-details-marker { display: none; }
/* 토글 표시 — 얇은 셰브런(V) 화살표 (사용자 지정 모양). 열리면 위로 뒤집힘. */
.rr-faq summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.8px solid #b0aba2;
  border-bottom: 1.8px solid #b0aba2;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.rr-faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.rr-faq .rr-faq__body { padding: 0 16px 16px; font-size: 14px; color: var(--rr-text-2); }
.rr-faq .rr-faq__body p { margin: 0 0 10px; }
.rr-faq .rr-faq__body ul { margin: 0 0 10px; padding-left: 18px; }

/* 하단 CTA 박스 */
.rr-cta-box {
  background: var(--rr-text);
  color: #fff;
  border-radius: var(--rr-radius);
  padding: 28px 22px;
  text-align: center;
  margin: 32px 0 0;
}
.rr-cta-box h2 { margin: 0 0 16px; font-size: 20px; font-weight: 800; color: #fff; }
/* 하단 CTA 버튼 — 전체폭 대신 가운데 자동폭 (사용자 요청). */
.rr-cta-box .rr-btn-primary {
  width: auto;
  min-width: 220px;
  max-width: 100%;
  padding: 0 36px;
  margin: 0 auto;
  background: #fff;
  color: var(--rr-text);
}

/* 공용 버튼 */
.rr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 27px;
  background: var(--rr-text);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.rr-btn-primary:active { opacity: 0.88; }

/* 페이지 하단 공용 CTA — 다른 페이지(aboutus-cta/price-info-cta 등)와 동일한 디자인
   (연회색 배경 + 골드 버튼). rr-wrap(FAQ) 안에 두므로 좌우·하단 패딩을 음수 마진으로
   상쇄해 컬럼을 꽉 채운다. */
.rr-page-cta {
  margin: 40px -24px -48px;
  padding: 48px 24px 56px;
  background: #f7f8f9;
  text-align: center;
}
.rr-page-cta__title {
  font-size: 22px;
  font-weight: 800;
  color: #222222;
  line-height: 1.5;
  margin-bottom: 26px;
}
.rr-page-cta__btn {
  display: block;
  width: 100%;
  padding: 16px 0;
  background: #b28b5a;
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.rr-page-cta__btn:hover { background: #95734a; }

/* ============================================================================
   랜딩(index.html) 전용 — 기존 로그인전 메인(WelcomeLandingPage) 1:1 이식
   · 로고 34px · 제목 30px · [기존 회원 로그인]=테두리 버튼 (2026-10-13 현재 디자인).
   · --rr-fit: 화면이 짧으면 로고 위아래 여백·문단 간격이 함께 줄어드는 눈금(원본 동일).
   · 첫 화면(.rr-welcome__screen)은 100svh 를 꽉 채우고, 남는 높이는 스페이서 둘이 반씩.
   ========================================================================== */
.rr-welcome {
  --rr-fit: 120px; /* svh 모르는 옛 브라우저용 중간값 */
  font-family: var(--rr-font);
  /* 가운데 크림 컬럼(모바일 폭) — 양옆은 흰색(body)으로 남는다.
     내용이 짧아도 화면 아래 끝까지 크림으로 칠해지도록 최소 높이를 화면 높이로 둔다. */
  background: var(--rr-bg);
  max-width: var(--rr-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
}
@supports (height: 100svh) {
  .rr-welcome { --rr-fit: clamp(0px, calc(100svh - 553px), 186px); }
}

/* 모바일 폭(520px)으로 가운데 한 줄 — 내용만큼 자연스럽게 흐른다.
   ⚠️ 예전엔 height:100svh 로 첫 화면을 꽉 채우고 빈 칸(스페이서)이 남는 높이를 먹었는데,
   큰 창(데스크탑)에서 카드가 화면 세로 가운데에 둥둥 뜨고 롤링이 이상해져 뺐다
   (사용자 요청 "창 확대해도 이미지 가운데 정렬 빼줘"). 이제 위에서부터 자연스럽게 쌓인다. */
.rr-welcome__screen {
  max-width: var(--rr-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.rr-welcome__screen > * { flex-shrink: 0; }

.rr-welcome__header {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 로고를 살짝 내림 — 상단 기본 여백 10 → 24px (사용자 요청). */
  padding: calc(24px + var(--rr-fit) * 0.075 + env(safe-area-inset-top)) 0 calc(8px + var(--rr-fit) * 0.06);
}
.rr-welcome__logo { height: 30px; width: auto; display: block; }

/* 상단(로고와의 간격) 10px, 아래(문구↔카드 간격) 24 → 6px 로 줄임 (사용자 요청). */
.rr-welcome__hero { text-align: center; padding: 10px calc(8px + var(--rr-fit) * 0.043) 6px; }
.rr-welcome__title { margin: 0; font-size: 30px; line-height: calc(38px + var(--rr-fit) * 0.0161); }
.rr-welcome__title .t1 { display: block; font-weight: 500; color: var(--rr-text-2); }
.rr-welcome__title .t2 { display: block; font-weight: 800; color: var(--rr-text); }
.rr-welcome__lead {
  margin: calc(8px + var(--rr-fit) * 0.043) 0 0;
  font-size: 13.5px;
  line-height: calc(21px + var(--rr-fit) * 0.0161);
  color: var(--rr-text-3);
}

.rr-welcome__carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: calc(2px + var(--rr-fit) * 0.008) 16% calc(4px + var(--rr-fit) * 0.024);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 0 1 auto; /* 높이가 모자라면 여기(사진)만 줄어든다 */
  min-height: 0;
}
.rr-welcome__carousel::-webkit-scrollbar { display: none; }

.rr-wcard {
  flex: 0 0 68%;
  scroll-snap-align: center;
  background: #fff;
  border-radius: 20px;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 8px 24px rgba(27, 26, 24, 0.08);
  opacity: 0.5;
  transform: scale(0.94);
  filter: blur(0.6px);
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
.rr-wcard.is-active { opacity: 1; transform: scale(1); filter: none; }
.rr-wcard__photo {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1.05;
  flex: 0 1 auto;
  min-height: 0;
  background: #eceae6;
}
.rr-wcard__photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 28%; /* 짧은 화면에서 얼굴이 남게 위쪽을 보여줌 */
  display: block;
}
.rr-wcard__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  color: #3d3a35;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.rr-wcard__badge svg { color: #2e9e5b; flex-shrink: 0; display: block; }
.rr-wcard__name { margin: 12px 0 2px; font-size: 18px; font-weight: 800; text-align: center; }
.rr-wcard__meta { margin: 0; font-size: 13.5px; color: var(--rr-text-3); text-align: center; }

.rr-welcome__note {
  margin: calc(4px + var(--rr-fit) * 0.024) 0 calc(5px + var(--rr-fit) * 0.029);
  text-align: center; font-size: 10.5px; color: #b0aba2;
}
.rr-welcome__dots {
  display: flex; justify-content: center; gap: 6px;
  margin: 0 0 calc(4px + var(--rr-fit) * 0.03);
}
.rr-welcome__dot {
  width: 6px; height: 6px; border-radius: 999px; border: 0; padding: 0;
  background: #d8d3ca; cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.rr-welcome__dot.is-active { width: 18px; background: #1b1a18; }

/* 카드 묶음 위아래 고정 간격 — 세로 꽉채움을 뺐으므로 작은 고정값으로 둔다
   (창 크기와 무관하게 일정한 여백, 더는 커지지 않는다). */
.rr-welcome__spacer { flex: 0 0 auto; height: 20px; }
.rr-welcome__spacer--bottom { height: 14px; }

/* 랜딩 하단 액션 */
.rr-bottom {
  padding: 0 24px calc(10px + var(--rr-fit) * 0.054);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10px + var(--rr-fit) * 0.011);
}
.rr-event { margin: 0 0 calc(8px + var(--rr-fit) * 0.032); font-size: 13.5px; color: var(--rr-text-2); }
.rr-event strong { color: var(--rr-gold); font-weight: 700; }
/* 라온링 시작하기 — 검은 채움 */
.rr-cta {
  align-self: stretch; height: 56px; border-radius: 28px;
  background: var(--rr-text); color: #fff; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
}
.rr-cta:active { opacity: 0.85; }
/* 기존 회원 로그인 — 테두리 버튼(현재 디자인, 글자 링크로 되돌리지 말 것) */
.rr-login {
  align-self: stretch; height: 54px; border-radius: 27px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--rr-text);
  text-decoration: none; border: 1.5px solid #cfc7b8; background: transparent;
  cursor: pointer; font-family: inherit;
}
.rr-login:active { opacity: 0.85; }
/* 라온링 알아보기 — 작은 글자 링크(버튼 아님, 사용자 지시) */
.rr-more {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rr-text-3);
  text-decoration: none;
  background: none;
  border: 0;
  font-family: inherit;
}
.rr-more:active { opacity: 0.7; }

/* ── 공용 푸터 — 앱 MainFooter(.page-footer) 와 동일 (사업자 정보 게시 의무) ──────
   순서: 카피라이트 → 링크 → 사업자정보. 가운데 정렬, 흐린 회색(#999/#aaa). */
.rr-footer {
  border-top: 1px solid #eee;
  background: none;
  text-align: center;
  padding: 15px 20px calc(24px + env(safe-area-inset-bottom));
}
.rr-footer__inner { max-width: var(--rr-max); margin: 0 auto; }
.rr-footer__copy { margin: 0; font-size: 12px; color: #999; line-height: 1.6; }
.rr-footer__links {
  margin: 6px 0 0;
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 4px;
}
.rr-footer__links a { color: #999; white-space: nowrap; text-decoration: none; }
.rr-footer__links span { margin: 0 4px; color: #ddd; }
.rr-footer__biz { margin: 10px 0 0; font-size: 11px; color: #aaa; line-height: 1.8; }

/* 데스크탑에서 과하게 넓어지지 않게 */
@media (min-width: 560px) {
  .rr-page-title { font-size: 30px; }
}

/* ── 맨 위로 버튼 — 앱 .go-top 과 동일(위로 스크롤 + 100px 이상일 때 표시) ───── */
.go-top {
  position: fixed;
  bottom: calc(28px + env(safe-area-inset-bottom));
  right: max(20px, calc(50vw - 240px)); /* 520px 본문 우측 20px inset */
  z-index: 50;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.go-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.go-top img { width: 44px; height: 44px; display: block; }