/* 더끌림치과 · 더끌림소아치과 테마 (2026-10-03 수정사항). 레이아웃 CSS 뒤에 로드.
   --tk-point 는 layouts/{adult,m_adult}.html 의 <style> 에서 브랜치별로 지정 */
:root { --tk-bg: #E5DEDA; --tk-text: #101010; }

/* 페이지 CSS(adult_style 등)가 body 안에서 이 파일 뒤에 로드됨 → 모든 선언 !important */
/* 1. 네비게이션: 스크롤해도 숨기지 않고 따라옴 */
.header.hide { transform: none !important; }

/* 2. 네비게이션 글씨 기본색 블랙 (투명 헤더 상태 포함) */
.header .header-inner .mid-head > a,
.header .header-inner .right-head .title,
.header.bg .header-inner .mid-head a { color: var(--tk-text) !important; }

/* 3. 스크롤 시 헤더 배경 #E5DEDA, 호버/활성 = 브랜드 청록 */
.header.bg { background: var(--tk-bg) !important; backdrop-filter: none !important; }
.header.bg .header-inner .right-head { background: rgba(255, 255, 255, 0.55) !important; }
.header .header-inner .mid-head > a:hover,
.header.bg .header-inner .mid-head a:hover,
.header .header-inner .mid-head > a.active,
.header .header-inner .mid-head .re-sub-menu a:hover,
.header .header-inner .mid-head .re-sub-menu a.active { color: var(--tk-point) !important; }

/* 4. 회색 카드 박스 → #E5DEDA */
.section3 .three-wrap > div > div:not(.hover),
.section3 .flip-slide .swiper-slide .default,
.fixed-plus > div,
.section-link .link-wrap a,
.sub-click-wrap .inner .m-card-slide .swiper-slide .text-box,
.sub-click-wrap .inner .m-card-slide-2 .swiper-slide .text-box,
.sub-click-wrap .inner .order-wrap ul li.text,
.sub-click-wrap .inner .three-boan-wrap > div,
.sub-click-wrap .inner .three-wrap > div .text-box,
.sub-click-wrap .inner .time-loca-wrap .flex .left-box > div,
.open-wonjang-wrap .inner .open-wonjang-slide .swiper-slide .bg,
.sub-click-wrap .inner .m-card-slide-3 .swiper-slide .text-box,
.sub-click-wrap .seo-click-wrap span.font-body1:not(.active),
.tk-treat li { background: var(--tk-bg) !important; }
.tk-treat li { padding: 24px !important; border-radius: 12px !important; }
@media (max-width: 480px) {  /* 휴대폰: 2열이면 카드 안쪽 폭이 ~90px 라 한 줄 4~5글자 → 1열 가로 카드 */
  .tk-treat { grid-template-columns: 1fr !important; gap: 12px !important; }
  .tk-treat li { display: grid !important; grid-template-columns: 84px 1fr; column-gap: 16px; align-items: center; padding: 18px !important; }
  .tk-treat li img { grid-row: span 2; }
  .tk-treat li h3 { margin: 0 0 4px !important; font-size: 20px !important; }
  .tk-treat li p { font-size: 15px !important; }
}
/* 6개 카드: auto-fit 이면 768px 에서 4+2(아랫줄 반이 빔) → 2열(3줄) / 넓으면 3열(2줄) 로 고정 */
@media (min-width: 481px) { .tk-treat { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 660px) { .tk-treat { grid-template-columns: repeat(3, 1fr) !important; } }

/* 5. SPECIAL CLINIC 섹션 배경 (성인 PC s11 / 소아 PC s10 / 모바일) */
.section11:has(.img-text-wrap), .section10:has(.img-text-wrap),
.section9:has(.img-text-wrap), .section8:has(.img-text-wrap) { background: var(--tk-bg) !important; }

/* 6. 푸터 배경 */
.footer { background: var(--tk-bg) !important; }

/* 7. 본문 글씨 진하게 (회색 계열 → 블랙) */
.color-gray3, .color-gray4, .color-gray5, .color-39 { color: var(--tk-text) !important; }
.footer .footer-inner .right-box .time-wrap .time-box ul li,
.footer .copy-box span, .footer .loca-box .desc { color: var(--tk-text) !important; }

/* 브랜드 포인트 (레이아웃 원본 파랑/코랄 → 더끌림 청록/하늘) */
.color-p-brand, .section10 .text-wrap .title span, .section9 .bete-wrap .text-box .title span,
.footer .footer-inner .right-box .time-wrap .time-box .title { color: var(--tk-point) !important; }

/* 7-1. 히어로(메인 슬라이드 · 서브 헤더) 흰 글씨 → 블랙: 밝은 원내 사진 위 가독성 */
.sub-header-wrap .color-white, .sub-header-wrap .text-box .sub-title,
.section1 .main-slide-1 .text-box .color-white,
.section1 .main-slide-1 .text-box .color-white * { color: var(--tk-text) !important; }

/* 7-2. 사진 위 블랙 글씨 가독성: 글씨 쪽에 밝은 스크림 (서브 상단 = 아래쪽 글씨, SPECIAL CLINIC 카드 = 위쪽 글씨) */
.sub-header-wrap .img-box::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background: linear-gradient(to top, rgba(255,255,255,.88) 0, rgba(255,255,255,.7) 28%, rgba(255,255,255,0) 58%) !important; }
.img-text-wrap .img-box::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background: linear-gradient(to bottom, rgba(255,255,255,.85) 0, rgba(255,255,255,.5) 25%, rgba(255,255,255,0) 45%) !important; }
.img-text-wrap .text-box .color-white, .img-text-wrap .text-box .sub-title, .img-text-wrap .text-box .title { color: var(--tk-text) !important; text-shadow: none !important; }
/* 모바일 SPECIAL CLINIC 카드(성인 s9 · 소아 s8)는 글씨가 아래 → 스크림 아래쪽 */
.section8 .img-text-wrap .img-box::after, .section9 .img-text-wrap .img-box::after {
  background: linear-gradient(to top, rgba(255,255,255,.9) 0, rgba(255,255,255,.65) 35%, rgba(255,255,255,0) 65%) !important; }

