/*
 * [2026-11-05 두목님 지시] 애니울프 공통 부품 — 서랍(☰)과 라이브서치 칸.
 * 옛 모양 화면(Blade, resources/views/aniwolf/_drawer)과 커뮤니티·로그인 화면(Inertia, AwDrawer.vue)이 이 파일 하나를 같이 쓴다.
 * 다크: Blade 는 html[data-theme=dark], Inertia 는 html.dark — 둘 다 적는다.
 */
.aw-drawer, .aw-ls { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; line-height: 1.5; letter-spacing: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }   /* 커뮤니티 화면(Tailwind body: 글자간격 -0.01em·antialiased)이 번지지 않게 */
.aw-drawer *, .aw-ls * { box-sizing: border-box; }

/* 서랍 */
.aw-drawer-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(0, 0, 0, .45); }
.aw-drawer-backdrop[hidden] { display: none; }
.aw-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1070; width: min(320px, 86vw); overflow-y: auto;
    background: #fff; color: #222; transform: translateX(100%); transition: transform .22s ease; box-shadow: -6px 0 20px rgba(0, 0, 0, .2);
    font-size: 16px; text-align: left;
}
.aw-drawer.open { transform: translateX(0); }
.aw-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 16px; background: #dd3333; }
.aw-drawer-logo { font-size: 22px; font-weight: 700; text-decoration: none; }
.aw-drawer-logo .aw-w { color: #fff; }
.aw-drawer-logo .aw-b { color: #333; }
.aw-drawer-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: #fff; background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; }
.aw-drawer-x svg { width: 22px; height: 22px; }
.aw-drawer-user { padding: 14px 16px; border-bottom: 1px solid #eee; }
.aw-drawer-name { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.aw-drawer-btns { display: flex; gap: 8px; }
.aw-drawer-btns a {
    flex: 1; display: block; text-align: center; padding: 8px 0; font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none;
    color: #dd3333; background: transparent; border: 1px solid #dd3333; border-radius: .25rem;
}
.aw-drawer-btns a.aw-primary { color: #fff; background: #dd3333; }
.aw-drawer-badge { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; font-size: 11px; line-height: 18px; text-align: center; color: #fff; background: #dd3333; border-radius: 9px; }
.aw-drawer-nav { padding: 6px 16px 24px; }
.aw-drawer-title { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: #888; }
.aw-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aw-drawer-grid a {
    display: block; padding: 9px 10px; font-size: 14px; line-height: 1.5; color: #222; text-decoration: none;
    background: #f3f4f7; border-radius: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw-drawer-grid a:hover { color: #dd3333; }

/* 라이브서치 — 검색칸 아래 작품 목록(애니위크와 같은 /api/v1/series/suggest) */
.aw-ls {
    position: absolute; z-index: 1080; margin: 0; padding: 4px 0; list-style: none; max-height: 448px; overflow-y: auto;
    font-size: 14px; color: #222; background: #fff; border: 1px solid #ddd; border-radius: .25rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.aw-ls[hidden] { display: none; }
.aw-ls li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; }
.aw-ls li.on { color: #dd3333; background: #f3f4f7; }
.aw-ls img, .aw-ls .aw-ls-ph { flex: 0 0 27px; width: 27px; height: 36px; object-fit: cover; border-radius: 2px; background: #eee; }
.aw-ls .aw-ls-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aw-ls .aw-ls-c { flex: 0 0 auto; font-size: 12px; color: #888; }
.aw-ls .aw-ls-msg { padding: 8px 12px; font-size: 12px; color: #888; cursor: default; }

html[data-theme="dark"] .aw-drawer, html.dark .aw-drawer { background: #161823; color: #e4e6eb; }
html[data-theme="dark"] .aw-drawer-user, html.dark .aw-drawer-user { border-bottom-color: #2a2e3d; }
html[data-theme="dark"] .aw-drawer-grid a, html.dark .aw-drawer-grid a { background: #232736; color: #e4e6eb; }
html[data-theme="dark"] .aw-drawer-grid a:hover, html.dark .aw-drawer-grid a:hover { color: #ff6b6b; }
html[data-theme="dark"] .aw-ls, html.dark .aw-ls { color: #e4e6eb; background: #161823; border-color: #3a3f50; }
html[data-theme="dark"] .aw-ls li.on, html.dark .aw-ls li.on { color: #ff6b6b; background: #232736; }

/* ── [2026-11-05 두목님 지시] 작품·회차 화면 옆 칸 '인기 작품 | 실시간 댓글' 탭 (애니위크 SidebarTabs 와 같은 구성) ── */
.aw-side { margin: 0 0 12px; overflow: hidden; background: #fff; border: 1px solid #e3e5ea; border-radius: 4px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; }
.aw-side-tabs { display: flex; border-bottom: 1px solid #e3e5ea; }
.aw-side-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: #888; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.aw-side-tabs button.on { color: #dd3333; border-bottom-color: #dd3333; }
.aw-side-tabs button:hover { color: #222; }
.aw-side-tabs button.on:hover { color: #dd3333; }
.aw-side-list { margin: 0; padding: 0; list-style: none; }
.aw-side-list li + li { border-top: 1px solid #eef0f3; }
.aw-side-list a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #222; text-decoration: none; }
.aw-side-list a:hover { background: #f6f7f9; }
.aw-side-rank { flex: 0 0 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #888; background: #f0f1f4; border-radius: 3px; }
.aw-side-rank.top { color: #fff; background: #dd3333; font-weight: 700; }
.aw-side-thumb { flex: 0 0 36px; width: 36px; height: 48px; overflow: hidden; border-radius: 3px; background: #eee; }
.aw-side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-side-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aw-side-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 500; }
.aw-side-title small { font-size: 12px; font-weight: 400; color: #888; }
.aw-side-meta { margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #888; }
.aw-side-star { margin-right: 6px; }
.aw-side-star i { color: #f59e0b; }
.aw-side-star b { color: #222; font-weight: 600; }
.aw-side-tag { margin-right: 6px; color: #dd3333; }
.aw-side-time { margin-top: 2px; font-size: 11px; color: #aaa; }
.aw-side-empty { margin: 0; padding: 24px 12px; text-align: center; font-size: 12px; color: #888; }

/* ── 댓글 상자 (애니위크 CommentBox 와 같은 구성) ── */
.aw-cmt-wrap { padding: 0; }
.aw-cmt { margin: 12px 0; padding: 16px; background: #fff; border-radius: 4px; color: #222; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; }
.aw-cmt p { margin: 0; }
.aw-cmt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.aw-cmt-head h4 { margin: 0; font-size: 16px; font-weight: 700; }
.aw-cmt-count { color: #dd3333; }
.aw-cmt-sort { display: flex; gap: 4px; }
.aw-cmt-sort button { padding: 5px 12px; font-size: 12px; font-weight: 600; color: #888; background: #fff; border: 1px solid #e3e5ea; border-radius: 3px; cursor: pointer; }
.aw-cmt-sort button.on { color: #fff; background: #dd3333; border-color: #dd3333; }
.aw-cmt-list.loading { opacity: .6; }
.aw-cmt-msg { font-size: 14px; color: #888; }
.aw-cmt-empty { padding: 32px 0; text-align: center; background: #f6f7f9; border: 1px solid #e3e5ea; border-radius: 3px; }
.aw-cmt-ul, .aw-cmt-replies { margin: 0; padding: 0; list-style: none; }
.aw-cmt-item { padding: 16px; border: 1px solid #e3e5ea; border-radius: 3px; }
.aw-cmt-item + .aw-cmt-item { margin-top: 12px; }
.aw-cmt-row { display: flex; align-items: center; gap: 8px; }
.aw-cmt-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.aw-cmt-name.sm { font-size: 13px; }
.aw-cmt-date { flex: 0 0 auto; font-size: 12px; color: #888; }
.aw-cmt-del { flex: 0 0 auto; padding: 0 2px; font-size: 16px; color: #999; background: none; border: 0; cursor: pointer; }
.aw-cmt-del:hover { color: #dd3333; }
.aw-cmt-text { margin-top: 4px !important; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.aw-cmt-acts { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.aw-cmt-act { display: inline-flex; align-items: center; gap: 4px; padding: 0; font-size: 12px; color: #888; background: none; border: 0; cursor: pointer; }
.aw-cmt-act:hover { color: #222; }
.aw-cmt-act.on { color: #dd3333; font-weight: 600; }
.aw-cmt-replies { margin-top: 12px; padding-left: 14px; border-left: 2px solid #e3e5ea; }
.aw-cmt-reply { padding: 12px; background: #f6f7f9; border-radius: 3px; }
.aw-cmt-reply + .aw-cmt-reply { margin-top: 8px; }
.aw-cmt-more { padding: 4px 0; font-size: 12px; font-weight: 600; color: #888; background: none; border: 0; cursor: pointer; }
.aw-cmt-replyform { margin-top: 12px; padding-left: 12px; border-left: 2px solid #dd3333; }
.aw-cmt-replyform label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; }
.aw-cmt textarea { display: block; width: 100%; padding: 8px 12px; font-size: 14px; color: #222; background: #fff; border: 1px solid #e3e5ea; border-radius: 3px; resize: vertical; }
.aw-cmt textarea:focus { border-color: #dd3333; outline: none; box-shadow: 0 0 0 2px rgba(221, 51, 51, .25); }
.aw-cmt-replyfoot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.aw-cmt-replyfoot .aw-cmt-err { margin-right: auto !important; }
.aw-cmt-cancel { padding: 4px 8px; font-size: 12px; color: #888; background: none; border: 0; cursor: pointer; }
.aw-cmt-btn { display: inline-flex; align-items: center; padding: 8px 12px; font-size: 14px; font-weight: 700; color: #fff !important; text-decoration: none; background: #dd3333; border: 0; border-radius: 3px; cursor: pointer; }
.aw-cmt-btn.sm { padding: 4px 12px; font-size: 12px; }
.aw-cmt-btn:hover { background: #c42b2b; }
.aw-cmt-pages { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
.aw-cmt-pages button { min-width: 32px; padding: 4px 8px; font-size: 14px; color: #888; background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
.aw-cmt-pages button.on { color: #dd3333; font-weight: 700; border-color: #dd3333; }
.aw-cmt-pages button:disabled { opacity: .3; cursor: default; }
.aw-cmt-write { margin-top: 16px; }
.aw-cmt-write-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.aw-cmt-len { margin-left: 8px; font-size: 12px; color: #888; }
.aw-cmt-guest { padding: 24px 16px; text-align: center; background: #f6f7f9; border: 1px solid #e3e5ea; border-radius: 3px; }
.aw-cmt-guest p { font-size: 14px; color: #888; }
.aw-cmt-guest .aw-cmt-btn { margin-top: 12px; padding: 10px 20px; }
.aw-cmt-sub { margin-top: 12px !important; font-size: 12px !important; }
.aw-cmt-sub a { margin-left: 4px; font-weight: 600; color: #dd3333; }
.aw-cmt-err { margin-top: 8px !important; font-size: 13px; color: #dd3333; }

html[data-theme="dark"] .aw-side, html.dark .aw-side { background: #161823; border-color: #2a2e3d; }
html[data-theme="dark"] .aw-side-tabs, html.dark .aw-side-tabs { border-bottom-color: #2a2e3d; }
html[data-theme="dark"] .aw-side-tabs button:hover { color: #e4e6eb; }
html[data-theme="dark"] .aw-side-list a, html.dark .aw-side-list a { color: #e4e6eb; }
html[data-theme="dark"] .aw-side-list li + li { border-top-color: #232736; }
html[data-theme="dark"] .aw-side-list a:hover { background: #1d2030; }
html[data-theme="dark"] .aw-side-rank { color: #b8bcc6; background: #232736; }
html[data-theme="dark"] .aw-side-rank.top { color: #fff; background: #dd3333; }
html[data-theme="dark"] .aw-side-star b { color: #e4e6eb; }
html[data-theme="dark"] .aw-side-tag { color: #ff6b6b; }
html[data-theme="dark"] .aw-cmt { color: #e4e6eb; background: #161823; }
html[data-theme="dark"] .aw-cmt-item { border-color: #2a2e3d; }
html[data-theme="dark"] .aw-cmt-reply, html[data-theme="dark"] .aw-cmt-empty, html[data-theme="dark"] .aw-cmt-guest { background: #1d2030; border-color: #2a2e3d; }
html[data-theme="dark"] .aw-cmt-replies { border-left-color: #2a2e3d; }
html[data-theme="dark"] .aw-cmt textarea { color: #e4e6eb; background: #1d2030; border-color: #2a2e3d; }
html[data-theme="dark"] .aw-cmt-sort button { background: #1d2030; border-color: #2a2e3d; }
html[data-theme="dark"] .aw-cmt-sort button.on { color: #fff; background: #dd3333; border-color: #dd3333; }
html[data-theme="dark"] .aw-cmt-act:hover { color: #e4e6eb; }

/* ── [2026-11-05 점검 22·23·24·27] ── */
/* 22: 옆 칸이 본문 옆에 설 때(1200px 이상) 오른쪽 끝을 위 배너 줄 끝(1280px 에서 1233px)에 맞춘다 — Bootstrap 칸 안쪽 여백 12px 때문에 11px 안쪽에 있었다 */
@media (min-width: 1200px) { .aw-side-col { padding-right: 0; } }
/* 23: 커뮤니티 쪽(Inertia, 공용 배너 격자) 위 배너 간격 6px → 옛 모양 화면(.banner-area 안쪽 여백 1px×2)과 같은 2px. 격자 간격이 style 속성이라 !important */
.banner-area-main .banner-grid:not(.banner-grid--code) { gap: 2px !important; }
/* 24: 다크에서 옆 칸 썸네일 자리(그림 오기 전)가 밝은 회색 #eee 였다 — 순위 칸과 같은 #232736 */
html[data-theme="dark"] .aw-side-thumb, html.dark .aw-side-thumb { background: #232736; }
/* 27: 작품 제목 h1 — 보이는 모양은 그 전 span 그대로(Bootstrap h1 의 크기·굵기·여백을 지움) */
.aw-h1 { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }