/* ═══════════════════════════════════════════════════════════════
   webtoon.css
   미스테리아 타임즈 — 웹툰 연재관 전용 스타일시트
   style.css 의 디자인 토큰을 100% 계승하여 작성됨.
   이 파일은 webtoon.html 에서 style.css 다음에 로드됩니다.
═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────
   0. 유틸리티
─────────────────────────────────────────────────── */
.wt-no-scroll { overflow: hidden !important; }

/* ───────────────────────────────────────────────────
   1. 웹툰관 매스트헤드
─────────────────────────────────────────────────── */
.wt-masthead {
  background-color : var(--paper);
  border-bottom    : 3px double var(--ink);
  text-align       : center;
  padding          : 2.5rem 1rem 1.5rem;
}

.wt-masthead-title {
  font-family  : var(--font-display);
  font-size    : clamp(2rem, 6vw, 3.6rem);
  font-weight  : 900;
  color        : var(--ink);
  letter-spacing: .04em;
  line-height  : 1.1;
  margin       : .4rem 0 .6rem;
}

/* ───────────────────────────────────────────────────
   2. 메인 레이아웃
─────────────────────────────────────────────────── */
.wt-main {
  max-width  : 1200px;
  margin     : 0 auto;
  padding    : 2rem 1.5rem 4rem;
}

/* ───────────────────────────────────────────────────
   3. 탭 바 (카테고리 필터)
─────────────────────────────────────────────────── */
.wt-tab-bar {
  display         : flex;
  gap             : .4rem;
  flex-wrap       : wrap;
  border-bottom   : 2px solid var(--ink);
  padding-bottom  : 0;
  margin-bottom   : 2rem;
  position        : sticky;
  top             : 60px;   /* site-nav 높이 */
  background      : var(--paper);
  z-index         : 90;
  padding-top     : .6rem;
}

.wt-tab {
  font-family     : var(--font-serif);
  font-size       : .88rem;
  font-weight     : 700;
  color           : var(--ink-light);
  background      : transparent;
  border          : 1px solid transparent;
  border-bottom   : 3px solid transparent;
  padding         : .55rem 1.2rem .5rem;
  cursor          : pointer;
  letter-spacing  : .03em;
  transition      : color .2s, border-color .2s, background .2s;
  position        : relative;
  bottom          : -2px;
}

.wt-tab:hover {
  color        : var(--ink);
  border-color : var(--gold);
}

.wt-tab.active {
  color           : var(--ink);
  border-color    : var(--ink);
  border-bottom   : 3px solid var(--red);
  background      : var(--paper);
}

/* ───────────────────────────────────────────────────
   4. 패널 (탭 콘텐츠 영역)
─────────────────────────────────────────────────── */
.wt-panel {
  display : none;
}
.wt-panel.active {
  display : block;
  animation: wt-fade-in .3s ease;
}

@keyframes wt-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ───────────────────────────────────────────────────
   5. 섹션 헤더 (공통)
─────────────────────────────────────────────────── */
.wt-section-header {
  text-align    : center;
  margin-bottom : 1.8rem;
}

.wt-short-subtitle {
  font-family  : var(--font-serif);
  font-size    : .88rem;
  color        : var(--ink-light);
  line-height  : 1.7;
  margin-top   : .4rem;
}

/* ───────────────────────────────────────────────────
   6. 장편 연재 — 작품 히어로 배너
─────────────────────────────────────────────────── */
.wt-series-hero {
  display          : grid;
  grid-template-columns: 220px 1fr;
  gap              : 2.5rem;
  align-items      : start;
  background       : var(--ink);
  color            : var(--paper);
  border           : 2px solid var(--gold);
  border-radius    : 4px;
  padding          : 2rem;
  margin-bottom    : 2.5rem;
}

