@charset "utf-8";

/* ================= 먹튀의민족 · 출석체크 ================= */
.ck{
  --k-ink:#171717; --k-ink-2:#747474; --k-ink-3:#8f8f8f;
  --k-line:#e5e5e3; --k-line-2:#dadde0; --k-row:#ebedee;
  --k-soft:#fafaf9; --k-soft-2:#f5f5f4;
  --k-mint:#20bdb8; --k-mint-deep:#159f9a; --k-mint-pale:#eaf8f7;
  --k-red:#d9584f;
  max-width:1000px;margin:0 auto 48px;color:var(--k-ink);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
}

/* --- 제목 --- */
.ck-head{padding-bottom:16px;border-bottom:2px solid var(--k-ink);margin-bottom:20px;}
.ck-head h1{font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1.3;}
.ck-head p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--k-ink-2);}

/* --- 상단 2단 --- */
.ck-top{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;margin-bottom:32px;align-items:start;}

/* 출석 카드 */
.ck-do{
  border:1px solid var(--k-line);border-top:3px solid var(--k-mint);border-radius:10px;
  background:#fff;padding:22px 20px;
}
.ck-date{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;}
.ck-date .d{font-size:22px;font-weight:800;letter-spacing:-.04em;}
.ck-date .w{font-size:13px;font-weight:600;color:var(--k-ink-3);}
.ck-guide{font-size:13px;line-height:1.65;color:var(--k-ink-2);margin-bottom:14px;}

.ck-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:52px;border:1px solid var(--k-mint);border-radius:8px;
  background:var(--k-mint);color:#fff;font-family:inherit;font-size:16px;font-weight:700;
  letter-spacing:-.02em;cursor:pointer;transition:.15s;text-decoration:none;
}
.ck-btn:hover{background:var(--k-mint-deep);border-color:var(--k-mint-deep);color:#fff;}
.ck-btn svg{width:18px;height:18px;}
.ck-btn.done{background:var(--k-soft-2);border-color:var(--k-line);color:var(--k-ink-3);cursor:default;}
.ck-btn:disabled{opacity:1;}

.ck-my{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--k-line);}
.ck-my li{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--k-row);font-size:13px;color:var(--k-ink-3);
}
.ck-my li:last-child{border-bottom:none;}
.ck-my .k{font-weight:600;color:var(--k-ink-2);}
.ck-my b{font-size:17px;font-weight:800;color:var(--k-ink);letter-spacing:-.03em;margin-right:2px;}

