/* 병원소개(about.html) — 2026-10-09 병원 시안. 한의원을 처음 만나는 분을 위한 소개 · 안내 페이지. greeting.css(.gr) 와 함께 씁니다. */
.ab > section{padding:0}
.ab .is-center{text-align:center}
.ab-h2{margin:0;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;line-height:1.4;letter-spacing:-.03em;color:var(--gr-navy)}
.ab-h2.is-center{text-align:center}
.ab-p{margin:.9rem 0 0;color:var(--gr-ink-2);font-size:var(--fs-sm);line-height:1.75}
.ab-more{display:inline-block;margin-top:1rem;color:var(--gr-blue);font-weight:800;text-decoration:none;border-bottom:1.5px solid currentColor}
.ab-sec{padding:64px 0 !important}
.ab-soft{background:#EEF4FB}
html[data-theme="dark"] .ab-soft{background:var(--gr-soft)}

/* 첫 화면 */
.ab-hero{position:relative;overflow:hidden;min-height:calc(var(--nav-h) + 400px);display:flex;align-items:center;background:#EAF2FC}
.ab-hero-photo{position:absolute;top:var(--nav-h);bottom:0;right:max(0px,calc((100% - var(--wrap)) / 2 - 80px));width:60%;margin:0;overflow:hidden}
.ab-hero-photo img{width:100%;height:100% !important;object-fit:cover;object-position:78% 22%;transform:scale(1.35);transform-origin:78% 20%}
.ab-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#EAF2FC 0%,rgba(234,242,252,.8) 22%,rgba(234,242,252,0) 45%,rgba(234,242,252,0) 85%,#EAF2FC 100%)}
.ab-hero-in{position:relative;padding:calc(var(--nav-h) + 24px) 0 52px}
.ab-hero .crumb{margin-bottom:20px}
html[data-theme="dark"] .ab-hero .crumb,html[data-theme="dark"] .ab-hero .crumb a{color:#4A5563}
.ab-eyebrow{margin:0;font-size:1.4rem;font-weight:600;color:#0E2A5C}
.ab .ab-title{margin:.6rem 0 0;font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.3;letter-spacing:-.035em;color:#0E2A5C}
.ab-title span{color:#1F55D6}
.ab-lead{margin:1rem 0 0;font-size:var(--fs-md);color:#3D4855}
.ab-chip{display:inline-block;margin:1.2rem 0 0;padding:8px 20px;border-radius:999px;background:#D6E5F8;color:#1F55D6;font-weight:700}
.ab-facts-sec{padding:26px 0 !important;background:#fff;border-bottom:1px solid var(--gr-line)}
html[data-theme="dark"] .ab-facts-sec{background:transparent}
.ab-facts{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.ab-facts li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.ab-facts li+li{border-left:1px solid var(--gr-line)}
.ab-facts svg{width:34px;height:34px;margin-bottom:6px;fill:none;stroke:var(--gr-blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-facts b{font-size:var(--fs-md);font-weight:800;color:var(--gr-navy)}
.ab-facts span{color:var(--gr-ink-2);font-size:var(--fs-xs)}

/* 통증을 살피고 */
.ab-care{background:#EEF4FB}
html[data-theme="dark"] .ab-care{background:var(--gr-soft)}
.ab-care-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:center}
.ab-ph-card{position:relative;margin:0;border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.ab-ph-card img{width:100%;height:100% !important;object-fit:cover}
.ab-ph-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 16px;background:rgba(20,28,40,.6);color:#fff;font-size:var(--fs-xs)}

/* 세 가지 */
.ab-three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:28px 0 18px;padding:0}
.ab-three li{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:8px;background:#fff}
html[data-theme="dark"] .ab-three li{background:var(--bg)}
.ab-three svg{flex:none;width:44px;height:44px;fill:none;stroke:var(--gr-navy);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ab-three b{display:block;font-size:var(--fs-md);color:var(--gr-navy)}
.ab-three span{color:var(--gr-ink-2);font-size:var(--fs-xs)}

/* 대표원장 */
.ab-doc{position:relative;overflow:hidden;min-height:400px;display:flex;align-items:center;background:#F3F7FC}
html[data-theme="dark"] .ab-doc{background:var(--gr-soft)}
.ab-doc-photo{position:absolute;top:0;bottom:0;left:0;width:42%;margin:0}
.ab-doc-photo img{width:100%;height:100% !important;object-fit:cover;object-position:50% 25%}
.ab-doc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,247,252,0) 55%,#F3F7FC 100%)}
html[data-theme="dark"] .ab-doc-photo::after{background:none}
.ab-doc-in{position:relative;display:flex;justify-content:flex-end}
.ab-doc-tx{width:56%;padding:52px 0}
.ab-cv{display:grid;grid-template-columns:repeat(4,auto);gap:12px 22px;list-style:none;margin:22px 0 0;padding:0}
.ab-cv li{display:flex;align-items:center;gap:10px;color:var(--gr-ink);font-size:var(--fs-xs);line-height:1.4}
.ab-cv svg{flex:none;width:30px;height:30px;fill:none;stroke:var(--gr-navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 연구 · 특허 */
.ab-rs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.ab-rs-card{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:180px;border-radius:8px;overflow:hidden;background:#F3F7FC;color:inherit;text-decoration:none;border:1px solid transparent}
html[data-theme="dark"] .ab-rs-card{background:var(--gr-soft)}
.ab-rs-card:hover{border-color:var(--gr-blue)}
.ab-rs-card:not(.is-patent){grid-template-columns:42% auto 1fr}
.ab-rs-ph img{display:block;width:100%;height:100% !important;object-fit:cover}
.ab-rs-years{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 0 0 14px}
.ab-rs-years i{padding:2px 10px;background:#4A6FA0;color:#fff;font-style:normal;font-weight:700;font-size:var(--fs-xs)}
.ab-rs-tx{display:flex;flex-direction:column;justify-content:center;padding:18px 22px}
.ab-rs-tx b{font-size:var(--fs-md);color:var(--gr-navy)}
.ab-rs-tx small{margin-top:8px;color:var(--gr-ink-2);font-size:var(--fs-xs);line-height:1.6}
.ab-rs-tx em{margin-top:12px;color:var(--gr-blue);font-style:normal;font-weight:800;font-size:var(--fs-xs)}

/* 방송 · 저서 */
.ab-media{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:26px}
.ab-tv{text-align:center}
.ab-tv ul{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none;margin:0 0 16px;padding:0;text-align:left}
.ab-tv li{border-radius:6px;overflow:hidden;background:#14284A;color:#fff}
.ab-tv img{display:block;width:100%;height:auto;aspect-ratio:600/465;object-fit:cover}
.ab-tv b{display:block;padding:8px 10px 0;font-size:var(--fs-2xs)}
.ab-tv li span{display:block;padding:2px 10px 10px;font-size:var(--fs-2xs);line-height:1.45;opacity:.9}
.ab-books{display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:8px;background:#fff;text-align:center}
html[data-theme="dark"] .ab-books{background:var(--bg)}
.ab-books-row{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin-bottom:14px}
.ab-books-row img{width:17%;height:auto;box-shadow:0 6px 14px rgba(14,42,92,.2)}
.ab-books b{color:var(--gr-navy);font-size:var(--fs-md)}
.ab-books > span{margin:4px 0 14px;color:var(--gr-ink-2);font-size:var(--fs-xs)}
.ab-media .btn{min-height:44px;font-size:var(--fs-xs)}

/* 질환 */
.ab-dis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:26px 0 0;padding:0}
.ab-dis a{display:grid;grid-template-columns:42% 1fr;grid-template-rows:auto 1fr;align-items:center;column-gap:12px;min-height:130px;padding:12px 16px 12px 0;border:1px solid var(--gr-line);border-radius:8px;overflow:hidden;color:inherit;text-decoration:none}
.ab-dis a:hover{border-color:var(--gr-blue)}
.ab-dis img{grid-row:1 / span 2;width:100%;height:120px !important;object-fit:cover;object-position:50% 30%}
.ab-dis b{align-self:end;color:var(--gr-navy);font-size:var(--fs-md)}
.ab-dis span{align-self:start;margin-top:4px;color:var(--gr-ink-2);font-size:var(--fs-xs);line-height:1.5}

/* 맺음 */
.ab-end{padding:52px 0 !important;background:linear-gradient(90deg,#EEF4FB,#F7FAFE)}
html[data-theme="dark"] .ab-end{background:var(--gr-soft)}
.ab-end-in{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
.ab-small{margin:.8rem 0 0;color:var(--gr-ink-2);font-size:var(--fs-xs)}
.ab-loc{display:flex;align-items:center;gap:8px;margin:.8rem 0 0;font-weight:800}
.ab-loc a{color:var(--gr-navy);text-decoration:none}
.ab-loc svg{width:22px;height:22px;fill:none;stroke:var(--gr-navy);stroke-width:2}
.ab-end-btns{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:1024px){
  .ab-care-grid{grid-template-columns:1fr 1fr}
  .ab-care-grid > div{grid-column:1 / -1}
  .ab-three,.ab-rs,.ab-media{grid-template-columns:1fr}
  .ab-dis{grid-template-columns:repeat(2,1fr)}
  .ab-cv{grid-template-columns:repeat(2,auto)}
  .ab-end-in{grid-template-columns:1fr}
}
@media (max-width:768px){
  .ab .wrap{width:calc(100% - 40px)}
  .ab-hero{flex-direction:column;align-items:stretch;min-height:0}
  .ab-hero-photo{position:relative;top:auto;right:auto;width:auto;height:260px;order:2}
  .ab-hero-photo img{transform:none}
  .ab-hero-photo::after{background:linear-gradient(180deg,#EAF2FC 0%,rgba(234,242,252,0) 30%)}
  .ab-hero-in{padding-bottom:24px}
  .ab-facts{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .ab-facts li:nth-child(3){border-left:0}
  .ab-sec{padding:48px 0 !important}
  .ab-care-grid,.ab-dis{grid-template-columns:1fr}
  .ab-doc{flex-direction:column;align-items:stretch}
  .ab-doc-photo{position:relative;width:auto;height:280px}
  .ab-doc-tx{width:auto;padding:28px 0 40px}
  .ab-rs-card,.ab-rs-card:not(.is-patent){grid-template-columns:1fr}
  .ab-rs-ph{height:160px}
  .ab-rs-years{flex-direction:row;padding:12px 22px 0}
  .ab-tv ul{grid-template-columns:1fr}
  .ab-end-btns{flex-direction:column}
}
/* 2026-10-09 첫 화면 사진 교체(흰 배경 · 원장이 가운데) — 원장 좌우 모두 진한 색 막, 흰 배경은 multiply 로 바탕색에 녹임 */
@media (min-width:769px){
  .ab-hero-photo{width:50%;right:max(0px,calc((100% - var(--wrap)) / 2 - 20px))}
  .ab-hero-photo img{transform:none;object-position:50% 100%;mix-blend-mode:multiply}
  .ab-hero-photo::after{background:linear-gradient(90deg,#EAF2FC 0%,#EAF2FC 14%,rgba(234,242,252,0) 30%,rgba(234,242,252,0) 70%,#EAF2FC 86%,#EAF2FC 100%)}
}
@media (max-width:768px){
  .ab-hero-photo img{object-position:50% 100%;mix-blend-mode:multiply}
  .ab-hero-photo::after{background:linear-gradient(90deg,#EAF2FC 0%,rgba(234,242,252,0) 25%,rgba(234,242,252,0) 75%,#EAF2FC 100%)}
}
html[data-theme="dark"] .ab-hero-photo img{mix-blend-mode:normal}
@media (min-width:769px){ .ab-hero-photo::after{background:linear-gradient(90deg,#EAF2FC 0%,#EAF2FC 25%,rgba(234,242,252,0) 37%,rgba(234,242,252,0) 63%,#EAF2FC 75%,#EAF2FC 100%)} }
/* 2026-10-09 두 자리 모두 같은 원장 사진(흰 배경, 가운데) */
.ab-doc-photo img{object-position:47% 20%;mix-blend-mode:multiply}
.ab-doc-photo::after{background:linear-gradient(90deg,#F3F7FC 0%,rgba(243,247,252,0) 22%,rgba(243,247,252,0) 70%,#F3F7FC 100%)}
html[data-theme="dark"] .ab-doc-photo img{mix-blend-mode:normal}
/* 2026-10-09 화면 폭이 바뀌어도 얼굴이 잘리지 않게 — 사진을 자르지 않고(contain) 아래 가운데에 맞춤, 사진 칸 위치도 본문 폭 안으로 */
.ab-hero-photo img,.ab-doc-photo img{object-fit:contain !important;object-position:50% 100% !important;transform:none !important}
@media (min-width:769px){
  .ab-hero-photo{top:calc(var(--nav-h) + 16px);width:min(56%,760px);right:max(20px,calc((100% - var(--wrap)) / 2 - 40px))}
  .ab-doc-photo{top:20px;width:min(44%,640px);left:max(0px,calc((100% - var(--wrap)) / 2 - 80px))}
}
@media (max-width:768px){ .ab-hero-photo{height:300px} .ab-doc-photo{height:300px} }
/* 2026-10-09 방송 · 저서 두 칸을 같은 흰 카드로 — 높이 · 제목 · 설명 · 단추 위치를 맞춤 */
.ab-media{align-items:stretch}
.ab-tv,.ab-books{display:flex;flex-direction:column;align-items:center;padding:20px 20px 22px;border-radius:8px;background:#fff;text-align:center}
html[data-theme="dark"] .ab-tv{background:var(--bg)}
.ab-tv ul{width:100%;margin:0 0 14px;align-items:stretch}
.ab-tv li{display:flex;flex-direction:column}
.ab-tv img{object-fit:contain;background:#0E1A2E}
.ab-books-row{flex:1;align-items:center;margin-bottom:14px}
.ab-media-t,.ab-books b{color:var(--gr-navy);font-size:var(--fs-md);font-weight:800}
.ab-media-d,.ab-books > span{margin:4px 0 14px;color:var(--gr-ink-2);font-size:var(--fs-xs)}
.ab-tv .btn,.ab-books .btn{margin-top:auto}
.ab-tv > b.ab-media-t{display:block;padding:0;font-size:var(--fs-md);color:var(--gr-navy)}.ab-tv ul{flex:1}
.ab-books-row{align-self:stretch;width:100%;padding:22px 16px;border:1px solid #D6E2F3;border-radius:6px;background:#F3F7FC}html[data-theme="dark"] .ab-books-row{background:var(--gr-soft)}  /* 2026-10-09 왼쪽 방송 칸과 맞춘 테두리 상자 */
/* 2026-10-09 원장 사진을 색 막 · 바탕 앞으로 — 사진 위에 덮던 색 막(::after)과 multiply 섞기를 없애고,
   사진 자체의 가장자리만 투명하게 흐려(mask) 바탕과 잇습니다. 사진이 맨 앞에 오도록 z-index 를 올립니다. */
.ab-hero-photo::after,.ab-doc-photo::after{content:none !important}
.ab-hero-photo,.ab-doc-photo{z-index:1}
.ab-hero-in,.ab-doc-in{z-index:2}
.ab-hero-photo img,.ab-doc-photo img{mix-blend-mode:normal !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 26%,#000 38%,#000 62%,transparent 74%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,transparent 26%,#000 38%,#000 62%,transparent 74%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%);
  mask-composite:intersect}

/* 2026-10-12 PC · 휴대폰 모두 — 원장 사진 위쪽을 덮던 바탕색 막이 머리를 하얗게 바래게 해서 없앰 — 인물 사진엔 색 막을 씌우지 않음(흰 바탕은 multiply 로 바탕색에 녹음) */
.ab-hero-photo::after,.ab-doc-photo::after{content:none !important}

/* 2026-10-12 새 원장 사진(팔짱) — 예전 사진용 가장자리 흐림(mask)이 머리 위 · 어깨 · 팔을 하얗게 바래게 해서 없앰.
   병원이 준 배경 투명 사진(jang-about-cutout.png)을 그대로 씀 — 사람에는 아무것도 덮지 않음 */
.ab-hero-photo img,.ab-doc-photo img{-webkit-mask-image:none !important;mask-image:none !important;mix-blend-mode:normal !important}

/* 2026-10-14 어두운 화면 — 첫 화면(.ab-hero)이 밝은 하늘색 그대로 남던 것을 어두운 바탕으로. 원장 사진은 투명 배경(cutout)이라 바탕만 바꾸면 됩니다 */
html[data-theme="dark"] .ab-hero{background:var(--gr-soft)}
html[data-theme="dark"] .ab-hero .crumb,html[data-theme="dark"] .ab-hero .crumb a{color:var(--ink-3)}
html[data-theme="dark"] .ab-hero .crumb [aria-current]{color:var(--gr-blue)}
html[data-theme="dark"] .ab-eyebrow{color:var(--gr-ink-2)}
html[data-theme="dark"] .ab .ab-title{color:var(--gr-navy)}
html[data-theme="dark"] .ab-title span{color:var(--gr-blue)}
html[data-theme="dark"] .ab-lead{color:var(--gr-ink-2)}
html[data-theme="dark"] .ab-chip{background:rgba(126,166,255,.16);color:var(--gr-blue)}