/* ================================
   전체 변수 및 기본 리셋
================================ */
:root{
  --primary: #034694;   /* 메인 포인트 컬러 블루*/  
  --accent: #FFB400;    /* 서브 포인트 컬러 */
  --bg: #F4F8FF;        /* 배경색  */
  --subbg: #1C2D46;     /*하단 및 서브상단 배경색 */
  --btn: #2F80ED;       /* 버튼색 스카이블루*/  
  --text: #333;         /* 본문 글자색 */
  --radius: 16px;       /* 모서리 둥글기 */
  --gutter: clamp(16px, 4vw, 20px);  /* 전체레이아웃 containter */
  --fixed-header-h: 80px;           /* skip관련 리더기 */
  --graybg : #F8FBFF;   /*그래프배경*/

  /*검색전용*/
  --search-text:#191877;         /* 타이틀 컬러 */
  --search-border:#034694;        /* 검색창 테두리 */
  --search-focus:#2a6adf;         /* 포커스 아웃라인 */

  /*카드섹션*/ 
  --card-bg:#ffffff;
  --card-border:#ddd;
  --card-text:#111;
  --card-muted:#6b778c;
  --card-chip:#F1F1F5;
  --card-chip-text:#555;
  --card-primary:#0d3b78;       /* hover 배경(파랑) */
  --card-primary-ink:#ffffff;   /* hover 글자색 */
  --card-shadow:0 10px 28px rgba(0,0,0,.10);
}
* { margin: 0; padding: 0; box-sizing: border-box; } /* 모든 요소 여백/패딩 제거, 테두리 포함 계산 */

/* 스크롤바가 생겨도 레이아웃 폭이 안 흔들리도록 */
html { scrollbar-gutter: stable; }
body { font-family: "Pretendard", sans-serif;color: var(--text); line-height:1.6; } /*1.6*/
a { text-decoration: none; color: inherit; } /* 링크 밑줄X, 본문색 상속 */


/* ================================
   레이아웃 공통 클래스 - 변경금지
================================ */
/* 최대 1400px, 화면 크기 따라 자동 조절 */
.container { max-width:1440px;margin-inline:auto; padding-inline:var(--gutter);}

/* flex 레이아웃(가로 배치) 기본 */
.flex { display: flex; align-items: center; }
/* flex - 좌우 양쪽 정렬 */
.between { justify-content: space-between; }
/* flex - 가로 중앙, 글자도 중앙 */
.center { justify-content: center; text-align: center; }
/* flex - 세로 방향으로 전환 */
.column { flex-direction: column; }
/* 섹션 제목 스타일 */
.section-title { font-size: 32px; margin-bottom: 48px; font-weight: 800; text-align: center; }
/* 섹션 위아래 여백 96px */
.section-pad { padding: 110px 0; }

/* ===== Responsive ===== */
@media (max-width: 1440px) {

.section-pad { padding: 100px 0; }
}

@media (max-width: 1280px) {

.section-pad { padding: 80px 0; }
}

@media (max-width: 1024px) {

.section-pad { padding: 60px 0; }
}
@media (max-width: 768px) {

.section-pad { padding: 40px 0; }
}
/* ================================
   레이아웃 공통 클래스 - 변경금지
================================ */



/* ================================
  Skip Link (접근성)
================================ */
.sohskip{position: fixed;top: 0; left: 0; right: 0;display: flex;justify-content: center;gap: 8px;padding: 8px;transform: translateY(-120%);transition: transform .15s ease;z-index: 10000; /* 헤더/모달 위로 */}
.sohskip:focus-within{transform: translateY(0);}
.sohskip a{display: inline-block;padding: 10px 14px;
  font-weight: 700;
  border-radius: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  outline: none;}
