/* live mid head/faceOff: cancel sketchbook5 #bd_lst{margin-top:25px} */
#bd_lst { margin-top: 0; }

/* pages_extra gallery dump pollutes zine list — restore full-width rows */
#bd_zine.zine li {
  width: auto;
  max-width: none;
  margin: 0 2px;
}

.xe_content iframe.spf-youtube-embed {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
.spf-title-bold { font-weight: 700; }
/* classic zine thumb+text offset (live notice2 computed ±170) */
#bd_zine.zine .rt_area {
  margin-left: 170px !important;
}
#bd_zine.zine .tmb_wrp {
  float: left;
  margin-left: -170px !important;
  margin-right: 12px;
  margin-bottom: 6px;
  visibility: visible !important; /* cancel .img_load hide without board.js */
  display: block !important;
}
#bd_zine.zine .tmb_wrp img.tmb {
  visibility: visible !important;
  display: block;
}
.spf-thumbnail-fallback {
  display: none !important;
}
.tmb_wrp.spf-thumbnail-load-error img.tmb {
  display: none !important;
}
.tmb_wrp.spf-thumbnail-load-error .spf-thumbnail-fallback {
  display: block !important;
}
/* optional: clip long excerpts like mobile board.css intent */
#bd_zine.zine .cnt {
  overflow: hidden;
  max-height: 32px;
}
#bd_zine.zine li.notice h3,
#bd_zine.zine li.notice h3 a {
  color: #f00;
}

/* live notice2: pages_extra #bd_zine{padding:10px 0} pushes list down — zine only */
#bd_zine.zine {
  padding: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
}

/* wolgan_sponsor etc. card gallery */
#bd_zine.card {
  padding: 10px 0 !important;
  margin: 0 auto;
}
#bd_zine.card:after {
  content: "";
  display: block;
  clear: both;
}
#bd_zine.card li {
  width: 170px; /* intentional card width — do not use zine width:auto */
}
/* img_load hide without board.js — show card thumbs */
#bd_zine.card .tmb_wrp,
#bd_zine.card .tmb_wrp img.tmb,
.bd_lst.img_load.card .tmb_wrp,
.bd_lst.img_load.card .tmb_wrp img.tmb {
  visibility: visible !important;
  display: block !important;
}

/* photo gallery #tmb_lst.frame_style — cancel pages_extra 240/200 dump + img_load hide */
body.spf-page-gallery #tmb_lst.frame_style {
  font-size: 0; /* kill inline-block whitespace gaps */
}
body.spf-page-gallery #tmb_lst.frame_style > li,
body.spf-page-gallery #tmb_lst.frame_style li {
  width: 170px !important;
  max-width: 170px !important;
  height: 160px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-size: 12px;
}
body.spf-page-gallery #tmb_lst.frame_style .tmb_wrp {
  max-width: 130px !important;
  width: auto !important;
  visibility: visible !important;
  display: inline-block; /* match board.css .tmb_wrp — do NOT use block !important */
}
body.spf-page-gallery #tmb_lst.img_load .tmb_wrp {
  visibility: visible !important;
}
body.spf-page-gallery #tmb_lst.frame_style .tmb_wrp img.tmb,
body.spf-page-gallery #tmb_lst.img_load .tmb_wrp img {
  visibility: visible !important;
}
body.spf-page-gallery #tmb_lst.frame_style .no_img {
  width: 130px !important;
  height: 130px !important;
  line-height: 130px !important;
}
/* live head inline: narrow viewport 3-up (not pages_extra 46%) */
@media (max-width: 533px) {
  body.spf-page-gallery #tmb_lst.frame_style > li,
  body.spf-page-gallery #tmb_lst.frame_style li {
    width: 33% !important;
    height: auto !important;
  }
}

