/* =============================================================================
   dbcj生存服 · 白名单申请站
   视觉规范：dbcj 网站风格（深色工具型）
     圆角一律 0 · 只用硬阴影 · 内斜面上亮下暗 · 按钮四变量驱动
     像素字体只用于标题与按钮，字号取 12 的整数倍 · 不依赖任何在线资源
   ⚠️ 类名与 PHP 模板（index.php / admin.php / layout.php）一一对应，改名会破坏功能
   ============================================================================= */

/* ---------------- 像素字体（本地托管） ---------------- */
@font-face {
  font-family: "ArkPixel";
  src: url("fonts/ark-pixel-12px-zh_cn.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 底色阶（暖调，勿换纯灰） */
  --black:      #000000;
  --near-black: #0e0d0c;   /* 页面底 */
  --off-black:  #171615;   /* 区块底 */
  --panel:      #1b1918;   /* 卡片 / 表单面板 */
  --panel-2:    #221f1e;   /* 二级块 / hover */

  /* 描边 */
  --line:        rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);

  /* 文字（带暖调） */
  --white:  #ffffff;
  --grey-2: #d0c5c0;
  --grey-3: #aba09c;
  --grey-4: #8a807c;
  /* 兼容旧变量名 */
  --text:     #e8e4dd;
  --text-dim: #9b948a;

  /* 金色阶（主强调） */
  --gold-1: #fff27a;
  --gold-2: #ffd953;
  --gold-3: #ffc42b;
  --gold-4: #db9f21;
  --gold-5: #b87918;
  --gold-6: #94540e;

  /* 功能色 */
  --green:       #3c8527;
  --green-light: #52a535;
  --green-dark:  #2a641c;
  --red:         #a60000;
  --red-light:   #c62b2b;
  --red-dark:    #7c0000;
  --cyan:        #36e6ff;
  --focus:       #1157be;   /* 键盘焦点环（官方实测值） */

  /* 字体 */
  --font-pixel: "ArkPixel", "Microsoft YaHei", "PingFang SC", monospace;
  --font-sans:  "Noto Sans", "Microsoft YaHei", "PingFang SC",
                system-ui, -apple-system, sans-serif;

  /* 结构 */
  --content-max: 960px;        /* 表单站比门户窄，读起来更专注 */
  --shadow-hard: 0 4px 0 rgba(0, 0, 0, .45);
  --shadow-lift: 0 8px 0 rgba(0, 0, 0, .45);
}

/* ---------------- 基础 ---------------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  background: var(--near-black);
  color: var(--grey-2);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: var(--gold-3); text-decoration: none; }
a:hover { color: var(--gold-1); }
h1, h2, h3 { font-family: var(--font-pixel); font-weight: 400; color: var(--white); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------- 页眉（68px 吸顶） ---------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* 纯色：与「发送验证码」按钮同一个绿，不用渐变 */
  background: var(--green);
  border-bottom: 2px solid var(--green-dark);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--content-max);
  margin: 0 auto;
  height: 68px;
  padding: 0 22px;
}
.header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 0 0 auto;
}
.header__logo {
  width: 48px;          /* 原图 96×72 的 1/2，整数倍不糊 */
  height: 36px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.header__text { display: flex; flex-direction: column; flex: 0 0 auto; }
.header__title {
  font-family: var(--font-pixel);
  font-size: 24px;      /* = 12×2，像素字体整数倍 */
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.header__sub { font-size: 12px; line-height: 1.2; color: rgba(255, 255, 255, .82); }
/* 手机端菜单按钮。和官网 .nav-toggle 同一套做法：
   桌面 display:none，≤1000px 才出现；三条横线用 span 画，不用 ☰ 字符。 */
.header__toggle {
  display: none;                 /* 桌面端不显示 */
  flex: 0 0 auto;
  margin-left: auto;
  width: 34px;
  height: 34px;
  padding: 8px 5px;
  flex-direction: column;
  justify-content: space-between;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
.header__toggle span {
  display: block;
  height: 3px;
  background-color: var(--gold-3);
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.header__toggle:hover span { background-color: var(--gold-2); }
.header__toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* 菜单打开时，三横线变叉（和官网一样的动画） */
.header.is-open .header__toggle span:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
}
.header.is-open .header__toggle span:nth-child(2) { opacity: 0; }
.header.is-open .header__toggle span:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg);
}

.header__nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.header__nav a {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.header__nav a:hover { color: var(--green-light); }
.header__nav a.is-current { color: var(--green-light); }

/* ---------------- 区块与容器 ---------------- */
.section { padding: 40px 0 56px; }
.section--alt { background: var(--off-black); }
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 22px;
}
.wrap--wide { max-width: 1180px; }

.section h1 { font-size: 48px; line-height: 1.1; margin: 0 0 6px; }
.desc { color: var(--grey-3); }
.desc p { margin: 0 0 10px; }

/* ---------------- 表单面板 ---------------- */
.box {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-hard);
  padding: 26px;
  margin: 22px 0;
}
.box--warn { border-color: rgba(255, 196, 43, .4); background: rgba(255, 196, 43, .06); }
.box__title {
  font-family: var(--font-pixel);
  font-size: 24px;
  color: var(--gold-3);
  margin: 0 0 14px;
}

