@charset "utf-8";

html,
body {
  margin: 0;
  min-height: 100%;
}

/*
 * 포털 로그인(총판·대리점) 공용 스타일.
 *
 * 두 화면은 카드 구조가 같고 색과 배경만 다르다. 예전에는 각 뷰가 Tailwind 클래스로
 * 각자 그렸는데, 한쪽만 손보면 다른 쪽이 옛 모양으로 남았다. 다른 값은 아래 변수
 * 네 개뿐이고, 그건 각 뷰가 :root 인라인으로 덮는다.
 *
 *   --page-bg        카드 뒤 화면 배경(색 또는 이미지)
 *   --brand-panel    왼쪽 브랜드 칸 배경
 *   --brand-accent   버튼·포커스 색
 *   --brand-glow     버튼 그림자 색
 *
 * 포털 색을 하나로 통일하지 않는 이유 — 세 포털이 같은 껍데기라 탭을 여러 개 띄우면
 * 어느 포털인지 색으로만 구분된다(총판 청록 / 대리점 파랑). 이 화면에서 그 표식을
 * 지우면 로그인부터 어디에 들어가는지 알 수 없다.
 */

.portal-login * { margin: 0; padding: 0; box-sizing: border-box; }

.portal-login {
  --brand-accent: #2563eb;
  --brand-glow: rgba(37, 99, 235, 0.35);
  --brand-panel: linear-gradient(145deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
  /* 카드 뒤 배경. 단색이면 카드만 떠 있어 밋밋하다 — 청록에서 남색으로 흐르게 둔다. */
  --page-bg: linear-gradient(115deg, #0fa3a0 0%, #0e7490 22%, #1d4ed8 58%, #101a3d 100%);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--page-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #334155;
  -webkit-font-smoothing: antialiased;
}

/* 배경이 사진일 때 카드 밖 글씨(푸터)와 대비를 지키는 어두운 막.
   색 배경인 화면에서는 이 요소를 아예 두지 않는다. */
.portal-login .page-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 26, 0.62);
  pointer-events: none;
}

/* ── 카드 ── */
.portal-card {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  max-width: 940px;
  min-height: 540px;
  overflow: hidden;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 90px -15px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .25);
}

/* ── 왼쪽: 브랜드 칸 ── */
.portal-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 46%;
  padding: 48px 40px;
  overflow: hidden;
  color: #fff;
  background: var(--brand-panel);
}

/* 빛 번짐 두 덩어리. 단색 판이 밋밋해 보이는 것을 이미지 없이 메운다. */
.portal-brand::before,
.portal-brand::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.portal-brand::before {
  top: -40%; right: -40%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, transparent 70%);
}
.portal-brand::after {
  bottom: -30px; left: -30px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, transparent 70%);
}

.portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 20px;
}
.portal-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #7dd3fc;
  box-shadow: 0 0 10px #7dd3fc;
}

.portal-brand h1 {
  margin-bottom: 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: #fff;
}
/* 제목 둘째 줄('관리자 포털') — 같은 크기로 두면 어느 쪽이 이름인지 안 보인다. */
.portal-brand h1 .sub {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
}
.portal-brand .brand-desc {
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.portal-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  margin-bottom: 30px;
  list-style: none;
}
.portal-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: #f1f5f9;
}
.portal-features li .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .18);
}
.portal-features li .ico svg { width: 15px; height: 15px; }

.portal-brand .brand-foot {
  padding-top: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
  border-top: 1px solid rgba(255, 255, 255, .15);
}

/* ── 오른쪽: 입력 칸 ── */
.portal-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 54%;
  padding: 50px 48px;
  background: #fff;
}

