/* 화면 폭 모드: 기본(1140) / 넓게 / 전체 — body.ws-w-* (기기별 localStorage) */
@media (min-width: 1200px) {
  body.ws-w-wide .content-body .container { max-width: 1560px; }
  body.ws-w-full .content-body .container { max-width: none; }
  body.ws-w-full .content-body { padding-left: 28px; padding-right: 28px; }
}

/* 상단바 화면 메뉴 */
.ws-scr { display: none; }
@media (min-width: 1200px) { .ws-scr { display: block; } }
.ws-scr-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 6px; border-radius: 4px; color: #596882; }
.ws-scr-btn:hover { background: #f5f6fa; color: #0168fa; }
.ws-scr-menu { width: 240px; padding: 8px 0; font-size: 13px; }
.ws-scr-menu h6 { padding: 6px 16px 4px; margin: 0; font-size: 10px; letter-spacing: .5px; color: #8392a5; font-weight: 600; }
.ws-scr-seg { display: flex; gap: 4px; padding: 4px 16px 10px; }
.ws-scr-seg button { flex: 1; padding: 6px 0; border: 1px solid #e3e7ed; border-radius: 4px; background: #fff; color: #596882; font-size: 12px; }
.ws-scr-seg button.on { border-color: #0168fa; background: #e5f0ff; color: #0168fa; font-weight: 600; }
.ws-scr-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; border: 0; background: none; color: #001737; text-align: left; }
.ws-scr-row:hover { background: #f5f6fa; }
.ws-scr-row i { width: 16px; color: #8392a5; text-align: center; }
.ws-scr-row small { margin-left: auto; color: #8392a5; font-size: 11px; }
.ws-scr-row .sw { margin-left: auto; width: 30px; height: 17px; border-radius: 9px; background: #c0ccda; position: relative; transition: background .15s; }
.ws-scr-row .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .15s; }
.ws-scr-row.on .sw { background: #0168fa; }
.ws-scr-row.on .sw::after { left: 15px; }
.ws-scr-note { padding: 2px 16px 6px 42px; font-size: 11px; color: #8392a5; }

/* 오른쪽 업무 패널 (1600px 이상, 로그인 사용자) */
.ws-rpanel { display: none; }
@media (min-width: 1600px) {
  body.ws-panel-on .ws-rpanel { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: 300px; z-index: 850; background: #fff; border-left: 1px solid rgba(72, 94, 144, .16); }
  body.ws-panel-on .content { margin-right: 300px; }
  body.ws-panel-on .ws-rt-toast { right: 320px; }
}
.ws-rp-head { display: flex; align-items: center; height: 60px; padding: 0 16px; border-bottom: 1px solid rgba(72, 94, 144, .16); flex-shrink: 0; }
.ws-rp-head b { font-size: 14px; color: #001737; }
.ws-rp-head span { margin-left: 8px; font-size: 12px; color: #8392a5; }
.ws-rp-head button { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 4px; background: none; color: #8392a5; }
.ws-rp-head button:hover { background: #f5f6fa; color: #001737; }
.ws-rp-body { flex: 1; overflow-y: auto; padding: 6px 0 20px; }
.ws-rp-sec { padding: 12px 16px 4px; }
.ws-rp-sec h6 { display: flex; align-items: center; margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .3px; color: #8392a5; }
.ws-rp-sec h6 a { margin-left: auto; font-weight: 400; color: #8392a5; }
.ws-rp-sec h6 .n { margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #dc3545; color: #fff; font-size: 10px; line-height: 16px; }
.ws-rp-it { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 4px; color: #001737; font-size: 13px; min-width: 0; }
a.ws-rp-it:hover { background: #f5f6fa; color: #001737; text-decoration: none; }
.ws-rp-it .t { flex: 1; min-width: 0; }
.ws-rp-it .t div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ws-rp-it .t small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8392a5; font-size: 11px; }
.ws-rp-it.unread .t div { font-weight: 600; }
.ws-rp-av { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #e5f0ff; color: #0168fa; font-size: 12px; font-weight: 600; }
.ws-rp-av i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #c0ccda; }
.ws-rp-av i.on { background: #10b759; }
.ws-rp-av i.done { background: #0168fa; }
.ws-rp-badge { flex-shrink: 0; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #dc3545; color: #fff; font-size: 10px; line-height: 18px; text-align: center; }
.ws-rp-ic { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #f5f6fa; color: #596882; font-size: 12px; }
.ws-rp-ev { flex-shrink: 0; width: 42px; text-align: center; font-size: 11px; color: #8392a5; line-height: 1.2; }
.ws-rp-ev b { display: block; font-size: 13px; color: #001737; }
.ws-rp-empty { padding: 6px 0; font-size: 12px; color: #8392a5; }
.ws-rp-me { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px; background: #f5f6fa; font-size: 12px; color: #596882; }
.ws-rp-me b { color: #001737; }

/* 집중 모드: 상단바·왼쪽 메뉴·오른쪽 패널 숨김 */
body.ws-focus .aside, body.ws-focus .content > .content-header, body.ws-focus .ws-rpanel, body.ws-focus .aside-backdrop { display: none !important; }
body.ws-focus .content { margin-left: 0 !important; margin-right: 0 !important; }
body.ws-focus .content-body .container { max-width: 1200px; }
body.ws-focus.ws-w-full .content-body .container { max-width: none; }
.ws-focus-exit { display: none; }
body.ws-focus .ws-focus-exit { display: inline-flex; align-items: center; gap: 6px; position: fixed; top: 12px; right: 16px; z-index: 1000; padding: 6px 12px; border: 1px solid #e3e7ed; border-radius: 16px; background: rgba(255, 255, 255, .92); color: #596882; font-size: 12px; box-shadow: 0 2px 8px rgba(28, 39, 60, .08); opacity: .5; transition: opacity .2s; }
body.ws-focus .ws-focus-exit:hover { opacity: 1; color: #001737; }

/* 보드: 점 격자 바탕 위에 카드를 격자에 맞춰 자유 배치 (gridstack) */
@media (min-width: 1200px) {
  body.ws-board-wide .content-body .container { max-width: none; }
  body.ws-board-wide .content-body { padding-left: 24px; padding-right: 24px; }
}
.content-body:has(.ws-board) { background-image: radial-gradient(rgba(72, 94, 144, .16) 1px, transparent 1px); background-size: 20px 20px; }
body.ws-board-editing .content-body { background-image: radial-gradient(rgba(1, 104, 250, .28) 1.2px, transparent 1.2px); }
.ws-board { margin: 0 -6px; }
@media (min-width: 992px) { .ws-board:not(.ws-board-ready) { visibility: hidden; } }
.ws-board .grid-stack-item-content { display: flex; flex-direction: column; overflow: hidden !important; }
.ws-board .grid-stack-item-content > .card { flex: 1; min-height: 0; height: auto !important; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(28, 39, 60, .04), 0 2px 8px rgba(28, 39, 60, .04); }
.ws-board .grid-stack-item-content > .card > .ws-list, .ws-board .grid-stack-item-content > .card > .ws-week, .ws-board .grid-stack-item-content > .card > .ws-today { flex: 1; min-height: 0; overflow-y: auto; }
.ws-board .grid-stack-item-content > .card > .card-header { flex-shrink: 0; }
.ws-board .ws-wg-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; }
.ws-board .ws-wg-cols > .ws-empty { grid-column: 1 / -1; }
.ws-board .ws-cal-grid { flex: 1; min-height: 0; grid-template-rows: auto; grid-auto-rows: minmax(56px, 1fr); }
.ws-board .ws-cal-day { min-height: 0; }
.ws-bd-bar { display: none; }
.ws-board.editing .grid-stack-item-content { outline: 1px dashed #8fb8f6; outline-offset: -1px; border-radius: 6px; background: rgba(229, 240, 255, .55); }
.ws-board.editing .grid-stack-item-content > .card { pointer-events: none; opacity: .92; }
.ws-board.editing .ws-bd-bar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; height: 30px; padding: 0 8px; font-size: 12px; color: #001737; cursor: move; }
.ws-bd-bar i { color: #8392a5; }
.ws-bd-bar b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.ws-bd-hide, .ws-bd-btn { width: 26px; height: 22px; border: 1px solid #c0ccda; border-radius: 4px; background: #fff; color: #596882; font-size: 11px; cursor: pointer; }
.ws-bd-hide:hover { color: #dc3545; border-color: #dc3545; }
.ws-bd-btn:hover { color: #0168fa; border-color: #0168fa; }
.ws-board .grid-stack-item.off { display: none; }
.ws-bd-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ws-bd-tools [data-bd=reset], .ws-bd-tools [data-bd=done], .ws-bd-tray { display: none; }
.ws-bd-tools.editing [data-bd=edit] { display: none; }
.ws-bd-tools.editing [data-bd=reset], .ws-bd-tools.editing [data-bd=done] { display: inline-block; }
.ws-bd-tools.editing .ws-bd-tray { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ws-board-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ws-board-list > .grid-stack-item { position: static !important; width: auto !important; height: auto !important; min-height: 0 !important; transform: none !important; inset: auto !important; }
.ws-board-list > .grid-stack-item > .grid-stack-item-content { position: static !important; inset: auto !important; overflow: visible !important; }
@media (max-width: 991px) { .ws-bd-tools { display: none; } }

/* 소개 보드 카드 */
.ws-board .grid-stack-item-content > .card { overflow-y: auto; }
.ws-board .ws-hero { overflow: hidden !important; border: 0 !important; background: transparent; box-shadow: none !important; }
.ws-board .ws-hero #outer { --max-width: none; }
.ws-board:not(.ws-board-list) .ws-hero > div { flex: 1; min-height: 0; height: 100%; }
.ws-board:not(.ws-board-list) .ws-hero > div > a { display: block; height: 100%; }
.ws-board:not(.ws-board-list) .ws-hero #outer, .ws-board:not(.ws-board-list) .ws-hero .inner { height: 100%; padding-bottom: 0; }
.ws-board:not(.ws-board-list) .ws-hero .inner { container-type: size; }
.ws-board:not(.ws-board-list) .ws-hero .wrapper { position: absolute; inset: 0; padding-bottom: 0; }
/* Keeps the original crop (iframe twice the visible height, ratio 42.38%) so Vimeo's control bar stays hidden at any card size */
.ws-board:not(.ws-board-list) .ws-hero iframe { top: 50%; left: 50%; width: max(100cqw, 235.96cqh); height: max(84.76cqw, 200cqh); transform: translate(-50%, -50%); }
.ws-board:not(.ws-board-list) .ws-hero img { height: 100% !important; width: 100%; object-fit: cover; }
.ws-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px; }
.ws-banners img { width: 100%; border-radius: 4px; display: block; }
.ws-sc { border: 1px solid rgba(72, 94, 144, .16); }
.ws-sc-img { height: 45%; min-height: 120px; flex-shrink: 0; background: #f5f6fa center / cover no-repeat; }
.ws-sc .card-body { display: flex; flex-direction: column; }
.ws-sc-title { font-size: 17px; font-weight: 700; color: #001737; margin-bottom: 8px; }
.ws-sc-body { font-size: 13px; line-height: 1.7; color: #384f6b; white-space: pre-wrap; }
.ws-sc-link { align-self: flex-start; margin-top: auto; background: #0168fa; color: #fff; }
.ws-sc-link:hover { background: #0158d4; color: #fff; }
.ws-sc .ws-sc-body + .ws-sc-link, .ws-sc .ws-sc-title + .ws-sc-link { margin-top: 14px; }
.ws-sc-note { background: #fff8c5; border-color: #f0e08a; box-shadow: 2px 4px 10px rgba(120, 100, 0, .12) !important; }
.ws-sc-note .ws-sc-title { font-family: inherit; }
.ws-sc-blue { background: #0168fa; border-color: #0168fa; }
.ws-sc-blue .ws-sc-title, .ws-sc-blue .ws-sc-body, .ws-sc-blue .ws-sc-body a { color: #fff; }
.ws-sc-blue .ws-sc-link { background: #fff; color: #0168fa; }
.ws-sc-dark { background: #1c273c; border-color: #1c273c; }
.ws-sc-dark .ws-sc-title { color: #fff; }
.ws-sc-dark .ws-sc-body, .ws-sc-dark .ws-sc-body a { color: #c0ccda; }
.ws-bd-add { white-space: nowrap; }

/* 프로젝트 칸반 */
.ws-kanban { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.ws-kcol { background: #eef1f7; border-radius: 8px; padding: 8px; min-height: 160px; transition: background .15s, box-shadow .15s; }
.ws-kcol.over { background: #e1ebff; box-shadow: inset 0 0 0 2px #0168fa; }
.ws-khead { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #1c273c; padding: 4px 4px 10px; }
.ws-kcount { margin-left: auto; font-size: 11px; font-weight: 500; color: #8392a5; background: #fff; border-radius: 10px; padding: 1px 8px; }
.ws-kdot { width: 8px; height: 8px; border-radius: 50%; background: #8392a5; }
.ws-kdot.k1 { background: #00b8d4; } .ws-kdot.k2 { background: #7c4dff; } .ws-kdot.k3 { background: #0168fa; } .ws-kdot.k4 { background: #fd7e14; } .ws-kdot.k5 { background: #10b759; }
.ws-kcards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; max-height: calc(100vh - 260px); overflow-y: auto; margin-right: -4px; padding-right: 4px; }
.ws-kcard { display: block; background: #fff; border: 1px solid rgba(72, 94, 144, .16); border-radius: 6px; padding: 10px 12px; color: inherit; box-shadow: 0 1px 2px rgba(28, 39, 60, .05); }
.ws-kcard[draggable="true"] { cursor: grab; }
.ws-kcard:hover { border-color: rgba(1, 104, 250, .45); color: inherit; }
.ws-kcard.dragging { opacity: .45; }
.ws-kcard b { display: block; font-size: 14px; font-weight: 600; color: #001737; margin-top: 4px; line-height: 1.35; }
.ws-kcard .ws-client { font-size: 12px; color: #8392a5; }
.ws-kcard .ws-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #8392a5; margin-top: 8px; }
@media (max-width: 991.98px) { .ws-kanban { grid-template-columns: repeat(6, 78vw); scroll-snap-type: x mandatory; } .ws-kcol { scroll-snap-align: start; } }

/* 메시지 3단 */
@media (min-width: 768px) {
  .ws-msg-main { height: calc(100vh - 200px); min-height: 480px; }
  .ws-conv { max-height: calc(100vh - 262px); min-height: 418px; }
}
.ws-msg-info { border-left: 1px solid rgba(72, 94, 144, .16); background: #fff; height: calc(100vh - 200px); min-height: 480px; overflow-y: auto; }
.ws-mi-who { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 24px 16px 16px; text-align: center; border-bottom: 1px solid rgba(72, 94, 144, .1); }
.ws-mi-who .ws-avatar.lg { width: 56px; height: 56px; font-size: 22px; margin-bottom: 8px; }
.ws-mi-who b { font-size: 15px; color: #001737; }
.ws-msg-info .ws-sub { font-size: 11px; color: #8392a5; font-weight: 400; }
.ws-mi-sec { padding: 14px 16px; border-bottom: 1px solid rgba(72, 94, 144, .1); }
.ws-mi-sec h6 { font-size: 12px; font-weight: 600; color: #1c273c; margin-bottom: 8px; display: flex; gap: 6px; align-items: baseline; }
.ws-mi-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: #384f6b; min-width: 0; }
.ws-mi-line:hover { color: #0168fa; }
.ws-mi-line i { width: 14px; color: #8392a5; text-align: center; }
.ws-sc-sub { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8392a5; margin-bottom: 2px; }
.ws-sc-blue .ws-sc-sub, .ws-sc-dark .ws-sc-sub { color: rgba(255, 255, 255, .65); }
.ws-sc-imgonly { border: 0; }
.ws-sc-imgonly .ws-sc-img { height: 100%; min-height: 160px; border-radius: inherit; }
.ws-board .grid-stack-item-content > .ws-sc-clear, .ws-sc-clear { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.ws-sc-clear .ws-sc-img { border-radius: 6px; }
body.ws-board-editing .ws-sc-clear { outline: 1px dashed rgba(1, 104, 250, .45); }
.ws-sc-imgrow { display: flex; gap: 10px; align-items: flex-start; }
.ws-sc-prev { display: none; width: 72px; height: 54px; flex: none; border-radius: 4px; border: 1px solid rgba(72, 94, 144, .16); background: #f5f6fa center / cover no-repeat; }
.ws-sc-prev.on { display: block; }

/* 내용 높이에 맞추는 카드 (글 목록, 본문, 사이드박스) */
.ws-board .ws-auto > .ws-auto-in { display: flex; flex-direction: column; }
.ws-board .ws-auto > .ws-auto-in > .card { height: auto !important; overflow: visible; box-shadow: 0 1px 2px rgba(28, 39, 60, .04), 0 2px 8px rgba(28, 39, 60, .04); }
.ws-board.editing .ws-auto-in > .card, .ws-board.editing .ws-raw { pointer-events: none; opacity: .92; }
.ws-board .ws-auto { overflow-y: auto !important; }
.ws-raw { background: transparent; }
.ws-raw > .row { margin-left: 0; margin-right: 0; }
.ws-side .card { margin-top: 0 !important; }
.ws-side img { border-radius: 4px; }

.content-body { display: flex; flex-direction: column; }
.content-body > * { flex-shrink: 0; }
.ws-footer { margin-top: auto; padding: 20px 0 4px; border-top: 1px solid #ddd; color: #999; text-align: center; }
.content-body:has(.ws-deny) > div:first-child { flex: 1 0 auto; }
.container:has(> .ws-deny) { display: flex; flex-direction: column; justify-content: center; }