@charset "utf-8";
/* =====================================================================
 * 상속세 계산기 (module/calc)
 *
 * 자사 페이지(/inheritance/calculator.php)와 제휴사 삽입폼(/api/v1/calc_form.php)이
 * 같은 마크업·같은 스타일을 쓴다.
 *
 * [디자인 기준]
 *   토큰을 새로 만들지 않는다. 전부 이 사이트가 이미 쓰고 있는 값이다.
 *     먹        #242424   layout.css 의 본문/제목색
 *     네이비    #162137   브랜드색. reset.css 의 "체크된 체크박스" 색이자 헤더 CTA 색 →
 *                         이 사이트에서 '선택됨/주요동작'을 뜻한다. 계산기의 '있음'·계산버튼도 이 색.
 *     헤어라인  #ddd      사이트 전역 테두리
 *     흐린글자  #878787 / #454545
 *     면        #f4f4f4
 *   카드 모서리 30px 10px 30px 10px 는 doc.css 의 .procedure li .box 모티브.
 *   자간 -.03em 은 사이트 전역 규약.
 *   그림자·그라디언트는 쓰지 않는다. 이 사이트 서브페이지에는 없다.
 *
 *   본문은 Pretendard, 금액 한 곳만 Noto Serif KR.
 *   이 서체는 header.php 가 이미 모든 페이지에 불러오고 있고
 *   layout.css 에서 메인의 큰 문장 딱 한 군데에만 쓰인다. 계산기에서도 같은 규칙으로,
 *   '예상 상속세' 금액 한 곳에만 쓴다.
 *
 * 모든 규칙을 .sih-calc 아래로 한정한다(sih- 접두사).
 * 사이트 CSS 와도, 제휴사 CSS 와도 섞이지 않게 하기 위함.
 * ===================================================================== */

.sih-calc,
.sih-calc *,
.sih-calc *:before,
.sih-calc *:after { box-sizing: border-box; }

.sih-calc {
	font-family: Pretendard, "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #242424;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: -.03em;
	text-align: left;
}

.sih-calc button { font-family: inherit; letter-spacing: inherit; cursor: pointer; }
.sih-calc input,
.sih-calc select { font-family: inherit; letter-spacing: inherit; }

