/* 약관·환불정책·개인정보처리방침 공용 스타일.
   이 문서들은 앱 설정 화면에서 링크로 들어온다. 문서만 다른 폭으로 퍼지면
   다른 사이트로 넘어온 것처럼 보이므로 폭을 앱과 함께 움직인다.
   팔레트도 앱과 같은 값을 쓴다.

   앱(index.html)이 768px 부터 720px, 1024px 부터 1180px 로 넓어지므로
   이 문서들도 같은 지점에서 넓어진다 — 파일 맨 아래 media query 참조. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #00421F;
  --accent: #DA950B;
  --accent-text: #B37000;
  --accent-lt: #FFEBD1;
  --bg: #FAF8F5;
  --bg-outer: #EAE7E3;
  --card: #FFFFFF;
  --text: #14110D;
  --text-sub: #5B5752;
  --border: #E0DDDA;
  --neutral-bg: #F4F1ED;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--bg-outer);
  color: var(--text);
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

.doc {
  max-width: 390px;   /* index.html 의 .phone-wrap 과 같은 값 — 함께 고칠 것.
                         넓은 화면 폭은 파일 맨 아래 media query 에서 덮는다 */
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
}

/* ── 머리말 ── */
.doc-head {
  background: var(--primary);
  color: #fff;
  padding: 26px 22px 22px;
}
.doc-head .back {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  opacity: .8;
  text-decoration: none;
  margin-bottom: 12px;
}
.doc-head .back:hover { opacity: 1; }
.doc-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.doc-head .meta { margin-top: 8px; font-size: 12.5px; opacity: .75; }

/* ── 본문 ── */
.doc-body { padding: 24px 22px 64px; }

.doc-body h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 30px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h3 { font-size: 14.5px; font-weight: 700; margin: 18px 0 6px; }

.doc-body p { font-size: 14.5px; margin: 8px 0; }
.doc-body ul, .doc-body ol { margin: 8px 0 8px 20px; font-size: 14.5px; }
.doc-body li { margin: 5px 0; }
.doc-body strong { font-weight: 700; }
.doc-body a { color: var(--accent-text); }

/* 꼭 읽어야 하는 문단 — 환불 제한, 면책처럼 나중에 분쟁이 되는 곳 */
.note {
  background: var(--accent-lt);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 14px;
}
.note strong { color: var(--accent-text); }

/* ── 표 (수집항목·보유기간·위탁·국외이전) ──
   좁은 화면에서는 표를 가로로 펼칠 자리가 없다.
   (1024px 이상에서는 자리가 생기므로 파일 맨 아래에서 보통 표로 되돌린다)
   가로 스크롤로 두면 열이 잘린 채 보이고 밀 수 있다는 것도 눈에 안 띈다.
   그래서 행을 카드처럼 세로로 쌓고, 각 칸 앞에 헤더를 붙인다.
   ⚠️ 칸마다 `data-label="열 이름"` 이 있어야 한다 — 표에 행·열을 추가하면 같이 넣을 것.
   국외이전 표처럼 5열짜리도 이 방식이라야 읽힌다. */
.table-wrap { margin: 14px 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
/* 헤더 행 — 각 칸의 data-label 이 대신하므로 감춘다 */
table tr:first-child { display: none; }
table tr {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 13px;
  margin-bottom: 8px;
}
table td {
  display: block;
  border: 0;
  padding: 9px 0;
  vertical-align: top;
}
table td + td { border-top: 1px dashed var(--border); }
table td::before {
  content: attr(data-label);
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 3px;
}
/* 라벨이 없는 칸(추가하다 빠뜨린 경우)에는 빈 줄을 만들지 않는다 */
table td:not([data-label])::before { display: none; }

/* ── 아직 채우지 않은 사업자 정보 ──
   배포 전에 반드시 실제 값으로 바꿔야 한다. 눈에 띄게 남겨 두어
   빈 칸인 채로 공개되면 바로 보이게 한다. */
.todo {
  background: #FFE8E6;
  color: #73000D;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
}

.doc-foot {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-sub);
}
.doc-foot a { color: var(--accent-text); margin-right: 14px; }


/* ══════════════════════════════════════════════════════════════════
   태블릿 · PC
   ------------------------------------------------------------------
   원칙은 index.html 과 같다: 모바일(~767px) 규칙은 한 줄도 건드리지 않고
   전부 media query 안에서만 덮는다 → 롤백하려면 이 블록만 지우면 된다.

   ⚠️ 반드시 파일 맨 끝에 둘 것. 위에 두면 뒤따르는 규칙이 우선순위가 같아
      그대로 덮어써 버린다 (특히 표 규칙).

   폭은 앱과 같은 지점(768 / 1024)에서 넓히되 값은 더 좁게 잡는다.
   앱의 PC 폭은 1180px 인데, 법률 문장을 그 폭으로 흘리면 한 줄이 너무 길어
   눈이 다음 줄을 놓친다. 읽기 좋은 한 줄 길이를 우선했다.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .doc { max-width: 720px; }

  .doc-head { padding: 34px 40px 28px; }
  .doc-head h1 { font-size: 26px; }
  .doc-body { padding: 32px 40px 80px; }

  .doc-body h2 { font-size: 17.5px; }
  .doc-body h3 { font-size: 15.5px; }
  .doc-body p,
  .doc-body ul,
  .doc-body ol { font-size: 15.5px; }
  .note { font-size: 15px; padding: 14px 16px; }
}

@media (min-width: 1024px) {
  .doc { max-width: 860px; }

  .doc-head { padding: 40px 56px 32px; }
  .doc-body { padding: 38px 56px 90px; }

  /* 표를 보통 표로 되돌린다.
     모바일에서 카드처럼 쌓으려고 바꿔둔 것(행 숨김, display:block, ::before 라벨)을
     하나도 빠짐없이 되돌려야 한다. 하나라도 남으면 칸이 어긋난다. */
  table tr:first-child { display: table-row; }   /* 감춰둔 th 행을 다시 쓴다 */
  table tr {
    display: table-row;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  table th,
  table td {
    display: table-cell;
    border: 1px solid var(--border);
    padding: 10px 13px;
    text-align: left;
    vertical-align: top;
  }
  table th {
    background: var(--neutral-bg);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-sub);
  }
  table td { background: var(--card); }
  table td + td { border-top: 1px solid var(--border); }  /* 모바일의 점선을 덮는다 */
  table td::before { display: none; }                      /* data-label 은 th 가 대신한다 */
}