/* 위드의원 서브페이지 — 화면 가득한 사진이 카드로 줄어드는 스크롤 연출(GSAP ScrollTrigger + Lenis). main.css 다음에 로드한다. 스크롤에 묶인 초기 상태(흐린 글자, 닫힌 사진)는 .motion 아래에서만 걸린다: sub.js가 GSAP을 확인하고 움직임 줄이기 설정이 아닐 때 에 붙인다. 없으면 전부 보이는 정적 페이지다. */ @property --fill-ink { syntax: ""; inherits: true; initial-value: #1f1f1f; } @property --fill-dim { syntax: ""; inherits: true; initial-value: rgba(31, 31, 31, 0.16); } .page-sub { --section: clamp(96px, 11vw, 160px); --fill-ink: var(--ink); --fill-dim: rgba(31, 31, 31, 0.16); } /* lenis (부드러운 스크롤) 필수 규칙 */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ---------- header floating over the full visual ---------- */ .page-sub .site-header { position: fixed; top: 0; left: 0; right: 0; background: rgba(250, 249, 247, 0.94); transition: background-color 0.45s var(--ease-out), box-shadow 0.35s var(--ease-out); } .site-header.is-over { background: transparent; box-shadow: none; } .site-header.is-over .brand { color: #fff; --brand-disc: #f7f5f1; --brand-w: #25262b; } .site-header.is-over .brand-word small { color: rgba(255, 255, 255, 0.7); } .site-header.is-over .gnb-link, .site-header.is-over .icon-btn { color: #fff; } .site-header.is-over .gnb-item > .gnb-link { color: #fff; } .site-header.is-over .gnb-link::after { background: #fff; } .site-header.is-over .icon-btn:hover { background: rgba(255, 255, 255, 0.14); } .site-header.is-over:not(.is-mega) .lang-switch { border-color: rgba(255, 255, 255, 0.45); } .site-header.is-over:not(.is-mega) .lang-switch a { color: #fff; } .site-header.is-over:not(.is-mega) .lang-switch a:hover { background: rgba(255, 255, 255, 0.14); } .site-header.is-over:not(.is-mega) .lang-switch a[aria-current="true"] { background: #fff; color: var(--ink); } /* the mega menu opens a white header, even over the photo */ .site-header.is-over.is-mega { background: #faf9f7; } .site-header.is-over.is-mega .brand { color: var(--ink); --brand-disc: #25262b; --brand-w: #c7b48f; } .site-header.is-over.is-mega .brand-word small { color: var(--ink-3); } .site-header.is-over.is-mega .gnb-item > .gnb-link, .site-header.is-over.is-mega .icon-btn { color: var(--ink); } .site-header.is-over.is-mega .gnb-link::after { background: var(--accent); } .site-header.is-over.is-mega .gnb-item:hover > .gnb-link, .site-header.is-over.is-mega .gnb-item.is-current > .gnb-link { color: var(--accent-ink); } /* a word or line whose color fills in from the left (the reference's fill text) */ .fill { color: var(--fill-dim); background-image: linear-gradient(var(--fill-ink), var(--fill-ink)); -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; background-size: var(--fill-p, 100%) 100%; } .motion .fill[data-fill] { --fill-p: 0%; } @keyframes fill-in { from { background-size: 0% 100%; } to { background-size: 100% 100%; } } /* ---------- 1. full visual that settles into a card ---------- */ .sv { position: relative; height: 136svh; background: var(--paper); } .sv-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; } .sv-media { --fw: calc(100% - 2 * var(--inset)); /* a big surface: inset like the main hero and the consult card */ --fh: min(54svh, 540px); position: absolute; inset: 0; overflow: hidden; background: var(--night); clip-path: inset(0 0 0 0 round 0px); transition: clip-path 1.05s var(--ease-out); } .sv.is-framed .sv-media { clip-path: inset(calc(100% - var(--fh)) calc((100% - var(--fw)) / 2) 0 calc((100% - var(--fw)) / 2) round var(--radius-lg)); } .sv-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sv-pos, 48% 50%); transition: transform 1.05s var(--ease-out); } /* framed: the middle of the photo slides down into the card */ .sv.is-framed .sv-media img { transform: translateY(calc(50svh - var(--fh) / 2 + var(--sv-shift, 3svh))); } /* no shrink: the photo must stay wider than the card */ .js .sv-media img { animation: sv-settle 1.9s var(--ease-out) backwards; } @keyframes sv-settle { from { transform: scale(1.15); } } /* the veil only darkens for the white title; the photo keeps its own warm colour */ .sv-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(21, 21, 24, 0.55); transition: opacity 1.05s var(--ease-out); } .sv.is-framed .sv-media::after { opacity: 0.18; } /* bottom left: inside the card, clear of the labels */ .sv-head { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + clamp(20px, 6svh, 64px)); color: #fff; --fill-ink: #fff; --fill-dim: rgba(255, 255, 255, 0.3); transition: color 0.6s var(--ease-out) 0.15s, --fill-ink 0.6s var(--ease-out) 0.15s, --fill-dim 0.6s var(--ease-out) 0.15s; } .sv.is-framed .sv-head { color: var(--ink); --fill-ink: var(--ink); --fill-dim: rgba(31, 31, 31, 0.16); } .sv-title { margin: 0; } .sv-word { display: block; margin-left: -0.03em; font-family: var(--serif); font-size: clamp(2.75rem, 7.6vw, 6.5rem); font-weight: 500; line-height: 1.04; letter-spacing: 0; } .sv-line { display: block; margin-top: clamp(10px, 1.4vw, 18px); font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; } .js .sv-word { animation: rise 1.1s var(--ease-out) 0.25s both; } .js .sv-line .fill { animation: fill-in 1.4s var(--ease-out) 0.75s both; } .js .sv .lnb { animation: rise 0.9s var(--ease-out) 1s both; } /* location dropdowns (the reference's LNB) */ .lnb { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 clamp(16px, 3svh, 36px) -10px; font-size: 0.9375rem; font-weight: 650; } /* above the animated title, or its menus slide under it */ .lnb-home, .lnb-btn { color: inherit; border-radius: 999px; transition: background-color 0.25s var(--ease-out); } .lnb-home { display: grid; place-items: center; width: 44px; height: 44px; } .lnb-home .icon { width: 20px; height: 20px; } .lnb-item { position: relative; } .lnb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font: inherit; } .lnb-btn .icon { width: 16px; height: 16px; transition: transform 0.35s var(--ease-out); } .lnb-btn[aria-expanded="true"] .icon { transform: rotate(180deg); } .lnb-home:hover, .lnb-btn:hover { background: rgba(255, 255, 255, 0.14); } .sv.is-framed .lnb-home:hover, .sv.is-framed .lnb-btn:hover { background: var(--mist); } .lnb-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; min-width: 208px; display: grid; gap: 2px; padding: 8px; border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: 0 26px 50px -22px rgba(27, 28, 32, 0.45); animation: pop 0.35s var(--ease-out); } .lnb-menu[hidden] { display: none; } .lnb-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; } .lnb-menu a:hover { background: var(--mist); color: var(--accent-ink); } .lnb-menu a[aria-current="page"] { color: var(--accent-ink); } /* ---------- 4. the ring: a guide circle drawn from five o'clock, then flung outward ---------- */ .ring { position: relative; background: var(--night); color: #fff; overflow: hidden; } .ring-marquee { padding-top: clamp(40px, 6vw, 96px); white-space: nowrap; font-size: clamp(2.5rem, 7.4vw, 6rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.08); } .ring-marquee span { display: inline-block; padding-left: var(--gutter); } .ring-stage { position: relative; height: 100svh; display: grid; place-items: center; } .ring-circle { position: absolute; width: min(74vmin, 660px); height: auto; overflow: visible; transform-origin: 50% 50%; } .ring-solid { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; } .ring-dash { fill: none; stroke: var(--sand); stroke-opacity: 0.55; stroke-width: 1.5; stroke-dasharray: 5 7; stroke-linecap: round; vector-effect: non-scaling-stroke; } .ring-copy { position: relative; padding: 0 var(--gutter); text-align: center; } .ring-title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 750; line-height: 1.22; letter-spacing: -0.038em; } .ring-script { margin-bottom: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; color: #c7b48f; } .ring-marquee { font-family: var(--serif); font-weight: 500; letter-spacing: 0.04em; } .ring-text { margin: 20px auto 0; max-width: 26em; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--sand); text-wrap: balance; } /* ---------- 5. three pillars; the bronze flows from one circle into the next ---------- */ .pillars { position: relative; margin-top: -45svh; background: var(--night); color: #fff; padding: clamp(40px, 5vw, 80px) 0 var(--section); --fill-ink: #fff; --fill-dim: rgba(255, 255, 255, 0.18); } .pillars-title { font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 750; line-height: 1.24; letter-spacing: -0.038em; } /* 단독으로 쓸 때: 앞 구역에 겹치지 않는 차콜 카드 */ .pillars.is-solo { margin: 0 var(--inset) var(--section); padding-top: var(--section); border-radius: var(--radius-lg); } .pillar-list { --gap: clamp(16px, 2.4vw, 40px); position: relative; margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .pillar-list::before { content: ""; position: absolute; left: 16%; right: 16%; top: 50%; border-top: 1.5px dashed rgba(236, 229, 218, 0.4); } .motion .pillar-list::before { clip-path: inset(0 100% 0 0); transition: clip-path 2.4s var(--ease-out); } .motion .pillar-list.is-in::before { clip-path: inset(0 0 0 0); } .pillar { position: relative; isolation: isolate; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; align-content: center; padding: 12%; text-align: center; background: var(--deep-900); } .pillar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent-ink); clip-path: circle(150% at 0% 50%); } .motion .pillar::before { clip-path: circle(0% at 0% 50%); transition: clip-path 1.1s var(--ease-out); } .motion .pillar.is-lit::before { clip-path: circle(150% at 0% 50%); } .pillar-icon { width: clamp(40px, 4vw, 56px); height: clamp(40px, 4vw, 56px); margin-bottom: 14px; color: #fff; } .pillar strong { display: block; font-size: clamp(1.625rem, 2.7vw, 2.5rem); font-weight: 750; line-height: 1.3; letter-spacing: -0.035em; } .pillar span { display: block; margin-top: 10px; max-width: 15em; font-size: 1rem; line-height: 1.55; text-wrap: balance; } .motion .pillar-icon, .motion .pillar span { color: var(--sand); transition: color 0.6s var(--ease-out) 0.3s; } .motion .pillar.is-lit .pillar-icon, .motion .pillar.is-lit span { color: #fff; } /* ---------- related centers: tall cards that open wider on hover ---------- */ .areas { padding: 0 0 var(--section); } .areas-title { font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 750; line-height: 1.24; letter-spacing: -0.038em; } .areas-lead { margin-top: 14px; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--ink-2); } .area-list { margin-top: clamp(32px, 4vw, 56px); display: flex; gap: 12px; height: clamp(400px, 38vw, 540px); } .area-list li { flex: 1 1 0; min-width: 0; transition: flex-grow 0.8s var(--ease-out); } .area-list li:hover, .area-list li:focus-within { flex-grow: 2.1; } .motion .area-list li { opacity: 0; transform: translateY(48px); transition: flex-grow 0.8s var(--ease-out), opacity 0.8s var(--ease-out), transform 1s var(--ease-out); transition-delay: 0s, calc(var(--i) * 0.08s), calc(var(--i) * 0.08s); } .motion .area-list.is-in li { opacity: 1; transform: none; } .motion [data-rise] { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); } .motion [data-rise].is-in { opacity: 1; transform: none; } .area-card { position: relative; display: block; height: 100%; border-radius: var(--radius-lg); overflow: hidden; color: #fff; background: var(--deep-900); } .area-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .area-card:hover img { transform: scale(1.05); } .area-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 21, 24, 0) 42%, rgba(21, 21, 24, 0.8) 100%); } .area-model { position: absolute; left: 16px; top: 16px; z-index: 1; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 600; } .area-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 6px; padding: clamp(20px, 2vw, 28px); } .area-name { font-size: clamp(1.625rem, 2.7vw, 2.5rem); font-weight: 750; line-height: 1.3; letter-spacing: -0.035em; } .area-desc { font-size: 0.9375rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .area-en { font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: #e3d6c1; } .area-go { position: absolute; right: clamp(20px, 2vw, 28px); bottom: clamp(24px, 2.4vw, 32px); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); } .area-go .icon { width: 20px; height: 20px; } .area-card:hover .area-go, .area-card:focus-visible .area-go { opacity: 1; transform: none; } /* ---------- doctor profiles: the portrait with its bronze second line, the name, two ruled lists ---------- */ .profile { padding: var(--section) 0; } .profile.is-soft { margin: 0 var(--inset); border-radius: var(--radius-lg); background: var(--mist); } .profile-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(48px, 8vw, 128px); align-items: center; } .profile.is-flip .profile-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } /* the photo keeps the narrow column on either side */ .profile.is-flip .profile-photo { order: 2; } .profile-photo { position: relative; margin: 16px; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist-2); outline: 1px solid var(--accent-ink); outline-offset: 16px; } .profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } .motion .profile-photo img { clip-path: inset(10% 10% 10% 10% round 28px); transform: scale(1.06); transition: clip-path 1.4s var(--ease-out), transform 1.6s var(--ease-out); } .motion .profile.is-in .profile-photo img { clip-path: inset(0 0 0 0 round 0); transform: none; } .profile-name { font-size: clamp(2.25rem, 4.3vw, 4.25rem); font-weight: 750; line-height: 1.17; letter-spacing: -0.038em; } .profile-name small { margin-left: 0.25em; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 750; letter-spacing: -0.03em; } .profile-meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 1rem; font-weight: 650; color: var(--accent-ink-600); } .profile-meta span + span { color: var(--ink-3); font-weight: 500; } .profile-lead { margin-top: clamp(20px, 2.4vw, 28px); max-width: 30em; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--ink-2); text-wrap: pretty; } .profile-lists { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; } .profile-lists h3 { padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); font-size: 1rem; font-weight: 750; } .profile-lists li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-2); } .profile-lists li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .profile-lists li.is-key { color: var(--ink); font-weight: 650; } .motion .profile-lists li { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(0.4s + var(--i, 0) * 0.06s); } .motion .profile.is-in .profile-lists li { opacity: 1; transform: none; } /* ---------- directions: the address in one breath, beside the building photo ---------- */ .addr { padding: clamp(64px, 8vw, 120px) 0 var(--section); } .addr-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .addr-title { font-size: clamp(2.25rem, 4.3vw, 4.25rem); font-weight: 750; line-height: 1.17; letter-spacing: -0.038em; } .addr-sub { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; } .addr-sub span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--mist); font-size: 0.9375rem; font-weight: 650; color: var(--ink-2); } .addr-actions { margin-top: clamp(28px, 3vw, 40px); } .addr-info { margin-top: 28px; } .addr-copied { min-height: 1.7em; margin-top: 12px; font-size: 0.9375rem; font-weight: 650; color: var(--accent-ink-600); } .addr-map { position: relative; margin: 0; } .addr-map-link { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); } .addr-map-link img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 1.2s var(--ease-out); } .addr-map-link:hover img { transform: scale(1.04); } /* the photo card opens Naver Map in a new tab */ .addr-map-cta { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; white-space: nowrap; background: var(--ink); color: #fff; font-size: 0.9375rem; font-weight: 650; box-shadow: 0 16px 32px -18px rgba(27, 28, 32, 0.8); transition: background-color 0.25s var(--ease-out), transform 0.35s var(--ease-out); } .addr-map-cta .icon { width: 18px; height: 18px; } .addr-map-link:hover .addr-map-cta, .addr-map-link:focus-visible .addr-map-cta { background: var(--accent-ink); color: #fff; transform: translateY(-2px); } .addr-map-credit { margin-top: 10px; font-size: 0.8125rem; color: var(--ink-3); text-align: right; } .motion .addr-map-link { clip-path: inset(8% 8% 8% 8% round 40px); transition: clip-path 1.4s var(--ease-out); } .motion .addr-map.is-in .addr-map-link { clip-path: inset(0 0 0 0 round var(--radius-lg)); } /* ---------- hours: the numbers roll in on the night band ---------- */ /* odometer: sub.js turns each digit into a column of 0–9 that rolls to its value */ .odo { display: inline-flex; } .odo-col { display: inline-block; height: 1em; overflow: hidden; } .odo-strip { display: flex; flex-direction: column; transition: transform 2.2s var(--ease-out); } .odo-strip > span { display: block; height: 1em; line-height: 1; } .clock { margin-inline: var(--inset); padding: var(--section) 0; border-radius: var(--radius-lg); background: var(--night); color: #fff; --fill-ink: #fff; --fill-dim: rgba(255, 255, 255, 0.18); } .clock-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(48px, 8vw, 128px); align-items: center; } .clock-title { font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 750; line-height: 1.24; letter-spacing: -0.038em; } .clock-list { margin-top: clamp(28px, 3.4vw, 48px); border-top: 1.5px solid rgba(236, 229, 218, 0.5); } .clock-list > div { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; padding: clamp(16px, 2vw, 26px) 0; border-bottom: 1px solid rgba(236, 229, 218, 0.16); } .clock-list dt { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); font-weight: 700; color: var(--sand); } html[lang="en"] .clock-list > div, html[lang="zh-CN"] .clock-list > div { grid-template-columns: 168px 1fr; } .clock-list dd { font-size: clamp(2.5rem, 5.6vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .clock-time { display: inline-flex; align-items: baseline; gap: 0.22em; } .clock-time i { font-style: normal; font-weight: 300; color: var(--accent); } .clock-list .is-off dd { color: var(--sand); font-size: clamp(1.625rem, 2.7vw, 2.5rem); letter-spacing: -0.035em; } .clock-note { margin-top: 20px; color: var(--sand); } .clock-photo { position: relative; margin: 16px; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--deep-900); outline: 1px solid var(--accent); outline-offset: 16px; } .clock-photo img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 66% 30%; } .book-list { margin-top: clamp(64px, 8vw, 112px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); } .book-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; height: 100%; padding: clamp(20px, 2.2vw, 30px); border-radius: var(--radius); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(236, 229, 218, 0.14); transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .book-item:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; } .book-item:hover .book-label { color: #fff; } .book-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); } .book-item:hover .book-icon { background: var(--night); color: var(--accent); } .book-icon .icon { width: 24px; height: 24px; } .book-label { font-size: 0.9375rem; font-weight: 650; color: var(--sand); } .book-item strong { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* ---------- the clinic: real photos, unveiled and drifting a little ---------- */ .tour { padding: var(--section) 0; } .tour-title { font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 750; line-height: 1.24; letter-spacing: -0.038em; } .tour-lead { margin-top: 16px; max-width: 36em; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--ink-2); } .tour-grid { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px) clamp(14px, 1.6vw, 24px); } .tour-shot { display: flex; flex-direction: column; margin: 0; } .tour-a { grid-column: 1 / 8; grid-row: 1 / 3; } .tour-b, .tour-c { grid-column: 8 / 13; } .tour-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--mist); aspect-ratio: 16 / 10; } .tour-a .tour-frame { flex: 1; aspect-ratio: auto; min-height: 420px; } .tour-frame img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; } .tour-a img { object-position: 48% 40%; } .tour-b img { object-position: 38% 50%; } .tour-c img { object-position: 50% 40%; } .tour-shot figcaption { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.9375rem; color: var(--ink-2); } .tour-shot figcaption b { padding: 3px 12px; border-radius: 999px; background: var(--mist); font-size: 0.8125rem; font-weight: 650; color: var(--accent-ink-600); } .motion .tour-frame { clip-path: inset(100% 0 0 0 round var(--radius-lg)); transition: clip-path 1.2s var(--ease-out); } .motion .tour-shot.is-in .tour-frame { clip-path: inset(0 0 0 0 round var(--radius-lg)); } .motion .tour-shot figcaption { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out) 0.35s, transform 0.9s var(--ease-out) 0.35s; } .motion .tour-shot.is-in figcaption { opacity: 1; transform: none; } /* ---------- a reel of real photos that drifts sideways with the scroll ---------- */ .reel { padding: var(--section) 0; overflow: hidden; } .reel-title { font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 750; line-height: 1.24; letter-spacing: -0.038em; } .reel-lead { margin-top: 14px; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--ink-2); } .reel-track { --h: clamp(300px, 32vw, 460px); margin-top: clamp(40px, 5vw, 72px); display: flex; gap: clamp(14px, 1.6vw, 24px); width: max-content; padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2); } .reel-item { position: relative; flex: none; height: var(--h); aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); } .reel-item.is-wide { aspect-ratio: 3 / 2; } .reel-item img { width: 100%; height: 100%; object-fit: cover; } .reel-cap { position: absolute; left: 16px; bottom: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 600; } /* ---------- 진료센터: 진료 항목 카드 (상세 페이지가 없어 링크 없음) ---------- */ .cx-items { padding-block: var(--section); } .cx-list { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .cx-list li { display: grid; gap: 6px; align-content: start; min-height: 168px; padding: 24px 24px 22px; border-radius: var(--radius); background: var(--mist); border: 1px solid transparent; transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out); } .cx-list li:hover { border-color: var(--line); background: #fff; } .cx-list b { font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; color: var(--accent-ink); } .cx-list strong { margin-top: auto; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 750; letter-spacing: -0.03em; } .cx-list span { font-family: var(--serif); font-style: italic; font-size: 1.1875rem; color: var(--ink-3); } .cx-note { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .cx-note p { font-weight: 650; color: var(--ink-2); } /* 진료 사진 두 장 */ .cx-photos { padding-bottom: var(--section); } .cx-photos .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); } .cx-photos figure { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); } .cx-photos img { width: 100%; height: 100%; object-fit: cover; } /* 담당 의료진 */ .cx-docs { padding-block: var(--section); background: var(--mist); border-radius: var(--radius-lg); margin-inline: var(--inset); } .cx-doc-list { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 16px; } /* 의료진이 한 명이면 한 칸만 */ .cx-doc { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 24px; align-items: start; padding: 24px; border-radius: var(--radius); background: #fff; } .cx-doc img { width: 128px; height: 160px; border-radius: 16px; object-fit: cover; object-position: 50% 12%; } .cx-doc h3 { font-size: 1.375rem; font-weight: 750; letter-spacing: -0.02em; } .cx-doc h3 small { margin-left: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); } .cx-doc .cx-focus { margin-top: 4px; font-size: 0.9375rem; font-weight: 650; color: var(--accent-ink); } .cx-doc ul { margin-top: 14px; display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); } .cx-doc li { position: relative; padding-left: 14px; } .cx-doc li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .cx-doc-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-ink); } .cx-doc-more .icon { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); } .cx-doc-more:hover .icon { transform: translateX(3px); } /* ---------- 상담 안내: 채널 네 가지와 위챗 QR ---------- */ .ch { padding-block: var(--section); } .ch-list { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ch-item { display: grid; gap: 10px; align-content: start; min-height: 208px; padding: 28px 24px; border-radius: var(--radius); background: var(--mist); transition: background-color 0.3s var(--ease-out), transform 0.4s var(--ease-out); } .ch-item:hover { background: var(--sand); transform: translateY(-3px); } .ch-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--accent-ink); } .ch-item.is-kakao .ch-icon { background: var(--kakao); color: #191919; } .ch-item.is-naver .ch-icon { background: var(--naver); color: #fff; } .ch-item.is-wechat .ch-icon { background: var(--wechat); color: #fff; } .ch-item.is-phone .ch-icon { background: var(--deep); color: #fff; } .ch-icon .icon { width: 26px; height: 26px; } .ch-item strong { margin-top: auto; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; } .ch-item span { font-size: 0.9375rem; color: var(--ink-2); } .wx { padding-block: var(--section); background: var(--deep); color: #fff; border-radius: var(--radius-lg); margin: 0 var(--inset) var(--section); scroll-margin-top: calc(var(--header-h) + 16px); } .wx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .wx .section-kicker { color: #c7b48f; } .wx .section-title { color: #fff; } .wx .section-lead { color: rgba(255, 255, 255, 0.82); } .wx-link { margin-top: 28px; display: grid; gap: 6px; } .wx-link span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.66); } .wx-link a { font-weight: 650; word-break: break-all; text-decoration: underline; text-underline-offset: 0.22em; } .wx-qrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .wx-qrs figure { display: grid; gap: 12px; justify-items: center; padding: 20px 20px 18px; border-radius: var(--radius); background: #fff; color: var(--ink); } .wx-qrs img { width: 100%; max-width: 260px; height: auto; } .wx-qrs figcaption { font-size: 0.9375rem; font-weight: 700; } /* ---------- responsive ---------- */ @media (max-width: 960px) { .ch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wx-grid { grid-template-columns: 1fr; } .profile-grid { grid-template-columns: 1fr; } .profile.is-flip .profile-grid { grid-template-columns: 1fr; } .profile.is-flip .profile-photo { order: 0; } .profile-photo { width: min(100% - 32px, 420px); } .addr-grid, .clock-grid { grid-template-columns: 1fr; } .clock-photo { width: min(100% - 32px, 460px); aspect-ratio: 5 / 4; } /* phones and tablets: the map rides along at the top while the steps pass under it */ .tour-grid { grid-template-columns: 1fr; } .tour-a, .tour-b, .tour-c { grid-column: auto; grid-row: auto; } .tour-a .tour-frame { flex: none; aspect-ratio: 4 / 3; min-height: 0; } } @media (max-width: 768px) { .cx-photos .container { grid-template-columns: 1fr; } .cx-doc { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 20px; } .cx-doc img { width: 96px; height: 120px; } .ch-list { grid-template-columns: 1fr; } .ch-item { min-height: 0; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px; } .ch-item .ch-icon { grid-row: span 2; } .ch-item strong { margin-top: 0; } .wx-qrs { gap: 10px; } .wx-qrs figure { padding: 14px 12px; } .sv { height: 124svh; } .sv-media { --fh: min(52svh, 460px); } .sv-media img { object-position: var(--sv-pos-m, var(--sv-pos, 48% 50%)); } /* above the phone's bottom bar */ /* a page can reframe its subject for a portrait screen */ /* .sv-low: the subject's face sits high in its photo, so on a phone the title moves to the bottom and the card settles at the top, with the face inside it */ .sv-low .sv-head { top: auto; bottom: calc(88px + env(safe-area-inset-bottom)); } .sv-low.is-framed .sv-media { clip-path: inset(calc(var(--header-h) + 16px) var(--inset) calc(100% - var(--header-h) - 16px - var(--fh)) var(--inset) round var(--radius-lg)); } .sv-low.is-framed .sv-media img { transform: translateY(var(--sv-shift-m, 12svh)); } .pillar-list { grid-template-columns: 1fr; justify-items: center; } .pillar-list::before { left: 50%; right: auto; top: 12%; bottom: 12%; border-top: 0; border-left: 1.5px dashed rgba(236, 229, 218, 0.4); } .motion .pillar-list::before { clip-path: inset(0 0 100% 0); } .pillar { width: min(100%, 340px); } .pillar::before, .motion .pillar.is-lit::before { clip-path: circle(150% at 50% 0%); } .motion .pillar::before { clip-path: circle(0% at 50% 0%); } .ring-circle { width: min(90vw, 660px); } .area-list { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); } .area-list::-webkit-scrollbar { display: none; } .area-list li, .area-list li:hover, .area-list li:focus-within { flex: 0 0 min(64vw, 280px); height: 400px; scroll-snap-align: start; } .area-go { opacity: 1; transform: none; } .profile-lists { grid-template-columns: 1fr; } .addr-map-link { aspect-ratio: 4 / 5; } /* the description ends before the arrow */ .addr-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .addr-actions .btn:first-child { grid-column: 1 / -1; } .clock-list > div { grid-template-columns: 64px 1fr; } .clock-list dd { font-size: clamp(1.625rem, 8.4vw, 3rem); } /* the times fit a 360px phone */ .book-list { grid-template-columns: 1fr; } /* the reel becomes a strip to swipe */ .reel-track { --h: 360px; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-inline: var(--gutter); } .reel-track::-webkit-scrollbar { display: none; } .reel-item { height: auto; width: min(72vw, 300px); aspect-ratio: 4 / 5; scroll-snap-align: start; } .reel-item.is-wide { width: min(84vw, 380px); aspect-ratio: 4 / 5; } }