/*!
* 호안 디자인 시스템 — 요약 비주얼 & 콘텐츠 박스 컴포넌트
* 글쓰기 지침 v2.2 §5-1(visual-summary 5종) + §2-5(3박스) + §2-1(핵심요약)
* 원칙(통합지침 §4): 3컬러(블루·골드·블랙) · 1px 보더 · 그림자/그라데이션 최소 · 라운드는 --r/--r-lg 토큰만
* 배포: /insights/assets/css/hoan-visual-summary.css 로 업로드 후 hoan-design-system.css 뒤에 enqueue
* (또는 이 내용을 hoan-design-system.css 하단에 붙여넣기)
* 사용: …
/ 카테고리 자동톤은 data-cat 사용
*/
:root{
--hoan-blue:#1E50A2; --hoan-blue-dark:#143E80; --hoan-blue-deep:#0A2754;
--hoan-gold:#B8893D; --hoan-gold-light:#EAC97E; --hoan-black:#0F0F0F;
--hoan-line:#e6e6e6; --hoan-ink:#1a1a1a; --hoan-muted:#6b6b6b;
--r:8px; --r-lg:12px;
--mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}
/* ── 톤 토큰: 카테고리 slug → 색 (지침 §5-1) ─────────────────────
tax-strategy=골드(유일) / cash-out·restructure=블루 / 나머지=블랙 */
.hoan-vs{ --tone:var(--hoan-black); --tone-tint:#f4f4f4; margin:22px 0; }
.hoan-vs.tone-gold, .hoan-vs[data-cat="tax-strategy"]{ --tone:var(--hoan-gold); --tone-tint:#fbf7ef; }
.hoan-vs.tone-blue, .hoan-vs[data-cat="cash-out"], .hoan-vs[data-cat="restructure"]{ --tone:var(--hoan-blue); --tone-tint:#eef3fb; }
.hoan-vs.tone-black, .hoan-vs[data-cat="succession"], .hoan-vs[data-cat="equity"],
.hoan-vs[data-cat="tax-audit"], .hoan-vs[data-cat="hoan"]{ --tone:var(--hoan-black); --tone-tint:#f4f4f4; }
/* 비주얼 블록 제목 (§4 권위 헤드 = 조선일보명조) */
.hoan-vs .vs-t{
font-family:var(--chosun,inherit);
font-weight:700; color:var(--tone); margin:0 0 10px; font-size:1.02em;
padding-left:10px; border-left:3px solid var(--tone); line-height:1.4;
}
/* ① 판단 박스 .verdict ─────────────────────────────────────── */
.verdict{
border:1px solid var(--hoan-line); border-left:4px solid var(--tone);
border-radius:var(--r); background:var(--tone-tint); padding:14px 16px;
}
.verdict .verdict-label{
font:600 .76em/1 var(--mono); color:var(--tone);
text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:6px;
}
/* ② 실무 포인트 .call--prac (블랙 고정 — 호안 현장 코멘트) ─────── */
.call--prac{
border:1px solid var(--hoan-line); border-left:4px solid var(--hoan-black);
border-radius:var(--r); background:#f4f4f4; padding:14px 16px;
}
.call--prac::before{
content:"실무 포인트"; font:600 .76em/1 var(--mono); color:var(--hoan-black);
letter-spacing:.06em; display:block; margin-bottom:6px;
}
/* ③ 2단 비교표 .compare ────────────────────────────────────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.compare .col{
border:1px solid var(--hoan-line); border-top:3px solid var(--tone);
border-radius:var(--r); padding:12px 14px; background:#fff;
}
.compare .col h4{ margin:0 0 6px; color:var(--tone); font-size:.98em; }
/* ④ 세로 프로세스 .flow ────────────────────────────────────── */
.flow{ list-style:none; margin:0; padding:0; counter-reset:fl; }
.flow li{ position:relative; margin-left:10px; padding:0 0 16px 30px; border-left:2px solid var(--hoan-line); }
.flow li:last-child{ border-left-color:transparent; padding-bottom:0; }
.flow li::before{
counter-increment:fl; content:counter(fl); position:absolute; left:-11px; top:0;
width:20px; height:20px; background:var(--tone); color:#fff; border-radius:50%;
font:600 .72em/20px var(--mono); text-align:center;
}
.flow li strong{ color:var(--tone); }
/* ⑤ 넘버링 카드 .keycards ──────────────────────────────────── */
.keycards{
display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px;
counter-reset:kc; list-style:none; margin:0; padding:0;
}
.keycards li{
border:1px solid var(--hoan-line); border-left:3px solid var(--tone);
border-radius:var(--r); padding:12px 14px; background:#fff;
}
.keycards li::before{
counter-increment:kc; content:"0" counter(kc);
font:700 .82em/1 var(--mono); color:var(--tone); display:block; margin-bottom:5px;
}
/* ── 본문 콘텐츠 박스: 핵심요약 · 세 줄 요약 · 3박스(§2-5) ──────── */
.hoan-summary{
border:1px solid var(--hoan-gold); border-top:3px solid var(--hoan-gold);
border-radius:var(--r-lg); background:#fbf7ef; padding:16px 18px; margin:18px 0;
}
.hoan-summary > strong:first-child{ color:var(--hoan-gold); letter-spacing:.02em; }
.hoan-3line{ border-left:4px solid var(--hoan-blue); background:#f4f7fc; border-radius:var(--r); padding:12px 16px; margin:16px 0; }
.hoan-box{ border:1px solid var(--hoan-line); border-radius:var(--r); padding:12px 16px; margin:16px 0; }
.hoan-box--caution{ border-left:4px solid var(--hoan-gold-light); background:#fdf6e3; } /* 주의=골드 */
.hoan-box--law{ border-left:4px solid var(--hoan-blue); background:#eef3fb; } /* 법령=블루 */
.hoan-box--prac{ border-left:4px solid var(--hoan-black); background:#f4f4f4; } /* 실무=블랙 */
/* 세무사 검수 마커(본문 유지) */
.hoan-flag{ background:#fff3cd; border-radius:3px; padding:0 3px; }
/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width:600px){ .compare{ grid-template-columns:1fr; } }
/* ── 접근성: 톤 대비 보정(골드 텍스트 최소 대비 확보) ──────────── */
@media (prefers-contrast:more){ .hoan-vs.tone-gold{ --tone:#8f6a2e; } }
/* [2026-07-05 보완] FAQ 섹션 */
.hoan-faq{margin:26px 0}
.hoan-faq>h2{margin-bottom:12px}
.hoan-faq details{border:1px solid #E3E6EE;border-radius:var(--r,8px);padding:12px 16px;margin:8px 0;background:#fff}
.hoan-faq summary{cursor:pointer;font-weight:600;color:#143E80;list-style:none}
.hoan-faq summary::-webkit-details-marker{display:none}
.hoan-faq summary::before{content:"Q ";color:#B8893D;font-weight:800}
.hoan-faq details[open] summary{margin-bottom:8px}
.hoan-faq details p{margin:0;color:#333}
/* [2026-07-05 item8] 결론 직하 CTA 버튼 */
.hoan-cta-btn{display:inline-block;margin-top:10px;background:#1E50A2;color:#fff !important;font-weight:700;
padding:12px 24px;border-radius:var(--r,8px);text-decoration:none;font-size:16px}
.hoan-cta-btn:hover{background:#143E80}
/* [2026-07-05 F-1] 비교표: draft는 사용. .compare{display:grid}가 테이블을 깨므로 table.compare 전용 복원 */
table.compare{ display:table !important; width:100%; border-collapse:collapse; margin:16px 0; grid-template-columns:none !important; gap:0 !important; }
table.compare thead{ display:table-header-group; }
table.compare tbody{ display:table-row-group; }
table.compare tr{ display:table-row; }
table.compare th, table.compare td{ display:table-cell; border:1px solid #E3E6EE; padding:9px 12px; text-align:left; font-size:.95em; vertical-align:top; }
table.compare thead th{ background:#F4F7FB; color:#143E80; font-weight:700; }
/* [2026-07-05 해인] 결론 박스 라벨 헤더 강조 — prac 박스 vs-t가 회색 배경에서 묻히지 않도록 볼드·확대 통일 */
.hoan-box--prac > .vs-t{ font-weight:800; font-size:1.1em; color:var(--hoan-black); }
.hoan-box--prac > .vs-t strong{ font-weight:inherit; }
/* [2026-07-06 v2.6 J-3] 결론 박스 시각 위계 강화 — 요약 박스보다 강하게: 굵은 블루 좌보더 + 옅은 블루 배경 */
.hoan-box.hoan-box--prac{ border-left:6px solid var(--hoan-blue); background:#EEF3FB; }
.hoan-box--prac > .vs-t{ color:var(--hoan-blue); border-left:3px solid var(--hoan-blue); }
/* [2026-07-06 v2.6 J-4] 결론 내 상담 유도 문장 강조 — 골드 좌측 라인 + 볼드. 시선: 결론 요지 → 상담 문장 → 버튼/폼 */
.hoan-box--prac .hoan-consult{ border-left:3px solid var(--hoan-gold); padding-left:12px; margin:14px 0 4px; }
.hoan-box--prac .hoan-consult strong{ font-weight:700; }
/* [2026-07-07 v2.6 L] 인라인 상담폼(파일럿) — 결론 박스 내부 흰 카드 */
.hoan-inline-form{ background:#fff; border:1px solid #E3E7EE; border-radius:12px; padding:18px 18px 14px; margin:14px 0 4px; }
.hoan-inline-form .hoan-form-grid{ display:flex; gap:10px; }
.hoan-inline-form .hoan-form-grid > *{ flex:1; }
.hoan-inline-form input[type="text"], .hoan-inline-form input[type="tel"], .hoan-inline-form textarea{
width:100%; border:1px solid #D7DCE5; border-radius:8px; padding:10px 12px; font-size:.95em; box-sizing:border-box; }
.hoan-inline-form textarea{ margin-top:10px; }
.hoan-inline-form .hoan-hp-wrap{ display:none !important; }
.hoan-inline-form .hoan-form-consent{ font-size:.86em; color:#4B5563; margin:10px 0 2px; }
.hoan-inline-form .hoan-form-privacy{ font-size:.76em; color:#8A94A3; line-height:1.5; margin:4px 0 10px; }
.hoan-inline-form input[type="submit"]{ width:100%; background:#1E50A2; color:#fff; font-weight:700;
border:0; border-radius:8px; padding:13px 0; font-size:1em; cursor:pointer; }
.hoan-inline-form input[type="submit"]:hover{ background:#143E80; }
.hoan-inline-form .hoan-form-note{ text-align:center; font-size:.8em; color:#8A94A3; margin:8px 0 0; }
.hoan-inline-form .wpcf7-response-output{ border-radius:8px; font-size:.9em; }
.hoan-inline-form .wpcf7-not-valid-tip{ font-size:.78em; }
/* [2026-07-06 v2.6 I-3] 본문 H2 골드 넘버링 01·02 — 본문 래퍼 .prose 스코프(위젯·사이드바 H2 제외) */
.prose{ counter-reset:h2n; }
.prose h2{ counter-increment:h2n; }
.prose h2::before{ content:counter(h2n,decimal-leading-zero); color:var(--hoan-gold);
font:700 .68em/1 var(--mono,ui-monospace,monospace); margin-right:10px; letter-spacing:.05em; vertical-align:2px; }
/* ============================================================
* [2026-07-13 해인] 글 상단 메타·핵심요약·결론 라벨 조정 + 슬림 상담 고정버튼
* 전 글 공통 적용. 롤백: 본 블록 삭제 후 재업로드.
* ============================================================ */
/* 1. 상단 메타: 작성자(호안 작성·검수) 표기 숨김 — 하단 근거·출처 표기는 유지 */
.hoan-single .art-meta .by,
.hoan-single .art-meta .sep{ display:none !important; }
/* 2. 발행일 우측 정렬 */
.hoan-single .art-meta{ justify-content:flex-end !important; }
/* 3. 핵심요약 볼드 강조 — 박스 텍스트 세미볼드, 내부 강조어(strong)는 더 진하게 유지 */
.hoan-summary > p{ font-weight:600; }
.hoan-summary > p strong{ font-weight:800; }
/* 4. 결론 박스 '결론' 라벨(콜아웃) 숨김 — 박스 본문·폼은 유지 */
.hoan-box--prac > .vs-t{ display:none !important; }
/* 5. 슬림 상담 고정 버튼 — 우측 하단 고정, 클릭 시 하단 인라인 폼으로 스크롤 */
html{ scroll-behavior:smooth; }
.hoan-sticky-cta{
position:fixed; right:20px; bottom:24px; z-index:9999;
background:#1E50A2; color:#fff !important; font-weight:700; font-size:15px;
padding:12px 20px; border-radius:999px; text-decoration:none; line-height:1;
box-shadow:0 4px 14px rgba(20,62,128,.28); transition:background .15s;
}
.hoan-sticky-cta:hover{ background:#143E80; }
@media (max-width:600px){
.hoan-sticky-cta{ right:12px; bottom:14px; padding:11px 18px; font-size:14px; }
}