/* v3 role-aware class board presentation. Data authority remains in the existing board repositories. */

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

/* Teacher desktop workspace */
body.board-admin-page {
  background: #07101d;
}

.board-admin-page .teacher-sidebar-tools {
  margin-top: auto;
}

.board-admin-page .teacher-sidebar-tools > a {
  border-color: #3975b5;
  background: #173b65;
  color: #fff;
}

.board-admin-page .teacher-sidebar-tools > p {
  margin: 9px 7px 0;
  color: #7891af;
  font-size: 9px;
  line-height: 1.5;
}

.board-admin-main {
  display: block;
  padding: 22px 24px 70px;
  overflow-y: auto;
}

.board-admin-main > * + * {
  margin-top: 14px;
}

.board-admin-page #boardWorkspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.board-admin-page #boardWorkspace > .board-admin-overview { order: 1; }
.board-admin-page #boardWorkspace > .board-admin-workflow { order: 2; }
.board-admin-page #boardWorkspace > #boardListSection { order: 3; }
.board-admin-page #boardWorkspace > #boardCatalogCard { order: 4; }
.board-admin-page #boardWorkspace > #boardEditorCard { order: 5; }
.board-admin-page #boardWorkspace > #boardPostPanel { order: 6; }
.board-admin-page #boardWorkspace > #boardCommentPanel { order: 7; }
.board-admin-page #boardWorkspace > #boardReviewPanel { order: 8; }

.board-admin-page .management-card,
.board-admin-page .management-guide {
  border-color: #263d59;
  background: #0c1828;
  color: #dce8f7;
  box-shadow: none;
}

.board-admin-page .management-card {
  padding: 20px;
  border-radius: 14px;
}

.board-admin-page .management-card h2,
.board-admin-page .management-card h3,
.board-admin-page .management-section-heading h2 {
  color: #edf5ff;
}

.board-admin-page .management-section-heading span,
.board-admin-page .eyebrow {
  color: #65a9ff;
}

.board-admin-page .management-section-heading p,
.board-admin-page .privacy-note,
.board-admin-page .field-help,
.board-admin-page .board-row-meta,
.board-admin-page .board-post-meta {
  color: #8ca1bb;
}

.board-admin-guide {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.board-admin-guide > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: #b9d8ff;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.board-admin-guide > summary::-webkit-details-marker,
.student-board-guide > summary::-webkit-details-marker {
  display: none;
}

.board-admin-guide > summary small,
.student-board-guide > summary small {
  color: #7891af;
  font-weight: 700;
}

.board-admin-guide > ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid #243b57;
  list-style: none;
}

.board-admin-guide li {
  min-height: 76px;
  padding: 14px;
  background: #0e1b2d;
}

.board-admin-guide li + li {
  border-left: 1px solid #243b57;
}

.board-admin-guide strong {
  color: #79b8ff;
}

.board-admin-guide span {
  color: #8197b1;
  font-size: 10px;
}

.board-admin-tenant {
  display: grid;
  grid-template-columns: minmax(200px, .55fr) minmax(420px, 1.45fr);
  align-items: center;
  gap: 20px;
}

.board-admin-tenant h2 {
  margin: 0;
}

.board-admin-tenant .management-message {
  grid-column: 1 / -1;
  min-height: 20px;
  margin: 0;
  color: #8fa6c3;
}

.board-admin-page #boardTenantPicker {
  justify-content: end;
}

.board-admin-page #boardTenantPicker label,
.board-admin-page .board-editor-grid > label,
.board-admin-page .board-post-form > label,
.board-admin-page .board-catalog-grid form > label {
  color: #b8c9dd;
}

.board-admin-page #boardTenantPicker select,
.board-admin-page .board-editor-grid input,
.board-admin-page .board-editor-grid select,
.board-admin-page .board-editor-grid textarea,
.board-admin-page .board-post-form input,
.board-admin-page .board-post-form select,
.board-admin-page .board-post-form textarea,
.board-admin-page .board-catalog-grid input,
.board-admin-page .board-post-card input {
  border-color: #345171;
  color: #e7f0fb;
  background: #0a1524;
}

.board-admin-page .secondary-button,
.board-admin-page .secondary-link,
.board-admin-page .compact-button {
  border-color: #365676;
  color: #d5e7fb;
  background: #13243a;
}

.board-admin-page .student-login-submit {
  border-color: #397ed4;
  color: #fff;
  background: #275eaa;
}

.board-admin-page .danger-button {
  border-color: #714151;
  color: #ffb9c7;
  background: #321826;
}

