/* ============================================================
 * account-notice (계정 알림 공통 컴포넌트 — 휴비서 톤)
 *   비밀번호 90일 변경 안내 / 계정 잠금 안내 / 휴면계정 안내 공용
 *
 * 컬러 팔레트 (휴비서 기존 사이트 차용):
 *   - Primary  : #00a2a2 (틸 — color-green / signup step current)
 *   - Deep     : #07496e (다크 블루 — signup step complete)
 *   - Button   : #006699 → hover #00a2a2 (login--btn)
 *   - Danger   : #f00   (color-red)
 *   - Text     : #07496e (제목) / #464646 (본문)
 *   - Surface  : #fff / #f7f7f7 / #fafafa
 *
 * 구조:
 *   <section class="account-notice [--warn|--danger|--info]">
 *     <div class="account-notice__icon"> ... </div>
 *     <h2 class="account-notice__title"> ... </h2>
 *     <p  class="account-notice__sub"> ... </p>
 *     <p  class="account-notice__meta"> ... </p>          ← 부가정보(선택)
 *     <form class="account-notice__form"> ... </form>     ← 입력 영역(선택)
 *     <div class="account-notice__action"> ... </div>
 *   </section>
 * ============================================================ */

.account-notice {
	max-width: 500px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	font-family: 'Nanum Gothic', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	color: #464646;
}

/* account-notice 카드 안에 들어가는 .email-certification (이메일 인증 공통 컴포넌트)
   회원가입 등 단독 페이지에서는 sub.css 의 padding:50px 그대로 유지,
   카드 안에서는 카드 자체 padding 으로 여백 잡으므로 0 으로 override */
.account-notice .email-certification {
	padding: 0;
}

/* account-notice 안의 floating label — 좌측 정렬 명시 (부모 padding 변화에 영향 받지 않도록) */
.account-notice .ffl-label {
	left: 0;
}

/* 이메일 인증 입력 영역은 좌측 정렬 (카드 text-align:center 상속 차단) */
.account-notice .input-email,
.account-notice .input-cert {
	text-align: left;
}

