/* 변수 및 기본 스타일 정의 */
:root {
    --bg-color: #fbf7f2;
    --primary-color: #5a4a42;
    --accent-color: #d8a7a7;
    --text-color: #2c2a29;
    --text-light: #615e5c;
    --max-width: 1160px;
}

.okbi-about-container {
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--text-color);
    line-height: 1.9;
    word-break: keep-all;
    padding: 40px 10px;
}

.okbi-about-container *, 
.okbi-about-container *::before, 
.okbi-about-container *::after {
    box-sizing: border-box;
}

/* 상단 타이틀 섹션 */
.okbi-header {
    text-align: center;
    margin-bottom: 60px;
}

.okbi-subtitle {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

.okbi-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.okbi-header .line-bar {
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
    margin: 0 auto;
}



/* ===================== 설립취지 ====================== */


/* 본문 서사 섹션 (잔잔하고 정갈한 여백 처리) */
.okbi-narrative {
    background-color: #ffffff;
    border: 1px solid #eadecc;
    border-radius: 4px;
    padding: 50px 45px;
    margin-bottom: 60px;
    box-shadow: 0 4px 20px rgba(44, 42, 41, 0.02);
}

.okbi-narrative-p {
    font-size: 17.5px;
    margin-bottom: 28px;
    color: var(--text-color);
    text-align: justify;
}

.okbi-narrative-p:last-child {
    margin-bottom: 0;
}

/* 3대 실현 목표 섹션 */
.okbi-goals {
    margin-bottom: 60px;
}

.okbi-goals-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 35px;
    text-align: center;
    letter-spacing: -0.5px;
}

/* 반응형 가로 배열을 위한 테이블 구조 레이아웃 */
.okbi-goals-wrapper {
    display: table;
    width: 100%;
    border-spacing: 20px 0;
}

.okbi-goal-card {
    display: table-cell;
    width: 33.333%;
    background-color: #ffffff;
    border-top: 3px solid var(--primary-color);
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 35px 25px;
    vertical-align: top;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

/* 첫 번째 정신의 계승 카드는 매화색으로 강조 포인트 */
.okbi-goal-card.highlight {
    border-top-color: var(--accent-color);
}

.okbi-goal-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 10px;
    display: block;
    letter-spacing: 1px;
}

.okbi-goal-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.okbi-goal-card.highlight .okbi-goal-name {
    color: var(--accent-color);
}

.okbi-goal-desc {
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.75;
    text-align: justify;
}

/* 하단 동행 소망 섹션 (강렬한 통블록 연출) */
.okbi-footer {
    text-align: center;
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 50px 40px;
    border-radius: 4px;
    box-shadow: 0 6px 25px rgba(26, 54, 93, 0.12);
}

.okbi-footer-p {
    font-size: 16.5px;
    line-height: 1.85;
    color: #e2e8f0;
    max-width: 720px;
    margin: 0 auto;
    letter-spacing: -0.2px;
}

/* 모바일 반응형 미디어 쿼리 */
@media (max-width: 768px) {
    .okbi-about-container {
        padding: 20px 16px;
    }

    .okbi-title {
        font-size: 25px;
    }

    .okbi-narrative {
        padding: 35px 22px;
        margin-bottom: 40px;
    }

    .okbi-narrative-p {
        font-size: 16px;
        margin-bottom: 22px;
    }

    /* 가로 배열 테이블 구조를 모바일에서는 세로 블록으로 전환 */
    .okbi-goals-wrapper {
        display: block;
    }

    .okbi-goal-card {
        display: block;
        width: 100%;
        margin-bottom: 20px;
        padding: 30px 22px;
    }
    
    .okbi-goals-title {
        font-size: 19px;
        margin-bottom: 25px;
    }

    .okbi-footer {
        padding: 40px 20px;
    }

    .okbi-footer-p {
        font-size: 15px;
    }
}




/* ===================== 인사말 ====================== */





