/* 시안 A~D(demo-recycle) 추가 규칙 — old.css 다음에 읽음. 색은 토큰만. */


/* B: 오른쪽 설명과 배경 사이 빈 곳 = 고른 단계 그림(SVG, 남은 높이를 채움) */
.ob-side { justify-content: flex-start; gap: clamp(10px, 1.8vh, 18px); }
.ob-art { position: relative; flex: 1 1 auto; min-height: 64px; display: grid; place-items: center; padding: clamp(6px, 1.4vh, 16px); border-radius: var(--r-md, 12px); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); background: radial-gradient(60% 90% at 30% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), radial-gradient(50% 80% at 85% 90%, color-mix(in srgb, var(--d2, var(--accent)) 12%, transparent), transparent 70%), var(--surface); overflow: hidden; }
.ob-art-i { position: absolute; inset: clamp(6px, 1.4vh, 16px); }
.ob-art-i[hidden] { display: none; }
.ob-art-i:not([hidden]) { animation: rc-fade .4s ease-out; }
.ob-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ob-art * { vector-effect: non-scaling-stroke; }
.ob-art .a-fr { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.ob-art .a-bar { fill: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.ob-art .a-dot { fill: color-mix(in srgb, var(--text) 22%, transparent); }
.ob-art .a-row { fill: color-mix(in srgb, var(--text) 12%, transparent); }
.ob-art .a-c1 { fill: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.ob-art .a-c2 { fill: color-mix(in srgb, var(--accent) 60%, var(--surface)); }
.ob-art .a-c3 { fill: var(--accent); }
.ob-art .a-soft { opacity: .18; }
.ob-art .a-ring { fill: none; stroke: color-mix(in srgb, var(--accent) 25%, var(--surface)); stroke-width: 9; }
.ob-art .a-arc { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.ob-art .a-ln { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ob-art .a-cur { fill: var(--text); stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.ob-art .a-wave { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 2.5; stroke-linecap: round; }
.ob-art .a-bell { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); stroke: var(--text-2); stroke-width: 2.5; stroke-linejoin: round; }
.ob-art .a-mark { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.ob-art .a-ck { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ob-art .a-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.ob-why { margin-top: auto; }

/* C: 영상 밑에 고른 단계 설명 문장 한 줄(작게) */
.ol-c .ol-fc-media { --cap-h: clamp(30px, 5.6vh, 48px); --fw: min(100%, calc((100svh - var(--header-h) - 2 * var(--pad) - 70px - var(--cap-h)) * 16 / 9)); flex-direction: column; align-items: center; }
.ol-c .oc-frame { width: var(--fw); }
.oc-cap { position: relative; width: var(--fw); margin-top: clamp(8px, 1.4vh, 14px); padding-left: 14px; border-left: 2px solid var(--accent); }
.oc-pane { margin: 0; font-size: clamp(.8125rem, 1.9vh, .9375rem); line-height: 1.6; color: var(--inv-text-2); word-break: keep-all; }
.oc-pane[hidden] { display: none; }
.oc-pane:not([hidden]) { animation: rc-fade .35s ease-out; }

/* D: 고른 단계 설명 펼침 + 오른쪽 목록 높이 = 왼쪽 영상 높이(같은 컨테이너 기준 계산) */
.ow--eq { --side: clamp(260px, 26vw, 380px); --gap: clamp(16px, 2.4vw, 36px); container-type: size; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--gap); align-items: center; }
.ow--eq .ow-media { container-type: normal; display: block; height: auto; min-height: 0; }
.ow--eq .ow-media .st { width: min(calc(100cqw - var(--side) - var(--gap)), calc(100cqh * 16 / 9)); }
.ow--eq .ow-side { height: min(100cqh, calc((100cqw - var(--side) - var(--gap)) * 9 / 16)); justify-content: stretch; }
.ow--eq .ow-list { height: 100%; display: flex; flex-direction: column; gap: clamp(4px, .9vh, 10px); }
.ow--eq .ow-list li { flex: 0 0 auto; display: flex; }
.ow--eq .ow-list li:has([aria-pressed="true"]) { flex: 1 1 auto; }
.ow--eq .ow-i { grid-template-rows: auto minmax(0, 1fr); align-content: start; align-items: center; row-gap: 4px; height: 100%; padding-block: clamp(6px, 1.2vh, 14px); }
.ow-d { display: none; align-self: start; grid-column: 2 / 4; font-size: clamp(.75rem, 1.8vh, .9375rem); font-weight: 400; line-height: 1.55; color: var(--text-2); }
.ow-i[aria-pressed="true"] .ow-d { display: block; animation: rc-fade .35s ease-out; }
.ow-s { position: relative; display: block; padding-left: 13px; }
.ow-s + .ow-s { margin-top: 3px; }
.ow-s::before { content: ""; position: absolute; left: 1px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* 단계 바뀔 때 화면 전환이 눈에 띄게 */
.st--rc .st-clip:not([hidden]) { animation: rc-in .45s cubic-bezier(.2,.8,.3,1); }
@keyframes rc-in { from { opacity: 0; transform: scale(1.04); filter: brightness(1.25); } to { opacity: 1; transform: none; filter: none; } }

@keyframes rc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .ob-art { flex: none; aspect-ratio: 2 / 1; }
  .ol-c .ol-fc-media { --fw: 100%; }
  .ow--eq { container-type: normal; grid-template-columns: minmax(0, 1fr); }
  .ow--eq .ow-media .st { width: 100%; }
  .ow--eq .ow-side { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .st--rc .st-clip:not([hidden]), .ob-art-i:not([hidden]), .oc-pane:not([hidden]), .ow-i[aria-pressed="true"] .ow-d { animation: none; }
}