/* 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로 따로여서 화면을 옮길 때 사이드바·본문 자리가 흔들렸다. */
  main{--kptu-wide-pad:clamp(24px,2.2vw,42px);max-width:1920px;margin:0 auto;padding:12px var(--kptu-wide-pad) 76px}

  #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 40;position:sticky;top:12px;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)}

  #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-topline-space:calc(var(--kptu-topline-height) + var(--kptu-topline-gap))}
  #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}
  #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{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}
.topline-add-menu button:hover,.topline-add-menu button: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)에 붙는다. */
@media (min-width:761px){
  .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;overscroll-behavior:contain}
  .kptu-follow-pane .modal-action-footer{bottom:0}
}