@import url("aitom-theme.css");   /* aitom 컨셉 색 — 반드시 첫 줄 */
/* 이 서비스만의 스타일. 공통은 /lib/ai-platform/ai-platform.css */

/* ============================================================
   로그인 (templates/login.html) — 공통 레이아웃 없이 한 장으로 선다.
   aitom 로그인 화면 구성: 파란 그라데이션 전면 + 왼쪽 소개(배지·제목·기능 카드·지표)
   + 오른쪽 유리 테두리 안의 흰 로그인 카드. 색은 aitom-theme.css 의 --ap-navy* 에서.
   ============================================================ */
.gw-login {
  /* 파란 바탕 위 글자. 바탕 가장 밝은 곳(--ap-navy)에서 둘째 줄 5.4:1, 강조 글자(큰 글씨) 4:1 */
  --gw-on-blue: #E3EEF5;
  --gw-hl: #9ED6EC;
  /* 배경 세 단 — aitom.co.kr 로그인과 같은 값 */
  --gw-bg-1: #1A3A52;
  --gw-bg-2: #2A5F7F;
  --gw-bg-3: #3A7CA5;
  /* 유리 칸·선 — aitom.co.kr 값. 선은 연하게 둬 차분하게 (카드 .10, 배지 .18, 맨 위 띠 .06, 지표 위 .08) */
  --gw-glass: rgb(255 255 255 / .06);
  --gw-glass-line: rgb(255 255 255 / .10);

  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  color: var(--krds-white);
  background:
    linear-gradient(rgb(255 255 255 / .02) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(90deg, rgb(255 255 255 / .02) 1px, transparent 1px) 0 0 / 6rem 6rem,
    radial-gradient(circle at calc(100% - 20rem) 10rem, rgb(255 255 255 / .06) 0 30rem, transparent 30rem),
    radial-gradient(circle at 12rem calc(100% - 8rem), rgb(255 255 255 / .06) 0 20rem, transparent 20rem),
    radial-gradient(circle at 60% 55%, rgb(255 255 255 / .03) 0 15rem, transparent 15rem),
    linear-gradient(135deg, var(--gw-bg-1) 0%, var(--gw-bg-2) 40%, var(--gw-bg-3) 100%);
  background-attachment: fixed;
}

/* ── 맨 위 띠 ─────────────────────────────────────────── */
.gw-top {
  padding: 1.6rem 4.8rem;
  background: rgb(26 58 82 / .2);
  border-bottom: 1px solid rgb(255 255 255 / .06);
}
.gw-top-brand { display: inline-flex; align-items: center; gap: 1rem; }
.gw-top-mark { width: 3.4rem; height: 3.4rem; filter: brightness(0) invert(1); }   /* 심볼을 흰색으로 */
.gw-top-word { height: 1.8rem; width: auto; }

/* aitom.co.kr 처럼 소개를 왼쪽에 붙여 52% 를 주고, 나머지 가운데에 로그인 */
.gw-split {
  flex: 1;
  display: flex; align-items: center;
  width: 100%;
  padding: 4rem 4.8rem;
}

/* ── 왼쪽 소개 ─────────────────────────────────────────── */
.gw-hero { flex: 0 0 52%; min-width: 0; padding: 2rem 4rem 2rem 2rem; }
.gw-badge {
  display: inline-block;
  padding: .7rem 1.6rem;
  border: 1px solid rgb(255 255 255 / .18); border-radius: var(--ap-rd-pill);
  background: rgb(255 255 255 / .1);
  font-size: 1.2rem; font-weight: 600; letter-spacing: .03rem;
}
.gw-hero-title {
  margin-top: 2rem;
  font-size: 4.2rem; font-weight: 800; letter-spacing: -.05rem; line-height: 1.25;
}
.gw-hero-title em { font-style: normal; color: var(--gw-hl); }
.gw-hero-lead { margin-top: 1.8rem; max-width: 48rem; font-size: 1.5rem; line-height: 1.7; color: var(--gw-on-blue); }
.gw-hero-lead span { display: block; }

.gw-features {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem;
  margin: 3.2rem 0 0; padding: 0; list-style: none;
}
.gw-features li {
  display: flex; gap: 1.4rem; align-items: flex-start;
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--gw-glass-line); border-radius: 1.4rem;
  background: rgb(255 255 255 / .06);
  font-size: 1.2rem; line-height: 1.5; color: var(--gw-on-blue);
}
.gw-features li:hover { background: rgb(255 255 255 / .11); border-color: rgb(255 255 255 / .2); }
.gw-features strong { display: block; margin-bottom: .4rem; font-size: 1.4rem; color: var(--krds-white); }
.gw-feat-ico {
  flex: none; display: grid; place-items: center;
  width: 4rem; height: 4rem; border-radius: 1.1rem;
  background: rgb(126 200 227 / .15); color: var(--gw-hl);
}
.gw-feat-ico svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gw-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2.8rem 0 0; padding-top: 1.6rem;
  border-top: 1px solid rgb(255 255 255 / .08);
  text-align: center;
}
.gw-stats > div + div { border-left: 1px solid var(--gw-glass-line); }
.gw-stats dt { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03rem; color: var(--gw-hl); }
.gw-stats dd { margin: .4rem 0 0; font-size: 1.2rem; color: var(--gw-on-blue); }

