/* board.css (v91, 2026-10-26): 게시판 탭, 끌어서 순서 바꾸기, 체크리스트 편의, 추적과 AI 제외 표시, 날짜 투표 (board.js) */

/* 탭 줄: 사람 칩 아래. 휴대폰은 옆으로 밀기 */
.btab{display:flex;align-items:flex-end;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--v-line);margin-top:-4px}
.btab::-webkit-scrollbar{display:none}
.btab-t{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--v-ink3);white-space:nowrap;cursor:pointer}
.btab-t[aria-selected="true"]{color:var(--v-ink);font-weight:700;border-bottom-color:var(--v-ink)}
.btab-t i{flex:none;width:7px;height:7px;border-radius:999px}
.btab-t small{font-size:12px;font-weight:500;color:var(--v-ink4)}
.btab-t small:empty{display:none}
.btab-a{flex:none;align-self:center;display:inline-flex;align-items:center;gap:3px;height:32px;margin-left:6px;padding:0 12px 0 9px;border:0;border-radius:999px;background:var(--v-fill);font:inherit;font-size:13px;font-weight:600;color:var(--v-ink2);cursor:pointer;white-space:nowrap}
@media (max-width:767px){.p3s-bm .btab{margin-left:calc(-1 * var(--gut,20px));margin-right:calc(-1 * var(--gut,20px));padding:0 var(--gut,20px)}.btab-t{padding:0 10px}}
/* 휴대폰: 유형 메뉴가 빠져 새 글 단추만 오른쪽에 */
.p3s-bm .p3s-bar>.p3s-newb{margin-left:auto}

/* 카드 표시: 추적, AI 제외 */
.bf4{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;font-style:normal;font-size:11px;font-weight:700;white-space:nowrap}
.bf4.tr{background:var(--v-blue-bg);color:var(--v-blue)}
.bf4.na{background:var(--v-card);color:var(--v-ink3);box-shadow:inset 0 0 0 1px var(--v-line)}
.p3s-todo .l2 .bf4.na{background:var(--v-fill);box-shadow:none}
.p3s-mm .bf4{margin-left:2px}

/* 칸 머리의 순서 단추 */
.bh4{display:inline-flex;align-items:center;gap:14px;flex:none}
.bo4{font-size:14px}

/* 끌기 손잡이 */
.bsort-h{flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:32px;margin-right:-6px;border-radius:8px;color:var(--v-ink4);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.bsort-h::after{content:"";position:absolute;inset:-6px -4px}
.bsort-h:active{cursor:grabbing;color:var(--v-ink2)}
.bsort-h:focus-visible{outline:2px solid var(--v-blue);outline-offset:1px}
.bgrip{display:block}
@media (hover:hover){.bsort-h{opacity:.55}li:hover>.bsort-h,.bl-er:hover>.bsort-h,.bts-r:hover>.bsort-h,.bord-r:hover>.bsort-h,.bsort-h:focus-visible{opacity:1}}

/* 게시판 카드의 체크리스트 */
.p3s-list li>span:not(.bsort-h){flex:1;min-width:0}
.p3s-list li.drag,.bl-er.drag,.bts-r.drag,.bord-r.drag{background:var(--v-card);border-radius:12px;box-shadow:0 6px 18px rgba(25,31,40,.16)}
.p3s-list li.drag{padding:0 8px;margin:0 -8px}
.p3s-list ul.dragging{user-select:none;-webkit-user-select:none}
.bl4-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.bl4-ft .lnk{display:inline-flex;align-items:center;gap:4px;padding:6px 0;font-size:14px}
.bl4-plus{color:var(--v-ink2)}
.bl4-clr{color:var(--v-ink3)}
.bl4-add{display:flex;align-items:center;gap:10px}
.bl4-add input{flex:1;min-width:0;height:40px;padding:0 12px;border:0;border-radius:10px;background:var(--v-card);font:inherit;font-size:15px;color:var(--v-ink)}
.bl4-add input:focus{outline:2px solid var(--v-blue);outline-offset:0}
.bl4-add .lnk{flex:none;font-size:14px;font-weight:700}

/* 글 시트: 항목 줄의 손잡이, 탭 고르기 */
.bl-er .bsort-h{margin-left:-4px}
.bl-er.drag{padding:0 8px;margin:0 -8px}
.btp{flex-wrap:wrap}
.btp-d{flex:none;width:8px;height:8px;border-radius:999px;display:block}
.btp-new{color:var(--v-ink2)}
.btp-in{display:inline-flex;align-items:center;gap:8px}
.btp-in input{width:140px;height:34px;padding:0 10px;border-radius:8px}

/* 탭 편집 시트 */
.bts-l{display:flex;flex-direction:column;gap:6px}
.bts-r{display:flex;align-items:flex-start;gap:8px;padding:8px 0}
.bts-r>.bsort-h{margin-top:6px}
.bts-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.bts-m input[type=text]{width:100%;height:44px}
.bts-c{display:flex;flex-wrap:wrap;gap:8px}
.bts-sw{position:relative;width:26px;height:26px;padding:0;border:0;border-radius:999px;cursor:pointer}
.bts-sw.none{background:var(--v-card);box-shadow:inset 0 0 0 1.5px var(--v-g0)}
.bts-sw.none::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:1.5px;background:var(--v-g0);transform:rotate(-45deg)}
.bts-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--v-card),0 0 0 4px var(--v-ink)}
.bts-sw::after{content:"";position:absolute;inset:-6px}
.bts-sw .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bts-n{font-size:12px;color:var(--v-ink3)}
.bts-r>.bl-x{margin-top:8px}
.bts-xsp{flex:none;width:32px}
.bts-ask{margin:4px 0;padding:14px;border-radius:14px;background:var(--v-coral-bg)}
.bts-ask p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--v-ink)}
.bts-ab{display:flex;flex-wrap:wrap;gap:8px}
.bts-gone{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--v-coral-t)}

