@charset "utf-8";

/* ============================================================================
   page/about.css — 소개 · 저자 · 신앙 고백 · Follow Us
   ----------------------------------------------------------------------------
   이 화면에서만 쓰인다: /about/*  ($menu = "4")
   
   전 페이지가 지고 다니던 것을 화면별로 갈랐다 (옛 additional.css).
   ============================================================================ */

/* ── Follow Us 서브페이지 (follow_page) ─────────────────────────────────────── */
/* Follow Us 서브페이지 전용 그리드 (.follow-page) */
.follow-page .section-followUs {
    margin:1.5rem auto 3rem;
    padding:2.5rem 2.25rem;
}
.follow-page .section-followUs .grid-area {
    padding:1.75rem;
    background:var(--paper);
    border:1px solid var(--line-soft);
    border-radius:18px;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.follow-page .section-followUs .grid-row {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:1rem;
    margin:0;
    padding:0 0 1.5rem 0;
    border-bottom:1px solid var(--line-soft);
}
.follow-page .section-followUs .grid-row:last-child {
    border-bottom:none;
    padding-bottom:0;
}
.follow-page .section-followUs .grid-item {
    display:flex;
}
.follow-page .section-followUs .grid-row a {
    display:flex;
    align-items:center;
    gap:.75rem;
    width:100%;
    box-sizing:border-box;   /* 폭 100% 에 좌우 여백이 얹혀 칸 밖으로 넘치던 것 */
    padding:0.625rem 0.875rem;
    background:var(--paper-warm);
    border:1px solid var(--line-soft);
    border-radius:12px;
    text-decoration:none;
    transition:background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.follow-page .section-followUs .grid-row a:hover {
    background:var(--paper);
    border-color:var(--gold);
    transform:translateY(-2px);
    box-shadow:var(--sh-soft);
}
.follow-page .section-followUs .grid-row a img {
    height:28px;
    max-width:60px;
    object-fit:contain;
}
.follow-page .section-followUs .grid-row a span {
    font-size:13.5px;
    font-weight:700;
    color:var(--ink);
}

@media (max-width:767px) {
    .section-followUs {
        padding:1.75rem 1.25rem;
        border-radius:20px;
    }
    .section-followUs .youtube-slick {
        padding:1.25rem .5rem;
    }
    .follow-page .section-followUs {
        padding:1.75rem 1.25rem;
    }
    .follow-page .section-followUs .grid-area {
        padding:1.25rem 1rem;
    }
    .follow-page .section-followUs .grid-row {
        grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
        gap:.75rem;
    }
}

/* ── 소개 · 저자 (aboutUs · aboutAuthor) ───────────────────────────────────── */
/* ============================================================================
   소개 페이지 (About Us - aboutUs.php & About Author - aboutAuthor.php)
   ----------------------------------------------------------------------------
   · 에디토리얼 히어로 스플릿 카드 — 그림이 글 높이만큼 서서 여백이 남지 않는다
   · 시대적 메시지 및 권면 콜아웃 박스 (본문 폭을 72ch 로 묶는다)
   · 설립 배경 & 주요 사역 2단 그리드
   · 저자 프로필 카드 및 사역 스탯 칩
   ·
   · 치수는 rem, 글자 크기는 --fs-* 척도만 쓴다.
   · 낱말 사이가 벌어지는 것(강)을 막으려고 양끝맞춤에는 hyphens:auto 를 함께 준다.
   ========================================================================== */

.about-page-wrap,
.about-author-wrap {
    padding-top:var(--sp-2);
    padding-bottom:var(--sp-8);
}

.about-us-container,
.author-page-container {
    display:flex;
    flex-direction:column;
    gap:1.75rem;
}

/* 본문은 왼끝맞춤이다.
   양끝맞춤은 이 좁은 단(폭 20~26rem)에서 낱말 사이에 «강» 을 냈고,
   hyphens:auto 로 메우려 하면 28개 언어에서 엉뚱하게 끊긴다(righte-ousness).
   그래서 벌리지도 끊지도 않고 오른쪽을 놓아 준다. */
.about-hero-text p,
.about-message-text p,
.about-card-body p,
.author-bio-text p {
    text-align:left;
    text-wrap:pretty;
}

/* 🌟 1. About Us: 미션 히어로 카드 */
.about-hero-card {
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:2.25rem;
    align-items:stretch;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    padding:2.75rem 3rem;
    box-shadow:var(--sh-card);
    box-sizing:border-box;
}
.about-hero-content {
    align-self:center;
}
.author-badge {
    display:inline-block;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.08em;
    color:var(--gold-deep);
    background:var(--gold-soft);
    padding:0.1875rem 0.625rem;
    border-radius:var(--r-pill);
    margin-bottom:0.75rem;
    text-transform:uppercase;
}
.about-hero-title,
.author-name-title {
    font-size:var(--fs-xl);
    font-weight:700;
    color:var(--ink);
    margin:0 0 1.125rem;
    letter-spacing:-.03em;
    line-height:var(--lh-tight);
}
.about-hero-text p {
    font-size:var(--fs-md);
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0;
}

/* 그림은 글 높이만큼 선다 — 가운데 맞춤이 만들던 위아래 빈 자리를 없앤다.
   bg_about.png 은 오른쪽에 그림이 몰려 있어 오른쪽을 기준으로 자른다. */
.about-hero-visual {
    align-self:stretch;
    min-height:15rem;
    border-radius:var(--r-lg);
    overflow:hidden;
}
.about-hero-visual img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:100% 50%;
}

/* 📜 2. About Us: 시대적 메시지 카드 */
.about-message-card {
    background:var(--paper-warm);
    border:1px solid var(--gold-line);
    border-radius:var(--r-xl);
    padding:2rem 2.25rem;
    box-sizing:border-box;
}
.about-message-inner {
    display:flex;
    gap:1.25rem;
    align-items:flex-start;
}
.about-message-icon {
    width:2.75rem;
    height:2.75rem;
    border-radius:50%;
    background:var(--gold-soft);
    color:var(--gold-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-top:0.125rem;
}
.about-message-text {
    max-width:72ch;   /* 한 줄이 너무 길어지지 않게 — 읽는 폭을 묶는다 */
}
.about-message-text p {
    font-size:var(--fs-md);
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0;
}

/* 🏛 3. About Us: 설립 배경 & 주요 사역 2단 그리드 */
.about-grid-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
}
.about-feature-card {
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:2.25rem 2rem;
    box-shadow:var(--sh-card);
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.about-feature-card:hover {
    border-color:var(--gold-line);
    box-shadow:var(--sh-soft);
}
.about-card-header {
    display:flex;
    align-items:center;
    gap:0.875rem;
    margin-bottom:1.25rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line-soft);
}
.about-card-icon {
    width:2.875rem;
    height:2.875rem;
    border-radius:var(--r-md);
    background:var(--gold-soft);
    color:var(--gold-deep);
    border:1px solid var(--gold-line);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.about-card-title {
    font-size:var(--fs-lg);
    font-weight:700;
    color:var(--ink);
    margin:0;
    letter-spacing:-.02em;
}
/* 본문은 카드 높이를 채우고, 단추는 언제나 바닥에 붙는다 —
   글 길이가 서로 다른 두 카드에서 머리글 밑이 벌어지던 것을 막는다 */
.about-card-body {
    display:flex;
    flex-direction:column;
    flex:1;
}
.about-card-body p {
    font-size:var(--fs-base);
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0 0 0.875rem;
}
.about-card-body p:last-child {
    margin-bottom:0;
}
.ministry-desc strong {
    display:block;
    font-size:var(--fs-md);
    font-weight:700;
    color:var(--ink);
    margin-bottom:0.5rem;
}
.about-card-cta {
    margin-top:auto;
    padding-top:1rem;
}
.btn-about-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    max-width:100%;
    box-sizing:border-box;
    text-align:center;
    padding:0.5625rem 1.25rem;
    border-radius:var(--r-pill);
    background:var(--gold);
    color:var(--paper);
    font-size:var(--fs-sm);
    font-weight:700;
    text-decoration:none;
    transition:background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn-about-action svg,
.btn-about-action:hover {
    background:var(--gold-deep);
    box-shadow:var(--sh-gold);
    transform:translateY(-1px);
}

/* ✍️ 4. About Author: 저자 프로필 카드 */
.author-profile-card {
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:2.25rem;
    align-items:stretch;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    padding:3rem 3.25rem;
    box-shadow:var(--sh-card);
    box-sizing:border-box;
}
.author-profile-content {
    align-self:center;
}
.author-bio-text p {
    font-size:var(--fs-md);
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0 0 1.5rem;
}
.author-quick-stats {
    display:flex;
    gap:0.75rem;
    flex-wrap:wrap;
    margin-top:0.5rem;
}
.stat-chip {
    display:flex;
    flex-direction:column;
    background:var(--paper-warm);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:0.625rem 1rem;
    min-width:6rem;
    box-sizing:border-box;
}
.stat-chip .stat-num {
    font-size:var(--fs-xl);
    font-weight:700;
    color:var(--gold-deep);
    line-height:var(--lh-tight);
}
.stat-chip .stat-lbl {
    font-size:var(--fs-2xs);
    font-weight:600;
    color:var(--muted);
}
/* bg_about04.png 는 왼쪽 3분의 2가 빈 띠 그림이라, 그대로 두면 손톱만 하게 뜬다.
   오른쪽 그림만 잘라 정사각 판에 앉히고, 판은 글 높이만큼 선다. */
.author-profile-visual {
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gold-wash);
    border:1px solid var(--gold-line);
    border-radius:var(--r-lg);
    padding:1.5rem;
    box-sizing:border-box;
    overflow:hidden;
}
.author-profile-visual img {
    display:block;
    width:100%;
    max-width:19rem;
    aspect-ratio:1 / 1;
    height:auto;
    object-fit:cover;
    object-position:100% 50%;
}

/* 바닥 CTA 는 ui.css 의 .cta-bar / .btn-cta 한 벌이 그린다 */

/* 📱 반응형 미디어쿼리 (About Us & Author) */
@media (max-width:1024px) {
    .about-hero-card,
    .author-profile-card {
        grid-template-columns:1fr;
        padding:2rem 1.875rem;
        gap:1.5rem;
    }
    /* 한 칸으로 접히면 그림이 위로 — 띠처럼 눕는다 */
    .about-hero-visual,
    .author-profile-visual {
        order:-1;
        align-self:auto;
        min-height:0;
        padding:0;
    }
    .about-hero-visual {
        aspect-ratio:16 / 6;
    }
    .about-hero-visual img {
        object-position:100% 50%;
    }
    .author-profile-visual {
        background:none;
        border:none;
        border-radius:0;
    }
    .author-profile-visual img {
        max-width:14rem;
        aspect-ratio:1 / 1;
    }
}

@media (max-width:767px) {
    .about-page-wrap,
    .about-author-wrap {
        padding-top:var(--sp-2);
        padding-bottom:var(--sp-6);
    }
    .about-us-container,
    .author-page-container {
        gap:1.25rem;
    }
    .about-hero-card,
    .author-profile-card {
        padding:1.5rem 1.25rem;
        border-radius:var(--r-lg);
    }
    .about-hero-title,
    .author-name-title {
        font-size:var(--fs-lg);
        margin-bottom:0.75rem;
    }
    .about-hero-text p,
    .author-bio-text p {
        font-size:var(--fs-base);
    }
    .about-hero-visual {
        aspect-ratio:16 / 8;
    }
    .about-message-card {
        padding:1.25rem 1.125rem;
        border-radius:var(--r-lg);
    }
    .about-message-inner {
        flex-direction:column;
        gap:0.75rem;
    }
    .about-message-text p {
        font-size:var(--fs-base);
    }
    .about-grid-cards {
        grid-template-columns:1fr;
        gap:1rem;
    }
    .about-feature-card {
        padding:1.5rem 1.25rem;
        border-radius:var(--r-lg);
    }
    .about-card-title {
        font-size:var(--fs-md);
    }
    .about-card-body p {
        font-size:var(--fs-base);
    }
    .btn-about-action {
        display:flex;
        padding:0.75rem 1.25rem;
        font-size:var(--fs-base);
    }
}

/* ── 신앙 고백 (faith) ─────────────────────────────────────────────────────── */
/* ============================================================================
   신앙 고백 (Statement of Faith - faith.php)
   ----------------------------------------------------------------------------
   · 9대 조항 에디토리얼 카드 그리드 (3열 → 2열 → 1열)
   · 골드 넘버 뱃지 및 프레픽스 헤더
   · 부드러운 호버 엘리베이션
   ========================================================================== */

.faith-page-wrap {
    padding-top:var(--sp-2);
    padding-bottom:var(--sp-8);
}

.faith-page-container {
    max-width:1180px;
    margin:0 auto;
}

.faith-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

.faith-card {
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    padding:32px 28px;
    box-shadow:var(--sh-card);
    display:flex;
    flex-direction:column;
    position:relative;
    box-sizing:border-box;
    transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.faith-card:hover {
    border-color:var(--gold-line);
    box-shadow:var(--sh-soft);
    transform:translateY(-2px);
}

.faith-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-soft);
}

