/**
 * about.css — 참사랑 소개 그룹 전용 (원장님 소개 등). api/site_pages.php 의 그룹 'css' 로 로드된다.
 */

/* ── 원장님 소개 (레퍼런스: 서울퍼틸리티 원장 페이지) ── */
.dc-page { padding: 50px 0 130px; }
.dc-inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.dc-profile { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 6vw; align-items: start; }   /* stretch 면 1:1 사진이 행 높이에 맞춰 옆으로 넘친다 */
.dc-photo { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 1 / 1; background: #E9EDF3; box-shadow: 0 30px 60px -30px rgba(2, 39, 81, .3); }
.dc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.dc-text { display: flex; flex-direction: column; padding-top: 28px; }
.dc-name { margin: 0 0 30px; padding-bottom: 30px; border-bottom: 1px dashed #C9D0DB; font-size: clamp(2rem, 3vw, 2.9rem); font-weight: 600; letter-spacing: -.02em; color: var(--text-dark); }
.dc-name span { margin-left: 8px; font-size: .45em; font-weight: 500; color: var(--primary); vertical-align: 6px; }
.dc-career { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dc-career li { position: relative; padding-left: 16px; font-size: 1.08rem; line-height: 1.6; color: var(--text-dark); word-break: keep-all; }
.dc-career li::before { content: ''; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); opacity: .6; }
.dc-actions { margin-top: 32px; display: flex; justify-content: flex-end; }
.dc-btn {   /* 알약형 외곽선 버튼 + 오른쪽 원형 + 아이콘 */
    display: inline-flex; align-items: center; gap: 14px; height: 68px; padding: 0 8px 0 30px; border-radius: 999px;
    border: 1px solid #C9D6EA; color: var(--primary); font-size: 1.05rem; background: #fff;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.dc-btn i { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #E3EBF7; color: var(--primary); font-size: 1.1rem; transition: background .25s, color .25s; }
.dc-btn:hover { border-color: var(--primary); box-shadow: 0 14px 28px -16px rgba(2, 39, 81, .4); transform: translateY(-2px); }
.dc-btn:hover i { background: var(--primary); color: #fff; }
.dc-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; }

@media (max-width: 1023px) {
    .dc-page { padding: 50px 0 100px; }
    .dc-profile { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 40px; align-items: stretch; }   /* 태블릿: 사진이 오른쪽 글 높이에 맞춰 세로로 늘어난다 (약 1:1.6~1:1.9) */
    .dc-photo { aspect-ratio: auto; height: 100%; }
    .dc-text { padding-top: 8px; }
    .dc-name { margin-bottom: 22px; padding-bottom: 22px; }
    .dc-career { gap: 10px; }
    .dc-career li { font-size: 1rem; }
}
@media (max-width: 767px) {
    .dc-page { padding: 50px 0 72px; }
    .dc-profile { grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .dc-photo { border-radius: 20px; aspect-ratio: 1 / 1; height: auto; }   /* 모바일: 다시 1:1 */
    .dc-name { font-size: 1.8rem; }
    .dc-career li { font-size: 1rem; }
    .dc-actions { justify-content: center; }
    .dc-btn { height: 58px; padding-left: 24px; font-size: 1rem; }
    .dc-btn i { width: 44px; height: 44px; }
}

/* ── "참사랑한의원 / 이래서 다릅니다." — 작은 사진이 화면 가운데쯤 오면 한 번에 커지고, 다 커지면 위에서 카드 4개가 순서대로 (레퍼런스: 밝은성모안과) ── */
.dc-why { margin-top: 140px; text-align: center; }
.dc-why-title, .dc-why-sub { margin: 0; font-size: clamp(2rem, 3vw, 3rem); font-weight: 700; line-height: 1.2; color: #10233F; }
.dc-why-stage { position: relative; }
.dc-why-media {
    position: relative; width: 40%; height: 220px; margin: 14px auto; border-radius: 6px; overflow: hidden; background: #E9EDF3;
    transition: width 1s cubic-bezier(.22, .8, .3, 1), height 1s cubic-bezier(.22, .8, .3, 1);
}
.dc-why-media.is-grown { width: 100%; height: 560px; border-radius: 12px; }
.dc-why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }   /* 간판이 위쪽에 있어 위를 조금 더 남김 */
/* 데스크톱: 다 커진 뒤(0.6초부터) 사진 위에 반투명 브랜드 그라데이션 + 배경 블러 막이 덮인다 → 그 위에 카드. 사진 위에 카드가 바로 겹치면 난잡해 보여서 */
.dc-why-media::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(120deg, rgba(35, 99, 177, .72) 0%, rgba(57, 139, 183, .66) 40%, rgba(79, 179, 189, .62) 75%, rgba(108, 195, 184, .66) 100%);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    opacity: 0; transition: opacity .6s ease .6s;
}
.dc-why-media.is-grown::after { opacity: 1; }
/* 카드 — 사진 자리 2×2 (stage 의 사진 자리에 겹침), 사진이 사라진 뒤 1.1초부터 하나씩 */
.dc-why-cards { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 55px;   /* 사진의 블러 막(::after z-index 1) 위 */   /* 사진의 위아래 margin 은 stage 밖으로 접히므로 stage = 사진 상자 */ list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; text-align: left; pointer-events: none; }
.dc-why-media.is-grown ~ .dc-why-cards { pointer-events: auto; }
.dc-why-card {
    display: flex; flex-direction: column; justify-content: center;   /* 아이콘 없이 제목·설명만이라 세로 가운데 */
    background: rgba(255, 255, 255, .92); border-radius: 20px; padding: 36px 40px; box-shadow: 0 20px 40px -24px rgba(2, 20, 45, .35);   /* 그라데이션이 살짝 비치게 */
    opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
.dc-why-media.is-grown ~ .dc-why-cards .dc-why-card { opacity: 1; transform: none; transition-delay: calc(1.1s + var(--i, 0) * .18s); }
.dc-why-card h3 { margin: 0 0 14px; font-size: clamp(1.25rem, 1.6vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; color: var(--text-dark); }
.dc-why-card p { margin: 0; font-size: .98rem; line-height: 1.8; color: var(--text-mid); word-break: keep-all; }
@media (prefers-reduced-motion: reduce) {
    .dc-why-media, .dc-why-media::after, .dc-why-card { transition: none; }
}
/* 태블릿·모바일: stage 를 풀어(display: contents) 제목 → 사진 → "이래서 다릅니다." → 카드 순으로. 카드는 사진 아래 흐름 */
@media (max-width: 1023px) {
    .dc-why { margin-top: 100px; display: flex; flex-direction: column; align-items: center; }
    .dc-why-stage { display: contents; }
    .dc-why-title { order: 1; }
    .dc-why-media { order: 2; width: 60%; height: 180px; }
    .dc-why-media.is-grown { width: 100%; height: 260px; }
    .dc-why-media::after { display: none; }   /* 태블릿·모바일: 카드가 사진 아래로 분리되므로 사진 그대로 */
    .dc-why-sub { order: 3; }
    .dc-why-cards { order: 4; position: static; width: 100%; padding: 28px 0 0; gap: 14px; pointer-events: auto; }
    .dc-why-card { padding: 26px 26px; border-radius: 16px; box-shadow: none; border: 1px solid #E6EAF0; background: #fff; }
}
@media (max-width: 767px) {
    .dc-why { margin-top: 72px; }
    .dc-why-title, .dc-why-sub { font-size: 1.8rem; }
    .dc-why-media { width: 60%; height: 140px; margin: 10px auto; }
    .dc-why-media.is-grown { height: 200px; }
    .dc-why-cards { grid-template-columns: 1fr; gap: 12px; padding-top: 22px; }
    .dc-why-card h3 { font-size: 1.15rem; }
    .dc-why-card p { font-size: 1rem; }
}

/* 기본 콘텐츠는 항상 표시. JS가 관찰한 요소에만 짧은 등장 효과를 더한다. */
.dc-page [data-reveal] { opacity: 1; transform: none; transition: none; }
.dc-page [data-reveal].is-in { animation: dc-reveal .65s cubic-bezier(.22, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * .08s); }
@keyframes dc-reveal { from { opacity: .5; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .dc-page [data-reveal].is-in { animation: none; }
    .dc-btn, .dc-btn i { transition: none; }
    .dc-btn:hover { transform: none; }
}

/* ── 참사랑한의원이 드리는 3가지 약속 — 소개 문단 + 세로 카드 3장 (상단 그라데이션 패널에 큰 한자, 하단 번호·영문 제목·설명) ── */
.pr-page { padding: 50px 0 130px; }
.pr-inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

.pr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pr-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #E6EAF0; box-shadow: 0 24px 48px -32px rgba(2, 39, 81, .3); }
.pr-visual {
    position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background-size: cover; background-position: center;
}
/* 카드마다 각도가 다른 브랜드 그라데이션 (사진이 있으면 background-image 가 덮는다) */
.pr-card-1 .pr-visual { background-color: #2363B1; background-image: linear-gradient(135deg, #2363B1 0%, #3E9BC2 60%, #6CC3B8 100%); }
.pr-card-2 .pr-visual { background-color: #10233F; background-image: linear-gradient(160deg, #10233F 0%, #024287 55%, #2579B1 100%); }
.pr-card-3 .pr-visual { background-color: #3EABA9; background-image: linear-gradient(200deg, #31A7CA 0%, #3EABA9 50%, #5DB98F 100%); }
.pr-visual::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 255, 255, .18), transparent 70%); pointer-events: none; }
.pr-visual.has-photo::after { background: linear-gradient(180deg, rgba(2, 20, 45, .08) 0%, rgba(2, 20, 45, .28) 100%); }   /* 사진 위 흰 한자가 읽히도록 살짝 어둡게 */
.pr-hanja {
    position: relative; z-index: 1; font-family: 'Apple Myungjo', 'AppleMyungjo', 'Nanum Myeongjo', 'Batang', 'BatangChe', serif;
    font-size: clamp(3rem, 5vw, 6rem); font-weight: 600; line-height: 1; letter-spacing: 0em; padding-left: .12em;   /* 자간만큼 왼쪽에 보정해 시각적 가운데 */
    color: rgba(255, 255, 255, .78); text-shadow: 0 12px 30px rgba(0, 0, 0, .18);   /* 살짝 투명해 사진이 비침 */
}
.pr-body { padding: 34px 36px 40px; }
.pr-no { display: block; margin-bottom: 12px; font-family: 'Montserrat', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .1em; color: var(--primary-light, #2579B1); }
.pr-en { margin: 0 0 16px; font-family: 'Montserrat', sans-serif; font-size: clamp(1.4rem, 1.7vw, 1.8rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: #10233F; }
.pr-ko { display: block; margin-top: 8px; font-family: var(--font-sub); font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--text-mid); }
.pr-desc { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--text-dark); word-break: keep-all; }

/* 등장: 머리 → 카드 순 */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .7s cubic-bezier(.22, .8, .3, 1); transition-delay: calc(var(--i, 0) * .15s); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1023px) {
    .pr-page { padding: 50px 0 100px; }
    .pr-list { gap: 20px; }
    .pr-body { padding: 26px 26px 30px; }
    .pr-hanja { font-size: 4.2rem; }
}
@media (max-width: 767px) {
    .pr-page { padding: 50px 0 72px; }
    .pr-list { grid-template-columns: 1fr; gap: 16px; }
    .pr-visual { aspect-ratio: 16 / 9; }
    .pr-hanja { font-size: 3.6rem; }
    .pr-en { font-size: 1.35rem; }
    .pr-desc { font-size: .95rem; }
}

/* ============================================================
   참사랑 眞 한약 관리 — 과정 / 품질 / 녹용 / 핵심 특징
   .hq-* 안에서만 적용. data-reveal의 기존 순차 등장 효과는 유지한다.
   ============================================================ */
.hq-page { padding: 50px 0 130px; }
.hq-inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
/* 데스크톱 우측 고정 메뉴가 본문을 가리지 않도록 양쪽에 공간 확보 */
@media (min-width: 1024px) { .hq-inner { width: calc(100% - 176px); } }
.hq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hq-page .pg-head { margin-bottom: 80px; }
.hq-no { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: .85rem; font-weight: 600; letter-spacing: .08em; color: var(--primary); }
.hq-no > span { padding-left: 14px; border-left: 1px solid #CAD3DE; font-size: .85rem; font-weight: 500; letter-spacing: .02em; color: #667383; }
.hq-no-light, .hq-no-light > span { color: #E4D2AB; }
.hq-no-light > span { border-color: rgba(228, 210, 171, .3); }
.hq-h2 { margin: 0 0 24px; font-size: clamp(1.7rem, 2.4vw, 2.35rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.4; color: #10233F; word-break: keep-all; }
.hq-h2-light { color: #fff; }
.hq-p { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.9; color: #4E5965; word-break: keep-all; overflow-wrap: anywhere; }
.hq-p strong { color: #10233F; font-weight: 600; }
.hq-p:last-child { margin-bottom: 0; }
.hq-p-light { color: rgba(255, 255, 255, .82); }
.hq-ch + .hq-ch { margin-top: 112px; }
.hq-ch-head { margin-bottom: 40px; }
.hq-ch-head-center { text-align: center; }
.hq-ch-head-center .hq-no { justify-content: center; }
.hq-ch-head .hq-h2 { margin-bottom: 0; }
.hq-ch-head .hq-h2 + .hq-p { margin-top: 16px; }

/* 01 — 큰 문장과 실제 사진으로 여는 도입부. 내용은 기본 표시하고 진입 시 연출만 추가 */
.hq-ch1-grid { display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding: 24px 0 56px; }
.hq-ch1-grid[data-reveal] { opacity: 1; transform: none; transition: none; }
.hq-ch1-text .hq-no { margin-bottom: 30px; }
.hq-intro-title { margin: 0; font-size: clamp(1.65rem, 3.3vw, 3rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.4; color: #10233F; word-break: keep-all; }
.hq-title-line { display: block; overflow: hidden; }
.hq-title-line > span { display: block; }
.hq-title-accent { color: var(--primary); }
.hq-intro-lead { margin: 28px 0 0; font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.7; letter-spacing: -.025em; color: #263B50; word-break: keep-all; }
.hq-intro-lead strong { position: relative; display: inline-block; font-weight: 600; }
.hq-intro-lead strong::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #759BAF; transform-origin: left; }
.hq-ch1-body { max-width: 32rem; margin-top: 28px; }
.hq-ch1-body .hq-p { }
.hq-quality-promise { padding: 32px; border-top: 1px solid #D9E2E9; text-align: center; }
.hq-quality-promise > p { margin: 0 0 22px; font-size: 1.1rem; line-height: 1.8; font-weight: 500; color: #263B50; word-break: keep-all; }
.hq-materials { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; margin: 0; padding: 0; list-style: none; }
.hq-materials li { display: flex; align-items: baseline; gap: 8px; font-size: 1rem; color: var(--primary); word-break: keep-all; }
.hq-materials i { flex: none; }
.hq-ch1-photo { position: relative; isolation: isolate; margin: 0; }
.hq-ch1-photo::before { content: ''; position: absolute; z-index: -1; inset: -18px 18px 58px -18px; border: 1px solid #D6DFE5; border-radius: 260px 260px 24px 24px; }
.hq-photo-window { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 260px 260px 24px 24px; background: #E9EDF3; }
.hq-photo-window img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hq-ch1-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 18px; font-size: .95rem; font-weight: 600; color: #263B50; }
.hq-ch1-photo figcaption > span { font-size: .85rem; font-weight: 400; color: #697784; }
.hq-process-link { display: inline-flex; align-items: center; gap: 28px; margin-top: 30px; padding: 0 0 10px; border-bottom: 1px solid #AFC1CE; font-size: .95rem; font-weight: 500; color: var(--primary); }
.hq-process-link i { transition: transform .25s; }
.hq-process-link:hover i { transform: translateY(4px); }
.hq-process-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; }
.hq-ch1-grid.is-in .hq-title-line > span { animation: hq-title-rise .95s cubic-bezier(.22, .8, .3, 1) both; }
.hq-ch1-grid.is-in .hq-title-line:nth-child(2) > span { animation-delay: .16s; }
.hq-ch1-grid.is-in .hq-intro-lead, .hq-ch1-grid.is-in .hq-ch1-body { animation: hq-intro-rise .8s ease .3s both; }
.hq-ch1-grid.is-in .hq-ch1-body { animation-delay: .45s; }
.hq-ch1-grid.is-in .hq-intro-lead strong::after { animation: hq-line-draw .8s ease .7s both; }
.hq-ch1-grid.is-in .hq-photo-window img { animation: hq-photo-settle 1.6s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes hq-title-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes hq-intro-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hq-line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hq-photo-settle { from { opacity: .5; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
.hq-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); scroll-margin-top: 120px; }
.hq-step { position: relative; padding: 0 28px; text-align: center; }
.hq-step::before { content: ''; position: absolute; top: 22px; left: 50%; width: 100%; height: 1px; background: #CCD9E4; }
.hq-step::after { content: ''; position: absolute; top: 22px; left: 50%; width: 100%; height: 1px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .85s ease; transition-delay: calc(.25s + var(--i, 0) * .15s); }
.hq-step.is-in::after { transform: scaleX(1); }
.hq-step:last-child::before, .hq-step:last-child::after { display: none; }
.hq-step-no { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 24px; border: 1px solid #B7CBDD; border-radius: 50%; background: #fff; color: var(--primary); font-size: .95rem; font-weight: 600; transition: color .4s, background .4s; transition-delay: calc(var(--i, 0) * .15s); }
.hq-step.is-in .hq-step-no { background: var(--primary); border-color: var(--primary); color: #fff; }
.hq-step h3 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: #10233F; word-break: keep-all; }
.hq-step p { max-width: 34ch; margin: 0 auto; font-size: 1rem; line-height: 1.8; color: var(--text-mid); word-break: keep-all; }
.hq-tests { margin-top: 44px; padding: 28px 32px; border-radius: 16px; background: #F2F6F9; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.hq-tests-lead { margin: 0; font-size: 1rem; font-weight: 500; color: #10233F; word-break: keep-all; }
.hq-tests-lead > span { display: block; margin-bottom: 6px; font-size: .85rem; color: #596C7C; }
.hq-tests-lead strong { color: var(--primary); font-weight: 700; }
.hq-test-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.hq-test-list li { display: inline-flex; align-items: center; gap: 7px; font-size: .95rem; color: #3D5264; }
.hq-test-list i { color: var(--primary); font-size: 1rem; }

/* 02 — 제품 패키지의 질감과 품질 관리 원칙. 인증 자료로 오인하지 않도록 캡션 표시 */
.hq-band { padding: 64px; border-radius: 28px; background: #F7F5F2; }
.hq-ch-2 .hq-ch-head { text-align: center; }
.hq-ch-2 .hq-ch-head .hq-no { justify-content: center; }
.hq-ch2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hq-ch2-grid.has-photo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.hq-ch2-photo { margin: 0; }
.hq-ch2-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 16px; object-fit: cover; object-position: center; display: block; }
.hq-ch2-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 14px; font-size: .85rem; line-height: 1.7; color: #62574F; }
.hq-ch2-photo figcaption span { color: #746B64; }
.hq-cards { list-style: none; margin: 0; padding: 0; }
.hq-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 18px; padding: 28px 0; border-bottom: 1px solid #DDD8D1; }
.hq-card:first-child { padding-top: 0; }
.hq-card:last-child { padding-bottom: 0; border-bottom: 0; }
.hq-card-no { grid-row: 1 / 3; padding-top: 3px; font-size: .9rem; font-weight: 600; letter-spacing: .05em; color: #805246; }
.hq-card h3 { grid-column: 2; margin: 0 0 10px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: #302D2B; word-break: keep-all; }
.hq-card p { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.85; color: #625D58; word-break: keep-all; overflow-wrap: anywhere; }

/* 03 — 자주색과 금색 壽, 포스터와 차분한 설명 목록 */
.hq-panel { position: relative; overflow: hidden; padding: 64px; border-radius: 28px; color: #fff; background: radial-gradient(ellipse at 85% 15%, rgba(145, 45, 54, .42), transparent 65%), #3B1116; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hq-panel.has-photo { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
.hq-panel-hanja { position: absolute; right: -.05em; bottom: -.28em; z-index: 0; font-family: 'Apple Myungjo', 'AppleMyungjo', 'Nanum Myeongjo', 'Batang', 'BatangChe', serif; font-size: clamp(14rem, 26vw, 24rem); line-height: 1; font-weight: 600; color: rgba(228, 210, 171, .055); pointer-events: none; user-select: none; }
.hq-panel-photo { position: relative; z-index: 1; margin: 0; border-radius: 14px; overflow: hidden; background: #170907; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45); }
.hq-panel-photo img { width: 100%; height: auto; display: block; }
.hq-panel-text { position: relative; z-index: 1; }
.hq-panel .hq-h2 { font-size: clamp(1.75rem, 2.7vw, 2.7rem); }
.hq-hanja-inline { margin-left: .1em; font-family: 'Apple Myungjo', 'AppleMyungjo', 'Nanum Myeongjo', 'Batang', serif; font-size: 1.25em; font-weight: 600; color: #E4D2AB; }
.hq-checks { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(228, 210, 171, .25); }
.hq-checks li { display: flex; align-items: flex-start; gap: 12px; padding: 17px 0; border-bottom: 1px solid rgba(228, 210, 171, .16); font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, .9); word-break: keep-all; }
.hq-checks li:last-child { border-bottom: 0; padding-bottom: 0; }
.hq-checks i { flex: none; margin-top: .15em; color: #E4D2AB; font-size: 1rem; }

/* 04 — 숫자와 핵심 단어로 기억하는 진료 원칙 */
.hq-points { list-style: none; margin: 0; padding: 36px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hq-point { padding: 0 32px; border-left: 1px solid #E0E6EB; }
.hq-point:first-child { border-left: 0; padding-left: 0; }
.hq-point:last-child { padding-right: 0; }
.hq-point-value { display: block; margin-bottom: 24px; font-size: clamp(2.8rem, 4vw, 4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; color: #173E60; }
.hq-point-value > span { margin-left: 5px; font-size: 1.25rem; font-weight: 500; letter-spacing: 0; }
.hq-point h3 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; color: #10233F; word-break: keep-all; }
.hq-point p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--text-mid); word-break: keep-all; }

@media (max-width: 1199px) {
    .hq-band, .hq-panel { padding: 44px 36px; }
    .hq-point { padding: 0 24px; }
}
@media (max-width: 1023px) {
    .hq-page { padding: 50px 0 100px; }
    .hq-page .pg-head { margin-bottom: 56px; }
    .hq-ch + .hq-ch { margin-top: 80px; }
    .hq-ch1-grid { grid-template-columns: minmax(0, 54%) minmax(0, 1fr); gap: 28px; padding-bottom: 32px; }
    .hq-intro-title { font-size: clamp(1.65rem, 3.3vw, 2.2rem); }
    .hq-ch1-photo::before { inset: -12px 12px 58px -12px; }
    .hq-step { padding: 0 20px; }
    .hq-band { padding: 44px 32px; }
    .hq-ch2-grid.has-photo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; }
    .hq-card { display: block; padding: 22px 0; }
    .hq-card-no { display: block; margin-bottom: 8px; padding-top: 0; }
    .hq-panel { padding: 44px 32px; }
    .hq-panel.has-photo { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 28px; }
    .hq-checks li { padding: 14px 0; }
    .hq-points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
    .hq-point:nth-child(odd) { border-left: 0; padding-left: 0; }
    .hq-point:nth-child(even) { padding-right: 0; }
}
@media (max-width: 767px) {
    .hq-page { padding: 50px 0 72px; }
    .hq-page .pg-head { margin-bottom: 48px; }
    .hq-ch + .hq-ch { margin-top: 64px; }
    .hq-no { margin-bottom: 16px; }
    .hq-h2 { font-size: 1.5rem; }
    .hq-p { font-size: .9rem; line-height: 1.7; }
    .hq-ch-head { margin-bottom: 28px; }
    .hq-ch1-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 0; padding-bottom: 16px; }
    .hq-ch1-text .hq-no { margin-bottom: 22px; }
    .hq-intro-title { font-size: clamp(1.4rem, 6.4vw, 2.4rem); }
    .hq-intro-lead { margin-top: 22px; font-size: 1.15rem; }
    .hq-ch1-body { margin-top: 22px; }
    .hq-quality-promise { margin-top: 16px; padding: 28px 0; }
    .hq-quality-promise > p { font-size: 1rem; }
    .hq-quality-promise > p br { display: none; }
    .hq-materials { flex-direction: column; align-items: center; gap: 12px; }
    .hq-ch1-photo { width: 88%; max-width: 380px; justify-self: center; }
    .hq-photo-window { aspect-ratio: 1 / 1; }
    .hq-ch1-photo figcaption { font-size: .85rem; }
    .hq-ch1-photo figcaption > span { font-size: .8rem; }
    .hq-steps { grid-template-columns: 1fr; margin-top: 32px; }
    .hq-step { padding: 0 0 28px 64px; text-align: left; }
    .hq-step:last-child { padding-bottom: 0; }
    .hq-step::before, .hq-step::after { top: 22px; bottom: 0; left: 21px; width: 1px; height: auto; }
    .hq-step::after { transform: scaleY(0); transform-origin: top; }
    .hq-step.is-in::after { transform: scaleY(1); }
    .hq-step-no { position: absolute; top: 0; left: 0; margin: 0; }
    .hq-step h3 { padding-top: 7px; font-size: 1.15rem; }
    .hq-step p { max-width: none; }
    .hq-tests { margin-top: 32px; padding: 24px 20px; gap: 20px; }
    .hq-test-list { gap: 12px 18px; }
    .hq-band { padding: 36px 20px; border-radius: 20px; }
    .hq-ch2-grid.has-photo { grid-template-columns: 1fr; gap: 28px; }
    .hq-ch2-photo img { border-radius: 12px; }
    .hq-card h3 { font-size: 1.2rem; }
    .hq-card-no { margin-bottom: 10px; }
    .hq-panel { padding: 28px 20px 36px; border-radius: 20px; }
    .hq-panel.has-photo { grid-template-columns: 1fr; gap: 32px; }
    .hq-panel-photo { width: 100%; max-width: 360px; margin: 0 auto; }
    .hq-panel-hanja { font-size: 13rem; }
    .hq-panel .hq-h2 { font-size: 1.65rem; }
    .hq-checks { margin-top: 24px; }
    .hq-checks li { gap: 10px; }
    .hq-points { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
    .hq-points .hq-point { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; padding: 26px 0; border-left: 0; border-bottom: 1px solid #E0E6EB; }
    .hq-point-value { grid-row: 1 / 3; align-self: center; margin: 0; font-size: 2.6rem; }
    .hq-point-value > span { margin-left: 3px; font-size: 1rem; }
    .hq-point h3 { font-size: 1.1rem; margin-bottom: 8px; }
}
@media (max-width: 359px) {
    .hq-band, .hq-panel { padding-left: 16px; padding-right: 16px; }
    .hq-points .hq-point { grid-template-columns: 80px minmax(0, 1fr); gap: 8px 16px; }
    .hq-point-value { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hq-ch1-grid.is-in .hq-title-line > span, .hq-ch1-grid.is-in .hq-intro-lead,
    .hq-ch1-grid.is-in .hq-ch1-body, .hq-ch1-grid.is-in .hq-intro-lead strong::after,
    .hq-ch1-grid.is-in .hq-photo-window img { animation: none; }
    .hq-step::after, .hq-step-no, .hq-process-link i { transition: none; }
    .hq-process-link:hover i { transform: none; }
}

/* ============================================================
   오시는 길 (pages/about/location.php) — .lm-*
   1단계: 아래 카카오맵 지도 퍼가기. 위쪽 안내는 이어서
   ============================================================ */
.lm-page { padding: 50px 0 130px; }
.lm-inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.lm-map { position: relative; height: 560px; border-radius: 15px; overflow: hidden; background: #E9EDF3; }   /* 퍼가기 지도가 아래에 붙이는 주소·전화 띠(.cont)는 잘라 낸다 */
/* 테두리는 상자 위에 ::after 로 그린다 — 퍼가기 지도 자체 테두리는 아래 띠와 함께 잘려 하단 선이 사라지므로 끄고, 둥근 모서리에 맞춰 네 변을 우리가 그린다 */
.lm-map::after { content: ''; position: absolute; inset: 0; z-index: 4; border: 1px solid #D6DEE8; border-radius: inherit; pointer-events: none; }
.lm-map .root_daum_roughmap { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.lm-map .root_daum_roughmap .wrap_map { height: 100% !important; border: 0 !important; }
.lm-map .root_daum_roughmap .map_border { display: none !important; }   /* 퍼가기 지도가 네 변에 따로 그리는 선(.map_border border1~4) — 우리 테두리와 겹치고 하단은 잘려 보이지 않음 */
.lm-map .root_daum_roughmap .wrap_controllers { z-index: 2; }
/* 지도 잠금 덮개: 투명하게 덮어 스크롤 휠·드래그를 막고, 클릭하면 사라진다. 안내 문구는 마우스를 올렸을 때만(터치 기기는 항상) */
.lm-map-guard { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; transition: background .25s; }
.lm-map-guard span { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: rgba(16, 35, 63, .82); color: #fff; font-size: .9rem; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.lm-map-guard:hover { background: rgba(16, 35, 63, .12); }
.lm-map-guard:hover span, .lm-map-guard:focus-visible span { opacity: 1; transform: none; }
.lm-map.is-active .lm-map-guard { display: none; }
@media (hover: none) { .lm-map-guard span { opacity: 1; transform: none; font-size: .85rem; padding: 10px 16px; } }
@media (max-width: 1023px) {
    .lm-page { padding: 50px 0 100px; }
    .lm-map { height: 460px;}
}
@media (max-width: 767px) {
    .lm-page { padding: 50px 0 72px; }
    .lm-map { height: 360px;}
}
/* 지도 아래: 좌 주소·전화 / 우 지도 링크 알약(브랜드색: 네이버 초록 · 카카오 노랑, 레퍼런스 캡처) */
.lm-map-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-top: 28px; padding: 0 8px; }
.lm-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 36px; }
.lm-contact li { display: inline-flex; align-items: center; gap: 8px; font-size: 1.02rem; color: var(--text-mid); word-break: keep-all; }
.lm-contact li i { color: var(--primary); font-size: 1.05rem; }
.lm-contact li b { color: var(--text-dark); font-weight: 600; }
.lm-contact li a { color: inherit; }
.lm-contact li a:hover { color: var(--primary); }
.lm-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.lm-link { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 48px; padding: 0 32px; border-radius: 999px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: transform .2s, box-shadow .2s, filter .2s; }
.lm-link:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .35); filter: brightness(.97); }
.lm-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.lm-link-naver, .lm-link-naver:hover { background: #03C75A; color: #fff; }   /* :hover 도 같은 색 — 전역 a:hover 색 변화 차단 */
.lm-link-kakao, .lm-link-kakao:hover { background: #FEE500; color: #191919; }
.lm-link-tmap, .lm-link-tmap:hover { background: #0264FF; background-image: linear-gradient(90deg, #F244BA 0%, #983EED 32%, #0264FF 62%, #33E6AF 100%); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }   /* 티맵 로고 그라데이션(핑크 → 보라 → 파랑 → 민트, 로고 이미지에서 샘플) */
@media (max-width: 1023px) {
    .lm-map-foot { margin-top: 24px; padding: 0; }
    .lm-link { min-width: 170px; height: 46px; padding: 0 26px; }
}
@media (max-width: 767px) {
    .lm-map-foot { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 20px; }
    .lm-contact { flex-direction: column; gap: 10px; }
    .lm-contact li { font-size: .97rem; align-items: flex-start; }
    .lm-contact li i { margin-top: .2em; }
    .lm-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }   /* 네이버 · 카카오 · 티맵 */
    .lm-link { min-width: 0; width: 100%; height: 46px; padding: 0 8px; font-size: .92rem; white-space: nowrap; }
}
/* 교통 및 주차장 안내: 위 선 하나 아래 좌 제목 | 우 아이콘 목록 */
.lm-guide { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); gap: 24px 5vw; margin-top: 72px; padding-top: 44px; border-top: 1px solid #D6DEE8; }
.lm-guide-title { margin: 0; font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.3; color: #10233F; word-break: keep-all; }
.lm-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.lm-guide-list li { display: flex; align-items: flex-start; gap: 16px; }
.lm-guide-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #EEF4FB; color: var(--primary); font-size: 1.2rem; }
.lm-guide-list p { margin: 0; padding-top: 9px; font-size: 1.05rem; line-height: 1.7; color: var(--text-dark); word-break: keep-all; }
@media (max-width: 1023px) {
    .lm-guide { grid-template-columns: 1fr; gap: 20px; margin-top: 56px; padding-top: 36px; }
}
@media (max-width: 767px) {
    .lm-guide { margin-top: 44px; padding-top: 28px; }
    .lm-guide-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .lm-guide-list p { padding-top: 7px; font-size: .98rem; }
}