:root {
  --bg: #eef6fb; --panel: #ffffff; --side: #0f3b5c; --side-2: #154d75;
  --text: #13293d; --muted: #6b8196; --line: #d9e6ef;
  --primary: #1e88e5; --primary-2: #1565c0; --danger: #e5484d; --ok: #1faa6b; --warn: #f0a020;
  --radius: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
.hidden { display: none !important; }
h2 { margin: 0 0 14px; font-size: 20px; }
code { background: #e6f0f7; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.muted { color: var(--muted); } .sm { font-size: 12px; }
.err { color: var(--danger); min-height: 18px; margin: 8px 0 0; font-size: 13px; }
.row { display: flex; align-items: center; } .between { justify-content: space-between; } .gap { gap: 8px; } .wrap { flex-wrap: wrap; }
input, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; color: var(--text); }
input:focus, textarea:focus { outline: 2px solid #9fd0f5; border-color: var(--primary); }
.label { font-weight: 600; margin: 10px 0 6px; display: block; }
.card .label:first-child { margin-top: 0; }

.btn { border: 1px solid var(--line); background: #fff; color: var(--text); padding: 9px 14px; border-radius: 8px; cursor: pointer; font: inherit; white-space: nowrap; }
.btn:hover { background: #f3f8fc; }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-2); }
.btn.danger { color: var(--danger); border-color: #f3c3c4; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.wide { width: 100%; margin-top: 6px; }

/* 로그인 / 회원가입 랜딩 (기존 에디봇: 크림 + 파스텔 칩 테마) */
.auth { position: fixed; inset: 0; background: #f7f1e8; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 2000; padding: 0 0 40px; overflow-y: auto; overflow-x: hidden; color: #1c1a17; -webkit-font-smoothing: antialiased; }
.auth.hidden { display: none !important; }
.lp { width: 100%; max-width: 1080px; padding: 0 28px; }
.lp-hero { position: relative; display: grid; grid-template-columns: 1fr 388px; gap: 48px; align-items: start; padding: 54px 0 16px; }
.lp-left { position: relative; z-index: 2; max-width: 470px; padding-bottom: 160px; }
.lp-brand { display: none; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; margin-bottom: 20px; position: relative; z-index: 3; }
.lp-brand .logo { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #f3ad60, #e08a2e); display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 12px rgba(224,138,46,.38); flex-shrink: 0; padding: 0; }
.lp-eyebrow { position: relative; z-index: 3; font-size: 11px; font-weight: 800; letter-spacing: 2.4px; color: #9a8a76; margin-bottom: 16px; }
.lp-title { position: relative; z-index: 3; font-size: 35px; font-weight: 800; line-height: 1.36; letter-spacing: -.6px; margin-bottom: 18px; }
.lp-title .accent { color: #e8862b; }
.lp-sub { position: relative; z-index: 3; font-size: 13.5px; color: #8b8178; line-height: 1.85; margin-bottom: 30px; }
.lp-quote { position: relative; z-index: 3; font-size: 13px; color: #5c544c; line-height: 1.7; margin-bottom: 10px; }
.lp-dl { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 20px 12px 16px; border-radius: 14px; background: linear-gradient(135deg, #f3ad60, #e08a2e); color: #fff; text-decoration: none; box-shadow: 0 8px 20px rgba(224,138,46,.32); }
.lp-dl .ic { font-size: 24px; }
.lp-dl b { display: block; font-size: 15px; }
.lp-dl small { display: block; font-size: 11.5px; opacity: .9; margin-top: 2px; }
.lp-dl:hover { filter: brightness(1.05); }
@media (max-width: 820px) { .lp-dl { display: none; } } /* 폰에서는 PC 설치 파일이 필요 없어요 */
.lp-quote .who { display: block; margin-top: 7px; font-size: 11.5px; color: #a2968a; }
.lchip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.25; box-shadow: 0 3px 10px rgba(90,65,35,.10); }
.lchip.c1 { background: #e7e0f4; color: #6b5b95; }
.lchip.c2 { background: #d9e6f3; color: #48678a; }
.lchip.c3 { background: #d9ece1; color: #3e7a63; }
.lchip.c4 { background: #f6dde3; color: #a8546c; }
.lchip.c5 { background: #f7e2cd; color: #b06a2c; }
.lchip.c6 { background: #f5ecc6; color: #95762a; }
.lchip.c7 { background: #e9e5df; color: #6f665c; }
.lchip.dark { background: #211f1c; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.lp-float { position: absolute; top: -18px; right: -46px; bottom: 0; left: 0; z-index: 1; pointer-events: none; }
.lp-float .lchip { position: absolute; white-space: nowrap; }
.f1 { left: 56%; top: 1%; } .f2 { left: 80%; top: 9%; } .f3 { left: 64%; top: 19%; } .f4 { left: 50%; top: 32%; }
.f5 { left: 76%; top: 41%; } .f6 { left: 54%; top: 53%; } .f7 { left: 72%; top: 62%; } .f8 { left: 0%; top: 91%; }
.f9 { left: 22%; top: 85%; } .f10 { left: 46%; top: 79%; } .f11 { left: 70%; top: 90%; } .f12 { left: 2%; top: 76%; }
.m-only { display: none; } .only-mo { display: none; } .only-pc { display: block; }
.auth-card { width: 100%; background: #fff; border: 1px solid #f0e7da; border-radius: 24px; padding: 30px 28px; box-shadow: 0 20px 48px rgba(95,70,40,.11); position: relative; z-index: 4; margin: 0; }
.auth-card-header { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.lp-brand .logo img, .auth-card .logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.auth-card .logo { width: 34px; height: 34px; background: linear-gradient(135deg, #f3ad60, #e08a2e); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: 0 6px 14px rgba(224,138,46,.32); flex-shrink: 0; padding: 0; }
.auth-card h2 { text-align: left; font-size: 17.5px; font-weight: 800; color: #1c1a17; margin: 0; }
.auth-card .auth-sub { text-align: left; font-size: 12px; color: #a2968a; margin: 0 0 20px; }
.auth-tabs { display: flex; gap: 26px; margin-bottom: 6px; border-bottom: 1px solid #eee5d8; }
.auth-tab { flex: 0 0 auto; padding: 0 2px 11px; font-size: 14px; font-weight: 700; color: #a99c8d; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.auth-tab.active { color: #1c1a17; border-bottom-color: #1c1a17; }
.auth-card label { display: block; color: #4a433c; font-weight: 700; font-size: 12.5px; margin-top: 18px; margin-bottom: 7px; }
.auth-card input[type="text"], .auth-card input[type="password"] { width: 100%; background: #faf7f2; border: 1px solid #ebe1d2; border-radius: 12px; padding: 13px 14px; font-size: 13.5px; color: #1c1a17; outline: none; }
.auth-card input[type="text"]:focus, .auth-card input[type="password"]:focus { border-color: #e8933c; background: #fff; outline: none; }
.auth-card input::placeholder { color: #b5aa9c; opacity: 1; }
.in-wrap { position: relative; }
.in-wrap .in-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .4; pointer-events: none; }
.in-wrap input { padding-left: 36px !important; }
.auth-card .auto-login { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 400; color: #6f665c; margin-top: 16px; cursor: pointer; }
.auth-card .auto-login input { width: auto; margin: 0; }
.auth-card .btn-connect { width: 100%; margin-top: 18px; border: 0; cursor: pointer; font: inherit; background: linear-gradient(135deg, #f3ad60, #d97e2a); color: #fff; border-radius: 12px; padding: 14px; font-size: 14.5px; font-weight: 700; box-shadow: 0 10px 20px rgba(217,126,42,.26); }
.auth-card .forgot { display: block; width: 100%; text-align: center; margin-top: 14px; background: none; border: none; cursor: pointer; color: #8b8178; font: inherit; font-size: 12px; text-decoration: underline; }
.lp-switch { text-align: center; margin-top: 14px; font-size: 12.5px; color: #8b8178; }
.lp-switch b { color: #e8862b; font-weight: 800; cursor: pointer; }
.auth-error { font-size: 12.5px; color: #e11d48; margin-top: 8px; min-height: 16px; text-align: center; }
.lp-features { width: 100%; padding: 34px 0 10px; text-align: center; }
.lp-feat-head { font-size: 12.5px; font-weight: 700; color: #9a8a76; margin-bottom: 20px; }
.lp-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 740px; margin: 0 auto; }
.lp-foot { margin-top: 28px; font-size: 11px; color: #a89c8e; line-height: 1.85; }
.lp-foot a { color: #e8862b; text-decoration: none; font-weight: 700; }
@media (max-width: 1000px) {
  .lp-hero { grid-template-columns: 1fr 350px; gap: 28px; }
  .lp-title { font-size: 30px; }
  .lp-float { right: -60px; }
}
@media (max-width: 820px) {
  .auth { padding-bottom: 28px; }
  .lp { padding: 0; }
  .lp-hero { display: block; padding: 0; }
  .lp-left { max-width: none; background: #1f1d1a; padding: 20px 20px 98px; border-radius: 0 0 4px 4px; overflow: hidden; }
  .only-mo { display: block; } .only-pc { display: none; }
  .lp-brand { display: flex; color: #fff; }
  .lp-eyebrow { display: none; }
  .lp-title { font-size: 25px; color: #fff; line-height: 1.4; margin-bottom: 14px; }
  .lp-sub { color: rgba(255,255,255,.55); font-size: 12.5px; line-height: 1.7; margin-bottom: 0; }
  .lp-quote { display: none; }
  .lp-float { inset: 0; right: 0; }
  .m-only { display: inline-flex; } .d-only { display: none; }
  .f1 { left: 66%; top: 3%; } .f3 { left: 40%; top: 11%; } .f6 { left: 72%; top: 21%; } .f7 { left: 58%; top: 13%; }
  .fm1 { left: 1%; top: 0%; } .fm2 { left: 34%; top: 0%; } .fm3 { left: 2%; top: 73%; } .fm4 { left: 44%; top: 69%; } .fm5 { left: 76%; top: 62%; }
  .auth-card { margin: -58px 16px 0; padding: 26px 22px; border-radius: 24px; width: auto; }
  .lp-features { padding: 30px 20px 10px; }
  .lp-cloud { gap: 8px; }
  .lchip { font-size: 11px; padding: 6px 12px; }
}
@media (max-width: 400px) {
  .lp-title { font-size: 22px; }
  .auth-card { margin: -58px 12px 0; padding: 24px 18px; }
}

/* 앱 */
.app { display: flex; min-height: 100vh; }
.side { width: 250px; flex-shrink: 0; background: #fff; color: var(--text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid #d7ecf5; box-shadow: 1px 0 8px rgba(20,20,40,.04); }
.logo { font-weight: 800; font-size: 20px; padding: 0 8px 14px; }
/* 사이드바 — 기존 에디봇 메뉴 디자인 */
.side .brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid #d7ecf5; }
.side .brand .blogo { width: 32px; height: 32px; background: linear-gradient(135deg, #0ea5e9, #fb923c); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.side .brand .blogo img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.side .brand h1 { margin: 0; font-size: 16px; font-weight: 800; color: #0f2a3a; }
.side .brand .sub { font-size: 11px; color: #6b8a9a; margin-top: 1px; }
.side nav { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-bottom: 10px; }
.nav-group-label { font-size: 10px; font-weight: 700; color: #6b8a9a; letter-spacing: 1px; padding: 16px 16px 6px; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; flex: none; }
.nav-group-label::after { content: '▾'; font-size: 11px; opacity: .7; transition: transform .15s; }
.nav-group-label.collapsed::after { transform: rotate(-90deg); }
.side nav button.group-collapsed { display: none !important; }
.side nav button { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 1px 8px; border-radius: 9px; cursor: pointer; color: #0f2a3a; font: inherit; font-size: 13.5px; text-align: left; background: transparent; border: 0; transition: background .12s; user-select: none; }
.side nav button:hover { background: #eef7fb; }
.side nav button.on { background: linear-gradient(135deg, rgba(14,165,233,.20), rgba(251,146,60,.14)); box-shadow: inset 0 0 0 1px rgba(14,165,233,.4); color: #0f2a3a; }
.side nav .ic { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; }
.side nav .ic.ic-img { display: flex; align-items: center; justify-content: center; width: 24px; margin-right: 2px; }
.side nav .ic.ic-img img { width: 24px; height: 24px; object-fit: contain; display: block; }
.side nav .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .4px; padding: 2px 6px; border-radius: 20px; flex-shrink: 0; cursor: pointer; user-select: none; transition: transform .1s; }
.nav-badge:active { transform: scale(.92); }
.nav-badge.on { background: rgba(74,222,128,.15); color: #16a34a; }
.nav-badge.off { background: rgba(225,29,72,.12); color: #e11d48; }
.nav-new { color: #ef4444; font-size: 11px; font-weight: 800; margin-left: 6px; }
.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 16px; font-size: 12px; color: #6b8a9a; border-top: 1px solid #d7ecf5; }
.side-foot .btn { color: #0f2a3a; border-color: #d7ecf5; }
.main { flex: 1; padding: 24px; max-width: 980px; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card.warn { background: #fff8e8; border-color: #f3dca8; font-size: 13px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: #e7edf2; color: var(--muted); }
.badge.live { background: #dff6ea; color: var(--ok); }
.badge.offline { background: #e8f1f8; color: var(--primary-2); }
.badge.bad { background: #fde7e8; color: var(--danger); }
.badge.warn { background: #fff1d6; color: #a76800; }

.log { height: 380px; overflow-y: auto; background: #f7fbfe; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 13px; }
.log .l { padding: 3px 0; line-height: 1.45; word-break: break-all; white-space: pre-wrap; }
.log .t { color: var(--muted); font-size: 11px; margin-right: 6px; }
.log .n { font-weight: 700; margin-right: 6px; }
.h { font-weight: 600; font-size: 11px; color: var(--primary-2); background: #e3f0fb; border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.log .dj .n { color: #8e44ad; }
.log .bot { color: var(--primary-2); }
.log .join { color: var(--muted); }
.log .like { color: #d6336c; }
.log .donation { color: #b7791f; font-weight: 600; }
.log .error { color: var(--danger); }

.list { display: grid; gap: 8px; margin-bottom: 10px; }
.item { display: grid; grid-template-columns: 160px 1fr auto; gap: 8px; align-items: center; }
.item.rep { grid-template-columns: 1fr 90px auto; }
.item .del { color: var(--danger); }

.switch { position: relative; width: 44px; height: 24px; display: inline-block; flex: none; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; background: #c6d4df; border-radius: 99px; cursor: pointer; transition: .2s; }
.switch span::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(20px); }

.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.grid4 label { font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
.sm-input { max-width: 180px; padding: 6px 10px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px); background: #13293d; color: #fff; padding: 10px 18px; border-radius: 99px; transition: .25s; z-index: 10; font-size: 13px; }
.toast.show { transform: translateX(-50%) translateY(0); }

/* 📱 모바일 — 기존 에디냥처럼: 사이드바는 숨겨두고 ☰ 누르면 왼쪽에서 열림 */
.mtopbar, .side-backdrop { display: none; }
@media (max-width: 860px) {
  .side { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; z-index: 50; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .side.open { transform: translateX(0); }
  .side-backdrop.open { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(15,15,19,.35); }
  .mtopbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; margin: -16px -16px 14px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #d7ecf5; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #fff; border: 1px solid #d7ecf5; border-radius: 9px; font-size: 16px; cursor: pointer; flex-shrink: 0; }
  .mtopbar h2 { margin: 0; font-size: 16px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtopbar .mid { font-size: 12px; color: #6b8a9a; flex-shrink: 0; }
  .main { padding: 16px; max-width: none; }
  .main > .page > h2:first-child { display: none; }
}
@media (max-width: 760px) {
  .item { grid-template-columns: 1fr; }
  .item.rep { grid-template-columns: 1fr 80px auto; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
}

/* 대시보드 */
.dgrid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.dgrid2 .card { margin-bottom: 14px; }
.card.stat { display: flex; align-items: center; gap: 14px; min-height: 96px; }
.stat-ico { font-size: 30px; }
.stat-k { font-size: 12px; color: var(--muted); }
.stat-v { font-size: 22px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-v.sm { font-size: 17px; }
.stat-v.orange { color: #f08c00; }
.stat-v.blue { color: var(--primary); }
.stat-s { font-size: 12px; color: #f08c00; margin-top: 2px; }
.card.heart { text-align: center; padding: 12px; }
.note { margin: -6px 0 14px; }
.mini-t { font-weight: 700; margin-bottom: 8px; }
.mini-list .mi { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.mini-list .mi:last-child { border-bottom: 0; }
.mini-list .mi b { font-variant-numeric: tabular-nums; }
.mini-list .empty { color: var(--muted); font-size: 13px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0 16px; }
.cal .dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal .dow.sun, .cal .c.sun .dn { color: var(--danger); }
.cal .dow.sat, .cal .c.sat .dn { color: #f08c00; }
.cal .c { min-height: 58px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; background: #fff; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.cal .c:hover { border-color: var(--primary); }
.cal .c.out { background: #eef4f9; cursor: default; color: var(--muted); }
.cal .c.today { border: 2px solid #f08c00; }
.cal .dn { font-size: 12px; font-weight: 700; }
.cal .sp { font-size: 12px; font-weight: 800; color: #f08c00; text-align: right; font-variant-numeric: tabular-nums; }
.dgrid-mvp { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
.subcard { background: #eef6fc; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.weeks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wk { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.wk .wh { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--primary-2); margin-bottom: 6px; }
.wk .wh button { background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--text); }
.log.tall { height: calc(100vh - 230px); min-height: 360px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.modal { position: fixed; inset: 0; background: rgba(10, 30, 50, .45); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; padding: 18px; }
.modal-box form { display: grid; gap: 8px; margin-top: 10px; }
@media (max-width: 760px) {
  .dgrid2, .dgrid-mvp, .weeks { grid-template-columns: 1fr; }
  .cal .c { min-height: 46px; padding: 3px 4px; }
  .cal .sp { font-size: 10px; }
}

/* 입장설정 */
.etabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.etabs button { border: 1px solid var(--line); background: #fff; padding: 9px 16px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; }
.etabs button.on { background: linear-gradient(135deg, #1e9be5, #f0954a); color: #fff; border-color: transparent; }
.enote { margin: 12px 0 0; font-size: 13px; }
.enote:empty { display: none; }
.enote .opts { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; background: #f5f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.enote label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.enote input[type=checkbox] { width: auto; }
.erules { display: grid; gap: 12px; margin-top: 14px; }
.erule { background: #eef6fc; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.erule.off { opacity: .6; }
.erule .top { display: flex; justify-content: space-between; align-items: center; }
.erule .trash { background: none; border: 0; cursor: pointer; font-size: 16px; opacity: .7; }
.erule .trash:hover { opacity: 1; }
.erule .lbl { font-size: 13px; color: var(--muted); margin-bottom: -4px; }
.erule textarea { resize: vertical; min-height: 64px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { border: 1px solid #cfe2f1; background: #fff; color: var(--primary-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; padding: 3px 9px; border-radius: 7px; cursor: pointer; }
.chip:hover { background: #e3f0fb; }
.chips .grow { flex: 1; }
.chips .num { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.chips .num input { width: 72px; padding: 6px 8px; }
.ehint { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.esound { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ebtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ebig { padding: 13px; font-weight: 700; font-size: 15px; }
.btn.primary.ebig { background: linear-gradient(135deg, #1e9be5, #f0954a); border-color: transparent; }
.log .leave { color: var(--muted); }

/* 단축아이콘 */
.btn.grad { background: linear-gradient(135deg, #1e9be5, #f0954a); color: #fff; border-color: transparent; font-weight: 700; }
.sclist { display: grid; gap: 10px; margin-bottom: 14px; }
.sclist .empty { border: 2px dashed var(--line); border-radius: var(--radius); background: #fff; padding: 28px; text-align: center; color: var(--muted); }
.scitem { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.scitem.off { opacity: .55; }
.scitem.editing { border-color: var(--primary); box-shadow: 0 0 0 2px #cfe5f8; }
.scitem .k { font-weight: 800; color: var(--primary-2); }
.scitem .r { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-all; max-height: 3.2em; overflow: hidden; }
.scitem .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.scitem .meta span { font-size: 11px; background: #eef4f9; color: var(--muted); border-radius: 5px; padding: 1px 6px; }
.scitem .acts { display: flex; gap: 6px; }
.flabel { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
#scForm textarea { min-height: 80px; resize: vertical; }
.radios { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.radios label, .checkline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.radios input, .checkline input { width: auto; }
.checkline { display: flex; width: fit-content; margin-top: 14px; font-size: 14px; }
@media (max-width: 760px) { .scitem { grid-template-columns: auto 1fr; } .scitem .acts { grid-column: 1 / -1; justify-content: flex-end; } }

/* 펀딩 */
.dgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 14px; }
.dgrid3 .card { margin-bottom: 14px; }
.flist { display: grid; gap: 12px; }
.flist .empty { border: 2px dashed var(--line); border-radius: var(--radius); background: #fff; padding: 28px; text-align: center; color: var(--muted); }
.fcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.fcard.ended { opacity: .6; }
.fcard .ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fcard .ftitle { font-weight: 800; font-size: 16px; }
.fcard .ftitle .no { color: var(--primary-2); margin-right: 6px; }
.fcard .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.bar { height: 12px; background: #e6eef5; border-radius: 99px; overflow: hidden; margin: 12px 0 6px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #1e9be5, #f0954a); border-radius: 99px; }
.fcard .fnum { display: flex; justify-content: space-between; font-size: 13px; font-variant-numeric: tabular-nums; }
.fcard .fnum b { font-size: 15px; }
.fcard .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.mini-fund { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.mini-fund:last-child { border-bottom: 0; }
.mini-fund .bar { height: 7px; margin: 5px 0 2px; }
@media (max-width: 760px) { .dgrid3 { grid-template-columns: 1fr; } }

/* 실드 */
.shnow { text-align: center; margin: 6px 0 18px; }
.shcount { font-size: 38px; font-weight: 900; color: #1e9be5; font-variant-numeric: tabular-nums; }
.btn.soft { background: #eaf4fb; border-color: #d4e7f5; color: var(--text); }
.btn.danger:not(.ghost) { background: #fdecef; border-color: #f3b5c0; color: var(--danger); font-weight: 700; }
.shallow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.shallow .empty { color: var(--muted); font-size: 13px; }
.shallow .tag { display: inline-flex; align-items: center; gap: 6px; background: #eef6fc; border: 1px solid var(--line); border-radius: 99px; padding: 4px 6px 4px 12px; font-size: 13px; }
.shallow .tag button { border: 0; background: #fff; border-radius: 99px; width: 22px; height: 22px; cursor: pointer; color: var(--danger); }
#shView, #shAddMsg, #shSubMsg { min-height: 70px; resize: vertical; }

/* 신청곡 */
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; cursor: pointer; font-size: 14px; background: #fff; }
.pill input { width: auto; }
.grid2in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.grid2in label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.grid2in label.full { grid-column: 1 / -1; }
.grid3in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nowbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, #eaf5fd, #fdf2e8); }
.nowbar .np { flex: 1; min-width: 200px; }
.nowbar .np .k { font-size: 12px; color: var(--muted); }
.nowbar .np .t { font-weight: 800; font-size: 16px; }
.nowbar input[type=range] { width: 110px; padding: 0; }
.ytbox { position: absolute; left: -10000px; top: 0; width: 200px; height: 113px; overflow: hidden; }
.sglist .empty { border: 2px dashed var(--line); border-radius: 10px; padding: 28px; text-align: center; color: var(--muted); }
.sgi { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--line); }
.sgi:last-child { border-bottom: 0; }
.sgi.cur { background: #fff7ec; border-radius: 8px; }
.sgi .n { width: 26px; text-align: right; font-weight: 800; color: var(--primary-2); }
.sgi .t { flex: 1; min-width: 0; }
.sgi .t b { word-break: break-all; }
.sgi .t .who { font-size: 12px; color: var(--muted); }
.sgi .acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.btn.site { font-size: 12px; padding: 4px 8px; }
@media (max-width: 760px) { .grid2in, .grid3in { grid-template-columns: 1fr; } }

/* 애청지수 */
.lyusers { display: grid; grid-template-columns: 300px 1fr; padding: 0; overflow: hidden; }
.lyleft { padding: 16px; border-right: 1px solid var(--line); }
.lyright { padding: 18px; }
.lylist { margin-top: 10px; max-height: 560px; overflow-y: auto; }
.lyi { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; }
.lyi:hover { background: #f1f7fc; }
.lyi.on { background: #e3f0fb; }
.lyi .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #1e9be5, #f0954a); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.lyi .nm { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyi .sub { font-size: 11px; color: var(--muted); }
.lylist .empty { color: var(--muted); font-size: 13px; padding: 12px 4px; }
.lyform { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.lyform label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.grid3f { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-top: 12px; }
.grid2f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.grid3f label, .grid2f label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); align-content: start; }
.grid3f label.hl { background: #fdf3e7; border: 1px solid #f3d3a8; border-radius: 10px; padding: 10px; color: #c36a00; }
.lymsg { margin-top: 12px; }
.lymsg label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.lymsg textarea { min-height: 46px; resize: vertical; }
.lymsg textarea.tall { min-height: 170px; }
.lymsg .v { font-size: 11px; color: var(--muted); margin-top: 4px; }
@media (max-width: 760px) { .lyusers { grid-template-columns: 1fr; } .lyleft { border-right: 0; border-bottom: 1px solid var(--line); } .grid3f, .grid2f, .lyform { grid-template-columns: 1fr; } }

/* 모듈 마켓 */
.mkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mkcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mkcard.off { background: #f7fafc; }
.mkcard.off .mkbody { opacity: .55; }
.mkcard .top { display: flex; justify-content: space-between; align-items: center; }
.mkcard .ico { width: 40px; height: 40px; border-radius: 10px; background: #eaf4fb; display: grid; place-items: center; font-size: 22px; }
.mkcard .nm { font-weight: 800; font-size: 15px; }
.mkcard .ds { font-size: 12px; color: var(--muted); line-height: 1.5; min-height: 36px; }
.mkcard .core { font-size: 11px; color: var(--primary-2); font-weight: 700; }
.mkcard .mkside { font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.mkcard .mkside input { width: auto; }
.mkcard .btn { margin-top: auto; }
.switch input:disabled + span { opacity: .6; cursor: not-allowed; }
.mkgrid .empty { color: var(--muted); padding: 20px; }
/* 자동지급 */
.al3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.btn.algo { background: #16a34a; color: #fff; border-color: #16a34a; font-weight: 800; }
@media (max-width: 760px) { .al3 { grid-template-columns: 1fr; } }
#flList { margin-bottom: 14px; }
.gtlist .gtitem { margin-bottom: 12px; }
.gtline { font-size: 14px; margin-top: 8px; line-height: 1.6; }

/* 룰렛 */
.rltabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.rltabs button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 16px; font-weight: 700; cursor: pointer; color: var(--text); }
.rltabs button.on { background: linear-gradient(135deg, #1e9be5, #f0954a); color: #fff; border-color: transparent; }
.rltabs button.add { border-style: dashed; color: var(--muted); }
.rlbulk { background: #f1f7fc; border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.rlbulk label { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; cursor: pointer; color: var(--text); }
.rlbulk input { width: auto; }
.rlitem { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rlitem .no { width: 22px; text-align: center; color: var(--muted); font-size: 12px; flex: none; }
.rlitem input[data-f="name"] { flex: 1; min-width: 0; }
.rlitem input.pct { width: 90px; flex: none; }
.rlitem select { width: 130px; flex: none; }
.trash { background: none; border: 0; cursor: pointer; font-size: 16px; opacity: .7; }
.trash:hover { opacity: 1; }
.rgrow { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.rgrow .t { flex: 1; min-width: 0; word-break: break-all; }
.rgrow .c { color: var(--muted); white-space: nowrap; margin-right: 4px; }
.rgrow input.n { width: 70px; padding: 6px 8px; }
.rgsec { margin-top: 16px; }
.rgwins { max-height: 260px; overflow-y: auto; font-size: 13px; line-height: 1.9; }
#rlLiveList .mi { align-items: center; }
@media (max-width: 760px) { .rlitem { flex-wrap: wrap; } .rlitem input[data-f="name"] { flex-basis: 100%; } }
#rlMode { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #f1f7fc; color: var(--text); }
.rlitem select { padding: 9px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; background: #fff; }

/* 퀴즈 */
.qzwrap { grid-template-columns: 320px 1fr; }
.qzwrap .lyright { display: grid; gap: 16px; align-content: start; }
.qzbox { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.qzbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.btn.qzgo { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 700; }
.qzwrap .checkline { flex-wrap: wrap; }
@media (max-width: 760px) { .qzwrap { grid-template-columns: 1fr; } .qzbtns { grid-template-columns: 1fr; } }

/* 돌림판 */
.whbox { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1/1; margin: 0 auto; }
.whptr { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 26px solid var(--text); z-index: 2; }
#whSvg { width: 100%; height: 100%; transform-origin: 50% 50%; }
.whbanner { margin: 14px auto 0; max-width: 360px; background: #fff6df; border: 2px solid #f0b54a; border-radius: 12px; padding: 14px; font-size: 17px; font-weight: 800; }
.whitem { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.whitem input[data-f="label"] { flex: 2; }
.whitem input[data-f="weight"] { width: 90px; }
.whitem input[type=color] { width: 44px; height: 38px; padding: 2px; }
select.sel { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.pbitem { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #f8fbfe; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }

/* ── ⏳ 이용 만료 배너 + 💎 유료신청 버튼 (기존 에디봇) ── */
.expiry-row { display: flex; align-items: stretch; gap: 12px; margin: 0 0 16px; }
.expiry-row.hidden { display: none !important; }
.expiry-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; flex: 1; min-width: 0; margin: 0; padding: 14px 20px 16px; border-radius: 14px; background: linear-gradient(135deg,#f97316,#fb923c); color: #fff; position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(249,115,22,.25); }
.expiry-banner.expired { background: linear-gradient(135deg,#be123c,#e11d48); box-shadow: 0 6px 18px rgba(225,29,72,.3); }
.expiry-banner .eb-left { display: flex; align-items: center; gap: 12px; }
.expiry-banner .eb-icon { font-size: 26px; flex-shrink: 0; }
.expiry-banner .eb-label { font-size: 11.5px; opacity: .85; margin-bottom: 2px; }
.expiry-banner .eb-time { font-size: 20px; font-weight: 800; white-space: nowrap; }
.expiry-banner .eb-right { text-align: right; font-size: 11.5px; opacity: .9; }
.expiry-banner .eb-right .eb-date { font-size: 13px; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.expiry-banner .eb-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.28); }
.expiry-banner .eb-progress-fill { height: 100%; background: #fff; transition: width .3s; }
.btn-paid-upgrade { flex-shrink: 0; display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg,#4c1d95,#1e1b4b); color: #fbbf24; border: 1px solid rgba(251,191,36,.45); padding: 0 20px; border-radius: 14px; font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(76,29,149,.35); cursor: pointer; }
@media (max-width: 860px) { .expiry-row { flex-direction: column; } .expiry-banner { padding: 12px 16px 14px; } .btn-paid-upgrade { padding: 12px; justify-content: center; } }
.expired-lock { background: rgba(225,29,72,.08); border: 1px solid rgba(225,29,72,.3); color: #e11d48; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }

/* ── 💎 유료 전환 안내 모달 ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,15,19,.6); display: flex; align-items: center; justify-content: center; z-index: 1500; padding: 20px; }
.paid-modal-box button { border: 0; cursor: pointer; font: inherit; }
/* ── 💎 유료 전환 안내 모달 ── */
.paid-modal-box{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;background:linear-gradient(160deg,#1e1b4b 0%,#181633 60%,#14112b 100%);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:26px 22px 24px;color:#e7e5ff;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.paid-modal-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.08);color:#cbd5e1;border-radius:50%;width:30px;height:30px;font-size:14px}
.paid-modal-title{font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:4px;color:#fff}
.paid-modal-sub{font-size:12.5px;color:#a5b4fc;margin-bottom:20px}
.paid-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.paid-plan-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 10px;text-align:center}
.paid-plan-card.highlight{background:linear-gradient(160deg,rgba(190,18,60,.28),rgba(30,27,75,.4));border-color:rgba(225,29,72,.35)}
.paid-plan-badges{display:flex;flex-direction:column;gap:6px;align-items:center;margin-bottom:12px}
.paid-badge{display:inline-block;padding:4px 14px;border-radius:20px;font-size:11.5px;font-weight:700}
.paid-badge.white{background:#f1f5f9;color:#0f172a}
.paid-badge.yellow{background:#fbbf24;color:#3b2400}
.paid-badge.red{background:#dc2626;color:#fff}
.paid-plan-price{font-size:24px;font-weight:800;color:#fbbf24}
.paid-plan-price span{font-size:14px;font-weight:600;margin-left:2px}
.paid-plan-note{font-size:11px;color:#94a3b8;margin-top:4px}
.paid-info-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;margin-bottom:16px}
.paid-info-title{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:#fff}
.paid-info-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:#cbd5e1}
.paid-info-row b{color:#fff;font-weight:700}
.paid-info-row b.accent{color:#fbbf24}
.paid-info-warn{margin-top:10px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);border-radius:10px;padding:10px 12px;font-size:11.5px;color:#fde68a;line-height:1.5}
.paid-kakao-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:#fee500;color:#1a1a1a;font-weight:800;font-size:14px;padding:13px;border-radius:12px;text-decoration:none;margin-bottom:18px;cursor:pointer}
.paid-ref-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px}
.paid-ref-title{font-size:13.5px;font-weight:700;margin-bottom:6px;color:#fff;display:flex;align-items:center;gap:6px}
.paid-ref-desc{font-size:12px;color:#cbd5e1;margin-bottom:14px;line-height:1.5}
.paid-ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paid-ref-card{background:rgba(255,255,255,.05);border-radius:12px;padding:12px 8px;text-align:center}
.paid-ref-icon{font-size:18px;margin-bottom:4px}
.paid-ref-label{font-size:11px;color:#94a3b8;margin-bottom:6px}
.paid-ref-value{font-size:14px;font-weight:800}
.paid-ref-value.green{color:#4ade80}
.paid-ref-note{font-size:10.5px;color:#64748b;margin-top:12px;text-align:center}
.paid-ref-link { display: flex; gap: 6px; margin-top: 12px; }
.paid-ref-link input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #e7e5ff; border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.paid-ref-link button { background: rgba(255,255,255,.12); color: #fff; border-radius: 10px; padding: 0 12px; font-size: 12px; }

/* ── 관리자 유저 목록 (이용만료일) ── */
.exp-cell { display: flex; flex-direction: column; gap: 5px; min-width: 190px; }
.exp-cell input { padding: 6px 8px; font-size: 12px; }
.exp-cell .row { gap: 4px; }
.dbadge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; width: fit-content; }
.dbadge.soon { background: #ffedd5; color: #c2410c; }
.dbadge.inf { background: #dcfce7; color: #15803d; }
.dbadge.exp { background: #e5e7eb; color: #4b5563; }
.dbadge.warn { background: #fee2e2; color: #b91c1c; }
.bulk-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.bulk-bar input { max-width: 240px; }

/* 📖 스푼 연동 방법 */
.guide .gstep { padding: 14px 0; border-top: 1px dashed #d9e6ef; }
.guide .gstep:first-of-type { border-top: 0; }
.guide .ghead { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.guide .gn { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#0ea5e9,#fb923c); color: #fff; font-weight: 800; font-size: 13px; align-items: center; justify-content: center; flex-shrink: 0; }
.guide .gstep p { margin: 6px 0 10px; line-height: 1.6; }
.guide .gstep img { display: block; width: 100%; max-width: 620px; border-radius: 12px; border: 1px solid #d9e6ef; }
/* 관리자 페이지: 유저 표가 옆으로 잘리지 않게 넓게 + 버튼은 세로로 */
.main:has(> .page[data-page="admin"]:not(.hidden)) { max-width: none; }
#adminBody td:last-child .row { flex-direction: column; align-items: stretch; gap: 4px; }
#adminBody td:last-child .btn { white-space: nowrap; }