/* 카드 하단 도움말 텍스트 (고객센터 안내·아이디 찾기 안내 등) */
.account-notice__help {
	text-align: center;
	margin: 18px 0 0;
	font-size: 0.8rem;
	color: #888;
	line-height: 1.6;
}
.account-notice__help b { color: #07496e; }

/* 30일 스누즈 체크박스 옵션 (버튼 아래 보조) */
.account-notice__snooze {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 0.82rem;
	color: #888;
	cursor: pointer;
}
.account-notice__snooze input { margin: 0; cursor: pointer; }

/* ───── icon ───── */
.account-notice__icon {
	width: 110px; height: 110px;
	margin: 0 auto 24px;
	background: linear-gradient(135deg, #00a2a2 0%, #07496e 100%);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 2.6rem;
	box-shadow: 0 12px 28px rgba(0, 162, 162, 0.35);
}
.account-notice__icon svg { width: 50px; height: 50px; }

/* ───── title / sub / meta ───── */
.account-notice__title {
	margin: 0 0 8px;
	font-size: 1.3rem;
	font-weight: 800;
	color: #07496e;
	letter-spacing: -0.01em;
	line-height: 1.4;
}
.account-notice__sub {
	margin: 0 0 14px;
	color: #464646;
	font-size: 0.92rem;
	line-height: 1.7;
	font-weight: 700;
}
.account-notice__meta {
	display: inline-block;
	margin: 0 0 22px;
	padding: 7px 16px;
	background: #fff;
	border: 1px solid #d6e6e6;
	border-radius: 999px;
	font-size: 0.82rem;
	color: #464646;
}
.account-notice__meta b { color: #f00; font-weight: 700; margin-left: 4px; }

/* ───── form (옵션) ───── */
.account-notice__form { text-align: left; margin-top: 8px; }
.account-notice__form .form-row { margin-bottom: 12px; }
.account-notice__form label {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	color: #000;
	margin-bottom: 6px;
}
.account-notice__form label .req { color: #f00; margin-left: 2px; }
.account-notice__form input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	font-size: 0.9rem;
	font-family: inherit;
	background: #fff;
	box-sizing: border-box;
	transition: all 0.15s;
}
.account-notice__form input::placeholder { color: #aaa; }
.account-notice__form input:focus {
	outline: none;
	border-color: #00a2a2;
	box-shadow: 0 0 0 3px rgba(0, 162, 162, 0.15);
}

/* 비밀번호 보기/숨기기 토글 — 우측 눈 아이콘 */
.account-notice__form .input-wrap { position: relative; }
.account-notice__form .input-wrap input { padding-right: 42px; }
.account-notice__form .toggle-pw {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: #888;
	font-size: 1rem;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: color 0.15s;
}
.account-notice__form .toggle-pw:hover { color: #00a2a2; }
.account-notice__form .toggle-pw:focus { outline: none; color: #00a2a2; }
.account-notice__form .hint {
	margin: 6px 0 0;
	font-size: 0.76rem;
	color: #f00;
	font-weight: 700;
}

/* 에러 상태 — has-error 가 form-row 에 붙으면 입력 + 메시지 빨강 */
.account-notice__form .form-row.has-error input {
	border-color: #f00;
	background: #fff7f7;
}
.account-notice__form .form-row.has-error input:focus {
	border-color: #f00;
	box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12);
}
.account-notice__form .err-msg {
	display: none;
	margin: 6px 0 0;
	font-size: 0.78rem;
	color: #f00;
	font-weight: 600;
}
.account-notice__form .err-msg::before {
	content: "\f06a"; /* fa-exclamation-circle */
	font-family: FontAwesome;
	margin-right: 5px;
}
.account-notice__form .form-row.has-error .err-msg { display: block; }
.account-notice__form .form-row.has-error .hint { display: none; }

/* ───── action ───── */
.account-notice__action {
	display: flex;
	gap: 8px;
	margin-top: 22px;
}
.account-notice__action .btn {
	flex: 1;
	padding: 13px 16px;
	border: 0;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	border-radius: 4px;
	text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px;
	transition: all 0.2s;
	box-sizing: border-box;
}
.account-notice__action .btn--primary {
	background: #006699;
	color: #fff;
}
.account-notice__action .btn--primary:hover,
.account-notice__action .btn--primary:focus { background: #00a2a2; }
.account-notice__action .btn--ghost {
	background: #fff;
	color: #464646;
	border: 1px solid #ccc;
}
.account-notice__action .btn--ghost:hover,
.account-notice__action .btn--ghost:focus { background: #f1f1f1; border-color: #999; }

/* ───── 톤 변형 ─────
 *   --warn   : 비밀번호 90일 (기본 — 틸/시안)
 *   --danger : 계정 잠금 (빨강 톤)
 *   --info   : 휴면계정 (다크블루 톤)
 */
.account-notice--danger .account-notice__icon {
	background: linear-gradient(135deg, #e05353 0%, #8b1e1e 100%);
	box-shadow: 0 10px 22px rgba(224, 83, 83, 0.32);
}
.account-notice--danger .account-notice__title { color: #8b1e1e; }

.account-notice--info .account-notice__icon {
	background: linear-gradient(135deg, #5095B8 0%, #07496e 100%);
	box-shadow: 0 10px 22px rgba(80, 149, 184, 0.32);
}

/* 완료(success) 톤 — 휴비서 메인 컬러 */
.account-notice--success .account-notice__icon {
	background: linear-gradient(135deg, #00a2a2 0%, #07496e 100%);
	box-shadow: 0 10px 22px rgba(0, 162, 162, 0.35);
}
.account-notice--success .account-notice__title { color: #07496e; }