/* 카드의 배경, 테두리, 글꼴, 모서리 둥글기는 사이트 디자인 설정을 따른다.
   --card-max-height, --card-secret-height, --card-grid-height, --card-title-size, --card-content-size는
   게시판 관리 설정값이라 list.skin.php/view.skin.php가 인라인 <style>로 넣는다. 여기서 고정값으로 선언하지 않는다. */

:root{
    --input-border-color: var(--container-border-color);
}

/* 페이지 전환: 페이지를 넘기거나 카테고리를 옮길 때 화면이 깜빡이지 않고 부드럽게 바뀐다.
   View Transitions를 지원하는 브라우저(크롬, 엣지, 사파리 등)에서만 동작하고, 그 외 브라우저는 이전처럼 바로 넘어간다. */
@view-transition {navigation: auto;}
::view-transition-old(root),
::view-transition-new(root) {animation-duration: .3s; animation-timing-function: ease;}
@media (prefers-reduced-motion: reduce) {
    @view-transition {navigation: none;}
}

/* 사이트 공통 스타일 덮어쓰기 */
/* 검색어 강조(.sch_word)는 테마 전역 스타일이므로 이 스킨에서는 무효화한다 */
.sch_word {display: inline; background: none; color: inherit; font-weight: normal; margin: 0; padding: 0; border: 0;}
#container_wr {padding: 0 20px;}
.write-field{margin-bottom: 10px;}
.full_input{font-size: 1em; padding: 10px 30px 10px 10px;}
.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;}



/* 상단 영역 (Total, 카테고리, 버튼) */
.scrap-wrap {margin: 0 auto;}
/* 카테고리가 있으면(.has-cate) 윗줄에 Total, 아랫줄에 카테고리와 버튼을 둔다. 없으면 한 줄에 Total과 버튼을 둔다.
   좁은 화면(700px 이하)은 아래 @media 참고 */
#bo_btn_top {margin:var(--spacing-sm) 0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px;}
/* 카테고리가 여러 줄이어도 Total과 버튼은 첫 줄(34px)에 붙도록 위쪽 정렬한다 */
#bo_list_total {flex:0 0 auto;line-height:34px;font-size:0.92em;color:var(--primary-color);}
#bo_btn_top.has-cate #bo_list_total {flex:1 0 100%;}
/* 상단 버튼(관리자, 게시판 관리, RSS, 별점, 검색, 작성): 34px 아이콘 버튼. 작성 버튼만 포인트 색으로 강조한다.
   사이트 공통 .btn 스타일은 여기서 덮어쓴다. */
.btn_bo_user {display:flex; align-items:center; gap:6px; flex:0 0 auto; margin:0 0 0 auto; padding:0; list-style:none}
.btn_bo_user > li {position:relative; width:34px; height:34px; margin:0; padding:0; background:none; border-radius:10px;}
.btn_bo_user li .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--card-border-color);
    border-radius: 10px;
    background: rgb(from var(--card-bg-color) r g b / 50%);
    color: var(--content-font-color);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    opacity: .9;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.btn_bo_user li .btn i {font-size: 14px; line-height: 1;}
.btn_bo_user li .btn:hover,
.btn_bo_user li .btn:focus-visible {opacity: 1; color: var(--content-font-color); border-color: var(--accent-color); background: var(--dd-hover-bg);}
.btn_bo_user li .btn:focus-visible {outline: 2px solid var(--accent-color); outline-offset: 2px;}
.btn_bo_user li .btn_bo_write {opacity: 1; color: var(--accent-color); border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, transparent);}
.btn_bo_user li .btn_bo_write:hover,
.btn_bo_user li .btn_bo_write:focus-visible {color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 26%, transparent);}

/* 페이지 버튼: 상단 버튼과 같은 모양이다. 현재 페이지는 작성 버튼처럼 포인트 색으로 표시한다.
   이전/다음 화살표 아이콘은 사이트 공통 스타일의 것을 그대로 쓴다. */
.pg_wrap .pg {gap: 6px;}
.pg_wrap .pg_page,
.pg_wrap .pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 34px;
    height: 34px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--card-border-color);
    border-radius: 10px;
    background: rgb(from var(--card-bg-color) r g b / 50%);
    color: var(--content-font-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    opacity: .9;
    transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.pg_wrap .pg_page:hover,
.pg_wrap .pg_page:focus-visible {opacity: 1; color: var(--content-font-color); border-color: var(--accent-color); background: var(--dd-hover-bg);}
.pg_wrap .pg_page:hover:not(:active) {transform: none;}
.pg_wrap .pg_page:focus-visible {outline: 2px solid var(--accent-color); outline-offset: 2px;}
.pg_wrap .pg_current {opacity: 1; color: var(--accent-color); border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, transparent); font-weight: 700;}

