/* ── 메인 페이지 (피그마 127:1602, 2560 캔버스) ─────────────────────────
   글자 크기는 2026-10-08 부터 서브페이지 4단계(style.css 상단 표)를 그대로 쓴다 — 섹션 제목 --tit-sect · 카드 제목 3×r3 · 줄 제목 2.25×r3 · 본문 clamp(14,2×r3,18) · 캡션 1.75×r3.
   시안 고유의 큰 영문 장식(연도·Story·흐르는 띠·Principles 뒤글자)만 예외.
   시안 px ÷ 10 = --r3 배수. 2001px 이상에서 --r3 가 10 이라 시안과 1:1, 그 아래로는 사다리를 따라 줄어든다.
   글자는 style.css 4단계 기준을 따르되, 시안 고유의 큰 영문 세리프(SINCE 연도·Story·Important value 등)는 시안값 그대로.
   사진 칸 .mn-ph 는 빈 상자 — 사진이 들어오면 .has-img 가 붙고 img 가 채운다. */

.mn-ph {
  position: relative;
  overflow: hidden;
  background: #e3e5e8;
  border-radius: calc(6*var(--r3))
}

.mn-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* 공통 — 영문 장식 제목 · 더보기 알약 · 등장 */
.mn-eyebrow,
.mn-since .eyebrow,
.mn-story .eyebrow,
.mn-value .eyebrow,
.mn-prin .eyebrow {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink)
}

.mn-more {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .55em 1.5em;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: clamp(12px, calc(1.75*var(--r3)), 14px);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background .3s, color .3s, border-color .3s
}

.mn-more i {
  width: .5em;
  height: .5em;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s
}

.mn-more:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.mn-more:hover i {
  transform: rotate(45deg) translate(2px, -2px)
}

.mn-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s ease, transform .9s ease;
  transition-delay: calc(var(--i, 0)*.1s)
}

.mn-reveal.is-in {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .mn-reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* ── 1. 히어로 — 모서리 둥근 큰 사진 칸, 왼쪽 위에 글 ─────────────────────
   시안: 좌우 80 안쪽, 위 34, 높이 753, 모서리 60. 글은 칸 안에서 왼쪽 216 · 위 163 */
.mn-hero {
  padding: calc(3.4*var(--r3)) calc(8*var(--r3)) 0
}

.mn-hero-box {
  position: relative;
  min-height: calc(75*var(--r3));
  border-radius: calc(6*var(--r3));
  background: #e3e5e8;
  overflow: hidden
}

.mn-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* 사진이 걸리면 글 뒤쪽(왼쪽)을 흰색으로 덮어 읽히게 한다 — 오른쪽 사진은 그대로 */
.mn-hero-box.has-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 32%, rgba(255, 255, 255, 0) 62%)
}

.mn-hero-copy {
  position: relative;
  z-index: 1;
  padding: calc(16*var(--r3)) calc(21.6*var(--r3)) calc(12*var(--r3))
}

.mn-hero-copy .tit {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(30px, calc(6.9*var(--r3)), 69px);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink)
}

.mn-hero-copy .txt {
  margin: calc(2.4*var(--r3)) 0 0;
  font-size: clamp(15px, calc(2.6*var(--r3)), 26px);
  color: var(--ink);
  line-height: 1.5
}

/* ── 2. SINCE — 연도 둘 사이에 선과 제목 ─────────────────────────────── */
.mn-since {
  padding: calc(19*var(--r3)) 0 0
}

.mn-since-years {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(5*var(--r3));
  max-width: calc(142*var(--r3));
  margin: 0 auto
}

.mn-since .eyebrow {
  position: absolute;
  left: 0;
  top: calc(-3*var(--r3));
  font-size: calc(5*var(--r3))
}

.mn-since .y {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: calc(20*var(--r3));
  line-height: 1;
  letter-spacing: -.07em;
  color: var(--black)
}

.mn-since .mid {
  flex: 1 1 auto;
  text-align: center
}

.mn-since .mid .tit {
  margin: 0 0 calc(3*var(--r3));
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--tit-sect);
  letter-spacing: -.02em;
  color: #1f2a26;
  line-height: 1.4
}

.mn-since .mid .line {
  display: block;
  height: 1px;
  background: var(--ink)
}

.mn-since-txt {
  max-width: calc(67*var(--r3));
  margin: calc(6*var(--r3)) auto 0;
  text-align: center;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--black)
}

/* 숫자 세 개 — 가로선 위에 흰 배지가 걸쳐 있다 */
.mn-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(23*var(--r3)) 0 0;
  padding: 0 calc(8*var(--r3));
  list-style: none
}

