/* ===== 성지문자 공통 CSS v2 ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
:root {
  --navy:#0D2B6E;--navy-dark:#081A4A;--navy-mid:#122F7A;--navy-light:#1A4099;
  --red:#C0392B;--red-light:#E74C3C;
  --gold:#C9A84C;--gold-light:#E2C06A;--gold-bg:#FFF8E7;
  --white:#FFFFFF;--bg:#F0F4FF;--bg2:#E8EDF8;
  --gray:#64748B;--gray-light:#E2E8F8;
  --border:#C8D4F0;--border-dark:#A0B0DC;
  --text:#1A1E2E;--text-light:#4A5568;
  --ok:#1B7A40;--ok-bg:#E8F8EE;--ok-border:#B8E8CC;
  --fail:#B91C1C;--fail-bg:#FEE2E2;--fail-border:#FCA5A5;
  --warn:#92600A;--warn-bg:#FFFBEB;--warn-border:#F6D860;
  --shadow-sm:0 1px 4px rgba(13,43,110,0.08);
  --shadow:0 4px 16px rgba(13,43,110,0.10);
  --shadow-lg:0 8px 32px rgba(13,43,110,0.14);
  --radius:10px;--radius-sm:6px;--radius-lg:14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans KR',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* NAV */
.topnav{background:var(--navy-dark);padding:0 32px;height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:200;box-shadow:0 2px 12px rgba(0,0,0,0.3)}
.logo-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;flex-shrink:0}
.logo-icon{width:34px;height:34px;background:var(--gold);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:var(--navy-dark);flex-shrink:0}
.logo-text{font-size:19px;font-weight:900;color:#fff;letter-spacing:-0.5px}
.logo-text span{color:var(--gold)}
.nav-menu{display:flex;gap:2px;align-items:center}
.nav-item{padding:7px 12px;border-radius:var(--radius-sm);font-size:13px;color:rgba(255,255,255,0.7);cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap}
.nav-item:hover{color:#fff;background:rgba(255,255,255,0.1)}
.nav-item.active{color:var(--gold);background:rgba(201,168,76,0.12)}
.nav-btns{display:flex;gap:7px;align-items:center;flex-shrink:0}
.btn-nav-login{padding:6px 14px;border-radius:var(--radius-sm);border:1px solid rgba(201,168,76,0.55);background:transparent;color:var(--gold);font-size:13px;cursor:pointer;transition:all .15s;font-family:'Noto Sans KR',sans-serif;white-space:nowrap}
.btn-nav-login:hover{background:rgba(201,168,76,0.12);border-color:var(--gold)}
.btn-nav-join{padding:6px 14px;border-radius:var(--radius-sm);border:none;background:var(--red);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:'Noto Sans KR',sans-serif;white-space:nowrap}
.btn-nav-join:hover{background:var(--red-light)}
.user-info{display:flex;align-items:center;gap:8px}
.pts-display{background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.3);border-radius:99px;padding:4px 12px;font-size:12px;color:var(--gold);white-space:nowrap}
.pts-display b{font-weight:700}

/* LAYOUT */
.page-wrap{max-width:1100px;margin:0 auto;padding:28px 32px}
.page-header{margin-bottom:22px}
.page-title{font-size:22px;font-weight:900;color:var(--navy-dark);letter-spacing:-0.5px;margin-bottom:4px}
.page-title span{color:var(--red)}
.page-sub{font-size:13px;color:var(--gray)}

/* CARD */
.card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border);padding:20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.card:last-child{margin-bottom:0}
.card-title{font-size:13px;font-weight:700;color:var(--navy-dark);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--gray-light);display:flex;justify-content:space-between;align-items:center}

