/* accounts 인증 화면(로그인·가입 카드) 전용 규칙.
   셀렉터 범위: `.app-login-panel` 하위, `body:has(.app-login-panel)`, `.acc-login*`, `.acc-sns*` 만 쓴다.
   그 밖의 전역 셀렉터는 accounts-v4.css 에 둔다. 로드 순서는 accounts-v4.css 다음.
   - 셀렉터 목록을 쉼표로 나눠 범위를 검사하므로(tests_v4_theme AuthCssScopeTest) :is()·:not() 안에 쉼표를 쓰지 않는다.
   - 입력칸 규칙은 텍스트형 input(text·email·password·number·tel·url)·select·textarea 만 잡는다.
     checkbox·radio·hidden·submit 은 잡지 않는다(remember-me 체크박스가 입력칸 상자가 되지 않게 — Review Focus 1). */

/* ── 배경: v4 격자 + 위쪽 accent 글로우 (spec §7.2) ─────────────
   landing.css 의 .page__grid(격자 56px → 48px)·.page__glow--top 정의를 body 가상 요소로 화면에 고정한다.
   z-index:-1 가상 요소가 body 배경 위·본문 아래에 오도록 body 를 쌓임 맥락으로 만든다(landing.css .page 의 isolation).
   bgcolor 를 지정한 화면(body.acc-bgcolor)은 장식 없이 지정 색만. :has() 미지원 브라우저는 단색 --bg. */
body:has(.app-login-panel):not(.acc-bgcolor) { isolation: isolate; }
body:has(.app-login-panel):not(.acc-bgcolor)::before,
body:has(.app-login-panel):not(.acc-bgcolor)::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
body:has(.app-login-panel):not(.acc-bgcolor)::before {
  inset: 0;
  background-image: linear-gradient(var(--gridLine) 1px, transparent 1px), linear-gradient(90deg, var(--gridLine) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 38%, transparent 70%, rgba(0, 0, 0, .6) 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 38%, transparent 70%, rgba(0, 0, 0, .6) 100%);
}
body:has(.app-login-panel):not(.acc-bgcolor)::after {
  top: -260px;
  left: 50%;
  width: 1100px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--ac) 16%, transparent), transparent 70%);
}

/* ── 카드 ────────────────────────────────────────────────
   흰 바탕, --b2 테두리(panel-primary 의 위쪽 3px 의미 선 대신 사방 1px), 20px radius, 큰 그림자. col 폭은 그대로.
   안쪽 여백은 heading(위·좌우)과 body(좌우·아래)가 나눠 가진다: 데스크톱 36–40px, 767px 이하 24px. */
.app-login-panel.panel {
  background-color: var(--panel);
  border: 1px solid var(--b2);
  border-radius: 20px;
  box-shadow: 0 24px 70px var(--shadow);
}

/* heading: 색 띠 없음(Bootstrap .panel-primary 파랑과 accounts-v4.css 의 옅은 띠를 모두 무력화).
   위에 mono eyebrow "Bdrive Accounts"(landing.css .eyebrow), 아래 제목 */
.app-login-panel > .panel-heading {
  padding: 36px 40px 0;
  color: var(--t1);
  background-color: transparent;
  border-bottom: 0;
}
.app-login-panel > .panel-heading::before {
  content: "Bdrive Accounts";
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acInk);
}
/* 제목: h3.panel-title(tfa_check 는 .lead 도 붙어 있다), password_set 은 heading 바로 안 h1 */
.app-login-panel .panel-title,
.app-login-panel > .panel-heading > h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--t1);
}

/* body: Bootstrap panel 배경을 비운다. login-core.html 의 인라인 background-color(#f1f1f1)는
   Task 5 가 마크업에서 지운다(인라인 style 은 !important 없이 덮을 수 없다). 그런 인라인 바탕이 남아도
   카드 아래 모서리 곡선 밖으로 나오지 않게 radius 를 카드(20px - 테두리 1px)에 맞춘다 */
