@charset "UTF-8";
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Taviraj",  sans-serif;
  --nav-font: "Inter",  sans-serif;
}

:root {
  --bg: #f5f7fb;
  --card: #fff;
  --text: #2a3547;
  --texts: #6c6f73;
  --texta: #4C4D50;
  --textb: #7A7D81;
  --textc: #9C9FA2;
  --textd: #AFB1B4;
  --texte: #BFC2C7;
  --muted: #7c8fac;
  --line: #e5eaef;
  --lines: #D6DADE;

  --primary: #5d87ff;
  --primary-soft: #ecf2ff;
  --sky: #49beff;

  --c1: #ecf2ff;
  --c2: #fef5e5;
  --c3: #e8f7ff;
  --c4: #fdede8;
  --c5: #e6fffa;
  --c6: #ecf2ff;

  --t1: #5d87ff;
  --t2: #ffae1f;
  --t3: #49beff;
  --t4: #fa896b;
  --t5: #13deb9;
  --t6: #5d87ff;

    --web-primary: #5856d6;
    --web-success: #1b9e3e;
    --web-info: #39f;
    --web-warning: #f9b115;
    --web-danger: #e55353;
    --web-blue: #0d6efd;
    --web-indigo: #6610f2;
    --web-purple: #6f42c1;
    --web-pink: #d63384;
    --web-red: #dc3545;
    --web-orange: #fd7e14;
    --web-yellow: #ffc107;
    --web-green: #198754;
    --web-teal: #20c997;
    --web-cyan: #0dcaf0;

  --radius: 0.5rem;
  --side: 270px;
}


/* ==============================
   다크 모드
   ============================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11171f;
    --card: #1a2330;
    --text: #eaeff4;
    --muted: #8a9bb3;
    --line: #2a3647;

    --primary-soft: #253662;

    --c1: #253662;
    --c2: #4d3a2a;
    --c3: #1c4455;
    --c4: #4b2e2c;
    --c5: #1b4a43;
    --c6: #253662;
  }
}


/* ==============================
   기본
   ============================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--card);
  color: var(--text);
  font: 400 14px/1.6 "Pretendard", "Noto Sans KR", -apple-system,
    "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

	img {
		height: auto;
		max-width: 100%;
		border-radius: 0.365em;
	}

	::selection {
		background-color: #FFD800; /* 선택된 텍스트의 배경 색을 노란색으로 설정 */
		color: #000; /* 선택된 텍스트의 글자 색을 검정색으로 설정 (선택적) */
	}
/* ==============================
   접근성
   ============================== */

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 99;
  background: var(--primary);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
}

.skip:focus {
  left: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==============================
   전체 레이아웃
   ============================== */

.layout {
  display: grid;
  grid-template-columns: var(--side) 1fr;
  min-height: 100vh;
}


/* ==============================
   사이드바
   ============================== */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;

  display: flex;
  flex-direction: column;

  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #F06229;
    font-size: 22px;
    font-family: "Taviraj", serif !important;
    font-weight: 700;
    padding: 0 8px 24px;
}

/* 원본 보관
.brand-mark {
  width: 26px;
  height: 26px;

  border-radius: 50%;
  border: 6px solid var(--primary);
  border-right-color: var(--sky);
}
*/
.brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  background: url(/images/favicon.png) no-repeat center / contain;
}

.brand span:not(.brand-mark) {
    color: var(--text);
    font-weight: 400;
}

.nav-group {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.nav-title {
    margin: 0 0 8px;
    padding: 0 0.8rem;
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--muted);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 8px;

  color: var(--text);
    font-weight: 500;
  transition: background 0.15s;
}

.nav-link:hover {
  background: var(--primary-soft);
}

.nav-link[aria-current="page"] {
  background: var(--primary);
  color: #fff;
}
.nav-link.disabled {
  pointer-events: none;   /* 클릭, 호버 차단 */
  cursor: default;
  opacity: 0.4;           /* 흐리게 */
}

.nav-ico {
  width: 18px;
  height: 18px;
  flex: none;
}

.badge {
  margin-left: auto;

  font-size: 10px;
  color: var(--primary);

  background: var(--primary-soft);
  padding: 1px 8px;
  border-radius: 6px;
}

.promo {
  margin-top: auto;

  background: var(--primary-soft);
  border-radius: var(--radius);
  padding: 16px;
}

.promo p {
  margin: 0 0 10px;
  font-weight: 600;
}

.btn {
  display: inline-block;

  background: var(--primary);
  color: #fff;

  padding: 7px 16px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 600;
}

.btn-line {
  --g1: #49beff;      /* 하늘 */
  --g2: #13deb9;      /* 민트 */
  --g3: #ffae1f;      /* 노랑 */

  border: 2px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,                 /* 안쪽: 카드색 */
    linear-gradient(90deg, var(--g1), var(--g2), var(--g3)) border-box;    /* 테두리: 그라데이션 */
  color: var(--text);
  border-radius: 999px;
    transition: all .5s ease;
}
.btn-line:hover,
.btn-line:focus-visible {
  color: var(--card);
  background-size: 0 100%, 100% 100%;                   /* 카드색 층이 사라지면서 그라데이션이 드러남 */
}

/* ==============================
   사이드바 스크롤바: 얇고 반투명하게
   ============================== */
