/* =========================================
   GLOBAL
========================================= */

*{
  box-sizing:border-box;
}

html{
  width:100%;
  max-width:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  width:100%;
  max-width:100%;
  margin:0;
  overflow-x:hidden;

  font-family:
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:#172033;
  background:#fff;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
}


/* =========================================
   HEADER
   세종병원 로고
   센터소개 / 주요진료 / 의료진 / 진료안내
   병원 홈페이지
========================================= */

.header{
  width:100%;
  height:100px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding-left:max(
    24px,
    calc((100vw - 1280px) / 2)
  );

  padding-right:max(
    24px,
    calc((100vw - 1280px) / 2)
  );

  position:sticky;
  top:0;
  z-index:100;

  background:rgba(255,255,255,.98);
  backdrop-filter:blur(10px);

  border-bottom:1px solid #e8edf3;
}


/* =========================================
   HEADER LOGO
========================================= */

.brand{
  flex:0 0 auto;

  display:flex;
  align-items:center;

  gap:12px;

  margin:0;
  padding:0;
}

.brand-mark{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#1264e8;
  color:#fff;

  font-size:24px;
}

.brand strong{
  display:block;

  font-size:20px;
}

.brand small{
  display:block;

  margin-top:2px;

  color:#8992a5;

  font-size:10px;
  letter-spacing:1.7px;
}

.brand-logo{
  display:none;

  width:auto;
  height:58px;

  max-width:210px;

  object-fit:contain;
}

#brandText{
  display:block;
}


/* =========================================
   HEADER NAVIGATION
========================================= */

.nav{
  flex:1 1 auto;

  width:auto;
  min-width:0;
  max-width:760px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:clamp(32px,3vw,54px);

  margin:0 42px;
  padding:0;

  white-space:nowrap;
}

.nav a{
  position:relative;

  flex:0 0 auto;

  height:100px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 7px;

  color:#454e5b;

  font-size:19px;
  font-weight:750;

  letter-spacing:-.6px;

  white-space:nowrap;

  transition:
    color .2s ease,
    background .2s ease;
}

.nav a:hover{
  color:#1264e8;
}


/* 현재 페이지 */

.nav a.active{
  color:#1264e8;
  font-weight:800;
}

.nav a.active::after{
  content:"";

  position:absolute;

  left:3px;
  right:3px;
  bottom:0;

  height:3px;

  background:#1264e8;

  border-radius:3px 3px 0 0;
}


/* =========================================
   HEADER 병원 홈페이지
========================================= */

.header .outline-btn{
  flex:0 0 auto;

  margin:0 !important;

  min-height:52px;

  padding:0 23px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid #d5deeb;
  border-radius:999px;

  background:#fff;

  color:#172033;

  font-size:15px;
  font-weight:750;

  letter-spacing:-.3px;

  white-space:nowrap;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.header .outline-btn:hover{
  color:#1264e8;

  border-color:#b7cae4;

  background:#f8fbff;
}


/* =========================================
   BUTTON
========================================= */

.outline-btn,
.primary-btn,
.ghost-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:13px 20px;

  border-radius:999px;

  font-weight:750;
}

.outline-btn{
  border:1px solid #d9e1ed;
}

.primary-btn{
  background:#1264e8;
  color:#fff;
}

.ghost-btn{
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
}


/* =========================================
   HERO
========================================= */

.hero{
  min-height:650px;

  display:flex;
  align-items:center;

  position:relative;

  overflow:hidden;

  padding:80px 7vw;

  background:
    linear-gradient(
      130deg,
      #061a33,
      #0b315d 58%,
      #0b5d87
    );

  color:#fff;
}

.hero:after{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(87,210,255,.19),
      transparent 28%
    );
}

.hero-content{
  width:100%;
  max-width:720px;

  position:relative;
  z-index:2;
}

.eyebrow,
.kicker{
  font-size:12px;
  letter-spacing:2.1px;
  font-weight:800;
}

.eyebrow{
  color:#83dff5;
}

.kicker{
  color:#1264e8;
}

.hero h1{
  margin:18px 0 24px;

  font-size:clamp(42px,5vw,74px);

  line-height:1.08;
  letter-spacing:-3px;

  word-break:keep-all;
  overflow-wrap:normal;
}

.hero p{
  max-width:570px;

  margin-top:0;

  font-size:20px;
  line-height:1.7;

  color:#d9e7f3;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:36px;
}


/* =========================================
   BASIC SECTION
========================================= */

.section{
  padding:100px 7vw;
}

.section.muted{
  background:#f6f8fb;
}

.section-heading{
  max-width:760px;

  margin-bottom:46px;
}

.section-heading.row{
  max-width:none;

  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:20px;
}

.section-heading h2{
  margin:10px 0 14px;

  font-size:40px;

  letter-spacing:-1.6px;

  word-break:keep-all;
}

.section-heading p,
.small-note{
  color:#667085;

  line-height:1.8;
}


/* =========================================
   COMMON CARDS
========================================= */

.cards{
  display:grid;

  gap:22px;
}

.cards.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.info-card{
  min-width:0;
  min-height:180px;

  padding:30px;

  background:#fff;

  border:1px solid #e9edf3;
  border-radius:24px;

  box-shadow:
    0 12px 35px rgba(18,44,74,.04);
}

.info-card .icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:#eaf2ff;

  color:#1264e8;

  font-weight:900;
}

.info-card h3{
  margin:22px 0 10px;

  font-size:22px;
}

.info-card p{
  color:#667085;

  line-height:1.7;
}


/* =========================================
   DOCTOR LIST
========================================= */

.doctor-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px,360px)
    );

  gap:24px;

  justify-content:start;
  align-items:start;
}

.doctor-card{
  width:100%;
  max-width:360px;

  overflow:hidden;

  background:#fff;

  border:1px solid #e7ecf2;
  border-radius:26px;
}


/* 의료진 사진 */

.doctor-photo{
  width:100%;

  aspect-ratio:1 / 1;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:#f3f6fa;
}

.doctor-photo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center bottom;

  image-rendering:auto;
}

.doctor-photo .fallback{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  font-size:72px;

  opacity:.35;
}


/* 의료진 정보 */

.doctor-body{
  padding:26px;
}

.doctor-meta{
  color:#1264e8;

  font-weight:750;
}

.doctor-body h3{
  margin:6px 0 8px;

  font-size:24px;
  line-height:1.4;

  word-break:keep-all;
}

.doctor-specialty{
  min-height:52px;

  margin-top:14px;
  margin-bottom:0;

  color:#667085;

  font-size:15px;
  line-height:1.7;

  word-break:keep-all;
}

.doctor-actions{
  display:flex;

  gap:10px;

  margin-top:20px;
}

.doctor-actions a{
  flex:1;

  min-height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:11px;

  border-radius:12px;

  text-align:center;

  font-weight:700;
}

.detail-link{
  background:#f0f4f9;
}

.reserve-link{
  background:#1264e8;

  color:#fff;
}


/* =========================================
   DOCTOR DETAIL
========================================= */

.detail-wrap{
  min-height:calc(100vh - 100px);

  padding:70px 7vw;

  background:#f6f8fb;
}