/* ── 오른쪽 로그인 ─────────────────────────────────────── */
.gw-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--krds-gap-3); }
.gw-frame {
  width: 100%; max-width: 64rem;
  padding: 4rem;
  border: 1px solid var(--gw-glass-line); border-radius: 2.8rem;
  background: var(--gw-glass);
}
/* 로그인 카드 — aitom.co.kr 의 login-card 수치 (머리·몸통·발 세 칸) */
.gw-panel {
  --gw-primary: #3A7CA5;        /* aitom.co.kr --primary. 흰 글자 4.6:1 */
  --gw-primary-dark: #2E6A8F;
  --gw-field-line: #D1D5DB;     /* 입력칸 테두리 — 원본(#E5E7EB)은 1.2:1 이라 3:1 로 한 단계 짙게 */
  --gw-field-bg: #F9FAFB;
  width: 100%; max-width: 42rem; margin: 0 auto;
  overflow: hidden;
  border-radius: 2.4rem;
  background: var(--krds-white); color: var(--krds-gray-90);
  box-shadow: 0 2.5rem 8rem rgb(0 0 0 / .15), 0 .4rem 1.6rem rgb(0 0 0 / .08);
}
.gw-card-head {
  display: flex; flex-direction: column; align-items: center;
  padding: 3.6rem 3.6rem 2.4rem;
  background: linear-gradient(180deg, var(--krds-gray-5) 0%, var(--krds-white) 100%);
}
.gw-logo-mark { width: 5.2rem; height: 5.2rem; filter: drop-shadow(0 .4rem 1.2rem rgb(58 124 165 / .2)); }
.gw-logo-word { height: 1.6rem; width: auto; margin-top: .8rem; }   /* aitom.co.kr 처럼 심볼보다 한참 작게 */
.gw-deco { display: flex; align-items: center; gap: 1.2rem; width: 100%; margin-top: 2rem; }
.gw-deco span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--krds-gray-20), transparent); }
.gw-deco i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gw-primary); opacity: .25; }
.gw-deco i:nth-of-type(2) { opacity: .5; margin: 0 -.6rem; }

