/* ============================================================================
   bar.css … 上の帯・下の帯・右から出る引き出し。3 つの入口（support / rooms / account）で同じ物。
             担当: Shared。読み込むのは SiteHtmlFrame.cs。色は frame.css の --sp-* / --hc-*。

   上の帯   高さ 80px の紺（--hc-bar）。左に印、メニュー（13px・太さ 600・字間 .08em）、右に言語とログイン。
            今いるページの印は付けない（aria-current だけ）。押せる物の後ろに角 6.4px の薄い枠。
            1023px 以下はメニューのボタン 1 つ（JS あり: 右から引き出し / JS なし: <details> で帯の下に）。
   下の帯   暗い紺（--hc-foot）。印・©・お断り・Discord と、「このサイトについて」「作品」「言語」の列。
   引き出し <dialog class="hc-drawer">。右から 400px（スマホは幅いっぱい）。開くのは bar.js だけ。
            2026-10-01 から明るい地に紺の字、左の縁に金の線、題の下に縫い目の点線、題の前に小さな星
            （暗い表示では紺の地。色は --hc-* が切り替える）。スマホのメニュー（.hc-mnav）も同じ色。

   赤は使わない。字は端末の字だけ（frame.css の --font-*）。
   ========================================================================== */

/* ---- 土台（どのページでも使う小さな部品） ---------------------------------- */

.hc .i {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hc-container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: max(var(--hc-gut), env(safe-area-inset-left, 0px)) max(var(--hc-gut), env(safe-area-inset-right, 0px));
}

/* ヘルプセンターのページは白い地（暗い表示では紺） */
body.hc-full {
  background: var(--hc-bg);
  color: var(--hc-ink);
}

/* 日本語の折り返し */
:lang(ja) {
  line-break: strict;
}

/* ---- 上の帯 ----------------------------------------------------------------- */

.hc-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 36px;
  padding-left: max(36px, env(safe-area-inset-left, 0px));
  padding-right: max(36px, env(safe-area-inset-right, 0px));
  background: var(--hc-bar);
  border-bottom: 2px solid rgba(255, 255, 255, .04);
  color: var(--hc-on-dark);
  font-family: var(--font);
  letter-spacing: normal;
  line-height: 1.5;
  --hc-focus: var(--hc-gold);
}

.hc-bar a,
.hc-foot a,
.hc-drawer a {
  text-decoration: none;
}

.hc-bar :focus-visible,
.hc-foot :focus-visible {
  outline: 2px solid var(--hc-gold);
  outline-offset: 2px;
}

/* 引き出しとスマホのメニューは明るい地なので、字の色（紺。暗い表示では白に近い色）の枠 */
.hc-drawer :focus-visible,
.hc-mnav :focus-visible {
  outline: 2px solid var(--hc-focus);
  outline-offset: 2px;
}

.hc-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin-right: 12px;
  padding-right: 4px;
  color: #F4F2EA;
  flex: none;
  border-radius: 6.4px;
}

.hc-logo {
  width: 26px;
  height: 26px;
  flex: none;
}

.hc-word {
  font: 900 14px/1 var(--font-display);
  letter-spacing: .01em;
}

.hc-nav {
  display: flex;
  align-items: center;
  height: 80px;
  min-width: 0;
}

.nv {
  position: relative;
  display: flex;
  align-items: center;
  height: 66px;
}

.nv > a,
.nv > button {
  display: flex;
  align-items: center;
  height: 66px;
  padding: 0;
  border: 0;
  background: none;
  color: #F4F2EA;
  font: inherit;
  cursor: pointer;
}

.nv > a:focus-visible,
.nv > button:focus-visible {
  outline: none;
}

.nv > a:focus-visible .lb,
.nv > button:focus-visible {
  outline: 2px solid var(--hc-gold);
  outline-offset: 2px;
}

.lb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7.5px 16px;
  border-radius: 6.4px;
  font: 600 13px/17px var(--font);
  letter-spacing: .08em;
  white-space: nowrap;
  transition: background-color 1s var(--hc-e-nav), color 1s var(--hc-e-nav);
}

:root[lang="en"] .lb {
  text-transform: uppercase;
}

.nv:hover .lb,
.nv.open .lb {
  background: rgba(169, 174, 211, .22);
  color: #FFFFFF;
}

.tri {
  width: 10px;
  height: 5px;
  fill: #8F94BE;
}

/* 折りたたみの板（ヘルプ ▾・製品 ▾・言語 ▾）。JS が無くても :hover と :focus-within で開く */
.hc-dd {
  position: absolute;
  top: 62px;
  left: 0;
  z-index: 5;
  min-width: 200px;
  padding: 6px 0;
  background: var(--sp-800);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--hc-e-nav), visibility 0s linear .5s;
}

