:root{
    --teal:#0099b3;
    --teal-dark:#006f82;
    --summary-ink:#1f1c1c;
    --intro-ink:#04353d;
    --sub-heading:#004782;
    --sub-border:#82cdd9;
    --alt-bg:#eefdf1;
    --shadow-card:0px 5px 7.5px rgba(0,72,92,0.1);
    --shadow-nav:-3px 4px 5px rgba(23,58,83,0.25);
    --bg-top:#e9f5f3;
    --bg-bottom:#b5c5e2;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    color:var(--summary-ink);
    font-family:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background-color:var(--bg-bottom);
    background: url("../img/bg1.webp") no-repeat;
    background-size: cover;
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat;
  }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; }
  .icon-svg{ width:100%; height:100%; }

  /* ============ Header ============ */
  section{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .site-header{
    max-width:1300px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .logo-group{
    display:flex; align-items:center; gap:20px;
  }
  .logo-mark{ width:270px; height:70px; flex-shrink:0; }
  .logo-mark svg{ width:100%; height:100%; }
  .type-mark{ width:327px; height:54px; flex-shrink:0; }
  .type-mark svg{ width:100%; height:100%; }

  .nav-pill{
    display:flex; align-items:center; gap:30px;
    padding:15px 30px;
    padding-right: 0;
    border-radius:0 0 15px 15px;
    background:none;
  }
  .nav-current{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    position:relative;
  }
  .nav-current span{
    font-weight:400; font-size:24px; line-height:32px; color:#000; white-space:nowrap;
  }
  .nav-current .chevron{
    width:30px; height:30px; transform:rotate(0deg); position: absolute; bottom: -50px;
  }
  .nav-current .chevron svg{ width:100%; height:100%; }
  .nav-divider{ width:2px; height:39.588px; background:#8dc0d1; flex-shrink:0; }
  .nav-link-icon{ width:80px; height:73px; flex-shrink:0; transition:opacity .2s ease; }
  .nav-link-icon:hover{ opacity:.75; }
  .nav-link-icon svg{ width:100%; height:100%; }

  .nav-toggle{ display:none; }

  .mainArea {
    max-width: 800px;
    text-align: center;
    position: relative;
        margin: 0 auto;
        margin-top: 20px;
        padding: 0px !important;
  }

  .mainArea img{
    margin: 0 auto;
    width: 100%;  
    max-width: 800px;
  }
  .link-block {
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
  }
  .link-1 { left: 0;     width: 30%; }
  .link-2 { left: 35%; width: 30%; }
  .link-3 { left: 70%; width: 30%; }

  /* ============ Hero ============ */
  
  .hero{
    max-width:1300px; margin:0 auto;
    padding:60px 0 20px;
    display:flex; flex-direction:column; align-items:center;
  }
  .hero-badge{
    position:relative;
    width:295.35px; height:295.35px;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-badge .dotbg{
    position:absolute; inset:0; width:100%; height:100%;
  }
  .hero-badge .dotbg svg{ width:100%; height:100%; }
  .hero-badge h1{
    position:relative; z-index:1;
    margin:0;
    font-weight:700; font-size:45px; color:var(--teal-dark);
    letter-spacing:16.65px;
    white-space:nowrap;
  }

  .bigPhoto{
    max-width:1300px; margin:0 auto;
  }

  .bigPhoto img{
    width: 100%;
    box-shadow: var(--shadow-card);
    -webkit-border-radius: 15px;
            border-radius: 15px;
  }

  /* ============ Intro ============ */
  .intro{
    max-width:1300px; margin:0 auto;
    padding:0 0 10px;
  }
  .intro p{
    margin:0;
    font-weight:500; font-size:22px; line-height:40px; color:var(--intro-ink);
  }

  /* ============ Accordion ============ */
  .accordion-wrap{
    max-width:1300px; margin:0 auto;
    padding:15px 0 40px;
  }
  .accordion{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; }

  .acc-item{
    border-radius:15px;
    box-shadow:var(--shadow-card);
    background:#fff;
  }
  .acc-item.alt{ background:var(--alt-bg); }

  .acc-trigger{
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:15px;
    background:none; border:none; cursor:pointer;
    padding:15px 10px 15px 30px;
    text-align:left;
    font-family:inherit; color:inherit;
  }
  .acc-title-group{
    display:flex; align-items:center; gap:15px; flex-wrap:wrap;
  }
  .acc-num{
    font-weight:700; font-size:28px; color:var(--teal);
    letter-spacing:2.24px; white-space: break-spaces;
  }
  .acc-summary{
    font-weight:400; font-size:24px; line-height:32px; color:var(--summary-ink);
  }
  .acc-arrow{
    width:40px; height:40px; flex-shrink:0;
    transform:rotate(-90deg);
    transition:transform .35s ease;
  }
  .acc-arrow svg{ width:100%; height:100%; }
  .acc-item.is-open .acc-arrow{ transform:rotate(0deg); }

  .acc-panel{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .38s ease;
  }
  .acc-item.is-open .acc-panel{ grid-template-rows:1fr; }
  .acc-panel-inner{ overflow:hidden; min-height:0; }
  .acc-panel-body{
    padding:0 10px 20px 30px;
    opacity:0; transform:translateY(-4px);
    transition:opacity .3s ease .05s, transform .3s ease .05s;
  }
  .acc-item.is-open .acc-panel-body{ opacity:1; transform:translateY(0); }

  .acc-detail{
    border-left:2px solid var(--sub-border);
    padding:0 20px;
    display:flex; flex-direction:column; gap:15px;
  }
  .acc-detail-row{ display:flex; flex-direction:column; gap:5px; }
  .acc-detail-row .acc-sub-title{
    font-weight:700; font-size:18px; line-height:26px; color:var(--sub-heading);
    padding-left:27px; text-indent:-27px;
    margin: 0;
  }
  .acc-detail-row .acc-sub-body{
    font-weight:400; font-size:18px; line-height:26px; color:#696969;
    padding-left:18px;
    margin: 0;
    text-align: justify;
  }
  .acc-panel-body p.single{
    margin:0; padding-left:0;
    font-weight:400; font-size:18px; line-height:26px; color:#000;
  }
  .acc-panel-body p.placeholder{
    margin:0; font-style:italic; font-weight:400; font-size:18px; color:#666;
  }

  /* ============ Bottom decoration ============ */
  .bottom-deco{
    max-width:1050px; margin:0 auto;
    padding:205px 0;
    display:flex; align-items:center; justify-content:center;
    /* 新增漸層背景，對應 Figma 的 Radial: 48% FFFFFF 78% → 100% FFFFFF 0% */
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.78) 20%,
    rgba(255,255,255,0) 60%
  );
  -webkit-background-size: 100% 100%;
       -o-background-size: 100% 100%;
          background-size: 100% 100%;
  }
  .bottom-deco img{ width:500px; height:auto; }

  /* ============ Footer ============ */
  footer{
    background:#3b7796;
    display:flex; align-items:center; justify-content:center;
    padding:14px 24px;
  }
  footer p{
    margin:0; font-size:14px; line-height:15px; color:#fff; text-align:center;
  }

  


  /* ============ List Pages (list_a / list_b / list_c) ============ */
  .hero-icon-a{
    position: relative;
    z-index: 1;
    width: 210px;
    height: 212px;
    object-fit: contain;
  }

  .hero-icon{
    z-index: 1;
        width: 68%;
    transform: translate(18px, -18px);
  }

  .council-section{
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 0;
  }

  .council-panel{
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    padding: 80px 60px;
  }

  .council-title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0 0 30px;
  }
  .council-title span{
    font-weight: 700;
    font-size: 35px;
    color: var(--group-color, #4774b9);
    letter-spacing: 12.95px;
    white-space: nowrap;
  }
  .council-title img{
    height: 28px;
    width: auto;
    flex-shrink: 0;
  }

  .candidate-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .candidate-card{
    width: calc(20% - 16px);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .candidate-card img{
    width: 100%;
    height: auto;
    display: block;
  }

  body.list-a{ --group-color:#4774b9; background: url("../img/bg_A.webp") no-repeat; background-size: cover; }
  body.list-b{ --group-color:#e9537a; background: url("../img/bg_B.webp") no-repeat; background-size: cover; }
  body.list-c{ --group-color:#eb6133; background: url("../img/bg_C.webp") no-repeat; background-size: cover; }

  
  /* ============ Candidate Detail Page (A-1-1.html etc.) ============ */
  body.detail-page.main{
    background: url("../img/bg_main.webp") no-repeat;
    background-size: cover;
  }

  body.detail-page{
    background: url("../img/bg1.webp") no-repeat;
    background-size: cover;
  }
  body.detail-page.group-b{
    background: url("../img/bg_C.webp") no-repeat;
    background-size: cover;
  }
  body.detail-page.group-c{
    background: url("../img/bg_B.webp") no-repeat;
    background-size: cover;
  }

  .detail-section{
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 0;
  }

  .detail-panel{
    position: relative;
    background: rgba(255,255,255,0.85);
    border-radius: 20px;
    padding: 80px;
    overflow: hidden;
  }

  .detail-pattern{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45%;
    max-width: 500px;
    height: auto;
    pointer-events: none;
    z-index: 0;
  }

  .detail-card{
    position: relative;
    z-index: 1;
    display: flex;
    gap: 50px;
    align-items: flex-start;
  }

  .detail-photo{
    width: 430px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .detail-photo img{
    width: 100%;
    height: auto;
    display: block;
  }

  .detail-info{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .detail-name{
    margin: 0;
    font-weight: 500;
    font-size: 38px;
    color: #2290a7;
  }

  .detail-divider{
    width: 100%;
    height: 2px;
    background: #dcdcdc;
  }

  .detail-fields{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 5px 0;
    width: 100%;
  }
  .detail-field{
    display: flex;
    gap: 20px;
    align-items: flex-start;
    font-size: 22px;
    line-height: 32px;
  }
  .detail-field-label{
    display: flex;
    justify-content: space-between;
    width: 111px;
    flex-shrink: 0;
    font-weight: 500;
    color: #6c6a73;
    margin-top: 1px;
    margin-bottom: 0; 
  }
  .detail-field-value{
    flex: 1;
    min-width: 0;
    font-weight: 400;
    color: #1d1d1d;
    margin-top: 1px;
    margin-bottom: 0; 
  }
  .detail-field-value.multiline p{
    margin: 0;
    line-height: 32px;
        text-align: justify;
  }


  /* ============================================================
     Responsive Media Queries (large -> small)
     ============================================================ */

  @media (prefers-reduced-motion: reduce){
    .acc-panel, .acc-arrow, .acc-panel-body{ transition: none; }
  }

  @media (max-width: 1300px){
    .logo-group{ width: 53%; }
    .logo-mark{ width: 40%; }
    .type-mark{ width: 50%; }
    .nav-link-icon{ width: 20%; }
    .nav-pill{
      width: 50%;
      display: flex;
      gap: 3%;
    }
  }

  @media (max-width: 1200px){
    .candidate-card{ width: calc(25% - 16px); }
    .detail-photo{ width: 40%; }
  }

  @media (max-width: 920px){
    .nav-link-icon{ width: 17%; }
    .nav-current span{ font-size: 20px; }
    .nav-pill{
      display: flex;
      justify-content: flex-end;
    }
        .mainArea {
              padding: 0px 10px !important;
        }
  }

  /* ============ Mobile ============ */
  @media (max-width: 760px){
    /*body{
      background-image: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
      background-size:100% 100%;
    }*/


    .site-header{
      flex-direction: column;
      align-items: stretch;
      padding: 11px 0 0;
      gap: 0;
    }
    .logo-group{ justify-content: center; padding: 0 16px 11px; width: 100%; }
    .logo-mark{ width: 144px; height: 38px; }
    .type-mark{ width: 205px; height: 34px; }

    .nav-pill{
      gap: 18px; padding: 5px 16px;
      width: 100%; justify-content: center;
    }
    .nav-current span{ font-size: 16px; line-height: 32px; }
    .nav-current .chevron{ width: 24px; height: 24px; bottom: -25px; }
    .nav-link-icon{ width: 55px; height: 50.188px; }
    .nav-divider{ height: 32px; }

    .hero{ padding: 36px 16px 12px; }
    .hero-badge{ width: 163.8px; height: 163.8px; }
    .hero-badge h1{ font-size: 31px; letter-spacing: 11.47px; }

    .intro{ padding: 0 16px 8px; }
    .intro p{ font-size: 20px; line-height: 35px; }

    .accordion-wrap{ padding: 15px 16px 32px; }
    .acc-trigger{ padding: 10px 5px 10px 15px; }
    .acc-num{ font-size: 20px; letter-spacing: 1.4px; }
    .acc-summary{ font-size: 18px; line-height: 24px; }
    .acc-title-group{ flex-direction: column; align-items: flex-start; gap: 7px; }
    .acc-panel-body{ padding: 0 5px 16px 15px; }

    .bottom-deco{ max-width: 100%; padding: 67px 16px; }
    .bottom-deco img{ width: 288px; }

    footer{ padding: 8px 16px; }
    footer p{ font-size: 12px; }

    /* -- list / detail pages -- */
    .hero-icon-a{ width: 124px; height: 126px; }
    .hero-icon{
      z-index: 1;
      width: 100%;
      transform: translate(15px, -22px);
    }

    .council-section{ padding: 15px; }
    .council-panel{ padding: 15px 30px; border-radius: 15px; }
    .council-title{ gap: 15px; margin-bottom: 30px; }
    .council-title span{ font-size: 24px; letter-spacing: 9px; }
    .council-title img{ height: 20px; }

    .candidate-grid{ gap: 20px; }
    .candidate-card{ width: calc(33% - 13px); }

    .mainArea{ margin-top: 40px; }
    .detail-section{ padding: 20px 15px 40px; }
    .detail-panel{ padding: 20px; border-radius: 15px; }
    .detail-pattern{ display: none; }

    .detail-card{ flex-direction: column; gap: 0; }
    .detail-photo{
      width: calc(100% + 40px);
      margin: -20px -20px 30px -20px;
      border-radius: 15px 15px 0 0;
    }

    .detail-info{ padding: 0 0 10px; gap: 16px; width:  100%; }
    .detail-name{ font-size: 32px; text-align: center; }

    .detail-fields{ font-size: 16px; gap: 5px; }
    .detail-field{ gap: 10px; font-size: 16px; line-height: 32px; }
    .detail-field-label{ width: 81.74px; }
    .detail-field-value.multiline p{
      line-height: 25px;
      margin: 0 0 6px;
    }
    .detail-field-value.multiline p:last-child{ margin-bottom: 0; }
  }

  @media (max-width: 480px){
    .intro p{
      font-size: 18px;
      line-height: 30px;
    }
    .acc-panel-body p.single, .acc-detail-row .acc-sub-body, .acc-summary{
      font-size: 17px;
    }
    .acc-detail-row .acc-sub-title{
      padding-left: 17px;
      text-indent: -21px;
    }

    .candidate-card{ width: calc(50% - 11px); }
  }

  @media (max-width: 420px){
    .council-panel{ padding: 35px 15px; }
    .candidate-grid{ gap: 8px; }
  }

  @media (max-width: 400px){
    .nav-link-icon{
      width: 19%;
      height: auto;
      padding: 0 2%;
    }
    .nav-pill{ gap: 8px; padding: 5px 8px; }
    .logo-mark{ width: 110px; height: 29px; }
    .type-mark{ width: 157px; height: 26px; }
    .bottom-deco img{ width: 230px; }
  }