/* AI 분석 결과 공통 스타일(assets/js/aiResult.js 의 HsAiResult.render 결과).
   전역 CSS 의 짧은 클래스(.badge/.lbl 등)와 부딪히지 않게 hsar- 접두사만 쓴다.
   결과 영역(.hsar-result) 자체에는 글자 규칙을 걸지 않고 직계 자식 블록에만 건다.
   같은 영역에 결과가 아닌 화면(어드바이저 질문 폼 등)이 번갈아 그려져도 영향이 없게 하려고.
   결과 영역 규칙은 모두 render() 가 붙이는 .hsar-result 를 앞에 붙여 특이도를 0,2,0 이상으로 둔다.
   페이지 쪽 리셋(sourcingMargin.jsp 의 .calc-app-wrapper * { padding:0; margin:0 } 등, 0,1,0)이
   이 파일보다 뒤에 선언돼 같은 특이도면 카드 padding·목록 들여쓰기가 0 으로 덮이기 때문이다. */

/* ===== 한눈에 카드 ===== */
.hsar-result .hsar-card { margin: 0 0 18px; padding: 16px 18px; border: 1px solid #E2E8F0; border-radius: 12px; background: #F8FAFC; }
.hsar-result .hsar-card--good { border-color: #BBF7D0; background: #F0FDF4; }
.hsar-result .hsar-card--warn { border-color: #FDE68A; background: #FFFBEB; }
.hsar-result .hsar-card--bad { border-color: #FECACA; background: #FEF2F2; }
/* 머리줄이 flex 라 안의 배지는 브라우저가 계산값을 block 으로 바꿔 보여 준다(flex 항목 규칙). 모양은 inline-block 과 같다 */
.hsar-result .hsar-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; }
.hsar-result .hsar-card-label { font-size: 13px; font-weight: 700; color: #64748B; }
.hsar-result .hsar-verdict { display: inline-block; margin: 0; padding: 4px 12px; border: 1px solid #CBD5E1; border-radius: 999px; background: #F1F5F9; color: #475569; font-size: 14px; font-weight: 800; line-height: 1.4; }
.hsar-result .hsar-verdict--good { border-color: #86EFAC; background: #DCFCE7; color: #166534; }
.hsar-result .hsar-verdict--warn { border-color: #FCD34D; background: #FEF3C7; color: #92400E; }
.hsar-result .hsar-verdict--bad { border-color: #FCA5A5; background: #FEE2E2; color: #991B1B; }
.hsar-result .hsar-card-conclusion { margin: 0 0 12px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.55; color: #0F172A; word-break: keep-all; overflow-wrap: anywhere; }
.hsar-result .hsar-card-todo-title { margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 700; color: #475569; }
.hsar-result .hsar-card-todos { margin: 0; padding: 0 0 0 22px; list-style: decimal; font-size: 15px; line-height: 1.65; color: #1F2937; }
.hsar-result .hsar-card-todos li { display: list-item; margin: 3px 0; padding: 0; list-style: decimal; }
.hsar-result .hsar-card--pending { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #64748B; }
.hsar-result .hsar-pending-dot { width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; animation: hsarPulse 1.2s ease-in-out infinite; }
@keyframes hsarPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ===== 본문 ===== */
.hsar-result > p,
.hsar-result > ul,
.hsar-result > ol,
.hsar-result > blockquote,
.hsar-result > .hsar-plain { font-size: 15px; line-height: 1.8; color: #1F2937; word-break: keep-all; overflow-wrap: anywhere; }
.hsar-result > p { margin: 0 0 12px; padding: 0; }
.hsar-result > h1,
.hsar-result > h2,
.hsar-result > h3,
.hsar-result > h4,
.hsar-result > h5,
.hsar-result > h6 { margin: 22px 0 8px; padding: 0; border: 0; background: none; font-size: 16px; font-weight: 800; line-height: 1.45; color: #0F172A; }
.hsar-result > h1:first-child,
.hsar-result > h2:first-child,
.hsar-result > h3:first-child,
.hsar-result > h4:first-child { margin-top: 0; }
.hsar-result > ul,
.hsar-result > ol { margin: 0 0 12px; padding: 0 0 0 22px; }
.hsar-result > ul { list-style: disc; }
.hsar-result > ol { list-style: decimal; }
.hsar-result > ul li,
.hsar-result > ol li { display: list-item; margin: 4px 0; padding: 0; list-style: inherit; }
.hsar-result > ul ul,
.hsar-result > ol ul { margin: 4px 0; padding: 0 0 0 20px; list-style: circle; }
.hsar-result > blockquote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #93C5FD; border-radius: 0 8px 8px 0; background: #F8FAFC; color: #475569; }
.hsar-result > hr { margin: 18px 0; border: none; border-top: 1px solid #E2E8F0; }
.hsar-result > .hsar-plain { margin: 0; padding: 0; white-space: pre-wrap; }
.hsar-result strong { font-weight: 700; color: #0F172A; }
.hsar-result code { padding: 1px 5px; border-radius: 4px; background: #F1F5F9; font-size: 13px; }

/* ===== 표 ===== */
.hsar-result .hsar-table-wrap { max-width: 100%; margin: 12px 0 16px; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* html2canvas(PDF)는 border-collapse:collapse 테두리를 제대로 못 그림(흰칸/텍스트처럼 보임)
   → separate + 셀 우/하 테두리 + 표 상/좌 테두리로 1px 그리드를 구성(화면·PDF 동일) */
.hsar-result .hsar-table-wrap > table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border-top: 1px solid #CBD5E1; border-left: 1px solid #CBD5E1; font-size: 14px; line-height: 1.6; color: #1F2937; }
.hsar-result .hsar-table-wrap th,
.hsar-result .hsar-table-wrap td { padding: 8px 10px; border-right: 1px solid #CBD5E1; border-bottom: 1px solid #CBD5E1; text-align: left; vertical-align: top; word-break: keep-all; overflow-wrap: anywhere; }
.hsar-result .hsar-table-wrap th { background: #F1F5F9; font-weight: 700; white-space: nowrap; }
.hsar-result .hsar-table-wrap tr { page-break-inside: avoid; break-inside: avoid; } /* 행이 페이지 경계에서 잘리지 않게 */

/* ===== 용어 풀이 ===== */
.hsar-result .hsar-term { border-bottom: 1px dotted #64748B; cursor: help; }
.hsar-result .hsar-term:focus { outline: none; }
@media (hover: none) {
	/* iOS 는 cursor:pointer 가 없는 요소의 탭을 click 으로 넘겨주지 않는다 */
	.hsar-result .hsar-term { cursor: pointer; }
}
/* 말풍선은 결과 영역이 아니라 body 에 붙는다. 페이지 래퍼 리셋이 닿지 않고 전역 리셋(div/b, 0,0,1)만 받으므로 0,1,0 이상이면 된다 */
.hsar-tip { position: fixed; z-index: 100000; display: none; max-width: min(280px, calc(100vw - 32px)); margin: 0; padding: 10px 12px; border-radius: 8px; background: #1E293B; color: #F8FAFC; font-size: 13px; font-weight: 400; line-height: 1.55; box-shadow: 0 6px 20px rgba(15, 23, 42, .25); pointer-events: none; word-break: keep-all; overflow-wrap: anywhere; }
.hsar-tip.hsar-tip--show { display: block; }
.hsar-tip .hsar-tip-term { display: block; margin: 0 0 2px; font-weight: 700; color: #BFDBFE; }

/* ===== 모바일 ===== */
@media (max-width: 768px) {
	.hsar-result .hsar-card { padding: 14px; }
	.hsar-result .hsar-card-conclusion { font-size: 15px; }
	.hsar-result .hsar-table-wrap > table { font-size: 13px; }
	.hsar-result .hsar-table-wrap th,
	.hsar-result .hsar-table-wrap td { padding: 7px 8px; }
}