@charset "utf-8";
/* main.css — 공용 + 테마 셸(헤더·히어로·푸터)
   php 파일에서 추출한 스타일입니다. 값을 여기서 수정하세요. */

/* ── 관리자 바 (로그인 시에만 출력) ───── */
#ym-wrap .ym-adminbar{background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
#ym-wrap .ym-adminbar-in{max-width:1240px;margin:0 auto;padding:0 24px;min-height:38px;
  display:flex;align-items:center;justify-content:flex-end;gap:8px}
#ym-wrap .ym-ab-name{font:700 12.5px var(--ym-font);color:#264574;margin-right:4px}
#ym-wrap .ym-ab-link,#ym-wrap .ym-ab-gate{font:600 12px var(--ym-font);text-decoration:none;
  border:1px solid #264574;border-radius:5px;padding:5px 11px;color:#fff;background:#264574;
  display:inline-flex;align-items:center;transition:background .14s,border-color .14s}
#ym-wrap .ym-ab-link:hover,#ym-wrap .ym-ab-gate:hover{background:#1a3157;border-color:#1a3157}
#ym-wrap .ym-ab-gate{border-color:#8fa0b8;background:#8fa0b8}
#ym-wrap .ym-ab-gate.on{border-color:#e5a33a;background:#e5a33a}
#ym-wrap .ym-ab-gate.on:hover{background:#c98c26;border-color:#c98c26}
@media(max-width:767px){
  #ym-wrap .ym-adminbar-in{padding:0 12px;justify-content:flex-end;gap:8px;min-height:34px;
    flex-wrap:wrap;row-gap:6px}
  #ym-wrap .ym-ab-name{font-size:12px;margin-right:0}
}

/* ── 권역 + 지역 2단 선택 (extend/ymca_member_area.extend.php) ── */
#ym-wrap .ym-areapair{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#ym-wrap .ym-arealabel{font:800 13px var(--ym-font);color:#264574;white-space:nowrap}
#ym-wrap .ym-areapair .ym-areagroup{min-width:190px;max-width:100%}
#ym-wrap .ym-areapair .ym-areaitem{min-width:160px;max-width:100%}
#ym-wrap .ym-areapair select{border:1px solid rgba(0,0,0,.18);border-radius:4px;
  min-height:34px;padding:0 10px;font:400 13px var(--ym-font);color:#1c1c1c;background:#fff;cursor:pointer}
#ym-wrap .ym-areapair select:focus{outline:none;border-color:#1497ab;
  box-shadow:0 0 0 3px rgba(20,151,171,.14)}
@media(max-width:767px){
  #ym-wrap .ym-areapair{gap:6px}
  #ym-wrap .ym-areapair .ym-areagroup,#ym-wrap .ym-areapair .ym-areaitem{flex:1;min-width:0;width:100%}
  #ym-wrap .ym-arealabel{width:100%}
}

/* ── 공용 ─────────────────────────────── */
/* 히어로 자동재생이 transform(밀기)이면 CLS(레이아웃 밀림) 지표에 그대로 잡힙니다.
   opacity 크로스페이드로 바꿔 자동재생은 그대로 두면서 지표만 피합니다.
   grid-area:1/1 로 세 장을 같은 칸에 겹쳐서, 셋 중 가장 긴 슬라이드에 맞춰
   높이가 자동으로 잡힙니다(기존 flex 의 늘어나기 동작과 비슷합니다). */
#ym-wrap .ym-slide{grid-area:1/1;width:100%;opacity:0;pointer-events:none;transition:opacity .6s ease}
#ym-wrap .ym-slide.on{opacity:1;pointer-events:auto}
#ym-wrap .ym-h-eyebrow{font:800 13px var(--ym-font);color:#1497ab;letter-spacing:.18em}
#ym-wrap .ym-h-title{font:900 clamp(27px,3.4vw,42px)/1.3 var(--ym-font);color:#1c1c1c;margin-top:16px}
#ym-wrap .ym-teal{color:#1497ab}
#ym-wrap .ym-h-lead{font:800 18px var(--ym-font);color:#1c1c1c;margin-top:26px}
#ym-wrap .ym-h-desc{font:400 15px/1.6 var(--ym-font);color:#555;margin-top:14px}
#ym-wrap .ym-mt40{margin-top:40px}
#ym-wrap .ym-feat-item{display:flex;gap:14px;align-items:flex-start}
#ym-wrap .ym-feat-ico{flex:none;width:44px;height:44px;border-radius:50%;background:#264574;display:flex;align-items:center;justify-content:center}
#ym-wrap .ym-feat-t{font:800 15px var(--ym-font);color:#1c1c1c}
#ym-wrap .ym-feat-d{font:400 13px/1.6 var(--ym-font);color:#888;margin-top:4px}
#ym-wrap .ym-feat-ico-teal{flex:none;width:44px;height:44px;border-radius:50%;background:#1497ab;display:flex;align-items:center;justify-content:center}
#ym-wrap .ym-h-img{width:100%;object-fit:cover;border-radius:18px;filter:grayscale(.35) contrast(1.03)}
#ym-wrap .ym-red{color:#e53324}
#ym-wrap .ym-tab-row{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
#ym-wrap .ym-tab{flex:1;min-width:0;padding:9px 10px 8px;border-radius:8px;cursor:pointer;background:transparent}
#ym-wrap .ym-tab-no{font:700 11px var(--ym-font);color:#888}
#ym-wrap .ym-tab-tx{font:800 13px var(--ym-font);color:#888}
#ym-wrap .ym-tab-bar{height:3px;border-radius:2px;margin-top:8px;background:transparent}
#ym-wrap .ym-teal-sm{font:600 13px var(--ym-font);color:#1497ab}
#ym-wrap .ym-crumb{font:700 12px var(--ym-font);color:#7fc4d0;letter-spacing:.08em}
/* 메뉴는 헤더 안에서 아래쪽에 붙입니다 — 드롭다운(헤더 밑단에서 열림)과 가까워지도록.
   --ym-nav-drop 만큼 내려갑니다. 마우스 감지 영역은 셀 전체라 그대로입니다. */