/* FORM */
.form-group{margin-bottom:13px}
.form-group:last-child{margin-bottom:0}
.form-label{display:block;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:5px}
.form-input{width:100%;padding:9px 12px;border-radius:var(--radius-sm);background:var(--white);border:1.5px solid var(--border);color:var(--text);font-size:13px;outline:none;transition:all .15s;font-family:'Noto Sans KR',sans-serif}
.form-input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,43,110,0.07)}
.form-input[readonly],.form-input:disabled{background:var(--bg2);color:var(--gray);cursor:not-allowed}
.form-input::placeholder{color:#A0AEC0}
textarea.form-input{resize:vertical;line-height:1.6}
select.form-input{cursor:pointer}

/* BTN */
.btn{padding:9px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;border:none;font-family:'Noto Sans KR',sans-serif;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:active{transform:scale(0.98)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-light)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-light)}
.btn-gold{background:transparent;border:1.5px solid var(--gold);color:var(--gold)}
.btn-gold:hover{background:rgba(201,168,76,0.1)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text-light)}
.btn-outline:hover{border-color:var(--navy);color:var(--navy)}
.btn-green{background:#1B7A40;color:#fff}
.btn-green:hover{background:#1A6B38}
.btn-full{width:100%;justify-content:center;padding:12px;font-size:14px}
.btn-sm{padding:5px 11px;font-size:11px}

/* TABLE */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:12px}
thead th{background:var(--navy-dark);color:rgba(255,255,255,0.9);padding:10px 12px;text-align:left;font-size:11px;font-weight:600;white-space:nowrap}
thead th:first-child{border-radius:var(--radius-sm) 0 0 0}
thead th:last-child{border-radius:0 var(--radius-sm) 0 0}
tbody td{padding:10px 12px;border-bottom:1px solid var(--gray-light);color:var(--text);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#EEF2FF}

/* BADGE */
.badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}
.badge-fail{background:var(--fail-bg);color:var(--fail);border:1px solid var(--fail-border)}
.badge-wait{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}
.badge-navy{background:#EEF2FF;color:var(--navy);border:1px solid #C7D2FE}
.badge-gold{background:var(--gold-bg);color:var(--warn);border:1px solid var(--warn-border)}
.badge-purple{background:#F3E5F5;color:#7B1FA2;border:1px solid #CE93D8}

/* GRADE */
.grade-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}
.gb-bronze{background:#FFF3E0;color:#CD7F32;border:1px solid #FFCC80}
.gb-silver{background:#F5F5F5;color:#616161;border:1px solid #BDBDBD}
.gb-gold{background:#FFFDE7;color:#B8860B;border:1px solid #FFE57F}
.gb-plat{background:#E0F7FA;color:#00838F;border:1px solid #80DEEA}
.gb-dia{background:#F3E5F5;color:#7B1FA2;border:1px solid #CE93D8}

/* ROLE */
.role-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700}
.rb-super{background:var(--fail-bg);color:var(--fail);border:1px solid var(--fail-border)}
.rb-manager{background:var(--gold-bg);color:var(--warn);border:1px solid var(--warn-border)}
.rb-staff{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE}

/* NOTICE */
.notice{padding:10px 14px;border-radius:var(--radius-sm);font-size:12px;line-height:1.7;margin-bottom:12px}
.notice:last-child{margin-bottom:0}
.notice-blue{background:#EEF2FF;border:1px solid #C7D2FE;color:var(--navy)}
.notice-red{background:var(--fail-bg);border:1px solid var(--fail-border);color:var(--fail)}
.notice-gold{background:var(--gold-bg);border:1px solid var(--warn-border);color:var(--warn)}
.notice-green{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok)}

/* STATUS DOT */
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-green{background:#1B7A40}
.dot-red{background:#B91C1C}
.dot-gray{background:var(--gray)}
.dot-yellow{background:#D97706}
.api-status{display:flex;align-items:center;gap:6px;font-size:11px}

/* DIVIDER */
.divider{border:none;border-top:1px solid var(--border);margin:14px 0}

/* INLINE ROW */
.inline-row{display:flex;gap:8px;align-items:flex-end}
.inline-row .form-input{flex:1}
.inline-row .btn{flex-shrink:0}

/* GRID HELPERS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* FOOTER */
footer{background:var(--navy-dark);padding:22px 32px;color:rgba(255,255,255,0.45);font-size:12px;border-top:3px solid var(--gold);margin-top:auto}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-logo{font-size:15px;font-weight:900;color:#fff}
.footer-logo span{color:var(--gold)}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-link{color:rgba(255,255,255,0.45);text-decoration:none;font-size:12px}
.footer-link:hover{color:var(--gold)}

/* TOGGLE */
.toggle{position:relative;width:38px;height:20px;cursor:pointer;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#C8D4F0;border-radius:99px;transition:.2s}
.toggle-slider:before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:white;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--red)}
.toggle input:checked+.toggle-slider:before{transform:translateX(18px)}

/* ===== 전역 다크모드 ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1117;
    --bg2: #1a1d27;
    --white: #1e2130;
    --border: #2e3350;
    --border-dark: #3d4870;
    --text: #e8eaf0;
    --text-light: #9aa5b8;
    --gray: #6b7485;
    --gray-light: #252840;
  }
  body { background: var(--bg); color: var(--text); }

  /* 네비 유지 (navy-dark 그대로) */

  /* 카드 */
  .card { background: #1e2130; border-color: #2e3350; }
  .card-title { color: #c8d0e8; border-bottom-color: #2e3350; }

  /* 폼 */
  .form-label { color: #9aa5b8; }
  .form-input { background: #1a1d27; border-color: #2e3350; color: #e8eaf0; }
  .form-input::placeholder { color: #4a5568; }
  .form-input:focus { border-color: #5b7aed; }
  .form-input[readonly], .form-input:disabled { background: #141620; color: #6b7485; }
  select.form-input option { background: #1e2130; color: #e8eaf0; }

  /* 버튼 */
  .btn-outline { background: transparent; border-color: #2e3350; color: #9aa5b8; }
  .btn-outline:hover { border-color: #5b7aed; color: #7b9ef8; }
  .btn-gold { border-color: rgba(201,168,76,0.4); color: #d4af37; }
  .btn-gold:hover { background: rgba(201,168,76,0.08); }

  /* 페이지 헤더 */
  .page-title { color: #e8eaf0; }
  .page-title span { color: #e84444; }
  .page-sub { color: #6b7485; }

  /* 테이블 */
  table { color: #e8eaf0; }
  thead th { background: #0a0d1a; color: rgba(255,255,255,0.85); }
  tbody td { color: #e8eaf0; border-bottom-color: #252840; }
  tbody tr:hover td { background: #1e2e40; }
  .tbl-wrap { border-color: #2e3350; }

  /* 알림 박스 */
  .notice-blue { background: #0f1e40; border-color: #1e3060; color: #7b9ef8; }
  .notice-red { background: #2a0a0a; border-color: #5a1a1a; color: #f87171; }
  .notice-gold { background: #1a1200; border-color: #3a2800; color: #d4af37; }
  .notice-green { background: #0a1a0a; border-color: #1a3a1a; color: #4ade80; }

  /* 뱃지 */
  .badge-ok { background: #0a1a0a; color: #4ade80; border-color: #1a3a1a; }
  .badge-fail { background: #2a0a0a; color: #f87171; border-color: #5a1a1a; }
  .badge-wait { background: #1a1200; color: #d4af37; border-color: #3a2800; }
  .badge-navy { background: #0f1e40; color: #7b9ef8; border-color: #1e3060; }
  .badge-gold { background: #1a1200; color: #d4af37; border-color: #3a2800; }
  .badge-purple { background: #1a0a30; color: #c084fc; border-color: #3a1a60; }

  /* 등급 뱃지 */
  .gb-bronze { background: #1a0e00; color: #cd7f32; border-color: #3a2000; }
  .gb-silver { background: #141414; color: #9e9e9e; border-color: #2e2e2e; }
  .gb-gold { background: #1a1400; color: #b8860b; border-color: #3a2c00; }
  .gb-plat { background: #001a1c; color: #00838f; border-color: #00363a; }
  .gb-dia { background: #100a20; color: #c084fc; border-color: #2a1a40; }

  /* 직급 뱃지 */
  .rb-super { background: #2a0a0a; color: #f87171; border-color: #5a1a1a; }
  .rb-manager { background: #1a1200; color: #d4af37; border-color: #3a2800; }
  .rb-staff { background: #0a1230; color: #7b9ef8; border-color: #1e2e60; }

  /* 푸터 유지 (navy-dark 그대로) */
}