/*
 * 로그인(index.html, 반응형 한 장) — beta2: 시안 A 색 · B 모양(큰 라운드 카드·pill 버튼) · 사용성 원칙(큰 글자·큰 입력칸).
 * 계약: team/contracts/beta2-ui.md §9. 다크 지원(index.html 은 html.dark-ok) — 하드코딩 색 없음.
 * 로고(멀티 브랜드 1단계, 2026-10-16): 열린 주소의 브랜드 — 정사각 로고(.lk-mark) 위 · 가로 로고(.lk-logo) 아래 · 한 줄 소개.
 *   (예전 세로 로고 한 장 140×180 을 브랜드 파일 두 장으로 — js/brand.js.) 창이 낮으면 정사각 로고만 줄인다 — 세로 스크롤 없음.
 *   카드 아래 = 아래 문구(.brand-foot, ui.css·js/brand.js).
 */
body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
body > div{width:100%;max-width:420px;}
.brand{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;}
.brand .lk-mark{display:block;width:auto;aspect-ratio:1/1;
  height:clamp(64px, calc(100vh - 610px), 104px);
  height:clamp(64px, calc(100dvh - 610px), 104px);}
/* 가로 로고 — 높이 고정, 긴 이름이면 카드 폭 안에서 비율대로 줄어든다(ui.css img[src^="/brand/logo"]) */
.brand .lk-logo{display:block;height:30px;width:auto;margin-top:12px;--logo-max:100%;object-position:center;}
.brand .su-logo{display:flex;flex-direction:column;align-items:center;}
body > div > .brand-foot{padding:16px 0 0;}
/* 브랜드 한 줄 소개(brand.json tagline, 비면 숨김) — 눈에 덜 띄게(작은 보통 굵기, 14px 하한) */
.brand p{margin:10px 0 0;font-size:var(--t-xs);font-weight:var(--w-reg);color:var(--ink-3);letter-spacing:.02em;}
.card{width:100%;background:var(--panel);border:0;border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden;}
.card-h{padding:26px 28px 2px;}
.card-t{margin:0;font-size:var(--t-xl);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-0.015em;}
/* (2026-10-16 멀티 브랜드 6-2) 제목 아래 한 줄 — "다른 매장 회원도 같은 아이디로 로그인할 수 있어요"(좁은 폰은 두 줄, 글자 줄바꿈은 낱말 단위) */
.card-s{margin:6px 0 0;font-size:var(--t-sm);font-weight:var(--w-reg);color:var(--ink-2);line-height:1.45;word-break:keep-all;text-wrap:balance;}
.card-b{padding:16px 28px 24px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);margin-bottom:7px;}
.input{width:100%;height:52px;padding:0 16px;border:1.5px solid var(--line-3);border-radius:var(--r-md);
  background:var(--panel);font-size:17px;font-family:inherit;color:var(--ink);outline:none;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);}
.input::placeholder{color:var(--ink-4);}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring);}
.btn{height:var(--ctl-lg);border-radius:var(--r-btn);border:0;background:var(--fill);
  font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;}
.btn.pri{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-brand);width:100%;margin-top:6px;}
.btn.pri:hover{background:var(--accent-hover);}
.btn.pri:active{background:var(--accent-press);}
.btn:disabled{opacity:.7;cursor:not-allowed;}
.hint{margin:16px 0 0;text-align:center;font-size:var(--t-xs);color:var(--ink-3);line-height:1.55;}
.hint .m-br{display:none;}
.error{margin:12px 0 0;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--dang);text-align:center;}
.success{padding:2px 0;text-align:center;}
.success-msg{margin:0;font-size:var(--t-md);color:var(--ink-2);line-height:1.6;}
:root.dark-ok[data-theme=dark] .brand .lk-mark{filter:brightness(1.08);}

/* 회원 가입 진입 — "처음이신가요? [회원 가입]" (계약 team/contracts/signup.md §4). 로그인 버튼보다 한 단계 약하게(채움 버튼). */
.su-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.su-q{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);}
.btn.su-go{height:var(--ctl);padding:0 22px;flex:0 0 auto;font-size:var(--t-md);text-decoration:none;background:var(--fill);color:var(--ink);box-shadow:none;}
.btn.su-go:hover{background:var(--fill-2);}
.btn.su-go:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}

