/* portalCommon.css
 * - SLDS2 / 可能な範囲で --slds-g-* を参照
 */

/* ===== Site Defaults ===== */
.wrap {
  /* max-width: var(--portal-content-max-width, 920px); */
  margin: 0 auto;
  padding: var(--slds-g-spacing-4, 1rem);
}

/* site-wide defaults */
.mcp-site {
  font-family: var(--mcp-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif);
  color: var(--slds-g-color-neutral-base-50, #747474);
}

/* ===== Content / Typography ===== */
.mcp-site__content {
  font-size: var(--slds-g-font-scale-2, 1rem);
  font-weight: var(--slds-g-font-weight-5, 500);
  line-height: var(--slds-g-font-lineheight-4, 1.5);
  display: flex;
  flex-direction: column;
  gap: var(--slds-g-spacing-4, 1rem);
}

.mcp-site__titlePage {
  font-size: var(--slds-g-font-scale-8, 3rem) !important;
  font-weight: var(--slds-g-font-weight-4, 400);
  line-height: var(--slds-g-font-lineheight-4, 1.5);
  margin: var(--slds-g-spacing-4, 1rem) 0 var(--slds-g-spacing-2, 0.5rem); /* top, side, bottom */
}

.mcp-site__titleSection {
  font-size: var(--slds-g-font-scale-7, 2.5rem) !important;
  font-weight: var(--slds-g-font-weight-4, 400);
  line-height: var(--slds-g-font-lineheight-4, 1.5);
  margin: 0 0 var(--slds-g-spacing-2, 0.5rem); /* top, side, bottom */
}

.mcp-site__titleArticle {
  font-size: var(--slds-g-font-scale-5, 1.5rem) !important;
  font-weight: var(--slds-g-font-weight-4, 400);
  line-height: var(--slds-g-font-lineheight-4, 1.5);
  margin: 0 0 var(--slds-g-spacing-2, 0.5rem); /* top, side, bottom */
}

.mcp-site__titleList {
  font-size: var(--slds-g-font-scale-4, 1rem) !important;
  font-weight: var(--slds-g-font-weight-4, 400);
  line-height: var(--slds-g-font-lineheight-4, 1.5);
  margin: var(--slds-g-spacing-2, 0.5rem) 0 var(--slds-g-spacing-2, 0.5rem); /* top, side, bottom */
}

.mcp-site__iconInline{
	height: var(--slds-g-sizing-7, 1.5rem);      /* 文字の高さに合わせる */
	width: auto;
	vertical-align: -0.1rem; /* ベースライン微調整（好みで0〜-0.2em） */
	margin-left: 0.35em;
	margin-right: 0.35em;
}

/* Call to Action */
.mcp-site__cta {
  text-align: center;
}

.mcp-site__textStrong {
  font-weight: var(--slds-g-font-weight-7, 700);
}

.mcp-site__textLink {
  color: var(--slds-g-color-palette-electric-blue-50, #066AFE) !important;
  text-decoration: none;
}

/* visually hidden, screen reader only */
.mcp-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ===== Card ===== */
.list-title {
  color: var(--slds-g-color-on-surface-3, #1f1f1f);
  font-size: var(--slds-g-font-scale-4, 1.5rem);
  font-weight: var(--slds-g-font-weight-6, 600);
  line-height: var(--slds-g-font-lineheight-2, 1.25);
  margin-bottom: var(--slds-g-spacing-4, 1rem);
}

.support-card {
  border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, #e5e5e5);
  border-radius: var(--slds-g-radius-border-3, 0.75rem);
  margin-bottom: var(--slds-g-spacing-4, 1rem);
  box-shadow: var(--slds-g-shadow-3, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.support-title {
  color: var(--slds-g-color-on-surface-3, #1f1f1f);
  font-size: var(--slds-g-font-scale-4, 1.5rem);
  font-weight: var(--slds-g-font-weight-4, 400);
  line-height: 1.3;
}

/* List link */
.title-link {
  color: var(--slds-g-color-palette-blue-30, #014486);
  text-decoration: none;
}
.title-link:hover,
.title-link:focus {
  text-decoration: underline;
}

/* ===== Meta ===== */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--slds-g-spacing-2, 0.5rem);
  align-items: center;

  color: var(--slds-g-color-on-surface-1, #5c5c5c);
  font-size: 0.875rem;
}

.meta-label {
  margin-right: var(--slds-g-spacing-1, 0.25rem);
  color: var(--slds-g-color-on-surface-1, #747474);
  opacity: 0.85;
}

.meta-sep {
  color: var(--slds-g-color-on-surface-1, #b0b0b0);
  opacity: 0.7;
}

/* ===== Divider / Sections ===== */
.divider {
  height: 1px;
  background: var(--slds-g-color-border-1, #ededed);
  margin: var(--slds-g-spacing-4, 1rem) 0;
}

.section-title {
  color: var(--slds-g-color-on-surface-3, #1f1f1f);
  font-size: var(--slds-g-font-scale-2, 1rem);
  font-weight: var(--slds-g-font-weight-7, 700);
  margin-bottom: var(--slds-g-spacing-2, 0.5rem);
}

.section-body {
  color: var(--slds-g-color-on-surface-2, #1f1f1f);
  font-size: var(--slds-g-font-scale-2, 1rem);
}

.prewrap {
  white-space: pre-wrap;
  word-break: break-word;
}

/* == footer == */
.mcp-footer {
  border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-90, #E5E5E5);
  background: var(--slds-g-color-neutral-base-95, #F3F3F3);
}

.mcp-footer__wrap {
  padding-top: var(--slds-g-spacing-6, 1.5rem);
  padding-bottom: var(--slds-g-spacing-5, 1.25rem);
}

.mcp-footer__grid {
  color: var(--slds-g-color-palette-neutral-50, #747474);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--slds-g-spacing-4, 1rem);
  padding-left: var(--slds-g-spacing-10, 4rem);
  padding-right: var(--slds-g-spacing-6, 2rem);
}

.mcp-footer__col {
  min-width: 0; /* truncate系の保険 */
}

.mcp-footer__title {
  margin: 0 0 var(--slds-g-spacing-2, 0.5rem);
  font-size: var(--slds-g-font-scale-2, 1rem);
  font-weight: var(--slds-g-font-weight-7, 700);
  line-height: var(--slds-g-font-lineheight-2, 1.25);
}

.mcp-footer__titleLink {
  color: inherit;
  text-decoration: none;
}
.mcp-footer__titleLink:hover,
.mcp-footer__titleLink:focus {
  text-decoration: underline;
}

.mcp-footer .mcp-footer__list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  padding-left: var(--slds-g-spacing-2, 0.5rem) !important; /* インデント小さめ */
}

.mcp-footer__item {
  margin: var(--slds-g-spacing-2, 0.5rem) 0;
}

.mcp-footer__link {
  text-decoration: none;
  font-size: var(--slds-g-font-scale-1, 0.875rem);
  line-height: 1.4;
  word-break: break-word;
}
.mcp-footer__link:hover,
.mcp-footer__link:focus {
  text-decoration: underline;
}

.mcp-footer__bottom {
  margin-top: var(--slds-g-spacing-5, 1.25rem);
  padding-top: var(--slds-g-spacing-4, 1rem);
  padding-left: var(--slds-g-spacing-10, 4rem);
  border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-90, #E5E5E5);
  color: var(--slds-g-color-palette-neutral-40, #5C5C5C);
  font-size: var(--slds-g-font-scale-neg-1, 0.75rem);
  line-height: 1.6;
}

.mcp-footer .mcp-footer__item {
  list-style: none !important;
}
.mcp-footer .mcp-footer__item::marker {
  content: "" !important;
}
.mcp-footer .mcp-footer__item::before,
.mcp-footer .mcp-footer__item:before {
  content: none !important;
  display: none !important;
}

/* force link color in footer (override theme/richtext styles) */
.mcp-footer a.mcp-footer__link,
.mcp-footer a.mcp-footer__titleLink {
  color: var(--slds-g-color-palette-neutral-50, #747474) !important;
}

.mcp-footer a.mcp-footer__link:visited,
.mcp-footer a.mcp-footer__titleLink:visited {
  color: var(--slds-g-color-palette-neutral-50, #747474) !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .mcp-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mcp-footer__grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mcp-footer__item {
    margin: var(--slds-g-spacing-1, 0.25rem) 0;
  }
}

/* ===== Utilities ===== */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* ===== Badges ===== */
.badge-gray,
.badge-blue,
.badge-success,
.badge-inverse {
  display: inline-flex;
  align-items: center;
  gap: var(--slds-g-spacing-1, 0.25rem);
  padding: var(--slds-g-spacing-1, 0.25rem) var(--slds-g-spacing-2, 0.5rem);
  border-radius: var(--slds-g-radius-border-pill, 0.5rem);
  font-size: var(--slds-g-font-scale-neg-1, 0.75rem);
  font-weight: var(--slds-g-font-weight-6, 600);
  /* line-height: 1; */
  /* white-space: nowrap; */
}

.badge-gray {
  background: var(--slds-g-color-palette-neutral-90, #E5E5E5);
  border: 1px solid var(--slds-g-color-palette-neutral-60, #939393);
  color: var(--slds-g-color-palette-neutral-20, #2E2E2E);
}

.badge-blue {
  background: var(--slds-g-color-palette-electric-blue-80, #A8CBFF);
  border: 1px solid var(--slds-g-color-palette-electric-blue-50, #066AFE);
  color: var(--slds-g-color-palette-electric-blue-50, #066AFE);
}

.badge-success {
  background: var(--slds-g-color-palette-green-95, #EBF7E6);
  border: 1px solid var(--slds-g-color-palette-green-30, #194E31);
  color: var(--slds-g-color-palette-green-30, #194E31);
}

.badge-inverse {
  background: var(--slds-g-color-palette-neutral-60, #939393);
  border: 1px solid var(--slds-g-color-palette-neutral-20, #2E2E2E);
  color: var(--slds-g-color-palette-neutral-100, #FFFFFF);
}
