/* Allo Korea — 로그인 페이지 ([allo_login]) 스타일.
   시각 값의 정본 = Desktop/웹리뉴얼-마이페이지-디자인-v2.html (LG01~LG04).
   팔레트: 잉크 #1A1710 · 본문 #453F35 · 뮤트 rgba(26,23,16,.55) · 주황 #F2751A→#DE5B0B
   · 링크 #C24900 · 틸 #146259 · 카드 흰색 r20 + 0 0 0 .5px rgba(26,23,16,.07).
   모바일 기본, 768px 이상에서 데스크탑 치수 (pad 22/20→28/26 · h1 25→28 · sub 14.5→15.5).
   스코프는 전부 #ak-login — 테마·site-chrome 과 충돌하지 않게. */

#ak-login {
  max-width: 480px;
  margin: 0 auto;
  padding: 18px 0 96px; /* 모바일: 하단 유리바 자리 96px (디자인 stage 패딩) */
  font-family: Pretendard, 'Pretendard Variable', -apple-system, 'Noto Sans KR', sans-serif;
  letter-spacing: -.012em;
  color: #1A1710;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#ak-login * { box-sizing: border-box; }
/* [hidden] 이 .akl-btn{display:flex} 같은 저자 규칙에 지지 않게 — Apple 버튼·상태 토글의 기반 */
#ak-login [hidden] { display: none !important; }

@keyframes aklRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aklSpin { to { transform: rotate(360deg); } }

/* ── 화면 전환: 전부 숨김 + is-on 하나만. 첫 페인트는 html[data-allo-auth] 로 게스트를
   즉시 LG01 에 앉힌다 (FOUC 계약 — JS 도착 전에도 상태가 맞다). akl-ready 후엔 JS 가 주인. */
#ak-login .akl-view { display: none; }
#ak-login .akl-view.is-on { display: flex; flex-direction: column; gap: 12px; animation: aklRise .28s cubic-bezier(.32,.72,0,1); }
#ak-login .akl-boot { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 38vh; color: rgba(26,23,16,.55); font-size: 14px; }
#ak-login.akl-ready .akl-boot { display: none; }
html[data-allo-auth="out"] #ak-login:not(.akl-ready) .akl-view[data-view="lg01"] { display: flex; flex-direction: column; gap: 12px; }
html[data-allo-auth="out"] #ak-login:not(.akl-ready) .akl-boot { display: none; }

#ak-login .akl-spin {
  width: 16px; height: 16px; border-radius: 999px; flex: none;
  border: 2px solid rgba(26,23,16,.15); border-top-color: #DE5B0B;
  animation: aklSpin .8s linear infinite;
}

/* ── 카드 ── */
#ak-login .akl-card { border-radius: 20px; background: #fff; box-shadow: 0 0 0 .5px rgba(26,23,16,.07); }
#ak-login .akl-pad { padding: 22px 20px; }
#ak-login .akl-padsm { padding: 17px 18px; }

/* .akl-h1 = 단계 제목의 '겉모습'. 태그는 LG01 만 h1, 나머지 단계는 h2 다 (문서 h1 1개 계약 —
   includes/login-page.php LG01 주석). 값이 전부 클래스 규칙이라 태그가 뭐든 그림은 같다.
   font-family: inherit 를 명시하는 이유 = 엘리멘터 kit 이 h1/h2 에 서로 다른 글꼴을 직접 걸면
   컨테이너(#ak-login)의 Pretendard 상속이 태그별로 갈린다 — 태그를 바꿔도 글꼴이 안 흔들리게 못박는다. */
#ak-login .akl-h1 { font-size: 25px; font-weight: 800; letter-spacing: -.04em; color: #1A1710; margin: 0; line-height: 1.25; font-family: inherit; }
#ak-login .akl-h1-gap { margin-top: 18px; }
#ak-login .akl-sub { font-size: 14.5px; line-height: 1.6; color: #453F35; margin: 9px 0 0; }

