/*커스텀 관련 안내사항*/
/*카드 본문 영역의 배경과 테두리 색상, 폰트 종류와 색상, 모서리 둥글기는 환경설정-디자인 설정에서 설정한 값을 따라갑니다.*/

:root{
    --card-max-height: 830px; /*카드 본문 영역 최대 높이*/
    --card-secret-height: 450px; /*멤버공개, 비밀글 카드 높이*/
    --card-title-size: 15px; /*제목 폰트 크기*/
    --card-content-size: 15px; /*본문, 닉네임, 아이디 폰트 크기*/
    --input-border-color: var(--container-border-color);
}

/*라공 에디션 디자인 설정 덮어쓰기*/
.write-field{margin-bottom: 10px;}
.full_input{font-size: 1em; padding: 10px 30px 10px 10px;}
.wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input{box-shadow: none;}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus{box-shadow: none;}
.btn_submit{padding: 10px;}
.btn_confirm {display: flex; gap: 8px; width: 100%;  margin-top: 0; padding: 0;}
a.btn_cancel, button.btn_cancel{padding: 10px;}



/*라공 에디션 기본 스타일 (상단 버튼, 카테고리)*/
.scrap-wrap {margin: 0 auto;}
#bo_btn_top {margin:var(--spacing-sm) 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_list_total {float:left;line-height:34px;font-size:0.92em;color:var(--primary-color);}
.btn_bo_user {float:right;margin:0;padding:0;list-style:none} 
.btn_bo_user li {
    float: left;
    width: 40px;
    text-align: center;
    margin-left: var(--spacing-xs);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: var(--btn-primary-radius);
}
.btn_bo_user li .btn {width: 100%;}
.btn_bo_user > li {position:relative}

#bo_cate {margin:var(--spacing-lg) 0;}
#bo_cate h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden;}
#bo_cate ul {zoom: 1;}
#bo_cate ul:after {display: block; visibility: hidden; clear: both; content: "";}
#bo_cate li {display: inline-block; padding: 2px;}
#bo_cate a {display: block;line-height: 28px; padding: var(--spacing-xs) var(--spacing-md); border-radius: 30px; border:1px solid var(--card-border-color); color:var(--primary-color);}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration: none; background: var(--primary-color); color: var(--white);}
#bo_cate #bo_cate_on {z-index: 2; background: var(--primary-color); color:var(--white); font-weight: bold; border: 1px solid var(--primary-color);}
.td_subject img {margin-left: var(--spacing-xs);}
.bo_cate_link {display: inline-block; margin-right: var(--spacing-xs); background: rgb(from var(--primary-color) r g b / 10%); color: var(--primary-color); font-weight: 500; padding: 3px 8px; border-radius: 4px; font-size: 0.8em; vertical-align: middle;}
.bo_cate_link:hover {text-decoration: none; background: var(--primary-color); color: var(--white);}

.bo_sch_wrap {
    display:none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    backdrop-filter: blur(12px);
}
.bo_sch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--container-bg-color);
    text-align: left;
    width: 300px;
    max-height: 300px;
    overflow-y: auto;
    border-radius: var(--card-border-radius);
    border: 1px solid var(--card-border-color);
}
.bo_sch:after {display:block;visibility:hidden;clear:both;content:""}
.bo_sch h3 {padding:var(--spacing-md);border-bottom:1px solid var(--border-light)}
.bo_sch legend {background:var(--accent-color)}
.bo_sch form {padding:var(--spacing-md);display:block}
.bo_sch select {border:0;width:100%;height:40px;border:1px solid var(--input-border-color);border-radius:var(--card-border-radius);}
.bo_sch .sch_bar {display:inline-block;width:100%;clear:both;margin-top:var(--spacing-md);border:1px solid var(--input-border-color);border-radius:var(--card-border-radius);}
.bo_sch .sch_input {width:250px;height:38px;border:0;padding:0;background-color:transparent;float:left}
.bo_sch .sch_btn {height: 38px; float: right;color:var(--text-muted);background:none;border:0;width:40px;font-size:var(--card-content-size);}
.bo_sch .bo_sch_cls {position:absolute;right:0;top:0;color:var(--text-muted);border:0;padding:var(--spacing-sm) var(--spacing-md);font-size:16px;background:var(--container-bg-color)}
.bo_sch_bg {background:rgba(0,0,0,0.3);width:100%;height:100%}
input#stx {padding: 0 8px; border: none !important; border-radius: var(--card-border-radius);}



/*게시판 목록
  관리자 '갤러리 이미지 수'를 실제 한 줄 카드 개수로 사용하기 위해
  masonry column 방식이 아니라 CSS Grid 방식으로 배치합니다. */
