@charset "utf-8";





.board-util {
  display: flex;
  gap: 8px;
}

/* 목록 아래에 놓이는 검색이라 폭을 다 쓰지 않고 가운데로 모은다. */
.board-search {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.pagination + .board-search,
.board-table + .board-search,
.gallery-grid + .board-search,
.faq-list + .board-search,
.board-actions + .board-search,
.education-course-list + .board-search {
  margin-top: var(--space-24);
}

.board-search + :where(.board-table, .gallery-grid, .result-list, .data-list-scroll) {
  margin-top: var(--space-20);
}

.board-search select,
.board-search input {
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.board-search select {
  width: 130px;
  padding: 0 14px;
}

.board-search input {
  flex: 0 1 300px;
  min-width: 0;
  padding: 0 16px;
}

.board-search button {
  min-width: 90px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: var(--accent);
}

.board-table {
  width: 100%;
  border-top: 2px solid var(--primary);
  border-collapse: collapse;
}

.col-no { width: 90px; }
.col-date {width: 170px;}
.col-hit { width: 110px; }
.col-writer { width: 250px; }
.col-org { width: 220px; }

.board-table .board-file-icon {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  color: var(--muted);
  vertical-align: -3px;
}

.board-table .board-file-indicator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  vertical-align: middle;
}

.board-table td[data-label="작성자"] {
  overflow-wrap: anywhere;
  word-break: keep-all;
}


.tag-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #d64545 90%, var(--primary-dark));
  color: #fff;
  font-size: calc(11px * var(--user-scale));
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.board-table th,
.board-table td {
  height: 58px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}


.board-table th {
  background: var(--bg);
  color: var(--primary);
  font-weight: 800;
}

.board-table .subject {
  text-align: left;
}

/* 제목 열은 본문이 왼쪽 정렬이라 헤더도 맞춘다. */
.board-table:not(.data-list-table) thead th:nth-child(2) {
  text-align: left;
}

.board-table .subject a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

.board-table .subject a:hover {
  color: var(--accent-strong);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 34px;
}

.pagination a,
.pagination strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.pagination-prev,
.pagination-next {
  font-size: 0;
}

.pagination-prev::before,
.pagination-next::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
}

.pagination-prev::before {
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 3px;
}

.pagination-next::before {
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 3px;
}

.pagination strong {
  border-color: var(--accent);
  background: var(--accent);
}

.view-head {
  padding: 30px 0;
  border-top: 2px solid var(--primary);
  border-bottom: 1px solid var(--border);
}

.view-title {
  color: var(--primary);
  font-family: var(--font-title);
  font-size: calc(30px * var(--user-scale));
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* 제목이 span 으로 감싸여 있어 전역 span 규칙(font-weight:100)에 눌린다.
   물려받도록 해야 제목 굵기가 살아난다. */
.view-title span {
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
}

/* 작성자·작성일 앞 표시. 목록에서 쓰는 아이콘과 같은 그림이다.
   장식이므로 글자는 그대로 읽힌다. */
/* 아이콘은 순서가 아니라 뜻으로 붙인다.
   전에는 :first-child 를 사람, :nth-child(2) 를 달력으로 두었는데,
   소속기관이 끼는 게시판에서 소속기관이 달력을 가져가고 작성일은 아이콘을
   잃었다. 갤러리처럼 작성일 하나만 있는 화면은 사람 아이콘이 붙었다. */
.view-meta > span[class*="is-"]::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  vertical-align: -2px;
}

.view-meta > span.is-writer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.view-meta > span.is-org::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3C/svg%3E");
}

.view-meta > span.is-date::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

.view-meta {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  color: var(--muted);
  font-size: calc(14px * var(--user-scale));
  font-weight: 600;
}

.view-body {
  min-height: 280px;
  padding: 34px 0 46px;
  border-bottom: 1px solid var(--border);
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  line-height: 1.8;
  overflow: hidden;
}


