/* =========================================================
   혜택365 · 계산기(tools) 전용 스타일

   [구성]
   1. 계산기 목록 탭 / 헤더        — 모든 계산기 공통
   2. 계산기 공통 (shell·폼·금액·버튼·결과) — 계산기마다 재사용
   3. 실업급여 계산기 전용          — 재직기간(회사 반복 입력) 등
   4. 모바일

   ▸ 새 계산기(연봉·퇴직금·연차)를 만들 땐 2번 공통을 그대로 쓰고,
     그 계산기에만 필요한 입력만 "전용" 형태로 추가하면 됩니다.
   ▸ 색·반경은 main.css의 CSS 변수를 그대로 사용합니다.
   ▸ 이 버전은 세로 여백을 전체적으로 축소했습니다(콤팩트).
========================================================= */

/* =========================================================
   1. 계산기 목록 탭 / 헤더
========================================================= */

/* 탭 영역: 본문 폭에 맞추고 흰 박스와 분리 */
.h365-tools-tabs-inner {
	max-width: min(600px, calc(100% - 32px));
	margin: 0 auto;
}

.h365-tools-tabs-wrap {
	margin: 0 0 16px;
}

.h365-tools-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 12px;
	color: var(--muted-color);
	font-size: 15px;
	font-weight: 500;
}

.h365-tools-back:hover {
	color: var(--link-color);
}