.scrap-grid {
    display: grid;
    grid-template-columns: repeat(var(--scrap-gallery-cols, 1), minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}
.scrap-empty {padding: 40px 16px; text-align: center;}



/*카드*/
.scrap-card {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    border-radius: var(--container-border-radius);
    border: 1px solid var(--container-border-color);
    background-color: var(--container-bg-color);
    backdrop-filter: blur(10px);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    vertical-align: top;
    overflow: auto;
}
.scrap-card__body {padding: 0 15px; max-height: var(--card-max-height); overflow: auto;}
.scrap-card__header,.scrap-card__footer {display: flex; align-items: center; justify-content: space-between;}
.scrap-card__header {padding: 0 14px; min-height: 46px; gap: 10px;}
.scrap-card__footer {height: 15px;}
.scrap-card__title {
    flex: 1;
    margin: 0;
    min-width: 0;
    color: var(--title-font-color);
    font-family: var(--title-font-family);
    font-size: var(--card-title-size);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scrap-card__title a {color: inherit; text-decoration: none;}
.scrap-author {display: flex; align-items: center; gap: 10px; margin-bottom: 14px;}
.scrap-author__avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(158, 158, 158, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.scrap-author__avatar img {width: 100%; height: 100%; object-fit: cover;}
.scrap-author__meta {min-width: 0;display: flex; flex-direction: column; line-height: 1.3;}
.scrap-author__meta strong {font-size: var(--card-content-size);}
.scrap-author__meta span,.scrap-author__date {font-size: 13px;}
.scrap-author__date {margin-left: auto; text-align: right;}
.scrap-content {font-size: var(--card-content-size); line-height: 1.7; word-break: break-word;}
.scrap-content p {margin: 0; padding: 0 5px; line-height: 1.6;}
.scrap-content .scrap-content-spacer {height: 10px;}
.scrap-content p:first-child {margin-top: 0;}
.scrap-content p:last-child {margin-bottom: 0;}
.scrap-secret-card {
    height: var(--card-secret-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.scrap-secret-card__title {
    font-size: 17px;
    font-weight: bold;
    line-height: 1.3;
}
.scrap-secret-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 var(--spacing-lg);
    border: 1px solid rgba(119, 119, 119, 0.5);
    border-radius: var(--container-border-radius);
    background: transparent;
    color: rgba(119, 119, 119, 0.5);
    text-decoration: none;
    font-size: 0.95em;
    transition: opacity .15s ease, transform .15s ease;
}
.scrap-secret-card__button:hover {opacity: .9; border-color: var(--accent-color);}



/*임베드*/
.scrap-media {
    overflow: hidden;
    border-radius: var(--card-border-radius);
    border: 1px solid transparent;
}
.scrap-media--image {width: 100%; overflow: hidden;}
.scrap-media--image img {display: block; width: 100%; height: auto; max-width: none;}
.scrap-media iframe {display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--card-border-radius);}
.scrap-media--tweet blockquote.twitter-tweet {margin: 0 !important; width: 100% !important; min-width: 0 !important;}
.scrap-media--video {position: relative; width: 100%; aspect-ratio: 16 / 9;}
.scrap-media--video iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0;}
.scrap-media--shorts {position: relative; width: 100%; aspect-ratio: 9 / 16;}
.scrap-link-card {
    display: block;
    margin: 10px 0;
    padding: 16px;
    border-radius: var(--card-border-radius);
    border: 1px solid color-mix(in srgb, var(--content-font-color) 20%, transparent);
    color: var(--content-font-color);
    background: color-mix(in srgb, var(--content-font-color) 5%, transparent);
    text-decoration: none;
}
.scrap-link-card:hover {
    border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}
.scrap-link-card__eyebrow {display: block; margin-bottom: 6px; font-size: 12px;}
.scrap-link-card__title {display: block; line-height: 1.5; word-break: break-all;}



/*수정삭제 메뉴*/
.scrap-card-menu {position: relative; flex-shrink: 0;}
.scrap-card-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--title-font-color);
}
.scrap-card-menu__toggle i {font-size: 14px;}
.scrap-card-menu__dropdown {
    position: absolute;
    display: none;
    padding: 6px;
    top: calc(100% + 6px);
    right: 0;
    min-width: 80px;
    border: 1px solid var(--container-border-color);
    border-radius: var(--card-border-radius);
    background-color: var(--container-bg-color);
    backdrop-filter: blur(10px);
    z-index: 50;
}
.scrap-card-menu__item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    color: var(--content-font-color);
}
.scrap-card-menu__item i {width: 14px; text-align: center;}
.scrap-card-menu.is-open .scrap-card-menu__dropdown {display: block;}
.scrap-card-menu__dropdown button.scrap-card-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: none;
    padding: 9px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--content-font-color);
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.scrap-card-menu__item:hover {background: rgba(0,0,0,0.05);}
.scrap-card-menu__dropdown button.scrap-card-menu__item:hover {background: rgba(0,0,0,0.05);}