/* 카테고리 탭: 드롭다운 버튼과 같은 모양. 현재 분류는 포인트 색으로 표시한다. */
#bo_cate {flex:1 1 260px; min-width:0; margin:0;}
#bo_cate h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden;}
#bo_cate ul {display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;}
#bo_cate ul:after {display: none;}
#bo_cate li {display: block; margin: 0; padding: 0;}
#bo_cate a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--card-border-color);
    border-radius: 10px;
    background: rgb(from var(--card-bg-color) r g b / 50%);
    color: var(--content-font-color);
    /* 글꼴은 카드 제목과 같다 */
    font-family: var(--title-font-family);
    font-size: var(--card-title-size);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    opacity: .9;
    transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration: none; opacity: 1; border-color: var(--accent-color); background: var(--dd-hover-bg);}
#bo_cate a:focus-visible {outline: 2px solid var(--accent-color); outline-offset: 2px;}
#bo_cate #bo_cate_on {
    opacity: 1;
    font-weight: 700;
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}
/* 검색창 */
.bo_sch_wrap {
    display:none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    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:0;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);}



/* 카드 목록: 위치는 scrap-masonry.js가 계산한다 */
.scrap-grid {
    position: relative;
}
.scrap-empty {padding: 40px 16px; text-align: center;}



/*카드*/
.scrap-card {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0 0 10px;
    border-radius: var(--container-border-radius);
    border: 1px solid var(--container-border-color);
    background-color: var(--container-bg-color);
    backdrop-filter: blur(10px);
    /* overflow를 걸면 수정/삭제 메뉴가 카드 밖으로 나가는 부분이 잘리므로 걸지 않는다(본문 스크롤은 .scrap-card__body) */
    z-index: 1;
}
/* 카드마다 backdrop-filter가 쌓임 맥락을 만들므로, 메뉴가 열린 카드를 위로 올려 다른 카드에 가려지지 않게 한다 */
.scrap-card--menu-open {z-index: 100;}
/* 프로필은 고정하고 본문만 스크롤한다. 최대 높이는 프로필을 포함한 .scrap-card__main에 걸어, 프로필 아래 남은 높이만큼 본문이 스크롤된다. */
.scrap-card__main {display: flex; flex-direction: column; min-height: 0; max-height: var(--card-max-height);}
.scrap-card__main > .scrap-author {flex: 0 0 auto; padding: 0 15px;}
.scrap-card__body {flex: 1 1 auto; min-height: 0; padding: 0 15px; overflow: auto;}
/* 스크롤이 생긴 본문은 아래쪽(위로 스크롤했다면 위쪽도)을 mask로 흐리게 한다.
   scrap-embed.js가 is-scrollable / is-at-start / is-at-end 클래스를 붙인다. 끝 가장자리는 완전히 투명하고
   흐림 곡선은 smoothstep이다. 맨 위나 맨 아래에서는 그쪽 흐림이 사라진다.
   길이: --scrap-fade(아래쪽), --scrap-fade-top(위쪽) */
