/* ══════════════════════════════════════════════════════════════
   CmsHom — 리뉴얼 특별제안 (/free-create/renewal)
   프리픽스 .rn- · 화이트 에디토리얼 + 딥잉크 리듬
   토큰은 layouts/cmshom-page.blade.php 제공(--accent/--accent-2/--accent-3 …)
   2026-08-01 v1
   ══════════════════════════════════════════════════════════════ */

.rn-page { color: var(--body); }
.rn-shell { max-width: 1160px; margin: 0 auto; padding: 0 40px; }

/* ── 공통 타이포 ── */
.rn-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent-2); margin: 0 0 16px;
}
.rn-kicker span {
    width: 22px; height: 1px; background: currentColor; display: inline-block;
}
.rn-page h2 {
    font-size: clamp(27px, 3.2vw, 38px); line-height: 1.32; letter-spacing: -.02em;
    color: var(--ink); margin: 0 0 16px; font-weight: 700; word-break: keep-all;
}
.rn-lead {
    font-size: 17px; line-height: 1.78; color: var(--body); margin: 0; max-width: 720px;
    word-break: keep-all;
}
.rn-section { padding: 104px 0; }
.rn-section--band { background: var(--band); }
.rn-section--ink { background: #17161a; }
.rn-section--ink h2, .rn-section--ink .rn-lead b { color: #fff; }
.rn-section--ink .rn-lead { color: rgba(255,255,255,.68); }
.rn-section--ink .rn-kicker { color: #3FBFB3; }
.rn-head { margin-bottom: 48px; }

/* 스크롤 리빌 */
.rn-rise { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rn-rise.rn-in { opacity: 1; transform: none; }
.rn-d1 { transition-delay: .08s; } .rn-d2 { transition-delay: .16s; } .rn-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .rn-rise { opacity: 1; transform: none; transition: none; }
}

/* ── 버튼 ── */
.rn-btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px;
    border-radius: var(--r); font-size: 16px; font-weight: 600; text-decoration: none;
    border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.rn-btn-primary { background: var(--accent); color: var(--on-accent); }
.rn-btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-2px); }
.rn-btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.rn-btn-quiet:hover { background: var(--surface-alt); color: var(--ink); transform: translateY(-2px); }
.rn-section--ink .rn-btn-quiet { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.28); }
.rn-section--ink .rn-btn-quiet:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ══ § 1  히어로 ══ */
.rn-hero {
    padding: 92px 0 96px;
    background: linear-gradient(180deg, var(--canvas), var(--canvas-alt));
    border-bottom: 1px solid var(--line);
}
.rn-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.rn-hero h1 {
    font-size: clamp(31px, 4.1vw, 50px); line-height: 1.24; letter-spacing: -.03em;
    color: var(--ink); font-weight: 700; margin: 0 0 22px; word-break: keep-all;
}
.rn-hero h1 b { color: var(--accent); font-weight: 700; }
.rn-hero-lead { font-size: 17.5px; line-height: 1.8; color: var(--body); margin: 0 0 26px; word-break: keep-all; }
.rn-price-chip {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 20px; border-radius: 999px; margin-bottom: 26px;
    background: var(--accent-soft); border: 1px solid rgba(232,69,26,.22);
    color: var(--accent-hover); font-size: 15px; font-weight: 700;
}
.rn-price-chip i { font-size: 16px; }
.rn-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.rn-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.rn-trust li { display: flex; gap: 10px; font-size: 15px; color: var(--body); line-height: 1.6; word-break: keep-all; }
.rn-trust i { color: var(--accent-2); font-size: 17px; flex: none; margin-top: 1px; }
.rn-hero-figure { margin: 0; }

