/* =====================================================================
   지원사업 찾기 — 공용 테마 (디자인 가이드 "밝고 친근한" 스타일)

   모든 화면의 <style> 뒤에 붙는다. 화면마다 쓰던 색 이름(--accent, --panel …)을
   가이드 색에 이어 주므로, 화면 파일은 거의 손대지 않고 한꺼번에 바뀐다.
   ===================================================================== */

:root{
  color-scheme:light;
  /* 가이드 색 (theme.css 원본 그대로) */
  --ink:#10202F; --ink-2:#56626F; --ink-3:#8A939D;
  --paper:#FBF8F2; --sheet:#FFFFFF; --line:#ECE5D8;
  --seal:#0E7C74; --seal-soft:#E4F4EF; --mint:#BFEDE1; --amber:#FBE3BB;
  --risk:#C8102E; --risk-soft:#F8E6E4; --ok:#1F7A5A; --warn:#9A6B12; --warn-soft:#FBF2DE;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,32,47,.04), 0 8px 24px rgba(16,32,47,.07);
  --shadow-hover:0 2px 4px rgba(16,32,47,.05), 0 14px 32px rgba(16,32,47,.12);

  /* 가이드에 없어서 보탠 것 */
  --seal-deep:#0A615B;      /* 청록 버튼을 눌렀을 때 */
  --tint:#FDFBF7;           /* 카드 안의 옅은 칸 */
  --warn-line:#EAD7A8;      /* 알림 상자 테두리 */
  --on-seal:#FFFFFF;        /* 청록·남색 위 글자 */
  --mark-ink:#0E7C74;       /* 로고 안 원화 표시 */

  /* 기존 화면들이 쓰던 이름 → 가이드 색 */
  --ink-soft:var(--ink-2); --ink-faint:var(--ink-3);
  --bg:var(--paper); --panel:var(--tint);
  --accent:var(--seal); --accent-soft:var(--seal-soft); --accent-deep:var(--seal-deep);
  --urgent:var(--risk); --bad:var(--risk);
  --gold:var(--warn); --fill:var(--warn-soft); --fill-ink:var(--warn);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E6ECF2; --ink-2:#A9B7C5; --ink-3:#7C8D9E;
  --paper:#0D1720; --sheet:#15222D; --line:#263645;
  --seal:#5FD3B8; --seal-soft:#123430; --mint:#1D4A43; --amber:#4A3A1E;
  --risk:#F0606E; --risk-soft:#3A1D23; --ok:#4BBF93; --warn:#D7A64A; --warn-soft:#382D15;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.28);
  --shadow-hover:0 2px 4px rgba(0,0,0,.3), 0 16px 34px rgba(0,0,0,.35);
  --seal-deep:#8CE3CF; --tint:#1A2833; --warn-line:#5A4722;
  --on-seal:#062019;        /* 밤에는 청록 위 글자를 아주 진한 녹색으로 */
  --mark-ink:#0D1720;
}

/* ── 바탕 ── */
/* 번짐 배경은 페이지 전체(html)에 깐다. body 폭이 좁은 화면에서도 잘리지 않고,
   요소가 아니라 배경이라 휴대폰에서 가로로 밀리지 않는다. */
html{
  min-height:100%;
  background:
    radial-gradient(620px 620px at calc(50% + 430px) 300px, color-mix(in srgb, var(--mint) 85%, transparent), transparent 70%),
    radial-gradient(460px 460px at calc(50% - 20px) 760px, color-mix(in srgb, var(--amber) 75%, transparent), transparent 70%),
    var(--paper);
  background-repeat:no-repeat; background-color:var(--paper);
}
:root[data-theme="dark"]{background:
    radial-gradient(620px 620px at calc(50% + 430px) 300px, color-mix(in srgb, var(--mint) 60%, transparent), transparent 70%),
    var(--paper); background-repeat:no-repeat; background-color:var(--paper)}
@media(max-width:899px){ :root:not([data-theme="dark"]){background:
    radial-gradient(420px 420px at 100% 280px, color-mix(in srgb, var(--mint) 80%, transparent), transparent 70%),
    radial-gradient(360px 360px at 0% 900px, color-mix(in srgb, var(--amber) 65%, transparent), transparent 70%),
    var(--paper); background-repeat:no-repeat; background-color:var(--paper)} }
