/* tyear narrow-screen repair v1. Desktop artwork, links and effects retained. */
/* The DIY background used a 1905px box with negative outer margins. Keep
   its full-bleed background while sizing the box to the actual viewport. */
@media (min-width: 1200px) {
  #diy1 #framePk3QeP {
    width: calc(100vw - 16px) !important;
    margin-left: calc((1180px - 100vw + 16px) / 2) !important;
    margin-right: 0 !important;
    background-position: top center !important;
  }
  #diy1 #framez6bNiC { width: 1040px; margin-left: auto !important; margin-right: auto !important; }
  #diy1 #frameJp6euf { width: 920px; margin-left: auto !important; margin-right: auto !important; }
  #diy1 #frameF5bRlT { width: 520px; margin-left: calc(50% - 32px) !important; margin-right: 0 !important; }
  #diy1 #framef22z51 { width: 620px; margin-left: auto !important; margin-right: auto !important; }
}

/* Use a drawn arrow: the theme's forumlist/left.png is absent on the server.
   Keep the original anchor, hover and pagination behavior. The generated
   text supplies a readable name for the original otherwise empty link. */
.pg a.prev {
  background-image: none !important;
  position: relative;
}
.pg a.prev::after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  left: 50%;
  top: 50%;
  margin: -5px 0 0 -3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}
.pg a.prev::before {
  content: "上一頁";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  html, body { min-width: 0 !important; }
  body { overflow-wrap: break-word; }
  .wp, #wp, .w1180, #hd .wp, #toptb .wp, .widthauto .wp {
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: 1180px;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .wp .wp, #wp .w1180, .w1180 .wp { width: 100% !important; }
  .deanheader { min-width: 0; }
  #toptb { min-width: 0 !important; }
  #ft { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  .deanheader > .w1180 { display: flex; align-items: center; gap: 8px; }
  .deanlogo { width: 150px; flex: 0 0 150px; }
  .deannav { flex: 1 1 auto; min-width: 0; width: auto; }
  .deannav ul { display: flex; }
  .deannav ul li { flex: 0 0 auto; }
  .deannav ul li a { padding-left: 8px; padding-right: 8px; }
  .deandenglu { flex: 0 0 auto; margin-top: 0; }
  .deansearch { flex: 0 1 auto; }
  #diy1 .frame, #diy1 .column, #diy1 .block { min-width: 0; max-width: 100%; box-sizing: border-box; }
  #diy1 .frame {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #framePk3QeP { background-position: top center !important; background-size: 100% auto !important; }
  #diy1 img { max-width: 100%; height: auto; }
  #diy1 iframe, #diy1 video { max-width: 100%; }
  .deanluntan_left { width: calc(100% - 312px); min-width: 0; box-sizing: border-box; }
  .deanluntan_right { width: 300px; max-width: 100%; }
  .deanluntan_left .mn, .ct2 .mn { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; }
  .deanluntan_left #ct { width: 100% !important; }
  .t_f { overflow-wrap: anywhere; }
  .t_f img, .t_f video, .t_f iframe { max-width: 100%; }
  .t_f img { height: auto; }
  .t_f table { max-width: 100%; }
  .tedt, .tedt .area, .pbt, .tf { max-width: 100%; box-sizing: border-box; }
  .pg { max-width: 100%; }
  .pg a, .pg strong, .pg label { margin-bottom: 6px; }
  .deanftbottom, .deanfttop { min-width: 0 !important; }
  .deanbkjs ul { width: 100%; display: flex; }
  .deanbkjs ul li { flex: 1; min-width: 0; }
  .rfm { max-width: 100%; box-sizing: border-box; }
  #diy1 li, #diy1 .title { max-width: 100%; box-sizing: border-box; }
}

@media (max-width: 980px) {
  /* Stack the existing sidebar after the topic list; keep every control. */
  .deanluntan_left, .deanluntan_right { width: 100%; float: none; clear: both; }
  .deanbkjs { width: auto; }
  .deanqdft { height: auto; min-height: 36px; }
  .deanqdft::after { content: ""; display: block; clear: both; }
}

