@charset "utf-8";

/* =========================================================
   MANSUP HOSPITAL GUIDE — FULL WIDTH REDESIGN
   - 기본 콘텐츠: width:100% / 좌우 7vw
   - 풀와이드 비주얼: 별도 padding 없이 화면 전체 사용
   - 고정 max-width 컨테이너 없음
========================================================= */
:root {
  --ms-navy: #06182e;
  --ms-navy-2: #0b274a;
  --ms-blue: #0878be;
  --ms-blue-2: #125ca5;
  --ms-cyan: #79c8ef;
  --ms-sky: #edf7ff;
  --ms-paper: #f4f7fa;
  --ms-line: rgba(8, 31, 56, .12);
  --ms-text: #172434;
  --ms-muted: #667482;
  --ms-section-y: clamp(104px, 8vw, 158px);
  --ms-section-x: 7vw;
}
   
.ms-sub-page {
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--ms-text);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -.025em;
  margin-top: 50px;
}

.ms-sub-page * {
  box-sizing: border-box;
}

.ms-sub-page a {
  color: inherit;
  text-decoration: none;
}

.ms-sub-page img {
  display: block;
  max-width: 100%;
}

.ms-section {
  position: relative;
  width: 100%;
  padding: var(--ms-section-y) var(--ms-section-x);
  border-bottom: 1px solid var(--ms-line);
  background: #fff;
}

.ms-section.no-line {
  border-bottom: 0;
}

.ms-section.is-soft {
  background: #f4f8fb;
}

.ms-section.is-soft .up {
  margin-bottom: 20px;
  color: var(--ms-blue);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
}

.ms-section.is-navy {
  color: #fff;
  background: linear-gradient(135deg, #04111f 0%, #0a2748 58%, #06182e 100%);
}

.ms-section.is-full-image {
  color: #fff;
  background-size: cover;
  background-position: center;
}

.ms-section.is-full-image:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 17, 31, .94), rgba(4, 17, 31, .70) 52%, rgba(4, 17, 31, .22));
}

.ms-section.is-full-image>* {
  position: relative;
  z-index: 1;
}

.ms-container {
  width: 100%;
  max-width: none;
  margin: 0;
}

.ms-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--ms-blue);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ms-kicker:before {
  content: "";
  width: 42px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.is-navy .ms-kicker,
.is-full-image .ms-kicker {
  color: var(--ms-cyan);
}

.ms-title {
  margin: 0;
  color: var(--ms-navy);
  font-size: clamp(38px, 4.5vw, 56px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.ms-title.mid {
  font-size: clamp(32px, 3.3vw, 56px);
}

.ms-title.small {
  font-size: clamp(27px, 2.4vw, 42px);
}

.is-navy .ms-title,
.is-full-image .ms-title {
  color: #fff;
}

.ms-desc {
  max-width: 780px;
  margin: 26px 0 0;
  color: #566678;
  font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1.9;
  word-break: keep-all;
}

.is-navy .ms-desc,
.is-full-image .ms-desc {
  color: rgba(255, 255, 255, .76);
}

.ms-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.ms-btn {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.ms-btn:hover {
  transform: translateY(-3px);
}

.ms-btn.navy {
  color: #fff;
  background: var(--ms-navy);
}

.ms-btn.blue {
  color: #fff;
  background: var(--ms-blue);
}

.ms-btn.line {
  color: var(--ms-navy);
  background: #fff;
  border-color: rgba(6, 24, 46, .22);
}

.is-navy .ms-btn.line,
.is-full-image .ms-btn.line {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
}

/* ABOUT */
.ms-about-opening {
  padding-top: clamp(92px, 7vw, 138px);
  padding-bottom: clamp(76px, 6vw, 112px);
}

.ms-about-opening-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, .88fr);
  gap: clamp(56px, 8vw, 56px);
  align-items: center;
}

.ms-about-opening-title .ms-title {
  max-width: 900px;
}

.ms-about-opening-copy {
  padding-left: clamp(26px, 3vw, 58px);
  border-left: 1px solid var(--ms-line);
}

.ms-about-opening-copy .ms-desc {
  max-width: 760px;
  margin-top: 0;
}

.ms-about-opening-standard {
  margin-top: clamp(34px, 4vw, 58px);
  padding-top: 26px;
  border-top: 1px solid var(--ms-line);
}

.ms-about-opening-standard>span {
  display: block;
  margin-bottom: 11px;
  color: var(--ms-blue);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .18em;
}

.ms-about-opening-standard strong {
  display: block;
  color: var(--ms-navy);
  font-size: clamp(20px, 1.65vw, 28px);
  line-height: 1.35;
  letter-spacing: -.045em;
}

.ms-about-opening-standard p {
  margin: 12px 0 0;
  color: var(--ms-muted);
}

.ms-about-visual {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 46vw, 720px);
  overflow: hidden;
  background: #dfe6ec;
}

.ms-about-visual-media,
.ms-about-visual-media img {
  width: 100%;
  height: 100%;
}

.ms-about-visual-media {
  position: absolute;
  inset: 0;
}

.ms-about-visual-media img {
  object-fit: cover;
  object-position: center 42%;
}

.ms-about-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 17, 31, .02) 34%, rgba(4, 17, 31, .80)), linear-gradient(90deg, rgba(4, 17, 31, .22), transparent 48%);
}

