/* ════════════════════════════════════════════
   common.css
   디자인 토큰(CSS Variables) + 공통 컴포넌트
   헤더, 네비, 푸터, 공통 UI 요소
════════════════════════════════════════════ */

/* ── 디자인 토큰 ── */
:root {
  --cream:    #f5f0e8;
  --off:      #ede6da;
  --dark:     #2a1f16;
  --char:     #3d2e22;
  --warm:     #7a6558;
  --gold:     #8c5a3a;
  --gold-h:   #a56b48;
  --gb:       rgba(140,90,58,.18);
  --gbs:      rgba(140,90,58,.07);
}

/* ── HEADER 컴포넌트 ── */
.h-logo {
  display:inline-flex; align-items:center;
  text-decoration:none; height:22px;
}
/* 메인은 로고 흰색(index.html에서 개별 오버라이드)
   서브는 기본 dark */
.h-logo-svg {
  height:18px; width:auto;
  fill:var(--dark);
  transition:fill .3s;
}
.h-right  { display:flex; align-items:center; gap:28px; }
.lang     { display:flex; gap:6px; font-size:10px; letter-spacing:.14em; }
.lang button {
  background:none; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:10px; letter-spacing:.14em;
  color:var(--warm); padding:3px 0;
  transition:color .2s;
}
.lang button.on, .lang button:hover { color:var(--gold); }
.lang-sep { color:rgba(156,106,70,.3); align-self:center; }

.mbtn {
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; padding:4px;
}
.mbtn span {
  display:block; width:24px; height:1px;
  background:var(--dark);
  transition:all .4s cubic-bezier(.77,0,.175,1);
}
/* 메인 페이지 햄버거 — 흰색(index에서 오버라이드) */
.mbtn.on span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.mbtn.on span:nth-child(2) { opacity:0; transform:scaleX(0); }
.mbtn.on span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
#hdr.sx .mbtn span         { background:var(--dark); }

/* ── NAV 컴포넌트 ── */
.nav-menu { list-style:none; }
.nav-menu li { margin-bottom:2px; }
.nav-menu li > a {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  font-family:'Marcellus','Pretendard',sans-serif; font-size:clamp(22px,2.4vw,30px);
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--dark); text-decoration:none;
  border-bottom:1px solid var(--gbs);
  transform:translateX(-32px); opacity:0;
  transition:color .25s, transform .6s cubic-bezier(.77,0,.175,1), opacity .6s, border-color .25s;
}
#nav.on .nav-menu li:nth-child(1) > a { transform:translateX(0); opacity:1; transition-delay:.07s; }
#nav.on .nav-menu li:nth-child(2) > a { transform:translateX(0); opacity:1; transition-delay:.14s; }
#nav.on .nav-menu li:nth-child(3) > a { transform:translateX(0); opacity:1; transition-delay:.21s; }
#nav.on .nav-menu li:nth-child(4) > a { transform:translateX(0); opacity:1; transition-delay:.28s; }
.nav-menu li.cur > a,
.nav-menu li > a:hover { color:var(--gold); border-color:rgba(156,106,70,.45); }

.nav-arr {
  font-size:11px; color:var(--char);
  transition:transform .3s, color .25s;
  flex-shrink:0; margin-left:8px;
}
.nav-menu li.cur .nav-arr { transform:rotate(90deg); color:var(--gold); }

.np-label {
  font-size:9px; letter-spacing:.18em;
  color:var(--gold); text-transform:uppercase;
  margin-bottom:28px;
  display:flex; align-items:center; gap:12px;
}
.np-label::before { content:''; width:22px; height:1px; background:var(--gold); }

.np-items { list-style:none; }
.np-items li { overflow:hidden; }
.np-items a {
  display:block; padding:10px 0;
  font-family:'Marcellus','Pretendard',sans-serif;
  font-size:clamp(22px,2.6vw,34px); font-weight:400;
  letter-spacing:.04em; color:rgba(60,40,24,.35);
  text-decoration:none; border-bottom:1px solid transparent;
  transform:translateY(12px); opacity:0;
  transition:color .22s, border-color .22s, padding-left .25s,
             transform .45s cubic-bezier(.25,.46,.45,.94), opacity .4s;
}
/* 비활성/out 패널 즉시 숨김 */
.nav-panel.out .np-items a,
.nav-panel.out .np-follow { opacity:0 !important; transition:none !important; }

