/* Maple Price Board CSS module: Mobile layout and iOS-safe navigation. Original index.css lines 7066-8560. */

/* v165 · 모바일 전면 개편 + 절제된 저장 UI */
.item-result-favorite,
.item-favorite-button {
  color: #7f8994;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.item-result-favorite:hover,
.item-result-favorite:focus-visible,
.item-favorite-button:hover,
.item-favorite-button:focus-visible {
  color: #39424c;
  background: #f3f5f7;
  border-color: #e2e6ea;
  transform: none;
  box-shadow: none;
}
.item-result-favorite.active,
.item-favorite-button.active {
  color: #2f3943;
  background: #eef1f4;
  border-color: #dce2e7;
}
.item-favorite-button .favorite-icon,
.item-result-favorite .bookmark-glyph,
.favorite-empty-bookmark {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 14px;
  flex: 0 0 16px;
}
.item-favorite-button .favorite-icon::before,
.item-favorite-button .favorite-icon::after,
.item-result-favorite .bookmark-glyph::before,
.item-result-favorite .bookmark-glyph::after,
.favorite-empty-bookmark::before,
.favorite-empty-bookmark::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 8px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(90deg, currentColor 0 1.25px, transparent 1.25px 100%),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
  box-sizing: border-box;
}
.item-favorite-button .favorite-icon::before,
.item-result-favorite .bookmark-glyph::before,
.favorite-empty-bookmark::before {
  left: 1px;
  opacity: .72;
  transform: rotate(-6deg);
}
.item-favorite-button .favorite-icon::after,
.item-result-favorite .bookmark-glyph::after,
.favorite-empty-bookmark::after {
  right: 1px;
  transform: rotate(4deg);
}
.item-favorite-button.active .favorite-icon::before,
.item-favorite-button.active .favorite-icon::after,
.item-result-favorite.active .bookmark-glyph::before,
.item-result-favorite.active .bookmark-glyph::after {
  background:
    linear-gradient(90deg, currentColor 0 1.25px, rgba(255,255,255,.18) 1.25px 100%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
}
.favorite-empty-bookmark {
  color: #9aa4ae;
}

@media (max-width: 760px) {
  html { scroll-padding-top: 64px; }
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    background: #f5f6f8;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: 58px;
    background: rgba(31,41,51,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(31,41,51,.12);
  }
  .header-inner {
    width: calc(100% - 24px);
    min-height: 58px;
    padding: 0;
  }
  .brand { gap: 8px; }
  .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 11px;
    box-shadow: none;
  }
  .brand-copy { gap: 0; }
  .brand-title-row { gap: 5px; }
  .brand-copy strong { font-size: 15px; }
  .liberation-day-badge {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 9px;
  }
  .brand-copy small,
  .beta-badge { display: none !important; }
  .header-actions { gap: 0; }

  .page-tabs {
    position: fixed;
    z-index: 120;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 2px;
    padding: 5px;
    border: 1px solid rgba(210,216,222,.9);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 32px rgba(31,41,51,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .page-tab {
    position: relative;
    min-width: 0;
    min-height: 52px;
    padding: 27px 2px 5px;
    border-radius: 13px;
    color: #7a8490;
    font-size: 9px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .page-tab::before {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    color: currentColor;
    font-size: 17px;
    line-height: 1;
    font-weight: 500;
  }
  .page-tab[data-page-tab="search"]::before { content: "⌕"; font-size: 22px; top: 5px; }
  .page-tab[data-page-tab="today"]::before { content: "▥"; }
  .page-tab[data-page-tab="judge"]::before { content: "↗"; }
  .page-tab[data-page-tab="sell"]::before { content: "↙"; }
  .page-tab[data-page-tab="meso"]::before { content: "₩"; font-weight: 800; }
  .page-tab.active {
    color: #1f2933;
    background: #f0f2f4;
    box-shadow: none;
  }

  .page-shell {
    width: calc(100% - 16px);
    margin-top: 8px;
    padding-bottom: 20px;
  }
  .surface-card,
  .search-card,
  .state-card {
    box-shadow: 0 4px 16px rgba(31,41,51,.045);
    border-color: #e4e8ec;
  }
  .search-card,
  .item-overview,
  .equipment-panel,
  .content-card,
  .today-board,
  .meso-market-page,
  .purchase-guide-hero,
  .sale-guide-hero {
    border-radius: 15px;
  }

  .home-search-flow { gap: 8px; }
  .home-primary-search { padding: 16px 14px; }
  .home-primary-search .search-copy h1 {
    margin-top: 1px;
    font-size: 21px;
    line-height: 1.25;
  }
  .home-primary-search .search-copy p { display: none; }
  .home-primary-search .search-box { margin-top: 12px; }
  .search-box input {
    min-height: 50px;
    padding: 13px 13px 13px 43px;
    border-radius: 13px;
    background: #f7f8fa;
    font-size: 16px;
  }
  .search-icon { left: 14px; }

  .home-primary-search .recent-searches {
    margin-top: 7px;
    gap: 5px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .home-primary-search .recent-searches::-webkit-scrollbar { display: none; }
  .home-primary-search .recent-searches-label {
    display: none;
  }
  .recent-search-chip {
    flex: 0 0 auto;
    max-width: 180px;
  }

  .item-results,
  .item-results.is-suggestions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    max-height: min(310px, 46vh);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
  }
  .item-result-button {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    padding: 7px 9px;
    border-radius: 11px;
    white-space: normal;
  }
  .item-result-thumb {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
  }
  .item-result-copy { flex: 1 1 auto; gap: 3px; }
  .item-result-copy strong { font-size: 13px; }
  .item-result-copy small { display: block; font-size: 9px; }
  .item-result-favorite {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin-left: auto;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
  }

  .home-primary-search .guide-discovery {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
  }
  .home-primary-search .guide-discovery-card {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 7px;
    padding: 10px;
    border-radius: 12px;
  }
  .guide-discovery-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 15px;
  }
  .guide-discovery-copy small { font-size: 9px; }
  .guide-discovery-copy strong { font-size: 12px; line-height: 1.3; }
  .guide-discovery-copy em,
  .guide-discovery-card > b { display: none; }

  .home-primary-search .home-today-banner {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 13px;
  }
  .home-primary-search .home-today-banner > :first-child:not(.today-banner-copy) { display: none; }
  .home-primary-search .home-today-banner .today-banner-copy span { font-size: 8px; }
  .home-primary-search .home-today-banner .today-banner-copy strong { font-size: 12px; white-space: normal; }
  .home-primary-search .home-today-banner .today-banner-copy small { display: none; }
  .home-primary-search .home-today-banner > button {
    grid-column: auto;
    width: auto;
    padding: 7px 9px;
    font-size: 9px;
  }

  #detail { margin-top: 8px; }
  #detail > .item-overview {
    display: block;
    padding: 14px;
    border-top-width: 2px;
  }
  .item-main { align-items: center; gap: 10px; }
  .item-image {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 12px;
  }
  .item-copy { min-width: 0; width: 100%; }
  .item-eyebrow { font-size: 9px; }
  .item-title-row { gap: 6px; align-items: center; }
  .item-title-row h2 { font-size: 19px; line-height: 1.25; }
  .item-guide { margin-top: 5px; font-size: 10px; line-height: 1.45; }
  .freshness-row { margin-top: 7px; gap: 5px; }
  .item-favorite-button {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
  }
  .item-favorite-button .favorite-label { display: none; }

  .item-guide-actions {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    margin-top: 11px;
  }
  .item-guide-action {
    padding: 9px 10px;
    border-radius: 11px;
  }
  .item-guide-action span { font-size: 8px; }
  .item-guide-action strong { font-size: 11px; }
  .item-guide-action b { display: none; }

  .world-control { margin-top: 11px; }
  .world-control .control-label { font-size: 9px; margin-bottom: 5px; }
  .world-control .segmented-control { gap: 3px; }
  .world-control .segment { padding: 8px 4px; font-size: 9px; }

  .equipment-panel,
  .content-card { padding: 14px; }
  .section-title-row h3,
  .filter-heading-row h4 { font-size: 15px; }
  .section-description,
  #filterHeadingDescription { font-size: 10px; line-height: 1.45; }
  .group-cards {
    gap: 7px;
    margin-left: -2px;
    margin-right: -2px;
  }
  .group-card { flex-basis: 210px; padding: 11px; border-radius: 12px; }
  .filter-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .filter-grid label span { font-size: 9px; }
  .filter-grid select { min-height: 40px; font-size: 11px; border-radius: 10px; }
  .filter-heading-row .secondary-button,
  .section-title-row .text-button { align-self: flex-start; }

  .trade-toolbar { gap: 8px; }
  .trade-toolbar .segmented-control {
    display: flex;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
  }
  .trade-toolbar .segmented-control::-webkit-scrollbar { display: none; }
  .trade-toolbar .segmented-control button { flex: 0 0 auto; min-width: 86px; }
  .sort-control { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px; align-items: center; }
  .sort-control select { width: 100%; min-height: 40px; }

  .sales-list { display: grid; gap: 8px; }
  .sale-card { border-radius: 13px; }
  .sale-main { gap: 9px; }
  .sale-price { font-size: 20px; }
  .sale-side { align-items: flex-start; }

  .today-board,
  .meso-market-page { padding: 14px; }
  .today-board-heading,
  .meso-market-page-heading,
  .sale-guide-section-heading,
  .meso-market-calculator-heading {
    display: block;
  }
  .today-board-heading h2,
  .meso-market-page-heading h2 { font-size: 20px; }
  .today-board-heading p,
  .meso-market-page-heading p { font-size: 10px; }
  .today-board-meta,
  .meso-market-meta { margin-top: 8px; align-items: flex-start; }

  .today-favorites { padding: 12px; border-radius: 13px; }
  .today-favorites-heading p { display: none; }
  .today-favorite-row { border-radius: 11px; }
  .today-favorite-open { padding: 9px; }

  .purchase-guide-hero,
  .sale-guide-hero,
  .purchase-guide-character-card,
  .sale-guide-character-card,
  .purchase-guide-equipped-section { padding: 14px; }
  .purchase-guide-hero h1,
  .sale-guide-hero h1 { font-size: 21px; }
  .purchase-guide-hero p,
  .sale-guide-hero p { font-size: 10px; }
  .purchase-guide-hero-note,
  .sale-guide-hero-note { margin-top: 10px; padding: 10px; border-radius: 11px; }
  .sale-guide-character-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
  .sale-guide-character-form input { min-width: 0; }
  .purchase-guide-equipment-grid,
  .sale-guide-equipment-grid { gap: 7px; }

  .meso-market-calculator { padding: 12px; border-radius: 13px; }
  .meso-calc-grid { gap: 8px; }
  .meso-calc-result { min-height: 112px; }
  .meso-calc-result > strong b { font-size: 23px; }

  .site-footer { padding-bottom: 10px; }
}

@media (max-width: 390px) {
  .page-tab { font-size: 8px; }
  .home-primary-search .guide-discovery { grid-template-columns: 1fr 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .item-guide-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width:760px){
  .item-result-entry{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:5px;align-items:stretch}
  .item-result-button{min-width:0}
  .item-title-row{flex-direction:row;align-items:center}
}


/* v168 · 검색 즐겨찾기 제거 + 상세 저장 버튼 단순화 */
.item-result-entry {
  display: inline-flex;
  min-width: 0;
}
.item-result-entry .item-result-button {
  width: 100%;
}
.item-result-favorite {
  display: none !important;
}
.item-favorite-button {
  min-width: auto;
  width: auto;
  height: auto;
  padding: 5px 8px;
  gap: 0;
  color: #8a929a;
  background: transparent;
  border: 1px solid #e4e8eb;
  border-radius: 7px;
  box-shadow: none;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}
.item-favorite-button:hover,
.item-favorite-button:focus-visible {
  color: #4f5963;
  background: #f7f8f9;
  border-color: #d9dee2;
}
.item-favorite-button.active {
  color: #505a64;
  background: #f1f3f5;
  border-color: #d9dee2;
}
.item-favorite-button .favorite-icon {
  display: none !important;
}
@media (max-width: 760px) {
  .item-favorite-button {
    width: auto;
    height: auto;
    padding: 5px 7px;
  }
  .item-favorite-button .favorite-label {
    display: inline;
  }
}

/* v169 · iOS 모바일 상단 정리 + 메소마켓 헤더 압축 */
.mobile-title { display: none; }

@media (max-width: 760px) {
  /* backdrop-filter가 fixed 하단 메뉴의 containing block을 만들면서 iOS에서 상단으로 끌려오는 문제를 피함 */
  .site-header {
    position: sticky;
    top: 0;
    min-height: 52px;
    background: #26313b;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(31,41,51,.10);
  }
  .header-inner {
    width: calc(100% - 24px);
    min-height: 52px;
  }
  .brand-mark {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 9px;
  }
  .brand-copy strong { font-size: 14px; }
  .liberation-day-badge { font-size: 8.5px; }

  .page-tabs {
    position: fixed !important;
    top: auto !important;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 150;
    padding: 4px;
    border-radius: 17px;
    background: rgba(255,255,255,.97);
    border: 1px solid #dfe4e8;
    box-shadow: 0 8px 28px rgba(31,41,51,.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .page-tab {
    min-height: 49px;
    padding: 25px 2px 5px;
    border-radius: 12px;
    font-size: 8.5px;
  }
  .page-tab::before { top: 6px; font-size: 16px; }
  .page-tab[data-page-tab="search"]::before { top: 4px; font-size: 21px; }

  .page-shell {
    width: calc(100% - 20px);
    margin-top: 10px;
  }

  .home-primary-search {
    padding: 14px 13px 15px;
    border-radius: 16px;
  }
  .home-primary-search .section-kicker { display: none; }
  .home-primary-search .search-copy h1 {
    margin: 0;
    font-size: 0;
    line-height: 1.2;
  }
  .home-primary-search .search-copy h1 .desktop-title { display: none; }
  .home-primary-search .search-copy h1 .mobile-title {
    display: inline;
    font-size: 20px;
    letter-spacing: -.035em;
  }
  .home-primary-search .search-box { margin-top: 11px; }
  .home-primary-search .item-results-label {
    margin-top: 11px;
    font-size: 11px;
    font-weight: 800;
  }

  /* 검색 목록은 저장 버튼 없이 아이템 카드 자체만 사용 */
  .item-result-entry {
    width: 100%;
    display: block;
  }
  .item-result-entry .item-result-button { width: 100%; }
  .item-result-favorite { display: none !important; }

  /* 상세 상단도 한 덩어리처럼 보이도록 */
  #detail > .item-overview {
    padding: 13px;
    border-radius: 15px;
  }
  .item-title-row h2 { font-size: 18px; }
  .item-favorite-button {
    padding: 4px 7px;
    border-color: #e5e8eb;
    color: #8a929a;
    font-size: 9px;
  }

  /* 메소마켓은 설명형 큰 헤더 대신 제목+날짜 한 줄 */
  .meso-market-page {
    gap: 10px;
    padding: 13px;
    border-radius: 15px;
  }
  .meso-market-page-heading {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .meso-market-page-heading .section-kicker,
  .meso-market-page-heading p { display: none; }
  .meso-market-page-heading h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
  }
  .meso-market-meta {
    margin: 0;
    padding: 5px 7px;
    gap: 1px;
    text-align: right;
    border: 1px solid #e3e8ec;
    border-radius: 9px;
    background: #f7f9fa;
  }
  .meso-market-meta strong { font-size: 9px; }
  .meso-market-meta span { font-size: 8px; }
  .meso-market-status {
    padding: 13px 10px;
    border-radius: 11px;
    font-size: 10px;
  }
  .meso-market-calculator {
    margin-top: 0;
    padding: 11px;
  }
  .meso-market-calculator-heading .section-kicker { display: none; }
  .meso-market-calculator-heading h3 {
    margin: 0;
    font-size: 16px;
  }
  .meso-market-calculator-heading p { display: none; }
  .meso-calc-rate-badge {
    margin-top: 7px;
    padding: 5px 7px;
  }
}

/* v170 · 모바일 전용 메인/메소마켓 재구성 */
@media (max-width: 760px) {
  /* 모바일 내비게이션은 JS가 body 바로 아래로 옮겨 iOS fixed 기준 문제를 제거한다. */
  body > .page-tabs.mobile-page-tabs {
    position: fixed !important;
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
    z-index: 220;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 5px;
    border: 1px solid #dfe4e8;
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 10px 30px rgba(31, 41, 51, .16);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 시세 검색/메소마켓은 모바일에서 데스크톱용 큰 헤더를 사용하지 않는다. */
  body[data-page-view="search"] .site-header,
  body[data-page-view="meso"] .site-header {
    display: none !important;
  }
  body[data-page-view="search"],
  body[data-page-view="meso"] {
    background: #f4f6f8;
  }
  body[data-page-view="search"] .page-shell,
  body[data-page-view="meso"] .page-shell {
    width: 100%;
    margin: 0;
    padding: 0 0 calc(86px + env(safe-area-inset-bottom));
  }

  /* ========== 모바일 메인 / 시세 검색 ========== */
  body[data-page-view="search"] #searchPage {
    gap: 10px;
    padding: 8px 9px 0;
  }
  body[data-page-view="search"] .home-primary-search {
    margin: 0;
    padding: 15px 13px 13px;
    border: 1px solid #e3e7eb;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(31, 41, 51, .045);
  }
  body[data-page-view="search"] .home-primary-search .search-copy {
    padding: 0 1px;
  }
  body[data-page-view="search"] .home-primary-search .section-kicker,
  body[data-page-view="search"] .home-primary-search .search-copy > p {
    display: none !important;
  }
  body[data-page-view="search"] .home-primary-search .search-copy h1 {
    margin: 0;
    line-height: 1.2;
  }
  body[data-page-view="search"] .home-primary-search .search-copy h1 .desktop-title {
    display: none !important;
  }
  body[data-page-view="search"] .home-primary-search .search-copy h1 .mobile-title {
    display: inline !important;
    color: #1e2934;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.035em;
  }
  body[data-page-view="search"] .home-primary-search .search-box {
    margin-top: 11px;
  }
  body[data-page-view="search"] .home-primary-search .search-box input {
    min-height: 50px;
    padding: 12px 13px 12px 42px;
    border: 1px solid #dfe4e8;
    border-radius: 14px;
    background: #f8f9fb;
    font-size: 16px;
  }
  body[data-page-view="search"] .home-primary-search .search-box input:focus {
    background: #fff;
  }
  body[data-page-view="search"] .home-primary-search .recent-searches {
    margin-top: 8px;
    padding: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 6px;
    scrollbar-width: none;
  }
  body[data-page-view="search"] .home-primary-search .recent-searches::-webkit-scrollbar {
    display: none;
  }
  body[data-page-view="search"] .home-primary-search .recent-searches-label {
    display: none;
  }
  body[data-page-view="search"] .recent-search-chip {
    flex: 0 0 auto;
    max-width: 172px;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 10px;
    background: #f6f8fa;
  }
  body[data-page-view="search"] .home-primary-search .item-results-label {
    margin: 12px 1px 0;
    color: #7b858f;
    font-size: 10px;
  }
  body[data-page-view="search"] .home-primary-search .home-search-items,
  body[data-page-view="search"] .home-primary-search .home-search-items.is-suggestions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 7px;
    padding: 0 1px 1px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 360px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  body[data-page-view="search"] .home-primary-search .home-search-items.is-suggestions {
    max-height: 270px;
  }
  body[data-page-view="search"] .item-result-entry {
    display: block;
    width: 100%;
  }
  body[data-page-view="search"] .item-result-button {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    width: 100%;
    min-height: 52px;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid #e2e6ea;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    white-space: normal;
  }
  body[data-page-view="search"] .item-result-entry.active .item-result-button {
    border-color: #f0b075;
    background: #fff8ef;
    box-shadow: inset 3px 0 0 #ef9c4d;
  }
  body[data-page-view="search"] .item-result-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
  }
  body[data-page-view="search"] .item-result-copy {
    align-self: center;
    min-width: 0;
    gap: 2px;
  }
  body[data-page-view="search"] .item-result-copy strong {
    font-size: 13px;
    line-height: 1.25;
  }
  body[data-page-view="search"] .item-result-copy small {
    display: block;
    font-size: 9px;
  }
  body[data-page-view="search"] .home-primary-search .home-today-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 11px;
    padding: 11px 11px 11px 13px;
    border-radius: 13px;
  }
  body[data-page-view="search"] .home-primary-search .home-today-banner .today-banner-stats,
  body[data-page-view="search"] .home-primary-search .home-today-banner .today-banner-copy small {
    display: none !important;
  }
  body[data-page-view="search"] .home-primary-search .home-today-banner .today-banner-copy {
    gap: 1px;
    padding-left: 2px;
  }
  body[data-page-view="search"] .home-primary-search .home-today-banner .today-banner-copy span {
    font-size: 8px;
  }
  body[data-page-view="search"] .home-primary-search .home-today-banner .today-banner-copy strong {
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
  }
  body[data-page-view="search"] .home-primary-search .home-today-banner > button {
    grid-column: auto;
    align-self: center;
    width: auto;
    min-height: 32px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 9px;
  }
  body[data-page-view="search"] .home-primary-search .guide-discovery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
    padding-top: 11px;
  }
  body[data-page-view="search"] .home-primary-search .guide-discovery-card {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 76px;
    gap: 7px;
    padding: 10px;
    border-radius: 12px;
  }
  body[data-page-view="search"] .guide-discovery-copy small {
    font-size: 8px;
  }
  body[data-page-view="search"] .guide-discovery-copy strong {
    font-size: 11px;
    line-height: 1.3;
  }
  body[data-page-view="search"] .guide-discovery-copy em,
  body[data-page-view="search"] .guide-discovery-card > b {
    display: none !important;
  }
  body[data-page-view="search"] #detail {
    margin-top: 0;
  }

  /* ========== 모바일 메소마켓 ========== */
  body[data-page-view="meso"] #mesoMarketPage {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 8px 9px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-page-view="meso"] .meso-market-page-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e2e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(31, 41, 51, .04);
  }
  body[data-page-view="meso"] .meso-market-page-heading .section-kicker,
  body[data-page-view="meso"] .meso-market-page-heading p {
    display: none !important;
  }
  body[data-page-view="meso"] .meso-market-page-heading h2 {
    margin: 0;
    color: #1f2b36;
    font-size: 21px;
    line-height: 1.2;
  }
  body[data-page-view="meso"] .meso-market-meta {
    margin: 0;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    background: #f4f6f8;
    text-align: right;
  }
  body[data-page-view="meso"] .meso-market-meta strong {
    display: none;
  }
  body[data-page-view="meso"] .meso-market-meta span {
    color: #737e88;
    font-size: 9px;
    white-space: nowrap;
  }
  body[data-page-view="meso"] .meso-market-status {
    margin: 0;
    padding: 18px 12px;
    border-radius: 14px;
    background: #fff;
    font-size: 11px;
  }
  body[data-page-view="meso"] .meso-market-page .meso-market-board {
    gap: 10px;
  }
  body[data-page-view="meso"] .meso-market-calculator {
    margin: 0;
    padding: 13px;
    border: 1px solid #dfe5ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(31, 41, 51, .04);
  }
  body[data-page-view="meso"] .meso-market-calculator-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  body[data-page-view="meso"] .meso-market-calculator-heading .section-kicker,
  body[data-page-view="meso"] .meso-market-calculator-heading p {
    display: none !important;
  }
  body[data-page-view="meso"] .meso-market-calculator-heading h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
  }
  body[data-page-view="meso"] .meso-calc-rate-badge {
    min-width: 0;
    margin: 0;
    padding: 5px 7px;
    border-radius: 8px;
    text-align: right;
  }
  body[data-page-view="meso"] .meso-calc-rate-badge span {
    display: none;
  }
  body[data-page-view="meso"] .meso-calc-rate-badge strong {
    margin: 0;
    font-size: 9px;
  }
  body[data-page-view="meso"] .meso-calc-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 10px;
  }
  body[data-page-view="meso"] .meso-calc-mode button {
    width: 100%;
    min-height: 36px;
    padding: 7px 8px;
    font-size: 10px;
  }
  body[data-page-view="meso"] .meso-calc-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 9px;
  }
  body[data-page-view="meso"] .meso-calc-input-panel {
    padding: 11px;
    border-radius: 13px;
  }
  body[data-page-view="meso"] .meso-calc-input-panel > label {
    margin-bottom: 6px;
    font-size: 10px;
  }
  body[data-page-view="meso"] .meso-calc-input-wrap {
    min-height: 52px;
    border-radius: 12px;
  }
  body[data-page-view="meso"] .meso-calc-input-wrap input {
    font-size: 19px;
  }
  body[data-page-view="meso"] .meso-calc-quick {
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  body[data-page-view="meso"] .meso-calc-quick::-webkit-scrollbar {
    display: none;
  }
  body[data-page-view="meso"] .meso-calc-quick button {
    flex: 0 0 auto;
    padding: 6px 9px;
  }
  body[data-page-view="meso"] .meso-calc-rate-select {
    margin-top: 10px;
  }
  body[data-page-view="meso"] .meso-calc-rate-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  body[data-page-view="meso"] .meso-calc-rate-options button {
    width: 100%;
    padding: 7px 6px;
  }
  body[data-page-view="meso"] .meso-calc-result {
    min-height: 112px;
    padding: 14px;
    border-radius: 13px;
  }
  body[data-page-view="meso"] .meso-calc-result > strong {
    margin-top: 5px;
  }
  body[data-page-view="meso"] .meso-calc-result > strong b {
    font-size: 24px;
  }
  body[data-page-view="meso"] .meso-market-rates {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-page-view="meso"] .meso-market-rate-card.featured {
    padding: 13px;
    border-radius: 14px;
  }
  body[data-page-view="meso"] .meso-market-rate-main b {
    font-size: 22px;
  }
  body[data-page-view="meso"] .meso-market-depths.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  body[data-page-view="meso"] .meso-market-depths div {
    padding: 7px 3px;
    border-radius: 8px;
  }
  body[data-page-view="meso"] .meso-market-depths span {
    font-size: 8px;
  }
  body[data-page-view="meso"] .meso-market-depths b {
    font-size: 9px;
  }
  body[data-page-view="meso"] .meso-market-insights {
    display: flex;
    grid-template-columns: none;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 0 3px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body[data-page-view="meso"] .meso-market-insights::-webkit-scrollbar {
    display: none;
  }
  body[data-page-view="meso"] .meso-market-insights article {
    flex: 0 0 158px;
    min-height: 86px;
    padding: 11px;
    border-radius: 12px;
    scroll-snap-align: start;
  }
  body[data-page-view="meso"] .meso-market-insights strong {
    font-size: 14px;
  }
  body[data-page-view="meso"] .meso-market-trend,
  body[data-page-view="meso"] .meso-market-history {
    border-radius: 14px;
  }
  body[data-page-view="meso"] .meso-market-history {
    padding: 11px;
  }
  body[data-page-view="meso"] .meso-market-history table {
    min-width: 700px;
    font-size: 10px;
  }
  body[data-page-view="meso"] .meso-market-note {
    margin: 0 3px;
    font-size: 9px;
    line-height: 1.5;
  }
}

@media (max-width: 390px) {
  body[data-page-view="search"] #searchPage,
  body[data-page-view="meso"] #mesoMarketPage {
    padding-left: 7px;
    padding-right: 7px;
  }
  body[data-page-view="search"] .home-primary-search .guide-discovery-card {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 9px 8px;
  }
  body[data-page-view="search"] .guide-discovery-icon {
    width: 26px;
    height: 26px;
  }
  body[data-page-view="meso"] .meso-market-depths.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v172 · 메인 인기 아이템 두 번째 줄 잘림 방지 */
@media (min-width: 761px) {
  .home-primary-search .home-search-items.is-suggestions {
    max-height: 104px;
    padding-bottom: 3px;
    overflow: hidden;
  }
}

/* v171 · 아이템 아이콘 공통 안전 렌더링
   NEXON item_icon 원본 비율을 유지하고 카드 경계에서 잘리지 않게 여백을 확보한다. */
.item-result-thumb,
.today-rank-thumb,
.recent-search-thumb,
.item-image,
.sale-guide-equipment-thumb,
.purchase-guide-equipped-thumb {
  box-sizing: border-box;
}

.item-result-thumb img,
.today-rank-thumb img,
.recent-search-thumb img,
.item-image img,
.sale-guide-equipment-thumb img,
.purchase-guide-equipped-thumb img,
.sale-guide-item-results img,
.sale-guide-result-item img,
.purchase-current-equipment-row img,
.purchase-guide-item-results img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  flex: 0 0 auto;
}

