/* Lusite (루사이트) - 리뉴얼 서비스 페이지(renewal.html)
   style.css의 토큰·풍경·판(.sheet)·버튼·제작 과정(.steps)·FAQ·폼과 pages.css의 알약 선택지(.ck-seg)를 그대로 쓰고, 여기에는 이 페이지 고유 배치만 둔다.
   AI 티 규칙(README): 제목 위 작은 라벨 없음, 카드 안 카드 없음, 글로 없음, 한쪽만 두꺼운 색 테두리 없음.
   함정(CLAUDE.md): GSAP이 움직이는 요소([data-intro], [data-reveal], .steps__fill)에는 CSS transition을 걸지 않는다.
   비교 슬라이더의 --pos는 JS가 매 프레임 바꾸므로 clip-path·left에 transition을 걸지 않는다(끌 때 늦게 따라온다). */

.rn main [id] { scroll-margin-top: calc(var(--nav-h) + 28px); }
.nav__links a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }

/* ---------- 1. 히어로 + 비교 ---------- */
.rn-hero { position: relative; z-index: 1; padding: calc(var(--nav-h) + clamp(28px, 6vh, 64px)) 0 0; }
.rn-hero__inner {
  width: min(100% - 2 * var(--gutter), 980px); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.rn-hero__title { margin: 0; font-size: clamp(2rem, 4.1vw, 3.6rem); line-height: 1.14; letter-spacing: -0.04em; font-weight: 760; }
.rn-hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.rn-hero__title .line > span { display: inline-block; }
.rn-hero__sub { margin: 18px auto 0; max-width: 34em; font-size: clamp(1rem, 1.25vw, 1.15rem); color: color-mix(in srgb, var(--ink-2) 60%, var(--ink)); text-wrap: pretty; } /* 하늘 위 글이라 메인 히어로와 같은 한 단계 진한 회색 */
.rn-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
/* 하늘 위 보조 버튼: 테두리만 있으면 구름 위에서 흐려져 유리 바탕을 깐다 */
.rn-hero__ghost { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rn-hero__ghost:hover { background: var(--surface-hi); }

.rn-compare-wrap { width: min(100% - 2 * var(--gutter), 1120px); margin: clamp(32px, 5vh, 52px) auto 0; }
.rn-compare {
  margin: 0; overflow: hidden; border-radius: 20px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 60px 110px -60px rgba(var(--shadow-tint), 0.6);
}
.rn-compare__bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); }
/* 양쪽 이름표: 버튼처럼 보이지 않게 배경·테두리 없는 글자만 */
.rn-compare__side { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.rn-compare__side--before { margin-left: 4px; }
.rn-compare__side--after { margin-left: auto; color: var(--accent-text); }

.rn-compare__stage {
  --pos: 50%;
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2);
  touch-action: pan-y; /* 세로 스크롤은 브라우저에, 가로로 끌면 슬라이더가 움직인다 */
  user-select: none; -webkit-user-select: none;
}
html.js .rn-compare__stage { cursor: ew-resize; }
.rn-compare__pic, .rn-compare__img { display: block; width: 100%; height: 100%; }
.rn-compare__img { object-fit: cover; object-position: top; pointer-events: none; -webkit-user-drag: none; }
.rn-compare__stage > .rn-compare__pic { position: absolute; inset: 0; }
.rn-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.rn-compare__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--surface-hi); box-shadow: 0 0 0 1px rgba(var(--shadow-tint), 0.18);
  pointer-events: none;
}
/* 손잡이: 자바스크립트가 있을 때만 보인다(없으면 움직일 수 없으므로 반반 화면만) */
.rn-compare__handle {
  position: absolute; top: 50%; left: var(--pos); z-index: 1;
  display: none; place-items: center; grid-auto-flow: column; gap: 0;
  width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: var(--surface-hi); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -12px rgba(var(--shadow-tint), 0.55);
  cursor: ew-resize; touch-action: none;
}
html.js .rn-compare__handle { display: grid; }
.rn-compare__handle svg { width: 14px; height: 14px; fill: currentColor; }
.rn-compare__handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rn-compare__handle:hover svg, .rn-compare.is-dragging .rn-compare__handle svg { color: var(--accent-text); }
.rn-compare__cap { padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); text-wrap: pretty; }
.rn-compare__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.rn-compare__links .btn--ghost { background: var(--surface-hi); }
.rn-compare__links .btn--ghost:hover { background: var(--surface); }

/* 판은 비교 화면 뒤에서 시작해 화면 아래 절반이 판 위에 걸친다 */
.rn-sheet { margin-top: calc(-1 * clamp(120px, 16vw, 220px)); padding-top: clamp(120px, 16vw, 220px); }

