/* ==========================================================================
   auth — 로그인 · 회원가입 모달 (클래식 좌우 분할)

   기획팀 확정본 2026-09-14 (시안 15종 중 01 채택).
   모달 980px, 왼쪽 절반이 배너, 오른쪽이 폼. 720px 아래에서는 배너가
   위쪽 96px 띠로 내려오고 폼이 전체 폭을 쓴다.

   ★ 덮개·시트·여닫는 움직임은 <기존 .authmodal 이 그대로 맡는다>
     (assets/css/auth.css). 여기는 <창 안쪽>만 그린다.

   ⚠ 시안의 .auth-stage · .auth-scene 은 단독 실행용 무대라 옮기지 않았다.
   ⚠ 시안이 :root 에 --modal-w · --danger 를 얹었다. --danger 는 이름이 흔해
     사이트 전체로 새면 남의 화면 색을 바꾼다 — 창 안으로 가두고 이름도 바꿨다.
   ========================================================================== */
.auth-modal{
  /*
     ★★ 아래 두 값은 <로그인 창> 것이다. 가입 창은 .is-join 에서 되돌린다 —
        레드가 줄여 달라고 한 것은 로그인 창 하나였다 (2026-09-15).

     ★ 980 → 790 (레드 2026-09-14) → 670 → 520 → <b>620</b> (2026-09-15).

     ⚠⚠ 520 에서 <되먹임>이 돌았다. 폼 칸이 좁아 머리의 탭이 세로로 접히고,
         접히니 창이 <키가 커지고>, 배너는 높이로 폭이 정해지니 <더 넓어지고>,
         그만큼 폼이 <또> 좁아졌다. 창이 화면 밖으로 넘쳐 구글 단추가 잘렸다.

         그래서 총폭만으로는 못 잡는다 — 아래 grid 에 폼 칸의 <바닥>을 박았다.
         바닥이 있으면 탭이 접힐 일이 없고, 배너는 남는 만큼만 가져간다.
  */
  --modal-w: 620px;
  --auth-danger: #FF4B4B;
  --shadow-modal: 0 48px 100px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.035);
}

/*
  기존 덮개(.authmodal)를 이 창 크기에 맞춘다.

  ⚠ .authmodal__sheet 의 상한이 520px(가입 640px)이었다. 확정본은 980px 라
    그대로 두면 <배너까지 그 안에 욱여넣어> 반 토막이 난다.
  ⚠ 덮개가 place-items:center 다. 창이 화면보다 높으면 가운데 정렬이
    <위쪽을 잘라 먹고> 스크롤해도 머리가 안 나온다 — 가입 창이 948px 라
    실제로 그랬다. 위로 붙이고 좌우만 가운데로 둔다.
*/
/*
  ★ 화면 가운데 (레드 2026-09-14 「로그인 모달 화면 중앙」).

  ⚠ place-items:center 로는 안 된다. 창이 화면보다 높을 때 <위쪽을 잘라 먹고>
    스크롤해도 머리가 안 나온다 — 948px 짜리 가입 창이 실제로 그랬다.
    flex 에 margin:auto 를 쓰면 가운데로 서면서도 넘칠 때 위아래가 안 잘린다.
*/
.authmodal:has(.auth-modal){ display:flex; align-items:flex-start; justify-content:center; }
.authmodal__sheet:has(.auth-modal){ max-width:620px; margin:auto; }
/* ⚠ 가입 창은 예전 폭 그대로다. 덮개 상한도 같이 되돌려야 창이 안 눌린다 */
.authmodal__sheet:has(.auth-modal.is-join){ max-width:790px; }

/* ---- 모달 ---------------------------------------------------------------- */
.auth-modal{
  width:min(var(--modal-w), 100%);
  /*
    ★ 배너 칸의 <폭을 그림이 정한다> (레드 2026-09-14 「이미지 옆에 여백 없애고」).

      contain 으로 두었더니 칸이 그림보다 넓어 좌우에 검은 띠가 생겼다.
      칸을 auto 로 두고 배너에 그림과 <같은 비율>을 주면, 높이(오른쪽 폼이
      정한다)에 맞춰 폭이 저절로 정해진다 — 띠도 없고 잘리지도 않는다.
  */
  /*
    ★★ 폼 칸에 <바닥>을 박는다 (2026-09-15).

      예전에는 minmax(0,1fr) 이라 폼 칸이 0 까지 줄 수 있었다. 창을 좁히자
      머리의 탭이 세로로 접히고 → 창이 길어지고 → 배너(높이로 폭이 정해진다)가
      넓어지고 → 폼이 또 좁아지는 <되먹임>이 돌았다.

      360 은 머리 줄이 한 줄로 서는 최소치다 —
      워드마크 110 + 탭 200 + 닫기 30 + 간격 24 ≈ 364 에서 왔다(여백은 패널이 따로).
    ⚠ 좁은 화면에서는 아래 @media 가 한 칸으로 쌓으므로 이 바닥이 안 걸린다.
  */
  display:grid; grid-template-columns:auto minmax(360px,1fr);
  background:var(--surface-1);
  border:1px solid rgba(42,58,87,.75);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-modal);
}

