@charset "UTF-8";
/* ==========================================================================
   단체접수(기관담당자) 진행 단계 안내 - .tcg-*
   --------------------------------------------------------------------------
   마크업 : /WEB-INF/jsp/groupReceipt/groupReceipt-common-guide.jsp
   문구   : message*.properties  groupReceipt.guide.*
   적용   : request.jsp / receipt-list.jsp  (date-point-tab 아래)

   2026 신규디자인의 .tcg-* 컴포넌트를 레거시 디자인 톤으로 옮긴 것.
   - 색      : 레거시 팔레트만 사용 (#CD171E / #F9F9F9 / #ECECEC / #D6D6D6 /
               #C0C0C0 / #575757 / #333333 / #1E1F20)
   - 컨테이너: .board-sch 관용구(radius 8px / #F9F9F9 / padding 15px / mb 20px)
   - 팝오버  : .click_box .hover-box .txt-box 스킨(1px #CD171E / radius 8px /
               box-shadow 20px 20px 60px rgba(56,57,62,.25))
   - 타이포  : 14px / weight 300 / letter-spacing -1px (레거시 본문 기준)

   [팝오버 기준점] 각 칩(.tcg-item) 아래 가운데로 연다.
   다만 첫 단계/마지막 단계는 각각 자기 왼쪽끝/오른쪽끝에 맞춰 연다 —
   DOM 첫/마지막 항목은 줄바꿈이 일어나도 항상 그 행의 최좌/최우이므로
   이 두 규칙만은 로케일·줄바꿈과 무관하게 안전하다.
   폭을 340px 로 둔 것도 가운데 칩들이 컨테이너를 넘지 않게 하기 위함이다.
   (넘치면 common.css:1088 .content .inner{overflow:hidden} 에 그대로 잘린다)
   ========================================================================== */

/* ---------- 클리핑 해제 ---------- */
/* common.css:1088 .content .inner{overflow:hidden} 이 팝오버 아래쪽을 잘라
   푸터에 먹힌 것처럼 보인다(z-index 문제가 아니라 클리핑이라 z 로는 못 푼다).
   overflow 를 그냥 없애면 이 컨테이너가 하던 float 포함이 깨지므로,
   display:flow-root 로 BFC 는 그대로 두고 클리핑만 해제한다.
   .tcg-host 는 안내라인이 들어간 페이지의 .inner 에만 붙인다
   (request.jsp / receipt-list.jsp). flow-root 미지원 브라우저는
   선언이 무시돼 기존 overflow:hidden 동작으로 돌아간다. */
.content .inner.tcg-host {
	overflow: visible;
	display: flow-root;
}

/* ---------- 컨테이너 ---------- */
.tcg-guide {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 8px;
	background-color: #F9F9F9;
	font-size: 14px;
	letter-spacing: -1px;
	color: #1E1F20;
}

/* 좌측 'i' 배지 */
.tcg-guide-info {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border-radius: 50%;
	background-color: #CD171E;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	line-height: 20px;
	text-align: center;
}

/* ---------- 단계 목록 ---------- */
.tcg-steps {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	min-width: 0;
}

/* 팝오버의 기준점 — 각 단계 아래에 뜨게 한다 */
.tcg-item {
	position: relative;
}

.tcg-item:not(:first-child) {
	margin-left: 3px;
}

/* 단계 구분 화살표 : 레거시 breadcrumb(ul.location)과 동일한 아이콘 사용   */
/* 칩 앞에 붙여 줄바꿈 시 화살표만 행 끝에 남지 않도록 한다              */
.tcg-item:not(:first-child)::before {
	content: "\e90c"; /* 2022-epic : icon-A-Right */
	font-family: '2022-epic';
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	margin-right: 3px;
	color: #575757;
	vertical-align: middle;
	pointer-events: none;
}

/* ---------- 단계 칩 ---------- */
.tcg-chip {
	display: inline-block;
	margin: 3px 0;
	padding: 6px 10px;
	border: 1px solid #C0C0C0;
	border-radius: 32px;
	background-color: #fff;
	color: #1E1F20;
	font-family: inherit;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -1px;
	line-height: 18px;
	white-space: nowrap;
	/* 클릭 핸들러가 없는 설명 전용 버튼이라 pointer 를 쓰지 않는다 */
	cursor: help;
}

