@charset "utf-8";
/* =========================================================================
 * JDH 프론트 로그인 (www/member/login.jsp 전용)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 *
 * 이 페이지는 "퍼블리싱 페이지" 가 아니라 모듈 기능 페이지다 —
 * 폼 필드명(id / password / from / name / email / url / param)과 action(/include/login)은
 * 서버가 받는 규격이므로 마크업을 손볼 때도 **이름은 절대 바꾸지 말 것**.
 * 여기서는 껍데기(레이아웃·색·타이포)만 JDH 톤으로 입힌다.
 *
 * 톤은 게시판(page_board.css)과 맞췄다 — 같은 계열의 기능 페이지라 히어로 규격이 동일하다.
 * ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&display=swap');

.lg {
	--lg-green:    #24382C;
	--lg-green-2:  #3B5843;
	--lg-gold:     #C2A878;
	--lg-gold-ink: #A5854B;
	--lg-gold-3:   #CDBF9C;
	--lg-ink:      #1C1E1A;
	--lg-body:     #55594F;
	--lg-mute:     #9A978E;
	--lg-line:     #E7E1D6;
	--lg-line-2:   #EEE8DD;
	--lg-bg:       #FAF8F4;
	font-family: 'Pretendard', sans-serif;
	color: var(--lg-ink);
	background: #fff;
	overflow-x: clip;
}
.lg .blind {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== 히어로 — 게시판(.dctb_hero)과 같은 규격 ===== */
.lg_hero {
	background: var(--lg-green-2);
	background-image:
		radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%),
		linear-gradient(180deg, rgba(10,16,12,.10) 0%, rgba(10,16,12,.28) 100%);
	padding: 62px 24px 66px;
	text-align: center;
}
.lg_hero__eng {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700; font-size: 17px; letter-spacing: 4.6px; text-transform: uppercase;
	color: var(--lg-gold-3);
}
.lg_hero__title {
	margin: 14px 0 0;
	font-weight: 700; font-size: 38px; line-height: 1.2; letter-spacing: -0.4px; color: #fff;
}
.lg_hero__desc {
	margin: 14px 0 0;
	font-weight: 400; font-size: 15.5px; line-height: 1.7; color: rgba(233,240,232,.76);
	word-break: keep-all;
}

/* ===== 본문 ===== */
.lg_main { background: var(--lg-bg); padding: 64px 24px 96px; }
.lg_card {
	max-width: 460px; margin: 0 auto;
	background: #fff;
	border: 1px solid var(--lg-line-2);
	border-radius: 14px;
	padding: 44px 40px 40px;
	box-shadow: 0 18px 44px -28px rgba(28,40,30,.28);
}

/* ── 입력 ── */
.lg_field + .lg_field { margin-top: 20px; }
.lg_label {
	display: block; margin-bottom: 9px;
	font-weight: 600; font-size: 14px; letter-spacing: -0.2px; color: var(--lg-body);
}
.lg_input__box { position: relative; }
.lg_input {
	width: 100%; height: 54px;
	padding: 0 16px;
	border: 1px solid var(--lg-line);
	border-radius: 8px;
	background: #fff;
	font-family: inherit; font-size: 16px; color: var(--lg-ink);
	transition: border-color .2s, box-shadow .2s;
}
.lg_input::placeholder { color: #B4B0A6; }
/* ⚠ 모듈 공통 CSS 가 input 에 손대는 경우가 있어 포커스 링을 여기서 명시한다 */
.lg_input:focus {
	outline: none;
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 3px rgba(194,168,120,.18);
}
/* 비밀번호 칸만 토글 버튼 자리를 비워 둔다 */
.lg_input--pw { padding-right: 52px; }
.lg_pwtoggle {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border: 0; background: none; cursor: pointer; padding: 0;
	color: var(--lg-mute);
	transition: color .2s;
}
.lg_pwtoggle:hover { color: var(--lg-body); }
.lg_pwtoggle svg { width: 21px; height: 21px; display: block; }
.lg_pwtoggle .lg_ic--off { display: none; }
.lg_pwtoggle.is-on .lg_ic--on  { display: none; }
.lg_pwtoggle.is-on .lg_ic--off { display: block; }

/* ── 아이디 저장 / 찾기 ── */
.lg_row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 18px;
}
.lg_save {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14.5px; color: var(--lg-body); cursor: pointer; user-select: none;
}
.lg_save input {
	width: 17px; height: 17px; margin: 0;
	accent-color: var(--lg-green-2);   /* 체크 색만 브랜드 톤으로(브라우저 기본 모양 유지) */
	cursor: pointer;
}
.lg_find { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; }
.lg_find a { color: var(--lg-mute); text-decoration: none; transition: color .2s; }
.lg_find a:hover { color: var(--lg-gold-ink); text-decoration: underline; }
.lg_find span { color: var(--lg-line); }

