/* ================================================================
   루딤 기본 고객 스킨 — style.css
   브랜드 컬러는 --roo-brand-1 / --roo-brand-2 CSS 변수로 주입됨
   (사이트 브랜드 설정 → template-engine.ts → </head> 직전 주입)
================================================================ */

/* ── 리셋 ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ── 루트 변수 (기본값 — 브랜드 컬러는 site별 주입으로 덮어씀) ── */
:root {
  --roo-brand-1: #cc222c;
  --roo-brand-2: #f5e8e8;
  --roo-text-color: #111827;
  --roo-text-color-2: #6b7280;
  --roo-bg-color: #ffffff;
  --roo-bg-color-2: #f8f9fa;
  --roo-line-color: #e5e7eb;
  --roo-radius: 12px;
  --roo-radius-sm: 8px;
  --roo-container: 1280px;
  --roo-h-pc: 70px;
  --roo-h-mo: 58px;
  --roo-shadow: 0 2px 12px rgba(0,0,0,.07);
  --roo-shadow-hover: 0 8px 28px rgba(0,0,0,.13);
}

/* ── 기본 body ── */
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;
  color: var(--roo-text-color);
  background: var(--roo-bg-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── 컨테이너 ── */
.roo-container {
  max-width: var(--roo-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ══════════════════════════════════════════
   헤더
══════════════════════════════════════════ */
.roo-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--roo-h-pc);
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: 900;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.roo-header.is-scrolled {
  background: #fff;
  border-bottom-color: var(--roo-line-color);
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.roo-header-inner {
  max-width: var(--roo-container);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}
.roo-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.roo-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
}
.roo-logo-text {
  font-size: 18px;
  font-weight: 800;
  color: var(--roo-brand-1);
  letter-spacing: -.03em;
}
.roo-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.roo-nav-link {
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--roo-text-color-2);
  border-radius: 6px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.roo-nav-link:hover,
.roo-nav-link.is-active {
  color: var(--roo-brand-1);
  background: var(--roo-brand-2);
}
.roo-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.roo-header-tel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--roo-brand-1);
  color: #fff;
  border-radius: var(--roo-radius-sm);
  font-size: 13px;
  font-weight: 600;
  transition: opacity .15s;
}
.roo-header-tel:hover { opacity: .88; }
.roo-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 6px;
}
.roo-ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--roo-text-color);
  border-radius: 2px;
  transition: all .25s;
}
.roo-ham.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.roo-ham.is-open span:nth-child(2) { opacity: 0; }
.roo-ham.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 풀메뉴 드로어 */
.roo-mo-nav {
  display: none;
  position: fixed;
  top: var(--roo-h-mo);
  left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--roo-line-color);
  padding: 12px 0;
  z-index: 899;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.roo-mo-nav.is-open { display: block; }
.roo-mo-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--roo-text-color);
  border-bottom: 1px solid var(--roo-line-color);
  transition: background .1s;
}
.roo-mo-nav-link:last-child { border-bottom: none; }
.roo-mo-nav-link:active { background: var(--roo-bg-color-2); }
.roo-mo-nav-link--tel {
  color: var(--roo-brand-1);
  font-weight: 700;
}

/* 모바일 하단 퀵버튼 */
.roo-mo-bottom {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  background: #fff;
  border-top: 1px solid var(--roo-line-color);
  z-index: 800;
  display: none;
}
.roo-mo-bottom-inner {
  display: flex;
  height: 100%;
}
.roo-mo-bottom-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--roo-text-color-2);
  border-right: 1px solid var(--roo-line-color);
  transition: color .15s, background .15s;
}
.roo-mo-bottom-btn:last-child { border-right: none; }
.roo-mo-bottom-btn i { font-size: 18px; }
.roo-mo-bottom-btn--tel {
  background: var(--roo-brand-1);
  color: #fff;
  font-size: 11px;
}
.roo-mo-bottom-btn--tel i { font-size: 20px; }

/* (.roo-page padding-top 제거 — 사용자 요청) */

/* ══════════════════════════════════════════
   섹션 공통
══════════════════════════════════════════ */
.roo-section {
  padding: 72px 0;
}
.roo-section--alt {
  background: var(--roo-bg-color-2);
}
.roo-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
}
.roo-section-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: var(--roo-text-color);
  letter-spacing: -.04em;
  line-height: 1.2;
}
.roo-section-sub {
  font-size: 15px;
  color: var(--roo-text-color-2);
  margin-top: 8px;
  font-weight: 400;
}
.roo-more-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--roo-brand-1);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 16px;
}
.roo-more-link i { font-size: 12px; }

/* 로딩 / 빈 상태 */
.roo-loading, .roo-empty-state {
  text-align: center;
  padding: 64px 0;
  color: var(--roo-text-color-2);
  font-size: 14px;
}
.roo-empty-state i {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
  opacity: .35;
}

/* ══════════════════════════════════════════
   히어로 배너 섹션 (area_id="1")
══════════════════════════════════════════ */
.roo-section--hero {
  padding: 0;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}
