@charset "utf-8";
/* =====================================================================
   학습공동체(Learning Community) 로그인 화면 전용 CSS
   login.css
   ---------------------------------------------------------------------
   출처: d:/sources/learning-community/app/css/lc-tokens.css(:root 토큰)
        + app/login.html <style> 블록(마크업/스타일만 이식, 인증 로직 제외)

   주의: header.jsp가 2ver_common.css / bootstrap 을 함께 로드하므로,
        전역 규칙(input, #wrap 등)에 밀리지 않도록 body.lc-login-page 로
        스코프를 강화하고 필요한 리셋을 명시한다.
   ===================================================================== */

:root{
	/* ── 브랜드: 색면(fill)용 ── */
	--lc-primary:    #2BB8AD;
	--lc-grd:        linear-gradient(-90deg,#30C0C0,#0A6F69);
	--lc-light:      #DFF4F1;

	/* ── 브랜드: 텍스트/아이콘용 ── */
	--lc-primary-text: #0E8A83;
	--lc-fill:         #0F9A92;
	--lc-fill-strong:  #0B6F69;
	--lc-dark:         #0A4F4B;
	--lc-accent:       #30C0C0;

	/* ── 표면/배경/구분선 ── */
	--lc-bg:         #EAF6F4;
	--lc-surface:    #ffffff;
	--lc-border:     #eef1f6;

	/* ── 텍스트 ── */
	--lc-text:       #222222;
	--lc-text-sub:   #555555;
	--lc-gray:       #5a6270;
	--lc-on-brand:   #ffffff;

	/* ── 타이포 ── */
	--lc-font: 'pretendard','Noto Sans KR','Malgun Gothic',sans-serif;
	--lc-fw-bold: 700;

	--lc-fs-sm:   0.875rem;
	--lc-fs-base: 1rem;
	--lc-fs-md:   1.075rem;

	/* ── 그림자/반경 ── */
	--lc-shadow-sm: 0 2px 4px rgba(0,0,0,.1);
	--lc-radius:    12px;
	--lc-radius-lg: 18px;

	/* ── 상태색 ── */
	--lc-red:    #c0182a;  --lc-red-bg: #ffe9e9;
}

/* ── 페이지 리셋 (2ver_common.css / bootstrap 전역 규칙 무력화) ── */
body.lc-login-page{
	background:var(--lc-bg) !important;
	font-family:var(--lc-font);
	margin:0; padding:0;
	min-width:0;
}
body.lc-login-page #wrap{
	width:auto !important; min-width:0 !important; max-width:none !important;
	min-height:100vh;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	padding:20px; margin:0; box-sizing:border-box;
	background:transparent;
}
/* header/top/footer 가 혹시 조립되어도 로그인 화면에선 숨긴다(방어적) */
body.lc-login-page #header,
body.lc-login-page #footer,
body.lc-login-page #gnb,
body.lc-login-page .top{
	display:none !important;
}

/* ── 로그인 카드 ── */
body.lc-login-page .lc-login{
	width:100%; max-width:400px;
	background:var(--lc-surface);
	border:1px solid var(--lc-border);
	border-radius:var(--lc-radius-lg);
	box-shadow:var(--lc-shadow-sm);
	padding:40px 32px;
	margin:0 auto;
	box-sizing:border-box;
}
body.lc-login-page .lc-login .brand{ text-align:center; margin-bottom:28px; }
body.lc-login-page .lc-login .brand .logo{
	display:block; width:253px; max-width:80%; height:auto;
	margin:0 auto 10px;
}
body.lc-login-page .lc-login .brand .sub{
	font-size:var(--lc-fs-sm); color:var(--lc-gray); margin:0;
}
body.lc-login-page .lc-login label{
	display:block; font-size:var(--lc-fs-sm); font-weight:var(--lc-fw-bold);
	color:var(--lc-primary-text); margin:16px 0 6px;
}
body.lc-login-page .lc-login input[type="text"],
body.lc-login-page .lc-login input[type="password"]{
	width:100%; box-sizing:border-box;
	height:auto; margin:0;
	padding:12px 14px;
	font-size:var(--lc-fs-base); font-family:inherit; line-height:1.4;
	border:1px solid var(--lc-border); border-radius:var(--lc-radius);
	background:#fff; color:var(--lc-text);
	box-shadow:none;
}
body.lc-login-page .lc-login input[type="text"]:focus,
body.lc-login-page .lc-login input[type="password"]:focus{
	outline:2px solid var(--lc-accent); outline-offset:1px;
	border-color:var(--lc-accent); box-shadow:none;
}
body.lc-login-page .lc-login .btn{
	display:block; width:100%; margin-top:24px; padding:13px; cursor:pointer;
	font-size:var(--lc-fs-md); font-weight:var(--lc-fw-bold); font-family:inherit;
	color:var(--lc-on-brand) !important; background:var(--lc-primary);
	border:none; border-radius:var(--lc-radius); text-align:center;
	text-decoration:none; box-sizing:border-box;
}
body.lc-login-page .lc-login .btn:hover{ filter:brightness(0.95); color:var(--lc-on-brand) !important; }
body.lc-login-page .lc-login .err{
	display:none; margin-top:16px; padding:10px 12px;
	font-size:var(--lc-fs-sm); color:var(--lc-red);
	background:var(--lc-red-bg); border-radius:var(--lc-radius);
}
body.lc-login-page .lc-login .err.show{ display:block; }