/* tourment_rule #tmb_lst.frame_style — live 2×390 / wrp 350 (cancel pages_extra 240/200 last-wins) */
body.spf-page-tourment_rule #tmb_lst.frame_style > li,
body.spf-page-tourment_rule #tmb_lst.frame_style li {
  width: 390px !important;
  max-width: 390px !important;
  height: 160px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.spf-page-tourment_rule #tmb_lst.frame_style .tmb_wrp {
  max-width: 350px !important;
  width: auto !important;
  visibility: visible !important;
  /* live uses display:block after board.js fin_load — do NOT force inline-block !important */
}
body.spf-page-tourment_rule #tmb_lst.img_load .tmb_wrp,
body.spf-page-tourment_rule #tmb_lst.frame_style .tmb_wrp img.tmb,
body.spf-page-tourment_rule #tmb_lst.img_load .tmb_wrp img {
  visibility: visible !important;
}
body.spf-page-tourment_rule #tmb_lst.frame_style .no_img {
  width: 350px !important;
  height: 80px !important;
  line-height: 80px !important;
}
@media (max-width: 533px) {
  body.spf-page-tourment_rule #tmb_lst.frame_style > li,
  body.spf-page-tourment_rule #tmb_lst.frame_style li {
    width: 100% !important;
    height: auto !important;
  }
}

/* profile_pro + profile_cha + teamworking_profile #tmb_lst — live 6×130×170 / wrp 90 (cancel pages_extra 240/200; NO frame_style) */
body.spf-page-profile_pro #tmb_lst > li,
body.spf-page-profile_pro #tmb_lst li,
body.spf-page-profile_cha #tmb_lst > li,
body.spf-page-profile_cha #tmb_lst li,
body.spf-page-teamworking_profile #tmb_lst > li,
body.spf-page-teamworking_profile #tmb_lst li {
  width: 130px !important;
  max-width: 130px !important;
  height: 170px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.spf-page-profile_pro #tmb_lst .tmb_wrp,
body.spf-page-profile_cha #tmb_lst .tmb_wrp,
body.spf-page-teamworking_profile #tmb_lst .tmb_wrp {
  max-width: 90px !important;
  width: auto !important;
  visibility: visible !important;
}
body.spf-page-profile_pro #tmb_lst.img_load .tmb_wrp,
body.spf-page-profile_pro #tmb_lst .tmb_wrp img.tmb,
body.spf-page-profile_pro #tmb_lst.img_load .tmb_wrp img,
body.spf-page-profile_cha #tmb_lst.img_load .tmb_wrp,
body.spf-page-profile_cha #tmb_lst .tmb_wrp img.tmb,
body.spf-page-profile_cha #tmb_lst.img_load .tmb_wrp img,
body.spf-page-teamworking_profile #tmb_lst.img_load .tmb_wrp,
body.spf-page-teamworking_profile #tmb_lst .tmb_wrp img.tmb,
body.spf-page-teamworking_profile #tmb_lst.img_load .tmb_wrp img {
  visibility: visible !important;
}
body.spf-page-profile_pro #tmb_lst .no_img,
body.spf-page-profile_cha #tmb_lst .no_img,
body.spf-page-teamworking_profile #tmb_lst .no_img {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px !important;
}
@media (max-width: 533px) {
  body.spf-page-profile_pro #tmb_lst > li,
  body.spf-page-profile_pro #tmb_lst li,
  body.spf-page-profile_cha #tmb_lst > li,
  body.spf-page-profile_cha #tmb_lst li,
  body.spf-page-teamworking_profile #tmb_lst > li,
  body.spf-page-teamworking_profile #tmb_lst li {
    width: 33% !important;
    height: auto !important;
  }
}

/* sketchbook5 uses jquery-ui icon class names, but the legacy jquery-ui CSS is not loaded. */
.bd .ui-icon-triangle-1-n { background-position: 0 -16px; }
.bd .ui-icon-triangle-1-s { background-position: -64px -16px; }
.bd .ui-icon-arrow-1-n { background-position: 0 -32px; }
.bd .ui-icon-arrow-1-e { background-position: -32px -32px; }
.bd .ui-icon-arrow-1-s { background-position: -64px -32px; }
.bd .ui-icon-arrow-1-w { background-position: -96px -32px; }
.bd .ui-icon-comment { background-position: -128px -96px; }
.bd .ui-icon-print { background-position: -160px -96px; }
.bd .ui-icon-disk { background-position: -96px -112px; }
.bd .ui-icon-zoomin { background-position: -128px -112px; }
.bd .ui-icon-zoomout { background-position: -144px -112px; }
.bd .ui-icon-closethick { background-position: -96px -128px; }

/* listStyle=viewer — live inline body rule (#222 from main.css palette) */
body.spf-viewer {
  margin: 0;
  padding: 3% 0;
  background: #222;
}

/* Native detail parity: keep the central title block aligned with legacy reads. */
body.spf-page-native-detail .rd_hd {
  margin: 0 -15px 20px;
}
/* body.spf-viewer #viewer #bd — board.css already max-width 740 + white + shadow */

