/* Today: one readable step larger, while keeping compact line lengths. */
.hero-today-item{padding:9px 10px!important;gap:9px!important}
.hero-today-kind{font-size:calc(10px * var(--oreumup-font-scale,1))!important}
.hero-today-copy b{font-size:calc(13px * var(--oreumup-font-scale,1))!important;line-height:1.28!important;letter-spacing:-.15px!important}
.hero-today-copy small{font-size:calc(10px * var(--oreumup-font-scale,1))!important;line-height:1.32!important}
.hero-today-facts{font-size:calc(11.2px * var(--oreumup-font-scale,1))!important;line-height:1.3!important;letter-spacing:-.2px!important}
html[data-oreumup-font-size="130"] .hero-today-copy b{font-size:calc(13.2px * var(--oreumup-font-scale,1))!important}
html[data-oreumup-font-size="130"] .hero-today-facts{font-size:calc(11.3px * var(--oreumup-font-scale,1))!important}
html[data-oreumup-font-size="130"] .hero-today-copy small{font-size:calc(10.1px * var(--oreumup-font-scale,1))!important}

/* Stock trade controls: every column must be allowed to shrink inside the modal.
   Avoid max-content/fixed-width combinations that overflow at 130% or narrow PC windows. */
#stockUploadModal .inventory-trade-card{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#stockUploadModal #inventoryModeTabs.oreumup-sync-tabs{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(3px,1vw,6px)!important;
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}
#stockUploadModal #inventoryModeTabs.oreumup-sync-tabs .inventory-mode-tab{
  min-width:0!important;
  width:auto!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding-left:clamp(3px,1.2vw,8px)!important;
  padding-right:clamp(3px,1.2vw,8px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#stockUploadModal #inventoryModeTabs.oreumup-sync-tabs .inventory-mode-tab.sync{
  width:auto!important;
}
#stockUploadModal .category-tabs{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  min-width:0!important;
}
#stockUploadModal .category-tab,
#stockUploadModal .board-filter-btn{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#stockUploadModal .board-filter-row{min-width:0!important}
@media(max-width:520px){
  #stockUploadModal #inventoryModeTabs.oreumup-sync-tabs{gap:3px!important}
  #stockUploadModal #inventoryModeTabs.oreumup-sync-tabs .inventory-mode-tab{
    padding-left:3px!important;
    padding-right:3px!important;
    font-size:calc(9.5px * var(--oreumup-font-scale,1))!important;
    letter-spacing:-.2px!important;
  }
  #stockUploadModal .category-tabs{gap:3px!important}
  #stockUploadModal .category-tab{
    padding-left:2px!important;
    padding-right:2px!important;
    font-size:calc(8.8px * var(--oreumup-font-scale,1))!important;
  }
}

/* At 130%, keep text as large as the control rectangle allows.
   Only narrow viewports step the type down; do not globally shrink the UI. */
html[data-oreumup-font-size="130"] #stockUploadModal #inventoryModeTabs.oreumup-sync-tabs .inventory-mode-tab{
  font-size:clamp(calc(8.9px * var(--oreumup-font-scale,1)),3.35vw,calc(11.8px * var(--oreumup-font-scale,1)))!important;
  line-height:1.14!important;
  letter-spacing:-.25px!important;
}
html[data-oreumup-font-size="130"] #stockUploadModal .category-tab{
  font-size:clamp(calc(8.5px * var(--oreumup-font-scale,1)),3.05vw,calc(11.1px * var(--oreumup-font-scale,1)))!important;
  line-height:1.14!important;
  letter-spacing:-.2px!important;
}
html[data-oreumup-font-size="130"] #stockUploadModal .quick-lead{
  font-size:clamp(calc(9.2px * var(--oreumup-font-scale,1)),2.95vw,calc(11.3px * var(--oreumup-font-scale,1)))!important;
}
html[data-oreumup-font-size="130"] #stockUploadModal .quick-step-title{
  font-size:clamp(calc(9.8px * var(--oreumup-font-scale,1)),3.1vw,calc(12.1px * var(--oreumup-font-scale,1)))!important;
}
html[data-oreumup-font-size="130"] #stockUploadModal .quick-field label{
  font-size:clamp(calc(9px * var(--oreumup-font-scale,1)),2.9vw,calc(11.5px * var(--oreumup-font-scale,1)))!important;
}
html[data-oreumup-font-size="130"] #stockUploadModal .oreumup-size-unit-input{
  font-size:clamp(calc(11px * var(--oreumup-font-scale,1)),3.6vw,calc(14px * var(--oreumup-font-scale,1)))!important;
}
html[data-oreumup-font-size="130"] #stockUploadModal .oreumup-size-unit-btn,
html[data-oreumup-font-size="130"] #stockUploadModal .oreumup-size-unit-select{
  font-size:clamp(calc(9px * var(--oreumup-font-scale,1)),3.2vw,calc(12.5px * var(--oreumup-font-scale,1)))!important;
}
html[data-oreumup-font-size="130"] #stockUploadModal .stock-size-help{
  font-size:clamp(calc(8px * var(--oreumup-font-scale,1)),2.55vw,calc(9.7px * var(--oreumup-font-scale,1)))!important;
}