.roo-banner-area.roo-hero-banner {
  position: relative;
  width: 100%;
  min-height: 480px;
  background: var(--roo-bg-color-2);
  overflow: hidden;
}
.roo-hero-slide-wrap {
  display: flex;
  transition: transform .5s ease;
  height: 100%;
}
.roo-hero-slide {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
}
.roo-hero-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.roo-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 480px;
}
.roo-hero-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 48px 40px 40px;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
  color: #fff;
}
.roo-hero-caption h2 {
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.roo-hero-caption p {
  font-size: clamp(14px, 1.5vw, 18px);
  opacity: .88;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* 히어로 인디케이터 */
.roo-hero-dots {
  position: absolute;
  bottom: 20px;
  right: 24px;
  display: flex;
  gap: 6px;
  z-index: 10;
}
.roo-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.roo-hero-dot.is-active {
  background: #fff;
  transform: scale(1.4);
}

/* 히어로 이전/다음 버튼 */
.roo-hero-prev, .roo-hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: var(--roo-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--roo-shadow);
  transition: background .15s, opacity .15s;
  font-size: 16px;
}
.roo-hero-prev { left: 16px; }
.roo-hero-next { right: 16px; }
.roo-hero-prev:hover, .roo-hero-next:hover { background: #fff; }

/* 히어로 영역 빈 상태 */
.roo-hero-empty {
  width: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--roo-brand-1) 0%, color-mix(in srgb, var(--roo-brand-1) 70%, #000) 100%);
  color: #fff;
  text-align: center;
  padding: 80px 24px;
}
.roo-hero-empty h2 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: 16px;
}
.roo-hero-empty p {
  font-size: clamp(15px, 2vw, 20px);
  opacity: .88;
}

/* ══════════════════════════════════════════
   시술 검색 섹션
══════════════════════════════════════════ */
.roo-section--search {
  padding: 28px 0;
  background: var(--roo-bg-color-2);
  border-bottom: 1px solid var(--roo-line-color);
}
.roo-search-bar {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  border: 2px solid var(--roo-line-color);
  border-radius: var(--roo-radius);
  overflow: hidden;
  background: #fff;
  transition: border-color .2s;
}
.roo-search-bar:focus-within {
  border-color: var(--roo-brand-1);
}
.roo-search-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 15px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--roo-text-color);
}
.roo-search-input::placeholder { color: var(--roo-text-color-2); }
.roo-search-btn {
  padding: 12px 18px;
  background: var(--roo-brand-1);
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  transition: opacity .15s;
}
.roo-search-btn:hover { opacity: .88; }

/* ══════════════════════════════════════════
   상품 그룹 카드 (시술·기기 섹션 공통)
══════════════════════════════════════════ */
.roo-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.roo-product-card {
  background: #fff;
  border-radius: var(--roo-radius);
  overflow: hidden;
  box-shadow: var(--roo-shadow);
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
  display: block;
  color: inherit;
}
.roo-product-card:hover {
  box-shadow: var(--roo-shadow-hover);
  transform: translateY(-3px);
}
.roo-product-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--roo-brand-2);
}
.roo-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.roo-product-card:hover .roo-product-thumb img {
  transform: scale(1.04);
}
.roo-product-body {
  padding: 14px 16px 18px;
}
.roo-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 7px;
}
.roo-product-tag {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--roo-brand-1);
  border-radius: 4px;
  line-height: 1.5;
}
.roo-product-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--roo-text-color);
  margin-bottom: 5px;
  line-height: 1.35;
  letter-spacing: -.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roo-product-summary-sm {
  font-size: 12px;
  color: var(--roo-text-color-2);
  line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roo-product-price-orig {
  font-size: 11px;
  color: var(--roo-text-color-2);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.roo-product-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--roo-brand-1);
  letter-spacing: -.02em;
}

