/* 디자인 정리(2026-10): 공개 사이트의 공통 토큰, 알약 내비게이션, 머리말, 카드, 로그인 화면, 은은한 움직임.
   글꼴(Noto Sans KR·Noto Serif KR)과 홈 첫 화면(.hero)은 그대로 둔다. 되돌리려면 이 파일의 <link>만 빼면 된다. */
:root {
  --live: #a8e04a; --ember: #d4691c;
  --r-lg: 24px; --r-md: 16px; --r-sm: 10px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --glass: rgba(255, 255, 255, .86); --line-soft: rgba(18, 38, 63, .09);
  --lift: 0 18px 40px -22px rgba(18, 38, 63, .45);
}

/* ---------- 왼쪽 메뉴 레일(데스크톱): 평소에는 배경 없이 아이콘만 떠 있고, 올리면 차분한 유리 패널로 펼쳐지며, 올린 항목의 하위 메뉴가 이어서 펼쳐진다 ---------- */
.rl-ic { display: none; }
.rail-member { display: none; }
@media (min-width: 900px) {
  :root { --rail-w: 64px; --rail-open: 300px; --glass-nav: rgba(18, 34, 56, .9); }
  /* 아이콘이 본문 왼쪽 여백에 놓이도록, 좁은 화면에서만 본문을 조금 오른쪽으로 민다 */
  .wrap { width: min(1120px, 100% - var(--rail-w) - 40px); margin-left: max(calc(var(--rail-w) + 20px), calc((100% - 1120px) / 2)); margin-right: auto; }
  .site-header { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); height: auto; z-index: 80; background: transparent; border: 0; border-radius: 0 26px 26px 0; backdrop-filter: none; overflow: hidden; pointer-events: none; transition: width .65s var(--ease), background .55s var(--ease), box-shadow .55s var(--ease); }
  .site-header:hover, .site-header:focus-within { width: var(--rail-open); background: var(--glass-nav); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); box-shadow: 22px 0 56px -30px rgba(0, 0, 0, .5); pointer-events: auto; }
  .site-header .bar { position: static; width: var(--rail-open); max-width: none; margin: 0; height: 100%; min-height: 0; padding: 14px 10px 20px; flex-direction: column; align-items: flex-start; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden auto; scrollbar-width: none; animation: none; }
  .site-header .bar::-webkit-scrollbar { display: none; }
  .brand { margin: 0 0 14px; padding: 0 2px; gap: 14px; height: 48px; color: #fff; pointer-events: auto; }
  .brand-mark { width: 40px; height: 40px; flex: none; }
  .brand-text { display: flex; opacity: 0; transition: opacity .4s var(--ease); }
  .brand-text strong { color: #fff; font-size: 18px; }
  .site-header:hover .brand-text, .site-header:focus-within .brand-text { opacity: 1; transition-delay: .2s; }
  .primary { display: block; flex: none; width: 100%; }
  .primary > ul { flex-direction: column; gap: 8px; }
  /* 접힌 모습: 동그란 아이콘 하나씩 */
  .primary > ul > li > a, .rail-member a, .actions .btn { display: flex; align-items: center; gap: 16px; width: 44px; height: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; overflow: hidden; white-space: nowrap; color: #fff; font-size: 16.5px; font-weight: 600; background: rgba(18, 34, 56, .82); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55); pointer-events: auto; transition: width .65s var(--ease), background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), color .4s; }
  .rl-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; }
  .rl-t { opacity: 0; transition: opacity .4s var(--ease); }
  .primary a[aria-current] { color: var(--gold-bright); border-color: rgba(223, 189, 120, .8); }
  /* 펼친 모습: 아이콘 뒤 동그라미는 사라지고 글자가 나타난다 */
  .site-header:hover .primary > ul > li > a, .site-header:focus-within .primary > ul > li > a, .site-header:hover .rail-member a, .site-header:focus-within .rail-member a, .site-header:hover .actions .btn, .site-header:focus-within .actions .btn { width: 100%; background: transparent; border-color: transparent; box-shadow: none; }
  .site-header:hover .primary > ul > li:hover > a, .site-header:focus-within .primary > ul > li:focus-within > a { background: rgba(255, 255, 255, .09); }
  .site-header:hover .primary a[aria-current] { border-color: transparent; background: rgba(223, 189, 120, .1); }
  .site-header:hover .rl-t, .site-header:focus-within .rl-t { opacity: 1; transition-delay: .22s; }
  /* 후원하기는 로고 바로 아래(맨 위), 로그인은 맨 아래에 둔다. .actions 는 자리만 비워 두고 안의 단추를 레일에 직접 배치한다 */
  .actions { display: contents; }
  .brand { order: 0; } .actions .btn-gold { order: 1; margin-bottom: 14px; } .primary { order: 2; } .rail-member { order: 3; display: block; width: 100%; margin-top: 8px; } .rail-member a { margin-bottom: 8px; }
  .actions .btn-auth { order: 4; margin-top: auto; }
  .actions .btn-gold { background: var(--gold); border-color: var(--gold); }
  .site-header:hover .actions .btn-gold, .site-header:focus-within .actions .btn-gold { background: var(--gold); border-color: var(--gold); }
  .site-header:hover .actions .btn-auth { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }

  /* 하위 메뉴: 레일 안에서 천천히 펼쳐진다(중분류 → 마우스를 올리면 소분류) */
  .primary .sub { display: block; position: static; min-width: 0; max-height: 0; overflow: hidden; opacity: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; animation: none; transition: max-height .75s var(--ease), opacity .5s var(--ease); }
  .primary .sub::before { display: none; }
  .primary .has-sub:hover > .sub, .primary .has-sub:focus-within > .sub { max-height: 680px; opacity: 1; transition-delay: .1s; }
  .primary .sub a { padding: 8px 12px 8px 52px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .82); border-radius: 10px; white-space: nowrap; box-shadow: none; background: transparent; }
  .primary .sub a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
  .primary .sub a[aria-current] { color: var(--gold-bright); background: transparent; box-shadow: none; }
  .primary .sub .lv2 > a { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
  .primary .sub .lv2 > .nav-l3 { display: block; max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height .7s var(--ease), opacity .5s var(--ease); }
  .primary .sub .lv2:hover > .nav-l3, .primary .sub .lv2:focus-within > .nav-l3 { max-height: 320px; opacity: 1; transition-delay: .08s; }
  .primary .sub .nav-l3 a { padding: 6px 12px 6px 72px; font-size: 14px; color: rgba(255, 255, 255, .74); }
  .primary .sub .lv2 > a:not(:only-child)::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .5s var(--ease), opacity .3s; }
  .primary .sub .lv2:hover > a::after, .primary .sub .lv2:focus-within > a::after { transform: rotate(225deg) translateY(-2px); opacity: 1; }
  #main > :first-child:not(.page-head):not(.hero) { margin-top: 40px; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .site-header { animation: rail-in 1s var(--ease) both; }
}
@keyframes rail-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* 푸터: 하위 메뉴는 접어 두고, 마우스를 올린 항목만 펼친다(마우스가 없는 기기에서는 모두 보인다) */
@media (hover: hover) and (min-width: 900px) {
  .foot-cols .nav-l3 { max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height .65s var(--ease), opacity .45s var(--ease); }
  .foot-cols .lv2:hover > .nav-l3, .foot-cols .lv2:focus-within > .nav-l3 { max-height: 240px; opacity: 1; }
  .foot-cols .lv2 > a:not(:only-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .5s var(--ease), opacity .3s; }
  .foot-cols .lv2:hover > a::after, .foot-cols .lv2:focus-within > a::after { transform: rotate(225deg) translateY(-2px); opacity: 1; }
}

