/* 공통 부품: 목록 줄·카드·자세히 보기 머리·단추. 확장(extension/components.css)과 웹(server/public/css/components.css)은
같은 파일이라 한쪽만 고치지 않음(test138). 기준은 docs/DESIGN.md 18절. 크기·색은 tokens.css 의 토큰만 씀 */
/* ── 사이트 줄 · 정보 줄 · 태그 ── */
.site-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-label); line-height: 1.4; color: var(--sub); }
.site-line .site-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 사이트 그림 대신 첫 글자 칸: 사이트 아이콘을 받아 오면 방문 기록이 그 사이트로 새므로 글자로 대신함. 바탕색은 화면 스크립트가 주소로 정함 */
.site-mark { flex: none; width: 16px; height: 16px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; line-height: 1; color: #fff; background: var(--sub); text-transform: uppercase; }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-caption); line-height: 1.5; color: var(--faint); } /* 날짜 숫자는 보통 폭 (확장 고정 메모 날짜와 같게, 2.123.6: 예전 tabular-nums) */
.tag-pill { font-size: var(--t-caption); line-height: 1.65; color: var(--chip-text, var(--sub)); background: var(--chip-bg, var(--soft)); border-radius: 6px; padding: 1px 8px; } /* 확장 pin-ui.js 6절 칩과 같게 (2.123.11) */
/* 공용 태그 칸 안의 칩 개수가 바깥 grid 의 최소 폭을 늘리지 않게 함. */
.tag-field { contain: inline-size; }
/* ── 목록 한 줄: 짜임은 하나, 목록 모양(data-look)이 값만 바꿈 ── */
.list-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: var(--look-pad, 14px 16px); margin: 0 0 var(--look-between, 8px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.list-row:hover { border-color: var(--accent); }
.list-row:focus-visible, .list-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row-body { display: grid; gap: var(--look-gap, 4px); min-width: 0; }
.row-mark { display: none; }
.row-title { justify-self: start; max-width: 100%; font-size: var(--look-title, var(--t-title)); font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--look-title-lines, 1); overflow: hidden; }
.row-title:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.row-pv { margin: 0; font-size: var(--look-pv, var(--t-body)); line-height: var(--look-pv-lh, 1.55); color: var(--look-pv-color, var(--sub)); white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--look-pv-lines, 2); overflow: hidden; }
.row-meta-site { display: none; }
/* 촘촘하게: 칸 테두리 대신 아래 선, 왼쪽 큰 사이트 칸, 미리보기 1줄 */
[data-look="compact"] { --look-title: 0.9375rem; --look-pv-lines: 1; --look-gap: 2px; --look-pad: 10px 8px; --look-between: 0px; }
[data-look="compact"] .list-row { grid-template-columns: 28px minmax(0, 1fr); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
[data-look="compact"] .list-row:hover { background: var(--soft); }
[data-look="compact"] .row-mark { display: inline-grid; width: 28px; height: 28px; border-radius: 7px; font-size: 13px; }
[data-look="compact"] .row-body > .site-line { display: none; }
[data-look="compact"] .row-meta-site { display: inline; }
/* 넉넉하게: 메모 글을 크게, 제목과 다른 색(--memo)과 왼쪽 선으로 '내가 쓴 글'을 앞세움 */
[data-look="reading"] { --look-title: 1.0625rem; --look-title-lines: 1; --look-pv: var(--t-read); --look-pv-lh: 1.65; --look-pv-color: var(--memo); --look-pv-lines: 3; --look-gap: 8px; --look-pad: 18px 20px; --look-between: 12px; }
[data-look="reading"] .row-pv { border-left: 2px solid var(--memo-line); padding-left: 12px; }
/* 넉넉하게: 사이트 칸은 작고 옅게, 줄에 마우스를 올리면 또렷하게 (2.69.2 확장 결정, 2.123.11부터 확장·웹 공통) */
[data-look="reading"] .site-line .site-mark { width: 14px; height: 14px; font-size: 9px; filter: grayscale(.6); opacity: .75; transition: filter .15s, opacity .15s; }
[data-look="reading"] .list-row:hover .site-line .site-mark { filter: none; opacity: 1; }
/* ── 카드 (모양 한 가지) ── */
/* 카드 (2.168.0): 세로 flex 라 같은 줄 카드 높이가 같을 때 정보 줄(날짜·기록 수)이 바닥에 붙어 옆 카드와 줄이 맞음 (웹은 li > .row-body 한 겹 더) */
.list-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color 0.15s; }
/* 좁은 화면(699px 이하, 웹 휴대폰·확장 좁은 창): 항목 좌우 안쪽 여백을 줄여 글 폭 확보 (2.142.4). 위아래는 목록 모양 그대로 */
@media (max-width: 699px) {
.list-row, .list-card { padding-inline: 12px; }
[data-look="reading"] .list-row { padding-inline: 14px; }
[data-look="compact"] .list-row { padding-inline: 4px; }
}
.list-card:hover { border-color: var(--accent); }
.list-card .row-title { --look-title-lines: 1; }
.list-card .row-pv { --look-pv-lines: 4; }
/* 저장 묶음 '저장: [Markdown]' (목록 머리·설정, 확장·웹 같은 모양, 2.125.0 공통으로) */
.export-set { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.export-label { font-size: var(--t-label); color: var(--sub); }
/* 중요도 표시 '⚑ 높음' (확장·웹 같은 모양, 2.126.1에 한 곳으로: 예전 확장은 보통 굵기). 자리(여백)는 화면마다 */
.flag-mark { font-size: 0.95em; font-weight: 600; }
.flag-mark.f3 { color: var(--flag-3); }
.flag-mark.f2 { color: var(--flag-2); }
.flag-mark.f1 { color: var(--flag-1); }
/* 정보 줄에서는 주변 글자와 같은 크기 (2.124.4) */
.meta-line .flag-mark { margin: 0; font-size: inherit; }
/* 카드의 태그 줄 (2.168.0, list-ui.js tagLine): 정보 줄 위 따로 한 줄, 넘치면 '…' */
.tag-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
/* 넘친 태그 '…' 단추 (2.166.0, list-ui.js fitTags, 태그 입력 칸의 .tag-more 와 다른 이름): 태그 알약 모양 그대로, 누르면 줄을 바꿔 모두 */
:is(.meta-line, .tag-line) .tag-rest { border: 0; font: inherit; font-size: var(--t-caption); cursor: pointer; }
:is(.meta-line, .tag-line) .tag-rest:hover { color: var(--text); }
:is(.meta-line, .tag-line) .tag-rest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.list-card .meta-line { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.list-card > .row-body { flex: 1; display: flex; flex-direction: column; }
:is(.list-card, .list-card > .row-body) > .meta-line { margin-top: auto; }
/* 태그 줄이 있으면 태그 줄부터 바닥 쪽으로 (2.168.1): 태그 줄 → 구분선 → 날짜 줄이 같은 줄 카드끼리 나란히 */
:is(.list-card, .list-card > .row-body) > .tag-line { margin-top: auto; }
:is(.list-card, .list-card > .row-body) > .tag-line + .meta-line { margin-top: 2px; }
/* ── 목록 모양 고르기 단추 ── */
.seg-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); }
.seg-toggle button { border: 0; background: none; font: inherit; font-size: var(--t-label); color: var(--sub); padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer; }
.seg-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
/* ── 단추: 열기(채움, 한 화면 하나) · 바꾸기(테두리) · 치우기(빨간 테두리, 오른쪽 끝) · 조용한 글자 단추 ── */
.btn-open, .btn-change, .btn-clear { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--t-label); line-height: 1.3; padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer; }
.btn-open { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-weight: 600; }
.btn-change { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn-change:hover { border-color: var(--accent); color: var(--accent); }
.back-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-clear { background: var(--card); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); }
.btn-clear:hover { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--card)); }
.btn-open svg, .btn-change svg, .btn-clear svg { width: 15px; height: 15px; flex: none; }
.btn-open:disabled, .btn-change:disabled, .btn-clear:disabled, .seg-toggle button:disabled { opacity: 0.55; cursor: default; }
/* 터치 화면은 손가락으로 누르기 쉽게 단추를 높게 (모양은 그대로, 2.70.0) */
@media (pointer: coarse) {
.btn-open, .btn-change, .btn-clear { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
.seg-toggle button { min-height: 32px; }
}
.btn-quiet { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 2px; font: inherit; font-size: var(--t-label); line-height: 1.4; color: var(--sub); border-radius: 4px; cursor: pointer; }
.btn-quiet svg { width: 14px; height: 14px; flex: none; }
.btn-quiet:hover { color: var(--accent); }
.btn-quiet.danger { color: var(--sub); }
.btn-quiet.danger:hover { color: var(--bad); }
/* ── 대시보드 한 줄 (확장 .rec · .card, 웹 .dash-item): 위 작은 줄 → 제목 → 글 2줄 → 단추. 줄을 누르면 열림 ── */
/* 마우스를 올리면 '모든 메모' 목록 줄처럼 옅은 바탕 (2.126.3). 바탕이 글에 붙지 않게 좌우 8px 안쪽 여백 + 같은 만큼 바깥으로 */
.dash-row { display: grid; gap: 3px; min-width: 0; margin: 0 -8px; padding: 10px 8px; border-top: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: background-color .12s; }
.dash-row:first-child { border-top-color: transparent; }
.dash-row:hover { background: var(--soft); }
.dash-row:hover + .dash-row { border-top-color: transparent; } /* 바탕과 선이 겹쳐 보이지 않게 */
.dash-row:hover .dash-title { color: var(--accent); }
.dash-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dash-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-caption); line-height: 1.5; color: var(--faint); }
.dash-chip { font-size: var(--t-caption); font-weight: 600; color: var(--accent); background: var(--soft); border-radius: var(--r-pill); padding: 1px 8px; }
.dash-title { justify-self: start; max-width: 100%; font-size: var(--t-body); font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.dash-text { font-size: var(--t-body); line-height: 1.55; color: var(--sub); white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dash-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* ── 대시보드 칸·통계 (2.126.0, 확장 #dashboard · 웹 #r-dash 같은 한 벌, 그리기는 공용 dash-ui.js) ──
두 칸은 창 폭 1000px 부터 (예전 확장 700px·웹 1000px). 칸 켜기·끄기는 .dash-off */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 0 0 16px; } /* 같은 줄 두 칸은 같은 높이 (2.128.0) */
@media (min-width: 1000px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 보이는 칸이 하나뿐이면(설정에서 하나만 켬, 나머지는 끄거나 비어 숨음) 그 칸이 가로 전체를 씀 */
.dash:not(:has(> .dash-w:not(.dash-off, [hidden]) ~ .dash-w:not(.dash-off, [hidden]))) { grid-template-columns: minmax(0, 1fr); }
.dash-off { display: none !important; }
.dash > .dash-w { margin: 0; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; }
.dash-w .dash-h { margin: 0 0 4px; font-size: var(--t-title); line-height: 1.4; } /* 첫 줄 위 안쪽 여백 10px 과 합쳐 머리 아래 14px (2.126.3) */
.dash-h-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; } /* 칸 이름: 누르면 그 칸의 전체 화면 (2.128.0) */
.dash-h-link::after { content: "›"; margin-left: 4px; color: var(--faint); font-weight: 400; }
.dash-h-link:hover { color: var(--accent); }
.dash-h-link:hover::after { color: var(--accent); }
.dash-h-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dash-w .dash-h small { margin-left: 6px; font-weight: 400; font-size: var(--t-caption); color: var(--faint); }
.dash-body { display: grid; gap: 0; }
.dash .none, .dash-more { margin: 6px 0 0; font-size: var(--t-body); color: var(--sub); }
.dash .none:first-child { margin-top: 0; }
.dash-w .dash-body ~ .btn-change, .dash-body > .btn-change { justify-self: start; margin: 8px 8px 0 0; }
.dash-top .flag-mark { margin: 0; }
.dash-chip.late { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--card)); }
.dash-title a { color: inherit; text-decoration: none; }
.dash-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } /* 외부 링크 제목: 누르면 그 페이지 */
button.dash-chip { font: inherit; font-size: var(--t-caption); font-weight: 600; border: 0; cursor: pointer; }
button.dash-chip:hover { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.dash-w[data-widget="resurface"] .dash-text { -webkit-line-clamp: 3; } /* 다시 만나는 생각은 글 세 줄까지 */
@media (hover: none) { .dash-row { -webkit-tap-highlight-color: transparent; } .dash-row:active { background: var(--soft); } }
table.stats { width: 100%; border-collapse: collapse; font-size: var(--t-body); font-variant-numeric: tabular-nums; }
table.stats th, table.stats td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--line); }
table.stats th:first-child, table.stats td:first-child { text-align: left; }
table.stats thead th { color: var(--sub); font-weight: 600; font-size: var(--t-caption); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 3.2rem; margin-top: 10px; }
.bars .col { flex: 1; display: flex; flex-direction: column-reverse; gap: 1px; min-width: 0; } /* 쓴 기록이 아래, 다시 마주침이 위 */
.bars .w, .bars .s { min-height: 1px; border-radius: 2px 2px 0 0; }
.bars .w, .legend i.w { background: var(--accent); }
.bars .s, .legend i.s { background: color-mix(in srgb, var(--accent) 35%, transparent); } /* 강조색 옅게 (2.126.0 사용자 결정, 예전 확장은 노랑 --mark) */
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: var(--t-caption); color: var(--sub); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.stat-hint { margin: 8px 0 0; font-size: var(--t-body); color: var(--sub); }
/* ── 예약 고르기 칸 (RemindUI.editor, 확장 모든 메모·웹 /read 같은 모양, 2.126.4에 memos.html 에서 옮김. 사이드바·메모 칸은 자기 파일에 같은 값) ── */
.r-editor { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--bg); font-size: var(--t-caption); cursor: auto; }
.r-head { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.r-sp { flex: 1; }
.r-x { border: 0 !important; padding: 0 4px !important; color: var(--sub) !important; background: none !important; }
.r-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.r-quick button, .r-direct button, .r-now button { font-size: var(--t-caption); padding: 0 9px; }
.r-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.r-input { flex: none; min-width: 0; font-size: var(--t-caption); padding: 1px 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .r-input, :root:not([data-theme="light"]) .r-repeat { color-scheme: dark; } }
:root[data-theme="dark"] .r-input, :root[data-theme="dark"] .r-repeat { color-scheme: dark; }
.r-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.r-repeat { flex: 1 1 60px; min-width: 0; font-size: var(--t-caption); }
.r-note, .r-hint { color: var(--sub); font-size: var(--t-caption); }
.r-hint { margin-top: 4px; }
.r-now { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
/* 예약 묶음 머리 '확인하지 않은 다시 보기 n개 [모두 지우기]' (대시보드 예약 칸·'예약' 화면, 2.129.0에 memos.html 에서 옮김) */
.r-group { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .3rem; font-weight: 600; font-size: var(--t-label); color: var(--sub); }
.r-group:first-child { margin-top: 0; }
.r-group button { font-size: var(--t-label); padding: .05rem .5rem; font-weight: 400; }
/* 설정 '대시보드에 보일 것' 체크 목록 (확장 #dashToggles · 웹 #r-dash-toggles 같은 모양) */
.dash-toggles { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.dash-toggles label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-label); cursor: pointer; }
/* ── 자세한 메모 보기 ── */
.d-head { display: grid; gap: 6px; min-width: 0; }
.d-title { font-size: var(--t-head); font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; word-break: keep-all; }
.d-title:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.page-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-acts .act-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--line); }
.page-acts .act-push { margin-left: auto; }
/* 좁은 칸(사이드바·작은 휴대폰, 단추 줄 300px 이하)에서도 한 줄 (2.143.5): 즐겨찾기는 별만 (이름은 aria-label·title), 구분선 옆 여백도 줄임.
단추 줄 자체가 기준이라 사이드바·본문 어디서나 같게 (컨테이너 쿼리) */
.page-acts { container-type: inline-size; }
@container (max-width: 300px) {
.page-acts .fav-page { font-size: 0; gap: 0; padding: 4px; }
.page-acts .act-sep { margin-inline: 0; }
}
@container (max-width: 360px) { .page-acts .view-menu[data-menu="page-more"] .vm-label { display: none; } } /* 좁으면 '더 보기' 글자를 빼고 ⋯ 만 (이름은 aria-label·title) */
@container (max-width: 230px) { .page-acts .view-menu[data-menu="page-more"] .vm-caret { display: none; } } /* 더 좁으면 ▾ 도 뺌 */
.entry-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
/* 날짜별 달력 히트맵 (2.74.0, heatmap.js): 한 해를 주 단위 칸으로. 칸 색은 그날 쓴 기록 수 4단계(바탕 위에 강조색을 섞음).
넓이가 모자라면 가로로 밀어 봄 (처음에는 최근 주가 보이게) */
.heat { --heat-cell: 12px; max-width: 100%; box-sizing: border-box; margin: 0 0 18px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.heat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.heat-year { font-size: var(--t-title); font-weight: 600; min-width: 4.5em; text-align: center; }
.heat-year-btn { font: inherit; font-size: var(--t-caption); width: 26px; height: 26px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--sub); cursor: pointer; }
.heat-year-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.heat-year-btn:disabled { opacity: 0.4; cursor: default; }
.heat-scroll { overflow-x: auto; padding-bottom: 4px; }
.heat-grid { display: grid; grid-template-columns: auto repeat(54, var(--heat-cell)); grid-template-rows: auto repeat(7, var(--heat-cell)); gap: 3px; width: max-content; }
.heat-month { font-size: var(--t-caption); color: var(--sub); white-space: nowrap; line-height: 1.4; }
/* 요일 칸은 가로로 밀어도 왼쪽에 붙어 있게 (바탕을 칠해 밑으로 지나가는 칸을 가림) */
.heat-dow { grid-column: 1; position: sticky; left: 0; z-index: 1; align-self: stretch; display: flex; align-items: center; font-size: 11px; line-height: 1; color: var(--sub); padding-right: 6px; background: var(--card); white-space: nowrap; }
.heat-cell { display: block; width: var(--heat-cell); height: var(--heat-cell); padding: 0; border: 0; border-radius: 3px; background: var(--soft); }
button.heat-cell { cursor: pointer; }
button.heat-cell:hover, button.heat-cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.heat-cell.l1 { background: color-mix(in srgb, var(--accent) 30%, var(--soft)); }
.heat-cell.l2 { background: color-mix(in srgb, var(--accent) 55%, var(--soft)); }
.heat-cell.l3 { background: color-mix(in srgb, var(--accent) 78%, var(--soft)); }
.heat-cell.l4 { background: var(--accent); }
.heat-cell.future { opacity: 0.35; }
.heat-cell.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 8px; font-size: var(--t-caption); color: var(--faint); }
/* 월 달력 히트맵 (2.74.1): 해·달을 고른 날짜별. 달마다 일~토 일곱 칸, 칸에 날짜 숫자와 기록 수 */
.heat-month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 18px 22px; }
.heat-months.one .heat-month-grid { grid-template-columns: minmax(0, 420px); }
.heat-mon-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.heat-mon-name { font-size: var(--t-title); font-weight: 600; }
.heat-mon-sum { font-size: var(--t-caption); color: var(--faint); }
.heat-mon-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.heat-mon-dow { font-size: var(--t-caption); color: var(--faint); text-align: center; padding-bottom: 2px; }
.heat-day { position: relative; display: block; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 5px; background: var(--soft); color: var(--sub); font: inherit; }
.heat-day.blank { background: none; }
button.heat-day { cursor: pointer; }
button.heat-day:hover, button.heat-day:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.heat-day-num { position: absolute; top: 3px; left: 5px; font-size: 10px; line-height: 1; }
.heat-day-n { position: absolute; right: 5px; bottom: 3px; font-size: var(--t-caption); font-weight: 600; line-height: 1; }
.heat-day.l1 { background: color-mix(in srgb, var(--accent) 30%, var(--soft)); color: var(--ink); }
.heat-day.l2 { background: color-mix(in srgb, var(--accent) 55%, var(--soft)); color: var(--ink); }
.heat-day.l3 { background: color-mix(in srgb, var(--accent) 78%, var(--soft)); color: var(--card); }
.heat-day.l4 { background: var(--accent); color: var(--card); }
.heat-day.future { opacity: 0.35; }
.heat-day.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* 날짜별 요약·막대 줄 (2.75.0): 단계마다 히트맵 아래 요약 한 덩어리, 그 아래 연도별·월별 막대(누르면 한 단계 들어감) */
.heat-sum { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--t-label); color: var(--ink); }
.heat-sum-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.heat-sum-k { color: var(--sub); min-width: 7.5em; }
.heat-sum-v { display: inline-flex; align-items: baseline; gap: 4px; }
.heat-sum-v small { font-size: var(--t-caption); color: var(--faint); }
/* 누르면 그 사이트·태그 목록 (2.75.2) */
button.heat-sum-v { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
button.heat-sum-v:hover, button.heat-sum-v:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.heat-bars { margin: 0 0 18px; }
.heat-bars-title { margin: 0 0 8px; font-size: var(--t-title); font-weight: 600; }
.heat-bar { display: grid; grid-template-columns: 4.5em minmax(60px, 1fr) auto 14px; align-items: center; gap: 12px; width: 100%; margin: 0 0 4px; padding: 8px 12px; text-align: left; font: inherit; font-size: var(--t-label); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); }
button.heat-bar { cursor: pointer; }
button.heat-bar:hover, button.heat-bar:focus-visible { border-color: var(--accent); }
.heat-bar.off { color: var(--faint); background: transparent; }
.heat-bar-label { font-weight: 600; white-space: nowrap; }
.heat-bar-track { height: 8px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; }
.heat-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.heat-bar-nums { font-size: var(--t-caption); color: var(--sub); white-space: nowrap; }
.heat-bar-go { color: var(--faint); }
@media (max-width: 560px) {
.heat-bar { grid-template-columns: 4em minmax(0, 1fr) 14px; row-gap: 4px; }
.heat-bar-nums { grid-column: 2 / 4; grid-row: 2; white-space: normal; }
}
.heat-legend > span:first-child { margin-right: 4px; }
.heat-legend > span:last-child { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
.list-row, .list-card { transition: none; }
}
/* 가입 동의 화면 (signup-ui.js) */
.signup-box { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; }
.signup-box[hidden] { display: none; }
.signup-box h3 { margin: 0; font-size: var(--t-title); }
.signup-box p { margin: 0; font-size: var(--t-body); }
.signup-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--t-body); font-weight: 400; }
.signup-check input { flex: none; width: auto; margin: 0; }
.signup-box .signup-note { color: var(--sub); }
.signup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.signup-box .signup-msg { color: var(--bad); }
.signup-box .signup-msg:empty { display: none; }
.acct-plan, .acct-links { margin: var(--s-1) 0; font-size: var(--t-body); }
.acct-links { color: var(--sub); }
.acct-suspended { margin: var(--s-1) 0; font-size: var(--t-body); color: var(--bad); }
/* 본문을 밀지 않는 여정·기록 도구·글자 꾸미기 칸 */
.tool-popover { position: fixed; z-index: 2147483647; box-sizing: border-box; margin: 0; padding: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: 0 8px 28px #0004; }
.tool-popover[hidden] { display: none !important; }
.tool-popover.md-bar { display: flex; flex-wrap: wrap; gap: 4px; }
/* 기록 도구 메뉴 (2.123.0, docs/DESIGN.md 18-4): 항목은 md.js actionMenu 가 만듦(아이콘 + 글자, 순서 고정). 모양은 이 한 벌만.
메모 칸(content.js)은 Shadow DOM 이라 같은 줄을 옮겨 적음 → test138 이 같은지 봄. 화면 CSS 가 덮지 않게 메뉴 안 단추는 tool-action 만 가지고,
팝업이 기록 칸 안에 붙어 열려도 '.entry .meta button' 같은 화면 규칙보다 세게 .tool-popover.tool-menu 로 시작 */
.tool-popover.tool-menu .tool-action { display: flex; align-items: center; justify-content: flex-start; gap: 8px; box-sizing: border-box; width: 100%; height: auto; min-height: 32px; margin: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tool-popover.tool-menu .tool-action:hover, .tool-popover.tool-menu .tool-action:focus-visible { background: var(--soft); color: var(--ink); }
.tool-popover.tool-menu .tool-action:disabled { opacity: .45; cursor: default; background: transparent; }
.tool-popover.tool-menu .tool-action svg { flex: none; width: 16px; height: 16px; }
.tool-popover.tool-menu .tool-action.tool-delete { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; color: var(--bad); }
.tool-popover.tool-menu .tool-action.tool-delete:hover, .tool-popover.tool-menu .tool-action.tool-delete:focus-visible { color: var(--bad); }
.tool-popover.tool-menu .tool-heading .tool-close { width: 22px; height: 22px; padding: 0; border: 0; font: 20px/1 sans-serif; }
.aa-btn { font: inherit; cursor: pointer; }
.aa-btn.on { color: var(--accent); border-color: var(--accent); }
.tool-pointer { position: fixed; z-index: 2147483647; width: 10px; height: 10px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); pointer-events: none; }
.tool-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 8px; color: var(--ink); font-size: 14px; line-height: 1.5; }
.tool-heading .tool-close { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--sub, var(--muted)); font: 22px/1 sans-serif; cursor: pointer; }
.tool-heading .tool-close:hover { background: var(--soft); color: var(--ink); }
.journey-list { display: grid; padding: 0 4px 2px; }
.journey-row { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 34px; padding: 6px 0 6px 24px; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.5; }
.journey-row::before { content: ""; position: absolute; left: 1px; top: 12px; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid var(--sub, var(--muted)); border-radius: 50%; background: var(--card); z-index: 1; }
.journey-row:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 20px; bottom: -14px; border-left: 1px solid var(--sub, var(--muted)); }
.journey-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-row svg { flex: none; width: 17px; height: 17px; color: var(--sub, var(--muted)); }
.journey-row:hover { color: var(--accent); }
.journey-row.here { color: var(--accent); font-weight: 600; }
.journey-row.here::before { background: var(--accent); border-color: var(--accent); }
/* 여정·기록 도구는 짧은 목록이라 작은 화면에서도 읽는 글을 덜 가리게 함. */
.journey-popover, .tool-menu { padding: 8px; }
.journey-popover .tool-heading, .tool-menu .tool-heading { padding-bottom: 4px; font-size: 13px; }
.tool-heading .tool-close { width: 22px; height: 22px; font-size: 20px; }
.journey-list { padding: 0 2px; }
.journey-row { min-height: 22px; padding: 1px 0 1px 20px; gap: 8px; font-size: 12px; line-height: 1.4; } /* 촘촘하게 (2.131.0 사용자 요청) */
.journey-row::before { top: 7px; width: 8px; height: 8px; }
.journey-row:not(:last-child)::after { left: 4.5px; top: 14px; bottom: -8px; }
.journey-row svg { width: 15px; height: 15px; }
/* 여정 고르기 (2.131.0, 메모 칸 '고르기' 팝업): 줄마다 오른쪽 체크, 뺀 단계는 흐리게·줄 긋기·점선 점. 저장된 여정 보기의 뺀 자리는 '⋯' 줄 */
.journey-pick { padding: 8px; }
.journey-pick .tool-heading { padding-bottom: 4px; font-size: 13px; }
.journey-row.pick { cursor: pointer; }
.journey-row.pick input { flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }
.journey-row.skip { color: var(--faint, var(--muted)); }
.journey-row.skip .journey-name { text-decoration: line-through; }
.journey-row.skip::before { border-style: dashed; }
.journey-row.gap { min-height: 14px; padding-top: 0; padding-bottom: 0; color: var(--faint, var(--muted)); letter-spacing: .15em; line-height: 1; }
.journey-row.gap::before { content: none; }
.journey-count { margin-left: 6px; font-weight: 400; font-size: 11.5px; color: var(--sub, var(--muted)); }
.journey-note { margin: 4px 2px 0; padding-top: 5px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; color: var(--faint, var(--muted)); }
@media (pointer: coarse) { .tool-popover.tool-menu .tool-action, .journey-row { min-height: 36px; } .tool-heading .tool-close, .tool-popover.tool-menu .tool-heading .tool-close { width: 28px; height: 28px; } }
.memo-fold-body { max-height: var(--memo-fold-height, 12.8em); overflow: hidden; }
.memo-fold-body.memo-unfolded { max-height: none; overflow: visible; }
/* 더 보기 단추 모양은 이 한 곳에서 (2.112.11: 인용한 문장 '문장 n개 더 보기'도 같은 회색 글) */
.memo-more, .quote-more { border: 0; background: transparent; color: var(--sub, var(--muted)); font: inherit; font-size: 12px; cursor: pointer; }
.memo-more { display: block; margin: 4px 0; padding: 2px 0; }
/* 2.115.0: '접기'도 '더 보기'와 같은 왼쪽 자리. 블록 단추를 칸 폭으로 늘리는 브라우저(Firefox)에서 단추 기본값(가운데)이라 '접기'만 가운데로 갔음 */
.memo-more, .pmore, .quote-more { text-align: left; }
.quote-more { padding: 4px 0; }
.memo-more[hidden] { display: none !important; }
.memo-return { scroll-margin-block-start: 12px; }
/* 바탕색을 덮지 않고 글만 흐리게 해 밝기·덧붙임 바탕이 달라도 자연스럽게 이어짐. */
.memo-fold-body:has(+ .memo-more:not([hidden])[aria-expanded="false"]), .ptext:not(.full):has(+ .pmore:not([hidden])[aria-expanded="false"]) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent 100%); }
.memo-more:not([hidden])[aria-expanded="false"], .pmore:not([hidden])[aria-expanded="false"] { position: relative; z-index: 1; width: 100%; min-height: 1.8em; margin-top: -1.8em; padding: 8px 0 2px; text-align: left; }
button.memo-more:hover, button.pmore:hover, button.quote-more:hover { background: transparent; color: var(--sub, var(--muted)); border-color: transparent; box-shadow: none; cursor: pointer; }
/* 더 보기 ⌄ / 접기 ⌃ (2.112.8): 밑줄 대신 회색 글 + 펼침 표시. 글은 그대로라 글자를 찾는 시험·번역과 무관 */
.memo-more, .pmore, .quote-more { text-decoration: none; }
.memo-more::after, .pmore::after, .quote-more::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.22em) rotate(45deg); }
:is(.memo-more, .pmore, .quote-more)[aria-expanded="true"]::after { transform: translateY(.08em) rotate(-135deg); }
.memo-more, .pmore { overflow-anchor: none; }
.page-info-popover { font-size: 12px; }
.page-info-popover [hidden] { display: none !important; }
.page-info-field { display: grid; gap: 4px; }
.page-info-popover input:not([type=checkbox]) { box-sizing: border-box; width: 100%; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; line-height: 1.5; }
.page-info-check { display: flex; align-items: center; gap: 5px; margin: 7px 0; }
.page-info-address { border-top: 1px solid var(--line); padding-top: 7px; margin-top: 7px; }
.page-info-address summary { cursor: pointer; color: var(--accent); margin-bottom: 5px; }
.page-info-preview, .page-info-hint, .page-info-status { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 5px; }
.page-info-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.page-info-actions button { padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.page-info-actions .page-info-save { background: var(--accent); color: var(--accent-ink, #101725); border-color: var(--accent); }
/* 메모 글: 확장 pin-ui.js 3절과 같은 값 (낱말 단위 줄바꿈, 긴 주소만 아무 데서나 끊음) */
.md, .entry .text, .md-preview { line-height: 1.65; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; }
/* MARKDOWN_TABLE_START — 모든 팔레트에서 같은 표 모양과 스크롤을 사용함. */
.md { min-width: 0; }
.md .md-table-wrap { display: block; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; margin: 4px 0; scrollbar-width: thin; }
.md .md-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.md .md-table-wrap table { width: max-content; min-width: 100%; border-collapse: collapse; font: inherit; font-size: .92em; color: inherit; }
.md .md-table-wrap th, .md .md-table-wrap td { min-width: 6em; max-width: 24em; padding: 4px 6px; border: 1px solid var(--line); vertical-align: top; white-space: normal; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.md .md-table-wrap th { background: var(--soft); color: var(--ink); font-weight: 600; }
/* MARKDOWN_TABLE_END */
/* 인용은 왼쪽 막대·옅은 바탕·보조 글자색으로 내 기록과 구별함 (2.130.0, 모양은 아래 .md blockquote·.quote-text). */
.quote-text { color: var(--sub); }
/* 메모 글 Markdown 기본 (2.122.0 ⑨: 확장 memos.html·sidebar.html 과 같은 값, 웹도 이 규칙. 확장 화면은 자기 규칙이 뒤에 있어 그대로) */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .4rem; white-space: normal; }
.md .md-h { margin: .5rem 0 .25rem; font-size: 1.02em; line-height: 1.35; }
.md ul, .md ol { margin: .15rem 0 .4rem; padding-left: 1.3rem; }
.md li.task { list-style: none; margin-left: -1.1rem; }
/* 할 일 체크박스 (2.123.4): 브라우저 기본 모양 대신 한 모양 — 웹 고정 메모처럼 바꿀 수 없는(disabled) 칸도 흐리지 않고 같게. 메모 칸 content.js 에 같은 줄, test138 */
.md li.task input { -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; box-sizing: border-box; width: 14px; height: 14px; margin: 0 6px 0 0; padding: 0; vertical-align: -2px; border: 1.5px solid var(--sub); border-radius: 3px; background: var(--card); cursor: pointer; }
.md li.task input:checked { border-color: var(--accent); background: var(--accent); }
.md li.task input:checked::before { content: ""; width: 7px; height: 4px; margin-top: -2px; border: solid var(--accent-ink, #fff); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.md li.task input:disabled { cursor: default; opacity: 1; }
.md li.task input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.md a { color: var(--accent); }
.md li.done { color: var(--sub); text-decoration: line-through; }
.md code { font: .85em ui-monospace, Menlo, monospace; background: var(--bg); padding: 0 .25rem; border-radius: 4px; }
.md pre { margin: .25rem 0 .4rem; padding: .4rem .6rem; background: var(--bg); border-radius: 6px; overflow-x: auto; }
.md pre code { background: none; padding: 0; white-space: pre; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: .5rem 0; }
/* 글 속 #태그 (확장 memos.html 과 같은 값, 누르면 그 태그 목록) */
/* 기록 카드 (2.122.0 ⑨: 확장 pin-ui.js 4절과 같은 값) */
.entry { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); box-shadow: var(--shadow); }
/* 인용 (2.130.0 사용자 결정 C안): 왼쪽 강조색 막대 + 아주 옅은 강조색 바탕 + 조금 작은 글자로 내 글과 갈림.
같은 값이 pin-ui.js 3·5절·content.js·sidebar.html 에도 (그 화면들은 이 파일을 못 쓰거나 뒤에서 덮음). 바탕은 transparent 와 섞어 어느 카드색 위에서도 같게 */
.md blockquote { position: relative; margin: 6px 0 8px; padding: 7px 12px; background: color-mix(in srgb, var(--accent) 7%, transparent); border-left: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 0 8px 8px 0; color: var(--sub); font-size: .93em; line-height: 1.6; }
.md blockquote::before { content: none; }
.md > blockquote:first-child { margin-top: 0; }
.md > blockquote:last-child { margin-bottom: 0; }
.md blockquote p { margin: 0 0 .4rem; white-space: normal; }
.md blockquote ul, .md blockquote ol { margin: .15rem 0 .4rem; padding-left: 1.3rem; }
.md blockquote .md-h { margin: .5rem 0 .25rem; font-size: 1.02em; line-height: 1.35; }
/* 자세히 보기 인용 안 끝의 [페이지에서 보기 ↗][문장 주소 복사] (2.133.0, 공용 quote-ui.js pageLinks). 확장은 pin-ui.js 5절이 간격을 덧씌움 */
.q-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 12px; margin: 2px 0 0; font-size: var(--t-caption); line-height: 1.5; }
.q-bar .q-act { border: 0; padding: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; text-decoration: none; }
.q-bar .q-act:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.q-bar .q-note { color: var(--muted); font-style: italic; }
.q-bar .q-note:empty { display: none; }
/* 보관 / 지우기 선택 창: 확장 모든 메모와 웹에서 같은 모양 */
.pm-choice { font: var(--t-body)/1.5 var(--font); position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); }
.pm-choice-box { width: min(24rem, calc(100vw - 2rem)); padding: 1rem; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: .55rem; }
.pm-choice-title { font-weight: 600; }
.pm-choice-detail { font-size: var(--t-label); color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-choice-opt { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; border-radius: 10px; padding: .55rem .8rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.pm-choice-opt .pm-choice-label { font-weight: 600; }
.pm-choice-opt .pm-choice-sub { font-size: var(--t-label); color: var(--sub); }
.pm-choice-opt.archive { border-color: var(--accent); }
.pm-choice-opt.archive .pm-choice-label { color: var(--accent); }
.pm-choice-opt.delete .pm-choice-label { color: var(--bad); }
.pm-choice-cancel { font: inherit; padding: 5px 12px; border-radius: var(--r-pill); align-self: flex-end; border: 0; background: none; color: var(--sub); cursor: pointer; }
.pm-choice-text { white-space: pre-line; overflow-wrap: anywhere; }
.pm-choice-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: .25rem; }
.pm-choice-btns .pm-choice-cancel { align-self: auto; }
.pm-choice-ok { font: inherit; font-weight: 600; padding: 5px 14px; border-radius: var(--r-pill, 999px); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.pm-choice-ok.is-danger { border-color: var(--bad); background: var(--bad); }
.pm-choice-opt:hover { border-color: var(--accent); }
/* 초점 (2.162.1): 마우스로 연 창은 스크립트가 옮긴 초점에 :focus-visible 이 안 걸려 처음 초점 단추가 안 보였음 */
.pm-choice button:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.pm-choice-cancel:focus { background: var(--soft); color: var(--ink); }
/* 상세 기록 아래: 왼쪽 날짜·순번·여정, 오른쪽 예약·중요도·기록 도구 */
.entry .entry-tools > .entry-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 260px; min-width: 0; margin: 0; font-size: var(--t-caption); line-height: 1.5; color: var(--faint); }
.entry-tools .entry-status { cursor: default; }
.entry-tools .entry-status:where(.btn-quiet):hover { color: var(--sub); }
.entry-tools .flag-btn.f1 svg, .entry-tools .flag-btn.f2 svg, .entry-tools .flag-btn.f3 svg { fill: currentColor; }
.entry-tools .flag-btn.f3 { color: var(--flag-3); }
.entry-tools .flag-btn.f2 { color: var(--flag-2); }
.entry-tools .flag-btn.f1 { color: var(--flag-1); }
.r-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line) !important; padding: 0 6px !important; font-size: var(--t-caption) !important; color: var(--accent); white-space: nowrap; border-radius: 999px; background: none; cursor: pointer; }
.r-chip svg { flex: none; width: 12px; height: 12px; }
.r-chip.off { color: var(--sub); text-decoration: line-through; }
.entry-tools .r-chip { line-height: 1.5; }
.entry-info .record-number { white-space: nowrap; }
/* 여정은 날짜 옆의 작은 단추. 화면별 기본 button 규칙보다 우선해 같은 크기로 표시. */
.entry .entry-info .road-tg { appearance: none; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: var(--t-caption); font-weight: 400; line-height: 1.4; min-height: 22px; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--sub); background: var(--soft); cursor: pointer; white-space: nowrap; }
.entry .entry-info .road-tg:hover { color: var(--accent); border-color: var(--accent); background: var(--card); }
.entry .entry-info .road-tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .entry .entry-info .road-tg { min-height: 28px; } }
/* 스크롤바 (2.122.0 ⑮: 확장 memos.html 의 * 규칙을 옮김, 웹 앱 화면도): 얇고 옅은 선 색. 페이지(오른쪽 본문) 스크롤바도.
범위는 확장 모든 메모(.shell 이 있는 문서)·웹 로그인 뒤 화면(body.app). :where 로 무게 0 이라 화면마다 따로 꾸민 스크롤(웹 메뉴 등)이 이김 */
:where(:root:has(.shell), :root:has(body.app)), :where(:root:has(.shell), :root:has(body.app)) * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* 스크롤바 자리를 늘 비워 둠: 스크롤이 생기고 없어질 때 화면이 옆으로 흔들리지 않게 (웹 read.css html 규칙과 같음, 겹치는 스크롤바 환경에서는 자리 없음) */
:where(:root:has(.shell), :root:has(body.app)) { scrollbar-gutter: stable; }
/* 입력 칸 안내문 (2.122.0 ⑭: 확장 memos.html·sidebar.html 에 두 벌 있던 것, 웹 앱 화면도): 실제 메모와 헷갈리지 않게 연하고 작게.
범위는 확장 모든 메모(.shell)·사이드바(.tab-panel)·웹 로그인 뒤 화면(body.app). 웹 대문·운영자 화면·로그인 칸은 브라우저 기본 그대로 */
:is(.shell, .tab-panel, body.app) :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; font-size: 12px; } /* 값은 확장 pin-ui.js 의 안내문과 같음 */
/* ── 왼쪽 메뉴 줄 (2.122.0 ⑪: 확장 nav.css·웹 read.css 에서 옮김, 두 화면 공통) ──
항목마다 아이콘(글자색을 따라 칠하는 마스크 그림), 하위 분류는 들여쓰고 왼쪽에 안내선, 펼침 삼각형, 개수, 즐겨찾기 별.
메뉴 틀(폭·서랍·검색 칸·로고 줄)은 화면마다: 확장 nav.css, 웹 read.css. 아이콘 ID 는 확장 #nav-… · 웹 #r-nav-… */
.side {
--i-page: url("data:image/svg+xml;utf8,");
--i-globe: url("data:image/svg+xml;utf8,");
--i-hash: url("data:image/svg+xml;utf8,");
--i-pin: url("data:image/svg+xml;utf8,");
--i-cal: url("data:image/svg+xml;utf8,");
--i-flag: url("data:image/svg+xml;utf8,");
--i-star: url("data:image/svg+xml;utf8,");
--i-dash: url("data:image/svg+xml;utf8,");
--i-link: url("data:image/svg+xml;utf8,");
--i-snap: url("data:image/svg+xml;utf8,");
--i-archive: url("data:image/svg+xml;utf8,");
--i-quote: url("data:image/svg+xml;utf8,");
--i-clock: url("data:image/svg+xml;utf8,");
--i-gear: url("data:image/svg+xml;utf8,");
--i-user: url("data:image/svg+xml;utf8,");
}
/* 넓은 화면의 메뉴 폭 (2.122.0 ⑫: 웹 260px 로 맞춤, 확장 nav.css·memos.html 제목 띠·웹 read.css 칸이 이 값을 씀). 좁은 화면 서랍 폭은 화면마다 min(80vw, 320px) */
:root { --side-w: 260px; }
/* 메뉴 안 기본 글자 (확장 memos.html body·pin-ui.js 3절과 같은 값, 웹 body 16px 를 물려받지 않게) */
.side { font-size: 15px; line-height: 1.5; letter-spacing: -.01em; word-break: keep-all; }
.side .fav-btn { font: inherit; }
.side .nav-item, .side .sub-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; margin-bottom: 1px; }
.side .nav-item { padding: 4px 8px; font-size: var(--t-body); line-height: 1.4; font-weight: 600; }
.side .nav-item::before, .side .sub-item::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.side .nav-item:hover, .side .sub-item:hover { background: color-mix(in srgb, var(--sub) 14%, transparent); }
.side .nav-item.active, .side .sub-item.active { background: var(--card); color: var(--accent); }
/* 고른 범위에서 '모든 메모에서'로 넓혀 찾는 중: 고른 줄은 점선으로만 남겨 어디서 왔는지 보이게 (2.82.0) */
.search-wide .side .nav-item.active, .search-wide .side .sub-item.active { background: none; color: var(--sub); outline: 1px dashed var(--line); outline-offset: -1px; }
/* ✏️ 메모 남기기 화면 (2.114.0): 밑에 둔 화면의 메뉴 줄은 고른 표시를 끔 (✏️ 단추만 눌린 표시) */
body.writing .side .nav-item.active, body.writing .side .sub-item.active { background: none; color: inherit; }
.side .nav-sep { height: 1px; background: var(--line); margin: 8px 6px; }
:is(#nav-dash, #r-nav-dash) { --ico: var(--i-dash); }
:is(#nav-favs, #r-nav-favs) { --ico: var(--i-star); }
:is(#nav-pins, #r-nav-pins) { --ico: var(--i-pin); }
:is(#nav-pages, #r-nav-pages) { --ico: var(--i-page); }
:is(#nav-flags, #r-nav-flags) { --ico: var(--i-flag); }
:is(#nav-reminders, #r-nav-reminders) { --ico: var(--i-clock); } /* 2.129.0 */
:is(#nav-domains, #r-nav-domains) { --ico: var(--i-globe); }
:is(#nav-tags, #r-nav-tags) { --ico: var(--i-hash); }
:is(#nav-dates, #r-nav-dates) { --ico: var(--i-cal); }
:is(#nav-quotes, #r-nav-quotes) { --ico: var(--i-quote); }
:is(#nav-archive, #r-nav-archive) { --ico: var(--i-archive); }
:is(#nav-snapshots, #r-nav-snapshots) { --ico: var(--i-snap); }
:is(#nav-shares, #r-nav-shares) { --ico: var(--i-link); }
:is(#nav-account, #r-nav-account) { --ico: var(--i-user); }
:is(#nav-settings, #r-nav-settings) { --ico: var(--i-gear); }
.side .sub-item[data-icon="globe"] { --ico: var(--i-globe); }
.side .sub-item[data-icon="link"] { --ico: var(--i-link); }
.side .sub-item[data-icon="hash"] { --ico: var(--i-hash); }
.side .sub-item[data-icon="cal"] { --ico: var(--i-cal); }
.side .sub-item[data-icon^="flag"] { --ico: var(--i-flag); }
.side .sub-item[data-icon="page"] { --ico: var(--i-page); }
/* 즐겨찾기 (2.115.0, 웹 read.css 와 같은 규칙): 줄 끝 별 단추(마우스를 올리면 개수 자리에, 터치 화면은 늘).
2.164.0: 종류 머리글 없이 태그·사이트·페이지 순 한 목록, 종류는 화면 읽기 프로그램에만(.sr-only) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.side .sub li { position: relative; }
.side .fav-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--sub); cursor: pointer; opacity: 0; }
.side .fav-btn svg { width: 14px; height: 14px; }
.side .fav-btn[aria-pressed="true"] { color: var(--accent); }
.side .fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.side .fav-btn:hover { background: color-mix(in srgb, var(--sub) 22%, transparent); }
.side .sub li:hover > .fav-btn, .side .fav-btn:focus-visible { opacity: 1; }
.side .sub li:has(> .fav-btn):hover > .sub-item .count, .side .sub li:has(> .fav-btn:focus-visible) > .sub-item .count { visibility: hidden; }
@media (hover: none) { .side .fav-btn { opacity: 1; } .side .sub li:has(> .fav-btn) > .sub-item { padding-right: 26px; } }
/* 사이트 줄: 저장한 사이트 아이콘이 있으면 선 아이콘 자리에 그 그림 (2.69.4) */
.side .sub-item.has-site-icon::before { display: none; }
.side .sub-item .nav-site-icon { flex: none; width: 14px; height: 14px; margin: 0 -1px; border-radius: 3px; object-fit: contain; }
.side .sub-item[data-icon="flag3"]::before { color: var(--flag-3); }
.side .sub-item[data-icon="flag2"]::before { color: var(--flag-2); }
.side .sub-item[data-icon="flag1"]::before { color: var(--flag-1); }
/* 큰 분류의 펼침 표시는 오른쪽 끝, 하위 항목의 펼침 표시는 아이콘 앞(들여쓴 자리) */
.side .caret { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; font-size: 1.05em; color: var(--sub); border-radius: 4px; }
.side .nav-item .caret { order: 3; margin: -2px 0 -2px auto; }
.side .caret:not(:empty):hover { background: color-mix(in srgb, var(--sub) 22%, transparent); color: var(--ink); }
.side .sub { list-style: none; margin: 0 0 2px 14px; padding: 0 0 0 3px; border-left: 1px solid var(--line); }
.side .sub[hidden] { display: none; }
.side .sub-item { gap: 5px; padding: 2px 6px 2px calc(1px + var(--depth, 0) * 12px); font-size: var(--t-label); line-height: 1.35; word-break: break-all; }
.side .sub-item::before { width: 12px; height: 12px; color: var(--sub); }
.side .sub-item.active::before { color: inherit; }
.side .sub-item .caret { order: -1; margin: -2px -2px -2px -4px; }
/* 메뉴 '예약' 줄 끝 개수 (2.144.0): 대시보드 '지났어요' 칩(.dash-chip.late)과 같은 색이라 네 색상 × 밝게·어둡게 그대로 맞음 */
.side .nav-item .nav-badge { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: var(--r-pill); font-size: var(--t-caption); font-weight: 600; line-height: 18px; text-align: center; color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--card)); }
/* 다가오는 예약 수 (2.150.1): 아래 줄 개수(.sub-item .count)와 같은 연한 글자, 뒤에 놓친 수 알약이 붙으면 그 앞에 */
.side .nav-item .nav-count { margin-left: auto; padding-left: 4px; color: var(--sub); font-size: var(--t-caption); line-height: 18px; }
.side .nav-item .nav-count + .nav-badge { margin-left: 6px; }
.side .sub-item .count { margin-left: auto; padding-left: 4px; color: var(--sub); font-size: var(--t-caption); }
/* 즐겨찾기 페이지 줄: 긴 제목은 메뉴 폭에 맞춰 한 줄 + … (2.115.2) */
.side .sub-item.clip .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side .sub :is(.empty-note, .empty.small) { padding: 2px 6px; font-size: var(--t-label); color: var(--sub); }
/* ── 왼쪽 메뉴 줄 끝 ── */
/* ── 오른쪽 본문 칸과 제목 띠 (2.123.8, 확장 memos.html .wrap·header / 웹 read.html .content·.detail·.page-head 공통, docs/DESIGN.md 13절) ──
넓은 화면(700px 이상, 확장 사이드바 모드 제외)은 이 한 벌만 씀:
- 본문 칸 .main-col: 좌우 --col-pad, 안의 내용은 최대 --col-max 를 남는 자리 가운데에
- 제목 띠 .title-band: 한 요소가 글자·그러데이션 바탕·흐림·아래 선을 모두 맡아 본문 칸 끝까지(음수 여백).
높이 --band-h 안에 선까지(border-box)라 왼쪽 메뉴 로고 줄 아래 선과 한 줄. 바탕·선을 따로 그리는 요소를 두지 않음
좁은 화면·사이드바 모드의 띠 모양은 화면마다 :where(…)로 가볍게 적어, 넓은 화면에서는 이 규칙이 그대로 이김 */
:root { --col-max: 848px; --col-pad: 24px; --band-h: 48px; }
@media (min-width: 700px) {
:where(body:not(.side-mode)) .main-col { box-sizing: border-box; padding: 0 var(--col-pad) 64px; }
:where(body:not(.side-mode)) .main-col > :not(.title-band) { max-width: var(--col-max); margin-left: max(0px, calc((100% - var(--col-max)) / 2)); }
:where(body:not(.side-mode)) .title-band { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px 12px; box-sizing: border-box; height: var(--band-h); margin: 0 calc(-1 * var(--col-pad)) 20px; padding: 0 calc(var(--col-pad) + max(0px, (100% - var(--col-max)) / 2)); border-bottom: 1px solid var(--line); background: linear-gradient(var(--paper), color-mix(in srgb, var(--paper) 50%, transparent)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:where(body:not(.side-mode)) .title-band h1 { flex: none; max-width: 60%; margin: 0; font-size: 20px; font-weight: 650; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(body:not(.side-mode)) .title-band .title-band-count { min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* 본문 칸 바탕 글자 (2.123.11, 모든 폭): 크기를 따로 정하지 않은 글자·단추가 물려받는 값을 확장·웹 같게 15px·1.5, 자간은 글자마다 자기 크기의 -1%.
예전엔 확장 15px·1.5·화면 전체 고정 -0.15px, 웹 16px·1.7·0 이라 알약 단추·정보 줄 높이 등이 조금씩 달랐음 */
.main-col { font-size: 15px; line-height: 1.5; }
.main-col, .main-col * { letter-spacing: -.01em; }
/* 띠 개수 글자와 자간은 모든 폭에서 같게 (글자마다 자기 크기의 -1%) */
.title-band .title-band-count { color: var(--sub); font-size: var(--t-label); line-height: 1.5; } /* 웹은 .hint 이기도 해서 두 클래스 무게로 */
.title-band, .title-band * { letter-spacing: -.01em; }
/* 목록 위 보기 줄 (2.123.11, 확장 #layoutBar · 웹 .view-toggle 공통): 2.137.0부터 오른쪽에 [⇅ 정렬] [보기] [고르기] 메뉴 단추, 사이 8px, 아래 목록까지 16px.
사이트별·태그별 순서 줄(.site-sort-bar)·인용한 문장 줄(.quote-bar)도 같은 메뉴 */
.view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 16px; }
.view-bar > .spacer { display: none; }
/* 목록 보기 줄 [정렬][보기] … [선택] (확장 #layoutBar·웹 .view-toggle, 2.142.5): 좁은 화면에서도 한 줄 — 꺾는 대신 정렬 이름이 '…'로 줄어듦.
화면 파일의 .toolbar(flex-wrap: wrap)보다 무겁게 */
@media (max-width: 520px) {
.view-bar.list-bar { flex-wrap: nowrap; gap: 2px; }
.view-bar.list-bar .vm-btn { padding-inline: 6px; gap: 4px; }
/* 2.143.6: 돌아가기 단추와 한 줄이라 더 좁아짐 — 정렬·보기 메뉴 모두 이름이 '…'로 줄고, 아주 좁으면 아이콘만 남음 */
.view-bar.list-bar > .view-menu { flex: 0 1 auto; min-width: 32px; }
.view-bar.list-bar > .view-menu > .vm-btn { overflow: hidden; }
.view-bar.list-bar > .view-menu[data-menu="sort"] { flex-shrink: 10; } /* 정렬 이름이 먼저 줄어듦 */
.view-bar.list-bar > .view-menu > .vm-btn { max-width: 100%; min-width: 0; }
.view-bar.list-bar .vm-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.view-bar.list-bar > .vm-btn { flex: none; }
}
.sort-select.vm-source { display: none !important; } /* 정렬 값 보관함 (보이는 것은 메뉴) */
/* ── 보기 줄 메뉴 (2.137.0, view-menu.js): 단추 = 아이콘 + 지금 고른 이름, 누르면 아래로 이름표 + 동그라미 고르기 목록 ── */
.view-menu { position: relative; display: inline-flex; }
.view-menu[hidden] { display: none !important; }
.vm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--sub); font: inherit; font-size: var(--t-label); line-height: 1.3; white-space: nowrap; cursor: pointer; }
.vm-btn:hover, .view-menu.open .vm-btn { background: var(--soft); color: var(--ink); }
.vm-btn:focus-visible, .vm-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vm-icon { width: 18px; height: 18px; flex: none; }
.vm-i-more { stroke-width: 3.6; } /* ⋯ 점이 작아 잘 안 보이던 것 (2.148.1): 점만 굵게 */
.vm-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 190px; box-sizing: border-box; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); box-shadow: 0 8px 28px #0003; }
.vm-pop.left { right: auto; left: 0; }
.vm-pop { max-width: calc(100vw - 16px); } /* 좁은 화면에서도 화면 안 (2.142.6, 자리 맞춤은 view-menu.js fitPop) */
.vm-pop[hidden] { display: none !important; }
.vm-head { padding: 6px 10px 4px; font-size: var(--t-caption); color: var(--faint); }
.vm-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: var(--t-label); text-align: left; white-space: nowrap; cursor: pointer; }
.vm-item:hover { background: var(--soft); }
.vm-item .vm-icon { color: var(--sub); }
.vm-radio { flex: none; box-sizing: border-box; width: 16px; height: 16px; border: 1.5px solid var(--faint); border-radius: 50%; }
.vm-item[aria-checked="true"] .vm-radio { border: 5px solid var(--accent); }
.vm-item[aria-checked="true"] { font-weight: 600; }
@media (pointer: coarse) { .vm-btn { min-height: 38px; } .vm-item { min-height: 42px; } }
/* 할 일 메뉴 (2.138.0: 내보내기·태그·전체 선택): 동그라미 없이 아이콘·이름·오른쪽 작은 글, 쓸 수 없는 줄은 흐리게, 단추 끝 ▾ */
.vm-caret { width: 14px; height: 14px; margin-left: -2px; opacity: .7; }
.vm-sub { margin-left: auto; padding-left: 16px; font-size: var(--t-caption); font-weight: 400; color: var(--faint); }
.vm-item:disabled { opacity: .45; cursor: default; background: none; }
.vm-item.danger, .vm-item.danger .vm-icon { color: var(--bad); }
/* 세 상태 체크 상자: 없음 · 일부(−) · 전체(✓) */
.vm-check { flex: none; box-sizing: border-box; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--faint); border-radius: 5px; background: var(--card); }
.vm-check.on, .vm-check.some { border-color: var(--accent); background: var(--accent); }
.vm-check.on::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--accent-ink); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.vm-check.some::after { content: ""; width: 9px; height: 2px; border-radius: 1px; background: var(--accent-ink); }
/* 선택 줄 (2.138.0, 확장 #selBar · 웹 #r-selbar): 선택하는 동안 보기 줄 자리에. 넓은 화면은 제목 띠 아래에 붙어 있음 */
.sel-bar { justify-content: flex-start; gap: 6px; padding: 4px 6px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
/* 보기 줄(단추 32px, 테두리·여백 없음)과 같은 자리를 차지하게 (2.142.2): 테두리 1px + 안쪽 4px 만큼 위아래로 내밀어, 선택을 켜고 끌 때 목록이 흔들리지 않게.
화면 파일의 .toolbar(flex-wrap: wrap)보다 무겁게 :is() 로 */
:is(.view-bar, .toolbar).sel-bar { box-sizing: border-box; min-height: 42px; margin-block: -5px 11px; }
.sel-bar .sel-count .short { display: none; }
.sel-bar .sel-count { padding: 0 6px; font-size: var(--t-label); font-weight: 600; color: var(--ink); white-space: nowrap; }
.sel-bar .sel-count small { font-weight: 400; color: var(--faint); }
.sel-bar .sel-sep { width: 1px; height: 20px; background: var(--line); }
.sel-bar .sel-all { padding: 4px 7px; }
.sel-bar .sel-grow { flex: 1; }
.sel-bar > .vm-btn, .sel-bar .view-menu .vm-btn { color: var(--ink); }
@media (min-width: 700px) { :where(body:not(.side-mode)) .sel-bar { position: sticky; top: calc(var(--band-h) + 8px); z-index: 4; } }
@media (max-width: 520px) { :is(.view-bar, .toolbar).sel-bar { flex-wrap: nowrap; gap: 2px; } .sel-bar .sel-count .long { display: none; } .sel-bar .sel-count .short { display: inline; } .sel-bar .vm-btn .vm-label, .sel-bar .vm-caret { display: none; } .sel-bar .vm-btn { padding-inline: 7px; } }
/* 선택하는 동안 줄·카드마다 체크 상자 (오른쪽 위), 선택한 것은 강조색 테두리 (확장 #list · 웹 #r-pages) */
[data-key]:has(> .sel-box) { position: relative; }
.list-row:has(> .sel-box:not(.peek)) { padding-right: 40px; }
.sel-box { position: absolute; top: 14px; right: 14px; z-index: 1; width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--accent); }
[data-look="compact"] .sel-box { top: 10px; }
/* 고른 줄·카드 (2.142.3): 바깥 테두리(outline) 대신 칸 안을 덮는 바탕 — 칸 크기 그대로라 이웃 칸과 겹치지 않음. 칸의 원래 바탕·모서리 위에 안쪽 그림자로 덮음 (목록 모양 넷·카드·웹 같음) */
[data-key][data-key].sel-on { box-shadow: inset 0 0 0 100vmax var(--sel-bg); } /* 웹 read.css 마우스 올림 그림자(.card-item:hover 등)보다 무겁게 */
/* 선택하지 않을 때 (2.140.0): 마우스를 올린 줄에만 옅게, 누르면 그 줄을 고른 채 선택 시작. 터치 화면은 [선택] 단추로만 */
.sel-box.peek { opacity: 0; transition: opacity .12s; }
[data-key]:hover > .sel-box.peek, .sel-box.peek:focus-visible { opacity: .6; }
@media (hover: none) { .sel-box.peek { display: none; } }
/* 태그 편집 칸 (2.140.0, view-menu.js tagEditor): 메뉴 → 추가·삭제·이름 변경 작은 입력 칸 */
.vm-pop.te-panel { width: min(340px, calc(100vw - 32px)); padding: 10px 12px 12px; display: grid; gap: 8px; white-space: normal; }
.te-head { display: flex; align-items: center; gap: 4px; padding: 0; }
.te-back { border: 0; background: none; color: var(--sub); font: inherit; font-size: 18px; line-height: 1; padding: 0 6px 0 0; cursor: pointer; }
.te-back:hover { color: var(--ink); }
.te-rows { display: grid; max-height: 240px; overflow-y: auto; }
.te-hint { font-size: var(--t-caption); color: var(--faint); }
.vm-pop .te-tags { width: 100%; box-sizing: border-box; }
/* 떠 있는 칸 안에서는 추천을 글 흐름에 (아래 단추를 가리지 않게) */
.vm-pop > .tag-sugg { position: static; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
/* 태그 이름 고치기 칸 (2.141.0, md.js tagEditForm: 웹 칩 메뉴·확장 태그별·선택 줄 공용. 메모 칸은 content.js 에 같은 값): 변경 전 → 변경 후 */
.tag-menu { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.tag-menu-title { font-size: var(--t-caption); font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
.tag-edit { display: flex; flex-direction: column; gap: 8px; font-size: var(--t-caption); color: var(--ink); }
.tag-edit-row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: center; gap: 8px; }
.tag-edit-label { color: var(--sub); }
.tag-edit-from { font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
.tag-edit-input, .tag-edit-from-input { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-body); }
.tag-edit-input:focus, .tag-edit-from-input:focus { outline: 0; border-color: var(--accent); }
.tag-edit-sugg { display: flex; flex-wrap: wrap; gap: 6px; padding-left: calc(4.5em + 8px); }
.tag-edit-sugg[hidden] { display: none; }
.tag-edit-pick { display: inline-flex; align-items: baseline; gap: 4px; flex: none; max-width: 100%; white-space: nowrap; border: 1px dashed var(--line); border-radius: 6px; background: none; color: var(--sub); font: inherit; padding: 1px 8px; cursor: pointer; }
.tag-edit-pick small { color: var(--faint); }
.tag-edit-pick:hover, .tag-edit-pick.hl { border-style: solid; border-color: var(--accent); color: var(--accent); }
.tag-edit-hint:empty, .tag-edit-preview:empty { display: none; }
.tag-edit-hint, .tag-edit-note { color: var(--sub); }
.tag-edit-hint.ask { color: var(--ink); font-weight: 600; }
.tag-edit-preview { padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); color: var(--ink); }
.tag-edit-scope { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tag-edit-scope label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.tag-edit-scope input { margin: 0; accent-color: var(--accent); }
.tag-edit-actions { display: flex; justify-content: flex-end; gap: 6px; }
.tag-edit-save:disabled { opacity: .5; cursor: default; }
@media (pointer: coarse) { .tag-edit-input, .tag-edit-from-input { font-size: 16px; } }
.te-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* 잠깐 뜨는 알림 (복사했어요 등) */
.vm-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--r-sm); background: var(--ink); color: var(--paper); font-size: var(--t-label); box-shadow: 0 6px 20px #0003; }
.vm-toast[hidden] { display: none !important; }
/* ── 오른쪽 본문 칸과 제목 띠 끝 ── */
/* ── 확장 모든 메모·웹 /read 공용 화면 규칙 (2.127.0, 두 화면에 글자 그대로 같던 규칙을 옮겨 옴: 인용한 문장·사이트/태그 카드·
태그 칸·메모 당시 페이지 일부·찾는 범위 줄·Markdown 표시 등. 새로 고칠 때는 여기 한 곳만, 화면 파일에 같은 규칙을 다시 쓰지 않음) ── */
.dom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .6rem; margin: .4rem 0 1rem; }
.dom-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; color: var(--ink); font: inherit; }
.dom-card:hover { border-color: var(--accent); }
.dom-card .dom-body { display: grid; gap: 2px; min-width: 0; }
.dom-card .dom-mark { width: 52px; height: 52px; border-radius: 12px; font-size: 22px; }
.dom-card .dn { min-width: 0; font-size: var(--t-title); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.dom-card:hover .dn { color: var(--accent); }
.dom-card .ds { font-size: var(--t-caption); color: var(--faint); }
.search-scope .scope-go { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; border-radius: 4px; }
.search-scope .scope-go:hover { text-decoration: underline; }
.search-scope .scope-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-scope .scope-none { color: var(--faint); }
/* 태그별·중요도별(2.145.0) 모음 카드: 글자만이라 아이콘 칸 없이, 없음 카드('태그 없는 메모'·'표시 없음')는 흐리게 */
.dom-card.tag-card, .dom-card.flag-card { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
.dom-card.tag-card.none .dn, .dom-card.flag-card.none .dn { color: var(--sub); }
.tag-subs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* 사이트별·태그별 모음 (2.146.0): 이름으로 찾기 칸(줄 왼쪽, 메뉴는 오른쪽 그대로)과 표(기본 보기). 색은 역할 토큰만이라 네 색상 × 밝게·어둡게 공통.
카드(.dom-card)는 display 를 정해 두어 [hidden]이 듣지 않으므로 찾기로 숨긴 것은 여기서 감춤 */
.site-sort-bar .group-find { flex: 1 1 160px; max-width: 280px; min-width: 0; margin-right: auto; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-label); }
.site-sort-bar .group-find:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.dom-grid > [hidden], .group-table tr[hidden] { display: none; }
.group-table { width: 100%; border-collapse: collapse; margin: .2rem 0 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: var(--t-body); }
.group-table th { padding: 0; text-align: left; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); } /* 숫자 열은 1% 폭이라 꺾지 않게 */
.group-table th.gt-n { text-align: right; }
.group-table .gt-sort { width: 100%; padding: 8px 12px; background: none; border: 0; font: inherit; font-size: var(--t-caption); color: var(--sub); text-align: inherit; cursor: pointer; }
.group-table .gt-sort:hover, .group-table .gt-sort.on { color: var(--accent); }
.group-table .gt-sort.on::after { content: " ↓"; }
.group-table th.gt-name .gt-sort.on::after { content: " ↑"; } /* 이름순은 가나다·abc 오름차순, 숫자 열은 많은·최근이 위 */
.group-table .gt-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-table td { padding: 6px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.group-table tbody tr:first-child td { border-top: 0; }
.group-table .gt-row { cursor: pointer; }
.group-table .gt-row:hover { background: color-mix(in srgb, var(--sub) 10%, transparent); }
.group-table .gt-row:hover .gt-label { color: var(--accent); }
.group-table .gt-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-table td.gt-name { width: 100%; max-width: 0; } /* max-width: 0 이어야 긴 이름이 표를 넓히지 않고 '…'로 줄어듦 */
.group-table .gt-cell { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: calc(var(--depth, 0) * 18px); }
.group-table .gt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.group-table .gt-row.muted .gt-label { color: var(--sub); }
.group-table td.gt-n { width: 1%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sub); }
@media (max-width: 560px) { .group-table .gt-rec, .group-table .gt-when { display: none; } } /* 좁은 화면은 이름과 페이지 수만 */
/* 메뉴 하위 목록 끝 '모두 보기 n' (2.146.0): 아이콘 자리는 비우고 흐린 글자로, 사이트별·태그별 표로 감 */
.side .sub-item.nav-more { color: var(--sub); font-weight: 400; }
.side .sub-item.nav-more::before { visibility: hidden; }
.tag-sub { font: inherit; font-size: var(--t-caption); line-height: 1.4; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--sub); cursor: pointer; }
.tag-sub:hover { border-color: var(--accent); color: var(--accent); }
/* 확장은 이 줄이 .toolbar 이기도 해서 그 아래 여백 규칙을 이기도록 :is 로 무게를 올림 */
:is(.quote-bar, .toolbar.quote-bar) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 var(--s-3); }
.quote-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--s-4); }
.quote-chips-label { font-size: var(--t-caption); color: var(--faint); margin-right: 2px; }
.quote-chip { font: inherit; font-size: var(--t-label); min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); cursor: pointer; }
.quote-chip:hover { border-color: var(--accent); }
.quote-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.quote-chip .n { font-size: var(--t-caption); color: var(--faint); }
.quote-chip[aria-pressed="true"] .n { color: inherit; }
.quote-chips-more { font: inherit; font-size: var(--t-label); background: none; border: 0; padding: 4px 8px; color: var(--accent); cursor: pointer; border-radius: var(--r-sm); }
.quote-chips-more:hover { text-decoration: underline; }
.quote-grid { display: grid; gap: var(--s-3); }
.quote-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.quote-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.quote-head .quote-mark { flex: none; width: 36px; height: 36px; border-radius: 8px; font-size: 15px; }
.quote-head img.quote-mark { box-sizing: border-box; padding: 6px; background: var(--soft); }
.quote-head-text { flex: 1; min-width: 0; }
.quote-head .qt { font-size: var(--t-title); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.quote-head .qs { font-size: var(--t-caption); color: var(--faint); overflow-wrap: anywhere; }
.quote-count { flex: none; font-size: var(--t-caption); color: var(--sub); }
.quote-open { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-label); color: var(--accent); }
.quote-open svg { width: 14px; height: 14px; }
.quote-page-head { margin: 8px 10px 0; font-size: var(--t-label); font-weight: 600; color: var(--sub); overflow-wrap: anywhere; }
.quote-row { display: grid; gap: 4px; box-sizing: border-box; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; }
.quote-row:hover { background: var(--soft); }
.quote-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.quote-row.same { padding-bottom: 2px; }
.quote-gap { padding: 0 10px 0 12px; font-size: var(--t-label); line-height: 1; color: var(--faint); letter-spacing: .15em; user-select: none; }
.quote-gap + .quote-row { padding-top: 2px; }
.quote-text { display: block; position: relative; padding: 7px 12px; background: color-mix(in srgb, var(--accent) 7%, transparent); border-left: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 0 8px 8px 0; font-size: calc(var(--t-read) * .93); line-height: 1.6; color: var(--sub); overflow-wrap: anywhere; word-break: keep-all; } /* 메모 글 인용과 같은 C안 (2.130.0) */
.quote-text::before { content: none; }
.quote-note { min-width: 0; padding-left: 0; max-height: 6.4em; overflow: hidden; font-size: var(--t-read); line-height: 1.6; color: var(--ink); word-break: keep-all; }
.quote-note.clip { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent); }
.quote-note .md { line-height: inherit; }
.quote-note .md p, .quote-note .md ul, .quote-note .md ol, .quote-note .md pre { margin: 0 0 2px; }
.quote-note .md .md-h { margin: 0 0 2px; font-size: inherit; line-height: inherit; }
.quote-note a { color: var(--accent); }
.quote-row mark.hit { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.quote-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-caption); color: var(--faint); }
.quote-only { color: var(--sub); }
.tag-chips { display: flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.tag-chips > .tag-chip { flex: none; max-width: 160px; }
.tag-more { flex: none; width: 22px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; } /* 2.134.3 얇게 */
.tag-overflow { background: var(--card); color: var(--ink); padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.tag-overflow-title { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tag-overflow-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag-overflow-items > .tag-chip { max-width: 100%; }
/* 태그 칸 (2.134.0): 한 상자 안에 태그 글자와 입력 칸. 태그는 칩 바탕·테두리 없이 글자만 (강조색을 글자색에 섞음), 숫자와 ✕는 한 칸에 겹침.
메모 칸 content.js 의 .tags·.tg 가 같은 값 (태그 칸은 두 벌, CONVENTIONS) */
.tag-chip { display: inline-flex; align-items: center; gap: 0; max-width: 100%; padding: 0 4px; border: 0; border-radius: 5px; background: transparent; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); font-size: var(--t-label); line-height: 1.5; }
.tag-chip:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tag-end { display: inline-grid; margin-left: 4px; }
.tag-end > * { grid-area: 1 / 1; justify-self: center; }
.tag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: inherit; }
.tag-n { min-width: 1.1em; color: var(--muted); font-size: 11px; text-align: center; }
.tag-x { padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; visibility: hidden; }
.tag-x:hover { color: var(--accent); }
.tag-field .tag-input:is(:focus, :focus-visible) { outline: none; border: 0; box-shadow: none; } /* 입력 칸 테두리 없음, 쓰는 중 표시는 상자의 옅은 선만 (2.134.1) */
.tag-more:focus-visible, .tag-overflow button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tag-sugg { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.tag-sugg .lbl { color: var(--muted); font-size: var(--t-caption); }
.tag-pick { padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font-size: var(--t-caption); line-height: 1.7; cursor: pointer; }
.tag-pick:hover { background: var(--soft); }
.tag-pick small { margin-left: 3px; color: var(--muted); }
.tag-field .tag-chip.delete-ready { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tag-field .tag-chip.delete-ready :is(.tag-x, .tag-n) { color: var(--accent-ink); }
.tag-key-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.day-head { margin: 1.75rem 0 0.5rem; font-weight: 600; font-size: var(--t-title); }
.md .md-qend { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 10.5px; line-height: 1; color: var(--faint); opacity: .7; letter-spacing: .02em; }
.md .md-qend::before, .md .md-qend::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.md .md-qend::before { flex: 0 0 18px; }
.md mark { background: color-mix(in srgb, #facc15 40%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.md-bar button:hover { border-color: var(--accent); }
.page-info summary { cursor: pointer; color: var(--muted); }
.pi-body { display: flex; gap: .7rem; margin-top: .4rem; padding: .5rem .6rem; background: var(--bg); border-radius: 6px; }
.pi-img { width: 7rem; max-height: 5rem; object-fit: cover; border-radius: 4px; flex: none; }
.pi-text { min-width: 0; }
.pi-by { color: var(--sub); font-size: var(--t-caption); }
.pi-desc { margin-top: .15rem; }
.pi-note { margin-top: .4rem; color: var(--sub); font-size: .85em; }
.pi-excerpt { margin-top: .3rem; color: color-mix(in srgb, var(--ink) 80%, var(--sub)); line-height: 1.65; max-width: 42em; overflow-wrap: anywhere; }
.pi-excerpt p { margin: 0; }
.pi-excerpt p + p { margin-top: .55em; }
.pi-more { display: block; margin-top: .25rem; padding: 2px 0; }
.pi-excerpt p.pi-who { font-weight: 600; color: var(--ink); }
.pi-excerpt p + p.pi-who { margin-top: 1em; }
.pi-excerpt > * + * { margin-top: .55em; }
.pi-excerpt p.pi-h { font-weight: 600; color: var(--ink); margin-top: 1em; }
.pi-excerpt .pi-list { margin: .35em 0 0; padding-left: 1.4em; }
.pi-excerpt .pi-list .pi-list { margin-top: .15em; }
.pi-excerpt .pi-list li + li { margin-top: .15em; }
.pi-excerpt pre.pi-code { margin: .45em 0 0; padding: 8px 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; white-space: pre; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
@media (max-width: 560px) {
.quote-head { flex-wrap: wrap; }
.quote-head-text { flex-basis: calc(100% - 48px); }
}
@media (hover: hover) {
.tag-chip:is(:hover, :focus-within, .delete-ready) .tag-x { visibility: visible; }
.tag-chip:is(:hover, :focus-within, .delete-ready) .tag-end:has(.tag-x) > .tag-n { visibility: hidden; }
}
@media (hover: none) {
.tag-end { display: inline-flex; align-items: center; gap: 6px; }
.tag-x { visibility: visible; }
}
@media (pointer: coarse) {
.tag-field .tag-input { font-size: 16px; }
.tag-x { padding: 2px 4px; }
.tag-pick { padding: 4px 10px; }
}
.search-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; padding: 8px 12px; background: var(--soft); border-radius: var(--r-sm); font-size: var(--t-label); color: var(--sub); }
.day-head small { font-size: var(--t-caption); font-weight: 400; color: var(--faint); margin-left: 0.5rem; }
.tag-field { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; min-height: 24px; padding: 0 6px; border: 0; border-radius: 8px; background: var(--surface-raised, var(--card)); cursor: text; } /* 바탕은 메모 쓰는 칸과 같은 색 (2.134.2) */
.tag-field:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
button.tag-name { padding: 0; border: 0; border-radius: 0; background: none; min-height: 0; cursor: pointer; }
.tag-field .tag-input { flex: 1 1 84px; width: 84px; min-width: 0; padding: 0 4px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: var(--t-label); line-height: 1.5; color: var(--ink); } /* 남은 폭을 채움 (2.127.0 확장 쪽으로, 예전 웹은 84px 고정) */
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: var(--t-title); font-weight: 650; letter-spacing: -0.01em; } /* 메뉴 로고 줄 글자 (DESIGN 13절: --t-title·650, 2.127.0 웹도 같게) */
/* Aa 꾸밈 막대 (확장 모든 메모·웹 같은 모양, 2.127.0. 메모 칸 content.js·사이드바 sidebar.html 은 같은 값을 옮겨 적음) */
.md-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: .3rem 0 .2rem; }
.md-bar button { border: 1px solid var(--line); background: none; color: var(--ink); padding: 0 .45rem; font: inherit; font-size: var(--t-label); border-radius: 6px; min-width: 1.7rem; cursor: pointer; }
.md-bar .sp { flex: 1; }
@media (pointer: coarse) { .md-bar button { padding: 3px 9px; min-width: 30px; } } /* 손가락으로 누르기 좋게 (예전 웹 크기) */