.board-admin-overview {
  display: grid;
  min-height: 130px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  border: 1px solid #29415e;
  border-radius: 14px;
  background: #101d2e;
  padding: 22px 24px;
}

.board-admin-overview > div > span {
  color: #65a9ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.board-admin-overview h2 {
  margin: 7px 0 6px;
  color: #f1f6fd;
  font-size: 24px;
}

.board-admin-overview p {
  margin: 0;
  color: #8ea3bd;
  font-size: 11px;
}

.board-admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid #2c4664;
  border-radius: 11px;
  background: #0a1625;
}

.board-admin-stats div {
  min-width: 86px;
  padding: 14px 16px;
  text-align: center;
}

.board-admin-stats div + div {
  border-left: 1px solid #263e59;
}

.board-admin-stats dt {
  color: #8196b0;
  font-size: 9px;
}

.board-admin-stats dd {
  margin: 5px 0 0;
  color: #75b7ff;
  font-size: 21px;
  font-weight: 900;
}

.board-admin-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.board-admin-workflow button {
  display: grid;
  min-height: 70px;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 11px;
  border: 1px solid #294562;
  border-radius: 11px;
  color: #dceafa;
  background: #102039;
  padding: 12px 15px;
  text-align: left;
  cursor: pointer;
}

.board-admin-workflow button:hover,
.board-admin-workflow button:focus-visible {
  border-color: #4b99ef;
  background: #173052;
  outline: none;
}

.board-admin-workflow i {
  color: #73b6ff;
  font-size: 19px;
  text-align: center;
}

.board-admin-workflow span {
  display: grid;
  gap: 4px;
}

.board-admin-workflow strong {
  font-size: 12px;
}

.board-admin-workflow small {
  color: #8095af;
  font-size: 9px;
}

.board-admin-page .board-catalog-grid form,
.board-admin-page .board-record-form-panel,
.board-admin-page .board-record-field,
.board-admin-page .board-review-card,
.board-admin-page .board-record-submission,
.board-admin-page .board-post-card,
.board-admin-page .board-comment-card,
.board-admin-page .board-file-card {
  border-color: #29415d;
  color: #dbe7f5;
  background: #101e31;
}

.board-admin-page .board-chip {
  border-color: #36526e;
  color: #c8d8ea;
  background: #0b1727;
}

.board-admin-page .management-table-wrap {
  border: 1px solid #263d59;
  border-radius: 11px;
  background: #0b1726;
}

.board-admin-page .management-table {
  color: #cfdced;
}

.board-admin-page .management-table th {
  color: #91a8c3;
  background: #101f33;
}

.board-admin-page .management-table td {
  border-color: #223650;
}

.board-admin-page .board-post-card[data-status="pending"] {
  border-color: #8c6929;
  background: #211d15;
}

.board-admin-page .board-post-card[data-status="rejected"] {
  border-color: #814352;
  background: #24161d;
}

.board-admin-page .board-file-card img {
  background: #071321;
}

/* Student tablet workspace */
body.student-board-page {
  min-width: 700px;
  min-height: 100vh;
  margin: 0;
  color: #15233d;
  background: #f6f8fc;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}

.student-board-page [hidden] {
  display: none !important;
}

.student-board-page button,
.student-board-page input,
.student-board-page select,
.student-board-page textarea {
  font: inherit;
}

.student-board-page .student-board-shell {
  width: min(1480px, calc(100% - 42px));
  padding: 22px 0 72px;
}

.student-board-page .student-board-header {
  display: grid;
  min-height: 78px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid #dbe2ec;
  border-radius: 0;
  background: transparent;
  padding: 0 0 16px;
  box-shadow: none;
}

.student-board-home {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #d3dce8;
  border-radius: 13px;
  color: #17294a;
  background: #fff;
  text-decoration: none;
}

.student-board-heading .eyebrow {
  margin: 0 0 2px;
  color: #4d6ec8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.student-board-heading h1 {
  margin: 0;
  color: #10203d;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
}

.student-board-heading > p:last-child {
  margin: 6px 0 0;
  color: #768399;
  font-size: 13px;
}

.student-board-header-actions {
  display: flex;
  gap: 10px;
}

.student-board-role,
#studentBoardBrowse,
#studentBoardThemeToggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid #d5deeb;
  border-radius: 12px;
  color: #314e91;
  background: #fff;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
}

#studentBoardThemeToggle {
  color: #25344f;
  cursor: pointer;
}

#studentBoardBrowse {
  color: #314e91;
  cursor: pointer;
}

.student-board-page .student-board-guide {
  margin: 12px 0;
  border: 1px solid #dbe2ec;
  border-radius: 13px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.student-board-page .student-board-guide > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: #4168c7;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.student-board-page .student-board-guide > ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid #e3e8f0;
  list-style: none;
}

