/* 약관·개인정보처리방침 전용.

   긴 글이다. 읽히려면 줄이 너무 길어서는 안 되므로 폭을 묶고,
   줄 간격을 넉넉히 준다. SmsOptIn.aspx 의 .policy-page 와 같은 결로 맞췄다. */

.legal-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 16px 50px;
}

.legal-doc h1 {
    font-size: 22px;
    margin: 0 0 6px;
    text-align: center;
    color: #222;
}

/* 언제 마지막으로 손댔는지가 이런 글에서는 내용만큼 중요하다. */
.legal-doc .legal-updated {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin: 0 0 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
}

.legal-doc h2 {
    font-size: 16px;
    margin: 28px 0 10px;
    color: #2c7be5;
}

.legal-doc p,
.legal-doc li {
    font-size: 14.5px;
    line-height: 1.8;
    color: #333;
}

.legal-doc p {
    margin: 0 0 12px;
}

.legal-doc ul {
    margin: 0 0 12px 20px;
    list-style: disc;
}

.legal-doc li {
    margin: 0 0 6px;
}

.legal-doc a {
    color: #2c7be5;
    text-decoration: underline;
}

.legal-doc .legal-see-also {
    margin-top: 34px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
    font-size: 13.5px;
    color: #777;
}

/* 가입 화면 아래의 동의 줄.

   글 전체를 화면에 쏟아붓지 않는다 - 한 줄과 링크만 두고, 읽고 싶은
   사람은 새 창에서 읽는다. 이것이 요즘 방식이고, 예전처럼 가입 전에
   약관 화면을 하나 거치게 만드는 것보다 실제로 더 많이 읽힌다. */
.AgreementCheck {
    margin: 18px 0 4px;
    padding: 14px 16px;
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

.AgreementCheck input[type="checkbox"] {
    margin: 0 8px 0 0;
    vertical-align: middle;
}

.AgreementCheck label {
    vertical-align: middle;
    cursor: pointer;
}

.AgreementCheck a {
    color: #2c7be5;
    text-decoration: underline;
}

/* 동의하지 않고 누른 경우.

   숨기고 보이고를 따로 두지 않는다 - 글자가 없으면 어차피 안 보이고,
   그래야 화면에서 넣든 서버에서 넣든 같은 자리에 같은 모양으로 나온다. */
.AgreementCheck .AgreementError {
    display: block;
    margin-top: 8px;
    color: #d13438;
    font-size: 13px;
}

/* 동의 칸과 광고메일 칸이 나란히 설 때 사이를 띄운다. */
.AgreementCheck + .AgreementCheck {
    margin-top: 10px;
}

/* 골라도 되고 말아도 되는 칸임을 글로 적는다.

   반드시 골라야 하는 칸과 같은 모양으로 서 있으니, 둘을 가르는 것은
   생김새가 아니라 이 한 낱말이다. 작게, 그러나 읽힐 만큼. */
.AgreementOptional {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #fff;
    font-size: 11.5px;
    color: #888;
    vertical-align: 1px;
}