/* =================================================================
   쇼핑몰 상세페이지 범용 CSS (클래스 불필요)
   작성자: Gemini (쇼핑몰 관리자)
   ================================================================= */

/* --- 기본 & 타이포그래피 스타일 --- */

body {
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
    font-size: 16px; /* 기본 글자 크기 */
    line-height: 1.7; /* 줄 간격을 넓혀 가독성 향상 */
    background-color: #FFFFFF; /* 깨끗한 흰색 배경 */
    color: #212529; /* 순수한 검정보다 눈이 편안한 진한 회색 */
    margin: 0;
    padding: 25px;
}

/* 제목 (h1 ~ h6): 중요도에 따라 크기와 여백을 다르게 설정 */
h1, h2, h3, h4, h5, h6 {
    color: #111111; /* 본문보다 더 진한 검정으로 주목도 향상 */
    margin-top: 1.5em; /* 제목 위쪽 여백 */
    margin-bottom: 0.8em; /* 제목 아래쪽 여백 */
    font-weight: 600;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }

/* 본문 단락 */
p {
    margin-top: 0;
    margin-bottom: 1em; /* 단락 간의 간격을 명확하게 */
}

/* 링크 */
a {
    color: #007BFF; /* 주목도 높은 파란색 */
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* 마우스 올렸을 때 밑줄 표시 */
}

/* 굵은 글씨와 기울임 */
strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

/* --- 테이블 스타일 --- */

table {
    width: 100%;
    border-collapse: collapse; /* 테두리 선을 한 줄로 합침 */
    margin-bottom: 25px;
    font-size: 15px;
    border-top: 2px solid #343A40;
    border-bottom: 2px solid #343A40;
}

/* 테이블 제목 셀 (Header) */
th {
    background-color: #F8F9FA; /* 헤더 영역을 시각적으로 구분 */
    font-weight: 600; /* 일반 셀보다 굵게 */
    text-align: left;
}

/* 모든 테이블 셀 (Header & Data) */
th, td {
    padding: 12px 15px; /* 셀 내부에 충분한 여백 제공 */
    border-bottom: 1px solid #DEE2E6; /* 셀들을 구분하는 선 */
}

/* 테이블의 짝수 번째 행에 배경색 적용 */
tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.02); /* 가로줄 추적 용이 */
}

/* --- 기타 요소 --- */

/* 목록 (순서 있는, 순서 없는) */
ul, ol {
    padding-left: 20px;
}

li {
    margin-bottom: 0.5em;
}

/*
  참고: <font> 태그는 오래전부터 사용이 권장되지 않는 태그(Deprecated)입니다.
  대신 CSS를 사용하여 글자의 스타일을 지정하는 것이 웹 표준 방식입니다.
  위 코드에 포함된 p, h1~h6, strong 등의 스타일이 그 역할을 대신합니다.
*/