/* 회원 · 후원 · 연혁 흐름 (v2). site.css 의 색과 글꼴 변수를 그대로 쓴다. */
.notice-bar { background: var(--gold); color: #fff; font-size: 14px; text-align: center; padding: 8px 0; }
.notice-bar a { color: #fff; font-weight: 700; }
.member-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; }
.member-link.strong { color: var(--teal); }
.member-link:hover { text-decoration: none; }
.primary > ul.mobile-member { display: none; list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
@media (max-width: 899px) { .primary > ul.mobile-member { display: flex; flex-direction: row; gap: 18px; } .primary .mobile-member a { padding: 12px 4px; font-weight: 700; color: var(--teal); } }
.brand-text strong { white-space: nowrap; }
.util-bar { background: var(--ivory); border-bottom: 1px solid var(--line); }
.util-bar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 14px; min-height: 34px; }
.util-bar .member-link { min-height: 34px; font-size: 13px; }
@media (max-width: 899px) { .util-bar { display: none; } }
@media (min-width: 900px) and (max-width: 1100px) { .primary a { padding: 22px 7px; font-size: 15px; } .brand-text small { display: none; } .actions .btn { padding: 0 14px; } }
.primary a { white-space: nowrap; }
.btn.big { min-height: 56px; padding: 0 30px; font-size: 18px; }
.linklike { border: 0; background: none; padding: 0; color: var(--teal); text-decoration: none; cursor: pointer; font: inherit; font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.msg { padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; font-size: 15px; }
.msg.ok { background: #dcefe2; color: #17613a; }
.msg.err { background: #fde8e6; color: #a32119; }

/* 가입·로그인 */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 48px; align-items: start; }
.auth-wrap.one { grid-template-columns: minmax(0, 480px); }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; gap: 28px; } }
.auth-card { background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 4vw, 34px); }
.auth-side { color: var(--muted); }
.auth-side h2 { font: 700 20px var(--serif); }
.auth-side ul { padding-left: 1.2em; }
.auth-alt { margin: 18px 0 0; font-size: 15px; }
.social-login { display: grid; gap: 10px; margin-bottom: 18px; }
.social-btn { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 16px; border: 1px solid #cfc6b3; background: #fff; color: #1c2733; }
.social-btn:hover { box-shadow: var(--shadow); color: #1c2733; }
.sb-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font: 700 14px/1 var(--sans); color: #fff; background: var(--navy); }
.sb-ic.sm { width: 22px; height: 22px; font-size: 12px; }
.sb-google .sb-ic { background: #4285f4; }
.sb-naver .sb-ic { background: #03c75a; }
.sb-kakao { background: #fee500; border-color: #fee500; }
.sb-kakao .sb-ic { background: #191600; color: #fee500; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin: 4px 0 16px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.form-plain .field { margin-bottom: 14px; }
.form-plain .btn { margin-top: 6px; }

/* 내 정보 */
.me-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); align-items: center; }
.me-tabs a { padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; color: var(--ink); background: var(--ivory); border: 1px solid var(--line); }
.me-tabs a[aria-current] { background: var(--navy); color: #fff; border-color: var(--navy); }
.me-tabs .linklike { margin-left: auto; }
.me-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 24px; }
@media (max-width: 860px) { .me-grid { grid-template-columns: 1fr; } }
.stage-card h2 { font: 700 24px/1.4 var(--serif); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; text-align: center; }
.kpis div { background: var(--ivory); border-radius: 12px; padding: 14px 6px; }
.kpis b { display: block; font: 700 28px/1.1 var(--serif); color: var(--navy); }
.kpis span { font-size: 13px; color: var(--muted); }
.kpis.big b { font-size: 40px; }
.plain-list { list-style: none; margin: 0 0 12px; padding: 0; }
.plain-list li { padding: 8px 0; border-bottom: 1px solid #eee7d8; }
.social-list li { display: flex; gap: 10px; align-items: center; }
.ladder { list-style: none; margin: 18px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ladder { grid-template-columns: 1fr; } }
.ladder li { background: #fff; border: 1px solid var(--line); border-top: 4px solid #d9d1bf; border-radius: 12px; padding: 18px; font-size: 15px; line-height: 1.7; }
.ladder li.is-done { border-top-color: var(--teal); background: var(--teal-soft); }
.ladder li.is-now { border-top-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 137, 58, .25); }
.ladder b { font: 700 13px var(--sans); color: var(--gold); letter-spacing: .08em; }
.ladder h3 { font: 700 20px var(--serif); margin: 2px 0 8px; }
.ladder p { margin: 0 0 8px; color: var(--muted); }
.ladder span, .perks span { display: inline-block; font-size: 12px; font-weight: 700; background: var(--ivory); border-radius: 6px; padding: 1px 6px; margin-right: 4px; color: var(--navy); }
.danger-zone { border-color: #e8c4c0; max-width: none; }
.months.wide { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .months.wide { grid-template-columns: 1fr; } }
.months .d { display: block; font-size: 13px; color: var(--teal); }

/* 글: 잠금·댓글·함께 기도 */
.locked { background: var(--ivory); border: 1px dashed #d6ccb6; border-radius: 14px; padding: 28px; text-align: center; }
.locked h2 { font: 700 22px var(--serif); margin: 0 0 12px; }
.comments { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--line); max-width: 720px; }
.comments h2 { font: 700 20px var(--serif); }
.c-list { list-style: none; margin: 0 0 22px; padding: 0; }
.c-list li { padding: 14px 0; border-bottom: 1px solid #eee7d8; }
.c-meta { margin: 0 0 4px; font-size: 14px; }
.c-meta time { color: var(--muted); margin-left: 8px; }
.c-body { margin: 0 0 6px; font-size: 16px; line-height: 1.7; }
.pray-box { background: var(--teal-soft); border-radius: 16px; padding: 22px; margin: 2em 0; max-width: 720px; text-align: center; }
.pray-box p { margin: 0 0 12px; }
.pray-count { font: 700 30px var(--serif); color: var(--navy); }

/* 후원 */
.fund-cta { background: linear-gradient(150deg, #12263f, #1b3a5e); color: #e8eef5; border-radius: 18px; padding: clamp(24px, 4vw, 38px); margin: 0 0 2em; }
.fund-cta h2 { color: #fff; margin-top: 0; }
.fund-cta.wait { background: var(--ivory); color: var(--ink); border: 1px dashed #d6ccb6; }
.fund-cta.wait h2 { color: var(--navy); }

/* 걸어온 길: 흐름 · 집계 · 시대 */
.history { margin-top: 1em; max-width: none; }
.flow { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 0 0 2.4em; padding: 0; }
.flow li { position: relative; padding: 0 6px; }
.flow li::before { content: ""; position: absolute; top: 14px; left: 0; right: 0; border-top: 3px solid var(--line); }
.flow li:first-child::before { left: 50%; }
.flow li:last-child::before { right: 50%; }
.flow a { position: relative; display: block; text-align: center; text-decoration: none; color: var(--ink); }
.flow a::before { content: ""; display: block; width: 14px; height: 14px; margin: 8px auto 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px #fff; }
.flow b { display: block; font: 700 16px var(--serif); color: var(--navy); }
.flow span { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) { .flow { grid-template-columns: repeat(2, 1fr); gap: 14px 0; } .flow li::before { display: none; } }
.hist-over { background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 30px); margin: 0 0 2.6em; }
.hist-over h2 { margin-top: 0; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 22px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; text-align: center; }
.stat-card strong { display: block; font: 700 32px/1.1 var(--serif); color: var(--navy); }
.stat-card small { font: 700 14px var(--sans); color: var(--gold); margin-left: 2px; }
.stat-card span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.stat-card em { display: block; font: 600 12px/1.4 var(--sans); font-style: normal; color: var(--teal); margin-top: 4px; }
.chart { margin: 0; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .grid { stroke: #e6dfd0; stroke-width: 1; }
.chart-svg .tick, .chart-svg .yr { font: 12px var(--sans); fill: #6a7480; }
.chart-svg .yr.minor { fill: #9aa3ab; }
.chart-svg .val { font: 700 12px var(--sans); fill: var(--navy); }
.chart-svg .nodata { fill: none; stroke: #c9c1ae; stroke-dasharray: 4 4; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.legend li::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c, #999); }
.lg-trip { --c: #1f6f78; } .lg-school { --c: #b8893a; } .lg-training { --c: #12263f; } .lg-sent { --c: #7a5aa6; } .lg-leadership { --c: #c4553d; } .lg-night { --c: #4f8a4b; } .lg-center { --c: #3d7ab8; } .lg-center_visit { --c: #8a6d3b; } .lg-none { --c: transparent; }
/* 메뉴 3단: 대(상단) · 중(드롭다운 큰 글씨) · 소(중 아래 들여쓰기) */
.sub ul, .foot-cols ul ul, .side ul ul { list-style: none; margin: 0; padding: 0; }
.sub { min-width: 270px; }
.sub .lv2 > a { font-weight: 600; padding: 8px 14px; }
.sub .nav-l3 { margin: 0 0 4px; }
.sub .nav-l3 a { padding: 4px 14px 4px 30px; font-size: 14px; font-weight: 400; color: var(--muted); }
.sub .nav-l3 a:hover { color: var(--ink); }
.nav-l3 a::before { content: "└ "; opacity: .55; }
.foot-cols .nav-l3 { padding-left: 14px; margin-top: 4px; }
.foot-cols .lv2 > a { font-weight: 600; }
.side .lv2 > a { font-weight: 600; }
.side ul.nav-l3 { border-top: 0; padding-left: 14px; margin-bottom: 6px; }
.side .nav-l3 li { border-bottom: 0; }
.side .nav-l3 a { padding: 7px 6px; font-size: 14px; font-weight: 400; }
.side .nav-l3 a[aria-current] { font-weight: 700; }
@media (max-width: 899px) {
  .side li { border: 0; }
  .side li.lv2, .side ul ul { display: contents; }
  .side a, .side .nav-l3 a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 400; }
  .side .nav-l3 a::before { content: "└ "; }
  .sub .nav-l3 a { padding-left: 24px; }
}
.card-kids { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.card-kids span { display: inline-block; margin-right: 6px; font-weight: 700; color: var(--navy); }
.subpages { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.subpages h2 { margin-top: 0; }
.sub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.min-groups { display: grid; gap: 40px; }
.min-h { font-size: 1.25rem; margin: 0 0 4px; }
.min-sub { margin: 0 0 16px; color: var(--muted, #5c6770); }
.min-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.legend .lg-none::before { border: 1px dashed #aaa; }
.data-table { margin-top: 12px; font-size: 14px; }
.data-table summary { cursor: pointer; color: var(--teal); font-weight: 700; }
.tbl-wrap { overflow-x: auto; }
.data-table table { border-collapse: collapse; width: 100%; margin-top: 8px; }
.data-table th, .data-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; background: #fff; }
.era { padding: 2.2em 0 .4em; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.era header { margin-bottom: 10px; }
.era-no { font: 700 13px var(--sans); letter-spacing: .12em; color: var(--gold); margin: 0 0 6px; }
.era-no span { color: var(--teal); margin-left: 8px; }
.era h2 { font: 700 26px/1.4 var(--serif); margin: 0 0 4px; }
.era-theme { color: var(--muted); margin: 0 0 12px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.chips li { background: var(--teal-soft); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.chips b { color: var(--navy); }
.era-body p { margin-bottom: 1em; }
.era-changes { background: var(--ivory); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; padding: 4px 18px 2px; margin: 1em 0; }
.era-changes h3 { font-size: 15px; margin: 12px 0 4px; color: var(--navy); }
.era-changes ul { margin: 0 0 12px; }
.era-rec { margin: 1em 0; }
.era-rec summary { cursor: pointer; color: var(--teal); font-weight: 700; }
.era-rec ul { list-style: none; padding: 0; margin: 10px 0 0; }
.era-rec li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 5px 0; font-size: 15.5px; }
.tl-ym { font: 700 13px/1.9 var(--sans); color: var(--teal); }
.bridge { margin: 1.2em 0 0; padding: 10px 0 0; color: var(--navy); font: 500 17px/1.7 var(--serif); }
.bridge span { color: var(--gold); margin-right: 6px; }
.prose .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .prose .ladder { grid-template-columns: 1fr; } }
.prose .tbl-wrap { overflow-x: auto; margin: 1.2em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--ivory); }
.fund-list { margin: 2em 0; }
.fund-list h2 { margin-top: 0; }
.funds { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 12px; }
.fund { display: flex; gap: 16px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.fund h3 { margin: 0 0 4px; font-size: 18px; color: var(--navy); }
.fund p { margin: 0 0 6px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.fund .acct { color: var(--ink); background: var(--ivory); border-radius: 8px; padding: 6px 10px; display: inline-block; }
.fund .acct .lbl { font-size: 12px; font-weight: 700; color: var(--gold); margin-right: 6px; }
.fund .btn { flex: none; }
@media (max-width: 600px) { .fund { flex-direction: column; align-items: stretch; } .fund .btn { width: 100%; } }

/* 로고 옆 이름: 한 줄(SEE IT 선교동역회) */
.brand-mark { border-radius: 0; object-fit: contain; }
.brand-text.one { flex-direction: row; }
.brand-text.one strong { font-size: 19px; letter-spacing: .01em; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1100px) { .brand-text.one strong { font-size: 16px; } }
@media (max-width: 420px) { .brand-text.one strong { font-size: 16px; } .brand-mark { width: 34px; height: 34px; } }

/* ---- 머리말 다듬기(2026.10.22): 이름 고딕, 메뉴 글자 키움, 로그인 버튼(남색, 후원하기 금색과 대비) ---- */
.brand-text.one strong { font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.primary > ul > li > a { font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.primary .sub a { font-size: 15.5px; font-weight: 500; }
@media (min-width: 900px) and (max-width: 1100px) { .primary > ul > li > a { font-size: 16px; padding: 22px 7px; } .brand-text.one strong { font-size: 17px; } }
@media (max-width: 899px) { .primary > ul > li > a { font-size: 17px; } }
.btn-auth { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-auth:hover, .btn-auth:focus-visible { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.mobile-cta .btn-auth { color: #fff; }

/* ---- 회원 바로가기: 오른쪽 아래 세로 버튼(스크롤을 따라오고, 마우스를 올리면 이름이 펼쳐짐) ---- */
.member-dock { position: fixed; right: 22px; bottom: 28px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dock-btn { display: flex; align-items: center; flex-direction: row-reverse; gap: 0; height: 52px; min-width: 52px; padding: 0 15px; border-radius: 26px; background: #fff; color: var(--navy); border: 1.5px solid rgba(18, 38, 63, .18); text-decoration: none; box-shadow: 0 10px 26px -8px rgba(18, 38, 63, .45); transition: transform .4s ease, box-shadow .4s ease, background .4s ease, gap .4s ease; }
.dock-ic { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.dock-lb { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 15px; opacity: 0; transition: max-width .45s ease, opacity .35s ease; }
.dock-btn:hover, .dock-btn:focus-visible { transform: translateX(-6px) scale(1.04); background: var(--teal); box-shadow: 0 14px 28px -10px rgba(18, 38, 63, .6); gap: 10px; color: #fff; outline: none; }
.dock-btn:hover .dock-lb, .dock-btn:focus-visible .dock-lb { max-width: 140px; opacity: 1; }
.dock-btn:active { transform: translateX(-6px) scale(.97); }
@media (max-width: 899px) { .member-dock { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); gap: 10px; } .dock-btn { height: 46px; min-width: 46px; padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .dock-btn, .dock-lb { transition: none; } }

/* 동역선교사·동역선교단체 앨범 */
.prose:has(.album) { max-width: none; }
.album { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.album-card { margin: 0; }
.album-card > a, .album-card > .album-static { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.album-card > a:hover, .album-card > a:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); color: var(--ink); }
.al-photo { display: block; aspect-ratio: 4 / 3; background: var(--teal-soft); overflow: hidden; }
.al-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-blank { display: flex; align-items: center; justify-content: center; font: 700 56px/1 var(--serif); color: var(--teal); background: linear-gradient(150deg, var(--teal-soft), var(--ivory)); }
.al-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.al-name { font: 700 19px/1.4 var(--sans); color: var(--navy); }
.al-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.al-tag { font: 600 12.5px/1 var(--sans); padding: 5px 9px; border-radius: 999px; background: var(--ivory); color: var(--teal); border: 1px solid var(--line); }
.al-line { font-size: 15px; line-height: 1.6; color: var(--ink); }
.al-sum { font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.album-card .more { margin-top: auto; padding-top: 8px; font: 700 14px/1.4 var(--sans); color: var(--teal); }
@media (max-width: 520px) { .album { grid-template-columns: 1fr 1fr; gap: 12px; } .al-body { padding: 12px 12px 14px; } .al-name { font-size: 16.5px; } .al-line, .al-sum { font-size: 13.5px; } .al-blank { font-size: 42px; } }

/* 동역선교사 상세 */
.partner .pt-photo { margin: 0 0 1.6em; border-radius: var(--radius); overflow: hidden; max-width: 420px; }
.partner .pt-photo img { width: 100%; display: block; }
.pt-sec { margin: 0 0 2em; }
.pt-sec h2 { font: 700 22px/1.4 var(--serif); margin: 0 0 .6em; padding-bottom: .35em; border-bottom: 2px solid var(--gold); display: inline-block; }
.pt-sum { font-size: 18px; color: var(--navy); }

/* 걸어온 길: 참여 인원 중심 한눈에 보기 */
.ov-sub { font: 700 17px/1.4 var(--sans); color: var(--navy); margin: 22px 0 8px; }
.stat-cards.small .stat-card strong { font-size: 24px; }
.yearworks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.yearworks > li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.mission-stats { padding-top: 6px; margin-top: 24px; border-top: 1px solid var(--line); }
.mission-stats > h3 { color: var(--teal); font-size: 23px; margin: 14px 0; }
.hist-timeline { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 18px; }
.hist-timeline > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.hist-timeline > summary { color: var(--teal); font-weight: 700; cursor: pointer; }
.yw-b .yw-p + .yw-p { margin-top: 8px; }
.yw-p > strong { color: var(--teal); }
.yw-y { font: 700 18px/1.4 var(--serif); color: var(--navy); }
.yw-b p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; line-height: 1.6; }
.yw-p span { color: var(--ink); }
.yw-p b { color: var(--teal); }
.yw-p.none { color: var(--muted); font-size: 13px; }
.yw-w { margin-top: 4px; }
.yw-w span { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--ivory); color: var(--teal); border: 1px solid var(--line); }
.chart-svg .val.works { fill: var(--muted); font-size: 10px; }
@media (max-width: 520px) { .yearworks > li { grid-template-columns: 1fr; gap: 2px; } }
.lg-trip_people { --c: #1f6f78; } .lg-edu_people { --c: #b8893a; } .lg-sent_overseas { --c: #7a5aa6; } .lg-gather { --c: #4f8a4b; } .lg-donors { --c: #8a6d3b; } .lg-grouphome { --c: #12263f; } .lg-kids { --c: #c4553d; } .lg-parcel { --c: #3d7ab8; } .lg-partner { --c: #a05a8a; } .lg-newcomer { --c: #5a8a9a; }
@media (max-width: 520px) { .stat-cards { grid-template-columns: 1fr 1fr; } .stat-card strong { font-size: 26px; } }

/* ---- 홈 첫 화면: 어두운 갈색에서 주황으로 내려오는 바탕, 가운데 정렬 문구, 기울어진 사진 카드 세 장 ---- */
.hero-concept { background: radial-gradient(900px 420px at 50% 100%, rgba(255, 160, 70, .55) 0%, transparent 70%), linear-gradient(180deg, #2a0d02 0%, #4a1904 24%, #8a380b 58%, #d4691c 100%); min-height: calc(100svh - 72px); display: flex; justify-content: center; overflow: hidden; }
.hero-concept .hc-in { position: relative; width: min(1120px, 100% - 40px); display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(48px, 11vh, 120px); }
.hc-count { margin: 0 0 clamp(28px, 5.5vh, 60px); display: flex; flex-direction: column; align-items: center; }
.hc-num { margin: 0; display: flex; align-items: baseline; justify-content: center; color: #ffe9d0; font: 800 clamp(44px, 9.4vw, 124px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hc-num b { display: inline-flex; font-weight: 800; }
.hc-num > span { font-size: .34em; font-weight: 700; color: #ffd2a6; }
.hc-num > .hc-pre { margin-right: .5em; }
.hc-num > b + span { margin-left: .3em; }
.od { display: inline-block; height: 1em; width: .62em; overflow: hidden; text-align: center; }
.od-r { display: flex; flex-direction: column; }
.od-r i { font-style: normal; display: block; height: 1em; line-height: 1; }
.od-sep { display: inline-block; width: .3em; text-align: center; }
.hc-src { margin: clamp(14px, 2.4vh, 26px) 0 0; white-space: nowrap; font: 400 clamp(10px, 1.15vw, 14px)/1.6 var(--sans); color: rgba(255, 233, 208, .72); }
.hc-credit { margin: 0; padding: 8px 16px; background: #d4691c; text-align: center; font: 400 11px/1.6 var(--sans); color: rgba(255, 244, 232, .9); }
.hero-concept .hc-title { font: 800 clamp(30px, 4.6vw, 62px)/1.18 var(--sans); letter-spacing: -.035em; color: #fff; margin: 0; word-break: keep-all; }
.hc-title em { font-style: normal; background: linear-gradient(180deg, #ffd6a8 0%, #fff0dc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hc-cards { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 2.4vw, 32px); width: 100%; margin-top: auto; padding-top: clamp(40px, 8vh, 88px); }
.hc-card { display: block; width: clamp(130px, 19vw, 240px); aspect-ratio: 3 / 4; flex: none; border: clamp(4px, .6vw, 8px) solid #fff3e8; border-bottom: 0; border-radius: 22px 22px 0 0; overflow: hidden; background: #1a1424; box-shadow: 0 -14px 44px rgba(40, 10, 0, .35); transition: transform .35s cubic-bezier(.2, .9, .25, 1); }
.hc-card img, .hc-card svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-c1 { transform: translateY(18%) rotate(-3deg); }
.hc-c2 { transform: translateY(6%); }
.hc-c3 { transform: translateY(18%) rotate(3deg); }
.hc-c1:hover { transform: translateY(12%) rotate(-3deg); } .hc-c2:hover { transform: translateY(0); } .hc-c3:hover { transform: translateY(12%) rotate(3deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-concept .hc-count, .hero-concept .hc-title { animation: hcDrop .5s cubic-bezier(.2, .9, .25, 1) both; }
  .hero-concept .hc-title { animation-delay: .08s; }
  .hero-concept .hc-card { animation: hcRise .6s cubic-bezier(.2, .9, .25, 1) both; }
  .hc-c1 { animation-delay: .12s; } .hc-c2 { animation-delay: .2s; } .hc-c3 { animation-delay: .28s; }
}
@keyframes hcDrop { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes hcRise { from { opacity: 0; margin-top: 60px; } to { opacity: 1; margin-top: 0; } }
@media (max-width: 640px) { .hc-card { width: 30vw; border-radius: 14px 14px 0 0; } .hero-concept { min-height: calc(100svh - 128px); } }

/* ---- 본문 도해(.dg): 흐름·세 갈래·두 기둥·시간표·막대 ---- */
.dg { margin: 28px 0; padding: 24px clamp(16px, 3vw, 28px) 22px; background: #faf6ee; border: 1px solid var(--line); border-radius: 10px; }
.dg > figcaption { font: 700 15px/1.4 var(--sans); color: var(--navy); margin: 0 0 18px; letter-spacing: -.01em; }
.dg h4 { font: 700 16px/1.4 var(--sans); color: var(--navy); margin: 0 0 4px; }
.dg p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.dg-note { margin-top: 16px !important; font-size: 13px !important; color: var(--muted) !important; }
.dg-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 14px/1 var(--sans); margin-bottom: 10px; }

.dg-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(var(--n, 4), 1fr); }
.dg-flow li { position: relative; padding: 16px 14px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.dg-flow li:not(:last-child)::after { content: "›"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); font: 700 26px/1 var(--sans); color: var(--gold); }
.dg-n3 { --n: 3; } .dg-n4 { --n: 4; } .dg-n5 { --n: 5; }
.dg-n5 li { padding: 14px 10px 12px; } .dg-n5 h4 { font-size: 15px; }

.dg-tri .dg-head { text-align: center; padding: 10px 14px; background: var(--navy); color: #fff; border-radius: 8px; font: 700 15px/1.4 var(--sans); }
.dg-tri ul { list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.dg-tri li { position: relative; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 8px; }
.dg-foot { margin-top: 14px !important; text-align: center; font-weight: 600; color: var(--teal) !important; }

.dg-pair { display: grid; grid-template-columns: 1fr minmax(150px, .7fr) 1fr; gap: 12px; align-items: stretch; }
.dg-box { padding: 16px 16px 14px; border-radius: 8px; color: #fff; }
.dg-box h4, .dg-box p { color: #fff; }
.dg-a { background: #1a5a63; } .dg-b { background: #b4561f; }
.dg-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 13px; color: var(--muted); }
.dg-mid i { font: 700 26px/1 var(--sans); color: var(--gold); font-style: normal; }
.dg-base { margin-top: 12px !important; padding: 10px 14px; text-align: center; background: #fff; border: 1px dashed var(--gold); border-radius: 8px; font-weight: 600; color: var(--navy) !important; }

.dg-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 16px; background: var(--navy); color: #fff !important; border-radius: 8px; }
.dg-when b { font: 700 14px/1.4 var(--sans); color: #f1c27c; }
.dg-when span { font-size: 15px; line-height: 1.5; }
.dg-time ol { list-style: none; margin: 18px 0 0; padding: 0 0 0 4px; position: relative; }
.dg-time ol::before { content: ""; position: absolute; left: 18px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.dg-time li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 0 0 18px; }
.dg-time li:last-child { padding-bottom: 0; }
.dg-time .dg-no { margin: 0; position: relative; z-index: 1; }

.dg-chart { width: 100%; height: auto; max-width: 680px; display: block; }
.dg-bl { font: 600 13px var(--sans); fill: var(--ink); }
.dg-bv { font: 700 13px var(--sans); fill: var(--navy); }
.dg-bar { fill: var(--gold); }

@media (max-width: 760px) {
  .dg-flow { grid-template-columns: 1fr; gap: 22px; }
  .dg-flow li:not(:last-child)::after { content: "⌄"; right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); }
  .dg-tri ul { grid-template-columns: 1fr; }
  .dg-pair { grid-template-columns: 1fr; } .dg-mid { flex-direction: row; flex-wrap: wrap; padding: 4px 0; }
}

/* ---- 게시판: 목록형·앨범형 ---- */
.bd-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.bd-list li { display: grid; grid-template-columns: 112px 1fr auto auto; gap: 12px; align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.bd-list time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bd-list a { font: 600 17px/1.5 var(--sans); color: var(--navy); text-decoration: none; }
.bd-list a:hover { text-decoration: none; text-underline-offset: 4px; }
.bd-tag { font: 600 12px/1 var(--sans); color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 3px 8px; }
.bd-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
.bd-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bd-thumb { display: block; aspect-ratio: 16 / 10; background: #e9e1d2; overflow: hidden; }
.bd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.bd-card:hover .bd-thumb img { transform: scale(1.04); }
.bd-thumb .al-blank { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #1a2f55, #1a5a63); color: rgba(255, 255, 255, .85); font: 700 18px var(--sans); letter-spacing: .06em; }
.bd-body { padding: 14px 16px 16px; }
.bd-body .meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.bd-body h3 { font: 700 17px/1.45 var(--sans); margin: 0 0 6px; }
.bd-body h3 a { color: var(--navy); text-decoration: none; }
.bd-body p:not(.meta) { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0; }
@media (max-width: 900px) { .bd-album { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bd-album { grid-template-columns: 1fr; } .bd-list li { grid-template-columns: 1fr auto auto; } .bd-list time { grid-column: 1 / -1; } }

/* ---- 글 복사·이미지 저장 방지(body.protect, 설정 content_protect) ---- */
body.protect { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.protect input, body.protect textarea, body.protect select, body.protect [contenteditable="true"], body.protect .allow-copy { -webkit-user-select: text; user-select: text; }
body.protect img { -webkit-user-drag: none; pointer-events: none; }

.dg-t { display: inline-block; margin-bottom: 2px; font: 700 13px/1.4 var(--sans); color: var(--gold); letter-spacing: .02em; font-variant-numeric: tabular-nums; }