/* My Trade stock cards: compact first line = 있어요/구해요 + 상품명 + 상호. */
#myTradeModal .my-trade-item.stock{height:auto!important;min-height:74px!important;flex-basis:auto!important}
#myTradeModal .my-trade-item.stock .my-trade-open.stock-inline{
  height:auto!important;min-height:74px!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;gap:5px!important;
  padding:7px 92px 7px 10px!important;
}
#myTradeModal .stock-copy{min-width:0!important}
#myTradeModal .my-trade-mainline{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}
#myTradeModal .my-trade-mainline .my-trade-kind{flex:0 0 auto;padding:3px 6px!important;font-size:calc(8.5px * var(--oreumup-font-scale,1))!important}
#myTradeModal .my-trade-mainline strong{display:block;flex:0 1 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(11.5px * var(--oreumup-font-scale,1))!important}
#myTradeModal .my-trade-owner{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:#8190a0;font-size:calc(9px * var(--oreumup-font-scale,1));font-weight:850}
#myTradeModal .my-trade-completed{flex:0 0 auto;border-radius:999px;padding:2px 5px;background:#eefaf3;color:#087a45;font-size:calc(7.5px * var(--oreumup-font-scale,1));font-weight:950}
#myTradeModal .my-trade-copy small{margin-top:2px!important}
#myTradeModal .my-trade-facts{display:block;margin-top:3px;color:#405f52;font-size:calc(10px * var(--oreumup-font-scale,1));font-weight:900;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#myTradeModal .my-trade-question-sub{display:block;margin-top:3px;color:#8593a3;font-size:calc(9px * var(--oreumup-font-scale,1));font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* My Trade header: reserve the close-button lane so 130% text never sits under it. */
#myTradeModal .modal-head{position:relative!important;padding-right:44px!important;align-items:flex-start!important}
#myTradeModal .modal-head-text{min-width:0!important}
#myTradeModal .modal-head p{line-height:1.45!important;overflow-wrap:anywhere}
#myTradeModal .modal-close{position:absolute!important;top:0!important;right:0!important;flex:0 0 auto!important}
#myTradeModal .my-trade-tabs{margin-top:8px!important}
html[data-oreumup-font-size="130"] #myTradeModal .modal-head p{
  font-size:clamp(calc(8.5px * var(--oreumup-font-scale,1)),2.6vw,calc(10px * var(--oreumup-font-scale,1)))!important;
}

/* Long shop/member names stay full-size when there is room and step down only on tighter layouts. */
#myTradeModal .my-trade-owner,
#ownerRoomModal .room-name{
  font-size:clamp(calc(7.6px * var(--oreumup-font-scale,1)),2.15vw,calc(9px * var(--oreumup-font-scale,1)))!important;
  letter-spacing:-.15px!important;
}

/* Stock facts + owner: in search/board cards the owner stays on the same
   information row at the far right.  Facts may wrap inside their own cell. */
.stock-facts-owner-line{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  column-gap:7px!important;
  min-width:0!important;
}
.stock-facts-owner-line .stock-trade-facts{
  min-width:0!important;
  margin:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.stock-card-owner{
  justify-self:end!important;
  align-self:start!important;
  max-width:100%!important;
  text-align:right!important;
  white-space:nowrap!important;
  font-size:clamp(calc(7.2px * var(--oreumup-font-scale,1)),2.25vw,calc(8.8px * var(--oreumup-font-scale,1)))!important;
  font-weight:850!important;
  color:#8190a0!important;
}

/* My Trade can still wrap facts/owner as a pair because the edit/delete lane is fixed. */
#myTradeModal .my-trade-facts-row{
  display:flex!important;
  align-items:baseline!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  min-width:0!important;
}
#myTradeModal .my-trade-facts{
  flex:1 1 210px!important;
  min-width:0!important;
  margin:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#myTradeModal .my-trade-owner{
  margin-left:auto!important;
  flex:0 1 auto!important;
  max-width:100%!important;
  text-align:right!important;
  white-space:nowrap!important;
}
/* Home recent activity: keep semantic meaning, but let the main screen stay calm. */
.recent-grid[data-home-panel="trade"] #inventory,
.recent-grid[data-home-panel="trade"] #questions{
  background:#fff!important;
  border-color:var(--line)!important;
}
#recentStockRows .row-item,
#recentQuestionRows .row-item{
  border-top:0!important;
  border-radius:12px!important;
  margin-top:5px!important;
  padding-left:7px!important;
  padding-right:7px!important;
  box-shadow:inset 0 0 0 1px transparent!important;
}
#recentStockRows .row-item:first-child,
#recentQuestionRows .row-item:first-child{margin-top:0!important}

/* Stock meaning = transaction state. Very low-saturation fill; badges carry the stronger signal. */
#recentStockRows .row-item:has(.tag.have),
#recentStockRows .row-item:has(.recent-stock-state.have){
  background:#fffbfd!important;
  box-shadow:inset 0 0 0 1px #f6e8ee!important;
}
#recentStockRows .row-item:has(.tag.need),
#recentStockRows .row-item:has(.recent-stock-state.need){
  background:#fffdfa!important;
  box-shadow:inset 0 0 0 1px #f4e8dc!important;
}
#recentStockRows .row-item:has(.tag.have):hover,
#recentStockRows .row-item:has(.recent-stock-state.have):hover{background:#fbe8f2!important}
#recentStockRows .row-item:has(.tag.need):hover,
#recentStockRows .row-item:has(.recent-stock-state.need):hover{background:#fff0df!important}