/* 인사말 페이지 전용 스타일 */
.okbi-greeting-container {
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--text-color);
    line-height: 2;
    word-break: keep-all;
    padding: 40px 10px;
}

.okbi-greeting-container *, 
.okbi-greeting-container *::before, 
.okbi-greeting-container *::after {
    box-sizing: border-box;
}

/* 상단 타이틀 영역 */
.greeting-header {
    text-align: center;
    margin-bottom: 50px;
}

.greeting-subtitle {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

.greeting-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.greeting-header .line-bar {
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
    margin: 0 auto;
}

/* 중심 사진/이미지 영역 */
.greeting-main-img-zone {
    max-width: 650px;
    margin: 0 auto 50px auto;
    text-align: center;
}

.greeting-img-wrapper {
    position: relative;
    padding: 12px;
    background-color: #ffffff;
    border: 1px solid #eadecc;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(90, 74, 66, 0.06);
}

.greeting-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    filter: grayscale(10%) sepia(10%); /* 고즈넉한 톤 보정효과 */
}

.greeting-img-caption {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 15px;
    font-style: italic;
    letter-spacing: -0.3px;
}

/* 본문 서사 영역 (편지 형태의 정갈한 레이아웃) */
.greeting-body {
    max-width: 750px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #eadecc;
    border-radius: 4px;
    padding: 60px 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.greeting-p {
    font-size: 17.5px;
    margin-bottom: 32px;
    color: var(--text-color);
    text-align: justify;
}

.greeting-p.highlight-text {
    font-size: 19px;
    font-weight: 700;
    color: var(--primary-color);
    border-left: 3px solid var(--accent-color);
    padding-left: 15px;
    margin: 40px 0;
    line-height: 1.8;
}

.greeting-p:last-child {
    margin-bottom: 0;
}

/* 하단 서명 영역 */
.greeting-signature {
    margin-top: 60px;
    text-align: right;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.greeting-signature span {
    font-size: 24px;
    font-weight: 800;
    margin-left: 8px;
    color: var(--text-color);
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 2px;
}

/* 모바일 반응형 미디어 쿼리 */
@media (max-width: 768px) {
    .okbi-greeting-container {
        padding: 20px 16px;
    }

    .greeting-title {
        font-size: 26px;
    }

    .greeting-main-img-zone {
        margin-bottom: 35px;
    }

    .greeting-img-wrapper {
        padding: 8px;
    }

    .greeting-body {
        padding: 40px 24px;
    }

    .greeting-p {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .greeting-p.highlight-text {
        font-size: 17px;
        margin: 30px 0;
        padding-left: 12px;
    }
    
    .greeting-signature {
        margin-top: 40px;
        font-size: 16px;
    }
    
    .greeting-signature span {
        font-size: 20px;
    }
}





/* ===================== 제작배경 ====================== */





/* 제작배경 페이지 전용 스타일 */
.okbi-bg-container {
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--text-color);
    line-height: 2;
    word-break: keep-all;
    padding: 40px 10px;
}

.okbi-bg-container *, 
.okbi-bg-container *::before, 
.okbi-bg-container *::after {
    box-sizing: border-box;
}

/* 상단 타이틀 영역 */
.bg-header {
    text-align: center;
    margin-bottom: 60px;
}

.bg-subtitle {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

.bg-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.bg-header .line-bar {
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
    margin: 0 auto;
}

/* 상단 서두 글 (큰 글씨 서사) */
.bg-intro-text {
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 19px;
    color: var(--primary-color);
    text-align: center;
    font-weight: 500;
    line-height: 1.8;
}

/* 세로형 서사 다이어그램 영역 */
.bg-diagram-zone {
    max-width: 800px;
    margin: 0 auto 60px auto;
    position: relative;
    padding-left: 30px;
}

/* 다이어그램 중심 세로선 */
.bg-diagram-zone::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background-color: var(--accent-color);
    opacity: 0.5;
}

.bg-node {
    position: relative;
    margin-bottom: 40px;
}

.bg-node:last-child {
    margin-bottom: 0;
}

/* 다이어그램 포인트 점 */
.bg-node::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid var(--accent-color);
    z-index: 2;
}

/* 마지막 다이어그램 노드는 채워진 점으로 강조 */
.bg-node.highlight-node::before {
    background-color: var(--accent-color);
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px var(--accent-color);
}

.bg-node-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.bg-node-content {
    font-size: 17px;
    color: var(--text-color);
    background-color: #ffffff;
    border: 1px solid #eadecc;
    border-radius: 4px;
    padding: 25px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    text-align: justify;
}

/* 하단 결론/다짐 영역 */
.bg-summary-box {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 45px 40px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(90, 74, 66, 0.1);
}

.bg-summary-p {
    font-size: 17px;
    line-height: 1.85;
    color: #f7f5f3;
}

/* 모바일 반응형 미디어 쿼리 */
@media (max-width: 768px) {
    .okbi-bg-container {
        padding: 20px 16px;
    }

    .bg-title {
        font-size: 26px;
    }

    .bg-intro-text {
        font-size: 17px;
        margin-bottom: 35px;
    }

    .bg-diagram-zone {
        padding-left: 20px;
    }

    .bg-diagram-zone::before {
        left: 4px;
    }

    .bg-node::before {
        left: -21px;
        width: 11px;
        height: 11px;
        border-width: 2px;
    }

    .bg-node.highlight-node::before {
        box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px var(--accent-color);
    }

    .bg-node-content {
        font-size: 15.5px;
        padding: 20px;
    }

    .bg-summary-box {
        padding: 35px 20px;
    }

    .bg-summary-p {
        font-size: 15px;
    }
}





/* ===================== 이육사 선생 > 독립운동 활동 ====================== */





/* 독립운동 활동 페이지 전용 스타일 */
.okbi-history-container {
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--text-color);
    line-height: 2;
    word-break: keep-all;
    padding: 40px 10px;
}