/* 활성 패널(.nav-panel.on) 안의 아이템만 보임 */
.nav-panel.on .np-items li:nth-child(1) a { transform:translateY(0); opacity:1; transition-delay:.06s; }
.nav-panel.on .np-items li:nth-child(2) a { transform:translateY(0); opacity:1; transition-delay:.12s; }
.nav-panel.on .np-items li:nth-child(3) a { transform:translateY(0); opacity:1; transition-delay:.18s; }
.nav-panel.on .np-items li:nth-child(4) a { transform:translateY(0); opacity:1; transition-delay:.24s; }
/* 모바일 아코디언 */
.nav-panel.mob-open .np-items li a { transform:translateY(0); opacity:1; }
.np-items a:hover { color:var(--dark); border-color:rgba(140,90,58,.25); padding-left:8px; }

.np-follow {
  margin-top:48px; padding-top:24px;
  border-top:1px solid var(--gb);
  transform:translateY(12px); opacity:0;
  transition:transform .45s .28s, opacity .4s .28s;
}
.nav-panel.on .np-follow { transform:translateY(0); opacity:1; }
.np-fl-label { font-size:9px; letter-spacing:.22em; color:var(--gold); margin-bottom:14px; text-transform:uppercase; }
.np-fl-links { display:flex; gap:18px; flex-wrap:wrap; }
.np-fl-links a {
  color:var(--char); text-decoration:none;
  font-size:11px; letter-spacing:.08em;
  transition:color .2s;
}
.np-fl-links a:hover { color:var(--gold); }

/* ── FOOTER 컴포넌트 ── */
#footer { color:rgba(210,195,175,.55); }
.foot-logo {
  font-family:'Marcellus','Pretendard',sans-serif; font-size:22px;
  letter-spacing:.18em; color:var(--cream);
  margin-bottom:10px; display:block;
}
.foot-logo span { color:var(--gold); }
.foot-brand-txt {
  font-family:'Pretendard',sans-serif;
  font-size:13.5px; font-weight:400; line-height:1.9;
  letter-spacing:.01em; color:rgba(210,195,175,.5);
  margin-bottom:32px;
}
.foot-soc { display:flex; gap:10px; margin-top:32px; }
.fsoc {
  width:36px; height:36px;
  border:1px solid rgba(140,90,58,.2); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:rgba(210,195,175,.5); font-size:16.5px;
  transition:border-color .3s, color .3s, background .3s;
}
.fsoc:hover { border-color:rgba(196,154,104,.7); color:rgba(220,200,170,1); background:rgba(140,90,58,.1); }

.foot-col-h {
  font-size:9px; letter-spacing:.22em;
  color:rgba(196,154,104,.65); margin-bottom:22px;
  text-transform:uppercase; font-family:'DM Sans',sans-serif;
}
.foot-links { list-style:none; }
.foot-links li { margin-bottom:13px; }
.foot-links a {
  color:rgba(210,195,175,.5); text-decoration:none;
  font-size:12.5px; letter-spacing:.03em;
  font-family:'Pretendard',sans-serif; font-weight:400;
  transition:color .25s;
  display:inline-block;
}
.foot-links a:hover { color:rgba(220,200,170,.95); }

.biz {
  font-family:'Pretendard',sans-serif;
  font-size:11px; font-weight:400; line-height:2;
  letter-spacing:.01em; color:rgba(140,120,100,.38);
}
.copy {
  font-size:10px; letter-spacing:.08em;
  color:rgba(140,120,100,.28); white-space:nowrap;
  font-family:'DM Sans',sans-serif; margin-top:6px;
}