/* 7-3. 메인 슬라이드 히어로: 글씨 블록 뒤 밝은 스크림 (PC = 가운데 타원, 모바일 = 아래에서 위로) */
.section1 .main-slide-1 .swiper-slide .img-box::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background: radial-gradient(ellipse 44% 30% at 50% 48%, rgba(255,255,255,.85) 0, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%) !important; }
.section1 .main-slide-1 .swiper-slide:has(.text-box.kr, .text-box.en) .img-box::after {
  background: linear-gradient(to top, rgba(255,255,255,.94) 0, rgba(255,255,255,.8) 34%, rgba(255,255,255,.35) 52%, rgba(255,255,255,0) 64%) !important; }
.section1 .main-slide-1 .hash-box span { color: var(--tk-text) !important; background: rgba(255,255,255,.82) !important; }

/* 7-4. 사진 위 가운데 글씨(refresh-wrap: 서브 본문 배경 섹션 · 팝업 하단) 흰 글씨 → 블랙 + 가운데 밝은 스크림 */
.refresh-wrap .img-box { position: relative !important; }
.refresh-wrap .img-box::after, .content-inner .refresh-wrap[class*="bg-"]::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background: radial-gradient(ellipse 62% 48% at 50% 50%, rgba(255,255,255,.9) 0, rgba(255,255,255,.7) 55%, rgba(255,255,255,.3) 100%) !important; }
.refresh-wrap .text-box, .refresh-wrap .abs-text-box { z-index: 2 !important; }
.refresh-wrap .color-white, .refresh-wrap .color-gray1 { color: var(--tk-text) !important; }
.refresh-wrap .abs-logo { z-index: 2 !important; }
.refresh-wrap .abs-logo img { filter: brightness(0) !important; }

