/*
 * public/legacy/css/override.css
 *
 * 원본 damion.kr CSS/HTML이 참조하지만 미러에 실물이 없는 자산 때문에 생기는
 * 브라우저 콘솔 404를 없애기 위한 최소 보정 파일이다. 원본 legacy CSS 파일은
 * 절대 수정하지 않고, 이 파일을 그 뒤에 마지막으로 로드해 필요한 선언만 덮어쓴다.
 *
 * 확인한 404 대상 자산 4개(브리핑 3장):
 *   - owl.video.play.png : owl.carousel.min.css 의
 *     `.owl-carousel .owl-video-play-icon { background: url(owl.video.play.png) ... }`
 *     에서 실제로 background-image 로 참조된다 → 아래에서 none 으로 무효화한다.
 *   - policy.svg / policy_mobile.svg / qr_modal_check_icon.svg : legacy CSS 9개
 *     전체를 검색했지만 background-image 로 참조하는 셀렉터가 없다. 원본 HTML의
 *     <img src="..."> 참조일 뿐이며(대부분 HTML 주석 안에 있어 애초에 렌더되지도
 *     않음) 이 파일들은 이후 태스크에서 JSX로 이식할 때 img 자체를 다루면 되므로
 *     여기서 무효화할 CSS 셀렉터가 없다.
 *
 * 이 파일의 경로는 `/legacy/css/override.css` 하나뿐이어야 한다 — LegacyStyles의
 * CSS_ORDER가 정확히 이 경로를 로드한다. (2026-07-31 리뷰: 계획서 File Structure
 * 요약이 `public/legacy/override.css`(최상위)를 잘못 표기해 한 차례 파일이 갈라졌던
 * 적이 있다. 정본은 이 경로 하나다 — tests/unit/legacy-override.test.ts 참고.)
 */

.owl-carousel .owl-video-play-icon {
  background-image: none;
}

/*
 * .quick_counsel_status / .bfb_status / .reservation_status
 *
 * 원본은 폼 제출 검증 메시지를 전부 브라우저 네이티브 alert()로 띄웠다(예:
 * index.html:1031~1091 doMainCounsel_quick_Submit/#btn_reserve 핸들러). Task 7·9
 * 구현은 alert() 대신 폼 안에 인라인 문구를 넣는 방식으로 바꿨는데, 이건 원본에
 * 없던 새 UI라 대응하는 원본 클래스가 없다(2026-07-31 리뷰에서 지적, common.css
 * 전체를 "_status|alert_msg|error_msg|input_error|frm_error" 로 다시 검색해도
 * 0건 확인). 무스타일 노출을 막기 위한 최소 보정이다.
 * - .quick_counsel_status : src/components/legacy/quick-panel.tsx (QuickCounselForm)
 *   — 성공("등록 되었습니다")과 실패 메시지를 같은 클래스로 함께 쓴다 → 중립색.
 * - .bfb_status            : src/components/legacy/quick-panel.tsx (BottomFixedBox)
 *   — 위와 동일하게 성공/실패 공용 → 중립색.
 * - .reservation_status    : src/components/legacy/reservation-modal.tsx
 *   — 검증 실패(status.kind==="error") 전용, 성공은 별도 단계(#quick_reserve_modal)로
 *   전환되므로 이 클래스에 성공 메시지가 담기지 않는다 → 오류색을 써도 된다.
 */
.quick_counsel_status,
.bfb_status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #3b010b;
  font-size: 13px;
  line-height: 1.4;
}

.reservation_status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #fdecea;
  color: #b3261e;
  font-size: 13px;
  line-height: 1.4;
}

/*
 * .main_bf 노출 규칙 — 2026-07-31 Task 10b 번복, 원장님 최종 결정:
 * "숨김은 하지마. 디자인·마크업·애니메이션은 원본 그대로, 다만 원본에서
 * 숨겨져 있던 것은 드러낸다."
 *
 * `public/legacy/css/main_style.css:374` 의 `.main_bf{ display: none; ... }` 는
 * 미디어쿼리 없이 걸린 무조건 규칙이고, legacy CSS 9개 전체에 이를 되돌리는
 * 규칙이 없어(실측 확인) Before&After 섹션이 원본 라이브에서 한 번도 보인 적이
 * 없었다. 원본 CSS 파일은 수정 금지이므로 여기서 같은 selector(단일 클래스,
 * specificity 0,1,0)로 되돌린다 — override.css 가 CSS_ORDER(legacy-assets.tsx)
 * 상 항상 마지막에 로드되므로, 같은 specificity 라면 이 규칙이 이긴다.
 */
.main_bf {
  display: block;
}