/* hover 와 focus-within 은 규칙을 분리한다.
   한 셀렉터 리스트에 묶으면 :focus-within 미지원 브라우저가 규칙 전체를 버린다. */
.tcg-item:hover .tcg-chip {
	border-color: #CD171E;
	background-color: #CD171E;
	color: #fff;
}

.tcg-item:focus-within .tcg-chip {
	border-color: #CD171E;
	background-color: #CD171E;
	color: #fff;
}

.tcg-chip:focus {
	outline: 2px solid #CD171E;
	outline-offset: 2px;
}

/* 담당자가 아닌 단계(관리자/응시자 처리) : 레거시 비활성 관용구 준용
   [class^="btn"].disabled { background:#ECECEC; color:#333333 } (common.css) */
.tcg-item.tcg-other .tcg-chip {
	border-color: #D6D6D6;
	background-color: #ECECEC;
	color: #333333;
}

.tcg-item.tcg-other:hover .tcg-chip {
	border-color: #333333;
	background-color: #333333;
	color: #fff;
}

.tcg-item.tcg-other:focus-within .tcg-chip {
	border-color: #333333;
	background-color: #333333;
	color: #fff;
}

.tcg-item.tcg-other .tcg-chip:focus {
	outline-color: #333333;
}

/* ---------- 상세 설명 팝오버 ---------- */
/* 기준점은 각 .tcg-item — 자기 단계 칩 바로 아래 가운데에 뜬다. */
.tcg-pop {
	position: absolute;
	top: 100%;
	left: 50%;
	right: auto;
	z-index: 100;
	width: 340px;
	max-width: none;
	margin-top: 10px;
	padding: 15px;
	border: 1px solid #CD171E;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 20px 20px 60px 0 rgba(56, 57, 62, .25);
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	transition: opacity .15s ease, visibility .15s ease;
}

/* 양 끝 단계는 자기 바깥쪽 모서리에 맞춰 연다.
   DOM 상 첫/마지막 항목은 줄바꿈이 일어나도 항상 그 행의 최좌/최우이므로
   이 두 규칙은 로케일·줄바꿈과 무관하게 컨테이너를 벗어나지 않는다. */
.tcg-item:first-child .tcg-pop {
	left: 0;
	right: auto;
	transform: none;
}

.tcg-item:last-child .tcg-pop {
	left: auto;
	right: 0;
	transform: none;
}

.tcg-item:hover .tcg-pop {
	opacity: 1;
	visibility: visible;
}

.tcg-item:focus-within .tcg-pop {
	opacity: 1;
	visibility: visible;
}

/* 칩을 가리키는 삼각 꼭지 (레거시 .txt-box:before 와 동일 스펙) */
.tcg-pop::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	margin-left: -8px;
	width: 15px;
	height: 15px;
	background: #fff;
	border: 1px solid #CD171E;
	border-bottom: 0;
	border-right: 0;
	transform: rotate(45deg);
}

.tcg-item:first-child .tcg-pop::before {
	left: 24px;
	margin-left: 0;
}

.tcg-item:last-child .tcg-pop::before {
	left: auto;
	right: 24px;
	margin-left: 0;
}

/* 칩과 팝오버 사이 10px 공백을 투명 브리지로 메운다.
   없으면 칩에서 팝오버로 마우스를 옮기는 도중 hover 가 끊긴다.
   (pointer-events:none 을 넣으면 브리지가 무효가 되므로 넣지 않는다) */
.tcg-pop::after {
	content: "";
	position: absolute;
	top: -11px;
	left: -1px;
	right: -1px;
	height: 11px;
	background: transparent;
}

.tcg-pop-tit {
	margin: 0 0 10px;
	color: #CD171E;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 18px;
}

.tcg-pop-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcg-pop-list li {
	position: relative;
	margin: 6px 0 0;
	padding-left: 10px;
	color: #1E1F20;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -1px;
	line-height: 20px;
}

