/* 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 (상단 메뉴) ── */
/* 상단 띠에 층을 세운다.
   [버그] 층이 없어서 글 화면의 떠 있는 막대(.lp-bd-bar, z-index: 50)가
   언어 목록과 햄버거 메뉴를 덮었다. 목록을 열어도 막대 뒤로 숨었다.
   상단 띠는 그 위에 있어야 한다. 아래로 펴지는 것들이 여기 달려 있다 */
.lpg { position: relative; z-index: 60; background: #fff; border-bottom: 1px solid #E9ECF3; }
/* 사이를 gap 하나로 맡기지 않는다.
   gap 은 모든 틈에 똑같이 걸린다. 그런데 여기는 두 덩어리다.
     로고 ↔ 메뉴      넉넉해야 한다 (읽는 자리)
     언어 ↔ 공홈 ↔ 햄버거   붙어야 한다 (누르는 자리, 한 묶음으로 보여야)
   하나로 맞추면 한쪽이 늘 어색하다. 자리마다 따로 준다 */
.lpg__in {
  display: flex; align-items: center; gap: 0;
  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; max-width: 260px; width: auto; object-fit: contain; }
/* 로고와 메뉴 사이는 넉넉하게. 읽는 자리다 */
.lpg__ul { display: flex; gap: 22px; margin: 0 0 0 28px; 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; }
/* [버그] 사파리가 사업자등록번호를 전화번호로 여겨 파란 링크로 바꿨다.
   숫자 열 자리에 하이픈이 있으면 전화로 본다.
   x-apple-data-detectors 로 걸린 것을 원래 색으로 되돌린다.
   (마크업의 lpf__nodial 과 짝이다) */
.lpf__nodial a,
.lpf__nodial a:link,
.lpf__nodial a:visited,
.lpf__nodial a[x-apple-data-detectors] {
  color: inherit !important; text-decoration: none !important;
  pointer-events: none; cursor: text;
}

/* ── 언어 바꾸기 ─────────────────────────
   구글 번역 위젯을 우리 생김새로 감싼 것. 오른쪽 끝, 공식 홈 단추 왼쪽에 선다 */
/* 목록이 상단 띠 밖으로 펴진다. 띠보다 한 층 더 올려 둔다 */
.lpg__lang { position: relative; z-index: 2; flex: none; margin-left: auto; }
/* 공식 홈 단추가 있으면 그쪽이 오른쪽 끝을 맡는다 */
.lpg__lang + .lpg__official { margin-left: 8px; }
/* 공식 홈 단추와 나란히 서므로 생김새를 맞춘다.
   선 색·둥글기·높이가 다르면 둘이 다른 종류의 단추로 보인다 */
/* 공식 홈 단추와 넷을 다 맞춘다(padding·font-size·line-height·그림 높이).
   높이를 숫자로 박지 않는다 — 글자 크기를 바꿀 때 또 어긋난다 */
.lpg__langnow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid #D5DAE5; background: transparent;
  color: #14171F; font: inherit; font-size: 14px; font-weight: 600;
  line-height: 1.35; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.lpg__langnow:hover { border-color: #14171F; }
.lpg__flag {
  /* 공식 홈의 화살표(15px)와 같은 높이. 안쪽 그림이 다르면 단추 높이가 갈린다 */
  display: block; width: 20px; height: 15px; flex: none;
  object-fit: cover; border-radius: 2px;
  /* 못 받아왔을 때 빈 칸이 튀지 않게 옅은 바탕을 깔아 둔다 */
  background: #EEF0F5;
}
.lpg__langar {
  width: 6px; height: 6px; margin-top: -3px; flex: none;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease, margin-top .2s ease;
}
.lpg__lang.is-open .lpg__langar { margin-top: 3px; transform: rotate(225deg); }

.lpg__langlist {
  position: absolute; z-index: 1; top: calc(100% + 8px); right: 0; min-width: 138px;
  padding: 6px; background: #fff; border: 1px solid #E7E9F1; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.lpg__lang.is-open .lpg__langlist { opacity: 1; visibility: visible; transform: translateY(0); }
.lpg__langlist button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 6px; background: transparent;
  color: #333; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background .15s ease;
}
.lpg__langlist button:hover { background: #F6F7FB; }

/* 구글이 스스로 그리는 것들은 감춘다. 우리 고르개로 대신하기 때문이다 */
#lp_gt { display: none; }
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate {
  display: none !important; visibility: hidden !important; height: 0 !important;
}
/* [중요] 구글이 body 를 40px 아래로 민다. 그대로 두면 상단 띠가 잘린다 */
body { top: 0 !important; }
/* 번역된 글자에 노란 밑줄을 긋는 것도 끈다. 글 읽기를 방해한다 */
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* 언어 고르개가 앞의 빈자리를 다 먹으므로(margin-left: auto)
   이 단추는 그 옆에 8px 만 띄워 붙어 선다. 셋이 한 묶음으로 보여야 한다.
   언어 고르개가 없을 때를 대비해 auto 를 함께 둔다 — 그때는 이것이 끝으로 민다 */
/* [버그] 둘의 높이가 달랐다. 패딩을 같게 해도 안 맞은 이유는
   line-height 가 한쪽에만 있었기 때문이다. 안쪽 그림 크기도 서로 달랐다.

   높이를 정하는 것은 넷이다. 넷을 다 맞춰야 같아진다.
     padding · font-size · line-height · 안쪽 그림 높이 */
.lpg__official {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid #D5DAE5; border-radius: 8px;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  color: #14171F; text-decoration: none;
  white-space: nowrap; transition: border-color .15s, color .15s;
}
/* 화살표와 국기를 같은 높이로. 안쪽 그림이 글자보다 크면 그만큼 단추가 커진다 */
.lpg__official svg { width: 15px; height: 15px; flex: none; }

/* [버그] 넷을 맞췄는데도 좁은 화면에서 3px 이 어긋났다.
   번역 단추는 글자를 감추므로(국기만 남는다) 글자가 차지하던 줄 높이가
   통째로 사라진다. 공홈은 "공홈" 글자가 남아 그만큼 높다.

     공홈  글자 13 × 1.35 = 17.6  → 17.6 + 패딩 14 + 선 2 = 33.6
     번역  글자 없음, 국기 14     → 14   + 패딩 14 + 선 2 = 30

   안쪽에 무엇이 있든 글자 한 줄만큼은 자리를 잡아 둔다.
   em 으로 적어 두면 글자 크기를 바꿔도 따라온다 */
.lpg__official,
.lpg__langnow {
  box-sizing: border-box;
  min-height: calc(1.35em + 18px);   /* 줄 높이 + 패딩 8·8 + 선 1·1 */
}
.lpg__official:hover { border-color: #2F6BFF; color: #2F6BFF; }
.lpg__official svg { width: 15px; height: 15px; }

/* ── 햄버거(접는 메뉴) — 좁은 화면에서만 ──
   넓은 화면에서는 늘 숨긴다. 메뉴는 한 줄로 나온다.
   예전에는 메뉴가 다섯 개 넘을 때만 접었는데, 로고가 길면 셋만 있어도
   메뉴가 화면 밖으로 밀려 안 보였다. 좁으면 개수와 상관없이 접는다. */
.lpg__toggle {
  display: none; margin-left: 8px; 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 { height: 54px; padding: 0 14px; }
  /* ── 언어·공식 홈 단추 ──────────────────
     [버그] 둘의 높이가 갈렸다(번역 30px · 공홈 33px).
     패딩·글자·줄높이를 맞춰도 안 됐다. **안쪽에서 가장 높은 것**이
     서로 달랐기 때문이다.

       공홈   "공홈" 글자 한 줄  13 × 1.35 = 17.6px
       번역   글자를 감춰 국기뿐          14.0px

     높이를 숫자로 못박고 세로 패딩을 없앤다. 안쪽에 무엇이 들었든 안 흔들린다.
     (em 으로는 안 된다 — 공홈은 글자를 감추려고 font-size: 0 을 써서
      거기서 em 이 0 이 된다) */
  .lpg__official,
  .lpg__langnow {
    height: 34px; min-height: 34px;
    padding: 0 10px; font-size: 13px;
  }
  /* 글자를 "공홈" 으로 줄인다. 화살표만 두었더니 어디로 가는지 몰랐다 */
  .lpg__official { font-size: 0; gap: 3px; }
  .lpg__official::before { content: "공홈"; font-size: 13px; font-weight: 600; }
  .lpg__official svg { width: 14px; height: 14px; }
  /* 번역은 글자를 빼고 국기만. 셋이 나란히 서면 자리가 없다 */
  .lpg__langnow { gap: 4px; }
  .lpg__langnow > span[data-lang-name] { display: none; }
  .lpg__flag { width: 19px; height: 14px; }
  /* 화살표가 국기·글자에 견줘 컸다. 국기 옆 표시라 작아야 눈에 안 걸린다 */
  .lpg__langar { width: 5px; height: 5px; margin-top: -2px; }
  .lpg.is-open .lpg__langar { margin-top: 2px; }
  /* 오른쪽 셋 사이를 좁힌다. 좁은 화면에서 8px 은 한 묶음으로 안 보인다.
     햄버거가 없는 게시판(메뉴 적음)에서도 같은 값을 쓴다 */
  .lpg__lang + .lpg__official { margin-left: 4px; }


  /* 로고에 남는 자리를 다 주되, 햄버거와 공식 홈 자리는 남긴다.
     이미지가 길면 그 안에서 줄어든다 */
  .lpg__logo { font-size: 15px; flex: 1 1 auto; }
  /* 좁은 화면에서는 로고가 자리를 다 먹지 않게 한 번 더 조인다 */
  .lpg__logoimg { max-height: 28px; max-width: 90%; object-fit: contain; object-position: left; }
  /* 좁으면 로고와 메뉴 사이도 줄인다. 28px 은 자리를 너무 먹는다 */
  .lpg__ul { gap: 16px; margin-left: 16px; overflow-x: auto; scrollbar-width: none; }
  .lpg__ul::-webkit-scrollbar { display: none; }
  .lpg__a { font-size: 14px; }
  /* 좁은 화면에서는 "공식 홈페이지" 를 "공홈" 으로 줄인다.
     화살표만 두었더니 어디로 가는 단추인지 몰랐다. 햄버거로 접고 나면
     그만한 자리는 남는다. 원래 글자는 감추고 짧은 이름을 대신 보인다 */

  /* 메뉴가 많으면(.is-many) 햄버거로 접는다. 로고는 그대로, 메뉴 ul 은
     단추 아래로 펼쳐지는 패널이 된다. 적으면 이 블록이 안 걸려 한 줄 유지. */
  /* 좁은 화면 차례: 로고 …… [언어] [공식 홈] [햄버거]
     메뉴를 여는 햄버거가 맨 끝이라 엄지가 가장 닿기 쉬운 자리에 온다.

     마크업 순서는 로고 → 햄버거 → 메뉴 → 언어 → 공식 홈이다.
     탭으로 훑는 차례는 그대로 두고 보이는 자리만 order 로 옮긴다.
     (햄버거는 메뉴를 여는 단추라 메뉴 바로 앞에 적혀 있어야 뜻이 통한다)

     언어가 앞의 빈자리를 다 먹어 셋이 오른쪽에 붙어 선다 */
  /* 메뉴가 없어 햄버거가 안 나오는 게시판도 있다. 그때는 order 가 걸리지 않아
     언어 → 공식 홈 차례가 그대로 지켜진다(마크업 순서와 같다) */
  .lpg.is-many .lpg__in { display: flex; align-items: center; }
  .lpg.is-many .lpg__lang { order: 2; margin-left: auto; }
  /* 셋 사이는 8px 씩. 한 묶음으로 보여야 한다 */
  .lpg.is-many .lpg__official { order: 3; margin-left: 4px; }
  .lpg.is-many .lpg__toggle { display: inline-flex; order: 4; margin-left: 4px; }
  .lpg.is-many .lpg__in { position: relative; }
  .lpg.is-many .lpg__ul {
    /* 상단 띠 밖으로 펴진다. 층을 안 주면 글 화면의 떠 있는 막대가 덮는다 */
    position: absolute; z-index: 1; 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; }
  /* 자리 잡기는 위 720px 블록에서 order 로 정한다.
     여기서 margin-left 를 또 주면 나중에 적힌 이것이 이겨서 차례가 흐트러진다.
     실제로 햄버거가 다시 오른쪽 끝으로 튀었다 */
}

/* ── 푸터 (하단 회사 정보) ── */
.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; }
}