.mn-stats::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(3.9*var(--r3));
  height: 1px;
  background: var(--ink)
}

.mn-stats li {
  position: relative;
  text-align: center
}

.mn-stats .num {
  display: inline-block;
  padding: calc(1*var(--r3)) calc(3*var(--r3));
  background: var(--bg);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: calc(3*var(--r3));
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--black)
}

.mn-stats .label {
  display: block;
  margin-top: calc(1.3*var(--r3));
  font-size: clamp(12px, calc(1.75*var(--r3)), 14px);
  color: var(--black)
}

/* ── 3. Story — 왼쪽 세로 사진, 오른쪽 글 ────────────────────────────── */
.mn-story {
  padding: calc(40*var(--r3)) 0 0
}

.mn-story .wrap {
  display: grid;
  grid-template-columns: calc(57.5*var(--r3)) 1fr;
  gap: calc(13*var(--r3));
  align-items: start;
  max-width: calc(138*var(--r3) + 40px)
}

.mn-story-fig {
  margin: 0
}

.mn-story-ph {
  aspect-ratio: 575 / 760;
  border-radius: 0
}

.mn-story-ph img {
  object-position: 50% 0
}

.mn-story-fig figcaption {
  margin-top: calc(2.6*var(--r3));
  text-align: right;
  font-size: clamp(12px, calc(1.75*var(--r3)), 14px);
  font-weight: 500;
  color: #1f2a26;
  white-space: pre
}

.mn-story-copy {
  padding-top: calc(13*var(--r3))
}

.mn-story .eyebrow {
  font-size: calc(12*var(--r3));
  line-height: .65
}

.mn-story-copy .tit {
  margin: calc(7*var(--r3)) 0 0;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--tit-sect);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--black)
}

.mn-story-copy .txt {
  max-width: calc(67*var(--r3));
  margin: calc(3.8*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.7;
  color: var(--black)
}

.mn-story-copy .mn-more {
  margin-top: calc(4*var(--r3))
}

/* ── 4. 진료분야 — 가운데 제목, 아래에 세로(3:4) 사진 카드가 한 줄로 흐른다.
   카드 아래쪽에 영문 라벨·제목이 보이고, 올리면 사진이 흐려지며 글이 위로 올라와 설명이 드러난다.
   1640px 이상에서는 다섯 장이 한 줄에 서고 양옆 여백 57px, 그 아래로는 3.6·1.6 장씩 보이며 넘긴다(js/main.js). 진행 막대는 가운데 40%. */
.mn-fields {
  padding: calc(28.5*var(--r3)) 0 0;
  overflow: hidden
}

.mn-fields-head {
  text-align: center
}

.mn-fields-head .eyebrow {
  margin: 0 0 calc(3*var(--r3));
  font-size: clamp(14px, calc(2*var(--r3)), 20px);
  font-weight: 700;
  color: var(--ink)
}

.mn-fields-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink)
}

.mn-fields-head .txt {
  margin: 1.5em 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.7;
  color: var(--ink)
}

.mn-fields-slider {
  margin-top: calc(15.200*var(--r3));
  padding: 0 calc(5.700*var(--r3))
}

.mn-fields-slider .swiper {
  overflow: visible
}

.mn-field {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(1.900*var(--r3));
  color: #fff;
  text-decoration: none
}

.mn-field-ph {
  aspect-ratio: 3 / 4;
  border-radius: 0;
  background: #d9d9d9
}

.mn-field-ph img {
  transition: filter .3s ease-in-out
}

/* 아래쪽 글 받침 그라데이션(항상) + 올리면 검정 40% 막이 .3s 로 떠오른다(원본과 같은 방식: 색을 바꾸지 않고 층의 투명도를 바꾼다) */
.mn-field::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%)
}

.mn-field::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .3s ease-in-out
}

.mn-field-txt {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: calc(3.300*var(--r3));
  /* 라벨·제목만 보이게 설명 높이만큼 아래로 내려 둔다 */
  transform: translateY(calc(100% - 13.600*var(--r3)));
  transition: transform .5s   /* 원본과 같은 0.5s, 기본 ease */
}

.mn-field-txt .en {
  display: block;
  margin-bottom: 1em;
  font-size: clamp(10px, calc(1.200*var(--r3)), 12px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85)
}

.mn-field-txt .tit {
  display: block;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all
}

.mn-field-txt .txt {
  margin: 2.5em 0 0;
  font-size: clamp(13px, calc(1.600*var(--r3)), 16px);
  line-height: 1.6;
  word-break: keep-all
}

