/**
 * v7/help/guideline.css
 *
 * 이용안내 페이지 전용 스타일.
 * Web Awesome Pro + 커스텀 CSS 사용. Bootstrap 미사용.
 * 보더리스 디자인 — 영역 구분은 연한 배경색으로.
 */

/* 페이지 컨테이너 */
.guideline-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 0;
}

/* ━━━ 아코디언 아이템 ━━━ */

/* wa-details 기본 스타일 커스터마이징 */
.guideline-item {
    --border-color: transparent;
    --border-width: 0;
    margin-bottom: 0.75rem;
}

/* wa-details summary 영역 */
.guideline-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--wa-color-neutral-10, #1e293b);
}

/* 아이콘 래퍼 */
.guideline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
}

/* 아이콘 variant 색상 — 연한 배경 + 진한 전경 */
.guideline-icon-brand {
    background: var(--wa-color-brand-95, #e7f5ff);
    color: var(--wa-color-brand-50, #3178c0);
}

.guideline-icon-success {
    background: #ecfdf5;
    color: #16a34a;
}

.guideline-icon-warning {
    background: #fffbeb;
    color: #d97706;
}

.guideline-icon-danger {
    background: #fef2f2;
    color: #dc2626;
}

.guideline-icon-info {
    background: #eff6ff;
    color: #2563eb;
}

.guideline-icon-neutral {
    background: #f8fafc;
    color: var(--wa-color-neutral-50, #475569);
}

/* ━━━ 콘텐츠 영역 ━━━ */

.guideline-content {
    padding: 0.5rem 0 0.25rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--wa-color-neutral-30, #334155);
}

.guideline-content p {
    margin: 0 0 0.75rem;
}

/* 리스트 스타일 */
.guideline-list-items {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
}

.guideline-list-items li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

.guideline-list-items li i {
    margin-top: 0.25rem;
    color: var(--wa-color-brand-50, #3178c0);
    flex-shrink: 0;
}

.guideline-list-items li strong {
    color: var(--wa-color-neutral-10, #1e293b);
}

/* 순서 있는 리스트 */
.guideline-ordered-list {
    padding-left: 1.25rem;
    margin: 0.75rem 0;
}

.guideline-ordered-list li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
    color: var(--wa-color-neutral-30, #334155);
}

/* 소제목 */
.guideline-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wa-color-neutral-10, #1e293b);
    margin: 1rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guideline-subtitle:first-child {
    margin-top: 0;
}

.guideline-subtitle i {
    color: var(--wa-color-brand-50, #3178c0);
}

/* ━━━ 은행 정보 카드 ━━━ */

.guideline-bank-info {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.guideline-bank-card {
    flex: 1;
    min-width: 200px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 1rem;
}

.guideline-bank-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wa-color-neutral-10, #1e293b);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guideline-bank-title i {
    color: var(--wa-color-brand-50, #3178c0);
}

.guideline-bank-detail {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    color: var(--wa-color-neutral-40, #475569);
}

.guideline-bank-label {
    color: var(--wa-color-neutral-60, #64748b);
    margin-right: 0.5rem;
}

/* 안내 노트 */
.guideline-note {
    font-size: 0.82rem;
    color: var(--wa-color-neutral-50, #475569);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.guideline-note i {
    margin-top: 0.15rem;
    color: var(--wa-color-brand-50, #3178c0);
    flex-shrink: 0;
}

/* ━━━ 구인 글 예제 카드 ━━━ */

.guideline-example-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 1.25rem;
    margin: 0.75rem 0;
}

.guideline-example-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--wa-color-neutral-10, #1e293b);
    margin-bottom: 0.75rem;
}

.guideline-example-body {
    font-size: 0.85rem;
    color: var(--wa-color-neutral-30, #334155);
}

.guideline-example-body p {
    margin: 0 0 0.35rem;
}

.guideline-example-body strong {
    color: var(--wa-color-neutral-10, #1e293b);
}

/* ━━━ 포인트 이벤트 날짜 ━━━ */

.guideline-event-dates {
    margin-top: 0.75rem;
}

.guideline-event-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
    color: var(--wa-color-neutral-30, #334155);
}

.guideline-event-item i {
    color: #16a34a;
}

.guideline-event-item strong {
    color: var(--wa-color-neutral-10, #1e293b);
}

/* ━━━ 링크 스타일 ━━━ */

.guideline-content a {
    color: var(--wa-color-brand-50, #3178c0);
    text-decoration: none;
    font-weight: 500;
}

.guideline-content a:hover {
    text-decoration: underline;
}

/* ━━━ wa-callout 간격 ━━━ */

.guideline-page wa-callout {
    font-size: 0.85rem;
}

.guideline-page wa-callout a {
    color: var(--wa-color-brand-50, #3178c0);
    text-decoration: none;
    font-weight: 500;
}

.guideline-page wa-callout a:hover {
    text-decoration: underline;
}

/* ━━━ 모바일 반응형 ━━━ */

@media (max-width: 991.98px) {
    .guideline-page {
        padding: 1rem 0.75rem;
        gap: 1.25rem;
    }

    .guideline-bank-info {
        flex-direction: column;
    }

    .guideline-bank-card {
        min-width: auto;
    }

    .guideline-summary {
        font-size: 0.88rem;
    }

    .guideline-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .guideline-content {
        font-size: 0.85rem;
    }

    .guideline-example-card {
        padding: 1rem;
    }
}