/* aimoyeo — 첫 골격. 값(글꼴·간격·색)은 docs/조사/기준/ 체크리스트가 생기면 그 근거로 바꾼다(D7). 지금은 읽히기만 하게. */
:root { --bg:#fff; --fg:#111; --mute:#666; --line:#ddd; --link:#0b57d0; --soft:#f6f6f6; }
@media (prefers-color-scheme: dark) { :root { --bg:#141414; --fg:#eaeaea; --mute:#9a9a9a; --line:#333; --link:#8ab4f8; --soft:#1e1e1e; } }
* { box-sizing:border-box; }
html { font: 16px/1.6 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; background:var(--bg); color:var(--fg); }
body { margin:0; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
main { max-width: 960px; margin: 0 auto; padding: 0 16px 48px; }
.top { display:flex; align-items:center; gap:16px; max-width:960px; margin:0 auto; padding:12px 16px; border-bottom:1px solid var(--line); }
.top .logo { font-weight:700; font-size:1.2rem; color:var(--fg); }
.top .rooms-nav { display:flex; gap:14px; margin-left:auto; font-size:.95rem; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
.top .rooms-nav a { color:var(--mute); padding:4px 0; } .top .rooms-nav a:last-child { padding-right:16px; }
.top .rooms-nav a[aria-current] { color:var(--fg); font-weight:600; border-bottom:2px solid var(--fg); }
@media (max-width:480px) { .top { flex-wrap:wrap; } .top .rooms-nav { margin-left:0; width:100%; gap:12px; } }
footer { max-width:960px; margin:0 auto; padding:16px; border-top:1px solid var(--line); color:var(--mute); font-size:.85rem; }
h1 { font-size:1.4rem; margin:20px 0 4px; } h2 { font-size:1.1rem; margin:0 0 4px; }
.tagline { color:var(--mute); margin:16px 0 8px; }
.about { color:var(--mute); margin:0 0 8px; font-size:.95rem; }
.rooms { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.room { border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
/* 목록 한 줄 — 기준/글목록.md: 행 전체 링크(#6), 32px·13~14px(#5), 제목 [n]·글쓴이·시각·조회(#1·#2), 400폭은 둘째 줄(#10) */
.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:6px 0; color:var(--fg); font-size:.9rem; 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:.85rem; }
.list .meta { flex:0 0 auto; display:flex; gap:10px; color:var(--mute); font-size:.8rem; white-space:nowrap; }
.list .who { max-width:8em; overflow:hidden; text-overflow:ellipsis; }
.meta { color:var(--mute); font-size:.85rem; }
@media (max-width:480px) {
  .list li a { flex-direction:column; gap:2px; }
  .list .meta { white-space:normal; }
  .list .v { display:none; }
}
.empty { color:var(--mute); padding:8px 0; }
.actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.btn { display:inline-block; padding:8px 14px; border:1px solid var(--fg); border-radius:4px; background:var(--bg); color:var(--fg); font:inherit; cursor:pointer; }
.btn:hover { background:var(--soft); text-decoration:none; }
.btn.small { padding:4px 10px; font-size:.9rem; }
.inline { display:inline-flex; gap:6px; align-items:center; }
.inline input { width:9em; }
.form label { display:block; margin:12px 0 4px; font-weight:600; }
.form input, .form textarea { display:block; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--fg); font:inherit; margin-top:4px; }
.form small { display:block; font-weight:400; color:var(--mute); font-size:.85rem; margin-top:2px; }
.two { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:480px) { .two { grid-template-columns:1fr; } }
.crumb { margin:16px 0 0; font-size:.9rem; }
.post .body { margin:16px 0; overflow-wrap:anywhere; }
.post figure { margin:12px 0; } .post img { max-width:100%; height:auto; display:block; }
.post .file a { font-weight:600; }
.post .ai { color:var(--mute); font-size:.85rem; border-top:1px solid var(--line); padding-top:8px; }
.video { position:relative; padding-top:56.25%; margin:12px 0; } .video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.comments { margin-top:24px; 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; }
.pager { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0; font-size:.95rem; } .pager b { color:var(--fg); }
input, textarea, button { font-size:16px; }
.doc h2 { margin-top:24px; }
.doc table { border-collapse:collapse; width:100%; font-size:.95rem; } .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; }
.k { font-style:normal; color:var(--mute); font-size:.85em; margin-right:6px; }
.list li.pin a { background:var(--soft); }
.tabs { display:flex; gap:14px; border-bottom:1px solid var(--line); margin:4px 0 0; font-size:.95rem; }
.tabs a { padding:6px 2px; color:var(--mute); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a[aria-current] { color:var(--fg); border-color:var(--fg); }
.form select { display:block; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--fg); font:inherit; margin-top:4px; }
/* 기준/파일카드.md — 그림체 카드형(#3), 배지 줄(#5), 받기 블록(#6·#7), 말머리 필터(#11) */
.cards { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.cards li a { display:block; border:1px solid var(--line); border-radius:6px; overflow:hidden; color:var(--fg); }
.cards li a:hover { text-decoration:none; background:var(--soft); }
.cards img, .cards .noimg { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--soft); }
.cards .t { display:block; padding:8px 10px 2px; font-size:.95rem; overflow-wrap:anywhere; }
.cards .meta { display:flex; gap:10px; padding:0 10px 8px; font-size:.8rem; }
@media (max-width:480px) { .cards { grid-template-columns:1fr; } }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.badges .k { margin:0; padding:2px 8px; border:1px solid var(--line); border-radius:12px; font-size:.8rem; }
.dl { border:1px solid var(--line); border-radius:6px; padding:10px 14px; margin:12px 0; }
.dl h2 { font-size:.95rem; margin:0 0 6px; }
.dl .file { margin:6px 0; } .dl .file small { display:block; color:var(--mute); margin-top:4px; }
.tabs .kinds { margin-left:auto; display:flex; gap:10px; font-size:.85rem; }
.tabs .kinds a[aria-current] { border-color:transparent; 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; } }
/* 기준/웹툰뷰어.md — 뷰어 이동바(#4·#5), 컷 규격(#6·#7), 소설 본문(#10), 작품 페이지(#1) */
.vbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); margin-top:8px; }
.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; }
.btn.off { color:var(--mute); border-color:var(--line); cursor:default; }
.post.toon figure { margin:0 auto; max-width:690px; }
.post.toon figure + figure { margin-top:0; }
.post.toon img { width:100%; }
@media (max-width:480px) { .post.toon figure { max-width:none; margin-left:-16px; margin-right:-16px; } }
.post.novel .body { max-width:680px; font-size:16px; line-height:1.6; }
.post.novel .body p { margin:0 0 1em; }
.series { display:flex; gap:16px; align-items:flex-start; margin:12px 0; }
.series .cover { width:120px; aspect-ratio:3/4; object-fit:cover; border-radius:6px; background:var(--soft); flex:0 0 auto; }
.series h1 { margin:0 0 4px; }
.list .s { color:var(--mute); font-size:.85em; }
.list .ep { display:inline-block; min-width:3.5em; color:var(--fg); font-weight:600; margin-right:6px; }
.comments .c.re { margin-left:20px; padding-left:12px; border-left:3px solid var(--line); background:var(--soft); }
.comments .c .meta a { color:var(--mute); }
.search { display:flex; gap:6px; margin-left:auto; }
.search input { width:12em; padding:6px 10px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--fg); font:inherit; }
@media (max-width:480px) { .search { margin-left:0; width:100%; } .search input { flex:1; } }