/* 시술 상세 위쪽 (TW-22) — 이동 막대 · 2:1 히어로 · 목차 탭. 세 브랜드 공용 (clinic 레이아웃). */
/* 고정 쌓기: GNB(--gnb-height) → 이동 막대 → 목차 탭. 구좌 앵커는 그 합만큼 아래에 멈춘다. */
:root{--detail-nav-height:48px;--detail-toc-height:44px}
#content [id^="detail-"]{scroll-margin-top:calc(var(--gnb-height,0px) + var(--detail-nav-height) + var(--detail-toc-height))}

.detail-nav{position:sticky;top:var(--gnb-height,0px);z-index:11;display:flex;align-items:center;gap:2px;height:var(--detail-nav-height);padding:0 12px 0 8px;background:#fff;border-bottom:1px solid #efefef;font-size:var(--fs-14);color:#1a1a1a}
.detail-nav-back{flex:none;display:grid;place-items:center;width:36px;height:36px;font-size:var(--fs-24);line-height:1;color:inherit;text-decoration:none}
.detail-nav-divider{flex:none;color:#d9d9d9}
.detail-nav-menu{align-self:stretch;min-width:0;flex:1 1 0}
.detail-nav-menu>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:100%;padding:0 8px;border-bottom:2px solid transparent;cursor:pointer;list-style:none;font-weight:500}
.detail-nav-menu>summary::-webkit-details-marker{display:none}
.detail-nav-menu>summary>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* 얇은 꺾쇠(1.25px · 가로 약 7px · 글자색) — 닫힘 ⌄ / 열림 ⌃ (원문 3-4). 이동 막대·옵션 더보기·«시술 목록» 이 같이 쓴다 */
.detail-nav-menu>summary::after,.option-more>summary::after,.detail-price-title::after{content:'';flex:none;box-sizing:border-box;width:5px;height:5px;border:solid currentColor;border-width:0 1.25px 1.25px 0;transform:translateY(-1px) rotate(45deg)}
.detail-nav-menu[open]>summary::after,.option-more[open]>summary::after,.detail-price-title::after{transform:translateY(1px) rotate(-135deg)}
/* 열린 칸: 브랜드 색 + 밑줄 · 열려 있는 동안 아래 상세는 어둡게(바깥 누름·Esc 로 닫힘 — detail.js) */
.detail-nav-menu[open]>summary{color:var(--accent);border-bottom-color:var(--accent)}
.detail-nav:has([open])::after{content:'';position:absolute;left:0;right:0;top:100%;height:100vh;background:rgb(0 0 0/.4);z-index:0}
/* 드롭다운: 화면 높이 60%까지, 넘치면 목록 안에서 스크롤 — 아래 상세가 비쳐 보인다. 바깥 누름·Esc 로 닫힘(detail.js) */
.detail-nav-list{z-index:1;position:absolute;left:0;right:0;top:100%;max-height:60vh;overflow:auto;overscroll-behavior:contain;padding:8px 0;background:#fff;border-bottom:1px solid #efefef;box-shadow:0 12px 24px rgb(0 0 0/.12)}
.detail-nav-list a{display:flex;justify-content:space-between;gap:12px;padding:12px 24px;color:#1a1a1a;text-decoration:none}
.detail-nav-list a[aria-current]{color:var(--accent);font-weight:600}
.detail-nav-check{color:var(--accent)}
.detail-nav-group{margin:12px 24px 4px;font-size:var(--fs-12);color:#777}

/* 히어로 — 화면 폭 기준 2:1 로 꽉 참(늘림 없음). 글자 상자는 이미지 종류와 무관하게 왼쪽 26px·세로 가운데 */
/* 글자 색·글꼴 — 잠정 — 세윤님 확인 전 (10-27 «일단 진행»): 세라미크·데이뷰 #333 · 벨리셀 브랜드 색 #00342d · 보조 줄 #1a1a1a · 글꼴 Pretendard. 브랜드마다 아래 한 줄 */
.detail-hero{--hero-text:var(--accent);--hero-sub:#1a1a1a;--hero-font:Pretendard,'Apple SD Gothic Neo',sans-serif;position:relative;aspect-ratio:2/1;overflow:hidden;background:#eee;container-type:inline-size}
.detail-hero[data-brand=daybeau]{--hero-text:#333}
.detail-hero[data-brand=ceramique]{--hero-text:#333}
.detail-hero[data-brand=vellicell]{--hero-text:#00342d}
.detail-hero>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* 썸네일 종류가 «동영상»인 진료항목 — 옛 운영 overview-section.tsx 의 aspect-video 유튜브 (DIR-41) */
.detail-hero-video{aspect-ratio:16/9;background:#000}
.detail-hero-video>iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.detail-hero-text{position:absolute;left:26px;right:26px;top:50%;transform:translateY(-50%);font-family:var(--hero-font);color:var(--hero-text)}
/* 히어로 영문 타이틀 크기는 원문 미정(체계에 없는 장식 글자) — 줄당 16자가 폭 390 에서 한 줄에 들도록 폭에 맞춰 줄이고 40px 에서 멈춘다 */
.detail-hero-title{margin:0;font-size:var(--fs-34);font-size:min(40px,8.8cqi);font-weight:700;line-height:1.1;letter-spacing:0;overflow-wrap:anywhere}
.detail-hero-sub{margin:8px 0 0;font-size:var(--fs-14);font-weight:500;line-height:1.4;color:var(--hero-sub)}

/* 모션: 줄마다 가림 영역 안에서 위→아래 1.4초 ease-out 한 번 (detail.js 가 data-hero-ready 를 붙여 시작) */
.detail-hero .line{display:block;overflow:hidden}
.detail-hero .line>span{display:block;transform:translateY(-100%)}
.detail-hero[data-hero-ready] .line>span{transform:translateY(0);transition:transform var(--motion-hero,1.4s) ease-out}
/* 사진: DIR-49 — 시안은 고정, 세윤님 결정(11-05)으로 움직임. 글자와 같은 data-hero-ready 에서 1.06→1 4초 ease-out. 1 보다 작아지지 않아 틀 빈칸 없음 · 색은 그대로 */
.detail-hero[data-style=brand]>img{transform:scale(1.06)}
.detail-hero[data-style=brand][data-hero-ready]>img{transform:scale(1);transition:transform 4s ease-out}
/* 뒤로가기로 다시 온 화면은 끝 상태 그대로 (잠정 — 세윤님 확인 전) */
.detail-hero[data-hero-instant] .line>span,.detail-hero[data-hero-instant]>img{transition:none!important}

/* 공통 대안(data-style=plain): 흰 글자+그림자 · 배경은 흐린 흑백 사본 위로 원본이 4초 동안 나타남(방법 B, 끝 밝기 .87 — TW-2 C12) */
.detail-hero[data-style=plain]{--hero-text:#fff;--hero-sub:#fff}
.detail-hero[data-style=plain] .detail-hero-text{text-shadow:0 1px 8px rgb(0 0 0/.35)}
.detail-hero[data-style=plain]>img{transform:scale(1.05)}
.detail-hero[data-style=plain]>img.detail-hero-base{filter:grayscale(1) blur(4px) brightness(.6)}
.detail-hero[data-style=plain]>img:not(.detail-hero-base){opacity:0;filter:brightness(.87)}
.detail-hero[data-style=plain][data-hero-ready]>img{transform:scale(1);transition:transform 4s ease-out,opacity 4s ease-out}
.detail-hero[data-style=plain][data-hero-ready]>img:not(.detail-hero-base){opacity:1}

@media (prefers-reduced-motion:reduce),(scripting:none){
  .detail-hero .line>span{transform:none!important;transition:none!important}
  .detail-hero>img{transform:none!important;transition:none!important}
  .detail-hero[data-style=plain]>img:not(.detail-hero-base){opacity:1}
}

/* 시술명 22px · 요약 14px (R4) — 원문 개별 지정 text.txt:2613, 크기 체계 예외 */
#content .detail-heading h1{font-size:var(--fs-22)}
#content .detail-heading>p:not(.eyebrow){font-size:var(--fs-14)}

/* 요약 카드 (TW-23) — 시간·마취·회복·주기 2×2. 칸이 홀수면 마지막 칸이 한 줄 전체. 값이 긴 언어는 줄바꿈 */
.detail-summary{margin:0 26px 24px}
.detail-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-card)}
.detail-summary-cell{min-width:0;padding:16px 14px;background:#fff}
.detail-summary-cell:first-child{border-top-left-radius:var(--radius-card)}
.detail-summary-cell:nth-child(2){border-top-right-radius:var(--radius-card)}
.detail-summary-cell:nth-child(odd):last-child{grid-column:1/-1}
.detail-summary-cell dt{margin:0 0 6px;font-size:var(--fs-12);color:var(--text-sub)}
.detail-summary-cell dd{margin:0;font-size:var(--fs-14);font-weight:600;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.detail-summary-cell dd.is-empty{font-weight:400;color:#999}
.detail-summary-note{margin:8px 0 0;font-size:var(--fs-13);line-height:var(--lh-body);color:var(--text-sub)}

/* 목차 탭 — 제자리(요약 카드 아래)에서 시작해 스크롤하면 이동 막대 밑에 붙는다. 켜진 탭은 가로로 밀어 보이게(detail.js) */
.detail-toc{position:sticky;top:calc(var(--gnb-height,0px) + var(--detail-nav-height));z-index:10;display:flex;gap:20px;height:var(--detail-toc-height);padding:0 26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;background:#fff;border-bottom:1px solid #efefef}
.detail-toc::-webkit-scrollbar{display:none}
.detail-toc a{display:flex;align-items:center;flex:none;font-size:var(--fs-14);color:#777;text-decoration:none;border-bottom:2px solid transparent}
.detail-toc a[aria-current=true]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* 벨리셀: 위쪽 세 부품은 여백 없이 꽉, 본문만 .section 여백 */
.vellicell-detail .detail-top{padding-bottom:24px}
.vellicell-detail .detail-body{padding-top:0}
/* 좌우 여백 26px (원문 10-1) — vellicell/site.css 의 .section{padding:32px 20px 48px} 를 상세 안에서만 덮는다 */
.vellicell-detail :is(.detail-top,.detail-products,.detail-body){padding-inline:26px}

/* ‹ 로 연 카테고리 메뉴 창: 직전 시술 이름을 브랜드 색으로 (category.js 가 aria-current 를 붙인다) */
#category [data-category-packages] a[aria-current=page]{color:var(--accent);font-weight:600}

/* TW-24 — 가격 옵션 카드(R1~R5) */
.detail-products .option-list{display:flex;flex-direction:column;gap:16px}
#content .detail-products .detail-price-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px;font-size:var(--fs-20);font-weight:700}
.detail-products .option-group{margin:8px 0 0;font-size:var(--fs-16)}
.option-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:139px;padding:20px;border:1px solid #EFEFEF;border-radius:4px;background:#fff}
.option-card h3{margin:0;font-size:var(--fs-16);font-weight:600;line-height:1.45;color:#1a1a1a;overflow-wrap:anywhere}
.option-tag{display:inline-block;margin-left:4px;padding:1px 6px;border:1px solid #cfcfcf;border-radius:3px;font-size:var(--fs-12);font-weight:500;line-height:1.5;color:#777;vertical-align:middle;white-space:nowrap}
.option-sub{margin:4px 0 0;font-size:var(--fs-13);line-height:var(--lh-body);color:#777;white-space:normal}
/* 담기 단추(42px)가 가격 줄(24px)보다 높다. 가격 칸을 단추 + 여유 4px 로 잡아 단추가 위 설명 끝줄을 덮지 않게 한다 */
.option-price{margin:0;padding-right:99px;display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-end;gap:4px 8px;min-height:46px}
.option-price del{font-size:var(--fs-13);color:#999}
.option-rate{font-size:var(--fs-16);font-weight:700;color:var(--accent)}
.option-price strong{font-size:var(--fs-16);font-weight:700;line-height:calc(var(--fs-16) + 8px)}
.option-price small{font-size:var(--fs-12);color:#999}
.option-add{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;box-sizing:border-box;width:87px;height:42px;padding:0 6px;border:1px solid var(--accent);border-radius:4px;color:var(--accent);font-size:var(--fs-13);font-weight:500;line-height:1.25;text-align:center;text-decoration:none}
.option-more{margin-top:0}
.detail-products .option-more>summary{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;margin-bottom:16px;border:1px solid #EFEFEF;border-radius:4px;font-size:var(--fs-14);font-weight:500;color:#535353;list-style:none;cursor:pointer}
.option-more>summary::-webkit-details-marker{display:none}
.option-events{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:16px;border-radius:4px;background:color-mix(in srgb,var(--accent) 10%,#fff);font-size:var(--fs-14);font-weight:600;color:var(--accent);text-decoration:none}
#content .option-card{scroll-margin-top:calc(var(--gnb-height,0px) + var(--detail-nav-height) + var(--detail-toc-height) + 8px)}
.option-card.is-arrived{background:color-mix(in srgb,var(--accent) 12%,#fff);transition:background-color .3s}
@media(prefers-reduced-motion:reduce){.option-card.is-arrived{transition:none}}

/* TW-24 — 소개·효과·원리·특징·자유 구좌·주의사항·WHY (R6~R11) */
.detail-body .detail-section{padding:32px 0;border-bottom:0}
.detail-section h2{font-size:var(--fs-20);margin:0 0 16px}
.detail-lead{margin:0 0 16px;font-size:var(--fs-14);line-height:var(--lh-body);color:#535353}
.detail-object{display:grid;place-items:center;overflow:hidden;aspect-ratio:338/190;max-width:100%;background:#F2F2F2;border-radius:4px;margin:0 0 16px}
.detail-object img{width:100%;height:100%;object-fit:contain}
.detail-usp{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.detail-usp li{position:relative;padding-left:24px;font-size:var(--fs-14);line-height:var(--lh-body)}
.detail-usp li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.detail-no{display:block;font-size:var(--fs-13);color:#999;line-height:1.5}
.detail-effect-list,.detail-cards{list-style:none;margin:0;padding:0}
.detail-effect-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid #EEE}
.detail-effect-list li:first-child{border-top:0}
.detail-effect-list strong{font-size:var(--fs-15);/* 원문 개별 지정 text.txt:2853 (번호 13 · 제목 15) */line-height:1.5}
.detail-effect-list p{margin:2px 0 0;font-size:var(--fs-13);color:#777}
.detail-card{padding:20px 0;border-top:1px solid #EEE}
.detail-card:first-child{border-top:0;padding-top:0}
.detail-card h3{margin:4px 0 8px;font-size:var(--fs-16);font-weight:600;line-height:1.5}
.detail-card p{margin:0 0 12px;font-size:var(--fs-14);line-height:1.6;color:#535353}
.detail-card .detail-object{margin:12px 0 0}
.detail-table-wrap{overflow-x:auto;margin-top:16px}
.detail-table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
/* V5 시안 대조(10-28) detail 1: 390 에서 5열 표 칸이 낱말 중간에서 끊기던 것 — 한글은 낱말 단위로, 아주 긴 토막만 꺾는다 */
.detail-table th,.detail-table td{padding:10px 12px;border:1px solid #EEE;text-align:left;line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
.detail-table th{background:#F7F7F7;font-weight:600}
/* renewal-v5 10-29 detail 182: 390 에서 5열 표가 래퍼(338)보다 6~14px 넓어 가로 스크롤 — 좁은 화면만 칸 좌우 여백 12→8 */
@media(max-width:640px){.detail-table th,.detail-table td{padding:10px 8px}}
.detail-table .is-current{background:color-mix(in srgb,var(--accent) 10%,#fff);font-weight:600}
/* 자유 구좌 본문(병원이 넣는 굵은 글자·표 HTML). 옛 글(태그 없음)은 줄바꿈 그대로 · 표는 칸 안에서만 가로로 스크롤 */
.detail-free-lead{white-space:pre-line}
.detail-lead b,.detail-lead strong{font-weight:600;color:#222}
.detail-rich{overflow-wrap:break-word}
.detail-rich>:first-child{margin-top:0}
.detail-rich p{margin:0 0 10px}
.detail-rich :is(ul,ol){margin:0 0 10px;padding-left:20px}
.detail-rich .rich-table{overflow-x:auto;max-width:100%;margin:12px 0;-webkit-overflow-scrolling:touch}
/* 모바일: 떠 있는 상담 패널(약 88px)이 표 끝 열을 가리지 않게 오른쪽을 비운다 */
@media(max-width:480px){.detail-rich .rich-table{padding-right:88px}}
.detail-rich table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.detail-rich :is(th,td){padding:10px 12px;border:1px solid #EEE;text-align:left;line-height:1.5;word-break:keep-all;overflow-wrap:break-word;vertical-align:top}
.detail-rich th{background:#F7F7F7;font-weight:600}
@media(max-width:640px){.detail-rich :is(th,td){padding:10px 8px}}
.detail-caution-note{margin:0 0 12px;font-size:var(--fs-14);line-height:1.6;white-space:normal}
.detail-caution{margin:0;padding-left:18px;display:grid;gap:8px;font-size:var(--fs-14);line-height:1.6;color:#535353}
.detail-caution small{display:block;font-size:var(--fs-12);color:#999}
.detail-why-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:8px}
.detail-why-card{flex:0 0 85%;scroll-snap-align:start;min-width:0}
.detail-why-image{aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#F2F2F2;margin-bottom:12px}
.detail-why-image img{width:100%;height:100%;object-fit:cover}
.detail-why-card h3{margin:0 0 6px;font-size:var(--fs-16)}
.detail-why-card p{margin:0;font-size:var(--fs-14);color:#535353}
.detail-section .public-faq{padding:16px 0;border-bottom:1px solid #EEE}

/* TW-25 B — 함께 많이 받는 시술(R4) · 8px 띠(R5) · 이 시술이 포함된 이벤트(R7·R8). 세 브랜드 공용 */
.detail-related-signatures h2,.detail-related-events h2{margin:0 0 12px}
.signature-rail{display:flex;gap:8px;margin:0;padding:0 0 4px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.signature-card{flex:0 0 calc((100% - 8px)/1.5);min-width:0;scroll-snap-align:start}
.signature-card a{display:block;color:inherit;text-decoration:none}
.signature-thumb{display:block;aspect-ratio:2/1;overflow:hidden;border-radius:var(--radius-thumb,4px);background:var(--surface-muted,#f2f2f2)}
.signature-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.signature-card strong{display:block;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-14);font-weight:600}
.signature-price{display:block;margin-top:2px;font-size:var(--fs-13);color:var(--accent);font-weight:700}
.detail-related-band{height:8px;margin:24px 0;background:var(--surface-muted,#f2f2f2)}
.related-event+.related-event{margin-top:28px}
.related-event-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.related-event-head h3{min-width:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-16)}
.related-event-dday{flex:none;padding:2px 8px;border-radius:var(--radius-pill,999px);background:var(--accent-tint,#f5f5f5);color:var(--accent);font-size:var(--fs-12);font-weight:600}
.related-event-link{flex:none;margin-left:auto;color:#535353;font-size:var(--fs-13);text-decoration:none}
.related-event-boxes{display:grid;gap:8px}
.detail-related-events .price-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;height:112px;padding:12px 16px;overflow:hidden;box-sizing:border-box;border:1px solid var(--line,#c8c8c8);border-radius:4px;background:#fff}
.detail-related-events .price-row[hidden]{display:none}
.detail-related-events .price-row>div{min-width:0}
.detail-related-events .price-row>div+div{display:grid;justify-items:end;gap:4px}
.detail-related-events .price-row h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 4px;font-size:var(--fs-14);line-height:1.4}
.detail-related-events .price-row p{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:var(--fs-12);color:#7a7a7a}
.detail-related-events .price-row p.related-event-badges{display:flex;gap:4px;margin-top:4px;color:var(--accent)}
.related-event-chip{padding:1px 8px;border-radius:var(--radius-pill,999px);background:var(--accent-tint,#f5f5f5);font-size:var(--fs-12);white-space:nowrap}
.detail-related-events .price-row del{font-size:var(--fs-12)}
.detail-related-events .add-treatment{display:inline-block;padding:6px 12px;border-radius:4px;font-size:var(--fs-13);white-space:nowrap}
.related-event-more{display:block;width:100%;margin-top:8px;padding:10px;border:1px solid var(--line,#c8c8c8);border-radius:4px;background:#fff;color:inherit;font-size:var(--fs-14);cursor:pointer}

/* 줄 간격 (verify detail-a H) — 원문 10-1 «본문 1.6 / 제목 1.4». 상세 안에서만 덮는다(전역 글자 규격은 clinic/site.css 몫). 히어로 큰 글자·가격 줄은 그대로 */
#content :is(.detail-heading,.detail-products,.detail-section) :is(h1,h2,h3,h4){line-height:1.4}
#content :is(.detail-heading,.detail-summary,.detail-section) :is(p,li):not(.option-price,.related-event-badges){line-height:1.6}
#content .detail-summary-cell dd{line-height:1.6}
#content .detail-products .option-sub{line-height:1.6}

/* 시술 상세 아래 구좌 모양 (verify detail-b 4·5·6·7·8) — 상세 안에서만 덮는다(전역 .bna-*·.related-column-*·.public-faq 는 clinic·vellicell site.css 몫) */
/* 10-10 전후 사진 — 카드 틀 + 다음 카드 살짝 보임, BEFORE/AFTER 글자는 사진 왼쪽 아래 */
.bna-detail .bna-slider{gap:8px}
.bna-detail .bna-slide{box-sizing:border-box;flex:0 0 88%;padding:12px;border:1px solid #EEE;border-radius:8px;background:#fff}
.bna-detail .bna-label{top:auto;bottom:8px;left:8px;padding:0;background:none;color:#fff;text-shadow:0 1px 3px rgb(0 0 0 / 55%)}
/* 10-12 WHY — 제목 «WHY ○○» 은 작은 회색 꼬리표, 문장 제목 20px 굵게, 카드는 옅은 바탕 + 번호 */
#content .detail-why>h2{margin:0 0 8px;font-size:var(--fs-13);font-weight:500;color:#7a7a7a}
#content .detail-section.detail-why p.detail-why-title{margin:0 0 16px;font-size:var(--fs-20);font-weight:700;line-height:var(--lh-title);color:#222}
#content .detail-why-card{box-sizing:border-box;padding:16px;border-radius:8px;background:#F7F7F7}
#content .detail-why-card .detail-no{display:block;margin:12px 0 4px;font-size:var(--fs-14);font-weight:700;color:var(--accent)}
.detail-why-card h3{font-size:var(--fs-16)}
/* 10-13 FAQ — «Q» 와 오른쪽 꺾쇠(열리면 위로), 기본 삼각형 없음, 답은 옅은 회색 상자 */
.detail-section .public-faq summary{display:flex;align-items:center;gap:8px;list-style:none;font-size:var(--fs-16);font-weight:600;line-height:var(--lh-title)}
.detail-section .public-faq summary::-webkit-details-marker{display:none}
.detail-section .public-faq summary::before{content:"Q";flex:none;font-weight:700;color:var(--accent)}
.detail-section .public-faq summary::after{content:"";flex:none;box-sizing:border-box;width:8px;height:8px;margin:0 4px 0 auto;border:solid #535353;border-width:1.25px 1.25px 0 0;transform:rotate(45deg);transition:transform .2s}
.detail-section .public-faq[open] summary::after{transform:rotate(-45deg)}
.detail-section .public-faq p{margin:12px 0 0;padding:16px;border-radius:4px;background:#F7F7F7;font-size:var(--fs-14);color:#535353;white-space:pre-line}
/* ↑ pre-line: 추천 대상에서 옮긴 FAQ 답(«· 줄» 한 줄씩, 지휘 b94d76be)·글로 쓴 답의 줄바꿈을 그대로 보인다 */
@media(prefers-reduced-motion:reduce){.detail-section .public-faq summary::after{transition:none}}
/* 10-14 관련 게시글 — 카드마다 1px 테두리 */
#content #detail-columns .related-column-list{gap:8px}
#content #detail-columns .related-column-card{padding:12px;border:1px solid #EEE;border-radius:4px}

/* TW-49 (DIR-70 — DIR-67 개정 · DIR-100 B안 · DIR-103) PC(1280 이상) 진료 항목 상세 — 위에 분류 경로 한 줄(+ 전체 시술 판), 그 아래 두 칸:
   왼쪽 칸(.dpl-left) = 사진·제목·요약(.dpl-main) + PC 목차·아래 구좌 전부(.dpl-rest) — 쪽과 함께 내려감 / 오른쪽 칸 = «시술 목록» — 머리글 아래 붙고 길면 그 안에서만 굴러감. 세 브랜드 공용.
   1279 이하: 분류 줄·둥근 ‹·PC 목차 사본은 숨고, 묶음(.dpl·.dpl-left·.dpl-main·.dpl-rest)은 상자를 만들지 않아(display:contents) 순서·고정이 전과 같다.
   경로 줄은 흰 바탕 + 아래 회색 선, 브랜드색은 판 안 지금 위치 표시에만(tokens.css 머리 규칙). */
#content>.dpc,#content .dpl-back,#content .dpl-toc{display:none}
.dpl,.dpl-left,.dpl-main,.dpl-rest{display:contents}
@media(min-width:1280px){
 /* 옛 이동 막대가 숨으니 고정 쌓기는 GNB → 목차 탭 (구좌 앵커 멈춤 높이도 같이 줄어든다). 목차는 «가격» 탭이 빠진 PC 사본이 맡는다 */
 #content:has(>.dpl){--detail-nav-height:0px;--dpl-edge:var(--gutter)}
 #content:has(>.dpl)>:is(.detail-nav,.dp-nav,.dp-dim){display:none}
 #content>.dpl>.dpl-left>#detail-toc{display:none}
 #content .dpl-toc{display:flex;top:var(--gnb-height,0px)}
 /* DIR-69 — 데이뷰 목차는 모바일에서 양 끝 벌림(space-between)이라 PC 넓은 칸에선 소개·FAQ 가 양 끝에 붙는다 → PC 사본만 왼쪽부터 36px 간격 */
 #content .dpl-toc.dp-toc{justify-content:flex-start;gap:0 36px}
 #content:has(>.dpl) .dp-sect{scroll-margin-top:calc(var(--gnb-height,0px) + 44px)}
 #content:has(>.dpl) .dp-oc{scroll-margin-top:calc(var(--gnb-height,0px) + 56px)}

 /* B안(DIR-100) 분류 메뉴 — 한 줄 경로 «시술안내 › 2차 ▾ › 3차 ▾ › 시술 ▾» + 오른쪽 «전체 시술 보기» 판. 글자 순서는 DIR-96(머리 탭 > 2차 > 3차 > 시술 링크).
    판·작은 목록은 줄 아래로 떠서 본문을 덮는다. 쌓기: 판(9) < 머리글(12) — PC 목차 사본(모바일 목차와 같은 z 27)은 8 로 내려 판 밑으로 — 머리글·상담 플로팅바(21)보다도 아래(73e6ab8b 쌓기 순서와 같은 방향).
    판이 첫 화면보다 길면 판 안에서만 굴린다(max-height + overflow) */
 #content>.dpc{display:block;position:relative;z-index:9;margin-bottom:28px;padding:0 var(--dpl-edge);background:#fff;border-bottom:1px solid #e9e9e9}
 #content .dpl-toc{z-index:8}
 #content .dpc-bar{display:flex;align-items:center;gap:0 10px;height:60px;font-size:var(--fs-nav-2);color:#1a1a1a}
 #content .dpc-root{flex:none;color:#777;text-decoration:none}
 #content .dpc-root:hover{color:#1a1a1a}
 #content .dpc-sep{flex:none;color:#bbb}
 #content .dpc-lv{position:relative;flex:none}
 #content .dpc-dd,#content .dpc-all{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 4px;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
 /* 굵기(세윤님 11-06 «너무 볼드» · 크기 그대로): 줄 2차 500 · 3차·시술 400 / 판 2차 600 · 3차 500 · 시술 링크 400(지금 위치만 500 + 밑줄) */
 #content .dpc-dd{font-weight:500}
 #content :is([data-dpc-open=dpc-l3],.dpc-dd-last){font-weight:400}
 #content .dpc-dd svg,#content .dpc-all svg{width:14px;height:14px;transition:transform .2s}
 #content .dpc-dd[aria-expanded=true] svg,#content .dpc-all[aria-expanded=true] svg{transform:rotate(180deg)}
 #content .dpc-all{margin-left:auto;padding:0 14px;border:1px solid #d9d9d9;border-radius:999px;font-size:var(--fs-nav-3);font-weight:500}
 #content .dpc-all:hover,#content .dpc-all[aria-expanded=true]{border-color:#1a1a1a}
 #content .dpc-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;max-height:min(420px,calc(100vh - var(--gnb-height,0px) - 80px));overflow-y:auto;overscroll-behavior:contain;padding:8px 0;background:#fff;border:1px solid #e6e6e6;border-radius:8px;box-shadow:0 10px 24px rgb(0 0 0/.08)}
 #content .dpc-drop[hidden],#content .dpc-mega[hidden]{display:none}
 #content .dpc-drop a{display:block;padding:9px 18px;font-size:var(--fs-nav-3);color:#555;text-decoration:none;white-space:nowrap}
 #content .dpc-drop a:hover{background:#f6f6f6;color:#1a1a1a}
 #content .dpc-drop a[aria-current]{color:#1a1a1a;font-weight:500}
 #content .dpc-mega{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--gnb-height,0px) - 60px - 24px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;box-shadow:0 16px 28px rgb(0 0 0/.08)}
 #content .dpc-mega-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px 32px;padding:28px var(--dpl-edge) 32px}
 #content .dpc-col h3{margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #1a1a1a;font-size:var(--fs-nav-2);font-weight:600;color:#1a1a1a}
 #content .dpc-col h4{margin:14px 0 6px;font-size:var(--fs-nav-3);font-weight:500;color:#888}
 #content .dpc-col h4.is-here{color:#1a1a1a}
 #content .dpc-col.is-here h3{border-bottom-color:var(--accent)}
 #content .dpc-col ul{margin:0;padding:0;list-style:none}
 #content .dpc-col li a{display:block;padding:4px 0;font-size:var(--fs-nav-4);color:#555;text-decoration:none}
 #content .dpc-col li a:hover{color:#1a1a1a;text-decoration:underline}
 #content .dpc-col li a[aria-current]{color:#1a1a1a;font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

 /* DIR-106(세윤님 11-06 «히어로 이미지에 뒤로가기 버튼 … PC에서는 빼도 될것같아»): PC 사진 왼쪽 위 둥근 ‹ 는 숨긴다 — PC 는 위 분류 줄 «전체 시술 보기»가 같은 일을 한다.
    조각(detail_back_pc.html)은 그대로 그려지고 1279 이하는 위 235줄에서 원래 숨는다. 여는 동작(detail.js data-detail-back)은 문서 전체 클릭 위임이라 단추가 없어도 오류가 나지 않는다 */
 #content .dpl-back{display:none}

 /* «시술 목록»이 있으면 두 칸 — 폭 1200(양옆 최소 120: 오른쪽 아래 상담 플로팅바와 겹치지 않게). 없으면(옵션 0개) 지금처럼 폭 880 한 칸(쪽 스크롤).
    DIR-103(세윤님 11-06 «시술 목록을 제외한 모든영역에서 스크롤시 상세페이지 스크롤이 우선 … 다 내려오면 푸터»): 왼쪽 본문은 제 스크롤 상자를 두지 않고 쪽(window)과 함께 내려간다.
    그래서 맨 왼쪽·맨 오른쪽 빈 곳·본문 어디서 굴려도 본문이 먼저 내려가고, 본문 끝에서만 바닥글이 나온다. 휠 가로채기 JS 는 쓰지 않는다.
    틀 = 격자 두 칸(왼쪽 남는 폭 · 오른쪽 400 · 사이 48). 오른쪽 «시술 목록»은 왼쪽 두 줄(.dpl-main·.dpl-rest)을 걸쳐 서고, 머리글 아래에 붙는다(sticky).
    목록이 화면보다 길면 그 안에서만 따로 굴러간다(세윤님 14:22 «별개 스크롤» 유지 · overscroll-behavior:contain 으로 끝에서 쪽으로 넘기지 않음) */
 #content:has(>.dpl #detail-price){max-width:none;--dpl-edge:max(120px,(100% - var(--page-wide,1200px))/2)}
 #content>.dpl:has(#detail-price){display:block;margin:0 var(--dpl-edge)}
 #content>.dpl>.dpl-left:has(>#detail-price){display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto 1fr;column-gap:48px;align-items:start}
 #content>.dpl>.dpl-left:has(>#detail-price)>:is(.dpl-main,.dpl-rest){display:block;min-width:0;grid-column:1}
 #content>.dpl>.dpl-left:has(>#detail-price)>.dpl-main{grid-row:1}
 #content>.dpl>.dpl-left:has(>#detail-price)>.dpl-rest{grid-row:2}
 #content>.dpl:has(#detail-price) .dp-hero:not(.dp-hero-video){height:auto;aspect-ratio:390/272}
 /* 목차 탭·앵커 멈춤 높이는 쪽 기준 그대로 — 위 242·245·246줄(GNB 아래 + 목차 44) */
 #content>.dpl>.dpl-left>#detail-price{grid-column:2;grid-row:1/3;position:sticky;top:calc(var(--gnb-height,0px) + 20px);max-height:calc(100vh - var(--gnb-height,0px) - 40px);box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:0 8px 0 0;border-top:0;scrollbar-width:thin}
 /* DIR-103 «옵션 N개 더보기 PC에서는 빼줘»: PC 는 단추를 숨기고 뒤쪽 옵션(data-dp-extra)도 처음부터 다 보인다. 휴대폰(1279 이하)은 단추·접힘 그대로.
    daybeau/detail.css:5 «.dp-page [hidden]{display:none!important}» 를 이겨야 해서 !important + 더 높은 선택자(id 2개) */
 #content>.dpl:has(#detail-price) .dp-omore{display:none}
 #content>.dpl:has(#detail-price) [data-dp-extra][hidden]{display:block!important}
}

/* DIR-97 — PC(1280 이상) 상세: 히어로·제목·«시술 목록» 글자를 사진 폭에 비례시킨다 (참고 화면 1274폭 · 사진 600px 실측 비율).
   --dpl-img = 위 틀 계산과 같은 식의 왼쪽 사진 폭: 1440 이상 752px · 1280 에서 592px. 글자 = 사진 폭 × 비율, 아래 한도는 PC 글자 단계(tokens.css).
   휴대폰(1279 이하)은 이 블록이 안 읽혀 그대로. 머리글은 한글 분류명·넓은 자간 그대로(DIR-98) — 크기만 비율로. */
@media(min-width:1280px){
 #content:has(>.dpl #detail-price){--dpl-img:calc(min(100vw - 240px, var(--page-wide,1200px)) - 448px)}
 #content>.dpl:has(#detail-price) .dp-hero-tx small{font-size:max(var(--fs-10),calc(var(--dpl-img) * .0203))}
 /* 큰 제목 위 간격: 사진 폭 비율 + .14em — 제목 줄 높이(1.02)가 글꼴 높이보다 작아 위 작은 글과 글자 상자가 5.4px 까지 붙던 것(1440 «턱 보톡스» 실측)을 12px 이상으로. 글자 크기는 그대로 */
 #content>.dpl:has(#detail-price) .dp-hero-tx b{font-size:max(var(--fs-38),calc(var(--dpl-img) * .1067));margin-top:calc(var(--dpl-img) * .0165 + .14em)}
 #content>.dpl:has(#detail-price) .dp-title h1{font-size:max(var(--fs-22),calc(var(--dpl-img) * .0463))}
 #content>.dpl:has(#detail-price) .dp-title p{font-size:max(var(--fs-14),calc(var(--dpl-img) * .0248))}
 #content>.dpl:has(#detail-price) .dp-csh{font-size:max(20px,calc(var(--dpl-img) * .0317))}
 #content>.dpl:has(#detail-price) .dp-oc>b{font-size:max(var(--fs-16),calc(var(--dpl-img) * .025))}
 #content>.dpl:has(#detail-price) .dp-op s{font-size:max(var(--fs-12),calc(var(--dpl-img) * .0222))}
 #content>.dpl:has(#detail-price) .dp-pc{font-size:max(var(--fs-14),calc(var(--dpl-img) * .0238))}
 #content>.dpl:has(#detail-price) .dp-op em{font-size:max(var(--fs-16),calc(var(--dpl-img) * .0308))}
 #content>.dpl:has(#detail-price) .dp-vat{font-size:max(var(--fs-11),calc(var(--dpl-img) * .02))}
 #content>.dpl:has(#detail-price) .dp-add{font-size:max(var(--fs-14),calc(var(--dpl-img) * .0222))}
}