/* site.css — 프론트 공통(GNB·푸터) 스타일.
   예전에는 gnb.php·foot.php 안에 <style> 로 박혀 매 요청마다 다시 내려갔다.
   외부 파일로 빼서 브라우저가 한 번 받고 캐시하게 한다.
   버전은 asset_ver() 가 파일 수정시각으로 붙인다(?v=...). */

/* 브라우저 기본 여백 없애기 + 화면 높이 채우기.
   브라우저는 body 에 8px 안팎의 기본 margin 을 준다. 그대로 두면 GNB·푸터가
   화면 끝까지 안 닿고 상하좌우에 흰 틈이 생긴다.
   또 글이 짧으면 푸터 아래로 빈 바닥이 보인다. body 를 세로 플렉스로 만들고
   최소 높이를 화면만큼 줘, 내용이 짧아도 푸터가 화면 맨 아래에 붙게 한다.
   우리 GNB(.lpg)·푸터(.lpf) 가 든 문서 = 우리가 그리는 페이지일 때만.
   고객사가 자기 헤더를 쓰면 site.css 가 그쪽에도 실릴 수 있으므로,
   무조건 건드리지 않고 우리 요소가 있을 때로 범위를 좁힌다.
   :has() 는 2023년부터 모든 최신 브라우저가 지원한다. */
