:root {
  --navy: #143b5c;
  --navy-deep: #0c2944;
  --blue: #1f5f9f;
  --bg-soft: #f5f7fb;
  --bg-warm: #f5efe8;
  --card: #ffffff;
  /* 2026-09-25: #dfe8f3 -> #9db8d6. 원래 값은 흰 바탕에서 거의 안 보여서
     경계선이 있는지 없는지 구분이 안 됐다(버튼·카드 테두리가 곳곳에서 이미
     이 색으로 따로 덮어써야 했다). 그 "덮어쓴" 색을 기본값으로 승격해서
     var(--line)을 쓰는 모든 테두리가 한 번에 또렷해지게 했다. */
  --line: #9db8d6;
  --text: #18314b;
  --muted: #5f6f82;
  --accent: #f0b45a;
  --shadow: 0 16px 36px rgba(20, 59, 92, 0.12);
  /* 상단 헤더 높이. 헤더 자신의 높이, 그 아래 붙는 남색 띠의 위치, 메뉴를 눌렀을 때
     내려갈 위치 계산이 모두 이 값에 맞춰져 있다. 헤더 높이를 바꾸려면 여기만 고치면 된다.
     (nav-modal.js는 이 값을 쓰는 대신 헤더의 실제 높이를 직접 재므로 따로 고칠 것이 없다.) */
  --header-h: 92px;
}

* {
  box-sizing: border-box;
}

/* 기본 글자 크기: 16px -> 17px(2026-09-05) -> 18px -> 20px(2026-09-10).
   주 방문자가 어르신이라 본문이 넉넉히 커야 읽기 편합니다.
   이 한 줄이 사이트 전체의 기준 크기입니다. rem 단위를 쓰는 글자와 여백이
   함께 커지므로, 더 키우려면 125%를 131.25%(=21px)로 올리고,
   되돌리려면 112.5%(=18px)로 내리면 됩니다. */

html {
  /* 2026-09-22: 20px -> 21px. 원장님이 컴퓨터로 보시는데 작다고 하셔서 한 단계 올렸다. */
  font-size: 131.25%;
  scroll-behavior: smooth;
}

/* 어지럼증·멀미 때문에 운영체제에서 "동작 줄이기"를 켜신 분에게는 움직임을 없앤다.
   내용과 기능은 그대로이고, 결과 화면만 바로 보여준다.
   이 설정을 켜지 않은 방문자에게는 아무 변화가 없다.
   (스크롤에 따른 흔들림과 인트로 타이핑은 각각 float-motion.js, nav-modal.js에서 처리한다.) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* 호버해도 커지지 않게 - 위 규칙은 "천천히 커지는 것"만 막고 크기 자체는 바꾼다. */
  .chat-fab:hover,
  .chat-fab:hover svg,
  .side-icon:hover,
  .side-icon:hover svg {
    transform: none;
  }
}

