/* JY WORK OS · shared Braun / Dieter Rams visual language — 색·상태의 단일 원본.
   주황은 네 가지에만 쓴다: ① 오늘 ② 현재 위치(단계·탭·활성 패널) ③ 주요 행동 ④ 키보드 초점.
   휴일·링크·번호·선택된 타일·패널 제목은 중립색. 글자로 쓰는 주황은 --rams-orange-ink(AA 대비). */
:root {
  --rams-field: #d8d5cd;
  --rams-face: #e9e7e0;
  --rams-recess: #dedbd3;
  --rams-ink: #20201e;
  --rams-muted: #56544e;      /* 보조 글자 — face 6.1:1 · field 5.2:1 */
  --rams-quiet: #63615b;      /* 라벨·메타 — face 5.0:1 (이전 #8a877f 2.9:1) */
  --rams-disabled: #8a877f;   /* 비활성·장식 전용. 읽어야 하는 글자에는 쓰지 않는다 */
  --rams-line: #b8b4aa;
  --rams-soft-line: #cec9c0;
  --rams-orange: #df4f24;     /* 면·선·점 (큰 요소, 3:1 이상) */
  --rams-orange-ink: #a33a17; /* 작은 글자로 쓰는 주황 — face 5.3:1 */
  --rams-red: #aa3e31;
  --rams-popup-radius: 18px;
  --rams-pill: 999px;
  /* 그림자는 두 단계만(잉크색 · 번짐은 안쪽으로 당겨 가장자리가 퍼지지 않게). 1 = 메뉴 · 작은 팝오버, 2 = 떠 있는 패널 · 대화상자 · 서랍 · 끄는 타일.
     Dock 의 네이티브 카드(DockCards.cs LayeredCard.Shadow)도 같은 값이다. */
  --rams-shadow-1: 0 1px 2px rgba(32, 32, 30, .08), 0 8px 20px -6px rgba(32, 32, 30, .16);
  --rams-shadow-2: 0 1px 3px rgba(32, 32, 30, .08), 0 18px 44px -14px rgba(32, 32, 30, .26);
  --rams-shadow-knob: inset 0 0 0 1px var(--rams-line), 0 1px 2px rgba(32, 32, 30, .16);
  --rams-popup-shadow: var(--rams-shadow-2);

  /* MAIN aliases */
  --c-bg: var(--rams-field);
  --c-panel: var(--rams-face);
  --c-panel-2: var(--rams-recess);
  --c-line: var(--rams-line);
  --c-line-soft: var(--rams-soft-line);
  --c-ink: var(--rams-ink);
  --c-ink-2: var(--rams-muted);
  --c-ink-3: var(--rams-quiet);
  --c-accent: var(--rams-orange);
  --c-accent-ink: var(--rams-orange-ink);

  /* SUB aliases */
  --bg: var(--rams-field);
  --panel: var(--rams-face);
  --panel2: var(--rams-recess);
  --soft: var(--rams-soft-line);
  --ink: var(--rams-ink);
  --muted: var(--rams-muted);
  --faint: var(--rams-quiet);
  --accent: var(--rams-orange);
  --accent-ink: var(--rams-orange-ink);

  /* Native controls (checkbox·radio·range) follow the ink, never Windows blue. */
  accent-color: var(--rams-ink);
}

/* 다크(10/4) — <html data-theme="dark"> (ui/theme.js). 같은 토큰 이름에 값만 바꾼다: 따뜻한 숯색 바탕 · 밝은 잉크 · 조금 밝힌 주황.
   그림자는 검정으로 짙게(어두운 바탕에서도 뜬 것이 보이게). 네이티브 칸 · 스크롤 막대도 어둡게(color-scheme). */
html[data-theme="dark"] {
  --rams-field: #161615;
  --rams-face: #22211f;
  --rams-recess: #2c2b28;
  --rams-ink: #ece9e2;
  --rams-muted: #bdb9b0;
  --rams-quiet: #9d998f;
  --rams-disabled: #6d6a63;
  --rams-line: #4a4843;
  --rams-soft-line: #353430;
  --rams-orange: #ec6a3c;
  --rams-orange-ink: #f39a71;
  --rams-red: #e07062;
  --rams-shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -6px rgba(0, 0, 0, .55);
  --rams-shadow-2: 0 1px 3px rgba(0, 0, 0, .4), 0 18px 44px -14px rgba(0, 0, 0, .7);
  --rams-shadow-knob: inset 0 0 0 1px var(--rams-line), 0 1px 2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--rams-field); color: var(--rams-ink); }

/* One focus language across MAIN and SUB: 2px 주황 링, 2px 떨어져서.
   선택·현재 상태는 outline 을 쓰지 않는다(채움·밑줄·선 굵기) → 초점과 절대 겹치지 않는다. */