/* Information·Question meaning = category, again just a barely-visible tint. */
#recentQuestionRows .qrow:has(.category-badge.pesticide){
  background:#fbfdfb!important;
  box-shadow:inset 0 0 0 1px #e6f1e9!important;
}
#recentQuestionRows .qrow:has(.category-badge.nutrient){
  background:#fffdf9!important;
  box-shadow:inset 0 0 0 1px #f3ebdc!important;
}
#recentQuestionRows .qrow:has(.category-badge.material){
  background:#fbfdff!important;
  box-shadow:inset 0 0 0 1px #e5edf6!important;
}
#recentQuestionRows .qrow:has(.category-badge.other){
  background:#fdfcff!important;
  box-shadow:inset 0 0 0 1px #eee8f5!important;
}
#recentQuestionRows .qrow:has(.category-badge.pesticide):hover{background:#e6f6ec!important}
#recentQuestionRows .qrow:has(.category-badge.nutrient):hover{background:#fff1dc!important}
#recentQuestionRows .qrow:has(.category-badge.material):hover{background:#e8f2ff!important}
#recentQuestionRows .qrow:has(.category-badge.other):hover{background:#f1eaff!important}

/* Pesticide subtype is a true third level: almost full-size, but visually nested.
   42px category buttons -> 38px subtype pills (~90%), with an inset group background. */
#stockUploadModal #stockPesticideSubtypeTabs,
#stockBoardPesticideSubtypeFilters{
  width:calc(100% - 16px)!important;
  margin:6px 8px 10px!important;
  padding:4px!important;
  gap:5px!important;
  border:1px solid #dbe8e0!important;
  border-radius:16px!important;
  background:#f6faf8!important;
  box-sizing:border-box!important;
}
#stockUploadModal #stockPesticideSubtypeTabs .pesticide-subtype-tab,
#stockBoardPesticideSubtypeFilters .pesticide-subtype-tab{
  min-height:38px!important;
  border-radius:999px!important;
  padding:4px 6px!important;
  font-size:calc(9px * var(--oreumup-font-scale,1))!important;
  line-height:1.08!important;
  letter-spacing:-.15px!important;
  box-shadow:none!important;
}
@media(max-width:760px){
  #stockUploadModal #stockPesticideSubtypeTabs,
  #stockBoardPesticideSubtypeFilters{
    width:calc(100% - 12px)!important;
    margin:5px 6px 9px!important;
    padding:4px!important;
    gap:4px!important;
  }
  #stockUploadModal #stockPesticideSubtypeTabs .pesticide-subtype-tab,
  #stockBoardPesticideSubtypeFilters .pesticide-subtype-tab{
    min-height:38px!important;
    font-size:calc(8.6px * var(--oreumup-font-scale,1))!important;
    padding:4px 3px!important;
  }
}

#recentStockRows .recent-stock-info-line{display:block!important;min-width:0!important}
#recentStockRows .recent-stock-facts{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Recent stock: product/facts stay left, status is pinned to the far right.
   Category sits directly under the status so rows never reshuffle by text length. */
#recentStockRows .recent-stock-row{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  column-gap:8px!important;
  row-gap:2px!important;
  align-items:center!important;
  min-height:62px!important;
}
#recentStockRows .recent-stock-row .thumb{
  grid-column:1!important;
  grid-row:1 / 3!important;
  align-self:center!important;
}
#recentStockRows .recent-stock-row .item-name{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.25!important;
}
#recentStockRows .recent-stock-row .recent-stock-info-line{
  grid-column:2!important;
  grid-row:2!important;
}
#recentStockRows .recent-stock-row .recent-stock-state{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
}
#recentStockRows .recent-stock-row .category-badge{
  grid-column:3!important;
  grid-row:2!important;
  justify-self:end!important;
  align-self:center!important;
}
/* Mobile My Trade: give content two real lines instead of truncating behind
   the edit/delete lane.  Only individual long items shrink. */
