@charset "utf-8";

/* ==================================================================
   price.php 전용 스타일 (밝은 테마)
================================================================== */

/* :root 변수는 사이트 공통 스타일에서 관리하는 것을 권장하나,
   이 파일의 독립성을 위해 여기에 포함합니다. */
:root {
    --main-bg-color: #f9fafb;       /* 페이지 기본 배경색 (아주 연한 회색) */
    --card-bg-color: #ffffff;       /* 카드 배경색 (흰색) */
    --border-color: #e5e7eb;        /* 테두리 색상 (연한 회색) */
    --text-primary-color: #1f2937;  /* 주요 텍스트 색상 (진한 회색) */
    --text-secondary-color: #6b7280;/* 보조 텍스트 색상 (중간 회색) */
}

.pricing-page-container {
    max-width: 100$;
    margin: auto;
    padding: 0 15px;
    transform: translateX(-17px);
}
.preview-box {
    padding: 10px 20px;
    margin-bottom: 25px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #20383b;
    border: 1px solid var(--border-color);
    border-radius: 8px; /* 통일성을 위해 추가 */
}
.preview-box img {
    max-width: 100%;
    max-height: 145px;
    border-radius: 5px;
    object-fit: contain;
    border: 1px solid var(--border-color);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}
.pricing-card {
    color: var(--text-primary-color);
    background: var(--card-bg-color);
    border-radius: 8px; /* 모서리 통일 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
	border: 1px solid var(--border-color);
}
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.pricing-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--main-bg-color);
}
.pricing-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #333;
}
.pricing-body {
    padding: 20px; /* 내부 여백 추가 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0; /* margin-left 제거 */
    color: #427bff;
    flex-grow: 1;
}
.feature-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.feature-list li::before {
    content: '✓';
    color: #10b981; /* 밝은 테마에 맞는 초록색 */
    font-weight: bold;
    margin-right: 8px; /* 간격 조정 */
}
.price-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.price-item {
    background: var(--main-bg-color);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}
.price-item.highlight {
    background: #ecfdf5; /* 연한 초록색 배경 */
    border-color: #10b981;
}
.price-item .duration {
    display: block;
    font-size: 0.9em;
    color: var(--text-secondary-color);
}
.price-item .price {
    font-weight: 700;
    color: #333;
}
.pricing-footer {
    padding: 15px;
    background: var(--main-bg-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto; /* 항상 하단에 고정 */
    border-top: 1px solid var(--border-color);
}
.btn-action {
    display: inline-block;
    padding: 12px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.2s;
    border: 1px solid transparent;
    font-weight: bold;
}
.btn-dark-blue {
    background-color: #4b5563; /* 회색 계열 버튼 */
    color: #ffffff;
    border-color: #4b5563;
}
.btn-dark-blue:hover {
    background-color: #374151;
    transform: translateY(-2px);
}
.btn-vibrant-blue {
    background-color: #3b82f6; /* 파란색 계열 버튼 */
    color: #ffffff;
    border-color: #3b82f6;
}
.btn-vibrant-blue:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
}
.free-item .price-item {
    grid-column: 1 / -1;
}
.modal-overlay {
    position: fixed;
    z-index: 9990;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(17, 24, 39, 0.6); /* 어두운 오버레이 유지 */
    display: none;
    align-items: center;
    justify-content: center;
}
.modal-overlay.show {
    display: flex;
}
.modal-content {
    background: var(--card-bg-color);
    color: var(--text-primary-color);
    border-radius: 10px;
    max-width: 90%;
    width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color);
}
.modal-header, .modal-body, .modal-footer {
    padding: 20px;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}
.modal-title { margin: 0; font-size: 1.3rem; }
.modal-close { cursor: pointer; font-size: 1.8rem; font-weight: 700; color: var(--text-secondary-color); border: none; background: none; }
.modal-body img { width: 100%; height: auto; display: block; border-radius: 5px; }
.modal-footer { border-top: 1px solid var(--border-color); text-align: right; }
.modal-close-bottom {
    cursor: pointer;
    background: #f3f4f6;
    color: #374151;
    padding: 10px 18px;
    border-radius: 5px;
    border: 1px solid #d1d5db;
}
.modal-close-bottom:hover {
    background-color: #e5e7eb;
}

/* 리스트 전체 컨테이너 설정 */
.feature-list {
    padding: 0;           /* 목록의 기본 왼쪽 여백 제거 (중요!) */
    text-align: center;   /* 내부 요소 중앙 정렬 */
    list-style: none;     /* 혹시 모를 기본 점 없애기 */
}

/* 리스트 안의 각 줄(체크+글자) 설정 */
.feature-list li {
    display: flex;            /* 아이콘과 글자를 한 줄로 */
    justify-content: center;  /* 가로 방향 가운데 정렬 */
    align-items: center;      /* 세로 방향 가운데 정렬 */
    width: 100%;              /* 전체 너비 사용 */
    margin-bottom: 5px;       /* 줄 간격 살짝 띄우기 */
}

/* 체크 아이콘과 글자 사이 간격 (선택 사항) */
.feature-list li i, 
.feature-list li span {
    margin: 0 3px; /* 아이콘과 글자 사이를 살짝 벌려 줌 */
}