/* ═══════════════════════════════════════════════════════════
   원피스 진도 체크 · 공통 스타일
   모바일 safe-area / 반응형 헤더 대응 버전
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

html {
  overflow-x: hidden;
  background: var(--deep);
}

body {
  font-family: "Noto Sans KR", sans-serif;
  background: var(--deep);
  color: var(--text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.tile {
  user-select: none;
}


/* ═══════════════════════════════════════════════════════════
   상단 진도 선
   ═══════════════════════════════════════════════════════════ */

.topline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.14);
  z-index: 50;
}

.topline span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sea-bright);
  box-shadow: 0 0 14px rgba(53,189,240,.85);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}


/* ═══════════════════════════════════════════════════════════
   상세 페이지 공통 헤더
   ═══════════════════════════════════════════════════════════ */

.header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--header-h);

  padding: 0 18px;

  z-index: 40;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(6,21,28,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(255,255,255,.06);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
}

.control-btn,
.totalpill {
  height: var(--pill-h);
  padding: 0 16px;

  border-radius: 99px;

  background: rgba(2,20,28,.7);
  border: 1px solid rgba(255,255,255,.16);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: .78rem;
  font-weight: 700;

  color: var(--muted);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  letter-spacing: -.01em;
  white-space: nowrap;

  flex: none;
}

.control-btn {
  transition: .2s;
  cursor: pointer;
}

.control-btn:hover {
  border-color: var(--sea-bright);
  color: var(--sea-bright);
}

.totalpill {
  cursor: default;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

.totalpill b {
  font-size: .85rem;
  font-weight: 800;
  color: var(--sea-bright);
  margin-left: 6px;
  letter-spacing: -.03em;
}


/* ═══════════════════════════════════════════════════════════
   manga.html 등에서 사용하는 .bar 헤더
   기존 HTML과의 호환성을 위해 함께 관리
   ═══════════════════════════════════════════════════════════ */

header:has(.bar) {
  position: relative;
  z-index: 40;
}

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--header-h);

  padding: 0 18px;

  z-index: 40;

  display: flex;
  align-items: center;

  gap: 12px;

  background: rgba(6,21,28,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(255,255,255,.06);

  min-width: 0;
}

.bar > div {
  min-width: 0;
}

.bar .back {
  flex: none;
}

.bar .spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.htitle {
  min-width: 0;

  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: -.025em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hpct {
  font-size: .9rem;
  font-weight: 800;
  line-height: 1;

  color: var(--sea-bright);

  font-variant-numeric: tabular-nums;
}

.hsub {
  margin-top: 3px;

  font-size: .68rem;
  line-height: 1;

  color: var(--muted);

  font-variant-numeric: tabular-nums;

  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   공통 뒤로가기 버튼
   ═══════════════════════════════════════════════════════════ */

.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: var(--pill-h);

  padding: 0 13px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px;

  background: rgba(2,20,28,.7);

  color: var(--muted);

  font-size: .76rem;
  font-weight: 700;

  white-space: nowrap;

  flex: none;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.back:hover {
  color: var(--sea-bright);
  border-color: var(--sea-bright);
  background: rgba(53,189,240,.08);
}


/* ═══════════════════════════════════════════════════════════
   INDEX.HTML 전용 스타일
   헤더가 없는 페이지
   ═══════════════════════════════════════════════════════════ */

body:not(:has(.header-bar)):not(:has(.bar)) {
  overflow: hidden;
}

body:not(:has(.header-bar)):not(:has(.bar)) .totalpill {
  position: fixed;
  top: 16px;
  right: 18px;

  z-index: 20;

  display: flex;
  align-items: baseline;
  gap: 6px;

  padding: 7px 15px;

  border-radius: 99px;

  background: rgba(2,20,28,.5);
  border: 1px solid rgba(255,255,255,.16);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: clamp(14px,1.2vw,20px);
  font-weight: 800;

  letter-spacing: -.04em;
  color: #fff;

  height: auto;
  width: auto;
}

body:not(:has(.header-bar)):not(:has(.bar)) .totalpill b {
  font-size: inherit;
  font-weight: inherit;
  color: var(--sea-bright);
  letter-spacing: inherit;
  margin-left: 0;
}

body:not(:has(.header-bar)):not(:has(.bar)) .wall {
  display: grid;

  height: 100vh;
  height: 100dvh;

  gap: 0;

  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;

  padding-top: 0;

  background: none;
}

body:not(:has(.header-bar)):not(:has(.bar)) .tile {
  position: relative;

  display: block;

  overflow: hidden;
  isolation: isolate;

  background: var(--tile-bg);

  cursor: pointer;

  aspect-ratio: auto;
}

body:not(:has(.header-bar)):not(:has(.bar)) .tile::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  background-image: var(--image);
  background-size: cover;
  background-position: center;

  transform: scale(1.02);

  filter: contrast(1.00) saturate(1.1);

  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}


/* 메인페이지 타일 그라데이션 */

body:not(:has(.header-bar)):not(:has(.bar)) .tile::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      180deg,
      rgba(2,20,28,.45) 0%,
      rgba(2,20,28,0)   22%,
      rgba(2,20,28,0)   42%,
      rgba(2,20,28,.6)  80%,
      rgba(2,20,28,.9)  100%
    );

  transition: none;
}

