/* =============================================================
   어드민 사이트 셸 — 회원 사이트와 완전히 분리된 시각/구조.
   - 회원 사이트 셸은 #admin 진입 시 hidden 됩니다.
   - 어드민 셸 안에는 회원 사이트 컴포넌트가 마운트되지 않으므로
     어드민 셸 내부에는 어드민 전용 클래스만 사용합니다.
   ============================================================= */

html, body{height:auto;min-height:100%}
/* 배경 단일 진실 공급원 — 어드민 모드에서는 html 배경까지 함께 강제한다.
   legacy-base.css 의 `html:has(body.admin-mode){background:#101e36}` 보다
   늦게 로드되므로 같은 값을 여기서 다시 선언해 어드민 화면의 배경 색을
   파싱 순서와 무관하게 하나로 고정한다. */
html:has(body.admin-mode){
  background:#0a1024 !important;
  color:#e7edfa;
}
body.admin-mode{
  background:#0a1024;
  color:#e7edfa;
  --adm-bg:#0a1024;
  --adm-bg-2:#0f1733;
  --adm-bg-3:#131d44;
  --adm-line:#243168;
  --adm-line-soft:#1a254e;
  --adm-text:#e7edfa;
  --adm-sub:#a4b1d2;
  --adm-faint:#7a89ab;
  --adm-accent:#4779ff;
  --adm-accent-2:#5e8bff;
  --adm-danger:#ff5e6e;
  --adm-warn:#ffb547;
  --adm-ok:#3bd47e;
  --adm-radius:8px;
}

/* =============================================================
   회원 사이트 셸 / 어드민 셸 — body.admin-mode 클래스 단일 진실 공급원.
   - admin 라우트일 때: .site-shell 숨김 + .admin-shell 보임
   - 그 외 라우트일 때: .admin-shell 숨김 + .site-shell 보임
   - hidden 속성보다 이 CSS 우선순위가 항상 높다 ( !important + 더 구체적 선택자 )
   ============================================================= */

/* 어드민 라우트일 때: 회원 사이트 셸을 DOM 상에서 완전히 숨김 */
body.admin-mode .site-shell{display:none !important;}

/* 어드민 라우트가 아닐 때: 어드민 셸을 숨김 */
body:not(.admin-mode) .admin-shell{display:none !important;}

/* 어드민 라우트일 때: 어드민 셸은 반드시 보이도록 강제 (hidden 속성보다 우선) */
body.admin-mode .admin-shell{
  display:block !important;
  min-height:100vh;
  background:var(--adm-bg);
  color:var(--adm-text);
}

/* =============================================================
   어드민 셸 자체 헤더 (회원 사이트 헤더와 다른 디자인)
   ============================================================= */
