/* URL.KR v2 - 로그인·회원가입 독립 페이지('auth' 셸). 좌: 입력 / 우: 회원 혜택 + 자체 배너.
   사이트 헤더·푸터 없이 쓰는 화면이라 이 파일만 레이아웃을 가진다. 입력 카드 모양은 sub.css 의 .hv2-auth-* 를 쓰고 여기서 세로 여백만 줄인다.
   목표: 로그인·비밀번호 찾기·재설정은 PC 1366x768 까지 한 화면(스크롤 없음). 회원가입은 폼이 길어 스크롤하되 우측 안내가 따라온다. */

.au-page { background: var(--band); }   /* 모바일에서 우측 안내 아래로 남는 여백도 같은 색으로 이어지게 */
.au-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* 좌측 - 입력 */
.au-main { display: flex; justify-content: center; background: var(--bg); padding: 24px 24px 20px; }
.au-main-in { width: 100%; max-width: 460px; display: flex; flex-direction: column; }
.au-main-in:has(.hv2-auth--wide) { max-width: 640px; }
.au-brand { align-self: flex-start; font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--heading); display: inline-flex; align-items: baseline; }
.au-brand span { color: var(--accent); }
.au-title { margin-top: auto; padding-top: 20px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; color: var(--heading); }
.au-lead { margin-top: 6px; color: var(--muted); line-height: 1.5; font-size: 15px; }
.au-main .hv2-sub { padding: 18px 0 0; }
.au-main .hv2-wrap { width: 100%; }
.au-main .hv2-auth, .au-main .hv2-auth--wide { max-width: none; }
.au-main .hv2-auth-card { padding: 22px 24px; }
.au-main .hv2-auth-card .hv2-fields { gap: 12px; }
.au-main .hv2-auth-submit { margin-top: 16px; min-height: 46px; }
.au-main .hv2-auth-sep { margin: 16px 0 12px; }
.au-main .hv2-auth-links { margin-top: 14px; }
.au-main .hv2-social { gap: 8px; }
.au-main .hv2-alert { margin-bottom: 12px !important; }
.au-legal { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.au-legal a { color: var(--muted); padding: 2px 0; }
.au-legal a:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.au-legal small { margin-left: auto; font-size: 12.5px; color: var(--faint); }
/* 폼이 긴 회원가입은 제목을 위로 붙여 흐름대로 읽게 한다 */
.au-main-in:has(.hv2-auth--wide) .au-title { margin-top: 0; padding-top: 28px; }

/* 우측 - 회원 혜택 + 배너 */
.au-side { background: var(--band); color: #fff; padding: 24px 32px; display: flex; justify-content: center; align-items: center; }
.au-side-in { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.au-page:has(.hv2-auth--wide) .au-side { align-items: flex-start; }
.au-page:has(.hv2-auth--wide) .au-side-in { position: sticky; top: 24px; }
.au-side-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--accent-on-band); }
.au-side-title { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.35; color: #fff; margin: -4px 0 2px; }
.au-plan { border: 1px solid var(--border-invert); border-radius: var(--r-lg); padding: 14px 18px; background: rgb(255 255 255 / 6%); }
.au-plan--paid { border-color: rgb(255 158 122 / 45%); }
.au-plan-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 16px; color: #fff; }
.au-plan-price { font-size: 13px; font-weight: 600; color: var(--accent-on-band); }
.au-plan-list { margin-top: 8px; display: grid; gap: 4px; }
.au-plan-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--band-link); }
.au-plan-list .hv2-icon { margin-top: .22em; color: var(--accent-on-band); }
.au-plan-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: #fff; }
.au-plan-link:hover { color: var(--accent-on-band); }
.au-ad { background: var(--bg); border-radius: var(--r-md); overflow: hidden; color: var(--text); }
.au-ad-image img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; }
/* 텍스트 배너는 배너 시스템(rnd_banner.php)이 인라인 스타일을 쓰므로 이 화면에서만 크기를 덮어쓴다 */
.au-ad-text > div > div, .au-ad-text > div > a.text-banner-link { padding: 12px 16px !important; }
.au-ad-text .text-banner-link { gap: 4px 12px !important; }
.au-ad-text .text-banner-link > span:first-child { font-size: 1.05rem !important; }

/* 세로가 낮은 PC 화면(노트북 768 등) - 한 화면에 들어가도록 한 단계 더 줄인다 */
@media (min-width: 992px) and (max-height: 860px) {
    .au-brand { font-size: 22px; }
    .au-title { padding-top: 14px; font-size: 24px; }
    .au-lead { font-size: 14px; }
    .au-main .hv2-sub { padding-top: 14px; }
    .au-main .hv2-auth-card { padding: 18px 22px; }
    .au-side-in { gap: 10px; }
    .au-side-eyebrow { display: none; }
    .au-plan { padding: 12px 16px; }
    .au-plan-list li { font-size: 13.5px; }
    .au-ad-image img { max-height: 130px; }
}
@media (min-width: 992px) and (max-height: 760px) {
    .au-main { padding-top: 16px; padding-bottom: 12px; }
    .au-title { padding-top: 8px; font-size: 22px; }
    .au-main .hv2-sub { padding-top: 10px; }
    .au-main .hv2-auth-card { padding: 16px 20px; }
    .au-main .hv2-auth-sep { margin: 12px 0 10px; }
    .au-legal { padding-top: 8px; }
    .au-side-title { font-size: 19px; }
    .au-plan-list { gap: 2px; }
    .au-plan-list li { line-height: 1.4; }
    .au-ad-image img { max-height: 100px; }
}

@media (max-width: 991px) {
    .au-shell { grid-template-columns: 1fr; min-height: 0; }
    .au-main { padding: 22px 20px 28px; }
    .au-title { margin-top: 0; padding-top: 24px; }
    .au-legal { margin-top: 0; }
    .au-side { padding: 28px 20px 36px; }
    .au-side-in, .au-page:has(.hv2-auth--wide) .au-side-in { max-width: 560px; position: static; }
}
@media (max-width: 600px) {
    .au-main { padding: 20px 16px 24px; }
    .au-side { padding: 24px 16px 32px; }
    .au-legal small { margin-left: 0; width: 100%; }
}