/* 幫工資訊頁（helper.php）專用樣式 — 全部限定在 .hq 之下，不影響其他頁 */
.hq{
	--navy:#0f3b5c; --navy-d:#0a2a43; --orange:#f08a24; --yellow:#f7c831;
	--cream:#fbf5e6; --sand:#f3e7c9; --ink:#2b3640;
	color:var(--ink); background:#fff; font-size:16px; line-height:1.8;
}
.hq h1,.hq h2,.hq h3,.hq h4,.hq p,.hq ul,.hq ol,.hq figure{margin:0;padding:0}
.hq ul,.hq ol{list-style:none}
.hq p{margin-bottom:.6em}

/* 主視覺：日落海景（純 CSS，不用圖） */
.hq{background:var(--cream)}
.hq-hero{position:relative;overflow:hidden;min-height:400px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
	background:linear-gradient(180deg,rgba(10,42,67,.18),rgba(10,42,67,.38)),url(../img/helper/hero-sunrise.jpg) center 42%/cover no-repeat #f08a24}
.hq-hero-sun{display:none}
.hq-hero-inner{position:relative;padding:150px 15px 120px}
.hq-hero h1{font-size:54px;font-weight:700;letter-spacing:2px;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.4)}
.hq-hero-line{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 0}
.hq-hero-line:before,.hq-hero-line:after{content:"";width:70px;height:2px;background:#fff;opacity:.9}
.hq-hero-line span{font-size:36px;font-weight:700;letter-spacing:6px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.hq-hero-en{font-style:italic;letter-spacing:2px;opacity:.95}
.hq-hero-wave{position:absolute;left:0;bottom:-1px;width:100%;height:70px}

/* 前言 */
.hq-intro{background:var(--cream);padding:0 0 46px;margin-top:-30px;position:relative;z-index:2}
.hq-slogan{font-size:38px;line-height:1.5;font-weight:700;color:var(--navy);margin-bottom:18px;font-style:italic;transform:rotate(-3deg);transform-origin:left center}
.hq-slogan span{background:linear-gradient(transparent 70%,rgba(247,200,49,.75) 70%)}
.hq-intro p{font-size:17px;max-width:520px}
.hq-intro-pic{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:62% 50%;border-radius:10px;box-shadow:0 12px 30px rgba(15,59,92,.3);margin-top:-60px}

/* 四格摘要 */
.hq-summary{background:var(--navy);color:#fff;padding:60px 0 44px;position:relative;margin:30px 0 0}
.hq-summary:before,.hq-summary:after{content:"";position:absolute;left:0;right:0;height:34px;background:var(--navy);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C30 0 60 30 100 12 C140 -6 170 28 200 6 L200 34Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C30 0 60 30 100 12 C140 -6 170 28 200 6 L200 34Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.hq-summary:before{top:-33px}
.hq-summary:after{bottom:-33px;transform:rotate(180deg)}
.hq-sum-item{text-align:center;padding:10px 12px 24px;border-right:1px solid rgba(255,255,255,.2);height:100%}
.hq-summary .col-lg-3:last-child .hq-sum-item{border-right:0}
.hq-sum-item i{font-size:46px;color:var(--yellow)}
.hq-sum-item h3{font-size:21px;color:#fff;margin:6px 0 8px}
.hq-sum-item p{font-size:15px;opacity:.92;margin:0}

/* 區塊 */
.hq-block{padding:56px 0}
.hq-block-tint{background:var(--cream)}
.hq-title{font-size:24px;font-weight:700;color:#fff;margin-bottom:22px;display:inline-block;position:relative;background:var(--navy);padding:5px 40px 5px 20px;border-bottom:4px solid var(--yellow);border-radius:4px 22px 4px 4px;max-width:100%;line-height:1.5}
.hq-title i{color:var(--yellow);margin-right:6px}
.hq-title small{font-size:14px;font-style:italic;color:var(--yellow);margin-left:10px;font-weight:400}
.hq-title-c{display:table;margin:0 auto 14px;padding:5px 30px}

/* 工作內容 */
.hq-task{margin-bottom:24px;text-align:center}
.hq-task img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.hq-task figcaption{margin-top:10px}
.hq-task b{display:block;font-size:19px;color:var(--navy)}
.hq-task span{font-size:14px;color:#5b6772}

/* 卡片 */
.hq-card{background:#fff;border:1px solid #ecdcae;border-radius:16px;padding:26px 26px 20px;margin-bottom:24px;box-shadow:0 4px 14px rgba(120,90,20,.08);height:calc(100% - 24px)}
.hq-card .hq-title{font-size:21px}
.hq-box{background:var(--sand);border-radius:12px;padding:16px 16px 14px;margin-bottom:16px;text-align:center}
.hq-pill{display:inline-block;background:var(--navy);color:#fff;font-size:15px;padding:2px 22px;border-radius:20px;margin:0 0 10px}
.hq-hours{display:flex;justify-content:space-around;font-size:17px}
.hq-hours div+div{border-left:1px solid #d9c690;padding-left:10px;flex:1}
.hq-hours div{flex:1}
.hq-hours span{display:block;font-weight:700;color:var(--navy)}
.hq-hours em{font-style:normal;font-size:38px;font-weight:700;color:var(--orange);line-height:1.1}
.hq-deco{display:block;width:150px;margin:14px auto 0;opacity:.9}
.hq-quote{font-size:18px;font-style:italic;color:var(--navy);font-weight:700;margin-top:6px}

/* 勾選清單 */
.hq-check{text-align:left}
.hq-check li{position:relative;padding-left:26px;margin-bottom:6px}
.hq-check li:before{content:"\f00c";font-family:"FontAwesome";position:absolute;left:0;top:0;color:var(--navy);font-weight:400}
.hq-check b{color:var(--orange);font-size:1.15em}
.hq-check-lg li{font-size:18px;margin-bottom:10px}

/* 回饋 */
.hq-sub{font-size:18px;color:var(--navy);margin:4px 0 6px;font-weight:700}
.hq-sub i{color:var(--orange)}
.hq-note{font-size:14px;color:#66707a;margin-bottom:.5em}
.hq-hl{display:inline-block;background:var(--yellow);padding:2px 10px;border-radius:4px;font-weight:700;color:var(--navy-d);margin-bottom:6px}
.hq-hr{border:0;border-top:1px dashed #d9c690;margin:18px 0}
.hq-table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:8px}
.hq-table th{background:var(--navy);color:#fff;padding:6px 10px;text-align:center;font-weight:600}
.hq-table td{padding:6px 10px;text-align:center;border-bottom:1px solid #eadfbd;background:#fffdf7}
.hq-table td+td{font-weight:700;color:var(--orange);font-size:17px}
.hq-use{margin-bottom:4px}
.hq-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.hq-tags li{background:var(--sand);border-radius:30px;padding:2px 16px;font-weight:700;color:var(--navy)}
.hq-tags i{color:var(--orange);font-size:20px;vertical-align:-3px}

/* 小卡 */
.hq-mini .hq-title{font-size:19px}
.hq-money{color:var(--orange);font-size:26px}

/* 加入流程 */
.hq-steps{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap}
.hq-steps li{flex:1 1 130px;text-align:center;background:#fff;border-radius:14px;padding:16px 8px 12px;border:1px solid #ecdcae;position:relative;font-weight:700;color:var(--navy);box-shadow:0 3px 10px rgba(120,90,20,.08)}
.hq-steps li:not(:last-child):after{content:"\f061";font-family:"FontAwesome";position:absolute;right:-13px;top:38%;color:var(--navy);font-weight:400;z-index:2}
.hq-steps li i{display:block;font-size:34px;color:var(--orange)}
.hq-steps li b{position:absolute;top:6px;left:10px;background:var(--navy);color:#fff;border-radius:50%;width:24px;height:24px;line-height:24px;font-size:13px}
.hq-steps li span{display:block;font-size:13px;font-weight:400;color:#66707a}

/* 按鈕 */
.hq-cta{text-align:center;margin-top:34px}
.hq-cta p{margin-top:12px;font-size:15px;color:#4a4a4a}
.hq-btn{display:inline-block;background:var(--yellow);color:var(--navy-d);font-size:21px;font-weight:700;padding:12px 40px;border-radius:40px;box-shadow:0 6px 16px rgba(240,138,36,.35);transition:transform .2s,box-shadow .2s;text-decoration:none}
.hq-btn:hover{color:var(--navy-d);transform:translateY(-2px);box-shadow:0 10px 22px rgba(240,138,36,.45);text-decoration:none}
.hq-cta-bottom{margin-top:40px}

/* FAQ 展開 */
.hq-faq-tip{text-align:center;margin-bottom:22px}
.hq-faq{max-width:900px;margin:0 auto}
.hq-faq details{background:#fff;border:1px solid #e3d5a8;border-radius:12px;margin-bottom:12px;overflow:hidden}
.hq-faq details[open]{border-color:var(--orange);box-shadow:0 4px 14px rgba(240,138,36,.15)}
.hq-faq summary{cursor:pointer;list-style:none;padding:14px 48px 14px 16px;font-weight:700;font-size:17px;color:var(--navy);position:relative;line-height:1.5}
.hq-faq summary::-webkit-details-marker{display:none}
.hq-faq summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--orange);line-height:1}
.hq-faq details[open] summary{background:var(--cream)}
.hq-faq details[open] summary:after{content:"\2212"}
.hq-faq summary span{display:inline-block;background:var(--navy);color:#fff;border-radius:6px;padding:0 9px;margin-right:10px;font-size:14px;line-height:24px;vertical-align:1px}
.hq-ans{padding:12px 20px 18px 20px;font-size:15.5px}
.hq-ans h4{font-size:16px;color:var(--orange);margin:14px 0 6px;font-weight:700}
.hq-ans ul{margin:0 0 .6em;padding-left:0}
.hq-ans ul li{position:relative;padding-left:18px;margin-bottom:4px}
.hq-ans ul li:before{content:"";position:absolute;left:4px;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.hq-ans .hq-end{background:var(--cream);border-left:4px solid var(--yellow);padding:8px 12px;border-radius:0 8px 8px 0;margin-top:12px;color:var(--navy)}

/* 手機 / 平板 */
@media (max-width:991px){
	.hq-hero h1{font-size:40px}
	.hq-hero-line span{font-size:28px}
	.hq-slogan{font-size:30px;transform:none}
	.hq-intro-pic{margin-top:10px}
	.hq-sum-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
}
@media (max-width:575px){
	.hq-hero{min-height:280px}
	.hq-hero-inner{padding:110px 12px 90px}
	.hq-hero h1{font-size:30px}
	.hq-hero-line:before,.hq-hero-line:after{width:30px}
	.hq-hero-line span{font-size:24px;letter-spacing:3px}
	.hq-slogan{font-size:24px}
	.hq-intro p{font-size:16px}
	.hq-block{padding:40px 0}
	.hq-card{padding:20px 16px 14px}
	.hq-title{font-size:22px}
	.hq-btn{font-size:18px;padding:11px 26px}
	.hq-faq summary{font-size:16px}
	.hq-steps li{flex:1 1 44%}
}

/* 覆蓋 .hq h2 的 padding 重置 */
.hq .hq-title{padding:5px 42px 5px 20px}
.hq .hq-title-c{padding:5px 42px 5px 24px;margin:0 auto 14px}
.hq .hq-card .hq-title{margin-bottom:16px}
@media (max-width:575px){.hq .hq-title{padding:4px 30px 4px 14px}}
.hq .hq-pill{color:#fff;padding:3px 24px;background:var(--navy)}
.hq .hq-sum-item h3{color:#fff}

/* 主視覺：純圖片背景，不加遮罩，文字純白 */
.hq .hq-hero{background:url(../img/helper/hero-sunrise.jpg) center 42%/cover no-repeat #f08a24}
.hq .hq-hero h1,.hq .hq-hero-line span,.hq .hq-hero-en{color:#fff;opacity:1;text-shadow:0 2px 8px rgba(0,0,0,.35)}

/* 手繪小插圖 */
.hq .hq-deco{width:190px;margin:10px auto 0}
.hq .hq-ico-h{height:28px;width:auto;vertical-align:-9px;margin-right:2px}
.hq .hq-ico-t{height:28px;width:auto;vertical-align:-8px;margin-right:2px}
.hq .hq-pic{display:block;width:150px;max-width:70%;margin:12px auto 0}
.hq .hq-surfer{display:block;width:100%;max-width:300px;margin:14px auto 0}
@media (max-width:575px){.hq .hq-pic{width:130px}.hq .hq-surfer{max-width:240px}}

/* 插圖排版：對照示意圖 */
.hq .hq-quote-img{display:block;width:100%;max-width:340px;margin:14px 0 0}
.hq .hq-mini .hq-pic{float:right;width:112px;max-width:40%;margin:2px 0 6px 12px}
.hq .hq-mini::after{content:"";display:block;clear:both}
.hq .hq-surfer{float:right;width:130px;max-width:38%;margin:0 0 6px 8px}
.hq .hq-surfer-s{float:right;width:96px;margin:0 0 0 6px}
.hq .hq-step-ico{height:30px;width:30px;object-fit:contain}
.hq .hq-steps .hq-step-ico{display:block;margin:0 auto;height:36px;width:36px}

.hq .hq-title{margin-bottom:26px}
.hq .hq-mini .hq-title{margin-bottom:18px}
.hq .hq-wish{display:flex;align-items:center;gap:6px}
.hq .hq-wish ul{flex:1 1 auto;min-width:0}
.hq .hq-wish .hq-surfer{float:none;flex:0 0 120px;width:120px;max-width:none;margin:0}

/* 小卡片：標題獨佔一行，插圖在文字右側 */
.hq .hq-mini .hq-title{display:table}
.hq .hq-mini .hq-pic{width:96px;max-width:34%;margin:0 0 4px 14px}
.hq .hq-mini p{line-height:1.8}
.hq .hq-sub:has(.hq-ico-h){display:flex;align-items:center;gap:8px}

/* 手機／平板：前言區上下留白 */
@media (max-width:991px){
	.hq .hq-intro{padding:44px 0 64px}
	.hq .hq-intro p{margin-bottom:26px;line-height:1.8}
	.hq .hq-slogan{margin-bottom:20px}
	.hq .hq-intro-pic{margin-top:0}
}
@media (max-width:575px){
	.hq .hq-intro{padding:40px 0 60px}
}

/* 行前準備清單 */
.hq .hq-pack{padding-top:10px}
.hq .hq-pk-wrap{display:flex;gap:14px;align-items:stretch}
.hq .hq-pk-head{flex:0 0 210px;display:flex;flex-direction:column;justify-content:center}
.hq .hq-pk-head .hq-title{font-size:21px;line-height:1.35;padding:8px 20px 8px 16px;margin-bottom:18px}
.hq .hq-pk-head .hq-title small{display:block;margin:2px 0 0;font-size:13px}
.hq .hq-pk-ask{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:12px}
.hq .hq-pk-tip{display:inline-block;background:linear-gradient(transparent 12%,rgba(247,200,49,.85) 12%);padding:8px 16px;border-radius:4px;font-weight:700;color:var(--navy);font-style:italic;transform:rotate(-3deg);align-self:flex-start}
.hq .hq-pk{flex:1 1 0;min-width:0;border-radius:14px;padding:14px 16px 12px;box-shadow:0 3px 10px rgba(80,70,30,.1)}
.hq .hq-pk h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.hq .hq-pk h3 i{font-size:24px}
.hq .hq-pk li{margin-bottom:6px;font-size:14px;line-height:1.5;list-style:none}
.hq .hq-pk label{display:flex;align-items:flex-start;gap:8px;margin:0;cursor:pointer;color:#34404a;font-weight:400}
.hq .hq-pk input{appearance:none;-webkit-appearance:none;flex:0 0 15px;width:15px;height:15px;margin-top:4px;border:2px solid var(--navy);border-radius:3px;background:#fff;position:relative;cursor:pointer}
.hq .hq-pk input:checked{background:var(--navy)}
.hq .hq-pk input:checked:after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hq .hq-pk-g{background:#d6e2a8}
.hq .hq-pk-b{background:#c3dcee}
.hq .hq-pk-y{background:#f9e6a8}
.hq .hq-pk-p{background:#f6d0d0}
.hq .hq-pk-l{background:#d9e4ae}
@media (max-width:1199px){
	.hq .hq-pk-wrap{flex-wrap:wrap}
	.hq .hq-pk-head{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-bottom:6px}
	.hq .hq-pk-head .hq-title{margin-bottom:0}
	.hq .hq-pk-ask,.hq .hq-pk-tip{margin:0}
	.hq .hq-pk{flex:1 1 30%}
}
@media (max-width:767px){.hq .hq-pk{flex:1 1 45%}}
@media (max-width:575px){.hq .hq-pk{flex:1 1 100%}.hq .hq-pk-tip{transform:none}}
.hq .hq-pk li{display:block;width:100%}
.hq .hq-pk input[type=checkbox]:checked{background:var(--navy)!important;border-color:var(--navy)!important}
.hq .hq-pk input[type=checkbox]{opacity:1!important;visibility:visible!important}
.hq .hq-pk input[type=checkbox]{margin:3px 0 0!important}

/* 筆刷效果：色塊用 SVG 位移濾鏡做出毛邊，文字維持清晰 */
.hq .hq-pk-tip{position:relative;background:none;padding:12px 22px;z-index:0}
.hq .hq-pk-tip:before{content:"";position:absolute;left:0;right:0;top:4px;bottom:4px;z-index:-1;
	background:repeating-linear-gradient(176deg,#f7c831 0 5px,#f9d658 5px 7px,#f7c831 7px 12px);
	filter:url(#hq-brush);border-radius:6px}