.detail-card{
  width:100%;
  max-width:1100px;

  margin:0 auto;

  padding:42px;

  display:grid;

  grid-template-columns:
    320px minmax(0,1fr);

  gap:50px;

  align-items:start;

  background:#fff;

  border-radius:28px;
}

.detail-photo{
  display:block;

  width:100%;

  aspect-ratio:1 / 1;

  border-radius:22px;

  object-fit:cover;
  object-position:center top;

  background:#f3f6fa;
}

.detail-photo.fallback{
  width:100%;

  aspect-ratio:1 / 1;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#f3f6fa;

  font-size:90px;

  color:#9ba8b8;
}

.detail-card h1{
  margin:6px 0 10px;

  font-size:42px;
}

.detail-card h2{
  margin-top:32px;

  font-size:21px;
}

.detail-card p,
.detail-card li{
  color:#5e6878;

  line-height:1.8;
}

.detail-list{
  padding-left:20px;
}


/* =========================================
   CENTER PAGE
========================================= */

.center-intro{
  padding:110px 7vw 90px;

  background:
    linear-gradient(
      135deg,
      #f4f8fd 0%,
      #ffffff 60%
    );
}

.center-intro-inner{
  width:100%;
  max-width:1180px;

  margin:0 auto;
}

.center-tag{
  display:block;

  margin-bottom:18px;

  color:#1264e8;

  font-size:13px;
  font-weight:800;

  letter-spacing:2px;
}

.center-intro h1{
  margin:0 0 24px;

  font-size:52px;
  line-height:1.2;

  letter-spacing:-2px;

  word-break:keep-all;
}

.center-intro p{
  max-width:720px;

  margin:0;

  color:#657083;

  font-size:19px;
  line-height:1.9;
}


/* =========================================
   BEST / FAST / TRUST
========================================= */

.bft-section{
  padding:110px 7vw;
}

.bft-section-gray{
  background:#f7f9fc;
}

.bft-heading{
  width:100%;
  max-width:1180px;

  margin:0 auto 50px;
}

.bft-word{
  display:block;

  margin-bottom:14px;

  color:#1264e8;

  font-size:18px;
  font-weight:900;

  letter-spacing:3px;
}

.bft-heading h2{
  margin:0 0 18px;

  font-size:38px;
  line-height:1.3;

  letter-spacing:-1.5px;

  word-break:keep-all;
}

.bft-heading p{
  max-width:720px;

  margin:0;

  color:#667085;

  font-size:17px;
  line-height:1.8;
}

.bft-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:24px;

  width:100%;
  max-width:1180px;

  margin:0 auto;
}

.bft-card{
  min-width:0;

  overflow:hidden;

  background:#fff;

  border:1px solid #e8edf4;
  border-radius:24px;

  box-shadow:
    0 15px 45px rgba(20,44,80,.05);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.bft-card:hover{
  transform:translateY(-6px);

  box-shadow:
    0 22px 50px rgba(20,44,80,.10);
}

.bft-image{
  height:220px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #eaf2ff,
      #f7fbff
    );
}

.bft-image img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.bft-image span{
  color:#1264e8;

  font-size:42px;
  font-weight:900;

  opacity:.35;
}

.bft-card-body{
  padding:30px;
}

.bft-card-body h3{
  margin:0 0 13px;

  font-size:22px;

  letter-spacing:-.5px;
}

.bft-card-body p{
  margin:0;

  color:#667085;

  font-size:15px;
  line-height:1.8;
}


/* =========================================
   SERVICES PAGE
========================================= */

.services-intro{
  padding:110px 7vw 90px;

  background:
    linear-gradient(
      135deg,
      #f4f8fd 0%,
      #ffffff 60%
    );
}

.services-intro-inner{
  width:100%;
  max-width:1180px;

  margin:0 auto;
}

.services-intro h1{
  margin:0 0 24px;

  font-size:52px;
  line-height:1.2;

  letter-spacing:-2px;

  word-break:keep-all;
}

.services-intro p{
  max-width:720px;

  margin:0;

  color:#657083;

  font-size:19px;
  line-height:1.9;
}

.services-section{
  padding:110px 7vw;
}

.services-heading{
  width:100%;
  max-width:1180px;

  margin:0 auto 50px;
}

.services-small-title{
  display:block;

  margin-bottom:14px;

  color:#1264e8;

  font-size:13px;
  font-weight:900;

  letter-spacing:2.5px;
}

.services-heading h2{
  margin:0 0 18px;

  font-size:38px;
  line-height:1.3;

  letter-spacing:-1.5px;

  word-break:keep-all;
}

.services-heading p{
  max-width:720px;

  margin:0;

  color:#667085;

  font-size:17px;
  line-height:1.8;
}

.services-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:26px;

  width:100%;
  max-width:1180px;

  margin:0 auto;
}

.services-card{
  min-width:0;
  min-height:220px;

  display:grid;

  grid-template-columns:
    220px minmax(0,1fr);

  overflow:hidden;

  background:#fff;

  border:1px solid #e8edf4;
  border-radius:24px;

  box-shadow:
    0 15px 45px rgba(20,44,80,.05);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.services-card:hover{
  transform:translateY(-5px);

  box-shadow:
    0 22px 50px rgba(20,44,80,.10);
}

.services-image{
  min-height:220px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #e9f2ff,
      #f7fbff
    );
}

.services-image img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.services-image span{
  color:#1264e8;

  font-size:42px;
  font-weight:900;

  opacity:.35;
}

.services-card-body{
  min-width:0;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:32px;
}

.services-card-body h3{
  margin:0 0 14px;

  font-size:23px;
  line-height:1.4;

  letter-spacing:-.7px;

  word-break:keep-all;
}

.services-card-body p{
  margin:0;

  color:#667085;

  font-size:15px;
  line-height:1.8;
}


/* =========================================
   DISEASE
========================================= */

.disease-section{
  padding:110px 7vw;

  background:#f7f9fc;
}

.disease-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:20px;

  width:100%;
  max-width:1180px;

  margin:0 auto;
}

.disease-card{
  min-width:0;
  min-height:200px;

  padding:30px;

  background:#fff;

  border:1px solid #e7ecf3;
  border-radius:22px;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.disease-card:hover{
  transform:translateY(-4px);

  border-color:#cdddf5;

  box-shadow:
    0 18px 40px rgba(20,44,80,.07);
}

.disease-number{
  display:block;

  margin-bottom:26px;

  color:#1264e8;

  font-size:13px;
  font-weight:900;

  letter-spacing:1px;
}

.disease-card h3{
  margin:0 0 12px;

  font-size:22px;
  line-height:1.4;

  letter-spacing:-.5px;
}

.disease-card p{
  margin:0;

  color:#667085;

  font-size:15px;
  line-height:1.8;
}


/* =========================================
   GUIDE PAGE
========================================= */

.guide-container{
  width:min(
    1180px,
    calc(100% - 48px)
  );

  margin:0 auto;
}

.guide-hero{
  padding:105px 0 90px;

  background:
    linear-gradient(
      135deg,
      #f3f8fd 0%,
      #ffffff 70%
    );

  border-bottom:1px solid #edf1f5;
}

.guide-tag{
  margin-bottom:18px;

  color:#1264e8;

  font-size:14px;
  font-weight:700;

  letter-spacing:2.5px;
}

.guide-hero h1{
  margin:0;

  color:#172033;

  font-size:48px;
  line-height:1.2;

  letter-spacing:-2px;

  word-break:keep-all;
}

.guide-hero p{
  max-width:700px;

  margin:22px 0 0;

  color:#667085;

  font-size:18px;
  line-height:1.8;
}

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

.guide-section-gray{
  background:#f7f9fc;
}

.guide-heading{
  margin-bottom:48px;
}

.guide-heading h2{
  margin:8px 0 14px;

  color:#172033;

  font-size:34px;
  line-height:1.3;

  letter-spacing:-1.4px;

  word-break:keep-all;
}

.guide-heading p{
  margin:0;

  color:#667085;

  font-size:16px;
  line-height:1.75;
}

.guide-section-tag{
  display:block;

  color:#1264e8;

  font-size:13px;
  font-weight:800;

  letter-spacing:2px;
}


/* =========================================
   GUIDE QUICK
========================================= */

.guide-quick-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;
}

