/* 홈페이지 리뉴얼(2026-10-23) — 절 틀·제목·실적 표는 design-b(home.css) 그대로 쓰고, 여기에는 그림 자리와 문제 줄만 둔다.
   설계: hivelink/docs/design/2026-10-23_홈페이지_재구성.md 14절 · 색은 body.hp-b 토큰만 */

/* 문제 한 줄 — 절 제목 위 */
.rn-q { margin: 0 0 12px; padding-left: 12px; border-left: 2.5px solid var(--pink); font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* 첫 화면 — 문제 줄이 바뀐다 */
.rn-prob { min-height: 15em; }
.rn-prob .hero-title, .rn-ans { transition: opacity .45s; }
.rn-prob.is-swap .hero-title, .rn-prob.is-swap .rn-ans { opacity: 0; }
.rn-ans { margin-bottom: 18px; color: var(--ink); font-weight: 600; }
.rn-ans .mark { font-style: normal; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.rn-dots { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 24px; }
.rn-dots button { width: 30px; height: 6px; border: 0; background: var(--grid); cursor: pointer; padding: 0; }
.rn-dots button.is-on { background: var(--pink); }

/* 함께 할 수 있는 일 — 솔루션 카드를 넷 한 줄로 */
.rn-svc { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 방식: 고치기 전 / 고친 뒤 */
.rn-ba { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; }
.rn-ba figure { margin: 0; background: var(--sheet); border: 1.5px solid var(--ink); display: flex; flex-direction: column; }
.rn-ba img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; filter: saturate(.8); }
.rn-ba figcaption { font-size: 14px; padding: 12px 16px; color: var(--ink-2); border-top: 1px solid var(--grid); }
.rn-ba-before figcaption { color: var(--pink-ink); }
.rn-cost { width: 100%; height: auto; padding: 12px; }
.rn-cost text { fill: var(--ink); font-family: var(--f-sans); }
.rn-curve { fill: none; stroke: var(--pink); stroke-width: 2.5; stroke-dasharray: 6 5; }
.rn-curve-t { fill: var(--pink-ink) !important; }
.rn-bar { fill: var(--grid); }
.rn-dev { fill: #D7263D; opacity: 0; animation: rnDev 10s infinite; }
.rn-flag line { stroke: #D7263D; stroke-width: 1.5; }
.rn-flag text { fill: #B3132B !important; font-weight: 600; }
.rn-flag { opacity: 0; animation: rnFlag 10s infinite; }
.rn-fixed text { fill: #1F7A4D !important; font-weight: 600; }
.rn-fixed { opacity: 0; animation: rnFixed 10s infinite; }
.rn-mark { fill: var(--pink); stroke: var(--sheet); stroke-width: 3; animation: rnMark 10s linear infinite; }
.rn-axis { fill: var(--ink-2) !important; }
@keyframes rnMark { 0% { transform: translateX(0); } 80%,100% { transform: translateX(570px); } }
@keyframes rnDev { 0%,22% { opacity: 0; fill: #D7263D; } 26%,40% { opacity: 1; fill: #D7263D; } 46%,100% { opacity: 1; fill: #2E9E66; } }
@keyframes rnFlag { 0%,24% { opacity: 0; } 28%,42% { opacity: 1; } 46%,100% { opacity: 0; } }
@keyframes rnFixed { 0%,44% { opacity: 0; } 48%,92% { opacity: 1; } 100% { opacity: 0; } }
.rn-plan-list { list-style: none; margin: 0; padding: 14px 16px 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: p; }
.rn-plan-list li { counter-increment: p; font-size: 14px; border: 1.5px solid var(--ink); padding: 5px 10px; background: var(--sheet); }
.rn-plan-list li::before { content: counter(p) " "; color: var(--pink-ink); font-weight: 700; }

/* 데이터: 네 단계 */
.rn-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rn-steps li { background: var(--sheet); border: 1.5px solid var(--grid); padding: 14px; opacity: .6; transition: opacity .4s, border-color .4s; }
.rn-steps li.is-on { opacity: 1; border-color: var(--ink); box-shadow: 6px 6px 0 var(--pink-wash); }
.rn-steps button { background: none; border: 0; color: var(--ink); font: 600 15px var(--f-sans); padding: 0 0 10px; cursor: pointer; text-align: left; }
.rn-steps button b { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--pink-ink); color: #fff; margin-right: 6px; font-size: 12px; }
.rn-steps svg { width: 100%; height: auto; display: block; }
.rn-steps svg text { fill: var(--ink); font-family: var(--f-sans); }
.o-doc rect, .o-tbl rect { fill: var(--paper); stroke: var(--wire); }
.o-tbl path { stroke: var(--wire); }
.o-node circle { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.o-hub rect { fill: var(--pink-wash); stroke: var(--pink); stroke-width: 1.5; }
.o-edge, .o-merge { stroke: var(--wire); stroke-width: 1.5; fill: none; }
.rn-steps li.is-on .o-edge, .rn-steps li.is-on .o-merge { stroke: var(--pink); stroke-dasharray: 5 4; animation: rnFlow 1.2s linear infinite; }
.o-back { fill: none; stroke: var(--pink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.o-who { fill: var(--pink-ink) !important; font-weight: 700; }
.o-note { fill: var(--ink-2) !important; }
@keyframes rnFlow { to { stroke-dashoffset: -18; } }
.rn-li-cap { display: none; font-size: 15px; line-height: 1.55; margin: 0 0 10px; color: var(--ink-2); }
.rn-cap { font-size: 18px; line-height: 1.6; margin: 24px 0 0; min-height: 3.2em; max-width: 46em; color: var(--ink); }

/* 화면 카드 */
.rn-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rn-card { display: flex; flex-direction: column; text-align: left; background: var(--sheet); border: 1.5px solid var(--ink); padding: 0; cursor: pointer; font: inherit; color: var(--ink); transition: box-shadow .2s; }
.rn-card:hover { box-shadow: 6px 6px 0 var(--pink-wash); }
.rn-card video { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--grid); background: var(--paper); display: block; }
div.rn-card { cursor: default; }
.rn-card b { font-size: 17px; padding: 14px 16px 6px; }
.rn-card span { font-size: 15px; line-height: 1.6; color: var(--ink-2); padding: 0 16px 18px; }

/* 해 온 일 — 사실 넷 */
.rn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; margin: 0 0 32px; }
.rn-facts b { color: var(--ink); margin-right: 6px; }


@media (max-width: 1100px) {
    .rn-svc, .rn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rn-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
}
@media (max-width: 600px) {
    .rn-svc, .rn-cards, .rn-steps { grid-template-columns: 1fr; }
    .rn-prob { min-height: 10.5em; }
    .rn-steps li { opacity: 1; }
    .rn-li-cap { display: block; }
    .rn-cap { display: none; }
    .rn-steps svg { max-width: 340px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .rn-dev { opacity: 1; fill: #2E9E66; } .rn-fixed { opacity: 1; }
}