/* ==========================================================================
   杏昌生技 — 共用樣式表
   給改版後的頁面共用。舊頁面不受影響（它們不會載入這個檔案）。
   ========================================================================== */

:root{
  --brand:#0065cc;
  --brand-dark:#004e9e;
  --brand-tint:#eaf2fb;
  --gold:#c9962c;
  --gold-tint:#fbf3e1;
  --nav-blue:#0a5aa9;   /* sampled from the original image/top/item*.gif nav buttons */

  --steel-1:#93a6b0;
  --steel-2:#7c909c;
  --steel-deep:#2c3b45;

  --ink:#1d2b34;
  --muted:#5d6d78;
  --line:#dde5ea;
  --bg:#f5f8fa;
  --surface:#ffffff;

  --wrap:1100px;
  --radius:10px;
  /* .crumb-bar's rendered height (13px text * 1.7 line-height + 9px block
     padding top/bottom + 1px border = ~41px) - fixed rather than JS-measured
     like --header-h because the breadcrumb is always one line at the >=900px
     width where the sticky sidebar applies. */
  --crumb-h:42px;
  --shadow:0 1px 2px rgba(29,43,52,.06), 0 8px 24px rgba(29,43,52,.08);
  --focus:0 0 0 3px rgba(0,101,204,.35);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;min-height:74px}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{width:210px;height:52px;object-fit:contain}
.header-right{display:flex;align-items:center;gap:14px}

.lang{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.04em}
.lang-label{color:var(--muted);font-weight:600;font-size:11px}
.lang a,.lang .lang-current{padding:4px 8px;border-radius:5px}
.lang a{color:var(--muted)}
.lang a:hover{background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}
/* The active language is a <span>, not a link: you are already on the Chinese
   site, so there is nothing to navigate to. It used to be an <a href="index.htm">
   carrying aria-current="page" purely as a styling hook, which told screen
   readers "this is the page you are on" while actually pointing at the home
   page - false, and it silently threw away your reading position if clicked. */
.lang .lang-current{background:var(--brand);color:#fff;font-weight:600}

.nav-toggle{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;
}
.nav-toggle:hover{border-color:var(--brand);color:var(--brand)}
.nav-toggle .bars{position:relative;width:18px;height:2px;background:currentColor;border-radius:2px}
.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease, top .18s ease;
}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}

/* ---------- main nav ---------- */
.site-nav{background:var(--nav-blue)}
.site-nav ul{display:flex;flex-wrap:wrap}
.site-nav li{flex:1 1 auto}
.site-nav a{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;
  padding:11px 10px;color:#fff;text-align:center;border-inline-end:1px solid rgba(255,255,255,.18);
  transition:background .15s ease;
}
.site-nav li:last-child a{border-inline-end:0}
.site-nav a:hover,.site-nav a:focus-visible{background:rgba(255,255,255,.16);text-decoration:none}
.site-nav a[aria-current="page"]{background:rgba(255,255,255,.22)}
/* .8 not .72: at 10px this counts as normal-size text, so it needs WCAG AA's
   4.5:1 against --nav-blue. .72 measured 4.21 and failed. */
.site-nav .en{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);line-height:1.3}
.site-nav .zh{font-size:15px;font-weight:600;letter-spacing:.06em;line-height:1.35;white-space:nowrap}

/* ---------- breadcrumb + page head ---------- */
/* Breadcrumb pins below the header while scrolling.
   --header-h is measured in JS because the header height changes with the
   breakpoint and when the mobile nav opens. */