/* 작은 썸네일은 원본이 테두리에 닿지 않도록 실제 그림 영역을 한 단계 줄인다. */
.item-result-thumb { padding: 4px; }
.today-rank-thumb { padding: 5px; }
.recent-search-thumb { padding: 2px; }
.item-image { padding: 6px; }
.sale-guide-equipment-thumb,
.purchase-guide-equipped-thumb { padding: 4px; }

/* 검색형 가이드 결과는 img 자체가 박스 역할을 하므로 여백 포함 크기로 제한 */
.sale-guide-item-results img,
.purchase-guide-item-results img {
  box-sizing: border-box;
  padding: 3px;
}
.sale-guide-result-item img,
.purchase-current-equipment-row img {
  box-sizing: border-box;
  padding: 3px;
}

/* 오늘의 시세판은 아이콘 자체가 너무 커 보이지 않게 그림 영역만 26px 안쪽으로 제한 */
.today-rank-thumb img {
  max-width: 26px;
  max-height: 26px;
}

@media (max-width: 760px) {
  body[data-page-view="search"] .item-result-thumb { padding: 5px; }
  body[data-page-view="search"] .item-result-thumb img {
    max-width: 28px;
    max-height: 28px;
  }
  .item-image { padding: 5px; }
  .item-image img {
    max-width: 44px;
    max-height: 44px;
  }
  .today-rank-thumb img {
    max-width: 24px;
    max-height: 24px;
  }
}

