/* 안중 클리닉 진료 쪽 · 안중 칼럼 글 · 안중 클리닉 첫 쪽 (2026-10-15 가지 content/anjung-infographic. 틀은 src/herb-info.mjs · src/herb.mjs).
   머리와 사진 칸은 통증 글 마 판(pain-post.css 의 .pp-e) 그대로 쓰고, 여기서는 칸 수와 안중 쪽에만 있는 면(약재 한 판 · 접는 물음)만 맞춘다.
   칸 · 면의 뼈대는 proc/info.css · proc/scenes.css 가 맡는다. */

/* 머리: 제품 사진(공진단 · 위보약)은 잘리지 않게 바탕을 깔고 통째로 */
.pp-e .pp-e-top-art.hi-contain { background: #efe6d6; }
.pp-e .pp-e-top-art.hi-contain img { object-fit: contain; padding: 6%; }

/* 사진 칸: 여섯 칸(첩약 질환)은 세 칸씩 정사각, 다섯 · 세 칸은 넓은 화면에서 세 칸씩 */
.pz.hi .ig-sc .sc-card .sc-cells[style*="--k:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pz.hi .ig-sc .sc-card .sc-cells[style*="--k:6"] .sc-pic { aspect-ratio: 1; }
.pz.hi .ig-sc .sc-card .sc-cells[style*="--k:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pz.hi .ig-sc .sc-card .sc-cells[style] .draw .sc-pic img { object-fit: contain; }
.pz.hi .ig-sc .sc-card .sc-cells[style] .hi-fit .sc-pic { background: #efe6d6; }
.pz.hi .ig-sc .sc-card .sc-cells[style] .hi-fit .sc-pic img { object-fit: contain; padding: 6%; }
.pz.hi .ig-sc .sc-card .sc-cells[style*="--k:2"] { max-width: 760px; }
@media (min-width: 820px) { .pz.hi .ig-sc .sc-card .sc-cells[style*="--k:5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 약재 면: 한 판에 펼친 그림 한 장과 한 줄(이름표), 이름은 눌러야 펼쳐진다 */
.pz.hi .hi-herbs-art { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: var(--ig-card); }
.pz.hi .hi-herbs-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pz.hi .hi-herbs-art figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 20px 11px; background: var(--c-dark); color: #fff; font-size: 19px; font-weight: 800; border-radius: 0 8px 0 0; }
.pz.hi .hi-names { margin-top: 14px; border-top: 1px solid var(--ig-hair); border-bottom: 1px solid var(--ig-hair); }
.pz.hi .hi-names summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-size: 17px; font-weight: 700; color: var(--c-dark); }
.pz.hi .hi-names summary::-webkit-details-marker { display: none; }
.pz.hi .hi-names summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s; }
.pz.hi .hi-names[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pz.hi .hi-names summary:focus-visible { outline: 3px solid var(--c-main); outline-offset: 2px; }
.pz.hi .hi-names p { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 4px 0 18px; }
.pz.hi .hi-names p span { font-size: 15px; font-weight: 500; line-height: 1.5; padding: 3px 10px; background: var(--ig-card); border-radius: 6px; }
.pz.hi .hi-herbs .sc-note { margin-top: 16px; }

/* 맺는 면: 머리 글만 */
.pz.hi .hi-close .ig-sub { max-width: 24em; }

/* 자주 묻는 질문: 접는 칸은 그대로, 글꼴 · 색 · 모서리 · 간격만 새 판에 맞춘다(원장 10-14 21:38) */
.pz.hi .hi-faq { background: #fff; padding: 104px 5vw; font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; word-break: keep-all; border-top: 1px solid var(--ig-hair, rgba(34, 38, 34, 0.16)); }
.pz.hi .hi-faq-in { max-width: 1080px; }
.pz.hi .hi-faq h2 { margin: 0 0 22px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--c-dark); }
.pz.hi .hi-faq .faq-item { margin: 0 0 10px; padding: 0 22px; background: var(--c-tint); border: 0; border-radius: 8px; }
.pz.hi .hi-faq .faq-item summary { padding: 18px 34px 18px 0; }
.pz.hi .hi-faq .faq-item summary::after { color: var(--c-main); }
.pz.hi .hi-faq .faq-q { font-size: 18px; font-weight: 700; color: var(--c-dark); }
.pz.hi .hi-faq .faq-q::before, .pz.hi .hi-faq .faq-a::before { color: var(--c-main); }
.pz.hi .hi-faq .faq-a { padding: 0 0 20px; font-size: 16px; line-height: 1.7; color: #4a504a; }

@media (max-width: 767px) {
  .pz.hi .ig-sc .sc-card .sc-cells[style*="--k:6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz.hi .ig-sc .sc-card .sc-cells[style*="--k:3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz.hi .hi-herbs-art figcaption { font-size: 16px; padding: 8px 14px 9px; }
  .pz.hi .hi-faq { padding: 52px 20px 56px; }
  .pz.hi .hi-faq .faq-item { padding: 0 16px; }
  .pz.hi .hi-faq .faq-q { font-size: 16px; }
  .pz.hi .hi-faq .faq-a { font-size: 15px; }
}

/* 안중 클리닉 첫 쪽: 사진 카드는 그대로, 글꼴 · 색 · 모서리를 새 판에 맞춘다(원장 10-14 21:39). 큰 제목 · 머리 두 줄은 2026-10-15 걷었다, 작은 판 둘은 짧은 줄만 */
body.herb-page .hb { --hb-r: 8px; }
body.herb-page .hb-feat, body.herb-page .hb-band, body.herb-page .hb-prod { border-radius: var(--hb-r); }
body.herb-page .hb-feat, body.herb-page .hb-band { background: #193c32; }
body.herb-page .hb-feat-tx strong, body.herb-page .hb-band strong, body.herb-page .hb-prod-tx strong, body.herb-page .hb-col-card strong { font-weight: 800; letter-spacing: -0.03em; }
body.herb-page .hb-prod { border: 0; background: #f7f4ed; }
body.herb-page .hb-prod-contain .hb-prod-ph { background: #efe6d6; }
body.herb-page .hb-prod-tx em, body.herb-page .hb-col-card em, body.herb-page .hb-col-more { color: #31584a; }
body.herb-page .hb-col { border-top-color: #193c32; }
body.herb-page .hb-col-card { border-radius: var(--hb-r); border-top: 0; background: #f7f4ed; }
body.herb-page .hb-col-card:hover { background: #e9efe9; }
body.herb-page .hb-prod-short { text-wrap: balance; }