body.spf-board-mode-list .spf-board-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.spf-board-mode-list .spf-board-table-scroll table {
  width: 100%;
  min-width: 640px;
}
body.spf-board-mode-list .pagination ul,
.spf-detail-board-list .pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.spf-board-mode-list .pagination li,
.spf-detail-board-list .pagination li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 600px) {
  body.spf-board-mode-list .spf-board-table-scroll table {
    min-width: 560px;
  }
  body.spf-board-mode-list .spf-board-table-scroll th:first-child,
  body.spf-board-mode-list .spf-board-table-scroll td:first-child {
    min-width: 260px;
  }
}

/* Legacy we_home board shell: keep dynamic boards on the same 1110px grid as
 * the existing customer pages.  The selectors are limited to list screens so
 * detail/viewer/table layouts retain their current framework styles. */
body.spf-board-mode-list .layout_content {
  width: 1110px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

body.spf-board-mode-list .layout_content .leftside {
  width: 200px;
  float: left;
  margin-right: 25px;
}

body.spf-board-mode-list .layout_content .main_content {
  width: 870px;
  float: left;
  margin: 0 0 0 5px;
}

body.spf-board-mode-list #quick_scroll2 {
  position: absolute;
  top: 250px;
  right: -140px;
  width: 130px;
}

/* Webzine rows: the 150x90 legacy thumbnail is the visual anchor. */
body.spf-board-mode-list #bd_zine.zine:not(.card) {
  width: 870px;
  padding: 0;
  margin: 0;
}

body.spf-board-mode-list #bd_zine.zine:not(.card) > li {
  width: auto;
  min-height: 0;
  margin: 0 2px;
  padding: 16px 8px 16px 16px;
  border-top: 0 !important;
  border-bottom: 1px solid #EEE;
  box-sizing: border-box;
}

/* Sketchbook's production zine starts with one #DDD rule, then keeps one
 * #EEE separator per row.  Do not use the full-row overlay for this line. */
body.spf-board-mode-list #bd_zine.zine:not(.card) > li:first-child {
  margin-top: 2px;
  border-top: 1px solid #DDD !important;
}

body.spf-board-mode-list #bd_zine.zine:not(.card) .tmb_wrp {
  width: auto;
  height: auto;
  margin-left: -170px !important;
  overflow: visible;
}

body.spf-board-mode-list #bd_zine.zine:not(.card) .tmb_wrp img.tmb {
  width: 150px;
  height: 80px;
  object-fit: cover;
}

body.spf-board-mode-list #bd_zine.zine:not(.card) .rt_area {
  margin-left: 170px !important;
  min-height: 80px;
}

/* The unified view keeps the title link inside h3.  sketchbook5 normally
 * renders the title as text and reserves absolute positioning for .hx; make
 * the nested link participate in the legacy title flow. */
body.spf-board-mode-list #bd_zine.zine:not(.card) h3 a {
  position: static;
  display: inline;
}

/* The legacy hx overlay must stay invisible so hover does not add a second
 * frame around each dynamic row; the row's single bottom rule remains. */
body.spf-board-mode-list #bd_zine.zine:not(.card) > li > a.hx.fixed:hover,
body.spf-board-mode-list #bd_zine.zine:not(.card) > li > a.hx.fixed:focus,
body.spf-board-mode-list #bd_zine.zine:not(.card) > li > a.hx.fixed:focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
}

/* Gallery uses the legacy five-column frame grid, without changing profile or
 * tournament thumbnail boards that share #tmb_lst. */
body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style {
  width: 870px;
  margin: 0;
  padding: 0;
  font-size: 0;
}

body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style > li {
  display: inline-block;
  vertical-align: top;
  width: 130px !important;
  max-width: 130px !important;
  height: 120px !important;
  margin: 0 30px 20px 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  font-size: 12px;
}


body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style > li:nth-child(5n) {
  margin-right: 0 !important;
}

body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style .tmb_wrp,
body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style .tmb_wrp img.tmb {
  width: 130px !important;
  height: 80px !important;
  max-width: 130px !important;
  object-fit: cover;
}

/* 갤러리의 장식용 PNG 대신 CSS 도형을 사용하고 기존 버튼·날짜·공지 문구는 유지한다. */
body.spf-page-gallery.spf-board-mode-list #bd .ico_16px.search,
body.spf-page-gallery.spf-board-mode-list #bd .ico_16px.write {
  position: relative;
  background-image: none;
  color: #555;
}

