/* 워키스 로그인 — 그누보드 /bbs/login.php 오버레이 스킨 (workis2 전용).
 *
 * 워키스 V3 로그인 디자인(SCR-001, intra/pages/login.php)을 그누보드 로그인에 이식.
 *  - webon 테마 크롬 위에 position:fixed 풀스크린으로 덮는다(테마 head/tail 은 그대로 두어 HTML 균형 유지).
 *  - 폼은 그누보드 실인증(mb_id/mb_password → login_check)에 배선된다(login.skin.php).
 *  - 토큰/컴포넌트는 인트라 assets 에 못 닿으므로 필요한 값만 이 파일에 자체 포함한다.
 *  - box-shadow 미사용(빌드계약 §2.1). 면 구분은 배경색으로만.
 */

.p-login {
  /* ── 토큰 (워키스 V3 tokens.css 발췌) ── */
  --color-primary: #3182f6;
  --color-primary-strong: #2571e0;
  --color-primary-strong-hover: #1f6ad8;
  --color-primary-hover: #2272eb;
  --color-canvas: #ffffff;
  --color-page: #f2f4f6;
  --color-border: #e5e8eb;
  --color-border-strong: #d8dde3;
  --color-text: #191f28;
  --color-text-body: #4e5968;
  --color-text-muted: #5f6b7a;
  --color-text-disabled: #b0b8c1;
  --radius-md: 10px;
  --radius-card: 14px;
  --space-2: 6px;  --space-3: 8px;  --space-4: 12px; --space-5: 16px;
  --space-6: 20px; --space-7: 24px; --space-8: 32px;
  --fs-hint: 12px; --fs-table: 13px; --fs-body: 14px; --fs-lead: 15px; --fs-title: 24px;

  /* ── 풀스크린 오버레이 — webon 크롬을 완전히 덮는다 ── */
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  min-height: 100vh;
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text-body);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-align: left;
}
.p-login *, .p-login *::before, .p-login *::after { box-sizing: border-box; }
.p-login a { color: inherit; text-decoration: none; }

/* ── 좌: 브랜드 히어로 (파란 면) ── */
.p-login__hero {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--space-8) clamp(32px, 6vw, 88px);
  background: var(--color-primary-strong);
  color: var(--color-canvas);
}
.p-login__hero-inner { width: 100%; max-width: 620px; }

.p-login__brand {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-8);
}
.p-login__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-canvas); color: var(--color-primary);
  font-size: 20px; font-weight: 700; line-height: 1;
}
.p-login__word { font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--color-canvas); }
.p-login__ko { font-size: var(--fs-hint); color: var(--color-canvas); align-self: flex-end; padding-bottom: 3px; }

.p-login__copy {
  margin: 0 0 var(--space-5);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700; line-height: 1.35; letter-spacing: -1px;
  color: var(--color-canvas);
}
.p-login__lead {
  margin: 0 0 var(--space-8);
  max-width: 46ch;
  font-size: var(--fs-lead); line-height: 1.7;
  color: var(--color-canvas);
}
.p-login__company {
  border-top: 1px solid var(--color-primary-hover);
  padding-top: var(--space-5);
  font-size: var(--fs-hint); line-height: 1.7;
  color: var(--color-canvas);
}
.p-login__company p { margin: 0; }

/* ── 우: 로그인 폼 (흰 면) ── */
.p-login__panel {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  padding: var(--space-8) var(--space-7);
  background: var(--color-canvas);
}
.p-login__panel-inner { width: 100%; max-width: 380px; }

.p-login__title { margin: 0; font-size: var(--fs-title); font-weight: 700; color: var(--color-text); }
.p-login__sub { margin: var(--space-2) 0 var(--space-7); font-size: var(--fs-body); color: var(--color-text-muted); }

.p-login__field { margin-bottom: var(--space-5); }
.p-login__field label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--fs-table); font-weight: 600; color: var(--color-text);
}

/* 인풋 (.c-input 발췌 + 로그인 전용 크기) */
.p-login .c-input {
  display: block; width: 100%; height: 44px; min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  font-family: inherit; font-size: var(--fs-body); line-height: 1.2;
  color: var(--color-text);
}
.p-login .c-input::placeholder { color: var(--color-text-muted); }
.p-login .c-input:hover { border-color: var(--color-text-disabled); }
.p-login .c-input:focus-visible,
.p-login .c-input:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 1px; }

.p-login__row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3); margin-bottom: var(--space-6);
}
.p-login__check {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-table); color: var(--color-text-body); cursor: pointer;
}
.p-login__check input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.p-login__find { font-size: var(--fs-table); color: var(--color-text-muted); }
.p-login__find a:hover { color: var(--color-primary); }

/* 버튼 (.c-btn 발췌) */
.p-login .c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--color-canvas); color: var(--color-text);
  font-family: inherit; font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.p-login .c-btn--lg { height: 46px; padding: 0 20px; font-size: var(--fs-lead); }
.p-login .c-btn--primary { background: var(--color-primary-strong); color: var(--color-canvas); }
.p-login .c-btn--primary:hover { background: var(--color-primary-strong-hover); color: var(--color-canvas); }
.p-login .c-btn--secondary { background: var(--color-canvas); border-color: var(--color-border-strong); color: var(--color-text); }
.p-login .c-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.p-login .c-btn[disabled] { opacity: .5; cursor: not-allowed; }

.p-login__submit { display: flex; width: 100%; margin-bottom: var(--space-3); }
.p-login__note { margin: var(--space-2) 0 0; font-size: var(--fs-hint); color: var(--color-text-muted); }

/* 로그인 에러 메시지 (그누보드 alert 대체 인라인) */
.p-login__error {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-page);
  font-size: var(--fs-table); color: var(--color-text-body);
}

/* ── 반응형 — 1023 아래 1단, 히어로를 위로 ── */
@media (max-width: 1179px) { .p-login { grid-template-columns: minmax(0, 1fr) 440px; } }
@media (max-width: 1023px) {
  .p-login { grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
  .p-login__hero { padding: var(--space-8) var(--space-7); }
  .p-login__copy { margin-bottom: var(--space-4); }
  .p-login__lead { margin-bottom: var(--space-6); }
  .p-login__panel-inner { max-width: 460px; }
}
@media (max-width: 767px) {
  .p-login__hero { padding: var(--space-7) var(--space-5); }
  .p-login__panel { padding: var(--space-7) var(--space-5); }
}