/* 50% = 원형 요소 전용. 이 파일의 border-radius:50% 2건은 전부 원형 요소(아바타·읽음 도트) 전용
   — CLAUDE.md §8-2 ② 사유 주석. 전건 셀렉터를 대조해 확인했다(2026-08-06). */
/* notif-center.css — 알림 센터(P1). 시안 Design/notif-msg 의 인라인 <style> 91~163행을 이관했다.
   ★스코프 루트 .nfc 를 붙인다(S7 .wrz 선례). 시안 클래스에 .ph·.tab 처럼 흔한 이름이 있어
     전역으로 두면 다른 화면과 충돌한다(우리 CSS 에 이미 .ph 1건·.tab 4건이 있다).
   ★쪽지 2열(.mcols 이하)은 P2 소관이라 이관하지 않았다. */
/* 본문을 셸(#page 1080) 폭에 맞춘다. .page-main 의 좌우 padding 20px 때문에 알림·쪽지 본문이
   1040 으로 인셋돼 랭킹·엔티티 같은 풀폭 페이지와 좌우 끝선이 어긋났다.
   ★공통 .page-main 은 건드리지 않는다 — 커뮤니티·설정·라이브러리가 그 인셋을 전제로 짜여 있다.
     .nfc 한정으로만 걷어 2열 비율(설정 262 · 쪽지 목록 352)은 그대로 두고 폭만 넓힌다.
   ※상하 padding(16/64)은 유지한다 — 가로 정렬만 대상이다. */