/* 칸 안 순서 시트 */
.bord-l{display:flex;flex-direction:column}
.bord-r{display:flex;align-items:center;gap:10px;min-height:56px;padding:4px 0;border-bottom:1px solid var(--v-line)}
.bord-r .bsort-h{margin:0}
.bord-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bord-t b{font-size:15px;font-weight:700;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bord-t small{font-size:12px;color:var(--v-ink3)}

/* 날짜 투표 */
.bv4-mk{width:100%;justify-content:center;margin-top:2px}
.bv4-ev{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:13px;font-weight:600;color:var(--v-blue)}
.bv-ed .bdt{flex:1;min-width:0}
.bv-ed .bl-er{padding:3px 0}

/* ===== v92 (board2.js): 하위 항목, 복제, 장보기 목록, 표, 파일 ===== */
/* 하위 항목: 한 단계 들여쓰기. 끄는 동안 오른쪽, 왼쪽 표시 */
.p3s-list li.sub{padding-left:30px}
.bl-er.sub{padding-left:30px}
.p3s-list li.drag.ind,.bl-er.drag.ind{box-shadow:inset 3px 0 0 var(--v-blue),0 6px 18px rgba(25,31,40,.16)}
.p3s-list li.drag.outd,.bl-er.drag.outd{box-shadow:inset -3px 0 0 var(--v-blue),0 6px 18px rgba(25,31,40,.16)}

/* 복제 묻기 */
.be-dup .seg{flex:1 1 auto}
@media (max-width:767px){.sh-f>.be-foot>.btn.bdup{flex:0 0 auto;padding:0 18px}}

/* 카드 머리의 개수 (파일, 표: 굵지 않게) */
.p3s-list .cnt.lt{font-size:13px;font-weight:500;color:var(--v-ink3)}

/* 장보기 목록 카드 */
.bsh-gs{display:flex;flex-direction:column;gap:8px}
.bsh-g{display:flex;flex-direction:column}
.bsh-gh{padding:4px 0 2px;font-size:12px;font-weight:600;color:var(--v-ink3)}
.bsh-empty{margin:0;font-size:14px;color:var(--v-ink3)}
.bsh-got{display:flex;flex-direction:column;gap:8px}
.bsh-got .p3s-fold{font-size:15px}
.bsh-end{align-self:stretch;background:var(--v-card)}
.bsh-fq{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bsh-fql{flex:1 1 100%;font-size:12px;font-weight:600;color:var(--v-ink3)}
.bsh-fq .bw-c{display:inline-flex;align-items:center;gap:3px}
.bsh-ed .bsh-cs{flex:none;width:104px;height:36px;padding:0 6px 0 10px;border-radius:10px;font-size:13px}
.bsh-ed .bsh-fq{padding:8px 0 4px}
@media (max-width:1099px){.bsh-ed .bsh-cs{width:112px}}
.bse-p{margin:4px 0 10px;font-size:15px;line-height:1.55;color:var(--v-ink)}

/* 표 카드: 칸이 많으면 옆으로 밀기 */
.btb-w{max-width:100%;overflow-x:auto;border-radius:12px;background:var(--v-card)}
.btb-w:focus-visible{outline:2px solid var(--v-blue);outline-offset:1px}
.btb{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4}
.btb th,.btb td{padding:9px 12px;text-align:left;vertical-align:top;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.btb td{border-top:1px solid var(--v-line);color:var(--v-ink)}
.btb th{padding:0}
.btb th button{display:inline-flex;align-items:center;gap:3px;width:100%;min-height:36px;padding:0 12px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--v-ink3);text-align:left;cursor:pointer;white-space:nowrap}
.btb th[aria-sort="ascending"] button,.btb th[aria-sort="descending"] button{color:var(--v-ink)}
.btb .num{text-align:right}
.btb th.num button{justify-content:flex-end}
.btb-none{color:var(--v-ink3)!important}
/* 표 편집 */
.bte-w{max-width:100%;overflow-x:auto;margin:2px 0}
.bte{border-collapse:separate;border-spacing:0;min-width:100%}
.bte th,.bte td{padding:2px 4px;vertical-align:middle}
.bte th input,.bte td input{width:100%;min-width:112px;height:40px;padding:0 8px!important;border:0!important;border-bottom:1px solid var(--line-2)!important;border-radius:0!important;background:none!important;box-shadow:none!important;font:inherit;font-size:15px}
.bte th input{font-weight:700}
.bte input:focus{border-bottom-color:var(--ink)!important;outline:none}
.bte-ch{display:flex;align-items:center;gap:2px}
.bte .bte-g{width:30px;padding:0}
.bte .bte-x{width:36px;padding:0}
.bte tr.drag{background:var(--v-card);box-shadow:0 6px 18px rgba(25,31,40,.16)}
.bte tbody tr:hover .bsort-h{opacity:1}
.bte-add{display:flex;flex-wrap:wrap;gap:4px 18px}

/* 파일 카드와 편집 */
.bfl{display:flex;flex-direction:column;gap:6px}
.bfl-r{display:flex;align-items:center;gap:6px}
.bfl-f{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px 6px 6px;border:0;border-radius:12px;background:var(--v-card);font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.bfl-ic{flex:none;width:36px;height:36px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bfl-ic.pdf{background:var(--v-coral-bg);color:var(--v-coral-t);font-size:11px;font-weight:700;letter-spacing:.02em}
.bfl-ic.img{background:var(--v-blue-bg)}
.bfl-ic.img img{width:100%;height:100%;object-fit:cover;display:block}
.bfl-n{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfl-f small{flex:none;font-size:12px;color:var(--v-ink3)}
.bfl-busy{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;background:var(--v-fill);font-size:13px;color:var(--v-ink3)}
.sheet .bfl-f{background:var(--v-fill)}
.bfe{display:flex;flex-direction:column;gap:8px;padding:4px 0 8px;border-bottom:1px solid var(--line-2)}
.bfe-ai{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.bfi{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:12px;background:var(--v-card)}
.sheet .bfi{background:var(--v-fill)}
.bfi-sum{margin:0;font-size:14.5px;line-height:1.6;color:var(--v-ink)}
.bfi.sm .bfi-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bfi-d{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bfi-d li{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;border-top:1px solid var(--v-line)}
.bfi-dt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bfi-dt b{font-size:14px;font-weight:700}
.bfi-dt span{font-size:13px;color:var(--v-ink2)}
.bfi-ok{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--v-blue)}
.bfi-more{margin:0;font-size:12.5px;color:var(--v-ink3)}
.bfi-p{display:flex;align-items:center;gap:10px;padding-top:8px;border-top:1px solid var(--v-line)}
.bfi-p p{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.5;color:var(--v-ink2)}
.bfi-p p b{font-size:14px;font-weight:700;color:var(--v-ink)}
.bfi.sm .bfi-p p span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bfi-f{display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px solid var(--v-line);font-size:13px;color:var(--v-ink2)}
.bfi-f b{font-size:14px;font-weight:700;color:var(--v-ink)}
.bfi-f ul{margin:0;padding-left:18px;line-height:1.6}
.bfi-by{margin:0;font-size:12px;color:var(--v-ink4)}
.bfi-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bfi-go small{font-size:12.5px;color:var(--v-ink3)}
.bfi-na{margin:0;font-size:13px;color:var(--v-ink3)}
.bfe-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:104px;padding:14px;border:1.5px dashed var(--v-g0);border-radius:14px;background:var(--v-fill);font:inherit;color:var(--v-ink2);cursor:pointer}
.bfe-pick b{font-size:15px;font-weight:700;color:var(--v-ink)}
.bfe-pick small{font-size:12.5px;color:var(--v-ink3);text-align:center}