.view-body img {
  max-width: 100%;
  height: auto;
}

/* 에디터 본문 안에서만 문단과 목록, 제목, 표의 서식을 복원한다. */
:is(.view-body, .labor-qna-content) :is(p, ul, ol, blockquote, table) {
  font-size: var(--user-text-size);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

:is(.view-body, .labor-qna-content) p {
  min-height: 1lh;
  margin-bottom: calc(var(--space-16) * var(--user-scale));
}

:is(.view-body, .labor-qna-content) p:last-child {
  margin-bottom: 0;
}

:is(.view-body, .labor-qna-content) :is(ul, ol) {
  margin-block: 0 calc(var(--space-16) * var(--user-scale));
  padding-inline-start: calc(var(--space-24) * var(--user-scale));
  list-style-position: outside;
}

:is(.view-body, .labor-qna-content) ul {
  list-style-type: disc;
}

:is(.view-body, .labor-qna-content) ol {
  list-style-type: decimal;
}

:is(.view-body, .labor-qna-content) ul ul {
  list-style-type: circle;
}

:is(.view-body, .labor-qna-content) ul ul ul {
  list-style-type: square;
}

:is(.view-body, .labor-qna-content) li + li {
  margin-top: calc(var(--space-8) * var(--user-scale));
}

:is(.view-body, .labor-qna-content) li > :is(ul, ol) {
  margin-block: calc(var(--space-8) * var(--user-scale)) 0;
}

:is(.view-body, .labor-qna-content) :is(h1, h2, h3, h4, h5, h6) {
  margin-block: calc(var(--space-24) * var(--user-scale)) calc(var(--space-12) * var(--user-scale));
  color: var(--primary);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:is(.view-body, .labor-qna-content) :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

:is(.view-body, .labor-qna-content) h1 {
  font-size: calc(var(--user-text-size) + var(--space-12) * var(--user-scale));
}

:is(.view-body, .labor-qna-content) h2 {
  font-size: calc(var(--user-text-size) + (var(--space-8) + var(--space-4) / 2) * var(--user-scale));
}

:is(.view-body, .labor-qna-content) h3 {
  font-size: calc(var(--user-text-size) + var(--space-8) * var(--user-scale));
}

:is(.view-body, .labor-qna-content) h4 {
  font-size: calc(var(--user-text-size) + (var(--space-4) + var(--space-4) / 2) * var(--user-scale));
}

:is(.view-body, .labor-qna-content) h5 {
  font-size: calc(var(--user-text-size) + var(--space-4) * var(--user-scale));
}

:is(.view-body, .labor-qna-content) h6 {
  font-size: calc(var(--user-text-size) + var(--space-4) / 2 * var(--user-scale));
}

:is(.view-body, .labor-qna-content) blockquote {
  margin-block: 0 calc(var(--space-16) * var(--user-scale));
  padding: calc(var(--space-12) * var(--user-scale)) calc(var(--space-16) * var(--user-scale));
  border-inline-start: var(--space-4) solid var(--border-strong);
  color: var(--secondary);
  background: var(--bg);
}

:is(.view-body, .labor-qna-content) hr {
  margin-block: calc(var(--space-24) * var(--user-scale));
  border: 0;
  border-top: calc(var(--space-4) / 4) solid var(--border-strong);
}

:is(.view-body, .labor-qna-content) table {
  width: 100%;
  max-width: 100%;
  margin-block: 0 calc(var(--space-16) * var(--user-scale));
  border-collapse: collapse;
}

:is(.view-body, .labor-qna-content) :is(th, td) {
  padding: calc(var(--space-12) * var(--user-scale)) calc(var(--space-16) * var(--user-scale));
  border: calc(var(--space-4) / 4) solid var(--border);
  text-align: left;
  vertical-align: top;
}

:is(.view-body, .labor-qna-content) th {
  color: var(--primary);
  background: var(--bg-2);
  font-weight: 700;
}

:is(.view-body, .labor-qna-content) caption:not(.blind) {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 0 calc(var(--space-8) * var(--user-scale));
  overflow: visible;
  clip: auto;
  white-space: normal;
  text-align: left;
}

:is(.view-body, .labor-qna-content) a {
  color: var(--green);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

:is(.view-body, .labor-qna-content) a:is(:hover, :focus-visible) {
  color: var(--point-ink);
}

:is(.view-body, .labor-qna-content) :is(strong, b) {
  font-weight: 700;
}

:is(.view-body, .labor-qna-content) :is(em, i) {
  font-style: italic;
}

@media screen and (max-width: 767px) {
  :is(.view-body, .labor-qna-content) :is(ul, ol) {
    padding-inline-start: calc(var(--space-20) * var(--user-scale));
  }

  :is(.view-body, .labor-qna-content) table {
    display: block;
    overflow-x: auto;
  }

  :is(.view-body, .labor-qna-content) :is(th, td) {
    padding: calc(var(--space-8) * var(--user-scale));
  }
}

.view-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

td .btn{
  font-size: calc(14px * var(--user-scale));
  padding: 5px;
  min-width: 100px;
}

@media screen and (max-width: 767px) {
  .board-search {
    display: grid;
    grid-template-columns: 1fr;
  }

  .board-search select,
  .board-search input,
  .board-search button {
    width: 100%;
  }

  .board-table colgroup,
  .board-table thead {
    display: none;
  }

  .board-table,
  .board-table tbody,
  .board-table tr {
    display: block;
    width: 100%;
  }

  .board-table tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }

  /* 한 건이 세로로 길게 늘어지지 않게 제목만 크게 두고 나머지는 한 줄로 모은다. */
  .board-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-20);
    row-gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-12) 0;
  }

  .board-table tbody tr:last-child {
    margin-bottom: 0;
  }


  /* 제목은 한 줄을 통째로 차지하고, 나머지는 그 아래 한 줄에 이어 붙는다. */
  .board-table td.subject {
    flex: 0 0 100%;
    width: 100%;
  }

  .board-table td {
    width: auto;
    height: auto;
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }

  .board-table td[colspan] {
    flex: 0 0 100%;
    width: 100%;
  }

  /* 번호·첨부는 목록에서 굳이 보여줄 필요가 없다. */
  .board-table td[data-label="번호"],
  .board-table td[data-label="첨부"] {
    display: none;
  }

  /* 자료실은 조회수를 좁은 화면에서 굳이 보여주지 않는다.
     아래 메타 표시 규칙보다 뒤에 오도록 이름을 한 단계 붙였다. */
  table.training-table td[data-label="조회"] {
    display: none;
  }

  /* 작성자·등록일·조회·기간·상태는 제목 아래 한 줄에 나란히 둔다. */
  .board-table td[data-label="작성자"],
  .board-table td[data-label="등록일"],
  .board-table td[data-label="조회"],
  .board-table td[data-label="기간"],
  .board-table td[data-label="상태"] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    color: var(--muted);
    font-size: calc(13px * var(--user-scale));
    line-height: 1.3;
    white-space: nowrap;
  }


  .data-list-table td {
    flex: 0 0 100%;
    width: 100%;
  }

  .data-list-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: calc(12px * var(--user-scale));
    font-weight: 700;
  }

  
  .board-table:not(.data-list-table) td[data-label]:not(.subject)::before {
    content: "";
  }

  /* 모바일 목록의 메타 정보는 글자 라벨 대신 장식 아이콘으로 구분한다. */
  .board-table:not(.data-list-table) td[data-label="작성자"]::before,
  .board-table:not(.data-list-table) td[data-label="등록일"]::before {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: var(--space-4);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    vertical-align: middle;
  }

  .board-table td.subject a {
    position: relative;
    display: block;
    padding-left: calc(16px + var(--space-4));
    white-space: normal;
    font-size: calc(16px * var(--user-scale));
    line-height: 1.35;
  }

  .board-table td.subject a::before {
    content: "";
    position: absolute;
    top: calc((1.35em - 16px) / 2);
    left: 0;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  }

  .board-table:not(.data-list-table) td[data-label="작성자"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  }

  .board-table:not(.data-list-table) td[data-label="등록일"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  }



  /* 게시글 보기 — 데스크톱 값이 그대로 내려와 제목이 과하게 크고
     메타·본문 여백이 넓었다. 좁은 화면에 맞춰 줄인다. */
  .view-head {
    padding: 20px 0;
  }

  .view-title {
    font-size: calc(21px * var(--user-scale));
    line-height: 1.45;
    word-break: keep-all;
  }

  .view-meta {
    gap: 6px 14px;
    margin-top: 12px;
    font-size: calc(13px * var(--user-scale));
  }

  .share-tools {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }

  .view-body {
    min-height: 160px;
    padding: 22px 0 28px;
    font-size: calc(15px * var(--user-scale));
    line-height: 1.75;
  }

  .view-body img,
  .view-body table,
  .view-body iframe {
    max-width: 100%;
    height: auto;
  }

  .view-body table {
    display: block;
    overflow-x: auto;
  }

  .view-buttons {
    justify-content: center;
    margin-top: 20px;
  }

  .view-nav a {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }
}


