386 lines
8.0 KiB
CSS
386 lines
8.0 KiB
CSS
.mypage-qna-page .mq-topbar{
|
|
display:flex;
|
|
justify-content:space-between; /* ✅ 좌/우 끝으로 */
|
|
align-items:center;
|
|
margin: 0 0 14px 0;
|
|
}
|
|
|
|
.mypage-qna-page .mq-btn{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
background:#0b7b77;
|
|
color:#fff;
|
|
font-weight:600;
|
|
font-size:14px;
|
|
line-height:1.2;
|
|
|
|
text-decoration:none;
|
|
border:1px solid rgba(0,0,0,.05);
|
|
}
|
|
|
|
.mypage-qna-page .mq-detail{
|
|
border:1px solid #e6e6e6;
|
|
border-radius:10px;
|
|
padding: 16px;
|
|
margin-bottom: 18px;
|
|
background:#fff;
|
|
}
|
|
|
|
.mq-detail-title{
|
|
font-weight:700;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.mq-detail-meta{
|
|
border:1px solid #e6e6e6;
|
|
border-radius:8px;
|
|
overflow:hidden;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.mq-meta-row{
|
|
display:grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
.mq-meta-th{
|
|
background:#f6f7f8;
|
|
padding: 10px 12px;
|
|
font-weight:600;
|
|
text-align:center;
|
|
border-right:1px solid #e6e6e6;
|
|
}
|
|
.mq-meta-th:last-child{border-right:none;}
|
|
|
|
.mq-meta-row--val .mq-meta-td{
|
|
padding: 12px;
|
|
text-align:center;
|
|
border-right:1px solid #e6e6e6;
|
|
background:#fff;
|
|
}
|
|
.mq-meta-row--val .mq-meta-td:last-child{border-right:none;}
|
|
|
|
.mq-cards{
|
|
display:grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.mq-card{
|
|
border:1px solid #e6e6e6;
|
|
border-radius:8px;
|
|
overflow:hidden;
|
|
background:#fff;
|
|
}
|
|
|
|
.mq-card-head{
|
|
padding: 12px 14px;
|
|
font-weight:700;
|
|
background:#f6f7f8;
|
|
border-bottom:1px solid #e6e6e6;
|
|
}
|
|
|
|
.mq-card-body{
|
|
padding: 14px;
|
|
min-height: 96px;
|
|
line-height:1.6;
|
|
}
|
|
|
|
.mq-muted{ color:#888; }
|
|
|
|
.mq-link{
|
|
color:#0b7b77;
|
|
text-decoration:none;
|
|
}
|
|
.mq-link:hover{ text-decoration:underline; }
|
|
|
|
.mq-row-active td{
|
|
background:#f2fbfa !important;
|
|
}
|
|
|
|
.mq-pager{
|
|
display:flex;
|
|
justify-content:center;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.mq-yearform{ margin:0; }
|
|
.mq-yearselect{
|
|
height: 34px;
|
|
border:1px solid #e6e6e6;
|
|
border-radius:8px;
|
|
padding:0 10px;
|
|
background:#fff;
|
|
}
|
|
/* ===== table (bootstrap 없이도 보이게) ===== */
|
|
.mypage-qna-page .table-responsive{
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.mypage-qna-page table.table{
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: #fff;
|
|
}
|
|
|
|
.mypage-qna-page .table thead th{
|
|
background: #f6f7f8;
|
|
font-weight: 700;
|
|
padding: 12px 10px;
|
|
border: 1px solid #e6e6e6;
|
|
}
|
|
|
|
.mypage-qna-page .table tbody td{
|
|
padding: 12px 10px;
|
|
border: 1px solid #e6e6e6;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.mypage-qna-page .table tbody tr:nth-child(even) td{
|
|
background: #fafafa;
|
|
}
|
|
|
|
/* text helpers (bootstrap 대체) */
|
|
.mypage-qna-page .text-start{ text-align:left; }
|
|
.mypage-qna-page .text-center{ text-align:center; }
|
|
.mypage-qna-page .text-nowrap{ white-space:nowrap; }
|
|
|
|
/* ===== badge (bootstrap 없이도 보이게) ===== */
|
|
.mypage-qna-page .badge{
|
|
display: inline-block;
|
|
padding: 5px 9px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
/* config/qna_state.php에서 쓰는 클래스들을 직접 스타일링 */
|
|
.mypage-qna-page .bg-primary{ background:#0d6efd; }
|
|
.mypage-qna-page .bg-success{ background:#198754; }
|
|
.mypage-qna-page .bg-info{ background:#0dcaf0; }
|
|
.mypage-qna-page .bg-warning{ background:#ffc107; }
|
|
.mypage-qna-page .bg-dark{ background:#212529; }
|
|
|
|
.mypage-qna-page .text-dark{ color:#212529 !important; }
|
|
|
|
/* ====== Responsive: 모바일 카드 리스트 ====== */
|
|
.mq-cards-mobile{ display:none; }
|
|
|
|
.mq-mcard{
|
|
display:block;
|
|
border:1px solid #e6e6e6;
|
|
border-radius:12px;
|
|
padding:12px 12px;
|
|
background:#fff;
|
|
text-decoration:none;
|
|
color:inherit;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.mq-mcard.is-active{
|
|
border-color:#0b7b77;
|
|
box-shadow: 0 0 0 2px rgba(11,123,119,.08);
|
|
}
|
|
|
|
.mq-mcard-top{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
margin-bottom:8px;
|
|
}
|
|
|
|
.mq-mno{
|
|
font-weight:700;
|
|
font-size:13px;
|
|
color:#333;
|
|
}
|
|
|
|
.mq-mtitle{
|
|
font-weight:700;
|
|
font-size:15px;
|
|
line-height:1.35;
|
|
margin-bottom:10px;
|
|
color:#0b7b77;
|
|
}
|
|
|
|
.mq-mmeta{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:6px;
|
|
}
|
|
|
|
.mq-mmeta-row{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
gap:10px;
|
|
font-size:13px;
|
|
}
|
|
|
|
.mq-mmeta-k{
|
|
color:#666;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.mq-mmeta-v{
|
|
color:#111;
|
|
text-align:right;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
max-width: 70%;
|
|
}
|
|
|
|
.mq-empty-mobile{
|
|
border:1px dashed #e6e6e6;
|
|
border-radius:12px;
|
|
padding:18px 14px;
|
|
text-align:center;
|
|
color:#777;
|
|
background:#fff;
|
|
}
|
|
|
|
/* ====== breakpoint ====== */
|
|
@media (max-width: 768px){
|
|
.mypage-qna-page .mq-topbar{
|
|
gap:10px;
|
|
}
|
|
|
|
/* 모바일: 테이블 숨김, 카드 표시 */
|
|
.mq-table-wrap{ display:none; }
|
|
.mq-cards-mobile{ display:block; }
|
|
|
|
/* 연도 셀렉트/버튼도 모바일에서 자연스럽게 */
|
|
.mypage-qna-page .mq-topbar{
|
|
justify-content:space-between;
|
|
}
|
|
|
|
.mq-yearselect{ height:34px; }
|
|
.mypage-qna-page .mq-btn{
|
|
padding:8px 12px;
|
|
font-size:14px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ===== PC 테이블 글자/간격 축소 ===== */
|
|
.mypage-qna-page .mq-list table.table{
|
|
font-size: 13px; /* 기본보다 살짝 작게 */
|
|
}
|
|
|
|
.mypage-qna-page .mq-list .table thead th{
|
|
font-size: 13px;
|
|
padding: 10px 8px; /* 헤더 높이 줄이기 */
|
|
}
|
|
|
|
.mypage-qna-page .mq-list .table tbody td{
|
|
font-size: 13px;
|
|
padding: 10px 8px; /* 행 높이 줄이기 */
|
|
}
|
|
|
|
/* 상태 배지도 같이 살짝 줄이기 */
|
|
.mypage-qna-page .mq-list .badge{
|
|
font-size: 11px;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
}
|
|
/* ===== show(상세) 모바일 가독성 개선 ===== */
|
|
@media (max-width: 768px){
|
|
|
|
/* 상세 박스 패딩 살짝 축소 */
|
|
.mypage-qna-page .mq-detail{
|
|
padding: 12px;
|
|
}
|
|
|
|
/* ✅ 메타(문의분류/처리상태/등록일) : 3컬럼 -> 세로 카드형 */
|
|
.mq-detail-meta{
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* 헤더 row 숨기고(라벨은 각 항목에 붙임) */
|
|
.mq-detail-meta .mq-meta-row:first-child{
|
|
display:none;
|
|
}
|
|
|
|
/* 값 row를 1컬럼으로 */
|
|
.mq-detail-meta .mq-meta-row.mq-meta-row--val{
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mq-detail-meta .mq-meta-row--val .mq-meta-td{
|
|
border-right: none !important;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
text-align: left;
|
|
padding: 12px;
|
|
}
|
|
.mq-detail-meta .mq-meta-row--val .mq-meta-td:last-child{
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 각 값 앞에 라벨을 붙여서 “한줄 요약” 형태로 */
|
|
.mq-detail-meta .mq-meta-row--val .mq-meta-td:nth-child(1)::before{
|
|
content:"문의분류";
|
|
display:block;
|
|
font-size:12px;
|
|
color:#666;
|
|
margin-bottom:6px;
|
|
font-weight:600;
|
|
}
|
|
.mq-detail-meta .mq-meta-row--val .mq-meta-td:nth-child(2)::before{
|
|
content:"처리상태";
|
|
display:block;
|
|
font-size:12px;
|
|
color:#666;
|
|
margin-bottom:6px;
|
|
font-weight:600;
|
|
}
|
|
.mq-detail-meta .mq-meta-row--val .mq-meta-td:nth-child(3)::before{
|
|
content:"등록일";
|
|
display:block;
|
|
font-size:12px;
|
|
color:#666;
|
|
margin-bottom:6px;
|
|
font-weight:600;
|
|
}
|
|
|
|
/* 긴 문자열 줄바꿈 개선(문의분류/등록일 등) */
|
|
.mq-detail-meta .mq-meta-td{
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* ✅ 본문 카드: 2컬럼 -> 1컬럼 */
|
|
.mq-cards{
|
|
grid-template-columns: 1fr !important;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mq-card-head{
|
|
padding: 10px 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.mq-card-body{
|
|
padding: 12px;
|
|
font-size: 13px;
|
|
min-height: auto;
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* 배지 크기/줄바꿈 안전 */
|
|
.mypage-qna-page .badge{
|
|
font-size: 11px;
|
|
padding: 4px 8px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|