/* Shared CUTD page layout. Page-specific rules belong in a separate stylesheet. */
/* IBM Plex Sans / IBM Plex Mono are embedded as @font-face data URIs in each page's <head>
   (SIL OFL 1.1, see IBM-PLEX-OFL.txt). */

:root {
  --cutd-content-width: 1280px;
  --cutd-page-gutter: 42px;
  --cutd-font-body: "IBM Plex Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, Helvetica, Arial, sans-serif;
  --cutd-font-heading: var(--cutd-font-body);
  --cutd-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --cutd-color-blue: #88c6ed;
  --cutd-color-blue-light: #d0e7f5;
  --cutd-color-cyan: #78c7d2;
  --cutd-color-teal: #39c5bb;
  --cutd-color-ink: #204b62;
  --cutd-color-link: #17687a;
  --cutd-color-surface: #eff7fc;
  --cutd-color-muted: #466371;
}

* { box-sizing: border-box; }
html { font-size: 10px; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: #fff;
  color: #1c1b19;
  font: 14px/1.5 var(--cutd-font-body);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cutd-color-link);
  outline-offset: 4px;
}

/* Empty pages still place the footer at the bottom of the viewport. */
.page-content {
  flex: 1;
  width: 100%;
  max-width: var(--cutd-content-width);
  margin: 0 auto;
  padding: 32px var(--cutd-page-gutter) 22px;
}

