@charset "utf-8";

/* ============================================================================
   page/terms.css — 약관 · 개인정보처리방침 · 쿠키
   ----------------------------------------------------------------------------
   이 화면에서만 쓰인다: /terms/*  ($menu = "terms")

   세 화면은 오랫동안 «$subClass = 'tabernacle'» 로 성막 클래스를 빌려 입었다.
   성막 본문 상자(.tabernacle .text-box)의 생김새를 얻으려던 것인데, 정작 본문은
   .terms-document 가 처음부터 다시 칠하고 있었고 성막이 씌우는 max-height 는
   마크업의 «style="max-height: none"» 으로 도로 벗겨 내고 있었다.
   빌린 옷을 벗기고 제 이름(.terms-page)으로 세웠다.
   ============================================================================ */

/* ── 약관 — 정책 탭과 문서형 본문 ────────────────────────────────── */
.terms-page-wrap {
    width:min(100% - 48px, 980px);
    margin:0 auto;
}
.terms-document {
    padding:48px 56px 56px;
    border:1px solid var(--line);
    border-top:4px solid var(--gold);
    border-radius:var(--r-lg);
    background:var(--paper);
    box-shadow:var(--sh-card);
}
.terms-document > ul > li {
    position:relative;
    padding-top:18px;
    color:var(--copy);
    font-size:15px;
    line-height:var(--lh-loose);
    text-align:left;
}
.terms-document > ul > li:first-child {
    margin-bottom:8px;
    padding:0 0 24px;
    border-bottom:1px solid var(--line);
    color:var(--muted);
}
.terms-document > ul > li:first-child strong {
    display:block;
    margin-bottom:6px;
    color:var(--ink);
    font-size:var(--fs-xl);
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.02em;
}
.terms-document .policy-head,
.terms-document > ul > li:not(:first-child) > strong:first-child {
    display:block;
    margin:24px 0 0;
    padding:0 0 10px 14px;
    border-bottom:1px solid var(--gold-line);
    color:var(--ink);
    font-size:var(--fs-lg);
    font-weight:700;
    line-height:1.4;
}
.terms-document .policy-head:before,
.terms-document > ul > li:not(:first-child) > strong:first-child:before {
    position:absolute;
    width:3px;
    height:22px;
    margin-left:-14px;
    border-radius:var(--r-pill);
    background:var(--gold);
    content:'';
}
.terms-document a {
    color:var(--gold-deep);
    text-decoration:underline;
    text-underline-offset:3px;
}
.terms-document a:hover {
    color:var(--gold);
}

@media (max-width:767px) {
    .terms-page-wrap {
        width:calc(100% - 32px);
    }
    .terms-document {
        padding:32px 22px 40px;
    }
    .terms-document > ul > li {
        font-size:var(--fs-base);
        line-height:1.75;
    }
}