/* ════════════════════════════════════════════
   layout.css
   그리드 / 포지셔닝 / 레이아웃 구조 전용
   공통 컴포넌트 배치에 관한 규칙
════════════════════════════════════════════ */

/* ── 기본 리셋 & html ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--cream);
  color:var(--dark);
  font-family:'Pretendard',sans-serif;
  font-weight:400;
  overflow-x:hidden;
}

/* ── HEADER ── */
#hdr {
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between;
  padding:36px 56px;
  transition:padding .5s, background .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
#hdr.sx {
  background:rgba(245,240,232,.2);
  backdrop-filter:blur(16px);
  padding:20px 56px;
  border-color:var(--gb);
}

/* ── NAV 오버레이 ── */
#nav {
  position:fixed; inset:0; z-index:290;
  background:var(--cream);
  display:flex; align-items:stretch;
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
  transition:clip-path .75s cubic-bezier(.77,0,.175,1);
  pointer-events:none; overflow:hidden;
}
#nav.on {
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  pointer-events:all;
}

.nav-l {
  width:340px; flex-shrink:0;
  border-right:1px solid var(--gb);
  padding:130px 52px 60px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:2;
}
.nav-r { flex:1; position:relative; overflow:hidden; }

.nav-panel {
  position:absolute; inset:0;
  padding:130px 68px 60px;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; pointer-events:none; visibility:hidden;
  transform:translateX(28px) translateZ(0);
  transition:opacity .28s ease, transform .32s cubic-bezier(.25,.46,.45,.94), visibility 0s .28s;
  isolation:isolate;
}
.nav-panel.on {
  opacity:1; pointer-events:all; visibility:visible;
  transform:translateX(0) translateZ(0);
  transition:opacity .32s ease, transform .36s cubic-bezier(.25,.46,.45,.94), visibility 0s 0s;
}
.nav-panel.out {
  opacity:0; pointer-events:none; visibility:hidden;
  transform:translateX(-20px) translateZ(0);
  transition:opacity .16s ease, transform .2s ease, visibility 0s 0s;
}

/* ── FOOTER ── */
#footer {
  background:#1a110a;
  position:relative;
  overflow:hidden;
  padding:0 0 40px;
}
.foot-svg-wrap {
  position:relative; width:100%; height:2px;
  overflow:visible;
}
.foot-svg { width:100%; height:2px; display:block; overflow:visible; }

/* SVG 라인 — footer 진입 시 .foot-svg-animate 클래스로 트리거 */
@keyframes fsvgDraw { to { stroke-dashoffset:0; } }
@keyframes fsvgDot  { to { opacity:1; } }

.foot-svg-animate .fsvg-line {
  animation:fsvgDraw 2.2s cubic-bezier(.77,0,.175,1) .1s forwards;
}
.foot-svg-animate .fsvg-dot         { animation:fsvgDot .4s ease 2.2s forwards; }
.foot-svg-animate .fsvg-dot.fsvg-d5 { animation-delay:2.3s; }

.foot-in { padding:48px 56px 0; }

/* 브랜드 타이포 행 */
.foot-brand-row {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border-bottom:1px solid rgba(140,90,58,.15);
  margin-bottom:40px;
}
.foot-logo-link { display:block; line-height:0; margin-bottom:0; }
.foot-logo-svg {
  height:clamp(28px,3.5vw,48px);
  width:auto;
  fill:rgba(210,195,175,.75);
  transition:fill .25s;
}
.foot-logo-link:hover .foot-logo-svg { fill:var(--cream); }

/* 중간 3열 */
.foot-mid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:0 64px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(140,90,58,.12);
  margin-bottom:32px;
  align-items:start;
}

/* 진료시간 */
.foot-hours-grid {
  display:grid; grid-template-columns:auto 1fr;
  gap:8px 24px;
  font-family:'Pretendard',sans-serif;
  font-size:12px; font-weight:400;
}
.foot-hours-grid dt { color:rgba(210,195,175,.4); letter-spacing:.02em; }
.foot-hours-grid dd { color:rgba(210,195,175,.7); letter-spacing:.04em; margin:0; }
.foot-hours-grid .cl { color:rgba(210,195,175,.3); }

/* soc 위치 조정 */
.foot-hours .foot-soc,
.foot-mid > div:last-child .foot-soc { margin-top:32px; }

.foot-bot {
  display:flex; align-items:flex-start;
  justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}

