/* 지시자: ohjh (2026-11-13) / 작성: Claude Sonnet 5.5 — note 프로젝트
 * 디자인 패턴: C:\Bowoosystem\Box\B.ONE.SCADA\mockups (common.css v5c + themes.css) 를 따른다.
 * 다크 크롬 + 회색 콘텐츠, 1px 보더, 직각에 가까운 모서리, 12px 기본 글자, 모노톤 버튼.
 * 예외(ohjh 지시): 로고와 로그인 화면에만 초록 계열(--brand)을 쓴다. */

/* ── 테마 토큰: themes.css 의 dark / light 그대로 ── */
:root, [data-theme="dark"] {
  --bg:#010102; --s1:#050507; --s2:#0b0b0e; --c1:#17181b; --c2:#1e1f23; --c3:#26272c;
  --line:#1c1d22; --line2:#2a2b31; --text:#e8e8ea; --muted:#8b8e94; --dim:#5b5e64; --text-h:#ffffff; --pt:#e8e8ea; --sel:#2b2c32;
  --ok:#5fb98a; --okbg:#12261c; --warn:#e5a23a; --warnbg:#2a2113; --err:#ef5350; --errbg:#2a1517;
  --btn:#1e1f23; --btn-bd:#2e2f35; --btn-h:#2a2b31; --btn-hbd:#40414a; --btn2:#26272c; --btn2-bd:#383940; --btn2-h:#33343a; --btn2-hbd:#4a4b54;
  --logo-fg:#04140c; --scrim:#000a; --rule:#3a3d46;
}
[data-theme="light"] {
  --bg:#ffffff; --s1:#f6f6f7; --s2:#ededef; --c1:#ffffff; --c2:#f4f4f5; --c3:#e9eaec;
  --line:#e4e4e7; --line2:#d7d7dc; --text:#18181b; --muted:#62626d; --dim:#9a9aa5; --text-h:#000000; --pt:#18181b; --sel:#e6e6ea;
  --ok:#1a9b63; --okbg:#e3f5ec; --warn:#b86e0a; --warnbg:#fbf1de; --err:#d6403d; --errbg:#fbe9e9;
  --btn:#f4f4f5; --btn-bd:#dcdce0; --btn-h:#e9e9ec; --btn-hbd:#c4c4cb; --btn2:#ececef; --btn2-bd:#cfcfd5; --btn2-h:#e0e0e4; --btn2-hbd:#b8b8c0;
  --logo-fg:#ffffff; --scrim:#0006; --rule:#c6cad2;
}
:root {
  --brand:#2e9e6b; --brand-h:#37b37b;   /* 초록 계열: 로고·로그인 전용 */
  --font:Inter,"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font: 12px/1.4 var(--font); overflow: hidden;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.sp { flex: 1; min-width: 0; }
.mono { font-family: var(--mono); font-size: 11px; }
.muted { color: var(--muted); } .dim { color: var(--dim); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.ic { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
i[data-ic] { display: inline-flex; }

/* ── 공통 버튼/입력 (mockup .btn / .tb) ── */
.btn { height: 24px; padding: 0 10px; border: 1px solid var(--btn-bd); border-radius: 5px; background: var(--btn); color: var(--text); white-space: nowrap; }
.btn:hover { background: var(--btn-h); border-color: var(--btn-hbd); color: var(--text-h); }
.btn.pri { background: var(--btn2); border-color: var(--btn2-bd); color: var(--text-h); font-weight: 500; }
.btn.pri:hover { background: var(--btn2-h); border-color: var(--btn2-hbd); }
.btn.danger { color: var(--err); }
.tb, .ib { height: 24px; min-width: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.ib { height: 30px; min-width: 30px; color: var(--text); }
.ib svg.ic { width: 19px; height: 19px; }
.tb:hover, .ib:hover { background: var(--btn-h); color: var(--text-h); }
.tb.act, .ib.act { background: var(--sel); color: var(--text-h); }
.tbsep { width: 1px; height: 16px; background: var(--line2); margin: 0 6px; flex: none; }
input.f, select.f { height: 24px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg); color: var(--text); width: 100%; }
input.f:focus, select.f:focus, .title:focus { outline: 1px solid var(--text); outline-offset: -1px; }
.check { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; }
.check input { accent-color: var(--muted); }
.error { color: var(--err); min-height: 1.4em; font-size: 11.5px; }

/* ── 로고 / 로그인 (초록 계열) ── */
.logo { width: 22px; height: 22px; border-radius: 5px; display: block; flex: none; }   /* favicon(icons/icon.svg)과 같은 아이콘 */
.logo.big { width: 52px; height: 52px; border-radius: 12px; }
#login { height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--s1); }
.lcard { width: 100%; max-width: 320px; background: var(--c1); border: 1px solid var(--line2); border-radius: 6px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.lcard .lhead { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; }
.lcard h1 { font-size: 15px; font-weight: 600; }
.lcard input.f { height: 32px; }
.lcard input.f:focus { outline-color: var(--brand); }
.lcard .check input { accent-color: var(--brand); }
.btn.green { height: 32px; background: var(--brand); border-color: var(--brand); color: var(--logo-fg); font-weight: 600; }
.btn.green:hover { background: var(--brand-h); border-color: var(--brand-h); color: var(--logo-fg); }
.linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 4px; font-size: 11.5px; }
.linkbtn:hover { color: var(--brand); }

/* ── 앱 프레임: 메뉴바 / 작업영역(브라우저 + 노트) / 상태바. 속성 바는 노트 쪽에만 있다 ── */
.app { display: grid; height: 100dvh; grid-template-rows: 38px 1fr 22px; background: var(--s1);
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.menubar { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--s1); position: relative; }
.brand { font-weight: 600; margin: 0 8px 0 4px; }

/* 속성 바 (표준 에디터 모양: 큰 아이콘 버튼, 그룹 구분선, 줄바꿈 허용) */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--s1); flex: none; }
.tgroup { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.wrapgroup { gap: 4px 2px; }
.tgroup > *, .toolbar > * { flex: none; }
.seg { display: flex; border: 1px solid var(--line2); border-radius: 5px; overflow: hidden; margin-right: 6px; }
.seg .tb { border-radius: 0; height: 28px; }
.app.no-note #toolbar { display: none; }   /* 노트를 열었을 때만 속성 바 표시 */
.toolbar .tb { height: 30px; min-width: 30px; font-size: 12px; color: var(--text); }
.toolbar .tb.sq { width: 30px; padding: 0; font-size: 14px; }
.toolbar .tb svg.ic { width: 18px; height: 18px; }
.toolbar .tb:hover { background: var(--btn-h); }
.toolbar .tb.act { background: var(--sel); color: var(--text-h); box-shadow: inset 0 0 0 1px var(--btn2-hbd); }
.toolbar .tbsep { height: 22px; margin: 0 7px; }
.toolbar select.f { width: auto; height: 28px; padding: 0 6px; font-size: 12px; background: var(--btn); border: 1px solid var(--btn-bd); border-radius: 4px; }
.toolbar select.f:hover { border-color: var(--btn-hbd); }
#fmt-block { min-width: 84px; } #fmt-size { min-width: 58px; }
.colorbtn { position: relative; flex-direction: column; gap: 1px; justify-content: center; }
.colorbtn .cg { font-weight: 700; font-size: 15px; line-height: 15px; }
.colorbtn svg.ic { width: 16px; height: 16px; }
.colorbtn .bar { display: block; width: 18px; height: 3px; border-radius: 1px; background: var(--text); }
.glabel { color: var(--text); font-weight: 600; margin-right: 4px; font-size: 12px; }
.cbtn { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.cbtn input[type=color] { width: 28px; height: 26px; padding: 0; border: 1px solid var(--line2); border-radius: 4px; background: none; flex: none; cursor: pointer; }
.swatches { display: inline-flex; gap: 4px; align-items: center; margin: 0 6px 0 0; }
.swatches button { width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--btn2-hbd); padding: 0; font-size: 11px; font-weight: 700; color: var(--text); display: grid; place-items: center; }
.swatches button.on { outline: 2px solid var(--text-h); outline-offset: 1px; }
.wctl { display: inline-flex; align-items: center; gap: 4px; }
.wctl .wlabel { color: var(--text); font-weight: 600; margin-right: 2px; font-size: 12px; }
.wctl .wbtn { width: 28px; height: 28px; min-width: 28px; padding: 0; border: 1px solid var(--btn-bd); border-radius: 4px; background: var(--btn); color: var(--text-h); font-size: 17px; line-height: 1; display: grid; place-items: center; }
.wctl .wbtn:hover { background: var(--btn-h); border-color: var(--btn-hbd); }
.wctl input.num { width: 44px; height: 28px; text-align: center; border: 1px solid var(--btn-bd); border-radius: 4px; background: var(--bg); color: var(--text-h); font-family: var(--mono); font-size: 12px; -moz-appearance: textfield; }
.wctl input.num::-webkit-outer-spin-button, .wctl input.num::-webkit-inner-spin-button { -webkit-appearance: none; }
.wctl .unit { color: var(--muted); font-size: 11px; }
.wprev { width: 64px; height: 28px; border: 1px solid var(--btn-bd); border-radius: 4px; background: var(--c1); display: grid; place-items: center; margin-left: 4px; }
.wprev i { display: block; width: 44px; border-radius: 99px; background: var(--text); }
.check { color: var(--text); margin-left: 6px; }

.ws { display: grid; grid-template-columns: 270px 1fr; min-height: 0; position: relative; }
.app.nav-hidden .ws { grid-template-columns: 1fr; }   /* 브라우저만 숨기고 노트는 그대로 */
.app.nav-hidden .dock { display: none; }
.dock { background: var(--c1); display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); }
.dh { height: 32px; display: flex; align-items: center; gap: 2px; padding: 0 4px 0 10px; border-bottom: 1px solid var(--line); background: var(--s1); font-weight: 500; flex: none; }
.dh .tt { flex: 1; }
.desc { border-top: 1px solid var(--line2); padding: 7px 10px; color: var(--dim); font-size: 11px; background: var(--c2); flex: none; }
.desc b { color: var(--muted); font-weight: 500; display: block; margin-bottom: 2px; }

/* 트리 (mockup .tr) */
.tree { flex: 1; overflow-y: auto; padding: 4px 0 24px; -webkit-user-select: none; user-select: none; }
.tr { display: flex; align-items: center; gap: 6px; height: 28px; padding-right: 8px; white-space: nowrap; position: relative; cursor: pointer; -webkit-touch-callout: none; }
.tr:hover { background: var(--c2); }
.tr.sel { background: var(--c3); box-shadow: inset 2px 0 0 var(--pt); }
.tr .grip { width: 14px; text-align: center; color: var(--muted); font-size: 10px; letter-spacing: -2px; cursor: grab; touch-action: none; flex: none; opacity: .6; }
.tr .ch { width: 12px; color: var(--muted); text-align: center; flex: none; }
.tr .ch svg { width: 12px; height: 12px; stroke-width: 2.4; transition: transform .1s; }
.tr .ch.open svg { transform: rotate(90deg); }
.tr .ico { color: var(--text); flex: none; }
.tr .ico svg { width: 19px; height: 19px; }
.tr.folder .ico svg { fill: var(--muted); fill-opacity: .28; }   /* 폴더는 면을 살짝 채워 한눈에 구분 */
.tr.hid .ico { opacity: .6; }
.tr .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tr .ct { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.tr .hd { color: var(--muted); flex: none; }
.tr.hid .nm, .tr.hid .ico { color: var(--dim); }
.tr.dragging { opacity: .4; }
.tr.drop-inside { background: var(--c3); outline: 1px solid var(--text); outline-offset: -1px; }
.tr.drop-before::before, .tr.drop-after::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--text); }
.tr.drop-before::before { top: -1px; } .tr.drop-after::after { bottom: -1px; }
.tree.drop-root { outline: 1px dashed var(--text); outline-offset: -3px; }
.drag-ghost { position: fixed; z-index: 400; pointer-events: none; background: var(--btn2); border: 1px solid var(--btn2-bd); color: var(--text-h); padding: 3px 10px; border-radius: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 페이지(콘텐츠) — 작업영역 전체를 쓴다 */
.canvas { position: relative; background: var(--c1); overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.empty { margin: auto; color: var(--dim); text-align: center; padding: 24px; }
.page-scroll { flex: 1; overflow: auto; min-height: 0; }
.page { position: relative; min-height: 100%; padding: 20px 32px 120px; display: flex; flex-direction: column; }
.page .title { display: block; width: 100%; border: 0; background: transparent; color: var(--text-h); font: 600 20px/1.3 var(--font); padding: 2px 0; outline: none; }
.page .title::placeholder { color: var(--dim); font-weight: 400; }
.page .date { color: var(--dim); font-size: 11px; padding: 2px 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line2); }
.body { flex: 1; min-height: 240px; outline: none; font-size: 13px; line-height: 24px; word-break: break-word; overflow-wrap: anywhere; }
/* 줄 노트: 줄 간격(24px)을 본문 줄 높이와 맞춰 글씨가 줄 위에 앉는다 */
.page.ruled .body { background-image: repeating-linear-gradient(to bottom, transparent 0 23px, var(--rule) 23px 24px); }
.body:empty::before { content: attr(data-ph); color: var(--dim); }
.body h1 { font-size: 20px; } .body h2 { font-size: 17px; } .body h3 { font-size: 14.5px; }
.body h1, .body h2, .body h3 { line-height: 24px; margin: 0; }
.body ul, .body ol { padding-left: 24px; } .body blockquote { border-left: 2px solid var(--line2); padding-left: 10px; color: var(--muted); }
.body p, .body div { min-height: 24px; }
.page canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-select: none; }
.page.ink-mode canvas { pointer-events: auto; touch-action: pan-y pinch-zoom; cursor: crosshair; }
.page.ink-mode .body, .page.ink-mode .title { user-select: none; -webkit-user-select: none; }