.crumb-bar{
  position:sticky;
  top:var(--header-h,74px);
  z-index:40;
  background:rgba(245,248,250,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.crumb{font-size:13px;color:var(--muted);padding-block:9px}
.crumb ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.crumb li+li::before{content:"›";margin-inline-end:6px;color:#a9b6bf}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--brand)}
.crumb [aria-current="page"]{color:var(--ink);font-weight:600}
/* Touch targets: the crumb links render ~19px tall, well under the 44px
   comfortable-tap size. Padding goes on the link (not the bar) and the bar's
   own padding shrinks to compensate, so the hit area roughly doubles while
   the bar itself grows only ~5px. Scoped below 900px on purpose: above it
   the sticky sidebar offsets against --crumb-h, and pointer users don't need
   the larger target anyway - so desktop crumb geometry stays exactly 42px. */
@media (max-width:899px){
  .crumb{padding-block:2px}
  .crumb li{display:flex;align-items:center}
  .crumb a{display:inline-block;padding-block:11px}
}

.page-head{padding-block:22px 6px}
.page-head h1{
  margin:0;font-size:clamp(22px,3.2vw,30px);font-weight:700;letter-spacing:.02em;line-height:1.3;
  padding-inline-start:14px;border-inline-start:5px solid var(--brand);
}
.page-head .sub{margin:8px 0 0;color:var(--muted);font-size:15px}

/* ---------- layout with sidebar ---------- */
.layout{display:grid;gap:26px;padding-block:22px 44px}
/* Grid items default to min-width:auto (= their content's min-content size),
   which lets a wide child - here, FinancialD.htm's 821px dividend table -
   force the whole grid track wider instead of respecting minmax(0,1fr) and
   letting .legacy's own overflow-x:auto handle it. Same family of bug as
   the .card-media min-height note below: the auto default silently wins
   over an explicit sizing rule elsewhere unless overridden. */
.layout > div{min-width:0}
@media (min-width:900px){
  .layout{grid-template-columns:210px minmax(0,1fr);gap:34px;align-items:start}
}

/* sidebar collapses into a disclosure on small screens */
.sidebar summary{
  padding:12px 14px;font-weight:600;cursor:pointer;list-style:none;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
}
.sidebar summary::-webkit-details-marker{display:none}
.sidebar summary::after{content:"▾";float:inline-end;color:var(--muted)}
.sidebar details[open] summary::after{content:"▴"}
.sidebar details .cat-tree{margin-top:8px}
@media (min-width:900px){
  .sidebar summary{display:none}
  .sidebar details .cat-tree{margin-top:0}
  /* Follows scroll instead of ending when the (usually taller) main content
     does. Pinned below the header + breadcrumb, both already sticky above
     it. max-height + overflow-y:auto so a category tree taller than the
     viewport scrolls internally instead of running off the bottom edge. */
  .sidebar{
    position:sticky;
    top:calc(var(--header-h,74px) + var(--crumb-h));
    max-height:calc(100vh - var(--header-h,74px) - var(--crumb-h) - 24px);
    overflow-y:auto;
  }
}
/* NOTE: the open/closed state is driven by JS (see the sync script), not CSS.
   A closed <details> is hidden via content-visibility, which CSS display cannot
   override. The markup ships with `open` so it still works with JS disabled. */

/* ---------- category tree ----------
   All 9 top-level categories always show; whichever one the current page
   belongs to expands to list its sub-items, with the exact current page
   highlighted solid. Lets you jump to any category from any product page,
   not just back up to the overview first. */
.cat-tree{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.cat-top{border-bottom:1px solid var(--line)}
.cat-top a{display:block;padding:11px 14px;font-size:14px;font-weight:700;color:var(--ink);background:var(--bg)}
.cat-top a:hover{background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}
.cat-top a[aria-current="page"]{background:var(--brand);color:#fff}

.cat-group+.cat-group{border-top:1px solid var(--line)}
.cat-link{display:block;padding:11px 14px;color:var(--ink);font-size:15px;font-weight:600}
.cat-link:hover{background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}
.cat-group.is-open .cat-link{background:var(--brand-tint);color:var(--brand-dark)}
/* the exact current page always wins, whether it's a category hub or a sub-item */
.cat-link[aria-current="page"],
.cat-group.is-open .cat-link[aria-current="page"]{background:var(--brand);color:#fff}

.cat-sub{background:#fbfcfd;border-top:1px solid var(--line)}
.cat-sub li+li{border-top:1px solid var(--line)}
.cat-sub a{display:block;padding:9px 14px 9px 26px;color:var(--muted);font-size:14px}
.cat-sub a:hover{background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}
.cat-sub a[aria-current="page"]{background:var(--brand);color:#fff;font-weight:600}

/* ---------- 3rd level (保健營養 only: 醫療器材 / 營養產品 each have their own
   children - see the NESTED_HUBS comment in build-products.js). Each depth
   gets a visually distinct treatment - deeper level = smaller text, more
   indent, cooler/more muted colour - and level 2 additionally gets a ▸/▾
   disclosure marker + coloured left bar so it visibly reads as "a folder",
   not just another leaf link. ---------- */
.cat-subgroup{border-inline-start:3px solid var(--brand-tint)}
.cat-subgroup+.cat-subgroup{border-top:1px solid var(--line)}
.cat-subgroup.is-open{border-inline-start-color:var(--brand)}

/* Scoped as ".cat-sub .cat-link2" (two classes), not bare ".cat-link2": the
   generic ".cat-sub a" leaf style (one class + one element = same numeric
   specificity as a bare element+class selector) sits structurally OUTSIDE
   this block in the cascade and would otherwise win on specificity despite
   .cat-link2 "looking" more specific by name - class-count is what counts. */
.cat-sub .cat-link2{
  display:flex;align-items:center;gap:6px;
  padding:9px 14px 9px 22px;color:var(--muted);font-size:13.5px;font-weight:700;
  letter-spacing:.02em;
}
.cat-sub .cat-link2::before{
  content:"▸";font-size:10px;color:#a9b6bf;transition:transform .15s ease;
}
.cat-subgroup.is-open .cat-link2::before{content:"▾"}
.cat-sub .cat-link2:hover{background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}
.cat-subgroup.is-open .cat-sub .cat-link2,
.cat-sub .cat-subgroup.is-open .cat-link2{background:#f1f6fa;color:var(--brand-dark)}
.cat-sub .cat-link2[aria-current="page"],
.cat-sub .cat-subgroup.is-open .cat-link2[aria-current="page"]{background:var(--brand);color:#fff}
.cat-subgroup.is-open .cat-link2[aria-current="page"]::before{color:#fff}

.cat-subsub{background:#fff;border-top:1px solid var(--line)}
.cat-subsub li+li{border-top:1px dashed var(--line)}
/* Same specificity note as .cat-link2 above: scoped via the parent class,
   not a bare element+class selector, so it reliably wins over ".cat-sub a". */
.cat-sub .cat-subsub a{
  display:block;padding:8px 14px 8px 40px;color:var(--muted);font-size:12.5px;
}
.cat-sub .cat-subsub a::before{content:"–";display:inline-block;width:14px;margin-inline-start:-14px;color:#c3d3dc}
.cat-sub .cat-subsub a:hover{background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}
.cat-sub .cat-subsub a[aria-current="page"]{background:var(--brand);color:#fff;font-weight:600}
.cat-sub .cat-subsub a[aria-current="page"]::before{color:#fff}

/* ---------- product grid ---------- */
.section-banner{border-radius:var(--radius);overflow:hidden;margin-bottom:22px;box-shadow:var(--shadow)}
/* aspect-ratio reserves the banner's height before the file arrives - without
   it the box is 0px tall until load, then jumps to full height and shoves the
   whole page down (~122px at desktop width). All 16 banner images are 862x129,
   so one ratio covers every page. object-fit guards a future banner that isn't
   that ratio: it would crop rather than stretch. Same reservation trick as
   .card-media's aspect-ratio:1/1, which is why product cards never jumped. */
.section-banner img{width:100%;aspect-ratio:862/129;object-fit:cover}

.product-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
/* Multi-column: every row the same height so the grid reads as a clean matrix.
   Deliberately NOT applied in single-column (phone) layout - there it would pad
   every card out to the tallest one for no visual gain. */
@media (min-width:560px){
  .product-grid{grid-auto-rows:1fr}
}
/* Opt-out for a grid that is mostly .no-media cards (products_b2_1.htm: 5 of
   8). There, 1fr made every row as tall as the single photo row, and since
   .no-media sits at align-self:start (see its note below) each text-only row
   was left with ~300px of dead space under it. Sizing rows to their own
   content fixes that. A modifier rather than a change to .product-grid
   itself, because on the photo-heavy pages 1fr is what keeps the grid
   reading as a clean matrix. */
.product-grid.rows-auto{grid-auto-rows:auto}
.card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px);border-color:#c3d3dc;box-shadow:0 2px 4px rgba(29,43,52,.08),0 14px 32px rgba(29,43,52,.14)}

/* Fixed-ratio media box so every card is the same height.
   min-height:0 is REQUIRED: as a flex item the default min-height:auto resolves
   to the image's intrinsic height and silently overrides aspect-ratio. */
.card-media{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-bottom:1px solid var(--line);
  aspect-ratio:1/1;          /* median source ratio is 1.08 */
  min-height:0;
  overflow:hidden;
  padding:16px;
}
/* contain, never cover - cropping a medical device photo misrepresents the product */
.card-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Only photos site.js judged big enough to be worth enlarging get the affordance
   (see its note); the rest stay inert, so the cursor never promises a zoom that
   would just be a blurry upscale. */
.card-media img[data-zoom="on"]{cursor:zoom-in}
.card-media img[data-zoom="on"]:focus-visible{box-shadow:var(--focus)}

.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-body .brand{
  margin:0;font-size:11.5px;font-weight:700;color:var(--brand);
  text-transform:uppercase;letter-spacing:.06em;
}
.card-body h3{margin:0;font-size:16px;font-weight:700;line-height:1.45;color:var(--ink)}
.card-body .en{font-size:13px;color:var(--muted);line-height:1.5;word-break:break-word}
.card-body dl{margin:8px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:13px}
.card-body dt{color:var(--muted);white-space:nowrap}
.card-body dd{margin:0;color:var(--ink);word-break:break-word}
.card-body .lic{
  margin-top:auto;padding-top:12px;font-size:12px;color:var(--muted);
  border-top:1px dashed var(--line);
}
/* Every product with a download link also has a lic (verified against the
   source data), so .lic's margin-top:auto already pushes this pair as a unit
   to the card's bottom - .dl itself only needs the small gap above it. */
.card-body .dl{
  margin-top:10px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:7px 12px;border-radius:999px;border:1px solid var(--brand);
  color:var(--brand-dark);font-size:12.5px;font-weight:600;text-decoration:none;
}
.card-body .dl::before{content:"⭳";font-size:13px;line-height:1}
.card-body .dl:hover{background:var(--brand);color:#fff;text-decoration:none}

/* Some licensed line items (products_b2_1.htm's implant/abutment appendix)
   never had a photo in the original site either - render them as a plain
   text card instead of leaving a broken/empty image box. On the >=560px
   grid, grid-auto-rows:1fr stretches every card in a row to match the
   tallest (normally fine - it's how photo cards line up neatly), but a
   no-media card has no photo box to absorb that extra height, so it was
   stretching into a tall card with a big dead gap at the bottom. align-self
   overrides just this card back to its own natural (shorter) content height. */
.card.no-media{background:var(--brand-tint);align-self:start}
.card.no-media .card-body{padding-top:18px}

/* ---------- about pages: prose container + timeline ---------- */
.content{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 24px;
}
/* Matches the original pages' own <font color="#0066CC"> treatment for these
   sub-headings (品質第一/服務至上/顧客滿意, 目前服務範圍如下, 經營展望, ...)
   rather than the site's usual dark --ink heading colour. */
.content h2{margin:22px 0 12px;font-size:18px;font-weight:700;color:var(--brand)}
.content h2:first-child{margin-top:0}
.content > p{margin:0 0 14px;color:var(--ink);line-height:1.85}
.content > p:last-child{margin-bottom:0}
.content .lead{
  margin:0 0 18px;font-size:17px;font-weight:600;color:var(--brand-dark);line-height:1.75;
}

.plain-list{margin:0 0 14px;padding:0;list-style:none}
.plain-list li{
  position:relative;padding-inline-start:1.3em;margin-bottom:8px;color:var(--ink);line-height:1.75;
}
.plain-list li:last-child{margin-bottom:0}

.policy-block{margin:0 0 16px}
.policy-block:last-child{margin-bottom:0}
.policy-block h3{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--brand-dark)}
.policy-block p{margin:0;color:var(--ink);line-height:1.8}
.policy-block .plain-list{margin-top:6px}

/* location / executive cards - lighter weight than product .card (no photo,
   no lic/model dl - just a heading and a couple of detail lines).
   9 service locations and 6 executives both divide evenly into 3 columns,
   so that's pinned explicitly rather than left to auto-fill guesswork. */
.info-grid{display:grid;gap:14px;grid-template-columns:1fr;margin:4px 0 0;list-style:none;padding:0}
@media (min-width:640px){.info-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.info-grid{grid-template-columns:repeat(3,1fr)}}
.info-card{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
/* small supplementary tag (about05's 中國大陸/印尼營業據點 region label) */
.info-card .badge{
  display:inline-block;margin:0 0 8px;font-size:11px;font-weight:700;color:var(--brand-dark);
  background:var(--brand-tint);padding:3px 9px;border-radius:999px;letter-spacing:.02em;
}
/* about10's executive title/rank - same pill treatment as .badge (background
   tint, not just coloured text), just sized up so "董事長" etc. reads at a
   glance instead of like fine print. */
.info-card .role{
  display:inline-block;margin:0 0 8px;font-size:14px;font-weight:700;color:var(--brand-dark);
  background:var(--brand-tint);padding:4px 11px;border-radius:999px;letter-spacing:.02em;
}
.info-card h3{margin:0 0 8px;font-size:15.5px;font-weight:700;color:var(--brand)}
.info-card p{margin:0 0 4px;font-size:13.5px;color:var(--muted);line-height:1.65}
.info-card p:last-child{margin-bottom:0}
.info-card a{color:var(--brand-dark);font-weight:600}
/* FinancialF.htm's closing line after the contact cards - .content > p's
   default margin-top:0 left it sitting flush against the grid above */
.content .closing-note{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}

/* award/ranking record (about07.htm's TOP5000 placements) - the rank number
   is the whole point, so it gets bold brand colour, not muted like a normal dd */
.rank-list{margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr auto;gap:7px 14px;font-size:13px}
.rank-list dt{margin:0;color:var(--muted);align-self:center}
.rank-list dd{margin:0;font-weight:800;color:var(--brand-dark);white-space:nowrap;align-self:center}
.tl-body .tl-headline{margin:0 0 4px;font-weight:700;color:var(--ink)}

/* award cards (about07.htm) - gold top accent + crown mark distinguish these
   from the plain location/executive info-cards; gold used nowhere else on
   the site, deliberately, so it reads as "this one's a trophy". */
.award-card{position:relative;border-top:3px solid var(--gold);padding-top:18px}
.award-card .rank-crown{
  position:absolute;top:14px;right:14px;width:28px;height:28px;color:var(--gold);
}
.award-card .badge{background:var(--gold-tint);color:#8a6412}

/* the certifying body's own badge graphic, restored per request - shown
   once as a header strip (matches how the original page used it: one badge
   up top, not repeated per year). */
.award-intro{display:flex;align-items:center;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.award-intro img{flex:none;width:84px;height:auto}
.award-intro .lead{margin:0;flex:1;min-width:220px}
/* matches the original page's own <span style="color:#FF0000"> on the
   company name in this congratulatory line. */
.co-name{color:#e02020;font-weight:800}

/* ---------- study.htm: 菁英招募 (Recruitment) - a standalone page (own
   top-nav tab, not part of the 公司簡介 family) that gets edited often as
   openings come and go, so the markup stays a plain flowing list rather
   than anything that needs a rebuild script to touch. ---------- */
.apply-cta{
  background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px;margin-bottom:22px;display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 18px;justify-content:space-between;
}
.apply-cta p{margin:0;font-weight:600;color:var(--ink)}
.apply-btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap;
}
.apply-btn:hover{background:var(--brand-dark);color:#fff;text-decoration:none}

/* one row per position (dt), all its recruiting departments/regions as
   wrapped tag-chips (dd) - reads the rowspan-grouped source table without
   repeating the position label once per region. */
.job-groups{margin:0 0 22px;display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:start}
@media (max-width:560px){.job-groups{grid-template-columns:1fr}}
.job-groups dt{
  margin:0;font-weight:700;color:var(--brand-dark);white-space:nowrap;padding-top:6px;
}
.job-groups dd{margin:0;display:flex;flex-wrap:wrap;gap:7px}
/* light dashed rule between each position group (dt+dd pair), skipping the
   very first so there's no stray line at the top of the list */
.job-groups dt:not(:first-of-type),
.job-groups dd:not(:first-of-type){
  border-top:1px dashed var(--line);padding-top:14px;margin-top:2px;
}
.job-tag{
  background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:5px 11px;font-size:13px;color:var(--ink);white-space:nowrap;
}

.contact-line{margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.contact-line a{color:var(--brand-dark);font-weight:600}

/* ---------- service.htm: 客戶服務 ---------- */
.content .en-note{font-size:13.5px;color:var(--muted);line-height:1.75}
.contact-card{
  background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin-top:20px;
}
.contact-card p{margin:0 0 8px;font-size:15px;color:var(--ink)}
.contact-card p:last-child{margin-bottom:0}
.contact-card strong{color:var(--brand-dark)}
.contact-card a{color:var(--brand-dark);font-weight:700}

.content-image{text-align:center}
.content-image img{border-radius:8px;margin-inline:auto}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:56px 20px 1fr;column-gap:0}
@media (min-width:520px){.timeline li{grid-template-columns:72px 20px 1fr}}
.tl-year{
  text-align:right;padding-right:14px;padding-top:2px;
  font-weight:800;color:var(--brand-dark);font-size:15px;white-space:nowrap;
}
.tl-line{display:flex;flex-direction:column;align-items:center}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);margin-top:5px;flex:none;box-shadow:0 0 0 3px var(--surface)}
.tl-stem{flex:1;width:2px;background:var(--line);margin-top:2px;min-height:8px}
.timeline li:last-child .tl-stem{background:transparent}
.tl-body{padding:0 0 22px 14px}
.tl-body p{margin:0 0 4px;font-size:14.5px;color:var(--ink);line-height:1.65}
.tl-body p:last-child{margin-bottom:0}

/* ---------- Stakeholder.htm: 利害關係人專區 ---------- */
/* one card per stakeholder group (投資人/客戶/供應商/員工/社區) - the source's
   4-column ESG table doesn't survive on mobile, so each row becomes a
   stacked card instead; single column throughout since each holds three
   full sub-sections of content, too much for a multi-column grid to stay
   readable. */
.stakeholder-grid{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.stakeholder-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;
}
.stakeholder-card h3{
  margin:0 0 16px;font-size:19px;font-weight:800;color:var(--ink);
  padding-inline-start:12px;border-inline-start:4px solid var(--brand);
}
.sh-section{margin-bottom:18px}
.sh-section:last-child{margin-bottom:0}
.sh-section h4{margin:0 0 8px;font-size:13.5px;font-weight:700;color:var(--brand-dark);letter-spacing:.02em}
/* .plain-list itself has no marker (about03/about08 keep their own text
   prefix like "一、"), but here the source's "1." / "•" prefixes were
   stripped so the list reads as clean data - so these two put a marker
   back, scoped to just this section instead of changing .plain-list itself. */
.sh-section ol.plain-list{counter-reset:sh-num}
.sh-section ol.plain-list li{counter-increment:sh-num}
.sh-section ol.plain-list li::before{content:counter(sh-num) ".";position:absolute;left:0;color:var(--brand-dark);font-weight:700;font-size:12.5px}
.sh-section ul.plain-list li::before{content:"–";position:absolute;left:2px;color:var(--brand)}
.sh-contacts{margin-top:10px;display:flex;flex-wrap:wrap;gap:12px}
.sh-contact{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 14px;font-size:13px;line-height:1.7;min-width:200px;
}
.sh-contact strong{display:block;color:var(--ink);margin-bottom:2px}
.sh-contact a{display:block;color:var(--brand-dark);font-weight:600}

.doc-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}

/* ---------- conglomerateA/B/C/D.htm: 關係企業 company profiles ----------
   Reuses .stakeholder-card/.sh-section/.plain-list (same "one rich card,
   a few labelled sub-sections" shape as Stakeholder.htm) plus a header
   block for the logo/name and an optional facts list for the two
   companies (B/D) that publish registration details. */
.company-card .company-head{
  display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap;
}
/* width:auto + max-width/max-height (not a fixed width) lets each logo's
   own aspect ratio decide its box, since some are square marks (HE.JPG)
   and others are wide wordmarks with text baked in (HCH.gif) - a fixed
   width squashed the wide ones down to an unreadable sliver. */
.company-logo{flex:none;width:auto;height:auto;max-width:160px;max-height:64px}
.company-card h3{
  margin:0;font-size:19px;font-weight:800;color:var(--ink);
  padding-inline-start:12px;border-inline-start:4px solid var(--brand);
}
.company-card .name-en{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--muted)}

.company-facts{
  margin:0 0 18px;padding:16px 18px;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px;
}
.company-facts dt{margin:0;color:var(--muted);white-space:nowrap}
.company-facts dd{margin:0;color:var(--ink)}
.company-facts a{color:var(--brand-dark);font-weight:600}

/* ---------- news.htm / newsB.htm: 學術活動 ---------- */
.news-feature-img{width:100%;border-radius:8px;margin-bottom:18px}
.news-feature h2{margin:0 0 14px;font-size:19px;font-weight:800;color:var(--ink);line-height:1.5}
.news-meta{margin-bottom:16px}

.activity-list{list-style:none;margin:0 0 8px;padding:0}
.activity-list li{
  display:flex;align-items:baseline;gap:14px;padding:10px 2px;border-bottom:1px solid var(--steel-1);
}
.activity-list li:last-child{border-bottom:none}
.activity-date{flex:none;width:48px;font-weight:700;color:var(--ink);font-size:13px}
.activity-list a{color:var(--brand);font-weight:600;font-size:14.5px;text-decoration:underline;text-decoration-color:rgba(0,101,204,.35)}
.activity-list a:hover{color:var(--brand-dark);text-decoration-color:currentColor}

/* ---------- investor-relations document lists (Financial* sub-pages) ---------- */
.doc-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.doc-list li+li{border-top:1px solid var(--line)}
.doc-list a{
  display:flex;align-items:center;gap:10px;padding:12px 16px;color:var(--ink);font-size:14.5px;line-height:1.5;
}
.doc-list a::before{content:"⭳";flex:none;font-size:14px;color:var(--brand)}
.doc-list a:hover{background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}
.doc-list .doc-label{flex:1}
.doc-list .ext{
  flex:none;font-size:11px;font-weight:700;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:2px 7px;letter-spacing:.02em;
}
/* FinancialE.htm's 序號 (item number) - governance items are conventionally
   referenced by this number in disclosures, worth keeping visible */
.doc-list .num{
  flex:none;font-size:11.5px;font-weight:700;color:var(--muted);
  min-width:22px;text-align:center;
}
/* a numbered item that links to one of our own already-built sub-pages
   (e.g. #35 歷年執行情形 -> FinancialJ.htm) instead of a raw document -
   in-site navigation, not a download. Needs to read as different at a
   glance, not just on hover: tinted background + brand border + arrow,
   versus the neutral/white download rows around it. */
.doc-list a.internal{
  background:var(--brand-tint);color:var(--brand-dark);font-weight:700;
  border-inline-start:3px solid var(--brand);
}
.doc-list a.internal::before{content:"→";color:var(--brand-dark)}
.doc-list a.internal:hover{background:var(--brand);color:#fff}
.doc-list a.internal:hover::before{color:#fff}

/* year-grouped links (Financial.htm's year x quarter grid, FinancialC.htm's
   year x document-type grid) - a heading per year/group, then its links as
   a wrapping row of pills rather than one-per-line since there can be 4-5. */
.year-group{margin:0 0 20px}
.year-group:last-child{margin-bottom:0}
.year-group h3{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--brand-dark)}
.year-group .pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.year-group .pills a{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:13px;font-weight:600;
}
.year-group .pills a::before{content:"⭳";font-size:11px;color:var(--brand)}
.year-group .pills a:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}
/* same "this navigates, it doesn't download" treatment as .doc-list a.internal */
.year-group .pills a.internal{
  background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark);font-weight:700;
}
.year-group .pills a.internal::before{content:"→";color:var(--brand-dark)}
.year-group .pills a.internal:hover{background:var(--brand);color:#fff}
.year-group .pills a.internal:hover::before{color:#fff}

/* FinancialG.htm: one card per investor-conference session - a description
   line plus its attached files (簡報檔/錄音檔/...), files reuse the .dl pill */
.event-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.event-list li{border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.event-list .event-desc{margin:0 0 10px;font-size:14px;color:var(--ink);line-height:1.7}
.event-list .event-files{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
/* same pill look as .card-body .dl, but that rule only fires inside a
   product card - repeated here since an event card is not one */
.event-list .event-files a{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--brand);color:var(--brand-dark);font-size:12.5px;font-weight:600;text-decoration:none;
}
.event-list .event-files a::before{content:"⭳";font-size:13px;line-height:1}
.event-list .event-files a:hover{background:var(--brand);color:#fff;text-decoration:none}

/* ---------- FinancialD.htm: dividend history, one card per year instead of
   the original 8-column table (which forced sideways scrolling even on
   desktop). 現金股利 is the number investors actually scan for, so it's
   pulled out as a headline stat; the other 6 disclosed fields stay in a
   compact dl beneath - still all present, just not fighting for the same
   row. 股票股利/除權交易日/除權基準日 read "0"/"-" for every year on record
   (this company has only ever paid cash dividends) but are kept rather than
   dropped - it's a regulated disclosure, not just a design table. */
.dividend-grid{display:grid;gap:16px;grid-template-columns:1fr;margin:4px 0 0;list-style:none;padding:0}
@media (min-width:640px){.dividend-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.dividend-grid{grid-template-columns:repeat(3,1fr)}}
.dividend-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.dividend-card h3{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.dividend-card .note{margin:2px 0 12px;font-size:12px;color:var(--muted)}
.dividend-card .headline{
  display:flex;align-items:baseline;gap:7px;margin:0 0 14px;padding:10px 12px;
  background:var(--brand-tint);border-radius:6px;
}
.dividend-card .headline .amount{font-size:23px;font-weight:800;color:var(--brand-dark);line-height:1}
.dividend-card .headline .unit{font-size:12px;color:var(--muted)}
.dividend-card dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;font-size:12.5px}
.dividend-card dt{color:var(--muted);white-space:nowrap}
.dividend-card dd{margin:0;color:var(--ink);text-align:right}

/* ---------- FinancialH.htm: one collapsible <details> per year (18 years,
   262 disclosures total - showing them all expanded at once would be an
   enormous scroll). Ships with the 2 most recent years open, the rest
   collapsed; nests a plain .doc-list per year but strips its standalone
   border/radius so it reads as one continuous box with the summary, not a
   box nested inside a box. .doc-list's .num badge is reused for the date
   column - same "short muted label before the text" role it already has
   for FinancialE's 序號. */
.year-block{border:1px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden}
.year-block:last-child{margin-bottom:0}
.year-block summary{
  display:flex;align-items:center;gap:8px;padding:13px 16px;
  font-weight:700;font-size:14.5px;color:var(--ink);background:var(--bg);cursor:pointer;list-style:none;
}
.year-block summary::-webkit-details-marker{display:none}
.year-block summary::after{content:"▾";margin-inline-start:auto;color:var(--muted);transition:transform .15s ease}
.year-block[open] summary::after{transform:rotate(180deg)}
.year-block .count{font-weight:400;color:var(--muted);font-size:12.5px}
.year-block .doc-list{border:none;border-radius:0;border-top:1px solid var(--line)}
.year-block .doc-list .num{min-width:64px;text-align:left}

/* ---------- index.htm: 首頁 ----------
   Only the homepage uses these; every other rule it needs (header, nav,
   footer, reset, responsive) is already shared above. */
.hero{background:var(--steel-deep)}
/* source art is only 900px wide, so cap it rather than upscale to full-bleed */
.hero img{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  aspect-ratio:900/290;object-fit:cover;min-height:180px;
}

.intro{padding-block:clamp(28px,5vw,52px)}
.intro-grid{display:grid;gap:28px}
.intro-text h1{
  margin:0 0 12px;font-size:clamp(26px,4.4vw,38px);line-height:1.25;
  font-weight:400;color:var(--muted);letter-spacing:.01em;
}
.intro-text h1 strong{display:block;color:var(--brand);font-weight:800;letter-spacing:.02em}
.intro-text p{margin:0;color:var(--muted);font-size:clamp(15px,1.9vw,19px);line-height:1.65}

/* cap the track so the 250px-wide source art is never upscaled */
.promos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,260px));justify-content:start}
.promo{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
a.promo:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(29,43,52,.08),0 14px 32px rgba(29,43,52,.14);
  text-decoration:none;
}
.promo img{width:100%}
@media (min-width:960px){
  /* welcome copy left, both promos side by side right - as in the original band */
  .intro-grid{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
  .promos{grid-template-columns:repeat(2,260px)}
}

/* ---------- legacy content rescue ---------- */
/* old fixed-width tables scroll inside their own box instead of breaking the page */
.legacy{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legacy table{max-width:none}

/* ---------- footer ---------- */
.site-footer{background:var(--steel-deep);color:rgba(255,255,255,.72);font-size:13px;line-height:1.8;margin-top:8px}
.site-footer a{color:#fff}
.footer-org{color:#fff;font-weight:600;letter-spacing:.04em}

/* Upper band: company identity + address on the left, site map on the right.
   The old footer held only the company name and a copyright line with zero
   links, which wasted the one region users reliably scroll to when they want
   contact details. */
.footer-top{display:grid;gap:26px 40px;padding-block:30px 24px}
@media (min-width:720px){
  .footer-top{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
.footer-brand .footer-org{display:block;font-size:15px}
.footer-brand .footer-en{display:block;font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.footer-brand address{margin:12px 0 0;font-style:normal}
.footer-brand address a{text-decoration:none;white-space:nowrap}
.footer-brand address a:hover{text-decoration:underline}

.footer-nav h2{
  margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}
.footer-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}
.footer-nav a{display:block;padding-block:5px;color:rgba(255,255,255,.85);text-decoration:none}
.footer-nav a:hover{color:#fff;text-decoration:underline}

/* Lower band: copyright, separated by a hairline. */
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:space-between;align-items:center;
  padding-block:14px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;
}
/* Touch targets for the footer links (19px phone number, 33px site map), same
   reasoning as the breadcrumb above - the footer has vertical room to spare.
   Must sit AFTER the two base rules, not up with the breadcrumb query: these
   selectors tie with them on specificity, so source order is what decides. */
@media (max-width:899px){
  .footer-nav a{padding-block:10px}
  .footer-brand address a{display:inline-block;padding-block:12px}
}

/* ---------- 404.htm ---------- */
/* Full-width content column for pages with no sidebar. Not .layout: that one
   is a two-track grid, so a lone child lands in the 210px sidebar track. */
.page-single{padding-block:22px 44px}
.notfound-links{display:grid;gap:12px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.notfound-links a{
  display:block;padding:14px 16px;text-decoration:none;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  border-inline-start:4px solid var(--brand);
}
.notfound-links a:hover{background:var(--brand-tint);text-decoration:none}
.notfound-links strong{display:block;color:var(--brand-dark);font-size:15px}
.notfound-links span{display:block;margin-top:2px;color:var(--muted);font-size:13px}

/* ---------- lightbox (product photos) ---------- */
/* Built by site.js on demand, so nothing ships in the 49 product pages. */
.lightbox{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(20,30,37,.82);backdrop-filter:blur(3px);
}
.lightbox-figure{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:100%;max-height:100%;
}
/* Capped at the image's own natural size: scaling past 100% would only add
   blur, which is the whole reason small photos are not clickable to begin
   with. min() keeps it inside the viewport on small screens. */
.lightbox-figure img{
  max-width:min(100%,1200px);max-height:calc(100vh - 120px);
  width:auto;height:auto;object-fit:contain;
  background:#fff;border-radius:var(--radius);box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.lightbox-figure figcaption{
  color:#fff;font-size:14px;line-height:1.6;text-align:center;
  max-width:60ch;text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute;inset-block-start:16px;inset-inline-end:16px;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;
}
.lightbox-close:hover{background:#fff;color:var(--ink)}
/* stop the page behind from scrolling while the overlay is up */
body.has-lightbox{overflow:hidden}

/* ---------- back to top ---------- */
/* Injected by site.js; hidden until the page is long enough to need it. */
.to-top{
  position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:45;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--brand-dark);
  line-height:1;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.to-top-arrow{font-size:15px}
.to-top-label{font-size:9.5px;font-weight:700;letter-spacing:.08em}
.to-top.is-shown{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- responsive ---------- */
@media (max-width:779px){
  .site-nav{display:none}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column}
  .site-nav li{flex:none}
  .site-nav a{
    flex-direction:row;justify-content:flex-start;gap:10px;padding:13px 20px;text-align:left;
    border-inline-end:0;border-bottom:1px solid rgba(255,255,255,.18);
  }
  .site-nav .en{min-width:112px;text-align:left}
  .brand img{width:150px;height:37px}
  .lang-label{display:none}
  .lang{gap:2px;font-size:12px}
  /* taller than the desktop 4px so the language control clears the ~44px
     comfortable-tap size on phones (it measured 28px before) */
  .lang a,.lang .lang-current{padding:10px 8px}
  .nav-toggle{padding:8px 11px}
}
@media (min-width:780px){ .nav-toggle{display:none} }

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card:hover,a.promo:hover{transform:none}
  .to-top{transform:none}
}