.board-table .subject-locked,
.gallery-card.is-locked strong {
  color: var(--muted);
  font-weight: 500;
}


.gallery-card.is-locked {
  cursor: pointer;
}

.gallery-card.is-locked img {
  opacity: .45;
}


.board-table .subject .tag {
  margin-right: 14px;
  min-height: 26px;
  padding: 0 12px;
  vertical-align: middle;
}


.view-meta {
  position: relative;
  flex-wrap: wrap;
  align-items: center;
}

.share-tools {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
}

.share-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.share-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}


.share-btn svg.stroked {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-copied {
  position: absolute;
  right: 0;
  bottom: -30px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: calc(12px * var(--user-scale));
  white-space: nowrap;
}


.view-gallery {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}


.gallery-shot {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gallery-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-shot:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}

.view-body.has-attachment-images {
  padding-bottom: var(--space-16);
  border-bottom: 0;
}

.notice-inline-images {
  max-width: 100%;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.notice-inline-image {
  max-width: 100%;
	margin: 0 0 var(--space-12);
}

.notice-inline-image:last-child {
	margin-bottom: 0;
}

.notice-inline-image img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.notice-image-error {
  margin: 0;
  padding: var(--space-24);
  border: 1px dashed var(--border);
  background: var(--bg);
  color: var(--muted);
  text-align: center;
}

@media screen and (max-width: 767px) {
  .view-body.has-attachment-images {
    padding-bottom: var(--space-12);
  }

  .notice-inline-images {
    padding-bottom: 28px;
  }
}

body.is-lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.lightbox-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
}

.lightbox-panel img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  background: #fff;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #222;
  font-size: calc(18px * var(--user-scale));
  cursor: pointer;
}