:where(button, input, textarea, select, summary, a, [tabindex]):focus-visible {
  outline: 2px solid var(--rams-orange);
  outline-offset: 2px;
}
:where(button, input, textarea, select, summary, a, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* OS 문법: 웹 페이지처럼 굴지 않는다 — 화면 틀은 선택되지 않고, 버튼은 손가락 커서가 아니라 화살표(Windows 앱과 같게),
   당겨서 튕기는 스크롤도 없다. 글을 쓰고 읽는 곳(입력칸·노트·카드·참고 텍스트)만 선택할 수 있다. */
html { overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; }
:where(input, textarea, [contenteditable="true"], [contenteditable="plaintext-only"], #note-reader, #preview-body, .note-body, .reference-text, pre, code) {
  -webkit-user-select: text; user-select: text;
}
button, select, summary, [role="button"], [role="tab"] { cursor: default !important; }
a[href] { cursor: pointer; }

/* Slim, always-visible scrollbars everywhere (never the Windows default). */
/* scrollbar-width · scrollbar-color(표준 속성)는 쓰지 않는다: Chromium 121+ 에서는 이 둘이 있으면 아래 ::-webkit-scrollbar 규칙을 무시하고 Windows 기본(위아래 화살표)으로 그린다 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rams-line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--rams-muted); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
:where(button, [role="button"]):active {
  transform: translateY(1px);
}

/* Modal case: a quiet body with one control strip. */
.modal__scrim {
  background: rgba(32, 32, 30, 0.42) !important;
}
.modal__box,
dialog.workspace-dialog {
  color: var(--rams-ink);
  background: var(--rams-face);
  border: 1px solid var(--rams-line) !important;
  border-radius: var(--rams-popup-radius) !important;
  box-shadow: var(--rams-popup-shadow) !important;
}
.modal__box { overflow: hidden; }
.modal__box::before,
dialog.workspace-dialog::before {
  content: none;
}
dialog.workspace-dialog {
  padding: 0 !important;
  overflow: auto;
}
dialog.workspace-dialog::backdrop {
  background: rgba(32, 32, 30, 0.46) !important;
}

.modal__head,
.workspace-dialog > .dialog-head {
  position: relative;
  min-height: 76px;
  margin: 0 !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--rams-soft-line) !important;
  background-color: var(--rams-face);
}
/* Small dial graphic: visual identity without competing with the title. */
.modal__head::after,
.workspace-dialog > .dialog-head::after {
  content: none;
}
.modal__title,
.workspace-dialog > .dialog-head h2 {
  max-width: calc(100% - 56px);
  margin: 0;
  color: var(--rams-ink);
  font-weight: 600 !important;
  letter-spacing: -.035em;
}

/* Icon controls are flat round buttons (line + face, no bevel); text actions remain readable pills. Bevel is for knobs only. */
.modal__head > [data-close],
.workspace-dialog > .dialog-head > button,
.drawer__head > #drawer-close {
  display: grid !important;
  width: 40px !important;
  min-width: 40px;
  height: 40px !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid var(--rams-line) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--rams-ink) !important;
  font-size: 16px !important;
  line-height: 1;
}
.modal__head > [data-close]:hover,
.workspace-dialog > .dialog-head > button:hover,
.drawer__head > #drawer-close:hover {
  border-color: var(--rams-ink) !important;
  color: var(--rams-ink) !important;
}
.modal__head > [data-close]:active,
.workspace-dialog > .dialog-head > button:active,
.drawer__head > #drawer-close:active {
  background: var(--rams-line) !important;
}

.modal__head > [data-close] svg, .drawer__head > #drawer-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.modal__body {
  padding: 24px !important;
  background: var(--rams-face);
}
.modal__body :where(input, textarea, select),
.workspace-dialog > input {
  border-color: var(--rams-line) !important;
  border-radius: 10px !important;
  background: var(--rams-recess) !important;
}
.modal__foot,
.preview-foot {
  min-height: 68px;
  padding: 14px 24px !important;
  border-top: 1px solid var(--rams-soft-line) !important;
  background: var(--rams-recess) !important;
}
.modal__foot .btn,
.preview-foot button {
  min-height: 38px;
  padding: 8px 18px;
  border-radius: var(--rams-pill) !important;
}
.modal__foot .btn--primary,
.preview-foot button {
  border-color: var(--rams-ink) !important;
  background: var(--rams-ink) !important;
  color: var(--rams-face) !important;
}
.modal__foot .btn--primary:hover,
.preview-foot button:hover {
  border-color: var(--rams-orange) !important;
  background: var(--rams-orange) !important;
  filter: none !important;
}

