/* 시안 «별빛» 미디어교육 화면 CSS 그대로(https://hnart-media.imdsvr.com/15-daylight/) — site.css 뒤에 읽는다 */

/* ═══════════════════════════════════════════════════════════════════
   안 15 · 낮빛 (DAYLIGHT) — 미디어교육
   정본 = 아트디렉션.md §3-E · §2-4(광주식 점층 카드) · §2-8(비활성 버튼은 문장으로)
        · §2-13 · §2-14 + 시안-콘텐츠-대본.md §2-5

   🔴 포스터가 없는 조건의 이 안만의 답 = «그라디언트 머리띠». 썸네일 위에 빛의 띠를 얹고,
      사진이 아예 없는 공모 한 건은 선 SVG 일러스트로 그 자리를 채운다.
   🔴 온라인 신청 기능이 없다 — 「예정」으로 미루지 않고 «현실의 접수 경로»(전화·방문)를 적는다.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF; --bg2:#F1F5FC; --pane:#FFFFFF; --pane2:#F5F8FD;
  --line:#DCE3EF; --line2:#EAEFF7;
  /* 🔴 5판(2026-09-03) — 주색을 «별빛 밤하늘 남색»으로 잡는다.
     사용자: 「그 배경색을 메인컬러로 · 그라데이션도 그걸로」.
     🔴 12안 코발트 hsl(236°) 와 «색상각이 6° 밖에» 안 떨어진다 — 3축 중 색상각은
     겹친다. 갈리는 것은 나머지 둘이다: 명도 27 vs 58 · 채도 56 vs 86.
     12안은 «순백 위 밝은 코발트가 점점이», 15안은 «짙은 남색이 히어로에 모인다».
     흰 글자 대비 — #1E2A6B 13.10:1 · #131C4A 15.9:1 · #4C5BC4 5.89:1 */
  --gl:#3A4A9E;        /* 테두리·링 hsl(230,46%,42%) — 흰 바탕 7.80:1 */
  --g2:#1E2A6B;        /* 🔴 주색 — 칠. hsl(230,56%,27%) — 흰 글자 13.10:1 */
  --gv:#4C5BC4;        /* 램프의 밝은 끝 hsl(232,50%,53%) — 흰 글자 5.89:1 */
  --g1:#1E2A6B;        /* 🔴 글자·선 등급 강조 — 흰 바탕 13.10:1 */
  --ink:#0F1633; --dim:#505D7C; --deep:#06091A;
  /* 🔴 «약간» 이다 — 램프 폭을 좁게 잡는다(#16204F → #2C3A8A · 명도차 한 단).
     넓은 램프는 작은 칩·달력 칸에서 «칸마다 다른 구간»이 잡혀 색이 제각각으로
     보였다. 그래서 이 램프는 «큰 면»에만 쓴다 — 큰 CTA · 켜진 4관 탭.
     🔴 마지막 «20%»만 보라로 넘긴다(#4A2E92 hsl 262°) — 밤하늘이 보라기를 띠는
     그 느낌이다. 80% 까지는 네이비라 색이 흔들리지 않는다.
     흰 글자 대비 = 네 스톱 전부 9.9:1 이상 (15.5 / 13.1 / 10.1 / 9.92) */
  --grad:linear-gradient(100deg, #16204F 0%, #1E2A6B 52%, #2C3A8A 80%, #4A2E92 100%);
  --grad-d:linear-gradient(148deg, #16204F 0%, #1E2A6B 52%, #2C3A8A 80%, #4A2E92 100%);
  --ease:cubic-bezier(.33,1,.68,1);
  --sans:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo',sans-serif;
  --wrap:1440px; --gap:20px; --r:16px; --sec:80px;
}
/* 🔴 4열 격자에서 카드 폭이 331.25px 처럼 «소수점»으로 떨어지면(세로 스크롤바가
   콘텐츠 폭을 1385 로 만든다) 1px 테두리가 두 픽셀에 걸쳐 그려져 칸마다 진하기가
   달라 보인다. 테두리를 box-shadow 링으로 바꾸고 아주 옅은 그림자를 함께 깔아
   가장자리가 «면»으로 읽히게 한다 — 편차가 눈에 걸리지 않는다.
   🔵 12안의 「호버 그림자」와 다르다 — 이건 «쉬는 상태»의 가장자리 처리다 */
:root{ --edge:0 0 0 1px rgba(15,22,51,.10), 0 1px 3px rgba(15,22,51,.045);
        --edge-on:0 0 0 1.5px var(--g1), 0 2px 10px rgba(15,22,51,.07) }
*{box-sizing:border-box}
/* 🔴 스크롤바 자리를 «늘» 비워 둔다 — 사이트맵을 열 때 body 스크롤을 잠그면
   스크롤바가 사라지면서 화면 전체가 그 폭만큼 옆으로 흔들린다 */
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable}
body{margin:0; color-scheme:light; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6; word-break:keep-all;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--g1); outline-offset:2px}
h1,h2,h3,h4{margin:0; color:var(--ink); letter-spacing:-.03em; line-height:1.24}
p,ul,ol,dl{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
b,strong{font-weight:700}

/* 🔴 4관 탭과 로그인·사이트맵을 «한 줄»에 둔다 — 검은 띠 하나가 둘을 다 받는다 */
.sitebar{background:#101010}
.sitebar-in{display:flex; align-items:center; justify-content:space-between; gap:16px}
.sitebar ul{display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none}
/* 🔴 2안과 «같은 높이·같은 글자»로 맞춘다 — padding 9px · 14px · line-height 1.3.
   어두운 띠 위 작은 흰 글자는 서브픽셀 렌더링에서 색이 번져 «깨져» 보인다.
   antialiased 로 끄면 또렷해진다 */
.sitebar{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.sitebar a{display:block; padding:9px 18px; font-size:14px; color:#FFFFFF;
  text-decoration:none; line-height:1.3; white-space:nowrap}
.sitebar ul a:hover{background:#2B2B2B}
/* 🔴 켜진 탭은 «단색»이다. 그라디언트 위 14px 흰 글자는 배경이 자리마다 달라져
   글자 테두리가 뭉갠 것처럼 보인다. 코발트 단색은 흰 글자 5.45:1 이다 */
.sitebar li.on a{background-image:var(--grad); color:#FFFFFF; font-weight:700}
/* 🔴 모바일에서는 로그인·사이트맵 줄을 걷는다 — 좁은 화면에 «머리»가 세 줄이 된다.
   대신 「메뉴」 버튼이 사이트맵(전체 메뉴)을 연다. 로그인은 그 안에 둔다 */
@media(max-width:760px){ .sitebar .util{display:none} }
.smap-login{display:none; margin-left:auto; margin-right:10px; border:0; cursor:pointer;
  background:var(--pane2); box-shadow:inset 0 0 0 1.5px var(--line2); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:700; padding:12px 20px; border-radius:999px}
.smap-login:hover{box-shadow:inset 0 0 0 1.5px var(--g1); color:var(--g1)}
@media(max-width:760px){ .smap-login{display:inline-flex} }
@media(max-width:760px){
  .sitebar-in{flex-wrap:wrap; gap:0}
  /* 🔴 다섯 관을 390px 에 욱여넣으면 4 + 1 로 접혀 마지막 하나가 혼자 한 줄을 먹는다.
     접지 말고 한 줄로 두고 옆으로 넘긴다 — 흘리는 것은 이 줄뿐이라 body 는 그대로다 */
  .sitebar ul{flex:1 1 100%; order:2; flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none}
  .sitebar ul::-webkit-scrollbar{display:none}
  .sitebar a{padding:8px 12px; font-size:12px}
  .sitebar li{flex:0 0 auto}
  .util{order:1; flex:1 1 100%; justify-content:flex-end; padding:4px 0 2px}
}

/* 검은 띠 «위»의 유틸 — 탭보다 한 톤 죽여 둘의 역할을 가른다 */
.util{display:flex; align-items:center; gap:2px; flex:none}
.util button,.util a{background:none; border:0; font-family:var(--sans); font-size:14px;
  color:rgba(255,255,255,.78); cursor:pointer; padding:0 11px; line-height:1;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:color .3s ease}
.util button:hover,.util a:hover{color:#FFFFFF}
.util svg{width:14px; height:14px}
.util .sep{color:rgba(255,255,255,.34); font-size:10px}
#loginbox{display:none; background:var(--pane); border-bottom:1px solid var(--line)}
#loginbox.on{display:block}
#loginbox .wrap{padding:18px 20px; font-size:15px; line-height:1.7; color:var(--dim)}
#loginbox b{color:var(--ink)}
#loginbox a{color:var(--g1); font-weight:700}

/* ═══ 사이트맵 — 전체 메뉴 한 판 ═══ */
/* 🔴 흐름 안에 두면 열 때마다 아래 내용이 통째로 밀린다. 화면 «위»를 덮는다.
   z-index 는 sticky 머리(40)보다 위여야 머리까지 덮는다 */
/* 🔴 «위에서 내려오는» 서랍이다 — 화면 위 가장자리에 붙어 내려오고, 아래는 가림막이다.
   가림막을 누르면 닫힌다 */
#sitemap{position:fixed; inset:0; z-index:80; background:rgba(15,22,51,.44);
  overflow-y:auto; overscroll-behavior:contain; display:none}
/* 🔴 부드럽게 열린다 — display 는 전이가 안 되므로 «켜질 때» 애니메이션을 건다.
   가림막은 옅어지며 나타나고, 판은 살짝 위에서 내려오며 커진다.
   닫을 때는 즉시 사라진다 — 닫는 동작은 기다릴 이유가 없다 */
#sitemap.on{display:block; animation:smapVeil .22s ease both}
#sitemap.on .smap{animation:smapPanel .3s var(--ease) both}
@keyframes smapVeil{from{opacity:0} to{opacity:1}}
/* 위에서 «내려온다». 🔴 이동 거리를 «묶어» 둔다 — -100% 로 두면 모바일에서 판이
   1086px 라 화면 밖 저 위에서 날아오고, 애니메이션이 중간에 멈추면 그대로 안 보인다.
   32px 만 밀어도 «내려오는» 것으로 읽히고, 최악의 경우에도 제자리 근처에 있다 */
@keyframes smapPanel{from{transform:translateY(-32px); opacity:0}
                     to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){
  #sitemap.on,#sitemap.on .smap{animation:none}
}
.smap{background:var(--bg); border-radius:0 0 24px 24px;
  box-shadow:0 20px 56px rgba(15,22,51,.24); padding:26px 0 52px; overflow:hidden}
.smap-top,.smap nav{max-width:var(--wrap); margin:0 auto;
  padding-left:20px; padding-right:20px}
.smap-top{display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-bottom:24px; border-bottom:1px solid var(--line)}
.smap-ttl{font-size:14px; font-weight:800; letter-spacing:.18em; color:var(--g1)}
.smap-x{width:52px; height:52px; flex:none; border:0; border-radius:999px; cursor:pointer;
  background:var(--pane2); box-shadow:inset 0 0 0 1.5px var(--line2);
  font-family:var(--sans); font-size:22px; line-height:1; color:var(--ink);
  transition:box-shadow .3s ease, color .3s ease}
.smap-x:hover{box-shadow:inset 0 0 0 1.5px var(--g1); color:var(--g1)}
.smap nav{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:40px 32px;
  align-content:start; padding-top:34px}
.smap h3{font-size:24px; font-weight:800; letter-spacing:-.035em; padding-bottom:16px;
  border-bottom:2px solid var(--ink)}
.smap h3 a:hover{color:var(--g1)}
.smap ul{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:15px}
.smap li a{font-size:18px; color:var(--dim); letter-spacing:-.02em}
.smap li a:hover{color:var(--g1)}
@media(max-width:1080px){ .smap nav{grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 26px} }
@media(max-width:680px){
  .smap{padding:18px 0 36px; border-radius:0 0 18px 18px}
  .smap-top,.smap nav{padding-left:14px; padding-right:14px}
  .smap nav{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; padding-top:26px}
  .smap h3{font-size:20px} .smap li a{font-size:16px}
}
@media(max-width:400px){ .smap nav{grid-template-columns:1fr} }
.head{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:40}
.head .wrap{display:flex; align-items:center; gap:26px; height:80px}
/* 🔴 로고 = 재단 워드마크(실물) + 세로 선 + 센터 이름. 4관 탭이 이미 「재단 아래 다섯 관」을
   말하고 있으므로 머리도 같은 구조로 읽힌다. 워드마크는 실제 기관 로고라 형태를 고치지 않는다 */
.ci{display:flex; align-items:center; gap:13px; flex:none}
.ci-org{width:auto; height:29px; flex:none}
.ci-bar{width:1px; height:26px; background:var(--line); flex:none}
.ci-ko{display:block; font-size:18px; font-weight:800; letter-spacing:-.045em; line-height:1.15;
  white-space:nowrap; color:var(--ink)}
.ci-en{display:block; font-size:9px; font-weight:600; color:var(--dim); letter-spacing:.16em; line-height:1.35}
.gnb{display:flex; gap:36px; margin-left:auto}
/* 🔴 주 메뉴는 «가장 먼저 읽히는 글씨»다 — 15px 700 은 로고 옆에서 묻혔다 */
.gnb a{font-size:18px; font-weight:700; letter-spacing:-.02em; padding:10px 0;
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .3s ease, border-color .3s ease}
.gnb a:hover{border-bottom-color:var(--g1); color:var(--g1)}
.gnb a[aria-current]{border-bottom-color:var(--g1); color:var(--g1)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:999px;
  font-family:var(--sans); font-size:13px; padding:8px 14px; cursor:pointer; color:var(--ink)}
#drop{display:none; border-bottom:1px solid var(--line); background:var(--bg2)}
#drop.on{display:block}
#drop a{display:block; padding:14px 0; border-bottom:1px solid var(--line2); font-weight:700}
#drop a:last-child{border-bottom:0}
@media(max-width:980px){ .gnb{display:none} .burger{display:block} .head .wrap{height:60px; gap:10px} }
@media(max-width:420px){ .ci-org{height:24px} .ci{gap:9px} }

/* 🔴 간격을 «위쪽 하나»로만 준다. 예전 방식(양쪽 패딩 + 인접 선택자로 위를 0)은
   두 섹션 사이에 다른 요소가 하나만 끼어도 인접이 끊겨 간격이 116 / 232 로 들쌂날쌂했다.
   위쪽에만 주면 무엇이 끼든 항상 같은 간격이 나온다 */
/* 🔴 섹션 사이 여백 = 96px. 근거는 «섹션 안»의 가장 큰 간격이다 —
   제목 → 내용 32px · 카드 사이 20px. 섹션 사이는 그보다 뚜렷이 커야 «다른 덩어리»로
   읽히지만, 128 은 제목 간격의 3.6배라 1440 에서 빈 구멍이 생겼다.
   80 = 32 × 2.5 — 제목 간격(32)의 두 배 반이라 «다른 덩어리»로는 읽히되
   빈 구멍은 생기지 않는다. 카드 사이 20 · 제목 32 · 섹션 80 의 리듬이다 */
.sec{padding:var(--sec) 0 0}
/* 🔴 바닥 여백은 main 이 «한 번»만 준다 — 섹션이 감싸개 안에 나뉘어 있으면
   :last-child 가 여러 번 맞아 아래 여백이 두 번 붙는다(대관에서 실제로 그랬다) */
main{padding-bottom:var(--sec)}
.sec-h{display:flex; align-items:flex-end; gap:20px; margin-bottom:32px; flex-wrap:wrap}
.sec-h h2{font-size:32px; font-weight:800; margin-top:10px}
/* 🔴 한 줄짜리 안내가 두 줄로 꺾이지 않게 폭을 넓혔다 — 좁은 화면에서는 그대로 접힌다 */
.sec-h .cap{font-size:15px; color:var(--dim); max-width:1120px; margin-top:12px}
.note{font-size:14px; color:var(--dim); margin-top:18px; line-height:1.75}
.note b{color:var(--ink)}

.btn{display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  border:0; box-shadow:inset 0 0 0 1.5px var(--line);
  background:transparent; color:var(--ink); font-family:var(--sans); font-size:15px; font-weight:700;
  padding:13px 24px; cursor:pointer; line-height:1.2; transition:border-color .3s ease, color .3s ease}
.btn:hover{box-shadow:inset 0 0 0 1.5px var(--g1); color:var(--g1)}
.btn:disabled{color:var(--dim); box-shadow:inset 0 0 0 1.5px var(--line2); cursor:default}
.gcta{position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:20px;
  width:min(428px,100%); min-height:74px; padding:14px 28px; border:0; border-radius:999px;
  background-image:var(--grad); color:#FFFFFF; font-family:var(--sans); font-weight:800; font-size:18px;
  cursor:pointer; overflow:hidden; text-align:left}
.gcta::before{content:''; position:absolute; inset:0; border-radius:999px;
  background-image:var(--grad-d); opacity:0; transition:opacity .3s ease}
.gcta > *{position:relative; z-index:1}
.gcta:hover::before{opacity:1}
.gcta small{display:block; font-size:13px; font-weight:700; margin-top:3px}
.gcta .ar{font-size:24px; font-weight:700; flex:none}

.st{display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:-.02em; white-space:nowrap}
.st.on{background:var(--g2); color:#FFFFFF}
/* 🔴 26px 알약의 1px 테두리는 소수점 위치에서 두 픽셀에 걸쳐 흐려진다.
   테두리 대신 1.5px 안쪽 링으로 그어 또렷하게 만든다(레이아웃도 안 밀린다) */
.st.wait{background:var(--pane); box-shadow:inset 0 0 0 1.5px var(--g1); color:var(--g1)}
.st.off{background:var(--pane2); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--dim)}

/* 페이지 머리 */
/* 🔴 배경에 색을 깔지 않는다 — 메인과 같은 규칙(§3-F-4 ③) */
.ph{position:relative; overflow:hidden; padding:56px 0 0}
.ph .bc{font-size:13px; color:var(--dim); font-weight:700}
.ph h1{font-size:clamp(26px,2.4vw,34px); font-weight:800; margin-top:14px; letter-spacing:-.04em}
.ph .cap{font-size:16px; color:var(--dim); margin-top:18px; max-width:920px; line-height:1.75}
/* 흐리고 큰 «떠 있는 빛» — 또렷한 점으로 읽히지 않게 한다 */
.dot{position:absolute; border-radius:50%; background-image:var(--grad);
  opacity:.26; filter:blur(1.5px); pointer-events:none}
.d1{width:18px; height:18px; left:8%;  top:26%; animation:loop1 5s ease-in-out infinite}
.d2{width:11px;  height:11px;  left:52%; top:14%; animation:loop2 3s ease-in-out infinite}
.d3{width:16px; height:16px; left:93%; top:62%; animation:loop3 4s ease-in-out infinite}
.d4{width:12px;  height:12px;  left:31%; top:80%; animation:loop4 10s ease-in-out infinite}
@keyframes loop1{0%,100%{transform:translate(0,0)}   50%{transform:translate(14px,-18px)}}
@keyframes loop2{0%,100%{transform:translate(0,0)}   50%{transform:translate(-16px,12px)}}
@keyframes loop3{0%,100%{transform:translate(0,0)}   50%{transform:translate(-12px,-16px)}}
@keyframes loop4{0%,100%{transform:translate(0,0)}   50%{transform:translate(18px,10px)}}
.floaty{animation:floaty 4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}

/* 🔴 §2-16 로 그라디언트 막대를 걷고 나니 «가는 선»만 남아 칸이 흐려졌다.
   선으로 가르는 대신 각 칸을 «둥근 면»으로 세운다 — 면이 있으면 눈이 먼저 잡는다.
   🔵 §2-16 이 막는 것은 「둥근 카드 + 두꺼운 색선」이지 둥근 카드 자체가 아니다. */
.sum{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:12px; margin-top:34px}
.sum > div{background:var(--pane2); border:0; border-radius:var(--r);
  padding:22px 24px 24px; box-shadow:var(--edge)}
.sum dt{font-size:14px; font-weight:700; color:var(--dim); margin-bottom:12px}
.sum dd{margin:0; font-size:32px; font-weight:800; letter-spacing:-.05em; line-height:1.05}
.sum dd small{font-size:15px; font-weight:700; color:var(--dim); margin-left:5px}
@media(max-width:760px){
  /* 🔴 다섯 칸이 세로로 쌓이면 화면 하나를 먹는다 — 두 열로 접는다.
     아래 border 는 «선으로 가르던» 시절의 잔재라 함께 걷는다 */
  .sum{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .sum > div{padding:16px 16px 18px}
  .sum dt{font-size:13px; margin-bottom:8px}
  .sum dd{font-size:26px}
}

/* ═══ 과정 목록 — 좌 썸네일(머리띠 얹음) / 중 상세 / 우 접수 ═══ */
/* 분류 탭·쪽 넘김(#el)은 붙박이 머리(80px · 980px 이하 60px) 밑으로 내려앉게 — 공지 #nl 처럼 머리 밑 44px(.sec.tight) 띄우고 제목부터.
   이 구역은 위 여백이 --sec 이라 그만큼 덜 띄운다 */
#el{scroll-margin-top:calc(80px - var(--sec) + 44px)}
@media(max-width:980px){ #el{scroll-margin-top:calc(60px - var(--sec) + 44px)} }
.plist{list-style:none; padding:0; margin:0; display:grid; gap:var(--gap)}
.pitem{background:var(--pane); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:border-color .3s ease}
.pitem:hover{border-color:var(--g1)}
.prow{display:grid; grid-template-columns:340px minmax(0,1fr) 290px; gap:0; align-items:stretch}
.pth{position:relative; background:var(--bg2); display:flex; flex-direction:column}
/* 🔴 그라디언트 머리띠 — N잡크루 348×103 */
.pband{background-image:var(--grad-d); color:#FFFFFF; padding:18px 22px 20px; min-height:103px; position:relative}
.pband .k{font-size:11px; font-weight:800; letter-spacing:.16em}
.pband h3{color:#FFFFFF; font-size:22px; font-weight:800; margin-top:8px; letter-spacing:-.04em; max-width:76%}
.pband h3 a{color:inherit; text-decoration:none} .pband h3 a:hover{text-decoration:underline; text-underline-offset:4px}
.pband .st{position:absolute; right:16px; top:16px}
.pband .st.on{background:#FFFFFF; background-image:none; box-shadow:none; color:var(--ink)}
.pband .st.wait{background:var(--deep); border-color:var(--deep); color:#FFFFFF}
.pband .st.off{background:var(--deep); border-color:var(--deep); color:#B9C0D4}
.pth .img{flex:1; min-height:180px; overflow:hidden}
.pth .img img{width:100%; height:100%; object-fit:cover; opacity:.92; transition:opacity .3s ease}
.pitem:hover .pth .img img{opacity:1}
.pth .img.ill{display:grid; place-items:center; padding:14px}
.pth .img.ill svg{width:100%; height:auto; max-height:190px}
/* 정보는 한 열로 — 대상 · 장소 · 기간 · 모집 네 줄(이름 칸 고정 폭, 값은 한 줄). 카드 높이는 사진 칸이 정하니 남는 높이는 세로 가운데로 */
.pmid{padding:24px 26px; border-left:1px solid var(--line2); display:flex; flex-direction:column; justify-content:center}
.pmid dl{display:grid; grid-template-columns:74px minmax(0,1fr); gap:11px 16px; font-size:15px; margin:0}
.pmid dd small{display:block; margin-top:3px; font-size:13px; color:var(--dim)}
.pmid dt{color:var(--g1); font-weight:800; font-size:13px; padding-top:2px}
.pmid dd{margin:0; color:var(--dim)}
.pmid dd b{color:var(--ink)}
.pside{padding:24px 26px; border-left:1px solid var(--line2); background:var(--pane2);
  display:flex; flex-direction:column; gap:10px}
.pside .fee{display:flex; justify-content:space-between; align-items:baseline; font-size:14px;
  color:var(--dim); font-weight:700; padding-bottom:14px; border-bottom:1px solid var(--line)}
.pside .fee b{color:var(--ink); font-size:22px; letter-spacing:-.04em}
.pside .cnt{font-size:14px; color:var(--dim); font-weight:700}
.gauge{display:block; height:6px; border-radius:999px; background:var(--bg2);
  border:1px solid var(--line2); overflow:hidden}
.gauge i{display:block; height:100%; background:var(--g2)}
.pside .left{font-size:14px; color:var(--dim)}
.pside .left b{color:var(--ink); font-size:17px}
.pside .how{font-size:13px; color:var(--dim); line-height:1.7; margin-top:auto; padding-top:12px}
.pside .btn{width:100%; justify-content:center}
@media(max-width:1100px){
  .prow{grid-template-columns:300px minmax(0,1fr)}
  .pside{grid-column:1 / -1; border-left:0; border-top:1px solid var(--line2);
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px 26px}
  .pside .fee{border-bottom:0; padding-bottom:0; gap:10px}
  .pside .gauge{flex:1 1 160px}
  .pside .how{margin:0; padding:0}
  .pside .btn{width:auto}
}
@media(max-width:720px){
  .prow{grid-template-columns:1fr}
  .pmid{border-left:0; border-top:1px solid var(--line2)}
  .pth .img{min-height:150px}
}

/* 단계 넷 */
.steps{list-style:none; counter-reset:s; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:var(--gap)}
.steps li{counter-increment:s; background:var(--pane); border:0; box-shadow:var(--edge);
  border-radius:var(--r); padding:24px 22px; position:relative; overflow:hidden}
.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; right:16px; top:12px;
  font-size:34px; font-weight:800; color:var(--line); letter-spacing:-.05em}
/* 🔴 §2-16 — 둥근 카드 위의 두꺼운 색선을 걷었다. 순서는 «번호»가 말한다 */
.steps h3{font-size:18px; font-weight:800; margin-top:8px}
.steps p{font-size:14px; color:var(--dim); margin-top:10px; line-height:1.7}

.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:var(--gap)}
.card{background:var(--pane); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px}
.dl2{display:grid; grid-template-columns:74px minmax(0,1fr); gap:11px 14px; font-size:15px}
.dl2 dt{color:var(--g1); font-weight:800}
.dl2 dd{margin:0; color:var(--dim)}
.ul{margin:0; padding-left:18px; font-size:14px; color:var(--dim); line-height:1.9}
.ul li::marker{color:var(--g1)}

/* 배너모음·푸터는 site.css 한 곳에서만 꾸민다 — 쪽 CSS에 다시 적으면 메인과 서브 푸터가 달라진다(2026-10-30) */

@media(max-width:640px){
  :root{--sec:60px}
  :root{--sec:52px; --gap:14px}
  .wrap{padding:0 14px}
  .sec-h h2{font-size:25px}
  .pmid,.pside,.card,.steps li{padding:18px 16px}
  .pmid dl{grid-template-columns:56px minmax(0,1fr); gap:10px 12px}
  .pband{padding:16px 16px 18px}
}

/* 모션 */
.rv{opacity:0; transform:translateY(var(--rv-y,20px));
    transition:opacity .45s var(--ease), transform .45s var(--ease); will-change:opacity,transform}
.rv.is-in{opacity:1; transform:none}
.rv--text{--rv-y:24px; transition-duration:.5s}
.rv--card{--rv-y:20px;  transition-duration:.45s}
.rv--item{--rv-y:16px;  transition-duration:.45s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
                        transition-duration:.01ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
  .dot{display:none}
}