.lightbox-close {
  position: absolute;
  top: -56px;
  right: 0;
}

.lightbox-counter {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: calc(14px * var(--user-scale));
}

@media screen and (max-width: 767px) {
  .lightbox-panel {
    max-width: 96vw;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 38px;
    height: 38px;
  }
}


.board-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.write-guide {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-2, #f7f8fa);
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.6;
}

.write-form {
  border-top: 2px solid var(--primary);
}

.write-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 8px;
  border-bottom: 1px solid var(--border);
}

.write-row > label {
  padding-top: 9px;
  font-weight: 700;
  color: var(--primary);
}

.write-row .req {
  color: var(--point-strong, #d33);
}

.write-row input[type="text"],
.write-row input[type="password"],
.write-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: calc(15px * var(--user-scale));
  color: var(--primary);
}

.write-row textarea {
  min-height: 200px;
  line-height: 1.6;
  resize: vertical;
}

.write-row small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
  line-height: 1.5;
}

.write-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 9px;
  font-weight: 400;
  cursor: pointer;
}

.write-files {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.write-files li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: calc(14px * var(--user-scale));
}

.write-files .file-remove {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--point-strong, #d33);
  font-family: inherit;
  font-size: calc(14px * var(--user-scale));
  cursor: pointer;
}

.write-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.verify-box {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}