@media(max-width:760px){
  #myTradeModal .my-trade-item.stock{
    height:auto!important;
    min-height:88px!important;
    flex-basis:auto!important;
  }
  #myTradeModal .my-trade-item.stock .my-trade-open.stock-inline{
    height:auto!important;
    min-height:88px!important;
    display:block!important;
    padding:9px 66px 9px 10px!important;
  }
  #myTradeModal .my-trade-mainline{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #myTradeModal .my-trade-mainline strong{
    flex:1 1 auto!important;
    max-width:none!important;
    min-width:0!important;
    font-size:clamp(calc(9.7px * var(--oreumup-font-scale,1)),3.5vw,calc(11.5px * var(--oreumup-font-scale,1)))!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #myTradeModal .my-trade-facts-row{margin-top:5px!important;line-height:1.28!important}
  #myTradeModal .my-trade-facts{
    flex:1 1 205px!important;
    font-size:clamp(calc(8.5px * var(--oreumup-font-scale,1)),3vw,calc(10px * var(--oreumup-font-scale,1)))!important;
  }
  #myTradeModal .my-trade-owner{
    font-size:clamp(calc(7.2px * var(--oreumup-font-scale,1)),2.45vw,calc(8.7px * var(--oreumup-font-scale,1)))!important;
  }
  #myTradeModal .my-trade-actions{
    top:7px!important;
    right:6px!important;
    flex-direction:column!important;
    gap:3px!important;
  }
  #myTradeModal .my-trade-actions button{
    min-width:50px!important;
    padding:5px 6px!important;
    font-size:clamp(calc(7.5px * var(--oreumup-font-scale,1)),2.6vw,calc(8.7px * var(--oreumup-font-scale,1)))!important;
  }
  #myTradeModal .my-trade-item:not(.stock){
    height:auto!important;
    min-height:82px!important;
    flex-basis:auto!important;
  }
  #myTradeModal .my-trade-item:not(.stock) .my-trade-open{
    height:auto!important;
    min-height:82px!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    padding:9px 66px 9px 10px!important;
  }
  #myTradeModal .my-trade-item:not(.stock) .my-trade-go{display:none!important}
  #myTradeModal .my-trade-item:not(.stock) .my-trade-copy strong{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.25!important;
  }
  #myTradeModal .my-trade-item:not(.stock) .my-trade-copy small,
  #myTradeModal .my-trade-question-sub{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.3!important;
    font-size:clamp(calc(7.4px * var(--oreumup-font-scale,1)),2.45vw,calc(8.8px * var(--oreumup-font-scale,1)))!important;
  }

  /* Mobile stock search/board: hide the shop name and return that width to
     the product/facts area. Desktop keeps the owner visible. */
  .stock-facts-owner-line{grid-template-columns:minmax(0,1fr)!important}
  .stock-card-owner{display:none!important}

  /* Recent stock is always exactly two text lines:
     line 1 = product, line 2 = size · quantity · transaction price. */
  #recentStockRows .recent-stock-row{
    grid-template-columns:32px minmax(0,1fr) auto!important;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
    min-height:62px!important;
    padding:7px 4px!important;
    column-gap:6px!important;
    row-gap:2px!important;
    overflow:hidden!important;
  }
  #recentStockRows .recent-stock-row .thumb{width:28px!important;height:36px!important}
  #recentStockRows .recent-stock-row .item-name{
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:clamp(calc(10.4px * var(--oreumup-font-scale,1)),3.6vw,calc(11.8px * var(--oreumup-font-scale,1)))!important;
    line-height:1.18!important;
  }
  #recentStockRows .recent-stock-info-line{min-width:0!important;overflow:hidden!important}
  #recentStockRows .recent-stock-facts{
    min-width:0!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:clamp(calc(8.6px * var(--oreumup-font-scale,1)),2.9vw,calc(9.6px * var(--oreumup-font-scale,1)))!important;
    line-height:1.18!important;
  }
  #recentStockRows .recent-stock-state,
  #recentStockRows .category-badge{
    font-size:clamp(calc(7.6px * var(--oreumup-font-scale,1)),2.6vw,calc(8.7px * var(--oreumup-font-scale,1)))!important;
    padding:3px 6px!important;
    max-width:72px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* 130% mobile: push useful content toward the largest safe type that still
     stays inside the fixed two-line grid. Overflow is clipped with ellipsis. */
  html[data-oreumup-font-size="130"] #recentStockRows .recent-stock-row .item-name{
    font-size:clamp(calc(12.2px * var(--oreumup-font-scale,1)),4.2vw,calc(13.5px * var(--oreumup-font-scale,1)))!important;
    line-height:1.15!important;
  }
  html[data-oreumup-font-size="130"] #recentStockRows .recent-stock-facts{
    font-size:clamp(calc(10px * var(--oreumup-font-scale,1)),3.5vw,calc(11px * var(--oreumup-font-scale,1)))!important;
    line-height:1.16!important;
    letter-spacing:-.16px!important;
  }
  html[data-oreumup-font-size="130"] #recentStockRows .recent-stock-state,
  html[data-oreumup-font-size="130"] #recentStockRows .category-badge{
    font-size:clamp(calc(8.4px * var(--oreumup-font-scale,1)),2.95vw,calc(9.3px * var(--oreumup-font-scale,1)))!important;
    padding:3px 6px!important;
  }

  /* Recent questions use the same rule: maximum readable type, one line,
     never outside the card. */
  #recentQuestionRows .qrow{min-height:58px!important;overflow:hidden!important}
  #recentQuestionRows .item-name{
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html[data-oreumup-font-size="130"] #recentQuestionRows .item-name{
    font-size:clamp(calc(12.4px * var(--oreumup-font-scale,1)),4.25vw,calc(13.8px * var(--oreumup-font-scale,1)))!important;
    line-height:1.16!important;
  }
  html[data-oreumup-font-size="130"] #recentQuestionRows .category-badge{
    max-width:76px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:clamp(calc(8.5px * var(--oreumup-font-scale,1)),3vw,calc(9.5px * var(--oreumup-font-scale,1)))!important;
    padding:3px 6px!important;
  }
  html[data-oreumup-font-size="130"] #recentQuestionRows .qmark{
    font-size:clamp(calc(10.8px * var(--oreumup-font-scale,1)),3.6vw,calc(11.8px * var(--oreumup-font-scale,1)))!important;
  }
}

/* Inventory-data organizer: never grow into an almost-full-window sheet. */
#oreumupInventorySyncModal{padding:10px!important}
#oreumupInventorySyncModal .oreumup-inv-card{
  width:min(820px,94vw)!important;
  max-height:min(82dvh,760px)!important;
  padding:11px!important;
  border-radius:15px!important;
  overflow:auto!important;
}
#oreumupInventorySyncModal .oreumup-inv-head{gap:7px!important}
#oreumupInventorySyncModal .oreumup-inv-head h2{font-size:calc(16px * var(--oreumup-font-scale,1))!important}
#oreumupInventorySyncModal .oreumup-inv-head p{margin-top:2px!important;line-height:1.3!important}
@media(max-width:600px){
  #oreumupInventorySyncModal .oreumup-inv-card{width:94vw!important;max-height:80dvh!important;padding:9px!important}
}

