/**
 * Vavoom Attendance — 출석체크 화면 (시안 9「보상 티켓」 — 2026-10-27 사용자 선택: 작은 달력 + 출석 버튼 + 받는 보상을 티켓으로)
 *
 * 마이페이지 새 디자인과 같은 틀: 회색 바탕 위 흰 칸을 쌓는다. 글꼴은 지정하지 않는다(사이트 글꼴 상속).
 * 강조색 #fa5250 은 포인트 숫자·임박 표시·도장에만. 규칙은 .vat / .vat-ovw 아래로 묶어 테마·Breakdance 전역 규칙보다 앞서게 한다.
 * 출석 직후 창은 몸체에 붙는다(.vat-ovw) — 사이트 팝업 규칙대로 가로·세로 가운데, 폭 90%(PC 600px 칸에서는 420px 까지).
 */

.vat,
.vat-ovw,
.vat-toast {
  --vat-tx: #191f28;
  --vat-tx2: #333d4b;
  --vat-mu: #6b7684;
  --vat-mu2: #8b95a1;
  --vat-bd: #e5e8eb;
  --vat-line: #f2f4f6;
  --vat-bg: #f4f5f7;
  --vat-p: #fa5250;
  --vat-ok: #1b8a5a;
  --vat-navy: #18293d;
}

.vat {
  display: block;
  margin: 0;
  padding: 0;
  background: var(--vat-bg);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--vat-tx);
}

.vat *,
.vat *::before,
.vat *::after,
.vat-ovw *,
.vat-ovw *::before,
.vat-ovw *::after {
  box-sizing: border-box;
}

.vat :where(p, ul, ol, li, h3, h4, h5),
.vat-ovw :where(p, ul, li, h4, h5) {
  margin: 0;
  padding: 0;
}

.vat :where(ul, ol),
.vat-ovw :where(ul) {
  list-style: none;
}

.vat svg,
.vat-ovw svg {
  display: block;
}

.vat button,
.vat-ovw button {
  margin: 0;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* JS 가 그리기 전 자리(밀림 방지) */
.vat .vat-boot {
  min-height: 720px;
  background: var(--vat-bg);
}

/* ═════════════ 칸 ═════════════ */
.vat .vat-sec {
  margin: 8px 0 0;
  padding: 20px 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.vat > .vat-sec:first-child,
.vat > .vat-ev + .vat-sec {
  margin-top: 0;
}

.vat .vat-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}

.vat .vat-h h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--vat-tx);
}

.vat .vat-h small {
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--vat-mu);
}

.vat .vat-h small b {
  font-weight: 700;
  color: var(--vat-tx);
}

.vat .vat-was,
.vat-ovw .vat-was {
  margin-right: 3px;
  font-weight: 500;
  text-decoration: line-through;
  color: var(--vat-mu2);
}

.vat .vat-rp,
.vat-ovw .vat-rp {
  font-weight: 700;
  white-space: nowrap;
  color: var(--vat-p);
}

.vat .vat-rc,
.vat-ovw .vat-rc {
  font-weight: 700;
  white-space: nowrap;
  color: var(--vat-navy);
}

.vat .vat-empty {
  margin: 0;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  color: var(--vat-mu);
}

/* ═════════════ 기간 이벤트 띠 ═════════════ */
.vat .vat-ev {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff1f0;
  font-size: 14px;
  line-height: 1.4;
  color: #c92a2a;
}

.vat .vat-ev i {
  flex: none;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--vat-p);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.vat .vat-ev b {
  font-weight: 700;
}

.vat .vat-ev .vat-ev-t {
  flex: 1;
  min-width: 0;
}

.vat .vat-ev .vat-ev-d {
  flex: none;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0.85;
}

/* ═════════════ 출석 버튼 ═════════════ */
.vat .vat-go {
  margin: 16px 0 0;
}

.vat button.vat-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-height: 54px;
  height: auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--vat-tx);
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

.vat button.vat-cta b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.vat button.vat-cta small {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.85;
}

.vat button.vat-cta:disabled {
  background: #eef0f3;
  color: var(--vat-mu2);
  cursor: default;
}

.vat button.vat-cta:disabled small {
  opacity: 1;
}

.vat button.vat-cta.is-guest {
  background: var(--vat-navy);
}

.vat button.vat-cta.is-busy {
  opacity: 0.7;
  cursor: progress;
}

.vat .vat-sub {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--vat-mu);
}

.vat .vat-sub button {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--vat-tx2);
}

.vat .vat-reset {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vat-mu);
}

.vat .vat-reset svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1.5px;
}

.vat .vat-reset b {
  font-weight: 700;
  color: var(--vat-tx2);
}

/* ═════════════ 작은 달력 (시안 9) ═════════════ */
.vat .vat-cal-dow,
.vat .vat-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.vat .vat-cal-dow span {
  padding: 0 0 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--vat-mu2);
}

.vat .vat-cal-dow span.is-sun {
  color: #f04452;
}

.vat .vat-cal-grid {
  row-gap: 4px;
}

.vat .vat-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 34px;
}

.vat .vat-dn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  color: var(--vat-tx2);
}

.vat .vat-day.is-miss .vat-dn {
  color: #c4cad2;
}

.vat .vat-day.is-today .vat-dn {
  box-shadow: inset 0 0 0 1.5px var(--vat-tx);
  font-weight: 700;
  color: var(--vat-tx);
}

.vat .vat-day.is-on .vat-dn {
  background: #fff1f0;
  box-shadow: none;
  font-weight: 700;
  color: var(--vat-p);
}

.vat .vat-day.is-on.is-today .vat-dn {
  background: var(--vat-p);
  color: #fff;
}

/* ═════════════ 모으면 받는 보상 — 티켓 (시안 9) ═════════════ */
.vat .vat-tk {
  position: relative;
  display: flex;
  margin: 0;
  border: 1px solid var(--vat-bd);
  border-radius: 12px;
  background: #fff;
}

.vat .vat-tk + .vat-tk {
  margin-top: 10px;
}

/* 절취선 위·아래 반원 홈(가운데가 왼쪽 칸 오른쪽 점선) */
.vat .vat-tk::before,
.vat .vat-tk::after {
  content: "";
  position: absolute;
  left: 100px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--vat-bd);
  border-radius: 50%;
  background: #fff;
}

.vat .vat-tk::before {
  top: -7px;
  clip-path: inset(50% -2px -2px -2px);
}

.vat .vat-tk::after {
  bottom: -7px;
  clip-path: inset(-2px -2px 50% -2px);
}

.vat .vat-tk-l {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 106px;
  padding: 14px 6px;
  border-right: 1px dashed #d1d6db;
  text-align: center;
}

.vat .vat-tk-l b {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--vat-p);
}

.vat .vat-tk-l b.is-cp {
  color: var(--vat-navy);
}

.vat .vat-tk-l b small {
  margin-left: 1px;
  font-size: 14px;
  font-weight: 700;
}

.vat .vat-tk-l span {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--vat-mu);
}

.vat .vat-tk-l s {
  margin-top: 2px;
  font-size: 14px;
  color: var(--vat-mu2);
}

.vat .vat-tk-r {
  flex: 1;
  min-width: 0;
  padding: 13px 14px;
}

.vat .vat-tk-n {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vat-tx);
}

.vat .vat-tk-s {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vat-mu);
}

.vat .vat-tk-s b {
  font-weight: 700;
  color: var(--vat-tx);
}

.vat .vat-tk.is-missed,
.vat .vat-tk.is-done {
  opacity: 0.55;
}

.vat .vat-chip {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff1f0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--vat-p);
  vertical-align: 1px;
}

.vat .vat-bar {
  display: block;
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--vat-line);
}

.vat .vat-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--vat-tx);
}

.vat .vat-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--vat-line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--vat-mu);
}

/* ═════════════ 출석 직후 창 ═════════════ */
html.vat-lock,
html.vat-lock body {
  overflow: hidden;
}

