@charset "utf-8";

/* ============================================================
   doc.css — 약관 · 안내 문서 페이지
   대응 마크업 : page-templates/template-doc.php

   에디터 본문(the_content)을 그대로 출력하는 페이지다.
   테마 전역 스타일이 문서용 기본값을 지워버리므로 여기서 되살린다.

     reset.css   ol·ul list-style:none  →  불릿·번호 사라짐
     reset.css   h1~h6·p 여백 0         →  문단이 다 붙음
     reset.css   a text-decoration:none →  본문 링크가 안 보임
     reset.css   a display:inline-block →  긴 링크가 줄바꿈에서 튐
     common.css  .section img{width:100%} → 작은 이미지도 폭 100% 로 늘어남

   ★ 전 페이지 일괄 로드이므로 모든 선택자를 #doc-page 로 스코프한다.
     page.php(템플릿 미지정 페이지)에도 적용하려면
     그쪽 .wrap-max 에 id="doc-page" 를 붙이면 된다.
   ============================================================ */


/* 문서 전용 토큰 */
:root {
  --one-doc-line: #e3e5e8;              /* 표 테두리 · 구분선 */
  --one-doc-head: var(--gray-color03);  /* 표 머리 배경 */
  --one-doc-code: #f6f7f8;              /* 인라인 코드 배경 */
  --one-doc-mark: var(--main-color);    /* 목록 마커 */
}


/* ============================
   페이지 제목
============================ */

#doc-page .doc-page-title {
  padding-bottom: var(--one-gap-lg);
  border-bottom: 2px solid var(--main-color);
  margin-bottom: var(--one-space-s);
}


/* ============================
   본문 공통

   .doc-page-content 안쪽만 건드린다.
   에디터가 만드는 태그는 종류를 예측할 수 없으므로 태그 선택자를 쓴다.
============================ */

#doc-page .doc-page-content {
  /* 약관처럼 긴 글은 폭이 넓으면 읽기 어렵다. 전체 폭으로 쓰려면 이 줄을 지운다 */
  max-width: 900px;
}

/* 문단 */
#doc-page .doc-page-content p {
  margin-bottom: var(--one-gap-lg);
}

#doc-page .doc-page-content > *:last-child {
  margin-bottom: 0;
}


/* ============================
   제목 계층

   에디터의 h2~h6 는 클래스가 없다. reset.css 가 font-size 를 100% 로
   되돌려 본문과 같은 크기가 되므로 여기서 크기를 다시 준다.
============================ */

#doc-page .doc-page-content h2,
#doc-page .doc-page-content h3,
#doc-page .doc-page-content h4,
#doc-page .doc-page-content h5,
#doc-page .doc-page-content h6 {
  line-height: var(--one-lh-lg);
  margin-top: var(--one-space-s);
  margin-bottom: var(--one-gap-r);
}

/* 첫 제목 위에는 여백을 주지 않는다 */
#doc-page .doc-page-content > *:first-child {
  margin-top: 0;
}

#doc-page .doc-page-content h2 {
  font-size: var(--one-hd3);
  font-weight: 600;
  color: var(--main-color);
}

#doc-page .doc-page-content h3 {
  font-size: var(--one-p-tit);
  font-weight: 600;
}

#doc-page .doc-page-content h4,
#doc-page .doc-page-content h5,
#doc-page .doc-page-content h6 {
  font-size: var(--one-body);
  font-weight: 700;
}


/* ============================
   목록 — reset.css 가 지운 마커를 되살린다
============================ */

#doc-page .doc-page-content ul,
#doc-page .doc-page-content ol {
  margin-bottom: var(--one-gap-lg);
  padding-left: 1.4em;
}

#doc-page .doc-page-content ul { list-style: disc outside; }
#doc-page .doc-page-content ol { list-style: decimal outside; }

#doc-page .doc-page-content li {
  margin-bottom: var(--one-gap-xs);
}

#doc-page .doc-page-content li::marker {
  color: var(--one-doc-mark);
}

/* 중첩 목록 — 뎁스마다 마커를 바꾼다 */
#doc-page .doc-page-content li > ul,
#doc-page .doc-page-content li > ol {
  margin-top: var(--one-gap-xs);
  margin-bottom: 0;
}

#doc-page .doc-page-content ul ul { list-style-type: circle; }
#doc-page .doc-page-content ul ul ul { list-style-type: square; }
#doc-page .doc-page-content ol ol { list-style-type: lower-alpha; }
#doc-page .doc-page-content ol ol ol { list-style-type: lower-roman; }

/* 설명 목록 */
#doc-page .doc-page-content dl {
  margin-bottom: var(--one-gap-lg);
}

#doc-page .doc-page-content dt {
  font-weight: 700;
  margin-bottom: var(--one-gap-xs);
}

#doc-page .doc-page-content dd {
  padding-left: var(--one-gap-r);
  margin-bottom: var(--one-gap-r);
}


/* ============================
   표 — 비급여수가표가 쓴다

   reset.css 는 border-collapse 만 주고 테두리는 주지 않는다.
   가로로 넘치면 페이지 전체가 아니라 표 안에서만 스크롤되게 한다.
============================ */