@media (min-width:1024px) {
  .mn-field:hover .mn-field-ph img {
    filter: blur(10px)
  }

  .mn-field:hover::after {
    opacity: 1
  }

  .mn-field:hover .mn-field-txt {
    transform: translateY(0)
  }
}

.mn-fields-bar {
  position: relative;
  width: 40%;
  height: 2px;
  margin: calc(9.500*var(--r3)) auto 0;
  background: #ccd2dd
}

.mn-fields-bar .swiper-pagination-progressbar-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform-origin: left top
}

/* ── 5. 흐르는 영문 띠 — 연한 회색 큰 세리프, 왼쪽으로 흐른다 ──────────── */
.mn-flow {
  display: flex;
  overflow: hidden;
  margin-top: calc(14*var(--r3));
  white-space: nowrap
}

.mn-flow p {
  flex: 0 0 auto;
  margin: 0;
  padding-right: .25em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: calc(16*var(--r3));
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(221, 221, 221, .5);
  animation: mnFlow 24s linear infinite
}

@keyframes mnFlow {
  to {
    transform: translateX(-100%)
  }
}

/* ── 6. 장비 — 파란 띠. 뒤에 병원 사진을 아주 옅게 깔고, 가운데 작은 영문 제목 → 왼쪽 큰 제목·설명 → 사진이 띠 아래로 넘친다.
   본문 폭은 화면의 약 58%(1920 에서 1110) — 띠 전체를 쓰지 않고 가운데로 모은다. 사진 오른쪽 위에는 원형 글자가 천천히 돈다. */
.mn-value {
  position: relative;
  margin-top: calc(-2*var(--r3));
  padding: calc(13*var(--r3)) 0 0;
  background: #0f3a70;
  color: #fff;
  display: flow-root;      /* 사진의 음수 아래여백이 섹션 밖으로 빠져나가(여백 겹침) 다음 섹션을 끌어올리지 않게 */
  overflow-x: clip
}

.mn-value-bg {
  position: absolute;
  inset: 0;
  background: url(../img/main/hero.jpg) center / cover no-repeat;
  filter: grayscale(1);
  mix-blend-mode: luminosity;
  opacity: .12
}

.mn-value .wrap {
  position: relative;
  max-width: calc(123*var(--r3) + 40px)
}

.mn-value .eyebrow {
  text-align: center;
  font-weight: 700;
  font-size: calc(3.800*var(--r3));
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff
}

.mn-value-copy {
  margin-top: calc(11*var(--r3))
}

.mn-value-copy .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: #fff
}

.mn-value-copy .txt {
  margin: calc(2*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .85)
}

.mn-value-figwrap {
  position: relative;
  z-index: 1;
  margin: calc(4.400*var(--r3)) 0 calc(-13*var(--r3))
}

.mn-value-fig {
  display: block
}

.mn-value-ph {
  aspect-ratio: 1110 / 610;
  border-radius: 0;
  background: #d9d9d9
}

.mn-value-ring {
  position: absolute;
  right: calc(-9*var(--r3));
  top: calc(-9*var(--r3));
  width: calc(18*var(--r3));
  height: calc(18*var(--r3));
  animation: mnRing 24s linear infinite
}

.mn-value-ring text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15.500px;
  letter-spacing: .08em;
  fill: rgba(255, 255, 255, .8)
}

@keyframes mnRing {
  to {
    transform: rotate(360deg)
  }
}

/* ── 7. 진료원칙 — 흰 바탕. 왼쪽: 작은 라벨 + 뒤에 깔리는 아주 옅은 큰 영문 + 짧은 글 / 오른쪽: 가로줄로 나뉜 목록(제목 | 설명) ── */
.mn-prin {
  margin-top: calc(13*var(--r3));
  padding: calc(20*var(--r3)) 0 calc(18*var(--r3));
  background: var(--bg);
  overflow-x: clip
}

.mn-prin .wrap {
  display: grid;
  grid-template-columns: 1fr calc(74*var(--r3));
  gap: calc(8*var(--r3));
  align-items: center;
  max-width: calc(123*var(--r3) + 40px)
}

.mn-prin-copy {
  position: relative
}

.mn-prin-copy .label {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(14px, calc(2.25*var(--r3)), 18px);
  font-weight: 700;
  color: var(--ink)
}

.mn-prin-copy .ghost {
  display: block;
  margin: calc(1*var(--r3)) 0 0 calc(-10*var(--r3));
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: calc(11*var(--r3));
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #f1f2f6;
  pointer-events: none
}