body{
  background:transparent;
  color:var(--ink);
  font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{letter-spacing:-.02em}
::selection{background:var(--mint)}

/* ── 머리글: 배경과 아래 선 없이 ── */
header, .topbar{background:transparent; border-bottom:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background .2s, box-shadow .2s}
/* 내려서 읽을 때만 옅은 바탕을 깐다 (맨 위에서는 번짐 배경이 그대로 보이게) */
.gm-scrolled header, .gm-scrolled .topbar{background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line)}
.navdrop{background:var(--sheet); border-bottom:0; box-shadow:var(--shadow-hover); border-radius:0 0 18px 18px}
.navdrop a{color:var(--ink); border-bottom-color:var(--line)}
.navbtn{background:var(--sheet); border-color:var(--line); border-radius:999px}

/* 메뉴는 알약 모양, 지금 보는 곳은 흰 알약 + 그림자 */
.nav-links{gap:2px}
.nav-links a:not(.btn), .topnav a, .topbar a.plain{color:var(--ink); font-weight:600; text-decoration:none;
  padding:7px 13px; border-radius:999px; white-space:nowrap}
.nav-links a:not(.btn):hover, .topnav a:hover, .topbar a.plain:hover{background:var(--sheet); color:var(--ink)}
.nav-links a.on, .topnav a.on, .nav-links a[aria-current="page"], .topnav a[aria-current="page"]{
  background:var(--sheet); color:var(--seal); box-shadow:var(--shadow)}
.nav-links a[href="/login.html"]{border:1px solid var(--line); margin-left:6px}

/* ── 로고 ── */
.brand{color:var(--ink)}
.brand-mark{width:34px; height:34px}
.brand-mark .mk-bg{fill:var(--seal)}
.brand-mark .mk-w{stroke:var(--mark-ink)}
.brand-text{font-weight:800; letter-spacing:-.03em}
.brand-text b{color:inherit; font-weight:800}

/* ── 버튼: 주 버튼은 남색 알약, 마우스를 올리면 청록 ── */
.btn, .submit, .btn-sm, .btn-lg{border-radius:999px}
.btn-primary{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--seal); border-color:var(--seal); color:var(--on-seal)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--seal); color:var(--seal)}
input, select, textarea{border-radius:var(--radius)}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible{outline:2px solid var(--seal); outline-offset:1px}

/* ── 띠처럼 깔던 회색 구역은 걷어내고 크림 바탕을 그대로 쓴다 ── */
.alt{background:transparent; border-top:0; border-bottom:0}

/* 알림 상자 (가이드 02의 노란 알림) */
.disclaimer, .notice, .warn-box{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}

/* ── 낮·밤 전환 ── */
.theme{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px;
  background:var(--sheet); flex:none; margin:0 6px}
.theme button{display:grid; place-items:center; width:32px; height:30px; padding:0; border:1px solid transparent;
  border-radius:999px; background:transparent; color:var(--ink-3); cursor:pointer}
.theme button svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.theme button[aria-pressed="true"]{background:var(--paper); color:var(--ink); border-color:var(--line)}
/* 휴대폰: 머리글을 두 줄로 — 첫 줄 로고·메뉴, 둘째 줄 낮·밤과 시작 버튼 (그림 04) */
@media(max-width:560px){
  header .nav{flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:12px; row-gap:10px}
  header .nav .navbtn{margin-left:auto}
  header .nav-links{order:3; width:100%; justify-content:space-between}
  header .nav-links .theme{margin:0}
}

/* 밤 화면에서 사진·그림이 너무 튀지 않게 */
[data-theme="dark"] img:not([src$=".svg"]){filter:brightness(.92)}

/* =====================================================================
   첫 화면 (index) — 그림 01과 같은 느낌으로
   ===================================================================== */