.student-board-page .student-board-guide li {
  min-height: 66px;
  padding: 12px 14px;
  background: #fff;
}

.student-board-page .student-board-guide strong {
  color: #4168c7;
  font-size: 11px;
}

.student-board-page .student-board-guide span {
  font-size: 10px;
}

.student-board-page .management-message {
  min-height: 18px;
  margin: 9px 2px;
  color: #60708a;
  font-size: 12px;
}

.student-board-page .student-board-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.student-board-page .student-board-list-card,
.student-board-page .student-board-detail {
  border-color: #d8e0ea;
  border-radius: 15px;
  padding: 17px;
  box-shadow: none;
}

.student-board-page .student-board-list-card {
  padding-bottom: 10px;
}

.student-board-page[data-board-has-selection="true"] .student-board-list-card {
  display: none;
}

.student-board-page[data-board-has-selection="true"] .student-board-detail {
  border: 0;
  padding: 0;
  background: transparent;
}

.student-board-page[data-board-has-selection="true"] .student-board-detail-header > div:first-child {
  display: none;
}

.student-board-page[data-board-has-selection="true"] .student-board-detail-header {
  justify-content: flex-end;
  padding: 0 0 10px;
}

.student-board-page #studentBoardList {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 7px;
}

.student-board-page .student-board-list-button {
  width: auto;
  min-width: 210px;
  margin: 0;
}

.student-board-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 4px 13px;
}

.student-board-detail-header > div:first-child > span,
.student-board-view-policy span {
  color: #607291;
  font-size: 10px;
  font-weight: 850;
}

.student-board-detail-header h2 {
  margin: 5px 0;
  color: #11213e;
  font-size: 25px;
}

.student-board-view-policy {
  display: grid;
  min-width: 136px;
  gap: 4px;
  border: 1px solid #d6dfeb;
  border-radius: 11px;
  background: #f7f9fd;
  padding: 10px 14px;
  text-align: right;
}

.student-board-view-policy strong {
  color: #345fc2;
  font-size: 15px;
}

.student-board-state {
  margin: 0 4px 12px;
  border-left: 3px solid #5377cf;
  color: #5d6b80;
  background: #f5f8fe;
  padding: 9px 12px;
  font-size: 12px;
}

.student-board-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto 110px;
  gap: 10px;
  border: 1px solid #d7e0eb;
  border-radius: 13px;
  background: #fff;
  padding: 10px;
}

.student-board-toolbar label:first-child {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  padding: 0 10px;
}

.student-board-toolbar label:first-child i {
  color: #70809a;
}

.student-board-toolbar input,
.student-board-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 0;
  color: #1c2b45;
  background: transparent;
  padding: 0 8px;
}

.student-board-toolbar label:nth-child(2) {
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  padding: 0 8px;
}

.student-board-toolbar output {
  display: grid;
  place-items: center;
  color: #66758b;
  font-size: 12px;
  font-weight: 800;
}

.student-board-page .student-board-shelves button[data-selected="true"] {
  border-color: #3d65c4;
  color: #fff;
  background: #3d65c4;
}

.student-board-page .student-board-post-list {
  margin-top: 14px;
}

.student-board-post-list[data-view="gallery"],
.student-board-post-list[data-view="shelf"] {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}

.student-board-post-list[data-view="detail"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-board-page .student-board-post-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-color: #d9e1eb;
  border-radius: 14px;
  padding: 13px;
  box-shadow: 0 6px 18px rgba(37, 54, 88, .07);
}

.student-board-page .student-board-post-card h3 {
  order: 0;
  color: #172745;
  font-size: 16px;
}

.student-board-page .student-board-meta {
  order: 1;
}

.student-board-page .student-board-post-copy {
  order: 3;
  color: #56657a;
  line-height: 1.55;
}

.student-board-post-list[data-view="gallery"] .student-board-post-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.student-board-page .board-file-gallery {
  order: 2;
  grid-template-columns: 1fr;
  margin-top: 0;
}

.student-board-page .board-file-card {
  border: 0;
  background: #f4f6fa;
  padding: 0;
}

.student-board-page .board-file-card img {
  display: block;
  max-height: 270px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
}

.student-board-page .board-file-image-link {
  display: block;
}

.student-board-page .board-file-card > strong,
.student-board-page .board-file-card > span,
.student-board-page .board-file-card > .board-row-actions {
  display: none;
}

.student-board-page .student-board-post-counts {
  order: 4;
}

.student-board-post-list[data-view="detail"] .board-file-card img {
  max-height: 320px;
  object-fit: contain;
}

