/* site-v4 — 랜딩과 같은 머리글(알약 · EN | KO)과 아래 두 줄 띠 · 하늘 배경을 모든 하위 화면이 같이 씁니다 (2026-09-27 8차)
 *
 * 대표님 — 「계정 및 관리페이지가 완전히 별도의 랜딩으로 나눠진 느낌인데 … 파비콘부터 통일해주고 그냥 페이지 머지해줘
 *           뎁스만 다르게」. 실측: 랜딩은 닫힌 알약(191px · 가운데 · 누르면 펼침)인데 하위 화면은 늘 펼친 알약
 *           (360~415px)에 「로그인」 링크가 붙었고, 폰에서는 알약이 둘째 줄로 내려갔습니다.
 * 값은 vpn4.css(랜딩)의 알약 · 언어 칸과 같습니다. 이름이 겹치지 않게 변수는 --st- 로 둡니다.
 * 이 파일은 각 화면 CSS 뒤에 붙습니다(login-v4 · app-v4 · doc-v4 에서 옛 머리글 규칙은 걷어냈습니다).
 */

.site-top {
  --st-top: 30px;
  --st-h: 51px;
  --st-gutter: 60px;
  --st-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --st-ease-std: cubic-bezier(0.44, 0, 0.56, 1);
  position: relative; z-index: 30;
  height: calc(var(--st-top) + var(--st-h));
}
/* 하늘 배경 위 화면(로그인)은 머리글이 자리를 차지하지 않습니다 — 화면이 스스로 위 여백을 둡니다 */
.site-top--overlay { position: absolute; top: 0; left: 0; right: 0; height: 0; }

/* 알약 — 랜딩과 같은 191px 닫힌 알약 · 위 30px · 가운데. 줄 두 개를 누르면 링크 셋이 펼쳐집니다.
   ★ 하위 화면은 글이 긴 판이라 머리글이 페이지와 함께 올라갑니다(fixed 로 두니 EN | KO 가 본문 글자 위에 겹쳤습니다).
     맨 위에서의 자리 · 크기는 랜딩과 같습니다. */