.page-main.nfc{padding-left:0;padding-right:0}
.nfc .ph{display:flex;align-items:flex-end;gap:12px;border-bottom:2px solid var(--bor);padding-bottom:12px;margin-bottom:16px;flex-wrap:wrap}
.nfc .ph-k{font-family:'Space Mono';font-size:10px;letter-spacing:.11em;color:var(--acc-br);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.nfc .ph-t{font-family:'Chakra Petch',var(--font);font-size:27px;font-weight:700;letter-spacing:-.6px;line-height:1}
.nfc .ph-c{font-family:'Space Mono';font-size:12px;color:var(--t3);margin-left:2px}
.nfc .ph .sp{flex:1}
.nfc .btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--t2);border:1px solid var(--bor);padding:0 13px;height:34px}
.nfc .btn:hover{border-color:var(--bor2);color:var(--t1)}
.nfc .btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none}
.nfc .btn.pri{color:#fff;background:var(--acc-br);border-color:var(--acc-br);font-weight:700}
.nfc html[data-theme="light"] .btn.pri{color:#fff}
.nfc .btn.dan{color:var(--red);border-color:var(--red)}

.nfc .cols{display:grid;grid-template-columns:1fr 262px;gap:20px;align-items:start}
.nfc .ctl{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bor);padding-bottom:9px;margin-bottom:2px;flex-wrap:wrap}
.nfc .tabs{display:flex;gap:3px}
.nfc .tab{font-size:13px;font-weight:600;color:var(--t3);padding:7px 12px;border:1px solid transparent}
.nfc .tab.on{color:var(--acc-br);font-weight:700;background:var(--acc-dim);border-color:var(--acc)}
.nfc .tab .n{font-family:'Space Mono';font-size:10.5px;margin-left:5px;color:var(--t3)}
.nfc .tab.on .n{color:var(--acc-br)}
.nfc .ctl .sp{flex:1}
.nfc .srch{display:flex;align-items:center;gap:7px;border:1px solid var(--bor);height:32px;padding:0 11px;width:230px;font-size:12px;color:var(--t3)}
.nfc .srch svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none;flex:none}
.nfc .tog{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--t2);border:1px solid var(--bor);height:32px;padding:0 11px}
.nfc .tog .bx{width:13px;height:13px;border:1px solid var(--bor2);display:grid;place-items:center;font-size:9px;color:transparent}
.nfc .tog.on{color:var(--acc-br);border-color:var(--acc)}
.nfc .tog.on .bx{background:var(--acc-br);border-color:var(--acc-br);color:#fff}

/* 날짜 그룹 */
.nfc .dgrp{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.nfc .dgrp .l{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--t3);text-transform:uppercase}
.nfc .dgrp .r{flex:1;height:1px;background:var(--hair)}
.nfc .dgrp:first-of-type{margin-top:14px}

/* 알림 행 */
.nfc .nlist{border-top:1px solid var(--hair)}
.nfc .nrow{display:flex;align-items:flex-start;gap:12px;padding:13px 12px 13px 10px;border-bottom:1px solid var(--hair);position:relative;transition:.12s}
.nfc .nrow:hover{background:var(--pane)}
.nfc .nrow.un{background:var(--pane)}
.nfc .nrow.un::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc-br);box-shadow:0 0 10px rgba(60,184,120,.6)}
.nfc .nck{width:15px;height:15px;border:1px solid var(--bor2);flex:none;margin-top:4px;display:grid;place-items:center;font-size:10px;color:transparent}
.nfc .nck.on{background:var(--acc-br);border-color:var(--acc-br);color:#fff}
.nfc .nic{width:30px;height:30px;border:1px solid var(--bor);background:var(--pane2);display:grid;place-items:center;flex:none;color:var(--acc-br)}
.nfc .nic svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.nfc .nic.gold{color:var(--gold)}.nic.red{color:var(--red)}.nic.dim{color:var(--t3)}
.nfc .nbd{flex:1;min-width:0}
.nfc .ntx{font-size:13.5px;line-height:1.55;color:var(--t2)}
.nfc .ntx b{color:var(--t1);font-weight:600}
.nfc .ntx a{font-weight:600}
.nfc .nsnip{font-size:12px;color:var(--t3);line-height:1.5;margin-top:5px;padding-left:10px;border-left:2px solid var(--bor);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:560px}
.nfc .nmeta{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:'Space Mono';font-size:9.5px;color:var(--t3)}
.nfc .nsrc{border:1px solid var(--bor);padding:1px 5px}
.nfc .nact{display:flex;align-items:center;gap:4px;flex:none;opacity:0;transition:.12s}
.nfc .nrow:hover .nact{opacity:1}
.nfc .nact button{width:30px;height:30px;display:grid;place-items:center;color:var(--t3);border:1px solid transparent}
.nfc .nact button:hover{color:var(--t1);border-color:var(--bor)}
.nfc .nact svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.9;fill:none}
.nfc .nat{font-family:'Space Mono';font-size:10px;color:var(--t3);flex:none;padding-top:8px;width:52px;text-align:right}

/* 사이드 */
.nfc .side{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px}
.nfc .sbx{border:1px solid var(--bor);background:var(--pane)}
.nfc .sbx-h{display:flex;align-items:center;gap:7px;padding:11px 13px;border-bottom:1px solid var(--hair);font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--acc-br);text-transform:uppercase}
.nfc .sbx-b{padding:11px 13px}
.nfc .srow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:12.5px;color:var(--t2)}
.nfc .srow:last-child{border-bottom:none}
.nfc .srow .n{margin-left:auto;font-family:'Space Mono';font-size:12px;font-weight:700;color:var(--t1)}
.nfc .srow .d{width:7px;height:7px;flex:none;background:var(--acc-br)}
.nfc .srow .d.g{background:var(--gold)}.srow .d.r{background:var(--red)}.srow .d.n{background:var(--bor2)}
.nfc .sw{width:36px;height:21px;border:1px solid var(--bor2);position:relative;flex:none;margin-left:auto}
.nfc .sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;background:var(--bor2);transition:.15s}
.nfc .sw.on{background:var(--acc-dim);border-color:var(--acc)}
.nfc .sw.on::after{left:17px;background:var(--acc-br)}
/* 알림 ↔ 쪽지 전환 탭 — 두 전체보기 페이지가 공유한다(nfcSwitchHTML). 페이지 타이틀 바로 아래.
   .ph-t 와 세로로 쌓이므로 위 여백만 준다. */