.student-board-page .board-row-actions {
  order: 5;
  margin-top: auto;
  padding-top: 9px;
}

.student-board-page .board-row-actions .compact-button {
  min-height: 39px;
  border-color: #d7e0eb;
  color: #36558f;
  background: #f8faff;
}

.student-board-compose {
  position: fixed;
  right: 34px;
  bottom: 28px;
  z-index: 8;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #3c61c7;
  padding: 0 22px;
  box-shadow: 0 10px 28px rgba(51, 81, 166, .28);
  font-weight: 900;
  cursor: pointer;
}

.student-board-page .student-board-post-form,
.student-board-page .student-board-record-form,
.student-board-page .student-board-comment-form,
.student-board-page #studentBoardCommentPanel {
  border: 1px solid #d6deea;
  background: #f8faff;
}

body.student-board-page[data-board-theme="dark"] {
  color: #dce7f6;
  background: #071321;
}

.student-board-page[data-board-theme="dark"] .student-board-header {
  border-color: #263b56;
}

.student-board-page[data-board-theme="dark"] .student-board-heading h1,
.student-board-page[data-board-theme="dark"] .student-board-detail-header h2,
.student-board-page[data-board-theme="dark"] .student-board-post-card h3 {
  color: #eef5ff;
}

.student-board-page[data-board-theme="dark"] .student-board-home,
.student-board-page[data-board-theme="dark"] .student-board-role,
.student-board-page[data-board-theme="dark"] #studentBoardBrowse,
.student-board-page[data-board-theme="dark"] #studentBoardThemeToggle,
.student-board-page[data-board-theme="dark"] .student-board-guide,
.student-board-page[data-board-theme="dark"] .student-board-guide li,
.student-board-page[data-board-theme="dark"] .student-board-list-card,
.student-board-page[data-board-theme="dark"] .student-board-detail,
.student-board-page[data-board-theme="dark"] .student-board-toolbar,
.student-board-page[data-board-theme="dark"] .student-board-post-card {
  border-color: #293e59;
  color: #d8e4f3;
  background: #0d1b2d;
}

.student-board-page[data-board-theme="dark"] .student-board-toolbar label,
.student-board-page[data-board-theme="dark"] .student-board-view-policy,
.student-board-page[data-board-theme="dark"] .student-board-list-button,
.student-board-page[data-board-theme="dark"] .student-board-post-form,
.student-board-page[data-board-theme="dark"] .student-board-record-form,
.student-board-page[data-board-theme="dark"] .student-board-comment-form,
.student-board-page[data-board-theme="dark"] #studentBoardCommentPanel,
.student-board-page[data-board-theme="dark"] .board-file-card {
  border-color: #2b425e;
  color: #d8e4f3;
  background: #101f33;
}

.student-board-page[data-board-theme="dark"] input,
.student-board-page[data-board-theme="dark"] select,
.student-board-page[data-board-theme="dark"] textarea {
  border-color: #38516e;
  color: #e4edf8;
  background: #0a1625;
}

.student-board-page[data-board-theme="dark"] .student-board-post-copy,
.student-board-page[data-board-theme="dark"] .student-board-meta,
.student-board-page[data-board-theme="dark"] .student-board-heading > p:last-child,
.student-board-page[data-board-theme="dark"] .student-board-guide span,
.student-board-page[data-board-theme="dark"] .management-message {
  color: #8ea3bd;
}

.student-board-page[data-board-theme="dark"] .student-board-state {
  color: #9fb2c9;
  background: #10233b;
}

@media (max-width: 1380px) {
  .board-admin-page .teacher-mode-copy {
    gap: 54px;
  }

  .board-admin-overview {
    grid-template-columns: 1fr;
  }

  .board-admin-stats {
    width: 100%;
  }

  .board-admin-guide {
    overflow: hidden;
  }

  .board-admin-guide > ol {
    grid-template-columns: repeat(5, minmax(145px, 1fr));
    overflow-x: auto;
  }

}

@media (max-width: 900px) {
  .student-board-page .student-board-shell {
    width: calc(100% - 24px);
    padding-top: 14px;
  }

  .student-board-page .student-board-guide {
    overflow: hidden;
  }

  .student-board-page .student-board-guide > ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-board-toolbar {
    grid-template-columns: minmax(0, 1fr) 138px;
  }

  .student-board-toolbar output {
    grid-column: 1 / -1;
    justify-content: end;
  }

  .student-board-post-list[data-view="gallery"],
  .student-board-post-list[data-view="shelf"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (orientation: portrait) {
  .student-board-post-list[data-view="detail"] {
    grid-template-columns: 1fr;
  }

}