/* Full-width, 60px CUTD brand bar below the 40px DDBJ navigation. */
.cutd-bar {
  flex-shrink: 0;
  height: 60px;
  background: var(--cutd-color-blue-light);
}
.cutd-bar-inner { display: flex; align-items: center; gap: 36px; width: 100%; height: 100%; padding: 0 26px; }
.cutd-brand { display: inline-flex; align-items: center; gap: 16px; min-width: 0; color: var(--cutd-color-ink); line-height: 1.3; }
.cutd-brand:hover { color: var(--cutd-color-link); }
.cutd-logo-placeholder { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 2px; background: var(--cutd-color-blue); font-size: 12px; font-weight: 600; }
.cutd-brand-text { min-width: 0; }
.cutd-brand-text strong { font-family: var(--cutd-font-heading); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.cutd-brand-divider { padding-inline: 8px; color: #5a9eae; }
.cutd-brand-description { white-space: nowrap; }
.cutd-navigation { flex-shrink: 0; width: 100%; background: var(--cutd-color-surface); }
.cutd-navigation-container { width: 100%; max-width: var(--cutd-content-width); margin: 0 auto; padding-inline: var(--cutd-page-gutter); }
.cutd-navigation-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 6px; width: 100%; }
.cutd-navigation-inner > a, .cutd-navigation-inner > span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-width: 0; min-height: 52px; padding: 0 18px; border: 0; border-radius: 4px; color: var(--cutd-color-ink); font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.cutd-navigation-icon { display: block; flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cutd-navigation-inner > a:hover { color: var(--cutd-color-link); background: var(--cutd-color-blue-light); }
.cutd-navigation-inner > a:focus-visible { outline-offset: -4px; }
.cutd-navigation-inner > a[aria-current="page"] { color: var(--cutd-color-ink); background: var(--cutd-color-cyan); font-weight: 600; }
.cutd-navigation-inner > span[aria-disabled="true"] { color: var(--cutd-color-muted); cursor: default; }
.cutd-menu-toggle { display: none; align-items: center; gap: 9px; min-height: 52px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--cutd-color-ink); font: 600 14px/1.3 var(--cutd-font-body); cursor: pointer; }
.cutd-menu-toggle[hidden] { display: none; }
.cutd-menu-toggle svg { display: block; flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cutd-menu-toggle:hover, .cutd-menu-toggle[aria-expanded="true"] { color: var(--cutd-color-link); background: var(--cutd-color-blue-light); }
.cutd-menu-toggle:focus-visible { outline-offset: -4px; }

@media (min-width: 641px) and (max-width: 1179px) {
  .cutd-navigation-inner { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px 12px; padding-block: 6px; }
  .cutd-navigation-inner > a, .cutd-navigation-inner > span { min-height: 48px; padding-inline: 10px; }
}
@media (max-width: 640px) {
  .cutd-menu-toggle { display: flex; width: 100%; }
  .cutd-navigation-inner { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 12px; padding-block: 6px 12px; }
  .cutd-navigation-inner > a, .cutd-navigation-inner > span { justify-content: flex-start; min-height: 48px; padding-inline: 12px; }
  .cutd-navigation.is-enhanced:not(.is-open) .cutd-navigation-inner { display: none; }
  .cutd-navigation.is-open .cutd-navigation-inner { padding-top: 10px; }
}

/* Centered footer information within two full-width background bands. */
.site-footer {
  flex-shrink: 0;
  width: 100%;
  background: #464543;
  color: #fff;
  font-size: 12px;
  line-height: 1.7;
}
.site-footer-inner, .footer-bottom-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  column-gap: 40px;
  align-items: center;
  width: 100%;
  max-width: var(--cutd-content-width);
  margin: 0 auto;
  padding-inline: var(--cutd-page-gutter);
}
.site-footer-inner { min-height: 72px; padding-block: 12px; }
.site-footer p { margin: 0; }
.site-footer a { color: #fff; text-underline-offset: 3px; }
.site-footer a:hover { color: #ffd194; text-decoration: underline; }
.site-footer a:focus-visible { outline-color: #ffd194; }
.footer-organization { display: flex; align-items: center; gap: 24px; min-width: 0; }
.footer-organization > div { min-width: 0; }
.footer-ddbj-logo { display: block; flex: 0 0 auto; line-height: 0; }
.footer-ddbj-logo img { display: block; width: auto; height: 48px; }
.footer-lab { font-size: 17px; font-weight: 600; letter-spacing: .1px; line-height: 1.35; }
.site-footer .footer-institution { margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.footer-bottom { background: #edecea; color: #292725; min-height: 50px; }
.footer-bottom-inner { min-height: 49px; padding-block: 1.5px; }
.footer-contact-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 18px; }
.footer-copyright { color: #625e58; font-size: 13px; font-weight: 400; }
.footer-email { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: #625e58; line-height: 1.7; white-space: nowrap; }
.footer-email svg { display: block; flex: 0 0 14px; width: 14px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.footer-license { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 14px; min-width: 0; max-width: 100%; }
.footer-license-badge { display: block; flex: 0 0 88px; line-height: 0; }
.footer-license-badge img { display: block; width: 88px; height: auto; }
.footer-license p { font-size: 11px; line-height: 1.6; color: #d4d0c9; text-align: right; }
.footer-license .footer-license-line { display: block; white-space: nowrap; }
.footer-nig-logo { --nig-logo-width: 210px; display: block; justify-self: end; width: var(--nig-logo-width); max-width: 100%; height: calc(var(--nig-logo-width) * 177 / 1142); overflow: hidden; margin-right: calc(var(--nig-logo-width) * -80 / 1142); line-height: 0; }
/* Hide only transparent vertical padding (original alpha bounds y=27..204).
   The visible mark stays the same size and the original PNG is unchanged. */
.footer-nig-logo img { display: block; width: 100%; height: auto; transform: translateY(calc(var(--nig-logo-width) * -27 / 1142)); }

@media (max-width: 1100px) {
  .site-footer-inner { grid-template-columns: 1fr; row-gap: 14px; }
  .footer-license { justify-self: stretch; width: 100%; }
}
@media (max-width: 760px) {
  :root { --cutd-page-gutter: 25px; }
  .page-content { padding-block: 25px 20px; }
  .site-footer-inner, .footer-bottom-inner { column-gap: 24px; }
  .site-footer-inner { padding-block: 12px; }
  .footer-license { gap: 12px; }
  .footer-organization { gap: 20px; }
  .cutd-bar-inner { padding-inline: 20px; gap: 0; }
  .cutd-brand { gap: 12px; }
  .cutd-brand-text strong { font-size: 14px; }
}
@media (max-width: 680px) {
  .site-footer-inner, .footer-bottom-inner { padding-inline: 20px; }
  .site-footer-inner { padding-block: 14px; }
  .footer-bottom-inner { grid-template-columns: 1fr; row-gap: 6px; padding-block: 4px; }
  .footer-nig-logo { --nig-logo-width: 180px; justify-self: start; margin-right: 0; margin-left: calc(var(--nig-logo-width) * -78 / 1142); }
}
@media (max-width: 560px) {
  .cutd-brand-text strong { display: block; font-size: 14px; line-height: 1.45; }
  .cutd-brand-divider { display: none; }
  .cutd-brand-description { display: block; font-size: 11px; white-space: normal; }
}
@media (max-width: 480px) {
  :root { --cutd-page-gutter: 20px; }
  .page-content { padding-block: 24px 20px; }
}
@media (max-width: 440px) {
  .footer-license p { font-size: 10px; }
  .footer-bottom-inner { grid-template-columns: 1fr; row-gap: 8px; }
  .footer-nig-logo { justify-self: start; margin-right: 0; margin-left: calc(var(--nig-logo-width) * -78 / 1142); }
  .footer-organization { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 360px) {
  .footer-license { gap: 10px; }
  .footer-license p { font-size: 9px; }
  .footer-license-badge { flex-basis: 64px; }
  .footer-license-badge img { width: 64px; }
}