*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:    #5865f2;
  --primary-dk: #4752c4;
  --accent:     #5865f2;
  --bg:         #f0f2f5;
  --surface:    #ffffff;
  --border:     #e2e5eb;
  --text:       #1a1b2e;
  --muted:      #6b7280;
  --online:     #22c55e;
  --error:      #ef4444;
  --nav-bg:     #1a1b2e;
  --radius:     10px;
  --sidebar-w:  220px;
  --topbar-h:   48px;

  --glass-bg:     linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.42) 100%);
  --glass-border: 1px solid rgba(255,255,255,0.65);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 30px rgba(31,38,80,0.10);
  --glass-blur:   blur(12px) saturate(140%);
  --glass-header: rgba(255,255,255,0.38);
}

.ca {
  --bg:      #0f1117;
  --surface: #1a1d2e;
  --border:  #2d3148;
  --text:    #e8eaf0;
  --muted:   #8b92a8;

  --glass-bg:     linear-gradient(160deg, rgba(44,48,72,0.55) 0%, rgba(26,29,46,0.45) 100%);
  --glass-border: 1px solid rgba(255,255,255,0.10);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.45);
  --glass-header: rgba(255,255,255,0.05);
}
.ca .cb:not(.cc):not(.cd) {
  background: #2a2d42;
  color: var(--text);
  border: 1px solid var(--border);
}

.ca .cd { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); }

