/* BINDER DRIVE · Google Drive(Material 3 · 다크) 구성을 바인더 안에 옮긴 것 (2026-09-18)
   팔레트: 페이지 #131314 · 컨테이너 #1E1F20 · 입력/카드 #282A2C · 선택 #004A77/#C2E7FF · 강조 #A8C7FA · 글자 #E3E3E3/#C4C7C5
   모서리: 컨테이너 16 · 카드 12 · 알약 999 · 대화상자 28. 글자 14px. */
#binder-view.bn-drive-mode .bn-main{overflow:hidden;background:#131314}
#binder-view.bn-drive-mode .bn-dock-wrap{display:none}
.bn-drive-entry em{margin-left:auto;padding:2px 6px;border:1px solid rgba(168,199,250,.32);border-radius:999px;background:rgba(168,199,250,.1);color:#a8c7fa;font:700 var(--bnfs-2xs) var(--font-stack)}
.bn-drive-entry>i:last-child{margin-left:0}
.bn-drive{flex:1;min-height:0;display:flex}
.bn-drive[hidden]{display:none!important}

.bdr,.bn-drive-side{--dr-page:#131314;--dr-surface:#1e1f20;--dr-high:#282a2c;--dr-higher:#333537;--dr-new:#37393b;--dr-text:#e3e3e3;--dr-text2:#c4c7c5;--dr-muted:#8e918f;
  --dr-line:#444746;--dr-line-soft:rgba(68,71,70,.6);--dr-hover:rgba(227,227,227,.08);--dr-press:rgba(227,227,227,.12);--dr-sel:#004a77;--dr-sel-text:#c2e7ff;
  --dr-accent:#a8c7fa;--dr-on-accent:#062e6f;--dr-danger:#f2b8b5;--dr-on-danger:#601410}
.bdr{position:relative;flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);background:var(--dr-page);color:var(--dr-text);
  font:400 14px/20px var(--font-stack);letter-spacing:0;color-scheme:dark}
.bdr.has-rail{grid-template-columns:256px minmax(0,1fr)}
.bdr button{font:inherit;color:inherit;cursor:pointer}
.bdr button:disabled{cursor:default;opacity:.38}
.bdr :is(button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px}
.bdr [hidden]{display:none!important}
.bdr-grow{flex:1}
.bdr-iconbtn{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dr-text2);font-size:20px}
.bdr-iconbtn:hover{background:var(--dr-hover);color:var(--dr-text)}
.bdr-iconbtn:active{background:var(--dr-press)}
.bdr-linkbtn{border:0;background:none;padding:6px 12px;border-radius:20px;color:var(--dr-accent);font-weight:600;white-space:nowrap}
.bdr-linkbtn:hover{background:rgba(168,199,250,.08)}
.bdr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border:0;border-radius:20px;background:var(--dr-high);font-weight:600;white-space:nowrap}
.bdr-btn.is-primary{background:var(--dr-accent);color:var(--dr-on-accent)}
.bdr-btn.is-primary:hover{box-shadow:0 1px 3px 1px rgba(0,0,0,.25);filter:brightness(1.05)}
.bdr-btn.is-danger{background:var(--dr-danger);color:var(--dr-on-danger)}
.bdr-btn.is-text{background:transparent;color:var(--dr-accent);padding:0 12px}
.bdr-btn.is-text:hover{background:rgba(168,199,250,.08)}
.bdr-input{width:100%;height:48px;padding:0 16px;border:1px solid var(--dr-muted);border-radius:4px;background:transparent;color:var(--dr-text);font:inherit;font-size:16px;box-sizing:border-box}
.bdr-input:focus{outline:none;border:2px solid var(--dr-accent);padding:0 15px}

