/* 윌리 프로젝트 공통 스타일
   모든 페이지가 페이지 안 <style> 뒤에 이 파일을 연결한다.
   같은 선택자라면 여기 규칙이 페이지 안 규칙을 덮어쓴다. */

/* 긴 낱말이 화면 밖으로 나가지 않게 한다 (표·주소는 아래 폰 화면 규칙에서) */
body { overflow-wrap: break-word; }

/* 한국어: 단어 중간에서 줄을 바꾸지 않는다 */
html:lang(ko) body { word-break: keep-all; }

/* 맨 위 메뉴줄: 좁은 화면에서 낱말이 글자 단위로 쪼개지지 않고 줄 단위로 넘어간다 */
.breadcrumb .container { flex-wrap: wrap; gap: 4px 16px; }
.breadcrumb .container > div:not(.lang-switch) { flex-wrap: wrap; min-width: 0; }
.breadcrumb a, .breadcrumb span { white-space: nowrap; }
.lang-switch { flex-wrap: wrap; row-gap: 4px; }

/* 크기 속성(width/height)을 넣은 이미지가 CSS 크기에 맞춰 비율을 지키게 한다 */
.screenshot-gallery img { width: auto; }
.graphic-banner img { height: auto; }

/* 폰 화면 */
@media (max-width: 600px) {
    .breadcrumb { padding: 8px 0; }
    .lang-switch { column-gap: 12px; }
    header, section { padding-left: 0; padding-right: 0; }
    header { padding-top: 36px; padding-bottom: 36px; }
    section { padding-top: 36px; padding-bottom: 36px; }
    footer { padding: 24px 16px; }
    .container { padding: 0 16px; }

    header h1 { font-size: 1.6rem; }
    section h2 { font-size: 1.3rem; }

    /* 앱 페이지 위치줄: 홈은 집 아이콘만 남긴다 (화면 읽기 프로그램은 이름을 그대로 읽음) */
    .breadcrumb .container > div:not(.lang-switch) > a:first-child { font-size: 0; }
    /* 설명서·방침 위치줄: 현재 페이지 이름은 바로 아래 머리글에 크게 있으므로 뺀다 */
    .breadcrumb .container > div:not(.lang-switch) > a ~ a + svg,
    .breadcrumb .container > div:not(.lang-switch) > a ~ a + svg + span { display: none; }

    /* 긴 주소는 아무 데서나 끊는다 */
    section a[href^="http"] { overflow-wrap: anywhere; }
    /* 넓은 표: 낱말을 끊지 않고 표 안에서 옆으로 밀어 본다 (화면에 들어가는 표는 그대로 꽉 찬다) */
    .info-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .info-table tbody { display: table; width: 100%; }
    .info-table th, .info-table td { padding: 6px 8px; }
    .info-table th { white-space: normal; }
}

/* 아주 좁은 폰(360px 이하) */
@media (max-width: 360px) {
    header h1 { font-size: 1.4rem; }
    header img[src$="willee_project_logo.svg"] { height: 4rem !important; }
}