.guide-quick-card{
  min-width:0;
  min-height:260px;

  position:relative;

  padding:32px 28px;

  background:#fff;

  border:1px solid #e7ecf2;
  border-radius:22px;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.guide-quick-card:hover{
  transform:translateY(-5px);

  border-color:#cdddf5;

  box-shadow:
    0 18px 40px rgba(20,44,80,.07);
}

.guide-quick-num{
  display:block;

  margin-bottom:40px;

  color:#1264e8;

  font-size:13px;
  font-weight:800;
}

.guide-quick-card strong{
  display:block;

  margin-bottom:12px;

  color:#172033;

  font-size:21px;
}

.guide-quick-card p{
  min-height:52px;

  margin:0;

  color:#667085;

  font-size:14px;
  line-height:1.7;
}

.guide-more{
  display:block;

  margin-top:25px;

  color:#1264e8;

  font-size:14px;
  font-weight:800;
}


/* =========================================
   RESERVATION METHOD
========================================= */

.reservation-method-grid{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:16px;
}

.reservation-method-card{
  min-width:0;
  min-height:245px;

  padding:30px 24px;

  background:#fff;

  border:1px solid #e7ecf2;
  border-radius:20px;
}

.reservation-method-number{
  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:30px;

  border-radius:50%;

  background:#eaf2ff;

  color:#1264e8;

  font-weight:800;
}

.reservation-method-card h3{
  margin:0 0 13px;

  color:#172033;

  font-size:19px;
}

.reservation-method-card p{
  margin:0;

  color:#667085;

  font-size:14px;
  line-height:1.75;
}


/* =========================================
   GUIDE PROCESS
========================================= */

.guide-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  position:relative;
}

.guide-process-card{
  min-width:0;
  min-height:235px;

  position:relative;

  padding:35px 30px;

  border-top:3px solid #dce8f1;
}

.guide-process-card::after{
  content:"→";

  position:absolute;

  top:44px;
  right:-8px;

  color:#b9c5ce;

  font-size:25px;

  z-index:2;
}

.guide-process-card:last-child::after{
  display:none;
}

.guide-process-number{
  margin-bottom:34px;

  color:#1264e8;

  font-size:13px;
  font-weight:800;

  letter-spacing:1px;
}

.guide-process-card h3{
  margin:0 0 13px;

  color:#172033;

  font-size:21px;
}

.guide-process-card p{
  margin:0;

  color:#667085;

  font-size:14px;
  line-height:1.75;
}


/* =========================================
   GUIDE NOTICE
========================================= */

.guide-section-blue{
  background:#1264e8;
}

.guide-heading-light h2{
  color:#fff;
}

.guide-section-tag.light{
  color:#cfe0ff;
}

.guide-notice-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;
}

.guide-notice-card{
  min-width:0;

  display:flex;

  gap:22px;

  padding:28px 30px;

  border-radius:18px;

  background:rgba(255,255,255,.11);

  border:1px solid rgba(255,255,255,.15);
}

.guide-notice-card>span{
  flex:0 0 auto;

  color:#cfe0ff;

  font-size:14px;
  font-weight:800;
}

.guide-notice-card h3{
  margin:0 0 8px;

  color:#fff;

  font-size:18px;
}

.guide-notice-card p{
  margin:0;

  color:rgba(255,255,255,.84);

  font-size:14px;
  line-height:1.75;
}


/* =========================================
   GUIDE AFTER
========================================= */

.guide-after-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:22px;
}

.guide-after-card{
  min-width:0;

  display:flex;

  gap:25px;

  padding:36px;

  background:#fff;

  border:1px solid #e7ecf2;
  border-radius:20px;
}

.guide-after-number{
  flex:0 0 auto;

  color:#1264e8;

  font-size:14px;
  font-weight:800;
}

.guide-after-card h3{
  margin:0 0 12px;

  color:#172033;

  font-size:21px;
}

.guide-after-card p{
  margin:0;

  color:#667085;

  font-size:14px;
  line-height:1.8;
}


/* =========================================
   GUIDE CTA
========================================= */

.guide-cta{
  padding:90px 0;

  text-align:center;

  background:#f0f5fb;
}

.guide-cta h2{
  margin:0 0 15px;

  color:#172033;

  font-size:34px;

  letter-spacing:-1.4px;

  word-break:keep-all;
}

.guide-cta p{
  margin:0;

  color:#667085;

  font-size:16px;
}

.guide-cta-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:12px;

  margin-top:35px;
}

.guide-primary-btn,
.guide-secondary-btn{
  min-width:190px;
  height:55px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 25px;

  border-radius:999px;

  font-size:15px;
  font-weight:750;
}

.guide-primary-btn{
  background:#1264e8;

  color:#fff;
}

.guide-secondary-btn{
  gap:8px;

  background:#fff;

  border:1px solid #d9e1ed;

  color:#172033;
}


/* =========================================
   GUIDE FOOTER
========================================= */

.guide-footer{
  padding:45px 0;

  background:#0c1728;
}

.guide-footer-info strong{
  display:block;

  margin-bottom:13px;

  color:#fff;

  font-size:18px;
}

.guide-footer-info p{
  margin:4px 0;

  color:#aeb7c0;

  font-size:13px;
}

.guide-footer-info small{
  display:block;

  margin-top:16px;

  color:#7f8993;

  font-size:12px;
}


/* =========================================
   MAIN GUIDE CARD
========================================= */

.main-guide-card{
  display:block;

  color:inherit;

  cursor:pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.main-guide-card:hover{
  transform:translateY(-6px);

  border-color:#cdddf5;

  box-shadow:
    0 20px 45px rgba(18,44,74,.09);
}

.main-guide-more{
  display:inline-block;

  margin-top:20px;

  color:#1264e8;

  font-size:14px;
  font-weight:800;
}


/* =========================================
   MAIN SPECIAL CARE
========================================= */

.main-special{
  padding:110px 7vw;

  background:
    linear-gradient(
      135deg,
      #f5f8fc 0%,
      #eef4fa 100%
    );
}

.main-special-inner{
  width:100%;
  max-width:1180px;

  margin:0 auto;
}

.main-special-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:40px;

  margin-bottom:52px;
}

.main-special-heading h2{
  margin:12px 0 16px;

  color:#172033;

  font-size:40px;
  line-height:1.3;

  letter-spacing:-1.7px;

  word-break:keep-all;
}

