/* Desktop shell only. Shared controls and surfaces are owned by base-ui.css. */
@media (min-width:761px){
  html,body{background:var(--kptu-bg)}
  body{overflow-y:scroll}
  /* UI-전수디자인점검 F21: 모든 PC 화면이 같은 본문 폭 규칙 하나(최대 1920px, 좌우 여백 24~42px)를 쓴다. 전에는 보통 화면 1600/1720px·넓은 화면
     (달력·업무일지·일기·사진·아스날, 옛 view-wide.css) 1920px로 따로여서 화면을 옮길 때 사이드바·본문 자리가 흔들렸다. */
  /* UI-PC스크롤묶음 ④(2026-11-10): 본문 아래 여백은 위와 같은 12px. 전에는 76px이라 화면 높이에 맞춰 그리는 화면(달력 주간·'목록 | 상세' 화면의
     붙은 칸)이 그 여백만큼 문서가 한 번 더 내려가 '스크롤 두 겹'이 됐다(할 일 화면만 따로 12px로 고쳐 두었던 것을 모든 화면 규칙으로). */
  main{--kptu-wide-pad:clamp(24px,2.2vw,42px);max-width:1920px;margin:0 auto;padding:12px var(--kptu-wide-pad) 12px}

  #appView.app-view{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:28px;align-items:start}
  #appView>.app-nav{grid-column:1;grid-row:1 / span 2;position:sticky;top:12px;margin-bottom:-100vh;display:flex;flex-direction:column;align-items:stretch;gap:var(--kptu-space-1);height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:none;overflow:auto;padding:var(--kptu-space-2);background:var(--kptu-surface);border:1px solid var(--kptu-border);border-radius:var(--kptu-radius-lg);box-shadow:none}
  #appView>.app-nav .sidebar-brand{display:flex;align-items:center;gap:7px;min-height:34px;padding:5px 7px 9px;margin-bottom:2px;border-bottom:1px solid var(--kptu-border);color:var(--kptu-ink);text-decoration:none;font-size:12px;font-weight:800;line-height:1}
  #appView>.app-nav .sidebar-brand img{width:22px;height:22px;display:block;object-fit:cover;border-radius:var(--kptu-radius-sm);flex:0 0 auto}
  #appView>.app-nav .sidebar-spacer{display:block;flex:1 1 auto;min-height:16px}
  #appView>.app-nav .sidebar-utility{display:flex;align-items:center;justify-content:space-between;gap:var(--kptu-space-2);width:100%;min-height:34px;border:0;border-radius:var(--kptu-radius-md);background:transparent;color:var(--kptu-muted);padding:7px 10px;text-align:left;font-size:12px;font-weight:700;line-height:1.25}
  #appView>.app-nav .sidebar-utility:hover{background:var(--kptu-primary-soft);color:var(--kptu-primary-text)}
  #appView>.app-nav .sidebar-utility+.sidebar-utility{margin-top:2px}
  /* UI-전수디자인점검 F22: 메뉴 한 줄의 보이는 높이 28px(하위 메뉴 24px, ui-standard.css .nav-sub-btn). 800px 높이 노트북에서도 아래쪽 메뉴까지 보이고,
     그래도 넘치면 사이드바 칸(.app-nav overflow:auto)만 스크롤한다. 손가락으로 누르는 PC는 아래 (pointer:coarse) 규칙이 누르는 범위를 지킨다. */
  #appView>.app-nav .nav-btn{width:100%;min-height:var(--ds-compact-height-sm);border:0;border-radius:var(--kptu-radius-md);background:transparent;color:var(--kptu-muted);padding:4px 10px;text-align:left;font-size:13px;font-weight:700;line-height:1.25;transition:background .14s ease,color .14s ease}
  #appView>.app-nav .nav-btn:hover{background:var(--kptu-primary-soft);color:var(--kptu-primary-text)}
  #appView>.app-nav .nav-btn.active{background:var(--ds-select-bg);color:var(--ds-select-ink);box-shadow:var(--kptu-shadow-select)}
  /* UI-PC손맛묶음 ⑤: 메뉴 줄은 진짜 링크(<a href>)라 가운데 누르기·Ctrl+누르기로 새 탭이 열린다. 단추와 같은 모양으로 둔다(:where — 숨김 규칙보다 약하게). */
  #appView>.app-nav :where(a.nav-btn:not([hidden]),a.nav-sub-btn:not([hidden])){display:flex;align-items:center;box-sizing:border-box;text-decoration:none}

  #appView>.view-panel{grid-column:2;grid-row:1;min-width:0}
  #appView>.view-panel:not(.hidden){display:block}
  .toolbar select{width:180px}

  .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--kptu-space-3)}
  .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kptu-space-4)}
  .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kptu-space-4)}
  .page-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kptu-space-4)}
  .member-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kptu-space-3)}
  .group-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kptu-space-3)}

  .calendar-toolbar{max-width:420px}
  .calendar-grid{min-height:620px}

  .modal{padding:var(--kptu-space-6)}
  .modal-card{max-height:90vh}
  .modal-card.medium-card{width:min(92vw,980px)}
  .modal-card.editor-card{width:min(94vw,1180px)}
  .editor-grid{grid-template-columns:minmax(0,1fr) 320px;gap:var(--kptu-space-5)}

  /* Project detail viewport safety is a shell invariant. */
  #pm2DetailModal{box-sizing:border-box!important;padding:32px clamp(30px,4vw,64px)!important;scroll-padding-top:32px;scroll-padding-bottom:32px}
  #pm2DetailModal .pm2-detail-card{box-sizing:border-box!important;width:min(1180px,calc(100vw - 96px))!important;max-width:100%!important;margin:0 auto!important;padding:24px 28px 32px!important;border-radius:var(--kptu-radius-lg)!important}
  #pm2DetailModal .modal-head{padding:0 2px}
  #pm2DetailModal .modal-head .icon-btn{flex:0 0 auto}
  #pm2DetailModal .pm2-detail-head{gap:var(--kptu-space-4)!important}
  #pm2DetailModal .pm2-detail-head>*{min-width:0}

  body{padding-bottom:0!important}
}

