/* ===== Doctor (cinematic split — home only) ===== */
.doctor {
position: relative;
display: grid;
gap: clamp(28px, 5vw, 60px);
align-items: center;
max-width: 1080px;
margin: 0 auto;
}
@media (min-width: 768px) {
.doctor { grid-template-columns: 0.92fr 1.08fr; }
}
.doctor-photo-wrap { position: relative; }
.doctor-photo-wrap .img-frame { max-width: 360px; margin: 0 auto; }
/* Orbit: subtle teal stroke ring rotating slowly; decorative only */
.doctor-orbit {
position: absolute;
inset: -6%;
border-radius: 50%;
border: 1px solid var(--glow-teal);
pointer-events: none;
animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.doctor-orbit { animation: none; }
}
/* ===== Doctor preview ===== */
.doctor-tagline { color: var(--color-text); margin-bottom: var(--sp-2); }
.doctor-history { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.doctor-history li {
position: relative;
padding-left: 14px;
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
}
.doctor-history li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 10px;
height: 2px;
background: var(--color-accent);
}
/* ===== Doctor full profile (about/doctor.html) ===== */
.profile-hero {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
align-items: end;
}
@media (min-width: 768px) { .profile-hero { grid-template-columns: 320px 1fr; gap: var(--sp-5); } }
.profile-hero .img-frame { max-width: 320px; }
.profile-hero .role {
display: inline-block;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.875rem;
color: var(--color-accent);
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.profile-hero h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; margin-bottom: 8px; }
.profile-hero h1 .en {
display: block;
font-family: var(--font-serif);
font-size: var(--fs-body-sm);
color: var(--color-accent);
letter-spacing: 0.08em;
margin-top: 6px;
text-transform: uppercase;
}
.profile-hero .lead { color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.profile-section {
padding: var(--sp-4) 0;
border-top: 1px solid var(--color-border);
}
.profile-section h2 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: var(--sp-2);
display: flex;
align-items: center;
gap: 8px;
}
.profile-section h2 .num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-primary-light);
color: var(--color-accent);
font-size: 0.875rem;
font-weight: 700;
}
.profile-list li {
position: relative;
padding: 12px 0 12px 16px;
border-bottom: 1px dashed var(--color-border);
font-size: var(--fs-body-sm);
}
.profile-list li:last-child { border-bottom: 0; }
.profile-list li::before {
content: "";
position: absolute;
left: 0;
top: 20px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-accent);
}
.profile-list .meta { display: block; font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; }
.placeholder-note { color: var(--color-text-muted); font-size: 0.8125rem; font-style: italic; margin-left: 8px; }
/* ===== Care icon ===== */
/* 원형 배지 일러스트 슬롯. 배지가 자체 테두리·배경을 갖고 있어 예전의
틴트 박스(56px + radius 14px)를 두면 '배지 안의 배지'가 된다. */
.care-icon {
width: clamp(88px, 9vw, 112px);
height: clamp(88px, 9vw, 112px);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-2);
}
.care-icon img {
width: 100%;
height: 100%;
display: block;
}
/* is-accent는 틴트 박스 시절의 변형 — 배지에는 얹을 면이 없어 무효화 */
.care-icon.is-accent { background: transparent; }
/* ===== Care Specialties layout (index) ===== */
@media (min-width: 1024px) {
.theme-light .grid-3.care-area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.care-specialties-layout { display: flex; flex-direction: column; gap: var(--sp-3); }
.care-specialties-main {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-3);
}
@media (min-width: 640px) { .care-specialties-main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .care-specialties-main { grid-template-columns: repeat(3, 1fr); } }
.care-specialties-main .card {
position: relative;
background: var(--color-glass);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 360ms var(--ease), border-color 360ms var(--ease), background 360ms var(--ease);
}
.care-specialties-main .card::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
opacity: 0;
transition: opacity 360ms var(--ease);
}
.care-specialties-main .card:hover {
transform: translateY(-6px);
border-color: var(--color-accent);
background: var(--color-glass-strong);
}
.care-specialties-main .card:hover::before { opacity: 1; }
/* ===== Care Specialties — full-width feature image (C11) ===== */
.care-feature {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-soft);
margin-bottom: var(--sp-3);
}
.care-feature img {
display: block;
width: 100%;
height: clamp(320px, 46vw, 560px);
object-fit: cover;
}
.care-feature-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(var(--color-primary-rgb), 0.92) 0%, rgba(var(--color-primary-rgb), 0.2) 45%, transparent 70%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(26px, 4vw, 48px);
pointer-events: none;
}
.care-feature-tag {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-teal);
margin-bottom: 12px;
}
.care-feature-overlay h2,
.care-feature-overlay h3 {
font-family: var(--font-sans);
font-size: clamp(1.6rem, 3.4vw, 2.6rem);
font-weight: 500;
line-height: 1.12;
max-width: 16ch;
color: var(--color-text);
}
.care-feature-overlay p {
margin-top: 14px;
max-width: 46ch;
color: var(--color-text-body);
font-size: 15px;
}
@media (max-width: 640px) {
.care-feature img { height: clamp(220px, 56vw, 320px); }
.care-feature-overlay { padding: 20px; }
}
/* ===== Equipment ===== */
.equipment-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-3);
}
@media (min-width: 640px) { .equipment-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .equipment-grid { grid-template-columns: repeat(3, 1fr); } }
/* 흰 면 유지: 제품 사진(R20/ProCyte/Catalyst 등)은 흰 배경에서 색재현·가독성(legibility)이 가장 정확. 글래스 적용 시 콘트라스트 저하. 모션 어포던스(radius-lg, translateY -6px, 골드 헤어라인)만 차용. */
.equipment-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
color: var(--color-card-text);
transition: transform 360ms var(--ease), border-color 360ms var(--ease), box-shadow 360ms var(--ease);
}
.equipment-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
opacity: 0;
transition: opacity 360ms var(--ease);
z-index: 1;
}
.equipment-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: var(--color-accent);
}
.equipment-card:hover::before { opacity: 1; }
.eq-img {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.eq-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eq-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.equipment-card .meta {
font-family: var(--font-serif);
font-size: 0.8125rem;
color: var(--color-accent-on-light);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.equipment-card h3 { font-size: var(--fs-h3); color: var(--color-card-text); }
.equipment-card p { font-size: var(--fs-body-sm); color: var(--color-card-text-muted); }
/* 동일한 사진 영역과 제목·모델 영역으로 장비 설명의 시작선을 맞춘다. */
.equipment-standard { gap: var(--sp-2); min-width: 0; }
.equipment-standard .card-image {
height: 240px;
flex: none;
display: grid;
place-items: center;
background: var(--color-white);
}
.equipment-standard .card-image img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: contain;
padding: var(--sp-2);
}
.equipment-standard .equipment-heading {
display: grid;
grid-template-rows: auto minmax(1.3em, auto) minmax(calc(var(--fs-small) * 3), auto);
gap: var(--sp-1);
font-size: var(--fs-h3);
}
.equipment-standard .meta { line-height: 1.5; }
.equipment-standard h3 { margin: 0; line-height: 1.3; }
.equipment-standard .equipment-model {
margin: 0;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--color-card-text-muted);
}
.equipment-standard .equipment-description { margin: 0; line-height: var(--lh-normal); }
@media (max-width: 639px) {
.equipment-standard .equipment-heading { grid-template-rows: auto auto auto; }
}
/* Featured ultrasound system */
.equipment-feature {
grid-column: 1 / -1;
border-color: var(--color-accent);
}
.equipment-feature .feature-grid {
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 768px) {
.equipment-feature .feature-grid { grid-template-columns: 5fr 7fr; }
}
.feature-img {
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--color-card-bg);
}
@media (min-width: 768px) {
.feature-img { aspect-ratio: unset; min-height: 260px; }
}
.feature-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px; }
.feature-body { padding: var(--sp-3); }
.feature-body .meta { color: var(--color-accent-on-light); margin-bottom: 4px; }
.feature-body h3 { color: var(--color-card-text); margin-bottom: 8px; }
.feature-body p { color: var(--color-card-text-muted); font-size: var(--fs-body-sm); }
/* ===== Visit ===== */
.visit-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-4);
}
.visit-grid > * { min-width: 0; }
@media (min-width: 1024px) { .visit-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.map-frame {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(var(--color-primary-rgb), 0.10);
aspect-ratio: 4 / 3;
}
.map-image-link { display: block; width: 100%; }
.map-image-link img { display: block; width: 100%; height: auto; }
.map-image-link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -4px; }
.contact-block {
background: var(--color-card-bg);
border: 1px solid rgba(var(--color-primary-rgb), 0.10);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius-md);
padding: var(--sp-3);
color: var(--color-card-text);
}
/* h2 포함 — heading 계층 승격(A002) 후에도 동일 룩 유지 */
.contact-block h2,
.contact-block h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-1); color: var(--color-card-text); }
.contact-block .phone {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 1.5rem;
color: var(--color-accent-on-light);
letter-spacing: -0.01em;
}
/* ===== Facility gallery ===== */
.gallery {
display: grid;
gap: var(--sp-2);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery-item {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-card-bg);
color: var(--color-card-text);
}
.gallery-item .img-frame { aspect-ratio: 4 / 3; }
.gallery-item figcaption {
padding: 10px 12px;
font-size: 0.8125rem;
color: var(--color-card-text-muted);
border-top: 1px solid var(--color-border);
}
/* ===== News ===== */
.news-grid {
display: grid;
gap: var(--sp-3);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { padding: 0; overflow: hidden; color: var(--color-text); }
.news-card .news-body { padding: var(--sp-3); }
.news-card .news-date {
font-family: var(--font-serif);
font-size: 0.75rem;
color: var(--color-accent);
margin-bottom: 8px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* h2 포함 — heading 계층 승격(A002) 후에도 동일 룩 유지 */
.news-card h2,
.news-card h3 { font-size: var(--fs-body-lg); line-height: 1.4; margin-bottom: 6px; color: var(--color-text); }
.news-card p { font-size: var(--fs-body-sm); color: var(--color-text-muted); }
/* ===== Care pages ===== */
.symptom-box {
background: var(--color-accent-soft);
border-radius: var(--radius-md);
padding: var(--sp-3);
border: 1px solid var(--color-accent-light);
}
/* h2 포함 — heading 계층 승격(A002) 후에도 동일 룩 유지 */
.symptom-box h2,
.symptom-box h3 { font-size: var(--fs-h4); color: var(--color-accent); margin-bottom: var(--sp-2); }
.diag-steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 768px) { .diag-steps { grid-template-columns: repeat(3, 1fr); } }
/* ===== Checkup tier ===== */
/* 단일(정밀) 패키지 — 3열 그리드였던 티어를 중앙 1칸으로 축소 */
.checkup-tier { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 1024px) { .checkup-tier { grid-template-columns: minmax(0, 640px); justify-content: center; } }
.tier-card {
display: flex;
flex-direction: column;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
color: var(--color-card-text);
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.tier-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.tier-card.is-recommended { border: 2px solid var(--color-accent); position: relative; }
.tier-card.is-recommended::after {
content: "권장";
position: absolute;
top: 12px;
right: 12px;
background: var(--color-accent);
color: var(--color-primary);
font-size: 0.6875rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.05em;
}
.tier-head {
padding: var(--sp-3);
background: var(--color-card-alt);
border-bottom: 1px solid var(--color-border);
}
.tier-card.is-recommended .tier-head {
background: rgba(var(--color-accent-rgb), 0.18);
border-bottom-color: var(--color-accent);
}
.tier-head .tier-name {
font-size: 0.8125rem;
letter-spacing: 0.05em;
/* tier-head는 card-alt(밝은 크림) 표면 — card-text-muted(0.62)는 AA 미달이라 0.72로 보정 */
color: rgba(var(--color-primary-rgb), 0.72);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 4px;
}
.tier-head h3 { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--color-card-text); }
.tier-head .tier-target { font-size: 0.875rem; color: rgba(var(--color-primary-rgb), 0.72); line-height: 1.5; }
.tier-body { padding: var(--sp-3); flex: 1; display: flex; flex-direction: column; }
.tier-body h4 {
font-size: 0.8125rem;
letter-spacing: 0.04em;
color: var(--color-card-text-muted);
text-transform: uppercase;
margin-bottom: var(--sp-1);
font-weight: 600;
}
.tier-body ul { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tier-body ul li {
position: relative;
padding-left: 22px;
font-size: var(--fs-body-sm);
color: var(--color-card-text);
line-height: 1.5;
}
.tier-body ul li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-primary-light);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.tier-foot {
padding: var(--sp-2) var(--sp-3) var(--sp-3);
border-top: 1px dashed var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-1);
}
.tier-foot .duration { font-size: 0.8125rem; color: var(--color-card-text-muted); }
.tier-foot .duration strong { color: var(--color-card-text); }
/* tier-foot은 흰 light card 표면 — u-text-muted(다크테마 크림)·todo-mark가 대비 미달이라 light 표면용으로 보정 */
.tier-foot .u-text-muted { color: rgba(var(--color-primary-rgb), 0.72); }
.tier-foot .todo-mark { color: var(--color-card-text); }
/* ===== Exam explainer (care/checkup) — 검사 항목별 왜/무엇을/해석 ===== */
.exam-group { margin-top: var(--sp-5); }
.exam-group:first-of-type { margin-top: var(--sp-4); }
.exam-group-head {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: var(--sp-1);
border-bottom: 1px solid var(--color-border-strong);
margin-bottom: var(--sp-2);
}
/* 넓은 뷰포트에서만 제목·부연을 한 줄로. 좁은 폭에서 row로 두면 h3가 3줄까지 눌린다 */
@media (min-width: 768px) {
.exam-group-head { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
.exam-group-head h3 { flex: none; }
}
.exam-group-head h3 { font-size: var(--fs-h4); color: var(--color-accent); margin: 0; }
.exam-group-head .exam-group-note {
font-size: var(--fs-small);
color: var(--color-text-muted);
line-height: 1.5;
}
.exam-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.exam-item {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-card-text);
transition: border-color 0.15s, box-shadow 0.15s;
}
.exam-item[open] { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.exam-item > summary {
list-style: none;
cursor: pointer;
padding: var(--sp-2) var(--sp-3);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
}
.exam-item > summary::-webkit-details-marker { display: none; }
.exam-item > summary::after {
content: "+";
flex: none;
color: var(--color-card-text-muted);
font-size: 1.5rem;
font-weight: 300;
line-height: 1;
}
.exam-item[open] > summary::after { content: "−"; }
.exam-name { font-weight: 600; font-size: 1rem; color: var(--color-card-text); }
.exam-name .exam-en {
display: block;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(var(--color-primary-rgb), 0.72);
margin-top: 2px;
}
.exam-body { padding: 0 var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.exam-fact-label {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-accent-on-light);
margin-bottom: 4px;
}
.exam-fact p { font-size: var(--fs-body-sm); line-height: 1.65; color: var(--color-card-text); margin: 0; }
.exam-read { display: flex; flex-direction: column; gap: 6px; }
.exam-read li {
position: relative;
padding-left: 16px;
font-size: var(--fs-body-sm);
line-height: 1.6;
color: var(--color-card-text);
}
.exam-read li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-accent-on-light);
}
.exam-read li strong { color: var(--color-accent-on-light); }
.exam-ref {
align-self: flex-start;
font-size: 0.75rem;
line-height: 1.5;
color: rgba(var(--color-primary-rgb), 0.72);
background: var(--color-card-alt);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
padding: 6px 10px;
}
/* ===== Pledge list (care pages / about/greeting) ===== */
.pledge-list {
display: flex;
flex-direction: column;
counter-reset: pledge;
}
.pledge-item {
position: relative;
padding: var(--sp-4) 0 var(--sp-4) 72px;
border-bottom: 1px solid var(--color-border);
}
.pledge-item:last-child { border-bottom: none; }
.pledge-item::before {
counter-increment: pledge;
content: counter(pledge, decimal-leading-zero);
position: absolute;
left: 0;
top: var(--sp-4);
font-size: 2.25rem;
font-weight: 700;
color: var(--color-accent);
letter-spacing: -0.03em;
font-family: var(--font-serif);
line-height: 1;
}
.pledge-item h3 { font-size: var(--fs-h4); margin-bottom: 8px; color: var(--color-text); }
.pledge-item p { color: var(--color-text-muted); font-size: var(--fs-body-sm); line-height: 1.65; max-width: 680px; }
/* ===== Article body ===== */
.article-body { font-size: 1rem; line-height: var(--lh-normal); }
/* 긴 글 가독성 — h2(섹션)와 h3(소제목)를 시각적으로 분리. fs-h2(clamp ~38px)는 본문 내에선 과대해서 fs-h3 사용 */
.article-body h2 { font-size: var(--fs-h3); margin: var(--sp-5) 0 var(--sp-1); letter-spacing: -0.01em; }
.article-body h3 { font-size: var(--fs-h4); margin: var(--sp-3) 0 var(--sp-1); }
.article-body p { margin-bottom: var(--sp-2); }
.article-body p.lead { font-size: var(--fs-body-lg); color: var(--color-text-muted); }
.article-body strong { color: var(--color-accent); font-weight: 600; }
.article-body .signature { margin-top: var(--sp-4); text-align: right; font-size: var(--fs-body-lg); font-weight: 600; }
/* 인사말 — 7문단 연속 텍스트 벽의 시각적 쉼표. 진료 철학 3항목을 강조 블록으로 분리 */
.article-body .philosophy-list { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-2); }
.article-body .philosophy-list li {
padding: var(--sp-2) var(--sp-3);
border-left: 2px solid var(--color-accent);
background: rgba(var(--color-accent-rgb), 0.05);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
line-height: 1.7;
}
/* 인사말 포트레이트 — 일러스트의 밝은 배경 카드가 네이비 페이지에 원폭으로 떠 보여서
doctor 페이지 컨벤션(320px)에 맞춰 축소 + 골드 프레임 + 저강도 틴트로 톤 정합 */
.greeting-portrait { max-width: 300px; margin: 0 auto var(--sp-4); }
.greeting-portrait .img-frame {
position: relative;
border: 1px solid rgba(var(--color-accent-rgb), 0.35);
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55);
}
.greeting-portrait .img-frame::after {
content: "";
position: absolute;
inset: 0;
background: rgba(var(--color-primary-rgb), 0.08);
pointer-events: none;
}
/* ===== Inline link ===== */
.inline-link {
color: var(--color-text);
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-underline-offset: 3px;
}
.inline-link:hover { color: var(--color-accent); }
/* ===== Doctor preview — credentials emphasis (home only) ===== */
.doctor-headline {
font-size: var(--fs-body-sm);
color: var(--color-accent);
font-weight: 600;
letter-spacing: 0.02em;
margin-top: var(--sp-1);
margin-bottom: 4px;
}
.doctor-credentials {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-2);
margin: var(--sp-3) 0;
padding: 0;
list-style: none;
}
/* G4 2026-06-04: 3열 균일 그리드 (≥769px). 모바일/태블릿 1열 유지. */
@media (min-width: 769px) {
.doctor-credentials {
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-2);
}
}
.dc-pill {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 88px;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
background: var(--color-glass);
text-align: center;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.dc-pill-label {
display: block;
font-weight: 700;
color: var(--color-text);
font-size: var(--fs-body-sm);
margin-bottom: 4px;
}
.dc-pill-meta {
display: block;
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.45;
}
.doctor-philosophy {
margin: var(--sp-3) 0;
padding: var(--sp-2) var(--sp-3);
border-left: 2px solid var(--color-accent);
font-family: var(--font-sans);
font-style: normal;
font-size: var(--fs-body-lg);
color: var(--color-text);
line-height: 1.6;
}
/* facility.html - 공간 설계 원칙 (Task #26) */
.facility-principles .principle-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3);
margin-top: var(--sp-4);
}
.facility-principles .principle-card {
position: relative;
padding: var(--sp-4) var(--sp-3);
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
border-top: 4px solid var(--color-accent);
}
.facility-principles .principle-card h3 {
margin: 0 0 var(--sp-2);
font-size: var(--fs-h4);
color: var(--color-text);
line-height: 1.4;
}
.facility-principles .principle-card p {
margin: 0;
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
line-height: 1.65;
}
@media (max-width: 960px) {
.facility-principles .principle-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.facility-principles .principle-grid {
grid-template-columns: 1fr;
}
}
/* === A001: 인라인 style 이관 — 다속성 조합은 컴포넌트 클래스로 (단일 속성은 components.css u-*) === */
.two-col-list { columns: 2; column-gap: var(--sp-4); column-fill: balance; }
.card-split-row { margin-top: var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.btn-row { margin-top: var(--sp-3); display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.note-center { margin: 0 auto var(--sp-3); max-width: 640px; }
.info-dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px var(--sp-2); font-size: var(--fs-body-sm); }
.img-contain { object-fit: contain; padding: 12px; }
.equipment-feature .card-image { background: var(--color-white); aspect-ratio: auto; max-height: 360px; }
.equipment-feature .card-image img { object-fit: contain; padding: 16px; max-height: 360px; width: 100%; }
.equipment-feature .r20-product-image { max-height: none; }
.equipment-feature .r20-product-image img { height: clamp(380px, 45vw, 560px); max-height: none; }
.equipment-feature .eq-feature-body { padding: 0 var(--sp-1); }
.equipment-feature .eq-feature-body .meta { display: block; margin-top: 4px; color: var(--color-accent-on-light); font-size: 0.8125rem; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; }
.equipment-feature .eq-feature-body h3 { font-size: 1.375rem; margin-top: 6px; }
/* 다크용 컴포넌트(.bullet-list/.tag)를 흰 카드 안에서 재사용 — on-light 토큰으로 재매핑 */
.equipment-feature .eq-feature-body .bullet-list li { color: var(--color-card-text); }
.equipment-feature .eq-feature-body .tag.is-accent {
color: var(--color-accent-on-light);
/* accent-soft(12.5% 상당)는 on-light 골드와 4.45:1로 4.5 미달 — 8%로 4.60:1 확보 */
background: rgba(var(--color-accent-rgb), 0.08);
}
/* ============================================================
Photographic warmth (C19) — lifestyle imagery woven into
otherwise text-only emotional sections. 한글 오버레이 카피는
세리프 금지(§3) → sans 유지, 영문 태그라인만 display italic.
============================================================ */
/* For Pet Parents — editorial photo aside + Q&A list */
.parents-editorial { margin-top: var(--sp-4); }
.parents-editorial .parents-list { margin-top: 0; }
@media (min-width: 900px) {
.parents-editorial {
display: grid;
grid-template-columns: 0.78fr 1.22fr;
gap: var(--sp-4);
align-items: start;
}
}
.parents-aside {
position: relative;
margin: 0 0 var(--sp-3);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border-soft);
}
@media (min-width: 900px) {
.parents-aside { margin: 0; position: sticky; top: 96px; }
}
.parents-aside img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
}
.parents-aside figcaption {
position: absolute;
inset: auto 0 0 0;
padding: clamp(16px, 2.4vw, 26px);
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--color-text);
background: linear-gradient(0deg, rgba(var(--color-primary-rgb), 0.92) 0%, rgba(var(--color-primary-rgb), 0.45) 50%, transparent 100%);
}
/* 실사 밴드 공통 네이비 틴트 — 스톡 사진들의 톤 편차(웜 실내광/데이라이트/제품컷)를
한 세계로 묶는다. 흰 배경 장비 제품컷은 대상 아님 */
.moment-band::after,
.parents-aside::after,
.why-photo::after,
.sc-portrait::after {
content: "";
position: absolute;
inset: 0;
background: rgba(var(--color-primary-rgb), 0.16);
pointer-events: none;
z-index: 1;
}
.why-photo { position: relative; }
.moment-band-overlay,
.parents-aside figcaption,
.sc-portrait figcaption { z-index: 2; }
/* Moment band — full-width photographic interlude */
.moment-band {
position: relative;
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border-soft);
}
.moment-band img {
display: block;
width: 100%;
height: clamp(280px, 42vw, 480px);
object-fit: cover;
object-position: center 40%;
}
.moment-band-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(24px, 4vw, 56px);
background: linear-gradient(0deg, rgba(var(--color-primary-rgb), 0.9) 0%, rgba(var(--color-primary-rgb), 0.28) 46%, transparent 74%);
pointer-events: none;
}
.moment-band-tag {
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
color: var(--color-accent);
margin-bottom: 10px;
}
.moment-band-overlay p {
margin: 0;
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(1.25rem, 2.6vw, 1.9rem);
line-height: 1.42;
color: var(--color-text);
max-width: 30ch;
}
/* Self-check — calm senior portrait beside the intro */
.sc-intro { display: grid; gap: var(--sp-3); }
@media (min-width: 880px) {
.sc-intro { grid-template-columns: 1.4fr 0.85fr; align-items: center; gap: var(--sp-4); }
}
.sc-portrait {
position: relative;
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border-soft);
}
.sc-portrait img {
display: block;
width: 100%;
height: clamp(240px, 30vw, 360px);
object-fit: cover;
object-position: center 30%;
}
.sc-portrait figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 16px 18px;
font-size: var(--fs-body-sm);
line-height: 1.5;
color: var(--color-text-body);
background: linear-gradient(0deg, rgba(var(--color-primary-rgb), 0.92) 0%, rgba(var(--color-primary-rgb), 0.4) 55%, transparent 100%);
}
/* ============================================================
Care Flow (HU2) — 진료 흐름 4-step 스테퍼.
콘텐츠 불변 사실 기반(검사 전 비용 안내·SRR 가이드 등), 신규 의료주장 0.
============================================================ */
.flow-steps {
list-style: none;
margin-top: var(--sp-4);
display: grid;
gap: var(--sp-3);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .flow-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .flow-steps { grid-template-columns: repeat(4, 1fr); } }
.flow-step {
position: relative;
padding: var(--sp-3);
background: var(--color-glass);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
}
/* 스텝 간 연결선 — 데스크톱 4열에서만, 카드 우측 갭을 가로지름 */
@media (min-width: 1000px) {
.flow-step:not(:last-child)::after {
content: "";
position: absolute;
top: calc(var(--sp-3) + 18px);
right: calc(-1 * var(--sp-3));
width: var(--sp-3);
height: 1px;
background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.5), transparent);
}
}
.flow-step-num {
font-family: var(--font-display);
font-style: italic;
font-size: 1.5rem;
font-weight: 600;
color: var(--color-accent);
line-height: 1;
}
.flow-step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 14px 0 12px;
border-radius: var(--radius-md);
background: rgba(var(--color-accent-rgb), 0.1);
color: var(--color-accent);
}
.flow-step h3,
.flow-step h4 { font-size: var(--fs-body-lg); color: var(--color-text); margin-bottom: 6px; }
.flow-step p { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--color-text-muted); margin: 0; }
/* ============================================================
홈 FAQ 아코디언 (HU4) — 보호자 자주 묻는 질문. 한글 본문 sans.
============================================================ */
/* index FAQ — 풀폭 컨테이너에 820px 리스트가 좌측 정렬되면 우측 절반이 공백.
섹션 컨테이너 자체를 좁혀 제목·리스트를 한 축으로 중앙 정렬 */
.home-faq { max-width: 880px; margin-inline: auto; }
.faq-list { margin-top: var(--sp-4); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.hfaq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-3) 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
font-size: var(--fs-body-lg);
font-weight: 600;
line-height: 1.5;
color: var(--color-text);
transition: color 0.2s var(--ease);
}
.hfaq-q:hover,
.hfaq-q:focus-visible { color: var(--color-accent); }
.hfaq-q .faq-caret {
flex-shrink: 0;
color: var(--color-accent);
transition: transform 0.25s var(--ease);
}
.hfaq-q[aria-expanded="true"] .faq-caret { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 0 var(--sp-3); }
.hfaq-q[aria-expanded="true"] + .faq-a { display: block; }
.faq-a p { margin: 0; max-width: 70ch; font-size: var(--fs-body-sm); line-height: 1.65; color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .hfaq-q .faq-caret { transition: none; } }
/* ============================================================
Why Suji 비주얼 동반 (HU5) — 우측 컬럼: 사진 + stat 카드 스택.
============================================================ */
.why-visual { display: flex; flex-direction: column; gap: var(--sp-3); }
.why-photo {
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border-soft);
}
.why-photo img {
display: block;
width: 100%;
height: clamp(200px, 28vw, 300px);
object-fit: cover;
object-position: center 35%;
}
/* about/greeting 원장 초상 (R1) — 인사말 상단 중앙 프레임 */
.greeting-portrait { max-width: 240px; margin: 0 auto var(--sp-4); }
/* ============================================================
theme-light — de-템플릿 사이클 B (2026-07-25, 전 페이지 전파 2026-07-26)
스타필드 제거에 따른 섹션 명도 단차 복원 + 에디토리얼 레이아웃.
서브페이지는 기존 클래스 유지 — 전부 body.theme-light 스코프.
============================================================ */
/* 섹션 명도 단차 — 전역 .section-soft/.section-cream은 starfield용 transparent */
.theme-light .section-soft { background: var(--color-bg-soft); }
.theme-light .section-cream { background: var(--color-bg-cream); }
.theme-light .visit-finale {
background: var(--color-bg-soft);
}
.theme-light .visit-finale::before { content: none; }
/* Quick strip — 카드 그리드 대신 하이라인 구분 인포 바 */
.quick-strip {
background: var(--color-bg-soft);
border-bottom: 1px solid var(--color-border);
}
/* 항목 수에 맞춰 열이 따라온다 — 4열 고정이면 항목이 줄었을 때 빈 칸이 남는다
(referral 폐지로 4→3개가 되며 드러난 문제) */
.quick-strip-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin: 0;
padding: 0;
}
.quick-strip-list li { list-style: none; }
.quick-strip-list li + li { border-left: 1px solid var(--color-border); }
.quick-strip-list a {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--sp-3) var(--sp-3);
text-decoration: none;
transition: background 240ms var(--ease);
}
.quick-strip-list a:hover,
.quick-strip-list a:focus-visible { background: rgba(var(--color-accent-rgb), 0.07); }
.quick-strip-list strong {
font-size: var(--fs-body);
font-weight: 700;
color: var(--color-text);
}
.quick-strip-list span {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-text-muted);
}
@media (max-width: 900px) {
.quick-strip-list { grid-template-columns: 1fr 1fr; }
.quick-strip-list li:nth-child(3) { border-left: none; }
.quick-strip-list li:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 520px) {
.quick-strip-list { grid-template-columns: 1fr; }
.quick-strip-list li + li { border-left: none; border-top: 1px solid var(--color-border); }
}
/* Promise — 사진 + 2열 리스트 에디토리얼 */
.promise-editorial {
display: grid;
grid-template-columns: minmax(280px, 420px) 1fr;
gap: var(--sp-5);
margin-top: var(--sp-4);
align-items: start;
}
.promise-photo {
position: sticky;
top: calc(var(--header-h) + var(--sp-3));
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
}
.promise-photo img { display: block; width: 100%; height: auto; }
.promise-photo figcaption {
padding: var(--sp-2) 2px 0;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.promise-list {
display: grid;
/* 좁은 트랙에서 2열 강제 시 어절 랙드가 심해져 — 280px 못 미치면 자동 1열 */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
column-gap: var(--sp-4);
margin: 0;
padding: 0;
}
.promise-item {
list-style: none;
padding: var(--sp-3) 0;
border-top: 1px solid var(--color-border);
}
.promise-item h3 {
font-size: var(--fs-h4);
font-weight: 700;
color: var(--color-text);
line-height: 1.45;
margin-bottom: var(--sp-1);
}
.promise-item p {
font-size: var(--fs-body-sm);
line-height: 1.65;
color: var(--color-text-muted);
margin: 0;
}
@media (max-width: 980px) {
.promise-editorial { grid-template-columns: 1fr; gap: var(--sp-4); }
.promise-photo { position: static; max-width: 520px; }
}
@media (max-width: 640px) {
.promise-list { grid-template-columns: 1fr; }
}
/* Care — 카드 박스 제거, 2열 아이콘 리스트 */
.care-list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--sp-5);
}
.care-row {
display: flex;
gap: var(--sp-2);
align-items: flex-start;
padding: var(--sp-3) 0;
border-top: 1px solid var(--color-border);
}
.care-row .care-icon { flex-shrink: 0; }
.care-row-body h3 {
font-size: var(--fs-h4);
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
margin-bottom: 6px;
}
.care-row-body p {
font-size: var(--fs-body-sm);
line-height: 1.65;
color: var(--color-text-muted);
margin: 0;
}
@media (max-width: 760px) {
.care-list { grid-template-columns: 1fr; }
}
/* 장비 — 라이트 섹션. 흰 배경 제품 사진이 자연스럽게 앉는 유일한 표면 */
.theme-light .section-light { background: var(--color-white); }
.theme-light .section-light .section-title { color: var(--color-primary); }
.theme-light .section-light .section-lead { color: var(--color-card-text); }
.theme-light .section-light .section-eyebrow { color: var(--color-accent-on-light); }
.theme-light .section-light .section-eyebrow::before { background: var(--color-accent-on-light); }
.theme-light .section-light .eq-card {
background: var(--color-card-bg);
border-color: rgba(var(--color-primary-rgb), 0.12);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.theme-light .section-light .eq-card--feature {
background: linear-gradient(155deg, rgba(var(--color-accent-rgb), 0.10), var(--color-card-bg));
border-color: rgba(var(--color-accent-rgb), 0.35);
}
.theme-light .section-light .eq-tag { color: var(--color-accent-on-light); }
.theme-light .section-light .eq-card h3 { color: var(--color-primary); }
.theme-light .section-light .eq-card p { color: var(--color-card-text); }
.theme-light .section-light .eq-img { background: var(--color-card-alt); }
@media (hover: hover) {
.theme-light .section-light .eq-card:hover {
border-color: var(--color-accent-on-light);
box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.16);
}
}
.theme-light .section-light .btn-outline {
color: var(--color-accent-on-light);
border-color: var(--color-accent-on-light);
}
.theme-light .section-light .btn-outline:hover,
.theme-light .section-light .btn-outline:focus-visible {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-accent-fill);
}
/* 넘버링 제거 후 그리드 재조정 */
.theme-light .parent-row { grid-template-columns: 1fr auto; }
@media (max-width: 760px) {
.theme-light .parent-row { grid-template-columns: 1fr; }
.theme-light .parent-a { grid-column: 1; }
}
/* 히어로 실사진 — screen 블렌드는 파티클 영상 전용이라 사진에선 워시아웃 발생 */
/* ============================================================
심장 정밀검사 5종 설득 블록 — 진료 안내·특화진료 공용
검사 순서가 실제 임상 순서라 넘버링이 정보를 담는다.
============================================================ */
.exam-symptoms {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-1) var(--sp-4);
margin: var(--sp-3) 0 0;
padding: 0;
}
.exam-symptoms li {
list-style: none;
position: relative;
padding: 10px 0 10px 26px;
font-size: var(--fs-body-sm);
line-height: 1.6;
color: var(--color-text-body);
border-bottom: 1px solid var(--color-border);
}
.exam-symptoms li::before {
content: "";
position: absolute;
left: 4px;
top: 1.15em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
}
@media (max-width: 640px) {
.exam-symptoms { grid-template-columns: 1fr; }
}
.exam-flow { margin-top: var(--sp-4); }
.exam-step {
display: grid;
grid-template-columns: 56px 1fr;
column-gap: var(--sp-3);
padding: var(--sp-3) 0;
border-top: 1px solid var(--color-border);
}
.exam-flow .exam-step:last-child { border-bottom: 1px solid var(--color-border); }
.exam-step-num {
font-family: var(--font-display);
font-style: italic;
font-size: 1.75rem;
font-weight: 600;
color: var(--color-accent);
line-height: 1;
letter-spacing: -0.02em;
}
.exam-step h3 {
font-size: var(--fs-h4);
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
margin-bottom: 6px;
}
.exam-q {
display: block;
font-weight: 600;
color: var(--color-accent);
font-size: var(--fs-body-sm);
margin-bottom: 6px;
}
.exam-step p {
margin: 0;
font-size: var(--fs-body-sm);
line-height: 1.7;
color: var(--color-text-muted);
max-width: 72ch;
}
.exam-note {
margin-top: var(--sp-3);
padding-left: var(--sp-2);
border-left: 3px solid var(--color-accent);
font-size: var(--fs-body-sm);
line-height: 1.7;
color: var(--color-text-body);
}
/* ============================================================
theme-light 라이트 에디토리얼 (2026-07-25 파일럿 → 2026-07-26 정본)
다크 정본(§3) 유지 — index 한정 스코프 변수 오버라이드.
승인 시 정본 전환 + 서브페이지 전파.
============================================================ */
.theme-light {
/* LT2(2026-07-26): 변수 정의는 tokens.css :root로 정규화 — 클래스는 호환용 유지 */
background: var(--color-bg);
color: var(--color-text-body);
}
/* 다크 아일랜드 — 네이비 밴드·사진 오버레이는 크림 텍스트/본래 골드 유지 */
.theme-light .cta-strip,
.theme-light .moment-band-overlay,
.theme-light .care-feature-overlay {
--color-text: var(--color-cream);
--color-text-body: rgba(240, 232, 215, 0.88);
--color-text-muted: var(--color-cream-muted);
--color-accent: var(--color-accent-fill);
--color-border: rgba(255, 255, 255, 0.09);
}
.theme-light .care-feature-tag { color: var(--color-accent-fill); }
/* 버튼 — 채움은 본래 골드 유지(다크 골드 채움 + 네이비 텍스트는 대비 부족) */
.theme-light .btn-primary,
.theme-light .btn-light {
background: var(--color-accent-fill);
border-color: var(--color-accent-fill);
color: var(--color-primary);
}
.theme-light .btn-primary:hover,
.theme-light .btn-primary:focus-visible,
.theme-light .btn-light:hover,
.theme-light .btn-light:focus-visible {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-accent-fill);
}
.theme-light .btn-outline:hover,
.theme-light .btn-outline:focus-visible {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-accent-fill);
}
/* 화이트 카드가 페이퍼/화이트 면 위에서 실루엣을 잃지 않도록 */
.theme-light .stat-card,
.theme-light .dc-pill,
.theme-light .card,
.theme-light .sc-card,
.theme-light .visit-fact,
.theme-light .breed-card {
border: 1px solid var(--color-border-soft);
}
.theme-light .doctor-orbit { display: none; }
/* ===== Hero — 비대칭 에디토리얼 스플릿 ===== */
.hero-ed {
position: relative;
border-bottom: 1px solid var(--color-border);
}
.hero-ed-grid {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
align-items: center;
column-gap: var(--sp-6);
padding-block: var(--sp-6);
min-height: min(78vh, 760px);
}
.hero-ed-kicker {
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--color-accent);
margin-bottom: var(--sp-2);
}
.hero-ed-kicker::before {
content: "";
display: inline-block;
width: 26px;
height: 2px;
background: var(--color-accent);
margin-right: 12px;
vertical-align: middle;
}
.hero-ed-title {
font-size: clamp(2.75rem, 6vw, 4.5rem);
line-height: 1.08;
letter-spacing: -0.035em;
font-weight: 800;
color: var(--color-text);
margin-bottom: var(--sp-3);
}
.hero-ed-sub {
font-size: var(--fs-body-lg);
line-height: 1.8;
color: var(--color-text-muted);
max-width: 54ch;
margin-bottom: var(--sp-4);
}
.hero-ed-cta {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.hero-ed-link { font-weight: 600; color: var(--color-accent); }
.hero-ed-link:hover,
.hero-ed-link:focus-visible { color: var(--color-text); }
.hero-ed-facts {
margin: 0;
padding: 0;
max-width: 46ch;
}
.hero-ed-facts li {
list-style: none;
padding: 10px 0;
border-top: 1px solid var(--color-border);
font-size: var(--fs-body-sm);
color: var(--color-text-body);
}
.hero-ed-photo {
margin: 0;
position: relative;
}
.hero-ed-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-md);
}
/* 오프셋 골드 프레임 — 에디토리얼 시그니처 */
.hero-ed-photo::after {
content: "";
position: absolute;
inset: 20px -20px -20px 20px;
border: 1px solid rgba(var(--color-accent-rgb), 0.55);
border-radius: var(--radius-md);
pointer-events: none;
z-index: -1;
}
.hero-ed-ecg {
height: 44px;
margin-top: calc(var(--sp-2) * -1);
}
.hero-ed-ecg svg { width: 100%; height: 100%; display: block; }
.hero-ed-ecg path {
fill: none;
stroke: rgba(var(--color-accent-rgb), 0.55);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 960px) {
.hero-ed-grid {
grid-template-columns: 1fr;
row-gap: var(--sp-5);
min-height: 0;
padding-block: var(--sp-5);
}
.hero-ed-photo { margin-right: 20px; }
.hero-ed-photo img { aspect-ratio: 16 / 11; }
}
/* ===== 좌측 라벨 레일 — 에디토리얼 그리드 ===== */
@media (min-width: 1080px) {
.theme-light .section > .container:has(> .section-eyebrow) {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
column-gap: var(--sp-6);
}
.theme-light .section > .container:has(> .section-eyebrow) > * { grid-column: 2; }
.theme-light .section > .container:has(> .section-eyebrow) > .section-eyebrow {
grid-column: 1;
grid-row: 1 / span 60;
align-self: start;
position: sticky;
top: calc(var(--header-h) + var(--sp-3));
margin: 0;
}
}
.theme-light .section-eyebrow {
border-top: 2px solid var(--color-accent);
padding-top: 10px;
letter-spacing: 0.14em;
}
.theme-light .section-eyebrow::before { content: none; }
/* 라이트 파일럿 파손 수정 */
.theme-light .parent-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
/* 사진 위 그라데이션 캡션은 다크 아일랜드 — 크림 텍스트 복원 */
.theme-light .parents-aside figcaption,
.theme-light .sc-portrait figcaption {
color: var(--color-cream);
}
/* 브리드 카드는 표면이 항상 화이트라, 다크 밴드·라이트 섹션 어디에 놓여도
잉크 변수를 라이트 기준으로 복귀시킨다 (배치 섹션에 스코프 걸지 말 것) */
.theme-light .breed-card {
--color-text: var(--color-primary);
--color-text-body: rgba(var(--color-primary-rgb), 0.84);
--color-text-muted: rgba(var(--color-primary-rgb), 0.62);
/* on-light(#8A6C2E)는 "순수 흰 배경" 기준 AA다. breed-risk 필은 골드 틴트를 깔아
실배경이 rgb(248,243,234)로 내려가 4.46:1이 된다. 텍스트 골드 기준값으로 되돌린다 */
--color-accent: var(--color-accent-base);
--color-border: rgba(var(--color-primary-rgb), 0.16);
}
/* AUD9 — exam-explainer 시맨틱 전환(h4/dl) 후 UA 기본 여백 중화 */
.exam-name { margin: 0; }
dl.exam-fact { margin: 0; }
dl.exam-fact dd { margin: 0; }
/* ============================================================
모던 비주얼 폴리시 (2026-07-26) — 모션·마이크로인터랙션·피날레
전부 reduced-motion 가드, 토큰 기반.
============================================================ */
/* 이미지 호버 줌 — overflow hidden 프레임 안에서만 */
.promise-photo,
.parents-aside,
.sc-portrait,
.why-photo,
.moment-band,
.breed-photo,
.care-feature,
.hero-ed-photo,
.img-frame {
overflow: hidden;
}
.promise-photo img,
.parents-aside img,
.sc-portrait img,
.why-photo img,
.moment-band img,
.breed-photo img,
.care-feature img,
.hero-ed-photo img,
.img-frame img {
transition: transform 900ms var(--ease);
}
@media (hover: hover) {
.promise-photo:hover img,
.parents-aside:hover img,
.sc-portrait:hover img,
.why-photo:hover img,
.moment-band:hover img,
.breed-card:hover .breed-photo img,
.care-feature:hover img,
.hero-ed-photo:hover img,
.img-frame:hover img {
transform: scale(1.04);
}
}
/* 링크 마이크로인터랙션 — 밑줄 슬라이드 */
.card-link,
.hero-ed-link {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 300ms var(--ease), color 200ms var(--ease);
padding-bottom: 2px;
}
.card-link:hover,
.card-link:focus-visible,
.hero-ed-link:hover,
.hero-ed-link:focus-visible {
background-size: 100% 1px;
}
/* 헤더 스크롤 축소 — 최신 관례: 얇아지며 블러 표면 */
.theme-light .site-header { transition: height 300ms var(--ease), background 300ms var(--ease), box-shadow 300ms var(--ease); }
.theme-light .site-header.is-scrolled {
height: var(--header-h-compact);
box-shadow: 0 1px 0 var(--color-border-soft), 0 8px 30px rgba(var(--color-primary-rgb), 0.06);
}
/* 선택 영역·포커스 디테일 */
.theme-light ::selection {
background: var(--color-primary);
color: var(--color-cream);
}
.theme-light :focus-visible {
outline: 2px solid var(--color-accent-on-light);
outline-offset: 3px;
}
/* ===== 프리푸터 브랜드 피날레 — cta-strip 하단 대형 워드마크 ===== */
.brand-finale-wrap {
margin-top: var(--sp-6);
margin-bottom: calc(var(--sp-5) * -1);
text-align: center;
overflow: hidden;
}
.brand-finale-mark {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(4rem, 17vw, 15rem);
line-height: 0.9;
letter-spacing: 0.04em;
color: transparent;
-webkit-text-stroke: 1px rgba(var(--color-accent-rgb), 0.5);
-webkit-user-select: none;
user-select: none;
transform: translateY(12%);
white-space: nowrap;
}
.brand-finale-tag {
display: block;
margin-top: var(--sp-2);
font-family: var(--font-display);
font-style: italic;
font-size: 0.9375rem;
letter-spacing: 0.18em;
color: var(--color-cream-muted);
text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
.promise-photo img, .parents-aside img, .sc-portrait img, .why-photo img,
.moment-band img, .breed-photo img, .care-feature img, .hero-ed-photo img,
.img-frame img, .card-link, .hero-ed-link, .theme-light .site-header { transition: none; }
}
/* 피날레 워드마크가 푸터와 맞닿도록 — 사이 페이퍼 띠 제거 (index 한정) */
.theme-light .cta-strip { margin-bottom: 0; }
.theme-light .cta-strip + * ,
.theme-light main:has(.brand-finale-wrap) + .site-footer { margin-top: 0; }
/* ============================================================
V3 — 타이포 스케일 강화: 대형 화면에서 디스플레이 존재감
============================================================ */
@media (min-width: 1280px) {
.theme-light .section-title {
font-size: clamp(2.25rem, 3.4vw, 3.25rem);
letter-spacing: -0.02em;
}
.theme-light .section-lead { font-size: 1.125rem; }
}
.theme-light .section-title { text-wrap: balance; }
.theme-light .section-lead { text-wrap: pretty; }
/* ============================================================
V4 — Why 섹션 stat: 카드 → 에디토리얼 넘버 라인
============================================================ */
.theme-light .stat-card {
background: transparent;
border: 0;
border-top: 2px solid var(--color-accent-on-light);
border-radius: 0;
padding: var(--sp-2) 0 0;
text-align: left;
}
.theme-light .stat-card .stat-label {
font-size: 0.8125rem;
letter-spacing: 0.08em;
color: var(--color-text-muted);
}
.theme-light .stat-card .stat-num {
font-size: clamp(1.75rem, 2.6vw, 2.5rem);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-primary);
}
/* ============================================================
V5 — FAQ 아코디언 모션: grid rows 트랜지션 + 캐럿 회전
============================================================ */
.theme-light .faq-item .faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 360ms var(--ease);
overflow: hidden;
padding: 0;
}
.theme-light .faq-item .faq-a > * { min-height: 0; overflow: hidden; margin: 0; }
.theme-light .hfaq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.theme-light .faq-item .faq-a > p { padding-bottom: var(--sp-3); }
@media (prefers-reduced-motion: reduce) {
.theme-light .faq-item .faq-a { transition: none; }
}
.theme-light .hfaq-q .faq-caret { transition: transform 300ms var(--ease); }
.theme-light .hfaq-q[aria-expanded="true"] .faq-caret { transform: rotate(180deg); }
@media (hover: hover) {
.theme-light .hfaq-q:hover { color: var(--color-accent); }
}
/* ============================================================
V6 — 오프셋 골드 프레임 시그니처 확장
============================================================ */
.theme-light .promise-photo,
.theme-light .sc-portrait,
.theme-light .why-photo {
position: relative;
overflow: visible;
}
.theme-light .promise-photo img,
.theme-light .sc-portrait img,
.theme-light .why-photo img {
border-radius: var(--radius-md);
}
.theme-light .promise-photo::after,
.theme-light .sc-portrait::after,
.theme-light .why-photo::after {
content: "";
position: absolute;
inset: 16px -16px -16px 16px;
border: 1px solid rgba(var(--color-accent-rgb), 0.5);
border-radius: var(--radius-md);
pointer-events: none;
z-index: -1;
}
/* overflow visible로 바뀌므로 이미지 자체가 줌 클리핑 담당 */
.theme-light .promise-photo img,
.theme-light .sc-portrait img,
.theme-light .why-photo img { display: block; }
.theme-light .promise-photo .u-clip,
.theme-light .sc-portrait .u-clip { overflow: hidden; border-radius: var(--radius-md); }
/* ============================================================
V7 — 진료 흐름 타임라인: 카드 → 진행선 + 골드 노드
============================================================ */
.theme-light .flow-steps { position: relative; }
.theme-light .flow-step {
background: transparent;
border: 0;
border-radius: 0;
position: relative;
padding: var(--sp-4) var(--sp-2) 0 0;
}
.theme-light .flow-step::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: var(--sp-2);
height: 1px;
background: var(--color-border);
}
.theme-light .flow-step::after {
content: "";
position: absolute;
top: -5px;
left: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--color-accent-fill);
border: 2px solid var(--color-bg);
}
.theme-light .flow-step-num {
font-family: var(--font-display);
font-style: italic;
font-size: 1.5rem;
color: var(--color-accent);
}
/* ============================================================
V8 — 모바일 메뉴: 슬라이드 진입 + 백드롭 블러 + 항목 스태거
============================================================ */
.theme-light .mobile-menu {
transition: opacity 280ms var(--ease), transform 320ms var(--ease), visibility 320ms;
transform: translateY(-8px);
-webkit-backdrop-filter: blur(14px) saturate(130%);
backdrop-filter: blur(14px) saturate(130%);
}
.theme-light .mobile-menu.is-open { transform: translateY(0); }
.theme-light .mobile-menu .accordion,
.theme-light .mobile-menu .mobile-cta {
opacity: 0;
transform: translateY(10px);
transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.theme-light .mobile-menu.is-open .accordion,
.theme-light .mobile-menu.is-open .mobile-cta { opacity: 1; transform: none; }
.theme-light .mobile-menu.is-open .accordion:nth-child(1) { transition-delay: 40ms; }
.theme-light .mobile-menu.is-open .accordion:nth-child(2) { transition-delay: 90ms; }
.theme-light .mobile-menu.is-open .accordion:nth-child(3) { transition-delay: 140ms; }
.theme-light .mobile-menu.is-open .accordion:nth-child(4) { transition-delay: 190ms; }
.theme-light .mobile-menu.is-open .accordion:nth-child(5) { transition-delay: 240ms; }
.theme-light .mobile-menu.is-open .mobile-cta { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
.theme-light .mobile-menu,
.theme-light .mobile-menu .accordion,
.theme-light .mobile-menu .mobile-cta { transition: none; transform: none; opacity: 1; }
}
/* ============================================================
V9 — 서브페이지 page-hero 업그레이드: 대형 타이틀 + 골드 룰 + 여백
============================================================ */
.theme-light .page-hero {
padding: var(--sp-6) 0 var(--sp-5);
border-bottom: 1px solid var(--color-border);
}
.theme-light .page-hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
letter-spacing: -0.03em;
line-height: 1.1;
margin: var(--sp-2) 0 var(--sp-2);
}
.theme-light .page-hero h1::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin-top: var(--sp-2);
background: var(--color-accent-fill);
}
.theme-light .page-hero .page-lead {
max-width: 62ch;
font-size: var(--fs-body-lg);
line-height: 1.75;
color: var(--color-text-muted);
}
.theme-light .breadcrumb { font-size: 0.8125rem; letter-spacing: 0.02em; }
/* ============================================================
V10 — CSS 스크롤 연동 패럴랙스 (JS 0, @supports 가드)
============================================================ */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.theme-light .moment-band img,
.theme-light .care-feature img {
animation: v10-drift linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
@keyframes v10-drift {
from { transform: translateY(-4%) scale(1.08); }
to { transform: translateY(4%) scale(1.08); }
}
}
}
/* ============================================================
V11 — 표 폴리시: 헤어라인·호버 로우·라벨 타이포
============================================================ */
.theme-light .hours-table,
.theme-light .compare-table {
border-collapse: collapse;
width: 100%;
}
.theme-light .hours-table th,
.theme-light .hours-table td,
.theme-light .compare-table th,
.theme-light .compare-table td {
border: 0;
border-bottom: 1px solid var(--color-border);
padding: 14px 12px;
}
.theme-light .hours-table th,
.theme-light .compare-table thead th {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-text-muted);
text-align: left;
}
/* compare-table thead는 다크(primary-dark) 헤더 — 크림 텍스트 복원 */
.theme-light .compare-table thead th { color: var(--color-cream); }
@media (hover: hover) {
.theme-light .hours-table tbody tr:hover td,
.theme-light .hours-table tbody tr:hover th,
.theme-light .compare-table tbody tr:hover td {
background: rgba(var(--color-accent-rgb), 0.06);
}
}
/* ============================================================
V12 — 다크 아일랜드 뎁스: 절제된 ECG 워터마크 + 골드 베일
============================================================ */
.theme-light .cta-strip {
position: relative;
overflow: hidden;
}
.theme-light .cta-strip::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(70% 60% at 50% 0%, rgba(var(--color-accent-rgb), 0.10), transparent 70%);
pointer-events: none;
}
.theme-light .cta-strip > .container { position: relative; }
/* V6 프레임 대상은 overflow visible이라 줌과 충돌 — 오프셋 프레임 도상은 줌 제외 */
@media (hover: hover) {
.theme-light .promise-photo:hover img,
.theme-light .sc-portrait:hover img,
.theme-light .why-photo:hover img { transform: none; }
}
/* Lighthouse 대비 잔여 수정 (2026-07-26)
visit-fact: 다크 시절 rgba 네이비 배경 잔존 → 화이트 카드로 */
.theme-light .visit-finale .visit-fact { background: var(--color-card-bg); }
/* 푸터(다크 아일랜드): 텍스트 골드가 root 기준 진한 골드로 어두워짐 → 본래 골드 복원 */
.site-footer { --color-accent: var(--color-accent-fill); }
/* ============================================================
R2 — care 진단 스텝(diag-steps)을 flow 타임라인 언어로 통일
============================================================ */
.theme-light .diag-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--sp-4);
}
.theme-light .diag-steps .card {
background: transparent;
border: 0;
border-radius: 0;
position: relative;
border-top: 1px solid var(--color-border);
padding: var(--sp-3) var(--sp-1) var(--sp-2) 0;
}
.theme-light .diag-steps .card:hover { transform: none; box-shadow: none; }
.theme-light .diag-steps .card::before {
content: "";
position: absolute;
top: -5px;
left: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--color-accent-fill);
border: 2px solid var(--color-bg);
}
.theme-light .diag-steps .tag {
background: transparent;
padding: 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-accent);
letter-spacing: 0.02em;
}
@media (max-width: 900px) {
.theme-light .diag-steps { grid-template-columns: 1fr; }
}
/* ============================================================
한국어 줄바꿈 정돈 (2026-07-26) — keep-all 기반 위에 랙드 완화
text-wrap은 미지원 브라우저에서 무시(점진 향상)
============================================================ */
.theme-light p,
.theme-light li,
.theme-light figcaption,
.theme-light dd {
text-wrap: pretty;
}
.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light .hero-ed-title {
text-wrap: balance;
}
/* 좁은 폭에서 2열이 만드는 거친 줄바꿈 — 한 열로 전환하는 기준 상향 */
@media (max-width: 900px) {
.care-list { grid-template-columns: 1fr; }
.exam-symptoms { grid-template-columns: 1fr; }
}
/* ============================================================
P1 — 디스플레이 타이포 & 여백 (초미니멀 리듬, 2026-07-26)
비워서 여유를 만들고, 남은 공간을 타이포 존재감으로 채운다.
============================================================ */
/* 섹션 보이드 확대 — 대형 화면일수록 챕터 사이가 숨을 쉬게 */
/* 연속 섹션은 상단을 줄인다 — 176+128은 스크롤 리듬을 끊는 304px 보이드가 된다 */
@media (min-width: 1080px) {
.theme-light main > .section { padding: var(--sp-8) 0; }
.theme-light main > .section + .section { padding-top: var(--sp-6); }
}
/* 히어로 디스플레이 — 화면을 압도하는 한 덩어리 */
.theme-light .hero-ed-title {
font-size: clamp(2.875rem, 7.2vw, 6rem);
line-height: 1.02;
letter-spacing: -0.045em;
font-weight: 800;
}
.theme-light .hero-ed-grid { min-height: min(84vh, 860px); }
/* 섹션 타이틀 — V3보다 한 단계 더 대담하게, 자간은 더 조이게 */
@media (min-width: 1080px) {
.theme-light .section-title {
font-size: clamp(2.375rem, 3.9vw, 3.75rem);
line-height: 1.12;
letter-spacing: -0.032em;
}
.theme-light .section-lead {
font-size: 1.1875rem;
line-height: 1.75;
max-width: 58ch;
margin-bottom: var(--sp-6);
}
}
/* 아이브로 — 장식이 아니라 색인. 작고 조용하되 대비는 지킨다
(subtle 0.44는 페이퍼 위 2.49:1로 AA 미달) */
.theme-light .section-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.2em;
font-weight: 700;
color: var(--color-text-muted);
}
.theme-light .hero-ed-kicker {
font-size: 0.8125rem;
letter-spacing: 0.2em;
color: var(--color-text-muted);
}
/* ============================================================
P2 — 질감 (Tactility): 종이 결·활판 인쇄의 물성
============================================================ */
/* 웜 페이퍼 결 — 미세 노이즈 + 상단 광원. 콘텐츠 뒤에만 깔려 blend 비용 0 */
body.theme-light {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.055'/%3E%3C/svg%3E"),
radial-gradient(120% 60% at 50% 0%, rgba(var(--color-white-rgb), 0.55), transparent 62%);
background-repeat: repeat, no-repeat;
background-size: 160px 160px, 100% 900px;
background-attachment: scroll, scroll;
}
/* 활판 인쇄 — 페이퍼 위 글자가 눌린 듯한 미세 하이라이트 */
.theme-light .hero-ed-title,
.theme-light .section-title,
.theme-light .brand-finale-mark {
text-shadow: 0 1px 0 rgba(var(--color-white-rgb), 0.55);
}
/* 카드 표면 — 상단 광원 + 안쪽 헤어라인으로 종이 한 장의 두께를 만든다 */
.theme-light .eq-card,
.theme-light .sc-card,
.theme-light .breed-card,
.theme-light .faq-item {
background-image: linear-gradient(180deg, rgba(var(--color-white-rgb), 0.72), rgba(var(--color-white-rgb), 0));
box-shadow:
inset 0 1px 0 rgba(var(--color-white-rgb), 0.85),
0 1px 2px rgba(var(--color-primary-rgb), 0.04);
}
/* 사진 — 인화지처럼 가장자리에 얇은 잉크 테두리 */
.theme-light .img-frame img,
.theme-light .hero-ed-photo img,
.theme-light .moment-band img,
.theme-light .care-feature img,
.theme-light .promise-photo img,
.theme-light .parents-aside img,
.theme-light .sc-portrait img,
.theme-light .why-photo img {
outline: 1px solid rgba(var(--color-primary-rgb), 0.08);
outline-offset: -1px;
}
/* 다크 아일랜드 — 짙은 면에서는 광원 방향을 뒤집어 같은 물성을 유지 */
.site-footer {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)' opacity='0.05'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 160px 160px;
}
/* cta-strip의 네이비 면은 그라데이션 = background-image다. 노이즈를 background-image로
단독 지정하면 그 그라데이션을 덮어 어두운 면이 통째로 사라지고, 텍스트는 다크
아일랜드용 크림 그대로라 페이퍼 위에 크림만 남는다(대비 1.1). 노이즈를 그라데이션
위에 레이어로 얹고, background-color로 색을 못 박아 재발을 막는다.
푸터가 멀쩡했던 건 배경이 그라데이션이 아니라 단색이라 background-color에 남아서다. */
.theme-light .cta-strip {
background-color: var(--color-primary-dark);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)' opacity='0.05'/%3E%3C/svg%3E"),
linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
background-repeat: repeat, no-repeat;
background-size: 160px 160px, cover;
}
/* ============================================================
P3 — 마이크로 인터랙션 심화: 작은 반응에 집착한다
============================================================ */
/* CTA — 호버 시 골드 면을 훑고 지나가는 광택 */
.theme-light .btn-primary,
.theme-light .btn-light {
position: relative;
overflow: hidden;
isolation: isolate;
}
.theme-light .btn-primary::after,
.theme-light .btn-light::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 38%, rgba(var(--color-white-rgb), 0.42) 50%, transparent 62%);
transform: translateX(-120%);
transition: transform 700ms var(--ease);
}
@media (hover: hover) {
.theme-light .btn-primary:hover::after,
.theme-light .btn-light:hover::after { transform: translateX(120%); }
}
/* 내비게이션 — 현재 위치를 골드 헤어라인이 좌에서 우로 그린다 */
.theme-light .primary-nav > li > .nav-link {
background-image: linear-gradient(var(--color-accent), var(--color-accent));
background-size: 0% 1.5px;
background-position: 0 calc(100% - 6px);
background-repeat: no-repeat;
transition: background-size 320ms var(--ease), color 200ms var(--ease);
}
.theme-light .primary-nav > li:hover > .nav-link,
.theme-light .primary-nav > li > .nav-link:focus-visible { background-size: 100% 1.5px; }
/* 사진 캡션 — 프레임에 다가가면 한 뼘 떠오른다 */
.theme-light figure figcaption {
transition: transform 600ms var(--ease), color 300ms var(--ease);
}
@media (hover: hover) {
.theme-light figure:hover figcaption { transform: translateY(-3px); }
}
/* 리스트 로우 — 잉크가 번지듯 좌측 골드 마커가 자란다 */
.theme-light .care-row,
.theme-light .parent-row,
.theme-light .promise-item {
position: relative;
transition: transform 400ms var(--ease);
}
.theme-light .care-row::before,
.theme-light .parent-row::before,
.theme-light .promise-item::before {
content: "";
position: absolute;
left: calc(var(--sp-2) * -1);
top: 0.35em;
width: 2px;
height: 0;
background: var(--color-accent-fill);
transition: height 420ms var(--ease);
}
@media (hover: hover) {
.theme-light .care-row:hover::before,
.theme-light .parent-row:hover::before,
.theme-light .promise-item:hover::before { height: 1.6em; }
}
/* 스크롤 연동 — 히어로 사진이 진입하며 제자리를 찾는다 */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.theme-light .promise-photo img,
.theme-light .parents-aside img,
.theme-light .sc-portrait img {
animation: p3-settle linear both;
animation-timeline: view();
animation-range: entry 0% entry 90%;
}
@keyframes p3-settle {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
}
}
@media (prefers-reduced-motion: reduce) {
.theme-light .btn-primary::after,
.theme-light .btn-light::after,
.theme-light .primary-nav > li > .nav-link,
.theme-light figure figcaption,
.theme-light .care-row, .theme-light .parent-row, .theme-light .promise-item,
.theme-light .care-row::before, .theme-light .parent-row::before, .theme-light .promise-item::before {
transition: none;
}
}
/* ============================================================
P4 — 설득력 있는 정보 설계: 읽지 않고 스캔해도 근거가 남는다
============================================================ */
/* 히어로 증거 레일 — 값을 먼저 읽히고 근거는 뒤따르게 */
.theme-light .hero-ed-facts { max-width: 52ch; }
.theme-light .hero-ed-facts li {
display: grid;
grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr);
align-items: baseline;
column-gap: var(--sp-3);
padding: 14px 0;
}
.theme-light .hero-ed-facts .fact-value {
font-weight: 700;
font-size: var(--fs-body);
color: var(--color-text);
letter-spacing: -0.01em;
}
.theme-light .hero-ed-facts .fact-label {
font-size: var(--fs-small);
color: var(--color-text-muted);
}
@media (max-width: 560px) {
.theme-light .hero-ed-facts li {
grid-template-columns: 1fr;
row-gap: 4px;
}
}
/* 사진 위 카피 — 밝은 피사체에서도 읽히도록 스크림을 더 깊게 (V6 프레임과 무관) */
.theme-light .care-feature-overlay,
.theme-light .moment-band-overlay {
background: linear-gradient(0deg,
rgba(var(--color-primary-rgb), 0.94) 0%,
rgba(var(--color-primary-rgb), 0.72) 32%,
rgba(var(--color-primary-rgb), 0.28) 58%,
transparent 82%);
}
.theme-light .care-feature-tag,
.theme-light .moment-band-tag {
font-weight: 600;
color: var(--color-accent-fill);
}
/* 증거 그리드 — 장비 섹션은 라벨 레일을 벗어나 전폭을 쓴다.
레일 안에서는 카드가 252px로 눌려 어절마다 줄이 꺾였다. */
@media (min-width: 1080px) {
.theme-light #sec-equipment > .container { display: block; }
.theme-light #sec-equipment > .container > .section-eyebrow {
position: static;
display: inline-block;
margin-bottom: var(--sp-2);
}
}
.theme-light .eq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eq-feature-body { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (min-width: 961px) {
.theme-light .eq-card--feature {
grid-column: 1 / -1;
grid-row: auto;
flex-direction: row;
align-items: center;
gap: var(--sp-5);
}
.theme-light .eq-card--feature > .eq-feature-body { flex: 1 1 52%; }
.theme-light .eq-card--feature > .eq-img {
flex: 1 1 48%;
aspect-ratio: 16 / 10;
margin: 0;
}
}
@media (max-width: 960px) {
.theme-light .eq-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.theme-light .eq-grid { grid-template-columns: 1fr; }
}
/* 라이트 문맥에서 호버 테두리는 티일이 아니라 골드 — 브랜드 일관 */
@media (hover: hover) {
.theme-light .section-light .eq-card:hover {
border-color: rgba(var(--color-accent-rgb), 0.55);
box-shadow: var(--shadow-md);
}
}
/* ============================================================
P5 — 서브페이지 본문 타이포: 매거진 리듬 (전 페이지 공통)
============================================================ */
.theme-light .page-hero { padding: var(--sp-7) 0 var(--sp-6); }
@media (min-width: 1080px) {
.theme-light .page-hero h1 { font-size: clamp(2.75rem, 5.4vw, 4.5rem); letter-spacing: -0.038em; }
}
.theme-light .article-body { font-size: 1.0625rem; line-height: 1.85; }
.theme-light .article-body p { margin-bottom: var(--sp-3); }
.theme-light .article-body p.lead {
font-size: clamp(1.25rem, 2.2vw, 1.625rem);
line-height: 1.6;
letter-spacing: -0.015em;
color: var(--color-text);
font-weight: 500;
margin-bottom: var(--sp-4);
}
.theme-light .article-body h2 {
font-size: clamp(1.5rem, 2.4vw, 2rem);
letter-spacing: -0.02em;
margin: var(--sp-5) 0 var(--sp-2);
}
.theme-light .article-body .signature {
margin-top: var(--sp-5);
font-size: var(--fs-body);
font-weight: 500;
color: var(--color-text-muted);
letter-spacing: 0.02em;
}
/* 철학 목록 — 강조 박스에서 번호가 이끄는 에디토리얼 항목으로 */
.theme-light .article-body .philosophy-list {
counter-reset: philosophy;
gap: 0;
margin: var(--sp-4) 0;
}
/* 번호는 absolute — li를 grid로 바꾸면 뒤 텍스트 노드가 별도 아이템으로 떨어져 나간다 */
.theme-light .article-body .philosophy-list li {
counter-increment: philosophy;
position: relative;
padding: var(--sp-3) 0 var(--sp-3) 4rem;
border-left: 0;
border-top: 1px solid var(--color-border);
border-radius: 0;
background: transparent;
line-height: 1.8;
}
.theme-light .article-body .philosophy-list li:last-child { border-bottom: 1px solid var(--color-border); }
.theme-light .article-body .philosophy-list li::before {
content: "0" counter(philosophy);
position: absolute;
left: 0;
top: calc(var(--sp-3) + 0.15em);
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 600;
line-height: 1;
color: var(--color-accent);
}
/* 풀 인용 — 긴 글의 호흡을 끊고 핵심 한 문장만 남긴다 */
.theme-light .pull-quote {
margin: var(--sp-5) 0;
padding: var(--sp-4) 0;
border-top: 2px solid var(--color-accent-fill);
border-bottom: 1px solid var(--color-border);
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.45;
letter-spacing: -0.028em;
font-weight: 700;
color: var(--color-text);
text-wrap: balance;
}
/* 리스트 항목 가독성 — 제목+2문장 규칙으로 짧아진 만큼 행간을 넓혀 스캔되게 한다 */
.theme-light .promise-item p,
.theme-light .parent-row .parent-a,
.theme-light .flow-step p {
line-height: 1.75;
max-width: 58ch;
}
/* 질문/답변 2단 해제 — 이 행은 이미 사진과 나란한 좁은 칼럼 안에 있어서,
한 번 더 2단으로 쪼개면 셀이 ~240px로 줄고 문장이 어색한 지점에서 접힌다.
위아래로 세우면 두 문장 모두 칼럼 전폭을 쓴다. */
.theme-light .parents-editorial .parent-row {
grid-template-columns: 1fr;
gap: var(--sp-1);
align-items: start;
}
.theme-light .parents-editorial .parent-a {
max-width: none;
padding-left: var(--sp-2);
border-left: 2px solid rgba(var(--color-accent-rgb), 0.35);
}
/* 히어로 오프셋 프레임 복원 — overflow:hidden(호버 줌용)이 프레임을 잘라내고 있었다.
V6 결정과 동일하게 프레임을 살리고 이 도상은 줌에서 제외한다. */
.theme-light .hero-ed-photo { overflow: visible; }
@media (hover: hover) {
.theme-light .hero-ed-photo:hover img { transform: none; }
}
/* ============================================================
P6 — 미정의 컴포넌트 복구: empathy 인용 카드
care/checkup·preanesthetic에서 클래스만 있고 CSS가 없어
따옴표 글리프가 본문에 맨살로 노출되고 있었다.
============================================================ */
.empathy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--sp-3);
margin-top: var(--sp-4);
}
.empathy-card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--sp-2);
padding: var(--sp-3);
border-radius: var(--radius-lg);
background: var(--color-white);
border: 1px solid var(--color-border-soft);
box-shadow: inset 0 1px 0 rgba(var(--color-white-rgb), 0.85);
transition: transform 420ms var(--ease), border-color 420ms var(--ease), box-shadow 420ms var(--ease);
}
.empathy-card .quote-mark {
font-family: var(--font-display);
font-size: 2.75rem;
line-height: 0.9;
color: var(--color-accent);
-webkit-user-select: none;
user-select: none;
}
.empathy-body p { margin: 0; }
.empathy-body p:first-child {
font-weight: 600;
color: var(--color-text);
line-height: 1.65;
margin-bottom: 10px;
}
.empathy-body p:last-child {
font-size: var(--fs-body-sm);
color: var(--color-text-muted);
line-height: 1.75;
}
@media (hover: hover) {
.empathy-card:hover {
transform: translateY(-3px);
border-color: rgba(var(--color-accent-rgb), 0.45);
box-shadow: var(--shadow-md);
}
}
@media (prefers-reduced-motion: reduce) {
.empathy-card { transition: none; }
}
/* 정보 콜아웃 — 9개 질환 페이지에서 마크업만 있고 CSS가 없어
앞 리스트에 그대로 붙어 흐르고 있었다. */
.callout {
margin: var(--sp-3) 0;
padding: var(--sp-3);
border-radius: var(--radius-md);
border-left: 3px solid var(--color-accent-fill);
background: rgba(var(--color-accent-rgb), 0.07);
}
.callout > p { margin: 0; }
.callout > p + p { margin-top: 10px; }
.callout-title {
font-weight: 700;
color: var(--color-text);
line-height: 1.5;
}
.callout-info { border-left-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.05); }
/* 카드 아이콘 배지 — about/facility 등 3페이지 */
.card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: var(--sp-2);
border-radius: var(--radius-md);
background: rgba(var(--color-accent-rgb), 0.12);
color: var(--color-accent);
}
.u-fs-h4 { font-size: var(--fs-h4); }
/* 자가 적응 그리드 — 라벨 레일이 콘텐츠 폭을 190px 줄여, 고정 다열 그리드가
트랙당 ~190px로 눌리며 어절마다 줄이 꺾이고 있었다. */
/* 4항목은 2×2 — auto-fit이면 3+1로 떨어져 마지막 카드가 외따로 남는다 */
@media (min-width: 720px) {
.theme-light .facility-principles .principle-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.theme-light .grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.theme-light .grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
}
/* ============================================================
서사 감사 후속 (2026-07-27) — Hook 진입 시퀀스 + 문의 채널 링크
============================================================ */
/* 히어로 진입 — 로드 시 1회, CSS 전용이라 no-JS에서도 동작.
reveal.js(IO)는 스크롤 진입용이라 항상 보이는 첫 화면에는 쓰지 않는다. */
@media (prefers-reduced-motion: no-preference) {
.hero-ed-kicker,
.hero-ed-sub,
.hero-ed-cta,
.hero-ed-facts li {
animation: heroEdRise 720ms var(--ease) both;
}
.hero-ed-title { animation: heroEdRise 720ms var(--ease) 150ms both; }
.hero-ed-kicker { animation-delay: 60ms; }
.hero-ed-sub { animation-delay: 260ms; }
.hero-ed-cta { animation-delay: 360ms; }
.hero-ed-facts li:nth-child(1) { animation-delay: 450ms; }
.hero-ed-facts li:nth-child(2) { animation-delay: 530ms; }
.hero-ed-facts li:nth-child(3) { animation-delay: 610ms; }
.hero-ed-photo { animation: heroEdPhoto 980ms var(--ease) 200ms both; }
/* 마크업의 pathLength="100" 정규화 전제 — 실측 경로 길이와 무관하게 100 기준 드로우 */
.hero-ed-ecg path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: heroEdEcgDraw 1500ms var(--ease) 650ms forwards;
}
}
@keyframes heroEdRise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes heroEdPhoto {
from { opacity: 0; transform: scale(1.02); }
to { opacity: 1; transform: none; }
}
@keyframes heroEdEcgDraw {
to { stroke-dashoffset: 0; }
}
/* 클로징 문의 문단 — 다크 스트립 위 인라인 링크는 밑줄 없이는 본문과 구분되지 않는다 */
.cta-strip .cta-strip-contact { max-width: 58ch; margin-inline: auto; }
.cta-strip .cta-strip-contact a {
color: var(--color-cream);
text-decoration: underline;
text-underline-offset: 3px;
}
.cta-strip .cta-strip-contact a:hover,
.cta-strip .cta-strip-contact a:focus-visible { color: var(--color-accent-fill); }
/* 히어로 루프 영상 — 이미지 슬롯과 동일한 프레임 규칙을 공유한다 */
.hero-ed-photo video {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-md);
}
@media (max-width: 960px) {
.hero-ed-photo video { aspect-ratio: 16 / 11; }
}
/* 진료시간 외 문의 채널 — 흰 카드 위 인라인 링크 (index visit·visit/hours) */
.contact-alt a {
color: var(--color-accent-on-light);
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-alt a:hover,
.contact-alt a:focus-visible { color: var(--color-primary); }
.home-block { scroll-margin-top: calc(var(--header-h-compact) + var(--sp-2)); }
.hero-ed-photo { position: relative; }
.hero-video-toggle {
position: absolute;
right: var(--sp-2);
bottom: var(--sp-2);
z-index: 3;
min-height: 44px;
padding: 0 var(--sp-2);
border: 1px solid color-mix(in srgb, var(--color-cream) 42%, transparent);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-primary-dark) 84%, transparent);
color: var(--color-cream);
font: inherit;
font-size: var(--fs-body-sm);
font-weight: 700;
cursor: pointer;
backdrop-filter: blur(8px);
transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.hero-video-toggle:hover,
.hero-video-toggle:focus-visible { background: var(--color-primary); color: var(--color-accent-fill); }
.hero-video-toggle:active { transform: translateY(1px); }
.home-trust-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: var(--sp-5);
margin-top: var(--sp-4);
}
.home-concerns,
.home-promises {
min-width: 0;
}
.home-concerns > h3,
.home-promises > h3,
.home-flow-head h3,
.home-equipment-gateway h3,
.home-risk-copy h3,
.home-faq > h3,
.home-contact h3 {
font-size: var(--fs-h3);
color: var(--color-text);
margin-bottom: var(--sp-2);
text-wrap: balance;
}
.home-concern-list {
display: grid;
gap: 0;
border-top: 1px solid var(--color-border);
}
.home-concern-list li {
position: relative;
list-style: none;
padding: 14px 0 14px 20px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-body);
font-size: var(--fs-body-sm);
line-height: 1.55;
}
.home-concern-list li::before {
content: "";
position: absolute;
top: 22px;
left: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-accent);
}
.home-disclosure { border-bottom: 1px solid var(--color-border); }
.home-disclosure:first-of-type { border-top: 1px solid var(--color-border); }
.home-disclosure summary {
position: relative;
padding: 14px 36px 14px 0;
color: var(--color-text);
font-weight: 700;
cursor: pointer;
list-style: none;
}
.home-disclosure summary::-webkit-details-marker { display: none; }
.home-disclosure summary::after {
content: "+";
position: absolute;
right: 2px;
color: var(--color-accent);
font-size: var(--fs-body-lg);
line-height: 1;
}
.home-disclosure[open] summary::after { content: "−"; }
.home-disclosure p {
margin: 0;
padding: 0 32px var(--sp-2) 0;
color: var(--color-text-muted);
font-size: var(--fs-body-sm);
line-height: 1.65;
}
.home-flow {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--color-border);
}
.home-flow-head,
.home-equipment-gateway,
.home-contact {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-3);
}
.home-flow-head .section-eyebrow,
.home-equipment-gateway .section-eyebrow,
.home-risk-copy .section-eyebrow,
.home-faq .section-eyebrow,
.home-contact .section-eyebrow { margin-bottom: var(--sp-1); }
.home-flow-steps { margin-top: var(--sp-3); }
.moment-band--compact { margin-top: var(--sp-4); }
.moment-band--compact img { height: clamp(220px, 32vw, 380px); object-fit: cover; }
.home-care-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: var(--sp-4);
border-top: 1px solid var(--color-border);
}
.home-care-link {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 4px var(--sp-2);
min-width: 0;
padding: var(--sp-3) var(--sp-2);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.home-care-link:nth-child(odd) { border-right: 1px solid var(--color-border); }
.home-care-link:hover,
.home-care-link:focus-visible { background: color-mix(in srgb, var(--color-accent-fill) 10%, transparent); }
.home-care-index {
grid-row: 1 / span 2;
padding-top: 2px;
color: var(--color-accent);
font-family: var(--font-display);
font-weight: 700;
}
.home-care-link h3 { margin: 0; font-size: var(--fs-h4); }
.home-care-link p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-body-sm);
line-height: 1.6;
}
.home-equipment-gateway {
margin-top: var(--sp-4);
padding: var(--sp-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-paper);
}
.home-equipment-gateway p,
.home-risk-copy p,
.home-contact p {
max-width: 65ch;
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-body-sm);
line-height: 1.65;
}
.home-contact .home-phone-placeholder {
margin-bottom: 4px;
color: var(--color-text);
font-weight: 700;
}
.sc-grid--compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: var(--sp-4);
}
.sc-grid--compact .sc-card {
min-height: 0;
padding: 18px 48px 18px 18px;
}
.home-risk-groups {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--sp-4);
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: 1px solid var(--color-border);
}
.home-risk-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-2);
}
.home-risk-links a {
display: flex;
min-height: 112px;
flex-direction: column;
justify-content: space-between;
gap: var(--sp-1);
padding: var(--sp-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
background: var(--color-paper);
transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.home-risk-links a:hover,
.home-risk-links a:focus-visible { border-color: var(--color-accent); transform: translateY(-2px); }
.home-risk-links strong { color: var(--color-accent); }
.home-risk-links span { font-size: var(--fs-body-sm); line-height: 1.45; }
.visit-grid--compact { margin-top: var(--sp-3); }
.home-faq,
.home-contact {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--color-border);
}
.home-faq .faq-list { margin: var(--sp-2) auto 0; }
.home-contact { align-items: center; }
.home-contact-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--sp-1);
max-width: 520px;
}
#sec-visit .brand-finale-wrap {
margin-top: var(--sp-5);
margin-bottom: calc(var(--sp-6) * -1);
}
#sec-visit .brand-finale-mark { color: color-mix(in srgb, var(--color-primary) 9%, transparent); }
#sec-visit .brand-finale-tag { color: var(--color-accent); }
.accordion-link {
display: flex;
align-items: center;
min-height: 44px;
text-decoration: none;
}
@media (max-width: 900px) {
.home-trust-grid,
.home-risk-groups { grid-template-columns: 1fr; gap: var(--sp-3); }
.home-flow-head,
.home-equipment-gateway,
.home-contact { align-items: flex-start; flex-direction: column; }
.home-contact-links { justify-content: flex-start; max-width: none; }
}
@media (max-width: 640px) {
.home-care-grid,
.sc-grid--compact,
.home-risk-links { grid-template-columns: 1fr; }
.home-care-link:nth-child(odd) { border-right: 0; }
.home-care-link { padding-inline: 0; }
.home-risk-links a { min-height: 0; }
.home-flow-head .btn,
.home-equipment-gateway .btn { width: 100%; }
.home-contact-links .btn { flex: 1 1 calc(50% - var(--sp-1)); }
.hero-video-toggle { right: var(--sp-1); bottom: var(--sp-1); }
}
@media (prefers-reduced-motion: reduce) {
.hero-video-toggle,
.home-care-link,
.home-risk-links a { transition: none; }
.home-risk-links a:hover,
.home-risk-links a:focus-visible { transform: none; }
}