body.spf-page-gallery.spf-board-mode-list #bd .ico_16px.search::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
}

body.spf-page-gallery.spf-board-mode-list #bd .ico_16px.search::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

body.spf-page-gallery.spf-board-mode-list #bd .ico_16px.write::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 7px;
  width: 4px;
  height: 11px;
  background: currentColor;
  transform: rotate(45deg);
}

body.spf-page-gallery.spf-board-mode-list #bd .ico_16px.write::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 4px solid currentColor;
}

body.spf-page-gallery.spf-board-mode-list #bd .tmb_wrp .ribbon {
  background-image: none;
}

body.spf-page-gallery.spf-board-mode-list #bd .tmb_wrp .ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 40px;
  border-radius: 0 0 5px 0;
  background: #565b65;
}

body.spf-page-gallery.spf-board-mode-list #bd .tmb_wrp .ribbon.notice::before {
  background: #2456a8;
}

/* Public board pages use the fixed we_home canvas on desktop.  Collapse only
 * the board shell at phone widths so the existing main page/menu remains
 * untouched. */
@media (max-width: 768px) {
  html:not([data-spf-view-mode="desktop"]) body.spf-mid {
    min-width: 0;
    overflow-x: hidden;
    background: #fff;
  }

  /* Board routes share the public mobile header, while page.php keeps the
   * legacy mega menu for desktop widths. */
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .top_box,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .logo_line,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_topmenu,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .search {
    display: none !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_body,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_head {
    width: 100%;
    min-width: 0 !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_head {
    display: block;
    height: 42px !important;
    min-height: 42px !important;
    background: #222;
    border-bottom: 2px solid #666;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 76px 0 8px;
    box-sizing: border-box;
  }
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-auth {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-auth a,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-auth .btn_logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    border: 0;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-brand {
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 34px;
    margin-right: 72px;
    overflow: hidden;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-brand img {
    display: block;
    width: min(303px, 100%);
    max-width: 100%;
    height: auto;
    max-height: 34px;
    object-fit: contain;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap_button {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 1003;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap_button button {
    width: auto;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #666;
    border-radius: 2px;
    color: #fff;
    background: #333;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap_button button img {
    display: none;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap_button .sitemap_open::after {
    content: 'Menu  ›';
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap_button .sitemap_close::after {
    content: '‹ 돌아가기';
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid > .layout_content,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .layout_content {
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    padding: 0 10px;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_content .leftside,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_content .rightside,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid #quick_scroll2 {
    display: none !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_content .main_content,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .layout_content .main_content {
    width: 100% !important;
    max-width: none;
    float: none;
    margin: 0 !important;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #bd {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #bd .bd_hd {
    min-height: 30px;
    padding: 6px 0;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #bd .bd_bc {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid #bd .bd_font,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid #bd .bd_set {
    display: none !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-viewer .rd,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-board-post {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_hd {
    margin: 0 0 14px !important;
    padding: 0 0 10px;
    border-bottom: 1px solid #ddd;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_hd h1 {
    margin: 0 0 8px;
    font-size: 18px !important;
    line-height: 25px !important;
    font-weight: bold;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_hd .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin: 0;
    color: #666;
    font-size: 11px;
    line-height: 18px;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_hd .meta span {
    display: inline-block;
    margin: 0;
    white-space: nowrap;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_body,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_body .xe_content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_body img,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_body video,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_body iframe {
    max-width: 100% !important;
    height: auto;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_ft {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .rd_ft .btn {
    white-space: nowrap;
    word-break: keep-all;
  }

  /* 모바일 상세 화면에서는 별도 뷰어 링크를 노출하지 않는다. */
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_ft a.btn[href$="/viewer"] {
    display: none;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_lst_wrp,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .board,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .tl_srch .bd_tb {
    width: 100%;
    table-layout: fixed;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .tl_srch .itx_wrp {
    width: auto;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .tl_srch .srch_itx {
    width: 100%;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.zine:not(.card) {
    width: 100%;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.zine:not(.card) > li {
    padding: 12px 4px;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.zine:not(.card) .rt_area {
    margin-left: 0 !important;
    min-height: 0;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.zine:not(.card) .tmb_wrp {
    float: none;
    width: 100%;
    margin: 0 0 8px !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.zine:not(.card) .tmb_wrp img.tmb {
    width: 100%;
    max-width: 150px;
    height: auto;
    max-height: 90px;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.zine:not(.card) h3,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.zine:not(.card) .cnt,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.zine:not(.card) .info {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    padding: 8px 0 !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.card > li {
    width: auto !important;
    max-width: none;
    margin: 0;
    min-width: 0;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.card .tmb_wrp,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list #bd_zine.card .tmb_wrp img.tmb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
    width: 100%;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style > li {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style .tmb_wrp,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-gallery #tmb_lst.frame_style .tmb_wrp img.tmb {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll {
    overflow-x: hidden;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll th.no,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll td.no,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll th.author,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll td.author,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll th.time,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll td.time,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll th.m_no,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll td.m_no {
    display: none;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll th.title,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list .spf-board-table-scroll td.title {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .pagination {
    width: 100%;
    overflow-x: auto;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_foot,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_foot .notice,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_foot .notice > div {
    width: 100%;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
  }
}

/* Standalone viewer must remain within the viewport; legacy wide tables scroll inside the body. */
body.spf-viewer,
body.spf-viewer #viewer,
body.spf-viewer #bd,
body.spf-viewer .rd,
body.spf-viewer .rd_body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.spf-viewer {
  margin: 0;
  overflow-x: hidden;
}

body.spf-viewer #viewer {
  margin: 0 auto;
  padding: 16px;
}

body.spf-viewer .rd_body .xe_content {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-wrap: anywhere;
}

body.spf-viewer .rd_body .xe_content table {
  max-width: none;
  width: max-content;
  min-width: 100%;
}

body.spf-viewer .rd_body .xe_content img,
body.spf-viewer .rd_body .xe_content video,
body.spf-viewer .rd_body .xe_content iframe {
  max-width: 100% !important;
  height: auto;
}

/* Related-news zine rows keep the thumbnail and reading metadata side by side
 * on phones. Scope this to notice2 so gallery/profile zines retain their own
 * mobile layouts. */
@media (max-width: 768px) {
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) > li {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    padding: 10px 4px;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .rt_area {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 10px;
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0 !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .tmb_wrp {
    grid-column: 1;
    grid-row: 1 / span 3;
    float: none;
    width: 96px !important;
    height: 64px !important;
    min-width: 96px;
    margin: 0 !important;
    overflow: hidden;
    display: block !important;
    visibility: visible !important;
    background: #eee;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .tmb_wrp img.tmb,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .tmb_wrp > .no_img {
    display: block !important;
    width: 96px !important;
    height: 64px !important;
    max-width: none !important;
    object-fit: cover;
    box-sizing: border-box;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .tmb_wrp > .no_img {
    color: #aaa;
    line-height: 64px;
    text-align: center;
    font-size: 11px;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .tmb_wrp > .spf-thumbnail-fallback {
    display: none !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .tmb_wrp.spf-thumbnail-load-error > .spf-thumbnail-fallback {
    display: block !important;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) h3,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .cnt,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .info {
    grid-column: 2;
    min-width: 0;
    margin-left: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) h3 {
    grid-row: 1;
    max-height: 34px;
    margin: 0 0 3px;
    overflow: hidden;
    line-height: 17px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .cnt {
    grid-row: 2;
    max-height: 32px;
    margin: 0 0 3px;
    overflow: hidden;
    line-height: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .info {
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin-top: 0;
    line-height: 16px;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) .info .itm {
    min-width: 0;
    white-space: nowrap;
  }

  /* The fixed read-more anchor remains the full row hit area. */
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-list.spf-page-notice2 #bd_zine.zine:not(.card) > li > a.hx.fixed {
    z-index: 1;
  }
}

/* Search results retain an editable query while ordinary boards keep their toggle. */
body.spf-board-mode-list #faq_srch.spf-search-open {
  display: block;
  float: none;
  width: 100%;
  box-sizing: border-box;
}

body.spf-board-mode-list .spf-state {
  margin: 16px 0;
  padding: 20px 12px;
  color: #666;
  border-top: 1px solid #ddd;
  line-height: 1.6;
}

body.spf-board-mode-detail .rd_attachment,
body.spf-board-mode-viewer .rd_attachment {
  margin: 20px 8px;
  padding: 16px 12px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #555;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

body.spf-board-mode-detail .rd_attachment h3,
body.spf-board-mode-viewer .rd_attachment h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

body.spf-board-mode-detail .rd_attachment p,
body.spf-board-mode-viewer .rd_attachment p {
  margin: 0;
}

/* Quill/legacy article content must fit inside the mobile detail column. */
@media (max-width: 768px) {
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body {
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 8px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content p,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content div,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content span,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content a,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content li {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content table {
    max-width: 100%;
    table-layout: fixed;
  }

  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content img,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content video,
  html:not([data-spf-view-mode="desktop"]) body.spf-board-mode-detail .rd_body .xe_content iframe {
    max-width: 100% !important;
    height: auto;
  }
}

.spf-title-bold { font-weight: 700; }
@media (max-width: 768px) {
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-auth {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-auth a,
  html:not([data-spf-view-mode="desktop"]) body.spf-mid .spf-mobile-auth .btn_logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    border: 0;
  }
}

html[data-spf-view-mode="desktop"] {
  overflow-x: auto;
  overflow-y: auto;
}
html[data-spf-view-mode="desktop"] body {
  min-width: 1110px;
  width: 1110px;
  overflow: visible !important;
}
html[data-spf-view-mode="desktop"] .layout_head .layout_topmenu {
  width: 1110px !important;
}
html[data-spf-view-mode="desktop"] #container,
html[data-spf-view-mode="desktop"] .layout_body,
html[data-spf-view-mode="desktop"] .layout_head,
html[data-spf-view-mode="desktop"] .layout_content,
html[data-spf-view-mode="desktop"] .layout_foot,
html[data-spf-view-mode="desktop"] .main_content,
html[data-spf-view-mode="desktop"] #container .main_content {
  overflow: visible !important;
  overflow-x: visible !important;
}
html[data-spf-view-mode="desktop"] .layout_body,
html[data-spf-view-mode="desktop"] .layout_head,
html[data-spf-view-mode="desktop"] .layout_content,
html[data-spf-view-mode="desktop"] .layout_foot,
html[data-spf-view-mode="desktop"] #container .main_content {
  min-width: 1110px;
  width: 1110px;
  max-width: none;
}
html[data-spf-view-mode="desktop"] .layout_foot,
html[data-spf-view-mode="desktop"] .layout_foot table,
html[data-spf-view-mode="desktop"] .layout_foot td,
html[data-spf-view-mode="desktop"] .layout_foot .notice {
  overflow: visible !important;
}
html[data-spf-view-mode="desktop"] .footer-brand-cell {
  white-space: nowrap;
}

/* solid fill instead of pages_extra gradient; write-form cancel class */
.bd .bg_f_color {
  background-color: #333;
}
.bd_wrt .regist .cancel {
  position: absolute;
  right: 0;
  white-space: nowrap;
  word-break: keep-all;
  flex-shrink: 0;
}
.bd .bd_set .spf-board-write-btn {
  white-space: nowrap;
  word-break: keep-all;
  flex-shrink: 0;
}
html:not([data-spf-view-mode="desktop"]) .bd_wrt .regist .cancel {
  position: static;
}

/* 상세 화면의 이전글/다음글은 기존 게시판과 같은 단정한 텍스트 행으로 표시한다. */
#bd .spf-post-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin: 16px 0;
  padding: 0 16px;
  color: #333;
  font-size: 12px;
  line-height: 1.5;
}
#bd .spf-post-navigation-side { min-width: 0; }
#bd .spf-post-navigation a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  color: inherit;
  text-decoration: none;
}
#bd .spf-post-navigation-next a { justify-content: flex-end; }
#bd .spf-post-navigation-label { flex-shrink: 0; white-space: nowrap; font-weight: 700; }
#bd .spf-post-navigation-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bd .spf-post-navigation a:hover .spf-post-navigation-title { text-decoration: underline; }
#bd .spf-post-navigation a:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
#bd .spf-detail-board-list { margin-top: 32px; scroll-margin-top: 16px; }
#bd .spf-current-post > .title > a,
#bd .spf-current-post .rt_area h3 a,
#bd .spf-current-post .frame_tl { font-weight: 700; text-decoration: underline; }
@media (max-width: 600px) {
  #bd .spf-post-navigation { gap: 16px; padding: 0 8px; }
  #bd .spf-post-navigation a { min-height: 44px; gap: 4px; }
}