/* Dear TOPIK — 환불 정책 전용 스타일 (카드형)
 *
 * refund_ko.html 이 쓰던 Tailwind CDN(cdn.tailwindcss.com) + Pretendard CDN 을 걷어내고
 * 같은 결과를 내는 일반 CSS 로 옮긴 것. 값은 원본의 유틸리티 클래스에서 1:1로 가져왔다.
 *   bg-[#EEF1F7] / max-w-[820px] / py-16 / rounded-[24px] / shadow-card / border-line …
 * 폰트는 CDN 대신 레포에 있는 로컬 Pretendard(/fonts/*.woff2)를 쓴다(랜딩과 동일).
 *
 * 마크업은 legal.js 가 만드는 의미 구조(.legal-head/.legal-body/.legal-article/.legal-foot)에
 * 붙는다 — 사전(refund.<lang>.js)에는 클래스가 없다.
 */

/* ── 로컬 Pretendard (랜딩 index.html 의 정의와 동일) ── */
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2');
}

/* Tailwind preflight 가 전역으로 깔던 것 중 레이아웃에 필요한 최소치.
   box-sizing 이 없으면 width:100% 에 패딩이 더해져 컨테이너가 뷰포트를 넘친다. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --brand: #003478; /* tailwind.config: colors.brand.DEFAULT */
    --brand-hover: #18396a; /* colors.brand.hover */
    --line: #e5e7eb; /* colors.line.DEFAULT */
    --ink: #1c2333;
    --ink-sub: #40506c;
    --ink-mut: #5b647a;
    --ink-faint: #9097a3;
    --shadow-card: rgba(26, 42, 90, 0.22) 0px 16px 44px -30px; /* boxShadow.card */
}

/* body: font-pretendard min-h-screen bg-[#EEF1F7] text-[#1C2333] antialiased
   line-height 1.5 는 Tailwind preflight 가 html 에 걸던 기본값 — 없으면 normal 이 되어
   요소 높이가 원본과 어긋난다. */
body {
    margin: 0;
    min-height: 100vh;
    line-height: 1.5;
    background: #eef1f7;
    color: var(--ink);
    font-family:
        'Pretendard',
        'Apple SD Gothic Neo',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Noto Sans KR',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* div: mx-auto w-full max-w-[820px] px-0 py-16 */
#doc {
    margin: 0 auto;
    width: 100%;
    max-width: 820px;
    padding: 4rem 0;
}

/* header: mb-8 text-center */
.legal-head {
    margin-bottom: 2rem;
    text-align: center;
}
/* h1: text-brand text-[32px] leading-[1.25] font-extrabold tracking-[-0.03em] */
.legal-head h1 {
    margin: 0;
    color: var(--brand);
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.03em;
}
/* p: mt-2.5 text-base text-[#5B647A]
   text-base = font-size 1rem + line-height 1.5rem (Tailwind 는 둘을 함께 건다) */
.legal-head p {
    margin: 0.625rem 0 0;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--ink-mut);
}

/* main: border-line shadow-card rounded-[24px] border bg-white px-12 py-2 */
.legal-body {
    display: block;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-card);
    padding: 0.5rem 3rem;
}

/* section: border-line border-b py-[30px] — 마지막 조항은 구분선 없음 */
.legal-article {
    border-bottom: 1px solid var(--line);
    padding: 30px 0;
}
.legal-article:last-child {
    border-bottom: 0;
}
/* h2: mb-3 text-lg font-extrabold tracking-[-0.02em] text-[#1C2333]
   (사전의 조항 제목은 legal.js 가 h3 로 렌더한다) */
.legal-article h3 {
    margin: 0 0 0.75rem;
    font-size: 1.125rem; /* text-lg = 1.125rem / 1.75rem */
    line-height: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}
/* p: text-base leading-[1.75] break-keep text-[#40506C] */
.legal-article p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    word-break: keep-all;
    color: var(--ink-sub);
}

/* 원본 여백 구조: 카드 →mt-5(20px)→ 연락처 →mt-[30px]→ 내비 →gap-2.5(10px)→ 저작권.
   원본은 연락처가 <footer> 밖의 형제였지만 여기서는 .legal-foot 안에 들어오므로,
   같은 간격이 나오도록 아래에서 다시 계산한다(gap 10px 가 이미 더해지는 점 반영). */
