@charset "UTF-8";
/*
 * 경복대학교 AID 교육 플랫폼 로그인 화면 스타일.
 *
 * 두 템플릿이 같은 껍데기(헤더 + 좌측 브랜드 패널 + 우측 패널 + 하단 법적고지)를
 * 공유하므로 파일 하나로 묶었다.
 *   - customs/templates/customloginview.php  : 통합/일반 선택 (.opts)
 *   - customs/templates/loginview-general.php : 일반 로그인 폼 (.field / .submit)
 *
 * 브랜드 색은 학교 로고(login_logo.svg)에서 추출했다.
 * 딥블루 #004085 / 마젠타 #EC008C
 *
 * 배경 이미지 경로는 이 CSS 파일 기준 상대경로라, 두 템플릿의 위치가 달라도
 * (/xn-sso/login.php, /xn-sso/customs/pages/login-general.php) 동일하게 해석된다.
 */

:root{
  --blue:#004085;
  --blue-deep:#002b5c;
  --navy:#002343;
  --blue-soft:#eaf1f8;
  --magenta:#ec008c;
  --ink:#151b26;
  --body:#4b5563;
  --mute:#6b7684;
  --line:#e4e9f0;
  --white:#fff;
  --r-card:14px;
  --r-input:12px;
  --shadow:0 10px 30px rgba(0,42,92,.07);
  --shadow-lift:0 18px 44px rgba(0,42,92,.16);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'SUIT Variable','Pretendard Variable',Pretendard,'맑은 고딕','Malgun Gothic',sans-serif;
  color:var(--body);line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
  background:
    linear-gradient(rgba(0,64,133,.045) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(0,64,133,.045) 1px,transparent 1px) 0 0/34px 100%,
    radial-gradient(120% 90% at 100% 0%,#f2f6fb 0%,#fafbfd 45%,#fff 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:4px}

/* ── 헤더 ── */
.hd{background:var(--white);border-bottom:1px solid var(--line)}
.hd-in{max-width:1240px;margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;gap:14px}
.hd-brand{display:flex;align-items:center;gap:13px;min-width:0}
.hd-brand img{height:32px;width:auto}
.hd-brand b{
  padding-left:13px;border-left:1px solid var(--line);
  font-size:15px;font-weight:800;color:var(--blue-deep);letter-spacing:-.03em;white-space:nowrap;
}
.hd-util{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
.hd-home{
  display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;
  font-size:13.5px;font-weight:700;color:var(--blue-deep);letter-spacing:-.02em;border-radius:999px;transition:.2s var(--ease);
}
.hd-home:hover{background:var(--blue-soft)}
.hd-home svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ── 본문 스테이지 ── */
.main{flex:1;display:flex;align-items:center;padding:56px 32px 32px}
.stage{
  width:100%;max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow);
}

/* 좌 : 브랜드 패널 */
.brandpanel{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding:56px 52px;display:flex;flex-direction:column;justify-content:center;min-height:460px;
  background:linear-gradient(150deg,var(--navy) 0%,var(--blue-deep) 52%,var(--blue) 100%);
}
.brandpanel::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("login_bg_campus.jpg") center/cover no-repeat;
  opacity:.2;filter:saturate(.35) contrast(1.05);
}
/* 마젠타 대각 스트로크 — 학교 로고의 액센트 색을 구조 요소로 사용 */
.brandpanel::after{
  content:"";position:absolute;z-index:-1;right:-90px;top:-70px;width:360px;height:640px;
  transform:rotate(18deg);
  background:repeating-linear-gradient(90deg,rgba(236,0,140,.5) 0 2px,transparent 2px 17px);
  mask-image:linear-gradient(200deg,#000 5%,transparent 62%);
  -webkit-mask-image:linear-gradient(200deg,#000 5%,transparent 62%);
}
/* 어두운 패널에는 흰색 녹아웃 버전(login_logo_white.svg)을 쓴다.
   컬러 원본을 필터로 흰색 처리하면 실드 안쪽 디테일이 통째로 메워져 사라진다. */
.bp-mark{width:200px;height:auto;margin-bottom:24px;opacity:.95}
.bp-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.16em;color:#ffd6ec;margin-bottom:14px}
.bp-title{font-size:32px;font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1.24;letter-spacing:-.04em;color:#fff}
.bp-title em{font-style:normal;display:block;color:#9fc6ee;font-weight:700}

/* 우 : 로그인 패널 공통 */
.loginpanel{padding:56px 52px;display:flex;flex-direction:column;justify-content:center;background:var(--white)}
.lp-head{margin-bottom:28px}
.lp-head h1{font-size:27px;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1.3}
.lp-head p{margin-top:9px;font-size:15px;color:var(--mute);letter-spacing:-.01em;line-height:1.7}
.lp-head p b{color:var(--blue-deep);font-weight:800}

/* ── 통합/일반 선택 (customloginview.php) ── */
.opts{display:flex;flex-direction:column;gap:12px}
.opt{
  position:relative;display:flex;align-items:center;gap:18px;
  padding:22px 24px;border-radius:var(--r-input);min-height:44px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.opt-ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.opt-ic svg{width:22px;height:22px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.opt-tx{min-width:0}
.opt-tx strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.opt-tx span{display:block;margin-top:3px;font-size:13.5px;letter-spacing:-.01em}
.opt-ar{margin-left:auto;flex-shrink:0;width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.opt:hover .opt-ar{transform:translateX(4px)}

/* 통합 로그인 — 주 동작 (딥블루 솔리드) */
.opt-sso{background:var(--blue);border:1px solid var(--blue);color:#fff;box-shadow:0 8px 22px rgba(0,64,133,.22)}
.opt-sso .opt-ic{background:rgba(255,255,255,.16)}
.opt-sso .opt-ic svg{stroke:#fff}
.opt-sso .opt-tx strong{color:#fff}
.opt-sso .opt-tx span{color:rgba(255,255,255,.86)}
.opt-sso .opt-ar{stroke:#fff}
.opt-sso:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:translateY(-2px);box-shadow:var(--shadow-lift)}

/* 일반 로그인 — 보조 동작 (라인) */
.opt-gen{background:var(--white);border:1px solid var(--line);color:var(--ink)}
.opt-gen .opt-ic{background:var(--blue-soft)}
.opt-gen .opt-ic svg{stroke:var(--blue)}
.opt-gen .opt-tx strong{color:var(--ink)}
.opt-gen .opt-tx span{color:var(--mute)}
.opt-gen .opt-ar{stroke:var(--blue)}
.opt-gen:hover{border-color:var(--blue);background:#fbfdff;transform:translateY(-2px);box-shadow:var(--shadow)}

/* ── 일반 로그인 폼 (loginview-general.php) ── */
.back{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:0 13px 0 10px;margin-bottom:20px;border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--mute);letter-spacing:-.02em;transition:.2s var(--ease);
}
.back:hover{background:var(--blue-soft);color:var(--blue)}
.back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.field{margin-bottom:14px}
.field label{
  display:block;margin-bottom:7px;
  font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
}
.field label .req{color:var(--magenta);margin-left:2px}
.inp{position:relative;display:flex;align-items:center}
.inp svg{
  position:absolute;left:16px;width:18px;height:18px;
  fill:none;stroke:var(--mute);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.inp input{
  width:100%;height:54px;padding:0 16px 0 46px;
  border:1px solid var(--line);border-radius:var(--r-input);background:var(--white);
  font-size:15.5px;color:var(--ink);letter-spacing:-.01em;transition:.2s var(--ease);
}
.inp input::placeholder{color:#a4adba}
.inp input:hover{border-color:#c9d4e2}
.inp input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,64,133,.1)}
.inp:focus-within svg{stroke:var(--blue)}
/* 인풋은 자체 포커스 스타일(테두리+링)이 있으므로 전역 마젠타 링과 겹치지 않게 색만 맞춘다 */
.inp input:focus-visible{outline-color:var(--blue);outline-offset:2px}

.submit{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:56px;margin-top:20px;border-radius:var(--r-input);
  background:var(--blue);color:#fff;
  font-size:16.5px;font-weight:800;letter-spacing:-.03em;
  box-shadow:0 8px 22px rgba(0,64,133,.22);
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.submit:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.submit:active{transform:translateY(0)}

/* ── 회원가입 ── */
.signup{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
}
.signup p{font-size:14.5px;color:var(--mute);letter-spacing:-.02em}
.signup a{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 20px;border-radius:999px;
  border:1px solid var(--magenta);color:var(--magenta);
  font-size:14.5px;font-weight:800;letter-spacing:-.02em;transition:.2s var(--ease);
}
.signup a:hover{background:var(--magenta);color:#fff}
.signup a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── 최소 법적 고지 ── */
.legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;
  max-width:1240px;margin:0 auto;padding:0 32px 40px;
  font-size:12.5px;color:var(--mute);letter-spacing:-.01em;text-align:center;
}
.legal a{
  display:inline-flex;align-items:center;min-height:34px;padding:0 2px;
  font-weight:800;color:var(--blue-deep);transition:.2s var(--ease);
}
.legal a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── 반응형 ── */
@media (max-width:1024px){
  .main{padding:36px 24px 24px}
  .brandpanel,.loginpanel{padding:44px 36px}
  .brandpanel{min-height:0}
  .stage{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hd-in{height:66px;padding:0 20px}
  .hd-brand img{height:27px}
  .hd-brand b{font-size:13.5px;padding-left:10px}
  .hd-home span{display:none}
  .hd-home{padding:0 11px}
  .main{padding:24px 16px 16px}
  .brandpanel,.loginpanel{padding:36px 24px}
  .bp-mark{width:170px;margin-bottom:18px}
  .legal{padding:0 20px 32px}
}
@media (max-width:480px){
  .hd-in{gap:8px}
  .hd-brand b{display:none}
  .main{padding:16px 12px 12px}
  .brandpanel,.loginpanel{padding:30px 20px}
  .brandpanel::after{display:none}
  .lp-head h1{font-size:24px}
  .opt{gap:14px;padding:18px 16px}
  .opt-ic{width:40px;height:40px}
  .opt-tx strong{font-size:15.5px}
  .opt-tx span{font-size:12.5px}
  .inp input{height:50px;font-size:15px}
  .submit{height:52px;font-size:15.5px}
  .signup a{margin-left:0;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}