/* 공용 컴포넌트 스타일.
   화면 하나에만 쓰이는 규칙은 css/pages/<화면>.css 에 둔다. */

/* ── 사이트 팝업 (_site_popup.html) ──
   노출중인 팝업은 전부 동시에 뜬다. 카드가 정확히 포개지면 아래 팝업이 보이지
   않으므로 계단식(cascade)으로 어긋나게 놓는다 — 어긋남 --sp-off 는 템플릿이
   인라인으로 넣어 주는 --sp-i(0부터)·--sp-n(총 개수)으로 계산하며, 스택 전체가
   화면 중앙에 오도록 가운데를 기준으로 ±로 벌린다. 딤(배경)은 하나만 깐다. */
.sp-layer{position:fixed;inset:0;z-index:1000}
.sp-layer[hidden]{display:none}
.sp-dim{position:absolute;inset:0;background:rgba(16,24,44,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .25s ease}
.sp-layer.sp-open .sp-dim{opacity:1}
.sp-item{--sp-step:36px;--sp-pad:20px;
  --sp-off:calc((var(--sp-i) - (var(--sp-n) - 1) / 2) * var(--sp-step));
  /* 벌어진 폭(=--sp-step x (n-1)) 만큼 덜어 내야 끝 카드가 화면 밖으로 안 나간다 */
  position:absolute;left:50%;top:50%;
  width:calc(100% - var(--sp-pad) * 2 - (var(--sp-n) - 1) * var(--sp-step));
  opacity:0;transition:opacity .25s ease,transform .28s cubic-bezier(.2,.8,.3,1);
  transform:translate(calc(-50% + var(--sp-off)),calc(-50% + var(--sp-off) + 14px)) scale(.97)}
.sp-item[hidden]{display:none}
.sp-item.sp-open{opacity:1;
  transform:translate(calc(-50% + var(--sp-off)),calc(-50% + var(--sp-off))) scale(1)}
.sp-card{position:relative;display:flex;flex-direction:column;width:100%;
  /* 계단식으로 벌어진 만큼(=--sp-step x (n-1)) 세로 여유를 덜어 낸다 */
  max-height:calc(100vh - var(--sp-pad) * 2 - (var(--sp-n) - 1) * var(--sp-step));
  max-height:calc(100dvh - var(--sp-pad) * 2 - (var(--sp-n) - 1) * var(--sp-step));
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 32px 70px -18px rgba(16,24,44,.5),0 10px 28px -12px rgba(16,24,44,.25)}
.sp-close{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);color:#5D6478;
  cursor:pointer;box-shadow:0 1px 5px rgba(16,24,44,.16);transition:background .15s,color .15s,transform .2s}
