@charset "utf-8";

/* ==================================================================
   광고 관리 페이지용 CSS (밝은 테마)
================================================================== */

/* 광고 카드 버튼 영역 */
.card .btns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.card .btns .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid transparent; /* 테두리 두께 1px로 조정 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.card .btns .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.card .btns .btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 버튼 색상 및 스타일 (밝은 테마에 맞게 유지 및 일부 조정) */
.card .btns .btn.outline {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}
.card .btns .btn.outline:hover {
    background-color: #f9fafb;
    border-color: #a7a9ad;
}

.card .btns .btn.green {
    background-color: #10b981;
    color: #fff;
    border-color: #059669;
}
.card .btns .btn.green:hover {
    background-color: #059669;
}

.card .btns .btn.blue {
    background-color: #3b82f6;
    color: #fff;
    border-color: #2563eb;
}
.card .btns .btn.blue:hover {
    background-color: #2563eb;
}

.card .btns .btn.orange {
    background-color: #f97316;
    color: #fff;
    border-color: #ea580c;
}
.card .btns .btn.orange:hover {
    background-color: #ea580c;
}

.card .btns .btn.gray {
    background-color: #6b7280;
    color: #fff;
    border-color: #4b5563;
}
.card .btns .btn.gray:hover {
    background-color: #4b5563;
}

.card .btns button.btn.on {
    background-color: #ec4899;
    color: #fff;
    border-color: #be185d;
}
.card .btns button.btn.on:hover {
    background-color: #be185d;
}

/* 비활성화된 버튼 스타일 */
.card .btns .btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* 비활성화된 버튼은 호버 효과 제거 */
.card .btns .btn[disabled]:hover {
    background-color: #10b981; /* 원래 색상 유지 */
    border-color: #059669;
}

/* [추가] 중요/위험 동작 버튼을 위한 전용 스타일 */
.card .btns .btn.btn-danger {
    background-color: #ef4444;
    color: #ffffff;
    border-color: #dc2626;  
}
.card .btns .btn.btn-danger:hover {
    background-color: #dc2626;
}

/* [수정] '신청취소'를 위한 경고 스타일 (더 명확한 색상으로) */
.card .btns .btn.btn-warning {
    background-color: #f59e0b; /* 눈에 띄는 주황/노랑 계열 */
    color: #ffffff;
    border-color: #d97706;
}
.card .btns .btn.btn-warning:hover {
    background-color: #d97706;
}


/* ==================================================================
   모달(Modal) 창 스타일 (밝은 테마)
================================================================== */

/* 키프레임 애니메이션은 원본 유지 */
@keyframes rotate-border {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp {
    from { transform: scale(0.95); } /* 좀 더 부드럽게 */
    to { transform: scale(1); }
}

/* [수정] 모달 배경 오버레이 색상 조정 */
.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.6); /* 어두운 회색톤 오버레이 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-wrapper.is-active {
    opacity: 1;
    visibility: visible;
}

.modal-wrapper.is-active .modal-content {
    animation: fadeIn 0.3s ease forwards, scaleUp 0.3s ease forwards;
}

/* [수정] 모달 컨텐츠를 밝은 테마로 변경 */
.modal-content {
    position: relative;
    padding: 30px 35px;
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    text-align: center;
    background: #ffffff; /* 흰색 배경 */
    overflow: hidden;
    border: 1px solid #e5e7eb; /* 연한 회색 테두리 */
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
}

/* 애니메이션 테두리는 제거 (밝은 테마에서는 부자연스러울 수 있음) */
.modal-content::before,
.modal-content::after {
    display: none;
}

/* [수정] 모달 타이틀 가독성 개선 */
.modal-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #111827; /* 진한 텍스트 색상 */
    text-shadow: none; /* 텍스트 그림자 제거 */
}

/* [수정] 모달 본문 텍스트 색상 변경 */
.modal-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #4b5563; /* 회색 텍스트 */
}

/* [수정] 강조 텍스트 색상 변경 */
.highlight-text {
    color: #059669; /* 가독성 좋은 진한 녹색 */
    font-weight: 600;
    text-shadow: none;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* 모달 버튼 스타일은 원본과 유사하게 유지 */
#modal-confirm-btn {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    border: none;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.4);
}
#modal-confirm-btn:hover {
    box-shadow: 0 0 25px rgba(231, 76, 60, 0.6);
    background: linear-gradient(45deg, #c0392b, #e74c3c);
}