@property --scrap-fade {syntax: '<length>'; inherits: false; initial-value: 0px;}
@property --scrap-fade-top {syntax: '<length>'; inherits: false; initial-value: 0px;}
.scrap-card__body.is-scrollable {
    --scrap-fade: 56px;
    --scrap-fade-top: 16px;
    --scrap-mask: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, .043) calc(var(--scrap-fade-top) * .125),
        rgba(0, 0, 0, .156) calc(var(--scrap-fade-top) * .25),
        rgba(0, 0, 0, .316) calc(var(--scrap-fade-top) * .375),
        rgba(0, 0, 0, .5) calc(var(--scrap-fade-top) * .5),
        rgba(0, 0, 0, .684) calc(var(--scrap-fade-top) * .625),
        rgba(0, 0, 0, .844) calc(var(--scrap-fade-top) * .75),
        rgba(0, 0, 0, .957) calc(var(--scrap-fade-top) * .875),
        #000 var(--scrap-fade-top),
        #000 calc(100% - var(--scrap-fade)),
        rgba(0, 0, 0, .957) calc(100% - var(--scrap-fade) * .875),
        rgba(0, 0, 0, .844) calc(100% - var(--scrap-fade) * .75),
        rgba(0, 0, 0, .684) calc(100% - var(--scrap-fade) * .625),
        rgba(0, 0, 0, .5) calc(100% - var(--scrap-fade) * .5),
        rgba(0, 0, 0, .316) calc(100% - var(--scrap-fade) * .375),
        rgba(0, 0, 0, .156) calc(100% - var(--scrap-fade) * .25),
        rgba(0, 0, 0, .043) calc(100% - var(--scrap-fade) * .125),
        rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: var(--scrap-mask);
    mask-image: var(--scrap-mask);
    transition: --scrap-fade .2s ease, --scrap-fade-top .2s ease;
}
.scrap-card__body.is-scrollable.is-at-end {--scrap-fade: 0px;}
.scrap-card__body.is-scrollable.is-at-start {--scrap-fade-top: 0px;}
/* 그리드(카드 높이 고정): 모든 카드가 같은 높이이고, 본문이 넘치면 카드 안에서 스크롤된다 */
.scrap-grid--fixed .scrap-card {display: flex; flex-direction: column; height: var(--card-grid-height);}
.scrap-grid--fixed .scrap-card__header,.scrap-grid--fixed .scrap-card__footer {flex: 0 0 auto;}
.scrap-grid--fixed .scrap-card__main {flex: 1 1 auto; max-height: none;}
/* 비밀글/멤버공개 안내 카드는 본문 영역을 채우고 문구와 버튼을 가운데에 둔다 */
.scrap-grid--fixed .scrap-content--secret {height: 100%;}
.scrap-grid--fixed .scrap-secret-card {height: 100%;}
.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-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__meta span {opacity: .75;}
.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-content .scrap-md-heading {margin: 14px 5px 6px; line-height: 1.3; font-weight: 700; color: var(--title-font-color);}
.scrap-content h1.scrap-md-heading {font-size: 1.5em;}
.scrap-content h2.scrap-md-heading {font-size: 1.35em;}
.scrap-content h3.scrap-md-heading {font-size: 1.2em;}
.scrap-content h4.scrap-md-heading {font-size: 1.1em;}
.scrap-content h5.scrap-md-heading,.scrap-content h6.scrap-md-heading {font-size: 1em;}
.scrap-content .scrap-md-quote {margin: 6px 5px; padding: 6px 14px; border-left: 3px solid var(--accent-color); color: color-mix(in srgb, var(--content-font-color) 80%, transparent); background: color-mix(in srgb, var(--content-font-color) 4%, transparent);}
.scrap-content .scrap-md-quote p {padding: 0;}
.scrap-content .scrap-md-list {margin: 6px 5px; padding-left: 1.4em;}
.scrap-content ul.scrap-md-list {list-style: disc;}
.scrap-content ol.scrap-md-list {list-style: decimal;}
.scrap-content .scrap-md-list li {display: list-item; margin: 2px 0; line-height: 1.6;}
.scrap-content .scrap-md-hr {display: block; height: 0; margin: 14px 5px; border: 0; border-top: 1px solid var(--card-border-color);}
.scrap-content code {padding: 2px 5px; border-radius: 4px; font-size: 0.9em; background: color-mix(in srgb, var(--content-font-color) 8%, transparent); font-family: inherit;}
.scrap-content del {opacity: .7;}
.scrap-content p a,.scrap-content .scrap-md-quote a,.scrap-content .scrap-md-list a {color: var(--accent-color); text-decoration: underline;}
.scrap-secret-card {
    height: var(--card-secret-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    text-align: center;
    font-size: var(--card-content-size);
}
.scrap-secret-card__title {
    font-size: inherit;
    font-weight: bold;
    line-height: 1.3;
}
.scrap-secret-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    padding: 0;
    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: inherit;
    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--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)와 같은 모양이다. 렌더링되면 위젯이 이 blockquote를 대체한다 */
.scrap-content blockquote.twitter-tweet {
    position: relative;
    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);
    font-size: inherit;
    cursor: pointer;
}
.scrap-content blockquote.twitter-tweet: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-content blockquote.twitter-tweet a {display: block; margin-bottom: 6px; font-size: 12px; color: inherit; text-decoration: none; word-break: break-all;}
/* 카드 어디를 눌러도 링크(원본 트윗)가 열리도록 링크를 카드 전체로 늘린다 */
.scrap-content blockquote.twitter-tweet a::after {content: ""; position: absolute; inset: 0; border-radius: inherit;}
.scrap-content blockquote.twitter-tweet::after {content: "트윗 불러오는 중…"; display: block; font-weight: 700; line-height: 1.5; word-break: break-all;}
.scrap-content blockquote.twitter-tweet.is-slow::after {content: "트윗을 불러오는 데 시간이 걸리고 있습니다";}
/* 렌더링이 끝난 트윗(위젯이 붙이는 .twitter-tweet-rendered)은 부드럽게 나타난다 */
@keyframes scrap-tweet-in {from {opacity: 0; transform: translateY(6px);} to {opacity: 1; transform: none;}}
.scrap-content .twitter-tweet-rendered {animation: scrap-tweet-in .35s ease-out;}
@media (prefers-reduced-motion: reduce) {.scrap-content .twitter-tweet-rendered {animation: none;}}
/* 유튜브 썸네일(누르면 scrap-embed.js가 플레이어로 교체한다) */
.scrap-yt-facade {position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #000; cursor: pointer;}
.scrap-yt-facade img {display: block; width: 100%; height: 100%; object-fit: cover;}
.scrap-yt-facade svg {position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);}
.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;}
/* 메뉴 항목의 hover/선택 강조 배경색. 비율(%)이 낮을수록 연하다. */
.scrap-card-menu__dropdown,
.scrap-dd__menu,
#bo_cate,
.pg_wrap,
.btn_bo_user {--dd-hover-bg: color-mix(in srgb, var(--btn-secondary-bg) 45%, transparent);}