.field { margin: 0 0 20px; }
.field__label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 24px;
  color: var(--white);
  margin-bottom: 4px;
}
.field__hint { font-size: 12.5px; color: var(--grey-4); margin-bottom: 8px; }

input[type="text"], input[type="email"], input[type="password"], select, textarea {
  display: block;
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--white);
  background: var(--near-black);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35);
  transition: border-color .15s;
}
input::placeholder { color: var(--grey-4); }
input:focus, select:focus, textarea:focus { border-color: var(--gold-3); outline: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);   /* 键盘焦点用官方蓝，和金色按钮区分 */
  outline-offset: 1px;
}

/* 复选框那行 */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--grey-2);
}
.check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold-3);
  flex: 0 0 auto;
}

/* 提示里的邮箱高亮 */
.mailbox {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--gold-2);
  background: rgba(255, 196, 43, .12);
  border: 1px solid rgba(255, 196, 43, .35);
  word-break: break-all;
}

/* ---------------- 按钮（四变量驱动，加色系只写一个类） ---------------- */
.btn {
  --btn-bg:    #c4701a;
  --btn-light: #e8944a;
  --btn-dark:  #7d4310;
  --btn-text:  #fff8ef;

  display: inline-block;
  position: relative;
  padding: 14px 26px;
  font-family: var(--font-pixel);
  font-size: 24px;          /* = 12×2 */
  line-height: 1.05;
  letter-spacing: 0;        /* 像素字体禁止字距 */
  text-decoration: none;
  text-align: center;
  color: var(--btn-text);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  background: var(--btn-bg);
  border: 2px solid;
  border-color: var(--btn-light) var(--btn-dark) var(--btn-dark) var(--btn-light);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: filter .15s, transform .1s, box-shadow .1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.btn--green {
  --btn-bg: var(--green); --btn-light: var(--green-light);
  --btn-dark: var(--green-dark); --btn-text: #fff;
}
.btn--gold {
  --btn-bg: var(--gold-3); --btn-light: var(--gold-1);
  --btn-dark: var(--gold-5); --btn-text: #2b1d00;
}
.btn--small { padding: 8px 14px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.again {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--grey-4);
  text-decoration: underline;
  cursor: pointer;
}
.again:hover { color: var(--gold-3); }
.inline { display: inline; }

/* ---------------- 提示条 ---------------- */
.notice {
  margin: 0 0 20px;
  padding: 14px 16px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  background: var(--panel);
  color: var(--grey-2);
}
.notice--ok  { border-left-color: var(--green-light); background: rgba(82, 165, 53, .10); }
.notice--err { border-left-color: var(--red-light);   background: rgba(198, 43, 43, .10); }

/* ---------------- 状态标签（后台列表） ---------------- */
.tag {
  display: inline-block;
  padding: 3px 9px;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: #fff;
  background: var(--grey-4);
  border: 1px solid rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.tag--pending  { background: var(--gold-4); color: #2b1d00; }
.tag--approved { background: var(--green); }
.tag--synced   { background: #2f6f9f; }
.tag--rejected { background: var(--red); }
.tag--removed  { background: #4a4a4a; }
.tag--removing { background: #7a5a2a; }

/* ---------------- 摘要块（index.php 第二步用 table） ---------------- */
.summary {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 13.5px;
}
.summary td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--grey-2);
}
.summary td:first-child {
  width: 108px;
  color: var(--grey-4);
  white-space: nowrap;
}
.summary b { color: var(--white); font-weight: 600; }

/* ---------------- 后台：控制面板 ---------------- */
.panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 22px 0;
}
.panel__item {
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-hard);
}
/* 面板里的标题要比独立 .box 小一号，三个并排才不挤 */
.panel__item .box__title { font-size: 15px; margin-bottom: 6px; }
.panel__state {
  font-family: var(--font-pixel);
  font-size: 15px;
  margin: 10px 0 14px;
  white-space: nowrap;
}
.panel__state.is-on  { color: var(--green-light); }
.panel__state.is-off { color: var(--grey-4); }
.panel__state--info  { color: var(--gold-3); font-size: 13px; }
.panel__item .inline { display: block; }

/* ---------------- 后台：表格 ---------------- */
/* 窄屏时表格可以横向滚动，不要把整页撑破 */
.table-wrap {
  overflow-x: auto;
  margin-bottom: 28px;
}
/* 列一共 8 列 + 操作按钮，给一个宽度下限：
   窄屏时表格整体横向滚动，而不是把每列压到挤在一起 */
.table-wrap table { min-width: 940px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}

th,
td {
  padding: 13px 18px;          /* ← 之前完全没有 padding，数据才挤在一起 */
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;         /* 时间 / ID 一律不折行 */
}

th {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--gold-3);
  background: var(--off-black);
  border-bottom: 2px solid var(--gold-5);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }

/* ── 不同数据用不同颜色（一眼能分清列）────────────────── */
.cell--name   { color: var(--white);  font-family: var(--font-pixel); }
.cell--qq     { color: var(--gold-3); font-variant-numeric: tabular-nums; }
.cell--ip     { color: var(--cyan);   font-variant-numeric: tabular-nums; }
.cell--time   { color: var(--grey-4); font-variant-numeric: tabular-nums;
                font-size: 13px; }
.cell--status { white-space: nowrap; }
.cell--status .tag { margin: 0 4px 4px 0; }   /* 多个状态标签换行不挤 */
.cell--qq, .cell--ip, .cell--time { min-width: 96px; }
.cell--name { min-width: 108px; }
.cell--dim    { color: var(--grey-4); font-size: 13px; }
.cell__ip     { margin-right: 10px; }

/* 表格里按钮行 */
td.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
td.actions form { display: inline-block; margin: 0; }

/* 自动审批通过的标记 */
.tag--auto {
  background: #3a3a3a;
  color: var(--grey-2);
  margin-left: 6px;
  font-size: 11px;
  padding: 2px 7px;
}

/* 红色按钮（封禁 IP 用） */
.btn--danger {
  --btn-bg: var(--red);
  --btn-light: var(--red-light);
  --btn-dark: var(--red-dark);
  --btn-text: #fff;
}

@media (max-width: 900px) {
  .panel { grid-template-columns: 1fr; }
}

/* ---------------- 接受申请 总开关（整条横幅） ---------------- */
.gate {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin: 20px 0 4px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  background: var(--panel);
  box-shadow: var(--shadow-hard);
}
.gate--on  { border-left-color: var(--green-light); }
.gate--off { border-left-color: var(--red-light); background: rgba(198, 43, 43, .08); }

.gate__text  { flex: 1 1 320px; min-width: 0; }
.gate__title {
  font-family: var(--font-pixel);
  font-size: 17px;
  color: var(--gold-3);
  margin-bottom: 5px;
}
.gate__desc  { font-size: 12.5px; color: var(--grey-4); }
.gate__state {
  font-family: var(--font-pixel);
  font-size: 15px;
  white-space: nowrap;
}
.gate--on  .gate__state { color: var(--green-light); }
.gate--off .gate__state { color: var(--red-light); }

/* 申请页的"暂停使用"提示条 */
.notice--pause {
  border-left-color: var(--red-light);
  background: rgba(198, 43, 43, .12);
  color: var(--grey-2);
}
.notice--pause strong {
  display: block;
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--red-light);
  margin-bottom: 6px;
}
.notice__body { font-size: 13.5px; }