.verify-desc {
  margin: 0 0 20px;
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.6;
}

.verify-box form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 0;
  align-items: center;
}

.verify-box input[type="password"] {
	grid-column: 1;
	grid-row: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: calc(15px * var(--user-scale));
}

.verify-box #btn-verify {
	grid-column: 2;
	grid-row: 1;
}

.verify-box #postPassword-error {
  grid-column: 1 / -1;
	grid-row: 2;
  width: 100%;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
	text-align: center;
}

.verify-help {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.verify-help span {
  display: block;
}

@media screen and (max-width: 767px) {
  .write-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .write-row > label {
    padding-top: 0;
  }

  .write-buttons .btn {
    flex: 1 1 0;
  }
}


.faq-list {
  border-top: 2px solid var(--primary);
}

.faq-answer-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 28px;
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.faq-answer-guide img {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.faq-answer-guide > span {
  font-weight: inherit;
}

.faq-answer-guide + .list-count-bar {
  margin-top: 0;
}

.faq-column-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 110px;
  gap: 12px;
  min-height: 58px;
  padding: 16px 44px 16px 8px;
  border-top: 2px solid var(--primary);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--primary);
  font-size: calc(20px * var(--user-scale));
  font-weight: 800;
  line-height: 1.5;
}

.faq-column-head > span {
  align-self: center;
  font-weight: inherit;
  text-align: center;
}

.faq-column-head + .faq-list {
  border-top: 0;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 44px 20px 8px;
  position: relative;
  cursor: pointer;
  font-size: calc(20px * var(--user-scale));
  font-weight: 700;
  color: var(--primary);
  line-height: 1.5;
  list-style: none;
}


.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }

.faq-q:hover .faq-title {
  color: var(--accent-strong);
}


.faq-q::after {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  right: 12px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.faq-item[open] > .faq-q::after {
  transform: rotate(-135deg);
}

.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 44px 24px 8px;
  background: transparent;
  color: var(--secondary);
  font-size: calc(19px * var(--user-scale));
  line-height: 1.8;
}

.faq-admin-answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 44px 24px 8px;
  background: var(--bg-2, #f7f8fa);
  color: var(--secondary);
  font-size: calc(19px * var(--user-scale));
  line-height: 1.8;
  border-top: 1px solid var(--border);
}

.faq-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
}

.faq-q .faq-mark {
  background: var(--accent);
  color: var(--primary);
}

.faq-a .faq-mark {
  background: var(--primary);
  color: var(--white);
}

.faq-admin-answer .faq-mark {
  background: var(--primary);
  color: var(--white);
}

.faq-title-group {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.faq-answer-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.faq-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.faq-date {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--muted);
  font-size: calc(14px * var(--user-scale));
  font-weight: 400;
  white-space: nowrap;
}