.tcg-pop-list li:first-child {
	margin-top: 0;
}

.tcg-pop-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #CD171E;
}

.tcg-pop-list li div {
	margin-top: 4px;
}

/* 중첩 리스트(일괄 업로드 / 개별 등록 하위 항목) */
.tcg-pop-list .tcg-pop-list {
	margin-top: 4px;
}

.tcg-pop-list .tcg-pop-list li::before {
	background-color: #C0C0C0;
}

/* ---------- 숫자 배지 ---------- */
/* 로드되는 아이콘 폰트(2022-epic)에 숫자원 글리프가 없어 CSS 배지로 대체 */
.tcg-num {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	border-radius: 50%;
	background-color: #CD171E;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	line-height: 16px;
	text-align: center;
	vertical-align: middle;
}

.tcg-num-1::before { content: "1"; }
.tcg-num-2::before { content: "2"; }

/* ---------- 메시지 값에 하드코딩된 클래스 보정 ---------- */
/* .text-red-600 : 원 정의(custom-style.css)가 미로드라 팝오버 안에서만 보정 */
.tcg-pop .text-red-600 {
	color: #CD171E !important;
}

/* .icon-chevron-square-right : 로드 폰트에 없는 클래스.
   이 문구가 가리키는 실제 버튼(receipt-list.jsp 의 접수승인 이동 버튼)이
   icon-A-Long-Right 이므로 같은 글리프로 매핑해 지시와 실물을 일치시킨다. */
.tcg-pop .icon-chevron-square-right::before {
	content: "\e908"; /* 2022-epic : icon-A-Long-Right */
}

/* ---------- 좁은 창 대응 ---------- */
@media screen and (max-width: 1199px) {
	.tcg-chip {
		padding: 6px 8px;
		font-size: 13px;
	}
	.tcg-item:not(:first-child) {
		margin-left: 2px;
	}
	.tcg-item:not(:first-child)::before {
		margin-right: 2px;
	}
}


/* ==========================================================================
   비밀번호 Caps Lock 안내 - .caps-*
   --------------------------------------------------------------------------
   마크업 : /WEB-INF/jsp/account/join-step3.jsp (비밀번호 / 비밀번호 확인)
   문구   : message*.properties  caption.account.join.item.password.capsLock
   동작   : join-step3.jsp 스크립트가 CapsLock 상태에 따라 .caps-host 에
            .caps-on 을 붙이고 뗀다(포커스가 빠지면 제거).

   스킨은 위 .tcg-pop 과 동일(1px #CD171E / radius 8px / 같은 그림자·꼭지).
   .tcg-pop 은 .tcg-item:hover 에 묶여 있어 클래스를 공유하지 않고 분리했다.
   입력칸 아래에 absolute 로 띄워 레이아웃을 밀지 않는다
   (떠 있는 동안 아래 .pw-valid-msg 첫 1~2줄을 가린다 — 하단 표시 요청대로 감수).
   클릭은 통과시킨다(pointer-events:none). 1172px 미만에서 칸이 세로로 쌓이면
   비밀번호 확인 툴팁이 다음 줄(이름) 라벨·입력칸 윗부분을 덮기 때문.
   ========================================================================== */
.caps-host {
	position: relative;
}

.caps-tip {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	margin-top: 10px;
	padding: 10px 15px;
	border: 1px solid #CD171E;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 20px 20px 60px 0 rgba(56, 57, 62, .25);
	color: #1E1F20;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -1px;
	line-height: 20px;
	text-align: left;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, visibility .15s ease;
}

.caps-host.caps-on .caps-tip {
	opacity: 1;
	visibility: visible;
}

/* 입력칸을 가리키는 삼각 꼭지 (.tcg-pop::before 와 동일 스펙, 첫 단계 위치) */
.caps-tip::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 24px;
	width: 15px;
	height: 15px;
	background: #fff;
	border: 1px solid #CD171E;
	border-bottom: 0;
	border-right: 0;
	transform: rotate(45deg);
}

/* '!' 배지 : .tcg-guide-info 와 동일 스킨 */
.caps-tip-ico {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 50%;
	background-color: #CD171E;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
}