.app-login-panel > .panel-body {
  padding: 16px 40px 36px;
  background-color: transparent;
  border-bottom-left-radius: 19px;
  border-bottom-right-radius: 19px;
}

/* error 템플릿은 카드 본문에 인라인 height:300px 을 준다. border-box 면 위 padding 만큼 내용 높이가 줄어
   내용이 테두리 밖으로 넘치므로, 인라인 height 가 있는 본문만 content-box 로 되돌린다 */
.app-login-panel > .panel-body[style*="height"] { box-sizing: content-box; }

/* ── 입력칸 ──────────────────────────────────────────────
   클래스 없는 입력(allauth {{ form.as_p }}, login-core 의 {{ form.login }}·{{ form.password }})에
   .form-control 과 같은 값(Bootstrap .form-control 바탕 + accounts-v4.css 덮어쓰기: 44px, 10px radius, --b2,
   focus 시 --ac 테두리 + 3px 고리)을 준다. style.css 의 .signup input·.account_form input·.login input[type=email]
   (34px, #ccc)보다 특이도가 높다. .form-control 이 붙은 입력은 accounts-v4.css 규칙(has-error·input-sm 포함)을
   그대로 받도록 :not(.form-control) 로 뺀다. */
.app-login-panel input[type="text"]:not(.form-control),
.app-login-panel input[type="email"]:not(.form-control),
.app-login-panel input[type="password"]:not(.form-control),
.app-login-panel input[type="number"]:not(.form-control),
.app-login-panel input[type="tel"]:not(.form-control),
.app-login-panel input[type="url"]:not(.form-control),
.app-login-panel select:not(.form-control),
.app-login-panel textarea:not(.form-control) {
  display: block;
  width: 100%;
  height: 44px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--t1);
  background-color: var(--panel);
  background-image: none;
  border: 1px solid var(--b2);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
/* Bootstrap select[multiple]·select[size]·textarea.form-control 과 같이 높이는 rows·size 로 */
.app-login-panel select[multiple]:not(.form-control),
.app-login-panel select[size]:not(.form-control),
.app-login-panel textarea:not(.form-control) { height: auto; }
.app-login-panel input[type="text"]:not(.form-control)::placeholder,
.app-login-panel input[type="email"]:not(.form-control)::placeholder,
.app-login-panel input[type="password"]:not(.form-control)::placeholder,
.app-login-panel input[type="number"]:not(.form-control)::placeholder,
.app-login-panel input[type="tel"]:not(.form-control)::placeholder,
.app-login-panel input[type="url"]:not(.form-control)::placeholder,
.app-login-panel textarea:not(.form-control)::placeholder { color: var(--t5); }
.app-login-panel input[type="text"]:not(.form-control):focus,
.app-login-panel input[type="email"]:not(.form-control):focus,
.app-login-panel input[type="password"]:not(.form-control):focus,
.app-login-panel input[type="number"]:not(.form-control):focus,
.app-login-panel input[type="tel"]:not(.form-control):focus,
.app-login-panel input[type="url"]:not(.form-control):focus,
.app-login-panel select:not(.form-control):focus,
.app-login-panel textarea:not(.form-control):focus {
  border-color: var(--ac);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac) 25%, transparent);
}

/* label 13px 600 --t2. display 는 건드리지 않는다(style.css 가 숨긴 .signup·.account_form label 은 계속 숨김 —
   그 폼은 placeholder 로 안내한다). checkbox·radio 의 label 은 Bootstrap 처럼 보통 굵기 */
.app-login-panel label {
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
}
.app-login-panel .checkbox label,
.app-login-panel .radio label { font-weight: 400; }
/* allauth {{ form.as_p }} 의 도움말(span.helptext)과 오류 목록(ul.errorlist — 필드 오류·nonfield 오류) */
.app-login-panel .helptext {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--t4);
}
.app-login-panel .errorlist {
  margin: 0 0 6px;
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  color: var(--bad);
}