/*
  배너 — 왼쪽 절반(PC) · 위쪽 띠(모바일).

  ⚠ object-position 이 <아래>다. 레드가 준 그림은 세로로 긴 한 장이고
    <문구가 아래쪽 3분의 1>에 있다. 로그인 창은 가입 창보다 낮아서 가운데로
    맞추면 그 문구가 반쯤 잘린다. 아래로 붙이면 문구가 온전히 남는다.
    (가입 창은 그림과 비율이 같아 어차피 안 잘린다)
*/
.auth-banner{
  position:relative; background:#0C1220; overflow:hidden;
  /* 그림 비율 — banner-login-20260915.jpg 971×1619, banner-join-20260914.jpg 901×1746 */
  aspect-ratio:971 / 1619;
}
/*
  ★★ 가입 창은 <건드리지 않는다> (레드 2026-09-15 「가입창은 기존유지해줘」).

    2026-09-15 에 줄인 것은 로그인 창 하나다. 가입 폼은 칸이 다섯이라
    그 폭에서 이미 자리를 다 쓰고 있고, 배너 비율도 달라 같은 값이 안 맞는다.

  ⚠ 폼 칸 바닥(minmax 360px)도 안 건다. 그 바닥은 로그인 창이 좁아질 때
    탭이 접히는 되먹임을 막으려고 넣은 것이라, 넓은 가입 창에는 쓸 일이 없다.
*/
.auth-modal.is-join{
  --modal-w: 790px;
  grid-template-columns:auto minmax(0,1fr);
}
.auth-modal.is-join .auth-banner{ aspect-ratio:901 / 1746; }
/*
  ⚠ 그림을 <자리에서 떼어> 깐다(absolute). 흐름에 두면 세로로 긴 그림이
    <창 높이를 제가 정해> 버린다 — 로그인 창이 폼보다 한참 길어졌다.
    떼어 두면 높이는 오른쪽 폼이 정하고 그림은 그 칸을 채우기만 한다.
*/
.auth-banner img{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  /*
    ★ cover 지만 <잘리지 않는다>. 칸이 그림과 같은 비율이라 cover 와 contain 이
      같은 결과를 낸다 — 대신 반올림으로 한두 픽셀이 비는 일이 없다.
  */
  object-fit:cover; object-position:50% 50%;
}

