@charset "utf-8";
/* ============================================================
   우석장학문화재단 - main.css  (메인페이지 전용)
   기준 : 1920 canvas / 1440 content
   ------------------------------------------------------------
   [비율 규칙]  이미지가 들어가는 모든 박스는 aspect-ratio 로 시안 비율을
   고정하고, background-size 의 세로값은 auto(또는 cover)로 두어
   창 크기와 무관하게 이미지 왜곡이 발생하지 않도록 했습니다.
   ============================================================ */

/* ============================================================
   1. HERO  (0 ~ 800 @1920)
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  height:41.6667vw;              /* 800 / 1920 : 어떤 폭에서도 시안 비율 유지 */
  min-height:620px;max-height:1120px;
}
.hero__bg{
  position:absolute;inset:0;
  background-image:url("/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/hero.jpg");
  background-repeat:no-repeat;
  /* PSD : 원본을 컨테이너 폭의 132.6% 로 배치, (-349,-297)@1920 */
  background-size:132.6% auto;
  background-position:55.75% 70.38%;
}
.hero__dim{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero .wrap{height:100%}

.hero__tit{
  /* @1920 = top 376.69px. 화면이 작아져도 겹치지 않도록 하단 기준 + 최소값 */
  position:absolute;left:0;bottom:max(288.91px, 36.114%);
  font-size:56px;font-weight:700;line-height:67.2px;color:#fff;
  letter-spacing:-0.025em;
}
.hero__txt{
  position:absolute;left:0;bottom:max(207.44px, 25.930%);
  font-size:18.6667px;font-weight:700;line-height:32px;color:#fff;
}

/* 스크롤 인디케이터 (글래스모피즘) */
.hero__scroll{
  position:absolute;left:50%;bottom:4%;transform:translateX(-39px);
  width:78px;height:18px;border-radius:9px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:center;padding:0 6px;gap:4px;
}
.hero__scroll i{display:block;width:56px;height:6px;border-radius:3px;background:#fff}
.hero__scroll span{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}

/* ============================================================
   2. MISSION + STATS  (800 ~ 1755 @1920)
   ============================================================ */
.sec-mission{position:relative;padding-top:160.49px}

.sec-mission .eyebrow{
  width:100%;text-align:center;
  font-size:24px;font-weight:800;line-height:32px;color:var(--c-blue);
}

.mission__text{
  margin-top:42.65px;width:100%;
  font-size:48px;font-weight:700;color:#000;
}
.mission__text .ln{
  display:flex;align-items:center;justify-content:flex-start;
  height:80px;line-height:80px;white-space:nowrap;
}
/* PSD 좌표 그대로 : 각 행의 시작 위치와 요소 간격 */
.mission__text .ln--1{padding-left:404px}
.mission__text .ln--1 > :nth-child(2){margin-left:9.6px}
.mission__text .ln--1 > :nth-child(3){margin-left:11px}
.mission__text .ln--2{padding-left:315px}
.mission__text .ln--2 > :nth-child(2){margin-left:12px}
.mission__text .ln--3{padding-left:374px}
.mission__text .ln--3 > :nth-child(2){margin-left:17.7px}
.mission__text .ln--3 > :nth-child(3){margin-left:14px}
.mission__text .ln--4{padding-left:511px}
.mission__text .ln--4 > :nth-child(2){margin-left:14px}

.hl{
  position:relative;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:267px;height:80px;color:#fff;z-index:0;
}
.hl::before{
  content:"";position:absolute;left:0;top:-1.14px;z-index:-1;
  width:100%;height:81px;border-radius:999px;
}
.hl--mint::before{background:var(--c-mint)}
.hl--purple::before{background:var(--c-purple)}
.hl--pink::before{background:var(--c-pink)}
.hl--img{width:173px}
.hl--img::before{
  top:0.86px;border-radius:999px;
  background:url("/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/mission-pill.jpg") no-repeat 57.14% 50%;
  background-size:124.3% auto;
}

/* --- 통계 배너 (1440 x 304) --- */
.stats{
  position:relative;margin-top:95.86px;
  width:100%;aspect-ratio:1440 / 304;
  border-radius:var(--radius-card);overflow:hidden;
}
.stats__bg{
  position:absolute;inset:0;
  background:url("/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/stats-bg.jpg") no-repeat 53.33% 61.96%;
  background-size:137.7% auto;
}
.stats__dim{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.stats__item{position:absolute;color:#fff}
.stats__item--1{left:11.597%}
.stats__item--2{left:40.903%}
.stats__item--3{left:78.681%}
.stats__label{
  position:absolute;top:80.24px;left:0;white-space:nowrap;
  font-size:18.6667px;font-weight:700;line-height:1;
}
.stats__num b{font-weight:700}
.stats__num{
  position:absolute;top:111.08px;left:-4.31px;white-space:nowrap;
  font-size:96px;font-weight:700;line-height:1;
}
.stats__num em{
  display:inline-block;font-style:normal;
  font-size:21.3333px;font-weight:700;line-height:1;
  transform:translateY(-52px);margin-left:14px;
}

/* ============================================================
   3. 주요사업  (1755 ~ 3186 @1920)
   ============================================================ */
.sec-biz{position:relative;padding-bottom:210px}
.sec-biz .eyebrow{
  position:absolute;left:1px;top:197.49px;
  font-size:24px;font-weight:800;line-height:32px;color:var(--c-pink);
}
.sec-biz .sec-tit{
  position:absolute;left:1px;top:251.14px;
  font-size:48px;font-weight:700;line-height:64px;color:#000;
}

/* 사진 + 카드 묶음 : 1440 x 1019 비율 고정 → 내부 요소 전부 % 배치 */
.sec-biz > .wrap{padding-top:202px}   /* margin 상쇄 방지 */
.biz-group{position:relative;width:100%;aspect-ratio:1440 / 1019}

.biz-photo{position:absolute;border-radius:var(--radius-card);overflow:hidden}
.biz-photo i{display:block;position:absolute;inset:0;background-repeat:no-repeat}
.biz-photo--grad{left:51.250%;top:0;width:35.486%;height:57.900%}
.biz-photo--grad i{
  background-image:url("/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/biz-grad.jpg");
  background-position:65.56% 59.26%;
  background-size:271.6% auto;
}
.biz-photo--music{left:0.069%;right:51.250%;top:37.095%;height:46.124%}
.biz-photo--music i{
  background-image:url("/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/biz-music.jpg");
  background-position:90.77% 13.73%;
  background-size:191.2% auto;
}

.biz-card{position:absolute;border-radius:var(--radius-card);overflow:hidden}
.biz-card__tit{
  position:absolute;font-size:37.3333px;font-weight:600;line-height:64px;
  display:flex;align-items:center;white-space:nowrap;
}
.biz-card__arrow{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-left:16px;flex:0 0 auto;transition:transform .3s ease;
}
.biz-card__arrow img{width:11px;height:11px}
.biz-card:hover .biz-card__arrow{transform:translate(3px,-4px)}
.biz-card__txt{
  position:absolute;font-size:18.6667px;font-weight:600;line-height:28px;
}
.biz-card__ico{position:absolute;height:auto}

/* 장학사업 (그라데이션) */
.biz-card--scholar{
  left:74.167%;top:36.310%;width:25.833%;height:39.058%;
  background:var(--g-scholar);
}
.biz-card--scholar .biz-card__tit{left:12.02%;top:8.274%;color:#fff}
.biz-card--scholar .biz-card__arrow{background:#fff;transform:translateY(-1.33px)}
.biz-card--scholar .biz-card__txt{left:12.02%;top:26.777%;color:#fff}
.biz-card--scholar .biz-card__ico{left:9.68%;top:68.844%;width:28.763%;filter:invert(1)}

/* 문화사업 (글래스모피즘)
   우측 끝을 연주 사진 우측과 일치시키되 1px 더 내밀었습니다.
   backdrop-filter 는 요소의 마지막 1px 열에 블러가 적용되지 않는
   브라우저 이슈가 있어, 두 우측 끝이 정확히 같으면 그 1px 로
   사진 원본이 그대로 비쳐 선처럼 보입니다. 1px 밖으로 빼면
   해당 열이 흰 배경 위에 놓여 육안으로 구분되지 않습니다. */
.biz-card--culture{
  left:21.458%;right:calc(51.250% - 1px);top:66.241%;height:33.759%;
  background:rgba(250,247,244,.6);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
.biz-card--culture .biz-card__tit{left:11.88%;top:9.573%;color:#000}
.biz-card--culture .biz-card__arrow{background:var(--c-pink);transform:translateY(-0.33px)}
.biz-card--culture .biz-card__txt{left:11.88%;top:30.980%;color:var(--c-body)}
.biz-card--culture .biz-card__ico{left:12.21%;top:65.407%;width:20.611%}

/* ============================================================
   4. 설립배경 배너  (1920 x 445) - full width
   ============================================================ */
.sec-estab{
  position:relative;overflow:hidden;
  height:23.177vw;               /* 445 / 1920 */
  min-height:405px;max-height:620px;
}
.sec-estab__bg{
  position:absolute;inset:0;
  /* 배경 이미지 1920x720 : 시안 밴드(445) 위아래로 여유를 둔 이미지 */
  background:url("/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/estab-bg.jpg") no-repeat 50% 50.182%;
  background-size:cover;
}
.sec-estab__dim{position:absolute;inset:0;background:rgba(0,0,0,.2)}
.sec-estab .wrap{height:100%}
.sec-estab .sec-tit{
  position:absolute;left:0;top:16.436%;
  font-size:48px;font-weight:700;line-height:64px;color:#fff;
}
.sec-estab .sec-txt{
  position:absolute;left:0;top:50.690%;
  font-size:18.6667px;font-weight:600;line-height:28px;color:#fff;
}
.btn-line{
  position:absolute;left:0;top:70.112%;
  width:180px;height:65px;border:1px solid #fff;border-radius:33px;
  display:flex;align-items:center;justify-content:center;
  font-size:21.3333px;font-weight:700;line-height:25.6px;color:#fff;
  transition:background-color .3s ease,color .3s ease;
}
.btn-line:hover{background:#fff;color:#111}

/* ============================================================
   5. 재단소식  (3631 ~ 4458 @1920)
   ============================================================ */
.sec-news{position:relative;padding-bottom:142.67px}
.sec-news .sec-tit{
  position:absolute;left:0;top:169.14px;width:100%;text-align:center;
  font-size:48px;font-weight:700;line-height:64px;color:#000;
}
.sec-news > .wrap{padding-top:287px}   /* margin 상쇄 방지 */
.news-list{
  width:100%;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;
}
.news-list li > a{display:block}
.news-list .thumb{
  display:block;position:relative;
  aspect-ratio:333 / 241;                /* 시안 비율 고정 → 왜곡 없음 */
  border-radius:var(--radius-card);overflow:hidden;background:#eee;
}
/* PSD 배치 그대로 : 원본 100% 크기, 중앙 크롭 */
.news-list .thumb img{position:absolute;max-width:none;transition:transform .5s ease}
.news-list li:nth-child(1) .thumb img{width:112.913%;height:101.660%;left:-6.006%;top:0}
.news-list li:nth-child(2) .thumb img{width:114.715%;height:104.564%;left:-7.207%;top:-1.245%}
.news-list li:nth-child(3) .thumb img{width:118.018%;height:104.564%;left:-9.009%;top:-2.490%}
.news-list li:nth-child(4) .thumb img{width:110.811%;height:102.075%;left:-5.405%;top:-1.245%}
.news-list li:hover .thumb img{transform:scale(1.05)}
.news-list .cat{
  display:block;margin-top:31.44px;
  font-size:21.3333px;font-weight:800;line-height:32px;color:var(--c-blue);
}
.news-list .cat--culture{color:var(--c-pink)}
.news-list .tit{
  display:block;margin-top:3.05px;
  font-size:24px;font-weight:800;line-height:32px;color:#000;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.news-list li:hover .tit{text-decoration:underline;text-underline-offset:5px}
.news-list .date{
  display:block;margin-top:25.84px;
  font-size:16px;font-weight:400;line-height:32px;color:var(--c-date);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---------- 1520 이하 : 콘텐츠 유동 ---------- */
@media (max-width:1519px){
  .hero__scroll{transform:translateX(-50%)}
}

/* ---------- 1279 이하 : 태블릿 와이드 ---------- */
@media (max-width:1279px){
  /* HERO */
  .hero{height:640px;min-height:0;max-height:none}
  .hero__bg{background-size:cover;background-position:52% 66%}
  /* 문구가 여러 줄로 늘어나도 겹치지 않도록 하단 정렬 flex 로 전환 */
  .hero .wrap{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:150px}
  .hero__tit{position:static;bottom:auto;font-size:44px;line-height:1.28}
  .hero__txt{position:static;bottom:auto;margin-top:12px;font-size:17px;line-height:28px}
  .hero__scroll{bottom:32px}

  /* MISSION */
  .sec-mission{padding-top:110px}
  .sec-mission .eyebrow{font-size:20px;line-height:28px}
  .mission__text{margin-top:34px;font-size:34px;text-align:center}
  .mission__text .ln{height:58px;line-height:58px;justify-content:center}
  .mission__text .ln--1,.mission__text .ln--2,
  .mission__text .ln--3,.mission__text .ln--4{padding-left:0}
  .mission__text .ln > * + *{margin-left:9px!important}
  .hl{width:auto;height:58px;padding:0 22px}
  .hl::before{top:-3px;height:59px;border-radius:999px}
  .hl--img{width:124px;padding:0}
  .hl--img::before{top:-3px}

  /* STATS */
  .stats{margin-top:80px;aspect-ratio:auto;height:240px}
  .stats__bg{background-size:cover;background-position:50% 62%}
  .stats__item--1{left:7%}
  .stats__item--2{left:39%}
  .stats__item--3{left:75%}
  .stats__label{top:64px;font-size:16px}
  .stats__num{top:90px;left:-3px;font-size:66px}
  .stats__num em{font-size:18px;transform:translateY(-36px);margin-left:10px}

  /* 주요사업 : 사진 + 카드 페어로 스택 */
  .sec-biz{padding:110px 0}
  .sec-biz .eyebrow,.sec-biz .sec-tit{position:static;left:auto;top:auto}
  .sec-biz .eyebrow{font-size:20px;line-height:28px}
  .sec-biz .sec-tit{margin-top:18px;font-size:34px;line-height:1.36}

  .sec-biz > .wrap{padding-top:0}
  .biz-group{margin-top:60px;aspect-ratio:auto}
  .biz-photo,.biz-card{position:relative;display:block;left:auto;right:auto;top:auto;width:auto;height:auto}
  .biz-photo i{background-size:cover;background-position:center}
  .biz-photo--grad{width:56%;margin-left:44%;aspect-ratio:511/590}
  .biz-card--scholar{width:50%;margin-left:50%;margin-top:-24%;z-index:2}
  .biz-photo--music{width:72%;margin-left:0;margin-top:6%;aspect-ratio:701/470}
  .biz-card--culture{width:50%;margin-left:14%;margin-top:-17%;z-index:2}

  .biz-card__tit{position:static;left:auto;top:auto;padding:30px 32px 0;font-size:28px;line-height:1.3}
  .biz-card__txt{position:static;display:block;left:auto;top:auto;padding:14px 32px 0;font-size:16px;line-height:26px}
  .biz-card__ico{position:static;display:block;left:auto;top:auto;margin:30px 0 32px 30px;height:auto}
  .biz-card--scholar .biz-card__ico{width:86px}
  .biz-card--culture .biz-card__ico{width:66px}
  .biz-card__arrow{width:34px;height:34px;margin-left:14px;transform:none}
  .biz-card__arrow img{width:10px;height:10px}
  .biz-card:hover .biz-card__arrow{transform:translate(3px,-3px)}

  /* 설립배경 */
  .sec-estab{height:380px;min-height:0;max-height:none}
  .sec-estab .sec-tit{top:70px;font-size:34px;line-height:1.36}
  .sec-estab .sec-txt{top:190px;font-size:16px;line-height:26px}
  .btn-line{top:250px;width:160px;height:56px;font-size:18px;border-radius:28px}

  /* 재단소식 : 2단 */
  .sec-news{padding:110px 0}
  .sec-news .sec-tit{position:static;font-size:34px;line-height:1.36}
  .sec-news > .wrap{padding-top:0}
  .news-list{margin-top:56px;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px}
  .news-list .thumb{aspect-ratio:333/241}
  .news-list li .thumb img{width:100%!important;height:100%!important;left:0!important;top:0!important;object-fit:cover;object-position:center}
  .news-list .cat{margin-top:24px;font-size:18px;line-height:26px}
  .news-list .tit{margin-top:6px;font-size:20px;line-height:28px}
  .news-list .date{margin-top:16px;font-size:14px;line-height:22px}
}

/* ---------- 1023 이하 : 태블릿 ---------- */
@media (max-width:1023px){
  .hero{height:560px}
  .hero .wrap{padding-bottom:126px}
  .hero__tit{font-size:36px}
  .hero__txt{font-size:16px;line-height:26px}

  .sec-mission{padding-top:90px}
  .mission__text{font-size:27px}
  .mission__text .ln{height:48px;line-height:48px}
  .hl{height:48px;padding:0 18px}
  .hl::before{height:49px;top:-2.5px}
  .hl--img{width:100px}

  .stats{height:200px}
  .stats__label{top:50px;font-size:14px}
  .stats__num{top:72px;font-size:52px}
  .stats__num em{font-size:15px;transform:translateY(-28px);margin-left:8px}

  .sec-biz{padding:90px 0}
  .sec-biz .sec-tit{font-size:28px}
  .biz-photo--grad{width:62%;margin-left:38%}
  .biz-card--scholar{width:56%;margin-left:44%;margin-top:-26%}
  .biz-photo--music{width:78%}
  .biz-card--culture{width:56%;margin-left:10%;margin-top:-19%}
  .biz-card__tit{padding:26px 26px 0;font-size:24px}
  .biz-card__txt{padding:12px 26px 0;font-size:15px;line-height:24px}
  .biz-card__ico{margin:24px 0 26px 24px}

  .sec-estab{height:340px}
  .sec-estab .sec-tit{top:60px;font-size:28px}
  .sec-estab .sec-txt{top:168px;font-size:15px}
  .btn-line{top:222px}

  .sec-news{padding:90px 0}
  .sec-news .sec-tit{font-size:28px}
}

/* ---------- 767 이하 : 모바일 ---------- */
@media (max-width:767px){
  .hero{height:480px}
  .hero__bg{background-position:56% 62%}
  .hero .wrap{padding-bottom:86px}
  .hero__tit{font-size:26px;line-height:1.36}
  .hero__txt{margin-top:10px;font-size:13.5px;line-height:21px}
  .hero__scroll{bottom:22px;width:66px;height:16px;padding:0 5px}
  .hero__scroll i{width:46px;height:5px}
  .hero__scroll span{width:5px;height:5px}

  .sec-mission{padding-top:72px}
  .sec-mission .eyebrow{font-size:16px}
  .mission__text{margin-top:22px;font-size:19px}
  .mission__text .ln{height:34px;line-height:34px}
  .mission__text .ln > * + *{margin-left:6px!important}
  .hl{height:34px;padding:0 13px}
  .hl::before{height:35px;top:-2px}
  .hl--img{width:72px}

  .stats{margin-top:54px;height:auto;padding:34px 0}
  .stats__item{position:relative;left:auto!important;height:auto;padding-left:24px}
  .stats__item + .stats__item{margin-top:22px}
  .stats__label{position:static;font-size:13px;line-height:1.4}
  .stats__num{position:static;margin-top:4px;font-size:40px;left:auto}
  .stats__num em{font-size:13px;transform:translateY(-20px);margin-left:6px}

  .sec-biz{padding:72px 0}
  .sec-biz .eyebrow{font-size:16px}
  .sec-biz .sec-tit{margin-top:12px;font-size:23px}
  .biz-group{margin-top:40px}
  /* 모바일에서는 장학사업 사진도 문화사업과 같은 가로형으로 : 인물이 잘리지 않도록 */
  .biz-photo--grad{width:88%;margin-left:12%;aspect-ratio:701/470}
  .biz-photo--grad i{background-position:62% 42%}
  .biz-card--scholar{width:76%;margin-left:24%;margin-top:-18%}
  .biz-photo--music{width:88%;margin-top:10%}
  .biz-card--culture{width:76%;margin-left:8%;margin-top:-22%}
  .biz-card__tit{padding:22px 22px 0;font-size:21px}
  .biz-card__arrow{width:30px;height:30px;margin-left:12px}
  .biz-card__arrow img{width:9px;height:9px}
  .biz-card__txt{padding:10px 22px 0;font-size:14px;line-height:22px}
  .biz-card__ico{margin:20px 0 24px 20px}
  .biz-card--scholar .biz-card__ico{width:64px}
  .biz-card--culture .biz-card__ico{width:50px}

  .sec-estab{height:320px}
  .sec-estab .sec-tit{top:52px;font-size:23px}
  .sec-estab .sec-txt{top:150px;font-size:14px;line-height:22px}
  .btn-line{top:206px;width:132px;height:46px;font-size:15px;border-radius:23px}

  .sec-news{padding:72px 0}
  .sec-news .sec-tit{font-size:23px}
  .news-list{grid-template-columns:minmax(0,1fr);margin-top:36px;gap:32px}
  .news-list .thumb{aspect-ratio:16/11}
  .news-list .cat{margin-top:18px;font-size:15px}
  .news-list .tit{margin-top:4px;font-size:17px;line-height:25px}
  .news-list .date{margin-top:10px;font-size:13px}
}