/* ── 버튼 ────────────────────────────────────────────────
   카드 안 주 행동은 --grad: .btn-primary(로그인·장치 한도 Continue)는 accounts-v4.css 에서 이미 --grad 이고,
   .btn-success(가입·비밀번호 재설정)를 같은 값으로 맞춘다. 상태별 셀렉터는 accounts-v4.css 의 .btn-success 규칙보다
   한 단계(.app-login-panel) 높은 특이도로 쓰고, 값은 accounts-v4.css 의 .btn-primary 와 같다.
   .btn-default 는 accounts-v4.css 의 ghost 그대로. 장치 한도 화면의 .btn-warning·.btn-danger 등 의미 색 버튼도 그대로. */
.app-login-panel .btn-success,
.app-login-panel .btn-success:focus,
.app-login-panel .btn-success.focus {
  color: #071018;
  background-color: var(--ac);
  background-image: var(--grad);
  border-color: transparent;
}
.app-login-panel .btn-success:hover {
  color: #071018;
  background-color: var(--ac);
  border-color: transparent;
  box-shadow: 0 0 22px color-mix(in oklab, var(--ac) 55%, transparent);
}
.app-login-panel .btn-success:active,
.app-login-panel .btn-success.active,
.app-login-panel .btn-success:active:hover,
.app-login-panel .btn-success:active:focus,
.app-login-panel .btn-success:active.focus,
.app-login-panel .btn-success.active:hover,
.app-login-panel .btn-success.active:focus,
.app-login-panel .btn-success.active.focus {
  color: #071018;
  background-color: var(--ac);
  background-image: linear-gradient(rgba(7, 16, 24, .12), rgba(7, 16, 24, .12)), var(--grad);
  border-color: transparent;
  box-shadow: inset 0 2px 5px rgba(7, 16, 24, .2);
}
.app-login-panel .btn-success.disabled,
.app-login-panel .btn-success[disabled],
.app-login-panel .btn-success.disabled:hover,
.app-login-panel .btn-success[disabled]:hover,
.app-login-panel .btn-success.disabled:focus,
.app-login-panel .btn-success[disabled]:focus,
.app-login-panel fieldset[disabled] .btn-success,
.app-login-panel fieldset[disabled] .btn-success:hover,
.app-login-panel fieldset[disabled] .btn-success:focus {
  background-color: var(--ac);
  background-image: var(--grad);
  border-color: transparent;
  box-shadow: none;
}

/* .btn-block(가입·재설정·로그인 주 버튼, 장치 한도 화면의 Continue·Cancel) 높이 48px.
   <button>·<a>·<input type=submit class="btn ..."> 모두 같게 padding 으로 맞춘다: 13 + 20(line-height) + 13 + 2(border).
   height 를 고정하지 않아(min-height) 좁은 폭에서 글자가 늘어나도 잘리지 않는다 */
.app-login-panel .btn-block {
  min-height: 48px;
  padding-top: 13px;
  padding-bottom: 13px;
}

/* 클래스 없는 제출 버튼 — bdweb allauth 템플릿(password_reset_from_key·email_confirm·socialaccount/signup)이
   카드 안에서 class 없이 쓴다. 위 .btn-success + .btn-block + .btn 기본 모양과 같은 값으로 주 버튼처럼 보이게 한다.
   :not([class]) 로 .btn 클래스가 있는 버튼은 건드리지 않는다. */