/*
 * .beforeLogin 로그인 유도 가림막 제거 — 2026-07-31 Task 10b 번복, 원장님 결정
 * (위 .main_bf 와 같은 결정의 연장).
 *
 * `.beforeLogin` 은 "로그인 후에 확인" 문구와 함께 Before&After 사진 전체를
 * 덮는 검은 반투명 오버레이다(main_style.css 안에서
 * `.main_bf .inwrap .owl-carousel .owl-stage-outer .item .beforeLogin` 로 중첩
 * 정의됨). 이 프로젝트는 회원 기능을 만들지 않으므로(CLAUDE.md 절대 규칙) 로그인
 * 게이트를 그대로 두면 사진이 영구히 가려진다. 마크업 자체(BfOverlay,
 * src/components/site/main-before-after.tsx)는 원본 구조를 그대로 지우지 않고
 * 남겨뒀고, 여기 override.css 에서만 시각적으로 숨긴다.
 *
 * 원본 선택자가 클래스 6개 체인(specificity 0,6,0)이라 낮은 specificity 규칙으로는
 * 이길 수 없다 — 같은 selector 체인을 그대로 옮겨 써서 specificity를 맞추고,
 * 로드 순서(override.css 가 항상 마지막)로 이긴다. .owl-carousel 내부에 owl.js 가
 * 추가로 삽입하는 `.owl-stage`/`.owl-item` 래퍼는 이 선택자에 없지만, 전부 공백
 * 결합자(자손 선택자)라 중간에 레이어가 늘어나도 매칭에 영향이 없다.
 */
.main_bf .inwrap .owl-carousel .owl-stage-outer .item .beforeLogin {
  display: none;
}

/*
 * 헤더 드롭다운/모바일 서브메뉴 노출 — 2026-07-31 Task 19 시각 대조 검증에서 발견.
 *
 * 원본은 `.lnb > li > ul` 를 드러내는 로직을 **CSS `:hover` 가 아니라 jQuery**로
 * 구현했다(`_원본미러/html/js/common.js:487~495`, `_원본미러/index.html:3004`에서
 * 로드):
 *   `$('.lnb').hover(function(){ $(".sub_lnb, .lnb > li > ul").stop().slideDown(200); },
 *                     function(){ $(".sub_lnb, .lnb > li > ul").stop().slideUp(100); });`
 * (>767px 전용, 767px 이하는 클릭 아코디언으로 별도 분기)
 *
 * 이 파일(`html/js/common.js`)은 `legacy-assets.tsx`의 JS_ORDER에 포함되지 않았고
 * (jQuery/owl/aos/twentytwenty만 이식됨), header.tsx 도 이 동작을 React로
 * 재구현하지 않았다 — 즉 `.lnb > li > ul`(common.css:3805, display:none)를
 * `display:block`으로 되돌리는 규칙이 어디에도 없어 **드롭다운이 전혀 열리지
 * 않는다.** `nav-categories.ts` 기준 "event"(첫방문 이벤트/이 달의 이벤트/
 * 온라인상담)와 "about"(의료진소개/진료안내/공지사항/시술정보) 그룹은 하위
 * 항목이 이 드롭다운을 통해서만 도달 가능해서, 고치지 않으면 헤더 내비게이션
 * 만으로는 해당 페이지들에 갈 수 없다.
 *
 * 원본 CSS/JS 파일 수정 금지 규칙 때문에 여기서 CSS만으로 최소 복원한다.
 * slideDown/slideUp(200ms/100ms) 높이 애니메이션은 재현하지 않고 display 토글만
 * 재현한다 — 원본 선택자(`header nav .lnb > li > ul`, specificity 0,0,4,0)와
 * 같은 조상 체인에 `:hover`/`.open`을 추가해 specificity 로 이긴다.
 *
 * - 데스크톱(min-width:769px, 원본 JS 분기와 동일): `.lnb` 전체에 마우스가
 *   올라가면(리스트 내 개별 li 가 아니라) 모든 그룹의 서브메뉴가 함께 열린다 —
 *   원본 `$('.lnb').hover(...)` 이 li 단위가 아니라 `.lnb` 전체에 바인딩됐던
 *   그대로다.
 * - 모바일(max-width:768px, common.css 나머지 미디어쿼리와 동일 브레이크포인트):
 *   원본은 그룹별 아코디언(클릭한 것만 토글)이었지만 그 JS 도 이식되지 않아
 *   상태를 들고 있을 UI가 전혀 없다. 최소 복원으로 `header.open` 일 때 전체
 *   서브메뉴를 펼쳐서 보여준다(그룹별 접기는 못 하지만 모든 하위 페이지에는
 *   도달 가능해진다).
 */
@media (min-width: 769px) {
  header nav .lnb:hover > li > ul {
    display: block;
  }
}
@media (max-width: 768px) {
  header.open nav .lnb > li > ul {
    display: block;
  }
}