.main-special-heading p{
  max-width:600px;

  margin:0;

  color:#667085;

  font-size:16px;
  line-height:1.8;

  word-break:keep-all;
}

.main-special-all{
  flex:0 0 auto;

  padding-bottom:5px;

  color:#1264e8;

  border-bottom:1px solid #bdd2f2;

  font-size:14px;
  font-weight:800;
}

.main-special-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:24px;
}

.main-special-card{
  position:relative;

  min-width:0;
  min-height:360px;

  padding:34px;

  overflow:hidden;

  background:#fff;

  border:1px solid #e4eaf1;
  border-radius:26px;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.main-special-card::after{
  content:"";

  position:absolute;

  width:170px;
  height:170px;

  right:-80px;
  bottom:-80px;

  border-radius:50%;

  background:#edf4ff;

  pointer-events:none;

  transition:
    transform .35s ease;
}

.main-special-card:hover{
  transform:translateY(-7px);

  border-color:#c6daf5;

  box-shadow:
    0 22px 50px rgba(20,44,80,.09);
}

.main-special-card:hover::after{
  transform:scale(1.2);
}

.main-special-top{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.main-special-number{
  color:#1264e8;

  font-size:13px;
  font-weight:900;

  letter-spacing:1px;
}

.main-special-arrow{
  width:38px;
  height:38px;

  flex:0 0 38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #dce4ed;
  border-radius:50%;

  color:#7d8996;

  line-height:1;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.main-special-card:hover .main-special-arrow{
  transform:translateX(3px);

  background:#1264e8;

  border-color:#1264e8;

  color:#fff;
}


/* SVG 크기 고정 */

.main-special-icon{
  position:relative;
  z-index:2;

  width:64px!important;
  height:64px!important;

  min-width:64px!important;
  min-height:64px!important;

  max-width:64px!important;
  max-height:64px!important;

  margin:45px 0 28px;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;

  color:#1264e8;
}

.main-special-icon svg{
  display:block!important;

  width:58px!important;
  height:58px!important;

  min-width:58px!important;
  min-height:58px!important;

  max-width:58px!important;
  max-height:58px!important;

  flex:0 0 58px!important;

  overflow:visible;
}

.main-special-icon svg path,
.main-special-icon svg circle,
.main-special-icon svg line,
.main-special-icon svg polyline{
  vector-effect:non-scaling-stroke;
}

.main-special-card h3{
  position:relative;
  z-index:2;

  margin:0 0 14px;

  color:#172033;

  font-size:23px;
  line-height:1.4;

  letter-spacing:-.7px;

  word-break:keep-all;
}

.main-special-card p{
  position:relative;
  z-index:2;

  max-width:300px;

  margin:0;

  color:#667085;

  font-size:15px;
  line-height:1.8;

  word-break:keep-all;
}


/* =========================================
   MAIN PAGE CONTENT ALIGN
========================================= */

#intro,
#doctors,
#guide,
.main-special{
  padding-left:max(
    24px,
    calc((100vw - 1180px) / 2)
  );

  padding-right:max(
    24px,
    calc((100vw - 1180px) / 2)
  );
}


/* ABOUT */

#intro{
  padding-top:100px;
  padding-bottom:100px;
}

#intro .section-heading{
  width:100%;
  max-width:1180px;

  margin-left:auto;
  margin-right:auto;
  margin-bottom:0;
}

#intro .section-heading p{
  max-width:720px;
}


/* SPECIAL */

.main-special-inner{
  width:100%;
  max-width:1180px;

  margin-left:auto;
  margin-right:auto;
}


/* DOCTORS */

#doctors{
  padding-top:100px;
  padding-bottom:100px;
}

#doctors .section-heading{
  width:100%;
  max-width:1180px;

  margin-left:auto;
  margin-right:auto;
  margin-bottom:46px;
}

#doctors .doctor-grid{
  width:100%;
  max-width:1180px;

  margin-left:auto;
  margin-right:auto;
}


/* GUIDE */

#guide{
  padding-top:100px;
  padding-bottom:100px;
}

#guide .section-heading{
  width:100%;
  max-width:1180px;

  margin-left:auto;
  margin-right:auto;
  margin-bottom:46px;
}

#guide .cards{
  width:100%;
  max-width:1180px;

  margin-left:auto;
  margin-right:auto;
}


/* =========================================
   FOOTER
========================================= */

.footer{
  width:100%;

  padding:45px 7vw;

  display:flex;
  justify-content:space-between;

  gap:24px;

  background:#0c1728;

  color:#c6cfda;
}

.footer strong{
  color:#fff;
}


/* =========================================
   DESKTOP - 1400
========================================= */

@media(max-width:1400px){

  .header{
    height:92px;

    padding-left:24px;
    padding-right:24px;
  }

  .brand-logo{
    height:52px;
    max-width:190px;
  }

  .nav{
    max-width:650px;

    gap:30px;

    margin-left:30px;
    margin-right:30px;
  }

  .nav a{
    height:92px;

    padding:0 5px;

    font-size:17px;
  }

  .header .outline-btn{
    min-height:48px;

    padding:0 18px;

    font-size:14px;
  }

}


/* =========================================
   DESKTOP - 1100
========================================= */

@media(max-width:1100px){

  .header{
    padding-left:18px;
    padding-right:18px;
  }

  .brand-logo{
    height:48px;
    max-width:175px;
  }

  .nav{
    max-width:none;

    gap:20px;

    margin-left:22px;
    margin-right:22px;
  }

  .nav a{
    padding:0 3px;

    font-size:16px;
  }

  .header .outline-btn{
    min-height:46px;

    padding:0 14px;

    font-size:13px;
  }

}