/* ── 레일 ── */
.bdr-rail{display:flex;flex-direction:column;min-height:0;overflow:auto;padding:8px 12px 16px 8px;scrollbar-width:none}
.bdr-brand{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;color:var(--dr-text);font-size:20px;line-height:28px}
.bdr-brand i{font-size:26px;color:var(--dr-accent)}
.bdr-nav{display:flex;flex-direction:column;gap:2px}
.bdr-nav button{display:flex;align-items:center;gap:16px;height:32px;padding:0 12px 0 16px;border:0;border-radius:16px;background:transparent;color:var(--dr-text2);text-align:left;white-space:nowrap}
.bdr-nav button i{font-size:20px}
.bdr-nav button:hover{background:var(--dr-hover);color:var(--dr-text)}
.bdr-nav button.is-on{background:var(--dr-sel);color:var(--dr-sel-text);font-weight:600}
.bdr-nav button.is-drop{outline:2px solid var(--dr-accent);background:rgba(168,199,250,.14)}
.bdr-storage{margin-top:20px;padding:0 16px;display:flex;flex-direction:column;gap:2px;color:var(--dr-text2)}
.bdr-storage-row{display:flex;align-items:center;gap:12px;height:32px;color:var(--dr-text2)}
.bdr-storage-row i{font-size:20px}
.bdr-storage b{font-weight:500;color:var(--dr-text)}
.bdr-storage small{font-size:12px;line-height:16px;color:var(--dr-muted)}

/* ── 바인더 사이드바 안의 드라이브 메뉴 ──
   드라이브를 열면(#binder-view.bn-drive-mode) 사이드바의 페이지 영역(탭 · 트리 · 새 페이지)을 이 메뉴가 대신한다.
   위쪽 바인더 메뉴(작품 홈 · 에이전트 · FOLIO · 드라이브 · 캘린더 · 뽀모도로 · 검색)는 그대로. 아이콘 열은 바인더 메뉴(17px)에 맞춘다. */
.bn-drive-side{display:none}
#binder-view.bn-drive-mode .bn-side :is(.bn-tree-tabs,.bn-tree,.bn-newwrap){display:none!important}
#binder-view.bn-drive-mode .bn-drive-side{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;color:var(--dr-text);font:400 14px/20px var(--font-stack);letter-spacing:0;color-scheme:dark}
.bn-drive-side::-webkit-scrollbar{display:none}
.bn-drive-side button{font:inherit;color:inherit;cursor:pointer}
.bn-drive-side [hidden]{display:none!important}
.bn-drive-side button:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px}
.bn-drive-side .bdr-rail{overflow:visible;padding:6px 8px 16px}
.bn-drive-side .bdr-nav button{height:34px;padding:0 12px 0 9px;gap:12px;border-radius:17px}
.bn-drive-side .bdr-nav button span{overflow:hidden;text-overflow:ellipsis}
.bn-drive-side :is(.bdr-nav button,.bdr-storage-row) i{font-size:18px}
.bn-drive-side .bdr-storage{margin-top:16px;padding:12px 9px 0;border-top:1px solid var(--dr-line-soft)}
.bn-drive-side .bdr-storage-row{gap:12px}

