@charset "utf-8";

/* 회사소개 · 이용약관 · 개인정보처리방침 · 이용안내 공통 본문 */
.simplePage { box-sizing: border-box; padding-top: 10px; padding-bottom: 40px; }
.simplePage__title { margin: 0 0 20px; font-size: 22px; font-weight: 700; line-height: 1.4; }
.simplePage__body { font-size: 14px; line-height: 1.7; color: var(--mono-1-66); word-break: keep-all; }
.simplePage__body h2 { margin: 28px 0 10px; font-size: 16px; font-weight: 600; color: var(--mono-00); }
.simplePage__body h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 600; color: var(--mono-00); }
.simplePage__body p { margin: 0 0 12px; }
.simplePage__body ul { margin: 0 0 12px; padding-left: 18px; list-style: disc; }
/* 약관의 "1. 2. 3." 조항. 번호를 글로 적지 않아도 브라우저가 붙여 줍니다. */
.simplePage__body ol { margin: 0 0 12px; padding-left: 22px; list-style: decimal; }
.simplePage__body li { margin: 0 0 6px; }
/*
    common.css 의 li { list-style:none } 이 li 에 직접 걸려 있어서,
    위에서 ul/ol 에 준 점·번호가 자식에게 물려지지 못하고 지워집니다.
    li 에 다시 적어 주어야 화면에 나옵니다.
*/
.simplePage__body ul > li { list-style: disc; }
.simplePage__body ol > li { list-style: decimal; }
/* 조항 안에 들어가는 "-" 목록. 위아래 여백만 좁혀 한 조항으로 묶여 보이게 합니다. */
.simplePage__body li > ul,
.simplePage__body li > ol { margin: 6px 0 0; }
.simplePage__body dl { margin: 0 0 12px; }
.simplePage__body dt { margin: 12px 0 4px; font-weight: 600; color: var(--mono-00); }
.simplePage__body dd { margin: 0 0 6px; }
/* 시행일처럼 본문 맨 위에 놓이는 한 줄 정보. 본문보다 흐리게 두어 먼저 읽히지 않게 합니다. */
.simplePage__meta {
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mono-4-dd);
    color: var(--mono-2-95);
    font-size: 13px;
}

.simplePage__notice {
    margin: 0 0 24px; padding: 14px 16px; border-radius: var(--radius-8);
    background: var(--mono-5-f6); color: var(--mono-1-66); font-size: 13px; line-height: 1.6;
}


/* ------------------------------------------------------------------
   회사소개 (/company/)

   사업자 정보를 항목-내용 표로 보여 줍니다.
   글자만 읽는 것이 아니라 짝을 이루는 값이므로 dl 이 아니라 표를 씁니다.
   화면 낭독기가 "상호명 - 주식회사 바로그네트워크" 처럼 짝지어 읽어 줍니다.

   다른 세 페이지(이용약관·개인정보처리방침·이용안내)는 글이라 가운데 정렬이
   읽기 불편합니다. 그래서 제목 가운데 정렬은 회사소개에만 겁니다.
------------------------------------------------------------------ */
.simplePage--company .simplePage__title {
    margin-bottom: 24px;
    text-align: center;
}

.companyInfo {
    width: 100%;
    /* 칸 사이 틈을 없애 선이 한 줄로 이어지게 합니다. */
    border-collapse: collapse;
    /* 제목 아래 굵은 선. 표의 시작을 알립니다. */
    border-top: 2px solid var(--mono-00);
    color: var(--mono-00);
    font-size: 14px;
    line-height: 1.6;
    table-layout: fixed;
}

/* 표가 무엇인지 알리는 글. 눈에는 안 보이고 화면 낭독기만 읽습니다. */
.companyInfo__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.companyInfo th,
.companyInfo td {
    padding: 18px 20px;
    border-bottom: 1px solid var(--mono-4-dd);
    /* 없으면 좌우 여백 40px 이 폭에 더해져, 아래 150px 이 실제로는 190px 이 됩니다. */
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
    word-break: keep-all;
}

.companyInfo th {
    /* 항목 이름 칸. 폭을 고정해 내용 칸의 시작 위치를 나란히 맞춥니다. */
    width: 190px;
    background: var(--mono-5-f6);
    font-weight: 700;
}

.companyInfo td {
    /* 주소처럼 긴 값은 줄이 바뀌어야 하므로 낱말 단위로 끊습니다. */
    word-break: break-word;
}

.companyInfo a {
    color: inherit;
    text-decoration: none;
}

.companyInfo a:hover,
.companyInfo a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 767px) {
    /* 좁은 화면에서는 항목 칸을 줄이고 여백을 좁혀 내용이 눌리지 않게 합니다. */
    .companyInfo {
        font-size: 13px;
    }

    .companyInfo th,
    .companyInfo td {
        padding: 14px 12px;
    }

    .companyInfo th {
        width: 128px;
    }
}