:root{color-scheme:light;--blue:#3b4890;--bg:#fff;--panel:#fff;--text:#333;--muted:#777;--border:#d5d5d5;--soft:#f5f5f5}
html.darkmode{color-scheme:dark;--blue:#59659f;--bg:#151515;--panel:#222;--text:#ddd;--muted:#aaa;--border:#3b3b3b;--soft:#2a2a2a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"NanumGothic",sans-serif;font-size:13px}
a{color:var(--blue);text-decoration:none}
button,input,select{font:inherit}
button{border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer}
.primary{border-color:#29367c;background:#3b4890;color:#fff;font-weight:700}
.auth-shell{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px}
.auth-card{width:100%;max-width:390px;padding:30px;border:1px solid var(--border);background:var(--panel)}
.auth-card h1{margin:0 0 24px;color:var(--blue);font-size:28px}
.auth-card h2{margin:0 0 18px;font-size:18px}
.auth-card label{display:block;margin:12px 0;color:var(--muted);font-weight:700}
.auth-card input,.admin-card input,.admin-card select{width:100%;height:38px;margin-top:6px;padding:0 10px;border:1px solid var(--border);background:var(--bg);color:var(--text)}
.auth-card .primary{width:100%;height:42px;margin-top:12px}
.auth-help{margin:18px 0 0;text-align:center;color:var(--muted)}
.form-error{padding:10px;border:1px solid #d55;background:#fff3f3;color:#b11}
.darkmode .form-error{background:#3a2020;color:#ffaaaa}
.admin-head{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 max(16px,calc((100% - 1100px)/2));border-bottom:3px solid var(--blue);background:var(--panel)}
.admin-head>a,.admin-head>.head-title{font-size:20px;font-weight:700;color:var(--blue)}
/* 내 계정 화면은 좌측 제목이 없다. 자식이 하나뿐이라 space-between 이 왼쪽으로 붙이므로 직접 민다. */
.admin-head>div{margin-left:auto}
.inline{display:inline}.inline button{margin-left:8px}
.admin-shell{width:min(1100px,calc(100% - 24px));margin:24px auto 60px}
.admin-shell>h1{font-size:24px}
.admin-card,.invite-result{margin-top:18px;padding:18px;border:1px solid var(--border);background:var(--panel)}
.admin-card h2,.invite-result h2{margin:0 0 14px;font-size:16px}
.admin-form-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:end;gap:10px}
.admin-form-grid label{color:var(--muted);font-weight:700}
.admin-form-grid .primary{height:38px;padding:0 18px}
.invite-result{border-color:var(--blue);background:var(--soft)}
.invite-result code{display:block;overflow-wrap:anywhere;padding:12px;background:var(--bg);font-size:15px;user-select:all}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;white-space:nowrap}
th,td{padding:9px;border-bottom:1px solid var(--border);text-align:left}
th{background:var(--soft)}
.actions{display:flex;gap:6px}.actions form{display:inline}
@media(max-width:700px){
  .auth-card{padding:22px 18px}
  .admin-head{padding:0 12px}
  .admin-shell{margin-top:14px}
  .admin-form-grid{grid-template-columns:1fr}
  .admin-form-grid .primary{width:100%}
  .admin-card,.invite-result{padding:13px}
}

.form-ok{padding:10px;border:1px solid #4a8;background:#f0fff6;color:#176}
.darkmode .form-ok{background:#1f3a2c;color:#9fd8b8}
.auth-note{margin:0 0 6px;color:var(--muted);line-height:1.5}
.head-link{margin-left:10px;font-size:12px}
.profile-info{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;margin:0}
.profile-info dt{color:var(--muted);font-weight:700}.profile-info dd{margin:0}
.profile-form{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:end;gap:10px}
.profile-form label{color:var(--muted);font-weight:700}
.profile-form input{width:100%;height:38px;margin-top:6px;padding:0 10px;border:1px solid var(--border);background:var(--bg);color:var(--text)}
.profile-form .primary{height:38px;padding:0 18px}
tr.current{background:var(--soft)}
td.ua{max-width:420px;overflow:hidden;text-overflow:ellipsis}
.revoke-all{margin-top:12px;text-align:right}
td.empty{text-align:center;color:var(--muted)}
.admin-card h2 small{margin-left:6px;color:var(--muted);font-weight:400}
@media(max-width:700px){.profile-form{grid-template-columns:1fr}.profile-form .primary{width:100%}.profile-info{grid-template-columns:96px 1fr}}

/* 로그인: 아이디 저장 체크박스 (auth-card 공용 스타일 재사용) */
.auth-card label.auth-remember{display:flex;align-items:center;gap:8px;margin:2px 0 0;color:var(--text);font-weight:400;font-size:13px;cursor:pointer}
.auth-card label.auth-remember input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.auth-card .auth-help a{margin:0 2px}
/* 로그인 폼 폰트: Pretendard (login.html 에서 CDN 로드). auth-card 전체에 상속 */
.login-page{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}

/* 알림 설정 카드. 기존 admin-card 위에 얹는 최소한의 규칙만 둔다. */
.push-device{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.push-device .primary{height:38px;padding:0 18px}
#push_state{margin:0}
.push-prefs{display:grid;gap:10px;justify-items:start}
.push-check{display:flex;align-items:center;gap:10px;cursor:pointer}
.push-check input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.push-check span{display:flex;flex-direction:column;line-height:1.4}
.push-check small{color:var(--muted)}
.push-prefs .primary{height:34px;margin-top:4px;padding:0 18px}
/* 메인 화면의 "알림 설정" 링크로 들어오면 어느 카드인지 바로 보이게 한다. */
#push_card:target { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(59, 72, 144, .18); }