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

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

/*라공 에디션 디자인 설정 덮어쓰기*/
#container_wr {padding: 0 20px;}
.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}
.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);}



/*게시판 목록*/
.scrap-grid {
    column-count: 3;
    column-gap: 10px;
    align-items: start;
}
.scrap-empty {padding: 40px 16px; text-align: center;}



/*카드*/
.scrap-card {
    display: inline-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);
    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(--container-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(--container-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(--container-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;
}
.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(--container-border-radius);
    background-color: var(--container-bg-color);
    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;
}
.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) {
    #container_wr {padding: 60px 20px;}
}
@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;
}