/* 에디터가 감싸는 figure. 클래식 에디터라면 이 래퍼가 없다 */
#doc-page .doc-page-content .wp-block-table {
  margin: 0 0 var(--one-gap-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#doc-page .doc-page-content table {
  width: 100%;
  min-width: 480px;          /* 이보다 좁아지면 래퍼에서 가로 스크롤 */
  margin-bottom: var(--one-gap-lg);
  border-top: 2px solid var(--main-color);
  font-size: var(--one-caption);
}

#doc-page .doc-page-content .wp-block-table table {
  margin-bottom: 0;
}

#doc-page .doc-page-content th,
#doc-page .doc-page-content td {
  padding: 0.9em 1em;
  border-bottom: 1px solid var(--one-doc-line);
  border-right: 1px solid var(--one-doc-line);
  line-height: var(--one-lh-lg);
  text-align: left;
  vertical-align: top;
}

#doc-page .doc-page-content th:last-child,
#doc-page .doc-page-content td:last-child {
  border-right: 0;
}

#doc-page .doc-page-content th {
  background-color: var(--one-doc-head);
  font-weight: 700;
  white-space: nowrap;
}

#doc-page .doc-page-content caption {
  padding-bottom: var(--one-gap-sm);
  color: var(--gray-color02);
  font-size: var(--one-caption);
  text-align: left;
}


/* ============================
   링크

   common.css 의 `.txt-wrap a { color: inherit }`(0,2,1) 와
   Astra 의 `a:hover`(0,1,1) 를 이긴다.
============================ */

#doc-page .doc-page-content a {
  display: inline;                  /* reset.css 의 inline-block 되돌리기 */
  color: var(--main-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  word-break: break-all;            /* 긴 URL 이 레이아웃을 밀지 않게 */
}

#doc-page .doc-page-content a:hover,
#doc-page .doc-page-content a:focus {
  color: var(--sub-color03);
}


/* ============================
   인용 · 구분선 · 강조
============================ */

#doc-page .doc-page-content blockquote {
  margin: 0 0 var(--one-gap-lg);
  padding: var(--one-gap-r) var(--one-gap-lg);
  border-left: 3px solid var(--main-color);
  background-color: var(--gray-color03);
}

#doc-page .doc-page-content blockquote > *:last-child {
  margin-bottom: 0;
}

#doc-page .doc-page-content hr {
  height: 1px;
  margin: var(--one-space-s) 0;
  border: 0;
  background-color: var(--one-doc-line);
}

#doc-page .doc-page-content strong,
#doc-page .doc-page-content b {
  font-weight: 700;
}

#doc-page .doc-page-content em,
#doc-page .doc-page-content i {
  font-style: italic;
}

#doc-page .doc-page-content mark {
  padding: 0 0.2em;
  background-color: #fff3cd;
}


/* ============================
   이미지

   common.css 의 `.section img { width:100% }` 를 되돌린다.
   에디터에서 지정한 크기를 그대로 쓰되 컨테이너는 넘지 않는다.
============================ */

#doc-page .doc-page-content img {
  width: auto;
  max-width: 100%;
  height: auto;
}

#doc-page .doc-page-content figure {
  margin: 0 0 var(--one-gap-lg);
}

#doc-page .doc-page-content figcaption {
  padding-top: var(--one-gap-sm);
  color: var(--gray-color02);
  font-size: var(--one-caption);
  text-align: center;
}

/* 에디터 정렬 클래스 */
#doc-page .doc-page-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#doc-page .doc-page-content .alignleft {
  float: left;
  margin: 0 var(--one-gap-lg) var(--one-gap-r) 0;
}

#doc-page .doc-page-content .alignright {
  float: right;
  margin: 0 0 var(--one-gap-r) var(--one-gap-lg);
}

/* float 이 다음 블록을 파고들지 않게 */
#doc-page .doc-page-content::after {
  content: "";
  display: table;
  clear: both;
}


/* ============================
   코드
============================ */

#doc-page .doc-page-content code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background-color: var(--one-doc-code);
  font-family: Consolas, Monaco, monospace;
  font-size: 0.92em;
  word-break: break-all;
}

#doc-page .doc-page-content pre {
  margin-bottom: var(--one-gap-lg);
  padding: var(--one-gap-r);
  border-radius: 6px;
  background-color: var(--one-doc-code);
  overflow-x: auto;
}

#doc-page .doc-page-content pre code {
  padding: 0;
  background: none;
  word-break: normal;
}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */

@media all and (max-width: 1024px) {

  #doc-page .doc-page-content th,
  #doc-page .doc-page-content td {
    padding: 0.8em 0.9em;
  }

  /* 폭이 좁아지면 float 정렬을 풀어 본문 흐름을 지킨다 */
  #doc-page .doc-page-content .alignleft,
  #doc-page .doc-page-content .alignright {
    float: none;
    display: block;
    margin: 0 auto var(--one-gap-r);
  }
}


/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */

@media all and (max-width: 639px) {

  #doc-page .doc-page-content {
    max-width: none;
  }

  #doc-page .doc-page-content table {
    min-width: 420px;
    font-size: 12px;   /* --one-caption(2.7vw) 이 표에서는 너무 작다 */
  }

  #doc-page .doc-page-content th,
  #doc-page .doc-page-content td {
    padding: 0.7em 0.6em;
  }
}