/* 面板里的分隔线（把"邮件自测"和"手动添加"隔开） */
.panel__split {
  height: 1px;
  background: var(--line);
  margin: 16px 0 14px;
}

/* ---------------- 翻页 ---------------- */
.pager {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 26px;
  flex-wrap: wrap;
}
.pager__btn {
  display: inline-block;
  padding: 9px 18px;
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--gold-3);
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  box-shadow: var(--shadow-hard);
}
.pager__btn:hover { color: var(--gold-1); border-color: var(--gold-5); }
.pager__btn.is-off {
  color: var(--grey-4);
  opacity: .45;
  box-shadow: none;
  cursor: default;
}
.pager__info {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--grey-2);
}
.pager__sub {
  display: block;
  margin-top: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--grey-4);
}

/* ---------------- 页脚 ---------------- */
.footer {
  background: var(--near-black);
  border-top: 1px solid var(--line);
  padding: 26px 0;
  margin-top: 20px;
}
.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 40px;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--grey-4);
}
/* 两个 logo 并排：白色版 + 彩色版（与官网页脚一致）
   显示宽 128px = 像素原图的整数倍，缩放后边缘依然干净 */
.footer__brand { flex: 0 0 auto; }
.footer__logos {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}
.footer__logo {
  display: block;
  width: 128px;
  height: auto;
  image-rendering: pixelated;
}
.footer__copy { margin: 0 0 6px; font-size: 14px; color: var(--grey-2); }
.footer__note { margin: 0; font-size: 12.5px; color: var(--grey-4); }

