/* VERIN C1 shared shell — candidate only. Content modules intentionally remain untouched. */
:root{
  --verin-shell-ink:#2A2927;
  --verin-shell-stone:#6F665E;
  --verin-shell-taupe:#9B9085;
  --verin-shell-bg:#F5F1EB;
  --verin-shell-paper:#FFFAF4;
  --verin-shell-line:rgba(42,41,39,.12);
  --verin-shell-ease:cubic-bezier(.22,1,.36,1);
  --taupe-gray:#9B9085;
}

body[data-verin-shell] .skip-link{
  position:fixed;
  left:18px;
  top:10px;
  z-index:220;
  padding:11px 16px;
  border:1px solid var(--verin-shell-ink);
  background:var(--verin-shell-paper);
  color:var(--verin-shell-ink);
  font-family:Pretendard,'Noto Sans TC','Source Han Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  font-size:14px;
  transform:translateY(-160%);
  transition:transform .2s ease;
}

body[data-verin-shell] .skip-link:focus{transform:translateY(0)}
body[data-verin-shell] [id="top"]:focus{outline:none}

body[data-verin-route="home"] .channel-note{
  max-width:660px;
  margin:28px auto 0;
  color:var(--verin-shell-stone);
  font-size:15px;
  line-height:1.9;
}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

body[data-verin-shell] .nav,
body[data-verin-shell] .footer,
body[data-verin-shell] .mobile-menu,
body[data-verin-shell] .back-to-top{
  font-family:Pretendard,'Noto Sans TC','Source Han Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
}

body[data-verin-shell] .nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:78px;
  padding:0 clamp(18px,5vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--verin-shell-ink);
  background:rgba(245,241,235,.78);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  transition:background .45s var(--verin-shell-ease),border-color .45s var(--verin-shell-ease);
}

body[data-verin-shell] .nav.scrolled,
body[data-verin-shell].mobile-nav-open .nav{
  background:rgba(245,241,235,.97);
  border-bottom:1px solid var(--verin-shell-line);
}

body[data-verin-shell] .brand{
  flex:0 0 auto;
  color:var(--verin-shell-ink);
  font-size:18px;
  font-weight:650;
  letter-spacing:.34em;
  line-height:1;
}

body[data-verin-shell] .nav-center,
body[data-verin-shell] .nav-right{
  display:flex;
  align-items:center;
  gap:26px;
  color:var(--verin-shell-ink);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* User-approved contact consolidation: keep direct contact and social links in
   the lower page areas instead of repeating Contact beside the language switch. */
body[data-verin-shell] .nav-contact{
  display:none;
}

body[data-verin-shell] .nav-right{
  flex:0 0 auto;
  margin-left:auto;
}

body[data-verin-shell] .nav-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

body[data-verin-shell] .nav-center a,
body[data-verin-shell] .nav-contact{
  color:rgba(42,41,39,.82);
  white-space:nowrap;
}

body[data-verin-shell] .lang{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  white-space:nowrap;
  color:var(--verin-shell-stone);
}

body[data-verin-shell] .lang button{
  min-width:0;
  min-height:28px;
  padding:0;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--verin-shell-stone);
  cursor:pointer;
  font:inherit;
  letter-spacing:.12em;
}

body[data-verin-shell] .lang button.active,
body[data-verin-shell] .lang button[aria-pressed="true"]{
  color:var(--verin-shell-ink);
  border-bottom-color:var(--verin-shell-ink);
}

body[data-verin-shell] .mobile-nav{
  display:none;
}

body[data-verin-shell] .mobile-nav-toggle{
  list-style:none;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--verin-shell-line);
  background:rgba(255,250,244,.48);
  color:var(--verin-shell-ink);
  cursor:pointer;
  display:grid;
  place-items:center;
}

body[data-verin-shell] .mobile-nav-toggle::-webkit-details-marker{display:none}
body[data-verin-shell] .mobile-nav-toggle::marker{content:""}

body[data-verin-shell] .mobile-nav-icon{
  position:relative;
  display:block;
  width:18px;
  height:12px;
}

body[data-verin-shell] .mobile-nav-icon i{
  position:absolute;
  left:0;
  width:18px;
  height:1px;
  background:currentColor;
  transition:transform .35s var(--verin-shell-ease),top .35s var(--verin-shell-ease);
}

body[data-verin-shell] .mobile-nav-icon i:first-child{top:2px}
body[data-verin-shell] .mobile-nav-icon i:last-child{top:9px}
body[data-verin-shell] .mobile-nav[open] .mobile-nav-icon i:first-child{top:6px;transform:rotate(45deg)}
body[data-verin-shell] .mobile-nav[open] .mobile-nav-icon i:last-child{top:6px;transform:rotate(-45deg)}

body[data-verin-shell] .mobile-menu{
  position:fixed;
  inset:66px 0 0;
  z-index:99;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:26px 18px max(42px,env(safe-area-inset-bottom));
  background:var(--verin-shell-bg);
  color:var(--verin-shell-ink);
  text-transform:none;
  letter-spacing:normal;
}

body[data-verin-shell] .mobile-menu-group{
  width:min(100%,620px);
  margin:0 auto;
  border-top:1px solid var(--verin-shell-line);
  padding:21px 0 28px;
}

