/* BASIC css start */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');


/* =========================================================
   PC 출석체크 페이지 디자인 (BLACK MAYDAY EVENT 02)
   - 모바일과 같은 디자인을 PC 너비에 맞게 키운 버전
   - .attendance-wrap.mb-pc 안에서만 적용됩니다.
   ========================================================= */
.attendance-wrap.mb-pc {
    width: 100%;
    margin: 0;
    padding: 90px 0 110px;
    background: #e9e6e3;
    font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    color: #111;
}
.attendance-wrap.mb-pc * { box-sizing: border-box; }
/* 기존 스킨의 고정 높이/float 때문에 배경이 중간에 끊기지 않도록 */
.attendance-wrap.mb-pc,
.attendance-wrap.mb-pc #attendance,
.attendance-wrap.mb-pc #attendance .calendar,
.attendance-wrap.mb-pc #attendance #template-calendar {
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.attendance-wrap.mb-pc { display: flow-root; }
.attendance-wrap.mb-pc #attendance {
    width: 820px;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
}

/* ---------- 타이틀 ---------- */
.attendance-wrap.mb-pc #attendance .mb-head { margin: 0; padding: 0; }
.attendance-wrap.mb-pc #attendance .mb-eyebrow {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.2;
}
.attendance-wrap.mb-pc #attendance .mb-title {
    margin: 10px 0 0;
    padding: 0;
    font-size: 44px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: #111;
}
/* 출석 횟수 배지 */
.attendance-wrap.mb-pc #attendance .mb-count {
    display: inline-block;
    margin: 26px 0 0;
    padding: 12px 30px;
    border-radius: 999px;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #111;
}
.attendance-wrap.mb-pc #attendance .mb-count strong { font-weight: 700; }
.attendance-wrap.mb-pc #attendance .mb-count em {
    margin: 0 2px;
    font-style: normal;
    font-size: 19px;
    font-weight: 800;
    color: #f20000;
}

/* ---------- 월 이동 ---------- */
.attendance-wrap.mb-pc #attendance .calendar,
.attendance-wrap.mb-pc #attendance #template-calendar {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.attendance-wrap.mb-pc #attendance .clndr-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    height: auto;
    margin: 56px 0 24px;
    padding: 0;
    border: 0;
    background: none;
}
.attendance-wrap.mb-pc #attendance .clndr-controls a { display: block; text-decoration: none; }
.attendance-wrap.mb-pc #attendance .clndr-controls .month {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    color: #111;
}
.attendance-wrap.mb-pc #attendance .clndr-controls .month .num { font-size: inherit; font-weight: inherit; color: inherit; }
.attendance-wrap.mb-pc #attendance .clndr-control-button {
    position: relative;
    float: none;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #000;
    transition: background .2s;
}
.attendance-wrap.mb-pc #attendance .clndr-controls a:hover .clndr-control-button { background: #444; }
/* 화살표 (흰색 꺾쇠) */
.attendance-wrap.mb-pc #attendance .clndr-control-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: solid #fff;
    border-width: 3px 3px 0 0;
    background: none;
    text-indent: -9999px;
    overflow: hidden;
}
.attendance-wrap.mb-pc #attendance .clndr-previous-button { transform: translate(-30%, -50%) rotate(-135deg); }
.attendance-wrap.mb-pc #attendance .clndr-next-button { transform: translate(-70%, -50%) rotate(45deg); }

/* ---------- 달력 ---------- */
.attendance-wrap.mb-pc #attendance .mb-panel {
    position: relative;
    padding: 0 36px 40px;
    background: #fff;
}
/* 요일 검정 바 (패널 전체 너비) */
.attendance-wrap.mb-pc #attendance .mb-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #000;
}
.attendance-wrap.mb-pc #attendance .clndr-table {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: -8px 0 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 8px;
    table-layout: fixed;
    background: none;
}
.attendance-wrap.mb-pc #attendance .clndr-table thead,
.attendance-wrap.mb-pc #attendance .clndr-table thead tr,
.attendance-wrap.mb-pc #attendance .clndr-table thead td {
    background: transparent;
    border: 0;
}
.attendance-wrap.mb-pc #attendance .clndr-table thead td {
    height: 86px;                            /* 48px(바 안쪽) + 38px(아래 간격) */
    padding: 0;
    border-bottom: 38px solid transparent;   /* 요일 바와 날짜 사이 간격 */
    vertical-align: middle;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #fff;
}
.attendance-wrap.mb-pc #attendance .clndr-table thead .header-day-dow-0 { color: #f20000; }