.legal-foot {
    margin-top: 20px; /* 카드 → 연락처 = mt-5 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* gap-2.5 */
    font-size: 13px;
    color: var(--ink-faint);
}
/* 연락처 박스 — 원본: border-line-dark mt-5 rounded-[14px] border bg-[#E9EDF3] px-6 py-5
   text-[13px] leading-[1.7] text-[#6A7280]. (mt-5 는 .legal-foot 의 margin-top 이 대신한다)
   원본에서 이 박스는 <footer> 밖의 전폭 블록이라 글자가 왼쪽 정렬이다 — 가운데로 몰지 않는다. */
.legal-foot section {
    align-self: stretch;
    border: 1px solid #e0e4ec; /* colors.line.dark */
    border-radius: 14px;
    background: #e9edf3;
    padding: 1.25rem 1.5rem; /* py-5 px-6 */
    font-size: 13px; /* text-[13px] */
    line-height: 1.7; /* leading-[1.7] */
    color: #6a7280; /* text-[#6A7280] */
}
.legal-foot section b {
    font-weight: 800;
    color: var(--ink);
}
/* 원본은 span::before 로 '·' 구분자를 넣었다(before:content-['·_']) */
.legal-foot section span::before {
    content: '· ';
}
/* 원본은 Tailwind preflight 가 a 의 밑줄을 지우고 hover 에서만 켰다 —
   여기엔 preflight 가 없으므로 직접 꺼야 브라우저 기본 밑줄이 안 남는다. */
.legal-foot section a {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}
.legal-foot section a:hover {
    text-decoration: underline;
}

/* 내비 — 원본 footer > div: flex flex-wrap items-center justify-center gap-2.
   연락처 → 내비 = 원본 mt-[30px]. flex gap 10px 가 이미 붙으므로 20px 만 더한다.
   ★ 선택자를 "연락처 다음 div" 로 한정한다. .legal-foot div 로 두면 아래 저작권까지
     flex·구분자색이 걸려 원본과 달라진다. */
.legal-foot section + div {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.legal-foot section + div a {
    color: var(--ink-mut);
    text-decoration: none;
}
.legal-foot section + div a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}
.legal-foot section + div span {
    color: #cdd2da; /* text-[#CDD2DA] — 내비 구분자 '·' */
}

/* 저작권 — 원본: text-sm text-[#9097A3]. text-sm 은 14px/20px 로 .legal-foot 의 13px 과 다르다. */
.legal-foot > div:last-child {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ink-faint);
}

/* max-[640px]: 원본의 모바일 오버라이드 */
@media (max-width: 640px) {
    #doc {
        padding: 2.75rem 1rem; /* py-11 px-4 */
    }
    .legal-head {
        margin-bottom: 1.5rem; /* mb-6 */
    }
    .legal-head h1 {
        font-size: 28px;
    }
    .legal-body {
        border-radius: 20px;
        padding: 0.25rem 1.25rem; /* py-1 px-5 */
    }
    .legal-article {
        padding: 1.5rem 0; /* py-6 */
    }
    .legal-article h3 {
        font-size: 17px;
    }
    .legal-article p {
        font-size: 15px;
        line-height: 1.7;
    }
    /* 연락처: max-[640px]:px-5 max-[640px]:py-[18px] max-[640px]:text-sm
       text-sm = 0.875rem / 1.25rem — line-height 를 함께 덮어써야 데스크톱의 1.7 이 안 남는다 */
    .legal-foot section {
        padding: 18px 1.25rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    /* b: max-[640px]:mb-1 max-[640px]:block — 모바일에선 '문의'가 한 줄 차지 */
    .legal-foot section b {
        display: block;
        margin-bottom: 0.25rem;
    }
    /* span: max-[640px]:block + before:content-[''] — 줄바꿈되며 '·' 구분자 제거 */
    .legal-foot section span {
        display: block;
    }
    .legal-foot section span::before {
        content: '';
    }
}