/* YOMOGI STEAM LAB shared navigation — 2026-08-13 */
body.ysl-shared-nav-enabled {
  padding-top: 70px !important;
  background: #fffdfa !important;
}

/* Keep the alternating article tone that was previously duplicated per blog. */
.article-container { background: transparent !important; }
.article-container > .section { padding: 68px 48px !important; margin: 0 -48px !important; }
.article-container > .section:nth-of-type(odd) { background: #fffdfa !important; }
.article-container > .section:nth-of-type(even) { background: #f6f2ea !important; }

.ysl-global-header,
.ysl-global-menu-button,
.ysl-global-drawer,
.ysl-global-actions,
.ysl-global-social { box-sizing: border-box; }

.ysl-global-header {
  position: fixed; z-index: 10020; top: 0; left: 0; right: 0; height: 70px;
  display: flex; align-items: center; padding: 0 104px 0 34px;
  border-bottom: 1px solid rgba(74,68,56,.1);
  background: rgba(250,248,243,.96); backdrop-filter: blur(12px);
}
.ysl-global-logo {
  color: #37342d; text-decoration: none; font: 13px/1 Arial,sans-serif;
  letter-spacing: .24em; white-space: nowrap;
}
.ysl-global-menu-button {
  position: fixed; z-index: 10040; top: 0; right: 0; width: 72px; height: 70px;
  border: 0; border-left: 1px solid rgba(74,68,56,.1);
  border-bottom: 1px solid rgba(74,68,56,.1); border-radius: 0 0 0 22px;
  background: rgba(255,253,250,.76); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 7px 22px rgba(56,48,37,.08); cursor: pointer;
}
.ysl-global-menu-button span,
.ysl-global-menu-button::before,
.ysl-global-menu-button::after {
  content: ""; position: absolute; left: 23px; width: 27px; height: 1px;
  background: #236d7d; transition: .25s;
}
.ysl-global-menu-button::before { top: 24px; }
.ysl-global-menu-button span { top: 34px; }
.ysl-global-menu-button::after { top: 44px; }
.ysl-global-menu-button[aria-expanded="true"]::before { top: 34px; transform: rotate(45deg); }
.ysl-global-menu-button[aria-expanded="true"] span { opacity: 0; }
.ysl-global-menu-button[aria-expanded="true"]::after { top: 34px; transform: rotate(-45deg); }

.ysl-global-drawer {
  position: fixed; z-index: 10030; inset: 0 0 0 auto; width: min(390px,100%);
  padding: 112px 50px 46px; background: rgba(248,245,239,.97);
  backdrop-filter: blur(18px); box-shadow: -18px 0 50px rgba(47,41,31,.12);
  transform: translateX(105%); transition: transform .35s ease;
}
.ysl-global-drawer.is-open { transform: translateX(0); }
.ysl-global-drawer small { font: 11px/1.5 Arial,sans-serif; letter-spacing: .24em; color: #7e796d; }
.ysl-global-drawer nav { margin-top: 30px; border-top: 1px solid rgba(74,68,56,.18); }
.ysl-global-drawer nav a {
  display: flex; justify-content: space-between; align-items: center; padding: 20px 2px;
  border-bottom: 1px solid rgba(74,68,56,.18); color: #29251f; text-decoration: none;
  font: 15px/1.6 "Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing: .08em;
}
.ysl-global-drawer nav a::after { content: "\2192"; color: #85826c; }

/* Link page standard: desktop horizontal, mobile vertical. */
.ysl-global-actions {
  position: fixed; z-index: 10015; right: 15px; bottom: 24px;
  display: flex; flex-direction: row; gap: 8px;
}
.ysl-global-actions > a {
  position: relative; width: 96px; height: 96px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.82); border-radius: 50%;
  background: #48a6ba; color: #fff; text-decoration: none;
  box-shadow: 0 14px 36px rgba(36,127,147,.2);
  transition: transform .25s, background .25s, color .25s;
}
.ysl-global-actions > a::before {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid rgba(255,255,255,.48); border-radius: 50%;
}
.ysl-global-actions > a:hover { transform: translateY(-2px); background: #247f93; color: #fff; }
.ysl-global-actions .ysl-rental { background: #48a6ba; }
.ysl-global-actions .ysl-orbit {
  position: absolute; inset: 3px; width: 90px; height: 90px;
  overflow: visible; fill: currentColor; stroke: none; pointer-events: none;
}
.ysl-global-actions > a:hover .ysl-orbit,
.ysl-global-actions > a:focus-visible .ysl-orbit { animation: ysl-orbit-spin 8s linear infinite; }
@keyframes ysl-orbit-spin { to { transform: rotate(360deg); } }
.ysl-global-actions .ysl-orbit text {
  font: 7px/1 "Cormorant Garamond",Georgia,serif; letter-spacing: .035em;
}
.ysl-global-actions .ysl-action-center {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; color: #fffdf7;
  font: 10px/1.2 "Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing: .06em; text-align: center;
}
.ysl-global-actions .ysl-action-center svg {
  width: 25px; height: 25px; fill: none; stroke: currentColor;
  stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
}

.ysl-global-social {
  position: fixed; z-index: 10015; right: 21px; top: 88px;
  display: flex; flex-direction: column; gap: 8px;
}
.ysl-global-social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(74,68,56,.18); border-radius: 50%;
  background: rgba(255,253,250,.70); backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 7px 22px rgba(56,48,37,.08); color: #545044; text-decoration: none;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.ysl-global-social a:hover,
.ysl-global-social a:focus-visible {
  background: rgba(255,253,250,.91);
  border-color: rgba(177,153,83,.36);
  transform: translateY(-1px);
}
.ysl-global-social svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ysl-global-social .ysl-line-mark {
  font: 700 7px/1 Arial,sans-serif; letter-spacing: -.02em; fill: currentColor; stroke: none;
}

@media (max-width: 720px) {
  body.ysl-shared-nav-enabled { padding-top: 58px !important; padding-bottom: 196px !important; }
  .article-container {
    box-sizing: border-box;
    padding-right: 58px !important;
  }
  .article-container > .section {
    padding: 48px 62px 48px 22px !important;
    margin: 0 -22px !important;
  }
  .ysl-global-header { height: 58px; padding: 0 74px 0 18px; }
  .ysl-global-logo { font-size: 10px; letter-spacing: .18em; }
  .ysl-global-menu-button { width: 60px; height: 58px; border-radius: 0 0 0 18px; }
  .ysl-global-menu-button span,
  .ysl-global-menu-button::before,
  .ysl-global-menu-button::after { left: 19px; width: 23px; }
  .ysl-global-menu-button::before { top: 19px; }
  .ysl-global-menu-button span { top: 28px; }
  .ysl-global-menu-button::after { top: 37px; }
  .ysl-global-menu-button[aria-expanded="true"]::before,
  .ysl-global-menu-button[aria-expanded="true"]::after { top: 28px; }
  .ysl-global-drawer { padding: 90px 34px 42px; }
  .ysl-global-actions {
    right: 16px; bottom: max(16px,env(safe-area-inset-bottom));
    flex-direction: column; gap: 8px;
  }
  .ysl-global-actions > a { width: 86px; height: 86px; }
  .ysl-global-actions .ysl-orbit { width: 80px; height: 80px; }
  .ysl-global-actions .ysl-orbit text { font-size: 6.7px; }
  .ysl-global-actions .ysl-action-center { font-size: 9px; }
  .ysl-global-actions .ysl-action-center svg { width: 22px; height: 22px; }
  .ysl-global-social { right: 16px; top: 72px; }
  .ysl-global-social a {
    width: 40px; height: 40px;
    background: rgba(255,253,250,.66);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ysl-global-actions > a:hover .ysl-orbit,
  .ysl-global-actions > a:focus-visible .ysl-orbit { animation: none; }
  .ysl-global-drawer { transition: none; }
}