.ms-about-visual-overlay {
  position: absolute;
  z-index: 2;
  left: 7vw;
  right: 7vw;
  bottom: clamp(34px, 4vw, 70px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  color: #fff;
}

.ms-about-visual-message>span {
  display: block;
  margin-bottom: 14px;
  color: var(--ms-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.ms-about-visual-message h1 {
  display: block;
  max-width: 780px;
  font-size: clamp(28px, 3.2vw, 56px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.ms-about-visual-branches {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(28px, 4vw, 68px);
  padding-bottom: 5px;
}

.ms-about-visual-branches div {
  min-width: 116px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .48);
}

.ms-about-visual-branches b,
.ms-about-visual-branches span {
  display: block;
}

.ms-about-visual-branches b {
  color: var(--ms-cyan);
  font-size: 13px;
}

.ms-about-visual-branches span {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
}

.ms-head-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: end;
}

.ms-big-copy {
  margin: 0;
  font-size: clamp(34px, 5vw, 84px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.08em;
}

.ms-big-copy em {
  color: var(--ms-cyan);
  font-style: normal;
}

.ms-head-grid .ms-desc {
  max-width: none;
  margin-top: 0;
}

.ms-value-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 58px;
  background: var(--ms-line);
  border-top: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
}

.ms-value-card {
  min-height: 300px;
  padding: 34px 28px;
  background: #fff;
}

.ms-value-card .num {
  display: block;
  margin-bottom: 42px;
  color: var(--ms-blue);
  font-size: 13px;
  font-weight: 900;
}

.ms-value-card h3 {
  margin: 0 0 16px;
  color: var(--ms-navy);
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -.055em;
}

.ms-value-card p {
  margin: 0;
  color: #5d6b7b;
}

.ms-process-wrap {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(42px, 6vw, 92px);
  align-items: start;
}

.ms-process-list {
  display: grid;
  margin-top: 46px;
  border-top: 1px solid var(--ms-line);
}

.ms-step-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ms-line);
}

.ms-step-card b {
  color: var(--ms-blue);
  font-size: 14px;
}

.ms-step-card h3 {
  margin: 0 0 6px;
  color: var(--ms-navy);
  font-size: 28px;
  letter-spacing: -.02em;
}

.ms-step-card p {
  margin: 0;
  color: #5f6d7b;
}

.ms-process-media {
  position: sticky;
  top: 120px;
  min-height: 640px;
  overflow: hidden;
}

.ms-process-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-process-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(6, 24, 46, .72));
}

.ms-process-caption {
  position: absolute;
  z-index: 1;
  left: 34px;
  right: 34px;
  bottom: 34px;
  color: #fff;
}

.ms-process-caption strong {
  display: block;
  font-size: 28px;
}

.ms-process-caption span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .72);
}

.ms-branch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 52px;
  /* background: rgba(255, 255, 255, .18); */
}

.ms-branch-card {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  color: #fff;
  background: var(--ms-navy);
}

.ms-branch-card:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 24, 46, .02), rgba(6, 24, 46, .30));
}

.ms-branch-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .78;
}

.ms-branch-body {
  position: absolute;
  z-index: 2;
  left: 34px;
  right: 34px;
  bottom: 34px;
}

.ms-branch-body>span {
  color: var(--ms-cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ms-branch-body h3 {
  margin: 12px 0;
  color: #fff;
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: 1.15;
  letter-spacing: -.065em;
}

.ms-branch-body p {
  margin: 0;
  color: rgba(255, 255, 255, .76);
}

.ms-branch-body .ms-btn-row {
  margin-top: 24px;
}

/* DOCTORS LIST */
.ms-doctors-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .58fr);
  gap: clamp(48px, 8vw, 150px);
  align-items: end;
}

.ms-doctors-intro .ms-desc {
  margin-top: 0;
}

.ms-doctor-feature-list {
  width: 100%;
  border-top: 1px solid var(--ms-line);
}

.ms-doctor-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 720px;
  border-bottom: 1px solid var(--ms-line);
  background: #fff;
}

.ms-doctor-feature:nth-child(even) .ms-doctor-feature-photo {
  order: 2;
}

.ms-doctor-feature-photo {
  position: relative;
  overflow: hidden;
  background: #e8eef3;
}

.ms-doctor-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.ms-doctor-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 7vw, 130px);
}

.ms-doctor-feature-copy .branch {
  color: var(--ms-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ms-doctor-feature-copy h2 {
  margin: 18px 0 22px;
  color: var(--ms-navy);
  font-size: clamp(42px, 4.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -.08em;
}

.ms-doctor-feature-copy h2 small {
  display: block;
  margin-top: 12px;
  font-size: .33em;
  letter-spacing: .04em;
}

.ms-doctor-quote {
  max-width: 680px;
  margin: 0;
  color: #334457;
  font-size: clamp(20px, 1.7vw, 29px);
  line-height: 1.65;
  letter-spacing: -.04em;
  word-break: keep-all;
}

.ms-doctor-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 38px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--ms-line);
  list-style: none;
  color: #607080;
}

.ms-doctor-summary li {
  position: relative;
  padding-left: 13px;
}

.ms-doctor-summary li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ms-blue);
}

/* DOCTOR DETAIL */
.ms-doctor-hero {
  position: relative;
  display: flex;
  width: 100%;
  min-height: clamp(650px, 52vw, 720px);
  overflow: hidden;
  color: #fff;
  background-color: #dfe6ec;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.ms-doctor-hero:before {
  content: "";
  position: absolute;
  /* z-index: 0; */
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 17, 31, .94) 0%, rgba(4, 17, 31, .78) 38%, rgba(4, 17, 31, .38) 66%, rgba(4, 17, 31, .08) 100%),
    linear-gradient(180deg, rgba(4, 17, 31, .05) 35%, rgba(4, 17, 31, .58) 100%);
}

.ms-doctor-hero.is-suwon {
  background-position: right center;
}

.ms-doctor-hero.is-busan {
  background-position: right center;
}

.ms-doctor-hero-copy {
  position: relative;
  /* z-index: 2; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 980px;
  min-height: inherit;
  padding: clamp(170px, 18vw, 310px) 7vw clamp(66px, 7vw, 118px);
}

.ms-doctor-hero-copy .branch {
  color: var(--ms-cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ms-doctor-hero-copy h1 {
  max-width: 860px;
  margin: 20px 0 28px;
  color: #fff;
  font-size: clamp(42px, 4.3vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.ms-doctor-hero-copy p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, .80);
  font-size: clamp(17px, 1.12vw, 20px);
  line-height: 1.9;
}

.ms-doctor-hero .ms-btn.navy {
  color: #fff;
  background: var(--ms-blue);
}

.ms-doctor-hero .ms-btn.line {
  color: #fff;
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .46);
}

.ms-profile-layout {
  display: grid;
  grid-template-columns: minmax(280px, .34fr) minmax(0, .66fr);
  gap: clamp(50px, 8vw, 140px);
  align-items: start;
}

.ms-profile-side {
  position: sticky;
  top: 120px;
}

.ms-profile-name {
  margin: 0;
  color: var(--ms-navy);
  font-size: clamp(34px, 3vw, 52px);
  line-height: 1.14;
  letter-spacing: -.02em;
}

.ms-profile-name span {
  display: block;
  margin-top: 12px;
  color: var(--ms-blue);
  font-size: 13px;
  letter-spacing: .13em;
}

.ms-profile-quote {
  margin: 30px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--ms-line);
  color: #4b5d70;
  font-size: 20px;
  line-height: 1.75;
}

.ms-profile-career {
  border-top: 1px solid var(--ms-line);
}

.ms-profile-career li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ms-line);
  list-style: none;
  color: #435366;
}

.ms-profile-career li b {
  color: var(--ms-blue);
  font-size: 12px;
  letter-spacing: .1em;
}

.ms-profile-career ul {
  margin: 0;
  padding: 0;
}

.ms-doctor-direction {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(50px, 7vw, 120px);
  align-items: center;
}

.ms-doctor-direction-media {
  min-height: 560px;
  overflow: hidden;
}

.ms-doctor-direction-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-doctor-direction-copy .ms-desc {
  max-width: none;
}

.ms-direction-points {
  display: grid;
  margin-top: 38px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.ms-direction-points div {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.ms-direction-points b {
  color: var(--ms-cyan);
  font-size: 13px;
}

.ms-direction-points strong {
  color: #fff;
  font-size: 19px;
}

/* FACILITY */
.ms-facility-lead {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, .3fr);
  gap: clamp(44px, 8vw, 150px);
  align-items: end;
}