/* ── 버튼 3종 + fill/outline (디자인 btn 맵 그대로) ── */
#ak-login .akl-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
#ak-login .akl-btn {
  height: 52px; border-radius: 17px; border: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; letter-spacing: inherit;
  font-size: 15.5px; font-weight: 700; cursor: pointer; user-select: none;
  text-decoration: none; transition: transform .16s cubic-bezier(.32,.72,0,1);
  -webkit-tap-highlight-color: transparent;
}
#ak-login .akl-btn:active { transform: scale(.978); }
#ak-login .akl-btn svg { flex: none; }
#ak-login .akl-btn-google { background: #fff; color: #1A1710; box-shadow: 0 0 0 .5px rgba(26,23,16,.12), 0 6px 16px -8px rgba(0,0,0,.2); }
#ak-login .akl-btn-google:hover { color: #1A1710; }
#ak-login .akl-btn-apple { background: #1A1710; color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }
/* ── Apple 버튼 하드 게이트 (마크업은 남기고 화면에서만 뺀다 — iOS 심사 때 노출) ──────────
   켜는 법: update_option('allo_crm_login_apple', '1') 하나뿐. 그러면 서버가 ALLO_LOGIN.apple='1'
   → login.js 가 hidden 을 떼고 #ak-login 에 akl-apple 을 단다 → 아래 두 번째 규칙이 통과한다.
   왜 CSS 까지 거는가: 켜짐 판정이 JS 한 곳뿐이면 값 하나 잘못 실려도 그대로 새 나간다
   (2026-08-18 라이브 사고 — wp_localize_script 가 0 을 "0" 으로 캐스팅해 truthy 가 됐다).
   :not([hidden]) = 위 [hidden] !important 규칙과 싸우지 않게 — 두 자물쇠가 다 풀려야 보인다. */
#ak-login .akl-btn-apple { display: none !important; }
#ak-login.akl-apple .akl-btn-apple:not([hidden]) { display: flex !important; }
#ak-login .akl-btn-email { background: transparent; color: #1A1710; box-shadow: inset 0 0 0 1.5px rgba(26,23,16,.14); }
#ak-login .akl-btn-fill {
  height: 54px; font-size: 16px; color: #fff;
  background: linear-gradient(150deg, #F2751A, #DE5B0B);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 12px 28px -12px rgba(242,117,26,.6);
}
#ak-login .akl-btn-fill:hover { color: #fff; }
#ak-login .akl-btn-outline { background: transparent; color: #453F35; box-shadow: inset 0 0 0 1.5px rgba(26,23,16,.14); height: 50px; font-size: 15px; }
#ak-login .akl-btn[disabled] { opacity: .55; cursor: default; }
#ak-login .akl-cta { margin-top: 14px; }

#ak-login .akl-note { text-align: center; font-size: 12.5px; color: rgba(26,23,16,.55); margin: 13px 0 0; }

/* ── LG01 부속 ── */
#ak-login .akl-perks { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; padding-top: 20px; border-top: .5px solid rgba(26,23,16,.08); }
#ak-login .akl-perk { display: flex; gap: 11px; align-items: flex-start; }
#ak-login .akl-perk svg { flex: none; margin-top: 2px; }
#ak-login .akl-perk span { flex: 1; font-size: 14.5px; line-height: 1.55; color: #453F35; }

#ak-login .akl-krow { display: flex; align-items: center; gap: 13px; }
#ak-login .akl-kimg { width: 48px; height: 48px; flex: none; border-radius: 999px; object-fit: cover; background: repeating-linear-gradient(122deg, #E7E2D8 0 6px, #F0ECE3 6px 12px); }
#ak-login .akl-kfall {
  width: 48px; height: 48px; flex: none; border-radius: 999px;
  background: repeating-linear-gradient(122deg, #E7E2D8 0 6px, #F0ECE3 6px 12px);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: rgba(26,23,16,.55);
}
#ak-login .akl-kmeta { flex: 1; min-width: 0; }
#ak-login .akl-kname { font-size: 15px; font-weight: 800; letter-spacing: -.03em; color: #1A1710; }
#ak-login .akl-krole { font-size: 12.5px; line-height: 1.5; color: rgba(26,23,16,.55); margin-top: 3px; }

