/* === MyInfoReservationList 전용: 카드/버튼/타이포 일관화 (CSS only) === */

/* 안전 리셋 : wrapper 좌표는 건드리지 않음 (기본 흐름 유지) */
.program-list-wrapper,
.program-list {
    box-sizing: border-box;
    padding: 0;
}

    /* 카드 박스 */
    .program-list .program-card,
    .program-list-wrapper .program-card {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #e6e6e6 !important;
        border-radius: 6px !important;
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
        min-height: 0 !important;
        overflow: visible !important; /* 버튼 잘림 방지 */
    }

        /* 제목 (ltItemName에 서버가 <a>를 넣음) */
        .program-list-wrapper .program-card a,
        .program-list-wrapper .program-card .title,
        .program-list-wrapper .program-card [id^="ltItemName"] {
            display: block;
            font-size: 15px !important; /* 제목 크기 통일 */
            /*font-weight: 700 !important;     굵게 */
            color: #111 !important;
            margin: 0 0 6px 0 !important;
            padding: 0 !important;
            text-decoration: none !important;
            border-bottom: none !important; /* 밑줄 / 점선 제거 */
            white-space: normal !important;
            line-height: 1.3 !important;
        }

    /* 수강기간 / 메타 : 제목과 동일한 크기/굵기 유지 
.program-list-wrapper .card-main .meta,
.program-list-wrapper .card-main .meta li {
  list-style: none !important;      / ● 점 제거 /
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;      / 굵게  /
  color: #111 !important;
  line-height: 1.3 !important;
}
*/

    /* li가 한 줄씩 세로로 나오도록 강제 */
    .program-list-wrapper .card-main .meta li {
        display: block !important;
        margin: 4px 0 !important;
    }

    /* 버튼 그룹: 점선/라인 제거, 여유 확보, 기본은 줄바꿈 허용 */
    .program-list-wrapper .action-area-left {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        margin-top: 8px !important;
        padding-bottom: 0 !important;
        border-bottom: none !important; /* 점선 완전 제거 */
        overflow: visible !important;
        flex-wrap: wrap; /* 모바일에서 줄바꿈 허용 */
    }

/* 데스크탑에서는 버튼을 한 줄로 유지 (너비가 충분하면) */
@media (min-width: 700px) {
    .program-list-wrapper .action-area-left {
        flex-wrap: nowrap !important;
    }
}

/* 서버가 <span class="button"><a>... 구조로 감싸는 경우 안전조치 */
.program-list-wrapper .action-area-left .button {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

    /* 버튼 외형 통일 — 글자 작게, 패딩 줄여서 한 줄 유지 확률 높임 */
    .program-list-wrapper .action-area-left a,
    .program-list-wrapper .action-area-left button,
    .program-list-wrapper .action-area-left input[type="button"],
    .program-list-wrapper .action-area-left input[type="submit"],
    .program-list-wrapper .action-area-left .button a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 10px !important; /* 기존보다 작게 조정 */
        min-height: 32px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #2b8ed6 !important;
        background: #fff !important;
        border: 1px solid rgba(43,142,214,0.30) !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        white-space: nowrap !important; /* 버튼 텍스트 줄바꿈 금지 */
        box-shadow: none !important;
        cursor: pointer;
    }

/* 버튼 간격이 너무 넓게 나오는 경우 약간 줄임 */
.program-list-wrapper .action-area-left {
    gap: 6px !important;
}