/* ── 공통 UI 요소 ── */
/* 섹션 라벨 */
.s-label {
  font-size:9px; letter-spacing:.3em;
  color:var(--gold); text-transform:uppercase;
  margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.s-label::before { content:''; width:22px; height:1px; background:var(--gold-h); }

/* 서브페이지 히어로 공통 */
.sub-breadcrumb {
  font-size:9px; letter-spacing:.28em;
  color:var(--warm); text-transform:uppercase;
  margin-bottom:32px;
  display:flex; align-items:center; gap:16px;
}
.sub-breadcrumb a { color:var(--warm); text-decoration:none; transition:color .2s; }
.sub-breadcrumb a:hover { color:var(--gold); }
.sub-breadcrumb span { color:rgba(140,90,58,.35); }

.sub-page-title {
  font-family:'Marcellus','Pretendard',sans-serif;
  font-size:clamp(40px,6vw,80px);
  letter-spacing:.04em; line-height:1;
  color:var(--dark); text-transform:uppercase;
  margin-bottom:64px;
}

/* 서브네비 링크 텍스트 스타일 */
.sub-subnav a {
  font-family:'DM Sans',sans-serif;
  font-size:10px; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--warm); text-decoration:none;
  transition:color .25s;
}
.sub-subnav a:hover,
.sub-subnav a.active { color:var(--gold); }

/* 공통 버튼 — 아웃라인형 */
.btn-outline {
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 28px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
  border:1px solid rgba(140,90,58,.6);
  color:var(--dark);
  position:relative; overflow:hidden;
  transition:color .4s, border-color .4s;
}
.btn-outline::before {
  content:'';
  position:absolute; inset:0;
  background:rgba(140,90,58,.1);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.77,0,.175,1);
}
.btn-outline i, .btn-outline span { position:relative; z-index:1; }
.btn-outline:hover { border-color:var(--gold); }
.btn-outline:hover::before { transform:scaleX(1); }

/* 공통 닥터 카드 토글 버튼 */
.doc-more-btn {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:24px; background:none;
  border:1px solid rgba(140,90,58,.3); cursor:pointer;
  font-family:'Pretendard',sans-serif;
  font-size:10px; font-weight:400; letter-spacing:.14em;
  color:var(--warm); padding:10px 20px; align-self:flex-start;
  transition:border-color .25s, color .25s;
}
.doc-more-btn:hover { border-color:var(--gold-h); color:var(--gold-h); }
.doc-more-btn.open i { transform:rotate(45deg); }
.doc-more-btn i { transition:transform .3s; font-size:16.5px; }

.doc-extra {
  max-height:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.25,.46,.45,.94), padding-top .3s;
}
.doc-extra.open { max-height:360px; padding-top:16px; margin-top:16px; border-top:1px solid var(--gb); }
.doc-extra-list { list-style:none; }
.doc-extra-list li {
  font-size:13.5px; font-weight:400; line-height:2;
  color:rgba(60,44,28,.55); letter-spacing:.01em;
  padding:3px 0;
  display:flex; align-items:flex-start; gap:10px;
}
.doc-extra-list li::before { content:'·'; color:rgba(140,90,58,.4); flex-shrink:0; font-size:10px; margin-top:2px; }

/* ── 모바일 공통 ── */
@media(max-width:900px) {
  .nav-menu li > a { font-size:clamp(20px,5.5vw,26px); }
  .np-items a      { font-size:clamp(18px,5vw,24px); }
}

/* ════════════════════════════════════════════
   퀵바 — 오른쪽 고정 플로팅 메뉴
════════════════════════════════════════════ */
#quickbar {
  position:fixed;
  right:0; top:50%;
  transform:translateY(-50%) translateX(100%);
  z-index:900;
  display:flex; flex-direction:column;
  align-items:center;
  background:rgba(26,17,10,.92);
  backdrop-filter:blur(12px);
  border-left:1px solid rgba(196,154,104,.2);
  border-top:1px solid rgba(196,154,104,.15);
  border-bottom:1px solid rgba(196,154,104,.15);
  padding:8px 0;
  transition:transform .45s cubic-bezier(.77,0,.175,1);
}
#quickbar.qb-visible {
  transform:translateY(-50%) translateX(0);
}

.qb-item {
  display:flex; flex-direction:column; align-items:center;
  gap:5px;
  padding:14px 16px;
  text-decoration:none; background:none; border:none; cursor:pointer;
  color:rgba(210,195,170,.55);
  transition:color .2s, background .2s;
  width:64px;
  position:relative;
}
.qb-item:hover { color:rgba(220,200,170,.95); background:rgba(196,154,104,.08); }

