@charset "utf-8";
/* =====================================================================
 * about.css — 병원 소개 / 진료철학 서브페이지
 *  콘텐츠 폭 1359 · 인트로(786) 중앙 / 특징카드 / 이미지 슬라이더(텍스트 고정) / 진료철학 3블록
 * ===================================================================== */
.about-page { font-family: var(--ive-font-family); color: #111; max-width: 1359px; margin-inline: auto; }
body #wrapper.ive #container_wr { padding-top: 100px; }
/* ============ 1 · 인트로 ============ */
.about-intro { max-width: 786px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.about-intro__head { margin: 0; }
.about-intro__label { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.36px; color: #2d4557; }
.about-intro__title { display: block; margin-top: 14px; font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.84px; color: #111; word-break: keep-all; }
.about-intro__desc { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -0.36px; color: #111; }
.about-intro__lead { display: block; margin-bottom: 27px; font-size: 20px; font-weight: 500; line-height: 1.5; color: #111; }

/* ============ 2 · 특징 2개(좌우 border 2px #2d4557 카드) ============ */
.about-feats { position: relative; margin-top: 90px; display: grid; grid-template-columns: 1fr 1fr; min-height: 220px; background: #fff; border-left: 2px solid #2d4557; border-right: 2px solid #2d4557; border-radius: 15px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; }
.about-feats::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 88px; background: #ccc; } /* 가운데만 이어지는 구분선(콘텐츠 높이) */
.about-feat { display: flex; align-items: center; justify-content: center; gap: 50px; padding: 20px; }
.about-feat__icon { flex: 0 0 auto; display: block; }
.about-feat__icon img { display: block; }
.about-feat__txt { display: flex; flex-direction: column; gap: 12px; }
.about-feat__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.4px; color: #2d4557; }
.about-feat__desc { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.36px; color: #333; }

/* ============ 상단 배경(연한 시안 배경, 인트로+특징 뒤) ============ */
.about-top { position: relative; z-index: 0; padding-bottom:180px} /* ::before 배경 기준점 + 독립 스택(‑1 배경이 흰 배경에 안 가리게) */
.about-top::before {
    content: ""; position: absolute; z-index: -1;
    left: 50%; transform: translateX(-50%); width: 100vw;
    top: 0; bottom: 0; /* .about-top(인트로+특징) 영역에만 한정 — 세로로 벗어나면 클리핑됨 */
    background: url("../img/ive/about/bg-philosophy.png") center top / cover no-repeat; /* 가로 풀블리드 + 영역 꽉 채움(모바일 세로 하드컷 방지) */
   /* -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 100%); */
}

/* ============ 3 · NASS의 재생 클리닉(진료 안내) ============ */
.about-clinic { margin-top: 200px; display: flex; flex-direction: column; align-items: center; gap: 42px; }
.about-clinic__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.about-clinic__label { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.36px; color: #2d4557; }
.about-clinic__title { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.8px; color: #111; word-break: keep-all; }
.about-clinic__steps { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
.about-clinic__grid { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 150px; width: 100%; }
.about-clinic__grid::before { content: ""; position: absolute; top: 175px; left: 50%; transform: translate(-50%, -50%); width: 149px; height: 0; border-top: 1px dashed #ccc; } /* STEP 사이 점선 연결선(이미지 세로 중앙) */
.about-clinic__card { display: flex; flex-direction: column; align-items: center; width: 457px; max-width: 100%; }
.about-clinic__photo { width: 100%; height: 350px; border-radius: 15px; overflow: hidden; }
.about-clinic__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-clinic__cap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0; text-align: center; }
.about-clinic__step { margin: 0; display: flex; align-items: center; gap: 12px; line-height: 1.3; }
.about-clinic__stepno { font-size: 20px; font-weight: 200; letter-spacing: -0.4px; color: #2d4557; }
.about-clinic__stepname { font-size: 24px; font-weight: 700; letter-spacing: -0.48px; color: #111; }
.about-clinic__desc { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.36px; color: #333; word-break: keep-all; }
.about-clinic__note { margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; width: 1065px; max-width: 100%; min-height: 113px; padding: 10px; box-sizing: border-box; background: #f5f5f5; border-radius: 15px; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.4px; color: #333; word-break: keep-all; }

/* ============ 4 · 이미지 슬라이더(풀블리드 중앙 배치 · 양옆 peek · 텍스트 고정) ============ */
.about-slider { position: relative; margin-top: 191px; width: 100vw; margin-left: calc(50% - 50vw); }
.about-slider__viewport { position: relative; width: 100%; height: 600px; overflow: hidden; }
.about-slider__track { display: flex; height: 100%; will-change: transform; }
.about-slider__slide { position: relative; flex: 0 0 auto; width: min(1359px, 82vw); height: 100%; margin-right: 20px; border-radius: 20px; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; }
.about-slider__slide::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); pointer-events: none; }
.about-slider__text { position: absolute; inset: 0; z-index: 2; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.64px; pointer-events: none; padding: 0 24px; word-break: keep-all; }

/* ============ 5 · 우리의 진료 철학 ============ */
.about-philos { margin-top: 180px; display: flex; flex-direction: column; gap: 40px; }
.about-philos__head { display: flex; flex-direction: column; gap: 12px; }
.about-philos__label { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.36px; color: #2d4557; }
.about-philos__title { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.8px; color: #111; word-break: keep-all; }
.about-philos__list { display: flex; flex-direction: column; }
.about-philos__row { display: flex; align-items: center; gap: 120px; padding: 40px 0; border-top: 1px solid #ccc; }
.about-philos__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 35px; }
.about-philos__subtitle { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: -0.6px; color: #111; word-break: keep-all; }
.about-philos__body { display: flex; flex-direction: column; gap: 11px; }
.about-philos__lead { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -0.4px; color: #111; word-break: keep-all; }
.about-philos__desc { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -0.36px; color: #333; word-break: keep-all; }
.about-philos__photo { flex: 0 0 680px; width: 680px; height: 340px; border-radius: 15px; overflow: hidden; }
.about-philos__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ 반응형 (프로젝트 breakpoint 1024 / 768) ============ */
@media (max-width: 1024px) {
    body #wrapper.ive #container_wr { padding-top: 60px; }
    .about-intro__title { font-size: 34px; }
    .about-feat { gap: 32px; padding: 18px; }
    .about-feat__icon img { width: 68px; height: auto; }
    .about-clinic { margin-top: 260px; gap: 36px; }
    .about-clinic__title { font-size: 34px; }
    .about-clinic__grid { gap: 60px; }
    .about-clinic__grid::before { display: none; } /* 간격 축소 → 연결선 숨김 */
    .about-clinic__card { width: auto; flex: 1 1 0; min-width: 0; }
    .about-clinic__photo { height: auto; aspect-ratio: 457 / 350; }
    .about-clinic__note { width: 100%; font-size: 18px; }
    .about-slider { margin-top: 130px; }
    .about-slider__viewport { height: 440px; }
    .about-slider__text { font-size: 26px; }
    .about-philos { margin-top: 130px; }
    .about-philos__title { font-size: 34px; }
    .about-philos__row { gap: 56px; }
    .about-philos__subtitle { font-size: 26px; }
    .about-philos__photo { flex-basis: 46%; width: 46%; height: auto; aspect-ratio: 680 / 340; }
}
@media (max-width: 768px) {
body #wrapper.ive #container_wr { padding-top: 30px; }
    .about-top {  padding-bottom:100px}
    .about-intro { gap: 28px; }
    .about-intro__title { font-size: 26px; }
    .about-intro__lead { font-size: 18px; margin-bottom: 20px; }
    .about-intro__desc { font-size: 16px; }
    .about-intro__desc br { display: none; }
    .about-feats { grid-template-columns: 1fr; min-height: 0; margin-top: 56px; }
    .about-feats::after { display: none; } /* 세로 스택 → 세로 구분선 숨김 */
    .about-feat { gap: 20px; padding: 26px 20px; justify-content: flex-start; }
    .about-feats .about-feat:first-child { border-bottom: 1px solid #ccc; }
    .about-feat__icon img { width: 56px; }
    .about-feat__title { font-size: 18px; }
    .about-feat__desc { font-size: 15px; }
    .about-feat__desc br { display: none; }
    .about-clinic { margin-top: 120px; gap: 28px; }
    .about-clinic__title { font-size: 26px; }
    .about-clinic__grid { flex-direction: column; align-items: center; gap: 40px; }
    .about-clinic__card { width: 100%; max-width: 420px; }
    .about-clinic__photo { aspect-ratio: 457 / 350; }
    .about-clinic__stepno { font-size: 18px; }
    .about-clinic__stepname { font-size: 22px; }
    .about-clinic__desc { font-size: 15px; }
    .about-clinic__desc br { display: none; }
    .about-clinic__note { font-size: 16px; padding: 20px; }
    .about-clinic__note br { display: none; }
    .about-slider { margin-top: 80px; }
    .about-slider__viewport { height: 300px; }
    .about-slider__slide { width: 86vw; border-radius: 14px; }
    .about-slider__text { font-size: 16px; }
    .about-philos { margin-top: 90px; gap: 28px; }
    .about-philos__title { font-size: 26px; }
    .about-philos__row { flex-direction: column; align-items: stretch; gap: 22px; padding: 30px 0; }
    .about-philos__text { gap: 22px; }
    .about-philos__subtitle { font-size: 22px; }
    .about-philos__lead { font-size: 17px; }
    .about-philos__desc { font-size: 15px; }
    .about-philos__lead br, .about-philos__desc br { display: none; }
    .about-philos__photo { flex-basis: auto; width: 100%; }
}