.sp-close:hover{background:#fff;color:#1A2230;transform:rotate(90deg)}
.sp-body{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;background:#FBFDFE}
.sp-body img{display:block;width:100%;height:auto}
.sp-body a{display:block;line-height:0}
.sp-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;background:#FCFDFF;border-top:1px solid #EDF1F5}
.sp-hide{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#4A5568;cursor:pointer;
  -webkit-user-select:none;user-select:none}
.sp-hide input{width:17px;height:17px;margin:0;accent-color:#266DC3;cursor:pointer;flex:0 0 auto}
.sp-ok{border:none;border-radius:9px;background:#266DC3;color:#fff;padding:10px 30px;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:background .15s;flex:0 0 auto}
.sp-ok:hover{background:#1E5DAA}
.sp-lock{overflow:hidden}
@media (max-width:480px){
  /* 좁은 화면에서 계단폭이 크면 카드가 화면 밖으로 밀린다 — 폭을 줄인다 */
  .sp-item{--sp-step:14px;--sp-pad:14px}
  .sp-foot{padding:11px 12px 11px 14px}
  .sp-hide{font-size:12.5px;gap:6px}
  .sp-ok{padding:9px 20px;font-size:14px}
  .sp-close{width:34px;height:34px;top:8px;right:8px}
}

/* ── 비밀번호 생성규칙 체크리스트 (_password_policy.html / js/password_policy.js) ──
   입력 즉시 규칙 충족 여부를 보여 준다. 비어 있는 동안은 중립(회색 ·),
   입력이 시작되면 충족 ✓(녹색) / 위반 ✕(빨강)으로 바뀐다. */
.pw-policy{margin-top:8px;padding:10px 12px;border:1px solid var(--n200);border-radius:10px;
  background:var(--n50)}
.pw-policy-title{font-size:12px;font-weight:700;color:var(--n700);margin-bottom:6px;letter-spacing:-.01em}
.pw-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.pw-rule{position:relative;padding-left:16px;font-size:12px;line-height:1.7;color:var(--n500)}
.pw-rule::before{content:'·';position:absolute;left:2px;width:12px;text-align:center;font-weight:700}
.pw-rule.ok{color:var(--ok)}
.pw-rule.ok::before{content:'✓'}
.pw-rule.bad{color:var(--a500)}
.pw-rule.bad::before{content:'✕';font-size:11px}
.pw-policy-note{margin-top:6px;padding-top:6px;border-top:1px dashed var(--n200);
  font-size:11.5px;color:var(--n500)}
@media (max-width:640px){
  .pw-rules{grid-template-columns:1fr}
}
/* 한 열로 고정 — 규칙이 3개뿐인 아이디 안내는 2열로 벌리면 오히려 읽기 나쁘다. */
.pw-rules-1{grid-template-columns:1fr}

/* 규칙 박스 접기 — 비밀번호는 data-pw-collapse 를 붙인 화면(회원가입)에서만,
   아이디는 hidden 속성으로 접는다. 둘 다 문서 흐름 안에 있어 포커스 중에만 세로가
   늘고 손을 떼면 원래 높이로 돌아온다(평소 스크롤이 짧다).
   속성이 없는 나머지 6개 화면의 비밀번호 박스는 지금 그대로 상시 표시. */
.pw-policy.pw-collapsed,.pw-policy[hidden]{display:none}

/* 데모 결제 모드 안내 배너 — PG 실연동 전(payment_mode=demo)에만 노출된다.
   결제 화면(예약 결제 · 추가검진 청구 결제)이 공유한다. */
.demo-banner{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;
  padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.6;
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.demo-banner .demo-banner-icon{flex:0 0 auto;font-size:15px;line-height:1.5}

/* 결제 채널 선택 (국내/해외 카드) — 결제 화면 2곳이 공유한다. */
.pay-channel{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.pay-channel label{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:10px 14px;border:1px solid var(--n200);border-radius:10px;
  font-size:14px;background:#fff;transition:border-color .12s,background .12s}
.pay-channel label:hover{border-color:var(--p400,#7aa7e0)}
.pay-channel input{margin:0}
.pay-channel input:checked + span{font-weight:600;color:var(--p600)}

/* ── 세션 만료 타이머 (헤더) ──
   사용자·관리자 헤더가 같은 마크업(#session-timer)을 쓴다. 값은
   js/session_timer.js 가 채우며, 남은 시간에 따라 .is-warn/.is-danger 가 붙는다. */
.session-timer{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;
  border:1px solid var(--n200);border-radius:8px;background:var(--n50);
  font-size:12.5px;color:var(--n600);white-space:nowrap}
.session-timer[hidden]{display:none}
.session-timer-label{font-weight:500}
.session-timer-value{font-weight:700;color:var(--n800);
  /* 자릿수가 바뀌어도 폭이 흔들리지 않게 고정폭 숫자를 쓴다 */
  font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.session-timer.is-warn{border-color:#FFD9A8;background:#FFF7EC;color:#B46A00}
.session-timer.is-warn .session-timer-value{color:var(--w500)}
.session-timer.is-danger{border-color:#FBC0C0;background:#FEEFEF;color:#B23B3B}
.session-timer.is-danger .session-timer-value{color:var(--a500)}
/* 모바일에서는 라벨을 감추고 숫자만 남긴다(헤더가 좁다). */
@media (max-width:860px){.session-timer-label{display:none}
  .session-timer{padding:0 8px;height:30px}}

/* ── 공용 알림 모달 껍데기 ──
   세션 만료 경고(js/session_timer.js)와 관리자 최근 로그인 알림
   (admin/_last_login.html)이 같은 껍데기를 쓴다. 안쪽 내용만 각자 다르다. */
.mp-modal-backdrop{position:fixed;inset:0;z-index:1200;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(16,24,44,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mp-modal-backdrop[hidden]{display:none}
.mp-modal{width:100%;max-width:400px;background:#fff;border-radius:16px;
  padding:26px 24px 20px;text-align:center;
  box-shadow:0 32px 70px -18px rgba(16,24,44,.5),0 10px 28px -12px rgba(16,24,44,.25)}
.mp-modal h3{margin:0 0 10px;font-size:18px;color:var(--n900)}
.mp-modal p{margin:0 0 16px;font-size:14px;line-height:1.65;color:var(--n600)}
.mp-modal-actions{display:flex;gap:8px;justify-content:center}
.mp-modal-actions .btn{min-width:120px;justify-content:center}

/* 세션 만료까지 남은 시간(큰 숫자) */
.session-modal-left{margin:0 0 20px;font-size:32px;font-weight:800;color:var(--a500);
  font-variant-numeric:tabular-nums;letter-spacing:.5px}

/* ── 관리자 최근 로그인 알림 ──
   로그인 직후 1회. 접속일시·IP 는 본인이 한 로그인이 맞는지 확인하는 용도라
   왼쪽 정렬 표 형태로 또렷하게 보여 준다. */
.last-login-box{margin:0 0 16px;padding:14px 16px;border:1px solid var(--n200);
  border-radius:10px;background:var(--n50);text-align:left}
.last-login-box dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}
.last-login-box dt{margin:0;font-size:13px;color:var(--n600)}
.last-login-box dd{margin:0;font-size:13.5px;font-weight:600;color:var(--n900);
  word-break:break-all}
.last-login-note{margin:0 0 20px;font-size:12.5px;line-height:1.7;color:var(--n500)}