:root {
     --bg: #e8f4fd;
     --ink: #1f78c8;
     --card: #fff;
     --line: #c9d8e6;
     --accent: #1f78c8;
     --accent-2: #39c5a3;
     --field: #fff;
     --shadow: 0 2px 8px rgba(0, 0, 0, .08);
     --orange: #e04242;
 }

 .GreenCollarCareerMap_bg {
     background: url(../imgs/GreenCollarCareerMap_bg.jpg) center left/cover no-repeat;
     background-attachment: fixed; 
 }

 .GreenCollarCareerMap {
     width: 100% !important;
     max-width: none !important;
     margin: 0 !important;
     padding: 0;
     box-sizing: border-box;
 }

 .wrap {
     max-width: 1452px;
     margin: 0 auto;
     padding: 40px 3%;
     text-align: center;
     background: rgba(250, 250, 250, 0.5);
     backdrop-filter: blur(100px);
     -webkit-backdrop-filter: blur(180px);
     border-radius: 20px;
     margin-bottom: 50px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     margin-bottom: 150px;
 }

 .GreenCollarCareerMap .GreenCollarCareerMap_tilte {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
 }

 .GreenCollarCareerMap .GreenCollarCareerMap_tilte img {
     height: 150px;
 }

 .GreenCollarCareerMap .GreenCollarCareerMap_tilte::before {
     display: none;
 }

 /* 打字效果樣式 */
 #typing-text {
     position: relative;
     color: #2c5aa0;
     font-weight: 600;
     margin: 0;
     min-height: 1.2em;
 }

 #typing-text::after {
     content: '|';
     position: absolute;
     right: -2px;
     color: #39c5a3;
     animation: blink 1s infinite;
 }

 @keyframes blink {
     0%, 50% { opacity: 1; }
     51%, 100% { opacity: 0; }
 }

 /* 標題 */
 .title-row {
     display: flex;
     align-items: flex-end;
     gap: 10px;
     color: var(--ink)
 }

