/* CaseProfile public archive · UX/UI rebuild 2026 */
:root{
  --site-ink:#171923;
  --site-text:#3d4150;
  --site-muted:#747987;
  --site-canvas:#f3f4f7;
  --site-paper:#fff;
  --site-line:#dedfe7;
  --site-brand:#5b5cf0;
  --site-brand2:#13b8a6;
  --site-coral:#f56f58;
  --site-radius:22px;
  --site-shadow:0 14px 45px rgba(23,25,35,.09);
}
html{background:var(--site-canvas);scroll-behavior:smooth}
body{
  color:var(--site-text)!important;
  background:
    radial-gradient(circle at 10% 0,rgba(91,92,240,.075),transparent 25rem),
    radial-gradient(circle at 98% 18%,rgba(19,184,166,.055),transparent 26rem),
    var(--site-canvas)!important;
  font-family:"Noto Sans TC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
::selection{background:rgba(91,92,240,.18);color:var(--site-ink)}
.ic-site-header{inset:16px 18px auto!important}
.ic-header-shell{
  width:min(1320px,100%)!important;min-height:68px!important;padding:9px 11px 9px 15px!important;
  background:rgba(255,255,255,.92)!important;border:1px solid rgba(222,223,231,.95)!important;border-radius:17px!important;
  box-shadow:0 8px 24px rgba(23,25,35,.08)!important;
}
.ic-brand-mark{border:0!important;border-radius:12px!important;background:linear-gradient(145deg,#5b5cf0,#7e7fff)!important;box-shadow:0 7px 18px rgba(91,92,240,.24)!important}
.ic-brand-mark::before{width:15px!important;height:15px!important;left:13px!important;top:13px!important;border-radius:5px!important;background:#fff!important}
.ic-brand-mark::after{display:none!important}
.ic-brand-copy strong{color:var(--site-ink)!important;letter-spacing:.01em!important}
.ic-brand-copy small{color:#838795!important;letter-spacing:.12em!important}
.ic-nav-link{border-radius:10px!important;color:#5a5e6d!important;font-weight:700!important}
.ic-nav-link:hover,.ic-nav-link.is-active{background:#171923!important;color:#fff!important;transform:none!important}
.ic-nav-link.ic-admin-link{background:#5b5cf0!important;color:#fff!important}
.ic-nav-link.ic-admin-link:hover{background:#4647d8!important}
.ic-project-menu{background:#fff!important;border-color:var(--site-line)!important;border-radius:15px!important;box-shadow:0 22px 55px rgba(23,25,35,.15)!important}
.ic-project-menu a:hover{background:#f3f3f8!important}

/* Common public typography and cards */
body h1,body h2,body h3{color:var(--site-ink)!important;letter-spacing:-.04em!important}
.eyebrow,.hero-edition,.hero-index,.year-kicker,.hub-kicker,.search-kicker,.ic-footer-kicker{color:var(--site-brand)!important;font-weight:850!important;letter-spacing:.12em!important}
.intro,.media-fields,.archive,.search-cta,.search-page,.search-hub,.results-container,.year-hero,.catalog-bar,.project-catalog{
  width:min(1320px,calc(100% - 36px))!important;
}

/* Home hero: darker modern gallery treatment */
.hero{background:#171923!important}
.hero-editorial{color:#c7cad6!important}
.slide-frame{background:#171923!important}
.slide-overlay{background:linear-gradient(90deg,rgba(18,20,29,.82),rgba(18,20,29,.32) 55%,rgba(18,20,29,.18))!important}
.slide-copy{max-width:850px!important}
.slide-copy h1,.slide-copy h2{color:#fff!important;font-size:clamp(2.3rem,5vw,5.4rem)!important;line-height:1.02!important;letter-spacing:-.055em!important}
.slide-kicker{color:#bec1d4!important}
.ticker{background:#5b5cf0!important;color:#fff!important}
.intro{padding-top:82px!important}
.intro-copy h2{font-size:clamp(2rem,4vw,4.4rem)!important;line-height:1.06!important}
.intro-stats{gap:10px!important}
.intro-stats .stat{border:1px solid var(--site-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 5px 16px rgba(23,25,35,.04)!important}
.intro-stats .stat strong{color:var(--site-ink)!important}
.media-fields{gap:12px!important}
.media-field{border:1px solid var(--site-line)!important;border-radius:20px!important;background:#fff!important;box-shadow:none!important}
.media-field:hover{border-color:#c9cae1!important;box-shadow:var(--site-shadow)!important;transform:translateY(-4px)!important}
.media-field i{color:var(--site-brand)!important}
.archive-grid{gap:18px!important}
.year-card{border-radius:22px!important;box-shadow:none!important;border:1px solid var(--site-line)!important;overflow:hidden!important;background:#fff!important}
.year-card:hover{box-shadow:var(--site-shadow)!important;transform:translateY(-4px)!important}
.year-label{background:#fff!important;color:var(--site-ink)!important;border:1px solid rgba(255,255,255,.5)!important}
.search-cta{border-radius:24px!important;background:linear-gradient(120deg,#171923,#2b3047)!important;box-shadow:0 18px 50px rgba(23,25,35,.16)!important}
.search-cta h2,.search-cta p{color:#fff!important}.search-cta p{color:#c7cad7!important}
.search-cta a{background:#fff!important;color:#171923!important;border-radius:12px!important}

/* Search screens */
.search-page,.search-hub{padding-top:130px!important}
.search-card{border:1px solid var(--site-line)!important;border-radius:24px!important;background:#fff!important;box-shadow:0 14px 44px rgba(23,25,35,.07)!important}
.search-form input,.search-form select,.input-group input,.custom-select{
  min-height:52px!important;border:1px solid var(--site-line)!important;border-radius:13px!important;background:#fff!important;color:var(--site-ink)!important;box-shadow:none!important;
}
.search-form input:focus,.search-form select:focus,.input-group input:focus,.custom-select:focus{border-color:#8d8efa!important;box-shadow:0 0 0 4px rgba(91,92,240,.12)!important;outline:0!important}
.search-submit,.search-btn{border-radius:12px!important;background:#171923!important;color:#fff!important;box-shadow:none!important}
.search-submit:hover,.search-btn:hover{background:#303341!important;transform:translateY(-1px)!important}
.search-side .side-item,.quick-link,.result-card{border:1px solid var(--site-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:none!important}
.quick-link:hover,.result-card:hover{border-color:#cccee0!important;box-shadow:var(--site-shadow)!important;transform:translateY(-3px)!important}
.result-card .tag,.year-badge{border-radius:999px!important;background:#f2f2f8!important;color:#5e6271!important}
.go-btn{background:#5b5cf0!important;color:#fff!important}

/* Year catalog */
.year-hero{padding-top:132px!important}
.year-heading,.year-summary{border-radius:22px!important}
.year-heading{background:linear-gradient(135deg,#171923,#2d3148)!important}
.year-heading h1,.year-heading .year-kicker{color:#fff!important}.year-heading .year-kicker{color:#b9bcff!important}
.year-watermark{color:rgba(255,255,255,.055)!important}
.year-summary{border:1px solid var(--site-line)!important;background:#fff!important;box-shadow:none!important}
.year-stat strong{color:var(--site-ink)!important}
.project-card{border:1px solid var(--site-line)!important;border-radius:22px!important;background:#fff!important;box-shadow:none!important}
.project-card:hover{box-shadow:var(--site-shadow)!important;transform:translateY(-4px)!important}
.project-type{color:var(--site-brand)!important}
.pagination .page-link{border:1px solid var(--site-line)!important;border-radius:10px!important;background:#fff!important;color:#5b5f6d!important}
.pagination .page-link.active{background:#1f5fbf!important;color:#fff!important;border-color:#1f5fbf!important}
.modal-overlay{background:rgba(17,19,28,.76)!important}
.modal-shell{border-radius:24px!important;box-shadow:0 30px 80px rgba(0,0,0,.25)!important;overflow:hidden!important}
.modal-link{border-radius:12px!important;background:#5b5cf0!important;color:#fff!important}

/* Footer */
.ic-site-footer{background:#171923!important;color:#c7cad6!important}
.ic-footer-accent{background:linear-gradient(90deg,#5b5cf0,#13b8a6,#f56f58)!important}
.ic-footer-brand h2,.ic-footer-column h3{color:#fff!important}
.ic-footer-links a{color:#c7cad6!important}.ic-footer-links a:hover{color:#fff!important}
.ic-footer-bottom,.ic-footer-credit-row{border-color:rgba(255,255,255,.09)!important}

@media(max-width:980px){.ic-site-header{inset:10px 10px auto!important}.intro,.media-fields,.archive,.search-cta,.search-page,.search-hub,.results-container,.year-hero,.catalog-bar,.project-catalog{width:min(100% - 22px,1320px)!important}.search-page,.search-hub,.year-hero{padding-top:108px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ------------------------- project detail template ------------------------ */
.layout-grid{
  width:min(1480px,100%)!important;
  min-height:100vh!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:340px minmax(0,1fr)!important;
  gap:0!important;
  background:#f4f5f8!important;
}
.sidebar-container{
  position:sticky!important;top:0!important;height:100vh!important;
  padding:24px 18px!important;
  background:#171923!important;
  border:0!important;
  overflow-y:auto!important;
}
.brand-card{
  padding:0 0 20px!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.09)!important;
  background:transparent!important;box-shadow:none!important;
}
.back-link{display:inline-flex!important;align-items:center!important;gap:8px!important;margin-bottom:18px!important;color:#9da1b3!important;font-size:.82rem!important;font-weight:720!important;text-decoration:none!important}
.back-link:hover{color:#fff!important;transform:translateX(-2px)!important}
.project-poster{width:100%!important;max-height:360px!important;object-fit:cover!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 18px 45px rgba(0,0,0,.22)!important}
.project-department{margin:18px 0 8px!important;color:#81869a!important;font-size:.68rem!important;font-weight:850!important;letter-spacing:.13em!important}
.project-meta-badge{display:inline-flex!important;align-items:center!important;margin:0 0 10px!important;padding:6px 9px!important;border:1px solid rgba(151,152,255,.25)!important;border-radius:999px!important;background:rgba(91,92,240,.16)!important;color:#bfc0ff!important;font-size:.76rem!important;font-weight:800!important}
.project-title{margin:0!important;color:#fff!important;font-size:1.55rem!important;line-height:1.35!important;letter-spacing:-.04em!important}
.nav-menu{padding:18px 0 8px!important}
.nav-label{margin:0 8px 8px!important;color:#666b7e!important;font-size:.67rem!important;font-weight:850!important;letter-spacing:.13em!important}
.year-nav-label{margin-top:22px!important}
.nav-link{display:flex!important;align-items:center!important;gap:10px!important;min-height:42px!important;margin:3px 0!important;padding:10px 11px!important;border:1px solid transparent!important;border-radius:11px!important;background:transparent!important;color:#b6b9c8!important;font-size:.87rem!important;font-weight:680!important;text-decoration:none!important}
.nav-link i{width:18px!important;color:#74798e!important;text-align:center!important}
.nav-link:hover{background:rgba(255,255,255,.055)!important;color:#fff!important}
.nav-link.active{border-color:rgba(139,140,255,.16)!important;background:linear-gradient(90deg,rgba(91,92,240,.25),rgba(91,92,240,.08))!important;color:#fff!important;box-shadow:inset 3px 0 0 #8b8cff!important}
.nav-link.active i{color:#aeb0ff!important}
.year-switch{width:100%!important;min-height:43px!important;padding:9px 12px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:11px!important;background:#222532!important;color:#d9dbe5!important;outline:0!important}
.year-switch:focus{border-color:#7778ff!important;box-shadow:0 0 0 4px rgba(91,92,240,.18)!important}
.content-container{min-width:0!important;padding:52px clamp(22px,5vw,72px) 48px!important;background:
  radial-gradient(circle at 100% 0,rgba(91,92,240,.055),transparent 25rem),#f4f5f8!important}
.archive-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;margin:0 0 22px!important;padding:0!important;border:0!important;background:transparent!important}
.archive-heading span{color:#8d91a0!important;font-size:.7rem!important;font-weight:850!important;letter-spacing:.14em!important}
.archive-heading strong{color:#171923!important;font-size:.92rem!important;font-weight:800!important}
.content-card{position:relative!important;margin:0 0 18px!important;padding:28px!important;border:1px solid var(--site-line)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 8px 28px rgba(23,25,35,.055)!important;overflow:hidden!important}
.content-card::after{display:none!important}
.section-header{display:flex!important;align-items:center!important;gap:12px!important;margin:0 0 22px!important;padding:0 0 16px!important;border-bottom:1px solid #eceef3!important}
.section-icon{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;flex:0 0 42px!important;border-radius:13px!important;background:#eeefff!important;color:#5b5cf0!important;font-size:1rem!important}
.section-title{margin:0!important;color:#171923!important;font-size:1.22rem!important;letter-spacing:-.03em!important}
.user-content{color:#454957!important;font-size:1rem!important;line-height:1.85!important}
.user-content h3{margin:0 0 13px!important;color:#171923!important;font-size:1.08rem!important}
.user-content img{max-width:100%!important;height:auto!important;border-radius:14px!important}
.content-divider{margin:24px 0!important;border:0!important;border-top:1px solid #eceef3!important}
.file-group-title{display:flex!important;align-items:center!important;gap:10px!important;margin:26px 0 12px!important;color:#444856!important;font-size:.95rem!important}
.file-group-title span{width:30px!important;height:30px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:#171923!important;color:#fff!important;font-size:.74rem!important;font-weight:850!important}
.file-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.file-card{min-width:0!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) 34px!important;align-items:center!important;gap:11px!important;padding:12px!important;border:1px solid #e5e7ef!important;border-radius:15px!important;background:#fafafe!important;color:#3f4351!important;text-decoration:none!important;box-shadow:none!important}
.file-card:hover{border-color:#c9cbe2!important;background:#fff!important;box-shadow:0 10px 25px rgba(23,25,35,.07)!important;transform:translateY(-2px)!important}
.file-type-icon{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;border-radius:12px!important;background:#eeefff!important;color:#5b5cf0!important;font-size:1.05rem!important}
.file-type-icon.type-pdf{background:#fff0f0!important;color:#d95757!important}.file-type-icon.type-doc{background:#edf4ff!important;color:#3d73d8!important}.file-type-icon.type-ppt{background:#fff4e9!important;color:#d87537!important}
.file-name{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#282b37!important;font-size:.88rem!important;font-weight:760!important}
.file-tag{display:inline-block!important;margin-top:3px!important;color:#888c9a!important;font-size:.74rem!important}
.download-action{width:32px!important;height:32px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:#fff!important;color:#737787!important}
.empty-note,.empty-content{padding:24px!important;border:1px dashed #d8dae4!important;border-radius:14px!important;background:#fafafe!important;color:#858997!important;text-align:center!important}
.contact-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.form-group.full{grid-column:1 / -1!important}
.form-input{width:100%!important;min-height:50px!important;padding:12px 14px!important;border:1px solid #d9dce5!important;border-radius:13px!important;background:#fff!important;color:#171923!important;box-shadow:none!important;outline:0!important}
textarea.form-input{min-height:130px!important;resize:vertical!important}
.form-input:focus{border-color:#8586f5!important;box-shadow:0 0 0 4px rgba(91,92,240,.12)!important}
.btn-send{min-height:50px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;padding:11px 17px!important;border:0!important;border-radius:12px!important;background:#171923!important;color:#fff!important;font-weight:800!important;cursor:pointer!important}
.btn-send:hover{background:#303341!important;transform:translateY(-1px)!important}
.project-footer{display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;gap:10px!important;margin-top:30px!important;padding:20px 2px 0!important;border-top:1px solid #dfe1e8!important;color:#9296a3!important;font-size:.74rem!important}
.mobile-header{display:none!important}

@media(max-width:980px){
  .layout-grid{display:block!important;min-height:auto!important}
  .sidebar-container{position:relative!important;height:auto!important;padding:18px!important}
  .brand-card{display:grid!important;grid-template-columns:120px minmax(0,1fr)!important;column-gap:16px!important;align-items:start!important}
  .back-link{grid-column:1 / -1!important;margin-bottom:12px!important}
  .project-poster{grid-row:2 / span 4!important;max-height:180px!important}
  .project-department,.project-meta-badge,.project-title{grid-column:2!important}
  .project-department{margin-top:2px!important}
  .nav-menu{display:flex!important;align-items:center!important;gap:5px!important;overflow-x:auto!important;padding:12px 0 0!important}
  .nav-label{display:none!important}
  .nav-link{flex:0 0 auto!important;margin:0!important}
  .nav-menu > div[style]{min-width:180px!important;flex:0 0 180px!important}
  .content-container{padding:24px 16px 38px!important}
}
@media(max-width:640px){
  .brand-card{grid-template-columns:92px minmax(0,1fr)!important}
  .project-title{font-size:1.18rem!important}
  .project-poster{max-height:150px!important}
  .archive-heading{align-items:flex-start!important;flex-direction:column!important}
  .content-card{padding:20px 16px!important;border-radius:18px!important}
  .file-grid,.contact-grid{grid-template-columns:1fr!important}
  .form-group.full{grid-column:auto!important}
  .file-card{grid-template-columns:40px minmax(0,1fr) 32px!important}
  .project-footer{flex-direction:column!important}
}

/* ========================================================================== 
   INFOCOM PUBLIC ARCHIVE · revision 2 · Department visual language
   Uses the Information Communication mark colors and a film/storyboard motif.
   ========================================================================== */
:root{
  --site-ink:#12213d;
  --site-text:#304158;
  --site-muted:#65748b;
  --site-canvas:#f3f6fb;
  --site-paper:#fff;
  --site-line:#dce5f0;
  --site-brand:#224fa1;
  --site-brand2:#13a7b7;
  --site-coral:#e76069;
  --site-yellow:#f4b320;
  --site-shadow:0 16px 44px rgba(25,49,88,.10);
}
html{font-size:17px!important}
body{
  font-size:1rem!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(244,179,32,.11),transparent 20rem),
    radial-gradient(circle at 7% 2%,rgba(34,79,161,.09),transparent 25rem),
    linear-gradient(rgba(34,79,161,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,79,161,.018) 1px,transparent 1px),
    var(--site-canvas)!important;
  background-size:auto,auto,34px 34px,34px 34px,auto!important;
}
.ic-header-shell{min-height:74px!important;border-color:#dce5f0!important;box-shadow:0 12px 34px rgba(25,49,88,.11)!important}
.ic-brand-mark{
  background:#fff url('/web/ic.png') center/contain no-repeat!important;
  border:1px solid #dfe7f2!important;box-shadow:0 5px 15px rgba(34,79,161,.10)!important;
}
.ic-brand-mark::before,.ic-brand-mark::after{display:none!important}
.ic-brand-copy strong{font-size:1rem!important;color:#142744!important}
.ic-brand-copy small{font-size:.73rem!important;color:#75859c!important}
.ic-nav-link{font-size:.94rem!important;color:#3f5068!important}
.ic-nav-link:hover,.ic-nav-link.is-active{background:#224fa1!important;color:#fff!important}
.ic-nav-link.ic-admin-link{background:#102a59!important;color:#fff!important}
.ic-nav-link.ic-admin-link:hover{background:#224fa1!important}
.eyebrow,.hero-edition,.hero-index,.year-kicker,.hub-kicker,.search-kicker,.ic-footer-kicker{color:var(--site-brand)!important}
.hero{background:#102a59!important}
.slide-overlay{background:linear-gradient(90deg,rgba(8,28,67,.88),rgba(15,46,94,.56) 55%,rgba(15,46,94,.24))!important}
.slide-copy h1,.slide-copy h2{font-size:clamp(2.5rem,5vw,5.3rem)!important}
.ticker{background:linear-gradient(90deg,#224fa1 0 78%,#f4b320 78% 100%)!important}
.media-field i{color:#224fa1!important}
.media-field:hover,.year-card:hover,.project-card:hover,.quick-link:hover,.result-card:hover{border-color:#aebfda!important}
.search-cta,.year-heading{background:linear-gradient(125deg,#102a59,#224fa1)!important}
.search-cta::after,.year-heading::after{content:"";position:absolute;inset:auto 0 0;height:5px;background:linear-gradient(90deg,#f4b320 0 22%,rgba(255,255,255,.4) 22% 23%,transparent 23% 77%,#13a7b7 77% 91%,transparent 91%)}
.search-submit,.search-btn{background:#224fa1!important}.search-submit:hover,.search-btn:hover{background:#173d84!important}
.go-btn,.modal-link{background:#224fa1!important}
.pagination .page-link.active{background:#224fa1!important;border-color:#224fa1!important}
.ic-site-footer{background:#102a59!important}
.ic-footer-accent{background:linear-gradient(90deg,#224fa1 0 55%,#f4b320 55% 72%,#13a7b7 72% 100%)!important}
.sidebar-container{background:linear-gradient(170deg,#102a59,#173a73 68%,#0d2450)!important;border-left:4px solid #f4b320!important}
.project-meta-badge{background:rgba(244,179,32,.13)!important;border-color:rgba(244,179,32,.30)!important;color:#ffdf8a!important}
.nav-link.active{background:#fff!important;color:#17315d!important;border-color:#fff!important;box-shadow:none!important}
.nav-link.active i{color:#224fa1!important}
.section-icon,.file-type-icon{background:#eef4ff!important;color:#224fa1!important}
.form-input:focus{border-color:#224fa1!important;box-shadow:0 0 0 4px rgba(34,79,161,.13)!important}
.btn-send{background:#224fa1!important}.btn-send:hover{background:#173d84!important}
@media(max-width:820px){html{font-size:16px!important}}


/* V9 · Chromium-friendly project detail overrides */
html{scroll-behavior:auto!important}
body.project-detail-page{
  background:#f4f7fb!important;
  background-image:none!important;
}
body.project-detail-page::before{display:none!important}
body.project-detail-page a{transition:color .16s ease,background-color .16s ease,border-color .16s ease!important}
body.project-detail-page .sidebar-container{box-shadow:none!important}
body.project-detail-page .content-card,
body.project-detail-page .file-card,
body.project-detail-page .project-poster{box-shadow:none!important;filter:none!important}
body.project-detail-page .mobile-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

body.project-detail-page .sidebar-container{position:relative!important;top:auto!important;height:auto!important}