@charset "utf-8";
/* ============================================================
   login.css — 회원 로그인 페이지 전용 (스낵 디자인 이식)
   - new_html/public_html/member/login.php 에서만 사용
   - 전체화면 단독 레이아웃 (사이트 메뉴/푸터 없음)
   ============================================================ */

/* ----- Design Tokens ----- */
:root{
  --brand-900:#031919; --brand-800:#074e44; --brand-700:#005a54; --brand-600:#1fae9a;
  --brand-500:#07fad8; --brand-400:#4ae079; --brand-300:#4dfa83; --brand-200:#96fff4;
  --brand-100:#c1fffb; --brand-50:#f8fffe;
  --neutral-900:#1e1e1e; --neutral-800:#2e2e2e; --neutral-700:#3e3e3e; --neutral-500:#4e4e4e;
  --neutral-400:#6e6e6e; --neutral-300:#9e9e9e; --neutral-200:#cecece; --neutral-100:#eeeeee; --neutral-50:#f2f2f2;
  --font-base:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --font-mono:'Roboto Mono',monospace;
}

/* ----- Minimal reset (이 페이지 한정) ----- */
.login-page *, .login-page *::before, .login-page *::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body.login-page{
  font-family:var(--font-base);
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.login-page img, .login-page svg{ display:block; max-width:100%; }
.login-page a{ color:inherit; text-decoration:none; }
.login-page button{ cursor:pointer; border:none; background:none; padding:0; font-family:inherit; }
.login-page input{ font-family:inherit; border:none; outline:none; }
.login-page h1,.login-page h2,.login-page p,.login-page ul,.login-page li,.login-page dl{ margin:0; padding:0; list-style:none; }

/* ============================================================
   Login Page  (스낵 style.css 이식)
   ============================================================ */
.login-page{
  background:
    #f4f4f4;
  min-height:100vh;
  overflow-x:hidden;
}
.login{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px 40px; overflow:hidden; }
.login__inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 480px; gap:80px; align-items:center; width:100%; max-width:1020px; }

/* Left: Visual / Copy */
.login__visual{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; max-width:520px; }
.login__visual-brand img{ height:auto; max-height:104px; width:auto; margin-left:-39px; }
.login__visual-brand{ align-self:flex-start; text-align:left; margin-right:auto; }
.login__visual-title{ margin:0; padding-bottom:4px; font-size:52px; font-weight:700; line-height:1.35; letter-spacing:-0.04em; color:var(--neutral-900); }
.login__visual-title-line{ display:block; }
.login__visual-sub{ margin:0; padding-bottom:24px; font-size:20px; line-height:1.4; letter-spacing:-0.04em; color:var(--neutral-500); }
.login__feats{ display:flex; flex-direction:column; gap:12px; padding:0; margin:0; list-style:none; }
.login__feat{ display:flex; align-items:center; gap:8px; }
.login__feat-icon{ display:inline-flex; flex-shrink:0; width:24px; height:24px; line-height:0; }
.login__feat-icon svg{ display:block; width:100%; height:100%; }
.login__feat-text{ font-size:18px; line-height:1.2; letter-spacing:-0.04em; color:var(--neutral-500); }