.faq-list-counsel .faq-writer {
  flex: 0 0 100px;
  color: var(--muted);
  font-size: calc(18px * var(--user-scale));
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.faq-list-counsel .faq-date {
  flex: 0 0 110px;
  margin-left: 0;
  font-size: calc(18px * var(--user-scale));
  text-align: center;
}

.faq-body {
  flex: 1;
  min-width: 0;
}

.faq-body img,
.faq-body video,
.faq-body iframe {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
	.faq-column-head {
		display: none;
	}

	.faq-column-head + .faq-list {
		border-top: 2px solid var(--primary);
	}

  .faq-q,
  .faq-a,
  .faq-admin-answer {
    padding-right: 36px;
    font-size: calc(15px * var(--user-scale));
  }

  /* 여백을 숫자로 밀어 맞추면 「Q」 뱃지 폭이 바뀔 때마다 어긋난다.
     제목과 작성자를 같은 칸에 두어 시작점이 저절로 맞게 한다. */
  .faq-q {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8) 12px;
  }

  .faq-q > .faq-mark {
    grid-column: 1;
    grid-row: 1;
  }

  .faq-date {
    margin-left: 56px;
  }

	.faq-list-counsel .faq-title-group {
		grid-column: 2 / -1;
		grid-row: 1;
		flex-basis: auto;
	}

	.faq-list-counsel .faq-writer {
		display: inline-flex;
		align-items: center;
		gap: var(--space-4);
		grid-column: 2;
		grid-row: 2;
		margin-left: 0;
		font-size: calc(15px * var(--user-scale));
		text-align: left;
	}

	/* 공지사항 목록과 같은 방식으로 아이콘을 붙여 무엇인지 알 수 있게 한다.
	   열 머리글이 숨겨지는 좁은 화면에서는 이 아이콘이 유일한 단서다. */
	.faq-list-counsel .faq-writer::before,
	.faq-list-counsel .faq-date::before {
		content: "";
		display: inline-block;
		flex: 0 0 14px;
		width: 14px;
		height: 14px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 14px 14px;
	}

	.faq-list-counsel .faq-writer::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	}

	.faq-list-counsel .faq-date::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
	}

	.faq-list-counsel .faq-date {
		display: inline-flex;
		align-items: center;
		gap: var(--space-4);
		grid-column: 3;
		grid-row: 2;
		justify-self: end;
		margin-left: var(--space-16);
		font-size: calc(15px * var(--user-scale));
		text-align: left;
	}
}


.write-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 24px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.write-dropzone:hover,
.write-dropzone:focus-visible {
  border-color: var(--accent-strong);
  outline: none;
}


.write-dropzone.is-dragover {
  border-width: 2px;
  border-color: var(--accent-strong);
  background: var(--bg-2, #f7f8fa);
  color: var(--primary);
}
.write-form {
  padding: var(--space-40);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.write-row {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
  padding: 0;
  border-bottom: 0;
}

.write-row > label {
  padding-top: 0;
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
  line-height: 1.45;
}

.write-row input[type="text"],
.write-row input[type="password"],
.write-row textarea {
  min-height: 48px;
  padding: 0 var(--space-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
}

.write-row textarea {
  min-height: 180px;
  padding-top: var(--space-12);
  line-height: 1.6;
}

.write-row input:focus,
.write-row textarea:focus,
.write-dropzone:focus-visible {
  border-color: var(--accent-strong);
  outline: none;
}

.write-row small,
.write-guide {
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
  font-weight: 500;
  line-height: 1.55;
}

.write-buttons {
  gap: var(--space-12);
  margin-top: var(--space-24);
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .write-form {
    padding: var(--space-24);
  }
}

.view-meta > span,
.view-meta .share-tools + span,
.view-table th,
.view-table td {
  vertical-align: middle;
}

.view-meta > span {
  font-weight: 600;
}

.view-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--primary);
}

.view-table th,
.view-table td {
  height: 58px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

.view-table th {
  color: var(--primary);
  background: var(--bg);
  font-weight: 800;
}
.labor-qna-guide {
  margin: -12px 0 28px;
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
}

.labor-qna-table .col-status {
  width: 130px;
}

.labor-qna-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
}

.labor-qna-status.is-waiting {
  color: #7a5b10;
  background: #fff4cf;
}

.labor-qna-status.is-complete {
  color: #236a45;
  background: #e7f6ed;
}

.labor-qna-view .view-head {
  margin-bottom: 32px;
}

.labor-qna-section {
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.labor-qna-section > h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  font-size: calc(18px * var(--user-scale));
}

.labor-qna-section > h4 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: var(--point);
  font-weight: 800;
}

