/* 2026-11-01 나의 독서 기록 · 노션 스타일 (사용자 지시: "디자인은 노션을 따라하자", "나의 독서 기록부터")
   원칙: 회색 선 아이콘·연한 회색 바탕·얇은 경계·부드러운 그림자, 귀여움은 이모지와 파스텔 색으로만.
   범위: .reading-notes(나의 독서 기록) 안과 그 위에 뜨는 작은 창(.ph-tool .ph-pop .pi-palette). 되돌리기: 이 파일 링크만 빼면 원래대로. */
:root{
  --n-text:#37352f; --n-gray:#787774; --n-light:#9b9a97; --n-icon:#91918e; --n-line:#e9e9e7; --n-line2:#efefed;
  --n-hover:rgba(55,53,47,.08); --n-press:rgba(55,53,47,.16); --n-bg:#f7f6f3; --n-blue:#2383e2; --n-blue-bg:rgba(35,131,226,.1);
  --n-shadow:rgba(15,15,15,.05) 0 0 0 1px,rgba(15,15,15,.1) 0 3px 6px,rgba(15,15,15,.2) 0 9px 24px;
  --n-shadow-s:rgba(15,15,15,.04) 0 0 0 1px,rgba(15,15,15,.06) 0 2px 4px;
  --n-ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","SUIT Variable","Apple SD Gothic Neo",sans-serif;
}
.ui-ic{display:block;flex:0 0 auto}

/* ── 영역 제목과 위쪽 단추 ── */
.reading-notes{color:var(--n-text)}
.reading-notes>h3{font-weight:700;letter-spacing:-.02em}
.reading-notes .nb-section h4{font:600 15px/1.4 var(--n-ui);color:var(--n-text);margin:0 0 2px}
.reading-notes .nb-lead{font:14px/1.6 var(--n-ui);color:var(--n-gray)}
.reading-notes .nb-bar{gap:2px}
.reading-notes .nb-btn,.reading-note-open{font:500 14px/1 var(--n-ui);color:var(--n-text);background:transparent;border:0;border-radius:6px;min-height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;box-shadow:none}
.reading-notes .nb-btn:hover,.reading-note-open:hover{background:var(--n-hover);border:0}
.reading-notes .nb-btn:active{background:var(--n-press)}
@media(max-width:760px){.reading-notes .nb-btn{min-height:40px}}

/* ── 책 페이지 카드 ── */
.reading-notes .reading-page-card{border:1px solid var(--n-line);border-radius:10px;background:#fff;box-shadow:none;padding:0;overflow:hidden}
.reading-notes .rp-view{background:var(--n-bg)!important;border-radius:0;padding:14px 20px 22px}
.reading-notes .rp-spread{box-shadow:var(--n-shadow-s);border-radius:4px;overflow:hidden}
.reading-notes .rp-head{font:600 13px/1.5 var(--n-ui);color:var(--n-text)}
.reading-notes .rp-meta{font:500 11px/1.5 var(--n-ui);letter-spacing:.06em;color:var(--n-light)}
.reading-notes .reading-page-copy,.reading-notes .rp-bar,.reading-notes .rp-note,.reading-notes .rp-status,.reading-notes .pj,.reading-notes .ph-status{margin-left:20px;margin-right:20px}
.reading-notes .ph-status{font:12px/1.5 var(--n-ui);color:var(--n-light);margin-top:10px}
.reading-notes .reading-page-copy small{font:500 11px/1.4 var(--n-ui);letter-spacing:.06em;color:var(--n-light)}
.reading-notes .reading-page-copy h4{font:600 16px/1.4 var(--n-ui);color:var(--n-text)}
.reading-notes .reading-page-copy time{font:12px var(--n-ui);color:var(--n-light)}
.reading-notes .rp-bar{display:flex;flex-wrap:wrap;gap:2px}
.reading-notes .rp-btn{font:500 13px/1 var(--n-ui);color:var(--n-gray);background:transparent;border:0;border-radius:6px;min-height:28px;padding:0 8px;box-shadow:none}
.reading-notes .rp-btn:hover{background:var(--n-hover);color:var(--n-text)}
.reading-notes .rp-note{font:12px/1.6 var(--n-ui);color:var(--n-light)}
.reading-notes .rp-note a{color:var(--n-gray)}

/* ── 책 위 도구 막대 (노션의 떠 있는 메뉴처럼) ── */
.reading-notes .pi-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;background:#fff;border:0;border-radius:8px;box-shadow:var(--n-shadow-s);padding:4px;margin:0 0 12px;position:sticky;top:6px;z-index:6}
.reading-notes .pi-tool,.reading-notes .pj-tools .pi-tool{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;display:inline-grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--n-icon);font:500 13px var(--n-ui);box-shadow:none}
.reading-notes .pi-tool:hover{background:var(--n-hover);color:var(--n-text)}
.reading-notes .pi-tool[aria-pressed="true"]{background:var(--n-blue-bg);color:var(--n-blue)}
.reading-notes .pi-tool:disabled{color:#d3d1cb;background:transparent;opacity:1}
.reading-notes .pi-tool.pi-small{width:auto;padding:0 8px;color:var(--n-gray)}
.reading-notes .pi-sep{width:1px;height:20px;background:var(--n-line);margin:0 4px;flex:0 0 auto}
.reading-notes .pi-colors{display:inline-flex;gap:6px;align-items:center;padding:0 6px;border-left:1px solid var(--n-line);margin-left:2px}
.reading-notes .pi-colors[hidden]{display:none}
.reading-notes .pi-color,.reading-notes .pj-tools .pi-color{width:18px;height:18px;min-width:0;min-height:0;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(15,15,15,.1);transform:none!important;padding:0}
.reading-notes .pi-color::before,.reading-notes .pi-color::after{display:none!important}
.reading-notes .pi-color[aria-checked="true"]{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--n-blue)}
.reading-notes .pi-hint{font:12px/1.4 var(--n-ui);color:var(--n-light);padding:0 8px;flex:0 1 auto}
.reading-notes .pi-bar{width:fit-content;max-width:100%}
@media(max-width:760px){
  .reading-notes .rp-view{padding:10px 10px 16px}
  .reading-notes .pi-bar{width:100%;top:4px}
  .reading-notes .pi-colors{border-left:0;margin-left:0;padding:4px 6px}
  .reading-notes .pi-tool{width:36px;min-width:36px;height:36px;min-height:36px}
  .reading-notes .pi-hint{display:none}
}

