/* 관리자 로그인 화면 스타일 — 확정 목업(mockup-admin-login.html)에서 옮겨 왔다.
이 화면만 쓰는 것이라 admin.css 와 따로 둔다.
목업에 있던 "로그인 뒤 메뉴" 화면은 빼 두었다. 실제로는 로그인하면
관리 목록으로 바로 넘어가므로 그 화면이 나올 자리가 없다. */
/* 디자인 토큰은 assets/theme.config.js 와 같은 값을 씁니다 (accent #ff5a1f · rounded) */
:root{
color-scheme: light dark;
/* ── 역할 토큰 ─────────────────────────────────────────────────────
같은 «검정»이라도 «어두운 칩의 바탕»과 «본문 글자»는 다른 것이다.
둘을 한 이름으로 쓰면 어두운 화면에서 한쪽이 반드시 깨진다.
밝은 화면의 값은 지금과 같다 — 여기서는 아무것도 달라지지 않는다. */
--bg: #ffffff; /* 페이지 바탕 */
--surface: #ffffff; /* 카드·패널 바탕 */
--surface-2: #f1f1f3; /* 옅게 채운 바탕 */
--line: #c7c7cf; /* 테두리 */
--fg: #1c1c1f; /* 본문 글자 */
--fg-strong: #0a0a0b; /* 제목·강조 글자 */
--muted: #82828c; /* 흐린 글자 */
--muted-2: #4a4a52; /* 보조 글자 */
--chip: #0a0a0b; /* «일부러 어두운» 칩·버튼 바탕 (글자는 흰색) */
--black:#0a0a0b; --ink:#1c1c1f; --gray-700:#4a4a52; --gray-500:#82828c;
--gray-300:#c7c7cf; --gray-100:#f1f1f3; --white:#fff;
--accent:#ff5a1f; --accent-soft:#fff1ea; --danger:#d63b2a;
--r-lg:28px; --r-md:18px; --r-sm:10px;
--font-family:"Pretendard",-apple-system,"Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
body{
margin:0;min-height:100vh;font-family:var(--font-family);
color:var(--fg);background:var(--chip);
display:flex;flex-direction:column;
}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.card{
width:100%;max-width:400px;background:var(--surface);border-radius:var(--r-lg);
padding:44px 38px 34px;box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.card.shake{animation:shake .35s}
@keyframes shake{
0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)}
}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:30px}
.brand .box{width:38px;height:38px;border-radius:var(--r-sm);overflow:hidden;background:var(--chip);flex-shrink:0}
.brand .box img{width:100%;height:100%;object-fit:cover;display:block}
.brand .t{font-weight:700;font-size:17px;letter-spacing:-.01em}
.brand .s{display:block;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.1em;margin-top:1px}
h1{font-size:22px;font-weight:700;margin:0 0 6px;letter-spacing:-.02em}
.lead{font-size:14px;color:var(--muted);margin:0 0 26px}
label{display:block;font-size:13px;font-weight:700;color:var(--muted-2);margin-bottom:7px}
input[type=text],input[type=password]{
width:100%;padding:13px 15px;font-size:15px;font-family:inherit;
border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--fg);
transition:border-color .18s;
}
input:focus{border-color:var(--accent);outline:none}
.field{margin-bottom:16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted-2);font-weight:700;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.link{font-size:13.5px;color:var(--muted);font-weight:700;background:none;border:0;padding:0;text-decoration:underline}
.submit{
width:100%;padding:15px;border:0;border-radius:100px;background:var(--chip);color:#fff;
font-size:15.5px;font-weight:700;transition:background .2s;
}
.submit:hover{background:var(--accent);color:var(--on-accent, var(--black))}
.err{
display:none;align-items:center;gap:8px;background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);
border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;font-weight:700;margin-bottom:18px;
}
.err.on{display:flex}
.hint{margin-top:24px;padding-top:20px;border-top:1px solid var(--gray-100);font-size:12.5px;color:var(--muted);line-height:1.7}
.hint code{background:var(--surface-2);padding:2px 6px;border-radius:var(--r-sm);font-size:12px;font-weight:700;color:var(--fg)}
@media(max-width:520px){
.card{padding:34px 24px 26px;border-radius:var(--r-md)}
.stage{padding:28px 16px}
}
@media print{ body{background:#fff} .card{box-shadow:none;border:1px solid var(--line)} }
/* 보내는 중에는 다시 누르지 못하게 한다 */
.submit:disabled{opacity:.55;cursor:default}
.hint b{color:var(--fg)}
/* ══════════════════════════════════════════════════════════════════════
어두운 화면 — 기기 설정을 따른다 (prefers-color-scheme)
──────────────────────────────────────────────────────────────────────
브랜드 색(오렌지)과 «흰 글자»는 그대로 둔다. 바꾸는 것은 역할 토큰뿐이다.
--chip 은 반전하지 않고 «조금 들어 올린다» — 반전하면 그 위의 흰 글자가
읽히지 않는다. 어두운 바탕에서도 칩이 페이지와 구분되기만 하면 된다.
══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
/* 기기가 어둡다. 다만 화면에서 «밝게» 를 고른 분은 빼 준다. */
:root:not([data-theme="light"]) {
--bg: #0f1113;
--surface: #16181c;
--surface-2: #1c1f24;
--line: #2b2f35;
--fg: #e8e8ea;
--fg-strong: #f4f4f7;
--muted: #9a9aa4;
--muted-2: #c2c2cb;
--chip: #262a30;
--accent-soft: #2b1710;
--shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.55);
--shadow-hard: 0 30px 80px rgba(0, 0, 0, 0.70);
}
}
/* 🔴 위와 «똑같은» 값이어야 한다. 위는 기기 설정을 따르는 몫,
아래는 화면에서 «어둡게» 를 고른 몫이다. CSS 에는 미디어 조건 안팎을
함께 묶는 방법이 없어 두 벌이 되었다 — check:theme 이 둘을 견준다. */
:root[data-theme="dark"] {
--bg: #0f1113;
--surface: #16181c;
--surface-2: #1c1f24;
--line: #2b2f35;
--fg: #e8e8ea;
--fg-strong: #f4f4f7;
--muted: #9a9aa4;
--muted-2: #c2c2cb;
--chip: #262a30;
--accent-soft: #2b1710;
--shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.55);
--shadow-hard: 0 30px 80px rgba(0, 0, 0, 0.70);
}