/* 온라인 상담 폼 제출 버튼 (g5 스킨 기본 파랑 → 브랜드) */
.btn_submit, input.btn_submit { background: var(--tk-point) !important; border-color: var(--tk-point) !important; }

/* 성인 메인 '진료과목' 카드: 일러스트를 오른쪽에 통째로 둔 밝은 카드(v2_treat.py) → 글씨 블랙, 설명은 왼쪽 영역만 */
.section6 .main-slide-3 .swiper-slide .text-box .color-white { color: var(--tk-text) !important; }
.section6 .main-slide-3 .swiper-slide .text-box .sub-title .num { color: var(--tk-point) !important; }
.section6 .main-slide-3 .swiper-slide .text-box .desc { max-width: 270px !important; word-break: keep-all; }
/* 양옆(비활성) 카드도 글씨 표시 (레이아웃 원본은 가운데 카드만 opacity 1) */
.section6 .main-slide-3 .swiper-slide .text-box { opacity: 1 !important; }
.section6 .main-slide-3 .swiper-slide .text-box .title-link-box { max-width: 280px !important; }

/* 메뉴 줄바꿈 방지 (로고가 넓어져 1440px 소아 메뉴가 두 줄로 꺾이던 문제) */
.header .header-inner .mid-head > a { white-space: nowrap !important; }

/* 헤더 로고: 현재 병원(컬러) | 다른 병원(무채색 · 반투명, 그 병원 메인 링크). 마크업 = v2_logos.py */
.tk-logos { display: flex !important; align-items: center !important; gap: 14px !important; flex-shrink: 0 !important; }
.tk-logos .tk-logo { display: block !important; line-height: 0 !important; }
.tk-logos .tk-logo img { display: block !important; width: auto !important; max-width: none !important; }
.tk-logos .is-on img { height: 30px !important; }
.tk-logos .is-off img { height: 22px !important; filter: grayscale(1) brightness(.55) !important; opacity: .6 !important; transition: filter .2s, opacity .2s; }
.tk-logos .is-off:hover img, .tk-logos .is-off:focus-visible img { filter: none !important; opacity: 1 !important; }
.tk-logo-bar { display: block !important; width: 1px !important; height: 18px !important; background: rgba(16,16,16,.25) !important; }
@media (max-width: 1024px) {
  .tk-logos { gap: 10px !important; }
  .tk-logos .is-on img { height: 26px !important; }
  .tk-logos .is-off img { height: 17px !important; }
  .tk-logo-bar { height: 16px !important; }
}

