/*     1253695 : 타이틀 텍스트      */
/* =========================================================
   병원소개 페이지 전용 CSS (기존 .sub01_1 규칙 전체 교체)
   팔레트: #173348 네이비 / #254c87 블루 / #67a3ea 라이트블루
   폰트, letter-spacing은 메인 CSS의 * 규칙(Pretendard)을 그대로 따름
   본문 기준 크기는 기존 body 1.8rem / en_tit 2.2rem / sect4 txt 2.3rem 에 맞춤
   ========================================================= */
/* 이 페이지에만 적용되도록 .gn-intro를 품은 요소만 지정 (다른 페이지 영향 없음) */
.container:has(.gn-intro){padding-top:0;}
/* 헤더가 항상 흰 배경으로 맨 위에 오도록. 스킨 기본값은 스크롤 전 투명(background:none)이라
   히어로 이미지가 비쳐 메뉴가 가려집니다. 이 페이지에서만 불투명 처리합니다. */
body:has(.gn-intro) #header{background:#fff !important;box-shadow:0 1px 2px rgba(0,0,0,.08);}

.gn-intro{
  --c-primary:#254c87;
  --c-primary-deep:#173348;
  --c-primary-mid:#67a3ea;
  --c-primary-soft:#edf3fb;
  --c-ink:#222222;
  --c-ink-soft:#606c7d;
  --c-line:#e1e6ee;
  --w:1360px;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-size:1.9rem;line-height:1.75;color:var(--c-ink);word-break:keep-all;
}
.gn-intro *{box-sizing:border-box;}
.gn-intro h1,.gn-intro h2,.gn-intro h3,.gn-intro p,.gn-intro ul,.gn-intro ol,.gn-intro li{margin:0;padding:0;}
.gn-intro ol,.gn-intro ul{list-style:none;}
.gn-intro img{display:block;max-width:100%;}
.gn-intro .in{width:min(var(--w),calc(100% - 6rem));margin:0 auto;}
.gn-intro .img{position:relative;overflow:hidden;background:var(--c-primary-soft);}
.gn-intro .img img{width:100%;height:100%;object-fit:cover;}

