*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{font-family:'Noto Sans TC',sans-serif;background:#fff;color:#333;-webkit-font-smoothing:antialiased;}

    @keyframes fadeInUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
    @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
    @keyframes floatA{0%,100%{transform:translate(0,0);}50%{transform:translate(10px,-12px);}}
    @keyframes floatB{0%,100%{transform:translate(0,0);}50%{transform:translate(-9px,11px);}}
    @keyframes slowZoom{0%{transform:scale(1);}100%{transform:scale(1.1);}}
    @keyframes navSlide{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}

    /* NAV 由 shared.css 提供 */

    /* ─── PAGE HEADER / HERO ─── */
    .page-hero{position:relative;background:#F7F9FB;overflow:hidden;padding-top:110px;}
    .page-hero__mol{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
    .page-hero__inner{position:relative;display:grid;grid-template-columns:1fr 420px;align-items:center;min-height:420px;}
    .page-hero__text{padding:64px 64px 64px;position:relative;z-index:1;}
    .breadcrumb{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5A6776;margin-bottom:28px;}
    .breadcrumb a{color:#5A6776;text-decoration:none;transition:color 0.2s;}
    .breadcrumb a:hover{color:#1272B0;}
    .breadcrumb .sep{color:#5A6776;}
    .breadcrumb .current{color:#1272B0;font-weight:600;}
    .page-hero__eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.18em;color:#1272B0;margin-bottom:18px;animation:fadeIn 0.7s ease both;}
    .page-hero__title{font-family:'Noto Serif TC',serif;font-size:clamp(40px,4.5vw,52px);font-weight:900;color:#0A2440;line-height:1.15;margin-bottom:24px;animation:fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) both;}
    .page-hero__sub{font-size:16px;color:#5A6776;line-height:1.9;max-width:540px;animation:fadeInUp 0.9s ease both;animation-delay:0.15s;opacity:0;animation-fill-mode:forwards;}
    .page-hero__stats{display:flex;gap:40px;margin-top:40px;animation:fadeInUp 0.9s ease both;animation-delay:0.3s;opacity:0;animation-fill-mode:forwards;}
    .stat__num{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:600;color:#0A2440;}
    .stat__num--teal{color:#14A08C;}
    .stat__label{font-size:12px;color:#5A6776;margin-top:4px;letter-spacing:0.05em;}
    .stat__divider{width:1px;background:#E0E6EC;}
    .page-hero__img{position:relative;align-self:stretch;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:40px;}
    .page-hero__img img{width:100%;height:auto;max-height:320px;object-fit:contain;animation:slowZoom 14s ease-in-out infinite alternate;}

    /* ─── BODY: sidebar + content ─── */
    .product-body{display:grid;grid-template-columns:300px 1fr;align-items:start;border-top:1px solid #EDEFF2;}

    .sidebar{position:sticky;top:78px;align-self:start;background:#0A2440;padding:48px 0;max-height:calc(100vh - 78px);overflow-y:auto;}
    .sidebar__label{padding:0 36px 24px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.18em;color:rgba(255,255,255,0.75);}
    .nav-item{padding:18px 36px;border-left:3px solid transparent;cursor:pointer;transition:all 0.2s;display:flex;gap:16px;align-items:baseline;text-decoration:none;}
    .nav-item:hover{background:rgba(255,255,255,0.04);}
    .nav-item.active{border-left-color:#1683C7;background:rgba(22,131,199,0.14);}
    .nav-item__num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:rgba(255,255,255,0.35);transition:color 0.2s;}
    .nav-item.active .nav-item__num{color:#1683C7;}
    .nav-item__name{font-family:'Noto Serif TC',serif;font-size:17px;font-weight:700;color:#fff;line-height:1.3;}
    .nav-item__en{font-size:11px;color:rgba(255,255,255,0.75);margin-top:4px;letter-spacing:0.06em;}
    .sidebar__cta{margin:36px 36px 0;padding:24px;background:rgba(22,131,199,0.14);border:1px solid rgba(22,131,199,0.3);border-radius:8px;}
    .sidebar__cta-title{font-family:'Noto Serif TC',serif;font-size:16px;font-weight:700;color:#fff;line-height:1.5;margin-bottom:10px;}
    .sidebar__cta-sub{font-size:12px;color:rgba(255,255,255,0.82);line-height:1.7;margin-bottom:16px;}
    .sidebar__cta-btn{display:inline-flex;align-items:center;gap:8px;background:#1272B0;color:#fff;padding:10px 18px;border-radius:4px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:background 0.2s;}
    .sidebar__cta-btn:hover{background:#1F95DB;}

    /* ─── Content sections (tab-style) ─── */
    main [data-section]{padding:80px;scroll-margin-top:90px;display:none;animation:panelIn 0.4s cubic-bezier(0.16,1,0.3,1);}
    main [data-section].active{display:block;}
    @keyframes panelIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
    .section--alt{background:#F7F9FB;border-top:1px solid #EDEFF2;}
    .sec-head{display:flex;align-items:flex-start;gap:24px;margin-bottom:36px;}
    .sec-head__num{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:#1272B0;padding-top:8px;}
    .sec-head__body{flex:1;}
    .sec-head__en{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.18em;color:#1272B0;margin-bottom:10px;}
    .sec-head__title{font-family:'Noto Serif TC',serif;font-size:36px;font-weight:900;color:#0A2440;line-height:1.2;margin-bottom:16px;}
    .sec-head__desc{font-size:15px;color:#5A6776;line-height:1.95;max-width:620px;}
    .sec-head__desc strong{color:#0A2440;}
    .tag-eco{font-size:11px;font-weight:700;color:#14A08C;background:rgba(20,160,140,0.1);padding:4px 12px;border-radius:20px;margin-left:14px;display:inline-block;vertical-align:middle;}

    .subhead{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:#1272B0;letter-spacing:0.1em;margin-bottom:16px;}

    /* Resins 01 */
    .resins-grid{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start;}
    .resin-img-wrap{background:linear-gradient(135deg,#EEF3F8,#DCE6F0);border-radius:10px;overflow:hidden;padding:28px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;}
    .resin-img-wrap img{width:auto;height:auto;max-width:88%;max-height:88%;object-fit:contain;}
    .resin-forms{display:flex;gap:8px;margin-top:14px;}
    .resin-forms span{flex:1;text-align:center;font-size:12px;color:#5A6776;padding:8px;background:#F4F7FA;border-radius:4px;}

    .features-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:40px;}
    .feature{border-left:3px solid #1683C7;padding:4px 0 4px 16px;}
    .feature--teal{border-left-color:#14A08C;}
    .feature__title{font-weight:700;color:#0A2440;font-size:14px;}
    .feature__desc{font-size:13px;color:#5A6776;margin-top:3px;}

    .spec-table{border:1px solid #E4E9EE;border-radius:8px;overflow-x:auto;background:#fff;}
    .spec-table table{width:100%;border-collapse:collapse;font-size:13.5px;}
    .spec-table th{text-align:left;padding:12px 18px;background:#0A2440;color:#fff;font-weight:700;}
    .spec-table th.item-col{color:rgba(255,255,255,0.55);font-weight:600;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;}
    .spec-table td{padding:12px 18px;color:#0A2440;border-top:1px solid #EDEFF2;}
    .spec-table td.label{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#5A6776;}
    .spec-table tr.alt{background:#F8FAFC;}
    .spec-note{font-size:11px;color:#5A6776;margin-top:10px;font-style:italic;}

    .tags-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;}
    .tags-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
    .tags-list__label{font-size:12px;color:#5A6776;margin-right:4px;}
    .tag{font-size:12px;color:#0A2440;background:#EEF3F8;padding:6px 14px;border-radius:20px;cursor:pointer;transition:all 0.2s;border:none;}
    .tag:hover{background:#1683C7;color:#fff;}
    .tag--white{background:#fff;border:1px solid #E4E9EE;}
    .tag--white:hover{background:#1683C7;color:#fff;border-color:#1683C7;}
    .downloads{display:flex;gap:10px;}
    .dl-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#0A2440;border:1.5px solid #D9E4EF;background:#fff;padding:9px 16px;border-radius:4px;cursor:pointer;text-decoration:none;transition:all 0.2s;}
    .dl-btn:hover{border-color:#1683C7;color:#1683C7;}

    /* Additives 02 - product cards */
    .add-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px;}
    .add-card{background:#fff;border:1px solid #E4E9EE;border-radius:10px;padding:24px;transition:all 0.25s;cursor:pointer;}
    .add-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(10,36,64,0.08);border-color:#1683C7;}
    .add-card__icon{height:72px;margin-bottom:18px;display:flex;align-items:center;justify-content:flex-start;}
    .add-card__icon img{height:72px;object-fit:contain;}
    .add-card__icon-svg{width:72px;height:72px;background:#EEF3F8;border-radius:10px;display:flex;align-items:center;justify-content:center;}
    .add-card__name{font-family:'Noto Serif TC',serif;font-size:18px;font-weight:700;color:#0A2440;}
    .add-card__en{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#1272B0;margin:4px 0 12px;letter-spacing:0.06em;}
    .add-card__desc{font-size:13px;color:#5A6776;line-height:1.7;}

    /* PET 03 */
    .pet-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
    .pet-feature{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;background:#F7F9FB;border-radius:8px;}
    .pet-feature__tag{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#1272B0;font-weight:600;}
    .pet-feature__tag--teal{color:#14A08C;}
    .pet-feature__title{font-weight:700;color:#0A2440;font-size:14px;}
    .pet-feature__desc{font-size:13px;color:#5A6776;margin-top:3px;}
    .pet-img-card{background:#0A2440;border-radius:10px;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:40px;margin-bottom:20px;}
    .pet-img-card img{max-width:55%;max-height:70%;object-fit:contain;filter:brightness(0) invert(1);opacity:0.92;}

    /* Specialty 04 */
    .specialty-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start;}
    .feature--card{padding:14px 16px;background:#fff;border-radius:0 6px 6px 0;}
    .msa-card{background:#fff;border:1px solid #E4E9EE;border-radius:10px;overflow:hidden;}
    .msa-card img{width:100%;aspect-ratio:1/1;object-fit:cover;}
    .msa-card__caption{padding:18px 20px;font-size:13px;color:#5A6776;line-height:1.7;}
    .msa-card__caption strong{color:#0A2440;}

    /* ─── Consultation CTA ─── */
    .consult{position:relative;background:#0A2440;overflow:hidden;padding:88px 80px;}
    .consult__mol{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.6;}
    .consult__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;}
    .consult__eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.18em;color:#1272B0;margin-bottom:16px;}
    .consult__title{font-family:'Noto Serif TC',serif;font-size:38px;font-weight:900;color:#fff;line-height:1.3;margin-bottom:16px;}
    .consult__sub{font-size:15px;color:rgba(255,255,255,0.85);line-height:1.85;max-width:560px;}
    .consult__actions{display:flex;flex-direction:column;gap:14px;flex-shrink:0;}
    .consult__btn{padding:16px 40px;border-radius:4px;font-weight:700;font-size:15px;cursor:pointer;text-align:center;transition:all 0.25s;text-decoration:none;}
    .consult__btn--primary{background:#1272B0;color:#fff;box-shadow:0 8px 24px rgba(22,131,199,0.3);}
    .consult__btn--primary:hover{transform:translateY(-2px);background:#1F95DB;}
    .consult__btn--ghost{color:#fff;font-weight:600;border:1.5px solid rgba(255,255,255,0.25);}
    .consult__btn--ghost:hover{border-color:#1683C7;color:#1683C7;}

    /* ─── Contact footer (same as home) ─── */
    .section-contact{background:#1B6AAD;position:relative;overflow:hidden;}
    .contact-blob{position:absolute;top:-30px;left:80px;width:80px;height:80px;background:rgba(255,255,255,0.08);border-radius:0 0 50% 50%;}
    .contact-grid{display:grid;grid-template-columns:360px 1fr;min-height:260px;}
    .contact-left{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 40px;border-right:1px solid rgba(255,255,255,0.12);}
    .contact-left__title{font-family:'Noto Serif TC',serif;font-size:42px;font-weight:900;color:#fff;letter-spacing:0.08em;}
    .contact-left__sub{font-size:14px;color:rgba(255,255,255,0.95);margin-top:8px;letter-spacing:0.1em;}
    .contact-right{display:flex;flex-direction:column;justify-content:center;padding:48px 64px;}
    .contact-row{display:flex;align-items:flex-start;gap:48px;}
    .contact-icon-wrap{width:44px;height:44px;border:2px solid rgba(255,255,255,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .contact-info{flex:1;}
    .contact-info__title{font-weight:700;color:#fff;font-size:16px;margin-bottom:8px;}
    .contact-info__sub{font-size:13px;color:rgba(255,255,255,0.95);line-height:1.7;}
    .contact-cta{background:#CE2C20;color:#fff;padding:12px 28px;border-radius:24px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;transition:all 0.2s;text-decoration:none;align-self:center;flex-shrink:0;}
    .contact-cta:hover{background:#B0241A;transform:translateY(-1px);box-shadow:0 4px 16px rgba(230,58,46,0.35);}
    .contact-divider{border-top:2px dashed rgba(255,255,255,0.2);margin:28px 0;position:relative;}
    .contact-divider::after{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:12px;height:12px;background:rgba(255,255,255,0.15);border-radius:50%;}
    .contact-phone-right{text-align:right;}
    .contact-phone-label{font-size:13px;color:rgba(255,255,255,0.95);margin-bottom:4px;}
    .contact-phone-num{font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:600;color:#fff;letter-spacing:0.02em;text-decoration:none;}

    /* ─── Footer ─── */
    .site-footer{background:#0A2440;padding:48px 64px;display:grid;grid-template-columns:220px 1fr auto;gap:64px;align-items:start;}
    .footer-logo img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:0.9;}
    .footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
    .footer-nav-group__label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.12em;color:rgba(255,255,255,0.62);margin-bottom:14px;}
    .footer-nav-group__links{display:flex;flex-direction:column;gap:8px;}
    .footer-nav-group__links a{display:inline-flex;align-items:center;min-height:28px;}
    .footer-nav-group__links a{font-size:13px;color:rgba(255,255,255,0.85);text-decoration:none;transition:color 0.2s;}
    .footer-nav-group__links a:hover{color:#fff;}
    .footer-meta__copy{font-size:12px;color:rgba(255,255,255,0.75);line-height:1.7;text-align:right;}

    .msecnav-wrap{display:none;}
    .panel-jump{display:none;}
    @media (max-width:1100px){
      .page-hero__inner{grid-template-columns:1fr;}
      .page-hero__img{display:none;}
      .page-hero__mol{display:none;}
      .product-body{grid-template-columns:1fr;}
      .sidebar{display:none;}
      main [data-section]{padding:40px 24px 32px;}
      .resins-grid,.pet-grid,.specialty-grid{grid-template-columns:1fr;}
      .product-body>main, main [data-section]{min-width:0;}
      .resins-grid>*, .pet-grid>*, .specialty-grid>*{min-width:0;}
      .spec-table{min-width:0;max-width:100%;}
      .add-cards{grid-template-columns:repeat(2,1fr);}
      .features-grid{grid-template-columns:1fr;}
      .site-footer{grid-template-columns:1fr 1fr;}
      .footer-meta{grid-column:span 2;}.footer-meta__copy{text-align:left;}

      /* ─── Mobile tab nav (sticky + scroll hint) ─── */
      .msecnav-wrap{display:block; position:sticky; top:81px; z-index:90; background:#0A2440; border-bottom:1px solid rgba(255,255,255,0.10); box-shadow:0 4px 12px rgba(10,36,64,0.12);}
      .msecnav-wrap::after{content:""; position:absolute; right:0; top:0; bottom:0; width:64px; pointer-events:none; background:linear-gradient(to left, #0A2440 30%, rgba(10,36,64,0)); transition:opacity 0.25s;}
      .msecnav-wrap.at-end::after{opacity:0;}
      .msecnav-chevron{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,0.85); pointer-events:none; z-index:2; transition:opacity 0.25s;}
      .msecnav-chevron svg{animation:chev-nudge 1.5s ease-in-out infinite;}
      .msecnav-wrap.at-end .msecnav-chevron{opacity:0;}
      @keyframes chev-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}
      .msecnav{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:12px 16px 12px 16px; scrollbar-width:none; scroll-behavior:smooth;}
      .msecnav::-webkit-scrollbar{display:none;}
      .msecnav a{flex:0 0 auto; white-space:nowrap; text-decoration:none; font-size:13.5px; font-weight:700; color:rgba(255,255,255,0.72); padding:9px 16px; border-radius:22px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); transition:background 0.2s,color 0.2s,border-color 0.2s;}
      .msecnav a.active{color:#fff; background:#1683C7; border-color:#1683C7; box-shadow:0 4px 10px rgba(22,131,199,0.35);}
      .msecnav a:last-child{margin-right:52px;}

      /* Mobile: one panel at a time (tab behaviour, matches desktop) */
      main [data-section]{scroll-margin-top:150px;}

      /* Section headings smaller on mobile */
      .sec-head{gap:14px;margin-bottom:24px;}
      .sec-head__title{font-size:26px;margin-bottom:10px;}
      .sec-head__desc{font-size:14px;line-height:1.85;}

      /* In-section prev/next quick-jump */
      .panel-jump{display:flex;gap:10px;justify-content:space-between;margin-top:40px;padding-top:24px;border-top:1px solid #EDEFF2;}
      .panel-jump a{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#F7F9FB;border:1px solid #E4E9EE;border-radius:8px;text-decoration:none;color:#0A2440;font-size:13px;font-weight:700;transition:all 0.2s;}
      .panel-jump a:hover, .panel-jump a:active{background:#EEF3F8;border-color:#1683C7;}
      .panel-jump a.next{text-align:right;}
      .panel-jump__hint{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#1272B0;letter-spacing:0.08em;}
      .panel-jump__name{font-family:'Noto Serif TC',serif;font-size:15px;color:#0A2440;line-height:1.3;}
    }
    @media (max-width:768px){
      .page-hero__text{padding:48px 24px;}
      main [data-section]{padding:40px 20px;}
      .page-hero__stats{flex-wrap:wrap;gap:24px;}
      .add-cards{grid-template-columns:1fr;}
      .consult{padding:60px 24px;}
      .consult__title{font-size:28px;}
      .contact-grid{grid-template-columns:1fr;}
      .contact-left{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);}
      .contact-right{padding:32px 24px;}
      .contact-row{flex-wrap:wrap;gap:20px;}
      .site-footer{grid-template-columns:1fr;gap:32px;padding:40px 24px;}
      .footer-nav{grid-template-columns:1fr 1fr;}
      .footer-meta{grid-column:1;}
    }
  
/* ── 獨立產品頁版面覆寫（拆分後使用） ── */
main#main [data-section]{display:block;}
.pd-hero{background:#F7F9FB;border-bottom:1px solid #EDEFF2;padding:96px 64px 40px;}
.pd-hero__inner{max-width:1180px;margin:0 auto;}
.pd-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:0.18em;color:#1272B0;margin-bottom:14px;}
.pd-h1{font-family:'Noto Serif TC',serif;font-size:clamp(32px,4vw,46px);font-weight:900;color:#0A2440;line-height:1.15;margin-bottom:18px;}
.pd-lead{font-size:16px;color:#5A6776;line-height:1.9;max-width:720px;}
.pd-wrap{max-width:1180px;margin:0 auto;padding:56px 64px 40px;}
.pd-related{max-width:1180px;margin:0 auto;padding:8px 64px 72px;}
.pd-related__title{font-family:'Noto Serif TC',serif;font-size:20px;font-weight:800;color:#0A2440;margin-bottom:18px;}
.pd-related__links{display:flex;flex-wrap:wrap;gap:12px;}
.pd-related__links a{font-size:14px;color:#1272B0;font-weight:600;text-decoration:none;border:1px solid #D9E4EF;border-radius:24px;padding:9px 18px;transition:all .2s;}
.pd-related__links a:hover{background:#1683C7;color:#fff;border-color:#1683C7;}
.pd-cta{background:#0A2440;color:#fff;text-align:center;padding:56px 24px;}
.pd-cta__title{font-family:'Noto Serif TC',serif;font-size:26px;font-weight:800;margin-bottom:12px;}
.pd-cta__sub{color:rgba(255,255,255,.8);line-height:1.85;margin-bottom:24px;}
.pd-cta__btn{display:inline-block;background:#1272B0;color:#fff;padding:13px 30px;border-radius:5px;font-weight:700;text-decoration:none;transition:background .2s;}
.pd-cta__btn:hover{background:#1F95DB;}
.pd-back{display:inline-flex;align-items:center;min-height:24px;margin:32px 0 8px;color:#5A6776;font-size:14px;text-decoration:none;}
.pd-back:hover{color:#1683C7;}
@media(max-width:900px){
  .pd-hero{padding:80px 20px 32px;} .pd-wrap{padding:36px 20px;} .pd-related,.pd-cta{padding-left:20px;padding-right:20px;}
  .resins-grid,.pet-grid,.specialty-grid{grid-template-columns:1fr!important;gap:28px!important;}
  .features-grid,.add-cards{grid-template-columns:1fr 1fr!important;}
}

/* ── 產品頁 SEO 內文區塊 ── */
.pd-content{border-top:1px solid #EDEFF2;}
.pd-content h2{font-family:'Noto Serif TC',serif;font-size:26px;font-weight:800;color:#0A2440;line-height:1.35;margin:44px 0 16px;}
.pd-content h2:first-child{margin-top:8px;}
.pd-content h3{font-family:'Noto Serif TC',serif;font-size:18px;font-weight:700;color:#0A2440;margin:26px 0 10px;}
.pd-content p{font-size:15.5px;color:#41505F;line-height:1.95;margin-bottom:16px;}
.pd-content ul,.pd-content ol{margin:0 0 18px 22px;}
.pd-content li{font-size:15.5px;color:#41505F;line-height:1.9;margin-bottom:8px;}
.pd-content strong{color:#0A2440;}
.pd-content a{color:#1272B0;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(22,131,199,.35);}
.pd-content a:hover{border-bottom-color:#1683C7;}
.pd-faq{margin-top:8px;}
.pd-faq__q{font-family:'Noto Serif TC',serif;font-size:17px;font-weight:700;color:#0A2440;margin:22px 0 8px;}
.pd-callout{background:#F2F8FC;border-left:3px solid #1683C7;border-radius:0 8px 8px 0;padding:20px 24px;margin:24px 0;}
.pd-callout p{margin:0;font-size:14.5px;color:#41505F;}


/* ═══════════════════════════════════════════════════════════════
   苯氧樹脂產品頁 · 選型導引版面（ph- 命名空間）
   版面策略：一律以 auto-fit 網格自適應，不倚賴固定斷點；
   規格表在寬度不足時整表轉為卡片，因此任何裝置都不會出現橫向捲動。
   ═══════════════════════════════════════════════════════════════ */

/* ── 螢幕閱讀器專用文字 ── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ── 頁內錨點導覽（吸附於站台 header 下方，--hdr 由 JS 量測寫入） ── */
.ph-anchors{padding:0;position:sticky;top:var(--hdr,110px);z-index:80;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #E4E9EE;}
.ph-anchors__wrap{position:relative;max-width:1180px;margin:0 auto;}
.ph-anchors__inner{display:flex;gap:6px;overflow-x:auto;padding:10px 64px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.ph-anchors__inner::-webkit-scrollbar{display:none;}
.ph-anchors a{flex:0 0 auto;white-space:nowrap;font-size:13px;font-weight:600;color:#5A6776;display:flex;align-items:center;
  min-height:40px;line-height:1.2;text-decoration:none;padding:0 15px;border-radius:20px;transition:background .2s,color .2s;}
.ph-anchors a:hover{background:#EEF3F8;color:#0A2440;}
.ph-anchors a.active{background:#0A2440;color:#fff;}
/* 右側漸層提示：只有真的可捲動、且尚未捲到底時才顯示（class 由 JS 掛上） */
.ph-anchors__fade{position:absolute;right:0;top:0;bottom:0;width:64px;pointer-events:none;opacity:0;
  transition:opacity .25s;background:linear-gradient(to left,#fff 38%,rgba(255,255,255,0));
  display:flex;align-items:center;justify-content:flex-end;padding-right:10px;}
.ph-anchors__fade::after{content:"\203A";font-family:system-ui,sans-serif;font-size:22px;line-height:1;
  color:#1272B0;font-weight:700;animation:ph-nudge 1.6s ease-in-out infinite;}
@keyframes ph-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
@media (prefers-reduced-motion:reduce){.ph-anchors__fade::after{animation:none;}}
.ph-anchors.is-scrollable .ph-anchors__fade{opacity:1;}
.ph-anchors.at-end .ph-anchors__fade{opacity:0;}

/* ── 區塊骨架 ── */
.ph-sec{scroll-margin-top:calc(var(--hdr,110px) + 62px);padding:64px 0 8px;}
.ph-sec--first{padding-top:48px;}
.ph-sec__head{display:flex;align-items:flex-start;gap:20px;margin-bottom:28px;}
.ph-sec__num{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#1272B0;padding-top:9px;flex:0 0 auto;}
.ph-sec__en{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.18em;color:#1272B0;margin-bottom:8px;}
.ph-sec__title{font-family:'Noto Serif TC',serif;font-size:clamp(23px,2.4vw,30px);font-weight:900;color:#0A2440;line-height:1.25;margin-bottom:12px;}
.ph-sec__desc{font-size:15px;color:#5A6776;line-height:1.9;max-width:680px;}
.ph-sec__desc strong{color:#0A2440;}

/* ── 兩大陣線選型入口 ── */
.ph-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:8px;}
.ph-track{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid #E4E9EE;
  border-radius:12px;padding:26px 28px 24px;transition:border-color .22s,box-shadow .22s,transform .22s;}
.ph-track:hover{border-color:#1683C7;box-shadow:0 14px 34px rgba(10,36,64,.09);transform:translateY(-3px);}
.ph-track__tag{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  color:#1272B0;background:#EEF3F8;border-radius:3px;padding:4px 9px;margin-bottom:14px;}
.ph-track--fn .ph-track__tag{color:#0C6A5C;background:rgba(20,160,140,.12);}
.ph-track__title{font-family:'Noto Serif TC',serif;font-size:21px;font-weight:700;color:#0A2440;line-height:1.4;margin-bottom:10px;}
.ph-track__desc{font-size:14px;color:#5A6776;line-height:1.85;margin-bottom:16px;flex:1;}
.ph-track__meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;border-top:1px solid #EDEFF2;padding-top:14px;}
.ph-track__stat{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5A6776;}
.ph-track__stat b{font-size:17px;font-weight:600;color:#0A2440;margin-right:5px;}
.ph-track__go{margin-left:auto;font-size:13px;font-weight:700;color:#1272B0;}

/* ── 響應式資料表（寬版：真表格） ── */
.rt{border:1px solid #E4E9EE;border-radius:10px;overflow:hidden;background:#fff;}
.rt table{width:100%;border-collapse:collapse;font-size:13.5px;}
.rt th{text-align:left;padding:13px 16px;background:#0A2440;color:#fff;font-weight:700;font-size:12.5px;
  line-height:1.4;white-space:nowrap;vertical-align:bottom;}
.rt th.is-model{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.72);font-weight:600;}
.rt th sup{font-size:9px;}
.rt td{padding:13px 16px;color:#0A2440;border-top:1px solid #EDEFF2;vertical-align:top;line-height:1.6;}
.rt tbody tr:nth-child(even){background:#FAFCFD;}
.rt tbody tr:hover{background:#F2F8FC;}
.rt .c-model{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#0A2440;white-space:nowrap;}
.rt .c-num{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#41505F;white-space:nowrap;}
.rt .c-note{font-size:12.5px;color:#5A6776;min-width:170px;}
.rt .c-app{font-size:12.5px;color:#5A6776;min-width:145px;}
.rt .c-grades{min-width:230px;}
.rt-k{display:none;}
.rt__note{font-size:12.5px;color:#5A6776;line-height:1.85;margin-top:12px;max-width:900px;}

/* 分子量階梯條 */
.mwbar{display:block;height:3px;border-radius:2px;background:#E4E9EE;margin-top:6px;max-width:110px;overflow:hidden;}
.mwbar i{display:block;height:100%;width:var(--w,50%);background:linear-gradient(90deg,#7FC0E8,#1683C7);border-radius:2px;}

/* ── 功能型新品卡片 ── */
.fn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;}
.fn-card{background:#fff;border:1px solid #E4E9EE;border-radius:12px;padding:22px 22px 18px;
  display:flex;flex-direction:column;transition:border-color .22s,box-shadow .22s,transform .22s;}
.fn-card:hover{border-color:#C7D9EA;box-shadow:0 12px 30px rgba(10,36,64,.07);transform:translateY(-2px);}
.fn-card__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.fn-card__model{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;color:#0A2440;}
.fn-card__desc{font-size:13.5px;color:#5A6776;line-height:1.8;margin-bottom:14px;}
.fn-card__kpi{background:#F4F8FB;border-radius:8px;padding:11px 14px;margin-bottom:12px;}
.fn-card__kpi-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:#5A6776;margin-bottom:4px;}
.fn-card__kpi-val{font-size:13.5px;font-weight:700;color:#0A2440;line-height:1.6;}
.fn-card__props{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:8px 14px;
  border-top:1px solid #EDEFF2;padding-top:12px;}
.fn-prop{min-width:0;}
.fn-prop__k{font-size:11px;color:#5A6776;letter-spacing:.04em;margin-bottom:2px;}
.fn-prop__v{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#41505F;word-break:break-word;}

/* 功能類別色標（色彩語意沿用產品型錄；文字對比度皆 ≥ 4.5:1） */
.fchip{display:inline-block;font-size:11.5px;font-weight:700;line-height:1;padding:6px 11px;border-radius:20px;white-space:nowrap;}
.fchip--color{color:#8A5A0F;background:#FBF2E3;}
.fchip--epoxy{color:#A63523;background:#FBECE9;}
.fchip--halogen{color:#186B4C;background:#E6F4EE;}
.fchip--heat{color:#54399A;background:#F0EBFA;}
.fchip--bpf{color:#12659B;background:#E7F1F9;}
.fchip--dk{color:#0C7A6A;background:#E3F5F1;}
.fchip--water{color:#0B5A64;background:#E2F0F2;}
.ph-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;}

/* ── 水性乳液 ── */
.wb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.wb-card{background:#F7F9FB;border:1px solid #E4E9EE;border-radius:12px;padding:20px 22px;}
.wb-card__model{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;color:#0A2440;margin-bottom:10px;}
.wb-card__row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:7px 0;border-top:1px solid #E7EDF2;}
.wb-card__row:first-of-type{border-top:none;}
.wb-card__k{color:#5A6776;flex:0 0 auto;}
.wb-card__v{color:#0A2440;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:12px;}

/* ── 應用 × 型號 對照 ── */
.gchip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#0A2440;
  background:#EEF3F8;border-radius:4px;padding:4px 9px;margin:0 5px 5px 0;white-space:nowrap;}
.gchip--alt{background:#E3F5F1;color:#0C6A5C;}

/* ── 供應形態 ── */
.ph-forms{display:flex;flex-wrap:wrap;gap:32px;align-items:center;
  background:#F7F9FB;border:1px solid #E4E9EE;border-radius:12px;padding:26px 30px;}
.ph-forms__pics{flex:0 1 300px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ph-forms__body{flex:1 1 320px;min-width:0;}
.ph-forms__pic{background:#fff;border:1px solid #E7EDF2;border-radius:10px;overflow:hidden;text-align:center;padding:10px 10px 0;margin:0;}
.ph-forms__pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;}
.ph-forms__cap{font-size:11.5px;color:#5A6776;padding:6px 0 9px;}
.ph-forms__list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.ph-forms__item{font-size:12.5px;color:#0A2440;background:#fff;border:1px solid #E4E9EE;border-radius:20px;padding:7px 14px;}
.ph-forms__text{font-size:14px;color:#5A6776;line-height:1.9;}
.ph-forms__text strong{color:#0A2440;}

/* ── 頁內詢價提示條 ── */
.ph-ask{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#0A2440;border-radius:12px;padding:24px 30px;margin-top:36px;}
.ph-ask__t{font-family:'Noto Serif TC',serif;font-size:19px;font-weight:800;color:#fff;margin-bottom:6px;}
.ph-ask__s{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.8;}
.ph-ask__btn{flex:0 0 auto;background:#1272B0;color:#fff;font-size:14px;font-weight:700;text-decoration:none;
  padding:12px 26px;border-radius:5px;transition:background .2s;}
.ph-ask__btn:hover{background:#1F95DB;}

/* ═══ 窄版：規格表整表轉卡片（避免任何裝置出現橫向捲動） ═══
   1100px 是本站既有斷點；在此之下 .pd-wrap 內寬已不足以完整容納 8 欄表格。 */
@media (max-width:1100px){
  .ph-anchors__inner{padding:8px 20px;}
  .ph-sec{padding:48px 0 4px;}
  .ph-sec--first{padding-top:32px;}
  .ph-sec__head{gap:14px;margin-bottom:22px;}
  /* 900–1100：收緊文字欄寬，讓真表格撐住不橫捲 */
  .rt .c-note{min-width:132px;font-size:12px;}
  .rt .c-app{min-width:118px;font-size:12px;}
  .rt .c-grades{min-width:200px;}
  .rt th,.rt td{padding:11px 12px;}
  .rt th{font-size:11.5px;}
  .rt .c-num{font-size:12px;}
}
@media (max-width:900px){
  .rt{border:none;border-radius:0;background:transparent;overflow:visible;}
  .rt table,.rt tbody,.rt tr,.rt td{display:block;width:100%;}
  .rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .rt tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
  .rt tbody tr{background:#fff;border:1px solid #E4E9EE;border-radius:12px;padding:16px 18px 14px;margin:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px 16px;align-content:start;}
  .rt tbody tr:nth-child(even),.rt tbody tr:hover{background:#fff;}
  .rt td{padding:0;border-top:none;min-width:0!important;}
  .rt td.c-model{grid-column:1/-1;font-size:15px;padding-bottom:10px;border-bottom:1px solid #EDEFF2;}
  .rt td.c-note,.rt td.c-app,.rt td.c-grades{grid-column:1/-1;}
  .rt-k{display:block;font-size:11px;letter-spacing:.05em;color:#5A6776;margin-bottom:3px;line-height:1.4;}
  .rt td.c-model .rt-k{display:none;}
  .mwbar{max-width:none;}
}
@media (max-width:820px){
  .ph-ask{padding:22px 20px;}
  .ph-forms{padding:20px;gap:22px;}
}
@media (max-width:339px){
  .rt tbody tr{grid-template-columns:1fr;}
  .fn-card__props{grid-template-columns:1fr;}
  .ph-forms__pics{grid-template-columns:1fr;}
}

/* ═══ 依 UI/UX 與訪客評審追加（第二輪） ═══ */

/* ── 三條選型路徑：改為全寬區塊 ── */
.ph-tracks-label{margin-top:44px;}
.ph-tracks-note{font-size:12.5px;color:#5A6776;line-height:1.8;margin-top:12px;}
.ph-track--wb .ph-track__tag{color:#0B5A64;background:#E2F0F2;}

/* ── 型號層級 CTA：意圖峰值就在型號旁邊，不要逼使用者捲到頁尾 ── */
.rt-cta{display:flex;width:fit-content;align-items:center;min-height:24px;margin-top:6px;font-family:'Noto Sans TC',sans-serif;font-size:11.5px;font-weight:700;
  color:#1272B0;text-decoration:none;white-space:nowrap;opacity:0;transition:opacity .2s,color .2s;}
.rt tbody tr:hover .rt-cta,.rt-cta:focus-visible{opacity:1;}
.rt-cta:hover{color:#0A2440;text-decoration:underline;}
.fn-card__cta{margin-top:14px;padding-top:12px;border-top:1px solid #EDEFF2;font-size:12.5px;font-weight:700;
  color:#1272B0;text-decoration:none;transition:color .2s;}
.fn-card__cta:hover{color:#0A2440;text-decoration:underline;}
/* 觸控裝置沒有 hover，CTA 一律顯示 */
@media (hover:none){ .rt-cta{opacity:1;} }

/* 應用對照表的型號膠囊：真的可以點，跳到該型號 */
a.gchip{text-decoration:none;transition:background .18s,color .18s;}
a.gchip:hover{background:#1683C7;color:#fff;}
a.gchip--alt:hover{background:#0C6A5C;color:#fff;}
/* 跳轉後短暫高亮目標，讓使用者知道自己落在哪一列／哪一張卡 */
@keyframes ph-flash{0%{background:#FFF6DC;}100%{background:transparent;}}
.rt tbody tr:target,.rt td:target,.rt tbody tr.is-flash{animation:ph-flash 2.2s ease-out;}
.fn-card:target,.fn-card.is-flash,.wb-card:target,.wb-card.is-flash{border-color:#1683C7;box-shadow:0 0 0 3px rgba(22,131,199,.18);}

/* ── 功能類別篩選（取代原本看似可點卻不能點的色標列）── */
.ph-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px;}
.ph-filter__label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:#5A6776;margin-right:4px;}
.ph-filter__btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:20px;
  border:1px solid #D9E4EF;background:#fff;color:#41505F;font-family:'Noto Sans TC',sans-serif;font-size:12.5px;
  font-weight:500;cursor:pointer;transition:border-color .18s,background .18s,color .18s;}
.ph-filter__btn i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#5A6776;}
.ph-filter__btn:hover{border-color:#1683C7;color:#0A2440;}
.ph-filter__btn.is-on{background:#0A2440;border-color:#0A2440;color:#fff;}
.ph-filter__btn:focus-visible{outline-offset:3px;}
.ph-filter__btn.is-on i{color:rgba(255,255,255,.7);}
.ph-filter__btn[hidden]{display:none;}
.ph-filter__status{font-size:12.5px;color:#5A6776;margin:0 0 16px;min-height:1.2em;}
.fn-card[hidden]{display:none;}

/* ── I4：長文區塊納入設計語言，並收斂行長 ── */
.pd-content{border-top:1px solid #EDEFF2;}
.pd-content .ph-sec__head{margin-bottom:20px;}
.pd-content h2{max-width:760px;}
.pd-content p,.pd-content li{max-width:760px;}
.pd-content .pd-callout{max-width:760px;}
.pd-faq__q{font-family:'Noto Serif TC',serif;font-size:17px;font-weight:700;color:#0A2440;margin:22px 0 8px;max-width:760px;}
.pd-content h2[id]{scroll-margin-top:calc(var(--hdr,110px) + 62px);}

/* ── 供應形態：把圖放大到看得清楚材料外觀 ── */
.ph-forms__pics{flex:0 1 380px;}
.ph-forms__pic{padding:14px 14px 0;}

/* ── fn-card：描述長度不一時，KEY SPEC 帶仍能橫向對齊 ── */
.fn-card__desc{min-height:3.6em;}

/* ── 觸控目標 ── */
.tag{min-height:34px;display:inline-flex;align-items:center;}
.tags-list__label{align-self:center;}
.dl-btn{min-height:40px;}
.dl-btn--ask{border-color:#1683C7;color:#1272B0;}
.dl-btn--ask:hover{background:#1683C7;color:#fff;border-color:#1683C7;}

@media (max-width:900px){
  .ph-tracks-label{margin-top:32px;}
  .rt-cta{opacity:1;margin-top:8px;font-size:12.5px;}
  /* I7：卡片固定兩欄，分子量升為卡片主視覺，階梯敘事在窄螢幕也保得住 */
  .rt tbody tr{grid-template-columns:1fr 1fr;}
  .rt td.c-mw{grid-column:1/-1;}
  .rt td.c-mw .rt-v,.rt td.c-mw .mw{font-size:15px;font-weight:600;}
  .rt .mwbar{max-width:none;height:4px;}
}
@media (max-width:820px){
  .ph-filter__label{width:100%;margin-bottom:2px;}
}
@media (max-width:339px){
  .rt tbody tr{grid-template-columns:1fr;}
}


/* 概觀區：移除與 hero 重複的顆粒圖後，核心特性改為全寬兩欄 */
.ph-overview .features-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:20px;}
.ph-forms-row{max-width:520px;margin-bottom:24px;}

/* 卡片：KEY SPEC 帶在同一列內橫向對齊（描述給固定高度，CTA 推到底部） */
.fn-card__cta{margin-top:auto;}
.fn-card__props{margin-bottom:0;}
/* 避免中文孤字與尾行單字 */
.rt .c-note,.rt .c-app,.rt .c-grades,.ph-sec__desc,.fn-card__desc,.ph-track__desc,
.pd-content p,.pd-content li,.rt__note,.ph-forms__text{text-wrap:pretty;}
.rt .c-form{white-space:nowrap;}

/* ═══ 第三輪：依評審做「整類」而非「單點」修正 ═══ */

/* ⚠️ 深連結落點：不能只靠 JS 攔 click，直接開 hash URL 也要正確 */
[id^="grade-"],[id^="h-"],#selection,#faq-section,.ph-sec[id],.pd-content h2[id]{scroll-margin-top:calc(var(--hdr,110px) + 72px);}

/* ⚠️ 逐型號 CTA 不再 hover-only——藏起來的轉換動線等於沒有 */
.rt-cta{opacity:1;color:#1272B0;}
.rt tbody tr:hover .rt-cta{color:#0A2440;}

/* ⚡ 觸控目標 */
@media (max-width:900px){
  .rt-cta{min-height:28px;display:flex;width:fit-content;align-items:center;margin-top:8px;}
  a.gchip{min-height:32px;display:inline-flex;align-items:center;margin:0 6px 6px 0;}
  .fn-card__cta{min-height:36px;display:flex;align-items:center;}
}

/* 💡 核心特性固定兩欄，避免四個項目排成三欄留孤兒 */
.ph-overview .features-grid{grid-template-columns:repeat(2,1fr);}
@media (max-width:620px){ .ph-overview .features-grid{grid-template-columns:1fr;} }

/* 供應形態：三種形態各一張實照，尺寸放大到看得出材料差異 */
.ph-forms__pics{flex:1 1 420px;grid-template-columns:repeat(3,1fr);}
.ph-forms__body{flex:1 1 380px;}
@media (max-width:520px){ .ph-forms__pics{grid-template-columns:1fr;} }

/* 水性乳液卡：補上轉換出口 */
.wb-card__cta{display:inline-flex;align-items:center;min-height:32px;margin-top:12px;padding-top:10px;
  border-top:1px solid #E7EDF2;font-size:12.5px;font-weight:700;color:#1272B0;text-decoration:none;width:100%;}
.wb-card__cta:hover{color:#0A2440;text-decoration:underline;}

/* 觸控目標：窄螢幕下所有內文連結至少 24px 可點高度 */
@media (max-width:900px){
  main a:not(.tag):not(.fchip):not(.rt-cta):not(.fn-card__cta):not(.wb-card__cta){min-height:24px;}
  .pd-back{min-height:32px;display:inline-flex;align-items:center;}
  .pd-related__links a{min-height:36px;display:inline-flex;align-items:center;}
}

.rt-cta--row{margin-top:10px;padding-top:8px;border-top:1px solid #EDEFF2;width:100%;}

/* FAQ 自成一個 section，接在選型邏輯之後不要再畫一條分隔線 */
.pd-content--faq{border-top:none;padding-top:8px;}

/* 主要轉換按鈕與語言鍵在行動裝置放大到 40px，接近 44px 慣例（WCAG 2.5.8 底線是 24px） */
@media (max-width:900px){
  /* 特異性要壓過上面的 main a:not(.tag):not(.fchip){min-height:24px} */
  main a.rt-cta{min-height:40px;}
  main a.fn-card__cta,main a.wb-card__cta{min-height:40px;}
}


@media (max-width:900px){
  .breadcrumb{flex-wrap:wrap;}
  .breadcrumb a,.breadcrumb .current{display:inline-flex;align-items:center;min-height:28px;}
}

/* 展開鈕只在窄版有意義：桌機是完整表格，按鈕不該出現也不該進 Tab 序 */
.rt-more,.fn-more{display:none;}

/* ═══════════════════════════════════════════════════════════════
   手機版：規格卡「摘要 + 展開」
   掃描型號時只需要 型號／分子量／Tg／定位，其餘欄位收起來。
   桌機（>1100px）維持完整表格，不受影響。
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  /* 卡片本身壓縮一點 */
  .rt tbody{gap:10px;}
  .rt tbody tr{padding:14px 16px 12px;gap:10px 16px;}

  /* 型號列：CTA 不再獨佔一行，改和展開鈕同一列（見 .rt-more） */
  .rt td.c-model{padding-bottom:8px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  main a.rt-cta{margin-top:0;font-size:12.5px;}

  /* 收合狀態：只留摘要四項 */
  .rt tbody tr.is-collapsed td.c-form,
  .rt tbody tr.is-collapsed td.c-visc,
  .rt tbody tr.is-collapsed td.c-soft,
  .rt tbody tr.is-collapsed td.c-app{display:none;}

  /* 摘要裡分子量是主角，占滿一行 */
  .rt tbody tr.is-collapsed td.c-mw{grid-column:1/-1;}

  /* 展開／收合按鈕 */
  .rt-more{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-height:36px;margin-top:2px;
    padding:0;border:none;border-top:1px solid #EDEFF2;background:none;width:100%;
    font-family:'Noto Sans TC',sans-serif;font-size:12.5px;font-weight:600;color:#5A6776;cursor:pointer;}
  .rt-more:hover{color:#0A2440;}
  .rt-more::before{content:"";width:0;height:0;border-left:5px solid currentColor;
    border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s;}
  .rt-more[aria-expanded="true"]::before{transform:rotate(90deg);}

  /* 功能卡：物性表收起來，型號／類別／KEY SPEC／說明留著 */
  .fn-card.is-collapsed .fn-card__props{display:none;}
  .fn-card__desc{min-height:0;}
  .fn-more{display:flex;align-items:center;gap:6px;min-height:36px;margin-top:10px;padding:0;
    border:none;border-top:1px solid #EDEFF2;background:none;width:100%;
    font-family:'Noto Sans TC',sans-serif;font-size:12.5px;font-weight:600;color:#5A6776;cursor:pointer;}
  .fn-more:hover{color:#0A2440;}
  .fn-more::before{content:"";width:0;height:0;border-left:5px solid currentColor;
    border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s;}
  .fn-more[aria-expanded="true"]::before{transform:rotate(90deg);}

  /* 概觀區瘦身：裝飾用的 hero 圖不需要 280px */
  #overview > div:first-of-type img{height:180px!important;}
  .ph-tracks{gap:12px;}
  .ph-track{padding:18px 18px 16px;}
  .ph-track__title{font-size:18px;margin-bottom:8px;}
  .ph-track__desc{font-size:13.5px;margin-bottom:12px;}
  .ph-track__meta{padding-top:11px;}
}

/* 供應形態：三張圖橫排就足以看出材料差異，直排太佔空間 */
@media (max-width:520px){
  .ph-forms__pics{grid-template-columns:repeat(3,1fr);gap:8px;}
  .ph-forms__pic{padding:8px 6px 0;}
  .ph-forms__cap{font-size:10.5px;padding:5px 0 7px;line-height:1.4;}
}
@media (max-width:339px){
  .ph-forms__pics{grid-template-columns:repeat(3,1fr);}
}

/* hero 帶狀圖：桌機 280px，手機縮到 170px（純裝飾，不該吃掉四分之一螢幕） */
.ph-hero-img{width:100%;height:280px;object-fit:cover;display:block;}
@media (max-width:1100px){ .ph-hero-img{height:170px;} }

/* ═══════════════════════════════════════════════════════════════
   功能型新品：改用與標準系列相同的表格樣式
   欄位沿用型錄第 2 頁：型號／功能類別／關鍵差異／量化指標／Mw／MI／旋轉黏度／Tg
   ═══════════════════════════════════════════════════════════════ */
#fn-table .c-cat{white-space:nowrap;}
#fn-table .c-diff{font-size:12.5px;color:#5A6776;min-width:190px;}
#fn-table .c-kpi{font-size:12.5px;font-weight:700;color:#0A2440;min-width:140px;}
#fn-table .c-mw2{min-width:118px;}
#fn-table .c-mi,#fn-table .c-rv{min-width:64px;}
/* 篩選隱藏：.rt 的 display 會蓋掉 hidden 屬性預設的 display:none，要明確宣告 */
#fn-table tbody tr[hidden]{display:none!important;}

@media (max-width:1100px){
  /* 窄版沿用卡片形態，版面順序與原本的功能卡一致：
     型號＋CTA → 類別標籤 → 關鍵差異 → 量化指標（框起來）→ 展開後才是四項物性 */
  #fn-table td.c-cat,
  #fn-table td.c-diff,
  #fn-table td.c-kpi{grid-column:1/-1;}
  #fn-table td.c-cat{margin-top:-4px;}
  #fn-table td.c-cat .rt-k,
  #fn-table td.c-diff .rt-k{display:none;}
  #fn-table td.c-diff{font-size:13.5px;line-height:1.8;}
  #fn-table td.c-kpi{background:#F4F8FB;border-radius:8px;padding:10px 13px;font-size:13.5px;}
  #fn-table td.c-kpi .rt-k{margin-bottom:2px;}
  /* 收合時只留摘要四項 */
  #fn-table tbody tr.is-collapsed td.c-mw2,
  #fn-table tbody tr.is-collapsed td.c-mi,
  #fn-table tbody tr.is-collapsed td.c-rv,
  #fn-table tbody tr.is-collapsed td.c-tg{display:none;}
  /* 展開鈕在量化指標格內，不要被框底色包住 */
  #fn-table td.c-kpi .rt-more{margin-top:10px;border-top-color:#DCE6EE;}
}

/* ═══════════════════════════════════════════════════════════════
   手機版版面（≤1100px）— 依 Claude Design「Phenoxy Mobile v2」
   窄螢幕的頁面結構：01 什麼是苯氧樹脂？／02 型號目錄／03 其他選型資訊。
   標準、水性、功能三個規格區合併成分頁清單 + 底部詳情面板；
   應用對照、供應形態、選型邏輯、FAQ 收成手風琴。
   桌機完全不受影響：元件本體用 display:none 關掉，開關規則全部
   包在 media query 內；而且原本的區塊只有在 JS 成功建出手機版
   （html.ph-m-on）之後才隱藏——沒有 JS 時維持既有的桌機版面。
   數值直接取自設計稿，不另外調整。
   ═══════════════════════════════════════════════════════════════ */
.ph-m,.ph-m-01,.ph-m-more,.ph-acc__sum{display:none;}

/* ── 區塊標題（01 / 02 / 03 共用） ── */
.ph-m__head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.ph-m__num{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#1272B0;flex:0 0 auto;}
.ph-m__title{font-family:'Noto Serif TC',serif;font-size:22px;font-weight:900;color:#0A2440;line-height:1.3;margin:0;}
.ph-m__desc{font-size:14.5px;color:#5A6776;line-height:1.75;margin:0 0 16px;}

/* ── 01 什麼是苯氧樹脂？ ── */
.ph-m-01{padding:34px 0 8px;}
.ph-m-01 .ph-m__head{margin-bottom:16px;}
.ph-m01__img{width:100%;height:120px;object-fit:cover;border-radius:10px;display:block;margin-bottom:18px;}
.ph-m01__lead{font-size:16px;color:#5A6776;line-height:1.9;margin:0 0 22px;text-wrap:pretty;}
.ph-m01__lead strong{color:#0A2440;}
.ph-m01__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;}
.ph-m01__feat{border-left:3px solid #1683C7;padding:3px 0 3px 14px;}
.ph-m01__feat .feature__title{font-weight:700;color:#0A2440;font-size:15px;line-height:1.5;}
.ph-m01__feat .feature__desc{font-size:13.5px;color:#5A6776;margin-top:3px;line-height:1.65;}
.ph-m01__cta{display:flex;gap:8px;margin-top:22px;}
.ph-m01__cta a{flex:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  gap:6px;font-size:14px;border-radius:6px;min-height:48px;padding:0 8px;line-height:1.3;text-decoration:none;}
.ph-m01__cta a.is-ghost{font-weight:600;color:#0A2440;border:1.5px solid #D9E4EF;}
.ph-m01__cta a.is-solid{font-weight:700;color:#fff;background:#1272B0;}
.ph-m01__cta a.is-ghost:hover{border-color:#1683C7;color:#1272B0;}
.ph-m01__cta a.is-solid:hover{background:#0A2440;color:#fff;}

/* ── 02 型號目錄 ── */
.ph-m{padding:34px 0 8px;}
.ph-m .ph-m__head{margin-bottom:8px;}
.ph-m__pad{padding:0 20px;}
.ph-m__pad+.ph-m__pad{padding-top:12px;}
.ph-m__tabs{position:sticky;z-index:70;background:#fff;border-bottom:1px solid #E4E9EE;
  padding:10px 20px;display:flex;gap:6px;}
.ph-m__tab{flex:1;min-height:42px;padding:0 4px;border-radius:21px;border:1px solid #D9E4EF;
  background:#fff;color:#41505F;font-family:'Noto Sans TC',sans-serif;font-size:13.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background .18s,color .18s,border-color .18s;}
.ph-m__tab[aria-pressed="true"]{background:#0A2440;border-color:#0A2440;color:#fff;}
.ph-m__tab i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12.5px;opacity:.75;margin-left:5px;}
@media (prefers-reduced-motion:reduce){.ph-m__tab{transition:none;}}
@media (max-width:400px){.ph-m__tab{font-size:12.5px;}.ph-m__tab i{font-size:11.5px;margin-left:4px;}}

.ph-m__list{margin:0;padding:0;}
.ph-m__row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;
  border:none;border-bottom:1px solid #EDEFF2;padding:15px 20px;cursor:pointer;
  font-family:'Noto Sans TC',sans-serif;color:inherit;}
.ph-m__row:hover{background:#F7F9FB;}
.ph-m__rowin{display:flex;align-items:center;gap:12px;width:100%;}
.ph-m__bar{flex:0 0 auto;width:3px;align-self:stretch;border-radius:2px;background:#1683C7;}
.ph-m__rowbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.ph-m__top{display:flex;align-items:center;gap:8px;min-width:0;}
.ph-m__model{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;color:#0A2440;white-space:nowrap;}
.ph-m__chip{font-size:11px;font-weight:700;line-height:1;padding:5px 9px;border-radius:12px;white-space:nowrap;}
.ph-m__pos{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#41505F;
  line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ph-m__go{flex:0 0 auto;font-size:22px;color:#5A6776;line-height:1;}
.ph-m__note{font-size:13px;color:#5A6776;line-height:1.8;margin:0;text-wrap:pretty;}
.ph-m__note+.ph-m__note{margin-top:8px;}

/* 系列色票：沿用桌機表格的功能標籤色 */
.ph-m__row--wb .ph-m__bar{background:#14A08C;}
.ph-m__row--fn .ph-m__bar{background:#8571C4;}
.ph-m__chip--std{color:#12659B;background:#E7F1F9;}
.ph-m__chip--wb{color:#0B5A64;background:#E2F0F2;}

/* ── 底部詳情面板 ── */
.ph-sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;}
.ph-sheet[hidden]{display:none;}
.ph-sheet__veil{position:absolute;inset:0;background:rgba(10,36,64,.55);animation:ph-fade .18s ease both;}
.ph-sheet__panel{position:relative;width:100%;max-width:560px;max-height:82vh;overflow-y:auto;background:#fff;
  border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(10,36,64,.28);
  animation:ph-sheet-up .24s cubic-bezier(.16,1,.3,1) both;}
@keyframes ph-fade{from{opacity:0;}to{opacity:1;}}
@keyframes ph-sheet-up{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.ph-sheet__veil,.ph-sheet__panel{animation:none;}}
.ph-sheet__head{position:sticky;top:0;background:#fff;padding:10px 20px 12px;border-bottom:1px solid #EDEFF2;}
.ph-sheet__grip{width:40px;height:4px;border-radius:2px;background:#D9E4EF;margin:0 auto 12px;}
.ph-sheet__headin{display:flex;align-items:flex-start;gap:10px;}
.ph-sheet__id{flex:1;min-width:0;}
.ph-sheet__idtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ph-sheet__model{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;color:#0A2440;}
.ph-sheet__pos{font-size:13.5px;color:#5A6776;line-height:1.7;margin-top:5px;text-wrap:pretty;}
.ph-sheet__x{flex:0 0 auto;width:36px;height:36px;border:none;background:#F4F7FA;border-radius:18px;
  color:#5A6776;font-size:18px;line-height:1;cursor:pointer;}
.ph-sheet__x:hover{background:#E7EDF2;color:#0A2440;}
.ph-sheet__body{padding:16px 20px 20px;}
.ph-sheet__mw{background:#F7F9FB;border:1px solid #E4E9EE;border-radius:10px;padding:14px 16px;margin-bottom:14px;}
.ph-sheet__mwtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.ph-sheet__mwk{font-size:12.5px;color:#5A6776;letter-spacing:.05em;}
.ph-sheet__mwv{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;color:#0A2440;}
.ph-sheet__track{display:block;height:5px;border-radius:3px;background:#E4E9EE;margin-top:8px;overflow:hidden;}
.ph-sheet__track i{display:block;height:100%;background:linear-gradient(90deg,#7FC0E8,#1683C7);border-radius:3px;}
.ph-sheet__scale{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:#5A6776;margin-top:5px;}
.ph-sheet__kpi{background:#F4F8FB;border-radius:10px;padding:12px 16px;margin-bottom:14px;}
.ph-sheet__kpik{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;color:#5A6776;margin-bottom:4px;}
.ph-sheet__kpiv{font-size:15px;font-weight:700;color:#0A2440;line-height:1.6;}
.ph-sheet__specs{border:1px solid #E4E9EE;border-radius:10px;overflow:hidden;margin-bottom:14px;}
.ph-sheet__spec{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 16px;
  border-top:1px solid #EDEFF2;}
.ph-sheet__spec:first-child{border-top:none;}
.ph-sheet__speck{font-size:13.5px;color:#5A6776;flex:0 0 auto;}
/* 欄位標籤的腳註上標（MI¹、旋轉黏度²）在手機版沒有對應的腳註。
   建立節點時剝掉不夠——applyTranslations 會用字典值重寫 innerHTML 再把它加回來，
   所以這裡用 CSS 蓋掉。 */
.ph-sheet__speck sup{display:none;}
.ph-sheet__specv{font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:#0A2440;text-align:right;}
.ph-sheet__app{margin-bottom:16px;}
.ph-sheet__appk{font-size:12.5px;color:#5A6776;letter-spacing:.05em;margin-bottom:4px;display:block;}
.ph-sheet__appv{font-size:14.5px;color:#0A2440;line-height:1.75;text-wrap:pretty;}
/* 批號免責：桌機放在兩張表的腳註，手機版沒有那兩條，改放在按鈕上方 */
.ph-sheet__lot{font-size:12px;color:#5A6776;line-height:1.75;margin:0 0 12px;text-wrap:pretty;}
.ph-sheet__cta{display:flex;gap:8px;}
.ph-sheet__cta a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;
  border-radius:6px;font-size:14.5px;font-weight:600;text-decoration:none;padding:0 10px;line-height:1.35;}
.ph-sheet__cta a.is-ghost{flex:1;border:1.5px solid #D9E4EF;color:#0A2440;}
.ph-sheet__cta a.is-solid{flex:1.2;background:#1272B0;color:#fff;font-weight:700;}
.ph-sheet__cta a.is-ghost:hover{border-color:#1683C7;color:#1272B0;}
.ph-sheet__cta a.is-solid:hover{background:#0A2440;color:#fff;}
.ph-sheet__nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid #EDEFF2;}
.ph-sheet__nav button{border:none;background:none;padding:0;min-height:40px;
  font-family:'Noto Sans TC',sans-serif;font-size:13.5px;font-weight:700;color:#1272B0;cursor:pointer;}
.ph-sheet__nav button:hover{color:#0A2440;}
/* 面板開啟時鎖住背景捲動。單靠 overflow:hidden 會讓瀏覽器把捲動位置夾回頂端，
   所以連同 position:fixed 一起用，關閉時再由 JS 捲回原位。 */
body.ph-sheet-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}

/* ── 03 其他選型資訊：手風琴 ── */
.ph-m-more{padding:32px 0 0;}
.ph-m-more .ph-m__head{margin-bottom:4px;}
.ph-m-more .ph-m__head{margin-bottom:14px;}
.ph-acc__sum{align-items:center;gap:12px;width:100%;padding:18px 2px;min-height:62px;
  background:none;border:none;border-top:1px solid #E4E9EE;text-align:left;cursor:pointer;
  font-family:'Noto Sans TC',sans-serif;}
.ph-acc__sumt{flex:1;font-family:'Noto Serif TC',serif;font-size:17.5px;font-weight:700;color:#0A2440;}
.ph-acc__sumn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5A6776;flex:0 0 auto;}
.ph-acc__caret{flex:0 0 auto;width:0;height:0;border-left:6px solid #5A6776;
  border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .2s;}
.ph-acc__sum[aria-expanded="true"] .ph-acc__caret{transform:rotate(90deg);}
@media (prefers-reduced-motion:reduce){.ph-acc__caret{transition:none;}}

@media (max-width:1100px){
  /* 設計稿的手機版沒有頁內錨點列，也沒有三條選型路徑卡——
     那兩者的功能都被「型號目錄」的分頁清單取代了 */
  html.ph-m-on .ph-anchors,
  html.ph-m-on #overview,
  html.ph-m-on #standard,
  html.ph-m-on #waterbased,
  html.ph-m-on #functional{display:none;}
  html.ph-m-on .ph-m,
  html.ph-m-on .ph-m-01,
  html.ph-m-on .ph-m-more{display:block;}
  html.ph-m-on .ph-acc__sum{display:flex;}

  /* 頁首：設計稿的字級與間距 */
  html.ph-m-on .pd-hero{padding-bottom:32px;}
  html.ph-m-on .pd-hero .breadcrumb{margin-bottom:18px!important;}
  html.ph-m-on .pd-eyebrow{font-size:11.5px;margin-bottom:14px;}
  html.ph-m-on .pd-h1{font-size:30px;line-height:1.25;margin-bottom:18px;}
  html.ph-m-on .pd-lead{font-size:16px;line-height:1.9;}

  /* 四個手風琴要連成一條清單：把 .pd-wrap／.pd-content 各自的上下留白
     與分隔線收掉，否則每一條之間會多出 36px 的空白和一條多餘的細線 */
  html.ph-m-on .ph-m-wrap{padding-top:0;padding-bottom:0;}
  html.ph-m-on .ph-acc{padding-top:0;}
  html.ph-m-on .ph-acc>.ph-sec__head{display:none;}
  html.ph-m-on .ph-acc.is-collapsed>.ph-acc__body{display:none;}
  html.ph-m-on .ph-acc>.ph-acc__body{padding-bottom:22px;}
  html.ph-m-on .pd-content.ph-acc{padding-top:0;padding-bottom:0;border-top:none;}
  html.ph-m-on #faq-section.ph-acc{padding-bottom:10px;}
  html.ph-m-on #forms.ph-acc{padding-bottom:0;}
}

/* 型號清單的分隔線在設計稿裡是滿版的，這一段把 .pd-wrap 的左右留白抵銷掉。
   只在 .pd-wrap 用 20px 留白的區間做（901–1100px 是 64px，不適用）。 */
@media (max-width:900px){
  html.ph-m-on .ph-m{margin-left:-20px;margin-right:-20px;}
}

/* 360px 以下最長的摘要行（MT-PO25／MT-PS12）會被 ellipsis 切掉，字級退半級剛好放得下。
   這一段必須排在 .ph-m__pos 的基本宣告之後，特異性相同時後面的才會勝出。 */
@media (max-width:360px){
  .ph-m__pos{font-size:11.5px;}
}