/* 강조 칸은 margin 대신 ::before로 그린다(항목이 움직이지 않아 가장자리에서 깜빡이지 않는다) */
.scrap-card-menu__dropdown {
    position: absolute;
    display: none;
    padding: 5px 0;
    top: calc(100% + 8px);
    right: 0;
    width: max-content;
    min-width: 0;
    border: 1px solid var(--container-border-color);
    border-radius: 12px;
    background-color: var(--container-bg-color);
    backdrop-filter: blur(10px);
    z-index: 50;
}
.scrap-card-menu__item {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 9px 14px;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    color: var(--content-font-color);
    opacity: .9;
}
.scrap-card-menu__item::before {content: ""; position: absolute; inset: 0 5px; z-index: -1; border-radius: 10px; background: transparent;}
.scrap-card-menu__item + .scrap-card-menu__item {margin-top: 3px;}
.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 {
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.scrap-card-menu__item:hover,
.scrap-card-menu__dropdown button.scrap-card-menu__item:hover {opacity: 1; font-weight: 700;}
/* 굵어질 때 폭이 흔들리지 않도록 보이지 않는 굵은 글자 복사본(data-text)으로 처음부터 굵은 폭을 잡는다 */
.scrap-card-menu__item span {display: inline-flex; flex-direction: column;}
.scrap-card-menu__item span::after {content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none;}
.scrap-card-menu__item:hover::before {background: var(--dd-hover-bg);}

/* 드롭다운(scrap-select.js가 <select data-dropdown>를 버튼과 메뉴로 바꿔 보여준다) */
.scrap-dd {position: relative; width: 100%;}
.scrap-dd__native {position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none;}
.scrap-dd__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-width: 140px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--content-font-color);
    background: rgb(from var(--card-bg-color) r g b / 50%);
    border: 1px solid var(--card-border-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
}
.scrap-dd__btn:disabled {opacity: .5; cursor: not-allowed;}
.scrap-dd__btn:focus-visible {outline: 2px solid var(--accent-color); outline-offset: 2px;}
.scrap-dd__label {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;}
.scrap-dd__arrow {margin-left: auto; opacity: .8; transition: transform .18s ease;}
.scrap-dd__btn.is-open .scrap-dd__arrow {transform: rotate(180deg);}
.scrap-dd__menu {
    position: fixed;
    box-sizing: border-box;
    z-index: 10000;
    min-width: 180px;
    max-height: min(320px, 60vh);
    height: fit-content;
    overflow-y: auto;
    padding: 5px 0;
    border: 1px solid var(--container-border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
    backdrop-filter: blur(10px);
}
.scrap-dd__item {
    position: relative;
    z-index: 0;
    display: block;
    padding: 9px 14px;
    color: var(--content-font-color);
    opacity: .9;
    cursor: pointer;
}
.scrap-dd__item::before {content: ""; position: absolute; inset: 0 5px; z-index: -1; border-radius: 10px; background: transparent;}
.scrap-dd__item + .scrap-dd__item {margin-top: 3px;}
.scrap-dd__item:hover,
.scrap-dd__item.is-focus,
.scrap-dd__item.is-active {opacity: 1; font-weight: 700;}
.scrap-dd__item:hover::before,
.scrap-dd__item.is-focus::before,
.scrap-dd__item.is-active::before {background: var(--dd-hover-bg);}
.scrap-dd__item.is-disabled {opacity: .4; cursor: not-allowed;}
@media all and (max-width: 640px) {
    .scrap-dd__btn {min-width: 110px;}
}



/* 작성/수정 모달 */
.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);
    /* container-bg-color가 반투명이라 모달 배경 위에 겹치면 알파가 두 번 곱해져
       더 진한 사각형으로 보인다. transparent로 두면 모달 배경이 그대로 비쳐서
       완전히 안 보이게 섞인다. */
    background: transparent;
    font-size: 16px;
    cursor: pointer;
}
.bo_write_modal .scrap-write {
    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-format-field {display: flex; flex-direction: column; gap: 8px;}
.scrap-format-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: transparent;
    color: var(--content-font-color);
    font-size: 0.9em;
    cursor: pointer;
}
.scrap-format-btn:hover {border-color: var(--accent-color); color: var(--accent-color);}
.scrap-editor-bar {display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
.scrap-editor-toolbar {display: flex; flex-wrap: wrap; gap: 4px;}
.scrap-editor-tool {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: transparent;
    color: var(--content-font-color);
    cursor: pointer;
}
.scrap-editor-tool:hover {border-color: var(--accent-color); color: var(--accent-color);}
.scrap-editor-preview {
    padding: 10px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    min-height: 160px;
    max-height: 60vh;
    overflow: auto;
}
.scrap-editor-preview__msg {margin: 0; opacity: .7;}
/* 갱신에 실패하면 마지막 내용을 흐리게 남긴다 */
.scrap-editor-preview[data-stale] {opacity: .55;}
.scrap-format-btn[aria-pressed="true"] {border-color: var(--accent-color); color: var(--accent-color);}

/* 입력칸과 미리보기 칸: 좁은 화면에서는 위아래로 놓고, PC(901px 이상)에서 미리보기를 켜면(.has-preview)
   창을 넓혀 좌우로 놓는다. 높이를 같게 맞추고 각자 안에서 스크롤한다. */
.scrap-editor-split > .write-field {min-width: 0;}
@media (min-width: 901px) {
    .bo_write_modal {transition: width .2s ease;}
    .bo_write_modal.has-preview,
    #bo_w.scrap-write.has-preview {width: min(94vw, 1120px);}
    .has-preview .scrap-editor-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: 12px;
        height: clamp(260px, 50vh, 520px);
        margin-bottom: 10px;
    }
    .has-preview .scrap-editor-split > .write-field {height: 100%; margin: 0;}
    .has-preview .scrap-editor-split textarea {height: 100%; min-height: 0; resize: none; box-sizing: border-box;}
    .has-preview .scrap-editor-preview {height: 100%; min-height: 0; max-height: none; box-sizing: border-box;}
}