/* ── 서브페이지 공통 히어로 영역 ── */
.sub-hero { padding-top:140px; background:var(--cream); }
.sub-hero-inner { padding:0 56px; }

/* 서브 탭/서브네비 sticky 베이스 */
.sub-subnav {
  display:flex;
  border-top:1px solid var(--gb);
  border-bottom:1px solid var(--gb);
  position:sticky;
  top:60px;
  z-index:200;
  background:rgba(245,240,232,.96);
  backdrop-filter:blur(16px);
  transition:top .5s;
}
.sub-subnav a {
  display:flex; align-items:center;
  padding:18px 32px;
  border-right:1px solid var(--gb);
  position:relative;
}
.sub-subnav a:last-child { border-right:none; }
.sub-subnav a::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:1px; background:var(--gold);
  transform:scaleX(0);
  transition:transform .35s cubic-bezier(.77,0,.175,1);
}
.sub-subnav a:hover::after,
.sub-subnav a.active::after { transform:scaleX(1); }

/* ── SCROLL REVEAL 베이스 ── */
.rv {
  opacity:0; transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.25,.46,.45,.94), transform .9s cubic-bezier(.25,.46,.45,.94);
}
.rv.vis { opacity:1; transform:translateY(0); }
.rv.d1  { transition-delay:.12s; }
.rv.d2  { transition-delay:.24s; }
.rv.d3  { transition-delay:.36s; }

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media(max-width:900px) {
  #hdr, #hdr.sx { padding:18px 24px; }

  #nav { flex-direction:column; overflow-y:auto; }
  .nav-l {
    width:100%; border-right:none;
    border-bottom:1px solid var(--gb);
    padding:100px 24px 28px;
    justify-content:flex-start;
  }
  .nav-r { padding:16px 24px 48px; }
  /* 모바일: 기본 숨김, mob-open 클래스일 때만 표시 */
  .nav-panel,
  .nav-panel.on,
  .nav-panel.out {
    position:relative; padding:0;
    opacity:0; visibility:hidden;
    max-height:0; overflow:hidden;
    transform:none; transition:max-height .35s ease, opacity .25s ease;
    pointer-events:none; margin-bottom:0;
  }
  .nav-panel.mob-open {
    opacity:1; visibility:visible;
    max-height:500px;
    pointer-events:all;
    padding:16px 0 24px;
  }

  /* 모바일 대메뉴 화살표 회전 */
  .nav-menu li .nav-arr { transition:transform .3s ease; display:inline-block; }
  .nav-menu li.mob-open .nav-arr { transform:rotate(90deg); }

  .foot-in { padding:32px 24px 0; }
  .foot-brand-row {
  flex-direction:column; align-items:flex-start; gap:0; flex-direction:column; gap:12px; padding-bottom:32px; margin-bottom:32px; }
  .foot-logo-big { font-size:clamp(40px,12vw,64px); }
  .foot-mid { grid-template-columns:1fr; gap:40px; padding-bottom:36px; margin-bottom:24px; }
  .foot-bot { flex-direction:column; gap:16px; }
  .foot-legal-nav {
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:10px 0;
    margin-top:32px;
    padding-top:16px;
    padding-bottom:16px;
  }
  .foot-legal-nav a {
    font-size:11px;
    width:100% !important;
    flex:none !important;
  }

  .sub-hero-inner { padding:0 24px; }
  .sub-subnav { overflow-x:auto; scrollbar-width:none; top:58px; }
  .sub-subnav::-webkit-scrollbar { display:none; }
  .sub-subnav a { padding:14px 20px; white-space:nowrap; }
}

/* ── Footer 그레인 효과 ── */
#footer::before {
  content:'';
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  opacity:.65;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='0.08'/%3E%3C/svg%3E");
  background-size:200px 200px;
  background-repeat:repeat;
  mix-blend-mode:overlay;
}
#footer .foot-svg-wrap,
#footer .foot-in { position:relative; z-index:1; }

/* ── Footer 법적고지 링크 ── */
.foot-legal-nav {
  display:flex; flex-wrap:wrap; gap:4px 20px;
  margin-top:48px;
  padding-top:24px;
  padding-bottom:24px;
  border-top:1px solid rgba(140,90,58,.15);
  width:100%;
}
.foot-legal-nav a {
  font-family:'Pretendard',sans-serif;
  font-size:12px; font-weight:400; letter-spacing:.02em;
  color:rgba(210,195,170,.6); text-decoration:none;
  transition:color .2s;
}
.foot-legal-nav a:hover { color:rgba(230,215,190,.95); }