.sidebar {
	scrollbar-width: thin;                                            /* 폭 얇게 */
	scrollbar-color: color-mix(in srgb, var(--muted, #7c8fac) 40%, transparent) transparent;   /* 막대색 / 배경 */
}
.sidebar:hover {
	scrollbar-color: color-mix(in srgb, var(--muted, #7c8fac) 65%, transparent) transparent;   /* 마우스 올리면 조금 진하게 */
}

/* 구형 브라우저용 (scrollbar-color 를 모르는 경우만) */
@supports not (scrollbar-color: auto) {
	.sidebar::-webkit-scrollbar { width: 6px; }
	.sidebar::-webkit-scrollbar-track { background: transparent; }
	.sidebar::-webkit-scrollbar-thumb { background: rgba(124, 143, 172, .4); border-radius: 3px; }
	.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(124, 143, 172, .35); }
}

/* ==============================
   사이드 패널 / 모바일 메뉴
   ============================== */

.panel {
  flex: 1;

  display: flex;
  flex-direction: column;

  min-height: 0;
}

.panel-inner {
  flex: 1;

  display: flex;
  flex-direction: column;
}

.menu-btn {
  display: none;
  place-items: center;

  width: 42px;
  height: 42px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: var(--card);
  cursor: pointer;
  padding: 0;
}

.menu-btn span {
  display: block;

  width: 20px;
  height: 2px;

  background: var(--text);
  border-radius: 2px;

  transition:
    transform 0.1s cubic-bezier(.22, .61, .36, 1),
    opacity 0.3s ease;
}

.menu-btn span + span {
  margin-top: 5px;
}

.menu-check {
  display: none;
}

.menu-check:checked ~ .side-head .menu-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-check:checked ~ .side-head .menu-btn span:nth-child(2) {
  opacity: 0;
}

.menu-check:checked ~ .side-head .menu-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ==============================
   메인 영역
   ============================== */

.main-wrap {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

main {
	grid-template-columns: minmax(0, 1fr);
}

main > * {
	min-width: 0;
}

/* 넓은 요소는 자기 안에서만 스크롤 */
pre { overflow-x: auto; }
.table-wrap { overflow-x: auto; }
img { max-width: 100%; height: auto; }

/* ==============================
   헤더
   ============================== */

.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 30px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 8px rgba(42, 53, 71, 0.06);
}
@media (min-width: 901px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;          /* 본문(카드) 위, 모바일 메뉴(30) 아래 */
  }
}

.search {
  flex: 0 1 240px;
}

.search input {
  width: 100%;

  padding: 8px 14px;

  border: 1px solid var(--lines);
  border-radius: 8px;

  background: var(--bg);
  color: var(--text);

  font: inherit;
}

.top-actions {
  margin-left: auto;

  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  flex: none;
  width: 34px;
  height: 34px;

  border-radius: 50%;
  background: #e5eaef url(/images/avatar.webp) no-repeat center / cover;   /* 이미지가 안 뜰 때를 위한 바탕색 */
}


/* ==============================
   메인 콘텐츠
   ============================== */

main {
  display: grid;
  gap: 24px;

  padding: 30px;
}

.welcome {
    display: flex;
    align-items: center;
    gap: 14px;
    /* background: #e8f7ff; */
    color: #2a3547;
    /* border-radius: var(--radius); */
    padding: 0 0 1rem 0.5rem;
    border-bottom: 0.2rem solid #303030;
    margin: 3rem 0;
}

.welcome h1 {
  margin: 0;
  font-size: 16px;
}

.welcome p {
  margin: 0;

  font-size: 12px;
  color: #5a6a85;
}


/* ==============================
   통계
   ============================== */

.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.stat {
  border-radius: var(--radius);
  padding: 22px 10px;

  text-align: center;
}

.stat:nth-child(1) {
  background: var(--c1);
  color: var(--t1);
}

.stat:nth-child(2) {
  background: var(--c2);
  color: var(--t2);
}

.stat:nth-child(3) {
  background: var(--c3);
  color: var(--t3);
}

.stat:nth-child(4) {
  background: var(--c4);
  color: var(--t4);
}

.stat:nth-child(5) {
  background: var(--c5);
  color: var(--t5);
}

.stat:nth-child(6) {
  background: var(--c6);
  color: var(--t6);
}

.stat .ico {
  width: 36px;
  height: 36px;

  margin: 0 auto 8px;

  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.stat h2 {
  margin: 0;

  font-size: 13px;
  font-weight: 600;
}

.stat p {
  margin: 0;

  font-size: 22px;
  font-weight: 700;
}


/* ==============================
   콘텐츠 카드
   ============================== */

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--line, #e5eaef);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 736px) {
    .card {
        padding: 1rem;
    }
}

.card h2 {
  font-size: 1.33rem;
    margin: 0 0 2rem 0;
}

.card .sub {
  margin: 0 0 14px;

  color: var(--muted);
  font-size: 12px;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

select {
  padding: 6px 10px;

  border: 1px solid var(--line);
  border-radius: 8px;

  background: var(--card);
  color: var(--text);

  font: inherit;
}

.chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart text {
  fill: var(--muted);
  font-size: 10px;
}

.side-col {
  display: grid;
  gap: 24px;

  align-content: start;
}

.big {
  margin: 8px 0;

  font-size: 22px;
  font-weight: 700;
}

.delta {
  display: inline-block;

  background: var(--c5);
  color: var(--t5);

  padding: 0 8px;
  border-radius: 6px;

  font-size: 12px;
}

.legend {
  display: flex;
  gap: 12px;

  margin: 10px 0 0;
  padding: 0;

  color: var(--muted);
  font-size: 12px;

  list-style: none;
}

.legend i {
  display: inline-block;

  width: 8px;
  height: 8px;

  margin-right: 4px;

  border-radius: 50%;
}

.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.donut {
  width: 110px;
  height: 110px;
  flex: none;
}


/* ==============================
   푸터
   ============================== */

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;

  padding: 20px 30px 30px;

  color: var(--muted);
  font-size: 12px;
    border-top: 1px solid var(--line);
}

footer ul {
  display: flex;
  gap: 16px;

  margin: 0;
  padding: 0;

  list-style: none;
}


/* ==============================
   반응형
   ============================== */

@media (max-width: 1200px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 900px) {

  .layout {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;

    height: auto;
    overflow: visible;

    padding: 10px 16px;

    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .brand {
    padding: 0;
  }

  .menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .promo {
    margin-top: 12px;
    margin-bottom: 8px;
  }

  .sidebar nav {
    padding-top: 12px;
  }


  /* 체크박스 기반 CSS 전용 접기
     JS가 없거나 차단되어도 기본값은 닫힘 */

  .menu-check {
    display: block;

    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
  }

  .menu-check:focus-visible ~ .side-head .menu-btn {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }


  /* 헤더 아래로 덮이는 반투명 오버레이 메뉴 */

  .panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    flex: none;

    display: grid;
    grid-template-rows: 0fr;

    visibility: hidden;

    background: rgba(255, 255, 255, 0.88);
    background: color-mix(
      in srgb,
      var(--bg) 86%,
      transparent
    );

    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);

    transition:
      grid-template-rows 0.65s cubic-bezier(.22, .61, .36, 1),
      box-shadow 0.65s ease,
      visibility 0s 0.65s;
  }

  .panel-inner {
    min-height: 0;
    overflow: hidden;

    padding: 0 16px;

    opacity: 0;
    transform: translateY(-10px);

    transition:
      opacity 0.55s ease 0.05s,
      transform 0.65s cubic-bezier(.22, .61, .36, 1);
  }

  .menu-check:checked ~ .panel {
    grid-template-rows: 1fr;
    visibility: visible;

    box-shadow: 0 18px 30px -12px rgba(42, 53, 71, 0.25);

    transition:
      grid-template-rows 0.65s cubic-bezier(.22, .61, .36, 1),
      box-shadow 0.65s ease,
      visibility 0s;
  }

  .menu-check:checked ~ .panel .panel-inner {
    opacity: 1;
    transform: none;

    overflow-y: auto;

    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
  }


  /* 모바일 여백 */

  .topbar,
  main,
  footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}


@media (max-width: 520px) {

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .topbar .btn-line {
    display: none;
  }
}


/* Table */
.table-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

table {
    margin: 0 0 4rem 0 !important;
    width: 100%;
    table-layout: fixed; /* PC에서도 fixed로 변경 → width 지정값이 그대로 적용됨 */
}

table tbody tr {
    border: solid 1px #eee;
    border-left: 0;
    border-right: 0;
}

table td {
    color: #7c838b;
    font-size: 1rem;
    padding: 1rem;
    word-break: break-word;
    /*font-family: 'Noto Serif KR', sans-serif;*/
    font-weight: 400;
    letter-spacing: 0.08em;
    word-spacing: 0.1em;
    line-height: 180%;
}

/* 첫 번째 열 너비 30% (PC) - !important 제거 */
table td:first-child {
    width: 30%;
    font-weight: 700;
    vertical-align: middle;
}

table th {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.5;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
}

table thead {
    border-bottom: solid 2px;
}

table tfoot {
    border-top: solid 2px;
}

/* Table row alternate background color */
table tbody tr:nth-child(2n + 1) {
    background-color: rgba(220, 220, 220, 0.1);
}
table tbody tr:nth-child(2n) {
    background-color: transparent;
}

/* Alternative styling for table */
table.alt tbody tr td {
    border: solid 1px #eee;
    border-left-width: 0;
    border-top-width: 0;
}

table.alt tbody tr td:first-child {
    border-left-width: 1px;
    color: #545C5F;
    padding: 0.75rem 0.75rem;
    word-break: break-word;
    font-weight: 600;
    letter-spacing: 0.08em;
    word-spacing: 0.1em;
}

/* ===== Responsive (모바일: 제목 상단, 비고 하단 100% 스택) ===== */
@media screen and (max-width: 736px) {
    table {
        font-size: 1.15rem;
        width: 100%;
        table-layout: auto; /* 모바일에서는 콘텐츠 기준으로 풀어줌 */
    }

    table th, table td {
        display: none;
        color: #303030;
        font-weight: 500;
        padding: 0.5rem;
        font-size: 1rem;
        text-align: left;
    }

    table tr {
        display: flex;
        flex-direction: column; /* 셀들을 세로로 쌓음 */
    }

    table td {
        display: block;
        position: relative;
        width: 100% !important; /* 데스크탑의 !important를 확실히 덮어씀 */
    }

    table td:first-child {
        width: 100% !important;
        min-width: 100%;
        text-align: left;
        vertical-align: baseline;
    }

    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: bold;
        text-transform: uppercase;
        padding-left: 0.75rem;
    }

    table.alt tbody tr td {
        border: solid 0px #eee;
        font-size: 0.95rem !important;
    }

    table.alt tbody tr td:first-child {
        color: #1E252E;
        font-size: 1.05rem !important;
        font-weight: 700;
        border-left-width: 0px;
    }

    .table-wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }
}


