/* aimoyeo — 값은 docs/조사/기준/디자인토큰.md 실측표(문피아·카카오페이지·네이버시리즈·노벨피아)에서 온다. 취향으로 바꾸지 않는다. */
:root { color-scheme:light dark; --bg:#fff; --fg:#000; --fg2:#333; --mute:#888; --line:#ddd; --link:#2b6fe6; --soft:#f5f5f5; --soft2:#ededed; --point:#fa7000; --card:#fff; --hero1:#0f1b3d; --hero2:#2a1f5c; }
@media (prefers-color-scheme: dark) { :root { --bg:#141414; --fg:#ececec; --fg2:#c8c8c8; --mute:#9a9a9a; --line:#2c2c2c; --link:#79aef7; --soft:#1f1f1f; --soft2:#2a2a2a; --card:#1a1a1a; --hero1:#0a1230; --hero2:#1e163f; } }
body.pref-dark { --bg:#141414; --fg:#ececec; --fg2:#c8c8c8; --mute:#9a9a9a; --line:#2c2c2c; --link:#79aef7; --soft:#1f1f1f; --soft2:#2a2a2a; --card:#1a1a1a; --hero1:#0a1230; --hero2:#1e163f; background:var(--bg); color:var(--fg); }
* { box-sizing:border-box; }
html { font: 14px/1.5 "Noto Sans KR", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); -webkit-text-size-adjust:100%; }
body { margin:0; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
main { max-width:1232px; margin:0 auto; padding:0 16px 56px; }
body.home main { max-width:none; padding:0; }
h1 { font-size:22px; font-weight:700; margin:22px 0 6px; letter-spacing:-.01em; } h2 { font-size:18px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em; }

/* 머리 2줄 — 토큰 #머리: 로고+검색+쓰기 / 방 메뉴(문피아 125·카카오 96 → 100 안팎) */
.top { border-bottom:1px solid var(--line); background:var(--bg); }
.top .row { max-width:1240px; margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:16px; }
.top .row.r1 { height:90px; }
.top .logo { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:20px; color:var(--fg); letter-spacing:-.02em; white-space:nowrap; }
.top .logo .mark { width:28px; height:28px; border-radius:7px; background:#122854; color:#fff; font-size:16px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.top .q { display:flex; align-items:center; margin:0 0 0 auto; width:420px; max-width:100%; background:var(--card); border:1px solid var(--line); border-radius:0; padding:0 4px 0 12px; height:49px; }
.top .q input { flex:1; min-width:0; border:0; background:transparent; color:var(--fg); font:inherit; font-size:14px; outline:none; }
.top .q button { border:0; background:transparent; color:var(--mute); font:inherit; font-size:14px; padding:6px 10px; cursor:pointer; border-radius:999px; }
.top .q button:hover { background:var(--soft2); color:var(--fg); }
.top .tools { margin-left:24px; display:flex; gap:8px; align-items:center; white-space:nowrap; }
.top .tools a { color:var(--fg2); font-size:14px; padding:7px 12px; border-radius:999px; } .top .tools a:hover { background:var(--soft); text-decoration:none; }
.top .tools a.primary { background:var(--link); color:#fff; font-weight:600; } .top .tools a.primary:hover { filter:brightness(.93); }
.top .rooms-nav { max-width:1240px; margin:0 auto; padding:0 16px; display:flex; gap:0; font-size:18px; font-weight:400; height:60px; align-items:center; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
.top .rooms-nav::-webkit-scrollbar { display:none; }
.top .rooms-nav a { color:var(--fg); padding:0; margin-right:35px; border-bottom:0; line-height:18px; }
.top .rooms-nav a:hover { color:var(--fg); text-decoration:none; }
.top .rooms-nav a[aria-current] { font-weight:700; }
.top .rooms-nav .srch { display:none; }
.top .rooms-nav .rank-link { margin-left:auto; margin-right:0; color:var(--link); font-weight:600; }
@media (max-width:640px) {
  .top .row.r1 { height:48px; gap:10px; } .top .logo { font-size:18px; } .top .logo .mark { width:24px; height:24px; font-size:14px; }
  .top .q { margin:0; width:auto; flex:1; height:34px; padding:0 4px 0 12px; } .top .q input { font-size:14px; } .top .q button { padding:4px 8px; }
  .top .tools a:not(.primary) { display:none; } .top .tools a.primary { padding:6px 11px; font-size:13px; }
  .top .rooms-nav { font-size:14px; padding:0 8px; } .top .rooms-nav a { padding:8px 8px 7px; } .top .rooms-nav a:first-child { display:none; }
}

/* 히어로 배너 — 토큰 #히어로: 너비 전체, 어두운 그라데이션, 흰 28px 제목, 방 바로가기 알약 */
.hero { position:relative; overflow:hidden; margin:16px 0 8px; border-radius:12px; background:radial-gradient(420px 420px at 92% 0%, rgba(40,130,245,.45), rgba(40,130,245,0) 70%), radial-gradient(360px 360px at 52% 115%, rgba(250,112,0,.28), rgba(250,112,0,0) 70%), linear-gradient(115deg, var(--hero1) 0%, var(--hero2) 60%, #4a2f7a 100%); color:#fff; padding:36px 40px; min-height:220px; display:flex; align-items:center; gap:32px; }
.hero .txt { flex:1 1 auto; min-width:0; }
.hero h2 { font-size:28px; font-weight:600; line-height:1.3; margin:0 0 8px; color:#fff; letter-spacing:-.02em; }
.hero p { margin:0 0 18px; font-size:15px; color:rgba(255,255,255,.78); max-width:520px; }
.hero .go { display:flex; flex-wrap:wrap; gap:8px; }
.hero .go a { display:inline-block; padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
.hero .go a:hover { background:rgba(255,255,255,.24); text-decoration:none; }
.hero .go a.primary { background:var(--link); border-color:var(--link); }
.hero .cover { flex:0 0 auto; width:150px; aspect-ratio:2/3; object-fit:cover; border-radius:6px; box-shadow:0 12px 32px rgba(0,0,0,.45); }
.hero .stats { display:flex; gap:20px; margin-top:16px; font-size:13px; color:rgba(255,255,255,.7); } .hero .stats b { display:block; font-size:20px; color:#fff; font-weight:700; }
@media (max-width:640px) { .hero { padding:24px 20px; min-height:0; border-radius:10px; gap:16px; } .hero h2 { font-size:22px; } .hero p { font-size:14px; } .hero .cover { width:96px; } .hero .stats { gap:14px; } }

/* 섹션 머리 — 토큰 #섹션: 18/700 + 오른쪽 「더보기 ›」 13px 회색 */
.layer, .sec-h { display:flex; align-items:baseline; gap:10px; font-size:18px; font-weight:700; margin:28px 0 10px; padding:0; border:0; letter-spacing:-.01em; }
.layer small, .sec-h small { font-weight:400; font-size:13px; color:var(--mute); margin-left:0; }
.layer small a, .sec-h small a { color:var(--mute); }
.layer .more, .sec-h .more { margin-left:auto; font-size:13px; font-weight:400; color:var(--mute); } .layer .more::after, .sec-h .more::after { content:" ›"; }
.sub { display:flex; align-items:baseline; gap:8px; font-size:16px; font-weight:700; margin:14px 0 8px; } .sub small { color:var(--mute); font-weight:400; font-size:13px; margin-left:0; }
.sub { white-space:nowrap; } .sub small { white-space:normal; }
@media (max-width:640px) { .sub small { display:none; } }
.sub .more { margin-left:auto; font-size:13px; font-weight:400; color:var(--mute); } .sub .more::after { content:" ›"; }
.tagline { color:var(--mute); margin:16px 0 8px; }
.about { color:var(--fg2); margin:0 0 8px; font-size:14px; }
.meta { color:var(--mute); font-size:13px; }
.empty { color:var(--mute); padding:14px 16px; background:var(--soft); border-radius:8px; font-size:14px; }

/* 커뮤니티 방 카드 — 토큰 #방카드: 흰 판 + 1px 선 + 8px 모서리, 방 이름 16/700 검정 */
.rooms { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
@media (max-width:900px) { .rooms { grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width:560px) { .rooms { grid-template-columns:minmax(0, 1fr); } }
.room { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px 10px; min-height:180px; }
.room h2 { font-size:16px; margin:0 0 2px; display:flex; align-items:center; gap:8px; } .room h2 a { color:var(--fg); }
.room h2 .ico { width:26px; height:26px; border-radius:7px; background:var(--soft); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--fg2); }
.room .about { font-size:13px; color:var(--mute); margin:0 0 8px; }
.room .empty { padding:10px 12px; font-size:13px; }

/* 목록 한 줄 — 기준/글목록.md: 행 32px, 제목 15 #121212, 보조 13 #757575 */
.list { list-style:none; margin:0; padding:0; }
.list li { border-top:1px solid var(--line); } .list li:first-child { border-top:0; }
.list li a { display:flex; gap:12px; align-items:baseline; min-height:32px; padding:7px 0; color:var(--fg); font-size:15px; line-height:1.4; text-decoration:none; }
.list li a:hover .t { text-decoration:underline; }
.list .t { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.list .n { color:var(--link); font-weight:600; font-size:13px; }
.list .meta { flex:0 0 auto; display:flex; gap:10px; color:var(--mute); font-size:13px; white-space:nowrap; }
.list .who { max-width:8em; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:480px) { .list li a { flex-direction:column; gap:2px; } .list .meta { white-space:normal; } .list .v { display:none; } }
.list.compact li a { min-height:28px; padding:4px 0; font-size:14px; gap:8px; }
.list.compact .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:480px) { .list.compact li a { flex-direction:row; } .list.compact .meta { display:none; } }
.list li.pin a { background:var(--soft); }
.k { font-style:normal; color:var(--fg2); background:var(--soft); font-size:12px; padding:1px 7px; border-radius:999px; margin-right:6px; white-space:nowrap; }
.list .s { color:var(--mute); font-size:13px; }
.list .ep { display:inline-block; min-width:3.5em; color:var(--fg); font-weight:600; margin-right:6px; }

/* 뜨는 글 — 순위 번호 주황(토큰 #순위) */
.hot { margin:8px 0 16px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px 8px; }
.hot h2 { font-size:16px; margin:0 0 6px; }
.hot ol { list-style:none; margin:0; padding:0; columns:2; column-gap:28px; }
.hot ol li { break-inside:avoid; border-top:1px solid var(--line); }
.hot ol li:first-child { border-top:0; }
.hot ol li a { display:flex; gap:10px; align-items:baseline; padding:6px 0; color:var(--fg); font-size:14px; }
.hot ol li a:hover .t { text-decoration:underline; }
.hot ol .no { flex:0 0 1.4em; color:var(--point); font-weight:700; font-size:15px; }
.hot ol .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hot ol .meta { flex:0 0 auto; }
@media (max-width:640px) { .hot ol { columns:1; } .hot ol .meta { display:none; } }

/* 단추·칩 — 토큰 #단추: 알약, 강조 하나만 파랑 채움 */
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.btn { display:inline-block; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--fg); font:inherit; font-size:14px; font-weight:500; cursor:pointer; line-height:1.4; }
.btn:hover { background:var(--soft); text-decoration:none; }
.btn.small { padding:5px 12px; font-size:13px; }
.btn.off { color:var(--mute); cursor:default; }
.btn.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.form .actions button.btn { background:var(--link); color:#fff; border-color:var(--link); font-weight:600; padding:10px 22px; }
.form .actions button.btn:hover { filter:brightness(.93); }
.inline { display:inline-flex; gap:6px; align-items:center; } .inline input { width:9em; }
.form label { display:block; margin:14px 0 4px; font-weight:600; font-size:14px; }
.form input, .form textarea, .form select { display:block; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font:inherit; margin-top:4px; }
.form input:focus, .form textarea:focus, .form select:focus { outline:2px solid var(--link); outline-offset:-1px; border-color:var(--link); }
.form select { width:auto; }
.form small { display:block; font-weight:400; color:var(--mute); font-size:13px; margin-top:3px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:480px) { .two { grid-template-columns:1fr; } }
fieldset.work { border:1px solid var(--line); border-radius:10px; padding:4px 14px 14px; margin:12px 0; background:var(--card); } fieldset.work legend { font-weight:600; padding:0 6px; } fieldset.work label { margin-top:8px; }
input, textarea, button { font-size:16px; }
.crumb { margin:16px 0 0; font-size:13px; color:var(--mute); } .crumb a { color:var(--mute); }

/* 탭 */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:6px 0 0; font-size:15px; }
.tabs a { padding:8px 10px; color:var(--mute); border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500; }
.tabs a:hover { color:var(--fg); text-decoration:none; }
.tabs a[aria-current] { color:var(--fg); border-color:var(--fg); font-weight:700; }
.tabs .kinds { margin-left:auto; display:flex; gap:4px; font-size:13px; align-items:center; }
.tabs .kinds a { padding:4px 10px; border-radius:999px; border-bottom:0; margin:0; background:var(--soft); color:var(--fg2); }
.tabs .kinds a[aria-current] { background:var(--fg); color:var(--bg); font-weight:600; }
@media (max-width:480px) { .tabs { flex-wrap:wrap; } .tabs .kinds { margin-left:0; width:100%; overflow-x:auto; white-space:nowrap; scrollbar-width:none; padding:6px 0; } }
.search { display:flex; gap:6px; margin-left:auto; }
.search input { width:12em; padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--fg); font:inherit; font-size:14px; }
@media (max-width:480px) { .search { margin-left:0; width:100%; } .search input { flex:1; } }
.search.big { margin:12px 0 18px; } .search.big input { flex:1; width:auto; max-width:480px; }

/* 글 본문 */
.post .body { margin:16px 0; overflow-wrap:anywhere; font-size:16px; line-height:1.7; color:var(--fg); }
.post figure { margin:12px 0; } .post img { max-width:100%; height:auto; display:block; border-radius:6px; }
.post .file a { font-weight:600; }
.post .ai { color:var(--mute); font-size:13px; border-top:1px solid var(--line); padding-top:8px; }
.post .meta a, .comments .meta a { color:var(--mute); text-decoration:underline; }
.post .answer { font-size:16px; font-weight:600; border-left:3px solid var(--link); padding:10px 14px; margin:8px 0 12px; background:var(--soft); border-radius:0 8px 8px 0; }
.post figure.flow { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; } .post figure.flow img { border-radius:0; }
.post figure.flow figcaption { font-size:13px; color:var(--mute); text-align:center; padding:4px 0; } @media (min-width:768px) { .post figure.flow figcaption { display:none; } }
.video { position:relative; padding-top:56.25%; margin:12px 0; border-radius:8px; overflow:hidden; } .video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; } .badges .k { margin:0; padding:3px 10px; font-size:12px; }
.dl, .usage, .sources { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:12px 0; }
.dl h2, .usage h2, .sources h2 { font-size:15px; margin:0 0 6px; }
.dl .file { margin:6px 0; } .dl .file small { display:block; color:var(--mute); margin-top:4px; }
.sources { font-size:14px; } .sources ul { margin:0; padding-left:20px; } .sources a { overflow-wrap:anywhere; }
.comments { margin-top:28px; border-top:1px solid var(--line); padding-top:12px; }
.comments .c { padding:10px 0; border-bottom:1px solid var(--line); } .comments .c .inline { margin-top:6px; }
.comments .c.re { margin-left:20px; padding-left:12px; border-left:3px solid var(--line); background:var(--soft); }
.pager { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:20px 0; font-size:14px; }
.pager a, .pager b { padding:5px 10px; border-radius:999px; } .pager b { background:var(--fg); color:var(--bg); } .pager a:hover { background:var(--soft); text-decoration:none; }
.doc h2 { margin-top:24px; } .doc table { border-collapse:collapse; width:100%; font-size:14px; } .doc th, .doc td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; } .doc th { background:var(--soft); } .doc ul { padding-left:20px; }

/* 파일 카드(그림체) — 기준/파일카드.md */
.cards { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.cards li a { display:block; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; color:var(--fg); }
.cards li a:hover { text-decoration:none; border-color:#c9c9c9; }
.cards img, .cards .noimg { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--soft); }
.cards .t { display:block; padding:8px 10px 2px; font-size:15px; font-weight:500; overflow-wrap:anywhere; }
.cards .meta { display:flex; gap:10px; padding:0 10px 10px; font-size:13px; }
@media (max-width:480px) { .cards { grid-template-columns:1fr; } }

/* 작품 카드·랭킹 — 토큰 #표지: 2:3, 모서리 4, 간격 12, 순위 번호 주황 굵게 (기준/작품목록.md, D17) */
.cards.works { grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; }
.cards.works li a { position:relative; border:0; border-radius:0; background:transparent; }
.cards.works img, .cards.works .noimg { aspect-ratio:2/3; border-radius:4px; background:var(--soft2); }
.cards.works .noimg { display:flex; align-items:center; justify-content:center; color:var(--mute); font-size:12px; }
.cards.works li a:hover img { filter:brightness(.92); }
.cards.works .cov { position:relative; display:block; }
.cards.works .rank { position:absolute; left:8px; bottom:4px; color:#fff; font-size:24px; font-weight:800; font-style:italic; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.75), 0 0 10px rgba(0,0,0,.45); }
.cards.works .up { position:absolute; right:6px; top:6px; }
.cards.works .t { font-size:14px; font-weight:500; padding:8px 2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--fg); }
.cards.works .meta { padding:2px 2px 8px; gap:6px; flex-wrap:wrap; font-size:12px; }
.up { font-style:normal; font-size:11px; font-weight:700; color:#fff; background:#e5322d; padding:1px 5px; border-radius:3px; vertical-align:middle; }
@media (max-width:900px) { .cards.works { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:640px) { .cards.works { display:flex; overflow-x:auto; gap:10px; scrollbar-width:none; margin-left:-16px; margin-right:-16px; padding:0 16px; } .cards.works li { flex:0 0 106px; } .cards.works .meta { white-space:nowrap; overflow:hidden; flex-wrap:nowrap; } .cards.works::-webkit-scrollbar { display:none; } }

/* 작품 페이지·뷰어 — 기준/웹툰뷰어.md */
.series { display:flex; gap:20px; align-items:flex-start; margin:16px 0; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; }
.series .cover, .series .cover.noimg { display:block; width:140px; aspect-ratio:2/3; object-fit:cover; border-radius:6px; background:var(--soft2); flex:0 0 auto; }
.series h1 { margin:0 0 4px; }
.series .actions { flex-wrap:nowrap; }
@media (max-width:480px) { .series { padding:14px; gap:14px; } .series .cover, .series .cover.noimg { width:96px; } .series .actions { flex-wrap:wrap; } }
.about-work { font-size:14px; color:var(--fg2); margin-top:8px; }
.vbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); margin-top:8px; font-size:14px; }
.vbar.bottom { border-bottom:0; border-top:1px solid var(--line); justify-content:center; margin:16px 0 0; }
.vbar .stitle { font-weight:600; color:var(--fg); } .vbar .vnav { margin-left:auto; display:flex; gap:8px; } .vbar.bottom .vnav { margin-left:0; }
.post.toon figure { margin:0 auto; max-width:690px; } .post.toon figure + figure { margin-top:0; } .post.toon img { width:100%; border-radius:0; }
@media (max-width:480px) { .post.toon figure { max-width:none; margin-left:-16px; margin-right:-16px; } }
.post.novel .body { max-width:900px; margin:0 auto; font-size:18px; line-height:2; } .post.novel .body p { margin:0 0 1em; }   /* D18-3 노벨피아 뷰어 실측: 폭 900 · 18px · 줄 36 */
.post.novel h1, .post.novel .meta, .post.novel .badges { max-width:900px; margin-left:auto; margin-right:auto; }
.vcover { margin:20px auto 30px; max-width:400px; } .vcover img { display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:0; }
details.pref { margin:8px 0; font-size:14px; } details.pref summary { cursor:pointer; color:var(--mute); } details.pref form { flex-wrap:wrap; gap:10px; margin-top:6px; } details.pref label { display:inline-flex; gap:6px; align-items:center; } details.pref select { padding:4px 6px; font:inherit; }
body.fs-15 .post.novel .body { font-size:15px; } body.fs-17 .post.novel .body { font-size:17px; } body.fs-18 .post.novel .body { font-size:18px; } body.fs-19 .post.novel .body { font-size:19px; } body.fs-20 .post.novel .body { font-size:20px; } body.fs-22 .post.novel .body { font-size:22px; } body.fs-26 .post.novel .body { font-size:26px; }
body.lh-14 .post.novel .body { line-height:1.6; } body.lh-16 .post.novel .body { line-height:2; } body.lh-18 .post.novel .body { line-height:2.3; }

/* 글쓴이 페이지 */
.who-page { display:flex; gap:14px; align-items:center; margin:16px 0 4px; } .who-page h1 { margin:0 0 2px; }
.who-page .mark { flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:var(--fg); color:var(--bg); font-size:22px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ===== D18 첫 화면 = 노벨피아 구조 실측 (docs/조사/노벨피아/첫화면구조.md). 숫자는 전부 잰 값 ===== */
.np { max-width:1200px; margin:0 auto; padding:0 16px; }
.np-banner { margin:0 0 50px; overflow:hidden; }
.np-banner .track { display:flex; gap:12px; width:max-content; margin:0 0 0 calc(50% - 756px); }
.np-banner a { position:relative; display:block; width:500px; max-width:calc(100vw - 32px); aspect-ratio:500/340; border-radius:20px; overflow:hidden; background:var(--soft2); }
.np-banner img { display:block; width:100%; height:100%; object-fit:cover; }
.np-banner .pg { position:absolute; right:15px; bottom:15px; font-size:12px; color:#f8f8f8; background:rgba(0,0,0,.4); border-radius:10px; padding:4px 10px; }
@media (max-width:1100px) { .np-banner { overflow-x:auto; scrollbar-width:none; } .np-banner .track { margin:0; padding:0 16px; } .np-banner::-webkit-scrollbar { display:none; } }
.blk { margin:0 0 70px; }
.bh { margin-bottom:20px; }
.bh .tl { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:5px; }
.bh .bt { font-size:32px; font-weight:600; line-height:48px; margin:0; letter-spacing:-.01em; }
.bh .sl, .tabs2 { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:18px; line-height:27px; color:var(--fg2); }
.bh .bs { margin:0; }
.more { font-size:15px; color:var(--link); margin-left:auto; }
.tabs2 { margin:-8px 0 20px; } .tabs2 a { color:var(--fg2); margin-right:24px; } .tabs2 a.more { margin-right:0; }
.rank-switch { display:flex; background:var(--soft2); border-radius:50px; padding:4px; } .rank-switch a { width:72px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50px; color:var(--fg); font-size:14px; } .rank-switch a.on { background:var(--fg); color:var(--bg); font-weight:600; }
.hf { display:flex; align-items:center; gap:16px; margin:20px 0 40px; }
.hf .tags { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; flex:1; } .hf .tags::-webkit-scrollbar { display:none; }
.hf .tags a { flex:0 0 auto; height:46px; padding:0 15px; display:flex; align-items:center; border:1px solid var(--line); border-radius:3px; font-size:14px; font-weight:600; color:var(--fg); }
.hf .tags a.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.hf .sel { font-size:16px; font-weight:600; color:var(--link); white-space:nowrap; }
.hot7, .row7 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7, 146px); gap:30px; justify-content:space-between; }
.hot7 li, .row7 li { width:146px; } .hot7 a, .row7 a { color:var(--fg); display:block; } .hot7 a:hover, .row7 a:hover { text-decoration:none; }
.hot7 .cov, .row7 .cov { position:relative; display:block; width:146px; height:219px; margin-bottom:18px; }
.row7 .cov { margin-bottom:15px; }
.hot7 img, .row7 img, .hot7 .noimg, .row7 .noimg { display:block; width:100%; height:100%; object-fit:cover; border-radius:5px; background:var(--soft2); }
.hot7 .num { position:absolute; left:-6px; top:153px; font-size:80px; font-weight:800; line-height:80px; color:var(--fg); font-style:normal; text-shadow:-2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg); }
.hot7 .tit, .row7 .tit { font-size:16px; font-weight:600; line-height:24px; margin:0 0 6px; max-height:48px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.row7 .tit { margin-bottom:5px; }
.hot7 .who, .row7 .who { font-size:14px; color:var(--mute); margin:0; line-height:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hot7 .slot .tit, .row7 .slot .tit { color:var(--mute); font-weight:400; } .hot7 .slot .who, .row7 .slot .who { font-size:12px; }
.hot7 .slot .noimg, .row7 .slot .noimg { border:1px dashed var(--line); background:var(--soft); }
.row7 .up { position:absolute; left:6px; top:6px; }
.picks { display:flex; gap:20px; overflow-x:auto; scrollbar-width:none; } .picks::-webkit-scrollbar { display:none; }
.pick { flex:0 0 590px; width:590px; max-width:calc(100vw - 32px); height:312px; border-radius:20px; background:#d9d9d9; padding:36px 34px; display:flex; gap:30px; color:#000; }
.pick:hover { text-decoration:none; filter:brightness(.97); }
.pick .pc { flex:0 0 160px; width:160px; height:240px; } .pick .pc img, .pick .pc .noimg { display:block; width:100%; height:100%; object-fit:cover; border-radius:10px; background:#c4c4c4; }
.pick .pi { flex:1; min-width:0; display:flex; flex-direction:column; }
.pick .badge { align-self:flex-start; font-size:13px; font-weight:900; line-height:19.5px; border:1px solid #000; border-radius:12px; padding:2px 12px; margin-bottom:14px; }
.pick .tit { font-size:22px; font-weight:700; line-height:33px; margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick .who { font-size:16px; color:rgba(0,0,0,.6); margin:0 0 14px; line-height:24px; }
.pick .note { font-size:16px; line-height:26px; color:#222; margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pick .tags { margin:auto 0 0; display:flex; gap:6px; } .pick .tags span { font-size:13px; line-height:19.5px; background:#fff; color:#333; border-radius:12px; padding:3px 10px; }
.skills { display:flex; gap:25px; overflow-x:auto; scrollbar-width:none; } .skills::-webkit-scrollbar { display:none; }
.sc { position:relative; flex:0 0 220px; width:220px; height:280px; border-radius:20px; overflow:hidden; background:#1a1a20; color:#fff; display:block; }
.sc:hover { text-decoration:none; } .sc img { position:absolute; left:0; top:0; width:220px; height:220px; object-fit:contain; object-position:center 30%; background:#fff; }
.sc .dim { position:absolute; inset:0; background:linear-gradient(rgba(10,10,15,0) 40%, #1a1a20 78%); }
.sc .badge { position:absolute; left:16px; top:16px; font-size:10px; font-weight:900; color:#4bf8e0; border:1px solid rgba(75,248,224,.6); border-radius:3px; padding:1px 4px; }
.sc .ci { position:absolute; left:20px; right:20px; bottom:20px; display:flex; flex-direction:column; gap:4px; }
.sc strong { font-size:16px; font-weight:700; line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc .ci span { font-size:14px; line-height:20px; color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.themes { overflow-x:auto; scrollbar-width:none; } .themes::-webkit-scrollbar { display:none; } .themes .track { display:flex; gap:20px; width:max-content; }
.tb { width:590px; max-width:calc(100vw - 32px); border-radius:20px; padding:0 0 30px; color:#fff; background:#615352; }
.tb.c1 { background:#4c504b; } .tb.c2 { background:#3a352c; } .tb.c3 { background:#2f3a4a; } .tb.c4 { background:#4a2f3a; }
.tban { position:relative; display:block; height:320px; margin-bottom:20px; border-radius:20px 20px 0 0; overflow:hidden; color:#fff; background:linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.25)); }
.tban:hover { text-decoration:none; }
.tban .pill { position:absolute; left:20px; top:20px; font-size:12px; font-weight:700; line-height:26px; height:26px; padding:0 12px; border-radius:15px; background:#fff; color:#333; }
.tban .big { position:absolute; left:47px; top:120px; font-size:48px; font-weight:700; line-height:1.2; color:#fff; letter-spacing:-.02em; }
.tban .tsub { position:absolute; left:47px; right:47px; bottom:20px; margin:0; font-size:14px; font-weight:700; line-height:1.5; color:rgba(255,255,255,.9); }
.tc { display:grid; grid-template-columns:repeat(3, 140px); justify-content:space-between; padding:0 47px; }
.tc a { color:#fff; display:block; width:140px; } .tc a:hover { text-decoration:none; }
.tc .cov { display:block; width:140px; height:210px; margin-bottom:8px; border-radius:5px; overflow:hidden; background:rgba(0,0,0,.25); }
.tc .cov img { display:block; width:100%; height:100%; object-fit:cover; }
.tc .cov .txt { display:flex; align-items:flex-end; width:100%; height:100%; padding:12px; font-size:14px; font-weight:600; line-height:1.4; color:#fff; overflow:hidden; }
.tc .tit { font-size:15px; font-weight:600; line-height:22.5px; margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tc .who, .tc .tag { font-size:13px; line-height:19.5px; color:rgba(255,255,255,.7); margin:0 0 5px; }
.tc .empty { grid-column:1 / -1; color:rgba(255,255,255,.7); background:rgba(0,0,0,.2); }
.rv-wrap { background:var(--soft); box-shadow:0 0 0 100vmax var(--soft); clip-path:inset(0 -100vmax); padding:40px 0; }
.rvs { display:flex; gap:15px; overflow-x:auto; scrollbar-width:none; } .rvs::-webkit-scrollbar { display:none; }
.rv { flex:0 0 382px; width:382px; max-width:calc(100vw - 32px); height:363px; background:var(--card); border-radius:20px; padding:26px; color:var(--fg); display:flex; flex-direction:column; }
.rv:hover { text-decoration:none; }
.rv .ru { display:flex; align-items:center; gap:8px; margin-bottom:14px; } .rv .av { width:50px; height:50px; border-radius:50%; background:var(--fg); color:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; }
.rv .ru b { font-size:16px; } .rv .ru time { font-size:13px; color:var(--mute); margin-left:auto; }
.rv .rq { font-size:18px; font-weight:700; line-height:28px; color:var(--fg2); margin:0; padding:4px 0 16px; height:112px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rv .rn { display:flex; gap:12px; border-top:1px solid var(--line); padding-top:14px; margin-top:auto; }
.rv .rn .cov { flex:0 0 80px; width:80px; height:120px; } .rv .rn img, .rv .rn .noimg { display:block; width:100%; height:100%; object-fit:cover; border-radius:5px; background:var(--soft2); }
.rv .rm { min-width:0; padding-top:13px; } .rv .rm .tit { font-size:16px; font-weight:700; line-height:24px; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rv .rm .who { font-size:13px; color:var(--mute); margin:0 0 4px; } .rv .rm .gen { font-size:12px; color:var(--link); margin:0; }
.evs { display:grid; grid-template-columns:repeat(3, 373px); justify-content:space-between; gap:20px; } .evs a { display:block; aspect-ratio:373/206; border-radius:20px; overflow:hidden; } .evs img { display:block; width:100%; height:100%; object-fit:cover; }
footer { margin:0; padding:0; border:0; }
footer .ft { background:#222; color:#999; } footer .in { max-width:1232px; margin:0 auto; padding:50px 16px 57px; }
footer .links { display:flex; flex-wrap:wrap; gap:24px; margin:0 0 27px; font-size:14px; font-weight:600; } footer .links a { color:#999; } footer .links a:first-child { color:#fff; }
footer .info, footer .copy { margin:0 0 10px; font-size:14px; color:#666; line-height:21px; }
footer .fb { background:#000; color:#999; font-size:14px; } footer .fb .in { padding:30px 16px; }
@media (max-width:1232px) { .hot7, .row7 { display:flex; overflow-x:auto; scrollbar-width:none; gap:20px; justify-content:flex-start; } .hot7::-webkit-scrollbar, .row7::-webkit-scrollbar { display:none; } .hot7 li, .row7 li { flex:0 0 146px; } .evs { display:flex; overflow-x:auto; scrollbar-width:none; } .evs a { flex:0 0 373px; max-width:calc(100vw - 32px); } }
@media (max-width:640px) {
  .np-banner { margin-bottom:30px; } .blk { margin-bottom:44px; }
  .bh .bt { font-size:22px; line-height:32px; } .bh .sl, .tabs2 { font-size:14px; line-height:21px; } .rank-switch a { width:60px; height:32px; }
  .hf { margin:14px 0 24px; } .hf .tags a { height:36px; padding:0 12px; font-size:13px; }
  .hot7 li, .row7 li { flex:0 0 110px; width:110px; } .hot7 .cov, .row7 .cov { width:110px; height:165px; } .hot7 .num { top:110px; font-size:56px; line-height:56px; } .hot7 .tit, .row7 .tit { font-size:14px; line-height:20px; max-height:40px; }
  .pick { height:auto; padding:20px; gap:14px; } .pick .pc { flex-basis:100px; width:100px; height:150px; } .pick .tit { font-size:17px; line-height:26px; } .pick .note { font-size:14px; line-height:22px; }
  .tc { grid-template-columns:repeat(3, 1fr); gap:10px; padding:0 16px; } .tc a, .tc .cov { width:auto; } .tc .cov { height:auto; aspect-ratio:2/3; } .tban { height:200px; } .tban .big { top:64px; left:20px; font-size:32px; } .tban .tsub { display:none; } .tban .big { position:absolute; left:47px; top:120px; font-size:48px; font-weight:700; line-height:1.2; color:#fff; letter-spacing:-.02em; }
.tban .tsub { left:20px; right:20px; }
  .rv { padding:18px; height:auto; } .rv .rq { font-size:16px; line-height:24px; height:auto; }
  .top .row.r1 { height:56px; } .top .q { height:36px; width:auto; flex:1 1 0; min-width:0; } .top .tools { flex:0 0 auto; margin-left:0; } .top .rooms-nav { height:44px; font-size:15px; } .top .rooms-nav a { margin-right:18px; }
}

/* ===== D18-1 작품 페이지 = 노벨피아 novel 페이지 실측: 표지 230×345 r10 · 정보 920 · 회색 상자 #f6f6f6 r5 안쪽 20/30 · 단추 240×60 r3 · 회차 줄 90 · 옆 340 ===== */
.wk { display:flex; gap:70px; align-items:flex-start; margin:44px 0 30px; }
.wcov { flex:0 0 230px; width:230px; } .wcov img, .wcov .noimg { display:block; width:230px; height:345px; object-fit:cover; border-radius:10px; background:var(--soft2); }
.winfo { flex:1; min-width:0; position:relative; padding-top:10px; font-size:16px; color:var(--fg2); }
.winfo .icons { position:absolute; right:0; top:7px; display:flex; gap:12px; }
.winfo .ic { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:12px; color:var(--fg); width:44px; margin:0; }
.winfo .ic .wrap { width:44px; height:44px; border-radius:50%; border:1px solid var(--fg); background:var(--card); color:var(--fg); display:flex; align-items:center; justify-content:center; font-size:18px; font:inherit; cursor:pointer; }
.winfo .ic .wrap.on { background:var(--fg); color:var(--bg); }
.winfo .ic:hover { text-decoration:none; }
.winfo .wt { font-size:30px; font-weight:600; line-height:45px; margin:0 170px 0 0; color:var(--fg2); letter-spacing:-.01em; }
.winfo .il { display:flex; align-items:center; gap:10px; margin:0 0 7px; line-height:24px; flex-wrap:wrap; }
.winfo .ct { font-weight:600; color:var(--fg); } .winfo .wn { font-weight:600; color:var(--link); margin-right:10px; }
.bd { display:inline-block; font-size:12px; font-weight:600; line-height:22px; padding:0 6px; border-radius:3px; color:#fff; background:#0d60d1; } .bd.free { background:#166d95; }
.winfo .tags a { color:var(--fg2); margin-right:4px; font-size:14px; }
.winfo .gray { background:var(--soft); border:1px solid var(--line); border-radius:5px; padding:20px 30px; margin:30px 0; }
.winfo .cnt { display:flex; gap:10px; margin:0 0 10px; align-items:center; } .winfo .cnt span:nth-child(2n) { margin-right:10px; }
.winfo .syn { font-size:16px; line-height:1.75; color:var(--fg2); max-height:252px; overflow:auto; } .winfo .syn p { margin:0 0 1em; } .winfo .empty-syn { color:var(--mute); }
.winfo .cta { display:flex; gap:12px; align-items:center; }
.winfo .go { display:inline-flex; align-items:center; justify-content:center; width:240px; height:60px; border-radius:3px; background:var(--link); color:#fff; font-size:16px; font-weight:600; }
.winfo .go:hover { text-decoration:none; filter:brightness(.95); } .winfo .go.off { background:var(--soft2); color:var(--mute); }
.winfo .cta .btn { height:60px; padding:0 24px; border-radius:3px; font-size:16px; }
.wrv { margin:0 0 30px; } .sub { display:flex; align-items:center; justify-content:space-between; height:70px; font-size:24px; font-weight:600; color:var(--fg2); margin:0; }
.sub .srt, .sub .more { font-size:15px; font-weight:600; color:#666; }
.wrv .boxes { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.rb { display:flex; flex-direction:column; gap:4px; min-height:100px; background:var(--soft); border-radius:8px; padding:18px 24px; color:var(--fg); font-size:14px; } .rb:hover { text-decoration:none; }
.rb b { font-size:15px; } .rb span { color:var(--fg2); } .rb small { color:var(--mute); font-size:12px; } .rb.none { align-items:center; justify-content:center; color:var(--mute); }
.wcols { display:grid; grid-template-columns:800px 340px; justify-content:space-between; gap:20px; margin-bottom:40px; }
.eps { list-style:none; margin:0; padding:0; border-top:1px solid #efefef; }
.eps li { border-bottom:1px solid #efefef; } .eps li a { display:block; position:relative; height:90px; padding:5px 60px 5px 20px; color:var(--fg2); }
.eps li a:hover { background:var(--soft); text-decoration:none; }
.eps .row1 { display:flex; align-items:center; gap:6px; font-size:16px; font-weight:700; line-height:24px; white-space:nowrap; overflow:hidden; } .eps .row1 b { overflow:hidden; text-overflow:ellipsis; } .eps .row1 .bd { font-size:11px; line-height:18px; padding:1px 4px; font-weight:400; }
.eps .row2 { display:flex; gap:10px; align-items:center; margin-top:6px; font-size:12px; font-weight:300; color:var(--fg); }
.eps .epn { font-size:11px; background:var(--soft2); border-radius:10px; padding:1px 6px; color:var(--fg2); }
.eps time { display:block; margin-top:4px; font-size:12px; font-weight:700; color:var(--fg2); }
.wr .sb { margin-bottom:24px; } .wr .st { height:70px; display:flex; align-items:center; font-size:24px; font-weight:600; color:var(--fg2); margin:0; }
.wr .sw { display:flex; gap:12px; padding:10px 0; border-top:1px solid #efefef; color:var(--fg); } .wr .sw:first-of-type { border-top:0; } .wr .sw:hover { text-decoration:none; }
.wr .sw .cov { flex:0 0 80px; width:80px; height:110px; } .wr .sw img, .wr .sw .noimg { display:block; width:100%; height:100%; object-fit:cover; border-radius:5px; background:var(--soft2); }
.wr .sw .si { min-width:0; display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--mute); } .wr .sw .si b { font-size:15px; color:var(--fg); line-height:1.4; }
.wr .who .av { display:flex; align-items:center; gap:12px; background:#fbfbfb; border:1px solid #efefef; border-radius:8px; padding:16px; color:var(--fg); } .wr .who .av:hover { text-decoration:none; }
body.pref-dark .wr .who .av { background:var(--soft); border-color:var(--line); }
.wr .who .mark { width:48px; height:48px; border-radius:50%; background:var(--fg); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; }
.wr .who .av b { font-size:16px; display:block; } .wr .who .av span:last-child { font-size:13px; color:var(--mute); }
@media (max-width:1232px) { .wcols { grid-template-columns:1fr 340px; } }
@media (max-width:900px) { .wcols { grid-template-columns:1fr; } .wk { gap:24px; } }
@media (max-width:640px) {
  .wk { flex-direction:column; align-items:center; margin-top:16px; } .wcov, .wcov img, .wcov .noimg { width:160px; } .wcov img, .wcov .noimg { height:240px; }
  .winfo { width:100%; padding-top:0; font-size:14px; } .winfo .icons { position:static; justify-content:center; margin-bottom:12px; } .winfo .wt { font-size:22px; line-height:32px; margin:0; text-align:center; }
  .winfo .il { justify-content:center; } .winfo .gray { padding:14px 16px; margin:16px 0; } .winfo .cta { flex-direction:column; } .winfo .go { width:100%; }
  .wrv .boxes { grid-template-columns:1fr; } .sub { height:52px; font-size:18px; }
  .eps li a { height:auto; padding:10px 12px; } .eps .row1 { white-space:normal; }
}

/* ===== D18-2 랭킹·작품 목록 = 노벨피아 top100 / freestory 실측: 큰 탭 64 · 카드 190×280 (오른쪽 위 모서리 30) · 줄 202 · 배너 1200×150 r15 ===== */
.btabs { display:flex; margin:20px 0; }
.btabs a { flex:1; height:64px; display:flex; align-items:center; justify-content:center; border:1px solid #d4d4d4; margin-left:-1px; font-size:16px; color:var(--fg); }
.btabs a:first-child { margin-left:0; } .btabs a.on { border-color:var(--fg); font-weight:600; position:relative; z-index:1; } .btabs a:hover { text-decoration:none; background:var(--soft); }
.rline { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; margin:0 0 10px; flex-wrap:wrap; }
.rline .rbasis { margin:0; font-size:14px; font-weight:600; color:var(--fg2); } .rline .rbasis span { font-weight:400; color:var(--mute); margin-left:6px; } .rline .rbasis.cnt { font-size:16px; }
.rline .rsel { display:flex; align-items:center; gap:14px; font-size:14px; } .rline .rsel a { color:var(--fg2); } .rline .rsel a.on { font-weight:700; color:var(--fg); } .rline .rsel a.on::before { content:"✓ "; }
.rline .reg { height:36px; padding:0 14px; border-radius:3px; background:var(--fg); color:var(--bg); display:inline-flex; align-items:center; font-weight:600; margin-left:6px; } .rline .reg:hover { text-decoration:none; opacity:.9; }
.rgrid { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(6, 200px); justify-content:space-between; row-gap:0; }
.rgrid li { width:200px; padding:20px 5px; } .rgrid a { display:block; color:var(--fg2); } .rgrid a:hover { text-decoration:none; }
.rgrid .cov { position:relative; display:block; width:190px; height:280px; border-radius:0 30px 0 0; overflow:hidden; background:var(--soft2); }
.rgrid .cov img, .rgrid .cov .noimg { display:block; width:100%; height:100%; object-fit:cover; }
.rgrid .no { position:absolute; left:0; top:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; font-size:14px; font-weight:500; font-style:normal; }
.rgrid .ep { position:absolute; right:8px; bottom:6px; font-size:10px; font-weight:500; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.rgrid .fv { position:absolute; left:8px; bottom:6px; font-size:10px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.rgrid .tit { display:block; margin-top:15px; padding-right:10px; font-size:14px; font-weight:700; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--fg2); }
.rgrid .who { display:block; font-size:12px; color:#666; line-height:22px; margin-top:2px; }
.rgrid .bds { display:flex; gap:4px; margin-top:3px; flex-wrap:wrap; }
.bd.up2 { background:#de2884; } .bd.done { background:#1ea535; } .bd.kind { background:var(--soft2); color:var(--fg2); }
.rgrid .bd { font-size:11px; font-weight:400; line-height:18px; padding:0 4px; font-style:normal; }
@media (max-width:1232px) { .rgrid { grid-template-columns:repeat(auto-fill, 200px); justify-content:center; } }
@media (max-width:640px) { .btabs a { height:48px; font-size:14px; } .rgrid { grid-template-columns:repeat(2, 1fr); gap:0 10px; } .rgrid li { width:auto; padding:12px 0; } .rgrid .cov { width:100%; height:auto; aspect-ratio:190/280; } .rline .rsel { gap:10px; font-size:13px; } }
.bban { position:relative; margin:20px 0; border-radius:15px; overflow:hidden; aspect-ratio:1200/150; background:var(--soft2); }
.bban img { display:block; width:100%; height:100%; object-fit:cover; } .bban .pg { position:absolute; left:24px; bottom:14px; color:#fff; font-size:14px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.wrows { list-style:none; margin:20px 0 0; padding:0; }
.wrow a { display:flex; gap:12px; align-items:flex-start; padding:20px 0; min-height:202px; border-top:1px solid #eee; color:var(--fg2); position:relative; } .wrow:first-child a { border-top:0; } .wrow a:hover { text-decoration:none; background:var(--soft); }
.wrow .cov { flex:0 0 100px; width:100px; height:150px; } .wrow .cov img, .wrow .cov .noimg { display:block; width:100%; height:100%; object-fit:cover; border-radius:5px; background:var(--soft2); }
.wrow .info { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding-right:110px; }
.wrow .l1 { display:flex; align-items:center; gap:8px; min-width:0; } .wrow .l1 b { font-size:16px; font-weight:700; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wrow .l1 .who { font-size:14px; color:var(--fg2); flex:0 0 auto; }
.wrow .syn { font-size:14px; color:#666; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wrow .st { display:flex; gap:14px; font-size:12px; color:var(--fg2); } .wrow .tg { display:flex; gap:6px; flex-wrap:wrap; } .wrow .tg em { font-style:normal; font-size:11px; color:var(--link); border:1px solid var(--link); border-radius:12px; padding:1px 8px; }
.wrow .upat { position:absolute; right:0; top:24px; font-size:12px; color:var(--fg2); border:1px solid var(--line); border-radius:3px; padding:4px 10px; background:var(--card); }
@media (max-width:640px) { .bban .pg { display:none; } .wrow a { padding:14px 0; min-height:0; } .wrow .info { padding-right:0; } .wrow .upat { position:static; align-self:flex-start; margin-left:auto; } .wrow .cov { flex-basis:80px; width:80px; height:120px; } }

/* D18-4 모바일 = 노벨피아 m. 홈 관찰(모바일홈_2026-09-20.png): 아래 고정 메뉴 5칸 · 인기작품 4장 보임 · 배너 양옆 살짝 보임 */
.mnav { display:none; }
@media (max-width:640px) {
  body { padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
  .mnav { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; height:64px; padding-bottom:env(safe-area-inset-bottom, 0px); background:var(--card); border-top:1px solid var(--line); border-radius:16px 16px 0 0; box-shadow:0 -4px 16px rgba(0,0,0,.06); }
  .mnav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--mute); } .mnav a i { font-style:normal; font-size:20px; line-height:1; } .mnav a[aria-current] { color:var(--fg); font-weight:700; }
  .mnav a:hover { text-decoration:none; }
  .np-banner .track { padding:0 28px; } .np-banner a { max-width:calc(100vw - 56px); }
  .hot7 li { flex:0 0 88px; width:88px; } .hot7 .cov { width:88px; height:132px; margin-bottom:10px; } .hot7 .num { top:84px; left:-4px; font-size:48px; line-height:48px; } .hot7 .tit { font-size:13px; line-height:18px; max-height:36px; } .hot7 .who { font-size:12px; }
}

/* D18-5 커뮤니티 방: 큰 탭 + 수 줄(검색 칸·쓰기 단추) + 말머리 칩. 목록·카드는 기존 기준 유지 */
.rline .search { margin:0; } .rline .search input { height:36px; padding:0 14px; border-radius:3px; width:14em; } .rline .search .btn.small { height:36px; border-radius:3px; }
.cards { margin-top:20px; } .list.wide { margin-top:10px; }
@media (max-width:640px) { .rline { flex-direction:column; align-items:stretch; } .rline .rsel { flex-wrap:wrap; } .rline .search { flex:1; } .rline .search input { width:auto; flex:1; } }

/* D18-6 찾기 = 노벨피아 search 실측(search-1366_2026-09-20.png): 큰 검색 상자(테두리, 알약 토글) · 상자 2(최근 검색/추천 해시태그) · 가는 줄 · 추천 작품 6 */
.sbox { display:flex; align-items:center; gap:14px; margin:30px 0; padding:14px 20px; border:1px solid var(--line); border-radius:6px; background:var(--card); }
.sbox .tg { display:flex; background:var(--soft2); border-radius:999px; padding:3px; font-size:13px; } .sbox .tg span { padding:6px 16px; border-radius:999px; color:var(--fg2); } .sbox .tg .on { background:var(--link); color:#fff; font-weight:600; }
.sbox input { flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:16px; color:var(--fg); outline:none; }
.sbox .go { border:0; background:transparent; color:var(--fg2); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.sboxes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sb2 { border:1px solid var(--line); border-radius:6px; padding:20px; min-height:112px; background:var(--card); } .sb2 .st { margin:0 0 12px; font-size:16px; font-weight:700; }
.sb2 .chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; } .sb2 .chips a { font-size:13px; padding:5px 12px; border-radius:999px; background:var(--soft); color:var(--fg2); } .sb2 .chips a:hover { background:var(--soft2); text-decoration:none; }
.srule { border:0; border-top:2px solid var(--fg); margin:24px 0; }
.sub2 { font-size:16px; font-weight:700; margin:0 0 16px; }
.row7.six { grid-template-columns:repeat(6, 146px); }
@media (max-width:640px) { .sbox { flex-wrap:wrap; padding:10px 12px; } .sbox .tg { order:2; } .sbox input { flex-basis:100%; order:1; } .sbox .go { order:3; margin-left:auto; } .sboxes { grid-template-columns:1fr; } }

/* D18-7 웹툰 작품 페이지: 노벨피아 comic 페이지처럼 표지를 흐린 띠 위에. 단추 검정 */
.wkwrap { position:relative; }
.wkwrap.toon { margin:20px 0 0; padding:24px 0 10px; background:var(--soft); box-shadow:0 0 0 100vmax var(--soft); clip-path:inset(0 -100vmax); }
.wkwrap.toon .bgblur { position:absolute; left:-10%; top:-30%; width:120%; height:160%; object-fit:cover; filter:blur(40px); opacity:.28; pointer-events:none; }
.wkwrap.toon .wk { position:relative; margin-top:20px; }
.wkwrap.toon .wcov img, .wkwrap.toon .wcov .noimg { width:190px; height:280px; } .wkwrap.toon .wcov { flex-basis:190px; width:190px; }
.wkwrap.toon .winfo .go { background:var(--fg); color:var(--bg); } .wkwrap.toon .winfo .gray { background:rgba(255,255,255,.7); }
body.pref-dark .wkwrap.toon .winfo .gray { background:rgba(0,0,0,.35); }
@media (prefers-color-scheme: dark) { .wkwrap.toon .winfo .gray { background:rgba(0,0,0,.35); } }
@media (max-width:640px) { .wkwrap.toon { margin-top:0; } .wkwrap.toon .wcov, .wkwrap.toon .wcov img, .wkwrap.toon .wcov .noimg { width:160px; } .wkwrap.toon .wcov img, .wkwrap.toon .wcov .noimg { height:240px; } }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--link); outline-offset:2px; }

/* 표지 없는 작품 = 제목 글자 표지 (id 로 색 6종) */
.noimg.g0, .noimg.g1, .noimg.g2, .noimg.g3, .noimg.g4, .noimg.g5 { display:flex !important; align-items:flex-start; padding:14% 8% 8%; color:#fff; font-size:13px; font-weight:700; line-height:1.35; text-align:left; overflow:hidden; word-break:keep-all; }
.noimg.g0 { background:linear-gradient(160deg,#1f3c88,#5b8def); } .noimg.g1 { background:linear-gradient(160deg,#6a2c70,#c86b98); } .noimg.g2 { background:linear-gradient(160deg,#1b5e4b,#4fb08b); } .noimg.g3 { background:linear-gradient(160deg,#8a4b12,#e39a3b); } .noimg.g4 { background:linear-gradient(160deg,#3b2f6b,#8a7ad9); } .noimg.g5 { background:linear-gradient(160deg,#444,#8c8c8c); }
.noimg[class*=" g"] span { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.wr .sw .noimg[class*=" g"] { font-size:11px; padding:6px; } .wrow .noimg[class*=" g"] { font-size:12px; } .wcov .noimg[class*=" g"] { font-size:20px; padding:16px; }

.winfo .edit-link { font-size:13px; color:var(--mute); margin-left:6px; }