/* r7-20-09 — 공개 안내·법률 문서 세 장이 함께 쓰는 모양.
 *
 * account-delete.html · privacy.html · terms.html
 * 셋 다 **로그인 없이** 열려야 한다(구글 플레이·애플 요구). 그래서 앱 스크립트에
 * 기대지 않는다. 여기서 쓰는 것은 글꼴 한 개와 CSS 뿐이다.
 *
 * 같은 모양을 세 번 적어두면 한 번 고칠 때 두 번 잊는다. 그래서 한 곳에 둔다.
 */

:root{
  /* r7-23-65 — 읽히는 색으로 낮춘다. 앞의 값(#17a098 · #8892a4)은 흰 바탕에서
     각각 3.0:1 · 3.3:1 이라 본문 기준(4.5:1)에 못 미쳤다. 링크와 꼬리말이 그 색이었다.
     스토어 심사자도 고객도 이 세 장을 끝까지 읽어야 한다.
     지금 값 — teal2 는 흰 바탕 5.47:1 · 연한 청록 바탕 5.01:1,
     text3 는 흰 바탕 5.70:1 · 바깥 바탕(#eef1f4) 5.03:1.
     ★ 꼬리말은 카드가 아니라 바깥 바탕 위에 앉는다. 흰 바탕만 보고 고르면 거기서 모자란다. */
  --teal:#1FB8B0; --teal2:#0f766e; --teal-bg:#e9f8f7;
  --text1:#1a202c; --text2:#4a5568; --text3:#5f6775;
  --tray:#eef1f4; --card:#ffffff; --line:#e3e8ee;
  --warm:#fff7ed; --warm-line:#fed7aa; --warm-text:#9a3412;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  background:var(--tray); color:var(--text1);
  line-height:1.75; word-break:keep-all; -webkit-text-size-adjust:100%;
}
.wrap{max-width:660px;margin:0 auto;padding:28px 18px 72px}
header{padding:26px 4px 22px}
.brand{font-size:13px;font-weight:800;color:var(--teal2);letter-spacing:.02em}
h1{font-size:26px;font-weight:900;margin:10px 0 8px;line-height:1.4}
.lead{font-size:15px;color:var(--text2);margin:0}

/* Double-Bezel — 트레이(--tray) 안에 유리판(--card).
 * 그림자는 검정이 아니라 배경 색조(teal)를 띤다. */
.card{
  background:var(--card); border-radius:18px; padding:22px 20px; margin-bottom:14px;
  box-shadow:0 1px 2px rgba(31,184,176,.06), 0 10px 28px -12px rgba(23,160,152,.22);
}
h2{font-size:17px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px}
h3{font-size:14px;font-weight:800;margin:18px 0 6px;color:var(--text2)}
h3:first-child{margin-top:0}
p{margin:0 0 10px;font-size:14.5px;color:var(--text2)}
ol,ul{margin:0 0 4px;padding-left:20px;font-size:14.5px;color:var(--text2)}
li{margin-bottom:6px}
b{color:var(--text1);font-weight:800}
a{color:var(--teal2);font-weight:800;text-decoration:none;transition:all .5s cubic-bezier(.16,1,.3,1)}
a:hover{opacity:.7}

/* 번호가 붙는 순서 안내 */
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:12px;font-size:14.5px;color:var(--text2)}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:8px;background:var(--teal-bg);color:var(--teal2);
  font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;
}

/* 표 — 좁은 화면에서 가로로 넘칠 수 있으니 감싸서 스스로 밀리게 한다 */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
th,td{text-align:left;padding:9px 8px;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-weight:800;color:var(--text2);font-size:12.5px;background:var(--teal-bg);border-bottom:none}
th:first-child,td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
/* 숫자가 줄마다 흔들리지 않게 */
td{font-variant-numeric:tabular-nums}

/* 꼭 읽어야 하는 것 */
.keep{background:var(--warm);border-radius:14px;padding:16px 16px 10px;margin-top:14px;border:1px solid var(--warm-line)}
.keep h3{color:var(--warm-text);margin-top:0}
.keep p,.keep li,.keep td,.keep th{color:var(--warm-text)}

.draft{
  background:var(--teal-bg);border-radius:14px;padding:14px 16px;margin-bottom:16px;
  font-size:13px;color:var(--teal2);line-height:1.65;
}
footer{padding:22px 6px 0;font-size:12.5px;color:var(--text3)}
footer a{font-size:12.5px}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}