/* ---------- 공통 컨테이너 ---------- */ .board.content img { max-width: 100%; } /* 폭 고정 해제 + 컨테이너 좌우 패딩 */ #board-list, #board-detail, #board-write { width: 100% !important; } .container.page-contents { padding: 12px; } /* 1. 게시판 목록 (#board-list) */ /* ----- 총 건수 ----- */ #board-list .total-count { display: inline-block; padding-bottom: 5px; } #board-list .total-count strong { color: #000; } /* ----- 상단/하단 바 (flex 정렬) ----- */ #board-list .board-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; } #board-list .board-top .column { width: auto !important; padding: 0 !important; } #board-list .board-top .total-count { font-size: 0.875rem; color: #666; } #board-list .board-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 15px; margin-top: 14px; } #board-list .board-bottom .column { width: auto !important; padding: 0 !important; } #board-detail .board-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; } #board-detail .board-bottom .column { width: auto !important; padding: 0 !important; } /* ----- 리스트 카드형 아이템 ----- */ #board-list .board-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid #000; } #board-list .board-list .item { border-bottom: 1px solid #eee; } #board-list .board-list .item.notice { background: #fafafa; } #board-list .board-list .item-link { display: block; padding: 12px 7px; color: #222; } #board-list .board-list .ui.checkbox { display: inline-block; margin: 10px 0 0 4px; vertical-align: top; } #board-list .row-subject { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; max-height: calc(1em * 1.4 * 2); line-height: 1.4; font-size: 0.9714rem; font-weight: 500; color: #222; } #board-list .row-subject .subject { color: #222; } #board-list .row-subject .category.label { margin-right: 4px; font-size: 0.7rem; } #board-list .row-meta { margin-top: 6px; font-size: 0.7857rem; color: #888; } #board-list .row-meta span { margin-right: 8px; } #board-list .row-meta span:last-child { margin-right: 0; } /* ----- 뱃지/아이콘 ----- */ #board-list .new.icon, #board-list .hot.icon { display: inline-block; width: 15px; line-height: 1.5; font-size: 0.625rem; color: #fff; text-align: center; border-radius: 2px; margin-left: 2px; margin-bottom: 2px; font-weight: bold; vertical-align: middle; } #board-list .new.icon { background: #4587ff; } #board-list .hot.icon { background: #ff0000; } #board-list .count.comment.icon { position: relative; top: -2px; display: inline-block; min-width: 20px; padding: 0 5px; line-height: 15px; font-size: 0.625rem; color: #fff; background: #ff8a00; text-align: center; border-radius: 15px; vertical-align: middle; } #board-list .count.comment.icon:after { content: ''; display: block; position: absolute; left: 50%; margin-top: 0; margin-left: -2px; width: 0; height: 0; border-bottom: 3px solid transparent; border-left: 5px solid #ff8a00; } #board-list .file.icon i, #board-list .link.icon i { color: #999; } #board-list .icon-notice, #board-list .icon-current { display: inline-block; min-width: auto; height: auto; padding: 2px 6px; margin-right: 4px; line-height: 1.2; font-weight: 600; font-size: 0.7rem; border-radius: 3px; vertical-align: middle; } #board-list .icon-notice { color: #fff; background: #333; } #board-list .icon-current { color: #666; background: #f2f2f2; } /* ----- 데이터 없음 ----- */ /* 데이터 없음 아이콘 크기 통일 */ #board-list .list-no-data { padding: 40px 0; text-align: center; color: #999; } #board-list .list-no-data p i { display: block; width: auto; height: auto; margin: 0 auto; font-size: 3rem; line-height: 1; } /* ----- 체크박스 액션 / 버튼 액션 ----- */ #board-list .check-actions { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.85rem; } #board-list .check-actions a.delete { color: red; } #board-list .button-actions { display: flex; gap: 8px; } #board-list .button-actions .ui.button { flex: 1; margin: 0; border-radius: 0; } /* ----- 페이징 ----- */ #board-list .pagination { margin: 10px 0; } #board-list .pagination .ui.tiny.pagination.menu { flex-wrap: wrap; justify-content: center; } /* grid.pagination: 목록 페이징 래퍼 */ #board-list .grid.pagination { margin: 8px 0 0; } #board-list .grid.pagination .ui.pagination.menu { font-size: 0.75rem; flex-wrap: wrap; box-shadow: none; } #board-list .grid.pagination .ui.pagination.menu .item { min-width: 30px; margin-bottom: 3px; } /* ----- 검색 영역 ----- */ #board-list .search-area { margin-top: 0 !important; } #board-list .search-area .ui.form { padding: 10px; border: 1px solid rgba(34, 36, 38, 0.15); background: #f9f9f9; } #board-list .search-area .fields { margin-bottom: 0 !important; justify-content: center; } /* 검색 필드 한 줄 배치 */ #board-list .search-area .inline.fields { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 !important; } #board-list .search-area .dropdown.select-search { /* PC와 동일하게 최장 옵션('댓글작성자') 기준 고정폭 → 선택값 따라 폭이 변하지 않게 */ min-width: 120px !important; min-height: 1.11428571em; margin-right: 0 !important; flex: 0 0 auto; padding: .55571429em 2.1em .58571429em 1em; border-radius: 0 !important; border-color: #999; font-size: 0.875rem; font-weight: 400; } #board-list .search-area .dropdown.select-search .dropdown.icon { top: .58571429em; } #board-list .search-area .fields .input.keyword { flex: 1 1 auto; min-width: 0 !important; height: 32px; } #board-list .search-area .ui.input input { width: 100% !important; border-radius: 0 !important; border-color: #999; font-size: 0.875rem !important; line-height: 1rem; } #board-list .search-area .ui.input input::placeholder { color: #777; } #board-list .search-area .ui.input input:focus, #board-list .search-area .ui.input input:active { border-color: #000; } #board-list .search-area .fields .keyword button { position: relative; left: -30px; appearance: none; background: none; border: 0; outline: none; cursor: pointer; font-size: 1rem; font-weight: 500; color: #000; } #board-list .search-area .fields .keyword button i { color: #000; } #board-list .dropdown.select-category { float: right; display: inline-block; min-width: 180px !important; min-height: 1rem; padding: .38571429em 3.2em .38571429em 1em; border-radius: 0; border-color: #999; } #board-list .dropdown.select-category input { font-size: 0.875rem !important; } #board-list .dropdown.select-category .dropdown.icon { top: .31428571em !important; } /* ----- 드롭다운 커스텀 ----- */ #board-list .ui.selection.active.dropdown .menu, #board-list .ui.selection.active.dropdown:hover .menu { border-color: #333; border-radius: 0; } #board-list .ui.dropdown > .text, #board-list .ui.default.dropdown:not(.button) > .text, #board-list .ui.dropdown:not(.button) > .default.text { color: #777; font-size: 0.875rem !important; } #board-list .ui.selection.dropdown .menu > .item { font-size: 0.875rem !important; } /* ----- label 크기 보정 ----- */ #board-list .ui.large.label, #board-list .ui.large.labels .label { font-size: 0.8571rem; } #board-list .ui.label { padding: .4833em .533em; } /* 2. 게시판 상세 (#board-detail) */ #board-detail .count.link.icon { display: inline-block; width: 16px; line-height: 16px; font-size: 0.733em; color: #3a8afd; background: #e9eff5; text-align: center; border-radius: 2px; vertical-align: middle; } #board-detail > .board-detail-contents { position: relative; margin: 0 0 35px; padding: 0; padding-top: 10px; border-top: 2px solid #000; background: #fff; } #board-detail .board-detail-header { padding: 0; } #board-detail .board-detail-header h3.ui.header, #board-detail h3.header { margin: 0; padding: 0 5px 10px 5px; line-height: 1.45; font-size: 1.125rem; letter-spacing: -0.01em; word-break: keep-all; vertical-align: top; } #board-detail .board-detail-header .ui.grid { margin: 0; } #board-detail span.icon-notice { display: inline-block; min-width: 22px; height: 23px; margin: -4px 5px 0 0; padding-left: 7px; padding-right: 7px; line-height: 1.5rem; color: #fff; text-align: center; vertical-align: middle; font-weight: 600; font-size: 0.9231rem; background: #333; border-radius: 3px; } #board-detail .header.button { position: absolute; right: 0; top: 15px; padding: 0 !important; } #board-detail .board-detail-header .date, #board-detail .board-detail-header .hit { display: inline-block; color: #999; font-size: 0.9231rem; } #board-detail .board-detail-header .author { font-size: 0.9231rem; margin-top: 0; color: #888; } #board-detail .board-detail-header .author .member { font-weight: bold; } #board-detail .board-detail-header em.bar { font-style: normal; display: inline-block; width: 1px; height: 10px; margin: 0 4px; background: #ddd; vertical-align: middle; } /* 작성자/조회수/댓글/등록일 토글 조합과 무관하게 마지막 구분바는 숨김 */ #board-detail .board-detail-header .left.aligned { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 0.75rem; padding:0 5px; color: #999; } #board-detail .board-detail-header .left.aligned .author { color: #555; font-weight: 600; } #board-detail .board-detail-header .left.aligned em.bar:last-child { display: none; } #board-detail .board-detail-contents .ui.section.divider { margin-top: 10px; margin-bottom: 10px; } #board-detail .board-detail-contents > .content, #board-detail .content { padding: 10px 10px 10px; font-size: 0.9375rem; line-height: 1.65; word-break: break-word; } #board-detail .content img, #board-detail .board-detail-contents > .content img { max-width: 100% !important; height: auto; cursor: zoom-in; } #board-detail .content iframe, #board-detail .content table { max-width: 100%; } #board-detail .board-detail-contents > .vote { margin-bottom: 30px; text-align: center; } #board-detail .ui.comments { overflow: hidden; margin-top: 3rem; max-width: 100% !important; } #board-detail .bottom.divider { clear: both; margin-bottom: 1rem; } #board-detail .position { margin-top: 2rem; } #board-detail .position > .row { padding-top: 0; } /* ----- 첨부파일 다운로드 ----- */ #board-detail .download-area { border: 2px solid #eee; } #board-detail .download-area .item { position: relative; display: block; padding: 10px; border-top: 1px dotted #eee; } #board-detail .download-area .item:first-child { border-top: 0; } #board-detail .download-area .item .content .file-name { color: #000; vertical-align: middle; } #board-detail .download-area .item .content .file-name span.size { display: inline-block; } #board-detail .download-area .item .content .description { padding: 10px; color: #888; vertical-align: middle; letter-spacing: -0.05em; } /* ----- 미리보기 ----- */ #board-detail .detail-preview { margin: 20px 0; } #board-detail .detail-preview > .subject { padding: 8px 0; border-top: 1px solid #eee; font-size: 1rem; } #board-detail .detail-preview > .subject:first-child { border-top: 0; } #board-detail .detail-preview > .subject span { padding-left: 20px; } #board-detail #board-detail-action .button { margin-bottom: 5px; } #board-detail .list-btn-group .button {margin-bottom:5px;} /* 3. 댓글 (.comment-area) */ .comment-area { margin: 24px auto; padding: 0; border: 0; } .comment-area .comment-list .ui.grid>.column:not(.row) {padding:0;} .comment-area h4.title { font-size: 0.9375rem; font-weight: 600; color: #333; margin-bottom:5px;} .comment-area h4.title span { padding-left: 5px; color: #000; } .comment-area .comment { position: relative !important; margin: 0 !important; padding: 0 !important; } .comment-area .comment:after { content: ''; display: block; clear: both; } /* 프로필 아바타는 미사용(항상 숨김) */ .comment-area .comment .profile { display: none !important; } .comment-area .comment .profile .avatar { display: table-cell; width: 60px; height: 60px; line-height: 1.3; font-size: 0.9231rem; letter-spacing: -0.05em; font-weight: 600; text-align: center; background: #fff; vertical-align: middle; border-radius: 60px; } .comment-area .comment .profile .avatar.img { padding: 0; color: #666; background: #f1f1f1; cursor: default; font-size: 0.8571rem; } .comment-area .comment .profile .avatar.img i { margin-right: 0 !important; font-size: 2rem; color: #999; } .comment-area .comment .contents { position: relative; min-height: 0; margin: 0 0 8px; padding: 12px; border: 1px solid #e9e9e9; background: #fff; border-radius: 5px; } .comment-area .comment.depth2 .contents, .comment-area .comment.depth3 .contents { background: #fafafa; } .comment-area .comment .contents:after { content: ''; display: none; position: absolute; left: -1px; top: 36px; width: 13px; height: 13px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff; transform: translateX(-50%) translateY(0) rotate(45deg); } .comment-area .comment.depth2 .contents:after, .comment-area .comment.depth3 .contents:after { background: #fafafa; } .comment-area .comment .contents-top { overflow: hidden; margin: 0 0 15px; } .comment-area .comment .contents-top:after { content: ''; display: block; clear: both; } .comment-area .comment .contents-top em.bar { font-style: normal; display: inline-block; position: relative; width: 1px; height: 0.9231rem; margin: 0 6px; background: #ddd; vertical-align: middle; } .comment-area .comment .articles { float: none; margin: 0; min-height: 18px; font-size: 0.8125rem; } .comment-area .comment .articles .author { font-size: 0.9286rem; font-weight: 600; color: #555; letter-spacing: -0.07em; } .comment-area .comment .articles .author .icon-author { position: relative; top: -1px; margin-left: 5px; padding: 0 5px; font-size: 0.8462rem; color: #fd5064; border: 1px solid #fd5064; border-radius: 3px; } .comment-area .comment .ip, .comment-area .comment .date { position: relative; margin: 0; padding: 0; color: #888; } .comment-area .comment .comment-text { font-size: 0.875rem; line-height: 1.4; } .comment-area .comment .actions { margin-top: 10px; font-size: 1rem !important; } .comment-area .comment .actions em.bar { font-style: normal; display: inline-block; position: relative; width: 1px; height: 0.9231rem; margin: 0 6px; background: #ddd; vertical-align: middle; } .comment-area .comment .actions a { margin: 0 !important; color: #666 !important; font-size: 0.8571rem; cursor: pointer; } .comment-area .comment .actions a:hover { color: #333 !important; } .comment-area .grid.pagination { margin: 0; } .ui.comments.comment-area { font-size: 0.8125rem; } /* ----- 댓글 쓰기 ----- */ #board-detail .comment-write { padding: 15px; border: 1px solid #ddd; background: #fafafa; } #board-detail .comment-write .comment-submit { position: absolute !important; right: 15px !important; bottom: 15px !important; } .ui.modal.comment .ui.comments { display: none; max-width: 100% !important; } .ui.modal.comment .ui.comments .comment { padding-left: 0 !important; } .ui.modal.comment .ui.comments .comment .contents { margin: 8px 0 !important; background: #fff !important; } .ui.modal.comment .ui.comments .comment .contents:after { background: #fff !important; } .ui.comments .comment .avatar { margin-top: 0 !important; float: none !important; } /* 4. 글작성 (#board-write) */ #board-write { border-top: 0; padding: 0 0 40px; } /* 와이드 필드는 모두 전체폭 */ #board-write .field[class*="wide"] { width: 100% !important; margin: 0 0 8px !important; } #board-write .field > label { font-size: 0.875rem; font-weight: 600; color: #555; } #board-write .field input[type=text], #board-write .field input[type=password], #board-write .field .ui.selection.dropdown { width: 100%; } #board-write .ui.form .inline.fields { display: block; margin: 0 0 10px; } #board-write .ui.form input[type=text], #board-write .ui.form textarea, #board-write .ui.form .ui.dropdown { font-size: 0.9375rem; } #board-write #editor.editor { min-height: 240px; } #board-write .html.editor { max-width: 100%; overflow-x: auto; } #board-write .ui.segment.upload { padding: 12px; border-radius: 8px; } #board-write .ui.centered.grid .column { display: flex; gap: 8px; } #board-write .ui.centered.grid .ui.button { flex: 1; margin: 0; border-radius: 5px; font-weight: 600; } #board-write .ui.centered.grid .submit { background: var(--point-color); color: #fff; } #board-write .ui.divider { margin: 10px 0; } #board-write .upload .file input.text { min-width: 150px !important; width: 150px !important; height: 35px !important; font-size: 0.875rem !important; } #board-write .ui.form input.button { font-size: 0.85714286rem !important; } /* 5. 첨부 이미지 인라인 표시 */ .attach-images { margin: 15px 0; text-align: center; } .attach-images:empty { display: none; } .attach-images .attach-image { display: inline-block; margin: 5px; max-width: 100%; } .attach-images .attach-image img { max-width: 100%; height: auto; border: 1px solid #eee; border-radius: 4px; vertical-align: middle; } /* 본문 이미지 클릭 시 확대 뷰어 연결 */ .board-detail-contents .content img { cursor: zoom-in; } /* ===== 시안확인(project) 스킨 전용 ===== */ /* 진행상태 배지(목록·뷰 공용): 완료=green, 검토중=amber */ .proj-status { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.72rem; font-weight:600; vertical-align:middle; } #board-list .proj-status { margin-left:4px; } .proj-status.done { background:#e6f6ee; color:#1a9d5a; } .proj-status.review { background:#fff4e0; color:#c77700; } #board-write h4.proj-step { margin:20px 0 10px; padding:10px; background: #f8f8f8; font-size:1rem; } #board-write .proj-req { color:#d64545; } #board-write label small { color:#999; font-weight:400; } #board-write .proj-phone { display:flex; align-items:center; gap:5px; } #board-write .proj-phone input {width:70px; text-align:center; } #board-write .proj-admin { margin:10px 0 4px; padding:10px 12px; background:#fff8e6; border:1px solid #ffe6a8; border-radius:6px; } /* 뷰: 시안 정보 테이블(고정 레이아웃) */ .proj-info { margin-top:22px; padding-top:18px; border-top:1px solid #eee; } .proj-info-table.proj-info-table { table-layout:fixed; width:100%; margin:0; } .proj-info-table td { padding:9px 10px; word-break:break-word; vertical-align:middle; } .proj-info-table td.col { width:88px; background:#f7f8fa; font-weight:600; color:#555; white-space:nowrap; } /* 상품코드 셀: 코드 줄바꿈 허용 */ .proj-info-table .proj-goods-code { display:inline-block; vertical-align:middle; word-break:break-all; } .proj-info-table .proj-goods-btn.proj-goods-btn { margin-left:6px; padding:5px 9px; font-size:0.75rem; white-space:nowrap; vertical-align:middle; }