.sohskip a:focus-visible{outline: 3px solid color-mix(in oklab, var(--search-focus, #2f7efb) 60%, transparent);}

/* 두 번째 링크가 아래에 겹치지 않게 살짝 아래로 */
.sohskip a + a:focus-visible{ /* 필요 시 조절 : 문제가생기면 수정해주자! margin-top: 48px;*/}
#container, #gnb{scroll-margin-top: calc(var(--fixed-header-h) + 12px);}	
/* 사용자가 reduce motion 설정 시 애니메이션 제거 */
@media (prefers-reduced-motion: reduce){.sohskip{ transition: none;}}	

/* ================================
   헤더: 로고 메뉴 기본 (s)
================================ */
.header{background:#fff;padding:6px 0 30px 0;position:sticky;position: -webkit-sticky; /* iOS 구형 대비 */top:0;z-index:100;border-bottom:1px solid #ddd;}
/* 상단줄/메인줄 레이아웃 */
.header .container{ display:flex; flex-direction:column; gap:6px; }
.header-top{ display:flex; justify-content:flex-end; align-items:center; min-height:32px; }
.header-main{ display:flex; align-items:center; justify-content:space-between; }

.logo{}
.logo img{display:block;height:58px;}

/*메뉴기본*/
.menu{list-style:none;margin:0;padding:0;display:flex;align-items center;}
.menu li{position:relative;}
.menu-link{display:block;padding:12px 8px;color:#111;font-size:24px;font-weight:700;text-decoration:none;line-height:1;}
.menu-link:hover{color:var(--primary);}
.nav-close{ display:none; }

/* ===== Responsive ===== */

/* pc-big */
@media (max-width: 1440px) {
	.header{padding:6px 0 20px 0;}
	.logo img{height:48px;}
	.menu-link{font-size:22px;} 
}


/* pc // 모바일에서 삭제할게 많아서 메뉴만 min-width로 둠 */
@media (min-width:1025px){
  .nav-close{display:none !important; }
  .burger{display:none;}
  .menu{display:flex;gap:40px;align-items:center;}

  .has-sub > .sub{position:absolute;left:0;top:100%;min-width:220px;background:#fff;border:1px solid #eee;border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;}

  .has-sub:hover > .sub,
  .has-sub:focus-within > .sub{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;}
  .sub{list-style:none;margin:0;padding:6px 0;}
  .sub a{display:block;padding:10px 12px;border-radius:8px;color:#333;font-size:16px;}
  .sub a:hover{background:#f3f5fa;}
  /* 데스크톱에선 hidden 무시 */
  .has-sub > .sub[hidden]{display:block !important;opacity:0;visibility:hidden;}

  /* 왕복 시 잔여 상태를 무조건 끔 : 굳이 추가안해도 되긴함*/
  .overlay{display:none !important;opacity:0 !important;}
}

/* notebook */
@media (max-width:1024px){
   .header-main {padding-top:14px;}
   .nav.nav--portal .nav-close{position: absolute;top: 5px;right: 12px;width: 36px;height: 36px;display: inline-flex;align-items: center;justify-content: center;border-radius: 6px;
   background: #fff;font-weight:300;font-size: 24px; /* “×” 크기 */line-height: 1;cursor: pointer;z-index: 2;font-size: 0; line-height: 0;color: #111;} /*border: 1px solid #e5e7eb;*/
  .nav.nav--portal .nav-close:hover{ background:#f7f9fc; }
  /* 가운데 정확히 교차하는 두 줄 */
  .nav.nav--portal .nav-close::before,
  .nav.nav--portal .nav-close::after{content: "";position: absolute;left: 50%;top: 50%;width: 18px;/* X 길이 */height: 2px;/* X 두께 */background: currentColor;border-radius: 1px;transform-origin: center;}
  .nav.nav--portal .nav-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  .nav.nav--portal .nav-close::after { transform: translate(-50%,-50%) rotate(-45deg); }

  .nav.nav--portal .nav-close:hover{ background:#f7f9fc; color:#034694; }


  .burger{display:inline-block;background:none;border:0;cursor:pointer;padding:2px;margin-left:12px;width:38px;height:42px;}
  .burger span{display:block;width:34px;height:2px;background:#333;margin:8px 0;transition:.25s;transform-origin:left}
  /* 메뉴가 덮어버리므로 여기에서는 필요치않음
  .nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-open .burger span:nth-child(2){opacity:0}
  .nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  */

  /*.nav는 패널화하지 않음 (flicker 방지) */
  .nav{will-change:transform}

  /*모바일에서 메뉴는 숨김(버거만 보임) */
  .menu{display:none}

  /* 패널화는 .nav--portal 일 때만 */
  .nav.nav--portal{position:fixed; inset:0 0 0 auto;  /* 오른쪽 패널 */width:320px; max-width:86vw;background:#fff; border-left:1px solid #eee;transform:translateX(100%); transition:transform .28s ease;z-index:1400;padding:20px 14px;overflow:auto;}
  .nav-open .nav.nav--portal{transform:none}

  /* 패널이 열렸을 때만 메뉴 보이기 + 모바일 전용 스타일 적용 */
  .nav.nav--portal .menu{display:block}
  .nav.nav--portal .menu>li{border-bottom:1px solid #f0f0f0}
  .nav.nav--portal .menu-link{display:flex;align-items:center;justify-content:space-between;padding:14px 6px;font-size:18px}
  .nav.nav--portal .menu-link[aria-haspopup="true"]::after{content:"▾";margin-left:10px;transition:transform .2s}
  .nav.nav--portal .menu-link[aria-expanded="true"]::after{transform:rotate(180deg)}
  .nav.nav--portal .sub{padding:4px 0 10px 10px}
  .nav.nav--portal .sub[hidden]{display:none !important}
  .nav.nav--portal .sub a{display:block;padding:10px 8px;border-radius:8px;color:#333;font-size:14px;}
  .nav.nav--portal .sub a:hover{background:#f7f9fc}

  /* 오버레이: 헤더까지 어둡게, 패널 아래 */
  .overlay{position:fixed; inset:0; background:rgba(0,0,0,.38);z-index:1300; display:none; opacity:0; transition:opacity .2s}
  .overlay.is-open{display:block; opacity:1; pointer-events:auto;}

  /* 본문 스크롤 잠금 해제 시 주석처리~!!*/
  .nav-open{overflow:hidden} 

}
/* tablet */
@media (max-width: 768px) {
	.header{padding:18px 0;}
	.header-main {padding-top:0px;}
	.logo img{height:42px;}
}


/* ================================
   헤더: 장애인종합지원센터 바로가기
================================ */

.quick-btn{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:6px;
  background:#fefefe;color:#034694;text-decoration:none; font-weight:500;font-size:14px; line-height:1;
  border:1px solid #034694; white-space:nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.quick-btn:hover{ background:var(--primary); color:#fff; }
.quick-btn:active{ transform:none; }

/* 표시 규칙 */
.header-top{ display:flex; }           /* PC: 상단줄 보임 */
.quick-btn--panel{ display:none; }     /* PC: 패널 내부 버튼 숨김 */


@media (max-width:1024px){
  .header-top{ display:none; }           /* 모바일: 상단줄 자체 숨김 */
  .nav.nav--portal .quick-btn--panel{
    display:inline-flex;
    font-size:14px; padding:8px 12px;
    margin: 4px 0 12px auto;             /* 패널 상단 우측 정렬 */
  }
}




/* ================================
   검색섹션 (s)
================================ */
.search-section{display:flex; flex-direction:column; align-items:center; gap:38px; margin-bottom:110px;}

/* 제목 */
.search-title{color:var(--search-text); text-align:center; font-weight:700;letter-spacing:-.02em; font-size:56px; line-height:1;}
/* 롤링 효과 전용 */
.roller{display:inline-block;overflow:hidden; /* JS가 정확한 px 높이로 덮어쓸 값 */height:1em;vertical-align:bottom; backface-visibility:hidden;transform:translateZ(0);}
.roller__inner{display:block;will-change:transform;animation: roll 6s ease-in-out infinite;}
.roller__inner>span{ display:block; white-space:nowrap; /*필요 시 값 조절*/line-height:1.15;}

  /*  */
  @keyframes roll{
    0%, 42%   { transform: translate3d(0, 0, 0); }
    50%, 92%  { transform: translate3d(0, calc(-1 * var(--item-h, 0px)), 0); }
    100%      { transform: translate3d(0, 0, 0); }
  }

  /* 호버 일시정지 */
  .search-title:hover .roller__inner{ animation-play-state: paused; }

  /* 모션 최소화*/
  @media (prefers-reduced-motion: reduce){
    .roller__inner{ animation:none; }
  }


/* 화면이 넓으면 760, 좁으면 100% */
.search-max{width:100%;max-width:760px;margin-inline:auto;box-sizing:border-box;}

/* 검색과버튼 */
.search-form{display:flex; align-items:center; gap:12px; height:80px; max-width:760px; width:100%;}

/* 인풋 */
#sch_str{flex:1 1 0; min-width:0; height:100%; padding:0 22px; box-sizing:border-box;border:4px solid var(--search-border); border-radius:16px; background:#fff;font-size:18px; outline:0;}
#sch_str::placeholder{ color:#8893a7; }
#sch_str:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--search-focus) 20%, transparent);border-color:var(--search-focus);}

/* 버튼 80x80, 아이콘 40x40 */
#sch_submit{flex:0 0 80px; width:80px; height:80px; border:2px solid var(--search-border); border-radius:16px;
  background:#0b3f86 url("../img/search.svg") no-repeat center / 40px 40px;
  cursor:pointer; transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;}
#sch_submit:hover{ background-color:#0a3775; }
#sch_submit:focus-visible{ outline:0; box-shadow:0 0 0 3px color-mix(in oklab, var(--search-focus) 35%, transparent); }


/* ===== Responsive ===== */
@media (max-width:1440px){
  .search-section{ gap:34px; margin-bottom:100px; }
  .search-form{ height:70px; }
  #sch_submit{ flex:0 0 70px;width:70px; height:70px; background-size:32px 32px; }
  .search-title{ font-size:50px; }
}
@media (max-width:1280px){
  .search-section{ margin-bottom:80px; }
  .search-form{ height:66px; }
  #sch_submit{flex:0 0 66px; width:66px; height:66px; background-size:30px 30px; }
  .search-title{ font-size:44px; }
}
@media (max-width:1024px){
  .search-section{ gap:26px; margin-bottom:60px; }
  .search-form{ height:64px; gap:10px; }
  #sch_submit{ flex:0 0 64px; width:64px; height:64px; background-size:28px 28px; }
  .search-title{ font-size:38px; }
}
@media (max-width:768px){
  .search-section{ gap:22px; margin-bottom:40px; }
  .search-form{ height:58px; gap:8px; }
  #sch_str{ padding:0 16px; border-radius:12px; }
  #sch_submit{flex:0 0 58px; width:58px; height:58px; background-size:26px 26px; border-radius:12px; }
  .search-title{ font-size:34px; }
}
@media (max-width:480px){
  .search-form{ height:54px; }
  #sch_submit{flex:0 0 54px; width:54px; height:54px; background-size:24px 24px; }
  .search-title{ font-size:30px; }
}

/* 접근성 유틸 */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
}


/* ================================
   카드섹션 (s)
================================ */

.stat-categories{ background: var(--bg); }
.card-grid{list-style:none; margin:0; padding:0;display:grid; gap:40px; grid-template-columns:repeat(3,minmax(0,1fr));}

/* 카드 전체를 div로 → 링크처럼 보이도록 */
.card-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; /*gap:18px; 각각 지정해주자 요소들마다 간격이 다름*/
  min-height:400px; padding:24px;
  background:var(--card-bg); color:var(--card-text);
  border:1px solid var(--card-border); border-radius:var(--radius);  
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor:pointer;

  /* 서브픽셀 흔들림 방지 */
  will-change: transform; 
  backface-visibility: hidden;
  transform: translateZ(0);
}
.card-link:hover{ transform:translateY(-2px);box-shadow:var(--card-shadow); }
.card-link:focus-visible{ outline:2px solid rgba(13,59,120,.6); outline-offset:3px; }
.card-link:is(:hover,:focus-visible),
.card-link.is-active{
  background:var(--card-primary);
  color:var(--card-primary-ink);
  border-color:transparent; 
}

/* 아이콘 자리표시 */
.icon{margin:0}

/* 아이콘 영역을 “정사각형 박스”로 고정해서 높이/정렬 흔들림 제거 */
.icon-placeholder{
  width:128px; height:128px;   /* 기본 아이콘 캔버스 */
  display:inline-flex; align-items:center; justify-content:center;
}

/* img/SVG는 박스 요소 + 박스 꽉 채우기 + GPU 고정 */
.icon-placeholder img,
.icon-placeholder svg{
  display:block;
  width:100%; height:100%;
  object-fit:contain;           /* 원본 비율 유지 */
  transform-box: fill-box;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
}

/* 카드제목 */
.card-title{ font-size:40px; font-weight:600; letter-spacing:-.3px; margin:50px 0 0px 0;line-height:1 }

/* (개별 링크) */
.chips{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:0 }
.chip{
  display:inline-flex; align-items:center; padding:8px 14px;
  background:var(--card-chip); color:var(--card-chip-text);font-weight:400;
  border-radius:999px; font-size:18px; line-height:1; white-space:nowrap;
  border:1px solid #EAEAEE; text-decoration:none;
}
.chip:hover{ text-decoration:underline; }
.chip:focus-visible{ outline:2px solid rgba(13,59,120,.35); outline-offset:2px }

/* 카드 hover/활성화 시  반전 */
.card-link:is(:hover,:focus-visible) .chip,
.card-link.is-active .chip{
  background:transparent;
  color:#fff; border-color:#84BCDD;
}


/* 카드 섹션: 등장 애니메이션 (추가) */

/* 등장 전 기본 상태 */
.card-grid .card{
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}

/* 화면에 들어오면 보이기 */
.card-grid .card.is-visible{
  opacity: 1;
  transform: none;
  transition:
    opacity .45s ease,
    transform .45s ease;
  /* 카드마다 지연 시간을 다르게 → 부드러운 스태거 */
  transition-delay: calc(var(--stagger, 0) * 60ms);
}

/* ===== Responsive ===== */
/* pc-big */
@media (max-width: 1440px) {
	.card-grid{gap:30px}
	.card-link{min-height:360px;}
	.card-title{ font-size:38px; margin:40px 0 0px 0 }

  /* 아이콘 캔버스도 브레이크포인트에 맞춰 축소 */
	.icon-placeholder{width:110px; height:110px;}

	.chips{gap:10px;}
	.chip{font-size:16px;}  
}
/* notebook */
@media (max-width:1280px){
	.card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}	
	.card-link{min-height:300px;}
	.card-title{ font-size:30px; margin:30px 0 0px 0 }

  /* 아이콘 캔버스도 브레이크포인트에 맞춰 축소 */
	.icon-placeholder{width:100px; height:100px;}

	.chips{gap:8px;}
	.chip{font-size:14px;}
}
/* tablet */
@media (max-width:768px){ 
	.card-grid{ grid-template-columns:repeat(1,minmax(0,1fr)); }
	.card-link{min-height:280px;}
}

/* 접근성: 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce){
  .card-link{ transition:none; }
  .card-grid .card{ opacity:1 !important; transform:none !important; }
  .card-grid .card.is-visible{ transition:none !important; }
}






/* ================================
   Footer (s)
================================ */
.site-footer{background:var(--subbg); /* 남청색 */}
.footer-inner{padding:26px 0px;display:flex; align-items:flex-start; justify-content:space-between; gap:24px;}
.footer-info{ font-size:18px;color:#A2A7B2;font-style:normal;font-weight:400;letter-spacing:-.2px;}
.footer-info div {line-height:140%;}
.footer-info div strong {font-weight:500;}
.footer-info div span {color:#929292;}
.footer-info p{margin-top:10px;font-size:16px;}
.footer-link{ color:#0081CC; text-decoration:none; border-bottom:1px solid transparent; }
.footer-link:hover{ border-color:#0081CC; }

/* 우측 관리자 관련사이트 부모요소 */
.footer-actions{ display:flex; align-items:center; gap:12px; }

/* 버튼모양 */
.btn-outline{border:1px solid #ccc;display:inline-flex; align-items:center; gap:8px;padding:10px 14px;border-radius:6px; color:#ccc; background:transparent; font-weight:400;font-size:16px;line-height:1;white-space:nowrap;}
.btn-outline:hover{border:1px solid #0081CC;transition:.2s}


/* 드롭다운 : 관련사이트 */
.related-wrap{ position:relative; }
.related-list{ position:absolute;z-index: 9999; right:0; bottom:calc(100% + 8px); min-width:240px; padding:8px; margin:0; list-style:none;background:var(--subbg); border:1px solid rgba(255,255,255,.2); border-radius:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);}
.related-list li a{display:block; padding:10px 12px; border-radius:6px; color:#dfe8f5; text-decoration:none;}
.related-list li a:hover{ background:rgba(255,255,255,.08); }


/* ===== Responsive ===== */
/* pc-big */
@media (max-width: 1440px) {
	.footer-info{ font-size:16px;}
	.footer-info p{font-size:14px;}
	/* 버튼모양 */
	.btn-outline{font-size:14px;}
}
/* tablet */
@media (max-width:1024px){
   .footer-info{ font-size:15px;}
  .footer-inner{ flex-direction:column; gap:18px; }
  .footer-actions{ align-self:flex-start; }
}

/* mobile */
@media (max-width: 640px){ 
  /* 버튼 두 칸 50:50 + 가로 스크롤 방지(반올림/테두리 포함) */
  .footer-actions{display:flex;gap:10px;width:100%;}
  /* 정확히 반반. min-width:0로 텍스트 길어도 균등 유지 */
  .footer-actions > *{flex: 1 1 0;min-width: 0;}
  /* 버튼은 칸을 100% 채움(테두리 포함, 박스사이징 통일) */
  .btn-outline{width:100%;justify-content:center;}

  /* 드롭다운이 잘리지 않도록 기준/층위 보장 */
  .site-footer, .footer, .footer-inner{ overflow:visible; } 
  .related-wrap{position:relative; /* dropdown 기준 */display:flex;z-index: 1; }
  .related-list{position:absolute; right:0;z-index: 9999;/* 위로 띄우기 */ max-height: 260px;/* 길어질 때 스크롤 */overflow:auto;transform: translateZ(0);   /* 일부 모바일에서 렌더링 깨짐 방지 */}

}

/* ===== Footer (e)===== */




/* ================================
   top - btn (s)
================================ */







  .to-top{
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    background:#0CC97F url('../img/uil_arrow-up.png') no-repeat center / 24px 24px;
    width: 48px; height: 48px;
    display: grid; place-items: center; 
    color: #fff; border: none; border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
    cursor: pointer;

    /* 스크롤 전 상태 */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(8px) scale(.94);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  
  .to-top:focus-visible{ outline:3px solid color-mix(in srgb, var(--primary) 35%, white); outline-offset:2px; }
  .to-top:hover{ filter: brightness(.96); }
  .to-top.is-show{
    opacity:1; visibility:visible; pointer-events:auto;
    transform: translateY(0) scale(1);
    transition: opacity .18s ease, transform .18s ease;
  }
@media (max-width: 767px){}

/* 접근성: 모션 최소화 시 애니메이션 제거 */
@media (prefers-reduced-motion: reduce){
  .to-top{ transition: none; }
}



/* ============================================================================================================================================================================
  sub레이아웃
============================================================================================================================================================================= */
.subhead{height:280px;background-color:var(--subbg);background-image: url('../img/subhead-bg.jpg');background-size:cover;background-position: 50% 50%;background-repeat: no-repeat;display: grid;place-items: center;color: #fff;}

/* 컨텐츠 정렬 */
.subhead-inner{display:flex; align-items:center;justify-content:center;text-align:center;}
/* 타이틀 */
.subhead-title{font-size:48px;line-height: 1.35;margin:0;font-weight:400;color:#d1ddf2;letter-spacing:-0.02em;opacity: 0; transform: translateY(8px);animation: sbFadeUp .7s ease-out .15s both;}
@keyframes sbFadeUp{
	to{ opacity:1; transform:none; }}
	.subhead-title b{font-weight:600;position:relative;color:#DFE8F8;} /*동작안할 시 기본*/
	.subhead-title b.fx-gradient{ 
	color:#DFE8F8; /* 시작포인트 */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .subhead-title b.fx-gradient{
    background: linear-gradient(100deg,#D7F496 0%,#24A4A4 50%,#0081CC 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: gradShift 10s ease-in-out infinite alternate;
  }
}
@keyframes gradShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

/* 접근성: 모션 최소화 환경에선 정적으로 */
@media (prefers-reduced-motion: reduce){
  .subhead-title{ animation: none; opacity:1; transform:none; }
}

/* ===== Responsive ===== */
@media (max-width:1440px){
	.subhead{height:260px;}
	.subhead-title{ font-size:44px; }
}

@media (max-width:1280px){
	.subhead{height:220px;}
	.subhead-title{ font-size:38px; }
}

@media (max-width:1024px){
	.subhead{height:180px;}
	.subhead-title{ font-size:34px; }
}

@media (max-width:768px){
	.subhead{height:140px;}
	.subhead-title{font-size:28px;line-height:1.4;}
}

@media (max-width:480px){ 
	.subhead-title{ font-size:22px; }
}



/* ============ 타이틀 
.sr-head{ margin-bottom:40px; }
.sr-title{margin:0;color:#111;font-weight:800;letter-spacing:-.02em;font-size:42px;}
		@media (max-width:1440px){ .sr-title{ font-size:38px; } }
		@media (max-width:1024px){ .sr-title{ font-size:32px; } .sr-head{ margin-bottom:20px; } }
		@media (max-width:768px) { .sr-title{ font-size:26px; } }

============ */


/* ============ 타이틀 (검색바가 추가된 타이틀 ============ */
.sr-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:40px;
}

.sr-title{
  margin:0; color:#111; font-weight:800; letter-spacing:-.02em; font-size:42px;
}
@media (max-width:1440px){ .sr-title{ font-size:38px; } }
@media (max-width:1024px){ .sr-title{ font-size:32px; } .sr-head{ margin-bottom:20px; } }
@media (max-width:768px) { .sr-title{ font-size:26px; } }

/* ============ 검색바 ============ */

.sr-search{
  position:relative;
  flex:1 1 420px;/* 우측에서 알맞게 줄어듦 */
  max-width:480px;/* 데스크탑 최대 폭 */
  min-width:280px;
}

.sr-search input{
  width:100%; 
  padding:14px 56px 14px 16px;        /* 오른쪽 버튼 공간 확보 */
  border:2px solid var(--primary);
  border-radius:12px;               
  outline:none;
  color:#222;
  font-size:15px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.sr-search input::placeholder{ color:#9aa4b2; }
.sr-search input:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--search-focus) 20%, transparent);  border-color:var(--primary);}


.sr-search__btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; 
  border:none; border-radius:12px;
  background:url('../img/search-30.png') no-repeat center center;
  background-size: 30px 30px;   
  cursor:pointer;
}


/* 접근성용 라벨 */
.sr-visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 모바일에서는 검색바가 타이틀 아래로 100% */
@media (max-width:1024px){
  .sr-search{ flex-basis:100%; max-width:none; order:2; }
  .sr-search input{padding:12px 56px 12px 16px;}
  .sr-search__btn{background-size: 26px 26px;}
}