/* 로그인·관리자 PIN — 도씨 로그인(dossi-selo views/login.html + public/css/auth.css)과 같은 모양.
   파란 바탕(#2148C0)과 원 무늬, 흰 로고, 흰 테두리 입력칸, 흰 단추. 밝은/어두운 테마 없이 한 모양.
   가입·계정 찾기·온보딩·결제 안내도 같은 파란 바탕(auth-continuity-kit.css).
   Never override .page visibility, shared dialogs, authentication behavior, customer/admin surfaces or global tokens. */
/* Safari can reveal the document canvas beyond the login wrapper while pulling
   at a scroll boundary or resizing its browser chrome. Paint that canvas only
   while login is active; do not lock scrolling or alter the logged-in theme. */
html:has(#page-pin-login.active),
html:has(#page-pin-login.active) body {
  background: #2148c0;
  overscroll-behavior-y: none;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) {
  --login-kit-bg: #2148c0;
  --login-kit-ink: #fff;
  --login-kit-ink-low: rgba(255, 255, 255, .7);
  --login-kit-focus: rgba(255, 255, 255, .3);
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-wrap {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 48px 20px;
  isolation: isolate;
  background: var(--login-kit-bg) url('/images/login-kit/login-bg.svg') center / cover no-repeat;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-wrap::before,
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-wrap::after { content: none; }
/* 판 없이 가운데 360px 한 줄 — 도씨 .auth-panel */
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-box {
  box-sizing: border-box;
  width: 360px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--login-kit-ink);
  box-shadow: none;
  text-align: left;
  animation: none;
}
/* 로그인 줄은 460px — 로고를 도씨만큼 크게(높이 약 93px) 두면서도 입력칸 폭 안에 들게 */
#page-pin-login .login-box { width: 460px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-logo { margin: 0 0 56px; text-align: center; }
/* 로고는 색 없이 흰색 한 가지 */
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-logo-img {
  display: inline-block;
  width: 420px;
  height: auto;
  aspect-ratio: 1568 / 347;
  max-width: 100%;
  object-fit: contain;
  content: url('/tmplogo/haccp-selo-logo-dark.png');
  filter: brightness(0) invert(1);
  animation: none;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) #userLoginSection { animation: none; opacity: 1; transform: none; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-description { color: var(--login-kit-ink); font-size: 18px; line-height: 1.6; font-weight: 500; margin-bottom: 24px; text-align: center; word-break: keep-all; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields { display: grid; gap: 20px; }
/* 이름표·PIN 제목은 낭독기용으로만 — 자리표시 글자와 안내 문장이 뜻을 알린다 */
#page-pin-login .login-kit-fields label,
:is(#adminPinOverlay, #adminPinSetup) .pin-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 입력칸 — 흰 테두리, 왼쪽 흰 아이콘 20px */
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input {
  /* Existing dark-theme input rules read these variables with priority.
     Override the values on these inputs only, not the global rule. */
  --in-bg: transparent;
  --in-line: #fff;
  --in-ph: #fff;
  --gray4: #fff;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 16px 0 52px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: var(--in-bg);
  color: #fff;
  caret-color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
  color-scheme: dark;
}
/* 아이콘은 --in-bg 에 싣는다 — 다크 테마의 background: var(--in-bg) !important 가 그대로 그린다 */
#page-pin-login #userLoginId { --in-bg: transparent url('/images/login-kit/login-user.svg') no-repeat 14px center / 22px 22px; }
#page-pin-login #userLoginPw { --in-bg: transparent url('/images/login-kit/login-lock.svg') no-repeat 14px center / 22px 22px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input::placeholder { color: #fff; opacity: 1; }
/* 자동완성이 칸을 노랗게 칠하지 않게 */
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px var(--login-kit-bg) inset; caret-color: #fff; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input:focus-visible {
  /* Restore keyboard focus against legacy input:focus { outline:none !important }. */
  outline: 3px solid var(--login-kit-focus) !important;
  outline-offset: 0;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) button:focus-visible,
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) input[type="checkbox"]:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px;
}
/* 로그인 단추 — 흰 바탕, 파란 글자 */
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 8px 16px;
  margin: 43px 0 0;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--login-kit-bg);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .3);
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition: background-color 140ms ease;
}
:is(#adminPinOverlay, #adminPinSetup) .btn-login { margin-top: 24px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login:hover { background: #eef2ff; transform: none; box-shadow: 0 4px 4px rgba(0, 0, 0, .3); }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login:active { background: #dfe6fd; transform: none; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login:disabled { opacity: .7; cursor: wait; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-options { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 0; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-options label { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--login-kit-ink); cursor: pointer; min-height: 28px; user-select: none; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-options input { width: 18px; height: 18px; margin: 0; accent-color: #fff; color-scheme: dark; }
/* Display is owned by existing install eligibility code, never this stylesheet. */
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) #pwaLoginInstallButton {
  margin-top: 20px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, .14);
  color: var(--login-kit-ink);
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) #pwaLoginInstallButton:hover { background: rgba(255, 255, 255, .22); }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) #pwaLoginInstallButton:active { background: rgba(255, 255, 255, .3); }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 32px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-links button {
  width: auto;
  min-height: 32px;
  padding: 4px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--login-kit-ink);
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: none;
  cursor: pointer;
  text-underline-offset: 4px;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-links button:hover { text-decoration: underline; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-copy { margin-top: 40px; padding-top: 0; border: 0; font-size: 13px; line-height: 1.7; text-align: center; color: var(--login-kit-ink-low); }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-copy strong { color: var(--login-kit-ink-low); font-size: 13px; font-weight: 500; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) ::selection { background: #fff; color: var(--login-kit-bg); }
@media (max-width: 480px) {
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-wrap { padding: 40px 20px; }
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-logo { margin-bottom: 44px; }
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-logo-img { width: 90%; }
}
@media (pointer: coarse) {
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input { font-size: 16px; }
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-links button, :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-options label { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login { transition: none; }
}

/* Existing code owns display:none/flex and every PIN input event. */
:is(#adminPinOverlay, #adminPinSetup).login-kit-pin {
  position: fixed;
  inset: 0;
  flex-direction: column;
  z-index: 99999;
  overflow-y: auto;
  overscroll-behavior: contain;
}
:is(#adminPinOverlay, #adminPinSetup) .login-wrap { width: 100%; flex-shrink: 0; }
:is(#adminPinOverlay, #adminPinSetup) .login-box { flex-shrink: 0; }
:is(#adminPinOverlay, #adminPinSetup) .login-logo { margin-bottom: 40px; }
/* PIN 창은 도씨처럼 360px 줄 — 로고도 숫자판 폭 안에 */
:is(#adminPinOverlay, #adminPinSetup) .login-logo-img { width: 340px; }
/* PIN 칸 — 도씨 PIN 과 같은 흰 선 네모 */
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-digits {
  grid-template-columns: repeat(4, 64px);
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-digits input {
  --in-line: rgba(255, 255, 255, .6);
  height: 64px;
  padding: 0;
  /* 틀린 PIN 뒤 스크립트가 남기는 인라인 테두리색(0.2 흰색)보다 앞선다 */
  border-color: var(--in-line) !important;
  border-radius: 8px;
  text-align: center;
  font-size: 22px;
}
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-digits input:focus { --in-line: #fff; }
/* Native password fields may briefly reveal their last character on phones.
   Keep their value/type/keyboard untouched, but paint only a separate empty dot.
   :placeholder-shown tracks typing, backspace, autofill and script-owned resets. */
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit { display: block; position: relative; min-width: 0; }
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit input {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: transparent;
  text-shadow: none;
}
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit input:-webkit-autofill { -webkit-text-fill-color: transparent !important; }
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #fff;
  background: currentColor;
  pointer-events: none;
  opacity: 0;
}
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit:has(input:not(:placeholder-shown))::after { opacity: 1; }
@media (forced-colors: active) {
  :is(#adminPinOverlay, #adminPinSetup) .login-pin-digit input { forced-color-adjust: none; background: Canvas !important; border-color: CanvasText; }
  :is(#adminPinOverlay, #adminPinSetup) .login-pin-digit::after { forced-color-adjust: none; color: CanvasText; background: CanvasText; }
}
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-label { color: #fff; font-size: 16px; line-height: 1.5; margin-bottom: 8px; text-align: center; }
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-error { color: #ffd2cc; font-size: 14px; font-weight: 600; line-height: 20px; min-height: 20px; margin-bottom: 16px; text-align: center; overflow-wrap: anywhere; }
:is(#adminPinOverlay, #adminPinSetup):has(.login-kit-pin-error:not(:empty)) .login-kit-pin-digits input { --in-line: #ffd2cc; }

/* 숫자 키패드 — 도씨 PIN 창(.pin-pad)과 같은 3×4, 흰 숫자 */
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pinpad button {
  height: 60px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 100ms;
}
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pinpad button:hover { background: rgba(255, 255, 255, .12); }
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pinpad button:active { background: rgba(255, 255, 255, .22); }
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pinpad-del {
  display: block;
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: url('/images/login-kit/pin-delete.svg') center / contain no-repeat;
  mask: url('/images/login-kit/pin-delete.svg') center / contain no-repeat;
}
:is(#adminPinOverlay, #adminPinSetup) .login-kit-links { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  :is(#adminPinOverlay, #adminPinSetup) .login-kit-pinpad button { transition: none; }
}

/* Purchased kit Notification / No icon: 1135:2644, inner 1135:2645.
   Same single-message variant as the approved admin UI, without optional copy,
   actions, close or shadow. Existing message, position and timer are unchanged. */
html body:has(#page-pin-login.active) #toast.toast {
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 16px !important;
  border: 1px solid rgba(0, 0, 0, .1) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #171717 !important;
  box-shadow: none !important;
  font: 600 14px/20px var(--font-body) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  z-index: 100001;
}
html body:has(#page-pin-login.active) #toast.toast.toast-error { color: #e00000 !important; }
html body:has(#page-pin-login.active) #toast.toast:not(.show) { visibility: hidden; pointer-events: none; }
html body:has(#page-pin-login.active) #toast.toast.show { visibility: visible; }