/* 폼 패널 */
/* ⚠ 왼쪽 여백이 <그림과 폼 사이 간격>이다. 좁게 잡는다 (레드 2026-09-14) */
.auth-panel{ padding:22px 26px 24px 22px; display:flex; flex-direction:column; justify-content:center; }
.auth-panel-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  margin-bottom:20px;
}
.auth-wordmark{
  font-weight:900; letter-spacing:.22em; font-size:var(--fs-xs); color:var(--text-4);
  background:linear-gradient(90deg, var(--cta-hi), var(--cta-lo)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-seg{
  justify-self:end; display:inline-flex; gap:2px; padding:3px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-full);
}
.auth-seg-btn{
  padding:7px 18px; border-radius:var(--r-full);
  font-size:var(--fs-xs); line-height:var(--lh-xs); font-weight:700; color:var(--text-4);
  transition:background var(--t-bg), color var(--t-color);
}
.auth-seg-btn:hover{ color:var(--text); }
.auth-seg-btn.is-active{
  color:var(--text-on-cta);
  background:linear-gradient(180deg, var(--cta-hi), var(--cta) 60%, #C3CBD6);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 4px 10px -4px rgba(216,222,230,.5);
}
.auth-close{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:var(--r-tab); color:var(--text-4); font-size:18px;
  transition:background var(--t-bg), color var(--t-color);
}
.auth-close:hover{ background:var(--surface-2); color:var(--text); }

.auth-title{ font-size:var(--fs-xl); line-height:var(--lh-xl); font-weight:900; letter-spacing:-.01em; }
.auth-subtitle{ color:var(--text-4); font-size:var(--fs-base); line-height:var(--lh-base); margin:3px 0 18px; }

/* ---- 폼 ------------------------------------------------------------------ */
.auth-form{ display:flex; flex-direction:column; gap:12px; }
.auth-field{ display:flex; flex-direction:column; gap:5px; }
.auth-field label{ font-size:var(--fs-xs); line-height:var(--lh-xs); font-weight:700; color:var(--text-3); }
.auth-field label em{ font-style:normal; font-weight:400; color:var(--text-5); }
.auth-control{
  position:relative; display:flex; align-items:center; height:42px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color var(--t-color), box-shadow var(--t-color), background var(--t-color);
}
.auth-control input{
  flex:1; min-width:0; height:100%; padding:0 16px;
  background:transparent; border:0; outline:none; color:var(--text);
}
.auth-control input:focus-visible{ outline:none; }
.auth-control:has(.auth-eye) input{ padding-right:48px; }
.auth-control:hover{ border-color:#3A4E73; }
.auth-control.is-focus,.auth-control:focus-within{
  border-color:var(--primary); background:#172542;
  box-shadow:0 0 0 3px rgba(30,79,168,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:var(--r-chip); color:var(--text-5); font-size:15px;
  transition:color var(--t-color), background var(--t-bg);
}
.auth-eye:hover{ color:var(--text-2); background:rgba(255,255,255,.05); }
.auth-hint{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--text-5); }

/*
  ⚠⚠ 크롬 자동완성이 칸을 <하얗게> 칠한다 (레드 2026-09-14 「이거 이렇게 흰색 안남게」).
    바탕 #E8F0FE · 글자 검정으로 바꿔 버려, 어두운 창에서 그 칸만 하얀 종이처럼 뜬다.

  ★ background-color 로는 못 고친다. 크롬이 제 값을 우선하므로
    <안쪽 그림자로 덮는> 것이 유일한 길이다. 글자는 -webkit-text-fill-color 로
    따로 준다 — color 는 무시된다.

  ⚠ transition 을 아주 길게 둔다. 크롬은 사람이 칸을 만지면 배경을 <다시 칠하는데>,
    전환이 끝나기 전에는 못 칠한다. 999999s 는 그 다시 칠하기를 사실상 오지 않게 한다.

  ⚠ 예전 칸(.auth__input)에는 이 규칙이 있었다. 확정본으로 갈아끼우며 이름이
    .auth-control input 으로 바뀌었는데 규칙이 <따라오지 않아> 도로 하얘졌다.
    이름을 바꿀 때 같이 옮겨야 하는 종류다.
*/
.auth-control input:-webkit-autofill,
.auth-control input:-webkit-autofill:hover,
.auth-control input:-webkit-autofill:active{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
          box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text);
  transition: background-color 999999s ease-in-out 0s;
}
/* 초점이 가면 칸 바탕이 바뀐다 — 덮는 색도 함께 바꿔야 테두리 안이 두 색으로 갈리지 않는다 */
.auth-control input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #172542 inset;
          box-shadow: 0 0 0 1000px #172542 inset;
  caret-color: var(--text);
  transition: background-color 999999s ease-in-out 0s;
}

/* 오류 상태 */
.auth-field.is-error .auth-control{ border-color:var(--auth-danger); box-shadow:0 0 0 3px rgba(255,75,75,.16); }
.auth-msg-error{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-sm); line-height:var(--lh-sm); color:#FF7A7A;
}