/* v176 · 모바일 전용 폭/정렬 안정화
   메인·메소마켓에서 페이지 자체가 좌우로 밀리는 현상을 구조적으로 차단한다. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  @supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
  }

  /* 최상위 레이아웃은 항상 실제 뷰포트 폭 안에서만 계산 */
  body > .page-shell,
  body[data-page-view="search"] .page-shell,
  body[data-page-view="meso"] .page-shell,
  body[data-page-view="search"] #searchPage,
  body[data-page-view="meso"] #mesoMarketPage,
  body[data-page-view="search"] .home-search-flow,
  body[data-page-view="search"] .home-primary-search,
  body[data-page-view="meso"] .meso-market-page,
  body[data-page-view="meso"] .meso-market-board,
  body[data-page-view="meso"] .meso-market-calculator {
    box-sizing: border-box;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page-view="search"] #searchPage,
  body[data-page-view="meso"] #mesoMarketPage {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  body[data-page-view="search"] #searchPage > *,
  body[data-page-view="meso"] #mesoMarketPage > *,
  body[data-page-view="search"] .home-primary-search > *,
  body[data-page-view="meso"] .meso-market-board > *,
  body[data-page-view="meso"] .meso-market-calculator > * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  /* 하단 메뉴도 뷰포트 계산식 대신 실제 좌우 inset을 사용 */
  body > .page-tabs.mobile-page-tabs {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
  }
  body > .page-tabs.mobile-page-tabs .page-tab {
    min-width: 0;
    padding-left: 3px;
    padding-right: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ================= 메인 ================= */
  body[data-page-view="search"] .home-primary-search {
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-page-view="search"] .home-primary-search .search-copy,
  body[data-page-view="search"] .home-primary-search .search-box,
  body[data-page-view="search"] .home-primary-search .search-box input {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* 최근검색은 화면 전체를 옆으로 당기지 않도록 줄바꿈 */
  body[data-page-view="search"] .home-primary-search .recent-searches {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 5px;
    padding-left: 0;
    padding-right: 0;
  }
  body[data-page-view="search"] .recent-search-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(48%, 170px);
  }
  body[data-page-view="search"] .recent-search-chip .recent-search-open {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 검색 결과는 모바일에서 반드시 한 열, 폭 100% */
  body[data-page-view="search"] .home-primary-search .home-search-items,
  body[data-page-view="search"] .home-primary-search .home-search-items.is-suggestions,
  body[data-page-view="search"] .item-result-entry,
  body[data-page-view="search"] .item-result-button,
  body[data-page-view="search"] .item-result-copy {
    box-sizing: border-box;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body[data-page-view="search"] .item-result-copy strong,
  body[data-page-view="search"] .item-result-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 오늘의 시세판 진입 배너와 가이드 카드도 부모 폭 이상 커지지 않게 */
  body[data-page-view="search"] .home-primary-search .home-today-banner,
  body[data-page-view="search"] .home-primary-search .guide-discovery,
  body[data-page-view="search"] .home-primary-search .guide-discovery-card {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  body[data-page-view="search"] .home-primary-search .home-today-banner {
    overflow: hidden;
  }
  body[data-page-view="search"] .home-primary-search .home-today-banner .today-banner-copy,
  body[data-page-view="search"] .guide-discovery-copy {
    min-width: 0;
    max-width: 100%;
  }

  /* 메인 아래 오늘의 시세판/즐겨찾기 영역도 같은 폭 규칙 사용 */
  body[data-page-view="search"] .today-board,
  body[data-page-view="search"] .today-board-heading,
  body[data-page-view="search"] .today-board-facts,
  body[data-page-view="search"] .today-board-sections,
  body[data-page-view="search"] .today-section-card,
  body[data-page-view="search"] .today-rank-list,
  body[data-page-view="search"] .today-rank-row,
  body[data-page-view="search"] .today-favorites,
  body[data-page-view="search"] .today-favorite-list,
  body[data-page-view="search"] .today-favorite-row,
  body[data-page-view="search"] .today-favorite-open {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
  body[data-page-view="search"] .today-rank-row,
  body[data-page-view="search"] .today-favorite-row {
    width: 100%;
  }
  body[data-page-view="search"] .today-rank-copy,
  body[data-page-view="search"] .today-favorite-open > * {
    min-width: 0;
  }
  body[data-page-view="search"] .today-rank-value {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 360px 이하에서는 구매/판매 가이드 진입도 한 열로 */
  @media (max-width: 360px) {
    body[data-page-view="search"] .home-primary-search .guide-discovery {
      grid-template-columns: 1fr;
    }
  }

  /* ================= 메소마켓 ================= */
  body[data-page-view="meso"] #mesoMarketPage {
    overflow: hidden;
  }

  body[data-page-view="meso"] .meso-market-page-heading,
  body[data-page-view="meso"] .meso-market-calculator-heading,
  body[data-page-view="meso"] .meso-calc-grid,
  body[data-page-view="meso"] .meso-calc-input-panel,
  body[data-page-view="meso"] .meso-calc-result,
  body[data-page-view="meso"] .meso-market-rates,
  body[data-page-view="meso"] .meso-market-rate-card,
  body[data-page-view="meso"] .meso-market-trend,
  body[data-page-view="meso"] .meso-market-history,
  body[data-page-view="meso"] .meso-market-note,
  body[data-page-view="meso"] .meso-calc-rate-options,
  body[data-page-view="meso"] .meso-market-depths,
  body[data-page-view="meso"] .meso-market-depths.four {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  body[data-page-view="meso"] .meso-calc-input-wrap,
  body[data-page-view="meso"] .meso-calc-input-wrap input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* 빠른 금액: 가로 스와이프 제거 */
  body[data-page-view="meso"] .meso-calc-quick {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 5px;
    padding-bottom: 0;
  }
  body[data-page-view="meso"] .meso-calc-quick button {
    flex: 1 1 calc(25% - 5px);
    min-width: 58px;
    max-width: 100%;
  }

  /* 분석 카드: 옆으로 넘기는 카드 대신 화면 안 2열 */
  body[data-page-view="meso"] .meso-market-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    overflow: visible;
    gap: 7px;
    padding: 0;
  }
  body[data-page-view="meso"] .meso-market-insights article {
    box-sizing: border-box;
    flex: none;
    min-width: 0;
    width: auto;
    max-width: 100%;
    min-height: 0;
  }
  body[data-page-view="meso"] .meso-market-insights strong,
  body[data-page-view="meso"] .meso-market-insights small {
    overflow-wrap: anywhere;
  }

  body[data-page-view="meso"] .meso-market-depths div {
    min-width: 0;
    max-width: 100%;
  }

  /* SVG 내부 좌표가 카드 밖으로 튀더라도 페이지 폭은 늘리지 않음 */
  body[data-page-view="meso"] .meso-market-chart,
  body[data-page-view="meso"] .meso-market-trend svg {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  /* 거래 이력만 예외적으로 자기 카드 안에서 스크롤 */
  body[data-page-view="meso"] .meso-market-history {
    overflow: hidden;
  }
  body[data-page-view="meso"] .meso-market-history-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body[data-page-view="meso"] .meso-market-history table {
    width: 700px;
    min-width: 700px;
    max-width: none;
  }
}

@media (max-width: 350px) {
  body[data-page-view="meso"] .meso-market-insights,
  body[data-page-view="meso"] .meso-market-depths.four {
    grid-template-columns: 1fr;
  }
  body[data-page-view="meso"] .meso-calc-quick button {
    flex-basis: calc(50% - 5px);
  }
}



/* v220 · 모바일 장비 옵션 필터 */
@media (max-width: 760px) {
  .filter-heading-premium { align-items: center; gap: 8px; }
  .filter-kicker { font-size: 8px; }
  .filter-heading-premium p { max-width: 240px; }
  .filter-reset-button { min-height: 32px; padding: 6px 9px; }
  .filter-panel-shell { padding: 10px; border-radius: 14px; }
  .filter-grid-premium { grid-template-columns: 1fr 1fr; gap: 7px; }
  .filter-grid-premium label { padding: 8px; border-radius: 10px; }
  .filter-grid-premium select { min-height: 38px; font-size: 11px; }
  .filter-meta-row { display: grid; gap: 8px; align-items: start; }
  .filter-meta-row .selected-chips { justify-content: flex-start; }
}
@media (max-width: 430px) {
  .filter-heading-premium p { display: none; }
  .filter-grid-premium { grid-template-columns: 1fr 1fr; }
}