.gw-card-body { padding: .4rem 3.6rem 2.8rem; }
.gw-panel .form-group + .form-group { margin-top: 1.4rem; }
.gw-panel .form-tit { margin-bottom: .6rem; }
.gw-panel .form-tit label { font-size: 1.3rem; font-weight: 700; color: var(--krds-gray-80); }
.gw-panel .form-control {
  height: 4.6rem; min-height: 0; padding: 0 1.6rem;
  border: 1.5px solid var(--gw-field-line); border-radius: 1.2rem;
  background: var(--gw-field-bg);
  font-size: 1.4rem; color: var(--krds-gray-90);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.gw-panel .form-control::placeholder { color: var(--krds-gray-50); }
.gw-panel .form-control:hover { border-color: var(--krds-gray-40); }
.gw-panel .form-control:focus { border-color: var(--gw-primary); background: var(--krds-white); box-shadow: 0 0 0 3px rgb(58 124 165 / .12); }
.gw-panel .form-conts.is-error .form-control { border-color: var(--krds-danger); background: var(--krds-white); }
.gw-panel .form-hint-invalid { margin-top: .6rem; font-size: 1.3rem; }
.gw-panel .ap-form-error { margin-bottom: 1.4rem; font-size: 1.3rem; border-radius: .8rem; }

/* 비밀번호 보기 — 눈 아이콘. 지금 상태는 aria-pressed 로 */
.gw-panel .ap-pw { position: relative; }
.gw-panel .ap-pw .form-control { padding-right: 4.8rem; }
.gw-eye {
  position: absolute; right: .6rem; top: .3rem;
  display: grid; place-items: center;
  width: 4rem; height: 4rem; padding: 0;
  border: 0; border-radius: .8rem; background: none;
  color: var(--krds-gray-50); cursor: pointer;
}
.gw-eye:hover { color: var(--krds-gray-70); background: var(--krds-gray-5); }
.gw-eye svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gw-eye .eye-off, .gw-eye[aria-pressed="true"] .eye-on { display: none; }
.gw-eye[aria-pressed="true"] .eye-off { display: block; }

.gw-login .btn.gw-submit {
  width: 100%; height: 4.8rem; min-height: 0; margin-top: 2rem;
  border: 0; border-radius: 1.2rem;
  background: linear-gradient(135deg, var(--gw-primary), var(--gw-primary-dark));
  box-shadow: 0 .4rem 1.4rem rgb(58 124 165 / .2);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02rem;
  color: var(--krds-white);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.gw-login .btn.gw-submit:hover:not(:disabled) { background: linear-gradient(135deg, var(--gw-primary-dark), var(--gw-bg-1)); box-shadow: 0 .4rem 1.4rem rgb(58 124 165 / .3); transform: translateY(-1px); }
.gw-login .btn.gw-submit:active:not(:disabled) { transform: none; box-shadow: none; }
.gw-login .btn.gw-submit:disabled { background: var(--krds-gray-30); color: var(--krds-gray-70); box-shadow: none; }

.gw-card-foot {
  padding: 1.8rem 3.6rem;
  border-top: 1px solid var(--krds-gray-10);
  background: var(--krds-gray-5);
  text-align: center; font-size: 1.25rem; color: var(--krds-gray-60);
}
.gw-card-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; }
.gw-contact {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; border-radius: .8rem;
  font-size: 1.3rem; font-weight: 700; color: var(--gw-primary-dark); text-decoration: none;
}
.gw-contact:hover { background: var(--krds-gray-10); text-decoration: underline; }
.gw-contact:active { background: var(--krds-gray-20); }
.gw-contact svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* 운영기관 식별자 — 파란 바탕 위 */
.gw-footer { font-size: var(--krds-fz-detail-sm); color: var(--gw-on-blue); text-align: center; }
.gw-footer p { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--krds-gap-1) var(--krds-gap-3); }
.gw-footer strong { color: var(--krds-white); }

/* 파란 바탕 위 초점 표시는 흰색으로 (기본 남색 테두리는 바탕에 묻힌다) */
.gw-login .gw-hero a:focus-visible, .gw-login .skip-link:focus-visible { outline-color: var(--krds-white); }

/* 좁은 화면 — 위아래로 쌓고, 기능 카드는 제목만 */
@media (max-width: 1200px) {
  .gw-split { flex-direction: column; align-items: stretch; padding: var(--krds-gap-4) var(--krds-gap-3); }
  .gw-hero { flex: none; padding: 2rem 0; }
  .gw-side { flex: none; width: 100%; max-width: 56rem; margin: 0 auto; order: -1; }
  .gw-hero-title { font-size: 3.2rem; }
  .gw-top { padding: 1.2rem 1.6rem; }
}
@media (max-width: 640px) {
  .gw-frame { padding: 0; border: 0; background: none; }
  .gw-features { grid-template-columns: 1fr; }
  .gw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--krds-gap-3); }
  .gw-stats > div:nth-child(3) { border-left: 0; }
  .gw-hero-lead span { display: none; }
  .gw-hero-title { font-size: 2.6rem; }
}