/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

  .guide-quick-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .reservation-method-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .guide-process-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .guide-process-card:nth-child(2)::after{
    display:none;
  }

  .main-special-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .main-special-card:last-child{
    grid-column:1/-1;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:900px){

  .header{
    height:78px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-left:18px;
    padding-right:18px;
  }

  .brand{
    margin:0;
  }

  .brand-logo{
    height:46px;
    max-width:165px;
  }

  .nav{
    display:none;
  }

  .header .outline-btn{
    margin:0 !important;

    min-height:42px;

    padding:0 14px;

    font-size:13px;
  }


  /* HERO */

  .hero{
    min-height:570px;

    padding:70px 24px;
  }

  .hero h1{
    letter-spacing:-2px;
  }

  .hero p{
    font-size:17px;
  }


  /* SECTION */

  .section{
    padding:72px 24px;
  }

  .cards.three{
    grid-template-columns:1fr;
  }

  .section-heading.row{
    display:block;
  }


  /* DOCTOR */

  .doctor-grid{
    grid-template-columns:
      minmax(0,380px);

    justify-content:center;
  }

  .doctor-card{
    width:100%;
    max-width:380px;
  }

  .doctor-photo{
    width:100%;
    aspect-ratio:1 / 1;
  }

  .doctor-photo img{
    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center bottom;
  }


  /* DOCTOR DETAIL */

  .detail-wrap{
    padding:45px 20px;
  }

  .detail-card{
    grid-template-columns:1fr;

    padding:24px;
  }

  .detail-photo{
    width:100%;
    max-width:380px;

    margin:0 auto;

    aspect-ratio:1 / 1;

    object-fit:cover;
    object-position:center top;
  }


  /* CENTER / SERVICES */

  .center-intro,
  .services-intro{
    padding:75px 24px 65px;
  }

  .center-intro h1,
  .services-intro h1{
    font-size:38px;
  }

  .center-intro p,
  .services-intro p{
    font-size:17px;
  }


  /* BFT / SERVICES / DISEASE */

  .bft-section,
  .services-section,
  .disease-section{
    padding:75px 24px;
  }

  .bft-heading h2,
  .services-heading h2{
    font-size:31px;
  }

  .bft-grid{
    grid-template-columns:1fr;
  }

  .bft-image{
    height:210px;
  }

  .services-grid{
    grid-template-columns:1fr;
  }

  .services-card{
    grid-template-columns:1fr;
  }

  .services-image{
    height:210px;
    min-height:210px;
  }

  .disease-grid{
    grid-template-columns:1fr;
  }


  /* MAIN SPECIAL */

  .main-special{
    padding:75px 24px;
  }

  .main-special-heading{
    display:block;

    margin-bottom:38px;
  }

  .main-special-heading h2{
    font-size:31px;
  }

  .main-special-all{
    display:inline-block;

    margin-top:22px;
  }

  .main-special-grid{
    grid-template-columns:1fr;
  }

  .main-special-card,
  .main-special-card:last-child{
    grid-column:auto;

    min-height:310px;
  }


  /* MAIN ALIGN */

  #intro,
  #doctors,
  #guide,
  .main-special{
    padding-left:24px;
    padding-right:24px;
  }

  #intro .section-heading,
  #doctors .section-heading,
  #doctors .doctor-grid,
  #guide .section-heading,
  #guide .cards,
  .main-special-inner{
    width:100%;
    max-width:none;
  }

  #doctors .doctor-grid{
    max-width:380px;
  }


  /* FOOTER */

  .footer{
    display:block;

    padding:36px 24px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:700px){

  .guide-container{
    width:min(
      calc(100% - 32px),
      1180px
    );
  }

  .guide-hero{
    padding:70px 0 60px;
  }

  .guide-hero h1{
    font-size:36px;
  }

  .guide-hero p{
    font-size:16px;
  }

  .guide-section{
    padding:70px 0;
  }

  .guide-heading{
    margin-bottom:35px;
  }

  .guide-heading h2{
    font-size:28px;
  }

  .guide-quick-grid,
  .reservation-method-grid,
  .guide-process-grid,
  .guide-notice-grid,
  .guide-after-grid{
    grid-template-columns:1fr;
  }

  .guide-quick-card{
    min-height:auto;
  }

  .reservation-method-card{
    min-height:auto;
  }

  .guide-process-card{
    min-height:auto;

    padding:30px 10px;
  }

  .guide-process-card::after{
    display:none;
  }

  .guide-cta{
    padding:70px 0;
  }

  .guide-cta h2{
    font-size:28px;
  }

  .guide-cta-buttons{
    flex-direction:column;
  }

  .guide-primary-btn,
  .guide-secondary-btn{
    width:100%;
  }

  .main-special-card{
    min-height:auto;

    padding:28px;
  }

  .main-special-icon{
    margin:34px 0 24px;
  }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media(max-width:500px){

  .header .outline-btn{
    min-height:40px;

    padding:0 12px;

    font-size:12px;
  }

  .doctor-grid{
    grid-template-columns:1fr;
  }

  .doctor-card{
    width:100%;
    max-width:100%;
  }

  .doctor-body{
    padding:22px;
  }

  .doctor-body h3{
    font-size:22px;
  }

  .doctor-specialty{
    min-height:auto;
  }

  .detail-card{
    padding:20px;
  }

}
.hero{
  min-height:650px;
  padding:80px 7vw;
}

.hero-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;

  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);

  align-items:center;
  gap:70px;

  position:relative;
  z-index:2;
}

.hero-content{
  width:100%;
  max-width:720px;
}

.hero-visual{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.hero-visual img{
  display:block;

  width:100%;
  max-width:600px;

  aspect-ratio:4 / 3;

  object-fit:cover;
  object-position:center;

  border-radius:28px;

  box-shadow:
    0 24px 60px rgba(0,0,0,.18);
}


/* =========================================
   HERO TABLET
========================================= */

@media(max-width:1100px){

  .hero-inner{
    grid-template-columns:1fr;
    gap:45px;
  }

  .hero-visual{
    justify-content:flex-start;
  }

  .hero-visual img{
    max-width:650px;
  }

}


/* =========================================
   HERO MOBILE
========================================= */

@media(max-width:900px){

  .hero{
    padding:70px 24px;
  }

  .hero-inner{
    display:block;
  }

  .hero-visual{
    margin-top:40px;
  }

  .hero-visual img{
    width:100%;
    max-width:none;

    border-radius:20px;
  }

}
.hero-shortcuts{
  width:100%;
  max-width:1400px;

  margin:48px auto 0;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:16px;

  position:relative;
  z-index:2;
}

.hero-shortcut-card{
  min-width:0;
  min-height:125px;

  display:flex;
  align-items:center;

  gap:18px;

  padding:24px 22px;

  background:rgba(255,255,255,.10);

  border:1px solid rgba(255,255,255,.20);
  border-radius:20px;

  backdrop-filter:blur(8px);

  color:#fff;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.hero-shortcut-card:hover{
  transform:translateY(-5px);

  background:rgba(255,255,255,.16);

  border-color:rgba(255,255,255,.38);
}


/* 번호 */

.hero-shortcut-number{
  flex:0 0 auto;

  font-size:13px;
  font-weight:900;

  color:#73d7f5;

  letter-spacing:1px;
}


/* 글 */

.hero-shortcut-text{
  flex:1;

  min-width:0;
}

.hero-shortcut-text strong{
  display:block;

  margin-bottom:8px;

  font-size:20px;
  font-weight:800;

  color:#fff;

  letter-spacing:-.5px;
}

.hero-shortcut-text span{
  display:block;

  color:#cddbea;

  font-size:13px;
  line-height:1.5;

  word-break:keep-all;
}


/* 화살표 */

.hero-shortcut-arrow{
  flex:0 0 38px;

  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.30);
  border-radius:50%;

  color:#fff;

  font-size:16px;

  transition:
    background .2s ease,
    color .2s ease;
}

.hero-shortcut-card:hover .hero-shortcut-arrow{
  background:#fff;

  color:#1264e8;
}


/* =========================================
   HERO QUICK TABLET
========================================= */

@media(max-width:1100px){

  .hero-shortcuts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


/* =========================================
   HERO QUICK MOBILE
========================================= */

@media(max-width:700px){

  .hero-shortcuts{
    grid-template-columns:1fr;

    margin-top:35px;

    gap:12px;
  }

  .hero-shortcut-card{
    min-height:auto;

    padding:20px;
  }

  .hero-shortcut-text strong{
    font-size:18px;
  }

}
.hero{
  width:100%;
  min-height:auto;

  display:block;

  position:relative;
  overflow:hidden;

  padding:90px 7vw 48px;

  background:
    linear-gradient(
      130deg,
      #061a33 0%,
      #0b315d 58%,
      #0b5d87 100%
    );

  color:#fff;
}


/* 배경 효과 */

.hero::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 78% 40%,
      rgba(87,210,255,.18),
      transparent 32%
    );

  pointer-events:none;
}


