/* Shell account panels live outside the scrolling navigation; Popover adds the top layer. */
.top-actions [data-kptu-logout].hidden{display:none!important}
.account-menu{flex:0 0 auto}
.account-trigger{border:0;background:transparent;color:var(--kptu-muted);font:inherit;font-weight:700;min-height:44px;min-width:44px;padding:9px 10px;display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.account-trigger span{font-size:10px}
.account-trigger:focus-visible{outline:2px solid var(--kptu-primary-ink);outline-offset:-2px}
.account-panel[hidden]{display:none!important}
.account-panel{position:fixed;z-index:60;inset:auto;margin:0;width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:8px;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)}
.account-action{display:flex;align-items:center;width:100%;min-height:44px;border:0;border-radius:var(--kptu-radius-sm);padding:8px 10px;text-align:left;background:transparent;color:var(--kptu-ink);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.account-action:hover,.account-action:focus-visible{background:var(--kptu-primary-soft)}
.account-panel{word-break:keep-all;overflow-wrap:normal}
@media(min-width:761px){#appView>.app-nav .account-menu{width:100%}.account-trigger{font-size:12.5px;line-height:1.25}}
.theme-panel{padding:var(--kptu-space-4);width:min(360px,calc(100vw - 24px));max-width:100%;box-sizing:border-box}
#themeModal{place-items:center;padding:12px}
.theme-panel .modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.theme-panel h2{font-size:var(--kptu-text-title);margin:0}
.theme-panel [data-close]{min-height:var(--kptu-touch-target);min-width:var(--kptu-touch-target)}
.theme-choices{display:grid;gap:8px;margin-top:12px}
.theme-choices button{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--kptu-touch-target);padding:8px 10px;text-align:left;color:var(--kptu-ink);background:var(--kptu-surface);border:1px solid var(--kptu-border);border-radius:var(--kptu-radius-sm)}
.theme-choices button[aria-pressed="true"]{border-color:var(--kptu-primary);background:var(--kptu-primary-soft)}
.theme-swatch{display:flex;gap:4px;flex-shrink:0}
.theme-swatch i{display:block;width:18px;height:18px;border-radius:var(--kptu-radius-pill);border:1px solid var(--kptu-border-strong);background:var(--kptu-bg)}
.theme-swatch i+i{background:var(--kptu-primary)}
.theme-selected{margin-left:auto;color:var(--kptu-muted);font-size:var(--kptu-text-meta);visibility:hidden;white-space:nowrap}
[aria-pressed="true"] .theme-selected{visibility:visible}


@media(min-width:1440px){#appView>.app-nav .account-trigger{font-size:13px}}

@media(max-width:760px){.account-trigger{font-size:12px}}

/* D-4a: one mobile shell, retaining account nodes and their original handlers. */
.mobile-shell-header,.mobile-tabs{display:none}
.mobile-menu[hidden]{display:none}
.mobile-menu{position:fixed;inset:0;z-index:45;background:color-mix(in srgb,var(--kptu-ink) 46%,transparent)}
.mobile-menu-panel{position:absolute;right:0;top:0;bottom:0;width:260px;max-width:100%;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:var(--kptu-surface);color:var(--kptu-ink);box-shadow:var(--kptu-shadow-float);animation:kptu-menu-enter .18s ease}
.mobile-menu-panel button{display:flex;align-items:center;width:100%;min-height:44px;border:0;background:transparent;color:var(--kptu-ink);padding:8px 10px;text-align:left;font:inherit;font-size:14px;cursor:pointer}
.mobile-menu-panel button:hover,.mobile-menu-panel button:focus-visible{background:var(--kptu-primary-soft)}
.mobile-menu-panel [data-kptu-logout]{color:var(--kptu-danger)}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:0 6px 8px 10px}.mobile-menu-head b{font-size:16px}.mobile-menu-head [data-mobile-menu-close]{position:relative;justify-content:center;flex:0 0 32px;width:32px;height:32px;min-height:32px;padding:0;color:var(--kptu-muted);font-size:22px;border-radius:var(--kptu-radius-sm)}.mobile-menu-head [data-mobile-menu-close]::before{content:"";position:absolute;inset:-6px}
@keyframes kptu-menu-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.mobile-menu-panel{animation:none}}
@media(max-width:760px){
  /* S48-6 UI-폰하단고정(2026-11-02 명진 결정, #1708 질문 3): 하단바 56px → 44px. 그림 22px·글자 12px는 그대로, 위아래 여백만 줄인다(누르는 범위 44px).
     이 한 값을 [+]·빠른 입력·전환 줄·시트·알림 자리가 함께 읽는다. */
  html:has(body.kptu-workspace-shell){--kptu-mobile-tab-height:48px}
  /* S49-8 UI-하단바위여백(2026-11-03 명진): 아이콘 위에 4px 여백. 그 만큼만 높이를 올리고(44→48) 같은 변수를 읽는 팝업·+ 버튼·시트는 자동으로 따라간다. */
  html:has(body.kptu-mobile-keyboard){--kptu-mobile-tab-height:0px}
  /* S48-6b UI-메뉴판쓰기창(2026-11-02 명진 결정, #1708 질문 5): 폰 쓰기 창(ed-window.js가 html.ed-window-open 하나를 켬)이 열리면 하단바를 숨기고 창이 화면 끝까지 쓴다.
     자판 상태와 같은 길: 이 한 값을 0으로 받아 창·창 안 고르기 시트가 함께 따라온다. 나가기는 ✕·뒤로 가기. */
  html:has(body.kptu-workspace-shell).ed-window-open{--kptu-mobile-tab-height:0px}
  #appView>.app-nav{display:none}
  .mobile-shell-header{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:12px;gap:12px}
  /* APP-위여백: 머리줄은 화면 이름이 있을 때만 자리를 차지한다(홈은 본문 맨 위 날짜가 제목이라 이름이 없다). 소유는 topbar-actions.js. */
  .mobile-shell-header[hidden]{display:none}
  [data-mobile-view-name]{font-size:16px;font-weight:700}
  .mobile-tabs{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(var(--kptu-tab-count,6),minmax(0,1fr));height:calc(var(--kptu-mobile-tab-height,48px) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;background:var(--kptu-surface);border-top:1px solid var(--kptu-border)}
  .mobile-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;min-width:44px;border:0;padding:4px 0 0;background:transparent;color:var(--kptu-muted);font:inherit;font-size:12px;font-weight:400;line-height:1.2;cursor:pointer}
  .mobile-tabs button[aria-current="page"]{color:var(--kptu-primary-ink);font-weight:700}
  .mobile-tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-tabs [aria-current="page"] svg{stroke-width:2.2}
  .mobile-tabs button:focus-visible{outline:2px solid var(--kptu-primary-ink);outline-offset:-2px}
  body.kptu-mobile-keyboard .mobile-tabs{display:none}
  html.ed-window-open .mobile-tabs{display:none}
}

