/*
 * 첫 화면 PART 02 "Relationship Scan" — 100+ RELATIONSHIP INDICATORS (2026-10-09 처음 · 10-10 대표님 완성 그림 기준으로 다시)
 * ------------------------------------------------------------------------------------------------
 *  relation-scan.js 가 칸에 .rs_on 을 붙였을 때만 걸린다 — 스크립트가 없으면 예전 원형 레이더 그대로(다 보임).
 *
 *  칸 높이 = 무대(.ws_box) + 붙여 두는 길이 — 값은 스크립트가 --rs-* 로 넣는다
 *  무대    = 붙기 전 칸 맨 위 · 붙은 동안 화면에 멈춤(fixed) · 다 그린 뒤 칸 맨 아래
 *            (위치는 top 으로만 — 장면 나타나기(main_longrent.js)가 이 상자에 주는 margin-bottom 이 끼어들지 않게)
 *  그림    = 완성 그림 한 장(레이더 상자) — 크기 · 자리 · 원 지름 · 글자 크기를 스크립트가 화면에 맞춰 잰다
 *            PC · 태블릿 : 가운데 하트를 6개 원이 육각으로 둘러쌈 / 휴대폰 : 세로로 긴 배치 — 보이는 높이에 다 들어가게 맞춤(134 · 작아지면 .rs_tight)
 *  장면    = 그림 안 요소의 투명도 · 크기 · 선 그리기를 스크립트가 요소에 직접 넣는다 (바뀐 것만)
 *  rs_free = 붙이지 않는 화면(가로로 눕힌 휴대폰 등 · 움직임 줄이기) — 무대는 원래 자리, 그림은 보이면 차례로(또는 처음부터 완성)
 */

.scene-3[data-rscan].rs_on:not(.rs_free) .main_txt { position: relative; height: var(--rs-total, auto); }
.scene-3[data-rscan].rs_on:not(.rs_free) .ws_box { position: absolute; left: 0; top: 0; width: 100%; z-index: 4; }
.scene-3[data-rscan].rs_on:not(.rs_free) .ws_box.rs_pin { position: fixed; top: var(--rs-top, 0px); left: var(--rs-left, 0px); width: var(--rs-width, 100%); }
.scene-3[data-rscan].rs_on:not(.rs_free) .ws_box.rs_after { top: var(--rs-after, 0px); }

/*
 * 휴대폰 — 무대 아래 100px(원래 .ws_box 의 아래 여백)은 어둡게 덮는 막(.overlay) 밖이라 사진이 밝게 남아,
 * 붙여 둔 동안 화면 아래에 밝은 띠로 보였다 → 그 여백을 .hero 안으로 옮겨 막이 덮게 (높이는 그대로).
 */
@media (max-width: 900px) {
    .scene-3[data-rscan].rs_on:not(.rs_free) .ws_box { padding-bottom: 0; }
    .scene-3[data-rscan].rs_on:not(.rs_free) .hero { padding-bottom: 200px; }
}

/* 그림 상자 (레이더) — 크기 · 자리는 스크립트가 */
@media (min-width: 901px) {
    .scene-3[data-rscan].rs_on .radar {
        left: var(--rs-rl, auto); top: var(--rs-rt, 47%); right: auto;
        width: var(--rs-rw, 70vh); height: var(--rs-rh, 70vh); aspect-ratio: auto; transform: none;
    }
}
@media (max-width: 900px) {
    .scene-3[data-rscan].rs_on .radar {
        left: auto; width: var(--rs-rw, 88vw); height: var(--rs-rh, 88vw); aspect-ratio: auto;
        margin: 25px 0 25px calc(50% - var(--rs-rw, 88vw) / 2); transform: none;
    }
}

/* 예전 원 넷 · 십자 줄은 SVG 레이더로 갈음 */
.scene-3[data-rscan].rs_on .radar .ring,
.scene-3[data-rscan].rs_on .radar .cross { display: none; }

/* 배경 — 웜톤 어두운 막 (그림이 완성될수록 조금 더 따뜻하게 · 투명도는 스크립트가) */
.scene-3[data-rscan] .rs_warm { display: none; }
.scene-3[data-rscan].rs_on .rs_warm {
    display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
    opacity: .5; will-change: opacity;
    background:
        radial-gradient(circle at var(--rs-wx, 70%) var(--rs-wy, 50%), rgba(255, 196, 104, .24) 0%, rgba(214, 150, 70, .13) 24%, rgba(120, 72, 24, .05) 46%, rgba(0, 0, 0, 0) 62%),
        linear-gradient(rgba(26, 15, 5, .42), rgba(26, 15, 5, .42));
}

/* ---------------------------------------------------------------- 가운데 100+ (원 안) */
.scene-3[data-rscan].rs_on .radar .center {
    left: var(--rs-cx, 50%); top: var(--rs-cy, 50%); width: var(--rs-cd, 25%); height: var(--rs-cd, 25%); aspect-ratio: auto;
    background: radial-gradient(circle closest-side, rgba(30, 20, 9, .92) 0%, rgba(24, 16, 7, .86) 74%, rgba(24, 16, 7, .7) 100%);
    border: 1.5px solid rgba(240, 212, 156, .86);
    box-shadow: 0 0 26px rgba(228, 186, 104, .34), inset 0 0 22px rgba(228, 186, 104, .16);
    color: #f6e2b4; opacity: 0; visibility: hidden; z-index: 6;
    will-change: transform, opacity; transition: border-color .6s;
}
.scene-3[data-rscan].rs_on .radar .center.rs_set { transition: transform .4s, border-color .6s; }
.scene-3[data-rscan].rs_on .radar .center b { font-size: var(--rs-cfb, 40px); line-height: .9; color: #fbe6b2; transition: text-shadow .6s; }
.scene-3[data-rscan].rs_on .radar .center span { font-size: var(--rs-cfs, 11px); margin-top: calc(var(--rs-cfs, 11px) * .75); letter-spacing: .1em; color: #f1e1bd; }
.scene-3[data-rscan].rs_on .radar .center small { font-size: var(--rs-cfm, 9px); margin-top: calc(var(--rs-cfm, 9px) * .8); color: #d9c495; }
.scene-3[data-rscan].rs_on .radar.rs_full .center { border-color: rgba(252, 234, 192, 1); }
.scene-3[data-rscan].rs_on .radar.rs_full .center b { text-shadow: 0 0 22px rgba(255, 214, 140, .62); }

/* 가운데 · 하트 둘레 빛 (따로 층 — 투명도만 바뀐다) */
.scene-3[data-rscan] .rs_halo { display: none; }
.scene-3[data-rscan].rs_on .rs_halo {
    display: block; position: absolute; left: var(--rs-hx, 50%); top: var(--rs-hy, 50%);
    width: var(--rs-hd, 50%); aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%); pointer-events: none; opacity: 0; will-change: transform, opacity;
    background: radial-gradient(circle closest-side, rgba(255, 210, 126, .3) 0%, rgba(244, 194, 108, .22) 40%, rgba(230, 176, 92, .1) 68%, rgba(222, 170, 90, 0) 100%);
}

/* ---------------------------------------------------------------- 01 ~ 06 큰 원 */
.scene-3[data-rscan].rs_on .radar .node {
    left: var(--rs-nx, 50%); top: var(--rs-ny, 50%); right: auto; bottom: auto;
    width: var(--rs-nd, 200px); height: var(--rs-nd, 200px);
    margin: calc(var(--rs-nd, 200px) / -2) 0 0 calc(var(--rs-nd, 200px) / -2);
    padding: 0 calc(var(--rs-nd, 200px) * .1); box-sizing: border-box; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    /* 어두운 속 — 원 테두리(SVG) 두 겹이 보이도록 가장자리 9px 는 비운다 */
    background: radial-gradient(circle closest-side, rgba(30, 21, 10, .88) 0%, rgba(24, 17, 8, .82) 70%, rgba(24, 17, 8, .62) calc(100% - 10px), rgba(24, 17, 8, 0) calc(100% - 9px));
    color: #f6ead0; opacity: 0; visibility: hidden; transition: none; will-change: transform, opacity;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .62), 0 0 calc(14px * var(--rs-hot, 0)) rgba(255, 222, 160, calc(.5 * var(--rs-hot, 0)));
}
.scene-3[data-rscan].rs_on .radar .node.rs_set { transition: transform .4s, color .4s, box-shadow .4s; }
.scene-3[data-rscan].rs_on .radar .node:after { display: none; }
.scene-3[data-rscan].rs_on .radar .node:hover,
.scene-3[data-rscan].rs_on .radar .node.active { box-shadow: 0 0 32px rgba(232, 192, 112, .34); }
.scene-3[data-rscan].rs_on .radar .node .number {
    font-size: var(--rs-fnum, 40px); line-height: 1; margin: 0 0 calc(var(--rs-fnum, 40px) * .12); color: #f2d9a0;
}
.scene-3[data-rscan].rs_on .radar .node .line {
    height: calc(var(--rs-fnum, 40px) * .34); margin: 0 auto calc(var(--rs-fnum, 40px) * .2); background: rgba(236, 200, 132, .85);
}
.scene-3[data-rscan].rs_on .radar .node .main {
    display: block; max-width: 100%; font-size: var(--rs-ftit, 20px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: #fcf2dc;
    word-break: keep-all; overflow-wrap: normal; text-wrap: balance;
}
.scene-3[data-rscan].rs_on .radar .node .sub {
    font-size: var(--rs-fsub, 13px); margin-top: calc(var(--rs-fsub, 13px) * .55); letter-spacing: 0; color: #eadcbc;
    word-break: keep-all; overflow-wrap: normal;
}
/*
 * 휴대폰 촘촘한 원 (134 · 10-11) — 화면 높이에 맞춰 원이 134px 아래로 작아졌을 때만(스크립트가 .rs_tight) :
 * 번호 · 구분선 여백을 줄이고, 긴 제목 · 설명은 두 줄로 고르게 나눠 원 안에 다 들게. 글자는 제목 11.5 · 설명 9.5px 아래로 줄이지 않는다.
 */
.scene-3[data-rscan].rs_on.rs_tight .radar .node { padding: 0 calc(var(--rs-nd, 120px) * .07); }
.scene-3[data-rscan].rs_on.rs_tight .radar .node .number { margin-bottom: calc(var(--rs-fnum, 20px) * .06); }
.scene-3[data-rscan].rs_on.rs_tight .radar .node .line { height: calc(var(--rs-fnum, 20px) * .26); margin-bottom: calc(var(--rs-fnum, 20px) * .14); }
.scene-3[data-rscan].rs_on.rs_tight .radar .node .main { line-height: 1.18; }
.scene-3[data-rscan].rs_on.rs_tight .radar .node .sub { max-width: 66%; line-height: 1.22; text-wrap: balance; margin-top: calc(var(--rs-fsub, 10px) * .4); }

/* ---------------------------------------------------------------- SVG (레이더 · 궤도 · 연결선 · 하트 · 원 테두리 · 광점) */
.scene-3[data-rscan] .rs_svg { display: none; }
.scene-3[data-rscan].rs_on .rs_svg { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.scene-3[data-rscan] .rs_ring { fill: none; stroke: rgba(228, 194, 130, .34); stroke-width: 1; }
.scene-3[data-rscan] .rs_ring_b { stroke: rgba(228, 194, 130, .2); }
.scene-3[data-rscan] .rs_orbit { fill: none; stroke: rgba(240, 208, 146, .9); stroke-width: 1.2; }
.scene-3[data-rscan] .rs_wave { fill: none; stroke: rgba(244, 218, 166, .9); stroke-width: 1.3; }
.scene-3[data-rscan] .rs_sp { fill: none; stroke: rgba(236, 204, 142, .95); stroke-width: 1.1; stroke-linecap: round; }
.scene-3[data-rscan] .rs_sp_glow { fill: none; stroke: rgba(246, 216, 158, .2); stroke-width: 7; }
.scene-3[data-rscan] .rs_tip { fill: #fff4d8; stroke: rgba(255, 228, 170, .3); stroke-width: 6; }
.scene-3[data-rscan] .rs_h_glow { fill: none; stroke: rgba(255, 204, 116, .2); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.scene-3[data-rscan] .rs_h_mid { fill: none; stroke: rgba(255, 216, 146, .44); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.scene-3[data-rscan] .rs_h_main { fill: none; stroke: #ffeab8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scene-3[data-rscan] .rs_h_in { fill: none; stroke: rgba(252, 220, 156, .82); stroke-width: 1.4; stroke-linecap: round; }
.scene-3[data-rscan] .rs_h_in2 { fill: none; stroke: rgba(246, 208, 138, .55); stroke-width: 1; stroke-linecap: round; }
.scene-3[data-rscan] .rs_h_out { fill: none; stroke: rgba(244, 204, 132, .62); stroke-width: 1.2; stroke-linecap: round; }
.scene-3[data-rscan] .rs_h_tip { fill: #fff8e4; stroke: rgba(255, 228, 166, .45); stroke-width: 10; }
.scene-3[data-rscan] .rs_nr_glow { fill: none; stroke: rgba(248, 206, 126, .2); stroke-width: 9; }
.scene-3[data-rscan] .rs_nr { fill: none; stroke: rgba(244, 214, 152, .96); stroke-width: 1.6; }
.scene-3[data-rscan] .rs_nr_in { fill: none; stroke: rgba(236, 200, 132, .55); stroke-width: .8; }
.scene-3[data-rscan] .rs_dot { fill: #fff4d6; }
.scene-3[data-rscan] .rs_dot_h { fill: rgba(255, 220, 150, .26); }

/*
 * 꽃잎 (10-10 대표님 "꽃잎도 은은하게") — ⑨ 하트가 그려질 때 하나씩 살며시 내려앉아 나타나고, 다 그린 뒤엔 아주 천천히 흔들린다.
 * 지표 원 · 가운데 원은 피해서 놓는다(글을 가리지 않게) — 자리 · 크기 · 기울기 · 진하기는 스크립트가 그림 크기에 맞춰 정한다.
 * 흔들림은 칸이 화면에 있고 꽃잎이 나온 뒤에만(.rs_on) · 움직임 줄이기 설정이면 흔들지 않는다.
 */
.scene-3[data-rscan] .rs_petals { display: none; }
.scene-3[data-rscan].rs_on .rs_petals { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.scene-3[data-rscan] .rs_petal { position: absolute; opacity: 0; will-change: transform, opacity; }
.scene-3[data-rscan] .rs_petal i {
    display: block; width: 100%; height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 56'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.4' cy='.34' r='.78'%3E%3Cstop offset='0' stop-color='%23fff3f4'/%3E%3Cstop offset='.48' stop-color='%23f8c6cd'/%3E%3Cstop offset='1' stop-color='%23e3909e'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 54C8 46 2 33 5 20 7 10 13 4 20 2c7 2 13 8 15 18 3 13-3 26-15 34z' fill='url(%23a)'/%3E%3Cpath d='M20 8c1 14 1 28-1 42' fill='none' stroke='%23fff' stroke-opacity='.38' stroke-width='.9'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 3px rgba(255, 214, 196, .35));
    animation: rsPetal var(--rs-pd, 9s) ease-in-out var(--rs-pdl, 0s) infinite alternate;
    animation-play-state: paused;
}
.scene-3[data-rscan] .rs_petals.rs_on .rs_petal i { animation-play-state: running; }
@keyframes rsPetal {
    0%   { transform: translate3d(0, -4px, 0) rotate(-7deg); }
    100% { transform: translate3d(3px, 5px, 0) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .scene-3[data-rscan] .rs_petal i { animation: none; }
}

/*
 * 오른쪽 아래 둥근 단추(N 달력 · TALK — 사이트 전체) — 그림이 화면에 붙어 있는 동안 지표 원을 가리는 화면(키 작은 휴대폰)에서만 반쯤 투명하게
 * (10-10 대표님 고름). 누르기는 그대로 · 손가락을 대면 다시 또렷하게 · 칸을 지나면 원래대로. 켜고 끄는 것은 스크립트(.rs_fab_dim — 이 첫 화면에서만).
 */
.rg_fixed { transition: opacity .45s ease; }
.rg_fixed.rs_fab_dim { opacity: .4; }
.rg_fixed.rs_fab_dim:hover,
.rg_fixed.rs_fab_dim:focus-within { opacity: 1; }

@media (max-width: 900px) {
    .scene-3[data-rscan] .rs_sp_glow { stroke-width: 5; }
    .scene-3[data-rscan] .rs_tip { stroke-width: 4; }
    .scene-3[data-rscan] .rs_wave { stroke-width: 1.1; }
    .scene-3[data-rscan] .rs_h_glow { stroke-width: 16; }
    .scene-3[data-rscan] .rs_h_mid { stroke-width: 5; }
    .scene-3[data-rscan] .rs_h_main { stroke-width: 2.4; }
    .scene-3[data-rscan] .rs_h_tip { stroke-width: 7; }
    .scene-3[data-rscan] .rs_nr_glow { stroke-width: 7; }
    .scene-3[data-rscan] .rs_nr { stroke-width: 1.3; }
}