.faith-num {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-sm);
    font-weight:700;
    color:var(--gold-deep);
    background:var(--gold-soft);
    width:32px;
    height:32px;
    border-radius:50%;
    letter-spacing:-.02em;
}

.faith-prefix {
    font-size:12.5px;
    font-weight:700;
    color:var(--gold-deep);
    letter-spacing:.05em;
    text-transform:uppercase;
}

.faith-card-body {
    flex:1;
}

.faith-text {
    font-size:15px;
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0;
    text-align:justify;
    word-break:break-word;
}

/* 📱 신앙 고백 반응형 미디어쿼리 */
@media (max-width:1024px) {
    .faith-grid {
        grid-template-columns:repeat(2, 1fr);
        gap:20px;
    }
    .faith-card {
        padding:28px 24px;
    }
}

@media (max-width:767px) {
    .faith-page-wrap {
        padding-top:var(--sp-2);
        padding-bottom:var(--sp-6);
    }
    .faith-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
    .faith-card {
        padding:22px 20px;
        border-radius:var(--r-lg);
    }
    .faith-text {
        font-size:var(--fs-base);
        line-height:1.75;
        text-align:left;
    }
}

/* ── Contact Us (.contact) ───────────────────────────────────────────────────
   문의 화면은 «안내 → 하고 싶은 말 → 나를 알리는 칸 → 다른 길» 네 마디다.
   그런데 마디마다 생김새가 달랐다 — 하고 싶은 말만 카드 안에 있고 개인 정보 표는
   맨몸으로 그 아래 서서, 두 표의 라벨 줄이 카드 안쪽 여백만큼(30px) 어긋나 있었다.
   칸 너비도 제각각이었다 — 화면이 인라인 style 로 280px 를 박고, 어떤 칸은 .wd-100
   으로 전폭이라 같은 표 안에서 세 가지 너비가 섞였다.

   여기서는 두 표를 같은 카드에 담아 왼쪽 선을 하나로 맞추고, 입력 칸 너비도
   한 치수(--field-w)로 모은다. 색은 이 영역의 축(--zone, 골드)을 따른다 —
   구판은 «가입» 링크와 라디오만 보라라서 제출 단추(골드)와 따로 놀았다.
   sub.css 의 옛 .contact 규칙보다 늦게 실려 이 파일이 이긴다.
   ──────────────────────────────────────────────────────────────────────────── */