#ym-wrap{--ym-nav-drop:16px}
#ym-wrap .ym-navcell{position:relative;display:flex;align-items:center;padding-top:calc(var(--ym-nav-drop,0px) * 2)}
#ym-wrap .ym-dd{position:absolute;top:var(--ym-hd-h,80px);left:0;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.12);padding:8px 0;min-width:160px}
#ym-wrap .ym-burger-bar{display:block;width:22px;height:2px;background:#264574}
#ym-wrap .ym-extmark{font-size:11px;color:#9aa4b2}
#ym-wrap .ym-pointer{cursor:pointer}
#ym-wrap .ym-hero{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:#fff;border-bottom:1px solid rgba(0,0,0,.06);
  padding-top:56px;padding-bottom:56px}
/* 장식 도형 — 나중에 이미지로 바꾸려면 아래 .ym-hero 에
   background-image:url(../img/hero-bg.png);background-size:cover;background-position:center;
   를 주고, ::before/::after 두 블록을 지우면 됩니다. */
#ym-wrap .ym-hero::before{content:"";position:absolute;z-index:-1;top:-64px;left:-46px;
  width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,151,171,.16) 0 44%,transparent 45%),
             radial-gradient(circle at 74% 28%,rgba(229,51,36,.16) 0 13%,transparent 14%),
             radial-gradient(circle at 30% 74%,rgba(38,69,116,.16) 0 11%,transparent 12%)}
#ym-wrap .ym-hero::after{content:"";position:absolute;z-index:-1;right:-36px;bottom:-52px;
  width:120px;height:120px;border-radius:50%;opacity:.5;
  background:repeating-linear-gradient(135deg,rgba(38,69,116,.12) 0 6px,transparent 6px 14px)}
#ym-wrap .ym-hero>*{position:relative;z-index:1}
@media(max-width:767px){
  #ym-wrap .ym-hero{padding-top:44px;padding-bottom:44px}
  #ym-wrap .ym-hero::before{width:140px;height:140px;top:-46px;left:-34px}
  #ym-wrap .ym-hero::after{width:84px;height:84px;right:-28px;bottom:-40px}
}
#ym-wrap .ym-hero .ym-crumb{color:#1497ab;letter-spacing:.16em}
#ym-wrap .ym-hero-title{font:900 clamp(24px,3.4vw,36px) var(--ym-font);color:#264574;margin-top:14px}
#ym-wrap .ym-hero-sub{font:400 14.5px var(--ym-font);color:#7a8494;margin-top:12px}
#ym-wrap .ym-section{padding-top:56px;padding-bottom:72px}
#ym-wrap .ym-figure{width:100%;max-width:1120px;height:300px;object-fit:cover;border-radius:8px;filter:grayscale(.45) contrast(1.03);margin-bottom:40px}
#ym-wrap .ym-prose{max-width:1200px}
#ym-wrap .ym-p{font:400 18px/1.9 var(--ym-font);color:#333;margin:0 0 18px}
#ym-wrap .ym-note{background:#f4f6f9;border-left:4px solid #1497ab;padding:16px 22px;border-radius:0 6px 6px 0;font:500 14px/1.7 var(--ym-font);color:#264574;margin-top:8px}
#ym-wrap .ym-dn-col{display:flex;flex-direction:column;gap:12px;margin-top:14px}
#ym-wrap .ym-dn-fine{font:400 12.5px/1.7 var(--ym-font);color:#777}
#ym-wrap .ym-navy{color:#264574}
#ym-wrap .ym-dn-a{color:#264574;text-decoration:underline}
#ym-wrap .ym-center{text-align:center}
#ym-wrap .ym-dn-label{font:500 13.5px var(--ym-font);color:#b9cbe6}
#ym-wrap .ym-dn-strong{font:700 15px var(--ym-font)}
#ym-wrap .ym-dn-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
#ym-wrap .ym-dn-desc{font:400 13px/1.6 var(--ym-font);color:#555}
#ym-wrap .ym-ink{color:#1c1c1c}
#ym-wrap .ym-card{display:block;border:1px solid rgba(0,0,0,.08);border-radius:8px;overflow:hidden}
#ym-wrap .ym-card-img{width:100%;height:170px;object-fit:cover;filter:grayscale(.45) contrast(1.03)}
#ym-wrap .ym-card-body{padding:16px 18px 20px}
#ym-wrap .ym-card-cat{font:700 12px var(--ym-font);color:#e53324}
#ym-wrap .ym-card-title{font:700 16px/1.4 var(--ym-font);color:#1c1c1c;margin-top:6px}
#ym-wrap .ym-card-desc{font:400 13px/1.6 var(--ym-font);color:#777;margin-top:8px}
#ym-wrap .ym-stack{display:flex;flex-direction:column;gap:0}
#ym-wrap .ym-era{padding:0 0 44px;position:relative}
#ym-wrap .ym-era-yr{text-align:right;padding-right:32px;border-right:2px solid #e53324}
#ym-wrap .ym-era-y{font:900 24px var(--ym-font);color:#264574}
#ym-wrap .ym-era-tag{font:600 13px var(--ym-font);color:#1497ab;margin-top:4px}
#ym-wrap .ym-era-img{width:100%;height:140px;object-fit:cover;border-radius:6px;filter:grayscale(.55) sepia(.15) contrast(1.03)}
/* 사진 미확보 구간 — history.php 의 $ym_era_img 가 false 일 때 사진 칸을 없앱니다 (2026-09-02) */
#ym-wrap .era-in.ym-era-noimg{grid-template-columns:1fr}
#ym-wrap .ym-era-t{font:700 18px var(--ym-font);color:#1c1c1c}
#ym-wrap .ym-era-d{font:400 14px/1.8 var(--ym-font);color:#666;margin-top:8px}
#ym-wrap .ym-way-h{display:flex;align-items:center;gap:7px}
#ym-wrap .ym-way-t{font:800 14.5px var(--ym-font);color:#c8102e}
#ym-wrap .ym-h2{font:900 22px var(--ym-font);color:#264574;border-bottom:2px solid #264574;padding-bottom:12px;margin-bottom:24px}
#ym-wrap .ym-face{width:96px;height:96px;border-radius:50%;object-fit:cover;filter:grayscale(.4)}
#ym-wrap .ym-face-name{font:700 15px var(--ym-font);margin-top:12px}
#ym-wrap .ym-face-role{font:500 12px var(--ym-font);color:#888;margin-top:2px}
#ym-wrap .ym-cap{font:400 13px var(--ym-font);color:#aaa;margin-top:20px}
#ym-wrap .ym-box{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:20px}
#ym-wrap .ym-box-t{font:700 15px var(--ym-font);color:#264574}
#ym-wrap .ym-box-d{font:400 13px/1.7 var(--ym-font);color:#777;margin-top:8px}