/* Right: Login Form Card */
.login-form{ overflow:hidden; padding:48px 40px; background:#ffffff; border-radius:16px; box-shadow:0 8px 32px rgba(102,102,102,0.06); }
.login-form__head{ display:flex; flex-direction:column; gap:7px; }
.login-form__title{ margin:0; font-size:28px; font-weight:700; line-height:1.5; letter-spacing:-0.04em; color:var(--neutral-900); }
.login-form__desc{ margin:0; font-size:18px; line-height:1.5; letter-spacing:-0.04em; color:var(--neutral-700); }
.login-form__body{ display:flex; flex-direction:column; gap:7px; margin-top:17px; }

/* Field / Input */
.login-field{ display:flex; flex-direction:column; gap:8px; padding-top:24px; }
.login-field__label{ font-size:14px; font-weight:600; line-height:1; letter-spacing:-0.04em; color:var(--neutral-900); }
.login-field__input{ display:block; width:100%; }
.login-input{ display:block; width:100%; height:54px; padding:0 21px; background:#ffffff; border:1px solid #cecece; border-radius:8px; color:var(--neutral-900); font-family:inherit; font-size:16px; line-height:1; letter-spacing:-0.04em; transition:border-color 150ms ease, box-shadow 150ms ease; }
.login-input::placeholder{ color:#9e9e9e; }
.login-input:hover{ border-color:var(--neutral-300); }
.login-input:focus, .login-input:focus-visible{ outline:none; border-color:var(--neutral-900); box-shadow:0 0 0 3px rgba(30,30,30,0.08); }

/* Options (Save ID + Find links) */
.login-form__options{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 20px; }
.login-check{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; line-height:1; }
.login-check__input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.login-check__box{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:20px; height:20px; background:#ffffff; border:1px solid var(--neutral-300); border-radius:4px; transition:background 150ms ease, border-color 150ms ease; }
.login-check__icon{ opacity:0; transition:opacity 120ms ease; }
.login-check__input:checked ~ .login-check__box{ background:var(--neutral-900); border-color:var(--neutral-900); }
.login-check__input:checked ~ .login-check__box .login-check__icon{ opacity:1; }
.login-check__input:focus-visible ~ .login-check__box{ box-shadow:0 0 0 3px rgba(7,250,216,0.4); }
.login-check__text{ font-size:16px; line-height:1; letter-spacing:-0.04em; color:var(--neutral-900); }
.login-form__find{ display:inline-flex; align-items:center; gap:20px; }
.login-form__find-link{ padding:2px; border:0; background:none; font-family:inherit; font-size:14px; line-height:1; letter-spacing:-0.04em; color:var(--neutral-500); text-decoration:none; cursor:pointer; transition:color 150ms ease; }
.login-form__find-link:hover, .login-form__find-link:focus-visible{ color:var(--neutral-900); text-decoration:underline; text-underline-offset:3px; }

/* Submit Button */
.login-page .login-form__submit{ display:flex; align-items:center; justify-content:center; width:100%; height:54px; padding:0 6px; background:var(--neutral-900); border:0; border-radius:8px; color:#ffffff; font-family:inherit; font-size:18px; font-weight:700; line-height:1; letter-spacing:-0.04em; cursor:pointer; transition:background 180ms ease, box-shadow 180ms ease, transform 120ms ease; }
.login-page .login-form__submit:hover{ background:#000000; box-shadow:0 6px 16px rgba(0,0,0,0.18); }
.login-page .login-form__submit:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(7,250,216,0.6); }
.login-page .login-form__submit:active{ transform:scale(0.99); }

.login-page .login-form__signup-btn{ display:flex; align-items:center; justify-content:center; width:100%; height:54px; margin-top:12px; padding:0 6px; background:#1aa260; border:0; border-radius:8px; color:#ffffff; font-family:inherit; font-size:18px; font-weight:700; line-height:1; letter-spacing:-0.04em; text-decoration:none; cursor:pointer; transition:background 180ms ease, box-shadow 180ms ease, transform 120ms ease; }
.login-page .login-form__signup-btn:hover{ background:#158a51; box-shadow:0 6px 16px rgba(0,0,0,0.18); }
.login-page .login-form__signup-btn:active{ transform:scale(0.99); }

/* Signup link */
.login-form__signup{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding-top:18px; margin:0; font-size:15px; line-height:1; letter-spacing:-0.04em; color:var(--neutral-500); text-align:center; width:100%; }
.login-form__signup-link{ font-weight:700; color:var(--neutral-900); text-decoration:underline; text-underline-offset:3px; transition:color 150ms ease; }
.login-form__signup-link:hover{ color:var(--brand-700); }

/* Info note */
.login-form__note{ padding-top:14px; margin:0; font-size:13px; line-height:1.5; letter-spacing:-0.04em; color:var(--neutral-400); text-align:center; }

/* Responsive */
@media (max-width:1200px){
  .login-page{ background-size:60%,60%; }
  .login{ padding:60px 24px; }
  .login__inner{ grid-template-columns:minmax(0,1fr) 440px; gap:48px; }
  .login__visual-title{ font-size:44px; }
}
@media (max-width:960px){
  .login{ padding:40px 20px; }
  .login__inner{ grid-template-columns:1fr; gap:40px; max-width:480px; padding-top:20px; }
  .login__visual{ align-items:center; text-align:center; max-width:none; }
  .login__visual-title{ font-size:36px; }
  .login__visual-title-line{ display:inline-block; }
  .login__visual-sub{ display:none; padding-bottom:16px; font-size:17px; }
  .login__feats{ display:none; align-items:flex-start; }
  .login__feat-text{ font-size:16px; }
}
@media (max-width:480px){
  .login-form{ padding:32px 24px; }
  .login-form__title{ font-size:22px; }
  .login-form__desc{ font-size:15px; }
  .login-form__options{ flex-wrap:wrap; gap:10px; }
  .login__visual-title{ font-size:30px; }
  .login__visual-sub{ font-size:16px; }
}


/* 홈 버튼 (타이틀 위) */
.login__home-btn{ display:inline-flex; align-items:center; gap:8px; width:fit-content; padding:10px 24px; margin-bottom:22px; border:1px solid #6cc794; border-radius:999px; background:#6cc794; color:#ffffff; text-decoration:none; font-size:18px; font-weight:400; transition:background .15s, border-color .15s; }
.login__home-btn:hover{ background:#57bd82; border-color:#57bd82; color:#ffffff; }
.login__home-btn svg{ display:block; }

.login__home-btn, .login__home-btn span, .login__home-btn:hover, .login__home-btn:hover span { color:#ffffff !important; }


/* 우측 하단 장식 이미지 (로그인 박스 위) */
.login__deco-img{ position:fixed; left:calc(50% + 214px); right:auto; bottom:0; width:480px; height:auto; z-index:50; pointer-events:none; }
@media (max-width:768px){ .login__deco-img{ width:260px; right:10px; } }


/* 로그인 박스 하단을 화면 맨 아래까지 */
.login{ align-items:stretch; padding-bottom:0; }
.login__inner{ align-items:stretch; }
.login__visual{ align-self:center; }
.login-form{ border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }


/* 가로 1920px 미만에서는 우측 하단 이미지 숨김 (1920px 이상에서 표시) */
@media (max-width:1919px){ .login__deco-img{ display:none !important; } }