.okbi-history-container *, 
.okbi-history-container *::before, 
.okbi-history-container *::after {
    box-sizing: border-box;
}

/* 상단 타이틀 영역 */
.history-header {
    text-align: center;
    margin-bottom: 60px;
}

.history-subtitle {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

.history-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.history-header .line-bar {
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
    margin: 0 auto;
}

/* 요약 그리드 섹션 */
.history-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 60px;
}

.history-card {
    background-color: #ffffff;
    border: 1px solid #eadecc;
    border-radius: 4px;
    padding: 35px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.history-card.highlight-card {
    border-top: 3px solid var(--accent-color);
}

.history-card.primary-card {
    border-top: 3px solid var(--primary-color);
}

.card-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    display: block;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.card-text {
    font-size: 16px;
    color: var(--text-color);
    text-align: justify;
}

/* 일제 감시 기록 인용구 섹션 */
.history-quote-zone {
    background-color: #ffffff;
    border-left: 4px solid var(--primary-color);
    padding: 30px;
    margin-bottom: 60px;
    border-top: 1px solid #eadecc;
    border-right: 1px solid #eadecc;
    border-bottom: 1px solid #eadecc;
    border-radius: 0 4px 4px 0;
}

.quote-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 10px;
    display: block;
}

.quote-text {
    font-size: 16.5px;
    color: var(--text-color);
    font-style: italic;
    line-height: 1.8;
}

/* 마지막 길 (순국 서사 블록) */
.history-final-box {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 50px 40px;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(90, 74, 66, 0.1);
}

.final-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

.final-p {
    font-size: 16.5px;
    margin-bottom: 20px;
    color: #f7f5f3;
    text-align: justify;
}

.final-p:last-child {
    margin-bottom: 0;
}