/* Pagination */

	.pagination {
		display: -moz-inline-flex;
		display: -webkit-inline-flex;
		display: -ms-inline-flex;
		display: inline-flex;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		cursor: default;
		list-style: none;
		margin: 0 0 2rem 2px;
		padding: 0;
	}

		.pagination a, .pagination span {
			-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
			-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
			-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
			transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
			border: solid 2px;
			display: inline-block;
			font-family: "Source Sans Pro", Helvetica, sans-serif;
			font-size: 0.8rem;
			font-weight: 900;
			height: 3rem;
			letter-spacing: 0.075em;
			line-height: calc(3rem - 4px);
			margin-left: -2px;
			min-width: 3rem;
			position: relative;
			text-align: center;
			text-decoration: none;
			text-transform: uppercase;
		}

		.pagination .next, .pagination .previous {
			text-decoration: none;
			padding: 0 1.75rem;
			display: inline-flex; 
			align-items: center;
			justify-content: center;
		}


.pagination .next:before,
.pagination .previous:before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	background-color: currentColor;          /* 글자색을 그대로 따라감 */
	-webkit-mask: var(--chev) no-repeat center / contain;
	mask: var(--chev) no-repeat center / contain;
}

.pagination .previous:before {
	--chev: url(/images/icons/matita--chevron-left.svg);
	margin-right: 0.9375em;
}

.pagination .next:before {
	--chev: url(/images/icons/matita--chevron-right.svg);
	order: 2;
	margin-left: 0.9375em;
}


		@media screen and (max-width: 980px) {

			.pagination a, .pagination span {
				font-size: 0.9rem;
			}

		}

		@media screen and (max-width: 480px) {

			.pagination .page, .pagination .extra {
				display: none;
			}

		}

	.pagination a, .pagination span {
		border-color: #eeeeee;
	}

	.pagination a {
		color: #212931 !important;
	}

		.pagination a:hover {
			color: #18bfef !important;
			border-color: #18bfef;
			z-index: 1;
		}

			.pagination a:hover + a,
			.pagination a:hover + span {
				border-left-color: #18bfef;
			}

		.pagination a.active {
			background-color: #eeeeee;
		}

	.pagination span {
		color: #eeeeee;
	}

/* 페이지네이션: 색을 변수로 바꿔서 라이트/다크 모두 맞춤 (기존 Pagination 코드 아래에 추가) */
#content .pagination a,
#content .pagination span { border-color: var(--line); }
#content .pagination a { color: var(--text) !important; }
#content .pagination a:hover { color: var(--primary) !important; border-color: var(--primary); }
#content .pagination a:hover + a,
#content .pagination a:hover + span { border-left-color: var(--primary); }
#content .pagination a.active { z-index: 1; background-color: var(--primary-soft); border-color: var(--primary); color: var(--primary) !important; }
#content .pagination span { color: var(--muted); opacity: .6; }


/* Image */
.image {
  border-radius: 0.375em;
  border: 0;
  display: inline-block;
  position: relative; }
  .image img {
    border-radius: 0.375em;
    display: block; }
  .image.left, .image.right {
    max-width: 45%; 
}
    .image.left img, .image.right img {
      width: 100%; 
}
  .image.left {
    float: left;
    padding: 0 1.5em 1em 0;
    top: 0.25em; }
  .image.right {
    float: right;
    padding: 0 0 1em 1.5em;
    top: 0.25em; }
  .image.fit {
    display: block;
    margin: 0 0 2em 0;
    width: 100%; }
    .image.fit img {
      width: 100%; }
  .image.main {
    display: block;
    margin: 0 0 3em 0;
    width: 100%; }
    .image.main img {
      width: 100%; }

a.image {
  overflow: hidden;
 }
  a.image img {
    -moz-transition: -moz-transform 0.2s ease !important;
    -webkit-transition: -webkit-transform 0.2s ease !important;
    -ms-transition: -ms-transform 0.2s ease !important;
    transition: transform 0.2s ease !important;
 }
  a.image:hover img {
    -moz-transform: scale(1.075);
    -webkit-transform: scale(1.075);
    -ms-transform: scale(1.075);
    transform: scale(1.075); }

/* 모바일 대응 스타일 */
@media (max-width: 768px) {
    .image.left, .image.right {
        /*float: none;*/
        margin: 0 0 2rem 0 !important;
        padding: 0;
        max-width: 100%;
    }

    .image.left img, .image.right img {
        width: 100%;
    }
}

