@charset "utf-8";

/* Scoped to the four KO V2 mobile basic boards; V1 and PC never add this class. */
.mobile-basic-board,
.mobile-basic-board * { box-sizing: border-box; }
.l__bo-wrap.mobile-basic-board {
  --board-ink: var(--mobile-ui-ink, #293544);
  --board-muted: var(--mobile-ui-muted, #506079);
  --board-line: var(--mobile-ui-line, #dce5ef);
  --board-action: var(--mobile-ui-action-primary, #0077b8);
  width: 100%; max-width: 60rem; margin: 0 auto;
  padding: 24px 16px 32px; background: #fff;
  color: var(--board-ink); font-family: inherit; font-size: 14px; line-height: 1.6;
}
.mobile-basic-board__header { margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--board-line); }
.mobile-basic-board__header h1,
.mobile-basic-board__header h2,
.mobile-basic-board__detail-title { margin: 0; color: var(--board-ink); font-size: 20px; font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.mobile-basic-board__header p { margin: 10px 0 0; color: var(--board-muted); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.mobile-basic-board #l__bo-search { width: 100%; margin: 0 0 20px; padding: 0; border: 0; background: transparent; }
.mobile-basic-board #l__bo-search form { display: flex; width: 100%; min-width: 0; gap: 8px; }
.mobile-basic-board #l__bo-search select#sfl {
  display: block; flex: 0 0 84px; width: 84px; height: 46px; margin: 0; padding: 0 8px;
  border: 1px solid var(--board-line); border-radius: 10px; background: #fff;
  color: var(--board-muted); font: inherit;
}
.mobile-basic-board #l__bo-search label {
  position: relative; display: flex; flex: 1; width: auto; min-width: 0; margin: 0;
  border: 1px solid var(--board-line); border-radius: 10px; overflow: hidden; background: #fff;
}
.mobile-basic-board #l__bo-search label input#stx {
  display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 44px 0 12px;
  border: 0; border-radius: 0; background: transparent; color: var(--board-ink); font: inherit;
}
.mobile-basic-board #l__bo-search label > button.btn-search {
  position: absolute; inset: 0 0 0 auto; width: 44px; height: 44px; line-height: 44px; padding: 0; margin: 0;
  border: 0; border-left: 1px solid var(--board-line); background: #fff; color: var(--board-action); font-size: 20px;
}
.mobile-basic-board #l__bo-search label:focus-within { outline: 2px solid var(--board-action); outline-offset: 2px; }
.mobile-basic-board a:focus-visible,
.mobile-basic-board button:focus-visible,
.mobile-basic-board select:focus-visible { outline: 2px solid var(--board-action); outline-offset: 3px; }
.mobile-basic-board .l__bo-total-count { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: auto; min-height: 28px; margin: 0 0 12px; padding: 0; border: 0; }
.mobile-basic-board .bo-count { float: none; color: var(--board-muted); font-size: 13px; line-height: 1.5; }
.mobile-basic-board .bo-write { float: none; margin-left: auto; }
.mobile-basic-board .bo-write a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--board-line); border-radius: 8px; color: var(--board-action) !important; background: #fff; font-size: 14px; }
.mobile-basic-board .category-list { margin: 0 0 16px; }
.mobile-basic-board .category-list ul { display: flex; flex-wrap: wrap; gap: 8px; height: auto; line-height: 1.5; overflow: visible; white-space: normal; }
.mobile-basic-board .category-list ul > li { display: block; float: none; width: auto; height: auto; line-height: 1.5; margin: 0; padding: 0; border: 0; }
.mobile-basic-board .category-list a { display: block; min-height: 40px; padding: 8px 12px; border: 1px solid var(--board-line); border-radius: 8px; }
.mobile-basic-board .content-list { margin: 0; padding: 0; border: 0; }
.mobile-basic-board table.l__bo-basic { display: block; width: 100%; margin: 0; border: 0; border-top: 1px solid var(--board-line); table-layout: auto; }
.mobile-basic-board .l__bo-basic colgroup,
.mobile-basic-board .l__bo-basic thead { display: none; }
.mobile-basic-board .l__bo-basic tbody { display: block; }
.mobile-basic-board .l__bo-basic tr { display: flex; flex-direction: column; gap: 7px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--board-line); background: #fff; }
.mobile-basic-board .l__bo-basic td { display: block; width: 100%; height: auto; padding: 0; border: 0; text-align: left; white-space: normal; }
.mobile-basic-board .l__bo-basic td.subject { order: 2; font-size: 15px; line-height: 1.6; }
.mobile-basic-board .l__bo-basic td.subject a { display: inline; width: auto; max-width: 100%; padding: 0; color: var(--board-ink); font-size: 15px; line-height: 1.6; font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.mobile-basic-board .l__bo-basic td.subject a.bo_cate_link { display: inline-block; margin: 0 6px 4px 0; color: var(--board-action); font-size: 12px; }
.mobile-basic-board .l__bo-basic td:not(.subject) { order: 1; color: var(--board-muted); font-size: 12px; }
.mobile-basic-board .l__bo-basic tr.notice td.subject a { color: var(--board-action); }
.mobile-basic-board .l__bo-basic td.empty { padding: 28px 0; text-align: center; color: var(--board-muted); font-size: 14px; }
.mobile-basic-board__private { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--board-line); border-radius: 4px; color: var(--board-muted); font-size: 11px; font-weight: 400; vertical-align: middle; }

