@charset "utf-8";

/* ========== 전체 서브페이지 스타일 (컨텐츠만) ========== */

/* 인사말 */
.greeting-section {display:flex; align-items:flex-start; gap:80px;}
.greeting-media {flex-shrink:0; margin:0; border-radius:20px; overflow:hidden;}
.greeting-thumb {position:relative; width:640px; height:800px; border-radius:20px; overflow:hidden;}
.greeting-thumb img {position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;}
.greeting-content {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:48px;}
.greeting-label-row {display:flex; align-items:center; gap:24px; width:100%;}
.greeting-label {flex-shrink:0; font-family:var(--font-family-en); font-size:18px; font-weight:600; line-height:1.555em; color:var(--color-primary); letter-spacing:-.02em; white-space:nowrap;}
.greeting-line {flex:1 1 0; min-width:0; height:1px; background:var(--color-border);}
.greeting-headline {font-size:32px; font-weight:700; line-height:1.5em; color:var(--color-heading); letter-spacing:-.02em; word-break:keep-all;}
.greeting-body {display:flex; flex-direction:column; gap:24px; width:100%;}
.greeting-intro {font-size:20px; font-weight:600; line-height:1.5em; color:var(--color-heading);}
.greeting-text,
.greeting-thanks {font-size:18px; font-weight:400; line-height:1.555em; color:var(--color-body); word-break:keep-all;}
.greeting-thanks {max-width:448px; line-height:1.667em;}
.greeting-sign {display:flex; align-items:center; gap:16px; font-weight:600; color:var(--color-heading); white-space:nowrap;}
.greeting-role {font-size:18px; line-height:1.555em;}
.greeting-name {font-size:24px; line-height:1.417em;}

/* CI 소개 */
.ci-intro {margin-top:120px;}
.ci-title {margin:0 0 40px; font-size:32px; font-weight:700; line-height:1.375em; color:var(--color-heading); letter-spacing:-.02em;}
.ci-logo {display:flex; align-items:center; justify-content:center; width:100%; min-height:240px; margin:0 0 56px; padding:56px 80px; background:var(--color-bg-soft); border-radius:12px;}
.ci-logo img {width:auto; max-width:min(100%,820px); height:auto; max-height:120px; object-fit:contain;}
.ci-meaning {display:flex; align-items:flex-start; gap:40px;}
.ci-label {flex:0 0 120px; margin:0; font-family:var(--font-family-en); font-size:24px; font-weight:600; line-height:1.3em; color:var(--color-heading); letter-spacing:-.02em; white-space:nowrap;}
.ci-meaning-body {flex:0 1 auto; max-width:100%; margin-left:auto; display:flex; flex-direction:column;}
.ci-heading {margin:0 0 24px; font-size:28px; font-weight:600; line-height:1.571em; color:var(--color-heading); letter-spacing:-.02em; white-space:nowrap;}
.ci-text {margin:0; font-size:18px; font-weight:400; line-height:1.555em; color:var(--color-body); word-break:keep-all;}
.ci-text strong {font-weight:600; color:var(--color-heading);}
.ci-keep {white-space:nowrap;}