.app-login-panel input[type=submit]:not([class]),
.app-login-panel button[type=submit]:not([class]) {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-bottom: 0;
  padding: 13px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  color: #071018;
  background-color: var(--ac);
  background-image: var(--grad);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.app-login-panel input[type=submit]:not([class]):hover,
.app-login-panel button[type=submit]:not([class]):hover {
  box-shadow: 0 0 22px color-mix(in oklab, var(--ac) 55%, transparent);
}
.app-login-panel input[type=submit]:not([class]):active,
.app-login-panel button[type=submit]:not([class]):active {
  background-image: linear-gradient(rgba(7, 16, 24, .12), rgba(7, 16, 24, .12)), var(--grad);
  box-shadow: inset 0 2px 5px rgba(7, 16, 24, .2);
}
.app-login-panel input[type=submit]:not([class]):focus-visible,
.app-login-panel button[type=submit]:not([class]):focus-visible {
  outline: 2px solid var(--acInk);
  outline-offset: 2px;
}
.app-login-panel input[type=submit]:not([class]):disabled,
.app-login-panel button[type=submit]:not([class]):disabled {
  cursor: not-allowed;
  box-shadow: none;
  opacity: .65;
}

/* 링크 --acInk (버튼 모양 링크 a.btn 은 제외 — 버튼 글자색을 지키려고) */
.app-login-panel a:not(.btn) { color: var(--acInk); }
.app-login-panel a:not(.btn):hover,
.app-login-panel a:not(.btn):focus { color: var(--t1); }

/* ── SNS 버튼 목록 (include/my_provider_list.html, spec §7.4) ────
   목록 점·들여쓰기 없이 세로로. 공식 PNG 버튼(width="250")은 칸이 좁으면 비율을 지키며 줄어든다. */
.app-login-panel .socialaccount_providers {
  margin: 0;
  padding-left: 0;
}
.acc-sns__item {
  list-style: none;
  margin-bottom: 8px;
}
.acc-sns__item img {
  max-width: 100%;
  height: auto;
}

/* ── 로그인 카드 2열 (login-core.html, spec §7.3 — 마크업은 Task 5) ──
   .acc-login > .acc-login__main + .acc-login__or(SNS provider 가 있을 때만) + .acc-login__sns.
   카드 본문이 600px 이상: main | 세로 "or" 구분선 | sns 2열. provider 가 없으면(.acc-login__or 없음) main 한 칸.
   그보다 좁으면(또는 container query·:has() 미지원): 세로로 main → 가로 "or" 구분선 → sns.
   화면 폭이 아니라 카드 너비로 나누는 건, 운영에서만 켜지는 reCAPTCHA iframe 이 304px 고정이라
   main 열을 304px 아래로 줄이면 구분선·sns 열 위로 넘치기 때문이다(304 + 32 + "or" + 32 + sns ≈ 600). */
.app-login-panel > .panel-body:has(.acc-login) {
  container-type: inline-size;
}
/* 로그인 카드는 큰 화면에서도 md 열(col-md-8, 66%)을 쓴다 — col-lg-6 이면 1200~1600px 에서 600px 에 못 미쳐
   2열이 안 된다. 대신 1920px 같은 화면에서 너무 넓어지지 않게 최대 너비를 둔다(그리드 약 680px) */
.app-login-panel:has(.acc-login) {
  max-width: 760px;
  margin-inline: auto;
}
.acc-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.acc-login__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t4);
}
.acc-login__or::before,
.acc-login__or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--b2);
}
/* 비밀번호 찾기(왼쪽)·가입(오른쪽) 링크 줄 — 옛 표의 td align="left"/"right" 자리 */
.acc-login__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 16px;
}

/* 카드가 위젯(304px)보다 좁은 휴대폰 폭(375px 에서 약 255px)에서는 reCAPTCHA 를 84% 로 줄여 카드 밖으로 안 나가게 */
@container (max-width: 303px) {
  .acc-login .g-recaptcha {
    transform: scale(.84);
    transform-origin: 0 0;
  }
}

@container (min-width: 600px) {
  .acc-login:has(> .acc-login__or) {
    grid-template-columns: minmax(304px, 1fr) auto minmax(0, 1fr);
    column-gap: 32px;
  }
  .acc-login:has(> .acc-login__or) > .acc-login__or {
    flex-direction: column;
    margin: 0;
  }
  .acc-login:has(> .acc-login__or) > .acc-login__or::before,
  .acc-login:has(> .acc-login__or) > .acc-login__or::after {
    border-top: 0;
    border-left: 1px solid var(--b2);
  }
}

/* ── 좁은 화면(375px 등): 카드 안쪽 여백 24px ───────────────── */
@media (max-width: 767px) {
  .app-login-panel > .panel-heading { padding: 24px 24px 0; }
  .app-login-panel > .panel-body { padding: 16px 24px 24px; }
}