@media (max-width: 680px) {
  .wt-series-hero {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

.wt-series-hero-cover {
  position : relative;
}

.wt-series-hero-cover img {
  width         : 100%;
  aspect-ratio  : 3 / 4;
  object-fit    : cover;
  display       : block;
  border        : 2px solid var(--gold);
  border-radius : 2px;
  background    : #2a2a2a;
}

.wt-series-genre-badge {
  font-family    : var(--font-mono);
  font-size      : .68rem;
  color          : var(--gold);
  letter-spacing : .1em;
  margin-bottom  : .5rem;
}

.wt-series-title {
  font-family    : var(--font-display);
  font-size      : clamp(1.6rem, 4vw, 2.4rem);
  font-weight    : 900;
  color          : var(--paper);
  line-height    : 1.1;
  margin-bottom  : .6rem;
}

.wt-series-author {
  font-family  : var(--font-serif);
  font-size    : .88rem;
  color        : rgba(242,232,213,.7);
  margin-bottom: .6rem;
}

.wt-author-label {
  font-family    : var(--font-mono);
  font-size      : .7rem;
  color          : var(--gold);
  letter-spacing : .08em;
  margin-right   : .3rem;
}

/* 별점 */
.wt-series-rating {
  display      : flex;
  align-items  : center;
  gap          : .3rem;
  margin-bottom: .8rem;
}

.wt-star {
  font-size : 1.2rem;
  color     : var(--gold);
  line-height: 1;
}

.wt-rating-num {
  font-family    : var(--font-display);
  font-size      : 1.5rem;
  font-weight    : 900;
  color          : var(--gold);
  letter-spacing : .02em;
}

.wt-series-desc {
  font-family  : var(--font-serif);
  font-size    : .86rem;
  line-height  : 1.8;
  color        : rgba(242,232,213,.8);
  margin-bottom: 1.2rem;
}

/* CTA 버튼 */
.wt-series-cta {
  display   : flex;
  gap       : .8rem;
  flex-wrap : wrap;
}

.wt-btn-primary {
  font-family    : var(--font-serif);
  font-weight    : 700;
  font-size      : .88rem;
  background     : var(--red);
  color          : #fff;
  border         : 2px solid var(--red);
  padding        : .6rem 1.4rem;
  cursor         : pointer;
  letter-spacing : .04em;
  transition     : background .2s, color .2s;
  border-radius  : 2px;
}
.wt-btn-primary:hover {
  background : #fff;
  color      : var(--red);
}

.wt-btn-ghost {
  font-family    : var(--font-serif);
  font-weight    : 700;
  font-size      : .88rem;
  background     : transparent;
  color          : var(--paper);
  border         : 2px solid rgba(242,232,213,.5);
  padding        : .6rem 1.4rem;
  cursor         : pointer;
  letter-spacing : .04em;
  transition     : border-color .2s, color .2s;
  border-radius  : 2px;
}
.wt-btn-ghost:hover {
  border-color : var(--paper);
  color        : var(--paper);
}

/* ───────────────────────────────────────────────────
   7. 에피소드 정렬 컨트롤
─────────────────────────────────────────────────── */
.wt-ep-controls {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : .6rem;
  padding         : .7rem 0;
  border-top      : 1px solid var(--ink);
  border-bottom   : 1px solid var(--ink);
  margin-bottom   : 1rem;
}

.wt-ep-total {
  font-family    : var(--font-serif);
  font-size      : .86rem;
  color          : var(--ink-light);
  letter-spacing : .02em;
}

.wt-ep-total strong {
  color       : var(--ink);
  font-weight : 700;
}

.wt-ep-sort {
  display : flex;
  gap     : .4rem;
}

.wt-sort-btn {
  font-family    : var(--font-mono);
  font-size      : .72rem;
  padding        : .3rem .8rem;
  background     : transparent;
  color          : var(--ink-light);
  border         : 1px solid var(--ink-light);
  cursor         : pointer;
  letter-spacing : .05em;
  transition     : all .2s;
  border-radius  : 2px;
}
.wt-sort-btn.active,
.wt-sort-btn:hover {
  background : var(--ink);
  color      : var(--paper);
  border-color: var(--ink);
}

/* ───────────────────────────────────────────────────
   8. 에피소드 타임라인 리스트 (한국형)
─────────────────────────────────────────────────── */
.wt-episode-list {
  list-style   : none;
  padding      : 0;
  margin       : 0;
  border-top   : 1px solid rgba(26,26,26,.12);
}

.wt-ep-item {
  display         : grid;
  grid-template-columns: 80px 1fr auto;
  align-items     : center;
  gap             : 1rem;
  padding         : .9rem .6rem;
  border-bottom   : 1px solid rgba(26,26,26,.1);
  cursor          : pointer;
  transition      : background .18s;
}
.wt-ep-item:hover {
  background : rgba(26,26,26,.04);
}

.wt-ep-thumb-wrap {
  flex-shrink : 0;
}

.wt-ep-thumb {
  width         : 80px;
  height        : 56px;
  object-fit    : cover;
  object-position: 50% 42%;
  display       : block;
  border        : 1px solid rgba(26,26,26,.15);
  border-radius : 2px;
  background    : #ddd;
}

.wt-ep-info {
  display        : flex;
  flex-direction : column;
  gap            : .25rem;
}

.wt-ep-num {
  font-family    : var(--font-mono);
  font-size      : .7rem;
  color          : var(--red);
  font-weight    : 700;
  letter-spacing : .06em;
}

.wt-ep-title {
  font-family  : var(--font-serif);
  font-size    : .92rem;
  font-weight  : 600;
  color        : var(--ink);
  line-height  : 1.4;
}

.wt-ep-date {
  font-family : var(--font-mono);
  font-size   : .68rem;
  color       : var(--ink-light);
}

.wt-ep-read-btn {
  font-family    : var(--font-serif);
  font-size      : .78rem;
  font-weight    : 700;
  padding        : .45rem .9rem;
  background     : transparent;
  color          : var(--ink);
  border         : 1px solid var(--ink);
  cursor         : pointer;
  white-space    : nowrap;
  letter-spacing : .03em;
  transition     : all .18s;
  border-radius  : 2px;
  flex-shrink    : 0;
}
.wt-ep-read-btn:hover {
  background : var(--ink);
  color      : var(--paper);
}

@media (max-width: 540px) {
  .wt-ep-item {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
  }
  .wt-ep-thumb { width: 64px; height: 44px; }
  .wt-ep-read-btn {
    grid-column : 1 / -1;
    width       : 100%;
    text-align  : center;
  }
}

/* ───────────────────────────────────────────────────
   9. 장편 연재 — 선반 카드 (all 패널 미리보기)
─────────────────────────────────────────────────── */
.wt-series-shelf {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
  gap                   : 1.4rem;
  margin-bottom         : 1rem;
}

.wt-series-shelf-card {
  cursor      : pointer;
  border      : 1px solid rgba(26,26,26,.15);
  border-radius: 3px;
  overflow    : hidden;
  transition  : transform .2s, box-shadow .2s;
  background  : #fff;
}
.wt-series-shelf-card:hover {
  transform  : translateY(-4px);
  box-shadow : 0 8px 24px rgba(26,26,26,.14);
}

.wt-series-shelf-thumb {
  position : relative;
  overflow : hidden;
}
.wt-series-shelf-thumb img {
  width        : 100%;
  aspect-ratio : 16 / 9;
  object-fit   : cover;
  object-position: 50% 42%;
  display      : block;
  background   : #ddd;
}

.wt-series-shelf-ep-badge {
  position       : absolute;
  top            : .5rem;
  left           : .5rem;
  font-family    : var(--font-mono);
  font-size      : .68rem;
  font-weight    : 700;
  background     : var(--red);
  color          : #fff;
  padding        : .15rem .5rem;
  letter-spacing : .06em;
  border-radius  : 2px;
}

.wt-series-shelf-meta {
  padding : .7rem .8rem;
}
.wt-series-shelf-ep-title {
  font-family  : var(--font-serif);
  font-size    : .86rem;
  font-weight  : 600;
  color        : var(--ink);
  line-height  : 1.4;
  margin-bottom: .25rem;
}
.wt-series-shelf-date {
  font-family : var(--font-mono);
  font-size   : .68rem;
  color       : var(--ink-light);
}

/* ───────────────────────────────────────────────────
   10. 단편 카툰 — 바둑판 그리드 카드
─────────────────────────────────────────────────── */
.wt-short-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
  gap                   : 1.4rem;
}

.wt-short-card {
  cursor        : pointer;
  border        : 1px solid rgba(26,26,26,.15);
  border-radius : 3px;
  overflow      : hidden;
  background    : #fff;
  transition    : transform .2s, box-shadow .2s;
}
.wt-short-card:hover {
  transform  : translateY(-4px);
  box-shadow : 0 8px 24px rgba(26,26,26,.14);
}

.wt-short-card-thumb {
  position : relative;
  overflow : hidden;
}
.wt-short-card-thumb img {
  width        : 100%;
  aspect-ratio : 1 / 1;
  object-fit   : cover;
  display      : block;
  background   : #ddd;
  transition   : transform .3s;
}
.wt-short-card:hover .wt-short-card-thumb img {
  transform : scale(1.05);
}

.wt-short-card-overlay {
  position         : absolute;
  inset            : 0;
  background       : rgba(26,26,26,.55);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  opacity          : 0;
  transition       : opacity .25s;
}
.wt-short-card:hover .wt-short-card-overlay {
  opacity : 1;
}

.wt-short-card-btn {
  font-family    : var(--font-serif);
  font-weight    : 700;
  font-size      : .88rem;
  color          : #fff;
  border         : 2px solid #fff;
  padding        : .45rem 1.1rem;
  letter-spacing : .04em;
  border-radius  : 2px;
}

.wt-short-card-meta {
  padding : .65rem .8rem;
}
.wt-short-card-title {
  font-family  : var(--font-serif);
  font-size    : .86rem;
  font-weight  : 600;
  color        : var(--ink);
  line-height  : 1.4;
  margin-bottom: .2rem;
}
.wt-short-card-date {
  font-family : var(--font-mono);
  font-size   : .66rem;
  color       : var(--ink-light);
}

/* ───────────────────────────────────────────────────
   11. 단편 카툰 — 슬라이더
─────────────────────────────────────────────────── */
.wt-slider-wrap {
  margin-bottom : 2rem;
}

.wt-slider-label {
  font-family    : var(--font-mono);
  font-size      : .72rem;
  color          : var(--teal);
  letter-spacing : .1em;
  margin-bottom  : .7rem;
}

.wt-slider {
  display   : flex;
  align-items: center;
  gap       : .5rem;
  position  : relative;
}

.wt-slider-track-wrap {
  flex     : 1;
  overflow : hidden;
}

.wt-slider-track {
  display    : flex;
  gap        : 16px;
  transition : transform .35s cubic-bezier(.4,0,.2,1);
}

.wt-slider-card {
  flex-shrink   : 0;
  width         : 220px;
  border        : 1px solid rgba(26,26,26,.15);
  border-radius : 3px;
  overflow      : hidden;
  background    : #fff;
  cursor        : pointer;
  transition    : transform .2s, box-shadow .2s;
}
.wt-slider-card:hover {
  transform  : translateY(-3px);
  box-shadow : 0 6px 18px rgba(26,26,26,.12);
}

.wt-slider-card-thumb img {
  width        : 100%;
  aspect-ratio : 16 / 9;
  object-fit   : cover;
  display      : block;
  background   : #ddd;
}

.wt-slider-card-title {
  font-family  : var(--font-serif);
  font-size    : .84rem;
  font-weight  : 600;
  color        : var(--ink);
  padding      : .5rem .7rem .2rem;
  line-height  : 1.4;
}
.wt-slider-card-date {
  font-family : var(--font-mono);
  font-size   : .66rem;
  color       : var(--ink-light);
  padding     : 0 .7rem .6rem;
}

/* 슬라이더 화살표 버튼 */
.wt-slider-prev,
.wt-slider-next {
  flex-shrink    : 0;
  width          : 36px;
  height         : 36px;
  background     : var(--ink);
  color          : var(--paper);
  border         : none;
  border-radius  : 50%;
  font-size      : 1.2rem;
  line-height    : 1;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : background .2s, transform .2s;
  z-index        : 2;
}
.wt-slider-prev:hover,
.wt-slider-next:hover {
  background : var(--red);
  transform  : scale(1.1);
}
.wt-slider-prev:disabled,
.wt-slider-next:disabled {
  opacity : .35;
  cursor  : default;
  transform: none;
}

/* ───────────────────────────────────────────────────
   12. 일러스트 — 핀터레스트 갤러리 그리드
─────────────────────────────────────────────────── */
.wt-illust-grid {
  columns          : 3 240px;
  column-gap       : 1.2rem;
}

@media (max-width: 600px) {
  .wt-illust-grid { columns: 2 160px; }
}
@media (max-width: 380px) {
  .wt-illust-grid { columns: 1; }
}

.wt-illust-card {
  break-inside  : avoid;
  margin-bottom : 1.2rem;
  cursor        : pointer;
  position      : relative;
  border        : 1px solid rgba(26,26,26,.12);
  border-radius : 3px;
  overflow      : hidden;
  background    : #f5f5f5;
  transition    : box-shadow .22s;
}
.wt-illust-card:hover {
  box-shadow : 0 10px 30px rgba(26,26,26,.18);
}

.wt-illust-card-img-wrap {
  position : relative;
  overflow : hidden;
}
.wt-illust-card-img-wrap img {
  width      : 100%;
  display    : block;
  object-fit : cover;
  transition : transform .4s ease;
  background : #ddd;
}
.wt-illust-card:hover .wt-illust-card-img-wrap img {
  transform : scale(1.04);
}

/* 호버 오버레이 */
.wt-illust-card-hover {
  position        : absolute;
  inset           : 0;
  background      : linear-gradient(
    to top,
    rgba(26,26,26,.88) 0%,
    rgba(26,26,26,.3)  50%,
    transparent        100%
  );
  display         : flex;
  flex-direction  : column;
  justify-content : flex-end;
  padding         : .9rem .8rem;
  opacity         : 0;
  transition      : opacity .28s;
}
.wt-illust-card:hover .wt-illust-card-hover,
.wt-illust-card:focus .wt-illust-card-hover {
  opacity : 1;
}

.wt-illust-hover-title {
  font-family    : var(--font-display);
  font-size      : .96rem;
  font-weight    : 700;
  color          : #fff;
  line-height    : 1.3;
  margin-bottom  : .2rem;
}
.wt-illust-hover-author {
  font-family : var(--font-serif);
  font-size   : .76rem;
  color       : rgba(255,255,255,.75);
}
.wt-illust-hover-stamp {
  font-family    : var(--font-mono);
  font-size      : .6rem;
  color          : var(--gold);
  letter-spacing : .1em;
  margin-top     : .3rem;
}

/* ───────────────────────────────────────────────────
   13. 라이트박스 팝업
─────────────────────────────────────────────────── */
.wt-lightbox-overlay {
  position         : fixed;
  inset            : 0;
  background       : rgba(10,10,10,.94);
  z-index          : 9000;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  opacity          : 0;
  pointer-events   : none;
  transition       : opacity .3s;
}
.wt-lightbox-overlay.active {
  opacity        : 1;
  pointer-events : auto;
}

.wt-lightbox-inner {
  position  : relative;
  max-width : 90vw;
  max-height: 92vh;
  display   : flex;
  flex-direction: column;
  align-items: center;
}

.wt-lightbox-close {
  position    : fixed;
  top         : 1.2rem;
  right       : 1.4rem;
  width       : 40px;
  height      : 40px;
  background  : rgba(255,255,255,.12);
  color       : #fff;
  border      : 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  font-size   : 1rem;
  cursor      : pointer;
  display     : flex;
  align-items : center;
  justify-content: center;
  z-index     : 10;
  transition  : background .2s;
}
.wt-lightbox-close:hover { background: var(--red); border-color: var(--red); }

.wt-lightbox-prev,
.wt-lightbox-next {
  position    : fixed;
  top         : 50%;
  transform   : translateY(-50%);
  width       : 44px;
  height      : 44px;
  background  : rgba(255,255,255,.1);
  color       : #fff;
  border      : 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  font-size   : 1.4rem;
  cursor      : pointer;
  display     : flex;
  align-items : center;
  justify-content: center;
  transition  : background .2s;
  z-index     : 10;
}
.wt-lightbox-prev { left:  1.2rem; }
.wt-lightbox-next { right: 1.2rem; }
.wt-lightbox-prev:hover,
.wt-lightbox-next:hover { background: var(--teal); border-color: var(--teal); }

.wt-lightbox-figure {
  margin  : 0;
  display : flex;
  flex-direction: column;
  align-items: center;
  max-height: 92vh;
}

.wt-lightbox-img {
  max-width  : 85vw;
  max-height : 78vh;
  object-fit : contain;
  display    : block;
  border     : 2px solid rgba(255,255,255,.15);
  border-radius: 2px;
  background : #111;
}

.wt-lightbox-caption {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : .2rem;
  margin-top      : .9rem;
  text-align      : center;
}

.wt-lightbox-title {
  font-family  : var(--font-display);
  font-size    : 1rem;
  font-weight  : 700;
  color        : #fff;
}
.wt-lightbox-author {
  font-family : var(--font-serif);
  font-size   : .8rem;
  color       : rgba(255,255,255,.65);
}
.wt-lightbox-stamp {
  font-family    : var(--font-mono);
  font-size      : .62rem;
  color          : var(--gold);
  letter-spacing : .12em;
  margin-top     : .1rem;
}

/* ───────────────────────────────────────────────────
   14. 웹툰 뷰어 모달 (세로 스크롤 리더)
─────────────────────────────────────────────────── */
.wt-viewer-overlay {
  position        : fixed;
  inset           : 0;
  background      : #0d0d0d;
  z-index         : 9100;
  display         : flex;
  flex-direction  : column;
  opacity         : 0;
  pointer-events  : none;
  transition      : opacity .25s;
}
.wt-viewer-overlay.active {
  opacity        : 1;
  pointer-events : auto;
}

.wt-viewer-inner {
  display        : flex;
  flex-direction : column;
  height         : 100%;
  overflow       : hidden;
}

/* 뷰어 상단 바 */
.wt-viewer-topbar {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : .6rem;
  padding         : .7rem 1.2rem;
  background      : rgba(0,0,0,.9);
  border-bottom   : 1px solid rgba(255,255,255,.1);
  flex-shrink     : 0;
  z-index         : 2;
}

.wt-viewer-close {
  font-family    : var(--font-mono);
  font-size      : .78rem;
  color          : rgba(255,255,255,.7);
  background     : transparent;
  border         : 1px solid rgba(255,255,255,.2);
  padding        : .35rem .8rem;
  cursor         : pointer;
  letter-spacing : .06em;
  border-radius  : 2px;
  transition     : all .18s;
}
.wt-viewer-close:hover {
  background   : var(--red);
  border-color : var(--red);
  color        : #fff;
}

.wt-viewer-ep-label {
  font-family    : var(--font-serif);
  font-size      : .88rem;
  font-weight    : 600;
  color          : rgba(255,255,255,.85);
  flex           : 1;
  text-align     : center;
}

.wt-viewer-nav {
  display : flex;
  gap     : .5rem;
}

.wt-viewer-prev-ep,
.wt-viewer-next-ep {
  font-family    : var(--font-mono);
  font-size      : .72rem;
  padding        : .35rem .8rem;
  background     : transparent;
  color          : rgba(255,255,255,.65);
  border         : 1px solid rgba(255,255,255,.2);
  cursor         : pointer;
  letter-spacing : .05em;
  border-radius  : 2px;
  transition     : all .18s;
  white-space    : nowrap;
}
.wt-viewer-prev-ep:hover,
.wt-viewer-next-ep:hover {
  background   : var(--teal);
  border-color : var(--teal);
  color        : #fff;
}
.wt-viewer-prev-ep:disabled,
.wt-viewer-next-ep:disabled {
  opacity : .3;
  cursor  : default;
}

/* 뷰어 스크롤 영역 */
.wt-viewer-scroll {
  flex       : 1;
  overflow-y : auto;
  overflow-x : hidden;
  background : #111;
  scroll-behavior: smooth;
}

.wt-viewer-slice {
  display    : block;
  line-height: 0;
}
.wt-viewer-slice img {
  width      : 100%;
  max-width  : 800px;
  display    : block;
  margin     : 0 auto;
  background : #1a1a1a;
}

/* 뷰어 하단 바 */
.wt-viewer-bottombar {
  display          : flex;
  justify-content  : center;
  gap              : 1rem;
  padding          : .9rem 1.2rem;
  background       : rgba(0,0,0,.9);
  border-top       : 1px solid rgba(255,255,255,.1);
  flex-shrink      : 0;
}

/* ───────────────────────────────────────────────────
   15. 반응형 보정
─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wt-main { padding: 1.5rem 1rem 3rem; }

  .wt-tab-bar { top: 52px; }

  .wt-tab {
    font-size : .78rem;
    padding   : .45rem .8rem .4rem;
  }

  .wt-viewer-topbar {
    padding : .5rem .8rem;
  }
  .wt-viewer-ep-label {
    width      : 100%;
    text-align : center;
    order      : -1;
    font-size  : .78rem;
  }

  .wt-lightbox-img {
    max-width  : 95vw;
    max-height : 70vh;
  }

  .wt-slider-card { width: 180px; }
}

@media (max-width: 480px) {
  .wt-short-grid {
    grid-template-columns : repeat(2, 1fr);
    gap                   : .8rem;
  }

  .wt-series-shelf {
    grid-template-columns : repeat(2, 1fr);
    gap                   : .8rem;
  }

  .wt-ep-controls { flex-direction: column; align-items: flex-start; }
}
/* Everyday Toon: one published page at a time, completed stories as a list. */
#shortSliderTrack .wt-slider-card { flex: 0 0 100%; min-width: 0; }
#shortSliderTrack .wt-slider-card-thumb { height: auto; aspect-ratio: auto; }
#shortSliderTrack .wt-slider-card-thumb img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; display: block; }
#shortSlider { max-width: 680px; margin-inline: auto; }
#shortSlider .wt-slider-track-wrap { min-width: 0; }
#shortSlider button:disabled { opacity: .3; cursor: default; }
.wt-completed-list { list-style: none; padding: 0; margin: 0; }
.wt-completed-list li { border-bottom: 1px solid var(--ink-light, #aaa); }
.wt-completed-story { width: 100%; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wt-completed-story span:last-child { font-size: .85em; }
.wt-completed-empty { padding: 1.5rem 0; }
@media (max-width: 600px) { .wt-completed-story { flex-direction: column; gap: .5rem; } }