body:not(:has(.header-bar)):not(:has(.bar)) .tile:hover::before,
body:not(:has(.header-bar)):not(:has(.bar)) .tile:focus-visible::before {
  transform: scale(1.09);
  filter: contrast(1.00) saturate(1.15);
}

body:not(:has(.header-bar)):not(:has(.bar)) .tile + .tile {
  box-shadow: inset 1px 0 0 rgba(255,255,255,.08);
}

body:not(:has(.header-bar)):not(:has(.bar)) .content {
  position: absolute;
  inset: auto 0 0;

  padding: clamp(16px,1.5vw,28px);

  display: flex;
  flex-direction: column;

  gap: 0;

  margin-top: 0;
}

body:not(:has(.header-bar)):not(:has(.bar)) .title {
  font-size: clamp(22px,2.1vw,38px);

  font-weight: 800;
  line-height: 1.1;

  letter-spacing: -.05em;

  text-shadow: 0 2px 16px rgba(0,0,0,.4);

  display: block;

  -webkit-line-clamp: unset;
}


/* ═══════════════════════════════════════════════════════════
   상세 페이지 공통 그리드
   ═══════════════════════════════════════════════════════════ */

body:has(.header-bar) .wall,
body:has(.bar) .wall {
  display: grid;

  min-height: 100vh;
  min-height: 100dvh;

  gap: 1px;

  background: rgba(255,255,255,.08);

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(var(--tile-min, 180px), 1fr)
    );

  grid-auto-rows: max-content;

  align-content: start;

  padding-top: var(--header-h);
}


/* ═══════════════════════════════════════════════════════════
   상세 페이지별 고유 비율
   ═══════════════════════════════════════════════════════════ */

.wall--poster {
  --tile-min: 160px;
  --tile-ratio: 3/4;
}

.wall--film {
  --tile-min: 190px;
  --tile-ratio: 2/3;
}

.wall--wide {
  --tile-min: 260px;
  --tile-ratio: 16/9;
}

.wall--live {
  --tile-min: 280px;
  --tile-ratio: 16/10;
}


/* ═══════════════════════════════════════════════════════════
   상세 페이지 타일
   ═══════════════════════════════════════════════════════════ */

body:has(.header-bar) .tile,
body:has(.bar) .tile {
  position: relative;

  display: flex;
  flex-direction: column;

  aspect-ratio: var(--tile-ratio, 3/4);

  overflow: hidden;
  isolation: isolate;

  background: var(--tile-bg);

  cursor: pointer;
}

body:has(.header-bar) .tile::before,
body:has(.bar) .tile::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  width: 100%;
  height: 100%;

  background-image: var(--image);

  background-size: cover;
  background-position: center;

  transform: scale(1.02);

  filter:
    contrast(1.0)
    saturate(.9)
    brightness(.95);

  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}

.tile-img {
  position: absolute;
  inset: 0;

  z-index: -2;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.02);

  filter:
    contrast(1.0)
    saturate(.9)
    brightness(.95);

  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}


