/* ktbf.css — KTBF 계산기 전용 스타일 (GeneratePress 위에 얹는 최소 스타일) */
/* R2-2: GP .site-content가 flex 컨테이너라 폭이 내용으로 수축되는 문제 방지 */
.kiin-calc-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 16px;
	width: 100%;
	flex: 1 1 100%;
}
.kiin-title { margin-bottom: 8px; }
.kiin-fresh {
	color: #666;
	font-size: 0.85em;
	margin: 4px 0 12px;
}

/* R3-1: 탭줄(.kiin-tabs, flex) 안 오른쪽 끝에 배치 — 흐름에서 분리해 본문 레이아웃 점프 방지 */
.kiin-status {
	margin-left: auto;
	align-self: center;
	padding: 0 8px;
	min-height: 0;
	font-size: 0.85em;
}
.kiin-status.error { color: #cc2222; font-weight: 600; }
.kiin-note {
	background: #f5f7fa;
	border-left: 4px solid #4a7dbd;
	padding: 8px 12px;
	font-size: 0.9em; margin: 8px 0;
}
.kiin-reserved { border-left-color: #aaa; color: #777; }

/* 탭 */
/* R3-5(실시간 추가): 스크롤 시 탭줄 상단 고정 — 겹침 방지용 불투명 배경 필수
   (background는 주변 색과 동일하게 사용자 지정) */
.kiin-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #4a7dbd;
	margin: 12px 0 0;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
	z-index: 100;
	background: #F7F8F9;
}

/* R3-5: 로그인 상태 WP 관리자 바 높이만큼 고정 위치 보정(PC 32px / 모바일 46px) */
body.admin-bar .kiin-tabs { top: 32px; }
@media (max-width: 782px) { body.admin-bar .kiin-tabs { top: 46px; } }
.kiin-tab {
	border: 1px solid #ccc;
	border-bottom: none;
	background: #eee;
	padding: 8px 18px;
	cursor: pointer;
	border-radius: 6px 6px 0 0;
	font-size: 0.95em;
}
.kiin-tab.active {
	background: #4a7dbd;
	color: #fff;
	border-color: #4a7dbd;
}
.kiin-panel { padding: 14px 0; }
/* 입력부 */
/* 테두리 5px는 사용자(JG님)가 의도한 두께 — 얇게 되돌리지 말 것 */
.kiin-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	background: #fafafa;
	border: 5px solid #e3e3e3;
	border-radius: 8px;
	padding: 12px;
}
.kiin-field {
	display: flex;
	flex-direction: column;
	font-size: 0.85em;
	gap: 2px;
}
.kiin-field-l { color: #555; }

/* ── 계산기 입력 요소 색상 ───────────────────────────────────────────────
   테마(GeneratePress) 동적 CSS가 input[type=…]에 background: var(--base-2)(#f7f8f9),
   border-color: var(--base)(#f0f0f0)를 넣는데, 그 CSS가 실제 페이지에서 이 파일보다
   '뒤'에 실린다. 따라서 특정성이 같으면 테마가 이긴다 — 앱 루트 #kiin-app을 붙여
   확실히 우선하도록 한다. 아래 규칙들은 모두 이 접두사를 유지할 것. */
#kiin-app input, #kiin-app select {
	border: 1px solid #bbb;
	border-radius: 4px;
	background: #fff;
	color: #222;
}
#kiin-app .kiin-controls input, #kiin-app .kiin-controls select { padding: 4px 6px; }

/* 숫자 입력(콜·CD91·통안1Y·헤지 기준 계약수·휴일수) 테두리 강조 — 사용자 지정 #4a7dbd */
#kiin-app .kiin-controls input[type="number"] { border-color: #4a7dbd; }

/* '계약수 매트릭스' 제목 안의 기준 계약수 입력 — 위 숫자 입력과 같은 테두리 색.
   vertical-align: 기본값(baseline)이면 상자가 글자보다 아래로 처지므로 가운데 정렬한다. */
#kiin-app input.kiin-base-in {
	width: 64px;
	text-align: right;
	border-color: #4a7dbd;
	vertical-align: middle;
	position: relative;
	top: -0.12em;
}
/* 기준 계약수 숫자와 내장 스핀 버튼 사이 5px 간격 — 버튼 의사요소의 왼쪽 여백이라
   버튼은 제자리에 있고 우측 정렬된 숫자만 왼쪽으로 5px 밀린다.
   (input의 padding-right는 실측 결과 숫자가 안 움직이고 버튼만 안쪽으로 밀려 요구와 반대.
    Firefox는 이 의사요소가 없어 간격이 안 생기지만 기능에는 영향 없음) */
#kiin-app input.kiin-base-in::-webkit-inner-spin-button {
	margin-left: 5px;
}
.kiin-controls details {
	flex-basis: 100%;
	font-size: 0.85em;
}
.kiin-controls details .kiin-field {
	display: inline-flex;
	margin-right: 10px;
}

/* 표 — 페이지 몸통은 수평 스크롤 금지, 표 래퍼만 스크롤 */
.kiin-tscroll {
	overflow-x: auto;
	margin: 8px 0 16px;
}

.kiin-table {
	border-collapse: collapse;
	font-size: 0.85em;
	white-space: nowrap;
	min-width: 480px;
}
.kiin-table th {
	background: #4a7dbd;
	color: #fff;
	padding: 6px 10px;
	border: 1px solid #3a6dad;
}
.kiin-table td {
	padding: 5px 10px;
	border: 1px solid #ddd;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.kiin-table td:first-child {
	text-align: left;
	background: #f5f7fa;
	font-weight: 600;
}
.kiin-table tr:nth-child(even) td { background: #fbfcfe; }
.kiin-table tr:nth-child(even) td:first-child { background: #eef2f8; }
.kiin-lookup td:last-child { font-weight: 700; }

/* 조견표 '오프셋' 열 — 헤더는 3칸 병합, 본문은 3칸(라벨 / 중심 표기 / ▲▼)으로 나누고
   내부 구분선을 투명 처리해 시각적으로는 한 칸처럼 보이게 한다. 중심 표기 칸은
   값이 없을 때도 숨김 상태로 자리를 지키므로 ▲▼를 눌러도 열 폭이 밀리지 않는다. */
.kiin-lookup .kiin-off {
	background: #f5f7fa;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}
.kiin-lookup tr:nth-child(even) .kiin-off { background: #eef2f8; }
.kiin-lookup .kiin-off-a { border-right-color: transparent; }
.kiin-lookup .kiin-off-b {
	border-left-color: transparent;
	border-right-color: transparent;
	padding-left: 0;
	padding-right: 0;
	font-weight: 400;
	color: #4a7dbd;
}
.kiin-lookup .kiin-off-c {
	border-left-color: transparent;
	padding-left: 4px;
}

/* 요약 카드 */
.kiin-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px; margin: 14px 0;
}
.kiin-card {
	border: 1px solid #dde3ec;
	border-radius: 8px;
	padding: 10px 12px;
	background: #fff;
}
.kiin-card-t {
	font-size: 0.8em;
	color: #666;
}
.kiin-card-v {
	font-size: 1.5em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.kiin-card-s {
	font-size: 0.8em;
	color: #4a7dbd;
}

/* YTM 조정 버튼 */
.kiin-mini {
	border: 1px solid #bbb;
	background: #f2f2f2;
	border-radius: 4px;
	padding: 2px 7px;
	margin: 0 1px;
	cursor: pointer;
	font-size: 0.85em;
}
.kiin-mini:hover { background: #e2e8f2; }

/* R3-3/4: 결제(예정)가 '조정' 열 + YTM 탭 스핀 버튼 — 사용자 엑셀 [C] 지정 회색 */
.kiin-spin {
	background: #c8c8c8;
	border-color: #a8a8a8;
}
.kiin-spin:hover { background: #b8bfd0; }
.kiin-ytm-in {
	width: 90px;
	text-align: right;
}

/* R2-2: YTM 입력 내장(브라우저 기본) 스피너 숨김 — ▲/▼ 버튼(.kiin-mini)만 사용 */
.kiin-ytm-in::-webkit-outer-spin-button, .kiin-ytm-in::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.kiin-ytm-in {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* R2-2: 중간값 보기(details) — 클릭 전에도 구분선 노출, 다음 제목과 간격을 위쪽 수준으로 */
.kiin-dbg summary { cursor: pointer; }
.kiin-dbg {
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
	margin: 6px 0 14px;
}

/* 간격[A]/[B] 교환 — 표 자체에 테마의 아래 여백(약 21.7px)이 붙어 있어 보이는 간격은
   [A] 표→'중간값 보기' ≈ 24px, [B] 수평선→다음 월물 제목 ≈ 40px가 된다.
   :has() 미지원 브라우저에서는 블록 전체가 무시되어 종전 간격(A≈40, B≈24)이 그대로 유지된다. */
@supports selector(.kiin-tscroll:has(+ .kiin-dbg)) {
	.kiin-tscroll:has(+ .kiin-dbg) { margin-bottom: 0; }
	.kiin-dbg { margin-top: 0; }
	.kiin-dbg + h3 { margin-top: 37px; }
	.kiin-dbg + h4 { margin-top: 37px; }
}

/* R2-2: 표 안 소형 인라인 입력(결제(예정)가 표의 '산출일 YTM(평균)' 열).
   테마 CSS(main.css, 실서버는 main.min.css)의 input[type="text"] … input[type="number"] 묶음
   규칙이 padding: 10px 15px를 넣는데, 그 선택자 특정성이 (0,1,1)로 클래스 하나(0,1,0)보다
   높아 로드 순서와 무관하게 이긴다.
   위 87~91행 규약대로 #kiin-app + 요소명을 붙여 (1,1,1)로 확실히 우선하게 한다. */
#kiin-app input.kiin-cell-in {
	width: 84px;
	text-align: right;
	padding: 0 5px 0 0;
	appearance: textfield;             /* Firefox 등 — 네이티브 스핀 버튼 제거 */
	-moz-appearance: textfield;
}
/* 네이티브 스핀 버튼 숨김 — 값 증감은 옆 '조정' 열 ▲▼(±1bp)가 담당해 기능이 중복이었다.
   숫자 키패드(type=number)는 유지하고 수기 입력도 그대로 가능하다. */
#kiin-app input.kiin-cell-in::-webkit-outer-spin-button,
#kiin-app input.kiin-cell-in::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

/* 결제(예정)가 '대비' 열 자리 유지 — ktbf.js settleOffCell() 참조.
   숨김 폭 지시자(.kiin-offw-h)는 height: 0 + visibility: hidden으로 높이·표시에는 관여하지
   않고 최대 콘텐츠 폭만 만들어, ▲▼로 오프셋이 바뀌어도 열 폭이 고정된다. */
#kiin-app .kiin-offw {
	display: inline-block;
	text-align: right;
}
#kiin-app .kiin-offw-h {
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	-webkit-user-select: none;
	user-select: none;                 /* 표 복사 시 숨김 문자열이 섞이지 않게 */
}

/* 자동 YTM 미확보 경고 (추가 요구 — 통제자 정정) */
.kiin-warn {
	background: #fff3e6;
	border-left: 4px solid #e08a00;
	padding: 8px 12px;
	font-size: 0.9em;
	margin: 8px 0;
	color: #7a4a00;
}
#kiin-app input.kiin-ytm-missing {
	border-color: #e08a00;
	background: #fff8f0;
}

/* 모바일 */
@media (max-width: 600px) {
    .kiin-controls {
		flex-direction: column;
		align-items: stretch;
	}
    .kiin-tab {
		padding: 7px 10px;
		font-size: 0.85em;
	}
}