/* 게시판 관리: 토글 스위치 */
.write-field--toggle {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.write-field--toggle label:first-child {margin: 0; font-size: 0.95em;}
.scrap-switch {position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;}
.scrap-switch input {position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;}
.scrap-switch__track {position: absolute; inset: 0; background: rgba(119, 119, 119, 0.4); border-radius: 999px; transition: background .15s ease;}
.scrap-switch__track:before {content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease;}
.scrap-switch input:checked + .scrap-switch__track {background: var(--accent-color);}
.scrap-switch input:checked + .scrap-switch__track:before {transform: translateX(20px);}

/* 게시판 관리: 아이콘 / 폰트 크기 2열 격자 */
.scrap-icon-font-grid {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; align-items: end;}
.scrap-icon-font-grid__head {margin-bottom: 6px;}
.bo_write_modal .scrap-icon-font-grid .write-field {margin-bottom: 10px; min-width: 0;}
.scrap-icon-font-grid .write-field > label {font-size: 0.9em; opacity: .85;}

/* 게시판 관리: 항목 간격 (사이트 공통 .write-field의 10px 간격을 이 창 안에서만 덮어쓴다)
   항목 사이 18px, 스위치 줄 사이 12px, 2열 사이 12px */
#fmanage .scrap-manage-body > .write-field,
#fmanage .scrap-manage-body > .write-row {margin: 0 0 18px;}
#fmanage .scrap-manage-body > .write-field--toggle {margin-bottom: 12px;}
#fmanage .scrap-manage-body > .write-row,
#fmanage #mg_loader_time_row .write-row {gap: 12px;}
#fmanage .scrap-manage-body > :last-child {margin-bottom: 0;}
#fmanage .write-row > .write-field {margin-bottom: 0;}
/* label은 사이트 공통 스타일에서 inline이라 아래 여백이 먹지 않으므로 block으로 바꾼다.
   라벨과 입력칸 사이는 항목 이름 10px, 하위 라벨(PC/모바일, 공지/일반 글/제목/본문) 6px */
#fmanage .write-field:not(.write-field--toggle) > label,
#fmanage .scrap-icon-font-grid__head {display: block; margin-bottom: 10px;}
#fmanage #mg_loader_time_row .write-field > label,
#fmanage .scrap-icon-font-grid .write-field > label {display: block; margin-bottom: 6px;}
/* 항목 이름 앞 아이콘 */
#fmanage label > i:first-child {display: inline-block; width: 1.25em; margin-right: 6px; text-align: center; opacity: .85;}
/* 항목 이름은 굵게(스위치와 선택 버튼 라벨은 제외) */
#fmanage .write-field > label:not(.scrap-switch),
#fmanage .scrap-icon-font-grid__head {font-weight: 700;}
#fmanage .scrap-icon-font-grid {gap: 0 12px;}
#fmanage .scrap-icon-font-grid .write-field {margin-bottom: 16px;}   /* 라벨이 위 입력칸이 아니라 자기 입력칸에 가까워 보이도록 라벨 간격(6px)보다 크게 */
#fmanage .scrap-icon-font-grid > .write-field:nth-last-child(-n+2) {margin-bottom: 0;}

/* 게시판 관리 창: 제목 줄과 저장 버튼 줄은 고정하고 가운데 항목만 스크롤한다(창 높이는 화면의 90%까지) */
.bo_write_modal.bo_manage_modal {display: flex; flex-direction: column; overflow: hidden;}
.bo_manage_modal > h3 {flex: 0 0 auto;}
.bo_write_modal.bo_manage_modal .scrap-write {flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0;}
.bo_manage_modal #fmanage {flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;}
.bo_manage_modal .scrap-manage-body {flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: var(--spacing-md);}
.bo_write_modal.bo_manage_modal .btn_confirm {flex: 0 0 auto; width: 100%; margin: 0; padding: var(--spacing-md); border-top: 1px solid var(--border-light);}

/* 제목 앞 아이콘(이모지/글자)과 게시판 관리의 아이콘 입력칸 */
.scrap-title-icon {font-style: normal; line-height: 1;}
.scrap-icon-input {display: flex; align-items: center; gap: 8px;}
.scrap-icon-input__preview {flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--card-border-color); border-radius: 10px; font-size: 16px;}
.scrap-icon-input .frm_input {flex: 1 1 auto; min-width: 0;}
/* 미리보기를 누르면 투명하게 덮어 둔 색상 input이 열리고, 색을 고른 뒤에는 모서리의 ×로 초기화한다 */
.scrap-icon-pick {position: relative; flex: 0 0 34px; width: 34px; height: 34px;}
.scrap-icon-pick .scrap-icon-input__preview {width: 100%; height: 100%; transition: border-color .15s ease;}
.scrap-icon-pick__color {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;}
.scrap-icon-pick:hover .scrap-icon-input__preview,
.scrap-icon-pick:focus-within .scrap-icon-input__preview {border-color: var(--accent-color);}
.scrap-icon-pick__reset {position: absolute; top: -6px; right: -6px; z-index: 1; width: 16px; height: 16px; padding: 0; border: 1px solid var(--card-border-color); border-radius: 50%; background: var(--container-bg-color); color: var(--content-font-color); font-size: 11px; line-height: 1; cursor: pointer;}
.scrap-icon-pick__reset[hidden] {display: none;}