.hero{border-bottom:0}
.hero h1.two{font-size:clamp(32px,4.2vw,48px); font-weight:800; line-height:1.2; letter-spacing:-.035em; max-width:none}
.hero h1.two em{font-style:normal; display:block; color:inherit}
.hero h1.two em + em{color:var(--seal)}          /* 둘째 줄만 청록 */
.hero .hero-lede{color:var(--ink-2); font-size:17px; line-height:1.75}
.hero .hero-lede b{color:var(--ink)}

/* 약속 알약 — "지금 모집 중 …" */
.live{background:var(--sheet); color:var(--ink-2); box-shadow:var(--shadow); font-size:13px; font-weight:500; padding:7px 15px}
.live .dot{width:6px; height:6px; background:var(--seal)}

/* 검색 상자 — 가장 중요한 행동이라 흰 카드로 */
.hero .quick{background:var(--sheet); border:0; border-radius:20px; box-shadow:var(--shadow); padding:22px 24px}
.quick .qask-or{color:var(--seal)}
.quick-row select, .qask-row input{border-radius:12px; background:var(--sheet); border-color:var(--line); color:var(--ink)}
.quick-row .btn:not(.btn-primary){background:transparent; border:1px solid var(--line); color:var(--ink)}
.quick-row .btn:not(.btn-primary):hover{border-color:var(--seal); color:var(--seal)}
.qres{border-top-color:var(--line)}
.qitem{border:0; border-radius:14px; background:var(--tint); box-shadow:none}

.stat b{color:var(--seal)}

/* 갈림길 — 입구 카드 (첫째만 청록으로 채움) */
.fork{background:transparent; border-bottom:0; padding:8px 0 36px}
.fork-q{text-align:left; font-size:13.5px; font-weight:500; color:var(--ink-3); margin:0 0 12px}
.fork-list{grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:700px){ .fork-list{grid-template-columns:1fr} }
.fk{display:grid; grid-template-columns:auto 1fr auto; column-gap:16px; row-gap:3px; align-items:center;
  padding:20px 22px; border:0; border-radius:20px; background:var(--sheet); color:var(--ink);
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s}
.fk > svg{grid-row:1 / span 3; width:46px; height:46px; padding:11px; border-radius:14px; background:var(--mint); color:var(--seal);
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fk > b{grid-column:2; font-size:18px; font-weight:700; letter-spacing:-.02em; margin:0}
.fk > span, .fk > em{grid-column:2; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.fk > em{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.fk::after{content:"→"; grid-column:3; grid-row:1 / span 3; font-size:20px; font-weight:600; color:var(--ink-3); transition:transform .15s}
.fk:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:transparent}
.fk:hover b{color:inherit}
.fk:hover::after{transform:translateX(3px); color:var(--seal)}
.fk.primary{background:var(--seal); color:var(--on-seal); box-shadow:0 10px 26px -8px color-mix(in srgb, var(--seal) 60%, transparent)}
.fk.primary > span{color:color-mix(in srgb, var(--on-seal) 85%, transparent)}
.fk.primary > svg{background:rgba(255,255,255,.18); color:var(--on-seal)}
.fk.primary::after, .fk.primary:hover::after{color:var(--on-seal)}
[data-theme="dark"] .fk > svg{color:#BFEDE1}
[data-theme="dark"] .fk.primary > svg{background:rgba(6,32,25,.12); color:var(--on-seal)}

/* 오른쪽 시연 — 흰 카드 위의 옅은 민트 무대 */
.hd-stage{background:color-mix(in srgb, var(--mint) 32%, var(--sheet)); border:0; border-radius:20px; box-shadow:var(--shadow)}
.hd-q{border-radius:14px}
.hd-row{border-radius:12px; box-shadow:0 1px 2px rgba(16,32,47,.05)}
.hd-sheet{border-radius:10px}
.hd-line{background:var(--line)}

/* 안쪽 화면은 휴대폰에서 머리글 메뉴(div)를 숨긴다. 낮·밤 전환은 숨기지 않는다 */
.topbar-in > .theme{display:inline-flex !important; gap:2px !important}
@media(max-width:760px){ .topbar-in > .theme{margin-left:auto} .topbar-in > .theme + .navbtn, .topbar-in .navbtn{margin-left:8px} }