/* 전/후 드래그 비교 슬라이더 — 같은 크기 이미지 2장을 겹치고 clip-path 로 가른다 */
.rn-ba {
    --pos: 50%;                                  /* JS 없이 열려도 반반 보인다 */
    border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #1B2126;
}
.rn-ba-bar { position: relative; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.rn-ba-bar i { width: 8px; height: 8px; border-radius: 50%; background: #40474F; flex: none; }
.rn-ba-tag {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 3px 11px; border-radius: 999px;
}
.rn-ba-tag.is-b { left: 25%; background: rgba(255,255,255,.14); color: #C3CBD2; }
.rn-ba-tag.is-a { left: 75%; background: var(--accent); color: #fff; }
.rn-ba-stage { position: relative; aspect-ratio: 1200 / 1267; background: #fff; }
/* ⚠ 절대배치라 height:auto 를 쓰면 안 된다(두 장이 정확히 겹쳐야 와이프가 어긋나지 않는다) */
.rn-hero-figure .rn-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; border-radius: 0; box-shadow: none; }
.rn-ba-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.rn-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--accent); pointer-events: none; }
.rn-ba-knob {
    position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.rn-ba-knob::before, .rn-ba-knob::after { content: ''; position: absolute; top: 50%; margin-top: -5px; width: 0; height: 0; border: 5px solid transparent; }
.rn-ba-knob::before { left: 7px;  border-right-color: #fff; }
.rn-ba-knob::after  { right: 7px; border-left-color: #fff; }
/* 투명 range 를 무대 전체에 덮는다 = 클릭 이동·드래그·터치·키보드가 전부 따라온다 */
.rn-ba-range {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
    -webkit-appearance: none; appearance: none; background: transparent; opacity: 0;
    cursor: ew-resize; touch-action: pan-y;      /* 세로 스크롤은 페이지에 양보 */
}
.rn-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100vh; cursor: ew-resize; }
.rn-ba-range::-moz-range-thumb { width: 46px; height: 100vh; border: 0; background: transparent; cursor: ew-resize; }
.rn-ba-range:focus-visible ~ .rn-ba-line .rn-ba-knob { box-shadow: 0 0 0 4px rgba(232,69,26,.38), 0 6px 18px rgba(0,0,0,.3); }
.rn-hero-figcap {
    display: flex; justify-content: space-between; gap: 12px; margin-top: 12px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--dim); text-transform: uppercase;
}
.rn-hero-figcap b { color: var(--accent); }

/* ══ § 2  리뉴얼이 어려운 3가지 ══ */
.rn-barrier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.rn-barrier-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 30px 26px 28px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rn-barrier-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.rn-barrier-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; margin-bottom: 16px;
    background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700;
}
.rn-barrier-card h3 { font-size: 19px; line-height: 1.45; color: var(--ink); margin: 0 0 12px; font-weight: 700; word-break: keep-all; }
.rn-barrier-card p { font-size: 14.8px; line-height: 1.78; color: var(--body); margin: 0; word-break: keep-all; }
.rn-barrier-card p b { color: var(--accent-hover); font-weight: 700; }

/* 도표① 포기 지점 퍼널 */
.rn-funnel { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 0; max-width: 780px; }
.rn-funnel-row { display: grid; grid-template-columns: 178px 1fr; gap: 18px; align-items: center; padding: 9px 0; }
.rn-funnel-label { font-size: 14.5px; font-weight: 700; color: var(--ink); text-align: right; word-break: keep-all; }
.rn-funnel-bar { position: relative; height: 44px; display: flex; align-items: center; }
.rn-funnel-fill {
    height: 100%; border-radius: 3px; display: flex; align-items: center; justify-content: flex-end;
    padding-right: 14px; color: #fff; font-size: 13px; font-weight: 700;
    background: linear-gradient(90deg, var(--accent-2), #14938a);
    width: 0; transition: width 1.1s cubic-bezier(.16,1,.3,1);
}
.rn-in .rn-funnel-fill, .rn-funnel.rn-in .rn-funnel-fill { width: var(--w); }
.rn-funnel-row:last-child .rn-funnel-fill { background: linear-gradient(90deg, var(--accent), #f2743f); }
/* ⛔ grid-column:2 를 쓰면 1열 그리드에 암시적 2열이 생겨 막대 트랙이 통째로 찌그러진다.
   라벨 열(178px)+gap(18px) 만큼 들여쓰기로 정렬한다. */
.rn-funnel-drop {
    font-size: 13.2px; color: var(--muted); padding: 2px 0 6px 200px;
    display: flex; align-items: center; gap: 7px;
}
.rn-funnel-drop i { color: var(--dim); font-size: 13px; }
.rn-funnel-drop.is-key { color: var(--accent-hover); font-weight: 700; }
.rn-funnel-drop.is-key i { color: var(--accent); }
.rn-funnel-note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ══ § 3  자가진단 ══ */
.rn-check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 40px; }
.rn-check-item {
    display: flex; align-items: flex-start; gap: 13px; padding: 17px 20px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    font-size: 15.5px; line-height: 1.55; color: var(--ink); text-align: left; width: 100%;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
    word-break: keep-all; font-family: inherit;
}
.rn-check-item:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.rn-check-box {
    flex: none; width: 22px; height: 22px; border-radius: 5px; margin-top: 1px;
    border: 1.5px solid var(--line-strong); background: var(--canvas);
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: 13px; transition: all .18s ease;
}
.rn-check-item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.rn-check-item[aria-pressed="true"] .rn-check-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.rn-check-result {
    margin-top: 30px; padding: 30px 32px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); text-align: center;
}
.rn-check-count { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.rn-check-count b { color: var(--accent); font-size: 22px; }
.rn-check-verdict { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 8px; line-height: 1.5; word-break: keep-all; }
.rn-check-desc { font-size: 15px; line-height: 1.7; color: var(--body); margin: 0 0 20px; word-break: keep-all; }

/* ══ § 4  고객 1 : 우리 9  (딥잉크 · 대표 그래픽) ══ */
.rn-split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 26px; margin-top: 48px; align-items: stretch; }
.rn-split-you {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--r-lg); padding: 40px 34px;
    display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.rn-split-tag {
    display: inline-block; align-self: center; padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
    background: rgba(232,69,26,.16); border: 1px solid rgba(232,69,26,.36);
    color: #FF8A5C; font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
}
.rn-split-you .rn-split-icon { font-size: 40px; color: #FF8A5C; margin-bottom: 18px; }
.rn-split-you h3 { font-size: 23px; line-height: 1.45; color: #fff; margin: 0 0 14px; font-weight: 700; word-break: keep-all; }
.rn-split-you p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.62); margin: 0; word-break: keep-all; }
.rn-split-you .rn-split-quote {
    margin-top: 22px; padding: 15px 18px; border-radius: var(--r);
    background: rgba(255,255,255,.06); border-left: 2px solid var(--accent);
    font-size: 14.2px; line-height: 1.7; color: rgba(255,255,255,.82); text-align: left; word-break: keep-all;
}
.rn-split-us {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-lg); padding: 32px 30px;
}
.rn-split-us > .rn-split-tag { background: rgba(15,118,110,.24); border-color: rgba(63,191,179,.4); color: #6FD8CD; }
.rn-split-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.rn-split-list li {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r);
    padding: 15px 14px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); word-break: keep-all;
}
.rn-split-list li i { display: block; font-size: 18px; color: #6FD8CD; margin-bottom: 9px; }
.rn-split-eq {
    margin-top: 30px; padding: 22px 26px; border-radius: var(--r-lg); text-align: center;
    background: rgba(232,69,26,.1); border: 1px solid rgba(232,69,26,.3);
    color: #fff; font-size: clamp(15px, 1.8vw, 19px); font-weight: 700; line-height: 1.7; word-break: keep-all;
}
.rn-split-eq em { font-style: normal; color: #FF8A5C; }
.rn-promise { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
.rn-promise li {
    display: flex; gap: 11px; padding: 16px 18px; border-radius: var(--r);
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
    font-size: 14.6px; line-height: 1.65; color: rgba(255,255,255,.84); word-break: keep-all;
}
.rn-promise li i { color: #6FD8CD; font-size: 16px; flex: none; margin-top: 2px; }
.rn-promise { list-style: none; padding: 0; }

/* ══ § 5  데이터 이전 ══ */
.rn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 44px 0 20px; }
.rn-stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 28px 20px; text-align: center;
}
.rn-stat-num { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; color: var(--accent); line-height: 1.1; }
.rn-stat-num small { font-size: .5em; font-weight: 700; margin-left: 2px; }
.rn-stat-label { font-size: 13.6px; color: var(--body); margin-top: 10px; line-height: 1.5; word-break: keep-all; }
.rn-stat-note { font-size: 12.6px; color: var(--muted); margin: 0 0 56px; }

.rn-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.rn-item {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px 16px; text-align: center; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rn-item:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.rn-item i { font-size: 24px; color: var(--accent-2); }
.rn-item h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 11px 0 6px; word-break: keep-all; }
.rn-item p { font-size: 12.8px; line-height: 1.6; color: var(--muted); margin: 0; word-break: keep-all; }
.rn-item.is-key { border-color: rgba(232,69,26,.4); background: linear-gradient(180deg, #fff, var(--accent-soft)); }
.rn-item.is-key i { color: var(--accent); }

.rn-mig-visual { margin: 56px 0 0; }
.rn-mig-visual img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid var(--line); }

.rn-steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; counter-reset: rnstep; }
.rn-step4 { position: relative; padding: 26px 22px; border-radius: var(--r-lg); background: var(--band); border: 1px solid var(--line); }
.rn-step4::before {
    counter-increment: rnstep; content: counter(rnstep);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; margin-bottom: 14px;
    background: var(--ink); color: #fff; font-size: 13px; font-weight: 700;
}
.rn-step4 h4 { font-size: 16.5px; color: var(--ink); margin: 0 0 8px; font-weight: 700; word-break: keep-all; }
.rn-step4 p { font-size: 14px; line-height: 1.7; color: var(--body); margin: 0; word-break: keep-all; }
.rn-gate {
    margin-top: 26px; padding: 20px 26px; border-radius: var(--r-lg); text-align: center;
    background: var(--ink); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.6; word-break: keep-all;
}
.rn-gate i { color: #6FD8CD; margin-right: 8px; }

/* ══ § 6  AI 시스템 (딥잉크) ══ */
.rn-ai-visual { margin: 0 0 48px; }
.rn-ai-visual img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.14); }
.rn-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rn-ai-card {
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg);
    padding: 28px 24px; transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.rn-ai-card:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.24); transform: translateY(-3px); }
