@charset "UTF-8";
/*
 * 지점 공지사항 > 로그인 팝업
 *
 * 성격은 알림이 아니라 '송달된 공문' 이다. 읽고 수신을 확정해야 넘어간다.
 * 그래서 구획은 카드가 아니라 괘선으로 하고, 강조는 헤더 왼쪽 세로 괘선 한 곳에만 쓴다.
 * 색/서체/반경은 전부 ERP 가 이미 쓰는 값을 그대로 가져왔다. (#FB46A0, Pretendard, 8px/6px)
 */

.login_notice_pop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9000;
	visibility: hidden;
	opacity: 0;
}
.login_notice_pop.on {visibility: visible; opacity: 1;}

.login_notice_pop .login_notice_dim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(17, 17, 17, 0.55);
}

.login_notice_pop .login_notice_cont {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 32px);
	max-width: 720px;
	max-height: calc(100% - 40px);
	display: flex;
	flex-direction: column;
	padding: 26px 28px;
	border: 1px solid #EBEBEB;
	border-radius: 8px;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
/* 등장은 한 번만. 그 밖에 움직이는 것은 두지 않는다 */
.login_notice_pop.on .login_notice_cont {animation: login_notice_in 180ms ease-out;}
@keyframes login_notice_in {
	from {opacity: 0; transform: translate(-50%, calc(-50% + 8px));}
	to {opacity: 1; transform: translate(-50%, -50%);}
}