/* ── 로그인 버튼 ── */
.lg_submit {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 54px; margin-top: 24px;
	border: 0; border-radius: 8px;
	background: var(--lg-green);
	font-family: inherit; font-weight: 700; font-size: 17px; letter-spacing: -0.2px; color: #fff;
	text-decoration: none; cursor: pointer;
	transition: background .2s, transform .2s;
}
.lg_submit:hover { background: var(--lg-green-2); color: #fff; }
.lg_submit:active { transform: translateY(1px); }

/* ── SNS ── */
/* 구분선 — 가운데 글자 양옆으로 선이 뻗는다(::before/::after 대신 flex 로 두 줄을 그려
 *   글자 길이가 바뀌어도 선이 항상 균등하게 남는다) */
.lg_or {
	display: flex; align-items: center; gap: 14px;
	margin: 30px 0 18px;
	font-size: 13.5px; color: var(--lg-mute); white-space: nowrap;
}
.lg_or::before, .lg_or::after {
	content: ''; flex: 1 1 auto; height: 1px; background: var(--lg-line-2);
}
.lg_sns { display: flex; flex-direction: column; gap: 10px; }
.lg_sns__btn {
	display: flex; align-items: center; gap: 10px;
	height: 50px; padding: 0 18px;
	border: 1px solid var(--lg-line); border-radius: 8px;
	background: #fff;
	font-size: 15px; font-weight: 500; color: var(--lg-ink); text-decoration: none;
	transition: background .2s, border-color .2s;
}
.lg_sns__btn:hover { background: #FCFBF7; border-color: var(--lg-gold); color: var(--lg-ink); }
.lg_sns__ic { flex: 0 0 auto; width: 22px; height: 22px; line-height: 0; }
.lg_sns__ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lg_sns__ic svg { width: 100%; height: 100%; display: block; }

/* 카카오 — 브랜드 가이드 규격(배경 #FEE500 / 심볼·글자 검정 85%).
 * 카카오는 버튼 색과 심볼이 브랜드의 일부라 다른 SNS 버튼처럼 흰 테두리 버튼으로 두지 않는다.
 * 말풍선 심볼은 인라인 SVG — /img/login_icon02.png 는 노란 원 테두리가 함께 그려진 컷이라
 * 노란 버튼 위에 얹으면 테두리가 묻혀 어색하다. */
.lg_sns__btn--kakao {
	background: #FEE500;
	border-color: #FEE500;
	color: rgba(0,0,0,.85);
	font-weight: 600;
}
.lg_sns__btn--kakao:hover {
	background: #F4DC00;
	border-color: #F4DC00;
	color: rgba(0,0,0,.85);
}
.lg_sns__btn--kakao .lg_sns__ic { color: rgba(0,0,0,.85); }

/* ── 회원가입 안내 ── */
.lg_join {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 28px; padding-top: 26px;
	border-top: 1px solid var(--lg-line-2);
	font-size: 15px; color: var(--lg-body);
}
.lg_join a {
	font-weight: 700; color: var(--lg-gold-ink); text-decoration: none;
	border-bottom: 1px solid rgba(165,133,75,.42); padding-bottom: 1px;
	transition: border-color .2s;
}
.lg_join a:hover { border-bottom-color: var(--lg-gold-ink); }

/* ── 이미 로그인한 상태로 들어온 경우 ── */
.lg_signed { text-align: center; }
.lg_signed__ic {
	width: 54px; height: 54px; margin: 0 auto 18px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: rgba(59,88,67,.09); color: var(--lg-green-2);
}
.lg_signed__ic svg { width: 26px; height: 26px; }
.lg_signed__tit { margin: 0; font-weight: 700; font-size: 20px; letter-spacing: -0.3px; }
.lg_signed__txt { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--lg-body); }
.lg_signed__txt b { color: var(--lg-ink); }
.lg_signed__btns { display: flex; gap: 10px; margin-top: 26px; }
.lg_signed__btns > * { flex: 1 1 0; }
.lg_btn--line {
	display: flex; align-items: center; justify-content: center;
	height: 50px; border-radius: 8px;
	border: 1px solid var(--lg-line);
	background: #fff; font-size: 15px; font-weight: 600; color: var(--lg-body); text-decoration: none;
	transition: border-color .2s, color .2s;
}
.lg_btn--line:hover { border-color: var(--lg-gold); color: var(--lg-gold-ink); }

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 768px) {
	.lg_hero { padding: 46px 18px 50px; }
	.lg_hero__eng { font-size: 15px; letter-spacing: 3.4px; }
	.lg_hero__title { font-size: 27px; }
	.lg_hero__desc { font-size: 14.5px; }
	.lg_hero__desc br { display: none; }

	.lg_main { padding: 40px 18px 68px; }
	.lg_card { padding: 32px 22px 30px; border-radius: 12px; }
	.lg_input, .lg_submit { height: 52px; }
	.lg_row { flex-wrap: wrap; gap: 10px 12px; }
	.lg_join { flex-direction: column; gap: 8px; }
}