.portal-form-head { margin-bottom: 30px; }
.portal-form-head h2 {
  margin-bottom: 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0f172a;
}
.portal-form-head p { font-size: 14px; color: #64748b; }

.portal-alert {
  margin-bottom: 18px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 10px;
}
.portal-alert.is-error { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.portal-alert.is-ok    { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.portal-alert ul { margin: 0; padding-left: 18px; list-style: disc; }

.portal-field { margin-bottom: 20px; }
.portal-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
/* 라벨 옆 영문 — 한글 라벨이 주인공이라 한 단계 흐리게 둔다. */
.portal-field label .en { font-weight: 500; color: #94a3b8; }

.portal-input {
  position: relative;
  display: flex;
  align-items: center;
}
.portal-input .input-icon {
  position: absolute;
  left: 16px;
  display: flex;
  color: #94a3b8;
  pointer-events: none;
  transition: color .2s ease;
}
.portal-input .input-icon svg { width: 18px; height: 18px; }
.portal-input input {
  width: 100%;
  height: 50px;
  padding: 0 46px 0 46px;
  font-size: 15px;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.portal-input input:hover { border-color: #cbd5e1; background: #fff; }
.portal-input input:focus {
  background: #fff;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px var(--brand-glow);
}
.portal-input input:focus ~ .input-icon { color: var(--brand-accent); }
.portal-input input::placeholder { color: #94a3b8; }

/* 비밀번호 보기 — 눈 아이콘. 잘못 친 비밀번호로 잠기는 일을 줄인다. */
.portal-eye {
  position: absolute;
  right: 12px;
  display: flex;
  padding: 6px;
  color: #94a3b8;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s ease;
}
.portal-eye:hover { color: #475569; }
.portal-eye svg { width: 18px; height: 18px; }

.portal-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  font-size: 13.5px;
}
.portal-check {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  color: #475569;
  font-weight: 500;
}
/* 아이디 저장 체크박스.
   브라우저가 그리는 기본 체크박스를 쓰지 않고 직접 그린다 — _head 의 다크모드 규칙이
   input[type=checkbox] 의 배경을 짙은 회색으로 칠해서, 흰 카드 위에 검은 네모가 떴다.
   여기는 늘 흰 카드라 다크모드와 무관하게 흰 배경이어야 한다.
   특정도를 .portal-login 까지 붙여 그 규칙보다 확실히 위에 오게 한다. */
.portal-login .portal-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-right: 8px;
  background-color: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.portal-login .portal-check input[type="checkbox"]:hover { border-color: #94a3b8; }

/* 체크 표시는 appearance:none 이면 브라우저가 안 그려 준다 — 직접 얹는다. */
.portal-login .portal-check input[type="checkbox"]:checked {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.portal-login .portal-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.portal-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--brand-accent);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px var(--brand-glow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.portal-submit:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 15px 35px -5px var(--brand-glow); }
.portal-submit:active { transform: translateY(0); }
.portal-submit svg { width: 18px; height: 18px; transition: transform .2s ease; }
.portal-submit:hover svg { transform: translateX(3px); }

.portal-foot {
  position: relative;
  z-index: 10;
  margin-top: 18px;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, .7);
}

/* ── 태블릿 ── */
@media (max-width: 991.98px) {
  .portal-card { max-width: 760px; min-height: 500px; }
  .portal-brand { padding: 36px 30px; }
  .portal-form { padding: 40px 32px; }
  .portal-brand h1 { font-size: 24px; }
  .portal-form-head h2 { font-size: 22px; }
}

/* ── 모바일 — 카드를 세로로 접는다. 브랜드 칸은 제목까지만 남기고 접는다.
   좁은 화면에서 설명·기능 목록까지 펴면 입력칸이 첫 화면 밖으로 밀린다. ── */
@media (max-width: 767.98px) {
  .portal-login { align-items: center; padding: 16px 12px; }
  .portal-card { flex-direction: column; max-width: 440px; min-height: auto; margin: 0 auto; border-radius: 20px; }
  .portal-brand { width: 100%; padding: 28px 24px 24px; }
  .portal-badge { margin-bottom: 14px; }
  .portal-brand h1 { margin-bottom: 6px; font-size: 21px; }
  .portal-brand .brand-desc { margin-bottom: 0; font-size: 13px; }
  .portal-features, .portal-brand .brand-foot { display: none; }
  .portal-form { width: 100%; padding: 28px 24px 34px; }
  .portal-form-head { margin-bottom: 22px; }
  .portal-form-head h2 { font-size: 20px; }
  .portal-input input { height: 46px; font-size: 14px; }
  .portal-submit { height: 48px; font-size: 15px; }
}

/* ── 간편 로그인(대리점) — 로그인 버튼 아래 한 줄. 왼쪽 네이버, 오른쪽 카카오.
   이 브라우저에서 연결한 적이 있을 때만 서버가 내려보낸다(총판 화면에는 없다). ── */
.portal-sns { margin-top: 22px; }
.portal-sns-title {
  display: block; margin-bottom: 10px; text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #94a3b8;
}
/* 하나만 연결했으면 그 하나가 칸을 다 쓴다 — 빈 칸을 남기면 지워진 버튼처럼 보인다. */
.portal-sns-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.portal-sns-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.portal-sns-btn svg { width: 17px; height: 17px; }
.portal-sns-btn:hover { filter: brightness(.95); transform: translateY(-1px); }
.portal-sns-btn.is-naver { background: #03C75A; color: #fff; }
.portal-sns-btn.is-kakao { background: #FEE500; color: #191600; }

@media (max-width: 767.98px) {
  .portal-sns { margin-top: 18px; }
  .portal-sns-btn { height: 44px; font-size: 13px; }
}