/* Responsive wording: internal action key stays "질문 게시판".
   Desktop shows the full service name; mobile uses the compact label. */
.oreumup-question-label-mobile{display:none!important}
@media(max-width:760px){
  .oreumup-question-label-desktop{display:none!important}
  .oreumup-question-label-mobile{display:inline!important;white-space:nowrap!important}
  .service[data-action="질문 게시판"] h3{letter-spacing:-.35px!important}

  /* Mobile stock mode labels now live in the real button text.
     Remove the legacy pseudo-label layer so text never appears twice. */
  #stockUploadModal #inventoryModeTabs .inventory-mode-tab{
    font-size:calc(13.5px * var(--oreumup-font-scale,1))!important;
    line-height:1.08!important;
    font-weight:950!important;
    letter-spacing:-.45px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #stockUploadModal #inventoryModeTabs .inventory-mode-tab::after{
    content:none!important;
    display:none!important;
  }
  html[data-oreumup-font-size="130"] #stockUploadModal #inventoryModeTabs .inventory-mode-tab{
    font-size:calc(13.5px * var(--oreumup-font-scale,1))!important;
  }

  /* Information-question board on mobile: remove the two red-marked helper areas.
     Keep the close button, "정보·질문 게시글", filters and write button. */
  #questionWriteModal .modal-head{
    justify-content:flex-end!important;
    min-height:44px!important;
    padding-bottom:7px!important;
  }
  #questionWriteModal .modal-head-text{display:none!important}
  #questionWriteModal .question-board-actions>span{display:none!important}
  #questionWriteModal .question-board-head{padding-top:9px!important;gap:10px!important}
  #questionWriteModal .question-board-head>strong{
    font-size:clamp(calc(14px * var(--oreumup-font-scale,1)),4.65vw,calc(17px * var(--oreumup-font-scale,1)))!important;
    line-height:1.12!important;
    white-space:nowrap!important;
  }
  html[data-oreumup-font-size="130"] #questionWriteModal .question-board-head>strong{
    font-size:clamp(calc(15.5px * var(--oreumup-font-scale,1)),5.1vw,calc(18px * var(--oreumup-font-scale,1)))!important;
  }
  #questionWriteModal .question-write-open{
    font-size:clamp(calc(10.5px * var(--oreumup-font-scale,1)),3.45vw,calc(12.5px * var(--oreumup-font-scale,1)))!important;
  }
  html[data-oreumup-font-size="130"] #questionWriteModal .board-filter-btn{
    font-size:clamp(calc(9.8px * var(--oreumup-font-scale,1)),3.25vw,calc(11.8px * var(--oreumup-font-scale,1)))!important;
  }
}

/* Type cards: almost-white tints for instant visual grouping.
   Have=bright pale pink, Need=warm cream yellow, Information·Question=blue. */
#myTradeModal .my-trade-item:has(.my-trade-kind.have){
  background:#fff9fc!important;
}
#myTradeModal .my-trade-item:has(.my-trade-kind.need){
  background:#fffdf5!important;
}
#myTradeModal .my-trade-item:has(.my-trade-kind.question){
  background:#f8fbff!important;
}
#myTradeModal .my-trade-item:has(.my-trade-kind.have):hover{background:#fff7fb!important}
#myTradeModal .my-trade-item:has(.my-trade-kind.need):hover{background:#fffaf0!important}
#myTradeModal .my-trade-item:has(.my-trade-kind.question):hover{background:#f6faff!important}

#stockList .inventory-board-item.have,
#inventoryBoardList .inventory-board-item.have{
  background:#fff9fc!important;
  border-left-color:#e79bbb!important;
}
#stockList .inventory-board-item.need,
#inventoryBoardList .inventory-board-item.need{
  background:#fffdf5!important;
  border-left-color:#d8c16f!important;
}
#stockList .inventory-board-item.have:hover,
#inventoryBoardList .inventory-board-item.have:hover{background:#fff7fb!important}
#stockList .inventory-board-item.need:hover,
#inventoryBoardList .inventory-board-item.need:hover{background:#fffaf0!important}

/* Have state is soft pink everywhere it is used as a transaction status. */
#stockModal .trade-badge.have,
#inventoryBoardList .trade-badge.have,
#stockList .trade-badge.have,
#myTradeModal .my-trade-kind.have,
.tag.have,
.summary-chip[data-summary-type="have"],
.board-filter-btn[data-stock-search-type="have"].active,
.board-filter-btn[data-stock-board-type="have"].active,
#stockUploadModal [data-inventory-mode="have"].active{
  background:#fdf2f8!important;
  color:#b83268!important;
  border-color:#f2bfd2!important;
}
#myTradeModal .my-trade-item:has(.my-trade-kind.have){
  border-color:#f3d7e3!important;
}