/* =========================================
   위쪽 문구 + 이미지
========================================= */

.hero-inner{
  width:100%;
  max-width:1400px;

  margin:0 auto;

  display:grid;
  grid-template-columns:
    minmax(0,1.05fr)
    minmax(420px,.95fr);

  align-items:center;

  gap:70px;

  position:relative;
  z-index:2;
}


.hero-content{
  width:100%;
  max-width:720px;
}


.hero-visual{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:flex-end;
}


.hero-visual img{
  display:block;

  width:100%;
  max-width:600px;

  aspect-ratio:4 / 3;

  object-fit:cover;
  object-position:center;

  border-radius:28px;

  box-shadow:
    0 24px 60px rgba(0,0,0,.18);
}


/* =========================================
   하단 퀵메뉴
========================================= */

.hero-shortcuts{
  width:100%;
  max-width:1400px;

  margin:52px auto 0;

  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:16px;

  position:relative;
  z-index:2;
}


.hero-shortcut-card{
  min-width:0;
  min-height:122px;

  display:flex;
  align-items:center;

  gap:16px;

  padding:24px 22px;

  background:rgba(255,255,255,.10);

  border:1px solid rgba(255,255,255,.20);
  border-radius:20px;

  color:#fff;

  backdrop-filter:blur(8px);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}


.hero-shortcut-card:hover{
  transform:translateY(-5px);

  background:rgba(255,255,255,.17);

  border-color:rgba(255,255,255,.40);
}


/* 번호 */

.hero-shortcut-number{
  flex:0 0 auto;

  color:#72dafa;

  font-size:13px;
  font-weight:900;

  letter-spacing:1px;
}


/* 글 영역 */

.hero-shortcut-text{
  flex:1;

  min-width:0;
}


.hero-shortcut-text strong{
  display:block;

  margin-bottom:8px;

  color:#fff;

  font-size:20px;
  font-weight:800;

  letter-spacing:-.5px;
}


.hero-shortcut-text span{
  display:block;

  color:#d1deeb;

  font-size:13px;
  line-height:1.5;

  word-break:keep-all;
}


/* 화살표 */

.hero-shortcut-arrow{
  flex:0 0 38px;

  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;

  color:#fff;

  font-size:16px;

  transition:
    background .2s ease,
    color .2s ease;
}


.hero-shortcut-card:hover .hero-shortcut-arrow{
  background:#fff;
  color:#1264e8;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1100px){

  .hero-inner{
    grid-template-columns:1fr;

    gap:42px;
  }

  .hero-visual{
    justify-content:flex-start;
  }

  .hero-visual img{
    max-width:650px;
  }

  .hero-shortcuts{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .hero{
    padding:70px 24px 40px;
  }

  .hero h1{
    font-size:clamp(38px,10vw,54px);
    letter-spacing:-2px;
  }

  .hero-visual{
    margin-top:38px;
  }

  .hero-visual img{
    width:100%;
    max-width:none;

    border-radius:20px;
  }

  .hero-shortcuts{
    grid-template-columns:1fr;

    margin-top:35px;

    gap:12px;
  }

  .hero-shortcut-card{
    min-height:auto;

    padding:20px;
  }

  .hero-shortcut-text strong{
    font-size:18px;
  }

}
.hero{
  display:block !important;
  width:100%;
  min-height:auto;

  padding:90px 7vw 50px;

  position:relative;
  overflow:hidden;
}


/* 상단 : 문구 + 이미지 */

.hero-inner{
  width:100%;
  max-width:1400px;

  margin:0 auto;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);

  align-items:center;

  gap:80px;
}


/* 왼쪽 문구 */

.hero-content{
  width:100%;
  max-width:700px;
}


/* 제목이 너무 좁게 쪼개지지 않도록 */

.hero-content h1{
  width:100%;

  font-size:clamp(48px,4.3vw,72px);

  line-height:1.12;

  word-break:keep-all;
  overflow-wrap:normal;
}


/* 오른쪽 이미지 */

.hero-visual{
  width:100%;

  display:flex;

  justify-content:flex-end;
  align-items:center;
}

.hero-visual img{
  width:100%;
  max-width:580px;

  aspect-ratio:4 / 3;

  object-fit:cover;
  object-position:center;

  border-radius:26px;
}


/* =========================================
   하단 퀵메뉴
========================================= */

.hero-shortcuts{
  width:100%;
  max-width:1400px;

  margin:55px auto 0 !important;

  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:18px;

  clear:both;
}


/* 퀵메뉴 카드 */

.hero-shortcut-card{
  width:100%;
  min-width:0;
  min-height:125px;

  display:flex;
  align-items:center;

  padding:24px;

  gap:16px;

  background:rgba(255,255,255,.10);

  border:1px solid rgba(255,255,255,.22);
  border-radius:20px;
}


/* 제목 */

.hero-shortcut-text strong{
  display:block;

  margin-bottom:7px;

  color:#fff;

  font-size:20px;
  font-weight:800;

  word-break:keep-all;
}


/* 설명 */

.hero-shortcut-text span{
  display:block;

  color:#d4e0ec;

  font-size:14px;
  line-height:1.55;

  word-break:keep-all;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1100px){

  .hero-inner{
    grid-template-columns:1fr;

    gap:40px;
  }

  .hero-visual{
    justify-content:flex-start;
  }

  .hero-shortcuts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .hero{
    padding:65px 24px 40px;
  }

  .hero-content h1{
    font-size:clamp(38px,10vw,52px);
  }

  .hero-shortcuts{
    grid-template-columns:1fr;

    margin-top:35px !important;
  }

}

.hospital-footer{
  width:100%;

  padding:50px 24px 46px;

  background:#333;

  color:#aeb1b5;
}


.hospital-footer-inner{
  width:100%;
  max-width:1180px;

  margin:0 auto;
}


/* =========================================
   FOOTER TOP
========================================= */

.hospital-footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:30px;
}


.footer-menu{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:11px;
}


.footer-menu a{
  color:#fff;

  font-size:15px;
  font-weight:650;

  letter-spacing:-.3px;

  transition:color .2s ease;
}


.footer-menu a:hover{
  color:#75b9f4;
}


.footer-menu span{
  color:#72767b;

  font-size:13px;
}


/* =========================================
   FOOTER RIGHT
========================================= */

.footer-right{
  flex:0 0 auto;

  display:flex;
  align-items:center;

  gap:18px;
}


.footer-social{
  display:flex;
  align-items:center;

  gap:10px;
}


.footer-social a{
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:7px;

  background:#5b6065;

  color:#fff;

  font-size:12px;
  font-weight:800;

  transition:
    transform .2s ease,
    background .2s ease;
}


.footer-social a:hover{
  transform:translateY(-2px);

  background:#1264e8;
}


/* 세종병원그룹 */

.footer-group-link{
  min-width:135px;
  height:38px;

  padding:0 13px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  border:1px solid #888d92;

  color:#fff;

  font-size:14px;
  font-weight:650;
}


/* =========================================
   FOOTER LINE
========================================= */

.footer-line{
  width:100%;
  height:1px;

  margin:25px 0 20px;

  background:#5a5d61;
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:9px;

  color:#9fa3a8;
}


