/* 사이트 공통 디자인 톤(Astra 기본값)에 맞춘 회색조 텍스트 계층 + 기본 시스템
   폰트 스택, border-radius 6px. 다른 계산기 플러그인과 톤을 맞춘다. */

.ptc-widget {
	max-width: 620px;
	padding: 20px;
	background: #fff;
	border: 1px solid #e1e1e1;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", "Malgun Gothic", sans-serif;
	color-scheme: light;
	color: #3a3a3a;
}

.ptc-field {
	margin-bottom: 16px;
}

.ptc-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #3a3a3a;
}

.ptc-input {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	color: #3a3a3a;
	border: 1px solid #cccccc;
	border-radius: 6px;
	box-sizing: border-box;
}

.ptc-input:focus {
	outline: none;
	border-color: #0274be;
}

.ptc-amount-korean {
	margin: 6px 0 0;
	font-size: 12px;
	color: #767676;
	min-height: 16px;
}

.ptc-help-text {
	margin: 6px 0 0;
	font-size: 12px;
	color: #999999;
}

.ptc-normal-age-note {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #0274be;
	min-height: 16px;
}

.ptc-result {
	margin: 18px 0;
}

.ptc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.ptc-table th,
.ptc-table td {
	padding: 10px 8px;
	text-align: left;
	border-bottom: 1px solid #f0f0f0;
}

.ptc-table thead th {
	font-size: 11px;
	font-weight: 600;
	color: #999999;
	border-bottom: 1px solid #e1e1e1;
}

.ptc-table tbody th {
	font-weight: 700;
	color: #3a3a3a;
	white-space: nowrap;
}

.ptc-row-normal {
	background: #f7f7f7;
}

.ptc-row-normal td,
.ptc-row-normal th {
	font-weight: 700;
}

.ptc-breakeven-explain {
	margin: 12px 0 0;
	font-size: 12px;
	color: #767676;
	line-height: 1.6;
}

.ptc-badge {
	display: inline-block;
	margin: 0 4px 4px 0;
	padding: 2px 7px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	border-radius: 4px;
	white-space: nowrap;
}

.ptc-badge-basic-pension {
	color: #a15c00;
	background: rgba(240, 116, 0, 0.12);
}

.ptc-badge-health-insurance {
	color: #b42318;
	background: rgba(224, 36, 44, 0.1);
}

.ptc-badge-none {
	color: #cccccc;
}

.ptc-summary {
	margin: 0 0 18px;
	padding: 16px;
	background: #f7f7f7;
	border: 1px solid #e1e1e1;
	border-radius: 6px;
}

.ptc-summary-title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: #3a3a3a;
}

.ptc-summary .ptc-table {
	background: #fff;
}

/* 특정 나이까지 산다면 얼마인지 비교하는 표는 시나리오 3개를 가로로 나란히
   비교해서 보는 게 핵심이라, 다른 표처럼 카드로 바꾸지 않고 표 형태를
   그대로 유지한다. 대신 화면이 좁으면 가로 스크롤이 되게 하고, 첫 칸
   (시나리오 이름)은 스크롤해도 계속 보이도록 고정한다. */
.ptc-summary-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 6px;
}

.ptc-summary-table {
	min-width: 420px;
}

.ptc-summary-table th:first-child,
.ptc-summary-table td:first-child {
	position: sticky;
	left: 0;
	background: #fff;
	box-shadow: 1px 0 0 #f0f0f0;
}

.ptc-summary-table .ptc-row-normal td:first-child,
.ptc-summary-table .ptc-row-normal th:first-child {
	background: #f7f7f7;
}

.ptc-best {
	font-weight: 700;
	color: #0e8a41;
	background: rgba(24, 193, 92, 0.1);
}

.ptc-summary-note {
	margin: 10px 0 0;
	font-size: 11px;
	color: #999999;
	line-height: 1.6;
}

.ptc-cost-box {
	margin: 0 0 16px;
	padding: 14px 16px;
	background: rgba(2, 116, 190, 0.06);
	border: 1px solid rgba(2, 116, 190, 0.25);
	border-left: 3px solid #0274be;
	border-radius: 6px;
}

.ptc-cost-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: #055a94;
}

.ptc-cost-list {
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ptc-cost-list li {
	font-size: 12px;
	color: #545454;
	line-height: 1.6;
}

.ptc-cost-list strong {
	color: #3a3a3a;
}

.ptc-disclaimer {
	margin: 0;
	font-size: 11px;
	color: #999999;
	line-height: 1.6;
}

.ptc-disclaimer a {
	color: #767676;
}

/* 화면이 좁아지면 6열짜리 주요 비교표는 가로 스크롤 없이 보기 어려워진다.
   그래서 이 표만 카드 형태로 바꾼다(행 하나 = 카드 하나, 셀 하나하나를
   "라벨: 값" 줄로). 각 셀의 data-label 속성을 ::before로 라벨처럼 보여준다.
   ".ptc-result" 안의 표에만 적용해, 가로 비교가 핵심인 누적액 비교표
   (.ptc-summary-table)는 표 형태를 그대로 유지한다 - 그 표는 위에서 별도로
   가로 스크롤 + 첫 칸 고정으로 처리한다. */
@media (max-width: 640px) {
	.ptc-result .ptc-table thead {
		display: none;
	}

	.ptc-result .ptc-table,
	.ptc-result .ptc-table tbody,
	.ptc-result .ptc-table tr,
	.ptc-result .ptc-table th,
	.ptc-result .ptc-table td {
		display: block;
		width: 100%;
	}

	.ptc-result .ptc-table tr {
		margin-bottom: 10px;
		padding: 4px 12px;
		border: 1px solid #e1e1e1;
		border-radius: 6px;
	}

	.ptc-result .ptc-row-normal {
		border-color: #0274be;
	}

	.ptc-result .ptc-table tbody th {
		padding: 10px 0 8px;
		font-size: 14px;
		border-bottom: 1px solid #f0f0f0;
	}

	.ptc-result .ptc-table td {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 4px 10px;
		padding: 8px 0;
		border-bottom: 1px solid #f5f5f5;
		text-align: right;
	}

	.ptc-result .ptc-table td:last-child {
		border-bottom: none;
	}

	.ptc-result .ptc-table td::before {
		content: attr(data-label);
		flex: 1 0 auto;
		font-size: 11px;
		font-weight: 600;
		color: #999999;
		text-align: left;
	}

	.ptc-result .ptc-table td[data-label="참고"] {
		justify-content: flex-end;
	}

	/* 누적액 비교표는 표 형태 유지 + 좁은 화면에 맞춰 글자·여백만 줄인다. */
	.ptc-summary-table {
		min-width: 360px;
		font-size: 12px;
	}

	.ptc-summary-table th,
	.ptc-summary-table td {
		padding: 8px 6px;
	}
}

@media (max-width: 480px) {
	.ptc-result .ptc-table {
		font-size: 12px;
	}
}