.contact {
    --field-w:26rem;   /* 입력 칸 한 치수 — 라벨 옆에서 눈이 한 번에 훑는 폭 */
}

/* 머리말은 제목이 아니라 «부르는 한 문장» 이다 — 크기보다 무게로 세운다 */
.contact .section-title h4 {
    font-size:var(--fs-lg);
    font-weight:600;
    color:var(--ink);
    line-height:1.5;
    padding-bottom:var(--sp-5);
}

/* 안내 띠 — 읽는 글이라 양끝맞춤(justify)을 걷어낸다. 좁은 단에서 낱말 사이가
   강처럼 벌어지던 자리다. 링크는 250px 짜리 블록이 아니라 제 글자만큼의 단추. */
.contact .sky-box {
    padding:var(--sp-5) var(--sp-5);
    border-radius:var(--r-xl);
    margin:0 0 var(--sp-5);
}
.contact .sky-box .bold {
    font-size:var(--fs-md);
    margin-bottom:var(--sp-3);
}
.contact .sky-box p {
    font-size:var(--fs-md);
    line-height:1.75;
    text-align:left;
    margin-bottom:var(--sp-4);
}
.contact .sky-box a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:11rem;
    height:2.75rem;
    line-height:1.2;
    padding:0 var(--sp-5);
    border-color:var(--zone);
    color:var(--zone-deep);
    font-weight:700;
}
.contact .sky-box a:hover {
    background:var(--zone);
    color:var(--paper);
}