/* 낮은 데스크톱 창(1280×720 등) — 로고 140×180 은 그대로 두고 여백만 줄여 회원 가입 줄까지 스크롤 없이 */
@media (min-width:641px) and (max-height:800px){
  body{padding-block:10px;}
  .brand{margin-bottom:12px;}
  .brand p{margin-top:6px;}
  .card-h{padding-top:20px;}
  .card-b{padding-top:12px;padding-bottom:18px;}
  .field{margin-bottom:10px;}
  .su-cta{margin-top:12px;padding-top:12px;}
  .hint{margin-top:10px;}
  /* (2026-10-16) 제목 아래 한 줄(.card-s)만큼 — 1280×720 에서도 스크롤 없이 */
  .brand{margin-bottom:8px;}
  .card-h{padding-top:16px;}
  .card-s{margin-top:3px;}
  /* 로그인 오류 문구가 뜨면 그만큼 정사각 로고를 줄여(하한 64px) 1280×720 에서도 스크롤 없이 */
  body:has(#login-error:not([hidden])) .brand .lk-mark{
    height:clamp(64px, calc(100vh - 650px), 104px);
    height:clamp(64px, calc(100dvh - 650px), 104px);}
}

/*
 * 모바일(세로 폰 ≤640px, 가로 폰 높이 ≤500px) — 화면 높이(100dvh)에 맞추고 정사각 로고만 줄인다(하한 48px, 빠듯한 폰은 숨김). 입력 16px↑(iOS 확대 방지).
 * (2026-10-12) 회원 가입 줄(.su-cta) 추가로 빼는 높이를 다시 잼. (2026-10-16 브랜드) 가로 로고·아래 문구만큼 다시 잼: 보통 660 · 오류 시 695.
 */
@media (max-width:640px), (max-height:500px){
  body{min-height:100vh;min-height:100dvh;padding:20px 20px;flex-direction:column;}
  body > div{width:100%;max-width:420px;}
  .brand{margin-bottom:18px;}
  .brand .lk-mark{height:clamp(48px, calc(100vh - 660px), 96px);
    height:clamp(48px, calc(100dvh - 660px), 96px);}
  .brand .lk-logo{height:26px;margin-top:10px;}
  body > div > .brand-foot{padding-top:14px;}
  .brand p{margin-top:8px;font-size:var(--t-xs);text-align:center;}
  .card{box-shadow:var(--sh-1);}
  .card-h{padding:22px 22px 2px;}
  .card-b{padding:14px 22px 22px;}
  .field label{font-size:var(--t-md);}
  .input{height:52px;font-size:17px;}
  .hint{margin-top:14px;}
  .hint .m-br{display:inline;}
}
/* 세로 공간이 빠듯한 폰(주소창 포함 iPhone SE 등) — 여백만 한 단계 줄인다 */
@media (max-width:640px) and (max-height:700px), (max-height:500px){
  body{padding-block:12px;}
  .brand{margin-bottom:12px;}
  .brand .lk-mark{display:none;}   /* 낮은 폰 — 정사각 로고는 빼고 가로 로고만(브랜드는 그대로 보인다) */
  .brand .lk-logo{margin-top:0;}
  body > div > .brand-foot{padding-top:10px;}
  .brand p{margin-top:6px;}
  .card-h{padding-top:16px;}
  .card-b{padding-top:10px;padding-bottom:16px;}
  .field{margin-bottom:10px;}
  .input{height:50px;}
  .btn{height:52px;}
  .hint{margin-top:10px;}
  /* (2026-10-16) 제목 아래 한 줄(.card-s, 좁은 폰은 두 줄)만큼 — 한 줄 소개는 빼고(로고는 그대로) 여백을 조금 더 줄인다.
     로그인 오류 문구가 떠도 360×640 에서 스크롤 없이. */
  .brand p{display:none;}
  .card-s{margin-top:4px;font-size:var(--t-xs);}
  .field{margin-bottom:8px;}
  .su-cta{margin-top:10px;padding-top:10px;}
}
/* (2026-10-16) 아주 낮은 폰(320×568 iPhone SE 1세대 등) — 여백만 한 단계 더(입력·버튼 크기는 그대로) */
@media (max-width:640px) and (max-height:600px){
  body{padding-block:8px;}
  .brand{margin-bottom:8px;}
  .card-h{padding-top:12px;}
  .card-b{padding-bottom:12px;}
  body > div > .brand-foot{padding-top:6px;}
}
/* 로그인 오류 문구가 뜨면 그만큼 로고를 줄여 작은 폰에서도 스크롤이 생기지 않게 */
@media (max-width:640px), (max-height:500px){
  body:has(#login-error:not([hidden])) .brand .lk-mark{
    height:clamp(48px, calc(100vh - 695px), 96px);
    height:clamp(48px, calc(100dvh - 695px), 96px);}
}