.ms-facility-lead .ms-desc {
  margin-top: 0;
}

.ms-facility-panorama {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 48vw, 880px);
  overflow: hidden;
}

.ms-facility-panorama img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-facility-panorama:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(4, 17, 31, .76));
}

.ms-facility-panorama-caption {
  position: absolute;
  z-index: 2;
  left: 7vw;
  right: 7vw;
  bottom: clamp(34px, 5vw, 76px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  color: #fff;
}

.ms-facility-panorama-caption strong {
  font-size: clamp(28px, 3vw, 54px);
  line-height: 1.2;
  letter-spacing: -.06em;
}

.ms-facility-panorama-caption span {
  max-width: 430px;
  color: rgba(255, 255, 255, .72);
  text-align: right;
}

.ms-space-sequence {
  width: 100%;
}

.ms-space-item {
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(340px, .5fr);
  min-height: 560px;
  border-bottom: 1px solid var(--ms-line);
}

.ms-space-item:nth-child(even) {
  grid-template-columns: minmax(340px, .5fr) minmax(0, .5fr);
}

.ms-space-item:nth-child(even) .ms-space-photo {
  order: 2;
}

.ms-space-photo {
  overflow: hidden;
}
 
.ms-space-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-space-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 110px) 7vw;
}

.ms-space-copy .num {
  color: var(--ms-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ms-space-copy h2 {
  margin: 18px 0;
  color: var(--ms-navy);
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.12;
  letter-spacing: -.07em;
}

.ms-space-copy p {
  max-width: 620px;
  margin: 0;
  color: #5b6a7a;
}

.ms-space-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 54px;
  border-top: 1px solid var(--ms-line);
  border-left: 1px solid var(--ms-line);
}

.ms-space-index article {
  min-height: 220px;
  padding: 28px;
  border-right: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
  background: #fff;
}

.ms-space-index b {
  color: var(--ms-blue);
  font-size: 12px;
}

.ms-space-index h3 {
  margin: 28px 0 10px;
  color: var(--ms-navy);
  font-size: 28px;
}

.ms-space-index p {
  margin: 0;
  color: #637181;
}

/* EQUIPMENT */
.ms-equipment-hero {
  min-height: clamp(560px, 52vw, 920px);
  display: flex;
  align-items: flex-end;
}

.ms-equipment-hero .ms-container {
  padding-bottom: clamp(20px, 2vw, 40px);
}

.ms-equipment-hero .ms-title {
  max-width: 1000px;
}

.ms-equipment-intro {
  display: grid;
  grid-template-columns: minmax(0, .50fr) minmax(360px, .55fr);
  gap: clamp(44px, 8vw, 140px);
  align-items: end;
}

.ms-equipment-intro .ms-desc {
  margin-top: 0;
}

.ms-equipment-list {
  margin-top: 64px;
  border-top: 1px solid var(--ms-line);
}

.ms-equipment-row {
  display: grid;
  grid-template-columns: 90px minmax(260px, .45fr) minmax(0, .55fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--ms-line);
}

.ms-equipment-row .num {
  color: var(--ms-blue);
  font-size: 13px;
  font-weight: 900;
}

.ms-equipment-row h3 {
  margin: 0;
  color: var(--ms-navy);
  font-size: clamp(25px, 2.2vw, 38px);
  line-height: 1.25;
  letter-spacing: -.06em;
}

.ms-equipment-row p {
  margin: 0;
  color: #5b6a7a;
}

.ms-equipment-principle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 54px;
  background: rgba(255, 255, 255, .18);
}

.ms-equipment-principle article {
  min-height: 260px;
  padding: 34px;
  background: rgba(255, 255, 255, .06);
}

.ms-equipment-principle b {
  color: var(--ms-cyan);
  font-size: 12px;
}

.ms-equipment-principle h3 {
  margin: 38px 0 12px;
  color: #fff;
  font-size: 24px;
}

.ms-equipment-principle p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
}

/* STORY / COLUMN MAGAZINE */
.ms-magazine-hero {
  position: relative;
  width: 100%;
  min-height: clamp(540px, 50vw, 880px);
  overflow: hidden;
  color: #fff;
}

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

.ms-magazine-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 17, 31, .92), rgba(4, 17, 31, .55) 50%, rgba(4, 17, 31, .12)), linear-gradient(180deg, transparent 42%, rgba(4, 17, 31, .55));
}

.ms-magazine-hero-copy {
  position: absolute;
  z-index: 2;
  left: 7vw;
  right: 7vw;
  bottom: clamp(52px, 7vw, 118px);
}

.ms-magazine-hero-copy .ms-title {
  max-width: 980px;
  color: #fff;
}

.ms-magazine-hero-copy .ms-desc {
  color: rgba(255, 255, 255, .76);
}

.ms-magazine-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid var(--ms-line);
}

.ms-magazine-nav a {
  position: relative;
  color: #6b7785;
  font-size: 15px;
  font-weight: 800;
}

.ms-magazine-nav a.is-active {
  color: var(--ms-blue);
}

.ms-magazine-nav a.is-active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25px;
  height: 2px;
  background: var(--ms-blue);
}

.ms-featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  min-height: 590px;
  margin-top: 64px;
  background: #f3f7fa;
}

.ms-featured-post-media {
  overflow: hidden;
}

.ms-featured-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-featured-post-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 100px);
}

