@charset "UTF-8";

/**
 * @File: content.css
 * @Author: 디지털웍스
 * @Date: 2026-07-09
 * @Description: contents 공통 스타일
 * @Note: public/contents 정적 HTML 전용 스타일
 */

:root {
  /* color */
  --color-brand: #141414;
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #666;
  --color-red: #e00;
  --color-green: #0a0;
  --color-blue: #00e;
  --color-transparent: transparent;
  --color-line: #b9b9b9;
  --color-temp: #f5f5f5;
  --color-selection: rgba(130, 130, 130, 0.4);

  /* layout */
  --header-height: 64px;
  --sidebar-width: 240px;

  /* transition */
  --hover-transition: 0.2s ease;
}

::selection {
  background-color: var(--color-selection);
  color: var(--color-brand);
}
::-moz-selection {
  background-color: var(--color-selection);
  color: var(--color-brand);
}

body {
  font-family: Pretendard, '맑은 고딕', 'malgun gothic', 'Apple SD Gothic Neo', arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-brand, #141414);
  word-break: keep-all;
  background-color: var(--color-white, #fff);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  clip-path: inset(100% 0 0 0);
}

/* ============================================================
 table - 테이블 공통 스타일
 ============================================================ */
table {
  th,
  td {
    vertical-align: top;
    text-align: center;
  }

  .left {
    text-align: left;
  }

  .center {
    text-align: center;
  }

  .right {
    text-align: right;
  }

  .top {
    vertical-align: top;
  }

  .middle {
    vertical-align: middle;
  }

  .bottom {
    vertical-align: bottom;
  }
}

/* ============================================================
 br - 줄바꿈 : span 태그 사용
 ============================================================ */
/* 띄어쓰기 없음 */
.br-pc {
  display: block;
}

.br-mo {
  display: inline-block;
  width: 1px;
}
/* 띄어쓰기 있음 */
.br-pc-sp {
  display: block;
}

.br-mo-sp {
  display: inline-block;
  width: 0.25em;
}
/* 단어 구분용 */
.word-sep {
  display: inline-block;
  width: 1px;
}

/* ============================================================
 PC / MOBILE 전용 클래스
 ============================================================ */
.pc-only {
  display: block;
}

.mo-only {
  display: none;
}

/* ============================================================
 모바일 화면 (max-width: 960px)
 ============================================================ */
@media (max-width: 960px) {
  .br-pc {
    display: inline-block;
    width: 1px;
  }

  .br-mo {
    display: block;
  }

  .br-pc-sp {
    display: inline-block;
    width: 0.25em;
  }

  .br-mo-sp {
    display: block;
  }

  .pc-only {
    display: none;
  }

  .mo-only {
    display: block;
  }
}