/* ═══════════════════════════════════════════════════════════
   타일 호버
   ═══════════════════════════════════════════════════════════ */

.tile:hover .tile-img,
.tile:hover::before {
  transform: scale(1.08);

  filter:
    contrast(1.08)
    saturate(1.0)
    brightness(1);
}


/* ═══════════════════════════════════════════════════════════
   상세 페이지 타일 하단 그라데이션
   ═══════════════════════════════════════════════════════════ */

body:has(.header-bar) .tile::after,
body:has(.bar) .tile::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      180deg,
      rgba(2,20,28,0)    0%,
      rgba(2,20,28,.1)  40%,
      rgba(2,20,28,.6)  75%,
      rgba(2,20,28,.85) 100%
    );

  transition: background .3s ease;
}


/* ═══════════════════════════════════════════════════════════
   완료 상태
   ═══════════════════════════════════════════════════════════ */

.tile.done .tile-img,
.tile.done::before {
  filter:
    saturate(.4)
    brightness(.5)
    contrast(.9) !important;
}

body:has(.header-bar) .tile.done::after,
body:has(.bar) .tile.done::after {
  background:
    linear-gradient(
      180deg,
      rgba(2,20,28,0)    0%,
      rgba(2,20,28,.4)  50%,
      rgba(2,20,28,.75) 80%,
      rgba(2,20,28,.95) 100%
    ) !important;
}


/* ═══════════════════════════════════════════════════════════
   상세 페이지 콘텐츠
   ═══════════════════════════════════════════════════════════ */

body:has(.header-bar) .content,
body:has(.bar) .content {
  margin-top: auto;

  padding: 14px;

  display: flex;
  flex-direction: column;

  gap: 4px;

  min-width: 0;
}

.vol-num {
  font-size: .7rem;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--sea-bright);
}

body:has(.header-bar) .title,
body:has(.bar) .title {
  font-size: .9rem;

  font-weight: 700;

  line-height: 1.25;

  letter-spacing: -.02em;

  text-shadow: 0 2px 10px rgba(0,0,0,.5);

  display: -webkit-box;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;

  min-height: calc(.9rem * .5 * 2);

  min-width: 0;
}

.meta {
  font-size: .7rem;

  color: var(--muted);

  font-variant-numeric: tabular-nums;

  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-top: 4px;

  min-width: 0;
}

.upto-btn {
  padding: 3px 8px;

  border: 1px solid rgba(255,255,255,.2);

  border-radius: 4px;

  font-size: .63rem;

  color: var(--muted);

  background: rgba(0,0,0,.3);

  transition: .15s;

  white-space: nowrap;

  flex: none;
}

.tile.done .upto-btn {
  border-color: var(--sea-bright);

  color: var(--sea-bright);

  background: rgba(53,189,240,.16);
}

.upto-btn:focus {
  outline: none;
}

.upto-btn:focus-visible {
  outline: 2px solid var(--sea-bright);
  outline-offset: 2px;
}

.wall--wide .content,
.wall--live .content {
  padding: 12px 14px;
  gap: 3px;
}

.wall--wide .title,
.wall--live .title {
  font-size: .85rem;

  line-height: 1.3;

  -webkit-line-clamp: 2;
}

.wall--wide .meta,
.wall--live .meta {
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════
   INDEX 전용 컴포넌트
   ═══════════════════════════════════════════════════════════ */

.badge-slot {
  min-height: 21px;

  margin-bottom: 9px;

  display: flex;
  align-items: center;
}

.badge {
  display: inline-flex;

  padding: 4px 9px;

  border: 1px solid rgba(255,255,255,.32);

  border-radius: 99px;

  background: rgba(0,0,0,.18);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .08em;

  color: #fff;
}

.kicker {
  font-size: clamp(9px,.62vw,11px);

  font-weight: 700;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--sea-bright);

  margin-bottom: 7px;
}

.meta-area {
  margin-top: 8px;

  min-height: 19px;

  display: flex;
  align-items: center;

  color: var(--muted);

  font-size: clamp(11px,.8vw,13px);

  font-variant-numeric: tabular-nums;
}

.progress-row {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 13px;

  min-height: 20px;
}

