/* 2026-11-02 팝업창 · 노션 스타일 (사용자 지시: "팝업창 디자인이 AI가 만든 느낌, 노션의 깔끔한 스타일로")
   대상: 책 상세(전체 화면)를 뺀 모든 작은 창(dialog)과 떠 있는 메뉴(알림함·글 메뉴·이모지 고르기).
   원칙: 흰 바탕, 얇은 그림자 테두리, 제목 18px/600, 본문 14px, 회색 보조 글자,
         주 단추 1개만 파랑, 나머지는 흰 바탕+옅은 테두리, 링크는 회색 글자 단추. 따뜻한 베이지·두꺼운 테두리·큰 둥근 모서리 걷어냄.
   되돌리기: 이 파일 링크만 빼면 원래대로. 색 값은 notion-reading.css 의 --n-* 를 함께 씀. */
:root{
  --n-text:#37352f; --n-gray:#787774; --n-light:#9b9a97; --n-line:#e9e9e7; --n-line2:#efefed;
  --n-hover:rgba(55,53,47,.08); --n-press:rgba(55,53,47,.16); --n-blue:#2383e2; --n-blue-h:#0b6fd3;
  --n-ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","SUIT Variable","Apple SD Gothic Neo",sans-serif;
  --n-modal-shadow:rgba(15,15,15,.05) 0 0 0 1px,rgba(15,15,15,.1) 0 5px 10px,rgba(15,15,15,.2) 0 15px 40px;
  --n-menu-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;
}