/* ---------- HERO : 타이틀 좌상단, 소개문 하단 2단 ---------- */
.gn-hero{position:relative;height:96vh;min-height:70rem;max-height:96rem;overflow:hidden;background:var(--c-primary-deep);}
.gn-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;}
.gn-hero .hero-img img{transform:scale(1.08);transform-origin:center 40%;}
.gn-hero .hero-img .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,51,72,.45) 0%,rgba(23,51,72,.06) 38%,rgba(23,51,72,.72) 100%);}
.gn-hero .copy{position:absolute;inset:0;}
.gn-hero .copy .in{position:relative;height:100%;display:flex;align-items:flex-end;padding:10rem 0 9rem;}
.gn-hero .row{display:grid;grid-template-columns:1fr 1.15fr;gap:7rem;align-items:start;width:100%;}
.gn-hero .head .en{font-size:2.2rem;letter-spacing:.04em !important;color:rgba(255,255,255,.85);font-weight:600;margin-bottom:1.6rem;text-shadow:0 2px 10px rgba(0,0,0,.35);}
.gn-hero h1{font-weight:300;font-size:6.8rem;line-height:1.2;color:#fff;letter-spacing:-.04em !important;text-shadow:0 2px 16px rgba(0,0,0,.35);}
.gn-hero h1 strong{font-weight:700;color:var(--c-primary-mid);}
.gn-hero .side{padding-left:5rem;border-left:1px solid rgba(255,255,255,.35);}
.gn-hero .lead{font-size:2.6rem;line-height:1.55;color:#fff;font-weight:300;margin-bottom:3rem;text-shadow:0 2px 12px rgba(0,0,0,.3);}
.gn-hero .about p{font-size:1.9rem;line-height:1.8;color:rgba(255,255,255,.92);text-shadow:0 2px 10px rgba(0,0,0,.35);}
.gn-hero .about p + p{margin-top:1.6rem;color:rgba(255,255,255,.78);}
.gn-hero .promise{margin-top:2.8rem;display:flex;gap:3.2rem;padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.3);}
.gn-hero .promise li{font-size:1.9rem;font-weight:600;color:#fff;display:flex;gap:.9rem;align-items:center;text-shadow:0 2px 10px rgba(0,0,0,.35);}
.gn-hero .promise li::before{content:"";width:.8rem;height:.8rem;border-radius:50%;background:var(--c-primary-mid);flex:none;}
.gn-hero .head,.gn-hero .side{opacity:0;transform:translateY(20px);animation:gnHeroIn .9s var(--ease) forwards;}
.gn-hero .head{animation-delay:.15s;}
.gn-hero .side{animation-delay:.4s;}
@keyframes gnHeroIn{to{opacity:1;transform:none;}}

/* ---------- 공통 섹션 헤더 / reveal ---------- */
.gn-sec-head{display:grid;grid-template-columns:20rem 1fr;gap:4rem;margin-bottom:7rem;}
.gn-sec-head .en{font-size:2.2rem;letter-spacing:.04em !important;color:var(--c-primary);font-weight:600;padding-top:1.2rem;}
.gn-sec-head h2{font-weight:300;font-size:4.4rem;line-height:1.42;color:var(--c-primary-deep);}
.gn-sec-head h2 strong{font-weight:700;color:var(--c-primary);}
.gn-sec-head p{margin-top:2rem;color:var(--c-ink-soft);font-size:2rem;}
.gn-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.gn-reveal.on{opacity:1;transform:none;}
.gn-reveal.d1{transition-delay:.15s;}
.gn-reveal.d2{transition-delay:.3s;}

/* ---------- VISION ---------- */
.gn-vision{padding:13rem 0;background:#fff;border-bottom:1px solid var(--c-line);}
.gn-vision .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem;}
.gn-vision .item .img{aspect-ratio:4/3;border-radius:1.6rem 1.6rem 0 0;clip-path:inset(0 0 100% 0 round 1.6rem 1.6rem 0 0);transition:clip-path 1s var(--ease);}
.gn-vision .item.on .img{clip-path:inset(0 0 0 0 round 1.6rem 1.6rem 0 0);}
.gn-vision .item:nth-child(2) .img{transition-delay:.15s;}
.gn-vision .item:nth-child(3) .img{transition-delay:.3s;}
.gn-vision .item .body{padding:2.8rem 0 0;border-top:3px solid var(--c-primary-deep);position:relative;}
.gn-vision .item .body::before{content:"";position:absolute;left:0;top:-3px;height:3px;width:0;background:var(--c-primary-mid);transition:width 1s var(--ease) .4s;}
.gn-vision .item.on .body::before{width:100%;}
.gn-vision .item .body > *{opacity:0;transform:translateY(10px);transition:all .7s var(--ease) .5s;}
.gn-vision .item.on .body > *{opacity:1;transform:none;}
.gn-vision .item h3{font-size:2.8rem;font-weight:700;color:var(--c-primary-deep);margin-bottom:.4rem;}
.gn-vision .item .kw{font-size:1.8rem;color:var(--c-primary);font-weight:600;margin-bottom:1.4rem;display:block;}
.gn-vision .item p{font-size:1.9rem;line-height:1.7;color:var(--c-ink-soft);}

/* ---------- SYSTEM (멸균) ---------- */
.gn-system{padding:13rem 0;background:var(--c-primary-soft);}
.gn-system .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:7rem;align-items:start;}
.gn-system .sticky{position:sticky;top:13rem;}
.gn-system .frame{aspect-ratio:1/1;border-radius:2.4rem;overflow:hidden;position:relative;background:#fff;}
.gn-system .frame .img{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);}
.gn-system .frame.basic .img:nth-child(1),
.gn-system .frame.img2 .img:nth-child(2),
.gn-system .frame.img3 .img:nth-child(3){opacity:1;}
.gn-system .cap{margin-top:2rem;font-size:1.8rem;color:var(--c-ink-soft);}
.gn-steps{counter-reset:step;}
.gn-steps li{counter-increment:step;display:grid;grid-template-columns:8rem 1fr;gap:2.4rem;padding:3.2rem 0;border-bottom:1px solid rgba(23,51,72,.15);transition:opacity .4s;}
.gn-steps li:first-child{padding-top:0;}
.gn-steps li::before{content:counter(step,decimal-leading-zero);font-size:3.4rem;font-weight:300;color:var(--c-primary-mid);line-height:1;padding-top:.4rem;transition:color .4s;}
.gn-steps li.cur::before{color:var(--c-primary-deep);font-weight:700;}
.gn-steps li:not(.cur){opacity:.55;}
.gn-steps h3{font-size:2.6rem;font-weight:700;color:var(--c-primary-deep);margin-bottom:.8rem;}
.gn-steps p{font-size:1.9rem;line-height:1.7;color:var(--c-ink-soft);}
.gn-system .note{margin-top:4rem;padding:2.4rem 2.8rem;background:#fff;border-radius:1.4rem;font-size:1.9rem;line-height:1.7;color:var(--c-ink);display:flex;gap:1.4rem;align-items:flex-start;}
.gn-system .note::before{content:"";width:1.1rem;height:1.1rem;border-radius:50%;background:var(--c-primary-mid);flex:none;margin-top:1rem;}

/* ---------- STAFF ---------- */
.gn-staff{padding:13rem 0;background:#fff;}
.gn-staff .head{max-width:86rem;margin:0 auto 7rem;text-align:center;}
.gn-staff .head .en{font-size:2.2rem;letter-spacing:.04em !important;color:var(--c-primary);font-weight:600;margin-bottom:2.4rem;}
.gn-staff .head h2{font-weight:300;font-size:4.4rem;line-height:1.42;color:var(--c-primary-deep);margin-bottom:3rem;}
.gn-staff .head h2 strong{font-weight:700;color:var(--c-primary);}
.gn-staff .head p{font-size:2.3rem;line-height:1.7;color:var(--c-ink-soft);}
.gn-staff .band{position:relative;}
.gn-staff .band .img{aspect-ratio:21/9;}
.gn-staff .band{margin-bottom:0;}

/* ---------- 헤더(고정) 높이만큼 내리기 ----------
   PC 헤더 실측: padding 10+5 + gnb_p 27 + margin 5 + 로고/메뉴 50 = 약 97px
   헤더 배경이 스크롤 전에는 투명이라 히어로가 그대로 비쳐 메뉴를 덮으므로
   히어로 자체를 헤더 높이만큼 내립니다. 헤더 높이가 바뀌면 --gn-head 값만 수정. */
@media all and (min-width:1400px){
  .gn-hero{--gn-head:10rem;margin-top:var(--gn-head);height:calc(96vh - var(--gn-head));min-height:62rem;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1400px){
  .gn-intro{--w:1140px;}
  .gn-hero h1{font-size:5.6rem;}
}
@media (max-width:1024px){
  .gn-hero h1{font-size:4.8rem;}
  .gn-sec-head{grid-template-columns:1fr;gap:1.6rem;margin-bottom:5rem;}
  .gn-hero h1{font-size:5.4rem;}
  .gn-hero .row{grid-template-columns:1fr;gap:3rem;}
  .gn-hero .side{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.35);padding-top:3rem;}
  .gn-hero .copy .in{padding:8rem 0 8rem;}
  .gn-sec-head h2,.gn-staff .head h2{font-size:3.6rem;}
  .gn-system .wrap{grid-template-columns:1fr;gap:4rem;}
  .gn-system .sticky{position:static;}
  .gn-system .frame{aspect-ratio:16/9;}
}
@media (max-width:768px){
  .gn-intro{font-size:1.8rem;}
  .gn-intro .in{width:calc(100% - 4rem);}
  .gn-hero{height:auto;min-height:0;max-height:none;}
  .gn-hero .hero-img{position:relative;inset:auto;width:100%;height:60vh;min-height:34rem;max-height:46rem;}
  .gn-hero .copy{position:static;}
  .gn-hero .copy .in{display:block;height:auto;width:calc(100% - 4rem);padding:0 0 5rem;}
  .gn-hero .row{display:block;}
  .gn-hero .head{margin-top:-20rem;position:relative;z-index:2;}
  .gn-hero .head .en{font-size:1.9rem;}
  .gn-hero h1{font-size:4rem;}
  .gn-hero .lead{font-size:2.1rem;}
  .gn-hero .side{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.35);padding-top:2.8rem;margin-top:3.2rem;}
  .gn-hero .lead{margin-bottom:2.4rem;}
  .gn-hero .about p{font-size:1.8rem;}
    .gn-vision,.gn-system,.gn-staff{padding:8rem 0;}
  .gn-vision .grid{grid-template-columns:1fr;gap:5rem;}
  .gn-system .sticky{position:sticky;top:6rem;z-index:2;}
  .gn-system .cap{display:none;}
  .gn-steps li{grid-template-columns:6rem 1fr;gap:1.6rem;padding:2.8rem 0;}
  .gn-steps li::before{font-size:2.8rem;}
  .gn-steps h3{font-size:2.2rem;}
  .gn-sec-head h2,.gn-staff .head h2{font-size:3rem;}
  .gn-staff .head p{font-size:2rem;}
  .gn-staff .band .img{aspect-ratio:4/3;}
  .gn-cta .in{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .gn-intro *{transition-duration:.01ms !important;}
  .gn-reveal,.gn-vision .item .body > *,.gn-staff .band .quote{opacity:1;transform:none;}
  .gn-vision .item .img{clip-path:none;}
}

/* 모바일에서만 줄바꿈되는 br */
.gn-mb-br{display:none;}

/* ---------- 모바일 글자 크기 (px 고정, 최소 16px) ----------
   스킨이 모바일에서 html 기준 글자 크기를 줄이는 경우 rem 값이 함께 작아지므로
   본문 영역은 px로 고정합니다. 여기 값만 조정하면 모바일 타이포가 일괄로 바뀝니다. */
@media (max-width:768px){
  .gn-intro{font-size:17px;}
  .gn-hero .head .en{font-size:17px;}
  .gn-hero h1{font-size:34px;}
  .gn-hero .lead{font-size:20px;}
  .gn-hero .about p{font-size:17px;}
  .gn-hero .about p + p{font-size:17px;}
  .gn-hero .promise li{font-size:17px;}

  .gn-sec-head .en{font-size:17px;}
  .gn-sec-head h2{font-size:27px;}
  .gn-sec-head p{font-size:17px;}

  .gn-vision .item h3{font-size:23px;}
  .gn-vision .item .kw{font-size:16px;}
  .gn-vision .item p{font-size:17px;}

  .gn-steps li::before{font-size:26px;}
  .gn-steps h3{font-size:20px;}
  .gn-steps p{font-size:17px;}
  .gn-system .note{font-size:17px;}
  .gn-system .cap{font-size:16px;}

  .gn-staff .head .en{font-size:17px;}
  .gn-staff .head h2{font-size:27px;}
  .gn-staff .head p{font-size:18px;}
}

/* ---------- 모바일 줄바꿈 조정 ---------- */
@media (max-width:768px){
  /* VISION 문장은 강제 줄바꿈 없이 한 흐름으로 */
  .gn-vision .gn-sec-head h2 br{display:none;}
  /* 의료진 문장은 "정말" 뒤에서 한 번 더 끊기 */
  .gn-mb-br{display:inline;}
}