/* ---------- 머리말: 첫 화면과 같은 높이의 그라데이션이 배경에 깔리고, 아래 바탕색으로 자연스럽게 스며든다 ---------- */
.page-head .eyebrow, .sec-head .eyebrow, .mission .eyebrow { display: none; }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.15; letter-spacing: -.02em; animation: head-in 1.1s var(--ease) both; }
.page-head .lead { max-width: 52ch; animation: head-in 1.1s .15s var(--ease) both; }
.crumbs ol { margin-bottom: 14px; }
@keyframes head-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .page-head { background: linear-gradient(180deg, var(--ivory) 0%, #fffdf8 100%); border-bottom: 0; padding: 28px 0 28px; } }
@media (min-width: 900px) {
  .page-head { background: linear-gradient(180deg, #2a0d02 0%, #4a1904 26%, #8a380b 52%, #c4621a 74%, #efc29b 90%, #fffdf8 100%); border-bottom: 0; padding: 96px 0 64px; }
  .page-head + .section { padding-top: clamp(24px, 3vw, 36px); }
  .page-head h1 { color: #fff; text-shadow: 0 2px 24px rgba(42, 13, 2, .35); }
  .page-head .lead { color: rgba(255, 244, 232, .96); text-shadow: 0 1px 14px rgba(42, 13, 2, .45); }
  .page-head .crumbs ol, .page-head .crumbs a, .page-head .crumbs li + li::before { color: rgba(255, 236, 214, .82); }
  .page-head .crumbs [aria-current] { color: #fff; }
}

/* ---------- 버튼·카드 공통 ---------- */
.btn { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s, border-color .35s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.card { border-radius: var(--r-lg); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s, background .35s; }
.link-card:hover { box-shadow: var(--lift); }

/* ---------- 홈 두 가지 핵심 사역: 이름과 한 줄만 보이고, 눌러서 펼치면 자세히 ---------- */
.missions { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .missions { grid-template-columns: 1fr 1fr; } }
.home .scene-missions .mission { display: block; min-height: 0; padding: 26px 0 0; border: 0; border-top: 2px solid var(--gold-bright); border-radius: 0; background: none; color: #fff; overflow: visible; }
.home .scene-missions .mission:hover { box-shadow: none; transform: none; }
.mission summary { list-style: none; cursor: pointer; display: block; border-radius: 8px; }
.mission summary::-webkit-details-marker { display: none; }
.mission summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; }
.home .scene-missions .mission h3 { margin: 0 0 12px; color: #fff; font-size: clamp(44px, 7vw, 84px); line-height: 1.1; letter-spacing: -.025em; }
.home .scene-missions .m-line { margin: 0 0 22px; color: rgba(255, 255, 255, .88); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.6; }
.m-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 999px; color: #fff; font-weight: 700; font-size: 15px; transition: background .35s var(--ease), border-color .35s; }
.m-open::after { content: '+'; font-size: 20px; line-height: 1; }
.mission[open] .m-open::after { content: '\2212'; }
.mission summary:hover .m-open { background: rgba(255, 255, 255, .14); border-color: #fff; }
.m-more { padding-top: 22px; }
.home .scene-missions .m-more p { margin: 0 0 14px; color: rgba(255, 255, 255, .9); font-size: 17px; line-height: 1.7; }
.home .scene-missions .m-more ul { margin: 0 0 20px; padding-left: 1.1em; color: rgba(255, 255, 255, .88); font-size: 16px; line-height: 1.7; }
.home .scene-missions .m-more .more { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-bright); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .m-more { animation: m-in .45s var(--ease); } }
@keyframes m-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 실행전략(순서가 있는 내용): 번호를 둥근 표식으로 ---------- */
.steps li { border: 1px solid var(--line); border-top: 0; border-radius: var(--r-lg); background: var(--ivory); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.steps li:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.steps b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(184, 137, 58, .6); letter-spacing: 0; color: var(--gold); }

/* ---------- 사역 카드: 폴더 모양(탭이 달린 카드) ---------- */
.min-cards { gap: 28px 18px; padding-top: 14px; }
.min-cards .link-card { position: relative; border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); border-color: var(--line); }
.min-cards .link-card::before { content: ""; position: absolute; left: -1px; top: -15px; width: 42%; height: 16px; border-radius: 14px 14px 0 0; background: var(--tab, linear-gradient(120deg, #1f6f78, #12263f)); }
.min-cards .link-card::after { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 5px; background: var(--tab, linear-gradient(120deg, #1f6f78, #12263f)); }
.min-cards .link-card:nth-child(4n+2) { --tab: linear-gradient(120deg, #8a380b, #d4691c); }
.min-cards .link-card:nth-child(4n+3) { --tab: linear-gradient(120deg, #6a5524, #b8893a); }
.min-cards .link-card:nth-child(4n+4) { --tab: linear-gradient(120deg, #2c3f6e, #5d4a8a); }
.min-cards .link-card h3 { margin-top: 4px; }

/* ---------- 게시판 ---------- */
.bd-list { border-top-width: 1.5px; }
.bd-list li { transition: background .2s; }
.bd-list li:hover { background: rgba(250, 246, 238, .8); }
.bd-card { border-radius: var(--r-lg); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.bd-card:hover { transform: translateY(-3px); box-shadow: var(--lift); }

/* ---------- 로그인·가입 ---------- */
.auth-card { border-radius: 26px; background: #fff; box-shadow: var(--lift); border-color: var(--line); }
.form-plain .field input, .auth-card .field input { height: 50px; border-radius: 14px; border-color: #d9d3c4; transition: box-shadow .2s, border-color .2s; }
.form-plain .field input:focus, .auth-card .field input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(223, 189, 120, .45); }
.social-btn { border-radius: 14px; min-height: 50px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.social-btn:hover { transform: translateY(-1px); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.pw-meter i { height: 5px; border-radius: 3px; background: #e3e1da; transition: background .25s; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: #e5484d; } .pw-meter[data-s="2"] i:nth-child(-n+2) { background: #e08a1f; }
.pw-meter[data-s="3"] i:nth-child(-n+3) { background: #b8a72f; } .pw-meter[data-s="4"] i { background: #2f9e5b; }
.pw-lvl { margin: 8px 0 0; font: 700 14px/1.4 var(--sans); color: var(--muted); }
.pw-chk { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.pw-chk li::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #c8c2b2; margin-right: 9px; vertical-align: -2px; transition: background .2s, border-color .2s; }
.pw-chk li.ok { color: var(--ink); } .pw-chk li.ok::before { background: #2f9e5b; border-color: #2f9e5b; }

/* ---------- 은은한 등장: 카드 묶음이 화면에 들어올 때 한 번만(motion.js) ---------- */
.rv { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .page-head h1, .page-head .lead, body:not(.home) .sub { animation: none; }
  .btn, .card, .missions .mission, .steps li, .bd-card { transition: none; }
}

/* ---------- 홈: 헤더가 첫 화면 위에 겹쳐 떠 있다(첫 화면 내용 위치는 그대로) ---------- */
@media (min-width: 900px) { body.home .hero-concept { min-height: 100svh; padding-top: 72px; } }

/* ---------- 왼쪽 메뉴: 제목과 항목의 글꼴 크기를 맞춘다 ---------- */
.side-title { font: 700 15px/1.5 var(--sans); letter-spacing: 0; margin: 0 0 4px; }
.side-title a { display: block; padding: 6px; }

/* 첫 화면 제목: 두 줄 사이를 조금 더 띄운다 */
.hero-concept .hc-title em { display: inline-block; margin-top: .2em; }
/* 좁은 화면: 출처 문구(북한이탈주민 제외까지)가 잘리지 않고 줄바꿈된다 */
@media (max-width: 640px) { .hero-concept .hc-src { white-space: normal; max-width: 92vw; margin-inline: auto; line-height: 1.55; text-wrap: balance; } }
/* 비전 숫자: 좁은 데스크톱 폭에서도 "1,000만"이 두 줄로 갈라지지 않게 */
.vision-figure strong { white-space: nowrap; font-size: clamp(26px, 3.8vw, 48px); }

/* 레일이 펼쳐질 때 화면을 덮지 않고 오른쪽으로 밀어낸다(펼친 폭 - 접힌 폭만큼). 오른쪽 끝은 잘리고 가로 스크롤은 생기지 않는다 */
@supports selector(:has(a)) {
  @media (min-width: 900px) {
    body { overflow-x: clip; }
    body > main, body > .site-footer, body > .notice-bar { transition: transform .65s var(--ease); }
    body:has(.site-header:hover) > main, body:has(.site-header:focus-within) > main,
    body:has(.site-header:hover) > .site-footer, body:has(.site-header:focus-within) > .site-footer,
    body:has(.site-header:hover) > .notice-bar, body:has(.site-header:focus-within) > .notice-bar { transform: translateX(calc(var(--rail-open) - var(--rail-w))); }
    .site-header:hover, .site-header:focus-within { background: rgba(18, 34, 56, .97); }
  }
}
@media (prefers-reduced-motion: reduce) { body > main, body > .site-footer, body > .notice-bar { transition: none; } }

/* ---------- 왼쪽 메뉴 폭: 로고 왼쪽 여백과 글자 오른쪽 여백이 같도록 맞춘다(모두 10px) ---------- */
@media (min-width: 900px) {
  :root { --rail-open: 232px; }
  .brand { padding: 0; }
  .primary > ul > li > a, .rail-member a, .actions .btn { justify-content: flex-start; }
  .primary .sub a { white-space: normal; padding-right: 10px; }
  .primary .sub .nav-l3 a { padding-right: 10px; }
}

/* ---------- 밑줄은 쓰지 않는다. 눌러야 하는 글은 칩(둥근 단추) 모양으로 ---------- */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
main :is(p:not(.side-title), .lead, .note, .hint, .prose li, dd, td) a:not([class]), main .prose a:not([class]), .auth-alt a, .auth-card p a, .hint a { display: inline; padding: .06em .65em; border-radius: 999px; background: rgba(31, 111, 120, .1); color: #14545c; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .35s var(--ease), color .35s var(--ease); }
main :is(p:not(.side-title), .lead, .note, .hint, .prose li, dd, td) a:not([class]):hover, main .prose a:not([class]):hover, .auth-alt a:hover, .auth-card p a:hover, .hint a:hover { background: rgba(31, 111, 120, .2); color: var(--navy); }
.band-navy :is(p, .lead, .note, li) a:not([class]) { background: rgba(255, 255, 255, .14); color: var(--gold-bright); }
.steps a { display: inline-flex; align-items: center; margin: 0 8px 8px 0; padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: #14545c; font-weight: 700; transition: background .35s var(--ease), border-color .35s; }
.steps a:hover { background: var(--teal-soft); border-color: #b9d4d4; }
.crumbs a { display: inline-block; padding: 1px 10px; border-radius: 999px; background: rgba(18, 38, 63, .06); transition: background .35s var(--ease); }
.crumbs a:hover { background: rgba(18, 38, 63, .12); }
.crumbs ol { gap: 4px 6px; align-items: center; }
@media (min-width: 900px) { .page-head .crumbs a { background: rgba(255, 255, 255, .14); } .page-head .crumbs a:hover { background: rgba(255, 255, 255, .24); } }
.linklike { background: rgba(31, 111, 120, .1); padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.foot-copy a, .foot-cols a { transition: color .35s var(--ease); }

/* ---------- 로그인·가입 화면(2026-10 개편): 아이콘 입력 칸, 로그인 유지, 소셜 단추, 글줄 간격 정리 ---------- */
.auth-wrap.one { grid-template-columns: minmax(0, 440px); justify-content: center; }
.auth-card { padding: clamp(24px, 4vw, 34px); }
.auth-card .field { margin-bottom: 16px; }
.auth-card .field label { margin-bottom: 8px; }
.fld-in { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 1px solid #d9d3c4; border-radius: 14px; background: #fff; color: #6b7685; transition: border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s; }
.fld-in:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(223, 189, 120, .45); color: var(--navy); }
.fld-in svg { flex: none; }
.auth-card .field .fld-in input, .form-plain .field .fld-in input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: 400 16.5px/1.4 var(--sans); color: var(--ink); outline: 0; }
.auth-card .field .fld-in input:focus { outline: 0; box-shadow: none; border: 0; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 2px 0 18px; }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--navy); }
.auth-card .auth-forgot { padding: 3px 12px; border-radius: 999px; background: rgba(31, 111, 120, .1); color: #14545c; font-weight: 600; font-size: 14px; transition: background .35s var(--ease); }
.auth-card .auth-forgot:hover { background: rgba(31, 111, 120, .2); }
.auth-go { width: 100%; min-height: 52px; font-size: 16.5px; border-radius: 14px; }
.auth-card .or { margin: 22px 0 18px; }
.social-login { display: grid; gap: 10px; margin: 0; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 16px; border: 1px solid #d9d3c4; border-radius: 14px; background: #fff; color: var(--ink); font: 700 15.5px/1 var(--sans); }
.sb-mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.sb-github { background: #12263f; border-color: #12263f; color: #fff; }
.sb-github:hover { background: #1b3a5e; color: #fff; }
.sb-kakao { background: #fee500; border-color: #fee500; color: #191600; }
.sb-naver { background: #03c75a; border-color: #03c75a; color: #fff; }
.social-btn.is-off { opacity: .5; cursor: not-allowed; }
.social-btn.is-off:hover { transform: none; box-shadow: none; }
.auth-alt { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 24px 0 0; font-size: 15px; color: var(--muted); }
.auth-alt .auth-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--navy); border-radius: 999px; background: transparent; color: var(--navy); font-weight: 700; transition: background .35s var(--ease), color .35s var(--ease); }
.auth-alt .auth-link:hover { background: var(--navy); color: #fff; }

/* ---------- 홈: 첫 화면 아래 구역을 한 화면씩 장면으로, 구역마다 뜻이 있는 색 ---------- */
.home .scene { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: clamp(56px, 9vh, 104px); color: #fff; }
.home .scene > .wrap { position: relative; z-index: 1; }
.home .scene .sec-head h2 { color: #fff; }
.home .scene .sec-head p { color: rgba(255, 255, 255, .88); }
/* 두 가지 핵심 사명: 하늘과 물의 청록 — 첫 화면 주황의 보색 */
.home .scene-missions { background: radial-gradient(900px 480px at 82% 8%, rgba(110, 200, 220, .26), transparent 70%), linear-gradient(165deg, #0a2540 0%, #0f4a63 55%, #17707c 100%); }
/* 비전: 새벽 하늘의 남보라 — 아직 오지 않은 것을 바라봄 */
.home .scene-vision { background: radial-gradient(800px 420px at 18% 0%, rgba(214, 177, 255, .3), transparent 70%), linear-gradient(165deg, #1d1446 0%, #3b2a7a 60%, #553b94 100%); }
/* 전략: 초록 — 깨우고 자라고 열매 맺음 */
.home .scene-strategy { background: radial-gradient(900px 480px at 85% 100%, rgba(150, 230, 120, .24), transparent 70%), linear-gradient(165deg, #0b3524 0%, #17623e 55%, #2c7a45 100%); }
.home .scene-strategy .steps li { border-top-color: var(--gold-bright); }
.home .scene-strategy .steps h3 { color: #fff; }
.home .scene-strategy .steps p { color: rgba(255, 255, 255, .88); }
.home .scene-strategy .steps b { color: var(--gold-bright); }
/* 지금 감당하는 사역: 포도주빛 붉은색 — 섬김과 사랑 */
.home .scene-ministry { background: radial-gradient(900px 480px at 10% 8%, rgba(255, 140, 120, .26), transparent 70%), linear-gradient(165deg, #3d0f1e 0%, #7a1f33 60%, #a8364a 100%); }
.home .scene-ministry .min-h { color: #fff; }
.home .scene-ministry .min-sub { color: rgba(255, 255, 255, .85); }
/* 현장의 소식: 밝은 모래색으로 숨 쉬는 자리 */
.home .scene-news { background: linear-gradient(165deg, #f8f1e4, #eadcc2); color: var(--ink); }
.home .scene-news .sec-head h2 { color: var(--navy); }
.home .scene-news .sec-head p { color: var(--muted); }
/* 함께하기: 호박색 금빛 — 초대와 빛 */
.home .scene-join { background: radial-gradient(900px 480px at 50% 0%, rgba(255, 214, 120, .32), transparent 70%), linear-gradient(165deg, #3a2606 0%, #7b5210 55%, #946413 100%); }
.home .scene-join .card, .home .join .card { border-top-color: rgba(255, 255, 255, .45); }
.home .join .card:hover { background: rgba(255, 255, 255, .12); }
.home .scene-vision .vision-figure > div { border-left-color: rgba(255, 255, 255, .4); }
.home .scene-vision .vision-figure strong { color: var(--gold-bright); }
@media (max-width: 899px) { .home .scene { min-height: 100svh; } }

/* 선교운동 묶음: 코발트 — 청년의 열정과 부르심 */
.home .scene-ministry-move { background: radial-gradient(900px 480px at 88% 6%, rgba(120, 170, 255, .28), transparent 70%), linear-gradient(165deg, #0d2250 0%, #1a3f8a 58%, #2b62b8 100%); }
.home .scene-ministry-move .min-h { color: #fff; }
.home .scene-ministry-move .min-sub { color: rgba(255, 255, 255, .88); }
.home .scene-ministry .min-groups, .home .scene-ministry-move .min-groups { gap: 0; }

/* 북한선교·선교운동 묶음 제목은 한 화면의 주인공이므로 크게 */
.home .scene-ministry .min-h, .home .scene-ministry-move .min-h { margin: 0 0 12px; font-size: clamp(44px, 7vw, 84px); line-height: 1.1; letter-spacing: -.025em; }
.home .scene-ministry .min-sub, .home .scene-ministry-move .min-sub { margin: 0 0 clamp(22px, 4vh, 40px); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.6; }
/* 동역자 및 단체: 자두빛 — 함께 가는 사람들 */
.home .scene-partners { background: radial-gradient(900px 480px at 14% 94%, rgba(236, 150, 214, .26), transparent 70%), linear-gradient(165deg, #35103f 0%, #6a2a72 58%, #8e3f8d 100%); }
.home .scene-partners .sec-head h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1.12; }

/* ---------- 문의 Q&A 게시판: 대표 질문은 펼쳐 보고, 전체 질문은 한 줄 목록 ---------- */
.qna h2 { font: 700 22px var(--serif); margin: 1.6em 0 12px; }
.qna h2 small { font: 600 14px var(--sans); color: var(--muted); }
.qna-note { padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; font-weight: 700; }
.qna-note.ok { background: var(--teal-soft); color: #14545c; }
.qna-note.err { background: #fdecea; color: #8a1f17; }
.qna-feat { margin-bottom: 28px; }
.qna-fq { border: 1px solid var(--line); border-radius: 14px; background: var(--ivory); padding: 0 18px; margin: 0 0 10px; }
.qna-fq summary { cursor: pointer; padding: 14px 0; font-weight: 700; display: flex; gap: 10px; align-items: baseline; list-style: none; }
.qna-fq summary::-webkit-details-marker { display: none; }
.qna-fq[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.qna-tag { display: inline-block; min-width: 2.4em; margin: 0 0 4px; font-weight: 800; color: var(--gold); }
.qna-q p, .qna-a p { margin: 0 0 8px; }
.qna-a { background: #fff; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 10px 0 16px; }
.qna-wait { color: var(--muted); }
.qna-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--navy); }
.qna-list li { border-bottom: 1px solid var(--line); }
.qna a.qna-row { display: grid; grid-template-columns: 52px 1fr auto auto auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 6px; color: inherit; text-decoration: none; }
.qna a.qna-row:hover .qna-ti, .qna a.qna-row:focus-visible .qna-ti { text-decoration: underline; }
.qna-no, .qna-by, .qna-dt { color: var(--muted); font-size: 14px; white-space: nowrap; }
.qna-st { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.qna-st.done { background: var(--teal-soft); color: #14545c; }
.qna-st.wait { background: #f3ede0; color: #7a5716; }
.qna-lock { display: inline-block; font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #eee; color: #555; vertical-align: 1px; }
.qna-pager { display: flex; gap: 6px; justify-content: center; margin: 20px 0 8px; }
.qna .qna-pager a.qna-pg, .qna-pager b { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; }
.qna-pager b { background: var(--navy); color: #fff; border-color: var(--navy); }
.qna-form { max-width: 720px; }
.qna-form .hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.qna-detail .qna-q { margin-bottom: 8px; }
@media (max-width: 640px) { .qna a.qna-row { grid-template-columns: 1fr auto; } .qna-no, .qna-by { display: none; } .qna-dt { grid-column: 1; } }