/* ── index.php ──────────────────── */
#ym-wrap .ym-idx-1{position:relative;overflow:hidden;background:#fff;touch-action:pan-y}  /* <div> <div id="ymHeroTrack" styl */
#ym-wrap .ym-idx-2{display:grid}  /* <div> <div class="hero-row hero- */
#ym-wrap .ym-idx-3{font:800 17px var(--ym-font);color:#264574;margin-top:22px}  /* <div> 한국 YMCA, 사람과 사회를 잇다. <div  */
#ym-wrap .ym-idx-4{display:inline-block;font:700 14px var(--ym-font);color:#264574;margin-top:24px;border-bottom:2px solid #264574;padding-bottom:2px}  /* <a> YMCA 소개 자세히 보기 → <img src= */
#ym-wrap .ym-idx-5{font:800 13px var(--ym-font);color:#e53324;letter-spacing:.18em}  /* <div> YMCA KOREA <div style="fon */
#ym-wrap .ym-idx-6{font:800 17px var(--ym-font);color:#e53324;margin-top:22px}  /* <div> 나눔이 미래를 바꿉니다. <div class=" */
#ym-wrap .ym-idx-7{flex:none;width:44px;height:44px;border-radius:50%;background:#e53324;display:flex;align-items:center;justify-content:center}  /* <div> <svg width="20" height="20 */
#ym-wrap .ym-idx-8{display:inline-block;font:700 14px var(--ym-font);color:#e53324;margin-top:24px;border-bottom:2px solid #e53324;padding-bottom:2px}  /* <a> 후원하기 → <img src="https://p */
#ym-wrap .ym-idx-9{font:800 17px var(--ym-font);color:#1497ab;margin-top:22px}  /* <div> 기록이 운동이 됩니다. <div class="f */
#ym-wrap .ym-idx-10{display:inline-block;font:700 14px var(--ym-font);color:#1497ab;margin-top:24px;border-bottom:2px solid #1497ab;padding-bottom:2px}  /* <a> 웹진 바로 보기 → <img src="https */
#ym-wrap .ym-idx-11{display:flex;align-items:stretch;gap:6px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:8px;box-shadow:0 6px 18px rgba(0,0,0,.06)}  /* <div> <a data-slide="0" style="f */
#ym-wrap .ym-idx-12{flex:1;min-width:0;padding:9px 10px 8px;border-radius:8px;cursor:pointer;background:#f4f6f9}  /* <a> <div style="display:flex;a */
#ym-wrap .ym-idx-13{font:700 11px var(--ym-font);color:#264574}  /* <span> 01<span style="font:800 13 */
#ym-wrap .ym-idx-14{font:800 13px var(--ym-font);color:#264574}  /* <span> YMCA 소개 <div style="height */
#ym-wrap .ym-idx-15{height:3px;border-radius:2px;margin-top:8px;background:#e53324}  /* <div> <a data-slide="1" style="f */
#ym-wrap .ym-idx-16{flex:none;width:42px;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(0,0,0,.1);color:#264574;font:700 13px var(--ym-font);cursor:pointer}  /* <a> ❙❙ */
#ym-wrap .ym-idx-17{padding-top:24px;padding-bottom:20px}  /* <section> <div style="display:flex;j */
#ym-wrap .ym-idx-18{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}  /* <div> <div style="font:700 13px  */
#ym-wrap .ym-idx-19{font:700 13px var(--ym-font);color:#e53324;letter-spacing:.06em}  /* <div> ACTIVITIES <div style="fon */
#ym-wrap .ym-idx-20{font:900 26px var(--ym-font);color:#264574;margin-top:6px}  /* <div> 활동소식 <a href=" 4 /board.ph */
#ym-wrap .ym-idx-21{font:600 14px var(--ym-font);color:#1497ab}  /* <a> 활동소식 전체보기 → 5 <!-- 전국 Y */
#ym-wrap .ym-idx-22{padding-top:44px;padding-bottom:72px}  /* <section> <div style="display:flex;j */
#ym-wrap .ym-idx-23{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}  /* <div> <div style="font:900 22px  */
#ym-wrap .ym-idx-24{font:900 22px var(--ym-font);color:#264574}  /* <div> 전국 YMCA 소식 <a href=" 6 /bo */
#ym-wrap .ym-idx-25{display:block;position:relative;border-radius:8px;overflow:hidden;height:290px}  /* <a> <img src=" 9 /img/webzine. */
#ym-wrap .ym-idx-26{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}  /* <img> <div style="position:absol */
/* 배너 이미지가 밝은 디자인이라 예전의 흰 글씨 버튼은 안 보입니다. 반투명 흰 바탕 + 남색 글씨.
   이미지 오른쪽 아래에 페이지 말림 장식이 있어 버튼은 왼쪽 아래에 둡니다. */
