/* chrome.css
   Header, primary navigation, language switch, footer, admin bar.
   ------------------------------------------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.hdr::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--c-red) 0 22%, transparent 22%);
}

.hdr-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  height: 62px; display: flex; align-items: center; gap: 22px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }

.brand-mark {
  font-weight: 800; font-size: 22px; letter-spacing: -.045em;
  color: var(--c-red); line-height: 1;
}

.brand-div { width: 1px; height: 22px; background: var(--line-2); }

.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }

.brand-txt b { font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; }

.brand-txt span { font-size: 10.5px; color: var(--ink-3); letter-spacing: .015em; }

.nav { display: flex; gap: 2px; margin-left: 8px; }

.nav button {
  background: none; border: 0; cursor: pointer;
  padding: 8px 13px; border-radius: var(--r-m);
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}

.nav button:hover { background: var(--bg-3); color: var(--ink); }

.nav button[aria-current="page"] { color: var(--ink); font-weight: 650; background: var(--bg-3); }

.hdr-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.seg {
  display: flex; background: var(--bg-3); border-radius: var(--r-m);
  padding: 2px; border: 1px solid var(--line);
}

.seg button {
  background: none; border: 0; cursor: pointer;
  padding: 5px 11px; border-radius: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--ink-3);
  transition: all .16s var(--ease);
}

.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.ftr { border-top: 1px solid var(--line); background: var(--bg-2); padding: 34px 0; margin-top: 20px; }

.ftr-in { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 34px; align-items: start; }

.ftr p { font-size: 12.5px; color: var(--ink-3); line-height: 1.65; max-width: 84ch; margin: 0; }

.ftr-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.ftr-brand .brand-mark { font-size: 18px; }

.ftr-brand span { font-size: 11.5px; color: var(--ink-3); }

.ftr-r { text-align: right; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.ftr-r #lockSite { display: block; margin-top: 8px; margin-left: auto; }

@media (max-width: 860px) {
  .ftr-in { grid-template-columns: minmax(0,1fr); }
  .ftr-r { text-align: left; }
}

@media (max-width: 660px) {
  .hdr-in { height: 56px; gap: 10px; }
  .brand, .hdr-r { min-width: 0; }
  .nav { display: none; }
  .nav.m-open {
      display: flex; position: absolute; top: 56px; left: 0; right: 0; margin: 0;
      flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line);
      padding: 8px; gap: 2px; box-shadow: var(--shadow-2); z-index: 70;
  }
  .nav.m-open button { width: 100%; text-align: left; padding: 12px 14px; }
  .m-toggle { display: grid !important; }
  .brand-txt span { display: none; }
}

@media (max-width: 420px) {
  .hdr-in { padding: 0 14px; gap: 8px; }
  .brand { gap: 8px; }
  .brand-mark { font-size: 20px; }
  .brand-txt b { font-size: 13px; }
  .hdr-r { gap: 6px; }
  .seg button { padding: 4px 8px; font-size: 11.5px; }
}

.m-toggle { display: none; }

@media print {
  .hdr, .side, .rail, .ftr, .dhead-cta { display: none !important; }
}

.adm-bar {
  position: sticky; top: 62px; z-index: 55;
  background: var(--bar-bg); color: var(--on-brand);
  border-bottom: 1px solid var(--bar-line);
}

.adm-bar-in {
  display: flex; align-items: center; gap: 16px; padding-top: 9px; padding-bottom: 9px;
  flex-wrap: wrap;
}

.adm-bar .btn { background: var(--on-brand); color: var(--bar-bg); border-color: var(--on-brand); }

.adm-bar .btn.ghost { background: transparent; color: var(--on-brand); border-color: var(--on-brand-soft); }

.adm-bar .btn.ghost:hover { border-color: var(--on-brand); }

@media (max-width: 860px) {
  .adm-bar { top: 56px; }
}

@media (max-width: 660px) {
  .adm-bar-in { gap: 10px; }
  .adm-bar .btn { flex: 1; justify-content: center; }
}