/* 사이트 공통 반응형 보정 — base.html 에서 각 페이지 스타일(style.css 등) 뒤에 불러온다.
   style.css 는 SCSS 컴파일 결과물이고 로컬 빌드 파이프라인이 없어, 보정은 이 파일에 모은다. */

/* 한국어를 단어(어절) 단위로 줄바꿈한다. 없으면 좁은 화면에서 '칼/럼', '이석/증' 처럼 글자 중간에서 끊긴다.
   공백 없이 긴 문자열(URL 등)은 칸을 넘기지 않도록 필요할 때만 끊는다. */
body {
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* style.css 가 이 목록에만 글자 단위 줄바꿈(break-all)을 걸어 두어 위 기본값을 덮어쓰던 것 (보청기·소리클리어 페이지) */
.info-solution .solution-list {
    word-break: keep-all;
}

@media screen and (max-width: 767px) {
    /* 오시는 길: '네이버 지도보기' 버튼(212px)이 대표전화 옆에서 화면 밖으로 밀려나던 문제 → 아래 줄 전체 폭으로 */
    .info-location .location-content .contact-group {
        flex-wrap: wrap;
        gap: 16px;
    }
    .info-location .location-content .contact-group .links {
        width: 100%;
    }
    .info-location .location-content .contact-group .links .kakao,
    .info-location .location-content .contact-group .links .naver {
        width: 100%;
        height: 44px;
        font-size: 14px;
    }
    /* 진료시간이 'AM 09:00 - PM / 02:00' 처럼 시간 중간에서 꺾이지 않도록 */
    .info-location .location-content .time-group .times .time {
        white-space: nowrap;
    }

    /* 게시판 상세(공지·이벤트·칼럼) 제목줄: 12px 제목과 날짜가 한 줄에 끼어 날짜가 '2026. 10. / 13' 으로 꺾이던 것 → 위아래로 분리 */
    .board-detail .title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 24px 20px;
    }
    .board-detail .title-bar .title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.4px;
    }
    .board-detail .title-bar .date {
        font-size: 13px;
        white-space: nowrap;
    }
    /* 게시판 상세 본문이 화면 양끝(0px)에 붙던 것 → 사이트 공통 좌우 여백 20px */
    .board-detail .content {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

/* 줄바꿈 유틸리티
   - br.mobile-br : 모바일(767px 이하)에서만 줄을 바꾼다. 일부 영역(main.css 의 비주얼 문구 등)은 모바일에서 br 을 숨기므로 !important
   - br.pc-br     : PC(768px 이상)에서만 줄을 바꾼다. PC 용 줄바꿈이 모바일에서 짧은 줄을 만들 때 쓴다 */
@media screen and (min-width: 768px) {
    br.mobile-br {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    br.mobile-br {
        display: inline !important;
    }
    br.pc-br {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    /* 상단 비주얼 페이지 제목(의료진 소개·병원 둘러보기 등): line-height 0.88 로 두 줄일 때 글자가 붙고
       '의료진 / 소개' 처럼 제목이 꺾이던 것 → 제목은 한 줄로, 영문은 자리가 모자라면 제목 아래로 */
    .visual-container .visual-wrapper .visual .program-title-bar .titlebar {
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 6px;
    }
    .visual-container .visual-wrapper .visual .program-title-bar .titlebar .title {
        line-height: 1.3;
        white-space: nowrap;
    }
    .visual-container .visual-wrapper .visual .program-title-bar .titlebar .eng {
        margin-left: 0;
        line-height: 1.45;
    }
}

@media screen and (max-width: 767px) {
    /* 보청기 솔루션 소제목: 한 줄 라벨용 line-height 1.2 가 모바일에서 여러 줄이 되면 답답해 보인다 */
    .info-solution .solution-list .subject {
        line-height: 1.4;
    }
}

/* 의료진 소개 상단 소개(1364px 이상): 첫 번째 이미지가 칸 폭 100% 에 margin-right(컨테이너 바깥 여백)가 더해져
   화면 밖으로 넘치며 페이지 가로 스크롤을 만들던 것 → 그 여백만큼 폭을 줄여 컨테이너 정렬선 안에 둔다 */
@media screen and (min-width: 1364px) {
    .info-intro .intro-content .item:nth-child(odd) .image img {
        width: calc(100% - (100vw - 1364px) / 2);
    }
}

/* PC 하단 고정 상담 바(z-index 10)가 같은 z-index 10 인 콘텐츠(메인·병원 둘러보기 갤러리 탭 등)에 가려지던 것.
   본문 콘텐츠보다 위, 헤더(20)·칼럼 상단바(19)·모달(1002)보다는 아래로 둔다 */
@media screen and (min-width: 769px) {
    #consulting-form .consulting-form {
        z-index: 18;
    }
}