#ym-wrap .ym-wz-cta{position:absolute;left:26px;bottom:26px;background:rgba(255,255,255,.9);border:1px solid rgba(38,69,116,.3);color:#264574;padding:8px 18px;border-radius:3px;font:600 13px var(--ym-font)}
@media(max-width:767px){ #ym-wrap .ym-wz-cta{left:16px;bottom:16px;padding:7px 14px} }
/* 웹진 배너는 이미지 안에 글자가 들어 있습니다. 모바일에서 배너가 전체 폭이 되면
   틀이 세로로 길어져 object-fit:cover 가 좌우를 33%까지 잘라 WEBZINE 이 깨집니다.
   그 구간만 높이를 풀고 16:9 비율을 지킵니다. 이미지를 바꿀 때 비율도 16:9 로 맞추세요. */
@media(max-width:767px){ #ym-wrap .ym-idx-25{height:auto;aspect-ratio:16/9} }

/* ── head.php ──────────────────── */
#ym-wrap .ym-hd-1{position:sticky;top:0;z-index:50;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.08)}  /* <header> <a href=" 7 /" style="disp */
#ym-wrap .ym-hd-2{display:flex;align-items:center;gap:10px}  /* <a> <img src=" 8 /img/logo.png */
#ym-wrap .ym-hd-3{width:auto}  /* <img> <nav class="desk-nav" styl */
#ym-wrap .ym-hd-4{display:flex;align-items:stretch;height:var(--ym-hd-h,80px);gap:4px}  /* <nav> 9 <div class="nav-item" st */
#ym-wrap .ym-hd-5{margin:0 6px;background:#e53324;color:#fff;padding:10px 20px;border-radius:4px;font:700 15px var(--ym-font);white-space:nowrap}  /* <a> 후원하기 <div class="nav-dd" s */
#ym-wrap .ym-hd-6{font-size:12px}  /* <span> ↗ <div class="nav-dd" styl */
#ym-wrap .ym-hd-7{width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;margin-right:-10px}  /* <a> <span style="display:block */
#ym-wrap .ym-hd-8{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 22px;border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;background:#fff}  /* <div> <img src=" 30 /img/logo.pn */
#ym-wrap .ym-hd-9{height:36px;width:auto}  /* <img> <a href="#" aria-label="닫기 */
#ym-wrap .ym-hd-10{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font:300 27px var(--ym-font);color:#264574}  /* <a> × <nav style="display:flex */
#ym-wrap .ym-hd-11{display:flex;flex-direction:column;padding-bottom:36px}  /* <nav> 31 32 33 <a class=" */
#ym-wrap .ym-hd-12{margin:22px;background:#e53324;color:#fff;text-align:center;padding:14px;border-radius:4px;font:700 15px var(--ym-font)}  /* <a> 후원하기 */

/* ── tail.php ──────────────────── */
#ym-wrap .ym-ft-1{background:#f7f8fa;border-top:1px solid rgba(0,0,0,.06);padding-top:20px;padding-bottom:20px}  /* <div> <div style="font:800 12px  */
#ym-wrap .ym-ft-2{font:800 12px var(--ym-font);color:#264574;letter-spacing:.08em;flex:none}  /* <div> 관련 사이트 <div class="rel-tra */
#ym-wrap .ym-ft-3{background:#fff;border-top:1px solid rgba(0,0,0,.08);padding-top:40px;padding-bottom:40px}  /* <footer> <img src=" 1 /img/logo.png */
#ym-wrap .ym-ft-4{height:44px;width:auto;display:block}  /* <img> <div style="font:700 13px  */
#ym-wrap .ym-ft-5{font:700 13px var(--ym-font);color:#264574;margin-top:14px}  /* <div> 재단법인 한국기독교청년회전국연맹유지재단 <div */
#ym-wrap .ym-ft-6{font:500 12px var(--ym-font);color:#1497ab;margin-top:6px;display:flex;gap:8px;align-items:center}  /* <div> 이용약관< */
#ym-wrap .ym-ft-7{color:#c9ced6}  /* <span> ·개인 */
#ym-wrap .ym-ft-8{font:400 12px/1.8 var(--ym-font);color:#888;margin-top:8px}  /* <div> 사업자등록번호 : 104-82-05036 &nb */
#ym-wrap .ym-ft-9{text-align:right;flex:none}  /* <div> <div style="font:700 13px  */
#ym-wrap .ym-ft-10{font:700 13px var(--ym-font);color:#264574;margin-bottom:8px}  /* <div> 뉴스레터 구독 <div class="nl-row */
#ym-wrap .ym-ft-11{gap:8px;align-items:stretch}  /* <div> 이름 <div class="fo */
#ym-wrap .ym-ft-12{width:190px}  /* <div> 이메일 <div style="background */
#ym-wrap .ym-ft-13{background:#e53324;color:#fff;padding:0 20px;border-radius:3px;font:700 13px var(--ym-font);white-space:nowrap;flex:none;display:flex;align-items:center}  /* <div> 구독하기 <!-- #ym-wrap */

/* 아카이브 링크는 hover 에서도 청록을 유지합니다 (인라인 스타일이던 시절 동작). */
#ym-wrap .nav-link.ym-teal:hover{color:#1497ab}

/* ── 그누보드 출력(회원·게시판) 이 셸 안에 들어왔을 때 여백 ──
   우리 .px 섹션이 없는 페이지들이라 좌우가 붙습니다. */
#ym-wrap .mbskin{margin:60px auto 90px}
#ym-wrap .register,#ym-wrap #register_form,#ym-wrap #reg_result,
#ym-wrap #find_info,#ym-wrap #pw_reset,#ym-wrap #point,#ym-wrap #scrap,
#ym-wrap #profile,#ym-wrap #memo_list,#ym-wrap #formmail,
#ym-wrap #member_cert_refresh{margin:48px auto 90px;padding-left:60px;padding-right:60px;max-width:1000px}
#ym-wrap #bo_list,#ym-wrap #bo_v,#ym-wrap #bo_w,#ym-wrap #bo_gall,
#ym-wrap #faq_wrap,#ym-wrap #sch_res,#ym-wrap #current_connect,
#ym-wrap #new_wrap,#ym-wrap #qa_list,#ym-wrap #qa_write{padding:44px 60px 90px}
@media(max-width:1023px){
  #ym-wrap .register,#ym-wrap #register_form,#ym-wrap #reg_result,
  #ym-wrap #find_info,#ym-wrap #pw_reset,#ym-wrap #point,#ym-wrap #scrap,
  #ym-wrap #profile,#ym-wrap #memo_list,#ym-wrap #formmail,
  #ym-wrap #member_cert_refresh{padding-left:28px;padding-right:28px}
  #ym-wrap #bo_list,#ym-wrap #bo_v,#ym-wrap #bo_w,#ym-wrap #bo_gall,
  #ym-wrap #faq_wrap,#ym-wrap #sch_res,#ym-wrap #current_connect,
  #ym-wrap #new_wrap,#ym-wrap #qa_list,#ym-wrap #qa_write{padding:32px 28px 70px}}
@media(max-width:767px){
  #ym-wrap .mbskin{margin:32px 16px 60px}
  #ym-wrap .register,#ym-wrap #register_form,#ym-wrap #reg_result,
  #ym-wrap #find_info,#ym-wrap #pw_reset,#ym-wrap #point,#ym-wrap #scrap,
  #ym-wrap #profile,#ym-wrap #memo_list,#ym-wrap #formmail,
  #ym-wrap #member_cert_refresh{padding-left:16px;padding-right:16px}
  #ym-wrap #bo_list,#ym-wrap #bo_v,#ym-wrap #bo_w,#ym-wrap #bo_gall,
  #ym-wrap #faq_wrap,#ym-wrap #sch_res,#ym-wrap #current_connect,
  #ym-wrap #new_wrap,#ym-wrap #qa_list,#ym-wrap #qa_write{padding:24px 16px 60px}}

/* ── 위로 가기 버튼 (tail.sub.php) ───────── */
#ym-wrap .ym-top{position:fixed;right:28px;bottom:28px;z-index:900;
  width:56px;height:56px;border-radius:50%;border:1px solid rgba(0,0,0,.06);
  background:#fff;color:#2b2f36;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s,box-shadow .2s}
#ym-wrap .ym-top[data-on="1"]{opacity:1;visibility:visible;transform:none}
#ym-wrap .ym-top:hover{box-shadow:0 10px 26px rgba(0,0,0,.2);color:#264574}
#ym-wrap .ym-top:focus-visible{outline:2px solid #1497ab;outline-offset:3px}
@media(max-width:767px){
  #ym-wrap .ym-top{right:16px;bottom:16px;width:48px;height:48px}
}
@media print{ #ym-wrap .ym-top{display:none} }

/* ── PDF 뷰어 모달 (ui.js 의 a.ymc-flip) ──
   메인 웹진 배너와 게시판 보기 화면이 함께 씁니다. */
.ymc-flipmodal{position:fixed;inset:0;z-index:130000;display:flex;
  align-items:center;justify-content:center;padding:24px}
.ymc-flipmodal .ymc-flipdim{position:absolute;inset:0;background:rgba(12,15,19,.72)}
.ymc-flipmodal .ymc-flipbox{position:relative;width:min(1400px,100%);height:min(900px,100%);
  background:#1b1f26;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ymc-flipmodal iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:767px){
  .ymc-flipmodal{padding:0}
  .ymc-flipmodal .ymc-flipbox{width:100%;height:100%;border-radius:0}
}

/* ── 푸터 뉴스레터 구독 폼 (tail.sub.php · js/news.js) ── */
#ym-wrap .ym-ft-11 input.foot-input{color:#333;background:#fff;min-width:0;flex:none}
#ym-wrap .ym-ft-11 input.foot-input::placeholder{color:#aaa}
#ym-wrap .ym-ft-11 input.foot-input:focus{outline:none;border-color:#264574}
#ym-wrap .ym-ft-13{border:0;cursor:pointer;font-family:var(--ym-font)}
#ym-wrap .nl-agree{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px;font:400 12px var(--ym-font);color:#888;cursor:pointer}
#ym-wrap .nl-agree a{color:#264574;text-decoration:underline}
#ym-wrap .nl-msg{display:none;margin-top:8px;font:600 12px var(--ym-font);color:#e53324;text-align:right}
@media (max-width:900px){
  #ym-wrap .nl-agree{justify-content:flex-start}
  #ym-wrap .nl-msg{text-align:left}
}

/* ── 개인정보 수집·이용 동의 전문 모달 (js/agree.js) ── */
.ym-agree-modal{position:fixed;inset:0;z-index:140000;display:none;align-items:center;justify-content:center;padding:24px}
.ym-agree-dim{position:absolute;inset:0;background:rgba(20,26,34,.55)}
.ym-agree-box{position:relative;width:100%;max-width:640px;max-height:86vh;display:flex;flex-direction:column;
  background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.ym-agree-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;background:#3b62a8}
.ym-agree-title{font:800 20px var(--ym-font);color:#fff}
.ym-agree-x{border:0;background:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 2px}
.ym-agree-body{padding:26px 28px 8px;overflow-y:auto}
.ym-agree-h{margin:0 0 10px;font:800 16px var(--ym-font);color:#264574}
.ym-agree-p{margin:0 0 26px;font:400 15px/1.7 var(--ym-font);color:#333;text-wrap:pretty}
.ym-agree-p b{font-weight:700;color:#222}
.ym-agree-tail{color:#444}
.ym-agree-foot{padding:18px 28px 24px;border-top:1px solid #eef0f2;display:flex;justify-content:center}
.ym-agree-ok{min-width:170px;height:52px;border:0;border-radius:26px;background:#3b62a8;color:#fff;
  font:700 16px var(--ym-font);cursor:pointer}
.ym-agree-ok:hover{background:#33538f}
@media (max-width:600px){
  .ym-agree-head{padding:18px 20px}.ym-agree-title{font-size:17px}
  .ym-agree-body{padding:20px 20px 4px}.ym-agree-p{font-size:14px;margin-bottom:22px}
  .ym-agree-ok{min-width:140px;height:46px;font-size:15px}
}

/* ── 히어로 탭(플레이 바) 높이 축소 ── */
#ym-wrap .ym-idx-11{padding:5px;border-radius:9px;gap:4px}
#ym-wrap .ym-idx-12,#ym-wrap .ym-tab{padding:6px 10px 5px;border-radius:6px}
#ym-wrap .ym-idx-15,#ym-wrap .ym-tab-bar{height:2px;margin-top:5px}
#ym-wrap .ym-idx-16{width:36px}

/* ── 히어로 아래 공지 한 줄 ── */
#ym-wrap .ym-notice{padding-top:14px;padding-bottom:6px}
#ym-wrap .ym-notice-in{position:relative;display:flex;align-items:center;gap:18px;background:#f7f8fa;border-radius:8px;
  padding:14px 22px;font-family:var(--ym-font)}
/* 줄 전체를 덮는 투명 링크(본문) 위에 '더보기'(목록)를 얹습니다.
   a 안에 a 를 넣을 수 없어 형제로 두고 z-index 로 겹칩니다. */
#ym-wrap .ym-notice-link{position:absolute;inset:0;z-index:1;border-radius:8px}
#ym-wrap .ym-notice-more{position:relative;z-index:2}
#ym-wrap .ym-notice-in:hover{background:#f1f3f6}
#ym-wrap .ym-notice-tag{flex:none;font:800 14px var(--ym-font);color:#264574}
#ym-wrap .ym-notice-tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 15px var(--ym-font);color:#333}
#ym-wrap .ym-notice-dt{flex:none;font:400 13px var(--ym-font);color:#aaa}
#ym-wrap .ym-notice-more{flex:none;font:600 13px var(--ym-font);color:#666;text-decoration:underline}

/* ── 카드 목록 좌우 넘김 화살표 (js/pager.js) ── */
#ym-wrap .ym-hd-right{display:flex;align-items:center;gap:18px}
#ym-wrap .ym-arrows{display:flex;align-items:center;gap:8px}
#ym-wrap .ym-arw{width:30px;height:30px;border:1px solid rgba(0,0,0,.14);border-radius:50%;background:#fff;
  color:#264574;font:400 18px/1 var(--ym-font);cursor:pointer;display:flex;align-items:center;justify-content:center}
#ym-wrap .ym-arw:hover{background:#264574;color:#fff;border-color:#264574}
#ym-wrap .ym-arw-page{font:600 12px var(--ym-font);color:#999;min-width:34px;text-align:center}

/* ── 내용 페이지 하단 CTA 배너 (cta.banner.php) ── */
#ym-wrap .ym-cta{display:grid;grid-template-columns:1fr 1fr}
#ym-wrap .ym-cta-half{display:block;padding:56px 0}
#ym-wrap .ym-cta-donate{background:#1497ab}
#ym-wrap .ym-cta-zine{background:#264574}
#ym-wrap .ym-cta-in{max-width:560px;margin:0 auto;padding:0 40px}
#ym-wrap .ym-cta-tx{font:800 22px/1.55 var(--ym-font);color:#fff;text-wrap:pretty}
#ym-wrap .ym-cta-btn{display:inline-block;margin-top:26px;padding:13px 34px;border:1px solid rgba(255,255,255,.75);
  color:#fff;font:700 14px var(--ym-font)}
#ym-wrap .ym-cta-half:hover .ym-cta-btn{background:#fff;color:#264574;border-color:#fff}
@media (max-width:900px){
  #ym-wrap .ym-cta{grid-template-columns:1fr}
  #ym-wrap .ym-cta-half{padding:40px 0}
  #ym-wrap .ym-cta-in{padding:0 24px}
  #ym-wrap .ym-cta-tx{font-size:18px}
  #ym-wrap .ym-notice-in{gap:12px;padding:12px 16px}
  #ym-wrap .ym-notice-dt,#ym-wrap .ym-notice-more{display:none}
}

/* 히어로 ↔ 공지 줄 간격 축소 */
#ym-wrap .ym-idx-1 .tabs-row{margin-bottom:14px}
#ym-wrap .ym-notice{padding-top:0;padding-bottom:4px}

/* 전국 YMCA 소식은 6건을 불러오지만(3+3) 폭이 좁은 칸이므로 3열로 고정합니다.
   (최신글 스킨은 4건 이상이면 g4 를 붙입니다) */
#ym-wrap .ym-pager[data-per="3"] .g4{grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1100px){
  #ym-wrap .ym-pager[data-per="3"] .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  #ym-wrap .ym-pager[data-per="3"] .g4{grid-template-columns:1fr}
}

/* ── 팝업레이어 하단 고정 띠 (js/popup.js) ── */
.ym-popbar{position:fixed;left:0;right:0;bottom:0;z-index:120000;display:flex;flex-direction:column;gap:8px;
  padding:0 0 0;pointer-events:none}
.ym-popbar .ym-pop{position:relative;pointer-events:auto;width:100%;max-width:none;margin:0;
  border:0;border-top:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 -6px 20px rgba(0,0,0,.12);
  max-height:38vh;overflow:hidden}
.ym-popbar .hd_pops_con{max-width:1280px;margin:0 auto;width:auto!important;height:auto!important;overflow:hidden}
.ym-popbar .hd_pops_con img{max-width:100%;height:auto;display:block;margin:0 auto}
.ym-popbar .hd_pops_footer{max-width:1280px;margin:0 auto;background:transparent;text-align:right;padding-right:56px}
.ym-popbar .hd_pops_footer button{background:transparent;color:#666;font:600 12px var(--ym-font);padding:8px 10px}
.ym-popbar .hd_pops_footer button:hover{color:#264574;text-decoration:underline}
.ym-pop-x{position:absolute;top:10px;right:14px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(0,0,0,.06);color:#333;font-size:22px;line-height:1;cursor:pointer}
.ym-pop-x:hover{background:rgba(0,0,0,.14)}
@media (max-width:600px){
  .ym-popbar .ym-pop{max-height:46vh}
  .ym-popbar .hd_pops_footer{padding-right:48px}
}

/* 하단 팝업 — 하나씩 넘겨 보기(slide) 모드의 화살표 */
.ym-popbar-slide{padding-bottom:0}
.ym-pop-nav{position:absolute;right:56px;top:-46px;display:flex;align-items:center;gap:8px;
  pointer-events:auto;background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.08);
  border-radius:20px;padding:5px 10px;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.ym-pop-arw{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:#264574;
  font:400 18px/1 var(--ym-font);cursor:pointer}
.ym-pop-arw:hover{background:#264574;color:#fff}
.ym-pop-page{font:600 12px var(--ym-font);color:#888;min-width:32px;text-align:center}
@media (max-width:600px){ .ym-pop-nav{right:14px;top:-42px} }

/* 하단 팝업 띠를 #ym-wrap(최대 1240px) 폭에 맞춥니다. */
.ym-popbar{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:1240px}
.ym-popbar .ym-pop{border-top:0;border:1px solid rgba(0,0,0,.08);border-bottom:0;
  border-radius:10px 10px 0 0;box-shadow:0 -6px 20px rgba(0,0,0,.1)}
.ym-popbar .hd_pops_con{max-width:none;padding:0 20px}
.ym-popbar .hd_pops_footer{max-width:none;padding-right:52px}
.ym-pop-nav{right:20px}
@media (max-width:1240px){
  .ym-popbar{max-width:100%}
  .ym-popbar .ym-pop{border-left:0;border-right:0;border-radius:0}
}

/* 하단 팝업 내부 정리 — 본문/닫기 버튼 줄 (js/popup.js) */
.ym-popbar .ym-pop{display:flex;flex-direction:column;background:#fff}
.ym-popbar .hd_pops_con{padding:18px 20px 6px;font:400 15px/1.7 var(--ym-font);color:#333}
.ym-popbar .hd_pops_con img{max-width:100%;height:auto}
.ym-popbar .hd_pops_footer{display:flex;justify-content:flex-end;align-items:center;gap:6px;
  padding:8px 16px 12px;background:transparent}
.ym-popbar .hd_pops_footer button{background:transparent;border:0;color:#777;
  font:600 12.5px var(--ym-font);padding:6px 8px;cursor:pointer;white-space:nowrap}
.ym-popbar .hd_pops_footer button:hover{color:#264574;text-decoration:underline}
.ym-pop-x{display:none!important}
.ym-pop-nav{top:-44px}

/* 그누보드 기본 css 가 [닫기] 를 position:absolute / float 로 두어 글자가 겹칩니다. */
.ym-popbar .hd_pops_footer{position:static!important}
.ym-popbar .hd_pops_footer button,
.ym-popbar .hd_pops_footer .hd_pops_reject,
.ym-popbar .hd_pops_footer .hd_pops_close{position:static!important;float:none!important;
  top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;margin:0!important;display:inline-flex!important;
  align-items:center}

/* ── 팝업레이어 · 떠 있는 창 방식 ────────────────────────────────
   js/popup.js 의 YM_POPUP_MODE 를 'float' 로 두면 #hd_pop 에 .ym-popfloat 가 붙습니다.
   마크업은 그누보드 기본 그대로이고(관리자의 top/left/width/height 를 그대로 사용),
   여기서는 모양만 사이트 톤에 맞추고 좁은 화면에서 넘치지 않게 잡아 줍니다.
   하단 띠(.ym-popbar) 규칙과는 선택자가 겹치지 않으므로 서로 간섭하지 않습니다. */
#hd_pop.ym-popfloat{z-index:120000}
#hd_pop.ym-popfloat .hd_pops{border:1px solid rgba(0,0,0,.08);border-radius:10px;
  background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.18);overflow:hidden}
#hd_pop.ym-popfloat .hd_pops_con{max-width:100%}
#hd_pop.ym-popfloat .hd_pops_con img{max-width:100%;height:auto;display:block}
#hd_pop.ym-popfloat .hd_pops_footer{position:static!important;display:flex;
  justify-content:flex-end;align-items:center;gap:6px;
  padding:8px 14px 10px;background:transparent;border-top:1px solid rgba(0,0,0,.06)}
#hd_pop.ym-popfloat .hd_pops_footer button,
#hd_pop.ym-popfloat .hd_pops_footer .hd_pops_reject,
#hd_pop.ym-popfloat .hd_pops_footer .hd_pops_close{position:static!important;float:none!important;
  top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;margin:0!important;display:inline-flex!important;
  align-items:center;background:transparent;border:0;color:#777;
  font:600 12.5px var(--ym-font);padding:6px 8px;cursor:pointer;white-space:nowrap}
#hd_pop.ym-popfloat .hd_pops_footer button:hover{color:#264574;text-decoration:underline}

/* 좁은 화면 — 관리자가 넣은 픽셀 위치·폭을 그대로 두면 화면 밖으로 나갑니다.
   가운데로 모으고 폭·높이를 화면에 맞춥니다. */
@media (max-width:768px){
  #hd_pop.ym-popfloat .hd_pops{position:fixed!important;top:50%!important;left:50%!important;
    transform:translate(-50%,-50%);width:calc(100vw - 32px)!important;max-width:440px;
    max-height:82vh;display:flex;flex-direction:column;border-radius:12px}
  #hd_pop.ym-popfloat .hd_pops_con{width:100%!important;height:auto!important;
    max-height:none;overflow:auto;-webkit-overflow-scrolling:touch}
}
.ym-popbar .hd_pops_con{position:static!important;width:auto!important;height:auto!important}


/* ── 뉴스레터 구독 결과 모달 (js/news.js) ── */
.ym-news-modal{position:fixed;inset:0;z-index:140010;display:none;align-items:center;justify-content:center;padding:24px}
.ym-news-dim{position:absolute;inset:0;background:rgba(20,26,34,.55)}
.ym-news-box{position:relative;width:100%;max-width:400px;padding:34px 30px 26px;text-align:center;
  background:#fff;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.ym-news-ico{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;position:relative}
.ym-news-modal.is-ok .ym-news-ico{background:#eaf2ff}
.ym-news-modal.is-err .ym-news-ico{background:#fdecea}
.ym-news-ico::after{content:'';position:absolute;left:50%;top:50%}
.ym-news-modal.is-ok .ym-news-ico::after{width:16px;height:9px;border-left:3px solid #3b62a8;border-bottom:3px solid #3b62a8;
  transform:translate(-50%,-70%) rotate(-45deg)}
.ym-news-modal.is-err .ym-news-ico::after{content:'!';font-size:26px;font-weight:800;color:#e53324;line-height:1;
  transform:translate(-50%,-50%)}
.ym-news-title{font-size:19px;font-weight:800;color:#141a22;letter-spacing:-.02em}
.ym-news-text{margin-top:10px;font-size:15px;line-height:1.6;color:#4b5563;word-break:keep-all}
.ym-news-ok{margin-top:22px;min-width:120px;padding:12px 22px;border:0;border-radius:8px;cursor:pointer;
  background:#3b62a8;color:#fff;font-size:15px;font-weight:700}
.ym-news-ok:hover{background:#2f4f8a}
@media (max-width:600px){.ym-news-box{padding:28px 22px 22px}}