body[data-verin-shell] .mobile-menu-label{
  display:block;
  margin-bottom:9px;
  color:var(--verin-shell-taupe);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

body[data-verin-shell] .nav-right .mobile-menu a{
  min-height:46px;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  color:var(--verin-shell-ink);
  border-bottom:1px solid rgba(42,41,39,.065);
  font-size:15px;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:none;
}

body[data-verin-shell] .mobile-menu a[aria-current="page"]::before{
  content:"";
  width:5px;
  height:5px;
  margin-right:10px;
  border-radius:50%;
  background:currentColor;
}

body[data-verin-shell] .mobile-menu a[data-external="true"]::after{
  content:"↗";
  color:var(--verin-shell-taupe);
  font-size:13px;
}

body[data-verin-shell].mobile-nav-open{
  overflow:hidden;
}

body[data-verin-shell] .footer{
  position:relative;
  padding:76px clamp(18px,5vw,72px) 90px;
  border-top:1px solid var(--verin-shell-line);
  background:transparent;
  color:var(--verin-shell-ink);
}

body[data-verin-shell] .footer-top{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:end;
}

body[data-verin-shell] .footer h2{
  margin:0 0 16px;
  color:var(--verin-shell-ink);
  font-family:Pretendard,'Noto Sans TC','Source Han Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  font-size:21px;
  font-weight:650;
  letter-spacing:.34em;
}

body[data-verin-shell] .footer p{
  margin:0;
  color:var(--verin-shell-stone);
  font-size:15px;
  font-weight:350;
  line-height:1.9;
}

body[data-verin-shell] .footer-social-block{text-align:right}
body[data-verin-shell] .footer-label{
  display:block;
  margin-bottom:14px;
  color:var(--verin-shell-stone);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

body[data-verin-shell] .footer-socials{
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

body[data-verin-shell] .social-link{
  width:42px;
  height:42px;
  border:1px solid var(--verin-shell-line);
  border-radius:999px;
  background:rgba(255,250,244,.42);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--verin-shell-ink);
  transition:transform .35s var(--verin-shell-ease),background .35s var(--verin-shell-ease),color .35s var(--verin-shell-ease);
}

body[data-verin-shell] .social-link:hover{
  transform:translateY(-2px);
  background:var(--verin-shell-ink);
  color:var(--verin-shell-bg);
}

body[data-verin-shell] .social-link svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body[data-verin-shell] .social-link.line svg{fill:currentColor;stroke:none}
body[data-verin-shell] .social-mark{
  font-size:10px;
  font-weight:520;
  letter-spacing:.06em;
  text-transform:uppercase;
}

body[data-verin-shell] .footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:42px;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

body[data-verin-shell] .footer-links a{
  position:relative;
  padding-bottom:4px;
  color:var(--verin-shell-ink);
}

body[data-verin-shell] .footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--verin-shell-ease);
}

body[data-verin-shell] .footer-links a:hover::after,
body[data-verin-shell] .footer-links a[aria-current="page"]::after{
  transform:scaleX(1);
}

body[data-verin-shell] .footer-legal-line{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--verin-shell-line);
  color:var(--verin-shell-stone);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

body[data-verin-shell] .back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:80;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(42,41,39,.18);
  border-radius:0;
  background:rgba(245,241,235,.78);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--verin-shell-ink);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .35s var(--verin-shell-ease),transform .35s var(--verin-shell-ease),visibility .35s;
  display:flex;
  align-items:center;
  justify-content:center;
}

body[data-verin-shell] .back-to-top.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

body[data-verin-shell] .back-to-top svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body[data-verin-shell] :where(.nav,.footer,.mobile-menu,.back-to-top) :focus-visible,
body[data-verin-shell] .back-to-top:focus-visible{
  outline:2px solid var(--verin-shell-ink);
  outline-offset:4px;
}

@media(min-width:1440px){
  body[data-verin-shell] .footer > .footer-top,
  body[data-verin-shell] .footer > .footer-links,
  body[data-verin-shell] .footer > .footer-legal-line{
    width:min(100%,1560px);
    margin-left:auto;
    margin-right:auto;
  }
}

@media(max-width:1050px){
  body[data-verin-shell] .footer-top{grid-template-columns:1fr}
  body[data-verin-shell] .footer-social-block{text-align:left}
  body[data-verin-shell] .footer-socials{justify-content:flex-start}
}

@media(max-width:700px){
  body[data-verin-shell] .nav{
    height:66px;
    padding:0 18px;
  }
  body[data-verin-shell] .nav-center,
  body[data-verin-shell] .nav-contact{
    display:none!important;
  }
  body[data-verin-shell] .nav-right{
    gap:14px;
  }
  body[data-verin-shell] .mobile-nav{
    display:block;
  }
  /* iOS/WebKit can treat a fixed child of the blurred fixed header as if the
     header were its viewport, collapsing the menu to a thin strip. Anchor the
     panel to the full-width header and give it an explicit dynamic height so
     every navigation group remains visible and scrollable. */
  body[data-verin-shell] .mobile-menu{
    position:absolute;
    top:66px;
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:calc(100vh - 66px);
    height:calc(100dvh - 66px);
    min-height:0;
    -webkit-overflow-scrolling:touch;
  }
  body[data-verin-shell] .footer{
    padding:64px 18px 84px;
  }
  body[data-verin-shell] .footer-links{
    gap:18px;
  }
  body[data-verin-shell].has-mobile-quiet-cta .back-to-top{
    bottom:96px;
  }
  body[data-verin-shell] .mobile-quiet-cta .mobile-quiet-actions a{
    min-height:44px!important;
  }
}

@media(hover:none),(pointer:coarse){
  body[data-verin-shell] .social-link:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  body[data-verin-shell] .nav,
  body[data-verin-shell] .mobile-nav-icon i,
  body[data-verin-shell] .social-link,
  body[data-verin-shell] .footer-links a::after,
  body[data-verin-shell] .back-to-top{
    transition:none!important;
    transform:none!important;
  }
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body[data-verin-shell] .nav,
  body[data-verin-shell] .back-to-top{background:rgba(245,241,235,.98)}
}