body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.equipment-container {
    padding: 20px;
}

section {
    margin-bottom: 50px;
}

h2 {
    font-size: 3em;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    table-layout: fixed; /* 테이블 레이아웃 고정 */
}

thead {
    background-color: #f4f4f4;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

th {
    font-weight: bold;
}

td {
    vertical-align: top;
}

/* [2026-09-07] 이 파일에는 미디어 쿼리가 하나도 없었다.
   360px 단말에서 h2 가 3em(48px) 이라 제목 한 줄이 화면 폭의 대부분을 먹었고,
   표는 table-layout:fixed 3열이라 설명 칸에 10px 패딩을 빼면 118px 밖에 남지 않았다.

   새 규칙을 .equipment-container 로 한정한 이유:
   위쪽 규칙들이 h2 / table / th / td 같은 요소 선택자라, 이 파일을 함께 로드하는
   ProductItem 탭 화면(IndexTabStyle.cshtml)의 제목·표까지 같이 바뀌어 버린다.
   기존 규칙은 그대로 두고(동작을 바꾸지 않는다) 새로 넣는 것만 범위를 좁힌다.

   브레이크포인트 991.98px / 480px 는 다른 CSS 가 이미 쓰고 있는 값에 맞춘 것이다. */
@media (max-width: 991.98px) {
    .equipment-container {
        padding: 16px 12px;
    }

        .equipment-container section {
            margin-bottom: 32px;
        }

        .equipment-container h2 {
            font-size: 1.6rem;
            margin-bottom: 12px;
        }

        .equipment-container th,
        .equipment-container td {
            padding: 7px 6px;
            font-size: 0.85rem;
            line-height: 1.45;
        }

        /* GECD(Glass Edge Crack Detect) 같은 영문 약어가 한 덩어리라
           좁은 칸에서 줄바꿈되지 않고 칸을 밀어낸다.
           anywhere 가 아니라 break-word 를 쓴 이유: table-layout:fixed 라 결과는 같은데
           anywhere 는 Safari 15.4 미만이 통째로 무시해 그 브라우저에서만 칸이 밀린다. */
        .equipment-container td {
            overflow-wrap: break-word;
            word-break: break-word;
        }
}

@media (max-width: 480px) {
    .equipment-container h2 {
        font-size: 1.35rem;
    }

    .equipment-container th,
    .equipment-container td {
        padding: 6px 4px;
        font-size: 0.8rem;
    }
}