@charset "UTF-8";
/* Hidden */
.hidden {position: absolute; top: -9999px; left: -9999px;}

/* List Normar A */
.board-normal .list-normal {display: inline-block; width: 100%; border-top: 2px solid #006276;}
.board-normal .list-normal > li { padding: 15px 8px; border-bottom: 1px solid #e2e2e2;}
.board-normal .list-normal > li:hover {background: #f6f8fa; border-bottom: 1px solid #006276;}
.board-normal .list-normal > li.notice {padding-left: 40px;  background: #f6f8fa url(../images/ico-notice.png) no-repeat 35px center;}
.board-normal .list-normal .no-data {float: none !important; width: 100% !important; padding: 83px 0; text-align: center;}
.board-normal .box {padding: 10px; position: relative;}
.board-normal .box > a {display: table; width: 100%; table-layout: fixed;}
.board-normal .shadow > a {display: table; width: 100%;}
.board-normal .thumb {display: none; vertical-align: top; padding-right: 40px;}
.board-normal .thumb img {width:100%;}
.board-normal .info {display: table-cell; vertical-align: top; position: relative; line-height:1.2; width: 100%;}
.board-normal .info .title {position: relative; padding-bottom: 15px;}
.board-normal .info .title.trash {padding: 17px 0;}
.board-normal .info .title strong {overflow: hidden; display: inline-block; max-width: 78%; font-size: 20px; font-family: 'Noto DemiLight'; color: #333; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis;}
.board-normal .info .title .new {position: relative; top: 2px; display: inline-block; text-indent: -9999px; width: 20px; height: 20px; background: url('../images/ico-new.png') no-repeat center center; margin-left: 7px;}
.board-normal .info .title .secret {position: relative; top: 0; display: inline-block; text-indent: -9999px; width: 20px; height: 20px; background: url('../images/ico-secret.png') no-repeat center center; margin-left: 7px; vertical-align: middle;}
.board-normal .info .title .ing {position: relative; top: 2px; display: none; width: 75px; margin: 0 0 0 5px; padding: 7px 0; border-radius: 50px; font-family: 'Noto DemiLight'; font-size: 15px; text-align: center; color: white; }
.board-normal .info .title .btn-ing {background-color: #828282;}
.board-normal .info .title .btn-ok {background-color: #1e5ba8;}
.board-normal .info .para {margin-bottom: 30px; line-height:1.65; color: #666666;}
.board-normal .info dl {position: relative; display: inline-block; padding-right: 20px; margin-right: 20px; font-size: 16px;}
.board-normal .info dl:after {content: ''; position: absolute; right: 0; top: 6px; width: 1px; height: 9px; background: #d1d1d1;}
.board-normal .info dl.date:after {display: none;}
.board-normal .info dt,
.board-normal .info dd {display: inline-block;}
.board-normal .info dt {color: #666;}
.board-normal .info dd {color: #888;}
.board-normal .info .file-count {display: inline-block; text-indent: -99999px;}
.board-normal .info .file {position: absolute; right: 0; top: 13px; display: inline-block; width: 40px; height: 30px; text-indent: -999999px; background: url('../images/ico-file.png') no-repeat center center;}
.board-normal .info .isFile {display: inline-block; width: 22px; height: 26px; background: url('../images/ico-file.png') no-repeat center center; vertical-align: middle;}
.board-normal .deleteArtclSeqs {position: absolute; top: 12px; left: -20px; z-index: 1;}
.board-normal .view-more {padding: 15px; border: 1px solid #d1d1d1; border-radius: 5px; position: absolute; right:15px; top:20px; width: 30px; height: 30px; text-indent: -9999px; background: url('../images/ico-search.png') no-repeat center center;}
.board-normal .reply {position: relative; display: inline-block; font-family: 'Noto Regular'; font-size: 16px; color: #ff5a00; vertical-align: middle;}

@media all and (max-width:800px) {
    .board-normal .info {width: 60%;}
    .board-normal .info dl {padding-right: 5px; margin-right: 1px; font-size: 14px;}
    .board-normal .info .file {right: -30px;}
}

@media all and (max-width:700px) {
    .board-normal .box > a {display: block;}
    .board-normal .thumb {display: none; width: 100%; padding-right: 0; padding-bottom: 40px;}
    .board-normal .info {display: block; width: 100%;}
}

/* Category */
.board-cate .cate-now{overflow: hidden; display: table; width: 100%; margin-bottom: 20px; padding: 10px 0; border: 1px solid #cfcfcf; border-bottom: 1px solid #23778b; table-layout: fixed;}
.board-cate .cate-now .solo {display: table-cell; width: 110px; vertical-align: top;}
.board-cate .cate-now .solo li {text-align: center;}
.board-cate .cate-now .solo li a{display: block; padding: 4px 20px; font-family:'Dream Regular'; color:#666;}
.board-cate .cate-now .group {display: table-cell; vertical-align: middle;}
.board-cate .cate-now .group li{float: left; background: url('../images/line-cate.png') left center no-repeat;}
.board-cate .cate-now .group li a{display:block; color:#666; padding: 4px 20px; font-family: 'Dream Regular';}
.board-cate .cate-now .group li.no-cate{padding-top: 4px; padding-left: 15px; padding-bottom: 4px; color: #999;}

/* Tab */
.board-tab ul {display: inline-block; width: 100%; margin-bottom: 15px;}
.board-tab ul li {float: left; margin-right: 10px; margin-bottom: 10px;}
.board-tab ul li a {position: relative; top: 1px; display: block; padding: 10px 15px; border: 1px solid #d1d1d1;}
.board-tab ul li a.on {background: #004098; color: #fff;}

/* Date Search */
.board-date {text-align: center; background: #f2f2f2; border: 1px solid #d1d1d1; padding: 20px; margin-bottom: 30px;}
.board-date label {font-family: 'Noto Regular'; color: #666; margin: 0 15px; padding-left: 30px; background: url('../images/icon-cal.png') no-repeat left center;}
.board-date input {background: #fff;}
.board-date .line {display: inline-block;}
.ui-widget input, .ui-widget select,
.ui-widget textarea, .ui-widget button,
.ui-datepicker .ui-datepicker-title select,
.ui-datepicker table {font-size: 13px;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {top: 5px;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev-hover {left: 2px;}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next-hover {right: 2px;}

@media all and (max-width:620px) {
    .board-date .line {display: block;}
}

/* Search */
.board-search {display: inline-block; width: 100%; margin-bottom: 41px;}
.board-search .form-search {background: #f5f6f8; padding:20px;}
.board-search .tbl-search {text-align: center;}
.board-search .box-title {display: inline-block; background: url('../images/ico-search-title.png') no-repeat  left center; font-family: 'Noto Regular'; font-size:18px; margin-right: 20px; padding: 8px 0 8px 55px; color: #004d5d;}
.board-search .box-sel {position: relative; top: 0px; display: inline-block; margin-right: 2px; vertical-align: middle;}
.board-search .box-sel select {background: #fff url('../images/arrow-search.png') no-repeat right center; font-size: 16px; font-family: 'Noto Light'; color: #9d9d9d; border:1px solid #ccd0d7; height: 55px; min-width: 130px; padding-left: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.board-search .box-search {position: relative; top:0; display: inline-block; vertical-align: middle;  background: #fff; height: 55px; line-height: 55px; border:1px solid #ccd0d7; min-width: 400px;}
.board-search .box-search input {position: relative; top: -1px; width: 100%; height: 100%; background: transparent; border: 0; font-family: 'Noto Light'; font-size: 16px; text-indent: 10px; color: #9d9d9d;}
.board-search .box-search input::placeholder {color: #9d9d9d;}
.board-search .box-search input[type="submit"] {position: absolute; right:0; top: 0; width: 50px; height: 55px; background: url('../images/ico-search-btn.png') no-repeat center center; text-indent: -9999px; cursor: pointer;}
.board-search .util-search {margin-bottom: 20px; font-family: 'Noto DemiLight'; font-size: 16px; color: #666;}
.board-search .util-search a {display: inline-block; width: 30px; text-indent: -9999px; background: url('../images/ico-rss.png') no-repeat center center; margin-right:10px;}
.board-search .util-search strong {font-family: 'Noto Medium'; font-size: 16px; color: #333;}

@media all and (max-width:780px) {
    .board-search .box-title {display: none;}
    .board-search .tbl-search {display: table; width: 100%; table-layout: fixed;}
    .board-search .util-search {display: none;}
    .board-search .box-sel {width:35%; display: table-cell; margin-right: 0; padding-right: 20px;}
    .board-search .box-sel select {min-width: auto; width: 100%;}
    .board-search .box-search {display: table-cell;}
}

/* RSS */
.board-rss {display: inline-block; width: 100%; margin-bottom: 20px;}
.board-rss .util-search {font-family: 'Noto DemiLight'; font-size: 16px; color: #666;}
.board-rss .util-search a {display: inline-block; width: 25px; text-indent: -9999px; background: url('../images/ico-rss.png') no-repeat center center; background-size: contain; margin-right:10px; vertical-align: middle;}
.board-rss .util-search strong {font-family: 'Noto Medium'; font-size: 16px; color: #333;}
.board-rss .util-search .count-txt {position: relative; top: -1px; display: inline-block; vertical-align: middle; font-size: 16px; letter-spacing: -0.5px; color: #333333; font-family: "Noto Light";}
.board-rss .util-search .count-txt strong {font-family: "Noto Light"; font-weight: 300;}
.board-rss .util-search .count-txt .current {color: #1e5ba8; font-family: "Noto Medium";}

/* sort */
.board-sort {display: flex; justify-content: flex-end;}
.board-sort .badge{border: 0;}

/* View */
.board-view-info {font-size: 0;}
.view-info {border-top: 2px solid #000000;}
.view-info .view-num {display: none;}
.view-info .view-title {background: #fff; font-size: 22px; font-family: 'Noto Medium'; border-bottom: 1px solid #e2e2e2; padding: 30px 30px; text-align: center; color: #000; line-height: 1.5;}
.view-detail {display: inline-block; width: 100%; border-bottom: 1px solid #e2e2e2; padding: 10px 0 10px 20px; text-align: right;}
.view-detail .view-util {display: inline-block; margin-right: 20px; font-size: 16px; color: #9b9b9b; font-family: 'Noto Light';}
.view-detail .view-util dl {display: inline-block; padding-left: 15px; margin-left: 15px; position: relative;}
.view-detail .view-util dl:after {content: ''; position: absolute; left: 0; top: 12px; width: 1px; height: 11px; background: #c3c3c3;}
.view-detail .view-util dl:first-child:after {display: none;}
.view-detail .view-util dl.cate {display: none;}
.view-detail .view-util dt,
.view-detail .view-util dd {display: inline-block;}
.view-detail .view-util dt {padding-right: 1px; color: #666;}
.view-detail .view-util dd {color: #888;}
.view-detail .view-util .modify {display: none;}
.view-detail .view-util .writer:after {display: none;}
.view-detail .view-share {display: inline-block; margin-right: 20px;}
.view-detail .view-share .sns {display: inline-block;}
.view-detail .view-share .util {display: inline-block;}

.view-file {margin-bottom: 40px;}
.view-file .row {display: table; width: 100%; border-top: 1px solid #e2e2e2; border-bottom: 2px solid #000000;}
.view-file .row .title {width: 200px; display: table-cell; display: none; vertical-align: middle; padding: 25px 0; background: #f5f5f5; text-align: center; font-family: 'Noto Regular'; color: #444;}
.view-file .row .insert {display: table-cell; vertical-align: middle; padding: 16px 20px;}
.view-file .row .insert a {display: inline-block; margin-top: 3px; margin-bottom: 3px; font-size: 14px; color: #333;}
.view-file .row .insert .prev {display: inline-block; background: url('../images/btn-file-prev.png') no-repeat 10px center; margin-left: 12px; padding: 1px 15px 2px 30px; border: 1px solid #ccc; font-family: 'Noto Regular'; font-size: 14px; color: #5b6a77;}
.view-file .row .insert li {padding-left: 25px; background: url('../images/ico-add.png') no-repeat left 7px; font-family: 'Noto Light'; font-size: 14px; }
.view-file .no-file {color: #888;}

@media all and (max-width:1000px) {
    .view-detail .view-util {width: 100%; float: none;}
    .view-detail .view-share {width: 100%; float: none;}
}

@media all and (max-width:700px) {
    .view-file .row {display: block;}
    .view-file .row .title {display: block; width: 100%; text-align: left; padding:15px 0 15px 30px;}
    .view-file .row .insert {display: block; width: 100%;}
    .view-detail .view-util dl {display: none;}
    .view-detail .view-util dl.writer,
    .view-detail .view-util dl.write {display: table;}
}

/* Write Update */
.board-write {border-top: 2px solid #7c7c7c; margin-bottom: 40px;}
.board-write .row {display: table; width: 100%;border-bottom: 1px solid #dadada;}
.board-write .title {width: 200px; display: table-cell; vertical-align: middle; text-align: left; padding: 9px 15px; font-size: 15px; background: #f5f5f5; font-family: 'Noto Regular'; color: #555;}
.board-write .insert {display: table-cell; vertical-align: middle; padding: 9px 20px; font-size: 14px; font-family: 'Noto Regular'; color: #666;}
.board-write .insert.editor {padding: 12px 0 6px 0;}
.board-write .insert input[type="text"],
.board-write .insert input[type="password"] {border: 1px solid #dfdfdf; height: 30px; line-height: 30px; padding: 0 10px; }
.board-write .insert .long {width: 100%;}
.board-write .insert .space {margin-bottom: 10px;}
.board-write .insert .tarea {width: 100%; font-family: 'Noto Regular'; font-size: 14px; color: #666;}
.board-write .insert .possible {font-size: 13px; color: #888; margin-top: 5px; text-transform: uppercase;}
.board-write .insert .ico-cal { padding-left: 30px; padding-right: 10px; background: url(../images/icon-cal.png) no-repeat left center;}
.board-write .insert .ico-cal.space {margin-left: 10px;}
.board-write .insert .switch {margin-top: 10px;}
.board-write .insert .file-select {font-family: 'Noto Regular'; font-size: 14px; color: #666; padding: 10px; height: 130px;}
.board-write .insert .one-line {overflow: hidden; background: #f5f5f5;  padding: 10px; border-radius:  7px;}
.board-write .insert .one-line li {float: left; margin-right: 10px; }
.board-write .insert .pass-form {margin-top: 10px;}
.board-write .insert .pass-form label {margin-right: 10px;}
.board-write .insert .sel-type {margin-right: 5px; font-family: 'Noto Regular'; font-size: 14px; color: #888; border: 1px solid #dfdfdf; height: 30px; line-height: 29px; padding: 0 40px 0 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ebebeb url(../images/arrow-search.png) no-repeat right center;}
.board-write .insert .line {display: inline-block;}
.board-write.pass-view {margin-bottom: 15px;}
.board-write.pass-view .insert input[type="password"] {width: 100%; box-sizing: border-box;}

@media all and (max-width: 780px) {
    .board-write .row {display: block;}
    .board-write .title {display: block; width: 100%;}
    .board-write .insert {display: block; width: 100%; padding: 9px 0;}
    .board-write .insert .one-line {background: #fff; border: 1px solid #d1d1d1;}
}

@media all and (max-width: 580px) {
    .board-write .insert .line {display: block; margin: 5px 0;}
    .board-write .insert .ico-cal.space {margin-left: 0;}
}

/* Contents */
.view-con {padding: 30px 20px; font-size: 18px; font-family: 'Noto Light'; color: #666;}
.view-img {margin-bottom: 30px;}

@media all and (max-width: 580px) {
    .view-con {padding: 30px; }
}

/* Paging */
._paging {padding: 60px 0 0 0;}
._paging > ._inner > ul {margin: 0 13px;}
._paging > ._inner > ul li strong {width: 35px; height: 35px; line-height:32px; border-radius: 100%; background-color: #99a2b2; border-color: #99a2b2;}
._paging > ._inner > a {width: 35px; height: 35px; line-height:35px; background-image: url('../images/arrow-page.png') !important; background-repeat: no-repeat; background-color: transparent; border: 0;}
._paging > ._inner > a._first {background-position: 0 0;}
._paging > ._inner > a._last {background-position: 0 -175px;}
._paging > ._inner > a._listNext, ._paging ._inner a._listPrev {display: block;}
._paging > ._inner > a._listNext {background-position: 0 -140px;}
._paging > ._inner > a._next {background-position: 0 -105px;}
._paging > ._inner > a._listPrev {background-position: 0 -35px;}
._paging > ._inner > a._prev {background-position: 0 -70px;}
._paging ._inner a, ._paging ._inner strong {border: 0; line-height: 33px;}

@media all and (max-width: 900px) {
    ._paging {padding: 60px 0 30px 0;}
}
@media all and (max-width: 750px) {
    ._paging {padding:  40px 0 20px 0;}
    ._paging > ._inner > ul {display: none;}
    ._paging ._inner ._pageState {display: block; margin: 0;}
}

/* Prev Next */
.view-navi {position: relative; padding: 3px; margin-bottom: 30px; background: #e3e3e3;}
.view-navi .view-white {background: #fff; padding: 0 27px;}
.view-navi .navi-info {display: none;}
.view-navi .row {display: table; width: 100%;}
.view-navi .row.prev {padding: 11px 0; border-bottom: 1px solid #ccc;}
.view-navi .row.next {padding: 11px 0;}
.view-navi .row .title {position: relative; display: table-cell; vertical-align: middle; width: 80px; padding-left: 19px; font-family: 'Noto DemiLight'; font-size: 16px; color: #000;}
.view-navi .row .title:after {content: ''; position: absolute; left: 0; top: 12px; width: 10px; height: 10px; background: url('../images/dot-view-navi.png'); border-radius: 100%;}
.view-navi .row .insert {display: table-cell; vertical-align: middle; font-family: 'Noto Light'; font-size: 16px; color: #666;}

@media all and (max-width:675px) {
    .view-navi {display: none;}
}

/* Button */
.board-button {text-align: center; display: inline-block; width: 100%;}
.board-button .btn-mine {float: left;}
.board-button .btn-control {float: right;}
.board-button .btn-deco {display: inline-block; min-width: 80px; cursor: pointer; font-size: 14px; height: 40px; line-height: 37px; text-align: center; margin: 0 1px; border-radius: 100px; font-family: 'Noto DemiLight';}
.board-button  a.btn-deco, .board-button  input.btn-deco {color: #fff;}
.board-button .btn-deco.color1 {background: #8e99ab; border: 1px solid #8e99ab;}
.board-button .btn-deco.color2 {background: #2b3e5c; border: 1px solid #2b3e5c;}
.board-button .btn-deco.color3 {background: #06988d; border: 1px solid #06988d;}
.board-button .btn-deco.color4 {background: #2b3e5c; border: 1px solid #2b3e5c;}
.board-button .btn-deco.color5 {background: #006276; border: 1px solid #006276;}
.board-button .btn-deco.color6 {background: #2563eb; border: 1px solid #2563eb;}
.board-button.view {margin-bottom: 40px; text-align: right;}
.board-button.view .btn-mine {float: none; display: inline-block;}
.board-button.view .btn-control {float: none; display: inline-block;}
.board-button.answer-button {text-align: right; margin-top: 30px;}

a.samll-btn, input.samll-btn {color: #fff;}
.small-btn-box {text-align: center;}
.small-btn-box.align-r {text-align: right;}
.small-btn-box .samll-btn {display: inline-block; cursor: pointer; font-size: 14px; height: 35px; line-height: 35px; text-align: center; padding: 0 20px; margin: 0 5px; font-family: 'Noto Light';}
.small-btn-box.no-margin .samll-btn {margin: 0;}
.small-btn-box .samll-btn.color1 {background: #006276; color: #fff; border: 1px solid #006276;}
.small-btn-box .samll-btn.color2 {background: #fff; color: #ce2856; border: 1px solid #ce2856;}

.tiny-btn {display: inline-block; cursor: pointer; font-size: 13px; height: 25px; line-height: 20px; border-radius: 50px; text-align: center; padding: 0 12px; margin: 0 3px; font-family: 'Noto DemiLight';}
.tiny-btn.color1 {background: #0c837f; border: 1px solid #0c837f; color: #fff;}
.tiny-btn.color2 {background: #ce2856; border: 1px solid #ce2856; color: #fff;}

.file-btn {border: 1px solid #d5d5d5; height: 30px; line-height:26px; padding-left: 35px; padding-right: 20px; cursor: pointer;}
.file-btn.add {background: #ececec url('../images/ico-file-add.png') no-repeat 10px center; margin-right: 5px;}
.file-btn.del {background: #ececec url('../images/ico-file-del.png') no-repeat 14px center;}

.del-btn {position: relative; top: -1px; display: inline-block; width: 15px; height: 15px; background: #6a6a6a url('../images/btn-del.png') no-repeat center center; cursor: pointer; text-indent: -9999px; margin-left: 5px; vertical-align: middle;}

@media all and (max-width: 420px) {
    .board-button .btn-mine,
    .board-button.view .btn-mine {width: 100%;}
    .board-button .btn-control,
    .board-button.view .btn-control {width: 100%;}
    .board-button .btn-deco {display: block; width: 100%; margin: 0 0 10px 0;}
}

/* Comment */
.view-comment-wrap {position: relative; border: 1px solid #ccc; border-top: 2px solid #7c7c7c; padding: 28px 40px 20px 40px; margin-bottom: 40px;}
.view-comment-write .name {display: none; margin-bottom: 15px;}
.view-comment-write .name label {font-family: 'Noto Regular'; font-size: 13px; padding-right: 10px; color: #666;}
.view-comment-write .name input {border-radius: 3px; padding: 5px;}
.view-comment-write .comment-text {position: relative; padding-left: 70px;}
.view-comment-write .comment-text:after {content: ''; position: absolute; left: 0px; top: 8px; width: 50px; height: 50px; background: url('../images/icico-quick-answer.png');}
.view-comment-write textarea {width: 100%; height: 65px; background: #fff; padding: 5px 10px; border: 1px solid #ccc; font-family: 'Noto Light'; font-size: 16px; color: #444;}
.view-comment-write .must {top:4px}
.view-comment-list {margin-top: 25px; padding-bottom: 20px;}
.view-comment-list li {background: #f2f2f2; margin-bottom: 20px; padding: 14px 14px 14px 14px;}
.view-comment-list li:last-child {margin-bottom: 0;}
.view-comment-list .title {display: block; padding-left: 25px; background: url('../images/ico-people.png') no-repeat left 8px; font-family: 'Noto Light'; font-size: 16px; color: #444;}
.view-comment-list .title .date {position: relative;  margin-left: 8px; padding-left: 10px; font-size: 16px; color: #777; }
.view-comment-list .title .date:after {content: ''; position: absolute; left: 0; top: 7px; width: 1px; height: 11px; background: #d7d7d7;}
.view-comment-list .comment {padding-left: 25px; font-family: 'Noto Light'; font-size: 16px; color: #444;}

/* Answer */
.view-answer {position: relative; border: 1px solid #d9e0e3; border-top: 2px solid #262626; padding: 15px 40px 30px 40px; margin-bottom: 40px;}
.view-answer:after {content: '답글'; position: absolute; top: 0; left: 40px; width: 50px; height: 63px;  padding-top: 9px; background: url('../images/ico-reply.png') no-repeat left top; text-align: center; font-family: 'Noto Regular'; font-size: 16px; color: #fff; }
.view-answer .answer-title {padding-left: 65px;}
.view-answer .answer-title .title {font-size: 18px; color: #333; font-family: 'Noto Regular'; line-height: 1.2;}
.view-answer .answer-info {color: #777; font-family: 'Noto Light'; font-size: 16px; margin-bottom: 20px;}
.view-answer .answer-info .writer {position: relative; padding-right: 10px; margin-right: 10px;}
.view-answer .answer-info .writer:after {content: ''; position: absolute; right: 0; top: 8px; width: 1px; height: 10px; background: #c3c3c3; }
.view-answer .answer {background: #f2f2f2; padding: 11px 20px 13px 20px; font-family: 'Noto Light'; font-size: 16px; color: #666;}

._popup {height: 100%; font-family: 'Noto Regular';}
._popup #_popupHeader {padding-top: 20px; padding-bottom: 10px; height: auto !important; line-height:normal !important;}
._popup #_popupHeader h1 {float: none !important; display: block; padding-left: 33px; background: url('../images/bul-pop.png') no-repeat left center; font-family: 'Noto Regular'; font-size: 20px !important;}

.answer-write {border-top: 2px solid #7c7c7c;}
.answer-write .box-answer {margin-bottom: 40px;}
.answer-write .row {display: table; width: 100%;border-bottom: 1px solid #d1d1d1;}
.answer-write .row .title {width: 110px; display: table-cell; vertical-align: middle; text-align: left; padding: 15px 10px; background: #f5f5f5; font-family: 'Noto Regular'; color: #444;}
.answer-write .row .insert {display: table-cell; vertical-align: middle; padding: 15px 30px; font-family: 'Noto Regular';  font-size: 14px;}
.answer-write .row textarea {width: 100%; background: #f2f2f2; padding: 15px; font-family: 'Noto Regular'; }
.answer-write .insert input[type="text"], .answer-write .insert input[type="password"] {border: 1px solid #dfdfdf; height: 30px; line-height: 30px; padding: 0 10px;}
.answer-write .insert .long {width: 100%;}

/* Must */
mark.must {width: 10px; position: relative; top: 6px; display: inline-block; background: url('../images/ico-mark.png') no-repeat; text-indent: -9999px;}


/* ==========================================================================
   MOBILE ONLY OVERRIDE — 청원 게시판 모바일 전용 스타일
   ----------------------------------------------------------------------
   목적: 시설고장 신고 정보(common.css: .section / .section-title / .table /
   .td-gray) 화면의 디자인을 모바일 화면(<=768px)에서만 게시판
   목록 / 글쓰기(artclRegistView) / 글보기(artclView)에 적용한다.

   - PC(>768px) 화면은 위쪽의 기존 규칙이 그대로 적용되므로 변경되지 않음.
   - 마크업(JSP)은 전혀 수정하지 않았고, 기존 클래스(.row/.title/.insert,
     .view-util, .list-normal 등)만 재정의함 → 게시판 기능/로직 그대로 유지.
   - 색상/폭 값(#495057, #f8f9fa 등)은 시설고장 페이지가 사용하는
     Bootstrap gray-700 / gray-100 계열을 그대로 가져온 것이며, 실제
     variables.css 값과 다르면 아래 :root 변수만 바꾸면 전체가 맞춰짐.
   ========================================================================== */
@media all and (max-width: 768px) {

    :root {
        --mb-gray-100: #f8f9fa;   /* td-gray 배경색 */
        --mb-gray-300: #dee2e6;   /* 테두리 */
        --mb-gray-700: #495057;   /* td-gray 글자색 / 상단 굵은 보더 */
        --mb-font-xs: 13px;
        --mb-font-sm: 14px;
        --mb-font-md: 16px;
        --mb-label-width: 96px;  /* 시설고장 col width:120px 을 모바일 폭에 맞게 축소 */
    }

    /* 0) 기본 보강 리셋 — 이 화면들(artclList/artclView/artclRegistView)은 사이트 공통
       reset.css가 로드되지 않아 a 밑줄, 목록 불릿이 그대로 노출됨. 모바일 카드/표 UI와
       어울리지 않으므로 board_normal 스코프 안에서만 보강. */
    .board-normal a,
    .board-write a,
    .view-detail a,
    .view-file a,
    .view-navi a,
    .board-button a,
    .tiny-btn {
        text-decoration: none;
    }
    .board-normal .list-normal,
    .board-normal .list-normal > li {
        list-style: none;
    }

    /* --------------------------------------------------------------------
       1) 게시판 목록 (include_artclList.jsp)
       -------------------------------------------------------------------- */
    .board-search {margin-bottom: 16px;}
    .board-search .form-search {background: var(--mb-gray-100); padding: 12px;}
    .board-search .tbl-search {display: table; width: 100%; table-layout: fixed;}
    .board-search .box-title {display: none;}
    .board-search .util-search {display: none;}
    .board-search .box-sel {width: 35%; display: table-cell; margin-right: 0; padding-right: 10px; vertical-align: middle;}
    .board-search .box-sel select {min-width: auto; width: 100%; height: 36px; font-size: var(--mb-font-xs); border-color: var(--mb-gray-300); background-color: #fff;}
    .board-search .box-search {display: table-cell; height: 36px; line-height: 36px; min-width: 0; border-color: var(--mb-gray-300);}
    .board-search .box-search input {font-size: var(--mb-font-xs);}

    .board-cate .cate-now {border-color: var(--mb-gray-300); border-bottom-color: var(--mb-gray-700);}
    .board-cate .cate-now .solo li a,
    .board-cate .cate-now .group li a {color: var(--mb-gray-700); font-size: var(--mb-font-xs);}

    .board-normal .list-normal {border-top: 1px solid var(--mb-gray-700); padding: 0;}
    .board-normal .list-normal > li {padding: 12px 14px; border-bottom: 1px solid var(--mb-gray-300);}
    .board-normal .list-normal > li:hover {background: var(--mb-gray-100); border-bottom: 1px solid var(--mb-gray-300);}
    .board-normal .list-normal > li.notice {padding-left: 44px; background-position: 14px center;}
    .board-normal .box > a {display: block;}
    .board-normal .info {display: block; width: 100%;}
    .board-normal .info .title {padding-bottom: 8px;}
    .board-normal .info .title strong {max-width: 100%; font-size: var(--mb-font-md); font-weight: 600; font-family: inherit; color: #333;}
    .board-normal .info .para {margin-bottom: 10px; font-size: var(--mb-font-xs); line-height: 1.5;}
    .board-normal .info dl {position: static; display: inline-block; vertical-align: middle; padding: 3px 8px; margin: 0 4px 4px 0; font-size: var(--mb-font-xs); line-height: 1.4; background: var(--mb-gray-100); border-radius: 3px;}
    .board-normal .info dl:after {display: none;}
    .board-normal .info dt,
    .board-normal .info dd {display: inline-block; vertical-align: middle;}
    .board-normal .info dt {padding-right: 4px; color: var(--mb-gray-700); font-weight: 600;}
    .board-normal .info dd {color: var(--mb-gray-700);}
    .board-normal .info .file {right: 0; top: 0;}

    /* --------------------------------------------------------------------
       2) 글쓰기 (artclRegistView.jsp) — .board-write .row > .title + .insert
       -------------------------------------------------------------------- */
    .board-write {border-top: 1px solid var(--mb-gray-700); margin-bottom: 24px;}
    .board-write .row {display: table; width: 100%; table-layout: fixed; border-bottom: 1px solid var(--mb-gray-300);}
    .board-write .title {display: table-cell; width: var(--mb-label-width); vertical-align: middle; text-align: center; padding: 8px 4px; font-size: var(--mb-font-xs); background: var(--mb-gray-100); color: var(--mb-gray-700); font-family: inherit;}
    .board-write .insert {display: table-cell;  vertical-align: middle; padding: 8px 10px; font-size: var(--mb-font-xs); font-family: inherit; color: #333;}
    /*.board-write .insert {display: table-cell; width: auto; vertical-align: middle; padding: 8px 10px; font-size: var(--mb-font-xs); font-family: inherit; color: #333;}*/
    .board-write .insert.w100 {width: 100%;}
    .board-write .insert .btnWrap{display: flex; width: 100%;}
    .board-write .insert .btnWrap .file-btn{padding-left: 27px; padding-right: 0;}
    .board-write .insert .btnWrap .file-btn.add{background: #ececec url(../images/ico-file-add.png) no-repeat 8px center;}
    .board-write .insert .btnWrap .file-btn.del {background: #ececec url(../images/ico-file-del.png) no-repeat 9px center;}
    .board-write .insert .one-line {background: #fff; border: 1px solid var(--mb-gray-300); padding: 6px;}
    .board-write .insert .line {display: block; margin: 4px 0;}
    .board-write .insert .long {width: 100%; box-sizing: border-box;}
    .board-write .insert input[type="text"],
    .board-write .insert input[type="password"],
    .board-write .insert select.sel-type {font-size: var(--mb-font-xs); height: 32px; line-height: 32px;}
    .board-write .insert .tarea {font-size: var(--mb-font-xs);}

    /* --------------------------------------------------------------------
       3) 글보기 (artclView.jsp)
       -------------------------------------------------------------------- */
    .view-info {border-top: 1px solid var(--mb-gray-700);}
    .view-info .view-title {font-size: var(--mb-font-md); font-weight: 600; font-family: inherit; padding: 16px 14px; text-align: left; margin: 0;}

    /* 메타정보(작성자/등록일/카테고리/조회수 등)를 모두 회색 라벨 표(td-gray)로 표시 */
    .view-detail {display: block; width: 100%; padding: 0; text-align: left; border-bottom: none;}
    .view-detail .view-util {display: block; width: 100%; margin-right: 0; font-size: var(--mb-font-xs); font-family: inherit; color: #333;}
    .view-detail .view-util dl {display: table; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid var(--mb-gray-300);}
    .view-detail .view-util dl::after {display: none;}
    .view-detail .view-util dl.cate {display: table;}
    .view-detail .view-util dl.modify {display: table;}
    .view-detail .view-util dt,
    .view-detail .view-util dd {display: table-cell; vertical-align: middle; padding: 8px 10px;}
    .view-detail .view-util dt {width: var(--mb-label-width); background: var(--mb-gray-100); color: var(--mb-gray-700); text-align: center; font-weight: 400;}
    .view-detail .view-util dd {color: #333;}
    .view-detail .view-util dl:last-child {border-bottom: 1px solid var(--mb-gray-700);}
    .view-detail .view-share {display: block; margin: 10px 0 0 0; text-align: right;}

    /* 본문 내용 */
    .view-con {padding: 16px 14px; font-size: var(--mb-font-sm); font-family: inherit; line-height: 1.6; color: #333;}

    /* 추가 입력항목 + 첨부파일 목록도 동일한 표 스타일로 통일 */
    .view-file {margin-bottom: 24px;}
    .view-file .row {display: table; width: 100%; table-layout: fixed; border-top: none; border-bottom: 1px solid var(--mb-gray-300);}
    .view-file .row .title {display: table-cell; width: var(--mb-label-width); vertical-align: middle; text-align: center; padding: 8px 4px; background: var(--mb-gray-100); color: var(--mb-gray-700); font-size: var(--mb-font-xs); font-family: inherit;}
    .view-file .row .insert {display: table-cell; width: auto; vertical-align: middle; padding: 8px 10px; font-size: var(--mb-font-xs); font-family: inherit;}
    .view-file .row .insert a {font-size: var(--mb-font-xs);}

    /* 이전글/다음글 내비게이션도 동일 색상 톤으로 정리 */
    .view-navi {background: var(--mb-gray-300); padding: 1px;}
    .view-navi .row .title {color: var(--mb-gray-700); font-family: inherit; font-size: var(--mb-font-xs);}
    .view-navi .row .insert {color: #333; font-family: inherit; font-size: var(--mb-font-xs);}

    /* --------------------------------------------------------------------
       4) 버튼 / 입력창 / 검색창 — 시설고장 시스템(.btn/.btn-primary/.btn-outline/
       .input/.textarea/.search-wrap)의 디자인 톤을 가져온 부분.
       ⚠️ --mb-primary 값은 실제 variables.css의 --bs-primary 값을 못 받아서
       임의로 넣은 추정치입니다. 실제 학교 사이트 포인트 컬러로 한 줄만 바꾸면
       버튼/포커스 색이 한 번에 맞춰집니다.
       -------------------------------------------------------------------- */
    :root {
        --mb-primary: #1b6ef3;
        --mb-border: #d8d8d8;
        --mb-radius: 8px;
    }

    /* 버튼: 글쓰기/답변/수정/삭제/목록/내글 (board-button) */
    .board-button {text-align: left;}
    .board-button .btn-mine,
    .board-button .btn-control {float: none; display: block; width: 100%;}
    .board-button .btn-mine form,
    .board-button .btn-control form {display: flex; flex-wrap: wrap; gap: 10px; width: 100%;}
    .board-button .btn-control {margin-top: 6px;}
    .board-button .btn-deco,
    .board-button a.btn-deco {
        flex: 1 1 auto; min-width: 90px; height: 40px; line-height: 38px;
        margin: 0; border-radius: var(--mb-radius); font-size: var(--mb-font-sm);
        font-weight: 600; font-family: inherit; box-sizing: border-box;
    }
    /* 저장/등록/답변류 = 채워진 primary 버튼 */
    .board-button .btn-deco.color2,
    .board-button .btn-deco.color3 {
        background: var(--mb-primary); border-color: var(--mb-primary); color: #fff;
    }
    /* 내글/삭제/수정/목록류 = outline 버튼 */
    .board-button .btn-deco.color1,
    .board-button .btn-deco.color4,
    .board-button .btn-deco.color5 {
        background: #fff; border: 1px solid var(--mb-border); color: var(--mb-gray-700);
    }
    .board-button.view .btn-control {display: flex; flex-wrap: wrap; gap: 6px; float: none; text-align: left;}

    .tiny-btn,
    .small-btn-box .samll-btn {
        border-radius: var(--mb-radius); font-weight: 600; font-family: inherit;
        background: #fff; border: 1px solid var(--mb-border); color: var(--mb-gray-700);
    }

    /* 검색창 (board-search) — search-wrap/btn_search 톤으로 */
    .board-search .form-search {background: var(--mb-gray-100); border-radius: var(--mb-radius); padding: 12px;}
    .board-search .box-sel select {
        height: 36px; border: 1px solid var(--mb-border); border-radius: var(--mb-radius);
        background-color: #fff; background-image: none; padding: 0 8px; -webkit-appearance: none; appearance: none;
    }
    .board-search .box-search {
        height: 36px; line-height: 36px; border: 1px solid var(--mb-border); border-radius: var(--mb-radius); background: #fff;
    }
    .board-search .box-search input[type="submit"] {
        width: 36px; height: 36px; border-radius: 0 var(--mb-radius) var(--mb-radius) 0;
        background: var(--mb-primary); background-image: none; text-indent: 0;
        color: #fff; font-size: 12px; cursor: pointer;
    }

    /* 입력창 (글쓰기 폼) — .input / .textarea 톤으로 */
    .board-write .insert input[type="text"],
    .board-write .insert input[type="password"] {
        height: 40px; border: 1px solid var(--mb-border); border-radius: var(--mb-radius);
        width: 100%; box-sizing: border-box; padding: 0 10px;
    }
    .board-write .insert .tarea {
        border: 1px solid var(--mb-border); border-radius: var(--mb-radius);
        padding: 10px; box-sizing: border-box;
    }
    .board-write .insert .sel-type {
        border: 1px solid var(--mb-border); border-radius: var(--mb-radius);
        background-color: #fff; background-image: none; -webkit-appearance: none; appearance: none;
    }
    .board-write .insert .file-btn {
        border-radius: var(--mb-radius); border: 1px solid var(--mb-border); background-color: #fff;
    }
    .board-write .insert .possible {
        word-break: break-all; overflow-wrap: break-word; white-space: normal;
    }
    .board-write .insert .file-select {width: 100%; box-sizing: border-box;}
    .board-write .insert input[type="text"]:focus,
    .board-write .insert .tarea:focus {outline: none; border-color: var(--mb-primary);}


    /* 상세보기 댓글 작성부분 */
    .view-comment-write .comment-text {padding-left: 60px;}
    .view-comment-write .comment-text:after {width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat;}
    .view-comment-write textarea {box-sizing: border-box;}

    /* 상세보기 댓글 부분 */
    .view-comment-list{padding-left: 0; overflow: hidden;}
}

/* ==========================================
   뱃지 스타일 (공통 및 개별)
   ========================================== */

/* 1. 공통 뱃지 스타일 */
.badge {
  display: inline-flex;       /* inline 흐름 유지 + flex 정렬 */
  align-items: center;
  justify-content: center;
  width: fit-content;
  
  font-size: 13px;            /* 뱃지 전용 글자 크기 고정 */
  line-height: 1.2;           /* 줄간격 수직 정렬 보강 */
  text-transform: none;
  vertical-align: middle;     /* 부모 텍스트와 높이 맞춤 */
  
  border-radius: 1rem;       /* radii-2xl (약 16px) */
  padding: 0.25rem 0.65rem;  /* 뱃지 내부 여백 */
}

/* 2. 개별 뱃지 스타일 */

/* ① 요청 / 기본 (회색) */
.badge-init {
  font-weight: 500;          /* medium */
  background-color: #e2e8f0; /* slate-200 */
  color: #1a202c;            /* primary-dark */
}

/* ② 진행 (푸른색) */
.badge-ing {
  font-weight: 600;          /* semibold */
  background-color: #ebf8ff; /* primary-lighter */
  color: #1a202c;            /* primary-dark */
}

/* ③ 완료 (주황/황색) */
.badge-end {
  font-weight: 600;          /* semibold */
  background-color: #fffaf0; /* warning-lighter */
  color: #dd6b20;            /* warning-dark */
}







/* ======================================================================
   MOBILE APP UI REFINEMENT — 게시판 목록 모바일 앱형 디자인
   적용 범위: 768px 이하
   목적: 검색, 정렬, 게시글 카드, 메타정보, 페이징, 글쓰기 버튼 개선
   JSP 구조 및 게시판 기능은 변경하지 않음.
   ====================================================================== */
@media all and (max-width: 768px) {

    /* 기본 화면 여백과 박스 계산 */
    ._fnctWrap,
    ._fnctWrap * {
        box-sizing: border-box;
    }

    ._fnctWrap {
        width: 100%;
        color: #111827;
    }

    /* ------------------------------------------------------------
       1. 검색 영역
       ------------------------------------------------------------ */
    .board-search {
        display: block;
        width: 100%;
        margin: 0 0 18px;
    }

    .board-search .form-search {
        padding: 16px;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
    }

    .board-search fieldset {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .board-search legend {
        display: block;
        width: 100%;
        margin: 0 0 10px;
        padding: 0;
        font-size: 15px;
        line-height: 1.4;
        font-weight: 700;
        color: #111827;
    }

    .board-search .tbl-search {
        display: flex;
        align-items: stretch;
        width: 100%;
        gap: 8px;
        table-layout: auto;
        text-align: left;
    }

    .board-search .box-title {
        display: none;
    }

    .board-search .box-sel {
        position: static;
        display: block;
        flex: 0 0 96px;
        width: 96px;
        margin: 0;
        padding: 0;
    }

    .board-search .box-sel select {
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 30px 0 12px;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        background-color: #fff;
        background-image: url('../images/arrow-search.png');
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 18px auto;
        font-family: inherit;
        font-size: 14px;
        color: #374151;
        appearance: none;
    }

    .board-search .box-search {
        position: relative;
        display: block;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 44px;
        line-height: 44px;
        overflow: hidden;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        background: #fff;
    }

    .board-search .box-search input[type="text"] {
        position: static;
        width: 100%;
        height: 100%;
        padding: 0 62px 0 12px;
        border: 0;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        color: #111827;
        text-indent: 0;
        outline: none;
    }

    .board-search .box-search input[type="text"]::placeholder {
        color: #9ca3af;
    }

    .board-search .box-search input[type="submit"] {
        position: absolute;
        top: 0;
        right: 0;
        width: 54px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0 11px 11px 0;
        background: #2563eb;
        background-image: none;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        text-indent: 0;
        cursor: pointer;
    }

    .board-search .box-sel select:focus,
    .board-search .box-search:focus-within {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        outline: none;
    }

    /* ------------------------------------------------------------
       2. 게시글 수 / 정렬 버튼
       ------------------------------------------------------------ */
    .board-rss {
        display: block;
        width: 100%;
        margin: 0 0 10px;
    }

    .board-rss .util-search {
        display: block;
        margin: 0;
    }

    .board-rss .util-search .count-txt {
        position: static;
        margin: 0;
        font-family: inherit;
        font-size: 13px;
        line-height: 1.5;
        color: #6b7280;
    }

    .board-rss .util-search .count-txt strong,
    .board-rss .util-search .count-txt .current {
        font-family: inherit;
        font-weight: 700;
        color: #111827;
    }

    .board-sort {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0 0 14px;
    }

    .board-sort form {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .board-sort .badge {
        min-width: 0;
        height: 34px;
        padding: 0 14px;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        background: #f3f4f6;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 32px;
        color: #4b5563;
        appearance: none;
        cursor: pointer;
    }

    .board-sort .badge:active,
    .board-sort .badge:focus {
        border-color: #2563eb;
        background: #eff6ff;
        color: #1d4ed8;
        outline: none;
    }

    /* ------------------------------------------------------------
       3. 게시글 목록 카드
       ------------------------------------------------------------ */
    .board-normal {
        width: 100%;
    }

    .board-normal .list-normal {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin: 0;
        padding: 0;
        border-top: 0;
        background: transparent;
    }

    .board-normal .list-normal > li,
    .board-normal .list-normal > li:hover {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    }

    .board-normal .list-normal > li:active {
        background: #fff;
        transform: none;
    }

    .board-normal .list-normal > li.notice {
        padding-left: 0;
        border-color: #bfdbfe;
        background: #fff;
        background-image: none;
    }

    .board-normal .box {
        position: relative;
        width: 100%;
        padding: 16px;
    }

    .board-normal .box > a,
    .board-normal .shadow > a {
        display: block;
        width: 100%;
        color: inherit;
        text-decoration: none;
    }

    .board-normal .deleteArtclSeqs {
        position: absolute;
        top: 18px;
        left: 14px;
        z-index: 2;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #2563eb;
    }

    .board-normal .deleteArtclSeqs + a {
        padding-left: 28px;
    }

    .board-normal .thumb {
        display: none;
    }

    .board-normal .info {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        line-height: 1.45;
    }

    .board-normal .info .title {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 5px;
        margin: 0;
        padding: 0 28px 12px 0;
    }

    .board-normal .notice .info .title::before {
        content: '공지';
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        background: #dbeafe;
        font-size: 12px;
        font-weight: 700;
        color: #1d4ed8;
    }

    .board-normal .info .title strong {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        font-family: inherit;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.45;
        letter-spacing: -0.02em;
        color: #111827;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .board-normal .reply {
        position: static;
        flex: 0 0 auto;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        color: #ef4444;
    }

    .board-normal .info .title .new,
    .board-normal .info .title .secret {
        position: static;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin: 0;
        background-size: contain;
        vertical-align: middle;
    }

    .board-normal .info .title .ing {
        display: none;
    }

    .board-normal .info .desc {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .board-normal .info .desc dl,
    .board-normal .info dl {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        margin: 0;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: #f8fafc;
        font-family: inherit;
        font-size: 13px;
        line-height: 1.35;
    }

    .board-normal .info dl::after {
        display: none;
    }

    .board-normal .info dt,
    .board-normal .info dd {
        display: block;
        min-width: 0;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }

    .board-normal .info dt {
        flex: 0 0 auto;
        padding-right: 8px;
        font-weight: 700;
        color: #4b5563;
    }

    .board-normal .info dd {
        overflow: hidden;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .board-normal .info dd .badge {
        height: 24px;
        padding: 0 10px;
        border: 0;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        line-height: 24px;
    }

    .board-normal .info .file-count {
        display: none;
    }

    .board-normal .info .file-count.file,
    .board-normal .info .file {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 22px;
        height: 22px;
        background-position: center;
        background-size: 18px auto;
        background-repeat: no-repeat;
        text-indent: -9999px;
    }

    .board-normal .list-normal .no-data {
        padding: 48px 20px;
        border-style: dashed;
        background: #f8fafc;
        color: #6b7280;
        text-align: center;
    }

    /* 상태 뱃지 색상 */
    .badge-init {
        background: #e2e8f0;
        color: #334155;
    }

    .badge-ing {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .badge-end {
        background: #ffedd5;
        color: #c2410c;
    }

    /* ------------------------------------------------------------
       4. 페이징
       ------------------------------------------------------------ */
    ._paging {
        width: 100%;
        padding: 22px 0 18px;
    }

    ._paging > ._inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    ._paging > ._inner > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background-color: #fff;
        background-size: 36px auto;
        flex-shrink: 0;
    }

    ._paging ._inner ._pageState {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 62px;
        height: 36px;
        margin: 0 4px;
        padding: 0 10px;
        border-radius: 10px;
        background: #f3f4f6;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 36px;
        color: #374151;
    }

    ._paging > ._inner > ul {
        display: none;
    }

    /* ------------------------------------------------------------
       5. 하단 고정 글쓰기 버튼
       목록 페이지의 registForm만 고정하여 상세/수정 화면 버튼에는 영향 없음
       ------------------------------------------------------------ */
    form[name="pageForm"] {
        padding-bottom: 84px;
    }

    .board-button .btn-control form[action*="artclRegistView"] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(229, 231, 235, 0.9);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
    }

    .board-button .btn-control form[action*="artclRegistView"] .btn-deco {
        display: block;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 48px;
        margin: 0;
        border-radius: 14px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        line-height: 46px;
    }

    .board-button .btn-control form[action*="artclRegistView"] .btn-deco.color2 {
        border: 1px solid #2563eb;
        background: #2563eb;
        color: #fff;
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
    }

    .board-button .btn-control form[action*="artclRegistView"] .btn-deco.color1 {
        border: 1px solid #d1d5db;
        background: #fff;
        color: #4b5563;
    }

    /* 작은 화면 보정 */
    @media all and (max-width: 390px) {
        .board-search .tbl-search {
            gap: 6px;
        }

        .board-search .box-sel {
            flex-basis: 82px;
            width: 82px;
        }

        .board-search .box-sel select,
        .board-search .box-search input[type="text"] {
            font-size: 13px;
        }

        .board-normal .box {
            padding: 14px;
        }

        .board-normal .info .title strong {
            font-size: 16px;
        }

        .board-normal .info .desc {
            gap: 6px;
        }

        .board-normal .info .desc dl,
        .board-normal .info dl {
            padding: 7px 8px;
            font-size: 12px;
        }
    }
}

/* ========================================================================== 
   MOBILE LIST REDESIGN V2 — 앱형 게시판 목록
   적용 범위: 게시판 목록 화면 / 768px 이하
   - 4개의 정보 박스를 제거하고 한 줄 메타정보로 변경
   - 진행상태는 카드 왼쪽 상단에 표시
   - 등록일·조회수·동의수는 아이콘과 함께 오른쪽 하단에 표시
   - 관리자 체크박스가 있을 때만 본문을 오른쪽으로 이동
   - 글쓰기 버튼은 학생 화면에서 플로팅 원형 버튼으로 표시
   ========================================================================== */
@media all and (max-width: 768px) {

    /* 검색 영역: 큰 박스를 없애고 한 줄 검색바로 축소 */
    .board-search {
        width: 100%;
        margin: 0 0 18px;
    }

    .board-search .form-search {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .board-search fieldset {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .board-search legend,
    .board-search .box-title {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .board-search .tbl-search {
        display: flex;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .board-search .box-sel {
        position: static;
        display: block;
        flex: 0 0 92px;
        width: 92px;
        padding: 0;
        margin: 0;
    }

    .board-search .box-sel select {
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 34px 0 12px;
        border: 1px solid #d9dee7;
        border-radius: 12px;
        background-color: #fff;
        background-position: right 8px center;
        font-family: inherit;
        font-size: 14px;
        color: #1f2937;
    }

    .board-search .box-search {
        position: relative;
        display: block;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 44px;
        line-height: 44px;
        overflow: hidden;
        border: 1px solid #d9dee7;
        border-radius: 12px;
        background: #fff;
    }

    .board-search .box-search input[type="text"] {
        position: static;
        width: 100%;
        height: 100%;
        padding: 0 54px 0 13px;
        border: 0;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 14px;
        text-indent: 0;
        color: #111827;
    }

    .board-search .box-search input[type="submit"] {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 42px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: #2563eb;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 36px;
        color: #fff;
        text-indent: 0;
    }

    /* 게시물 수와 정렬 버튼 간격 축소 */
    .board-rss {
        margin: 0 0 8px;
    }

    .board-rss .util-search .count-txt {
        font-size: 13px;
        color: #6b7280;
    }

    .board-sort {
        margin: -32px 0 10px;
    }

    .board-sort form {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
    }

    .board-sort .badge {
        height: 32px;
        padding: 0 12px;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        background: #fff;
        font-size: 13px;
        font-weight: 700;
        color: #475569;
    }

    /* 목록 전체: 카드 박스 대신 얇은 구분선 중심의 피드형 구성 */
    .board-normal .list-normal {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 1px solid #dfe3ea;
        background: #fff;
    }

    .board-normal .list-normal > li,
    .board-normal .list-normal > li.notice {
        position: relative;
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid #e5e7eb;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        transform: none;
    }

    .board-normal .list-normal > li:hover,
    .board-normal .list-normal > li:active {
        border-bottom-color: #e5e7eb;
        background: #fafafa;
        box-shadow: none;
        transform: none;
    }

    .board-normal .box {
        position: relative;
        width: 100%;
        padding: 19px 8px 15px;
        box-sizing: border-box;
    }

    .board-normal .box > a,
    .board-normal .shadow > a {
        display: block;
        width: 100%;
        min-width: 0;
        color: inherit;
        text-decoration: none;
        box-sizing: border-box;
    }

    /* 관리자 체크박스가 있는 경우에만 게시물 내용에 왼쪽 여백 부여 */
    .board-normal .deleteArtclSeqs {
        position: absolute;
        top: 20px;
        left: 8px;
        z-index: 2;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #2563eb;
    }

    .board-normal .deleteArtclSeqs + a {
        padding-left: 30px;
    }

    .board-normal .info {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        padding-top: 34px;
        line-height: 1.45;
    }

    /* 상태 뱃지: 일반 게시물의 왼쪽 상단 */
    .board-normal .info .desc .meta-status {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .board-normal .meta-status dt {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .board-normal .meta-status dd {
        display: block;
        overflow: visible;
    }

    .board-normal .meta-status .badge {
        display: inline-flex;
        align-items: center;
        width: auto;
        height: 26px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        line-height: 26px;
    }

    .board-normal .badge-init {
        background: #f1f5f9;
        color: #475569;
    }

    .board-normal .badge-ing {
        background: #e8f1ff;
        color: #2563eb;
    }

    .board-normal .badge-end {
        background: #fff3e8;
        color: #ea580c;
    }

    /* 공지는 상태 대신 공지 뱃지를 같은 위치에 표시 */
    .board-normal .notice .info {
        padding-top: 34px;
    }

    .board-normal .notice .info .title::before {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 10px;
        border-radius: 8px;
        background: #fff3e8;
        font-size: 12px;
        font-weight: 700;
        color: #ea580c;
    }

    /* 제목 */
    .board-normal .info .title {
        position: relative;
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 5px;
        margin: 0;
        padding: 0 24px 0 13px;
    }

    .board-normal .list-normal > li:not(.notice) .info .title::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 0;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #ff5a1f;
    }

    .board-normal .info .title strong {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        font-family: inherit;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.45;
        letter-spacing: -0.02em;
        color: #111827;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .board-normal .reply {
        position: static;
        flex: 0 0 auto;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        color: #ff5a1f;
    }

    /* 메타정보: 4개 박스 제거 후 오른쪽 아래 아이콘 행으로 전환 */
    .board-normal .info .desc {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        width: 100%;
        gap: 12px;
        margin-top: 15px;
        padding-top: 12px;
        border-top: 1px solid #eef0f3;
    }

    .board-normal .info .desc .meta-item:not(.meta-status) {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 19px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-family: inherit;
        font-size: 12px;
        line-height: 1.3;
        color: #6b7280;
    }

    .board-normal .meta-item:not(.meta-status) dt {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .board-normal .meta-item:not(.meta-status) dd {
        display: block;
        overflow: visible;
        font-weight: 500;
        line-height: 1.3;
        color: #6b7280;
        white-space: nowrap;
    }

    .board-normal .meta-item:not(.meta-status)::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 15px;
        height: 15px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: translateY(-50%);
        opacity: 0.9;
    }

    /* 메타정보 출력 순서: 등록일 → 조회수 → 동의수 */
    .board-normal .meta-date {
    order: 1;
    }

    .board-normal .meta-view {
    order: 2;
    }

    .board-normal .meta-comment {
    order: 3;
    }

    .board-normal .meta-agree {
    order: 4;
    }

    .board-normal .meta-date::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
    }

    .board-normal .meta-view::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
    }

    .board-normal .meta-agree::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v11H3V10h4ZM7 19h10.2a2 2 0 0 0 1.9-1.4l1.7-5.5A2 2 0 0 0 18.9 9H14l.7-3.4A2.2 2.2 0 0 0 12.6 3L7 10Z'/%3E%3C/svg%3E");
    }

    .board-normal .meta-comment::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
    }

    .board-normal .info .file-count.file,
    .board-normal .info .file {
        top: 36px;
        right: 0;
    }

    /* 권한에 따라 하단 여백 적용: 글쓰기 권한이 없으면 불필요한 빈 공간 제거 */
    form[name="pageForm"] {
        padding-bottom: 18px;
    }

    form[name="pageForm"].has-floating-write {
        padding-bottom: 92px;
    }

    /* 글쓰기 버튼: 학생 화면은 우측 하단 원형 플로팅 버튼 */
    .board-button .btn-control form[action*="artclRegistView"] {
        position: fixed;
        left: auto;
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .board-button .btn-control form[action*="artclRegistView"] .btn-deco {
        display: block;
        flex: 0 0 auto;
        box-sizing: border-box;
        margin: 0;
        font-family: inherit;
    }

    .board-button .btn-control form[action*="artclRegistView"] .btn-deco.color2 {
        width: 60px;
        min-width: 60px;
        height: 60px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: #2563eb;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 27px 27px;
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
        color: transparent;
        font-size: 0;
        line-height: 60px;
        text-indent: -9999px;
    }

    /* 관리자 화면에서만 나타나는 삭제 버튼은 글쓰기 버튼 왼쪽에 배치 */
    .board-button .btn-control form[action*="artclRegistView"] .btn-deco.color1 {
        width: auto;
        min-width: 66px;
        height: 42px;
        padding: 0 15px;
        border: 1px solid #d6dbe3;
        border-radius: 999px;
        background: #fff;
        color: #4b5563;
        font-size: 13px;
        font-weight: 700;
        line-height: 40px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
    }

    @media all and (max-width: 390px) {
        .board-search .box-sel {
            flex-basis: 84px;
            width: 84px;
        }

        .board-normal .box {
            padding-left: 5px;
            padding-right: 5px;
        }

        .board-normal .info .desc {
            gap: 9px;
        }

        .board-normal .info .desc .meta-item:not(.meta-status) {
            padding-left: 17px;
            font-size: 11px;
        }

        .board-button .btn-control form[action*="artclRegistView"] {
            right: 14px;
        }
    }
}


/* =========================================================
   모바일 게시판 목록 V3 보정
   - 검색창 기존 디자인 복구
   - 회색 배경 + 게시글 카드 간격
   - 하단 메타정보를 오른쪽 끝에서 안쪽으로 이동
   - 모바일 hover 애니메이션 제거
   ========================================================= */
@media all and (max-width: 768px) {

    /* =====================================================
       1. 검색창 기존 모바일 디자인 복구
       ===================================================== */
    .board-search {
        display: block;
        width: 100%;
        margin: 0 0 18px;
    }

    .board-search .form-search {
        padding: 16px;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        box-shadow: none;
    }

    .board-search fieldset {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .board-search legend {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        margin: 0 0 10px;
        padding: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        color: #111827;
    }

    .board-search .tbl-search {
        display: flex;
        align-items: stretch;
        width: 100%;
        gap: 8px;
        table-layout: auto;
        text-align: left;
    }

    .board-search .box-title {
        display: none;
    }

    .board-search .box-sel {
        position: static;
        display: block;
        flex: 0 0 96px;
        width: 96px;
        margin: 0;
        padding: 0;
    }

    .board-search .box-sel select {
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 30px 0 12px;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        background-color: #fff;
        background-image: url('../images/arrow-search.png');
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 18px auto;
        font-family: inherit;
        font-size: 14px;
        color: #374151;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .board-search .box-search {
        position: relative;
        display: block;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 44px;
        line-height: 44px;
        overflow: hidden;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        background: #fff;
    }

    .board-search .box-search input[type="text"] {
        position: static;
        width: 100%;
        height: 100%;
        padding: 0 62px 0 12px;
        border: 0;
        background: transparent;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 14px;
        color: #111827;
        text-indent: 0;
        outline: none;
    }

    .board-search .box-search input[type="text"]::placeholder {
        color: #9ca3af;
    }

    .board-search .box-search input[type="submit"] {
        position: absolute;
        top: 0;
        right: 0;
        width: 54px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0 11px 11px 0;
        background: #2563eb;
        background-image: none;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 44px;
        color: #fff;
        text-indent: 0;
        cursor: pointer;
    }

    .board-search .box-sel select:focus,
    .board-search .box-search:focus-within {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        outline: none;
    }




    .board-normal .list-normal {
        display: block;
        width: 100%;
        margin: 0;
        padding: 10px 8px 2px;
        border-top: 0;
        background: #f4f5f7;
        box-sizing: border-box;
    }


    /* =====================================================
       3. 게시글마다 간격이 있는 흰색 카드 적용
       ===================================================== */
    .board-normal .list-normal > li,
    .board-normal .list-normal > li.notice {
        position: relative;
        margin: 0 0 10px;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e1e5eb;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .board-normal .box {
        position: relative;
        width: 100%;
        padding: 17px 14px 14px;
        box-sizing: border-box;

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .board-normal .box > a,
    .board-normal .shadow > a {
        display: block;
        width: 100%;
        min-width: 0;
        color: inherit;
        text-decoration: none;
        box-sizing: border-box;

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }


    /* =====================================================
       4. 모바일 hover 및 움직임 제거
       ===================================================== */
    .board-normal .list-normal > li:hover,
    .board-normal .list-normal > li:focus-within {
        border-color: #e1e5eb;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* 터치 중에는 움직이지 않고 배경만 아주 약하게 변경 */
    .board-normal .list-normal > li:active {
        border-color: #e1e5eb;
        background: #f8fafc;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }


    /* =====================================================
       5. 등록일·조회수·동의수 위치 조정
       오른쪽 끝에서 18px만큼 안쪽으로 이동
       ===================================================== */
    .board-normal .info .desc {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        width: 100%;
        gap: 12px;
        margin-top: 15px;
        padding: 12px 18px 0 0;
        border-top: 1px solid #eef0f3;
        box-sizing: border-box;
    }

    .board-normal .info .desc .meta-item:not(.meta-status) {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 19px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }


    /* =====================================================
       6. 관리자 체크박스 hover·애니메이션 방지
       ===================================================== */
    .board-normal .deleteArtclSeqs {
        transition: none !important;
        animation: none !important;
    }


    /* =====================================================
       7. 작은 스마트폰 추가 보정
       ===================================================== */
    @media all and (max-width: 390px) {

        .board-search .tbl-search {
            gap: 6px;
        }

        .board-search .box-sel {
            flex-basis: 82px;
            width: 82px;
        }

        .board-search .box-sel select,
        .board-search .box-search input[type="text"] {
            font-size: 13px;
        }

        .board-normal .list-normal {
            padding-left: 6px;
            padding-right: 6px;
        }

        .board-normal .box {
            padding-left: 12px;
            padding-right: 12px;
        }

        .board-normal .info .desc {
            gap: 9px;
            padding-right: 8px;
        }

        .board-normal .info .desc .meta-item:not(.meta-status) {
            padding-left: 17px;
            font-size: 11px;
        }
    }
}

/* 모바일 게시판 배경 및 하단 정보 위치 보정 */
@media all and (max-width: 768px) {

    /* 목록 뒤 회색 배경 제거 */
    .board-normal,
    .board-normal .list-normal {
        background: transparent;
    }

    /* 등록일·조회수·동의수를 기존보다 3px 오른쪽으로 이동 */
    .board-normal .info .desc {
        padding-right: 15px;
    }
}

@media all and (max-width: 390px) {

    /* 작은 스마트폰에서도 기존보다 3px 오른쪽으로 이동 */
    .board-normal .info .desc {
        padding-right: 9px;
    }
}

/* 모바일 페이징 아이콘 잘림 및 페이지 배경 수정 */
@media all and (max-width: 768px) {

    /* 원본 이미지가 35 × 210px이므로 확대하지 않고 원본 크기로 사용 */
    ._paging > ._inner > a {
        width: 35px;
        height: 35px;
        box-sizing: border-box;

        background-image: url('../images/arrow-page.png') !important;
        background-size: 35px 210px !important;
        background-repeat: no-repeat !important;
        background-color: #fff;

        overflow: hidden;
    }

    /* 스프라이트 이미지 위치를 35px 단위로 정확하게 지정 */
    ._paging > ._inner > a._first {
        background-position: 0 0 !important;
    }

    ._paging > ._inner > a._listPrev {
        background-position: 0 -35px !important;
    }

    ._paging > ._inner > a._prev {
        background-position: 0 -70px !important;
    }

    ._paging > ._inner > a._next {
        background-position: 0 -105px !important;
    }

    ._paging > ._inner > a._listNext {
        background-position: 0 -140px !important;
    }

    ._paging > ._inner > a._last {
        background-position: 0 -175px !important;
    }

    /* 1 / 2 뒤의 회색 배경 제거 */
    ._paging ._inner ._pageState {
        min-width: auto;
        height: 35px;
        margin: 0 5px;
        padding: 0 4px;

        border: 0;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;

        line-height: 35px;
    }
}

/* =========================================================
   모바일 게시물 수 + 정렬 통합 바
   ========================================================= */

/* PC에서는 모바일 바 숨김 */
.board-list-toolbar {
    display: none;
}

@media all and (max-width: 768px) {

    /* 기존 모바일 게시물 수와 정렬 버튼 숨김 */
    .board-rss-pc,
    .board-sort-pc {
        display: none !important;
    }

    /* 전체 상단 바 */
    .board-list-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 58px;
        margin: 0 0 10px;
        padding: 11px 8px 11px 10px;
        border-bottom: 1px solid #e5e7eb;
        background: #fff;
        box-sizing: border-box;
    }

    /* 왼쪽 게시물 정보 */
    .board-list-summary {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        gap: 2px;
        font-family: inherit;
        line-height: 1.35;
        color: #6b7280;
    }

    .board-list-summary .summary-total {
        display: block;
        font-size: 13px;
        white-space: nowrap;
    }

    .board-list-summary .summary-total strong {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
    }

    .board-list-summary .summary-page {
        display: block;
        font-size: 11px;
        color: #9ca3af;
        white-space: nowrap;
    }

    .board-list-summary .summary-page strong {
        font-weight: 600;
        color: #4b5563;
    }

    /* 오른쪽 정렬 선택 영역 */
    .board-mobile-sort {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 102px;
        height: 40px;
        padding: 0 26px 0 6px;
        border: 0;
        background: transparent;
        box-sizing: border-box;
        color: #111827;
    }

    /* 정렬 아이콘 */
    .board-mobile-sort .sort-list-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        margin-right: 3px;
        color: #111827;
        pointer-events: none;
    }

    /* 실제 select */
    .board-mobile-sort .board-sort-select {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 40px;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: #111827;
        cursor: pointer;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* 오른쪽 화살표 */
    .board-mobile-sort .sort-chevron {
        position: absolute;
        top: 50%;
        right: 7px;
        width: 7px;
        height: 7px;
        margin-top: -5px;
        border-right: 2px solid #111827;
        border-bottom: 2px solid #111827;
        transform: rotate(45deg);
        pointer-events: none;
    }

    /* 모바일에서 hover 이동 효과 없음 */
    .board-mobile-sort,
    .board-mobile-sort:hover,
    .board-mobile-sort:active,
    .board-mobile-sort:focus-within,
    .board-mobile-sort .board-sort-select {
        transition: none;
        animation: none;
        transform: none;
        box-shadow: none;
    }
}

/* 폭이 작은 스마트폰 */
@media all and (max-width: 380px) {

    .board-list-toolbar {
        padding-left: 7px;
        padding-right: 4px;
    }

    .board-list-summary .summary-total {
        font-size: 12px;
    }

    .board-list-summary .summary-total strong {
        font-size: 13px;
    }

    .board-list-summary .summary-page {
        font-size: 10px;
    }

    .board-mobile-sort {
        min-width: 96px;
        padding-right: 23px;
    }

    .board-mobile-sort .board-sort-select {
        font-size: 14px;
    }
}

/* =========================================================
   모바일 페이징 수정
   - 기존 arrow-page.png 그대로 사용
   - 이미지 원본 크기 35px에 맞춤
   - 버튼 라운드·추가 테두리 제거
   - 페이지 번호 배경 제거
   ========================================================= */
@media all and (max-width: 768px) {

    ._paging {
        width: 100%;
        padding: 22px 0 18px;
        text-align: center;
    }

    ._paging > ._inner {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 35px;
        overflow: visible;
    }

    /* 페이지 이동 버튼 */
    ._paging > ._inner > a {
        display: block !important;
        flex: 0 0 35px;

        width: 35px !important;
        height: 35px !important;
        margin: 0;
        padding: 0;

        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        background-image: url('../images/arrow-page.png') !important;
        background-size: 35px 210px !important;
        background-repeat: no-repeat !important;

        box-shadow: none !important;
        overflow: hidden;

        font-size: 0;
        line-height: 35px;
        text-indent: -9999px;

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* 이전에 만든 문자 아이콘 제거 */
    ._paging > ._inner > a::before,
    ._paging > ._inner > a::after {
        display: none !important;
        content: none !important;
    }

    /* 35px 단위 스프라이트 위치 */
    ._paging > ._inner > a._first {
        background-position: 0 0 !important;
    }

    ._paging > ._inner > a._listPrev {
        background-position: 0 -35px !important;
    }

    ._paging > ._inner > a._prev {
        background-position: 0 -70px !important;
    }

    ._paging > ._inner > a._next {
        background-position: 0 -105px !important;
    }

    ._paging > ._inner > a._listNext {
        background-position: 0 -140px !important;
    }

    ._paging > ._inner > a._last {
        background-position: 0 -175px !important;
    }

    /* 현재 페이지 1 / 2 */
    ._paging ._inner ._pageState {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: auto;
        min-width: 58px;
        height: 35px;
        margin: 0 3px;
        padding: 0 4px;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 35px;
        color: #111827;
    }

    ._paging ._inner ._pageState span {
        display: inline !important;
        float: none !important;
        margin: 0;
        padding: 0 3px;
        background: transparent !important;
        line-height: 35px;
    }

    ._paging ._inner ._pageState ._curPage {
        color: #ef4444;
    }

    ._paging ._inner ._pageState ._totPage {
        color: #111827;
    }



    /* 모바일에서는 숫자 페이지 목록 숨김 */
    ._paging > ._inner > ul {
        display: none !important;
    }
}

/* 모바일 페이지 번호 슬래시 복구 */
@media all and (max-width: 768px) {

    ._paging ._inner ._pageState ._curPage::after {
        display: inline !important;
        content: "/" !important;
        margin: 0 8px;
        color: #111827;
    }

    ._paging ._inner ._pageState ._curPage,
    ._paging ._inner ._pageState ._totPage {
        display: inline-block !important;
        margin: 0;
        padding: 0;
        line-height: 35px;
    }

    ._paging ._inner ._pageState ._curPage {
        color: #ef4444;
    }

    ._paging ._inner ._pageState ._totPage {
        color: #111827;
    }
}

/* 모바일 게시글 카드 움직임 및 로딩 애니메이션 제거 */
@media all and (max-width: 768px) {

    .board-normal .list-normal > li,
    .board-normal .list-normal > li:hover,
    .board-normal .list-normal > li:active,
    .board-normal .list-normal > li:focus,
    .board-normal .list-normal > li:focus-within,

    .board-normal .list-normal > li .box,
    .board-normal .list-normal > li:hover .box,
    .board-normal .list-normal > li:active .box,

    .board-normal .list-normal > li .box > a,
    .board-normal .list-normal > li .box > a:hover,
    .board-normal .list-normal > li .box > a:active,
    .board-normal .list-normal > li .box > a:focus {
        transform: none !important;
        translate: none !important;
        scale: none !important;

        transition: none !important;
        animation: none !important;

        top: auto !important;
        margin-top: 0 !important;
    }

    /* 클릭할 때 그림자나 카드 위치가 변하지 않게 고정 */
    .board-normal .list-normal > li:hover,
    .board-normal .list-normal > li:active,
    .board-normal .list-normal > li:focus-within {
        background: #fff !important;
        border-color: #e1e5eb !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    }
}

@media all and (max-width: 768px) {

    .board-normal .list-normal > li,
    .board-normal .list-normal > li:hover,
    .board-normal .list-normal > li:active,
    .board-normal .list-normal > li:focus,
    .board-normal .list-normal > li:focus-within {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .board-normal .list-normal > li:active {
        background: #fff !important;
    }
}

/* =========================================================
   모바일 게시글 카드 클릭 시 간격이 사라지는 문제 수정
   ========================================================= */
@media all and (max-width: 768px) {

    .board-normal .list-normal > li,
    .board-normal .list-normal > li:hover,
    .board-normal .list-normal > li:active,
    .board-normal .list-normal > li:focus,
    .board-normal .list-normal > li:focus-within {
        margin: 0 0 10px !important;

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* 마지막 게시글 아래에는 불필요한 여백 제거 */
    .board-normal .list-normal > li:last-child,
    .board-normal .list-normal > li:last-child:hover,
    .board-normal .list-normal > li:last-child:active,
    .board-normal .list-normal > li:last-child:focus,
    .board-normal .list-normal > li:last-child:focus-within {
        margin-bottom: 0 !important;
    }
}

@media all and (max-width: 768px) {
    .board-normal .info .title .reply {
        display: none !important;
    }
}

/* =========================================================
   모바일 댓글 메타정보 최종 보정
   순서: 날짜 → 조회수 → 댓글 → 좋아요(동의수)
   ========================================================= */
@media all and (max-width: 768px) {

    /* 제목 옆 기존 댓글 수 (1) 숨김 */
    .board-normal .info .title .reply {
        display: none !important;
    }

    /* 메타정보 순서 */
    .board-normal .meta-date {
        order: 1 !important;
    }

    .board-normal .meta-view {
        order: 2 !important;
    }

    .board-normal .meta-comment {
        order: 3 !important;
    }

    .board-normal .meta-agree {
        order: 4 !important;
    }

    /* 댓글도 다른 메타정보와 동일한 형태로 표시 */
    .board-normal .info .desc .meta-comment {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 19px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-family: inherit;
        font-size: 12px;
        line-height: 1.3;
        color: #6b7280;
    }

    /* "댓글"이라는 dt 텍스트는 화면에서는 숨김 */
    .board-normal .meta-comment dt {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .board-normal .meta-comment dd {
        display: block;
        margin: 0;
        padding: 0;
        overflow: visible;
        font-weight: 500;
        line-height: 1.3;
        color: #6b7280;
        white-space: nowrap;
    }

    /* 댓글 아이콘 */
    .board-normal .meta-comment::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: translateY(-50%);
        opacity: 0.9;
    }

    /* 4개가 한 줄에 들어가도록 간격 살짝 축소 */
    .board-normal .info .desc {
        gap: 10px;
    }
}

@media all and (max-width: 390px) {

    .board-normal .info .desc {
        gap: 7px;
    }

    .board-normal .info .desc .meta-comment {
        padding-left: 17px;
        font-size: 11px;
    }
}

/* =========================================================
   모바일 글쓰기 본문 입력창
   ========================================================= */
@media all and (max-width: 768px) {

    /* 모바일에서는 Namo 에디터 숨김 */
    #EDITOR_AREA_CONTAINER {
        display: none !important;
    }

    /* 본문 영역 */
    .board-write .insert.editor {
        display: block;
        width: 100%;
        padding: 12px 0;
        background: #fff;
    }

    /* 실제 모바일 글쓰기 textarea */
    #cn.mobile-cn-editor {
        display: block !important;
        width: 100% !important;
        height: 300px;
        min-height: 300px;
        padding: 16px;

        border: 1px solid #d9dee7;
        border-radius: 12px;

        background: #fff;

        box-sizing: border-box;
        resize: none;

        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.65;

        color: #111827;

        outline: none;

        -webkit-appearance: none;
        appearance: none;
    }

    #cn.mobile-cn-editor::placeholder {
        color: #9ca3af;
    }

    #cn.mobile-cn-editor:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    }
}

/* =========================================================
   모바일 글쓰기 본문 디자인 통일감 보정
   ========================================================= */
@media all and (max-width: 768px) {

    /* 본문 영역 바깥 박스 느낌 제거 */
    .board-write .insert.editor {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* 본문 textarea를 제목/작성자 입력칸과 비슷한 톤으로 정리 */
    #cn.mobile-cn-editor {
        display: block !important;
        width: 100% !important;
        min-height: 260px !important;
        height: 260px !important;

        margin: 0 !important;
        padding: 14px 16px !important;

        border: 1px solid #cfd6df !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        box-shadow: none !important;

        box-sizing: border-box !important;
        resize: none !important;

        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        color: #111827 !important;

        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* placeholder도 위 입력칸이랑 비슷하게 */
    #cn.mobile-cn-editor::placeholder {
        color: #a3acb8 !important;
    }

    /* 포커스 시 너무 튀지 않게 */
    #cn.mobile-cn-editor:focus {
        border-color: #b9c4d3 !important;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.06) !important;
        background: #fff !important;
    }
}


@media all and (max-width: 768px) {

    .board-button .btn-mine form,
    .board-button .btn-control form {
        gap: 10px;
    }
}

/* =========================================================
   MOBILE ARTICLE VIEW V1
   게시글 상세페이지 모바일 앱 UI
   ========================================================= */
@media all and (max-width: 768px) {

    /* =====================================================
       1. 상세페이지 상단 고정 헤더
       ===================================================== */

    .mobile-view-header {
        position: sticky;
        top: 0;
        z-index: 500;

        display: flex;
        align-items: center;

        width: 100%;
        height: 54px;

        margin: 0 0 18px;
        padding: 0 14px;

        border-bottom: 1px solid #e5e7eb;
        background: rgba(255,255,255,0.96);

        box-sizing: border-box;

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .mobile-view-back {
        position: relative;

        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        margin: 0 8px 0 -7px;
        padding: 0;

        border: 0;
        background: transparent;

        cursor: pointer;
    }

    .mobile-back-icon {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 11px;
        height: 11px;

        border-left: 2px solid #111827;
        border-bottom: 2px solid #111827;

        transform:
            translate(-35%, -50%)
            rotate(45deg);
    }

    .mobile-view-header-title {
        font-family: inherit;
        font-size: 17px;
        font-weight: 700;

        color: #111827;
    }


    /* =====================================================
       2. 게시글 헤더
       ===================================================== */

    .board-view-info {
        padding: 0 16px;

        font-size: initial;
    }

    .view-info {
        border: 0 !important;
    }

    .mobile-view-status {
        display: block;

        margin: 0 0 10px;
    }

    .mobile-view-status .badge {
        height: 26px;

        padding: 0 10px;

        border: 0;
        border-radius: 8px;

        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        line-height: 26px;
    }

    .mobile-view-status .badge-init {
        background: #f1f5f9;
        color: #475569;
    }

    .mobile-view-status .badge-ing {
        background: #e8f1ff;
        color: #2563eb;
    }

    .mobile-view-status .badge-end {
        background: #fff3e8;
        color: #ea580c;
    }


    /* 제목 */

    .view-info .view-title {
        margin: 0 !important;
        padding: 0 0 15px !important;

        border: 0 !important;
        background: transparent !important;

        font-family: inherit !important;
        font-size: 21px !important;
        font-weight: 700 !important;

        line-height: 1.45 !important;
        letter-spacing: -0.02em;

        text-align: left !important;

        color: #111827 !important;
    }


    /* =====================================================
       3. 작성 정보
       기존 표 UI → 한 줄 메타정보
       ===================================================== */

    .view-detail {
        display: block !important;

        width: 100% !important;

        padding: 0 0 16px !important;

        border-bottom: 1px solid #e5e7eb !important;

        text-align: left !important;
    }

    .view-detail .view-util {
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;

        width: 100% !important;

        gap: 7px 14px;

        margin: 0 !important;

        font-family: inherit !important;
        font-size: 12px !important;

        color: #6b7280 !important;
    }


    /* 모든 기존 표 형태 제거 */

    .view-detail .view-util dl {
        display: inline-flex !important;
        align-items: center;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;
    }

    .view-detail .view-util dl::after {
        display: none !important;
    }


    /* 수정일은 모바일에서 제거 */
    .view-detail .view-util dl.modify {
        display: none !important;
    }


    .view-detail .view-util dt,
    .view-detail .view-util dd {
        display: inline !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        font-family: inherit !important;
        font-size: 12px !important;

        line-height: 1.4 !important;

        color: #6b7280 !important;
    }


    .view-detail .view-util dt {
        margin-right: 4px !important;

        font-weight: 500 !important;
    }


    .view-detail .view-util dd {
        font-weight: 500 !important;
        color: #4b5563 !important;
    }


    /* link 복사 */

    .view-detail .view-util dl:last-child {
        margin-left: auto !important;
    }

    .view-detail .tiny-btn {
        height: 28px;

        padding: 0 9px;

        border: 1px solid #d9dee7;
        border-radius: 7px;

        background: #fff;

        font-size: 11px;
        line-height: 26px;

        color: #6b7280;
    }


    .view-detail .view-share {
        display: none !important;
    }


    /* =====================================================
       4. 게시글 본문
       ===================================================== */

    .view-con {
        min-height: 150px;

        margin: 0 !important;
        padding: 24px 16px 30px !important;

        border: 0 !important;

        background: #fff;

        font-family: inherit !important;
        font-size: 16px !important;

        line-height: 1.75 !important;

        color: #222 !important;

        word-break: break-word;
    }

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


    /* =====================================================
       5. 첨부파일
       ===================================================== */

    .view-file {
        margin: 0 16px 20px !important;

        overflow: hidden;

        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }

    .view-file .row {
        display: flex !important;
        align-items: center;

        width: 100% !important;

        margin: 0;
        padding: 0;

        border: 0 !important;
        border-bottom: 1px solid #eef0f3 !important;

        box-sizing: border-box;
    }

    .view-file .row:last-child {
        border-bottom: 0 !important;
    }

    .view-file .row .title {
        display: block !important;

        flex: 0 0 82px;

        width: 82px !important;

        padding: 13px 10px !important;

        background: #f8fafc;

        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 600 !important;

        text-align: center !important;

        color: #64748b !important;
    }

    .view-file .row .insert {
        display: block !important;

        flex: 1 1 auto;

        width: auto !important;

        padding: 13px !important;

        font-family: inherit !important;
        font-size: 13px !important;

        color: #4b5563;
    }


    /* =====================================================
       6. 이전글 / 다음글 영역은 모바일에서 숨김
       상단 뒤로가기 사용
       ===================================================== */

    .view-navi {
        display: none !important;
    }


    /* =====================================================
       7. 동의 / 수정 / 삭제
       ===================================================== */

    .board-button.view {
        display: block !important;

        width: 100%;

        margin: 0 !important;
        padding: 0 16px 24px;

        box-sizing: border-box;

        text-align: left !important;
    }

    .board-button.view form {
        width: 100%;
    }

    .board-button.view .btn-control {
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;

        width: 100% !important;

        gap: 8px;

        margin: 0 !important;
    }

    .board-button.view .btn-deco {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: auto !important;
        min-width: 72px;

        height: 42px !important;

        margin: 0 !important;
        padding: 0 16px !important;

        border-radius: 9px !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 40px !important;
    }

    /* 동의 */

    .board-button.view .btn-deco.color6 {
        flex: 1 1 auto;

        border: 1px solid #2563eb !important;

        background: #2563eb !important;

        color: #fff !important;
    }


    /* 수정 / 삭제 */

    .board-button.view .btn-deco.color1,
    .board-button.view .btn-deco.color4 {
        border: 1px solid #d9dee7 !important;

        background: #fff !important;

        color: #4b5563 !important;
    }


    /* 모바일에서 기존 목록 버튼 제거 */

    .board-button.view .mobile-list-button {
        display: none !important;
    }


    /* =====================================================
       8. 댓글 전체
       ===================================================== */

    .view-comment {
        width: 100%;

        margin: 0;
        padding: 0 16px 90px;

        box-sizing: border-box;

        border-top: 8px solid #f7f8fa;
    }

    .view-comment-wrap {
        position: static !important;

        margin: 0 !important;
        padding: 20px 0 0 !important;

        border: 0 !important;
    }


    /* 댓글 제목 */

    .mobile-comment-heading {
        display: flex;
        align-items: center;

        gap: 6px;

        margin: 0 0 16px;

        font-family: inherit;
    }

    .mobile-comment-heading strong {
        font-size: 17px;
        font-weight: 700;

        color: #111827;
    }

    .mobile-comment-heading span {
        font-size: 14px;
        font-weight: 700;

        color: #2563eb;
    }


    /* =====================================================
       9. 댓글 입력창
       화면 하단 고정
       ===================================================== */

    .view-comment-write {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 900;

        width: 100%;

        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));

        border-top: 1px solid #e5e7eb;

        background: rgba(255,255,255,0.97);

        box-shadow: 0 -5px 18px rgba(15,23,42,0.06);

        box-sizing: border-box;

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .view-comment-write fieldset {
        display: flex;
        align-items: flex-end;

        width: 100%;

        gap: 8px;

        margin: 0;
        padding: 0;

        border: 0;
    }

    .view-comment-write legend,
    .view-comment-write .name {
        display: none !important;
    }

    .view-comment-write .comment {
        display: flex;
        align-items: flex-end;

        flex: 1 1 auto;

        width: 100%;

        gap: 8px;
    }

    .view-comment-write .comment-text {
        flex: 1 1 auto;

        padding: 0 !important;
    }

    .view-comment-write .comment-text::after {
        display: none !important;
    }

    .view-comment-write textarea {
        display: block;

        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 100px;

        margin: 0;
        padding: 11px 13px;

        border: 1px solid #d9dee7 !important;
        border-radius: 12px;

        background: #f8fafc !important;

        box-sizing: border-box;

        resize: none;

        font-family: inherit !important;
        font-size: 14px !important;

        line-height: 1.45;

        color: #111827 !important;

        outline: none;
    }

    .view-comment-write textarea::placeholder {
        color: #9ca3af;
    }

    .view-comment-write textarea:focus {
        border-color: #2563eb !important;
        background: #fff !important;
    }


    /* 댓글 등록 버튼 */

    .view-comment-write .small-btn-box {
        flex: 0 0 auto;

        margin: 0 !important;
    }

    .view-comment-write .samll-btn {
        width: 62px;
        height: 44px;

        margin: 0 !important;
        padding: 0 !important;

        border: 0;
        border-radius: 11px;

        background: #2563eb !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 700;

        line-height: 44px !important;

        color: #fff !important;
    }


    /* =====================================================
       10. 댓글 목록
       ===================================================== */

    .view-comment-list {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none;
    }

    .view-comment-list > li {
        position: relative;

        width: 100%;

        margin: 0 !important;
        padding: 16px 34px 17px 42px !important;

        border: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;

        background: #fff !important;

        box-sizing: border-box;
    }


    /* 간단한 사용자 아이콘 */

    .view-comment-list > li::before {
        content: '';

        position: absolute;

        top: 17px;
        left: 4px;

        width: 30px;
        height: 30px;

        border-radius: 50%;

        background-color: #f1f5f9;

        background-image: url('../images/ico-people.png');
        background-repeat: no-repeat;
        background-position: center;
    }


    .view-comment-list .title {
        display: block !important;

        margin: 0 0 6px;
        padding: 0 !important;

        background: none !important;

        font-family: inherit !important;
    }

    .view-comment-list .title .date {
        position: static !important;

        display: block;

        margin: 0 !important;
        padding: 0 !important;

        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 400;

        color: #9ca3af !important;
    }

    .view-comment-list .title .date::after {
        display: none !important;
    }


    .view-comment-list .comment {
        margin: 0 !important;
        padding: 0 !important;

        font-family: inherit !important;
        font-size: 14px !important;

        line-height: 1.6 !important;

        color: #222 !important;
    }


    /* 댓글 삭제 X */

    .view-comment-list .del-btn {
        position: absolute !important;

        top: 15px !important;
        right: 4px !important;

        width: 24px !important;
        height: 24px !important;

        margin: 0 !important;

        border: 0;
        border-radius: 50%;

        background-color: transparent !important;
        background-size: 8px;

        opacity: 0.45;
    }


    /* =====================================================
       11. 관리자 답변
       ===================================================== */

    .view-answer {
        position: relative;

        margin: 8px 16px 24px !important;
        padding: 18px !important;

        border: 1px solid #e5e7eb !important;
        border-top: 1px solid #e5e7eb !important;
        border-radius: 12px;

        background: #f8fafc;
    }


    /* 기존 파란 리본 제거 */

    .view-answer::after {
        display: none !important;
    }


    .view-answer::before {
        content: '관리자 답변';

        display: inline-flex;
        align-items: center;

        height: 25px;

        margin-bottom: 12px;
        padding: 0 9px;

        border-radius: 7px;

        background: #e8f1ff;

        font-family: inherit;
        font-size: 11px;
        font-weight: 700;

        color: #2563eb;
    }


    .view-answer .answer-title {
        padding: 0 !important;
    }

    .view-answer .answer-title .title {
        margin: 0 0 5px;

        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 700;

        line-height: 1.5;

        color: #111827 !important;
    }


    .view-answer .answer-info {
        margin: 0 0 14px !important;

        font-family: inherit !important;
        font-size: 11px !important;

        color: #9ca3af !important;
    }

    .view-answer .answer-info .writer::after {
        top: 3px;
    }


    .view-answer .answer {
        margin: 0 !important;
        padding: 15px !important;

        border-radius: 9px;

        background: #fff !important;

        font-family: inherit !important;
        font-size: 14px !important;

        line-height: 1.7 !important;

        color: #374151 !important;
    }


    .view-answer .answer-button {
        display: flex;

        justify-content: flex-end;

        gap: 7px;

        margin: 14px 0 0 !important;
        padding: 0 !important;
    }

    .view-answer .answer-button .btn-deco {
        min-width: 65px;

        height: 36px;

        border-radius: 8px;

        font-size: 12px;

        line-height: 34px;
    }
}

/* 모바일 전용 상세페이지 요소 - PC에서는 숨김 */
.mobile-view-header,
.mobile-view-status,
.mobile-comment-heading {
    display: none;
}

@media all and (max-width: 768px) {

    .mobile-view-header {
        display: flex;
    }

    .mobile-view-status {
        display: block;
    }

    .mobile-comment-heading {
        display: flex;
    }

    /* 제목에 기존 [요청] 말머리가 중복되지 않도록 모바일에서 숨김 */
    .view-title-openwrd {
        display: none;
    }
}

/* =========================================================
   MOBILE ARTICLE VIEW V2
   상세페이지 2차 보정
   ========================================================= */
@media all and (max-width: 768px) {

    /* =====================================================
       1. 상단 뒤로가기 바
       스크롤을 내려도 항상 화면 상단 유지
       ===================================================== */

    .article-view-page {
        padding-top: 56px !important;
        box-sizing: border-box;
    }

    .article-view-page .mobile-view-header {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        z-index: 3000 !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 56px !important;

        margin: 0 !important;
        padding: 0 14px !important;

        border: 0 !important;
        border-bottom: 1px solid #e8eaee !important;

        background: rgba(255, 255, 255, 0.98) !important;

        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;

        box-sizing: border-box !important;

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .article-view-page .mobile-view-back {
        position: relative !important;

        display: block !important;

        width: 40px !important;
        height: 40px !important;

        flex: 0 0 40px !important;

        margin: 0 7px 0 -8px !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        cursor: pointer;
    }

    .article-view-page .mobile-back-icon {
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        width: 11px !important;
        height: 11px !important;

        border: 0 !important;
        border-left: 2px solid #111827 !important;
        border-bottom: 2px solid #111827 !important;

        transform: translate(-35%, -50%) rotate(45deg) !important;
    }

    .article-view-page .mobile-view-header-title {
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 700 !important;

        color: #111827 !important;
    }


    /* =====================================================
       2. 제목 영역
       참고 이미지처럼 위계와 간격 정리
       ===================================================== */

    .article-view-page .board-view-info {
        margin: 0 !important;
        padding: 22px 16px 0 !important;

        border: 0 !important;

        background: #fff !important;

        box-sizing: border-box !important;
    }

    .article-view-page .view-info {
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    /* 상태 */
    .article-view-page .mobile-view-status {
        display: block !important;

        margin: 0 0 11px !important;
        padding: 0 !important;
    }

    .article-view-page .mobile-view-status .badge {
        height: 24px !important;

        padding: 0 9px !important;

        border: 0 !important;
        border-radius: 7px !important;

        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 700 !important;

        line-height: 24px !important;
    }


    /* 제목 */
    .article-view-page .view-info .view-title {
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        font-family: inherit !important;
        font-size: 22px !important;
        font-weight: 700 !important;

        line-height: 1.4 !important;
        letter-spacing: -0.025em !important;

        text-align: left !important;

        color: #17191c !important;
    }


    /* =====================================================
       3. 제목 아래 정보
       등록일은 제목 바로 아래에 연하게
       나머지는 그 아래 작은 정보 행
       ===================================================== */

    .article-view-page .view-detail {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 9px 0 18px !important;

        border: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;

        background: transparent !important;

        text-align: left !important;
    }

    .article-view-page .view-detail .view-util {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        width: 100% !important;

        gap: 7px 14px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family: inherit !important;
    }

    .article-view-page .view-detail .view-util dl {
        display: inline-flex !important;
        align-items: center !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;
    }

    .article-view-page .view-detail .view-util dl::after {
        display: none !important;
    }


    /* 수정일 / 카테고리 / IP 모바일에서 숨김 */
    .article-view-page .view-detail .modify,
    .article-view-page .view-detail .cate,
    .article-view-page .view-detail .ip {
        display: none !important;
    }


    /* 등록일을 제목 바로 아래 한 줄 차지 */
    .article-view-page .view-detail .write {
        order: 1 !important;

        display: flex !important;

        flex: 0 0 100% !important;

        width: 100% !important;

        margin: 0 0 6px !important;
    }

    .article-view-page .view-detail .write dt {
        display: none !important;
    }

    .article-view-page .view-detail .write dd {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 400 !important;

        line-height: 1.4 !important;

        color: #a0a5ad !important;
    }


    /* 동의수 */
    .article-view-page .view-detail .agree,
    .article-view-page .view-detail .writer {
        order: 2 !important;
    }


    /* 조회수 */
    .article-view-page .view-detail .count {
        order: 3 !important;
    }


    /* 링크 복사 */
    .article-view-page .view-detail .link-copy {
        order: 4 !important;

        margin-left: auto !important;
    }


    .article-view-page .view-detail .view-util dt,
    .article-view-page .view-detail .view-util dd {
        display: inline !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        font-family: inherit !important;
        font-size: 12px !important;

        line-height: 1.4 !important;

        color: #7b828d !important;
    }

    .article-view-page .view-detail .view-util dt {
        margin-right: 4px !important;

        font-weight: 500 !important;
    }

    .article-view-page .view-detail .view-util dd {
        font-weight: 600 !important;

        color: #505762 !important;
    }


    /* 링크복사 버튼 */
    .article-view-page .view-detail .tiny-btn {
        width: auto !important;
        height: 30px !important;

        padding: 0 10px !important;

        border: 1px solid #dfe3e8 !important;
        border-radius: 8px !important;

        background: #fff !important;

        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 600 !important;

        line-height: 28px !important;

        color: #67707d !important;
    }


    /* =====================================================
       4. 본문
       ===================================================== */

    .article-view-page .view-con {
        min-height: 130px !important;

        margin: 0 !important;
        padding: 25px 16px 30px !important;

        border: 0 !important;

        background: #fff !important;

        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: 1.75 !important;

        color: #282b30 !important;
    }


    /* =====================================================
       5. 첨부파일
       ===================================================== */

    .article-view-page .view-file {
        margin: 0 16px 22px !important;

        border: 1px solid #e6e8ec !important;
        border-radius: 10px !important;

        overflow: hidden !important;
    }


    /* =====================================================
       6. 게시글 액션 버튼
       동의 / 답변 / 삭제 / 수정
       ===================================================== */

    .article-view-page .board-button.view {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 16px 24px !important;

        box-sizing: border-box !important;
    }

    .article-view-page .board-button.view .btn-control {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        width: 100% !important;

        gap: 8px !important;

        margin: 0 !important;
    }

    .article-view-page .board-button.view .btn-deco {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 72px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 15px !important;

        border-radius: 9px !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 600 !important;

        line-height: 40px !important;
    }


    /* 동의 */
    .article-view-page .board-button.view .color6 {
        flex: 1 1 auto !important;

        border: 1px solid #2563eb !important;

        background: #2563eb !important;

        color: #fff !important;
    }


    /* 답변 - 관리자 버튼 */
    .article-view-page .board-button.view .color3 {
        display: inline-flex !important;

        border: 1px solid #06988d !important;

        background: #06988d !important;

        color: #fff !important;
    }


    /* 삭제 / 수정 */
    .article-view-page .board-button.view .color1,
    .article-view-page .board-button.view .color4 {
        border: 1px solid #d8dde5 !important;

        background: #fff !important;

        color: #4b5563 !important;
    }


    /* 모바일 목록 버튼은 숨김 */
    .article-view-page .mobile-list-button {
        display: none !important;
    }


    /* =====================================================
       7. 댓글 영역
       댓글 입력창을 더 이상 화면에 fixed 시키지 않음
       ===================================================== */

    .article-view-page .view-comment {
        position: relative !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-top: 8px solid #f5f6f8 !important;

        background: #fff !important;

        box-sizing: border-box !important;
    }

    .article-view-page .view-comment-wrap {
        position: relative !important;

        margin: 0 !important;
        padding: 20px 16px 26px !important;

        border: 0 !important;

        background: #fff !important;
    }


    /* 댓글 N */
    .article-view-page .mobile-comment-heading {
        display: flex !important;
        align-items: center !important;

        gap: 5px !important;

        margin: 0 0 14px !important;
    }

    .article-view-page .mobile-comment-heading strong {
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 700 !important;

        color: #17191c !important;
    }

    .article-view-page .mobile-comment-heading span {
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;

        color: #2563eb !important;
    }


    /* 댓글 작성 */
    .article-view-page .view-comment-write {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        z-index: auto !important;

        display: block !important;

        width: 100% !important;

        margin: 0 0 20px !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        backdrop-filter: none !important;
    }

    /* 작성자 입력칸 완전 숨김 */
    .article-view-page .view-comment-write .name {
        display: none !important;
    }

    .article-view-page .view-comment-write fieldset {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }

    .article-view-page .view-comment-write legend {
        display: none !important;
    }

    .article-view-page .view-comment-write .comment {
        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .article-view-page .view-comment-write .comment-text {
        position: relative !important;

        flex: 1 1 auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .article-view-page .view-comment-write .comment-text::after {
        display: none !important;
    }

    .article-view-page .view-comment-write textarea {
        display: block !important;

        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 12px 13px !important;

        border: 1px solid #d8dde5 !important;
        border-radius: 10px !important;

        background: #fafbfc !important;

        box-sizing: border-box !important;

        resize: none !important;

        font-family: inherit !important;
        font-size: 14px !important;

        line-height: 1.5 !important;

        color: #222 !important;

        outline: none !important;
    }

    .article-view-page .view-comment-write textarea::placeholder {
        color: #a0a5ad !important;
    }

    .article-view-page .view-comment-write textarea:focus {
        border-color: #2563eb !important;

        background: #fff !important;
    }

    .article-view-page .view-comment-write .small-btn-box {
        flex: 0 0 66px !important;

        width: 66px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .article-view-page .view-comment-write .samll-btn {
        display: block !important;

        width: 66px !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 10px !important;

        background: #2563eb !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 700 !important;

        line-height: 48px !important;

        color: #fff !important;
    }


    /* =====================================================
       8. 댓글 목록
       ===================================================== */

    .article-view-page .view-comment-list {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .article-view-page .view-comment-list > li {
        position: relative !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 17px 30px 17px 43px !important;

        border: 0 !important;
        border-top: 1px solid #eceef1 !important;

        background: #fff !important;

        box-sizing: border-box !important;
    }

    /* 기본 프로필 아이콘 */
    .article-view-page .view-comment-list > li::before {
        content: '';

        position: absolute !important;

        top: 18px !important;
        left: 3px !important;

        width: 30px !important;
        height: 30px !important;

        border-radius: 50% !important;

        background: #f1f3f5 url('../images/ico-people.png') no-repeat center !important;

        background-size: 13px auto !important;
    }

    .article-view-page .view-comment-list .title {
        display: block !important;

        margin: 0 0 5px !important;
        padding: 0 !important;

        background: none !important;
    }

    .article-view-page .view-comment-list .title .date {
        position: static !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 400 !important;

        line-height: 1.4 !important;

        color: #a0a5ad !important;
    }

    .article-view-page .view-comment-list .title .date::after {
        display: none !important;
    }

    .article-view-page .view-comment-list .comment {
        margin: 0 !important;
        padding: 0 !important;

        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 400 !important;

        line-height: 1.6 !important;

        color: #292c31 !important;
    }

    .article-view-page .view-comment-list .del-btn {
        position: absolute !important;

        top: 15px !important;
        right: 2px !important;

        width: 24px !important;
        height: 24px !important;

        margin: 0 !important;

        border: 0 !important;

        background-color: transparent !important;

        opacity: 0.45 !important;
    }


    /* =====================================================
       9. 관리자 답변
       이전에 내가 바꾼 디자인 전부 취소
       기존 style.css 디자인으로 복구
       ===================================================== */

    .article-view-page .view-answer {
        position: relative !important;

        margin: 0 0 40px !important;
        padding: 15px 40px 30px 40px !important;

        border: 1px solid #d9e0e3 !important;
        border-top: 2px solid #262626 !important;
        border-radius: 0 !important;

        background: transparent !important;
    }

    /* 내가 추가했던 관리자 답변 뱃지 제거 */
    .article-view-page .view-answer::before {
        display: none !important;

        content: none !important;
    }

    /* 원래 답글 리본 복구 */
    .article-view-page .view-answer::after {
        content: '답글' !important;

        position: absolute !important;

        top: 0 !important;
        left: 40px !important;

        display: block !important;

        width: 50px !important;
        height: 63px !important;

        padding-top: 9px !important;

        background: url('../images/ico-reply.png') no-repeat left top !important;

        text-align: center !important;

        font-family: 'Noto Regular' !important;
        font-size: 16px !important;

        color: #fff !important;
    }

    .article-view-page .view-answer .answer-title {
        padding-left: 65px !important;
    }

    .article-view-page .view-answer .answer-title .title {
        margin: 0 !important;

        font-family: 'Noto Regular' !important;
        font-size: 18px !important;
        font-weight: normal !important;

        line-height: 1.2 !important;

        color: #333 !important;
    }

    .article-view-page .view-answer .answer-info {
        margin-bottom: 20px !important;

        font-family: 'Noto Light' !important;
        font-size: 16px !important;

        color: #777 !important;
    }

    .article-view-page .view-answer .answer-info .writer {
        position: relative !important;

        margin-right: 10px !important;
        padding-right: 10px !important;
    }

    .article-view-page .view-answer .answer-info .writer::after {
        content: '' !important;

        position: absolute !important;

        top: 8px !important;
        right: 0 !important;

        display: block !important;

        width: 1px !important;
        height: 10px !important;

        background: #c3c3c3 !important;
    }

    .article-view-page .view-answer .answer {
        margin: 0 !important;
        padding: 11px 20px 13px 20px !important;

        border-radius: 0 !important;

        background: #f2f2f2 !important;

        font-family: 'Noto Light' !important;
        font-size: 16px !important;

        line-height: normal !important;

        color: #666 !important;
    }

    /* 관리자 답변 수정/삭제 버튼도 원래 형태 */
    .article-view-page .view-answer .board-button.answer-button {
        margin-top: 30px !important;
        padding: 0 !important;

        text-align: right !important;
    }

    .article-view-page .view-answer .answer-button .btn-deco {
        display: inline-block !important;

        width: auto !important;
        min-width: 80px !important;
        height: 40px !important;

        margin: 0 1px !important;
        padding: 0 !important;

        border-radius: 100px !important;

        font-family: 'Noto DemiLight' !important;
        font-size: 14px !important;

        line-height: 37px !important;

        text-align: center !important;
    }
}

/* =========================================================
   모바일 상세페이지 메타정보 한 줄 정렬
   등록일 · 동의수 · 조회수 · 링크복사
   ========================================================= */
@media all and (max-width: 768px) {

    .article-view-page .view-detail {
        padding: 10px 0 16px !important;
    }

    .article-view-page .view-detail .view-util {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        width: 100% !important;

        gap: 10px !important;

        overflow: visible !important;
    }

    /* 수정일은 혹시 JSP에 남아 있어도 숨김 */
    .article-view-page .view-detail .modify {
        display: none !important;
    }

    /* 등록일도 더 이상 한 줄 전체를 차지하지 않음 */
    .article-view-page .view-detail .write {
        order: 1 !important;

        display: inline-flex !important;
        align-items: center !important;

        flex: 0 0 auto !important;
        width: auto !important;

        margin: 0 !important;
    }

    /* 등록일 라벨 다시 표시 */
    .article-view-page .view-detail .write dt {
        display: inline !important;
    }

    /* 동의수 */
    .article-view-page .view-detail .agree,
    .article-view-page .view-detail .writer {
        order: 2 !important;
        flex: 0 0 auto !important;
    }

    /* 조회수 */
    .article-view-page .view-detail .count {
        order: 3 !important;
        flex: 0 0 auto !important;
    }

    /* 링크복사 */
    .article-view-page .view-detail .link-copy {
        order: 4 !important;

        flex: 0 0 auto !important;

        margin: 0 0 0 auto !important;
    }

    /* 메타정보 글씨 작게 통일 */
    .article-view-page .view-detail .view-util dt,
    .article-view-page .view-detail .view-util dd {
        font-size: 11px !important;
        line-height: 1.3 !important;

        white-space: nowrap !important;
    }

    .article-view-page .view-detail .view-util dt {
        margin-right: 3px !important;

        color: #8a919c !important;
        font-weight: 500 !important;
    }

    .article-view-page .view-detail .view-util dd {
        color: #4b5563 !important;
        font-weight: 600 !important;
    }

    /* link복사 버튼도 조금 작게 */
    .article-view-page .view-detail .tiny-btn {
        height: 28px !important;

        padding: 0 8px !important;

        border-radius: 7px !important;

        font-size: 10px !important;
        line-height: 26px !important;
    }
}

/* =========================================================
   모바일 댓글 삭제 버튼
   ========================================================= */
@media all and (max-width: 768px) {

    .article-view-page .view-comment-list > li {
        position: relative !important;
        padding-right: 52px !important;
    }

    .article-view-page .mobile-comment-delete {
        position: absolute;

        top: 14px;
        right: 4px;

        width: auto;
        height: 28px;

        margin: 0;
        padding: 0 8px;

        border: 0;
        border-radius: 6px;

        background: transparent;

        font-family: inherit;
        font-size: 11px;
        font-weight: 500;
        line-height: 28px;

        color: #9ca3af;

        cursor: pointer;
    }

    .article-view-page .mobile-comment-delete:active {
        background: #f3f4f6;
        color: #ef4444;
    }

    /* 기존 del-btn이 혹시 남아 있으면 숨김 */
    .article-view-page .view-comment-list .del-btn {
        display: none !important;
    }
}

/* =========================================================
   모바일 게시글 카드 하단 메타정보 최종 고정
   날짜 → 조회수 → 댓글 → 동의수
   ========================================================= */
@media all and (max-width: 768px) {

    .board-normal .info .desc {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;

        width: 100% !important;

        gap: 10px !important;

        margin-top: 15px !important;
        padding: 12px 12px 0 0 !important;

        border-top: 1px solid #eef0f3 !important;

        box-sizing: border-box !important;
    }


    /* 공통 메타정보 */
    .board-normal .info .desc .meta-item:not(.meta-status) {
        position: relative !important;

        display: inline-flex !important;
        align-items: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 0 0 18px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        font-family: inherit !important;
        font-size: 11px !important;
        line-height: 1.3 !important;

        color: #6b7280 !important;
    }


    /* dt 텍스트 숨김 */
    .board-normal .info .desc .meta-item:not(.meta-status) dt {
        position: absolute !important;

        width: 1px !important;
        height: 1px !important;

        margin: -1px !important;
        padding: 0 !important;

        overflow: hidden !important;

        clip: rect(0, 0, 0, 0) !important;

        white-space: nowrap !important;

        border: 0 !important;
    }


    .board-normal .info .desc .meta-item:not(.meta-status) dd {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 500 !important;

        line-height: 1.3 !important;

        white-space: nowrap !important;

        color: #6b7280 !important;
    }


    /* 공통 아이콘 설정 */
    .board-normal .info .desc .meta-item:not(.meta-status)::before {
        content: '' !important;

        position: absolute !important;

        top: 50% !important;
        left: 0 !important;

        width: 14px !important;
        height: 14px !important;

        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;

        transform: translateY(-50%) !important;

        opacity: 0.9 !important;
    }


    /* 출력 순서 */
    .board-normal .meta-date {
        order: 1 !important;
    }

    .board-normal .meta-view {
        order: 2 !important;
    }

    .board-normal .meta-comment {
        order: 3 !important;
    }

    .board-normal .meta-agree {
        order: 4 !important;
    }


    /* 날짜 */
    .board-normal .info .desc .meta-date::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;
    }


    /* 조회수 */
    .board-normal .info .desc .meta-view::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") !important;
    }


    /* 댓글 */
    .board-normal .info .desc .meta-comment::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E") !important;
    }


    /* 동의수 */
    .board-normal .info .desc .meta-agree::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v11H3V10h4ZM7 19h10.2a2 2 0 0 0 1.9-1.4l1.7-5.5A2 2 0 0 0 18.9 9H14l.7-3.4A2.2 2.2 0 0 0 12.6 3L7 10Z'/%3E%3C/svg%3E") !important;
    }


    /* 제목 옆 기존 댓글수는 확실히 제거 */
    .board-normal .info .title .reply {
        display: none !important;
    }
}


/* =========================================================
   모바일 페이지네이션 최종
   «  ‹  1  2  3  ›  »
   ========================================================= */
@media all and (max-width: 768px) {

    ._paging {
        display: flex !important;
        justify-content: center !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 26px 0 20px !important;
    }


    ._paging > ._inner {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        gap: 2px !important;
    }


    /* 기존 1 / 2 표시 제거 */
    ._paging ._inner ._pageState {
        display: none !important;
    }


    /* 숫자 */
    ._paging > ._inner > ul {
        display: flex !important;
        align-items: center !important;

        width: auto !important;

        margin: 0 4px !important;
        padding: 0 !important;

        gap: 2px !important;

        list-style: none !important;
    }


    ._paging > ._inner > ul > li {
        display: block;
        float: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    ._paging > ._inner > ul > li > a,
    ._paging > ._inner > ul > li > strong {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 38px !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: transparent !important;

        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 38px !important;

        text-decoration: none !important;

        color: #555 !important;
    }


    /* 현재 페이지 */
    ._paging > ._inner > ul > li > strong {
        background: #2583e3 !important;
        color: #fff !important;

        font-weight: 700 !important;

        cursor: default !important;
        pointer-events: none !important;
    }


    /* -------------------------------------------------
       화살표
       ------------------------------------------------- */
    ._paging > ._inner > a {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 32px !important;

        width: 32px !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: none !important;
        background-image: none !important;

        box-shadow: none !important;

        overflow: visible !important;

        font-size: 0 !important;
        text-indent: 0 !important;

        text-decoration: none !important;
    }


    ._paging > ._inner > a::before {
        display: block !important;

        position: static !important;

        width: auto !important;
        height: auto !important;

        background: none !important;

        font-family: Arial, sans-serif !important;
        font-size: 25px !important;
        font-weight: 300 !important;
        line-height: 1 !important;

        color: #444 !important;

        transform: none !important;
    }


    ._paging > ._inner > a::after {
        display: none !important;
        content: none !important;
    }


    /* 처음 */
    ._paging > ._inner > a._first::before {
        content: "«" !important;
    }

    /* 이전 */
    ._paging > ._inner > a._prev::before {
        content: "‹" !important;
    }

    /* 다음 */
    ._paging > ._inner > a._next::before {
        content: "›" !important;
    }

    /* 마지막 */
    ._paging > ._inner > a._last::before {
        content: "»" !important;
    }


    /* -----------------------------------------------
       K2Web의 추가 페이지 묶음 이동 버튼 제거
       얘들이 지금 빈 여백의 원인
       ----------------------------------------------- */
    ._paging > ._inner > a._listPrev,
    ._paging > ._inner > a._listNext {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* 이동 불가능한 화살표 */
    ._paging > ._inner > a.mobile-disabled {
        opacity: 0.25 !important;
        cursor: default !important;
        pointer-events: none !important;
    }
}