.h365-tools-tabs {
	display: flex;
	gap: 2px;
	background: #F0F4FA;
	color: #344054;
	overflow-x: auto;
	padding: 4px 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

html.dark-mode .h365-tools-tabs {
	color: #E4E7EC;
	background: #1F1F24;
}

.h365-tools-tabs::-webkit-scrollbar {
	display: none;
}

.h365-tools-tab {
	flex: 0 0 auto;
	padding: 10px 14px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background: var(--content-bg);
	color: var(--muted-color);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition:
		color 0.18s ease,
		background-color 0.18s ease,
		border-color 0.18s ease;
}

html.dark-mode .h365-tools-tab {
	background: #28292F;
	color: var(--muted-color);
}

.h365-tools-tab:hover {
	color: var(--link-color);
	border-color: var(--link-color);
}

.h365-tools-tab.is-active {
	background: var(--link-color);
	border-color: var(--link-color);
	color: #ffffff;
}

.h365-tools-header {
	margin-bottom: 14px;
}

.h365-tools-title {
	margin: 0;
	color: var(--text-color);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.04em;
}

/* =========================================================
   2. 계산기 공통  (모든 계산기 재사용)
========================================================= */

/* ---- Shell / Layout ---- */

.h365-calc {
	margin: 4px 0 8px;
}

/*
 * 기본은 1열(세로) 배치 — 사이트 본문 폭(600px)에 맞춤.
 * 나중에 계산기 페이지 폭을 넓히면 아래 미디어쿼리만 살려 2열로 바꿀 수 있습니다.
 *   @media (min-width: 720px) { .h365-calc-grid { grid-template-columns: 1fr 1fr; } }
 */
.h365-calc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.h365-calc-panel {
	padding: 16px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	background: var(--content-bg);
}

/* 결과 패널은 폼과 살짝 띄워 구분 */
.h365-calc-result {
	margin-top: 2px;
}

/* 계산 전에는 결과 패널 숨김 (shortcode의 hidden 속성과 연동) */
.h365-calc-result[hidden] {
	display: none !important;
}

/* PC에서 계산기 영역만 좌우로 넓혀 2열 확보 (768px 이상) */
@media (min-width: 768px) {
	.content-area.h365-single-tools-wrap {
		max-width: 600px;
		width: min(600px, calc(100% - 32px));
	}
	/* 계산 전에도 결과 패널 표시 (PC/모바일 공통) */
	.h365-calc-result[hidden] {
		display: block !important;
	}
}

/* ---- 폼 기본 ---- */

.h365-calc-field {
	margin-bottom: 12px;
}

.h365-calc-field:last-child {
	margin-bottom: 0;
}

/* 계산기 상단 설명 박스 */
.h365-calc-desc {
	margin: 0 0 12px;
	padding: 14px 16px;
	border-radius: 11px;
	background: #F8F9FC;
	color: #475467;
	font-size: 13px;
	line-height: 1.7;
	word-break: keep-all;
}

html.dark-mode .h365-calc-desc {
	color: #E4E4E5;
	background: #1F1F24;
}


.h365-calc-label {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 6px;
	color: var(--text-color);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.h365-calc-hint {
	color: var(--muted-color);
	font-size: 12px;
	font-weight: 500;
}

/* 라벨 + 보조 컨트롤(체크박스 등)을 한 줄에 */
.h365-calc-field-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.h365-calc-field-head .h365-calc-label {
	margin-bottom: 0;
}

/* 라벨 바로 옆에 붙이는 변형 (space-between 해제) */
.h365-calc-field-head.is-inline {
	justify-content: flex-start;
	gap: 12px;
}

/* ---- 입력 요소 공통 ---- */

.h365-calc input[type="text"],
.h365-calc input[type="date"],
.h365-calc select {
	width: 100%;
	height: 38px;
	padding: 0 13px;
	border: 1px solid var(--border-color);
	border-radius: 11px;
	background: #F8F9FC;
	color: var(--text-color);
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

html.dark-mode .h365-calc input[type="text"],
html.dark-mode .h365-calc input[type="date"],
html.dark-mode .h365-calc select {
	background: #1F1F24;
}

.h365-calc input[type="text"]:focus,
.h365-calc input[type="date"]:focus,
.h365-calc select:focus {
	border-color: var(--link-color);
	box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.h365-calc input::placeholder {
	color: var(--muted-color);
}

/* 체크박스 라벨 */
.h365-calc-check {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #475467;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}

html.dark-mode .h365-calc-check {
	color: #9CA3AF;
}

.h365-calc-check input {
	width: 16px;
	height: 16px;
	accent-color: var(--link-color);
	cursor: pointer;
}

/* ---- 금액 입력 (미리보기 + 인풋 + 원) ---- */

.h365-calc-money-row,
.h365-calc-money-line {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.h365-calc-money-line:last-child {
	margin-bottom: 0;
}

/* 항목명(1개월 전 등) */
.h365-calc-money-name {
	flex: 0 0 56px;
	color: var(--text-color);
	font-size: 14px;
	font-weight: 500;
}

/* 왼쪽 파란 미리보기(예: 100만원) */
.h365-calc-money-preview {
	position: absolute;
	top: 50%;
	left: 13px;
	transform: translateY(-50%);
	color: var(--link-color);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
}

.h365-calc-money-input {
	position: relative;
	flex: 1;
	min-width: 0;
}

.h365-calc .h365-calc-money-input input[type="text"] {
	padding-left: 78px;
	padding-right: 42px;
	text-align: right;
}

/* 인풋 오른쪽 '원' */
.h365-calc-won {
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	color: var(--muted-color);
	font-size: 14px;
	pointer-events: none;
}

/* ---- 버튼 (계산하기 / 결과 복사하기 공통 베이스) ---- */

.h365-calc-submit,
.h365-calc-copy {
	width: 100%;
	border: 0;
	border-radius: 11px;
	background: var(--link-color);
	color: #ffffff;
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.18s ease, transform 0.12s ease;
}

.h365-calc-submit:hover,
.h365-calc-copy:hover {
	opacity: 0.92;
}

.h365-calc-submit {
	height: 42px;
	margin-top: 4px;
	font-size: 15px;
}

.h365-calc-submit:active {
	transform: translateY(1px);
}

.h365-calc-copy {
	height: 44px;
	margin-top: 12px;
	font-size: 15px;
}

/* 계산하기 + 초기화 (계산하기 넓게 / 초기화 좁게) */
.h365-calc-actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.h365-calc-actions .h365-calc-submit {
	flex: 0 0 70%;
	margin-top: 0;
}

/* 초기화: 아이콘 정사각 버튼 */
.h365-calc-reset-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--border-color);
	border-radius: 11px;
	background: transparent;
	color: var(--text-color);
	cursor: pointer;
	transition:
		color 0.18s ease,
		border-color 0.18s ease,
		transform 0.3s ease;
}

.h365-calc-reset-icon:hover {
	color: var(--link-color);
	border-color: var(--link-color);
	transform: rotate(-90deg);
}

.h365-calc-reset-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* 재직기간 옆 + 버튼 */
.h365-calc-add-inline {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--border-color);
	border-radius: 11px;
	background: transparent;
	color: var(--text-color);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition:
		color 0.18s ease,
		border-color 0.18s ease;
}

.h365-calc-add-inline:hover {
	color: var(--link-color);
	border-color: var(--link-color);
}

/* ---- 결과 ---- */

.h365-calc-result-title {
	margin: 0 0 12px !important;
	color: var(--text-color);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.h365-calc-result-list {
	margin: 0;
}

.h365-calc-result-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border-color);
}

.h365-calc-result-item dt {
	margin: 0;
	color: var(--muted-color);
	font-size: 14px;
	white-space: nowrap;
}

.h365-calc-result-item dd {
	margin: 0;
	color: var(--text-color);
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	word-break: keep-all;
	white-space: nowrap;
}

.h365-calc-result-item.is-total {
	border-bottom: 0;
}

.h365-calc-result-item.is-total dt {
	color: var(--text-color);
	font-weight: 700;
}

.h365-calc-result-item.is-total dd {
	color: var(--link-color);
	font-size: 20px;
	font-weight: 800;
}

/* 안내/오류 메시지 */
.h365-calc-message {
	min-height: 18px;
	margin: 10px 0 0;
	color: var(--muted-color);
	font-size: 13px;
	line-height: 1.55;
	word-break: keep-all;
}

.h365-calc-message.is-error {
	color: #F0446E;
}

.h365-calc-message.is-warn {
	color: #C2410C;
}

html.dark-mode .h365-calc-message.is-warn {
	color: #FBBF77;
}

/* =========================================================
   3. 실업급여 계산기 전용  (재직기간 반복 입력)
========================================================= */

.h365-calc-company {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.h365-calc-daterange {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

/* 회사 행 안의 날짜 인풋은 공통보다 한 단계 낮게(콤팩트) */
.h365-calc .h365-calc-daterange input[type="date"] {
	min-width: 0;
	flex: 1;
	height: 38px;
	padding: 0 8px;
	font-size: 14px;
}

.h365-calc-tilde {
	flex: 0 0 auto;
	color: var(--muted-color);
}

.h365-calc-company-remove {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted-color);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.h365-calc-company-remove:hover {
	color: #2D3748;
}

/* =========================================================
   4. 모바일
========================================================= */

@media (max-width: 640px) {

	/* 공통 */
	.h365-tools-title {
		font-size: 21px;
	}

	.h365-calc-panel {
		padding: 15px;
	}

	.h365-calc-money-name {
		flex-basis: 48px;
		font-size: 13px;
	}

	/* 실업급여 전용 */
	.h365-calc-company {
		flex-wrap: wrap;
	}

	.h365-calc-daterange {
		flex: 1 1 100%;
	}
}