/* 로그인 화면 전용 — ConceptSample/gms_hub_v3.html 이식.
   공용 팔레트/폰트는 hub-theme.css 가 정의하고, 여기서는 로그인 레이아웃만 다룬다.
   클래스는 전부 .hl- 접두 — 다른 페이지(main 카드 레이아웃)에 영향 없음. */

.hl-body { overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.hl-wrap {
  position: relative; z-index: 10; display: flex;
  width: min(1200px, 96vw); height: min(700px, 92vh);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,144,255,.18), 0 40px 120px rgba(0,0,0,.75), 0 0 80px rgba(0,120,255,.07);
}
.hl-wrap::before, .hl-wrap::after {
  content: ''; position: absolute; top: 0; width: 55%; height: 2px; z-index: 20; pointer-events: none;
}
.hl-wrap::before { left: 0; background: linear-gradient(90deg, transparent, var(--hub-blue2), var(--hub-cyan)); }
.hl-wrap::after  { right: 0; background: linear-gradient(90deg, var(--hub-teal), var(--hub-cyan), transparent); }

/* 좌측 — 브랜드 + 네트워크 일러스트 */
.hl-left {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(6,13,24,.99), rgba(3,6,12,1));
  display: flex; flex-direction: column;
}
.hl-hdr {
  padding: 32px 36px 20px; display: flex; align-items: center; gap: 16px; position: relative; z-index: 3;
  background: linear-gradient(180deg, rgba(6,13,24,.98) 0%, rgba(6,13,24,.7) 50%, transparent 100%);
}
.hl-mark {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,100,255,.2), rgba(0,200,255,.1));
  border: 1px solid rgba(0,180,255,.35);
}
.hl-mark svg { width: 26px; height: 26px; }
.hl-eyebrow { font-size: 11px; color: var(--hub-teal); font-family: var(--hub-fm);
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 3px; }
.hl-title {
  font-family: var(--hub-fn); font-size: 22px; font-weight: 800; letter-spacing: .06em; line-height: 1;
  background: linear-gradient(135deg, #60ecff 0%, var(--hub-blue2) 40%, rgba(180,220,255,.8) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hl-sub { font-size: 9px; color: var(--hub-t3); font-family: var(--hub-fm); letter-spacing: .18em; margin-top: 2px; }

.hl-illus { flex: 1; position: relative; overflow: hidden; }
.hl-illus canvas { width: 100%; height: 100%; display: block; }
.hl-illus::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 90px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,13,24,.95) 0%, rgba(6,13,24,.55) 40%, transparent 100%);
}

.hl-divider {
  width: 1px; flex-shrink: 0;
  background: linear-gradient(180deg, transparent, rgba(0,180,255,.2) 15%, rgba(0,220,200,.25) 50%, rgba(0,180,255,.2) 85%, transparent);
}

/* 우측 — 카운트 + 로그인 폼 */
.hl-right {
  width: 440px; flex-shrink: 0; padding: 44px 48px;
  background: linear-gradient(160deg, rgba(7,14,26,.99), rgba(3,6,14,1));
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow-y: auto;
}
.hl-tier {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: linear-gradient(135deg, rgba(96,64,255,.12), rgba(0,180,255,.08));
  border: 1px solid rgba(96,64,255,.3); border-radius: 6px; padding: 5px 12px; margin-bottom: 20px;
}
.hl-tier i { width: 6px; height: 6px; border-radius: 50%; background: #8866ff; box-shadow: 0 0 6px #8866ff; }
.hl-tier span { font-size: 10px; font-family: var(--hub-fm); color: #8866ff; letter-spacing: .14em; text-transform: uppercase; }

.hl-counts { display: flex; gap: 8px; margin-bottom: 28px; }
.hl-count {
  flex: 1; background: rgba(0,144,255,.08); border: 1px solid rgba(0,144,255,.22);
  border-radius: 10px; padding: 14px 12px; text-align: center;
}
.hl-count b { display: block; font-family: var(--hub-fn); font-size: 28px; font-weight: 800; line-height: 1; }
.hl-count.is-managed b { color: var(--hub-cyan); text-shadow: 0 0 12px rgba(0,216,255,.6); }
.hl-count.is-online  b { color: var(--hub-green); text-shadow: 0 0 12px rgba(0,238,136,.6); }
.hl-count.is-maint   b { color: var(--hub-amber); text-shadow: 0 0 12px rgba(255,170,0,.6); }
.hl-count span { display: block; font-family: var(--hub-fn); font-size: 11px; font-weight: 600;
  color: var(--hub-t2); letter-spacing: .08em; margin-top: 5px; }

.hl-form-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 10px; color: var(--hub-teal); font-family: var(--hub-fm);
  letter-spacing: .22em; text-transform: uppercase;
}
.hl-form-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--hub-teal); opacity: .6; }
.hl-form-title { font-family: var(--hub-fn); font-size: 32px; font-weight: 800; color: var(--hub-t1);
  letter-spacing: .04em; margin: 0 0 4px; line-height: 1.1; text-shadow: none; }