/* 입력 카드 — 하고 싶은 말과 나를 알리는 칸이 같은 상자에 든다 */
.contact .fb-area {
    padding:var(--sp-5) var(--sp-6);
    background:var(--paper);
    border-color:var(--line-soft);
    border-radius:var(--r-xl);
    box-shadow:var(--sh-soft);
    margin:0 0 var(--sp-4);
}
.contact .fb-box h6 {
    margin:0 0 var(--sp-2);
    padding-bottom:var(--sp-3);
    border-bottom:1px solid var(--line-soft);
    font-size:var(--fs-md);
    font-weight:700;
    color:var(--ink);
    letter-spacing:-.01em;
}
/* 카드가 이미 테두리를 갖는다 — 표 밑줄은 겹선이 된다 (sub.css:510 되돌림) */
.contact .input-table {
    border-bottom:none;
}
.contact .input-table th {
    padding-left:0;
}

/* 칸 너비 한 벌 — 화면이 들고 있던 인라인 style(width:100% · 280px)을 회수한다 */
.contact .input-table td input,
.contact .input-table td .name,
.contact .input-table td .mail,
.contact .input-table td .wd-100,
.contact .input-table td .lang-box,
.contact .input-table td .lang-box select {
    box-sizing:border-box;
    width:100%;
    max-width:var(--field-w);
}
/* 두 칸이 나란히 서는 자리(이름·이메일)는 안쪽 칸이 제 폭을 갖는다 —
   위의 «td input» 한 벌이 특이도 동수로 이겨 이름 두 칸이 위아래로 서던 것 */