.step-num {
     font-size: 3.5rem;
     font-weight: 700;
     line-height: 1;
     font-style: italic;
     color: var(--orange);
 }

 .title-row .step-text {
     font-size: 1.75rem;
     font-weight: 700
 }

 /* radio 作為純CSS狀態 */
 .role-input {
     position: absolute;
     opacity: 0;
     pointer-events: none
 }

 /* 身分卡片列 */
 .role-row {
     display: flex;
     gap: 24px;
     flex-wrap: wrap;
     margin-top: 24px;
     margin-bottom: 48px;
     justify-content: center
 }

 .role-card {
     width: calc(100% / 3 - 17px);
     border: 2px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     display: flex; gap: 10px;
     align-items: center;
     justify-content: center;
     padding: 24px 18px;
     cursor: pointer;
     transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
     user-select: none;
     border-radius: 20px;
     backdrop-filter: blur(100px);
 }

 .role-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, .12)
 }

 .role-fig {
     display: flex;
     align-items: center;
     justify-content: center
 }

 .role-fig img {
     width: 100%;
     height: 120px;
     object-fit: contain;
     display: block
 }

 .role-label {
     font-size: 1.5rem;
     font-weight: 700;
     letter-spacing: .02em;
     color: #2c5aa0;
     position: relative; 
 }

 /* 啟用狀態樣式 */
 #role-student:checked~.role-row label[for="role-student"],
 #role-jobseeker:checked~.role-row label[for="role-jobseeker"],
 #role-public:checked~.role-row label[for="role-public"] {
     border-color: var(--accent)
 }

 #role-student:checked~.role-row label[for="role-student"] .role-label,
 #role-jobseeker:checked~.role-row label[for="role-jobseeker"] .role-label,
 #role-public:checked~.role-row label[for="role-public"] .role-label {
     color: #1f78c8
 }

 #role-student:checked~.role-row label[for="role-student"] .role-label::after,
 #role-jobseeker:checked~.role-row label[for="role-jobseeker"] .role-label::after,
 #role-public:checked~.role-row label[for="role-public"] .role-label::after {
     content: "";
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: -6px;
     width: 46px;
     height: 6px;
     border-radius: 3px;
     background: var(--accent-2)
 }

 /* 標題列：根據身份切換第2步標題 */
 .legend {
     display: flex;
     align-items: flex-end;
     gap: 10px;
     color: var(--ink);
     margin: 32px 0 24px
 }



 .legend .step-text {
     font-size: 1.625rem;
     font-weight: 700
 }

 .legend-interest {
     display: none
 }

 #role-public:checked~.legend-edu {
     display: none
 }

 #role-public:checked~.legend-interest {
     display: flex
 }

 /* 表單與下拉 */
 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     text-align: left
 }

 .field {
     position: relative
 }

 select {
     width: 100%;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background: transparent;
     border: 2px solid var(--line);
     border-radius: 12px;
     padding: 14px 46px 14px 16px;
     font-size: 1.125rem;
     line-height: 1.2;
     box-shadow: var(--shadow);
     color: #1a4a77
 }

 .chev {
     position: absolute;
     right: 14px;
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
     color: #9bb8d3
 }

 .chev svg {
     width: 22px;
     height: 22px
 }

 /* 第2步內容：教育(學生/求職者) vs 興趣(一般民眾) */
 .edu-block {
     display: block
 }

 .interest-block {
     display: block
 }

 #role-public:checked~.edu-block {
     display: none
 }

 #role-public:checked~.interest-block {
     display: grid
 }

 /* Step 1, 2, 3 的顯示/隱藏控制 */
 .step1 {
     display: block;
 }

 .step2 {
     display: none;
 }

 .step3 {
     display: none;
 }

 /* 學生選中時：顯示 step1，隱藏 step2 和 step3 */
 #role-student:checked ~ .step1 {
     display: block;
 }

 #role-student:checked ~ .step2 {
     display: none;
 }

 #role-student:checked ~ .step3 {
     display: none;
 }

 /* 求職者選中時：顯示 step2，隱藏 step1 和 step3 */
 #role-jobseeker:checked ~ .step1 {
     display: none;
 }

 #role-jobseeker:checked ~ .step2 {
     display: block;
 }

 #role-jobseeker:checked ~ .step3 {
     display: none;
 }

 /* 一般民眾選中時：顯示 step3，隱藏 step1 和 step2 */
 #role-public:checked ~ .step1 {
     display: none;
 }

 #role-public:checked ~ .step2 {
     display: none;
 }

 #role-public:checked ~ .step3 {
     display: block;
 }

 /* 興趣按鈕（白底圓角膠囊） */
 .interest-row {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 36px;
     justify-items: center
 }

 .pill-input {
     position: absolute;
     opacity: 0
 }

 .pill {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 56px;
     border-radius: 16px;
    backdrop-filter: blur(10px);
     border: var(--line) 2px solid;
     font-size: 1.25rem;
     font-weight: 700;
     color: #2a5f93;
     cursor: pointer;
     
     width: 100%;
 }

 .pill:hover {
     background: #1e659e;
     color: #fff;
 }

 .pill-input:focus-visible+.pill {
     outline: 3px solid #99c2ea
 }

 .pill-input:checked+.pill {
     border-color: var(--accent)
 }

 /* 可多選，僅改描邊 */
 /* 第3步：僅求職者顯示 */
 #role-jobseeker:checked~#exp-block {
     display: block
 }

 #exp-block {
     display: none;
     margin-top: 14px
 }

 /* RWD */
 @media (max-width:1000px) {
     .role-row {
         justify-content: center
     }
 }

 /* 平板以下 - 圖片消失，按鈕變垂直 */
 @media (max-width:768px) {
     .role-row {

         align-items: center;
         gap: 16px
     }

     .role-card {
         width: calc(100% / 3 - 20px);
         max-width: 300px;
         padding: 16px 4px;
         flex-direction: row;
         text-align: left
     }

     .role-fig {
         display: none
     }

     .role-label {
         margin-top: 0;
         margin-left: 0
     }
 }

 @media (max-width:720px) {
     :root {
         --card-w: 260px;
         --icon-w: 200px;
         --icon-h: 200px
     }

     .form-row {
         grid-template-columns: 1fr
     }

     .interest-row {
         grid-template-columns: 1fr
     }

     .wrap {
         padding-bottom: 44px
     }
 }

 .search-btn {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 16px 28px;
     border-radius: 30px;
     background: #1e659e;
     color: #fff;
     font-size: 1.375rem;
     font-weight: 800;
     letter-spacing: .06em;
     border: none;
     box-shadow: var(--shadow);
     cursor: pointer;
 }

 .search-btn:hover {
     background: #11304a;
 }

 .action-row {
     margin-top: 32px;
     text-align: center
 }

 .search-btn svg {
     width: 26px;
     height: 26px;
 }


 /* 綠領職涯路徑地圖 */
 .requirements {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
 }

 .GreenCollarCareerMap h3 {
     display: flex;
     align-items: center;
     font-weight: bold;
     justify-content: flex-start;
     color: var(--ink);
 }

 .GreenCollarCareerMap h3::before {
     background: url(../imgs/Your_conditions.png) center/contain no-repeat;
     position: relative;
     display: flex;
     content: "";
     width: 50px;
     height: 50px;

 }

 /* 證照表格動作按鈕樣式 */
 .action-buttons {
     display: flex;
     gap: 8px;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 0;
 }

 .cert-btn {
     padding: 6px 12px;
     border: 1px solid #ddd;
     border-radius: 4px;
     background: #fff;

     cursor: pointer;
     transition: all 0.3s ease;
     min-width: 50px;
     text-align: center;
     white-space: nowrap;
 }

 .cert-btn:hover {
     transform: translateY(-1px);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }




 /* header 區域：左標籤、右值 */
 .condition-header {
     display: flex;
     align-items: stretch;
     flex-wrap: wrap;
     border: #b8e0ff 1px solid
 }

 /* 左邊的標籤 */
 .condition-label {
     background: #3c7aa9;
     color: #fff;
     font-weight: bold;
     padding: 0.5rem 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 120px;
     /* 固定寬度，避免被擠壓 */
 }

 /* 右邊的值 */
 .condition-value {
     background: #fff;
     flex: 1;
     display: flex;
     align-items: center;
     padding: 0.5rem 1rem;
     font-size: 1rem;
     justify-content: center;
 }

 /* RWD：在小螢幕改成上下堆疊 */
 @media (max-width: 600px) {
     .condition-header {
         flex-direction: column;
     }

     .condition-label,
     .condition-value {
         flex: 1 1 100%;
         text-align: center;
     }

     .condition-label {
         border-bottom: 1px solid #cfd8c3;
     }
 }

 .CertTableCSS {
     border: 0px;
     margin-bottom: 10px;
 }

 .CertTableCSS th:first-child,
 .CertTableCSS td:first-child {
     padding-left: 0.2em;
 }

 .CertTableCSS th:last-child,
 .CertTableCSS td:last-child {
     padding-right: 0.2em;
 }

 .CertTableCSS th,
 .CertTableCSS td {
     padding: 0.6em 0.3em;
     border: 0px;
     min-height: 40px;
     border: 1px solid white;
     text-align: center;
 }

 .CertTableCSS td {
     border-bottom: 1px dotted #999999;
 }

 .CertTableCSS tr {
     background-color: #fffcff;
 }

 .CertTableCSS tr:nth-child(even) {
     background-color: #f2f2f2;
 }

 .CertTableCSS tr:nth-child(odd) {
     background-color: #fffcff;
 }

 .CertTableCSS tr:hover {
     background-color: #ffffcc;
 }

 .CertTableCSS th {
     border-top: 1px dotted #999999;
     border-bottom: 1px dotted #e4ebeb;
     font-weight: bold;
     background-color: #3c7aa9;
     text-align: center;
     color: #fff;
 }