/*
Theme Name: Youngtong Ieum Dental
Theme URI: https://example.co.kr
Author: ADKNOWHOW
Author URI: https://adknowhow.co.kr
Description: Custom WordPress theme for Youngtong Ieum Dental Clinic (Matan-dong, Suwon). Responsive, mobile-optimized, prevention and preservation focused brand "Ieum". Includes Q-ray preliminary exam sections, AEO/GEO structured data (Dentist, FAQPage, MedicalWebPage JSON-LD), scroll animations, and a Doctor's Column blog. Built with Korean medical advertising law (Article 56) compliance in mind.
Version: 1.14.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: youngtong
Tags: dentist, medical, responsive, blog, custom-header, custom-menu, translation-ready
*/

/* ===================================================================
   0. 디자인 토큰
=================================================================== */
:root{
  /* 브랜드 컬러 — 딥그린은 포인트로 제한 */
  --teal:#1F5F5B; --teal2:#2E7C76; --teal-dk:#12302E;
  /* 베이스 — 화이트·라이트그레이·베이지 중심 */
  --white:#fff; --paper:#FBFAF7; --sandl:#F5F1EA; --sand:#EBE3D6; --line:#EAE5DC;
  /* 텍스트 — 부드러운 블랙 */
  --ink:#0F0E0E; --gray:#5A5A57; --lgray:#9A9791;
  /* 포인트 — 골드 */
  --gold:#C9A15B; --gold-dk:#B08840;
  /* 타이포 — Pretendard 단일 통일 */
  --san:'Pretendard','Noto Sans KR',-apple-system,sans-serif;
  --ser:var(--san); --lat:var(--san);
  /* 형태 — 라운드 8px 기준 체계 */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:100px; --radius:8px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 14px 34px rgba(15,14,14,.08);
  --shadow-sm:0 4px 16px rgba(15,14,14,.06);
}