.contact .input-table td .name input {
    width:calc((100% - 10px)/2);
    max-width:none;
}
.contact .input-table td .mail input {
    float:none;
    width:100%;
    max-width:none;
}
.contact .input-table td textarea {
    min-height:9rem;
}

/* 고름 표시도 영역 축을 따른다 — 이 화면의 주 단추가 골드다 */
.contact .chk-wrap .chk-box input:checked + label span {
    border-color:var(--zone);
}
.contact .chk-wrap .chk-box input:checked + label span:before {
    background-color:var(--zone);
}

/* 다른 길로 닿기 — 표가 아니라 곁말이다. 옅은 면에 두 칸으로 세운다 */
.contact .table-box {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
    gap:var(--sp-4) var(--sp-6);
    padding:var(--sp-5) var(--sp-6);
    background:var(--gold-wash);
    border:1px solid var(--gold-line);
    border-radius:var(--r-xl);
    margin:var(--sp-5) 0 0;
}
.contact .table-box > div {
    margin-top:0;
}
.contact .table-box > div strong {
    display:block;
    margin-bottom:var(--sp-1);
    line-height:1.5;
    font-size:var(--fs-md);
    font-weight:700;
    color:var(--ink);
}
.contact .table-box > div p {
    margin:0;
    line-height:1.7;
    font-size:var(--fs-base);
    color:var(--copy);
}
.contact .table-box a {
    color:var(--zone-deep);
    text-decoration:underline;
    text-underline-offset:2px;
}
.contact .table-box a:hover {
    color:var(--zone);
}

.contact .btn-box {
    margin-top:var(--sp-6);
}
.contact .btn-box .btn-primary {
    min-width:12rem;
    min-height:3rem;
}

@media (max-width:767px) {
    /* 좁은 폭에서는 라벨이 칸 위에 선다 — 20% 짜리 라벨 칸에 «Address or Post
       Office Box» 가 다섯 줄로 접히던 자리다 */
    .contact .input-table,
    .contact .input-table tbody,
    .contact .input-table tr,
    .contact .input-table th,
    .contact .input-table td {
        display:block;
        width:100%;
    }
    .contact .input-table colgroup {
        display:none;
    }
    /* 좁은 폭의 옛 규칙은 «.contact .section .input-table …» 네 겹이라
       세 겹으로는 못 이긴다 — 같은 깊이로 맞춰 덮는다 (sub.css:1794-1798) */
    .contact .section .input-table th,
    .contact .section .input-table td {
        padding:0;
    }
    .contact .section .input-table th {
        margin-top:var(--sp-4);
        margin-bottom:var(--sp-2);
        font-size:var(--fs-md);
        font-weight:600;
    }
    .contact .section .input-table tr:first-child th {
        margin-top:0;
    }
    .contact .section .input-table td input,
    .contact .section .input-table td .name,
    .contact .section .input-table td .mail,
    .contact .section .input-table td .wd-100,
    .contact .section .input-table td .lang-box,
    .contact .section .input-table td .lang-box select {
        max-width:none;
    }
    .contact .section .input-table td .mail input {
        width:100%;
    }
    .contact .section .input-table td .name input {
        width:calc((100% - 10px)/2);
    }
    .contact .fb-area {
        padding:var(--sp-4) var(--sp-4);
    }
    .contact .table-box {
        padding:var(--sp-4);
    }
    .contact .sky-box a {
        width:100%;
    }
}