/* 글 한 편 페이지(p/*.html)의 스타일.
notes.html의 본문 디자인을 그대로 떼어 왔다 — 두 곳이 달라 보이면 안 되므로
notes.html의 .a-* 규칙을 고칠 때 이 파일도 같이 고칠 것.
build_notes.py가 이 파일을 p/style.css로 복사한다. */
@font-face{
font-family:"NanumSquareNeo";
src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2") format("woff2");
font-weight:300 900; font-display:swap;
}
:root{
--r-img:3px;
--r-card:8px;
--r-ctl:6px;
--bg:#F4F7FB;
--text:#0D1526;
--text-2:#4B5568;
--text-3:#666F84;
--line:#DFE5EF;
--card-line:#DFE5EF;
--accent:#294AFF;
--accent-hover:#1E3AE0;
--mint:#37FFA9;
--mint-soft:#E1FBF0;
--mint-text:#00805A;
--card:#ffffff;
--shadow:0 1px 2px rgba(13,21,38,.05), 0 6px 20px rgba(13,21,38,.07);
--note-bg:#F4F7FB;
--note-text:#464F63;
--note-lab:#0D1526;
--note-strong:#0D1526;
--nav-bg:#0D1526;
--nav-text:#FFFFFF;
--nav-text-2:#AEB8CC;
--nav-line:#0D1526;
--mint-vivid:#294AFF;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#070B14;
--text:#EEF2F8;
--text-2:#A3AFC2;
--text-3:#7F8B9F;
--line:#1E2739;
--card-line:#1E2739;
--accent:#7B95FF;
--accent-hover:#9AAEFF;
--mint:#37FFA9;
--mint-soft:#0B3228;
--mint-text:#37FFA9;
--card:#101726;
--shadow:0 2px 14px rgba(0,0,0,.5);
--note-bg:#101726;
--note-text:#B6BECD;
--note-lab:#E4E9F2;
--note-strong:#EEF2F8;
--nav-bg:#101726;
--nav-text:#EEF2F8;
--nav-text-2:#A3AFC2;
--nav-line:#1E2739;
--mint-vivid:#7B95FF;
}
}
*{box-sizing:border-box; margin:0;}
/* 콘텐츠 보호: 드래그·복사 방지 (입력칸 제외) */
body{-webkit-user-select:none; -moz-user-select:none; user-select:none;}
input, textarea{-webkit-user-select:text; -moz-user-select:text; user-select:text;}
img{-webkit-user-drag:none; user-drag:none;}
body{
font-family:"NanumSquareNeo","Apple SD Gothic Neo",-apple-system,sans-serif;
background:var(--card); color:var(--text); line-height:1.6; letter-spacing:-0.01em;
-webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
body > nav{
position:sticky; top:0; z-index:50; height:58px;
display:flex; align-items:center; gap:22px; padding:0 max(22px,4vw);
background:color-mix(in srgb, var(--nav-bg) 92%, transparent);
backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid var(--nav-line);
}
body > nav .brand{font-size:17.5px; font-weight:900; color:var(--nav-text); letter-spacing:-0.03em;}
body > nav .links{margin-left:auto; display:flex; gap:20px; align-items:center;}
body > nav .links a{color:var(--nav-text); font-size:15px; font-weight:700; transition:opacity .15s;}
body > nav .links a:hover{opacity:.7;}
@media (max-width:640px){
body > nav{gap:12px; padding:0 16px;}
body > nav .brand{font-size:15.5px; white-space:nowrap;}
body > nav .links{gap:13px;}
body > nav .links a{font-size:13.5px; white-space:nowrap;}
}
.wrap{max-width:680px; margin:0 auto; padding:48px 20px 100px;}
/* 분류별 색상 (notes.html과 같은 규칙) */
.cat{display:inline-block; padding:2px 9px; border-radius:var(--r-ctl); font-weight:700; font-size:12px;}
.cat.c0{color:#00734D; background:#E1FBF0;}
.cat.c1{color:#1E3AE0; background:#E1E8FF;}
.cat.c2{color:#9A5B00; background:#FFF0D6;}
.cat.c3{color:#8A2BC4; background:#F4E6FF;}
.cat.c4{color:#0E7490; background:#DCF5FB;}
.cat.c5{color:#B03060; background:#FFE4EF;}
@media (prefers-color-scheme: dark){
.cat.c0{color:#37FFA9; background:#0C3A2B;}
.cat.c1{color:#9DB0FF; background:#16224A;}
.cat.c2{color:#FFD08A; background:#3A2C14;}
.cat.c3{color:#DCB0FF; background:#2C1A3D;}
.cat.c4{color:#8FE2F5; background:#0F2E38;}
.cat.c5{color:#FFA8C8; background:#3A1626;}
}
/* ---------- 본문 (가독성 최우선) ---------- */
.a-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.a-back{font-size:13px; color:var(--text-2); font-weight:600;}
/* 서재 주인에게만 보이는 편집 통로 */
.a-edit{
font-size:12.5px; font-weight:700; color:var(--accent);
border:1px solid var(--line); border-radius:var(--r-ctl); padding:5px 12px;
}
.a-edit:hover{border-color:var(--accent);}
.a-edit[hidden]{display:none;}
.a-back:hover{color:var(--accent);}
.a-cat{display:inline-block; font-size:12px; font-weight:700; padding:3px 12px; border-radius:var(--r-ctl); margin-top:30px;}
.a-title{font-size:clamp(26px,4.6vw,36px); font-weight:900; letter-spacing:-0.025em; line-height:1.35; margin-top:14px;}
.a-meta{font-size:13px; color:var(--text-3); margin-top:14px; padding-bottom:26px; border-bottom:1px solid var(--line);}
.a-body{
font-family:"Noto Serif KR","NanumSquareNeo",serif;
font-size:17.5px; line-height:2.0; letter-spacing:-0.003em;
color:var(--text); margin-top:34px; word-break:keep-all; overflow-wrap:break-word;
}
.a-body p{margin:0 0 1.5em;}
.a-body h2{
font-family:"NanumSquareNeo",sans-serif; font-size:21px; font-weight:800;
letter-spacing:-0.02em; margin:2.2em 0 0.9em; line-height:1.5;
}
.a-body h3{font-family:"NanumSquareNeo",sans-serif; font-size:17.5px; font-weight:800; margin:1.8em 0 0.7em;}
.a-body h4{font-family:"NanumSquareNeo",sans-serif; font-size:16px; font-weight:800; margin:1.6em 0 0.6em;}
.a-body ul, .a-body ol{margin:0 0 1.5em; padding-left:1.3em;}
.a-body li{margin-bottom:0.55em;}
.a-body blockquote{
margin:1.8em 0; padding:4px 0 4px 20px; border-left:3px solid var(--mint);
color:var(--text-2); font-style:normal;
}
.a-body blockquote p{margin-bottom:0.4em;}
.a-body strong{
font-weight:700; background:var(--mint-soft); padding:2px 5px; border-radius:var(--r-img);
-webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* 내 생각 첨언 — 본문(명조 필사) 옆에 덧붙인 여백 메모.
색을 칠하는 대신 '다른 종이'로 구분한다. */
.a-body .mynote{
font-family:"NanumSquareNeo",sans-serif;
font-size:15.5px; line-height:1.9; letter-spacing:-0.012em;
color:var(--note-text);
background-color:var(--note-bg);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.075'/%3E%3C/svg%3E");
background-repeat:repeat;
border:none; border-radius:0;
padding:19px 22px; margin:2.4em 0 2.4em 2.2em;
}
.a-body .mynote::before{
content:"My Note"; display:block;
font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
font-size:10.5px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
color:var(--note-lab); margin-bottom:11px;
}
.a-body .mynote strong{background:none; padding:0; color:var(--note-strong); font-weight:800;}
@media (prefers-color-scheme: dark){
.a-body .mynote{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}
}
@media (max-width:640px){
.a-body .mynote{margin-left:0; padding:17px 18px;}
}
.a-body a{text-decoration:underline; text-underline-offset:3px;}
.a-body hr{border:none; border-top:1px solid var(--line); margin:2.4em auto; width:120px;}
.a-body code{font-family:ui-monospace,Menlo,monospace; font-size:0.88em; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-img); padding:1px 6px;}
/* 글 끝 Reference — 상자가 아니라 얇은 선 위에 얹은 카드.
색을 따로 쓰지 않고 기존 글자색·선색만으로 낸다. 누르면 책 소개 모달. */
.a-src{
display:block; width:100%; text-align:left; margin-top:54px; padding:22px 0 0;
border:none; border-top:1px solid var(--line); border-radius:0;
background:none; color:inherit; font-family:inherit; cursor:pointer;
}
.a-src .s-lab{
display:block; font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
font-size:11.5px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
color:var(--text-3); margin-bottom:16px;
}
.a-src .s-row{display:flex; align-items:center; gap:18px;}
.a-src .s-cover{
width:58px; height:84px; border-radius:var(--r-img); flex:0 0 auto; object-fit:cover;
background:var(--bg);
}
.a-src .s-cover.ph{
display:flex; align-items:center; justify-content:center;
border:1px solid var(--line); color:var(--text-3); font-size:24px; font-weight:800;
}
.a-src .s-txt{flex:1 1 auto; min-width:0; font-family:"NanumSquareNeo",sans-serif; line-height:1.5;}
.a-src .s-t{
display:block; font-size:18px; font-weight:700; color:var(--text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.a-src .s-s{
display:block; font-size:14px; color:var(--text-3); margin-top:5px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.a-src:hover .s-t{text-decoration:underline; text-underline-offset:3px;}
/* 책 소개 모달 */
.bm{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;}
.bm[hidden]{display:none;}
.bm-back{position:absolute; inset:0; background:rgba(8,16,36,.42);}
.bm-sheet{
position:relative; width:100%; max-width:480px; max-height:86vh; overflow-y:auto;
background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
padding:30px 28px 26px; font-family:"NanumSquareNeo",sans-serif;
}
.bm-x{
position:absolute; top:12px; right:14px; border:none; background:none;
font-size:22px; line-height:1; color:var(--text-3); padding:4px 6px;
}
.bm-x:hover{color:var(--text);}
.bm-head{display:flex; gap:22px; align-items:flex-start;}
.bm-cover{width:120px; height:172px; border-radius:var(--r-img); flex:0 0 auto; object-fit:cover; background:var(--bg);}
.bm-cover.ph{
display:flex; align-items:center; justify-content:center;
border:1px solid var(--line); color:var(--text-3); font-size:40px; font-weight:800;
}
.bm-meta{flex:1 1 auto; min-width:0; padding-top:2px;}
.bm-t{font-size:21px; font-weight:800; line-height:1.4; letter-spacing:-0.02em;}
.bm-s{font-size:14px; color:var(--text-2); margin-top:9px; line-height:1.6;}
.bm-rate{font-size:15px; color:var(--text-3); margin-top:11px; letter-spacing:0.08em;}
.bm-sec{margin-top:22px;}
.bm-lab{
font-size:12px; font-weight:700; color:var(--text-3); letter-spacing:0.03em; margin-bottom:8px;
}
.bm-sec p{font-size:15px; line-height:1.85; color:var(--text-2);}
.bm-go{
display:inline-block; margin-top:26px; font-size:14.5px; font-weight:700; color:var(--accent);
}
@media (max-width:520px){
.bm{padding:16px;}
.bm-sheet{padding:26px 20px 22px;}
.bm-cover{width:92px; height:132px;}
}
.a-rel{margin-top:46px; padding-top:26px; border-top:1px solid var(--line);}
.a-rel h2{font-size:14px; font-weight:800; letter-spacing:-0.01em;}
.a-rel ul{list-style:none; padding:0; margin:14px 0 0;}
.a-rel li{display:flex; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line);}
.a-rel li a{flex:1 1 auto; font-size:14.5px; font-weight:600; color:var(--text);}
.a-rel li a:hover{color:var(--accent);}
.a-rel li span{flex:0 0 auto; font-size:12px; color:var(--text-3);}
/* 지금 읽는 글 — 목록 안에서 내가 어디쯤인지 보이게 */
.a-rel li.cur{border-left:3px solid var(--accent); margin-left:-14px; padding-left:11px;}
.a-rel li.cur .t{flex:1 1 auto; font-size:14.5px; font-weight:800; color:var(--text);}
.a-rel li.cur .now{
flex:0 0 auto; font-size:11px; font-weight:700; color:var(--accent);
background:var(--mint-soft); border-radius:var(--r-ctl); padding:2px 8px;
}
.a-end{margin-top:40px; display:flex; justify-content:flex-end;}
.a-end a{font-size:13.5px; font-weight:600;}
footer{
background:var(--nav-bg); border-top:none; color:var(--nav-text-2);
padding:44px 24px 52px; text-align:center;
}
footer .f-brand{font-size:14px; font-weight:800; color:var(--nav-text);}
footer p{color:var(--nav-text-2); font-size:12.5px; margin-top:8px;}
footer .f-copy{font-size:12px; margin-top:18px; opacity:.75; line-height:1.75;}
footer .f-mail{font-size:12px; margin-top:6px;}
footer .f-mail a{text-decoration:underline;}
footer a{color:var(--nav-text-2) !important;}
footer a:hover{color:var(--nav-text) !important;}