/* MENU-HOME-편집: [메뉴 편집] 창(menu-edit.js)과 끌어 옮기기 부품(reorder-drag.js) 표시. 작고 낮게. */
.menu-edit-card{padding:var(--kptu-space-3,10px) var(--kptu-space-4,14px);width:min(380px,calc(100vw - 24px));max-width:100%;box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto}
.menu-edit-card .modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.menu-edit-card h2{font-size:var(--ds-text-title,15px);margin:0}
.menu-edit-actions{display:flex;gap:6px}
.menu-edit-actions button{min-height:28px;padding:0 10px;font-size:var(--ds-text-row,13px)}
.me-group h3{margin:8px 0 4px;font-size:var(--ds-text-section,13px);font-weight:600;color:var(--kptu-muted)}
.me-group h3 small{font-weight:400;margin-left:4px}
.me-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--kptu-border);border-radius:var(--kptu-radius-sm,6px);overflow:hidden}
.me-row{display:flex;align-items:center;gap:6px;min-height:28px;padding:0 8px 0 2px;border-top:1px solid var(--kptu-border);background:transparent}
.me-row:first-child{border-top:0}
.me-list:empty,.me-list:not(:has(.me-row)){min-height:32px}
.me-handle{display:inline-flex;align-items:center;justify-content:center;width:30px;min-height:26px;padding:0;border:0;background:transparent;color:var(--kptu-muted);font-size:15px;line-height:1;cursor:grab;touch-action:pan-y}
.me-handle.me-fixed{cursor:default;opacity:.45}
.me-handle:focus-visible{outline:2px solid var(--kptu-primary-ink);outline-offset:-2px}
.me-name{flex:1;min-width:0;font-size:var(--ds-text-row,13px)}
.me-tag{color:var(--kptu-muted);font-size:11px}
.me-cols{display:flex;flex-direction:column;gap:8px}
.me-lists{flex:1 1 auto;min-width:0}
/* MENU-세칸: PC 왼쪽 메뉴 미리보기. 위 메뉴 … 빈 공간 … 선 … 아래 붙는 메뉴. 작고 흐리게. */
.me-preview{margin:0;flex:0 0 auto}
.me-preview figcaption{margin:8px 0 4px;font-size:var(--ds-text-section,13px);font-weight:600;color:var(--kptu-muted)}
.me-pv-box{display:flex;flex-direction:column;min-height:180px;padding:4px 0;border:1px solid var(--kptu-border);border-radius:var(--kptu-radius-sm,6px);background:var(--kptu-surface-subtle)}
.me-pv-box ol{list-style:none;margin:0;padding:0}
.me-pv-box li{padding:2px 8px;font-size:var(--ds-text-meta,12px);line-height:1.5;color:var(--kptu-ink)}
.me-pv-gap{flex:1 1 auto;min-height:12px}
.me-pv-tail{border-top:1px solid var(--kptu-border);padding-top:2px}
@media (min-width:761px){
  .menu-edit-card{width:min(600px,calc(100vw - 24px))}
  .me-cols{flex-direction:row;align-items:stretch;gap:12px}
  .me-preview{width:170px;display:flex;flex-direction:column}
  .me-pv-box{flex:1 1 auto}
}
.me-note{margin:8px 0 0;font-size:var(--ds-text-meta,12px);line-height:1.5;color:var(--kptu-muted)}
.re-active,.re-active *{user-select:none;-webkit-user-select:none}
.re-dragging{opacity:.45}
.re-grabbed{background:var(--kptu-primary-soft)}
.re-drop-before{border-top:2px solid var(--kptu-primary-ink)}
.re-drop-end{border-bottom:2px solid var(--kptu-primary-ink)}
/* UI-업데이트기록입구: 계정 메뉴 [업데이트 기록] 줄 오른쪽 지금 판 이름(작고 흐린 글자). 못 읽으면 비운 채 자리를 차지하지 않는다. */
.account-action .account-action-name{flex:1;min-width:0}
.account-action .account-ver{flex:none;margin-left:8px;color:var(--kptu-muted);font-size:var(--ds-text-meta,11px);font-variant-numeric:tabular-nums}
.account-action .account-ver:empty{display:none}

/* S48-30 ▾ 펼침: 넓은 화면의 [화면 색 ▾]는 계정 버튼 바로 아래 작은 목록(자리는 anchored-popup.js). 바탕을 어둡게 하지 않는다. */
#themeModal.theme-anchored{background:transparent}
/* 고를 거리를 여는 버튼의 작은 ▾(줄 오른쪽 끝, 이름은 그대로 '화면 색'). ::after는 폰 메뉴에서 누르는 범위가 쓰므로 ::before. */
.account-action[data-theme-open]::before{content:"▾";content:"▾" / "";float:right;order:2;margin-left:6px;font-size:.85em;color:var(--kptu-muted)}
#themeModal.theme-anchored .theme-panel{position:fixed;overflow:auto;padding:var(--kptu-space-2,8px);box-shadow:var(--kptu-shadow-float)}