/* ==========================================================================
   Intro – 공통 CSS (settings.css 토큰/유틸 기반)
   ========================================================================== */

/* Section */
.sub-section {
    margin: 0 20px;
}

.section__title{
    font-weight: 700;
    margin-bottom: 20px;
    border-left: 5px solid #000;
    padding-left: 15px;
}
.section__subtitle{
    font-weight: 700;
}
.section__text{
    padding-left: 10px;
}

/* Notice */
.notice{
    padding: var(--space-block);
    margin: var(--space-block) 0;
    border-left: 4px solid;
    border-radius: var(--radius-sm);
    background-color: #fff;
    box-shadow: var(--shadow-sm);
}
.notice--info{    background-color: var(--color-primary-weak); border-left-color: var(--color-primary); }
.notice--warning{ background-color: #fff8f0;                    border-left-color: var(--color-warning); }
.notice--success{ background-color: #f0fff0;                    border-left-color: var(--color-success); }

/* Feature / Card */
.feature{
    padding: var(--space-block) calc(var(--space-block) * 1.25);
    border-radius: var(--radius-sm);
}
.feature__title{
    font-weight:700;
    color:var(--color-text-strong);
    margin-bottom:10px;
}

/* Process (단계) */
.process{ margin: var(--gap-xl) 0; }
.process__steps{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--space-gap);
}
.process__step{
    flex:1; min-width:200px; text-align:center;
    margin:10px; position:relative;
}
.process__step:not(:last-child)::after{
    content:'→';
    position:absolute; right:-20px; top:50%; transform:translateY(-50%);
    font-size:var(--fs-xxlarge); color:var(--color-primary);
}
.process__number{
    background-color:var(--color-primary); color:#fff;
    width:40px; height:40px; border-radius:var(--radius-circle);
    display:grid; place-items:center; margin:0 auto 10px; font-weight:700;
}
.process__title{ font-weight:700; margin-bottom:5px; }
.process__desc{ color:var(--color-text-weak); font-size: var(--fs-small); font-style: italic;} /* 크기는 전역 본문 따름 */

/* Checklist */
.checklist{ background-color:#f8f9fa; padding: var(--space-block); border-radius: var(--radius-sm); }
.checklist__title{
    font-weight:700; margin-bottom:15px; color:var(--color-text-strong);
    font-size: var(--fs-h3); /* 전역 토큰 */
}
.checklist__item{ display:flex; padding:10px 0; }
.checklist__item::before{
    content:'✓'; color:var(--color-success); font-weight:700; margin-right:10px; margin-top:2px;
}

/* Stats */
.stats{
    display:flex; justify-content:space-around;
    background-color:var(--color-bg-soft);
    padding: clamp(15px, 4vw, 25px);
    margin:25px 0; text-align:center; border-radius:var(--radius-md); gap: var(--space-gap);
}
.stats__item{ flex:1; }
.stats__number{ font-size: var(--fs-h3); font-weight:700; color:var(--color-accent); }
.stats__label{ font-size: var(--fs-small); color:var(--color-text-weak); margin-top:5px; }

/* Quote */
.quote{
    font-style:italic; text-align:center; color:var(--color-text);
    margin:30px 0; padding:20px;
    border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
}

/* Vision */
.vision{
    background:linear-gradient(135deg,#101941 0%,#1b5195 100%);
    color:#fff; padding:30px; margin:30px 0; text-align:center; border-radius:var(--radius-md);
}
.vision__title{ font-size: var(--fs-h3); margin-bottom:15px; }
.vision__text{ line-height:1.6; } /* 크기 전역 본문 따름 */

/* Apply */
.apply{
    display:flex; align-items:center; background-color:var(--color-bg);
    padding: clamp(24px, 5vw, 40px); margin:40px 0;
    border:1px solid var(--color-border); border-radius:var(--radius-md);
    gap: var(--space-gap);
}
.apply__left{ flex:2; }
.apply__right{ flex:1; text-align:center; }
.apply__title{ margin-bottom:15px;}
.apply__text{ line-height:1.6; color:var(--color-text); } /* 크기 전역 본문 따름 */
.apply__button{
    background-color:#000; color:#fff; border:0; padding:15px 30px;
    font-weight:700; border-radius:var(--radius-sm); transition:background-color var(--transition);
}

/* List (공통 불릿) */
.list__item{ padding-left:1.25rem; margin:5px 0; }
.list--nodot { padding: 0; }

/* Categories (카테고리/참가 대상/제품 카테고리 그리드) */
.criteria-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.criteria-card {
    background-color: #f8f9fa;
    padding: 20px 15px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.criteria-title {
    font-size: var(--fs-medium);
    color: #2c3e50;
    font-weight: 600;
}

.criteria-desc {
    font-size: var(--fs-small);
    color: #666;
    line-height: 1.4;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .criteria-grid {
        display: flex;
        flex-direction: column;
    }

    .list__item{
        font-size: var(--fs-small);
        padding-left: .75rem;
    }
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.overview-item {
    padding: 25px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-border);
}

.percentage {
    color: var(--color-primary);
    font-weight: 600;
}

.overview-desc {
    font-size: var(--fs-medium);
    color: #666;
}

@media (max-width: 768px) {
    .overview-grid{
        display: flex;
        flex-direction: column;
    }
}

/* =======================
   Table Utilities
   ======================= */
.table {border: 1px solid var(--color-border);}
.table thead th {color: #2d3748;}
.table tbody th {min-width: 120px;}
.table tbody td li:last-child {margin-bottom: 0;}

/* 설명형 2열 테이블(행사 개요) – 좌측 정렬 + 줄바꿈 허용 */
.table--desc th, .table--desc td{text-align:left;}

/* 프로그램 표 – 좌측 정렬 + 최소 너비 카드 느낌 */
.table--program th, .table--program td{ text-align:left; }

/* 작은 보조 텍스트 */
.table__sub{ font-style:italic; color:#666; font-size: var(--fs-small); }

/* 접근성용 숨김 텍스트 */
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Program Block (두 표 나란히 → 모바일 스택) */
.program__tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.program-header {
    border: 1px solid var(--color-border);
    padding: 20px;
    text-align: center;
}

.program-subtitle {
    font-size: var(--fs-small);
    color: #64748b;
    font-style: italic;
}

/* 프로그램 테이블 조정 */
.program__table .table {
    border-top: none;
}

.button {
    margin-left: 10px;
}

.button--sub {
    color: #6b7280;
    border: 1px solid #d1d5db;
    padding: 4px 8px;
}

.button--sub:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

@media (max-width: 768px) {
    .program__tables {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .table th, .table td {
        padding: 10px;
    }

    .table th, .table td {
        font-size: var(--fs-xsmall);
    }

    .table tbody th{
        min-width: 80px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:768px){
    /* Process 방향 전환 */
    .process__steps{ flex-direction:column; }
    .process__step:not(:last-child)::after{
        content:'↓'; right:auto; top:auto; bottom:-30px; left:50%; transform:translateX(-50%);
    }

    /* Apply 스택 */
    .apply{ flex-direction:column; text-align:center; }
    .apply__left{ margin-bottom:30px; }

    /* 프로그램 표 스택 */
    .program__tables{ flex-direction:column; gap:20px; }

    /* 개요 표 첫 컬럼 폭 축소(더 좁은 화면 친화) */
    .table--desc th{ width:7rem; }
}