/*
 * 원본 테마(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 을 그대로 넣는다. 에디터에서 올린 이미지는
 * 원본 크기 그대로라 폭 제한이 없으면 본문 밖으로 삐져나온다.
 *
 * 위치(왼쪽·가운데·오른쪽)와 크기는 관리자가 에디터에서 정하고 `<img style="...">` 로
 * 저장된다. 인라인 스타일이라 여기 margin/width 보다 우선한다. 아래 `margin: … auto` 는
 * 위치를 정하기 전에 쓴 예전 글의 기본값(가운데)으로 남겨 둔다.
 */
#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;
    }
}

/*
 * 시술/이벤트 목록(/categories)의 상단 배너가 모바일에서 잘리던 문제.
 *
 * 원본 테마는 모바일 분기에서 `.r_banner { object-fit: cover; height: 160~180px }`
 * 로 배너 높이를 고정한다. 메인 화면의 띠배너는 그 의도가 맞지만, /categories 의
 * 카테고리 배너(#cateImg)와 이벤트 배너는 세로가 긴 이미지라 위아래가 잘려 나간다.
 * (원본 clin_responsive.css 에도 `.depth_cate .r_banner { height:auto }` 가 주석으로
 *  남아 있다 — 같은 문제를 인지했으나 적용하지 않은 흔적이다.)
 *
 * 그래서 `.depth_cate` 안쪽 배너에 한해 높이 고정을 풀고 원본 비율을 유지한다.
 * 메인(body#main)의 띠배너는 그대로 두어 원본 느낌을 유지한다.
 */
@media all and (max-width: 768px) {
    .depth_cate .cate_img_wrap .r_banner,
    .depth_cate .cate_img_wrap img#cateImg {
        height: auto;
        max-height: none;
        object-fit: contain;
        width: 100%;
        display: block;
    }
    /* 이벤트 배너(.depth_cate 안의 swiper)도 폭에 맞춰 전체가 보이게 한다. */
    .depth_cate .mySwiper .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }
    .depth_cate .mySwiper .swiper-slide,
    .depth_cate .mySwiper .swiper-slide > li {
        width: 100%;
        height: auto;
    }
}

/*
 * 관리자 에디터(tiptap)로 넣은 표.
 *
 * 상품 설명·공지 본문은 에디터가 만든 HTML 을 그대로 뿌린다. 원본 테마에는 표
 * 스타일이 없어 테두리 없이 글자만 늘어서 보이므로, 편집 화면과 같은 모양으로 맞춘다.
 * 대상은 표가 들어갈 수 있는 두 곳(상품/이벤트 카드 문구, 게시글 본문)이다.
 */
.cate_txt table,
#board_con.detail table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0.75rem 0;
}
.cate_txt table td,
.cate_txt table th,
#board_con.detail table td,
#board_con.detail table th {
    border: 1px solid #d4d4d4;
    padding: 0.4rem 0.6rem;
    vertical-align: top;
    word-break: break-word;
}
.cate_txt table th,
#board_con.detail table th {
    background-color: #f5f5f5;
    font-weight: 700;
    text-align: left;
}
/* 표는 좁은 화면에서 눌리지 않도록 가로 스크롤을 허용한다 */
.cate_txt .tableWrapper,
#board_con.detail .tableWrapper {
    overflow-x: auto;
}


/*
 * 상품 카드 설명 영역(.cate_desc).
 *
 * 장바구니 체크박스를 제목 좌측으로 옮기면서 제목 줄을 React 가 그리게 됐고,
 * 주입 HTML 은 설명만 남아 `<div class="cate_copy cate_desc">` 로 한 겹 감싸졌다.
 * 글자 크기·색은 원본 테마의 `.cate_txt .cate_copy` 가 잡으므로 여기서는
 * 여백만 원본(`.cate_txt > p`)과 같게 맞춘다.
 *
 * 크기·색을 여기에 적지 않는 이유: 정적 CSS 는 `immutable` 로 30일 캐시된다.
 * 옛 CSS 를 들고 있는 방문자에게는 이 파일의 규칙이 통째로 없는 것과 같으므로,
 * 화면이 깨지면 안 되는 속성은 오래전부터 배포된 clin_style.css 에 맡긴다.
 */
.cate_txt .cate_desc {
    margin-top: .7rem;
}
.cate_txt .cate_desc:empty {
    display: none;
}
/* 설명이 문단(<p>)으로 들어오면 여백은 문단이 갖는다 (원본 `.cate_txt > p` 와 동일) */
.cate_txt .cate_desc:has(> p) {
    margin-top: 0;
}
.cate_txt .cate_desc > p {
    margin-top: .7rem;
    margin-bottom: 0;
}
.cate_txt .cate_desc > p:empty {
    display: none;
}

/*
 * 상품 설명 행간을 절반으로 (2026-09-28 요청).
 *
 * 줄과 줄 사이 빈 공간(= 줄 높이 - 글자 크기 + 문단 여백)을 기존의 50% 로 줄인다.
 *  - 상품 카드(14px): 줄 높이 20px → 17px (여백 6px → 3px).
 *    문단(<p>)마다 한 줄이면 사이 여백 .7rem 까지 더해 17.2px → 8.6px 가 되도록 두 번째 문단부터 .35rem.
 *    첫 문단의 .7rem 은 제목과의 간격이라 그대로 둔다.
 *  - 메인 '이달의 이벤트'(12.8px): 줄바꿈(<br>)형은 줄 높이 17.6px → 15.2px (4.8px → 2.4px),
 *    문단형은 줄 높이 16px → 14.4px + 아래 여백 5px → 2.5px (8.2px → 4.1px).
 */
.cate_txt .cate_desc {
    line-height: 17px;
}
.cate_txt .cate_desc > p + p {
    margin-top: .35rem;
}
section.event_best .mevent_detail {
    line-height: .95rem;
}
section.event_best .mevent_detail > p {
    line-height: .9rem;
    margin-bottom: 2.5px;
}