/*작성, 수정*/
.scrap-write {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%;}
.bo_write_wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 9999;
    backdrop-filter: blur(12px);
}
.bo_write_bg {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
}
.bo_write_modal,.bo_write_modal * {box-sizing: border-box;}
.bo_write_modal {
    position: absolute;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 640px);
    max-height: 90vh;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--container-bg-color);
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
}
.bo_write_modal h3 {
    margin: 0;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}
.bo_write_cls {
    position: absolute;
    padding: var(--spacing-sm) var(--spacing-md);
    right: 0;
    top: 0;
    border: 0;
    color: var(--text-muted);
    background: var(--container-bg-color);
    font-size: 16px;
    cursor: pointer;
}
.bo_write_modal #bo_w {
    position: static;
    margin: 0;
    padding: var(--spacing-md);
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;  
}
.bo_write_modal form {width: 100%; max-width: 100%;}
.bo_write_modal .write-field {width: 100%; max-width: 100%; margin-bottom: 10px;}
.write-row,.login-row {display: flex; gap: 8px; align-items: flex-end; width: 100%; max-width: 100%;}
.bo_write_modal .write-col {flex: 1 1 auto; min-width: 0;}
.bo_write_modal .write-col--sm {flex: 0 0 160px;}
.bo_write_modal .frm_input,
.bo_write_modal .frm_textbox,
.bo_write_modal select,
.bo_write_modal textarea,
.bo_write_modal input[type="text"],
.bo_write_modal input[type="password"] {width: 100%; max-width: 100%; display: block; box-sizing: border-box;}
.bo_write_modal .frm_textbox,.bo_write_modal textarea {resize: vertical; min-height: 160px;}
.bo_write_modal select {padding-right: 30px;}
.bo_write_modal .btn_confirm {justify-content: flex-end;}



/*로딩 화면*/
.scrap-page-loader {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    inset: 0;
    backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity .18s ease;
}
.scrap-page-loader.is-active {display: flex; opacity: 1;}
.scrap-page-loader__spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid var(--secondary-color);
    border-top-color: var(--accent-color);
    animation: scrapSpin .8s linear infinite;
}
@keyframes scrapSpin {to { transform: rotate(360deg); }}



/*모바일*/
@media (max-width: 1200px) {
    
    .scrap-grid {column-count: 2;}
}
@media (max-width: 768px) {
}
@media (max-width: 700px) {
    .scrap-grid {column-count: 1;}
}
@media (max-width: 640px) {
    .bo_write_modal {width: 94vw; max-height: 90vh;}
    .bo_write_modal .write-row {flex-direction: column; align-items: stretch;}
    .bo_write_modal .write-col--sm,
    .bo_write_modal .write-col--inline {flex: 1 1 auto;}
}



/*본문 (안 쓰지만 혹시 몰라서 남겨두었어요~)*/
.scrap-view {margin: 0 auto;}
.scrap-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    backdrop-filter: blur(10px);
    background-color: var(--container-bg-color);
    overflow: auto;
}
.scrap-view__header {padding: 20px 20px 0;}
.scrap-view__header h1 {
    margin: 0 0 16px;
    color: var(--accent-color);
    font-size: 28px;
    line-height: 1.35;
}
.scrap-view__body{
    padding: 0 15px;
    height: calc(var(--card-max-height) - 200px);
    overflow: auto;
}
.scrap-view__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
}


/* ========================================================================== 
   HOME DESIGN INTEGRATION
   - 색상/폰트/모서리/버튼/폼은 홈 디자인 설정의 CSS 변수에 자동 연동됩니다.
   - 게시판 고유 기능과 masonry 카드 구조는 유지합니다.
   ========================================================================== */

.scrap-wrap,
.scrap-grid,
.scrap-write,
.scrap-view {
    box-sizing: border-box;
    width: 100%;
    color: var(--content-font-color);
    font-family: var(--content-font-family);
}

.scrap-wrap,
.scrap-grid {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(14px, 2vw, 24px);
    padding-right: clamp(14px, 2vw, 24px);
}

/* 게시판 관리자 설정의 bo_table_width가 실제 목록 폭을 결정합니다.
   내부 scrap-wrap/grid의 과거 1400px 상한은 shell 안에서는 해제합니다. */
.scrap-board-shell {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.scrap-board-shell > .scrap-wrap,
.scrap-board-shell > .scrap-grid {
    max-width: none;
}
.scrap-board-shell > .scrap-empty {
    max-width: none;
}

/* 상단 정보 / 액션 */
#bo_btn_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    min-height: 42px;
    margin: var(--spacing-sm) 0 var(--spacing-md);
}
#bo_list_total {
    float: none;
    line-height: 1.45;
    color: color-mix(in srgb, var(--content-font-color) 66%, transparent);
    font-size: .88em;
}
#bo_list_total span {color: var(--content-font-color); font-weight: 600;}
#bo_btn_top .btn_bo_user {
    float: none;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}