.modal-actions .btn {
    transition: all 0.2s ease-in-out;
}
.modal-actions .btn:hover {
    transform: translateY(-3px) scale(1.03);
}
.modal-actions .btn:active {
    transform: translateY(-1px) scale(1.01);
}

/* ============================================================
   [마사지스타] 광고관리 페이지 디자인 개선 + 모바일 대응 (2026-07-15)
   기능/로직은 그대로, CSS로만 개선
   ============================================================ */

/* 페이지 래퍼 정리 (기존 translateX 어긋남 보정) */
.m-wrap[data-js="ad-mng"]{
    transform:none !important;
    width:100%;
    max-width:1320px;   /* 화면 폭에 맞춰 시원하게, 너무 넓은 모니터에서만 상한 */
    margin:0 auto;
    padding:0 14px 40px;
    box-sizing:border-box;
}
.page-chip{
    background:linear-gradient(135deg,#8666f8,#6d28d9);
    color:#fff !important;
    border:none !important;
    box-shadow:0 4px 12px rgba(124,58,237,.25);
}

/* 카드 프레임 다듬기 */
.m-wrap[data-js="ad-mng"] .card{
    border:1px solid #e9ecef;
    border-radius:14px;
    box-shadow:0 2px 8px rgba(16,24,40,.06);
    transition:transform .12s ease, box-shadow .2s ease;
    margin-bottom:18px;
}
.m-wrap[data-js="ad-mng"] .card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(16,24,40,.10);
}
.m-wrap[data-js="ad-mng"] .card-hd{
    gap:6px;
    background:#faf9ff;
    border-bottom:1px solid #eee;
    padding:12px 16px;
}
.m-wrap[data-js="ad-mng"] .card-hd .badge{
    border-radius:6px;
    padding:3px 9px;
    font-size:12px;
    font-weight:700;
}
.m-wrap[data-js="ad-mng"] .meta-line{
    background:#fff;
}
.m-wrap[data-js="ad-mng"] .period-info-box{
    background:#fbfbfd;
    border-top:1px solid #f0f0f4;
    padding:10px 16px;
    border-radius:0;
}

/* 버튼 그리드 - 모바일에서 2열로 깔끔하게 */
.m-wrap[data-js="ad-mng"] .btns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    gap:8px;
    padding:14px 16px;
}
.m-wrap[data-js="ad-mng"] .btns .btn{
    border-radius:8px;
    font-weight:700;
    padding:11px 8px;
    text-align:center;
}

/* 기간/실시간 정보 잘림 방지 - 모든 폭에서 줄바꿈 허용 */
.m-wrap[data-js="ad-mng"] .period-info-box > div{
    flex-wrap:wrap !important;
    row-gap:4px;
}
.m-wrap[data-js="ad-mng"] .period-info-box span,
.m-wrap[data-js="ad-mng"] .realtime-countdown{
    white-space:normal !important;
    word-break:keep-all;
}

/* ===== 좁은 화면 대응 (992px 미만: 썸네일 절대위치 겹침/글자 잘림 해결) ===== */
@media (max-width:991px){
    .m-wrap[data-js="ad-mng"]{ padding:0 8px 30px; }

    /* 절대위치 썸네일을 카드 흐름 안으로 되돌림 (글자 겹침/잘림 해결) */
    .m-wrap[data-js="ad-mng"] .card{ position:relative; }
    .m-wrap[data-js="ad-mng"] .card-thumb-mini{
        position:static !important;
        width:100% !important;
        max-width:240px;
        height:auto !important;
        margin:12px auto 0 !important;
        top:auto !important; right:auto !important; left:auto !important;
    }
    .m-wrap[data-js="ad-mng"] .card-thumb-mini .adthumb{
        width:100% !important;
        height:auto !important;
        aspect-ratio:230/93;
    }
    /* 헤더 배지 줄바꿈 허용 */
    .m-wrap[data-js="ad-mng"] .card-hd{ flex-wrap:wrap; }
    /* 정보 영역이 썸네일 자리 침범 안 하도록 전체폭 사용 */
    .m-wrap[data-js="ad-mng"] .meta-line,
    .m-wrap[data-js="ad-mng"] .period-info-box{ padding-right:16px; }
    .m-wrap[data-js="ad-mng"] .period-info-box > div{ font-size:13px !important; }
}