body {
  margin: 0;
  font-family: "Noto Sans KR", sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.75;
  /* 한글은 단어 중간에서 줄이 바뀌면 읽기 나쁘다 ("2층(사 / 직동)").
     낱말 단위로만 넘기되, 칸보다 긴 낱말은 넘쳐나지 않게 예외를 둔다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

/* 본문 폭. 2026-09-22 에 1200px 에서 넓혔다 — 큰 모니터에서 양옆이 너무 비어 보였다.
   아주 큰 화면(2300px 이상)에서는 62vw 로 계속 늘어나 비율이 유지된다.
   1472px 이하에서는 calc(100% - 32px) 이 걸려 예전과 똑같이 동작한다. */
.container {
  width: min(calc(100% - 32px), max(1440px, 62vw));
  margin: 0 auto;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* 헤더만 본문(1200px)보다 넓게 쓴다. 그만큼 로고가 왼쪽으로 붙고, 남는 공간을
   space-between이 나눠 가지면서 대주제 4개가 넓게 벌어진다.
   1232px 이하 화면에서는 calc(100% - 32px)이 걸려서 예전과 완전히 동일하다.
   2294px가 넘는 아주 큰 모니터에서는 1560px 고정폭이 화면에 비해 너무 좁아 보이므로,
   그 구간부터는 화면 너비의 68%로 계속 늘어나 큰 모니터에서도 비율이 맞는다. */
.site-header .container {
  width: min(calc(100% - 32px), max(1560px, 68vw));
}

.topbar {
  background: #f2f6fb;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--muted);
}

.topbar-inner,
.nav-wrap,
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar-inner {
  min-height: 38px;
}

.topbar-links,
.socials,
.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.topbar-links a,
.footer-links a {
  color: var(--muted);
  transition: color 0.2s ease;
}

.topbar-links a:hover,
.footer-links a:hover,
.main-nav a:hover {
  color: var(--navy);
}

.nav-wrap {
  min-height: var(--header-h);
  position: relative;
}

/* 2026-09-22: 46px -> 58px. 누르기 쉽게 키웠다 */
.header-home-button {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: white;
  box-shadow: var(--shadow);
}

.header-home-button svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.brand-box {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* 2026-09-23: 아이콘(H 상자)과 영어 부기(HEARING CARE CENTER)를 없애고
   "천안 중앙 보청기" 글자만 큼직한 로고체로 보여준다. 앞 네 글자에 색을
   다르게 줘서(글자만으로도) 로고처럼 보이게 한다. */
.brand-kor {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.brand-accent {
  color: var(--blue);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  /* 헤더 높이를 그대로 물려받아야 각 메뉴 항목도 세로로 꽉 찰 수 있다. */
  align-self: stretch;
  gap: 22px;
  /* 2026-09-22: 1.4rem -> 1.55rem. 머리줄 글자가 작다고 하셔서 키웠다 */
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  margin-left: 48px;
}

.main-nav a {
  white-space: nowrap;
}

/* 넓은 화면에서는 space-between이 남는 공간을 전부 나눠 가져서 4개 항목 간격이 너무 벌어진다.
   메뉴 그룹의 오른쪽 끝을 조금 당겨두면, 나눠 가질 공간이 줄어 간격만 좁아진다.
   (로고 위치는 왼쪽 끝 그대로 유지된다.) 공간이 빠듯한 좁은 화면에는 적용하지 않는다. */
@media (min-width: 1280px) {
  .main-nav {
    /* 2026-09-22: 90px -> 150px. 글자를 키운 뒤 오른쪽 메뉴가
       화면 옆에 떠 있는 아이콘 줄(HOME·무료체험 …)에 닿았다 */
    margin-right: 150px;
  }
}

/* 노트북처럼 폭이 좁은 화면(981~1200px)에서는 키운 메뉴 글씨가 브랜드명과 부딪히므로
   글씨와 간격을 예전 값으로 되돌린다. 980px 이하는 햄버거 메뉴라 해당 없음. */
@media (min-width: 981px) and (max-width: 1200px) {
  .main-nav {
    gap: 16px;
    font-size: 1.34rem;
    margin-left: 24px;
  }

  /* 이 구간에서는 메뉴 사이가 30px 남짓까지 좁아진다. 회색 배경을 넓히려고 좌우로 24px씩
     내밀면 옆 항목의 마우스 판정 영역과 겹쳐서, 엉뚱한 메뉴가 열릴 수 있다. 여기서는 좁게. */
  .nav-item > a {
    padding: 0 10px;
    margin: 0 -10px;
  }
}

/* 센터소개 hover dropdown */

.nav-item {
  position: relative;
  display: flex;
  /* 안쪽 링크가 헤더 높이를 세로로 꽉 채우도록 늘린다(회색 배경이 흰 여백까지 덮는다). */
  align-items: stretch;
  /* 글씨만큼만 차지하면 글씨 아래~남색 띠(top:92px) 사이가 마우스 사각지대가 된다.
     헤더 높이를 세로로 꽉 채워서 마우스를 아래로 내릴 때 끊기지 않게 한다. */
  align-self: stretch;
}

/* 상단 메뉴 글씨 자체를 눌리는 탭처럼 - 남색 띠가 내려와 있는 동안 회색으로 바뀐다.
   위아래로는 헤더 끝까지 차서 회색 탭 아래가 남색 띠와 바로 맞닿는다.
   좌우 음수 마진으로 padding 만큼을 상쇄해서, 메뉴 전체 가로 배치는 그대로 유지된다.
   2026-09-23: 24px -> 8px. 메뉴 사이 기본 간격(.main-nav gap: 22px)보다 좌우로
   내미는 양(24px×2=48px)이 더 커서, 회색 배경이 다음 메뉴 글자까지 침범해
   닿아 있었다(원장님이 화면 캡처로 지적). 8px×2=16px 이면 22px 간격 안에
   여유 있게 들어간다. */
.nav-item > a {
  display: flex;
  align-items: center;
  padding: 0 8px;
  margin: 0 -8px;
  /* 아래는 남색 띠로 이어지므로 위쪽 모서리만 둥글린다. */
  border-radius: 12px 12px 0 0;
  transition: background-color 0.14s ease, color 0.14s ease;
}

/* 열림 여부는 nav-modal.js가 붙이는 is-open 하나로만 판단한다.
   :hover나 :focus-within을 같이 쓰면, 클릭한 링크가 포커스를 계속 쥐고 있는 동안
   그 항목이 열린 채로 남아 회색 탭과 남색 띠가 두 개씩 보인다. */
.nav-item.is-open > a {
  background: rgba(15, 32, 61, 0.08);
  color: var(--navy);
}

/* 실제로 누르는 순간에는 한 단계 더 진하게 눌린 느낌을 준다. */
.nav-item > a:active {
  background: rgba(15, 32, 61, 0.15);
}

.nav-dropdown {
  position: fixed;
  /* 헤더 바로 아래에 붙는다 - 높이가 바뀌면 --header-h만 고치면 따라온다. */
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  justify-content: center;
  /* 각 항목이 띠 높이를 세로로 꽉 채우도록 - 강조 배경이 띠 전체를 덮게 된다. */
  align-items: stretch;
  /* 하위 메뉴 항목이 서로 붙어 보이지 않도록 넉넉하게 띄운다. */
  gap: 72px;
  /* 위아래 여백은 각 항목이 직접 갖는다. 띠 자체가 여백을 가지면 그만큼 강조 배경이
     위아래로 잘려서, 대주제의 회색처럼 띠를 꽉 채우지 못한다. 띠 높이는 그대로다. */
  padding: 0;
  background: var(--blue);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* is-open은 nav-modal.js가 붙이는 클래스 - 마우스가 잠깐 벗어나도 유예 시간 동안 열어둔다. */
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* 네 개의 띠는 모두 같은 자리에 겹쳐 있고 z-index도 같아서, 원래는 DOM 순서가 늦은 쪽이
     위에 그려진다. 그래서 왼쪽 메뉴로 옮기면 닫히는 중인 이전 띠가 새 띠를 덮어
     안 바뀐 것처럼 보였다. 열린 띠를 항상 한 단계 위로 올려 방향과 무관하게 만든다. */
  z-index: 26;
}

/* 다른 띠가 열려 있는 동안에는 닫히는 띠가 서서히 사라지지 않고 즉시 감춰진다.
   두 띠의 글씨가 잠깐 겹쳐 보이는 것을 막는다. */
.main-nav:has(.nav-item.is-open) .nav-item:not(.is-open) .nav-dropdown {
  transition: none;
}

/* 대주제의 회색과 같은 방식 - 띠 높이를 꽉 채우고, 좌우 음수 마진으로 padding을 상쇄해서
   항목 사이 간격(72px)은 그대로 유지한다. 남색 바탕이라 회색 대신 흰색을 옅게 얹는다. */
.nav-dropdown a {
  display: flex;
  align-items: center;
  padding: 13px 22px;
  margin: 0 -22px;
  /* 위는 대주제의 회색 탭과 이어지므로 아래 모서리만 둥글린다. */
  border-radius: 0 0 12px 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.24rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.nav-dropdown a:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.nav-dropdown a:active {
  background: rgba(255, 255, 255, 0.26);
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--navy);
  display: block;
}

/* Right-side fixed quick icons */

.side-icons {
  position: fixed;
  /* 헤더 아래부터 화면 아래까지를 "놓을 수 있는 범위"로 잡고, 그 안에서 세로 가운데에 둔다.
     top:50% + translateY(-50%) 방식은 창 세로가 짧아지면(약 716px 미만) 패널이 헤더를
     뚫고 올라가 메뉴를 가렸다. 이 방식은 범위를 벗어나지 않아 헤더를 덮지 않는다.
     height를 내용 크기로 고정해야 위아래 auto 여백이 남는 공간을 반씩 나눠 가진다. */
  top: calc(var(--header-h) + 16px);
  /* 채팅 버튼(하단 44px + 높이 70px)과 절대 겹치지 않도록, 가운데 정렬 범위의
     아래쪽 끝을 채팅 버튼 영역 위로 넉넉히 잡는다. */
  bottom: 130px;
  height: fit-content;
  margin-block: auto;
  right: 20px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  /* overflow: hidden을 두면 호버로 커진 칸이 패널 밖에서 잘린다.
     대신 첫/마지막 칸에 직접 둥근 모서리를 줘서 패널 모양을 유지한다. */
  /* --drift는 float-motion.js가 스크롤에 따라 넣어주는 위아래 흔들림 값이다. */
  transform: translateY(var(--drift, 0px));
}

.side-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* "정부지원금 확인"만 두 줄이라 그 칸만 키가 컸다. 두 줄 기준 높이를 모든 칸에 똑같이
     주고 내용을 세로 가운데에 놓으면, 글자 줄 수와 상관없이 칸 크기가 균일해진다. */
  justify-content: center;
  min-height: 106px;
  gap: 8px;
  width: 92px;
  padding: 14px 8px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  /* 커진 칸이 이웃 칸 위로 겹쳐 올라오도록 쌓임 순서를 잡을 기준을 만든다. */
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.18s ease,
    border-radius 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.side-icon:last-child {
  border-bottom: none;
}

/* 패널의 overflow를 뺐으므로 양 끝 칸이 직접 둥근 모서리를 갖는다(테두리 1px 안쪽이라 19px). */
.side-icon:first-child {
  border-radius: 19px 19px 0 0;
}

.side-icon:last-child {
  border-radius: 0 0 19px 19px;
}

.side-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 채팅 버튼과 같은, 살짝 튕기며 커지는 곡선 */
  transition: transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1);
}

/* 칸도 아이콘과 함께 커진다. transform은 배치를 건드리지 않아서 아래 칸들이 밀리지 않고,
   z-index로 이웃 칸 위에 올라와 그림자와 함께 살짝 떠오른 것처럼 보인다. */
.side-icon:hover {
  background: #eaf4ff;
  color: var(--blue);
  transform: scale(1.07);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(20, 59, 92, 0.18);
  z-index: 1;
}

/* 첫/마지막 칸은 패널의 바깥 둥근 모서리와 맞닿아 있다. 호버할 때 위 .side-icon:hover의
   14px을 그대로 받으면 그 모서리만 패널 테두리와 어긋나 보이므로, 바깥쪽은 19px을 지킨다.
   선택자가 한 단계 더 구체적이라 CSS 작성 순서와 상관없이 항상 이 값이 적용된다. */
.side-icon:first-child:hover {
  border-radius: 19px 19px 14px 14px;
}

.side-icon:last-child:hover {
  border-radius: 14px 14px 19px 19px;
}

/* 칸이 커지는 만큼 아이콘은 조금만 더 키운다(합쳐서 약 1.18배). */
.side-icon:hover svg {
  transform: scale(1.1);
}

/* 모니터(창) 세로 길이가 짧으면 칸 5개(기본 106px씩, 총 530px)가 위/아래로 확보된
   공간보다 커져서 헤더나 채팅 버튼과 겹친다. 그 전에 미리 칸을 작게 줄여 항상 안에 맞춘다. */
@media (max-height: 780px) {
  .side-icon {
    min-height: 76px;
    gap: 5px;
    padding: 10px 8px;
  }

  .side-icon svg {
    width: 22px;
    height: 22px;
  }

  .side-icon span {
    font-size: 0.72rem;
  }
}

@media (max-width: 1399px) {
  .side-icons {
    display: none;
  }
}

/* Buttons */

.primary-btn,
.secondary-btn,
.mobile-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.primary-btn {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: white;
  border: none;
  box-shadow: 0 10px 18px rgba(20, 59, 92, 0.2);
}

.primary-btn,
.secondary-btn {
  min-height: 60px;
  padding: 1rem 1.7rem;
  font-size: 1.15rem;
  font-weight: 800;
  gap: 8px;
}

/* 화살표(→) 글자가 옆 글자보다 작고 붙어 보이던 것을 보완 (2026-09-25).
   위 gap이 버튼 글자와 화살표 사이 간격을 주고, 아래는 화살표 자체를 살짝 키운다. */
.primary-btn span,
.secondary-btn span {
  font-size: 1.15em;
}

.secondary-btn {
  background: white;
  /* 기본 --line(#dfe8f3)은 흰 바탕에서 거의 안 보여 버튼 경계가 묻힌다.
     탭 카드와 같은 색으로 맞춰서 그냥 봐도 테두리가 드러나게 한다. */
  border: 1px solid #9db8d6;
  color: var(--navy);
  box-shadow: 0 8px 16px rgba(20, 59, 92, 0.06);
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(20, 59, 92, 0.24);
}

.primary-btn:disabled {
  background: #c3ccd6;
  color: #7d8894;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.secondary-btn:hover {
  border-color: rgba(31, 95, 159, 0.55);
}

/* Section heading */

.section-label {
  margin: 0 0 12px;
  display: inline-block;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 2026-09-26 — 휴대폰에서는 영어 꼬리표(AT A GLANCE, OUR FACILITY 같은
   제목 위 작은 영어 글자)를 전부 없앤다(원장님 요청). 컴퓨터는 그대로 둔다. */
@media (max-width: 640px) {
  .section-label {
    display: none;
  }
}

.section-intro {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.section-intro.left-aligned {
  margin: 0 0 30px;
  text-align: left;
}

.section-intro h2 {
  margin: 0;
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.05em;
}

/* Footer */

.site-footer {
  background: #edf3fa;
  border-top: 1px solid var(--line);
  padding: 36px 0;
}

.footer-brand {
  font-weight: 800;
  margin-bottom: 10px;
}

.footer-inner p {
  margin: 4px 0;
  color: var(--muted);
}

/* 메뉴 클릭 시 팝업창이 아니라 페이지 자체가 그 내용으로 바뀌는 방식 (홈 화면 <-> 그룹 화면 전환) */

#homeView[hidden],
.group-view[hidden] {
  display: none;
}

/* --scroll-room은 nav-modal.js가 넣어주는 "모자란 만큼의 여백"이다.
   고른 항목의 내용이 화면 맨 위(헤더 바로 아래)까지 올라오려면 그 아래로 한 화면분의
   높이가 남아 있어야 하는데, 부족하면 브라우저가 문서 끝에서 스크롤을 잘라내 덜 내려간다.
   한 화면분을 항상 붙여두면 내용이 짧을 때 빈 공간이 크게 남으므로, 실제로 모자란
   만큼만 계산해서 채운다. 넉넉하면 0이 되어 여백이 생기지 않는다. */
.group-view {
  padding: 0 0 calc(88px + var(--scroll-room, 0px));
}

.group-head-wrap {
  position: relative;
  padding-bottom: 0;
}

/* 모든 그룹 화면에서 "홈으로" 링크 자체를 숨긴다 (센터소개는 브랜드명이 그 자리를
   대신하고, 다른 그룹은 위쪽 여백만 남아 breadcrumb/제목이 살짝 위로 붙는다). */
.group-back {
  display: none;
}

.group-head .breadcrumb {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 1.02rem;
  font-weight: 800;
}

.group-head-wrap.has-photo-intro .breadcrumb {
  color: var(--blue);
}

.group-head .brand-title {
  margin: 0 0 28px;
  color: var(--navy-deep);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
}

/* 첫 화면(index.html) 인트로를 그룹 헤더에서 재사용. 사진은 배경으로 깔리고 아래로 갈수록
   흰색으로 자연스럽게 사라지며, 그 위에 라벨/설명은 처음부터 보이고 리드 문구+헤드라인만
   첫 화면과 같은 방식으로 타이핑된다 (그룹에 처음 들어올 때만). */
.group-view {
  overflow-x: hidden;
}

/* 사진은 이 상자(.group-intro)를 정확히 채우고, 탭 버튼은 상자 바깥(아래)에 있으므로
   창 높이가 얼마든 사진이 버튼 위를 덮지 않는다. padding-top이 사진 위쪽 여백(문구가
   시작되는 지점), min-height가 사진의 최소 높이를 정한다. */
.group-intro {
  position: relative;
  margin-bottom: 0;
  padding-top: 220px;
  min-height: min(80vh, 760px);
}

.group-intro-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: 0;
  background-image: url('images/hero-photo.jpg');
  /* 2026-09-26 — background-repeat을 안 적어둬서 기본값(repeat)이 적용되고
     있었다. 사진 칸(.group-intro)이 사진의 실제 세로 길이보다 크면 브라우저가
     남는 자리에 같은 사진을 위아래로 반복해서 채워 넣는데, 이 칸은 원래
     데스크톱 전용이라 그 화면 비율에서만 우연히 안 남아서 몰랐다. 이번에
     휴대폰에서도 이 칸을 쓰게 되면서(칸이 더 좁고 길쭉해짐) 사진이 세 번
     반복돼 보이는 문제로 드러났다. background-size도 폭 기준(127% auto)
     대신 cover로 바꿔 칸 크기가 어떻든 사진이 항상 빈틈없이 꽉 채우도록 했다. */
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.group-intro-photo.is-ready {
  opacity: 1;
}

.group-intro-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 2026-09-26 — 글이 놓이는 위쪽은 사진이 밝아서(벽·모니터) 흰 글씨가
     묻히기 쉬웠다. 컴퓨터 화면에서는(휴대폰은 문구를 안 보여주므로
     아래 모바일 구간에서 원래대로 되돌린다) 위쪽에 어두운 톤을 살짝
     깔아 글자가 뜨도록 하고, 중간·아래쪽은 예전 그대로 둔다. */
  background: linear-gradient(to bottom,
      rgba(8, 18, 30, 0.52) 0%,
      rgba(8, 18, 30, 0.24) 24%,
      rgba(255, 255, 255, 0) 46%,
      rgba(255, 255, 255, 0.05) 70%,
      rgba(255, 255, 255, 0.45) 92%,
      #ffffff 100%);
}

.group-intro-copy {
  position: relative;
  z-index: 1;
  padding: 28px 28px 20px;
}

/* 사진 위에 글씨를 얹기 때문에 대비를 만들어줘야 한다.
   예전에는 글자 자리에 반투명한 어두운 타원을 깔았는데, 그 박스가 배경 사진 왼쪽까지
   어둡게 덮어버리는 문제가 있었다. 지금은 박스를 쓰지 않고 글자 자체에 그림자를 강하게
   줘서, 사진은 원본 그대로 보이고 흰 글씨만 또렷하게 떠 보이도록 한다. */

.group-label {
  display: none;
}

/* 2026-09-26 — 글자에 그림자를 줘서 사진 위에서도 읽히게 하던 방식 대신,
   사진 위쪽에 이미 깔린 어두운 그라데이션(.group-intro-photo::after)만으로
   대비를 만들고 글자는 순수한 흰색으로 또렷하게 박아둔다. */
.group-lead {
  position: relative;
  z-index: 0;
  margin: 0 0 14px;
  min-height: 3.3em;
  white-space: pre-line;
  color: #fff;
  font-weight: 700;
  font-size: 1.34rem;
  line-height: 1.65;
}

.group-title {
  margin: 0 0 14px;
  min-height: 2.56em;
  white-space: pre-line;
  color: #fff;
  font-size: clamp(2.3rem, 4.1vw, 3.4rem);
  line-height: 1.28;
  font-weight: 900;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .group-intro {
    padding-top: 150px;
    min-height: min(62vh, 520px);
  }

  .group-intro-copy {
    padding: 0 20px 8px;
  }
}

/* 배경 사진(.group-intro-photo)이 position:absolute라서, 위치 지정이 없는 탭 버튼보다 위에
   그려진다. 사진 아래쪽 흰색 영역이 버튼 윗부분을 덮어 잘린 것처럼 보이던 문제가 있어
   브레드크럼과 같은 z-index로 올려준다. */
.group-head .tab-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.group-head .tab-card {
  flex: 1 1 160px;
  min-width: 140px;
  /* 글씨를 키운 만큼 여백을 줄여서 버튼 크기는 그대로 유지한다. */
  padding: 19px 16px;
  /* 기본 --line(#dfe8f3)은 흰 바탕 위에서 거의 안 보여 선택되지 않은 탭이 배경에 묻힌다.
     한 단계 진한 선 + 옅은 그림자로 카드 경계가 그냥 봐도 드러나게 한다. */
  border: 1px solid #9db8d6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 59, 92, 0.1);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 1.32rem;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.group-head .tab-card:hover {
  border-color: rgba(31, 95, 159, 0.55);
  background: #eaf4ff;
  box-shadow: 0 4px 12px rgba(20, 59, 92, 0.14);
}

.group-head .tab-card.active {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  border-color: transparent;
  color: #fff;
}

/* Floating chat button */

/* 호버 시 커지는 배율. transform 안에서 --drift(스크롤 흔들림)와 함께 써야 하는데,
   그냥 변수로 두면 애니메이션 없이 툭 바뀐다. @property로 "숫자"라고 알려주면
   브라우저가 중간값을 계산해서 부드럽게 커진다. */
@property --fab-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.chat-fab {
  /* 2026-09-26 — 컴퓨터에서도 없애기로 함(휴대폰은 이미 감춰둠).
     아래 위치·크기·place-items 규칙은 지우지 않고 남겨둔다 — display만
     grid로 되돌리면 나중에 다시 켤 수 있다. */
  position: fixed;
  right: 24px;
  bottom: 44px;
  z-index: 50;
  width: 70px;
  height: 70px;
  display: none;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: white;
  box-shadow: 0 14px 26px rgba(20, 59, 92, 0.32);
  /* 살짝 튕기는 곡선으로 커져야 "뽕" 하고 떠오르는 느낌이 난다. */
  transition: box-shadow 0.16s ease, --fab-scale 0.18s cubic-bezier(0.34, 1.5, 0.64, 1);
  /* --drift는 float-motion.js가 스크롤에 따라 넣어주는 위아래 흔들림 값이다. */
  transform: translateY(var(--drift, 0px)) scale(var(--fab-scale, 1));
}

.chat-fab:hover {
  --fab-scale: 1.1;
  box-shadow: 0 20px 34px rgba(20, 59, 92, 0.42);
}

.chat-fab::after {
  content: "챗봇 상담하기";
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  white-space: nowrap;
  background: var(--navy-deep);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(20, 59, 92, 0.28);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  /* 말풍선은 곧바로 떠야 답답하지 않다(0.2s -> 0.1s). */
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.chat-fab::before {
  content: "";
  position: absolute;
  right: 20px;
  bottom: calc(100% + 8px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--navy-deep);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.chat-fab:hover::after,
.chat-fab:hover::before {
  opacity: 1;
  transform: translateY(0);
}

/* 34px으로 맞춘 이유: 원이 70px이라 (70-34)/2 = 18px로 딱 떨어진다. 33px이면 18.5px라
   반 픽셀이 남아 브라우저가 반올림하는데, 호버로 transform이 걸린 상태에서는 반올림하지
   않아 아이콘이 미세하게 움직여 보였다. scale(1)도 같은 이유 - 평소에도 호버와 똑같은
   렌더링 경로를 타게 해서 위치를 통일한다. */
.chat-fab svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scale(1);
  transition: transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1);
}

/* 원이 커지는 것에 더해 로고도 한 번 더 커져서, 안쪽이 꽉 차 보이게 한다. */
.chat-fab:hover svg {
  transform: scale(1.08);
}

/* 컴퓨터 화면에서는 챗봇 단추(떠 있는 둥근 아이콘)를 키운다 (2026-09-24, "PC에서 보이는 챗봇 아이콘이 작다").
   70px 원 + 34px 아이콘 → 92px 원 + 46px 아이콘. (92-46)/2 = 23px 로 딱 떨어져 아이콘이 반 픽셀 흔들리지 않는다.
   설명 말풍선("챗봇 상담하기")과 그 꼬리도 원 크기에 맞춰 키운다. 휴대폰(640px 이하) 크기는 그대로다. */
@media (min-width: 981px) {
  .chat-fab {
    right: 28px;
    width: 92px;
    height: 92px;
  }

  .chat-fab svg {
    width: 46px;
    height: 46px;
  }

  .chat-fab::after {
    bottom: calc(100% + 16px);
    padding: 0.7rem 1.1rem;
    font-size: 1.02rem;
  }

  .chat-fab::before {
    right: 34px;
    bottom: calc(100% + 10px);
  }
}

@media (max-width: 640px) {
  /* 2026-09-26 — 휴대폰에서는 떠 있는 챗봇 아이콘과 채팅 기능 자체를
     없앤다(원장님 요청). 컴퓨터는 그대로 둔다. 아래 크기 조정 규칙은
     이제 못 쓰지만, 나중에 다시 켤 수도 있어 지우지 않고 남겨둔다. */
  .chat-fab {
    display: none;
  }
}

@media (max-width: 640px) {
  /* 데스크톱(70px 원 + 34px 아이콘)과 같은 비율로 줄인 크기.
     62-30=32라 좌우 여백이 16px로 딱 떨어져, 아이콘이 반 픽셀만큼 흔들리지 않는다. */
  .chat-fab {
    right: 16px;
    bottom: 40px;
    width: 62px;
    height: 62px;
  }

  .chat-fab svg {
    width: 30px;
    height: 30px;
  }
}

/* Mobile quick CTA */

.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.mobile-cta a {
  min-height: 52px;
  font-size: 0.96rem;
}

.mobile-cta a:first-child {
  background: var(--navy);
  color: white;
  margin-right: 8px;
  box-shadow: 0 6px 14px rgba(20, 59, 92, 0.22);
}

.mobile-cta a:last-child {
  background: #f3b762;
  color: var(--navy-deep);
  margin-left: 8px;
  box-shadow: 0 6px 14px rgba(198, 137, 40, 0.22);
}

.mobile-cta svg {
  width: 19px;
  height: 19px;
  margin-right: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 모바일에서만 하단 고정 버튼을 띄운다.
   휴대폰으로 들어오는 분 대부분은 전화가 목적이라 화면을 내리지 않아도
   바로 누를 수 있어야 한다. 버튼에 가려지는 만큼 본문 아래 여백을 주고,
   채팅 버튼도 겹치지 않게 위로 올린다. */

@media (max-width: 980px) {
  .mobile-cta {
    display: grid;
  }

  body {
    padding-bottom: 84px;
  }

  .chat-fab {
    bottom: 96px;
  }
}

@media (max-width: 980px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-wrap {
    flex-wrap: wrap;
    padding: 16px 0;
  }

  .main-nav {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: auto;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 10px;
    margin-left: 0;
    order: 3;
  }

  .main-nav.open {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-item {
    flex-direction: column;
    align-items: flex-start;
    align-self: auto;
    width: 100%;
  }

  /* 모바일 메뉴는 항상 펼쳐진 목록이라, 데스크톱용 눌림 배경과 음수 마진을 되돌린다. */
  .nav-item > a {
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  .nav-item.is-open > a,
  .nav-item:hover > a,
  .nav-item:focus-within > a,
  .nav-item > a:active {
    background: transparent;
  }

  .nav-dropdown {
    position: static;
    z-index: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 0 0 16px;
  }

  /* 모바일 메뉴는 남색 띠가 아니라 흰 바탕의 목록이라, 데스크톱용 여백과 강조 배경을 되돌린다. */
  .nav-dropdown a {
    color: var(--muted);
    font-size: 0.9rem;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  .nav-dropdown a:hover,
  .nav-dropdown a:active {
    background: transparent;
    color: var(--navy);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .container {
    width: min(100% - 24px, 1200px);
  }

  .brand-kor {
    font-size: 1.35rem;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
  }

  .mobile-cta {
    display: grid;
  }

  .site-footer {
    padding-bottom: 96px;
  }
}

@media (max-width: 620px) {
  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
  }

  .site-header {
    position: static;
  }
}

/* 이 안의 글자는 줄이 바뀌지 않는다.
   "만나는 곳"처럼 붙어 있어야 자연스러운 말이 끊기는 것을 막을 때 쓴다. */
.nowrap {
  white-space: nowrap;
}