#ak-login .akl-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
#ak-login .akl-stars { font-size: 11px; letter-spacing: .1em; color: #B8791F; }
#ak-login .akl-tbold { font-size: 13px; font-weight: 800; color: #1A1710; margin-left: -8px; }
#ak-login .akl-torange { font-size: 13px; font-weight: 800; color: #C24900; }
#ak-login .akl-tmuted { font-size: 12.5px; color: rgba(26,23,16,.55); }
#ak-login .akl-tdiv { width: 1px; height: 12px; background: rgba(26,23,16,.14); }

#ak-login .akl-browse { display: block; text-align: center; padding: 6px 0 4px; font-size: 14px; font-weight: 700; color: #C24900; text-decoration: none; cursor: pointer; }
#ak-login .akl-browse:hover { color: #A83E00; }

/* 폴백 (allo-qa 신 API 부재) — 주황 톤 안내 + 위저드 CTA */
#ak-login .akl-fallback {
  margin-top: 16px; border-radius: 15px; background: rgba(242,117,26,.07);
  padding: 15px 14px; box-shadow: inset 0 0 0 .5px rgba(242,117,26,.22);
}
#ak-login .akl-fbtitle { font-size: 14.5px; font-weight: 800; color: #C24900; }
#ak-login .akl-fbbody { font-size: 13.5px; line-height: 1.55; color: #453F35; margin: 6px 0 12px; }

/* ── LG02 ── */
#ak-login .akl-backrow {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0;
  background: none; border: 0; cursor: pointer; user-select: none;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: rgba(26,23,16,.55);
}
#ak-login .akl-label { display: block; font-size: 12.5px; font-weight: 700; color: #1A1710; margin-top: 22px; }
#ak-login .akl-labelrow { display: flex; align-items: baseline; gap: 8px; }
#ak-login .akl-labelrow .akl-label { flex: 1; margin-top: 0; }
#ak-login .akl-input {
  width: 100%; height: 54px; margin-top: 7px; border: 0; outline: 0; border-radius: 17px;
  background: #FBF6F0; padding: 0 16px; font-family: inherit; font-size: 15.5px; font-weight: 500;
  color: #1A1710; box-shadow: inset 0 0 0 .5px rgba(26,23,16,.1);
}
#ak-login .akl-input:focus { box-shadow: inset 0 0 0 2px #DE5B0B; }
#ak-login .akl-input-sm { height: 52px; padding: 0 15px; font-size: 15px; }
#ak-login .akl-err { font-size: 13px; font-weight: 600; color: #C24900; margin: 10px 0 0; }

#ak-login .akl-ghint {
  margin-top: 14px; border-radius: 15px; background: rgba(20,98,90,.07);
  padding: 14px; box-shadow: inset 0 0 0 .5px rgba(20,98,90,.2);
  animation: aklRise .24s cubic-bezier(.32,.72,0,1);
}
#ak-login .akl-ghtxt { font-size: 13.5px; line-height: 1.55; font-weight: 600; color: #146259; margin-bottom: 12px; }

#ak-login .akl-cells { position: relative; display: flex; gap: 8px; margin-top: 24px; }
#ak-login .akl-cell {
  flex: 1; height: 62px; border-radius: 15px; background: #FBF6F0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #1A1710; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 .5px rgba(26,23,16,.1); transition: box-shadow .2s;
}
#ak-login .akl-cell.is-active { box-shadow: inset 0 0 0 2px #DE5B0B; }
/* 실제 입력은 셀 위에 얹은 투명 input — OTP 자동완성·붙여넣기가 그대로 먹는다 */
#ak-login .akl-codein {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; outline: 0; font-size: 24px; letter-spacing: 2em; cursor: pointer;
}
#ak-login .akl-cta[data-akl-verify] { margin-top: 20px; }
#ak-login .akl-resend { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; }
#ak-login .akl-resendwait { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(26,23,16,.55); }
#ak-login .akl-resendbtn, #ak-login .akl-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; color: #C24900;
}
#ak-login .akl-wrongrow {
  text-align: center; font-size: 12.5px; line-height: 1.55; color: rgba(26,23,16,.55);
  margin: 18px 0 0; padding-top: 16px; border-top: .5px solid rgba(26,23,16,.08);
}
#ak-login .akl-wrongrow .akl-linkbtn { font-size: 12.5px; }