/* ══════════════════════════════════════════
   비포&애프터 (포트폴리오 루프)
══════════════════════════════════════════ */
.roo-ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.roo-ba-card {
  background: #fff;
  border-radius: var(--roo-radius);
  overflow: hidden;
  box-shadow: var(--roo-shadow);
  transition: box-shadow .2s;
}
.roo-ba-card:hover { box-shadow: var(--roo-shadow-hover); }
.roo-ba-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--roo-bg-color-2);
}
.roo-ba-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.roo-ba-body {
  padding: 12px 16px 16px;
}
.roo-ba-cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--roo-brand-1);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.roo-ba-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--roo-text-color);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   이벤트 섹션 (팝업 기반)
══════════════════════════════════════════ */
.roo-evt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}
.roo-evt-card {
  background: #fff;
  border-radius: var(--roo-radius);
  overflow: hidden;
  box-shadow: var(--roo-shadow);
  transition: box-shadow .2s, transform .2s;
  display: block;
  color: inherit;
}
.roo-evt-card:hover {
  box-shadow: var(--roo-shadow-hover);
  transform: translateY(-3px);
}
.roo-evt-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--roo-brand-2);
  position: relative;
}
.roo-evt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.roo-evt-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--roo-brand-1);
  border-radius: 100px;
}
.roo-evt-body {
  padding: 16px 18px 18px;
}
.roo-evt-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--roo-text-color);
  margin-bottom: 6px;
  line-height: 1.35;
  letter-spacing: -.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roo-evt-summary {
  font-size: 13px;
  color: var(--roo-text-color-2);
  line-height: 1.7;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roo-evt-period {
  font-size: 12px;
  color: var(--roo-text-color-2);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ══════════════════════════════════════════
   스태프 배너 (area_id="2")
══════════════════════════════════════════ */
.roo-banner-area.roo-staff-area {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.roo-staff-card {
  background: #fff;
  border-radius: var(--roo-radius);
  overflow: hidden;
  box-shadow: var(--roo-shadow);
  text-align: center;
  padding-bottom: 20px;
}
.roo-staff-photo {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--roo-brand-2);
}
.roo-staff-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.roo-staff-info {
  padding: 16px 16px 0;
}
.roo-staff-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--roo-text-color);
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.roo-staff-bio {
  font-size: 13px;
  color: var(--roo-text-color-2);
  line-height: 1.65;
}

/* ══════════════════════════════════════════
   푸터
══════════════════════════════════════════ */
.roo-footer {
  background: #1a1d23;
  color: rgba(255,255,255,.6);
  padding: 48px 0 28px;
  font-size: 13px;
  line-height: 1.8;
}
.roo-footer-inner {
  max-width: var(--roo-container);
  margin: 0 auto;
  padding: 0 24px;
}
.roo-footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.roo-footer-logo img {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: .8;
}
.roo-footer-logo-text {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
}
.roo-footer-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: rgba(255,255,255,.5);
  font-size: 12px;
  margin-bottom: 20px;
}
.roo-footer-info span { white-space: nowrap; }
.roo-footer-copy {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35);
  font-size: 12px;
}

/* ══════════════════════════════════════════
   플로팅 문의 버튼
══════════════════════════════════════════ */
.roo-float-btn {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.roo-float-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.roo-float-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.roo-float-item i { font-size: 16px; }
.roo-float-item--tel { background: var(--roo-brand-1); color: #fff; }
.roo-float-item--kakao { background: #FEE500; color: #3C1E1E; }

/* ══════════════════════════════════════════
   시술 목록 페이지 (treat.html)
══════════════════════════════════════════ */
.roo-treat-page {
  min-height: calc(100vh - var(--roo-h-pc));
}
.roo-treat-wrap {
  max-width: var(--roo-container);
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.roo-page-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: var(--roo-text-color);
  margin-bottom: 24px;
  letter-spacing: -.04em;
}

/* 카테고리 탭 */
.roo-catbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.roo-cat-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--roo-text-color-2);
  border: 1px solid var(--roo-line-color);
  border-radius: 100px;
  background: #fff;
  transition: all .15s;
  cursor: pointer;
}
.roo-cat-btn:hover { color: var(--roo-brand-1); border-color: var(--roo-brand-1); }
.roo-cat-btn.is-on {
  background: var(--roo-brand-1);
  color: #fff;
  border-color: var(--roo-brand-1);
  font-weight: 600;
}

/* 검색 바 */
.roo-treat-search {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.roo-treat-search-input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--roo-line-color);
  border-radius: var(--roo-radius-sm);
  font-size: 14px;
  color: var(--roo-text-color);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.roo-treat-search-input:focus { border-color: var(--roo-brand-1); }
.roo-treat-search-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--roo-radius-sm);
  background: var(--roo-brand-1);
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity .15s;
}
.roo-treat-search-btn:hover { opacity: .85; }

/* 시술 카드 리스트 */
.roo-treat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* ══════════════════════════════════════════
   이벤트 목록 페이지 (event.html)
══════════════════════════════════════════ */
.roo-evt-page {
  min-height: calc(100vh - var(--roo-h-pc));
}
.roo-evt-wrap {
  max-width: var(--roo-container);
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.roo-evt-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}
.roo-evt-ended-ttl {
  font-size: 15px;
  font-weight: 700;
  color: var(--roo-text-color-2);
  margin: 48px 0 16px;
}
.roo-evt-ended-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  opacity: .55;
}

/* ══════════════════════════════════════════
   빈 섹션 자동 숨김 (data-empty)
══════════════════════════════════════════ */
.rs:has([data-empty="1"]) { display: none !important; }

/* ══════════════════════════════════════════
   반응형
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .roo-header-tel span { display: none; }
  .roo-header-tel { padding: 8px 12px; }
}

@media (max-width: 768px) {
  :root {
    --roo-h-pc: var(--roo-h-mo);
  }
  .roo-nav, .roo-header-tel { display: none; }
  .roo-ham { display: flex; }

  .roo-section { padding: 48px 0; }

  .roo-hero-slide img { min-height: 280px; }
  .roo-hero-caption { padding: 24px 20px 20px; }

  .roo-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .roo-ba-grid { grid-template-columns: 1fr; gap: 12px; }
  .roo-evt-grid { grid-template-columns: 1fr; gap: 12px; }
  .roo-banner-area.roo-staff-area { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .roo-treat-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .roo-evt-full-grid, .roo-evt-ended-grid { grid-template-columns: 1fr; }

  .roo-mo-bottom { display: block; }
  .roo-float-btn { bottom: 64px; }
  .roo-footer { padding-bottom: 72px; }
}

@media (max-width: 480px) {
  .roo-container { padding: 0 16px; }
  .roo-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .roo-banner-area.roo-staff-area { grid-template-columns: 1fr; }
}

/* ================================================================
   시술 상세 페이지 (treat-detail.html)
================================================================ */

