@charset "utf-8";

/* =========================================================
   WEBB BASIC BOARD SKIN
   Gnuboard 5 responsive general board skin
   ========================================================= */

:root {
    --wb-bg: #ffffff;
    --wb-soft: #f7f8fa;
    --wb-soft-2: #f1f3f5;
    --wb-line: #e5e8ec;
    --wb-line-strong: #d7dce2;
    --wb-text: #20252b;
    --wb-muted: #737b85;
    --wb-point: #27323d;
    --wb-point-dark: #151c23;
    --wb-accent: #a88c61;
    --wb-danger: #bf4d4d;
    --wb-radius: 14px;
    --wb-shadow: 0 18px 48px rgba(17, 28, 39, .07);
}

.wb-board,
.wb-board * {box-sizing:border-box}
.wb-board {width:100%; max-width:1400px; margin:0 auto; color:var(--wb-text); font-family:inherit; word-break:keep-all}
.wb-board a {color:inherit; text-decoration:none}
.wb-board button,
.wb-board input,
.wb-board select,
.wb-board textarea {font-family:inherit}
.wb-board .sound_only {position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}

/* common */
.wb-board-header {display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px}
.wb-board-kicker {display:block; margin-bottom:8px; color:var(--wb-accent); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase}
.wb-board-title {margin:0; color:var(--wb-point-dark); font-size:30px; font-weight:700; letter-spacing:-.06em; line-height:1.2}
.wb-board-desc {margin:10px 0 0; color:var(--wb-muted); font-size:14px; line-height:1.7}
.wb-board-total {color:var(--wb-muted); font-size:13px; white-space:nowrap}
.wb-board-total strong {color:var(--wb-point); font-weight:700}