/* 연혁 */
.history-intro {position:relative; overflow:hidden; width:100%; min-height:400px; margin-bottom:56px; border-radius:20px; background:#0d1a2d;}
.history-intro-media {position:absolute; inset:0;}
.history-intro-media img {width:100%; height:100%; object-fit:cover;}
.history-intro-overlay {position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,18,30,.84) 0%, rgba(10,18,30,.76) 38%, rgba(10,18,30,.5) 58%, rgba(10,18,30,.15) 78%, rgba(10,18,30,.02) 100%);}
.history-intro-content {position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:16px; width:100%; max-width:640px; min-height:400px; padding:56px 64px;}
.history-intro-since {margin:0; font-family:var(--font-family-en); font-weight:500; line-height:1.4em; letter-spacing:.02em; color:rgba(255,255,255,.72);}
.history-intro-lead {margin:0; font-size:32px; font-weight:700; line-height:1.45em; letter-spacing:-.02em; color:var(--color-white);}
.history-timeline {width:100%; max-width:1120px; margin:0 auto; display:flex; flex-direction:column; gap:80px;}
.history-era {display:grid; grid-template-columns:minmax(160px,260px) 48px minmax(0,1fr); gap:0 40px; align-items:start;}
.history-era-year-col {padding-top:12px; text-align:right;}
.history-era-year {margin:0; font-size:64px; font-weight:700; line-height:1em; letter-spacing:-.03em; color:var(--color-heading);}
.history-era.is-active .history-era-year {color:var(--color-heading);}
.history-era-phase {margin:14px 0 0; font-size:18px; font-weight:500; line-height:1.4em; color:#ababab;}
.history-era-axis {position:relative; display:flex; justify-content:center; min-height:100%; padding-top:24px;}
.history-era-line {position:absolute; top:40px; bottom:0; left:50%; width:1px; margin-left:-.5px; background:#e3e3e3;}
.history-era:not(:last-child) .history-era-line {bottom:-120px;}
.history-era-dot {position:relative; z-index:1; flex-shrink:0; width:12px; height:12px; border:1px solid #333; border-radius:50%; background:var(--color-white);}
.history-era.is-active .history-era-dot {width:22px; height:22px; margin-top:-5px; border:none; background:var(--color-primary); box-shadow:inset 0 0 0 5px #fff;}
.history-era-list {margin:0; padding:16px 0 0;}
.history-era-item {display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; margin:0; padding:0 0 18px; font-size:18px; line-height:1.65em; color:var(--color-body);}
.history-era-item:last-child {padding-bottom:0;}
.history-era-item time {flex-shrink:0; font-weight:500; color:var(--color-heading);}
.history-era-sep {color:#c4c4c4;}
.history-era-item p {margin:0; flex:1; min-width:0;}

/* 설립목적 */
.purpose-mv {padding:100px 32px; background:var(--color-sub);}
.purpose-mv-head {max-width:760px; margin:0 auto; text-align:center;}
.purpose-mv-eyebrow {margin:0 0 14px; font-family:var(--font-family-en); font-weight:600; line-height:1.4em; letter-spacing:.02em; color:var(--color-primary);}
.purpose-mv-title {margin:0; font-size:38px; font-weight:700; line-height:1.38em; letter-spacing:-.03em; color:var(--color-heading);}
.purpose-mv-lead {margin:18px 0 0; font-size:20px; font-weight:400; line-height:1.55em; color:#6e7784;}
.purpose-mv-banner {position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:22px; max-width:920px; margin:44px auto 0; padding:26px 40px; overflow:hidden; border-radius:20px; background:linear-gradient(100deg, #02bc8d 0%, #12c99c 45%, #39cfb4 100%); box-shadow:0 14px 34px rgba(2,188,141,.26);}
.purpose-mv-banner::before,
.purpose-mv-banner::after {content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.1); pointer-events:none;}
.purpose-mv-banner::before {right:60px; bottom:-90px; width:150px; height:150px;}
.purpose-mv-banner::after {right:-40px; top:-70px; width:220px; height:220px;}
.purpose-mv-banner-tag {position:relative; z-index:1; padding:7px 16px; border:1px solid rgba(255,255,255,.55); border-radius:999px; font-size:14px; font-weight:700; line-height:1.4em; color:var(--color-white); white-space:nowrap;}
.purpose-mv-banner-text {position:relative; z-index:1; margin:0; font-size:23px; font-weight:700; line-height:1.45em; letter-spacing:-.03em; color:var(--color-white); text-align:center;}
.purpose-mv-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px; width:100%; max-width:1500px; margin:64px auto 0; padding:0 30px;}
.purpose-mv-card {padding:74px 26px 72px; border:1px solid #e7ecf3; border-radius:20px; background:var(--color-white); text-align:center; box-shadow:0 2px 8px rgba(16,32,58,.04), 0 12px 32px rgba(16,32,58,.06); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;}
.purpose-mv-card:hover {border-color:#cfefe4; box-shadow:0 4px 12px rgba(2,188,141,.1), 0 20px 44px rgba(16,32,58,.12); transform:translateY(-8px);}
.purpose-mv-icon {display:flex; align-items:center; justify-content:center; width:70px; height:70px; margin:0 auto 22px; border:6px solid #fff; border-radius:50%; background:#e6f9f3; box-shadow:0 6px 16px rgba(16,32,58,.07); transition:background .28s ease, box-shadow .28s ease;}
.purpose-mv-icon img {transition:filter .28s ease;}
.purpose-mv-card:hover .purpose-mv-icon {background:var(--color-primary); box-shadow:0 10px 22px rgba(2,188,141,.32);}
.purpose-mv-card:hover .purpose-mv-icon img {filter:brightness(0) invert(1);}
.purpose-mv-num {display:block; margin-bottom:16px; font-size:15px; font-weight:700; line-height:1.4em; letter-spacing:.08em; color:#98a2b0;}
.purpose-mv-card-title {margin:0; font-size:24px; font-weight:700; line-height:1.4em; letter-spacing:-.03em; color:var(--color-heading);}
.purpose-mv-card-desc {margin:18px 0 0; font-size:18px; font-weight:400; line-height:1.75em; color:#6e7784;}

/* 찾아오시는 길 */
.location-row {display:flex; align-items:center; gap:80px;}
.location-map {flex:0 0 760px; width:760px; border:1px solid var(--color-border); border-radius:20px; overflow:hidden; background:var(--color-bg-soft);}
.location-map .root_daum_roughmap,
.location-map .root_daum_roughmap_landing {width:100% !important; max-width:100% !important;}
.location-map .wrap_map {width:100% !important; max-width:100% !important;}
.location-info {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:64px;}
.location-info-head {display:flex; align-items:center; gap:16px;}
.location-info-icon {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:56px; height:56px; border-radius:100px; background:var(--color-primary);}
.location-info-icon img {filter:brightness(0) invert(1);}
.location-info-title {font-size:24px; font-weight:700; line-height:1.417em; color:var(--color-heading); letter-spacing:-.02em;}
.location-info-body {display:flex; flex-direction:column; gap:40px;}
.location-info-address {display:flex; flex-direction:column; gap:16px;}
.location-info-address-main {font-size:24px; font-weight:600; line-height:1.417em; color:var(--color-heading); letter-spacing:-.02em; word-break:keep-all;}
.location-info-address-sub {font-size:18px; font-weight:500; line-height:1.555em; color:var(--color-heading);}
.location-info-contact {display:grid; grid-template-columns:auto 1fr; column-gap:24px; row-gap:16px; margin:0;}
.location-info-contact dt {font-size:18px; font-weight:600; line-height:1.555em; color:var(--color-heading);}
.location-info-contact dd {font-size:18px; line-height:1.555em; color:var(--color-body);}

/* 주요사업 */
.business-lead {max-width:880px; margin:0 auto 80px; font-size:30px; font-weight:700; line-height:1.68em; text-align:center; color:var(--color-heading);}
.business-detail {display:flex; flex-direction:column; gap:80px; margin:0; padding:0;}
.business-detail-item {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; margin:0;}
.business-detail-item.is-reverse .business-detail-media {order:2;}
.business-detail-item.is-reverse .business-detail-content {order:1;}
.business-detail-media {position:relative; margin:0; height:0; padding-bottom:calc(75% - 64px); border-radius:24px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.06);}
.business-detail-media img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.business-detail-content {display:flex; flex-direction:column; gap:16px; padding:16px 0;}
.business-detail-num {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--color-primary); font-family:var(--font-family-en); font-weight:700; line-height:1em; letter-spacing:0; color:var(--color-white);}
.business-detail-title {margin:0; font-size:32px; font-weight:700; line-height:1.35em; letter-spacing:-.02em; color:var(--color-heading);}
.business-detail-desc {margin:0; font-size:20px; font-weight:400; line-height:1.75em; letter-spacing:-.01em; color:var(--color-body);}

/* 후원 안내 */
.donation-btn {display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 26px; border:1px solid transparent; border-radius:999px; font-size:15px; font-weight:700; line-height:1.4em; letter-spacing:-.02em; cursor:pointer; transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;}
.donation-btn:hover {transform:translateY(-2px);}
.donation-btn.is-primary {background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary); box-shadow:0 10px 24px rgba(2,188,141,.26);}
.donation-btn.is-primary:hover {background:var(--color-primary-dark); border-color:var(--color-primary-dark); box-shadow:0 12px 28px rgba(2,188,141,.32);}
.donation-btn.is-ghost {background:var(--color-white); color:var(--color-heading); border-color:#e7ecf3; box-shadow:0 6px 18px rgba(16,32,58,.06);}
.donation-btn.is-ghost:hover {border-color:#bfe7da; color:var(--color-primary-dark);}
.donation-btn.is-outline {background:transparent; color:var(--color-white); border-color:rgba(255,255,255,.35);}
.donation-btn.is-outline:hover {background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55);}
.donation-btn.is-outline img {filter:brightness(0) invert(1);}
.donation-hero {position:relative; overflow:hidden; padding:110px 0 90px; background:var(--color-white);}
.donation-hero::before {content:""; position:absolute; left:50%; top:-220px; width:760px; height:520px; background:radial-gradient(ellipse at center, rgba(2,188,141,.1) 0%, rgba(2,188,141,0) 68%); transform:translateX(-50%); pointer-events:none;}
.donation-hero-inner {position:relative; z-index:1; text-align:center;}
.donation-hero-ring {display:flex; align-items:center; justify-content:center; width:74px; height:74px; margin:0 auto 26px; border-radius:50%; background:#e6f9f3; box-shadow:0 0 0 10px rgba(2,188,141,.06);}
.donation-hero-title {margin:0; font-size:46px; font-weight:700; line-height:1.32em; letter-spacing:-.04em; color:var(--color-heading);}
.donation-hero-title strong {font-weight:700; color:var(--color-primary-dark); white-space:nowrap; background-image:linear-gradient(transparent 70%, rgba(2,188,141,.2) 70%);}
.donation-hero-lead {margin:24px 0 0; font-size:17px; font-weight:400; line-height:1.95em; color:#6e7784;}
.donation-hero-cta {display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:38px;}
.donation-account {padding:70px 0 46px; background:var(--color-sub);}
.donation-account-box {position:relative; display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center; overflow:hidden; padding:52px 56px; border-radius:28px; background:linear-gradient(118deg, #0f1b18 0%, #16332b 55%, #0c2a22 100%);}
.donation-account-box::after {content:""; position:absolute; right:-70px; top:-110px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(2,188,141,.34) 0%, rgba(2,188,141,0) 70%); pointer-events:none;}
.donation-account-info {position:relative; z-index:1;}
.donation-account-label {display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid rgba(125,232,203,.35); border-radius:999px; font-size:13px; font-weight:700; line-height:1.4em; color:#7de8cb;}
.donation-account-num {display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px; margin:18px 0 0; line-height:1.2em;}
.donation-account-bank {font-size:21px; font-weight:600; color:#a9f0da;}
.donation-account-number {font-size:38px; font-weight:700; letter-spacing:-.02em; color:var(--color-white);}
.donation-account-meta {margin:14px 0 0; font-size:15px; line-height:1.8em; color:rgba(255,255,255,.62);}
.donation-account-meta strong {font-weight:700; color:var(--color-white);}
.donation-account-actions {position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; min-width:210px;}
.donation-account-actions .donation-btn {width:100%;}
.donation-account-actions .donation-btn.is-primary:hover {background:#03d4a0; border-color:#03d4a0;}
.donation-use {padding:70px 0 150px; background:var(--color-sub);}
.donation-use-grid {display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border:1px solid #e7ecf3; border-radius:24px; background:var(--color-white); box-shadow:0 2px 8px rgba(16,32,58,.04), 0 12px 32px rgba(16,32,58,.06);}
.donation-use-card {padding:44px 34px; border-right:1px solid #e7ecf3; text-align:center; transition:background .28s ease;}
.donation-use-card:last-child {border-right:0;}
.donation-use-card:hover {background:linear-gradient(180deg,#fff,#f6fcfa);}
.donation-use-icon {display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 20px; border-radius:16px; background:#e6f9f3; transition:background .28s ease, transform .28s ease;}
.donation-use-icon img {transition:filter .28s ease;}
.donation-use-card:hover .donation-use-icon {background:var(--color-primary); transform:translateY(-4px);}
.donation-use-card:hover .donation-use-icon img {filter:brightness(0) invert(1);}
.donation-use-title {margin:0; font-size:19px; font-weight:700; line-height:1.4em; letter-spacing:-.03em; color:var(--color-heading);}
.donation-use-desc {margin:10px 0 0; font-size:15px; font-weight:400; line-height:1.8em; color:#6e7784;}
.donation-toast {position:fixed; left:50%; bottom:34px; z-index:999; padding:13px 22px; border-radius:999px; background:#16181d; color:var(--color-white); font-size:15px; font-weight:600; line-height:1.4em; opacity:0; pointer-events:none; transform:translate(-50%,20px); transition:.3s ease;}
.donation-toast.is-visible {opacity:1; transform:translate(-50%,0);}