.vat-ovw {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  background: rgba(0, 0, 0, 0.45);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--vat-tx);
}

.vat-ovw[hidden] {
  display: none;
}

.vat-ovw .vat-md {
  width: 90%;
  max-width: 420px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  border-radius: 16px;
  background: #fff;
  scrollbar-width: none;
  animation: vatIn 0.22s ease-out both;
}

.vat-ovw .vat-md::-webkit-scrollbar {
  display: none;
}

@keyframes vatIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.vat-ovw .vat-md-hd {
  padding: 24px 20px 16px;
  text-align: center;
}

.vat-ovw .vat-md-note {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--vat-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--vat-tx2);
}

.vat-ovw .vat-md-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: #e8f5ee;
  color: var(--vat-ok);
}

.vat-ovw .vat-md-ic svg {
  width: 28px;
  height: 28px;
}

.vat-ovw .vat-md-t {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--vat-tx);
}

.vat-ovw .vat-md-d {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--vat-mu);
}

.vat-ovw .vat-mts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 20px;
}

.vat-ovw .vat-mt {
  display: flex;
  align-items: center;
  border: 1px solid var(--vat-bd);
  border-radius: 10px;
}

.vat-ovw .vat-mt b {
  flex: none;
  width: 100px;
  padding: 12px 6px;
  border-right: 1px dashed #d1d6db;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--vat-p);
}

.vat-ovw .vat-mt.is-cp b {
  color: var(--vat-navy);
}

.vat-ovw .vat-mt span {
  min-width: 0;
  padding: 9px 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vat-tx2);
}

.vat-ovw .vat-mt span small {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--vat-mu);
}

.vat-ovw .vat-md-nx {
  padding: 18px 20px 2px;
}

.vat-ovw .vat-md-nx h5 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vat-tx);
}

.vat-ovw .vat-nx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--vat-line);
}

.vat-ovw .vat-nx:first-child {
  border-top: 0;
}

.vat-ovw .vat-nx.is-missed {
  opacity: 0.55;
}

.vat-ovw .vat-nx-d {
  flex: none;
  min-width: 76px;
  padding: 5px 6px;
  border-radius: 8px;
  background: var(--vat-line);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vat-tx2);
}

.vat-ovw .vat-nx-d small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vat-mu);
}

.vat-ovw .vat-nx-d.is-hot {
  background: #fff1f0;
  color: #c92a2a;
}

.vat-ovw .vat-nx-d.is-hot small {
  color: #c92a2a;
}

.vat-ovw .vat-nx-n {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.vat-ovw .vat-nx-n small {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--vat-mu);
}

.vat-ovw .vat-nx-r {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 15px;
  line-height: 1.35;
  text-align: right;
}

.vat-ovw .vat-nx-r .vat-rc {
  font-size: 14px;
}

.vat-ovw .vat-md-reset {
  display: flex;
  gap: 6px;
  margin: 10px 20px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--vat-line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--vat-mu);
}

.vat-ovw .vat-md-reset svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

.vat-ovw .vat-md-reset b {
  font-weight: 700;
  color: var(--vat-tx2);
}

.vat-ovw .vat-md-ft {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 20px 18px;
  background: #fff;
  box-shadow: 0 -1px 0 var(--vat-line);
}

.vat-ovw .vat-md-ft button {
  flex: 1;
  height: 48px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.vat-ovw .vat-md-ft .vat-pri {
  border: 0;
  background: var(--vat-tx);
  color: #fff;
}

.vat-ovw .vat-md-ft .vat-sec2 {
  border: 1px solid #d9dde4;
  background: #fff;
  color: var(--vat-tx);
}

/* ═════════════ 알림 띠 ═════════════ */
.vat-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 2147483001;
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  border-radius: 10px;
  background: rgba(25, 31, 40, 0.92);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: #fff;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.2s;
  pointer-events: none;
}

.vat-toast.is-on {
  opacity: 1;
}