/* 웹 메모 보기 화면: 휴대폰 화면을 먼저 생각해서 씀. 밝은 바탕, 글은 크게. 색·간격·모서리는 tokens.css 를 씀 (docs/DESIGN.md) */
/* 아이콘 그림: 머리(왼쪽 메뉴 바깥)에서도 쓰므로 :root 에 둠 (.side 안에만 두면 머리의 메뉴 아이콘이 그림 없이 단색 사각형이 됨) */
:root {
--i-menu: url("data:image/svg+xml;utf8,");
--i-close: url("data:image/svg+xml;utf8,");
/* 머리 단추 선 아이콘 (2.113.0): 내 계정·잠그기·로그아웃. 메뉴 아이콘과 같은 굵기 */
--i-user: url("data:image/svg+xml;utf8,");
--i-lock: url("data:image/svg+xml;utf8,");
--i-logout: url("data:image/svg+xml;utf8,");
}
* { box-sizing: border-box; }
/* 목록을 다시 그릴 때 브라우저가 스크롤 위치를 제멋대로 옮기지 않게 함 (돌아왔을 때 기억한 위치를 그대로 쓰기 위해) */
html { overflow-anchor: none; }
/* 스크롤바 자리를 늘 비워 둠: 대문과 오갈 때 머리 메뉴 위치가 달라지지 않게 */
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 var(--font); } /* 글꼴 목록은 tokens.css --font 한 곳 (확장과 같음, 2.123.6) */
/* 설치한 앱도 노치·아래 손잡이를 피합니다. 일반 브라우저에서는 보통 0입니다. */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* 폭은 대문(home.css)과 같게: 다르면 대문과 오갈 때 머리의 로고와 단추 위치가 움직임 */
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); }
[hidden] { display: none !important; }
.top { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; background: var(--paper); background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 56px; }
/* 로고 그림은 목록 화면에서만 (로그인 화면은 대문과 같은 글자만, 2.113.0) */
.brand-logo { display: none; flex: none; width: 22px; height: 22px; border-radius: 6px; }
body.app .brand-logo { display: block; }
/* 어두운 화면은 어두운 타일 로고 (2.143.7, 확장 nav.css 와 같음) */
body.app .brand-logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.app .brand-logo-light { display: none; } :root:not([data-theme="light"]) body.app .brand-logo-dark { display: block; } }
:root[data-theme="dark"] body.app .brand-logo-light { display: none; }
:root[data-theme="dark"] body.app .brand-logo-dark { display: block; }
body.app .brand { font-size: var(--t-title); font-weight: 650; letter-spacing: -0.01em; }
/* 단추 글자는 꺾지 않고, 자리가 모자라면 단추째 다음 줄로 */
.nav-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav-actions .btn { white-space: nowrap; }
/* 머리 단추: 내 계정(👤)·잠그기(🔒)는 로그아웃과 같은 테두리·높이의 아이콘 단추(이름은 aria-label·title, 올리거나 고르면 옅은 바탕),
로그아웃은 얇은 글자 단추. 글자 단추로 두면 휴대폰 머리가 넘치고 PC 왼쪽 메뉴 아래 묶음이 여러 줄이 되어 메뉴를 가림 (2026-10-29) */
.nav-actions { gap: 4px; align-items: center; }
.nav .nav-actions .btn.small { padding: 4px 12px; } /* .btn.small 보다 뒤에 와도 이기게 .nav 를 붙임 */
.nav .nav-actions .btn.icon-btn { padding: 4px 10px; }
.nav .nav-actions .btn.icon-btn:hover, .nav .nav-actions .btn.icon-btn[aria-expanded="true"] { background: var(--soft); }
.nav-actions .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 선 아이콘 단추 (2.113.0): 테두리 없이 아이콘만, 올리면 옅은 바탕. 이름은 title·aria-label */
.line-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--sub); cursor: pointer; }
.line-icon::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.line-icon:hover, .line-icon[aria-expanded="true"] { background: var(--soft); color: var(--ink); }
.line-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.i-user { --ico: var(--i-user); }
.i-lock { --ico: var(--i-lock); }
.i-logout { --ico: var(--i-logout); }
/* 목록 화면에서는 내 계정을 메뉴 '계정'으로 (겹치지 않게 숨김). 로그인 전·잠긴 화면에서만 머리에 보임 */
body.app #r-acct { display: none; }
.btn { display: inline-block; padding: 11px 20px; border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; font: inherit; font-size: var(--t-body); cursor: pointer; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.small { padding: 7px 13px; font-size: var(--t-label); }
.intro { color: var(--sub); font-size: var(--t-body); margin: 18px 0 8px; }
h1 { font-size: var(--t-head); margin: 0 0 10px; }
h2 { font-size: var(--t-title); margin: 26px 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; margin: 14px 0; }
.form { display: grid; gap: 8px; }
.form label { font-size: var(--t-body); color: var(--sub); }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row input { flex: 1 1 200px; }
input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 0; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ✏️ 메모 남기기 (웹에서 쓰기 W1): 입력 칸과 같은 모양의 글 칸, 단추는 오른쪽 끝 */
textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 0; resize: vertical; line-height: 1.55; }
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 내 계정: 기기 목록(이름·날짜 | 빼기 단추)과 비밀 문구 바꾸기 */
.card.acct h2 { margin-top: 0; }
.card.acct h3 { font-size: var(--t-body); margin: 18px 0 4px; }
.devices { list-style: none; margin: 10px 0 0; padding: 0; }
.devices li { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.devices li:last-child { border-bottom: 1px solid var(--line); }
.devices .dev-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.devices .dev-when { display: block; color: var(--sub); font-size: var(--t-caption); }
.row.end { justify-content: flex-end; }
/* 메모 칸 Markdown 도구 막대·미리보기 (확장 메모 칸과 같은 md.js, 2.55.0) */
/* Aa 꾸밈 막대(.md-bar) 모양은 components.css (확장과 같음, 2.127.0. 예전 웹은 단추가 더 컸음 → 손가락 화면에서만 크게) */
.md-bar .md-pv { border: 0; background: none; color: var(--sub); text-decoration: underline; }
.md-preview { min-height: 7.5em; max-height: 50vh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.hint { color: var(--sub); font-size: var(--t-body); margin: 6px 0 0; }
/* '비밀 문구를 잊었어요': 복구 코드 칸을 펼치는 작은 글자 단추 (드물게 쓰는 비상 수단이라 눈에 덜 띄게) */
.forgot { display: inline-block; margin: 10px 0 0; padding: 2px 0; border: 0; background: none; color: var(--sub); font: inherit; font-size: var(--t-label); text-decoration: underline; cursor: pointer; }
.forgot:hover, .forgot:focus-visible { color: var(--accent); }
.forgot[hidden], .form[hidden] { display: none; }
.form.rec { margin-top: 14px; }
.check-line { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: var(--t-body); }
.check-line input { margin-top: 4px; }
.msg { min-height: 1.7em; font-size: var(--t-body); margin: 10px 0 0; }
.msg.bad { color: var(--bad); }
.pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* 목록 줄 사이는 목록 모양(components.css 의 --look-between)이 정함 */
#r-pages:not(.cards) { gap: 0; }
/* 검색 결과에서 페이지 아래 고정 메모 묶음의 소제목 */
.list-sub { margin: 20px 0 8px; font-size: var(--t-label); font-weight: 600; color: var(--sub); }
/* 페이지 본문에서 찾은 곳 (2.152.0, 확장 .body-hits 와 같음) */
.body-hits-note { margin: -4px 0 8px; font-size: var(--t-caption); color: var(--sub); word-break: keep-all; }
.body-hits-note .scope-go { margin-left: 4px; }
.item { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.item.static { cursor: default; }
.item strong { display: block; word-break: keep-all; overflow-wrap: anywhere; }
.item .meta, .meta { display: block; color: var(--sub); font-size: var(--t-caption); margin: 2px 0; }
.item .text, .text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; }
.empty { color: var(--sub); padding: 10px 2px; font-size: var(--t-body); }
/* 기록 카드: 본문 → 덧붙임 → 날짜·여정·예약·중요도·연필이 있는 도구 줄 (공통 components.css) */
.entry { margin: 0 0 24px; } /* 모양은 components.css. 카드 사이 24px·끝 8px 는 확장 상세 화면과 같게 (2.122.0 ⑨) */
.entry:last-child { margin-bottom: 8px; }
.entry > .meta, .add > .meta { font-size: var(--t-caption); color: var(--faint); }
.entry > .text { font-size: var(--t-read); line-height: 1.65; }
.add > .text { font-size: var(--t-body); line-height: 1.6; }
.add { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line); }
/* 기록 고치기·지우기 (웹에서 쓰기 W2): 읽을 때 방해되지 않게 작은 글자 단추, 고치는 칸은 카드 안에서 */
.entry-tools .link-btn { color: var(--sub); margin-top: 0; padding: 2px; font-size: var(--t-label); }
.entry-tools .link-btn:hover, .entry-tools .link-btn:focus-visible { color: var(--accent); }
.entry-tools .link-btn.danger:hover { color: var(--bad); }
.entry-tools[hidden], .edit-box [hidden] { display: none; }
.edit-box { display: grid; gap: 8px; margin-top: 8px; }
/* 제목 고치기: 제목 자리에 펼치는 칸 (h2 안이라 글자 크기를 본문으로 되돌림) */
.title-edit { display: grid; gap: 8px; font-size: var(--t-title); font-weight: 400; }
.title-edit input { width: 100%; font-size: var(--t-title); }
.other-text { border-left: 3px solid var(--bad); padding: 4px 0 4px 10px; }
#r-page-host { word-break: break-all; }
/* 목록 화면: 휴대폰에서는 메뉴가 위, 넓은 화면에서는 왼쪽 메뉴와 본문 두 칸 */
.layout { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 10px; }
/* 본문 칸이 안의 넓은 것(날짜별 히트맵 등)에 맞춰 늘어나지 않게: 넓은 것은 자기 안에서 가로로 밀어 봄 (2.74.0) */
/* 그리드 칸은 기본으로 안 내용보다 좁아지지 않아(min-width: auto), 긴 주소·코드·표가 든 메모를 열면 칸이 넓어지고
휴대폰 브라우저가 페이지 전체를 축소해 보여 줬음(글자가 작아 보이고 확대하면 옆으로 밀려남). 모든 칸을 화면 폭 안에 (2.113.0 뒤 웹 보탬) */
.layout > * { min-width: 0; }
.side { border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--card); align-self: start; }
/* 찾는 범위 줄 (확장 memos.html .search-scope 와 같음) */
/* 목록 머리 (2.72.0, 확장 memos.html #listTop 과 같은 짜임): 돌아가기 단추와 보기 줄. 2.142.8부터 #r-list 안에서는 한 줄 (아래 #r-list .toolbar) */
.toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0 0 16px; } /* 아래 목록까지 16px (확장 .toolbar 와 같음, 2.123.11) */
.toolbar > div:first-child { display: flex; flex-direction: column; align-items: flex-start; } /* 돌아가기 아래 저장 묶음 (확장 목록 머리와 같은 순서, 2.125.0). 사이는 .back-btn 아래 10px 만 (확장과 같음, 2.125.1) */
.toolbar > div:first-child:not(:has(> :not([hidden]))) { display: none; }
.toolbar > .view-bar { margin-bottom: 0; } /* 간격은 바깥 .toolbar 가 맡음 */
/* 돌아가기 단추 왼쪽 · 보기 줄 오른쪽 한 줄 (2.142.8, 확장 #listTop 과 같음). 자리가 모자라면 보기 줄이 아래로 꺾임 */
#r-list .toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
#r-list .toolbar .back-btn { margin: 0; }
#r-list .toolbar > .view-bar { flex: 1 1 auto; }
#r-list .toolbar:has(~ .sel-bar:not([hidden])) { display: none; } /* 선택 줄이 같은 자리에 (목록이 흔들리지 않게) */
/* 좁은 화면(2.143.6, 확장 #listTop 과 같음): 꺾지 않고 보기 줄이 줄어듦 — 두 줄이면 선택 줄로 바뀔 때 목록이 뜀 */
@media (max-width: 520px) { #r-list .toolbar { flex-wrap: nowrap; } #r-list .toolbar > div:first-child { flex: none; } #r-list .toolbar > .view-bar { flex: 1 1 0; min-width: 0; } }
/* 제목 띠 (2.113.0, 확장 memos.html header 와 같음): 지금 화면 이름 옆에 '이 목록: …'·'전체: …'. 자리가 모자라면 개수가 아래로 꺾임.
넓은 화면 목록에서는 왼쪽 메뉴 로고 줄과 같은 48px 높이·아래 선 (아래 body.app 규칙) */
/* 좁은 화면 제목 띠 (넓은 화면은 공통 components.css .title-band, :where 라 그쪽이 이김, 2.123.8) */
:where(.page-head) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; margin: 0 0 12px; }
:where(.page-head) h1 { margin: 0; font-size: var(--t-head); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
:where(.page-head #r-count) { margin: 0; }
.page-head #r-count:empty { display: none; }
/* 정렬 상자 (확장 모든 메모의 #sort 와 같은 자리·모양, 2026-10-30) */
#r-theme { font: inherit; font-size: var(--t-label); line-height: 1.3; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 8px; max-width: 100%; }
/* 사이트별 모음 (확장 memos.html 의 .dom-grid·.dom-card 와 같은 모양, 2.70.0). 웹은 사이트 아이콘 없이 첫 글자 칸 */
/* 돌아가기 단추(← 사이트 목록·목록으로)는 바꾸기 단추 + 왼쪽 화살표 (docs/DESIGN.md 18-4, 2.70.0) */
.back-btn { margin: 0 0 10px; }
.back-btn[hidden] { display: none; }
/* 휴대폰: 돌아가기 줄과 보기 줄(정렬·보기 메뉴, 2.137.0)을 각각 한 줄로 */
@media (max-width: 699px) {
.toolbar > div:first-child { flex: 1 1 100%; }
.view-toggle { flex: 1 1 100%; }
}
/* 터치 화면: 정렬 상자 높이를 옆 알약 묶음(단추 32px + 테두리)과 맞춤 */
@media (pointer: coarse) { #r-theme { min-height: 38px; } } /* 정렬 상자는 공통 .sort-select */
/* 날짜별 그날의 길 (2.74.0, 확장 memos.html .day-head·.day-item 과 같음). 히트맵 모양은 components.css .heat */
.day-head:first-child, .heat + .day-head { margin-top: 0; }
/* 기록 줄·카드는 목록과 같은 부품(.list-row·.list-card), 줄 사이는 목록 모양이 정함 (2.75.0) */
.day-list:not(.cards) { gap: 0; }
/* 월 보기에서 달력·요약 아래로 옮긴 목록·카드 단추 (2.75.1, 확장 #layoutBar 처럼 오른쪽) */
#r-days > .view-toggle { justify-content: flex-end; margin: 0 0 12px; }
.day-list + .day-head { margin-top: 1.25rem; }
/* 태그별 모음 카드 (2.73.0, 확장 memos.html 과 같음): 글자만 (아이콘 칸 없음, 2.74.1), 하위 태그는 작은 칩 */
/* 인용한 문장 (2.83.0, 확장 memos.html 과 같음): 묶는 방법·정렬 줄 → 바로 가기 칩 → 카드(머리 + 문장 줄). 문장은 웹페이지 칠하기와 같은 노랑 */
/* 같은 글에서 나온 인용 묶음 (2.84.0) */
/* 메모는 Markdown, 4줄 높이까지 (2.83.2) */
/* # 제목 도 메모 글 크기로 굵게만 */
mark.hit { background: color-mix(in srgb, #facc15 40%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } /* 찾은 말 (목록·기록 글) */
/* 찾은 낱말: 형광펜 노랑과 구별 */
.entry.flash { animation: quote-flash 1.6s ease-out; }
@keyframes quote-flash { from { box-shadow: 0 0 0 4px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
/* 목록 줄·카드 모양은 components.css (.list-row · .list-card). 여기는 웹에만 있는 카드 반응 */
.row-item, .card-item { list-style: none; }
.card-item { border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
/* 카드의 위로 떠오르는 반응·그림 위의 막·단추 채움은 마우스처럼 올려 볼 수 있는 기기(hover: hover)에서만.
터치 기기에서는 누른 뒤에도 :hover 가 남아 카드가 떠 있고 막이 덮인 채여서 어색했음. 키보드는 포커스가 보일 때(:focus-visible)만 같은 반응
(터치로 누른 뒤 남는 포커스에는 반응하지 않음). 터치에는 누르는 동안만 바탕색이 바뀌는 반응(:active)을 줌 */
.card-item { position: relative; }
.card-item.has-img::before { content: ""; position: absolute; left: 16px; right: 16px; top: 14px; height: 150px; border-radius: 8px; background: linear-gradient(rgba(15, 21, 34, 0.05), rgba(15, 21, 34, 0.55)); opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }
.row-item { cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.card-item:has(:focus-visible) { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 21, 34, 0.12); border-color: var(--accent); }
.card-item.has-img:has(:focus-visible)::before { opacity: 1; }
.row-item:has(:focus-visible) { border-color: var(--accent); box-shadow: var(--shadow); }
@media (hover: hover) {
/* 마우스를 올리면 카드가 살짝 떠오르고 그림자가 생김. 그림이 있는 카드는 그림 위에 어두운 막이 올라오고, 메모 보기 단추가 채워짐 */
.card-item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 21, 34, 0.12); border-color: var(--accent); }
.card-item.has-img:hover::before { opacity: 1; }
.row-item:hover { border-color: var(--accent); box-shadow: var(--shadow); }
}
@media (hover: none) {
.card-item, .row-item { -webkit-tap-highlight-color: transparent; }
.card-item:active, .row-item:active { background: var(--soft); }
}
@media (prefers-reduced-motion: reduce) {
.card-item, .row-item { transition: none; }
.card-item:hover, .card-item:has(:focus-visible) { transform: none; }
}
/* 본문 Markdown 꾸밈 (md.js 가 만든 요소): 기본 여백·목록·코드·구분선은 components.css (2.122.0 ⑨) */
.text .md { white-space: normal; }
/* 인용 끝 줄 %% … %% (2.84.0) */
/* 형광펜 ==글== (2.76.0): 노랑을 바탕에 섞어 밝은·어두운 화면 모두 글자가 보이게 */
.card-img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 8px; background: var(--soft); margin: 0; }
.title:not(.row-title) { display: block; margin: 0 0 2px; font-size: var(--t-title); font-weight: 600; overflow-wrap: anywhere; } /* 목록 줄 제목은 공통 components.css .row-title (보기 모양별 크기, 2.123.11) */
.title a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--accent); }
/* 목록 줄·카드 제목은 그 자체가 링크 (components.css .row-title, 줄 수로 자르므로 block 이 아님) */
.list-row .row-title, .list-card .row-title { display: -webkit-box; margin: 0; }
/* 메모 한 개 보기 머리 (docs/DESIGN.md 18-3) */
#r-page { font-size: 15px; line-height: 1.5; letter-spacing: -.01em; } /* 상세 화면 기본 글자: 확장 memos.html body·pin-ui.js 3절과 같은 값 (2.122.0 ⑩) */
#r-page .d-head { margin-top: 4px; margin-bottom: 14px; } /* 목록으로 아래 10px + 4px = 확장의 14px */
#r-page .tag-field { margin-top: 0; }
/* 태그 칸 (2.93.0): 추천은 떠 있는 칸이라 나타나도 아래 글이 밀리지 않음 (확장 메모 칸 .tags·.sugg 와 같은 모양) */
/* 태그가 달린 페이지 수 (2.114.7, 확장 memos.html 과 같은 값) */
.tag-x:hover { color: var(--accent); }
/* 메모 칸(content.js .tg)과 같게: 줄 안 칩은 160px에서 말줄임(… 팝업 안은 전체), ✕는 마우스를 올리거나 지울 준비일 때만 (자리는 그대로라 옆 칩이 안 밀림, 터치 화면은 늘 보임) */
/* 2.114.6: 쓰기 창·메모 보기 태그 칸은 확장 메모 남기기·자세히 보기와 같은 상자 (태그 바로 뒤에 쓰는 자리, 칸 전체 초점 표시) */
:is(#r-w-tags, #r-page-tags) .tag-field { padding: 2px 0.5rem; } /* 상자 모양은 components.css (2.134.0), 2.134.3 얇게 */
#r-w-tags .tag-field { margin-top: 0; } /* 쓰기 창은 이름표 아래 다른 칸과 같은 간격 */
:is(#r-w-tags, #r-page-tags) .tag-field .tag-chips { flex: 0 1 auto; }
:is(#r-w-tags, #r-page-tags) .tag-field .tag-input { flex: 1 1 84px; font-size: var(--t-body); }
/* 좁은 화면은 좌우 여백만 조금 줄여 태그 자리 확보, 터치 화면 입력 글자는 16px(휴대폰이 확대하지 않게) */
@media (max-width: 699px) { :is(#r-w-tags, #r-page-tags) .tag-field { padding-inline: 6px; } }
/* 좁은 화면 메모 남기기: 칸 높이를 얇게 (사용자 요청 2026-11-07). 주소·제목·태그 상자 약 46px → 34px 안팎 */
@media (max-width: 699px) {
#r-write-form input:not(.tag-input), #r-write-form textarea { padding: 6px 10px; }
#r-write-form input:not(.tag-input) { line-height: 1.25; } /* 물려받은 1.7이면 한 줄 칸이 41px */
#r-w-tags .tag-field { padding-block: 2px; min-height: 0; }
}
@media (pointer: coarse) { :is(#r-w-tags, #r-page-tags) .tag-field .tag-input { font-size: 16px; } }
#r-page-title { margin: 0; }
#r-page-title a { color: inherit; text-decoration: none; }
#r-page-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
#r-page .page-acts { margin-bottom: 14px; }
/* 메모 당시 페이지 첫 부분 (2.115.0, 공용 page-info.js node): 확장 memos.html 의 .page-info·.pi-* 와 같은 값 */
#r-page-info:empty { display: none; }
#r-page-info { margin-top: 14px; }
.page-info { font-size: var(--t-label); }
/* 대화 사이트의 말한 사람 줄 (2.116.0) */
/* 2.121.0 줄 단위 Markdown: 제목·목록·코드 블록·표 (page-info.js node). 웹 read.css 와 같은 값 */
@media (max-width: 699px) { .pi-body { flex-direction: column; } .pi-img { width: 100%; max-height: 10rem; } }
/* 목록 미리보기는 글자 수가 아닌 화면 줄로 자름(components.css .row-pv): 휴대폰과 PC에서 같은 높이로 읽을 수 있음 */
.link-btn { background: none; border: 0; color: var(--accent); padding: 4px 0; font: inherit; font-size: var(--t-label); cursor: pointer; margin-top: 4px; }
.empty.small { font-size: var(--t-label); padding: 6px 10px; }
.pages.cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* 나눠 그리기의 이어 그리기 단추 (2.81.0, 확장 .step-more 와 같음): 카드 칸을 가로질러 가운데. 보통은 화면 끝에 닿으면 저절로 이어 그려 잠깐만 보임 */
.pages > .step-more-item { grid-column: 1 / -1; display: flex; justify-content: center; padding: var(--s-4) 0; }
@media (min-width: 600px) { .pages.cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .layout { grid-template-columns: 210px 1fr; } .side { position: sticky; top: 72px; } }
/* 목록 화면은 화면 전체를 씀 (Linkwarden 처럼 왼쪽 메뉴를 화면 끝에 붙이고 본문이 나머지를 채움).
body.app 은 read.js 가 목록 화면일 때만 붙임. 로그인·비밀 문구·페이지 보기는 가운데 좁은 칸 그대로 */
body.app main.wrap { max-width: none; padding: 0; }
body.app .intro, body.app .msg.empty { display: none; }
body.app .layout { margin-top: 0; }
@media (min-width: 700px) {
body.app .layout { grid-template-columns: var(--side-w, 260px) 1fr; gap: 0; min-height: 100vh; }
/* 왼쪽 메뉴: 위(검색 칸)와 아래(머리)는 고정, 가운데 항목만 안에서 스크롤 */
/* 왼쪽 메뉴: 맨 위 로고 줄(머리, 48px) 아래에 검색 칸, 가운데 항목만 안에서 스크롤 */
body.app .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--soft); padding: 58px 8px 12px; } /* 로고 줄 48px + 10px, 좌우 8px: 확장 nav.css .side 와 같은 자리 (2.122.0 ⑬) */
/* 머리는 왼쪽 메뉴 맨 위로 올려 로고와 잠그기·로그아웃을 한 줄에 (2.113.0, 예전엔 맨 아래). 오른쪽 제목 띠와 같은 높이·아래 선.
메뉴 바탕(--soft)은 반투명이라 바탕색을 한 겹 깔아 아래 글이 비치지 않게 */
body.app .top { position: fixed; top: 0; left: 0; width: 260px; height: 48px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: linear-gradient(var(--soft), var(--soft)), var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.app .top .wrap { max-width: none; padding: 0; }
/* .nav 는 .wrap 이기도 해서 위 줄(.top .wrap)이 위아래 여백을 0으로 덮었음: 같은 무게로 다시 적음 */
body.app .top .nav { height: 100%; flex-wrap: nowrap; padding: 0 6px 0 14px; }
body.app .nav .line-icon { width: 30px; height: 30px; }
body.app .nav .line-icon::before { width: 17px; height: 17px; }
body.app .nav .line-icon:hover { background: var(--card); }
/* 본문 칸 폭·가운데와 넓은 화면 제목 띠는 공통 components.css .main-col·.title-band (2.123.8) */
body.app .pages.cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
/* 검색 칸: 왼쪽 메뉴 맨 위 (Linkwarden 처럼). 돋보기는 배경 그림 (밝은 화면과 어두운 화면 모두 보이는 회색).
오른쪽에 ✏️ 메모 남기기 (2026-10-29 머리에서 옮김: 쓰기는 메모 쪽 일이고, 머리는 계정 단추만 두어 한 줄에 들어가게) */
.search { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.search input { display: block; flex: 1; min-width: 0; width: 100%; padding: 6px 12px 6px 34px; font-size: var(--t-body); border-radius: var(--r-pill); background: var(--card) url("data:image/svg+xml;utf8,") no-repeat 12px center; background-size: 15px; }
.write-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 0.95em; line-height: 1; cursor: pointer; }
.write-btn .write-icon { width: 17px; height: 17px; } /* 2.143.7: ✏️ 이모지 대신 선 연필 (확장 nav.css 와 같음) */
.write-btn:hover { filter: brightness(1.1); }
.write-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 왼쪽 메뉴 틀 안쪽 여백 */
.side { padding: 4px; }
/* 메뉴 줄 모양·아이콘은 공통 components.css '왼쪽 메뉴 줄' (2.122.0 ⑪). 아래는 메뉴 밖 페이지 별 단추 */
.fav-page[aria-pressed="true"] { color: var(--accent); }
.fav-page[aria-pressed="true"] svg { fill: currentColor; }
#r-page-fav:empty { display: none; }
/* 메뉴 항목이 많아서 안에서 스크롤될 때 (넓은 화면): 얇고 테마에 맞는 스크롤바는 스크롤하거나 마우스를 올렸을 때만 잠깐 보이고,
스크롤바가 사라진 뒤에도 위·아래에 더 있는 쪽은 작은 삼각형으로 알려 줌 (read.js 가 show·more-up·more-down 을 붙임) */
@media (min-width: 700px) {
body.app .search { flex: none; margin: 0 0 6px; }
body.app .side-body { position: relative; flex: 1; min-height: 0; --hint-bg: var(--soft); }
body.app .side-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
/* Firefox: 표준 속성 (얇게). 그 밖의 브라우저는 아래 webkit 규칙으로 더 얇게 함 */
@supports (-moz-appearance: none) {
body.app .side-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
body.app .side-scroll.show { scrollbar-color: color-mix(in srgb, var(--sub) 55%, transparent) transparent; }
}
body.app .side-scroll::-webkit-scrollbar { width: 6px; }
body.app .side-scroll::-webkit-scrollbar-track { background: transparent; }
body.app .side-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--r-pill); transition: background-color 0.25s ease; }
body.app .side-scroll.show::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sub) 55%, transparent); }
body.app .side-scroll.show::-webkit-scrollbar-thumb:hover { background: var(--sub); }
/* 위·아래 삼각형: 더 볼 것이 있는 쪽만. 바탕색에서 흐려지는 띠 위에 올림 */
body.app .scroll-hint { position: absolute; left: 0; right: 8px; height: 18px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
body.app .scroll-hint::after { content: ""; width: 10px; height: 6px; background: var(--sub); }
body.app .scroll-hint.up { top: 0; align-items: flex-start; background: linear-gradient(var(--hint-bg), transparent); }
body.app .scroll-hint.up::after { margin-top: 3px; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
body.app .scroll-hint.down { bottom: 0; align-items: flex-end; background: linear-gradient(transparent, var(--hint-bg)); }
body.app .scroll-hint.down::after { margin-bottom: 3px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
body.app .side-body.more-up .scroll-hint.up, body.app .side-body.more-down .scroll-hint.down { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { body.app .scroll-hint, body.app .side-scroll::-webkit-scrollbar-thumb { transition: none; } }
/* 휴대폰 폭(700px 미만): 메뉴가 위에 쌓이므로 검색 칸이 메뉴 카드와 함께 스크롤되어 사라졌음.
.side 의 상자를 없애(display: contents) 검색 칸을 목록 전체의 자식으로 만들고, 머리(--top-h + 선 1px) 바로 아래에 붙임.
머리는 48px(2.113.1 뒤 웹 보탬, 예전 56px. 단추는 누르기 좋게 44px 칸 그대로), 아래로 스크롤하면 머리·검색 칸을 숨기고 위로 올리면 다시 보임(body.bars-hidden, read.js)
메뉴 카드 모양은 .side-body 가 가짐. 전체 화면 규칙(body.app main.wrap 의 여백 0)은 넓은 화면용이라 여기서 좌우 여백을 되돌림 */
@media (max-width: 699px) {
body.app { --top-h: 48px; }
body.app .top .nav { height: var(--top-h); }
body.app main.wrap { padding: 0 10px; } /* 2.142.4: 16 → 10px, 목록 글 폭 확보 */
body.app .side { display: contents; }
body.app .search { position: sticky; top: calc(var(--top-h) + 1px); z-index: 5; margin: 0 -10px; padding: 8px 10px; background: var(--paper); }
body.app .side-body { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
body.app .layout { gap: 0; }
body.app .content { margin-top: 14px; }
}
/* 휴대폰의 메뉴 서랍: 머리 왼쪽의 메뉴 아이콘을 누르면 메뉴(.side-body)가 왼쪽에서 서랍으로 나오고, 뒤는 어둡게 덮임(.scrim).
서랍은 화면에 고정(fixed)이라 뒤의 목록과 함께 스크롤되지 않고, 길면 .side-scroll 안에서만 스크롤됨. 열림 상태는 read.js 가 .menu-open 을 body 와 .side 에 붙이고 뗌.
넓은 화면에서는 아이콘·서랍 머리·어두운 바탕이 모두 없고 메뉴는 왼쪽에 늘 보임 */
.menu-open-btn, .drawer-head, .scrim { display: none; }
@media (max-width: 699px) {
body.app .menu-open-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: -12px; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--ink); cursor: pointer; }
body.app .menu-open-btn::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-menu) center / contain no-repeat; mask: var(--i-menu) center / contain no-repeat; }
body.app .menu-open-btn:focus-visible, body.app .drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body.app .nav { gap: 8px; }
body.app .brand { margin-right: auto; }
body.app .nav-actions { flex-wrap: nowrap; gap: 0; margin-right: -6px; }
body.app .nav .line-icon { width: 44px; height: 44px; } /* 머리가 48px 로 얇아져도 누르는 칸은 44px */
body.app .side-body { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; display: flex; flex-direction: column; width: min(80vw, 320px); padding: 0; background: linear-gradient(var(--soft), var(--soft)), var(--paper); border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: 0 0 28px rgba(15, 21, 34, 0.2); transform: translateX(-105%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; }
body.app .side.menu-open .side-body { transform: none; visibility: visible; transition: transform 0.22s ease; }
body.app .drawer-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 10px 8px 6px 8px; }
body.app .drawer-title { font-weight: 600; padding-left: 4px; } /* 글자 시작 12px: 확장 서랍 제목과 같음 (2.122.0 ⑬) */
body.app .drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--sub); cursor: pointer; }
body.app .drawer-close::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-close) center / contain no-repeat; mask: var(--i-close) center / contain no-repeat; }
body.app .side-scroll { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 24px; }
body.app .scrim { position: fixed; inset: 0; z-index: 25; background: rgba(15, 21, 34, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0s linear 0.22s; }
body.app .scrim { display: block; }
body.menu-open.app .scrim { opacity: 1; visibility: visible; transition: opacity 0.22s ease; }
/* 서랍이 열려 있는 동안 뒤의 화면은 스크롤하지 않음 */
body.menu-open.app { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { body.app .side-body, body.app .scrim, body.app .top, body.app .search { transition: none; } }
/* 아주 좁은 화면(휴대폰에서 페이지를 크게 확대했을 때): 맨 위 줄이 꺾이지 않게 'InCarve' 글자는 숨기고 로고만 (2.113.0 뒤 웹 보탬) */
@media (max-width: 280px) { body.app .top .brand > span { display: none; } }
/* viewport-fit=cover 로 넓어진 영역에 머리·검색·서랍이 가리지 않게 합니다. */
@media (max-width: 699px) {
.top { padding-top: env(safe-area-inset-top, 0px); }
.wrap {
padding-left: calc(16px + env(safe-area-inset-left, 0px));
padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
body.app main.wrap { /* 앱 화면은 좌우 10px (2.142.4) */
padding-left: calc(10px + env(safe-area-inset-left, 0px));
padding-right: calc(10px + env(safe-area-inset-right, 0px));
}
body.app .search { top: calc(var(--top-h) + 1px + env(safe-area-inset-top, 0px)); }
/* 스크롤해 내려가면 머리·검색 칸을 위로 숨김. 머리는 노치·상태 표시줄 자리(safe-area)만 남김 */
body.app .top, body.app .search { transition: transform 0.2s ease; }
body.app.bars-hidden .top { transform: translateY(calc(-100% + env(safe-area-inset-top, 0px))); }
body.app.bars-hidden .search { transform: translateY(calc(-100% - var(--top-h) - 1px)); }
body.app .side-body {
padding-top: env(safe-area-inset-top, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
/* 메모 한 개 보기: 목록 화면 안의 본문 자리에 열림 (넓은 화면에서는 왼쪽 메뉴가 그대로 남음).
휴대폰에서도 메모를 보는 중에 머리 왼쪽의 메뉴 아이콘으로 메뉴(서랍)를 열 수 있음 */
@media (max-width: 699px) {
body.app .detail { padding: 14px 0 32px; }
}
/* ⚑ 중요도: 높음 빨강 · 보통 주황 · 낮음 파랑. 메뉴 항목의 깃발과 카드·기록의 표시가 같은 색.
(밝은 화면에서 읽히는 진한 색, 어두운 화면에서는 밝게) */
.flag-mark { margin-right: 4px; } /* 색 값은 tokens.css, 글자 크기·굵기·색은 components.css .flag-mark (확장과 같음, 2.126.1) */
.meta .flag-mark { margin-right: 0; }
/* 대시보드: 칸(위젯) 여러 개. 넓은 화면에서는 두 칸으로, 휴대폰에서는 한 칸으로 쌓임 */
/* 고정 메모 카드 (docs/DESIGN.md 18-5). 2.122.2: 확장 고정 메모(pin-ui.js 4절·memos.html :is(#pinArea, #memoDetail))와 같은 모양 —
카드 그림자·아래 여백 4px, 날짜 줄 위 선, 제목 아래 실선, 덧붙임은 옅은 바탕 상자, 묶음 사이 16px */
.pin-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px 4px; display: grid; gap: 4px; box-shadow: var(--shadow); letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; }
/* 작은 글자 줄(머리·날짜·덧붙임 머리·지난 기록·묶음 머리)은 줄 간격 1.5 (확장 pin-ui.js 와 같게, 2.123.4) */
:is(.pin-card .pin-card-head, .pin-card .meta-line, .pin-card .add .meta, .pin-card .pin-history-toggle, .pin-group-head) { line-height: 1.5; }
/* 자간: 글자마다 자기 크기의 -1% (확장 pin-ui.js 와 같은 규칙, 2.123.5) */
:is(.pin-card, .pin-group-head), :is(.pin-card, .pin-group-head) * { letter-spacing: -.01em; }
.pin-card .add .meta { color: var(--faint); }
/* 카드 자체는 누르는 곳이 아니라 마우스를 올려도 강조하지 않음 (확장 고정 메모 카드와 같게. 단추의 키보드 초점 강조는 그대로) */
.pin-card.row-item:hover:not(:has(:focus-visible)) { border-color: var(--line); }
/* 자세히 보기: 첫 기록은 머리 줄에서 조금 띄움 (확장 .pin-detail .pentry margin-top 12px) */
.pin-card.pin-detail > .pin-card-head + .pin-entry { margin-top: 8px; }
/* 묶음 머리: 확장은 지우기·'＋ 고정 메모' 단추 때문에 28px 줄이라 높이를 맞춤 */
.pin-group-head { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 28px; margin: 8px 0 0; font-size: var(--t-label); font-weight: 600; color: var(--sub); }
#r-pins > .pin-group-head:first-child { margin-top: 0; }
.pin-group-head.nested { margin-top: 2px; }
.pin-group-head .pcount { color: var(--faint); font-weight: 400; font-size: var(--t-caption); }
.pin-card .pin-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-caption); line-height: 1.5; color: var(--faint); }
/* [자세히 보기] 아이콘 (2.115.0)·상단 고정 표시 (2.122.2): 확장 .picon 과 같은 28px 칸, 이름은 툴팁. 위아래 음수 여백으로 머리 줄은 글자 한 줄 높이 */
.pin-card :is(.pin-open, .pin-top-mark) { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px 0 -6px auto; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--sub); }
.pin-card .pin-open { cursor: pointer; }
.pin-card .pin-open:hover { background: var(--soft); color: var(--accent); }
.pin-card .pin-top-mark { color: var(--accent); }
.pin-card .pin-top-mark svg { fill: currentColor; }
.pin-card .pin-top-mark + .pin-open { margin-left: -6px; }
/* 확장 .plink 와 같은 글자 단추 */
.pin-card .pin-history-toggle { justify-self: start; margin: 0 0 4px; padding: 0; border: 0; background: none; color: var(--sub); font: inherit; font-size: var(--t-caption); text-decoration: underline; cursor: pointer; }
.pin-card .pin-history-toggle:hover { color: var(--accent); }
/* 날짜 줄: 확장 .pentry > .pmeta 처럼 위에 선, 도구는 오른쪽 끝 (메모 보기 도구 줄의 선·위 여백은 빼고) */
.pin-card .pin-entry > .meta-line { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-top: 4px; padding-top: 2px; border-top: 1px solid var(--line); font-size: var(--t-caption); color: var(--faint); }
.pin-card .meta-line > .entry-tools { margin: 0 0 0 auto; padding: 0; border: 0; }
/* 덧붙임: 확장 .padd 처럼 옅은 바탕 상자, 머리글 왼쪽·도구 오른쪽 */
.pin-card .pin-entry > .add { margin: 0 0 2px 6px; padding: 3px 10px; border-left: 1px solid var(--line); border-radius: 0 6px 6px 0; background: var(--bg, var(--paper)); }
.pin-card .add > .entry-tools { flex-wrap: nowrap; justify-content: space-between; min-height: 28px; margin: 0; padding: 0; border: 0; }
.pin-card .add > .entry-tools > .meta { margin: 0; }
/* 덧붙임 머리 줄 안에 든 도구 줄은 선·여백 없이 (메모 보기 .entry-tools 기본값이 위에 선을 그음) */
.pin-card .add .entry-tools .entry-tools { margin: 0; padding: 0; border: 0; }
/* 도구 아이콘: 확장 .picon 처럼 28px 칸에 16px 아이콘 */
.pin-card .entry-tools > .link-btn:has(> svg) { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 8px; } /* 음수 여백 없이 28px 칸이 줄 높이를 정함 (확장 .picon 처럼 날짜 줄 31px, 2.123.9) */
.pin-card .entry-tools > .link-btn:has(> svg):hover { background: var(--soft); }
.pin-card .entry-tools > .link-btn > svg { width: 16px; height: 16px; }
#r-pins > .back-btn { justify-self: start; align-self: start; width: max-content; margin-bottom: 6px; }
.pin-card .pin-entry { display: grid; gap: 4px; }
/* 기록 사이: 확장처럼 선 없이 띄움 (날짜 줄 위 선이 나눔) */
.pin-card .pin-entry + .pin-entry { margin-top: 8px; }
.pin-card .pin-history { display: grid; gap: 4px; }
.pin-card .pin-history[hidden] { display: none; }
/* 여백이 있어 저절로 펼친 칸: '더 보기/접기'와 끝 흐림 없음 (openPinsToFit) */
.memo-fold-body.memo-auto-open { -webkit-mask-image: none; mask-image: none; }
.memo-auto-open + .memo-more { display: none; }
.pin-card .text { margin: 0; font-size: var(--t-body); line-height: 1.6; }
.pin-card .text .md > :first-child { margin-top: 0; }
.pin-card .text .md > :last-child { margin-bottom: 0; }
/* 카드가 목록(li) 안이라 브라우저 기본값이 ○ 로 그림 → 확장처럼 ● */
.pin-card .text .md > ul { list-style-type: disc; }
/* 첫 줄 제목: 굵게, 아래 실선 (확장 pin-ui.js 4절 .ptitle 과 같게) */
.pin-card .pin-title { font-weight: 700; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.pin-card .pin-title.solo { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.account-section { padding: 12px 0; border-top: 1px solid var(--line); }
.card.acct .account-section h3 { margin: 0 0 10px; }
@media (max-width: 699px) { body.app .memo-return { scroll-margin-block-start: 72px; } }
.tag-field { margin-top: 6px; } /* 웹 태그 칸 위 여백 (모양은 components.css 공용) */
/* 보관함 (2.147.0, 확장 보관함과 같은 내용): 페이지마다 머리(제목·보관 수·되살리기·완전히 지우기) 아래 보관한 기록 카드(공통 .entry).
색은 역할 토큰만이라 네 색상 × 밝게·어둡게 공통 */
#r-archive > .summary { margin: 0 0 16px; color: var(--sub); font-size: var(--t-label); }
.arch-card { margin: 0 0 28px; }
.arch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.arch-title { min-width: 0; font-size: var(--t-title); font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.arch-title:hover { color: var(--accent); }
.arch-count { font-size: var(--t-caption); color: var(--sub); }
.arch-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.arch-entry { margin: 0 0 12px; }
.arch-entry .meta-line { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; font-size: var(--t-caption); color: var(--sub); }
/* 무료·정지 계정의 웹 편집 단추 (2.159.0): 누르면 플러스 안내만 뜨므로 흐리게 */
body.plus-lock #r-write, body.plus-lock #r-page-write { opacity: 0.55; }