.sih-calc :focus-visible { outline: 2px solid #162137; outline-offset: 2px; }

/* ---------------------------------------------------------------
 * 레이아웃
 * --------------------------------------------------------------- */
.sih-calc-grid { display: block; }

.sih-calc-panel {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 30px 10px 30px 10px;
	padding: 40px;
}

.sih-calc-side { margin-top: 20px; }

@media (min-width: 1025px) {
	.sih-calc-grid { display: flex; align-items: flex-start; gap: 20px; }
	.sih-calc-form { width: 60%; }
	.sih-calc-side { width: 40%; margin-top: 0; position: sticky; top: 20px; }
}

/* ---------------------------------------------------------------
 * 입력 패널
 * --------------------------------------------------------------- */
.sih-calc-panel-tit {
	margin: 0 0 30px;
	font-size: 24px;
	font-weight: 600;
	color: #242424;
	line-height: 1.4;
}

.sih-calc-sec { margin-bottom: 40px; }

.sih-calc-sec-tit {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #242424;
	font-size: 18px;
	font-weight: 600;
	color: #242424;
	line-height: 1.4;
}

/* 1. 상속인 정보 */
.sih-calc-heir { display: block; }
.sih-calc-heir .sih-calc-fld + .sih-calc-fld { margin-top: 20px; }

@media (min-width: 768px) {
	.sih-calc-heir { display: flex; gap: 20px; }
	.sih-calc-heir .sih-calc-fld { flex: 1 1 0; min-width: 0; }
	.sih-calc-heir .sih-calc-fld + .sih-calc-fld { margin-top: 0; }
}

.sih-calc-lab {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 500;
	color: #242424;
}

.sih-calc-sub { font-size: 13px; font-weight: 400; color: #878787; }
.sih-calc-note { display: block; margin-top: 2px; }

/* 입력 컨트롤 — reset.css 의 .input (44px / 1px #ddd / 15px) 을 따른다 */
.sih-calc-select,
.sih-calc-numbox,
.sih-calc-num {
	display: block;
	width: 100%;
	height: 44px;
	padding: 6px 16px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #fff;
	font-size: 15px;
	color: #242424;
	line-height: 1.5;
	outline: none;
	transition: border-color .15s;
}
.sih-calc-numbox,
.sih-calc-num { text-align: right; }

.sih-calc-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("/images/bbs/select.png");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.sih-calc-select:hover,
.sih-calc-numbox:hover,
.sih-calc-num:hover { border-color: #aaa; }

.sih-calc-select:focus,
.sih-calc-numbox:focus,
.sih-calc-num:focus { border-color: #162137; }

.sih-calc-num::-webkit-input-placeholder { color: #aaa; }
.sih-calc-num::-moz-placeholder { color: #aaa; }
.sih-calc-num:-ms-input-placeholder { color: #aaa; }

/* 2·3. 있음/없음 항목 */
.sih-calc-groups > .sih-calc-item + .sih-calc-item { margin-top: 10px; }

.sih-calc-item {
	border: 1px solid #ddd;
	border-radius: 20px 8px 20px 8px;
	padding: 20px 24px;
	transition: border-color .15s;
}
.sih-calc-item:hover { border-color: #aaa; }
.sih-calc-item.is-open { border-color: #162137; }

.sih-calc-item-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.sih-calc-item-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	color: #242424;
}
.sih-calc-item-name { vertical-align: middle; }

/* 도움말 */
.sih-calc-tipwrap { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }

.sih-calc-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	margin-left: 5px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 100%;
	background-color: #f4f4f4;
	color: #878787;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	flex-shrink: 0;
	transition: background-color .15s, color .15s, border-color .15s;
}
.sih-calc-tip:hover,
.sih-calc-tip.is-open { background-color: #162137; border-color: #162137; color: #fff; }

.sih-calc-bubble {
	position: absolute;
	z-index: 30;
	bottom: calc(100% + 9px);
	left: 0;
	width: 240px;
	max-width: 70vw;
	padding: 12px 14px;
	border-radius: 10px 4px 10px 4px;
	background-color: #162137;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s;
	pointer-events: none;
}
.sih-calc-bubble:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 15px;
	border: 6px solid transparent;
	border-top-color: #162137;
}
.sih-calc-tipwrap:hover .sih-calc-bubble,
.sih-calc-bubble.is-open { opacity: 1; visibility: visible; }

/* 있음/없음 — 선택된 쪽이 네이비. reset.css 의 체크박스 규약과 같은 뜻 */
.sih-calc-toggle {
	display: inline-flex;
	flex-shrink: 0;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
}

.sih-calc-tgl {
	min-width: 58px;
	height: 34px;
	padding: 0 14px;
	border: 0;
	background-color: #fff;
	color: #878787;
	font-size: 14px;
	font-weight: 500;
	line-height: 34px;
	transition: background-color .15s, color .15s;
}
.sih-calc-tgl + .sih-calc-tgl { border-left: 1px solid #ddd; }
.sih-calc-tgl:hover { color: #242424; }

/* 네이비는 '켜짐'에만 쓴다. '없음'까지 칠하면 페이지 전체가 네이비로 얼룩져
   어느 항목을 입력 중인지 구분되지 않는다. '없음'은 눌린 것만 보이면 된다. */
.sih-calc-tgl.is-on-no { background-color: #f4f4f4; color: #454545; }
.sih-calc-tgl.is-on-yes { background-color: #162137; color: #fff; }

/* 금액 입력 영역 */
.sih-calc-item-body {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}
.sih-calc-item-body[hidden] { display: none; }

.sih-calc-row + .sih-calc-row { margin-top: 12px; }
.sih-calc-row { display: block; }

.sih-calc-rowlab {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	color: #878787;
	font-weight: 400;
}

.sih-calc-amt { position: relative; display: block; }
.sih-calc-num { padding-right: 40px; }

.sih-calc-unit {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	color: #878787;
	font-size: 14px;
	pointer-events: none;
}

@media (min-width: 640px) {
	.sih-calc-row { display: flex; align-items: center; gap: 16px; }
	.sih-calc-rowlab { width: 42%; margin-bottom: 0; flex-shrink: 0; }
	.sih-calc-amt { width: 58%; flex: 1 1 auto; }
	.sih-calc-item-body.is-single .sih-calc-amt { width: 100%; }
}

/* 오류 문구 */
.sih-calc-error {
	margin: 0 0 16px;
	padding: 14px 18px;
	border: 1px solid #d9534f;
	border-radius: 8px;
	background-color: #fdf5f5;
	color: #c9302c;
	font-size: 14px;
	line-height: 1.6;
}
.sih-calc-error[hidden] { display: none; }

/* 버튼 — 헤더의 '상담신청' 필과 같은 형태 */
.sih-calc-btns { display: flex; gap: 10px; }

.sih-calc-btn {
	height: 56px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 28px;
	font-size: 16px;
	font-weight: 600;
	line-height: 54px;
	transition: background-color .15s, color .15s, border-color .15s;
}

.sih-calc-btn-main {
	flex: 1 1 auto;
	background-color: #162137;
	color: #fff;
}
.sih-calc-btn-main:hover { background-color: #26344f; }
.sih-calc-btn-main.is-busy { opacity: .55; cursor: progress; }

.sih-calc-btn-ghost {
	flex: 0 0 auto;
	min-width: 110px;
	border-color: #ddd;
	background-color: #fff;
	color: #878787;
}
.sih-calc-btn-ghost:hover { border-color: #242424; color: #242424; }

/* ---------------------------------------------------------------
 * 결과 패널
 * --------------------------------------------------------------- */
/* 입력 영역과 같은 흰 카드로 두면 '결과'가 눈에 들어오지 않는다.
   이 사이트의 구 계산기도 결과박스를 #162137 + 흰 글자로 썼다(doc.css 의 .calculator .box-1).
   그 처리를 이어받는다. 회색조는 전부 네이비를 흰색 쪽으로 흐린 값이다(색을 새로 들이지 않는다). */
.sih-calc-res {
	padding: 40px 36px;
	border-color: #162137;
	background-color: #162137;
}

.sih-calc-res-tit {
	margin: 0 0 30px;
	font-size: 24px;
	font-weight: 600;
	color: #fff;
	line-height: 1.4;
}

/* ★ 이 페이지의 단 하나뿐인 큰 문장.
   메인 페이지가 Noto Serif KR 를 큰 문장 한 곳에만 쓰는 것과 같은 규칙이다.
   네이비 면 위의 흰 블록이라 금액이 가장 먼저 읽힌다. */
.sih-calc-total {
	margin-bottom: 36px;
	padding: 28px 28px 30px;
	border-radius: 20px 8px 20px 8px;
	background-color: #fff;
}

.sih-calc-total-lab {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 500;
	color: #878787;
}

.sih-calc-total-line { display: flex; align-items: baseline; gap: 12px; }
.sih-calc-total-line[hidden] { display: none; }
.sih-calc-total-line + .sih-calc-total-line { margin-top: 14px; padding-top: 14px; border-top: 1px solid #ddd; }

.sih-calc-total-tag {
	flex-shrink: 0;
	width: 28px;
	font-size: 13px;
	font-weight: 500;
	color: #878787;
}
.sih-calc-total-tag[hidden] { display: none; }

.sih-calc-total-wrap { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: right; }

.sih-calc-total-num {
	display: inline-block;
	font-family: "Noto Serif KR", "Nanum Myeongjo", serif;
	font-size: 34px;
	font-weight: 600;
	color: #162137;
	white-space: nowrap;
	letter-spacing: -.04em;
	line-height: 1.25;
	transform-origin: right center;
}

@media (min-width: 768px) {
	.sih-calc-total-num { font-size: 40px; }
}

/* 상세 내역 — 네이비 면 위에서는 헤어라인도 흰색을 흐려 쓴다 */
.sih-calc-detail-tit {
	margin: 0 0 4px;
	padding-bottom: 12px;
	border-bottom: 2px solid rgba(255, 255, 255, .4);
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.sih-calc-dline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.sih-calc-dkey { font-size: 15px; font-weight: 500; color: #c3ccdb; }
.sih-calc-dval { font-size: 14px; color: #8f9bb0; white-space: nowrap; }
.sih-calc-dval b { font-size: 18px; font-weight: 600; color: #fff; }

/* 공제 내역 — 상위 항목에 딸린 것이라 한 단 눌러 놓는다 */
.sih-calc-dsub {
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	background-color: rgba(0, 0, 0, .18);
}

.sih-calc-dsub-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: #8f9bb0;
}
.sih-calc-dsub-line + .sih-calc-dsub-line { margin-top: 10px; }
.sih-calc-dsub-line[hidden] { display: none; }
.sih-calc-dsub-line b { color: #e7ebf2; font-weight: 600; }

/* 왜 일괄공제가 0 인지 그 자리에서 알려준다 */
.sih-calc-dnote {
	margin: 10px 0 0;
	font-size: 13px;
	color: #8f9bb0;
	line-height: 1.6;
}
.sih-calc-dnote[hidden] { display: none; }

/* 세율표 */
.sih-calc-ratebox { padding-top: 30px; }

.sih-calc-ratetit { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #fff; }

.sih-calc-ratewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sih-calc-ratetbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.sih-calc-ratetbl th {
	padding: 10px 12px;
	border-top: 2px solid rgba(255, 255, 255, .4);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}
.sih-calc-ratetbl td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	color: #8f9bb0;
	white-space: nowrap;
}
.sih-calc-ratetbl .tc { text-align: center; }
.sih-calc-ratetbl .tr { text-align: right; }
.sih-calc-ratetbl .sih-calc-rate { color: #fff; font-weight: 600; }

.sih-calc-disclaimer {
	margin: 30px 0 0;
	font-size: 13px;
	color: #8f9bb0;
	line-height: 1.7;
}

/* ---------------------------------------------------------------
 * 자사 페이지 하단 안내 (기존 계산기 페이지의 문구 스타일 유지)
 * --------------------------------------------------------------- */
.sih-calc-notice {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
	color: #878787;
	line-height: 1.6;
}
.sih-calc-notice li { margin-bottom: 5px; padding-left: 10px; text-indent: -10px; }
.sih-calc-notice li.sih-calc-notice-tel { margin-top: 7px; padding-left: 20px; text-indent: 0; color: #242424; }

/* ---------------------------------------------------------------
 * 자사 서브페이지 안에 놓일 때 (/inheritance/calculator.php)
 * 다른 서브페이지와 같은 상단 구분선(doc.css 의 .border-top)을 유지한다.
 * --------------------------------------------------------------- */
.sih-calc-page { padding-top: 40px; border-top: 2px solid #242424; }

/* ---------------------------------------------------------------
 * 제휴사 iframe 단독 렌더링 (/api/v1/calc_form.php)
 * --------------------------------------------------------------- */
.sih-calc-standalone { margin: 0; padding: 20px; background-color: #fff; }
.sih-calc-standalone .sih-calc { max-width: 1400px; margin: 0 auto; }
.sih-calc-standalone .sih-calc-side { position: static; }

.sih-calc-head { max-width: 1400px; margin: 0 auto 24px; padding-bottom: 20px; border-bottom: 2px solid #242424; }
.sih-calc-head h1 {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	color: #242424;
	letter-spacing: -.03em;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.sih-calc-standalone { padding: 40px; }
	.sih-calc-head h1 { font-size: 30px; }
}

.sih-calc-embed-error {
	max-width: 640px;
	margin: 40px auto;
	padding: 32px 24px;
	border: 1px solid #ddd;
	border-radius: 20px 8px 20px 8px;
	background-color: #fff;
	font-family: Pretendard, "Malgun Gothic", sans-serif;
	font-size: 15px;
	color: #c9302c;
	line-height: 1.7;
	letter-spacing: -.03em;
	text-align: center;
}

/* ---------------------------------------------------------------
 * 모바일
 * --------------------------------------------------------------- */
@media (max-width: 767px) {
	.sih-calc { font-size: 14px; }
	.sih-calc-page { padding-top: 25px; }
	.sih-calc-panel { padding: 24px 18px; border-radius: 20px 8px 20px 8px; }
	.sih-calc-res { padding: 24px 18px; }
	.sih-calc-panel-tit,
	.sih-calc-res-tit { margin-bottom: 22px; font-size: 20px; }
	.sih-calc-sec { margin-bottom: 30px; }
	.sih-calc-sec-tit { font-size: 16px; }
	.sih-calc-item { padding: 16px; border-radius: 14px 6px 14px 6px; }
	.sih-calc-item-label { font-size: 14px; }
	.sih-calc-total { padding: 22px 18px; }
	.sih-calc-total-num { font-size: 28px; }
	.sih-calc-btn { height: 50px; line-height: 48px; font-size: 15px; border-radius: 25px; }
	.sih-calc-btn-ghost { min-width: 90px; padding: 0 18px; }
	.sih-calc-notice { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.sih-calc *,
	.sih-calc *:before,
	.sih-calc *:after { transition: none !important; }
}