.rn-ai-card i { font-size: 24px; color: #6FD8CD; }
.rn-ai-card h3 { font-size: 18px; color: #fff; margin: 14px 0 10px; font-weight: 700; word-break: keep-all; }
.rn-ai-card p { font-size: 14.6px; line-height: 1.75; color: rgba(255,255,255,.66); margin: 0; word-break: keep-all; }
.rn-ai-card p b { color: #fff; font-weight: 600; }

/* 도표⑤ 타임라인 */
.rn-tl { margin-top: 48px; display: grid; gap: 16px; }
.rn-tl-row { display: grid; grid-template-columns: 116px 1fr 108px; gap: 16px; align-items: center; }
.rn-tl-name { font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,.8); text-align: right; }
.rn-tl-track { display: flex; gap: 5px; height: 40px; }
.rn-tl-seg {
    border-radius: 3px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16);
}
.rn-tl-row.is-ai .rn-tl-seg { background: linear-gradient(90deg, rgba(232,69,26,.85), rgba(232,69,26,.55)); border-color: rgba(232,69,26,.5); }
.rn-tl-row.is-ai .rn-tl-seg.is-check { background: rgba(15,118,110,.7); border-color: rgba(63,191,179,.5); }
.rn-tl-total { font-size: 15px; font-weight: 700; color: #fff; }
.rn-tl-row.is-ai .rn-tl-total { color: #FF8A5C; }
.rn-tl-note { margin-top: 16px; font-size: 12.8px; color: rgba(255,255,255,.44); }

/* ══ § 7  비용 ══ */
.rn-bars { margin-top: 44px; display: grid; gap: 20px; }
.rn-bar-row { display: grid; grid-template-columns: 232px 1fr; gap: 20px; align-items: center; }
.rn-bar-name { font-size: 14.6px; color: var(--ink); font-weight: 600; text-align: right; line-height: 1.45; word-break: keep-all; }
.rn-bar-name small { display: block; font-size: 12.4px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.rn-bar-track { position: relative; height: 42px; background: var(--band); border-radius: 4px; overflow: hidden; }
.rn-bar-fill {
    height: 100%; width: 0; border-radius: 4px; display: flex; align-items: center; justify-content: flex-end;
    padding-right: 15px; font-size: 13.6px; font-weight: 700; color: var(--ink);
    background: linear-gradient(90deg, #DCD9D2, #C9C6BF);
    transition: width 1.2s cubic-bezier(.16,1,.3,1);
}
.rn-bars.rn-in .rn-bar-fill { width: var(--w); }
.rn-bar-row.is-ours .rn-bar-fill {
    background: linear-gradient(90deg, var(--accent), #F2743F); color: #fff;
    justify-content: flex-start; padding: 0 0 0 15px; min-width: 168px;
}
.rn-bar-caption { margin-top: 20px; font-size: 12.8px; color: var(--muted); line-height: 1.7; }

.rn-incl { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; margin-top: 56px; }
.rn-incl-col { border-radius: var(--r-lg); padding: 30px 28px; border: 1px solid var(--line); background: var(--surface); }
.rn-incl-col.is-in { border-color: rgba(15,118,110,.3); background: linear-gradient(180deg, #fff, var(--accent-2-soft)); }
.rn-incl-col h3 { font-size: 18px; color: var(--ink); margin: 0 0 18px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.rn-incl-col.is-in h3 i { color: var(--accent-2); }
.rn-incl-col.is-out h3 i { color: var(--accent-3); }
.rn-incl-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.rn-incl-col li { display: flex; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--body); word-break: keep-all; }
.rn-incl-col li i { font-size: 15px; flex: none; margin-top: 3px; }
.rn-incl-col.is-in li i { color: var(--accent-2); }
.rn-incl-col.is-out li i { color: var(--accent-3); }
.rn-incl-col li b { color: var(--ink); font-weight: 700; }
.rn-incl-note { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); }
.rn-noextra {
    margin-top: 26px; padding: 24px 28px; border-radius: var(--r-lg); text-align: center;
    background: var(--ink); color: #fff; font-size: clamp(15px, 1.8vw, 18px); font-weight: 700; line-height: 1.65; word-break: keep-all;
}
.rn-noextra em { font-style: normal; color: #FF8A5C; }

/* ══ § 8  프로세스 ══ */
.rn-proc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 44px; }
.rn-proc-step { position: relative; padding: 26px 20px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.rn-proc-no { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--dim); }
.rn-proc-step h4 { font-size: 16.5px; color: var(--ink); margin: 8px 0 9px; font-weight: 700; word-break: keep-all; }
.rn-proc-step p { font-size: 13.8px; line-height: 1.68; color: var(--body); margin: 0; word-break: keep-all; }
.rn-proc-badge {
    display: inline-block; margin-top: 14px; padding: 4px 10px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-hover); font-size: 11.6px; font-weight: 700;
}
.rn-proc-step.is-us { background: var(--band); }
.rn-proc-step.is-us .rn-proc-badge { background: var(--surface); color: var(--muted); }

/* ══ § 9  FAQ ══ */
.rn-faq { max-width: 880px; margin: 44px auto 0; display: grid; gap: 12px; }
.rn-faq details {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 0 24px; transition: border-color .2s ease;
}
.rn-faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow); }
.rn-faq summary {
    list-style: none; cursor: pointer; padding: 21px 0; font-size: 16.5px; font-weight: 700; color: var(--ink);
    display: flex; align-items: flex-start; gap: 12px; word-break: keep-all;
}
.rn-faq summary::-webkit-details-marker { display: none; }
.rn-faq summary::before { content: 'Q'; color: var(--accent); font-weight: 700; flex: none; }
.rn-faq summary::after {
    content: '\F282'; font-family: 'bootstrap-icons'; margin-left: auto; flex: none;
    color: var(--dim); font-size: 14px; font-weight: 400; transition: transform .2s ease;
}
.rn-faq details[open] summary::after { transform: rotate(180deg); }
.rn-faq-a {
    padding: 0 0 22px 24px; font-size: 15.2px; line-height: 1.82; color: var(--body); word-break: keep-all;
    border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 4px;
}
.rn-faq-a b { color: var(--ink); }

/* ══ § 10  신청폼 ══ */
.rn-apply { padding: 104px 0; background: linear-gradient(180deg, var(--canvas-alt), var(--band)); border-top: 1px solid var(--line); }
.rn-apply-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 44px; align-items: start; }
.rn-apply-intro h2 { margin-bottom: 18px; }
.rn-apply-intro p { font-size: 16px; line-height: 1.78; color: var(--body); margin: 0 0 24px; word-break: keep-all; }
.rn-apply-intro ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.rn-apply-intro li { display: flex; gap: 11px; font-size: 15.2px; line-height: 1.6; color: var(--body); word-break: keep-all; }
.rn-apply-intro li i { color: var(--accent-2); font-size: 16px; flex: none; margin-top: 2px; }
.rn-apply-note {
    padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface);
    border: 1px solid var(--line); border-left: 3px solid var(--accent-3);
}
.rn-apply-note span { display: block; font-size: 12.4px; font-weight: 700; letter-spacing: .05em; color: var(--accent-3); margin-bottom: 6px; }
.rn-apply-note p { font-size: 14.2px; line-height: 1.7; color: var(--body); margin: 0; word-break: keep-all; }

.rn-form {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 32px 32px 30px; box-shadow: var(--shadow);
}
.rn-form-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rn-form-head span { display: block; font-size: 11.8px; font-weight: 700; letter-spacing: .1em; color: var(--accent-2); text-transform: uppercase; }
.rn-form-head strong { display: block; font-size: 19px; color: var(--ink); margin-top: 5px; }
.rn-form-head i { font-size: 20px; color: var(--dim); }
.rn-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rn-frow { display: grid; gap: 7px; margin-bottom: 14px; }
.rn-frow label, .rn-flabel { font-size: 13.8px; font-weight: 600; color: var(--ink); }
.rn-req { color: var(--accent); margin-left: 2px; }
.rn-hint { color: var(--muted); font-weight: 400; font-size: 12.6px; margin-left: 4px; }
.rn-frow input[type=text], .rn-frow input[type=email], .rn-frow input[type=tel], .rn-frow textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
    font-size: 15px; font-family: inherit; color: var(--ink); background: var(--canvas);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.rn-frow input:focus, .rn-frow textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.rn-frow textarea { resize: vertical; min-height: 92px; }
.rn-radio-row { display: flex; flex-wrap: wrap; gap: 9px; }
.rn-radio-col { display: grid; gap: 9px; }
.rn-radio {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas);
    font-size: 14.2px; color: var(--body); transition: all .18s ease;
}
.rn-radio:hover { border-color: var(--line-strong); }
.rn-radio input { accent-color: var(--accent); margin: 0; }
.rn-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; }
.rn-form-actions { margin-top: 22px; }
.rn-form-actions button {
    width: 100%; padding: 16px; border: none; border-radius: var(--r); cursor: pointer;
    background: var(--accent); color: #fff; font-size: 16.5px; font-weight: 700; font-family: inherit;
    transition: background .18s ease, transform .18s ease;
}
.rn-form-actions button:hover { background: var(--accent-hover); transform: translateY(-2px); }
.rn-form-actions button[disabled] { opacity: .6; cursor: default; transform: none; }
.rn-form-foot { margin-top: 14px; font-size: 12.8px; line-height: 1.65; color: var(--muted); text-align: center; word-break: keep-all; }
.rn-fmsg { margin-top: 14px; font-size: 14.4px; line-height: 1.6; text-align: center; }
.rn-fmsg.is-err { color: var(--accent-hover); }
.rn-ferr { font-size: 12.6px; color: var(--accent-hover); min-height: 0; }

