/* Front-page listing layout only. Preserve the original cells and API hooks. */ body.jh-market-page #mainContent.site { max-width: 1480px !important; } body.jh-market-page #mainContent > :not(#listingArea) { max-width: 1120px; margin-left: auto; margin-right: auto; } #listingArea.jh-market-ready { --jh-ink: #213d40; --jh-muted: #526b6d; --jh-border: #cedbd7; --jh-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.6fr); padding: 28px !important; border: 1px solid var(--jh-border) !important; border-radius: 20px !important; background: #f6f9f7 !important; color: var(--jh-ink) !important; } #listingArea.jh-member-view { --jh-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 1.7fr); } #listingArea.jh-market-ready [hidden] { display: none !important; } #listingArea.jh-market-ready .chipbar, #listingArea.jh-market-ready .armo-search-tools, #listingArea.jh-market-ready #cityTag, body.jh-market-page .armo-mobile-filter-trigger { display: none !important; } #listingArea .jh-market-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } #listingArea .jh-eyebrow { display: block; margin-bottom: 8px; color: #356858; font-size: 12px; font-weight: 800; letter-spacing: .16em; } #listingArea .jh-market-title h2 { margin: 0; color: #213d40 !important; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; } #listingArea .jh-market-heading p { margin: 0 0 4px; color: var(--jh-muted) !important; font-size: 14px; } #listingArea.jh-market-ready .filter-row { display: block !important; margin: 0 !important; } #listingArea .jh-search-primary { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; } #listingArea .jh-field { display: grid !important; gap: 7px; min-width: 0; margin: 0; color: var(--jh-ink) !important; font-size: 13px; font-weight: 700; } #listingArea .jh-field input, #listingArea .jh-field select { width: 100% !important; min-width: 0 !important; min-height: 44px; margin: 0; padding: 10px 12px !important; border: 1px solid #afc4bc !important; border-radius: 10px !important; background: #fff !important; color: #213d40 !important; font-size: 15px !important; box-shadow: none !important; } #listingArea .jh-search-field #searchInput { min-height: 54px; padding: 14px 16px !important; font-size: 17px !important; } #listingArea .jh-search-field #searchInput::placeholder { color: #596e70 !important; opacity: 1; } #listingArea .jh-sort-field select { min-height: 54px; } #listingArea.jh-market-ready :is(input, select, button, a, summary):focus-visible { outline: 3px solid #286756 !important; outline-offset: 3px; } #listingArea .jh-advanced { margin-top: 14px; padding: 0 16px; border: 1px solid var(--jh-border); border-radius: 12px; background: #edf3ef; } #listingArea .jh-advanced-summary { padding: 13px 0; cursor: pointer; color: #284e45; font-weight: 800; font-size: 14px; } #listingArea .jh-filter-count { margin-left: 12px; color: var(--jh-muted); font-size: 12px; font-weight: 500; } #listingArea .jh-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 12px; padding: 4px 0 18px; } #listingArea .jh-results { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; } #listingArea .jh-results .filter-tag { padding: 0 !important; border: 0 !important; background: none !important; color: #213d40 !important; font-size: 15px; font-weight: 800; } #listingArea .jh-result-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #listingArea .jh-result-actions button { min-height: 38px; padding: 8px 12px !important; border: 1px solid #b7cbc1 !important; border-radius: 8px !important; background: #fff !important; color: #34534a !important; font-size: 12px; font-weight: 700; box-shadow: none !important; cursor: pointer; } #listingArea .jh-result-actions button:disabled { opacity: 1; color: #637572 !important; background: #edf1ef !important; cursor: default; } #listingArea .jh-share-status { color: #355e4e; font-size: 12px; } #listingArea .jh-member-tools { margin: 10px 0 18px; border-bottom: 1px solid var(--jh-border); } #listingArea .jh-member-tools > summary { padding: 12px 0; color: #46635a; cursor: pointer; font-size: 13px; font-weight: 700; } #listingArea .jh-member-tools .armo-watchbar { margin: 0 0 14px !important; box-shadow: none !important; } #listingArea.jh-market-ready .armo-data-freshness { margin: 8px 0 !important; color: #526b6d !important; font-size: 12px; } #listingArea .jh-list-head { display: grid; grid-template-columns: var(--jh-columns); gap: 12px; padding: 14px 18px; color: #46625b; background: #e7efe9; border-radius: 10px 10px 0 0; font-size: 12px; font-weight: 800; } #listingArea .jh-list-head > :first-child { grid-column: 1 / 3; } #listingArea:not(.jh-member-view) .jh-list-head > :nth-child(n+4) { display: none; } #listingArea.jh-market-ready .listing-table-scroll { overflow: visible !important; max-width: 100%; } #listingArea.jh-market-ready table { display: block !important; width: 100% !important; min-width: 0 !important; margin-top: 0 !important; table-layout: auto !important; background: transparent !important; } #listingArea.jh-market-ready table thead { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; } #listingArea.jh-market-ready #rowsBody { display: grid !important; width: 100% !important; gap: 10px; } #listingArea.jh-market-ready #rowsBody > tr[data-jh-row] { position: relative; display: grid !important; grid-template-columns: var(--jh-columns); grid-template-rows: auto auto auto auto; align-items: start; column-gap: 12px; row-gap: 7px; width: 100% !important; min-width: 0; padding: 18px 18px 58px; border: 1px solid #d4e0d8 !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; overflow: visible; } #listingArea.jh-market-ready #rowsBody > tr[data-jh-row]:hover { border-color: #8dac9e !important; background: #fcfdfb !important; } #listingArea.jh-market-ready #rowsBody > tr[data-jh-row][hidden], #listingArea.jh-market-ready #rowsBody > tr[data-jh-row].armo-watch-hidden, #listingArea.jh-market-ready #rowsBody > tr[data-jh-row].armo-page-hidden, #listingArea.jh-market-ready #rowsBody > tr[data-jh-row][style*="display: none"] { display: none !important; } #listingArea.jh-market-ready #rowsBody > tr > td[data-jh-field] { display: block !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; margin: 0; padding: 0 !important; border: 0 !important; color: #213d40 !important; font-size: 14px; line-height: 1.5; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; } #listingArea.jh-market-ready #rowsBody > tr > td[data-jh-field]::before { display: none !important; } #listingArea.jh-market-ready #rowsBody td[data-jh-field="brand"] { grid-column: 1 / 3; grid-row: 1; position: static !important; overflow: visible !important; color: #496c5d !important; font-size: 12px; font-weight: 800; } #listingArea.jh-market-ready #rowsBody td[data-jh-field="model"] { grid-column: 1 / 3; grid-row: 2; font-size: 18px; line-height: 1.35; font-weight: 800; letter-spacing: -.025em; } #listingArea #rowsBody td[data-jh-field="capacity"] { grid-column: 1; grid-row: 3; font-weight: 700; } #listingArea #rowsBody td[data-jh-field="color"] { grid-column: 2; grid-row: 3; } #listingArea #rowsBody td[data-jh-field="condition"] { grid-column: 3; grid-row: 1; font-weight: 700; } #listingArea #rowsBody td[data-jh-field="defect"] { grid-column: 3; grid-row: 2; } #listingArea #rowsBody td[data-jh-field="remark"] { grid-column: 3; grid-row: 3 / 5; } #listingArea #rowsBody td[data-jh-field="city"] { grid-column: 4; grid-row: 1; font-weight: 700; } #listingArea #rowsBody td[data-jh-field="district"] { grid-column: 4; grid-row: 2; } #listingArea #rowsBody td[data-jh-field="delivery"] { grid-column: 4; grid-row: 3; } #listingArea #rowsBody td[data-jh-field="updated"] { grid-column: 4; grid-row: 4; } #listingArea.jh-market-ready #rowsBody td[data-jh-field="updated"] * { color: #526b6d !important; font-size: 12px !important; font-weight: 500; } #listingArea.jh-market-ready #rowsBody td[data-jh-field="price"] { grid-column: 5; grid-row: 1 / 3; color: #235c45 !important; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } #listingArea #rowsBody td[data-jh-field="seller"] { grid-column: 6; grid-row: 1 / 5; } #listingArea.jh-market-ready #rowsBody td[data-jh-field="remark"][data-jh-empty="true"] { display: none !important; } #listingArea.jh-market-ready .defect-badge { padding: 4px 9px; white-space: nowrap !important; font-size: 12px; line-height: 1.4; letter-spacing: 0; } #listingArea.jh-market-ready .defect-no { color: #23543d !important; background: #e1eee3 !important; } #listingArea.jh-market-ready .defect-yes { color: #792f34 !important; background: #f5e4e4 !important; } #listingArea.jh-market-ready #rowsBody td .btn { min-height: 40px; margin-top: 8px; padding: 9px 12px !important; color: #fff !important; background: #326a55 !important; border: 1px solid #326a55 !important; border-radius: 8px !important; box-shadow: none !important; font-size: 13px; line-height: 1.4; text-align: center; } #listingArea.jh-market-ready .jh-row-actions { position: absolute; right: 18px; bottom: 10px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 36px); } #listingArea.jh-market-ready .jh-row-actions button { float: none !important; position: static !important; display: inline-flex !important; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; margin: 0 !important; padding: 6px 10px !important; border: 1px solid #b8cbbf !important; border-radius: 7px !important; color: #34584a !important; background: #f3f7f3 !important; box-shadow: none !important; font-size: 12px; line-height: 1; } #listingArea.jh-market-ready .jh-row-actions button[aria-pressed="true"] { color: #fff !important; background: #326a55 !important; } #listingArea.jh-market-ready .jh-row-actions .armo-compare-button { font-size: 0 !important; } #listingArea.jh-market-ready .jh-row-actions .armo-compare-button::after { content: "比較"; font-size: 12px; } #listingArea.jh-market-ready .member-gate { background: #e9f0e9 !important; border-color: #b5c9bb !important; box-shadow: none !important; } #listingArea.jh-market-ready .member-gate strong { color: #294d3d !important; } #listingArea.jh-market-ready .member-gate span { color: #425c51 !important; } @media (max-width: 1100px) { #listingArea .jh-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #listingArea .jh-list-head { display: none; } #listingArea.jh-market-ready #rowsBody { grid-template-columns: repeat(2, minmax(0, 1fr)); } #listingArea.jh-market-ready #rowsBody > tr[data-jh-row] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 8px; } #listingArea #rowsBody td[data-jh-field="condition"] { grid-column: 1; grid-row: 4; } #listingArea #rowsBody td[data-jh-field="defect"] { grid-column: 2; grid-row: 4; } #listingArea #rowsBody td[data-jh-field="remark"] { grid-column: 1 / 3; grid-row: 5; } #listingArea #rowsBody td[data-jh-field="city"] { grid-column: 1; grid-row: 6; } #listingArea #rowsBody td[data-jh-field="district"] { grid-column: 2; grid-row: 6; } #listingArea #rowsBody td[data-jh-field="delivery"] { grid-column: 1 / 3; grid-row: 7; } #listingArea #rowsBody td[data-jh-field="updated"] { grid-column: 1 / 3; grid-row: 8; } #listingArea.jh-market-ready #rowsBody td[data-jh-field="price"] { grid-column: 1 / 3; grid-row: 9; padding-top: 8px !important; border-top: 1px solid #e1e9e3 !important; } #listingArea #rowsBody td[data-jh-field="seller"] { grid-column: 1 / 3; grid-row: 10; } } @media (max-width: 640px) { #listingArea.jh-market-ready { padding: 16px !important; border-radius: 14px !important; } #listingArea .jh-market-heading { display: block; margin-bottom: 18px; } #listingArea .jh-market-heading p { margin-top: 10px; font-size: 13px; } #listingArea .jh-search-primary { grid-template-columns: minmax(0, 1fr); gap: 12px; } #listingArea .jh-search-field #searchInput { font-size: 16px !important; } #listingArea .jh-sort-field { grid-template-columns: 42px minmax(0, 1fr); align-items: center; } #listingArea .jh-sort-field select { min-height: 42px; } #listingArea .jh-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #listingArea .jh-filter-count { display: block; margin: 5px 0 0; } #listingArea.jh-market-ready #rowsBody { grid-template-columns: minmax(0, 1fr); } #listingArea.jh-market-ready #rowsBody > tr[data-jh-row] { padding: 16px 16px 60px; } #listingArea.jh-market-ready .jh-row-actions button { min-height: 40px; min-width: 44px; } #listingArea .jh-result-actions { width: 100%; } #listingArea.jh-market-ready .armo-data-freshness { justify-content: flex-start; flex-wrap: wrap; } } /* Keep the existing comparison state without rendering two icon labels. */ #listingArea.jh-market-ready .jh-row-actions .armo-compare-button { min-width: 60px !important; padding-inline: 12px !important; white-space: nowrap !important; } #listingArea.jh-market-ready .jh-row-actions .armo-compare-button::before { content: none !important; display: none !important; } #listingArea.jh-market-ready .jh-row-actions .armo-compare-button::after { white-space: nowrap !important; line-height: 1 !important; } #listingArea.jh-market-ready .jh-row-actions .armo-compare-button[aria-pressed="true"]::after { content: "\5df2\9078" !important; }