/* AIRouter 페이지 — 새 소개서(2026-10-19)에 맞춰 더한 부품들의 모양. 이 파일은 계속 쓴다(확인이 끝나도 지우지 않는다).
   규칙: 글꼴 Pretendard · 모서리 10px · 본문 검정 · 강조 주황(var(--accent)). 기존 yurika-v.css 의 변수(--line · --mute · --soft)를 그대로 쓴다. */

/* 핵심 과제 — 공급자가 늘수록(글로 된 항목) */
.yv-mult-i b.t { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; word-break: keep-all; }
/* 4칸 카드 줄 */
.yv-pbs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .yv-pbs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yv-pbs--4 { grid-template-columns: 1fr; } }
.yv-tgs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .yv-tgs--3 { grid-template-columns: 1fr; } }
.yv-trio--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1240px; }
@media (max-width: 1000px) { .yv-trio--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yv-trio--4 { grid-template-columns: 1fr; } }
.yv-cos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .yv-cos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yv-cos--4 { grid-template-columns: 1fr; } }

/* 과제 간 상관관계 */
.rs-pairs { display: grid; gap: 14px; }
.rs-pair { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 8px 14px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rs-pair .a, .rs-pair .b { display: grid; gap: 4px; }
.rs-pair small { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; }
.rs-pair b { font-size: 18px; letter-spacing: -0.03em; word-break: keep-all; }
.rs-pair i { font-style: normal; text-align: center; font-size: 20px; color: var(--accent); }
.rs-pair p { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 15px; line-height: 1.65; color: var(--mute); word-break: keep-all; }
@media (max-width: 640px) { .rs-pair { grid-template-columns: 1fr; } .rs-pair i { transform: rotate(90deg); } }

/* 카드 안 예시 문장 · 소제목 줄 */
.rs-ex { margin-top: 12px !important; padding: 10px 14px; border-radius: 10px; background: var(--soft); font-size: 14px !important; color: #111 !important; }
.rs-sh { margin: 34px 0 14px; }
.yv-card .chips { margin-top: 14px; }

/* 사람 · 대시보드 vs 규칙 + AI */
.rs-cmp { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; gap: 14px; margin-top: 22px; }
.rs-cmp > div { padding: 24px 26px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rs-cmp .r { border-color: var(--accent); }
.rs-cmp small { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 800; color: var(--accent); }
.rs-cmp ul { display: grid; gap: 10px; }
.rs-cmp li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.65; color: var(--mute); word-break: keep-all; }
.rs-cmp li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 4px; height: 4px; border-radius: 50%; background: #111; }
.rs-cmp i { align-self: center; font-style: normal; text-align: center; font-size: 22px; color: var(--accent); }
@media (max-width: 800px) { .rs-cmp { grid-template-columns: 1fr; } .rs-cmp i { transform: rotate(90deg); } }

/* AIRouter 제공 모델 안내 줄 */
.rs-own { margin-top: 16px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rs-own small { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); }
.rs-own h3 { margin-top: 6px; font-size: 19px; letter-spacing: -0.03em; }
.rs-own ul { margin-top: 12px; display: grid; gap: 8px; }
.rs-own li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.65; color: var(--mute); word-break: keep-all; }
.rs-own li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 4px; height: 4px; border-radius: 50%; background: #111; }

/* 규칙 표 */
.rs-intro { text-wrap: balance; margin: -4px auto 26px; max-width: 860px; text-align: center; font-size: 16px; line-height: 1.75; color: var(--mute); word-break: keep-all; }
.rs-tbl-w { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rs-tbl { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; text-align: left; }
.rs-tbl thead th { padding: 14px 18px; background: var(--soft); font-size: 13px; font-weight: 800; color: #111; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rs-tbl td, .rs-tbl tbody th { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--mute); word-break: keep-all; }
.rs-tbl tbody tr:last-child td { border-bottom: 0; }
.rs-tbl td b { color: #111; letter-spacing: -0.02em; }
.rs-tbl .rs-ai { margin-left: 4px; padding: 1px 6px; border: 1px solid var(--accent); border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent); }
.rs-tbl--sec tbody th.g { width: 110px; background: #fafafa; color: #111; font-size: 13px; font-weight: 800; border-right: 1px solid var(--line); }
.rs-tbl .sv { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.rs-tbl .sv-h { background: #111; color: #fff; }
.rs-tbl .sv-m { background: #e9e9ec; color: #111; }
.rs-tbl .sv-l { background: #fff; color: var(--mute); border: 1px solid var(--line); }
.rs-tbl .sv-x { background: #fff; color: var(--accent); border: 1px solid var(--accent); }

/* 요금제 */
.rs-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rs-plan { padding: 30px 28px 26px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rs-plan.is-hot { border-color: var(--accent); }
.rs-plan small { display: block; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); }
.rs-plan .pr { display: block; margin-top: 10px; font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
.rs-plan .pr em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--mute); letter-spacing: 0; }
.rs-plan dl { margin-top: 22px; display: grid; gap: 0; }
.rs-plan dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.rs-plan dt { color: var(--mute); }
.rs-plan dd { margin: 0; font-weight: 700; text-align: right; }
.rs-plans + .yv-cards { margin-top: 16px; }
@media (max-width: 900px) { .rs-plans { grid-template-columns: 1fr; } }
/* 두 묶음(찾아서 제시 / 자동 통제) 카드 */
.rs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.rs-col { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 28px 32px; }
.rs-col > small { display: block; font-size: 13px; font-weight: 700; color: var(--accent, #ff5a1f); letter-spacing: .02em; margin-bottom: 8px; }
.rs-col ul { list-style: none; margin: 0; padding: 0; }
.rs-col li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-top: 1px solid #eee; }
.rs-col .ic { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #fff3ed; color: var(--accent, #ff5a1f); display: grid; place-items: center; }
.rs-col .ic svg { width: 22px; height: 22px; }
.rs-col li:first-child { border-top: 0; }
.rs-col h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #111; }
.rs-col p { margin: 0; font-size: 15px; line-height: 1.6; color: #444; }
@media (max-width: 800px) { .rs-split { grid-template-columns: 1fr; } .rs-col { padding: 22px 22px; } }
.rs-split--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-split--next { margin-top: 20px; }
.rs-split--3 .rs-col li { padding: 8px 0 0; flex-direction: column; gap: 14px; }
@media (max-width: 1000px) { .rs-split--3 { grid-template-columns: 1fr; } }

/* 5단계 흐름 */
.rs-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.rs-step { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 24px 22px; }
.rs-step .ic { width: 44px; height: 44px; border-radius: 10px; background: #fff3ed; color: var(--accent, #ff5a1f); display: grid; place-items: center; margin-bottom: 14px; }
.rs-step .ic svg { width: 22px; height: 22px; }
.rs-step > small { position: absolute; top: 22px; right: 22px; font-size: 13px; font-weight: 700; color: var(--accent, #ff5a1f); }
.rs-step h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #111; }
.rs-step p { margin: 0; font-size: 14px; line-height: 1.6; color: #444; }
.rs-step:not(:last-child)::after { content: ""; position: absolute; top: 46px; right: -21px; width: 22px; height: 2px; background: var(--accent, #ff5a1f); opacity: .35; }
.rs-split--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; }
.rs-split--4 .rs-col { padding: 22px 24px; }
.rs-split--4 .rs-col li { padding: 0; flex-direction: column; gap: 14px; }
.rs-split--4 .rs-col h3 { font-size: 18px; }
.rs-split--4 .rs-col p { font-size: 14px; }
@media (max-width: 1100px) { .rs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-step::after { display: none; } .rs-split--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rs-flow, .rs-split--4 { grid-template-columns: 1fr; } }
.rs-flow + .rs-sh { margin-top: 44px; }

/* AI 어시스턴트: 왼쪽 대화 애니메이션 + 오른쪽 기능 목록 */
.rs-assist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; }
.rs-chat { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; display: flex; align-items: center; }
.rs-chat svg { width: 100%; height: auto; display: block; font-family: inherit; }
.rs-assist .rs-col li { padding: 10px 0; }
.rs-assist .rs-col { padding: 10px 26px; }
.rs-assist .rs-col h3 { font-size: 18px; }
.rs-assist .rs-col p { font-size: 14px; }
.rs-assist .rs-ex { margin-top: 8px; }
.rs-safe { margin-top: 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 22px 28px; }
.rs-safe small { display: block; font-size: 13px; font-weight: 700; color: var(--accent, #ff5a1f); margin-bottom: 10px; }
.rs-safe ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rs-safe li { font-size: 14px; line-height: 1.6; color: #333; padding-left: 16px; position: relative; }
.rs-safe li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #ff5a1f); }
@media (max-width: 1000px) { .rs-assist { grid-template-columns: 1fr; } .rs-safe ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rs-safe ul { grid-template-columns: 1fr; } }

/* 에이전트 테스트: 찾는 것 · 사전 시험 */
.rs-split--3 .rs-col > small + .chips, .rs-split--3 .rs-col > small + div { margin-top: 4px; }
.rs-test p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: #444; }
.rs-modes { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rs-modes span { flex: 1; border-radius: 10px; padding: 12px 14px; border: 1px solid #e5e7eb; background: #f6f6f7; }
.rs-modes .m2 { border-color: #ffc8b3; background: #fff3ed; }
.rs-modes b { display: block; font-size: 16px; color: #111; }
.rs-modes em { display: block; font-style: normal; font-size: 12px; line-height: 1.5; color: #666; margin-top: 4px; }
.rs-modes i { font-style: normal; font-size: 20px; color: var(--accent, #ff5a1f); }
/* 요청 처리 흐름: 4칸 × 2줄 */
.rs-flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rs-flow--4 .rs-step:nth-child(4)::after, .rs-flow--4 .rs-step:nth-child(7)::after { display: none; }
.rs-step--stop { background: #111; border-color: #111; }
.rs-step--stop h3 { color: #fff; }
.rs-step--stop p { color: #d1d5db; }
.rs-step--stop > small { position: static; display: block; margin-bottom: 4px; color: #ff8a5c; }
.rs-step--stop .ic { background: var(--accent, #ff5a1f); color: #fff; }
@media (max-width: 1100px) { .rs-flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rs-flow--4 { grid-template-columns: 1fr; } }
.yv-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .yv-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .yv-tiles--4 { grid-template-columns: 1fr; } }

/* 주요 기능 태그 — 모든 태그가 같은 크기 · 굵기 · 색 (분류 이름만 다르다) */
.yv-tiles--4 .yv-tile i.tg { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0; height: 24px; line-height: 22px; padding: 0 10px; border-radius: 999px; border: 1px solid #e5e7eb; background: #f6f6f7; color: #555; box-sizing: border-box; }

/* 시스템 구성도 (소개서 24쪽 형태) — 사이트 색(주황 · 검정 · 회색)으로 */
.ar-diagram { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 52px; margin-top: 48px; align-items: center; }
.ar-left { display: flex; flex-direction: column; gap: 16px; }
.ar-in { position: relative; border-radius: 10px; padding: 22px 14px; text-align: center; font-size: 16px; }
.ar-in::after { content: ""; position: absolute; top: 50%; left: 100%; width: 40px; height: 2px; background: var(--accent, #ff5a1f); }
.ar-in::before { content: ""; position: absolute; top: 50%; left: calc(100% + 34px); width: 8px; height: 8px; border-top: 2px solid var(--accent, #ff5a1f); border-right: 2px solid var(--accent, #ff5a1f); transform: translateY(-50%) rotate(45deg); }
.ar-in--a { background: #fff3ed; color: #c2410c; padding: 34px 14px; }
.ar-in--b { background: #f1f1f3; color: #333; }
.ar-core { border: 2px solid #111; border-radius: 12px; padding: 16px; background: #fff; }
.ar-core-t { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; margin-bottom: 12px; color: #111; }
.ar-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--accent, #ff5a1f); display: inline-block; }
.ar-plane { border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.ar-plane p { margin: 0 0 10px; font-size: 14px; color: #444; }
.ar-plane p b { font-size: 15px; color: #111; margin-right: 6px; }
.ar-plane--data { background: #fff3ed; }
.ar-plane--ctrl { background: #f1f1f3; }
.ar-steps { display: flex; align-items: center; gap: 6px; }
.ar-steps span { flex: 1; background: #fff; border-radius: 8px; padding: 12px 6px; text-align: center; font-size: 14px; font-weight: 700; color: #111; line-height: 1.3; }
.ar-steps--4 { gap: 10px; }
.ar-arrow { flex: none; width: 10px; height: 10px; border-top: 2px solid var(--accent, #ff5a1f); border-right: 2px solid var(--accent, #ff5a1f); transform: rotate(45deg); margin: 0 3px 0 -3px; }
.ar-ai { background: var(--accent, #ff5a1f); color: #fff; border-radius: 10px; padding: 14px 16px; font-size: 14px; margin-bottom: 10px; }
.ar-ai b { font-size: 15px; margin-right: 8px; }
.ar-svc { background: #f6f6f7; border-radius: 10px; padding: 12px 16px; font-size: 14px; color: #444; margin-bottom: 0; }
.ar-svc b { color: #111; margin-right: 8px; }
.ar-db { background: #111; color: #fff; border-radius: 10px; padding: 14px 16px; font-size: 14px; margin: 12px -16px -16px; border-top-left-radius: 0; border-top-right-radius: 0; border-radius: 0 0 10px 10px; }
.ar-db b { font-size: 15px; }
.ar-prov { border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 16px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.ar-prov h3 { margin: 0; text-align: center; font-size: 17px; }
.ar-prov small { font-size: 12px; color: #777; margin-bottom: 2px; }
.ar-prov span { background: #f1f1f3; border-radius: 8px; padding: 9px 8px; text-align: center; font-size: 14px; font-weight: 700; color: #222; }
.ar-prov .ar-prov-own { background: #fff3ed; color: #c2410c; margin-top: 6px; }
@media (max-width: 1100px) { .ar-diagram { grid-template-columns: 1fr; gap: 24px; } .ar-in::after, .ar-in::before { display: none; } .ar-left { flex-direction: row; flex-wrap: wrap; } .ar-left .ar-in { flex: 1 1 160px; padding: 16px 12px; } .ar-steps { flex-wrap: wrap; } .ar-steps span { flex: 1 1 40%; } .ar-arrow { display: none; } .ar-prov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-prov h3, .ar-prov small { grid-column: 1 / -1; } }
/* 요청 처리 흐름: 7단계 한 줄 + 아래에 페일 클로즈 규칙 띠 (소개서 25쪽 형태) */
.ar-line { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 48px; position: relative; }
.ar-line::before { content: ""; position: absolute; left: 3%; right: 3%; top: 19px; height: 2px; background: #d9dce1; }
.ar-st { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ar-st > i { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background: #111; color: #fff; font-style: normal; font-weight: 700; font-size: 15px; display: grid; place-items: center; margin: 0 auto; }
.ar-st > div { flex: 1; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 14px; }
.ar-st h3 { margin: 0 0 8px; font-size: 16px; color: #111; }
.ar-st p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #444; }
.ar-st--hl > i { background: var(--accent, #ff5a1f); }
.ar-st--hl > div { background: #fff3ed; border-color: #ffc8b3; }
.ar-fc { display: flex; align-items: center; gap: 18px; margin-top: 18px; background: #111; color: #fff; border-radius: 10px; padding: 20px 26px; }
.ar-fc .ic { flex: none; width: 48px; height: 48px; border-radius: 10px; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.ar-fc .ic svg { width: 24px; height: 24px; }
.ar-fc h3 { margin: 0 0 4px; font-size: 17px; color: #fff; }
.ar-fc p { margin: 0; font-size: 14px; line-height: 1.6; color: #d1d5db; }
@media (max-width: 1100px) { .ar-line { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-line::before { display: none; } .ar-st { flex-direction: row; align-items: flex-start; } .ar-st > i { margin: 0; flex: none; } }
@media (max-width: 640px) { .ar-line { grid-template-columns: 1fr; } .ar-fc { align-items: flex-start; } }
.yv-tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .yv-tiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .yv-tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .yv-tiles--5 { grid-template-columns: 1fr; } }

/* AI 기반 운영의 필요성: 왼쪽 요청 기록 애니메이션 + 오른쪽 3가지 이유 */
.rs-need { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; }
.rs-need-list { display: flex; flex-direction: column; gap: 14px; }
.rs-need-list .rs-col { flex: 1; padding: 6px 26px; display: flex; align-items: center; }
.rs-need-list .rs-col li { padding: 12px 0; }
.rs-need-list .rs-col h3 { font-size: 18px; margin-bottom: 4px; }
.rs-need-list .rs-col p { font-size: 14px; }
.rs-no { display: block; font-size: 12px; font-weight: 700; color: var(--accent, #ff5a1f); margin-bottom: 4px; }
.rs-logs { padding: 12px; }
@media (max-width: 1000px) { .rs-need { grid-template-columns: 1fr; } }
/* 보안 강화 구역: 배경 회화 + 반투명 카드 */
#ar-sec { background: url("../images/yv-ar-sec-bg.jpg") center bottom / cover no-repeat; background-color: #fbfaf8; }
#ar-sec .rs-col { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, 0.9); }
#ar-sec .rs-col li { border-top-color: rgba(0, 0, 0, 0.08); }

/* 규칙 구역 소개 문장: 가운데 정렬, 한 줄(좁으면 두 줄 균형) */
.yv-sec .rs-intro { margin: -4px auto 26px; max-width: 1180px; text-align: center; text-wrap: balance; }