/* homepage-index.css — 從 yahoojp/auctions/index.tpl.html inline <style> 抽出 */

/*
 * 覆蓋 Vuetify reset 的 html { overflow-x: hidden }。
 * 首頁為固定寬度版面（.innerWrapper 等 min-width:1140px），
 * 視窗窄於 1140px 時內容會溢出。Vuetify 的 overflow-x:hidden 會把
 * 溢出內容與橫向捲軸一起裁掉，造成「元件被切掉、又沒有左右捲軸」。
 * 改回 auto 讓窄視窗時自然出現橫向捲軸（內容 ≥1170px 時才觸發，寬視窗不受影響）。
 * homepage-index.css 載入順序晚於 vuetify.min.css，同特異度後者勝，不需 !important。
 */
html {
	overflow-x: auto;
	/*
	 * 把頁面底色也塗在 html（畫布層）。body 寬固定 1140（見下），但部分內容
	 * （jpbox 卡片區用 margin-right:-26px 加寬至 1166）會超出 body，超出段落會
	 * 露出 html 預設白底而形成右側白縫。html 塗上與 body 相同底色即可讓該段
	 * 與頁面融為一體，不必去動 jpbox 卡片排版。
	 */
	background-color: #f0f0f8;
}

/*
 * 配合上面的橫向捲軸：首頁滿版背景帶（#gTopWrapper header、.gtFooter、
 * .info、.copyright 等 block 元素）寬度跟著 body 走，預設 body 寬 = viewport，
 * 視窗窄於 1140px 時這些帶子只蓋到 viewport 寬，右捲後露出無背景空條。
 * 給 body 設定與內容相同的 min-width:1140px，讓滿版帶撐到設計寬、捲動時完整覆蓋。
 */
body {
	min-width: 1140px;
}

/*
 * 側欄 banner 圖約束：top.css 的 .index-aside-banner__link 只有 display:inline-block、
 * 無寬度約束，圖檔自然寬若大於欄寬（約 165px）會以原始寬呈現而突出欄位。
 * 例如創作者實錄 banner 圖寬 195px，會超出右側欄 30px。
 * 加 max-width:100% 讓任何側欄 banner 圖一律縮放至欄寬，不再溢出。
 */
.index-aside-banner__link {
	max-width: 100%;
}
.index-aside-banner__link img {
	max-width: 100%;
	height: auto;
	display: block;
}

body {
	background-repeat: no-repeat;
	background-position: 50% 168px;
	background-color: #f0f0f8;
}
.gTopWrapper {
	height: 166px;
}