.labor-qna-section.is-answer > h4 span {
  background: #50a875;
}

.labor-qna-files {
  /* 좌우 여백을 두지 않는다. 첨부 링크는 그 자체가 좌우 패딩을 가진 카드라
     바깥에 30px 을 더 주면 아래 본문보다 한 단계 더 들어가 보인다. */
  margin: 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.labor-qna-files-head {
  display: flex;
  align-items: center;
  /* 개수는 "첨부파일" 바로 옆에 붙는다. space-between 으로 두면 개수가
     상자 오른쪽 끝까지 밀려나 무엇의 개수인지 이어 읽히지 않았다. */
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.labor-qna-files-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: calc(15px * var(--user-scale));
}

.labor-qna-files-head strong .lucide-icon {
  width: 18px;
  height: 18px;
  color: var(--point);
}

.labor-qna-files-head > span {
  min-width: 38px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: #f1f3f5;
  font-size: calc(12px * var(--user-scale));
  font-weight: 700;
  text-align: center;
}

.labor-qna-files ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.labor-qna-files li {
  min-width: 0;
}

.labor-qna-files li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  color: var(--text);
  background: #fafbfc;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.labor-qna-files li a:hover,
.labor-qna-files li a:focus-visible {
  border-color: #f2a08d;
  color: #b84d39;
  background: #fff8f6;
}

.labor-qna-files li a:focus-visible {
  outline: 3px solid rgba(238, 118, 91, 0.2);
  outline-offset: 2px;
}

.labor-qna-file-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.labor-qna-file-info > .lucide-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #7e8790;
}

.labor-qna-file-name {
  overflow: hidden;
  min-width: 0;
  font-size: calc(14px * var(--user-scale));
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.labor-qna-file-info small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
  font-weight: 400;
}

.labor-qna-file-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: #68727d;
  font-size: calc(13px * var(--user-scale));
  font-weight: 600;
}

.labor-qna-file-action .lucide-icon {
  width: 16px;
  height: 16px;
}

.labor-qna-section.is-answer .labor-qna-files-head strong .lucide-icon {
  color: #399564;
}

.labor-qna-section.is-answer .labor-qna-files li a:hover,
.labor-qna-section.is-answer .labor-qna-files li a:focus-visible {
  border-color: #8cc9a7;
  color: #236a45;
  background: #f5fbf7;
}

.labor-qna-section.is-answer .labor-qna-files li a:focus-visible {
  outline-color: rgba(80, 168, 117, 0.2);
}

.labor-qna-content,
.labor-qna-empty {
  min-height: 120px;
  margin: 0;
  padding: 28px 30px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.labor-qna-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
}

.labor-qna-answer-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 30px 24px;
  color: var(--muted);
  text-align: right;
}

.labor-qna-answer-info strong {
  color: var(--text);
  font-size: calc(14px * var(--user-scale));
}

@media (max-width: 768px) {
  .labor-qna-guide {
    margin-top: -4px;
    text-align: left;
  }

  .labor-qna-section > h4 {
    padding: 15px 18px;
  }

  .labor-qna-files {
    margin: 16px 0;
    padding-bottom: 16px;
  }

  .labor-qna-files li a {
    gap: 10px;
    padding: 10px 12px;
  }

  .labor-qna-file-info {
    flex: 1 1 auto;
  }

  .labor-qna-file-action {
    font-size: 0;
  }

  .labor-qna-file-action .lucide-icon {
    width: 18px;
    height: 18px;
  }

  .labor-qna-content,
  .labor-qna-empty {
    min-height: 100px;
    padding: 22px 18px;
  }

  .labor-qna-answer-info {
    flex-wrap: wrap;
    padding: 0 18px 20px;
  }
}

