@charset "utf-8";

/****************************************************************************************************************************************
board-hd
*****************************************************************************************************************************************/
.board-hd {position:relative; margin:0 auto 15px auto; padding:0 10px; width: 100%; height: 50px; display: flex; justify-content: flex-start; align-items: center; gap: 10px; background: #1a1510; border-radius: 5px;}
.board-hd > button {position:relative; margin:0; width: 32px; height: 32px;}
.board-hd > button > svg {font-size: 20px;}
.board-hd  > span {font-size: 20px;}

.board-tit {position:relative; margin:0 auto 5px auto; padding:15px 20px; width: 100%; font-size: 20px; background: #1a1510; border-radius: 5px;}

.board-con {position:relative; margin:0 auto; padding:40px 40px; width: 100%; background: #1a1510; border-radius: 5px;}
.board-con > h3 {font-size: 20px;}
.board-con > p {margin-top:3px; font-size: 15px;}

/****************************************************************************************************************************************
full-search
*****************************************************************************************************************************************/
.full-search {position: relative; margin:0 auto 15px auto; padding:5px 5px; width: 100%; height: 50px; display:flex; justify-content: flex-start; align-items: center; background: #1a1510; border-radius: 5px;}
.full-search > input {padding:0 8px; width: 100%; height: 100%; font-size: 15px; color:#fff; background: #000; border: 1px #6b5c42 solid; border-radius: 5px; transition: 0.2s;}
.full-search > input::placeholder {color: #8d8d8d;}
.full-search > input:focus {border: 1px solid #ffb100;}

@media (hover: hover) and (pointer: fine) {
    .full-search > input:hover {border: 1px solid #ffb100;}
}

/****************************************************************************************************************************************
board-guide
*****************************************************************************************************************************************/
.board-guide {position: relative; margin:0 auto 15px auto; padding:15px 15px; width: 100%; display: flex; justify-content: flex-start; align-items: center; background: #705f33; border-radius: 5px; gap: 15px;}
.guide-icon {position: relative; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: #a7852d; border-radius: 50%;}
.guide-icon > svg {font-size:20px; color:#fbbf24;}

.guide-list {position: relative; margin:0; padding:0; text-align: left;}
.guid-tit {margin-bottom:5px; font-size: 15px; font-weight: 600;}
.guid-txt {position: relative; margin:0 auto; padding:0; text-align: left;}
.guid-txt > p {font-size: 15px; color:#e3e3e3;}
.red-txt {color:#f44547 !important;}

/****************************************************************************************************************************************
qrcode
*****************************************************************************************************************************************/
.qrcode {position: relative; margin:30px auto; padding:20px 20px 25px 20px; width: 224px; text-align: center; background: #1a1510; border-radius: 5px; transition: 0.2s; cursor: pointer;}
.qrcode > img {margin:15px auto 25px auto; width: 80px;}
.qrcode > h3 {color:#fff;}
.qrcode > p {margin-top:5px; font-size:13px; color:#e3e3e3;}

@media (hover: hover) and (pointer: fine) {
    .qrcode:hover {background: linear-gradient(180deg, #bb773b, #ffe6ac 21.35%, #fcd34d 41.15%, #eab308 59.9%, #bb773b 80.73%, #713f12);}
    .qrcode:hover > h3,
    .qrcode:hover > p {color:#000;}
}


/****************************************************************************************************************************************
bo list
*****************************************************************************************************************************************/
.tb-scroll {position: relative; margin: 0 auto; padding:0; width: 100%;}

/* 리스트 테이블 */
.tb-list {position: relative; margin: 0 auto; padding:0; width: 100%;}
.tb-list > thead > tr {background: #000;}
.tb-list > tbody > tr {background:#1a1510;}
.tb-list th,
.tb-list td {margin:0 auto; padding:8px 5px; font-size: 15px; font-weight: 600; text-align: center;}
.tb-list td {padding:15px 5px; border-bottom: 1px #3a3125 solid;}
.td_cursor {text-align: left !important; cursor: pointer;}

.txt-finish {color:#6d6d6d;}
.txt-cancel {color:#f75f5f;}

@media (hover: hover) and (pointer: fine) {
    .tb-list > tbody > tr:hover {background:#000;}
}

/****************************************************************************************************************************************
bo write
*****************************************************************************************************************************************/
.bo-write {position: relative; margin: 0; padding:0; width: 100%; border: 1px #3a3125 solid;}
.bo-write th {margin:0 auto; width:16%; padding:8px 5px; text-align: center; font-size: 15px; font-weight: 600; color: #d3d3d3; background: #000; border-bottom: 1px #3a3125 solid;}
.bo-write td {margin:0 auto; width:calc(100% - 16%); padding:10px 10px; text-align: left; font-size: 15px; font-weight: 600; text-align: center; background:#1a1510; border-bottom: 1px #3a3125 solid;}

.bo-write td > input {margin:0 auto; width:100%; padding:10px 10px; text-align: left; font-size: 15px; font-weight: 600; color:#fff; background: #000; border: 1px #6b5c42 solid; transition: 0.2s; border-radius: 5px;}
.bo-write td > input::placeholder {color: #8d8d8d;}
.bo-write td > input:focus {border: 1px solid #ffb100;}

.bo-write td > textarea {margin:0 auto; width:100%; min-height: 200px; padding:10px 10px; text-align: left; font-size: 15px; font-weight: 600; color:#fff; background: #000; border: 1px #6b5c42 solid; transition: 0.2s; border-radius: 5px;}
.bo-write td > textarea::placeholder {color: #8d8d8d;}
.bo-write td > textarea:focus {border: 1px solid #ffb100;}

/****************************************************************************************************************************************
money-wrap
*****************************************************************************************************************************************/
.money-wrap {position: relative;  margin:0 auto 15px auto; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.bank-info,
.money-box {width: calc(100% / 2);}

/* bank-info */
.bank-info {position: relative; margin:0 auto; padding:15px 15px; display: flex; justify-content:flex-start; align-items: center; gap:15px; background: #1a1510; border-radius: 5px;}
.bank-info > img {display: block; width: 64px; height: 64px; border-radius: 50%;}
.bank-txt {position: relative; text-align: left;}
.bank-txt > p {font-size: 16px; font-weight: 600; color:#9f9f9f;}
.bank-txt > h3 {font-size: 24px; font-weight: 600; color:#ffb100;}

/* money-box */
.money-box {position: relative; margin:0 auto; padding:15px 15px; background: #1a1510; border-radius: 5px;}
.money-guide {position: relative; margin:0 auto; padding:15px 15px; width: 100%; color:#eab20d; background: #655427; border-radius: 5px;}

/* money-input */
.money-input {position: relative; margin:20px 0; padding:0 5px; width: 100%; height: 40px; display:flex; justify-content: flex-start; align-items: center; background: #000; border: 1px #6b5c42 solid;}
.money-input > span {padding:0 5px; font-size: 15; color:#fff;}
.money-input > input {padding:0 0 0 5px; width: 100%; height: calc(100% - 2px); font-size: 15px; color:#fff; background: none; border: none;}
.money-input > input::placeholder {color: #8d8d8d;}
.money-input:focus-within {transition: 0.2s; border: 1px solid #ffb100;}

.btn-money {position: relative; margin:10px auto 0 auto; padding:10px 0; width: 100%; text-align: center; font-size: 18px; font-weight: 600; color:#000; background: #632d38; border-radius: 5px;}

/****************************************************************************************************************************************
bo-btns 
*****************************************************************************************************************************************/
/* bo-Topbtns */
.bo-Topbtns {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap:10px;}
.bo-Topbtns > button {margin: 0; padding:5px 15px; font-size: 15px; font-weight: 600;}

/* bo-btns */
.bo-btns {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap:10px;}
.bo-btns > button {margin: 0; padding:10px 25px; min-width: 100px; font-size: 16px; font-weight: 600; border-radius: 5px;}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1070px) {
    /* tb-list */
    .tb-scroll {overflow-x: hidden; padding-bottom:5px;}
    .tb-list {width:100%;}

    /* money-wrap */
    .money-wrap {flex-wrap: wrap; justify-content: center;}
    .bank-info, 
    .money-box {width:100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:798px) {
    /* board-hd */
    .board-hd > button {width: 29px; height: 29px;}
    .board-hd > button > svg {font-size: 18px;}
    .board-hd > span {font-size: 16px;}

    .board-tit {font-size: 16px;}
    .board-con {padding:20px 15px;}
    .board-con > h3 {font-size: 16px;}
    .board-con > p {font-size: 14px;}

    /* board-guide */
    .board-guide {gap:0;}
    .guide-icon {display: none;}
    .guide-list {width: 100%;}

    /* tb-list */
    .tb-list {width:100%;}

    /* bo-write */
    .bo-write th {width: 20%; font-size: 14px; word-break: keep-all;}
    .bo-write td > input::placeholder,
    .bo-write td > textarea::placeholder {font-size: 14px;} 
    /* bo-btns */
    .bo-btns > button {padding:8px 10px; min-width: 90px; font-size: 14px;}
}/* 미디어쿼리문 끝 */


/****************************************************************************************************************************************
공용 템플릿(_Shared/Member, _Shared/Customer, _Shared/Event) 호환용 클래스
- bo-tit / bo-guide / write-table / list-table / view-table / moneyBtns / board-btn / pagination / pager / accordion-* / detail-*
- W17 골드/다크 팔레트 적용 (#ffb100 골드 / #1a1510 카드 / #000 입력 / #0f0c08 헤더)
*****************************************************************************************************************************************/

/* Group A — 게시판 타이틀 / 스크롤 래퍼 */
.bo-tit {position:relative; margin:10px auto 15px auto; padding:0 20px; width:100%; height:60px; display:flex; justify-content:space-between; align-items:center; background:#0f0c08; border-radius:5px;}
.bo-tit > h3 {position:relative; margin:0; padding:0; line-height:60px; font-size:18px; font-weight:600; color:#fff;}
.bo-tit > img {height:60px;}
.scroll-wrap {position:relative;}

/* Group B — 가이드 박스 */
.bo-guide {position:relative; margin:0 0 20px 0; padding:20px 20px; width:100%; text-align:center; background:#1a1510; border-radius:5px;}
.guide-tit {position:relative; margin-bottom:15px; width:100%; display:flex; justify-content:flex-start; align-items:center; gap:8px; font-size:16px; font-weight:600; color:#ffb100;}
.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:40px; padding:0; line-height:1.8; font-weight:500; color:#e3e3e3;}
.account-btn {position:relative; margin:0 5px; padding:8px 18px; font-weight:600; color:#000; background:#ffb100; border-radius:5px; transition:all 0.3s ease;}
.account-btn:disabled {opacity:0.5; cursor:not-allowed; pointer-events:none;}
@media (hover: hover) and (pointer: fine) {
    .account-btn:hover:not(:disabled) {filter:brightness(115%);}
}

/* Group C — write-table (폼 테이블) */
.write-table {position:relative; width:100%; border:1px solid #3a3125; border-bottom:none;}
.write-table th,
.write-table td {padding:10px 10px; border-bottom:1px solid #3a3125;}
.write-table th {width:150px; text-align:center; font-weight:600; color:#fff; background:#0f0c08; border-right:1px solid #3a3125;}
.write-table td {width:calc(100% - 150px); text-align:left; background:#1a1510;}
.write-table td > input {margin:0; padding:10px 10px; width:100%; text-align:left; font-size:15px; color:#fff; background:#000; border:1px solid #6b5c42; border-radius:5px; transition:0.2s;}
.write-table td > input::placeholder {color:#8d8d8d;}
.write-table td > input:focus {border-color:#ffb100;}
.write-table td > textarea {margin:0; padding:10px 10px; width:100%; height:250px; text-align:left; font-size:15px; color:#fff; background:#000; border:1px solid #6b5c42; border-radius:5px; transition:0.2s;}
.write-table td > textarea::placeholder {color:#8d8d8d;}
.write-table td > textarea:focus {border-color:#ffb100;}
.write-table td > select {margin:0; padding:10px 10px; width:100%; font-size:15px; color:#fff; background:#000; border:1px solid #6b5c42; border-radius:5px;}
.write-table td > input + .unit-suffix {margin-left:6px; font-size:14px; font-weight:500; color:#fff; vertical-align:middle;}
.write-table td > input:has(+ .unit-suffix) {width:calc(100% - 60px); display:inline-block;}

/* Group D — moneyBtns (금액 단위 버튼) */
ul.moneyBtns {position:relative; margin:15px auto 0 auto; padding:0; width:100%; display:flex; flex-wrap:wrap; gap:5px; justify-content:center; align-items:center;}
ul.moneyBtns > li {margin:0; padding:10px 0; width:calc(100% / 6 - 5px); text-align:center; font-weight:600; color:#fff; background:#6b5c42; border-radius:5px; cursor:pointer; transition:0.2s;}
ul.moneyBtns > li.btn-reset {background:#d97706; color:#fff;}
@media (hover: hover) and (pointer: fine) {
    ul.moneyBtns > li:hover {filter:brightness(120%);}
}

/* Group E — list-table / view-table (데이터 테이블) */
.list-table {position:relative; width:100%; border:1px solid #3a3125; border-bottom:none;}
.list-table thead tr {background:#000;}
.list-table tbody tr {background:#1a1510; cursor:pointer; transition:background 0.2s;}
.list-table th,
.list-table td {padding:10px 10px; text-align:center; font-weight:600; color:#fff; border-bottom:1px solid #3a3125;}
.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;}
@media (hover: hover) and (pointer: fine) {
    .list-table tbody tr:hover {background:#0f0c08;}
}

/* 쪽지 행 상태 (message.js 가 주입) */
.list-table tbody tr.unread {font-weight:700; border-left:3px solid #ffb100;}
.list-table tbody tr.read {font-weight:500; color:#e3e3e3;}

.view-table {position:relative; width:100%; border:1px solid #3a3125; border-bottom:none;}
.view-table tbody tr {background:#1a1510;}
.view-table th,
.view-table td {padding:12px 12px; text-align:left; font-weight:500; color:#fff; border-bottom:1px solid #3a3125;}
.view-table th {width:150px; text-align:center; font-weight:600; background:#0f0c08; border-right:1px solid #3a3125;}
.view-table td.view-content {padding:25px 20px; min-height:200px; line-height:1.7; word-break:break-word;}

/* Group F — 상태 컬러 */
.answer-ing {color:#f44547;}
.answer-ok {color:#10b981;}

/* Group G — board-btn (액션 버튼 그룹) */
.board-btn {position:relative; margin:30px auto 50px auto; padding:0; width:100%; display:flex; gap:5px; justify-content:center; align-items:center;}
.board-btn > button {margin:0; padding:14px 20px; min-width:120px; text-align:center; font-size:16px; font-weight:600; color:#000; background:#ffb100; border-radius:5px; transition:0.2s;}
.board-btn > button:nth-child(2) {color:#fff; background:#10b981;}
.board-btn > button:nth-child(3) {color:#fff; background:#d97706;}
@media (hover: hover) and (pointer: fine) {
    .board-btn > button:hover {filter:brightness(115%);}
}

/* Group H — pagination (일반) */
.pagination {display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin:20px 0;}
.pagination button {padding:8px 12px; min-width:36px; font-weight:600; color:#fff; background:#0f0c08; border:1px solid #3a3125; border-radius:5px; cursor:pointer; transition:0.2s;}
.pagination button.active {background:#ffb100; color:#000; border-color:#ffb100;}
.pagination button:disabled {opacity:0.5; cursor:not-allowed;}
@media (hover: hover) and (pointer: fine) {
    .pagination button:not(.active):not(:disabled):hover {background:#3a3125;}
}

/* Group H — pager (공지사항 nav) */
.pager {display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin:20px 0;}
.pager > a,
.pager > span {padding:8px 12px; min-width:36px; text-align:center; font-weight:600; color:#fff; background:#0f0c08; border:1px solid #3a3125; border-radius:5px; transition:0.2s;}
.pager > .pager-current {background:#ffb100; color:#000; border-color:#ffb100;}
@media (hover: hover) and (pointer: fine) {
    .pager > a:hover {background:#3a3125; color:#fff;}
}

/* Group I — loading/empty 행 */
.loading-row td,
.empty-row td,
.notice-empty td {padding:40px; text-align:center; color:#8d8d8d; background:#1a1510;}

/* Group J — accordion (Customer/Index) */
.accordion-container {position:relative; width:100%;}
.accordion-loading,
.accordion-empty {padding:40px; text-align:center; color:#8d8d8d; background:#1a1510; border:1px solid #3a3125; border-radius:5px;}
.accordion-item {position:relative; margin-bottom:10px; background:#1a1510; border:1px solid #3a3125; border-radius:5px; overflow:hidden;}
.accordion-item.active {border-color:#ffb100;}
.accordion-header {display:flex; justify-content:space-between; align-items:center; padding:15px 20px; cursor:pointer; background:#0f0c08; transition:background 0.2s;}
.accordion-header:hover {background:#3a3125;}
.accordion-title-wrap {display:flex; align-items:center; gap:15px; flex:1; min-width:0;}
.accordion-title {font-size:15px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.accordion-status {padding:3px 10px; font-size:12px; font-weight:600; border-radius:3px; white-space:nowrap;}
.accordion-status.answer-ok {background:rgba(16, 185, 129, 0.18); color:#10b981;}
.accordion-status.answer-ing {background:rgba(244, 69, 71, 0.18); color:#f44547;}
.accordion-meta {display:flex; align-items:center; gap:15px; flex-shrink:0;}
.accordion-date {font-size:13px; color:#8d8d8d;}
.accordion-arrow {font-size:12px; color:#8d8d8d; transition:transform 0.2s;}
.accordion-content {padding:0; background:#000;}
.accordion-section {padding:20px; border-bottom:1px solid #3a3125;}
.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:#6b5c42; text-align:center; border-radius:3px;}
.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:#f44547;}
.accordion-actions {padding:15px 20px; text-align:center; border-top:1px solid #3a3125;}
.accordion-actions .btn-view {padding:8px 20px; font-size:13px; font-weight:600; color:#000; background:#ffb100; border:none; border-radius:5px; cursor:pointer; transition:filter 0.2s;}
@media (hover: hover) and (pointer: fine) {
    .accordion-actions .btn-view:hover {filter:brightness(115%);}
}

/* Group K — detail view (Customer/View, Member/MessageView) */
.detail-container {position:relative; width:100%; background:#1a1510; border:1px solid #3a3125; border-radius:5px; overflow:hidden;}
.detail-header {display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:#0f0c08; border-bottom:1px solid #3a3125;}
.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:600; border-radius:3px;}
.detail-status.answer-ok {background:rgba(16, 185, 129, 0.18);}
.detail-status.answer-ing {background:rgba(244, 69, 71, 0.18);}
.detail-date {font-size:14px; color:#8d8d8d; flex-shrink:0;}
.detail-section {padding:0; margin:20px;}
.detail-section-title {padding:12px 20px; font-size:15px; font-weight:700; color:#fff; border-radius:5px 5px 0 0;}
.detail-section-body {padding:20px; font-size:14px; line-height:1.8; color:#fff; background:#000; border:1px solid #3a3125; border-top:none; border-radius:0 0 5px 5px; word-break:break-word; min-height:100px;}
.detail-inquiry .detail-section-title {background:#6b5c42;}
.detail-answer .detail-section-title {background:#f44547;}

/* Group L — 미디어쿼리 (W17 기존 1070/798 breakpoint 와 정렬) */
@media (max-width: 1070px) {
    .bo-tit {margin:0 auto 10px auto; padding:0 15px; height:50px;}
    .bo-tit > h3 {line-height:50px; font-size:16px;}
    .bo-tit > img {height:40px;}
    .list-table td > p {width:250px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 798px) {
    .scroll-wrap {overflow-x:auto;}
    .list-table {min-width:767px;}
    .write-table th {width:90px; font-size:14px; word-break:keep-all;}
    .write-table td {width:calc(100% - 90px);}
    .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; width:100%;}
    ul.moneyBtns > li {width:calc(100% / 3 - 5px);}
    .board-btn > button {padding:10px 15px; min-width:100px; font-size:15px;}
    .accordion-header {flex-direction:column; align-items:flex-start; gap:10px;}
    .accordion-title-wrap {width:100%;}
    .accordion-meta {width:100%; 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:90px; font-size:14px; word-break:keep-all;}
    .view-table td {padding:10px 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;
}