.nfc .nfc-switch{display:inline-flex;margin-top:9px;border:1px solid var(--bor)}
.nfc .nfc-switch button{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--t3);background:none;border:none;padding:5px 14px;cursor:pointer;font-family:inherit;transition:.12s}
.nfc .nfc-switch button+button{border-left:1px solid var(--bor)}
.nfc .nfc-switch button:hover{color:var(--t1)}
.nfc .nfc-switch button.on{color:var(--acc-br);background:var(--acc-dim);cursor:default}
.nfc .nfc-sw-b{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;color:var(--c-white);background:var(--danger);padding:1px 5px;border-radius:var(--r-sm)}
/* .snote(운영 알림 안내)는 P4 에서 제거했다 — 소비처 grep 0 건 확인 후 규칙도 함께 걷는다.
   ops 스위치를 애초에 그리지 않으므로 "끌 수 없다"는 안내가 가리킬 대상이 없었다. */

/* ── 쪽지함(P2) — 시안 인라인 <style> 166~240행 이관. 같은 .nfc 스코프를 쓴다.
   알림과 쪽지는 한 화면 두 모드라 스코프를 나눌 이유가 없다(시안도 한 파일이다). */
/* 쪽지 2열 */
.nfc .mcols[hidden]{display:none}
.nfc .mcols{display:grid;grid-template-columns:352px 1fr;border:1px solid var(--bor);background:var(--pane);min-height:520px}
.nfc .mlist{border-right:1px solid var(--bor);display:flex;flex-direction:column}
.nfc .mrow{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border-bottom:1px solid var(--hair);position:relative}
.nfc .mrow:hover{background:var(--pane2)}
.nfc .mrow.on{background:var(--acc-dim)}
.nfc .mrow.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc-br)}
.nfc .mav{width:30px;height:30px;border-radius:50%;background:var(--pane3);border:1px solid var(--bor);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--t2);flex:none}
.nfc .mrow.un .mav{background:var(--acc-dim);color:var(--acc-br);border-color:var(--acc)}
.nfc .mbd{flex:1;min-width:0}
.nfc .mfrom{display:flex;align-items:baseline;gap:6px}
.nfc .mfrom b{font-size:13px;font-weight:700;color:var(--t1)}
.nfc .mfrom .t{margin-left:auto;font-family:'Space Mono';font-size:9.5px;color:var(--t3);flex:none}
.nfc .mtit{font-size:12.5px;color:var(--t2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfc .mrow.un .mtit{color:var(--t1);font-weight:600}
.nfc .mpre{font-size:11.5px;color:var(--t3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfc .mdot{width:6px;height:6px;border-radius:50%;background:var(--acc-br);box-shadow:0 0 6px var(--acc-br);flex:none;margin-top:11px}
.nfc .mpage{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:12px;border-top:1px solid var(--hair)}
.nfc .mpage button{min-width:28px;height:28px;padding:0 7px;font-family:'Space Mono';font-size:11px;color:var(--t3);border:1px solid transparent}
.nfc .mpage button.on{color:var(--acc-br);border-color:var(--acc);background:var(--acc-dim);font-weight:700}
.nfc .mdet{display:flex;flex-direction:column}
.nfc .md-h{padding:16px 20px 14px;border-bottom:1px solid var(--hair)}
.nfc .md-t{font-size:17px;font-weight:700;letter-spacing:-.3px;line-height:1.4}
.nfc .md-m{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:11.5px;color:var(--t3)}
.nfc .md-m .who{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--t1)}
.nfc .md-m .who .mav{width:24px;height:24px;font-size:10px}
.nfc .md-m .sp{flex:1}
.nfc .md-b{padding:18px 20px;font-size:13.5px;line-height:1.9;color:var(--t2);flex:1}
.nfc .md-b p{margin-bottom:14px;max-width:640px;text-wrap:pretty}
.nfc .md-q{border-left:2px solid var(--bor);padding:2px 0 2px 12px;font-size:12.5px;color:var(--t3);margin-bottom:14px}
.nfc .md-f{display:flex;align-items:center;gap:8px;padding:13px 20px;border-top:1px solid var(--bor);background:var(--pane2)}
.nfc .md-f .sp{flex:1}
.nfc .rep{padding:14px 20px 18px;border-top:1px solid var(--hair)}
.nfc .rep-l{font-family:'Space Mono';font-size:9.5px;font-weight:700;letter-spacing:.09em;color:var(--acc-br);margin-bottom:8px;text-transform:uppercase}
.nfc .rep-i{border:1px solid var(--bor);background:var(--bg);padding:12px;font-size:13px;color:var(--t3);min-height:78px;line-height:1.7}
.nfc .rep-a{display:flex;align-items:center;gap:8px;margin-top:9px}
.nfc .rep-a .c{margin-left:auto;font-family:'Space Mono';font-size:10px;color:var(--t3)}

/* 모바일 */
.nfc .mgrid{display:flex;gap:22px;flex-wrap:wrap}
.nfc .fr{width:390px}
.nfc .fr-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--bor)}
.nfc .fr-n{font-family:'Space Mono';font-size:10.5px;font-weight:700;color:var(--acc-br)}
.nfc .fr-t{font-size:13px;font-weight:700}
.nfc .fr-s{font-size:10.5px;color:var(--t3);margin-left:auto}
.nfc .ph-m{width:390px;height:790px;border:1px solid var(--bor2);background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
.nfc .sb{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 24px;font-size:11px;font-weight:600;flex:none}
.nfc .ab{display:flex;align-items:center;gap:8px;height:48px;padding:0 8px 0 4px;border-bottom:1px solid var(--bor);flex:none;background:var(--nav)}
.nfc .ib{width:40px;height:40px;display:grid;place-items:center;color:var(--t2);flex:none}
.nfc .ib svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none}
.nfc .ab-t{font-size:15px;font-weight:700;flex:1;min-width:0}
.nfc .ab-a{font-size:12px;font-weight:600;color:var(--acc-br);padding:0 10px;height:36px;display:inline-flex;align-items:center;flex:none}
.nfc .mtabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--bor);flex:none;overflow:hidden}
.nfc .mtab{font-size:13px;font-weight:600;color:var(--t3);padding:8px 11px;border-bottom:2px solid transparent;white-space:nowrap}
.nfc .mtab.on{color:var(--t1);font-weight:700;border-bottom-color:var(--acc-br)}
.nfc .mscr{flex:1;overflow:hidden}
.nfc .mfab{position:absolute;right:16px;bottom:22px;width:52px;height:52px;background:var(--acc-br);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.nfc .mfab svg{width:22px;height:22px;stroke:#fff;stroke-width:2.1;fill:none}
.nfc .mwrap{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}
.nfc .mbulk{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--bor);background:var(--pane2);font-size:12px;color:var(--t2);flex:none}
.nfc .mbulk .sp{flex:1}
.nfc .mbulk .a{font-size:12px;font-weight:600;color:var(--acc-br)}
.nfc .mbulk .d{font-size:12px;font-weight:600;color:var(--red)}
.nfc .mrow.mob{padding:12px 14px}
.nfc .nrow.mob{padding:12px 12px 12px 12px}
.nfc .nrow.mob .nact{display:none}
.nfc .nrow.mob .nat{width:auto;padding-top:0;margin-left:auto}

.nfc .note{border:1px dashed var(--bor2);background:var(--pane);padding:15px 17px;font-size:12.5px;line-height:1.8;color:var(--t2);margin-top:18px}
.nfc .note h4{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--acc-br);text-transform:uppercase;margin-bottom:9px}
.nfc .note ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.nfc .note li{padding-left:15px;position:relative}
.nfc .note li::before{content:"—";position:absolute;left:0;color:var(--t3)}
.nfc .note b{color:var(--t1);font-weight:600}