/* このまち＋サイドバー管理 — all component rules are namespaced. */
.kmps-frame {
  width: 100%; max-width: 100%; min-width: 0;
  --kmps-side-width: 230px; --kmps-gap: 22px;
  container-type: inline-size; container-name: kmps-layout;
  box-sizing: border-box;
}
.kmps-frame *, .kmps-frame *::before, .kmps-frame *::after { box-sizing: border-box; }
.kmps-grid {
  display: grid;
  align-items: start;
  gap: var(--kmps-gap);
  width: 100%; min-width: 0;
  grid-template-areas: "content";
  grid-template-columns: minmax(0, 1fr);
}
.kmps-grid-left {
  grid-template-areas: "left content";
  grid-template-columns: minmax(0, var(--kmps-side-width)) minmax(0, 1fr);
}
.kmps-grid-right {
  grid-template-areas: "content right";
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--kmps-side-width));
}
.kmps-grid-both {
  grid-template-areas: "left content right";
  grid-template-columns: minmax(0, var(--kmps-side-width)) minmax(0, 1fr) minmax(0, var(--kmps-side-width));
}
.kmps-article { grid-area: content; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.kmps-side { min-width: 0; max-width: 100%; font-size: .93em; line-height: 1.75; overflow-wrap: anywhere; }
.kmps-side-left { grid-area: left; }
.kmps-side-right { grid-area: right; }
.kmps-box, .kmps-side .kmps-widget {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(30, 48, 73, .045);
}
.kmps-box-title, .kmps-widget-title {
  margin: 0 0 12px !important;
  padding: 0 0 9px;
  border-bottom: 2px solid #d5e7fa;
  font-size: 1.05em !important;
  line-height: 1.45;
  font-weight: 700;
  color: #18324f;
}
.kmps-side img, .kmps-side video, .kmps-side iframe { max-width: 100%; height: auto; }
.kmps-side a { overflow-wrap: anywhere; }
.kmps-side :is(p,ul,ol) { margin: 0 0 12px; }
.kmps-side :is(p,ul,ol):last-child { margin-bottom: 0; }
.kmps-side :is(input,textarea,select,button) { max-width: 100%; }
.kmps-article > :first-child { margin-top: 0; }
.kmps-article > :last-child { margin-bottom: 0; }

/* Modern browsers: use the *actual content container width*, not viewport width. */
@container kmps-layout (max-width: 930px) {
  .kmps-grid, .kmps-grid-left, .kmps-grid-right, .kmps-grid-both {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "left" "right";
    gap: 17px;
  }
  .kmps-grid-right { grid-template-areas: "content" "right"; }
  .kmps-grid-left { grid-template-areas: "content" "left"; }
  .kmps-side { font-size: .98em; }
}
/* Legacy fallback uses viewport size, where container queries are unavailable. */
@supports not (container-type: inline-size) {
  @media (max-width: 1050px) {
    .kmps-grid, .kmps-grid-left, .kmps-grid-right, .kmps-grid-both {
      grid-template-columns: minmax(0,1fr); grid-template-areas: "content" "left" "right"; gap: 17px;
    }
    .kmps-grid-right {grid-template-areas:"content" "right";}
    .kmps-grid-left {grid-template-areas:"content" "left";}
  }
}
@media(max-width:600px) {
  .kmps-box, .kmps-side .kmps-widget { padding: 14px; margin-bottom: 12px; border-radius: 10px; }
}
/* Article-level visibility — only active on posts configured in the editor. */
body.kmps-hide-native-sidebar :is(
  #secondary, #sidebar, #main-sidebar, #sidebar1, #sidebar2,
  .l-sidebar, .c-sidebar, .p-sidebar, .sidebar-area,
  .sidebar-container, .sidebar-wrapper, .sub-column, .subcolumn,
  .main-sidebar, .left-sidebar, .right-sidebar,
  aside[role="complementary"], .widget-area.sidebar,
  .kmps-native-sidebar-hidden
):not(.kmps-frame):not(.kmps-side) { display: none !important; }
body.kmps-hide-native-sidebar :is(#content, .site-content, #main, .l-content, .content-wrap, .content-columns) > :is(
  .sidebar, .sidebar-wrap, .sidebar-content, .widget-area
) {display: none !important;}
/* Theme layout is expanded *outside* the post only. */
body.kmps-fullwidth-post :is(
  #primary, .content-area, .l-mainContent, .l-main, .main-content,
  .main-column, .main-area, .content-primary, .post-main, .primary-content
),
body.kmps-fullwidth-post .kmps-wide-node {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  flex-basis: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.kmps-fullwidth-post :is(.l-content, .content-sidebar-wrap, .content-sidebar, .content-columns) {
  grid-template-columns: minmax(0,1fr) !important;
}
body.kmps-fullwidth-post .kmps-single-column-row {
  display: block !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 0 !important;
}
/* Only the post/article itself should be 70% wide. Changing column width in
   the theme first, then narrowing the column, caused the v1.3 bug. */
body.kmps-reading-mode {
  --kmps-current-reading-width: var(--kmps-reading-desktop,70%);
  --kmps-reading-max: 100%;
}
body.kmps-reading-mode .kmps-reading-column {
  box-sizing: border-box !important;
  width: var(--kmps-current-reading-width,70%) !important;
  max-width: var(--kmps-reading-max,100%) !important;
  min-width: 0 !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 1 auto !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}
/* Additional fallback, for visitors who block JavaScript. */
body.kmps-reading-mode:not(.kmps-reading-ready) :is(
  article.type-post, article.type-page, article.post, article.page
) {
  width: var(--kmps-current-reading-width,70%) !important;
  max-width: var(--kmps-reading-max,100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}
/* Respect article content width without changing intentional inner layouts. */
body.kmps-reading-mode .kmps-reading-column :is(img, video, iframe) {
  max-width: 100%;
}
@media (max-width: 1024px) {
  body.kmps-reading-mode {--kmps-current-reading-width:var(--kmps-reading-tablet,92%);}
}
@media (max-width: 700px) {
  body.kmps-reading-mode {--kmps-current-reading-width:var(--kmps-reading-mobile,100%);}
}