.footer-bottom p{
  margin:0;

  font-size:14px;
  line-height:1.7;
}


.footer-bottom strong{
  font-weight:700;
}


.footer-divider{
  color:#686c70;
}


.footer-copyright{
  margin:5px 0 0;

  color:#909499;

  font-size:14px;
  font-weight:600;
}


/* =========================================
   FOOTER MOBILE
========================================= */

@media(max-width:900px){

  .hospital-footer{
    padding:40px 24px;
  }


  .hospital-footer-top{
    display:block;
  }


  .footer-menu{
    gap:8px 10px;
  }


  .footer-menu a{
    font-size:13px;
  }


  .footer-right{
    margin-top:25px;

    justify-content:space-between;
  }


  .footer-bottom{
    display:block;
  }


  .footer-bottom p{
    margin-bottom:4px;

    font-size:13px;
  }


  .footer-divider{
    display:none;
  }


  .footer-copyright{
    margin-top:12px;

    font-size:12px;
  }

}

.detail-wrap{
  width:100%;
  min-height:calc(100vh - 100px);

  padding:70px 24px 90px;

  background:#f5f7fb;
}


/* 전체 상세 카드 */

.detail-card{
  width:100% !important;
  max-width:1280px !important;

  margin:0 auto !important;

  padding:44px !important;

  display:grid !important;

  /* 왼쪽 사진 / 오른쪽 정보 */
  grid-template-columns:420px minmax(0,1fr) !important;

  gap:60px !important;

  align-items:start !important;

  background:#fff;

  border-radius:30px;
}


/* =========================================
   왼쪽 전신사진 영역
========================================= */

.detail-photo-area{
  width:100% !important;
  height:820px !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;

  overflow:hidden !important;

  padding:0 !important;

  background:#eef3fb;

  border-radius:26px;
}


/* 실제 의료진 사진 */

.detail-photo-area .detail-photo,
.detail-photo{
  width:100% !important;
  height:100% !important;

  max-width:none !important;

  display:block !important;

  /*
    전신 사진이 잘리지 않도록
  */
  object-fit:contain !important;

  /*
    사진을 아래쪽에 맞춤
  */
  object-position:center bottom !important;

  aspect-ratio:auto !important;

  border-radius:0 !important;

  background:transparent !important;
}


/* 사진 없을 때 */

.detail-photo-area .fallback{
  width:100% !important;
  height:100% !important;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#eef3fb;

  color:#9ba8b8;

  font-size:80px;
}


/* =========================================
   오른쪽 의료진 정보
========================================= */

.detail-info{
  min-width:0;

  padding-top:5px;
}


/* 외과 · 전문의 */

.detail-info .doctor-meta{
  margin:0 0 10px;

  color:#1264e8;

  font-size:17px;
  font-weight:800;
}


/* 의료진 이름 */

.detail-info h1{
  margin:0 0 40px;

  color:#172033;

  font-size:46px;
  line-height:1.2;

  letter-spacing:-1.8px;
}


/* 전문분야 / 소개 / 학력 / 경력 */

.detail-section{
  margin-top:38px;
}

.detail-section:first-of-type{
  margin-top:0;
}

.detail-section h2,
.detail-info h2{
  margin:0 0 14px;

  color:#172033;

  font-size:22px;
  line-height:1.4;

  letter-spacing:-.5px;
}

.detail-section p,
.detail-info p{
  margin:0;

  color:#5e6878;

  font-size:16px;
  line-height:1.9;

  word-break:keep-all;
}


/* 학력 / 경력 목록 */

.detail-list{
  margin:0;

  padding-left:20px;
}

.detail-list li{
  margin:4px 0;

  color:#5e6878;

  font-size:16px;
  line-height:1.75;

  word-break:keep-all;
}


/* 진료예약 버튼 */

.detail-reservation{
  margin-top:42px;
}

.detail-reservation .primary-btn{
  min-width:180px;

  min-height:52px;

  padding:0 26px;

  font-size:16px;
}


/* =========================================
   큰 PC 화면
========================================= */

@media(min-width:1500px){

  .detail-card{
    max-width:1380px !important;

    grid-template-columns:440px minmax(0,1fr) !important;

    gap:70px !important;
  }

  .detail-photo-area{
    height:850px !important;
  }

}


/* =========================================
   TABLET
========================================= */