/* ── 본문 ── */
.bdr-main{display:flex;flex-direction:column;min-width:0;min-height:0;padding:0 16px 16px}
.bdr.has-rail .bdr-main{padding-left:0}
.bdr-top{display:flex;align-items:center;gap:8px;height:64px;flex:none}
.bdr-search{flex:1;max-width:720px;height:48px;display:flex;align-items:center;gap:8px;padding:0 4px 0 16px;border-radius:24px;background:var(--dr-high);color:var(--dr-text2);transition:background .15s,box-shadow .15s}
.bdr-search>i{font-size:20px}
.bdr-search:focus-within{background:var(--dr-surface);box-shadow:0 1px 3px rgba(0,0,0,.4),0 4px 8px 3px rgba(0,0,0,.2)}
.bdr-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--dr-text);font:inherit;font-size:16px;outline:none}
.bdr-search input::-webkit-search-cancel-button{display:none}
.bdr-card{position:relative;flex:1;min-height:0;display:flex;border-radius:16px;background:var(--dr-surface);overflow:hidden}
.bdr-cardmain{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;container:bdrmain/inline-size}
.bdr-head{display:flex;align-items:center;gap:8px;min-height:64px;padding:8px 12px 0 24px}
.bdr-title{flex:1;min-width:0}
.bdr-h1{margin:0;font-size:22px;line-height:28px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdr-crumbs{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden}
.bdr-crumb{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;border-radius:20px;background:transparent;color:var(--dr-text2);font-size:22px;line-height:28px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdr-crumb:hover{background:var(--dr-hover);color:var(--dr-text)}
.bdr-crumb.is-last{color:var(--dr-text);flex-shrink:0;max-width:60%}
.bdr-crumb i{font-size:18px}
.bdr-crumb.is-drop{outline:2px solid var(--dr-accent);background:rgba(168,199,250,.14)}
.bdr-crumb-sep{flex:none;color:var(--dr-muted);font-size:16px}
.bdr-head-tools{display:flex;align-items:center;gap:8px}
.bdr-seg{display:inline-flex;height:32px;border:1px solid var(--dr-muted);border-radius:16px;overflow:hidden}
.bdr-seg button{display:grid;place-items:center;width:48px;border:0;background:transparent;color:var(--dr-text2);font-size:18px}
.bdr-seg button+button{border-left:1px solid var(--dr-muted)}
.bdr-seg button.is-on{background:var(--dr-sel);color:var(--dr-sel-text)}
.bdr-iconbtn.is-on{background:var(--dr-sel);color:var(--dr-sel-text)}
.bdr-bar{min-height:48px;display:flex;align-items:center;padding:4px 16px 8px 24px}
.bdr-chips{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bdr-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 16px;border:1px solid var(--dr-muted);border-radius:8px;background:transparent;color:var(--dr-text2);font-weight:500}
.bdr-chip:hover{background:var(--dr-hover)}
.bdr-chip.is-on{padding-left:8px;border-color:transparent;background:var(--dr-sel);color:var(--dr-sel-text)}
.bdr-chip i{font-size:18px}
.bdr-sortchip{padding:0 12px}
.bdr-selbar{flex:1;display:flex;align-items:center;gap:2px;height:40px;padding:0 4px;border-radius:24px;background:var(--dr-high)}
.bdr-selbar .bdr-iconbtn{width:36px;height:36px;font-size:20px}
.bdr-selcount{margin:0 12px 0 4px;font-weight:500;white-space:nowrap}
.bdr-note{display:flex;align-items:center;gap:12px;margin:0 16px 8px 24px;padding:8px 8px 8px 16px;border-radius:12px;background:var(--dr-high);color:var(--dr-text2)}
.bdr-note>i{font-size:20px;color:var(--dr-accent)}
.bdr-note>span{flex:1}
.bdr-body{position:relative;flex:1;min-height:0;overflow:auto;padding:0 16px 96px;outline:none;scrollbar-width:thin;scrollbar-color:#444746 transparent;user-select:none}
.bdr-body:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(168,199,250,.35)}

/* ── 목록 · 행마다 자체 그리드(드래그 원본이 되려면 레이아웃 상자가 있어야 한다 — display:contents 금지) ── */
.bdr-list{--cols:minmax(220px,1fr) 190px 190px 120px 200px;display:flex;flex-direction:column}
.bdr-list[data-cols="trash"]{--cols:minmax(220px,1fr) 170px 200px 120px 120px}
.bdr-list[data-cols="located"]{--cols:minmax(220px,1fr) 190px 200px 120px 200px}
.bdr-lh,.bdr-row{display:grid;grid-template-columns:var(--cols);align-items:center}
.bdr-lh{position:sticky;top:0;z-index:2;height:48px;background:var(--dr-surface);border-bottom:1px solid var(--dr-line)}
.bdr-lh>div{display:flex;align-items:center;min-width:0;padding:0 8px;font-weight:500;color:var(--dr-text)}
.bdr-lh-sort{justify-content:flex-end}
.bdr-lhbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:0;border-radius:16px;background:transparent;font-weight:500}
.bdr-lhbtn:hover{background:var(--dr-hover)}
.bdr-lhbtn.is-on{color:var(--dr-text)}
.bdr-lhbtn i{font-size:16px}
.bdr-lhtxt{padding:0 8px}
.bdr-lgroup{display:flex;align-items:flex-end;height:44px;padding:0 16px 8px;color:var(--dr-text);font-weight:500}
.bdr-row{height:48px;border-bottom:1px solid var(--dr-line-soft);color:var(--dr-text2);cursor:default}
.bdr-row>div{display:flex;align-items:center;gap:8px;min-width:0;height:100%;padding:0 8px}
.bdr-row>div:first-child{padding-left:16px;color:var(--dr-text)}
.bdr-row:hover{background:var(--dr-hover)}
.bdr-row.is-sel{background:var(--dr-sel);color:var(--dr-sel-text);border-bottom-color:transparent}
.bdr-row.is-sel>div:first-child{color:var(--dr-sel-text)}
.bdr-row.is-focus{box-shadow:inset 2px 0 0 var(--dr-accent)}
.bdr-row.is-drop{background:rgba(168,199,250,.16);box-shadow:inset 0 0 0 1px var(--dr-accent)}
.bdr-row.is-cut,.bdr-fchip.is-cut,.bdr-fcard.is-cut{opacity:.5}
.bdr-row[draggable="true"]{-webkit-user-drag:element}
.bdr-ic{flex:none;font-size:22px;width:24px;text-align:center}
.bdr-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdr-c-name .bdr-nm{font-weight:500}
.bdr-starmark{flex:none;font-size:14px;color:var(--dr-text2)}
.bdr-row.is-sel .bdr-starmark{color:var(--dr-sel-text)}
.bdr-c-date small,.bdr-c-owner small{margin-left:6px;color:var(--dr-muted)}
.bdr-row.is-sel small{color:inherit;opacity:.8}
.bdr-av{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#5c6bc0;color:#fff;font-size:12px;font-weight:600}
.bdr-c-act{justify-content:flex-end;gap:0!important}
.bdr-c-act .bdr-iconbtn{width:36px;height:36px;opacity:0;font-size:18px}
.bdr-row:hover .bdr-c-act .bdr-iconbtn,.bdr-row.is-sel .bdr-c-act .bdr-iconbtn,.bdr-row.is-focus .bdr-c-act .bdr-iconbtn,.bdr-c-act .bdr-iconbtn:focus-visible{opacity:1}
.bdr-row.is-sel .bdr-iconbtn{color:var(--dr-sel-text)}
.bdr-loc{display:inline-flex;align-items:center;gap:8px;min-width:0;height:32px;padding:0 10px;border:0;border-radius:16px;background:transparent;color:inherit}
.bdr-loc:hover{background:var(--dr-hover)}
.bdr-loc i{flex:none;color:#8f9aa6}
.bdr-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 바둑판 · 홈 ── */
.bdr-gh{margin:16px 8px 12px;font-size:14px;line-height:20px;font-weight:500;color:var(--dr-text)}
.bdr-home>.bdr-gh:first-child,.bdr-grid>.bdr-gh:first-child{margin-top:4px}
.bdr-home .bdr-list{margin-top:4px}
.bdr-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px 16px;padding:0 8px}
.bdr-fchip{display:flex;align-items:center;gap:12px;height:48px;padding:0 4px 0 16px;border-radius:12px;background:var(--dr-high);color:var(--dr-text);cursor:default;min-width:0}
.bdr-fchip .bdr-ic{color:#8f9aa6}
.bdr-fchip .bdr-nm{flex:1;font-weight:500}
.bdr-fchip .bdr-iconbtn{width:36px;height:36px;font-size:18px}
.bdr-fchip:hover{background:var(--dr-higher)}
.bdr-fchip.is-sel{background:var(--dr-sel);color:var(--dr-sel-text)}
.bdr-fchip.is-sel .bdr-ic,.bdr-fchip.is-sel .bdr-iconbtn{color:var(--dr-sel-text)}
.bdr-fchip.is-focus,.bdr-fcard.is-focus{box-shadow:0 0 0 2px var(--dr-accent)}
.bdr-fchip.is-drop{background:rgba(168,199,250,.18);box-shadow:0 0 0 2px var(--dr-accent)}
.bdr-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px;padding:0 8px}
.bdr-fcard{display:flex;flex-direction:column;min-width:0;border-radius:12px;background:var(--dr-high);cursor:default;overflow:hidden}
.bdr-fcard:hover{background:var(--dr-higher)}
.bdr-fcard.is-sel{background:var(--dr-sel);color:var(--dr-sel-text)}
.bdr-fcard-top{display:flex;align-items:center;gap:12px;height:48px;padding:0 4px 0 16px}
.bdr-fcard-top .bdr-nm{flex:1;font-weight:500}
.bdr-fcard-top .bdr-iconbtn{width:36px;height:36px;font-size:18px}
.bdr-fcard.is-sel .bdr-iconbtn{color:var(--dr-sel-text)}
.bdr-thumb{display:grid;place-items:center;aspect-ratio:16/11;margin:0 8px;border-radius:8px;background:#1b1c1d;overflow:hidden}
.bdr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bdr-thumb i{font-size:56px;opacity:.9}
.bdr-fcard-foot{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;color:var(--dr-text2);font-size:12px;min-width:0}
.bdr-fcard-foot span:not(.bdr-av){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.bdr-fcard.is-sel .bdr-fcard-foot{color:var(--dr-sel-text)}

/* ── 빈 화면 · 로딩 ── */
.bdr-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:min(460px,60vh);padding:32px 16px;text-align:center;color:var(--dr-text2)}
.bdr-empty>i{font-size:72px;color:var(--dr-accent);opacity:.8;margin-bottom:8px}
.bdr-empty b{font-size:22px;line-height:28px;font-weight:400;color:var(--dr-text)}
.bdr-empty p{margin:0;max-width:420px}
.bdr-skel{display:flex;flex-direction:column;gap:12px;padding:16px 8px}
.bdr-skel div{height:36px;border-radius:8px;background:linear-gradient(90deg,#232426 0%,#2c2e30 40%,#232426 80%);background-size:200% 100%;animation:bdr-skel 1.2s linear infinite}
@keyframes bdr-skel{to{background-position:-200% 0}}

/* ── 세부정보 ── */
.bdr-details{flex:none;width:360px;display:flex;flex-direction:column;gap:4px;min-height:0;overflow:auto;padding:8px 8px 24px 16px;border-left:1px solid var(--dr-line)}
.bdr-dt-head{display:flex;align-items:center;gap:8px;min-height:56px}
.bdr-dt-head h2{flex:1;min-width:0;display:flex;align-items:center;gap:12px;margin:0;font-size:18px;line-height:24px;font-weight:400}
.bdr-dt-head h2 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdr-dt-preview{display:grid;place-items:center;aspect-ratio:16/10;margin:8px 8px 8px 0;border-radius:12px;background:var(--dr-high);overflow:hidden}
.bdr-dt-preview img{width:100%;height:100%;object-fit:contain}
.bdr-dt-preview i{font-size:72px}
.bdr-dt-sub{margin:16px 0 8px;font-size:14px;font-weight:500}
.bdr-dt{margin:0;display:flex;flex-direction:column;gap:14px}
.bdr-dt-row dt{font-size:12px;line-height:16px;color:var(--dr-text2);margin-bottom:2px}
.bdr-dt-row dd{margin:0;display:flex;align-items:center;gap:8px;color:var(--dr-text);word-break:break-all}
.bdr-dt-row dd small{color:var(--dr-muted)}
.bdr-dt-row code{font-size:12px;color:var(--dr-text2)}
.bdr-dt-row .bdr-loc{margin-left:-10px}
.bdr-dt-desc{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.bdr-dt-desc span{font-size:12px;color:var(--dr-text2)}
.bdr-dt-desc textarea{min-height:72px;resize:vertical;padding:10px 12px;border:1px solid var(--dr-line);border-radius:8px;background:transparent;color:var(--dr-text);font:inherit}
.bdr-dt-desc textarea:focus{outline:none;border-color:var(--dr-accent)}
.bdr-dt-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 16px;text-align:center;color:var(--dr-text2)}
.bdr-dt-empty i{font-size:56px;color:var(--dr-accent);opacity:.7}

/* ── 업로드 패널 ── */
.bdr-uploads{position:absolute;right:24px;bottom:0;z-index:40;width:min(360px,calc(100% - 32px));max-height:min(420px,60%);display:flex;flex-direction:column;border-radius:16px 16px 0 0;background:var(--dr-surface);box-shadow:0 4px 8px 3px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.5);overflow:hidden}
.bdr-up-head{display:flex;align-items:center;gap:2px;height:52px;padding:0 4px 0 20px;background:var(--dr-high)}
.bdr-up-head b{flex:1;font-weight:500}
.bdr-up-eta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px 4px 20px;background:#252628;color:var(--dr-text2);font-size:13px}
.bdr-up-list{list-style:none;margin:0;padding:4px 0;overflow:auto}
.bdr-up-row{display:flex;align-items:center;gap:12px;height:48px;padding:0 12px 0 20px}
.bdr-up-row:hover{background:var(--dr-hover)}
.bdr-up-row .bdr-nm{flex:1}
.bdr-up-ok{font-size:22px;color:#6dd58c}
.bdr-up-err{color:var(--dr-danger);font-size:12px;white-space:nowrap}
.bdr-up-muted{color:var(--dr-muted);font-size:12px}
.bdr-ring{flex:none;width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--dr-accent) calc(var(--p) * 1%),rgba(168,199,250,.18) 0);-webkit-mask:radial-gradient(circle 7px,transparent 98%,#000 100%);mask:radial-gradient(circle 7px,transparent 98%,#000 100%)}
.bdr-up-cancel{display:none}
.bdr-up-row:hover .bdr-up-cancel{display:inline-grid}
.bdr-up-row:hover .bdr-ring{display:none}

/* ── 토스트(스낵바) ── */
.bdr-toasts{position:absolute;left:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.bdr-toast{pointer-events:auto;display:flex;align-items:center;gap:4px;min-height:48px;max-width:min(560px,calc(100vw - 48px));padding:4px 4px 4px 16px;border-radius:4px;background:#e3e3e3;color:#1f1f1f;box-shadow:0 3px 6px rgba(0,0,0,.35);animation:bdr-in .18s ease both}
.bdr-toast>span{flex:1;padding:8px 8px 8px 0}
.bdr-toast .bdr-linkbtn{color:#0b57d0}
.bdr-toast .bdr-linkbtn:hover{background:rgba(11,87,208,.08)}
.bdr-toast .bdr-iconbtn{color:#444746;width:36px;height:36px;font-size:18px}
@keyframes bdr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── 메뉴 ── */
.bdr-menu{position:fixed;z-index:9600;min-width:260px;max-width:340px;padding:8px 0;border-radius:8px;background:#2b2c2f;box-shadow:0 4px 8px 3px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.5);font:400 14px/20px var(--font-stack);color:#e3e3e3}
.bdr-menu button{display:flex;align-items:center;gap:16px;width:100%;height:36px;padding:0 16px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.bdr-menu button:hover,.bdr-menu button:focus{background:rgba(227,227,227,.08);outline:none}
.bdr-menu button:disabled{opacity:.45;cursor:default}
.bdr-menu button i{font-size:20px;color:#c4c7c5}
.bdr-menu button span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdr-menu kbd{font:12px var(--font-stack);color:#8e918f}
.bdr-menu .is-danger,.bdr-menu .is-danger i{color:#f2b8b5}
.bdr-menu-check{color:#a8c7fa!important}
.bdr-menu-sep{height:1px;margin:8px 0;background:#444746}

/* ── 대화상자 ── */
.bdr-modal{position:fixed;inset:0;z-index:9550;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6)}
.bdr-dlg{width:min(480px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:16px;overflow:auto;padding:24px;border-radius:28px;background:#2b2c2f;color:#e3e3e3;font:400 14px/20px var(--font-stack);box-shadow:0 8px 12px 6px rgba(0,0,0,.3)}
.bdr-dlg h2{margin:0;font-size:24px;line-height:32px;font-weight:400}
.bdr-dlg p{margin:0;color:#c4c7c5}
.bdr-dlg footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px}
.bdr-movedlg{width:min(560px,100%)}
.bdr-mv-cur{font-size:13px}
.bdr-mv-nav{display:flex;align-items:center;gap:8px;min-height:40px;font-size:16px}
.bdr-mv-nav>i{font-size:22px;color:#a8c7fa;margin:0 8px}
.bdr-mv-list{display:flex;flex-direction:column;min-height:180px;max-height:320px;overflow:auto;border:1px solid #444746;border-radius:12px;padding:4px}
.bdr-mv-row{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;text-align:left}
.bdr-mv-row:hover:not(:disabled){background:rgba(227,227,227,.08)}
.bdr-mv-row i:first-child{font-size:20px;color:#8f9aa6}
.bdr-mv-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdr-mv-empty{padding:24px;text-align:center;color:#8e918f}
.bdr-mv-newrow{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px}
.bdr-mv-newrow i{font-size:20px;color:#8f9aa6}
.bdr-mv-newrow .bdr-input{height:40px;font-size:14px}
.bdr-keys{margin:0;display:grid;grid-template-columns:1fr;gap:6px}
.bdr-keys div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid #3a3b3d}
.bdr-keys dt{margin:0}.bdr-keys dd{margin:0;color:#c4c7c5}
.bdr-keys kbd{display:inline-block;padding:2px 8px;border-radius:6px;background:#1e1f20;border:1px solid #444746;font:12px var(--font-stack);color:#e3e3e3}

/* ── 미리보기 ── */
.bdr-preview{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;background:rgba(10,10,11,.94);color:#e3e3e3;font:400 14px/20px var(--font-stack);outline:none}
.bdr-pv-head{display:flex;align-items:center;gap:8px;height:64px;padding:0 12px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.bdr-pv-head b{min-width:0;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdr-pv-head .bdr-iconbtn{color:#e3e3e3}
.bdr-pv-stage{flex:1;min-height:0;display:grid;place-items:center;padding:8px 72px 48px}
.bdr-pv-stage img,.bdr-pv-stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.bdr-pv-stage iframe{width:min(1100px,100%);height:100%;border:0;border-radius:8px;background:#fff}
.bdr-pv-text{width:min(1000px,100%);max-height:100%;overflow:auto;margin:0;padding:24px;border-radius:12px;background:#1e1f20;color:#e3e3e3;font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;word-break:break-word;user-select:text}
.bdr-pv-audio{display:flex;flex-direction:column;align-items:center;gap:24px}
.bdr-pv-audio .bdr-ic{font-size:96px;width:auto}
.bdr-pv-none{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px;border-radius:16px;background:#1e1f20;text-align:center}
.bdr-pv-none>i{font-size:80px}
.bdr-pv-none b{font-size:18px;font-weight:500}
.bdr-pv-none p{margin:0 0 8px;color:#c4c7c5}
.bdr-pv-nav{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(40,42,44,.9);color:#e3e3e3;font-size:24px}
.bdr-pv-nav:hover{background:#3c3d40}
.bdr-pv-nav.is-prev{left:16px}.bdr-pv-nav.is-next{right:16px}
.bdr-pv-foot{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:4px 12px;border-radius:12px;background:rgba(40,42,44,.9);color:#c4c7c5;font-size:12px}
.bdr-pv-foot:empty{display:none}

/* ── 드래그 · 박스 선택 ── */
.bdr-dropveil{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;padding-bottom:32px;border:2px solid var(--dr-accent);border-radius:16px;background:rgba(168,199,250,.06);pointer-events:none}
.bdr-dropveil>div{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:24px;background:#0b57d0;color:#fff;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.bdr-dropveil i{font-size:22px}
.bdr-marquee{position:absolute;z-index:5;border:1px solid var(--dr-accent);background:rgba(168,199,250,.14);pointer-events:none}
.bdr-dragghost{position:fixed;top:-100px;left:-100px;padding:10px 16px;border-radius:8px;background:#004a77;color:#c2e7ff;font:500 14px var(--font-stack);box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* ── 보기 전용 ── */
.bdr.is-readonly .bdr-c-act [data-bdr-row="rename"]{display:none}

/* ── 반응형 ── */
/* 목록 열: 목록 영역 폭(컨테이너)으로. 5열 920 · 좁은 5열 806 · 4열 656 · 그 아래는 이름 · 크기 · 더보기 (본문 좌우 여백 32 포함) */
@container bdrmain (max-width:959px){.bdr-list{--cols:minmax(200px,1fr) 150px 170px 110px 176px}.bdr-list[data-cols="trash"]{--cols:minmax(200px,1fr) 150px 170px 110px 110px}.bdr-list[data-cols="located"]{--cols:minmax(200px,1fr) 150px 170px 110px 176px}}
@container bdrmain (max-width:839px){
  .bdr-list,.bdr-list[data-cols]{--cols:minmax(200px,1fr) 170px 110px 176px}
  .bdr-list[data-cols="trash"]{--cols:minmax(200px,1fr) 170px 110px 110px}
  .bdr-list[data-cols="plain"] .bdr-c-owner,.bdr-list[data-cols="plain"] .bdr-lh>div:nth-child(2){display:none}
  .bdr-list[data-cols="located"] .bdr-c-loc,.bdr-list[data-cols="located"] .bdr-lh>div:nth-child(3){display:none}
  .bdr-list[data-cols="trash"] .bdr-c-loc,.bdr-list[data-cols="trash"] .bdr-lh>div:nth-child(3){display:none}
}
@container bdrmain (max-width:689px){
  .bdr-list,.bdr-list[data-cols],.bdr-list[data-cols="trash"]{--cols:minmax(0,1fr) 88px 56px}
  .bdr-list .bdr-c-owner,.bdr-list .bdr-c-date,.bdr-list .bdr-c-loc,.bdr-list .bdr-lh>div:nth-child(2),.bdr-list .bdr-lh>div:nth-child(3){display:none!important}
  .bdr-c-act .bdr-iconbtn:not([data-bdr-row="more"]){display:none}
  .bdr-c-act .bdr-iconbtn[data-bdr-row="more"]{opacity:1}
}
@media (max-width:1280px){.bdr-details{width:320px}}
@media (max-width:1100px){
  .bdr.has-details .bdr-details{position:absolute;top:0;right:0;bottom:0;z-index:20;background:var(--dr-surface);box-shadow:-8px 0 24px rgba(0,0,0,.35)}
}
@media (max-width:860px){
  .bdr.has-rail{grid-template-columns:minmax(0,1fr)}
  .bdr.has-rail>.bdr-rail{display:none}
  .bdr-main,.bdr.has-rail .bdr-main{padding:0 8px 8px}
  .bdr-top{height:56px}
  .bdr-head{padding-left:12px}
  .bdr-bar,.bdr-note{padding-left:12px;margin-left:8px}
  .bdr-body{padding:0 4px 96px}
  .bdr-details{width:min(360px,100%)}
  .bdr-crumb{font-size:18px;padding:0 8px}
  .bdr-h1{font-size:18px}
  .bdr-pv-stage{padding:8px 8px 48px}
  .bdr-pv-nav{top:auto;bottom:8px;margin:0}
  .bdr-toasts{left:12px;right:12px;bottom:12px}
}
@media (max-width:520px){
  .bdr-folders,.bdr-files{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bdr-seg button{width:40px}
  .bdr-uploads{right:8px;width:calc(100% - 16px)}
}
@media (prefers-reduced-motion:reduce){.bdr-toast,.bdr-rail{animation:none;transition:none}.bdr-skel div{animation:none}}

/* ── 사이트 라이트 테마(요소 선택자 [data-theme="light"] h2 · p · input[type=search] …)가 드라이브를 칠하지 않게 ──
   바인더는 테마와 무관하게 어둡다. #bn-drive 범위로 우선순위를 올려 되돌린다(2026-09-18 캡처 검수: 흰 검색창 · 검은 제목). */
#bn-drive :is(h1,h2,h3){color:inherit}
#bn-drive p{color:inherit}
#bn-drive :is(.bdr-empty,.bdr-dt-empty) p{color:var(--dr-text2)}
#bn-drive :is(.bdr-dlg,.bdr-pv-none) p{color:#c4c7c5}
#bn-drive :is(input[type=text],input[type=search],textarea){background:transparent;color:var(--dr-text)}
#bn-drive .bdr-search input{border:0;box-shadow:none}
#bn-drive .bdr-search input::placeholder{color:var(--dr-text2)}
#bn-drive .bdr-input{background:transparent;color:#e3e3e3;border-color:var(--dr-muted)}
#bn-drive .bdr-input:focus{border-color:var(--dr-accent)}
#bn-drive .bdr-dt-desc textarea{border-color:var(--dr-line)}
#bn-drive .bdr-dt-desc textarea:focus{border-color:var(--dr-accent)}
#bn-drive .bdr-h1 .bdr-crumb.is-last{max-width:none}