/* 버튼식 선택(라디오 버튼을 꾸민 것이라 키보드로도 고를 수 있다) */
.scrap-seg {display: flex; gap: 8px;}
.scrap-seg__item {position: relative; flex: 1 1 0; min-width: 0; display: block; margin: 0; cursor: pointer;}
.scrap-seg__item input {position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;}
.scrap-seg__btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(119, 119, 119, 0.5);
    border-radius: var(--card-border-radius);
    line-height: 1.3;
    transition: border-color .15s ease, background .15s ease;
}
.scrap-seg__btn strong {font-size: 0.95em;}
.scrap-seg__btn small {font-size: 12px; opacity: .7;}
.scrap-seg__item:hover .scrap-seg__btn {border-color: var(--accent-color);}
.scrap-seg__item input:checked + .scrap-seg__btn {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}
.scrap-seg__item input:checked + .scrap-seg__btn strong {color: var(--accent-color);}
.scrap-seg__item input:focus-visible + .scrap-seg__btn {outline: 2px solid var(--accent-color); outline-offset: 2px;}



/* 로딩 화면 */
.scrap-page-loader {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity .2s ease;
}
.scrap-page-loader.is-active {display: flex; opacity: 1;}
.scrap-page-loader i {color: #fff; font-size: 2rem;}



/* 모바일 (칸 수는 scrap-masonry.js의 getColumnCount()가 같은 기준으로 처리한다) */
@media (max-width: 768px) {
    #container_wr {padding: 60px 20px;}
}
@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 {flex: 1 1 auto;}
    .scrap-seg {flex-direction: column;}
    /* 서식 버튼 줄: 서식 버튼은 가로로 스크롤하고, 미리보기 버튼은 같은 줄 오른쪽에 둔다. 터치 화면이라 툴팁은 숨긴다 */
    .scrap-editor-bar {flex-wrap: nowrap;}
    .scrap-editor-toolbar {flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;}
    .scrap-editor-toolbar::-webkit-scrollbar {display: none;}
    .scrap-editor-tool {flex: 0 0 auto;}
    .scrap-editor-bar > .scrap-format-btn {flex: 0 0 auto; white-space: nowrap;}
    .scrap-editor-tool[data-tooltip]::before,
    .scrap-editor-tool[data-tooltip]::after {display: none;}
}
/* 좁은 화면: 첫 줄에 Total과 버튼, 그 아래 줄에 카테고리를 전체 폭으로 둔다 */
@media (max-width: 700px) {
    #bo_btn_top.has-cate #bo_list_total {flex: 0 0 auto;}
    #bo_btn_top .btn_bo_user {order: 2;}
    #bo_btn_top #bo_cate {order: 3; flex: 1 1 100%;}
}