#bo_btn_top .btn_bo_user li {
    float: none;
    width: 38px;
    height: 38px;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--btn-primary-bg) 70%, var(--card-border-color));
    border-radius: var(--btn-primary-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
#bo_btn_top .btn_bo_user li:hover {
    transform: translateY(-1px);
    filter: brightness(.96);
    box-shadow: var(--shadow-md, 0 4px 10px rgba(0,0,0,.08));
}
#bo_btn_top .btn_bo_user li .btn,
#bo_btn_top .btn_bo_user li button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

/* 카테고리 */
#bo_cate {margin: 0 0 var(--spacing-md);}
#bo_cate ul {display: flex; flex-wrap: wrap; gap: 6px;}
#bo_cate li {padding: 0;}
#bo_cate a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 0 13px;
    border: 1px solid var(--card-border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg-color) 92%, transparent);
    color: var(--content-font-color);
    font-size: .9em;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
#bo_cate a:hover,
#bo_cate a:focus,
#bo_cate a:active,
#bo_cate #bo_cate_on {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
}
#bo_cate a:hover {transform: translateY(-1px);}

/* masonry 목록 */
.scrap-grid {
    column-count: 3;
    column-gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}
.scrap-card {
    margin: 0 0 var(--spacing-md);
    overflow: visible;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    color: var(--content-font-color);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
    backdrop-filter: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.scrap-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--card-border-color));
    box-shadow: var(--shadow-md, 0 5px 15px rgba(0,0,0,.08));
    transform: translateY(-1px);
}
.scrap-card.is-notice {
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--card-border-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 10%, transparent), var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}
.scrap-card__header {
    min-height: 48px;
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--card-border-color) 72%, transparent);
    background: color-mix(in srgb, var(--container-bg-color) 35%, transparent);
    border-radius: calc(var(--card-border-radius) - 1px) calc(var(--card-border-radius) - 1px) 0 0;
}
.scrap-card__title {
    color: var(--title-font-color);
    font-family: var(--title-font-family);
    font-size: max(var(--card-title-size), calc(var(--title-font-size) * .78));
    font-weight: 650;
}
.scrap-card__title > i {
    margin-right: 5px;
    color: var(--primary-color);
    font-size: .86em;
}
.scrap-card.is-notice .scrap-card__title > i {color: var(--accent-color);}
.scrap-card__body {
    padding: 14px 15px 16px;
    max-height: var(--card-max-height);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--content-font-color) 24%, transparent) transparent;
}
.scrap-card__body::-webkit-scrollbar {width: 6px;}
.scrap-card__body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--content-font-color) 22%, transparent);
}
.scrap-card__footer {
    height: auto;
    min-height: 14px;
    padding: 0 15px 12px;
    justify-content: flex-end;
}
.scrap-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 600;
}

/* 작성자 */
.scrap-author {
    gap: 10px;
    margin-bottom: 14px;
    color: var(--content-font-color);
}
.scrap-author__avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border: 1px solid var(--card-border-color);
    background: color-mix(in srgb, var(--container-bg-color) 72%, transparent);
    color: color-mix(in srgb, var(--content-font-color) 48%, transparent);
}
.scrap-author__avatar .member-icon {max-width: 100%; max-height: 100%;}
.scrap-author__meta strong {
    overflow: hidden;
    max-width: 100%;
    color: var(--content-font-color);
    font-size: var(--card-content-size);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scrap-author__meta span,
.scrap-author__date {
    color: color-mix(in srgb, var(--content-font-color) 55%, transparent);
    font-size: 12px;
}

/* 본문 */
.scrap-content {
    color: var(--content-font-color);
    font-family: var(--content-font-family);
    font-size: var(--card-content-size);
    line-height: 1.72;
}
.scrap-content p {padding: 0; line-height: 1.72;}
.scrap-content a {color: var(--accent-color);}
.scrap-content a:hover {color: var(--primary-color);}
.scrap-content-spacer {height: 12px;}

/* 잠금 카드 */
.scrap-secret-card {
    min-height: min(var(--card-secret-height), 360px);
    height: auto;
    padding: 38px 20px;
    border-radius: calc(var(--card-border-radius) - 4px);
    background: color-mix(in srgb, var(--container-bg-color) 45%, transparent);
}
.scrap-secret-card__title {color: var(--title-font-color); font-family: var(--title-font-family); font-size: 15px;}
.scrap-secret-card__button {
    min-height: 34px;
    border-color: var(--card-border-color);
    border-radius: var(--btn-secondary-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}
.scrap-secret-card__button:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    opacity: 1;
}

/* 임베드 / 링크 */
.scrap-media,
.scrap-media iframe,
.scrap-media img {border-radius: calc(var(--card-border-radius) - 4px);}
.scrap-media {border-color: var(--card-border-color); background: var(--container-bg-color);}
.scrap-link-card {
    border-color: var(--card-border-color);
    border-radius: calc(var(--card-border-radius) - 4px);
    background: color-mix(in srgb, var(--container-bg-color) 50%, transparent);
    color: var(--content-font-color);
}
.scrap-link-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--card-border-color));
    background: color-mix(in srgb, var(--primary-color) 7%, var(--card-bg-color));
    color: var(--primary-color);
}
.scrap-link-card__eyebrow {color: color-mix(in srgb, var(--content-font-color) 58%, transparent);}

