/* 출석부: 포인트 페이지와 같은 E.F.S.F. 화이트 아머 외형.
 *
 * ⚠️ 마크업은 건드리지 않았다. 출석부의 기존 구조(.attendance-shell / .attendance-header-card /
 *    #date_list / .calendartop / .wd14 …) 를 그대로 두고 CSS 로만 포인트와 같은 옷을 입힌다.
 *    그래서 선택자가 포인트(point-federation-frame.css)와 짝을 이룬다 — 그쪽 값이 바뀌면
 *    여기도 같이 맞춰야 둘이 어긋나지 않는다.
 *
 * ⚠️ 타이틀 배경도 포인트와 같은 격납고 아트(gundam-point-hangar-v5)를 쓴다. "포인트 타이틀과
 *    동일하게" 가 요청이라 프레임만 흉내 내지 않고 그림까지 같은 것을 깐다. 포인트 전용 소재가
 *    아니라 E.F.S.F. 격납고 배경이라 출석부에 붙여도 내용이 어긋나지 않는다.
 *
 * ⚠️ 포인트 프레임과 같은 조건(min-width:1200px)에서만 적용한다. 그 아래 폭은 기존 모바일
 *    레이아웃을 그대로 둔다 — 포인트도 같은 기준이다.
 */
@media (min-width: 1200px) {

    /* ── 페이지 바탕: 포인트와 같은 밝은 격자 ── */
    html:has(.w_attendance) body.gundam-skin .w_attendance {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 28px !important;
        background:
            linear-gradient(90deg, rgb(195 205 215 / 35%) 1px, transparent 1px) 0 0 / 72px 100%,
            #f5f7f9 !important;
        color: #0b2848;
    }

    /* ── 상단 타이틀: 포인트와 같은 격납고 프레임 ── */
    html body.gundam-skin.gundam-skin .w_attendance > .page_ttl,
    html body.gundam-skin #ajax-content.contents > .page.w_attendance > .page_ttl {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        display: flex !important;
        width: auto !important;
        height: 171px !important;
        min-height: 171px !important;
        max-height: 171px !important;
        margin: 0 !important;
        border: 1px solid #395b74 !important;
        border-inline: 0 !important;
        box-shadow: inset 0 4px #0b2135, inset 0 -5px #071522, inset 0 -7px #33c8f3 !important;
        background:
            linear-gradient(90deg, transparent 30%, rgb(1 13 24) 43% 61%, transparent 72%),
            #031323 url('/skin/gundam_main/images/page-titles/gundam-point-hangar-v5.webp?v=1') center / 100% 100% no-repeat !important;
    }

    /* 제목 글자 — 포인트의 gundam-page-title-copy 와 같은 크기·굵기 */
    html body.gundam-skin #ajax-content.contents > .page.w_attendance > .page_ttl > .gundam-page-title-copy,
    html body.gundam-skin.gundam-skin .w_attendance > .page_ttl > .gundam-page-title-copy {
        /* ⚠️ 기존 규칙(body.gundam-skin .gundam-page-title-copy)이 이 요소를 absolute 로 띄우고
           top/left 50% 로 밀어 둔다. 포인트처럼 flex 중앙정렬을 쓰려면 그 offset 을 풀어야
           한다 — 안 풀면 글자가 오른쪽 아래로 밀려난다. */
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 2 !important;
        display: inline !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-family: "Malgun Gothic", sans-serif !important;
        font-size: 52px !important;
        font-weight: 900 !important;
        letter-spacing: -.055em !important;
        line-height: 1 !important;
        opacity: 1 !important;
        text-shadow: 0 3px 8px #00101f !important;
        transform: translate(-2px, -13px) !important;
    }

    /* 제목 아래 시안 바 — 포인트와 같은 장식.
       ⚠️ 포인트에는 영문 부제(gundam-page-title-en)가 한 줄 더 있지만 출석부 마크업에는 없다.
          마크업을 건드리지 않기로 했으므로 바만 둔다. */
    html body.gundam-skin #ajax-content.contents > .page.w_attendance > .page_ttl::before {
        position: absolute !important;
        top: 117px !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        z-index: 2 !important;
        display: block !important;
        width: 264px !important;
        height: 8px !important;
        border: 0 !important;
        background: linear-gradient(90deg, #13bde9 0 64px, transparent 64px 194px, #13bde9 194px 264px) center / 100% 3px no-repeat !important;
        box-shadow: none !important;
        color: transparent !important;
        content: "" !important;
        opacity: 1 !important;
        transform: translateX(-50%) !important;
    }

    html body.gundam-skin #ajax-content.contents > .page.w_attendance > .page_ttl::after {
        display: none !important;
        content: none !important;
    }

    /* ── 본문 패널: 포인트 카드와 같은 흰 장갑판 ── */
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-shell {
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-header-card,
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list {
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 7px solid #d7e0e7 !important;
        border-radius: 0 !important;
        background: #f8fafc !important;
        box-shadow: inset 0 -1px #7b94ab !important;
        color: #0b2848 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-header-card {
        min-height: 0 !important;
        padding: 22px 30px 18px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list {
        padding: 22px 30px 26px !important;
    }

    /* 월 이동 영역 — 포인트 표 머리(point-ledger__head)와 같은 밑줄 처리 */
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav {
        padding: 0 0 14px !important;
        border-bottom: 2px solid #c3ced8 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav .title {
        color: #0d2d52 !important;
        font-weight: 800 !important;
        letter-spacing: -.02em !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav .att {
        border: 1px solid #b7c4d0 !important;
        border-radius: 2px !important;
        background: #eef2f6 !important;
        box-shadow: none !important;
        color: #23507e !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav .att:hover {
        background: #e2e9f0 !important;
    }

    /* 안내문 — 포인트 소제목/설명 색을 따른다 */
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-card {
        margin-top: 14px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #344c63 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-value { color: #163958 !important; }
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-copy  { color: #344c63 !important; }

    /* 출석 체크 버튼 — 포인트 전환 버튼(#point_proc)과 같은 파랑 */
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-actions .btnRed {
        border: 1px solid #14507f !important;
        border-radius: 2px !important;
        background: linear-gradient(180deg, #2f7fc0, #17548a) !important;
        box-shadow: inset 0 1px rgb(255 255 255 / 28%) !important;
        color: #fff !important;
        font-weight: 800 !important;
        letter-spacing: -.02em !important;
        text-shadow: 0 1px 2px rgb(0 0 0 / 35%) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-actions .btnRed:hover {
        background: linear-gradient(180deg, #3a8ccd, #1a5e99) !important;
    }

    /* ── 달력 ── */
    /* 요일 머리 — 포인트 표 헤더와 같은 밝은 띠 */
    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop .bg-attendance-week-blue2 {
        border: 0 !important;
        border-radius: 0 !important;
        background: #e7edf3 !important;
        box-shadow: inset 0 -2px #c3ced8 !important;
        color: #33506d !important;
        font-weight: 800 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop .text-red105 { color: #c0392b !important; }
    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop .text-white  { color: #33506d !important; }

    /* 요일 칸 바깥 상자 — 예전 어두운 그라데이션이 남아 검은 블록으로 보였다 */
    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop .wd14 {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
    }

    /* 안내 배지 — 예전 갈색을 포인트 계열 남색으로 */
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-label {
        border-radius: 2px !important;
        background: #23507e !important;
        color: #fff !important;
        font-weight: 800 !important;
    }

    /* 날짜 칸 — 흰 장갑판 위 옅은 칸 */
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day > div {
        border: 1px solid #dbe3ea !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #0b2848 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .text-blue2,
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .text-blue22 {
        color: #23507e !important;
    }
}

/* 2026-08 attendance center redesign: approved full-page mockup implementation. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance {
        padding-bottom: 0 !important;
        background: #f7f9fb !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-shell {
        padding: 10px 7px 12px !important;
        background: #f7f9fb !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-header-card {
        display: flex !important;
        min-height: 76px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        padding: 12px 42px !important;
        border: 1px solid #b7c8d6 !important;
        border-radius: 0 !important;
        background: #fbfcfd !important;
        box-shadow: inset 0 1px #fff !important;
        clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav {
        min-width: 326px !important;
        justify-content: space-between !important;
        gap: 22px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav .title {
        min-width: 170px !important;
        padding: 0 !important;
        color: #102f50 !important;
        font-size: 24px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav .att {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border: 1px solid #b8c8d5 !important;
        border-radius: 0 !important;
        color: #173f63 !important;
        background: #f7fafc !important;
        box-shadow: inset 0 1px #fff !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .titleCont .prev::before,
    html:has(.w_attendance) body.gundam-skin .w_attendance .titleCont .next::before {
        color: #173f63 !important;
        font-size: 24px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-card {
        min-height: 0 !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-label {
        height: 34px !important;
        padding: 0 15px !important;
        border: 1px solid #6f8aa1 !important;
        border-radius: 0 !important;
        color: #173d61 !important;
        background: #fff !important;
        font-size: 13px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-value {
        color: #173d61 !important;
        font-size: 14px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-copy {
        color: #5d7183 !important;
        font-size: 13px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list {
        margin-top: 10px !important;
        padding: 8px 16px 10px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop {
        gap: 0 !important;
        border-top: 1px solid #c7d3dd !important;
        border-left: 1px solid #c7d3dd !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop .wd14 {
        height: 36px !important;
        border-right: 1px solid #d6e0e7 !important;
        border-bottom: 1px solid #c7d3dd !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop .bg-attendance-week-blue2 {
        width: 100% !important;
        min-height: 35px !important;
        padding: 0 !important;
        background: #f7f9fb !important;
        box-shadow: none !important;
        color: #173a5b !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .m-t-2 {
        gap: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        border-left: 1px solid #d6e0e7 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .wd14.day {
        min-height: 62px !important;
        height: 62px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day > div {
        min-height: 62px !important;
        padding: 8px !important;
        border: 0 !important;
        border-right: 1px solid #d6e0e7 !important;
        border-bottom: 1px solid #d6e0e7 !important;
        background: #fff !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day.is-today > div {
        z-index: 2 !important;
        outline: 2px solid #14aee0 !important;
        outline-offset: -2px !important;
        background: #fafdff !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue2 {
        color: #173753 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day.is-sunday .text-blue2 { color: #df3a2f !important; }
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day.is-saturday .text-blue2 { color: #0876c8 !important; }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue22 {
        inset: 22px 5px 5px !important;
        color: #aab5be !important;
        font-size: 11px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .attendance-day-empty::after {
        color: #aab5be !important;
        font-size: 11px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .text-blue22 img {
        width: 38px !important;
        height: 38px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 245px !important;
        grid-template-rows: auto minmax(72px, auto) !important;
        column-gap: 24px !important;
        row-gap: 8px !important;
        margin: 4px 16px 0 !important;
        padding: 14px 16px 16px !important;
        border: 1px solid #b7c8d6 !important;
        color: #294a63 !important;
        background: #fbfcfd !important;
        box-shadow: inset 0 1px #fff !important;
        clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-eyebrow {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head h2 {
        font-size: 17px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track.is-empty {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-height: 68px !important;
        margin: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-empty {
        min-height: 68px !important;
        padding: 10px 16px !important;
        border: 0 !important;
        border-top: 1px dashed #c2d0db !important;
        background: transparent !important;
        clip-path: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-empty::before {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        display: flex !important;
        min-height: 102px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 10px 14px !important;
        border: 1px solid #c5d2dc !important;
        background: #fff !important;
        text-align: center !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-art {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy > span {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy h3 {
        font-size: 13px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy p {
        margin: 5px 0 0 !important;
        font-size: 11px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-count {
        order: 2 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: #0873b8 !important;
        background: transparent !important;
        font-size: 18px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue2 {
        position: absolute !important;
        top: 8px !important;
        right: auto !important;
        left: 8px !important;
        width: auto !important;
        padding: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue22 {
        position: absolute !important;
        inset: 22px 5px 5px !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day.is-outside-month > div {
        background: #f9fafb !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day.is-outside-month .text-blue2 {
        color: #c3cbd2 !important;
    }
}

@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head {
        justify-content: flex-start !important;
        gap: 32px !important;
    }
}

/* SSIM iteration 3: the attendance total belongs beside the reward heading. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head {
        justify-content: flex-start !important;
        gap: 32px !important;
    }
}

/* 출석부 최종 보정: 달력 정보 위계와 보상 진행 현황. */
@media (min-width: 1200px) {
    html body.gundam-skin #ajax-content.contents > .page.w_attendance {
        width: calc(100% + 14px) !important;
        margin: -5px 0 0 -7px !important;
    }

    html body.gundam-skin #ajax-content.contents > .page.w_attendance > .page_ttl > .gundam-page-title-en {
        position: absolute !important;
        top: 104px !important;
        left: 50% !important;
        z-index: 3 !important;
        display: block !important;
        color: #bcd5e7 !important;
        -webkit-text-fill-color: #bcd5e7 !important;
        font-family: ChosunGu, "Malgun Gothic", sans-serif !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: .16em !important;
        line-height: 1 !important;
        opacity: 1 !important;
        transform: translateX(-50%) !important;
    }

    html body.gundam-skin #ajax-content.contents > .page.w_attendance > .page_ttl::before {
        top: 124px !important;
        background: linear-gradient(90deg, #13bde9 0 52px, transparent 52px 212px, #13bde9 212px 264px) center / 100% 3px no-repeat !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-actions {
        position: absolute !important;
        top: 18px !important;
        right: 30px !important;
        z-index: 3 !important;
        margin: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-header-card {
        position: relative !important;
        padding-top: 18px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day > div {
        position: relative !important;
        min-height: 92px !important;
        padding: 9px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue2 {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        color: #294a63 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: left !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue22 {
        position: absolute !important;
        inset: 25px 7px 7px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #8292a0 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .attendance-day-empty::before {
        display: none !important;
        content: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .attendance-day-empty::after {
        color: #a0adb7 !important;
        content: "미출석" !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .text-blue22 img {
        width: 44px !important;
        height: 44px !important;
        object-fit: contain !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress {
        margin: 0 !important;
        padding: 24px 30px 28px !important;
        border: 0 !important;
        border-bottom: 7px solid #d7e0e7 !important;
        color: #294a63 !important;
        background: #f8fafc !important;
        box-shadow: inset 0 -1px #7b94ab !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        margin-bottom: 24px !important;
        padding-bottom: 14px !important;
        border-bottom: 2px solid #c3ced8 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-eyebrow,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy > span {
        display: block !important;
        margin-bottom: 5px !important;
        color: #1688c0 !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .13em !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head h2,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy h3 {
        margin: 0 !important;
        color: #123e64 !important;
        font-size: 20px !important;
        font-weight: 900 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-total {
        color: #0873b8 !important;
        font-size: 15px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track {
        position: relative !important;
        display: flex !important;
        justify-content: space-between !important;
        min-height: 90px !important;
        margin: 0 24px 22px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track.is-empty {
        display: block !important;
        min-height: 76px !important;
        margin: 0 0 22px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track.is-empty::before,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track.is-empty::after {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-empty {
        display: flex !important;
        min-height: 76px !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 15px 20px 15px 58px !important;
        border: 1px solid #c8d6e1 !important;
        background: linear-gradient(90deg, #eef5f9, #fff) !important;
        color: #36566f !important;
        clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-empty::before {
        position: absolute !important;
        left: 22px !important;
        width: 18px !important;
        height: 28px !important;
        border-inline: 4px solid #1297cc !important;
        content: "" !important;
        transform: skewY(-28deg) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-empty strong {
        color: #173f60 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-empty span {
        margin-top: 5px !important;
        color: #60798c !important;
        font-size: 12px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track::before,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track::after {
        position: absolute !important;
        top: 18px !important;
        left: 0 !important;
        height: 4px !important;
        content: "" !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track::before {
        width: 100% !important;
        background: #d6e1e8 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track::after {
        z-index: 1 !important;
        width: var(--attendance-progress, 0%) !important;
        background: linear-gradient(90deg, #0873b8, #10a985) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-step {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        width: 112px !important;
        flex-direction: column !important;
        align-items: center !important;
        color: #607789 !important;
        text-align: center !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-node {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 8px !important;
        border: 3px solid #c5d4de !important;
        border-radius: 0 !important;
        color: #607789 !important;
        background: #fff !important;
        font-weight: 900 !important;
        clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-step.is-complete .attendance-reward-node {
        border-color: #0b8fc1 !important;
        color: #fff !important;
        background: #0b8fc1 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-step strong { color: #123e64 !important; }
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-step small { margin-top: 3px !important; color: #718596 !important; }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) auto !important;
        gap: 18px !important;
        align-items: center !important;
        padding: 16px 22px !important;
        border: 1px solid #a9c4d6 !important;
        border-left: 5px solid #0b88c8 !important;
        background: linear-gradient(90deg, #eaf5fb, #fff) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-art img {
        display: block !important;
        width: 72px !important;
        height: 72px !important;
        object-fit: contain !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-art {
        position: relative !important;
        width: 82px !important;
        height: 74px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-art__point,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-art__coupon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: none !important;
        transform: translate(-50%, -50%) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-art img[hidden] {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal[data-reward-type="point"] .attendance-next-art__point,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal[data-reward-type="mixed"] .attendance-next-art__point,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal[data-reward-type="complete"] .attendance-next-art__point {
        display: block !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal[data-reward-type="coupon"] .attendance-next-art__coupon,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal[data-reward-type="mixed"] .attendance-next-art__coupon {
        display: block !important;
        width: 76px !important;
        height: 54px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal[data-reward-type="mixed"] .attendance-next-art__point {
        width: 48px !important;
        height: 48px !important;
        transform: translate(-78%, -62%) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal[data-reward-type="mixed"] .attendance-next-art__coupon {
        transform: translate(-28%, -35%) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal[data-reward-type="empty"] .attendance-next-art::before {
        position: absolute !important;
        inset: 13px 17px !important;
        display: grid !important;
        place-items: center !important;
        border: 2px solid #b8c9d6 !important;
        color: #688195 !important;
        background: #edf3f7 !important;
        content: "--" !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy p {
        margin: 7px 0 0 !important;
        color: #526c80 !important;
        font-size: 13px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-count {
        min-width: 108px !important;
        padding: 12px 16px !important;
        border: 1px solid #0873b8 !important;
        color: #fff !important;
        background: #0873b8 !important;
        font-size: 15px !important;
        text-align: center !important;
    }
}

/* Final cascade lock: keep the approved compact reward rail inside the first viewport. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-shell {
        padding: 0 7px 8px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 245px !important;
        grid-template-rows: 28px 72px !important;
        column-gap: 24px !important;
        row-gap: 4px !important;
        margin: 4px 16px 0 !important;
        padding: 12px 16px !important;
        border: 1px solid #b7c8d6 !important;
        background: #fbfcfd !important;
        box-shadow: inset 0 1px #fff !important;
        clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-eyebrow,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy > span {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head h2 {
        font-size: 17px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track.is-empty {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-height: 68px !important;
        margin: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-empty {
        min-height: 68px !important;
        padding: 9px 14px !important;
        border: 0 !important;
        border-top: 1px dashed #c2d0db !important;
        background: transparent !important;
        clip-path: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-empty::before {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        display: flex !important;
        min-height: 104px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 9px 12px !important;
        border: 1px solid #c5d2dc !important;
        border-left: 1px solid #c5d2dc !important;
        background: #fff !important;
        text-align: center !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-art {
        display: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy h3 {
        font-size: 13px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy p {
        max-width: 205px !important;
        margin: 4px 0 0 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-count {
        order: 2 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: #0873b8 !important;
        background: transparent !important;
        font-size: 18px !important;
    }
}

@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue2 {
        position: absolute !important;
        top: 8px !important;
        right: auto !important;
        left: 8px !important;
        width: auto !important;
        padding: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue22 {
        position: absolute !important;
        inset: 22px 5px 5px !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day.is-outside-month > div {
        background: #f9fafb !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day.is-outside-month .text-blue2 {
        color: #c3cbd2 !important;
    }
}

@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-head {
        justify-content: flex-start !important;
        gap: 32px !important;
    }
}

@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress {
        grid-template-columns: minmax(0, 1fr) 232px !important;
    }
}

/* Configured-state reward rail: match the approved circular milestone language. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track:not(.is-empty)::before,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track:not(.is-empty)::after {
        top: 38px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-track:not(.is-empty) .attendance-reward-step {
        padding-top: 20px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-node {
        width: 36px !important;
        height: 36px !important;
        border-width: 2px !important;
        border-radius: 50% !important;
        clip-path: none !important;
        font-size: 18px !important;
    }
}

/* SSIM iteration 6: eliminate the legacy 92px inner-cell overflow. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day > div {
        min-height: 62px !important;
        height: 62px !important;
    }
}

/* SSIM iteration 7: reconcile the vertical rhythm without moving the calendar baseline. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance {
        gap: 12px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-header-card {
        min-height: 74px !important;
        height: 74px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .wd14.day,
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day > div {
        min-height: 63px !important;
        height: 63px !important;
    }
}

@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance {
        gap: 9px !important;
    }
}

/* SSIM iteration 9: match the authored calendar grid coordinates. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list {
        padding-right: 19px !important;
        padding-left: 17px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop .wd14 {
        height: 33px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .calendartop .bg-attendance-week-blue2 {
        min-height: 32px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .m-t-2:nth-of-type(4) .wd14.day,
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .m-t-2:nth-of-type(5) .wd14.day,
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .m-t-2:nth-of-type(6) .wd14.day,
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .m-t-2:nth-of-type(4) .day > div,
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .m-t-2:nth-of-type(5) .day > div,
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .m-t-2:nth-of-type(6) .day > div {
        min-height: 64px !important;
        height: 64px !important;
    }
}

/* SSIM iteration 10: align repeated date and attendance labels inside each cell. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue2 {
        top: 10px !important;
        left: 11px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue22 {
        inset: 32px 5px 5px !important;
    }
}

@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy .attendance-next-count {
        display: block !important;
        margin-top: 7px !important;
    }
}

/* SSIM iteration 13: separate the next-goal heading from its value plate. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal {
        position: relative !important;
        overflow: visible !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal::after {
        position: absolute !important;
        top: 34px !important;
        bottom: 0 !important;
        left: -25px !important;
        border-left: 1px solid #c5d2dc !important;
        content: "" !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 120px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy::before {
        position: absolute !important;
        top: 34px !important;
        right: 0 !important;
        bottom: 5px !important;
        left: 0 !important;
        z-index: -1 !important;
        border: 1px solid #c5d2dc !important;
        background: #fff !important;
        content: "" !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy h3,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy .attendance-next-count,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy p {
        position: absolute !important;
        right: 8px !important;
        left: 8px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy h3 { top: 8px !important; }
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy .attendance-next-count { top: 49px !important; }
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy p { top: 82px !important; }
}

/* SSIM iteration 14: extend only the reward section's lower edges. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress {
        padding-bottom: 20px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-goal::after {
        bottom: -11px !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-next-copy::before {
        bottom: -11px !important;
    }
}

/* SSIM iteration 17: remove the legacy embossed shadow from the month label. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance #attendance_date {
        text-shadow: none !important;
    }
}

/* SSIM iteration 18: match the measured month-navigation geometry. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav {
        width: 323px !important;
        min-width: 323px !important;
        max-width: 323px !important;
        transform: translate(1px, -2px) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-nav .att {
        width: 40px !important;
        height: 38px !important;
        flex-basis: 40px !important;
    }
}

/* SSIM iteration 19: align the automatic-attendance condition group. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-card {
        transform: translateX(3px) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-label {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }
}

/* Attendance stamps and absence labels occupy the true center of the date cell. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .text-blue22:has(img),
    html:has(.w_attendance) body.gundam-skin .w_attendance #date_list .day .attendance-day-empty {
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }
}

/* Match the approved attendance-condition label and cut-corner reward panel without touching the calendar. */
@media (min-width: 1200px) {
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress {
        position: relative !important;
        isolation: isolate !important;
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        clip-path: none !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress::before,
    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress::after {
        position: absolute !important;
        pointer-events: none !important;
        content: "" !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress::before {
        inset: -1px !important;
        z-index: -2 !important;
        background: #aebfcd !important;
        clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress::after {
        inset: 0 !important;
        z-index: -1 !important;
        background: #fbfcfd !important;
        clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-card {
        transform: translate(3px, -1px) !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-info-label {
        box-sizing: border-box !important;
        width: 113px !important;
        min-width: 113px !important;
        height: 32px !important;
        padding: 0 13px !important;
        background: #f5f6f8 !important;
    }

    html:has(.w_attendance) body.gundam-skin .w_attendance .attendance-reward-progress {
        margin-top: 6px !important;
        padding-bottom: 26px !important;
    }
}