@charset "utf-8";
/* ============================================================
   한국 YMCA 전국연맹 — 테마 전용 스타일  (theme/koreaymca/css/style.css)
   그누보드 공통 CSS(css/default.css, skin css)와 충돌하지 않도록
   모든 선택자를 #ym-wrap 하위로 스코프했습니다.
   → 마크업 최상위의 <div id="ym-wrap"> 를 절대 지우지 마세요.
   폰트: Pretendard (CDN). 내부망이면 로컬 웹폰트로 교체하세요.
   ============================================================ */

/* --- 글꼴 ---
   Pretendard 는 여기서 @import 하지 않습니다. @import 는 이 파일을 다 받은 뒤에야
   폰트 CSS 를 받으러 가는 직렬 대기라서, head.sub.php 의 <link> 로 옮겼습니다
   (preconnect + stylesheet). 폰트를 바꿀 때는 head.sub.php 의 그 <link> 와
   아래 두 줄을 함께 고칩니다.
   모든 css 는 font 축약에서 var(--ym-font) 만 씁니다.
   제목용 글꼴을 따로 쓰려면 --ym-font-head 를 다른 값으로 두고
   바꿀 규칙에서만 var(--ym-font-head) 로 적으세요. */
:root{
  --ym-font:'Pretendard',system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --ym-font-head:var(--ym-font);
}

/* --- 컨테이너 & 그누보드 기본값 리셋 (테마 영역 한정) --- */
#ym-wrap{max-width:1240px;margin:0 auto;box-shadow:0 0 40px rgba(0,0,0,.06);text-align:left;line-height:1.5}
/* 리셋은 우리가 짠 마크업에만 적용합니다 — 페이지 본문(main) + 테마 셸.
   그누보드 게시판·회원 페이지는 main 밖에 출력되므로 default.css 와
   스킨 css 가 그대로 살아있습니다. 여기에 전역 리셋을 추가하지 마세요. */
#ym-wrap img{max-width:100%;border:0;vertical-align:top}
#ym-wrap input,#ym-wrap select,#ym-wrap button,#ym-wrap textarea{font-family:var(--ym-font)}
#ym-wrap main *,
#ym-wrap .topbar *,#ym-wrap .hdr *,#ym-wrap .drawer *,
#ym-wrap .rel *,#ym-wrap .foot *{box-sizing:border-box}
#ym-wrap main ul,#ym-wrap main ol,#ym-wrap main li,
#ym-wrap .drawer ul,#ym-wrap .drawer li{margin:0;padding:0;list-style:none}
#ym-wrap main p,#ym-wrap main h1,#ym-wrap main h2,#ym-wrap main h3,#ym-wrap main h4,
#ym-wrap .foot p,#ym-wrap .foot h2,#ym-wrap .foot h3{margin:0;font-size:inherit;font-weight:inherit}
#ym-wrap main table{border-collapse:collapse}

/* --- 팝업레이어 (bbs/newwin.inc.php) ---
   실제 팝업(.hd_pops)만 보이게 하고, "팝업레이어 알림" 제목과
   "팝업레이어 알림이 없습니다." 안내문은 스크린리더용으로만 남깁니다.
   #ym-wrap 밖에 출력되므로 스코프를 붙이지 않습니다. */