/* Need state is a muted cream yellow, not vivid yellow. */
#stockModal .trade-badge.need,
#inventoryBoardList .trade-badge.need,
#stockList .trade-badge.need,
#myTradeModal .my-trade-kind.need,
.tag.need,
.summary-chip[data-summary-type="need"],
.board-filter-btn[data-stock-search-type="need"].active,
.board-filter-btn[data-stock-board-type="need"].active,
#stockUploadModal [data-inventory-mode="need"].active{
  background:#fff8dc!important;
  color:#80651a!important;
  border-color:#eadca6!important;
}
#myTradeModal .my-trade-item:has(.my-trade-kind.need){
  border-color:#f1e5bd!important;
}

#questionBoardList .question-board-item{
  background:#f8fbff!important;
}
#questionBoardList .question-board-item:hover{
  background:#f6faff!important;
}

/* Main service cards: hard final mapping.
   Question = green, Special Features = purple. */
article.service[data-action="질문 게시판"]{
  background:linear-gradient(145deg,#ffffff,#e8f8ee)!important;
  background-color:#e8f8ee!important;
  border-color:#a8d9ba!important;
}
article.service[data-action="질문 게시판"] .svc-ico{
  background:#e4faed!important;color:#08a653!important;
}
article.service[data-action="특수기능"]{
  background:linear-gradient(145deg,#ffffff,#f1ebff)!important;
  background-color:#f1ebff!important;
  border-color:#d2c0f3!important;
}
article.service[data-action="특수기능"] .svc-ico{
  background:#f0eaff!important;color:#7055e3!important;
}

/* Quote member helper: keep member/PIN helpers out of the customer quote flow until requested. */
.hqt-quote-member-details{
  margin:0 0 10px!important;
  border:1px solid #d8e5de!important;
  border-radius:13px!important;
  background:#f8fbf9!important;
  overflow:hidden!important;
}
.hqt-quote-member-details>summary{
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:9px 12px!important;
  cursor:pointer!important;
  list-style:none!important;
  color:#355849!important;
  font-weight:950!important;
}
.hqt-quote-member-details>summary::-webkit-details-marker{display:none!important}
.hqt-quote-member-details>summary span{
  font-size:calc(12.5px * var(--oreumup-font-scale,1))!important;
  line-height:1.2!important;
}
.hqt-quote-member-details>summary small{
  flex:0 0 auto!important;
  font-size:0!important;
  color:#71877c!important;
  font-weight:900!important;
}
.hqt-quote-member-details>summary small::before{
  content:"펼쳐보기";
  font-size:calc(10px * var(--oreumup-font-scale,1))!important;
}
.hqt-quote-member-details[open]>summary{
  border-bottom:1px solid #e0e9e4!important;
  background:#f3f8f5!important;
}
.hqt-quote-member-details[open]>summary small::before{content:"접기"}
.hqt-quote-member-panel{padding:10px!important}
.hqt-quote-member-panel .hqt-seller-tip{margin-top:9px!important}
.hqt-quote-member-panel .hqt-actions{margin-top:8px!important}
@media(max-width:760px){
  .hqt-quote-member-details>summary span{
    font-size:calc(13px * var(--oreumup-font-scale,1))!important;
  }
  .hqt-quote-member-details>summary small::before{
    font-size:calc(10.5px * var(--oreumup-font-scale,1))!important;
  }
}

/* Final service-title parity: use the exact same title metrics as "내 거래".
   Wrapper spans (정보·질문) must inherit the h3 metrics instead of looking smaller. */
.service-grid[data-home-panel="features"] article.service h3{
  font-size:calc(20px * var(--oreumup-font-scale,1))!important;
  line-height:1.15!important;
  font-weight:900!important;
  letter-spacing:-.4px!important;
}
.service-grid[data-home-panel="features"] article.service h3 span{
  font:inherit!important;
  font-size:1em!important;
  line-height:inherit!important;
  font-weight:inherit!important;
  letter-spacing:inherit!important;
}
@media(max-width:760px){
  .service-grid[data-home-panel="features"] article.service h3{
    font-size:calc(17px * var(--oreumup-font-scale,1))!important;
    line-height:1.14!important;
  }
}

/* Home primary actions: hero CTAs stay subtle; the four main-service cards
   get one extra step of depth. Tabs/filters remain flat. */
.hero .cta-row>.cta{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(18,52,78,.045),
    0 4px 8px rgba(20,47,75,.075),
    0 1px 2px rgba(20,47,75,.055)!important;
  transform:translateY(-1px);
  transition:box-shadow .14s ease,transform .14s ease!important;
}
.hero .cta-row>.cta:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(18,52,78,.05),
    0 5px 10px rgba(20,47,75,.085),
    0 2px 3px rgba(20,47,75,.055)!important;
}
.hero .cta-row>.cta:active{
  transform:translateY(1px)!important;
  box-shadow:
    inset 0 1px 2px rgba(20,47,75,.05),
    0 2px 4px rgba(20,47,75,.07)!important;
}

.service-grid[data-home-panel="features"]>article.service{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 0 -2px 0 rgba(18,52,78,.055),
    0 6px 11px rgba(20,47,75,.095),
    0 2px 3px rgba(20,47,75,.06)!important;
  transform:translateY(-2px);
  transition:box-shadow .14s ease,transform .14s ease!important;
}
.service-grid[data-home-panel="features"]>article.service:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -2px 0 rgba(18,52,78,.06),
    0 7px 13px rgba(20,47,75,.11),
    0 2px 4px rgba(20,47,75,.065)!important;
}
.service-grid[data-home-panel="features"]>article.service:active{
  transform:translateY(1px)!important;
  box-shadow:
    inset 0 1px 2px rgba(20,47,75,.055),
    0 2px 5px rgba(20,47,75,.08)!important;
}

