@charset "UTF-8";
/* =========================================================
   건강정보 상세 - 읽어주기(TTS) 전용 스타일
   적용 페이지: gnrlzHealthInfoView / gnrlzHealthInfoYouthView / gnrlzHealthInfoOldView
   (프로토타입: gnrlzHealthInfoViewTtsSample.jsp 에서 이관)
   ========================================================= */

/* 현재 낭독 중인 섹션 하이라이트 */
.contents-Div.tts-active,
.contents-Div2.tts-active {
	background: #eef8fb;
	outline: 3px solid #15B2DA;
	outline-offset: 4px;
	border-radius: 6px;
	transition: background .25s ease;
}

/* 읽어주기 열기 버튼 — 상단 공유/인쇄 아이콘(.top-share a)과 동일한 원형 스타일
   (form_v2_0.css 의 ".top-share button" 전역 규칙이 class 선택자보다 우선순위가 높아
    사각형/색상이 덮어써지므로, id 선택자로 지정해 확실히 이긴다) */
#ttsToggleBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: left;
	width: 44px;
	height: 44px;
	max-width: 44px;
	margin: 0 0 0 5px;
	border: #e5e5e5 1px solid;
	border-radius: 50%;
	background: #fff;
	color: #999;
	font-size: 18px;
	font-weight: 400;
	padding: 0;
	gap: 0;
	cursor: pointer;
}
#ttsToggleBtn i { margin-right: 0; }
#ttsToggleBtn:hover { color: #444; background: #f5f5f5; }
#ttsToggleBtn.is-playing { background: #15B2DA; border-color: #15B2DA; color: #fff; }
#ttsToggleBtn[disabled] { opacity: .4; cursor: not-allowed; }
/* 아이콘만 노출하고 라벨 텍스트는 스크린리더 전용으로 감춤 */
#ttsToggleBtn .tts-toggle-label {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 상단 공유/인쇄 아이콘 버튼 확대 (읽어주기 버튼과 크기 통일) */
.top-share a {
	width: 44px;
	height: 44px;
	line-height: 44px;
	font-size: 18px;
}
/* 아이콘 확대에 맞춰 글자크기/공유 드롭다운 레이어의 가로 위치 보정.
   각 View 의 인라인 @media(max-width:768px) 규칙보다 늦게 로드되어 우선하므로,
   모든 브레이크포인트에서 동일하게 재지정해 위치를 결정적으로 만든다. */
.font-size-over { right: 149px; }
.sns-over { right: 85px; }
@media (max-width: 1000px) {
	.font-size-over { right: 149px; }
	.sns-over { right: 85px; }
}
@media (max-width: 768px) {
	.font-size-over { right: 149px; }
	.sns-over { right: 85px; }
}

/* ===== 하단 고정 컨트롤 패널 ===== */
.tts-panel {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 500;
	width: min(880px, 94vw);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,.2);
	padding: 20px 24px;
	display: none;
}
.tts-panel.is-open { display: block; }
.tts-panel:focus {
	outline: 3px red !important;
	outline-offset: 4px;
}
.tts-panel-row1 { display: flex; align-items: center; gap: 14px; }
.tts-panel-row1 button:not(.tts-panel-close) {
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	cursor: pointer;
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex: 0 0 auto;
}
.tts-panel button:focus,
.tts-panel select:focus {
	outline: 3px dashed red !important;
	outline-offset: 3px;
}
.tts-panel-row1 button.tts-play { background: #15B2DA; border-color: #15B2DA; color: #fff; }
.tts-panel-row1 button.tts-nav { width: 40px; height: 40px; font-size: 16px; }
.tts-panel-status {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tts-panel-status b { color: #15B2DA; }
.tts-panel-close {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 22px;
	color: #888;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	flex: 0 0 auto;
}
.tts-panel-row2 { display: flex; align-items: center; gap: 16px; margin-top: 14px; font-size: 14px; color: #555; }
.tts-panel-row2 select { border: 1px solid #ccc; border-radius: 6px; padding: 5px 8px; font-size: 14px; }
.tts-panel-row2 .tts-kbd-hint { margin-left: auto; color: #666; }
.tts-panel-row2 .tts-kbd-hint kbd {
	display: inline-block; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 3px;
	padding: 0 4px; font-size: 11px; background: #fafafa;
}
.tts-progress-outer {
	height: 6px; background: #eee; border-radius: 3px; margin-top: 14px; overflow: hidden;
}
.tts-progress-inner { height: 100%; width: 0%; background: #15B2DA; transition: width .2s ease; }
.tts-unsupported {
	font-size: 12px; color: #c0392b; margin-top: 8px; display: none;
}

/* 섹션별 개별 재생 버튼 — 읽어주기 버튼(#ttsToggleBtn)과 동일한 배색/인터랙션 */
.tts-sec-play {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; margin-left: 10px; vertical-align: middle;
	border: #e5e5e5 1px solid; border-radius: 50%; background: #fff;
	cursor: pointer; font-size: 13px; color: #999; padding: 0;
}
.tts-sec-play i { margin-right: 0; }
.tts-sec-play:hover { color: #444; background: #f5f5f5; }
.tts-sec-play.is-active { background: #15B2DA; border-color: #15B2DA; color: #fff; }