.auth-row-end{ display:flex; justify-content:flex-end; margin-top:-6px; }
.auth-link{ font-size:var(--fs-xs); line-height:var(--lh-xs); color:var(--text-4); transition:color var(--t-color); }
.auth-link:hover{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

/* 동의 체크박스 */
.auth-check{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:var(--fs-xs); line-height:18px; color:var(--text-3); }
.auth-check input{
  appearance:none; flex:none; position:relative; width:18px; height:18px; margin:0;
  border:1px solid var(--line); border-radius:5px; background:var(--surface-2); cursor:pointer;
  transition:background var(--t-bg), border-color var(--t-color);
}
.auth-check input:checked{ background:var(--primary); border-color:var(--primary); }
.auth-check input:checked::after{
  content:""; position:absolute; left:5px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.auth-check a{ color:var(--text); font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--text-6); }
.auth-check a:hover{ text-decoration-color:var(--text); }

/* ---- 버튼 ---------------------------------------------------------------- */
.auth-btn-cta{
  height:44px; border-radius:var(--r); margin-top:2px;
  font-weight:700; font-size:var(--fs-md); color:var(--text-on-cta);
  background:linear-gradient(180deg, var(--cta-hi) 0%, var(--cta) 48%, #C3CBD6 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 var(--cta-lo), 0 10px 22px -10px rgba(216,222,230,.55);
  transition:filter var(--t-color), transform var(--t-bg), box-shadow var(--t-color);
}
.auth-btn-cta:hover{ filter:brightness(1.06); box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 var(--cta-lo), 0 14px 26px -10px rgba(216,222,230,.7); }
.auth-btn-cta:active{ transform:translateY(1px); filter:brightness(.97); }

/*
  ★ 주 단추 · 「또는」 · 구글 단추 · 아래 안내가 <너무 붙어 있었다>
    (레드 2026-09-14 「버튼 줄 버튼 안내문구 사이 간격적절하게 띄워줄래」).
    시안은 창이 980px 일 때의 값이었고, 790px 로 줄이면서 여백이 같이 좁아졌다.

  ⚠ 이 셋은 <폼 바깥>이라 .auth-form 의 gap 이 안 닿는다. 저마다 margin 으로 띄운다.
*/
.auth-divider{ display:flex; align-items:center; gap:12px; color:var(--text-5); font-size:var(--fs-sm); margin:16px 0 12px; }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

.auth-btn-google{
  height:42px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); font-weight:500;
  transition:background var(--t-bg), border-color var(--t-color);
}
.auth-btn-google:hover{ background:var(--surface-3); border-color:#3A4E73; }
.auth-btn-google i{ font-size:16px; }
/* ⚠ 구글 마크는 <그림>이라 글자 색을 안 따른다. 줄에 맞춰 세우기만 한다 */
.auth-gmark{ display:block; flex:none; }

.auth-foot{ text-align:center; font-size:var(--fs-xs); line-height:var(--lh-xs); color:var(--text-4); margin-top:16px; }
/*
  ⚠ 창에서는 이 자리가 <단추>다(그 자리에서 갈아타므로). a 에만 여백을 줘서
    「없으신가요?회원가입」처럼 붙어 보였다 — 둘 다에 준다.
*/
.auth-foot a,
.auth-foot .auth-link{ color:var(--text); font-weight:700; margin-left:6px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--text-6); }
.auth-foot a:hover,
.auth-foot .auth-link:hover{ text-decoration-color:var(--text); }

/* 키보드 초점은 base.css 의 :focus-visible 규칙을 그대로 쓴다 (링크·버튼·체크박스) */

/* ---- 모바일 (390px) — 배너는 위쪽 짧은 띠로 --------------------------------- */
@media (max-width:720px){
  /*
    ★★ 가입 창도 <함께> 1열로 되돌린다 (2026-09-16 고침).

      ⚠ 미디어쿼리는 <구체성을 올려 주지 않는다>. 위에서 잡은
        `.auth-modal.is-join{ grid-template-columns:auto minmax(0,1fr) }` 은 (0,2,0) 이고
        여기 `.auth-modal` 은 (0,1,0) 이라, 화면이 좁아져도 <가입 창만 PC 2열이 이겼다>.

      그 결과 배너가 왼쪽 `auto` 열에 남는데, 배너 그림은 absolute 라 그 열에
        폭을 만들어 주지 못한다 — 열이 0 으로 접히며 <배너가 통째로 사라졌다>.
        로그인 창은 `.is-join` 이 없어 멀쩡했으므로 <가입에서만> 보이던 결함이다.

      ⚠ 아래 배너 비율 규칙이 `.is-join` 을 이미 챙기고 있었다. 그림만 모바일용으로
        바꿔 놓고 <그 그림이 놓일 칸>을 안 되돌린 것이라, 둘은 늘 같이 고쳐야 한다.
  */
  .auth-modal,
  .auth-modal.is-join{ grid-template-columns:1fr; border-radius:var(--r-lg); }
  /*
    ⚠ 띠 높이를 96px 로 못 박으면 가로로 긴 그림이 위아래로 잘린다.
      <그림 비율>로 잡으면 폭이 얼마든 잘리지도, 좌우가 남지도 않는다.
  */
  .auth-banner,
  .auth-modal.is-join .auth-banner{ min-height:0; height:auto; aspect-ratio:2172 / 724; }
  .auth-banner img{ object-fit:cover; object-position:50% 50%; }
  .auth-panel{ padding:20px 18px 24px; }
  .auth-panel-head{ grid-template-columns:1fr auto; margin-bottom:20px; }
  .auth-wordmark{ grid-column:1; grid-row:1; }
  .auth-close{ grid-column:2; grid-row:1; }
  .auth-seg{ grid-column:1 / -1; grid-row:2; justify-self:stretch; display:flex; }
  .auth-seg-btn{ flex:1; text-align:center; }
  .auth-title{ font-size:var(--fs-xl); line-height:var(--lh-xl); }
  .auth-subtitle{ margin-bottom:18px; }
}