.ms-featured-post-copy .category {
  color: var(--ms-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ms-featured-post-copy h2 {
  margin: 18px 0;
  color: var(--ms-navy);
  font-size: clamp(32px, 3vw, 54px);
  line-height: 1.14;
  letter-spacing: -.07em;
}

.ms-featured-post-copy p {
  margin: 0;
  color: #5b6b7a;
}

.ms-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 24px;
  margin-top: 28px;
}

.ms-post-card {
  border-top: 1px solid var(--ms-line);
  padding-top: 24px;
}

.ms-post-card .thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 22px;
  background: #e6ecf1;
}

.ms-post-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.ms-post-card:hover .thumb img {
  transform: scale(1.035);
}

.ms-post-card .category {
  color: var(--ms-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ms-post-card h3 {
  margin: 12px 0 10px;
  color: var(--ms-navy);
  font-size: 23px;
  line-height: 1.4;
  letter-spacing: -.055em;
}

.ms-post-card p {
  margin: 0;
  color: #687586;
}

.ms-column-author-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 54px;
  background: var(--ms-line);
}

.ms-column-author {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 260px;
  background: #fff;
}

.ms-column-author img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.ms-column-author div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}

.ms-column-author span {
  color: var(--ms-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ms-column-author h3 {
  margin: 12px 0 10px;
  color: var(--ms-navy);
  font-size: 28px;
}

.ms-column-author p {
  margin: 0;
  color: #647282;
}

/* LOCATION */
.ms-location-opening {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(360px, .2fr);
  gap: clamp(44px, 8vw, 150px);
  align-items: end;
}

.ms-location-opening .ms-desc {
  margin-top: 0;
}

.ms-location-branches {
  width: 100%;
}

.ms-location-branch {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  min-height: 650px;
  border-top: 1px solid var(--ms-line);
}

.ms-location-branch:nth-child(even) {
  grid-template-columns: minmax(390px, .92fr) minmax(0, 1.08fr);
}

.ms-location-branch:nth-child(even) .ms-location-branch-media {
  order: 2;
}

.ms-location-branch-media {
  position: relative;
  overflow: hidden;
  background: #e9eef2;
}

.ms-location-branch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-location-branch-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 17, 31, .65));
}

.ms-location-branch-media span {
  position: absolute;
  z-index: 2;
  left: 34px;
  bottom: 28px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ms-location-branch-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(50px, 7vw, 120px);
}

.ms-location-branch-copy .branch {
  color: var(--ms-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ms-location-branch-copy h2 {
  margin: 18px 0 22px;
  color: var(--ms-navy);
  font-size: clamp(35px, 3.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -.075em;
}

.ms-location-address {
  margin: 0;
  color: #405267;
  font-size: 19px;
  line-height: 1.7;
}

.ms-location-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--ms-line);
}

.ms-location-meta span {
  display: block;
  color: #82909e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ms-location-meta strong {
  display: block;
  margin-top: 8px;
  color: var(--ms-navy);
  font-size: 18px;
}

.ms-location-detail-hero {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 50vw, 900px);
  overflow: hidden;
  color: #fff;
}

.ms-location-detail-hero>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-location-detail-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 17, 31, .91), rgba(4, 17, 31, .50) 52%, rgba(4, 17, 31, .12)), linear-gradient(180deg, transparent 48%, rgba(4, 17, 31, .55));
}

.ms-location-detail-copy {
  position: absolute;
  z-index: 2;
  left: 7vw;
  right: 7vw;
  bottom: clamp(52px, 7vw, 118px);
}

.ms-location-detail-copy .branch {
  color: var(--ms-cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ms-location-detail-copy h1 {
  max-width: 980px;
  margin: 18px 0 24px;
  color: #fff;
  font-size: clamp(42px, 4.6vw, 80px);
  line-height: 1.07;
  letter-spacing: -.08em;
}

.ms-location-detail-copy p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 18px;
}

.ms-visit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  min-height: 640px;
}

.ms-map-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
  overflow: hidden;
  background: #e9eff4;
}

.ms-map-placeholder:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  background: linear-gradient(90deg, transparent 49.5%, rgba(8, 31, 56, .12) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(8, 31, 56, .12) 50%, transparent 50.5%);
  background-size: 72px 72px;
}

.ms-map-placeholder div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ms-map-placeholder b {
  display: block;
  color: var(--ms-navy);
  font-size: 26px;
}

.ms-map-placeholder span {
  display: block;
  margin-top: 8px;
  color: #738292;
}

.ms-visit-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(46px, 6vw, 100px);
  background: var(--ms-navy);
  color: #fff;
}

.ms-visit-panel .label {
  color: var(--ms-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ms-visit-panel h2 {
  margin: 18px 0 28px;
  color: #fff;
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1.15;
  letter-spacing: -.07em;
}

.ms-visit-info {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.ms-visit-info li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  list-style: none;
}

.ms-visit-info b {
  color: var(--ms-cyan);
  font-size: 16px;
}

.ms-visit-info span {
  color: rgba(255, 255, 255, .8);
}

.ms-transport-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 54px;
  background: var(--ms-line);
}

.ms-transport-grid article {
  min-height: 270px;
  padding: 34px;
  background: #fff;
}

.ms-transport-grid b {
  color: var(--ms-blue);
  font-size: 12px;
}

.ms-transport-grid h3 {
  margin: 38px 0 12px;
  color: var(--ms-navy);
  font-size: 24px;
}

.ms-transport-grid p {
  margin: 0;
  color: #617080;
}

/* COMMON COMPONENTS */
.ms-caution-box {
  display: grid;
  grid-template-columns: minmax(260px, .36fr) minmax(0, .64fr);
  gap: clamp(32px, 5vw, 82px);
  align-items: start;
  padding: clamp(42px, 5vw, 72px) 0;
  border-top: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
}

.ms-caution-box h2 {
  margin: 0;
  color: var(--ms-navy);
  font-size: clamp(28px, 2.8vw, 46px);
  line-height: 1.18;
  letter-spacing: -.02em;
}

.ms-caution-box p {
  margin: 0;
  color: #566579;
  font-size: 20px;
}

.ms-faq-list {
  display: grid;
  margin-top: 44px;
  border-top: 1px solid var(--ms-line);
}

.ms-faq-item {
  border-bottom: 1px solid var(--ms-line);
  background: #fff;
}

.ms-faq-q {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  gap: 18px;
  width: 100%;
  padding: 30px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ms-faq-q em {
  color: var(--ms-blue);
  font-style: normal;
  font-weight: 900;
}

.ms-faq-q strong {
  color: var(--ms-navy);
  font-size: 24px;
  letter-spacing: -.04em;
}

.ms-faq-q i {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(8, 120, 190, .22);
  border-radius: 50%;
}

.ms-faq-q i:before,
.ms-faq-q i:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--ms-blue);
  transform: translate(-50%, -50%);
}