/* My Trade readability: PC and mobile share the same larger reading scale.
   Only layout dimensions change on narrow screens. */
#myTradeModal .modal-head h2{
  font-size:calc(22px * var(--oreumup-font-scale,1))!important;
  line-height:1.12!important;
}
#myTradeModal .modal-head p{
  font-size:calc(11.5px * var(--oreumup-font-scale,1))!important;
  line-height:1.4!important;
}
#myTradeModal .my-trade-tab{
  min-height:48px!important;
  font-size:calc(13px * var(--oreumup-font-scale,1))!important;
  line-height:1.15!important;
}
#myTradeModal .my-trade-item{
  height:auto!important;
  min-height:84px!important;
  flex-basis:auto!important;
}
#myTradeModal .my-trade-open{
  height:auto!important;
  min-height:84px!important;
  padding-top:11px!important;
  padding-bottom:11px!important;
}
#myTradeModal .my-trade-kind,
#myTradeModal .my-trade-mainline .my-trade-kind{
  font-size:calc(10.5px * var(--oreumup-font-scale,1))!important;
  line-height:1.08!important;
  padding:4px 7px!important;
}
#myTradeModal .my-trade-copy strong,
#myTradeModal .my-trade-mainline strong{
  font-size:calc(14px * var(--oreumup-font-scale,1))!important;
  line-height:1.18!important;
}
#myTradeModal .my-trade-copy small,
#myTradeModal .my-trade-question-sub{
  font-size:calc(10.5px * var(--oreumup-font-scale,1))!important;
  line-height:1.28!important;
}
#myTradeModal .my-trade-facts{
  font-size:calc(12px * var(--oreumup-font-scale,1))!important;
  line-height:1.24!important;
}
#myTradeModal .my-trade-owner{
  font-size:calc(10px * var(--oreumup-font-scale,1))!important;
  line-height:1.2!important;
}
#myTradeModal .my-trade-completed{
  font-size:calc(9px * var(--oreumup-font-scale,1))!important;
}
#myTradeModal .my-trade-actions button{
  min-height:31px!important;
  padding:6px 9px!important;
  font-size:calc(10px * var(--oreumup-font-scale,1))!important;
  line-height:1.05!important;
}
#myTradeModal .my-trade-go{
  font-size:calc(22px * var(--oreumup-font-scale,1))!important;
}
@media(min-width:761px){
  /* PC My Trade at 130%: keep text size, pack content by trimming only whitespace. */
  #myTradeModal .my-trade-list{
    gap:3px!important;
    max-height:64vh!important;
  }
  #myTradeModal .my-trade-tabs{
    margin-top:4px!important;
    margin-bottom:5px!important;
    gap:5px!important;
  }
  #myTradeModal .my-trade-tab{
    min-height:42px!important;
  }
  #myTradeModal .my-trade-item,
  #myTradeModal .my-trade-item:not(.stock){
    min-height:62px!important;
  }
  #myTradeModal .my-trade-open,
  #myTradeModal .my-trade-item:not(.stock) .my-trade-open{
    min-height:62px!important;
    padding-top:4px!important;
    padding-bottom:4px!important;
  }
  #myTradeModal .my-trade-item.stock{
    min-height:58px!important;
  }
  #myTradeModal .my-trade-item.stock .my-trade-open.stock-inline{
    min-height:58px!important;
    padding-top:4px!important;
    padding-bottom:4px!important;
  }
  #myTradeModal .my-trade-actions{
    top:4px!important;
  }
  #myTradeModal .my-trade-copy small,
  #myTradeModal .my-trade-question-sub{
    margin-top:0!important;
  }
  #myTradeModal .my-trade-facts{
    margin-top:0!important;
  }
}

@media(max-width:760px){
  /* Keep all four My Trade filters on one row on every narrow screen.
     Preserve type size; reduce only the tab rectangles and gaps. */
  #myTradeModal .my-trade-tabs{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
    margin-top:4px!important;
    margin-bottom:5px!important;
  }
  #myTradeModal .my-trade-tab{
    min-width:0!important;
    min-height:36px!important;
    padding:4px 2px!important;
    font-size:calc(13px * var(--oreumup-font-scale,1))!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }
  #myTradeModal .my-trade-item,
  #myTradeModal .my-trade-item.stock,
  #myTradeModal .my-trade-item:not(.stock){
    min-height:96px!important;
  }
  #myTradeModal .my-trade-item.stock .my-trade-open.stock-inline,
  #myTradeModal .my-trade-item:not(.stock) .my-trade-open{
    min-height:96px!important;
  }
  #myTradeModal .my-trade-facts{
    font-size:calc(11.5px * var(--oreumup-font-scale,1))!important;
  }
  #myTradeModal .my-trade-owner{
    font-size:calc(9.5px * var(--oreumup-font-scale,1))!important;
  }
}


/* Narrow PC app / browser at 130%: keep the same readable type, remove only
   whitespace so My Trade shows substantially more rows. */