/* ── LG03 ── */
#ak-login .akl-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 2px; }
#ak-login .akl-names { display: flex; gap: 10px; }
#ak-login .akl-names .akl-field { flex: 1; min-width: 0; }
#ak-login .akl-hint { font-size: 12.5px; line-height: 1.5; color: rgba(26,23,16,.55); margin: 8px 0 0; }
#ak-login .akl-hint-tight { margin-top: -8px; }
#ak-login .akl-verified {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
  border-radius: 999px; background: rgba(20,98,90,.11);
  font-size: 10.5px; font-weight: 800; color: #146259;
}
#ak-login .akl-emaildisp {
  width: 100%; height: 52px; margin-top: 7px; border-radius: 17px;
  background: rgba(26,23,16,.045); padding: 0 15px; display: flex; align-items: center;
  font-size: 15px; font-weight: 500; color: rgba(26,23,16,.55);
  box-shadow: inset 0 0 0 .5px rgba(26,23,16,.07);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ak-login .akl-selwrap { position: relative; margin-top: 7px; }
#ak-login .akl-select {
  width: 100%; height: 52px; border: 0; outline: 0; border-radius: 17px; background: #FBF6F0;
  padding: 0 40px 0 14px; font-family: inherit; font-size: 15px; font-weight: 500; color: #1A1710;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  box-shadow: inset 0 0 0 .5px rgba(26,23,16,.1);
}
#ak-login .akl-select:focus { box-shadow: inset 0 0 0 2px #DE5B0B; }
#ak-login .akl-chev { position: absolute; right: 15px; top: 23px; pointer-events: none; }
#ak-login .akl-natcard {
  margin-top: 12px; border-radius: 15px; padding: 14px; display: flex; gap: 11px;
  animation: aklRise .24s cubic-bezier(.32,.72,0,1);
}
#ak-login .akl-natcard svg { flex: none; margin-top: 1px; }
#ak-login .akl-natcard div { flex: 1; font-size: 14px; line-height: 1.55; font-weight: 600; }
#ak-login .akl-natok { background: rgba(20,98,90,.07); box-shadow: inset 0 0 0 .5px rgba(20,98,90,.2); }
#ak-login .akl-natok div { color: #146259; }
#ak-login .akl-natno { background: rgba(242,117,26,.08); box-shadow: inset 0 0 0 .5px rgba(242,117,26,.24); }
#ak-login .akl-natno div { color: #C24900; }
#ak-login .akl-cta[data-akl-create] { margin-top: 24px; }

/* ── 완료 (You're all set) — 디자인 M01-C 틸 그라디언트 카드 문법 ── */
#ak-login .akl-donecard {
  border-radius: 20px; background: linear-gradient(160deg, #1C5A52, #123F3A); color: #fff;
  box-shadow: 0 18px 42px -24px rgba(18,63,58,.8); animation: aklRise .28s cubic-bezier(.32,.72,0,1);
}
#ak-login .akl-donerow { display: flex; align-items: center; gap: 13px; }
#ak-login .akl-doneic {
  width: 40px; height: 40px; border-radius: 14px; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; flex: none;
}
#ak-login .akl-donetxt { flex: 1; min-width: 0; }
#ak-login .akl-doneh { font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
#ak-login .akl-doneb { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); margin-top: 4px; }

/* ── LG04 ── */
#ak-login .akl-clockic {
  width: 48px; height: 48px; border-radius: 17px; background: rgba(242,117,26,.1);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 .5px rgba(242,117,26,.22);
}
#ak-login .akl-keepline {
  display: flex; align-items: center; gap: 9px; margin-top: 18px; border-radius: 15px;
  background: rgba(20,98,90,.06); padding: 13px 14px; box-shadow: inset 0 0 0 .5px rgba(20,98,90,.16);
}
#ak-login .akl-keepline svg { flex: none; }
#ak-login .akl-keepline div { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: #146259; }
#ak-login .akl-tile { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
#ak-login .akl-tile-olive { background: rgba(95,107,47,.13); }
#ak-login .akl-tile-indigo { background: rgba(46,58,140,.11); }
#ak-login .akl-cardh { font-size: 18px; font-weight: 800; letter-spacing: -.035em; color: #1A1710; margin-top: 14px; }
#ak-login .akl-cardb { font-size: 14.5px; line-height: 1.6; color: #453F35; margin: 7px 0 16px; }
#ak-login .akl-btn-outline[data-akl-notify] span[data-akl-sub="notified"] { font-size: 13.5px; font-weight: 600; color: #146259; }

