/* 게시판 상하단 컨텐츠 */ .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-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; } /* ===== 갤러리 스킨 목록 ===== */ #board-list .gallery-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; margin: 20px 0 30px; padding: 0; } #board-list .gallery-list .gallery-item { list-style: none; position: relative; } /* 썸네일 */ #board-list .gallery-item .thumb { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #eee; border-radius: 6px; background: #f7f8f9; } #board-list .gallery-item .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } #board-list .gallery-item .thumb:hover img { transform: scale(1.04); } /* 노이미지: 잘림 없이 가운데 표시 */ #board-list .gallery-item .thumb img.noimage { object-fit: contain; } #board-list .gallery-item .thumb:hover img.noimage { transform: none; } /* 썸네일 위 배지 */ #board-list .gallery-item .badge-notice { position: absolute; top: 8px; left: 8px; padding: 2px 8px; font-size: 0.75rem; font-weight: 700; color: #fff; background: #e03131; border-radius: 3px; } #board-list .gallery-item .badge-lock { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; line-height: 26px; text-align: center; color: #fff; background: rgba(0, 0, 0, .5); border-radius: 50%; } #board-list .gallery-item .badge-lock i.icon { margin: 0; } /* 정보 영역 */ #board-list .gallery-item .info { padding: 10px 2px 0; } #board-list .gallery-item .info .category { display: inline-block; margin-bottom: 4px; font-size: 0.75rem; color: #3b82c4; } #board-list .gallery-item .info .subject { display: block; color: #333; font-size: 0.9375rem; line-height: 1.4; max-height: 2.8em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #board-list .gallery-item .info .subject:hover { color: #000; text-decoration: underline; } #board-list .gallery-item .info .meta { margin-top: 6px; font-size: 0.75rem; color: #999; } #board-list .gallery-item .info .meta span { margin-right: 8px; } #board-list .gallery-item .info .count.comment { color: #e03131; font-weight: 700; } #board-list .gallery-item .info .new.icon, #board-list .gallery-item .info .hot.icon { display: inline-block; margin-left: 3px; padding: 0 4px; font-size: 0.7rem; font-weight: 700; color: #fff; border-radius: 2px; } #board-list .gallery-item .info .new.icon { background: #2f9e44; } #board-list .gallery-item .info .hot.icon { background: #f08c00; } /* 공지 강조 */ #board-list .gallery-item.notice .thumb { border-color: #ffc9c9; } /* 데이터 없음 */ #board-list .gallery-list .list-no-data { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: #aaa; } /* 반응형 */ @media (max-width:1200px) { #board-list .gallery-list { grid-template-columns: repeat(3, 1fr); } } @media (max-width:768px) { #board-list .gallery-list { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } } @media (max-width:480px) { #board-list .gallery-list { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } } /* 첨부 이미지 인라인 표시 */ .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; } /* 핀보드 목록 */ .portfolio-board { margin: 0 auto; } .portfolio-pinboard { column-count: 4; column-gap: 15px; margin: 20px 0 0; } .portfolio-item { display: inline-block; width: 100%; margin: 0 0 15px; background: #fff; border: 1px solid #eee; box-sizing: border-box; break-inside: avoid; -webkit-column-break-inside: avoid; vertical-align: top; transition: border-color .2s, box-shadow .2s; } .portfolio-item:hover { border-color: #000; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.35); } .portfolio-item .thumb { display: block; position: relative; padding: 15px; } .portfolio-item .thumb img { display: block; width: 100%; height: auto; margin: 0; } .portfolio-item .thumb img.noimage { opacity: .5; } .portfolio-item .thumb .badge-lock { position: absolute; top: 20px; right: 20px; color: #fff; background: rgba(0, 0, 0, .5); border-radius: 3px; padding: 2px 6px; } .portfolio-item .body { padding: 0 15px 12px; } .portfolio-item .title { display: block; font-size: 1rem; font-weight: 500; color: #555; line-height: 1.4; margin: 0 0 8px; text-decoration: none; } .portfolio-item:hover .title { color: #000; } .portfolio-item .desc { font-size: 0.875rem; line-height: 1.6; color: #666; margin: 0 0 8px; word-break: break-all; } .portfolio-item .hashtags { margin: 0 0 8px; font-size: 0; } .portfolio-item .hashtags .tag { display: inline-block; font-size: 0.8125rem; line-height: 1.4; color: var(--point-text-color); margin: 0 6px 3px 0; } .portfolio-item .meta { font-size: 0.8125rem; color: #999; } .portfolio-item .meta span { margin-right: 8px; } .portfolio-item .related-products { border-top: 1px solid #ddd; padding: 5px 15px; background-color: #f8f8f8; } .portfolio-item .related-products .product { display: block; position: relative; padding: 12px 0 12px 62px; min-height: 77px; border-top: 1px dotted #ddd; text-decoration: none; color: #333; } .portfolio-item .related-products .product:first-child { border-top: 0; } .portfolio-item .related-products .pthumb { position: absolute; left: 0; top: 12px; width: 52px; height: 52px; overflow: hidden; background: #f5f5f5; } .portfolio-item .related-products .pthumb img { width: 100%; height: 100%; object-fit: cover; } .portfolio-item .related-products .pinfo { display: block; } .portfolio-item .related-products .pname { overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word !important; max-height: calc(0.8125rem * 1.4 * 2); white-space: normal; margin: 0 0 0; padding: 0; font-size: 0.8125rem; line-height: 1.4; color: #333; font-weight: 400; } .portfolio-item .related-products .pcode { display: block; font-size: 0.8125rem; color: #999; margin-top: 3px; font-style: normal; } .portfolio-empty { padding: 80px 0; text-align: center; color: #999; } .portfolio-empty i { display: block; font-size: 40px; margin-bottom: 10px; } .portfolio-more { margin: 25px 0 0; text-align: center; } .portfolio-more .btn-portfolio-more { display: block; padding: 15px 0; border: 1px solid #dbdbdb; background: #fbfbfb; border-radius: 5px; font-weight: 700; color: #191919; font-size: 0.9375rem; text-decoration: none; } .portfolio-more .btn-portfolio-more:hover { border-color: #bed5d1; background: #f5fbfa; color: var(--point-text-color); } .portfolio-more.hide { display: none; } .portfolio-more-loading { display: none; height: 50px; line-height: 50px; text-align: center; color: #999; } .portfolio-more-loading.loading { display: block; } .portfolio-more-loading.loading:after { content: '\2026'; letter-spacing: 2px; } @media (max-width:1200px) { .portfolio-pinboard { column-count: 3; } } @media (max-width:768px) { .portfolio-pinboard { column-count: 2; } } /* ===== case 상단(검색+글작성) / 다중이미지 / 무한스크롤 ===== */ .portfolio-head { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; margin: 10px 0 25px; padding: 25px 20px; background: #f6f6f6; border: 1px solid #ddd; border-radius: 6px; } .portfolio-head .portfolio-search { text-align: center; } .portfolio-head .lead { margin: 0 0 12px; font-size: 1.25rem; font-weight: 600; color: #222; } .portfolio-head .lead b { color: var(--point-text-color); } .portfolio-head .search-box { display: inline-flex; width: 420px; max-width: 80vw; border: 1px solid #000; border-radius: 0; overflow: hidden; background: #fff; } .portfolio-head .search-box input[type=text] { flex: 1; border: 0; outline: none; padding: 11px 18px; font-size: 0.875rem; } .portfolio-head .search-box button { border: 0; background: #fff; color: #333; width: 48px; cursor: pointer; font-size: 1.5rem; } .portfolio-head .search-box button:hover {} /* 검색어 초기화(x) 버튼: 입력값이 있을 때만 노출 */ .portfolio-head .search-box .search-clear { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #b3b3b3; width: 34px; font-size: 0.8125rem; } .portfolio-head .search-box .search-clear:hover { background: #fff; color: #666; } .portfolio-head .search-box .search-clear i { margin: 0; } .portfolio-head .search-box input[type=text]:placeholder-shown~.search-clear { display: none; } .portfolio-head .portfolio-write { position: absolute; right: 20px; top: 20px; } .portfolio-board .board-top .search-keyword { color: var(--point-text-color); font-weight: 600; margin-left: 6px; font-size: 0.875rem; } /* 카드 대표이미지 위 추가이미지(파일#2~) 미니썸네일 */ .portfolio-item .thumb { position: relative; } .portfolio-item .sub-images { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 3px; } .portfolio-item .sub-images .sub { width: 40px; height: 40px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); overflow: hidden; background: #f5f5f5; } .portfolio-item .sub-images .sub img { width: 100%; height: 100%; object-fit: cover; margin: 0; } /* 무한스크롤 로딩(fetch 중에만) */ .portfolio-sentinel { height: 1px; } .portfolio-more-loading { display: none; height: 46px; line-height: 46px; text-align: center; color: #999; } .portfolio-more-loading.loading { display: block; } .portfolio-more-loading.loading:after { content: '\2026'; letter-spacing: 3px; font-size: 24px; } .portfolio-more { margin: 15px 0 0; text-align: center; } .portfolio-more.hide { display: none; } .portfolio-more .btn-portfolio-more { display: inline-block; padding: 12px 40px; border: 1px solid #dbdbdb; background: #fbfbfb; border-radius: 5px; color: #333; text-decoration: none; } /* ===== 더보기 fade-in / 해시태그 링크 / 카드 레이어 ===== */ @keyframes portfolioFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .portfolio-item.portfolio-appear { animation: portfolioFadeIn .45s ease both; } .portfolio-item .hashtags .tag { cursor: pointer; text-decoration: none; } .portfolio-item .hashtags .tag:hover { text-decoration: underline; } .portfolio-pinboard .portfolio-item { cursor: pointer; } .portfolio-pinboard .portfolio-item .related-products .product, .portfolio-pinboard .portfolio-item .hashtags .tag { cursor: pointer; } /* 카드 레이어 모달 */ .board-layer-modal { width: 900px; max-width: 94vw; scrollbar-gutter: stable; } /* 모달 닫기(X) 버튼 커스텀 */ .board-layer-modal>.close.icon { z-index: 100; top: 1rem; right: 1.5rem; width: 32px; height: 32px; margin: 0; opacity: 1; border-radius: 50%; font-size: 0 !important; } /* 레이어 모달 내부 패딩 제거 */ .board-layer-modal>.content { padding: 0 !important; overflow: hidden; } /* 스크롤은 레이어 내부(.layer-wrap)가 담당 → 헤더는 고정 */ .board-layer-modal .board-layer-body { min-height: 200px; } .board-layer-modal .board-layer-body #view-page, .board-layer-modal .board-layer-body #board-detail { padding: 0px; } /* 로딩상태도 레이어와 같은 높이로 고정 (높이 점프 방지) */ .board-layer-loading { height: 82vh; display: flex; align-items: center; justify-content: center; color: #999; } .board-layer-loading:after { content: '\2026'; font-size: 26px; letter-spacing: 3px; } .board-layer-loading.error:after { content: '\26A0'; font-size: 22px; } /* ===== 카드 레이어 뷰(좌 내용 · 우 관련상품) + 상세 확장필드 ===== */ /* 레이어를 flex 컬럼으로 */ .portfolio-layer { display: flex; flex-direction: column; /* 로딩상태와 동일한 고정 높이 */ height: 82vh; } .portfolio-layer .layer-top { flex: 0 0 auto; z-index: 2; background: #fff; padding: 18px 55px 18px 24px; border-bottom: 1px solid #f0f1f3; } .portfolio-layer .layer-top h2 { margin: 0; font-size: 1.25rem; font-weight: 600; color: #111; } .portfolio-layer .layer-wrap { flex: 1 1 auto; min-height: 0; /* flex 자식이 overflow 스크롤되려면 필수 */ overflow-y: auto; scrollbar-gutter: stable; display: flex; padding: 0 24px; align-items: flex-start; } .portfolio-layer .layer-contents { flex: 1; min-width: 0; margin-right: 0; padding: 30px 24px 30px 0; border-right: 1px solid #eee; box-sizing: border-box; } .portfolio-layer .layer-contents.wide { margin-right: 0; padding-right: 0; border-right: 0; } .portfolio-layer .layer-images { margin: 0 0 18px; } .portfolio-layer .layer-images img { display: block; width: 100%; height: auto; margin: 0 0 10px; border: 1px solid #eee; } .portfolio-layer .layer-body { font-size: 0.875rem; line-height: 1.8; color: #333; word-break: break-all; } .portfolio-layer .layer-body img { max-width: 100%; height: auto; } .portfolio-layer .layer-hashtags { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #eee; } .portfolio-layer .layer-hashtags .tag { display: inline-block; margin: 0 8px 4px 0; color: var(--point-text-color); text-decoration: none; cursor: pointer; font-size: 0.875rem; } .portfolio-layer .layer-hashtags .tag:hover { text-decoration: underline; } .portfolio-layer .layer-products { flex: 0 0 220px; width: 220px; position: sticky; top: 0; /* 헤더가 스크롤 영역 밖으로 나갔으므로 오프셋 0. 본문 스크롤 시 관련상품은 상단 고정 */ padding: 30px 0 30px 20px; box-sizing: border-box; } .portfolio-layer .layer-products h4 { margin: 0 0 12px; font-size: 1rem; font-weight: 600; } .portfolio-layer .layer-products .product { display: block; position: relative; padding: 12px 0 12px 62px; min-height: 75px; border-top: 1px dotted #ddd; text-decoration: none; color: #333; } .portfolio-layer .layer-products .product:first-of-type { border-top: 0; } .portfolio-layer .layer-products .pthumb { position: absolute; left: 0; top: 12px; width: 52px; height: 52px; overflow: hidden; background: #f5f5f5; } .portfolio-layer .layer-products .pthumb img { width: 100%; height: 100%; object-fit: cover; margin: 0; } .portfolio-layer .layer-products .pname { overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word !important; max-height: calc(0.8125rem * 1.4 * 2); white-space: normal; margin: 0 0 0; padding: 0; font-size: 0.8125rem; line-height: 1.4; color: #333; font-weight: 600; } .portfolio-layer .layer-products .pcode { display: block; font-size: 0.8125rem; color: #999; margin-top: 3px; font-style: normal; } #board-detail .detail-hashtags { margin: 0 0 16px; } #board-detail .detail-hashtags .tag { display: inline-block; margin: 0 8px 4px 0; color: var(--point-text-color); text-decoration: none; } #board-detail .detail-hashtags .tag:hover { text-decoration: underline; } #board-detail .detail-products { margin: 24px 0; padding: 16px 0; border-top: 1px solid #eee; } #board-detail .detail-products h4 { margin: 0 0 14px; font-size: 1rem; font-weight: 600; } #board-detail .detail-products .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } #board-detail .detail-products .product { display: block; position: relative; padding: 0 0 0 62px; min-height: 52px; text-decoration: none; color: #333; } #board-detail .detail-products .pthumb { position: absolute; left: 0; top: 0; width: 52px; height: 52px; overflow: hidden; background: #f5f5f5; } #board-detail .detail-products .pthumb img { width: 100%; height: 100%; object-fit: cover; } #board-detail .detail-products .pname { display: block; font-size: 0.8125rem; line-height: 1.4; } #board-detail .detail-products .pcode { display: block; font-size: 0.8125rem; color: #999; margin-top: 3px; font-style: normal; } /* 레이어 글수정/삭제 버튼 */ .portfolio-layer .layer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .portfolio-layer .layer-top h2 { flex: 1; min-width: 0; } .portfolio-layer .layer-actions { flex-shrink: 0; margin-right: 26px; /* 우상단 X 닫기 버튼과 겹치지 않게 여백 */ } .portfolio-layer .layer-actions a { display: inline-block; padding: 6px 14px; margin-left: 6px; font-size: 0.8125rem; border: 1px solid #ccc; border-radius: 4px; color: #333; text-decoration: none; background: #fff; } .portfolio-layer .layer-actions a:hover { background: #f5f5f5; } .portfolio-layer .layer-actions .btn-layer-delete { color: #e0323c; border-color: #e9a9ad; } .portfolio-layer .layer-actions .btn-layer-delete:hover { background: #fdf0f0; } /* 카드 페이드인: 등장 전 opacity 0 으로 플래시 방지 */ .portfolio-pinboard .portfolio-item { opacity: 0; } /* Masonry 절대배치 전환 */ .portfolio-pinboard { column-count: 1 !important; column-gap: normal; position: relative; } .portfolio-pinboard .portfolio-sizer, .portfolio-pinboard .portfolio-gutter-sizer { position: absolute; top: 0; height: 0; } .portfolio-pinboard .portfolio-sizer { width: 23.5%; } .portfolio-pinboard .portfolio-gutter-sizer { width: 2%; } .portfolio-pinboard .portfolio-item { width: 23.5%; margin: 0 0 20px; padding: 0; display: block; float: none; opacity: 1; background: transparent; border: 0; box-shadow: none; break-inside: auto; -webkit-column-break-inside: auto; } .portfolio-pinboard .portfolio-item:hover { border: 0; box-shadow: none; } .portfolio-inner { background: #fff; border: 1px solid #ddd; box-sizing: border-box; opacity: 0; transform: scale(0.82); transform-origin: center 40%; /* 등장과 hover 전이만 적용 */ transition: opacity .45s ease, transform .5s cubic-bezier(0.2, 0.75, 0.3, 1), border-color .2s ease, box-shadow .2s ease; } .portfolio-item.is-revealed .portfolio-inner { opacity: 1; transform: scale(1); } .portfolio-item:hover .portfolio-inner { border-color: #000; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2); } /* 카드 단위 레이아웃 격리로 스크롤 성능 확보 */ .portfolio-pinboard .portfolio-item { contain: layout style; } @media (max-width:1200px) { .portfolio-pinboard .portfolio-sizer { width: 31.5%; } .portfolio-pinboard .portfolio-item { width: 31.5%; } } @media (max-width:768px) { .portfolio-pinboard .portfolio-sizer { width: 48.5%; } .portfolio-pinboard .portfolio-item { width: 48.5%; } } /* 대표 이미지 로딩 스켈레톤 */ .portfolio-item .thumb>img { opacity: 0; min-height: 160px; transition: opacity .35s ease; } .portfolio-item .thumb>img.loaded { opacity: 1; min-height: 0; } .portfolio-item .thumb>img.noimage.loaded { opacity: .5; } /* 이미지 없음 표시는 로드돼도 살짝 흐리게 유지 */ .portfolio-item .thumb::before { content: ''; position: absolute; inset: 15px; border-radius: 4px; pointer-events: none; background: linear-gradient(100deg, #eceef1 30%, #f6f7f9 50%, #eceef1 70%) 0 0 / 200% 100%; animation: portfolioShimmer 1.15s ease-in-out infinite; } .portfolio-item .thumb.loaded::before { display: none; } /* 로드 완료된 카드는 shimmer 제거 */ @keyframes portfolioShimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }