/* 셀러닷컴 로그인·회원가입 v3 — 랜딩 v3(채널톡 문법)와 같은 글꼴·색·버튼. login.php · register.php 공용.
   ・ 왼쪽: 파스텔 오로라 패널(브랜드·한 줄 소개·실제 기능·떠다니는 칩·오리) — 화이트라벨은 브랜드 이름·소개만.
   ・ 오른쪽: 흰 카드 폼. 960px 이하는 패널을 얇은 머리띠로 줄이고 폼만.
   ・ 다크모드: html[data-theme="dark"] (theme.js · 하단 토글 버튼과 같은 방식). 색은 전부 아래 변수로.
   ・ 회원가입 스크립트가 쓰는 클래스(feedback-text·input-success·verify-input-group·term-modal 등)는 이름을 그대로 둔다. */

.la{
  --ink:#111115;--t2:#4D4D57;--t3:#8A8A94;--line:rgba(17,17,21,.08);--line2:rgba(17,17,21,.14);
  --bg:#fff;--bg2:#F5F5F7;--card:#fff;--input:#fff;
  --brand:#6B6198;--brand-t:rgba(107,97,152,.12);
  --red:oklch(.56 .19 25);--red-t:oklch(.63 .18 22 / .12);
  --green:oklch(.5 .12 155);--green-t:oklch(.65 .17 150 / .16);
  --orange:oklch(.56 .15 55);
  --btn:#111115;--btn-h:#2C2C33;--btn-ink:#fff;
  --sh1:0 0 0 1px rgba(17,17,21,.06),0 1px 2px rgba(17,17,21,.05);
  --sh2:0 0 0 1px rgba(17,17,21,.05),0 8px 24px rgba(17,17,21,.08);
  --sh3:0 0 0 1px rgba(17,17,21,.05),0 24px 60px rgba(46,36,100,.18);
  --aurora:radial-gradient(60% 55% at 8% 8%,#F6CCE6 0%,rgba(246,204,230,0) 62%),radial-gradient(55% 50% at 96% 12%,#C8D8FF 0%,rgba(200,216,255,0) 62%),radial-gradient(75% 60% at 50% 100%,#D6CBF5 0%,rgba(214,203,245,0) 66%),linear-gradient(160deg,#F2EDFF 0%,#EDF1FF 100%);
  --e:cubic-bezier(.3,0,0,1);--e-out:cubic-bezier(.23,1,.32,1);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;
  background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  letter-spacing:-.01em;word-break:keep-all;-webkit-font-smoothing:antialiased;
}
html[data-theme="dark"] .la{
  --ink:#F0F3F6;--t2:#B4BAC4;--t3:#8A8F9C;--line:rgba(240,243,246,.08);--line2:rgba(240,243,246,.16);
  --bg:#0D1117;--bg2:#21262D;--card:#161B22;--input:#0D1117;
  --brand:#A99FE0;--brand-t:rgba(169,159,224,.16);
  --red:oklch(.72 .16 25);--red-t:oklch(.63 .18 22 / .18);
  --green:oklch(.75 .14 155);--green-t:oklch(.65 .17 150 / .2);
  --orange:oklch(.78 .13 70);
  --btn:#F0F3F6;--btn-h:#FFFFFF;--btn-ink:#0D1117;
  --sh1:0 0 0 1px rgba(240,243,246,.08);
  --sh2:0 0 0 1px rgba(240,243,246,.08),0 8px 24px rgba(0,0,0,.35);
  --sh3:0 0 0 1px rgba(240,243,246,.08),0 24px 60px rgba(0,0,0,.45);
  --aurora:radial-gradient(60% 55% at 8% 8%,rgba(160,80,140,.38) 0%,rgba(160,80,140,0) 62%),radial-gradient(55% 50% at 96% 12%,rgba(70,100,190,.38) 0%,rgba(70,100,190,0) 62%),radial-gradient(75% 60% at 50% 100%,rgba(107,97,152,.45) 0%,rgba(107,97,152,0) 66%),linear-gradient(160deg,#17142A 0%,#111827 100%);
}
html,body{margin:0}
body{background:#fff}
html[data-theme="dark"] body{background:#0D1117}
.la a{color:var(--brand);text-decoration:none}

/* ── 왼쪽 패널 ── */
.la-side{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;justify-content:space-between;gap:40px;height:100vh;box-sizing:border-box;padding:40px 56px 44px;background:var(--aurora);overflow:hidden}
.la-brand{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)!important}
.la-brand img{display:block;width:30px;height:30px;border-radius:8px;object-fit:contain}
.la-copy{position:relative;z-index:2;max-width:480px}
.la-kick{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.7);font-size:13px;font-weight:600;color:var(--brand)}
html[data-theme="dark"] .la-kick{background:rgba(255,255,255,.08)}
.la-h1{margin:18px 0 0;font-size:clamp(30px,3.3vw,42px);line-height:1.32;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.la-lead{margin:16px 0 0;font-size:16px;line-height:1.7;color:var(--t2);text-wrap:pretty}
.la-feats{display:grid;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.la-feat{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink)}
.la-ck{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.75)}
html[data-theme="dark"] .la-ck{background:rgba(255,255,255,.1)}
.la-ck::after{content:"";position:absolute;left:7px;top:6px;width:7px;height:4px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.la-steps{display:grid;gap:10px;margin:26px 0 0;padding:0;list-style:none;counter-reset:la}
.la-step{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--ink)}
.la-step::before{counter-increment:la;content:counter(la);display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--btn);font-size:13px;font-weight:700;color:var(--btn-ink)}
.la-foot{position:relative;z-index:2;font-size:12px;color:var(--t3)}
.la-side::after{content:"";display:block;height:17px} /* [2026-10-11] © 줄을 지웠어도 소개 글이 예전처럼 가운데에 오게 자리만 남김 */

/* 떠다니는 칩·오리(랜딩과 같은 움직임 — 둥실, 마우스에 살짝) */
.la-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.la-fl{position:absolute;will-change:transform}
.la-chip{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border-radius:999px;background:var(--card);box-shadow:var(--sh2);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;animation:la-float 7s ease-in-out infinite}
.la-chip.f2{animation-duration:8.4s;animation-delay:-2s}
.la-chip.f3{animation-duration:6.6s;animation-delay:-4s}
.la-cv{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;background:var(--brand-t);color:var(--brand)}
.la-cv.red{background:var(--red-t);color:var(--red)}
.la-dot{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:oklch(.68 .17 150)}
.la-pop{animation:la-pop 760ms var(--e-out) backwards}
.la-pop.d1{animation-delay:.35s}.la-pop.d2{animation-delay:.5s}.la-pop.d3{animation-delay:.65s}
@keyframes la-pop{from{opacity:0;transform:translate3d(0,24px,0) scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes la-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
.la-f1{right:8%;top:16%}.la-f2{right:14%;top:31%}.la-f3{left:56px;bottom:150px}
.la-duck{position:absolute;right:7%;bottom:6%;width:min(220px,30%);pointer-events:auto;cursor:pointer;margin:0;padding:0;border:0;background:none;-webkit-tap-highlight-color:transparent}
.la-duck img,.la-duck .la-duck-img{display:block;width:100%;height:auto;transform-origin:50% 90%;filter:drop-shadow(0 22px 28px rgba(46,36,100,.24));animation:la-bob 4.6s ease-in-out infinite;pointer-events:none}
@keyframes la-bob{0%,100%{transform:translate3d(0,0,0) rotate(-1.4deg)}50%{transform:translate3d(0,-12px,0) rotate(1.4deg)}}
.la-bubble{position:absolute;right:66%;top:-10px;padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--btn);font-size:13px;font-weight:600;color:var(--btn-ink);white-space:nowrap;opacity:0;transform:translate3d(8px,8px,0) scale(.94);transform-origin:100% 100%;transition:opacity 200ms var(--e-out),transform 280ms var(--e-out);pointer-events:none}
.la-duck.talk .la-bubble{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.la-duck:hover .la-bubble{opacity:1;transform:none}}

/* ── 오른쪽 폼 ── */
.la-main{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:100vh;padding:48px 24px}
.la-box{width:min(440px,100%);animation:la-up 700ms var(--e-out) .1s backwards}
.la-box.wide{width:min(520px,100%)}
@keyframes la-up{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.la-help{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 16px;border-radius:16px;background:var(--bg2);font-size:14px;font-weight:600;color:var(--ink)!important;transition:background-color 150ms var(--e)}
.la-help small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--t3)}
.la-help-go{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:50%;background:#FEE500;color:#191600}
.la-help-go svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.la-help:hover{background:var(--brand-t)}}
.la-card{padding:36px 32px 30px;border-radius:24px;background:var(--card);box-shadow:var(--sh2)}
.la-head{margin-bottom:26px;text-align:center}
.la-head img{display:block;width:48px;height:48px;margin:0 auto 14px;border-radius:14px;object-fit:contain}
.la-title{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.la-sub{margin:6px 0 0;font-size:14px;color:var(--t3)}

.la-msg{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;padding:13px 15px;border-radius:14px;font-size:14px;font-weight:500;line-height:1.55}
.la-msg.err{background:var(--red-t);color:var(--red)}
.la-msg.ok{background:var(--green-t);color:var(--green)}
.la-msg i{margin-top:3px;flex:none}
.la-openchat{display:flex;align-items:center;gap:10px;margin:-6px 0 18px;padding:12px 14px;border-radius:14px;background:rgba(254,229,0,.16);text-decoration:none;color:var(--ink)!important}
.la-openchat b{display:block;font-size:13px}
.la-openchat small{display:block;margin-top:2px;font-size:11px;color:var(--t3)}
.la-openchat .la-help-go{width:36px;height:36px;border-radius:10px}

.la-field{display:block;margin-bottom:16px}
.la-label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink)}
.la-label .opt{font-weight:400;color:var(--t3)}
.la-req{margin-left:2px;color:var(--red)}
.la-input,
.la input[type="text"],.la input[type="password"],.la input[type="email"],.la input[type="tel"],.la select{
  display:block;box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:0;border-radius:12px;
  background:var(--input);box-shadow:inset 0 0 0 1px var(--line2);font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);outline:none;
  transition:box-shadow 150ms var(--e);-webkit-appearance:none;appearance:none}