.site-top .pill {
  position: absolute; top: var(--st-top); left: 50%; z-index: 30;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  width: auto; height: var(--st-h); margin: 0; padding: 0 18px 0 20px;
  background: #FFFFFF; border-radius: 14px; box-shadow: none;
  color: #000000; animation: none; flex-wrap: nowrap;
}
.site-top .pill a { color: inherit; text-decoration: none; }
.site-top .pill__brand { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
html[lang="ko"] .site-top .pill__brand { font-weight: 700; }
.site-top .pill__links { display: flex; align-items: center; gap: 22px; overflow: hidden; max-width: 0; opacity: 0; visibility: hidden; flex-wrap: nowrap; justify-content: flex-start; transition: max-width 0.7s var(--st-ease-io), opacity 0.7s var(--st-ease-io), visibility 0s linear 0.7s; }
.site-top .pill__links a { white-space: nowrap; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
html[lang="en"] .site-top .pill__links a { letter-spacing: 0; }
.site-top .pill__links a:hover { opacity: 0.55; }
.site-top .pill.is-open .pill__links { max-width: var(--open-w, 420px); opacity: 1; visibility: visible; transition-delay: 0s; }
.site-top .pill__toggle { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -13px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.site-top .pill__bars { display: grid; gap: 4px; }
.site-top .pill__bars i { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.7s var(--st-ease-io); }
.site-top .pill.is-open .pill__bars i:first-child { transform: translateY(3px) rotate(45deg); }
.site-top .pill.is-open .pill__bars i:last-child { transform: translateY(-3px) rotate(-45deg); }
.site-top .pill :focus-visible { outline: 2px solid #000000; outline-offset: 3px; }

/* 언어 — 알약과 같은 높이 중심, 오른쪽 끝은 본문 격자(여백 60). 밝은 바탕 화면은 is-dark 로 검정 글자 */
.site-top .langsw {
  position: absolute; z-index: 30;
  top: calc(var(--st-top) + var(--st-h) / 2 - 18px); right: var(--st-gutter); left: auto;
  display: flex; align-items: center; height: 36px; margin: 0;
  color: #FFFFFF; text-shadow: 0 1px 10px rgba(6, 18, 40, 0.35);
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0;
  transition: opacity 0.4s var(--st-ease-std);
  animation: none;
}
.site-top .langsw a { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 6px; color: inherit; text-decoration: none; opacity: 0.55; transition: opacity 0.4s var(--st-ease-std); }
.site-top .langsw a:last-child { padding-right: 0; }
.site-top .langsw a::after { content: ''; position: absolute; inset: -4px 0; }
.site-top .langsw a:hover { opacity: 1; }
.site-top .langsw a[aria-current] { opacity: 1; font-weight: 700; }
.site-top .langsw__bar { opacity: 0.4; }
.site-top .langsw :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.site-top .langsw.is-dark { color: #000000; text-shadow: none; }

@media (max-width: 767px) {
  .site-top { --st-top: 16px; --st-gutter: 16px; }
  .site-top .pill.is-open { gap: 14px; }
  .site-top .pill.is-open .pill__links { gap: 14px; }
  .site-top .pill.is-open .pill__brand { display: none; }
  .site-top .langsw a { padding: 0 5px; }
  html.is-menu .site-top .langsw { opacity: 0; pointer-events: none; }
}
@media (max-width: 400px) { .site-top .pill { left: calc(50% - 14px); } .site-top .pill.is-open { left: 50%; } }
@media (max-width: 350px) { .site-top .pill { left: calc(50% - 32px); } .site-top .pill.is-open { left: 50%; gap: 10px; padding: 0 14px 0 16px; } .site-top .pill.is-open .pill__links { gap: 10px; } }
@media (max-width: 374px) { html[lang="en"] .site-top .pill:not(.is-open) { gap: 8px; padding: 0 10px 0 14px; } }
@media (max-width: 340px) { html[lang="en"] .site-top .pill.is-open { gap: 8px; padding: 0 12px 0 14px; } html[lang="en"] .site-top .pill.is-open .pill__links { gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .site-top .pill__links, .site-top .pill__bars i, .site-top .langsw, .site-top .langsw a { transition: none; }
}

/* ------------------------------------------------------------ 아래 두 줄 띠 — 잘리면 「펼치기」 (8차 코솔 리뷰 F-001)
   대표님 「하단에는 작은 텍스트 2행만」 은 그대로 두고, 폭이 좁아 사업자 항목 · 약관 링크가 두 줄 밖으로 잘릴 때만
   띠 끝에 작은 단추가 생깁니다. 누르면 화면 아래에서 전체가 올라오는 판으로 펼쳐집니다(랜딩 모달 · 로그인 · 내 계정 · 관리 공통).
   띠마다 화면 CSS 의 선택자 무게가 달라 펼친 판의 값만 !important 로 이깁니다. */
.band-has-more { position: relative; padding-right: 32px !important; }
.band-more {
  position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  display: grid; place-items: center; margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%;
  background: rgba(6, 18, 40, 0.35); color: #FFFFFF; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.band-more[hidden] { display: none; }
.band-more::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; } /* 누르는 자리 44px */
.band-more svg { display: block; width: 14px; height: 14px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.band-more:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.band-open {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  z-index: 60 !important; width: auto !important; max-width: none !important; max-height: min(70svh, 560px) !important;
  margin: 0 !important; padding: 20px 52px calc(20px + env(safe-area-inset-bottom)) 20px !important;
  overflow: auto !important; border-radius: 18px 18px 0 0 !important;
  background: rgba(6, 18, 40, 0.94) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  color: rgba(255, 255, 255, 0.9) !important; opacity: 1 !important; transform: none !important;
  text-align: left !important; font-size: 12.5px !important; line-height: 1.7 !important; text-shadow: none !important;
}
.band-open > .lg-foot__lines, .band-open > .lgm__lines { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
.band-open dl, .band-open .site-footer__biz { display: block !important; }
.band-open dl > div { display: block !important; }
.band-open dl > div::after { content: none !important; }
.band-open .site-footer__policy, .band-open .site-footer__bottom { display: block !important; margin-top: 10px !important; }
.band-open .site-footer__policy::before, .band-open .site-footer__bottom::before { content: none !important; }
.band-open .band-more { top: 14px; right: 14px; bottom: auto; }
.band-open .band-more svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .band-more svg { transition: none; } }

.pill__cta { display: none; } /* vpn-m: 모바일 메뉴 판에만 보이는 「3일 무료로 시작하기」 — 데스크톱 알약에서는 숨깁니다 */

/* ============================================================ vpn-m — 모바일 머리 막대 · 메뉴 (2026-09-29)
 * 대표님 — 「모바일 쪽이 … 여백감이나 사이즈, 메뉴의 전체적인 비례 … 메뉴 모션 등 … 스크롤 내려도 스티키 이런것도 없고 …
 *           유사한 사용자경험을 느끼면서 미감 좋게」. 데스크톱(768 이상)은 정본 그대로이고, 아래는 767 이하에서만 켜집니다.
 * 실측(운영 390, 고치기 전): 떠 있는 EN | KO · 계정 단추가 배경 없이 본문 위를 지나가 구간마다 겹치거나 안 보였고,
 *   알약이 가운데서 14px 비껴 있었으며, 메뉴는 0.7초 동안 옆으로 늘어나며 브랜드가 「갓길V」로 잘리고 링크 높이는 16px,
 *   하위 화면 머리글은 스크롤과 함께 사라졌습니다.
 * 새 모양: 흰 알약을 화면 폭 막대(좌우 12 · 높이 52 · 안전 영역 반영)로 두고 그 안에 [브랜드 ··· EN | KO · 계정 · 메뉴] 한 줄.
 *   모든 화면에서 늘 붙어 있고(스크롤하면 옅은 그림자), 메뉴는 막대 아래로 같은 흰 카드가 내려옵니다(열기 240ms · 닫기 160ms,
 *   transform · opacity 만, 줄 높이 52, 뒤는 흐린 막). 조립은 site-v4.js 가 html.m-bar 를 붙인 뒤에만 — 스크립트가 없으면 예전 모양.
 */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html.m-bar {
    --mb-top: max(10px, calc(env(safe-area-inset-top) + 6px));
    --mb-h: 52px;
    --mb-side: 12px;
    --mb-ease-in: cubic-bezier(0.2, 0.8, 0.2, 1);
    --mb-ease-out: cubic-bezier(0.4, 0, 1, 1);
  }
  /* 막대 — 랜딩 알약(.pill)과 하위 화면 알약(.site-top .pill) 둘 다 */
  html.m-bar .pill {
    position: fixed !important; top: var(--mb-top) !important; left: var(--mb-side) !important; right: var(--mb-side) !important;
    width: auto !important; height: var(--mb-h) !important; margin: 0 !important; z-index: 40 !important;
    display: flex !important; align-items: center; justify-content: space-between; gap: 4px !important;
    padding: 0 4px 0 16px !important; border-radius: 16px !important;
    transform: none !important;
    box-shadow: 0 1px 0 rgba(6, 18, 40, 0.04);
    transition: box-shadow 0.2s var(--mb-ease-in), opacity 0.4s var(--mb-ease-in) !important;
  }
  html.m-bar.js:not(.is-ready) .pill:not(.site-top .pill) { opacity: 0; }
  html.m-bar.is-scrolled .pill, html.m-bar.is-mnav .pill { box-shadow: 0 10px 28px -14px rgba(6, 18, 40, 0.45), 0 1px 0 rgba(6, 18, 40, 0.06); }
  html.m-bar .pill .pill__brand { display: block !important; flex: 0 1 auto; min-width: 0; font-size: 19px; line-height: 1; white-space: nowrap; }
  html.m-bar .pill .pill__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  html.m-bar .pill .pill__toggle { flex: none; width: 44px; height: 44px; margin: 0 !important; border-radius: 12px; }
  html.m-bar .pill .pill__bars i { transition: transform 0.2s var(--mb-ease-in) !important; }
  /* EN | KO — 막대 안에서는 검정 글자 · 누르는 자리 44 */
  html.m-bar .pill .langsw {
    position: static !important; top: auto !important; right: auto !important; left: auto !important;
    height: 44px; margin: 0; padding: 0 6px; opacity: 1 !important; transform: none !important; pointer-events: auto !important;
    color: #000000 !important; text-shadow: none !important; font-size: 13px;
  }
  html.m-bar .pill .langsw a { height: 44px; padding: 0 5px; }
  html.m-bar .pill .langsw a::after { inset: 0; }
  /* 계정 단추 — 막대 안에서는 32px 원 · 누르는 자리 44 */
  html.m-bar .pill .um { position: relative !important; top: auto !important; right: auto !important; left: auto !important; opacity: 1 !important; pointer-events: auto !important; margin: 0 2px; }
  html.m-bar .pill .um__btn { width: 32px !important; height: 32px !important; flex: none; }
  html.m-bar .pill .um__btn::after { inset: -6px; }
  html.m-bar .pill .um__pop { top: calc(100% + 16px); right: -46px; }
  /* 메뉴 판 — 막대 아래로 같은 흰 카드 */
  html.m-bar .pill .pill__links {
    position: absolute !important; top: calc(100% + 8px); left: 0; right: 0;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0 !important;
    max-width: none !important; overflow: hidden;
    padding: 8px; border-radius: 18px; background: #FFFFFF; color: #000000;
    box-shadow: 0 24px 48px -20px rgba(6, 18, 40, 0.5), 0 1px 0 rgba(6, 18, 40, 0.06);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(0.98); transform-origin: 50% 0;
    transition: opacity 0.16s var(--mb-ease-out), transform 0.16s var(--mb-ease-out), visibility 0s linear 0.16s !important;
  }
  html.m-bar .pill.is-open .pill__links {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity 0.24s var(--mb-ease-in), transform 0.24s var(--mb-ease-in), visibility 0s !important;
  }
  html.m-bar .pill .pill__links a {
    display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px;
    border-radius: 12px; font-size: 17px !important; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap;
    opacity: 1;
  }
  html.m-bar .pill .pill__links a:not(.pill__cta)::after {
    content: ''; width: 8px; height: 8px; margin-left: 12px; flex: none;
    border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; transform: rotate(45deg); opacity: 0.35;
  }
  html.m-bar .pill .pill__links a:not(.pill__cta) + a:not(.pill__cta) { background: linear-gradient(rgba(6, 18, 40, 0.07), rgba(6, 18, 40, 0.07)) 14px 0 / calc(100% - 28px) 1px no-repeat; }
  html.m-bar .pill .pill__links a:not(.pill__cta):active { background: rgba(6, 18, 40, 0.05); }
  html.m-bar .pill .pill__links .pill__cta {
    justify-content: center; margin-top: 8px; min-height: 52px; border-radius: 14px;
    background: #000000; color: #FFFFFF; font-size: 16px !important;
  }
  html.m-bar .pill .pill__links .pill__cta:active { transform: scale(0.98); }
  /* 줄마다 30ms 씩 늦게 들어옵니다(열 때만) */
  html.m-bar .pill .pill__links a { transform: translateY(-4px); opacity: 0; transition: opacity 0.12s var(--mb-ease-out), transform 0.12s var(--mb-ease-out); }
  html.m-bar .pill.is-open .pill__links a { transform: none; opacity: 1; transition: opacity 0.22s var(--mb-ease-in), transform 0.22s var(--mb-ease-in); }
  html.m-bar .pill.is-open .pill__links a:nth-child(2) { transition-delay: 0.03s; }
  html.m-bar .pill.is-open .pill__links a:nth-child(3) { transition-delay: 0.06s; }
  html.m-bar .pill.is-open .pill__links a:nth-child(4) { transition-delay: 0.09s; }
  /* 예전 모바일 규칙 끄기 — 펼칠 때 브랜드 숨김 · 알약 비껴 두기 · 언어/계정 숨김 */
  html.m-bar.is-menu .langsw, html.m-bar.is-menu .um { opacity: 1 !important; pointer-events: auto !important; }
  /* 뒤를 흐리게 가리는 막 — 누르면 닫힙니다 */
  .mnav-scrim { display: none; }
  html.m-bar .mnav-scrim {
    display: block; position: fixed; inset: 0; z-index: 39; background: rgba(6, 18, 40, 0.38);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity 0.16s var(--mb-ease-out), visibility 0s linear 0.16s;
  }
  html.m-bar.is-mnav .mnav-scrim { opacity: 1; visibility: visible; transition: opacity 0.24s var(--mb-ease-in), visibility 0s; }
  html.m-bar.is-mnav, html.m-bar.is-mnav body { overflow: hidden; }
  /* 하위 화면 — 머리글 자리(막대 높이만큼)를 비워 둡니다. 로그인 · 하늘 판(덮는 머리글)은 화면이 스스로 위 여백을 둡니다 */
  html.m-bar .site-top:not(.site-top--overlay) { height: calc(var(--mb-top) + var(--mb-h) + 8px); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  html.m-bar .pill .pill__links, html.m-bar .pill .pill__links a, html.m-bar .mnav-scrim, html.m-bar .pill { transition: none !important; }
}
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* 앵커로 옮겨 갈 때 절 제목이 막대 밑에 숨지 않게(네이티브 스크롤 쪽) */
  html.m-bar main [id], html.m-bar section[id] { scroll-margin-top: calc(var(--mb-top) + var(--mb-h) + 12px); }
}