/* ── 머리말 ── 왼쪽 세로 괘선이 '여기가 공지의 머리' 라는 표식 */
/* 세로가 빠듯할 때 줄어드는 건 본문뿐이고, 나머지는 제 높이를 지킨다 */
.login_notice_pop .login_notice_head,
.login_notice_pop .login_notice_files,
.login_notice_pop .login_notice_error,
.login_notice_pop .login_notice_guide,
.login_notice_pop .login_notice_foot {flex: none;}
.login_notice_pop .login_notice_head {
	padding-left: 14px;
	border-left: 3px solid #FB46A0;
}
.login_notice_pop .login_notice_meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.login_notice_pop .login_notice_kind {font-size: 13px; font-weight: 500; color: #FB46A0;}
.login_notice_pop .login_notice_date {font-size: 13px; color: #909090; white-space: nowrap;}
.login_notice_pop .login_notice_title {
	margin-top: 5px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: #333333;
	word-break: break-all;
}
.login_notice_pop .login_notice_writer {margin-top: 3px; font-size: 13px; color: #909090;}
.login_notice_pop .login_notice_writer:empty {display: none;}

/* ── 본문 ── 읽으라고 띄운 행간. ERP 기본 1.2 보다 넓다 */
.login_notice_pop .login_notice_body {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 46vh;
	min-height: 96px;
	margin-top: 18px;
	padding: 18px 0;
	border-top: 1px solid #EBEBEB;
	border-bottom: 1px solid #EBEBEB;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.7;
	color: #333333;
	word-break: break-all;
}
/* Quill 본문이 그대로 들어오므로 에디터 여백만 걷어낸다 */
.login_notice_pop .login_notice_body.ql-editor {padding: 18px 0; line-height: 1.7;}
.login_notice_pop .login_notice_body p {line-height: 1.7;}
.login_notice_pop .login_notice_body img {max-width: 100%; height: auto;}
.login_notice_pop .login_notice_body a {color: #FB46A0; text-decoration: underline;}

/* ── 첨부파일 ── 넓어진 가로를 써서 한 행에 흘린다. 세로를 한 줄이라도 덜 먹게 */
.login_notice_pop .login_notice_files {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 14px;
}
.login_notice_pop .login_notice_files[hidden] {display: none;}
.login_notice_pop .login_notice_files_label {flex: none; font-size: 13px; color: #909090;}
.login_notice_pop .login_notice_files_label b {font-weight: 500; color: #333333;}
.login_notice_pop .login_notice_files ul {
	/* 가로로는 절대 넘기지 않는다. 넘치면 줄바꿈하고, 줄이 쌓이면 세로로만 스크롤한다 */
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
	row-gap: 4px;
	/* 행 높이를 20px 로 고정해서 딱 3줄(20+4+20+4+20)에서 끊는다.
	   어중간하게 자르면 다음 줄이 반쯤 보여 깨진 것처럼 읽힌다 */
	max-height: 68px;
	overflow-x: hidden;
	overflow-y: auto;
}
/* flex 항목은 기본 min-width 가 auto 라 내용보다 안 줄어든다.
   li 부터 풀어줘야 긴 파일명이 팝업 밖으로 삐져나가지 않는다 */
.login_notice_pop .login_notice_files li {display: flex; min-width: 0; max-width: 100%;}
.login_notice_pop .login_notice_files a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
	/* 행 높이를 직접 못 박는다. line-height 로는 ERP 리셋(span{line-height:1.2})에 눌려 안 잡힌다 */
	height: 20px;
	font-size: 13px;
	font-weight: 500;
	color: #333333;
}
/* 파일명이 길어도 flex 항목이 안 줄어드는 걸 막는다 (min-width 기본값이 auto라서) */
.login_notice_pop .login_notice_file_name {
	min-width: 0;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.login_notice_pop .login_notice_files a svg {flex: none; color: #909090;}
.login_notice_pop .login_notice_files a:hover,
.login_notice_pop .login_notice_files a:focus-visible {color: #FB46A0; text-decoration: underline;}
.login_notice_pop .login_notice_files a:hover svg,
.login_notice_pop .login_notice_files a:focus-visible svg {color: #FB46A0;}

/* ── 마무리 ── 두 버튼의 위계 차이가 곧 정보다 */
.login_notice_pop .login_notice_error {
	margin-top: 12px;
	font-size: 13px;
	color: #E5342C;
}
.login_notice_pop .login_notice_error:empty {display: none;}
.login_notice_pop .login_notice_guide {
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.6;
	color: #909090;
}
.login_notice_pop .login_notice_foot {
	display: flex;
	align-items: center;
	/* 버튼은 항상 오른쪽. 순번(1/2)은 있을 때만 margin-right:auto 로 왼쪽에 선다.
	   flex-end 없이 순번에만 기대면 공지가 1건이라 순번이 숨는 순간 버튼이 왼쪽으로 쏠린다 */
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}
.login_notice_pop .login_notice_count {margin-right: auto; font-size: 13px; color: #909090;}
.login_notice_pop .login_notice_count:empty {display: none;}
/* [확인] 도 버튼이되 채우지는 않는다. 외곽선 대 채움으로 위계가 갈린다 */
.login_notice_pop .login_notice_later {
	height: 34px;
	padding: 0 20px;
	border: 1px solid #A1A1A1;
	border-radius: 6px;
	background-color: transparent;
	font-size: 14px;
	font-weight: 500;
	color: #4A4A4A;
	cursor: pointer;
}
.login_notice_pop .login_notice_later:hover {border-color: #4A4A4A; color: #333333;}
.login_notice_pop .login_notice_confirm {
	height: 34px;
	padding: 0 20px;
	border: 1px solid #FB46A0;
	border-radius: 6px;
	background-color: #FB46A0;
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	cursor: pointer;
}
.login_notice_pop .login_notice_confirm:hover {border-color: #E53D91; background-color: #E53D91;}
.login_notice_pop button[disabled] {opacity: 0.5; cursor: default;}
.login_notice_pop button[disabled]:hover {text-decoration: none;}

.login_notice_pop a:focus-visible,
.login_notice_pop button:focus-visible {outline: 2px solid #FB46A0; outline-offset: 2px;}

@media (max-width: 480px) {
	.login_notice_pop .login_notice_cont {padding: 18px;}
	.login_notice_pop .login_notice_title {font-size: 17px;}
	.login_notice_pop .login_notice_meta {flex-wrap: wrap; gap: 2px;}
	/* 세로로 쌓을 때 align-items 를 baseline 그대로 두면 ul 이 늘어나지 않고
	   내용만큼 벌어져서 긴 파일명이 팝업 밖으로 나간다 */
	.login_notice_pop .login_notice_files {flex-direction: column; align-items: stretch; gap: 4px;}
}

@media (prefers-reduced-motion: reduce) {
	.login_notice_pop.on .login_notice_cont {animation: none;}
}