@charset "utf-8";
/* ============================================================
 * 首頁「活動券專區」 2026-09-26（PC + 手機版共用）
 * 由 Web/Tpl/default/Web/Coupon/home.html 引入
 * 用途：取代原手機版首頁的「淘寶超級券」入口，可直接領券
 * ============================================================ */
.jych{background:#fff;border:1px solid #f0e6df;border-radius:10px;margin:12px 0;
	overflow:hidden;box-shadow:0 2px 8px rgba(120,90,70,.06);text-align:left;}
.jych_hd{height:44px;line-height:44px;padding:0 12px;background:#fff8f3;border-bottom:1px solid #f6ece5;overflow:hidden;}
.jych_hd h2{float:left;font-size:16px;font-weight:bold;color:#333;margin:0;padding:0;}
.jych_hd h2 em{font-style:normal;font-size:12px;font-weight:normal;color:#ff5a4d;margin-left:6px;}
.jych_more{float:right;font-size:12px;color:#a08d83;text-decoration:none;}
/* 手機專用「立即領取」按鈕（PC 隱藏；手機上券區收成細條，點擊開全屏活動層） */
.jych_cta{display:none;float:right;height:30px;line-height:30px;margin-top:9px;padding:0 12px;
	border-radius:15px;background:#ff5a4d;color:#fff;font-size:13px;font-weight:bold;
	white-space:nowrap;cursor:pointer;}
.jych_list{padding:4px 10px 8px;}
.jych_card{display:-webkit-box;display:-webkit-flex;display:flex;
	-webkit-box-align:center;-webkit-align-items:center;align-items:center;
	padding:9px 0;border-bottom:1px dashed #f2e8e1;}
.jych_card:last-child{border-bottom:0;}
/* 2026-09-29：與活動頁券卡同步 —— 92px-8px 內距＝84px，放不下大面額（NT$1000@19px=83.4 已經貼邊、
   NT$50000=94.8 會被左緣裁掉）→ 加寬到 100px、字級 19→18px */
.jych_l{-webkit-box-flex:0;-webkit-flex:0 0 100px;flex:0 0 100px;width:100px;text-align:center;
	color:#ff4d3d;border-right:1px solid #f4eae3;padding-right:8px;box-sizing:border-box;}
.jych_l b{display:block;font-size:18px;line-height:24px;font-weight:bold;white-space:nowrap;overflow:hidden;}
.jych_l span{display:block;font-size:11px;color:#a08d83;}
.jych_r{-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;padding-left:10px;position:relative;min-width:0;}
.jych_nm{font-size:14px;color:#333;font-weight:bold;padding-right:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jych_ds{font-size:12px;color:#9b8b82;margin-top:2px;padding-right:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jych_btn{position:absolute;right:0;top:50%;margin-top:-15px;height:30px;line-height:30px;padding:0 12px;
	border:0;border-radius:15px;background:#ff5a4d;color:#fff;font-size:13px;font-weight:bold;
	cursor:pointer;white-space:nowrap;}
.jych_btn[disabled]{background:#e8e1dc;color:#fff;cursor:default;}
.jych_btn.jych_got{background:#fff4e0;color:#b9821f;box-shadow:inset 0 0 0 1px #f2ddb6;}
.jych_none{text-align:center;color:#a08d83;font-size:13px;padding:18px 0;}
.jych_tip{position:fixed;left:50%;bottom:70px;z-index:2147483000;-webkit-transform:translateX(-50%);
	transform:translateX(-50%);background:rgba(0,0,0,.82);color:#fff;font-size:13px;
	padding:8px 14px;border-radius:18px;max-width:82%;text-align:center;}
/* ---------- 手機（≤480px）：收成 ≤92px 細條，點擊開全屏活動層 ---------- */
@media (max-width:480px){
	.jych{margin:8px;border-radius:8px;cursor:pointer;}
	/* 2026-09-27 反饋：未領取時的按鈕條太長、把標題文字遮住
	   → 改用 flex：標題自佔剩餘寬度並自動省略，按鈕固定不壓字 */
	.jych_hd{display:-webkit-box;display:-webkit-flex;display:flex;
		-webkit-box-align:center;-webkit-align-items:center;align-items:center;
		height:46px;line-height:1;padding:0 8px 0 12px;}
	.jych_hd h2{float:none;-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;
		min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
		font-size:15px;line-height:20px;}
	.jych_hd h2 em{display:block;font-size:11px;line-height:16px;margin-left:0;overflow:hidden;text-overflow:ellipsis;}
	.jych_more{display:none;}
	.jych_cta{float:none;display:inline-block;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;
		margin:0 0 0 8px;height:28px;line-height:28px;padding:0 10px;font-size:12px;}
	.jych_list{display:none;}
}

/* ---------- PC（≥481px）：4 張券緊貼成「郵票小全張」（相鄰可撕、四周打孔） ---------- */
@media (min-width:481px){
	.jych{clear:both;}
	.jych_list{padding:12px;display:-webkit-box;display:-webkit-flex;display:flex;
		-webkit-flex-wrap:wrap;flex-wrap:wrap;}
	/* margin:0 讓 4 張緊貼：相鄰兩張各自的半圓齒孔剛好拼成一整排圓孔＝手撕線 */
	.jych_card{-webkit-flex:0 0 50%;flex:0 0 50%;max-width:50%;
		box-sizing:border-box;padding:15px 20px;margin:0;border:0;position:relative;
		/* 票面：比底色深一階的米黃 + 斜向漸層＝紙張感；白色半圓＝齒孔（半徑 7px、間距 22px） */
		background-color:#f4dbb0;
		background-image:
			radial-gradient(circle at 11px 0, #fff 7px, rgba(255,255,255,0) 7.6px),
			radial-gradient(circle at 11px 100%, #fff 7px, rgba(255,255,255,0) 7.6px),
			radial-gradient(circle at 0 11px, #fff 7px, rgba(255,255,255,0) 7.6px),
			radial-gradient(circle at 100% 11px, #fff 7px, rgba(255,255,255,0) 7.6px),
			linear-gradient(158deg,#fbead0 0%,#f3d9ac 55%,#eccd99 100%);
		background-size:22px 100%,22px 100%,100% 22px,100% 22px,100% 100%;
		background-repeat:repeat-x,repeat-x,repeat-y,repeat-y,no-repeat;
		background-position:0 0,0 100%,0 0,100% 0,0 0;}
	/* 郵票內框虛線（像真票的內圈）；pointer-events:none 才不會擋住「立即領取」按鈕 */
	.jych_card::after{content:"";position:absolute;left:10px;right:10px;top:10px;bottom:10px;
		border:1px dashed rgba(183,137,83,.6);border-radius:4px;pointer-events:none;}
	/* 票面上的文字要壓在內框線之上 */
	.jych_card .jych_l,.jych_card .jych_r{position:relative;z-index:1;}
	/* 票面加重後的配色微調：左欄分隔線改成票根虛線、說明字調深一點 */
	.jych_l{color:#d0342a;border-right:1px dashed rgba(183,137,83,.6);}
	.jych_l span,.jych_ds{color:#8a6d4a;}
	.jych_card:last-child{border-bottom:0;}
}

/* ---------- 「i幣抽獎」入口（2026-09-27）---------- */
/* 手機版不顯示（手機首頁另外有一條高對比抽獎條，避免重複） */
.jych_draw{display:none;}
@media (min-width:481px){
	.jych_draw{display:inline-block;float:right;height:26px;line-height:26px;margin:9px 10px 0 0;
		padding:0 12px;border-radius:13px;text-decoration:none;
		background:linear-gradient(180deg,#fff6d2,#ffd466 60%,#f0a81e);color:#b3121a;
		font-size:12px;font-weight:bold;
		box-shadow:0 2px 6px rgba(226,168,30,.4),0 0 0 3px rgba(255,212,102,.25);}
	.jych_draw:hover{filter:brightness(1.06);}
}