/* 달력 */
.ck-cal{border:1px solid var(--k-line);border-radius:10px;background:#fff;padding:18px 20px 16px;}
.ck-cal-h{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:14px;}
.ck-cal-h strong{font-size:17px;font-weight:700;letter-spacing:-.03em;min-width:120px;text-align:center;}
.ck-cal-h .nav{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:1px solid var(--k-line-2);border-radius:8px;color:var(--k-ink-2);transition:.15s;
}
.ck-cal-h .nav:hover{background:var(--k-soft);color:var(--k-ink);}
.ck-cal-h .nav svg{width:15px;height:15px;}

.ck-cal-t{width:100%;border-collapse:collapse;table-layout:fixed;}
.ck-cal-t th{padding:8px 0;font-size:12px;font-weight:600;color:var(--k-ink-3);}
.ck-cal-t th.sun{color:#c07c78;}
.ck-cal-t th.sat{color:#7b8ba6;}
.ck-cal-t td{
  position:relative;height:46px;text-align:center;vertical-align:middle;
  font-size:13.5px;font-weight:600;color:var(--k-ink-2);
}
.ck-cal-t td.sun{color:#c07c78;}
.ck-cal-t td.sat{color:#7b8ba6;}
.ck-cal-t td.blank{color:transparent;}
.ck-cal-t td .n{position:relative;z-index:1;}
.ck-cal-t td.today .n{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--k-ink);border-radius:50%;color:var(--k-ink);
}
.ck-cal-t td.done{color:var(--k-mint-deep);}
.ck-cal-t td.done .n{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  background:var(--k-mint-pale);border:1px solid #cdebe8;border-radius:50%;font-weight:800;
}
.ck-cal-t td.done.today .n{border-color:var(--k-mint-deep);}
.ck-cal-t td .ck{
  position:absolute;right:calc(50% - 18px);top:8px;width:11px;height:11px;color:var(--k-mint-deep);
}

.ck-cal-f{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--k-line);font-size:12px;color:var(--k-ink-3);}
.ck-cal-f .lg{display:inline-flex;align-items:center;gap:6px;}
.ck-cal-f .dot{width:12px;height:12px;border-radius:50%;background:var(--k-mint-pale);border:1px solid #cdebe8;}

/* --- 표 섹션 --- */
.ck-sec{margin-bottom:32px;}
.ck-sec-h{display:flex;align-items:baseline;gap:9px;margin-bottom:12px;}
.ck-sec-h h2{font-size:18px;font-weight:700;letter-spacing:-.035em;}
.ck-sec-h .cnt{font-size:13px;font-weight:600;color:var(--k-ink-3);}

.ck-tblwrap{border:1px solid var(--k-line);border-radius:10px;overflow:hidden;background:#fff;}
.ck-tbl{width:100%;border-collapse:collapse;table-layout:fixed;}
.ck-tbl col.c-no{width:76px;}
.ck-tbl col.c-nick{width:auto;}
.ck-tbl col.c-time{width:100px;}
.ck-tbl col.c-streak{width:86px;}
.ck-tbl col.c-pt{width:110px;}
.ck-tbl thead th{
  background:var(--k-soft);border-bottom:1px solid var(--k-line);padding:11px 12px;
  font-size:12.5px;font-weight:600;color:var(--k-ink-3);text-align:center;white-space:nowrap;
}
.ck-tbl th.ta-l{text-align:left;padding-left:16px;}
.ck-tbl tbody td{
  border-bottom:1px solid var(--k-row);padding:12px;font-size:13.5px;color:var(--k-ink-2);
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ck-tbl tbody tr:last-child td{border-bottom:none;}
.ck-tbl tbody tr:hover td{background:var(--k-soft);}
.ck-tbl tr.me td{background:var(--k-mint-pale);}
.ck-tbl tr.me:hover td{background:#e7f6f5;}

.ck-tbl .rk{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  border-radius:6px;background:var(--k-soft-2);color:var(--k-ink-3);font-size:12px;font-weight:700;
}
.ck-tbl .rk.top{background:var(--k-ink);color:#fff;}
.td-nick{text-align:left!important;padding-left:16px!important;font-weight:600;color:var(--k-ink);}
.td-nick em{
  font-style:normal;margin-left:6px;padding:2px 6px;border-radius:4px;
  background:var(--k-mint-deep);color:#fff;font-size:10.5px;font-weight:700;
}
.td-time{font-variant-numeric:tabular-nums;}
.td-pt{font-weight:700;color:var(--k-mint-deep);}
.td-pt b{font-size:15px;font-weight:800;color:var(--k-ink);}
.ck-tbl tr.empty td{padding:52px 20px;text-align:center;font-size:13.5px;color:var(--k-ink-3);}

/* --- 안내 --- */
.ck-note{border:1px solid var(--k-line);border-radius:10px;background:var(--k-soft);padding:18px 20px;}
.ck-note h2{font-size:14px;font-weight:700;margin-bottom:10px;letter-spacing:-.02em;}
.ck-note ul{list-style:none;}
.ck-note li{position:relative;padding-left:12px;font-size:13px;line-height:1.85;color:var(--k-ink-2);}
.ck-note li::before{content:"";position:absolute;left:0;top:11px;width:3px;height:3px;border-radius:50%;background:var(--k-ink-3);}

/* --- 토스트 --- */
.ck-toast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(14px);
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;border-radius:10px;background:#171717;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transition:.22s;z-index:300;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
}
.ck-toast.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.ck-toast .ic{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:#20bdb8;color:#fff;flex:0 0 auto;
}
.ck-toast .ic svg{width:14px;height:14px;}
.ck-toast .tx{display:flex;flex-direction:column;gap:2px;}
.ck-toast b{font-size:14px;font-weight:700;}
.ck-toast em{font-style:normal;font-size:12.5px;color:#a8a8a8;}

/* --- 다크모드 --- */
:root[data-theme="dark"] .ck{
  --k-ink:#e8e8e8; --k-ink-2:#a5a5a5; --k-ink-3:#7c7c7c;
  --k-line:#2f2f2f; --k-line-2:#3a3a3a; --k-row:#282828;
  --k-soft:#1f1f1f; --k-soft-2:#252525; --k-mint-pale:#15302f;
}
:root[data-theme="dark"] .ck-do,
:root[data-theme="dark"] .ck-cal,
:root[data-theme="dark"] .ck-tblwrap{background:#1b1b1b;}
:root[data-theme="dark"] .ck-tbl .rk.top{background:#20bdb8;color:#0f0f0f;}

/* --- 반응형 --- */
@media (max-width:860px){
  .ck-top{grid-template-columns:minmax(0,1fr);}
  .ck-head h1{font-size:22px;}
  .ck-tbl col.c-streak{width:0;}
  .ck-tbl .td-streak,.ck-tbl thead th.h-streak{display:none;}
}
@media (max-width:560px){
  .ck-do,.ck-cal{padding:16px;}
  .ck-cal-t td{height:40px;font-size:12.5px;}
  .ck-cal-t td.today .n,.ck-cal-t td.done .n{width:25px;height:25px;}
  .ck-tbl col.c-time{width:74px;}
  .ck-tbl col.c-pt{width:84px;}
  .ck-tbl tbody td{padding:11px 8px;font-size:13px;}
  .ck-toast{left:14px;right:14px;bottom:20px;transform:none;}
  .ck-toast.on{transform:none;}
}

/* ── 내 계급 + 오늘 보상 안내 ───────────────────────────── */
.ck-rank{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap;}
.ck-rank .rkb-emo{height:20px;}
.ck-rank-x{font-size:12.5px; color:var(--k-ink-3);}
.ck-rank-x b{color:var(--k-mint-deep); font-weight:800;}

.ck-reward{
  margin:16px 0 0; padding:14px 16px;
  border:1px solid var(--k-line); border-radius:12px;
  background:var(--k-soft);
}
.ck-reward-now{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:0;}
.ck-reward-now .k{font-size:12.5px; color:var(--k-ink-3);}
.ck-reward-now b{font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--k-mint-deep);}
.ck-reward-now em{font-style:normal; font-size:13px; font-weight:700; color:var(--k-mint-deep);}
.ck-reward-now .bn{
  margin-left:4px; padding:3px 9px; border-radius:999px;
  background:#FFF1D6; color:#8A6417; font-size:11.5px; font-style:normal; font-weight:800;
}
.ck-reward-next{display:flex; flex-wrap:wrap; gap:6px 16px; margin:9px 0 0; padding:0; list-style:none;}
.ck-reward-next li{font-size:12.5px; color:var(--k-ink-3);}
.ck-reward-next b{color:var(--k-ink); font-weight:800;}

:root[data-theme="dark"] .ck-reward{background:rgba(12,239,211,.06); border-color:rgba(12,239,211,.16);}
:root[data-theme="dark"] .ck-reward-now .bn{background:rgba(232,163,61,.14); color:#E5B96A;}