/* 개인 이용약관 페이지(/, /default.html, /index.html) 전용. 이전 사이트 첫 화면의 약관을 옮긴 정적 안내라 공용 site.css를 쓰지 않는다. 색 변수도 이 페이지 것이다.
   이전 화면은 약관을 화면 높이 절반의 안쪽 스크롤 상자에 담았지만, 휴대폰에서 읽기 쉽게 페이지 전체를 스크롤하고 본문 폭·줄 간격을 둔다. */
:root {
    --terms-brand: #ffba00;
    --terms-text: #333333;
    --terms-sub: #666666;
    --terms-border: #e5e5e5;
    --terms-bg: #ffffff;
}

body {
    margin: 0;
    background-color: var(--terms-bg);
    color: var(--terms-text);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Roboto, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 본문 폭 제한: 넓은 화면에서도 한 줄이 길어지지 않게 가운데 둔다. */
.terms-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 48px;
}

.terms-logo {
    margin: 0 0 24px;
    text-align: center;
}

.terms-logo img {
    width: 100%;
    max-width: 240px;
    height: auto;
}

.terms-title {
    margin: 0 0 20px;
    color: var(--terms-brand);
    font-size: 22px;
    letter-spacing: -0.5px;
    text-align: center;
}

.terms-agree {
    border-top: 1px solid var(--terms-border);
    padding-top: 8px;
}

#terms-policy h4 {
    margin: 28px 0 8px;
    font-size: 16px;
    color: var(--terms-text);
}

#terms-policy p {
    margin: 0 0 8px;
}

/* 조항의 목록: 번호는 본문의 em("1)")이 맡으므로 목록 기호를 끄고, 번호 뒤로 줄이 이어지게 내어쓴다. */
#terms-policy ol {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

#terms-policy li {
    position: relative;
    margin: 0 0 6px;
    padding-left: 2em;
}

#terms-policy li em {
    position: absolute;
    left: 0;
    font-style: normal;
    color: var(--terms-sub);
}

/* 하위 목록(가. 나. 등)은 한 단계 더 들여쓴다. */
#terms-policy li ol {
    margin-top: 6px;
}

/* 이전 화면의 줄바꿈 뒤 들여쓰기 자리(인라인 스타일 폭 48px을 옮긴 것). */
.terms-indent {
    display: inline-block;
    width: 48px;
}

.terms-emphasis {
    font-weight: 700;
}

.terms-additional {
    padding-top: 16px;
    border-top: 1px solid var(--terms-border);
}

@media (max-width: 575.98px) {
    body {
        font-size: 14px;
    }

    .terms-page {
        padding: 24px 16px 40px;
    }

    .terms-logo img {
        max-width: 180px;
    }

    /* 좁은 폭에서는 줄바꿈 뒤 들여쓰기 자리를 줄인다(내어쓰기 안이라 이미 번호만큼 들어가 있다). */
    .terms-indent {
        width: 0;
    }
}