/* Box */

	.box {
		border: solid 2px;
		margin-bottom: 5rem;
		padding: 1.5rem;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

	.box {
		border-color: #eeeeee;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	}

/* ===== 버튼: class="button" (a, button 모두 사용 가능) ===== */
:is(#content, body) :is(a, button).button {
	--btn-hover: #5d87ff;
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	box-sizing: border-box;
	height: 3rem;
	padding: 0 2rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--text);
	color: var(--text);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 3rem;
	letter-spacing: 0.075em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
}

:is(#content, body) :is(a, button).button:hover,
:is(#content, body) :is(a, button).button:focus-visible {
	box-shadow: inset 0 0 0 2px var(--btn-hover);
	color: var(--btn-hover);
}

/* 채운 버튼 */
:is(#content, body) :is(a, button).button.primary {
	background: #212931;
	box-shadow: none;
	color: #fff;
}
:is(#content, body) :is(a, button).button.primary:hover,
:is(#content, body) :is(a, button).button.primary:focus-visible {
	background: var(--btn-hover);
	box-shadow: none;
	color: #fff;
}

/* 크기 */
:is(#content, body) :is(a, button).button.small {
	height: 2.5rem;
	padding: 0 1.5rem;
	font-size: 0.7rem;
	line-height: 2.5rem;
}
:is(#content, body) :is(a, button).button.large {
	height: 3.5rem;
	padding: 0 2.75rem;
	font-size: 0.9rem;
	line-height: 3.5rem;
}
:is(#content, body) :is(a, button).button.fit {
	display: block;
	width: 100%;
}

/* 비활성 */
:is(#content, body) :is(a, button).button.disabled,
:is(#content, body) :is(a, button).button:disabled {
	pointer-events: none;
	opacity: 0.25;
}

/* 본문 링크의 외부 링크 화살표(↗)는 버튼에서 제거 */
:is(#content, body) a.button::after {
	content: none;
}

/* 모바일에서 터치하기 쉽게 키움 */
@media screen and (max-width: 900px) {
	:is(#content, body) :is(a, button).button {
		height: 3.25rem;
		font-size: 0.9rem;
		line-height: 3.25rem;
	}
	:is(#content, body) :is(a, button).button.large {
		height: 3.75rem;
		font-size: 1rem;
		line-height: 3.75rem;
	}
}

/* 다크 모드: 채운 버튼이 어두운 배경에 묻히지 않게 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) :is(#content, body) :is(a, button).button.primary {
		background: #eaeff4;
		color: #212931;
	}
}


/* ==========================================================
   버튼 시스템 (.bt)  ※ 기존 .button / .btn / .btn-line 과 별개
   사용: class="bt [스타일] [색상] [모양/크기]"   (a, button 모두 가능)
     스타일 : (없음=solid) bt-outline bt-ghost bt-soft bt-white bt-link
     색상   : bt-primary(기본) bt-secondary bt-success bt-warning bt-error bt-dark bt-grey
     모양   : bt-pill  bt-block
     크기   : bt-sm  bt-lg
   ========================================================== */

/* ---------- 기본 모양 ---------- */
:is(#content, body) :is(a, button).bt {
	--b: #5d87ff;                 /* 버튼 색 */
	--bt-text: #fff;              /* solid 일 때 글자색 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	box-sizing: border-box;
	min-width: 0;
	height: auto;
	margin: 0 .4rem .5rem 0;
	padding: .5rem 1.1rem;
	border: 1px solid var(--b);
	border-radius: .2rem;
	background: var(--b);
	color: var(--bt-text);
	box-shadow: none;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
:is(#content, body) :is(a, button).bt:hover,
:is(#content, body) :is(a, button).bt:focus-visible {
	background: color-mix(in srgb, var(--b) 85%, #000);
	border-color: color-mix(in srgb, var(--b) 85%, #000);
	color: var(--bt-text);
	text-decoration: none;
}
:is(#content, body) :is(a, button).bt:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--b) 60%, transparent);
	outline-offset: 2px;
}

/* ---------- 버튼 색상 ---------- */
:is(#content, body) :is(a, button).bt {
    --b: #5d87ff;
}

:is(#content, body) :is(a, button).bt-secondary { --b: #49beff; }
:is(#content, body) :is(a, button).bt-success   { --b: #13deb9; }
:is(#content, body) :is(a, button).bt-warning   { --b: #ffae1f; }
:is(#content, body) :is(a, button).bt-error     { --b: #fa896b; }
:is(#content, body) :is(a, button).bt-dark      { --b: #1a2330; }
:is(#content, body) :is(a, button).bt-grey      { --b: #6b7280; }


/* ---------- 버튼 스타일 ---------- */

/* Outline: 투명 배경 → hover 시 색상 채움 */
:is(#content, body) :is(a, button).bt-outline {
    background: transparent;
    color: var(--b);
}

:is(#content, body) :is(a, button).bt-outline:is(:hover, :focus-visible) {
    background: var(--b);
    border-color: var(--b);
    color: var(--bt-text, #fff);
}


/* Ghost: 배경·테두리 없음 → hover 시 연한 배경 */
:is(#content, body) :is(a, button).bt-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--b);
}

:is(#content, body) :is(a, button).bt-ghost:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--b) 12%, transparent);
    border-color: transparent;
    color: var(--b);
}


/* Soft: 연한 배경 → hover 시 색상 채움 */
:is(#content, body) :is(a, button).bt-soft {
    background: color-mix(in srgb, var(--b) 13%, var(--card, #fff));
    border-color: transparent;
    color: var(--b);
}

:is(#content, body) :is(a, button).bt-soft:is(:hover, :focus-visible) {
    background: var(--b);
    border-color: var(--b);
    color: var(--bt-text, #fff);
}


/* White: 카드 배경 + 테두리 */
:is(#content, body) :is(a, button).bt-white {
    background: var(--card, #fff);
    border-color: var(--line, #e5eaef);
    color: var(--b);
}

:is(#content, body) :is(a, button).bt-white:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--b) 8%, var(--card, #fff));
    border-color: var(--b);
    color: var(--b);
}


/* Link: 텍스트형 버튼 */
:is(#content, body) :is(a, button).bt-link {
    padding: 0;
    margin-right: .9rem;
    background: none;
    border-color: transparent;
    border-radius: 0;
    color: var(--b);
}

:is(#content, body) :is(a, button).bt-link:is(:hover, :focus-visible) {
    background: none;
    border-color: transparent;
    color: color-mix(in srgb, var(--b) 80%, #000);
    text-decoration: underline;
    text-underline-offset: .25em;
}


/* ---------- 모양 ---------- */
:is(#content, body) :is(a, button).bt-pill {
    border-radius: 999px;
}

:is(#content, body) :is(a, button).bt-block {
    display: flex;
    padding:1rem;
    width: 100%;
    margin-right: 0;
}


/* ---------- 크기 ---------- */
:is(#content, body) :is(a, button).bt-sm {
    padding: .3rem .8rem;
    font-size: .8rem;
}

:is(#content, body) :is(a, button).bt-lg {
    padding: .75rem 1.6rem;
    font-size: 1rem;
}


/* ---------- 비활성 상태 ---------- */
:is(#content, body) :is(a, button).bt:is(.disabled, :disabled) {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}


/* ---------- 다크 모드 ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bt-dark-color: #eaeff4;
        --bt-dark-text: #11171f;
        --bt-grey-color: #9aa6b8;
    }

    :root:not([data-theme="light"]) :is(#content, body) :is(a, button).bt-dark {
        --b: var(--bt-dark-color);
        --bt-text: var(--bt-dark-text);
    }

    :root:not([data-theme="light"]) :is(#content, body) :is(a, button).bt-grey {
        --b: var(--bt-grey-color);
        --bt-text: var(--bt-dark-text);
    }
}

/* Form */

	form {
		margin: 0 0 0.3rem 0;
	}

		form > :last-child {
			margin-bottom: 0;
		}

		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3rem);
			margin: -1.5rem 0 2rem -1.5rem;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5rem 0 0 1.5rem;
				width: calc(100% - 1.5rem);
			}

				form > .fields > .field.half {
					width: calc(50% - 0.75rem);
				}

				form > .fields > .field.third {
					width: calc(100%/3 - 0.5rem);
				}

				form > .fields > .field.quarter {
					width: calc(25% - 0.375rem);
				}

		@media screen and (max-width: 480px) {

			form > .fields {
				width: calc(100% + 3rem);
				margin: -1.5rem 0 2rem -1.5rem;
			}

				form > .fields > .field {
					padding: 1.5rem 0 0 1.5rem;
					width: calc(100% - 1.5rem);
				}

					form > .fields > .field.half {
						width: calc(100% - 1.5rem);
					}

					form > .fields > .field.third {
						width: calc(100% - 1.5rem);
					}

					form > .fields > .field.quarter {
						width: calc(100% - 1.5rem);
					}

		}

	label {
		display: block;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-weight: 900;
		line-height: 1.5;
		letter-spacing: 0.075em;
		font-size: 0.8rem;
		text-transform: uppercase;
		margin: 0.40rem 0 0.35rem 0;
	}

		@media screen and (max-width: 980px) {

			label {
				font-size: 0.9rem;
			}

		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: transparent;
		border-radius: 0;
		border: solid 2px;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1rem;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

	select {
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 3rem;
		padding-right: 3rem;
		text-overflow: ellipsis;
	}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 3rem;
	}

	textarea {
		padding: 0.75rem 1rem;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2rem;
		opacity: 0;
		width: 1rem;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			cursor: pointer;
			display: inline-block;
			font-size: 1rem;
			letter-spacing: 0;
			font-family: "Merriweather", Georgia, serif;
			text-transform: none;
			font-weight: 300;
			padding-left: 2.8rem;
			padding-right: 1rem;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				border-radius: 0;
				border: solid 2px;
				content: '';
				display: inline-block;
				font-size: 0.8rem;
				height: 1.8rem;
				left: 0;
				line-height: 1.65rem;
				position: absolute;
				text-align: center;
				top: -0.125rem;
				width: 1.8rem;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			content: '✓';
		}

	input[type="checkbox"] + label:before {
		border-radius: 0;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		opacity: 1.0;
	}

	:-moz-placeholder {
		opacity: 1.0;
	}

	::-moz-placeholder {
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		opacity: 1.0;
	}

	label {
		color: #212931;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		border-color: #eeeeee;
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			border-color: #18bfef;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23212931' /%3E%3C/svg%3E");
	}

		select option {
			background-color: #ffffff;
			color: #212931;
		}

	.select-wrapper:before {
		color: #eeeeee;
	}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		color: #212931;
	}

		input[type="checkbox"] + label:before,
		input[type="radio"] + label:before {
			border-color: #eeeeee;
		}

	input[type="checkbox"]:checked + label:before,
	input[type="radio"]:checked + label:before {
		background-color: #212931;
		border-color: #212931;
		color: #ffffff;
	}

	input[type="checkbox"]:focus + label:before,
	input[type="radio"]:focus + label:before {
		border-color: #18bfef;
	}

	::-webkit-input-placeholder {
		color: #909498 !important;
	}

	:-moz-placeholder {
		color: #909498 !important;
	}

	::-moz-placeholder {
		color: #909498 !important;
	}

	:-ms-input-placeholder {
		color: #909498 !important;
	}

	.formerize-placeholder {
		color: #909498 !important;
	}

/* Actions */

	ul.actions {

		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;

		cursor: default;
		list-style: none;
		margin-left: -1rem;
		padding-left: 0;
		text-align: center;
    justify-content: center;
	}

		ul.actions li {
			padding: 0 0 0 1rem;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3rem 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1rem);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 480px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1rem 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5rem;
						}

		}



/* ===== 타임라인 (ol.timeline) ===== */
/* ===== 타임라인 (ol.timeline) ===== */
#content .timeline {
	--tl-time: 5rem;      /* 시간 칸 너비 */
	--tl-gap: 2.5rem;     /* 점이 들어가는 칸 너비 */
	--tl-dot: 0.85rem;    /* 점 크기 */
	list-style: none;
	margin: 1.5rem 0 0 0;
	padding: 0;
}

#content .timeline > li {
	--dot: #5d87ff;
	position: relative;
	display: grid;
	grid-template-columns: var(--tl-time) var(--tl-gap) minmax(0, 1fr);
	padding: 0 0 1.5rem 0;
	margin: 0;
	border: 0;
	font-size: 1rem;
	line-height: 1.6;
}

#content .timeline > li:last-child {
	padding-bottom: 0;
}

/* 점 */
#content .timeline > li::before {
	content: "";
	position: absolute;
	left: calc(var(--tl-time) + var(--tl-gap) / 2);
	top: calc(0.8em - var(--tl-dot) / 2);
	z-index: 1;
	box-sizing: border-box;
	width: var(--tl-dot);
	height: var(--tl-dot);
	border: 2px solid var(--dot);
	border-radius: 50%;
	background: var(--card);
	transform: translateX(-50%);
}

/* 세로선: 현재 점 아래에서 다음 점 위까지 */
#content .timeline > li::after {
	content: "";
	position: absolute;
	left: calc(var(--tl-time) + var(--tl-gap) / 2);
	top: calc(0.8em + var(--tl-dot) / 2);
	bottom: calc(var(--tl-dot) / 2 - 0.8em);
	width: 2px;
	background: var(--line);
	transform: translateX(-50%);
}

#content .timeline > li:last-child::after {
	display: none;
}

#content .timeline time {
	grid-column: 1;
	text-align: right;
	color: color-mix(in srgb, var(--text) 70%, transparent);
	white-space: nowrap;
}

/* 본문 문단/강조 전역 규칙(#content p, strong)을 타임라인 안에서만 되돌림 */
#content .timeline .tl-body {
	grid-column: 3;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: left;
	color: color-mix(in srgb, var(--text) 78%, transparent);
}

#content .timeline .tl-body strong {
	display: block;
	padding: 0 !important;
	background: none;
	color: var(--text);
	font-family: inherit !important;
	font-weight: 700 !important;
}

/* 본문 링크 효과(밑줄 애니메이션)를 타임라인에서는 끄고 색만 사용 */
#content .timeline a {
	background: none;
	padding: 0;
	color: #5d87ff;
	font-weight: 400;
	text-decoration: none;
}
#content .timeline a:hover,
#content .timeline a:focus-visible {
	text-decoration: underline;
}

/* 점 색상 */
#content .timeline > .tl-blue   { --dot: #5d87ff; }
#content .timeline > .tl-green  { --dot: #13deb9; }
#content .timeline > .tl-yellow { --dot: #ffae1f; }
#content .timeline > .tl-red    { --dot: #fa896b; }

/* 타임라인 카드 제목 영역 (<section class="card card-tl">) */
.card.card-tl h2 {
	margin: 0 0 2rem 0;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}
#content .card-tl .card-sub {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: left;
	color: color-mix(in srgb, var(--text) 70%, transparent);
}

/* 본문 영역이 좁으면 시간 칸을 줄임 (#content 에 container 지정이 있을 때만 동작) */
@container content (max-width: 440px) {
	#content .timeline {
		--tl-time: 4rem;
		--tl-gap: 2rem;
	}
}

/* 본문 영역 폭을 기준으로 칸 나누기 (창 폭이 아님) */
#content {
	container: content / inline-size;
}

.cols {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: var(--tpl, repeat(var(--cols, 2), minmax(0, 1fr)));
	margin: 0 0 2rem 0;
}

.cols > * { min-width: 0; }
.cols > * > :last-child { margin-bottom: 0; }

/* 칸 수 */
.cols-2 { --cols: 2; }
.cols-3 { --cols: 3; }
.cols-4 { --cols: 4; }

/* 비율 */
.cols-2-1 { --tpl: minmax(0, 2fr) minmax(0, 1fr); }
.cols-1-2 { --tpl: minmax(0, 1fr) minmax(0, 2fr); }

/* 자동: 칸 최소 폭 14rem, 들어갈 만큼만 배치 (접힘 규칙 불필요) */
.cols-auto { --tpl: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

/* 본문 폭이 좁아지면 접기 */
@container content (max-width: 960px) {
	.cols-4 { --cols: 2; }
}
@container content (max-width: 720px) {
	.cols-2-1, .cols-1-2 { --tpl: minmax(0, 1fr); }
}
@container content (max-width: 640px) {
	.cols-2, .cols-3 { --cols: 1; }
}
@container content (max-width: 440px) {
	.cols-4 { --cols: 1; }
}


/* ==========================================================
   컴포넌트 모음: 알림 / 칩 / 카드목록 / 탭 / 아코디언 / KPI
   모두 #content 안에서만 적용 (style.css 와 충돌 방지)
   ========================================================== */

/* 공통: 알림·KPI 안의 p 는 본문 p 스타일이 새어 들어오지 않게 리셋 */
#content :is(.alert, .kpi) p {
	margin: 0 0 .5rem;
	font-size: 1rem;
	line-height: 1.7;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: left;
	color: inherit;
}
#content :is(.alert, .kpi) p:last-child { margin-bottom: 0; }

/* 카드 목록 / 탭 / 아코디언 안의 p: 본문 p 와 같은 모양 */
#content :is(.post, .tab-panel, .accordion) p {
	margin: 0 0 2rem 0;
	font-size: 1rem;
	line-height: 1.8;
	text-align: justify;
	letter-spacing: .08em;
	word-spacing: .1em;
	color: var(--textd);
}
#content :is(.post, .tab-panel) p:last-child { margin-bottom: 0; }
#content .post .post-meta { letter-spacing: normal; word-spacing: normal; text-align: left; }
@media (max-width: 736px) {
	#content :is(.post, .tab-panel, .accordion) p { font-size: 1rem; }
}

/* ---------- 1) 알림 박스 .alert ---------- */
#content .alert {
	--a: #5d87ff;
	position: relative;
	margin: 0 0 2rem;
	padding: 1rem 1.25rem 1rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--a) 30%, var(--card, #fff));
	border-left: 4px solid var(--a);
	/*border-radius: var(--radius, .5rem);*/
	background: color-mix(in srgb, var(--a) 10%, var(--card, #fff));
	color: var(--text, #2a3547);
}
#content .alert-info    { --a: #49beff; }
#content .alert-success { --a: #13deb9; }
#content .alert-warning { --a: #ffae1f; }
#content .alert-danger  { --a: #fa896b; }
#content .alert strong {
	display: block;
	margin: 0 0 .25rem;
	padding: 0 !important;
	background: none !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	color: var(--text, #2a3547);
}

/* ---------- 2) 칩(배지/태그) .chip ---------- */
#content .chip {
	--c: #5d87ff;
	display: inline-block;
	margin: 0 .25rem .25rem 0;
	padding: .15rem .6rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c) 14%, var(--card, #fff));
	color: color-mix(in srgb, var(--c) 85%, var(--text, #2a3547));
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}
#content .chip-green  { --c: #13deb9; }
#content .chip-yellow { --c: #ffae1f; }
#content .chip-red    { --c: #fa896b; }
#content .chip-sky    { --c: #49beff; }
#content .chip-gray   { --c: #7c8fac; }
#content .chip-outline { background: none; border-color: color-mix(in srgb, var(--c) 50%, transparent); }
#content a.chip:hover { background: color-mix(in srgb, var(--c) 24%, var(--card, #fff)); }

/* ---------- 3) 카드 목록 .post-grid > .post ---------- */
#content .post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
#content .post-grid > li { display: flex; margin: 0; padding: 0; }
#content .post-grid > li::before { content: none; }
#content .post {
	flex: 1;
	position: relative;               /* 제목 링크를 카드 전체로 확장 */
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line, #e5eaef);
	border-radius: var(--radius, .5rem);
	background: var(--card, #fff);
	transition: box-shadow .2s ease, transform .2s ease;
}
#content .post:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
#content .post img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0;
}
#content .post-body > .chip { align-self: flex-start; margin-bottom: .5rem; }
#content .post-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
#content .post h3 {
	margin: 0 0 .5rem;
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}
#content .post h3 a {
	background: none;
	padding: 0;
	color: var(--text, #2a3547);
	text-decoration: none;
}
#content .post h3 a::after { content: ""; position: absolute; inset: 0; }   /* 카드 전체 클릭 */
#content .post h3 a:hover { color: var(--primary, #5d87ff); }
#content .post .post-meta {
	margin: auto 0 0;
	padding-top: .75rem;
	font-size: .85rem;
	color: var(--muted, #7c8fac);
}

/* ---------- 4) 탭 .tabs (CSS만, 최대 6개) ---------- */
#content .tabs {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 2rem;
}
#content .tabs > input {
	position: absolute;
	width: 1px; height: 1px;
	margin: 0; padding: 0; border: 0;
	opacity: 0;
	-webkit-appearance: none; appearance: none;
	pointer-events: none;
}
#content .tabs > label {
	margin: 0 0 -1px;
	padding: .7rem 1.1rem;
	border: 0;
	border-bottom: 2px solid transparent;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--muted, #7c8fac);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}
#content .tabs > label::before,
#content .tabs > label::after { content: none !important; display: none !important; }   /* 템플릿 라디오 모양 제거 */
#content .tabs > label:hover { color: var(--text, #2a3547); }
#content .tabs > input:focus-visible + label { outline: 2px solid var(--primary, #5d87ff); outline-offset: -2px; border-radius: 4px; }
#content .tabs > input:checked + label { color: var(--primary, #5d87ff); border-bottom-color: var(--primary, #5d87ff); }
#content .tabs > .tab-panel { display: none; order: 99; width: 100%; padding: 1.5rem 0 0; border-top: 1px solid var(--line, #e5eaef); }
#content .tabs > input:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1),
#content .tabs > input:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2),
#content .tabs > input:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3),
#content .tabs > input:nth-of-type(4):checked ~ .tab-panel:nth-of-type(4),
#content .tabs > input:nth-of-type(5):checked ~ .tab-panel:nth-of-type(5),
#content .tabs > input:nth-of-type(6):checked ~ .tab-panel:nth-of-type(6) { display: block; }

/* ---------- 5) 아코디언 .accordion > details ---------- */
#content .accordion {
    margin: 0 0 2rem;
    padding: 1rem 0;
    border: 1px solid var(--line, #e5eaef);
    border-radius: var(--radius, .5rem);
    overflow: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#content .accordion details {
    margin: 0;
    overflow: hidden;
    border-top: 1px solid var(--line, #e5eaef);
    background: var(--card, #fff);
}

#content .accordion details:first-child {
    border-top: 0;
}
#content .accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 1rem;
	font-family: 'Noto Serif KR', sans-serif;
	padding: 1.25rem 1.25rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	color: var(--text, #2a3547);
}
/* 제목 앞 아이콘 */
#content .accordion summary::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background-color: var(--primary, #5d87ff);
	-webkit-mask: url(/images/icons/question-fill.svg) no-repeat center / contain;
	        mask: url(/images/icons/question-fill.svg) no-repeat center / contain;
}

/* 오른쪽 화살표: 맨 오른쪽으로 밀기 */
#content .accordion summary::after {
	content: "";
	flex: none;
	margin-left: auto;             /* ← 추가 */
	width: .55rem; height: .55rem;
	border-right: 2px solid var(--muted, #7c8fac);
	border-bottom: 2px solid var(--muted, #7c8fac);
	transform: rotate(45deg);
	transition: transform .25s ease;
}

#content .accordion summary::-webkit-details-marker { display: none; }
#content .accordion summary::after {
	content: "";
	flex: none;
	width: .55rem; height: .55rem;
	border-right: 2px solid var(--muted, #7c8fac);
	border-bottom: 2px solid var(--muted, #7c8fac);
	transform: rotate(45deg);
	transition: transform .25s ease;
}
#content .accordion details[open] > summary {
    color: var(--primary, #5d87ff);
}
#content .accordion details[open] > summary::after {
    transform: rotate(-135deg);
    border-color: var(--primary, #5d87ff);
}
#content .accordion summary:hover {
    color: var(--primary, #5d87ff);
}
#content .accordion summary:focus-visible {
    outline: 2px solid var(--primary, #5d87ff);
    outline-offset: -2px;
}

#content .accordion details > :not(summary) {
    margin-right: 1.25rem;
    margin-left: 1.25rem;
}

#content .accordion details > :last-child {
    margin-bottom: 1.25rem;
}

/* ---------- 6) 숫자 강조 카드 .kpi-grid > .kpi ---------- */
#content .kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 1.25rem;
	margin: 0 0 2rem;
}
#content .kpi {
	--k: #5d87ff;
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius, .5rem);
	background: color-mix(in srgb, var(--k) 12%, var(--card, #fff));
}
#content .kpi-yellow { --k: #ffae1f; }
#content .kpi-sky    { --k: #49beff; }
#content .kpi-red    { --k: #fa896b; }
#content .kpi-green  { --k: #13deb9; }
#content .kpi > span { display: block; }
#content .kpi .kpi-label { font-size: .9rem; color: color-mix(in srgb, var(--text, #2a3547) 70%, transparent); }
#content .kpi .kpi-value { margin: .25rem 0; font-size: 1.9rem; font-weight: 700; line-height: 1.2; color: color-mix(in srgb, var(--k) 70%, var(--text, #2a3547)); }
#content .kpi .kpi-delta { font-size: .85rem; font-weight: 600; color: #13a58a; }
#content .kpi .kpi-delta.down { color: #e5603d; }



/* ==========================================================
   차트 카드: 막대 / 선 / 도넛 / 게이지  (+ 범례, 카드 안·카드 목록·단독 사용)
   모두 #content 안에서만 적용, 데이터는 HTML(텍스트)에 그대로 남음
   ========================================================== */

#content {
	--cc1: var(--primary, #5d87ff);
	--cc2: color-mix(in srgb, var(--cc1) 45%, var(--card, #fff));
	--cc3: #0b84c6;
	--cc4: #ffae1f;
	--cc5: #13deb9;
	--cc6: #fa896b;
	--cc-track: color-mix(in srgb, var(--cc1) 12%, var(--card, #fff));
	--cc-gray: color-mix(in srgb, var(--text, #2a3547) 14%, var(--card, #fff));
}
#content .c1 { --c: var(--cc1); }
#content .c2 { --c: var(--cc2); }
#content .c3 { --c: var(--cc3); }
#content .c4 { --c: var(--cc4); }
#content .c5 { --c: var(--cc5); }
#content .c6 { --c: var(--cc6); }
#content .c-gray  { --c: var(--cc-gray); }
#content .c-track { --c: var(--cc-track); }

/* ---------- 카드 틀 ---------- */
#content .cc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.25rem;
	margin: 0 0 2rem;
}
#content .chart-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--line, #e5eaef);
	border-radius: var(--radius, .5rem);
	background: var(--card, #fff);
	color: var(--text, #2a3547);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#content .chart-card p {            /* 본문 p 전역 스타일 리셋 */
	margin: 0;
	font-size: 1rem;
	line-height: 1.8;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: left;
	color: inherit;
}
#content .cc-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.25rem;
}
#content .chart-card h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--text, #2a3547);
}
#content .chart-card h3 .chip { margin: 0; }
#content .chart-card .cc-sub   { margin-top: .15rem; font-size: .85rem; color: var(--muted, #7c8fac); }
#content .chart-card .cc-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }

/* ---------- 그래프 영역 ---------- */
#content .cc-chart {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height: 9rem;
	margin: 0 0 1.25rem;
}
#content .chart-card .cc-chart:last-child { margin-bottom: 0; }

/* 막대 */
#content .cc-bars {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: .6rem;
	width: 100%;
	height: 6.5rem;
}
#content .cc-bars > span {
	position: relative;
	flex: 0 1 .5rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--cc-track);
}
#content .cc-bars > span::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: var(--v, 50%);
	border-radius: inherit;
	background: var(--c, var(--cc1));
}

