/* 분류
  공통
  컬러
    컬러 팔레트 https://mui.com/material-ui/customization/color/#color-palette
      1. teal (청록색)
  광고
  .entry-content
  footer
*/

/********** 공통 */
/* 루트 가상 클래스 (root pseudo class) */
:root {
  --mui-grey-800: #424242; /* 본문(body) 글자색 */
  --mui-teal-300: #4db6ac;
  --mui-teal-500: #009688; /* 브랜드 컬러 */
  --mui-teal-600: #00897b;
  scroll-behavior: auto !important;
}

html {
  font-size: 18px;
}

/* 폰 (767px 이하) */
@media (max-width: 767px) {
  html {
    font-size: 17px;
  }
}
/* 폰 아님 (768px 이상) */
@media (min-width: 768px) {
  nav.container, main.container {
    max-width: 720px;
  }
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕","Helvetica Neue","Apple SD Gothic Neo",Arial,sans-serif;
  line-height: 1.9;
  color: var(--mui-grey-800);
}

main {
  padding-top: 3rem;
  padding-bottom: 7rem;
}

.index header {
  margin-bottom: 1rem;
}

.post header {
  margin-bottom: 2rem;
}

h1, h2, h3, .entry-title a {
  color: #000000;
  /* 한국어 단어를 유지하고, 레이아웃 깨짐을 방지 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 3줄로 고정하고, 생략_부호_표시 */
.summary-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.entry-summary ul {
  list-style-position: inside;
  padding-left: 0;
}
.entry-summary li {
  /*
    1줄, 생략_부호_표시
      - 아래 방식의 경우, 과거엔 width 지정이 필수였지만, 현재는 선택?
      - 참고
        - https://css-tricks.com/almanac/properties/l/line-clamp/
        - https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
  */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.fs-l1 { /* l: large */
  font-size: 1.1rem;
}
.fs-s9 { /* s: small */
  font-size: 0.9rem;
}
.fs-s8 {
  font-size: 0.8rem;
}
.fs-s7 {
  font-size: 0.7rem;
}
.fs-s6 {
  font-size: 0.6rem;
}

/* Android 버그 대응 */
a {
  -webkit-tap-highlight-color: transparent;
}

.pre-wrap-text {
  white-space: pre-wrap;
  /* 텍스트에 URL 있는 경우, 가로 스크롤이 생기므로 */
  overflow-wrap: break-word;
}

/* 목차 */
.toc li:not(:last-child) {
  margin-bottom: .5rem;
}

/* 카테고리의 다른 서비스 */
#other-articles h4 {
  margin-bottom: 1rem;
}
#other-articles li {
  margin-bottom: .5rem;
  /* 1줄로 고정하고, 생략_부호_표시 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/********** 컬러 */
.text-grey-800 {
  color: var(--mui-grey-800);
}

.text-teal {
  color: var(--mui-teal-500);
}

.text-bg-teal {
  color: #fff;
  background-color: var(--mui-teal-500);
}

.border-teal-300 {
  border-color: var(--mui-teal-300) !important;
}

.btn-teal,
.btn-teal:hover,
.btn-teal:focus {
  color: #fff;
  background-color: var(--mui-teal-500);
  border-color: var(--mui-teal-500);
}
.btn.btn-teal:active {
  color: #fff;
  background-color: var(--mui-teal-600);
  border-color: var(--mui-teal-600);
}

/********** 광고 */
/* 잔여 광고 단위 숨기기 */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/********** .entry-content */
.entry-content h2,
.entry-content h3 {
  margin-top: 3.5rem;
}

.entry-content p,
.entry-content .alert,
.p-mb-default {
  margin-bottom: 2rem;
}

.entry-content a {
  text-decoration: none;
}

/********** footer */
/* 문의하기 */
.contact {
  text-decoration: none;
  color: inherit;
}