/* 카드 수정/삭제 메뉴 */
.scrap-card-menu__toggle {
    border: 1px solid transparent;
    color: color-mix(in srgb, var(--title-font-color) 68%, transparent);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.scrap-card-menu__toggle:hover,
.scrap-card-menu.is-open .scrap-card-menu__toggle {
    border-color: var(--card-border-color);
    background: var(--card-bg-color);
    color: var(--primary-color);
}
.scrap-card-menu__dropdown {
    padding: 5px;
    border-color: var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,.12));
    backdrop-filter: blur(12px);
}
.scrap-card-menu__item,
.scrap-card-menu__dropdown button.scrap-card-menu__item {
    border-radius: max(6px, calc(var(--card-border-radius) - 5px));
    color: var(--content-font-color);
}
.scrap-card-menu__item:hover,
.scrap-card-menu__dropdown button.scrap-card-menu__item:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-color);
}

/* 검색 모달 */
.bo_sch_wrap {
    background: color-mix(in srgb, var(--bg-color) 12%, transparent);
    backdrop-filter: blur(10px);
}
.bo_sch {
    width: min(92vw, 360px);
    max-height: min(70vh, 380px);
    overflow: visible;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    color: var(--content-font-color);
    box-shadow: var(--shadow-lg, 0 16px 38px rgba(0,0,0,.13));
}
.bo_sch h3 {
    margin: 0;
    padding: 15px 17px;
    border-bottom: 1px solid var(--card-border-color);
    color: var(--title-font-color);
    font-family: var(--title-font-family);
    font-size: var(--title-font-size);
}
.bo_sch form {padding: 16px 17px 18px;}
.bo_sch select,
.bo_sch .sch_bar,
.bo_sch .sch_input {
    color: var(--form-text-color);
    font-family: var(--content-font-family);
}
.bo_sch select,
.bo_sch .sch_bar {
    border-color: var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
}
.bo_sch select {height: 42px; padding: 0 11px;}
.bo_sch .sch_bar {display: flex; overflow: hidden; height: 42px;}
.bo_sch .sch_input {float: none; flex: 1; width: auto; height: 40px; padding: 0 11px; background: transparent;}
.bo_sch .sch_btn {float: none; flex: 0 0 40px; height: 40px; color: var(--primary-color);}
.bo_sch .bo_sch_cls {
    right: 6px;
    top: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--content-font-color) 58%, transparent);
}
.bo_sch .bo_sch_cls:hover {background: color-mix(in srgb, var(--content-font-color) 7%, transparent); color: var(--content-font-color);}
.bo_sch_bg {background: rgba(0,0,0,.24);}

/* 작성 / 수정 */
.scrap-write {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(94%, 680px);
    margin: clamp(24px, 5vh, 56px) auto;
    padding: 20px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    box-shadow: var(--shadow-md, 0 8px 22px rgba(0,0,0,.08));
}
.scrap-write form {width: 100%;}
.scrap-write .write-field > label,
.bo_write_modal .write-field > label {
    display: block;
    margin: 0 0 6px;
    color: color-mix(in srgb, var(--content-font-color) 74%, transparent);
    font-size: 12px;
    font-weight: 600;
}
.scrap-write .frm_input,
.scrap-write .frm_textbox,
.scrap-write textarea,
.scrap-write select,
.bo_write_modal .frm_input,
.bo_write_modal .frm_textbox,
.bo_write_modal textarea,
.bo_write_modal select {
    min-height: 42px;
    border: 1px solid var(--form-border-color) !important;
    border-radius: var(--form-border-radius) !important;
    outline: none;
    background: var(--form-bg-color) !important;
    color: var(--form-text-color) !important;
    font-family: var(--content-font-family);
    font-size: 1em;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.scrap-write .frm_input,
.scrap-write select,
.bo_write_modal .frm_input,
.bo_write_modal select {padding: 9px 11px;}
.scrap-write textarea,
.bo_write_modal textarea {padding: 11px 12px !important; line-height: 1.65; resize: vertical;}
.scrap-write .frm_input:focus,
.scrap-write textarea:focus,
.scrap-write select:focus,
.bo_write_modal .frm_input:focus,
.bo_write_modal textarea:focus,
.bo_write_modal select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent) !important;
}
.write-field--notice label {display: inline-flex !important; align-items: center; gap: 7px; cursor: pointer;}
.write-field--notice input[type="checkbox"] {accent-color: var(--primary-color);}