/* 선 */
#content .cc-line { display: block; width: 100%; height: 9rem; overflow: visible; }
#content .cc-line path {
	fill: none;
	stroke: var(--c, var(--cc1));
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}
#content .cc-axis {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: .6rem;
	padding-top: .6rem;
	border-top: 1px solid var(--line, #e5eaef);
	font-size: .85rem;
	color: var(--muted, #7c8fac);
}

/* 도넛 / 게이지 공통 */
#content .cc-donut, #content .cc-gauge { position: relative; }
#content .cc-donut { width: min(100%, 9.5rem); aspect-ratio: 1; }
#content .cc-gauge { width: min(100%, 10rem); aspect-ratio: 100 / 72; }
#content .cc-donut svg, #content .cc-gauge svg { display: block; width: 100%; height: 100%; }
#content .cc-donut svg { transform: rotate(-90deg); }
#content .cc-donut circle, #content .cc-gauge circle { fill: none; stroke-width: 8; }
#content .cc-donut .trk { stroke: var(--cc-track); }
#content .cc-donut .seg {
	stroke: var(--c, var(--cc1));
	stroke-dasharray: calc(var(--len) - 1.2) 100;      /* 조각 길이 (전체 100) */
	stroke-dashoffset: calc(var(--off, 0) * -1);       /* 시작 위치 */
}
#content .cc-gauge circle { stroke-linecap: round; transform: rotate(160deg); transform-origin: 50px 50px; }
#content .cc-gauge .trk { stroke: var(--cc-track); stroke-dasharray: 61.1 100; }
#content .cc-gauge .val { stroke: var(--c, var(--cc1)); stroke-dasharray: calc(var(--v) * .611) 100; }
#content .cc-center {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1;
	color: var(--text, #2a3547);
}
#content .cc-gauge .cc-center { padding-top: 38%; }