.progress {
  flex: 1;

  height: 4px;

  background: rgba(255,255,255,.22);

  border-radius: 99px;

  overflow: hidden;
}

.progress i {
  display: block;

  width: 0;
  height: 100%;

  background: var(--sea-bright);

  border-radius: inherit;

  transition:
    width .5s cubic-bezier(.4,0,.2,1);
}

.percent {
  font-size: clamp(14px,1.2vw,20px);

  font-weight: 800;

  line-height: 1;

  letter-spacing: -.04em;

  color: var(--sea-bright);
}


/* ═══════════════════════════════════════════════════════════
   INDEX 배경 이미지
   ═══════════════════════════════════════════════════════════ */

.manga {
  --image: url("../images/manga.jpg");
}

.anime {
  --image: url("../images/anime.jpg");
}

.spinoff {
  --image: url("../images/spin.jpg");
}

.movie {
  --image: url("../images/movie.jpg");
}

.live {
  --image: url("../images/live.jpg");
}

.remake {
  --image: url("../images/remake.jpg");
}


/* ═══════════════════════════════════════════════════════════
   1100px 이하
   ═══════════════════════════════════════════════════════════ */

@media (max-width:1100px) {

  body:not(:has(.header-bar)):not(:has(.bar)) {
    overflow-y: auto;
  }

  body:not(:has(.header-bar)):not(:has(.bar)) .wall {
    grid-template-columns: repeat(3, 1fr);

    height: auto;
  }

  body:not(:has(.header-bar)):not(:has(.bar)) .tile {
    aspect-ratio: 2/3.1;
  }

  body:not(:has(.header-bar)):not(:has(.bar)) .tile + .tile {
    box-shadow:
      inset 1px 0 0 rgba(255,255,255,.08),
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  .wall--poster {
    --tile-min: 130px;
  }

  .wall--film {
    --tile-min: 140px;
  }

  .wall--wide {
    --tile-min: 160px;
  }

  .wall--live {
    --tile-min: 190px;
  }
}


/* ═══════════════════════════════════════════════════════════
   768px 이하
   태블릿 / 작은 화면
   ═══════════════════════════════════════════════════════════ */

@media (max-width:768px) {

  /*
    스마트폰 safe-area를 고려한 상세 페이지 헤더.
    기존 --header-h의 높이에 상단 안전 영역을 추가합니다.
  */

  .header-bar,
  .bar {
    height:
      calc(
        var(--header-h) +
        env(safe-area-inset-top, 0px)
      );

    padding-top:
      env(safe-area-inset-top, 0px);

    padding-left: max(
      12px,
      env(safe-area-inset-left, 0px)
    );

    padding-right: max(
      12px,
      env(safe-area-inset-right, 0px)
    );
  }

  body:has(.header-bar) .wall,
  body:has(.bar) .wall {
    padding-top:
      calc(
        var(--header-h) +
        env(safe-area-inset-top, 0px)
      );
  }

  .header-left,
  .header-right {
    min-width: 0;
  }

  .bar {
    gap: 9px;
  }

  .bar > div {
    min-width: 0;
  }

  .bar .spacer {
    flex: 1 1 auto;
    min-width: 4px;
  }

  .htitle {
    font-size: .9rem;
  }

  .hpct {
    font-size: .86rem;
  }

  .hsub {
    font-size: .65rem;
  }

  .back {
    padding-left: 11px;
    padding-right: 11px;
  }

  main {
    max-width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════
   620px 이하
   스마트폰
   ═══════════════════════════════════════════════════════════ */

@media (max-width:620px) {

  /* ── INDEX ───────────────────────────────────────────── */

  body:not(:has(.header-bar)):not(:has(.bar)) .wall {
    grid-template-columns: repeat(2, 1fr);
  }

  body:not(:has(.header-bar)):not(:has(.bar)) .tile {
    aspect-ratio: 2/2.9;
  }

  body:not(:has(.header-bar)):not(:has(.bar)) .content {
    padding: 16px 14px;
  }

  body:not(:has(.header-bar)):not(:has(.bar)) .title {
    font-size: clamp(20px,6vw,30px);
  }


  /* ── 상세 페이지 헤더 ───────────────────────────────── */

  .header-bar,
  .bar {
    /*
      헤더 높이를 지나치게 키우지 않으면서
      safe-area를 포함하도록 합니다.
    */

    min-height:
      calc(
        var(--header-h) +
        env(safe-area-inset-top, 0px)
      );

    padding-left: max(
      10px,
      env(safe-area-inset-left, 0px)
    );

    padding-right: max(
      10px,
      env(safe-area-inset-right, 0px)
    );
  }

  /*
    제목 영역은 남은 공간만 사용하고
    화면 밖으로 밀려나지 않도록 합니다.
  */

  .bar .htitle {
    min-width: 0;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: .88rem;
  }

  /*
    오른쪽 진도 영역은 절대로 줄어들지 않게 합니다.
  */

  .bar > div[style*="text-align:right"] {
    flex: none;

    width: auto;

    min-width: max-content;
  }

  .hpct {
    font-size: .82rem;
  }

  .hsub {
    font-size: .62rem;
  }

  /*
    뒤로가기 버튼도 너무 넓어지지 않게 합니다.
  */

  .back {
    min-height: 34px;

    padding-left: 9px;
    padding-right: 9px;

    font-size: .7rem;
  }


  /* ── 상세 페이지 그리드 ─────────────────────────────── */

  body:has(.header-bar) .wall,
  body:has(.bar) .wall {
    grid-template-columns: repeat(2, 1fr);

    padding-top:
      calc(
        var(--header-h) +
        env(safe-area-inset-top, 0px)
      );
  }


  /* ── 상세 페이지 타일 ──────────────────────────────── */

  body:has(.header-bar) .content,
  body:has(.bar) .content {
    padding: 11px;

    gap: 3px;
  }

  body:has(.header-bar) .title,
  body:has(.bar) .title {
    font-size: .78rem;

    line-height: 1.3;

    min-height:
      calc(
        .78rem * 1.3 * 2
      );
  }

  .vol-num {
    font-size: .62rem;
  }

  .meta {
    font-size: .63rem;
  }

  .upto-btn {
    font-size: .59rem;

    padding:
      3px 7px;
  }


  /* ── 포스터 최소 폭 ───────────────────────────────── */

  .wall--poster {
    --tile-min: 0px;
  }

  .wall--film {
    --tile-min: 0px;
  }

  .wall--wide {
    --tile-min: 0px;
  }

  .wall--live {
    --tile-min: 0px;
  }


  /* ── 기존 회차/권 목록형 페이지 ─────────────────────── */

  .vol-title {
    display: block;

    margin-left: 0;

    margin-top: 2px;
  }

  /*
    작은 화면에서는 '여기까지' 버튼을 숨기는
    기존 동작을 유지합니다.
  */

  .upto {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   480px 이하
   아주 작은 스마트폰
   ═══════════════════════════════════════════════════════════ */

@media (max-width:480px) {

  .header-bar,
  .bar {
    padding-left: max(
      8px,
      env(safe-area-inset-left, 0px)
    );

    padding-right: max(
      8px,
      env(safe-area-inset-right, 0px)
    );

    gap: 7px;
  }

  .back {
    padding-left: 8px;
    padding-right: 8px;

    font-size: .66rem;
  }

  .bar .htitle {
    font-size: .82rem;
  }

  .hpct {
    font-size: .76rem;
  }

  .hsub {
    font-size: .58rem;
  }

  body:has(.header-bar) .wall,
  body:has(.bar) .wall {
    gap: 1px;
  }

  .control-btn,
  body:has(.header-bar) .totalpill {
    padding-left: 10px;
    padding-right: 10px;

    font-size: .72rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   400px 이하
   아주 좁은 화면에서 헤더가 절대 넘치지 않도록
   ═══════════════════════════════════════════════════════════ */

@media (max-width:400px) {

  .bar {
    gap: 5px;
  }

  .bar .back {
    padding-left: 7px;
    padding-right: 7px;
  }

  .bar .htitle {
    font-size: .78rem;
  }

  .bar > div[style*="text-align:right"] {
    min-width: 48px;
  }

  .hpct {
    font-size: .72rem;
  }

  .hsub {
    font-size: .55rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   모션 감소
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   이어보기 강조
   ═══════════════════════════════════════════════════════════ */

.tile.flash {
  animation:
    flashAnim 1.2s ease-out 1;

  z-index: 20;
}

@keyframes flashAnim {

  0%,
  100% {
    outline: 4px solid transparent;
    outline-offset: -4px;
  }

  15%,
  60% {
    outline: 4px solid var(--sea-bright);
    outline-offset: -4px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .tile.flash {
    animation: none;

    outline: 4px solid var(--sea-bright);
    outline-offset: -4px;
  }
}


/* ═══════════════════════════════════════════════════════════
   구간 경계 표시
   ═══════════════════════════════════════════════════════════ */

.saga-line {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  z-index: 2;

  background:
    linear-gradient(
      90deg,
      rgba(
        53,189,240,
        var(--line-a0,1)
      ) 0%,

      rgba(
        53,189,240,
        var(--line-a1,0)
      ) 100%
    );

  pointer-events: none;
}

.saga-label {
  position: absolute;

  top: 0;
  left: 0;

  z-index: 2;

  padding:
    3px 9px 4px;

  background: var(--sea-bright);

  color: var(--deep);

  font-size: .6rem;

  font-weight: 800;

  letter-spacing: .04em;

  border-bottom-right-radius: 7px;

  white-space: nowrap;

  pointer-events: none;
}

.wall.descending .saga-line {
  background:
    linear-gradient(
      270deg,
      rgba(
        53,189,240,
        var(--line-a0,1)
      ) 0%,

      rgba(
        53,189,240,
        var(--line-a1,0)
      ) 100%
    );
}

.wall.descending .saga-label {
  left: auto;
  right: 0;

  border-bottom-right-radius: 0;
  border-bottom-left-radius: 7px;
}


/* ═══════════════════════════════════════════════════════════
   영화 Coming Soon
   ═══════════════════════════════════════════════════════════ */

.tile.upcoming {
  cursor: default;
  opacity: 1;
}

.tile.upcoming .tile-img,
.tile.upcoming::before {
  filter:
    brightness(.5)
    contrast(1);
}

.tile.upcoming .coming-soon {
  position: absolute;

  top: 42%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  z-index: 2;

  font-size: 1.15rem;

  font-weight: 800;

  letter-spacing: .15em;

  text-align: center;

  color: var(--text);

  pointer-events: none;

  white-space: nowrap;

  line-height: 1.2;
}


/* 준비 중 / 방영 예정 */

body:not(:has(.header-bar)):not(:has(.bar))
.tile.upcoming::before {
  filter:
    brightness(.5)
    contrast(1);
}

body:not(:has(.header-bar)):not(:has(.bar))
.tile.upcoming:hover::before {
  transform: scale(1.02);

  filter:
    brightness(.5)
    contrast(1);
}


/* ═══════════════════════════════════════════════════════════
   검색
   ═══════════════════════════════════════════════════════════ */

.search-box {
  height: var(--pill-h);

  width:
    clamp(
      120px,
      22vw,
      240px
    );

  padding: 0 14px;

  border-radius: 99px;

  background: rgba(2,20,28,.7);

  border:
    1px solid rgba(255,255,255,.16);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-family: inherit;

  font-size: .78rem;

  font-weight: 500;

  color: var(--text);

  outline: none;

  transition: .2s;
}

.search-box::placeholder {
  color: rgba(255,255,255,.4);

  font-weight: 400;
}

.search-box:focus {
  border-color: var(--sea-bright);

  width:
    clamp(
      160px,
      28vw,
      300px
    );
}

.search-box::-webkit-search-cancel-button {
  filter:
    invert(1)
    opacity(.5);

  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════
   검색 숨김
   ═══════════════════════════════════════════════════════════ */

.tile.hidden {
  display: none !important;
}

.empty-msg {
  grid-column: 1 / -1;

  padding: 60px 20px;

  text-align: center;

  color: var(--muted);

  font-size: .88rem;

  line-height: 1.7;

  background: var(--deep);
}

.empty-msg b {
  color: var(--sea-bright);

  font-weight: 700;
}