/* 상태바 (mockup .status) */
.status { display: flex; align-items: center; gap: 16px; padding: 0 10px 0 0; border-top: 1px solid var(--line); background: var(--s1); color: var(--muted); font-size: 11px; overflow: hidden; white-space: nowrap; }
.status .ready { background: var(--sel); color: var(--text-h); height: 100%; padding: 0 12px; display: flex; align-items: center; font-weight: 600; min-width: 64px; justify-content: center; }
.status .ready.bad { background: var(--errbg); color: var(--err); }

/* 사용자 정보 오버레이 (원노트식 계정 플라이아웃) */
.userpop { position: absolute; top: 38px; right: 8px; width: 260px; z-index: 300; background: var(--c1); border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 8px 28px #0008; }
.userpop .uhead { display: flex; gap: 10px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line2); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: var(--logo-fg); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.userpop .uname { font-weight: 600; font-size: 13px; } .userpop .uid { color: var(--dim); font-size: 11px; }
.userpop .urow { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line2); color: var(--muted); }
.userpop .ufoot { padding: 8px 10px; display: flex; justify-content: flex-end; }

/* 팝업(대화상자·메시지 박스) */
.dlg-back { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: 16px; }
.dlg { width: 100%; max-width: 340px; background: var(--c1); border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 12px 40px #000a; display: flex; flex-direction: column; max-height: 90dvh; }
.dlg.wide { max-width: 760px; }
.dlg .dh { height: 30px; padding-left: 12px; border-radius: 6px 6px 0 0; }
.dlg-body { padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }
.dlg-body .msg { white-space: pre-wrap; line-height: 1.6; font-size: 12.5px; }
.dlg-body label.fl { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 11px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 14px 12px; }
.popmenu { position: fixed; z-index: 350; min-width: 170px; background: var(--c1); border: 1px solid var(--line2); border-radius: 5px; box-shadow: 0 8px 28px #000a; padding: 3px 0; }
.popmenu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 12px; border: 0; background: none; color: var(--text); text-align: left; }
.popmenu button:hover { background: var(--c3); }
.popmenu button.danger { color: var(--err); }
.popmenu .mh { padding: 4px 12px 5px; color: var(--dim); font-size: 10.5px; border-bottom: 1px solid var(--line2); margin-bottom: 3px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-back { position: fixed; inset: 0; z-index: 340; }

/* 사용자 관리 표 */
.utbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.utbl th { color: var(--dim); background: var(--c2); font-weight: 400; font-size: 10.5px; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line2); }
.utbl td { padding: 3px 8px; border-bottom: 1px solid var(--line2); white-space: nowrap; height: 28px; }
.utbl select { height: 22px; background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; padding: 0 2px; }

/* 좁은 화면: 브라우저는 왼쪽에서 겹쳐 나오는 서랍 */
@media (max-width: 719px) {
  .ws, .app.nav-hidden .ws { grid-template-columns: 1fr; }
  .dock { position: absolute; z-index: 30; left: 0; top: 0; bottom: 0; width: min(86vw, 320px); box-shadow: 8px 0 24px #0008; }
  .app.nav-hidden .dock { display: none; }
  .page { padding: 14px 14px 100px; }
  .brand { display: none; }
  .toolbar { padding: 5px 6px; }
}

/* 색상 팔레트 팝업 */
.popmenu.palette { min-width: 0; padding: 0 0 6px; }
.popmenu.palette .pal { display: grid; grid-template-columns: repeat(5, 26px); gap: 5px; padding: 8px 10px; }
.popmenu.palette .pal button { width: 26px; height: 26px; padding: 0; border: 1px solid var(--btn2-hbd); border-radius: 4px; }
.popmenu.palette .pal button.none { display: grid; place-items: center; color: var(--muted); background: var(--c2); }
.popmenu.palette .custom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px 0; color: var(--muted); }
.popmenu.palette .custom input { width: 34px; height: 22px; padding: 0; border: 1px solid var(--line2); background: none; }

/* 속성 바 그룹은 남은 폭 안에서 줄바꿈 (필기 설정이 우측에서 잘리지 않게) */
.toolbar > .wrapgroup { flex: 1 1 0; min-width: 0; }
#color-group, .wctl { flex-wrap: wrap; }
@media (max-width: 719px) {
  .toolbar > .wrapgroup { flex: 1 1 100%; }
  .wrapgroup > .tbsep { display: none; }
  .wrapgroup { gap: 6px 10px; }
}

/* 상태바: 눌러야 할 것처럼 보이지 않게 — 채움 없는 "이름 값" 정보 표시 */
.status { padding-left: 12px; gap: 22px; cursor: default; user-select: none; -webkit-user-select: none; }
.status .si { display: inline-flex; align-items: center; gap: 6px; }
.status .si em { font-style: normal; color: var(--dim); }
.status .si span { color: var(--text); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); display: inline-block; flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.err { background: var(--err); }
/* 트리 잠금 아이콘 */
.tr .lk { flex: none; color: var(--muted); }
.tr .lk svg { width: 15px; height: 15px; }
.tr.locked .lk { color: var(--text); }

/* 브라우저 숨김: 헤더 끝 버튼, 숨기면 노트 영역 왼쪽 가장자리의 여는 탭 */
.navopen { position: absolute; left: 0; top: 56px; z-index: 15; width: 20px; height: 46px; padding: 0; display: none; place-items: center;
  border: 1px solid var(--btn2-hbd); border-left: 0; border-radius: 0 7px 7px 0; background: var(--s1); color: var(--text); }
.navopen:hover { background: var(--btn-h); color: var(--text-h); }
.navopen svg.ic { width: 14px; height: 14px; }
.app.nav-hidden .navopen { display: grid; }
.app.nav-hidden .page { padding-left: 44px; }
/* 상태바 위치 breadcrumb */
.crumb { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.status .crumb .sep { font-style: normal; color: var(--dim); }
.status .crumb .cur { color: var(--text-h); font-weight: 600; }

/* 브라우저 숨김 버튼은 같은 줄의 다른 아이콘과 구분: 구분선 + 테두리 있는 버튼 */
.dh .navhide { border: 1px solid var(--btn2-hbd); background: var(--btn); border-radius: 5px; width: 30px; margin-left: 0; }
.dh .navhide:hover { background: var(--btn-h); border-color: var(--text); }
.dh .tbsep { height: 18px; margin: 0 6px; }
#btn-locks.act { background: var(--sel); color: var(--text-h); box-shadow: inset 0 0 0 1px var(--btn2-hbd); }

/* 잠김 안내 화면 */
.lockscreen { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 24px; max-width: 380px; }
.lockscreen .lockbig svg.ic { width: 52px; height: 52px; stroke-width: 1.5; color: var(--muted); }
.lockscreen h2 { font-size: 16px; color: var(--text-h); word-break: break-all; }
.lockscreen p { color: var(--muted); white-space: pre-wrap; line-height: 1.6; }
.lockscreen .btn { height: 30px; padding: 0 18px; }

/* 도움말 팝업 */
.help { display: flex; flex-direction: column; gap: 10px; }
.help .hsec b { color: var(--text-h); font-size: 12.5px; }
.help .hsec p { color: var(--muted); line-height: 1.65; margin-top: 2px; }

/* 노트 브라우저 헤더와 노트 쪽 속성 바는 같은 높이(--bar-h)로 맞춘다 (ohjh 지시).
   넓은 화면에서는 속성 바를 한 줄로 두고, 폭이 모자라면 줄바꿈 대신 가로 스크롤한다. */
:root { --bar-h: 44px; }
.dh { height: var(--bar-h); }
.toolbar { height: var(--bar-h); flex-wrap: nowrap; padding: 0 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.toolbar .tgroup, .toolbar .wrapgroup, .toolbar #color-group, .toolbar .wctl { flex-wrap: nowrap; }
.toolbar > .wrapgroup { flex: 0 0 auto; min-width: auto; }
.toolbar .tb.sq { width: 28px; min-width: 28px; }
.toolbar .tbsep { margin: 0 5px; }
@media (max-width: 719px) {   /* 좁은 화면: 브라우저가 서랍이라 높이를 맞출 필요 없음 → 줄바꿈 */
  .toolbar { height: auto; flex-wrap: wrap; padding: 5px 6px; overflow: visible; }
  .toolbar .tgroup, .toolbar .wrapgroup, .toolbar #color-group, .toolbar .wctl { flex-wrap: wrap; }
  .toolbar > .wrapgroup { flex: 1 1 100%; }
}

/* 필기 옵션 드롭다운 */
.toolbar #btn-ink-opts { gap: 4px; padding: 0 8px; }
.toolbar #btn-ink-opts svg.ic { width: 13px; height: 13px; }
.optmenu { width: 270px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.optmenu .opt { display: flex; gap: 9px; align-items: flex-start; padding: 7px 8px; border-radius: 4px; cursor: pointer; }
.optmenu .opt:hover { background: var(--c3); }
.optmenu .opt input { margin-top: 2px; accent-color: var(--muted); flex: none; }
.optmenu .opt b { display: block; font-weight: 600; color: var(--text-h); }
.optmenu .opt small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 1px; }

/* 필기 바 압축: 1280px 화면에서도 한 줄에 들어오도록 간격을 줄임 */
.toolbar .glabel { display: none; }
.toolbar .swatches { gap: 3px; margin-right: 4px; }
.toolbar .swatches button { width: 18px; height: 18px; }
.toolbar .wctl { gap: 3px; }
.toolbar .wprev { width: 46px; margin-left: 2px; }
.toolbar .wprev i { width: 32px; }
.toolbar .wctl input.num { width: 40px; }
.toolbar .tbsep { margin: 0 4px; }

/* 글자색·형광펜 분할 버튼: 아이콘 영역과 색 막대의 높이를 둘 다 똑같이 */
.toolbar .split { display: inline-flex; align-items: center; margin-right: 2px; }
.toolbar .colorbtn { flex-direction: column; justify-content: center; gap: 2px; width: 26px; min-width: 26px; padding: 0; border-radius: 4px 0 0 4px; }
.toolbar .colorbtn .cg { display: grid; place-items: center; width: 18px; height: 18px; font-weight: 700; font-size: 15px; line-height: 18px; }
.toolbar .colorbtn .cg svg.ic { width: 17px; height: 17px; }
.toolbar .colorbtn .bar { display: block; width: 18px; height: 3px; border-radius: 1px; flex: none; }
.toolbar .sdd { width: 14px; min-width: 14px; padding: 0; border-radius: 0 4px 4px 0; border-left: 1px solid transparent; }
.toolbar .sdd:hover { border-left-color: var(--btn2-hbd); }
.toolbar .sdd svg.ic { width: 11px; height: 11px; }
/* 본문 형광펜: 글자(줄 상자) 기준으로 칠해지고, 줄이 바뀌어도 각 줄마다 이어서 칠한다 */
.body span[style*="background-color"] { border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 사용자 정보 오버레이: 권한/테마/계정 세 행을 같은 높이로 */
.userpop .urow { height: 44px; padding: 0 14px; }
.userpop .urow .seg .tb { height: 26px; }

/* 하단 상태바 삭제: 상태는 노트 기준으로 표시한다 (노트 위쪽 위치, 생성일시 줄 오른쪽 저장 상태) */
.app { grid-template-rows: 38px 1fr; }
.crumbline { min-height: 16px; margin-bottom: 4px; font-size: 11px; }
.crumb { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.crumb span { color: var(--dim); }
.crumb .sep { font-style: normal; color: var(--dim); }
.crumb .cur { color: var(--muted); font-weight: 600; }
.page .date { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page .date .si { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }