@charset "utf-8";

/* ===============================================
 * CLS 공통 서브 비주얼 (페이지 타이틀 + breadcrumb)
 * 정적 페이지(/about, /support/guide) + 게시판(/board/*) 공통
 * /include/sub_visual.jsp 가 사용. header.jsp 에서 로드되어 전 페이지 사용 가능
 * (.sub-page 의존 없이 .sub-visual 단독 셀렉터 — body class 무관하게 동작)
 * =============================================== */
.sub-visual, .sub-visual * { box-sizing: border-box; }
.sub-visual {
	position: relative; padding: 36px 0; overflow: hidden;
	min-height: 250px; height: 250px; display: flex; flex-direction: column; justify-content: center;  /* 페이지별 높이 250 고정(내용 유무 무관) */
	background: #00393C;
	background-image: linear-gradient(120deg, #00393C 0%, #00595C 52%, rgba(0,195,191,.6) 120%);
	text-align: center; color: #fff;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
.sub-visual::after {
	content: ''; position: absolute; right: -60px; bottom: -60px; width: 280px; height: 280px;
	border: 2px solid rgba(255,255,255,.08); border-radius: 50%;
}
/* 타이틀별 테마 그래픽 (우측 배치·은은하게 — 가운데 정렬 타이틀 가독성 보존) */
.sub-visual::before {
	content: ''; position: absolute; top: 0; right: 3%; bottom: 0; width: 42%; max-width: 500px;
	background-repeat: no-repeat; background-position: center right; background-size: contain;
	opacity: .15; z-index: 1; pointer-events: none;
	background-image: url(/images/subvisual/sv-default.svg);
}
.sub-visual.sv-test::before    { background-image: url(/images/subvisual/sv-test.svg); }
.sub-visual.sv-about::before   { background-image: url(/images/subvisual/sv-about.svg); }
.sub-visual.sv-board::before   { background-image: url(/images/subvisual/sv-board.svg); }
.sub-visual.sv-support::before { background-image: url(/images/subvisual/sv-support.svg); }
.sub-visual.sv-mypage::before  { background-image: url(/images/subvisual/sv-mypage.svg); }
@media (max-width: 767px) { .sub-visual::before { display: none; } }
.sub-visual .sv-inner { position: relative; z-index: 2; max-width: 1600px; margin: 0 auto; padding: 0 24px; }
.sub-visual .sv-eyebrow {
	display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .22em;
	text-transform: uppercase; color: #59D8D5; margin-bottom: 14px;
}
.sub-visual .sv-title { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #fff; }
.sub-visual .sv-bread { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.7); }
.sub-visual .sv-bread a { color: rgba(255,255,255,.7); text-decoration: none; }
.sub-visual .sv-bread a:hover { color: #fff; }
.sub-visual .sv-bread .sep { margin: 0 8px; opacity: .5; }
.sub-visual .sv-bread .now { color: #fff; font-weight: 600; }

@media (max-width: 1024px) { .sub-visual .sv-title { font-size: 33px; } }
@media (max-width: 767px) {
	.sub-visual { padding: 54px 0 44px; }
	.sub-visual .sv-title { font-size: 26px; }
}