@charset "utf-8";

/****************************************************************************************************************************************
W18A shared board/member pages
*****************************************************************************************************************************************/
.bo-tit {position:relative; margin:20px auto 15px auto; padding:0 20px; width:100%; min-height:60px; display:flex; justify-content:space-between; align-items:center; background:#000e32; border:1px solid rgba(255,255,255,0.18); border-radius:8px;}
.bo-tit > h3 {position:relative; margin:0; padding:0; line-height:60px; text-align:left; font-size:20px; font-weight:700; color:#fff;}
.bo-tit > img {height:56px; max-width:45%; object-fit:contain;}

.scroll-wrap {position:relative; width:100%; overflow-x:auto; padding-bottom:4px;}

.bo-guide {position:relative; margin:0 0 20px 0; padding:20px; width:100%; text-align:center; background:#00113b; border:1px solid rgba(255,255,255,0.16); border-radius:8px;}
.guide-tit {position:relative; margin:0 0 15px 0; width:100%; display:flex; justify-content:flex-start; align-items:center; gap:8px; text-align:left; font-size:16px; font-weight:700; color:#80b3ff;}
.guide-tit > svg,
.guide-tit > i {font-size:20px;}
ul.guide-list,
.bo-guide > .guide-list {position:relative; margin:0; padding:0; width:100%; text-align:left;}
ul.guide-list > li,
.bo-guide > .guide-list > li {list-style:disc; display:list-item; margin-left:28px; padding:2px 0; line-height:1.8; font-weight:500; color:#dce8ff;}
.account-btn {position:relative; margin:0 5px; padding:8px 18px; font-weight:700; color:#001854; background:#80b3ff; border-radius:5px; transition:filter 0.2s ease;}
.account-btn:disabled {opacity:0.5; cursor:not-allowed; pointer-events:none;}

.write-table {position:relative; width:100%; border:1px solid rgba(255,255,255,0.18); border-bottom:none; background:#00113b; border-radius:8px; overflow:hidden;}
.write-table th,
.write-table td {padding:12px; border-bottom:1px solid rgba(255,255,255,0.16);}
.write-table th {width:160px; text-align:center; font-weight:700; color:#fff; background:#0c2973; border-right:1px solid rgba(255,255,255,0.16); word-break:keep-all;}
.write-table td {width:calc(100% - 160px); text-align:left; background:#00113b;}
.write-table td > input,
.write-table td > textarea,
.write-table td > select {margin:0; padding:11px 12px; width:100%; text-align:left; font-size:15px; color:#fff; background:#000a22; border:1px solid rgba(255,255,255,0.28); border-radius:6px; transition:border-color 0.2s ease, box-shadow 0.2s ease;}
.write-table td > textarea {height:250px; resize:vertical;}
.write-table td > input::placeholder,
.write-table td > textarea::placeholder {color:#9fb2d7;}
.write-table td > input:focus,
.write-table td > textarea:focus,
.write-table td > select:focus {border-color:#80b3ff; box-shadow:0 0 0 2px rgba(128,179,255,0.18); outline:none;}
/* 🔴 option 에 color 만 주면, 브라우저가 select 의 어두운 배경(#000a22)을 팝업에 그대로 쓰는
   환경에서 **검정 배경에 검정 글씨**가 된다(업체 신고: 문의유형 글자가 안 보임 · PPT 15).
   배경까지 같이 지정해야 어느 브라우저에서든 읽힌다. */
.write-table td > select > option {color:#000; background:#fff;}
.write-table td > input + .unit-suffix {margin-left:6px; font-size:14px; font-weight:600; color:#fff; vertical-align:middle;}
.write-table td > input:has(+ .unit-suffix) {width:calc(100% - 60px); display:inline-block;}

ul.moneyBtns {position:relative; margin:15px auto 0 auto; padding:0; width:100%; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center;}
ul.moneyBtns > li {margin:0; padding:10px 0; width:calc(100% / 6 - 6px); text-align:center; font-weight:700; color:#fff; background:#0c2973; border:1px solid rgba(255,255,255,0.16); border-radius:6px; cursor:pointer; transition:filter 0.2s ease, background 0.2s ease;}
ul.moneyBtns > li.btn-reset {background:#4b6ea8;}

.list-table {position:relative; width:100%; min-width:760px; border:1px solid rgba(255,255,255,0.18); border-bottom:none; background:#00113b; border-radius:8px; overflow:hidden;}
.list-table thead tr {background:#0c2973;}
.list-table tbody tr {background:#00113b; transition:background 0.2s ease;}
.list-table th,
.list-table td {padding:12px 10px; text-align:center; font-weight:600; color:#fff; border-bottom:1px solid rgba(255,255,255,0.16);}
.list-table td.td-left {text-align:left;}
.list-table td.td-cursor {cursor:pointer;}
.list-table td > p {width:500px; font-weight:600; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.list-table input[type="checkbox"] {cursor:pointer; accent-color:#80b3ff;}
.list-table tbody tr.unread {font-weight:700; box-shadow:inset 3px 0 0 #80b3ff;}
.list-table tbody tr.read {font-weight:500; color:#dce8ff;}

.view-table {position:relative; width:100%; border:1px solid rgba(255,255,255,0.18); border-bottom:none; background:#00113b; border-radius:8px; overflow:hidden;}
.view-table tbody tr {background:#00113b;}
.view-table th,
.view-table td {padding:12px; text-align:left; font-weight:500; color:#fff; border-bottom:1px solid rgba(255,255,255,0.16);}
.view-table th {width:160px; text-align:center; font-weight:700; background:#0c2973; border-right:1px solid rgba(255,255,255,0.16); word-break:keep-all;}
.view-table td.view-content {padding:25px 20px; min-height:200px; line-height:1.7; word-break:break-word;}

.loading-row td,
.empty-row td,
.notice-empty td,
.event-empty td {padding:42px 12px; text-align:center; color:#9fb2d7; background:#00113b;}

.answer-ing {color:#ff7676;}
.answer-ok {color:#57d68d;}

.board-btn {position:relative; margin:30px auto 50px auto; padding:0; width:100%; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;}
.board-btn > button {margin:0; padding:13px 22px; min-width:120px; text-align:center; font-size:15px; font-weight:700; color:#001854; background:#80b3ff; border-radius:6px; transition:filter 0.2s ease;}
.board-btn > button:nth-child(2) {color:#fff; background:#0c2973;}
.board-btn > button:nth-child(3) {color:#fff; background:#4b6ea8;}

.pagination,
.pager {display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:22px 0;}
.pagination button,
.pager > a,
.pager > span {padding:8px 12px; min-width:36px; text-align:center; font-weight:700; color:#fff; background:#00113b; border:1px solid rgba(255,255,255,0.18); border-radius:6px; cursor:pointer; transition:background 0.2s ease, color 0.2s ease;}
.pagination button.active,
.pager > .pager-current {background:#80b3ff; color:#001854; border-color:#80b3ff;}
.pagination button:disabled {opacity:0.5; cursor:not-allowed;}

.accordion-container {position:relative; width:100%;}
.accordion-loading,
.accordion-empty {padding:42px 12px; text-align:center; color:#9fb2d7; background:#00113b; border:1px solid rgba(255,255,255,0.18); border-radius:8px;}
.accordion-item {position:relative; margin-bottom:10px; background:#00113b; border:1px solid rgba(255,255,255,0.18); border-radius:8px; overflow:hidden;}
.accordion-item.active {border-color:#80b3ff;}
.accordion-header {display:flex; justify-content:space-between; align-items:center; padding:15px 20px; cursor:pointer; background:#0c2973; transition:background 0.2s ease;}
.accordion-title-wrap {display:flex; align-items:center; gap:15px; flex:1; min-width:0;}
.accordion-title {font-size:15px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.accordion-status {padding:3px 10px; font-size:12px; font-weight:700; border-radius:4px; white-space:nowrap;}
.accordion-status.answer-ok {background:rgba(87,214,141,0.16); color:#57d68d;}
.accordion-status.answer-ing {background:rgba(255,118,118,0.16); color:#ff7676;}
.accordion-meta {display:flex; align-items:center; gap:15px; flex-shrink:0;}
.accordion-date,
.accordion-arrow {font-size:13px; color:#9fb2d7;}
.accordion-arrow {transition:transform 0.2s ease;}
.accordion-content {padding:0; background:#000a22;}
.accordion-section {padding:20px; border-bottom:1px solid rgba(255,255,255,0.16);}
.accordion-section:last-of-type {border-bottom:none;}
.accordion-section-title {padding:10px 15px; margin-bottom:10px; font-size:14px; font-weight:700; color:#fff; background:#0c2973; text-align:center; border-radius:4px;}
.accordion-section-body {padding:10px 0; font-size:14px; line-height:1.7; color:#fff; word-break:break-word;}
.accordion-answer .accordion-section-title {background:#345994;}
.accordion-actions {padding:15px 20px; text-align:center; border-top:1px solid rgba(255,255,255,0.16);}
.accordion-actions .btn-view {padding:8px 20px; font-size:13px; font-weight:700; color:#001854; background:#80b3ff; border-radius:6px; cursor:pointer; transition:filter 0.2s ease;}

.detail-container {position:relative; width:100%; background:#00113b; border:1px solid rgba(255,255,255,0.18); border-radius:8px; overflow:hidden;}
.detail-header {display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:#0c2973; border-bottom:1px solid rgba(255,255,255,0.16);}
.detail-title-wrap {display:flex; align-items:center; gap:15px; flex:1; min-width:0;}
.detail-title {font-size:18px; font-weight:700; color:#fff;}
.detail-status {padding:5px 15px; font-size:13px; font-weight:700; border-radius:4px;}
.detail-status.answer-ok {background:rgba(87,214,141,0.16);}
.detail-status.answer-ing {background:rgba(255,118,118,0.16);}
.detail-date {font-size:14px; color:#dce8ff; flex-shrink:0;}
.detail-section {padding:0; margin:20px;}
.detail-section-title {padding:12px 20px; font-size:15px; font-weight:700; color:#fff; background:#0c2973; border-radius:6px 6px 0 0;}
.detail-section-body {padding:20px; font-size:14px; line-height:1.8; color:#fff; background:#000a22; border:1px solid rgba(255,255,255,0.16); border-top:none; border-radius:0 0 6px 6px; word-break:break-word; min-height:100px;}
.detail-answer .detail-section-title {background:#345994;}

@media (hover: hover) and (pointer: fine) {
    .account-btn:hover:not(:disabled),
    ul.moneyBtns > li:hover,
    .board-btn > button:hover,
    .accordion-actions .btn-view:hover {filter:brightness(1.12);}
    .list-table tbody tr:hover,
    .accordion-header:hover {background:#123783;}
    .pagination button:not(.active):not(:disabled):hover,
    .pager > a:hover {background:#0c2973; color:#fff;}
}

@media (max-width:1070px) {
    .bo-tit {margin:10px auto 12px auto; padding:0 15px; min-height:54px;}
    .bo-tit > h3 {line-height:54px; font-size:17px;}
    .bo-tit > img {height:42px;}
    .list-table td > p {width:260px;}
    ul.moneyBtns > li {width:calc(100% / 3 - 6px);}
}

@media (max-width:798px) {
    .write-table th {width:92px; font-size:14px;}
    .write-table td {width:calc(100% - 92px);}
    .write-table td > input,
    .write-table td > textarea,
    .write-table td > select {font-size:14px;}
    ul.guide-list > li,
    .bo-guide > .guide-list > li {margin-left:20px;}
    .account-btn {display:block; margin:10px auto 0 auto; width:100%;}
    .board-btn > button {padding:10px 15px; min-width:100px; font-size:14px;}
    .accordion-header {flex-direction:column; align-items:flex-start; gap:10px;}
    .accordion-title-wrap,
    .accordion-meta {width:100%;}
    .accordion-meta {justify-content:space-between;}
    .detail-header {flex-direction:column; align-items:flex-start; gap:10px;}
    .detail-title-wrap {width:100%;}
    .detail-title {font-size:16px;}
    .detail-section {margin:15px;}
    .detail-section-body {padding:15px;}
    .view-table th {width:92px; font-size:14px;}
    .view-table td {padding:10px;}
    .view-table td.view-content {padding:18px 12px;}
}

/* 이벤트/공지 상세 배너 이미지 — 가운데 정렬 + 반응형 (ST10/ST11 패턴 차용) */
.event-image-wrap,
.notice-image-wrap {
    width: 100%;
    margin: 0 auto 15px;
    text-align: center;
}
.event-image-wrap img,
.notice-image-wrap img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}