/* ============================================================
   약관·방침 문서 (terms.html / privacy.html / refund.html)
   채팅 화면과 같은 색을 쓰되, 앱이 아니라 '읽는 문서'라서
   style.css 를 쓰지 않고 따로 둡니다 — 채팅 화면은 스크롤을 막아놨거든요.
   ============================================================ */
:root{
  --bg:#0f1115; --bg2:#171a21; --bg3:#1f232c; --line:#2b3039;
  --tx:#e8eaed; --tx2:#9aa0aa; --tx3:#6b7280;
  --accent:#ff4d4d;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:15px; line-height:1.75; -webkit-text-size-adjust:100%;
}
.wrap{max-width:760px; margin:0 auto; padding:28px 20px 80px}

h1{font-size:25px; line-height:1.35; margin:0 0 6px}
.sub{color:var(--tx2); font-size:13.5px; margin:0 0 26px}
h2{font-size:17px; margin:34px 0 10px; padding-top:18px; border-top:1px solid var(--line)}
h2:first-of-type{border-top:0; padding-top:0}
h3{font-size:15px; margin:20px 0 8px; color:var(--tx)}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px; padding-left:22px}
li{margin:4px 0}
.muted{color:var(--tx2)}
.small{font-size:13.5px}

/* 아직 못 채운 칸. 눈에 띄게 둡니다 — 그냥 두고 올리면 안 되니까요. */
.fill{background:#3a2a00; color:#ffd166; border:1px dashed #6b4a00;
      border-radius:5px; padding:0 6px; font-size:13.5px; white-space:nowrap}

/* 꼭 읽어야 하는 문단 */
.note{background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--accent);
      border-radius:10px; padding:14px 16px; margin:16px 0}
.note p:last-child{margin-bottom:0}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px}
th,td{border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top}
th{background:var(--bg2); color:var(--tx2); font-weight:700; white-space:nowrap}

.info{background:var(--bg2); border:1px solid var(--line); border-radius:10px;
      padding:14px 16px; margin:18px 0; font-size:13.5px}
.info div{display:flex; gap:10px; padding:3px 0}
.info div span:first-child{color:var(--tx2); flex:0 0 108px}

.back{display:inline-block; margin-bottom:20px; color:var(--tx2); text-decoration:none; font-size:13.5px}
.back:hover{color:var(--tx)}
a{color:#8ab4f8}

footer{margin-top:40px; padding-top:18px; border-top:1px solid var(--line);
       color:var(--tx3); font-size:12.5px}
footer a{color:var(--tx2); text-decoration:none; margin-right:14px}
footer a:hover{color:var(--tx)}

@media (max-width:480px){
  .wrap{padding:20px 16px 60px}
  h1{font-size:22px}
  .info div{flex-direction:column; gap:0}
  .info div span:first-child{flex:none}
}