/* 개인정보처리방침·이용약관처럼 글이 긴 화면.
 * 이런 문서는 아무도 즐겁게 읽지 않는다. 최소한 읽기 힘들지는 않게 한다. */

.legal{max-width:760px;}

.legal .lead{color:var(--ink-soft); font-size:14px; margin-bottom:24px;}

.legal h2{
  font-size:17px; margin:34px 0 10px;
  padding-top:20px; border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0; padding-top:0; margin-top:24px;}

.legal p{margin:0 0 12px; line-height:1.75;}
.legal ul{margin:0 0 12px; padding-left:20px; line-height:1.8;}
.legal li{margin-bottom:2px;}
.legal a{color:var(--green-deep);}

/* .note 는 site.css 의 공용 부품을 쓴다 */
.legal .note{margin-bottom:8px;}

/* 항목과 설명. 줄글로 늘어놓는 것보다 빨리 찾힌다 */
.legal .tbl{
  width:100%; border-collapse:collapse; margin:0 0 14px;
  background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.legal .tbl th{
  width:150px; text-align:left; vertical-align:top;
  padding:12px 14px; background:var(--green-tint); color:var(--green-deep);
  font-size:13px; font-weight:600;
}
.legal .tbl td{padding:12px 14px; border-bottom:1px solid var(--line); line-height:1.7;}
.legal .tbl th{border-bottom:1px solid var(--line);}
.legal .tbl tr:last-child th,
.legal .tbl tr:last-child td{border-bottom:0;}

.legal .todo{color:var(--ink-soft);}

@media (max-width:600px){
  .legal .tbl, .legal .tbl tbody, .legal .tbl tr,
  .legal .tbl th, .legal .tbl td{display:block; width:auto;}
  .legal .tbl th{border-bottom:0; padding-bottom:6px;}
  .legal .tbl td{padding-top:0;}
  .legal .tbl tr{border-bottom:1px solid var(--line);}
  .legal .tbl tr:last-child{border-bottom:0;}
}