.bo_write_wrap {
    background: color-mix(in srgb, var(--bg-color) 10%, transparent);
    backdrop-filter: blur(10px);
}
.bo_write_modal {
    width: min(94vw, 660px);
    max-height: min(90vh, 760px);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    color: var(--content-font-color);
    box-shadow: var(--shadow-lg, 0 16px 38px rgba(0,0,0,.13));
}
.bo_write_modal h3 {
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid var(--card-border-color);
    color: var(--title-font-color);
    font-family: var(--title-font-family);
    font-size: var(--title-font-size);
}
.bo_write_modal > .bo_write_cls {
    position: absolute;
    right: 7px;
    top: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--content-font-color) 60%, transparent);
}
.bo_write_modal > .bo_write_cls:hover {background: color-mix(in srgb, var(--content-font-color) 7%, transparent); color: var(--content-font-color);}
.bo_write_modal #bo_w {
    width: 100%;
    margin: 0;
    padding: 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.bo_write_modal .btn_confirm,
.scrap-write .btn_confirm {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
.bo_write_modal .btn_confirm .bo_write_cls,
.scrap-write .btn_confirm .btn_cancel,
.bo_write_modal .btn_confirm .btn_cancel {
    position: static;
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--btn-secondary-bg) 70%, var(--card-border-color));
    border-radius: var(--btn-secondary-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-family: var(--content-font-family);
    cursor: pointer;
}
.bo_write_modal .btn_confirm .btn_submit,
.scrap-write .btn_confirm .btn_submit {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--btn-primary-bg);
    border-radius: var(--btn-primary-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: var(--content-font-family);
    cursor: pointer;
}
.bo_write_modal .btn_confirm .bo_write_cls:hover,
.scrap-write .btn_confirm .btn_cancel:hover {filter: brightness(.97);}
.bo_write_modal .btn_confirm .btn_submit:hover,
.scrap-write .btn_confirm .btn_submit:hover {filter: brightness(.92);}

/* 비어있음 / 페이지 로더 */
.scrap-empty {
    max-width: 1400px;
    margin: 16px auto;
    padding: 38px 18px;
    border: 1px dashed var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: color-mix(in srgb, var(--card-bg-color) 80%, transparent);
    color: color-mix(in srgb, var(--content-font-color) 55%, transparent);
    font-family: var(--content-font-family);
}
.scrap-page-loader {background: color-mix(in srgb, var(--bg-color) 28%, transparent); backdrop-filter: blur(8px);}
.scrap-page-loader__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-top-color: var(--primary-color);
}

/* 단독 미리보기 화면 */
.scrap-view {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(94%, 760px);
    margin: clamp(24px, 5vh, 56px) auto;
    overflow: hidden;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    color: var(--content-font-color);
    box-shadow: var(--shadow-md, 0 8px 22px rgba(0,0,0,.08));
    backdrop-filter: none;
}
.scrap-view__header {padding: 22px 22px 0;}
.scrap-view__header h1 {
    margin: 0 0 18px;
    color: var(--title-font-color);
    font-family: var(--title-font-family);
    font-size: clamp(20px, 2.2vw, 28px);
}
.scrap-view__body {
    height: auto;
    max-height: min(65vh, 720px);
    padding: 0 22px 22px;
    overflow: auto;
}
.scrap-view__footer {
    justify-content: flex-end;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--card-border-color);
}
.scrap-view__footer .btn_bo_user {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.scrap-view__footer .btn_bo_user a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    border-radius: var(--btn-secondary-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    text-decoration: none;
}
.scrap-view__footer .btn_bo_user .btn_b02 {
    border-radius: var(--btn-primary-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

/* 반응형 */
@media (max-width: 1100px) {
    .scrap-grid {column-count: 2;}
}
@media (max-width: 700px) {
    .scrap-wrap,
    .scrap-grid {padding-left: 12px; padding-right: 12px;}
    .scrap-grid {column-count: 1; column-gap: 0;}
    #bo_btn_top {align-items: flex-start;}
    #bo_btn_top .btn_bo_user {gap: 5px;}
    #bo_btn_top .btn_bo_user li {width: 36px; height: 36px;}
    #bo_cate {overflow-x: auto; scrollbar-width: none;}
    #bo_cate::-webkit-scrollbar {display: none;}
    #bo_cate ul {flex-wrap: nowrap; width: max-content; max-width: none;}
    .write-row,
    .login-row {flex-direction: column; align-items: stretch;}
    .bo_write_modal .write-col--sm {flex: 1 1 auto; width: 100%;}
    .scrap-write {width: calc(100% - 24px); margin: 18px auto; padding: 16px;}
    .scrap-view {width: calc(100% - 24px); margin: 18px auto;}
}



/* comment: 기본은 완전히 접힌 상태, 아이콘 버튼을 눌렀을 때만 카드 아래에 표시 */
.scrap-card__footer--comments {
    height: auto;
    min-height: 38px;
    padding: 0 14px 10px;
    justify-content: flex-start;
}
.scrap-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--content-font-color) 16%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--content-font-color) 4%, transparent);
    color: var(--content-font-color);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.scrap-comment-toggle:hover,