/* 성인 메인 하단 FAQ (partials/adult_faq.html) */
.tk-faq { padding: 200px 80px 160px; font-family: SUIT, sans-serif; word-break: keep-all; }
.tk-faq-inner { max-width: 1100px; margin: 0 auto; }
.tk-faq .text-wrap .desc { margin-top: 24px; }
.tk-faq-list { margin-top: 70px; border-top: 2px solid var(--tk-text); text-align: left; }
.tk-faq-list details { border-bottom: 1px solid rgba(16,16,16,.12); }
.tk-faq-list summary { list-style: none; cursor: pointer; display: flex; gap: 18px; align-items: center; padding: 28px 10px; font-size: 20px; font-weight: 600; color: var(--tk-text); }
.tk-faq-list summary::-webkit-details-marker { display: none; }
.tk-faq-list summary::before { content: "Q"; font-size: 26px; font-weight: 700; color: var(--tk-point); flex: none; }
.tk-faq-list summary::after { content: "+"; margin-left: auto; font-size: 28px; font-weight: 300; color: rgba(16,16,16,.5); transition: transform .3s; }
.tk-faq-list details[open] summary::after { transform: rotate(45deg); }
.tk-faq-list .answer { padding: 0 10px 30px 54px; font-size: 17px; line-height: 1.7; color: var(--tk-text); }
.tk-faq-list .answer p + p { margin-top: 10px; }
.tk-faq-list .extra { display: none; }
.tk-faq.all .tk-faq-list .extra { display: block; }
.tk-faq-more { font-family: inherit; display: block; margin: 50px auto 0; height: 54px; padding: 0 44px; border: 1px solid var(--tk-text); border-radius: 30px; background: transparent; font-size: 16px; color: var(--tk-text); cursor: pointer; }
.tk-faq-more:hover { background: var(--tk-text); color: #fff; }
@media (max-width: 1024px) {
  .tk-faq { padding: 100px 20px 80px; }
  .tk-faq-list { margin-top: 40px; }
  .tk-faq-list summary { font-size: 16px; padding: 20px 4px; gap: 12px; }
  .tk-faq-list summary::before { font-size: 20px; }
  .tk-faq-list .answer { padding: 0 4px 22px 30px; font-size: 15px; }
}

/* + 버튼 팝업(sub-click-wrap) → 섹션 아래 인라인 본문 (2026-10-07 클라이언트: "+ 를 사람들이 누를까요?") */
.sub-click-wrap.is-inline { position: static; width: auto; height: auto; background: none; z-index: auto; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
.sub-click-wrap.is-inline .inner { position: static; width: 1400px; max-width: 100%; height: auto; margin: 0 auto; padding: 100px 0 0; transform: none; transition: none; overflow: visible; background: none; }
/* 메인 대표원장 카드 + 팝업 → 의료진 소개 아래 인라인 약력 */
.open-wonjang-wrap.is-inline { position: static; width: auto; height: auto; background: none; z-index: auto; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
.open-wonjang-wrap.is-inline .inner { position: static; width: 1400px; max-width: 100%; height: auto; margin: 0 auto; padding-top: 120px; transform: none; transition: none; overflow: hidden; }
@media (max-width: 1024px) { .open-wonjang-wrap.is-inline .inner { width: 100%; padding-top: 60px; } }
/* 팝업용 overscroll-behavior: contain 이 인라인 .inner(overflow: hidden = 스크롤 컨테이너)에 남으면 모바일 터치 스크롤이 페이지로 안 넘어가 멈춘다 */
.sub-click-wrap.is-inline .inner, .open-wonjang-wrap.is-inline .inner { overscroll-behavior: auto; }
/* 인라인 본문용 카드 변형: 설명 문단이 붙는 three-boan-wrap(높이 자동), 2열 */
.sub-click-wrap .inner .three-boan-wrap.tk-auto { align-items: stretch; }
.sub-click-wrap .inner .three-boan-wrap.tk-auto > div { height: auto; }
.sub-click-wrap .inner .three-boan-wrap.tk-two > div { width: 610px; }
.sub-click-wrap .inner .three-boan-wrap.tk-two { flex-wrap: wrap; row-gap: 20px; }
.sub-click-wrap .inner .three-boan-wrap.mt-120 { margin-top: 120px; }
.sub-click-wrap .inner .three-boan-wrap + .three-boan-wrap { margin-top: 20px; }  /* 카드 묶음이 이어지면 한 목록처럼 */
.sub-click-wrap .inner .three-boan-wrap .tk-sub { margin-top: 12px; font-size: 17px; line-height: 1.6; word-break: keep-all; }
.sub-click-wrap .inner .three-boan-wrap .tk-cycle { font-size: 30px; font-weight: 700; }
/* 수복 방법 카드: 아이콘 자리에 치료 전·후 실사 (2026-10-14). 모바일 '> div img { width: 44px }' 보다 우선 */
.sub-click-wrap .inner .three-boan-wrap .tk-ba { display: grid; gap: 8px; }
.sub-click-wrap .inner .three-boan-wrap .tk-ba figure { position: relative; margin: 0; }
.sub-click-wrap .inner .three-boan-wrap .tk-ba img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; }
.sub-click-wrap .inner .three-boan-wrap .tk-ba figcaption { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; line-height: 1.5; }
@media (max-width: 1024px) {
  .sub-click-wrap.is-inline .inner { width: 100%; padding-top: 50px; overflow: hidden; }
  .sub-click-wrap .inner .three-boan-wrap.tk-two { row-gap: 0; }  /* 모바일 카드는 margin-bottom 12px 로 간격 */
  .sub-click-wrap .inner .three-boan-wrap.tk-two > div { width: 100%; }
  .sub-click-wrap .inner .three-boan-wrap.mt-120 { margin-top: 80px; }
  .sub-click-wrap .inner .three-boan-wrap + .three-boan-wrap { margin-top: 12px; }
  .sub-click-wrap .inner .three-boan-wrap .tk-sub { font-size: 15px; }
  .sub-click-wrap .inner .three-boan-wrap .tk-cycle { font-size: 24px; }
}

/* 한국어 줄바꿈 (2026-10-09): 어절 단위 + 고아 줄 줄이기. 소아(kids_live)는 이 파일을 안 불러 운영 사이트와 동일 유지 */
p, li, td, dd, dt, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p, li, td, dd { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6, .title, .sub-title { text-wrap: balance; }
a[href^="tel:"], .tk-nobr { white-space: nowrap; }
/* 푸터 진료시간: 요일 칸은 가장 긴 '월·수·목·금' 기준 폭, 시간은 한 줄, 배지는 시간 칸 안에서 자리가 없으면 아래로 */
.footer .footer-inner .right-box .time-wrap .time-box ul li:first-child:not(.red) { width: 5em !important; flex: none; }
.footer .time-box .tk-time { flex: 1; min-width: 0; }
.footer .time-box .tk-badge { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 12px; background: var(--tk-point); color: #fff; font-size: 0.9em; white-space: nowrap; }
/* need-wrap(왼쪽 제목 · 오른쪽 목록): 왼쪽 열 빈 공간을 이미지로 채움. 열 높이 = 오른쪽 목록 높이(stretch), 이미지가 남는 높이를 채움 (2026-10-09) */
.sub-click-wrap .inner .need-wrap:has(.tk-need-img) > div:first-child { width: 520px; display: flex; flex-direction: column; }
.sub-click-wrap .inner .need-wrap .tk-need-img { position: relative; flex: 1 1 0; min-height: 220px; margin-top: 36px; border-radius: 12px; overflow: hidden; }
.sub-click-wrap .inner .need-wrap .tk-need-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  /* 이미지 원래 높이가 열 높이를 키우지 않게 */
@media (max-width: 1024px) {  /* 모바일은 위아래로 쌓여 빈 공간이 없음 */
  .sub-click-wrap .inner .need-wrap .tk-need-img { display: none; }
  .sub-click-wrap .inner .need-wrap:has(.tk-need-img) > div:first-child { width: auto; display: block; }
}
.sub-click-wrap.is-inline .inner .pd150, .sub-click-wrap.is-inline .inner .pb150 { padding-bottom: 0 !important; }  /* 팝업용 하단 여백 + 섹션 간격(mt-200)이 겹쳐 350px 공백 */
/* 탭(보증서 3종) 패널은 팝업용 absolute 겹치기 → 인라인에선 높이를 안 차지해 다음 섹션과 겹침. 활성 탭만 흐름에 배치 */
.sub-click-wrap.is-inline .inner .seo-wrap { position: static; display: none; padding-bottom: 0; }
.sub-click-wrap.is-inline .inner .seo-wrap.active { display: block; }

/* SEO·접근성 점검(2026-10-14): 화면을 바꾸지 않는 마크업 보정 */
.tk-eyebrow { font-weight: bold; } /* h3 → div 로 바꾼 머리말. h3 기본 굵기 그대로 */
.tk-main { display: contents; } /* main 랜드마크는 상자를 만들지 않는다 (레이아웃 그대로) */
.tk-skip { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 8px 14px; background: #fff; color: #111; }
.tk-skip:focus { left: 8px; top: 8px; } /* 키보드 Tab 으로 들어올 때만 보인다 */