/* 이용약관(terms.html) · 서비스 운영정책(service-policy.html) · 개인정보처리방침(privacy-policy.html) — 시안이 없어 사이트 스타일에 맞춰 만든 페이지.
   내용은 운영 중인 decop.co.kr 의 같은 이름 페이지 그대로
   · 맨 위 제목 위치 · 크기는 다른 서브 페이지와 같다(.sec-title, 위 95px)
   · 본문은 공지사항 상세(notice-view.css)처럼 읽기 좋은 폭 900 가운데, 위 2px 검정 선
   · 목차 바탕 #f7f8fb 는 FAQ 답 바탕과 같은 색, 줄은 사이트 공통 1px #e4e8f0 */

.terms
{
  padding: 95px 0 170px;
}
.terms-date
{
  margin-top: 20px;
  font-size: 16px;
  color: #666;
  text-align: center;
}

/* ── 목차: 장 6개를 두 줄로 ── */
.terms-toc
{
  max-width: 900px;
  margin: 60px auto 0;
  padding: 28px 36px;
  border-radius: 15px;
  background: #f7f8fb;
}
.terms-toc ol
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 40px;
  list-style: none;
}
.terms-toc a
{
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  transition: color .2s;
}
.terms-toc a:hover, .terms-toc a:focus-visible
{
  color: var(--blue);
}

/* ── 본문 ── */
.terms-body
{
  max-width: 900px;
  margin: 60px auto 0;
  border-top: 2px solid #000;
  color: #333;
  font-size: 17px;
  line-height: 28px;
}
.terms-chapter, .terms-addendum
{
  padding: 50px 0;
  border-bottom: 1px solid #e4e8f0;
  scroll-margin-top: 85px; /* 고정 헤더 높이 (움직임 줄이기 설정일 때의 기본 앵커 이동) */
}
.terms-chapter__title
{
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: #000;
}
.terms-article
{
  margin-top: 36px;
}
.terms-article__title
{
  margin-bottom: 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 28px;
  color: #000;
}
.terms-addendum .terms-text
{
  margin-top: 16px;
}
.terms-body strong
{
  font-weight: 600;
  color: #000;
}

/* 서비스 운영정책은 장이 없어서 조가 맨 위 단위 — 장처럼 줄로 나눈다 */
.terms-article--top
{
  margin-top: 0;
  padding: 44px 0;
  border-bottom: 1px solid #e4e8f0;
  scroll-margin-top: 85px;
}
.terms-article--top .terms-article__title
{
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 32px;
}
.terms-subhead
{
  margin: 20px 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: #000;
}
/* 개인정보처리방침: 「공통 항목」 · 「파기 절차」 같은 항목 이름 — 아래 글(.terms-text--indent)이 한 칸 들어가 붙는다 */
.terms-label
{
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #000;
}
.terms-subhead + .terms-label
{
  margin-top: 0;
}
.terms-article__title + .terms-subhead
{
  margin-top: 0;
}

/* 개인정보처리방침: 첫 조 앞 머리말 */
.terms-intro
{
  padding: 44px 0;
  border-bottom: 1px solid #e4e8f0;
}

/* 표: 머리 바탕 #f7f8fb(목차와 같은 색), 줄 #e4e8f0, 위 선은 본문 위 선보다 가는 1px 검정 */
.terms-table-wrap
{
  margin: 20px 0;
}
.terms-table
{
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #000;
  font-size: 16px;
  line-height: 26px;
}
.terms-table caption
{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.terms-table th, .terms-table td
{
  padding: 14px 20px;
  border-bottom: 1px solid #e4e8f0;
  text-align: left;
  vertical-align: top;
}
.terms-table th
{
  background: #f7f8fb;
  font-weight: 600;
  color: #000;
}
.terms-table td + td, .terms-table th + th
{
  border-left: 1px solid #e4e8f0;
}

/* 원문에서 빨간 글씨로 강조한 항 */
.terms-para--warn
{
  color: #e5281f;
}
/* ① 아래 붙는 설명 줄은 ① 다음 글자에 맞춘다 */
.terms-text--indent
{
  padding-left: 24px;
}

/* 항(①) · 호(1.) · 목(가.)은 번호를 왼쪽에 매달고 글은 한 단계씩 들여 맞춘다 */
.terms-para, .terms-item
{
  display: flex;
  gap: 6px;
}
.terms-para + .terms-para
{
  margin-top: 6px;
}
.terms-item
{
  padding-left: 22px;
}
.terms-item--sub
{
  padding-left: 48px;
}
.terms-num
{
  flex-shrink: 0;
  min-width: 18px;
}
.terms-item .terms-num
{
  min-width: 20px;
}
/* 원문의 「*」 글머리표는 작은 점으로 */
.terms-item--bullet .terms-num
{
  min-width: 14px;
}
.terms-item--bullet .terms-num::before
{
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin-top: 12px;
  border-radius: 50%;
  background: #666;
}

/* ── 좁은 화면 ── */
@media (max-width: 760px)
{
  .terms
  {
    padding: 56px 0 96px;
  }
  .terms-date
  {
    margin-top: 12px;
    font-size: 14px;
  }
  .terms-toc
  {
    margin-top: 32px;
    padding: 20px;
  }
  .terms-toc ol
  {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .terms-toc a
  {
    font-size: 15px;
    line-height: 22px;
  }
  .terms-body
  {
    margin-top: 32px;
    font-size: 15px;
    line-height: 25px;
  }
  .terms-chapter, .terms-addendum
  {
    padding: 36px 0;
  }
  .terms-chapter__title
  {
    font-size: 21px;
    line-height: 30px;
  }
  .terms-article
  {
    margin-top: 28px;
  }
  .terms-article__title
  {
    font-size: 17px;
    line-height: 26px;
  }
  .terms-article--top
  {
    padding: 32px 0;
  }
  .terms-article--top .terms-article__title
  {
    font-size: 19px;
    line-height: 28px;
  }
  .terms-subhead
  {
    font-size: 15px;
  }
  .terms-intro
  {
    padding: 32px 0;
  }
  .terms-label
  {
    font-size: 15px;
    line-height: 24px;
  }
  .terms-table
  {
    font-size: 14px;
    line-height: 22px;
  }
  .terms-table th, .terms-table td
  {
    padding: 10px;
  }
  .terms-text--indent
  {
    padding-left: 24px;
  }
  .terms-item--bullet .terms-num::before
  {
    margin-top: 10px;
  }
  .terms-item
  {
    padding-left: 12px;
  }
  .terms-item--sub
  {
    padding-left: 26px;
  }
}