.la input::placeholder{color:var(--t3);font-weight:400}
.la input:focus,.la select:focus{box-shadow:inset 0 0 0 1.5px var(--brand),0 0 0 4px var(--brand-t)}
.la input:disabled,.la input[readonly]{background:var(--bg2);color:var(--t2)}
.la select{padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238A8A94' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.la select:invalid{color:var(--t3);font-weight:400}
.la select option{color:#111115;background:#fff}
.la .input-success{box-shadow:inset 0 0 0 1.5px var(--green)!important}
.la .input-error{box-shadow:inset 0 0 0 1.5px var(--red),0 0 0 4px var(--red-t)!important}
.la .feedback-text{display:block;margin-top:6px;font-size:12px;line-height:1.5}
.la .text-success{color:var(--green)}
.la .text-error{color:var(--red)}

.la-btn{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;height:52px;padding:0 22px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-ink)!important;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer;text-decoration:none;transition:background-color 150ms var(--e),transform 140ms var(--e-out),opacity 150ms var(--e)}
.la-btn:active{transform:scale(.98)}
.la-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){.la-btn:not(:disabled):hover{background:var(--btn-h)}}
.la-btn.sm{width:auto;height:48px;padding:0 16px;font-size:14px;white-space:nowrap}
.la-kakao{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;height:52px;margin-top:10px;border-radius:999px;background:#FEE500;color:#191600!important;font-size:16px;font-weight:600;text-decoration:none;transition:filter 150ms var(--e),transform 140ms var(--e-out)}
.la-kakao svg{display:block;width:20px;height:20px;flex:none}
.la-kakao:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.la-kakao:hover{filter:brightness(.97)}}
.la-divider{display:flex;align-items:center;gap:14px;margin:22px 0 14px;font-size:13px;color:var(--t3)}
.la-divider::before,.la-divider::after{content:"";flex:1;height:1px;background:var(--line2)}
.la-links{text-align:center;font-size:14px;color:var(--t2)}
.la-links a{font-weight:700}
.la-links-row{display:flex;justify-content:center;gap:10px;margin-top:12px;font-size:13px}
.la-links-row a{font-weight:500;color:var(--t2)!important}
.la-links-row span{color:var(--line2)}
.la-signup{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:48px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:15px;font-weight:600;color:var(--ink)!important;transition:background-color 150ms var(--e)}
@media (hover:hover) and (pointer:fine){.la-signup:hover{background:var(--bg2)}}