@media (max-width: 767px) {
  .deanheader { position: relative; height: auto; min-height: 60px; line-height: normal; }
  .deanheader > .w1180 { flex-wrap: wrap; gap: 0; padding-bottom: 6px; }
  .deanlogo { flex-basis: 145px; width: 145px; height: 60px; order: 0; }
  .deandenglu { order: 1; margin-left: auto; }
  .deannav { order: 2; flex-basis: 100%; height: auto; padding: 0; overflow-x: auto; }
  .deannav ul { flex-wrap: wrap; }
  .deannav ul li a { float: none; min-height: 40px; font-size: 14px; }
  .deansearch { order: 3; max-width: 100%; padding: 0; }
  .deanheader .clear { display: none; }
  .deanfakeheader { height: 0 !important; }
  #toptb { height: auto; }
  #toptb .z, #toptb .y { float: none; }
  #diy1 [class*="column"] { float: none; width: 100%; }
  #diy1 .module { max-width: 100%; }
  #pt { height: auto; min-height: 29px; white-space: normal; }
  #pt .z { float: none; }
  #pt .z a, #pt .z em { float: none; display: inline-block; }
  #chart { height: auto; }
  #chart .chart { float: none; padding-left: 0; }
  #chart .y { float: none; }
  .fl_tb { table-layout: fixed; width: 100%; }
  .fl_tb td { overflow-wrap: anywhere; }
  .fl_tb .fl_i { width: 55px; }
  .fl_tb .fl_by { width: 70px; }
  .fl_tb .fl_icn { width: 40px; }
  .fl_tb img { max-width: 100%; height: auto; }
  .tf { height: auto !important; }
  .tf .y { float: none; clear: both; }
  .tf a { margin-bottom: 8px; }
  #threadlisttableid { table-layout: fixed; width: 100%; }
  #threadlisttableid th { overflow-wrap: anywhere; }
  .tl th .s { white-space: normal; }
  #fastpostform .tedt { width: 100%; }
  .hasfsl { margin-right: 0; }
  #fastpostform .pbt .px { width: 100% !important; box-sizing: border-box; }
  .pnc, .pn { max-width: 100%; }
  .deanbkjs ul { width: 100%; display: flex; }
  .deanbkjs ul li { flex: 1; min-width: 0; }
  .deanftbottom .y { float: none; }
  #main_message .rfm { width: 100%; margin-left: 0; margin-right: 0; }
  .rfm { width: 100%; margin-left: 0; margin-right: 0; }
  .altw { width: 100%; max-width: 100%; box-sizing: border-box; }
  .altw .alert_info, .altw #messagelogin { width: auto; max-width: 100%; box-sizing: border-box; }
  .rfm th { width: 75px; padding-left: 0; padding-right: 8px; }
  .rfm .px { width: 100%; box-sizing: border-box; }
  .rfm select { max-width: 100%; }
  #main_message .rfm th { width: 75px; padding-left: 0; padding-right: 8px; }
  #main_message .rfm .px { width: 100%; box-sizing: border-box; }
  #main_message .rfm td { min-width: 0; padding-right: 0; }
  .rfm .p_tip { max-width: 100%; }
  #postlist .plhin { width: 100%; table-layout: fixed; }
  #postlist .plhin > tbody > tr > .pls { width: 70px; }
  #postlist .pls .avatar img { max-width: 50px; height: auto; }
  #postlist .plhin > tbody > tr > .plc { padding-left: 8px; padding-right: 8px; }
  .pob em { display: flex; flex-wrap: wrap; gap: 6px; }
  .pob em a { white-space: nowrap; }
  #postbox, #postbox .edt, #postbox .edt .area { width: 100% !important; box-sizing: border-box; }
  .tedt .area { margin-right: 0; }
}