/* SUB dialogs: title → content → decision stays visually obvious. */
.workspace-dialog > :not(.dialog-head):not(.preview-foot) { margin-inline: 24px; }
.workspace-dialog > input {
  width: calc(100% - 48px) !important;
  margin: 20px 24px 0 !important;
}
.workspace-dialog > #link-candidates,
.workspace-dialog > #sticky-list { margin: 14px 24px 24px !important; }
#link-candidates > button,
#sticky-list > button {
  border-radius: 10px !important;
}
.note-preview > #preview-body {
  margin: 0 !important;
  padding: 24px 30px 14px !important;
}
.note-preview > .preview-foot { margin: 0 !important; }
.note-preview .preview-section.is-primary {
  border-radius: 12px !important;
  border-left: 4px solid var(--rams-orange) !important;
}

/* Compact menus repeat the same casing and keep destructive actions quiet
   until the pointer reaches them. */
.sheet-menu,
.ctx {
  border: 1px solid var(--rams-line) !important;
  background: var(--rams-face) !important;
}
.sheet-menu::before,
.ctx::before {
  content: none;
}
.sheet-menu button,
.ctx button {
  border-radius: 8px !important;
}
.sheet-menu button:hover,
.sheet-menu button:focus,
.ctx button:hover,
.ctx button:focus-visible { background: var(--rams-recess) !important; }

/* 메뉴 디테일 — MAIN 우클릭 · SUB 시트 메뉴 · Dock 네이티브 메뉴가 같은 모양:
   12px 카드 · 부드러운 그림자 · 왼쪽 아이콘 칸 · 오른쪽 단축키 칩 · 얇은 구분선 */
.sheet-menu,
.ctx {
  padding: 6px !important;
  border-radius: 12px !important;
  box-shadow: var(--rams-shadow-1) !important;
}
.sheet-menu button,
.ctx button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 0 10px !important;
  height: auto !important;
  min-height: 34px !important;
  font-size: 13px !important;
}
.ctx button > span { flex: 1 1 auto; }
.ctx button small { margin-left: auto; color: var(--rams-quiet) !important; font-size: 11px !important; letter-spacing: 0 !important; }
.sheet-menu kbd,
.ctx kbd {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  border: 1px solid var(--rams-soft-line);
  border-radius: 5px;
  background: var(--rams-recess);
  font: 500 11px/1.5 inherit;
  font-family: inherit;
  color: var(--rams-muted);
  text-align: center;
  white-space: nowrap;
}
.sheet-menu button:hover kbd,
.sheet-menu button:focus kbd { background: var(--rams-face); }
.sheet-menu hr,
.ctx .ctx__sep {
  height: 0 !important;
  margin: 5px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--rams-soft-line) !important;
  background: none !important;
}
.ctx__ic { flex: none; width: 16px; height: 16px; display: grid; place-items: center; color: var(--rams-muted); }
.ctx__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Rams 선 아이콘(ui/rams-icons.js): f = 잉크 채움 · o = 주황 점 · os = 주황 선 */
.ctx__ic svg .f { fill: currentColor; stroke: none; }
.ctx__ic svg .o { fill: var(--rams-orange); stroke: none; }
.ctx__ic svg .os { stroke: var(--rams-orange); }
.ctx button[disabled] .ctx__ic svg .o { fill: currentColor; }
/* SUB 메뉴(.sheet-menu)도 같은 아이콘 칸: 아이콘 · 글 · 단축키 */
.sheet-menu button:has(> .ctx__ic) { justify-content: flex-start; gap: 10px; }
.sheet-menu button:has(> .ctx__ic) > kbd { margin-left: auto; padding-left: 16px; }
.ctx button:hover .ctx__ic,
.ctx button:focus-visible .ctx__ic { color: var(--rams-ink); }
.ctx button[disabled] .ctx__ic { opacity: .45; }

.drawer.tile {
  overflow: hidden;
  border-radius: var(--rams-popup-radius) var(--rams-popup-radius) 0 0 !important;
  box-shadow: 0 -1px 3px rgba(32, 32, 30, .08), 0 -18px 44px -14px rgba(32, 32, 30, .26) !important;
}
.drawer__head {
  min-height: 64px;
  border-top: 5px solid var(--rams-orange) !important;
  background: var(--rams-recess);
}

/* Current position: ink text + orange bar (not orange text, not an outline). */
.sub-workspace-tabs button[aria-pressed="true"], .note-view-switch button[aria-pressed="true"] { color: var(--rams-ink) !important; }