/* 날짜 칸
   - 기존 스킨의 일요일(분홍)/토요일(파랑) 배경, 회색·빨강·파랑 글자색,
     오늘 날짜 파란 동그라미를 모두 지우고 하나의 스타일로 통일
   - 숫자: 오른쪽 위 / 출석 스탬프(배경 이미지)는 그대로 유지 */
.attendance-wrap.mb-pc #attendance .clndr-table tbody td {
    position: relative;
    height: 96px !important;
    padding: 14px 16px 0 !important;
    border: 0 !important;
    border-radius: 8px;
    background: #ebe8e6 !important;
    vertical-align: top !important;
    text-align: right !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #111 !important;
}
.attendance-wrap.mb-pc #attendance .clndr-table tbody td * {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1.2 !important;
    text-align: right !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
}
/* 출석 / 미출석 표시 (글자)
   - 스크립트가 날짜 칸에 붙이는 클래스에 따라 표시
     mb-st-attend / mb-st-achieve / mb-st-complete → 출석 (빨강)
     mb-st-absence → 미출석 (그레이) */
.attendance-wrap.mb-pc #attendance .clndr-table tbody td .stamp,
.attendance-wrap.mb-pc #attendance .clndr-table tbody td [class*="stamp"] {
    background-image: none !important;   /* 기존 도장 이미지는 숨김 */
}
.attendance-wrap.mb-pc #attendance .clndr-table tbody td::after {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    text-align: center;
    pointer-events: none;
}
.attendance-wrap.mb-pc #attendance .clndr-table tbody td.mb-st-attend::after,
.attendance-wrap.mb-pc #attendance .clndr-table tbody td.mb-st-achieve::after,
.attendance-wrap.mb-pc #attendance .clndr-table tbody td.mb-st-complete::after {
    content: '출석';
    display: block;
    color: #f20000;
}
.attendance-wrap.mb-pc #attendance .clndr-table tbody td.mb-st-absence::after {
    content: '미출석';
    display: block;
    color: #9a948f;
}
/* 기존 스킨이 이미지(img)로 도장을 넣는 경우: 이미지는 숨기고 '출석' 글자로 통일 */
.attendance-wrap.mb-pc #attendance .clndr-table tbody td img { display: none !important; }
/* 오늘 날짜: 검정 테두리 + 굵은 숫자 */
.attendance-wrap.mb-pc #attendance .clndr-table tbody td.mb-today {
    box-shadow: inset 0 0 0 2px #111;
    font-weight: 700 !important;
}
/* 날짜가 없는 빈 칸 */
.attendance-wrap.mb-pc #attendance .clndr-table tbody td.mb-empty {
    background: transparent !important;
    box-shadow: none;
}
.attendance-wrap.mb-pc #attendance .clndr-table tbody td.mb-empty * { background: none !important; }

/* ---------- 혜택 안내 ---------- */
.attendance-wrap.mb-pc #attendance .mb-reward { margin: 64px 0 0; line-height: 1.6; }
.attendance-wrap.mb-pc #attendance .mb-reward p { margin: 0; font-size: 19px; color: #111; }
.attendance-wrap.mb-pc #attendance .mb-reward strong { font-size: 24px; font-weight: 800; }

/* ---------- 출석하기 버튼 ---------- */
.attendance-wrap.mb-pc #attendance .clndr-foot {
    display: block !important;
    margin: 32px 0 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
}
.attendance-wrap.mb-pc #attendance .btn-attendance {
    display: inline-block;
    width: 360px;
    height: auto;
    margin: 0;
    padding: 19px 0;
    border: 0;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s;
}
.attendance-wrap.mb-pc #attendance .btn-attendance span {
    padding: 0;
    background: none;
    color: #fff;
    font: inherit;
}
.attendance-wrap.mb-pc #attendance .btn-attendance:hover { background: #333; }

/* BASIC css end */