/* 브레드크럼 */
.roo-breadcrumb {
  background: var(--roo-bg-sub, #f7f7f7);
  border-bottom: 1px solid var(--roo-border, #e8e8e8);
  padding: 12px 0;
}
.roo-breadcrumb .roo-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--roo-text-muted, #888);
}
.roo-breadcrumb-back {
  color: var(--roo-brand-1, #cc222c);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.roo-breadcrumb-back:hover { text-decoration: underline; }
.roo-breadcrumb-sep { color: var(--roo-border, #ccc); }
.roo-breadcrumb-cur { color: var(--roo-text-color, #1a1a1a); font-weight: 500; }

/* 그룹 히어로 */
.roo-group-hero {
  background: var(--roo-bg-sub, #f7f7f7);
  padding: 48px 0;
}
.roo-group-hero--no-img { padding: 32px 0; }
.roo-group-hero-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.roo-group-hero-img {
  width: 240px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--roo-border, #e8e8e8);
  aspect-ratio: 4/3;
}
.roo-group-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.roo-group-hero-info { flex: 1; }
.roo-group-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--roo-text-color, #1a1a1a);
  margin: 0 0 12px;
}
.roo-group-desc {
  font-size: 1rem;
  color: var(--roo-text-muted, #666);
  line-height: 1.7;
  margin: 0;
  white-space: pre-line;
}

/* 섹션 레이블 */
.roo-section-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--roo-text-color, #1a1a1a);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--roo-brand-1, #cc222c);
  display: inline-block;
}

/* 상품 카드 — 상세 변형 (이미지 크게, 설명 표시) */
.roo-product-card--detail {
  cursor: default;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  background: #fff;
  border: 1px solid var(--roo-border, #ececec);
  text-decoration: none;
  color: inherit;
}
.roo-product-card--detail .roo-product-thumb {
  width: 160px;
  aspect-ratio: 1;
  background: var(--roo-bg-sub, #f5f5f5);
  flex-shrink: 0;
  border-radius: 0;
}
.roo-product-card--detail .roo-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.roo-product-card--detail .roo-product-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roo-product-summary {
  font-size: 0.875rem;
  color: var(--roo-text-muted, #777);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roo-treat-list.roo-detail-list-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* CTA 섹션 */
.roo-detail-cta {
  background: var(--roo-brand-1, #cc222c);
  padding: 40px 0;
  text-align: center;
  margin-top: 48px;
}
.roo-detail-cta .roo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.roo-detail-cta-text {
  color: rgba(255,255,255,.9);
  font-size: 1.05rem;
  margin: 0;
}
.roo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity .2s;
}
.roo-btn:hover { opacity: .85; }
.roo-btn-primary {
  background: #fff;
  color: var(--roo-brand-1, #cc222c);
}

/* 반응형 — 상세 페이지 */
@media (max-width: 768px) {
  .roo-group-hero-inner { flex-direction: column; gap: 24px; }
  .roo-group-hero-img { width: 100%; max-width: 100%; }
  .roo-group-title { font-size: 1.5rem; }
  .roo-product-card--detail {
    grid-template-columns: 120px 1fr;
  }
  .roo-product-card--detail .roo-product-thumb { width: 120px; }
}

@media (max-width: 480px) {
  .roo-product-card--detail {
    grid-template-columns: 1fr;
  }
  .roo-product-card--detail .roo-product-thumb {
    width: 100%;
    aspect-ratio: 16/9;
  }
}

/* =========================================================================
   비포&애프터 Hero Parallax — 헤드라인 오버레이 + 강한 3D 펼침 + 시차
   디자인 참고: ui.aceternity.com/components/hero-parallax (개념만 참고)
   구현: 바닐라 CSS/JS (perspective + multi-axis transform + CSS 변수 --p)
========================================================================= */
/* overflow:hidden / position:relative 는 sticky 의 containing block 을 stage 의 진짜 부모(viewport)가 아닌
   섹션 자체로 만들어 sticky 가 깨짐. overflow 는 안쪽 .roo-parallax-stage 가 이미 hidden 처리. */
body .roo-section--parallax { padding: 0 !important; background: #000 !important; color: #fff !important; opacity: 1 !important; transform: none !important; }

.roo-parallax {
  position: relative;
  width: 100%;
  /* sticky 체류 = 150vh = 1.5 viewport scroll. JS 가 raw progress 를 min(1, p*3) 로
     매핑하여 처음 33% 스크롤 안에 flat 도달, 이후 67% 는 안정적인 marquee 노출 상태. */
  height: 250vh;
  --p: 0;
}
.roo-parallax-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* perspective 900 = 시점이 매우 가까움 -> 카드 강하게 누움 + 진입 시 배경처럼 viewport 가득 */
  perspective: 900px;
  perspective-origin: 50% 50%;
  background: #000;
}
/* 진입 시 dark overlay — p=0 일 때 카드가 어둡게 깔린 배경처럼,
   p=1 (펼침 완료) 시 사라져 카드가 fully 밝게 노출 */
.roo-parallax-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, calc(0.65 * (1 - var(--p, 0))));
  transition: background 80ms linear;
}
.roo-parallax-headline {
  position: absolute;
  /* viewport 중상단(30vh) — 어두운 배경의 카드들 위에 텍스트가 떠 보임. */
  top: 30vh;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 6vw;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: none;
  /* p=0 풀 가시(어두운 배경에 텍스트 강조) → p=1 페이드아웃 */
  opacity: calc(1 - var(--p, 0));
  transform: translateY(calc(-40px * var(--p, 0)));
  color: #fff;
}
.roo-parallax-h {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  color: #fff;
}
.roo-parallax-sub {
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.5;
  margin: 24px 0 0;
  max-width: 600px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
}
.roo-parallax-rows {
  position: absolute;
  /* anchor 는 stage 중앙(50%) — translateY 를 p 에 따라 동적으로 적용:
     p=0(진입): +120px 아래로 떨어져 헤드라인 회피.
     p=1(일자 배열): 0 -> viewport 중앙에 정확히 정렬. */
  top: 50%;
  left: 50%;
  width: 100%;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  gap: 28px;
  opacity: 1;
  z-index: 1; /* overlay(::after, z:2) 아래, headline(z:3) 보다 아래 */
  will-change: transform;
  /* p=0(섹션 막 진입): scale 1.4 + 강한 3D 기울기 -> 카드가 viewport 를 가득 채워 배경처럼.
     p=1(일자 배열): scale 1.0 + 평면 + viewport 중앙. */
  transform:
    translate(-50%, -50%)
    translateY(calc(120px * (1 - var(--p, 0))))
    scale(calc(1 + 0.4 * (1 - var(--p, 0))))
    rotateX(calc(28deg * (1 - var(--p, 0))))
    rotateY(calc(-14deg * (1 - var(--p, 0))))
    rotateZ(calc(18deg * (1 - var(--p, 0))));
}
.roo-parallax-row {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  will-change: transform;
  /* p=0: row가 자기 방향으로 멀리 밀려 시작 → p=1: 자연 위치(0) 정렬 */
  transform: translateX(calc((1 - var(--p, 0)) * var(--row-dir, 1) * 1100px));
}
.roo-parallax-row[data-dir="left"]  { --row-dir: 1; }
.roo-parallax-row[data-dir="right"] { --row-dir: -1; }

/* 무한 슬라이드 트랙 — 카드 세트 3배 복제 + 0→-33.333% 루프 (끊김 없는 시각적 연속성).
   동일 카드가 viewport 안에서 동시에 보일 확률을 2배 복제(50%) 보다 더 낮춤. */
.roo-parallax-track {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
  width: max-content;
  will-change: transform;
  animation: roo-marquee-left 75s linear infinite;
}
.roo-parallax-row[data-dir="right"] .roo-parallax-track {
  animation-name: roo-marquee-right;
  animation-duration: 70s;
}
.roo-parallax-rows > .roo-parallax-row:nth-child(2) .roo-parallax-track { animation-duration: 85s; }
.roo-parallax-rows > .roo-parallax-row:nth-child(3) .roo-parallax-track { animation-duration: 80s; }
@keyframes roo-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
@keyframes roo-marquee-right {
  from { transform: translateX(-33.333%); }
  to   { transform: translateX(0); }
}

.roo-parallax-card {
  flex-shrink: 0;
  width: 380px;
  height: 300px;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.roo-parallax-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}
.roo-parallax-card img,
.roo-parallax-card > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.roo-parallax-card img { object-fit: cover; }
.roo-parallax-card .roo-parallax-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  pointer-events: none;
  /* 평소엔 이미지만 — 호버 시 타이틀 페이드인 */
  opacity: 0;
  transition: opacity .25s ease;
}
.roo-parallax-card:hover .roo-parallax-title { opacity: 1; }

@media (max-width: 1024px) {
  .roo-parallax-card { width: 280px; height: 210px; }
}
@media (max-width: 767px) {
  /* 모바일 전용 (768=iPad portrait 는 위 tablet 룰 유지).
     viewport 좁음(~390x800) + 노치/주소바 고려 → 카드/회전/이동량 모두 축소.
     3 rows * 170 + 2 * 10 = 530px, stage 95vh(~760) -> 위아래 여백 ~115px. 안 잘림. */
  .roo-parallax { height: 240vh; }
  .roo-parallax-stage { height: 95vh; }
  .roo-parallax-headline { top: 22vh; padding: 0 20px; }
  .roo-parallax-h { font-size: 32px; }
  .roo-parallax-sub { font-size: 13px; margin-top: 12px; }
  .roo-parallax-rows {
    gap: 10px;
    /* 모바일 viewport 짧음 → translateY 40px 으로 축소. 회전·scale 은 데스크탑 약 65% 강도. */
    transform:
      translate(-50%, -50%)
      translateY(calc(40px * (1 - var(--p, 0))))
      scale(calc(1 + 0.3 * (1 - var(--p, 0))))
      rotateX(calc(18deg * (1 - var(--p, 0))))
      rotateY(calc(-9deg * (1 - var(--p, 0))))
      rotateZ(calc(12deg * (1 - var(--p, 0))));
  }
  .roo-parallax-row { transform: translateX(calc((1 - var(--p, 0)) * var(--row-dir, 1) * 500px)); }
  .roo-parallax-track { gap: 10px; animation-duration: 55s; }
  .roo-parallax-row[data-dir="right"] .roo-parallax-track { animation-duration: 50s; }
  .roo-parallax-rows > .roo-parallax-row:nth-child(2) .roo-parallax-track { animation-duration: 65s; }
  .roo-parallax-rows > .roo-parallax-row:nth-child(3) .roo-parallax-track { animation-duration: 60s; }
  .roo-parallax-card { width: 220px; height: 170px; border-radius: 0; }
}
@media (max-width: 420px) {
  /* iPhone SE 등 더 작은 화면: 카드 한 단계 더 작게. */
  .roo-parallax-h { font-size: 28px; }
  .roo-parallax-card { width: 190px; height: 145px; }
  .roo-parallax-rows { gap: 8px; }
  .roo-parallax-track { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .roo-parallax-rows { transform: translate(-50%, -50%); opacity: 1; }
  .roo-parallax-row { transform: none; }
  .roo-parallax-track { animation: none; }
  .roo-parallax-headline { opacity: 1; transform: none; }
}

/* =========================================================================
   히어로 ROODIM 인트로 애니메이션
   시퀀스: 각 글자 dia-text-reveal 등장 -> 빈 빨간박스 -> Design -> Design Idea -> DI -> M.
   인트로 끝날 때까지 body scroll lock + nav 숨김.
========================================================================= */

/* 인트로 진행 중: body scroll 잠금 + nav 숨김
   nav inline 의 body{padding-top:80px} 무력화 → hero center = viewport center (모바일 핵심 fix) */
body:not(.is-intro-done) { overflow: hidden; height: 100vh; padding-top: 0 !important; }
/* 인트로 종료 시 padding-top 복귀를 부드럽게 — nav inline 의 80px(또는 모바일 68px) 값 자동 적용 */
body.is-intro-done { transition: padding-top 0.45s ease 0.4s; }
/* 인트로 동안 nav 컨테이너 자체의 layout(transform: translateX(-50%) 등)은 유지 →
   비행 도착 지점(.rd-brand-text)의 좌표가 정확하게 계산되도록 함.
   자식 요소들(rd-brand-mark / rd-brand-text / rd-menu / rd-actions)은 별도 룰에서 슬라이드인. */
body:not(.is-intro-done) .rd-nav {
  pointer-events: none;
}


/* Phase 2: ROO 왼쪽 / M 오른쪽으로 사라짐 — transition 은 상태 변화 시점에만.
   Fix2: width:0 + overflow:hidden → layout 에서도 빠져서 middle 이 viewport center 에 자연 위치
   (Design Idea 가운데 정렬). transform 은 visual 만 이동, layout 영향 X 이므로 별도 필요. */


/* is-merging 시 char-w 의 padding 0.18em + margin -0.18em (base) 가 ROO/M 의 char wrap 과
   동일하므로 baseline 자동 일치. */



/* Merging — 이벤트 6 (1.3s) 안에서 esign/dea 사라짐 1s + DI 이동 (0.2~1s, 0.8s).
   transition 대신 @keyframes 사용 — state 충돌 없이 trigger 시 1.3s 진행 보장.
   0~76.9% (0~1s): blur+translateY+opacity fade-out (이벤트 3 등장의 거꾸로).
   15.4~76.9% (0.2~1s): max-width 1em→0 collapse → D/I 더 빠르게 가운데로 모임
   (1s 시점 ROO/M 등장 5.5s 와 자연 연결). */
@keyframes rdEsignFadeMerge {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    max-width: 1em;
  }
  15.4% {
    max-width: 1em;
  }
  76.9%, 100% {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(0.3em);
    max-width: 0;
    padding: 0;
    margin: 0;
  }
}
@keyframes rdGapMerge {
  0%, 15.4% { width: var(--rd-word-gap-w, 0.6em); }
  76.9%, 100% { width: 0; }
}


@keyframes rd-hero-char-in {
  to { opacity: 1; filter: blur(0); }
}
@keyframes rd-hero-slice-ltr {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}
@keyframes rd-hero-slice-rtl {
  0%   { transform: translateX(100%);  opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}
/* (가운데 빨간 박스 — 사용자 요청으로 박스 효과 전체 삭제) */
/* 모바일 — 폰트 축소 (ROODIM 6글자가 모바일 viewport 안에) + dvh 로 주소바 정확 보정 */
@media (max-width: 767px) {
  .rd-hero {
    padding: 0 12px;
    min-height: 520px;
    /* iOS Safari 주소바 포함 100vh → 실제 visible 영역과 차이.
       dvh 로 동적 viewport 사용 → 항상 정확한 y 중앙 보장. */
    height: 100dvh;
  }
  .rd-hero-title { font-size: clamp(56px, 13vw, 120px); letter-spacing: -0.04em; }
  /* words가 rd-hero-middle 밖으로 이동 → is-words-in 단계에선 DI 공간만 확보하면 됨 */
  .rd-hero.is-words-in .rd-hero-middle { min-width: 2.0em; }
  /* 모바일 words font-size 0.85em — 1em 은 viewport overflow (ROO+DI+M > 414).
     0.85em 으로 visual 큼 + Design Idea viewport 안 fit. */
  .rd-hero-words { font-size: 0.85em !important; transition: none !important; }
  /* middle transition transform 0.5s — Phase 4 시점 transform '' clear 시 smooth.
     JS recenter 는 누적식 dx 로 transition 영향 없이 정확. */
  .rd-hero-middle { transition: min-width .8s cubic-bezier(.65,0,.35,1), transform 0.5s ease !important; }
  /* hero section padding-top 0 — viewport y 중앙 정렬 (이전 48px padding 으로 아래로 치우침). */
  .roo-section--hero { padding-top: 0 !important; }
  /* middle 항상 inline-flex 유지 (position absolute/relative 전환 X → y축 baseline 점프 방지).
     x축 가운데 정렬은 main.js 의 middle.style.transform translateX(dx) 가 담당 (PC 와 동일 방식).
     DI 머지 시점 — min-width 0 + width auto + transition-delay 0 으로 ROO/M 가 DI 양쪽 자연 붙음. */
  .rd-hero.is-merging .rd-hero-middle,
  .rd-hero.is-roo-back .rd-hero-middle {
    min-width: 0 !important;
    width: auto !important;
    transition-delay: 0s !important;
  }
  /* 비행 duration (PC 0.85s → 모바일 1.0s) — 헤더 ROODIM 노출 0.15s 더 늦게 */
  .rd-hero.is-intro-flying .rd-hero-title {
    transition: transform 1.0s cubic-bezier(.65,0,.35,1) !important;
  }
  /* nav top 0 — 모바일에서 nav 위 8px 영역 body white 노출 방지 (스크롤 전 배경 X 보강). */
  .rd-nav { top: 0 !important; }
}

/* reduced-motion 대응 — 즉시 최종 상태 */
@media (prefers-reduced-motion: reduce) {
  .rd-hero-char-main { opacity: 1; filter: none; animation: none; }
  .rd-hero-char-slice { display: none; }
  body:not(.is-intro-done) { overflow: auto; height: auto; }
  body:not(.is-intro-done) .rd-nav { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
}

/* 인트로 완료 후 hero 섹션 collapse (slide 트랜지션으로 자연스럽게 0 으로) */
body.is-intro-done .rd-hero {
  height: 0;
  min-height: 0;
  overflow: hidden;
  transition: height 0.45s ease 0.85s, min-height 0.45s ease 0.85s;
}
body.is-intro-done .roo-hero-banner:not(:has(.roo-hero-slide)) {
  min-height: 0;
  transition: min-height 0.45s ease 0.85s;
}

/* Fix5: 비행 중에만 DI 보이도록 — body:not(.is-intro-done) 조건으로 비행 후엔 fade 가능. */
body:not(.is-intro-done) .rd-hero.is-intro-flying .rd-hero-words,
body:not(.is-intro-done) .rd-hero.is-intro-flying .rd-hero-word,
body:not(.is-intro-done) .rd-hero.is-intro-flying .rd-hero-char-w[data-key] {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: none !important;
}
/* Fix9 추가: 인트로 종료 후 hero 안 words/char-w 자연 fade out (title 과 동기). */
body.is-intro-done .rd-hero-words,
body.is-intro-done .rd-hero-word,
body.is-intro-done .rd-hero-char-w {
  opacity: 0 !important;
  transition: opacity 0.4s ease;
}

/* Fix10/11/12: 메인 페이지(hero 있는 페이지 = body.rd-has-hero) 만 해당 — 다른 페이지 헤더 영향 X.
   Fix11: 스크롤 전 nav 배경 transparent (스크롤 시 nav.is-scrolled 가 기본 배경 적용).
   Fix12: 슬라이드인 명확 순차 — ROODIM(0s) → 로고 좌측에서(0.5s) → 메뉴/액션 우측에서(0.9s). */

body.rd-has-hero .rd-nav:not(.is-scrolled) {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

body.rd-has-hero:not(.is-intro-done) .rd-brand-text { opacity: 0; }
body.rd-has-hero:not(.is-intro-done) .rd-brand-mark {
  opacity: 0;
  transform: translateX(40px);   /* 로고: 오른쪽에서 슬라이드인 (ROODIM 쪽으로 모임) */
}
body.rd-has-hero:not(.is-intro-done) .rd-menu,
body.rd-has-hero:not(.is-intro-done) .rd-actions {
  opacity: 0;
  transform: translateX(-40px);  /* 메뉴/액션: 왼쪽에서 슬라이드인 (ROODIM 쪽으로 모임) */
}
/* 메인 페이지(skin9) 에서 헤더 로그인/장바구니 (.rd-actions) 숨김 — 사업 소개용으로만 사용.
   .rd-actions 안 로그인 버튼 + 장바구니 element 모두 제거. .rd-menu (스튜디오루딤 메뉴) 는 유지. */
body.rd-has-hero .rd-actions { display: none !important; }

body.rd-has-hero.is-intro-done .rd-brand-text {
  opacity: 1;
  transition: opacity 0.4s ease 0s;
}
/* :has() 룰 제거 — 비행 중 헤더 ROODIM 미리 등장하면 hero 글자와 겹쳐 깜빡임.
   JS 가 도착 시점(0.85s)에 instant 적용 (hero opacity 0 + brand-text opacity 1 동시). */
body.rd-has-hero.is-intro-done .rd-brand-mark {
  opacity: 1;
  transform: translateX(0);
  transition:                                                /* 로고 오른쪽에서 (0.4s, 0.5s 후 시작) */
    opacity 0.4s ease 0.5s,
    transform 0.4s cubic-bezier(.34,1.56,.64,1) 0.5s;
}
body.rd-has-hero.is-intro-done .rd-menu,
body.rd-has-hero.is-intro-done .rd-actions {
  opacity: 1;
  transform: translateX(0);
  transition:                                                /* 메뉴·액션 왼쪽에서 (0.4s, 0.9s 후 시작) */
    opacity 0.4s ease 0.9s,
    transform 0.4s cubic-bezier(.34,1.56,.64,1) 0.9s;
}

/* 배너 데이터 등록되면 운영자 banner_loop 가 덮음 -> .rd-hero 숨김 */
.roo-hero-banner:has(.roo-hero-slide) .rd-hero { display: none; }

/* hero 섹션 강제 노출 — 다른 룰이 display:none 시키는 것 방어. .rd-hero 안의 인트로가 안 보이면 안 됨. */
#roo-hero-section,
.roo-section--hero {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}
.roo-banner-area.roo-hero-banner { min-height: 100vh; }



/* === RD_INTRO_VIDEO START === */
.rd-intro-video {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  z-index: 99999;
}
.rd-intro-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.rd-intro-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(14, 1fr);
  pointer-events: none;
}
.rd-intro-grid-cell {
  background: #fff;
  opacity: 1;
  transition: opacity 60ms ease-out;
}
.rd-intro-grid-cell.is-hidden {
  opacity: 0;
}
.rd-intro-video[data-intro-state="done"] {
  display: none;
}
body.rd-intro-locked {
  overflow: hidden !important;
  height: 100vh;
}
/* === RD_INTRO_VIDEO END === */



/* === RD_COSMOS START === */
.rd-cosmos-section {
  position: relative;
  width: 100%;
  height: 200vh;
  background: #000;
  padding: 0;
}
.rd-cosmos-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.rd-cosmos-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.rd-cosmos-overlay {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: 800px;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
  color: #fff;
}
.rd-cosmos-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}
.rd-cosmos-desc {
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
/* === RD_COSMOS END === */


/* === RD_UNICORN_HERO START === */
.rd-unicorn-section {
  position: relative;
  width: 100%;
  height: 200vh;
  background: #000;
  padding: 0;
}
.rd-unicorn-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  background: #000;
}
.rd-unicorn-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rd-unicorn-overlay {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  color: #fff;
  pointer-events: none;
  will-change: opacity;
}
.rd-unicorn-title {
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.rd-unicorn-desc {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0 0 36px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.rd-unicorn-buttons {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}
.rd-unicorn-cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 10px;
  background: #fff;
  color: #0a0a0a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.rd-unicorn-cta:hover {
  transform: translateY(-2px);
}
.rd-unicorn-cta--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.rd-unicorn-cta--outline:hover {
  background: rgba(255,255,255,0.08);
}
/* === RD_UNICORN_HERO END === */

/* === RD_WIN_CHROME START === */
.rd-unicorn-sticky {
  transform-origin: 50% 50%;
}
.rd-win-chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 3px solid #c0c0c0;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-right-color: #808080;
  border-bottom-color: #808080;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040, 4px 4px 0 rgba(0,0,0,0.4);
  z-index: 3;
  transition: opacity .3s ease;
}
.rd-win-titlebar {
  height: 28px;
  background: linear-gradient(to right, #000080 0%, #1084d0 100%);
  color: #ffffff;
  font-family: 'MS Sans Serif', Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 2px 8px;
  flex-shrink: 0;
}
.rd-win-title {
  letter-spacing: 0.5px;
}
.rd-win-buttons {
  display: flex;
  gap: 2px;
}
.rd-win-btn {
  width: 22px;
  height: 22px;
  background: #c0c0c0;
  border: 2px solid;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  color: #000;
  font-family: 'MS Sans Serif', monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.rd-win-btn--close { background: #c0c0c0; }
.rd-win-cursor {
  position: fixed;
  width: 22px;
  height: 30px;
  pointer-events: none;
  z-index: 9999999;
  opacity: 0;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
  transition: opacity .2s;
}
.rd-win-cursor.is-click {
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #1084d0);
}
/* === RD_WIN_CHROME END === */