.g-num   { font-size: 15px; font-weight: 700; fill: var(--text); }
.g-total { font-size: 10px; font-weight: 400; fill: var(--muted, #8a94a6); }
.g-unit  { font-size: 7px;  fill: var(--muted, #8a94a6); letter-spacing: .05em; }

/* ---------- 범례 ---------- */
#content .cc-legend {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
#content .cc-legend li {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	padding: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--text, #2a3547);
}
#content .cc-legend li::before { content: none; }
#content .cc-legend i {
	flex: none;
	width: 1.1rem;
	height: .6rem;
	border-radius: .2rem;
	background: var(--c, var(--cc1));
}
#content .cc-legend .v { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- 배치 변형 ---------- */
/* 좌측: 제목·범례 / 우측: 그래프 (좁은 화면에서는 위아래로) */
#content .chart-card.cc-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
	grid-template-rows: auto 1fr;
	grid-template-areas: "head chart" "legend chart";
	column-gap: 2rem;
}
#content .chart-card.cc-row > .cc-head   { grid-area: head; margin-bottom: 1rem; }
#content .chart-card.cc-row > .cc-chart  { grid-area: chart; margin: 0; }
#content .chart-card.cc-row > .cc-legend { grid-area: legend; align-self: end; }
@media (max-width: 640px) {
	#content .chart-card.cc-row { display: flex; flex-direction: column; }
	#content .chart-card.cc-row > .cc-head  { margin-bottom: 1.25rem; }
	#content .chart-card.cc-row > .cc-chart { margin-bottom: 1.25rem; }
}

/* 카드 목록(.post)에서 이미지 대신 그래프 */
#content .post > .cc-chart {
	margin: 0;
	padding: 1.25rem;
	aspect-ratio: 16 / 9;
	min-height: 0;
	background: color-mix(in srgb, var(--cc1) 6%, var(--card, #fff));
}
#content .post > .cc-chart .cc-bars  { height: 100%; }
#content .post > .cc-chart .cc-line  { height: 100%; }
#content .post > .cc-chart .cc-donut { height: 100%; width: auto; }
#content .post > .cc-chart .cc-gauge { height: 100%; width: auto; }

/* 본문 중간·하단에 단독으로 쓰는 그래프 */
#content .cc-solo { margin: 0 0 2rem; }
#content .cc-solo .cc-line { height: 12rem; }

/* ---------- 처음 나타날 때 움직임 (JS가 .cc-ready / .is-in 을 붙임, JS 없으면 완성된 상태로 표시) ---------- */
.cc-ready #content .cc-chart:not(.is-in) .cc-bars > span::after { height: 0; }
.cc-ready #content .cc-chart:not(.is-in) .cc-line { clip-path: inset(-6px 100% -6px 0); }
.cc-ready #content .cc-chart:not(.is-in) .cc-donut .seg { stroke-dasharray: 0 100; }
.cc-ready #content .cc-chart:not(.is-in) .cc-gauge .val { stroke-dasharray: 0 100; }

.cc-ready #content .cc-chart.is-in .cc-bars > span::after { transition: height .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 70ms); }
.cc-ready #content .cc-chart.is-in .cc-line { clip-path: inset(-6px -6px -6px 0); transition: clip-path 1.2s cubic-bezier(.4, 0, .2, 1); }
.cc-ready #content .cc-chart.is-in .cc-donut .seg { transition: stroke-dasharray 1s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .15s); }
.cc-ready #content .cc-chart.is-in .cc-gauge .val { transition: stroke-dasharray 1.1s cubic-bezier(.22, 1, .36, 1); }






/* ==========================================================
   게시판 (목록형) - ul.board / .board-nav / .board-body
   ========================================================== */

#content .board-total {
    margin: 0 0 10px;
    font-size: .9rem;
    color: var(--textb);
}

#content .board-total span {
    color: var(--primary);
    font-weight: 600;
}

