/* 상영작 목록 — 검색·모바일 툴바 */

/* 기획전·매거진 — ti-np-root 없이 동일 검색 UI */
.ti .np-list .np-search,
.ti .mz-panel .np-search {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ti .np-list .np-search[hidden],
.ti .mz-panel .np-search[hidden] {
  display: none;
}

.ti .np-list .np-search-toggle,
.ti .mz-panel .np-search-toggle {
  display: none;
}

.ti .np-list .np-search-panel,
.ti .mz-panel .np-search-panel {
  display: block;
  min-width: 0;
}

.ti .np-list .np-search-field,
.ti .mz-panel .np-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  height: auto;
  padding: 8px 12px 8px 10px;
  border: 1px solid #595959;
  border-radius: 0;
  background: #fff;
  cursor: text;
}

.ti .np-list .np-search-icon,
.ti .mz-panel .np-search-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #595959;
  pointer-events: none;
}

.ti .np-list .np-search-input,
.ti .mz-panel .np-search-input {
  flex: 1 1 auto;
  min-width: 8.5rem;
  width: clamp(8.5rem, 18vw, 14rem);
  min-height: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: max(16px, 0.85rem);
  font-weight: 400;
  line-height: 1.4;
  color: #111111;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.ti .np-list .np-search-input::placeholder,
.ti .mz-panel .np-search-input::placeholder {
  color: #595959;
  font-weight: 400;
}

.ti .np-list .np-search-field:focus-within,
.ti .mz-panel .np-search-field:focus-within {
  outline: none;
  box-shadow: none;
}

.ti .np-list .np-search-input:focus,
.ti .np-list .np-search-input:focus-visible,
.ti .mz-panel .np-search-input:focus,
.ti .mz-panel .np-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

@media (min-width: 900px) {
  .ti .np-list .np-search-field,
  .ti .mz-panel .np-search-field {
    height: 38px;
    min-height: 38px;
    padding: 0 10px 0 8px;
  }

  .ti .np-list .np-search-input,
  .ti .mz-panel .np-search-input {
    font-size: 0.85rem;
  }
}

@media (max-width: 899px) {
  .ti .np-list .np-search-toggle,
  .ti .mz-panel .np-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid #595959;
    border-radius: 0;
    background: #fff;
    color: #595959;
    cursor: pointer;
    box-sizing: border-box;
  }

  .ti .np-list .np-search:not(.is-open) .np-search-panel,
  .ti .mz-panel .np-search:not(.is-open) .np-search-panel {
    display: none;
  }

  .ti .np-list .np-search.is-open .np-search-panel,
  .ti .mz-panel .np-search.is-open .np-search-panel {
    display: block;
    flex: 1 1 100%;
    width: 100%;
  }

  .ti .np-list .np-search.is-open .np-search-toggle,
  .ti .mz-panel .np-search.is-open .np-search-toggle {
    display: none;
  }

  .ti .np-list .np-search.is-open .np-search-field,
  .ti .mz-panel .np-search.is-open .np-search-field {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px 10px 10px;
  }

  .ti .np-list .np-search.is-open .np-search-input,
  .ti .mz-panel .np-search.is-open .np-search-input {
    width: 100%;
    min-width: 0;
    min-height: 1.5rem;
    font-size: 16px;
  }
}

/* 지난 상영작: 건수·검색 1행, 페이지네이션 2행 (페이지 수와 무관) */
.ti .np-root .page-toolbar--with-search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 18px;
}

.ti .np-root .page-toolbar--with-search .page-toolbar__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.ti .np-root .page-toolbar--with-search .page-count {
  flex: 0 1 auto;
  min-width: 0;
}

.ti .np-root .page-toolbar--with-search .np-search {
  flex: 0 0 auto;
  margin-left: auto;
}

.ti .np-root .page-toolbar--with-search .page-pager.is-visible {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
}

.ti .np-root .np-search[hidden] {
  display: none;
}

.ti .np-root .np-search {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ti .np-root .np-search-toggle {
  display: none;
}

.ti .np-root .np-search-panel {
  display: block;
  min-width: 0;
}

.ti .np-root .np-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  height: auto;
  padding: 8px 12px 8px 10px;
  border: 1px solid #4a4a4a;
  border-radius: 0;
  background: #fff;
  cursor: text;
  transition: border-color 0.15s, background 0.15s;
}

.ti .np-root .np-search-field:focus-within {
  border-color: #4a4a4a;
  background: #fff;
  outline: none;
}

.ti .np-root .np-search-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--muted, #5a5a5a);
  pointer-events: none;
}


