@charset "UTF-8"; /* ========================================================================== 장편한외과의원 — 디자인 시스템 Claude Design 원본(1920px 아트보드)의 토큰을 그대로 계승하고, 반응형 · 스크롤 인터랙션 · 사진 컴포넌트를 확장했습니다. ========================================================================== */ /* --- Fonts ---------------------------------------------------------------- Pretendard(본문) · Noto Serif KR(제목)은 각 페이지 의 로 불러옵니다. (tools/build.py 의 HEAD 참고 — @import는 로딩이 한 단계 느리고 순서 제약이 있어 쓰지 않습니다) -------------------------------------------------------------------------- */ /* ========================================================================== 1. 토큰 ========================================================================== */ :root { /* 원본 팔레트 */ --navy-900: #142c3e; --navy-800: #1a2b3c; --navy-700: #012c4e; --navy-600: #1c3767; --navy-glass: rgba(23, 37, 93, .92); --brown-700: #7e5a27; --gold-700: #946219; --gold-600: #8f682d; --gold-500: #9d7f52; --gold-400: #c5a371; --gold-300: #e5a35c; --gold-200: #f2d7b4; --gold-100: #e9d9b2; --cream: #f9f7f2; --ink: #464646; --ink-soft: #656565; --ink-mute: #878787; --gray-50: #f7f7f7; --gray-75: #f7f7f7; /* 패널 회색 — gray-50과 동일하게 통일 */ --gray-100: #f6f6f6; --gray-200: #e9e9e9; --white: #fff; --line: rgba(101, 101, 101, .15); --line-light: rgba(249, 247, 242, .18); --line-navy: rgba(26, 43, 60, .12); /* 레이아웃 */ --content-max: 1560px; /* 시안(1920px 아트보드) 기준: 좌우 112px 여백. 화면이 넓으면 콘텐츠도 함께 넓어진다 */ --gutter: clamp(24px, 9.4vw, 180px); /* 좌우 여백 — 1920px 화면에서 180px */ --header-h: clamp(64px, 5.2vw, 100px); /* 타이포 (1920px 아트보드 기준을 vw로 환산) */ --fs-hero: clamp(30px, 3.02vw, 58px); --fs-h2: clamp(26px, 2.6vw, 50px); --fs-h3: clamp(20px, 1.67vw, 32px); --fs-h4: clamp(18px, 1.56vw, 30px); --fs-lg: clamp(16px, 1.35vw, 26px); --fs-md: clamp(15px, 1.25vw, 24px); --fs-base: clamp(14px, 1.15vw, 22px); --fs-sm: clamp(13px, 1.04vw, 20px); --fs-xs: clamp(12px, .94vw, 18px); --fs-stat: clamp(38px, 3.33vw, 64px); --lh-hero: 1.55; --lh-h2: 1.6; --lh-body: 1.85; /* 모양 */ --r-lg: 20px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px; --shadow-card: 0 2px 10px rgba(20, 44, 62, .05); --shadow-hover: 0 18px 44px rgba(20, 44, 62, .16); --shadow-float: 0 4px 4px rgba(102, 102, 102, .25); --shadow-drop: 0 12px 32px rgba(20, 44, 62, .16); /* 리듬 */ --sec-pt: clamp(76px, 8.4vw, 160px); --sec-pb: clamp(88px, 10vw, 190px); --gap-block: clamp(44px, 6vw, 116px); --ease: cubic-bezier(.22, .68, .32, 1); } /* ========================================================================== 2. 리셋 · 기본 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* 로딩이 끝난 뒤(.is-ready)에만 부드럽게 — 진입 시 중간에서 멈추는 문제 방지 */ scroll-padding-top: calc(var(--header-h) + 16px); } html.is-ready { scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--ink); font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: -.03em; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--navy-800); text-decoration: none; transition: color .25s var(--ease); } a:hover { color: var(--gold-700); } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } /* 핵심가치(정확·정직·정성) 강조 */ .kv { font-weight: inherit; color: var(--gold-600); } .on-dark .kv { color: var(--gold-400); } .serif { font-family: "Noto Serif KR", "RIDIBatang", "Nanum Myeongjo", serif; font-weight: 400; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } ::selection { background: var(--gold-200); color: var(--navy-900); } /* 레이아웃 유틸 */ /* hidden 속성이 항상 이기도록 (책 소개 필터 등) */ [hidden] { display: none !important; } .container { width: min(100% - var(--gutter) * 2, var(--content-max)); margin-inline: auto; } .section { position: relative; padding-block: var(--sec-pt) 0; } .section--pb { padding-bottom: var(--sec-pb); } .section--tight { position: relative; padding-block: clamp(60px, 6.4vw, 122px); } .bleed { width: 100%; } /* ========================================================================== 3. 스크롤 리빌 · 모션 ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); } [data-reveal="fade"] { transform: none; } [data-reveal="left"] { transform: translateX(-34px); } [data-reveal="right"] { transform: translateX(34px); } [data-reveal="zoom"] { transform: scale(.94); } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html, html.is-ready { scroll-behavior: auto; } [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__media { animation: none !important; } } /* ========================================================================== 4. 헤더 · 내비게이션 ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--header-h); background: var(--white); border-bottom: 1px solid var(--line-navy); transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), transform .4s var(--ease); } .site-header.is-scrolled { box-shadow: 0 6px 24px rgba(20, 44, 62, .08); } .site-header.is-hidden { transform: translateY(-100%); } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 40px); } .brand { flex-shrink: 0; display: block; } .brand img { height: clamp(46px, 4.1vw, 79px); width: auto; } .gnb { display: flex; gap: clamp(4px, .6vw, 12px); align-items: center; } .gnb__item { position: relative; } .gnb__link { display: inline-block; position: relative; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; padding: 6px clamp(8px, .95vw, 16px); color: var(--navy-800); transition: opacity .25s var(--ease); } .gnb__item:hover .gnb__link { opacity: .55; } .gnb__link.is-active { color: var(--gold-700); font-weight: 600; } .gnb__item:hover .gnb__link.is-active { opacity: 1; } .gnb__drop { position: absolute; top: 100%; left: 50%; translate: -50% 0; padding-top: 18px; min-width: 232px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; } .gnb__item:hover .gnb__drop, .gnb__item:focus-within .gnb__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .gnb__drop-inner { background: rgba(255, 255, 255, .98); border-radius: 14px; box-shadow: var(--shadow-drop); padding: 12px 0; display: flex; flex-direction: column; border: 1px solid rgba(20, 44, 62, .06); } .gnb__drop-inner a { padding: 11px 22px; font-size: var(--fs-sm); font-weight: 400; color: var(--ink); white-space: nowrap; text-align: left; transition: background .2s var(--ease), opacity .2s var(--ease); } .gnb__drop-inner a:hover { background: var(--gray-50); color: var(--gold-700); } .btn-book { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: clamp(36px, 2.4vw, 46px); padding-inline: clamp(14px, 1.2vw, 22px); border-radius: var(--r-pill); background: var(--navy-800); color: var(--cream); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .btn-book:hover { background: var(--gold-700); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(148, 98, 25, .3); } /* 모바일 토글 */ .nav-toggle { display: none; width: 44px; height: 44px; position: relative; flex-shrink: 0; } .nav-toggle span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--navy-800); transition: .35s var(--ease); } .nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 28px; } body.nav-open .nav-toggle span:nth-child(1) { top: 22px; rotate: 45deg; } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { top: 22px; rotate: -45deg; } /* 햄버거 메뉴 안의 예약 버튼 — 데스크톱에서는 숨김 */ .gnb__book { display: none; } @media (max-width: 1180px) { .nav-toggle { display: block; } .header-inner > .btn-book { display: none; } .gnb { position: fixed; inset: var(--header-h) 0 0 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); padding: 12px var(--gutter) 0; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } body.nav-open .gnb { opacity: 1; visibility: visible; transform: none; } .gnb__item { border-bottom: 1px solid var(--line); } .gnb__link { display: block; padding: 18px 4px; font-size: 17px; } .gnb__link::after { display: none; } .gnb__drop { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 12px; translate: none; min-width: 0; } .gnb__drop-inner { box-shadow: none; border: 0; background: none; padding: 0; } .gnb__drop-inner a { padding: 9px 14px; font-size: 15px; color: var(--ink-soft); } /* 메뉴가 길어도 예약 버튼은 패널 하단에 붙어 있다 */ .gnb__book { display: block; position: sticky; bottom: 0; margin-top: auto; padding: 20px 0 calc(24px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), var(--white) 20px); } .gnb__book .btn-book { display: flex; width: 100%; height: 52px; font-size: 16px; } .gnb__book .btn-book:hover { transform: none; box-shadow: none; } } /* ========================================================================== 5. 히어로 ========================================================================== */ .hero { position: relative; overflow: hidden; min-height: clamp(460px, 46.7vw, 897px); display: grid; place-items: center; isolation: isolate; } .hero__media { position: absolute; inset: -2%; background-size: cover; background-position: center; animation: kenburns 24s ease-in-out infinite alternate; z-index: -2; } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } } .hero__wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(250, 245, 239, .34) 22%, rgba(255, 247, 237, .5) 100%), linear-gradient(rgba(255, 255, 255, .18) 0%, rgba(244, 241, 233, .18) 100%); } .hero__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.25vw, 24px); text-align: center; padding: calc(var(--header-h) + 4vw) var(--gutter) 4vw; } .hero__mark { width: clamp(40px, 3.7vw, 71px); aspect-ratio: 221 / 227; filter: opacity(.5); background: url("../img/logo-mark.png") center / contain no-repeat; } .hero__title { font-size: var(--fs-hero); line-height: var(--lh-hero); color: var(--navy-700); white-space: pre-line; } @media (max-width: 900px) { .hero__title { font-weight: 500; } } .hero__title em { display: block; font-style: normal; color: var(--gold-600); } /* 스크롤 큐 */ .hero__cue { position: absolute; left: 50%; bottom: clamp(18px, 2.2vw, 40px); translate: -50% 0; width: 26px; height: 42px; border: 1.5px solid rgba(1, 44, 78, .38); border-radius: 999px; z-index: 2; } .hero__cue::after { content: ""; position: absolute; left: 50%; top: 9px; translate: -50% 0; width: 3px; height: 8px; border-radius: 3px; background: var(--gold-600); animation: cue 1.9s var(--ease) infinite; } @keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 70% { opacity: 1; transform: translateY(14px); } 100% { opacity: 0; transform: translateY(16px); } } /* 서브페이지 히어로 */ .page-hero { position: relative; overflow: hidden; min-height: clamp(300px, 33vw, 620px); display: grid; align-items: center; isolation: isolate; } .page-hero__media { position: absolute; inset: -2%; z-index: -2; background-size: cover; background-position: center; animation: kenburns 26s ease-in-out infinite alternate; } .page-hero__wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(250, 245, 239, .6) 8.65%, rgba(255, 247, 237, .92) 100%), linear-gradient(rgba(255, 255, 255, .3) 0%, rgba(244, 241, 233, .3) 100%); } .page-hero__inner { padding-top: var(--header-h); } .page-hero__title { font-size: calc(var(--fs-hero) * .82); line-height: 1.58; color: var(--navy-800); white-space: pre-line; } .page-hero__title em { font-style: normal; color: var(--gold-600); display: block; } .page-hero__crumb { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--gold-700); letter-spacing: .12em; margin-bottom: clamp(10px, 1vw, 18px); } .page-hero__crumb span { opacity: .55; } /* ========================================================================== 6. 섹션 헤더 ========================================================================== */ .sec-head { display: flex; flex-direction: column; gap: 16px; padding-bottom: 12px; } .sec-head--center { align-items: center; text-align: center; } .sec-head__eyebrow { /* 한글 소타이틀이라 영문 때보다 자간을 좁힌다 */ font-size: var(--fs-sm); line-height: 1.8; letter-spacing: .16em; font-weight: 500; color: var(--gold-400); text-transform: none; } .sec-head__rule { height: 1px; width: 100%; border: 0; margin: 0; background: var(--line); position: relative; overflow: hidden; } .sec-head__rule::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-400), transparent 62%); transform: scaleX(0); transform-origin: left; transition: transform 1.15s var(--ease) .15s; } .is-in .sec-head__rule::after, .sec-head.is-in .sec-head__rule::after { transform: scaleX(1); } .sec-head__title { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--ink); white-space: pre-line; } .sec-head__lead { font-size: var(--fs-md); color: var(--ink-soft); line-height: var(--lh-body); max-width: 78ch; white-space: pre-line; } /* 어두운 배경용 */ .on-dark .sec-head__rule { background: var(--line-light); } .on-dark .sec-head__title { color: var(--cream); } .on-dark .sec-head__lead { color: rgba(249, 247, 242, .72); } /* 소제목 */ .sub-head { font-size: var(--fs-h3); line-height: 1.75; color: var(--gold-700); } .on-dark .sub-head { color: var(--gold-200); } /* ========================================================================== 7. 버튼 · 칩 · 필 ========================================================================== */ .pill-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(28px, 3.6vw, 70px); } .pill { display: inline-flex; align-items: center; height: clamp(44px, 3.2vw, 62px); padding-inline: clamp(20px, 1.9vw, 36px); border-radius: var(--r-pill); background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; transition: .3s var(--ease); } .pill:hover { box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px rgba(20, 44, 62, .1); transform: translateY(-2px); } .pill.is-active { background: var(--navy-900); color: var(--cream); box-shadow: none; } .pill.is-active:hover { background: var(--navy-900); color: var(--cream); } /* 모바일: 줄바꿈되는 알약 대신 가로 스크롤 밑줄 탭 */ @media (max-width: 768px) { /* 하위 메뉴 탭 (책 소개의 분류 필터는 제외 — 아래에서 작은 칩으로) */ .pill-nav:not([data-filter-group]) { flex-wrap: nowrap; justify-content: flex-start; gap: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: calc(var(--gutter) - 6px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); } .pill-nav:not([data-filter-group])::-webkit-scrollbar { display: none; } .pill-nav:not([data-filter-group]) .pill { flex: 1 0 auto; justify-content: center; position: relative; height: 50px; padding-inline: 14px; background: none; box-shadow: none; border-radius: 0; font-size: 15px; font-weight: 500; color: var(--ink-soft); } .pill-nav:not([data-filter-group]) .pill:hover { transform: none; box-shadow: none; } .pill-nav:not([data-filter-group]) .pill.is-active { background: none; color: var(--navy-900); font-weight: 600; } .pill-nav:not([data-filter-group]) .pill.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy-900); } /* 넘치는 쪽 가장자리를 흐리게 해서 더 있다는 걸 알려준다 */ .pill-nav.can-right { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } .pill-nav.can-left { mask-image: linear-gradient(90deg, transparent, #000 40px); } .pill-nav.can-left.can-right { mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); } /* 분류 필터: 탭과 구분되도록 작은 칩 */ .pill-nav[data-filter-group] { gap: 8px; } .pill-nav[data-filter-group] .pill { height: 38px; padding-inline: 18px; font-size: 14px; } .pill-nav[data-filter-group] .pill:hover { transform: none; } } .btn-line { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--gold-700); font-weight: 500; } /* 손가락으로 누를 영역 확보 */ @media (max-width: 900px) { .btn-line { min-height: 44px; } .spec-card__more { min-height: 40px; align-items: center; } } .btn-line svg { transition: transform .3s var(--ease); } .btn-line:hover svg { transform: translateX(5px); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: clamp(132px, 8.6vw, 168px); height: clamp(42px, 3.1vw, 56px); padding-inline: clamp(16px, 1.4vw, 26px); border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px #b0b0b0; font-size: var(--fs-sm); font-weight: 500; color: var(--navy-800); transition: .32s var(--ease); } .chip { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(64px, 5.1vw, 98px); height: clamp(34px, 2.3vw, 44px); padding: 4px 12px; border-radius: var(--r-pill); background: var(--gold-200); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; text-align: center; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* ========================================================================== 8. 카드 · 그리드 ========================================================================== */ .grid { display: grid; gap: clamp(14px, 1.4vw, 22px); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1100px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .grid--5 { grid-template-columns: repeat(2, 1fr); } } /* 진료과목 카드 */ .spec-card { position: relative; overflow: hidden; min-height: clamp(180px, 14.8vw, 284px); border-radius: var(--r-lg); background: var(--gray-50); display: flex; align-items: center; gap: clamp(14px, 1.25vw, 24px); padding: clamp(20px, 1.7vw, 32px); transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); } .spec-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); background: var(--white); } .icon-badge { position: relative; flex-shrink: 0; width: clamp(84px, 7.8vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--gold-300); display: grid; place-items: center; transition: transform .5s var(--ease), background .4s var(--ease); } .icon-badge svg { width: 58%; height: 58%; } .icon-badge img { width: 72%; height: 72%; object-fit: contain; /* 아이콘은 항상 흰색 단색 — 호버 때 색이 튀지 않게 */ filter: brightness(0) invert(1); transition: transform .4s var(--ease); } .spec-card:hover .icon-badge img { transform: scale(1.04); } .spec-card:hover .icon-badge { transform: scale(1.06); background: var(--gold-700); } .spec-card__body { position: relative; display: flex; flex-direction: column; min-width: 0; } .spec-card__title { font-size: var(--fs-h3); line-height: 1.75; color: var(--ink); } .spec-card__sub { font-size: var(--fs-lg); line-height: 1.55; color: var(--ink); letter-spacing: -.05em; } .spec-card__more { margin-top: 10px; font-size: var(--fs-sm); font-weight: 500; color: var(--gold-700); display: inline-flex; align-items: center; gap: 6px; } .spec-card:hover .spec-card__more svg { transform: translateX(4px); } .spec-card__more svg { transition: transform .3s var(--ease); } /* 강점 카드 (사진 + 오버레이) */ .feat-card { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(240px, 19.8vw, 380px); background: #d9d9d9; display: flex; align-items: flex-end; isolation: isolate; } .feat-card__img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 1.1s var(--ease); } .feat-card__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(16, 34, 48, .84) 0%, rgba(18, 38, 54, .42) 46%, rgba(30, 52, 70, .06) 100%); transition: opacity .5s var(--ease); } .feat-card__body { padding: clamp(18px, 1.7vw, 32px); display: flex; flex-direction: column; gap: 4px; } .feat-card__title { font-size: var(--fs-h4); line-height: 1.48; color: var(--white); text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 12px rgba(0, 0, 0, .35); } .feat-card__desc { font-size: var(--fs-lg); font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .3); } /* 브랜드 마무리 카드 */ .brand-card { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 1.7vw, 32px); min-height: clamp(240px, 19.8vw, 380px); border-radius: var(--r-lg); background: transparent; } .brand-card__mark { width: clamp(74px, 7vw, 132px); aspect-ratio: 221 / 227; opacity: .45; flex-shrink: 0; background: url("../img/logo-mark.png") center / contain no-repeat; } .brand-card__text { font-size: calc(var(--fs-h4) * 1.3); line-height: 1.5; color: var(--ink-mute); white-space: pre-line; } .brand-card__text em { font-style: normal; color: var(--gold-600); display: block; } /* 일반 정보 카드 */ /* 진료시간 — 요일 그룹을 한 행에, 좁아지면 자연스럽게 줄바꿈 */ .hours-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25em 1.5em; } .hours-row span { white-space: nowrap; } .info-card { border-radius: var(--r-lg); background: var(--gray-75); padding: clamp(24px, 2.3vw, 40px); } .info-card .info-card__label, .info-card__label { font-size: var(--fs-lg); font-weight: 600; line-height: 1.55; color: var(--navy-600); letter-spacing: -.05em; } .info-card > p, .info-card > li { font-size: var(--fs-md); font-weight: 400; line-height: 1.9; letter-spacing: -.05em; } .info-card strong { font-weight: 600; } /* ========================================================================== 9. 번호 카드 · 타임라인 · 아코디언 ========================================================================== */ .num-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.1vw, 18px); } @media (max-width: 900px) { .num-grid { grid-template-columns: 1fr; } } .num-card { position: relative; display: flex; gap: clamp(8px, .7vw, 12px); align-items: center; padding: clamp(18px, 1.6vw, 28px) clamp(20px, 1.9vw, 32px); border-radius: var(--r-md); background: var(--gray-50); } .num-card__no { flex-shrink: 0; min-width: 1.9em; font-size: var(--fs-md); font-weight: 400; line-height: calc(var(--fs-lg) * 1.7); /* 본문 첫 줄과 같은 라인박스 */ color: var(--ink-mute); } .num-card__no svg { width: 1.15em; height: 1.15em; vertical-align: -.25em; stroke: var(--ink-mute); opacity: .8; } .num-card__text { font-family: inherit; font-weight: 300; font-size: var(--fs-lg); line-height: 1.7; letter-spacing: -.05em; color: var(--ink); white-space: pre-line; } .on-dark .num-card { background: rgba(249, 247, 242, .06); } .on-dark .num-card__text { color: rgba(249, 247, 242, .9); } .on-dark .num-card__no { color: rgba(249, 247, 242, .5); } /* 타임라인 */ .timeline { position: relative; padding-left: clamp(22px, 2.1vw, 40px); } .timeline::before { content: ""; position: absolute; left: clamp(6px, .55vw, 10px); top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--gold-300), rgba(229, 163, 92, .12)); } .timeline__item { position: relative; padding-block: clamp(10px, .9vw, 16px); } .timeline__item::before { content: ""; position: absolute; left: calc(clamp(22px, 2.1vw, 40px) * -1 + clamp(2px, .28vw, 6px)); top: clamp(20px, 1.7vw, 30px); width: 9px; height: 9px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px var(--gold-300); } .timeline__text { display: flex; gap: clamp(10px, .9vw, 16px); font-size: var(--fs-lg); line-height: 1.7; letter-spacing: -.05em; color: var(--ink); } .timeline__year { flex-shrink: 0; margin: 0; font-family: "Noto Serif KR", serif; color: var(--gold-700); font-size: var(--fs-md); } /* 대외 및 학회활동: 연도를 문장 앞에 붙이는 기존 형태 (홈은 연도 열 정렬 유지) */ .timeline--inline .timeline__text { display: block; } .timeline--inline .timeline__year { display: inline-block; margin-right: 10px; } @media (max-width: 640px) { .timeline--inline .timeline__year { display: block; margin: 0 0 2px; } } /* 아코디언 */ .acc { border-top: 1px solid var(--line); } .acc__item { border-bottom: 1px solid var(--line); } .acc__head { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(16px, 1.7vw, 32px); text-align: left; padding: clamp(20px, 1.9vw, 34px) 0; transition: color .3s var(--ease); } .acc__head:hover { color: var(--gold-700); } .acc__q { font-size: var(--fs-lg); line-height: 1.65; letter-spacing: -.04em; max-width: 92%; } .acc__q .q-mark { font-family: "Noto Serif KR", serif; color: var(--gold-400); margin-right: 12px; } .acc__toggle { position: relative; flex-shrink: 0; width: clamp(34px, 2.5vw, 48px); height: clamp(34px, 2.5vw, 48px); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: .35s var(--ease); } .acc__toggle::before, .acc__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: var(--gold-700); transition: .35s var(--ease); } .acc__toggle::before { width: 40%; height: 1.5px; } .acc__toggle::after { width: 1.5px; height: 40%; } .acc__item.is-open .acc__toggle { background: var(--gold-700); box-shadow: none; } .acc__item.is-open .acc__toggle::before { background: var(--white); } .acc__item.is-open .acc__toggle::after { opacity: 0; rotate: 90deg; } .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .acc__item.is-open .acc__panel { grid-template-rows: 1fr; } .acc__panel > div { overflow: hidden; } .acc__a { padding: 0 clamp(48px, 4vw, 76px) clamp(22px, 2vw, 36px) clamp(22px, 2.2vw, 42px); font-size: var(--fs-md); font-weight: 400; line-height: 1.9; letter-spacing: -.04em; color: var(--ink-soft); white-space: pre-line; } /* ========================================================================== 10. 갤러리 · 라이트박스 · 마퀴 ========================================================================== */ .gallery { display: grid; gap: clamp(10px, 1vw, 18px); } .gallery--mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(110px, 9.4vw, 180px); } .gallery--mosaic .g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .gallery--mosaic .g-item:nth-child(6) { grid-column: span 2; grid-row: span 2; } @media (max-width: 900px) { .gallery--mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 30vw; } .gallery--mosaic .g-item:nth-child(1), .gallery--mosaic .g-item:nth-child(6) { grid-column: span 2; grid-row: span 1; } } .gallery--2 { grid-template-columns: repeat(2, 1fr); } .gallery--3 { grid-template-columns: repeat(3, 1fr); } .gallery--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .gallery--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .gallery--3 { grid-template-columns: repeat(2, 1fr); } } .g-item { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--gray-200); cursor: zoom-in; display: block; aspect-ratio: 4 / 3; } .gallery--mosaic .g-item { aspect-ratio: auto; height: 100%; } .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s var(--ease); } .g-item:hover img { transform: scale(1.07); } .g-item__cap { position: absolute; inset: auto 0 0 0; padding: clamp(28px, 3vw, 48px) clamp(14px, 1.2vw, 22px) clamp(12px, 1vw, 18px); background: linear-gradient(0deg, rgba(20, 44, 62, .82), transparent); color: var(--white); font-size: var(--fs-xs); line-height: 1.5; letter-spacing: -.03em; transform: translateY(6px); opacity: .92; transition: .4s var(--ease); } .g-item:hover .g-item__cap { transform: none; opacity: 1; } .g-item__zoom { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: .35s var(--ease); } .g-item:hover .g-item__zoom { opacity: 1; transform: none; } /* 클릭해도 확대되지 않는 사진 — 커서·확대 효과 모두 없앤다 */ .g-item--static { cursor: default; } .g-item--static:hover img { transform: none; } .g-item--static:hover .g-item__cap { transform: translateY(6px); opacity: .92; } /* 라이트박스 */ .lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(10, 18, 26, .965); backdrop-filter: blur(6px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; padding: clamp(16px, 4vw, 64px); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__fig { max-width: min(1200px, 92vw); text-align: center; } .lightbox__img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: var(--r-sm); margin-inline: auto; transform: scale(.96); transition: transform .4s var(--ease); } .lightbox.is-open .lightbox__img { transform: none; } .lightbox__cap { margin-top: 18px; color: rgba(255, 255, 255, .82); font-size: var(--fs-sm); letter-spacing: -.03em; } .lightbox__count { color: var(--gold-200); font-size: var(--fs-xs); margin-top: 6px; } .lb-btn { position: absolute; top: 50%; translate: 0 -50%; width: clamp(42px, 3.4vw, 58px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; transition: .3s var(--ease); } .lb-btn:hover { background: rgba(255, 255, 255, .26); } .lb-prev { left: clamp(10px, 2vw, 34px); } .lb-next { right: clamp(10px, 2vw, 34px); } .lb-close { position: absolute; top: clamp(14px, 2vw, 30px); right: clamp(14px, 2vw, 30px); translate: none; } .lb-btn svg { stroke: #fff; } /* 사진 마퀴 */ .marquee { overflow: hidden; position: relative; } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 6vw, 130px); z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); } .marquee::after { right: 0; background: linear-gradient(270deg, var(--white), transparent); } .marquee__track { display: flex; gap: clamp(12px, 1.2vw, 22px); width: max-content; animation: marquee calc(46s * var(--mq-k, 1)) linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee__item { width: clamp(200px, 21vw, 380px); aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; background: var(--gray-200); } .marquee__item { cursor: default; } .marquee__item img { width: 100%; height: 100%; object-fit: cover; } /* '동작 줄이기'를 켠 기기에서 애니메이션이 아예 꺼져 슬라이드가 멈춰 보이던 문제 — 완전히 멈추는 대신 아주 느리게 흐르게 한다 */ @media (prefers-reduced-motion: reduce) { .marquee__track { animation-duration: calc(96s * var(--mq-k, 1)); } } /* ========================================================================== 11. 통계 · 인용 · 워터마크 ========================================================================== */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: transparent; } @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } .stat { background: transparent; padding: clamp(26px, 2.5vw, 48px) clamp(18px, 1.9vw, 36px); box-shadow: inset 1px 0 0 rgba(249, 247, 242, .16); display: flex; flex-direction: column; gap: clamp(12px, 1.15vw, 22px); } .stat:first-child { box-shadow: none; } @media (max-width: 900px) { /* 2열이 되면 가로 구분선도 넣어 네 칸이 또렷하게 나뉘도록 */ .stat { box-shadow: inset 1px 0 0 rgba(249, 247, 242, .16); } .stat:nth-child(odd) { box-shadow: none; } .stat:nth-child(n+3) { box-shadow: inset 1px 0 0 rgba(249, 247, 242, .16), inset 0 1px 0 rgba(249, 247, 242, .16); } .stat:nth-child(odd):nth-child(n+3) { box-shadow: inset 0 1px 0 rgba(249, 247, 242, .16); } } .stat svg { width: clamp(38px, 2.9vw, 56px); height: auto; } .stat__label { font-size: var(--fs-md); font-weight: 300; line-height: 1.42; color: rgba(249, 247, 242, .72); } .stat__value { display: flex; align-items: baseline; gap: 6px; } .stat__num { font-family: "Noto Serif KR", serif; font-size: var(--fs-stat); line-height: 1.12; color: var(--gold-200); } .stat__unit { font-size: var(--fs-lg); font-weight: 300; color: var(--gold-200); } .quote-block { position: relative; padding-left: clamp(30px, 3.2vw, 62px); } .quote-block::before { content: "“"; position: absolute; left: 0; top: -.16em; font-family: "Noto Serif KR", serif; font-size: clamp(48px, 5.2vw, 100px); color: var(--gold-400); opacity: .55; line-height: 1; } .watermark { position: absolute; pointer-events: none; opacity: .045; background: url("../img/logo-mark.png") center / contain no-repeat; } .watermark--r { right: 0; top: 6%; width: clamp(150px, 17vw, 330px); aspect-ratio: 221 / 227; } .watermark--l { left: 0; bottom: 4%; width: clamp(140px, 15vw, 290px); aspect-ratio: 221 / 227; } .watermark--c { left: 50%; top: 50%; translate: -50% -50%; width: clamp(180px, 24vw, 460px); aspect-ratio: 221 / 227; opacity: .05; } /* ========================================================================== 12. 섹션 배경 변형 ========================================================================== */ .band { position: relative; overflow: hidden; } .band--navy { background: var(--navy-900); } .band--brown { background: var(--brown-700); } .band--gray { background: var(--gray-100); } .band--cream { background: linear-gradient(180deg, #fdfbf7, #fff); } .band--photo { isolation: isolate; } .band--photo .band__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; } .band--photo .band__scrim { position: absolute; inset: 0; z-index: -1; } /* 배경 사진을 흐리게 깔 때 (Record 등) */ .band__bg--blur { filter: blur(1.5px); transform: scale(1.04); opacity: 1; } .on-dark { color: var(--cream); } .on-dark a { color: var(--gold-200); } .on-dark a:hover { color: var(--white); } /* 흰 배경 버튼은 다크 밴드 안에서도 남색 텍스트 유지 */ .on-dark a.btn-solid, .on-dark a.btn-ghost, .on-dark a.btn-solid:hover, .on-dark a.btn-ghost:hover { color: var(--navy-800); } /* ========================================================================== 13. 원장 인사말 ========================================================================== */ .greeting { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: clamp(28px, 3.75vw, 72px); align-items: center; } @media (max-width: 900px) { .greeting { grid-template-columns: 1fr; } } .greeting__figure { display: flex; flex-direction: column; gap: 16px; align-items: center; } .greeting__photo { width: 100%; max-width: 268px; aspect-ratio: 268 / 335; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); } .greeting__photo img { width: 100%; height: 100%; object-fit: cover; } .greeting__caption { font-size: var(--fs-md); font-weight: 500; text-align: center; line-height: 1.7; letter-spacing: -.03em; color: #fff; white-space: pre-line; } .greeting__body { display: flex; flex-direction: column; gap: clamp(22px, 2.3vw, 44px); } .greeting__text { font-family: "Noto Serif KR", serif; font-weight: 400; font-size: var(--fs-lg); line-height: 1.8; letter-spacing: -.045em; color: var(--cream); white-space: pre-line; /* 장평 98% — 자폭만 아주 살짝 */ transform: scaleX(.98); transform-origin: left center; } /* 정확·정직·정성은 인사말 끝줄(서명)과 같은 색으로 */ .greeting__text .kv { color: var(--gold-100); } .greeting__sign { font-family: "Noto Serif KR", serif; font-size: var(--fs-md); line-height: 1.85; color: var(--gold-100); } /* ========================================================================== 14. 언론보도 · 카드형 링크 ========================================================================== */ .press-card { display: flex; flex-direction: column; gap: 16px; } /* 언론보도 목록 — 사진을 작게 두고 가로로 배치 */ .press-list { display: flex; flex-direction: column; } /* 홈에서는 2열 */ .press-list--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); } @media (max-width: 860px) { .press-list--2col { grid-template-columns: 1fr; } } .press-list--2col .press-row:nth-child(2) { border-top: 1px solid var(--line); } @media (max-width: 860px) { .press-list--2col .press-row:nth-child(2) { border-top: 0; } } .press-row { display: grid; grid-template-columns: clamp(120px, 13vw, 200px) 1fr; gap: clamp(16px, 2vw, 34px); align-items: center; padding: clamp(16px, 1.8vw, 28px) 0; border-bottom: 1px solid var(--line); } .press-row:first-child { border-top: 1px solid var(--line); } .press-row__thumb { overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--gray-200); } .press-row__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .8s var(--ease); } .press-row:hover .press-row__thumb img { transform: scale(1.06); } .press-row__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .press-row__title { font-size: var(--fs-lg); font-weight: 500; line-height: 1.55; letter-spacing: -.05em; color: var(--ink); text-wrap: pretty; transition: color .3s var(--ease); } .press-row:hover .press-row__title { color: var(--gold-700); } .press-row__meta { font-size: var(--fs-sm); color: var(--ink-mute); letter-spacing: -.03em; } @media (max-width: 560px) { .press-row { grid-template-columns: 96px 1fr; gap: 14px; } } .press-card__thumb { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 10; background: var(--gray-200); } .press-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform 1s var(--ease); } .press-card:hover .press-card__thumb img { transform: scale(1.06); } .press-card__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 44, 62, .3), transparent 55%); opacity: 0; transition: opacity .4s var(--ease); } .press-card:hover .press-card__thumb::after { opacity: 1; } .press-card__title { font-size: var(--fs-lg); font-weight: 500; line-height: 1.6; letter-spacing: -.05em; color: var(--ink); text-wrap: pretty; transition: color .3s var(--ease); } .press-card:hover .press-card__title { color: var(--gold-700); } .press-card__date { font-size: var(--fs-base); line-height: 1.4; color: var(--ink-soft); } /* 게시판 리스트 */ .board { border-top: 2px solid var(--navy-900); } .board__row { display: grid; grid-template-columns: clamp(60px, 6vw, 110px) 1fr auto; gap: clamp(12px, 1.6vw, 30px); align-items: center; padding: clamp(18px, 1.8vw, 32px) clamp(6px, .8vw, 14px); border-bottom: 1px solid var(--line); transition: background .3s var(--ease), padding-left .3s var(--ease); } a.board__row:hover { background: var(--gray-50); padding-left: clamp(12px, 1.5vw, 26px); } .board__no { font-family: "Noto Serif KR", serif; color: var(--gold-400); font-size: var(--fs-md); } .board__title { font-size: var(--fs-lg); letter-spacing: -.04em; color: var(--ink); } .board__date { font-size: var(--fs-base); color: var(--ink-soft); white-space: nowrap; } @media (max-width: 640px) { .board__row { grid-template-columns: 1fr auto; } .board__no { display: none; } } /* 책 커버 */ .book-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 30px); max-width: 1040px; } @media (max-width: 1100px) { .book-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 620px) { .book-grid { grid-template-columns: repeat(3, 1fr); } } .book { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 4.2; background: rgba(255, 255, 255, .08); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .book img { width: 100%; height: 100%; object-fit: cover; } .book:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } /* ========================================================================== 15. 플로팅 사이드 · 상단이동 ========================================================================== */ .side-dock { position: fixed; right: clamp(10px, 1.2vw, 22px); top: 50%; translate: 0 -50%; z-index: 180; display: flex; flex-direction: column; gap: 12px; } .side-dock a { width: clamp(80px, 6.5vw, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-float); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(3px, .35vw, 6px); transition: .32s var(--ease); } .side-dock a:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px rgba(102, 102, 102, .32); } .side-dock svg { width: clamp(24px, 2.1vw, 34px); height: auto; } .side-dock img { width: auto; height: clamp(22px, 1.9vw, 31px); } .side-dock__label { font-size: clamp(13px, 1.05vw, 17px); font-weight: 500; line-height: 1.1; letter-spacing: -.085em; color: var(--ink-soft); text-align: center; white-space: nowrap; } @media (max-width: 900px) { .side-dock { top: auto; bottom: 0; right: 0; left: 0; translate: none; flex-direction: row; justify-content: center; gap: 0; background: rgba(255, 255, 255, .97); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(20, 44, 62, .12); } .side-dock a { width: 25%; height: 60px; padding: 0; border-radius: 0; box-shadow: none; background: none; gap: 3px; } .side-dock a:hover { transform: none; box-shadow: none; } .side-dock svg, .side-dock img { width: auto; height: 24px; } .side-dock__label { font-size: 13px; font-weight: 500; color: var(--ink-soft); } /* 하단 고정 바(6+54+6=66px)에 가리지 않도록 */ body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); } /* 모바일에서는 "이성근 원장님 책 소개"를 한 줄로 */ .books-split__head .sec-head__title { white-space: normal; } } .to-top { position: fixed; right: clamp(10px, 1.2vw, 22px); bottom: clamp(16px, 2vw, 34px); z-index: 170; width: 48px; height: 48px; border-radius: 50%; background: var(--navy-900); color: var(--white); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .35s var(--ease); } .to-top.is-on { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--gold-700); } @media (max-width: 900px) { .to-top { bottom: calc(80px + env(safe-area-inset-bottom)); } } /* ========================================================================== 16. 푸터 ========================================================================== */ .site-footer { background: var(--navy-900); color: #efefef; padding-block: clamp(44px, 4.5vw, 86px); } .site-footer__inner { display: flex; align-items: center; gap: clamp(24px, 5vw, 96px); flex-wrap: wrap; } .site-footer__logo { width: clamp(150px, 11.6vw, 223px); height: auto; flex-shrink: 0; } .site-footer__text { font-size: var(--fs-xs); font-weight: 300; line-height: 1.72; color: #efefef; white-space: pre-line; } /* ========================================================================== 17. 페이지 내 서브 앵커 내비 ========================================================================== */ .anchor-nav { position: sticky; top: var(--header-h); z-index: 90; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .anchor-nav__list { display: flex; gap: clamp(14px, 1.9vw, 36px); overflow-x: auto; scrollbar-width: none; padding-block: clamp(10px, .9vw, 16px); } .anchor-nav__list::-webkit-scrollbar { display: none; } .anchor-nav__list a { position: relative; white-space: nowrap; padding: 6px 0; font-size: var(--fs-sm); color: var(--ink-soft); } .anchor-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-700); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); } .anchor-nav__list a:hover, .anchor-nav__list a.is-active { color: var(--gold-700); } .anchor-nav__list a.is-active::after { transform: scaleX(1); } /* ========================================================================== 18. 본문 타이포 블록 ========================================================================== */ .prose p, .prose li { font-size: var(--fs-md); line-height: 1.9; letter-spacing: -.04em; color: var(--ink); } .prose p + p { margin-top: 1.1em; } .rich { font-size: var(--fs-lg); line-height: 1.72; letter-spacing: -.05em; white-space: pre-line; } .rich--soft { font-weight: 400; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.1vw, 60px) clamp(20px, 2.1vw, 40px); align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .figure { border-radius: var(--r-lg); overflow: hidden; background: var(--gray-200); } .figure img { width: 100%; height: 100%; object-fit: cover; } .figure--tall { aspect-ratio: 4 / 5; } .figure--wide { aspect-ratio: 16 / 9; } .figure--photo { aspect-ratio: 4 / 3; } /* 사진 대신 책 표지를 넣는 칸 — 표지가 잘리지 않게 통째로 세워 보인다 */ .figure--book { display: flex; align-items: center; justify-content: center; padding: clamp(20px, 2.4vw, 40px); background: var(--cream); } .figure--book img { width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 12px 28px rgba(20, 44, 62, .22); } .callout { border-radius: var(--r-lg); background: var(--gray-75); border-left: 3px solid var(--gold-300); padding: clamp(20px, 1.9vw, 32px) clamp(22px, 2.1vw, 36px); } .callout .rich { color: var(--ink); } .checklist { display: flex; flex-direction: column; gap: clamp(10px, .95vw, 16px); } .check { display: flex; gap: 14px; align-items: flex-start; font-size: var(--fs-lg); line-height: 1.7; letter-spacing: -.05em; } .check::before { content: ""; flex-shrink: 0; margin-top: .62em; margin-top: calc((1lh - 6px) / 2); width: 6px; height: 6px; border-radius: 50%; background: var(--gold-300); } /* 프로세스 스텝 */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.2vw, 20px); } @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; border-radius: var(--r-lg); background: var(--gray-50); padding: clamp(24px, 2.2vw, 38px); display: flex; flex-direction: column; gap: 14px; } .step__no { font-family: "Noto Serif KR", serif; font-size: var(--fs-h3); color: var(--gold-300); line-height: 1; } .step__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.04em; color: var(--navy-600); line-height: 1.55; white-space: pre-line; } .step__desc { font-size: var(--fs-base); font-weight: 400; line-height: 1.7; color: var(--ink-soft); white-space: pre-line; } /* 표 */ .tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { padding: clamp(14px, 1.3vw, 24px) clamp(14px, 1.3vw, 24px); border-bottom: 1px solid var(--line); font-size: var(--fs-md); letter-spacing: -.04em; text-align: left; } .tbl th { color: var(--navy-600); font-weight: 600; background: var(--gray-75); } .tbl tbody tr:last-child > * { border-bottom: 0; } .tbl:has(thead) tbody th { color: var(--ink); font-weight: 400; background: transparent; } .tbl th:first-child, .tbl td:first-child { padding-left: clamp(24px, 2.3vw, 40px); } .tbl th:last-child, .tbl td:last-child { padding-right: clamp(24px, 2.3vw, 40px); } /* 지도 */ .map-figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--gray-200); } .map-figure img { width: 100%; height: 100%; object-fit: cover; } .addr-line { display: flex; gap: 8px; align-items: center; font-size: var(--fs-md); letter-spacing: -.05em; } .addr-line svg { flex-shrink: 0; } /* 유틸 */ .mt-xs { margin-top: clamp(12px, 1.2vw, 20px); } .mt-sm { margin-top: clamp(20px, 2vw, 36px); } .mt-md { margin-top: clamp(32px, 3.2vw, 60px); } .mt-lg { margin-top: clamp(52px, 6.2vw, 118px); } .mt-xl { margin-top: clamp(72px, 8.4vw, 160px); } .center { text-align: center; } .flex-center { display: flex; justify-content: center; } .stack { display: flex; flex-direction: column; gap: clamp(18px, 1.6vw, 30px); } .stack--lg { gap: clamp(30px, 3.2vw, 60px); } /* ========================================================================== 19. 페이지 전용 레이아웃 ========================================================================== */ .bio-grid { display: grid; grid-template-columns: minmax(0, 461px) 1fr; gap: clamp(28px, 4.2vw, 80px); align-items: start; } @media (max-width: 940px) { .bio-grid { grid-template-columns: 1fr; } } /* 책 카드: 세로형 spec-card 변형 */ /* 전체 저서 목록 */ .book-all { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); } @media (max-width: 900px) { .book-all { grid-template-columns: 1fr; } } .book-all__count { font-size: var(--fs-sm); font-weight: 400; color: var(--gold-700); margin-left: .4em; } .book-all__list { display: flex; flex-direction: column; gap: 10px; } .book-all__list li { position: relative; padding-left: 14px; font-size: var(--fs-base); line-height: 1.6; letter-spacing: -.04em; color: var(--ink-soft); } .book-all__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-300); } .book-all__list a { color: var(--ink); } .book-all__list a:hover { color: var(--gold-700); text-decoration: underline; text-underline-offset: 3px; } .book-card { display: flex; flex-direction: column; align-items: stretch; gap: clamp(14px, 1.2vw, 20px); min-height: 0; padding: clamp(16px, 1.4vw, 26px); } .book-card .spec-card__body { gap: 6px; } .book-card .spec-card__title { white-space: normal; line-height: 1.5; } /* ========================================================================== 20. 모바일 타이포 보정 ========================================================================== */ @media (max-width: 640px) { :root { --fs-hero: clamp(23px, 6.4vw, 30px); --fs-h2: clamp(21px, 5.7vw, 26px); --fs-h3: clamp(18px, 4.8vw, 21px); --fs-h4: clamp(17px, 4.5vw, 20px); --fs-lg: clamp(15px, 4.1vw, 17px); --fs-md: clamp(14px, 3.9vw, 16px); --fs-base: 14px; --fs-sm: 13px; --fs-xs: 12.5px; --fs-stat: clamp(32px, 9vw, 40px); --lh-hero: 1.5; } .sec-head__eyebrow { letter-spacing: .22em; } .greeting__photo { border-radius: 999px; max-width: 220px; } .acc__q { max-width: 86%; } .acc__a { padding-inline: 0 0; } .num-card { padding: 16px 18px; } .timeline__year { display: block; margin-bottom: 2px; } } /* ========================================================================== 21. 병원 내부 슬라이드 ========================================================================== */ .slideshow { position: relative; } .slideshow__stage { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #d9d9d9; aspect-ratio: 1520 / 820; } .slideshow__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .55s var(--ease); } .slideshow__slide.is-on { opacity: 1; } .slideshow__arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: clamp(40px, 3.3vw, 64px); aspect-ratio: 1; border-radius: 50%; background: rgb(243, 243, 243); opacity: .9; display: grid; place-items: center; transition: opacity .25s var(--ease); } .slideshow__arrow:hover { opacity: 1; } .slideshow__arrow--prev { left: clamp(10px, 2.1vw, 40px); } .slideshow__arrow--next { right: clamp(10px, 2.1vw, 40px); } .slideshow__arrow svg { stroke: #666; } .slideshow__dots { position: absolute; left: 0; right: 0; bottom: clamp(12px, 1.5vw, 28px); z-index: 2; display: flex; gap: 10px; justify-content: center; } .slideshow__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .7); transition: background .25s var(--ease); } .slideshow__dot.is-on { background: var(--gold-700); } .slideshow__thumbs { margin-top: clamp(14px, 1.25vw, 24px); display: flex; flex-wrap: wrap; gap: 12px; } .slideshow__thumb { width: clamp(84px, 7.3vw, 140px); aspect-ratio: 140 / 90; border-radius: 8px; padding: 0; cursor: pointer; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(101, 101, 101, .25); transition: box-shadow .25s var(--ease); } .slideshow__thumb.is-on { box-shadow: inset 0 0 0 3px var(--gold-700); } /* ========================================================================== 22. Principle — 두 가지 약속 ========================================================================== */ .promise-layout { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(30px, 4vw, 76px); align-items: center; } @media (max-width: 860px) { .promise-layout { grid-template-columns: 1fr; } } .promise-figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3.2; background: rgba(255, 255, 255, .06); } .promise-figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transform-origin: 50% 42%; /* 원장 중심으로 10% 줌인 */ } .promise-list { display: flex; flex-direction: column; gap: clamp(20px, 2.2vw, 40px); } .promise { display: flex; align-items: flex-start; gap: clamp(12px, 1.1vw, 20px); } .promise + .promise { padding-top: clamp(20px, 2.2vw, 40px); border-top: 1px solid rgba(242, 215, 180, .28); } .promise__no { flex-shrink: 0; min-width: 1.6em; font-family: inherit; font-size: var(--fs-h4); font-weight: 400; line-height: 1.65; color: var(--gold-200); } .promise__text { font-size: var(--fs-h4); font-weight: 300; line-height: 1.65; letter-spacing: -.03em; color: var(--cream); } .btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: clamp(180px, 12.8vw, 246px); height: clamp(52px, 3.75vw, 72px); border-radius: 200px; background: var(--white); font-size: var(--fs-sm); font-weight: 500; color: var(--navy-800); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .btn-solid:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); color: var(--navy-800); } .btn-ghost:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #b0b0b0, 0 14px 30px rgba(0, 0, 0, .18); color: var(--navy-800); } /* ========================================================================== 23. 주의·안내 문구 (박스 없이 텍스트만) ========================================================================== */ .note { font-size: var(--fs-md); font-weight: 400; line-height: 1.85; letter-spacing: -.04em; color: var(--ink-soft); white-space: pre-line; } .note strong { font-weight: 600; color: var(--ink); } /* ========================================================================== 24. 유튜브 채널 카드 ========================================================================== */ .chan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.3vw, 22px); } @media (max-width: 900px) { .chan-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .chan-grid { grid-template-columns: 1fr; } } .chan-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(14px, 1.2vw, 20px); padding: clamp(16px, 1.4vw, 24px); border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .chan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } /* 프로필 이미지 — 꾸밈 요소 수준 */ .chan-card__avatar { position: relative; flex-shrink: 0; width: clamp(52px, 4.2vw, 68px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 3px 10px rgba(20, 44, 62, .16); } .chan-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .chan-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .chan-card__name { display: flex; align-items: center; gap: 7px; font-size: var(--fs-base); font-weight: 600; line-height: 1.3; letter-spacing: -.04em; color: var(--ink); } .chan-card__name svg { flex-shrink: 0; display: block; position: relative; top: -.04em; } .chan-card__more { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 500; color: var(--gold-700); } .chan-card:hover .chan-card__more svg { transform: translateX(4px); } .chan-card__more svg { transition: transform .3s var(--ease); } /* ========================================================================== 25. 다중 컬럼 목록 패널 (방송 출연 등) ========================================================================== */ .list-panel { border-radius: var(--r-lg); background: var(--gray-75); padding: clamp(20px, 1.9vw, 32px) clamp(22px, 2.1vw, 36px); columns: 3; column-gap: clamp(24px, 3vw, 56px); } @media (max-width: 900px) { .list-panel { columns: 2; } } @media (max-width: 560px) { .list-panel { columns: 1; } } .list-panel li { break-inside: avoid; display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-md); line-height: 1.85; letter-spacing: -.04em; color: var(--ink); } .list-panel li::before { content: "-"; color: var(--ink-mute); flex-shrink: 0; } /* ========================================================================== 26. 네이버 지도 ========================================================================== */ .map-embed { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--gray-75); aspect-ratio: 16 / 9; } .map-embed__canvas { position: absolute; inset: 0; } .map-embed__canvas:empty { display: none; } .map-embed__fallback { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(197, 163, 113, .18) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(197, 163, 113, .18) 0 1px, transparent 1px 56px), var(--gray-75); } /* 네이버 지도 캡처 (API 키 없이도 위치가 보이도록) */ .map-embed__link { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .map-embed__link::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20, 44, 62, .46); transition: background .4s var(--ease); } .map-embed__link:hover::before { background: rgba(20, 44, 62, .56); } .map-embed__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1vw, 16px); padding: clamp(16px, 1.6vw, 28px); } .map-embed__center .map-embed__addr { display: flex; align-items: flex-start; justify-content: center; gap: 10px; font-size: var(--fs-h4); font-weight: 500; line-height: 1.5; letter-spacing: -.04em; color: var(--white); text-shadow: 0 1px 12px rgba(20, 44, 62, .55); } .map-embed__addr svg { flex-shrink: 0; margin-top: .25em; } .map-embed__static { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; transition: transform .6s var(--ease); } .map-embed__link:hover .map-embed__static { transform: scale(1.03); } .map-embed__link:hover .map-link { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px rgba(20, 44, 62, .24); } .map-embed.is-live .map-embed__fallback { display: none; } /* 지도가 뜨기 전에는 폴백 안의 버튼만 보이게 */ .map-embed:not(.is-live) > .map-embed__actions { display: none; } /* 지도 위 액션 링크 */ .map-embed__actions { position: absolute; right: clamp(10px, 1vw, 16px); bottom: clamp(10px, 1vw, 16px); z-index: 2; display: flex; gap: 8px; } .map-link { display: inline-flex; align-items: center; gap: 6px; height: clamp(34px, 2.6vw, 42px); padding-inline: clamp(12px, 1.1vw, 18px); border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 2px 8px rgba(20, 44, 62, .1); font-size: var(--fs-xs); font-weight: 500; color: var(--navy-800); transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .map-link:hover { color: var(--navy-800); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px rgba(20, 44, 62, .16); } /* 네이버 지도 인포윈도우 */ .nmap-iw { padding: 12px 16px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(20, 44, 62, .2); font-family: Pretendard, -apple-system, sans-serif; letter-spacing: -.03em; white-space: nowrap; } .nmap-iw b { display: block; font-size: 15px; font-weight: 700; color: #142c3e; } .nmap-iw span { display: block; margin-top: 3px; font-size: 12.5px; color: #656565; } /* ========================================================================== 27. 증상 분류 카드 (대장내시경 등) ========================================================================== */ .sym-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 24px); } @media (max-width: 900px) { .sym-grid { grid-template-columns: 1fr; } } .sym-card { border-radius: var(--r-lg); background: var(--gray-75); padding: clamp(24px, 2.2vw, 38px); display: flex; flex-direction: column; gap: clamp(14px, 1.2vw, 20px); } .sym-card__head { display: flex; align-items: center; gap: clamp(12px, 1vw, 18px); } .sym-card__icon { flex-shrink: 0; width: clamp(46px, 3.6vw, 60px); aspect-ratio: 1; border-radius: 50%; background: var(--gold-300); display: grid; place-items: center; } .sym-card__icon svg { width: 55%; height: 55%; } .sym-card__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.04em; color: var(--navy-600); } .sym-card .chip-row { gap: 8px; } .sym-card .chip { min-width: 0; height: auto; padding: 7px 14px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 400; } /* 허용/금지 안내 카드 아이콘 */ .rule-icon { flex-shrink: 0; width: clamp(34px, 2.6vw, 44px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; } .rule-icon--no { background: rgba(217, 128, 128, .16); } .rule-icon--ok { background: rgba(229, 163, 92, .18); } .rule-head { display: flex; align-items: center; gap: clamp(10px, .9vw, 14px); } /* 게시판 헤더 행 */ .board__row--head { background: var(--gray-75); font-weight: 600; text-align: center; } .board__row--head > * { color: var(--navy-600); font-weight: 600; font-family: inherit; text-align: center; } /* ========================================================================== 28. 호버 그림자가 다음 섹션 배경에 가려지지 않도록 ========================================================================== */ main > section { position: relative; z-index: 1; } main > section:has(.spec-card:hover), main > section:has(.press-card:hover), main > section:has(.chan-card:hover), main > section:has(.book:hover) { z-index: 4; } /* ========================================================================== 29. 렌더링 성능 ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hero__media, .page-hero__media { animation: none !important; } } /* ========================================================================== 30. 증상 목록 — 버튼처럼 보이지 않게 (텍스트만) ========================================================================== */ .sym-list { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 2px; font-size: var(--fs-md); line-height: 1.5; letter-spacing: -.04em; color: var(--ink); } .sym-list span { white-space: nowrap; } .sym-list span + span::before { content: "·"; color: var(--gold-400); margin: 0 .55em; } /* ========================================================================== 31. Q&A — 대표원장 / 자주 하는 질문 공통 ========================================================================== */ .acc__head { align-items: center; } .acc__q { display: flex; align-items: baseline; gap: clamp(10px, 1vw, 16px); font-size: var(--fs-lg); font-weight: 600; line-height: 1.6; letter-spacing: -.04em; color: var(--gold-700); max-width: 92%; } .acc__q .q-mark { flex-shrink: 0; margin: 0; font-family: "Noto Serif KR", serif; font-weight: 400; font-size: var(--fs-h3); line-height: 1; color: var(--gold-400); } .acc__a { display: flex; align-items: baseline; gap: clamp(10px, 1vw, 16px); padding: 0 clamp(48px, 4vw, 76px) clamp(22px, 2vw, 36px) 0; } .acc__a .q-mark { flex-shrink: 0; margin: 0; font-family: "Noto Serif KR", serif; font-size: var(--fs-h3); line-height: 1; color: var(--gold-400); } @media (max-width: 640px) { .acc__q { max-width: 84%; } .acc__a { padding-right: 0; } } /* 카드 안에 들어가는 표 — 카드 패딩에 맞춰 좌우 여백 제거 */ .tbl--flush th:first-child, .tbl--flush td:first-child { padding-left: 0; } .tbl--flush th:last-child, .tbl--flush td:last-child { padding-right: 0; } .tbl--flush th { background: transparent; } .tbl--flush tbody tr:first-child > * { padding-top: 0; } /* ========================================================================== 32. 섹션 내 소제목 (클리닉 페이지 등) — 인라인 스타일 대체 ========================================================================== */ .sub-head-sm { font-size: var(--fs-lg); font-weight: 600; line-height: 1.6; letter-spacing: -.04em; color: var(--navy-600); } /* 칩 변형 */ .chip--dark { background: var(--navy-900); color: var(--cream); } /* 검색 입력 */ .search-box { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 18px; } .search-box input { border: 0; outline: 0; background: none; font: inherit; font-size: var(--fs-sm); width: clamp(120px, 12vw, 200px); } .accent { color: var(--gold-700); } /* 자주 하는 질문 하단 문의 블록 */ .cta-title { font-size: calc(var(--fs-h2) * .82); line-height: 1.5; color: var(--cream); } .cta-tel { display: inline-flex; align-items: center; gap: 10px; font-family: "Noto Serif KR", serif; font-size: var(--fs-h3); letter-spacing: .01em; color: var(--gold-200); } .cta-tel svg { flex-shrink: 0; } /* ========================================================================== 33. 제목 없이 설명만 있는 step 카드 → 설명 텍스트 스펙 ========================================================================== */ .step:not(:has(.step__desc)) .step__title { font-size: var(--fs-md); font-weight: 400; line-height: 1.75; letter-spacing: -.04em; color: var(--ink); } .on-dark .num-card__text strong { font-weight: 500; } /* 증상 목록 강제 줄바꿈 */ .sym-list .br { flex-basis: 100%; height: 0; } /* ========================================================================== 34. 공지사항 게시판 — 열 폭 고정으로 헤더/본문 정렬 ========================================================================== */ .board--notice .board__row { grid-template-columns: clamp(56px, 5vw, 88px) 1fr clamp(108px, 9.5vw, 140px); padding-block: clamp(14px, 1.2vw, 20px); } .board--notice .board__no, .board--notice .board__date { text-align: center; } .board--notice .board__title { font-size: var(--fs-md); } .board--notice .board__date { font-size: var(--fs-sm); } @media (max-width: 640px) { .board--notice .board__row { grid-template-columns: 1fr auto; } } /* ========================================================================== 35. 책 — 홈 좌우 분할 / 책 소개 가로형 카드 ========================================================================== */ /* 데스크톱: 왼쪽에 제목+버튼을 세로 가운데로, 오른쪽에 표지 */ .books-split { display: grid; grid-template-columns: minmax(0, 300px) 1fr; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". grid" "head grid" "more grid" ". grid"; column-gap: clamp(28px, 4vw, 72px); } .books-split__head { grid-area: head; } .books-split__more { grid-area: more; margin-top: clamp(20px, 2vw, 36px); } .books-split .book-grid { grid-area: grid; max-width: none; grid-template-columns: repeat(5, 1fr); } /* 좁은 화면: 제목 → 표지 → 버튼 순서 */ @media (max-width: 1000px) { .books-split { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "head" "grid" "more"; } .books-split .book-grid { margin-top: clamp(24px, 4vw, 40px); } .books-split__more { display: flex; justify-content: center; margin-top: clamp(28px, 5vw, 44px); } } /* 휴대폰: 3열이면 10권 중 1권이 혼자 남아서, 옆으로 넘기는 한 줄로 */ @media (max-width: 620px) { .books-split .book-grid { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); } .books-split .book-grid::-webkit-scrollbar { display: none; } .books-split .book { flex: 0 0 31%; scroll-snap-align: start; } .books-split .book[data-reveal] { transform: none; } .books-split .book:hover { transform: none; } .books-split__more .btn-ghost { min-width: 0; height: 44px; padding-inline: 26px; font-size: 14px; } } .grid:has(> .book-card) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 760px) { .grid:has(> .book-card) { grid-template-columns: 1fr; } } .book-card { flex-direction: row; align-items: flex-start; gap: clamp(16px, 1.6vw, 26px); padding: clamp(18px, 1.6vw, 26px); } .book-card .figure { width: clamp(92px, 8.2vw, 128px); aspect-ratio: 3 / 4.2; flex-shrink: 0; border-radius: 10px; } .book-card .spec-card__title { font-size: var(--fs-lg); line-height: 1.5; } .book-card .step__desc { font-size: var(--fs-sm); } /* ========================================================================== 36. 등장 애니메이션이 가로 스크롤을 만들지 않도록 ========================================================================== */ /* clip 은 스크롤 컨테이너를 만들지 않아 sticky·그림자 동작에 영향이 없다 */ html, body, main { overflow-x: clip; } /* 좁은 화면에서는 좌우 슬라이드 대신 아래→위 등장 */ @media (max-width: 900px) { [data-reveal="left"], [data-reveal="right"] { transform: translateY(24px); } } /* ========================================================================== 37. 휴대폰 화면 다듬기 (2026-09 검수 반영) ========================================================================== */ /* 데스크톱에서는 숨고 휴대폰에서만 줄을 바꾸는 줄바꿈 */ .br-m { display: none; } @media (max-width: 900px) { /* 홈 상단 사진 띠 — 한 장이 화면을 너무 많이 차지하지 않게 */ .marquee__track { gap: 10px; } .marquee__item { width: clamp(132px, 38vw, 168px); } /* 병원 특징 슬로건 — "정확한, 정직한 / 정성을 다하는 / 장편한외과의원" */ .br-m { display: inline; } /* 홈을 뺀 페이지 상단 문구 — 사진 위에서 조금 더 또렷하게 */ .page-hero__title { font-weight: 500; } /* 좌욕·증상 등 카드 설명 — 제목과 같은 크기, 볼드 없이 본문 색으로 */ .step > .step__desc { font-size: var(--fs-lg); font-weight: 400; color: var(--ink); } /* 병원 내부 사진 목록 · 버스 번호 — 좌우 여백을 본문과 같게 맞춘다 */ .slideshow__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .slideshow__thumb { width: auto; } .chip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .chip-row .chip { min-width: 0; } } /* ========================================================================== 38. 2026-09 3차 개편 — 홈 히어로 슬라이드 ========================================================================== */ .hero-slider { position: relative; overflow: hidden; isolation: isolate; background: var(--cream); } .hero-slider__track { display: grid; } .hero-slide { grid-area: 1 / 1; position: relative; overflow: hidden; min-height: clamp(520px, 46.7vw, 897px); display: grid; align-items: center; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; } .hero-slide.is-on { opacity: 1; visibility: visible; z-index: 1; } .hero-slide__media { position: absolute; inset: -2%; z-index: -2; background-size: cover; background-position: center; } .hero-slide.is-on .hero-slide__media { animation: kenburns 24s ease-in-out infinite alternate; } .hero-slide__wash { position: absolute; inset: 0; z-index: -1; } .hero-slide--brand { place-items: center; } .hero-slide--brand .hero-slide__wash { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(250, 245, 239, .34) 22%, rgba(255, 247, 237, .5) 100%), linear-gradient(rgba(255, 255, 255, .18) 0%, rgba(244, 241, 233, .18) 100%); } .hero-slide__inner { width: min(100% - var(--gutter) * 2, var(--content-max)); margin-inline: auto; padding-block: calc(var(--header-h) + clamp(28px, 3vw, 56px)) clamp(64px, 5.4vw, 104px); } /* 2번 — 대표원장 이력 */ .hero-slide--doctor { background: var(--navy-900); color: var(--cream); } .hero-slide--doctor .hero-slide__media { inset: 0 0 0 46%; background-position: 50% 18%; } .hero-slide--doctor .hero-slide__wash { background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-900) 46%, rgba(20, 44, 62, .78) 58%, rgba(20, 44, 62, .12) 82%, rgba(20, 44, 62, 0) 100%); } .hero-cv { max-width: min(640px, 56%); display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 26px); } .hero-cv__eyebrow { font-size: var(--fs-sm); letter-spacing: .16em; font-weight: 500; color: var(--gold-400); } .hero-cv__title { font-size: calc(var(--fs-hero) * .78); line-height: 1.45; color: var(--cream); white-space: pre-line; } .hero-cv__title b { font-weight: inherit; color: var(--gold-200); } .hero-cv__list { display: flex; flex-direction: column; gap: clamp(7px, .7vw, 12px); } .hero-cv__list li { position: relative; padding-left: 1.5em; font-size: var(--fs-md); line-height: 1.55; letter-spacing: -.04em; color: rgba(249, 247, 242, .92); } .hero-cv__list li::before { content: ""; position: absolute; left: .1em; top: .42em; width: .78em; height: .42em; border-left: 2px solid var(--gold-300); border-bottom: 2px solid var(--gold-300); rotate: -45deg; } .hero-cv__list b { font-weight: 600; color: var(--white); } /* 3번 — 저서 */ .hero-slide--books { background: #2f3957; color: var(--cream); } .hero-slide--books .hero-slide__media { background-position: 50% 42%; } .hero-slide--books .hero-slide__wash { background: linear-gradient(90deg, rgba(34, 42, 68, .95) 0%, rgba(34, 42, 68, .9) 38%, rgba(34, 42, 68, .62) 70%, rgba(34, 42, 68, .5) 100%); } .hero-books { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 72px); align-items: center; } .hero-books__text { display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 26px); } .hero-books__nums { display: flex; gap: clamp(20px, 2.6vw, 48px); flex-wrap: wrap; } .hero-books__num { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-md); color: rgba(249, 247, 242, .8); } .hero-books__num b { font-family: "Noto Serif KR", serif; font-weight: 400; font-size: var(--fs-stat); line-height: 1.1; color: var(--gold-200); } .hero-books__num b small { font-size: .42em; margin-left: 3px; color: var(--gold-200); } .hero-books__covers { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, .7vw, 12px); } .hero-books__covers img { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .34); } .hero-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: clamp(44px, 3vw, 56px); padding-inline: clamp(20px, 1.7vw, 32px); border-radius: var(--r-pill); background: var(--white); color: var(--navy-800); font-size: var(--fs-sm); font-weight: 600; transition: transform .3s var(--ease), box-shadow .3s var(--ease); /* visibility 는 슬라이드 전환을 그대로 따라가게 */ } .hero-btn:hover { color: var(--navy-800); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .26); } .hero-btn svg { transition: transform .3s var(--ease); } .hero-btn:hover svg { transform: translateX(4px); } /* 컨트롤 */ .hero-slider__nav { position: absolute; left: 0; right: 0; bottom: clamp(16px, 1.9vw, 34px); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; } .hero-slider__dot { position: relative; width: 34px; height: 24px; padding: 0; cursor: pointer; } .hero-slider__dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; translate: 0 -50%; border-radius: 3px; background: rgba(140, 140, 140, .5); } .hero-slider__dot::after { content: ""; position: absolute; left: 0; top: 50%; height: 3px; width: 0; translate: 0 -50%; border-radius: 3px; background: var(--gold-600); } .hero-slider[data-tone="dark"] .hero-slider__dot::before { background: rgba(255, 255, 255, .34); } .hero-slider[data-tone="dark"] .hero-slider__dot::after { background: var(--gold-200); } .hero-slider__dot.is-on::after { width: 100%; } .hero-slider.is-playing .hero-slider__dot.is-on::after { animation: heroDot var(--hero-dur, 6500ms) linear forwards; } @keyframes heroDot { from { width: 0; } to { width: 100%; } } .hero-slider__pause { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin-left: 4px; color: var(--navy-800); background: rgba(255, 255, 255, .7); } .hero-slider[data-tone="dark"] .hero-slider__pause { color: var(--white); background: rgba(255, 255, 255, .16); } .hero-slider__pause .i-play { display: none; } .hero-slider:not(.is-playing) .hero-slider__pause .i-play { display: block; } .hero-slider:not(.is-playing) .hero-slider__pause .i-pause { display: none; } .hero-slider__arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 5; width: clamp(40px, 3vw, 56px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--navy-800); background: rgba(255, 255, 255, .72); transition: background .25s var(--ease); } .hero-slider__arrow:hover { background: var(--white); } .hero-slider__arrow--prev { left: clamp(10px, 1.6vw, 30px); } .hero-slider__arrow--next { right: clamp(10px, 1.6vw, 30px); } @media (max-width: 1100px) { .hero-slider__arrow { display: none; } } @media (max-width: 900px) { .hero-slide { min-height: 560px; } .hero-slide--doctor .hero-slide__media { inset: 0; background-position: 62% 12%; } .hero-slide--doctor .hero-slide__wash { background: linear-gradient(180deg, rgba(20, 44, 62, .8) 0%, rgba(20, 44, 62, .93) 46%, rgba(20, 44, 62, .97) 100%); } .hero-cv { max-width: none; } .hero-books { grid-template-columns: 1fr; } .hero-slide--books .hero-slide__wash { background: rgba(34, 42, 68, .92); } .hero-books__covers { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 640px) { .hero-cv__title { font-size: 22px; } .hero-cv__list li { font-size: 14.5px; } .hero-slide__inner { padding-bottom: 64px; } } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } .hero-slide.is-on .hero-slide__media { animation: none; } } /* ========================================================================== 39. 플로팅 바 — 전화하기 · 블로그 3곳 ========================================================================== */ .side-dock .side-dock__btn { width: clamp(80px, 6.5vw, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-float); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(3px, .35vw, 6px); padding: 0; cursor: pointer; transition: .32s var(--ease); } .side-dock .side-dock__btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px rgba(102, 102, 102, .32); } .side-dock__group { position: relative; } .side-dock__fly { position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 8px; border-radius: 16px; background: var(--white); box-shadow: 0 12px 32px rgba(20, 44, 62, .2); opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .side-dock__fly::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 14px; } /* 버튼↔패널 사이 호버 유지 */ .side-dock__group:hover .side-dock__fly, .side-dock__group:focus-within .side-dock__fly, .side-dock__group.is-open .side-dock__fly { opacity: 1; visibility: visible; transform: none; } .side-dock .side-dock__fly a { width: auto; aspect-ratio: auto; border-radius: 10px; box-shadow: none; background: none; display: block; padding: 11px 14px; white-space: nowrap; font-size: 15px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); } .side-dock .side-dock__fly a:hover { transform: none; box-shadow: none; background: var(--gray-50); color: var(--gold-700); } .side-dock__fly--tel { min-width: 0; } .side-dock .side-dock__fly--tel a { font-family: "Noto Serif KR", serif; font-size: 18px; letter-spacing: .01em; color: var(--navy-600); } @media (max-width: 900px) { .side-dock > .side-dock__btn, .side-dock__group { width: 25%; } .side-dock .side-dock__btn { width: 100%; height: 60px; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none; gap: 3px; } .side-dock .side-dock__btn:hover { transform: none; box-shadow: none; } .side-dock__fly--tel { display: none; } .side-dock__fly { right: 6px; left: auto; top: auto; bottom: calc(100% + 10px); translate: none; transform: translateY(8px); } .side-dock__fly::after { display: none; } .side-dock__group:hover .side-dock__fly { opacity: 0; visibility: hidden; } /* 터치에서는 눌러서 연다 */ .side-dock__group.is-open .side-dock__fly { opacity: 1; visibility: visible; transform: none; } .side-dock .side-dock__fly a { padding: 13px 16px; font-size: 15.5px; } } /* ========================================================================== 40. 홈 — 대표원장 소개 (자격 증빙 · 표창) ========================================================================== */ .sec-head--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; } .sec-head--row > .sec-head__eyebrow, .sec-head--row > .sec-head__rule { flex: 0 0 100%; } .sec-head--row .btn-line { padding-bottom: .5em; } .feat-card__title--fit { white-space: nowrap; letter-spacing: -.055em; } .feat-card__title small { font-size: .8em; opacity: .9; letter-spacing: -.02em; } @media (max-width: 640px) { .feat-card__title--fit { white-space: normal; } } .award-card { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(240px, 19.8vw, 380px); padding: clamp(22px, 2vw, 36px); background: linear-gradient(150deg, #fbf6ec 0%, #f4ead6 100%); box-shadow: inset 0 0 0 1px rgba(148, 98, 25, .16); display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(10px, 1vw, 16px); } .award-card__icon { position: absolute; right: clamp(16px, 1.6vw, 28px); top: clamp(16px, 1.6vw, 28px); width: clamp(54px, 5vw, 92px); opacity: .2; } .award-card__title { font-size: var(--fs-h4); line-height: 1.48; color: var(--gold-700); } .award-card__list { display: flex; flex-direction: column; gap: 4px; } .award-card__list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: var(--fs-md); line-height: 1.6; letter-spacing: -.04em; color: var(--ink); padding-block: 5px; border-bottom: 1px solid rgba(148, 98, 25, .14); } .award-card__list li:last-child { border-bottom: 0; } .award-card__list span { flex-shrink: 0; font-size: var(--fs-sm); color: var(--gold-700); font-family: "Noto Serif KR", serif; } .cert-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 56px); align-items: center; } .cert-row__text { display: flex; flex-direction: column; gap: 10px; } .cert-row__title { font-size: var(--fs-h4); line-height: 1.5; color: var(--ink); } .cert-row__desc { font-size: var(--fs-md); line-height: 1.75; letter-spacing: -.04em; color: var(--ink-soft); } .cert-row__imgs { display: flex; gap: clamp(12px, 1.4vw, 24px); } .cert { position: relative; display: block; width: clamp(128px, 12vw, 200px); cursor: zoom-in; border-radius: 10px; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgba(20, 44, 62, .12); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .cert:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--line), var(--shadow-hover); } .cert img { width: 100%; aspect-ratio: 1055 / 1491; object-fit: cover; } .cert__cap { display: block; padding: 8px 6px 10px; text-align: center; font-size: var(--fs-xs); font-weight: 500; letter-spacing: -.04em; color: var(--ink); } @media (max-width: 760px) { .cert-row { grid-template-columns: 1fr; } .cert-row__imgs { justify-content: flex-start; } .cert { width: min(44%, 180px); } } /* ========================================================================== 41. 홈 — 유튜브 · 블로그 · 공지사항 ========================================================================== */ .yt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; } .yt-head__lead { font-size: var(--fs-lg); line-height: 1.75; letter-spacing: -.045em; color: var(--ink); white-space: pre-line; max-width: 46em; } .yt-head__stat { display: flex; gap: clamp(20px, 2.4vw, 44px); } .yt-head__stat span { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--ink-soft); } .yt-head__stat b { font-weight: 400; font-size: var(--fs-h3); line-height: 1.3; color: var(--gold-700); } .yt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.5vw, 26px); } .yt-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .yt-card--lead { grid-column: span 2; grid-row: span 2; } .yt-card__thumb { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16 / 9; background: var(--gray-200); } .yt-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .yt-card:hover .yt-card__thumb img { transform: scale(1.05); } .yt-card__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(40px, 3.4vw, 60px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 20, 20, .62); transition: background .3s var(--ease), transform .3s var(--ease); } .yt-card__play svg { width: 46%; height: 46%; margin-left: 6%; } .yt-card--lead .yt-card__play { width: clamp(54px, 4.6vw, 84px); } .yt-card:hover .yt-card__play { background: #ff0033; transform: scale(1.06); } .yt-card__time { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0; } .yt-card__title { font-size: var(--fs-md); font-weight: 500; line-height: 1.5; letter-spacing: -.045em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s var(--ease); } .yt-card--lead .yt-card__title { font-size: var(--fs-h4); line-height: 1.45; } .yt-card:hover .yt-card__title { color: var(--gold-700); } .yt-card__meta { font-size: var(--fs-sm); color: var(--ink-mute); } @media (max-width: 900px) { .yt-grid { grid-template-columns: repeat(2, 1fr); } .yt-card--lead { grid-row: auto; } } .btn-yt { display: inline-flex; align-items: center; gap: 12px; height: clamp(50px, 3.6vw, 66px); padding-inline: clamp(22px, 2vw, 38px); border-radius: var(--r-pill); background: var(--navy-900); color: var(--cream); font-size: var(--fs-md); font-weight: 500; transition: .3s var(--ease); } .btn-yt:hover { color: var(--white); background: #0e2231; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 44, 62, .26); } .btn-yt svg:last-child { transition: transform .3s var(--ease); } .btn-yt:hover svg:last-child { transform: translateX(4px); } .blog-lite { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 76px); align-items: center; padding: clamp(26px, 3vw, 56px); border-radius: var(--r-lg); background: var(--gray-50); } @media (max-width: 900px) { .blog-lite { grid-template-columns: 1fr; } } .blog-lite__intro { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 16px); } .blog-lite__title { font-size: var(--fs-h3); line-height: 1.55; color: var(--ink); } .blog-lite__lead { font-size: var(--fs-md); line-height: 1.8; letter-spacing: -.04em; color: var(--ink-soft); } .blog-lite__list { display: flex; flex-direction: column; } .blog-lite__list .btn-line { margin-top: clamp(12px, 1.2vw, 20px); font-size: var(--fs-sm); } .mini-row { display: flex; flex-direction: column; gap: 3px; padding: clamp(11px, 1vw, 16px) 0; border-bottom: 1px solid var(--line); } .mini-row:first-child { padding-top: 0; } .mini-row__title { font-size: var(--fs-md); font-weight: 500; line-height: 1.5; letter-spacing: -.045em; color: var(--ink); transition: color .25s var(--ease); } .mini-row:hover .mini-row__title { color: var(--gold-700); } .mini-row__meta { font-size: var(--fs-xs); color: var(--ink-mute); } .chip--line { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); } .chip--link { min-width: 0; gap: 6px; padding-inline: 16px; background: var(--white); color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line); transition: .25s var(--ease); } .chip--link:hover { color: var(--gold-700); box-shadow: inset 0 0 0 1px var(--gold-400); } .chip-row--free { display: flex !important; flex-wrap: wrap; } /* ========================================================================== 42. 통계 5칸 · 기준월 · 강조 문구 ========================================================================== */ .stat-asof { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: clamp(14px, 1.4vw, 24px); padding: 6px 16px; border-radius: var(--r-pill); background: rgba(242, 215, 180, .14); box-shadow: inset 0 0 0 1px rgba(242, 215, 180, .34); font-size: var(--fs-sm); font-weight: 500; color: var(--gold-200); } .stat-asof span { font-weight: 300; color: rgba(249, 247, 242, .66); } .stat-grid--5 { grid-template-columns: repeat(5, 1fr); } .stat-grid--5 .stat { padding-inline: clamp(14px, 1.4vw, 28px); } .stat-grid--5 .stat__num { font-size: calc(var(--fs-stat) * .84); white-space: nowrap; } .stat__desc { font-size: var(--fs-xs); font-weight: 300; line-height: 1.6; letter-spacing: -.03em; color: rgba(249, 247, 242, .62); } @media (max-width: 1100px) { .stat-grid--5 { grid-template-columns: repeat(3, 1fr); } .stat-grid--5 .stat:nth-child(4) { box-shadow: inset 0 1px 0 rgba(249, 247, 242, .16); } .stat-grid--5 .stat:nth-child(5) { box-shadow: inset 1px 0 0 rgba(249, 247, 242, .16), inset 0 1px 0 rgba(249, 247, 242, .16); } } @media (max-width: 900px) { .stat-grid--5 { grid-template-columns: repeat(2, 1fr); } .stat-grid--5 .stat:nth-child(4) { box-shadow: inset 1px 0 0 rgba(249, 247, 242, .16), inset 0 1px 0 rgba(249, 247, 242, .16); } .stat-grid--5 .stat:nth-child(5) { grid-column: 1 / -1; box-shadow: inset 0 1px 0 rgba(249, 247, 242, .16); } } .stat-claims { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(14px, 1.6vw, 28px); } @media (max-width: 900px) { .stat-claims { grid-template-columns: 1fr; } } .stat-claim { padding: clamp(20px, 2vw, 36px) clamp(22px, 2.2vw, 40px); border-radius: var(--r-lg); background: rgba(249, 247, 242, .07); box-shadow: inset 0 0 0 1px rgba(242, 215, 180, .22); font-size: var(--fs-h3); line-height: 1.6; color: var(--cream); white-space: pre-line; display: flex; flex-direction: column; justify-content: center; } .stat-claim b { font-weight: 400; font-size: 1.5em; line-height: 1.1; color: var(--gold-200); margin-right: 2px; } .stat-claim { display: block; } /* ========================================================================== 43. 언론보도 · 방송 · 게시판 확장 ========================================================================== */ .hook { font-size: var(--fs-md); line-height: 1.8; letter-spacing: -.04em; color: var(--ink-soft); max-width: 60em; margin-top: calc(clamp(18px, 1.6vw, 30px) * -.55); } .press-list--plain .press-row:first-child, .press-list--plain.press-list--2col .press-row:nth-child(2) { border-top: 0; } .press-list--plain .press-row:first-child, .press-list--plain.press-list--2col .press-row:nth-child(2) { padding-top: 0; } @media (max-width: 860px) { .press-list--plain.press-list--2col .press-row:nth-child(2) { padding-top: clamp(16px, 1.8vw, 28px); } } .list-panel--tv li span { display: block; } .list-panel--tv em { display: block; font-style: normal; font-size: var(--fs-xs); line-height: 1.5; color: var(--gold-700); margin-bottom: .45em; } .board--press .board__row { grid-template-columns: clamp(56px, 5vw, 88px) 1fr clamp(84px, 8vw, 128px) clamp(108px, 9.5vw, 140px); } .board--press .board__src { font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; white-space: nowrap; } .board--press .board__title { line-height: 1.55; } @media (max-width: 640px) { .board--press .board__row { grid-template-columns: 1fr auto; row-gap: 4px; } .board--press .board__title { grid-column: 1 / -1; } .board--press .board__src { text-align: left; } .board--press .board__row--head { display: none; } } .board__row--head .board__src { text-align: center; } .home-notice .board { border-top-width: 1px; border-top-color: var(--line); } /* ========================================================================== 44. 저서 — 홈 18권 벽 · 상세 ========================================================================== */ .books-split .book-grid--wall { grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.1vw, 20px); } .book-grid--wall .book { border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); } .books-count { display: flex; gap: clamp(16px, 1.8vw, 32px); margin-top: clamp(14px, 1.4vw, 24px); } .books-count p { display: flex; flex-direction: column; font-size: var(--fs-sm); line-height: 1.5; color: rgba(249, 247, 242, .78); } .books-count b { font-family: "Noto Serif KR", serif; font-weight: 400; font-size: var(--fs-h2); line-height: 1.2; color: var(--gold-200); } .books-count b small { font-size: .45em; margin-left: 2px; } @media (max-width: 1000px) { .books-split .book-grid--wall { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 620px) { /* 두 줄로 옆으로 넘기는 책장 */ .books-split .book-grid--wall { display: grid; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 27vw; gap: 10px; } .books-split .book-grid--wall .book { flex: none; } } .book-grid--row { grid-template-columns: repeat(5, 1fr); max-width: 900px; } .book-grid--row .book { box-shadow: 0 8px 22px rgba(20, 44, 62, .16); border-radius: 8px; } @media (max-width: 620px) { .book-grid--row { grid-template-columns: repeat(3, 1fr); } .book-grid--row .book:nth-child(n+4) { display: none; } } .marquee__item--book { width: clamp(120px, 10vw, 180px); aspect-ratio: 3 / 4.2; } @media (max-width: 900px) { .marquee__item.marquee__item--book { width: clamp(96px, 26vw, 130px); } } .col-list { margin-top: clamp(40px, 4vw, 72px); column-count: 2; column-gap: clamp(24px, 4.2vw, 80px); } .col-list li { break-inside: avoid; margin-bottom: .35em; } .col-list a { color: var(--ink); } .col-list a:hover { color: var(--gold-700); } @media (max-width: 640px) { .col-list { column-count: 1; } } .book-detail { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(28px, 4.4vw, 84px); align-items: start; } @media (max-width: 800px) { .book-detail { grid-template-columns: 1fr; } .book-detail__cover { max-width: 240px; margin-inline: auto; } } .book-detail__cover img { width: 100%; border-radius: 10px; box-shadow: 0 18px 44px rgba(20, 44, 62, .22); } .book-detail__body { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 20px); } .fact-list { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; padding: clamp(14px, 1.3vw, 22px) 0; border-block: 1px solid var(--line); } .fact-list div { display: flex; gap: 10px; padding-right: clamp(16px, 1.8vw, 32px); margin-right: clamp(16px, 1.8vw, 32px); border-right: 1px solid var(--line); } .fact-list div:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .fact-list dt { font-size: var(--fs-sm); color: var(--ink-mute); } .fact-list dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); } @media (max-width: 640px) { .fact-list div { border-right: 0; margin-right: 0; flex: 0 0 50%; padding-right: 8px; } } /* ========================================================================== 45. 읽을거리 상세 (언론보도 · 블로그) · 블로그 목록 ========================================================================== */ .article { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 40px); } .article__head { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 16px); padding-bottom: clamp(18px, 1.8vw, 30px); border-bottom: 2px solid var(--navy-900); } .article__kicker { font-size: var(--fs-sm); font-weight: 500; letter-spacing: .02em; color: var(--gold-700); } .article__title { font-size: calc(var(--fs-h2) * .8); line-height: 1.5; color: var(--ink); text-wrap: pretty; } .article__lead { font-size: var(--fs-lg); line-height: 1.75; letter-spacing: -.045em; color: var(--ink-soft); } .article__figure { border-radius: var(--r-lg); overflow: hidden; background: var(--gray-200); max-width: 560px; } .article__figure img { width: 100%; max-height: 420px; object-fit: cover; object-position: 50% 14%; } .article .prose p { font-size: var(--fs-lg); line-height: 1.95; } .article .prose .sub-head-sm { margin: 1.6em 0 .5em; } .article__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .btn-solid--navy { background: var(--navy-900); color: var(--cream); padding-inline: clamp(22px, 2vw, 36px); height: clamp(48px, 3.3vw, 62px); min-width: 0; } .btn-solid--navy:hover { color: var(--white); background: #0e2231; } .article__actions .btn-ghost { height: clamp(48px, 3.3vw, 62px); } .pager { border-top: 1px solid var(--line); } .pager__row { display: grid; grid-template-columns: clamp(64px, 6vw, 96px) 1fr; gap: 14px; align-items: baseline; padding: clamp(14px, 1.3vw, 22px) 4px; border-bottom: 1px solid var(--line); } .pager__label { font-size: var(--fs-sm); color: var(--ink-mute); } .pager__title { font-size: var(--fs-md); letter-spacing: -.04em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .25s var(--ease); } .pager__row:hover .pager__title { color: var(--gold-700); } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 40px) clamp(16px, 1.6vw, 28px); } @media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } } .post-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .post-card__thumb { overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--gray-200); } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .post-card:hover .post-card__thumb img { transform: scale(1.05); } .post-card__body { display: flex; flex-direction: column; gap: 6px; } .post-card__meta { font-size: var(--fs-xs); color: var(--gold-700); font-weight: 500; } .post-card__title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.5; letter-spacing: -.05em; color: var(--ink); transition: color .25s var(--ease); } .post-card:hover .post-card__title { color: var(--gold-700); } .post-card__desc { font-size: var(--fs-base); line-height: 1.7; letter-spacing: -.04em; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 600px) { .post-card { flex-direction: row; align-items: center; } .post-card__thumb { flex: 0 0 112px; } .post-card__desc { display: none; } } /* ========================================================================== 46. 진료시간 · 버스 · 지도 ========================================================================== */ .hours-line { display: grid; grid-template-columns: minmax(7.4em, auto) auto 1fr; gap: 4px clamp(12px, 1.4vw, 24px); align-items: baseline; padding-block: clamp(7px, .7vw, 12px); border-bottom: 1px solid var(--line); font-size: var(--fs-md); letter-spacing: -.04em; line-height: 1.6; } .hours-line strong { font-weight: 600; color: var(--navy-600); } .hours-line span { white-space: nowrap; } .hours-line em { font-style: normal; font-size: var(--fs-sm); color: var(--ink-mute); text-align: right; } .info-card > .hours-line:first-child { padding-top: 0; } .hours-note { margin-top: clamp(10px, 1vw, 16px); font-size: var(--fs-sm) !important; color: var(--ink-soft); } @media (max-width: 420px) { .hours-line { grid-template-columns: 1fr auto; } .hours-line em { grid-column: 1 / -1; text-align: left; } } .tbl__sub { display: block; font-size: var(--fs-sm); color: var(--ink-mute); } .bus-stop { display: flex; flex-direction: column; gap: 12px; } .bus-stop + .bus-stop { margin-top: clamp(6px, .8vw, 14px); } .bus-stop__walk { margin-left: 8px; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-mute); } .chip--key { min-width: 0; height: auto; padding: 2px 10px; font-size: var(--fs-xs); margin-right: 6px; vertical-align: .06em; } a.map-figure { display: block; position: relative; cursor: pointer; } a.map-figure .map-figure__hint { position: absolute; right: clamp(10px, 1vw, 16px); bottom: clamp(10px, 1vw, 16px); } a.map-figure:hover .map-link { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px rgba(20, 44, 62, .16); } /* ========================================================================== 47. 클리닉 페이지 — 질환 전환 · 삽화 · 병변 사진 · 관리 수칙 ========================================================================== */ .topic-nav { position: sticky; top: var(--header-h); z-index: 90; transition: top .4s var(--ease); margin-top: clamp(28px, 3vw, 56px); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-block: 1px solid var(--line); } .topic-nav__list { display: flex; gap: clamp(8px, 1vw, 16px); justify-content: center; padding-block: clamp(10px, .9vw, 16px); overflow-x: auto; scrollbar-width: none; } .topic-nav__list::-webkit-scrollbar { display: none; } .topic-nav__list a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px clamp(16px, 1.5vw, 28px); border-radius: var(--r-pill); font-size: var(--fs-md); font-weight: 500; color: var(--ink-soft); transition: .25s var(--ease); } .topic-nav__list a:hover { color: var(--gold-700); background: var(--gray-50); } .topic-nav__list a.is-active { color: var(--white); background: var(--gold-700); } body.is-header-hidden .topic-nav { top: 0; } .topic { scroll-margin-top: calc(var(--header-h) + 76px); } .topic + .topic { margin-top: var(--gap-block); padding-top: var(--gap-block); border-top: 1px solid var(--line); } .topic__title { display: flex; align-items: center; gap: 14px; font-size: calc(var(--fs-h2) * .82); line-height: 1.5; color: var(--navy-800); } .topic__title::before { content: ""; width: 6px; height: 1.1em; border-radius: 3px; background: var(--gold-300); } .illust { border-radius: var(--r-lg); background: linear-gradient(180deg, #fdfaf4, #f8f3ea); box-shadow: inset 0 0 0 1px rgba(148, 98, 25, .12); padding: clamp(16px, 1.8vw, 32px); margin: 0; } .illust svg { display: block; width: 100%; height: auto; } .illust figcaption { margin-top: 12px; text-align: center; font-size: var(--fs-sm); letter-spacing: -.03em; color: var(--ink-soft); } .illust--wide { overflow-x: auto; } .illust--wide svg { min-width: 640px; } .lesion-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1vw, 18px); } @media (max-width: 1000px) { .lesion-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .lesion-grid { grid-template-columns: repeat(2, 1fr); } } .lesion { display: flex; flex-direction: column; gap: 8px; margin: 0; } .lesion img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--gray-200); } .lesion figcaption { text-align: center; font-size: var(--fs-sm); font-weight: 500; letter-spacing: -.04em; color: var(--ink); } .reason-list { display: flex; flex-direction: column; } .reason-list li { display: flex; gap: clamp(12px, 1.2vw, 20px); align-items: baseline; padding: clamp(12px, 1.1vw, 18px) 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-lg); line-height: 1.65; letter-spacing: -.045em; } .reason-list li:first-child { border-top: 1px solid var(--line); } .reason-list li > b { flex-shrink: 0; font-family: "Noto Serif KR", serif; font-weight: 400; color: var(--gold-300); font-size: var(--fs-h4); line-height: 1; min-width: 1.4em; } .care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.2vw, 20px); } @media (max-width: 980px) { .care-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .care-grid { grid-template-columns: 1fr; } } .care { border-radius: var(--r-lg); background: var(--gray-50); padding: clamp(20px, 1.9vw, 32px); display: flex; flex-direction: column; gap: 10px; } .care__head { display: flex; align-items: center; gap: 12px; } .care__icon { flex-shrink: 0; width: clamp(40px, 3vw, 50px); aspect-ratio: 1; border-radius: 50%; background: var(--gold-300); display: grid; place-items: center; } .care__icon svg { width: 56%; height: 56%; } .care__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.04em; color: var(--navy-600); } .care ul { display: flex; flex-direction: column; gap: 4px; } .care li { position: relative; padding-left: 12px; font-size: var(--fs-md); line-height: 1.7; letter-spacing: -.04em; color: var(--ink); } .care li::before { content: ""; position: absolute; left: 0; top: .78em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-400); } .care li.is-warn { color: var(--ink-soft); font-size: var(--fs-base); } .keypoint { border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 40px); background: var(--navy-900); color: var(--cream); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 36px); } @media (max-width: 860px) { .keypoint { grid-template-columns: 1fr; } } .keypoint__item { display: flex; flex-direction: column; gap: 6px; } .keypoint__item b { font-family: "Noto Serif KR", serif; font-weight: 400; font-size: var(--fs-h4); line-height: 1.5; color: var(--gold-200); } .keypoint__item span { font-size: var(--fs-md); line-height: 1.75; letter-spacing: -.04em; color: rgba(249, 247, 242, .84); } .keypoint__label { grid-column: 1 / -1; font-size: var(--fs-sm); letter-spacing: .14em; font-weight: 500; color: var(--gold-400); } .cycle-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; justify-content: center; font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.04em; color: var(--navy-600); } .cycle-flow i { font-style: normal; color: var(--gold-400); } .cycle-flow span { padding: 8px 18px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); } /* 클리닉 상단 그림 — 사진 대신 삽화가 들어갈 때 */ .figure--illust { background: none; aspect-ratio: auto; overflow: visible; } /* ========================================================================== 48. 병원 내부 — 공간별 탭 ========================================================================== */ .space-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(28px, 3vw, 56px); } .space-tab { height: clamp(40px, 2.8vw, 52px); padding-inline: clamp(18px, 1.6vw, 30px); border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); transition: .25s var(--ease); } .space-tab:hover { color: var(--gold-700); } .space-tab.is-active { background: var(--gold-700); color: var(--white); box-shadow: none; } .space-panel[hidden] { display: none; } .slideshow__label { position: absolute; left: clamp(12px, 1.5vw, 28px); top: clamp(12px, 1.5vw, 28px); z-index: 2; padding: 6px 16px; border-radius: var(--r-pill); background: rgba(20, 44, 62, .78); color: var(--white); font-size: var(--fs-sm); font-weight: 500; letter-spacing: -.02em; } .slideshow__slide--contain { background-size: contain; background-repeat: no-repeat; background-color: #e9e6e0; } /* 진료 원칙 — 구분 라벨 */ .promise__label { display: block; margin-bottom: 2px; font-size: var(--fs-sm); font-weight: 500; letter-spacing: .04em; color: var(--gold-200); } .promise__text { white-space: pre-line; } /* 줄 끝에 한두 글자만 남지 않도록 */ .blog-lite__title, .stat-claim, .hero-cv__title, .article__title, .cert-row__title, .yt-head__lead { text-wrap: balance; } .cert-row__desc, .blog-lite__lead, .hook, .stat__desc, .article__lead { text-wrap: pretty; } .stat-claim { font-size: calc(var(--fs-h3) * .92); } .award-card__title { padding-right: clamp(56px, 5.6vw, 104px); } @media (max-width: 640px) { .topic-nav__list { justify-content: flex-start; } } /* 진료 원칙 사진 — 원장 중심으로 잘라 둔 컷이라 확대 없이 그대로 */ .promise-figure img { transform: none; object-position: 50% 30%; } /* ========================================================================== 50. 홈 2차 수정 (2026-09-21) ========================================================================== */ /* 한글은 단어 중간에서 끊기지 않게 */ body { word-break: keep-all; overflow-wrap: break-word; } /* --- 히어로 --- */ .hero-slide { transition: opacity .6s var(--ease), visibility .6s; } .hero-slider { cursor: grab; user-select: none; -webkit-user-select: none; } .hero-slider.is-dragging { cursor: grabbing; } .hero-slider a, .hero-slider button { cursor: pointer; } .hero-cv { max-width: min(780px, 60%); } .hero-cv__title { font-size: calc(var(--fs-hero) * .7); } .hero-cv__list li { font-weight: 400; white-space: pre-line; } .hero-cv__list b { font-weight: 600; } @media (max-width: 900px) { .hero-cv { max-width: none; } } @media (max-width: 640px) { .hero-cv__title { font-size: 21px; } } /* --- 플로팅 버튼 80px --- */ .side-dock { right: 12px; gap: 10px; } .side-dock .side-dock__btn { width: 80px; gap: 3px; } .side-dock svg { width: 24px; } .side-dock img { height: 22px; } .side-dock__label { font-size: 13px; } @media (max-width: 900px) { .side-dock { right: 0; gap: 0; } .side-dock .side-dock__btn { width: 100%; } } /* --- 대표원장 소개: 표창 · 증서 --- */ .award-card { background: #f7f1e4; } .award-card__title { white-space: pre-line; } .cert-band { margin-top: clamp(48px, 5vw, 96px); padding-block: clamp(36px, 3.6vw, 68px); background: #f6f1e7; } .cert-band .cert-row { margin-top: 0; } .cert-row__desc { white-space: pre-line; } .cert-row__desc b { font-weight: 700; color: var(--ink); } .cert-row__imgs { gap: clamp(18px, 2vw, 36px); } .cert, .cert:hover { margin: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; cursor: default; transform: none; } .cert img { border-radius: 3px; box-shadow: 0 12px 28px rgba(20, 44, 62, .2); height: auto; } .cert__cap { padding: 14px 0 0; font-size: calc(var(--fs-xs) - 2px); font-weight: 400; color: var(--ink-soft); } @media (max-width: 640px) { .cert__cap { font-size: 11.5px; } } /* --- 유튜브 · 블로그: 좌우로 나란히, 가볍게 --- */ .section--social { padding-top: clamp(56px, 5.5vw, 104px); } .social-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 96px); align-items: start; } @media (max-width: 900px) { .social-duo { grid-template-columns: 1fr; } } .social-col__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: clamp(10px, .9vw, 14px); border-bottom: 1px solid var(--navy-900); } .social-col__title { font-size: var(--fs-h3); line-height: 1.5; color: var(--ink); } .social-col__head .btn-line { font-size: var(--fs-sm); min-height: 0; } .social-col__lead { margin-top: clamp(10px, .9vw, 14px); font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); } .social-col__list { margin-top: 6px; display: flex; flex-direction: column; --thumb: clamp(88px, 6.6vw, 118px); } .mini-media { display: grid; grid-template-columns: var(--thumb) 1fr; gap: clamp(12px, 1.1vw, 18px); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .mini-media__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--gray-200); } .mini-media__thumb img { width: 100%; height: 100%; object-fit: cover; } .mini-media__time { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 11px; line-height: 1.5; letter-spacing: 0; } .mini-media__title { font-size: var(--fs-base); font-weight: 500; line-height: 1.5; letter-spacing: -.04em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s var(--ease); } .mini-media:hover .mini-media__title { color: var(--gold-700); } .social-col .mini-row { justify-content: center; padding: 8px 0; min-height: calc(var(--thumb) * 9 / 16 + 17px); } .social-col .mini-row:first-child { padding-top: 8px; } .social-col .mini-row__title { font-size: var(--fs-base); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* --- 인사말: 사진은 크게, 글은 조금 작게 --- */ .greeting { grid-template-columns: minmax(0, 460px) 1fr; } .greeting__photo { max-width: 360px; } .greeting__text { font-size: var(--fs-md); line-height: 1.9; } @media (max-width: 900px) { .greeting { grid-template-columns: 1fr; } } @media (max-width: 640px) { .greeting__photo { max-width: 260px; } } /* --- 진료 원칙: 세로 사진 --- */ .promise-layout { grid-template-columns: 1fr minmax(0, 440px); } .promise-figure--portrait { aspect-ratio: 4 / 5; } .promise-figure--portrait img { transform: none; object-position: 50% 10%; } @media (max-width: 860px) { .promise-layout { grid-template-columns: 1fr; } .promise-figure--portrait { max-width: 420px; margin-inline: auto; width: 100%; } } /* --- 진료 실적: 기준월은 작게, 경력은 이어지는 선으로 --- */ .stat-asof { display: block; margin-top: clamp(16px, 1.6vw, 28px); padding: 0; border-radius: 0; background: none; box-shadow: none; text-align: right; font-size: var(--fs-xs); font-weight: 300; color: rgba(249, 247, 242, .55); } .stat__desc { font-size: var(--fs-xs); line-height: 1.65; } .career-line { position: relative; margin-top: clamp(40px, 4.4vw, 84px); padding-top: clamp(26px, 2.2vw, 38px); } .career-line__track { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: rgba(249, 247, 242, .16); } .career-line__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--gold-300), var(--gold-200)); transition: width 2.4s cubic-bezier(.3, .6, .2, 1) .35s; } .career-line.is-in .career-line__fill { width: 100%; } .career-line__points { display: grid; grid-template-columns: auto auto 1fr; column-gap: clamp(28px, 4vw, 80px); } .career-line__point { position: relative; display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .career-line.is-in .career-line__point { opacity: 1; transform: none; } .career-line.is-in .career-line__point:nth-child(1) { transition-delay: .4s; } .career-line.is-in .career-line__point:nth-child(2) { transition-delay: .9s; } .career-line.is-in .career-line__point:nth-child(3) { transition-delay: 2.5s; } .career-line__point::before { content: ""; position: absolute; left: 0; top: calc(clamp(26px, 2.2vw, 38px) * -1); width: 12px; height: 12px; border-radius: 50%; background: var(--gold-200); box-shadow: 0 0 0 4px rgba(20, 44, 62, .9); } .career-line__point--now { justify-self: end; text-align: right; align-items: flex-end; } .career-line__point--now::before { left: auto; right: 0; } .career-line.is-in .career-line__point--now::before { animation: nowPulse 2.2s ease-out 2.8s infinite; } @keyframes nowPulse { 0% { box-shadow: 0 0 0 4px rgba(20, 44, 62, .9), 0 0 0 4px rgba(242, 215, 180, .55); } 100% { box-shadow: 0 0 0 4px rgba(20, 44, 62, .9), 0 0 0 16px rgba(242, 215, 180, 0); } } .career-line__year { font-size: var(--fs-h2); line-height: 1.2; color: var(--gold-200); } .career-line__text { font-size: var(--fs-md); line-height: 1.6; letter-spacing: -.04em; color: rgba(249, 247, 242, .88); white-space: pre-line; } @media (max-width: 700px) { .career-line { padding-top: 0; padding-left: 28px; } .career-line__track { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; } .career-line__fill { inset: 0 0 auto 0; width: 100%; height: 0; transition: height 2.4s cubic-bezier(.3, .6, .2, 1) .35s; } .career-line.is-in .career-line__fill { width: 100%; height: 100%; } .career-line__points { grid-template-columns: 1fr; row-gap: 26px; } .career-line__point::before, .career-line__point--now::before { left: -28px; right: auto; top: 10px; } .career-line__point--now { justify-self: start; text-align: left; align-items: flex-start; } .career-line__text { white-space: normal; } } @media (prefers-reduced-motion: reduce) { .career-line__fill, .career-line__point { transition: none; } .career-line.is-in .career-line__point--now::before { animation: none; } } /* --- 방송 출연: 3개씩 세 단 --- */ .list-panel--tv { columns: auto; display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); gap: 6px clamp(24px, 3vw, 56px); } @media (max-width: 900px) { .list-panel--tv { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, auto); } } @media (max-width: 560px) { .list-panel--tv { display: block; } } /* --- 책 소개: 18권 = 6 × 3 (권수가 바뀌면 열 수도 함께 맞출 것) --- */ .books-split .book-grid--wall { grid-template-columns: repeat(6, 1fr); } @media (max-width: 620px) { .books-split .book-grid--wall { grid-template-columns: none; } } /* --- 진료 시간 · 주차 안내: 같은 높이, 같은 배경 --- */ .split--equal { align-items: stretch; } .split--equal > .stack > .info-card { flex: 1; background: var(--gray-75); } .hours-line--2 { grid-template-columns: 1fr auto; } .hours-note + .hours-note { margin-top: 2px; } /* --- 대중교통 --- */ .chip--express { background: var(--white); color: var(--navy-600); box-shadow: inset 0 0 0 1.5px rgba(28, 55, 103, .55); } .bus-legend { display: flex; flex-direction: column; gap: 2px; } .bus-legend p { font-size: var(--fs-xs); line-height: 1.8; letter-spacing: -.03em; color: var(--ink-soft); } .bus-stop .info-card__label { font-size: var(--fs-md); } /* 게시판 검색 결과 없음 */ .board__empty { padding: clamp(28px, 3vw, 56px) 0; text-align: center; font-size: var(--fs-md); color: var(--ink-soft); border-bottom: 1px solid var(--line); } /* ========================================================================== 51. 클리닉 페이지 2차 수정 (2026-09-21) — 공간을 덜 쓰고 내용은 또렷하게 ========================================================================== */ /* 짧은 항목은 한 줄에 두 개씩 */ @media (min-width: 761px) { .reason-list--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); } .reason-list--2 li:nth-child(2) { border-top: 1px solid var(--line); } .reason-list--2 li { align-items: center; } /* 옆 칸과 높이가 같아져도 번호와 글이 나란히 가운데 */ .checklist--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); } } /* 증상 카드 — 아이콘과 문구를 한 줄에 */ .step--row { flex-direction: row; align-items: center; gap: 14px; padding-block: clamp(16px, 1.4vw, 24px); } .step--row .step__no { flex-shrink: 0; } .step--row .step__title { font-size: var(--fs-lg); } /* 보존 치료 — 이름 : 내용 한 줄씩, 두 단 */ .kv-rows { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); border-top: 1px solid var(--line); } @media (max-width: 760px) { .kv-rows { grid-template-columns: 1fr; } } .kv-rows > div { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 20px); padding: clamp(12px, 1.1vw, 18px) 4px; border-bottom: 1px solid var(--line); } .kv-rows dt { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-width: 7em; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.04em; color: var(--navy-600); } .kv-rows dt svg { width: 22px; height: 22px; color: var(--gold-300); } .kv-rows dd { margin: 0; font-size: var(--fs-md); line-height: 1.6; letter-spacing: -.04em; color: var(--ink); } @media (max-width: 480px) { .kv-rows > div { flex-direction: column; align-items: flex-start; gap: 2px; } } /* 수술이 필요한 경우 · 수술법 — 한 상자에 세로로 */ .info-card--tight { padding-block: clamp(20px, 1.8vw, 30px); } .info-card__rule { border: 0; height: 1px; background: var(--line); margin: clamp(16px, 1.5vw, 24px) 0; } .inline-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px clamp(18px, 2vw, 36px); } @media (max-width: 900px) { .inline-list { grid-template-columns: 1fr; } } .inline-list li { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-md); line-height: 1.65; letter-spacing: -.04em; } .inline-list li b { flex-shrink: 0; font-family: "Noto Serif KR", serif; font-weight: 400; color: var(--gold-700); } /* 예방 습관 — 두 개씩, 세부 항목은 가로로 */ .care-grid--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 760px) { .care-grid--2 { grid-template-columns: 1fr; } } .care--full { grid-column: 1 / -1; } .care { padding: clamp(16px, 1.5vw, 24px) clamp(18px, 1.7vw, 28px); gap: 8px; } .care__icon { width: clamp(32px, 2.4vw, 40px); } .care__icon svg { color: #fff; } .care ul.care__inline { flex-direction: row; flex-wrap: wrap; gap: 2px clamp(16px, 1.8vw, 32px); } .care ul.care__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px clamp(20px, 2.4vw, 48px); } @media (max-width: 760px) { .care ul.care__cols { grid-template-columns: 1fr; } } .care li.is-warn { font-size: inherit; color: inherit; } /* 항문소양증 예방 관리 — 항목은 세로로, 내용은 가로로 */ .care-rows { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 20px); } .care-rows .care { display: grid; grid-template-columns: minmax(180px, 17%) 1fr; gap: 8px clamp(20px, 2.4vw, 48px); align-items: start; } @media (max-width: 760px) { .care-rows .care { grid-template-columns: 1fr; } } /* Key Point — 회색 상자, 전구 아이콘 */ .keypoint { background: var(--gray-50); color: var(--ink); } .keypoint__label { display: flex; align-items: center; gap: 8px; letter-spacing: -.04em; font-size: var(--fs-lg); font-weight: 600; color: var(--navy-600); } .keypoint__label svg { width: 24px; height: 24px; color: var(--gold-300); } .keypoint__item b { font-family: inherit; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.04em; color: var(--navy-600); } .keypoint__item span { color: var(--ink); } /* 악순환 원형 도식 + 설명 */ .loop-card { display: grid; grid-template-columns: clamp(200px, 19vw, 280px) 1fr; gap: clamp(20px, 3vw, 56px); align-items: center; } @media (max-width: 700px) { .loop-card { grid-template-columns: 1fr; justify-items: center; } } .loop-card__fig { margin: 0; width: 100%; max-width: 280px; } .loop-card__fig svg { display: block; width: 100%; height: auto; } .loop-card__text { display: flex; flex-direction: column; gap: .7em; } .loop-card__text p { font-size: var(--fs-lg); line-height: 1.75; letter-spacing: -.04em; } /* 검사 전 · 중 · 후 */ .phase-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: phase; } .phase-bar li { position: relative; } .phase-bar a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: clamp(14px, 1.3vw, 22px) clamp(16px, 1.8vw, 32px) clamp(14px, 1.3vw, 22px) clamp(28px, 2.6vw, 48px); background: var(--gray-50); color: var(--ink); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); transition: background .25s var(--ease); } .phase-bar li:first-child a { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); border-radius: var(--r-md) 0 0 var(--r-md); padding-left: clamp(18px, 1.8vw, 32px); } .phase-bar li:last-child a { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%); border-radius: 0 var(--r-md) var(--r-md) 0; } .phase-bar a:hover { background: var(--gold-200); color: var(--ink); } .phase-bar b { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.04em; color: var(--navy-600); } .phase-bar span { font-size: var(--fs-sm); color: var(--ink-soft); } @media (max-width: 640px) { .phase-bar span { display: none; } .phase-bar a { padding-block: 12px; } } .phase { display: grid; grid-template-columns: clamp(96px, 9vw, 150px) 1fr; gap: clamp(16px, 2.4vw, 48px); scroll-margin-top: calc(var(--header-h) + 80px); } .phase + .phase { padding-top: clamp(24px, 2.6vw, 48px); border-top: 1px dashed rgba(148, 98, 25, .4); } .phase__tag { position: sticky; top: calc(var(--header-h) + 84px); align-self: start; display: flex; flex-direction: column; gap: 2px; padding: clamp(12px, 1.1vw, 18px) 0 clamp(12px, 1.1vw, 18px) clamp(12px, 1.1vw, 18px); border-left: 3px solid var(--gold-700); } .phase__tag span { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--gold-700); font-weight: 600; } .phase__tag b { font-family: "Noto Serif KR", serif; font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; color: var(--navy-800); } .phase__body { min-width: 0; } @media (max-width: 760px) { .phase { grid-template-columns: 1fr; } .phase__tag { position: static; flex-direction: row; align-items: baseline; gap: 10px; } } /* 버튼형 링크 */ .btn-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: clamp(44px, 3vw, 54px); padding-inline: clamp(20px, 1.8vw, 32px); border-radius: var(--r-pill); background: var(--navy-900); color: var(--cream); font-size: var(--fs-sm); font-weight: 500; transition: .3s var(--ease); } .btn-pill:hover { background: var(--gold-700); color: var(--white); transform: translateY(-2px); } .btn-pill svg { transition: transform .3s var(--ease); } .btn-pill:hover svg { transform: translateX(4px); } /* 검사 주기 표 — 두 열 폭 고정, 가운데 맞춤 */ .tbl--cycle { table-layout: fixed; } .tbl--cycle th:first-child, .tbl--cycle td:first-child { width: 68%; } .tbl--cycle th, .tbl--cycle td { vertical-align: middle; line-height: 1.6; } .tbl--cycle thead th:last-child, .tbl--cycle tbody td:last-child { text-align: left; } .tbl--cycle tbody td:last-child { font-weight: 600; color: var(--navy-600); } .tbl--cycle .tbl__sub { margin-top: 2px; } /* 탭 안의 탭(분류 필터)은 클리닉의 질환 전환 탭과 같은 모양으로 */ .pill-nav[data-filter-group] { gap: clamp(8px, 1vw, 16px); padding-block: clamp(10px, .9vw, 16px); border-block: 1px solid var(--line); } .pill-nav[data-filter-group] .pill { height: auto; padding: 8px clamp(16px, 1.5vw, 28px); background: none; box-shadow: none; font-size: var(--fs-md); font-weight: 500; color: var(--ink-soft); } .pill-nav[data-filter-group] .pill:hover { transform: none; box-shadow: none; color: var(--gold-700); background: var(--gray-50); } .pill-nav[data-filter-group] .pill.is-active, .pill-nav[data-filter-group] .pill.is-active:hover { background: var(--gold-700); color: var(--white); } /* 블로그 목록 — 공지사항과 같은 표, 작은 표지 */ .board--blog .board__row { grid-template-columns: clamp(64px, 5.4vw, 96px) 1fr clamp(96px, 9vw, 150px) clamp(96px, 8.5vw, 130px); padding-block: clamp(10px, .9vw, 14px); } .board__thumb { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--gray-200); } .board__row--head .board__thumb { background: none; aspect-ratio: auto; } .board__thumb img { width: 100%; height: 100%; object-fit: cover; } .board--blog .board__src { font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; white-space: nowrap; } .board--blog .board__title { line-height: 1.55; } .board__hint { font-size: var(--fs-sm); color: var(--ink-soft); } @media (max-width: 640px) { .board--blog .board__row { grid-template-columns: 64px 1fr; grid-template-areas: "t title" "t meta"; column-gap: 12px; row-gap: 2px; } .board--blog .board__thumb { grid-area: t; align-self: center; } .board--blog .board__title { grid-area: title; } .board--blog .board__src { grid-area: meta; text-align: left; } .board--blog .board__date { display: none; } .board--blog .board__row--head { display: none; } } .btn-ghost--prof { gap: 10px; padding-left: 10px; } .btn-ghost--prof img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .board__row--pin .board__no { font-family: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--white); background: var(--navy-900); border-radius: var(--r-pill); padding: 3px 0; } .article__figure--full { max-width: 720px; margin-inline: auto; } .article__figure--full img { max-height: none; object-fit: contain; } /* ========================================================================== 52. 홈 3차 수정 (2026-09-21) ========================================================================== */ /* --- 증서 섹션 배경: 사선 두 톤 + 은은한 격자 무늬 --- */ .cert-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(112deg, #f4ecdc 0%, #f4ecdc 56%, #e9dcc0 56.1%, #efe4cd 100%); } .cert-band::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(148, 98, 25, .22) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: linear-gradient(112deg, transparent 0 40%, #000 75%); -webkit-mask-image: linear-gradient(112deg, transparent 0 40%, #000 75%); } .cert-band::after { content: ""; position: absolute; right: -6%; top: -60%; width: 46%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 68%); } /* --- 유튜브 · 블로그: 한 단씩, 낮게 --- */ .section--social { display: block; } .section--social .container { display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 32px); } .social-band { display: grid; grid-template-columns: minmax(240px, 24%) 1fr; gap: clamp(24px, 3.4vw, 64px); align-items: center; padding: clamp(22px, 2.2vw, 40px) clamp(22px, 2.6vw, 48px); border-radius: var(--r-lg); background: var(--gray-50); } @media (max-width: 1000px) { .social-band { grid-template-columns: 1fr; } } .social-band__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, .8vw, 12px); } .social-band__title { font-size: var(--fs-h3); line-height: 1.45; color: var(--ink); } .social-band__lead { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); } .btn-social { margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; height: clamp(44px, 3vw, 54px); padding-inline: clamp(18px, 1.6vw, 28px); border-radius: var(--r-pill); background: var(--navy-900); color: var(--cream); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: .3s var(--ease); } .btn-social:hover { background: #0e2231; color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 44, 62, .24); } .btn-social img { width: 22px; height: 22px; object-fit: contain; } .btn-social svg:last-child { transition: transform .3s var(--ease); } .btn-social:hover svg:last-child { transform: translateX(4px); } .social-band__videos { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.1vw, 20px); } .mini-video { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .mini-video .mini-media__title { font-size: var(--fs-sm); } .mini-video:hover .mini-media__title { color: var(--gold-700); } @media (max-width: 760px) { .social-band__videos { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; scroll-snap-type: x mandatory; } .social-band__videos::-webkit-scrollbar { display: none; } .mini-video { flex: 0 0 44%; scroll-snap-align: start; } } .social-band__posts { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); } @media (max-width: 760px) { .social-band__posts { grid-template-columns: 1fr; } } .social-band__posts .mini-row { padding: clamp(10px, .9vw, 14px) 0; } .social-band__posts .mini-row:first-child { padding-top: clamp(10px, .9vw, 14px); } .social-band__posts .mini-row__title { font-size: var(--fs-base); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* --- 진료 경력 타임라인: 강조 패널 + 단계별 등장 --- */ .stat-asof { margin-top: clamp(20px, 2vw, 36px); } .career-panel { margin-top: clamp(10px, 1vw, 16px); padding: clamp(28px, 3vw, 56px) clamp(24px, 3.2vw, 64px); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(242, 215, 180, .16), rgba(242, 215, 180, .05)); box-shadow: inset 0 0 0 1px rgba(242, 215, 180, .26); } .career-panel .career-line { margin-top: 0; } .career-panel .career-line__fill, .career-line.is-in .career-line__fill { width: 0; transition: width 1.5s cubic-bezier(.5, 0, .2, 1), background .6s; } .career-panel.is-s1 .career-line__fill { width: 3%; transition-duration: .5s; } .career-panel.is-s2 .career-line__fill { width: 16%; transition-duration: .7s; } .career-panel.is-s3 .career-line__fill { width: 100%; background: linear-gradient(90deg, var(--gold-300), #fff3dc 60%, var(--gold-200)); box-shadow: 0 0 14px rgba(242, 215, 180, .55); } .career-panel .career-line__point, .career-line.is-in .career-line__point { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: 0s; } .career-panel.is-s1 .career-line__point:nth-child(1), .career-panel.is-s2 .career-line__point:nth-child(2), .career-panel.is-s4 .career-line__point:nth-child(3) { opacity: 1; transform: none; } .career-panel .career-line__point--now::before { animation: none; } .career-panel.is-s4 .career-line__point--now::before { animation: nowPulse 2.2s ease-out .4s infinite; } .career-panel .career-line__point::before { box-shadow: 0 0 0 4px #2c3f4f; } @media (max-width: 700px) { .career-panel .career-line__fill, .career-line.is-in .career-line__fill { width: 100%; height: 0; transition: height 1.5s cubic-bezier(.5, 0, .2, 1); } .career-panel.is-s1 .career-line__fill { width: 100%; height: 6%; } .career-panel.is-s2 .career-line__fill { width: 100%; height: 40%; } .career-panel.is-s3 .career-line__fill { width: 100%; height: 100%; } } .article__figure--center { margin-inline: auto; } .article__actions { justify-content: center; } /* ========================================================================== 53. 4차 수정 (2026-09-22) — 섹션 구분 · 여백 ========================================================================== */ /* 섹션 사이 여백을 넉넉하게 */ :root { --sec-pt: clamp(92px, 10vw, 196px); --sec-pb: clamp(104px, 11.4vw, 220px); } .mt-xl { margin-top: clamp(92px, 10vw, 196px); } .section--social { padding-top: clamp(84px, 8.6vw, 168px); } .cert-band { margin-top: clamp(64px, 6.4vw, 124px); } /* 컨테이너 안에서 배경만 화면 끝까지 — 영역 구분용 */ .bleed { position: relative; padding-block: clamp(52px, 5.4vw, 104px); --bleed: #f8f4ec; } .bleed::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; z-index: -1; background: var(--bleed); } .bleed--cream { --bleed: #f8f4ec; } .bleed--gray { --bleed: #f4f4f2; } .bleed--navy { --bleed: #e9eef3; } .bleed + .bleed { margin-top: 0; } .bleed .step, .bleed .info-card, .bleed .sym-card, .bleed .num-card, .bleed .list-panel, .bleed .chan-card { background: var(--white); } #media.section--tight { padding-block: 0; } #media .bleed--navy .sub-head { color: var(--gold-700); } /* 홈 — 직행좌석 뱃지: 흰 바탕, 테두리 없음 */ .chip--express { background: var(--white); box-shadow: none; color: var(--navy-600); } /* 홈 — 주차 안내 보조 문구 */ .hours-line strong small { display: block; margin-top: 1px; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-soft); letter-spacing: -.03em; } /* 홈 — 공지사항: 흰 배경 (구분 배경은 아래 진료 안내로 이동) */ .home-notice { background: var(--white); padding-bottom: var(--sec-pt); margin-top: 0; } /* 홈 — 숫자로 보는 진료 경력: 상하 여백 확대 */ .band--record { padding-block: clamp(110px, 10.6vw, 204px); } /* 홈 — 언론보도 및 대외활동: 항목 간격 +50%, 소제목 크게 */ .section--media .stack.mt-lg { margin-top: clamp(78px, 9.3vw, 177px); } .section--media .stack.mt-md { margin-top: clamp(48px, 4.8vw, 90px); } .section--media .sub-head { font-size: calc(var(--fs-h3) * 1.28); line-height: 1.5; color: var(--navy-800); } .section--media .hook { margin-top: 0; } /* 진료 안내 — 진료 시간을 크게 */ .hours-big { padding: clamp(32px, 4vw, 76px) clamp(24px, 5vw, 96px); } .hours-big .tbl th, .hours-big .tbl td { font-size: var(--fs-h3); line-height: 1.5; padding-block: clamp(18px, 1.9vw, 34px); } .hours-big .tbl th { width: 42%; font-weight: 600; color: var(--navy-800); } .hours-big .tbl td { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .hours-big .tbl__sub { display: inline-block; margin-left: 14px; font-size: var(--fs-md); font-weight: 400; } .hours-big .note { font-size: var(--fs-lg); margin-top: clamp(20px, 2vw, 36px); } @media (max-width: 640px) { .hours-big .tbl th, .hours-big .tbl td { font-size: 17px; } .hours-big .tbl__sub { display: block; margin-left: 0; font-size: 13.5px; } } /* ========================================================================== 54. 홈 4차 수정요청 반영 (2026-09-21) ========================================================================== */ /* --- 상단 네비: 홈 최상단에서는 투명, 스크롤하면 흰색 --- */ body.is-home .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; } body.is-home.nav-open .site-header { background: var(--white); border-bottom-color: var(--line-navy); } .brand img { transition: filter .35s var(--ease); } .gnb__link { transition: opacity .25s var(--ease), color .35s var(--ease); } /* 다크 슬라이드(원장 이력 · 저서) 위에서는 로고 · 메뉴 · 버튼을 밝게 */ body.is-home:not(.nav-open):has(.hero-slider[data-tone="dark"]) .site-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); } body.is-home:not(.nav-open):has(.hero-slider[data-tone="dark"]) .site-header:not(.is-scrolled) .nav-toggle span { background: #fff; } @media (min-width: 1181px) { body.is-home:not(.nav-open):has(.hero-slider[data-tone="dark"]) .site-header:not(.is-scrolled) .gnb__link { color: var(--cream); } body.is-home:not(.nav-open):has(.hero-slider[data-tone="dark"]) .site-header:not(.is-scrolled) .gnb__link.is-active { color: var(--gold-200); } body.is-home:not(.nav-open):has(.hero-slider[data-tone="dark"]) .site-header:not(.is-scrolled) > .container > .btn-book, body.is-home:not(.nav-open):has(.hero-slider[data-tone="dark"]) .site-header:not(.is-scrolled) .header-inner > .btn-book { background: rgba(255, 255, 255, .92); color: var(--navy-800); } } /* --- 플로팅 버튼: 라벨을 또렷하게 --- */ .side-dock__label { font-weight: 600; color: var(--navy-800); } @media (max-width: 900px) { .side-dock__label { font-weight: 600; color: var(--navy-800); } } /* --- 히어로 저서 슬라이드: 사진 배경 대신 브랜드 네이비, 숫자는 작게 · 구분선 --- */ .hero-slide--books { background: linear-gradient(150deg, #1e3349 0%, #142c3e 54%, #0e2231 100%); } .hero-slide--books .hero-slide__media, .hero-slide--books .hero-slide__wash { display: none; } .hero-slide--books::after { content: ""; position: absolute; right: -14%; top: -36%; width: 58%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(197, 163, 113, .15), transparent 68%); } .hero-slide--books .hero-slide__inner { position: relative; z-index: 1; } .hero-books__nums { gap: 0; } .hero-books__num { padding-inline: clamp(20px, 2.2vw, 40px); } .hero-books__num:first-child { padding-left: 0; } .hero-books__num + .hero-books__num { border-left: 1px solid rgba(249, 247, 242, .22); } .hero-books__num b { font-size: calc(var(--fs-stat) * .66); color: var(--gold-100); } .hero-books__covers { gap: clamp(8px, .85vw, 14px); } .hero-books__covers img { border-radius: 4px; filter: saturate(.82) contrast(.97); box-shadow: 0 12px 26px rgba(0, 0, 0, .4); outline: 1px solid rgba(255, 255, 255, .09); outline-offset: -1px; } /* --- 대표원장 소개 카드: 텍스트 중심, 사진은 모노톤 띠로 --- */ .dr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 24px); } @media (max-width: 1100px) { .dr-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .dr-grid { grid-template-columns: 1fr; } } .dr-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #f8f6f1; min-height: clamp(280px, 23.5vw, 450px); } .dr-card__img { position: relative; flex-shrink: 0; height: clamp(120px, 9.9vw, 190px); background-size: cover; background-position: center; filter: grayscale(1) contrast(.9) brightness(1.03); } .dr-card__img::after { content: ""; position: absolute; inset: 0; background: rgba(70, 70, 70, .12); } .dr-card__body { flex: 1; display: flex; flex-direction: column; gap: clamp(8px, .8vw, 14px); padding: clamp(22px, 2vw, 36px) clamp(22px, 2vw, 34px) clamp(24px, 2.2vw, 40px); } .dr-card__title { font-size: var(--fs-h4); line-height: 1.55; color: var(--navy-800); white-space: pre-line; text-wrap: balance; } .dr-card__title b { font-weight: 600; color: var(--gold-700); } .dr-card__title small { font-size: .72em; font-weight: 400; color: var(--ink-soft); } .dr-card__desc { font-size: var(--fs-base); line-height: 1.7; letter-spacing: -.04em; color: var(--ink-soft); } .dr-card--award { position: relative; } .dr-card--award .award-card__icon { position: absolute; right: clamp(18px, 1.7vw, 30px); top: clamp(16px, 1.5vw, 28px); width: clamp(46px, 4vw, 72px); opacity: .16; } .dr-card--award .award-card__list { margin-top: clamp(4px, .5vw, 10px); } .dr-card--award .award-card__list li { padding-block: clamp(5px, .5vw, 9px); } /* --- 숫자로 보는 진료 경력: 서브카피 키움 --- */ .stat-grid--5 .stat__desc { font-size: var(--fs-sm); line-height: 1.7; color: rgba(249, 247, 242, .76); } /* --- 책 소개 밴드: 배경 사진 제거, 브랜드 네이비 --- */ .band--books { background: linear-gradient(150deg, #1e3349 0%, #163049 48%, #0f2233 100%); } /* --- 진료 안내 · 대중교통: 배경으로 한 덩어리 --- */ .home-info { background: #f7f3ea; } .home-info .info-card, .home-info .split--equal > .stack > .info-card { background: var(--white); } .home-info .map-embed { background: var(--white); } /* ========================================================================== 55. 5차 수정 (2026-09-21) ========================================================================== */ /* --- 1. 히어로 원장 이력: 강조도 모두 regular --- */ .hero-cv__list b { font-weight: 400; } /* --- 2. 히어로 저서 슬라이드: 브라운 · 골드 톤 --- */ .hero-slide--books { background: linear-gradient(150deg, #8b693a 0%, #755620 50%, #563d10 100%); } .hero-slide--books::after { background: radial-gradient(circle, rgba(255, 236, 205, .18), transparent 68%); } .hero-books__num + .hero-books__num { border-left-color: rgba(249, 243, 230, .3); } .hero-slide--books .hero-btn { color: var(--brown-700); } /* --- 3. 원장 카드: 2열 · 황금비(1.618:1) 이미지 --- */ .dr-grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .dr-grid { grid-template-columns: 1fr; } } .dr-card { min-height: 0; } .dr-card__img { height: auto; aspect-ratio: 1.618 / 1; } /* --- 4. 진료 안내 카드 아이콘 (아이콘 시스템: 골드 원 + 흰 스트로크) --- */ .info-card__icon { display: grid; place-items: center; width: clamp(40px, 3.2vw, 52px); aspect-ratio: 1; border-radius: 50%; background: var(--gold-300); color: #fff; margin-bottom: clamp(8px, .8vw, 14px); } .info-card__icon svg { width: 58%; height: 58%; } /* --- 6. Key Point: 항목 사이 세로 구분선 --- */ .keypoint__item + .keypoint__item { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 36px); } @media (max-width: 860px) { .keypoint__item + .keypoint__item { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: clamp(14px, 2vw, 24px); } } /* --- 7 · 12. 클리닉 페이지: 제목 위계 · 블록 번호 · 간격 확대 --- */ body.is-clinic .topic__title { font-size: var(--fs-h2); } body.is-clinic .section--pb .sub-head { font-size: calc(var(--fs-h3) * 1.3); line-height: 1.5; color: var(--navy-800); } body.is-clinic .section--pb .bleed--dark .sub-head { color: var(--cream); } body.is-clinic .section--pb .sub-head-sm { font-size: var(--fs-h4); } body.is-clinic .section--pb .stack.mt-lg { margin-top: clamp(88px, 10.6vw, 200px); } body.is-clinic .bleed { padding-block: clamp(64px, 6.6vw, 128px); } body.is-clinic .topic + .topic { margin-top: clamp(88px, 10.6vw, 200px); padding-top: clamp(88px, 10.6vw, 200px); } /* --- 10. 증상 섹션: 짙은 남색 배경 --- */ .bleed--dark { --bleed: var(--navy-900); } .bleed--dark .sub-head { color: var(--cream); } .bleed--dark .sub-head-sm { color: var(--gold-200); } .bleed--dark .note { color: rgba(249, 247, 242, .72); } .bleed--dark .note strong { color: var(--cream); } .bleed--dark .rich { color: rgba(249, 247, 242, .92); } .bleed--dark .reason-list li { border-color: rgba(249, 247, 242, .18); } .bleed--dark .reason-list li:first-child { border-top-color: rgba(249, 247, 242, .18); } .bleed--dark .step, .bleed--dark .sym-card, .bleed--dark .info-card, .bleed--dark .selfcheck { color: var(--ink); } /* --- 8. 자가진단: 셀프 체크리스트 --- */ .selfcheck { border-radius: var(--r-lg); background: var(--white); color: var(--ink); box-shadow: 0 24px 60px rgba(8, 20, 30, .22); padding: clamp(24px, 2.4vw, 44px) clamp(22px, 2.4vw, 44px); } .selfcheck__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-bottom: clamp(14px, 1.4vw, 22px); border-bottom: 2px solid var(--navy-900); } .selfcheck__badge { padding: 5px 14px; border-radius: var(--r-pill); background: var(--navy-900); color: var(--gold-200); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; white-space: nowrap; } .selfcheck__title { font-size: var(--fs-h4); line-height: 1.45; color: var(--navy-800); } .selfcheck__hint { flex-basis: 100%; font-size: var(--fs-sm); color: var(--ink-soft); } .selfcheck__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 3.2vw, 60px); } @media (max-width: 760px) { .selfcheck__list { grid-template-columns: 1fr; } } .selfcheck__item { display: flex; gap: clamp(10px, 1vw, 16px); align-items: flex-start; padding-block: clamp(11px, 1.05vw, 17px); border-bottom: 1px dashed rgba(101, 101, 101, .32); font-size: var(--fs-md); line-height: 1.65; letter-spacing: -.04em; } .selfcheck__box { flex-shrink: 0; margin-top: .14em; width: 1.4em; aspect-ratio: 1; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--gold-500); display: grid; place-items: center; color: var(--gold-700); } .selfcheck__box svg { width: 66%; height: 66%; } /* --- 14. 책 소개 카드: 버튼 대신 하단 뱃지 --- */ .book-card { align-items: stretch; } .book-card .figure { align-self: flex-start; } .book-card .chip.book-card__kind { margin-top: auto; align-self: flex-start; min-width: 0; height: auto; padding: 4px 13px; font-size: var(--fs-xs); font-weight: 500; } .book-card .step__desc { margin-bottom: clamp(10px, 1vw, 16px); } /* --- 12. 경고 콜아웃 (시술 후 주의) --- */ .callout--warn { background: #fcf1ee; border-left-color: #c96b6b; display: flex; flex-direction: column; gap: 10px; } .callout--warn .callout__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.04em; color: #a34a4a; } .callout--warn .callout__title svg { flex-shrink: 0; } .callout__list { display: flex; flex-direction: column; gap: 4px; } .callout__list li { position: relative; padding-left: 14px; font-size: var(--fs-md); line-height: 1.75; letter-spacing: -.04em; color: var(--ink); } .callout__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: #c96b6b; } /* --- 15. 서브페이지 상단 이미지: 좌측은 완전 불투명 --- */ .page-hero__wash { background: linear-gradient(270deg, rgba(253, 247, 239, 0) 0%, rgba(253, 247, 239, .5) 30%, rgba(253, 247, 239, .95) 55%, #fdf7ef 72%, #fdf7ef 100%), linear-gradient(rgba(255, 255, 255, .25) 0%, rgba(244, 241, 233, .25) 100%); } /* ========================================================================== 56. 6차 수정 (2026-09-21) ========================================================================== */ /* --- 원장 카드: 박스 없이 이미지 + 텍스트, 원본 컬러 보정으로 톤 통일 --- */ .dr-card { background: none; border-radius: 0; overflow: visible; } .dr-card__img { border-radius: var(--r-lg); filter: saturate(.72) contrast(.94) brightness(1.04); } .dr-card__img::after { border-radius: inherit; background: rgba(58, 74, 88, .1); } .dr-card__body { padding: clamp(16px, 1.5vw, 26px) 2px 0; gap: clamp(6px, .6vw, 10px); } .dr-card__title { font-size: var(--fs-h3); line-height: 1.5; } .dr-card__desc { font-size: var(--fs-md); } .dr-card--award .award-card__icon { right: 6px; top: 2px; opacity: .14; } .dr-card--award .dr-card__body { padding-top: clamp(6px, .6vw, 10px); } .dr-card--award .award-card__list { margin-top: clamp(8px, .8vw, 14px); } /* --- 히어로 저서: 진열 촬영 사진 + 베이지 톤, 저서 수는 두 줄 텍스트로 --- */ .hero-slide--books { background: #f1e9d8; } .hero-slide--books::after { content: none; } .hero-slide--books .hero-slide__media { display: block; inset: 0 0 0 42%; background-position: 50% 52%; } .hero-slide--books .hero-slide__wash { display: block; background: linear-gradient(90deg, #f1e9d8 0%, #f1e9d8 44%, rgba(241, 233, 216, .86) 57%, rgba(241, 233, 216, .28) 78%, rgba(241, 233, 216, 0) 100%); } .hero-books { display: block; max-width: min(620px, 50%); } .hero-slide--books .hero-cv__eyebrow { color: var(--gold-700); } .hero-slide--books .hero-cv__title { color: var(--navy-800); } .hero-books__count { font-size: var(--fs-lg); line-height: 1.8; letter-spacing: -.04em; color: var(--ink); white-space: pre-line; } .hero-slide--books .hero-btn { background: var(--navy-900); color: var(--cream); } .hero-slide--books .hero-btn:hover { background: #0e2231; color: var(--white); } @media (max-width: 900px) { .hero-slide--books .hero-slide__media { inset: 0; background-position: 50% 30%; } .hero-slide--books .hero-slide__wash { background: rgba(243, 236, 221, .93); } .hero-books { max-width: none; } } /* ========================================================================== 57. 7차 수정 (2026-09-21) — 히어로 타이포 리파인 · 인증 섹션 재설계 ========================================================================== */ /* --- 히어로: 타이틀은 크고 가볍게, 상세는 얇게 --- */ .hero__title { font-size: calc(var(--fs-hero) * 1.14); font-weight: 300; line-height: 1.48; } .hero-cv { max-width: min(1000px, 64%); } .hero-cv__title { font-size: calc(var(--fs-hero) * .84); font-weight: 300; line-height: 1.45; } .hero-cv__eyebrow { font-size: calc(var(--fs-sm) * .94); font-weight: 400; letter-spacing: .3em; } .hero-cv__list { gap: clamp(9px, .85vw, 15px); } .hero-cv__list li { font-weight: 300; font-size: var(--fs-base); color: rgba(249, 247, 242, .82); } .hero-cv__list li::before { border-left-width: 1.5px; border-bottom-width: 1.5px; opacity: .85; } .hero-cv__list b { font-weight: 400; color: var(--cream); } .hero-cv__list::before { content: ""; width: 46px; height: 1px; background: var(--gold-400); margin-block: clamp(4px, .5vw, 10px) clamp(2px, .3vw, 6px); } .hero-books__count { position: relative; font-weight: 300; padding-top: clamp(14px, 1.3vw, 22px); } .hero-books__count::before { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 1px; background: var(--gold-500); } .hero-btn { font-weight: 400; } @media (max-width: 640px) { .hero-cv__title { font-size: 24px; } .hero__title { font-weight: 500; } } /* --- 인증서 섹션: 월계수 장식의 센터 정렬 --- */ .cert-band { background: var(--white); } .cert-band::before, .cert-band::after { content: none; } .cert-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(12px, 1.2vw, 20px); } .cert-hero__head { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 60px); } .cert-laurel { width: clamp(34px, 3.8vw, 72px); height: auto; color: var(--gold-400); flex-shrink: 0; } .cert-laurel--r { transform: scaleX(-1); } .cert-hero__text { display: flex; flex-direction: column; gap: clamp(6px, .6vw, 10px); } .cert-hero__kicker { font-size: var(--fs-sm); letter-spacing: .18em; color: var(--ink-soft); } .cert-hero__title { font-size: var(--fs-h2); line-height: 1.4; color: var(--navy-800); } .cert-hero__title b { display: block; margin-top: 4px; font-weight: 500; font-size: calc(var(--fs-h2) * .6); color: var(--gold-700); letter-spacing: .02em; } .cert-hero__name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.03em; color: var(--ink); } .cert-hero__desc { font-size: var(--fs-md); color: var(--ink-soft); } .cert-hero__imgs { position: relative; z-index: 0; display: flex; justify-content: center; gap: clamp(20px, 3vw, 56px); margin-top: clamp(12px, 1.2vw, 22px); padding: 0 clamp(24px, 5vw, 100px) clamp(28px, 3vw, 56px); } .cert-hero__imgs::before { content: ""; position: absolute; left: 0; right: 0; top: 40%; bottom: 0; z-index: -1; border-radius: var(--r-lg); background: #f4f1ea; } .cert-hero .cert { width: clamp(220px, 22vw, 350px); } @media (max-width: 560px) { .cert-hero .cert { width: min(42%, 220px); } .cert-hero__imgs { padding-inline: clamp(12px, 4vw, 24px); } } /* ========================================================================== 58. 8차 수정 (2026-09-22) — 히어로 좌측 정렬 · 워시 완화 ========================================================================== */ /* --- 슬라이드 1: 좌측 정렬 + 원장 사진 (우측) --- */ .hero-slide--brand { background: #fbf6ee; } .hero-slide--brand .hero-slide__media { inset: 0 0 0 32%; } .hero-slide--brand .hero-slide__wash { background: linear-gradient(90deg, #fbf6ee 0%, #fbf6ee 36%, rgba(251, 246, 238, .85) 48%, rgba(251, 246, 238, .18) 66%, rgba(251, 246, 238, 0) 80%); } .hero-brand { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.4vw, 26px); max-width: min(780px, 58%); } .hero-slide--brand .hero__title { text-align: left; } @media (max-width: 900px) { .hero-slide--brand .hero-slide__media { inset: 0; } .hero-slide--brand .hero-slide__wash { background: rgba(251, 246, 238, .9); } .hero-brand { max-width: none; } } /* --- 갈색 헤어라인 제거 --- */ .hero-cv__list::before { content: none; } .hero-books__count::before { content: none; } .hero-books__count { padding-top: 0; } /* --- 버튼: 텍스트 크기는 유지, 버튼만 작게 --- */ .hero-btn { height: clamp(38px, 2.5vw, 46px); padding-inline: clamp(16px, 1.3vw, 24px); gap: 8px; } /* --- 이력 상세: 두께 완전 균일 --- */ .hero-cv__list b { font-weight: inherit; color: inherit; } /* --- 원장 슬라이드: 얼굴 쪽 그라데이션 완화 --- */ .hero-slide--doctor .hero-slide__wash { background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-900) 44%, rgba(20, 44, 62, .68) 54%, rgba(20, 44, 62, .08) 70%, rgba(20, 44, 62, 0) 80%); } /* --- 책 슬라이드: 우측 워시 완화로 사진 선명하게 (상단 메뉴 영역만 옅게 가림) --- */ .hero-slide--books .hero-slide__wash { background: linear-gradient(180deg, rgba(241, 233, 216, .8) 0%, rgba(241, 233, 216, 0) 18%), linear-gradient(90deg, #f1e9d8 0%, #f1e9d8 42%, rgba(241, 233, 216, .76) 52%, rgba(241, 233, 216, .12) 66%, rgba(241, 233, 216, 0) 76%); } /* ========================================================================== 59. 9차 수정 (2026-09-22) — 히어로 마무리 ========================================================================== */ /* --- 키카피: 세 슬라이드 동일 크기 · 행간 확대 --- */ .hero__title { font-size: calc(var(--fs-hero) * .84); line-height: 1.62; } .hero-cv__title { line-height: 1.62; } .hero-cv__title b { color: var(--white); } @media (max-width: 640px) { .hero__title { font-size: 24px; } } /* --- 슬라이드 1: 심볼은 크고 은은한 워터마크로, 서브카피 추가 --- */ .hero-slide--brand::before { content: ""; position: absolute; z-index: 0; pointer-events: none; left: clamp(-70px, -3.4vw, -24px); bottom: clamp(-90px, -5vw, -34px); width: clamp(280px, 30vw, 540px); aspect-ratio: 221 / 227; background: url("../img/logo-mark.png") center / contain no-repeat; opacity: .06; } .hero-slide--brand .hero-slide__inner { position: relative; z-index: 1; } .hero-brand__sub { font-size: var(--fs-lg); font-weight: 300; line-height: 1.6; letter-spacing: -.04em; color: var(--ink-soft); } /* --- 그라데이션 · 이미지 경계선 제거 (사진 영역은 선명 유지) --- */ .hero-slide--brand .hero-slide__wash { background: linear-gradient(90deg, #fbf6ee 0%, #fbf6ee 38%, rgba(251, 246, 238, .9) 44%, rgba(251, 246, 238, .65) 52%, rgba(251, 246, 238, .38) 60%, rgba(251, 246, 238, .16) 68%, rgba(251, 246, 238, .05) 75%, rgba(251, 246, 238, 0) 84%); } .hero-slide--doctor .hero-slide__wash { background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-900) 48%, rgba(20, 44, 62, .86) 54%, rgba(20, 44, 62, .58) 60%, rgba(20, 44, 62, .32) 66%, rgba(20, 44, 62, .14) 72%, rgba(20, 44, 62, .05) 78%, rgba(20, 44, 62, 0) 86%); } .hero-slide--books .hero-slide__wash { background: linear-gradient(180deg, rgba(241, 233, 216, .8) 0%, rgba(241, 233, 216, 0) 18%), linear-gradient(90deg, #f1e9d8 0%, #f1e9d8 44%, rgba(241, 233, 216, .82) 50%, rgba(241, 233, 216, .55) 57%, rgba(241, 233, 216, .3) 64%, rgba(241, 233, 216, .12) 71%, rgba(241, 233, 216, .04) 77%, rgba(241, 233, 216, 0) 84%); } /* --- 책 슬라이드: 밝은 배경용 체크 리스트 --- */ .hero-slide--books .hero-cv__list li { color: var(--ink); } .hero-slide--books .hero-cv__list li::before { border-color: var(--gold-600); } /* --- 모바일: 텍스트 위 · 이미지 아래 상하 배치 --- */ @media (max-width: 900px) { .hero-slide { display: flex; flex-direction: column; align-items: stretch; min-height: 0; } .hero-slide__wash { display: none !important; } .hero-slide .hero-slide__media { position: relative; order: 3; flex: 1 1 auto; z-index: 0; min-height: clamp(260px, 80vw, 400px); inset: auto; } .hero-slide__inner, .hero__inner { order: 1; } .hero-slide__inner { padding-block: calc(var(--header-h) + 16px) 28px; } .hero-slide--brand::before { display: none; } } /* ========================================================================== 60. 10차 수정 (2026-09-22) ========================================================================== */ /* --- 1. 플로팅 버튼: 픽토그램-라벨 간격 --- */ .side-dock a, .side-dock .side-dock__btn { gap: 7px; } @media (max-width: 900px) { .side-dock a, .side-dock .side-dock__btn { gap: 6px; } } /* --- 2. 원장 카드: 간격 확대 · 타이틀 키움 · 컬러 통일 · 표창 카드 배경 --- */ .dr-grid { gap: clamp(30px, 3vw, 52px) clamp(36px, 3.8vw, 64px); } .dr-card__title { font-size: calc(var(--fs-h3) * 1.1); } .dr-card__title b { color: inherit; font-weight: inherit; } .dr-card__title--fit { white-space: nowrap; } .dr-card--award { background: #f8f1e2; border-radius: var(--r-lg); padding: clamp(24px, 2.2vw, 40px); } .dr-card--award .dr-card__body { padding: 0; } .dr-card--award .award-card__list li { border-bottom-color: rgba(148, 98, 25, .16); } /* --- 3 · 4 · 5 · 6. 히어로 --- */ .hero__title, .hero-cv__title { font-size: calc(var(--fs-hero) * .84 + 4px); } .hero__title { font-weight: 400; } .hero-cv__title b { font-weight: inherit; } .hero-cv__eyebrow { margin-bottom: clamp(-14px, -.8vw, -6px); } .hero-cv { max-width: min(1060px, 68%); } .hero-books { max-width: min(880px, 58%); } .hero-brand { max-width: min(840px, 58%); } .hero-slide--brand::before { background-image: url("../img/logo-mark-xl.png"); } .hero-slide--doctor .hero-slide__wash { background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-900) 48%, rgba(20, 44, 62, .86) 54%, rgba(20, 44, 62, .66) 60%, rgba(20, 44, 62, .42) 66%, rgba(20, 44, 62, .18) 72%, rgba(20, 44, 62, .06) 78%, rgba(20, 44, 62, 0) 86%); } @media (max-width: 640px) { .hero__title, .hero-cv__title { font-size: 26px; } } /* --- 7. 대표원장 소개 워터마크 위치 --- */ body.is-home .watermark--r { top: 1%; } /* --- 8. 모바일 히어로: 텍스트 영역 높이 통일 --- */ @media (max-width: 900px) { .hero-slide__inner { min-height: var(--hero-txt, 0px); } } /* --- 9. 홈 메인 타이틀 확대 --- */ body.is-home .sec-head__title { font-size: calc(var(--fs-h2) + 4px); } /* --- 10. 인증서 섹션: 남색 배경 --- */ .cert-band { background: var(--navy-900); } .cert-hero__kicker { color: rgba(249, 247, 242, .68); } .cert-hero__title { color: var(--cream); } .cert-hero__title b { color: var(--gold-200); } .cert-hero__name { color: var(--white); } .cert-laurel { color: var(--gold-300); } .cert-hero__imgs { padding-bottom: clamp(24px, 2.4vw, 44px); } .cert-hero__imgs::before { background: rgba(249, 247, 242, .06); } .cert-hero .cert { width: clamp(190px, 18.5vw, 300px); } .cert-hero__foot { font-size: var(--fs-md); font-weight: 300; line-height: 1.8; color: rgba(249, 247, 242, .85); } /* --- 11. 유튜브 · 블로그: 가운데 정렬 + full width 배경 --- */ .section--social { padding-top: 0; } .section--social .container { display: block; } .social-strip { padding-block: clamp(64px, 6.6vw, 128px); } .social-strip--yt { background: #f8f4ec; } .social-strip--blog { background: #eef1f4; } .social-strip__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(10px, 1vw, 16px); margin-bottom: clamp(30px, 3.2vw, 56px); } .social-strip__intro .social-band__title { font-size: calc(var(--fs-h3) * 1.2); } .social-strip__intro .btn-social { margin-top: 6px; } .social-strip__posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.5vw, 26px); } .post-mini { display: flex; flex-direction: column; gap: 8px; background: var(--white); border-radius: var(--r-md); padding: clamp(10px, 1vw, 16px); box-shadow: 0 2px 12px rgba(20, 44, 62, .07); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .post-mini:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .post-mini__thumb { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--gray-200); } .post-mini__thumb img { width: 100%; height: 100%; object-fit: cover; } .post-mini__title { font-size: var(--fs-base); font-weight: 500; line-height: 1.5; letter-spacing: -.04em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-mini:hover .post-mini__title { color: var(--gold-700); } .post-mini__meta { font-size: var(--fs-xs); color: var(--ink-mute); } @media (max-width: 760px) { .social-strip__posts { grid-template-columns: repeat(2, 1fr); } } /* --- 12. 대표원장 경력 타임라인: 패널 제거, 담백하게 --- */ .career-panel { margin-top: clamp(36px, 3.6vw, 64px); padding: 0; background: none; box-shadow: none; border-radius: 0; } .career-line__track { height: 1px; background: rgba(249, 247, 242, .22); } .career-panel .career-line__point::before { width: 10px; height: 10px; background: var(--gold-300); box-shadow: none; } .career-panel.is-s3 .career-line__fill { background: var(--gold-300); box-shadow: none; } .career-panel .career-line__year { font-size: calc(var(--fs-h3) * 1.05); } .career-panel.is-s4 .career-line__point--now::before { animation: none; } /* --- 14. 병원소개 진료안내: 좌 표 · 우 사진 --- */ .info-figure { aspect-ratio: auto; min-height: 320px; } .info-figure img { height: 100%; } /* --- 16. 검사 전 · 중 · 후: 번호 배지 세로 스텝 --- */ div.stack:has(> .phase) { counter-reset: phasen; } .phase { display: block; position: relative; counter-increment: phasen; padding-left: clamp(56px, 5.6vw, 96px); } .phase + .phase { border-top: 0; padding-top: clamp(44px, 4.4vw, 80px); } .phase:not(:last-child)::before { content: ""; position: absolute; left: clamp(18px, 1.75vw, 28px); top: clamp(48px, 4.4vw, 72px); bottom: calc(clamp(44px, 4.4vw, 80px) * -1); width: 2px; background: linear-gradient(rgba(148, 98, 25, .35), rgba(148, 98, 25, .1)); } .phase::after { content: counter(phasen); position: absolute; left: 0; top: -4px; width: clamp(38px, 3.5vw, 58px); aspect-ratio: 1; border-radius: 50%; background: var(--gold-700); color: #fff; display: grid; place-items: center; font-family: "Noto Serif KR", serif; font-size: clamp(17px, 1.4vw, 24px); } .phase__tag { position: static; display: flex; flex-direction: column; gap: 2px; border-left: 0; padding: 0; margin-bottom: clamp(14px, 1.4vw, 24px); } .phase__tag b { font-size: var(--fs-h3); } @media (max-width: 760px) { .phase { padding-left: 52px; } .phase__tag { flex-direction: column; align-items: flex-start; } } /* --- 17. 게시판 목록 페이지네이션 (공지사항 · 언론보도 · 블로그) --- */ .board-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 2vw, 32px); } .board-pager__btn { width: clamp(38px, 2.7vw, 46px); aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); transition: .25s var(--ease); } .board-pager__btn:hover { color: var(--gold-700); } .board-pager__btn.is-active { background: var(--navy-900); color: var(--cream); box-shadow: none; } .board-pager__btn--arrow { font-size: var(--fs-md); } @media (max-width: 480px) { .board-pager { gap: 6px; } .board-pager__btn { width: 34px; } } /* ========================================================================== 61. 11차 수정 (2026-09-22) — 모바일 다듬기 ========================================================================== */ /* --- 단계 일러스트: 칸별 SVG — 데스크톱은 한 줄, 모바일은 한 칸씩 --- */ .illust-steps { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: clamp(8px, .9vw, 16px); } .illust-steps svg { display: block; width: 100%; height: auto; min-width: 0; } .illust:has(.illust-steps) { overflow: visible; } @media (max-width: 760px) { .illust-steps { grid-template-columns: 1fr; gap: 14px; max-width: 340px; margin-inline: auto; } } /* --- 원장 카드: nowrap 타이틀이 그리드 폭을 밀어내지 않게 --- */ .dr-grid > * { min-width: 0; } /* --- 모바일 히어로: 줄넘김 자연스럽게 · 사진 크롭 보정 --- */ @media (max-width: 900px) { .hero-cv, .hero-books, .hero-brand { max-width: none; } .hero__title, .hero-cv__title, .hero-books__count, .hero-brand__sub { white-space: normal; } .hero-slide .hero-slide__media { min-height: clamp(300px, 92vw, 460px); } .hero-slide--brand .hero-slide__media { background-position: 50% 24% !important; } .hero-slide--doctor .hero-slide__media { background-position: 55% 14% !important; } .hero-slide--books .hero-slide__media { background-position: 50% 42% !important; } } @media (max-width: 640px) { .hero__title, .hero-cv__title { font-size: 23px; } .hero-cv__list li { font-size: 14px; } } /* ========================================================================== 62. 12차 수정 (2026-09-22) ========================================================================== */ /* --- 치질(치핵)이란? 실사풍 일러스트 --- */ .illust--img { padding: clamp(12px, 1.2vw, 20px); } .illust--img img { width: 100%; height: auto; border-radius: 10px; display: block; } /* --- 유튜브 · 블로그: 버튼은 리스트 아래 가운데 --- */ .social-strip__more { display: flex; justify-content: center; margin-top: clamp(26px, 2.8vw, 48px); } .social-strip__intro { margin-bottom: clamp(24px, 2.6vw, 44px); } .social-strip__board { max-width: 880px; margin-inline: auto; border-top: 2px solid var(--navy-900); } .social-row { display: flex; justify-content: space-between; align-items: baseline; gap: clamp(14px, 2vw, 32px); padding: clamp(14px, 1.3vw, 22px) clamp(4px, .6vw, 10px); border-bottom: 1px solid var(--line); transition: background .3s var(--ease); } .social-row:hover { background: rgba(255, 255, 255, .75); } .social-row__title { min-width: 0; font-size: var(--fs-md); font-weight: 500; letter-spacing: -.04em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .25s var(--ease); } .social-row:hover .social-row__title { color: var(--gold-700); } .social-row__meta { flex-shrink: 0; font-size: var(--fs-sm); color: var(--ink-mute); } /* --- 모바일 --- */ @media (max-width: 760px) { /* 유튜브 영상: 세로로 full width */ .social-band__videos { display: flex; flex-direction: column; gap: clamp(18px, 4vw, 26px); overflow: visible; margin-inline: 0; padding-inline: 0; } .mini-video { flex: none; width: 100%; } .social-row__meta { display: none; } .social-row__title { white-space: normal; } } @media (max-width: 640px) { /* 원장 카드: 카드 간 간격 확대 · 표창 카드 배경 full width */ .dr-grid { gap: clamp(44px, 11vw, 56px); } .dr-card--award { margin-inline: calc(var(--gutter) * -1); border-radius: 0; padding: clamp(28px, 8vw, 40px) var(--gutter); } .dr-card--award .award-card__icon { right: var(--gutter); } /* 인증서: 좌우 여백 확보 */ .cert-hero__imgs { gap: 14px; padding-inline: 6px; } .cert-hero .cert { width: min(41%, 200px); } } /* ========================================================================== 63. 15차 수정 (2026-09-22) ========================================================================== */ /* --- 1. 원장 표창 카드: 좌측 사진과 같은 높이의 박스 · 아이콘 아래로 --- */ @media (min-width: 641px) { .dr-card--award { align-self: start; display: flex; } .dr-card--award .dr-card__body { margin-block: auto; } } @media (min-width: 901px) { .dr-card--award { aspect-ratio: 1.618 / 1; } } @media (min-width: 641px) and (max-width: 1240px) { .dr-card--award { padding-block: clamp(16px, 1.6vw, 24px); } .dr-card--award .dr-card__body { gap: 6px; } .dr-card--award .dr-card__title { font-size: calc(var(--fs-h3) * .95); line-height: 1.35; } .dr-card--award .award-card__list { gap: 2px; margin-top: 4px; } .dr-card--award .award-card__list li { padding-block: 2px; line-height: 1.45; } } .dr-card--award .award-card__icon { top: clamp(22px, 2.1vw, 38px); right: clamp(20px, 2vw, 34px); } @media (max-width: 640px) { .dr-card--award .award-card__icon { top: 26px; right: var(--gutter); } } /* --- 2 · 3. 인증의 섹션: 이미지 뒤 사각형 제거 · 문구 확대 · 상하 여백 확대 --- */ .cert-band { padding-block: clamp(72px, 7.2vw, 150px); } .cert-hero__imgs::before { content: none; } .cert-hero__imgs { padding: 0 clamp(24px, 5vw, 100px); } .cert-hero__foot { margin-top: clamp(14px, 1.6vw, 30px); font-size: clamp(20px, 2.1vw, 38px); font-weight: 500; line-height: 1.6; letter-spacing: -.035em; color: var(--white); white-space: pre-line; } .cert-hero__foot b { font-weight: 600; color: var(--gold-200); } /* --- 4. 유튜브: 레드 배경 + 흰 텍스트 + PC 스와이프 --- */ .social-strip--yt { background: #FF0033; } .social-strip--yt .social-band__title { color: var(--white); } .social-strip--yt .social-band__lead { color: rgba(255, 255, 255, .88); } .social-strip--yt .mini-media__title { color: var(--white); } .social-strip--yt .mini-video:hover .mini-media__title { color: rgba(255, 255, 255, .78); } .social-strip--yt .mini-media__thumb { background: rgba(0, 0, 0, .25); } .social-strip--yt .btn-social { background: var(--white); color: #111; } .social-strip--yt .btn-social:hover { background: var(--white); color: #111; box-shadow: 0 10px 22px rgba(0, 0, 0, .28); } .yt-swipe { position: relative; } .yt-swipe__nav { display: none; } @media (min-width: 761px) { .social-strip--yt .social-band__videos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: clamp(16px, 1.6vw, 28px); margin-inline: 0; padding-inline: 0; scrollbar-width: none; } .social-strip--yt .social-band__videos::-webkit-scrollbar { display: none; } .social-strip--yt .mini-video { flex: 0 0 calc((100% - 2 * clamp(16px, 1.6vw, 28px)) / 3); scroll-snap-align: start; } .social-strip--yt .mini-video .mini-media__title { font-size: var(--fs-md); } .yt-swipe__nav { position: absolute; top: calc(50% - 26px); z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--white); color: #111; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: opacity .25s var(--ease), transform .25s var(--ease); } .yt-swipe__nav:hover { transform: scale(1.08); } .yt-swipe__nav--prev { left: -14px; } .yt-swipe__nav--next { right: -14px; } .yt-swipe__nav.is-off { opacity: 0; pointer-events: none; } } @media (min-width: 761px) and (max-width: 1099px) { .social-strip--yt .mini-video { flex-basis: calc((100% - clamp(16px, 1.6vw, 28px)) / 2); } } /* --- 5. 블로그: 네이버 그린 배경 + 흰 텍스트 --- */ .social-strip--blog { background: #03C75A; } .social-strip--blog .social-band__title { color: var(--white); } .social-strip--blog .social-band__lead { color: rgba(255, 255, 255, .92); } .social-strip--blog .social-strip__board { border-top-color: var(--white); } .social-strip--blog .social-row { border-bottom-color: rgba(255, 255, 255, .38); } .social-strip--blog .social-row:hover { background: rgba(255, 255, 255, .14); } .social-strip--blog .social-row__title { color: var(--white); } .social-strip--blog .social-row:hover .social-row__title { color: var(--white); } .social-strip--blog .social-row__meta { color: rgba(255, 255, 255, .78); } .social-strip--blog .btn-social { background: var(--white); color: #111; } .social-strip--blog .btn-social:hover { background: var(--white); color: #111; box-shadow: 0 10px 22px rgba(0, 0, 0, .22); } /* --- 6. 숫자로 보는 진료 경력: PC 숫자 확대 --- */ @media (min-width: 901px) { .stat-grid--5 .stat__num { font-size: calc(var(--fs-stat) * 1.2); } } /* --- 7. 홈 지도 · 약도: 가로 배치 --- */ .home-info .split--equal > .map-figure { margin: 0; aspect-ratio: auto; height: 100%; } .home-info .split--equal > .map-figure img { object-fit: contain; } @media (max-width: 900px) { .home-info .split--equal > .map-figure { height: auto; aspect-ratio: 16 / 9; } } /* ========================================================================== 64. 16차 수정 (2026-09-22) ========================================================================== */ /* --- 2. 모바일 히어로: 단색 배경 ↔ 사진 그라데이션 연결 · 슬라이드 1 줌인 --- */ @media (max-width: 900px) { .hero-slide--brand { --hero-bg: #fbf6ee; } .hero-slide--doctor { --hero-bg: #142c3e; } .hero-slide--books { --hero-bg: #f1e9d8; } .hero-slide .hero-slide__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--hero-bg) 0%, transparent 30%); } .hero-slide--brand .hero-slide__media { background-size: 170%; background-position: 62% 16% !important; } } /* --- 3. 히어로 타이포 통일 (키카피 · 서브카피 동일 스펙) --- */ .hero__title, .hero-cv__title { font-size: calc(var(--fs-hero) * .84 + 4px); font-weight: 400; line-height: 1.62; letter-spacing: -.03em; } .hero-brand__sub, .hero-books__count, .hero-cv__list li { font-size: var(--fs-md); font-weight: 300; line-height: 1.7; letter-spacing: -.04em; } .hero-cv__list li { color: rgba(249, 247, 242, .85); } @media (max-width: 640px) { .hero__title, .hero-cv__title { font-size: 23px; font-weight: 400; } .hero-brand__sub, .hero-books__count { font-size: 15px; } .hero-cv__list li { font-size: 14.5px; } } /* --- 5 · 6. 표창 카드: 상단 여백 확대 + 표창명 간격은 남는 높이를 고르게 분배 --- */ @media (min-width: 901px) { .dr-card--award { padding-top: clamp(28px, 2.8vw, 54px); } .dr-card--award .dr-card__body { margin-block: 0; align-self: stretch; flex: 1; display: flex; flex-direction: column; } .dr-card--award .award-card__list { flex: 1; justify-content: space-evenly; gap: 0; } .dr-card--award .award-card__list li { padding-block: 4px; } } @media (max-width: 640px) { .dr-card--award .dr-card__title { white-space: nowrap; font-size: clamp(14px, 4.9vw, 19px); } .dr-card--award .award-card__icon { top: auto; bottom: 22px; right: var(--gutter); width: 46px; } } /* --- 7. 인증의 섹션: 디자인 시스템 정렬 (아이브로 · 헤어라인 · 타이틀 스케일) --- */ .cert-hero__kicker { font-size: var(--fs-sm); line-height: 1.8; letter-spacing: .16em; font-weight: 500; color: var(--gold-300); } .cert-hero__rule { width: min(320px, 60%); margin-inline: auto; background: rgba(249, 247, 242, .18); } .cert-hero__text { gap: clamp(10px, 1vw, 16px); } .cert-hero__title { font-size: calc(var(--fs-h2) + 4px); } /* --- 8. 책 소개: 체크 리스트 (히어로 이력 스펙) --- */ .books-cv { display: flex; flex-direction: column; gap: clamp(9px, .85vw, 15px); margin-top: clamp(14px, 1.4vw, 24px); } .books-cv li { position: relative; padding-left: 1.5em; font-size: var(--fs-md); font-weight: 300; line-height: 1.7; letter-spacing: -.04em; color: rgba(249, 247, 242, .85); } .books-cv li::before { content: ""; position: absolute; left: .1em; top: .5em; width: .78em; height: .42em; border-left: 1.5px solid var(--gold-300); border-bottom: 1.5px solid var(--gold-300); rotate: -45deg; opacity: .85; } .books-cv b { font-weight: 500; color: var(--gold-200); } @media (max-width: 760px) { .books-split__head { align-items: center; text-align: center; } .books-cv li { padding-left: 0; text-align: center; } .books-cv li::before { position: static; display: inline-block; margin-right: 10px; vertical-align: .18em; } } /* --- 9. (17차에서 DOM 순서로 대체) --- */ /* --- 10. 유튜브 · 블로그: 톤 다운 + 센터 로고 --- */ .social-strip--yt { --strip-bg: #b23648; background: var(--strip-bg); } .social-strip--blog { --strip-bg: #2e9c63; background: var(--strip-bg); } .social-strip__logo { display: block; width: 46px; height: auto; color: var(--strip-bg); } .social-strip__logo--img { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--white); } .social-strip__logo--img img { display: block; width: 34px; height: 34px; } /* --- 12. 대중교통: 흰 배경 + 직행좌석 뱃지 회색 --- */ .band--bus { background: var(--white); } .chip--express { background: var(--gray-100); box-shadow: inset 0 0 0 1.5px rgba(28, 55, 103, .5); } @media (max-width: 480px) { .chip--express { white-space: nowrap; letter-spacing: -.045em; padding-inline: 4px; font-size: 12.5px; } } /* --- 13. 병원소개 유튜브 채널: 흰 배경 --- */ .bleed--navy { --bleed: var(--white); } /* --- 14. (17차에서 좌측 정렬로 복귀) --- */ /* --- 15. 워터마크 심볼은 콘텐츠 뒤로 --- */ .watermark { z-index: -1; } .section:has(> .watermark), .band:has(> .watermark) { isolation: isolate; } /* --- 16. 자가진단: 남색 타이틀 뱃지 + 가운데 정렬 + 여백 --- */ .bleed--dark { padding-block: clamp(64px, 6.6vw, 128px); } .selfcheck { margin-top: clamp(16px, 1.8vw, 34px); } .selfcheck__head { flex-direction: column; align-items: center; text-align: center; gap: clamp(10px, 1vw, 16px); padding-bottom: clamp(18px, 1.8vw, 28px); } .selfcheck__badge { display: inline-flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); padding: clamp(10px, 1vw, 14px) clamp(22px, 2.2vw, 34px); background: var(--navy-900); color: var(--white); border-radius: var(--r-pill); font-size: inherit; letter-spacing: 0; } .selfcheck__badge small { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; color: var(--gold-200); } .selfcheck__badge .serif { font-size: var(--fs-h4); line-height: 1.35; font-weight: 500; } .selfcheck__hint { flex-basis: auto; } @media (max-width: 560px) { .selfcheck__badge { flex-direction: column; gap: 4px; padding: 12px 26px; } } /* --- 17. 진행 단계: 사진 + 디자인 시스템 타이포 (istep) --- */ .istep-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: clamp(20px, 2vw, 34px) clamp(14px, 1.5vw, 26px); } .istep { display: flex; flex-direction: column; gap: 6px; counter-reset: none; } .istep__media { display: block; aspect-ratio: 200 / 164; border-radius: var(--r-md); overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px #eadfcb; margin-bottom: clamp(8px, .8vw, 14px); } .istep__media img { width: 100%; height: 100%; object-fit: cover; } .istep__media svg { display: block; width: 100%; height: 100%; min-width: 0; } .istep__title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.6; letter-spacing: -.04em; color: var(--navy-600); } .istep__desc { font-size: var(--fs-md); line-height: 1.6; letter-spacing: -.04em; color: var(--ink); } @media (max-width: 760px) { .istep-grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } .istep { text-align: left; } } /* --- 18. 클리닉 넘버 → 숫자 아이콘 --- */ .reason-list li > b, .inline-list li b { display: grid; place-items: center; flex-shrink: 0; box-sizing: border-box; min-width: 0; width: 1.8em; aspect-ratio: 1; border-radius: 50%; background: var(--gold-700); color: #fff; font-family: inherit; font-size: .8em; font-weight: 600; line-height: 1; } .reason-list li > b { align-self: center; } .inline-list li { align-items: flex-start; } .inline-list li b { margin-top: .22em; } body.is-clinic .step__no:not(:has(svg)) { display: grid; place-items: center; width: 1.9em; aspect-ratio: 1; border-radius: 50%; background: var(--gold-700); color: #fff; font-family: inherit; font-size: var(--fs-md); font-weight: 600; line-height: 1; } body.is-clinic .num-card__no { min-width: 0; width: 2em; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-self: flex-start; margin-top: .18em; background: var(--gold-300); color: var(--navy-900); font-size: var(--fs-sm); font-weight: 600; line-height: 1; } /* --- 19. 항문초음파 이미지: 표와 같은 높이 + 이미지 안 캡션 --- */ .split--stretch { align-items: stretch; } .lesion--fill { position: relative; max-width: none; margin: 0; } .lesion--fill img { height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--r-md); min-height: 240px; } .lesion--fill figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px, 2.6vw, 44px) clamp(14px, 1.4vw, 22px) clamp(12px, 1.2vw, 18px); border-radius: 0 0 var(--r-md) var(--r-md); background: linear-gradient(180deg, rgba(10, 20, 28, 0), rgba(10, 20, 28, .62)); color: var(--white); font-weight: 500; text-align: center; } /* --- 20. 특별한 이유: 타이틀 ↔ 세부카피 위계 --- */ .on-dark .num-card__text { font-weight: 200; color: rgba(249, 247, 242, .8); } .on-dark .num-card__text strong { font-weight: 600; color: var(--white); } /* --- 20b. 예방습관 배너 이미지 (4칸 세로 스프라이트: --bi 0~3) --- */ .care-banner { margin: 0 0 clamp(4px, .5vw, 10px); } .care-banner__img { display: block; width: 100%; aspect-ratio: 1536 / 538; border-radius: var(--r-lg); background: var(--gray-100) url("../img/care-banners.jpg") no-repeat; background-size: 100% 400%; background-position: 0 calc(var(--bi, 0) * 100% / 3); } /* ========================================================================== 65. 17차 수정 (2026-09-22) ========================================================================== */ /* --- 공용: 클리닉 사진 스프라이트 (6칸 · 4:3 · --pi 0~5) --- */ .cph { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--gray-100) url("../img/clinic-photos.jpg") no-repeat; background-size: 100% 1200%; background-position: 0 calc(var(--pi, 0) * 100% / 11); } .illust--img .cph { border-radius: 10px; } /* --- 1 · 2 · 5 · 24. 이미지 + 목록 나란히 --- */ .split--sym { align-items: center; grid-template-columns: minmax(0, .85fr) 1.15fr; } .split--sym .stack--sym { display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1vw, 16px); } .split--sym .reason-list--fill { display: flex; flex-direction: column; justify-content: center; } .split--surgery { align-items: center; grid-template-columns: minmax(0, .75fr) 1.25fr; } .split__photo { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background-size: cover; background-position: center; } .bleed--dark .step--row { background: var(--white); } /* --- 4. 항문소양증 악순환 도식 확대 --- */ .loop-card { grid-template-columns: clamp(250px, 26vw, 390px) 1fr; } .loop-card__fig { max-width: 390px; } /* --- 5(N5). 월계관 이미지 --- */ .cert-laurel { display: block; width: clamp(38px, 4vw, 76px); aspect-ratio: 160 / 287; background: url("data:image/png;base64,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") center / contain no-repeat; } .cert-laurel--r { transform: scaleX(-1); } /* --- 7. 진료 경력: 아이콘 원형 컨테이너 --- */ .band--record .stat svg { box-sizing: content-box; padding: clamp(12px, 1.1vw, 18px); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(229, 163, 92, .5); } /* --- 8. 유튜브 위 여백 + 심볼 워터마크 --- */ body.is-home section[aria-label="유튜브"] { margin-top: clamp(56px, 5.5vw, 104px); } .social-strip { position: relative; overflow: hidden; } .social-strip .container { position: relative; } .social-strip--yt::before { content: ""; position: absolute; right: clamp(-60px, -3vw, -24px); bottom: clamp(-80px, -4vw, -30px); width: clamp(260px, 28vw, 480px); aspect-ratio: 221 / 227; background: url("../img/logo-mark.png") center / contain no-repeat; filter: brightness(0) invert(1); opacity: .07; pointer-events: none; } /* --- 8. 블로그: 목록 절반 폭 + 채널 카드 --- */ .social-strip__duo { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3vw, 56px); align-items: start; } .social-strip--blog .social-strip__board { max-width: none; margin-inline: 0; } .blog-chans { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 16px); } .blog-chan { display: flex; align-items: center; gap: 14px; padding: clamp(12px, 1.2vw, 18px) clamp(16px, 1.6vw, 24px); background: var(--white); border-radius: var(--r-md); box-shadow: 0 2px 12px rgba(0, 0, 0, .1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .blog-chan:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .16); } .blog-chan__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--gray-100); flex-shrink: 0; } .blog-chan__name { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.04em; color: var(--ink); } @media (max-width: 760px) { .social-strip__duo { grid-template-columns: 1fr; } } /* --- 10 · 11 · 12 --- */ .bus-legend__star { margin-right: 8px; } .site-footer { padding-block: clamp(66px, 6.75vw, 129px); } .side-dock .side-dock__fly--tel a { font-family: inherit; font-weight: 600; } /* --- 14. 병원소개: 클리닉과 동일한 제목 스케일 --- */ body.is-about .sub-head { font-size: calc(var(--fs-h3) * 1.3); line-height: 1.5; } /* --- 16. 자가진단: 프리텐다드 + 각진 체크박스 --- */ .selfcheck__badge-title { font-family: inherit; font-size: var(--fs-h4); line-height: 1.35; font-weight: 600; } .selfcheck__box { border-radius: 0; } /* --- 17. 숫자 아이콘 통일 (골드 배경 + 흰 숫자 + 세로 중앙) --- */ .inline-list li { align-items: center; } .inline-list li b { margin-top: 0; } body.is-clinic .num-card__no { background: var(--gold-700); color: var(--white); align-self: center; margin-top: 0; } /* --- 18. 온수 좌욕 방법: 항목이 위에서부터 빈틈없이 --- */ .care ul.care__cols { display: block; columns: 2; column-gap: clamp(20px, 2.4vw, 48px); } .care ul.care__cols li { break-inside: avoid; } @media (max-width: 760px) { .care ul.care__cols { columns: 1; } } /* --- 23 · 30. 단계 카드: 가운데 정렬 + 크기 뱃지 --- */ .istep { text-align: center; align-items: center; } .istep__media { width: 100%; aspect-ratio: 4 / 3; } .istep__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 11em; padding: 4px 14px; margin-top: 2px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.4px var(--gold-500); color: var(--gold-700); font-size: var(--fs-sm); font-weight: 600; } .istep-grid--flow .istep__media { aspect-ratio: auto; } .istep-note { margin-top: clamp(16px, 1.6vw, 28px); text-align: center; font-size: var(--fs-md); font-weight: 600; letter-spacing: -.04em; color: var(--navy-600); } /* --- 25. 표: 남색 헤더 + 라운딩 축소 --- */ .tbl thead th { background: var(--navy-900); color: var(--white); font-weight: 600; } .info-card:has(.tbl) { border-radius: 12px; } /* --- 26. STEP 뱃지만 남김 --- */ .phase__tag span { font-size: var(--fs-md); font-weight: 700; letter-spacing: .12em; color: var(--gold-700); } /* --- 29. 경고 콜아웃 좌측 라인 제거 --- */ .callout--warn { border-left: 0; } /* --- 31. 모바일: 표 세로 · 넓은 도해 축소 --- */ @media (max-width: 760px) { .illust--wide { overflow-x: visible; } .illust--wide svg { min-width: 0; } .tbl th, .tbl td { padding-inline: 12px; font-size: 14px; } .tbl th:first-child, .tbl td:first-child { padding-left: 16px; } .tbl th:last-child, .tbl td:last-child { padding-right: 16px; } } /* --- 33. 모바일: 예방습관 배너 세로 확대 (가로폭 유지 · 중앙 크롭) --- */ @media (max-width: 760px) { .care-banner__img { aspect-ratio: 4 / 2.6; background-size: auto 400%; background-position: 50% calc(var(--bi, 0) * 100% / 3); } } /* --- 34. 클리닉 탭: 대메뉴는 언더바 · 소메뉴는 뱃지, 사이 공간 제거 --- */ .pill-nav:not([data-filter-group]) { flex-wrap: nowrap; justify-content: flex-start; gap: 0; margin-top: clamp(24px, 2.6vw, 48px); margin-bottom: 0; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); } .pill-nav:not([data-filter-group])::-webkit-scrollbar { display: none; } .pill-nav:not([data-filter-group]) .pill { flex: 0 1 auto; position: relative; height: clamp(50px, 3.6vw, 62px); padding-inline: clamp(18px, 2.2vw, 38px); background: none; box-shadow: none; border-radius: 0; font-size: var(--fs-md); font-weight: 500; color: var(--ink-soft); } .pill-nav:not([data-filter-group]) .pill:hover { transform: none; box-shadow: none; color: var(--navy-900); } .pill-nav:not([data-filter-group]) .pill.is-active { background: none; color: var(--navy-900); font-weight: 600; } .pill-nav:not([data-filter-group]) .pill.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy-900); } .topic-nav { margin-top: 0; border-top: 0; } .topic-nav__list { padding-block: clamp(8px, .8vw, 12px); } .topic-nav__list a { padding-block: 5px; } @media (max-width: 768px) { .topic-nav .container { width: calc(100% - 48px); } } /* --- 36. 모바일 히어로: 그라데이션 풀 커버 + 키카피 강조 + 동일 높이 --- */ @media (max-width: 900px) { .hero-slide .hero-slide__media { flex: none; min-height: 0; height: clamp(230px, 62vw, 320px); } .hero-slide .hero-slide__media::after { background: color-mix(in srgb, var(--hero-bg) 85%, transparent); } } @media (max-width: 640px) { .hero__title, .hero-cv__title { font-size: 25px; font-weight: 600; } } /* --- 35. 모바일 하단 바: 4칸 균등 분할 --- */ @media (max-width: 900px) { .side-dock > a, .side-dock > .side-dock__group { width: auto; flex: 1 1 0; min-width: 0; } .side-dock__group > .side-dock__btn { width: 100%; } } /* --- 모바일: 이미지+목록 스플릿은 세로로 --- */ @media (max-width: 900px) { .split--sym, .split--surgery { grid-template-columns: 1fr; } } /* ========================================================================== 66. 18차 수정 (2026-09-22) ========================================================================== */ /* --- 1. 홈 진료 안내: 아이콘은 타이틀 옆 · 글자 확대 · 마지막 줄 선 제거 --- */ .sub-head--icon { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); } .sub-head--icon .info-card__icon { margin-bottom: 0; flex-shrink: 0; } .home-info .hours-line { font-size: var(--fs-lg); } .home-info .hours-line strong small { font-size: var(--fs-base); } .home-info .hours-note { font-size: var(--fs-base) !important; } .home-info .info-card > .hours-line:last-child { border-bottom: 0; } /* --- 3. 원장 카드: 타이틀 한 단계 굵게 · 세로 간격 확대 --- */ .dr-card__title { font-weight: 500; } .dr-card__title b { font-weight: 500; } .dr-grid { row-gap: clamp(38px, 3.7vw, 66px); } /* --- 4. PC 히어로: 높이 · 키카피 확대 --- */ @media (min-width: 901px) { .hero-slide { min-height: clamp(560px, 52vw, 1000px); } .hero__title, .hero-cv__title { font-size: calc(var(--fs-hero) + 6px); } } /* --- 5. 홈 학회 임원 이력: 회색 박스 → 2열 라인 리스트 --- */ body.is-home .num-grid { grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 3.5vw, 64px); } body.is-home .num-card { background: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: clamp(14px, 1.3vw, 22px) 4px; } body.is-home .num-card:nth-last-child(-n+2) { border-bottom: 0; } @media (max-width: 900px) { body.is-home .num-grid { grid-template-columns: 1fr; } body.is-home .num-card:nth-last-child(2) { border-bottom: 1px solid var(--line); } } /* --- 6. 인증의: 월계관 톤 다운 · 배경 사각형 복원 · 문구 두께 완화 --- */ .cert-laurel { filter: brightness(.84) saturate(.92); } .cert-hero__imgs { padding: 0 clamp(24px, 5vw, 100px) clamp(28px, 3vw, 56px); } .cert-hero__imgs::before { content: ""; position: absolute; left: 0; right: 0; top: 40%; bottom: 0; z-index: -1; border-radius: var(--r-lg); background: rgba(249, 247, 242, .06); } .cert-hero__foot { font-weight: 400; } /* --- 7. 진료 경력: 숫자 외 텍스트 확대 --- */ .band--record .stat__label { font-size: var(--fs-lg); font-weight: 400; } .band--record .stat__desc { font-size: var(--fs-md); line-height: 1.65; color: rgba(249, 247, 242, .8); } /* --- 8. 책 소개 체크 리스트 확대 --- */ .books-cv li { font-size: var(--fs-lg); } /* --- 9. 유튜브 · 블로그: 타이틀 확대 · 유튜브 연회색 배경 · 채널 버튼 화살표 --- */ .social-strip__intro .social-band__title { font-size: calc(var(--fs-h3) * 1.5); } .social-strip--yt { --strip-bg: #f1f2f4; } .social-strip--yt::before { filter: none; opacity: .05; } .social-strip--yt .social-strip__logo rect { fill: #FF0033; } .social-strip--yt .social-strip__logo path { fill: #fff; } .social-strip--yt .social-band__title { color: var(--ink); } .social-strip--yt .social-band__lead { color: var(--ink-soft); } .social-strip--yt .mini-media__title { color: var(--ink); } .social-strip--yt .mini-video:hover .mini-media__title { color: var(--gold-700); } .social-strip--yt .mini-media__thumb { background: var(--gray-200); } .social-strip--yt .btn-social { background: var(--navy-900); color: var(--cream); } .social-strip--yt .btn-social:hover { background: #0e2231; color: var(--white); box-shadow: 0 10px 22px rgba(20, 44, 62, .24); } .blog-chan__go { margin-left: auto; display: grid; place-items: center; color: var(--ink-mute); } .blog-chan:hover .blog-chan__go { color: var(--gold-700); } /* ========================================================================== 67. 19차 수정 (2026-09-22) ========================================================================== */ /* --- 2. 히어로: 3장 모두 연한 미색 배경으로 통일 --- */ .hero-slider, .hero-slide--brand, .hero-slide--doctor, .hero-slide--books { background: #fdfaf3; } .hero-slide--brand .hero-slide__wash { background: linear-gradient(90deg, #fdfaf3 0%, #fdfaf3 40%, rgba(253, 250, 243, .9) 46%, rgba(253, 250, 243, .6) 55%, rgba(253, 250, 243, .3) 64%, rgba(253, 250, 243, .1) 72%, rgba(253, 250, 243, 0) 84%); } .hero-slide--doctor { color: var(--ink); } .hero-slide--doctor .hero-slide__wash { background: linear-gradient(90deg, #fdfaf3 0%, #fdfaf3 44%, rgba(253, 250, 243, .86) 54%, rgba(253, 250, 243, .55) 62%, rgba(253, 250, 243, .25) 70%, rgba(253, 250, 243, .08) 78%, rgba(253, 250, 243, 0) 86%); } .hero-slide--doctor .hero-cv__eyebrow { color: var(--gold-700); } .hero-slide--doctor .hero-cv__title { color: var(--navy-800); } .hero-slide--doctor .hero-cv__title b { color: var(--navy-800); } .hero-slide--doctor .hero-cv__list li { color: var(--ink); } .hero-slide--doctor .hero-cv__list li::before { border-color: var(--gold-600); } .hero-slide--books { background: #fdfaf3; } .hero-slide--books .hero-slide__wash { background: linear-gradient(180deg, rgba(253, 250, 243, .8) 0%, rgba(253, 250, 243, 0) 18%), linear-gradient(90deg, #fdfaf3 0%, #fdfaf3 44%, rgba(253, 250, 243, .82) 50%, rgba(253, 250, 243, .55) 57%, rgba(253, 250, 243, .3) 64%, rgba(253, 250, 243, .12) 71%, rgba(253, 250, 243, .04) 77%, rgba(253, 250, 243, 0) 84%); } .hero-slide--books .hero-books__count { color: var(--ink); } /* --- 4. 유튜브 목록 슬라이드바 --- */ .yt-swipe__bar { position: relative; height: 4px; margin-top: clamp(16px, 1.6vw, 26px); border-radius: 2px; background: rgba(20, 44, 62, .14); overflow: hidden; } .yt-swipe__thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 2px; background: var(--navy-900); } @media (max-width: 760px) { .yt-swipe__bar { display: none !important; } } /* --- 5. 바로가기 버튼: 아이콘 없이 크게 --- */ .social-strip .btn-social { height: clamp(52px, 3.8vw, 68px); padding-inline: clamp(32px, 3.2vw, 56px); font-size: var(--fs-md); } /* --- 6. 전화 플라이 타이포 = 블로그 플라이 --- */ .side-dock .side-dock__fly--tel a { font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); } /* --- 7. 병원소개 진료안내: 이미지 높이 = 시간표 박스 --- */ body.is-about .info-figure { margin: 0; min-height: 0; height: auto; aspect-ratio: auto; } body.is-about .info-figure img { width: 100%; height: 100%; object-fit: cover; } /* --- 8. 소메뉴 뱃지 더 낮게 · 병원내부 탭도 동일 UI --- */ .topic-nav__list a { padding-block: 3px; } .space-tabs { gap: clamp(8px, 1vw, 16px); } .space-tab { height: auto; padding: 3px clamp(16px, 1.5vw, 28px); border-radius: var(--r-pill); background: none; box-shadow: none; font-size: var(--fs-md); font-weight: 500; color: var(--ink-soft); } .space-tab:hover { color: var(--gold-700); background: var(--gray-50); } .space-tab.is-active { background: var(--gold-700); color: var(--white); } /* --- 10. 정상 점막 → 선종 → 대장암: 타이틀 사이 화살표 --- */ .istep { position: relative; } .istep-grid--flow .istep:not(:last-child)::after { content: ">"; position: absolute; right: calc(clamp(14px, 1.5vw, 26px) / -2); bottom: 0; translate: 50% 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; color: var(--gold-500); } .istep-grid--flow .istep__media { aspect-ratio: 4 / 3; } /* --- 11. 특별한 이유 타이틀 확대 --- */ body.is-clinic .band--photo .sub-head { font-size: calc(var(--fs-h3) * 1.3); line-height: 1.5; } /* --- 12. 모바일 히어로: 이미지 위 단색 레이어 + 텍스트 오버레이 (1단) --- */ @media (max-width: 900px) { .hero-slide { display: grid; align-items: center; min-height: clamp(430px, 118vw, 560px); } .hero-slide .hero-slide__media { position: absolute; inset: 0; order: 0; flex: none; height: auto; min-height: 0; z-index: 0; } .hero-slide .hero-slide__media::after { background: color-mix(in srgb, var(--hero-bg) 82%, transparent); } .hero-slide--brand { --hero-bg: #fdfaf3; } .hero-slide--doctor { --hero-bg: #fdfaf3; } .hero-slide--books { --hero-bg: #fdfaf3; } .hero-slide__inner { position: relative; z-index: 1; order: 0; padding-block: calc(var(--header-h) + 20px) 56px; } .hero-slide__inner { min-height: 0 !important; } } /* --- 13. 진료 경력: 아이콘 filled 원 · 타이틀 흰색 · 숫자 프리텐다드 --- */ .band--record .stat svg { box-shadow: none; background: rgba(229, 163, 92, .16); } .band--record .stat__label { color: var(--white); } .band--record .stat__num { font-family: inherit; font-weight: 600; letter-spacing: -.02em; } /* --- 14. 모바일: 책 커버 자동 슬라이드 --- */ @media (max-width: 760px) { .books-split .book-grid--wall.book-grid--marquee { display: block; width: 100%; overflow: hidden; } .book-marquee__track { display: flex; gap: 10px; width: max-content; animation: bookSlide 36s linear infinite; } .books-split .book-grid--wall.book-grid--marquee .book { flex: 0 0 108px; width: 108px; } } @keyframes bookSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- 15. 모바일 유튜브: 좌 썸네일 · 우 정보 --- */ @media (max-width: 760px) { .social-strip--yt .mini-video { flex-direction: row; align-items: flex-start; gap: 12px; } .social-strip--yt .mini-video .mini-media__thumb { flex: 0 0 46%; } .social-strip--yt .mini-video .mini-media__title { font-size: 14.5px; -webkit-line-clamp: 3; } } /* --- 16. 스트립 타이틀 = 한 문장 카피 --- */ .social-strip__intro .social-band__title { font-size: calc(var(--fs-h3) * 1.3); line-height: 1.55; white-space: pre-line; text-wrap: balance; } @media (max-width: 760px) { .social-strip__duo { display: flex; flex-direction: column; } .social-strip__duo .blog-chans { order: -1; } } /* --- 17. 악순환 도식 확대 · 모바일 세로 --- */ .loop-card { grid-template-columns: clamp(280px, 30vw, 440px) 1fr; } .loop-card__fig { max-width: 440px; } @media (max-width: 760px) { .loop-card { grid-template-columns: 1fr; justify-items: center; } .loop-card__fig { max-width: 360px; } } /* --- 18. 용종 제거방법 뱃지: 남색 채움 · 소형 · 동일 폭 --- */ .istep__badge { min-width: 0; width: 9em; padding: 3px 0; margin-top: 2px; box-shadow: none; background: var(--navy-900); color: var(--white); font-size: var(--fs-xs); font-weight: 600; } /* --- 19. 병원소식 학회 이력: 홈과 같은 라인 리스트 --- */ body.is-news-activity .num-grid { grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 3.5vw, 64px); } body.is-news-activity .num-card { background: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: clamp(14px, 1.3vw, 22px) 4px; } body.is-news-activity .num-card:nth-last-child(-n+2) { border-bottom: 0; } @media (max-width: 900px) { body.is-news-activity .num-grid { grid-template-columns: 1fr; } body.is-news-activity .num-card:nth-last-child(2) { border-bottom: 1px solid var(--line); } } /* --- 20. 학회 강의 더보기 버튼 --- */ .list-more { align-self: flex-start; margin-top: clamp(10px, 1vw, 16px); } /* ========================================================================== 68. 20차 수정 (2026-09-22) ========================================================================== */ /* --- 1. 히어로 1: 슬로건 + 대표원장 이력 (키카피 = 슬로건) --- */ .hero-cv__title em { display: block; font-style: normal; color: var(--gold-600); } .hero-slide--doctor .hero-cv__title .kv { color: var(--gold-600); } /* --- 3. 히어로 2: 위·대장내시경 5만 건 --- */ .hero-slide--endo { background: #fdfaf3; color: var(--ink); --hero-bg: #fdfaf3; } .hero-slide--endo .hero-slide__wash { background: linear-gradient(90deg, #fdfaf3 0%, #fdfaf3 44%, rgba(253, 250, 243, .86) 54%, rgba(253, 250, 243, .55) 62%, rgba(253, 250, 243, .25) 70%, rgba(253, 250, 243, .08) 78%, rgba(253, 250, 243, 0) 86%); } .hero-slide--endo .hero-cv__eyebrow { color: var(--gold-700); } .hero-slide--endo .hero-cv__title { color: var(--navy-800); } .hero-slide--endo .hero-cv__list li { color: var(--ink); } .hero-slide--endo .hero-cv__list li::before { border-color: var(--gold-600); } /* --- 2. 히어로 3: 저서 — 책이 놓인 부분을 확대 --- */ @media (min-width: 901px) { .hero-slide--books .hero-slide__media { background-size: 120% auto; background-position: 30% 90%; } } @media (max-width: 900px) { .hero-slide--books .hero-slide__media { background-size: cover; background-position: 50% 66% !important; } } /* --- 4. 히어로 공통: 서브카피 · 이력 글자 크고 진하게 --- */ .hero-cv__eyebrow { font-size: var(--fs-base); font-weight: 600; letter-spacing: .2em; } .hero-brand__sub, .hero-books__count, .hero-cv__list li { font-size: var(--fs-lg); font-weight: 500; } .hero-slide--doctor .hero-cv__list li, .hero-slide--endo .hero-cv__list li, .hero-slide--books .hero-cv__list li, .hero-slide--books .hero-books__count { color: #333; } @media (max-width: 640px) { .hero-brand__sub, .hero-books__count { font-size: 16.5px; } .hero-cv__list li { font-size: 15.5px; } .hero-cv__eyebrow { font-size: 14px; } } /* --- 5. 인증의 섹션: 하단 문구 세리프 · 키커 = 인사말 아이브로 색 --- */ .cert-hero__foot { font-weight: 500; } .cert-hero__kicker { color: var(--gold-400); } /* ========================================================================== 69. 21차 수정 (2026-09-23) ========================================================================== */ /* --- 2 · 3. 히어로 2: 타이틀 크기 통일 · ‘5만’만 갈색 · 배경은 상장 진열 부분 --- */ .hero-slide--endo .hero-cv__title .kv { color: var(--gold-600); } @media (min-width: 901px) { .hero-slide--endo .hero-slide__media { inset: 0 0 0 46%; background-size: 220% auto; background-position: 79% 37%; } } @media (max-width: 900px) { .hero-slide--endo .hero-slide__media { background-size: 300% auto; background-position: 80% 36% !important; } } /* --- 4. 모바일 히어로: 배경 사진을 더 옅게 --- */ @media (max-width: 900px) { .hero-slide .hero-slide__media::after { background: color-mix(in srgb, var(--hero-bg) 91%, transparent); } } /* --- 7. 장편한외과 특징: 카드 타이틀 골드 --- */ .dr-card__title, .dr-card__title b { color: var(--gold-700); } /* --- 10. 인사말: 정확 · 정직 · 정성 강조색 해제 --- */ .greeting__text .kv { color: inherit; } /* --- 11. 인증의 하단 문구 한 단계 얇게 --- */ .cert-hero__foot { font-weight: 400; } /* --- 13 · 14. 서브 타이틀 없이 설명으로 시작하는 섹션(언론보도 · TV 출연 이력): 타이틀과 간격 축소 --- */ .section--media .stack.mt-md.stack--lead { margin-top: clamp(22px, 2.1vw, 40px); } /* --- 16. 유튜브: 마지막 영상이 살짝 잘려 보이게 · 슬라이드바 조작 · 저채도 --- */ @media (min-width: 1100px) { .social-strip--yt .mini-video { flex-basis: calc((100% - 3 * clamp(16px, 1.6vw, 28px)) / 3.35); } } @media (min-width: 761px) and (max-width: 1099px) { .social-strip--yt .mini-video { flex-basis: calc((100% - 2 * clamp(16px, 1.6vw, 28px)) / 2.3); } } .social-strip--yt .social-band__videos { cursor: grab; } .social-strip--yt .social-band__videos.is-dragging { cursor: grabbing; } .social-strip--yt .social-band__videos.is-dragging a { pointer-events: none; } .social-strip--yt .social-band__videos img { -webkit-user-drag: none; user-select: none; } .yt-swipe__bar { height: 20px; padding-block: 8px; background-clip: content-box; background-color: rgba(20, 44, 62, .1); cursor: pointer; touch-action: none; overflow: visible; } .yt-swipe__thumb { top: 8px; bottom: 8px; background: #a7aeb4; cursor: grab; transition: background .2s; } .yt-swipe__bar:hover .yt-swipe__thumb, .yt-swipe__bar.is-dragging .yt-swipe__thumb { background: #8c949b; } .yt-swipe__bar.is-dragging .yt-swipe__thumb { cursor: grabbing; } /* --- 17. 약도 이미지 → 네이버 지도 --- */ .map-figure__link { display: block; width: 100%; height: 100%; cursor: pointer; } .map-figure__link img { width: 100%; height: 100%; transition: opacity .2s; } .map-figure__link:hover img { opacity: .88; } /* --- 20. 치핵 수술이 필요한 경우: 항목 사이 구분선 --- */ .inline-list li + li { border-left: 1px solid var(--line); padding-left: clamp(18px, 2vw, 36px); } .inline-list { column-gap: clamp(18px, 2vw, 36px); } @media (max-width: 900px) { .inline-list { row-gap: 0; } .inline-list li { padding-block: 10px; } .inline-list li:first-child { padding-top: 0; } .inline-list li:last-child { padding-bottom: 0; } .inline-list li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } } /* --- 11-1. 인증의 하단 문구: 모바일은 세리프 폭에 맞춰 자연 줄바꿈 --- */ @media (max-width: 640px) { .cert-hero__foot { white-space: normal; font-size: 18px; text-wrap: balance; word-break: keep-all; } } /* ========================================================================== 70. 22차 수정 (2026-09-23) ========================================================================== */ /* --- 모바일 히어로: 가운데 정렬 · 높이 확대 (PC는 그대로) --- */ @media (max-width: 900px) { .hero-slide { min-height: clamp(600px, 164vw, 760px); } .hero-slide__inner { padding-block: calc(var(--header-h) + 32px) 72px; } .hero-cv, .hero-books, .hero-books__text { text-align: center; align-items: center; margin-inline: auto; } .hero-cv__title, .hero-cv__title em { text-align: center; } .hero-cv__list { align-items: center; gap: 6px; } .hero-cv__list li { display: block; padding-left: 0; text-align: center; text-wrap: balance; word-break: keep-all; } /* 체크 아이콘을 글자 앞 인라인으로 — 줄이 접혀도 가운데 정렬이 유지된다 */ .hero-cv__list li::before { position: static; display: inline-block; vertical-align: .34em; top: auto; left: auto; margin-right: .5em; translate: 0 0; } } @media (max-width: 640px) { .hero__title, .hero-cv__title { font-size: 27px; } } /* --- 푸터: 숫자(전화 · 사업자번호 등)까지 모두 흰색 --- */ .site-footer__text, .site-footer__text a { color: #fff; } .site-footer__text a { text-decoration: none; } .site-footer a[href^="tel"], .site-footer a[x-apple-data-detectors] { color: #fff !important; text-decoration: none !important; } /* --- 병원 내부: 사진 4장 탭은 썸네일 4열 --- */ @media (max-width: 900px) { .slideshow__thumbs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } } /* --- 모바일 단계형 이미지: 단계 사이 간격 확대 · 흐름도는 ‘>’ 대신 아래 방향 꺾쇠 --- */ @media (max-width: 760px) { .istep-grid { row-gap: 46px; } .istep-grid--flow { row-gap: 62px; } .istep-grid--flow .istep:not(:last-child)::after { content: ""; right: auto; left: 50%; bottom: -40px; width: 13px; height: 13px; translate: none; transform: translateX(-50%) rotate(45deg); border-right: 2px solid var(--gold-500); border-bottom: 2px solid var(--gold-500); } } /* --- 책 소개: 분류 배지 축소 (여백 · 글자 1pt ↓) --- */ .book-card .chip.book-card__kind { min-width: 0; height: auto; padding: 2px 9px; line-height: 1.5; font-size: calc(var(--fs-xs) - 1.33px); } .site-footer .nw { white-space: nowrap; } /* --- 모바일 블로그 채널 버튼: 가로 3칸 · 썸네일 없이 작게 --- */ .blog-chan__ico { display: none; } @media (max-width: 760px) { .blog-chans { flex-direction: column; align-items: center; gap: 10px; width: 100%; align-self: stretch; } .blog-chan { width: min(300px, 100%); justify-content: center; gap: 9px; padding: 15px 18px; border-radius: var(--r-pill); box-shadow: 0 3px 12px rgba(0, 0, 0, .14); } .blog-chan__avatar, .blog-chan__go { display: none; } .blog-chan__ico { display: block; width: 22px; height: 21px; object-fit: contain; flex-shrink: 0; } .blog-chan__name { font-size: 15.5px; font-weight: 600; line-height: 1.3; text-align: center; } } /* ========================================================================== 57. 원장님 1차 피드백 (2026-09-24) ========================================================================== */ /* --- 원장 카드: 사진을 줄여 3개씩 2줄 --- */ .dr-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 2.6vw, 44px) clamp(20px, 2vw, 36px); } @media (max-width: 1100px) { .dr-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .dr-grid { grid-template-columns: 1fr; } } .dr-card__img { aspect-ratio: 16 / 10; } .dr-card__title { font-size: var(--fs-h4); } .dr-card__desc { font-size: var(--fs-base); white-space: pre-line; } /* --- 숫자로 보는 진료 경력: 누적 방문 환자 삭제로 4칸 · 숫자 옆 괄호 주석 --- */ .stat-grid--four { grid-template-columns: repeat(4, 1fr); } .stat-grid--four .stat:nth-child(n) { grid-column: auto; } @media (max-width: 1100px) { .stat-grid--four { grid-template-columns: repeat(2, 1fr); } .stat-grid--four .stat:nth-child(3) { box-shadow: inset 0 1px 0 rgba(249, 247, 242, .16); } .stat-grid--four .stat:nth-child(4) { box-shadow: inset 1px 0 0 rgba(249, 247, 242, .16), inset 0 1px 0 rgba(249, 247, 242, .16); } } .stat__value { flex-wrap: wrap; } .stat__note { flex-basis: 100%; font-size: var(--fs-sm); font-weight: 400; color: var(--gold-200); letter-spacing: -.02em; } /* --- 유튜브: 썸네일이 잘리지 않게 — PC는 4편을 한 줄에 모두, 태블릿은 2편씩 온전히 --- */ @media (min-width: 1100px) { .social-strip--yt .social-band__videos { overflow: visible; } .social-strip--yt .mini-video { flex-basis: calc((100% - 3 * clamp(16px, 1.6vw, 28px)) / 4); } .social-strip--yt .yt-swipe__bar { display: none; } } @media (min-width: 761px) and (max-width: 1099px) { .social-strip--yt .mini-video { flex-basis: calc((100% - clamp(16px, 1.6vw, 28px)) / 2); } } /* --- 히어로 3번(저서): 책을 쓰는 이유 한두 줄 --- */ .hero-books__why { margin-top: clamp(6px, .6vw, 10px); font-size: var(--fs-base); line-height: 1.75; letter-spacing: -.03em; color: var(--ink-soft); white-space: pre-line; } @media (max-width: 900px) { .hero-books__why { font-size: 14px; white-space: normal; } } /* --- 대표원장: 인증 및 사회공헌 사진 (세로 인증서 2 + 가로 후원패 1) --- */ .recog { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 560px)); gap: clamp(14px, 1.4vw, 24px); align-items: end; margin-top: clamp(18px, 1.8vw, 30px); } .recog__item { margin: 0; display: flex; flex-direction: column; gap: 10px; } .recog__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(20, 44, 62, .12); } .recog__item--wide img { aspect-ratio: 16 / 9; } .recog__item figcaption { font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; } @media (max-width: 700px) { .recog { grid-template-columns: 1fr 1fr; } .recog__item--wide { grid-column: 1 / -1; } } /* ========================================================================== 58. 관리자에서 등록하는 맨 위 안내 배너 · 팝업 ========================================================================== */ .notice-bar { position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 190; background: var(--navy-900); color: var(--cream); transition: top .4s var(--ease); } body.is-header-hidden .notice-bar { top: 0; } .notice-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 6px; } .notice-bar__text { flex: 1; margin: 0; font-size: var(--fs-sm); line-height: 1.5; text-align: center; color: inherit; } a.notice-bar__text { text-decoration: underline; text-underline-offset: 3px; } a.notice-bar__text:hover { color: var(--gold-200); } .notice-bar__close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; } .notice-bar__close:hover, .notice-bar__close:focus-visible { background: rgba(255, 255, 255, .12); } html.has-popup { overflow: hidden; } .jph-popup { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; } .jph-popup__dim { position: absolute; inset: 0; background: rgba(10, 20, 30, .55); } .jph-popup__box { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); } .jph-popup__stage { overflow: auto; background: var(--gray-200); } .jph-popup__stage img { display: block; width: 100%; height: auto; } .jph-popup__nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px; border-top: 1px solid var(--line); } .jph-popup__nav[hidden] { display: none; } .jph-popup__arrow { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-size: 22px; line-height: 1; cursor: pointer; color: var(--navy-800); } .jph-popup__count { font-size: 14px; color: var(--ink-soft); min-width: 40px; text-align: center; } .jph-popup__foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); } .jph-popup__foot button { min-height: 50px; border: 0; background: var(--white); font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); } .jph-popup__foot button + button { border-left: 1px solid var(--line); font-weight: 600; color: var(--navy-800); } .jph-popup__foot button:hover, .jph-popup__foot button:focus-visible { background: var(--cream); } @media (max-width: 760px) { .notice-bar__text { font-size: 13.5px; text-align: left; } .jph-popup { align-items: end; padding: 0 0 calc(76px + env(safe-area-inset-bottom)); } .jph-popup__box { width: calc(100% - 24px); max-height: calc(100dvh - 120px); } } /* --- 유튜브: 최신 영상 3편 임베드 (PC 3열 · 모바일 1열) --- */ .yt-latest { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 28px); margin-top: clamp(20px, 3vw, 36px); } .yt-embed { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); } .yt-embed iframe { display: block; width: 100%; height: 100%; border: 0; } @media (max-width: 760px) { .yt-latest { grid-template-columns: 1fr; } } /* --- 자격 증빙: 인증서 3장 나란히 (모바일은 3등분) --- */ @media (max-width: 760px) { .cert-hero__imgs--3 { gap: 10px; } .cert-hero__imgs--3 .cert { width: calc((100% - 20px) / 3); } } /* ========================================================================== 64. 45차 전체 검수 (2026-09-29) — 줄바꿈 다듬기 ========================================================================== */ /* 제목 · 표 머리는 줄 길이를 고르게 나눠 마지막 줄에 한두 글자만 떨어지지 않게 한다 */ h1, h2, h3, h4, .sub-head, .sub-head-sm, .sec-head__title, .step__title, .tbl th, .num-card__text strong { text-wrap: balance; } /* 본문은 마지막 줄이 너무 짧아지지 않게 (지원하지 않는 브라우저는 그대로) */ p, li, td, dd, figcaption { text-wrap: pretty; } /* 하위 메뉴 탭: 넘치지 않으면 가운데, 넘치면 첫 탭부터 보이게 (justify-content: center 는 넘칠 때 왼쪽이 잘린다) */ .pill-nav:not([data-filter-group]) > :first-child { margin-left: auto; } .pill-nav:not([data-filter-group]) > :last-child { margin-right: auto; } /* 갤러리 칸이 이미지 원래 폭 때문에 넓어지지 않게 — 네 칸 폭을 똑같이 */ .gallery > * { min-width: 0; } /* 방송 캡처는 16:9 — 4:3 으로 자르면 화면 자막이 잘린다 */ .gallery--tv .g-item { aspect-ratio: 16 / 9; } /* 검사 전 · 중 · 후 번호 원: 2 · 3단계는 위 여백만큼 내려 'STEP' 줄에 맞춘다 */ .phase + .phase::after { top: calc(clamp(44px, 4.4vw, 80px) - 4px); } .phase + .phase:not(:last-child)::before { top: calc(clamp(48px, 4.4vw, 72px) + clamp(44px, 4.4vw, 80px)); } .phase:not(:last-child)::before { bottom: calc((clamp(44px, 4.4vw, 80px) - 4px) * -1); } /* 진료 시간표 요일 칸은 한 줄로 (월 · 화 · 목 · 금) */ .tbl--flush th { white-space: nowrap; } /* 내시경 페이지 상단 사진: 장비가 사진 오른쪽 끝에 있어 모바일에서 가운데로 자르면 사라진다 — 오른쪽 기준으로 */ @media (max-width: 760px) { .page-hero--photo .page-hero__media { background-position: 88% 50% !important; } }