/* ===================================================================
   1. 리셋 & 기본
=================================================================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth;overflow-x:hidden;overscroll-behavior-y:none}
body{width:100%}
body{font-family:var(--san);color:var(--ink);background:var(--white);line-height:1.75;font-weight:300;overscroll-behavior-y:none;word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--ser);font-weight:600;line-height:1.42;letter-spacing:-.02em;text-wrap:balance}
/* 본문 문단: 마지막 줄 고아 단어 방지 */
p{text-wrap:pretty}
.eng{font-family:var(--lat);letter-spacing:.22em;text-transform:uppercase}
.lbl{font-family:var(--san);font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.sec{padding:120px 0}
.ph{width:100%;background:linear-gradient(135deg,#DCD4C8 0%,#C8BFB2 50%,#B9B0A4 100%);
    display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--lat);
    letter-spacing:.2em;font-size:13px;text-transform:uppercase}
.ph.dk{background:linear-gradient(135deg,#1B4A47 0%,#12302E 60%,#0C2422 100%)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:999;background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-sm)}

/* ===================================================================
   2. 스크롤 애니메이션
=================================================================== */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
/* 좌우 슬라이드는 위로 올라오기로 통일 (산만함 제거) */
.js [data-reveal="left"],.js [data-reveal="right"]{transform:translateY(28px)}
[data-reveal="left"].is-in,[data-reveal="right"].is-in{transform:none}
[data-reveal-delay="1"]{transition-delay:.12s}
[data-reveal-delay="2"]{transition-delay:.24s}
[data-reveal-delay="3"]{transition-delay:.36s}
[data-reveal-delay="4"]{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ===================================================================
   3. 상단 안내바 + 헤더
=================================================================== */
.note{background:var(--ink);color:var(--sand);font-size:12px;text-align:center;padding:9px 20px;letter-spacing:.02em}
.note b{color:var(--gold);font-weight:500}

.site-header{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .35s var(--ease),box-shadow .3s,border-color .35s}
.site-header.scrolled{box-shadow:0 4px 20px rgba(18,48,46,.06)}
/* fixed 헤더 높이만큼 본문 시작 보정 (홈 외 페이지) */
body:not(.home){padding-top:82px}
.hd{display:flex;align-items:center;height:82px;gap:24px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
/* 커스텀 로고 이미지 (WP the_custom_logo 출력) */
.logo .custom-logo,.logo img{height:36px;width:auto;max-width:none;display:block;image-rendering:auto;object-fit:contain}
/* SVG 로고는 크기 제약 없이 선명하게 */
.logo img[src$=".svg"],.logo .custom-logo[src$=".svg"]{height:36px}
.logo .custom-logo-link{display:flex;align-items:center;line-height:0}
.logo .mk{font-family:var(--ser);font-size:22px;font-weight:800;color:var(--teal);letter-spacing:-.03em}
.logo .sb{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--lgray);text-transform:uppercase}
.mainnav{flex:0 1 auto}
.mainnav ul{display:flex;gap:0;font-size:16px;font-weight:600;justify-content:center;margin:0;padding:0;list-style:none;align-items:center}
.mainnav li{margin:0;padding:0;position:relative;display:flex;align-items:center}
/* 메뉴 항목 사이 얇은 세로 구분선 */
.mainnav li + li::before{content:'';width:1px;height:12px;background:var(--line);margin:0 26px;flex:0 0 auto}
.mainnav a{position:relative;padding:8px 0;transition:color .22s var(--ease);white-space:nowrap;color:var(--ink);display:inline-block}
.mainnav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .28s var(--ease)}
/* 메뉴 안 예약·전화 버튼에는 밑줄(::after) 제외 */
.mainnav .navcta a::after{display:none}
.mainnav a:hover,.mainnav .current-menu-item>a{color:var(--teal)}
.mainnav a:hover::after,.mainnav .current-menu-item>a::after{right:0}
.hd-tel{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex:0 0 auto}
.hd-tel .num{font-family:var(--ser);font-size:17px;font-weight:700;color:var(--teal);letter-spacing:.01em}
.btn{display:inline-block;padding:11px 22px;background:var(--teal);color:#fff;font-size:13px;font-weight:500;border-radius:var(--r-sm);transition:.25s}
.btn:hover{background:var(--ink);transform:translateY(-1px)}
.btn.gh{background:transparent;border:1px solid var(--sand);color:var(--sand)}
.btn.gh:hover{background:var(--sand);color:var(--ink)}
.btn.gold{background:var(--gold);color:var(--ink);font-weight:600}
.btn.gold:hover{background:var(--gold-dk);color:#fff}
.hd-tel .btn{padding:12px 24px;font-size:14px;box-shadow:var(--shadow-sm)}

/* 햄버거 */
.navtoggle{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px;z-index:210}
.navtoggle span{display:block;height:2px;width:24px;background:var(--ink);transition:.3s var(--ease);margin:0 auto}
/* 모바일 메뉴 마스크 — 기본 숨김 (전역 정의로 데스크톱서도 안전) */
.navmask{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(15,14,14,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility .4s;z-index:190;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
body.nav-open .navmask{opacity:1;visibility:visible;pointer-events:auto;z-index:250}
/* 메뉴 열림 시 헤더 backdrop-filter 제거 → dim(250)이 헤더(200) 위를 균일하게 덮음 (2-1) */
body.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
/* 메뉴 열림 시 플로팅 버튼·맨위로·하단탭 숨김 (배경 UI 노출 방지) */
body.nav-open .quick,body.nav-open .totop,body.nav-open .qtop,body.nav-open .mobbar{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
/* 메뉴 열림 시 햄버거 버튼 숨김 — 메뉴 안 X 닫기버튼 하나만 노출 (중복 제거) */
body.nav-open .navtoggle{opacity:0;visibility:hidden;pointer-events:none}
/* 모바일 메뉴 내부 닫기 버튼 · CTA (데스크톱 숨김) */
.navclose{display:none;position:absolute;top:16px;right:16px;width:44px;height:44px;
  font-size:30px;line-height:1;color:var(--ink);background:none;border:0;border-radius:var(--r-pill);
  align-items:center;justify-content:center;transition:background .2s}
.navclose:hover{background:var(--sandl)}
.navcta{display:none}

/* ===================================================================
   4. 히어로
=================================================================== */
.hero{position:relative;background:linear-gradient(135deg,#12302E 0%,#1F5F5B 100%);color:#fff;min-height:min(760px,92svh);display:flex;align-items:flex-start;overflow:hidden}
.hero .bgph{position:absolute;inset:0;opacity:.34;background:#12302E}
.hero .bgph[style]{opacity:1;background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:kenburns 26s var(--ease) infinite alternate;transform-origin:center;will-change:transform}
@keyframes kenburns{
  0%{transform:scale(1)}
  100%{transform:scale(1.12)}
}
@media(prefers-reduced-motion:reduce){.hero .bgph[style]{animation:none}}
.hero .bgph .ph{height:100%}
/* 밝은 톤: 하단·좌측만 은은하게 어둡게 하여 텍스트 가독성 확보 */
.hero::after{content:'';position:absolute;inset:0;background:
  linear-gradient(95deg,rgba(15,14,14,.6) 0%,rgba(15,14,14,.34) 38%,rgba(15,14,14,.08) 68%,rgba(15,14,14,0) 100%),
  linear-gradient(0deg,rgba(15,14,14,.42) 0%,rgba(15,14,14,.06) 34%,rgba(15,14,14,0) 55%)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(150px,22vh,220px);padding-bottom:clamp(72px,11vh,140px)}
.hero .lbl{color:var(--gold);display:block;margin-bottom:26px}
.hero h1{font-size:clamp(28px,6.2vw,54px);line-height:1.26;color:#fff;margin-bottom:clamp(16px,2vw,28px);font-weight:600;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{font-size:clamp(14px,1.6vw,17px);color:#EDECEA;max-width:600px;font-weight:400;line-height:1.85}
.hero .acts{display:flex;gap:12px;margin-top:clamp(28px,3vw,44px);flex-wrap:wrap}

/* ===================================================================
   5. 키워드 스트립
=================================================================== */
.strip-sec{padding-top:96px;padding-bottom:96px;background:var(--white)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scard{background:var(--sandl);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 36px 40px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow);background:#fff}
.scard-ic{width:52px;height:52px;color:var(--teal);margin-bottom:26px}
.scard-ic svg{width:100%;height:100%}
.scard-en{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:14px}
.scard h3{font-size:22px;color:var(--ink);margin-bottom:14px;font-weight:700}
.scard p{font-size:14.5px;color:var(--gray);line-height:1.85}

/* ===================================================================
   6. 섹션 헤더
=================================================================== */
.sh{margin-bottom:62px}
.sh .lbl{display:block;margin-bottom:16px}
.sh h2{font-size:36px;line-height:1.44}
.sh h2 b{color:var(--teal);font-weight:700}
.sh .dc{margin-top:20px;color:var(--gray);font-size:15.5px;max-width:660px;line-height:2}
.ctr{text-align:center}
.ctr .dc{margin-left:auto;margin-right:auto}

/* ===================================================================
   7. 원장
=================================================================== */
.doc{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.doc .im .ph{aspect-ratio:3/4}
.doc .rl{font-size:13px;color:var(--gold);font-weight:500;letter-spacing:.03em;margin-bottom:12px}
.doc h3{font-size:31px;margin-bottom:26px}
.doc h3 small{display:block;font-family:var(--lat);font-size:14px;letter-spacing:.2em;color:var(--lgray);font-weight:400;margin-top:9px}
.doc .qt{font-family:var(--ser);font-size:19px;line-height:1.95;color:var(--teal);padding:24px 0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px}
.doc ul{columns:2;column-gap:34px;font-size:14px;color:var(--gray)}
.doc li{padding-left:15px;position:relative;margin-bottom:9px;break-inside:avoid}
.doc li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;background:var(--sand);border-radius:50%}

/* ===================================================================
   8. 진료 원칙 01~04
=================================================================== */
.philo{background:var(--sandl)}
.pit{display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:center;padding:62px 0;border-bottom:1px solid var(--line)}
.pit:last-child{border-bottom:0}
.pit:nth-child(even) .tx{order:2}
.pit .no{font-family:var(--lat);font-size:46px;color:var(--sand);line-height:1;margin-bottom:16px}
.pit h3{font-size:26px;margin-bottom:16px}
.pit p{color:var(--gray);font-size:15px;line-height:2.05}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font-size:12px;padding:6px 14px;border:1px solid var(--sand);border-radius:100px;color:var(--teal);background:#fff}
.pit .im .ph{aspect-ratio:4/3}

/* ===================================================================
   9. 이음 리포트
=================================================================== */
.rep{background:var(--teal-dk);color:#fff}
.rep .sh h2{color:#fff}
.rep .sh .dc{color:#B3C4C2}
.rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:44px}
.rc{background:#1A413E;border-radius:var(--r-md);padding:38px 32px;border-top:3px solid;transition:transform .35s var(--ease)}
.rc:hover{transform:translateY(-6px)}
.rc.r{border-top-color:#D97757}.rc.y{border-top-color:var(--gold)}.rc.g{border-top-color:#6FA88C}
.rc .dot{width:11px;height:11px;border-radius:50%;margin-bottom:20px}
.rc.r .dot{background:#D97757}.rc.y .dot{background:var(--gold)}.rc.g .dot{background:#6FA88C}
.rc h4{font-size:21px;color:#fff;margin-bottom:12px}
.rc p{font-size:13.5px;color:#AFC1BF;line-height:1.95}
.rnote{border:1px solid #2A5551;border-radius:var(--r-md);padding:30px 34px;display:flex;gap:26px;align-items:flex-start}
.rnote .k{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--gold);white-space:nowrap;padding-top:5px}
.rnote p{font-size:14.5px;color:#C6D3D1;line-height:2}
.rnote b{color:var(--gold)}

/* ===================================================================
   10. 진료 과목
=================================================================== */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:.35s var(--ease)}
.dcard:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:var(--shadow)}
.dcard .ph{aspect-ratio:4/3}
.dcard .thumb{aspect-ratio:4/3;overflow:hidden}
.dcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.dcard:hover .thumb img{transform:scale(1.05)}
.dcard .bd{padding:26px 24px 30px}
.dcard h4{font-size:18px;margin-bottom:9px}
.dcard p{font-size:13px;color:var(--gray);line-height:1.85}

/* ===================================================================
   11. 닥터 칼럼 (홈)
=================================================================== */
.colhead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px;flex-wrap:wrap}
.cats{display:flex;gap:8px;flex-wrap:wrap}
.cat{font-size:12.5px;padding:8px 17px;border:1px solid var(--line);border-radius:100px;color:var(--gray);background:#fff;transition:.22s}
.cat:hover,.cat.on{background:var(--teal);border-color:var(--teal);color:#fff}
.colgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:44px}
.feat .ph{aspect-ratio:16/10;margin-bottom:22px}
.feat .thumb{aspect-ratio:16/10;margin-bottom:22px;overflow:hidden;border-radius:var(--r-sm)}
.feat .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.feat:hover .thumb img{transform:scale(1.05)}
.meta{font-size:12px;color:var(--lgray);display:flex;gap:12px;align-items:center;margin-bottom:11px}
.meta .c{color:var(--teal);font-weight:500}
.feat h3{font-size:24px;line-height:1.55;margin-bottom:13px}
.feat p{font-size:14.5px;color:var(--gray);line-height:1.95}
.clist li{border-bottom:1px solid var(--line);padding:22px 0}
.clist li:first-child{border-top:1px solid var(--line)}
.clist a{display:flex;gap:20px;align-items:flex-start}
.clist .th{width:110px;flex:0 0 110px}
.clist .th .ph{aspect-ratio:4/3;font-size:10px;border-radius:var(--r-sm)}
.clist .th img{width:110px;height:82px;object-fit:cover;border-radius:var(--r-sm)}
.clist h4{font-size:16px;line-height:1.6;font-weight:500;margin-bottom:8px;transition:.22s}
.clist a:hover h4{color:var(--teal)}
.morebar{margin-top:46px;text-align:center}

/* ===================================================================
   12. 아카이브 (칼럼 목록)
=================================================================== */
.phead{background:var(--sandl);padding:80px 0 62px;text-align:center;border-bottom:1px solid var(--line)}
.phead .lbl{display:block;margin-bottom:14px}
.phead h2{font-size:36px;margin-bottom:16px}
.phead p{color:var(--gray);font-size:15px;max-width:620px;margin:0 auto;line-height:2}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}
.acard{transition:transform .35s var(--ease)}
.acard:hover{transform:translateY(-4px)}
.acard .ph{aspect-ratio:16/11;margin-bottom:18px;border-radius:var(--r-sm)}
.acard .thumb{aspect-ratio:16/11;margin-bottom:18px;overflow:hidden;border-radius:var(--r-sm)}
.acard .thumb img{width:100%;height:100%;object-fit:cover}
.acard h4{font-size:17px;line-height:1.62;margin-bottom:10px;font-weight:500}
.acard p{font-size:13.5px;color:var(--gray);line-height:1.9}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:60px}
.pagination .page-numbers{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:13px;color:var(--gray);border-radius:var(--r-sm);transition:.22s}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--teal);border-color:var(--teal);color:#fff}

/* ===================================================================
   13. 칼럼 상세 (single)
=================================================================== */
.article{max-width:800px;margin:0 auto;padding:76px 28px 96px}
.crumb{font-size:12px;color:var(--lgray);margin-bottom:22px}
.article h1{font-size:34px;line-height:1.52;margin-bottom:20px}
.abar{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--lgray);padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:38px;flex-wrap:wrap}
.abar .c{color:var(--teal);font-weight:500}
.sum{background:var(--sandl);border-left:3px solid var(--gold);padding:26px 30px;margin-bottom:42px}
.sum strong{display:block;font-family:var(--ser);font-size:15px;color:var(--teal);margin-bottom:14px}
.sum ul{font-size:14.5px;color:var(--ink);line-height:1.95}
.sum li{padding-left:16px;position:relative;margin-bottom:8px}
.sum li::before{content:'';position:absolute;left:0;top:12px;width:5px;height:5px;background:var(--gold);border-radius:50%}
.toc{border:1px solid var(--line);padding:26px 30px;margin-bottom:46px}
.toc strong{display:block;font-family:var(--ser);font-size:14.5px;margin-bottom:14px}
.toc ol{padding-left:18px;font-size:14px;color:var(--gray);line-height:2.1}
.entry h2{font-size:23px;margin:52px 0 18px;padding-top:10px}
.entry h3{font-size:18px;margin:34px 0 12px;color:var(--teal)}
.entry p{font-size:15.5px;color:#3D4E4C;line-height:2.1;margin-bottom:20px}
.entry .intro{font-size:16px;color:var(--gray);padding:24px 26px;background:#FAF8F4;border-radius:var(--r-sm)}
.entry img{border-radius:var(--r-sm);margin:24px 0}
.mech{border:1px solid var(--sand);background:#fff;padding:30px 32px;margin:34px 0}
.mech .k{font-size:11px;letter-spacing:.2em;color:var(--gold);font-weight:700;margin-bottom:14px}
.mech p{font-size:14.5px;margin-bottom:14px}
.mech .disc{font-size:12.5px;color:var(--lgray);line-height:1.85;border-top:1px solid var(--line);padding-top:14px;margin:0}
.sig{margin-top:56px;padding:26px 30px;background:var(--ink);color:#C6D3D1;font-size:13px;line-height:1.95}
.sig b{color:#fff;font-weight:500}
.rel{border-top:1px solid var(--line);margin-top:56px;padding-top:36px}
.rel strong{font-family:var(--ser);font-size:16px;display:block;margin-bottom:18px}
.rel ul{font-size:14.5px}
.rel li{padding:11px 0;border-bottom:1px solid var(--line)}
.rel a:hover{color:var(--teal)}

/* ===================================================================
   14. FAQ
=================================================================== */
.faq{border-top:1px solid #E4DED5}
.fq{border-bottom:1px solid #E4DED5}
.fq-q{width:100%;text-align:left;font-size:18px;display:flex;gap:16px;align-items:flex-start;font-weight:600;padding:30px 0;color:#12302E}
.fq-q .q{color:var(--gold);font-size:16px;font-weight:700;letter-spacing:.1em;padding-top:2px}
.fq-q .ico{margin-left:auto;transition:transform .3s var(--ease);color:#93A19F;font-size:20px;line-height:1}
.fq.open .fq-q .ico{transform:rotate(45deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.fq-a-in{padding:0 0 30px 32px;color:#5E6E6C;font-size:14.5px;line-height:2}

/* ===================================================================
   15. 오시는 길
=================================================================== */
.loc{background:var(--teal-dk);color:#fff}
.lgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:60px}
.lgrid .map .ph{aspect-ratio:16/10}
.lgrid .map iframe{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--r-md)}
.loc h2{color:#fff;font-size:34px;margin-bottom:26px}
.loc .addr{font-size:17px;color:#fff;line-height:1.85;margin-bottom:16px}
.loc .addr b{color:var(--gold);font-weight:600}
.loc .subway{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;margin-bottom:28px;
  background:rgba(201,161,91,.14);border:1px solid rgba(201,161,91,.4);border-radius:var(--r-pill);
  color:#fff;font-size:14px}
.loc .subway svg{color:var(--gold);flex-shrink:0}
.loc .subway b{color:var(--gold);font-weight:700}
.hours{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:26px}
.hours th,.hours td{padding:13px 0;border-bottom:1px solid #29514E;text-align:left;font-weight:400;color:#C6D3D1}
.hours th{color:#fff;font-weight:600;width:38%}
.hours .nite{color:var(--gold);font-size:11.5px;margin-left:7px}
.maplinks{display:flex;gap:10px;flex-wrap:wrap}

/* ===================================================================
   16. 푸터
=================================================================== */
.site-footer{background:#0C2422;color:#8FA5A2;padding:56px 0 40px;font-size:12.5px}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:30px}
.fgrid .fl{font-family:var(--ser);font-size:18px;color:#fff;margin-bottom:14px}
.fmeta{line-height:2}
.fnav{display:flex;gap:22px;flex-wrap:wrap}
.fnav a:hover{color:var(--gold)}
.copy{border-top:1px solid #1B3D3A;padding-top:24px;font-size:11.5px;color:#6B807E}

/* ===================================================================
   17. 퀵바 (모바일 하단 고정)
=================================================================== */
.quick{position:fixed;right:22px;bottom:22px;z-index:150;display:flex;flex-direction:column;gap:9px}
/* 맨 위로 버튼 — quick 내부, 전화·예약과 동일한 크기·간격 (전화 위) */
.qtop{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--ink);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(18,48,46,.18);
  transition:.25s;opacity:0;visibility:hidden;transform:translateY(8px);cursor:pointer}
.qtop.show{opacity:1;visibility:visible;transform:translateY(0)}
.qtop:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.qtop svg{width:20px;height:20px}
/* 모바일 전용 맨 위로 버튼 (기본 숨김, 900px에서만 표시) */
.totop{display:none}
/* 맨 위로 버튼 — 기본(데스크톱) */
.mobbar{display:none}
.quick a{width:54px;height:54px;border-radius:50%;background:var(--teal);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9.5px;gap:3px;box-shadow:0 6px 20px rgba(18,48,46,.28);transition:.25s;line-height:1.1}
.quick a:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.quick a svg{width:20px;height:20px}
.quick a span{font-size:9.5px;font-weight:500}

/* 개발 주석 */
.devnote{background:#FFF9EC;border:1px dashed #D9BE86;padding:14px 20px;font-size:12px;color:#8A6A2E;border-radius:var(--r-sm);margin:0 auto;max-width:var(--wrap);line-height:1.8}
.devnote b{color:#6B4F16}

/* WP 기본 */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text{font-size:12px;color:var(--lgray);text-align:center;margin-top:8px}
.sticky,.gallery-caption,.bypostauthor{}

/* ===================================================================
   18. 반응형
=================================================================== */
@media(max-width:1024px){

  .doc{gap:44px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .agrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .sec{padding:80px 0}
  /* 모바일: 데스크톱 퀵바 숨김, 하단 탭바로 대체 (겹침 원천 제거) */
  .quick{display:none !important}
  .qtop{display:none !important}
  .mobbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:180;
    background:var(--sandl);border-top:1px solid var(--sand);
    box-shadow:0 -4px 20px rgba(15,14,14,.06);
    transform:translateZ(0);backface-visibility:hidden;will-change:transform;
    padding-bottom:env(safe-area-inset-bottom)}
  .mobbar a{padding:9px 6px 8px;text-align:center;color:var(--teal-dk);font-size:12px;font-weight:600;
    display:flex;flex-direction:column;align-items:center;gap:4px;transition:background .2s}
  .mobbar a svg{width:22px;height:22px;stroke-width:1.7}
  .mobbar a:active{background:rgba(31,95,91,.08)}
  .mobbar a.book{background:var(--gold);color:#fff}
  .mobbar a.book:active{background:var(--gold-dk)}
  body{padding-bottom:64px}
  /* 맨 위로 버튼 — 하단 탭바 위에 띄움 */
  .totop{display:flex;position:fixed;right:16px;bottom:80px;z-index:158;width:44px;height:44px;
    align-items:center;justify-content:center;border-radius:var(--r-pill);
    background:#fff;color:var(--ink);box-shadow:var(--shadow);border:1px solid var(--line);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    -webkit-transform:translateZ(0);transform:translateZ(0);will-change:opacity;isolation:isolate}
  .totop.show{opacity:1;visibility:visible}
  /* 모바일 슬라이드 메뉴 — body 기준 최상위로 */
  .mainnav{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(80vw,320px);height:100vh;
    background:#fff;flex-direction:column;padding:88px 28px 40px;
    transform:translateX(105%);transition:transform .38s var(--ease);
    box-shadow:-12px 0 40px rgba(0,0,0,.18);z-index:1001;overflow-y:auto;overscroll-behavior:contain}
  body.nav-open .mainnav{transform:translateX(0)}
  .mainnav ul,.mainnav li,.mainnav a,.mainnav .navcta{position:relative;z-index:2;pointer-events:auto}
  .mainnav .navclose{z-index:5;pointer-events:auto}
  .mainnav a{display:block;width:100%}
  body.nav-open{overflow:hidden;touch-action:none}
  .mainnav ul{flex-direction:column;gap:0;width:100%}
  .mainnav li{border-bottom:1px solid var(--line);width:100%;display:block}
  .mainnav li + li::before{display:none}
  .mainnav a{display:block;padding:17px 2px;font-size:16px;border-bottom:0}
  .mainnav a:hover,.mainnav .current-menu-item>a{border-color:transparent;color:var(--teal)}
  .navclose{display:flex}
  .navcta{display:flex;flex-direction:column;gap:10px;margin-top:28px;width:100%}
  .navcta .btn{width:100%;text-align:center;padding:14px;color:#fff;background:var(--teal)}
  .navcta .btn.gold{color:#fff;background:var(--gold)}
  /* 터치/hover/active 어떤 상태에서도 번호·텍스트가 항상 흰색으로 보이게 고정 */
  .navcta .btn:hover,.navcta .btn:active,.navcta .btn:focus{color:#fff !important;background:var(--teal-dk);transform:none}
  .navcta .btn.gold:hover,.navcta .btn.gold:active,.navcta .btn.gold:focus{color:#fff !important;background:var(--gold-dk)}
  /* 햄버거 버튼 — 헤더 우측, 메뉴보다 위 */
  .navtoggle{display:flex;position:relative;z-index:1002}
  /* 모바일: 로고 좌측 정렬 + 햄버거 우측 (PC와 동일한 좌우 배치) */
  .hd{gap:12px;justify-content:space-between}
  .logo{flex:0 1 auto;position:static;transform:none;margin:0}
  .logo .custom-logo,.logo img{height:32px}
  .logo .sb{display:none}
  /* 전화·예약 컨테이너 통째로 숨김 */
  .hd-tel{display:none}
  .strip{grid-template-columns:1fr;gap:16px}
  .strip-sec{padding-top:64px;padding-bottom:64px}
  .sh h2{font-size:27px}

  .hero{min-height:78vh;align-items:flex-end}
  .doc,.pit,.lgrid,.colgrid{grid-template-columns:1fr;gap:36px}
  .pit:nth-child(even) .tx{order:0}
  .doc ul{columns:1}
  .doc .im{max-width:420px}
  .doc .im img{aspect-ratio:4/3}
  .pit .im{max-width:560px}
  .rcards{grid-template-columns:1fr}
  .rnote{flex-direction:column;gap:12px}
  .article h1{font-size:26px}
  .hero .wrap{padding-bottom:72px}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  /* 오시는 길 텍스트 영역(대표전화·팩스·진료시간)은 좌우 여백 더 넉넉히 */
  .loc .tx{padding-left:6px;padding-right:6px}
  .sec{padding:56px 0}
  .grid4,.agrid{grid-template-columns:1fr}
  .hero{min-height:88svh;padding:0;align-items:flex-end}
  .hero .wrap{padding-top:120px;padding-bottom:clamp(40px,7vh,72px)}
  /* 모바일: 상하 그라데이션 — 하단 텍스트 가독성 + 배경 최대한 노출 */
  .hero::after{background:
    linear-gradient(0deg,rgba(15,14,14,.78) 0%,rgba(15,14,14,.5) 26%,rgba(15,14,14,.18) 52%,rgba(15,14,14,.06) 100%)}
  .hero .lbl{margin-bottom:14px;font-size:10px}
  .hero h1{line-height:1.3;margin-bottom:16px}
  .hero p{line-height:1.8;color:#F0EFED;max-width:none}
  /* 모바일: 설명문 강제 줄바꿈 무력화 → 화면 폭에 맞춰 자동 줄바꿈 (제목 슬로건 줄바꿈은 유지) */
  .hero p br{display:none}
  .dc br,.qt br,.rnote p br{display:none}
  .hero .acts{display:flex;flex-direction:column;gap:10px;margin-top:26px}
  /* 버튼 세로 1열 (디자이너 참고 이미지 기준) */
  .hero .acts .btn{width:100%;text-align:center;padding:15px 16px;min-width:0;font-size:14px;line-height:1.35;white-space:nowrap}
  .scard{padding:34px 26px 32px}
  .scard h3{font-size:20px}
  .sh{margin-bottom:40px}
  .sh h2{font-size:24px}
  .sh .dc{font-size:14px;margin-top:16px}
  .doc h3{font-size:24px;margin-bottom:20px}
  .doc h3 small{font-size:12px}
  .doc .qt{font-size:16px;padding:20px 0 22px;margin-bottom:22px}
  .doc ul{font-size:13.5px}
  .doc .im img{aspect-ratio:4/5}
  .pit{padding:40px 0;gap:28px}
  .pit .no{font-size:38px;margin-bottom:12px}
  .pit h3{font-size:21px}
  .pit p{font-size:14px;line-height:1.9}
  .chips{margin-top:16px}
  .chip{font-size:11px;padding:5px 12px}
  .rc{padding:30px 26px}
  .rc h4{font-size:19px}
  .rnote{padding:24px 22px}
  .dcard .bd{padding:22px 20px 24px}
  .loc h2,.phead h2{font-size:26px}
  .loc .addr{font-size:16px}
  .hours th,.hours td{padding:11px 0;font-size:13.5px}
  .colhead{margin-bottom:32px}
  .feat h3{font-size:21px}
  .clist .th{width:78px;flex:0 0 78px}
  .clist .th img{width:78px;height:58px}
  .clist h4{font-size:15px}
  .fq-q{font-size:16px;padding:24px 0;gap:12px}
  .fq-a-in{padding:0 0 24px 28px;font-size:14px}
  .fgrid{flex-direction:column;gap:24px}
  .maplinks{width:100%;flex-direction:column;gap:10px}
  .maplinks .btn{width:100%;text-align:center;min-width:0}
  .article{padding:48px 18px 72px}
  .article h1{font-size:23px;line-height:1.5}
  .abar{font-size:12px;padding-bottom:22px;margin-bottom:30px}
  .sum,.toc,.mech{padding:20px 18px}
  .entry h2{font-size:20px;margin:40px 0 14px}
  .entry h3{font-size:16.5px}
  .entry p{font-size:15px;line-height:2}
  .pagination .page-numbers{width:36px;height:36px}
}
@media(max-width:480px){
  .wrap{padding:0 20px}
  .sec{padding:48px 0}
  .hero .acts .btn{font-size:12px;padding:12px 6px}
  .sh h2{font-size:22px}
  .doc h3{font-size:22px}
  .pit h3{font-size:19px}
  .rcards{gap:16px}
  .cats{gap:6px}
  .cat{font-size:11.5px;padding:7px 13px}
  .mobbar a{font-size:11px;padding:9px 4px 8px}
  .mobbar a svg{width:21px;height:21px}
  .hd{height:64px}
  .logo .mk{font-size:19px}
  .logo .sb{display:none}
}

/* ------------------------------------------------------------------
 * 터치 기기(모바일)에서 Hover 인터랙션 제거
 *   - PC 마우스에서만 hover 효과 적용
 *   - 카카오톡 인앱 브라우저 등에서 hover 잔상/오작동 방지 (4차 요청 5번)
 * ---------------------------------------------------------------- */
@media (hover: none) {
  .btn:hover,.btn.gh:hover,.btn.gold:hover{transform:none}
  .scard:hover,.rc:hover,.dcard:hover,.acard:hover{transform:none;box-shadow:var(--shadow-sm)}
  .dcard:hover{border-color:var(--line)}
  .dcard:hover .thumb img,.feat:hover .thumb img{transform:none}
  .quick a:hover{transform:none}
  /* 터치 시 배경색 변화는 :active로만 (탭 피드백은 유지) */
  .btn:hover{background:var(--teal)}
  .btn.gold:hover{background:var(--gold)}
  .btn.gh:hover{background:transparent;color:var(--ink)}
  .scard:hover{background:var(--sandl)}
}