.ti .np-root .np-search-input {
  flex: 1 1 auto;
  min-width: 8.5rem;
  width: clamp(8.5rem, 18vw, 14rem);
  min-height: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: max(16px, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--text, #1a1a1a);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.ti .np-root .np-search-input:focus {
  outline: none;
}

.ti .np-root .np-search-input::placeholder {
  color: var(--muted, #5a5a5a);
  font-weight: 600;
}

.ti .np-root .np-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

@media (min-width: 900px) {
  .ti .np-root .np-search-field {
    height: 38px;
    min-height: 38px;
    padding: 0 10px 0 8px;
  }

  .ti .np-root .np-search-input {
    font-size: 0.85rem;
  }
}

/* 모바일: 건수와 같은 줄에 검색 아이콘만 → 탭 시 입력란 표시 */
@media (max-width: 899px) {
  .ti .np-root .page-toolbar--with-search .page-toolbar__meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
  }

  .ti .np-root .np-search {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .ti .np-root .np-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid #4a4a4a;
    border-radius: 0;
    background: #fff;
    color: var(--muted, #5a5a5a);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }

  .ti .np-root .np-search-toggle:hover {
    border-color: #111;
    color: #111;
    background: #fafafa;
  }

  .ti .np-root .np-search-toggle:focus,
  .ti .np-root .np-search-toggle:focus-visible {
    border-color: #4a4a4a;
    color: var(--muted, #5a5a5a);
    background: #fff;
    outline: none;
  }

  .ti .np-root .np-search-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    pointer-events: none;
  }

  .ti .np-root .np-search:not(.is-open) .np-search-panel {
    display: none;
  }

  .ti .np-root .np-search.is-open .np-search-toggle {
    display: none;
  }

  .ti .np-root .page-toolbar--with-search .np-search.is-open {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  .ti .np-root .np-search.is-open .np-search-panel {
    display: block;
    flex: 1 1 100%;
    width: 100%;
  }

  .ti .np-root .np-search.is-open .np-search-field {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px 10px 10px;
  }

  .ti .np-root .np-search.is-open .np-search-input {
    width: 100%;
    min-width: 0;
    min-height: 1.5rem;
    font-size: 16px;
  }

}

/* ti-np-list — 현재·예정·지난 상영작 검색 톤 통일 */
.ti .np-list .np-search-field {
  border-color: #595959;
  background: #ffffff;
}

.ti .np-list .np-search-field:focus-within {
  border-color: #595959;
  background: #ffffff;
  outline: none;
  box-shadow: none;
}

.ti .np-list .np-search-icon {
  color: #595959;
}

.ti .np-list .np-search-input {
  font-weight: 400;
  color: #111111;
}

.ti .np-list .np-search-input::placeholder {
  color: #595959;
  font-weight: 400;
}

.ti .np-list .np-meta-row .np-search-toggle {
  border-color: #595959;
  color: #595959;
  background: #ffffff;
}

.ti .np-list .np-meta-row .np-search-toggle:hover {
  border-color: #111111;
  color: #111111;
  background: #f7f7f7;
}

@media (max-width: 899px) {
  .ti .np-list .np-meta-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
  }

  .ti .np-list .np-meta-row .np-search {
    margin-left: auto;
  }

  .ti .np-list .np-meta-row .np-search.is-open {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
  }
}

/* 기획전 — 지난 상영작과 동일 검색 UI */
.ti .np-list.se-right .np-meta-row--with-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0;
}

.ti .np-list.se-right .np-meta-row--with-search .np-meta {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
}

.ti .np-list.se-right .np-meta-row--with-search .np-search {
  flex: 0 0 auto;
  margin-left: auto;
}

/* 매거진 삼삼오오 — 건수·검색·보기 토글 */
.ti .mz-panel .page-toolbar--with-search .np-search-field {
  border-color: #595959;
  background: #ffffff;
}

.ti .mz-panel .page-toolbar--with-search .np-search-icon {
  color: #595959;
}

.ti .mz-panel .page-toolbar--with-search .np-search-input {
  font-weight: 400;
  color: #111111;
}

.ti .mz-panel .page-toolbar--with-search .np-search-input::placeholder {
  color: #595959;
  font-weight: 400;
}

.ti .mz-panel .page-toolbar--with-search .np-search-toggle {
  border-color: #595959;
  color: #595959;
  background: #ffffff;
}

.ti .mz-panel .page-toolbar--with-search .np-search-toggle:hover {
  border-color: #111111;
  color: #111111;
  background: #f7f7f7;
}

@media (max-width: 899px) {
  /*
   * 매거진 삼삼오오 모바일 툴바 (고정 레이아웃 — 수정 시 이 블록만 변경)
   * 일반: 좌 총 N건 | 우 [검색] [썸네일·목록 토글]
   * 검색 열림: 입력란 전체폭 (건수·토글·검색버튼 숨김)
   */
  .ti .mz-panel .page-toolbar--with-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
  }

  .ti .mz-panel .page-toolbar--with-search .page-toolbar__meta {
    display: contents;
  }

  .ti .mz-panel .page-toolbar--with-search .page-count {
    order: 1;
    flex: 0 0 auto;
    margin: 0;
    margin-right: auto;
  }

  .ti .mz-panel .page-toolbar--with-search .np-search {
    order: 2;
    flex: 0 0 auto;
    margin-left: 0;
  }

  .ti .mz-panel .page-toolbar--with-search .view-mode {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
  }

  .ti .mz-panel .page-toolbar--with-search:has(.np-search.is-open) .page-count,
  .ti .mz-panel .page-toolbar--with-search:has(.np-search.is-open) .view-mode {
    display: none;
  }

  .ti .mz-panel .page-toolbar--with-search .np-search.is-open {
    order: 1;
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .ti .mz-panel .page-toolbar--with-search .np-search.is-open .np-search-panel {
    width: 100%;
  }

  .ti .mz-panel .page-toolbar--with-search .np-search.is-open .np-search-field {
    width: 100%;
  }

  .ti .np-list.se-right .np-meta-row--with-search {
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .ti .np-list.se-right .np-meta-row--with-search .np-search {
    margin-left: auto;
  }

  .ti .np-list.se-right .np-meta-row--with-search .np-search.is-open {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
  }
}