.scrap-comment-toggle.is-open {
    border-color: color-mix(in srgb, var(--accent-color) 34%, transparent);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    color: var(--accent-color);
}
.scrap-comment-toggle strong {font-size: 11px; font-weight: 600;}
.scrap-comment-toggle__chevron {font-size: 9px; transition: transform .18s ease;}
.scrap-comment-toggle.is-open .scrap-comment-toggle__chevron {transform: rotate(180deg);}

.scrap-comments[hidden] {display: none !important;}
.scrap-comments {
    margin: 0 14px 14px;
    border-top: 1px solid color-mix(in srgb, var(--content-font-color) 12%, transparent);
    color: var(--content-font-color);
}
.scrap-comments__inner {padding-top: 11px;}
.scrap-comments__list {
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.scrap-comment {
    padding: 9px 2px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--content-font-color) 9%, transparent);
}
.scrap-comment:first-child {padding-top: 2px;}
.scrap-comment__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
    font-size: 11px;
    line-height: 1.3;
}
.scrap-comment__meta strong {font-weight: 600; color: var(--title-font-color);}
.scrap-comment__meta time {flex-shrink: 0; opacity: .5; font-size: 10px;}
.scrap-comment__content {font-size: 12px; line-height: 1.55; word-break: break-word;}
.scrap-comment__secret {opacity: .6;}
.scrap-comments__empty,
.scrap-comments__permission {
    margin: 0;
    padding: 8px 2px 12px;
    font-size: 11px;
    opacity: .55;
}
.scrap-comment-form {padding-top: 10px;}
.scrap-comment-form__guest {display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px;}
.scrap-comment-form__guest .frm_input {
    width: 100%;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--card-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
    font-size: 11px;
}
.scrap-comment-form__row {display: flex; align-items: stretch; gap: 6px;}
.scrap-comment-form textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 58px;
    max-height: 130px;
    padding: 9px 10px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--card-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
    font-family: var(--content-font-family);
    font-size: 12px;
    line-height: 1.45;
    resize: vertical;
    outline: none;
}
.scrap-comment-form textarea:focus {
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--form-border-color));
}
.scrap-comment-submit {
    flex: 0 0 auto;
    align-self: stretch;
    min-width: 48px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--card-border-radius);
    background: var(--accent-color);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}
.scrap-comment-submit:hover {filter: brightness(.96);}

@media (max-width: 640px) {
    .scrap-comments__list {max-height: 210px;}
    .scrap-comment-form__guest {grid-template-columns: 1fr;}
}

/* 2026-09-20: 목록 상단 도구를 우측 고정 + 관리자 게시판 설정 바로가기 */
#bo_btn_top {
    width: 100%;
}
#bo_btn_top #bo_list_total {
    flex: 0 1 auto;
    margin-right: auto;
}
#bo_btn_top .btn_bo_user {
    flex: 0 0 auto;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end;
}
#bo_btn_top .btn_bo_user .btn_board_config {
    color: inherit;
}
#bo_btn_top .btn_bo_user .btn_board_config_item {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--card-border-color));
    background: color-mix(in srgb, var(--primary-color) 13%, var(--card-bg-color));
    color: var(--primary-color);
}
#bo_btn_top .btn_bo_user .btn_board_config_item:hover {
    filter: none;
    background: color-mix(in srgb, var(--primary-color) 20%, var(--card-bg-color));
}
@media (max-width: 560px) {
    #bo_btn_top {
        display: flex;
        flex-wrap: wrap;
    }
    #bo_btn_top #bo_list_total {
        min-width: 0;
    }
    #bo_btn_top .btn_bo_user {
        margin-left: auto !important;
    }
}

/* performance: YouTube 플레이어는 클릭 시에만 생성 */
.scrap-youtube-placeholder {background: color-mix(in srgb, var(--content-font-color) 7%, var(--container-bg-color));}
.scrap-youtube-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}
.scrap-youtube-play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease, filter .2s ease;
}
.scrap-youtube-play:hover img {transform: scale(1.015); filter: brightness(.88);}
.scrap-youtube-play__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(0,0,0,.68);
    color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    pointer-events: none;
}
.scrap-youtube-play__icon i {font-size: 16px; margin-left: 2px;}
.scrap-media--shorts .scrap-youtube-play img {object-fit: cover;}
.scrap-comments__loading {
    margin: 0;
    padding: 18px 0;
    text-align: center;
    font-size: 12px;
    opacity: .55;
}