/* ---------- 2. 바뀌는 것 / 그대로 두는 것 ---------- */
.rn-what { padding-top: clamp(56px, 6vw, 96px); }
.rn-what .lead { max-width: 52ch; }
.rn-what__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); margin-top: 48px; }
.rn-what__h { margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 19px; font-weight: 720; letter-spacing: -0.02em; }
.rn-what__col--keep .rn-what__h { border-color: var(--accent); color: var(--accent-text); }
.rn-what__list { list-style: none; margin: 0; padding: 0; }
.rn-what__list li { display: grid; gap: 4px; padding: 18px 0; }
.rn-what__list li + li { border-top: 1px solid var(--line); }
.rn-what__list strong { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.rn-what__list span { font-size: 15px; color: var(--ink-2); text-wrap: pretty; }

/* ---------- 3. 진행 과정: style.css .steps 그대로 ---------- */
.rn-process { padding-top: clamp(40px, 5vw, 72px); }

/* ---------- 4. 상품과 가격: 상품마다 가로로 긴 한 장(왼쪽 이름·가격, 오른쪽 범위) ---------- */
.rn-price .lead { max-width: 60ch; }
.rn-tiers { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 14px; }
.rn-tier {
  display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 56px);
  padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.rn-tier__head { display: grid; align-content: start; gap: 6px; }
.rn-tier__name { margin: 0; font-size: 21px; font-weight: 740; letter-spacing: -0.025em; }
.rn-tier__price { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.rn-tier__price b {
  margin-right: 3px; font-family: var(--f-disp); font-weight: 600; color: var(--ink);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.rn-tier__days { margin: 0; font-size: 15px; font-weight: 650; color: var(--accent-text); }
.rn-tier__sum { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); max-width: 30ch; text-wrap: pretty; }
.rn-tier__cta { justify-self: start; margin-top: 14px; }
/* 위에서 아래로 흐르는 두 단(줄 높이가 달라도 칸이 어긋나지 않게 grid 대신 columns) */
.rn-tier__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; font-size: 15px; }
.rn-tier__list li { position: relative; padding-left: 18px; margin-bottom: 10px; break-inside: avoid; text-wrap: pretty; }
.rn-tier__list li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 8px; height: 2px; border-radius: 2px; background: var(--accent); }
.rn-tier__list .rn-tier__rec { column-span: all; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); }
.rn-tier__list .rn-tier__rec::before { top: calc(12px + 0.78em); background: var(--ink-3); }

.rn-extra { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); margin-top: 48px; }
.rn-extra__h { margin: 0 0 14px; font-size: 17px; font-weight: 720; letter-spacing: -0.015em; }
.rn-extra__h span { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.rn-opts { margin: 0; display: grid; }
.rn-opts > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.rn-opts dt { font-weight: 600; }
.rn-opts dt span { font-weight: 500; font-size: 13px; color: var(--ink-3); }
.rn-opts dd { margin: 0; white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rn-opts dd b { font-weight: 700; color: var(--ink); }
.rn-opts dd span { font-size: 13px; }
.rn-quote { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; font-size: 15px; color: var(--ink-2); }
.rn-quote li { padding: 12px 0; border-top: 1px solid var(--line); }

/* ---------- 5. 위험과 전제 ---------- */
.rn-risk .lead { max-width: 52ch; }
.rn-risk__list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px clamp(24px, 3vw, 44px); }
.rn-risk__list li { padding-top: 18px; border-top: 1px solid var(--line-2); }
.rn-risk__list h3 { margin: 0; font-size: 17px; font-weight: 720; letter-spacing: -0.02em; line-height: 1.4; }
.rn-risk__list p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); text-wrap: pretty; }

/* ---------- 7. 상담 폼 ---------- */
.rn-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.rn-legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 650; }
.rn-fit { color: var(--accent-text); font-weight: 600; }
.rn-fit:empty { display: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 1080px) {
  .rn-tier { grid-template-columns: minmax(0, 1fr); }
  .rn-tier__sum { max-width: 46ch; }
}
@media (max-width: 900px) {
  .rn-what__grid, .rn-extra { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rn-compare { border-radius: 16px; }
  .rn-compare__stage { aspect-ratio: 375 / 700; } /* 휴대폰 화면 한 쌍(eunjae-*-m.webp)으로 바뀐다 */
  .rn-compare__bar { height: 40px; padding: 0 12px; gap: 10px; }
  .rn-compare__bar .browser__dots { display: none; }
  .rn-compare__side--before { margin-left: 0; }
  .rn-compare__cap { padding: 10px 14px; font-size: 12px; }
  .rn-compare__handle { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .rn-tier__list { columns: 1; }
  .rn-quote { grid-template-columns: minmax(0, 1fr); }
  .rn-hero__cta .btn { flex: 1 1 auto; }
}