/* ── 창 껍데기 ── */
dialog:not(.book-detail){background:#fff!important;color:var(--n-text)!important;border:0!important;border-radius:10px!important;box-shadow:var(--n-modal-shadow)!important;font:14px/1.6 var(--n-ui);max-width:min(480px,calc(100vw - 24px))}
dialog:not(.book-detail)::backdrop{background:rgba(15,15,15,.45)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
dialog:not(.book-detail) :is(h2,h3){font:600 18px/1.4 var(--n-ui)!important;letter-spacing:-.01em;color:var(--n-text)!important;margin:0 0 6px}
dialog:not(.book-detail) p{font:14px/1.6 var(--n-ui);color:var(--n-text)}
dialog:not(.book-detail) :is(.fine,small,.hint){font:12px/1.5 var(--n-ui)!important;color:var(--n-gray)!important}

/* 닫기 단추: 오른쪽 위 작은 회색 × */
dialog:not(.book-detail) :is(.account-close,.ic-close,.darak-chat-close,[data-close]):not(.book-detail-nav *){position:absolute;top:10px;right:10px;width:28px!important;height:28px!important;min-width:0!important;min-height:0!important;padding:0!important;display:grid;place-items:center;border:0!important;outline:0;border-radius:6px!important;background:transparent!important;color:var(--n-light)!important;font:400 20px/1 var(--n-ui)!important;box-shadow:none!important;cursor:pointer;z-index:2}
dialog:not(.book-detail) :is(.account-close,.ic-close,.darak-chat-close,[data-close]):hover{background:var(--n-hover)!important;color:var(--n-text)!important}
dialog:not(.book-detail) :is(.account-close,.ic-close,[data-close]):focus-visible{box-shadow:0 0 0 2px rgba(35,131,226,.5)!important}

/* 입력 칸 */
dialog:not(.book-detail) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),textarea,select){box-sizing:border-box;width:100%;min-height:34px!important;padding:6px 10px!important;border:0!important;border-radius:6px!important;background:rgba(242,241,238,.6)!important;box-shadow:inset 0 0 0 1px rgba(15,15,15,.1)!important;color:var(--n-text)!important;font:14px/1.5 var(--n-ui)!important;outline:0}
dialog:not(.book-detail) :is(input,textarea,select):focus{background:#fff!important;box-shadow:inset 0 0 0 1px rgba(35,131,226,.57),0 0 0 3px rgba(35,131,226,.25)!important}
dialog:not(.book-detail) label{font:500 12px/1.4 var(--n-ui)!important;color:var(--n-gray)!important}

/* 단추: 기본은 흰 바탕+옅은 테두리, 주 단추만 파랑 */
dialog:not(.book-detail) button:not(.account-close):not(.ic-close):not([data-close]):not(.link):not(.ph-sw):not(.pi-pal-e):not(.ep-e){min-height:32px!important;height:auto;padding:0 12px!important;border:0!important;border-radius:6px!important;background:#fff!important;color:var(--n-text)!important;box-shadow:inset 0 0 0 1px rgba(15,15,15,.16),0 1px 2px rgba(15,15,15,.06)!important;font:500 14px/1.2 var(--n-ui)!important;cursor:pointer;transition:background .12s}
dialog:not(.book-detail) button:not(.account-close):not(.ic-close):not([data-close]):not(.link):not(.ph-sw):not(.pi-pal-e):not(.ep-e):hover{background:rgba(55,53,47,.04)!important}
dialog:not(.book-detail) button:is([type=submit],.primary,.btn-primary,[data-primary]):not(.account-close):not(.ic-close):not([data-close]):not(.link):not(.ph-sw):not(.pi-pal-e):not(.ep-e):not(.quiet){background:var(--n-blue)!important;color:#fff!important;box-shadow:none!important}
dialog:not(.book-detail) button:is([type=submit],.primary,.btn-primary,[data-primary]):not(.account-close):not(.ic-close):not([data-close]):not(.link):not(.ph-sw):not(.pi-pal-e):not(.ep-e):not(.quiet):hover{background:var(--n-blue-h)!important}
dialog:not(.book-detail) button:disabled{opacity:.45;cursor:default}
dialog:not(.book-detail) :is(button.link,a){background:none!important;box-shadow:none!important;border:0!important;padding:0!important;min-height:0!important;color:var(--n-gray)!important;font:14px/1.6 var(--n-ui)!important;text-decoration:underline;text-decoration-color:rgba(55,53,47,.3);text-underline-offset:2px;cursor:pointer}
dialog:not(.book-detail) :is(button.link,a):hover{color:var(--n-text)!important;text-decoration-color:var(--n-text)}
dialog:not(.book-detail) summary{color:var(--n-gray);font:500 14px var(--n-ui);cursor:pointer}

/* ── 계정 창 ── */
.account-dialog{padding:0!important;max-width:min(420px,calc(100vw - 24px))!important}
.account-dialog .account-box{max-width:none;margin:0!important;padding:28px 28px 22px!important;border:0!important;border-radius:0!important;background:transparent!important}
.account-dialog .account-box h2{font-size:20px!important;margin:0 0 4px!important}
.account-dialog .account-box p{margin:0 0 12px;color:var(--n-gray)}
.account-dialog .account-box .me{font:500 14px/1.5 var(--n-ui);color:var(--n-text);word-break:break-all}
.account-dialog .account-box .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.account-dialog .account-box .row button{margin-top:0!important}
.account-dialog .account-box button{margin-top:10px}
.account-dialog .account-box .link{display:inline-block;margin-top:12px}
.account-dialog .account-box details{margin-top:14px;padding-top:12px;border-top:1px solid var(--n-line2)}
.account-dialog [data-account-status]{font:13px/1.5 var(--n-ui)!important}
.account-dialog [data-account-status][data-kind=error]{color:#d44c47!important}
.account-dialog [data-account-status][data-kind=ok]{color:#448361!important}

/* ── 떠 있는 메뉴(알림함·글 메뉴·이모지 고르기·첨부 메뉴) ── */
:is(.notification-inbox,.post-menu-panel,.ep-pop,.darak-attach-menu,.scene-cover-menu){background:#fff!important;color:var(--n-text)!important;border:0!important;border-radius:8px!important;box-shadow:var(--n-menu-shadow)!important;font:14px/1.5 var(--n-ui)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:is(.notification-inbox,.post-menu-panel,.darak-attach-menu,.scene-cover-menu) :is(button,a){border:0!important;border-radius:5px!important;background:transparent!important;color:var(--n-text)!important;box-shadow:none!important;font:14px/1.4 var(--n-ui)!important;text-align:left}
:is(.notification-inbox,.post-menu-panel,.darak-attach-menu,.scene-cover-menu) :is(button,a):hover{background:var(--n-hover)!important}
.post-menu-item{min-height:30px!important;padding:0 10px!important}
.notification-item{border-radius:6px!important;border:0!important;background:transparent!important}
.notification-item:hover{background:rgba(55,53,47,.04)!important}

@media(max-width:600px){
  dialog:not(.book-detail){max-width:calc(100vw - 16px)}
  .account-dialog .account-box{padding:24px 20px 18px!important}
  dialog:not(.book-detail) button:not(.account-close):not(.ic-close):not([data-close]):not(.link):not(.ph-sw):not(.pi-pal-e):not(.ep-e){min-height:40px!important}
}

.account-dialog [data-account-status]:empty{margin:0!important;min-height:0!important}
.account-dialog .account-box .fine{margin-top:10px}

/* 2026-11-02 독서 기록 지우기: 카드 아래 회색 글자 단추, 노션식 확인 창(빨간 '지우기'), 아래 가운데 검은 알림 */
.rd-foot{display:flex;justify-content:flex-end;padding:6px 16px 12px}
.rd-btn{min-height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--n-light);font:500 13px var(--n-ui);cursor:pointer}
.rd-btn:hover{background:rgba(235,87,87,.1);color:#d44c47}
dialog.rd-confirm{width:min(400px,calc(100vw - 24px));padding:24px 24px 18px}
dialog.rd-confirm .rd-text{color:var(--n-gray);margin:0 0 12px}
dialog.rd-confirm .rd-check{display:flex;gap:8px;align-items:flex-start;font:14px/1.5 var(--n-ui)!important;color:var(--n-text)!important;margin:0 0 10px;cursor:pointer}
dialog.rd-confirm .rd-check input{width:16px!important;height:16px;min-height:0!important;margin-top:3px;accent-color:var(--n-blue)}
dialog.rd-confirm .rd-fine{font-size:12px;color:var(--n-light);margin:0 0 16px}
dialog.rd-confirm .rd-row{display:flex;justify-content:flex-end;gap:8px}
dialog.rd-confirm button.rd-ok:not(#_){background:#eb5757!important;color:#fff!important;box-shadow:none!important}
dialog.rd-confirm button.rd-ok:not(#_):hover{background:#d44c47!important}
.rd-toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147483600;display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:8px;background:#2f2f2f;color:#fff;font:14px/1.4 var(--n-ui);box-shadow:var(--n-menu-shadow)}
.rd-undo{border:0;background:transparent;color:#9fc8f1;font:600 14px var(--n-ui);cursor:pointer;padding:4px 6px;border-radius:5px}
.rd-undo:hover{background:rgba(255,255,255,.1)}
@media(max-width:760px){.rd-toast{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* 책 상세 안에서 뜨는 작은 창도 제목은 18px (책 제목 규칙이 덮지 않게) */
.book-detail dialog:not(.book-detail) :is(h2,h3):not(#_){font:600 18px/1.4 var(--n-ui)!important;letter-spacing:-.01em;margin:0 0 6px}

/* 2026-11-02 독서 기록 공유 단추·작은 창 (노션 공유 메뉴처럼) */
.rd-foot{justify-content:space-between;align-items:center}
.rs-share{min-height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--n-gray);font:500 13px var(--n-ui);cursor:pointer}
.rs-share:hover{background:var(--n-hover);color:var(--n-text)}
.rs-share.is-shared{color:#2383e2;background:rgba(35,131,226,.08)}
.rs-pop{position:fixed;z-index:2147483200;width:320px;padding:6px;background:#fff;border-radius:8px;box-shadow:var(--n-menu-shadow);font:14px/1.5 var(--n-ui);color:var(--n-text)}
.rs-h{margin:4px 8px 6px;font:600 12px/1.4 var(--n-ui);color:var(--n-gray)}
.rs-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:6px;background:transparent;text-align:left;cursor:pointer;color:var(--n-text)}
.rs-opt:hover:not(:disabled){background:var(--n-hover)}
.rs-opt:disabled{opacity:.5;cursor:default}
.rs-ic{font-size:18px;width:24px;text-align:center}
.rs-txt{flex:1;display:grid}.rs-txt b{font-weight:500;font-size:14px}.rs-txt small{font-size:12px;color:var(--n-gray)}
.rs-check{color:#2383e2;font-weight:600;width:14px}
.rs-fine{margin:6px 8px 4px;font-size:12px;line-height:1.5;color:var(--n-light)}
.rs-status{margin:4px 8px;font-size:13px;color:var(--n-gray);min-height:0}
.rs-status:empty{display:none}
.rs-name{display:grid;gap:6px;margin:6px 8px 8px;padding-top:8px;border-top:1px solid var(--n-line2)}
.rs-name label{display:grid;gap:4px;font:500 12px var(--n-ui);color:var(--n-gray)}
.rs-name input{min-height:32px;padding:4px 10px;border:0;border-radius:6px;background:rgba(242,241,238,.6);box-shadow:inset 0 0 0 1px rgba(15,15,15,.1);font:14px var(--n-ui);outline:0}
.rs-name input:focus{background:#fff;box-shadow:inset 0 0 0 1px rgba(35,131,226,.57),0 0 0 3px rgba(35,131,226,.25)}
.rs-name-ok{justify-self:start;min-height:30px;padding:0 12px;border:0;border-radius:6px;background:#2383e2;color:#fff;font:500 13px var(--n-ui);cursor:pointer}
.rs-name small{font-size:12px;color:var(--n-light)}