@charset "utf-8";
@import url("pretendard.css");

/* LoginPage */
.Container.LoginPage {
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom:0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
.Container.LoginPage:after {
	content: "";
	position: absolute;
	z-index: 1;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	background: url(../images/login/bg_login.jpg) no-repeat;
	background-size: cover;
}

/* LoginForm */
.LoginForm {
	position: relative;
    z-index: 10;
	bottom:4%;
}
.LoginForm__inner {
	position: relative;
    display: flex;
    flex-direction: row;
    gap: 3.5em;
    align-items: center;
    justify-content: center;
}
.LoginForm__logo .link {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5em;
	text-align: center;
	padding-top:1em;
}
/* 2026-08-23: width:7em 고정이라 다국어에서 글자가 두 줄로 삐져나왔다
   (Regulatory Home / 注册许可主页). 최소폭 + 좌우 여백으로 바꾼다. */
.LoginForm__logo .link .Button{
	border : 1px solid #bdcad4;
	background: rgba(255, 255, 255, 0.45);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	min-width: 7em;
	width: auto;
	padding: 0 1em;
	color: #1c6875;
	height: 2.3em;
	line-height: 2.3em;
	white-space: nowrap;
	border-radius: 6px;
	transition: border-color .15s, color .15s, background-color .15s;
}
.LoginForm__logo .link .Button:hover{
	border-color: #0098b4;
	color: #0098b4;
	background: rgba(255, 255, 255, 0.7);
}
.LoginForm__logo .link .Button span{
    vertical-align: baseline;
    line-height: 2.3em;
}
.LoginForm__logo .img {
	padding-bottom: 1em;
}
.LoginForm__logo .text {
	font-size: 0.63em;
	color: #9d9d9d;
	letter-spacing: 0.17em;
	line-height: 1.7em;
	text-align: center;
}
/* 2026-08-23: 폼을 카드로 감쌌다. 배경에 패턴이 있어 입력 영역의 경계가 보이지
   않았고, 밑줄만 있는 입력칸은 어디를 눌러야 하는지 알기 어려웠다. */
.LoginForm__login{
	display: flex;
	flex-direction: column;
	gap:.35em;
	/* 다국어 대비: 같은 문장이 영어·베트남어에서 더 길어진다.
	   고정폭이면 그 언어에서만 글자가 넘치므로 하한·상한만 준다. */
	width: 23em;
	max-width: 100%;
	box-sizing: border-box;
	padding: 2.4em 2.2em 2em;
	/* 배경색 없이 블러만 — 뒤 배경이 흐려진 채로 그대로 보인다(유리판).
	   backdrop-filter 미지원 브라우저에서는 배경이 그대로 보이므로,
	   그때만 옅은 흰색을 깔아 글자가 배경 무늬에 묻히지 않게 한다(@supports 아래). */
	background: transparent;
	/* 블러는 5px — 뒤 배경의 형태가 보일 만큼만 흐린다.
	   더 세게 주면 유리판이 불투명해져 "뒷배경이 보인다" 는 의도가 사라진다. */
	-webkit-backdrop-filter: blur(5px) saturate(120%);
	backdrop-filter: blur(5px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 16px;
	box-shadow: 0 12px 36px rgba(28, 104, 117, 0.14), 0 1px 3px rgba(0, 0, 0, 0.05);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.LoginForm__login { background: rgba(255, 255, 255, 0.72); }
}
.LoginForm__item {
	display: block;
	position: relative;
	margin-bottom: .5em;
}
.LoginForm__item label {
	display: block;
	line-height: 1.6em;
	margin-bottom: .5em;
}
.LoginForm__item label span{
	font-size: 0.78em;
    color: #37474f;
    font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
/* 버튼 문구가 긴 언어(베트남어)에서도 한 줄을 유지한다 */
.LoginForm .Button__login span{ white-space: nowrap; }
/* 밑줄 한 줄이던 입력칸을 상자로 바꿨다. 빈 상태에서도 클릭 영역이 보인다.
   2026-08-23: 배경을 반투명 + 블러로 바꿔 뒤 배경이 비치게 했다.
   backdrop-filter 를 지원하지 않는 브라우저에서는 background 값만 적용돼
   옅은 흰 박스로 보인다(읽기에는 문제 없다). */
.LoginForm__item input {
	display: block;
    box-sizing: border-box;
    width: 100%;
    height: 3.1em;
	padding: 0 0.9em;
	/* 흰 테두리는 밝은 배경에서 보이지 않았다. 짙은 톤으로 경계를 분명히 한다. */
	border: 1.5px solid rgba(28, 104, 117, 0.48);
    box-shadow: inset 0 1px 2px rgba(31, 62, 71, 0.06);
    background: rgba(255, 255, 255, 0.34);
	-webkit-backdrop-filter: blur(5px) saturate(120%);
	backdrop-filter: blur(5px) saturate(120%);
    border-radius: 10px;
	font-family: 'NotoSansKR', sans-serif;
	font-size: 0.95em;
	color: #22333a;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.LoginForm__item input::placeholder { color: #8e9aa2; }
.LoginForm__item input:hover {
	background: rgba(255, 255, 255, 0.5);
	border-color: rgba(28, 104, 117, 0.7);
}
.LoginForm__item input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.66);
	border-color: #0098b4;
	box-shadow: 0 0 0 3px rgba(0, 152, 180, 0.18);
}
/* 아이디 저장 — 비밀번호 칸과 로그인 버튼 사이 한 줄.
   체크박스는 브라우저 기본 모양을 쓰되 색만 맞춘다(accent-color).
   미지원 브라우저에서는 회색 기본 체크박스로 보인다 — 동작에는 지장이 없다. */
.LoginForm__option{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 0.6em;
	margin: 0.7em 0 0.2em;
}
.LoginCheck{
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	cursor: pointer;
	user-select: none;
}
.LoginCheck input[type="checkbox"]{
	/* reset.css 의 전역 input 규칙(height 2.5em / padding .5em / 테두리)이
	   체크박스까지 덮친다. 여기서 되돌리지 않으면 세로로 늘어난 상자가 된다. */
	box-sizing: border-box;
	width: 1.05em;
	height: 1.05em;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	flex: 0 0 auto;
	accent-color: #0098b4;
	cursor: pointer;
}
.LoginCheck__txt{
	font-size: 0.78em;
	font-weight: 600;
	color: #37474f;
	line-height: 1.4em;
}
/* 자동로그인으로 오해하지 않도록 붙이는 한 줄. 체크박스 문구보다 약하게 둔다. */
.LoginCheck__help{
	font-size: 0.72em;
	color: #7a868d;
	line-height: 1.4em;
}

.LoginForm__buttom {
	text-align: center;
	margin-top: 0.9em;
}
.LoginForm__buttom label{
	font-size: 0.75em;
	padding-right: 1em;
}
.LoginForm__buttom input{
	margin: 5px;
	height: 1em;
}
.LoginForm .Button__login {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0 0.6em;
	color: #fff;
	border: 0;
	-webkit-appearance: button;
	background-color: #0098b4;
	line-height: 3.2em;
	height: 3.2em;
	font-weight: 700;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .15s, box-shadow .15s, transform .06s;
}
.LoginForm .Button__login:hover { background-color: #00819a; box-shadow: 0 4px 12px rgba(0,152,180,.25); }
.LoginForm .Button__login:active { transform: translateY(1px); }
.LoginForm .Button__login span {
	position: relative;
	z-index: 10;
	font-size: 1.125em;
	vertical-align: baseline;
}
/* 로그인 실패 안내 — 예전에는 글자 크기만 줄여 폼에 묻혔다 */
.LoginForm__error{
	margin: 0.4em 0 0.2em;
	padding: 0.7em 0.85em;
	background: #fdeeec;
	border: 1px solid #f2c4bf;
	border-radius: 6px;
	color: #b3261e;
	font-size: 0.8em;
	line-height: 1.6em;
}
.LoginForm__error p{ font-size: 1em; margin: 0; }
.LoginForm .link {
	display: block;
}
.LoginForm .link span {
	line-height: 1.5em;
	font-size:0.875em;
}
.LoginForm .link.register {
	color: #4eb9b4;
	font-weight: 600;
}
/* 2026-08-23: 테두리 박스 2개였다. 보조 기능인데 주 버튼(로그인) 다음으로
   시각적 무게가 커서 시선을 빼앗았다. 텍스트 링크로 낮추고 한 줄에 묶었다. */
.LoginForm .find{
	border: 0;
	padding: 0;
	background: none;
	font-size: 0.75em;
	line-height: 1.4em;
	color: #5c686f;
	text-align: center;
	/* 3개가 한 줄에 들어가야 한다. 줄바꿈되면 "비밀번호 재설 / 정" 처럼 쪼개진다. */
	white-space: nowrap;
	flex: 0 0 auto;
	transition: color .15s;
}
.LoginForm .find:hover{ color: #0098b4; text-decoration: underline; }
.LoginForm .find.register{ color: #1c8fa3; font-weight: 600; }
.LoginForm .find.register:hover{ color: #0098b4; }

.LoginForm__info{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/* 한 줄에 안 들어가는 언어(영어·베트남어)에서는 줄바꿈으로 넘어간다.
	   nowrap 만 걸어 두면 카드 밖으로 삐져나온다. */
	flex-wrap: wrap;
	gap: 0.45em 0.7em;
	margin-top: 1.4em;
	padding-top: 1.2em;
	border-top: 1px solid rgba(31, 62, 71, 0.14);
}
/* 링크 사이 구분점 */
.LoginForm__dot{
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #d3dade;
	flex: 0 0 auto;
}

/* AccessArea */
.AccessArea{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	z-index: 1000;
}
.AccessArea__inner{
	display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
}
.AccessArea__item{
	width: 15em;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #eee;
    box-shadow: 0 0 5px #cab8b8;
	margin:0 .3em;
	font-family: 'Din', sans-serif;
}
.AccessArea__item a{
	display: block;
	padding:1.4em 0;
	text-align: center;
	line-height: 3em;
	font-family: 'Din', sans-serif;
}
.AccessArea__item a img{max-width:80%}
.AccessArea__item .title{
	font-size: 1.6em;
    color: #182e97;
	padding:0 0.2em;
	font-weight: 900;
	vertical-align: middle;
	letter-spacing: -0.5px;
	line-height: 1.3em;
}
.AccessArea__item .cargo{
    background: #3bc8d3;
    color: #fff;
    font-weight: bold;
    padding: 0 0.5em;
    border-radius: 0.3em;
    vertical-align: middle;
    display: inline-block;
    padding-top: 3px;
    min-width: 2em;
    line-height: 1.2em;
}
.AccessArea__item:hover{border-color:#0098b4}
.AccessArea__item:hover .title{color:#0098b4}

/* GroupKey */
.GroupKey{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding:1em;
	gap:0.5em;
}
.GroupKey__input{
	flex-grow: 1;
	flex-shrink: 1;
	display: block;
    line-height: 2em;
    height: 2em;
    border: 1px solid #007a90;
    border-radius: 5px;
    padding: 0 1em;
}
.GroupKey__button{
    display: block;
    border-radius: 5px;
	border:0;
    border: 1px solid #0d4d59;
    background-color: #007a90;
    line-height: 2em;
    height: 2em;
    text-align: center;
	flex-grow: 0;
	flex-shrink: 0;
	width: 10em;
}
.GroupKey__button > span{font-size: 0.825em;color:#222;vertical-align: top;color:#fff;}

.EntityInfo__inner{
	margin:1em;
	padding:0.5em 1em;
	border:1px solid #eee;
	border-radius: .5em;
}
.EntityInfo__group{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap:.5em;
	margin: 0.5em 0;
}
.EntityInfo__label{
	flex-grow: 0;
	flex-shrink: 0;
	width:10em;
	font-size: 0.825em;
	color:#007a90;
	font-weight: bold;
}
.EntityInfo__data{
	flex-grow: 1;
	flex-shrink: 1;
}
.EntityInfo__group .text{
	font-size: 0.725em;
	padding-top:.5em;
}
.EntityInfo__button{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap:.5em;
}
.EntityInfo__button > input{
	flex-grow: 1;
	flex-shrink: 1;
	display: block;
    line-height: 2em;
    height: 2em;
    border: 1px solid #007a90;
    border-radius: 5px;
    padding: 0 1em;
}
.EntityInfo__button .button{
	display: block;
    border-radius: 5px;
	border:0;
    border: 1px solid #0d4d59;
    background-color: #007a90;
    line-height: 2em;
    height: 2em;
    text-align: center;
	flex-grow: 0;
	flex-shrink: 0;
	width: 5em;
}
.EntityInfo__button .button span{
	color:#fff;
	font-size:0.825em;
	vertical-align: top;
}

/* Account__item */
.Account{
	padding:1em;
	font-size: 0.825em;
}
.Account__info{
	font-weight:bold;
	line-height:3em;
}
.Account__write{
	padding-bottom:10px;
}
.Account__item{
	border-radius: 3px;
	background:#fff;
	padding:1em 1em;
	border: 1px solid #47788b;
	margin-bottom: 5px;
	position: relative;
}
.Account__item.insert{
	background: #eaf0fd;
}
.Account__item .close{
	position:absolute;
	right:1em;
	top:1em;
	z-index: 999;
	font-size: 0.825em;
}
.Account__item .info{
	line-height: 3em;
    font-size: 12px;
    margin-top: -1em;
}
.Account__item .inner{
	position:relative;
}
.Account__item .id{
	display:block;
	font-weight: bold;
}
.Account__item .data input{
  	width: 100%;
}
.Account__item .Check{
	font-size: 0.8em;
	padding: 0 0 0.4em;
	display: inline-block;
}
.Account__item .data input:first-child{
	margin:7px 0;
}
.Account__item .input_button {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:.5em;
}
.Account__item .input_button > input{
	flex-grow: 1;
	flex-shrink: 1;
	display: block;
    line-height: 2em;
    height: 2em;
    border: 1px solid #007a90;
    border-radius: 5px;
    padding: 0 1em;
}
.Account__item .input_button .Button{
	display: block;
    border-radius: 5px;
	border:0;
    border: 1px solid #0d4d59;
    background-color: #007a90;
    line-height: 2em;
    height: 2em;
    text-align: center;
	flex-grow: 0;
	flex-shrink: 0;
	width: 5em;
}
.Account__item .input_button .Button span{
	color:#fff;
	font-size:0.825em;
	vertical-align: top;
}

/* ClientList */
.ClientList__control {background:#fbfbfb}
.ClientList__control > .control > .Button.Button__normal{display: block;margin:0.2em 0}

/* Entity_Account */
.Entity_Account{
	border: 1px solid #accdd3;
    background: #f5f5f5;
    border-radius: 0.5em;
	margin:0 1em;
}

/* login modal */
.Loginlayer {
	display: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5); /* 배경을 반투명하게 설정 */
	position: fixed;
	z-index:11;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.Loginlayer .Modal__content {
	width: 30%; /* 모달의 폭을 30%로 설정 */
	max-width: 600px; /* 최대 폭 설정 */
	min-width: 300px; /* 최소 폭 설정 */
	background: white;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	position: relative; /* 모달 내 버튼 위치 조정을 위해 relative 설정 */
}

.Loginlayer	.Modal__header {
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-bottom: 20px;
	text-align: center; /* 제목을 중앙으로 */
}
.Loginlayer	.Modal__header .title{font-size: 1.2em;}
.Loginlayer .Modal__close, .Loginlayer .Modal__close:hover {
	position: absolute; /* 닫기 버튼을 헤더의 오른쪽 상단에 위치 */
	top: 25px;
	right: 0px;
	font-size: 1.5em;
	background: none;
	border: none;
	cursor: pointer;
	color: #333;
}
.Loginlayer input {
	display: block;
    width: 100%;
    height: 3em;
    border: 1px solid #e5d8dd;
    box-shadow: none;
    background: transparent;
    border-radius: 3px;
	font-family: 'NotoSansKR', sans-serif;
}
.LoginForm__ok{
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-top:1em;
}
.LoginForm__ok button{padding:0 2em}



/* AccessArea */
.AccessArea{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.AccessArea__inner{
	display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
}
.AccessArea__item{
	width: 17em;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #eee;
    box-shadow: 0 0 5px #cab8b8;
	margin:0 .3em;
	font-family: 'Din', sans-serif;
}
.AccessArea__item a{
	display: block;
	padding:1.4em 0;
	text-align: center;
	line-height: 3em;
	font-family: 'Din', sans-serif;
}
.AccessArea__item a img{max-width:80%}
.AccessArea__item .title{
	font-size: 1.6em;
    color: #182e97;
	padding:0 0.2em;
	font-weight: 900;
	vertical-align: middle;
	letter-spacing: -0.5px;
	line-height: 1.3em;
}
.AccessArea__item .cargo{
    background: #3bc8d3;
    color: #fff;
    font-weight: bold;
    padding: 0 0.5em;
    border-radius: 0.3em;
    vertical-align: middle;
    display: inline-block;
    padding-top: 3px;
    min-width: 2em;
    line-height: 1.2em;
}
.AccessArea__item:hover{border-color:#0098b4}
.AccessArea__item:hover .title{color:#0098b4}


/* ------------------------------------------------------------------
 * 로그인 팝업 (비밀번호 재설정 / 아이디 찾기) — 2026-08-23
 *
 * 예전에는 .Loginlayer .Modal__content 에 padding 이 없어 내용이 모달 테두리에
 * 붙었고, 설명이 없어 무엇을 입력하면 무슨 일이 일어나는지 알 수 없었다.
 * 설명·주의·도움말·결과 표시에 각각 위계를 준다.
 * (뷰의 인라인 style 은 제거하고 여기로 옮겼다 — CLAUDE.md 규칙)
 * ------------------------------------------------------------------ */

.Loginlayer .Modal__content {
	padding: 1.5em 1.75em 1.75em;
	/* dashboard.css 의 `.Modal__content{height:100%; max-height:45em}` 을 되돌린다.
	   그 값 때문에 내용보다 훨씬 큰 빈 상자가 나왔다. 예전 뷰가 인라인
	   style="height:auto" 로 덮고 있었는데, 인라인 스타일을 CSS 로 옮기면서 함께 정리했다. */
	height: auto;
	max-height: 92vh;
	overflow-y: auto;
}
/* 제목과 닫기 버튼을 같은 줄에서 정렬한다.
   절대배치로는 제목 글자 크기가 바뀔 때마다 위치가 어긋나므로 flex 로 맞춘다. */
.Loginlayer .Modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	text-align: left;
	padding-bottom: 0.75em;
	margin-bottom: 1.25em;
}
.Loginlayer .Modal__header .title {
	font-size: 1.35em;
	font-weight: 400;
	color: #222;
	margin: 0;
	line-height: 1.3;
}
/* 닫기 버튼 — 예전 값(top:25px right:0)은 헤더 밖·오른쪽 끝에 붙어 눌리지 않았다.
   position 을 풀어(기본 규칙이 absolute) 제목과 같은 행에 놓는다. */
.Loginlayer .Modal__close,
.Loginlayer .Modal__close:hover {
	position: static;
	top: auto;
	right: auto;
	flex: 0 0 auto;
	/* 다른 규칙이 margin-top:-24px 를 걸어 두어 제목보다 12px 위로 올라가 있었다 */
	margin: 0;
	padding: 0;
	line-height: 1;
	color: #8a8a8a;
}
.Loginlayer .Modal__close:hover { color: #222; }

/* 안내문 위계: lead(무엇을 하는지) → warn(되돌릴 수 없는 결과) → help(입력 형식) */
.LoginModal__lead {
	font-size: 0.875em;
	line-height: 1.75em;
	color: #444;
	margin: 0 0 0.75em;
}
.LoginModal__lead b { color: #0098b4; font-weight: 600; }

.LoginModal__warn {
	font-size: 0.825em;
	line-height: 1.7em;
	color: #8a5a00;
	background: #fff8ec;
	border-left: 3px solid #e0a020;
	border-radius: 3px;
	padding: 0.75em 0.9em;
	margin: 0 0 1.25em;
}
.LoginModal__warn b { font-weight: 700; }

.LoginModal__help {
	font-size: 0.75em;
	line-height: 1.6em;
	color: #8f8f8f;
	margin: 0.5em 0 0;
}
.LoginModal__help code {
	background: #f2f4f6;
	color: #555;
	padding: 0.1em 0.35em;
	border-radius: 2px;
	font-size: 0.95em;
	/* 전화번호 예시가 줄 중간에서 쪼개지면(010-123 / 4-5678) 읽을 수 없다 */
	white-space: nowrap;
}

/* 결과 — 폼 아래에 남겨 두므로 다시 읽을 수 있다(alert 는 닫으면 사라진다) */
.LoginModal__result {
	font-size: 0.825em;
	line-height: 1.7em;
	border-radius: 3px;
	padding: 0.8em 0.95em;
	margin-top: 1em;
}
.LoginModal__result.is-ok {
	color: #146b3a;
	background: #eefaf1;
	border: 1px solid #bfe6cc;
}
.LoginModal__result.is-error {
	color: #b3261e;
	background: #fdeeec;
	border: 1px solid #f2c4bf;
}

/* 팝업 사이 이동 */
.LoginModal__switch {
	font-size: 0.8em;
	color: #777;
	text-align: center;
	margin: 1.25em 0 0;
	padding-top: 1em;
	border-top: 1px solid #eee;
}
.LoginModal__link {
	color: #0098b4;
	font-weight: 600;
	margin-left: 0.35em;
	text-decoration: underline;
}
.LoginModal__note {
	font-size: 0.75em;
	line-height: 1.65em;
	color: #999;
	margin: 0.75em 0 0;
	text-align: center;
}

/* 경고(warn)가 아니라 단순 안내일 때. 아이디 찾기는 부작용이 없어졌으므로
   노란 경고가 아니라 파란 안내가 맞다. */
.LoginModal__info {
	font-size: 0.825em;
	line-height: 1.7em;
	color: #0b5e70;
	background: #eff9fb;
	border-left: 3px solid #0098b4;
	border-radius: 3px;
	padding: 0.75em 0.9em;
	margin: 0 0 1.25em;
}
.LoginModal__info b { font-weight: 700; }
.LoginModal__info { word-break: keep-all; }

/* 문의처는 줄 중간에서 끊기면 읽을 수 없다 (chbz@s / eline.co.kr 처럼 쪼개졌다) */
.LoginModal__note b { white-space: nowrap; }
.LoginModal__note, .LoginModal__lead, .LoginModal__warn { word-break: keep-all; }

/* 팝업의 주 버튼 — 로그인 버튼과 같은 색으로 맞춘다.
   Button__primary 의 기본색(남색)은 이 화면의 강조색(#0098b4)과 어긋난다. */
.Loginlayer .LoginForm__ok .Button__primary {
	background-color: #0098b4;
	border-color: #0098b4;
	color: #fff;
	height: 3em;
	line-height: 3em;
	border-radius: 5px;
	font-weight: 700;
}
.Loginlayer .LoginForm__ok .Button__primary:hover { background-color: #007e96; border-color: #007e96; }

/* 처리 중 버튼 — 중복 제출을 막는 것이 본 목적이고, 상태를 눈으로도 알려준다.
   문구 길이가 언어마다 크게 다르므로(예: "Email me a temporary password")
   고정폭이 아니라 최소폭 + 줄바꿈 허용으로 둔다. */
.LoginForm__ok button {
	min-width: 12em;
	max-width: 100%;
	height: auto;
	min-height: 3em;
	line-height: 1.45;
	padding: 0.7em 1.4em;
	white-space: normal;
	word-break: keep-all;
}
.LoginForm__ok button.is-busy,
.LoginForm__ok button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* 찾기 링크 스타일은 위쪽 `.LoginForm .find` 한 곳에서만 정의한다.
   2026-08-23: 여기 있던 박스형 규칙(한글 라벨 + 영문 보조 2줄)은 제거했다.
   보조 기능이 주 버튼보다 눈에 띄었고, 뒤에 오는 이 규칙이 위 규칙의 nowrap·
   padding 을 덮어 링크가 두 줄로 쪼개졌다. */

/* 좁은 화면 — 로고와 폼이 가로로 붙어 있어(원래 flex-direction:row) 카드가
   화면 밖으로 밀려 잘렸다. 세로로 쌓고 카드 폭을 화면에 맞춘다. */
@media (max-width: 760px) {
	.LoginForm { bottom: 0; width: 100%; }
	.LoginForm__inner {
		flex-direction: column;
		gap: 2em;
		padding: 2em 1.2em;
		box-sizing: border-box;
	}
	.LoginForm__login { width: min(21em, 100%); }
	.LoginForm__logo .img img { max-width: 62vw; height: auto; }
}

@media (max-width: 480px) {
	.Loginlayer .Modal__content { width: 92%; padding: 1.25em 1.1em 1.4em; }
	.LoginForm__ok button { width: 100%; }
	.LoginForm__login { padding: 2em 1.4em 1.6em; }
	.LoginForm__info { gap: 0.55em; }
	.LoginForm .find { font-size: 0.72em; }
}

/* 성공 후 확인 버튼 — 재제출을 막고 닫는 길만 남긴다 */
.LoginModal__done { margin-top: 0.7em; text-align: right; }
.LoginModal__closeBtn {
	border: 1px solid #bfe6cc;
	background: #fff;
	color: #146b3a;
	font-size: 1em;
	padding: 0.35em 1.2em;
	border-radius: 3px;
	cursor: pointer;
}
.LoginModal__closeBtn:hover { background: #f3fbf5; }

/* ------------------------------------------------------------------
 * 언어 전환 (우측 상단) — 2026-08-23
 *
 * 로그인 전에는 회원의 언어 설정(mb_lang)을 쓸 수 없어 화면에서 고르게 한다.
 * `?lang=kr|en|cn` -> SL_Controller::_require_lang() 이 세션에 저장한다.
 * ------------------------------------------------------------------ */
.LoginLang {
	position: fixed;
	top: 1.5em;
	right: 1.75em;
	z-index: 20;
	display: flex;
	align-items: center;
	/* 4개(한국어·English·中文·Tiếng Việt)라 좁은 화면에서는 줄바꿈이 필요하다 */
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: calc(100vw - 3.5em);
	gap: 0.2em;
	padding: 0.3em;
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(5px) saturate(120%);
	backdrop-filter: blur(5px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(28, 104, 117, 0.10);
}
.LoginLang__btn {
	display: block;
	padding: 0.45em 0.95em;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.2;
	color: #5f6b73;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.LoginLang__btn:hover { background: rgba(0, 152, 180, 0.10); color: #0098b4; }
.LoginLang__btn.is-on {
	background: #0098b4;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 152, 180, 0.30);
}
.LoginLang__btn.is-on:hover { background: #00819a; color: #fff; }

@media (max-width: 480px) {
	.LoginLang { top: 0.8em; right: 0.8em; }
	.LoginLang__btn { padding: 0.4em 0.7em; font-size: 0.7em; }
}