.ms-faq-q i:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ms-faq-a {
  display: none;
  padding: 0 0 26px 70px;
  color: #5f6d7b;
}

.ms-faq-a p {
  margin: 0;
}

.ms-faq-item.is-open .ms-faq-a {
  display: block;
}

.ms-faq-item.is-open .ms-faq-q i:after {
  display: none;
}

.ms-cta-box {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 88px);
  color: #fff;
  background: linear-gradient(135deg, #06182e, #0b274a 62%, #04111f);
  border-radius: 30px;
}

.ms-cta-box:after {
  content: "MENS UP";
  position: absolute;
  right: -2vw;
  bottom: -3vw;
  color: rgba(255, 255, 255, .05);
  font-size: clamp(80px, 12vw, 210px);
  font-weight: 900;
  letter-spacing: -.08em;
}

.ms-cta-box>* {
  position: relative;
  z-index: 1;
}

.ms-cta-box h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 600;
}

.ms-cta-box p {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .74);
}

@media (max-width:1440px) {
  .ms-value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width:1180px) {
  :root {
    --ms-section-y: 100px;
    --ms-section-x: 6vw;
  }

  .ms-about-opening-grid,
  .ms-head-grid,
  .ms-process-wrap,
  .ms-doctors-intro,
  .ms-profile-layout,
  .ms-doctor-direction,
  .ms-facility-lead,
  .ms-equipment-intro,
  .ms-location-opening {
    grid-template-columns: 1fr;
  }

  .ms-about-opening-copy {
    padding-left: 0;
    border-left: 0;
  }

  .ms-about-visual-overlay {
    left: 6vw;
    right: 6vw;
  }

  .ms-process-media,
  .ms-profile-side {
    position: relative;
    top: 0;
  }

  .ms-doctor-feature,
  .ms-space-item,
  .ms-space-item:nth-child(even),
  .ms-featured-post,
  .ms-location-branch,
  .ms-location-branch:nth-child(even),
  .ms-visit-layout {
    grid-template-columns: 1fr;
  }

  .ms-doctor-feature:nth-child(even) .ms-doctor-feature-photo,
  .ms-space-item:nth-child(even) .ms-space-photo,
  .ms-location-branch:nth-child(even) .ms-location-branch-media {
    order: 0;
  }

  .ms-doctor-feature-photo {
    min-height: 600px;
  }

  .ms-space-photo,
  .ms-location-branch-media {
    min-height: 520px;
  }

  .ms-featured-post-media {
    min-height: 460px;
  }

  .ms-column-author-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width:760px) {
  :root {
    --ms-section-y: 72px;
    --ms-section-x: 24px;
  }

  .ms-sub-page {
    font-size: 16px;
  }

  .ms-about-opening-grid {
    gap: 38px;
  }

  .ms-about-visual {
    min-height: 560px;
  }

  .ms-about-visual-overlay {
    left: 24px;
    right: 24px;
    bottom: 28px;
    flex-direction: column;
    align-items: flex-start;
  }

  .ms-about-visual-branches {
    width: 100%;
    gap: 18px;
  }

  .ms-about-visual-branches div {
    flex: 1 1 0;
    min-width: 0;
  }

  .ms-value-grid,
  .ms-space-index,
  .ms-equipment-principle,
  .ms-post-grid,
  .ms-transport-grid {
    grid-template-columns: 1fr;
  }

  .ms-step-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .ms-branch-grid {
    grid-template-columns: 1fr;
  }

  .ms-branch-card {
    min-height: 460px;
  }

  .ms-doctor-feature {
    min-height: 0;
  }

  .ms-doctor-feature-photo {
    min-height: 460px;
  }

  .ms-doctor-feature-copy,
  .ms-space-copy,
  .ms-location-branch-copy {
    padding: 54px 24px;
  }

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

  .ms-doctor-hero {
    min-height: 0;
  }

  .ms-profile-career li {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .ms-doctor-direction-media,
  .ms-space-photo,
  .ms-location-branch-media {
    min-height: 380px;
  }

  .ms-facility-panorama {
    min-height: 580px;
  }

  .ms-facility-panorama-caption {
    left: 24px;
    right: 24px;
    bottom: 28px;
    flex-direction: column;
    align-items: flex-start;
  }

  .ms-facility-panorama-caption span {
    text-align: left;
  }

  .ms-equipment-row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
  }

  .ms-equipment-row p {
    grid-column: 2;
  }

  .ms-magazine-hero-copy,
  .ms-location-detail-copy {
    left: 24px;
    right: 24px;
    bottom: 42px;
  }

  .ms-magazine-nav {
    gap: 18px;
  }

  .ms-magazine-nav a.is-active:after {
    bottom: -25px;
  }

  .ms-featured-post-media {
    min-height: 300px;
  }

  .ms-column-author {
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 220px;
  }

  .ms-column-author div {
    padding: 24px;
  }

  .ms-location-meta {
    grid-template-columns: 1fr;
  }

  .ms-map-placeholder {
    min-height: 420px;
  }

  .ms-visit-panel {
    padding: 48px 24px;
  }

  .ms-caution-box {
    grid-template-columns: 1fr;
  }

  .ms-faq-q {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    gap: 12px;
  }

  .ms-faq-a {
    padding-left: 50px;
  }

  .ms-cta-box {
    padding: 46px 28px;
  }
}

/* DOCTOR DETAIL — FULL BACKGROUND RESPONSIVE */
@media (max-width:1180px) {
  .ms-doctor-hero {
    min-height: clamp(650px, 78vw, 860px);
    background-position: 68% top;
  }

  .ms-doctor-hero:before {
    background:
      linear-gradient(90deg, rgba(4, 17, 31, .90) 0%, rgba(4, 17, 31, .68) 56%, rgba(4, 17, 31, .20) 100%),
      linear-gradient(180deg, rgba(4, 17, 31, .06) 24%, rgba(4, 17, 31, .78) 100%);
  }

  .ms-doctor-hero-copy {
    max-width: 860px;
    padding: clamp(180px, 28vw, 330px) 6vw clamp(62px, 8vw, 96px);
  }
}

