/* ═══════════════════════════════════════════════════════════════
대치동시크릿 게시판 공통 꾸미기
아임웹 게시판은 페이지마다 두 가지 모양으로 나옵니다.
① .post_link_wrap — 공지사항·자료 샘플 (그림이 붙는 목록)
② .li_board > ul — FAQ·문의하기·후기 (표 모양 목록)
글자와 얼개는 아임웹이 그린 것을 그대로 두고, **보이는 모양만** 바꿉니다.
그래야 글쓰기·검색·쪽넘김 같은 아임웹 기능이 그대로 살아 있습니다.
어느 모양으로 보일지는 board.js 가 페이지 주소를 보고 정합니다.
공지사항·문의하기 → 줄 목록 (sl-bd-line)
FAQ → 줄 목록 + 갈래 단추 (sl-bd-line sl-bd-faq) — 글마다 제 주소가 있습니다
(예전 펼침 모양 sl-bd-fold 도 남겨 두었습니다)
═══════════════════════════════════════════════════════════════ */
/* ── 공통 : 게시판을 흰 상자에 담습니다 ── */
.sl-bd {
background: #fff; border: 1px solid #e6ecf4; border-radius: 16px;
overflow: hidden; margin: 4px 0 14px;
}
.sl-bd .sl-bdtop {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 15px 18px; background: linear-gradient(180deg, #fff, #fdfbfd);
border-bottom: 1px solid #e6ecf4;
}
.sl-bd .sl-bdtt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sl-bd .sl-bdtt h2 {
margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.04em; color: #1d3a5e;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-bd .sl-bdcnt {
font-size: 12px; font-weight: 800; color: #fff; background: #e85a8a;
border-radius: 100px; padding: 3px 10px; white-space: nowrap; flex: none;
}
/* 아임웹 검색칸을 우리 모양으로 */
.sl-bd .sl-bdtop .board_search, .sl-bd .sl-bdtop ._search_wrap {
margin: 0 !important; flex: none;
}
.sl-bd .sl-bdtop input[type=text], .sl-bd .sl-bdtop input[type=search] {
border: 1px solid #e6ecf4 !important; border-radius: 100px !important;
padding: 7px 14px !important; font-size: 13px !important; height: auto !important;
box-shadow: none !important; background: #fff !important;
}
/* 아임웹이 붙이는 표 머리·테두리는 우리 것으로 덮습니다 */
.sl-bd .li_header { display: none !important; }
.sl-bd table, .sl-bd .li_board { border: 0 !important; margin: 0 !important; }
/* ── ㉮ 줄 목록 ── */
.sl-bd-line .sl-row {
display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px 54px;
gap: 12px; align-items: center; padding: 15px 20px;
border-bottom: 1px solid #f4f7fb; transition: .12s;
}
.sl-bd-line .sl-row:last-child { border-bottom: 0; }
.sl-bd .sl-row, .sl-bd .sl-row:hover { text-decoration: none; }
.sl-bd-line .sl-row:hover { background: #fffafc; }
.sl-bd-line .sl-row.pin { background: #fdeef3; }
.sl-bd-line .sl-no { font-size: 12px; color: #93a5bd; text-align: center; }
.sl-bd-line .sl-tt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sl-bd-line .sl-tt .t {
font-size: 14px; font-weight: 600; color: #1d3a5e;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-bd-line .sl-row:hover .sl-tt .t { color: #c33e6d; }
.sl-bd-line .sl-w, .sl-bd-line .sl-d { font-size: 12px; color: #46617f; text-align: center; }
.sl-bd-line .sl-v { font-size: 12px; color: #93a5bd; text-align: center; }
.sl-bd-line .sl-cm { font-size: 11.5px; color: #93a5bd; white-space: nowrap; }
.sl-bd-line .sl-head {
display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px 54px; gap: 12px;
padding: 11px 20px; background: #fbfdff; border-bottom: 1px solid #e6ecf4;
font-size: 11.5px; font-weight: 800; color: #46617f; text-align: center;
}
.sl-bd-line .sl-head b:nth-child(1) { text-align: left; }
.sl-bd-line .sl-head b { font-weight: 800; }
/* 딱지 */
.sl-tag { font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 3px 8px;
white-space: nowrap; flex: none; }
.sl-tag.pin { background: #e85a8a; color: #fff; }
.sl-tag.done { background: #e6f6e9; color: #1e6b32; }
.sl-tag.wait { background: #fff4d6; color: #8a6300; }
/* 비밀글 — 자물쇠 옆에 분홍 딱지, 제목은 가립니다 */
.sl-tag.secret { background: #fdeef3; color: #c33e6d; border: 1px solid #f7d3e0; }
.sl-bd-line .sl-tt .t.secret { color: #b6a2ad; font-weight: 600; }
/* ── 자주 묻는 질문 갈래 단추 ── */
.sl-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #f0f3f8; background: #fbfcfe; }
.sl-cats button {
border: 1px solid #e6ecf4; background: #fff; color: #46617f; border-radius: 100px;
padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .12s;
}
.sl-cats button em { font-style: normal; font-size: 11px; color: #c33e6d; margin-left: 2px; }
.sl-cats button:hover { border-color: #f2b8cd; color: #c33e6d; }
.sl-cats button.on { background: #e85a8a; border-color: #e85a8a; color: #fff; }
.sl-cats button.on em { color: #ffe1eb; }
.sl-bd-fold .sl-fq .sl-cat {
flex: none; font-size: 10.5px; font-weight: 750; color: #7c90a8;
background: #f1f4f9; border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.sl-fq-none { display: none; padding: 26px 16px; text-align: center; color: #93a5bd; font-size: 13px; }
/* ── ㉰ 펼침 (묻고 답하기) ── */
.sl-bd-fold .sl-fq { border-bottom: 1px solid #f4f7fb; }
.sl-bd-fold .sl-fq:last-child { border-bottom: 0; }
.sl-bd-fold .sl-fq .q {
display: flex; align-items: flex-start; gap: 11px; padding: 17px 20px;
cursor: pointer; transition: .12s;
}
.sl-bd-fold .sl-fq .q:hover { background: #fffafc; }
.sl-bd-fold .sl-fq .mk {
width: 24px; height: 24px; border-radius: 7px; background: #fdeef3; color: #c33e6d;
display: grid; place-items: center; font-size: 12px; font-weight: 900; flex: none;
}
.sl-bd-fold .sl-fq .t {
flex: 1; min-width: 0; font-size: 14px; font-weight: 650; color: #1d3a5e;
overflow: visible; white-space: normal; word-break: keep-all; line-height: 1.45;
}
/* 새 글 배지 — 작은 분홍 동그라미 N */
.sl-bd-fold .sl-fq .sl-new, .sl-bd-faq .sl-new { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 100px;
background: #e85a8a; color: #fff; font-size: 9.5px; font-weight: 900; line-height: 1; margin-left: 6px; vertical-align: 2px; }
.sl-bd-fold .sl-fq .arw { color: #f2b8cd; font-size: 13px; transition: .15s; flex: none; }
.sl-bd-fold .sl-fq.open .arw { transform: rotate(180deg); }
.sl-bd-fold .sl-fq .a {
display: none; padding: 0 20px 20px 55px; font-size: 13.5px; line-height: 1.8; color: #46617f;
}
.sl-bd-fold .sl-fq.open { background: #fffafc; }
.sl-bd-fold .sl-fq.open .a { display: block; }
.sl-ans img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.sl-ans .wait { color: #93a5bd; }
/* ── 답 본문 서식 (2026-08-26 FAQ 정비) — .sl-ans 는 board.js 의 dressAnswer() 가 붙입니다.
펼침의 답 칸(.sl-fq .a)과 글 보기 화면의 본문(.board_txt_area) 이 함께 씁니다. — 글은 아임웹 편집기로 쓰고, 모양은 여기서 잡습니다 ── */
.sl-ans p { margin: 0 0 10px; }
.sl-ans .sl-lead { font-size: 14.5px; font-weight: 700; color: #1d3a5e; margin: 0 0 14px; }
.sl-ans strong { color: #c33e6d; font-weight: 750; }
.sl-ans .sl-lead strong { color: #c33e6d; }
.sl-ans h4 { margin: 18px 0 8px; font-size: 12px; font-weight: 800; color: #e85a8a; letter-spacing: .04em; }
.sl-ans h4:first-child { margin-top: 4px; }
.sl-ans ol { list-style: none; counter-reset: sl-step; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sl-ans ol > li { position: relative; padding-left: 38px; min-height: 26px; }
/* 아임웹 글 보기(.fr-view)는 li 자체에 list-style: decimal 을 박아 두어 숫자가 두 번 보입니다 — li 에서도 끕니다 */
.sl-ans ol > li { list-style: none !important; }
.sl-ans ol > li::before {
counter-increment: sl-step; content: counter(sl-step);
position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 100px;
background: #e85a8a; color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; }
.sl-ans ol > li > p:first-child,
.sl-ans ol > li > strong:first-child { font-weight: 650; color: #1d3a5e; }
.sl-ans ol > li strong { color: #1d3a5e; }
.sl-ans ul { margin: 0 0 10px; padding-left: 18px; }
.sl-ans img { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e6ecf4; margin: 8px 0 4px; }
.sl-ans em { font-style: normal; font-size: 12px; color: #93a5bd; display: block; margin: 0 0 6px; }
.sl-ans blockquote { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.7; border: 1px solid; }
.sl-ans blockquote.sl-tip { background: #eaf1fc; border-color: #c9dbf5; color: #1d3a5e; }
.sl-ans blockquote.sl-warn { background: #fdf1de; border-color: #ecd3a5; color: #6b4a10; }
.sl-ans blockquote.sl-warn strong { color: #a86a12; }
.sl-ans blockquote p { margin: 0; }
.sl-ans .sl-kakao { margin: 16px 0 0; padding: 10px 14px; border: 1px solid #e6ecf4; border-radius: 10px; background: #fff; font-size: 13px; }
/* 답 본문의 링크는 눌러 볼 수 있게 보여야 합니다 — 굵게 + 밑줄 (관련 질문 알약·샘플 단추는 제외) */
.sl-ans a:not(.sl-rel a):not(.sl-more a) { color: #c33e6d; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.sl-ans a:not(.sl-rel a):not(.sl-more a):hover { color: #e85a8a; }
.sl-ans .sl-kakao strong:first-child { display: inline-block; background: #fae100; color: #3b1e1e; border-radius: 8px; padding: 4px 10px; font-size: 12px; margin-right: 8px; }
.sl-ans .sl-rel { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px dashed #e6ecf4; font-size: 12.5px; color: #7c90a8; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sl-ans .sl-rel a { text-decoration: none; background: #fdeef3; color: #c33e6d; border-radius: 100px; padding: 3px 10px; font-weight: 700; }
.sl-ans table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 8px; }
.sl-ans th { text-align: left; background: #fbfdff; color: #46617f; font-weight: 800; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid #e6ecf4; }
.sl-ans td { padding: 9px 10px; border-bottom: 1px solid #f0f3f8; color: #1d3a5e; vertical-align: top; }
.sl-ans .sl-phones { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.sl-ans .sl-phones img { width: 220px; max-width: 31%; margin: 8px 0; }
/* 샘플 액자 — 한 줄로 흐르는 작은 그림, 누르면 크게 */
.sl-ans .sl-gal { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 6px 0 0; scroll-snap-type: x proximity; }
.sl-ans .sl-gal::-webkit-scrollbar { height: 6px; }
.sl-ans .sl-gal::-webkit-scrollbar-thumb { background: #e6ecf4; border-radius: 6px; }
.sl-ans .sl-gal img { flex: none; width: auto; height: 190px; margin: 0; cursor: zoom-in; scroll-snap-align: start;
box-shadow: 0 1px 4px rgba(29, 58, 94, .08); transition: transform .12s; }
.sl-ans .sl-gal img:hover { transform: translateY(-2px); border-color: #f2b8cd; }
.sl-ans .sl-more { margin: 8px 0 0; }
.sl-ans .sl-more a { display: inline-block; text-decoration: none; background: #e85a8a; color: #fff; font-weight: 750; font-size: 12.5px;
border-radius: 100px; padding: 8px 16px; }
.sl-ans .sl-more a:hover { background: #c33e6d; }
/* 순서 타임라인 */
.sl-ans .sl-tl { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 6px; overflow-x: auto; padding-bottom: 4px; }
.sl-ans .sl-tl-it { flex: 1 1 0; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sl-ans .sl-tl-it b { display: block; width: 100%; box-sizing: border-box; text-align: center; background: #fdeef3; color: #c33e6d;
border-radius: 10px; padding: 10px 6px; font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.sl-ans .sl-tl-it.on b { background: #e85a8a; color: #fff; }
.sl-ans .sl-tl-it i { font-style: normal; font-size: 11px; color: #93a5bd; font-weight: 700; white-space: nowrap; }
/* 크게 보기 */
.sl-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(13, 24, 38, .86); display: none; align-items: center; justify-content: center; }
.sl-lb.on { display: flex; }
.sl-lb img { max-width: min(92vw, 1000px); max-height: 90vh; border-radius: 6px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: pointer; }
.sl-lb .x, .sl-lb .nav { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 44px; height: 44px; border-radius: 100px;
font-size: 22px; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.sl-lb .x { top: 16px; right: 16px; }
.sl-lb .nav { top: 50%; transform: translateY(-50%); }
.sl-lb .prev { left: 14px; } .sl-lb .next { right: 14px; }
.sl-lb .x:hover, .sl-lb .nav:hover { background: rgba(255, 255, 255, .3); }
.sl-lb .no { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 12.5px; font-weight: 700;
background: rgba(0, 0, 0, .35); border-radius: 100px; padding: 4px 12px; }
/* 크게 보기 창 아래 썸네일 띠 — 사진이 두 장 이상일 때만 (board.js openLb) */
.sl-lb .strip { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: none; gap: 4px;
max-width: 92vw; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.sl-lb .strip::-webkit-scrollbar { display: none; }
.sl-lb.has-strip .strip { display: flex; }
.sl-lb .strip img { flex: none; width: 46px; height: 46px; max-width: none; max-height: none; object-fit: cover; border-radius: 4px;
opacity: .45; box-shadow: none; cursor: pointer; border: 2px solid transparent; }
.sl-lb .strip img.on { opacity: 1; border-color: #e85a8a; }
.sl-lb.has-strip > img { max-height: calc(100vh - 130px); }
@media (max-width: 520px) {
.sl-ans .sl-phones img { max-width: 48%; }
.sl-ans .sl-gal img { height: 150px; }
.sl-lb .nav { display: none; }
}
/* ── ㉯ 자주 묻는 질문 — 게시판형 (2026-09-04) ──
공지사항처럼 줄 목록이되, 위에 갈래 단추가 있고 줄마다 갈래 딱지가 붙습니다.
줄을 누르면 그 글의 제 주소(/faq/?bmode=view&idx=…)로 갑니다 — 질문 하나를 링크로 줄 수 있습니다. */
.sl-bd-faq .sl-row, .sl-bd-faq .sl-head { grid-template-columns: minmax(0, 1fr) 92px 54px; }
.sl-tag.cat { background: #f1f4f9; color: #7c90a8; }
.sl-bd-faq .sl-row:hover .sl-tag.cat { background: #fdeef3; color: #c33e6d; }
.sl-bd-faq .sl-new { margin-left: 2px; }
@media (max-width: 900px) {
.sl-bd-faq .sl-row, .sl-bd-faq .sl-head { grid-template-columns: minmax(0, 1fr) 74px; }
.sl-bd-faq .sl-head b:nth-child(2) { display: block; }
.sl-bd-faq .sl-head b:nth-child(3), .sl-bd-faq .sl-v { display: none; }
}
/* ── 자주 묻는 질문 글 보기 ──
board.js 가 제목의 「[갈래]」를 딱지로 바꾸고, 본문에 dressAnswer() 를 걸어 .sl-ans 서식을 입힙니다. */
body.sl-faqv .board_view h1.view_tit .sl-tag.cat {
display: inline-block; font-size: 12px; padding: 4px 10px; margin: 0 10px 0 0; vertical-align: 4px;
background: #fdeef3; color: #c33e6d;
}
body.sl-faqv .board_view .board_txt_area { font-size: 14.5px; line-height: 1.85; color: #46617f; }
body.sl-faqv .sl-ans .sl-lead { font-size: 17px; }
body.sl-faqv .sl-ans h4 { font-size: 13px; }
/* 쪽 넘김은 아임웹 것을 그대로 쓰되 모양만 다듬습니다 */
.sl-bd-wrap .pagination > li > a, .sl-bd-wrap .pagination > li > span {
border: 1px solid #e6ecf4 !important; border-radius: 9px !important; margin: 0 3px !important;
color: #46617f !important; font-weight: 700 !important; font-size: 12.5px !important;
}
.sl-bd-wrap .pagination > li.active > a, .sl-bd-wrap .pagination > li.active > span {
background: #1d3a5e !important; border-color: #1d3a5e !important; color: #fff !important;
}
@media (max-width: 900px) {
.sl-bd-line .sl-row, .sl-bd-line .sl-head { grid-template-columns: minmax(0, 1fr) 74px; }
.sl-bd-line .sl-w, .sl-bd-line .sl-v,
.sl-bd-line .sl-head b:nth-child(2), .sl-bd-line .sl-head b:nth-child(4) { display: none; }
.sl-bd .sl-bdtop { flex-direction: column; align-items: flex-start; gap: 9px; }
.sl-bd .sl-bdtt h2 { font-size: 18px; }
}
/* ═══════════════ 글 보기 (공지사항·문의하기) ═══════════════
아임웹이 그린 얼개를 그대로 두고 **보이는 모양만** 바꿉니다.
글쓰기·댓글·좋아요는 아임웹 기능이라 손대면 안 됩니다.
.board_view
.board-title > h1.view_tit 제목
.board_summary > .left > .avatar + .author 글쓴이·게시판·조회수
.board_txt_area.fr-view 본문
.comment_section (둘) 댓글 / 목록·글쓰기 단추
*/
body.sl-bv .board_view {
background: #fff; border: 1px solid #e6ecf4; border-radius: 18px;
overflow: hidden; margin: 6px 0 14px;
}
body.sl-bv .board_view .board-title {
padding: 26px 30px 0; border: 0 !important; margin: 0 !important;
}
body.sl-bv .board_view h1.view_tit {
margin: 0; font-size: 23px; font-weight: 850; letter-spacing: -.04em;
line-height: 1.4; color: #1d3a5e;
}
body.sl-bv .board_view .board_summary {
padding: 16px 30px 20px; border-bottom: 1px solid #e6ecf4; margin: 0 !important;
}
body.sl-bv .board_view .board_summary .left { display: flex; align-items: center; gap: 11px; }
/* 아임웹이 .avatar 에 padding-right:16px 를 박아 두어, 38px 칸 안에서 사진이 22px 로 눌려
왼쪽으로 쏠려 보였습니다. 여백을 지우고 사진이 동그라미를 꽉 채우게 합니다. */
body.sl-bv .board_view .board_summary .left { float: none !important; padding: 0 !important; }
body.sl-bv .board_view .board_summary .avatar {
width: 42px !important; height: 42px !important; padding: 0 !important; margin: 0 !important;
border-radius: 50%; overflow: hidden; flex: none; background: #fdeef3;
display: flex; align-items: center; justify-content: center;
}
body.sl-bv .board_view .board_summary .avatar img,
body.sl-bv .board_view .board_summary .avatar .avatar-image {
width: 100% !important; height: 100% !important; max-width: none !important;
object-fit: cover; object-position: center; border-radius: 50%; display: block;
}
body.sl-bv .board_view .board_summary .author { font-size: 12px; color: #93a5bd; line-height: 1.6; }
body.sl-bv .board_view .board_summary .author .name,
body.sl-bv .board_view .board_summary .author > *:first-child {
font-size: 13.5px; font-weight: 750; color: #1d3a5e;
}
body.sl-bv .board_view .board_txt_area {
padding: 30px; font-size: 15px; line-height: 1.9; color: #2b4a70; min-height: 110px;
}
body.sl-bv .board_view .board_txt_area img { max-width: 100%; height: auto; border-radius: 8px; }
/* ── 사진 격자 ── 이어진 사진 3장 이상은 격자로 모으고 8장까지만 보입니다 (board.js viewGallery)
글 사이의 빈 줄(
)이 격자 위아래에 남아도 어색하지 않게 여백은 작게 둡니다. */
body.sl-bv .board_view .sl-pg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 4px; }
/* 사진은 네모 칸에 **잘리지 않고 통째로** 들어갑니다 (2026-09-09 사장님).
길쭉하거나 넓적한 사진은 크기가 줄어 위아래(또는 좌우)에 흰 자리가 남지만,
글을 읽는 분이 사진 전체를 한눈에 보실 수 있습니다 — 잘라서 크게 보이는 것보다 이 편이 낫습니다.
(예전에는 object-fit:cover 로 칸을 꽉 채워 사진 가장자리가 잘렸습니다.) */
body.sl-bv .board_view .sl-pg-it {
position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px;
background: #fff; border: 1px solid #e6ecf4; cursor: zoom-in; text-decoration: none;
transition: border-color .2s, box-shadow .2s;
}
body.sl-bv .board_view .sl-pg-it img {
width: 100% !important; height: 100% !important; max-width: none !important;
object-fit: contain; object-position: center;
display: block; margin: 0 !important; border-radius: 0 !important;
}
/* 칸을 키우거나 사진을 확대하면 다시 잘립니다 — 테두리만 밝혀 「누를 수 있다」를 알립니다 */
body.sl-bv .board_view .sl-pg-it:hover { border-color: #f2b8cd; box-shadow: 0 4px 14px rgba(232, 90, 138, .18); }
body.sl-bv .board_view .sl-pg-it::before {
content: attr(data-n); position: absolute; left: 7px; top: 7px; z-index: 1;
background: rgba(13, 24, 38, .55); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 100px; line-height: 1.4;
}
body.sl-bv .board_view .sl-pg-it.hide { display: none; }
body.sl-bv .board_view .sl-pg-it.more::after {
content: attr(data-more); position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
background: rgba(13, 24, 38, .55); color: #fff; font-size: 22px; font-weight: 800;
}
body.sl-bv .board_view .sl-pg-btn {
display: block; margin: 10px auto 12px; border: 1px solid #f2b8cd; background: #fff; color: #c33e6d;
border-radius: 100px; padding: 9px 22px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; line-height: 1.4;
}
body.sl-bv .board_view .sl-pg-btn:hover { background: #fdeef3; }
@media (max-width: 640px) {
body.sl-bv .board_view .sl-pg { grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.sl-bv .board_view .sl-pg-it.more::after { font-size: 18px; }
}
/* ── 글 안의 상품 링크 옆 「장바구니 담기 · 구매하기」 ── (board.js shopLinks, 2026-09-09)
공지 글에 자료 주소를 붙여 넣으시면 그 옆에 값과 단추가 붙습니다.
쏠북에서 파는 교과서는 담기 단추 없이 「쏠북에서 구매」 하나만 붙습니다. */
body.sl-bv .board_view a.sl-pl-a {
font-weight: 700; color: #c33e6d !important; text-decoration: underline; text-underline-offset: 3px;
}
body.sl-bv .board_view .sl-pl {
display: inline-flex; align-items: center; gap: 5px; margin: 0 2px 0 7px;
vertical-align: middle; white-space: nowrap; line-height: 1.4;
}
body.sl-bv .board_view .sl-pl .sl-pl-pr {
font-size: 13px; font-weight: 800; color: #1d3a5e; display: inline-flex; align-items: center; gap: 4px;
}
body.sl-bv .board_view .sl-pl .sl-pl-pr b { color: #e85a8a; font-weight: 800; }
body.sl-bv .board_view .sl-pl .sl-pl-pr s { color: #93a5bd; font-weight: 500; font-size: 12px; }
body.sl-bv .board_view .sl-pl .sl-pl-b {
border-radius: 100px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; line-height: 1.4;
font-family: inherit; cursor: pointer; text-decoration: none !important; white-space: nowrap;
border: 1px solid #f2b8cd; background: #fff; color: #c33e6d !important;
}
body.sl-bv .board_view .sl-pl .sl-pl-b:hover { background: #fdeef3; }
body.sl-bv .board_view .sl-pl .sl-pl-buy,
body.sl-bv .board_view .sl-pl .sl-pl-go {
background: #e85a8a; border-color: #e85a8a; color: #fff !important;
}
body.sl-bv .board_view .sl-pl .sl-pl-buy:hover,
body.sl-bv .board_view .sl-pl .sl-pl-go:hover { background: #d94b7b; }
body.sl-bv .board_view .sl-pl .sl-pl-cart.done { background: #fdeef3; border-color: #e85a8a; }
body.sl-bv .board_view .sl-pl .sl-pl-b:disabled { opacity: .6; cursor: default; }
/* 「링크 바로잡음」 — 글에 적으신 이름과 링크가 달라 우리가 옮긴 자리입니다.
손님 화면에는 안 보입니다. 주소 뒤에 &sl=check 를 붙이시면 보입니다 (board.js viewShop). */
body.sl-bv .board_view .sl-pl .sl-pl-fix { display: none; }
body.sl-bv.sl-check .board_view .sl-pl .sl-pl-fix {
display: inline-flex; align-items: center; background: #fff4d6; border: 1px solid #f0d089;
color: #8a6100; font-size: 11.5px; font-weight: 700; border-radius: 100px; padding: 3px 9px; cursor: help;
}
@media (max-width: 640px) {
/* 좁은 화면에서는 단추가 글줄 밖으로 밀려 나가지 않게 아랫줄로 내려 놓습니다 */
body.sl-bv .board_view .sl-pl { display: flex; margin: 7px 0 3px; flex-wrap: wrap; white-space: normal; }
}
/* 담았습니다 안내 */
#sl-pl-toast {
position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); z-index: 99999;
background: rgba(13, 24, 38, .9); color: #fff; font-size: 13.5px; font-weight: 700;
padding: 11px 20px; border-radius: 100px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}
#sl-pl-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* 좋아요·댓글 수 줄 */
body.sl-bv .board_view .comment-block {
display: flex; align-items: center; gap: 9px;
padding: 14px 30px; border-top: 1px solid #e6ecf4; background: #fbfdff;
}
body.sl-bv .board_view .comment-block > * {
border: 1px solid #e6ecf4; background: #fff; border-radius: 100px;
padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: #46617f;
}
body.sl-bv .board_view .comment-block > *:hover { border-color: #f2b8cd; color: #c33e6d; }
/* 댓글 */
body.sl-bv .board_view .comment_list { padding: 4px 30px 0; }
body.sl-bv .board_view .comment_list .comment {
padding: 18px 0; border-bottom: 1px solid #f4f7fb;
}
body.sl-bv .board_view .comment_list .comment:last-child { border-bottom: 0; }
body.sl-bv .board_view .comment_textarea { padding: 18px 30px 24px; background: #fbfdff; }
body.sl-bv .board_view .comment_textarea textarea {
border: 1px solid #e6ecf4 !important; border-radius: 12px !important;
padding: 13px 15px !important; font-size: 13.5px !important; min-height: 88px !important;
}
body.sl-bv .board_view .comment_textarea textarea:focus { border-color: #f2b8cd !important; }
/* ── 맨 아래 : 이전·다음 글 + 목록·글쓰기 ──
아임웹은 이 둘을 좁은 알약 상자와 검은 단추로 나란히 띄워 놓습니다.
글줄이 잘리고 검정 단추가 튀어서, **위아래로 나눠** 놓습니다.
.list_tap 이전 글 / 다음 글 (각각 , 안에 화살표 아이콘)
.table_bottom 목록 · 글쓰기 */
body.sl-bv .board_view .comment_section:last-child {
display: block; padding: 0; border-top: 1px solid #e6ecf4;
}
/* 이전·다음 글 — 한 줄에 하나씩, 폭을 가득 씁니다 */
body.sl-bv .board_view .list_tap {
display: block !important; border: 0 !important; border-radius: 0 !important;
background: none !important; margin: 0 !important; padding: 0 !important; width: auto !important;
}
body.sl-bv .board_view .list_tap > a {
display: grid !important; grid-template-columns: 74px minmax(0, 1fr); align-items: center;
gap: 10px; padding: 15px 30px !important; border: 0 !important;
border-bottom: 1px solid #f4f7fb !important; border-radius: 0 !important;
background: #fff !important; font-size: 13.5px !important; font-weight: 600 !important;
color: #46617f !important; transition: .12s; white-space: normal !important;
overflow: visible !important; text-overflow: clip !important;
}
body.sl-bv .board_view .list_tap > a:hover { background: #fffafc !important; color: #c33e6d !important; }
body.sl-bv .board_view .list_tap > a:last-child { border-bottom: 0 !important; }
/* 화살표 자리에 「이전 글 / 다음 글」 이라고 적어 줍니다 */
body.sl-bv .board_view .list_tap > a::before {
content: '이전 글'; font-size: 11.5px; font-weight: 800; color: #93a5bd;
font-family: 'Noto Sans KR', sans-serif;
}
body.sl-bv .board_view .list_tap > a:last-child::before { content: '다음 글'; }
body.sl-bv .board_view .list_tap > a i,
body.sl-bv .board_view .list_tap > a [class*='bt-'] { display: none !important; }
/* 목록·글쓰기 — 가운데 알약 단추로 */
body.sl-bv .board_view .table_bottom {
display: flex !important; align-items: center; justify-content: center; gap: 8px;
padding: 16px 20px !important; border-top: 1px solid #e6ecf4; background: #fbfdff;
float: none !important;
}
body.sl-bv .board_view .table_bottom .btn {
float: none !important; border-radius: 100px !important; padding: 10px 24px !important;
font-size: 13px !important; font-weight: 750 !important; line-height: 1.4 !important;
background: #fff !important; color: #46617f !important; border: 1px solid #e6ecf4 !important;
}
/* 아임웹에 `….widget.board .comment_section .btn-primary.float_l` 이라는
아주 센 !important 검정 규칙이 있습니다. 딱지(class)를 더 붙여 이깁니다. */
body.sl-bv .board_view .table_bottom.action-area .btn.btn-primary.btn-sm.float_l {
background: #fff !important; background-color: #fff !important;
color: #46617f !important; border: 1px solid #e6ecf4 !important;
}
body.sl-bv .board_view .table_bottom.action-area .btn.btn-primary.btn-sm.float_l:hover {
background-color: #fffafc !important; border-color: #f2b8cd !important; color: #c33e6d !important;
}
/* 글쓰기는 눈에 띄게 분홍으로 */
body.sl-bv .board_view .table_bottom.action-area .btn.btn-primary.btn-sm.float_r {
background: #e85a8a !important; background-color: #e85a8a !important;
border: 1px solid #e85a8a !important; color: #fff !important;
}
body.sl-bv .board_view .table_bottom.action-area .btn.btn-primary.btn-sm.float_r:hover {
background: #c33e6d !important; border-color: #c33e6d !important; color: #fff !important;
}
/* ── 휴대폰 (390px 기준) ──
게시판 목록은 「제목 · 글쓴이 · 작성일 · 조회」 네 칸입니다.
390px 에서는 제목만 남기고 나머지는 제목 아래 작은 글씨로 내립니다. */
@media (max-width: 520px) {
.sl-bd .sl-head { display: none; }
.sl-bd .sl-row { grid-template-columns: 1fr; gap: 4px; padding: 13px 14px; }
.sl-bd .sl-row .sl-tt { font-size: 13.5px; }
.sl-bd .sl-row .sl-w,
.sl-bd .sl-row .sl-d,
.sl-bd .sl-row .sl-v { display: inline; font-size: 11px; color: #9db0c6; text-align: left; }
.sl-bd .sl-row .sl-w::after { content: ' · '; }
.sl-bd .sl-row .sl-d::after { content: ' · 조회 '; }
.sl-bdtop { flex-wrap: wrap; gap: 8px; padding: 14px; }
.sl-bdtt h2 { font-size: 17px; }
.sl-bd-fold .sl-fq .q { padding: 13px 14px; font-size: 13px; }
.sl-bd-fold .sl-fq .sl-cat { display: none; }
.sl-cats { padding: 10px 12px; gap: 5px; }
.sl-cats button { font-size: 11.5px; padding: 5px 10px; }
.sl-bd-line .sl-tt .t { white-space: normal; overflow: visible; text-overflow: clip; }
.sl-bd-fold .sl-fq .a { padding: 0 14px 14px; font-size: 13px; }
/* 글 보기 */
body.sl-bv .board_view .view_tit { font-size: 17px !important; line-height: 1.45 !important; }
body.sl-bv .board_view .board_txt_area { padding: 16px 14px !important; font-size: 14px !important; }
body.sl-bv .board_view .list_tap > a {
grid-template-columns: 58px minmax(0, 1fr) !important; padding: 12px 14px !important;
font-size: 12.5px !important; }
body.sl-bv .board_view .table_bottom { padding: 14px !important; }
}
/* 비밀글 자물쇠 — 눌러 보시기 전에 「비밀번호가 필요하다」는 것을 알 수 있게 */
.sl-bd .sl-lock {
flex: none; font-size: 11.5px; line-height: 1; opacity: .75;
margin-right: 1px; }
/* ═══════════════════════════════════════════════════════════════
글쓰기 화면의 사진 서랍 (board.js writeDrawer) — 편집기 오른쪽에 떠 있는 판
═══════════════════════════════════════════════════════════════ */
.sl-dw { position: fixed; right: 16px; top: 64px; width: 300px; max-height: calc(100vh - 80px); z-index: 9000;
background: #fff; border: 1.5px solid #f2b8cd; border-radius: 16px; box-shadow: 0 14px 36px rgba(232, 90, 138, .16);
display: flex; flex-direction: column; font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; color: #1d3a5e; }
.sl-dw .hd { display: flex; align-items: center; gap: 8px; padding: 11px 12px 9px 14px; border-bottom: 1px solid #e6ecf4; }
.sl-dw .hd b { font-size: 14px; white-space: nowrap; }
.sl-dw .hd .n { font-size: 12px; color: #93a5bd; flex: 1; }
.sl-dw .hd .tg { border: 0; background: #f4f7fb; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; color: #46617f; padding: 0; }
.sl-dw .bd { padding: 10px 12px 12px; overflow: auto; }
.sl-dw.min { width: auto; }
.sl-dw.min .bd { display: none; }
.sl-dw.min .hd { border-bottom: 0; }
.sl-dw.min .hd .tg { transform: rotate(180deg); }
.sl-dw .where { font-size: 12px; color: #46617f; margin-bottom: 8px; }
.sl-dw .where b { color: #c33e6d; }
.sl-dw .drop { display: block; border: 2px dashed #f2b8cd; border-radius: 10px; padding: 12px 10px; text-align: center; color: #c33e6d;
font-size: 12.5px; font-weight: 700; cursor: pointer; background: #fffafc; line-height: 1.4; }
.sl-dw .drop small { display: block; font-weight: 400; color: #93a5bd; margin-top: 3px; font-size: 11px; }
.sl-dw .drop.over { background: #fdeef3; border-color: #e85a8a; }
.sl-dw .drop input { display: none; }
.sl-dw .tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 8px; }
.sl-dw .it { position: relative; border: 1px solid #e6ecf4; border-radius: 8px; overflow: hidden; background: #f7f9fc; cursor: grab; aspect-ratio: 1 / 1; }
.sl-dw .it img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sl-dw .it.sel { outline: 2px solid #e85a8a; outline-offset: -2px; }
.sl-dw .it .ck { position: absolute; left: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #f2b8cd;
font-size: 11px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
.sl-dw .it.sel .ck { background: #e85a8a; border-color: #e85a8a; }
.sl-dw .it .no { position: absolute; right: 5px; top: 5px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 100px; }
.sl-dw .it.drag { opacity: .4; }
.sl-dw .it.tgt { box-shadow: inset 0 0 0 3px #e85a8a; }
.sl-dw .empty { grid-column: 1 / -1; font-size: 12px; color: #93a5bd; text-align: center; padding: 10px 0; }
.sl-dw .act { display: flex; flex-direction: column; gap: 5px; }
.sl-dw .act button { border: 1px solid #f2b8cd; background: #fff; color: #c33e6d; border-radius: 8px; padding: 7px 10px;
font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: left; line-height: 1.4; }
.sl-dw .act button:hover { background: #fdeef3; }
.sl-dw .act button:disabled { opacity: .4; cursor: default; background: #fff; }
.sl-dw .act button.armed { background: #c33e6d; color: #fff; border-color: #c33e6d; }
.sl-dw .tip { font-size: 11px; color: #93a5bd; margin-top: 8px; line-height: 1.5; }
.sl-dw-mark { position: fixed; height: 0; border-top: 2px dashed #e85a8a; z-index: 8999; pointer-events: none; display: none; }
.sl-dw-mark span { position: absolute; left: 0; top: -9px; background: #e85a8a; color: #fff; font-size: 10.5px; padding: 1px 8px; border-radius: 100px; line-height: 1.5; white-space: nowrap; }
.sl-dw-mark.on { display: block; }
.sl-dw-hi { position: fixed; border: 3px solid #e85a8a; border-radius: 8px; z-index: 8999; pointer-events: none; display: none; box-shadow: 0 0 0 4px rgba(232, 90, 138, .25); }
.sl-dw-hi.on { display: block; }
@media (max-width: 1100px) { .sl-dw { top: auto; bottom: 12px; right: 12px; max-height: 60vh; } }