/* ── 칠한 곳: 노션 배경색 ── */
.ph-mark{border-radius:3px;padding:0 1px}
.ph-yellow,.rp-body .ph-yellow{background:#fbf3db}.ph-green,.rp-body .ph-green{background:#edf3ec}.ph-pink,.rp-body .ph-pink{background:#faf1f5}.ph-blue,.rp-body .ph-blue{background:#e7f3f8}
.ph-mark.ph-yellow{box-shadow:inset 0 -2px 0 #f3dfa2}.ph-mark.ph-green{box-shadow:inset 0 -2px 0 #cfe3cb}.ph-mark.ph-pink{box-shadow:inset 0 -2px 0 #efcfe0}.ph-mark.ph-blue{box-shadow:inset 0 -2px 0 #c6e0ec}
.ph-shared{background:none;border-bottom:2px dotted var(--n-light)}

/* ── 글을 고르면 뜨는 색 막대 ── */
.ph-tool{display:flex;align-items:center;gap:4px;padding:4px 6px!important;background:#fff!important;border:0!important;border-radius:8px!important;box-shadow:var(--n-shadow)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;font-family:var(--n-ui)}
.ph-tool .ph-msg{font:13px/1.4 var(--n-ui);color:var(--n-gray);padding:4px 6px}
.ph-sw{width:28px!important;height:28px!important;min-width:0;border:0!important;border-radius:6px!important;background:var(--c)!important;color:var(--t)!important;font:600 14px/1 var(--n-ui)!important;display:inline-grid!important;place-items:center;box-shadow:inset 0 0 0 1px rgba(15,15,15,.06)!important;transform:none!important;padding:0;cursor:pointer}
.ph-sw::before,.ph-sw::after{display:none!important}
.ph-sw:hover{box-shadow:inset 0 0 0 1px rgba(15,15,15,.06),0 0 0 2px var(--n-hover)!important}
.ph-sw[aria-checked="true"]{box-shadow:0 0 0 1.5px var(--n-blue)!important}
.ph-tool.is-touch{gap:6px;padding:6px 8px!important}
.ph-tool.is-touch .ph-sw{width:36px!important;height:36px!important;font-size:16px!important}

/* ── 칠한 곳을 누르면 뜨는 메모 창 (노션 댓글처럼) ── */
.ph-pop{width:min(340px,calc(100vw - 16px));padding:12px 12px 10px!important;background:#fff!important;border:0!important;border-radius:8px!important;box-shadow:var(--n-shadow)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;font:14px/1.5 var(--n-ui);color:var(--n-text)}
.ph-pop .ph-x{position:absolute;top:8px;right:8px;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:5px;background:none;color:var(--n-icon);padding:0}
.ph-pop .ph-x:hover{background:var(--n-hover);color:var(--n-text)}
.ph-pop .ph-who{font:500 12px/1.4 var(--n-ui);color:var(--n-gray);margin:0 0 8px}
.ph-pop .ph-quote{margin:0 0 8px;padding:1px 0 1px 10px;border-left:3px solid #e9c46a;color:#5f5e5b;font:13px/1.55 var(--n-ui);max-height:4.7em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.ph-pop .ph-q-green{border-color:#9fc59a}.ph-pop .ph-q-pink{border-color:#e3a6c6}.ph-pop .ph-q-blue{border-color:#8fc0d8}
.ph-pop .ph-note{width:100%;border:0!important;outline:0;box-shadow:none!important;background:transparent;resize:none;padding:0;min-height:44px;font:14px/1.6 var(--n-ui);color:var(--n-text)}
.ph-pop .ph-note::placeholder{color:var(--n-light)}
.ph-pop .ph-row{display:flex;align-items:center;gap:4px;margin:0;flex-wrap:wrap}
.ph-pop .ph-tools{padding:6px 0 8px}
.ph-pop .ph-colors{display:inline-flex;gap:4px;margin-left:4px}
.ph-pop .ph-colors .ph-sw{width:22px!important;height:22px!important;font-size:12px!important}
.ph-pop .ph-row:last-of-type{border-top:1px solid var(--n-line2);padding-top:8px}
.ph-pop .ph-sp{flex:1}
.ph-pop .ph-vis{height:28px;border:0;border-radius:6px;background:transparent;color:var(--n-gray);font:13px var(--n-ui);padding:0 6px;cursor:pointer}
.ph-pop .ph-vis:hover{background:var(--n-hover)}
.ph-pop .ph-btn{height:28px;min-height:28px;padding:0 12px;border:0;border-radius:6px;font:500 13px/1 var(--n-ui);cursor:pointer;box-shadow:none}
.ph-pop .ph-primary{background:var(--n-blue);color:#fff}
.ph-pop .ph-primary:hover{background:#0b6fd3}
.ph-pop .ph-ghost{background:transparent;color:var(--n-gray)}
.ph-pop .ph-ghost:hover{background:var(--n-hover);color:var(--n-text)}
.ph-pop .ph-fine,.ph-pop .ph-note-ro{font:12px/1.5 var(--n-ui);color:var(--n-light);margin:6px 0 0}
.ph-pop .pi-emoji-btn,.pj .pi-emoji-btn{width:28px;height:28px;min-height:28px;display:inline-grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--n-icon);padding:0}
.ph-pop .pi-emoji-btn:hover,.pj .pi-emoji-btn:hover{background:var(--n-hover);color:var(--n-text)}

/* ── 이모지 고르기 ── */
.pi-palette{background:#fff!important;border:0!important;border-radius:8px!important;box-shadow:var(--n-shadow)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:6px 8px 8px!important;font-family:var(--n-ui)}
.pi-palette .pi-pal-h{font:500 11px/1.4 var(--n-ui);color:var(--n-gray);margin:8px 4px 4px;letter-spacing:0}
.pi-palette .pi-pal-e{width:32px;height:32px;min-height:32px;border-radius:5px;font-size:20px;background:none}
.pi-palette .pi-pal-e:hover{background:var(--n-hover);transform:none}

/* ── 나의 기록 (타이핑·손글씨) ── */
.reading-notes .pj{border:0;border-top:1px solid var(--n-line2);border-radius:0;background:transparent;padding:14px 0 16px;box-shadow:none}
.reading-notes .pj-title{font:600 14px/1.4 var(--n-ui);color:var(--n-text)}
.reading-notes .pj-tabs{display:inline-flex;gap:2px;background:rgba(55,53,47,.06);border-radius:7px;padding:2px}
.reading-notes .pj-tab{font:500 13px/1 var(--n-ui);color:var(--n-gray);background:transparent;border:0;border-radius:5px;min-height:26px;padding:0 10px;box-shadow:none}
.reading-notes .pj-tab[aria-selected="true"]{background:#fff;color:var(--n-text);box-shadow:var(--n-shadow-s)}
.reading-notes .pj-text{border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;font:15px/1.7 var(--n-ui);color:var(--n-text);padding:6px 2px;min-height:96px}
.reading-notes .pj-text::placeholder{color:var(--n-light)}
.reading-notes .pj-tools{gap:2px}
.reading-notes .pj-count{font:12px var(--n-ui);color:var(--n-light)}
.reading-notes .pj-paper{border:1px solid var(--n-line);border-radius:6px;background:#fff repeating-linear-gradient(transparent 0 31px,#f1f1ef 31px 32px)}
.reading-notes .pj-status,.reading-notes .pj-fine{font:12px/1.5 var(--n-ui);color:var(--n-light)}

/* 띄어쓰기 없는 긴 글자 덩어리가 쪽을 밀어내지 않게 (휴대폰에서 오른쪽이 잘리던 문제) */
.reading-notes .rp-spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.reading-notes .rp-body p{overflow-wrap:anywhere}
@media(max-width:760px){.reading-notes .rp-spread{grid-template-columns:minmax(0,1fr)}}