/* DCLKR_MOBILE_SEARCH_NAV
 * Phone layout only:
 * - index title/category selector -> full-width global search prompt
 * - drawer search -> expanded index/category navigation
 * - duplicate index toolbar search button -> hidden
 */
.DclMobileTitleSearch,
.Header-controls > .item-dclMobileNav {
  display: none;
}

@media (max-width: 767.98px) {
  /* Replace the "모든 글" title selector with search, in the same title-control slot. */
  .IndexPage-nav > ul > .item-nav {
    display: none !important;
  }

  .IndexPage-nav > ul > .item-dclMobileSearch {
    display: block !important;
  }

  .DclMobileTitleSearch {
    display: block !important;
  }

  .DclMobileTitleSearch .Search {
    width: min(360px, calc(100vw - 150px));
    min-width: 150px;
  }

  .DclMobileTitleSearch .Search-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    background: var(--control-bg);
    color: var(--text-color);
    text-align: start;
  }

  .DclMobileTitleSearch .Search-input .Button-icon {
    flex: 0 0 auto;
    margin-inline-end: 8px;
    color: var(--muted-color);
  }

  .DclMobileTitleSearch .Search-input .Button-label {
    display: flex !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .DclMobileTitleSearch .Search-input .Button-labelText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .DclMobileTitleSearch .Search--active {
    width: 100%;
  }

  .DclMobileTitleSearch .Search--active .Search-input {
    width: 100%;
    color: var(--link-color);
  }

  .DclMobileTitleSearch .Search-clear {
    flex: 0 0 auto;
    margin-inline-start: 2px;
  }

  /* Core RC8 also puts a magnifier in the discussion-list toolbar on phones.
     It is redundant after search has been promoted into the title control. */
  .IndexPage-toolbar-search {
    display: none !important;
  }

  /* Search no longer occupies the drawer on the index page; categories do. */
  .App--index .App-drawer .Header-controls > .item-search {
    display: none !important;
  }

  .App-drawer .Header-controls > .item-dclMobileNav {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .DclMobileDrawerNav {
    width: 100%;
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--control-bg);
  }

  .DclMobileDrawerNav-list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .DclMobileDrawerNav-list > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .DclMobileDrawerNav-list > li > a,
  .DclMobileDrawerNav-list > li > button,
  .DclMobileDrawerNav-list > li > span {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 9px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: start;
    text-decoration: none;
    white-space: normal;
  }

  .DclMobileDrawerNav-list > li > a:hover,
  .DclMobileDrawerNav-list > li > button:hover {
    background: var(--control-bg);
  }

  .DclMobileDrawerNav-list > li.active > a,
  .DclMobileDrawerNav-list > li.active > button {
    background: var(--primary-color);
    color: #fff;
  }

  .DclMobileDrawerNav-list > li.active .Button-icon {
    color: inherit !important;
  }

  .DclMobileDrawerNav-list .Button-icon {
    width: 20px !important;
    margin: 0;
    flex: 0 0 20px;
    text-align: center;
  }

  .DclMobileDrawerNav-list .Button-label {
    min-width: 0;
    flex: 1 1 auto;
  }

  .DclMobileDrawerNav-list .TagLinkButton.child {
    padding-inline-start: 48px;
  }

  .DclMobileDrawerNav-list > .Dropdown-separator {
    height: 1px;
    margin: 7px 0;
    background: var(--control-bg);
  }
}

/* DCLKR_MOBILE_SEARCH_LAYOUT_V2 */
@media (max-width: 767.98px) {

  /* Flarum 기본 200px 중앙 타이틀 슬롯을 해제.
     좌측 햄버거 46px, 우측 글쓰기 46px만 남기고 전부 검색에 사용. */
  .DclMobileTitleSearch.App-titleControl {
    left: 46px !important;
    right: 46px !important;
    width: auto !important;
    height: var(--header-height-phone) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
  }

  /* 검색 전/후 외곽 크기를 완전히 동일하게 유지 */
  .DclMobileTitleSearch .Search,
  .DclMobileTitleSearch .Search.Search--active {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    margin: 0 !important;
  }

  .DclMobileTitleSearch .Search-input,
  .DclMobileTitleSearch .Search--active .Search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 12px !important;
  }

  /* 검색어가 있으면 오른쪽 X가 들어갈 자리만 확보 */
  .DclMobileTitleSearch .Search--active .Search-input {
    padding-right: 40px !important;
  }

  /* X 버튼을 검색창 밖이 아니라 내부 오른쪽에 고정 */
  .DclMobileTitleSearch .Search-clear {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 2;
  }
}

/* DCLKR_MOBILE_SEARCH_LAYOUT_V2 */
@media (max-width: 767.98px) {

  /* Flarum 기본 200px 중앙 타이틀 슬롯을 해제.
     좌측 햄버거 46px, 우측 글쓰기 46px만 남기고 전부 검색에 사용. */
  .DclMobileTitleSearch.App-titleControl {
    left: 46px !important;
    right: 46px !important;
    width: auto !important;
    height: var(--header-height-phone) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
  }

  /* 검색 전/후 외곽 크기를 완전히 동일하게 유지 */
  .DclMobileTitleSearch .Search,
  .DclMobileTitleSearch .Search.Search--active {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    margin: 0 !important;
  }

  .DclMobileTitleSearch .Search-input,
  .DclMobileTitleSearch .Search--active .Search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 12px !important;
  }

  /* 검색어가 있으면 오른쪽 X가 들어갈 자리만 확보 */
  .DclMobileTitleSearch .Search--active .Search-input {
    padding-right: 40px !important;
  }

  /* X 버튼을 검색창 밖이 아니라 내부 오른쪽에 고정 */
  .DclMobileTitleSearch .Search-clear {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 2;
  }
}

/* DCLKR_MOBILE_DRAWER_SCROLL_BEGIN */
@media (max-width: 767.98px) {
  /*
   * The drawer itself owns vertical scrolling.
   * Without this, wheel/touch gestures fall through to the discussion list.
   */
  .App-drawer {
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .App-drawer .Header-controls {
    min-height: min-content;
  }

  /*
   * While the drawer is open, freeze the page behind it.
   * Modern Firefox/Chrome both support :has().
   */
  html:has(.App.drawerOpen),
  body:has(.App.drawerOpen) {
    height: 100% !important;
    overflow: hidden !important;
  }
}
/* DCLKR_MOBILE_DRAWER_SCROLL_END */