/* 카카오 특별 색상 */
.qb-kakao:hover { color:#f9e000; }

.qb-icon {
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
}
.qb-icon svg { width:18px; height:18px; }

.qb-label {
  font-family:'Pretendard',sans-serif;
  font-size:9px; font-weight:400; letter-spacing:.06em;
  white-space:nowrap; color:inherit;
  line-height:1;
}

.qb-divider {
  width:24px; height:1px;
  background:rgba(196,154,104,.2);
  margin:4px 0;
}

/* TOP 버튼 */
.qb-top { }

/* 툴팁 (hover 시 왼쪽) */
.qb-item::before {
  content:attr(aria-label);
  position:absolute; right:calc(100% + 8px);
  top:50%; transform:translateY(-50%);
  background:rgba(26,17,10,.9);
  color:rgba(220,200,170,.9);
  font-family:'Pretendard',sans-serif;
  font-size:11px; font-weight:400; letter-spacing:.04em;
  padding:5px 10px; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
  transform:translateY(-50%) translateX(4px);
}
.qb-item:hover::before {
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

@media(max-width:900px) {
  #quickbar {
    top:auto; bottom:0; right:0; left:0;
    flex-direction:row;
    transform:translateY(100%);
    border-left:none; border-top:1px solid rgba(196,154,104,.2);
    border-bottom:none; border-right:none;
    width:100%;
    justify-content:space-around;
    padding:0;
  }
  #quickbar.qb-visible {
    transform:translateY(0);
  }
  .qb-item { width:auto; flex:1; padding:12px 8px; }
  .qb-item::before { display:none; }
  .qb-divider { display:none; }
  .qb-label { font-size:9px; }
}

/* ── Footer 전화번호 ── */
.foot-tel {
  display:block; margin-top:20px;
  font-family:'Marcellus','Pretendard',sans-serif;
  font-size:clamp(22px,2.2vw,30px); font-weight:400; letter-spacing:.04em;
  color:rgba(210,195,175,.75); text-decoration:none;
  transition:color .2s;
}
.foot-tel:hover { color:var(--cream); }
.foot-tel-label {
  font-family:'DM Sans',sans-serif;
  font-size:10px; letter-spacing:.18em; text-transform:lowercase;
  color:rgba(196,154,104,.6); margin-right:8px;
  vertical-align:middle;
}

/* ── WeChat QR 팝업 ── */
.wechat-modal {
  position:fixed; inset:0; z-index:1000;
  background:rgba(26,17,10,.7);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.wechat-modal.open { opacity:1; pointer-events:all; }
.wechat-modal-box {
  background:var(--cream);
  padding:24px 24px 20px;
  position:relative;
  max-width:360px; width:90%;
  text-align:center;
  transform:translateY(12px);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
}
.wechat-modal.open .wechat-modal-box { transform:translateY(0); }
.wechat-modal-close {
  position:absolute; top:12px; right:12px;
  width:32px; height:32px;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--warm); transition:color .2s;
}
.wechat-modal-close:hover { color:var(--dark); }
.wechat-modal-close svg { width:16px; height:16px; }
.wechat-modal-label {
  font-family:'DM Sans',sans-serif;
  font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.wechat-modal-img {
  width:100%; max-width:100%;
  display:block; margin:0 auto 12px;
}
.wechat-modal-desc {
  font-size:12px; font-weight:400; line-height:1.8;
  color:rgba(60,44,28,.5); letter-spacing:.01em;
}
@media(max-width:900px) {
  .wechat-modal-box { max-width:320px; padding:20px 20px 16px; }
}

/* ── Today 진료시간 표시 ── */
.today-badge {
  display:inline-block;
  font-family:'DM Sans',sans-serif;
  font-size:8px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  border-radius:20px;
  padding:1px 6px;
  margin-left:8px;
  vertical-align:middle;
  animation:todayBlink 1.4s ease-in-out infinite;
  line-height:1.6;
}
@keyframes todayBlink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}