@charset "utf-8";
/* 에코삼성정형외과 - UI/UX 디자인 강화 (Phase 2)
 * 단계별 비주얼 리프레시용 스타일시트. head.php에서 site-wide 로드. */

/* ===== 적응증 "이런 분께 도움이 됩니다" 체크카드 그리드 ===== */
/* .sub_section(40px)보다 뒤늦게 로드되는 sub.css에 지지 않도록 명시도 ↑ (.indications.sub_section) */
.indications { background: #f5f8fc; }
.indications.sub_section { padding: 72px 0; }
.indications .sub_title02 { margin-bottom: 46px; }

.indi_list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px; max-width: 1000px; margin: 0 auto; padding: 0;
}
.indi_list li {
  list-style: none;
  flex: 1 1 calc(50% - 16px); min-width: 280px;
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #e6ecf5; border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 6px 16px rgba(40, 55, 137, .05);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.indi_list li:hover {
  transform: translateY(-4px);
  border-color: #283789;
  box-shadow: 0 12px 26px rgba(40, 55, 137, .14);
}
.indi_list li .ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #283789, #3f6fd1);
  display: flex; align-items: center; justify-content: center;
}
/* 박스는 flex로 정중앙 정렬하고, 체크 모양의 무게중심이 박스 아래쪽에 쏠리므로
   translateY(-2px)로 위로 살짝 올려 시각적 정중앙을 맞춘다(크기 바뀌어도 유지). */
.indi_list li .ic::after {
  content: ''; display: block;
  width: 8px; height: 15px;
  border: solid #fff; border-width: 0 3px 3px 0;
  transform: translateY(-2px) rotate(45deg);
}
.indi_list li p {
  margin: 0; text-align: left; color: #333;
  font-size: 17px; font-weight: 500; line-height: 1.5;
  word-break: keep-all; letter-spacing: -.3px;
}

/* ===== 섹션 제목 강조 액센트 바 (전 서브페이지 공통) ===== */
.sub_title02 { position: relative; padding-bottom: 18px; }
.sub_title02::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #283789, #3f6fd1);
}

/* ===== 상단 메뉴 hover 서브메뉴 fade + slide-in =====
   layout.css의 display:none/block(즉시 토글)을 opacity/visibility 전환으로 덮어쓴다.
   선택자 명시도를 layout.css와 동일하게 맞추고 뒤에 로드되어 우선 적용된다.
   숨김 상태에서도 display:block + visibility:hidden 이라 transition이 동작한다. */
.header_wrap nav > ul > li .depth02 {
  display: block; opacity: 0; visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .3s;
  pointer-events: none;
}
.header_wrap nav > ul > li .depth02.on {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  pointer-events: auto;
}
.header_wrap nav > ul > li .depth03 {
  display: block; opacity: 0; visibility: hidden;
  transform: translateX(10px);
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
  pointer-events: none;
}
.header_wrap nav > ul > li .depth03.on {
  opacity: 1; visibility: visible;
  transform: translateX(0);
  transition: opacity .24s ease, transform .24s ease, visibility 0s;
  pointer-events: auto;
}

/* ===== 서브메뉴 항목 hover — 배경이 왼쪽에서 슬라이드로 차오르는 애니메이션 =====
   layout.css의 li:hover{background:#283789}(즉시 변경)을 ::before scaleX 스와이프 채움으로 대체.
   hover 시 왼쪽에서 차오르고(origin:left), 벗어나면 오른쪽으로 빠짐(origin:right). */
.header_wrap nav > ul > li .depth02 li,
.header_wrap nav > ul > li .depth03 li { position: relative; }
.header_wrap nav > ul > li .depth02 li::before,
.header_wrap nav > ul > li .depth03 li::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #283789; z-index: 0;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.header_wrap nav > ul > li .depth02 li:hover::before,
.header_wrap nav > ul > li .depth03 li:hover::before {
  transform: scaleX(1); transform-origin: left center;
}
.header_wrap nav > ul > li .depth02 li:hover,
.header_wrap nav > ul > li .depth03 li:hover { background: transparent; }
.header_wrap nav > ul > li .depth02 li > a,
.header_wrap nav > ul > li .depth03 li > a {
  position: relative; z-index: 1;
  transition: color .25s ease, transform .25s ease;
}
.header_wrap nav > ul > li .depth02 li:hover > a,
.header_wrap nav > ul > li .depth03 li:hover > a { transform: translateX(6px); }

@media screen and (max-width: 1024px) {
  .indications.sub_section { padding: 56px 0; }
  .indi_list { max-width: 720px; }
}
@media screen and (max-width: 767px) {
  .indications.sub_section { padding: 44px 0; }
  .indications .sub_title02 { margin-bottom: 30px; }
  .indi_list { gap: 12px; }
  .indi_list li { flex: 1 1 100%; min-width: 0; padding: 18px 20px; gap: 14px; }
  .indi_list li p { font-size: 15px; }
  .indi_list li .ic { width: 34px; height: 34px; }
  .indi_list li .ic::after { width: 7px; height: 13px; border-width: 0 2.5px 2.5px 0; transform: translateY(-1.5px) rotate(45deg); }
}