.hl-form-sub { font-size: 11px; color: var(--hub-t3); font-family: var(--hub-fm);
  letter-spacing: .12em; margin-bottom: 22px; }

.hl-sys {
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 10px 14px;
  background: rgba(0,144,255,.05); border: 1px solid rgba(0,144,255,.12); border-radius: 8px;
}
.hl-sys i { width: 8px; height: 8px; border-radius: 50%; background: var(--hub-green);
  box-shadow: 0 0 8px var(--hub-green); flex-shrink: 0; animation: hl-pulse 2s ease-in-out infinite; }
@keyframes hl-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.hl-sys span { flex: 1; font-size: 11px; color: var(--hub-t2); font-family: var(--hub-fm); letter-spacing: .06em; }
.hl-sys em {
  font-style: normal; font-size: 9px; font-family: var(--hub-fm); color: var(--hub-teal);
  background: rgba(0,220,200,.08); border: 1px solid rgba(0,220,200,.2);
  padding: 2px 8px; border-radius: 4px; letter-spacing: .08em;
}

.hl-field { margin-bottom: 16px; }
.hl-label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
  font-family: var(--hub-fn); font-size: 13px; font-weight: 600; color: var(--hub-t2);
  letter-spacing: .12em; text-transform: uppercase; }
.hl-label svg { width: 14px; height: 14px; stroke: var(--hub-t3); fill: none; stroke-width: 2; }
.hl-input { position: relative; }
.hl-input > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--hub-t3); fill: none; stroke-width: 2; pointer-events: none; transition: .2s; }
.hl-input input, .hl-input select {
  width: 100%; margin: 0; padding: 14px 44px 14px 46px;
  background: rgba(0,20,50,.7); border: 1px solid rgba(0,144,255,.2); border-radius: 10px;
  color: var(--hub-t1); font-family: var(--hub-fm); font-size: 13px; letter-spacing: .04em;
}
.hl-input input::placeholder { color: rgba(30,64,96,.9); }
.hl-input input:focus, .hl-input select:focus {
  border-color: rgba(0,200,255,.5); background: rgba(0,30,70,.85);
  box-shadow: 0 0 0 3px rgba(0,180,255,.08);
}
.hl-input input:focus ~ svg { stroke: var(--hub-cyan); }
.hl-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; line-height: 0; cursor: pointer;
}
.hl-eye:hover { box-shadow: none; filter: none; }
.hl-eye svg { width: 17px; height: 17px; stroke: var(--hub-t3); fill: none; stroke-width: 2; }
.hl-eye:hover svg { stroke: var(--hub-t2); }

.hl-submit {
  width: 100%; margin-top: 6px; padding: 15px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(0,100,200,.25), rgba(0,180,255,.15));
  border: 1px solid rgba(0,180,255,.35); border-radius: 10px;
  color: var(--hub-cyan); font-family: var(--hub-fn); font-size: 19px; font-weight: 700;
  letter-spacing: .2em; cursor: pointer; transition: .2s;
}
.hl-submit:hover {
  border-color: rgba(0,200,255,.6); color: #60ecff; filter: none;
  box-shadow: 0 0 30px rgba(0,180,255,.18);
}
.hl-submit:active { transform: scale(.99); }

.hl-error {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 8px;
  background: rgba(255,51,68,.1); border: 1px solid rgba(255,51,68,.3);
  color: var(--hub-red); font-family: var(--hub-fm); font-size: 12px;
}
/* 가입 화면 안내 배너(성공/재발송 등) — hl-error 와 같은 자리, 톤만 teal 계열 */
.hl-info {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 8px;
  background: rgba(0,220,200,.08); border: 1px solid rgba(0,220,200,.25);
  color: var(--hub-teal); font-family: var(--hub-fm); font-size: 12px;
}
.hl-footer { margin-top: 22px; text-align: center; font-size: 10px; color: var(--hub-t3);
  font-family: var(--hub-fm); letter-spacing: .08em; }
/* 로그인 ↔ 가입 상호 링크 — hl-footer 톤과 맞춘 보조 링크 */
.login-signup-link { color: var(--hub-teal); font-family: var(--hub-fm); font-size: 11px;
  letter-spacing: .06em; text-decoration: none; }
.login-signup-link:hover { text-decoration: underline; }

/* 좁은 화면 — 일러스트를 숨기고 폼만 */
@media (max-width: 900px) {
  .hl-body { overflow: auto; }
  .hl-wrap { height: auto; }
  .hl-left, .hl-divider { display: none; }
  .hl-right { width: 100%; padding: 32px 24px; }
}