/* ---------- 공통 컨테이너 ---------- */ .board.content img { max-width: 100%; } /* MERGED: 폭 고정 해제 + 컨테이너 좌우 패딩 */ #board-list, #board-detail, #board-write { width: 100% !important; } .container.page-contents { padding: 12px; } /* 게시판 목록 */ #board-list .new.icon { display: inline-block; width: 16px; line-height: 16px; font-size: 0.6875rem; color: #fff; background: #76b9bd; text-align: center; border-radius: 2px; margin-left: 2px; font-weight: bold; vertical-align: middle;} #board-list .hot.icon { display: inline-block; width: 16px; line-height: 16px; font-size: 0.6875rem; color: #fff; background: #ff0000; text-align: center; border-radius: 2px; margin-left: 2px; font-weight: bold; vertical-align: middle;} #board-list .count.comment.icon {position:relative; top:-1px; display:inline-block;min-width:20px; padding:0 5px; line-height:15px;font-size:0.6875rem;color:#fff;background:#999; 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 #999; } #board-list .board-top {clear:both; display:none;} #board-list .board-top:after {content:''; display:block; clear:both;} #board-list .total-count {display:inline-block; padding-bottom:5px; font-size:1rem;} #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.9286rem; border-radius:0 !important; cursor:default !important;} #board-list .ui.table thead th a { color:#000; font-weight:500; font-size:0.9286rem; } #board-list .ui.table tbody td {font-size:0.9286rem; 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.5 * 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 a.detail.link {color:#222;} #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.8462rem; line-height:1.4; color:#666; font-weight:normal; } #board-list .ui.table tbody .ui.checkbox {vertical-align:middle;} #board-list .ui.table span.icon-notice { display: inline-block; min-width: 22px; height: 23px; padding-left:7px; padding-right:7px; line-height:1.7rem; color: #fff; text-align: center; vertical-align: middle; font-weight: 700; font-size: 0.8571rem; 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.8571rem; 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:1rem; font-weight:300;} #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:1rem; 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:normal;} #board-list .dropdown.select-category { float: right; display:inline-block; border-radius:0; border-color:#999; min-width:180px !important; min-height:1.16428571em; } #board-list .dropdown.select-category .dropdown.icon {top:.81428571em !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;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.385rem; letter-spacing:-0.04em; 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.7rem; border:0px solid #333; color: #fff; text-align: center; vertical-align: middle; font-weight: 700; font-size: 0.9231rem; 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.9231rem;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:1.154rem; font-weight:700; 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.9231rem; letter-spacing:-0.05em; font-weight:700; 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.depth2 .contents {background:#fafafa;} .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; -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.9286rem;} .comment-area .comment .articles .author {font-size:0.9286rem; font-weight:700; 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:#666 !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;} /* 4. 글작성 (#board-write) */ /* MERGED: border-top/padding — 전체폭 모바일 값으로 통일 */ #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; } /* case(포트폴리오) 핀보드 — 모바일(2컬럼) */ .portfolio-board {margin:0 auto;} .portfolio-pinboard {column-count:2; column-gap:10px; margin:15px 0 0;} .portfolio-item {display:inline-block; width:100%; margin:0 0 10px; background:#fff; border:1px solid #eee; box-sizing:border-box; break-inside:avoid; -webkit-column-break-inside:avoid; vertical-align:top;} .portfolio-item .thumb {display:block; position:relative; padding:8px;} .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:12px; right:12px; color:#fff; background:rgba(0,0,0,.5); border-radius:3px; padding:2px 5px;} .portfolio-item .body {padding:0 8px 10px;} .portfolio-item .title {display:block; font-size:14px; font-weight:500; color:#222; line-height:1.4; margin:0 0 6px; text-decoration:none;} .portfolio-item .desc {font-size:13px; line-height:1.5; color:#666; margin:0 0 6px; word-break:break-all;} .portfolio-item .hashtags {margin:0 0 6px;} .portfolio-item .hashtags .tag {display:inline-block; font-size:13px; color:var(--point-text-color); margin:0 5px 0 0;} .portfolio-item .meta {font-size:11px; color:#999;} .portfolio-item .meta span {margin-right:6px;} .portfolio-item .related-products {border-top:1px solid #eee; padding:3px 8px 0 8px; background-color:#f8f8f8;} .portfolio-item .related-products .product {display:block; position:relative; padding:8px 0 8px 48px; min-height:40px; 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:8px; width:40px; height:40px; overflow:hidden; background:#f5f5f5;} .portfolio-item .related-products .pthumb img {width:100%; height:100%; object-fit:cover;} .portfolio-item .related-products .pname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; font-size: 12px; line-height: 1.3; max-height: calc(1.3em * 2); color: #333; } .portfolio-item .related-products .pcode {display:block; font-size:12px; line-height:1; color:#999; margin-top:2px; font-style:normal;} .portfolio-empty {padding:60px 0; text-align:center; color:#999;} .portfolio-empty i {display:block; font-size:3rem; line-height:1; margin-bottom:8px;} /* 아이콘 크기 게시판 스킨 공통 3rem 통일 */ .portfolio-more {margin:18px 0 0; text-align:center;} .portfolio-more .btn-portfolio-more {display:block; padding:13px 0; border:1px solid #dbdbdb; background:#fbfbfb; border-radius:5px; font-weight:700; color:#191919; font-size:14px; text-decoration:none;} .portfolio-more.hide {display:none;} .portfolio-more-loading {display:none; height:44px; line-height:44px; text-align:center; color:#999;} .portfolio-more-loading.loading {display:block;} /* ===== case 모바일 상단(검색+글작성) / 다중이미지 / 무한스크롤 ===== */ .portfolio-head {position:relative; margin:8px 0 15px; padding:16px 12px; background:#f6f6f6; border:1px solid #ddd; border-radius:6px; text-align:center;} .portfolio-head .lead {margin:0 0 10px; font-size:15px; font-weight:600; color:#222;} .portfolio-head .lead b {color:var(--point-text-color);} .portfolio-head .search-box {display:inline-flex; width:100%; max-width:100%; 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:9px 14px; font-size:14px; min-width:0;} .portfolio-head .search-box button {border:0; color:#000; width:35px; font-size:1.2rem; cursor:pointer;} /* 검색어 초기화(x) 버튼 — 흰 배경/회색 아이콘, 입력값 있을 때만 노출 */ .portfolio-head .search-box .search-clear {display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#b3b3b3; width:32px; font-size:13px;} .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 {margin-top:10px;} .portfolio-head .portfolio-write .button {width:100%;} .portfolio-item .thumb {position:relative;} .portfolio-item .sub-images {position:absolute; right:10px; bottom:10px; display:flex; gap:2px;} .portfolio-item .sub-images .sub {width:30px; height:30px; border:1.5px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden; background:#f5f5f5;} .portfolio-item .sub-images .sub img {width:100%; height:100%; object-fit:cover; margin:0;} .portfolio-sentinel {height:1px;} .portfolio-more-loading {display:none; height:40px; line-height:40px; text-align:center; color:#999;} .portfolio-more-loading.loading {display:block;} .portfolio-more {margin:12px 0 0; text-align:center;} .portfolio-more.hide {display:none;} /* ===== 더보기 fade-in / 해시태그 링크 / 카드 레이어 (모바일) ===== */ @keyframes portfolioFadeIn { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);} } .portfolio-item.portfolio-appear { animation: portfolioFadeIn .4s ease both; } .portfolio-item .hashtags .tag {cursor:pointer; text-decoration:none;} .portfolio-pinboard .portfolio-item {cursor:pointer;} .board-layer-modal {width:96vw; max-width:96vw;} /* 커스텀 X 아이콘 */ .board-layer-modal > .close { width: 24px; height: 24px; top: 20px !important; right: 25px !important; color: rgba(255, 255, 255, 1); background: url('/default/mobile/assets/css/../images/common_icon_big_close.png') no-repeat center center; } /* 로딩/로드완료를 같은 높이로 (높이 점프 방지) */ .ui.modal.board-layer-modal >.content {position:relative; z-index:0; padding:0; height:82vh; overflow:hidden; border-radius:.28571429rem;} .board-layer-modal .board-layer-body {min-height:0;} .board-layer-modal .board-layer-body #view-page, .board-layer-modal .board-layer-body #board-detail {padding:0;} .board-layer-loading {height:82vh; display:flex; align-items:center; justify-content:center; color:#999;} .board-layer-loading:after {content:'\2026'; font-size:22px; letter-spacing:3px;} /* ===== 카드 레이어 뷰(모바일 세로) + 상세 확장필드 ===== */ /* 레이어를 flex 컬럼으로: 헤더 고정 + 본문만 스크롤 */ .portfolio-layer {display:flex; flex-direction:column; height:82vh;} .portfolio-layer .layer-top {flex:0 0 auto; z-index:2; background:#fff; padding:20px 56px 20px 14px; border-bottom:1px solid #f0f1f3; border-radius:5px;} /* 우측 46px: 상단 X 닫기 버튼과 제목/버튼이 겹치지 않게 */ .portfolio-layer .layer-top h2 {margin:0; font-size:20px; font-weight:600; color:#111;} .portfolio-layer .layer-wrap {flex:1 1 auto; min-height:0; overflow-y:auto; display:block; padding:14px;} /* min-height:0 없으면 flex 자식이 안 줄어 스크롤 안 생김 */ .portfolio-layer .layer-images img {display:block; width:100%; height:auto; margin:0 0 8px; border:1px solid #eee;} .portfolio-layer .layer-body {font-size:0.875rem; line-height:1.7; color:#333; word-break:break-all;} .portfolio-layer .layer-body img {max-width:100%; height:auto;} .portfolio-layer .layer-hashtags {margin:14px 0 0; padding-top:12px; border-top:1px solid #eee;} .portfolio-layer .layer-hashtags .tag {display:inline-block; margin:0 7px 4px 0; color:var(--point-text-color); text-decoration:none; font-size: 0.8125rem;} .portfolio-layer .layer-products {width:auto; border-left:0; padding-left:0; border-top:1px solid #eee; margin-top:14px; padding-top:14px;} .portfolio-layer .layer-products h4 {margin:0 0 10px; font-size:0.9375rem; font-weight:600;} .portfolio-layer .layer-products .product {display:block; position:relative; padding:10px 0 10px 80px; min-height:80px; 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:10px; width:60px; height:60px; overflow:hidden; background:#f5f5f5;} .portfolio-layer .layer-products .pthumb img {width:100%; height:100%; object-fit:cover;} .portfolio-layer .layer-products .pname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; font-size: 0.875rem; line-height: 1.3; max-height: calc(1.3em * 2); } .portfolio-layer .layer-products .pcode {display:block; font-size:0.8125rem ; color:#999; margin-top:2px; font-style:normal;} #board-detail .detail-hashtags {margin:0 0 14px;} #board-detail .detail-hashtags .tag {display:inline-block; margin:0 7px 4px 0; color:var(--point-text-color); text-decoration:none; font-size:13px;} #board-detail .detail-products {margin:18px 0; padding:14px 0; border-top:1px solid #eee;} #board-detail .detail-products h4 {margin:0 0 12px; font-size:15px; font-weight:600;} #board-detail .detail-products .products-grid {display:grid; grid-template-columns:1fr 1fr; gap:10px;} #board-detail .detail-products .product {display:block; position:relative; padding:0 0 0 48px; min-height:40px; text-decoration:none; color:#333;} #board-detail .detail-products .pthumb {position:absolute; left:0; top:0; width:40px; height:40px; 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:12px; line-height:1.3;} #board-detail .detail-products .pcode {display:block; font-size:10px; color:#999; margin-top:2px;} /* 레이어 글수정/삭제 버튼(모바일) */ .portfolio-layer .layer-top {display:flex; align-items:normal; justify-content:space-between; gap:8px;} .portfolio-layer .layer-top h2 {flex:1; min-width:0; font-size:20px;} .portfolio-layer .layer-actions {flex-shrink:0;} .layer-actions a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; font-size: 18px; } .portfolio-layer .layer-actions .btn-layer-delete {color:#e0323c; border-color:#e9a9ad;} /* 초기 로딩/더보기 카드 페이드인 */ .portfolio-pinboard .portfolio-item { opacity: 0; } /* ===== Masonry(절대배치) 전환 — 모바일 2열, 스케일 등장 ===== */ .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: 48.5%; } .portfolio-pinboard .portfolio-gutter-sizer { width: 3%; } .portfolio-pinboard .portfolio-item { width: 48.5%; margin: 0 0 12px; padding: 0; display: block; float: none; opacity: 1; background: transparent; border: 0; box-shadow: none; break-inside: auto; /* 카드 스크롤 성능: 카드별 레이아웃 격리 */ contain: layout style; } .portfolio-inner { background: #fff; border: 1px solid #eee; box-sizing: border-box; opacity: 0; transform: scale(0.82); transform-origin: center 40%; transition: opacity .4s ease, transform .45s cubic-bezier(0.2, 0.75, 0.3, 1); } .portfolio-item.is-revealed .portfolio-inner { opacity: 1; transform: scale(1); } /* 대표 이미지 로딩 스켈레톤 */ .portfolio-item .thumb > img { opacity: 0; min-height: 130px; 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: 8px; 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; } @keyframes portfolioShimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } } @media only screen and (max-width: 767.98px) { .ui.modal.board-layer-modal >.content { padding: 0 !important; } }