/* 접수 완료 패널 */
.rn-done { text-align: center; padding: 8px 0 0; }
.rn-done-icon {
    width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
    background: var(--accent-2-soft); color: var(--accent-2);
    display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.rn-done h3 { font-size: 22px; color: var(--ink); margin: 0 0 12px; font-weight: 700; }
.rn-done p { font-size: 15.4px; line-height: 1.75; color: var(--body); margin: 0 0 22px; word-break: keep-all; }
.rn-done-list { text-align: left; display: grid; gap: 12px; margin: 0 0 22px; padding: 20px; list-style: none; background: var(--band); border-radius: var(--r-lg); }
.rn-done-list li { font-size: 14.2px; line-height: 1.7; color: var(--body); word-break: keep-all; }
.rn-done-list b { display: block; color: var(--ink); margin-bottom: 3px; }

/* 모바일 고정 CTA */
.rn-mobile-cta {
    display: none; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 900;
    padding: 15px; border-radius: var(--r); text-align: center; text-decoration: none;
    background: var(--accent); color: #fff; font-size: 15.5px; font-weight: 700;
    box-shadow: 0 10px 28px -8px rgba(232,69,26,.5);
}

/* ══════════ 반응형 ══════════ */
@media (max-width: 1024px) {
    .rn-shell { padding: 0 28px; }
    .rn-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .rn-split { grid-template-columns: 1fr; }
    .rn-apply-grid { grid-template-columns: 1fr; gap: 34px; }
    .rn-items { grid-template-columns: repeat(3, 1fr); }
    .rn-proc { grid-template-columns: repeat(2, 1fr); }
    .rn-incl { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .rn-section { padding: 76px 0; }
    .rn-hero { padding: 64px 0 72px; }
    .rn-apply { padding: 76px 0 96px; }
    .rn-barrier-grid { grid-template-columns: 1fr; }
    .rn-check-grid { grid-template-columns: 1fr; }
    .rn-stats { grid-template-columns: repeat(2, 1fr); }
    .rn-steps4 { grid-template-columns: repeat(2, 1fr); }
    .rn-ai-grid { grid-template-columns: 1fr; }
    .rn-split-list { grid-template-columns: repeat(2, 1fr); }
    .rn-promise { grid-template-columns: 1fr; }
    .rn-funnel-row { grid-template-columns: 128px 1fr; gap: 12px; }
    .rn-funnel-label { font-size: 13px; }
    .rn-funnel-drop { padding-left: 140px; }
    .rn-bar-row { grid-template-columns: 1fr; gap: 8px; }
    .rn-bar-name { text-align: left; }
    .rn-tl-row { grid-template-columns: 1fr; gap: 8px; }
    .rn-tl-name { text-align: left; }
    .rn-tl-total { text-align: right; }
    .rn-mobile-cta { display: block; }
    .rn-page { padding-bottom: 76px; }
}
@media (max-width: 560px) {
    .rn-shell { padding: 0 18px; }
    .rn-items { grid-template-columns: repeat(2, 1fr); }
    .rn-proc { grid-template-columns: 1fr; }
    .rn-fgrid { grid-template-columns: 1fr; }
    .rn-form { padding: 24px 20px 22px; }
    .rn-hero-actions .rn-btn { width: 100%; justify-content: center; }
    .rn-split-list { grid-template-columns: 1fr; }
    .rn-funnel-row { grid-template-columns: 1fr; gap: 4px; }
    .rn-funnel-label { text-align: left; }
    .rn-funnel-drop { padding-left: 2px; }
}