@media (min-width:761px) and (pointer:coarse){
  #appView>.app-nav .nav-btn{min-height:40px;padding-top:9px;padding-bottom:9px}
}

@media (min-width:1440px){
  #appView.app-view{grid-template-columns:240px minmax(0,1fr);column-gap:32px}
  #appView>.app-nav{padding:var(--kptu-space-3)}
  #appView>.app-nav .nav-btn{font-size:13px}
  .project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* UI-상단줄: PC(≥761)만. 본문 칸 맨 위 얇은 줄(topbar-actions.js가 그림)과 사이드바 숨기기.
   칸 자리: 사이드바는 첫 칸, 상단 줄·화면은 마지막 칸(grid-column:-2)이라 사이드바를 숨겨 한 칸이 되어도 같은 규칙으로 본문 전체 폭을 쓴다.
   --kptu-topline-space(줄 높이 + 아래 간격)는 화면 높이에 맞춰 그리는 좌우·3단 화면(할 일·회의·프로젝트·담당조직)이 뺀다. */
.app-topline{display:none}
@media (min-width:761px){
  #appView{--kptu-topline-height:40px;--kptu-topline-gap:8px;--kptu-fixed-top:0px;--kptu-topline-space:calc(var(--kptu-topline-height) + var(--kptu-topline-gap));--kptu-stick-top:calc(var(--kptu-fixed-top) + var(--kptu-topline-height) + var(--kptu-topline-gap))}
  /* UI-PC스크롤묶음 ①(2026-11-10 CC 결정 '늘 보임'): 맨 위 줄(뒤로·위치·검색·+ 추가)은 모든 PC 화면에서 화면 맨 위에 붙어 있다(달력·할 일과 같은 방식).
     전에는 문서를 내리면 같이 올라가 사라지는 화면(홈·잊지 말기·자료실·공유 페이지·사업 보고 등)과 화면 높이에 맞춰 그려 남는 화면(달력·할 일)이 갈렸다.
     줄 아래 간격(--kptu-topline-gap)은 그림자로 같은 바탕을 칠해 붙은 줄 밑으로 지나가는 글이 비치지 않게 한다.
     화면 안에서 위에 붙는 줄(아스날·사진 위쪽 줄, 파일 위쪽 줄, 따라오는 옆 칸)은 --kptu-stick-top(맨 위 띠 + 줄 + 간격) 아래에 붙는다. 폰(~760px)은 이 줄이 없어 0. */
  /* UI-PC스크롤묶음 ④(2026-11-10): 사이드바는 줄 두 칸(맨 위 줄 + 화면)만 차지하고, 남는 높이는 화면 칸(1fr)이 받는다.
     전에는 사이드바가 빈 줄 40칸에 걸쳐 있어(grid-row:1 / span 40) 크롬이 빈 줄마다 높이(약 10px)를 나눠 줘서, 내용이 화면에 다 들어오는
     화면에서도 문서가 380px쯤 더 내려갔다(사업 보고 결과 칸 등 붙은 칸이 있는 화면은 '스크롤 두 겹'으로 보임).
     사이드바 높이(화면 높이 - 24px)도 화면 줄 높이를 정하지 않는다(.app-nav margin-bottom:-100vh — 칸 높이 계산에서 빠짐, 보이는 크기·붙는 자리는 그대로).
     그래야 내용이 화면보다 짧은 화면(빈 화면·달력 주간처럼 화면 높이에 맞춘 화면)이 본문 아래 여백(76px)만큼 괜히 한 번 더 내려가지 않는다. */
  #appView.app-view{grid-template-rows:auto 1fr}
  #appView>.app-topline{grid-column:-2 / -1;grid-row:1;display:flex;align-items:center;gap:4px;box-sizing:border-box;height:var(--kptu-topline-height);margin:0 0 var(--kptu-topline-gap);min-width:0;position:sticky;top:var(--kptu-fixed-top);z-index:15;background:var(--kptu-bg);box-shadow:0 var(--kptu-topline-gap) 0 var(--kptu-bg)}
  #appView>.view-panel{grid-column:-2 / -1;grid-row:2}
  #appView.app-view.nav-collapsed{grid-template-columns:minmax(0,1fr);column-gap:0}
  #appView.nav-collapsed>.app-nav{display:none}
  .app-topline .topline-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;box-sizing:border-box;height:var(--ds-compact-height,32px);min-width:var(--ds-compact-height,32px);padding:0 8px;border:0;border-radius:var(--kptu-radius-sm);background:transparent;color:var(--kptu-muted);font-size:var(--ds-compact-text,13px);line-height:1;white-space:nowrap}
  .app-topline .topline-btn::after{content:"";position:absolute;left:0;right:0;top:calc(50% - var(--kptu-touch-target,44px) / 2);height:var(--kptu-touch-target,44px)}
  .app-topline .topline-btn:not(:disabled):hover{background:var(--kptu-primary-soft);color:var(--kptu-primary-ink)}
  .app-topline .topline-btn:disabled{opacity:.35}
  /* NAV-PC앞뒤통일: ‹ › 꺾쇠는 바탕 없이, 마우스를 올리면 옅은 칸(색 없는 회색), 갈 곳이 없으면 연한 색. 선 굵기·크기는 [사이드바 숨김]과 같다. */
  .app-topline .topline-step{padding:0}
  .app-topline .topline-step:not(:disabled):hover{background:color-mix(in srgb,currentColor 10%,transparent);color:var(--kptu-ink)}
  .app-topline .topline-step svg{stroke-linecap:round}
  .app-topline :is(.topline-btn,.topline-where-link,.account-trigger):focus-visible{outline:2px solid var(--kptu-primary-ink);outline-offset:-2px}
  .app-topline .topline-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
  .app-topline .topline-nav-toggle[aria-expanded="false"]{color:var(--kptu-primary-ink)}
  .app-topline .topline-where{flex:0 1 auto;min-width:0;margin-left:6px}
  .app-topline .topline-where ol{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none;min-width:0}
  .app-topline .topline-where li{display:flex;align-items:center;min-width:0;font-size:var(--ds-compact-text,13px);color:var(--kptu-ink);white-space:nowrap}
  .app-topline .topline-where li+li::before{content:"›";margin:0 6px;color:var(--kptu-muted)}
  .app-topline .topline-where{display:flex;align-items:center}
  .app-topline .topline-where [aria-current]{font-weight:var(--ds-weight-medium,600);overflow:hidden;text-overflow:ellipsis}
  .app-topline .topline-where-link{position:relative;height:var(--ds-compact-height,32px);padding:0 4px;border:0;border-radius:var(--kptu-radius-sm);background:transparent;color:var(--kptu-muted);font:inherit}
  .app-topline .topline-where-link::after{content:"";position:absolute;left:0;right:0;top:calc(50% - var(--kptu-touch-target,44px) / 2);height:var(--kptu-touch-target,44px)}
  .app-topline .topline-where-link:hover{color:var(--kptu-primary-ink);text-decoration:underline}
  /* 전체 검색 칸 자리(SEARCH가 [data-search-slot]에 붙음). 비어 있는 동안은 가운데 빈 자리로 [+ 추가]·계정을 오른쪽 끝으로 민다. */
  .app-topline .topline-search{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
  .app-topline .topline-add{color:var(--kptu-primary-ink)}
  .app-topline .topline-account{flex:0 0 auto}
  .app-topline .topline-account .account-trigger{min-height:var(--ds-compact-height,32px);height:var(--ds-compact-height,32px);padding:0 8px;font-size:var(--ds-compact-text,13px);font-weight:var(--ds-weight-regular,400);position:relative}
  .app-topline .topline-account .account-trigger::after{content:"";position:absolute;left:0;right:0;top:calc(50% - var(--kptu-touch-target,44px) / 2);height:var(--kptu-touch-target,44px)}
}
/* BIZ-버튼줄정리: 이 글자 줄 메뉴는 PC [+ 추가]와 홈 ⋯(모든 폭)이 같이 쓴다. 그래서 PC 전용 묶음 밖에 둔다(홈 ⋯가 760px 이하에서 기본 회색 버튼으로 보이던 것). */
.topline-add-menu{position:fixed;z-index:60;inset:auto;margin:0;box-sizing:border-box;padding:4px;border:1px solid var(--kptu-border);border-radius:var(--kptu-radius-md);background:var(--kptu-surface);color:var(--kptu-ink);box-shadow:var(--kptu-shadow-float);overflow:auto}
.topline-add-menu[hidden]{display:none!important}
.topline-add-menu button,.topline-add-menu button.row-act{display:flex;align-items:center;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:var(--kptu-radius-sm);background:transparent;color:var(--kptu-ink);font-size:var(--ds-compact-text,13px);text-align:left}
/* 메뉴 줄 항목은 ③ 글자 버튼(button.row-act, UI-버튼6가지)이어도 이 작은 메뉴 줄 모양 그대로(S52-39). 줄 사이를 넘는 누르는 범위(::after)는 두지 않는다(줄 높이가 곧 누르는 범위). */
.topline-add-menu button.row-act::after{content:none}
.topline-add-menu button:hover,.topline-add-menu button:focus-visible,.topline-add-menu button.row-act:hover,.topline-add-menu button.row-act:focus-visible{background:var(--kptu-primary-soft);outline:none}

/* UI-자주가는링크 (PC 761px~): 사이드바 맨 아래(메뉴와 빈 공간을 두고, 창이 짧아 메뉴가 길면 메뉴 바로 아래) '자주 가는 링크 ›' 줄과 그 줄 오른쪽에서 위로 열리는 작은 창(quick-links.js).
   버튼은 UI-버튼기준의 작은 버튼(32px, 누르는 범위 44px)만 쓰고 채운 버튼은 편집의 [저장] 하나. 폰에는 줄이 없다. */
#appView>.app-nav .nav-quick-links{display:none}
.quick-links-panel[hidden]{display:none!important}
.ql-menu{position:fixed;inset:auto;margin:0;z-index:100;box-sizing:border-box;padding:6px;border:var(--ds-line-width,1px) solid var(--kptu-border);border-radius:var(--kptu-radius-md);background:var(--kptu-surface);color:var(--kptu-ink);box-shadow:var(--kptu-shadow-float);overflow:auto}
.ql-menu[hidden]{display:none!important}
.ql-menu button{display:flex;align-items:center;width:100%;min-height:36px;padding:0 var(--kptu-space-3,12px);text-align:left;border:0;border-radius:var(--kptu-radius-sm);background:transparent;color:var(--kptu-ink);font:inherit;font-size:var(--ds-text-meta,12px);font-weight:600;cursor:pointer}
.ql-menu button:is(:hover,:focus-visible){background:var(--kptu-primary-soft)}
.ql-menu button:focus-visible{outline:2px solid var(--kptu-primary-ink);outline-offset:-2px}
.ql-menu .ql-menu-sep{height:0;margin:4px 6px;border:0;border-top:var(--ds-line-width,1px) solid var(--kptu-border)}
@media (min-width:761px){
  /* UI-상단줄제목: 열린 노트 머리줄은 제목 줄이 없어 [복사]·[⋯]를 오른쪽 끝에 둔다. */
  #appView #basketView .note-head-main{justify-content:flex-end}
  #appView>.app-nav .nav-quick-links{display:flex;align-items:center;justify-content:space-between;gap:6px;flex:0 0 auto;border-top:var(--ds-line-width,1px) solid var(--kptu-border);border-radius:0 0 var(--kptu-radius-md) var(--kptu-radius-md)}
  #appView>.app-nav .nav-quick-links span{color:var(--kptu-muted);font-size:var(--ds-text-meta,12px)}
  /* CALL-통화메뉴·TG-소식메뉴: [통화]·[텔레그램 소식]은 빈 공간 아래(맨 아래 묶음), 위쪽 가는 선으로 나눈다. */
  #appView>.app-nav .nav-feed-first{border-top:var(--ds-line-width,1px) solid var(--kptu-border);border-radius:0 0 var(--kptu-radius-md) var(--kptu-radius-md)}
  .quick-links-panel{position:fixed;z-index:60;inset:auto;margin:0;box-sizing:border-box;padding:10px 12px 8px;border:var(--ds-line-width,1px) solid var(--kptu-border);border-radius:var(--kptu-radius-md);background:var(--kptu-surface);color:var(--kptu-ink);box-shadow:var(--kptu-shadow-float);overflow:auto;overscroll-behavior:contain}
  .quick-links-panel .ql-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
  .quick-links-panel h2{margin:0;font-size:var(--ds-text-row,13px);font-weight:var(--ds-weight-medium,500)}
  .quick-links-panel .ql-group{margin:0 0 8px}
  .quick-links-panel .ql-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .quick-links-panel h3{margin:6px 0 4px;color:var(--kptu-muted);font-size:var(--ds-text-meta,12px);font-weight:var(--ds-weight-medium,500)}
  .quick-links-panel .ql-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;margin:0;padding:0;list-style:none}
  .quick-links-panel .ql-grid a{display:flex;align-items:center;min-height:36px;padding:0 8px;border-radius:var(--kptu-radius-sm);color:var(--kptu-ink);font-size:var(--ds-text-row,13px);text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .quick-links-panel .ql-grid a:hover,.quick-links-panel .ql-grid a:focus-visible{background:var(--kptu-primary-soft);color:var(--kptu-primary-ink);outline:none}
  .quick-links-panel .ql-note{margin:4px 0;color:var(--kptu-muted);font-size:var(--ds-text-meta,12px)}
  .quick-links-panel .ql-note:empty{display:none}
  .quick-links-panel .ql-btn{position:relative;height:var(--ds-compact-height,32px);min-height:var(--ds-compact-height,32px);padding:0 var(--ds-compact-pad-x,10px);border:var(--ds-line-width,1px) solid var(--kptu-border);border-radius:var(--ds-radius-control,8px);background:var(--kptu-surface);color:var(--kptu-primary-ink);font:inherit;font-size:var(--ds-compact-text,13px);cursor:pointer;white-space:nowrap}
  .quick-links-panel .ql-btn::after{content:"";position:absolute;left:0;right:0;top:calc(50% - var(--kptu-touch-target,44px) / 2);height:var(--kptu-touch-target,44px)}
  .quick-links-panel .ql-btn:hover:not(:disabled){background:var(--kptu-primary-soft)}
  .quick-links-panel .ql-btn:disabled{opacity:.55;cursor:default}
  .quick-links-panel .ql-btn:focus-visible,.quick-links-panel .ql-handle:focus-visible{outline:2px solid var(--kptu-primary-ink);outline-offset:1px}
  .quick-links-panel .ql-primary{background:var(--kptu-primary);border-color:var(--kptu-primary);color:var(--kptu-on-primary)}
  .quick-links-panel .ql-primary:hover:not(:disabled){background:var(--kptu-primary)}
  .quick-links-panel .ql-remove{color:var(--kptu-danger);border-color:transparent;background:transparent}
  .quick-links-panel .ql-edit-list{margin:0;padding:0;list-style:none;display:grid;gap:4px}
  .quick-links-panel .ql-edit-row{display:grid;grid-template-columns:28px minmax(0,2fr) minmax(0,3fr) auto;align-items:center;gap:6px;border-radius:var(--kptu-radius-sm)}
  .quick-links-panel .ql-handle{width:28px;height:var(--ds-compact-height,32px);padding:0;border:0;border-radius:var(--kptu-radius-sm);background:transparent;color:var(--kptu-muted);cursor:grab;font-size:12px;letter-spacing:-2px}
  .quick-links-panel .ql-edit-row input{box-sizing:border-box;width:100%;height:var(--ds-compact-height,32px);min-height:var(--ds-compact-height,32px);padding:0 8px;border:var(--ds-line-width,1px) solid var(--kptu-border);border-radius:var(--ds-radius-control,8px);background:var(--kptu-surface);color:var(--kptu-ink);font:inherit;font-size:var(--ds-compact-text,13px)}
  .quick-links-panel .ql-edit-row input[aria-invalid="true"]{border-color:var(--kptu-danger);box-shadow:0 0 0 1px var(--kptu-danger)}
  .quick-links-panel .ql-add{border-color:transparent;background:transparent;color:var(--kptu-muted)}
  .quick-links-panel .ql-group-head{justify-content:flex-start;gap:4px}
  .quick-links-panel .ql-group-head h3{margin:6px 0 4px}
  .quick-links-panel .ql-spacer{flex:1}
  .quick-links-panel .ql-icon{position:relative;width:28px;height:var(--ds-compact-height-sm,28px);padding:0;border:0;border-radius:var(--kptu-radius-sm);background:transparent;color:var(--kptu-muted);font:inherit;font-size:14px;cursor:pointer}
  .quick-links-panel .ql-icon::after{content:"";position:absolute;left:-8px;right:-8px;top:calc(50% - var(--kptu-touch-target,44px) / 2);height:var(--kptu-touch-target,44px)}
  .quick-links-panel .ql-icon:hover,.quick-links-panel .ql-icon:focus-visible{background:var(--kptu-primary-soft);color:var(--kptu-ink);outline:none}
  .quick-links-panel .ql-gname-input{box-sizing:border-box;width:12em;max-width:100%;height:var(--ds-compact-height-sm,28px);padding:0 8px;border:var(--ds-line-width,1px) solid var(--kptu-border);border-radius:var(--ds-radius-control,8px);background:var(--kptu-surface);color:var(--kptu-ink);font:inherit;font-size:var(--ds-compact-text,13px)}
  .quick-links-panel .ql-confirm{margin:2px 0 6px;padding:6px 8px;border:var(--ds-line-width,1px) solid var(--kptu-border);border-radius:var(--kptu-radius-sm);background:var(--kptu-primary-soft)}
  .quick-links-panel .ql-confirm p{margin:0 0 6px;font-size:var(--ds-text-meta,12px)}
  .quick-links-panel .ql-confirm-btns{display:flex;flex-wrap:wrap;gap:6px}
  .quick-links-panel .ql-handle{font-size:14px;letter-spacing:0}
  .quick-links-panel .ql-group-head .ql-handle{width:24px;height:var(--ds-compact-height-sm,28px)}
  .quick-links-panel .ql-edit-row.ql-drop-before,.quick-links-panel .ql-group.ql-drop-before{box-shadow:inset 0 2px 0 var(--kptu-primary-ink)}
  .quick-links-panel .ql-edit-row.ql-drop-after,.quick-links-panel .ql-group.ql-drop-after{box-shadow:inset 0 -2px 0 var(--kptu-primary-ink)}
  .quick-links-panel .ql-drop-no{opacity:.55;cursor:no-drop}
  .quick-links-panel .ql-group-head.ql-drop-into{outline:2px dashed var(--kptu-primary-ink);outline-offset:-2px;background:var(--kptu-primary-soft)}
  .quick-links-panel .ql-group-head.ql-drop-into::after{content:'여기에 놓기';margin-left:auto;padding-right:8px;font-size:var(--ds-text-meta,12px);font-weight:700;color:var(--kptu-primary-ink);white-space:nowrap}
  .quick-links-panel .ql-dragging{opacity:.5}
  .quick-links-panel .ql-foot{position:sticky;bottom:-8px;display:flex;justify-content:flex-end;gap:6px;margin:6px -12px -8px;padding:8px 12px;background:var(--kptu-surface);border-top:var(--ds-line-width,1px) solid var(--kptu-border)}
}

/* UI-칸안스크롤하나로(2026-10-30, 시안 A): PC 좌우 화면의 스크롤은 화면 전체 하나다(왼쪽 목록은 화면과 같이 내려감).
   UI-상세칸고정(2026-11-03 명진, S49-8): 단, follow-pane.js가 이름을 붙인 옆 칸(오른쪽 상세·왼쪽 폴더 나무)은 화면 위쪽에 붙어 제자리에 있고
   내용이 화면보다 길면 그 칸만 따로 스크롤한다. 칸 안 고정 머리줄·[저장] 줄은 칸 끝(0)에 붙는다.
   UI-PC스크롤묶음 ②(2026-11-10): 칸 위에서 굴린 휠은 칸에 굴릴 것이 없거나 칸 끝에 닿으면 화면(문서) 스크롤로 넘어간다.
   전에는 overscroll-behavior:contain이라 칸이 짧을 때(조직 보고 상세 등) 칸 위 휠이 아무것도 움직이지 않았다(크롬은 넘칠 것 없는 스크롤 틀도 contain이면 휠을 막는다).
   붙는 자리 기본값(--follow-top)은 #appView가 '맨 위 줄 아래 8px'로 정하고(.kptu-follow-pane은 follow-pane.js가 칸마다 다시 정함). */
@media (min-width:761px){
  #appView{--follow-top:calc(var(--kptu-stick-top) + 8px)}
  .kptu-follow-pane{position:sticky;top:var(--follow-top,12px);align-self:start;max-height:calc(100vh - var(--follow-top,12px) - 12px);max-height:var(--follow-max,calc(100dvh - var(--follow-top,12px) - 12px));overflow-y:auto}
  .kptu-follow-pane .modal-action-footer{bottom:0}
}
/* S51-13 TODO-폴드목록상세: 폴드 펼침(600~760px)에서 follow-pane.js가 narrow로 붙인 칸도 같은 모양(최대 높이는 아래 떠 있는 줄만큼 뺀 값, JS). */
@media (min-width:600px) and (max-width:760px){
  .kptu-follow-pane.kptu-follow-narrow{position:sticky;top:var(--follow-top,12px);align-self:start;max-height:var(--follow-max,calc(100dvh - var(--follow-top,12px) - 12px));overflow-y:auto}
  .kptu-follow-pane.kptu-follow-narrow .modal-action-footer{bottom:0}
}