/* 보고서관리 도움말 (report_start.php / report_rank.php) 전용 — rp- 접두사 */
.rp-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
/* 제작 문의 — 카카오톡 문의용, 카카오 노랑 */
.rp-inquiry-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 9px 18px; border-radius: var(--radius); background: #fee500; color: #191919; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition); }
.rp-inquiry-btn:hover { background: #f5d800; color: #191919; }
.rp-inquiry-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.rp-head-desc { margin-top: 8px; font-size: 15px; color: var(--text-secondary); }

.rp-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; background: #edf0f7; border-radius: var(--radius); }
.rp-tabs a { padding: 7px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.rp-tabs a.on { background: var(--card-bg); color: var(--text-primary); box-shadow: var(--shadow-sm); }

.rp-body { max-width: 900px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.rp-body strong { color: var(--text-primary); font-weight: 600; }
.rp-body a { color: var(--primary); text-decoration: none; font-weight: 500; }
.rp-body a:hover { text-decoration: underline; }
.rp-body h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); }

.rp-card { margin-bottom: 28px; padding: 20px 24px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rp-card > h2 { font-size: 15px; }
.rp-card > p { margin-top: 4px; }
.rp-card > div > div { margin-top: 16px; }
.rp-card > div > div > p { font-weight: 600; color: var(--text-primary); }

.rp-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; list-style: none; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); color: var(--text-primary) !important; font-size: 13px; }
.rp-chip:hover { border-color: var(--primary); text-decoration: none !important; }
.rp-flow-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; }

.rp-toc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-top: 12px; list-style: none; }
.rp-toc-list a { display: flex; gap: 8px; color: var(--text-secondary); font-weight: 400; }
.rp-toc-n { width: 22px; text-align: right; font-weight: 600; color: var(--text-muted); }

.rp-sec { margin-bottom: 40px; scroll-margin-top: 24px; }
.rp-sec > * + * { margin-top: 16px; }
.rp-sec-head { display: flex; align-items: flex-start; gap: 12px; }
.rp-sec-head p { margin-top: 4px; }
.rp-num { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; }

.rp-fig { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: #f1f3f8; }
.rp-fig img { display: block; width: 100%; height: auto; }
.rp-pin { position: absolute; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #f43f5e; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.25); }

.rp-steps { list-style: none; }
.rp-steps li { position: relative; padding-left: 32px; }
.rp-steps li + li { margin-top: 10px; }
.rp-pin-n { position: absolute; left: 0; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #f43f5e; color: #fff; font-size: 11px; font-weight: 700; }
.rp-pin-n.rp-muted { background: #e2e8f0; color: var(--text-secondary); }

.rp-ui { display: inline-flex; align-items: center; margin: 0 2px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; background: #f4f6fa; color: var(--text-primary); font-size: .88em; font-weight: 500; white-space: nowrap; }

.rp-tip, .rp-warn { padding: 14px 16px; border-radius: var(--radius); font-size: 13.5px; }
.rp-tip { border: 1px solid var(--border); background: #f8fafc; }
.rp-tip-title { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.rp-tip ul { list-style: none; }
.rp-tip li { position: relative; padding-left: 12px; }
.rp-tip li + li { margin-top: 4px; }
.rp-tip li::before { content: ''; position: absolute; left: 0; top: .75em; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }
.rp-warn { border: 1px solid rgba(221,107,32,.3); background: var(--warning-light); color: #7b341e; }

.rp-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.rp-grid > *, .rp-grid dd { min-width: 0; overflow-wrap: anywhere; } /* 2026-11-09 긴 글자가 칸을 넓히지 않게 */
.rp-grid dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin-top: 12px; }
.rp-grid dt { font-weight: 600; color: var(--text-primary); }
.rp-kakao { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow-sm); }
.rp-kakao-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1200 / 630; background: linear-gradient(135deg, #c7d2fe, #a7f3d0); }
.rp-kakao-img span { padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.9); font-size: 12px; font-weight: 500; }
.rp-kakao-body { padding: 12px; }
.rp-kakao-body .t { font-weight: 600; color: var(--text-primary); }
.rp-kakao-body .d { font-size: 12px; }
.rp-kakao-body .u { font-size: 11px; color: var(--text-muted); }

.rp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.rp-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13.5px; }
.rp-table caption { padding: 8px 12px; border-bottom: 1px solid var(--border); background: #f8fafc; text-align: left; font-size: 12px; font-weight: 600; }
.rp-table th, .rp-table td { padding: 8px 12px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.rp-table tr:first-child th, .rp-table tr:first-child td { border-top: 0; }
.rp-table th { font-weight: 600; color: var(--text-primary); background: #fafbfd; }

.rp-faq { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); }
.rp-faq details { padding: 14px 16px; }
.rp-faq details + details { border-top: 1px solid var(--border); }
.rp-faq summary { cursor: pointer; font-weight: 500; color: var(--text-primary); }
.rp-faq details > div { margin-top: 10px; }

@media (max-width: 768px) {
  .rp-grid, .rp-toc-list { grid-template-columns: 1fr; }
}