.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a { color: var(--grey-3); }
.footer__links a:hover { color: var(--gold-3); }

/* ---------------- 响应式 ---------------- */

/* ≤1000px：导航收进下拉面板（和官网同一个断点） */
@media (max-width: 1000px) {
  .header__inner { padding: 0 20px; height: 60px; }
  .header__logo { width: 40px; height: 30px; }
  .header__title { font-size: 20px; }
  .header__toggle { display: flex; }

  .header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--green-dark);
    border-bottom: 2px solid var(--green-light);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .55);
  }
  .header.is-open .header__nav { display: flex; }

  .header__nav a {
    display: block;
    padding: 15px 20px;
    font-size: 12px;
    color: #fff;
    text-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, .22);
  }
  .header__nav a:first-child { border-top: 0; }
  .header__nav a:hover,
  .header__nav a.is-current { background: var(--green); color: #fff; }
}

@media (max-width: 720px) {
  .header__inner { padding: 0 16px; gap: 14px; }
  .header__sub { display: none; }
  .wrap { padding: 0 16px; }
  .section { padding: 28px 0 40px; }
  .section h1 { font-size: 24px; }
  .box { padding: 20px 16px 22px; }
  .field__label { font-size: 12px; }
  .btn { width: 100%; }
  .actions .btn { width: auto; flex: 1 1 auto; }
}

@media (max-width: 460px) {
  .header__title { font-size: 12px; }
  /* 原图 96×72，这里取 1/3 = 32×24（必须整数倍，否则像素点大小不均） */
  .header__logo { width: 32px; height: 24px; }
}

/* 动画降级 */
@media (prefers-reduced-motion: reduce) {
  .btn, input, select, textarea { transition: none; }
  .btn:active { transform: none; }
  .header__toggle span { transition: none; }
}

/* ==================== 加群模块（搬自官网「加入方法」） ==================== */
.join {
  padding: 48px 0 56px;
  background: var(--off-black);
}
.join__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 28px 48px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-hard);
}
.join__icon {
  width: 108px;
  height: auto;
  margin-bottom: 22px;
}
.join__title {
  margin: 0 0 16px;
  font-family: var(--font-pixel);
  font-size: 36px;          /* = 12×3 */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--white);
  text-shadow: 0 4px 0 rgba(0, 0, 0, .45);
}
.join__text { max-width: 560px; margin-bottom: 14px; }
.join__text p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--grey-2);
}
.join__text p:last-child { margin-bottom: 0; }
.join__text--tail { margin-top: 16px; }
.join__text--tail p { font-size: 13.5px; color: var(--grey-4); }

/* QQ 群列表：每行 = 名称 + 群号 + 备注 + 复制按钮 */
.join__groups {
  width: 100%;
  max-width: 470px;
  margin: 10px auto 0;
}
.join__group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}
.join__group + .join__group { margin-top: 8px; }
.join__group-name { flex: 0 0 auto; font-size: 15px; color: var(--grey-3); }
.join__group-no {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-pixel);
  font-size: 24px;          /* = 12×2，群号用像素字体 */
  letter-spacing: 0;
  color: var(--gold-3);
  text-align: left;
}
.join__group-tag {
  flex: 0 0 auto;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--grey-3);
  border: 1px solid var(--line-strong);
}
.join__group-tag.is-recommend {
  color: var(--gold-3);
  border-color: var(--gold-3);
  background: rgba(255, 196, 43, .12);
}
.join__btn { margin-top: 22px; }

/* 小按钮（复制群号） */
.mini-btn {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1.1;
  color: #2b1d00;
  background: var(--gold-3);
  border: 2px solid;
  border-color: var(--gold-1) var(--gold-5) var(--gold-5) var(--gold-1);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: filter .15s, transform .1s, box-shadow .1s;
}
.mini-btn:hover { filter: brightness(1.06); }
.mini-btn:active { transform: translateY(2px); box-shadow: none; }
.mini-btn.is-done {
  color: #0f2a08;
  background: #6cc349;
  border-color: #a0e081 #2a641c #2a641c #a0e081;
}

@media (max-width: 720px) {
  .join { padding: 32px 0 40px; }
  .join__panel { padding: 30px 16px 34px; }
  .join__title { font-size: 24px; }
  .join__icon { width: 84px; margin-bottom: 18px; }
  .join__group { gap: 8px; padding: 8px 10px; }
  .join__group-no { font-size: 18px; }
  .join__group-tag { padding: 1px 6px; font-size: 11px; }
  .join__group .mini-btn { padding: 6px 10px; }
  .join__btn { width: 100%; }
}