.hc-dd-r {
  left: auto;
  right: 0;
  min-width: 160px;
}

.nv:hover .hc-dd,
.nv:focus-within .hc-dd,
.nv.open .hc-dd {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s var(--hc-e-nav), visibility 0s;
}

/* JS で閉じた時（Esc）は、:hover / :focus-within でも出さない */
.nv.shut .hc-dd {
  opacity: 0;
  visibility: hidden;
}

.hc-dd a {
  display: block;
  width: calc(100% - 32px);
  margin: 5px 16px;
  padding: 6px 10px;
  border-radius: 6.4px;
  font: 500 13px/18px var(--font);
  color: #C3C8E4;
  white-space: nowrap;
  transition: background-color 1s var(--hc-e-nav), color 1s var(--hc-e-nav);
}

.hc-dd a:hover {
  background: rgba(169, 174, 211, .22);
  color: #FFFFFF;
}

.hc-dd a[aria-current="true"] {
  color: var(--hc-gold);
}

.hc-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-left: auto;
  padding-left: 16px;
}

.nv-lang {
  height: 48px;
}

.hc-globe {
  display: grid !important;
  place-items: center;
  width: 32px;
  height: 32px !important;
  border-radius: 6.4px;
  transition: background-color 1s var(--hc-e-nav);
}

.hc-globe .i {
  width: 16px;
  height: 16px;
}

.nv-lang:hover .hc-globe,
.nv-lang.open .hc-globe {
  background: rgba(169, 174, 211, .22);
}

.nv-lang .hc-dd {
  top: 44px;
}

.hc-signin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  height: 32px;
  padding: 0 16px;
  border-radius: 6.4px;
  background: rgba(169, 174, 211, .18);
  color: #F4F2EA;
  font: 600 13px/32px var(--font);
  letter-spacing: .08em;
  white-space: nowrap;
  transition: background-color .2s;
}

:root[lang="en"] .hc-signin:not(.is-me) {
  text-transform: uppercase;
}

.hc-signin:hover {
  background: rgba(169, 174, 211, .3);
}

.hc-signin .i {
  width: 18px;
  height: 18px;
}

.hc-signin span {
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .02em;
}

/* スマホのメニューのボタン（JS あり）と、JS 無しの <details> */
.hc-menu-btn,
.hc-menu-sum {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(169, 174, 211, .18);
  color: #F4F2EA;
  cursor: pointer;
  list-style: none;
}

.hc-menu-sum::-webkit-details-marker {
  display: none;
}

.hc-menu {
  display: none;
}

.hc-menu-sum {
  display: grid;
}

.hc-menu > .hc-mnav {
  --hc-focus: var(--hc-ink);
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 8px 0 16px;
  border-top: 3px solid var(--hc-gold);
  background: var(--hc-bg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.hc-mnav .mrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px dashed var(--hc-s3);
  font: 600 15px/20px var(--font);
  letter-spacing: .04em;
  color: var(--hc-ink);
}

:root[lang="en"] .hc-mnav .mrow {
  text-transform: uppercase;
}

.hc-mnav .mrow:hover {
  background: var(--hc-s1);
}

.hc-mnav .mrow .i {
  width: 20px;
  height: 20px;
  color: var(--hc-ink-2);
  transition: transform .15s, color .15s;
}

.hc-mnav .mrow:hover .i {
  color: var(--hc-ink);
  transform: translateX(2px);
}

.mlangs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 24px 0;
}

.mlangs a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--hc-s3);
  border-radius: 8px;
  background: var(--hc-s1);
  color: var(--hc-ink);
  font: 600 14px/20px var(--font);
}

.mlangs a[aria-current="true"] {
  border-color: var(--hc-gold);
  background: var(--hc-gold);
  color: var(--hc-gold-ink);
}

@media (max-width: 1199px) {
  .hc-bar {
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 1023px) {
  .hc-nav,
  .hc-signin {
    display: none;
  }

  .hc-menu {
    display: block;
  }

  /* JS がある時は <details> を使わず、右から出る引き出しにする */
  .hc-js .hc-menu {
    display: none;
  }

  .hc-js .hc-menu-btn {
    display: grid;
  }
}

@media (max-width: 599px) {
  .hc-bar {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 479px) {
  .hc-word {
    display: none;
  }
}

/* ---- 右から出る引き出し（<dialog>） ------------------------------------------ */

.hc-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 100vw);
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  border-left: 5px solid var(--hc-gold);
  background: var(--hc-bg);
  color: var(--hc-ink);
  --hc-focus: var(--hc-ink);
  font-family: var(--font);
  box-shadow: -8px 0 24px rgba(8, 10, 34, .25);
  overflow-y: auto;
}