@media (max-width:760px) {
  .ms-doctor-hero {
    min-height: 720px;
    background-position: 64% top;
  }

  .ms-doctor-hero:before {
    background:
      linear-gradient(90deg, rgba(4, 17, 31, .42), rgba(4, 17, 31, .12)),
      linear-gradient(180deg, rgba(4, 17, 31, .02) 16%, rgba(4, 17, 31, .42) 48%, rgba(4, 17, 31, .94) 100%);
  }

  .ms-doctor-hero-copy {
    max-width: none;
    padding: 300px 24px 52px;
  }

  .ms-doctor-hero-copy h1 {
    margin: 16px 0 20px;
    font-size: clamp(34px, 10vw, 48px);
  }

  .ms-doctor-hero-copy p {
    font-size: 16px;
    line-height: 1.75;
  }

  .ms-doctor-hero .ms-btn-row {
    margin-top: 28px;
  }
}
/* =========================================================
   EQUIPMENT PAGE — PPT BASED CARD ARCHIVE
   - 장비소개 페이지 전용
   - 검사·진단 / 치료·시술 / 수술·회복 관리 카드형 목록
========================================================= */
.ms-equipment-page .ms-equipment-hero{
  min-height:clamp(560px,48vw,820px);
  background-position:center;
}
.ms-equipment-page .ms-equipment-hero:before{
  background:linear-gradient(90deg,rgba(3,18,34,.96) 0%,rgba(6,30,54,.84) 43%,rgba(5,25,46,.46) 68%,rgba(5,25,46,.16) 100%);
}
.ms-equipment-page .ms-equipment-hero .ms-container{
  max-width:980px;
  padding-bottom:clamp(34px,4vw,72px);
}
.ms-equipment-page .ms-equipment-archive{
  background:#fff;
}
.ms-equipment-page .ms-equipment-filter{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(44px,5vw,72px);
  border-top:1px solid var(--ms-line);
  border-left:1px solid var(--ms-line);
}
.ms-equipment-page .ms-equipment-filter button{
  position:relative;
  min-height:112px;
  padding:24px 26px;
  border:0;
  border-right:1px solid var(--ms-line);
  border-bottom:1px solid var(--ms-line);
  color:#617080;
  background:#fff;
  text-align:left;
  cursor:pointer;
  transition:background .24s ease,color .24s ease;
}
.ms-equipment-page .ms-equipment-filter button:after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-1px;
  height:3px;
  background:transparent;
}
.ms-equipment-page .ms-equipment-filter button:hover{
  color:var(--ms-navy);
  background:#f6f9fb;
}
.ms-equipment-page .ms-equipment-filter button.is-active{
  color:#fff;
  background:var(--ms-navy);
}
.ms-equipment-page .ms-equipment-filter button.is-active:after{
  background:var(--ms-cyan);
}
.ms-equipment-page .ms-equipment-filter button span,
.ms-equipment-page .ms-equipment-filter button strong,
.ms-equipment-page .ms-equipment-filter button b{
  display:block;
}
.ms-equipment-page .ms-equipment-filter button span{
  color:var(--ms-blue);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
}
.ms-equipment-page .ms-equipment-filter button.is-active span{
  color:var(--ms-cyan);
}
.ms-equipment-page .ms-equipment-filter button strong{
  margin-top:13px;
  font-size:18px;
  line-height:1.35;
  letter-spacing:-.04em;
}
.ms-equipment-page .ms-equipment-filter button b{
  position:absolute;
  top:24px;
  right:24px;
  color:#a6b0ba;
  font-size:12px;
  font-weight:800;
}
.ms-equipment-page .ms-equipment-filter button.is-active b{
  color:rgba(255,255,255,.52);
}
.ms-equipment-page .ms-equipment-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,1.8vw,30px);
  margin-top:clamp(34px,4vw,58px);
}
.ms-equipment-page .ms-equipment-card{
  min-width:0;
  border:1px solid var(--ms-line);
  background:#fff;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.ms-equipment-page .ms-equipment-card:hover{
  transform:translateY(-6px);
  border-color:rgba(8,120,190,.24);
  box-shadow:0 22px 48px rgba(6,24,46,.09);
}
.ms-equipment-page .ms-equipment-card.is-hidden{
  display:none;
}
.ms-equipment-page .ms-equipment-card-media{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:linear-gradient(145deg,#f7fbfe,#eaf3f9);
}
.ms-equipment-page .ms-equipment-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .42s ease;
}
.ms-equipment-page .ms-equipment-card:hover .ms-equipment-card-media img{
  transform:scale(1.035);
}
.ms-equipment-page .ms-equipment-card-no{
  position:absolute;
  left:20px;
  top:20px;
  display:grid;
  place-items:center;
  min-width:42px;
  height:28px;
  padding:0 9px;
  color:#fff;
  background:rgba(6,24,46,.86);
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
}
.ms-equipment-page .ms-equipment-card-body{
  min-height:250px;
  padding:28px 26px 30px;
  border-top:1px solid var(--ms-line);
}
.ms-equipment-page .ms-equipment-card-category{
  display:block;
  color:var(--ms-blue);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
}
.ms-equipment-page .ms-equipment-card h3{
  margin:15px 0 14px;
  color:var(--ms-navy);
  font-size:clamp(21px,1.45vw,27px);
  line-height:1.3;
  letter-spacing:-.055em;
  word-break:keep-all;
}
.ms-equipment-page .ms-equipment-card p{
  margin:0;
  color:#607080;
  font-size:16px;
  line-height:1.75;
  word-break:keep-all;
}
.ms-equipment-page .ms-equipment-detail-guide{
  border-top:1px solid var(--ms-line);
}
.ms-equipment-page .ms-equipment-detail-head{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(360px,.58fr);
  gap:clamp(44px,8vw,140px);
  align-items:end;
}
.ms-equipment-page .ms-equipment-detail-head .ms-desc{
  margin-top:0;
}
.ms-equipment-page .ms-equipment-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(44px,5vw,70px);
  border-top:1px solid var(--ms-line);
  border-left:1px solid var(--ms-line);
}
.ms-equipment-page .ms-equipment-info-grid article{
  min-height:210px;
  padding:28px 28px 30px;
  border-right:1px solid var(--ms-line);
  border-bottom:1px solid var(--ms-line);
  background:#fff;
}
.ms-equipment-page .ms-equipment-info-grid b{
  display:block;
  color:var(--ms-blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
}
.ms-equipment-page .ms-equipment-info-grid strong{
  display:block;
  margin-top:28px;
  color:var(--ms-navy);
  font-size:21px;
  line-height:1.35;
  letter-spacing:-.045em;
}
.ms-equipment-page .ms-equipment-info-grid span{
  display:block;
  margin-top:10px;
  color:#647383;
  font-size:15px;
  line-height:1.7;
}
.ms-equipment-page .ms-equipment-principle-section .ms-desc{
  max-width:860px;
}

@media(max-width:1440px){
  .ms-equipment-page .ms-equipment-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:1180px){
  .ms-equipment-page .ms-equipment-filter{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ms-equipment-page .ms-equipment-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ms-equipment-page .ms-equipment-detail-head{
    grid-template-columns:1fr;
  }
  .ms-equipment-page .ms-equipment-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .ms-equipment-page .ms-equipment-hero{
    min-height:620px;
    background-position:62% center;
  }
  .ms-equipment-page .ms-equipment-hero:before{
    background:linear-gradient(180deg,rgba(3,18,34,.36) 0%,rgba(3,18,34,.78) 58%,rgba(3,18,34,.96) 100%);
  }
  .ms-equipment-page .ms-equipment-filter{
    display:flex;
    width:calc(100% + 48px);
    margin-left:-24px;
    overflow-x:auto;
    border-left:0;
    scrollbar-width:none;
  }
  .ms-equipment-page .ms-equipment-filter::-webkit-scrollbar{
    display:none;
  }
  .ms-equipment-page .ms-equipment-filter button{
    flex:0 0 170px;
    min-height:96px;
    padding:19px 18px;
  }
  .ms-equipment-page .ms-equipment-filter button:first-child{
    margin-left:24px;
    border-left:1px solid var(--ms-line);
  }
  .ms-equipment-page .ms-equipment-filter button:last-child{
    margin-right:24px;
  }
  .ms-equipment-page .ms-equipment-filter button b{
    top:18px;
    right:17px;
  }
  .ms-equipment-page .ms-equipment-card-grid,
  .ms-equipment-page .ms-equipment-info-grid{
    grid-template-columns:1fr;
  }
  .ms-equipment-page .ms-equipment-card-body{
    min-height:0;
    padding:24px 22px 26px;
  }
  .ms-equipment-page .ms-equipment-card h3{
    font-size:24px;
  }
  .ms-equipment-page .ms-equipment-info-grid article{
    min-height:0;
  }
}


/* =========================================================
   MENSUP STORY — GALLERY BOARD CARDS
   - gallery 게시판 최신글을 기존 .ms-post-grid 카드 디자인으로 출력
========================================================= */
.ms-story-page .ms-story-gallery-grid .ms-post-card{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.ms-story-page .ms-story-gallery-grid .ms-post-card:focus-visible{
  outline:2px solid var(--ms-blue);
  outline-offset:6px;
}
.ms-story-page .ms-story-gallery-grid .ms-post-card h3{
  transition:color .25s ease;
}
.ms-story-page .ms-story-gallery-grid .ms-post-card:hover h3{
  color:var(--ms-blue);
}
.ms-story-page .ms-story-empty{
  grid-column:1 / -1;
  padding:54px 0;
  border-top:1px solid var(--ms-line);
  border-bottom:1px solid var(--ms-line);
  color:var(--ms-muted);
  text-align:center;
}


/* =========================================================
   MANSUP SUB — MOBILE COMPACT UI
   2026-08-21
   - 모바일 긴 페이지 스크롤 최적화
   - PC / tablet 디자인 유지
   - 반복 카드·목록·FAQ·정보그리드의 불필요한 여백과 min-height 축소
   - 주요 사진/비주얼 영역은 과도하게 줄이지 않음
========================================================= */
@media(max-width:760px){

  /* -------------------------------------------------------
     01. 공통 세로 리듬
     ------------------------------------------------------- */
  :root{
    --ms-section-y:58px;
  }

  .ms-kicker{
    margin-bottom:14px;
  }

  .ms-desc{
    margin-top:18px;
    line-height:1.75;
  }

  .ms-btn-row{
    margin-top:24px;
  }

  /* -------------------------------------------------------
     02. ABOUT / VALUE / STEP
     ------------------------------------------------------- */
  .ms-about-opening{
    padding-top:58px;
    padding-bottom:58px;
  }

  .ms-about-opening-grid{
    gap:28px;
  }

  .ms-about-opening-standard{
    margin-top:26px;
    padding-top:20px;
  }

  .ms-value-grid{
    margin-top:36px;
  }

  .ms-value-card{
    min-height:0;
    padding:22px 20px;
  }

  .ms-value-card .num{
    margin-bottom:18px;
  }

  .ms-value-card h3{
    margin-bottom:10px;
    font-size:22px;
  }

  .ms-process-list{
    margin-top:32px;
  }

  .ms-step-card{
    padding:18px 0;
    gap:14px;
  }

  .ms-step-card h3{
    font-size:22px;
  }

  /* -------------------------------------------------------
     03. BRANCH / SPACE INDEX
     이미지 카드는 유지하고 텍스트·인덱스형 카드만 압축
     ------------------------------------------------------- */
  .ms-branch-grid{
    margin-top:36px;
    gap:18px;
  }

  .ms-branch-body{
    left:22px;
    right:22px;
    bottom:22px;
  }

  .ms-space-copy{
    padding-top:42px;
    padding-bottom:42px;
  }

  .ms-space-copy h2{
    margin:14px 0;
  }

  .ms-space-index{
    margin-top:36px;
  }

  .ms-space-index article{
    min-height:0;
    padding:22px 20px;
  }

  .ms-space-index h3{
    margin:18px 0 9px;
    font-size:22px;
  }

  /* -------------------------------------------------------
     04. DOCTOR / PROFILE
     ------------------------------------------------------- */
  .ms-doctor-feature-copy{
    padding-top:42px;
    padding-bottom:42px;
  }

  .ms-doctor-feature-copy h2{
    margin:14px 0 18px;
  }

  .ms-doctor-summary{
    gap:8px;
    margin-top:24px;
    padding-top:20px;
  }

  .ms-profile-quote{
    margin-top:22px;
    padding-top:20px;
  }

  .ms-profile-career li{
    padding:16px 0;
    gap:14px;
  }

  .ms-direction-points{
    margin-top:26px;
  }

  .ms-direction-points div{
    padding:16px 0;
  }

  /* -------------------------------------------------------
     05. EQUIPMENT — 장비소개 핵심 압축
     ------------------------------------------------------- */
  .ms-equipment-list{
    margin-top:36px;
  }

  .ms-equipment-row{
    padding:20px 0;
  }

  .ms-equipment-principle{
    margin-top:32px;
  }

  .ms-equipment-principle article{
    min-height:0;
    padding:22px 20px;
  }

  .ms-equipment-principle h3{
    margin:18px 0 9px;
    font-size:21px;
  }

  .ms-equipment-principle p{
    line-height:1.65;
  }

  .ms-equipment-page .ms-equipment-filter{
    margin-top:32px;
  }

  .ms-equipment-page .ms-equipment-filter button{
    min-height:82px;
    padding:16px;
  }

  .ms-equipment-page .ms-equipment-filter button strong{
    margin-top:9px;
    font-size:16px;
  }

  .ms-equipment-page .ms-equipment-filter button b{
    top:14px;
    right:14px;
  }

  .ms-equipment-page .ms-equipment-card-grid{
    margin-top:30px;
    gap:16px;
  }

  .ms-equipment-page .ms-equipment-card-body{
    min-height:0;
    padding:20px 18px 22px;
  }

  .ms-equipment-page .ms-equipment-card h3{
    margin:12px 0 9px;
    font-size:21px;
  }

  .ms-equipment-page .ms-equipment-card p{
    line-height:1.65;
  }

  .ms-equipment-page .ms-equipment-info-grid{
    margin-top:32px;
  }

  .ms-equipment-page .ms-equipment-info-grid article{
    min-height:0;
    padding:20px 18px;
  }

  .ms-equipment-page .ms-equipment-info-grid strong{
    margin-top:16px;
    font-size:19px;
  }

  .ms-equipment-page .ms-equipment-info-grid span{
    margin-top:7px;
    line-height:1.65;
  }

  /* -------------------------------------------------------
     06. STORY / MAGAZINE
     ------------------------------------------------------- */
  .ms-magazine-nav{
    margin-top:30px;
    padding-top:18px;
  }

  .ms-featured-post{
    margin-top:36px;
  }

  .ms-featured-post-copy{
    padding:34px 24px;
  }

  .ms-featured-post-copy h2{
    margin:14px 0;
  }

  .ms-post-grid{
    margin-top:20px;
    gap:26px 18px;
  }

  .ms-post-card{
    padding-top:18px;
  }

  .ms-post-card .thumb{
    margin-bottom:16px;
  }

  .ms-post-card h3{
    margin:9px 0 7px;
    font-size:21px;
  }

  .ms-column-author-strip{
    margin-top:36px;
  }

  .ms-column-author{
    min-height:0;
  }

  .ms-column-author div{
    padding:20px;
  }

  .ms-column-author h3{
    margin:9px 0 7px;
    font-size:22px;
  }

  /* -------------------------------------------------------
     07. LOCATION / VISIT / TRANSPORT
     ------------------------------------------------------- */
  .ms-location-branch-copy{
    padding-top:42px;
    padding-bottom:42px;
  }

  .ms-location-branch-copy h2{
    margin:14px 0 16px;
  }

  .ms-location-meta{
    gap:12px;
    margin-top:24px;
    padding-top:18px;
  }

  .ms-visit-panel{
    padding-top:38px;
    padding-bottom:38px;
  }

  .ms-visit-panel h2{
    margin:14px 0 20px;
  }

  .ms-visit-info li{
    padding:15px 0;
  }

  .ms-transport-grid{
    margin-top:36px;
  }

  .ms-transport-grid article{
    min-height:0;
    padding:22px 20px;
  }

  .ms-transport-grid h3{
    margin:18px 0 9px;
    font-size:21px;
  }

  /* -------------------------------------------------------
     08. FAQ / CAUTION / CTA
     ------------------------------------------------------- */
  .ms-caution-box{
    gap:18px;
    padding:30px 0;
  }

  .ms-caution-box p{
    font-size:17px;
  }

  .ms-faq-list{
    margin-top:32px;
  }

  .ms-faq-q{
    padding:20px 0;
  }

  .ms-faq-q strong{
    font-size:20px;
  }

  .ms-faq-a{
    padding-bottom:20px;
  }

  .ms-cta-box{
    padding:34px 22px;
    border-radius:20px;
  }

  .ms-cta-box p{
    margin-top:16px;
  }
}


/* =========================================================
   EQUIPMENT FILTER — MOBILE 2x2 NAV FIX
   2026-08-21
   - 모바일 가로 스크롤형 네비 제거
   - 4개 메뉴를 2열 × 2행으로 한 화면에 모두 노출
========================================================= */
@media(max-width:760px){

  .ms-equipment-page .ms-equipment-filter{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    margin:32px 0 0;
    overflow:visible;
    border-top:1px solid var(--ms-line);
    border-left:1px solid var(--ms-line);
  }

  .ms-equipment-page .ms-equipment-filter button{
    flex:none;
    width:100%;
    min-width:0;
    min-height:78px;
    padding:15px 16px;
    border-right:1px solid var(--ms-line);
    border-bottom:1px solid var(--ms-line);
  }

  .ms-equipment-page .ms-equipment-filter button:first-child,
  .ms-equipment-page .ms-equipment-filter button:last-child{
    margin-left:0;
    margin-right:0;
  }

  .ms-equipment-page .ms-equipment-filter button strong{
    margin-top:8px;
    padding-right:24px;
    font-size:15px;
    line-height:1.3;
  }

  .ms-equipment-page .ms-equipment-filter button span{
    font-size:9px;
  }

  .ms-equipment-page .ms-equipment-filter button b{
    top:14px;
    right:14px;
    font-size:11px;
  }
}


/* =========================================================
   MENSUP STORY — FEATURED YOUTUBE
   - 기존 .ms-featured-post-media 이미지 영역을 YouTube 영상으로 사용
========================================================= */
.ms-story-page .ms-featured-post-video{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#06182e;
}

.ms-story-page .ms-featured-post-video iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:590px;
  border:0;
  background:#06182e;
}

@media(max-width:1180px){
  .ms-story-page .ms-featured-post-video iframe{
    min-height:460px;
  }
}

@media(max-width:760px){
  .ms-story-page .ms-featured-post-video{
    min-height:0;
    aspect-ratio:16 / 9;
  }

  .ms-story-page .ms-featured-post-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
  }
}