/* ==========================================================================
메디셀플러스 모바일 레퍼런스 시안 (2026-10-29, 신규사업부(디자인) — 운영 미반영·승인 대기)
기준: v15(homepage-mobile-quickmenu-test15-20261027). 모바일(max-width: 47.99rem) 링크로만 불러오며
마지막에 로드된다. PC(.d15)·문구·링크 주소는 바꾸지 않는다.
R1 빠른 메뉴 — 한 줄 축소 글씨(약 10~12px) → 2줄·큰 글씨(15~17px), 높이 64px
R2 히어로 — 제목 → 실제 건물 사진(16:10 모바일 전용 크롭) → 설명 3문구. 첫 화면에 문구와 건물·간판이 함께 보이게
R3 햄버거 — 왼쪽 대분류 / 오른쪽 세부 메뉴, 선택 대분류 파란 배경, 로그인은 메뉴 맨 위
========================================================================== */
/* R1. 빠른 메뉴 ---------------------------------------------------------- */
html body.medicell .m15 .mobile-quick-grid {
padding: .75rem 1.5rem .25rem;
}
html body.medicell .m15 .mobile-quick-grid__list {
gap: .5rem;
}
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item {
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 4rem; /* 64px: 2줄 문구 + 위아래 여백 */
padding: .5rem .25rem;
border-radius: 8px;
font-size: clamp(15px, 4vw, 17px); /* 360px 15 · 390px 15.6 · 430px 17 */
font-weight: 700;
line-height: 1.3;
letter-spacing: -.03em;
word-spacing: normal;
white-space: normal;
}
html body.medicell .m15 .mobile-quick-grid__item .qg-l {
display: block;
white-space: nowrap;
}
/* 전화: [아이콘] 010- / 4815-3710 */
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel {
flex-direction: column;
gap: 0;
}
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel .qg-tel-1 {
display: inline-flex;
align-items: center;
gap: 4px;
}
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel svg {
width: 1em;
height: 1em;
}
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel span {
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
@media (max-width: 24.374rem) { /* 360~389px: 칸 폭 확보 — 좌우 여백 24px → 12px */
html body.medicell .m15 .mobile-quick-grid {
padding-inline: .75rem;
}
}
/* R2. 히어로 — 건물 사진 전체 배경 + 제목·설명 (2026-10-29 4차 A: 건물 하단 +100px@390) ----------
3차와 같은 구도: 사진 오른쪽·아래 정렬, 폭 124.4%, 간판 윗선 = 설명 끝 바로 아래. 사진 원본 x0~1470·y0~1423.
히어로 아래 여백 = 3차(35.5vw + 10px) + 25.64vw. 그라데이션 위치도 같은 만큼 아래 기준으로 옮겼다.
아래쪽 간판(마취통증의학과·피부과)은 가림 처리 없이 원본 그대로 노출 — 사용자 판단용. 맨 아래는 흰색으로 밝게. */
html body.medicell .m15 .hero.hero {
--hx: 25.64vw;
/* 2026-10-30 그라데이션 연동: 사진 크기를 한 곳(--ph-scale)에서 정하고, 그라데이션 위치는 사진 높이(--ph-h) 비율로 계산한다.
사진 크기를 바꿔도 흰색 이음 구간이 사진 윗선·나뭇잎 끝·간판 윗선을 따라 움직여 경계가 다시 생기지 않는다. */
--ph-scale: 1.169; /* 사진 폭 = 히어로 폭 × 1.169 (116.9%, 10-29 실시간 조정값) */
--ph-h: calc(var(--ph-scale) * 100vw * 1423 / 1470); /* 기준 구간(원본 y0~1423) 높이 — 그라데이션 비율의 기준 */
--ph-up: calc(var(--ph-scale) * 100vw * 129 / 1470); /* 2026-10-30 사진 위로 이동: 원본 아래 129px(390 기준 40px)를 더 잘라 붙여 건물 전체가 위로 올라감. 그라데이션도 같은 양만큼 위로 */
position: relative;
padding-bottom: calc(35.5vw + 10px + var(--hx) - var(--ph-up) + var(--mc-fs-title) * 1.25); /* 2026-10-30: 사진 잘린 선에서 히어로가 끝나도록 --ph-up 만큼 줄임
+ 제목 4줄→3줄(사용자 승인)로 줄어든 제목 한 줄 높이(--mc-fs-title × 실제 줄간격 1.25 — home-live-m15.css !important)를 아래 여백으로 보정 → 히어로 높이·사진 위치 불변, 설명문만 한 줄만큼 위로 */
overflow: hidden;
isolation: isolate;
background: #fff;
}
html body.medicell .m15 .hero.hero .hero__copy {
position: relative;
z-index: 2;
}
html body.medicell .m15 .hero.hero .hero__media {
position: absolute;
inset: 0;
z-index: 0;
width: auto;
height: auto;
margin: 0;
overflow: hidden;
-webkit-mask-image: none;
mask-image: none;
}
html body.medicell .m15 .hero.hero .hero__media-photo {
position: absolute;
right: 0;
bottom: calc(-1 * var(--ph-up)); /* 2026-10-30: 히어로를 --ph-up 만큼 줄인 만큼 사진을 아래로 내려 화면상 건물 위치 유지. 넘친 아래 부분은 .hero__media overflow:hidden 으로 잘림 */
width: calc(var(--ph-scale) * 100%); /* 116.9% — 실시간 조정 2026-10-29: 124.4% → 6% 축소(오른쪽 아래 기준) */
max-width: none;
height: auto;
aspect-ratio: 1470 / 1552; /* 2026-10-30: 원본 y0~1552(직전 y0~1423 + 아래 129px) — hero-mobile-building-up40.jpg */
object-fit: cover;
/* 2026-10-30 하단 잘림: 사진 파일은 그대로, 히어로 아래로 넘친 --ph-up 부분이 overflow 로 잘려 이동 전과 같은 원본 y1423 선까지만 보인다(직전 clip-path 방식 대체) */
}
/* 아래쪽 간판 가림 처리 없음: 흰 막(사각 패널처럼 보이고 글씨 비침)·흐림(경계 형태 왜곡) 모두 부자연스러워 폐기 — 비교는 비교이미지/참고_* */
html body.medicell .m15 .hero.hero .hero__media::after {
content: "";
position: absolute;
inset: 0 0 calc(-1 * var(--ph-up)) 0; /* 2026-10-30: 사진과 같이 아래로 --ph-up 연장 → 아래 정지점(100% 기준)이 사진 기준 그대로 유지 */
z-index: 2;
pointer-events: none;
/* 위쪽 이음 구간(2026-10-30 2차): 사진 윗선 4px 안쪽(흰색 100%) → 간판 윗선 22px 위(투명)까지를 하나의 부드러운 곡선으로 잇는다.
흰 막 = 1 − S(t^2.1), S = smoothstep(3u²−2u³). 시작·끝 기울기가 0이라 흰색이 '끝나는 선'과 사진이 '다 드러나는 선'이 생기지 않는다.
t 위치 = 100% − ph·(1 − .4923t) + (4 + 18t)px (t=0 사진 윗선 4px 안, t=1 간판 윗선 .5077ph 22px 위). 모두 사진 높이(--ph-h) 기준.
직전(4차 A 계열): .9 → .86 을 길게 유지하다가 둘째·셋째 설명 사이에서 .86 → 0 으로 급히 떨어져 그 자리에 수평 띠가 보였다.
이번: 사진이 비치기 시작하는 지점(.86)이 390 기준 약 65px 위로 올라가 둘째 설명 아래쪽부터 나뭇잎·하늘이 서서히 드러난다.
t^2.1 은 셋째 설명 뒤 가독성용(10-30 사진 40px 이동 후 실측: t^1.5 는 3.6~4.1:1 → t^2.1 은 4.7~5.4:1).
2026-10-30 사진 40px 위로(--ph-up): 시작점(사진 윗선)은 --ph-up 만큼 같이 올라가고, 끝점(투명)은 셋째 설명 가독성 때문에 직전 위치에 둔다.
중간 정지점은 --ph-up × (1 − t) 로 나눠 올려 곡선이 40px 길어질 뿐 꺾이지 않는다. (끝점까지 같이 올리면 셋째 설명 뒤 대비 2.5:1 로 떨어짐) */
background: linear-gradient(180deg,
#fff 0,
#fff calc(100% - var(--ph-up) - var(--ph-h) + 4px),
rgba(255, 255, 255, 1) calc(100% - var(--ph-up) * .9 - var(--ph-h) * .95077 + 5.8px),
rgba(255, 255, 255, .997) calc(100% - var(--ph-up) * .8 - var(--ph-h) * .90154 + 7.6px),
rgba(255, 255, 255, .982) calc(100% - var(--ph-up) * .7 - var(--ph-h) * .85231 + 9.4px),
rgba(255, 255, 255, .942) calc(100% - var(--ph-up) * .6 - var(--ph-h) * .80308 + 11.2px),
rgba(255, 255, 255, .862) calc(100% - var(--ph-up) * .5 - var(--ph-h) * .75385 + 13px),
rgba(255, 255, 255, .729) calc(100% - var(--ph-up) * .4 - var(--ph-h) * .70462 + 14.8px),
rgba(255, 255, 255, .541) calc(100% - var(--ph-up) * .3 - var(--ph-h) * .65539 + 16.6px),
rgba(255, 255, 255, .315) calc(100% - var(--ph-up) * .2 - var(--ph-h) * .60616 + 18.4px),
rgba(255, 255, 255, .103) calc(100% - var(--ph-up) * .1 - var(--ph-h) * .55693 + 20.2px),
rgba(255, 255, 255, 0) calc(100% - var(--ph-h) * .5077 + 22px),
rgba(255, 255, 255, 0) calc(100% - var(--ph-up) - 9vw),
rgba(255, 255, 255, .85) calc(100% - var(--ph-up)), /* 하단 페이드: 히어로 끝(= 사진 잘린 선)에서 .85 — 4차 A 승인 값, 바로 네이비 섹션으로 이어짐 */
rgba(255, 255, 255, .85) 100%);
}
/* R3. 햄버거 메뉴 --------------------------------------------------------- */
/* [최종 통합 2026-10-29] 대분류 18px/700 · 세부 메뉴 17px/500 · 왼쪽 칸 52% · 메뉴 맨 아래 상담 전화 영역(.mnav2__foot) 추가.
메뉴 영역(대분류·세부 메뉴)은 각 칸 안에서 스크롤, 상담 전화 영역은 하단 고정 상담바 바로 위에 고정. */
html body.medicell .m15 .mobile-nav.mnav2 {
display: none;
flex-direction: column;
/* 헤더(81px) 아래부터 하단 고정 상담바(61px) 위까지 */
height: calc(100vh - 5.0625rem - 3.8125rem);
height: calc(100dvh - 5.0625rem - 3.8125rem - env(safe-area-inset-bottom, 0px));
max-height: none;
padding: 0;
overflow: hidden;
border-top: 1px solid var(--m-line);
border-bottom: 0;
background: #fff;
}
html body.medicell .m15 .mobile-nav.mnav2.is-open {
display: flex;
}
/* (2026-10-30 제거) 2단 메뉴(mnav2)용 '메뉴 열린 동안 뒤 페이지 스크롤 잠금' — 운영 원본 아코디언 메뉴로 복구하면서 원본처럼 잠금 없음.
이전 규칙: html:has(body.medicell.nav-open) { overflow: hidden; } */
.mnav2__top {
display: flex;
justify-content: flex-end;
padding: .25rem 1rem;
border-bottom: 1px solid var(--m-line);
}
.mnav2__login {
display: inline-flex;
align-items: center;
gap: .375rem;
min-height: var(--m-tap, 3rem);
padding-inline: .5rem;
color: var(--m-ink-2);
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.mnav2__login svg {
width: 18px;
height: 18px;
}
.mnav2__body {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: 52% 1fr;
}
.mnav2__cats {
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
background: #f2f3f6;
}
.mnav2__cat {
display: flex;
align-items: center;
justify-content: space-between;
gap: .375rem;
width: 100%;
min-height: 4.25rem;
padding: .75rem .5rem .75rem .875rem;
border: 0;
border-bottom: 1px solid var(--m-line);
border-radius: 0;
background: transparent;
color: var(--m-ink);
font: inherit;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -.02em;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* 공통 규칙 .medicell button{font:inherit;font-weight:inherit} 가 우선순위가 더 높아 굵기·크기가 풀리던 문제 → 선택자를 높여 고정 */
html body.medicell .m15 .mnav2 .mnav2__cat {
font-size: 18px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -.02em;
}
.mnav2__l {
display: block;
white-space: nowrap;
}
.mnav2__chev {
flex: 0 0 auto;
opacity: .55;
}
.mnav2__cat[aria-selected="true"] {
background: var(--m-blue);
border-bottom-color: var(--m-blue);
color: #fff;
}
.mnav2__cat[aria-selected="true"] .mnav2__chev {
opacity: 1;
}
.mnav2__cat:focus-visible,
.mnav2__sub a:focus-visible,
.mnav2__login:focus-visible {
outline: 2px solid var(--m-blue);
outline-offset: -2px;
}
.mnav2__cat[aria-selected="true"]:focus-visible {
outline-color: #fff;
outline-offset: -4px;
}
.mnav2__panels {
overflow-y: auto;
padding: 0 1rem .5rem 1rem;
}
.mnav2__sub {
margin: 0;
padding: 0;
list-style: none;
}
.mnav2__sub a {
display: flex;
align-items: center;
min-height: 3.5rem;
padding-block: .5rem;
border-bottom: 1px solid var(--m-line);
color: var(--m-ink);
font-size: 17px;
font-weight: 500;
line-height: 1.4;
letter-spacing: -.02em;
text-decoration: none;
word-break: keep-all;
}
.mnav2__sub a[aria-current="page"] {
color: var(--m-blue);
font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
.mnav2__sub a:hover { color: var(--m-blue); }
.mnav2__cat:not([aria-selected="true"]):hover { background: #e8eaf0; }
}
/* 메뉴 맨 아래 상담 전화 — 전체 폭, 대분류를 바꿔도 위치 고정.
[2차 2026-10-29] '상담 문의' 문구 삭제, 번호만 크게(24px/700). 아이콘은 원형 테두리 없이 작고 옅게(번호보다 약하게).
흰 바탕 + 위 구분선, 아래 여백을 위보다 넓혀 하단 고정 상담바와 붙어 보이지 않게 함. 높이 85 → 약 73px */
.mnav2__foot {
flex: 0 0 auto;
padding: .5rem 1.25rem .75rem;
border-top: 1px solid var(--m-line);
background: #fff;
}
html body.medicell .m15 .mnav2__call {
display: flex;
align-items: center;
gap: .625rem;
min-height: 3.25rem;
color: var(--m-blue);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.mnav2__call-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
color: #7b88dc;
}
.mnav2__call-icon svg {
width: 20px;
height: 20px;
}
.mnav2__call-num {
color: var(--m-blue);
font-size: 24px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
.mnav2__call:focus-visible {
outline: 2px solid var(--m-blue);
outline-offset: 2px;
border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
.mnav2__call:hover .mnav2__call-num { text-decoration: underline; text-underline-offset: 3px; }
}
/* ==========================================================================
R3-2. 햄버거 메뉴 2차 — 큼직하고 여유 있게 (2026-10-29, 레퍼런스 메뉴 390px 환산: 대분류 행 약 83/98px·글씨 약 19px, 세부 행 약 68px·글씨 약 18px)
- 좌우 50:50 · 대분류 19px/700 줄간격 1.45 좌우 18px, 한 줄 76px·두 줄 약 103px, 화살표 오른쪽 끝(글씨와 12px 이상)
- 세부 메뉴 18px/500 줄간격 1.5 좌우 18px, 행 최소 68px, 얇은 회색 구분선, 현재 페이지 파란 굵은 글씨, 긴 이름 자동 줄바꿈
- 하단 전화: 아이콘 + 번호만(23px/700, 메디셀 블루), 가운데 한 줄, 연한 블루 바탕. '상담 문의' 문구·원형 장식 제거
========================================================================== */
html body.medicell .m15 .mnav2 .mnav2__body {
grid-template-columns: 50% 50%;
}
html body.medicell .m15 .mnav2 .mnav2__cat {
gap: 12px;
min-height: 76px;
padding: 24px 16px 24px 18px;
font-size: 19px;
font-weight: 700;
line-height: 1.45;
letter-spacing: -.02em;
}
html body.medicell .m15 .mnav2 .mnav2__label {
flex: 1 1 auto;
min-width: 0;
}
html body.medicell .m15 .mnav2 .mnav2__l {
white-space: normal;
word-break: keep-all;
}
html body.medicell .m15 .mnav2 .mnav2__chev {
width: 18px;
height: 18px;
}
html body.medicell .m15 .mnav2 .mnav2__panels {
padding: 0;
}
html body.medicell .m15 .mnav2 .mnav2__sub a {
min-height: 68px;
padding: 12px 18px;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
letter-spacing: -.02em;
overflow-wrap: anywhere;
word-break: keep-all;
}
html body.medicell .m15 .mnav2 .mnav2__sub a[aria-current="page"] {
color: var(--m-blue);
font-weight: 700;
}
html body.medicell .m15 .mnav2 .mnav2__foot {
padding: 10px 18px 12px;
background: #f4f6ff; /* 위 세부 메뉴(흰 바탕)와 구분되는 독립 영역 */
}
html body.medicell .m15 .mnav2 .mnav2__call {
justify-content: center;
gap: 10px;
min-height: 52px;
}
html body.medicell .m15 .mnav2 .mnav2__call-icon {
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: none;
}
html body.medicell .m15 .mnav2 .mnav2__call-icon svg {
width: 24px;
height: 24px;
stroke-width: 2;
color: var(--m-blue);
}
html body.medicell .m15 .mnav2 .mnav2__call-num {
font-size: 23px;
font-weight: 700;
line-height: 1.2;
}
/* R3-3. 메뉴 패널을 문서 흐름 밖으로 (2026-10-29) — 열릴 때 헤더 높이가 늘어 문서 길이가 바뀌면 iPhone Safari(WebKit)가 닫을 때
스크롤 위치를 128px 밀어 버림(Chrome 은 정상). 패널을 헤더(sticky) 기준 절대 위치로 바꿔 문서 길이를 그대로 둔다. 모양·위치·높이는 동일. */
html body.medicell .m15 .mobile-nav.mnav2 {
position: absolute;
top: 100%;
left: 0;
right: 0;
/* 헤더 바탕이 덮어 주던 마지막 1px 을 메뉴가 채워 상담바와 틈 없이 맞닿게 */
height: calc(100vh - 5.0625rem - 3.8125rem + 1px);
height: calc(100dvh - 5.0625rem - 3.8125rem + 1px - env(safe-area-inset-bottom, 0px));
}
/* 메뉴 칸 안에서 끝까지 스크롤해도 뒤 페이지로 스크롤이 넘어가지 않게(iPhone 터치 스크롤 대비) */
html body.medicell .m15 .mnav2 .mnav2__cats,
html body.medicell .m15 .mnav2 .mnav2__panels {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* R4. 특별함 카드 줄바꿈 (2026-10-30) — 제목·본문을 의미 단위(.nw)로 묶어 단어·조사 중간에서 끊기지 않게. 문구·글씨 크기·굵기·색 불변 */
html body.medicell .m15 .npoint .nw {
white-space: nowrap;
}
/* R5. '같은 줄기세포라도…' 섹션 제목 굵기 (2026-10-30) — 다른 모바일 섹션 제목과 같은 800으로.
근거(실측): .npoint__heading·.mitoc-proof__heading = home-live-m15.css 800, .journey__heading = 인라인 800. 이 제목만 default.css 공통 h2 값 700 이었다. 크기·색·행간·정렬 불변 */
html body.medicell .m15 .therapy__heading {
font-weight: 800;
}
/* R6. 케어 프로세스 제목 줄바꿈 (2026-10-30) — '줄기세포 치료 이후까지 / 설계된 전용 케어 프로세스'. 의미 단위(.nw)로 묶어 좁은 화면에서도 단위 사이에서만 줄바꿈. 글씨 크기·굵기·색 불변 */
html body.medicell .m15 .journey__heading .nw {
white-space: nowrap;
}
/* R7. 미토파지 재활 인용문 글꼴 통일 (2026-10-30) — 대표원장 인용문(.philosophy__quote)의 실제 값과 같게:
글꼴 = 본문 상속(Pretendard Variable), 크기 = --mc-fs-small(18px), 줄간격 1.7, 굵기 500, 자간은 이미 동일(-0.2024px 상속).
직전: Nanum Pen Script 400, 섹션 제목 크기(--mc-fs-title)·줄간격 1.25(home-live-m15.css 의 !important 묶음 → 같은 우선순위로 덮음).
파란색·양쪽 따옴표 이미지·가운데 정렬·문구는 그대로 */
html body.medicell .m15 .mitoc-doctor .mitoc-doctor__quote {
font-family: inherit;
font-size: var(--mc-fs-small) !important;
line-height: 1.7 !important;
font-weight: 500;
}
/* 모바일에서 숨겨지던 인용문
(home-live-m15.css @640px: 큰 손글씨 폭 때문에 숨김)을 다시 표시 — 18px 에서는 숨기면 '변화,미토파지' 가 붙어 줄 중간에 걸린다 */
html body.medicell .m15 .mitoc-doctor .mitoc-doctor__quote br {
display: inline;
}
/* R8. 섹션 제목·부제 타이포 통일 (2026-10-30) — 기준 = 미토콘드리아 지원 섹션(.mitoc-support) 실측값
메인 타이틀: var(--mc-fs-title)(390 기준 28.86px) / 800 / 줄간격 1.25 / 자간 -0.04em
세부 타이틀: var(--mc-fs-sub)(21px) / 400 / 줄간격 1.4 / 자간 -0.02em — 색은 섹션별 기존 색 유지
여백: 메인 → 세부 18px, 세부 → 카드·목록 28px (실측 간격 기준으로 margin 보정)
예외(유지): 히어로, 인증 배너(.ncert 18px 배지형), 대표원장 3단 제목(.philosophy 꼬리 줄)·인용문, 정맥/동맥 설명(.therapy__lede 2단 구성),
본문형 설명(.mitoc-proof__lede · .mitoc-doctor__desc · .why__sub2), 카드 내부 제목·버튼·이름. 좌측 정렬 의도(.mitoc-doctor · .location) 유지 */
html body.medicell .m15 .therapy__heading,
html body.medicell .m15 .journey__heading,
html body.medicell .m15 .mitoc-proof__heading,
html body.medicell .m15 .mitoc-proof__heading-line,
html body.medicell .m15 .mitoc-proof__heading-highlight,
html body.medicell .m15 .home-final-cta__heading,
html body.medicell .m15 .location__heading,
html body.medicell .m15 .philosophy__heading-lead {
font-weight: 800;
letter-spacing: -.04em;
}
html body.medicell .m15 .ncare__lede,
html body.medicell .m15 .why__sub,
html body.medicell .m15 .npoint__lede,
html body.medicell .m15 .journey__lede,
html body.medicell .m15 .home-final-cta__lede {
font-size: var(--mc-fs-sub) !important;
line-height: 1.4 !important;
font-weight: 400;
letter-spacing: -.02em;
}
html body.medicell .m15 .npoint__lede .nw,
html body.medicell .m15 .journey__lede .nw,
html body.medicell .m15 .mitoc-proof__heading .nw {
white-space: nowrap;
}
/* 메인 → 세부 18px (실측 16·20·24·28px 이던 곳) */
html body.medicell .m15 .why__sub { margin-top: 18px; } /* 2026-10-30 정정: 32px 는 등장 애니메이션 중 측정값으로 잡은 오류 — 실제 제목→부제 18px */
html body.medicell .m15 .npoint__lede { margin-top: 18px; }
html body.medicell .m15 .journey__lede { margin-top: 18px; }
html body.medicell .m15 .mitoc-proof__lede { margin-top: 18px; }
html body.medicell .m15 .therapy__lede { margin-top: 18px; }
html body.medicell .m15 .home-final-cta__lede { margin-top: 18px; }
/* 세부 → 카드·목록 28px (실측 18·26px 이던 곳). therapy·journey 는 내용 블록이 따로 떨어진 구조(안쪽 여백 48px)라 유지 */
html body.medicell .m15 .ncare__grid { margin-top: 42px; }
html body.medicell .m15 .npoint__list { margin-top: 42px; }
html body.medicell .m15 .mitoc-proof__awards { margin-top: 42px; }
/* 어색한 줄바꿈 정돈용 의미 단위(문구 불변) — 인증 배너 설명·미토콘드리아 설명·백동기 박사 설명·지원 섹션 부제·마지막 상담 부제 */
html body.medicell .m15 .ncert__desc .nw,
html body.medicell .m15 .therapy__lede .nw,
html body.medicell .m15 .mitoc-proof__lede .nw,
html body.medicell .m15 .mitoc-doctor__desc .nw,
html body.medicell .m15 .mitoc-support__lede .nw,
html body.medicell .m15 .home-final-cta__lede .nw {
white-space: nowrap;
}
/* R9. QA 반영 (2026-10-30) ① 섹션 상하 여백 → 공통 56px
- 정맥·동맥(.therapy): 80/80 → 56/56. 앞뒤 섹션과 같은 흰 배경이라 여백 합이 그대로 빈 공간(내용 간 137·144px) → 113·120px 로 다른 섹션 사이와 맞춤
- 미토콘드리아 핵심(.mitoc-proof, #FBFBFB 띠): 72/72 → 56/56. 내부 카드·제목·부제 간격은 그대로 */
html body.medicell .m15 .therapy {
padding-top: 56px;
padding-bottom: 56px;
}
html body.medicell .m15 .mitoc-proof {
padding-top: 56px;
padding-bottom: 56px;
}
/* ④ 미토콘드리아 지원 섹션 회색 부제 #777777 → #6E6E6E — 실제 배경 사진(mitoc_con5_bg.jpg) 위 대비 4.25:1 → 4.84:1 */
html body.medicell .m15 .mitoc-support .mitoc-support__lede {
color: #6E6E6E;
}
/* R10. 섹션 여백 정돈 A·C·D (2026-10-30, 사용자 승인) — 등장 애니메이션 완료 후 실측 기준
A. WHY: 시작→제목 121→72, 부제→첫 문장 36→28, 문장 사이 36→24, 마지막→끝 120→56 (제목→부제 18 은 R8 줄에서 정정)
C. 정맥·동맥: 부제→구분선 64→42 (구분선→버튼 48 = .therapy__grid padding-top 유지)
D. 오시는 길: 마지막 콘텐츠→끝 32→56 */
html body.medicell .m15 .why__top {
padding-top: 72px;
padding-bottom: 56px;
}
html body.medicell .m15 .why__sub {
margin-bottom: 28px;
}
html body.medicell .m15 .why__sub2 {
margin-top: 24px;
}
html body.medicell .m15 .therapy__grid {
margin-top: 42px;
}
html body.medicell .m15 .location {
padding-bottom: 56px;
}
/* R11. 특별함 03·04 카드 줄바꿈 (2026-10-30) — 문구·글꼴·색 불변, 줄바꿈 위치만
03 본문: '환자의 척추 상태와 중증도에 맞춰 / 치료 방향을 세심하게 결정합니다.' (두 줄 모두 230px, 360px 에서도 들어감 → 고정
)
04 제목: '마취통증의학과 + 가정의학과, / 두 분야 전문의' (첫 줄 238px, 360px 본문 폭 261px 에서도 들어감 → 고정
)
04 본문: 본문 폭 280px 이상 '통증에 대한 전문성과 환자의 전신 상태를 / 함께 살피는 의료 경험을 / 진료에 연결합니다.'
그보다 좁으면 '통증에 대한 전문성과 / 환자의 전신 상태를 함께 살피는 / 의료 경험을 진료에 연결합니다.'
화면 폭이 아니라 실제 본문 폭(컨테이너 쿼리)으로 판단 — PC 브라우저 미리보기의 스크롤바 폭 차이에도 같은 결과 */
html body.medicell .m15 .npoint .npoint__body {
container-type: inline-size;
}
html body.medicell .m15 .npoint .np-br-w {
display: none;
}
@container (min-width: 280px) {
html body.medicell .m15 .npoint .np-br-w {
display: inline;
}
html body.medicell .m15 .npoint .np-br-n {
display: none;
}
}
/* R12. WHY 부제 '의료진의 경험' 노란 형광펜 제거 (2026-10-30) — default.css .mk-highlight 의 노란 배경(linear-gradient)만 끈다.
파란 글자(.why__sub-accent color)·좌우 padding/음수 margin(글자 위치·줄바꿈 불변)은 그대로. 이 문구에만 적용 */
html body.medicell .m15 .why__sub .why__sub-accent {
background-image: none;
}
/* R14. 히어로 제목 첫 줄 '28년간 12,600여 명'만 약 8% 축소 (2026-10-30, 사용자 지시) — 파란색·굵기 800·3줄 구성 유지.
줄 높이는 제목(h1) 기준이라 히어로 높이·사진 위치 불변. '척추 통증 / 환자와의 스토리' 크기 그대로 */
html body.medicell .m15 .hero.hero .hero__heading-accent {
font-size: .92em;
}
/* R15. 퀵메뉴 ↔ 히어로 제목 간격 +12px (2026-10-30, 사용자 지시) — 32px → 44px
히어로 위 안쪽 여백 28→40px 로 늘리고 같은 12px 를 아래 안쪽 여백에서 빼서 히어로 높이·사진 위치(아래 기준) 불변.
아래 여백 식은 R2(사진 잘림 −ph-up, 제목 3줄 보정 +fs×1.25)와 같고 −12px 만 추가 */
html body.medicell .m15 .hero.hero {
padding-top: calc(1.75rem + 12px);
padding-bottom: calc(35.5vw + 10px + var(--hx) - var(--ph-up) + var(--mc-fs-title) * 1.25 - 12px);
}
/* R16. 퀵메뉴 전화 버튼 — 아이콘 삭제·번호 한 줄 가운데 (2026-10-30, 사용자 지시)
마크업: [아이콘]010- / 4815-3710 → 010-4815-3710 (tel:01048153710·aria-label 그대로)
글자 크기: 번호 폭 = 글자 크기 × 7.84 (tabular-nums·자간 −0.02em 실측). 버튼 가용 폭 = 버튼 폭 − 약 8px,
버튼 폭 = (화면 − 39px)/3 (390 미만) · (화면 − 63px)/3 (390 이상, 좌우 여백 24px). 여유 2px 를 두고 ÷7.9 로 잡아
한 줄에 들어가는 최대 크기만 쓰고 기존 크기(1em)보다 커지지 않게 min(). 다른 5개 버튼은 그대로 */
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel .qg-tel-num {
font-size: min(1em, calc(((100vw - 39px) / 3 - 10.3px) / 7.9));
white-space: nowrap;
}
@media (min-width: 24.375rem) {
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel .qg-tel-num {
font-size: min(1em, calc(((100vw - 63px) / 3 - 10.3px) / 7.9));
}
}
/* R17. 퀵메뉴 6개 버튼 모두 한 줄 · 글자 크기 통일 (2026-10-30, 사용자 지시) — 문구는 사용자 지정 표기('척추관협착증+줄기세포' 등 + 앞뒤 띄어쓰기 없음)
가장 긴 '척추관협착증+줄기세포'(자간 −0.05em 에서 글자 1px 당 폭 8.75)가 버튼 가용 폭(버튼 폭 − 약 8px)에 2px 여유로 들어가는 크기를 6개 공통으로 쓴다.
버튼 폭 = (화면 − 39px)/3 (390 미만) · (화면 − 63px)/3 (390 이상). 3열×2행·64px·색·테두리·링크·활성 상태 그대로. 전화 아이콘 없음 유지(R16 크기 규칙은 여기서 통일값으로 덮음) */
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item {
font-size: calc(((100vw - 39px) / 3 - 10.3px) / 8.8);
letter-spacing: -.05em;
white-space: nowrap;
justify-content: center;
align-items: center;
text-align: center;
}
@media (min-width: 24.375rem) {
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item {
font-size: calc(((100vw - 63px) / 3 - 10.3px) / 8.8);
}
}
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel .qg-tel-num {
font-size: 1em;
letter-spacing: inherit;
}
/* R18. 퀵메뉴 버튼 높이 64 → 48px (2026-10-30, 사용자 지시) — 6개 동일, 3열×2행·버튼 간격 8px·글자(R17)·색·링크 그대로.
위아래 안쪽 여백은 0 으로 두고 flex 중앙 정렬로 글자를 정중앙에. 퀵메뉴 높이는 버튼 2줄분(16px×2)만큼 자연히 줄고, 퀵메뉴↔제목 44px(R15)는 그대로 */
html body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item {
min-height: 48px;
height: 48px;
padding-top: 0;
padding-bottom: 0;
}
/* R19. '특별함' 부제 색 #666666 → #565B66 (케어 프로세스 부제와 동일, 2026-10-30 사용자 지시) — 글꼴·21px·400·29.4px·문구·여백 그대로 */
html body.medicell .m15 .npoint .npoint__lede {
color: #565B66;
}
/* R20. 미토파지 재활 인용문 — PC 원본 디자인 기준 (2026-10-30, 사용자 지시)
PC 실측(.d15 .mitoc-doctor__quote): Nanum Pen Script(Google Fonts 웹폰트 fonts.gstatic.com/s/nanumpenscript/v25/…woff2) 44px/400/줄간격 1.25/
자간 −0.2024px/파랑 #2F46D6/가운데, 따옴표 = 이미지 mitoc_con3_img.png 좌상 + 180° 회전 우하.
모바일은 같은 웹폰트·굵기·줄간격·자간·색·정렬·따옴표, 크기만 PC 44px 와 같은 변수 --mc-fs-title(27·27.75·28.86·31.82px).
따옴표(36px)는 위·아래 여백 36px 안 → 글자와 겹치지 않음. 문구 그대로, 자연 줄바꿈. 직전: 대표원장식(검정·왼쪽·회색 ❝) */
html body.medicell .m15 .mitoc-doctor .mitoc-doctor__quote {
position: relative;
width: auto;
margin: 0;
padding: 36px 0;
font-family: "Nanum Pen Script", cursive;
font-size: var(--mc-fs-title) !important;
font-weight: 400;
line-height: 1.25 !important;
letter-spacing: -0.2024px;
color: #2F46D6;
text-align: center;
text-indent: 0;
word-break: keep-all;
}
html body.medicell .m15 .mitoc-doctor .mitoc-doctor__quote .mitoc-doctor__quote-mark {
display: block;
width: 36px;
height: auto;
}
html body.medicell .m15 .mitoc-doctor .mitoc-doctor__quote::before,
html body.medicell .m15 .mitoc-doctor .mitoc-doctor__quote::after {
content: none;
}
/* 인용문 → 연구 사진 간격 24px 유지 (원래 48px) */
html body.medicell .m15 .mitoc-doctor .mitoc-doctor__grid {
margin-top: 24px;
}
/* R21. 오시는 길 상단 여백 −15px (2026-10-30, 사용자 지시) — 파란 상담 섹션 끝 → 제목 간격만 줄임(섹션 위 안쪽 여백 56 → 41px). 제목·지도·제목→지도 간격 그대로 */
html body.medicell .m15 .location {
padding-top: 41px;
}
/* R22. 푸터 하단 여백 −40px (2026-10-30, 사용자 지시)
원인: mobile-c3.css .site-footer padding-bottom calc(5.5rem + safe-area)=88px 이 body padding-bottom 60px(하단 고정 상담바 높이만큼)과 겹쳐 바 공간을 이중으로 확보.
88 → 48px(3rem) 로 줄임. body 60px·푸터 안쪽 48px·iPhone 하단 안전영역(env) 은 그대로 → 마지막 글자~상담바 136 → 96px */
html body.medicell .m15 .site-footer {
padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}
/* R24. 모바일 햄버거 메뉴 = 운영 홈페이지 원본(아코디언) 복구 (2026-10-30, 사용자 지시 — 10-29 2단 메뉴 결정 변경)
마크업은 운영 원본(homepage-live-source-20261022) #mobile-nav 그대로(전화번호만 010-4815-3710), 로그인은 메뉴 맨 위(.mnav2__top, 기존 위치·주소 유지).
이 작업본에만 있는 모바일 스타일(mobile-c3.css 25·100·780·786행)이 원본 메뉴 값을 덮어 쓰던 부분을 원본(default.css 1965·2305·2315·2328·2336·2361·2372행) 값으로 되돌림 */
html body.medicell .m15 #mobile-nav {
max-height: calc(100vh - 4rem);
overscroll-behavior: auto;
line-height: 1.6;
}
html body.medicell .m15 #mobile-nav .mobile-nav__cta {
font-size: var(--text-sm);
min-height: 0;
}
html body.medicell .m15 #mobile-nav .mobile-nav__summary {
font-size: var(--text-base);
min-height: 0;
}
html body.medicell .m15 #mobile-nav .mobile-nav__sublist a {
display: block;
font-size: var(--text-sm);
min-height: 0;
}
html body.medicell .m15 #mobile-nav .mobile-nav__phone a {
min-height: 0;
font-size: inherit;
}
html body.medicell .m15 #mobile-nav > .mobile-nav__groups {
padding-bottom: 1.5rem;
}
/* R24 계속: 메뉴 기본 글자(운영 18.4px = var(--text-base))와 메뉴 안 KO|EN — 헤더용 mobile-c3.css 61행(48px 터치·16px)이 메뉴 안까지 적용되던 것을 메뉴 안에서만 원본 값으로 */
html body.medicell .m15 #mobile-nav {
font-size: var(--text-base);
}
html body.medicell .m15 #mobile-nav .site-header__lang {
font-size: .9rem;
}
html body.medicell .m15 #mobile-nav .site-header__lang a,
html body.medicell .m15 #mobile-nav .site-header__lang .is-active {
display: block;
min-width: 0;
min-height: 0;
font-size: inherit;
}
html body.medicell .m15 #mobile-nav .site-header__lang .is-active {
padding: 0;
}
/* R25. 햄버거 메뉴 열림 시 화면 덮기 (2026-10-30, 사용자 지시) — 아코디언 디자인·로그인 위치 그대로.
메뉴 패널을 헤더(5rem=80px) 아래부터 하단 고정 상담바(3.75rem=60px) 위까지 꽉 채움 → 패널 아래로 퀵메뉴 등 페이지가 보이지 않고,
모든 분류를 펼쳐도 마지막 항목이 상담바에 가리지 않게 패널 안에서 스크롤(뒤 페이지로 스크롤 번짐 방지). 'R24 max-height(100vh − 4rem)' 대체 */
html body.medicell .m15 #mobile-nav {
height: calc(100vh - 5rem - 3.75rem);
height: calc(100dvh - 5rem - 3.75rem - env(safe-area-inset-bottom, 0px));
max-height: none;
overflow-y: auto;
overscroll-behavior: contain;
}