/* ════════════════ 테마 토큰 ════════════════ */
:root {
  color-scheme: light;
  --green: #00d564;
  --green-dark: #00b856;
  --green-soft: #e8fbf0;
  --text: #121212;
  --text-2: #555;
  --muted: #8a8a8a;
  --line: #ececec;
  --line-2: #d6d6d6;
  --bg: #ffffff;
  --bg-2: #f6f7f8;
  --surface: #ffffff;
  --hover: #fafafa;
  --input: #ffffff;
  --inv: #121212;
  --inv-text: #ffffff;
  --danger: #e53935;
  --danger-soft: #fdecea;
  --shadow: 0 8px 24px rgba(0,0,0,.10);
  --radius: 8px;
  --g1: #7cb342; --g2: #039be5; --g3: #78909c; --g4: #ffa000; --g5: #e91e63;
  --tabbar-h: 0px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --green-soft: #0f2a1c;
  --text: #ececec;
  --text-2: #b4b4b4;
  --muted: #7d7d7d;
  --line: #2a2a2a;
  --line-2: #3a3a3a;
  --bg: #121212;
  --bg-2: #1c1c1c;
  --surface: #181818;
  --hover: #202020;
  --input: #1c1c1c;
  --inv: #ececec;
  --inv-text: #121212;
  --danger-soft: #3a1616;
  --shadow: 0 8px 24px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --green-soft: #0f2a1c;
    --text: #ececec; --text-2: #b4b4b4; --muted: #7d7d7d;
    --line: #2a2a2a; --line-2: #3a3a3a;
    --bg: #121212; --bg-2: #1c1c1c; --surface: #181818; --hover: #202020; --input: #1c1c1c;
    --inv: #ececec; --inv-text: #121212; --danger-soft: #3a1616; --shadow: 0 8px 24px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 15px; line-height: 1.5; letter-spacing: -0.01em;
  transition: background-color .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.03em; }
