/* Pretendard 폰트 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css');

/* Blank Canvas 기본 spacing 변수 덮어쓰기 */
:root {
    --global--spacing-vertical: 0px;
    --global--spacing-horizontal: 0px;
	--button-bg-color: #7766ff; /* 기본 배경색 */
    --button-hover-color: #7239ff; /* 호버 배경색 */
    --button-text-color: white; /* 텍스트 색상 */
}


/* 워드프레스 패딩/마진 완전 제거 */
.wp-site-blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.entry-content {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-block-html {
    margin: 0 !important;
    padding: 0 !important;
}

.site-main {
    padding: 0 !important;
}

.single .site-main > article,
.page .site-main > article {
    padding: 0 !important;
    margin: 0 !important;
}

/* 기본 폰트 설정 */
body {
    font-family: "Pretendard", -apple-system, sans-serif !important;
    line-height: 1.4;
	
}

/* 📌 회원가입 띠배너 스타일 (고정 헤더로 변경) */
.header-top-banner {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important; 
    
    /* 💡 배경색 흰색 강제 적용 */
    background: #fff !important; 
    
    
    /* 기존 스타일 유지 */
    color: #555;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.header-top-banner .highlight {
    color: #7239ff;
    font-weight: 600;
}

/* 푸터 숨기기 */
.hide-site-footer .site-footer {
    display: none;
}

/* 랜딩페이지 컨테이너 */
/* 배경색을 변수로 받기 */
.landing-container {
    width: 100%;
    max-width: 400px;
    margin-top: 42px !important;
    background: var(--page-bg-color, #fff); /* 기본값 설정 */
    min-height: 100vh;
}

/* 메인 이벤트 섹션 */
.main-event {
    position: relative;
    text-align: center;
    padding: 0;
    background: var(--page-bg-color, #fff); /* 기본값 설정 */
}

.main-banner-gif {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
	background: transparent !important; 
}

/* GIF 위에 겹치는 버튼 */
.main-event .cta-button {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 18px 40px;
    border: 1px solid #000;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 300px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    text-decoration: none;
    z-index: 10;
}

.main-event .cta-button:hover {
    transform: translateX(-50%) translateY(-2px);
    background: var(--button-hover-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* 일반 CTA 버튼 */
.cta-button {
    background: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 18px 40px;
    border: 1px solid #000;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 300px;
    margin: 20px auto;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    text-decoration: none;
}

.cta-button:hover {
    transform: translateY(-2px);
    background: var(--button-hover-color)!important;
    color: var(--button-text-color);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* =================================================== */
/* ⭐️ 메인 이벤트 정보 섹션 (.event-info) - 클린 버전 ⭐️ */
/* =================================================== */

.event-info {
    padding: 20px 20px; /* 섹션 상하 여백 조정 */
    text-align: center;
}

/* 메인 타이틀 (가장 크게 강조) */
.event-main-title {
    font-size: 28px !important;    /* 💡 크기 조정: 28px */
    font-weight: 800 !important;   /* 💡 굵기 조정: 800 (아주 굵게) */
    color: #333;                   /* 색상 조정: 진한 회색 */
    
    margin-bottom: 0px;           /* 서브 타이틀과의 간격 */
    line-height: 1.3;
    font-family: "Pretendard", -apple-system, sans-serif !important; /* 폰트 통일 */
}

/* 일반 타이틀 (서브 타이틀 역할) */
.event-subtitle-info {
    font-size: 18px;               /* 💡 크기 조정: 18px */
    font-weight: 600;              /* 💡 굵기 조정: 500 (보통) */
    color: #111;                /* 색상 조정: 강조색 */
    
    margin-bottom: 10px;           /* 기간과의 큰 간격 확보 */
    line-height: 1.4;
}
/* 심플 텍스트 (.event-simple-text) */
.event-simple-text {
    font-size: 16px;                 /* 리뷰 텍스트와 동일 크기 */
    font-weight: 500;                /* 굵기: 보통 (정보 전달에 적합) */
    color: #555;                     /* 색상: 일반 텍스트보다 살짝 어둡게 */
    
    margin-top: 5; 
    /* 💡 할인 메시지와의 간격 확보 */
    margin-bottom: 5px;            
    line-height: 1.4;
}
/* 이벤트 기간 */
.event-period {
    font-size: 14px;               /* 💡 크기 조정: 15px */
    font-weight: 400;              /* 💡 굵기 조정: 400 (가장 얇게) */
    color: #777;                   /* 색상 조정: 회색 */
    
    margin-top: 0; 
    margin-bottom: 0;
}
/* 상세 이벤트 정보 섹션 */
.event-details-content {
    width: 100%;
    margin: 0 auto;
    padding: 0px 25px; 
    margin-bottom: 0px; 
}

/* ⭐️ 💡 이미지 삽입을 위한 스타일 ⭐️ */
.event-details-content .event-detail-img {
    max-width: 100%; /* 이미지가 부모 컨테이너 너비를 넘지 않도록 설정 */
    height: auto;    /* 이미지 비율 유지를 위해 높이는 자동으로 설정 */
    display: block;  /* 이미지 위아래 요소와 깔끔하게 분리 */
    margin: 15px 0 !important; /* 이미지 위아래 간격 확보 */
}

/* 상세 정보 내 일반 텍스트 스타일 (필요하다면 유지) */
.event-details-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    text-align: left; 
    margin-bottom: 10px;
}

/* 하단 CTA */
.bottom-cta {
    padding: 30px 20px;
    text-align: center;
    background: transparent !important;
}
/* 📌 쿠폰 모두 받기 버튼 스타일 */
.cta-button {
    background: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 18px 40px;
    border: 1px solid #000;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    width: 90%;
    max-width: 300px;
    margin: 0px auto;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    text-decoration: none;
}
/* =================================================== */
/* ⭐️ 리뷰 섹션 전체 컨테이너 및 아이템 ⭐️ */
/* =================================================== */

/* 리뷰 섹션 전체 박스 (.reviews-section) */
.reviews-section {
    background: white !important; 
    margin: 20px 20px !important; 
    border-radius: 15px;
    padding: 5px 20px 15px 20px !important; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 개별 리뷰 아이템 (.review-item) */
.review-item {
    background: white;
    padding: 15px 0 !important;
    margin: 0 !important; 
    border-bottom: 1px solid #f0f0f0;
    display: block !important; 
}

/* =================================================== */
/* ⭐️ 별점, 태그, 텍스트 정렬 및 간격 ⭐️ */
/* =================================================== */

/* 별점 컨테이너 (.rating) - 첫 번째 줄 */
.rating {
    display: flex;
    align-items: center;
    gap: 8px; 
    margin-bottom: 5px !important; /* 아래쪽 간격 */
    margin-top: 5px !important; /* 리뷰 아이템 상단 패딩 이후의 간격 */
}

/* 리뷰 태그 (.review-tags) - 텍스트와 같은 줄에 인라인으로 */
.review-tags {
    display: inline-block !important; 
    /* 💡 태그의 세로 위치를 조금 더 미세하게 조정하여 텍스트와 맞춥니다. */
    vertical-align: text-top !important; /* 또는 -2px 정도로 조정 */
    
    margin-right: 8px !important; /* 텍스트와의 간격 */
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 리뷰 텍스트 (.review-text) - 태그 옆에 인라인으로 */
.review-text {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    
    display: inline !important; 
    vertical-align: middle !important;
    
    margin-top: 0 !important; 
    margin-bottom: 5px !important; 
}

/* 리뷰어 정보 (.reviewer-info) - 다음 줄로 이동 및 간격 조정 */
.reviewer-info {
    font-size: 12px;
    color: #999;
    display: block !important; 
    
    /* 💡 리뷰 텍스트와의 세로 간격 확보 */
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}


/* =================================================== */
/* ⭐️ 리뷰 태그 디자인 및 색상 ⭐️ */
/* =================================================== */

/* 리뷰 태그 (.review-tag) 기본 스타일 */
.review-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    
    background: transparent !important; 
    border: 1px solid; 
    
    color: #333; 
    border-color: #ddd; 
}

/* 태그별 색상 설정 */
.review-tag.new {
    color: #007cff !important; 
    border-color: #007cff !important; 
}

.review-tag.repurchase,
.review-tag.longterm {
    color: #28a745 !important; 
    border-color: #28a745 !important; 
}

/* 별 색상 */
.stars {
    color: #ffc107;
    font-size: 16px;
}

.score {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}
/* 리뷰 보러가기 버튼 (.review-button) */
.review-button {
    background: transparent;
    color: #666;
    padding: 12px 24px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    
    /* 💡 핵심 수정: block 대신 flex로 변경하여 내부 요소 한 줄 정렬 */
    display: flex !important;
    justify-content: center !important; /* 가로 중앙 정렬 */
    align-items: center !important; /* 세로 중앙 정렬 */
    gap: 5px; /* 텍스트와 이모티콘 사이의 간격 */
    
    margin: 20px auto 0 !important; /* 중앙 정렬 및 상단 여백 유지 */
    text-decoration: none;
    transition: all 0.2s;
    width: 200px;
    /* text-align: center; 는 flex로 대체됨 */
    
    /* 혹시 모를 내부 요소 줄바꿈 방지 */
    white-space: nowrap !important; 
}

.review-button:hover {
    background: #fff;
    border-color: #7239ff;
    color: #7239ff;
    text-decoration: none;
}
/* =================================================== */
/* ⭐️ 영상 섹션 (.video-section) 스타일 ⭐️ */
/* =================================================== */

.video-section {
    width: 100%;
    max-width: 400px; 
    
    /* 💡 위아래 섹션과의 간격만 남깁니다. */
    margin: 30px auto !important; 
    
    padding: 0 20px !important; /* 좌우 20px 패딩 유지 */
    
    /* 혹시 모를 흰색 배경 방지 */
    background: transparent !important; 
}

/* 📌 영상 (<iframe>) 스타일 수정 */
.video-section iframe {
    width: 100% !important; 
    aspect-ratio: 16 / 9; 
    display: block;
    
    /* 💡 iframe 자체의 기본 여백을 모두 제거 (핵심) */
    margin: 0 !important;
    padding: 0 !important;
    
    border-radius: 8px;
    /* 다른 스타일은 유지 */
}

/* =================================================== */
/* 푸터 💡 */
/* =================================================== */

.fixed-bottom-cta-bar {
    /* 💡 위쪽 콘텐츠와의 간격을 margin-top으로 확보 (핵심) */
    margin-top: 30px !important; /* 위쪽 영상 섹션과의 간격 30px 확보 */
    margin-bottom: 0 !important;
    
    /* 일반 블록 요소로 유지 */
    position: relative; 
    width: 100% !important; 
    
    /* 디자인 및 정렬 */
    background: #f0f0ff; 
    display: flex; 
    
    /* 💡 박스 내부의 상하 여백은 20px로 유지하여 버튼을 감쌉니다. */
    padding: 20px 15px !important; 
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15); 
    gap: 10px; 
}


/* 📌 개별 버튼 스타일 (나머지는 그대로 유지) */
.fixed-bottom-cta-bar a {
    flex-grow: 1; 
    text-align: center;
    padding: 14px 10px; 
    margin: 0 !important; 
    border-radius: 10px; 
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}

/* 📌 버튼별 색상 스타일은 그대로 유지합니다. */
.fixed-bottom-cta-bar .btn-main-site {
    background: white; 
    color: #7766ff; 
    border: 1px solid #7766ff; 
}

.fixed-bottom-cta-bar .btn-conversion {
    background: #7766ff; 
    color: white; 
    border: none; 
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .cta-button,
    .main-event .cta-button {
        padding: 16px 30px;
        font-size: 18px;
    }
    
    .main-event .cta-button {
        bottom: 20px;
    }
    
    .landing-container {
        max-width: none;
    }
}

/* 데스크톱에서 배경색 유지 */
@media (min-width: 401px) {
    body {
        background: var(--page-bg-color, #fff); /* 기본값 설정 */
    }
}