/* ── 회원가입 전용 ── */
.la-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.la-sec{margin:22px 0 12px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;font-weight:700;color:var(--t3)}
.la-sec.first{margin-top:4px;padding-top:0;border-top:0}
.la-pw{position:relative}
.la .la-pw input{padding-right:46px;text-overflow:ellipsis}
.la .toggle-pw{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:36px;height:36px;transform:translateY(-50%);border-radius:10px;color:var(--t3);cursor:pointer}
@media (hover:hover) and (pointer:fine){.la .toggle-pw:hover{background:var(--bg2);color:var(--ink)}}
.la .phone-input-group{display:flex;gap:8px}
.la .phone-input-group input{flex:1;min-width:0}
.la .verify-input-group{display:none;gap:8px;margin-top:8px}
.la .verify-input-group.active{display:flex}
.la .verify-input-group input{flex:1;min-width:0}
.la .timer{margin-top:8px;font-size:12px;color:var(--orange)}
.la .timer:empty{display:none}
.la .timer.expired{color:var(--red)}
.la .verify-status{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px}
.la .verify-status:empty{display:none}
.la .verify-status.success{color:var(--green)}
.la .verify-status.error{color:var(--red)}
.la .phone-verified-badge{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:999px;background:var(--green-t);font-size:12px;font-weight:700;color:var(--green)}
.la .referrer-info{margin-top:6px;font-size:12px;color:var(--t3)}
.la .referrer-info:empty{display:none}
.la .referrer-checking{color:var(--orange)}
.la .referrer-valid{color:var(--green)}
.la .referrer-invalid{color:var(--red)}
.la-agree{margin-top:20px;padding:6px 16px;border-radius:16px;background:var(--bg2)}
.la-agree-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:14px;color:var(--t2)}
.la-agree-item+.la-agree-item{border-top:1px solid var(--line)}
.la-agree-item label{display:flex;align-items:center;gap:10px;margin:0;font-weight:500;cursor:pointer}
.la-agree-item.all label{font-weight:700;color:var(--ink)}
.la-agree-item input[type="checkbox"]{flex:none;width:18px;height:18px;margin:0;accent-color:#111115;cursor:pointer}
html[data-theme="dark"] .la-agree-item input[type="checkbox"]{accent-color:#F0F3F6}
.la-term-link{flex:none;padding:4px 2px;font-size:12px;color:var(--t3);text-decoration:underline;cursor:pointer}
.la-submit{margin-top:20px}
.la-bot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* [2026-10-11] 회원가입 카드 여백 줄이기("불필요하게 크다") — 회원가입(.la-box.wide)에만. 카드 키 약 1,320px → 한 화면 안으로 */
.la-box.wide .la-card{padding:22px 28px 18px}
.la-main:has(.la-box.wide){padding-top:24px;padding-bottom:24px}
.la-box.wide .la-head{margin-bottom:12px}
.la-box.wide .la-head img{display:none}
.la-box.wide .la-title{font-size:22px}
.la-box.wide .la-sub{margin-top:4px;font-size:13px}
.la-box.wide .la-sec{margin:10px 0 7px;padding-top:10px;font-size:12px}
.la-box.wide .la-sec.first{margin-top:0;padding-top:0}
.la-box.wide .la-row{gap:10px}
.la-box.wide .la-field{margin-bottom:9px}
.la-box.wide .la-label{margin-bottom:5px;font-size:13px}
.la-box.wide input[type="text"],.la-box.wide input[type="password"],.la-box.wide input[type="email"],.la-box.wide input[type="tel"],.la-box.wide select{height:42px;font-size:14px;border-radius:11px}
.la-box.wide .la-btn.sm{height:42px;font-size:13px}
.la-box.wide .toggle-pw{width:32px;height:32px}
.la-box.wide .feedback-text:empty{display:none}
.la-box.wide .feedback-text{margin-top:4px}
.la-box.wide .la-agree{margin-top:12px;padding:2px 14px;border-radius:14px}
.la-box.wide .la-agree-item{min-height:31px;font-size:13px}
.la-box.wide .la-agree-item input[type="checkbox"]{width:16px;height:16px}
.la-box.wide .la-submit{height:46px;margin-top:12px;font-size:15px}
.la-have{margin:12px 0 0;font-size:13px}

/* 약관 보기 창(회원가입 스크립트의 #termModal · .active 그대로) */
.term-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(17,17,21,.45)}
.term-modal.active{display:flex}
.term-content{box-sizing:border-box;width:min(520px,100%);max-height:80vh;overflow:auto;padding:24px;border-radius:20px;background:var(--card,#fff);box-shadow:var(--sh3);color:var(--ink,#111115)}
.term-header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:18px;font-weight:700}
.term-close{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;font-size:22px;color:var(--t3,#8A8A94);cursor:pointer}
.term-body{margin-top:12px;font-size:14px;line-height:1.75;color:var(--t2,#4D4D57);white-space:pre-line}
/* [2026-10-12] 보기 창 — 개인정보·마케팅 동의 요약(목적·항목·보유기간·거부 권리) + 이용약관 전문(창 안 틀) */
.term-body .term-sum{margin:0;white-space:normal}
.term-sum dt{margin-top:14px;font-size:13px;font-weight:700;color:var(--ink,#111115)}
.term-sum dt:first-child{margin-top:0}
.term-sum dd{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--t2,#4D4D57)}
.term-more{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--t2,#4D4D57);text-decoration:underline;text-underline-offset:3px;white-space:normal}
.term-frame{display:block;width:100%;height:min(56vh,560px);border:0;border-radius:12px;background:var(--card,#fff)}
/* [2026-10-12] 보기 창은 .la 밖에 있어 위 색·글꼴 변수가 안 닿았다(다크 모드에서도 흰 창·기본 글꼴, 단어 중간 줄바꿈) — .la 와 같은 값을 창에도 */
.term-modal{--ink:#111115;--t2:#4D4D57;--t3:#8A8A94;--card:#fff;--btn:#111115;--btn-ink:#fff;--sh3:0 0 0 1px rgba(17,17,21,.05),0 24px 60px rgba(46,36,100,.18);font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;letter-spacing:-.01em;word-break:keep-all;-webkit-font-smoothing:antialiased}
html[data-theme="dark"] .term-modal{--ink:#F0F3F6;--t2:#B4BAC4;--t3:#8A8F9C;--card:#161B22;--btn:#F0F3F6;--btn-ink:#0D1117;--sh3:0 0 0 1px rgba(240,243,246,.08),0 24px 60px rgba(0,0,0,.45)}
.term-body{overflow-wrap:anywhere}
.term-content .btn{height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--btn,#111115);color:var(--btn-ink,#fff);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}

@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ── 960px 이하: 패널은 얇은 머리띠, 폼만 ── */
@media (max-width:960px){
  .la{grid-template-columns:1fr}
  .la-side{position:relative;height:auto;padding:16px 20px;gap:0}
  .la-copy,.la-foot,.la-side::after{display:none}
  .la-main{min-height:0;align-items:flex-start;padding:24px 16px 96px}
  .la-card{padding:28px 20px 24px;border-radius:20px}
  .la-row{grid-template-columns:1fr;gap:0}
  .la-box.wide .la-card{padding:22px 18px 20px}
  .la-box.wide .la-row{gap:0}
}

/* [2026-10-11] 휴대폰·태블릿에서도 오리와 떠다니는 칩을 보인다(예전엔 숨김). 머리띠를 조금 키워
   왼쪽엔 로고 아래 칩 2개, 오른쪽엔 오리. 오리는 머리띠 아래 선 뒤에서 몸 아래쪽이 살짝 가려진 채 서 있다
   (둥실거려도 잘린 면이 안 보이게 20px 묻음). 내용은 폼 칸 너비(440px, 회원가입 520px)에 맞춰 가운데로.
   오리가 말하는 동안은 칩을 잠깐 숨겨 말풍선과 안 겹치게. 마우스 따라 움직임은 이 크기에선 끈다. */
@media (max-width:960px){
  .la{align-content:start} /* 태블릿에서 머리띠와 폼 사이가 크게 벌어지던 것(남는 높이를 그리드 줄이 나눠 가짐) */
  .la-side{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:12px;padding-left:max(20px,calc(50% - 220px));padding-right:max(20px,calc(50% - 220px))}
  .la:has(.la-box.wide) .la-side{padding-left:max(20px,calc(50% - 260px));padding-right:max(20px,calc(50% - 260px))}
  .la-brand{grid-column:1;grid-row:1}
  .la-stage{position:relative;inset:auto;grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px;transition:opacity 200ms var(--e-out)}
  .la-fl{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none!important}
  .la-f3{display:none}
  .la-chip{height:36px;padding:0 13px;gap:7px;font-size:13px}
  .la-cv{height:22px;padding:0 7px;font-size:11px}
  .la-duck{display:block;position:relative;right:auto;bottom:auto;grid-column:2;grid-row:1 / span 2;align-self:end;width:108px;margin:40px 0 -36px;transform:none!important}
  .la-bubble{right:86%;top:20%;width:max-content;max-width:min(210px,calc(100vw - 176px));white-space:normal;text-wrap:balance;font-size:12px;line-height:1.45;text-align:left}
  .la-side:has(.la-duck.talk) .la-stage{opacity:0}
}

/* 키가 낮은 창: 장식은 빼고 글만 */
@media (min-width:961px) and (max-height:640px){.la-stage,.la-duck{display:none}}

@media (prefers-reduced-motion:reduce){
  .la-chip,.la-duck img,.la-duck .la-duck-img,.la-pop,.la-box{animation:none}
}

/* 하단 공통 버튼(footer.php 의 테마 토글·스크롤)이 쓰는 변수 — 예전엔 common.css/tokens.css 가 줬다 */
html{--card-bg:#fff;--border:#e5e7eb;--text-secondary:#666;--primary:#6B6198}
html[data-theme="dark"]{--card-bg:#161B22;--border:#30363d;--text-secondary:#B4BAC4;--primary:#A99FE0}

/* 카카오 가입 마무리 — 취소 링크 */
.la-cancel{display:block;margin-top:16px;text-align:center;font-size:13px;color:var(--t3)!important}

/* ── 계정 찾기(find_account.php) — 스크립트가 쓰는 클래스 이름 그대로 ── */
.la .tab-nav{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:22px;padding:4px;border-radius:999px;background:var(--bg2)}
.la .tab-btn{height:42px;border:0;border-radius:999px;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--t3);cursor:pointer;transition:background-color 150ms var(--e),color 150ms var(--e)}
.la .tab-btn i{margin-right:6px;font-size:13px}
.la .tab-btn.active{background:var(--card);box-shadow:var(--sh1);color:var(--ink)}
html[data-theme="dark"] .la .tab-btn.active{background:#30363D}
.la .tab-panel{display:none}
.la .tab-panel.active{display:block}
.la .sms-info{margin-top:6px;font-size:12px;color:var(--t3)}
.la .result-card{padding:28px 20px;border-radius:18px;background:var(--bg2);text-align:center}
.la .result-icon{font-size:40px;margin-bottom:12px}
.la .result-icon.success{color:var(--green)}
.la .result-label{font-size:14px;font-weight:500;color:var(--t2)}
.la .result-value{margin-top:6px;font-size:26px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.la .result-sub{margin-top:8px;font-size:12px;color:var(--t3)}
.la .result-actions{display:flex;gap:10px;margin-top:16px}
.la .result-actions>a{flex:1}
.la-back{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--t2)!important}

/* [2026-10-11] 셀러닷컴 오리 — 원래 오리 그림(image/duck-sprite.webp) 그대로, 눈만 움직인다. 움직임 스크립트는 js/duck.js */
.sc-duck{display:block;overflow:visible}
.sc-duck .dk-eye,.sc-duck .dk-shut{transform-box:fill-box}
.sc-duck .dk-eye{transform-origin:50% 50%;transition:transform 90ms ease,opacity 120ms ease}
.sc-duck .dk-shut{opacity:0;transition:opacity 120ms ease}
.sc-duck.dk-blink .dk-eye{transform:scaleY(.1)}
.sc-duck.dk-quack .dk-eye{opacity:0}
.sc-duck.dk-quack .dk-shut{opacity:1}
/* [2026-10-11] 웃는 눈(^^)은 오리를 눌렀을 때만. 비밀번호 칠 때는 웃지 않고 눈만 감는다(깜빡임을 멈춘 모양) */
.sc-duck.dk-shy .dk-eye{transform:scaleY(.1)}

/* ── [2026-10-11] 화면 요소 모션 — transitions.dev 무료 레시피(https://transitions.dev)를 옮김. 움직임 줄이기면 끈다 ── */
/* 계정 찾기 탭: 흰 알약이 다른 탭으로 미끄러져 간다(Tabs sliding). :has 를 못 쓰는 브라우저는 예전처럼 */
@supports selector(:has(*)){
  .la .tab-nav::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--card);box-shadow:var(--sh1);transform:translate3d(0,0,0);transition:transform 250ms cubic-bezier(.22,1,.36,1);z-index:0}
  html[data-theme="dark"] .la .tab-nav::before{background:#30363D}
  .la .tab-nav:has(.tab-btn:nth-child(2).active)::before{transform:translate3d(100%,0,0)}
  .la .tab-btn{position:relative;z-index:1}
  .la .tab-btn.active,html[data-theme="dark"] .la .tab-btn.active{background:transparent;box-shadow:none}
}
/* 회원가입 약관 체크: 칸이 채워지고 체크 선이 그려진다(Checkbox check). 진짜 체크박스는 투명하게 그 위에(스크립트·필수 확인 그대로) */
.la-agree-item label{position:relative}
.la-agree-item input[type="checkbox"],.la-box.wide .la-agree-item input[type="checkbox"]{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0;opacity:0;cursor:pointer}
.la-cbx{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:5px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line2);transition:background-color 150ms cubic-bezier(.22,1,.36,1),box-shadow 150ms cubic-bezier(.22,1,.36,1);pointer-events:none}
.la-box.wide .la-cbx{width:16px;height:16px;border-radius:4.5px}
.la-cbx svg{display:block;width:10px;height:10px;overflow:visible}
.la-cbx path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:15;stroke-dashoffset:15;transition:stroke-dashoffset 150ms cubic-bezier(.22,1,.36,1)}
.la-agree-item input:checked+.la-cbx{background:#111115;box-shadow:inset 0 0 0 1.5px #111115}
.la-agree-item input:checked+.la-cbx path{stroke-dashoffset:0;transition:stroke-dashoffset 350ms cubic-bezier(.22,1,.36,1)}
.la-agree-item input:focus-visible+.la-cbx{box-shadow:inset 0 0 0 1.5px var(--brand),0 0 0 3px var(--brand-t)}
html[data-theme="dark"] .la-agree-item input:checked+.la-cbx{background:#F0F3F6;box-shadow:inset 0 0 0 1.5px #F0F3F6}
html[data-theme="dark"] .la-cbx path{stroke:#0D1117}
@media (prefers-reduced-motion:reduce){
  .la .tab-nav::before,.la-cbx,.la-cbx path{transition:none!important}
}
/* [2026-10-11] 로그인 실패 등 오류 안내가 뜰 때 한 번 짧게 흔들림(transitions.dev Error state shake), 도움말 화살표는 올리면 살짝 앞으로 */
.la .la-msg.err{animation:la-err-shake 280ms linear 380ms}
@keyframes la-err-shake{
  0%{transform:translateX(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  28.57%{transform:translateX(6px);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  57.14%{transform:translateX(-6px);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  78.57%{transform:translateX(4px);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  100%{transform:translateX(0)}
}
.la-help-go svg{transition:transform 350ms cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){.la-help:hover .la-help-go svg{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.la .la-msg.err{animation:none}.la-help-go svg{transition:none}}

/* [2026-10-11] 셀러닷컴 글씨 로고(sc_wordmark): 글자 크기에 맞춘 높이, 색은 글자색. 로그인 카드 제목은 가운데 */
.sc-wordmark{display:block;flex:none;width:auto;height:.86em;overflow:visible}
.la-title .sc-wordmark{margin:0 auto}