/* ==== [운영 메모 2026-10-29] — 이 메모는 주석이라 동작에 영향 없음 ====
모바일 가독성·터치 영역 공통. 불러오는 곳: 국문 17쪽(메인·서브·개인정보), 모바일(47.99rem 이하)만. 영문은 불러오지 않는다.
모바일 순서: (메인) home-live-m15 → mobile-c3 → mobile-buttons / (서브) mobile-c3 → mobile-buttons → mobile-sub.
주의: /sub/consult-online/ 은 이 파일을 다른 쪽보다 앞(intake.css 바로 뒤)에서 불러온다.
==== */
/* ==========================================================================
메디셀플러스 모바일 전용 가독성·터치 영역 개선 (2026-10-22, 테스트본)
- 로드: 각 페이지 — PC(48rem 이상)에는 적용되지 않는다.
- 기준: 본문 18px · 보조 16~17px · 제목 27~32px · 버튼 56px 이상 · 터치 영역 48px 이상
- 색상·폰트·카드 스타일은 PC C3 토큰(#2f46d6, #f4f5f8, Pretendard)을 그대로 쓴다.
- 상담 폼 입력 이름·data-* 속성·JS는 건드리지 않는다. 크기·여백·표시 방식만 바꾼다.
- 기존 CSS(home-live-m15.css 의 !important 포함)와의 충돌: 값은 가능하면 변수(--mc-fs-*)로 덮고,
선택자 우선순위(body.medicell + 클래스)로 이긴다. !important 는 기존 !important 를 덮어야 하는
"라벨류" 한 곳에만 쓴다.
========================================================================== */
/* ===== 0. 토큰 · 기존 타이포 변수 재정의 (home-live-m15.css 의 14~15px 를 한 번에 올린다) ===== */
body.medicell {
--mc-fs-title: clamp(27px, 7.4vw, 32px);
--mc-fs-sub: 21px;
--mc-fs-small: 18px;
--m-ink: #23262b;
--m-ink-2: #454c5a;
--m-blue: #2f46d6;
--m-tint: #f4f5f8;
--m-line: #d9dce3;
--m-tap: 3rem; /* 48px — 터치 영역 최소 */
--m-btn: 3.5rem; /* 56px — 주요 버튼 높이 */
}
body.medicell .m15 {
font-size: 18px;
line-height: 1.7;
color: var(--m-ink);
overflow-wrap: break-word;
}
body.medicell .m15 p,
body.medicell .m15 li,
body.medicell .m15 dd,
body.medicell .m15 dt {
word-break: keep-all;
}
/* 서브페이지 H1(기존 39px)을 제목 기준 상한 32px 로 */
body.medicell .m15 h1 {
font-size: clamp(28px, 7.8vw, 32px);
line-height: 1.3;
}
/* ===== 1. 헤더 · 메뉴 ===== */
body.medicell .m15 .site-header__mark {
display: flex;
align-items: center;
min-height: var(--m-tap);
}
body.medicell .m15 .site-header__toggle {
width: var(--m-tap);
height: var(--m-tap);
min-width: var(--m-tap);
}
body.medicell .m15 .site-header__lang {
font-size: 16px;
display: inline-flex;
align-items: center;
}
/* 눌러서 이동하는 언어 링크는 48×48px, 현재 언어 표시(KO)는 링크가 아니라 폭만 줄여 로고 폭을 지킨다 */
body.medicell .m15 .site-header__lang a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--m-tap);
min-height: var(--m-tap);
font-size: 16px;
}
body.medicell .m15 .site-header__lang .is-active {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--m-tap);
padding-inline: .25rem;
font-size: 16px;
}
body.medicell .m15 .site-header__lang-sep {
font-size: 16px;
margin: 0;
}
body.medicell .m15 .site-header__actions {
gap: 0;
}
body.medicell .m15 .site-header__inner {
padding-inline: 1rem; /* 로고 204px + 언어 + 메뉴 48px 를 360px 폭에 한 줄로 담기 위해 */
gap: .5rem;
}
@media (max-width: 21rem) { /* 336px 이하 초소형 폰: 로고를 한 단계 줄여 한 줄 유지 */
body.medicell .m15 .site-header .site-header__mark .site-header__logo {
height: 1.45rem;
}
body.medicell .m15 .site-header__inner {
padding-inline: .5rem;
gap: .25rem;
}
}
body.medicell .m15 .mobile-nav__cta,
body.medicell .m15 .mobile-nav__summary,
body.medicell .m15 .mobile-nav__sublist a,
body.medicell .m15 .mobile-nav__phone a {
display: flex;
align-items: center;
min-height: var(--m-btn);
font-size: 18px;
}
/* ===== 2. 빠른메뉴: 전화 상담을 맨 위 전폭으로 강조, 나머지는 2열 ===== */
body.medicell .m15 .mobile-quick-grid {
padding: .875rem var(--edge, 1rem) .5rem;
}
body.medicell .m15 .mobile-quick-grid__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .625rem;
}
body.medicell .m15 .mobile-quick-grid__list > li:last-child {
order: -1; /* 전화 버튼(마지막 li)을 맨 위로 */
grid-column: 1 / -1;
}
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(5) {
grid-column: 1 / -1; /* 홀수 개 남는 마지막 메뉴(상담 안내)는 전폭 */
}
body.medicell .m15 .mobile-quick-grid__item {
min-height: var(--m-btn);
padding: .5rem .625rem;
font-size: 17px;
line-height: 1.35;
border-radius: 6px;
}
body.medicell .m15 .mobile-quick-grid__item--tel {
flex-direction: row;
gap: .625rem;
min-height: 4rem;
font-size: 22px;
font-weight: 800;
letter-spacing: 0;
}
body.medicell .m15 .mobile-quick-grid__item--tel span {
font-size: 22px;
white-space: nowrap;
letter-spacing: 0;
}
body.medicell .m15 .mobile-quick-grid__item--tel svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
}
/* ===== 3. 하단 고정 상담 바 · 1:1 상담 패널 ===== */
body.medicell .m15 .quick-consult__open-btn,
body.medicell .m15 .quick-consult__tel-btn {
min-height: 3.75rem;
height: 3.75rem;
font-size: 18px;
font-weight: 800;
}
body.medicell .m15 .quick-consult__mobile-bar {
padding-bottom: env(safe-area-inset-bottom, 0);
}
body.medicell .m15 .quick-consult .quick-consult__label {
font-size: 20px;
}
body.medicell .m15 .quick-consult .quick-consult__fields input[name],
body.medicell .m15 .quick-consult .quick-consult__fields select[name] {
height: var(--m-btn);
font-size: 18px;
border-radius: 6px;
}
body.medicell .m15 .quick-consult .quick-consult__fields input[name]::placeholder {
color: #b9bfcb; /* 어두운 패널 위 안내 글씨 명도 대비 보강 */
opacity: 1;
}
body.medicell .m15 .quick-consult .quick-consult__consent {
min-height: var(--m-tap);
font-size: 16px;
line-height: 1.5;
gap: .75rem;
}
body.medicell .m15 .quick-consult .quick-consult__consent input[type="checkbox"] {
width: 1.5rem;
height: 1.5rem;
}
body.medicell .m15 .quick-consult .quick-consult__consent a {
display: inline-flex;
align-items: center;
min-height: var(--m-tap);
}
body.medicell .m15 .quick-consult .quick-consult__submit {
height: var(--m-btn);
font-size: 18px;
border-radius: 6px;
}
body.medicell .m15 .quick-consult .quick-consult__notice {
font-size: 16px;
}
body.medicell .m15 .quick-consult .quick-consult__notice a {
display: inline-flex;
align-items: center;
min-height: var(--m-tap);
}
/* ===== 4. 메인 본문 — 변수로 못 올리는 14~15px 개별 항목 ===== */
body.medicell .m15 .ncare__desc,
body.medicell .m15 .ncare__lede,
body.medicell .m15 .ncert__desc,
body.medicell .m15 .npoint__desc,
body.medicell .m15 .npoint__lede,
body.medicell .m15 .why__sub2,
body.medicell .m15 .mitoc-proof__lede,
body.medicell .m15 .therapy__route-desc {
font-size: 18px;
line-height: 1.7;
}
body.medicell .m15 .ncare__desc-lead,
body.medicell .m15 .mitoc-proof__lede-strong {
font-size: inherit;
}
body.medicell .m15 .team__creds li,
body.medicell .m15 .team__accordion-body li,
body.medicell .m15 .team__pub-list li,
body.medicell .m15 .philosophy__cv-list li,
body.medicell .m15 .mitoc-doctor__career-item {
font-size: 17px;
line-height: 1.65;
}
body.medicell .m15 .mitoc-proof__note {
font-size: 16px !important; /* 마크업의 인라인 font-size:12px · color 를 덮기 위해 필요 */
color: var(--m-ink-3) !important;
line-height: 1.65;
}
/* 라벨류(영문 소제목·마커): 기존 !important(18px)를 16px 로 낮춘다 — 이 묶음만 !important 사용 */
body.medicell .m15 .team__marker,
body.medicell .m15 .team__creds-label,
body.medicell .m15 .location__marker,
body.medicell .m15 .home-final-cta__eyebrow,
body.medicell .m15 .journey__flow-en,
body.medicell .m15 .philosophy__cv-label {
font-size: 16px !important;
}
/* "자세히보기" · "네이버지도에서 보기" 등 텍스트 링크는 터치 영역 48px */
body.medicell .m15 .ncare__link,
body.medicell .m15 .location__link {
display: inline-flex;
align-items: center;
min-height: var(--m-tap);
padding-block: .5rem;
font-size: 17px;
font-weight: 700;
}
/* ===== 5. 다른 의료진(team) 상세 약력 펼침 버튼 — 대표원장 약력은 접지 않고 전부 노출(9-5) ===== */
body.medicell .m15 .team__accordion > summary {
display: flex;
align-items: center;
justify-content: center;
gap: .625rem;
min-height: var(--m-btn);
padding: .5rem 1rem;
border: 1.5px solid var(--m-blue);
border-radius: 6px;
background: #fff;
color: var(--m-blue);
font-size: 18px;
font-weight: 800;
line-height: 1.3;
cursor: pointer;
list-style: none;
}
body.medicell .m15 .team__accordion > summary::-webkit-details-marker {
display: none;
}
body.medicell .m15 .team__accordion > summary::after {
content: "";
width: .55em;
height: .55em;
border-right: 2.5px solid currentColor;
border-bottom: 2.5px solid currentColor;
transform: translateY(-.15em) rotate(45deg);
transition: transform .2s;
}
body.medicell .m15 .team__accordion[open] > summary::after {
transform: translateY(.1em) rotate(-135deg);
}
/* 약력 그룹: 좁은 화면에서 라벨(현재·학력…)을 위로, 목록을 전폭으로 */
body.medicell .m15 .philosophy__cv-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .375rem;
}
body.medicell .m15 .philosophy__cv-list {
width: 100%;
}
/* 제목 기준(27~32px)을 넘는 큰 제목 정리 */
body.medicell .m15 .philosophy__heading {
font-size: var(--mc-fs-title);
}
body.medicell .m15 .ncert__heading-gold {
font-size: clamp(28px, 8.2vw, 34px);
}
/* 과도한 세로 여백 축소 — 마크업의 인라인 style="padding:5rem …" 를 덮기 위해 !important 필요 */
body.medicell .m15 .team,
body.medicell .m15 .home-final-cta {
padding-block: 3.5rem !important;
}
body.medicell .m15 :is(.philosophy, .journey, .mitoc-onoff, .mitoc-doctor, .mitoc-support, .location) {
padding-block: 3.5rem;
}
/* ===== 6. 마무리 CTA: 전화 상담 + 온라인 상담 신청 (전폭 56px 이상) ===== */
body.medicell .m15 .home-final-cta__actions {
display: grid;
gap: .75rem;
width: 100%;
max-width: 26rem;
margin-inline: auto;
}
body.medicell .m15 .home-final-cta__action {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--m-btn);
padding: .5rem 1rem;
font-weight: 800;
border-radius: 6px;
text-align: center;
}
body.medicell .m15 .home-final-cta__action--secondary {
background: transparent; /* 파란 배경 위: 주 버튼(흰색 채움)과 구분되는 흰 외곽선 */
color: #fff;
border: 2px solid #fff;
text-decoration: none;
}
/* ===== 7. 푸터 ===== */
body.medicell .m15 .site-footer__facts dt,
body.medicell .m15 .site-footer__facts dd {
font-size: 16px;
line-height: 1.65;
}
body.medicell .m15 .site-footer__copyright {
font-size: 16px;
line-height: 1.7;
}
body.medicell .m15 .site-footer__copyright a {
display: inline-flex;
align-items: center;
min-height: var(--m-tap);
}
/* ===== 8. 온라인 상담 신청 페이지 (consult-online) ===== */
body.medicell .m15 .online-consult__intro-heading,
body.medicell .m15 .online-consult__form-heading {
font-size: clamp(24px, 6.8vw, 28px);
line-height: 1.3;
}
body.medicell .m15 .online-consult__intro-lede,
body.medicell .m15 .online-consult__checklist li,
body.medicell .m15 .online-consult__note,
body.medicell .m15 .online-consult__notice,
body.medicell .m15 .online-consult__phone-desc {
font-size: 18px;
line-height: 1.7;
}
body.medicell .m15 .online-consult__field-label {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
body.medicell .m15 .online-consult__form input:not([type="checkbox"]):not([type="hidden"]),
body.medicell .m15 .online-consult__form select {
min-height: var(--m-btn);
font-size: 18px;
border-radius: 6px;
}
body.medicell .m15 .online-consult__form textarea {
min-height: 9rem;
font-size: 18px;
line-height: 1.6;
border-radius: 6px;
}
body.medicell .m15 .online-consult__consent-check {
display: flex;
align-items: center;
gap: .75rem;
min-height: var(--m-tap);
font-size: 17px;
line-height: 1.5;
}
body.medicell .m15 .online-consult__consent-check input[type="checkbox"] {
width: 1.5rem;
height: 1.5rem;
flex: 0 0 auto;
}
body.medicell .m15 .online-consult__consent-details > summary {
display: flex;
align-items: center;
min-height: var(--m-tap);
font-size: 17px;
font-weight: 700;
cursor: pointer;
}
body.medicell .m15 .online-consult__consent-details p {
font-size: 16px;
line-height: 1.7;
}
body.medicell .m15 .online-consult__policy-link {
display: inline-flex;
align-items: center;
min-height: var(--m-tap);
font-size: 17px;
}
body.medicell .m15 .online-consult__submit {
width: 100%;
min-height: var(--m-btn);
font-size: 18px;
font-weight: 800;
border-radius: 6px;
}
body.medicell .m15 .online-consult__phone-link {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--m-btn);
font-size: 20px;
font-weight: 800;
}
body.medicell .m15 .online-consult__notice a {
display: inline-flex;
align-items: center;
min-height: var(--m-tap);
}
/* 한글 줄바꿈: 낱글자가 다음 줄로 떨어지지 않도록 어절 단위로 */
body.medicell .m15 .online-consult__consent-check span,
body.medicell .m15 .online-consult__field-label,
body.medicell .m15 .online-consult__form textarea,
body.medicell .m15 .quick-consult__consent span,
body.medicell .m15 .home-final-cta__action {
word-break: keep-all;
}
/* ===== 9. 명도 대비 보강 (측정 4.5:1 미만 → 이상) — 색상만 조정, 위치·크기·내용 변화 없음 ===== */
body.medicell {
--m-ink-3: #5c616b; /* 흰색·연회색 위 6:1 이상 (기존 #777 4.4~4.5, #8a8f99 3.0) */
--m-gold: #946200; /* 노벨상 연도·수상 라벨: 기존 #d89937(2.4:1) 의 같은 계열 진한 색 5:1 */
}
body.medicell .m15 .mitoc-onoff__card-desc,
body.medicell .m15 .mitoc-proof__lede,
body.medicell .m15 .mitoc-proof__finding,
body.medicell .m15 .mitoc-proof__note,
body.medicell .m15 .mitoc-doctor__desc,
body.medicell .m15 .mitoc-doctor__profile-role,
body.medicell .m15 .team__dept,
body.medicell .m15 .site-footer__facts dt,
body.medicell .m15 .site-footer__facts dd,
body.medicell .m15 .site-footer__copyright,
body.medicell .m15 .site-footer__copyright a,
body.medicell .m15 .location__hours dt {
color: var(--m-ink-3);
}
body.medicell .m15 .mitoc-proof__year,
body.medicell .m15 .mitoc-proof__prize {
color: var(--m-gold);
}
/* 인용문: 어절 단위 줄바꿈 */
body.medicell .m15 .philosophy__quote {
word-break: keep-all;
}
/* ==========================================================================
9. 2026-10-23 모바일 1·2단계: 오시는 길 · 푸터 · 히어로 (국문 메인)
- 대상: .m15 (모바일 DOM) 만. PC(.d15)·JS·폼·접수 연동은 건드리지 않는다.
========================================================================== */
/* 9-1. 오시는 길 — 카카오맵은 그대로 두고, 지도 위젯이 붙여 보여주는 주소·전화(.cont)만 숨긴다.
.cont 는 지도 본체(.wrap_map)와 형제 요소라 지도 조작(확대·이동·컨트롤)에 영향이 없다.
위젯 구조가 바뀌어 클래스가 사라지면 이 규칙은 아무것도 숨기지 않고(지도는 정상) 그대로 둔다. */
body.medicell .m15 .location__map .root_daum_roughmap > .cont {
display: none;
}
body.medicell .m15 .location__map {
border: 1px solid var(--m-line);
border-radius: 12px;
overflow: hidden;
}
body.medicell .m15 .location__grid {
gap: 1.25rem;
}
body.medicell .m15 .location__info {
display: grid;
gap: 1rem;
margin-top: 0;
}
body.medicell .m15 .location__address-block {
display: flex;
align-items: flex-start;
gap: .75rem;
margin: 0;
padding: 1.1rem 1rem;
background: var(--m-tint);
border-radius: 12px;
}
body.medicell .m15 .location__pin {
flex: none;
margin-top: .3rem;
color: var(--m-blue);
}
body.medicell .m15 .location__address {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.6;
color: var(--m-ink);
word-break: keep-all;
}
body.medicell .m15 .location__call {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
min-height: var(--m-btn);
padding: .5rem 1rem;
background: var(--m-blue);
color: #fff;
border-radius: 8px;
font-size: 18px;
font-weight: 700;
text-decoration: none;
}
body.medicell .m15 .location__call b {
font-weight: 800;
font-variant-numeric: tabular-nums;
}
/* 영업시간: dd 안에 이미 "평일 09:00 – 19:00"처럼 항목명이 들어 있어 dt 를 시각적으로만 숨긴다(스크린리더에는 유지) */
body.medicell .m15 .location__hours {
margin: 0;
padding: 0;
border-top: 1px solid var(--m-line);
}
body.medicell .m15 .location__hours > div {
display: block;
padding: .8rem .25rem;
border-bottom: 1px solid var(--m-line);
}
body.medicell .m15 .location__hours dt {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
body.medicell .m15 .location__hours dd {
margin: 0;
font-size: 17px;
font-weight: 600;
color: var(--m-ink);
}
body.medicell .m15 .location__links {
display: grid;
gap: .6rem;
margin: 0;
padding: 0;
border-top: 0;
}
body.medicell .m15 .location__link {
display: flex;
width: 100%;
justify-content: center;
min-height: 3.25rem;
padding: .5rem 1rem;
border: 1.5px solid var(--m-blue);
border-radius: 8px;
color: var(--m-blue);
text-decoration: none;
gap: .4rem;
}
/* 9-2. 푸터 — PC 와 같은 짙은 남색(#111b32). 하단 고정 상담 바에 가리지 않게 아래 여백 확보.
(2026-10-23) 푸터 상단 파란 선 제거: 선의 원인은 이 규칙에 있던 `box-shadow: inset 0 2px 0 var(--m-blue)` 였다 → 삭제.
기본 CSS 의 `.site-footer{border-top:1px solid var(--border)}`(연한 회색 1px)도 남색 위에 얇은 흰 선으로 보이므로 모바일에서는 0 으로 둔다. */
body.medicell .m15 .site-footer {
background: #111b32;
color: rgba(255, 255, 255, .78);
border-top: 0;
padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
}
body.medicell .m15 .site-footer__mark {
color: #fff;
}
body.medicell .m15 .site-footer__mark-en {
color: rgba(255, 255, 255, .62);
}
/* '메디셀플러스의원' 아래 짧은 장식선 삭제(2026-10-23, 모바일만) — 줄이 빠지면 브랜드 영역 간격(.5rem)도 함께 사라져 병원 정보 구분선과의 간격은 32px 로 정리됨 */
body.medicell .m15 .site-footer__rule {
display: none;
}
body.medicell .m15 .site-footer__facts dt {
color: rgba(255, 255, 255, .66);
}
body.medicell .m15 .site-footer__facts dd {
color: rgba(255, 255, 255, .92);
}
body.medicell .m15 .site-footer__facts > div {
align-items: center;
}
body.medicell .m15 .site-footer__facts a {
display: inline-flex;
align-items: center;
min-height: var(--m-tap);
color: #fff;
font-weight: 700;
text-decoration: underline;
text-underline-offset: .2em;
}
body.medicell .m15 .site-footer__copyright {
color: rgba(255, 255, 255, .66);
}
body.medicell .m15 .site-footer__copyright a {
color: #fff;
}
/* 9-3. 히어로 — 문구 위계를 키우고, 사진은 오른쪽 흰색 소멸 마스크 없이 전폭으로 보여 준다.
(PC 는 건물 사진이 전면에 나오는 구성이라 모바일도 사진이 "잘린 조각"이 아니라 건물로 읽히게 한다.)
문구·순서는 그대로, 크기·여백·사진 처리만 바꾼다. */
body.medicell .m15 .hero.hero {
--mc-fs-title: clamp(33px, 9.46vw, 39.6px); /* 히어로 제목: 직전(30~36px)보다 약 10% 크게. 360px 에서 34px */
--mc-fs-sub: 18px; /* 히어로 3대 메시지 본문 */
gap: 1.5rem;
}
body.medicell .m15 .hero.hero .hero__heading {
line-height: 1.32;
letter-spacing: -.01em;
}
body.medicell .m15 .hero.hero .hero__heading-accent {
color: var(--m-blue);
}
body.medicell .m15 .hero.hero .hero__rolling-primary {
line-height: 1.65;
color: var(--m-ink);
word-break: keep-all;
}
body.medicell .m15 .hero.hero .hero__media {
-webkit-mask-image: none;
mask-image: none;
}
body.medicell .m15 .hero.hero .hero__media-photo {
/* PC 메인과 같은 원본(/c3-assets/hero-real-building.jpg, 1600×2133 세로형)을 수정하지 않고 CSS 로만 자른다.
확대 없음(100%). 9:7 창(390px 기준 약 294px)에 cover 로 채우고 세로 위치 34% →
보이는 구간 원본 높이 약 14% ~ 72%: 위쪽 나무는 아래 가장자리 일부만 남기고,
메디셀플러스의원·가정의학과·마취통증의학과·피부과 간판과 건물 외관이 한 간판도 잘리지 않고 모두 보인다.
폭에 비례해 360~430px 모두 같은 비율. 직전 값: 4:3 + scale(1.62) / 65% 76.6%(지나친 확대로 폐기). */
width: 100%;
height: auto;
aspect-ratio: 9 / 7;
object-fit: cover;
object-position: 50% 34%;
}
/* 9-4. 온라인 상담 페이지 — 영문 라벨이 제목보다 커 보이는 문제와 하위 메뉴의 불필요한 가로 스크롤바 정리 (문구 불변) */
body.medicell .m15 .online-hero__eyebrow {
font-size: 16px;
font-weight: 800;
letter-spacing: .14em;
line-height: 1.4;
}
body.medicell .m15 .sub-nav ul {
scrollbar-width: none;
}
body.medicell .m15 .sub-nav ul::-webkit-scrollbar {
display: none;
}
/* 9-5. 빠른 메뉴 색 — 척추관협착증·뇌·신경계는 브랜드 파랑(흰 글자), 병원소개(현재 페이지)는 연회색.
전화 버튼은 기존 파랑 유지(맨 위 전폭). 높이·모서리·간격은 전부 동일. HTML 은 건드리지 않고 링크 주소로 지정한다. */
body.medicell .m15 .mobile-quick-grid__list {
gap: .5rem;
}
body.medicell .m15 .mobile-quick-grid__item,
body.medicell .m15 .mobile-quick-grid__item--tel {
min-height: 4rem;
border-radius: 8px;
}
body.medicell .m15 .mobile-quick-grid__item.is-active {
background: #f2f3f6; /* 현재 페이지 표시로 색을 바꾸지 않는다 — 일반 회색 버튼과 동일 */
border-color: var(--m-line);
color: var(--m-ink);
}
/* 최종 배치(2026-10-23 재확정): 전화(전폭) / 척추 · 뇌·신경계(파랑 2개) / 정맥+동맥 · 병원소개(회색) / 상담 안내(전폭, 하단 파란 강조선).
마크업·링크는 그대로 두고 표시 순서만 order 로 바꾼다. */
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(2) { order: 1; } /* 척추관협착증 + 줄기세포 */
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(4) { order: 2; } /* 뇌·신경계 + 줄기세포 */
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(3) { order: 3; } /* 정맥 + 동맥 줄기세포 */
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(1) { order: 4; } /* 병원소개 */
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(5) { order: 5; } /* 상담 안내 */
body.medicell .m15 a.mobile-quick-grid__item[href="/sub/consult-faq/"] {
box-shadow: inset 0 -3px 0 var(--m-blue); /* 병원소개에 있던 강조선을 상담 안내로 이동 */
}
body.medicell .m15 a.mobile-quick-grid__item[href="/sub/programs-spinal-stenosis/"],
body.medicell .m15 a.mobile-quick-grid__item[href="/sub/programs-neuro/"] {
background: var(--m-blue);
border-color: var(--m-blue);
color: #fff;
}
/* 9-6. 대표원장 약력 — 접지 않고 처음부터 끝까지 노출. 항목 구분선·점·줄 간격으로 긴 목록을 읽기 쉽게 */
body.medicell .m15 .philosophy__cv {
margin-top: 1.5rem;
}
body.medicell .m15 .philosophy__cv-group {
gap: .125rem;
padding-block: .75rem;
border-top: 1px solid var(--m-line);
}
body.medicell .m15 .philosophy__cv-label {
color: var(--m-blue);
letter-spacing: .06em;
}
body.medicell .m15 .philosophy__cv-list {
margin: 0;
padding: 0;
list-style: none;
}
body.medicell .m15 .philosophy__cv-list li {
position: relative;
padding: .4rem 0 .4rem 1.1rem;
line-height: 1.55;
word-break: keep-all;
}
body.medicell .m15 .philosophy__cv-list li::before {
content: "";
position: absolute;
left: .1rem;
top: 1.05em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--m-blue);
}
/* 9-7. 히어로 3대 메시지 — 문구는 그대로, 의미 단위(.hero-u)로만 줄바꿈. 부분 굵게 없이 전체 600.
.hero-u 는 한 덩어리로 유지(inline-block), 덩어리 사이에서만 줄이 바뀐다. 글자색·브랜드 색은 기존 그대로. */
body.medicell .m15 .hero.hero .hero__rolling-primary {
font-weight: 600 !important; /* 3개 메시지 전체를 SemiBold 하나로 통일(부분 굵게 없음). 기존 780(!important)을 덮는다 */
line-height: 1.6 !important;
}
body.medicell .m15 .hero.hero .hero__points {
gap: 1rem !important; /* 세 문구 사이 간격 동일 */
}
body.medicell .m15 .hero.hero .hero__rolling-primary .hero-u {
display: inline-block;
word-break: keep-all;
text-wrap: balance;
}
/* 9-8. 모바일 햄버거 메뉴 최하단 "로그인" — 구분선 아래, 자물쇠 아이콘 + 글자. 전화·언어 항목보다 낮은 강조(회색 글자). */
body.medicell .m15 .mobile-nav__login {
margin-top: .5rem;
padding-top: .25rem;
border-top: 1px solid var(--m-line);
}
body.medicell .m15 .mobile-nav__login a {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: var(--m-tap);
padding-block: .5rem;
color: var(--m-ink-2);
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
/* 9-9. 햄버거 패널 높이 보정 — 기존 max-height(100vh - 4rem)는 모바일 주소창·하단 고정 상담 바(약 61px)를 계산하지 않아
화면 높이 700px 이하에서 맨 아래 항목(로그인)이 바에 가려지고 스크롤로도 닿지 못했다.
패널을 "헤더 아래 ~ 하단 바 위" 영역 안에 가두고, 넘치면 패널 안에서 끝까지 스크롤되게 한다. */
body.medicell .m15 .mobile-nav {
max-height: calc(100vh - 5.2rem - 4rem);
max-height: calc(100dvh - 5.2rem - 4rem - env(safe-area-inset-bottom, 0px));
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
body.medicell .m15 .mobile-nav > ul {
padding-bottom: .5rem; /* 로그인 아래 불필요한 빈 공간을 줄인다(언어 선택 항목 제거 후 마지막 항목) */
}
/* ==========================================================================
9-10. 상단 바로가기 버튼 입체 인터랙션 (2026-10-23)
- 대상: .mobile-quick-grid__item (전화 · 척추 · 뇌·신경계 · 정맥+동맥 · 병원소개 · 상담 안내). 하단 고정 상담 바는 제외.
- 색·크기·순서·링크 불변. 그라데이션은 background-color 위에 얹는 반투명 레이어라 기존 파랑/회색이 그대로 유지된다.
- 기본: 솟은 느낌(아래 턱 3px + 부드러운 그림자) / 호버(마우스만): 2px 내려가며 그림자·색 진해짐 / 누름(터치·클릭): 3px 눌림, 그림자 거의 없음.
- transform·box-shadow·filter 만 쓰므로 레이아웃은 움직이지 않는다.
========================================================================== */
body.medicell .m15 .mobile-quick-grid__item {
--qb-ledge: #cdd2dd;
--qb-glow: rgba(30, 40, 80, .14);
--qb-glow-h: rgba(30, 40, 80, .22);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .05));
box-shadow: 0 3px 0 var(--qb-ledge), 0 7px 12px var(--qb-glow);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
body.medicell .m15 a.mobile-quick-grid__item--tel,
body.medicell .m15 a.mobile-quick-grid__item[href="/sub/programs-spinal-stenosis/"],
body.medicell .m15 a.mobile-quick-grid__item[href="/sub/programs-neuro/"] {
--qb-ledge: #1f2f9a;
--qb-glow: rgba(47, 70, 214, .32);
--qb-glow-h: rgba(47, 70, 214, .46);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .14));
}
/* 상담 안내: 하단 파란 강조선(inset)을 입체 그림자와 함께 유지 */
body.medicell .m15 a.mobile-quick-grid__item[href="/sub/consult-faq/"] {
box-shadow: inset 0 -3px 0 var(--m-blue), 0 3px 0 var(--qb-ledge), 0 7px 12px var(--qb-glow);
}
/* 호버: 마우스 같은 정밀 포인터에서만(터치 기기의 "끈끈한 hover" 방지) */
@media (hover: hover) and (pointer: fine) {
body.medicell .m15 .mobile-quick-grid__item:hover {
transform: translateY(2px);
box-shadow: 0 1px 0 var(--qb-ledge), 0 4px 8px var(--qb-glow-h);
filter: brightness(.96);
}
body.medicell .m15 a.mobile-quick-grid__item[href="/sub/consult-faq/"]:hover {
box-shadow: inset 0 -3px 0 var(--m-blue), 0 1px 0 var(--qb-ledge), 0 4px 8px var(--qb-glow-h);
}
}
/* 누름: 클릭·터치하는 동안(:active). 손을 떼면 transition 으로 원래 위치로 복귀 */
body.medicell .m15 .mobile-quick-grid__item:active {
transform: translateY(3px);
box-shadow: 0 0 0 var(--qb-ledge), 0 1px 2px var(--qb-glow-h);
filter: brightness(.92);
transition-duration: .08s;
}
body.medicell .m15 a.mobile-quick-grid__item[href="/sub/consult-faq/"]:active {
box-shadow: inset 0 -3px 0 var(--m-blue), 0 0 0 var(--qb-ledge), 0 1px 2px var(--qb-glow-h);
}
/* 키보드 포커스: 눈에 띄는 윤곽선(눌림 효과와 무관하게 유지) */
body.medicell .m15 .mobile-quick-grid__item:focus-visible {
outline: 3px solid #111b32;
outline-offset: 3px;
}
/* 동작 줄이기 설정: 움직임 없이 그림자·밝기 변화만 */
@media (prefers-reduced-motion: reduce) {
body.medicell .m15 .mobile-quick-grid__item {
transition: none;
}
body.medicell .m15 .mobile-quick-grid__item:hover,
body.medicell .m15 .mobile-quick-grid__item:active {
transform: none;
}
}
/* 9-11. 히어로 사진 아래 가장자리 — 바로 아래 네이비 섹션(#02101d)으로 옅게 번지게 해 이음새를 부드럽게 하고,
맨 아래에 걸친 "피부과" 간판이 시선을 끌지 않게 한다. 사진 파일은 수정하지 않고 덧씌우는 그라데이션뿐이다. */
body.medicell .m15 .hero.hero .hero__media {
position: relative;
overflow: hidden;
}
/* (제거) 사진 하단 네이비 그라데이션 — 아래 네이비 영역은 별도 섹션이라 연결 처리를 하지 않는다. */
/* 9-12. 상단 바로가기 진료 버튼 3개 — 줄바꿈 고정("… +" / "줄기세포")과 글자 정렬 통일.
문구·링크는 그대로이고 .qg-l(한 줄 덩어리)만 추가했다. 병원소개·상담 안내는 한 줄이며 같은 행 버튼과 높이가 같다. */
body.medicell .m15 .mobile-quick-grid__item {
font-size: 17px;
font-weight: 700;
line-height: 1.3;
text-align: center;
justify-content: center;
}
body.medicell .m15 .mobile-quick-grid__item .qg-l {
display: block;
white-space: nowrap;
}
/* 9-13. "상담 안내" 버튼과 메인 타이틀("28년간") 사이 여백 약 12px 축소 (62px → 50px). 히어로 위 안쪽 여백만 조정. */
body.medicell .m15 .hero.hero {
padding-top: 1.75rem;
}
/* 9-14. "특화 진료" 섹션 설명 문구 줄바꿈 고정 — "메디셀플러스의 치료는 / 한 가지 방법에서 끝나지 않습니다." (가운데 정렬 2줄).
문구는 그대로이고 한 줄 덩어리(.ncare__lede-l)만 나눈다. 제목은 기존
로 "메디셀플러스의 / 특화 진료" 2줄. 배경·이미지·배너는 건드리지 않는다. */
body.medicell .m15 .ncare__heading,
body.medicell .m15 .ncare__lede {
text-align: center;
}
body.medicell .m15 .ncare__lede-l {
display: block;
white-space: nowrap;
}
/* 9-15. "특화 진료" 1번(척추관협착증+줄기세포)·3번(뇌·신경계+줄기세포) 카드: 굵은 첫 문장과 설명이 붙어 보이던 문제 —
첫 문장을 한 줄 덩어리로 두고 설명과 사이에 줄 간격을 준다(글자·굵기·색은 그대로). 2번(혈관) 카드는 기존 공백이 있어 변경하지 않는다. */
body.medicell .m15 .ncare__item .ncare__desc-lead {
display: inline; /* 파란 첫 문장 뒤에 흰 설명이 같은 문단에서 이어진다 (P36) */
margin: 0;
}
/* 9-16. 대표원장 사진 — PC 메인(#story-years .yprof__photo)과 같은 콘셉트: 누끼 사진을 연한 파랑 패널(#eef2f8) 위에 세우고
머리는 패널 위로 올라오며, 사진 아래는 패널 끝에서 자른다. 같은 자산(han-taehyung-1-cutout-v2.webp)을 재사용하고
비율(.91/1)·사진 폭(84%)·패널 시작(위 15%)도 PC 값 그대로다. 모바일은 폭 100%(최대 420px)로 가운데 배치. 문구·약력은 건드리지 않는다. */
body.medicell .m15 .philosophy__media {
--pr: .94; /* PC 값 .84 → .94: 사진을 약 12% 크게 (모바일에서 인물이 작아 보이던 점 보완) */
position: relative;
isolation: isolate;
width: 100%;
max-width: 420px;
margin: 1.75rem auto -1rem; /* 사진 아래 여백 정리: 인용문까지 약 24px */
padding: 0;
aspect-ratio: .81 / 1; /* 사진이 커진 만큼 패널 높이도 늘려 팔짱 낀 팔이 이전만큼 보이게 (PC 값 .91) */
overflow: visible;
clip-path: inset(-48px -48px 0 -48px);
background: transparent;
border-radius: 0;
box-shadow: none;
}
body.medicell .m15 .philosophy__media::before {
content: "";
position: absolute;
inset: 15% 0 0;
z-index: -1;
background: #eef2f8;
border-radius: 2px;
}
body.medicell .m15 .philosophy__media .philosophy__photo {
position: absolute;
top: 0;
left: 50%;
width: calc(var(--pr) * 100%);
height: auto;
max-width: none;
aspect-ratio: auto;
object-fit: initial;
object-position: initial;
translate: -50% 0;
border-radius: 0;
box-shadow: none;
filter: none;
}
/* 9-18. 대표원장 이름·전문의·약력 — PC 메인(#story-years .yprof__id / .yprof__bio)의 구조를 모바일에 그대로 재현.
순서: 이름("한태형" 크게 + "대표원장") → 진한 네이비 가로 배너("미국 마취통증의학과 · 미국 가정의학과 전문의") → "약력" 제목 → 약력 15항목 평면 목록.
'현재/학력/전문 자격/주요 경력' 소제목·항목 구분선·불릿 없음. PC 값: 이름 38px 700 / 직함 23.6px 400 / 배너 #1b2230·흰 글자 600·패딩 .07em .22em / 약력 22px 700 / 목록 18px 1.6·간격 2px·#454c5a.
모바일은 글자 크기·패딩만 줄인다. 사진·인용문(9-16)은 건드리지 않는다. 문구는 PC 원문 그대로. */
body.medicell .m15 .pcv {
margin-top: 2rem;
text-align: left;
}
body.medicell .m15 .pcv__id::before {
content: "";
display: block;
width: min(60%, 200px);
height: 4px;
margin-bottom: 1.25rem;
background: #eef2f8;
}
body.medicell .m15 .pcv__name {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: 8px;
margin: 0;
line-height: 1.25;
}
body.medicell .m15 .pcv__name-main {
font-size: clamp(30px, 8.4vw, 36px);
font-weight: 700;
letter-spacing: -.035em;
color: #1b2230;
}
body.medicell .m15 .pcv__name-role {
font-size: clamp(19px, 5.2vw, 22px);
font-weight: 400;
color: #1b2230;
}
body.medicell .m15 .pcv__spec {
display: table;
width: fit-content;
max-width: 100%;
margin: 12px 0 0;
padding: .07em .22em .09em;
border-radius: 2px;
background: #1b2230;
color: #fff;
font-size: clamp(17px, 4.6vw, 20px);
font-weight: 600;
line-height: 1.4;
letter-spacing: -.03em;
}
body.medicell .m15 .pcv__spec .nw {
display: inline-block;
white-space: nowrap;
}
body.medicell .m15 .pcv__bio {
margin-top: 2rem;
}
body.medicell .m15 .pcv__label {
margin: 0;
font-size: clamp(20px, 5.4vw, 22px);
font-weight: 700;
line-height: 1.4;
letter-spacing: -.02em;
color: #1b2230;
}
body.medicell .m15 .pcv__list {
display: grid;
gap: 3px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
body.medicell .m15 .pcv__list li {
margin: 0;
padding: 0;
font-size: 17px;
font-weight: 400;
line-height: 1.55;
letter-spacing: -.01em;
color: #454c5a;
word-break: keep-all;
border: 0;
}
body.medicell .m15 .pcv__list li::before {
content: none;
}
/* 9-19. 다른 의료진(한진우·김진희 원장) — PC 메인 #medical-team(.subdoc)의 구조를 모바일에 그대로 재현.
순서: 사진(PC 누끼 + #eef2f8 패널) → 연한 바 → 이름 + "원장" → 네이비 전문의 배너 → "학력 · 경력" 목록 → "상세 약력 보기 →"(학회·연수·교육·논문).
영문 소제목(EDUCATION & CAREER 등)·불릿·구분선 없음. 대표원장(9-18 .pcv)과 같은 크기 기준. 문구는 PC 원문 그대로. */
body.medicell .m15 .sdocs__grid {
display: grid;
gap: 2.4rem;
margin-top: 2rem;
}
body.medicell .m15 .sdoc {
text-align: left;
}
body.medicell .m15 .sdoc__photo {
--pr: .86;
position: relative;
isolation: isolate;
width: 100%;
max-width: 420px;
margin: 0 auto;
aspect-ratio: 1.39 / 1;
overflow: visible;
clip-path: inset(-48px -48px 0 -48px);
background: transparent;
}
body.medicell .m15 .sdoc__photo::before {
content: "";
position: absolute;
inset: 20% 0 0;
z-index: -1;
background: #eef2f8;
border-radius: 2px;
}
body.medicell .m15 .sdoc__photo img {
position: absolute;
top: 0;
left: 50%;
width: calc(var(--pr) * 100%);
height: auto;
max-width: none;
translate: -50% 0;
}
body.medicell .m15 .sdoc__photo img[src*="kim-jinhee-landing"] {
width: 95%;
top: -2.9%;
}
body.medicell .m15 .sdoc__id::before {
content: "";
display: block;
width: min(60%, 200px);
height: 4px;
margin: 1rem 0 .875rem;
background: #eef2f8;
}
body.medicell .m15 .sdoc__who {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: 8px;
margin: 0;
line-height: 1.25;
}
body.medicell .m15 .sdoc__name {
font-size: clamp(30px, 8.4vw, 36px);
font-weight: 700;
letter-spacing: -.035em;
color: #1b2230;
}
body.medicell .m15 .sdoc__role {
font-size: clamp(19px, 5.2vw, 22px);
font-weight: 400;
color: #1b2230;
}
body.medicell .m15 .sdoc__cred {
display: table;
width: fit-content;
max-width: 100%;
margin: 12px 0 0;
padding: .07em .22em .09em;
border-radius: 2px;
background: #1b2230;
color: #fff;
font-size: clamp(17px, 4.6vw, 20px);
font-weight: 600;
line-height: 1.4;
letter-spacing: -.03em;
}
body.medicell .m15 .sdoc__group {
margin-top: 1.75rem;
}
body.medicell .m15 .sdoc__h {
margin: 0;
font-size: clamp(20px, 5.4vw, 22px);
font-weight: 700;
line-height: 1.4;
letter-spacing: -.02em;
color: #1b2230;
}
body.medicell .m15 .sdoc__list {
display: grid;
gap: 3px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
body.medicell .m15 .sdoc__list li {
margin: 0;
padding: 0;
font-size: 17px;
font-weight: 400;
line-height: 1.55;
letter-spacing: -.01em;
color: #454c5a;
word-break: keep-all;
border: 0;
}
body.medicell .m15 .sdoc__list li::before {
content: none;
}
body.medicell .m15 .sdoc__list--pubs {
gap: 8px;
}
body.medicell .m15 .sdoc__list--pubs li {
font-size: 16px;
line-height: 1.55;
letter-spacing: 0;
word-break: normal;
overflow-wrap: anywhere;
}
body.medicell .m15 .sdoc__more > summary {
display: inline-flex;
align-items: center;
min-height: var(--m-tap, 48px);
margin-top: .5rem;
font-size: 17px;
font-weight: 600;
color: #2f46d6;
cursor: pointer;
list-style: none;
}
body.medicell .m15 .sdoc__more > summary::-webkit-details-marker {
display: none;
}
body.medicell .m15 .sdoc__more > summary::after {
content: "→";
margin-left: 6px;
transition: transform .2s;
}
body.medicell .m15 .sdoc__more[open] > summary::after {
transform: rotate(90deg);
}
/* 9-20. 마무리 3건 (2026-10-23) — 메인(body.c3-home)만 적용.
(1) MEDICAL TEAM 라벨: 다른 섹션 제목(--mc-fs-title)과 같은 크기·굵게, 파란색 유지. 대표원장 약력 끝~라벨, 라벨~첫 의료진 사진 간격 정리.
(2) 동맥 줄기세포 섹션 문구(.therapy__lede): 문구는 그대로, 가운데 정렬 유지, 자동 줄바꿈이 균형 있게 나뉘도록 한다.
(3) 특화 진료 카드 첫 문장(.ncare__desc-lead): 세 카드 모두 같은 방식(블록 + 같은 간격)으로 자동 줄바꿈. */
body.c3-home.medicell .m15 section.team {
padding-top: .5rem !important;
}
body.c3-home.medicell .m15 .team .team__marker {
font-size: var(--mc-fs-title) !important;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.03em;
margin-bottom: 1.75rem;
}
body.medicell .m15 .therapy__lede-line,
body.medicell .m15 .therapy__lede-strong {
text-wrap: balance;
margin-inline: auto;
}
body.medicell .m15 .ncare__desc-lead {
text-wrap: wrap;
word-break: keep-all;
}
/* 9-21a. ❝(U+275D) 전용 자체 호스팅 폰트 — Noto Sans Symbols 2 (SIL OFL 1.1, © The Noto Project Authors).
Google Fonts 에서 받던 글자 1개 subset(2,772B woff2)을 /fonts/ 에 두고 직접 불러온다(외부 호출 제거). 라이선스: /fonts/OFL-NotoSansSymbols2.txt.
이 파일(mobile-c3.css)이 모바일 전용이라 PC 에서는 로드되지 않으며, ❝ 글자가 화면에 있을 때만 내려받는다. */
@font-face {
font-family: 'Noto Sans Symbols 2';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/noto-sans-symbols-2-u275d.woff2) format('woff2');
unicode-range: U+275D;
}
/* 9-21. 대표원장 인용문 정리 (2026-10-23) — 여는 따옴표 약 25% 축소(3em → 2.25em)·첫 문장 왼쪽 위에 붙여 배치, 닫는 따옴표는 마크업에서 삭제,
인용문과 이름 사이 여백 축소. 인라인 style(font-size:3em)을 덮기 위해 !important 사용. 본문 문구·글자 크기·색·사진은 그대로. */
body.medicell .m15 #philosophy .philosophy__quote .philosophy__quote-mark {
/* (#philosophy 접두: 마크업의 `#philosophy .philosophy__quote-mark{font-family … !important}` 를 이기기 위해) 시작 기호 ❝ (U+275D): Pretendard 에는 이 글리프가 없어 Noto Sans Symbols 2(SIL OFL, 상업 이용 가능)로 표시 — 해당 글자 1개만 Google Fonts 에서 받는다 */
font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans KR', sans-serif !important;
font-size: 2.1em !important;
font-weight: 400 !important;
/* 본문 폭을 차지하지 않도록 왼쪽 위에 따로 띄운다(P41). 첫 줄 시작 위치·줄바꿈은 ❝ 도입 전과 같게 .philosophy__quote 의 text-indent 가 맡는다. */
color: #A0A7B2 !important; /* P42: 확정 — 연한 회색 + 투명도 45% (마크업의 `color:#2f46d6 !important` 를 이기려고 !important) */
opacity: .45;
position: absolute;
left: 0;
top: .4em;
margin: 0 !important;
line-height: 1 !important;
text-indent: 0;
}
body.medicell .m15 #philosophy .philosophy__quote {
position: relative;
text-indent: 32px; /* ❝ 도입 전 여는 따옴표가 첫 줄에서 차지하던 폭(약 28px)+글자와의 간격 4px — 360·390·430px 모두 줄바꿈이 도입 전과 동일함을 확인 */
}
body.medicell .m15 .pcv {
margin-top: 1.25rem;
}
body.medicell .m15 .pcv__id::before {
margin-bottom: 1rem;
}
/* 9-22. 마무리 3건 (2026-10-23) — 메인(국문) 모바일 DOM
(1) 특화 진료 카드: 설명 문구 가운데 정렬(이미지·배너·링크는 이미 같은 중앙축). 파란 첫 문장+흰 설명은 같은 문단 인라인 그대로.
세로 간격(이미지→배너 24px, 배너→설명 18px, 설명→링크 28px)은 세 카드 모두 동일.
(2) 백동기 박사 파란 박스: 문구를 3줄로(식약처 허가·인증 범위 내 의료기기를 / 활용한 재활 회복 프로그램을 / 운영하고 있습니다.).
글자는 21px 유지, 360px 에서만 박스 너비에 맞춰 자동으로 약간 작아지고(5.5vw), 줄마다 내부 여백(.5em)은 글자 크기에 비례.
(3) WHY MEDICELL PLUS? 제목: 다른 섹션 메인 타이틀(NPoint·특화 진료·미토콘드리아 등 800 / -0.04em / 1.25)과 같은 굵기·자간으로 통일(색 #2f46d6 유지),
제목↔본문 간격은 "메디셀플러스 만의 특별함" 섹션과 같은 30px. */
body.medicell .m15 .ncare__desc {
text-align: center;
}
body.medicell .m15 .mitoc-doctor__highlight,
body.medicell .m15 .mitoc-doctor__highlight-line {
font-size: min(21px, 5.5vw) !important;
}
/* 줄마다 따로 칠해지던 파란 띠 → 하나의 파란 박스(3줄)로. 흰 글자·파란 배경(#2f46d6) 유지, 내부 여백으로 폭을 맞춘다 */
body.medicell .m15 .mitoc-doctor__highlight {
display: block;
padding: .55em .6em;
background: #2f46d6;
}
body.medicell .m15 .mitoc-doctor__highlight-line {
display: block;
padding: 0;
background: transparent;
white-space: nowrap;
line-height: 1.5 !important;
}
body.medicell .m15 .mitoc-doctor__highlight br {
display: none; /* 줄은 block 으로 나뉘므로
가 빈 줄을 만들지 않게 */
}
body.medicell .m15 .why__heading {
font-weight: 800;
letter-spacing: -.04em;
}
body.medicell .m15 .why__sub {
margin-top: 30px;
}
/* 9-23. WHY MEDICELL PLUS? 아래 보조 문구 줄바꿈 정리 (2026-10-23) — 문구·색·강조·
위치는 그대로.
좁은 화면(360px)에서 "전문성." / "역량," 처럼 단어 하나만 다음 줄에 남던 것을, 줄 길이가 고르게 나뉘도록 균형 줄바꿈(text-wrap:balance)으로 정리. */
body.medicell .m15 .why__sub,
body.medicell .m15 .why__sub2 {
text-wrap: balance;
word-break: keep-all;
}
/* 9-24. 특화 진료 3번 카드(뇌·신경계+줄기세포) 설명 줄바꿈 (2026-10-23)
문구·파란 첫 문장·18px·가운데 정렬·한 문단 구조 그대로. 강제 줄바꿈 없이 균형 줄바꿈(text-wrap:balance)만 적용해
"살펴봅니다." / "바탕으로" / "선택지를 검토합니다." 처럼 줄 앞뒤에 짧게 떨어지던 부분을 줄 길이가 고르게 나뉘도록 한다. 1·2번 카드는 건드리지 않는다. */
body.medicell .m15 .ncare__item:nth-child(3) .ncare__desc {
text-wrap: balance;
}
/* 9-25. 3번 카드 설명 — 의미 단위(한·미 의료현장의 / 임상 경험을 / 폭넓게 살펴봅니다. / 치료이력을 면밀히 / 상태에 맞는)가 줄 중간에서 끊기지 않게 묶음(.nw = 줄바꿈 금지 구간).
강제 줄바꿈이 아니라 "여기서는 끊지 말라"는 표시라 화면 폭에 따라 자동 줄바꿈은 그대로 일어난다. 문구·글자 크기·정렬·한 문단 구조 변경 없음. */
body.medicell .m15 .ncare__desc .nw {
white-space: nowrap;
}
/* 9-26. 푸터 상단 파란 가로선 정리 (2026-10-23)
페이지 맨 아래에서는 ① 고정 헤더 아래의 스크롤 진행 막대(.site-header__progress, 2px 파란색)와 ② 남색 푸터 경계의 파란 선(푸터 inset box-shadow)이
흰 여백을 사이에 두고 두 줄로 보였다. ①을 모바일에서 숨기고 ②만 유지, 오시는 길 섹션 아래 여백(56px)도 32px 로 줄인다.
푸터 내부·병원 정보·전화번호·하단 고정 상담 버튼은 건드리지 않는다. */
body.medicell .m15 .site-header__progress {
display: none;
}
body.medicell .m15 section.location {
padding-bottom: 2rem;
}
/* ==========================================================================
9-15. 상단 빠른 메뉴 3열 × 2행 (2026-10-27 테스트본 — 운영 미반영)
- 배치(HTML 순서 그대로): 병원소개 · 척추관협착증 + 줄기세포 · 정맥 + 동맥 줄기세포 / 뇌·신경계 + 줄기세포 · 상담 안내 · 010-4815-3710
- 색: 연회색 / 파랑 / 연회색 // 파랑 / 연회색 / 파랑 — 기존 회색·파랑 입체 버튼 스타일(9-5·9-10)을 그대로 쓰고 위치만 바꾼다.
- 글자 17px, 버튼 높이·간격 통일. 긴 문구는 자연 줄바꿈으로 최대 2줄, 병원소개·상담 안내·전화번호는 1줄.
- 문구·링크·전화(tel:) 연결·HTML 은 그대로. 이 파일은 국문 모바일(48rem 미만)에만 로드되어 PC·영문 페이지에는 적용되지 않는다.
- 칸 폭이 좁은 360~389px 에서는 좌우 여백만 줄여 칸 폭을 확보한다(그 위 폭은 본문과 같은 24px).
- v4(2026-10-27): 버튼 높이만 72px → 60px (아래 min-height). 폭·간격·글자·색·모서리는 v3 그대로.
========================================================================== */
body.medicell .m15 .mobile-quick-grid {
padding: .75rem 1.5rem .5rem;
}
body.medicell .m15 .mobile-quick-grid__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .5rem;
}
/* 9-5 의 배치 순서(order)·전폭(grid-column)을 걷어내고 HTML 순서 그대로 3열에 채운다 */
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(n) {
order: 0;
grid-column: auto;
display: flex;
}
body.medicell .m15 .mobile-quick-grid__item,
body.medicell .m15 .mobile-quick-grid__item--tel {
flex: 1 1 auto;
min-height: 3.75rem; /* 60px — 모든 버튼 동일 높이 (v4: 72px → 60px, 위아래 여백 축소) */
padding: .375rem .1875rem;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.03em;
text-align: center;
word-break: keep-all;
}
body.medicell .m15 .mobile-quick-grid__item .qg-l {
display: contents; /* 줄바꿈 고정(9-12)을 풀어 두 덩어리를 한 문장으로 흐르게 한다(링크가 flex 라 inline 은 줄이 갈라짐) */
white-space: normal;
}
/* 전화번호: 아이콘 위·번호 아래 한 줄. 번호(13자)는 17px 에서 약 123px 로 1/3 칸(약 103~118px)보다 넓어
칸 안에 한 줄로 담을 수 있는 최대 크기로 맞춘다(360~429px: 14px, 430px 이상: 16px). */
body.medicell .m15 .mobile-quick-grid__item--tel {
flex-direction: column;
gap: .125rem;
padding-inline: .125rem;
font-weight: 800;
}
body.medicell .m15 .mobile-quick-grid__item--tel span {
font-family: inherit;
font-size: 14px;
font-variant-numeric: normal;
letter-spacing: -.045em;
white-space: nowrap;
}
body.medicell .m15 .mobile-quick-grid__item--tel svg {
width: 20px;
height: 20px;
}
@media (max-width: 24.374rem) { /* 360~389px: 칸 폭 확보를 위해 좌우 여백만 24px → 12px */
body.medicell .m15 .mobile-quick-grid {
padding-inline: .75rem;
}
}
@media (min-width: 26.875rem) { /* 430px 이상: 칸이 넓어져 전화번호를 한 단계 키운다 */
body.medicell .m15 .mobile-quick-grid__item--tel span {
font-size: 16px;
}
}
@media (max-width: 21rem) { /* 336px 이하 초소형 폰: 한 단계만 줄여 잘림 방지 */
body.medicell .m15 .mobile-quick-grid__item,
body.medicell .m15 .mobile-quick-grid__item--tel span {
font-size: 16px;
}
}
/* ==========================================================================
9-16. 상단 빠른 메뉴 단색·한 줄 (2026-10-27 v2 테스트본 — 운영 미반영)
- 3열×2행 배치·버튼 순서·높이(72px)·간격(8px)·둥근 모서리(8px)·링크·전화 아이콘·tel: 연결은 9-15 그대로.
- 그라데이션·입체 그림자·상담 안내 하단 파란 선(9-5·9-10)을 제거하고 단색 배경만 쓴다.
파랑(#2f46d6, 흰 글자): 2번 척추관협착증 + 줄기세포 · 4번 뇌·신경계 + 줄기세포 · 6번 전화번호
연회색(#f2f3f6, 기존 글자색): 1번 병원소개 · 3번 정맥 + 동맥 줄기세포 · 5번 상담 안내
- 모든 문구는 한 줄(줄바꿈 금지). 버튼 폭(칸 폭)에 맞춰 글자 크기를 자동 조정한다 — 칸을 컨테이너(cqw)로 삼아
가장 긴 문구("척추관협착증 + 줄기세포")가 칸 안에 들어가는 크기를 5개 문구 공통으로 쓰고,
전화번호(1px 당 7.45px 폭)는 별도로 맞춘다. cqw 미지원 브라우저용 고정값을 먼저 둔다.
- v3(가독성): 자간 -0.045em · 단어 간격 -0.03em 으로 가장 긴 문구의 1px 당 필요 폭을 9.37px → 9.13px 로 줄여
같은 칸에서 글자 크기를 키웠다(390px: 10.96px → 11.19px). 단어 사이가 붙어 읽히지 않도록 단어 간격은 거의 줄이지 않았다.
구조상 한계: 12글자 문구를 약 106~109px 칸에 한 줄로 넣어야 해 이보다 크게 하려면 자간·단어 간격을 더 좁혀야 하므로 여기까지만 키웠다.
- 눌림·호버: 입체 이동(translate)과 그림자는 없애고 밝기 변화만 남긴다. 키보드 포커스 윤곽선은 기존 그대로.
========================================================================== */
body.medicell .m15 .mobile-quick-grid__list > li {
container-type: inline-size;
}
body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item {
background-image: none;
box-shadow: none;
transform: none;
white-space: nowrap;
padding: .375rem 2px;
letter-spacing: -.045em;
word-spacing: -.03em;
font-size: 11px;
font-size: calc((100cqw - 5px) / 9.27);
}
body.medicell .m15 .mobile-quick-grid__item .qg-l {
display: contents;
white-space: nowrap;
}
/* 색: 위치별 단색 */
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(2n) > a.mobile-quick-grid__item {
background-color: var(--m-blue);
border-color: var(--m-blue);
color: #fff;
}
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(2n+1) > a.mobile-quick-grid__item {
background-color: #f2f3f6;
border-color: var(--m-line);
color: var(--m-ink);
}
/* 전화번호: 아이콘 위·번호 아래 한 줄, 칸 폭에 맞춘 크기 */
body.medicell .m15 .mobile-quick-grid__item--tel span {
font-size: 13px;
font-size: calc((100cqw - 4px) / 7.62);
}
/* 눌림·호버: 그림자·이동 없이 밝기만 */
@media (hover: hover) and (pointer: fine) {
body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item:hover {
transform: none;
box-shadow: none;
filter: brightness(.95);
}
}
body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item:active {
transform: none;
box-shadow: none;
filter: brightness(.9);
}
/* ==========================================================================
9-17. 전화번호 버튼 — 다른 5개 버튼과 같은 글씨 + 아이콘·번호 가로 한 줄 (2026-10-27 v5 테스트본 — 운영 미반영)
- 글씨 크기·굵기·자간은 다른 버튼과 동일(버튼 공통 값을 상속). 아이콘 크기는 글씨 크기 기준(1.25em), 아이콘–번호 간격 4px.
- 아이콘+번호 묶음을 버튼 가로·세로 중앙에 정렬. 3열×2행·높이 60px·간격 8px·파랑 단색·`tel:` 연결·나머지 5개 버튼은 9-15·9-16 그대로.
- 9-15·9-16 의 전화 버튼 규칙(세로 배치 column, 번호 전용 크기)을 이 구역이 덮어쓴다(선택자 우선순위가 더 높음).
========================================================================== */
body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel {
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4px;
font-weight: 700;
}
body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel span {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
word-spacing: inherit;
line-height: inherit;
white-space: nowrap;
}
body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item--tel svg {
width: 1.25em;
height: 1.25em;
flex: 0 0 auto;
}
/* ==========================================================================
9-27. 상단 빠른 메뉴 미세 개선 (2026-10-27 v7 테스트본 — 운영 미반영)
- 버튼 안 좌우 여백 최소 6px 확보: 가장 긴 문구("척추관협착증 + 줄기세포", 글씨 1px 당 폭 9.38px)가 칸 폭에서 6px×2 를 뺀 안에 들어가는
최대 크기를 5개 문구·전화번호 공통 글씨 크기로 쓴다(짧은 문구도 같은 크기). 크기 = (칸 폭 − 12px) / 9.38. (360px 10.09 · 390px 10.30 · 430px 11.73)
- 정맥 + 동맥 줄기세포 · 뇌·신경계 + 줄기세포: 칸에 여유가 생긴 만큼 자간·단어 간격을 풀어 글자가 덜 붙게 한다(크기는 공통 값 그대로).
- 전화번호: 9-17 대로 아이콘+번호 가로 한 줄·다른 버튼과 같은 글씨. 배치·높이 60px·간격 8px·색·링크·tel: 은 그대로.
========================================================================== */
body.medicell .m15 .mobile-quick-grid__list > li > a.mobile-quick-grid__item {
font-size: 10px;
font-size: calc((100cqw - 12px) / 9.38);
}
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(3) > a.mobile-quick-grid__item,
body.medicell .m15 .mobile-quick-grid__list > li:nth-child(4) > a.mobile-quick-grid__item {
letter-spacing: -.01em;
word-spacing: 0;
}
/* ==========================================================================
9-28. 상단 빠른 메뉴 버튼 높이 60px → 52px (2026-10-27 v8 테스트본 — 운영 미반영)
- 6개 버튼 높이만 52px 로 동일하게 줄인다(글씨·전화 아이콘은 기존대로 가운데 정렬). 3×2·순서·간격 8px·단색·글씨 크기·한 줄·전화 한 줄은 v7 그대로.
- 버튼 아래 여백(그리드 padding-bottom)은 그대로라 버튼 아래~'28년간' 간격은 v7 과 같은 36px 이고, 그 아래 섹션은 위로 16px 당겨진다.
========================================================================== */
body.medicell .m15 .mobile-quick-grid__item,
body.medicell .m15 .mobile-quick-grid__item--tel {
min-height: 3.25rem; /* 52px */
}
/* ==========================================================================
9-29. 히어로 설명 3문구 — 글씨·줄 간격·문단 간격 축소 (2026-10-27 v9 비교 시안 — 운영 미반영)
- 글씨 18px → 16px(−11%), 굵기 600·자간·색은 그대로. 줄 간격 1.6 → 1.5(28.8px → 24px), 문단 사이 16px → 10px.
- 단어(어절) 중간에서 끊기지 않게 keep-all, 줄 길이가 고르게 나뉘도록 balance(마지막 줄에 한 단어만 남는 것 방지).
- 문구·순서·메인 타이틀·빠른 메뉴 6개 버튼·로고·하단 상담 버튼은 건드리지 않는다.
========================================================================== */
body.medicell .m15 .hero.hero .hero__rolling-primary {
font-size: 16px !important;
line-height: 1.5 !important;
word-break: keep-all;
text-wrap: balance;
}
body.medicell .m15 .hero.hero .hero__points {
gap: 10px !important;
}
/* ==========================================================================
9-30. 히어로 설명 3문구 — 각 문구 한 줄 (2026-10-27 v10 테스트본 — 운영 미반영)
- 가장 긴 2번 문구("+ 혈관 접근의 난이도가 다릅니다. 메디셀은 동맥까지 시행합니다.", 글씨 1px 당 폭 24.85px)가 칸(화면 폭 − 좌우 24px×2)에
한 줄로 들어가는 크기를 3문구 공통으로 쓴다. 16px 로는 2·3번 문구가 한 줄에 들어가지 않아(390px 기준 2번 최대 13.76px) 크기가 줄어든다.
- 문단 사이 간격은 v8 값 16px, 굵기 600·색·자간·문구·순서 그대로.
========================================================================== */
body.medicell .m15 .hero.hero .hero__rolling-primary {
font-size: 12px !important;
font-size: calc((100vw - 48px) / 24.95) !important;
white-space: nowrap;
text-wrap: nowrap;
}
body.medicell .m15 .hero.hero .hero__points {
gap: 16px !important;
}
/* ==========================================================================
9-31. 히어로 설명 3문구 — 모바일 본문 글씨 기준으로 통일 (2026-10-27 v11 테스트본 — 운영 미반영)
- 기준: 모바일 본문 18px(특화 진료·인증 설명 등 가장 많이 쓰는 값) · 강조 문장 18px/600(WHY 보조 문구 등). 3문구 모두 18px/600, 줄 간격 1.6, 문단 간격 16px.
- 18px 에서는 문구가 한 줄에 들어가지 않아(한 줄 최대 크기: 390px 기준 13.7px) 어절 단위 두 줄(keep-all + balance)로 표시한다. 9-30(한 줄 강제)을 덮는다.
========================================================================== */
body.medicell .m15 .hero.hero .hero__rolling-primary {
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
white-space: normal;
word-break: keep-all;
text-wrap: balance;
}
body.medicell .m15 .hero.hero .hero__points {
gap: 16px !important;
}
/* ==========================================================================
9-32. 히어로 설명 3문구 — 자동 줄바꿈으로 되돌림 (2026-10-27 v12 테스트본 — 운영 미반영)
- 줄바꿈 위치를 고정하던 장치(어절 묶음 , text-wrap: balance, nowrap)를 이 문구에서 모두 걷어내고
화면 너비에 따라 브라우저가 자동으로 줄을 나눈다(white-space: normal). 글씨 18px/600·색·줄 간격 1.6·문단 간격 16px 은 v11 그대로.
- 어절 중간에서 끊기지 않도록 word-break: keep-all(공백에서만 줄바꿈), 마지막 줄에 짧은 단어만 남지 않도록 text-wrap: pretty. 글씨 축소·말줄임 없음.
========================================================================== */
body.medicell .m15 .hero.hero .hero__rolling-primary {
white-space: normal;
word-break: keep-all;
overflow-wrap: normal;
text-wrap: pretty;
text-overflow: clip;
}
body.medicell .m15 .hero.hero .hero__rolling-primary .hero-u {
display: inline;
}
/* ==========================================================================
9-33. 터치 영역 보정 (2026-10-27 v13 — 운영 미반영)
- 모바일에서 44×44px 에 못 미친 조작 요소의 눈에 보이는 크기·간격은 그대로 두고, 투명 ::after 로 누를 수 있는 영역만 넓힌다.
서브 메뉴 링크(29px 너비) · 시설 갤러리 필터 ALL(31px) · 갤러리 좌우 화살표(36px) · 갤러리 점(8~10px, 높이 44px / 너비는 점 간격까지) · 개인정보 처리방침 연락처 전화 링크(높이 19px).
- 갤러리 점은 점 간격(약 15px)보다 넓히면 옆 점과 겹치므로 높이만 44px 로 하고, 이전·다음 화살표(44px)가 주 조작 요소다.
========================================================================== */
@media (max-width: 47.99rem) {
.sub-nav__link,
.facility-gallery__filter,
.fg-dot,
td > a[href^="tel:"] {
position: relative;
}
.sub-nav__link::after,
.facility-gallery__filter::after,
.fg-nav::after,
.fg-dot::after,
td > a[href^="tel:"]::after {
content: "";
position: absolute;
}
.sub-nav__link::after { inset: 0 -8px; } /* 29 → 45px 너비 */
.facility-gallery__filter::after { inset: 0 -7px; } /* 31 → 45px 너비 */
.fg-nav::after { inset: -4px; } /* 36 → 44px */
.fg-dot::after { inset: -18px -3px; } /* 8px 점 → 높이 44px · 너비 14px(점 간격) */
td > a[href^="tel:"]::after { inset: -13px -4px; } /* 높이 19 → 45px */
}