@media(max-width:760px) and (pointer:fine){
  #myTradeModal .my-trade-tabs{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
    margin-top:4px!important;
    margin-bottom:5px!important;
  }
  #myTradeModal .my-trade-tab{
    min-width:0!important;
    min-height:36px!important;
    padding:4px 2px!important;
    font-size:calc(13px * var(--oreumup-font-scale,1))!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }
  #myTradeModal .my-trade-list{
    gap:3px!important;
    max-height:none!important;
  }
  #myTradeModal .my-trade-item,
  #myTradeModal .my-trade-item.stock,
  #myTradeModal .my-trade-item:not(.stock){
    min-height:60px!important;
    height:auto!important;
    flex-basis:auto!important;
  }
  #myTradeModal .my-trade-item.stock .my-trade-open.stock-inline,
  #myTradeModal .my-trade-item:not(.stock) .my-trade-open{
    min-height:60px!important;
    height:auto!important;
    padding:4px 72px 4px 9px!important;
  }
  #myTradeModal .my-trade-item.stock .my-trade-open.stock-inline{display:block!important}
  #myTradeModal .my-trade-item:not(.stock) .my-trade-open{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
  }
  #myTradeModal .my-trade-actions{
    top:4px!important;
    right:5px!important;
    flex-direction:column!important;
    gap:2px!important;
  }
  #myTradeModal .my-trade-actions button{
    min-width:46px!important;
    min-height:25px!important;
    padding:4px 6px!important;
    font-size:calc(10px * var(--oreumup-font-scale,1))!important;
  }
  #myTradeModal .my-trade-mainline .my-trade-kind{
    font-size:calc(10.5px * var(--oreumup-font-scale,1))!important;
  }
  #myTradeModal .my-trade-mainline strong,
  #myTradeModal .my-trade-copy strong{
    font-size:calc(14px * var(--oreumup-font-scale,1))!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #myTradeModal .my-trade-facts-row{margin-top:1px!important;line-height:1.2!important}
  #myTradeModal .my-trade-facts{
    margin-top:0!important;
    font-size:calc(12px * var(--oreumup-font-scale,1))!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #myTradeModal .my-trade-owner{
    font-size:calc(10px * var(--oreumup-font-scale,1))!important;
  }
  #myTradeModal .my-trade-copy small,
  #myTradeModal .my-trade-question-sub{
    margin-top:0!important;
    font-size:calc(10.5px * var(--oreumup-font-scale,1))!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #myTradeModal .my-trade-item:not(.stock) .my-trade-go{display:none!important}
}

/* Tools modal: white 3D buttons, not flat cards. */
#toolsModal .modal-head h2{
  font-size:calc(22px * var(--oreumup-font-scale,1))!important;
}
#toolsModal .modal-head p{
  font-size:calc(12px * var(--oreumup-font-scale,1))!important;
  line-height:1.35!important;
}
#toolsModal .tools-grid{gap:13px!important}
#toolsModal .tool-launch{
  min-height:108px!important;
  border:1px solid #d7e0dc!important;
  border-bottom-color:#c9d4ce!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 58%,#f8faf9 100%)!important;
  box-shadow:
    0 5px 10px rgba(28,55,42,.085),
    0 2px 0 rgba(150,169,159,.22),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(187,202,194,.16)!important;
  transform:translateY(0);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease!important;
}
#toolsModal .tool-launch:hover{
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 58%,#f7faf8 100%)!important;
  border-color:#b8cec2!important;
  box-shadow:
    0 6px 12px rgba(28,55,42,.095),
    0 2px 0 rgba(136,160,147,.22),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(166,192,178,.18)!important;
}
#toolsModal .tool-launch:active{
  transform:translateY(2px)!important;
  box-shadow:
    0 3px 6px rgba(28,55,42,.075),
    0 1px 0 rgba(136,160,147,.18),
    inset 0 1px 3px rgba(40,70,54,.045)!important;
}
#toolsModal .tool-launch>span{
  font-size:calc(30px * var(--oreumup-font-scale,1))!important;
}
#toolsModal .tool-launch strong{
  font-size:calc(17px * var(--oreumup-font-scale,1))!important;
  line-height:1.12!important;
  color:#111!important;
}
#toolsModal .tool-launch small{
  font-size:calc(12.5px * var(--oreumup-font-scale,1))!important;
  line-height:1.28!important;
  color:#71837a!important;
}
@media(max-width:760px){
  #toolsModal .tools-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
    padding:13px!important;
  }
  #toolsModal .tool-launch{
    min-height:116px!important;
    padding:13px 10px!important;
    grid-template-columns:34px minmax(0,1fr)!important;
  }
  #toolsModal .tool-launch strong{
    font-size:calc(16.5px * var(--oreumup-font-scale,1))!important;
  }
  #toolsModal .tool-launch small{
    font-size:calc(12px * var(--oreumup-font-scale,1))!important;
  }
}

/* Room top tabs: semantic pesticide colors only when selected. */
#ownerRoomModal .room-tab[data-room-tab="partner"].active{
  background:#e8f8ee!important;color:#087b45!important;border-bottom-color:#94d3ad!important;
}
#ownerRoomModal .room-tab[data-room-tab="trade"].active{
  background:#fff0f5!important;color:#a83d66!important;border-bottom-color:#efb5c8!important;
}
#ownerRoomModal .room-tab[data-room-tab="dm"].active{
  background:#fff8d9!important;color:#806200!important;border-bottom-color:#e8cf72!important;
}

/* Conversation text should read as a clean log, not as stacked rectangular cards. */
#ownerRoomModal .room-bubble{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:4px 1px!important;
}