@media(max-width:1100px){

  .detail-card{
    grid-template-columns:340px minmax(0,1fr) !important;

    gap:38px !important;

    padding:34px !important;
  }

  .detail-photo-area{
    height:700px !important;
  }

  .detail-info h1{
    font-size:40px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

  .detail-wrap{
    padding:35px 18px 60px;
  }

  .detail-card{
    grid-template-columns:1fr !important;

    gap:30px !important;

    padding:22px !important;

    border-radius:22px;
  }

  .detail-photo-area{
    width:100% !important;
    height:580px !important;

    max-width:400px;

    margin:0 auto;

    border-radius:20px;
  }

  .detail-info h1{
    margin-bottom:30px;

    font-size:36px;
  }

  .detail-section{
    margin-top:30px;
  }

  .detail-section h2,
  .detail-info h2{
    font-size:20px;
  }

  .detail-section p,
  .detail-info p,
  .detail-list li{
    font-size:15px;
  }

}

.detail-card{
  grid-template-columns:440px minmax(0,1fr) !important;
  gap:60px !important;
}


/* 사진 박스 */

.detail-photo-area{
  width:100% !important;

  /* 기존 820px 고정 높이 제거 */
  height:auto !important;
  min-height:0 !important;

  /* 이준서 과장 전신사진 실제 비율 */
  aspect-ratio:680 / 1158 !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;

  overflow:hidden !important;

  padding:0 !important;

  background:#eef3fb;

  border-radius:26px;
}


/* 실제 사진 */

.detail-photo-area .detail-photo{
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;
  object-position:center bottom !important;

  aspect-ratio:auto !important;

  border-radius:0 !important;
  background:transparent !important;
}


/* =========================================
   큰 PC
========================================= */

@media(min-width:1500px){

  .detail-card{
    grid-template-columns:460px minmax(0,1fr) !important;
    gap:70px !important;
  }

}


/* =========================================
   TABLET
========================================= */

@media(max-width:1100px){

  .detail-card{
    grid-template-columns:350px minmax(0,1fr) !important;
    gap:38px !important;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

  .detail-card{
    grid-template-columns:1fr !important;
  }

  .detail-photo-area{
    width:100% !important;
    max-width:380px !important;

    margin:0 auto;

    aspect-ratio:680 / 1158 !important;
  }

}

.main-disease{
  width:100%;
  padding:110px 24px !important;
  background:#ffffff !important;
}

.main-disease-inner{
  width:100%;
  max-width:1180px;
  margin:0 auto;
}


/* 제목 */

.main-disease-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;

  margin-bottom:50px;
}

.main-disease-heading > div{
  min-width:0;
}

.main-disease-heading .kicker{
  display:block;

  margin-bottom:12px;

  color:#1264e8;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
}

.main-disease-heading h2{
  margin:0 0 16px;

  color:#172033;

  font-size:40px;
  line-height:1.3;
  font-weight:800;

  letter-spacing:-1.7px;

  word-break:keep-all;
}

.main-disease-heading p{
  max-width:650px;

  margin:0;

  color:#667085;

  font-size:16px;
  line-height:1.8;

  word-break:keep-all;
}

.main-disease-all{
  flex:0 0 auto;

  display:inline-block;

  padding-bottom:5px;

  color:#1264e8;

  border-bottom:1px solid #bdd2f2;

  font-size:14px;
  font-weight:800;
}


/* =========================================
   6개 카드
========================================= */

.main-disease-grid{
  width:100%;

  display:grid !important;

  grid-template-columns:repeat(3,minmax(0,1fr)) !important;

  gap:20px !important;
}

.main-disease-card{
  position:relative;

  min-width:0;
  min-height:250px;

  display:flex !important;
  flex-direction:column !important;

  padding:30px;

  overflow:hidden;

  background:#f6f8fb;

  border:1px solid #e3e9f1;
  border-radius:24px;

  color:#172033;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.main-disease-card:hover{
  transform:translateY(-6px);

  background:#fff;

  border-color:#c4d8f4;

  box-shadow:0 20px 45px rgba(18,44,74,.08);
}


/* 번호 */

.main-disease-number{
  display:block;

  margin-bottom:34px;

  color:#1264e8;

  font-size:13px;
  font-weight:900;

  letter-spacing:1px;
}


/* 내용 */

.main-disease-content{
  min-width:0;

  padding-right:28px;
}

.main-disease-content h3{
  margin:0 0 14px;

  color:#172033;

  font-size:23px;
  line-height:1.4;
  font-weight:800;

  letter-spacing:-.7px;

  word-break:keep-all;
}

.main-disease-content p{
  margin:0;

  color:#667085;

  font-size:15px;
  line-height:1.8;

  word-break:keep-all;
}


/* 화살표 */

.main-disease-arrow{
  position:absolute;

  right:26px;
  bottom:26px;

  width:38px;
  height:38px;

  display:flex !important;
  align-items:center;
  justify-content:center;

  border:1px solid #d5dfeb;
  border-radius:50%;

  color:#718096;

  font-size:15px;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.main-disease-card:hover .main-disease-arrow{
  transform:translateX(3px);

  background:#1264e8;

  border-color:#1264e8;

  color:#fff;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

  .main-disease-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .main-disease{
    padding:75px 24px !important;
  }

  .main-disease-heading{
    display:block;

    margin-bottom:38px;
  }

  .main-disease-heading h2{
    font-size:31px;
  }

  .main-disease-all{
    margin-top:22px;
  }

  .main-disease-grid{
    grid-template-columns:1fr !important;
  }

  .main-disease-card{
    min-height:220px;

    padding:27px;
  }

}
.main-surgery{
  width:100% !important;

  padding:110px max(
    24px,
    calc((100vw - 1180px) / 2)
  ) !important;

  background:linear-gradient(
    135deg,
    #071d39 0%,
    #0b315d 58%,
    #0b5d87 100%
  ) !important;

  color:#fff !important;

  overflow:hidden !important;
}


.main-surgery-inner{
  width:100% !important;
  max-width:1180px !important;

  margin:0 auto !important;

  display:grid !important;
  grid-template-columns:
    minmax(0,.78fr)
    minmax(0,1.22fr) !important;

  gap:70px !important;

  align-items:center !important;
}


/* =========================================
   왼쪽 제목
========================================= */

.main-surgery-heading{
  min-width:0 !important;
}


.main-surgery-kicker{
  display:block !important;

  margin:0 0 18px !important;

  color:#70dafa !important;

  font-size:12px !important;
  font-weight:900 !important;

  letter-spacing:2.2px !important;
}


.main-surgery-heading h2{
  margin:0 0 24px !important;

  color:#fff !important;

  font-size:46px !important;
  line-height:1.25 !important;

  font-weight:800 !important;

  letter-spacing:-2px !important;

  word-break:keep-all !important;
}


.main-surgery-heading p{
  max-width:430px !important;

  margin:0 !important;

  color:#d1deeb !important;

  font-size:16px !important;
  line-height:1.9 !important;

  word-break:keep-all !important;
}


.main-surgery-link{
  display:inline-block !important;

  margin-top:32px !important;
  padding-bottom:6px !important;

  color:#fff !important;

  border-bottom:1px solid rgba(255,255,255,.42) !important;

  font-size:14px !important;
  font-weight:800 !important;
}


/* =========================================
   오른쪽 카드 영역
========================================= */

.main-surgery-grid{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:20px !important;
}


.main-surgery-card{
  position:relative !important;

  min-width:0 !important;
  min-height:350px !important;

  display:block !important;

  padding:32px !important;

  overflow:hidden !important;

  background:rgba(255,255,255,.10) !important;

  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:26px !important;

  backdrop-filter:blur(8px);

  color:#fff !important;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease !important;
}


.main-surgery-card:hover{
  transform:translateY(-6px);

  background:rgba(255,255,255,.15) !important;

  border-color:rgba(255,255,255,.34) !important;
}


/* =========================================
   번호
========================================= */

.main-surgery-number{
  display:block !important;

  margin:0 !important;

  color:#70dafa !important;

  font-size:13px !important;
  font-weight:900 !important;

  letter-spacing:1px !important;
}


/* =========================================
   아이콘
   커지는 문제 강제 해결
========================================= */

.main-surgery-icon{
  width:64px !important;
  height:64px !important;

  min-width:64px !important;
  min-height:64px !important;

  max-width:64px !important;
  max-height:64px !important;

  margin:48px 0 28px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;

  color:#78ddf8 !important;
}


.main-surgery-icon svg{
  display:block !important;

  width:60px !important;
  height:60px !important;

  min-width:60px !important;
  min-height:60px !important;

  max-width:60px !important;
  max-height:60px !important;

  flex:0 0 60px !important;

  overflow:visible !important;
}


.main-surgery-icon svg path,
.main-surgery-icon svg circle,
.main-surgery-icon svg rect,
.main-surgery-icon svg line,
.main-surgery-icon svg polyline{
  vector-effect:non-scaling-stroke;
}


/* =========================================
   카드 제목
========================================= */

.main-surgery-card h3{
  margin:0 0 14px !important;

  color:#fff !important;

  font-size:25px !important;
  line-height:1.4 !important;

  font-weight:800 !important;

  letter-spacing:-.7px !important;

  word-break:keep-all !important;
}


/* =========================================
   카드 설명
========================================= */

.main-surgery-card p{
  margin:0 !important;

  color:#d1deeb !important;

  font-size:15px !important;
  line-height:1.85 !important;

  word-break:keep-all !important;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1000px){

  .main-surgery{
    padding:85px 24px !important;
  }


  .main-surgery-inner{
    grid-template-columns:1fr !important;

    gap:45px !important;
  }


  .main-surgery-heading h2{
    font-size:38px !important;
  }


  .main-surgery-heading p{
    max-width:650px !important;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .main-surgery{
    padding:70px 24px !important;
  }


  .main-surgery-heading h2{
    font-size:32px !important;
  }


  .main-surgery-grid{
    grid-template-columns:1fr !important;
  }


  .main-surgery-card{
    min-height:290px !important;

    padding:28px !important;
  }


  .main-surgery-icon{
    margin:36px 0 24px !important;
  }

}