/* 게시판 상하단 컨텐츠 */ .board.content { } .board.content img { max-width: 100%; } #board-list .ui.dropdown, .ui.dropdown .menu>.item {font-size:0.875rem;} .ui.basic.button, .ui.basic.buttons .button {font-weight:500;} /* 게시판 목록 */ #board-list .new.icon { display: inline-block; width: 15px; line-height: 1.5; font-size: 0.625rem; color: #fff; background: #4587ff; text-align: center; border-radius: 2px; margin-left: 2px; margin-bottom:2px; font-weight: bold; vertical-align: middle;} #board-list .hot.icon { display: inline-block; width: 15px; line-height: 1.5; font-size: 0.625rem; color: #fff; background: #ff0000; text-align: center; border-radius: 2px; margin-left: 2px; margin-bottom:2px; font-weight: bold; vertical-align: middle;} #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 {color:#999;} #board-list .link.icon i {color:#999;} #board-list .board-top {clear:both;} #board-list .board-top:after {content:''; display:block; clear:both;} #board-list .total-count {display:inline-block; padding-bottom:5px;} #board-list .total-count strong {color:#000;} #board-list .ui.table {margin-bottom: 10px; border:0; border-bottom:1px solid #d5dbe0; border-radius:0;} #board-list .ui.table thead th {border-left:0; background:#fff !important; border-top:2px solid #000; border-bottom:1px solid #d5dbe0; color:#000; font-weight:500; font-size:0.875rem; border-radius:0 !important; cursor:default !important;} #board-list .ui.table thead th a { color:#000; font-weight:500; font-size:0.875rem; } #board-list .ui.table tbody td {font-size:0.875rem; color:#222; padding: 1em .78571429em; border-color:#eee; cursor:default;} #board-list .ui.table tbody td .subject { overflow:hidden; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap: break-word !important; max-height:calc(1em * 1.6 * 2); white-space:normal; margin:0 0 0; padding:0; line-height:1.5; color:#222; font-weight:normal; } #board-list .ui.table tbody td .category-name {color:#333; font-size:0.875rem; font-weight:400;} #board-list .ui.table tbody td .subject.check-on {position:relative; padding-left:25px;} #board-list .ui.table tbody td .subject strong { font-weight: normal; } #board-list .ui.table tbody td a.detail.link {color:#222;} #board-list .ui.table tbody td a.detail.link:hover {color:#000;} #board-list .ui.table tbody tr:hover {background:#fff !important;} #board-list .ui.table tbody td.product-info img.thumb {width:80px;} #board-list .ui.table tbody td.product-info span.product-name { overflow:hidden; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap: break-word !important; max-height:calc(1em * 1.4 * 2); white-space:normal; margin:0 0 0; padding:0; font-size:0.875rem; line-height:1.4; color:#666; font-weight:normal; } #board-list .ui.table tbody .ui.checkbox {position:absolute; left:0; top:1px; vertical-align:middle;} #board-list .ui.table span.icon-notice { display: inline-block; min-width: 22px; height: 24px; padding-left:7px; padding-right:7px; line-height:1.6rem; color: #fff; text-align: center; vertical-align: middle; font-weight: 600; font-size: 0.8125rem; background:#333; border-radius:3px; } #board-list .ui.table span.icon-current { /* 고정 높이 안에서 글자를 세로 가운데로: line-height 로 맞추면 폰트마다 어긋난다 */ display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 23px; padding-left:7px; padding-right:7px; line-height: 1; color: #666; text-align: center; vertical-align: middle; font-weight: 700; font-size: 0.875rem; background:#f9f9f9; border-radius:3px; } #board-list .grid.pagination {margin-bottom:0;} #board-list .search-area { } #board-list .search-area .ui.form { padding: 15px 0; 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 .dropdown.select-search {min-width:120px; min-height:1.11428571em; margin-right:10px; 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 {min-width:200px; height:32px;} #board-list .search-area .ui.input input {border-radius:0 !important; border-color:#999; font-size:0.875rem; 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;} #board-list .dropdown.select-category { float: right; display:inline-block; border-radius:0; border-color:#999; min-width:180px !important; min-height:1em; padding: .58571429em 3.2em .58571429em 1em; } #board-list .dropdown.select-category .dropdown.icon {top:.61428571em !important;} /* dropdown */ #board-list .ui.selection.dropdown {} #board-list .ui.selection.active.dropdown .menu, #board-list .ui.selection.active.dropdown:hover .menu {border-color:#333; border-radius:0;} #board-list .ui.default.dropdown:not(.button)>.text, .ui.dropdown:not(.button)>.default.text {color:#777;} /* 게시판 상세 */ #board-detail .count.link.icon {display:inline-block; margin-top:-3px; 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; border-top:2px solid #000; padding-top:20px; background:#fff;} #board-detail .board-detail-header {padding:0 10px;} #board-detail h3.header {padding:0 0 10px 0; line-height:1.4; font-size:1.25rem; letter-spacing:-0.01em; font-weight:600; vertical-align:top;} #board-detail span.icon-notice { display: inline-block; min-width: 22px; height: 23px; margin:-5px 5px 0 0; padding-left:7px; padding-right:7px; line-height:1.6rem; border:0px solid #333; color: #fff; text-align: center; vertical-align: middle; font-weight: 500; font-size:0.875rem; background:#333; border-radius:3px; } #board-detail .header.button {position:absolute; right:0px; top:15px; padding:0 !important;} #board-detail .board-detail-header .date {display:inline-block; color:#999; font-size:0.9231rem;} #board-detail .board-detail-header .hit {display:inline-block; color:#999; font-size:0.9231rem;} #board-detail .board-detail-header .author {font-size:0.875rem;margin-top:25px; 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:0.9231rem; margin:0 8px; background:#ddd; vertical-align:middle;} /* 메타 항목 마지막 구분바는 숨김 */ #board-detail .board-detail-header .left.aligned em.bar:last-child {display:none;} #board-detail .board-detail-contents > .content {padding:10px 10px 30px; line-height:1.6;} #board-detail .board-detail-contents > .content img {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 { } #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 i {} #board-detail .detail-preview > .subject span {padding-left:20px;} /* 댓글 목록 */ .comment-area {margin:30px auto; padding:0; border:0 solid #eee; background:;} .comment-area h4.title {font-size:1rem; font-weight:600; color:#333;} .comment-area h4.title span {padding-left:5px; color:#000;} .comment-area .comment {position:relative !important; margin:0 !important; padding:0 0 0 0 !important;} .comment-area .comment:after {content:''; display:block; clear:both;} .comment-area .comment .profile {display:table; display:none; table-layout:fixed; overflow:hidden; position:absolute; top:0; left:0; width:60px; height:60px; margin:13px 0 0; border-radius:60px !important;} .comment-area .comment .profile .avatar {display:table-cell; width:60px; height:60px; line-height:1.3; font-size:0.875rem; letter-spacing:-0.02em; 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:85px; margin:0 0 10px; padding:15px; border:1px solid #e9e9e9; background:#fff; border-radius:5px;} .comment-area .comment.depth1 {} .comment-area .comment.depth1:before, .comment-area .comment.depth2:before, .comment-area .comment.depth3:before, .comment-area .comment.depth4:before, .comment-area .comment.depth5:before { font-family: "remixicon"; content: "\f308"; position:absolute; left:-25px; top:5px; width:13px; height:13px; font-size:20px; color:#ddd; } .comment-area .comment.depth2 .contents {background:#fafafa;} .comment-area .comment.depth3 .contents {background:#fafafa;} .comment-area .comment.depth4 .contents {background:#fafafa;} .comment-area .comment.depth5 .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; -webkit-transform: translateX(-50%) translateY(0) rotate(45deg); 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:left; margin:0; min-height:18px; font-size:0.875rem;} .comment-area .comment .articles .author {font-size:0.875rem; font-weight:500; 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 {position:relative; margin:0; padding:0; color:#888;} .comment-area .comment .date {position:relative; margin:0; padding:0; color:#888;} .comment-area .comment .comment-text {line-height:1.4;} .ui.comments.comment-area {font-size:0.9286rem;} .comment-area .comment .actions {float:right; font-size:1rem !important;} .comment-area .comment .actions a {margin:0 !important; color:#333 !important; font-size:0.8571rem; cursor:pointer;} .comment-area .comment .actions a:hover {color:#333 !important;} .comment-area .grid.pagination { margin: 20px 0px; } /* 댓글 쓰기 */ #board-detail .comment-write {padding:15px 15px 15px 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;} /* 글작성 */ #board-write { border-top:2px solid #000; padding:15px 0 0; } #board-write .ui.selection.dropdown {min-height:1.7em; padding: .58571429em 3.2em .58571429em 1em;} #board-write .ui.selection.dropdown>.delete.icon, #board-write .ui.selection.dropdown>.dropdown.icon, #board-write .ui.selection.dropdown>.search.icon {top:.58571429em;} /* semantic-ui custom */ #board-list .ui.large.label, #board-list .ui.large.labels .label {font-size:0.8571rem;} #board-list .ui.label {padding:.4833em .533em;} /* 첨부 이미지 인라인 표시 */ .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;} /* ===== 시안확인(project) 스킨 전용 ===== */ /* 진행상태 배지(목록·뷰 공용): 완료=green, 검토중=amber */ .proj-status { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.78rem; 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; } /* 글작성 폼 */ .project-form h4.proj-step { margin:22px 0 12px; padding-bottom:8px; border-bottom:2px solid #eee; font-size:1.05rem; } .project-form h4.proj-step:first-of-type { margin-top:6px; } .project-form .proj-req { color:#d64545; } .project-form label small { color:#999; font-weight:400; } .project-form .proj-phone { display:flex; align-items:center; gap:6px; max-width:340px; } .project-form .proj-phone input { text-align:center; } .project-form .proj-phone span { color:#bbb; } .project-form .proj-admin { margin:10px 0 4px; padding:10px 12px; background:#fff8e6; border:1px solid #ffe6a8; border-radius:6px; } /* 뷰: 시안 정보 테이블(고정 레이아웃) */ .proj-info { margin-top:28px; padding-top:22px; border-top:1px solid #eee; } .proj-info-table.proj-info-table { table-layout:fixed; width:100%; margin:0; } .proj-info-table td { padding:9px 12px; word-break:break-word; vertical-align:middle; } .proj-info-table td.col { width:110px; background:#f7f8fa; font-weight:600; color:#555; white-space:nowrap; } /* 상품코드 셀: 코드는 wrap 허용, 버튼은 줄바꿈 금지 */ .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:8px; padding:5px 10px; font-size:0.78rem; white-space:nowrap; vertical-align:middle; } /* snb */ .container.page-contents {position:relative; padding-left:260px;} #column-snb {position:relative; left:-260px; float:left; margin-right:-260px; width:200px; padding:0;} #column-snb .inner {margin:80px 0 80px 0; border-top:1px solid #000; border-bottom:1px solid #000; background:#fff;} #column-snb .inner .snb-menu {margin:0; padding:15px 0; list-style:none;} #column-snb .inner .snb-menu li {margin:0; padding:0;} #column-snb .inner .snb-menu li.ui.divider {margin:.6rem 0 !important; border-top:1px dotted rgba(34,36,38,.1);} #column-snb .inner .snb-menu li a {position:relative; display:block; padding:8px 15px; color:#222; font-size: 0.9375rem;} #column-snb .inner .snb-menu li a i {position:absolute; right:5px; top:8px; display:none; font-weight:600;} #column-snb .inner .snb-menu li a em.count {position:absolute; top:50%; right:10px; display:none; min-width:19px; margin-top:-10px; padding:0 4px; text-align:center; font-style:normal; font-size:0.875rem; line-height:1.6; font-weight:bold; color:#fff; background:#333; border-radius:50px;} #column-snb .inner .snb-menu li a:hover {background:#f9f9f9;} #column-snb .inner .snb-menu li a:hover i {display:inline-block;} #column-snb .inner .snb-menu li.selected a {background:#f9f9f9;} #column-snb .inner .snb-menu li.selected a i {display:inline-block;} .container.page-contents .page-section {float:left; width:100%;}