/*
 * 원본 테마(clin_style.css / clin_responsive.css)를 건드리지 않고
 * ysv-react 화면에만 적용할 오버라이드 모음.
 * index.html 에서 마지막으로 로드된다.
 */

/*
 * 시술 카테고리 탭 가로폭 148px 고정.
 * 원본은 padding 기반 가변폭이라 탭 이름 길이에 따라 폭이 들쭉날쭉했다.
 *
 * 대상 두 곳:
 *   .main_section.cate #category_id  — 시술/이벤트 목록(/categories, '전체시술')
 *   body#main #category_id           — 메인 화면 'YSV 시술 카테고리'
 * 두 화면이 같은 탭 목록을 보여주므로 폭도 같은 값으로 맞춘다.
 *
 * 예약 시간 선택(.category_wrap.time)은 버튼 성격이 달라 건드리지 않는다.
 */
.main_section.cate #category_id > li,
.main_section.cate #category_id > a,
body#main #category_id > li,
body#main #category_id > a {
    flex: 0 0 148px;
    width: 148px;
    min-width: 148px;
    max-width: 148px;
    box-sizing: border-box;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
}

/*
 * 상단 검색(menu_search) 노출 보정.
 * 원본 CSS 는 .menu_search 를 기본 display:none 으로 두고 max-width:1535px 에서만
 * 보이게 해, 1536px 이상 넓은 화면에서는 모든 페이지에서 검색 버튼이 사라졌다.
 * 또한 body#intro 에서는 !important 로 항상 숨겨 인트로(/)에서 검색을 쓸 수 없었다.
 * 1535px 이하에서는 라우트와 무관하게 검색 버튼이 보이도록 되돌리고,
 * 1536px 이상 넓은 화면에서는 원본 테마와 동일하게 숨긴다.
 * (햄버거 메뉴가 열려 있을 때만 원본과 동일하게 숨긴다.)
 */
header .header_r_menu button.menu_search,
body#intro .header_r_menu button.menu_search {
    display: block !important;
}
.headmenu.on + .container header .header_r_menu button.menu_search {
    display: none !important;
}

/* 1536px 이상 넓은 화면: 헤더 검색(돋보기) 버튼 숨김 */
@media all and (min-width: 1536px) {
    header .header_r_menu button.menu_search,
    body#intro .header_r_menu button.menu_search {
        display: none !important;
    }
}

/*
 * 전후사진(/before_after).
 *
 * 카드 뼈대(.after_slider / .after_category_area / .after_contents / .after_tag)는
 * 원본 테마에 이미 있고, 여기서는 이미지 틀과 BEFORE/AFTER 표시만 보탠다.
 * admin 전후사진 관리는 위=전 / 아래=후 가 한 장에 담긴 4:5 이미지를 등록하므로
 * 표시는 이미지에 굽지 않고 절반 지점과 아래쪽에 얹는다.
 */
.after_desc {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #666;
    margin-bottom: 1.25rem;
}
.ba_img {
    position: relative;
    padding-bottom: 125%; /* 4:5 */
    height: 0;
    overflow: hidden;
    background: #f1f1f1;
}
.ba_img > img,
.ba_img > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    display: block;
}
/* 전·후 이미지를 따로 등록한 자료는 위아래로 나눠 붙인다 */
.ba_img > .ba_half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    display: block;
}
.ba_img > .ba_half.b { top: 0; }
.ba_img > .ba_half.a { bottom: 0; }
.ba_img > .ba_half > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ba_mark {
    position: absolute;
    right: 0;
    z-index: 1;
    background: #e097a0;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 5px 9px;
}
.ba_mark.before {
    top: 50%;
    transform: translateY(-100%);
}
.ba_mark.after {
    bottom: 0;
}
/* 목록 카드의 제목줄은 흰 바탕(테마 기본), 배너는 어두운 바탕이다 */
.after_contents .after_box .after_tag {
    background: #fff;
}
/* 카테고리 버튼은 시술 카테고리 탭과 달리 이름 길이에 맞춘 가변폭이다 */
.after_category_area.category_wrap > li {
    flex: 0 0 auto;
}
.after_slider {
    position: relative;
}
.after_slider .swiper-button-prev { left: 4px; }
.after_slider .swiper-button-next { right: 4px; }

/*
 * 공지사항 상세(/notice_detail).
 *
 * 본문은 관리자 에디터(tiptap)가 만든 HTML 을 그대로 넣는다. 에디터에서 올린 이미지는
 * 원본 크기 그대로라 폭 제한이 없으면 본문 밖으로 삐져나온다.
 */
#board_con.detail img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.75rem auto;
}
/* 첨부로 올린 이미지 (본문에 심지 않고 첨부파일로만 등록한 경우) */
.board_images {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
}
.board_images img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* 이미지가 아닌 첨부는 내려받기 링크로 */
.board_files {
    border-top: 1px solid #dfdfdf;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
}
.board_files > li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.9375rem;
}
.board_files > li > a {
    color: #262626;
    text-decoration: underline;
}
.board_files > li > .size {
    color: #8c8c8c;
    font-size: 0.8125rem;
}

/*
 * 메인(/main)의 상단 검색 버튼.
 *
 * PC 는 위 규칙대로 그대로 노출하고, 모바일에서는 숨긴다.
 * 모바일 메인은 하단 고정탭(.foot_menu)과 햄버거 메뉴로 이동하는 구성이라
 * 헤더에 검색까지 놓으면 아이콘이 겹쳐 보인다.
 * 기준 폭은 테마의 모바일 분기(max-width:768px)와 동일하게 맞춘다.
 */
@media all and (max-width: 768px) {
    body#main header .header_r_menu button.menu_search {
        display: none !important;
    }
}