.adm-shell-header{
  background:linear-gradient(180deg,#0c1530 0%,#0a1024 100%);
  border-bottom:1px solid var(--adm-line);
  position:sticky;
  top:0;
  z-index:60;
}
.adm-shell-header-inner{
  max-width:1440px;
  margin:0 auto;
  padding:0 32px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.adm-shell-brand{display:inline-flex;align-items:center;gap:12px;color:#fff;font-weight:700;letter-spacing:-.4px}
.adm-shell-brand img{height:34px;width:auto;display:block}
.adm-shell-brand-text{display:flex;flex-direction:column;line-height:1.1}
.adm-shell-brand-text b{font-size:15px;font-weight:800;color:#fff}
.adm-shell-brand-text span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.5px;color:#7c8db8;margin-top:3px}
.adm-shell-header-meta{display:inline-flex;align-items:center;gap:12px}
.adm-shell-mode-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1px solid var(--adm-line);
  border-radius:999px;
  background:rgba(71,121,255,.08);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:1px;
  color:var(--adm-accent-2);
}
.adm-shell-mode-badge::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--adm-danger);
  box-shadow:0 0 8px var(--adm-danger);
  animation:adm-pulse 1.6s ease-in-out infinite;
}
@keyframes adm-pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* =============================================================
   어드민 셸 본문
   ============================================================= */
.adm-shell-body{padding:0;background:var(--adm-bg)}
.adm-shell-body>.adm{padding:0}

/* =============================================================
   어드민 셸 푸터
   ============================================================= */
.adm-shell-footer{
  border-top:1px solid var(--adm-line);
  background:#08102a;
  color:var(--adm-faint);
}
.adm-shell-footer-inner{
  max-width:1440px;
  margin:0 auto;
  padding:14px 32px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* 어드민 셸 안 어드민 페이지(회원 사이트 페이지들과 분리) */
.admin-shell .page,
.admin-shell #p-admin{display:block;background:var(--adm-bg);color:var(--adm-text);padding:0}

/* legacy-base.css 의 `.adm{display:grid}` 는 UA 기본 `[hidden]{display:none}` 보다
   우선순위가 높아 hidden 속성을 통째로 무력화합니다. 그 결과 로그인 화면 아래에
   밝은 흰 배경의 어드민 콘솔(.adm, background:#f2f5fa)이 그대로 삽출되며
   어드민 로그인 화면에 파란 배경과 흰 배경이 두 개로 보였습니다.
   hidden 을 걸어둔 .adm 은 어떤 경우에도 렌더되지 않게 여기서 차단합니다. */
.admin-shell .adm[hidden]{display:none !important}

/* =============================================================
   어드민 전용 로그인 — 회원 사이트의 .login/.login-brand-panel 과
   시각·구조 완전 분리. 회원 사이트 로그인 페이지가 절대 보이지 않습니다.
   ============================================================= */
.admin-shell .adm-login-shell{
  min-height:calc(100vh - 64px - 46px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:radial-gradient(circle at 20% 10%,rgba(71,121,255,.16),transparent 50%),
             radial-gradient(circle at 80% 80%,rgba(94,139,255,.10),transparent 50%),
             var(--adm-bg);
}
.admin-shell .adm-login-card{
  width:100%;
  max-width:520px;
  background:var(--adm-bg-2);
  border:1px solid var(--adm-line);
  border-radius:14px;
  padding:36px 36px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  position:relative;
}
.admin-shell .adm-login-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(71,121,255,.35),transparent 40%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
  pointer-events:none;
}
.admin-shell .adm-login-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}
.admin-shell .adm-login-head img{height:40px;width:auto}
.admin-shell .adm-login-head h1{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.4px;
  color:#fff;
  margin:0;
}
.admin-shell .adm-login-head .sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:1.2px;
  color:var(--adm-faint);
  margin-top:4px;
}
.admin-shell .adm-login-card form{display:flex;flex-direction:column;gap:14px}
.admin-shell .adm-login-card label{
  display:block;
  font-size:12px;
  letter-spacing:.5px;
  color:var(--adm-sub);
  margin-bottom:6px;
  font-weight:600;
}
.admin-shell .adm-login-card input[type="email"],
.admin-shell .adm-login-card input[type="password"]{
  width:100%;
  height:46px;
  padding:0 14px;
  background:var(--adm-bg-3);
  border:1px solid var(--adm-line);
  border-radius:8px;
  color:var(--adm-text);
  font-size:14px;
  outline:none;
  transition:border-color .15s, background .15s;
}
.admin-shell .adm-login-card input:focus{
  border-color:var(--adm-accent);
  background:#1a2347;
}
.admin-shell .adm-login-card .submit{
  height:48px;
  border-radius:8px;
  background:var(--adm-accent);
  color:#fff;
  border:0;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  letter-spacing:-.2px;
  transition:background .15s;
}
.admin-shell .adm-login-card .submit:hover{background:var(--adm-accent-2)}
.admin-shell .adm-login-warn{
  background:rgba(255,94,110,.08);
  border:1px solid rgba(255,94,110,.35);
  color:#ffb6be;
  padding:12px 14px;
  border-radius:8px;
  font-size:12.5px;
  line-height:1.6;
  margin-top:14px;
}
.admin-shell .adm-login-card .submit:disabled{opacity:.55;cursor:not-allowed}
.admin-shell .adm-login-status{
  font-size:12.5px;
  color:#b9d6ff;
  background:rgba(60,140,255,.08);
  border:1px solid rgba(60,140,255,.25);
  padding:8px 10px;
  border-radius:6px;
  line-height:1.55;
  word-break:break-all;
}
.admin-shell .adm-login-pw-msg{
  font-size:12.5px;
  padding:8px 10px;
  border-radius:6px;
  line-height:1.55;
  white-space:pre-line;
  word-break:break-word;
}
.admin-shell .adm-login-pw-msg--info{
  color:#b9d6ff;
  background:rgba(60,140,255,.08);
  border:1px solid rgba(60,140,255,.25);
}
.admin-shell .adm-login-pw-msg--error{
  color:#ffb4b4;
  background:rgba(255,80,80,.10);
  border:1px solid rgba(255,80,80,.35);
}
.admin-shell .adm-login-pw-msg--success{
  color:#b8f0c6;
  background:rgba(60,200,120,.10);
  border:1px solid rgba(60,200,120,.35);
}
.admin-shell .adm-login-hint{
  font-size:12px;
  color:var(--adm-faint);
  margin-top:14px;
  line-height:1.7;
}
.admin-shell .adm-login-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:1.4px;
  color:var(--adm-accent-2);
  padding:4px 8px;
  border:1px solid var(--adm-line);
  border-radius:4px;
  margin-bottom:14px;
  width:fit-content;
}
.admin-shell .adm-login-tag::before{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:var(--adm-danger);
}

