/* 📜 청취담 약관 · 정책 문서 공통 서식 (2026-09-14) — terms · refund · privacy · location 이 함께 쓴다.
   ⚠️ 한 곳만 고치면 네 문서가 같이 바뀐다. 문서마다 서식을 따로 두면 한쪽만 고치게 된다. */
/* ⚠️ 도크는 «로그인한 사람에게만» 실린다(sidebar.js).
       비멤버에게는 도크가 없는데 자리만 104px 비워 두면 바닥이 휑하다.
       기본을 0 으로 두고, 도크가 실릴 때 floating-dock.css 가 덮어쓰게 한다. */
    :root { --dock-safe: 0px; }   /* 도크가 실리면 floating-dock.css 가 덮어쓴다 */

    /* ══════════════════════════════════════════════════════════
       ⚖️ 환불 및 청약철회 정책

       로그인 없이도 볼 수 있어야 한다.
       PG 심사와 통신판매업 신고에서 이 페이지를 직접 확인한다.
       그래서 사이드바 · 로그인에 기대지 않는 홑페이지로 만든다.
       ══════════════════════════════════════════════════════════ */
    :root {
        --bg:      #123C36;
        --card:    #17493E;
        --red:     #C82433;
        --red-on:  #E23B4E;
        --cream:   #F3E6C8;
        --mint:    #8FD6A6;
        --gold:    #FFD27A;
        --line:  rgba(243, 230, 200, 0.16);
        --dim:   rgba(243, 230, 200, 0.62);
        --dim2:  rgba(243, 230, 200, 0.44);
    }
    * { box-sizing: border-box; }
    html, body { background: var(--bg); }
    body {
        margin: 0; padding: 0 18px 80px;
        font-family: 'Pretendard', -apple-system, sans-serif;
        color: var(--cream); -webkit-text-size-adjust: 100%;
    }
    .wrap { max-width: 720px; margin: 0 auto; }

    /* ── 머리말 ── */
    header { padding: 40px 0 0; text-align: center; }
    header .home {
        display: inline-block; margin-bottom: 22px; text-decoration: none;
        font-size: 0.74rem; font-weight: 800; color: var(--dim2);
    }
    header .home:hover { color: var(--cream); }
    header h1 { margin: 0; font-size: 1.55rem; font-weight: 900; letter-spacing: -0.03em; }
    header .since {
        display: inline-block; margin-top: 12px; padding: 5px 13px; border-radius: 999px;
        background: rgba(243, 230, 200, 0.1); color: var(--dim);
        font-size: 0.7rem; font-weight: 800;
    }
    header p {
        margin: 16px 0 0; font-size: 0.8rem; font-weight: 700; line-height: 1.75;
        color: var(--dim); word-break: keep-all;
    }
    .rule { height: 1px; background: var(--line); margin: 30px 0 6px; }

    /* ══════════════════════════════════════════════════════════
       🧭 조항 바로가기 — 화면 위에 늘 붙어 따라다닌다

       ⚠️ 도크(화면 «아래»)와 겹치지 않게 «위»에 붙인다.
          아래에 또 하나를 띄우면 두 막대가 화면을 위아래로 갉아먹는다.
       ══════════════════════════════════════════════════════════ */
    .jump {
        position: sticky; top: 0; z-index: 40;
        margin: 22px -18px 0; padding: 0 18px;
        background: var(--bg);
    }
    .jump-bar {
        width: 100%; display: flex; align-items: center; gap: 10px;
        padding: 13px 16px; border-radius: 14px; cursor: pointer;
        background: var(--card); border: 1px solid var(--line);
        font-family: inherit; font-size: 0.84rem; font-weight: 800; color: var(--cream);
        box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.6);
    }
    .jump-bar .cur {
        flex: 1; min-width: 0; text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .jump-bar i { flex: 0 0 auto; font-size: 0.78rem; color: var(--dim2); }
    .jump-bar .car { transition: transform 0.2s ease; }
    .jump-bar[aria-expanded="true"] .car { transform: rotate(180deg); }

    .jump-list {
        margin-top: 6px; padding: 8px; border-radius: 14px;
        background: var(--card); border: 1px solid var(--line);
        max-height: 60vh; overflow-y: auto;
        box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
    }
    .jump-list a {
        display: flex; gap: 10px; align-items: baseline;
        padding: 10px 10px; border-radius: 10px; text-decoration: none;
        font-size: 0.82rem; font-weight: 700; color: var(--dim); word-break: keep-all;
    }
    .jump-list a span {
        flex: 0 0 auto; font-size: 0.7rem; font-weight: 900; color: var(--red-on);
        font-variant-numeric: tabular-nums;
    }
    .jump-list a:hover, .jump-list a:focus, .jump-list a.on { background: rgba(243, 230, 200, 0.07); color: var(--cream); }
    .jump-all { display: flex; gap: 7px; margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--line); }
    .jump-all button {
        flex: 1; padding: 9px; border-radius: 10px; cursor: pointer;
        background: rgba(243, 230, 200, 0.08); border: 1px solid var(--line);
        font-family: inherit; font-size: 0.76rem; font-weight: 800; color: var(--cream);
    }
    .jump-all button:active { background: rgba(243, 230, 200, 0.16); }

    /* ══════════════════════════════════════════════════════════
       📂 조항은 접어 둔다 — 단, 요약은 접힌 채로도 보인다

       ⚠️ 「환불 불가」 같은 «불리한 조항» 이 통째로 숨으면
          「중요한 내용을 감췄다」 는 지적을 받는다.
          그래서 제목 아래에 그 조항의 핵심을 한 줄로 늘 보여 준다.
       ⚠️ 「모두 펼치기」 를 반드시 둔다. 심사자가 화면을 통째로 갈무리하거나
          인쇄할 때 접혀 있으면 내용을 확인할 수 없다.
       ⚠️ 인쇄할 때는 저절로 다 펼쳐지게 한다(아래 @media print).
       ══════════════════════════════════════════════════════════ */
    details.sec {
        margin-top: 12px; border-radius: 16px;
        background: var(--card); border: 1px solid var(--line);
        scroll-margin-top: 72px;   /* 바로가기 막대에 제목이 가리지 않게 */
        overflow: hidden;
    }
    details.sec > summary {
        display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
        padding: 16px 17px; cursor: pointer; list-style: none;
        position: relative;
    }
    details.sec > summary::-webkit-details-marker { display: none; }
    details.sec > summary::after {
        content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
        position: absolute; right: 17px; top: 17px;
        font-size: 0.7rem; color: var(--dim2); transition: transform 0.2s ease;
    }
    details.sec[open] > summary::after { transform: rotate(180deg); }
    details.sec > summary .n {
        flex: 0 0 auto; font-size: 0.72rem; font-weight: 900; color: var(--red-on);
        font-variant-numeric: tabular-nums;
    }
    details.sec > summary .t {
        font-size: 1.02rem; font-weight: 900; color: var(--cream);
        letter-spacing: -0.02em; padding-right: 22px; word-break: keep-all;
    }
    /* 접혀 있어도 보이는 한 줄 요약 */
    details.sec > summary em {
        flex: 1 0 100%; margin-top: 5px; font-style: normal;
        font-size: 0.76rem; font-weight: 600; color: var(--dim2); line-height: 1.6;
        word-break: keep-all;
    }
    details.sec[open] > summary { border-bottom: 1px solid var(--line); }
    details.sec[open] > summary em { color: var(--dim); }
    details.sec > .body { padding: 2px 16px 15px; }
    details.sec > .body > *:first-child { margin-top: 10px; }
    h3 {
        margin: 17px 0 5px; font-size: 0.86rem; font-weight: 900; color: var(--cream);
    }
    p, li {
        font-size: 0.81rem; font-weight: 600; line-height: 1.7; color: var(--dim);
        word-break: keep-all;
    }
    p { margin: 0 0 8px; }
    ul, ol { margin: 0 0 8px; padding-left: 19px; }
    li { margin-bottom: 3px; }
    b { color: var(--cream); font-weight: 800; }

    /* ── 표 ── */
    .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 11px; }
    table { width: 100%; border-collapse: collapse; min-width: 460px; }
    th, td {
        padding: 9px 11px; text-align: left; vertical-align: top;
        border-bottom: 1px solid rgba(243, 230, 200, 0.1);
        font-size: 0.78rem; font-weight: 600; line-height: 1.55; color: var(--dim);
    }
    th {
        font-size: 0.7rem; font-weight: 900; color: var(--dim2);
        border-bottom-color: var(--line); white-space: nowrap;
    }
    td b { font-weight: 800; }
    .yes { color: var(--mint); font-weight: 900; white-space: nowrap; }
    .no  { color: #FF97A4; font-weight: 900; white-space: nowrap; }


    /* ── 본문 속 링크 ──
       ⚠️ 색을 안 정하면 브라우저 기본 파랑, 한 번 누르면 보라가 된다.
          짙은 초록 바탕에서 보라는 읽히지도 않는다. :visited 까지 못 박는다. */
    details.sec .body a,
    details.sec .body a:visited,
    .biz a, .biz a:visited {
        color: var(--mint);
        font-weight: 700;
        text-decoration: none;
        border-bottom: 1px solid rgba(143, 214, 166, 0.35);
        padding-bottom: 1px;
        transition: color 0.15s ease, border-color 0.15s ease;
    }
    details.sec .body a:hover, .biz a:hover {
        color: #C3EFD0;
        border-bottom-color: #C3EFD0;
    }
    details.sec .body a:active { opacity: 0.7; }
    /* 다른 문서로 건너가는 링크임을 작은 꺾쇠로 알린다 */
    details.sec .body a[href$=".html"]::after {
        content: '\2197';           /* ↗ */
        margin-left: 2px;
        font-size: 0.82em;
        opacity: 0.65;
    }

    /* ── 강조 상자 ── */
    .note {
        margin: 11px 0; padding: 13px 15px; border-radius: 14px;
        background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line);
        font-size: 0.79rem; font-weight: 600; line-height: 1.7; color: var(--dim);
    }
    /* ⚠️ 반드시 첫 자식에만 건다. 그냥 .note b 로 걸면 문장 한복판의 강조까지
       제 줄을 차지해 「참가비는 / 04 / , 굿즈는 / 05」 처럼 토막 난다. */
    .note > b:first-child { display: block; margin-bottom: 3px; font-size: 0.84rem; font-weight: 900; color: var(--cream); }
    .note b { color: var(--cream); font-weight: 800; }
    .note.warn { background: rgba(255, 210, 122, 0.1); border-color: rgba(255, 210, 122, 0.34); }
    .note.warn > b:first-child { color: var(--gold); }
    .calc {
        margin: 10px 0; padding: 12px 14px; border-radius: 12px;
        background: rgba(0, 0, 0, 0.28); border: 1px dashed rgba(243, 230, 200, 0.24);
        font-size: 0.79rem; font-weight: 700; line-height: 1.75; color: var(--cream);
        font-variant-numeric: tabular-nums;
    }
    .calc em { font-style: normal; color: var(--dim2); font-weight: 600; }

    /* ── 문의 ── */
    .contact { margin-top: 14px; }
    .contact div {
        display: flex; gap: 12px; padding: 11px 0;
        border-bottom: 1px solid rgba(243, 230, 200, 0.1);
        font-size: 0.81rem; font-weight: 700;
    }
    .contact div:last-child { border-bottom: 0; }
    .contact span { flex: 0 0 84px; color: var(--dim2); font-weight: 800; }
    .contact a { color: var(--mint); text-decoration: none; }
    .contact a:hover { text-decoration: underline; }

    /* ── 사업자 정보 ── */
    .biz {
        margin-top: 40px; padding: 20px 18px; border-radius: 16px;
        background: var(--card); border: 1px solid var(--line);
    }
    .biz h4 { margin: 0 0 12px; font-size: 0.78rem; font-weight: 900; color: var(--dim); }
    .biz dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 7px 12px; }
    .biz dt { font-size: 0.75rem; font-weight: 800; color: var(--dim2); }

    .biz dd { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--cream); word-break: keep-all; }
    .biz dd.todo { color: var(--gold); }

    /* 🔒 구매안전서비스 인증마크 — 사업자 정보와 붙지 않게 옅은 가름선을 두고 띄운다.
       (마크 자체의 생김새는 /js/kb-escrow.js) */
    .biz .kb-esc {
        margin-top: 16px; padding-top: 14px;
        border-top: 1px solid rgba(243, 230, 200, 0.09);
        /* 여기는 법이 요구하는 문서다. 결제 화면처럼 감출 자리가 아니라
           확인하러 온 사람이 읽을 수 있어야 한다. 그래서 흐리기를 풀어 준다. */
        opacity: 0.68;
    }
    .biz .kb-esc [data-kb-escrow] { filter: grayscale(0.65); }

    footer.foot {
        margin-top: 30px; text-align: center;
        font-size: 0.72rem; font-weight: 700; color: var(--dim2); line-height: 1.8;
    }

    /* ══════════════════════════════════════════════════════════
       📱 폰에서 읽히게

       ⚠️ 표가 가장 큰 문제였다. min-width:460px 이라 397px 짜리 폰에서
          오른쪽 「환불」 열이 통째로 잘려 나갔다. 감싸개가 옆으로 굴러가긴 하지만
          «잘렸다는 표시가 없어» 그런 열이 있는 줄도 모르고 지나친다.
          법이 요구하는 문서에서 「환불 가능 여부」 가 안 보이는 것은 그냥 사고다.
       ⚠️ 게다가 첫 열이 좁아 「모임 · 파 / 티 · 동아 / 리」 처럼 세로로 쪼개졌다.
       → 폰에서는 표를 «가로로 미는 것» 대신 «한 줄씩 카드로 접는다».
          칸마다 data-label(열 이름)을 붙여 두었으므로 무슨 값인지 그대로 읽힌다.
       ══════════════════════════════════════════════════════════ */
    @media (max-width: 560px) {
        /* 글자를 키운다 — 법 문서는 읽혀야 한다 */
        p, li { font-size: 0.87rem; line-height: 1.72; }
        .note { font-size: 0.85rem; line-height: 1.72; }
        .note > b:first-child { font-size: 0.89rem; }
        .calc { font-size: 0.85rem; }
        section > h2 { font-size: 1.06rem; }
        h3 { font-size: 0.9rem; margin-top: 18px; }
        section { margin-top: 30px; }

        /* 표 → 카드 */
        .tw { overflow: visible; margin: 14px 0 16px; }
        table { min-width: 0; display: block; }
        thead { display: none; }
        tbody, tr, td { display: block; width: auto; }
        tr {
            border: 1px solid var(--line); border-radius: 14px;
            padding: 13px 15px; margin-bottom: 9px;
            background: rgba(0, 0, 0, 0.2);
        }
        /* ⚠️ 줄 높이를 배수(1.75)로 두면 이름표와 값의 실제 높이가 달라져 첫 줄이 어긋난다.
              둘 다 같은 절대값(1.5rem)으로 못 박는다. */
        td { border: 0; padding: 4px 0; font-size: 0.85rem; line-height: 1.5rem; }
        /* 첫 칸은 그 줄의 제목처럼 */
        td:first-child {
            font-size: 0.92rem; font-weight: 900; color: var(--cream);
            padding-bottom: 7px; margin-bottom: 6px;
            border-bottom: 1px solid rgba(243, 230, 200, 0.12);
        }
        /* 나머지 칸은 「이름표 | 값」 한 줄로.
           ⚠️ 이름표를 display:block 으로 두면 값이 아래로 밀려 두 줄이 된다.
              「환불 / 가능 (03)」 처럼 짧은 값일수록 손해가 크다. */
        /* ⚠️ td 를 flex 로 만들면 안 된다. 문장 속 <b> 하나하나가 제 칸이 되어
              「청 취 담 / 유 료 재 화」 처럼 글자가 세로로 쪼개진다.
              td 는 평범한 글줄로 두고, 이름표만 왼쪽 여백에 «띄운다». */
        td:not(:first-child) { position: relative; padding-left: 60px; }
        td:not(:first-child)::before {
            content: attr(data-label);
            position: absolute; left: 0; top: 4px; width: 54px;
            font-size: 0.68rem; font-weight: 900; color: var(--dim2);
            letter-spacing: 0.02em; line-height: 1.5rem; word-break: keep-all;
        }
        .yes, .no { white-space: normal; }
    }

    @media (max-width: 480px) {
        header { padding-top: 28px; }
        header h1 { font-size: 1.3rem; }
        .biz dl { grid-template-columns: 1fr; gap: 2px; }
        .biz dt { margin-top: 8px; }
        .contact div { flex-direction: column; gap: 3px; }
        .contact span { flex: none; }
    }

    /* ══════════════════════════════════════════════════════════
       🖨 인쇄 · PDF 로 저장할 때는 «전부» 펼친다

       ⚠️ 심사자는 이 문서를 갈무리하거나 PDF 로 만들어 붙인다.
          그때 접혀 있으면 「내용을 확인할 수 없는 정책」 이 된다.
          접이식으로 만든 대가를 여기서 치른다.
       ══════════════════════════════════════════════════════════ */
    @media print {
        .jump, .home, .ch2d-dock, #sidebar-container { display: none !important; }
        details.sec { break-inside: avoid; border-color: #999; }
        details.sec > .body { display: block !important; }
        details.sec > summary::after { display: none; }
        body { background: #fff !important; color: #111 !important; padding: 0 !important; }
        .wrap { max-width: none; }
        b, .biz dd, details.sec > summary .t { color: #000 !important; }
        p, li, td, .note, details.sec > summary em { color: #333 !important; }
        .note, .calc, details.sec, .biz { background: #fff !important; }
        .yes { color: #0a7a44 !important; }
        .no  { color: #b3182b !important; }
    }
    
    /* 🛡️ 아래 도크가 마지막 카드를 덮지 않도록 도크 높이만큼 비워 둔다.
       (--dock-safe 는 /css/floating-dock.css 가 정한다. PC 104px · 모바일 88px + 안전영역) */
    body { padding-bottom: calc(var(--dock-safe, 104px) + 24px) !important; }


    /* ⚠️ /css/sidebar.css 가 body 를 통째로 정한다 (밝은 바탕 · flex · 100vh).
       색과 글꼴은 위 규칙이 되찾아 오지만, 이 화면이 정하지 않은 배치는
       그대로 새어 들어온다. 한 단계 힘을 더 줘서 되돌린다. */
    html body { display: block; height: auto; }
    /* ⚠️ 사이드바 조각(/sidebar.html)이 제 서식을 달고 들어와
       html, body 배경을 #F4F6F5 로 !important 로 덮는다.
       조각은 화면 뒤에 붙으므로 한 단계 힘을 더 줘서 배경까지 되찾아 온다. */
    html body { background: var(--bg) !important; }
    /* html 까지 덮어야 한다. 글이 짧거나 화면을 끝까지 당겼을 때
       body 밖으로 밝은 바탕이 비친다. (:root 는 html 보다 힘이 세다) */
    :root { background: var(--bg) !important; }

/* 📑 문서끼리 오가는 줄 (2026-09-14) — 네 문서 머리에 똑같이 선다 */
.docnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.docnav a { font-size: 0.74rem; font-weight: 800; color: var(--dim); text-decoration: none;
            padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); }
.docnav a.on { color: var(--bg); background: var(--cream); border-color: var(--cream); }