/* 가입(온보딩)·업체 기본 세팅·아이디/비밀번호 찾기·새 비밀번호 — 로그인과 같은 도씨 모양(2026-09-26).
   파란 바탕 #2148C0 + 원 무늬, 판 없음, 흰 로고·흰 글자, 흰 테두리 입력칸, 흰 단추·파란 글자.
   업체 기본 세팅은 칸이 많아 입력칸만 흰 바탕을 유지한다. 결제 안내 화면(아래)도 같은 파란 바탕.
   Keep native inputs, IDs, validation and result visibility; no auth changes. */
html:has(.auth-kit-page.active), html:has(.auth-kit-page.active) body,
html:has(body.onboarding-kit) { background:#2148c0; overscroll-behavior-y:none; }
.auth-kit-page .login-wrap, body.onboarding-kit {
  position:relative; isolation:isolate; overflow-x:clip;
  min-height:100vh; min-height:100svh; min-height:100dvh; box-sizing:border-box;
  background:#2148c0;
  padding:48px 20px; color:#fff;
}
.auth-kit-scene {
  position:fixed; inset:0; overflow:hidden; pointer-events:none; user-select:none;
  background:radial-gradient(ellipse 58.43% 103.88% at 56.74% 50%,#56585b 0%,#202224 100%);
}
:is(.auth-kit-page, body.onboarding-kit) .auth-kit-scene { background:#2148c0 url('/images/login-kit/login-bg.svg') center / cover no-repeat; }
.auth-kit-page .login-wrap::before,.auth-kit-page .login-wrap::after { content:none; }
.auth-kit-page .login-box, .onboarding-kit :is(.ob-card,.ob-setup-card) {
  position:relative; z-index:1;
  --mono-text:#fff; --mono-accent:rgba(255,255,255,.82); --gray4:#fff; --text:#fff; --text-sub:rgba(255,255,255,.82); --text-mute:rgba(255,255,255,.72);
  --gray1:transparent; --gray2:rgba(255,255,255,.6);
  --btn-bg:#fff; --btn-fg:#2148c0; --border:rgba(255,255,255,.3);
  background:transparent !important; color:#fff;
  border:0; border-radius:0; padding:0 !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none; max-width:460px !important; box-sizing:border-box; text-align:left;
}
.onboarding-kit .ob-setup-card { max-width:880px !important; }
/* 로고는 로그인과 같이 흰색 한 가지, 크게 */
.auth-kit-page .login-logo-img { content:url('/tmplogo/haccp-selo-logo-dark.png'); width:300px !important; height:auto !important; aspect-ratio:1568 / 347; max-width:100%; object-fit:contain; filter:brightness(0) invert(1); animation:none; }
.auth-kit-page .login-logo-dark-wrap { display:none; }
.onboarding-kit .auth-kit-logo { display:block; width:360px; max-width:100%; height:auto; margin:0 auto 40px; filter:brightness(0) invert(1); }
.onboarding-kit .ob-head { text-align:center; margin-bottom:32px; padding-bottom:0; border:0; }
.onboarding-kit .ob-title { color:#fff; font-weight:700; font-size:24px; line-height:34px; letter-spacing:0; }
.onboarding-kit .ob-success-title { color:#fff; font-size:26px; font-weight:700; letter-spacing:0; margin-bottom:24px; }
.auth-kit-page :is(label,.login-box > div > div), .onboarding-kit :is(.ob-label,.ob-footer,.ob-footer-link,.ob-success-title,.setup-field label) { color:#fff !important; }
.onboarding-kit .ob-label { font-size:15px; font-weight:600; }
/* 입력칸 — 로그인과 같은 흰 테두리·투명 바탕 */
.auth-kit-page :is(input:not([type=checkbox]):not([type=radio]),select), .onboarding-kit .ob-input {
  --in-bg:transparent; --in-line:#fff; --in-ph:rgba(255,255,255,.8); --gray4:#fff;
  min-height:52px; padding:12px 16px !important; border:1px solid #fff !important; border-radius:4px !important;
  background:transparent !important; color:#fff !important; -webkit-text-fill-color:#fff;
  font-size:16px !important; box-shadow:none !important; caret-color:#fff; box-sizing:border-box; color-scheme:dark;
}
.auth-kit-page input::placeholder, .onboarding-kit .ob-input::placeholder { color:rgba(255,255,255,.8) !important; opacity:1; }
.auth-kit-page input:-webkit-autofill, .onboarding-kit .ob-input:-webkit-autofill { -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 40px #2148c0 inset !important; }
/* 업체 기본 세팅 — 칸이 많아 흰 바탕 입력칸 */
.onboarding-kit :is(.setup-input,.setup-select,.setup-field input,.setup-field select,.setup-field textarea,.ob-setup-card .ob-input) {
  --in-bg:#fff; --in-line:#bcbec0; --gray4:#27292b;
  min-height:48px; padding:12px 14px !important; border:1px solid #bcbec0 !important; border-radius:4px !important;
  background:#fff !important; color:#27292b !important; -webkit-text-fill-color:#27292b;
  font-size:16px !important; box-shadow:none !important; caret-color:#2148c0; box-sizing:border-box;
}
.onboarding-kit .ob-setup-card input::placeholder, .onboarding-kit .ob-setup-card textarea::placeholder { color:#696b6e !important; opacity:1; }
.auth-kit-page .login-box input { min-width:0; max-width:100%; }
.auth-kit-page .login-box div[style*="flex:1"] { min-width:0; }
/* 동의 상자·임시 로그인 정보 — 도씨 동의 상자처럼 흰 선, 흰 글자 */
.onboarding-kit :is(.ob-agree,.ob-login-box) { background:transparent; border:1px solid rgba(255,255,255,.6); border-radius:4px; color:#fff; }
.onboarding-kit .ob-agree :is(label,span,a) { color:#fff !important; }
.onboarding-kit .ob-agree-all { border-bottom-color:rgba(255,255,255,.3); }
.onboarding-kit .ob-login-box { font-size:17px; margin:0 0 24px; }
.onboarding-kit .ob-login-box strong { color:#fff; }
.onboarding-kit .ob-login-label { color:rgba(255,255,255,.8); font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; }
#page-signup.auth-kit-page label:has(input[type=radio]) { color:#27292b !important; background:#fff !important; --gray4:#27292b; }
#page-signup.auth-kit-page label:has(input[type=radio]:checked) { border-color:#fff !important; }
/* 단추 — 주 동작은 흰 바탕·파란 글자 */
.auth-kit-page button,.onboarding-kit :is(.ob-btn,.ob-action-primary) { min-height:52px; border-radius:4px !important; font-size:16px !important; box-shadow:none !important; }
.auth-kit-page button[onclick^=submit],.auth-kit-page #findPwSubmitBtn,.onboarding-kit :is(.ob-btn,.ob-action-primary) {
  background:#fff !important; color:#2148c0 !important; border:0 !important;
  font-size:18px !important; font-weight:700 !important; box-shadow:0 4px 4px rgba(0,0,0,.3) !important;
}
.auth-kit-page button[onclick^=submit]:hover,.auth-kit-page #findPwSubmitBtn:hover,.onboarding-kit :is(.ob-btn,.ob-action-primary):hover:not(:disabled) { background:#eef2ff !important; transform:none; }
.onboarding-kit .ob-action-primary { width:100%; }
.auth-kit-page .login-box > div:last-child :is(span,button) { color:#fff !important; }
.auth-kit-page :is(#findIdResultWrap,#findPwResultWrap) > div { background:#fff !important; --mono-text:#27292b; --mono-accent:#696b6e; --gray4:#27292b; }
.auth-kit-page :is(button,input):focus-visible,.onboarding-kit :is(button,input,select,a,textarea):focus-visible { outline:2px solid #fff; outline-offset:3px; }
.onboarding-kit :is(.setup-summary-item,.setup-choice,.setup-note,.setup-pill) { --text:#27292b; --text-sub:#696b6e; --mono-text:#27292b; color:#27292b; }
/* Keep dark ink on light inset panels; do not override error/result visibility. */
.auth-kit-page :is(#findIdResultWrap,#findPwResultWrap) > div { color:#27292b !important; }
.auth-kit-page :is(#findIdResultWrap,#findPwResultWrap) > div :is(div,span) { overflow-wrap:anywhere; }
.auth-kit-page #findIdResultWrap button[onclick*="page-find-pw"] { border-color:rgba(255,255,255,.6) !important; }
.onboarding-kit :is(.ob-footer-link,.ob-footer-link:hover) { color:#fff; font-size:16px; font-weight:600; margin-top:24px; }
.onboarding-kit .ob-field.has-error .ob-input { border-color:#ffd2cc !important; }
.onboarding-kit :is(.ob-error-msg,.ob-label .req) { color:#ffd2cc; }
.onboarding-kit .ob-error-msg { font-size:13px; font-weight:600; }
.auth-kit-page input[type=checkbox],.onboarding-kit .ob-agree input[type=checkbox] { accent-color:#fff; color-scheme:dark; }
.auth-kit-page input[type=radio],.onboarding-kit .ob-setup-card :is(input[type=checkbox],input[type=radio]) { accent-color:#2148c0; }
/* 글자 한 단계 크게 — 작은 안내 글이 흐리게 늘어서지 않게 */
.onboarding-kit .ob-agree-row { font-size:15px; }
.onboarding-kit .ob-agree-all { font-size:16px; }
.onboarding-kit .setup-title { color:#fff; font-size:28px; font-weight:700; letter-spacing:0; }
.onboarding-kit .setup-section-title { color:#fff; font-size:20px; font-weight:700; letter-spacing:0; margin-bottom:16px; }
.onboarding-kit .setup-section-title + .setup-section-help { margin-top:-8px; }
.onboarding-kit .setup-section-help, .onboarding-kit .ob-setup-card .setup-note:not(.setup-total) { color:rgba(255,255,255,.85); font-size:14px; }
.onboarding-kit .setup-field label { font-size:14px; font-weight:600; }
.onboarding-kit :is(.setup-top,.setup-section,.setup-actions) { border-color:rgba(255,255,255,.3); }
/* 업체 기본 세팅 — 넉넉한 간격, 묶음마다 소제목, 흰 선택 카드 */
.onboarding-kit .setup-top { margin-bottom:40px; padding-bottom:32px; }
.onboarding-kit .setup-section { margin-top:56px; padding-top:48px; }
.onboarding-kit .setup-section:first-of-type { margin-top:0; padding-top:0; }
.onboarding-kit .setup-sub { color:#fff; font-size:17px; font-weight:700; margin:40px 0 8px; }
.onboarding-kit .ob-setup-card .setup-note:not(.setup-total) { margin-bottom:16px; }
.onboarding-kit .setup-grid { gap:24px 20px; }
.onboarding-kit .setup-list-label { font-size:14px !important; font-weight:600 !important; margin:20px 0 10px !important; }
.onboarding-kit .setup-choice-row { gap:16px; }
.onboarding-kit .setup-choice { border:0; border-radius:8px; padding:20px; }
.onboarding-kit .setup-choice strong { font-size:17px; }
.onboarding-kit .setup-choice div { font-size:14px; }
.onboarding-kit .setup-choice:has(input:checked) { background:#fff; box-shadow:inset 0 0 0 3px #2148c0, 0 0 0 3px #fff; }
.onboarding-kit .ob-setup-card :is(.setup-total,.setup-lock-message,.setup-pill) { border-radius:8px; }
.onboarding-kit .setup-sub + .setup-choice-row, .onboarding-kit .setup-sub + .setup-note { margin-top:12px; }
.onboarding-kit .member-warning { color:#ffd2cc; font-size:14px; }
.onboarding-kit .member-row { gap:12px; margin-bottom:12px; }
#setupBizNumInfo:empty { display:none; }
.onboarding-kit #coldRoomList { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; }
.onboarding-kit #coldRoomList .room-row { grid-template-columns:1fr; margin:0; }
@media(max-width:600px) {
  .onboarding-kit .setup-section { margin-top:40px; padding-top:36px; }
  .onboarding-kit #coldRoomList { grid-template-columns:1fr; }
  .auth-kit-page .login-wrap,body.onboarding-kit { padding:40px 20px; }
  .onboarding-kit .auth-kit-logo { width:300px; margin-bottom:32px; }
}

/* 결제 안내 화면 — 로그인·가입과 같은 도씨 파란 바탕(2026-10-03). 판 없이 가운데 한 줄.
   요약 상자는 흰 선, 안내 문구는 옅은 흰 상자, 주 단추는 흰 바탕·파란 글자.
   Scoped to the interruption wall and its confirmation, never business dialogs. */
#subscriptionBlock.payment-login-kit {
  --gray4:#fff; --mono-text:#fff; --mono-accent:rgba(255,255,255,.85);
  --btn-bg2:#fff; --btn-fg:#2148c0; --line-10:rgba(255,255,255,.6);
  --line-18:#fff; --sf-line3:rgba(255,255,255,.3); --danger:#ffd2cc;
  box-sizing:border-box; isolation:isolate; flex-direction:column; align-items:center;
  padding:84px 20px 40px; overflow-x:hidden; overscroll-behavior-y:contain;
  background:#2148c0 url('/images/login-kit/login-bg.svg') center / cover no-repeat !important; color:#fff !important;
  font-family:var(--font-body); line-height:1.6;
}
#subscriptionBlock.payment-login-kit > div {
  position:relative; flex:none; box-sizing:border-box; width:460px; max-width:100% !important;
  min-height:0 !important; margin:auto !important; padding:0 !important;
  border:0; background:transparent; box-shadow:none; text-align:left !important; align-items:stretch !important;
}
#subscriptionBlock.payment-login-kit > div > div:first-child { margin-bottom:40px !important; text-align:center; }
#subscriptionBlock.payment-login-kit img[alt="haccp selo"] {
  content:url('/tmplogo/haccp-selo-logo-dark.png'); width:300px !important; max-width:100%; height:auto; filter:brightness(0) invert(1);
}
#subscriptionBlock.payment-login-kit > div > div:nth-child(2) { display:none; }
#subscriptionBlock.payment-login-kit #subBlockTitle { margin-bottom:16px !important; font-size:26px !important; font-weight:700 !important; line-height:1.4; letter-spacing:0 !important; text-align:center; word-break:keep-all; }
#subscriptionBlock.payment-login-kit #subBlockMsg { font-size:16px !important; line-height:1.7 !important; width:100%; max-width:100% !important; overflow-wrap:anywhere; word-break:keep-all; }
#subscriptionBlock.payment-login-kit .pay-wall-summary { margin:28px 0 20px !important; padding:24px !important; border:1px solid rgba(255,255,255,.6) !important; border-radius:4px !important; font-size:15px; }
#subscriptionBlock.payment-login-kit .pay-wall-amount { margin:8px 0 12px !important; font-size:32px !important; font-weight:700; line-height:1.3; }
#subscriptionBlock.payment-login-kit .pay-wall-sub { color:rgba(255,255,255,.85); }
#subscriptionBlock.payment-login-kit #renewalPaymentMessage { padding:14px 16px; border-radius:4px; background:rgba(255,255,255,.14); color:#fff; font-size:15px; font-weight:600; }
#subscriptionBlock.payment-login-kit #subBlockBtnWrap { display:grid; gap:12px; margin-top:28px !important; width:100%; }
#subscriptionBlock.payment-login-kit button {
  box-sizing:border-box; min-height:52px; padding:12px 16px !important; margin:0 !important;
  border:0 !important; border-radius:4px !important; background:#fff !important; color:#2148c0 !important;
  font:inherit; font-size:18px !important; font-weight:700 !important; line-height:1.5;
  box-shadow:0 4px 4px rgba(0,0,0,.3) !important; cursor:pointer; transition:background-color 140ms ease;
}
#subscriptionBlock.payment-login-kit button:hover:not(:disabled) { background:#eef2ff !important; }
#subscriptionBlock.payment-login-kit button:disabled { opacity:.6; cursor:default; }
#subscriptionBlock.payment-login-kit #subBlockBtnWrap button + button,
#subscriptionBlock.payment-login-kit > button {
  background:transparent !important; color:#fff !important; border:1px solid #fff !important; box-shadow:none !important; font-size:16px !important; font-weight:600 !important;
}
#subscriptionBlock.payment-login-kit #subBlockBtnWrap button + button:hover:not(:disabled),
#subscriptionBlock.payment-login-kit > button:hover:not(:disabled) { background:rgba(255,255,255,.12) !important; }
#subscriptionBlock.payment-login-kit > button { top:20px !important; right:20px !important; min-height:40px; padding:8px 14px !important; font-size:14px !important; }
#subscriptionBlock.payment-login-kit #subBlockBtnWrap + div { display:none; }
#subscriptionBlock.payment-login-kit > div > div:last-child {
  margin-top:40px; padding-top:24px !important; border-color:rgba(255,255,255,.3) !important; color:rgba(255,255,255,.85) !important; font-size:14px !important; letter-spacing:0 !important; text-align:center;
}
#subscriptionBlock.payment-login-kit > div > div:last-child span { color:#fff !important; }
/* Keep initial-registration receipt panels readable for interrupted first payments. */
#subscriptionBlock.payment-login-kit #subBlockMsg > div[style*="background:var(--white)"] {
  background:#fff !important;
  --gray4:#27292b; --mono-text:#444; --mono-accent:#696b6e; --line-10:rgba(0,0,0,.1); --line-18:rgba(0,0,0,.18);
}
/* 결제 확인 창 — 흰 판, 파란 주 단추 */
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal {
  z-index:100000 !important; overflow-y:auto; background:rgba(14,30,80,.55) !important;
}
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal > div {
  max-width:420px !important; background:#fff !important; border:0 !important;
  border-radius:8px !important; box-shadow:0 20px 40px rgba(0,0,0,.25) !important; animation:none !important;
}
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal > div > div:first-child { padding:28px 28px 0 !important; }
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmTitle { color:#171717 !important; font-size:20px !important; font-weight:700 !important; letter-spacing:0 !important; margin-bottom:12px !important; }
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmMsg { color:#404040 !important; font-size:15px !important; line-height:1.7 !important; word-break:keep-all; }
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal > div > div:last-child { gap:10px !important; padding:24px 28px 28px !important; }
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal button {
  min-height:48px; border-radius:4px !important; font-size:16px !important; font-weight:700 !important;
  background:#2148c0 !important; color:#fff !important; border:0 !important;
}
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal button:first-child { background:#fff !important; color:#404040 !important; border:1px solid #d4d4d4 !important; }
#subscriptionBlock.payment-login-kit button:focus-visible { outline:2px solid #fff !important; outline-offset:3px; }
body:has(#subscriptionBlock.payment-login-kit[style*="display: flex"]) #subConfirmModal button:focus-visible { outline:2px solid #2148c0 !important; outline-offset:3px; }
@media(max-width:480px) {
  #subscriptionBlock.payment-login-kit { padding:80px 16px 24px; }
  #subscriptionBlock.payment-login-kit img[alt="haccp selo"] { width:240px !important; }
  #subscriptionBlock.payment-login-kit #subBlockTitle { font-size:24px !important; }
  #subscriptionBlock.payment-login-kit .pay-wall-summary { padding:20px; }
  #subscriptionBlock.payment-login-kit > button { top:16px !important; right:16px !important; }
}
@media(prefers-reduced-motion:reduce) {
  #subscriptionBlock.payment-login-kit button { transition:none; }
}