@media (max-width: 700px) {
  .modal__head::after,
  .workspace-dialog > .dialog-head::after { display: none; }
  .modal__title,
  .workspace-dialog > .dialog-head h2 { max-width: calc(100% - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 위치 표시 — MAIN·SUB 공통 문법: "JY WORK OS  MAIN / HOME" · "JY WORK OS  SUB  [REF/Canvas ZETTELKASTEN UTILITY]  …  REF/Canvas / 프로젝트 / 캔버스"
   두 모니터가 하나의 OS 안의 다른 공간이라는 것을 같은 모양으로 보여 준다. */
.os-where { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 12px; font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--rams-quiet); white-space: nowrap; }
.os-where b { font-weight: 600; color: var(--rams-muted); }
.os-where span::before { content: "/"; margin-right: 6px; color: var(--rams-line); }
.topbar__right .os-where span { text-transform: none; letter-spacing: .02em; }
/* SUB 오른쪽 위치 표시: 첫 칸(REF/Canvas 등)도 뒤 칸과 같은 크기 · 같은 자간 — 대소문자는 적힌 그대로 */
.topbar__right .os-where b { text-transform: none; letter-spacing: .02em; font-size: inherit; }

/* 이력 버튼(되돌리기 · 다시 실행) — MAIN 타임라인 툴바(.tl__ctl)와 같은 모양·규칙:
   선 한 줄 알약 안에 원형 아이콘 버튼 두 개 · 되돌릴 것이 없으면 35% · Ctrl+Z / Ctrl+Shift+Z 는 지금 선택한 영역에만 */
.hist { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line, var(--rams-line)); flex: none; vertical-align: middle; }
.hist button, .toolbar .hist button, .reader-toolbar .hist button { width: calc(24px * var(--frame-unit, 1)); height: calc(24px * var(--frame-unit, 1)); min-width: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; box-shadow: none !important; color: var(--muted, var(--rams-muted)); display: grid; place-items: center; }
.hist button:hover:not(:disabled) { background: var(--panel2, var(--rams-recess)) !important; color: var(--ink, var(--rams-ink)); }
.hist button:disabled { opacity: .35; }
.hist svg { width: calc(15px * var(--frame-unit, 1)); height: calc(15px * var(--frame-unit, 1)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* MAIN ↔ SUB 토글(10/2) — 모니터가 하나일 때만, 두 화면 같은 자리(왼쪽 위 이름 옆). 입체는 노브에만 */
.mode-sw { display: inline-flex; align-items: center; gap: calc(7px * var(--frame-unit, 1)); margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: calc(11px * var(--frame-unit, 1)); letter-spacing: .12em; color: var(--rams-quiet); cursor: pointer; white-space: nowrap; }
.mode-sw[hidden] { display: none; }
.mode-sw b { font-weight: 400; }
.mode-sw b.is-on { font-weight: 600; color: var(--rams-ink); }
.mode-sw__track { position: relative; flex: none; width: calc(28px * var(--frame-unit, 1)); height: calc(14px * var(--frame-unit, 1)); border-radius: 999px; background: var(--rams-recess); box-shadow: inset 0 0 0 1px var(--rams-line); }
.mode-sw__track i { position: absolute; top: calc(2px * var(--frame-unit, 1)); left: calc(2px * var(--frame-unit, 1)); width: calc(10px * var(--frame-unit, 1)); height: calc(10px * var(--frame-unit, 1)); border-radius: 50%; background: var(--rams-orange); }   /* 주황 = 지금 있는 쪽 */
.mode-sw[aria-checked="true"] .mode-sw__track i { left: calc(16px * var(--frame-unit, 1)); }
.mode-sw:focus-visible { outline: 0; box-shadow: 0 0 0 1.5px var(--rams-ink); border-radius: 999px; }
/* 토글이 자리를 말해 주므로 옆의 MAIN · SUB 글자는 접는다 */
.mode-sw:not([hidden]) + .os-where b, .mode-sw:not([hidden]) + .label { display: none; }
.mode-sw:not([hidden]) + .os-where span::before { content: none; }
/* 전환 순간(호스트 soloShown → html.solo-in): 위 막대는 그대로, 내용만 살짝 올라오고 주황 노브가 반대쪽에서 미끄러져 온다 */
@keyframes solo-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes mode-knob-to-sub { from { left: calc(2px * var(--frame-unit, 1)); } }
@keyframes mode-knob-to-main { from { left: calc(16px * var(--frame-unit, 1)); } }
html.solo-in .os > :not(.topbar), html.solo-in .sub > :not(.topbar) { animation: solo-in .42s cubic-bezier(.22, 1, .36, 1) backwards; }
html.solo-in .mode-sw[aria-checked="true"] .mode-sw__track i { animation: mode-knob-to-sub .42s cubic-bezier(.22, 1, .36, 1) backwards; }
html.solo-in .mode-sw[aria-checked="false"] .mode-sw__track i { animation: mode-knob-to-main .42s cubic-bezier(.22, 1, .36, 1) backwards; }
@media (prefers-reduced-motion: reduce) { html.solo-in .os > *, html.solo-in .sub > *, html.solo-in .mode-sw__track i { animation: none !important; } }