/* ==========================================================================
   메인페이지 "강남새로 진료센터" 섹션 (2026-09-22, 시안 .sec2 이식)
   래퍼 .saero-center, 클래스 전부 sct- 접두사로 기존 테마(.inner 등 40건
   충돌 확인)와 격리. 배경은 이 파일에서 지정하지 않는다 — 단계3에서
   .saero-bg-b 공통 래퍼가 배경 B(main_advantage_bg.jpg.webp 등)를 맡는다.
   폰트는 사이트 기본 상속(Pretendard 지정 없음).
   ========================================================================== */
.saero-center{position:relative;}
.sct-inner{max-width:1480px;margin:0 auto;padding:150px 48px 150px;position:relative;z-index:1;}
.sct-hd{margin-bottom:48px}
.sct-eyebrow{font-size:1.063rem;letter-spacing:0.8px;color:#a3bcc6;font-weight:600;line-height:1.4;margin-bottom:1.6rem}
.saero-center .sct-h2{font-size:2.375rem;line-height:1.4;font-weight:800;letter-spacing:-.042em;color:#111}

.sct-view{display:flex;gap:16px;height:440px}
.sct-card{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;flex:1 1 0;
  transition:flex-grow .45s cubic-bezier(.4,0,.2,1);background:#111}
.sct-card.sct-on{flex-grow:2}
.sct-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.9) saturate(.94);transition:filter .45s}
.sct-card.sct-on img{filter:brightness(1) saturate(1)}
.sct-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(14,32,48,.62);transition:background .45s cubic-bezier(.4,0,.2,1)}
.sct-card.sct-on::after{background:rgba(14,32,48,.06)}
/* 2026-10-12: 진료명 크기 27px → max(30px, 2rem)(요청: 더 크게). 1600px 이상 32px(섹션 큰 제목
   38px의 84%), 1440px 이하 30px(큰 제목 33.25px보다 작게 유지). 모바일은 아래 22px 규칙 그대로.
   설명 줄 간격 1.7 → 1.5(두 줄 사이를 좁게). */
/* 2026-10-12: 굵기 — 이 사이트 글꼴은 굵기별 파일(Pretendard-Regular/Medium/Bold)이라 숫자
   font-weight(500/700/800)가 실제 굵기로 반영되지 않았다(캡션은 Regular로 가늘게, 제목·버튼은
   브라우저가 Regular를 억지로 두껍게). 캡션 = Medium, 카드 제목·버튼 = Bold 글꼴로 직접 지정. */
/* 2026-10-12: 브랜드 청색 반영(요청) — 카드를 덮는 막을 검정 계열(10,18,23)에서 짙은 청남색(14,32,48)으로.
   접힌 카드가 브랜드 톤으로 묶이고, 선택 카드와의 대비는 그대로. */
.sct-card .sct-ov{position:absolute;inset:0;z-index:2;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%)}
.sct-card .sct-cd{align-self:flex-start;font-size:12px;font-family:'Pretendard-Medium';font-weight:normal;color:#14232b;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:6px 13px;margin-bottom:auto;line-height:1.3;max-width:100%;letter-spacing:.01em;transition:background .45s cubic-bezier(.4,0,.2,1),color .45s cubic-bezier(.4,0,.2,1),border-color .45s cubic-bezier(.4,0,.2,1)}
.sct-card.sct-on .sct-cd{color:#fff;background:rgba(10,18,23,.42);border-color:rgba(255,255,255,.22)}
/* 2026-10-12: 전공 캡션 — 하늘색 채운 상자가 사진 위에서 스티커처럼 떠 보여 알약형으로 변경.
   접힌 카드(어두운 막이 덮인 상태)는 흰 배경 + 검은 글자, 펼쳐진(선택된) 카드는 어두운
   반투명 유리 + 흰 글자(요청). 색 전환 시간은 카드 막(.sct-card::after)과 같은 .45s. */
.sct-card .sct-ct{font-size:max(30px,2rem);font-family:'Pretendard-Bold';font-weight:normal;letter-spacing:-.03em;color:#fff;margin-bottom:0;
  transition:margin .3s}
.sct-card.sct-on .sct-ct{margin-bottom:14px}
.sct-card .sct-cp{font-size:16px;line-height:1.5;color:rgba(255,255,255,.92);max-height:0;overflow:hidden;
  opacity:0;transition:max-height .4s,opacity .3s}
.sct-card.sct-on .sct-cp{max-height:90px;opacity:1}
.sct-card .sct-cg{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:18px;
  font-size:14.5px;font-family:'Pretendard-Bold';font-weight:normal;color:#14232b;background:#fff;border-radius:999px;padding:11px 18px 11px 22px;
  text-decoration:none;max-height:0;overflow:hidden;opacity:0;padding-top:0;padding-bottom:0;
  box-shadow:0 3px 14px rgba(0,0,0,.28);
  transition:max-height .4s,opacity .3s,padding .3s,background .2s}
.sct-card .sct-cg:hover{background:#a3bcc6}
.sct-card.sct-on .sct-cg{max-height:46px;opacity:1;padding-top:11px;padding-bottom:11px}
.sct-card .sct-cg .sct-ar{width:20px;height:20px;border-radius:50%;background:#6d9ab5; /* 2026-10-12: 브랜드 진한 포인트색(--saero-point-deep), 기존 #14232b */ color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:11px}

@media(max-width:1080px){
 .sct-inner{padding:80px 20px 80px}
 .sct-hd{margin-bottom:28px} .saero-center .sct-h2{font-size:34px;line-height:1.24}
 /* 2026-09-22m: 청색만 통일(기본 규칙 color:#a3bcc6 상속)하고 글자
    크기·굵기·자간·줄간격은 원래 모바일 값 그대로 고정. */
 .sct-eyebrow{font-size:20px;font-weight:700;letter-spacing:.10em;line-height:1}
 .sct-view{flex-direction:column;height:auto;gap:12px}
 .sct-card{height:180px;flex:none} .sct-card.sct-on{height:300px}
 .sct-card .sct-ov{padding:22px} .sct-card .sct-ct{font-size:22px}
}

/* ==========================================================================
   2026-09-22l — Before & After와 같은 규칙으로 의료진 폭에 맞춤(숫자
   고정 대신, 자세한 사유는 main-ba.css 상단 주석 + 06-migration-log.md
   참고). 카드 그리드(.sct-view)는 고정 height 대신 aspect-ratio로 바꿔
   폭이 연속적으로 변해도 카드 모양이 항상 같은 비율로 늘어나게 했다
   (원본 비율 1384:440, 2026-09-22k 정렬 작업 때 1920px 기준으로 확정한
   값 그대로).
   ========================================================================== */
@media(min-width:1081px){
 .sct-inner{
   max-width:none; margin:0;
   padding-left:7rem;
   padding-right:calc(100% - min(77.25rem, 0.7 * (100% - 7rem)) - 4.3rem - min(24.1146vw, 463px));
 }
 .sct-hd{text-align:center}
 .sct-view{height:auto; aspect-ratio:1384/440;}
}
@media(min-width:1921px){
 .sct-inner{ max-width:1920px; margin:0 auto; padding-right:152.2px; }
}