/* 글 보기 페이지(view.skin.php, 주소에 ?preview가 있을 때만 사용) */
.scrap-view {
    margin: 0 auto;
    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;
}
/* 마크다운 링크 [텍스트](URL)와 해시태그(#태그)는 알약 모양 칩으로 보인다. 사이트 공통 .hashtag 스타일은 덮어쓴다. */
.scrap-content a.scrap-md-link-chip,
.scrap-content a.hashtag {
  display: inline-block; vertical-align: middle; position: relative;
  padding: 0 9px; margin: 0 2px; line-height: 1.5; font-size: 0.9em;
  border: 0; border-radius: 999px; text-decoration: none; filter: none;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent); color: var(--accent-color);
  transition: background 0.2s ease;
}
.scrap-content a.scrap-md-link-chip:hover,
.scrap-content a.hashtag:hover { background: color-mix(in srgb, var(--accent-color) 26%, transparent); color: var(--accent-color); filter: none; }
.scrap-content a.scrap-md-link-chip i { margin-right: 4px; font-size: 0.85em; vertical-align: baseline; }


/* 서식 버튼 툴팁: 버튼 위 가운데에 data-tooltip 내용을 보여준다(0.3초 페이드, 살짝 떠오름).
   색은 사이트 기본 버튼 색(--btn-primary-bg 배경, --btn-primary-text 글자/테두리/꼬리)을 쓴다. */
.scrap-editor-tool {position: relative;}
.scrap-editor-tool[data-tooltip]::after,
.scrap-editor-tool[data-tooltip]::before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    pointer-events: none;
    transition: .3s ease;
    transition-delay: 0ms;
}
.scrap-editor-tool[data-tooltip]::after {
    content: attr(data-tooltip);
    padding: 8px 10px;
    border: 1px solid var(--btn-primary-text);
    border-radius: 10px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: var(--header-font-family, inherit);
    font-size: 13px;
    font-weight: 400;
    line-height: 12px;
    white-space: nowrap;
    text-shadow: none;
    box-shadow: none;
    transform: translateX(-50%);
}
.scrap-editor-tool[data-tooltip]::before {
    content: '';
    z-index: 1000001;
    margin-bottom: -11px;
    left: calc(50% - 6px);
    border: 6px solid transparent;
    border-top-color: var(--btn-primary-text);
    background: transparent;
}
.scrap-editor-tool[data-tooltip]:hover::after,
.scrap-editor-tool[data-tooltip]:hover::before,
.scrap-editor-tool[data-tooltip]:focus-visible::after,
.scrap-editor-tool[data-tooltip]:focus-visible::before {visibility: visible; opacity: 1; transition-delay: 100ms;}
.scrap-editor-tool[data-tooltip]:hover::before,
.scrap-editor-tool[data-tooltip]:focus-visible::before {transform: translateY(-8px);}
.scrap-editor-tool[data-tooltip]:hover::after,
.scrap-editor-tool[data-tooltip]:focus-visible::after {transform: translateX(-50%) translateY(-8px);}

/* 링크 입력 창(링크/라벨 링크 버튼) */
.scrap-link-dialog {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: color-mix(in srgb, var(--content-font-color) 4%, transparent);
}
.scrap-link-dialog[hidden] {display: none;}
.scrap-link-dialog__field {flex: 1 1 140px; min-width: 0; margin: 0; font-size: 0.9em; font-weight: 700;}
.scrap-link-dialog__field .frm_input {display: block; width: 100%; height: 34px; margin-top: 4px; box-sizing: border-box; font-weight: 400;}
.scrap-link-dialog__btns {display: flex; gap: 6px; margin-left: auto;}
.scrap-link-dialog__btns .scrap-format-btn {margin-left: 0;}
.scrap-link-dialog__ok {border-color: var(--accent-color); color: var(--accent-color);}

/* 별점: 카드 제목 오른쪽, ⋯ 메뉴 앞. 글꼴은 카드 제목과 같고 드래그로 선택되지 않는다 */
.scrap-card__stars {flex: 0 0 auto; color: var(--accent-color); font-family: var(--title-font-family); font-size: var(--card-title-size); font-weight: 600; letter-spacing: 1px; line-height: 1.3; white-space: nowrap; user-select: none; -webkit-user-select: none;}
.write-field--rating {min-width: 0;}

