/* 로그인 · 회원가입 (사용자 2026.11.04 — 기존 데이터는 그대로, 레이아웃만 리뉴얼)
   폼 카드 안은 지금 사이트 화면 구조 그대로다: login.js · join.js · select-box.js 가 쓰는 id · name · data-* · 클래스를 바꾸지 않는다.
   개발: 이 파일을 portal.css 다음에 불러오고, 섹션 바깥 틀(.au · 왼쪽 안내)만 바꾼다. 카드 안 HTML 은 손대지 않는다.
   모든 규칙은 .au 아래로 묶었다(portal.css 의 .cl-portal .cl-input 등과 우선순위가 같아 뒤에 불러오면 이긴다). */

/* ---------- 페이지 틀 ---------- */
.au{position:relative;overflow:clip;padding:var(--hero-top) 0 128px}
/* overflow:hidden 이면 .au 가 스크롤 상자가 되어 왼쪽 sticky 가 안 먹는다 → clip */
/* 오른쪽 박스 폭은 로그인 · 회원가입 · 찾기 · 개설 신청 모두 560(사용자 2026.11.04 — 페이지를 넘길 때 박스가 좌우로 흔들리지 않게). 박스 자리는 고정, 높이만 내용대로 */
.au > .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:80px;align-items:start}
.au-aside{min-width:0}
.au-main{min-width:0;width:100%}
.au--join .au-aside{position:sticky;top:120px}
.au-aside h1{margin-top:var(--hero-gap-badge);font-size:clamp(32px,4.4vw,48px);line-height:1.25;font-weight:800;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.au-aside h1 em{font-style:normal;color:var(--pri)}
.au-aside .sub{margin-top:var(--hero-gap-sub);max-width:26em;font-size:20px;line-height:1.6;letter-spacing:-0.015em;color:var(--mut);text-wrap:pretty}

/* 로고 구름 — 클라우드러닝 로고의 구름 모양을 크게, 아주 옅게 깐다(움직이지 않음). 그림 대신 브랜드 모양으로 빈자리를 채운다 */
.au-cloud{position:absolute;z-index:0;left:max(-60px,calc(50% - 760px));bottom:-150px;width:min(760px,58vw);height:auto;color:var(--tint);pointer-events:none}
.au-cloud path{fill:currentColor}
/* 찾기 화면은 카드가 짧아 섹션이 낮다 → 로그인과 같은 높이를 두어 구름 자리 · 푸터 위치까지 로그인과 같게(넘길 때 흔들리지 않게) */
@media (min-width:1081px){.au--find{min-height:852px;box-sizing:border-box}}

/* 회원가입 왼쪽: 가입한 뒤 할 일을 모션 그래픽 하나로(사용자 2026.11.04 — 단계 카드는 오른쪽 폼과 비슷해 "여기에도 적어야 하나" 헷갈림).
   그림은 개설 신청 흐름 모션과 같은 연한 말투(사용자 2026.11.04 — 연하게 맞춤): 연보라 선 · 흰 바탕 · 보라는 채워지는 글 · 버튼 · 고른 카드 · 진행에만. 움직임은 메인 화면 예시 모션과 같은 계열
   (칸 채우기 · 튀어나오기 --pop · 버튼 눌림 0.94 + 진보라 · 커서 이동), 장면은 옆으로 미끄러지며 바뀐다(Jitter 처럼 장면 전환).
   12초 한 바퀴: 1 회원가입 0~38% → 2 학원 찾아 가입 신청 38~71% → 3 강좌 보기 71~100%. 아래 단계 글자도 같은 시간에 맞춰 켜진다.
   움직임 줄이기 설정이면 멈추고 마지막 장면(강좌 보기)만 보인다 */
.au-mo{margin-top:var(--hero-gap-act);max-width:520px}
.au-mo-stage{border-radius:32px;background:var(--soft);overflow:hidden}
.mo-svg{display:block;width:100%;height:auto}
.mo-s,.mo-go,.mo-play,.mo-tgt-box{transform-box:fill-box;transform-origin:center}
.mo-s1,.mo-s2{opacity:0}
.mo-cur,.mo-pen{opacity:0}
.mo-ty{stroke-dasharray:1 0}
.mo-lb1{opacity:0}
.mo-go2 .mo-go-bg{fill:var(--pri-d)}
.mo-strip{transform:translateY(-512px)}
.mo-play{opacity:0}
.au-mo-steps{display:flex;align-items:center;gap:6px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;font-weight:700;color:var(--mut);white-space:nowrap}
.au-mo-steps li{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 6px;border-radius:99px;background:var(--soft)}
.au-mo-steps li + li::before{content:"";width:10px;height:1.5px;margin-left:-12px;margin-right:2px;background:var(--line-input)}
.au-mo-steps li + li{margin-left:12px}
.au-mo-steps b{display:grid;place-items:center;width:20px;height:20px;border-radius:99px;background:var(--ink);color:#ffffff;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:11px;font-weight:800}
@media (prefers-reduced-motion:no-preference){
.mo-s1{animation:moS1 12s var(--ease) infinite both}
.mo-s2{animation:moS2 12s var(--ease) infinite both}
.mo-s3{animation:moS3 12s var(--pop) infinite both}
.mo-ty1{animation:moTy1 12s cubic-bezier(.65,0,.35,1) infinite both}
.mo-ty2{animation:moTy2 12s cubic-bezier(.65,0,.35,1) infinite both}
.mo-ty3{animation:moTy3 12s cubic-bezier(.65,0,.35,1) infinite both}
.mo-pen{animation:moPen 12s cubic-bezier(.65,0,.35,1) infinite both}
.mo-go1{animation:moGo1 12s var(--pop) infinite both}
.mo-go1 .mo-go-bg{animation:moGoBg1 12s ease infinite both}
.mo-strip{animation:moStrip 12s infinite both}
.mo-tgt-box{animation:moTgt 12s ease infinite both}
.mo-go2{animation:moGo2 12s var(--pop) infinite both}
.mo-go2 .mo-go-bg{animation:moGoBg2 12s ease infinite both}
.mo-lb1{animation:moLb1 12s ease infinite both}
.mo-lb2{animation:moLb2 12s ease infinite both}
.mo-play{animation:moPlay 12s var(--pop) infinite both}
.mo-seek{animation:moSeek 12s linear infinite both}
.mo-cur{animation:moCur 12s cubic-bezier(.45,0,.2,1) infinite both}
.au-mo-steps .c1{animation:moC1 12s ease infinite both}
.au-mo-steps .c2{animation:moC2 12s ease infinite both}
.au-mo-steps .c3{animation:moC3 12s ease infinite both}
.au-mo-steps .c1 b{animation:moB1 12s ease infinite both}
.au-mo-steps .c2 b{animation:moB2 12s ease infinite both}
.au-mo-steps .c3 b{animation:moB3 12s ease infinite both}
}
/* 장면 전환: 들어올 때 아래에서 · 옆에서, 나갈 때 왼쪽으로 */
@keyframes moS1{0%{opacity:0;transform:translateY(18px)}3%{opacity:1;transform:none}36%{opacity:1;transform:none}40%{opacity:0;transform:translateX(-48px)}100%{opacity:0;transform:translateX(-48px)}}
@keyframes moS2{0%,37%{opacity:0;transform:translateX(48px)}41%{opacity:1;transform:none}69%{opacity:1;transform:none}72%{opacity:0;transform:translateX(-48px)}100%{opacity:0;transform:translateX(-48px)}}
@keyframes moS3{0%,71%{opacity:0;transform:scale(.9)}75%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0;transform:none}}
/* 1 칸 채우기(둥근 끝 그대로 — stroke-dasharray) + 연필이 글 끝을 따라감 */
@keyframes moTy1{0%,3.9%{opacity:0;stroke-dasharray:.0001 1}4%{opacity:1;stroke-dasharray:.0001 1}11%,100%{opacity:1;stroke-dasharray:1 0}}
@keyframes moTy2{0%,11.9%{opacity:0;stroke-dasharray:.0001 1}12%{opacity:1;stroke-dasharray:.0001 1}19%,100%{opacity:1;stroke-dasharray:1 0}}
@keyframes moTy3{0%,19.9%{opacity:0;stroke-dasharray:.0001 1}20%{opacity:1;stroke-dasharray:.0001 1}26%,100%{opacity:1;stroke-dasharray:1 0}}
@keyframes moPen{0%{opacity:0;transform:translate(190px,153px)}3.5%{opacity:0;transform:translate(190px,153px)}4%{opacity:1;transform:translate(190px,153px)}11%{opacity:1;transform:translate(260px,153px)}12%{opacity:1;transform:translate(190px,203px)}19%{opacity:1;transform:translate(290px,203px)}20%{opacity:1;transform:translate(190px,253px)}26%{opacity:1;transform:translate(276px,253px)}28%{opacity:0;transform:translate(300px,243px)}100%{opacity:0;transform:translate(300px,243px)}}
/* 버튼이 튀어나오고(--pop) 커서가 눌러 0.94 + 진보라 */
@keyframes moGo1{0%,26%{opacity:0;transform:scale(.6)}29%{opacity:1;transform:none}33.5%{opacity:1;transform:none}34.5%{opacity:1;transform:scale(.94)}35.5%,100%{opacity:1;transform:none}}
@keyframes moGoBg1{0%,33.5%{fill:#904ae8}34.5%,100%{fill:#7a35d0}}
/* 2 카드가 빠르게 올라가다 러닝수학학원에서 멈춤(살짝 지나쳤다 돌아옴) */
@keyframes moStrip{0%,41%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.2,1)}51.5%{transform:translateY(-526px);animation-timing-function:cubic-bezier(.3,0,.3,1)}53.5%,100%{transform:translateY(-512px)}}
@keyframes moTgt{0%,53.5%{stroke:#c9b3f5;stroke-width:2.5}55%,100%{stroke:#904ae8;stroke-width:3}}
@keyframes moGo2{0%,54.5%{opacity:0;transform:scale(.6)}57.5%{opacity:1;transform:none}60.5%{opacity:1;transform:none}61.5%{opacity:1;transform:scale(.94)}62.5%,100%{opacity:1;transform:none}}
@keyframes moGoBg2{0%,60.5%{fill:#904ae8}61.5%,100%{fill:#7a35d0}}
@keyframes moLb1{0%,60.5%{opacity:1}61%,100%{opacity:0}}
@keyframes moLb2{0%,62%{opacity:0;transform:translateY(6px)}64%,100%{opacity:1;transform:none}}
/* 3 재생 버튼이 튀어나와 눌리고 사라지면 진행 막대가 찬다 */
@keyframes moPlay{0%,75%{opacity:0;transform:scale(.6)}78%{opacity:1;transform:none}80.5%{opacity:1;transform:none}81.5%{opacity:1;transform:scale(.88)}83.5%{opacity:0;transform:scale(1.25)}100%{opacity:0;transform:scale(1.25)}}
@keyframes moSeek{0%,82.9%{opacity:0;stroke-dasharray:.0001 1}83%{opacity:1;stroke-dasharray:.0001 1}97%,100%{opacity:1;stroke-dasharray:.62 1}}
/* 커서: 1 [회원가입] 누르기 → 2 [가입 신청] 누르기 */
@keyframes moCur{0%,28%{opacity:0;transform:translate(430px,420px)}29%{opacity:1;transform:translate(420px,410px)}33%{opacity:1;transform:translate(290px,322px)}34%{opacity:1;transform:translate(290px,322px) scale(.85)}35%{opacity:1;transform:translate(290px,322px)}37%{opacity:0;transform:translate(290px,322px)}56%{opacity:0;transform:translate(430px,430px)}57%{opacity:1;transform:translate(420px,425px)}60.5%{opacity:1;transform:translate(292px,368px)}61.5%{opacity:1;transform:translate(292px,368px) scale(.85)}62.5%{opacity:1;transform:translate(292px,368px)}65%,100%{opacity:0;transform:translate(292px,368px)}}
/* 아래 단계 글자: 지금 장면만 연보라 */
@keyframes moC1{0%,37%{background:var(--tint);color:var(--pri-d)}39%,100%{background:var(--soft);color:var(--mut)}}
@keyframes moC2{0%,37%{background:var(--soft);color:var(--mut)}39%,70%{background:var(--tint);color:var(--pri-d)}72%,100%{background:var(--soft);color:var(--mut)}}
@keyframes moC3{0%,70%{background:var(--soft);color:var(--mut)}72%,100%{background:var(--tint);color:var(--pri-d)}}
@keyframes moB1{0%,37%{background:var(--pri)}39%,100%{background:var(--ink)}}
@keyframes moB2{0%,37%{background:var(--ink)}39%,70%{background:var(--pri)}72%,100%{background:var(--ink)}}
@keyframes moB3{0%,70%{background:var(--ink)}72%,100%{background:var(--pri)}}

/* 휴대폰 · 좁은 화면: 세 단계를 폼 위 한 줄로 */
.au-flow{display:none}

/* ---------- 폼 카드 (지금 사이트 구조) ---------- */
.au .cl-pt-auth__card{position:relative;display:flex;flex-direction:column;gap:28px;width:100%;max-width:none;box-sizing:border-box;padding:48px;border:0;border-radius:32px;background:#ffffff;box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.au .cl-pt-auth__head{display:flex;flex-direction:column;gap:8px}
.au .cl-pt-auth__title{margin:0;font-size:28px;line-height:1.3;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.au .cl-pt-auth__desc{margin:0;font-size:15px;line-height:1.6;color:var(--mut)}
.au .cl-pt-auth__form{display:flex;flex-direction:column;gap:22px;margin:0}
.au [hidden]{display:none !important}
.au .cl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 오류 띠(로그인 실패 · 필수 항목 등 — 스크립트가 글자를 넣고 hidden 을 푼다) */
.au .cl-banner{margin:0;padding:14px 18px;border:0;border-radius:16px;background:var(--err-bg);color:var(--err);font-size:14px;line-height:1.5;font-weight:600}
.au .cl-banner:focus{outline:none;box-shadow:0 0 0 2px var(--err)}

/* 칸 */
.au .cl-field{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:none;margin:0;padding:0;border:0}
.au fieldset.cl-field > legend{padding:0;margin:0 0 8px}
.au .cl-field__label{font-size:14px;line-height:1.4;font-weight:700;color:var(--ink)}
.au .cl-req{margin-left:2px;color:var(--err);font-weight:700}
.au .cl-field__help,.au .cl-field__error{margin:0;padding:0 6px;font-size:13px;line-height:1.5;font-weight:400;color:var(--mut)}
.au .cl-field__error{color:var(--err)}
.au .cl-auth__caps{display:flex;align-items:center;gap:6px;color:var(--warn)}
.au .cl-auth__caps svg{flex:none}
.au .cl-auth__ok{color:var(--ok);font-weight:600}

/* 입력 칸 = 알약(DESIGN.md 5장) · 포커스 보라 링(6장) */
.au .cl-input,.au .cl-select{box-sizing:border-box;width:100%;height:52px;margin:0;padding:0 22px;border:0;border-radius:99px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);font-family:'Pretendard Variable','Pretendard',sans-serif;font-size:16px;line-height:1;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;transition:box-shadow .2s ease,background-color .2s ease}
.au .cl-input::placeholder,.au .cl-select::placeholder{color:#7d7d84;opacity:1}
.au .cl-input:focus,.au .cl-select:focus,.au .cl-selectbox__control[aria-expanded="true"]{box-shadow:0 0 0 2px var(--pri),0 0 0 7px rgba(144,74,232,.12)}
.au .cl-field.is-invalid .cl-input{box-shadow:inset 0 0 0 1.5px var(--err)}
.au .cl-field.is-invalid .cl-input:focus{box-shadow:0 0 0 2px var(--err),0 0 0 7px rgba(197,34,31,.10)}
.au .cl-input[readonly]{background:var(--soft);box-shadow:none;color:var(--ink-2)}
.au .cl-input-group{position:relative;display:block}
.au .cl-input-group .cl-input{padding-right:58px}
.au .cl-input-group__btn{position:absolute;right:6px;top:50%;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:99px;background:transparent;color:var(--mut);display:grid;place-items:center;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .2s var(--ease)}
.au .cl-input-group__btn:hover{background:var(--soft);color:var(--ink)}
.au .cl-input-group__btn:active{transform:scale(.97)}
.au .cl-input-group__btn[aria-pressed="true"]{color:var(--pri-d)}
.au .cl-input-group__btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* 선택 칸(select-box.js 가 select 를 바꾼 모양). 목록 자리(position · top · left)는 스크립트가 정하므로 여기서는 모양만 */
.au .cl-auth__birth{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.au .cl-selectbox{position:relative;display:block;min-width:0}
.au .cl-selectbox__control{width:100%;text-align:left;cursor:pointer;padding-right:44px;background-repeat:no-repeat;background-position:right 18px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235e5e63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.au .cl-selectbox__button{display:flex;align-items:center;white-space:nowrap}
.au .cl-selectbox__button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.au .cl-selectbox__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.au .cl-selectbox__sizer{display:none}
.au .cl-selectbox__input{padding-left:46px;background-position:left 20px center,right 18px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5e63' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235e5e63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.au .cl-selectbox__input{text-overflow:ellipsis}
.au .cl-selectbox__input:focus{cursor:text}
.au .cl-selectbox__list,.cl-selectbox__list.au-list{box-sizing:border-box;min-width:160px;max-height:280px;margin:0;padding:8px;list-style:none;overflow-y:auto;border:0;border-radius:20px;background:#ffffff;box-shadow:0 0 0 1px #ececf0,0 18px 40px rgba(29,29,31,.10)}
.au .cl-selectbox__option{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 14px;border-radius:12px;font-size:15px;color:var(--ink-2);cursor:pointer}
.au .cl-selectbox__option.is-active{background:var(--soft)}
.au .cl-selectbox__option[aria-selected="true"]{color:var(--pri-d);font-weight:700}
.au .cl-selectbox__empty{padding:10px 14px;font-size:14px;color:var(--mut)}

/* 고르기 두 칸(성별) */
.au .cl-pt-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.au .cl-pt-toggle label{position:relative;display:grid;place-items:center;height:52px;border-radius:99px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);font-size:15px;color:var(--ink-2);cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease,color .2s ease,transform .2s var(--ease)}
.au .cl-pt-toggle label:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.au .cl-pt-toggle label:active{transform:scale(.97)}
.au .cl-pt-toggle input{position:absolute;opacity:0;pointer-events:none}
.au .cl-pt-toggle label:has(input:checked){background:var(--tint);box-shadow:inset 0 0 0 2px var(--pri);color:var(--pri-d);font-weight:700}
.au .cl-pt-toggle label:has(input:focus-visible){outline:2px solid var(--pri);outline-offset:2px}

/* 나이 탭(만 14세 이상 · 미만) — 약관 탭과 같은 알약, 지금 탭은 검정 */
.au .cl-pt-segment{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;background:none}
.au .cl-pt-segment > a{display:grid;place-items:center;height:48px;border-radius:99px;font-size:15px;font-weight:700;color:var(--ink-2);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s ease,color .2s ease,transform .2s var(--ease)}
.au .cl-pt-segment > a:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.au .cl-pt-segment > a:active{transform:scale(.97)}
.au .cl-pt-segment > a[aria-current="page"]{background:var(--ink);color:#ffffff;box-shadow:none}
.au .cl-pt-segment > a:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* 이메일 + [인증 메일 보내기] */
.au .cl-inline-fields{display:flex;gap:8px}
.au .cl-inline-fields .cl-input{flex:1;min-width:0}

/* 체크 */
.au .cl-pt-check{display:inline-flex;align-items:center;gap:10px;font-size:15px;line-height:1.4;color:var(--ink);cursor:pointer}
.au .cl-pt-check input{flex:none;width:22px;height:22px;margin:0;border-radius:7px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);display:grid;place-items:center;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .2s ease,box-shadow .2s ease}
.au .cl-pt-check:hover input:not(:checked){box-shadow:inset 0 0 0 1.5px var(--ink)}
.au .cl-pt-check input:checked{background:var(--pri);box-shadow:none}
.au .cl-pt-check input:checked::after{content:"";width:10px;height:6px;margin-top:-2px;border:solid #ffffff;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.au .cl-pt-check input:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.au .cl-pt-auth__save{align-self:flex-start;margin-top:-6px}

/* 약관 묶음 — 회백 판 */
.au .cl-pt-terms{display:flex;flex-direction:column;margin:0;padding:6px 22px 8px;border:0;border-radius:24px;background:var(--soft);box-shadow:none}
.au .cl-pt-terms__all{display:flex;height:54px;font-weight:700;border-bottom:1px solid var(--line)}
.au .cl-pt-terms__row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.au .cl-pt-terms__row .cl-pt-check{font-size:14px;color:var(--ink-2)}
.au .cl-pt-terms__view{flex:none;padding:6px 4px;border:0;background:transparent;font:inherit;font-size:13px;color:var(--mut);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s ease}
.au .cl-pt-terms__view:hover{color:var(--pri-d)}
.au .cl-pt-terms__view:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}

/* 버튼(사이트 cl-pt-btn → 리뉴얼 버튼 모양) */
.au .cl-pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;border:0;border-radius:99px;font-family:'Pretendard Variable','Pretendard',sans-serif;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;background-image:none;box-shadow:none;transition:background-color .2s ease,color .2s ease,transform .2s var(--ease)}
.au .cl-pt-btn--primary{background:var(--pri);color:#ffffff}
.au .cl-pt-btn--primary:hover{background:var(--pri-d);box-shadow:none}
.au .cl-pt-btn--dark{background:var(--ink);color:#ffffff}
.au .cl-pt-btn--dark:hover{background:var(--pri)}
.au .cl-pt-btn--xl{height:56px;padding:0 28px;font-size:17px}
.au .cl-pt-btn--block{width:100%}
.au .cl-pt-auth__inline-btn{flex:none;height:52px;padding:0 22px;font-size:15px}
.au .cl-pt-btn:active{transform:scale(.97)}
.au .cl-pt-btn:disabled,.au .cl-pt-btn:disabled:hover{background:var(--track);color:#8e8e93;cursor:default;transform:none}
.au .cl-pt-btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

a.cl-pt-btn{text-decoration:none}
.au .cl-pt-btn--secondary{background:#ffffff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.au .cl-pt-btn--secondary:hover{background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.au .cl-pt-btn--lg{height:52px;padding:0 24px;font-size:16px}
/* 연한 작은 버튼(다른 방법으로 찾기 · 인증) — 가운데 */
.au .cl-pt-btn--soft{background:var(--soft);color:var(--ink-2)}
.au .cl-pt-btn--soft:hover{background:var(--gray);color:var(--ink)}
.au .cl-pt-btn--sm{align-self:center;height:40px;padding:0 18px;font-size:14px}
.au .cl-pt-auth__desc strong{color:var(--ink);font-weight:700}
.au .cl-num{font-variant-numeric:tabular-nums}

/* 찾기 단계(find-id.js · find-pass.js 가 data-step 의 hidden 을 바꾼다) */
.au .cl-auth__step{display:flex;flex-direction:column;gap:16px;margin:0}
.au .cl-auth__methods{display:grid;gap:10px}
/* 방법 고르기 = 흰 줄 버튼(7-2 선 버튼: 회색 선 → 검정 선) */
.au .cl-auth__method{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center;width:100%;margin:0;padding:18px 20px;border:0;border-radius:20px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line);font-family:'Pretendard Variable','Pretendard',sans-serif;text-align:left;color:var(--ink);cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease}
.au .cl-auth__method:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.au .cl-auth__method:active{background:var(--gray)}
.au .cl-auth__method:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.au .cl-auth__method svg{grid-row:1 / 3;box-sizing:content-box;width:22px;height:22px;padding:11px;border-radius:14px;background:var(--tint);color:var(--pri-d)}
.au .cl-auth__method strong{font-size:16px;line-height:1.4;font-weight:800}
.au .cl-auth__method span{font-size:13px;line-height:1.5;color:var(--mut)}
/* 찾은 아이디 고르기 — 성별 칸과 같은 고르기(고르면 연보라 + 보라 선) */
.au .cl-auth__ids{display:flex;flex-direction:column;gap:8px}
.au .cl-auth__id{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;border-radius:20px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease}
.au .cl-auth__id:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.au .cl-auth__id input{flex:none;width:20px;height:20px;margin:0;border-radius:99px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);-webkit-appearance:none;appearance:none;cursor:pointer}
.au .cl-auth__id input:checked{box-shadow:inset 0 0 0 6px var(--pri)}
.au .cl-auth__id input:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.au .cl-auth__id:has(input:checked){background:var(--tint);box-shadow:inset 0 0 0 2px var(--pri)}
.au .cl-auth__id strong{flex:1;min-width:0;font-size:16px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.au .cl-auth__id span{flex:none;font-size:13px;color:var(--mut)}

/* 카드 아래 링크 */
.au .cl-pt-auth__links{display:flex;justify-content:center;align-items:center;gap:0;margin-top:-8px;font-size:14px}
.au .cl-pt-auth__links a{padding:4px 16px;color:var(--mut);text-decoration:none;transition:color .2s ease}
.au .cl-pt-auth__links a + a{border-left:1px solid var(--line)}
.au .cl-pt-auth__links a:hover{color:var(--pri-d)}
.au .cl-pt-auth__join{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-radius:20px;background:var(--soft);font-size:15px;color:var(--ink-2)}
.au .cl-pt-link{font-weight:700;color:var(--pri-d);text-decoration:none}
.au .cl-pt-link:hover{text-decoration:underline;text-underline-offset:3px}
.au .cl-pt-auth__back{align-self:center;font-size:14px;color:var(--mut);text-decoration:none}
.au .cl-pt-auth__back b{margin-left:4px;color:var(--pri-d);font-weight:700}
.au .cl-pt-auth__back:hover b{text-decoration:underline;text-underline-offset:3px}
.au :is(.cl-pt-auth__links a,.cl-pt-link,.cl-pt-auth__back):focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}

/* ---------- 학원 개설 신청(사용자 2026.11.04) — 폼은 지금 사이트(application.js) 그대로 ---------- */
.ap-aside{position:sticky;top:120px;min-width:0}
.ap-head h1{margin-top:var(--hero-gap-badge);font-size:clamp(32px,4.4vw,48px);line-height:1.25;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.ap-head h1 em{font-style:normal;color:var(--pri)}
.ap-head .sub{margin-top:var(--hero-gap-sub);max-width:26em;font-size:20px;line-height:1.6;letter-spacing:-0.015em;color:var(--mut);text-wrap:pretty}
/* 흐름 모션 — 회원가입 모션보다 연하고 짧게(사용자: 시선이 폼에서 흩어지지 않게). 연보라 선 · 흰 칸만, 지금 단계만 보라.
   7.5초: 신청서 칸이 차오름 → 점이 넘어감 → 메일 체크 → 점 → 학원 사이트 체크. 커서 · 장면 전환 없음 */
.ap-flow{margin-top:var(--hero-gap-act);max-width:520px;border-radius:32px;background:var(--soft);padding:12px 0 4px}
.ap-svg{display:block;width:100%;height:auto}
.ap-box{transition:none}
.ap-lb{fill:var(--mut)}
.ap-dot{opacity:0}
.ap-t,.ap-ok{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
.ap-t1 .ap-box{animation:apBox1 7.5s ease infinite both}
.ap-t2 .ap-box{animation:apBox2 7.5s ease infinite both}
.ap-t3 .ap-box{animation:apBox3 7.5s ease infinite both}
.ap-lb1{animation:apLb1 7.5s ease infinite both}
.ap-lb2{animation:apLb2 7.5s ease infinite both}
.ap-lb3{animation:apLb3 7.5s ease infinite both}
.ap-f1{animation:apF1 7.5s cubic-bezier(.65,0,.35,1) infinite both}
.ap-f2{animation:apF2 7.5s cubic-bezier(.65,0,.35,1) infinite both}
.ap-f3{animation:apF3 7.5s cubic-bezier(.65,0,.35,1) infinite both}
.ap-dot1{animation:apDot1 7.5s cubic-bezier(.65,0,.35,1) infinite both}
.ap-dot2{animation:apDot2 7.5s cubic-bezier(.65,0,.35,1) infinite both}
.ap-ok2{animation:apOk2 7.5s var(--pop) infinite both}
.ap-ok3{animation:apOk3 7.5s var(--pop) infinite both}
}
@keyframes apBox1{0%,30%{stroke:#904ae8}34%,100%{stroke:#c9b3f5}}
@keyframes apBox2{0%,36%{stroke:#c9b3f5}40%,64%{stroke:#904ae8}68%,100%{stroke:#c9b3f5}}
@keyframes apBox3{0%,70%{stroke:#c9b3f5}74%,96%{stroke:#904ae8}100%{stroke:#c9b3f5}}
@keyframes apLb1{0%,30%{fill:var(--pri-d)}34%,100%{fill:var(--mut)}}
@keyframes apLb2{0%,36%{fill:var(--mut)}40%,64%{fill:var(--pri-d)}68%,100%{fill:var(--mut)}}
@keyframes apLb3{0%,70%{fill:var(--mut)}74%,96%{fill:var(--pri-d)}100%{fill:var(--mut)}}
@keyframes apF1{0%,3%{opacity:0;stroke-dasharray:.0001 1}4%{opacity:1;stroke-dasharray:.0001 1}11%,96%{opacity:1;stroke-dasharray:1 0}100%{opacity:0;stroke-dasharray:1 0}}
@keyframes apF2{0%,11%{opacity:0;stroke-dasharray:.0001 1}12%{opacity:1;stroke-dasharray:.0001 1}19%,96%{opacity:1;stroke-dasharray:1 0}100%{opacity:0;stroke-dasharray:1 0}}
@keyframes apF3{0%,19%{opacity:0;stroke-dasharray:.0001 1}20%{opacity:1;stroke-dasharray:.0001 1}26%,96%{opacity:1;stroke-dasharray:1 0}100%{opacity:0;stroke-dasharray:1 0}}
@keyframes apDot1{0%,30%{opacity:0;transform:none}31%{opacity:1;transform:none}38%{opacity:1;transform:translateX(58px)}40%,100%{opacity:0;transform:translateX(58px)}}
@keyframes apDot2{0%,64%{opacity:0;transform:none}65%{opacity:1;transform:none}72%{opacity:1;transform:translateX(58px)}74%,100%{opacity:0;transform:translateX(58px)}}
@keyframes apOk2{0%,44%{opacity:0;transform:scale(.4)}48%,96%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes apOk3{0%,78%{opacity:0;transform:scale(.4)}82%,96%{opacity:1;transform:none}100%{opacity:0;transform:none}}
/* 움직임 줄이기: 모두 연보라, 체크는 보임 */
@media (prefers-reduced-motion:reduce){.ap-ok{opacity:1}}
@media (prefers-reduced-motion:no-preference){.ap-ok{opacity:0}}
/* 요금 안내 · 상담 링크 */
.ap-side{display:flex;flex-direction:column;gap:12px;max-width:520px;margin-top:16px}
.ap-price{display:flex;flex-direction:column;gap:6px;padding:24px 26px;border-radius:24px;background:var(--soft)}
.ap-eb{font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--pri-d)}
.ap-price strong{font-size:24px;line-height:1.3;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.ap-price > span:not(.ap-eb){font-size:14px;line-height:1.5;color:var(--mut)}
.ap-link{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:6px;font-size:15px;font-weight:700;color:var(--pri-d);text-decoration:none}
.ap-link svg{transition:transform .2s var(--ease)}
.ap-link:hover svg{transform:translateX(5px)}
.ap-talk{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:24px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);text-decoration:none;transition:box-shadow .2s ease,background-color .2s ease}
.ap-talk:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ap-talk:active{background:var(--gray)}
/* 아이콘 = 떠 있는 [AI 상담] 버튼과 같은 모양(2026.11.05 사용자): 보라 동그라미 + 흰 말풍선 + 보라 점 셋. 읽는 화면이라 점은 깜빡이지 않는다 */
.ap-talk-ic{flex:none;width:44px;height:44px;border-radius:99px;background:var(--pri);color:#ffffff;display:grid;place-items:center;transition:background-color .2s ease}
.ap-talk-ic circle{fill:var(--pri);transition:fill .2s ease}
.ap-talk:hover .ap-talk-ic{background:var(--pri-d)}
.ap-talk:hover .ap-talk-ic circle{fill:var(--pri-d)}
.ap-talk-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-talk-tx strong{font-size:16px;line-height:1.4;font-weight:800}
.ap-talk-tx span{font-size:14px;line-height:1.5;color:var(--mut)}
.ap-talk-go{flex:none;color:var(--mut)}
:is(.ap-link,.ap-talk):focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* 폼 — 3장 카드 그대로(사용자), 흰 카드 + 1px 선 */
.au .cl-pt-apply{display:flex;flex-direction:column;gap:20px;min-width:0;margin:0}
.au .cl-pt-fieldset{display:flex;flex-direction:column;gap:22px;min-width:0;margin:0;padding:40px;border:0;border-radius:32px;background:#ffffff;box-shadow:inset 0 0 0 1px var(--line)}
.au .cl-pt-fieldset__legend{float:left;width:100%;display:flex;align-items:baseline;gap:10px;margin:0 0 2px;padding:0;font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.au .cl-pt-fieldset__legend + *{clear:both}
/* 01 · 02 · 03: 그라데이션 글자 → 보통 진보라 글자 */
.au .cl-pt-fieldset__legend .cl-pt-grad-text{background:none;-webkit-text-fill-color:currentColor;color:var(--pri-d);font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:16px;font-weight:800}
.au .cl-textarea{box-sizing:border-box;width:100%;min-height:132px;margin:0;padding:16px 22px;border:0;border-radius:24px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);font-family:'Pretendard Variable','Pretendard',sans-serif;font-size:16px;line-height:1.6;color:var(--ink);outline:none;resize:vertical;transition:box-shadow .2s ease}
.au .cl-textarea::placeholder{color:#7d7d84}
.au .cl-textarea:focus{box-shadow:0 0 0 2px var(--pri),0 0 0 7px rgba(144,74,232,.12)}
/* 도메인 뒤 .atedu.co.kr · 주소 칸 안 [주소 검색] */
.au .cl-pt-affix{position:relative;display:flex;align-items:center}
.au .cl-pt-affix .cl-input{flex:1;min-width:0}
.au .cl-pt-affix--suffix .cl-input{padding-right:132px}
.au .cl-pt-affix__suffix{position:absolute;right:22px;font-size:15px;font-weight:700;color:var(--pri-d);pointer-events:none}
.au .cl-pt-affix--btn .cl-input{padding-right:116px;cursor:pointer}
.au .cl-pt-affix--btn .cl-input[readonly]{background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);color:var(--ink)}
.au .cl-pt-affix--btn .cl-input[readonly]:focus{box-shadow:0 0 0 2px var(--pri),0 0 0 7px rgba(144,74,232,.12)}
.au .cl-pt-affix__btn{position:absolute;right:6px;height:40px;padding:0 16px;border:0;border-radius:99px;background:var(--ink);color:#ffffff;font-family:'Pretendard Variable','Pretendard',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .2s ease,transform .2s var(--ease)}
.au .cl-pt-affix__btn:hover{background:var(--pri)}
.au .cl-pt-affix__btn:active{transform:scale(.97)}
.au .cl-pt-affix__btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
/* 가입 승인 방식 — 고르기 카드(고르면 연보라 + 보라 선) */
.au .cl-pt-radio-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.au .cl-pt-radio-card{position:relative;display:flex;gap:12px;padding:18px 20px;border-radius:20px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease}
.au .cl-pt-radio-card:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.au .cl-pt-radio-card:has(input:checked){background:var(--tint);box-shadow:inset 0 0 0 2px var(--pri)}
.au .cl-pt-radio-card input{flex:none;width:20px;height:20px;margin:2px 0 0;border-radius:99px;background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input);-webkit-appearance:none;appearance:none;cursor:pointer}
.au .cl-pt-radio-card input:checked{box-shadow:inset 0 0 0 6px var(--pri)}
.au .cl-pt-radio-card input:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.au .cl-pt-radio-card__text{display:flex;flex-direction:column;gap:2px}
.au .cl-pt-radio-card__text strong{font-size:16px;font-weight:800;color:var(--ink)}
.au .cl-pt-radio-card__text span{font-size:13px;line-height:1.5;color:var(--mut)}
/* 아래 동의 + 보내기 — [취소] 는 뺐다(사용자) */
.au .cl-pt-submitbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px;border-radius:28px;background:var(--soft)}
.au .cl-pt-submitbar__consent{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px}
.au .cl-pt-submitbar__actions{display:flex;gap:8px;margin-left:auto}
.au .cl-pt-submitbar .cl-pt-btn--lg{height:56px;padding:0 32px;font-size:17px}

/* ---------- 좁은 화면 ---------- */
@media (max-width:1080px){
.au{padding:48px 0 96px}
.au > .wrap,.au--join > .wrap{grid-template-columns:minmax(0,1fr);gap:0;justify-items:center}
.au .cl-pt-auth__card,.au-main{max-width:560px}
.au-aside,.au-cloud{display:none}
/* 개설 신청: 왼쪽 묶음을 풀어(display:contents) 머리 글 → 폼 → 요금 · 상담 순서로. 흐름 모션은 숨김 */
.au--apply > .wrap{grid-template-columns:minmax(0,1fr);gap:24px}
.ap-aside{display:contents}
.ap-head{order:1;width:100%;max-width:560px}
.au--apply .cl-pt-apply{order:2;width:100%;max-width:560px}
.ap-side{order:3;width:100%;max-width:560px;margin-top:0}
.ap-flow{display:none}
.ap-head h1{margin-top:0}
.ap-head .sub{margin-top:16px;font-size:17px}
.au-flow{display:flex;align-items:center;gap:6px;width:100%;max-width:560px;margin:0 0 16px;overflow-x:auto;scrollbar-width:none;font-size:13px;font-weight:700;color:var(--mut);white-space:nowrap}
.au-flow::-webkit-scrollbar{display:none}
.au-flow span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 6px;border-radius:99px;background:var(--soft)}
.au-flow span b{display:grid;place-items:center;width:20px;height:20px;border-radius:99px;background:var(--ink);color:#ffffff;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:11px;font-weight:800}
.au-flow span.is-now{background:var(--tint);color:var(--pri-d)}
.au-flow span.is-now b{background:var(--pri)}
.au-flow i{flex:none;width:10px;height:1.5px;background:var(--line-input)}
}
@media (max-width:640px){
.au{padding:24px 0 72px}
.au .cl-pt-auth__card{padding:28px 22px 24px;border-radius:28px;gap:24px}
.au .cl-pt-auth__title{font-size:24px}
.au .cl-pt-auth__form{gap:20px}
.au .cl-inline-fields{flex-direction:column}
.au .cl-inline-fields .cl-input{flex:none}
.au .cl-pt-auth__inline-btn{width:100%}
.au .cl-pt-fieldset{padding:28px 22px;border-radius:28px;gap:20px}
.au .cl-pt-radio-cards{grid-template-columns:minmax(0,1fr)}
.au .cl-pt-submitbar{padding:20px}
.au .cl-pt-submitbar__actions{width:100%}
.au .cl-pt-submitbar__actions > *{flex:1}
/* 년도는 한 줄 전체(검색 칸 글자가 잘리지 않게), 월 · 일은 아래 두 칸 */
.au .cl-auth__birth{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.au .cl-auth__birth > .cl-selectbox:first-child{grid-column:1 / -1}
.au .cl-pt-terms{padding:4px 16px 6px}
.au .cl-pt-auth__join{padding:16px 18px}
.au-flow{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
.au *{transition:none !important}
.au .cl-pt-btn:active,.au .cl-pt-toggle label:active,.au .cl-pt-segment > a:active,.au .cl-input-group__btn:active{transform:none}
}

/* 회원가입 오른쪽 칸이 넓은 내용에 밀리지 않게 (join.css 에 있던 한 줄) */
.au--join .wrap > div:last-child{min-width:0}