/* ===== 모바일 (640px 미만: 버튼 2열) ===== */
@media (max-width:640px){
    .m-wrap[data-js="ad-mng"] .btns{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ============================================================
   [마사지스타] 광고관리 카드 정보영역 재디자인 (2026-07-15)
   기능요소(카운트다운/버튼/데이터)는 그대로, 인라인 정렬해킹만 무력화
   ============================================================ */

/* 제목 영역 */
.m-wrap[data-js="ad-mng"] .meta-line .title{
    font-size:1.15rem; font-weight:800; color:#1f2937;
}
.m-wrap[data-js="ad-mng"] .meta-line{
    padding:8px 16px !important;
}

/* 정보 패널: 깔끔한 박스로 묶고, 삐뚤한 transform 해킹 전부 제거 */
.m-wrap[data-js="ad-mng"] .period-info-box{
    background:#f7f6fe !important;
    border:1px solid #ece9fb !important;
    border-top:1px solid #ece9fb !important;
    border-radius:12px !important;
    margin:12px 16px 4px !important;
    padding:6px 14px !important;
    overflow:hidden;
}
.m-wrap[data-js="ad-mng"] .period-info-box > div{
    border:0 !important;
    padding:9px 0 !important;
    margin:0 !important;
    font-size:13.5px !important;
    line-height:1.5;
    transform:none !important;      /* translateX 정렬해킹 제거 */
    flex-wrap:wrap !important;
    row-gap:4px;
    align-items:center !important;
}
.m-wrap[data-js="ad-mng"] .period-info-box > div + div{
    border-top:1px dashed #e2ddf5 !important;   /* 행 구분선 */
}
/* 내부 요소들의 개별 transform/여백 해킹도 전부 무력화 */
.m-wrap[data-js="ad-mng"] .period-info-box > div *{
    transform:none !important;
}
/* 라벨(굵은 글씨) 폭 통일 */
.m-wrap[data-js="ad-mng"] .period-info-box strong{
    width:auto !important;
    color:#4b5563 !important;
    font-weight:700 !important;
}
/* 이모지 아이콘 살짝 키워서 정렬감 */
.m-wrap[data-js="ad-mng"] .period-info-box > div > span:first-child{
    font-size:15px;
}
/* 실시간 카운트다운 배지 - 잘림 방지 + 톤 정리 */
.m-wrap[data-js="ad-mng"] .realtime-countdown{
    white-space:normal !important; word-break:keep-all;
    background:#4c1d95 !important; border-color:#6d28d9 !important;
}

/* ============================================================
   [마사지스타] 상단 요약바 + 만료임박 강조 (2026-07-15)
   ============================================================ */

/* 상단 요약 통계 바 */
.ad-stats-bar{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:14px 0 20px;
}
.ad-stat{
    background:#fff;
    border:1px solid #ececf3;
    border-radius:12px;
    padding:14px 10px;
    text-align:center;
    box-shadow:0 1px 3px rgba(16,24,40,.05);
}
.ad-stat .ad-stat-num{
    display:block; font-size:26px; font-weight:900; line-height:1.1; color:#1f2937;
}
.ad-stat .ad-stat-label{
    display:block; font-size:12.5px; font-weight:700; color:#6b7280; margin-top:4px;
}
.ad-stat.is-active .ad-stat-num{ color:#10b981; }
.ad-stat.is-expiring{ border-color:#fbd7b0; background:#fff8f1; }
.ad-stat.is-expiring .ad-stat-num{ color:#f97316; }
.ad-stat.is-expired .ad-stat-num{ color:#9ca3af; }
@media (max-width:560px){
    .ad-stats-bar{ grid-template-columns:repeat(2,1fr); }
    .ad-stat .ad-stat-num{ font-size:22px; }
}

/* 만료임박 뱃지 (깜빡이는 강조) */
.m-wrap[data-js="ad-mng"] .badge.badge-expiring{
    background:linear-gradient(135deg,#f97316,#ef4444) !important;
    color:#fff !important;
    animation:ms-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes ms-badge-pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.5); }
    50%{ box-shadow:0 0 0 5px rgba(239,68,68,0); }
}

/* 만료임박 카드 강조 (좌측 주황 라인 + 살짝 톤) */
.m-wrap[data-js="ad-mng"] .card.expiring-soon{
    border-color:#fbbf77 !important;
    border-left:5px solid #f97316 !important;
    box-shadow:0 4px 14px rgba(249,115,22,.14) !important;
}

/* 문의/지원 건수 배지 */
.m-wrap[data-js="ad-mng"] .badge.badge-inquiry{
    background:#eef2ff !important;
    color:#4338ca !important;
    border:1px solid #dbe1ff !important;
    font-weight:800 !important;
}