/* 어드민 콘솔이 어드민 셸 안에서 보이도록 어드민 페이지의 .adm 가로폭/패딩 조정 */
.admin-shell .adm{min-height:auto}
/* =============================================================
   어드민 로그인 안내 체크리스트 (details/summary)
   ============================================================= */
.admin-shell .adm-login-checklist{
  margin-top:14px;
  border:1px solid var(--adm-line);
  border-radius:8px;
  background:var(--adm-bg-3);
  padding:0;
  overflow:hidden;
}
.admin-shell .adm-login-checklist>summary{
  cursor:pointer;
  padding:12px 14px;
  font-size:13px;
  font-weight:700;
  color:var(--adm-text);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
}
.admin-shell .adm-login-checklist>summary::-webkit-details-marker{display:none}
.admin-shell .adm-login-checklist>summary::after{
  content:"";
  display:none;
}
.admin-shell .adm-login-checklist-caret{
  font-size:11px;
  color:var(--adm-faint);
  transition:transform .2s;
}
.admin-shell .adm-login-checklist[open] .adm-login-checklist-caret{
  transform:rotate(180deg);
}
.admin-shell .adm-login-checklist>summary:hover{
  background:rgba(71,121,255,.06);
}
.admin-shell .adm-login-checklist ol{
  margin:0;
  padding:6px 14px 14px 32px;
  color:var(--adm-sub);
  font-size:12.5px;
  line-height:1.75;
}
.admin-shell .adm-login-checklist ol li{
  margin-bottom:6px;
}
.admin-shell .adm-login-checklist ol li b{
  color:var(--adm-text);
  font-weight:700;
  display:block;
  margin-bottom:2px;
  font-size:12.5px;
}
.admin-shell .adm-login-code{
  margin:4px 0 4px;
  padding:8px 10px;
  border:1px solid var(--adm-line);
  border-radius:6px;
  background:var(--adm-bg-2);
  color:var(--adm-text);
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-x:auto;
}
.admin-shell .adm-login-checklist-foot{
  font-size:11.5px;
  color:var(--adm-faint);
  padding:0 14px 14px;
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:.3px;
}
.admin-shell .adm-login-checklist-foot[hidden]{display:none}
.admin-shell .adm-login-checklist[open] .adm-login-checklist-foot{display:block}

@media (max-width:720px){
  .adm-shell-header-inner{padding:0 16px;height:58px}
  .adm-shell-mode-badge{display:none}
  .adm-shell-footer-inner{padding:14px 16px;font-size:10px}
  .admin-shell .adm-login-shell{padding:16px}
  .admin-shell .adm-login-card{padding:24px 22px}
}