/* 기관 목록 모바일 — 셀마다 라벨(시·군 / 기관명)을 붙이면 두 줄이 더 늘어 읽기 나쁘다.
   라벨을 걷어내고 한 건을 카드처럼 두 줄로 세운다.

     [시·군 뱃지]        [펼침]
     기관명

   펼침 버튼은 오른쪽에서 두 줄에 걸쳐 세로 가운데에 둔다. */
@media screen and (max-width: 767px) {
  .board-table.data-list-table tbody tr[data-region] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    padding: 14px 16px;
  }

  .board-table.data-list-table tbody tr[data-region] > td {
    flex: none;
    width: auto;
    padding: 0;
  }

  .board-table.data-list-table td[data-label]::before {
    content: none;
  }

  .board-table.data-list-table tbody tr[data-region] > td:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .board-table.data-list-table tbody tr[data-region] > td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    color: var(--primary);
    font-size: calc(16px * var(--user-scale));
    font-weight: 700;
    line-height: 1.4;
  }

  .board-table.data-list-table tbody tr[data-region] > .data-list-toggle-cell {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  /* 상세도 좁은 화면에서는 라벨과 값을 나란히 두면 값이 눌린다.
     라벨을 윗줄, 값을 아랫줄로 세운다.

       주소
       주소내용
       대표전화
       전화번호  */
  .institution-detail {
    padding: 14px 16px;
    gap: 14px;
  }

  .institution-detail > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .institution-detail dd {
    padding-left: 0;
    border-left: 0;
  }
}

/* 게시판 목록 모바일 — 제목 링크가 블록이라 N 뱃지가 다음 줄로 떨어졌다.
   한 줄에 나란히 두고, 자리가 모자라면 제목을 말줄임한다. */
@media screen and (max-width: 767px) {
  .board-table td.subject {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .board-table td.subject > a {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .board-table td.subject > .tag-new {
    flex: 0 0 auto;
  }

  .board-table td.subject > .board-file-indicator {
    flex: 0 0 auto;
  }
}

/* 자료 표(제출서류 등). 게시판 목록 스타일을 쓰지만 목록이 아니다.
   목록용 규칙이 열 머리글을 왼쪽으로 밀고 좁은 화면에서 행을 카드로 바꾸는데,
   두 열이 짝을 이루는 표라서 그러면 서류명과 주의사항이 흩어진다. */
.board-table.doc-table thead th:nth-child(n) {
  text-align: center;
}

.board-table.doc-table tbody th,
.board-table.doc-table tbody td {
  text-align: left;
}

@media screen and (max-width: 767px) {
  .board-table.doc-table {
    min-width: 520px;
  }

  .board-table.doc-table thead {
    display: table-header-group;
  }

  .board-table.doc-table tr,
  .board-table.doc-table tbody tr {
    display: table-row;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .board-table.doc-table th,
  .board-table.doc-table td {
    display: table-cell;
    width: auto;
    padding: var(--space-12);
    border-bottom: 1px solid var(--border);
  }
}

/* 서비스제공기관·교육기관 소식은 작성자 옆에 소속기관 열이 더 있다.
   좁은 화면 규칙에 이 열이 빠져 있어 라벨도 아이콘도 없이 작성자에 붙어 보였다. */
@media screen and (max-width: 767px) {
  /* 목록 번호는 좁은 화면에서 자리만 차지한다. 공지 뱃지는 남긴다. */
  .board-table td[data-label="번호"] > span:not(.tag) {
    display: none;
  }

  .board-table:not(.data-list-table) td[data-label="소속기관"]::before {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: var(--space-4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    vertical-align: middle;
  }

  .board-table td[data-label="작성자"],
  .board-table td[data-label="소속기관"],
  .board-table td[data-label="등록일"] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--muted);
    font-size: calc(14px * var(--user-scale));
    line-height: 1.3;
    white-space: nowrap;
  }

  .board-table td[data-label="소속기관"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .board-table td[data-label="작성자"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}