body:has(.lpg), body:has(.lpf) {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 푸터를 맨 아래로 민다. 내용이 짧으면 이 auto 여백이 늘어나 바닥에 붙고,
   내용이 길면 평소처럼 흐른다(위 margin-top 88px 은 길 때의 간격). */
body:has(.lpf) .lpf { margin-top: auto; }


/* 글꼴. board.css 는 .lp-bd-* 안에만 글꼴을 걸어서, GNB 와 푸터는
   브라우저 기본 글꼴(노토산스 등)로 나왔다. 같은 화면인데 글꼴이 갈렸다.
   두 파일이 같은 글꼴을 두 번 적지 않도록 여기서도 같은 목록을 쓴다.
   Pretendard 를 못 받으면 기기 글꼴로 이어진다 */
.lpg, .lpf {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ── GNB (상단 메뉴) ── */
.lpg { background: #fff; border-bottom: 1px solid #E9ECF3; }
.lpg__in {
  display: flex; align-items: center; gap: 28px;
  max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 62px;
}
.lpg__logo {
  display: inline-flex; align-items: center;
  font-size: 17px; font-weight: 700; color: #14171F;
  text-decoration: none; letter-spacing: -.3px; white-space: nowrap;
  /* 로고가 길면 다른 것을 밀어내며 늘어난다. 자기 폭 안에서 줄어들게 둔다 */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.lpg__logoimg { display: block; max-height: 34px; width: auto; }
.lpg__ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.lpg__a {
  /* 살짝만 굵게. 700 은 로고와 무게가 같아져 무엇이 이름인지 흐려진다 */
  display: block; padding: 6px 0; font-size: 15px; font-weight: 600; color: #4B5162;
  text-decoration: none; white-space: nowrap;
}
.lpg__a:hover { color: #2F6BFF; }
.lpg__a.is-on { color: #14171F; font-weight: 600; box-shadow: inset 0 -2px 0 #2F6BFF; }
/* 오른쪽 끝으로 민다. 메뉴가 왼쪽, 이 버튼이 오른쪽 */
.lpg__official {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border: 1px solid #D5DAE5; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: #14171F; text-decoration: none;
  white-space: nowrap; transition: border-color .15s, color .15s;
}
.lpg__official:hover { border-color: #2F6BFF; color: #2F6BFF; }
.lpg__official svg { width: 15px; height: 15px; }

/* ── 햄버거(접는 메뉴) — 좁은 화면에서만 ──
   넓은 화면에서는 늘 숨긴다. 메뉴는 한 줄로 나온다.
   예전에는 메뉴가 다섯 개 넘을 때만 접었는데, 로고가 길면 셋만 있어도
   메뉴가 화면 밖으로 밀려 안 보였다. 좁으면 개수와 상관없이 접는다. */
.lpg__toggle {
  display: none; margin-left: auto; width: 42px; height: 42px;
  padding: 0; border: 0; background: none; cursor: pointer;
  align-items: center; justify-content: center;
}
.lpg__bars { display: block; width: 22px; height: 16px; position: relative; }
.lpg__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: #14171F; transition: transform .2s var(--lp-ease, ease), opacity .2s;
}
.lpg__bars span:nth-child(1) { top: 0; }
.lpg__bars span:nth-child(2) { top: 7px; }
.lpg__bars span:nth-child(3) { top: 14px; }
/* 열리면 X 로 */
.lpg.is-open .lpg__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lpg.is-open .lpg__bars span:nth-child(2) { opacity: 0; }
.lpg.is-open .lpg__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .lpg__in { gap: 16px; height: 54px; padding: 0 14px; }
  /* 로고에 남는 자리를 다 주되, 햄버거와 공식 홈 자리는 남긴다.
     이미지가 길면 그 안에서 줄어든다 */
  .lpg__logo { font-size: 15px; flex: 1 1 auto; }
  .lpg__logoimg { max-height: 28px; max-width: 100%; object-fit: contain; object-position: left; }
  .lpg__ul { gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .lpg__ul::-webkit-scrollbar { display: none; }
  .lpg__a { font-size: 14px; }
  /* 좁은 화면에서는 글자를 접고 화살표만 남긴다. 자리를 많이 차지하면
     정작 메뉴가 안 보인다 */
  .lpg__official { margin-left: 8px; padding: 7px 10px; font-size: 0; gap: 0; }
  .lpg__official svg { width: 18px; height: 18px; }

  /* 메뉴가 많으면(.is-many) 햄버거로 접는다. 로고는 그대로, 메뉴 ul 은
     단추 아래로 펼쳐지는 패널이 된다. 적으면 이 블록이 안 걸려 한 줄 유지. */
  .lpg.is-many .lpg__toggle { display: inline-flex; }
  .lpg.is-many .lpg__in { position: relative; }
  .lpg.is-many .lpg__ul {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; overflow: visible;
    background: #fff; border-bottom: 1px solid #E9ECF3;
    box-shadow: 0 8px 20px rgba(20, 23, 31, .08);
    padding: 6px 0; margin: 0;
    max-height: 0; opacity: 0; visibility: hidden;
    transition: max-height .24s ease, opacity .18s ease, visibility .24s;
  }
  .lpg.is-many.is-open .lpg__ul {
    max-height: 70vh; opacity: 1; visibility: visible; overflow-y: auto;
  }
  .lpg.is-many .lpg__ul li { width: 100%; }
  .lpg.is-many .lpg__a {
    display: block; padding: 13px 18px; font-size: 15px;
    box-shadow: none; border-bottom: 1px solid #F2F3F7;
  }
  .lpg.is-many .lpg__ul li:last-child .lpg__a { border-bottom: 0; }
  .lpg.is-many .lpg__a.is-on { box-shadow: inset 3px 0 0 #2F6BFF; background: #F7F9FF; }
  /* 공식 홈 버튼은 햄버거 옆에 그대로 둔다 (오른쪽 끝) */
  .lpg.is-many .lpg__toggle { margin-left: auto; }
  .lpg.is-many .lpg__official { margin-left: 4px; }
}

/* ── 푸터 (하단 회사 정보) ── */
.lpf { margin-top: 88px; padding: 72px 24px 64px; background: var(--lpf-bg, #14171F); }
.lpf__in { max-width: 1180px; margin: 0 auto; }

/* 좌우로 나눈다.
   왼쪽  업체명과 업체 정보(주소·전화·진료시간) — 읽는 글
   오른쪽 SNS 와 공식 홈페이지 — 눌러서 나가는 길

   읽을 것과 누를 것을 갈라 두면 눈이 헤매지 않는다.
   왼쪽을 넓게 두는 이유 — 주소와 진료시간이 길다.
   오른쪽은 오른끝으로 붙여, 가운데가 비어도 두 덩어리로 읽힌다 */
.lpf__cols {
  display: flex; flex-wrap: wrap; gap: 32px 48px;
  align-items: flex-start; justify-content: space-between; margin-bottom: 36px;
}
.lpf__col--info { flex: 1 1 460px; min-width: 0; }
.lpf__col--link {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 14px;
}

/* 푸터 글자·아이콘 색은 흰색에 투명도를 준다.
   색을 박아 두면(#8A91A3) 배경만 테마를 따라가고 글자는 늘 푸르스름해
   갈색·초록 테마에서 겉돈다. 반투명이면 뒤 배경이 비쳐 톤이 저절로 맞는다 */
.lpf__name {
  margin: 0 0 18px; font-size: 28px; font-weight: 700;
  color: rgba(255, 255, 255, .96); letter-spacing: -.6px; line-height: 1.25;
}

/* SNS. 아이콘 톤을 배경에 맞춘다. 브랜드 색을 그대로 쓰면 어두운 바탕에서
   알록달록해져 정작 상호가 안 보인다. 얹으면 그때 밝아진다 */
.lpf__sns {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 8px; margin: 0; padding: 0; list-style: none;
}
.lpf__snsa {
  display: inline-flex; align-items: center; justify-content: center;
  /* 아이콘은 작게, 칸은 넓게. 로고가 칸을 꽉 채우면 답답해 보이고,
     손가락으로 누르는 자리라 칸 자체는 넉넉해야 한다 */
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .66);
  transition: background .16s ease, color .16s ease;
}
.lpf__snsa:hover { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .96); }
.lpf__snsico { width: 17px; height: 17px; }
/* 로고가 없는 곳은 첫 글자를 넣는다 (brand_icon 의 대비책) */
.lpf__snsico--txt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; font-size: 12px; font-weight: 700;
}

/* 공식 홈페이지. GNB 에도 있지만 아래까지 내려온 사람은 위로 안 올라간다 */
.lpf__official {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.lpf__official:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .32); }
.lpf__official svg { width: 15px; height: 15px; }
.lpf__ul {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 8px; padding: 0; list-style: none;
}
.lpf__ul li { font-size: 14px; color: rgba(255, 255, 255, .58); line-height: 1.7; }
/* 아이콘이 붙는 줄. 글자와 세로 가운데를 맞춘다.
   inline-flex 로 두면 줄이 길어져 넘어갈 때 아이콘이 첫 줄에 붙어 있는다 */
.lpf__li--ico { display: inline-flex; align-items: center; gap: 6px; }
.lpf__ico {
  flex: none; width: 15px; height: 15px;
  /* 글자보다 옅게. 아이콘이 글자보다 눈에 띄면 읽는 차례가 뒤집힌다 */
  color: rgba(255, 255, 255, .38);
}
.lpf__ul li + li { position: relative; padding-left: 19px; }
.lpf__ul li + li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 11px; margin-top: -5px; background: rgba(255,255,255,.15);
}
.lpf__a, .lpf__tel { color: rgba(255, 255, 255, .58); text-decoration: none; }
.lpf__tel { font-weight: 600; color: rgba(255, 255, 255, .96); }
.lpf__a:hover, .lpf__tel:hover { color: var(--lpf-link, #6E9BFF); }
.lpf__note { margin: 14px 0 0; font-size: 13px; color: rgba(255, 255, 255, .40); line-height: 1.7; }
/* 저작권 줄은 두 단 아래에 홀로 선다. 선 하나로 갈라 준다 */
.lpf__copy {
  margin: 0; padding-top: 24px; font-size: 13px; color: rgba(255, 255, 255, .32);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* 중단점을 GNB(720px)와 맞춘다. 예전에는 푸터만 640px 이라
   641~720px 사이에서 위는 접히고 아래는 안 접혀 어긋나 보였다 */
@media (max-width: 720px) {
  .lpf { margin-top: 60px; padding: 44px 20px 32px; }
  /* 좌우로 두면 오른쪽이 왼쪽 옆에 끼어 들쭉날쭉해진다. 위아래로 쌓는다.
     그런데 그냥 쌓기만 하면 글자만 줄줄이 놓여 허전해 보인다.
     그래서 아래 단(SNS·공식 홈) 위에 선을 그어 두 덩어리로 갈라 준다.
     어두운 바탕이라 선은 아주 옅게 — 진하면 화면이 토막나 보인다 */
  .lpf__cols { flex-direction: column; gap: 0; margin-bottom: 0; }
  .lpf__col--info { flex: 1 1 auto; width: 100%; }
  .lpf__col--link {
    width: 100%; align-items: flex-start;
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    /* 아이콘 줄과 단추가 붙어 보이지 않게 */
    gap: 18px;
  }
  .lpf__sns { justify-content: flex-start; gap: 10px; }
  /* 좁은 화면에서는 누르는 자리가 넉넉해야 한다 */
  .lpf__snsa { width: 46px; height: 46px; }
  .lpf__official { padding: 11px 18px; font-size: 14px; }

  .lpf__name { font-size: 22px; margin-bottom: 16px; }
  /* 한 줄에 늘어놓으면 줄마다 길이가 달라 들쭉날쭉해진다.
     한 줄에 하나씩 쌓고, 그러면 가운뎃점 구분선은 필요 없다 */
  .lpf__ul { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lpf__ul li + li { padding-left: 0; }
  .lpf__ul li + li::before { display: none; }
  /* 두 묶음(회사 정보 / 연락처) 사이를 벌려 한 덩어리로 안 보이게 */
  .lpf__ul + .lpf__ul { margin-top: 18px; }
  .lpf__copy { margin-top: 28px; padding-top: 20px; }
}