button, input, select, textarea { font: inherit; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.main { min-height: 60vh; padding-top: 24px; padding-bottom: 60px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.inline { display: inline; }
.mt { margin-top: 28px !important; }
[hidden] { display: none !important; }
@media (min-width: 641px) { .only-mobile { display: none !important; } }

/* ════════════════ 헤더 ════════════════ */
.gnb { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.gnb-top { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 22px; letter-spacing: -0.04em; flex-shrink: 0; }
.logo-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--green); color: #fff; font-size: 18px; }
.search { flex: 1; max-width: 420px; display: flex; align-items: center; background: var(--bg-2); border-radius: 999px; padding: 0 6px 0 18px; height: 40px; border: 1px solid transparent; transition: border-color .15s; }
.search:focus-within { border-color: var(--green); background: var(--surface); }
.search input { flex: 1; border: 0; background: none; outline: none; min-width: 0; }
.search button { border: 0; background: none; color: var(--text-2); cursor: pointer; padding: 6px 10px; display: flex; }
.gnb-user { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: var(--bg-2); color: var(--text); }
.icon-btn.disabled { opacity: .3; pointer-events: none; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ic-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; }
}
.user-chip { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; }
.user-chip:hover { background: var(--bg-2); }
.user-chip .nick { font-weight: 600; font-size: 14px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnb-nav { border-top: 1px solid var(--line); }
.gnb-nav .container { display: flex; gap: 28px; height: 48px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.gnb-nav .container::-webkit-scrollbar { display: none; }
.gnb-nav a { display: flex; align-items: center; font-weight: 700; font-size: 16px; color: var(--text-2); border-bottom: 3px solid transparent; white-space: nowrap; }
.gnb-nav a:hover { color: var(--text); }
.gnb-nav a.on { color: var(--text); border-bottom-color: var(--green); }

/* ════════════════ 버튼 ════════════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s; background: var(--bg-2); color: var(--text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 6px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-dark { background: var(--inv); color: var(--inv-text); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-outline { background: var(--surface); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--text); }
.btn-outline-light { background: transparent; border-color: #444; color: #eee; }
.btn-outline-light:hover { border-color: #aaa; }
.btn-fav-on { background: #fff0f3; color: #e91e63; border-color: #ffc6d3; }
:root[data-theme="dark"] .btn-fav-on { background: #3a1422; border-color: #6b2440; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); }
.link-btn { border: 0; background: none; padding: 0; color: var(--muted); font-size: 12px; cursor: pointer; }
.link-btn:hover { color: var(--text); text-decoration: underline; }
.link-btn.danger:hover { color: var(--danger); }

/* ════════════════ 알림 ════════════════ */
.flash { padding: 12px 0; font-weight: 600; font-size: 14px; }
.flash-success { background: var(--green-soft); color: #0a9a4c; }
.flash-error { background: var(--danger-soft); color: #e53935; }
.inline-flash { border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.notice { background: var(--bg-2); padding: 12px 16px; border-radius: 8px; margin: 8px 0 16px; font-size: 14px; color: var(--text-2); }
.notice a { color: var(--green-dark); font-weight: 700; }
.notice.warn { background: #fff7e0; color: #8a6100; }
:root[data-theme="dark"] .notice.warn { background: #33280a; color: #f0c040; }
.toast { position: fixed; left: 50%; bottom: calc(80px + var(--tabbar-h)); transform: translateX(-50%); background: rgba(20,20,20,.92); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 200; box-shadow: var(--shadow); max-width: calc(100% - 32px); text-align: center; }

/* ════════════════ 배지 ════════════════ */
.grade-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; vertical-align: middle; }
.grade-badge.g1, .g1.on { background: var(--g1); }
.grade-badge.g2, .g2.on { background: var(--g2); }
.grade-badge.g3, .g3.on { background: var(--g3); }
.grade-badge.g4, .g4.on { background: var(--g4); }
.grade-badge.g5, .g5.on { background: linear-gradient(135deg, #ff4081, #7c4dff); }
.mini-grade { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 10px; font-weight: 900; color: #fff; background: var(--g1); }
.mini-grade.g2 { background: var(--g2); } .mini-grade.g3 { background: var(--g3); } .mini-grade.g4 { background: var(--g4); } .mini-grade.g5 { background: linear-gradient(135deg, #ff4081, #7c4dff); }
.author { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.author-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; }
.badge-up { background: #ff4d4f; }
.badge-new { background: var(--green); }
.badge-end { background: #333; }
.badge-admin { background: var(--inv); color: var(--inv-text); }
.badge-best { background: linear-gradient(135deg, #ff6b35, #ff3d71); }
.badge-writer { background: transparent; color: var(--green-dark); border: 1px solid var(--green); height: 18px; }
.badge-ban { background: var(--danger); }

/* ════════════════ 광고 ════════════════ */
.ad-slot { position: relative; margin: 0 0 28px; }
.ad { position: relative; display: block; border-radius: 10px; overflow: hidden; }
.ad img { width: 100%; height: auto; }
.ad-image picture, .ad-image img { width: 100%; }
.ad.ad-text { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--ad-bg); color: var(--ad-fg); }
.ad.ad-text .ad-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ad.ad-text strong { font-size: 17px; font-weight: 800; }
.ad.ad-text small { opacity: .85; font-size: 13px; }
.ad-arrow { font-size: 28px; line-height: 1; opacity: .8; }
.ad-label { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 800; letter-spacing: .05em; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.35); color: #fff; }
/* 상단 띠배너 */
.ad-top_strip { margin: 0; }
.ad-top_strip .ad { border-radius: 0; }
.ad-top_strip .ad.ad-text { justify-content: center; padding: 10px 48px; text-align: center; }
.ad-top_strip .ad.ad-text .ad-copy { flex: 0 1 auto; flex-direction: row; gap: 10px; align-items: baseline; }
.ad-top_strip .ad.ad-text strong { font-size: 14px; }
.ad-top_strip .ad-label { top: 50%; transform: translateY(-50%); right: auto; left: 10px; }
.ad-top_strip .ad-arrow { font-size: 18px; }
.ad-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: rgba(0,0,0,.2); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.ad-home_side { margin: 20px 0 0; }
.ad-viewer_end { max-width: 720px; margin: 0 auto; padding: 16px; background: #0a0a0a; }
.ad-viewer_top { margin: 0; padding: 12px; background: #0a0a0a; }
.ad-viewer_top .ad, .ad-viewer_end .ad { border-radius: 8px; }
/* 뷰어 하단 고정 배너: 하단 메뉴 바로 위, 메뉴가 숨으면 화면 맨 아래로 */
.ad-viewer_sticky { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 19; width: 100%; max-width: 728px; margin: 0; background: rgba(10,10,10,.96); transition: bottom .25s ease; }
.ad-viewer_sticky.low { bottom: env(safe-area-inset-bottom); }
.ad-viewer_sticky .ad { border-radius: 0; }
.ad-viewer_sticky .ad img { max-height: 90px; width: auto; margin: 0 auto; }
.ad-viewer_sticky .ad.ad-text { padding: 12px 48px 12px 16px; min-height: 50px; }
.ad-viewer_sticky .ad.ad-text strong { font-size: 15px; }
.ad-viewer_sticky .ad-label { top: 4px; right: 44px; left: auto; }
.ad-viewer_sticky .ad-close { right: 8px; }
.has-sticky-ad .viewer-after { padding-bottom: 170px; }
.ad-board_side { margin-top: 16px; }
/* 팝업 */
.ad-popup { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 20px; }
.ad-popup-box { width: 100%; max-width: 400px; background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.ad-popup .ad-slot { margin: 0; }
.ad-popup .ad { border-radius: 0; }
.ad-popup .ad.ad-text { min-height: 240px; padding: 32px; text-align: center; justify-content: center; }
.ad-popup .ad.ad-text strong { font-size: 22px; }
.ad-popup-foot { display: flex; border-top: 1px solid var(--line); }
.ad-popup-foot button { flex: 1; padding: 14px; border: 0; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text-2); }
.ad-popup-foot button + button { border-left: 1px solid var(--line); color: var(--text); }

/* ════════════════ 히어로 ════════════════ */
.hero { position: relative; height: 360px; border-radius: 16px; overflow: hidden; background: #111; margin-bottom: 28px; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(30px) brightness(.45) saturate(1.3); transform: scale(1.1); }
.hero-content { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 64px; color: #fff; }
.hero-text { max-width: 520px; }
.hero-genre { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 700; }
.hero h2 { font-size: 40px; font-weight: 900; margin: 14px 0 6px; line-height: 1.2; }
.hero-author { opacity: .8; margin: 0 0 14px; }
.hero-desc { opacity: .75; margin: 0 0 20px; font-size: 15px; }
.hero-cta { font-weight: 800; color: var(--green); }
.hero-thumb { height: 300px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5); transform: rotate(2deg); }
.hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; cursor: pointer; z-index: 2; line-height: 1; }
.hero-nav:hover { background: rgba(255,255,255,.3); }
.hero-nav.prev { left: 14px; } .hero-nav.next { right: 14px; }
.hero-dots { position: absolute; bottom: 16px; left: 64px; display: flex; gap: 6px; z-index: 2; }
.hero-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s; }
.hero-dots button.on { width: 24px; background: #fff; }

/* ════════════════ 섹션 / 탭 ════════════════ */
.section { margin-bottom: 48px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.section-head h3 { font-size: 20px; font-weight: 800; }
.count { color: var(--green); margin-left: 4px; }
.more { color: var(--muted); font-size: 13px; }
.day-tabs { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 24px; background: var(--surface); }
.day-tabs button { flex: 1; height: 52px; border: 0; background: none; font-weight: 700; font-size: 16px; color: var(--text-2); cursor: pointer; border-right: 1px solid var(--line); padding: 0; }
.day-tabs button:last-child { border-right: 0; }
.day-tabs button em { font-style: normal; font-size: 10px; display: block; color: var(--green); line-height: 1; margin-top: 2px; }
.day-tabs button.on { background: var(--green); color: #fff; }
.day-tabs button.on em { color: #fff; }
.list-tabs { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: var(--surface); }
.list-tabs button { flex: 1; height: 52px; border: 0; background: none; font-weight: 700; font-size: 16px; color: var(--text-2); cursor: pointer; border-right: 1px solid var(--line); padding: 0; position: relative; white-space: nowrap; }
.list-tabs button:last-child { border-right: 0; }
.list-tabs button em { font-style: normal; font-size: 10px; display: block; color: var(--green); line-height: 1; margin-top: 2px; }
.list-tabs button.on { background: var(--green); color: #fff; }
.list-tabs button.on em { color: #fff; }
.list-tabs .dot { position: absolute; top: 10px; margin-left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; }
.sort-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.sort-row select { height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--input); padding: 0 28px 0 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.result-title { font-size: 18px; }
.sub-head { margin: 4px 0 14px; font-size: 15px; font-weight: 800; }
.sub-head em { font-style: normal; color: var(--green-dark); }
.my-updates { padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px dashed var(--line-2); }
.chip-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding-bottom: 2px; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .chip { padding: 6px 12px; font-size: 13px; }
.chip-tag { color: var(--green-dark); }
.filter-group { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fg-label { flex-shrink: 0; width: 64px; font-size: 13px; font-weight: 800; color: var(--muted); }
.search-panel { margin-bottom: 20px; }
.search-panel .search-big { margin-bottom: 0; }
.search-big select { height: 52px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--input); padding: 0 10px; font-weight: 700; }
.detail-hashtags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 14px; font-size: 14px; }
.detail-hashtags a { color: var(--green-dark); font-weight: 600; }
.detail-tags a.tag:hover { color: var(--text); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.check-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.check-chip { cursor: pointer; }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.check-chip input:checked + span { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.check-chip input:focus-visible + span { outline: 2px solid var(--green); }
/* 모바일 인기 TOP 가로 스크롤 */
.m-rank { margin: 0 -16px 18px; }
.m-rank-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 10px; }
.m-rank-head h3 { font-size: 18px; font-weight: 800; }
.m-rank-head h3 span { color: var(--green-dark); }
.m-rank-head .chev { font-size: 26px; line-height: 1; color: var(--text-2); }
.m-rank-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 4px; scroll-padding: 0 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.m-rank-scroll::-webkit-scrollbar { display: none; }
.m-rank-item { position: relative; flex: 0 0 30%; scroll-snap-align: start; padding-bottom: 10px; }
.mr-thumb { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; }
.mr-thumb img, .mr-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; }
.mr-no { position: absolute; left: 2px; bottom: -2px; font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; color: #fff; -webkit-text-stroke: 2px #111; paint-order: stroke fill; letter-spacing: -0.05em; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; white-space: nowrap; }
.chip:hover { border-color: var(--text); }
.chip.on { background: var(--inv); border-color: var(--inv); color: var(--inv-text); }
.tabs-line { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs-line a { padding: 12px 14px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs-line a.on { color: var(--text); border-bottom-color: var(--text); }
.tabs-line em { font-style: normal; color: var(--green); font-size: 13px; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: thin; }
.continue-card { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; }
.cc-thumb { aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.cc-thumb img, .cc-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cc-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ep { font-size: 12px; color: var(--green-dark); font-weight: 700; }

/* ════════════════ 카드 ════════════════ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 16px; }
.grid-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: block; min-width: 0; }
.card-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.card-thumb img, .card-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card:hover .card-thumb img { transform: scale(1.05); }
.card-thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); pointer-events: none; }
.badge-circle { position: absolute; top: 6px; left: 6px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); letter-spacing: -0.05em; }
.card-day { position: absolute; top: 0; right: 0; padding: 3px 7px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 700; border-radius: 0 0 0 6px; }
.up-tag { display: inline-block; font-size: 10px; font-weight: 800; color: #ff3b30; border: 1px solid #ff3b30; border-radius: 3px; padding: 0 3px; line-height: 15px; margin-right: 4px; vertical-align: 2px; }
.card-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.card-sub em { font-style: normal; color: var(--green-dark); font-weight: 700; }
.card.has-new .card-thumb { box-shadow: 0 0 0 2px var(--green); }
.card-grade { position: absolute; bottom: 8px; right: 8px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,.6); }
.card-grade.g4 { background: var(--g4); } .card-grade.g5 { background: var(--g5); }
.card-rank { position: absolute; left: 0; bottom: 0; padding: 4px 10px 2px; font-size: 28px; font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.card-body { padding-top: 10px; }
.card-title { margin: 0; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-author { margin: 2px 0 0; color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.genre-tag { color: var(--green-dark); font-weight: 600; }
.thumb-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, hsl(var(--h) 70% 72%), hsl(calc(var(--h) + 40) 70% 55%)); color: #fff; font-weight: 900; font-size: 42px; }

/* ════════════════ 메인 2단 ════════════════ */
.two-col { display: grid; grid-template-columns: 1fr 340px; gap: 40px; }
.rank-box { background: var(--bg-2); border-radius: 12px; padding: 20px; align-self: start; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li a { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.rank-list li a:hover strong { text-decoration: underline; }
.rank-no { width: 22px; text-align: center; font-weight: 900; font-size: 18px; color: var(--muted); font-style: italic; }
.rank-no.top { color: var(--green); }
.rank-thumb { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.rank-thumb img, .rank-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; font-size: 18px; }
.rank-info { display: flex; flex-direction: column; min-width: 0; }
.rank-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-info small { color: var(--muted); font-size: 12px; }
.mini-posts { list-style: none; margin: 0; padding: 0; }
.mini-posts li a { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; }
.mini-posts li a:hover .mp-title { text-decoration: underline; }
.mp-board { flex-shrink: 0; font-size: 11px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; }
.mp-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-posts em, .cc { font-style: normal; color: #ff4d4f; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ════════════════ 작품 상세 ════════════════ */
.detail-head { display: flex; gap: 32px; padding: 8px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.detail-thumb { width: 240px; flex-shrink: 0; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.detail-thumb img, .detail-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; }
.detail-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.detail-info h2 { font-size: 32px; font-weight: 900; }
.detail-author { color: var(--text-2); margin: 6px 0 14px; font-weight: 600; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag { padding: 4px 10px; background: var(--bg-2); border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tag-grade { color: #fff; }
.tag-grade.g1 { background: var(--g1); } .tag-grade.g2 { background: var(--g2); } .tag-grade.g3 { background: var(--g3); } .tag-grade.g4 { background: var(--g4); } .tag-grade.g5 { background: var(--g5); }
.detail-desc { color: var(--text-2); white-space: pre-line; margin: 0 0 14px; }
.detail-stats { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.list-head h3 { font-size: 18px; }
.sort a { font-size: 13px; color: var(--muted); margin-left: 12px; }
.sort a.on { color: var(--text); font-weight: 700; }
.episode-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.episode-list li { border-bottom: 1px solid var(--line); }
.episode-list li a { display: flex; align-items: center; gap: 16px; padding: 12px 4px; }
.episode-list li a:hover { background: var(--hover); }
.ep-thumb { position: relative; width: 120px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--bg-2); }
.ep-thumb img, .ep-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; font-size: 24px; }
.ep-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); font-size: 22px; }
.ep-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ep-info strong { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-info small { color: var(--muted); font-size: 12px; }
.ep-star { color: #ff4d4f; font-weight: 700; margin-right: 4px; }
.ep-read { margin-left: 6px; font-size: 11px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 4px; }
.episode-list li.read .ep-info strong { color: var(--muted); }
.episode-list li.read .ep-thumb { opacity: .55; }
.locked .ep-info strong { color: var(--muted); }
.ep-grade { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 4px; color: #fff; background: var(--g3); flex-shrink: 0; }
.ep-grade.g4 { background: var(--g4); } .ep-grade.g5 { background: var(--g5); } .ep-grade.g2 { background: var(--g2); }

/* ════════════════ 뷰어 ════════════════ */
.viewer-body { background: #000; color: #eee; }
.viewer-bar { position: fixed; left: 0; right: 0; z-index: 20; display: flex; align-items: center; background: rgba(44,46,54,.97); backdrop-filter: blur(8px); transition: transform .25s ease, opacity .25s ease; color: #f2f2f2; }
.viewer-top { z-index: 22; top: 0; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; gap: 4px; }
.viewer-bottom { bottom: 0; height: calc(60px + env(safe-area-inset-bottom)); padding: 0 12px env(safe-area-inset-bottom); justify-content: space-between; }
.viewer-top.hide { transform: translateY(-100%); }
.viewer-bottom.hide { transform: translateY(100%); }
.vb-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 8px; flex-shrink: 0; }
.vb-icon:hover { background: rgba(255,255,255,.08); }
.vb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vb-title strong { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-ep-title { font-weight: 500; }
.vb-title > span { font-size: 12px; color: #a8a8b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-menu-wrap { position: relative; }
.vb-menu { position: absolute; right: 4px; top: 48px; min-width: 190px; background: #24262c; border: 1px solid #3a3d47; border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.vb-menu a, .vb-menu button { display: block; text-align: left; padding: 11px 12px; border-radius: 8px; border: 0; background: none; color: #eee; font-size: 14px; font-weight: 600; cursor: pointer; }
.vb-menu a:hover, .vb-menu button:hover { background: rgba(255,255,255,.08); }
.vb-menu button.on { color: #ff4d6d; }
.vbb-left, .vbb-right { display: flex; align-items: center; gap: 4px; }
.vbb-right { gap: 10px; }
.vbb-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 10px; justify-content: center; border: 0; background: none; color: #f2f2f2; font-size: 16px; font-weight: 500; cursor: pointer; border-radius: 8px; }
.vbb-btn:hover { background: rgba(255,255,255,.08); }
.vbb-btn.disabled { color: #6b6e78; cursor: default; background: none; }
.vbb-like .ic-f { display: none; color: #ff4d6d; }
.vbb-like.on .ic-f { display: block; }
.vbb-like.on .ic-o { display: none; }
.vbb-like.pop svg { animation: pop .3s ease; }
.viewer-jump { position: fixed; right: 0; top: calc(64px + env(safe-area-inset-top)); left: auto; z-index: 21; display: flex; flex-direction: column; background: #000; border-radius: 4px 0 0 4px; overflow: hidden; transition: opacity .25s ease; }
.viewer-jump button { width: 44px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: #ddd; cursor: pointer; }
.viewer-jump button:hover { background: #222; }
.viewer-jump.hide { opacity: 0; pointer-events: none; }
/* 책갈피 / 이어보기 */
.ep-sheet-tabs { display: flex; border-bottom: 1px solid #2c2e36; }
.ep-sheet-tabs button { flex: 1; padding: 12px; border: 0; background: none; color: #8a8a93; font-weight: 700; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.ep-sheet-tabs button.on { color: #fff; border-bottom-color: var(--green); }
.ep-sheet-tabs em { font-style: normal; color: var(--green); margin-left: 2px; }
.bm-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; }
.bm-item { display: flex; align-items: center; }
.bm-item a { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 12px 8px 12px 20px; }
.bm-item a:hover { background: rgba(255,255,255,.05); }
.bm-item .bm-del { margin-right: 8px; color: #8a8a93; }
.bm-ic { color: var(--green); padding-top: 2px; }
.bm-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bm-info strong { font-size: 14px; }
.bm-info strong em { font-style: normal; font-size: 11px; color: var(--green); border: 1px solid var(--green); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.bm-memo { font-size: 13px; color: #d6d6dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-info small { font-size: 12px; color: #8a8a93; }
.bm-empty { text-align: center; color: #8a8a93; padding: 40px 20px; font-size: 14px; line-height: 1.7; }
.resume-bar { position: fixed; z-index: 23; left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top)); width: calc(100% - 24px); max-width: 480px; display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 16px; background: #24262c; border: 1px solid #3a3d47; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 14px; color: #eee; }
.resume-bar span { flex: 1; min-width: 0; }
.resume-bar strong { color: var(--green); }
.resume-bar .vb-icon { width: 32px; height: 32px; }
.bm-modal { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; }
.bm-modal-box { width: 100%; max-width: 360px; background: #1f2026; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; color: #eee; }
.bm-modal-title { margin: 0; font-weight: 800; font-size: 17px; }
.bm-modal-pos { margin: 0; color: #a8a8b0; font-size: 13px; }
.bm-modal-pos strong { color: var(--green); }
.bm-modal-box input { height: 44px; border-radius: 8px; border: 1px solid #3a3d47; background: #16171b; color: #eee; padding: 0 12px; outline: none; }
.bm-modal-box input:focus { border-color: var(--green); }
.bm-modal-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* 회차 목록 바텀시트 */
.ep-sheet { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.ep-sheet-box { width: 100%; max-width: 720px; max-height: 72vh; background: #1b1c21; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); animation: sheetUp .25s ease; }
@keyframes sheetUp { from { transform: translateY(100%); } }
.ep-sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 20px; border-bottom: 1px solid #2c2e36; }
.ep-sheet-head strong { font-size: 16px; }
.ep-sheet-head .muted { font-size: 13px; }
.ep-sheet-head .vb-icon { margin-left: auto; }
.ep-sheet-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; }
.ep-sheet-list a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.ep-sheet-list a:hover { background: rgba(255,255,255,.05); }
.ep-sheet-list .current a { background: rgba(0,213,100,.12); }
.ep-sheet-list .current strong { color: var(--green); }
.ep-sheet-list .read strong { color: #8a8a93; }
.ep-sheet-list .locked { opacity: .55; }
.es-thumb { width: 72px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #2a2a2a; }
.es-thumb img, .es-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; font-size: 18px; }
.es-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.es-info strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-info small { font-size: 12px; color: #8a8a93; }
.viewer { max-width: 720px; margin: 0 auto; padding-top: calc(56px + env(safe-area-inset-top)); user-select: none; -webkit-user-select: none; }
.viewer img { width: 100%; min-height: 200px; background: #111; -webkit-touch-callout: none; }
.viewer img[data-loaded] { min-height: 0; }
.viewer-after { max-width: 720px; margin: 0 auto; padding-bottom: 80px; background: #111; }
.viewer-end { padding: 48px 20px 40px; text-align: center; }
.ve-title { font-size: 18px; font-weight: 800; margin: 0; }
.ve-author { color: #888; margin: 4px 0 24px; }
.ve-nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ve-next { color: #888; font-size: 13px; margin-top: 16px; }
.viewer-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; }
.viewer-progress span { display: block; height: 100%; width: 0; background: var(--green); }
.rating { margin: 0 auto 28px; padding: 20px; background: #1a1a1a; border-radius: 12px; max-width: 360px; }
.rating-label { margin: 0 0 8px; font-weight: 700; }
.stars { display: flex; justify-content: center; gap: 4px; }
.star { border: 0; background: none; font-size: 34px; line-height: 1; color: #444; cursor: pointer; padding: 0 2px; transition: transform .1s, color .1s; }
.star.on, .star.hover { color: #ff4d4f; }
.star:hover { transform: scale(1.15); }
.rating-avg { margin: 8px 0 0; font-size: 20px; font-weight: 900; color: #ff4d4f; }
.rating-avg small { font-size: 12px; color: #888; font-weight: 400; }

/* ════════════════ 댓글 ════════════════ */
.comments { padding: 24px 20px; border-top: 8px solid #000; }
.viewer-body .comments { --text: #ececec; --text-2: #b4b4b4; --muted: #7d7d7d; --line: #262626; --line-2: #3a3a3a; --bg-2: #1c1c1c; --input: #1a1a1a; --surface: #161616; }
.comments h3, .post-comments h3 { font-size: 18px; margin-bottom: 14px; }
.cmt-form { border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; margin-bottom: 20px; background: var(--input); }
.cmt-form textarea { width: 100%; border: 0; outline: none; resize: vertical; background: transparent; min-height: 60px; font-size: 14px; }
.cmt-form-foot { display: flex; align-items: center; gap: 12px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; }
.cmt-form-foot .counter { margin-left: auto; font-size: 12px; color: var(--muted); }
.cmt-form.disabled { text-align: center; color: var(--muted); font-size: 14px; padding: 20px; }
.cmt-form.disabled a { color: var(--green); font-weight: 700; }
.cmt-sort { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cmt-sort a { color: var(--muted); }
.cmt-sort a.on { color: var(--text); font-weight: 700; }
.cmt-list { list-style: none; margin: 0; padding: 0; }
.best-list { border: 1px solid #ff3d7144; border-radius: 10px; padding: 0 14px; margin-bottom: 8px; background: linear-gradient(180deg, #ff3d7110, transparent); }
.cmt { padding: 16px 0; border-bottom: 1px solid var(--line); }
.best-list .cmt:last-child { border-bottom: 0; }
.cmt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.cmt-date { font-size: 12px; color: var(--muted); }
.cmt-body { margin: 0 0 10px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.spoiler { cursor: pointer; }
.spoiler .spoiler-text { display: none; }
.spoiler.open .spoiler-text { display: inline; }
.spoiler.open .spoiler-cover { display: none; }
.spoiler-cover { color: var(--muted); background: var(--bg-2); padding: 4px 10px; border-radius: 6px; font-size: 13px; }
.cmt-actions { display: flex; align-items: center; gap: 12px; }
.like-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: none; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .15s; }
.like-btn:hover:not(:disabled) { border-color: #ff3d71; color: #ff3d71; }
.like-btn.on { border-color: #ff3d71; color: #fff; background: #ff3d71; }
.like-btn:disabled { opacity: .5; cursor: default; }
.like-btn.pop, .like-big.pop { animation: pop .3s ease; }
@keyframes pop { 50% { transform: scale(1.2); } }
.cmt-empty { text-align: center; color: var(--muted); padding: 32px 0; }

/* ════════════════ 커뮤니티 (카페형) ════════════════ */
.cafe { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.cafe-side { position: sticky; top: 128px; display: flex; flex-direction: column; gap: 12px; }
.cafe-info { background: var(--green); color: #fff; border-radius: 12px; padding: 16px; }
.ci-name { margin: 0 0 8px; font-weight: 900; font-size: 16px; }
.ci-stats { margin: 0; display: flex; gap: 12px; font-size: 12px; opacity: .9; }
.cafe-me { border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-size: 13px; }
.cm-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.cm-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 16px; flex-shrink: 0; }
.cm-avatar.sm { width: 36px; height: 36px; font-size: 14px; }
.cm-stats { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.cm-stats li { display: flex; justify-content: space-between; color: var(--text-2); }
.cm-stats strong { color: var(--text); }
.cm-stats a strong { color: var(--green-dark); }
.cafe-write { gap: 6px; }
.cafe-menu { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.cafe-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.cafe-menu a:hover { background: var(--bg-2); color: var(--text); }
.cafe-menu a.on { background: var(--green-soft); color: var(--green-dark); }
.cafe-menu a.dim { opacity: .55; }
.cafe-menu em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); }
.cafe-menu em.new { color: #fff; background: #ff4d4f; border-radius: 3px; padding: 0 4px; font-weight: 800; }
.cafe-menu .lock { margin-left: auto; font-size: 11px; }
.cm-ic { width: 20px; text-align: center; }
.cm-divider { height: 1px; background: var(--line); margin: 6px 4px; }
.cafe > * { min-width: 0; }
.board-head { padding-bottom: 14px; border-bottom: 2px solid var(--text); margin-bottom: 0; }
.board-head h2 { font-size: 22px; font-weight: 900; }
.board-head p { margin: 4px 0 0; font-size: 13px; }
.board-perm { color: var(--muted); }
.post-table { margin-bottom: 20px; }
.pt-head, .pt-row { display: grid; grid-template-columns: 1fr 130px 80px 56px 56px; gap: 8px; align-items: center; padding: 11px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pt-head { font-size: 12px; color: var(--muted); font-weight: 700; background: var(--bg-2); }
.pt-head span:not(.c-title), .pt-row .c-date, .pt-row .c-num { text-align: center; }
.pt-row:hover { background: var(--hover); }
.pt-row:hover .t { text-decoration: underline; }
.pt-row.pt-notice { background: var(--bg-2); font-weight: 700; }
.c-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.c-title .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-author { min-width: 0; }
.c-date, .c-num { font-size: 12px; color: var(--muted); }
.tag-notice { flex-shrink: 0; font-size: 11px; font-weight: 800; color: #ff4d4f; border: 1px solid #ff4d4f; border-radius: 3px; padding: 0 5px; }
.tag-board { flex-shrink: 0; font-size: 11px; color: var(--muted); }
.ic-img { font-size: 12px; flex-shrink: 0; }
.pager { display: flex; justify-content: center; gap: 4px; margin: 20px 0; flex-wrap: wrap; }
.pager a { min-width: 32px; height: 32px; display: grid; place-items: center; padding: 0 8px; border-radius: 6px; font-size: 13px; color: var(--text-2); }
.pager a:hover { background: var(--bg-2); }
.pager a.on { background: var(--green); color: #fff; font-weight: 800; }
.board-search { display: flex; justify-content: center; gap: 6px; }
.board-search select, .board-search input { height: 32px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--input); padding: 0 8px; font-size: 13px; }
.board-search input { width: 200px; }
.post { padding: 4px 0 24px; border-bottom: 1px solid var(--line); }
.post-board { font-size: 13px; color: var(--green-dark); font-weight: 700; }
.post-title { font-size: 24px; font-weight: 800; margin: 6px 0 16px; word-break: break-word; }
.post-meta { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.post-meta p { margin: 2px 0 0; }
.post-owner { margin-left: auto; display: flex; gap: 2px; }
.post-body { padding: 28px 0; font-size: 15px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; min-height: 120px; }
.post-images { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.post-images img { max-width: 100%; border-radius: 8px; }
.post-actions { display: flex; justify-content: center; align-items: center; gap: 16px; }
.like-big { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 700; cursor: pointer; color: var(--text-2); }
.like-big.on { border-color: #ff3d71; color: #ff3d71; }
.like-big:disabled { opacity: .6; cursor: default; }
.post-comments { padding: 24px 0; }
.pc-list { list-style: none; margin: 0 0 16px; padding: 0; }
.pc { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pc.reply { padding-left: 28px; position: relative; background: var(--bg-2); padding-right: 12px; }
.pc.reply::before { content: '↳'; position: absolute; left: 10px; top: 14px; color: var(--muted); }
.reply-to { font-size: 12px; color: var(--green-dark); font-weight: 700; margin-bottom: 6px; }
.post-nav { border-top: 1px solid var(--line); }
.post-nav a { display: flex; gap: 16px; padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.post-nav a span { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.post-bottom { display: flex; justify-content: flex-end; padding: 16px 0; }
.write-form { padding-top: 20px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.notice-check { padding-bottom: 12px; }
.cur-attach { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.cur-attach p { margin: 0 0 8px; }
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.attach-item { display: flex; flex-direction: column; gap: 4px; font-size: 12px !important; }
.attach-item img { aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.fab { position: fixed; right: 18px; bottom: calc(var(--tabbar-h) + 18px); width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,213,100,.45); z-index: 40; }
/* 출석부 */
.att-date { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 20px 0; font-size: 18px; }
.att-cal { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.att-cal p { margin: 0 0 10px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; }
.cal-w { color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal-d { padding: 6px 0; border-radius: 6px; color: var(--text-2); }
.cal-d.on { background: var(--green); color: #fff; font-weight: 800; }
.cal-d.cur { outline: 2px solid var(--text); outline-offset: -2px; }
.att-form { display: flex; gap: 8px; margin-bottom: 20px; }
.att-form input { flex: 1; height: 44px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 14px; background: var(--input); outline: none; }
.att-form input:focus { border-color: var(--green); }
.att-form .btn { height: 44px; }
.att-count { font-size: 16px; margin: 8px 0; }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-list li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.att-rank { width: 26px; text-align: center; font-weight: 900; color: var(--muted); font-style: italic; }
.att-rank.top { color: var(--green); }
.att-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.att-streak { font-size: 11px; color: var(--green-dark); font-weight: 700; flex-shrink: 0; }

/* ════════════════ 인증 / 폼 ════════════════ */
.auth-box { max-width: 420px; margin: 24px auto; padding: 40px 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.auth-box h2 { font-size: 26px; font-weight: 900; }
.auth-box > .muted { margin: 6px 0 24px; }
.auth-alt { text-align: center; color: var(--muted); font-size: 14px; margin-top: 20px; }
.auth-alt a { color: var(--green-dark); font-weight: 700; }
.agree { font-size: 13px !important; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .form select, .form textarea,
.filter-bar input, .filter-bar select, .user-form select, .user-form input, .search-big input, .ba-row input, .ba-row select {
  height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--input); font-size: 15px; font-weight: 400; color: var(--text); outline: none; transition: border-color .15s;
}
.form input[type=color] { height: 46px; width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--input); padding: 4px; }
.form textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.form input:focus, .form select:focus, .form textarea:focus, .search-big input:focus { border-color: var(--green); }
.form label.check, label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.form-error { background: var(--danger-soft); color: var(--danger); padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.grade-guide { margin-top: 24px; padding: 16px; background: var(--bg-2); border-radius: 10px; font-size: 13px; }
.grade-guide p { margin: 0 0 8px; }
.grade-guide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.center-box { max-width: 480px; margin: 60px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.center-box h2 { font-size: 24px; }
.lock-icon { font-size: 56px; }
.search-big { display: flex; gap: 8px; margin-bottom: 32px; }
.search-big input { flex: 1; height: 52px !important; font-size: 17px !important; }
.search-big .btn { height: 52px; }
.empty { text-align: center; color: var(--muted); padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty svg { color: var(--line-2); }
.empty p { margin: 0; }
.fs { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.fs legend { font-weight: 800; font-size: 14px; padding: 0 6px; }
.seg { display: flex; gap: 8px; }
.seg label { flex-direction: row !important; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.seg label:has(input:checked) { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.pad-top { padding-top: 22px; }

/* ════════════════ 마이페이지 ════════════════ */
.my-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.my-info { flex: 1; min-width: 0; }
.my-head h2 { font-size: 24px; }
.my-head p { margin: 6px 0 0; }
.my-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 900; flex-shrink: 0; }
.points { font-weight: 800; color: var(--green-dark); margin-left: 6px; }
.grade-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.gm-step { background: var(--bg-2); border-radius: 8px; padding: 12px 4px; text-align: center; color: var(--muted); }
.gm-step span { display: block; font-size: 20px; font-weight: 900; }
.gm-step small { font-weight: 700; display: block; }
.gm-step em { font-style: normal; font-size: 10px; opacity: .8; }
.gm-step.on { color: #fff; }
.next-grade { margin-bottom: 28px; font-size: 14px; }
.next-grade p { margin: 0 0 8px; }
.bar { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.my-list { list-style: none; margin: 0; padding: 0; }
.my-list li a { display: flex; flex-direction: column; gap: 2px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.my-list li a:hover { background: var(--hover); }
.ml-ctx { font-size: 12px; color: var(--green-dark); font-weight: 700; }
.ml-body { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-meta { font-size: 12px; color: var(--muted); }
.my-bm-list { list-style: none; margin: 0; padding: 0; }
.my-bm-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.my-bm-list a { flex: 1; min-width: 0; display: flex; gap: 14px; padding: 14px 4px; align-items: center; }
.my-bm-list a:hover { background: var(--hover); }
.mb-thumb { width: 56px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.mb-thumb img, .mb-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; font-size: 18px; }
.mb-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-info strong { font-size: 15px; }
.mb-memo { font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-box { border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; margin-top: 20px; }
.settings-box summary { padding: 16px 0; font-weight: 800; cursor: pointer; }
.settings-box[open] { padding-bottom: 20px; }
.two-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.panel h4 { font-size: 16px; margin-bottom: 12px; }
.two-forms .panel { margin: 0; }
.two-forms .btn { align-self: flex-start; }
.mobile-logout { margin-top: 16px; }

/* ════════════════ 관리자 ════════════════ */
.admin-nav { display: flex; gap: 4px; margin-bottom: 24px; background: var(--bg-2); padding: 4px; border-radius: 10px; overflow-x: auto; scrollbar-width: none; }
.admin-nav a { padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; color: var(--text-2); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.admin-nav a.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.nav-badge { font-style: normal; background: #ff4d4f; color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; background: var(--surface); }
.stat small { color: var(--muted); font-weight: 600; }
.stat strong { display: block; font-size: 26px; font-weight: 900; }
.stat em { font-style: normal; font-size: 12px; color: var(--green-dark); font-weight: 700; }
.stat.alert { border-color: #ff4d4f; }
.stat.alert strong { color: #ff4d4f; }
.grade-dist { display: flex; flex-wrap: wrap; gap: 12px; }
.gd-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.gd-item:hover { border-color: var(--text); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 24px; background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 12px; background: var(--bg-2); white-space: nowrap; }
.table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.table td.wrap { white-space: normal; max-width: 420px; word-break: break-word; }
.table.compact td { padding: 8px; white-space: normal; }
.table a:hover { text-decoration: underline; }
.row-banned td { background: var(--danger-soft); }
.t-thumb { width: 52px; }
.t-thumb img, .t-thumb .thumb-placeholder { width: 40px; height: 52px; object-fit: cover; border-radius: 4px; font-size: 16px; }
.t-thumb.wide img, .t-thumb.wide .thumb-placeholder { width: 64px; height: 40px; }
.t-actions { text-align: right; }
.form-panel h3 { font-size: 18px; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.sticky-actions { position: sticky; bottom: calc(var(--tabbar-h)); background: var(--bg); padding: 12px 0; z-index: 5; }
.drop { position: relative; display: block; border: 2px dashed var(--line-2); border-radius: 12px; background: var(--bg-2); cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--green); background: var(--green-soft); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop-thumb { aspect-ratio: 3 / 4; overflow: hidden; }
.drop-thumb.drop-wide { aspect-ratio: 16 / 10; }
.drop-ad { height: 140px; overflow: hidden; }
.drop-ad .drop-preview img { object-fit: contain; }
.drop-preview { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 14px; font-weight: 600; }
.drop-preview img { width: 100%; height: 100%; object-fit: cover; }
.drop-images { padding: 24px; }
.drop-msg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text-2); font-size: 14px; font-weight: 400; }
.drop-msg strong { font-size: 15px; color: var(--text); }
.multi-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 16px; }
.multi-preview:empty { display: none; }
.multi-preview figure, .current-images figure { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--line); }
.multi-preview img, .current-images img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.multi-preview figcaption, .current-images figcaption { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.multi-preview .summary { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); font-weight: 600; }
.current-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.upload-progress { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.upload-progress span { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 14px 16px; background: var(--danger-soft); border-radius: 10px; font-size: 13px; color: var(--danger); flex-wrap: wrap; }
.dz-input { display: flex; gap: 6px; }
.dz-input input { height: 32px; border: 1px solid var(--line-2); border-radius: 6px; padding: 0 10px; background: var(--input); }
.admin-wt-head { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.aw-thumb { width: 90px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.aw-thumb img, .aw-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; }
.admin-wt-head h2 { font-size: 24px; }
.admin-wt-head p { margin: 4px 0 12px; }
.breadcrumb { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.breadcrumb a { color: var(--text); font-weight: 600; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar input { flex: 1; min-width: 160px; height: 40px !important; }
.filter-bar select { height: 40px !important; }
.user-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-form select, .user-form input { height: 32px !important; padding: 0 8px !important; font-size: 13px !important; }
.w-num { width: 84px; }
.w-reason { width: 120px; }
.w-icon { width: 52px; text-align: center; }
.w-name { width: 150px; }
.w-desc { flex: 1; min-width: 160px; }
.board-admin { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.ba-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ba-row input, .ba-row select { height: 36px !important; font-size: 14px !important; padding: 0 10px !important; }
.mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ad-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.adc-preview { position: relative; height: 120px; background: var(--bg-2); display: grid; place-items: center; overflow: hidden; }
.adc-preview img { max-height: 100%; width: 100%; object-fit: contain; }
.adc-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 12px; }
.adc-status { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #fff; }
.st-live { background: var(--green); } .st-wait { background: var(--g4); } .st-end { background: #666; } .st-off { background: #999; }
.adc-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.adc-body p { margin: 0; }
.adc-name { font-weight: 800; }
.adc-stats { display: flex; gap: 14px; font-size: 13px; color: var(--muted); padding: 6px 0; }
.adc-stats strong { color: var(--text); }
.adc-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.switch { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: 999px; border: 0; background: var(--line-2); color: var(--text-2); font-size: 11px; font-weight: 800; cursor: pointer; }
.switch span { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch.on { background: var(--green); color: #fff; flex-direction: row-reverse; padding: 0 4px 0 10px; }
.kind-panel { display: none; }
.text-ad-preview { height: 46px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; }
.report-list { display: flex; flex-direction: column; gap: 12px; }
.report { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface); }
.rp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rp-content { margin: 0 0 6px; font-size: 15px; word-break: break-word; }
.rp-content a:hover { text-decoration: underline; }
.rp-actions { margin-top: 10px; }
.grade-settings { display: grid; gap: 8px; margin-top: 12px; }
.gs-item { display: flex; align-items: center; gap: 12px; }
.gs-item input { height: 38px !important; }
.gs-item > input { width: 140px; }
.gs-item .mini input { width: 110px; }

/* ════════════════ 푸터 / 하단 탭바 ════════════════ */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 32px 0; font-size: 13px; color: var(--text-2); }
.footer p { margin: 4px 0; }
.footer-logo { font-weight: 900; font-size: 16px; color: var(--text); }
.footer-links a { margin-right: 14px; font-weight: 600; }
.footer-grade { margin-right: 10px; }
.tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 700; color: var(--muted); }
.tabbar a.on { color: var(--text); }
.tabbar a.on svg { color: var(--green); }

/* ════════════════ 반응형 ════════════════ */
@media (max-width: 1000px) {
  .two-col { grid-template-columns: 1fr; }
  .cafe { grid-template-columns: 180px 1fr; gap: 20px; }
  .pt-head, .pt-row { grid-template-columns: 1fr 110px 70px 48px 48px; }
}
@media (max-width: 900px) {
  .hero { height: 280px; }
  .hero-content { padding: 0 32px; }
  .hero h2 { font-size: 28px; }
  .hero-thumb { height: 220px; }
  .hero-dots { left: 32px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --tabbar-h: 60px; }
  .only-pc { display: none !important; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); font-size: 14px; }
  .container { padding: 0 16px; }
  .main { padding-top: 16px; }
  .gnb-top { gap: 8px; height: 54px; }
  .logo { font-size: 18px; }
  .logo-mark { width: 26px; height: 26px; font-size: 15px; }
  .search { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .user-chip .nick { display: none; }
  .gnb-nav .container { gap: 20px; height: 42px; }
  .gnb-nav a { font-size: 15px; }
  .hero { height: 220px; border-radius: 12px; margin-bottom: 20px; }
  .hero-content { padding: 0 20px; }
  .hero-thumb, .hero-desc, .hero-nav { display: none; }
  .hero h2 { font-size: 24px; }
  .hero-dots { left: 20px; }
  .ad-slot { margin-bottom: 20px; }
  .ad.ad-text { padding: 14px 16px; }
  .ad.ad-text strong { font-size: 15px; }
  .ad-top_strip .ad.ad-text { padding: 9px 40px; }
  .ad-top_strip .ad.ad-text .ad-copy { flex-direction: column; gap: 0; }
  .ad-top_strip .ad.ad-text strong { font-size: 13px; }
  .ad-top_strip .ad-label { display: none; }
  .gnb-nav { display: none; }
  .home-list { margin-left: -16px; margin-right: -16px; }
  .home-list > .sort-row, .home-list > .tab-panel { padding: 0 16px; }
  .list-tabs { position: sticky; top: 54px; z-index: 30; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--bg); overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 0 8px; margin-bottom: 10px; }
  .list-tabs::-webkit-scrollbar { display: none; }
  .list-tabs button { flex: 0 0 auto; height: 48px; padding: 0 12px; border: 0; font-size: 17px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
  .list-tabs button.on { background: none; color: var(--text); font-weight: 800; border-bottom-color: var(--text); }
  .list-tabs button em { display: none; }
  .list-tabs .dot { top: 12px; right: 4px; }
  .sort-row { margin-bottom: 12px; }
  .grid { gap: 22px 8px; }
  .card-thumb { aspect-ratio: 10 / 13; border-radius: 4px; }
  .card-title { font-size: 14px; font-weight: 600; margin-top: 2px; }
  .card-sub { font-size: 12px; }
  .card-meta { display: none; }
  .badge-circle { width: 30px; height: 30px; font-size: 10px; }
  .filter-group { gap: 8px; }
  .fg-label { width: 44px; font-size: 12px; }
  .search-big select { height: 48px; }
  .search-big { gap: 6px; }
  .search-big input { height: 48px !important; font-size: 15px !important; min-width: 0; }
  .search-big .btn { height: 48px; padding: 0 14px; }
  .day-tabs { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .day-tabs button { height: 44px; font-size: 14px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 8px; }
  .grid-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-title { font-size: 13px; }
  .card-author, .card-meta { font-size: 11px; }
  .card-rank { font-size: 22px; }
  .continue-card { flex-basis: 104px; }
  .detail-head { flex-direction: column; gap: 20px; }
  .detail-thumb { width: 160px; }
  .detail-info h2 { font-size: 24px; }
  .detail-actions .btn-lg { height: 44px; padding: 0 16px; font-size: 15px; }
  .ep-thumb { width: 96px; }
  .auth-box { border: 0; padding: 16px 0; background: transparent; }
  .two-forms, .form-grid, .row-3, .row-2 { grid-template-columns: 1fr; }
  .row-4 { grid-template-columns: 1fr 1fr; }
  .span-2 { grid-column: auto; }
  .thumb-field { max-width: 200px; }
  .grade-meter small { font-size: 10px; }
  .gm-step em { display: none; }
  .danger-zone { flex-direction: column; align-items: flex-start; }
  .my-head { flex-wrap: wrap; gap: 14px; }
  .my-avatar { width: 56px; height: 56px; font-size: 24px; }
  .my-attend { width: 100%; }
  /* 커뮤니티: 사이드바 → 가로 스크롤 메뉴 */
  .cafe { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cafe-side { position: static; }
  .cafe-menu { flex-direction: row; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 10px; margin: 0 -16px 14px; padding-left: 16px; padding-right: 16px; gap: 6px; scrollbar-width: none; }
  .cafe-menu::-webkit-scrollbar { display: none; }
  .cafe-menu a { flex-shrink: 0; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
  .cafe-menu a.on { border-color: var(--green); }
  .cafe-menu em, .cafe-menu .lock { margin-left: 2px; }
  .board-head h2 { font-size: 19px; }
  .pt-row { grid-template-columns: auto auto auto 1fr; grid-template-areas: "t t t t" "a d v l"; gap: 4px 10px; padding: 12px 2px; }
  .pt-row .c-num:last-child { text-align: left; }
  .pt-row .c-title { grid-area: t; font-size: 15px; }
  .pt-row .c-author { grid-area: a; }
  .pt-row .c-date { grid-area: d; text-align: left; }
  .pt-row .c-num { text-align: left; }
  .board-search input { width: auto; flex: 1; }
  .post-title { font-size: 20px; }
  .pc.reply { padding-left: 24px; }
  .att-list li { flex-wrap: wrap; }
  .att-msg { flex-basis: 100%; order: 5; padding-left: 36px; }
  /* 관리자 */
  .stat strong { font-size: 22px; }
  .ad-cards { grid-template-columns: 1fr; }
  .w-desc { min-width: 100%; }
  .gs-item { flex-wrap: wrap; }
  .gs-item > input { width: 110px; }
  .panel { padding: 16px; }
  .seg { flex-wrap: wrap; }
  .form input, .form select { min-width: 0; max-width: 100%; }
  .form label { min-width: 0; }
  .toast { bottom: calc(var(--tabbar-h) + 80px); }
  /* 뷰어 */
  .viewer-body { padding-bottom: 0; }
  .vb-ep-title { display: none; }
  .vbb-btn { padding: 0 8px; font-size: 15px; }
  .vbb-right { gap: 4px; }
  .ad-viewer_sticky .ad img { max-height: 60px; }
  .ad-viewer_sticky .ad.ad-text { padding: 10px 44px 10px 14px; }
  .ad-viewer_sticky .ad.ad-text strong { font-size: 13px; }
  .ad-viewer_sticky .ad.ad-text small { font-size: 11px; }
  .comments { padding: 20px 14px; }
}

/* ════════════════ 작품 상세 (레퍼런스형) ════════════════ */
.page-detail { overflow-x: clip; --wt-sticky: 113px; }
.page-detail .main { padding-top: 0; }
.wt-hero { position: relative; margin: 0 calc(50% - 50vw); padding: 64px 0 0; --wt-accent: var(--wt-color, var(--green)); }
.wt-band { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: var(--wt-color, #333); overflow: hidden; }
.wt-band.auto { background: #222; }
.wt-band-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.4) brightness(.7); transform: scale(1.2); }
.wt-topbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(12px, calc(50vw - 600px)); z-index: 5; color: #fff; }
.wt-top-actions { display: flex; align-items: center; gap: 4px; }
.wt-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; }
.wt-icon:hover { background: rgba(255,255,255,.12); }
.wt-fav-top { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; background: none; color: #fff; font-size: 17px; font-weight: 600; cursor: pointer; }
.wt-fav-top .plus, .wt-fav-pill .plus, .rel-fav .plus { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; font-size: 14px; font-weight: 800; line-height: 1; }
.wt-fav-pill .plus { border: 0; width: auto; font-size: 18px; }
.wt-cover-wrap { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 24px; }
.wt-cover { position: relative; aspect-ratio: 2 / 1; border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.wt-cover > img { width: 100%; height: 100%; object-fit: cover; }
.wt-cover-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(22px) brightness(.75); transform: scale(1.15); }
.wt-cover-thumb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 86%; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.wt-cover-thumb img, .wt-cover-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; }
.wt-fav-pill { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--wt-accent); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.35); white-space: nowrap; }
.wt-fav-pill.on, .wt-fav-top.on { opacity: .92; }
.wt-fav-pill.pop { animation: pop .3s ease; }
.wt-info { padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
.wt-info h1 { font-size: 26px; font-weight: 800; }
.wt-author { margin: 6px 0 10px; color: var(--text-2); font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wt-author a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.wt-desc { position: relative; display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); }
.wt-desc p { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-desc.open p { white-space: pre-line; }
.wt-desc-toggle { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; transition: transform .2s; }
.wt-desc.open .wt-desc-toggle { transform: rotate(180deg); }
.wt-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; align-items: center; }
.wt-tags .hash { color: var(--green-dark); font-size: 14px; font-weight: 600; }
.wt-stats { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.wt-tabs { position: sticky; top: var(--wt-sticky); z-index: 30; display: flex; background: var(--bg); border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.wt-tabs button { flex: 1; height: 54px; border: 0; background: none; font-size: 17px; font-weight: 600; color: var(--muted); cursor: pointer; position: relative; }
.wt-tabs button.on { color: var(--text); font-weight: 800; }
.wt-tabs button.on::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px; width: 64px; height: 3px; background: var(--text); }
.wt-panel { padding-bottom: 90px; }
.wt-list-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 12px; border-bottom: 1px solid var(--line); }
.wt-sort { font-size: 14px; font-weight: 700; color: var(--text-2); }
.wt-panel .episode-list { border-top: 0; }
.ep-check { color: var(--green); flex-shrink: 0; }
.wt-preview-card { background: var(--bg-2); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.wt-preview-card p { margin: 0 0 4px; }
.wt-preview-imgs { position: relative; max-width: 720px; margin: 0 auto; user-select: none; }
.wt-preview-imgs img { width: 100%; }
.wt-preview-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, var(--bg)); }
.rel-title { font-size: 19px; font-weight: 800; line-height: 1.4; margin: 4px 0 16px; }
.rel-title span { font-weight: 500; }
.rel-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.rel-list li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rel-thumb { position: relative; width: 110px; flex-shrink: 0; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; }
.rel-thumb img, .rel-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; }
.rel-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 7px; }
.rel-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.rel-match { margin: 0; color: var(--green-dark); font-size: 14px; font-weight: 600; }
.rel-name { font-size: 17px; font-weight: 700; }
.rel-tags { margin: 0; color: var(--muted); font-size: 13px; }
.rel-fav { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px; border: 1px solid var(--green); border-radius: 999px; background: none; color: var(--green-dark); font-weight: 700; cursor: pointer; }
.rel-fav .plus { border: 0; width: auto; font-size: 16px; }
.rel-fav.on { background: var(--green-soft); }
.rel-sub { font-size: 17px; font-weight: 600; margin: 8px 0 14px; }
.wt-cta { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 18px); z-index: 45; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px 0 6px; border-radius: 999px; background: var(--wt-cta, var(--green)); color: #fff; font-size: 18px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.35); white-space: nowrap; }
.wt-cta.dark { background: #2a2b31; }
.wt-cta-thumb { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(255,255,255,.6); }
.wt-cta-thumb img, .wt-cta-thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; font-size: 16px; }
.wt-cta .chev { font-size: 22px; line-height: 1; }
.drop-cover { aspect-ratio: 2 / 1; max-width: 420px; overflow: hidden; }
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type=color] { width: 64px !important; }
@media (max-width: 640px) {
  .page-detail { --wt-sticky: 0px; }
  .page-detail .gnb, .page-detail .ad-top_strip { display: none; }
  .wt-hero { padding-top: 60px; }
  .wt-cover-wrap { padding: 0 24px; }
  .wt-cover { aspect-ratio: 2 / 1.25; }
  .wt-fav-pill { height: 40px; font-size: 15px; padding: 0 18px; }
  .wt-info h1 { font-size: 22px; }
  .wt-author { font-size: 14px; }
  .wt-tabs { margin: 0 -16px 14px; }
  .wt-tabs button { font-size: 16px; height: 50px; }
  .rel-list { grid-template-columns: minmax(0, 1fr); }
  .rel-thumb { width: 96px; }
  .wt-cta { height: 50px; font-size: 16px; padding-right: 22px; }
  .wt-cta-thumb { width: 38px; height: 38px; }
}

/* ════════════════ 저장소 관리 ════════════════ */
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.storage-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin-bottom: 24px; }
.st-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.st-card.full { border-color: var(--g4); }
.st-card.err { border-color: var(--danger); }
.st-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-head strong { font-size: 15px; }
.st-type { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--g3); }
.st-type.st-local { background: #455a64; } .st-type.st-s3 { background: #ff9800; } .st-type.st-node { background: #3f51b5; } .st-type.st-url { background: #8e24aa; }
.st-pri { font-size: 11px; color: var(--muted); }
.st-state { margin-left: auto; font-size: 12px; font-weight: 800; }
.st-state.on { color: var(--green-dark); } .st-state.off { color: var(--muted); } .st-state.f { color: var(--g4); } .st-state.e { color: var(--danger); }
.st-where { margin: 0; word-break: break-all; }
.st-usage p { margin: 6px 0 0; }
.bar span.hot { background: var(--danger); }
.st-error { margin: 0; font-size: 13px; color: var(--danger); word-break: break-word; }
.st-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); margin-top: auto; }
.migrate-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.migrate-form select, .migrate-form input { height: 36px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--input); padding: 0 10px; }
.migrate-form input { width: 150px; }
.mt-sm { margin-top: 14px; }
.img-source { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.inline-label { flex-direction: row !important; align-items: center; gap: 8px !important; }
.inline-label select { height: 40px !important; }
code { background: var(--bg-2); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
@media (max-width: 640px) { .storage-cards { grid-template-columns: 1fr; } }

/* ════════════════ 프로필 / 내 정보 수정 ════════════════ */
.avatar { display: inline-block; border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle; background: var(--bg-2); }
.avatar-text { display: inline-grid; place-items: center; color: #fff; font-weight: 800; background: hsl(var(--h, 145) 55% 48%); line-height: 1; }
.author .avatar { margin-right: 2px; }
.user-chip .avatar { box-shadow: 0 0 0 1px var(--line); }
.my-avatar-wrap { position: relative; flex-shrink: 0; display: inline-block; }
.my-avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--inv); color: var(--inv-text); display: grid; place-items: center; font-size: 13px; border: 2px solid var(--bg); }
.my-edit-btn { vertical-align: middle; margin-left: 6px; }
.my-bio { color: var(--text-2); margin: 6px 0 0; }
.my-links { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 20px; }
.my-links form { margin: 0; }
.my-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; color: var(--text); }
.my-links > :last-child, .my-links > :last-child .my-link { border-bottom: 0; }
.my-link span { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); }
.my-link:hover { background: var(--hover); }
.cm-row .avatar { flex-shrink: 0; }
.cm-bio { margin: 0 0 10px; font-size: 12px; color: var(--text-2); }
.post-bio { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.edit-wrap { max-width: 640px; margin: 0 auto; }
.back-link { display: inline-block; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.edit-title { font-size: 24px; font-weight: 900; margin-bottom: 18px; }
.avatar-field { display: flex; align-items: center; gap: 20px; padding: 6px 0 10px; }
.avatar-preview { flex-shrink: 0; }
.avatar-preview .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line-2); }
.avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.avatar-actions .hint { margin: 0; }
.avatar-pick { cursor: pointer; }
.error-text { color: var(--danger) !important; font-weight: 600; }
.form input:disabled { background: var(--bg-2); color: var(--muted); }
.pw-meter { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin-top: -6px; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; background: var(--danger); }
.pw-meter span[data-level="mid"] { background: var(--g4); }
.pw-meter span[data-level="strong"] { background: var(--green); }
@media (max-width: 640px) {
  .my-edit-btn { display: inline-flex; margin: 6px 0 0; }
  .my-head h2 { font-size: 20px; }
  .avatar-field { gap: 14px; }
}
.u-cell { display: flex; align-items: center; gap: 10px; }
.u-bio { color: var(--text-2); display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 640px) { .my-link span { display: none; } }

/* ════════════════ PC ↔ 모바일 보기 ════════════════ */
.view-switch { display: flex; gap: 14px; margin: 10px 0 4px !important; }
.view-switch a { font-weight: 700; color: var(--text-2); }
.view-switch a.strong { color: var(--green-dark); }
.mv-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-2); }
.mv-bar { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.mv-label { font-weight: 800; color: var(--text-2); }
.mv-controls { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mv-controls select { height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--input); padding: 0 8px; font-size: 13px; }
.mv-controls .icon-btn { font-size: 18px; }
.mv-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
.mv-holder { flex-shrink: 0; position: relative; }
.mv-phone { position: relative; box-sizing: content-box; padding: 14px; border-radius: 44px; background: #111; box-shadow: 0 0 0 2px #333, 0 30px 80px rgba(0,0,0,.35); position: absolute; top: 0; left: 0; transform-origin: top left; }
.mv-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 30px; background: #fff; display: block; }
.mv-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; border-radius: 12px; background: #111; z-index: 2; pointer-events: none; }
.mv-url { margin: 10px 0 0; font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .mv-label, .mv-controls select { display: none; } }

/* ════════════════ 폴더로 회차 올리기 ════════════════ */
.folder-upload h3 small { font-weight: 400; margin-left: 6px; }
.folder-guide { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.fg-tree { display: flex; flex-direction: column; gap: 2px; background: var(--bg-2); border-radius: 10px; padding: 12px 16px; }
.fg-tree code { background: none; padding: 0; font-size: 13px; white-space: nowrap; }
.fg-tree em { font-style: normal; color: var(--green-dark); font-family: inherit; }
.folder-guide ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.5; }
.folder-drop { padding: 28px; }
.folder-preview { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.folder-opts { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.folder-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.folder-opts select { height: 38px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--input); padding: 0 10px; }
.folder-count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--green-dark); }
.folder-table td { vertical-align: middle; }
.folder-table tr.off td { opacity: .5; }
.folder-table input:not([type=checkbox]) { height: 34px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--input); padding: 0 8px; font-size: 14px; }
.folder-table .w-num { width: 70px; }
.folder-table .w-title { width: 220px; }
.ft-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; }
.ft-pages { display: flex; align-items: center; gap: 8px; }
.ft-page { width: 32px; height: 44px; object-fit: cover; object-position: top; border-radius: 3px; }
.ft-folder { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.folder-table .ok { color: var(--green-dark); font-weight: 700; }
.folder-table .warn { color: var(--g4); font-weight: 700; white-space: normal; }
.folder-table .ing { color: var(--g2); font-weight: 700; }

.folder-table tr.done td { background: var(--green-soft); }
.auto-toggle { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; flex-direction: row !important; align-self: center; }