:root {
--md-surface: #ffffff;
--md-on-surface: #1f2937;
--md-outline: #e5e7eb;
--md-outline-strong: #d1d5db;
--md-primary: #fff5b3;
--md-primary-variant: #f3f4f6;
--md-secondary: #455a64;
--md-muted: #6b7280;
--md-success: #2e7d32;
--md-danger: #c62828;
--md-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
--md-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
--md-radius: 4px;
}
.board-wrapper {
margin: 0 auto;
border-radius: 4px;
}
.board-list-toolbar[x-cloak] {
display: none !important;
}
.board-list-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
min-height: 34px;
margin: 0 0 10px;
padding: 0;
box-sizing: border-box;
color: #59616f;
font-size: 13px;
font-family: inherit;
line-height: 1.2;
white-space: nowrap;
}
.board-notice-toggle {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: 6px;
height: 24px;
margin: 0;
padding: 0;
color: inherit;
font: inherit;
line-height: inherit;
cursor: pointer;
user-select: none;
}
.board-notice-toggle input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
border: 0;
white-space: nowrap;
}
.board-notice-checkbox {
position: relative;
display: inline-block;
flex: 0 0 17px;
width: 17px;
height: 17px;
box-sizing: border-box;
border: 1px solid #cbd1da;
border-radius: 4px;
background: #fff;
}
.board-notice-toggle input:not(:disabled) + .board-notice-checkbox:hover {
border-color: #1683ff;
}
.board-notice-toggle input:checked + .board-notice-checkbox {
border-color: #1683ff;
background: #1683ff;
}
.board-notice-toggle input:checked + .board-notice-checkbox::after {
position: absolute;
top: 3px;
left: 5px;
width: 4px;
height: 7px;
border: solid #fff;
border-width: 0 2px 2px 0;
content: "";
transform: rotate(45deg);
}
.board-notice-toggle input:focus-visible + .board-notice-checkbox {
outline: 2px solid rgba(22, 131, 255, 0.28);
outline-offset: 2px;
}
.board-notice-label {
display: inline-block;
}
.board-toolbar-divider {
display: inline-block;
flex: 0 0 1px;
width: 1px;
height: 16px;
margin: 0 12px;
background: #dfe3e8;
}
.board-notice-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
max-width: 120px;
height: 22px;
padding: 0 7px;
overflow: hidden;
box-sizing: border-box;
border: 1px solid #1683ff;
border-radius: 999px;
background: transparent;
color: #1683ff;
font-size: 12px;
font-weight: 400;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.board-view-mode {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: 8px;
height: 24px;
}
.board-list-toolbar .board-view-mode-button {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
width: 18px;
min-width: 18px;
height: 20px;
min-height: 20px;
margin: 0;
padding: 2px;
border: 0;
border-radius: 3px;
background: transparent;
color: #9ca3af;
font: inherit;
line-height: 1;
cursor: pointer;
box-shadow: none;
}
.board-list-toolbar .board-view-mode-button svg {
display: block;
width: 14px;
height: 14px;
flex: 0 0 14px;
fill: currentColor;
overflow: visible;
}
.board-list-toolbar .board-view-mode-button[data-view-mode="list"] svg path {
fill: none;
stroke: #fff;
stroke-width: 1.3;
stroke-linecap: round;
}
.board-list-toolbar .board-view-mode-button:hover {
background: #f3f4f6;
color: #6b7280;
}
.board-list-toolbar .board-view-mode-button.is-active {
color: #1683ff;
}
.board-list-filter {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
height: 24px;
margin: 0;
padding: 0;
}
.board-list-toolbar .board-list-filter select {
-webkit-appearance: none;
appearance: none;
width: 54px;
min-width: 54px;
height: 24px;
margin: 0;
padding: 0 18px 0 5px;
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
color: #59616f;
font: inherit;
line-height: 24px;
cursor: pointer;
box-shadow: none;
}
.board-list-toolbar .board-list-filter select:hover:not(:disabled) {
color: #17191c;
}
.board-list-filter svg {
position: absolute;
top: 50%;
right: 0;
width: 10px;
height: 6px;
fill: none;
stroke: #9ca3af;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transform: translateY(-50%);
pointer-events: none;
}
.board-list-toolbar .board-toolbar-write {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
flex: 0 0 auto;
margin-left: 16px;
background: #1683ff !important;
color: #fff !important;
}
.board-list-toolbar .board-toolbar-write:hover {
border-color: #0f73df !important;
background: #0f73df !important;
}
.tbl_board {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
background: #fff;
overflow: hidden;
}
.tbl_board thead {
height: 52px;
}
.tbl_board thead th {
height: 52px;
box-sizing: border-box;
border-top: 1px solid var(--md-outline);
border-bottom: 1px solid var(--md-outline);
border-right: 0;
border-left: 0;
}
.tbl_board .col-select { width: 44px; text-align: center; }
.tbl_board .col-category { width: 120px; font-weight: 500 !important; }
.tbl_board .col-subject { text-align: left; padding-left: 14px; font-weight: 500 !important; }
.tbl_board .col-author { width: 160px;  font-weight: 500 !important; }
.tbl_board .col-date,
.tbl_board .col-hit,
.tbl_board .col-recommend { width: 100px; font-weight: 500 !important; }
.tbl_board tbody td {
padding: 12px 14px;
font-size: 14px;
color: #111827;
vertical-align: middle;
}
.tbl_board .cell-select,
.tbl_board .cell-category,
.tbl_board .cell-author,
.tbl_board .cell-date,
.tbl_board .cell-hit,
.tbl_board .cell-recommend {
text-align: center;
}
.tbl_board .cell-subject {
text-align: left;
}
.tbl_board .cell-date {
white-space: nowrap;
}
.board-subject-row {
display: flex;
align-items: center;
width: 100%;
gap: 6px;
}
.board-author-row {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.board-category-label {
color: var(--tv-admin-text, #555);
font-weight: 600;
}
.board-category-link {
color: var(--tv-admin-text, #080b11);
font-weight: 400;
text-decoration: none;
cursor: pointer;
}
.tbl_board tbody .cell-category,
.tbl_board tbody .cell-author,
.tbl_board tbody .cell-date,
.tbl_board tbody .cell-hit,
.tbl_board tbody .cell-recommend,
.tbl_board .cell-category .board-category-label,
.tbl_board .cell-category .board-category-link {
color: var(--tv-admin-text, #59616f) !important;
}
.tbl_board tbody tr.board-empty-row,
.tbl_board tbody tr.board-empty-row:hover {
border: 0;
background: #fff !important;
}
.tbl_board .board-list-empty {
padding: 0;
border: 0;
border-radius: 0;
background: #fff;
}
.board-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
width: 100%;
min-height: 230px;
box-sizing: border-box;
padding: 40px 20px;
background: #fff;
text-align: center;
}
.board-empty-state > .board-empty-icon {
display: block;
flex: 0 0 auto;
width: 64px;
height: 64px;
color: #e1e4eb;
}
.board-empty-state > .board-empty-message {
margin: 0;
padding: 0;
color: #59616f;
font-family: inherit;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
overflow-wrap: anywhere;
}
.board-list-deleted-title {
color: #999;
}
.board-post-icon {
width: 18px;
height: 18px;
vertical-align: middle;
}
.board-comment-count {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
height: 18px !important;
min-height: 18px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
color: #758195 !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 18px !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
.board-comment-icon {
display: block !important;
flex: 0 0 18px !important;
margin: 0 2px 0 0 !important;
padding: 0 !important;
align-self: center !important;
}
.board-viewing-badge {
display: inline-flex !important;
flex: 0 0 auto;
align-items: center !important;
justify-content: center !important;
height: 22px !important;
min-height: 22px !important;
margin: 0 2px 0 5px !important;
padding: 0 7px !important;
box-sizing: border-box !important;
border: 1px solid #ef4444 !important;
border-radius: 999px !important;
background: transparent !important;
color: #ef4444 !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 20px !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
.tbl_board tbody tr:nth-child(odd) {
background: #fcfdff;
}
.tbl_board tbody tr:hover {
background: #eef2ff !important;
}
.tbl_board tbody td a[data-action="view"] {
color: #59616f;
font-size: 14px;
text-decoration: none;
font-weight: 400;
transition: color 0.12s ease, text-shadow 0.12s ease;
}
.tbl_board input[type="checkbox"] {
width: 18px;
height: 18px;
vertical-align: middle;
accent-color: var(--md-primary);
}
.board-wrapper input[type="checkbox"]:is(.post-check, [data-role="check-all"]) {
-webkit-appearance: none;
appearance: none;
display: inline-block;
box-sizing: border-box;
padding: 0;
border: 1px solid #cbd1da;
border-radius: 4px;
background: #fff center / 12px 12px no-repeat;
vertical-align: middle;
cursor: pointer;
}
.board-wrapper input[type="checkbox"]:is(.post-check, [data-role="check-all"]):hover:not(:disabled),
.board-gallery-check:hover .post-check:not(:disabled),
.board-webzine-check:hover .post-check:not(:disabled) {
border-color: #1683ff;
}
.board-wrapper input[type="checkbox"]:is(.post-check, [data-role="check-all"]):checked,
.board-wrapper input[type="checkbox"]:is(.post-check, [data-role="check-all"]):indeterminate {
border-color: #1683ff;
background-color: #1683ff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l2.5 2.5L10 3' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.board-wrapper input[type="checkbox"]:is(.post-check, [data-role="check-all"]):indeterminate {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.board-wrapper input[type="checkbox"]:is(.post-check, [data-role="check-all"]):focus-visible {
outline: 2px solid rgba(22, 131, 255, 0.28);
outline-offset: 2px;
}
.board-wrapper input[type="checkbox"]:is(.post-check, [data-role="check-all"]):disabled {
opacity: 0.5;
cursor: default;
}
#list-check-all-top {
cursor: pointer;
}
.pagination {
margin-top: 40px;
margin-bottom: 40px;
text-align: center;
display: flex;
gap: 0;
justify-content: center;
flex-wrap: wrap;
}
.pagination a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 10px;
margin: 0;
border-radius: 9px;
border: none;
background: transparent;
color: #59616f;
text-decoration: none;
font-size: 14px;
line-height: 1;
box-sizing: border-box;
}
.pagination a.pagination-nav {
min-width: 50px;
height: 32px;
margin: 0 4px;
padding: 0 12px;
border: 1px solid #dfe3e8;
border-radius: 7px;
background: #fff;
color: #59616f;
font-size: 13px;
font-weight: 500;
line-height: 30px;
}
.pagination a.pagination-nav:hover {
border-color: #d5d9df;
background: #f3f4f6;
}
.pagination a:hover {
border-color: var(--md-outline);
background-color: #e5e7ea;
}
.pagination a.is-current {
background: #1683ff !important;
color: #fff !important;
border-color: #1683ff !important;
font-weight: 500 !important;
}
#board-loading[x-show],
#board-loading {
margin-top: 10px;
display: none;
}
#board-loading[x-show="true"],
#board-loading[style*="display: block"] {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 9999px;
background: #eef2ff;
color: #1e3a8a;
font-weight: 600;
}
.member-icon-board {
width: 28px;
height: 28px;
border-radius: 50%;
vertical-align: middle;
margin-right: 6px;
object-fit: cover;
object-position: center;
display: block;
}
.btn-wrap {
display: flex;
justify-content: flex-end;
padding: 10px 0px;
}
.tbl_board .board-subject-row .board-comment-count {
color: #1683ff !important;
font-size: 13px !important;
font-weight: 600 !important;
}
.tbl_board .board-subject-row > .board-post-icon {
order: 1;
}
.tbl_board .board-subject-row > .board-viewing-badge {
order: 2;
}
.tbl_board .board-comment-count .board-comment-icon {
display: none !important;
}
.tbl_board .board-comment-count {
font-weight: 500 !important;
}
.board-secret-icon {
display: inline-block;
width: 1em;
height: 1em;
min-width: 14px;
min-height: 14px;
flex: 0 0 auto;
margin-right: .3em;
vertical-align: -.12em;
color: var(--board-secret-icon-color, currentColor);
fill: none;
stroke: currentColor;
}
.board-secret-denied { padding: 32px 16px; color: var(--md-on-surface, inherit); }
.board-secret-option { display: flex; align-items: center; gap: 6px; margin: 12px 0; }
.board-secret-option > .board-secret-label { display: inline-flex; align-items: center; gap: 2px; }
.board-secret-label > .board-secret-icon { margin-right: 0; }
.board-gallery-title-row > .board-title-with-secret,
.board-webzine-title-row > .board-title-with-secret {
flex: 0 1 auto;
}
.board-subject-row > .board-secret-icon,
.board-gallery-title-row > .board-secret-icon,
.board-webzine-title-row > .board-secret-icon {
margin: 0;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .pagination a.is-current {
background: var(--tv-admin-menu-active-text, #1683ff) !important;
border-color: var(--tv-admin-menu-active-text, #1683ff) !important;
color: #fff !important;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-list-toolbar .board-view-mode-button:is(.is-active, :hover) {
color: var(--tv-admin-menu-active-text, #1683ff);
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-comment-count {
color: var(--tv-admin-menu-active-text, #1683ff) !important;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-empty-state > .board-empty-message {
color: var(--tv-admin-text, #59616f) !important;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-list-toolbar .board-list-filter select:not(:hover) {
color: var(--tv-admin-text, #59616f) !important;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-list-toolbar .board-list-filter > svg {
stroke: var(--tv-admin-text, #9ca3af) !important;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-list-toolbar .board-view-mode-button:not(.is-active):not(:hover) {
color: var(--tv-admin-text, #9ca3af) !important;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .pagination a:not(.is-current) {
color: var(--tv-admin-text, #59616f) !important;
}
.board-tabs {
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
margin: 0 0 30px;
padding: 1px 0 0 1px;
gap: 0;
}
.board-tabs > .board-tab {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 140px;
min-width: 0;
min-height: 52px;
box-sizing: border-box;
margin: -1px 0 0 -1px;
padding: 10px 8px;
border: 1px solid #ddd;
border-radius: 0;
background: #f9f9f9;
color: #59616f;
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
text-align: center;
text-decoration: none;
white-space: normal;
overflow-wrap: anywhere;
}
.board-tabs > .board-tab:not(.is-active):hover {
color: #1683ff;
}
.board-tabs > .board-tab.is-active {
border-top-color: #1683ff;
border-bottom-color: #fff;
background: #fff;
color: #1683ff;
}
.board-tabs > .board-tab.is-active::before {
position: absolute;
top: -1px;
right: -1px;
left: -1px;
height: 2px;
background: #1683ff;
content: "";
}
.board-tabs > a.board-tab:focus-visible {
outline: 2px solid #1683ff;
outline-offset: -5px;
}
.board-category-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
width: 100%;
box-sizing: border-box;
margin: 0 0 10px;
padding: 0 0 26px;
border-bottom: 1px solid #eee;
}
.board-category-preview {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
margin: 0;
padding: 0;
}
.board-activity-summary {
display: flex;
flex: 0 1 auto;
align-items: center;
justify-content: flex-end;
max-width: 100%;
margin-left: auto;
font-size: 13px;
color: #59616f;
}
.board-activity-summary > div > span {
position: relative;
}
.board-activity-summary > div > span > span:last-child,
.board-activity-summary > div > span > span:last-child strong,
.board-activity-summary > div > span > span:last-child span {
font-weight: 400;
}
.board-activity-summary .is-positive-point {
color: #1683ff;
}
.board-activity-summary > div > span:hover {
color: #17191c;
cursor: pointer;
}
.board-activity-summary > div > span:hover .board-activity-number {
color: #0047ab;
}
.board-activity-summary > div > span > .board-activity-values,
.board-activity-summary > div > span:hover .board-activity-values > strong .board-activity-number {
color: inherit;
}
.board-activity-summary > div > span + span::before {
position: absolute;
top: 50%;
left: -10.5px;
width: 1px;
height: 22px;
background: #d1d5db;
transform: translateY(-50%);
pointer-events: none;
content: "";
}
.board-category-preview > .board-category-button {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
box-sizing: border-box;
margin: 0;
padding: 7px 15px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background: #fff;
color: #59616f;
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1;
text-align: center;
white-space: nowrap;
box-shadow: none;
}
.board-category-preview > .board-category-button:not(.is-active):hover {
color: #1683ff;
}
.board-category-preview > .board-category-button.is-active {
border-color: #1683ff;
color: #1683ff;
}
.board-category-preview > .board-category-button:focus-visible {
outline: 2px solid #1683ff;
outline-offset: 2px;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-tabs > .board-tab.is-active {
color: var(--tv-admin-menu-active-text, #1683ff) !important;
border-top-color: var(--tv-admin-menu-active-text, #1683ff);
outline-color: var(--tv-admin-menu-active-text, #1683ff);
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-tabs > .board-tab.is-active::before {
background: var(--tv-admin-menu-active-text, #1683ff);
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-category-preview > .board-category-button.is-active {
color: var(--tv-admin-menu-active-text, #1683ff) !important;
border-color: var(--tv-admin-menu-active-text, #1683ff);
outline-color: var(--tv-admin-menu-active-text, #1683ff);
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-tabs > .board-tab:not(.is-active),
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-category-preview > .board-category-button:not(.is-active) {
color: var(--tv-admin-text, #59616f) !important;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-tabs > .board-tab:not(.is-active):hover,
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-category-preview > .board-category-button:not(.is-active):hover {
color: var(--tv-admin-hover, #f0f0f0) !important;
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-activity-summary > div > span:nth-child(-n+2) .is-positive-point,
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-activity-summary > div > span:nth-child(-n+2):hover .board-activity-number.is-positive-point {
color: var(--tv-admin-menu-active-text, #1683ff);
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-activity-summary > div > span:nth-child(3) > span:last-child > strong .board-activity-number {
color: var(--tv-admin-menu-active-text, #1683ff);
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .board-wrapper .board-activity-summary {
color: var(--tv-admin-text, #59616f);
}
.btn-home {
cursor: pointer;
background: #03C75A1F !important;
color: #009f47 !important;
min-width: 46px;
height: 36px;
margin-left: 10px;
padding: 0 12px !important;
font-size: 13px;
line-height: 36px;
display: inline-block;
border-radius: 6px;
box-sizing: border-box;
text-align: center;
vertical-align: top;
border: none;
margin: 0px;
font-weight: 500;
}
.btn-home:hover {
background: var(--md-primary-variant);
}
.btn-mod {
height: 36px;
padding: 8px 14px;
border: 0;
border-radius: 4px;
background: var(--md-primary);
color: #111;
font-weight: 500;
cursor: pointer;
font-size: 14px;
}
.btn-mod:hover {
background: var(--md-primary-variant);
}
.btn-del {
height: 36px;
padding: 8px 14px;
border: 0;
border-radius: 4px;
background: var(--md-primary);
color: #111;
font-weight: 500;
cursor: pointer;
font-size: 14px;
}
.btn-del:hover {
background: var(--md-primary-variant);
}
.board-form-actions {
display: flex;
align-items: center;
gap: 8px;
margin: 15px 0;
}
.board-form-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 84px;
height: 36px;
box-sizing: border-box;
margin: 0;
padding: 0 12px !important;
border-radius: 7px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 30px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
#submitBtn.board-form-submit {
border: 1px solid #1683ff;
background: #1683ff;
color: #fff;
}
#submitBtn.board-form-submit > svg {
width: 17px;
height: 17px;
}
#submitBtn.board-form-submit:hover {
border-color: #0f73df;
background: #0f73df;
}
.board-form-cancel {
min-width: 50px;
border: 1px solid #dfe3e8;
background: #fff;
color: #566170;
}
.board-form-cancel:hover {
border-color: #d5d9df;
background: #f3f4f6;
color: #566170;
}
.new_btn {
background: #03C75A1F !important;
color: #009f47 !important;
min-width: 46px;
height: 36px;
margin-left: 10px;
padding: 0 12px !important;
font-size: 13px;
line-height: 36px;
display: inline-block;
border-radius: 6px;
box-sizing: border-box;
text-align: center;
vertical-align: top;
border: none;
margin: 0px;
font-weight: 500;
}
.btn_write {
background: #03C75A1F !important;
color: #009f47 !important;
min-width: 46px;
height: 36px;
margin-left: 10px;
padding: 0 12px !important;
font-size: 13px;
line-height: 36px;
display: inline-block;
border-radius: 6px;
box-sizing: border-box;
font-weight: 700;
text-align: center;
vertical-align: top;
border: none;
margin: 0px;
font-weight: 500;
}
.btn-file {
background: #03C75A1F !important;
color: #009f47 !important;
min-width: 46px;
height: 36px;
margin-left: 10px;
padding: 0 12px !important;
font-size: 13px;
line-height: 36px;
display: inline-block;
border-radius: 6px;
box-sizing: border-box;
font-weight: 700;
text-align: center;
vertical-align: top;
border: none;
margin: 0px;
font-weight: 500;
}
.btn-file:hover {
background: var(--md-primary-variant);
}
.btn-copy,
.btn-move {
cursor: pointer;
font-weight: 500;
background: #eff0f2;
color: #000;
border: none;
border-radius: 6px;
min-width: 46px;
height: 36px;
padding: 0 12px;
font-size: 13px;
line-height: 36px;
}
.list-bulk-controls {
display: flex;
align-items: center;
gap: 8px;
}
.list-bulk-controls .btn_bulk_hide,
.list-bulk-controls .btn_bulk_delete,
.list-bulk-controls .btn_bulk_copy,
.list-bulk-controls .btn_bulk_move {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
height: 32px;
box-sizing: border-box;
margin: 0;
padding: 0 12px !important;
border: 1px solid #dfe3e8 !important;
border-radius: 7px;
background: #fff !important;
color: #566170 !important;
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 30px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.list-bulk-controls .btn_bulk_hide:hover,
.list-bulk-controls .btn_bulk_delete:hover,
.list-bulk-controls .btn_bulk_copy:hover,
.list-bulk-controls .btn_bulk_move:hover {
border-color: #d5d9df !important;
background: #f3f4f6 !important;
color: #566170 !important;
}
#search-controls a {
height: 36px;
padding: 0 10px;
border-radius: 4px;
color: var(--md-secondary);
text-decoration: none;
transition: background 0.12s ease;
}
#search-controls form {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
#search-controls label {
font-size: 13px;
color: var(--md-muted);
}
#search-controls input[type="text"],
#search-controls select {
height: 36px;
padding: 0 10px;
border: 1px solid var(--md-outline-strong);
border-radius: 4px;
outline: none;
background: #fff;
}
#search-controls input[type="text"]:focus,
#search-controls select:focus {
border-color: var(--md-primary);
box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
}
#btn-search {
height: 36px;
padding: 0 14px;
border: 0;
border-radius: 4px;
background: var(--md-primary);
color: #111;
font-weight: 500;
cursor: pointer;
font-size: 14px;
}
#btn-search:hover {
background: var(--md-primary-variant);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: #fff;
padding: 24px 20px;
border-radius: 10px;
width: 320px;
max-width: 90%;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
text-align: center;
animation: fadeIn 0.25s ease;
}
.modal-content h2 {
font-size: 18px;
margin-bottom: 12px;
font-weight: bold;
}
.modal-content p {
font-size: 14px;
color: #555;
margin-bottom: 16px;
}
.modal-content button {
background: #333;
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 14px;
cursor: pointer;
transition: background 0.2s ease;
}
.modal-content button:hover {
background: #555;
}
.board-list {
margin: 8px 0 16px;
max-height: 220px;
overflow: auto;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.board-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
gap: 12px;
border-bottom: 1px solid #f0f2f5;
}
.board-row:last-child {
border-bottom: none;
}
.board-name {
font-size: 14px;
}
.modal-actions {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 8px;
}
.modal-actions .btn {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
border: 1px solid var(--md-outline-strong);
background: #fafafa;
color: var(--md-secondary);
cursor: pointer;
}
.modal-actions .btn:hover {
background: #f3f4f6;
}
.btn {
background: #333;
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 14px;
cursor: pointer;
}
.btn:hover {
background: #555;
}
.btn-secondary {
background: #7a7a7a;
}
.btn-secondary:hover {
background: #909090;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.board-secret-dialog {
box-sizing: border-box;
position: fixed;
inset: 0;
width: min(320px, calc(100% - 40px));
max-height: calc(100% - 40px);
margin: auto;
padding: 28px 24px 22px;
border: 1px solid var(--md-outline, #e5e7eb);
border-radius: 12px;
background: var(--md-surface, #fff);
color: var(--md-on-surface, #1f2937);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
text-align: center;
}
.board-secret-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.board-secret-dialog p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; }
.board-secret-dialog button {
min-width: 80px;
min-height: 38px;
padding: 8px 20px;
border: 1px solid var(--md-outline-strong, #d1d5db);
border-radius: 6px;
background: var(--md-primary-variant, #f3f4f6);
color: inherit;
font: inherit;
cursor: pointer;
}
.board-secret-dialog button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.board-secret-dialog button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
min-height: 32px;
height: 32px;
box-sizing: border-box;
margin: 0;
padding: 0 12px;
border: 1px solid #dfe3e8;
border-radius: 7px;
background: #fff;
color: #59616f;
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 30px;
text-align: center;
text-decoration: none;
}
.board-secret-dialog button:hover {
border-color: #d5d9df;
background: #f3f4f6;
color: #59616f;
}
.board-comment-login-dialog {
box-sizing: border-box;
position: fixed;
inset: 0;
width: min(320px, calc(100% - 40px));
max-height: calc(100% - 40px);
margin: auto;
padding: 38px 24px 32px;
border: 1px solid var(--md-outline, #e5e7eb);
border-radius: 12px;
background: var(--md-surface, #fff);
color: #080b11;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
text-align: center;
}
.board-comment-login-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.board-comment-login-dialog p { margin: 0 0 52px; font-size: 14px; line-height: 25.6px; }
.board-comment-login-actions { display: flex; justify-content: center; gap: 8px; }
.board-comment-login-dialog .board-comment-login-actions > * {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 64px;
height: 36px;
margin: 0;
padding: 0 12px;
border: 1px solid #dfe3e8;
border-radius: 7px;
background: #fff;
color: #080b11;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 34px;
text-decoration: none;
cursor: pointer;
}
.board-comment-login-dialog .board-comment-login-primary {
border-color: #1683ff;
background: #1683ff;
color: #fff;
}
.board-comment-login-dialog .board-comment-login-primary:hover { border-color: #0f73df; background: #0f73df; }
.board-comment-login-dialog .board-comment-login-cancel:hover { border-color: #d5d9df; background: #f3f4f6; }
.board-comment-login-actions > :focus-visible { outline: 2px solid #1683ff; outline-offset: 3px; }
.ney-comment-container {
width: 100%;
max-width: 100%;
width: 100%;
background-color: #f6f6f9;
border-radius: 0.75rem;
padding: 1.5rem;
border: 1px solid #f3f4f6;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}
.ney-comment-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
cursor: default;
}
.ney-header-title {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ney-header-text {
font-size: 1.125rem;
font-weight: 400;
color: #1f2937;
}
.ney-header-toggle {
color: #9ca3af;
transition: color 0.2s;
}
.ney-comment-header:hover .ney-header-toggle {
color: #4b5563;
}
.ney-input-section {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
}
.ney-avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
background-color: #9ca3af;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
}
.ney-avatar i {
font-size: 1.125rem;
}
.ney-input-wrapper {
flex-grow: 1;
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
transition: all 0.2s;
box-sizing: border-box;
}
.ney-input-wrapper:focus-within {
border-color: #60a5fa;
box-shadow: 0 0 0 1px #dbeafe;
}
.ney-comment-textarea {
width: 100%;
resize: none;
border: none;
outline: none;
color: #374151;
background: transparent;
font-size: 14px;
font-family: inherit;
box-sizing: border-box;
display: block;
line-height: 1.5;
}
.ney-comment-textarea::placeholder {
color: #9ca3af;
}
.ney-comment-textarea::-webkit-scrollbar {
width: 6px;
}
.ney-comment-textarea::-webkit-scrollbar-thumb {
background-color: #e5e7eb;
border-radius: 3px;
}
.ney-input-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
padding-top: 0;
}
.ney-tool-icons {
display: flex;
align-items: center;
gap: 1rem;
color: #9ca3af;
}
.ney-tool-icon-btn {
padding: 0;
width: 18px;
height: 18px;
font-size: 18px;
color: #9ca3af;
transition: color 0.2s;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ney-tool-icon-btn i {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 18px;
display: block;
}
.ney-tool-icon-btn:hover {
color: #4b5563;
}
.ney-submit-btn {
width: 48px;
height: 32px;
padding: 0;
font-size: 13px;
font-weight: 700;
border-radius: 0.375rem;
transition: all 0.2s;
background-color: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.ney-submit-btn.ney-active {
background-color: #3b82f6;
color: white;
cursor: pointer;
}
.ney-submit-btn.ney-active:hover {
background-color: #2563eb;
}
.ney-filter-section {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-left: 1rem;
font-size: 0.875rem;
}
.ney-filter-btn {
display: flex;
align-items: center;
gap: 0.25rem;
color: #9ca3af;
transition: color 0.2s;
border: none;
background: transparent;
cursor: pointer;
font-size: inherit;
padding: 0;
}
.ney-filter-btn.ney-active {
color: #1f2937;
font-weight: 500;
}
.ney-filter-btn:hover {
color: #4b5563;
}
.ney-comment-list {
display: flex;
flex-direction: column;
gap: 0rem;
padding-left: 2rem;
}
.ney-comment-item {
display: flex;
gap: 1rem;
}
.ney-comment-content {
flex-grow: 1;
}
.ney-comment-meta-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: -0.2rem;
}
.ney-user-info {
display: flex;
align-items: center;
gap: 0.2rem;
}
.ney-username {
font-weight: 400;
color: #374151;
font-size: 0.875rem;
}
.ney-divider-dot {
color: #d1d5db;
font-size: 0.75rem;
margin: 0 0.25rem;
}
.ney-timestamp {
font-size: 0.75rem;
color: #9ca3af;
}
.ney-more-btn {
color: #d1d5db;
padding: 0;
width: 28px;
height: 28px;
border-radius: 50%;
transition: all 0.2s;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ney-more-btn:hover {
color: #4b5563;
background-color: #f3f4f6;
}
.ney-comment-text {
color: #4b5563;
font-size: 14px;
line-height: 1.4;
margin-top: 0rem;
margin-bottom: 0.65rem;
white-space: normal;
}
.ney-comment-actions {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
color: #9ca3af;
}
.ney-action-btn {
display: flex;
align-items: center;
gap: 0.375rem;
transition: all 0.2s;
background: none;
border: none;
cursor: pointer;
color: inherit;
font-size: inherit;
padding: 6px 8px;
border-radius: 4px;
margin-left: -8px;
}
.ney-action-btn + .ney-divider-dot + .ney-action-btn {
margin-left: 0;
}
.ney-action-btn:hover {
color: #4b5563;
background-color: #f3f4f6;
}
.ney-like-btn,
.ney-dislike-btn {
margin-right: 8px;
}
.ney-delete-btn {
margin-left: -16px;
}
.ney-action-btn.ney-like-btn:hover {
color: #3b82f6;
background-color: #eff6ff;
}
.ney-action-btn.ney-like-btn:hover i {
color: #3b82f6;
}
.ney-comment-container .ney-comment-actions > .ney-action-btn:hover {
background-color: transparent;
}
.ney-comment-container .ney-comment-actions > .ney-like-btn,
.ney-comment-container .ney-comment-actions > .ney-dislike-btn {
cursor: pointer !important;
}
.ney-comment-textarea {
outline: none;
box-shadow: none;
}
.ney-relative-wrapper {
position: relative;
}
.ney-flex-center {
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
flex: 0 0 auto;
}
.ney-dropdown-menu {
position: absolute;
top: 32px;
right: 0;
z-index: 60;
min-width: 96px;
padding: 4px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
box-sizing: border-box;
}
.ney-dropdown-item {
display: flex;
align-items: center;
width: 100%;
gap: 6px;
padding: 7px 9px;
border: 0;
border-radius: 4px;
background: transparent;
color: #374151;
font-size: 13px;
line-height: 1.2;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.ney-dropdown-item:hover {
background: #fef2f2;
color: #dc2626;
}
.ney-icon-mr {
flex: 0 0 auto;
width: 14px;
text-align: center;
}
#writeForm #quillEditor .ql-editor {
font-size: 16px;
}
#writeForm #quillEditor .ql-editor.ql-blank::before {
font-style: normal;
}
#writeForm .video-popup > div,
#writeForm .table-popup > div {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
#writeForm .ql-toolbar .video-popup button,
#writeForm .ql-toolbar .table-popup button {
display: inline-flex;
align-items: center;
justify-content: center;
float: none;
flex: 0 0 auto;
width: auto !important;
min-width: 50px;
height: 32px;
box-sizing: border-box;
margin: 0;
padding: 0 12px !important;
border: 1px solid #dfe3e8 !important;
border-radius: 7px;
background: #fff !important;
color: #566170 !important;
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 30px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
#writeForm .ql-toolbar .video-popup button:hover,
#writeForm .ql-toolbar .table-popup button:hover {
border-color: #d5d9df !important;
background: #f3f4f6 !important;
color: #566170 !important;
}
#writeForm .video-popup input,
#writeForm .table-popup input {
height: 32px;
min-width: 0;
box-sizing: border-box;
margin: 0;
padding: 0 10px;
border: 1px solid #dfe3e8;
border-radius: 7px;
background: #fff;
color: #566170;
font-family: inherit;
font-size: 13px;
font-weight: 400;
line-height: normal;
text-align: left;
outline: none;
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#writeForm .video-popup input::placeholder {
color: #9aa3af;
opacity: 1;
}
#writeForm .video-popup input:focus,
#writeForm .table-popup input:focus {
border-color: #1683ff;
box-shadow: 0 0 0 2px rgba(22, 131, 255, 0.12);
}
#writeForm .table-popup > label {
display: grid !important;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
gap: 8px;
color: #566170;
font-size: 13px;
font-weight: 500;
text-align: left;
}
#writeForm .table-popup > label + label {
margin-top: 8px !important;
}
#writeForm .table-popup input {
width: 100% !important;
}
.ql-editor .ql-video {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
display: block;
margin: 10px 0;
}
.board-view .content iframe.ql-video,
.board-view .content iframe[src*="youtube.com/embed"],
.board-view .content iframe[src*="youtube-nocookie.com/embed"] {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9;
height: auto !important;
display: block;
margin: 16px 0;
border: 0;
}
#board-area .board-view > .board-post-heading {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin: 0 0 20px;
padding: 0;
}
#board-area .board-post-heading > .board-post-title {
flex: 1;
min-width: 0;
margin: 0;
color: #59616f;
font-size: 22px;
font-weight: 400;
line-height: 1.35;
overflow-wrap: anywhere;
}
#board-area .board-post-title > span:hover {
color: #17191c;
}
#board-area .board-post-heading > .board-post-notice {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
box-sizing: border-box;
height: 26px;
padding: 0 8px;
background: #fff;
color: #1683ff;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.board-post-heading > .board-gallery-badge {
max-width: 40%;
}
#board-area .board-view > .board-post-meta {
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) auto !important;
align-items: center;
gap: 14px;
padding: 0 0 28px;
margin: 0 0 20px;
}
#board-area .board-post-meta > .board-post-avatar {
display: block;
grid-column: 1;
grid-row: 1;
order: 0;
width: 52px !important;
height: 52px !important;
min-width: 52px;
max-width: 52px;
min-height: 52px;
max-height: 52px;
box-sizing: border-box;
margin: 0 !important;
padding: 0;
border-radius: 50% !important;
overflow: hidden !important;
}
#board-area .board-post-avatar > img {
display: block;
width: 52px !important;
height: 52px !important;
max-width: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: 0;
border-radius: 50% !important;
object-fit: cover;
object-position: center;
}
.board-post-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#board-area .board-post-meta > .board-post-author {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
min-width: 0;
margin: 0;
padding: 0;
text-align: left;
}
.board-post-nickname {
line-height: 1.4;
overflow-wrap: anywhere;
}
.board-post-details {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 0;
line-height: 20px;
overflow-wrap: anywhere;
}
.board-post-hits {
white-space: nowrap;
}
#board-area:has(.board-view) .board-view .board-post-meta .board-post-author > span.board-post-nickname:hover,
#board-area:has(.board-view) .board-view .board-post-meta .board-post-author > .board-post-details > span:not(.board-webzine-dot):hover {
color: #17191c !important;
}
#board-area .board-post-meta > .board-post-meta-actions {
grid-column: 3;
grid-row: 1;
display: flex;
flex: 0 0 auto;
align-items: center;
margin-left: auto;
}
#board-area .board-view > .content {
font-size: 16px;
}
.board-view > .content img:not(.n-deleted-notice-icon) {
display: block;
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.nav-prev-next > a.btn-prev,
.nav-prev-next > a.btn-next {
color: #566170;
}
.nav-prev-next > a.btn-prev:hover,
.nav-prev-next > a.btn-next:hover,
.board-view .btn-scrap:hover {
border-color: #d5d9df !important;
background: #f3f4f6 !important;
color: #566170 !important;
}
.board-post-vote .board-post-vote-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 78px;
min-height: 40px;
box-sizing: border-box;
margin: 0;
padding: 9px 13px;
border: 1px solid #d5dae1;
border-radius: 12px;
background: #fff;
color: #465568;
font-size: 14px;
line-height: 20px;
}
.board-post-vote .board-post-vote-button i {
color: inherit;
font-size: 17px;
line-height: 1;
}
.board-post-vote .board-post-vote-count {
color: inherit;
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-variant-numeric: tabular-nums;
}
.board-post-vote .board-post-vote-button:hover {
border-color: #b8c0cc;
background: #f8fafc;
}
.ney-active-like,
.ney-active-like i { color: #3b82f6 !important; }
.ney-like-btn:hover,
.ney-like-btn:hover i { color: #3b82f6; border-color: #3b82f6; transition: all .2s ease; }
.ney-active-dislike,
.ney-active-dislike i { color: #ef4444 !important; }
.ney-dislike-btn:hover,
.ney-dislike-btn:hover i { color: #ef4444; border-color: #ef4444; transition: all .2s ease; }
.ney-comment-textarea[contenteditable]:empty:before {
content: attr(placeholder);
color: #9ca3af;
display: block;
}
.ney-action-btn:disabled { opacity: .6; cursor: not-allowed; }
.latest_box { height: 100% !important; }
.n-deleted-notice {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
vertical-align: middle !important;
color: #999 !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
.n-deleted-notice-icon {
display: block !important;
width: 17px !important;
height: 17px !important;
flex: 0 0 17px !important;
margin: 0 !important;
padding: 0 !important;
align-self: center !important;
vertical-align: middle !important;
}
.n-deleted-notice-text {
display: inline-block !important;
color: #999 !important;
line-height: 1.2 !important;
vertical-align: middle !important;
margin: 0 !important;
padding: 0 !important;
}
.n-badge {
display: inline-block;
background: transparent;
font-size: 10px;
padding: 1px 6px;
border-radius: 99px;
margin-left: 5px;
margin-right: 2px;
vertical-align: middle;
font-weight: 500;
line-height: 1.2;
}
.n-badge-author { color: #3b82f6; border: 1px solid #3b82f6; }
.n-badge-deleted { color: #f00; border: 1px solid #f00; }
#board-area:has(.board-view) {
--n-board-view-text: var(--tv-admin-text, #59616f);
}
#board-area:has(.board-view) :is(
.board-view,
.board-view > h2,
.board-view > h2 > span:not([style]),
.board-view .board-post-nickname,
.board-view .board-post-details,
.board-view > .meta,
.board-view > .meta > span:not([style*="color:#ddd"]):not(.board-gallery-badge),
.board-view > .meta > span > span:last-child,
.board-view .btn-scrap,
.board-view .ney-more-btn,
.board-view > .content,
.controls .view-control-button,
.nav-prev-next > a,
.attachments,
.attachments button,
.attachments a,
.attachments small,
.ney-comment-container,
.ney-header-text,
.ney-username,
.ney-timestamp,
.ney-comment-text,
.ney-comment-textarea,
.ney-comment-actions,
.ney-filter-btn,
.ney-filter-btn i,
.ney-tool-icon-btn:hover,
.ney-more-btn:hover,
.ney-dropdown-item:not(:hover),
.ney-action-btn:not(.ney-active-like):not(.ney-active-dislike):not(:hover),
.ney-action-btn:not(.ney-like-btn):not(.ney-dislike-btn):hover,
.board-list-bottom .tbl_board th,
.board-list-bottom .tbl_board td,
.board-list-bottom .board-category-label,
.board-list-bottom .board-category-link,
.board-list-bottom .subject-link,
.board-list-bottom .pagination a:not(.is-current)
):where(:not(.n-badge, .n-badge *)) {
color: var(--n-board-view-text) !important;
}
#board-area:has(.board-view) :is(.content, .ney-comment-text, .ney-comment-textarea)
:where(p, div, span, strong, b, em, i, u, s, a, li, ul, ol, blockquote,
pre, code, h1, h2, h3, h4, h5, h6, table, thead, tbody, tr, th, td):not([style*="color"]):not([color]):not([class*="ql-color-"]):not(.n-deleted-notice):not(.n-deleted-notice-text) {
color: inherit !important;
}
#board-area:has(.board-view) :is(.content, .ney-comment-text, .ney-comment-textarea) :is(
[style*="color:#000;" i], [style*="color: #000;" i], [style$="color:#000" i], [style$="color: #000" i],
[style*="color:#000000" i], [style*="color: #000000" i],
[style*="color:#111;" i], [style*="color: #111;" i], [style$="color:#111" i], [style$="color: #111" i],
[style*="color:#222;" i], [style*="color: #222;" i], [style$="color:#222" i], [style$="color: #222" i],
[style*="color:#333;" i], [style*="color: #333;" i], [style$="color:#333" i], [style$="color: #333" i],
[style*="color:#333333" i], [style*="color: #333333" i],
[style*="color:#444;" i], [style*="color: #444;" i], [style$="color:#444" i], [style$="color: #444" i],
[style*="color:#555;" i], [style*="color: #555;" i], [style$="color:#555" i], [style$="color: #555" i],
[style*="color:#666;" i], [style*="color: #666;" i], [style$="color:#666" i], [style$="color: #666" i],
[style*="color:#666666" i], [style*="color: #666666" i],
[style*="color:black" i], [style*="color: black" i],
[style*="color:rgb(0,0,0)" i], [style*="color: rgb(0, 0, 0)" i],
[style*="color:rgb(51,51,51)" i], [style*="color: rgb(51, 51, 51)" i],
[style*="color:rgb(102,102,102)" i], [style*="color: rgb(102, 102, 102)" i],
[color="black" i], [color="#000" i], [color="#000000" i],
[color="#333333" i], [color="#666666" i]
):where(:not(.n-badge, .n-badge *)) {
color: var(--n-board-view-text) !important;
}
#board-area:has(.board-view) .board-post-vote [x-show] {
color: var(--n-board-view-text) !important;
}
.board-post-menu > .ney-more-btn {
width: 40px;
height: 40px;
}
#board-area .board-view .board-post-menu > .ney-more-btn {
color: #9ca3af !important;
}
.board-post-menu > .ney-dropdown-menu {
top: calc(100% + 4px);
right: 0;
width: 180px;
padding: 6px 0;
overflow: hidden;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}
.board-post-menu .ney-dropdown-item {
min-height: 36px;
padding: 8px 20px;
border-radius: 0;
color: #59616f;
font-size: 13px;
font-weight: 400;
line-height: 20px;
}
.board-post-menu .ney-dropdown-item:hover,
.board-post-menu .ney-dropdown-item:focus-visible {
background: #e9e9e9;
color: #59616f;
}
.board-post-menu .ney-dropdown-item:focus-visible {
outline: 2px solid #9ca3af;
outline-offset: -2px;
}
.ney-comment-textarea .comment-img-wrapper {
vertical-align: top;
line-height: 0;
}
.ney-comment-textarea .comment-img-wrapper > img {
display: block;
}
.ney-comment-textarea .comment-img-wrapper > .btn-remove-img {
position: absolute;
top: 4px;
right: 4px;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 22px;
height: 22px;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: #ef4444;
color: #fff;
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.ney-comment-textarea .comment-img-wrapper > .btn-remove-img:hover {
background: #dc2626;
}
.ney-comment-textarea .comment-img-wrapper > .btn-remove-img:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
}
.ney-comment-container .ney-dropdown-item:hover {
background: #e9e9e9;
}
.ney-comment-container .ney-mention-popup,
.ney-comment-container .ney-mention-popup * {
color: #59616f !important;
font-weight: 400 !important;
}
#board-area:has(.board-view) .ney-comment-container > .ney-comment-header > .ney-header-title > .ney-header-text:not([x-text]):not(.n-badge):hover {
color: #17191c !important;
}
#board-area:has(.board-view) .ney-comment-container > .ney-comment-header > .ney-header-title > .ney-header-text[x-text="totalCount"]:not(.n-badge):hover {
color: #17191c !important;
}
#board-area:has(.board-view) .ney-comment-container .ney-comment-list .ney-comment-item > .ney-comment-content > .ney-comment-meta-header .ney-user-info > span:where(:not(.n-badge, .n-badge *)):hover {
color: #17191c !important;
}
#board-area:has(.board-view) .ney-comment-container .ney-comment-list .ney-comment-item > .ney-comment-content > .ney-comment-text > span:where(:not(.n-badge, .n-badge *)):hover,
#board-area:has(.board-view) .ney-comment-container .ney-comment-list .ney-comment-item > .ney-comment-content > .ney-comment-text > span:where(:not(.n-badge, .n-badge *)):hover :where(*):where(:not(.n-badge, .n-badge *)) {
color: #17191c !important;
}
#board-area:has(.board-view) .ney-comment-container .ney-comment-list .ney-comment-item :is(button, a):where(:not(.n-badge, .n-badge *)):hover,
#board-area:has(.board-view) .ney-comment-container .ney-comment-list .ney-comment-item :is(button, a):where(:not(.n-badge, .n-badge *)):hover :where(*):where(:not(.n-badge, .n-badge *)) {
color: #17191c !important;
}
#board-area:has(.board-view) .ney-comment-container .ney-comment-list .ney-comment-item .ney-comment-textarea:where(:not(.n-badge, .n-badge *)):hover,
#board-area:has(.board-view) .ney-comment-container .ney-comment-list .ney-comment-item .ney-comment-textarea:where(:not(.n-badge, .n-badge *)):hover :where(*):where(:not(.n-badge, .n-badge *)) {
color: #17191c !important;
}
#board-area:has(.board-view) :is(
.board-view > .board-post-meta > .board-post-avatar,
.ney-comment-container .ney-comment-item > .ney-avatar-wrapper,
.ney-comment-container > .ney-input-section > .ney-avatar
) {
background-color: #f4f4f5 !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#board-area:has(.board-view) :is(
.board-view > .board-post-meta > .board-post-avatar,
.ney-comment-container .ney-comment-item > .ney-avatar-wrapper,
.ney-comment-container > .ney-input-section > .ney-avatar
):hover {
cursor: pointer;
background-color: #f3f5f7 !important;
}
#board-area:has(.board-view) :is(
.board-view > .board-post-meta > .board-post-avatar,
.ney-comment-container .ney-comment-item > .ney-avatar-wrapper,
.ney-comment-container > .ney-input-section > .ney-avatar
) > img {
transition: filter 0.3s ease;
}
#board-area:has(.board-view) :is(
.board-view > .board-post-meta > .board-post-avatar,
.ney-comment-container .ney-comment-item > .ney-avatar-wrapper,
.ney-comment-container > .ney-input-section > .ney-avatar
):hover > img {
filter: brightness(0.6);
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) .ney-comment-container .n-badge:is(.n-badge-author, .n-badge-deleted) {
color: var(--tv-admin-menu-active-text, #1683ff);
border-color: var(--tv-admin-menu-active-text, #1683ff);
}
html:root:where(:not(.darkmode--activated)) body:where(:not(.darkmode--activated)) #board-area .board-post-heading > .board-post-title {
color: var(--tv-admin-text, #59616f) !important;
}
.board-layout-panel {
width: 100%;
}
.board-layout-gallery {
font-weight: 400;
}
.board-gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.board-gallery-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
border: 1px solid var(--md-outline);
border-radius: 8px;
background: var(--md-surface);
box-shadow: var(--md-shadow-soft);
transform: none !important;
transition: none !important;
}
.board-gallery-card:hover {
border: 1px solid var(--md-outline);
background: #eef2ff !important;
box-shadow: var(--md-shadow-soft);
transform: none !important;
}
.board-gallery-card.is-notice {
border-color: #bfdbfe;
}
.board-gallery-card.is-notice:hover {
border-color: #bfdbfe;
}
.board-gallery-link {
display: flex;
flex-direction: column;
flex: 1 0 auto;
color: #111827;
text-decoration: none;
}
.board-gallery-link:focus-visible {
outline: 3px solid rgba(22, 131, 255, 0.28);
outline-offset: -3px;
}
.board-gallery-media {
position: relative;
display: block;
flex-shrink: 0;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #f3f4f6;
}
.board-gallery-media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: none !important;
transition: none !important;
}
.board-gallery-card:hover .board-gallery-media > img {
transform: none !important;
}
.board-gallery-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #c5cbd4;
background: linear-gradient(145deg, #f8fafc, #eef1f5);
}
.board-gallery-placeholder svg {
width: 48px;
height: 48px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.board-gallery-content {
display: flex;
flex-direction: column;
flex: 1 0 auto;
min-height: 134px;
padding: 14px 15px 13px;
box-sizing: border-box;
}
.board-gallery-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
max-width: 100%;
height: 21px;
padding: 0 7px;
overflow: hidden;
border: 1px solid #1683ff;
border-radius: 999px;
background: transparent;
color: #1683ff;
font-size: 12px;
font-weight: 400;
line-height: 21px;
text-overflow: ellipsis;
white-space: nowrap;
}
.board-layout-gallery .board-gallery-badge {
height: 22px;
box-sizing: border-box;
line-height: 20px;
}
.board-gallery-badge.is-notice {
background: #eaf4ff;
color: #1683ff;
}
.board-gallery-title-row {
display: flex;
align-items: center;
min-width: 0;
min-height: 21px;
gap: 6px;
}
.board-gallery-title {
display: block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: #59616f;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
white-space: nowrap;
text-overflow: ellipsis;
}
.board-gallery-excerpt {
display: -webkit-box;
min-width: 0;
margin-top: 7px;
overflow: hidden;
color: #59616f;
font-size: 14px;
font-weight: 400;
line-height: 1.55;
white-space: normal;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.board-gallery-excerpt + .board-gallery-meta {
padding-top: 10px;
}
.board-gallery-deleted {
color: #999;
}
.board-gallery-icons {
display: inline-flex;
align-items: center;
flex: 0 1 auto;
flex-wrap: wrap;
min-height: 18px;
gap: 6px;
}
.board-gallery-icons .board-post-icon {
display: block;
width: 14px;
height: 14px;
flex: 0 0 14px !important;
}
.board-gallery-author-date {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
gap: 3px;
}
.board-gallery-date {
font-size: 14px;
flex: 0 0 auto;
white-space: nowrap;
}
.board-gallery-author {
display: flex;
align-items: center;
min-width: 0;
color: #59616f;
font-size: 14px;
}
.board-gallery-author .member-icon-board {
flex: 0 0 28px;
width: 28px;
height: 28px;
margin-right: 6px;
}
.board-gallery-author > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.board-gallery-meta {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
margin-top: auto;
padding-top: 41px;
color: #59616f;
font-size: 14px;
line-height: 1.4;
gap: 3px;
}
.board-gallery-check {
position: absolute;
z-index: 2;
top: 10px;
left: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
}
.board-gallery-check input {
width: 16px;
height: 16px;
margin: 0;
}
@media (max-width: 900px) {
.board-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
}
@media (max-width: 560px) {
.board-gallery-grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
}
.board-gallery-stat {
font-size: 12px;
display: inline-flex;
align-items: center;
height: 18px;
line-height: 18px;
gap: 5px;
white-space: nowrap;
}
.board-gallery-stat > svg,
.board-gallery-stat > img {
display: block;
flex: 0 0 14px;
width: 14px;
height: 14px;
}
.board-gallery-stat > svg {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.board-gallery-meta {
align-items: center;
}
.board-gallery-dot {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
}
.board-gallery-dot::after {
content: "";
display: block;
background: var(--soop-mode-fill-fillQuaternary, #c1c7d0);
width: 3px;
height: 3px;
margin: 0 var(--soop-size-space-200, 8px);
border-radius: 50%;
}
.board-layout-gallery .board-notice-badge {
font-weight: 400;
}
.board-layout-gallery .board-comment-count {
color: #59616f !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.board-gallery-comment-count {
color: #59616f;
}
color: #59616f !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.board-gallery-comment-count {
color: #59616f;
}
.board-webzine-list {
width: 100%;
}
.board-webzine-item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
min-height: 202px;
padding: 26px 0 24px;
box-sizing: border-box;
border-bottom: 1px solid var(--md-outline);
background: var(--md-surface);
}
.board-webzine-item:hover {
background: #eef2ff !important;
border-radius: 0;
}
.board-webzine-item.has-thumbnail {
grid-template-columns: minmax(0, 1fr) 263px;
align-items: center;
gap: 28px;
}
.board-webzine-item.is-admin {
padding-left: 34px;
}
.board-webzine-body {
display: flex;
flex-direction: column;
align-self: stretch;
min-width: 0;
}
.board-webzine-header {
display: flex;
align-items: center;
min-width: 0;
min-height: 26px;
color: #667085;
font-size: 12px;
line-height: 1.3;
gap: 6px;
}
.board-webzine-author {
display: inline-flex;
align-items: center;
flex: 0 1 auto;
min-width: 0;
line-height: 1.4;
white-space: nowrap;
color: #59616f;
font-size: 14px;
font-weight: 400;
}
.board-webzine-author .member-icon-board {
flex: 0 0 28px;
width: 28px;
height: 28px;
margin-right: 6px;
}
.board-webzine-author > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.board-webzine-separator {
color: #c1c7d0;
}
.board-webzine-dot {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
}
.board-webzine-dot::after {
content: "";
display: block;
background: var(--soop-mode-fill-fillQuaternary, #c1c7d0);
width: 3px;
height: 3px;
margin: 0 var(--soop-size-space-200, 8px);
border-radius: 50%;
}
.board-webzine-separator {
display: inline-block;
transform: scale(2);
transform-origin: center;
}
.board-webzine-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
max-width: 100%;
height: 22px;
box-sizing: border-box;
padding: 0 7px;
overflow: hidden;
border: 1px solid #1683ff;
border-radius: 999px;
background: transparent;
color: #1683ff;
font-size: 12px;
font-weight: 400;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.board-webzine-copy {
display: block;
min-width: 0;
margin-top: 0;
color: inherit;
text-decoration: none;
}
.board-webzine-copy:hover {
color: inherit;
text-decoration: none;
}
.board-webzine-copy:focus-visible,
.board-webzine-media:focus-visible {
outline: 2px solid rgba(22, 131, 255, 0.35);
outline-offset: 3px;
}
.board-webzine-title-row {
display: flex;
align-items: center;
min-width: 0;
gap: 7px;
}
.board-webzine-title {
display: block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: #59616f;
font-size: 17px;
font-weight: 500;
line-height: 1.45;
overflow-wrap: anywhere;
text-overflow: ellipsis;
white-space: nowrap;
}
.board-webzine-deleted {
color: #999;
}
.board-webzine-excerpt {
display: -webkit-box;
margin-top: 7px;
overflow: hidden;
color: #6b7788;
font-size: 13px;
font-weight: 400;
line-height: 1.55;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.board-webzine-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
min-height: 32px;
margin-top: auto;
padding-top: 18px;
color: #59616f;
font-size: 14px;
line-height: 1.4;
gap: 4px 10px;
}
.board-webzine-icons {
display: inline-flex;
align-items: center;
flex: 0 1 auto;
flex-wrap: wrap;
min-height: 18px;
gap: 6px;
}
.board-webzine-icons .board-post-icon {
display: block;
width: 14px;
height: 14px;
flex: 0 0 14px !important;
}
.board-layout-webzine .board-webzine-author-date {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
min-width: 0;
max-width: 100%;
gap: 3px;
}
.board-webzine-date {
font-size: 14px;
flex: 0 0 auto;
white-space: nowrap;
}
.board-webzine-stat {
font-size: 12px;
display: inline-flex;
align-items: center;
height: 18px;
line-height: 18px;
gap: 5px;
white-space: nowrap;
}
.board-webzine-stat > svg,
.board-webzine-stat > img {
display: block;
flex: 0 0 14px;
width: 14px;
height: 14px;
}
.board-webzine-stat > svg {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.board-layout-webzine .board-comment-count {
color: #59616f !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.board-webzine-media {
position: relative;
display: block;
width: 263px;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 16px;
background: #eef1f5;
transform: none !important;
transition: none !important;
}
.board-webzine-media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: none !important;
transition: none !important;
}
.board-webzine-media:hover,
.board-webzine-media:hover > img {
transform: none !important;
}
.board-webzine-image-count {
position: absolute;
right: 8px;
bottom: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
box-sizing: border-box;
border-radius: 999px;
background: rgba(15, 23, 42, 0.82);
color: #fff;
font-size: 11px;
font-weight: 700;
}
.board-webzine-check {
position: absolute;
top: 31px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.board-webzine-check input {
width: 17px;
height: 17px;
margin: 0;
}
@media (max-width: 900px) {
.board-webzine-item.has-thumbnail {
grid-template-columns: minmax(0, 1fr) 210px;
gap: 20px;
}
.board-webzine-media {
width: 210px;
}
}
@media (max-width: 640px) {
.board-webzine-item,
.board-webzine-item.has-thumbnail {
min-height: 164px;
padding-top: 20px;
padding-bottom: 20px;
}
.board-webzine-item.has-thumbnail {
grid-template-columns: minmax(0, 1fr) 116px;
align-items: start;
gap: 12px;
}
.board-webzine-item.is-admin {
padding-left: 29px;
}
.board-webzine-header {
gap: 4px;
}
.board-webzine-copy {
margin-top: 0;
}
.board-webzine-title {
font-size: 15px;
}
.board-webzine-excerpt {
font-size: 12px;
-webkit-line-clamp: 3;
}
.board-webzine-meta {
padding-top: 13px;
column-gap: 10px;
row-gap: 4px;
}
.board-webzine-media {
width: 116px;
aspect-ratio: 4 / 3;
border-radius: 10px;
}
.board-webzine-check {
top: 23px;
}
}
@media (max-width: 420px) {
.board-webzine-excerpt {
-webkit-line-clamp: 3;
}
.board-webzine-item.has-thumbnail {
grid-template-columns: minmax(0, 1fr) 92px;
}
.board-webzine-media {
width: 92px;
}
}
@media (min-width: 901px) {
.board-webzine-item {
height: 237px;
min-height: 237px;
margin: 0;
padding: 12px 15px 5px 15px;
}
.board-webzine-item.has-thumbnail {
grid-template-columns: minmax(0, 1fr) 268px;
align-items: start;
gap: 28px;
}
.board-webzine-body {
min-height: 0;
}
.board-webzine-header {
min-height: 30px;
font-size: 16px;
line-height: 30px;
gap: 8px;
}
.board-webzine-author {
font-size: 14px;
line-height: 1.4;
}
.board-webzine-author .member-icon-board {
flex-basis: 28px;
width: 28px;
height: 28px;
margin-right: 6px;
}
.board-webzine-copy {
margin-top: 0;
}
.board-webzine-title {
font-size: 15px;
line-height: 32px;
font-weight: 400;
}
.board-webzine-excerpt {
margin-top: 6px;
font-size: 14px;
line-height: 22px;
}
.board-webzine-meta {
min-height: 40px;
margin-top: auto;
padding-top: 0;
font-size: 14px;
column-gap: 3px;
}
.board-webzine-media {
align-self: start;
width: 268px;
height: 148px;
margin-top: 40px;
aspect-ratio: auto;
border-radius: 18px;
}
}
.board-webzine-item:not(.has-thumbnail) {
grid-template-columns: minmax(0, 1fr) 263px;
align-items: center;
gap: 28px;
}
.board-webzine-item:not(.has-thumbnail)::after {
content: "";
display: block;
width: 263px;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 16px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23c5cbd4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='38' height='32' rx='4'/%3E%3Ccircle cx='17' cy='19' r='4'/%3E%3Cpath d='m9 35 10-9 7 6 6-5 7 8'/%3E%3C/svg%3E") center / 48px 48px no-repeat,
linear-gradient(145deg, #f8fafc, #eef1f5);
}
@media (max-width: 900px) {
.board-webzine-item:not(.has-thumbnail) {
grid-template-columns: minmax(0, 1fr) 210px;
gap: 20px;
}
.board-webzine-item:not(.has-thumbnail)::after {
width: 210px;
background-size: 40px 40px, auto;
}
}
@media (max-width: 640px) {
.board-webzine-item:not(.has-thumbnail) {
grid-template-columns: minmax(0, 1fr) 116px;
align-items: start;
gap: 12px;
}
.board-webzine-item:not(.has-thumbnail)::after {
width: 116px;
aspect-ratio: 4 / 3;
border-radius: 10px;
background-size: 28px 28px, auto;
}
}
@media (max-width: 420px) {
.board-webzine-item:not(.has-thumbnail) {
grid-template-columns: minmax(0, 1fr) 92px;
}
.board-webzine-item:not(.has-thumbnail)::after {
width: 92px;
background-size: 24px 24px, auto;
}
}
@media (min-width: 901px) {
.board-webzine-item:not(.has-thumbnail) {
grid-template-columns: minmax(0, 1fr) 268px;
align-items: start;
gap: 28px;
}
.board-webzine-item:not(.has-thumbnail)::after {
align-self: start;
width: 268px;
height: 148px;
margin-top: 40px;
aspect-ratio: auto;
border-radius: 18px;
}
}
.board-webzine-list .board-webzine-item:nth-child(odd) {
background: #fcfdff;
}
@media (min-width: 901px) {
.board-webzine-media,
.board-webzine-item:not(.has-thumbnail)::after {
align-self: stretch;
height: auto;
margin-top: 5px;
margin-bottom: 11px;
aspect-ratio: auto;
}
}
x) {
.board-webzine-media,
.board-webzine-item:not(.has-thumbnail)::after {
align-self: stretch;
height: auto;
margin-top: 5px;
margin-bottom: 11px;
aspect-ratio: auto;
}
}
@media (max-width: 768px) {
#search-controls form {
gap: 6px 8px;
}
.tbl_board thead {
display: none;
}
.tbl_board,
.tbl_board tbody,
.tbl_board tr,
.tbl_board td {
display: block;
width: 100%;
}
.tbl_board tbody tr {
border-bottom: 1px solid var(--md-outline);
}
.tbl_board tbody td {
border: 0;
padding: 10px 14px;
}
.tbl_board tbody td a[data-action="view"] {
display: inline-block;
margin-top: 2px;
}
.tbl_board tbody tr:hover,
.board-gallery-card:hover,
.board-webzine-item:hover {
background: #f6f8ff !important;
}
}