.hc-drawer[open] {
  animation: hc-slide .2s var(--hc-e-std);
}

@keyframes hc-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.hc-drawer::backdrop {
  background: rgba(8, 10, 34, .5);
}

.hc-drawer .hc-mnav {
  margin: 0 -24px;
}

.hc-drawer-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px dashed var(--hc-frame);
}

.hc-drawer-h h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 24px/32px var(--font);
  letter-spacing: -.02em;
  color: var(--hc-ink);
}

.hc-drawer-h .dstar {
  width: 22px;
  height: 22px;
  color: var(--hc-gold);
}

.hc-x {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--hc-s2);
  color: var(--hc-ink);
  cursor: pointer;
}

.hc-x:hover {
  background: var(--hc-s3);
}

.hc-x .i {
  width: 20px;
  height: 20px;
}

/* 引き出しの中の小見出しと行（ページ側の引き出し: サーバーの状況・困ったとき・名前） */
.hc-drawer .dsub {
  margin: 20px 0 8px;
  font: 600 14px/20px var(--font);
  color: var(--hc-ink-2);
}

.hc-drawer .drows {
  display: grid;
  gap: 8px;
}

.hc-drawer .drow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--hc-s3);
  border-radius: 8px;
  background: var(--hc-s1);
  color: var(--hc-ink);
  font: 500 16px/24px var(--font);
  transition: border-color .15s;
}

.hc-drawer a.drow:hover {
  border-color: var(--hc-gold);
}

.hc-drawer .drow .i {
  color: var(--hc-ink-2);
}

.hc-drawer .drow .arr {
  margin-left: auto;
  color: var(--hc-ink-2);
}

.hc-drawer .drow .st {
  margin-left: auto;
  font: 500 14px/20px var(--font);
  color: var(--hc-ink-2);
}

.hc-drawer .dme {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
  font: 700 18px/26px var(--font);
  color: var(--hc-ink);
  overflow-wrap: anywhere;
}

.hc-drawer .dfoot {
  margin-top: 24px;
}

/* ---- 下の帯 ----------------------------------------------------------------- */

.hc-foot {
  margin-top: auto;
  padding-block: 32px max(32px, env(safe-area-inset-bottom, 0px));
  background: var(--hc-foot);
  color: var(--hc-on-dark);
  font-family: var(--font);
  letter-spacing: normal;
  --hc-focus: var(--hc-gold);
}

.hc-foot-in {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 32px 112px;
}

.hc-foot-l {
  display: grid;
  align-content: start;
  gap: 12px;
  width: 425px;
  max-width: 100%;
}

.hc-foot-l p {
  margin: 0;
  font: 500 14px/22px var(--font);
  color: #E3E6F1;
}

.hc-foot-l p.fine {
  font: 400 13px/20px var(--font);
  color: var(--sp-300);
}

.hc-foot .fbrand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}

.hc-foot .fmark {
  width: 32px;
  height: 32px;
}

.hc-foot .fbrand span {
  font: 900 16px/1 var(--font-display);
  letter-spacing: .01em;
  color: var(--hc-on-dark);
  white-space: nowrap;
}

.soc {
  display: flex;
  gap: 8px;
}

.soc a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(169, 174, 211, .14);
  color: var(--hc-on-dark);
  transition: background-color .2s;
}

.soc a:hover {
  background: rgba(169, 174, 211, .28);
}

.soc .i {
  width: 20px;
  height: 20px;
}

.fcols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
}

.fcol h2 {
  margin: 0 0 12px;
  font: 600 14px/20px var(--font);
  letter-spacing: normal;
  color: var(--hc-on-dark);
}

.fcol a {
  display: block;
  margin-bottom: 8px;
  font: 400 14px/17.5px var(--font);
  color: var(--sp-300);
  transition: color .2s;
}

.fcol:first-child a:first-of-type {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fcol a:hover {
  color: var(--hc-on-dark);
}

.fcol a[aria-current="true"] {
  color: var(--hc-gold);
}

@media (max-width: 599px) {
  /* 左の塊の 425px が、せまい画面で横にはみ出さないように（1 列に縮める） */
  .hc-foot-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hc-foot-l {
    width: auto;
  }

  .fcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* 動きを減らす設定の人 */
@media (prefers-reduced-motion: reduce) {
  .hc-drawer[open] {
    animation: none;
  }
}