.mn-prin-copy .tit {
  position: relative;
  margin: calc(-1*var(--r3)) 0 0;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: calc(3*var(--r3));
  line-height: 1.4;
  letter-spacing: -.02em;
  word-break: keep-all;
  color: var(--ink)
}

.mn-prin-copy .txt {
  margin: calc(1.600*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.7;
  color: var(--ink-2)
}

.mn-prin-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #8a9ab5
}

.mn-prin-list li {
  display: grid;
  grid-template-columns: calc(31*var(--r3)) 1fr;
  gap: calc(2*var(--r3));
  align-items: center;
  padding: calc(4.200*var(--r3)) 0;
  border-bottom: 1px solid #d5dbe6
}

.mn-prin-list li:last-child {
  border-bottom-color: #8a9ab5
}

.mn-prin-list .tit {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: calc(3*var(--r3));
  line-height: 1.4;
  letter-spacing: -.02em;
  word-break: keep-all;
  color: var(--ink)
}

.mn-prin-list .txt {
  margin: 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.7;
  word-break: keep-all;
  color: #8b8789
}

/* ── 반응형 ─────────────────────────────────────────────────────────── */
@media (max-width:1240px) {

}

@media (max-width:1000px) {
  .mn-since .eyebrow {
    position: static;
    margin-bottom: calc(2*var(--r3))
  }

  .mn-since-years {
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(3*var(--r3))
  }

  .mn-since .mid {
    order: 3;
    flex-basis: 100%
  }

  .mn-story .wrap {
    grid-template-columns: 1fr;
    gap: calc(5*var(--r3))
  }

  .mn-story-fig {
    max-width: calc(57.5*var(--r3))
  }

  .mn-story-copy {
    padding-top: 0
  }
}

@media (max-width:768px) {
  .mn-hero {
    padding: 15px 15px 0
  }

  .mn-hero-box {
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: 24px
  }

  .mn-hero-copy {
    padding: 36px 24px
  }


  /* 연도 줄 — 좁은 화면에서는 SINCE / 연도 둘 / 제목·선 세 줄로 쌓는다 */
  .mn-since-years {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 0
  }

  .mn-since .eyebrow,
  .mn-since .mid {
    grid-column: 1 / -1
  }

  .mn-since .y {
    font-size: 56px
  }

  .mn-since .y + .mid + .y,
  .mn-since .y:last-child {
    text-align: right
  }

  .mn-since .mid {
    order: 5;
    margin-top: 8px
  }

  .mn-stats {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 15px
  }

  .mn-stats::before {
    display: none
  }

  .mn-story .eyebrow {
    font-size: 64px
  }


  .mn-flow p {
    font-size: 56px
  }





}

/* 장비 띠·진료원칙 반응형 */
@media (max-width:1240px) {
  .mn-prin .wrap {
    grid-template-columns: 1fr 1.300fr;
    gap: 40px
  }

  .mn-prin-copy .ghost {
    margin-left: -40px;
    font-size: 84px
  }

  .mn-value-ring {
    right: -30px
  }
}

@media (max-width:768px) {
  .mn-value {
    padding-top: 70px
  }

  .mn-value .eyebrow {
    font-size: 26px
  }

  .mn-value-copy {
    margin-top: 44px
  }

  .mn-value-figwrap {
    margin-bottom: -60px
  }

  .mn-value-ring {
    right: 4px;
    top: -50px;
    width: 100px;
    height: 100px
  }

  .mn-prin {
    margin-top: 60px;
    padding: 80px 0 70px
  }

  .mn-prin .wrap {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .mn-prin-copy .ghost {
    margin-left: -10px;
    font-size: 15vw
  }

  .mn-prin-list li {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0
  }
}

/* 진료분야 반응형 */
@media (max-width:1640px) {
  .mn-fields-slider {
    padding: 0 20px
  }
}

@media (max-width:1240px) {
  .mn-fields-slider {
    margin-top: 68px
  }

  .mn-field-txt {
    padding: 14px;
    transform: translateY(calc(100% - 84px))
  }

  .mn-field-txt .txt {
    margin-top: 1.6em
  }
}

@media (max-width:768px) {
  .mn-fields-head .tit br {
    display: none
  }

  .mn-fields-slider {
    margin-top: 40px
  }

  .mn-field-txt {
    transform: translateY(calc(100% - 70px))
  }

  .mn-field-txt .en {
    margin-bottom: .3em
  }

  .mn-fields-bar {
    width: 60%;
    margin-top: 30px
  }
}