/* ── 데스크탑 (≥768px, 디자인 1140 프레임 치수) ── */
@media (min-width: 768px) {
  #ak-login { padding: 40px 0 48px; }
  #ak-login .akl-pad { padding: 28px 26px; }
  #ak-login .akl-padsm { padding: 20px 22px; }
  #ak-login .akl-h1 { font-size: 28px; }
  #ak-login .akl-sub { font-size: 15.5px; }
  #ak-login .akl-trust { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  #ak-login .akl-view.is-on, #ak-login .akl-natcard, #ak-login .akl-ghint, #ak-login .akl-donecard { animation: none; }
}

/* ══ site-chrome 배제 — PC 좌우 레일 · 우상단 필 (사장님 2026-08-18 라이브 실측) ═══════════
 * 증상: /login/ 에서 좌 레일에 "Log in to ALLO KOREA" 구글 카드가, 우 레일에 앱 QR·겨울학기
 *       배너가 떴다. 로그인 페이지 한복판에 같은 기능(구글 로그인)이 두 벌이다.
 *
 * 왜 여기(login.css)에 쓰는가 — **가장 작은 수정**이라서:
 *   · includes/site-chrome.php 는 다른 작업과 동시 편집 위험이 있고, 레일 렌더 게이트에
 *     allo_sc_selfui_page() 를 더하면 위저드·포탈의 레일까지 같이 죽는다(= 회귀).
 *     selfui 배제는 3단·리스킨용 판정이지 레일 판정이 아니다.
 *   · 포탈 전례(#allo-sc[data-portal] × html[data-allo-auth])는 site-chrome.php 와
 *     site-chrome.css 를 **둘 다** 건드려야 한다 — 이 페이지 하나를 위해선 과하다.
 *   · login.css 는 [allo_login] 숏코드가 렌더될 때만 enqueue 된다(allo_login_enqueue) =
 *     이 파일이 존재하는 페이지 = 로그인 페이지. 스코프가 이미 페이지 단위로 정확하다.
 *
 * !important 인 이유: site-chrome.css 의 표시 규칙(@media ≥1200px 의 .sc-rails 조합)이
 * 이 파일보다 뒤에 실릴 수 있다(우리 스타일은 숏코드 시점 enqueue 라 푸터로 밀린다).
 * 중요도로 이기면 **적재 순서와 무관**하게 항상 같은 답이 나온다.
 *
 * 컨테이너(.allo-sc-rails)를 지우고 site-chrome.js 는 건드리지 않는다 — updateRails() 는
 * 폭 실측만 하고 #allo-sc 에 sc-rails 클래스를 달 뿐이라, 숨겨도 판정이 어긋날 데가 없다.
 * 필(.allo-sc-pills)은 지금 이 페이지에서 서버가 아예 출력하지 않지만(헤더가 그려지는 요청이라
 * allo_sc_render 가 건너뛴다) 헤더 옵션(allo_crm_header)이 꺼지면 되살아난다 — 그때도 안 뜨게 같이 건다.
 * 하단 유리바·헤더·드로어는 **그대로 둔다** (사이트 공통 크롬 — 사장님 확정). */
 * 컨테이너와 아사이드를 **둘 다** 건다: 컨테이너만 지워도 아사이드가 fixed 라 화면에서 같이 사라지지만
 * (display:none 은 하위 트리 전체를 렌더에서 뺀다), 포탈 전례(site-chrome.css 의 data-portal 규칙)가
 * .allo-sc-rail 을 겨냥한 것과 같은 자리를 한 번 더 막아 둔다 — 나중에 컨테이너 규칙만 풀려도 안 샌다. */
#allo-sc .allo-sc-rails { display: none !important; }
#allo-sc .allo-sc-rail { display: none !important; }
#allo-sc .allo-sc-pills { display: none !important; }