/* 카테고리 위치 "중앙": Total(왼쪽), 카테고리(중앙), 버튼(오른쪽)을 한 줄에 둔다. 좁은 화면은 첫 줄에 Total과 버튼, 둘째 줄에 카테고리 */
#bo_btn_top.cate-center {display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px 12px;}
#bo_btn_top.cate-center #bo_list_total {grid-column: 1;}
#bo_btn_top.cate-center #bo_cate {grid-column: 2; justify-self: center; max-width: 100%;}
#bo_btn_top.cate-center #bo_cate ul {justify-content: center;}
#bo_btn_top.cate-center .btn_bo_user {grid-column: 3; justify-self: end; margin: 0;}
@media (max-width: 700px) {
    #bo_btn_top.cate-center {grid-template-columns: minmax(0, 1fr) auto;}
    #bo_btn_top.cate-center #bo_list_total {grid-column: 1; grid-row: 1;}
    #bo_btn_top.cate-center .btn_bo_user {grid-column: 2; grid-row: 1;}
    #bo_btn_top.cate-center #bo_cate {grid-column: 1 / -1; grid-row: 2; justify-self: stretch;}
}

/* 별점별 보기 패널(검색 버튼 왼쪽). 필터가 걸려 있으면 버튼이 포인트 색이다 */
.btn_bo_user li .btn_bo_rating.is-active {opacity: 1; color: var(--accent-color); border-color: var(--accent-color);}
.scrap-filter__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: max-content;
    max-width: 86vw;
    box-sizing: border-box;
    padding: 18px 20px 14px;
    border: 1px solid var(--container-border-color);
    border-radius: 16px;
    background: var(--container-bg-color);
    backdrop-filter: blur(10px);
    text-align: left;
}
.scrap-filter__panel[hidden] {display: none;}
.scrap-filter__title {margin-bottom: 6px; font-family: var(--title-font-family); font-size: var(--card-title-size); font-weight: 700; line-height: 1.3;}
.scrap-filter__list {margin: 0; padding: 0; list-style: none;}
.scrap-filter__list li {margin: 0; padding: 0;}
.scrap-filter__row {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 8px; cursor: pointer;}   /* 좌우 8px 안쪽 여백으로 제목보다 살짝 들어간다 */
.scrap-filter__label {color: var(--accent-color); font-family: var(--title-font-family); font-size: var(--card-title-size); font-weight: 600; letter-spacing: 1px; line-height: 1.3; white-space: nowrap; user-select: none; -webkit-user-select: none;}
.scrap-filter__check {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid var(--card-border-color);
    border-radius: 7px;
    background: transparent no-repeat center / 14px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.scrap-filter__check:hover {border-color: var(--accent-color);}
.scrap-filter__check:checked {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
.scrap-filter__check:focus-visible {outline: 2px solid var(--accent-color); outline-offset: 2px;}
.scrap-filter__foot {display: flex; align-items: center; justify-content: center; margin-top: 10px; white-space: nowrap;}
/* 초기화: 글자 버튼. 좌우 패딩이 같아서 글자가 가운데에 온다 */
.scrap-filter__reset {white-space: nowrap; margin: 0; padding: 6px 8px; border: 0; background: none; color: var(--content-font-color); font-family: var(--title-font-family); font-size: var(--card-title-size); font-weight: 600; line-height: 1; opacity: .65; cursor: pointer; transition: opacity .15s ease;}
.scrap-filter__reset:hover {opacity: 1;}
.scrap-filter__reset:focus-visible {outline: 2px solid var(--accent-color); outline-offset: 2px; border-radius: 6px;}

/* 공개 범위 버튼(작성창): 한 줄에 아이콘과 글자만 들어가는 작은 선택 버튼. 좁은 화면에서도 가로로 나란히 둔다 */
.scrap-seg--compact {gap: 6px;}
.scrap-seg--compact .scrap-seg__btn {flex-direction: row; align-items: center; justify-content: center; height: 34px; padding: 0 10px; text-align: center;}
.scrap-seg--compact .scrap-seg__btn strong {font-size: 0.95em; font-weight: 400; white-space: nowrap;}
/* 글자(아이콘 포함) 색은 테두리 색과 같다: 평소 연한 회색, 마우스를 올리거나 선택되면 포인트 색 */
.scrap-seg--compact .scrap-seg__btn {color: rgba(119, 119, 119, 0.5);}
.scrap-seg--compact .scrap-seg__item:hover .scrap-seg__btn {color: var(--accent-color);}
/* 선택된 버튼만 굵게 한다 */
.scrap-seg--compact .scrap-seg__item input:checked + .scrap-seg__btn strong {font-weight: 700;}
@media (max-width: 640px) {
    .scrap-seg--compact {flex-direction: row;}
}