/* 페이징 영역 공백 보정 */
div[style*="text-align:center"] {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* 혹시 남아 있는 ::after/::before 관련 점선/라인 완전 숨기기 */
.program-list-wrapper .program-card::after,
.program-list-wrapper .action-area-left::after,
.program-list-wrapper::after {
    display: none !important;
    content: none !important;
}

/* 카드 내부 내용이 늘어나면 자동으로 높이 늘어나도록 보장 (명시 높이 제거) */
.program-list-wrapper .program-card * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* A. 고정 너비 방식 */
.program-list-wrapper .action-area-left,
.program-list .action-area-left {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 허용 */
}

    .program-list-wrapper .action-area-left a,
    .program-list-wrapper .action-area-left .button a,
    .program-list-wrapper .action-area-left button {
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* === 핵심: 동일한 너비 설정 === */
        width: 70px !important; /* 필요하면 80 ~ 110px로 조정 */
        min-width: 70px !important;
        max-width: 70px !important;
        height: auto;
        padding: 6px 8px !important; /* 내부 여백은 유지 */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #2b8ed6 !important;
        background: #fff !important;
        border: 1px solid rgba(43,142,214,0.30) !important;
        border-radius: 8px !important;
    }

    /* 버튼 동일 너비 유지 + 높이 강제 조정 */
    .program-list-wrapper .action-area-left a,
    .program-list-wrapper .action-area-left button,
    .program-list-wrapper .action-area-left input[type="button"],
    .program-list-wrapper .action-area-left input[type="submit"],
    .program-list-wrapper .action-area-left .button a,
    .program-list-wrapper .action-area-left .button {
        box-sizing: border-box !important;
        /* 너비 고정 (기존) - 버튼 크기 조정 위해 주석
  width: 65px !important;
  min-width: 65px !important;
  max-width: 65px !important;
*/
        /* === 핵심: 높이 제어 === */
        height: 28px !important; /* 원하는 높이로 변경 (ex: 24, 28, 32) */
        min-height: 28px !important;
        padding-top: 0 !important; /* 수직 패딩 제거 */
        padding-bottom: 0 !important;
        padding-left: 8px !important; /* 가로 패딩은 남김 */
        padding-right: 8px !important;
        /* 텍스트 수직 중앙정렬 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 28px !important; /* height와 동일하게 */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        /* 시각 스타일 유지 */
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #2b8ed6 !important;
        background: #fff !important;
        border: 1px solid rgba(43,142,214,0.30) !important;
        border-radius: 8px !important;
    }

        /* 안전패치: 내부 span이나 a가 추가적인 패딩/라인하이트를 주는 경우 강제 리셋 */
        .program-list-wrapper .action-area-left .button > a,
        .program-list-wrapper .action-area-left .button > span,
        .program-list-wrapper .action-area-left a > span {
            display: inline-block !important;
            height: 100% !important;
            line-height: inherit !important;
            padding: 0 !important;
            margin: 0 !important;
        }



/* ---------- 도트 통일 스타일 ---------- */
/* 크기/색을 한 곳에서 조정하기 좋게 변수 선언 */
:root {
    --dot-size: 6px; /* 도트 크기(원 지름) : 필요시 5~10px로 조정 */
    --dot-gap: 8px; /* 도트와 텍스트 사이 간격 */
    --dot-vert-shift: -1px; /* 도트 수직 보정 (필요시 -2 ~ 0 조정) */
}

/* 버튼 앞에 있던 도트 제거 (우선순위 강제) */
.program-list-wrapper .action-area-left a::before,
.program-list-wrapper .action-area-left button::before,
.program-list-wrapper .action-area-left .button a::before {
    content: none !important;
    display: none !important;
}

/* 제목(ltItemName)의 <a> 앞에 도트 추가
   - currentColor를 사용해 도트 색상을 텍스트 색과 동일하게 설정 */
.program-list-wrapper .program-card .card-main > a::before,
.program-list-wrapper .program-card .card-main > [id^="ltItemName"]::before,
.program-list-wrapper .program-card .card-main > .title::before {
    content: "";
    display: inline-block;
    width: var(--dot-size);
    height: var(--dot-size);
    background: currentColor; /* 글자 색과 동일하게 */
    border-radius: 50%;
    margin-right: var(--dot-gap);
    vertical-align: middle;
    transform: translateY(var(--dot-vert-shift));
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* 메타(수강기간 등) 항목 앞 도트도 동일하게 */
.program-list-wrapper .card-main .meta li::before {
    content: "";
    display: inline-block;
    width: var(--dot-size);
    height: var(--dot-size);
    background: currentColor;
    border-radius: 50%;
    margin-right: var(--dot-gap);
    vertical-align: middle;
    transform: translateY(var(--dot-vert-shift));
    box-sizing: border-box;
}

/* meta li를 inline-block으로 만들어 줄바꿈/간격이 깔끔하게 보이도록 */
.program-list-wrapper .card-main .meta li {
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
    /* meta 텍스트 색상/굵기(원하면 조정) */
    color: inherit; /* 부모 색상 상속 */
    /*font-weight: 700;*/
}

/* 제목/메타의 글자 색을 확실히 지정(필요하면 수정) */
.program-list-wrapper .program-card .card-main > a,
.program-list-wrapper .card-main .meta,
.program-list-wrapper .card-main .meta li {
    color: #111; /* 제목/메타의 글자색 : 필요시 변경 */
    /*font-weight: 700;*/
}

/* 모바일 보정: 도트가 너무 크면 줄이기 */
@media (max-width:700px) {
    :root {
        --dot-size: 6px;
        --dot-gap: 6px;
    }
}



/* === 카드 레이아웃 반응형 1~2컬럼 === */

.program-list {
    display: grid !important;
    grid-template-columns: 1fr; /* 기본 1컬럼(모바일) */
    gap: 16px;
}

/* PC(1000px↑)에서는 2컬럼 */
@media (min-width: 1000px) {
    .program-list {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* 결제 / 취소 버튼 크게 */
.program-list-wrapper .action-area-left a,
.program-list-wrapper .action-area-left button,
.program-list-wrapper .action-area-left input[type="button"],
.program-list-wrapper .action-area-left input[type="submit"] {
    width: auto !important; /* 고정너비 제거 */
    min-width: 90px !important; /* 버튼 기본 크기 확대 */
    height: 36px !important;
    padding: 0 18px !important;
    font-size: 15px !important; /* 제목에 어울리게 조금 크게 */
    font-weight: 600 !important;
    border-radius: 8px !important;
    line-height: 36px !important;
}


/* 버튼 고정너비 강제 무효화 */
.program-list-wrapper .action-area-left a,
.program-list-wrapper .action-area-left .button a,
.program-list-wrapper .action-area-left button {
    width: auto !important;
    min-width: 90px !important;
    max-width: none !important;
}

/* ===== 최우선: 버튼 크기 강제 ===== */
.program-list-wrapper .action-area-left a,
.program-list-wrapper .action-area-left button,
.program-list-wrapper .action-area-left .button a,
.program-list-wrapper .action-area-left input[type="button"],
.program-list-wrapper .action-area-left input[type="submit"] {
    height: 42px !important; /* 버튼 높이 */
    min-height: 42px !important;
    line-height: 42px !important; /* 텍스트 수직 중앙 */
    padding: 0 20px !important; /* 좌우 여백 */
    font-size: 15px !important; /* 글씨 크게 */
    font-weight: 600 !important;
    /* 고정 너비 제거 */
    width: auto !important;
    min-width: 100px !important;
    max-width: none !important;
}



@media (min-width: 700px) {
    .program-list-wrapper .action-area-left {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 699px) {
    .program-list-wrapper .action-area-left {
        flex-wrap: wrap !important;
    }
}

</style >



<style >
/* ========== 1. 카드 전체 폰트 더 크게 =========== */
.program-list-wrapper .program-card {
    font-size: 16px !important; /* 전체 기본 글씨 */
}

.program-list-wrapper .program-card .meta li {
    font-size: 18px !important; /* 메타 정보 */
}

.program-list-wrapper .program-card .card-main > a,
.program-list-wrapper .program-card .card-main > .title {
    font-size: 17px !important; /* 제목 계열 */
    font-weight: 600 !important;
}



/* ========== 2. 버튼 스타일 통일 (크기 크게) =========== */

.program-list-wrapper .action-area-left span > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    padding: 0 18px !important;
    margin-right: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    border: 1px solid transparent !important; /* 기본 */
}



/* ========== 3. 결제 버튼 색상 =========== */
.program-list-wrapper .action-area-left span:first-child > a {
    background: #2B8ED6 !important; /* 파란색 */
    color: #fff !important;
    border-color: #2B8ED6 !important;
}

    /* Hover */
    .program-list-wrapper .action-area-left span:first-child > a:hover {
        background: #1471b3 !important;
    }



/* ========== 4. 추첨취소 버튼 색상 =========== */
.program-list-wrapper .action-area-left span:last-child > a {
    background: #e74c3c !important; /* 빨간색 */
    color: #fff !important;
    border-color: #e74c3c !important;
}

    /* Hover */
    .program-list-wrapper .action-area-left span:last-child > a:hover {
        background: #c0392b !important;
    }

/* N 글자 스타일 통일 */
.program-list-wrapper .program-card .card-main {
    color: #111 !important; /* 전체 텍스트 기본색 */
}

/* 메타 li(수강날짜, 시간)도 동일 색상 */
.program-list-wrapper .program-card .meta li {
    color: #111 !important;
}

/* 도트도 동일하게 currentColor 사용하므로 자동으로 #111 적용됨 */



/* ===== 결제 버튼: 안정적인 Soft Blue (#4A90E2) ===== */
.program-list-wrapper .action-area-left span:first-child > a {
    background: #4A90E2 !important;
    border-color: #4A90E2 !important;
    color: #fff !important;
}

    .program-list-wrapper .action-area-left span:first-child > a:hover {
        background: #3C7EC8 !important; /* hover는 살짝 어둡게 */
    }


/* ===== 추첨취소 버튼: Soft Red (#E26A5E) ===== */
.program-list-wrapper .action-area-left span:last-child > a {
    background: #E26A5E !important;
    border-color: #E26A5E !important;
    color: #fff !important;
}

    .program-list-wrapper .action-area-left span:last-child > a:hover {
        background: #CC594F !important;
    }




/* 공통 스타일 */
.draw-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    background: transparent !important;
    gap: 6px;
    margin-bottom: 12px;
}


    /* =============================
   밝은 파스텔톤 상태 색상
============================= */

    /* 당첨 - 밝은 하늘색 */
    .draw-status.win {
        color: #4CB7E8 !important; /* 밝은 하늘 파랑 */
        border: 2px solid #4CB7E8 !important;
    }

    /* 미당첨 - 밝은 코랄색 */
    .draw-status.lose {
        color: #E57373 !important; /* 밝은 붉은색 */
        border: 2px solid #E57373 !important;
    }

    /* 추첨대기 - 밝은 오렌지 */
    .draw-status.wait {
        color: #F5A623 !important; /* 밝은 오렌지 */
        border: 2px solid #F5A623 !important;
    }

    /* 대기중 - 밝은 그레이 */
    .draw-status.pending {
        color: #A0A4A8 !important; /* 부드러운 연회색 */
        border: 2px solid #A0A4A8 !important;
    }



/* 모든 meta li에 도트 중앙 정렬 강제 */
.program-list-wrapper .card-main .meta li {
    display: flex !important;
    align-items: center !important;
}

    /* 도트의 위치도 flex 기준으로 정확한 가운데 정렬 */
    .program-list-wrapper .card-main .meta li::before {
        margin-right: 6px !important;
        position: relative;
        top: 0 !important;
        transform: none !important;
    }


/* 버튼 다시정의 */
.draw-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    background: transparent !important;
    gap: 6px;
    /* ★ 카드 내용이 겹치지 않도록 block 처리 */
    display: inline-block !important;
    margin-bottom: 14px !important;
}

.program-card .card-main {
    margin-top: 4px !important;
}

/* 당첨 */
.draw-status.win {
    background: #4CB7E8 !important;
    color: #fff !important;
    border-color: #4CB7E8 !important;
}

/* 미당첨 */
.draw-status.lose {
    background: #E57373 !important;
    color: #fff !important;
    border-color: #E57373 !important;
}

/* 추첨대기 */
.draw-status.wait {
    background: #F5A623 !important;
    color: #fff !important;
    border-color: #F5A623 !important;
}

/* 대기중 */
.draw-status.pending {
    background: #A0A4A8 !important;
    color: #fff !important;
    border-color: #A0A4A8 !important;
}


</style >


<style >
/* ==========================================
   ★ draw-status 버튼 완전 정상화 패치 (최종)
   ========================================== */
/* === 상태별 색상 === */
/* 준비중(pending) / win 클래스 쓴 상태 */
.draw-status.win {
    background: #4CB7E8 !important;
    color: #fff !important;
    border-color: #4CB7E8 !important;
}

/* wait */
.draw-status.wait {
    background: #F5A623 !important;
    border: 2px solid #F5A623 !important;
}

/* lose */
.draw-status.lose {
    background: #E57373 !important;
    border: 2px solid #E57373 !important;
}

/* 카드 상단 고정 위치 */
.program-card .card-side {
    text-align: left !important;
    margin-bottom: 8px !important;
}


/* draw-status 고정 높이 통일 */
.draw-status {
    height: 40px !important; /* 원하는 높이 */
    min-height: 40px !important;
    line-height: 40px !important; /* 텍스트 수직 중앙 */
    padding: 0 18px !important; /* 좌우 패딩만 유지 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important; /* 버튼 둥글기, 더 예쁘게 */
}

    /* draw-status 안에 a 태그도 같은 높이 유지 */
    .draw-status a {
        height: 40px !important;
        line-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

/* meta 안의 첫 번째 li (a 태그)에 일관된 폰트 적용 */
.program-list-wrapper .card-main .meta li a {
    font-size: 18px !important; /* li와 동일하게 */
    /*font-weight: 600 !important;      굵기 통일 */
    color: #111 !important; /* 텍스트 색 통일 */
    text-decoration: none !important;
    line-height: 1.4 !important;
}


/* ========== 2025.12.07 카드 전체 폰트 더 크게 =========== */

.program-list-wrapper .program-card .meta li  {
    font-size: 17px !important; /* 메타 정보 */
}
.program-list-wrapper .card-main .meta li a {
    font-size: 17px !important; /* li와 동일하게 */
}


/* --- li 도트 항상 첫 줄 고정 --- */
.program-list-wrapper .card-main .meta li {
    display: list-item !important;
    list-style-type: disc !important;
    list-style-position: outside !important;
    padding-left: 0 !important; /* li 안쪽 여백 제거 */
}

.program-list-wrapper .card-main .meta li::before {
    content: none !important; /* 커스텀 도트 제거 */
}