.wb-btns {display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.wb-btn {display:inline-flex; min-height:42px; padding:0 16px; align-items:center; justify-content:center; border:1px solid var(--wb-line-strong); border-radius:8px; background:#fff; color:var(--wb-point); font-size:13px; font-weight:700; line-height:1; cursor:pointer; transition:.2s ease}
.wb-btn:hover {border-color:var(--wb-point); background:var(--wb-point); color:#fff}
.wb-btn--primary a {border-color:var(--wb-point); background:var(--wb-point); color:#fff}
.wb-btn--primary:hover {border-color:var(--wb-point-dark); background:var(--wb-point-dark)}
.wb-btn--danger {border-color:#e2caca; color:var(--wb-danger)}
.wb-btn--danger:hover {border-color:var(--wb-danger); background:var(--wb-danger); color:#fff}
.wb-btn--soft {border-color:var(--wb-line); background:var(--wb-soft)}
.wb-btn--small {min-height:34px; padding:0 11px; border-radius:7px; font-size:12px}
.wb-btn i {margin-right:6px}

.wb-input,
.wb-select,
.wb-textarea {width:100%; border:1px solid var(--wb-line-strong); border-radius:8px; background:#fff; color:var(--wb-text); font-size:14px; outline:none; transition:.2s ease}
.wb-input {height:46px; padding:0 13px}
.wb-select {height:46px; padding:0 35px 0 13px}
.wb-textarea {min-height:170px; padding:14px; line-height:1.75; resize:vertical}
.wb-input:focus,
.wb-select:focus,
.wb-textarea:focus {border-color:var(--wb-accent); box-shadow:0 0 0 3px rgba(168, 140, 97, .12)}
.wb-required {color:var(--wb-danger)}

/* list */
.wb-category {display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.wb-category a {display:inline-flex; min-height:38px; padding:0 14px; align-items:center; border:1px solid var(--wb-line); border-radius:999px; background:#fff; color:var(--wb-muted); font-size:13px; font-weight:700; transition:.2s ease}
.wb-category a:hover,
.wb-category a.is-active,
.wb-category #bo_cate_on {border-color:var(--wb-point); background:var(--wb-point); color:#fff}

.wb-list-tools {display:flex; justify-content:space-between; gap:14px; margin-bottom:12px}
.wb-list-tools__left,
.wb-list-tools__right {display:flex; flex-wrap:wrap; gap:7px}
.wb-list-wrap {overflow:hidden; border-top:2px solid var(--wb-point); border-bottom:1px solid var(--wb-line-strong); background:#fff}
.wb-list {width:100%; border-collapse:collapse; table-layout:fixed}
.wb-list th {height:58px; padding:10px 8px; border-bottom:1px solid var(--wb-line-strong); background:var(--wb-soft); color:#59616a; font-size:13px; font-weight:700; text-align:center}
.wb-list td {height:66px; padding:11px 8px; border-bottom:1px solid var(--wb-line); color:#59616a; font-size:13px; text-align:center; vertical-align:middle}
.wb-list tr:last-child td {border-bottom:0}
.wb-list tbody tr {transition:background .2s ease}
.wb-list tbody tr:hover {background:#fbfbfc}
.wb-list .wb-col-check {width:44px}
.wb-list .wb-col-no {width:72px}
.wb-list .wb-col-writer {width:126px}
.wb-list .wb-col-date {width:108px}
.wb-list .wb-col-hit {width:72px}
.wb-list .wb-col-good {width:72px}
.wb-list .wb-col-subject {text-align:left}
.wb-list .wb-notice {color:var(--wb-accent); font-size:12px; font-weight:800}
.wb-list-subject {display:flex; min-width:0; align-items:center; gap:7px}
.wb-list-subject__text {min-width:0; overflow:hidden; color:var(--wb-text); font-size:14px; font-weight:600; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap}
.wb-list-subject__text:hover {color:var(--wb-accent)}
.wb-reply {flex:0 0 auto; color:var(--wb-accent); font-size:11px; font-weight:800}
.wb-icon {flex:0 0 auto; color:var(--wb-muted); font-size:11px}
.wb-icon--new {display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; border-radius:50%; background:var(--wb-accent); color:#fff; font-size:10px; font-style:normal; font-weight:800}
.wb-comment-count {flex:0 0 auto; color:var(--wb-accent); font-size:12px; font-weight:800}
.wb-mobile-meta {display:none}
.wb-empty {padding:90px 20px!important; color:var(--wb-muted)!important; text-align:center!important}

.wb-list-bottom {display:flex; justify-content:space-between; gap:16px; margin-top:18px}
.wb-search {display:flex; flex-wrap:wrap; align-items:center; gap:7px}
.wb-search .wb-select {width:116px; height:42px}
.wb-search .wb-input {width:230px; height:42px}

/* pagination */
.pg_wrap {display:block; margin:30px 0 0; text-align:center}
.pg {display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px}
.pg_page,
.pg_current {display:inline-flex; min-width:36px; height:36px; padding:0 7px; align-items:center; justify-content:center; border:1px solid var(--wb-line); border-radius:7px; background:#fff; color:var(--wb-muted); font-size:13px; line-height:1}
.pg_page:hover {border-color:var(--wb-point); color:var(--wb-point)}
.pg_current {border-color:var(--wb-point); background:var(--wb-point); color:#fff; font-weight:700}

/* view */
.wb-view {overflow:hidden; border-top:2px solid var(--wb-point); border-bottom:1px solid var(--wb-line-strong); background:#fff}
.wb-view-head {padding:30px 26px 23px; border-bottom:1px solid var(--wb-line)}
.wb-view-category {display:inline-block; margin-bottom:9px; color:var(--wb-accent); font-size:13px; font-weight:800}
.wb-view-title {margin:0; color:var(--wb-point-dark); font-size:25px; font-weight:700; letter-spacing:-.055em; line-height:1.42}
.wb-view-meta {display:flex; flex-wrap:wrap; gap:9px 17px; margin-top:17px; color:var(--wb-muted); font-size:12px}
.wb-view-meta span {position:relative}
.wb-view-meta span + span:before {content:""; position:absolute; top:50%; left:-9px; width:1px; height:10px; background:var(--wb-line-strong); transform:translateY(-50%)}
.wb-view-files {padding:17px 26px; border-bottom:1px solid var(--wb-line); background:var(--wb-soft)}
.wb-view-files ul {margin:0; padding:0; list-style:none}
.wb-view-files li + li {margin-top:9px}
.wb-view-files a {color:#59616a; font-size:13px; line-height:1.55}
.wb-view-files a:hover {color:var(--wb-accent)}
.wb-view-files small {margin-left:7px; color:#939aa2}
.wb-view-content {min-height:260px; padding:34px 26px 44px; color:#333b43; font-size:15px; line-height:1.9}
.wb-view-content img {max-width:100%; height:auto}
.wb-view-content iframe {max-width:100%}
.wb-view-content table {max-width:100%}
.wb-view-content .view_image {display:block}
.wb-view-good {display:flex; justify-content:center; gap:8px; padding:0 26px 34px}
.wb-view-good a {display:inline-flex; min-width:86px; min-height:48px; align-items:center; justify-content:center; gap:7px; border:1px solid var(--wb-line-strong); border-radius:999px; background:#fff; color:var(--wb-muted); font-size:13px; font-weight:700; transition:.2s ease}
.wb-view-good a:hover {border-color:var(--wb-point); color:var(--wb-point)}
.wb-view-good strong {color:var(--wb-accent)}
.wb-view-nav {margin-top:20px; border-top:1px solid var(--wb-line-strong); border-bottom:1px solid var(--wb-line-strong)}
.wb-view-nav a {display:flex; gap:18px; padding:15px 17px; align-items:center; border-bottom:1px solid var(--wb-line); color:var(--wb-muted); font-size:13px}
.wb-view-nav a:last-child {border-bottom:0}
.wb-view-nav b {flex:0 0 58px; color:var(--wb-point); font-size:12px}
.wb-view-nav span {overflow:hidden; color:#4d565f; text-overflow:ellipsis; white-space:nowrap}
.wb-view-bottom {display:flex; justify-content:space-between; gap:14px; margin-top:18px}

/* write */
.wb-write {border-top:2px solid var(--wb-point); border-bottom:1px solid var(--wb-line-strong); background:#fff}
.wb-write-row {display:grid; grid-template-columns:145px minmax(0,1fr); border-bottom:1px solid var(--wb-line)}
.wb-write-row:last-child {border-bottom:0}
.wb-write-label {padding:21px 18px; background:var(--wb-soft); color:#59616a; font-size:13px; font-weight:700}
.wb-write-field {padding:14px 16px}
.wb-write-inline {display:flex; flex-wrap:wrap; gap:8px}
.wb-write-inline > * {flex:1 1 170px}
.wb-write-options {display:flex; flex-wrap:wrap; gap:10px 16px; min-height:46px; align-items:center}
.wb-write-options label {display:inline-flex; align-items:center; gap:5px; color:#59616a; font-size:13px}
.wb-write-editor {width:100%}
.wb-write-editor textarea {width:100%!important; min-height:320px}
.wb-write-help {margin:9px 0 0; color:var(--wb-muted); font-size:12px; line-height:1.65}
.wb-write-file {display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.wb-write-file input[type="file"] {max-width:100%; color:#59616a; font-size:13px}
.wb-write-file + .wb-write-file {margin-top:11px}
.wb-write-actions {display:flex; justify-content:center; gap:8px; margin-top:24px}

/* comment */
.wb-comment {margin-top:34px}
.wb-comment-title {display:flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--wb-point-dark); font-size:18px; letter-spacing:-.04em}
.wb-comment-title strong {color:var(--wb-accent)}
.wb-comment-list {border-top:2px solid var(--wb-point)}
.wb-comment-item {padding:18px 16px; border-bottom:1px solid var(--wb-line); background:#fff}
.wb-comment-item.is-reply {margin-left:26px; background:#fbfbfc}
.wb-comment-head {display:flex; justify-content:space-between; gap:12px; margin-bottom:10px}
.wb-comment-name {color:var(--wb-point); font-size:13px; font-weight:800}
.wb-comment-date {color:var(--wb-muted); font-size:11px}
.wb-comment-body {color:#4c555e; font-size:14px; line-height:1.75}
.wb-comment-tools {display:flex; flex-wrap:wrap; gap:5px; margin-top:12px}
.wb-comment-form {margin-top:18px; padding:17px; border:1px solid var(--wb-line); border-radius:10px; background:var(--wb-soft)}
.wb-comment-form .wb-textarea {min-height:110px}
.wb-comment-form__bottom {display:flex; justify-content:space-between; gap:10px; margin-top:10px}
.wb-comment-form__fields {display:flex; flex-wrap:wrap; gap:7px; flex:1}
.wb-comment-form__fields .wb-input {width:170px; height:40px}
.wb-comment-options {display:flex; gap:10px; align-items:center; color:#59616a; font-size:12px}
.wb-comment-empty {padding:34px 15px; border-bottom:1px solid var(--wb-line); color:var(--wb-muted); font-size:13px; text-align:center}

/* password */
.wb-password {max-width:540px; margin:30px auto; padding:34px; border:1px solid var(--wb-line); border-radius:var(--wb-radius); background:#fff; box-shadow:var(--wb-shadow); text-align:center}
.wb-password h2 {margin:0; color:var(--wb-point-dark); font-size:22px; letter-spacing:-.05em}
.wb-password p {margin:12px 0 20px; color:var(--wb-muted); font-size:13px; line-height:1.7}
.wb-password .wb-input {margin-bottom:9px}

@media (max-width: 768px) {
    .wb-board {padding:0 14px}
    .wb-board-header {margin-bottom:19px}
    .wb-board-kicker {margin-bottom:6px; font-size:10px}
    .wb-board-title {font-size:24px}
    .wb-board-desc {margin-top:7px; font-size:13px}
    .wb-board-total {font-size:12px}

    .wb-list-tools {align-items:flex-start}
    .wb-list-wrap {border-bottom:0; overflow:visible}
    .wb-list,
    .wb-list tbody,
    .wb-list tr,
    .wb-list td {display:block; width:100%}
    .wb-list thead {display:none}
    .wb-list tr {position:relative; padding:14px 10px 13px; border-bottom:1px solid var(--wb-line); background:#fff}
    .wb-list tr:hover {background:#fff}
    .wb-list td {height:auto; padding:0; border:0; text-align:left}
    .wb-list td.wb-col-check {position:absolute; top:15px; left:9px; width:20px; z-index:2}
    .wb-list td.wb-col-check + td.wb-col-no + td.wb-col-subject,
    .wb-list td.wb-col-check ~ td.wb-col-subject {padding-left:26px}
    .wb-list td.wb-col-no,
    .wb-list td.wb-col-writer,
    .wb-list td.wb-col-date,
    .wb-list td.wb-col-hit,
    .wb-list td.wb-col-good {display:none}
    .wb-list-subject {display:block}
    .wb-list-subject__text {display:inline; overflow:visible; color:var(--wb-text); font-size:14px; line-height:1.55; white-space:normal}
    .wb-reply,
    .wb-icon,
    .wb-comment-count {display:inline-block; margin-right:4px; vertical-align:middle}
    .wb-icon--new {display:inline-flex}
    .wb-mobile-meta {display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; color:var(--wb-muted); font-size:11px}
    .wb-empty {padding:56px 14px!important}

    .wb-list-bottom {display:block; margin-top:15px}
    .wb-search {display:grid; grid-template-columns:96px minmax(0,1fr) 42px; gap:5px; margin-top:10px}
    .wb-search .wb-select,
    .wb-search .wb-input {width:100%; height:40px}
    .wb-search .wb-btn {min-height:40px; padding:0 11px}

    .wb-view-head {padding:22px 17px 18px}
    .wb-view-title {font-size:21px}
    .wb-view-files {padding:14px 17px}
    .wb-view-files small {display:block; margin:3px 0 0}
    .wb-view-content {min-height:210px; padding:26px 17px 34px; font-size:14px; line-height:1.85}
    .wb-view-good {padding:0 17px 26px}
    .wb-view-nav a {padding:13px 10px; gap:9px}
    .wb-view-nav b {flex-basis:47px}
    .wb-view-bottom {display:block}
    .wb-view-bottom .wb-btns + .wb-btns {margin-top:8px}

    .wb-write-row {display:block}
    .wb-write-label {padding:12px 12px 0; background:#fff}
    .wb-write-field {padding:9px 12px 13px}
    .wb-write-editor textarea {min-height:240px}
    .wb-write-actions {margin-top:18px}

    .wb-comment {margin-top:27px}
    .wb-comment-item {padding:15px 11px}
    .wb-comment-item.is-reply {margin-left:15px}
    .wb-comment-form {padding:12px}
    .wb-comment-form__bottom {display:block}
    .wb-comment-form__fields {display:grid; grid-template-columns:1fr 1fr}
    .wb-comment-form__fields .wb-input {width:100%}
    .wb-comment-options {margin:9px 0}

    .wb-password {margin:15px 14px; padding:25px 18px}
}