#content ul.board {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

#content ul.board > li {
    display: grid;
    grid-template-columns: 70px minmax(0,1fr) 110px 110px 80px;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    color: var(--texta);
}

#content ul.board > li::before {
    content: none;
}

#content ul.board .board-head {
    padding: 12px;
    background: var(--bg);
    font-size: .85rem;
    font-family: "Taviraj", serif;
    font-weight: 600;
    color: var(--textb);
}

#content ul.board .board-head > span {
    text-align: center;
}

#content ul.board .board-head .b-subject {
    text-align: left;
}

#content ul.board .board-row {
    position: relative;
    transition: background-color .15s;
}

#content ul.board .board-row:hover {
    background: var(--primary-soft);
}

#content ul.board .b-no,
#content ul.board .b-author,
#content ul.board .b-date,
#content ul.board .b-views {
    text-align: center;
    color: var(--textb);
    font-size: .88rem;
    white-space: nowrap;
}

#content ul.board .b-subject {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#content ul.board .b-subject a {
    color: var(--text);
    background: none;
    padding: 0;
    text-decoration: none;
}

#content ul.board .b-subject a::after {
    content: "";
    position: absolute;
    inset: 0;
} /* 행 전체 클릭 */

#content ul.board .board-row:hover .b-subject a {
    color: var(--primary);
}

#content ul.board .board-empty {
    display: block;
    padding: 50px 12px;
    text-align: center;
    color: var(--textc);
}

/* 상세 */

#content .board-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    font-size: .9rem;
    color: var(--textb);
}

#content .board-body {
    padding: 0 0 32px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
}

#content .board-body > :last-child {
    margin-bottom: 0;
}

#content .board-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 2rem;
}

#content .board-nav > span {
    display: block;
}

#content .board-nav a {
    display: block;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

#content .board-nav a:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

#content .board-nav a.is-next {
    text-align: right;
}

#content .board-nav .b-label {
    display: block;
    font-size: .8rem;
    color: var(--textc);
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    margin-bottom: 4px;
}

#content .board-nav .b-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

/* 모바일: No, Subject 만 */

@media screen and (max-width: 736px) {
    #content ul.board > li {
        grid-template-columns: 44px minmax(0,1fr);
        gap: 8px;
        padding: 14px 6px;
    }

    #content ul.board .b-author,
    #content ul.board .b-date,
    #content ul.board .b-views {
        display: none;
    }

    #content .board-nav {
        grid-template-columns: 1fr;
    }

    #content .board-nav a.is-next {
        text-align: left;
    }
}