/* Retain the existing detail actions, attachment handlers and comment controller. */
.mobile-basic-board table.bo-view { display: block; width: 100%; margin: 0 0 16px; border: 0; }
.mobile-basic-board .bo-view colgroup { display: none; }
.mobile-basic-board .bo-view thead,
.mobile-basic-board .bo-view tbody { display: block; }
.mobile-basic-board .bo-view tr { display: flex; flex-wrap: wrap; width: 100%; border: 0; }
.mobile-basic-board .bo-view thead th { display: block; width: 100%; padding: 16px 0; border: 0; border-top: 1px solid var(--board-line); background: #fff; text-align: left; color: var(--board-muted); font-size: 13px; }
.mobile-basic-board .bo-view td { width: auto; padding: 0 12px 12px 0; border: 0; background: #fff; color: var(--board-muted); font-size: 12px; text-align: left; }
.mobile-basic-board .bo-view td.file-link { width: 100%; padding: 12px; border: 1px solid var(--board-line); border-radius: 8px; overflow-wrap: anywhere; }
.mobile-basic-board .file-link p { margin: 0 0 8px; }
.mobile-basic-board .file-link a { color: var(--board-action); font-size: 13px; }
.mobile-basic-board .file-link img { width: 14px; height: auto; }
.mobile-basic-board .view-btn-list { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 0 0 20px; padding: 0; }
.mobile-basic-board .view-btn-list li { float: none; width: auto; margin: 0; }
.mobile-basic-board .view-btn-list a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--board-line); border-radius: 8px; background: #fff; color: var(--board-action) !important; font-size: 14px; }
.mobile-basic-board #bo_v_atc { margin: 0; padding: 20px 0; border-top: 1px solid var(--board-line); border-bottom: 1px solid var(--board-line); }
.mobile-basic-board #bo_v_con { width: 100%; margin: 0; padding: 0; overflow-x: auto; overflow-wrap: anywhere; color: var(--board-ink); font-size: 15px; line-height: 1.8; }
.mobile-basic-board #bo_v_con img,
.mobile-basic-board #bo_v_img img { max-width: 100% !important; height: auto !important; }
.mobile-basic-board #bo_v_con iframe,
.mobile-basic-board #bo_v_con video { max-width: 100%; }
.mobile-basic-board .bo_v_nb { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; width: 100%; margin: 20px 0 0; padding: 0; }
.mobile-basic-board .bo_v_nb li { float: none; flex: 1; width: auto; margin: 0; }
.mobile-basic-board .bo_v_nb a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; border: 1px solid var(--board-line); border-radius: 8px; background: #fff; color: var(--board-action) !important; font-size: 14px; }

.mobile-basic-board #l__bo-search .btn-search i { display: none; }
.mobile-basic-board #l__bo-search .btn-search::before { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; left: 13px; top: 12px; }
.mobile-basic-board #l__bo-search .btn-search::after { content: ""; position: absolute; width: 8px; height: 2px; background: currentColor; transform: rotate(45deg); left: 25px; top: 27px; }