#hd_pop{position:relative;z-index:1000;margin:0 auto;height:0}
#hd_pop > *:not(.hd_pops){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);font-size:0;line-height:0}
.hd_pops{position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_footer{padding:0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button{margin:0;padding:10px;border:0;background:#000;color:#fff;cursor:pointer;font:600 13px var(--ym-font)}

/* --- 시안에서 추출한 규칙 --- */
html,body{margin:0;background:#fff}
#ym-wrap{background:#fff;font-family:var(--ym-font);color:#1c1c1c}
/* :where() 로 우선순위를 0 으로 두어야 .sns / .ym-teal 같은 개별 색이 이깁니다.
   그누보드 스킨(main 밖) 링크는 default.css 기본값을 그대로 씁니다. */
#ym-wrap :where(main,.topbar,.hdr,.drawer,.rel,.foot) a{color:inherit;text-decoration:none;cursor:pointer}
#ym-wrap .nav-item:hover .nav-dd{opacity:1;visibility:visible;transform:translateY(0)}
#ym-wrap .nav-link{position:relative;font-family:var(--ym-font);font-size:16px;font-weight:600;color:#1c1c1c;cursor:pointer;padding:0 13px;white-space:nowrap;transition:color .12s}
#ym-wrap .nav-link:hover{color:#e53324}
#ym-wrap .nav-dd{opacity:0;visibility:hidden;transform:translateY(6px);transition:all .16s ease}
#ym-wrap .dd-link{display:block;padding:9px 18px;font:600 15px var(--ym-font);color:#333;white-space:nowrap;transition:background .12s,color .12s}
#ym-wrap .dd-link:hover{background:#f4f6f9;color:#264574}
#ym-wrap .foot-input{border:1px solid rgba(0,0,0,.15);border-radius:3px;padding:9px 12px;font:400 13px var(--ym-font);color:#999;white-space:nowrap;flex:none;min-width:72px}
#ym-wrap .card-hover{transition:transform .18s ease}
#ym-wrap .card-hover:hover{transform:translateY(-4px)}
#ym-wrap .kmap{display:block}
#ym-wrap .basemap path{fill:#d7dde6;stroke:#aab4c3;stroke-width:.9}
#ym-wrap .reg{transition:none}
#ym-wrap .reg-fill{fill:rgba(20,151,171,.12);stroke:rgba(20,151,171,.4);stroke-width:1;pointer-events:none;transition:fill .16s,stroke .16s}
#ym-wrap .reg-dot{fill:#264574;pointer-events:none;transition:fill .16s}
#ym-wrap .reg[data-active="1"] .reg-fill{fill:#0e7c8c;stroke:#0a5a66;stroke-width:1.5}
#ym-wrap .reg[data-active="1"] .reg-dot{fill:#e53324}
#ym-wrap .lead-line{fill:none;stroke:#9aa7b8;stroke-width:1;pointer-events:none;transition:stroke .15s,stroke-width .15s}
#ym-wrap .lead-tx{font-family:var(--ym-font);font-size:13px;font-weight:600;fill:#41506b;pointer-events:none;transition:fill .15s}
#ym-wrap .lead-hit{fill:transparent;pointer-events:all;cursor:pointer}
#ym-wrap .lead[data-active="1"] .lead-line{stroke:#e53324;stroke-width:2}
#ym-wrap .lead[data-active="1"] .lead-tx{fill:#e53324;font-weight:800}
@keyframes ymcaSlide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
#ym-wrap .reg-row{cursor:pointer;border-left:3px solid transparent;transition:background .12s,border-color .12s}
#ym-wrap .reg-row:hover,#ym-wrap .reg-row[data-active="1"]{background:#eaf4f6;border-left-color:#e53324}
/* 헤더 높이는 이 한 줄이 정합니다 — 드롭다운·스티키 바·앵커가 모두 이 값을 따라옵니다 */
#ym-wrap{--ym-hd-h:96px}
#ym-wrap .hdr{padding:0 36px;height:var(--ym-hd-h,80px)}
#ym-wrap .logo{height:60px}
#ym-wrap .px{padding-left:60px;padding-right:60px}
#ym-wrap .hero-slide{padding:52px 48px 24px}
#ym-wrap .hero-row{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
#ym-wrap .hero-img{height:470px}
#ym-wrap .feat2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#ym-wrap .tabs-row{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;margin:0 48px 40px}
#ym-wrap .two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
#ym-wrap .two-col2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
#ym-wrap .reg-cols{display:grid;grid-template-columns:44% 1fr;gap:0 44px;align-items:start}
#ym-wrap .map-sticky{position:sticky;top:16px}
#ym-wrap .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
#ym-wrap .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#ym-wrap .g3s{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#ym-wrap .g3b{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#ym-wrap .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
#ym-wrap .era-row{display:grid;grid-template-columns:150px 1fr;gap:32px}
#ym-wrap .era-in{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
#ym-wrap .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
#ym-wrap .nl-row{display:flex}
#ym-wrap .rel{display:flex;align-items:center;gap:20px}
#ym-wrap .rel-vp{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
#ym-wrap .rel-track{display:flex;align-items:center;width:max-content;animation:relScroll 42s linear infinite}
#ym-wrap .rel-vp:hover .rel-track{animation-play-state:paused}
@keyframes relScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  #ym-wrap .rel-track{animation:none}}
  #ym-wrap .rel-link{display:flex;align-items:center;gap:5px;font:600 13.5px var(--ym-font);color:#4a5566;white-space:nowrap;transition:color .12s;padding:0 20px;position:relative}
  #ym-wrap .rel-link::after{content:'';position:absolute;right:0;top:50%;margin-top:-6px;width:1px;height:12px;background:rgba(0,0,0,.13)}
  #ym-wrap .rel-link:hover{color:#e53324}
@media(max-width:1023px){
  #ym-wrap .rel{gap:14px}.rel-link{padding:0 15px;font-size:13px}
  #ym-wrap .foot{flex-direction:column;align-items:flex-start}
  #ym-wrap .foot-nl{text-align:left!important;width:100%}}
  #ym-wrap .mob-only{display:none}
  #ym-wrap .topbar{background:#fafbfc;display:flex;align-items:center;justify-content:flex-end;gap:2px;height:38px}
  #ym-wrap .sns{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:#98a0ab;transition:color .14s,background .14s}
  #ym-wrap .sns:hover{background:#fff}
  #ym-wrap .sns-fb:hover{color:#1877f2}
  #ym-wrap .sns-ig:hover{color:#e4405f}
  #ym-wrap .sns-kk:hover{color:#3c1e1e;background:#fee500}
  #ym-wrap .sns-yt:hover{color:#ff0000}
@media(max-width:1023px){
  #ym-wrap .topbar{height:34px}.sns{width:32px;height:32px}}
  #ym-wrap .fsec{border-top:1px solid rgba(0,0,0,.1);padding-top:28px;margin-top:30px}
  #ym-wrap .fsec-1{border-top:0;padding-top:0;margin-top:0}
  #ym-wrap .flb{font:800 16px var(--ym-font);color:#264574;margin-bottom:14px}
  #ym-wrap .fhint{font:400 12.5px/1.6 var(--ym-font);color:#999;margin-top:8px}
  #ym-wrap .fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  #ym-wrap .fld{display:flex;flex-direction:column;gap:6px}
  #ym-wrap .fld span{font:600 12.5px var(--ym-font);color:#666}
  #ym-wrap .fld input{border:1px solid rgba(0,0,0,.18);border-radius:4px;padding:11px 12px;font:400 14px var(--ym-font);color:#1c1c1c;background:#fff;width:100%;box-sizing:border-box;min-height:44px;font-family:var(--ym-font)}
  #ym-wrap .fld input:focus{outline:none;border-color:#1497ab;box-shadow:0 0 0 3px rgba(20,151,171,.14)}
  #ym-wrap .fld input::placeholder{color:#b8bdc6}
  #ym-wrap .fld select{border:1px solid rgba(0,0,0,.18);border-radius:4px;padding:10px 12px;font:400 14px var(--ym-font);color:#1c1c1c;background:#fff;width:100%;box-sizing:border-box;min-height:42px;cursor:pointer}
  #ym-wrap .fld select:focus{outline:none;border-color:#1497ab;box-shadow:0 0 0 3px rgba(20,151,171,.14)}
  #ym-wrap .req{color:#e53324}
  #ym-wrap .seg{display:flex;gap:8px}
  #ym-wrap .don-col{display:grid;grid-template-columns:40fr 60fr;gap:36px;align-items:start}
  #ym-wrap .seg a{flex:1;text-align:center;padding:7px 8px;border:1.5px solid rgba(0,0,0,.16);border-radius:5px;font:700 13px var(--ym-font);color:#666;cursor:pointer;background:#fff;transition:border-color .14s,background .14s,color .14s;min-height:30px;display:flex;align-items:center;justify-content:center}
  #ym-wrap .seg a[data-on="1"]{border-color:#e53324;background:#e53324;color:#fff}
  #ym-wrap .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  #ym-wrap .chips a{padding:7px 6px;text-align:center;border:1.5px solid rgba(0,0,0,.16);border-radius:5px;font:700 13px var(--ym-font);color:#444;cursor:pointer;background:#fff;transition:border-color .14s,background .14s,color .14s;min-height:30px;display:flex;align-items:center;justify-content:center}
  #ym-wrap .chips a[data-on="1"]{border-color:#264574;background:#264574;color:#fff}
  #ym-wrap .cbrow{display:flex;align-items:flex-start;gap:10px;padding:10px 0;cursor:pointer}
  #ym-wrap .cbbox{flex:none;width:20px;height:20px;border-radius:3px;border:1.5px solid rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;font:700 12px var(--ym-font);color:transparent;background:#fff;margin-top:1px}
  #ym-wrap .cbrow[data-on="1"] .cbbox{background:#264574;border-color:#264574;color:#fff}
  #ym-wrap .cbtx{font:500 13.5px/1.5 var(--ym-font);color:#444}
  #ym-wrap .btn-primary{display:block;text-align:center;background:#e53324;color:#fff;border-radius:5px;padding:12px;font:800 14.5px var(--ym-font);cursor:pointer;margin-top:24px}
  #ym-wrap .sum{position:sticky;top:100px}
  #ym-wrap .addr-row{display:grid;grid-template-columns:1fr 118px;gap:8px;align-items:end}
  #ym-wrap .addr-btn{border:1.5px solid #264574;color:#264574;border-radius:4px;font:700 13px var(--ym-font);min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff}
@media(max-width:1023px){
  #ym-wrap .sum{position:static}.don-col{grid-template-columns:1fr;gap:36px}}
@media(max-width:767px){
  #ym-wrap .fgrid2{grid-template-columns:1fr}.chips{grid-template-columns:repeat(2,1fr)}
  #ym-wrap .seg a,#ym-wrap .chips a{min-height:44px;padding:11px 8px;font-size:14px}
  #ym-wrap .btn-primary{padding:16px;font-size:15.5px}}
  #ym-wrap .drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:#fff;z-index:120;transform:translateX(103%);transition:transform .26s ease;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.18)}
  #ym-wrap .drawer[data-open="1"]{transform:none}
  #ym-wrap .scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:110;opacity:0;visibility:hidden;transition:opacity .26s}
  #ym-wrap .scrim[data-open="1"]{opacity:1;visibility:visible}
  #ym-wrap .dgroup{font:800 13.5px var(--ym-font);color:#1497ab;letter-spacing:.06em;padding:20px 22px 8px;background:#fafbfc}
  #ym-wrap .dlink{display:block;padding:13px 22px;font:600 15px var(--ym-font);color:#1c1c1c;border-bottom:1px solid rgba(0,0,0,.06)}
  #ym-wrap .dlink:active{background:#f4f6f9}
@media(min-width:1024px){
  #ym-wrap .drawer,#ym-wrap .scrim{display:none}}
@media(max-width:1023px){
  #ym-wrap{--ym-hd-h:72px}
  #ym-wrap .hdr{padding:0 24px}
  #ym-wrap .logo{height:48px}
  #ym-wrap .px{padding-left:28px;padding-right:28px}
  #ym-wrap .desk-nav{display:none!important}
  #ym-wrap .mob-only{display:flex}
  #ym-wrap .hero-slide{padding:32px 28px 20px}
  #ym-wrap .hero-row{grid-template-columns:1fr;gap:26px}
  #ym-wrap .hero-img{height:300px}
  #ym-wrap .tabs-row{grid-template-columns:1fr;gap:0;margin:0 28px 32px}
  #ym-wrap .two-col,#ym-wrap .two-col2{grid-template-columns:1fr;gap:36px}
  #ym-wrap .reg-cols{grid-template-columns:1fr;gap:32px}
  #ym-wrap .map-sticky{position:static}
  #ym-wrap .g4,#ym-wrap .g3,#ym-wrap .g3s,#ym-wrap .g3b{grid-template-columns:repeat(2,1fr)}
  #ym-wrap .g5{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  #ym-wrap .hdr{padding:0 16px}
  #ym-wrap .px{padding-left:16px;padding-right:16px}
  #ym-wrap .hero-slide{padding:26px 16px 18px}
  #ym-wrap .hero-img{height:210px}
  #ym-wrap .feat2{grid-template-columns:1fr;gap:16px}
  #ym-wrap .tabs-row{margin:0 16px 26px}
  #ym-wrap .g4,#ym-wrap .g3,#ym-wrap .g3s,#ym-wrap .g3b{grid-template-columns:1fr}
  #ym-wrap .g5{grid-template-columns:repeat(2,1fr)}
  #ym-wrap .era-row{grid-template-columns:1fr;gap:14px}
  #ym-wrap .era-in{grid-template-columns:1fr;gap:14px}
  #ym-wrap .era-yr{text-align:left!important;padding-right:0!important;border-right:0!important;border-left:3px solid #e53324;padding-left:14px}
  #ym-wrap .foot{flex-direction:column;align-items:flex-start}
  #ym-wrap .foot-nl{text-align:left!important;width:100%}
  #ym-wrap .nl-row{flex-wrap:wrap}
  #ym-wrap .nl-row .foot-input{flex:1;width:auto!important}
}

/* --- 그누보드 전용 보정 --- */
#ym-wrap .ym-page-nav{display:flex;justify-content:center;gap:6px;margin-top:40px;font:600 13px var(--ym-font);color:#666}
#ym-wrap .ym-page-nav a,#ym-wrap .ym-page-nav strong{min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.15);border-radius:4px;padding:0 6px}
#ym-wrap .ym-page-nav strong{background:#264574;color:#fff;border-color:#264574}
#ym-wrap .ym-empty{padding:80px 0;text-align:center;font:500 15px var(--ym-font);color:#999}
#ym-wrap .ym-btn-line{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #264574;color:#264574;border-radius:4px;padding:10px 18px;font:700 13.5px var(--ym-font);background:#fff}
#ym-wrap .ym-btn-fill{display:inline-flex;align-items:center;gap:6px;background:#e53324;color:#fff;border:0;border-radius:4px;padding:11px 20px;font:700 13.5px var(--ym-font);cursor:pointer}
#ym-wrap .ym-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}