.ca .ce     { background: rgba(34,197,94,.15);  color: #4ade80; }
.ca .cf    { background: rgba(107,114,128,.15); color: #9ca3af; }
.ca .cg { background: rgba(234,179,8,.15);   color: #fbbf24; }
.ca .ch      { background: rgba(239,68,68,.15);   color: #f87171; }

.ca .ci { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.3);  color: #4ade80; }
.ca .cj   { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3);  color: #f87171; }

.ca .ck th,
.ca .cl th { background: var(--surface); }
.ca .ck tbody tr:hover td,
.ca .cl tbody tr:hover td { background: rgba(255,255,255,.04); }

.ca .cm,
.ca .cn { background: var(--surface); }

.ca .co        { background: rgba(88,101,242,.18); color: #a5b4fc; border-color: rgba(88,101,242,.3); }
.ca .cp { background: rgba(34,197,94,.12);  color: #4ade80; border-color: rgba(34,197,94,.25); }
.ca .cq   { background: rgba(88,101,242,.18); color: #a5b4fc; border-color: rgba(88,101,242,.3); }
.ca .cr   { background: rgba(107,114,128,.15); color: #9ca3af; }

.ca .cs { background: rgba(88,101,242,.15); border-color: rgba(88,101,242,.3); }
.ca .ct { background: rgba(88,101,242,.12); }

.ca .cu,
.ca .cv { background: var(--bg); border-color: var(--border); }

.ca .cw        { background: var(--surface); }
.ca .cx        { background: rgba(88,101,242,.12); }
.ca .cx:hover  { background: rgba(88,101,242,.18); }

.ca .cy { box-shadow: 0 0 0 3px var(--surface); }

body {
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  padding-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
}

a { color: inherit; text-decoration: none; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(540px circle at 12% 16%, rgba(167,139,250,0.22), transparent 60%),
    radial-gradient(520px circle at 88% 10%, rgba(244,114,182,0.18), transparent 58%),
    radial-gradient(620px circle at 78% 92%, rgba(99,102,241,0.16), transparent 62%);
}
.ca body::before {
  background:
    radial-gradient(540px circle at 12% 16%, rgba(167,139,250,0.16), transparent 60%),
    radial-gradient(520px circle at 88% 10%, rgba(244,114,182,0.12), transparent 58%),
    radial-gradient(620px circle at 78% 92%, rgba(99,102,241,0.13), transparent 62%);
}

.cz {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px;
}

.cab {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--nav-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 2px 0 8px rgba(0,0,0,0.18);
}

.cbb {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  padding: 22px 20px 18px;
  flex-shrink: 0;
}

.cbb span { color: var(--primary); }

.ccb {
  display: block;
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.cdb {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 6px;
}

.ceb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.cfb {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cgb { flex: 1; padding-bottom: 6px; }

.chb { list-style: none; }

.cib {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  transition: color 0.15s, background 0.15s;
}

.cib:hover { color: #fff; background: rgba(255,255,255,0.07); }

.cib.cjb {
  color: var(--primary);
  background: rgba(88,101,242,0.15);
  border-left: 3px solid var(--primary);
  padding-left: 17px;
}

.ckb { margin-top: 6px; }

.clb {
  padding: 5px 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  user-select: none;
}

.cmb {
  padding: 6px 20px 1px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.35);
  user-select: none;
}

.cnb {
  list-style: none;
  padding-bottom: 2px;
}

.cob {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.cib.cjb .cob {
  background: rgba(88,101,242,0.2);
  color: var(--primary);
}

.cnb .cib { padding-left: 32px; }
.cnb .cib.cjb { padding-left: 29px; }

.cpb { list-style: none; }
.cpb .cib { padding-left: 44px; font-size: 0.82rem; opacity: .85; }
.cpb .cib.cjb { padding-left: 41px; }

.cqb { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 4px 20px; }

.crb {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.csb {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.38);
  transition: color 0.15s;
}

.csb:hover { color: rgba(255,255,255,0.8); }

.ctb {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0;
  z-index: 90;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.cub {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cvb {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}
.cvb:hover { opacity: .8; }
.cwb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.cxb {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.cxb:hover { color: var(--text); }

.cyb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.cyb + .cyb::before {
  content: '';
  width: 1px;
  height: 14px;
  background: var(--border);
  margin-right: 13px;
}

.czb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
  background: var(--nav-bg);
}

.cac {
  text-align: center;
  padding: 48px 40px;
  background: var(--surface);
  border-radius: 18px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.cbc {
  display: block;
  height: 100px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  margin: 0 auto 16px;
}

.ccc {
  font-size: 3rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.05em;
  margin-bottom: 8px;
}

.ccc span { color: var(--primary); }

.cdc {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 36px;
}

.cec {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 0.15s, transform 0.12s;
  box-shadow: 0 4px 14px rgba(88,101,242,0.4);
}

.cec:hover {
  background: var(--primary-dk);
  transform: translateY(-2px);
}

.cec:active { transform: translateY(0); }

.cfc {
  background: #fef2f2;
  color: var(--error);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 20px;
}

.cgc {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.chc {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border);
  flex-shrink: 0;
}

.cgc h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.cic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cic::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.ce     { background: #dcfce7; color: #16a34a; }
.cf    { background: #f3f4f6; color: #9ca3af; }
.cg { background: #fef9c3; color: #b45309; }
.ch      { background: #fee2e2; color: var(--error); }

.cjc {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 12px;
}

.ckc { margin-bottom: 32px; }

.clc {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  max-width: 400px;
}

.cmc {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cnc {
  font-weight: 600;
  font-size: 0.9rem;
}

.coc {
  font-size: 0.7rem;
  font-weight: 700;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 8px;
  border-radius: 20px;
}

.cpc {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  max-width: 400px;
}

.cpc p {
  font-size: 0.85rem;
  color: var(--muted);
  flex: 1;
}

.cqc {
  width: 36px;
  height: 36px;
  border-width: 2px;
  flex-shrink: 0;
}

.crc {
  background: var(--border);
}

.csc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.ctc {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cuc {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(88,101,242,0.12);
}

.cvc {
  font-weight: 700;
  font-size: 0.975rem;
}

.cwc {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(245,158,11,0.14);
  color: #d97706;
  letter-spacing: 0.02em;
}
.ca .cwc { background: rgba(245,158,11,0.18); color: #fbbf24; }

.cxc {
  color: var(--muted);
  font-size: 0.8rem;
  flex: 1;
  line-height: 1.5;
}

.cyc {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-top: 6px;
}

.czc { display: none; }

.cad {
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
}

.cad::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.czc:checked + .cad {
  background: var(--primary);
}

.czc:checked + .cad::after {
  transform: translateX(20px);
}

.cbd .cad {
  width: 34px;
  height: 19px;
  border-radius: 10px;
}

.cbd .cad::after {
  width: 13px;
  height: 13px;
  top: 3px;
  left: 3px;
}

.cbd .czc:checked + .cad::after {
  transform: translateX(15px);
}

.cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  background: #e5e7eb;
  color: var(--text);
}

.cb:hover { opacity: 0.82; }
.cb:active { transform: scale(0.97); }

.cc {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(88,101,242,0.35);
}

.cd {
  background: #fee2e2;
  color: var(--error);
}

.ccd { padding: 4px 10px; font-size: 0.8rem; border-radius: 5px; }

.cdd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cdd h2 {
  font-size: 1.2rem;
  font-weight: 700;
}

.ck {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.ck th,
.ck td {
  padding: 11px 16px;
  text-align: left;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.ck th {
  background: #f8f9fb;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ck tr:last-child td { border-bottom: none; }
.ck tbody tr:hover td { background: #fafbfd; }
.ck .ced { text-align: center; color: var(--muted); padding: 28px 16px; }

.cfd {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.cgd {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.ci { background: #dcfce7; color: #166534; }
.cj   { background: #fee2e2; color: #991b1b; }

.chd {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chd[hidden] { display: none; }
[hidden] { display: none !important; }

.cid {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.cjd {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 480px;
  margin: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.ckd {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.cld {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

.cmd { margin-bottom: 14px; }

.cnd {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cod {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.15s;
}

.cod:focus {
  outline: none;
  border-color: var(--primary);
}

textarea.cod { resize: vertical; }

.cpd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cqd {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.crd {
  padding: 9px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.crd:hover { color: var(--text); }

.csd {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.ctd {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #f8f9fb;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.cud {
  font-size: 0.875rem;
  font-weight: 700;
}

.co {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: #e0e3ff;
  color: var(--primary);
}

.cp {
  background: #f0fdf4;
  color: #16a34a;
}

.cvd {
  padding: 24px 18px;
  font-size: 0.875rem;
  color: var(--muted);
}

.cwd {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 5px;
}

.cq {
  background: #e0e3ff;
  color: var(--primary);
}

.cr {
  background: #f3f4f6;
  color: var(--muted);
}

.cxd {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.cyd {
  background: rgba(99,102,241,0.12);
  color: #818cf8;
}
.czd {
  background: rgba(234,179,8,0.12);
  color: #ca8a04;
}
.cae {
  background: rgba(74,222,128,0.12);
  color: #16a34a;
}

.cbe {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.7;
}
.cbe strong { color: var(--text); }

.cce {
  margin-bottom: 32px;
}
.cde {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.cl {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  font-size: 0.875rem;
}
.cl th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #f8f9fb;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
  line-height: 1.6;
}
.cl tr:last-child td { border-bottom: none; }
.cl tbody tr:hover td { background: #fafbfd; }

.ct {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.82rem;
  background: #eef0fe;
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
  font-weight: 600;
}
.cee {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: 'Consolas', monospace;
}
.cfe {
  color: var(--primary);
  font-family: sans-serif;
}

.cge {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.che {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.cie {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.cu {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.8rem;
  color: var(--primary);
  background: #eef0fe;
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.6;
  word-break: break-all;
}
.cv {
  font-size: 0.82rem;
  color: var(--text);
  background: #f8f9fb;
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.6;
  border-left: 3px solid var(--primary);
}

.cje {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--muted);
  user-select: none;
}
.cke {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.cle {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.cme {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  overflow: hidden;
}
.cne {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--border);
}
.coe {
  text-align: center;
  padding: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.cpe { color: #ef4444; }
.cqe { color: var(--primary); }
.cre {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cse {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 100px;
  padding: 6px;
  cursor: pointer;
  transition: background 0.1s;
  overflow: hidden;
}
.cse:hover { background: #f8f9fb; }
.cse:nth-child(7n) { border-right: none; }
.cw {
  background: #fafbfc;
  cursor: default;
}
.cw:hover { background: #fafbfc; }
.cx { background: #eef0fe; }
.cx:hover { background: #e6e8fd; }
.cte {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.cue {
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.cx .cue {
  background: var(--primary);
  color: #fff;
}
.cve .cue { color: #ef4444; }
.cwe .cue { color: var(--primary); }
.cx.cve .cue,
.cx.cwe .cue { color: #fff; }
.cxe {
  font-size: 0.6rem;
  color: var(--muted);
}
.cye {
  font-size: 0.62rem;
  color: #ef4444;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cze {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  transition: opacity 0.1s;
  line-height: 1.6;
}
.cze:hover { opacity: 0.75; }

.caf {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cbf {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  outline: none;
}
.cbf:hover { transform: scale(1.15); }
.cy {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor;
  transform: scale(1.1);
}

.ccf {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.cdf {
  background: #1e2130;
  color: #a8b5d6;
  border-radius: 8px;
  padding: 16px 20px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  overflow-x: auto;
  text-align: left;
  margin: 16px auto 0;
  max-width: 520px;
  white-space: pre;
}

.cef {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px dashed var(--border);
}

.cff {
  font-size: 2.4rem;
  margin-bottom: 12px;
  line-height: 1;
}

.cgf {
  font-size: 0.975rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.chf {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

.cif {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.cjf {
  flex: 0 0 460px;
  max-width: 460px;
}
.ckf {
  flex: 1;
  min-width: 0;
}
@media (max-width: 860px) {
  .cif { flex-direction: column; }
  .cjf { flex: none; max-width: 100%; width: 100%; }
}

.clf {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.clf #da {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.cmf {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0d0f1a;
  color: var(--muted);
  pointer-events: none;
}
.cnf { font-size: 2.2rem; margin-bottom: 8px; }
.cof { font-size: 0.85rem; }

.cpf {
  margin-top: 24px;
}
.cqf {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.crf {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 4px;
  font-family: 'Consolas','Monaco',monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-right: 4px;
  white-space: nowrap;
}

.csf {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.ctf {
  opacity: 0.7;
}

.cuf {
  font-family: 'Consolas','Monaco',monospace;
  font-size: 0.78rem;
  color: #c9d1d9;
  line-height: 2;
}
.cvf {
  color: var(--accent);
  font-weight: 600;
}

.cwf {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--online);
  transition: color 0.2s;
}

.cxf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.cyf {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  padding: 4px;
  line-height: 1;
  color: var(--fg);
  flex-shrink: 0;
}
.czf {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  background: #1e2035;
  outline: none;
  cursor: pointer;
}
.czf::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
  transition: transform 0.1s;
}
.czf::-webkit-slider-thumb:hover { transform: scale(1.2); }

.czf::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: #1e2035;
}
.czf::-moz-range-progress {
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
}
.czf::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

.cag {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.cbg {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.ccg {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}
.cdg {
  width: 100%;
  max-height: 110px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}
.ceg {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 3px;
  word-break: break-word;
}
.cfg { font-size: 0.77rem; color: var(--muted); }

.cgg { display: flex; gap: 8px; margin-bottom: 16px; }

.chg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.cig { font-weight: 400; }

.cjg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 380px;
  overflow-y: auto;
}
.ckg {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 14px 0;
  text-align: center;
}

.clg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.13s;
}
.cmg {
  border-color: var(--accent);
  background: rgba(99,102,241,0.06);
}
.cng {
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.cmg .cng { color: var(--accent); }
.cog {
  width: 48px; height: 34px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.cpg {
  background: var(--border);
}
.cqg { flex: 1; min-width: 0; }
.crg {
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csg { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.ctg {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.75rem;
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.13s, background 0.13s;
}
.ctg:hover { color: #f87171; background: rgba(248,113,113,0.1); }

.cug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}
.cvg {
  font-size: 0.7rem;
  color: var(--muted);
  margin-right: 2px;
  white-space: nowrap;
}
.cs {
  padding: 2px 8px;
  background: #eef0fe;
  border: 1px solid #c7cbf9;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: 'Consolas','Monaco',monospace;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
  line-height: 1.7;
}
.cs:hover {
  background: #dde0fc;
  border-color: var(--primary);
}

.cwg {
  background: rgba(88,101,242,0.07);
  border: 1.5px solid rgba(88,101,242,0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.cwg code {
  background: rgba(88,101,242,0.13);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: 'Consolas', 'Monaco', monospace;
}

.cxg {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cxg .cod {
  flex: 1;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--surface);
  cursor: text;
}

.cyg {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cn {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.875rem;
  background: #f8f9fb;
}

.czg {
  padding: 20px;
}

.cah {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.cbh {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 24px;
  min-width: 120px;
}

.cch { border-color: rgba(34,197,94,0.4); }

.cdh {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.cch .cdh { color: var(--online); }

.ceh {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.cfh .cqc {
  display: block;
  margin: 0 auto;
}

.cgh {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 149;
}
.cgh.chh { display: block; }

.cih {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  margin-right: 4px;
  border-radius: 6px;
  transition: background .12s;
}
.cih:hover { background: var(--bg); color: var(--text); }

@media (max-width: 700px) {
  :root { --sidebar-w: 0px; }

  body { padding-left: 0; padding-top: var(--topbar-h); }

  .cab {
    width: 220px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 150;
  }
  .cab.chh { transform: translateX(0); }

  .ctb { left: 0; }
  .cih { display: inline-flex; align-items: center; }
  .cub { justify-content: space-between; }
  .cjh { display: none; }

  .cz { padding: 20px 14px; }

  .cac { padding: 36px 24px; margin: 20px; max-width: none; }

  .csc { grid-template-columns: 1fr 1fr; }

  .ck th:nth-child(3),
  .ck td:nth-child(3),
  .ck th:nth-child(4),
  .ck td:nth-child(4) { display: none; }

  .ckh { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .cdd { flex-wrap: wrap; gap: 8px; }

  .cb { min-height: 38px; }
  .ccd { min-height: 32px; }

  .cod { font-size: 16px; }
}



.clh {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(219,234,254,0.55) 0%, rgba(224,242,254,0.45) 100%);
  border: 1.5px solid rgba(147,197,253,0.6);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 30px rgba(31,38,80,0.08);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 16px 20px;
  margin-bottom: 28px;
  font-size: 0.875rem;
  color: #1d4ed8;
  line-height: 1.7;
}
.cmh { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.clh strong { color: #1e40af; }
.ca .clh {
  background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(59,130,246,0.10) 100%);
  border-color: rgba(59,130,246,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.35);
  color: #93c5fd;
}
.ca .clh strong { color: #bfdbfe; }

.cnh {
  max-width: 560px;
  margin: 0 auto 20px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(0,0,0,.25);
  box-shadow: 0 4px 16px rgba(0,0,0,.07);
}
.cnh img { display: block; width: 100%; }

.coh {
  display: flex;
  flex-direction: column;
  position: relative;
}
.coh::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary), #a5b4fc);
  border-radius: 2px;
  opacity: .35;
}

.cph {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 4px 0 14px;
  position: relative;
}
.cph:last-child { padding-bottom: 6px; }

.cqh {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818cf8);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
  position: relative;
  z-index: 1;
}

.crh {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  margin-top: 4px;
}
.crh strong { color: var(--text); font-weight: 700; }

.csh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  background: #eff6ff;
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 6px;
  transition: background .12s;
}
.csh:hover { background: #dbeafe; text-decoration: none; }
.ca .csh { background: rgba(88,101,242,.12); }
.ca .csh:hover { background: rgba(88,101,242,.22); }

.cth {
  margin-top: 12px;
}
.cuh {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%;
}
.cvh {
  font-family: 'Consolas', monospace;
  font-size: 0.82rem;
  color: var(--text);
  letter-spacing: .04em;
  padding: 9px 14px;
  user-select: all;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvh.cwh { filter: blur(5px); user-select: none; }
.cxh { width: 1px; background: var(--border); align-self: stretch; flex-shrink: 0; }
.cyh { display: flex; flex-shrink: 0; }
.czh {
  padding: 0 14px;
  height: 100%;
  min-height: 38px;
  border: none;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: background .1s, color .1s;
  font-family: inherit;
}
.czh:hover { background: var(--border); color: var(--text); }
.czh + .czh { border-left: 1px solid var(--border); }
.cai {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.775rem;
  color: #f59e0b;
  margin-top: 7px;
  font-weight: 500;
}



.cbi {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}
.cci {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.cdi { font-size: 2.8rem; margin-bottom: 18px; }
.cei { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.cfi  { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }
.cgi {
  display: inline-block;
  margin-top: 22px;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 0.8rem;
  font-weight: 600;
}
.ca .cgi { background: rgba(234,179,8,.12); color: #fbbf24; border-color: rgba(234,179,8,.3); }



.chi {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  vertical-align: middle; margin-right: 8px;
}
.cii {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
  color: #fff; font-size: 0.75rem; font-weight: 700;
  vertical-align: middle; margin-right: 8px;
}
.cji  { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; padding:2px 10px; border-radius:10px; font-size:0.75rem; font-weight:600; }
.cki { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; padding:2px 10px; border-radius:10px; font-size:0.75rem; font-weight:600; }
.ca .cji  { background:rgba(234,179,8,.12); color:#fbbf24; border-color:rgba(234,179,8,.3); }
.ca .cki { background:rgba(34,197,94,.12); color:#4ade80; border-color:rgba(34,197,94,.25); }



.cli {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmi {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg, var(--surface));
  font-size: 0.85rem;
  color: var(--text);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  line-height: 1.5;
}



.cni { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 18px; }
.coi { font-size: 0.82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.cpi  { font-size: 0.78rem; color: var(--muted); margin-bottom: 12px; }



.cqi {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  max-width: 400px;
}
.cri {
  font-size: 1.5rem;
  margin-bottom: 8px;
  line-height: 1;
}
.csi {
  display: flex;
  gap: 7px;
  margin-top: 14px;
  width: 100%;
}
.csi .cb {
  flex: 1;
  text-align: center;
  text-decoration: none;
}



.cti {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.cui {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.cvi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.cvi:last-child { border-bottom: none; }
.cwi { color: var(--muted); flex-shrink: 0; width: 110px; }
.cxi { font-weight: 500; color: var(--text); }
.cyi {
  border-color: #fca5a5;
}
.cyi .cui { color: var(--error); }
.czi {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.czi strong { color: var(--error); }
.caj {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--error);
  background: #fee2e2;
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.ca .cyi { border-color: rgba(239,68,68,.4); }
.ca .caj { background: rgba(239,68,68,.15); }




.cyg,
.ctc,
.cbh,
.ctd,
.cti,
.cci,
.che,
.ck,
.cl,

body .cjd,
body .cbj,
body .ccj,
body .cdj,
body .cej {
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}


body .cfj,
body .cme,
body .cgj,
body #db,
body .chj,
body .cij,
body .cjj,
body .ckj,
body .clj,
body .crh,
body .cmj,
body .cnj,
body .coj {
  background: none;
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
body .cfj,
body .cme,
body .cgj,
body .chj,
body .cij,
body .cjj,
body .ckj,
body .clj,
body .crh,
body .cmj,
body .cnj,
body .coj {
  position: relative;
}
body .cfj::before,
body .cme::before,
body .cgj::before,
body #db::before,
body .chj::before,
body .cij::before,
body .cjj::before,
body .ckj::before,
body .clj::before,
body .crh::before,
body .cmj::before,
body .cnj::before,
body .coj::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  pointer-events: none;
}


body .cjd,
body .cdj,
body .cgj {
  box-shadow: var(--glass-shadow), 0 24px 60px rgba(0,0,0,0.28);
}



html:not(.ca) .cjd,
html:not(.ca) .cgj,
html:not(.ca) #db {
  --text: #000;
  --muted: #1a1b2e;
  color: #000;
  text-shadow: 0 0 6px rgba(255,255,255,0.95), 0 0 14px rgba(255,255,255,0.8), 0 0 22px rgba(255,255,255,0.6);
}

.ca .cjd,
.ca .cgj,
.ca #db {
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.8), 0 0 22px rgba(0,0,0,0.7);
}

body .cjd .cb,
body .cjd .cod,
body .cdj .cb,
body .cdj .cod,
body .cgj .cb,
body .cgj .cod,
body #db .cb,
body #db .cod {
  text-shadow: none;
}


.ctb {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}


.cn,
.cm,
.ck th,
.cl th,
.ca .cn,
.ca .cm,
.ca .ck th,
.ca .cl th {
  background: var(--glass-header);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


.cch { border: 1px solid rgba(34,197,94,0.45); }


.cpj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 20px; }
.cqj { margin-left: auto; }
.crj {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--glass-header); border: 1px solid var(--border);
  font-size: 1.1rem; text-decoration: none; margin-right: 4px;
  transition: background .12s;
}
.crj:hover { background: var(--surface); }
.csj {
  padding: 9px 16px; border-radius: 10px;
  font-size: .9rem; font-weight: 700; color: var(--muted);
  text-decoration: none; border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.csj:hover { color: var(--text); background: var(--glass-header); }
.csj.cjb {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #7c5cff);
  box-shadow: 0 4px 14px rgba(88,101,242,0.3);
}


.ctj { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .ctj { grid-template-columns: 1fr; } }
.cuj {
  display: block; padding: 26px 24px; border-radius: var(--radius);
  text-decoration: none; color: inherit;
  background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.cuj:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow), 0 16px 38px rgba(88,101,242,0.16); }
.cvj {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(88,101,242,0.14), rgba(167,139,250,0.14));
  border: 1px solid rgba(88,101,242,0.16);
}
.cwj { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.cxj { font-size: .9rem; line-height: 1.6; color: var(--muted); }


@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root  { --glass-bg: var(--surface); }
  .ca  { --glass-bg: var(--surface); }
}


.czb {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px circle at 18% 22%, rgba(124,92,255,0.50), transparent 60%),
    radial-gradient(560px circle at 86% 28%, rgba(244,114,182,0.32), transparent 60%),
    radial-gradient(640px circle at 52% 104%, rgba(88,101,242,0.42), transparent 60%),
    #0c0d20;
}
.cac {
  background: linear-gradient(160deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.62) 100%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 30px 70px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}


.cke { position: relative; }
.cle {
  cursor: pointer;
  user-select: none;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.cle:hover { background: var(--bg); color: var(--primary); }
#db {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
  padding: 14px;
  z-index: 200;
  min-width: 228px;
  max-width: calc(100vw - 32px);
}
.cyj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
}
.czj {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: inherit;
}
.czj:hover { background: var(--bg); color: var(--text); }
.cak {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.cbk {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 4px;
  border-radius: 7px;
  font-size: 0.82rem;
  color: var(--text);
  text-align: center;
  font-family: inherit;
}
.cbk:hover { background: var(--bg); }
.cbk.cck { background: var(--primary); color: #fff; font-weight: 600; }

.cdk {
  cursor: grab;
  color: var(--muted);
  font-size: 1rem;
  padding: 0 2px;
  opacity: .45;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}
.cdk:active { cursor: grabbing; }
.cek {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 4px;
  color: var(--muted);
  transition: color .12s;
}
.cek:hover { color: var(--primary); }
.clg[draggable="true"] { cursor: default; }
.clg.cfk { opacity: .35; }
.clg.cgk { outline: 2px solid var(--primary, #6366f1); outline-offset: -2px; border-radius: 8px; }
#dc {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--surface-raised, rgba(255,255,255,.04));
  border-radius: 8px;
  margin-top: 4px;
}
#dc img { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
#dd { font-size: .88rem; font-weight: 600; }
#de  { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.chk {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w, 220px);
  right: 0;
  z-index: 50;
  background: var(--bg, #f8fafc);
  border-top: 1px solid var(--border, #e2e8f0);
}
.cik {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 8px;
}
main.cz { padding-bottom: 88px; }
@media (max-width: 768px) {
  .chk { left: 0; }
  .cik { padding: 0 14px 8px; }
}
.cjk { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.ckk {
  padding: 8px 18px; border: none; background: none; cursor: pointer;
  font-size: 0.85rem; font-family: inherit; color: var(--muted); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s;
}
.ckk:hover { color: var(--text); }
.ckk.cjb { color: var(--primary); border-bottom-color: var(--primary); }

.clk { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.clk input  { flex: 1; min-width: 160px; }
.clk select { width: 110px; }
.cmk { background: #eef0fe; color: var(--primary); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }
.cnk { font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.cok { background: #e0f2fe; color: #0369a1; }
.cpk    { background: #fce7f3; color: #9d174d; }
.cqk    { background: #fef9c3; color: #854d0e; }
.ca .cmk { background: rgba(88,101,242,.15); }
.ca .cok { background: rgba(3,105,161,.15); color: #7dd3fc; }
.ca .cpk    { background: rgba(157,23,77,.15); color: #f9a8d4; }
.ca .cqk    { background: rgba(133,77,14,.15); color: #fcd34d; }

.crk { display: flex; gap: 24px; align-items: flex-start; }
.csk { flex: 1; min-width: 0; }
.cjj {
  width: 300px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); padding: 14px;
}
.ctk {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.88rem; margin-bottom: 10px;
}
@media (max-width: 960px) {
  .crk { flex-direction: column; }
  .cjj { width: 100%; }
}
@media (max-width: 700px) {
  .cuk { height: 280px; }
}

.cvk { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.cuk {
  height: 460px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); padding: 8px 0;
}
.cwk {
  position: relative;
  padding: 4px 44px 4px 12px;
  font-size: 0.84rem; line-height: 1.5; transition: background .1s;
}
.cwk:hover { background: var(--bg); }
.cxk .cyk { text-decoration: line-through; color: var(--muted); opacity: .6; }
.czk { word-break: break-word; }
.cal {
  font-weight: 700; cursor: pointer; margin-right: 6px;
}
.cal:hover { text-decoration: underline; }
.cyk { color: var(--text); }
.cbl {
  position: absolute; top: 3px; right: 8px;
  display: flex; align-items: center;
}
.ccl {
  background: #ef4444; border: none; cursor: pointer; color: #fff;
  font-size: 0.78rem; line-height: 1; padding: 4px 6px; border-radius: 5px;
  transition: background .1s;
}
.ccl:hover { background: #dc2626; }
.cdl { font-size: 0.7rem; color: var(--muted); background: #f1f5f9; padding: 1px 6px; border-radius: 8px; }
.cel { background: #f97316; border-color: #f97316; color: #fff; }

.cid {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.cjd {
  background: var(--surface); border-radius: 12px; padding: 24px;
  min-width: 320px; max-width: 420px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.cfl { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ckd { font-weight: 700; font-size: 1rem; }
.cgl { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); }
.chl { margin-bottom: 14px; }
.cil { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
                       letter-spacing: .06em; margin-bottom: 8px; }
.cjl {
  width: 100%; padding: 9px; background: #fee2e2; border: 1px solid #fca5a5;
  color: #dc2626; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.cjl:hover { background: #fecaca; }
.ca .cjl { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #f87171; }
.ca .cjl:hover { background: rgba(239,68,68,.2); }

.ced { text-align: center !important; color: var(--muted); padding: 28px 0 !important; }
.ckl { font-family: 'Consolas', monospace; font-size: 0.78rem; }
.cll { color: #ef4444; }

.cml { padding-top: 4px; }
.clk { margin-bottom: 14px; }

.cnl { margin-top: 10px; font-size: 0.74rem; color: var(--muted); line-height: 1.6; }

.col {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

.cpl {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fefce8;
  border: 1.5px solid #fde68a;
  border-radius: var(--radius);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: #854d0e;
  line-height: 1.6;
}
.cql { flex-shrink: 0; font-size: 1.05rem; margin-top: 1px; }
.cpl a { color: inherit; font-weight: 600; }
.ca .cpl { background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.3); color: #fbbf24; }
.ca .cdl { background: rgba(255,255,255,.08); }
.crl {
  display: flex;
  gap: 20px;
  align-items: stretch;
  height: calc(100vh - 225px);   
}


.csl {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
  min-height: 1.8rem;
  line-height: 1.8rem;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.cbj {
  flex-shrink: 0;
  width: 500px;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  user-select: none;
}

.ctl {
  position: relative;
  width: 460px;
  height: 460px;
  margin: 0 auto 14px;
}
.ctl canvas {
  display: block;
  width: 460px;
  height: 460px;
  position: relative;
  z-index: 1;
}

.cul {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 50%;
  top: 52.5%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}


.cbj::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;                       
  border-radius: var(--radius);
  background-image: var(--rl-tile, none);  
  background-repeat: repeat;
  background-size: 120px 100px;            
  opacity: 0.035;
  filter: invert(1);                       
  animation: rl-bg-drift 44s linear infinite;
  pointer-events: none;
}
.ca .cbj::before {
  filter: none;                            
  opacity: 0.045;
}
@keyframes rl-bg-drift {
  from { background-position: 0 0; }
  to   { background-position: 240px -300px; }   
}


.cvl {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 50%;
  top: 52.5%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 2;
}

.cwl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  color: var(--text);
  z-index: 10;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.cwl.cxl {
  animation: rl-result 2.2s ease forwards;
  pointer-events: auto;
}

.cyl {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  display: block;
  width: 100%;
  height: 46px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.cyl::after { content: '▶  시작'; }
.cyl:hover  { background: var(--primary-dk); }
.cyl:active { transform: scale(.98); }

.cyl.cjb {
  background: var(--error);
  animation: rl-shake .18s linear infinite;
}
.cyl.cjb::after { content: '■  정지'; }
.cyl.cjb:hover  { filter: brightness(.92); }


.cyl.czl {
  background: var(--primary);
  cursor: default;
  pointer-events: none;
  animation: rl-draw-pulse 1s ease-in-out infinite;
}
.cyl.czl::after { content: '추첨중…'; }
@keyframes rl-draw-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }


.cam {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cbm {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.ccm {
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.cdm {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  counter-reset: rl-counter;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.cdm .cem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: linear-gradient(to right, var(--border) 44px, transparent 44px);
  padding: 0 8px 0 52px;
  cursor: pointer;
  counter-increment: rl-counter;
  transition: border-color .15s;
}
.cdm .cem:hover { border-color: var(--muted); }

.cdm .cem::before {
  content: counter(rl-counter);
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.cdm .cfm {
  counter-increment: none;
  background-image: none !important;
  opacity: .7;
  transition: opacity .2s, border-color .15s;
}
.cdm .cfm:hover { opacity: 1; }
.cdm .cfm::before {
  content: '+';
  color: var(--muted);
  text-shadow: none;
  font-size: 1rem;
}

.cgm {
  flex: 1;
  min-width: 0;
  font-size: .88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  cursor: text;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .1s;
}
.cgm:hover,
.cgm:focus { background: var(--bg); }
.cfm .cgm::after {
  content: attr(placeholder);
  color: var(--muted);
  pointer-events: none;
}
.cfm .cgm:focus::after { content: ''; }

.chm {
  font-size: .75rem;
  color: var(--muted);
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
}
.chm[data-weight]::before { content: 'x' attr(data-weight); }

.cim,
.cjm {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .82rem;
  line-height: 1;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.cim:hover,
.cjm:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.ckm {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: .85rem;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.cem:hover .ckm { color: var(--error); }
.ckm:hover { background: rgba(239, 68, 68, .1); }

.cfm .chm,
.cfm .cim,
.cfm .cjm,
.cfm .ckm { display: none; }

.clm .cim,
.clm .cjm,
.clm .ckm { display: none; }
.clm .cfm { display: none; }
.clm .cgm { cursor: default; pointer-events: none; }

.cdm::-webkit-scrollbar       { width: 4px; }
.cdm::-webkit-scrollbar-track { background: transparent; }
.cdm::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

@media (max-width: 700px) {
  .crl { flex-direction: column; height: auto; }

  .cbj { width: 100%; }

  .ctl {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .ctl canvas {
    width: 100%;
    height: 100%;
  }

  .cdm { flex: none; height: 300px; }
}

@keyframes rl-shake {
  0%, 50%, 100% { transform: translateY(0); }
  25%           { transform: translateY(-2px); }
  75%           { transform: translateY(2px); }
}

@keyframes rl-result {
  0%       { opacity: 0; transform: scale(.88); }
  15%, 75% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(1.04); }
}


.cmm {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  animation: rl-win-fade .25s ease;
}
.cmm[hidden] { display: none; }

.cnm {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 360px;
  padding: 30px 28px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.82) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 44px rgba(31, 38, 80, 0.20);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  animation: rl-win-pop .5s cubic-bezier(.175, .885, .32, 1.275) both;
}
.com {
  font-size: .95rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.cpm {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  word-break: break-all;
}

@keyframes rl-win-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rl-win-pop {
  0%   { transform: scale(.7);  opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1);   opacity: 1; }
}
.cqm { display: flex; gap: 20px; align-items: flex-start; }
@media (max-width: 860px) { .cqm { flex-direction: column; } }


.cnj {
  flex: 0 0 320px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 860px) { .cnj { flex-basis: auto; max-width: none; width: 100%; } }

.crm { display: flex; align-items: center; gap: 10px; }
.csm { font-weight: 700; font-size: .9rem; }
.ctm { font-size: 1.1rem; font-weight: 800; min-width: 28px; text-align: center; }
.cum {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--text);
  transition: background .12s;
}
.cum:hover { background: var(--surface); }

.cvm { display: flex; gap: 12px; }
.cwm { flex: 1; min-width: 0; }
.cxm { font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.cym { display: flex; flex-direction: column; gap: 6px; }
.czm {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: .85rem;
  font-family: inherit;
}
.czm:focus { outline: none; border-color: var(--primary); }

.can { display: flex; gap: 8px; flex-wrap: wrap; }
.can .cb { flex: 1; white-space: nowrap; }
.cbn { font-size: .76rem; color: var(--muted); line-height: 1.5; }

.ccn { display: flex; flex-direction: column; gap: 5px; }
.cdn {
  font-size: .86rem; padding: 6px 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}


.coj {
  flex: 1; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  justify-content: center;
}
.coj canvas { width: 100%; height: auto; display: block; cursor: pointer; }
.cen {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.cfn {
  flex: 1;
  min-width: 0;
}


.chj {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cgn {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.chn {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cin {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}
.cin input { cursor: pointer; }
.cin input:disabled,
.cin input:disabled + span { opacity: 0.45; cursor: not-allowed; }

.cjn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
}
.cjn b { color: var(--text); font-weight: 700; }
.ckn { opacity: 0.4; }

.cln {
  color: var(--primary);
  font-size: 0.78rem;
  margin-left: 4px;
  animation: lt-blink 1.3s step-end infinite;
}
@keyframes lt-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

.cmn {
  display: flex;
  align-items: center;
  gap: 8px;
}


.cnn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(88,101,242,.05);
}
.con {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.cpn {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cqn {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--primary);
  color: #fff;
  animation: lt-pop-in 0.3s ease;
}
@keyframes lt-pop-in {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}


.crn {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  max-height: 460px;
}

.csn {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.ctn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  animation: lt-slide-in 0.18s ease;
}
.ctn:last-child { border-bottom: none; }
.cun .cvn { color: var(--primary); }
.cwn { background: rgba(88,101,242,.06); }

@keyframes lt-slide-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cvn {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cxn {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(88,101,242,.12);
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.cyn {
  background: var(--primary);
  color: #fff;
}


.czn {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15,17,30,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: lt-fade 0.2s ease;
}
.czn[hidden] { display: none; }

.cao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 300px;
  max-width: 90vw;
  padding: 38px 56px;
  border-radius: 24px;
  background: var(--glass-bg, var(--surface));
  border: var(--glass-border, 1px solid var(--border));
  box-shadow: var(--glass-shadow, 0 10px 40px rgba(0,0,0,.2)), 0 24px 60px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  animation: lt-pop-in 0.3s ease;
  transition: padding .35s ease;
}
.cbo {
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  transition: font-size .35s ease, margin .35s ease;
}
.cco {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--text);
  word-break: break-all;
  line-height: 1.2;
  transition: font-size .35s ease, margin .35s ease;
}


.cdo {
  width: 440px;
  max-width: 92vw;
  height: 72vh;
  max-height: 620px;
  padding: 26px 24px 22px;
  justify-content: flex-start;
}
.cdo .cbo { font-size: .82rem; margin-bottom: 6px; }
.cdo .cco  { font-size: 1.7rem; margin-bottom: 16px; }

.ceo {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 10px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: lt-fade .3s ease;
}
.ceo[hidden] { display: none; }
.cfo { margin: auto; color: var(--muted); font-size: .85rem; }
.cgo { font-size: .95rem; line-height: 1.5; color: var(--text); word-break: break-word; }
.cgo .cho { font-weight: 700; color: var(--primary); margin-right: 6px; }
.cio { width: 100%; margin-top: 14px; flex-shrink: 0; }
.cio[hidden] { display: none; }
.cjo {
  color: var(--primary);
  animation: lt-winner-pop 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes lt-winner-pop {
  0%   { transform: scale(0.65); opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes lt-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}



.cij {
  display: none;
}

.cko {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 0 2px;
}

.clo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: lt-pulse 2s infinite;
}
@keyframes lt-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.cmo {
  height: 440px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 6px 0;
}

.cno {
  padding: 4px 12px;
  font-size: 0.83rem;
}
.coo .cpo {
  text-decoration: line-through;
  opacity: 0.4;
}
.cqo {
  font-weight: 600;
  margin-right: 5px;
}
.cpo {
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 1000px) {
  .cij { width: 220px; }
  .cmo { height: 380px; }
}

@media (max-width: 800px) {
  .cen { flex-direction: column; }
  .cij { width: 100%; }
  .cmo { height: 220px; }
}

@media (max-width: 700px) {
  .cgn { gap: 10px; }
  .cjn { margin-left: 0; }
  .cmn { width: 100%; }
  .cmn .cb { flex: 1; }
  .crn { max-height: 300px; }
  .cao { padding: 30px 28px; }
  .cco { font-size: 1.9rem; }
}
.cro { display: flex; gap: 24px; align-items: flex-start; }
.cso   { flex: 1; min-width: 0; }

.ccj  { display: none; }
@media (max-width: 860px) {
  .cro { flex-direction: column; }
  .ccj { width: 100%; }
  .cto { height: 260px; }
}

.cuo { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cuo:last-child { border-bottom: none; }
.cvo { font-family: monospace; font-size: 0.8rem; color: var(--muted); min-width: 68px; flex-shrink: 0; }
.cwo { flex: 1; }
.cxo { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 2px 4px; }
.cxo:hover { color: #ef4444; }

.cyo { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cyo:last-child { border-bottom: none; }
.czo  { font-family: monospace; font-size: 0.8rem; color: var(--muted); min-width: 68px; flex-shrink: 0; }
.cap { font-size: 0.88rem; min-width: 80px; }
.cbp { flex: 1; height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.ccp { height: 100%; background: var(--primary); border-radius: 4px; transition: width .5s ease; }
.cdp { font-size: 0.88rem; font-weight: 700; min-width: 46px; text-align: right; }
.cep { font-size: 0.78rem; color: var(--muted); min-width: 38px; text-align: right; }

.cfp { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; margin-bottom: 10px; }
.cgp { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.cto { height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 6px 0; }
.chp { padding: 4px 12px; font-size: 0.83rem; }
.cip .cjp { text-decoration: line-through; opacity: .4; }
.ckp { font-weight: 600; color: var(--primary); margin-right: 5px; }
.cjp { color: var(--text); word-break: break-word; }

.clp { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:0.85rem; }
.cmp { font-family:monospace; font-weight:700; font-size:0.95rem; color:var(--primary); }
.cnp { color:#f97316; }
.cop { color:#ef4444; }

.cpp {
  position:fixed; inset:0; z-index:2000;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  animation:vw-bg-in .25s ease;
}
@keyframes vw-bg-in { from{opacity:0} to{opacity:1} }
.cdj {
  position:relative; width:90%; max-width:420px;
  background:var(--surface); border-radius:22px; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  animation:vw-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vw-pop {
  from{opacity:0;transform:scale(.65) translateY(40px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}
.cqp { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.crp {
  position:absolute; top:-12px;
  animation:vw-fall linear forwards;
}
@keyframes vw-fall { to{transform:translateY(560px) rotate(540deg);opacity:0} }

.csp {
  background:linear-gradient(135deg,#6366f1 0%,#a855f7 55%,#ec4899 100%);
  padding:28px 24px 20px; text-align:center; position:relative; overflow:hidden; z-index:1;
}
.csp::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  animation:vw-shine 2.4s linear infinite;
}
@keyframes vw-shine { from{transform:translateX(-130%)} to{transform:translateX(130%)} }
.ctp {
  display:block; font-size:3.6rem; line-height:1; position:relative; z-index:2;
  animation:vw-bounce 1.1s ease-in-out infinite alternate;
}
@keyframes vw-bounce {
  from{transform:scale(1) rotate(-6deg) translateY(0)}
  to  {transform:scale(1.13) rotate(6deg) translateY(-7px)}
}
.cup {
  margin:8px 0 0; color:#fff; font-size:0.82rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; opacity:.85; position:relative; z-index:2;
}

.cvp { padding:18px 24px 12px; text-align:center; }
.cwp {
  display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  padding:3px 13px; border-radius:20px; margin-bottom:9px;
}
.cxp {
  font-size:1.6rem; font-weight:800; line-height:1.25;
  background:linear-gradient(90deg,#f59e0b,#ef4444,#f97316,#f59e0b);
  background-size:300%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:vw-gold 3s linear infinite;
}
@keyframes vw-gold { from{background-position:0%} to{background-position:300%} }
.cyp { font-size:0.84rem; color:var(--muted); margin-top:5px; }

.czp { height:1px; background:var(--border); margin:4px 24px 0; }
.caq { padding:12px 24px 4px; }
.cbq { display:flex; align-items:center; gap:8px; padding:5px 0; }
.ccq {
  font-size:0.81rem; flex:0 0 100px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text);
}
.cdq { flex:1; height:7px; background:var(--border); border-radius:4px; overflow:hidden; }
.ceq {
  height:100%; border-radius:4px; transform-origin:left;
  background:linear-gradient(90deg,#6366f1,#a855f7);
  animation:vw-bar-in .65s cubic-bezier(.22,1,.36,1) both;
}
.cfq {
  background:linear-gradient(90deg,#f59e0b,#ef4444);
  box-shadow:0 0 8px rgba(245,158,11,.45);
}
@keyframes vw-bar-in { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.cgq { font-size:0.81rem; font-weight:700; min-width:38px; text-align:right; }
.chq { font-size:0.73rem; color:var(--muted); min-width:32px; text-align:right; }

.ciq { padding:14px 24px 22px; }
.cjq {
  width:100%; padding:12px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  color:#fff; font-size:0.95rem; font-weight:700; letter-spacing:.03em;
  transition:opacity .15s, transform .1s;
}
.cjq:hover  { opacity:.86; }
.cjq:active { transform:scale(.97); }


.cmj {
  border-radius: 14px;
  padding: 8px 22px 16px;
  margin-top: 16px;
  overflow: hidden;
}
.cmj .ckq:last-child { border-bottom: none; }
.cmj .cef {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0 !important;
  padding: 56px 20px;
}

.ckq {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.clq {
  width: 72px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--border);
}
.cmq  { flex: 1; min-width: 0; }
.cnq { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coq  { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.cpq {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 24px;
  flex-shrink: 0;
  text-align: right;
}
.cqq { display: flex; gap: 6px; flex-shrink: 0; }

.crq {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 18px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f0f2f5;
  --surface:#fff;
  --border:#e2e5eb;
  --text:#1a1b2e;
  --muted:#6b7280;
  --radius:10px;
}

body{background:var(--bg);color:var(--text);font-family:-apple-system,'Segoe UI','Noto Sans KR',sans-serif;font-size:14px;min-height:100vh}

.csq{padding:28px 32px 60px}

.ctq{font-size:1.2rem;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px}

@media(max-width:780px){.csq{padding:16px 14px 40px}}

.clj{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.cuq{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.cvq{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);transition:opacity .15s}
.cvq:last-child{border-bottom:none}
.cwq{cursor:grab;color:var(--muted);font-size:1.1rem;flex-shrink:0;user-select:none;padding:0 2px;line-height:1}
.cwq:active{cursor:grabbing}
.cxq{opacity:.3}
.cyq{background:var(--bg);border-radius:6px;outline:2px dashed var(--border)}
.czq{font-size:1.1rem;width:28px;text-align:center;flex-shrink:0}
.car{flex:1;min-width:0}
.cbr{font-size:.88rem;font-weight:600}
.ccr{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdr{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cdr input{flex:1;min-width:140px}
#df{width:80px;flex:none}


  @keyframes botJoinBlink{
    0%,100%{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444,0 0 10px 1px rgba(239,68,68,.45)}
    50%    {border-color:rgba(239,68,68,.35);box-shadow:0 0 0 1px rgba(239,68,68,.25)}
  }
  .cer:not(.cuc){animation:botJoinBlink 1.2s ease-in-out infinite}
  .cfr{flex-direction:row;align-items:center;gap:10px;padding:9px 14px;margin:0;min-width:0;}
  .cfr .cvc{font-size:.85rem;white-space:nowrap;}
  

      #dg .cgr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.82rem;}
      #dg .chr{display:inline-flex;gap:6px;}
      #dg .cir{color:var(--muted,#888);}
      #dg #dh{text-shadow:none;}
      #dg #dh svg{display:block;height:100%;width:auto;max-width:100%;}
      #dg .cjr{margin-top:14px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--border,#e5e7eb);padding-top:14px;}
      #dg #di{display:grid;grid-template-columns:auto 1fr auto;gap:9px 12px;align-items:center;max-width:460px;}
      #dg #di input[type=range]{width:100%;}
      #dg .ckr{font-size:.8rem;}
      #dg input[type=color]{width:36px;height:26px;border:1px solid var(--border,#ccc);border-radius:6px;background:none;padding:0;cursor:pointer;}
      #dg .clr{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;}
      #dg .cmr{display:flex;align-items:center;gap:8px;padding:2px 14px;}
      #dg .cmr:first-child{padding-left:0;}
      #dg .cmr + .cmr{border-left:1px solid var(--border,#e5e7eb);}
      #dg .cnr{font-size:.85rem;font-weight:600;margin-bottom:8px;}
    

.cor { display:flex; align-items:baseline; gap:10px; }
.cor .cpr { font-size:.78rem; font-weight:400; color:var(--muted); }
.cqr td.crr { width:150px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--primary); white-space:nowrap; }
.cqr td.csr { width:84px; color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cqr td.ctr { word-break:break-word; }
.cqr td.cur { width:48px; text-align:center; }
.cvr { width:28px; height:28px; border:1px solid transparent; border-radius:6px; background:transparent; cursor:pointer; font-size:.9rem; line-height:1; }
.cvr:hover { background:rgba(239,68,68,.12); }


.cwr { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:820px){ .cwr{ grid-template-columns:1fr; } }
.cxr td.cyr { text-align:center; color:var(--muted); font-variant-numeric:tabular-nums; }
.cxr th.czr, .cxr td.czr { text-align:right; width:96px; font-variant-numeric:tabular-nums; }
.cxr th.cas, .cxr td.cas { text-align:right; width:58px; font-variant-numeric:tabular-nums; }
.cxr td.cbs { color:var(--online); font-weight:700; }
.cxr tbody tr:nth-child(1) .cyr { color:#f59e0b; font-weight:800; }
.cxr tbody tr:nth-child(2) .cyr { color:#9ca3af; font-weight:800; }
.cxr tbody tr:nth-child(3) .cyr { color:#b45309; font-weight:800; }
.ccs { width:64px; text-align:left; padding:4px 6px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:.85rem; font-variant-numeric:tabular-nums; }
.ccs:focus { outline:none; border-color:var(--primary); }
.cxr td.cds { text-align:center; width:48px; }
.ces { width:28px; height:28px; border:1px solid transparent; border-radius:6px; background:transparent; cursor:pointer; font-size:.9rem; line-height:1; }
.ces:hover { background:rgba(239,68,68,.12); }
.cfs { display:none; }
table.cgs .cfs { display:table-row; }
.chs { text-align:center; padding:12px; font-size:.85rem; font-weight:700; color:var(--primary); cursor:pointer; border-top:1px solid var(--border); transition:background .12s; user-select:none; }
.chs:hover { background:var(--bg); }
.cis { margin-left:auto; width:150px; max-width:48%; padding:5px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:.82rem; font-family:inherit; font-weight:400; }
.cis:focus { outline:none; border-color:var(--primary); }

@media (max-width:700px){
  .cxr th:nth-child(3), .cxr td:nth-child(3),
  .cxr th:nth-child(4), .cxr td:nth-child(4){ display:table-cell; }
}


.cjs{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:880px){.cjs{grid-template-columns:1fr}}
.cks{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.cls{margin-bottom:16px}
.cls:last-child{margin-bottom:0}
.cls > label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.cms{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.cns{width:32px;height:32px;border-radius:9px;border:2px solid rgba(0,0,0,.12);cursor:pointer;padding:0}
.cns.cjb{outline:2.5px solid var(--text);outline-offset:2px}
.cos{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.cos input[type=color]{width:36px;height:32px;border:1px solid var(--border);border-radius:8px;padding:2px;background:none;cursor:pointer}
.cps{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cqs{flex:1;min-width:120px;accent-color:var(--primary)}
.crs{border-radius:18px;padding:26px;display:flex;align-items:center;justify-content:center;transition:background .15s;
 background-image:linear-gradient(45deg,#e2e4ea 25%,transparent 25%),linear-gradient(-45deg,#e2e4ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e4ea 75%),linear-gradient(-45deg,transparent 75%,#e2e4ea 75%);
 background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;background-color:#f4f4f6}
.crs.css{background:#f4f4f6}
.crs.cts{background:#141416}
.crs svg{width:100%;max-width:400px;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.18))}
.cus{display:inline-flex;gap:6px}
.cus .cb.cjb{background:var(--primary,#6366f1);color:#fff}
.cvs{font-size:.76rem;color:var(--muted);line-height:1.6;margin-top:8px}


.ckj{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.cws{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.cxs{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;margin-right:8px;vertical-align:middle}
.cys{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start}
.czs{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.cat{flex:1;font-size:.88rem;line-height:1.7;color:var(--text)}
.cbt{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#5865f2;color:#fff;border-radius:8px;font-weight:700;font-size:.88rem;text-decoration:none;transition:background .15s;margin-top:10px}
.cbt:hover{background:#4752c4}
.cct{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:18px}
.cdt{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg)}
.cet{font-size:.95rem;font-weight:700;margin-bottom:4px}
.cft{font-size:.78rem;color:var(--muted)}
.cgt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.cht{background:#22c55e}.cit{background:#94a3b8}
.cjt{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;padding:4px 10px;border-radius:20px;font-weight:600}
.ckt{background:rgba(34,197,94,.12);color:#16a34a}
.clt{background:rgba(100,116,139,.12);color:var(--muted)}
.cmt{background:rgba(88,101,242,.12);color:var(--accent)}
.cnt{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:14px 16px;margin-top:12px}
.cot{font-family:monospace;font-size:.95rem;color:var(--muted);margin-bottom:8px}
.cot span{color:var(--accent);font-weight:700;filter:blur(5px);transition:filter .2s;user-select:none;cursor:pointer}
.cot span.cpt{filter:none;user-select:text;cursor:auto}
.cqt{display:flex;align-items:center;gap:8px}
.crt{display:flex;gap:6px;margin-top:10px}
.cst{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.ctt{font-size:.88rem;font-weight:600}
.cut{font-size:.78rem;color:var(--muted);margin-top:2px}
.cwt{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.cxt{background:#1e1f22;border-radius:8px;padding:16px;max-width:480px}
.cyt{color:#fff;font-size:.88rem;margin-bottom:8px;font-family:'gg sans','Noto Sans KR',sans-serif}
.czt{display:flex;gap:12px;background:#2b2d31;border-left:4px solid #00c73c;border-radius:0 4px 4px 0;padding:12px 16px 12px 12px}
.cau{flex:1;min-width:0}
.cbu{color:#00a8fc;font-weight:600;font-size:.88rem;display:block;margin-bottom:8px}
.ccu{font-size:.72rem;font-weight:700;color:#dbdee1;margin-bottom:2px}
.cdu{font-size:.82rem;color:#b5bac1}
.ceu{background:#404249;border-radius:4px;height:110px;display:flex;align-items:center;justify-content:center;color:#87898c;font-size:.78rem;margin-top:10px}
.cfu{font-size:.7rem;color:#87898c;margin-top:8px}
.cgu{width:80px;height:80px;border-radius:4px;object-fit:cover;flex-shrink:0;background:#404249}
.chu{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:768px){.chu{grid-template-columns:1fr;gap:22px}}
.ciu{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ciu .cnt{margin:0;padding:10px 14px;flex:1;min-width:160px}
.ciu .cot{margin-bottom:0;font-size:.9rem}
.cju{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cku{margin:0;padding:0;border:none}
.cku .cxt{max-width:none}


.clu { display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.clu .cnd { min-width:110px; margin-bottom:0; }
.cmu { display:flex; flex-direction:column; align-items:center; gap:3px; }
.cnu { width:44px; height:36px; border:1px solid var(--border); border-radius:6px; cursor:pointer; padding:2px; background:none; }
.cou { font-size:.73rem; color:var(--muted); }
.cpu { width:14px; height:14px; border-radius:50%; flex-shrink:0; margin-left:4px; box-shadow:0 0 6px #a78bfa; background:linear-gradient(135deg,#a78bfa,#f472b6); }
.cqu { width:180px; accent-color:var(--primary); }
.cru { font-size:.82rem; color:var(--muted); min-width:42px; }

.csu { margin:18px 0 14px; padding-top:16px; border-top:1px solid var(--border); font-weight:700; font-size:.9rem; }
.ctu { display:flex; gap:28px; align-items:flex-start; }
.cuu { flex:1; min-width:0; }
.cvu { font-size:.82rem; color:var(--muted); margin-bottom:12px; line-height:1.6; }
.cwu {
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);
  border-radius:14px; padding:24px 18px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.06);
}
.cwu iframe { width:100%; height:82px; border:none; display:block; border-radius:4px; }
@media (max-width:820px) {
  .ctu { flex-direction:column; }
}


.cxu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cyu{flex:1;min-width:200px}
.czu{font-weight:700;font-size:1rem}
.cav{font-size:.8rem;color:var(--muted);margin-top:3px}
.cbv{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.ccv{font-size:.76rem;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px 10px;color:var(--text)}
.cdv{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cev{display:flex;gap:8px;margin-bottom:8px}
.cev input.cfv{flex:1}
.cev input.cgv{width:90px;flex:none}
.cev .chv{flex:none}
.civ{position:relative;width:100%;max-width:800px;margin:0 auto;aspect-ratio:8/3;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#171a23 radial-gradient(120% 120% at 50% 0%,#232838,#13151d)}
.cjv{position:absolute;top:0;left:0;width:800px;height:300px;border:0;transform-origin:top left}
#dj .cjd{max-height:92vh;overflow-y:auto}
#dk{max-height:38vh;overflow-y:auto;padding-right:4px}
.ckv{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 6px;overflow-x:auto;overflow-y:hidden}
.clv{background:none;border:none;padding:12px 14px;font-size:.88rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.clv:hover{color:var(--text)}
.clv.cck{color:var(--primary,#6366f1);border-bottom-color:var(--primary,#6366f1)}
@keyframes rdTnBlink{0%,100%{color:#ef4444}50%{color:#fca5a5}}
.clv.cmv{animation:rdTnBlink 1.4s ease-in-out infinite;font-weight:800}


.cnv{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 6px;overflow-x:auto;overflow-y:hidden}
.cov{background:none;border:none;padding:12px 14px;font-size:.88rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cov:hover{color:var(--text)}
.cov.cck{color:var(--primary,#6366f1);border-bottom-color:var(--primary,#6366f1)}
@keyframes sigTnBlink{0%,100%{color:#ef4444}50%{color:#fca5a5}}
.cov.cpv{animation:sigTnBlink 1.4s ease-in-out infinite;font-weight:800}
.cqv{position:relative;width:100%;max-width:800px;aspect-ratio:3/2;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#0d0e1a radial-gradient(120% 120% at 50% 0%,#1a1d2b,#0d0e1a)}
.crv{position:absolute;top:50%;left:50%;width:800px;height:533px;border:none;display:block;background:transparent;transform-origin:center center}
.csv{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;flex-wrap:wrap}
.ctv{width:64px;height:64px;object-fit:cover;border-radius:8px;background:var(--bg);flex-shrink:0}
.cuv{flex:1;min-width:160px}
.cvv{font-weight:700;font-size:.95rem}
.cwv{font-size:.82rem;color:var(--primary);font-weight:700;margin-top:2px}
.cxv{font-size:.76rem;color:var(--muted);margin-top:4px}
.csv audio{height:32px;max-width:180px}
.cyv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.cyv{grid-template-columns:1fr}}
.czv{font-size:.74rem;color:var(--muted);margin-top:4px}
.caw{font-size:.82rem;color:var(--error);margin-top:6px;display:none}
#dl .cjd{max-height:92vh;overflow-y:auto}


.cbw {
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.cbw:hover { background: var(--bg); color: var(--text); }
.cbw.cd { color: #ef4444; border-color: transparent; }
.cbw.cd:hover { background: rgba(239,68,68,.1); }
.ccw { display:flex; align-items:center; gap:5px; }
.cdw { font-size:.82rem; font-weight:600; color:var(--text); min-width:18px; }
.cew { width:54px; padding:3px 6px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; }
.cew:focus { outline:none; border-color:var(--primary); }
.cfw {
  width: 22px; height: 22px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.cfw:hover { background: var(--bg); color: var(--primary); border-color: var(--primary); }


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



.cgw {
  position: relative;
  width: 100%;
  height: 82px;
  padding: 12px 16px 12px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(160deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.42) 55%,
      rgba(200,210,230,0.30) 100%
    );
  box-shadow:
    inset 0  1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px  0 rgba(255, 255, 255, 0.15),
    inset 1px 0   0 rgba(255, 255, 255, 0.20),
    0 8px 40px rgba(0, 0, 0, 0.28),
    0 2px  8px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  transition: opacity 0.6s ease;
}

.cgw::before {
  content: '';
  position: absolute;
  top: -100%; left: -50%;
  width: 200%; height: 300%;
  background: conic-gradient(
    from 0deg at 40% 50%,
    rgba(147, 197, 253, 0.18),
    rgba(196, 181, 253, 0.15),
    rgba(252, 165, 165, 0.13),
    rgba(167, 243, 208, 0.11),
    rgba(253, 224,  71, 0.08),
    rgba(147, 197, 253, 0.18)
  );
  border-radius: 50%;
  animation: tint-rotate 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.cgw::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse at 12% 0%, rgba(255,255,255,0.60) 0%, transparent 48%);
  pointer-events: none;
  z-index: 1;
}

@keyframes tint-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.chw {
  position: absolute;
  bottom: 10px;
  right: 14px;
  height: 18px;
  width: auto;
  opacity: 0.35;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.cgw.ciw .cjw { display: none; }
.ckw {
  display: none;
  position: relative;
  z-index: 2;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.60);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  letter-spacing: 0.2px;
}
.cgw.ciw .ckw { display: flex; }

.cjw {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
}

.clw {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.cmw {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.cnw {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  user-select: none;
}

.cow {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  box-shadow: 0 0 6px #a78bfa;
  animation: pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(0.8); opacity: 0.55; }
}

.cpw {
  height: 22px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.cqw {
  display: inline-block;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.75),
    0 2px 12px rgba(0,0,0,0.55);
  letter-spacing: -0.2px;
  line-height: 22px;
}

.cqw.crw {
  animation: ticker var(--dur, 12s) linear infinite;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--offset, -200px)); }
}

.csw {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.70);
  text-shadow: 0 1px 4px rgba(0,0,0,0.60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



.ovtm {
  position: relative;
  width: 100%;
  height: 82px;
  padding: 12px 18px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(160deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.42) 55%,
      rgba(200,210,230,0.30) 100%
    );
  box-shadow:
    inset 0  1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px  0 rgba(255, 255, 255, 0.15),
    inset 1px 0   0 rgba(255, 255, 255, 0.20),
    0 8px 40px rgba(0, 0, 0, 0.28),
    0 2px  8px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  gap: 13px;
  transition: opacity 0.5s ease;
}


.ctw {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  z-index: 0;
  pointer-events: none;
  transition: width 1s linear, background 0.8s ease;
}
.ovtm::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse at 12% 0%, rgba(255,255,255,0.60) 0%, transparent 48%);
  pointer-events: none;
  z-index: 1;
}
.ovtm.ciw { opacity: 0; }

.chw {
  position: absolute;
  bottom: 10px;
  right: 14px;
  height: 16px;
  width: auto;
  opacity: 0.35;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.cuw {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.cvw { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.cww {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.cxw {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  box-shadow: 0 0 6px #a78bfa;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.8); opacity:.55 } }

.cyw {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 12px rgba(0,0,0,0.5);
}

.czw {
  position: relative;
  z-index: 2;
  margin-left: auto;
  padding-right: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #ef4444;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65);
  display: none;
}

.ovtm.cax .cyw { color: #fecaca; }
.ovtm.cax .cuw { animation: shake .4s ease-in-out infinite; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }

.ovtm.cbx .cyw { color: #ef4444; }
.ovtm.cbx .czw { display: block; }


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



.ccx {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
}


.cdx {
  position: absolute;
  top: 5px;
  left: 0;
  height: 40px;
  display: flex;
  align-items: stretch;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  will-change: transform;
}

.cex {
  display: flex;
  align-items: center;
  height: 40px;
}


.cfx { background: #fff; padding: 0 16px; }
.cfx img { height: 26px; width: auto; display: block; filter: invert(1); }


.cgx {
  background: rgba(0, 0, 0, 0.60);
  padding: 0 22px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}


.chx { width: 80px; background: rgba(0, 0, 0, 0.60); }


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.cix{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.cix.cjx{opacity:1;transform:none}
.ckx{font-size:21px;font-weight:700;color:#fde047;text-shadow:0 2px 8px rgba(0,0,0,.6);letter-spacing:-.01em}
.ckx:empty{display:none}
.clx{font-size:30px;font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);letter-spacing:-.01em;padding:6px 22px;background:linear-gradient(135deg,#a78bfa,#f472b6);border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.cmx{position:relative;width:800px;max-width:96vw;height:120px;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.5);background:linear-gradient(160deg,rgba(255,255,255,.30),rgba(200,210,230,.16));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),0 10px 40px rgba(0,0,0,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cmx::before,.cmx::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:3;pointer-events:none}
.cmx::before{left:0;background:linear-gradient(90deg,rgba(20,20,30,.55),transparent)}
.cmx::after{right:0;background:linear-gradient(270deg,rgba(20,20,30,.55),transparent)}
.cnx{position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:4;font-size:26px;color:#fde047;text-shadow:0 2px 6px rgba(0,0,0,.6);filter:drop-shadow(0 0 4px #fde047)}
.cox{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:rgba(253,224,71,.85);z-index:2;box-shadow:0 0 12px rgba(253,224,71,.8)}
.cpx{position:absolute;top:0;left:0;height:120px;display:flex;will-change:transform}
.cqx{width:160px;height:120px;flex-shrink:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 10px;font-size:22px;font-weight:700;color:#1a1b2e;border-right:1px solid rgba(255,255,255,.4);word-break:break-word;line-height:1.2}
.cqx:nth-child(even){background:rgba(255,255,255,.12)}
.cqx.crx{color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);animation:winpulse .5s ease-in-out 3}
@keyframes winpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.csx{font-size:34px;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.65);opacity:0;transform:scale(.8);transition:opacity .35s ease,transform .35s ease}
.csx.cjx{opacity:1;transform:none}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.cix{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
       opacity:0;transform:translateY(16px) scale(.96);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.cix.cjx{opacity:1;transform:none}
.ctx{position:relative;display:inline-flex}
.cux{max-width:90vw;max-height:76vh;object-fit:contain;border-radius:14px;
         box-shadow:0 12px 48px rgba(0,0,0,.45);filter:drop-shadow(0 0 1px rgba(255,255,255,.2))}

.cvx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;
            font-weight:900;font-size:180px;line-height:1;letter-spacing:-.02em;color:#e11d2a;
            -webkit-text-stroke:16px #fff;paint-order:stroke fill;
            text-shadow:0 6px 22px rgba(0,0,0,.6);pointer-events:none}
.cvx:empty{display:none}
.cwx{font-size:30px;font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);letter-spacing:-.01em;
           padding:6px 22px;background:linear-gradient(135deg,#a78bfa,#f472b6);border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.cwx:empty{display:none}
.cxx{font-size:26px;font-weight:700;color:#fde047;text-shadow:0 2px 8px rgba(0,0,0,.6);letter-spacing:-.01em}
.cxx:empty{display:none}