/* 모바일 반응형 미디어 쿼리 */
@media (max-width: 768px) {
    .okbi-history-container {
        padding: 20px 5px;
    }

    .history-title {
        font-size: 26px;
    }

    .history-summary-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .history-card {
        padding: 25px 20px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-text {
        font-size: 15px;
    }

    .history-quote-zone {
        padding: 20px;
        margin-bottom: 40px;
    }

    .quote-text {
        font-size: 15px;
    }

    .history-final-box {
        padding: 35px 22px;
    }

    .final-title {
        font-size: 19px;
    }

    .final-p {
        font-size: 15px;
    }
}






/* ===================== 함께하기 (펀딩) > 후원안내 ====================== */





/* 후원안내 페이지 전용 스타일 */
.okbi-support-container {
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--text-color);
    line-height: 2;
    word-break: keep-all;
    padding: 40px 10px 0;
}

.okbi-support-container *, 
.okbi-support-container *::before, 
.okbi-support-container *::after {
    box-sizing: border-box;
}

/* 상단 타이틀 영역 */
.support-header {
    text-align: center;
    margin-bottom: 50px;
}

.support-subtitle {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

.support-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.support-header .line-bar {
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
    margin: 0 auto;
}

/* 서두 안내 */
.support-intro {
    max-width: 750px;
    margin: 0 auto 50px auto;
    text-align: center;
    font-size: 17.5px;
    color: var(--text-color);
}

/* 핵심 정보 박스 (사용목적 및 계좌안내) */
.support-info-section {
    max-width: 750px;
    margin: 0 auto 50px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.support-info-box {
    background-color: #ffffff;
    border: 1px solid #eadecc;
    border-radius: 4px;
    padding: 35px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.support-info-box.account-box {
    border-top: 3px solid var(--accent-color);
}

.support-info-box.purpose-box {
    border-top: 3px solid var(--primary-color);
}

.box-tit {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.box-desc {
    font-size: 15.5px;
    color: var(--text-color);
    margin: 0;
}

.account-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    background-color: var(--bg-color);
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 12px;
    display: inline-block;
    letter-spacing: 0.5px;
}

/* 후원 약속/원칙 리스트 */
.support-rules-list {
    max-width: 750px;
    margin: 0 auto 60px auto;
    background-color: #ffffff;
    border: 1px solid #eadecc;
    border-radius: 4px;
    padding: 40px 45px;
}

.rule-item {
    margin-bottom: 25px;
    position: relative;
    padding-left: 25px;
}

.rule-item:last-child {
    margin-bottom: 0;
}

.rule-item::before {
    content: '•';
    position: absolute;
    left: 5px;
    top: 0;
    color: var(--accent-color);
    font-size: 20px;
    font-weight: bold;
}

.rule-tit {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
    display: block;
}

.rule-desc {
    font-size: 15px;
    color: var(--text-light);
    margin: 0;
}

/* 신청서 작성 안내 띠지 */
.support-form-notice {
    max-width: 750px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-bottom: 2px dashed #eadecc;
    padding-bottom: 25px;
}

.form-notice-tit {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 8px;
}

.form-notice-desc {
    font-size: 15px;
    color: var(--text-light);
}

/* 모바일 반응형 미디어 쿼리 */
@media (max-width: 768px) {
    .okbi-support-container {
        padding: 20px 5px 0;
    }

    .support-title {
        font-size: 26px;
    }

    .support-intro {
        font-size: 15.5px;
        margin-bottom: 35px;
    }

    .support-info-section {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 35px;
    }

    .support-info-box {
        padding: 25px 20px;
    }

    .box-tit {
        font-size: 17px;
    }

    .account-number {
        font-size: 16px;
        padding: 8px 12px;
        width: 100%;
        text-align: center;
    }

    .support-rules-list {
        padding: 30px 20px;
        margin-bottom: 40px;
    }

    .rule-item {
        margin-bottom: 20px;
    }

    .rule-tit {
        font-size: 15.5px;
    }

    .rule-desc {
        font-size: 14px;
    }
}