/* 2026-09-20: 홈 공통 RA0 이모티콘 연동 */
.scrap-emoticon-field {
    position: relative;
}
.scrap-emoticon-field textarea {
    padding-right: 46px !important;
}
.scrap-emoticon-btn {
    flex: 0 0 auto;
    width: 38px;
    min-width: 38px;
    height: 38px;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--form-border-color);
    border-radius: var(--card-border-radius);
    background: var(--form-bg-color);
    color: color-mix(in srgb, var(--content-font-color) 66%, transparent);
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.scrap-emoticon-btn:hover,
.scrap-emoticon-btn:focus-visible {
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--form-border-color));
    color: var(--accent-color);
    outline: none;
}
.scrap-emoticon-btn--inside {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--form-bg-color) 92%, transparent);
}
.scrap-content .ra0-emoticon {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 72px;
    max-height: 72px;
    vertical-align: middle;
    margin: 1px 2px;
    border: 0;
    border-radius: 0;
}
.scrap-comment__content .ra0-emoticon {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 52px;
    max-height: 52px;
    vertical-align: middle;
    margin: 1px 2px;
    border: 0;
    border-radius: 0;
}


/* 공지: 일반 masonry 카드 대신 폭 전체를 쓰는 컴팩트 접이식 바 */
.scrap-notice {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 8px;
    break-inside: avoid;
    border: 1px solid color-mix(in srgb, var(--accent-color) 28%, var(--card-border-color));
    border-radius: var(--card-border-radius);
    background: color-mix(in srgb, var(--card-bg-color) 97%, var(--accent-color) 3%);
    color: var(--content-font-color);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05));
    overflow: visible;
}
.scrap-notice__head {
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.scrap-notice__toggle {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 44px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.scrap-notice__toggle:hover,
.scrap-notice__toggle:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
    outline: none;
}
.scrap-notice__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    color: var(--accent-color);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .04em;
}
.scrap-notice__badge i {
    font-size: 11px;
}
.scrap-notice__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--title-font-color);
    font-family: var(--title-font-family);
    font-size: max(13px, calc(var(--card-title-size) * .9));
    font-weight: 650;
}
.scrap-notice__chevron {
    font-size: 9px;
    color: color-mix(in srgb, var(--content-font-color) 52%, transparent);
    transition: transform .18s ease;
}
.scrap-notice__toggle.is-open .scrap-notice__chevron {
    transform: rotate(180deg);
}
.scrap-notice__menu {
    flex: 0 0 auto;
    margin-right: 7px;
}
.scrap-notice__menu .scrap-card-menu__toggle {
    width: 30px;
    height: 30px;
    min-width: 30px;
}
.scrap-notice__panel[hidden] {
    display: none !important;
}
.scrap-notice__panel {
    padding: 12px 14px 14px;
    border-top: 1px solid color-mix(in srgb, var(--card-border-color) 70%, transparent);
}
.scrap-notice__content {
    font-size: .94em;
}
.scrap-notice__content > :first-child {
    margin-top: 0;
}
.scrap-notice__content > :last-child {
    margin-bottom: 0;
}
.scrap-notice__empty {
    margin: 0;
    color: color-mix(in srgb, var(--content-font-color) 55%, transparent);
    font-size: .9em;
}
@media (max-width: 700px) {
    .scrap-notice {
        margin-bottom: 7px;
    }
    .scrap-notice__toggle {
        gap: 8px;
        min-height: 42px;
        padding: 6px 9px;
    }
    .scrap-notice__badge span {
        display: none;
    }
    .scrap-notice__panel {
        padding: 11px 12px 13px;
    }
}


/* 관리자 > 게시판 설정 > 갤러리 이미지 수(bo_gallery_cols)
   = 실제 한 줄에 표시할 카드 수 */
.scrap-board-shell .scrap-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--scrap-gallery-cols, 1), minmax(0, 1fr)) !important;
    column-count: initial !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
}

/* 태블릿에서는 관리자 설정값을 최대 2열까지만 유지 */
@media (max-width: 1100px) {
    .scrap-board-shell .scrap-grid {
        grid-template-columns: repeat(var(--scrap-gallery-cols-tablet, 2), minmax(0, 1fr)) !important;
    }
}

/* 모바일에서는 1열 */
@media (max-width: 700px) {
    .scrap-board-shell .scrap-grid {
        grid-template-columns: repeat(var(--scrap-gallery-cols-mobile, 1), minmax(0, 1fr)) !important;
    }
}


/* comment 삭제 버튼 */
.scrap-comment__actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
.scrap-comment__delete {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--content-font-color) 45%, transparent);
    font-size: 10px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.scrap-comment__delete:hover,
.scrap-comment__delete:focus-visible {
    color: #d9534f;
    background: color-mix(in srgb, #d9534f 10%, transparent);
    outline: none;
}
.scrap-comment__delete:disabled {
    opacity: .35;
    cursor: wait;
}


/* Grid 카드 폭 안정화 */
.scrap-grid > .scrap-card,
.scrap-grid > .scrap-notice {
    min-width: 0;
    box-sizing: border-box;
}
.scrap-card__body,
.scrap-media,
.scrap-media iframe,
.scrap-media img {
    max-width: 100%;
    box-sizing: border-box;
}