.acMdCateSearch {
	position: relative;
	width: 100%;
	background: #fff;
}
.acMdCateSearch a:hover {
	color: #d7a50d;
	text-decoration: underline;
}
.untHead.title {
	background: #fdd118;
}
.untHead h2 {
	height: 36px;
	line-height: 34px;
	padding-left: 7px;
}
.untHead h3 a {
	color: #fff;
	text-decoration: none;
	font-size: 15px;
}
.untBody1 {
	border-left: 1px solid #ffc10b;
	border-right: 1px solid #ffc10b;
	border-bottom: 1px solid #ffc10b;
	height: 655px;
	box-sizing: border-box;
}
.untBody1 ul li {
	height: 26px;
	line-height: 26px;
	padding-left: 7px;
}
.untBody1 ul li a {
	color: #000;
	text-decoration: none;
}
.untBody1 ul li.on {
	background: #33322f;
}
.untBody1 ul li.on a {
	color: #d7a50d;
	text-decoration: none;
	background: #33322f;
}
.untBody {
	padding-bottom: 10px;
}
.untBody ul li {
	padding: 7px 5px 6px 9px;
	margin: 0 10px -3px 0;
	text-align: left;
	display: inline-block;
	width: 200px;
}
.untBody ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}
.acM-xy {
	top: 0;
	left: 190px;
	display: block;
}
.acM-xy1 {
	top: 300px;
	left: 190px;
	display: block;
}
.acMdCateLinks {
	position: absolute;
	width: 640px;
	background: #33322f;
	font-size: 13px;
	line-height: 1.4;
	z-index: 100;
	display: none;
}
.acMdCateLinks.is-active {
	display: block;
}
.acMdCateLinks .untHead {
	position: relative;
	min-height: 41px;
	_height: auto !important;
	_height: 41px;
	margin-left: 15px;
}
.acMdCateLinks .decCate1 .untBody {
	background-position: 100% 0;
}
.acMdCateLinks .decCate2 .untBody {
	background-position: 100% -403px;
}
.acMdCateLinks .decCate3 .untBody {
	background-position: 100% -2015px;
}
.acMdCateLinks .decCate4 .untBody {
	background-position: 100% -2418px;
}
.acMdCateLinks .decCate5 .untBody {
	background-position: 100% -2821px;
}
.acMdCateLinks .decCate6 .untBody {
	background-position: 100% -3224px;
}
.acMdCateLinks .decCate7 .untBody {
	background-position: 100% -3627px;
}
.acMdCateLinks .decCate8 .untBody {
	background-position: 100% -4030px;
}
.acMdCateLinks .decCate9 .untBody {
	background-position: 100% -4433px;
}
.acMdCateLinks .decCate10 .untBody {
	background-position: 100% -4836px;
}
.acMdCateLinks .decCate11 .untBody {
	background-position: 100% -806px;
}
.acMdCateLinks .decCate12 .untBody {
	background-position: 100% -1209px;
}
.acMdCateLinks .decCate13 .untBody {
	background-position: 100% -1612px;
}
.acMdCateLinks .decCate14 .untBody {
	background-position: 100% -8463px;
}
.acMdCateLinks .decCate15 .untBody {
	background-position: 100% -8060px;
}
.acMdCateLinks .decCate16 .untBody {
	background-position: 100% -7657px;
}
.acMdCateLinks .decCate17 .untBody {
	background-position: 100% -5239px;
}
.acMdCateLinks .decCate18 .untBody {
	background-position: 100% -5642px;
}
.acMdCateLinks .decCate19 .untBody {
	background-position: 100% -6448px;
}
.acMdCateLinks .decCate20 .untBody {
	background-position: 100% -6851px;
}
.acMdCateLinks .decCate21 .untBody {
	background-position: 100% -7254px;
}
.acMdCateLinks .decCate22 .untBody {
	background-position: 100% -6045px;
}
.acMdCateLinks .decCate23 .untBody {
	background-position: 100% -8866px;
}
.acMdCateLinks .decCate24 .untBody {
	background-position: 100% -9269px;
}
.acMdCateLinks .decCate25 .untBody {
	background-position: 100% -9672px;
}
.acMdCateLinks .untBody {
	padding: 0 120px 0 15px;
	border: 2px solid #33322f;
	background-image: url('//letaoimg.s3-ap-northeast-1.amazonaws.com/yahoojp/index/spr_catelinks_01.jpg');
	background-repeat: no-repeat;
	min-height: 370px;
}
.acMdCateLinks .untBody .decLine {
	padding-top: 15px;
	border-top: 1px solid #575653;
}
.acMdCateLinks .untHead h3 {
	float: left;
	margin-top: 12px;
	padding-right: 30px;
	font-weight: bold;
	font-size: 138%;
}
.letao-member-left-list-box {
	background-color: #fff;
	width: 100%;
	float: left;
	height: auto;
}
.left-menu-box {
	border: 1px solid #ffd614;
	width: 100%;
	background-color: #fff;
}
.left-menu-box h1 {
	text-align: left;
	padding: 4px 0 4px 20px;
}

.indexFsWrapper {
	padding-bottom: 30px;
}

.campaign-tips-wrapper {
	background-size: cover;
	margin: 2rem 0;
	height: 135px;
	background-position: center center;
}

.campaign-tips-content {
	max-width: 1350px;
	min-width: 1140px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 95px;
}

.campaign-tips-card {
	margin: 0 0.25rem;
	display: inline-block;
}

.campaign-tips-card.title {
	margin-right: 2rem;
}

.indexBannerWrapper .indexBannerInfo .indexGuide .item {
	padding: 9px 0;
}

/* CLS placeholder：為 async 載入的動態組件預留高度，避免載入後撐開推擠下方（footer）造成位移。
   min-height 為 provisional 量測值，主 session 會 Playwright 量測微調。 */
.cls-placeholder { display: flow-root; }
.cls-placeholder--event-map { min-height: 333px; }   /* 限定優惠 map，provisional 待量測 */
.cls-placeholder--coop-seller { min-height: 1006px; } /* 合作賣家，AJAX 變動高度，provisional 待量測 */
.cls-placeholder--jpbox { min-height: 386px; }        /* jpbox 商品，AJAX 變動高度，provisional 待量測 */

/* o-event-map「本月限定優惠」RWD 修正：含兩張並排卡的欄（card-2；showTemplate2 wrap--7 的 card-1）
   每卡圖 168px、兩卡共 336px。container <~1174px 時欄寬 <336，inline-block 兩卡會換行堆疊跑版。
   只在窄寬度(≤1200px)改 flex nowrap + 圖 max-width:100% 等比縮放並排；>1200px 完全不套用，寬版面零影響。
   放在 homepage-index.css（最後載入、首頁專屬），覆蓋 event.css 的 inline-block。 */
@media (max-width: 1200px) {
  .o-event-map-content .map-content-row.card-2,
  .o-event-map-content .map-content-wrap--7 .map-content-row.card-1 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
  }
  .o-event-map-content .map-content-row.card-2 .map-content-card,
  .o-event-map-content .map-content-wrap--7 .map-content-row.card-1 .map-content-card {
    flex: 0 1 auto;
    min-width: 0;
  }
  .o-event-map-content .map-content-row.card-2 .map-content-card img,
  .o-event-map-content .map-content-wrap--7 .map-content-row.card-1 .map-content-card img {
    max-width: 100%;
    height: auto;
  }
}