@charset "utf-8";
/* ============================================================
   우석장학문화재단 - sub.css  (서브페이지 공통 골격)
   ------------------------------------------------------------
   서브 시안이 확정되기 전 단계의 뼈대입니다.
   메인의 디자인 토큰(색·타이포·라운드)을 그대로 사용하므로
   시안이 나오면 이 파일의 수치만 조정하시면 됩니다.
   ============================================================ */

/* ------------------------------------------------------------
   1. 서브 비주얼 (페이지명 + 경로)
   ------------------------------------------------------------ */
/* PSD: 1920×380; photo 2000×1220 at (0,-511), black overlay 89/255. */
.sub-visual{position:relative;overflow:hidden;height:380px;padding:0;color:#fff;background:#2b3a4a}
.sub-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,#5b91c5,#4da7b6,#66b79a)}
.sub-visual .wrap{position:relative;height:100%}
.sub-visual__en{position:absolute;top:164px;left:0;font-size:18.666667px;font-weight:700;line-height:32px;letter-spacing:-.025em;color:#fff}
.sub-visual__tit{position:absolute;top:195px;left:0;margin:0;font-size:64px;font-weight:700;line-height:76.8px;letter-spacing:-.025em;color:#fff}
.breadcrumb{position:absolute;top:302px;left:0;right:0;display:flex;align-items:center;flex-wrap:wrap;row-gap:8px;margin:0;font-size:16px;font-weight:500;line-height:32px;color:#fff}
.breadcrumb > *{letter-spacing:-.01em}
.breadcrumb a{color:#fff}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:4px}
.breadcrumb__home{display:flex;align-items:center;width:16px;height:32px;flex-shrink:0}
.breadcrumb__home img{width:16px;height:16px}
.breadcrumb > * + *{position:relative;margin-left:33px}
.breadcrumb > * + *::before{content:"";position:absolute;left:-19px;top:50%;width:7px;height:11px;transform:translateY(-50%);background:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/common/breadcrumb-arrow.png') center/7px 11px no-repeat}
.breadcrumb span:last-child{color:#fff;font-weight:500}
.sub-visual--whatwedo{background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/whatwedo/hero.jpg');background-repeat:no-repeat;background-size:max(2000px,104.166667vw) auto;background-position:calc(50% + max(40px,2.083333vw)) min(-511px,-26.614583vw)}
.sub-visual--whatwedo::before{background:rgba(0,0,0,.349019608)}

/* ------------------------------------------------------------
   2. LNB (2depth 탭 / 3depth)
   ------------------------------------------------------------ */
.lnb{margin-top:60px}
.lnb__depth2{
  display:flex;flex-wrap:wrap;
  border-bottom:1px solid #e5e5e5;
}
.lnb__depth2 > li{margin-bottom:-1px}
.lnb__depth2 > li > a{
  display:block;padding:0 30px 18px;
  font-size:20px;font-weight:600;color:#8a8a8a;
  border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.lnb__depth2 > li > a:hover{color:#111}
.lnb__depth2 > li.on > a{color:var(--c-blue);border-bottom-color:var(--c-blue)}

.lnb__depth3{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.lnb__depth3 > li > a{
  display:block;padding:9px 22px;border-radius:999px;
  font-size:16px;font-weight:600;color:#6f6f6f;background:#f3f3f3;
  transition:.2s ease;
}
.lnb__depth3 > li > a:hover{background:#e8e8e8;color:#222}
.lnb__depth3 > li.on > a{background:var(--c-blue);color:#fff}

/* ------------------------------------------------------------
   3. 본문 영역
   ------------------------------------------------------------ */
.sub-body{padding:70px 0 160px;min-height:320px}
.sub-body .page-tit{
  font-size:36px;font-weight:700;line-height:1.35;color:#111;
}
.sub-body .page-txt{
  margin-top:20px;font-size:17px;font-weight:500;line-height:30px;color:var(--c-body);
}
/* 콘텐츠 준비중 안내 (시안 확정 전 임시) */
.sub-body .ready{
  margin-top:48px;padding:90px 20px;text-align:center;
  border:1px dashed #d8d8d8;border-radius:var(--radius-card);
  background:#fafafa;color:#9a9a9a;
  font-size:16px;font-weight:500;line-height:26px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1279px){
  
  
  
  
  .lnb{margin-top:44px}
  .lnb__depth2 > li > a{padding:0 22px 15px;font-size:18px}
  .sub-body{padding:54px 0 110px}
  .sub-body .page-tit{font-size:28px}
  .sub-body .page-txt{font-size:16px;line-height:28px}
}
@media (max-width:1023px){
  
  
  .lnb__depth2{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .lnb__depth2 > li > a{white-space:nowrap;padding:0 18px 14px;font-size:17px}
}
@media (max-width:767px){
  
  
  
  
  
  
  .lnb{margin-top:32px}
  .lnb__depth2 > li > a{padding:0 14px 12px;font-size:15px}
  .lnb__depth3{gap:8px;margin-top:18px}
  .lnb__depth3 > li > a{padding:8px 16px;font-size:14px}
  .sub-body{padding:40px 0 80px}
  .sub-body .page-tit{font-size:22px}
  .sub-body .page-txt{margin-top:14px;font-size:14.5px;line-height:25px}
  .sub-body .ready{margin-top:32px;padding:60px 16px;font-size:14px}
}

/* Same typography and breadcrumb assets across all four categories. */
@media(max-width:1279px){
 .sub-visual{height:360px}
 .sub-visual__en{top:142px}
 .sub-visual__tit{top:173px}
 .breadcrumb{top:282px}
}
@media(max-width:767px){
 .sub-visual{height:340px}
 .sub-visual__en{top:122px}
 .sub-visual__tit{top:158px;font-size:clamp(40px,8.333333vw,64px);line-height:1.2}
 .breadcrumb{top:266px;font-size:16px}
 .breadcrumb > * + *{margin-left:26px}
 .breadcrumb > * + *::before{left:-16px}
}

/* Additional category photos: measured from the supplied PSD layer bounds. */
.sub-visual--about{background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/about/hero.jpg');background-repeat:no-repeat;background-size:max(2000px,104.166666667vw) auto;background-position:calc(50% - max(40px,2.083333333vw)) min(-422px,-21.979166667vw)}
.sub-visual--about::before{background:transparent}
.sub-visual--projects{background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/projects/hero.jpg');background-repeat:no-repeat;background-size:max(2500px,130.208333333vw) auto;background-position:calc(50% + max(45px,2.343750000vw)) min(-331px,-17.239583333vw)}
.sub-visual--projects::before{background:transparent}
.sub-visual--news{background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/news/hero.jpg');background-repeat:no-repeat;background-size:max(2000px,104.166666667vw) auto;background-position:calc(50% + max(40px,2.083333333vw)) min(-394px,-20.520833333vw)}
.sub-visual--news::before{background:rgba(0,0,0,0.349019608)}

/* Foundation hero menus: shared group/precision geometry, lavender accent. */
.sub-visual{overflow:visible;z-index:20}
.sub-visual .breadcrumb{top:auto;bottom:42px;right:auto;max-width:calc(100% - 650px);flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.sub-visual .breadcrumb::-webkit-scrollbar{display:none}
.sub-visual .breadcrumb>*{flex-shrink:0}
.ws-hero-menus{position:absolute;right:0;bottom:28px;display:flex;gap:10px;width:616px;z-index:30}
.ws-hero-menu{position:relative;flex:1;min-width:0;color:#fff}
.ws-hero-menu summary{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:63px;padding:0 36px;list-style:none;border-radius:32px;background:rgba(255,255,255,.26);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:inherit;font-size:16px;font-weight:700;line-height:1.4;cursor:pointer}
.ws-hero-menu summary::-webkit-details-marker{display:none}
.ws-hero-menu summary::marker{content:""}
.ws-hero-menu[open] summary{background:var(--c-accent);border-radius:32px 32px 0 0;backdrop-filter:none;-webkit-backdrop-filter:none}
.ws-hero-menu__caret{width:9px;height:9px;flex-shrink:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.ws-hero-menu[open] .ws-hero-menu__caret{transform:rotate(225deg);margin-top:4px}
.ws-hero-menu ul{position:absolute;left:0;right:0;top:100%;margin:0;padding:0 36px 23px;list-style:none;background:var(--c-accent);border-radius:0 0 30px 30px;max-height:440px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 15px 20px rgba(0,30,60,.08);scrollbar-width:thin;scrollbar-color:#E8DEF5 var(--c-accent)}
.ws-hero-menu a{display:flex;align-items:center;min-height:40px;padding:7px 0;color:rgba(255,255,255,.82);font-size:16px;font-weight:500;line-height:1.4;word-break:keep-all}
.ws-hero-menu a:hover,.ws-hero-menu a:focus-visible,.ws-hero-menu a[aria-current],.ws-hero-menu a.is-active{color:#fff;font-weight:700}
.ws-hero-menu a.ws-hero-menu__child{padding-left:14px;font-size:14px}
.ws-hero-menu summary:focus-visible,.ws-hero-menu a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.ws-hero-menu ul::-webkit-scrollbar{width:8px}
.ws-hero-menu ul::-webkit-scrollbar-track{background:var(--c-accent)}
.ws-hero-menu ul::-webkit-scrollbar-thumb{background:#E8DEF5;border:2px solid var(--c-accent);border-radius:8px}
#lnb[hidden]{display:none}
@media(max-width:1100px){
 .sub-visual{height:430px}
 .sub-visual .breadcrumb{bottom:110px;max-width:100%;right:0}
 .ws-hero-menus{left:0;right:0;bottom:28px;width:auto}
 .ws-hero-menu summary{height:58px}
}
@media(max-width:767px){
 .sub-visual{height:420px}
 .sub-visual .breadcrumb{bottom:106px;font-size:14px}
 .ws-hero-menu summary{height:54px;padding:0 18px;font-size:13px}
 .ws-hero-menu ul{padding:0 18px 19px;max-height:360px;max-height:min(360px,65vh)}
 .ws-hero-menu a{font-size:13px}
 .ws-hero-menu a.ws-hero-menu__child{font-size:12px;padding-left:8px}
}
@media(prefers-reduced-motion:reduce){.ws-hero-menu__caret{transition:none}}