/* Signage Journal column components — brand-specific sj- namespace. */
:root {
	--color-main: var(--color-primary, #1a56db);
	--color-main-dark: var(--color-primary-dark, #123fa9);
	--color-sub: #f0f4ff;
	--color-accent: #ff6b2c;
	--color-text: #111827;
	--color-border: #e5e7eb;
	--sj-column-muted: #5f6b7a;
	--sj-column-surface: #f8fafc;
	--sj-column-radius: 8px;
}

.sj-column__body { font-size: 1rem; }
.sj-column__body > * { max-width: 100%; }
.sj-column__body h2, .sj-column__body h3 { scroll-margin-top: 110px; }
.sj-column__visual { aspect-ratio: 1200 / 630; background: var(--color-sub); }
.sj-column__visual img { width: 100%; height: 100%; object-fit: cover; }

/* Server-rendered outline */
.sj-outline {
	margin: 2rem 0 2.6rem;
	padding: 1.25rem;
	background: #f8faff;
	border: 1px solid #cbd9f5;
	border-top: 4px solid var(--color-main);
	border-radius: var(--sj-column-radius);
}
.sj-outline__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sj-outline__title { color: var(--color-text); font-size: 1.1rem; font-weight: 800; }
.sj-outline__toggle { padding: 0.28rem 0.75rem; background: #fff; color: var(--color-main-dark); border: 1px solid #b9c9ec; border-radius: 4px; font-size: 0.78rem; }
.sj-outline__list { margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid #d7e1f5; list-style: none; }
.sj-outline__list[hidden] { display: none; }
.sj-outline__item { margin: 0.45rem 0; color: #27364f; }
.sj-outline__item--h2 { font-weight: 700; }
.sj-outline__item--h3 { margin-left: 1.2rem; font-size: 0.9rem; font-weight: 400; }
.sj-outline__item a { color: inherit; text-decoration: none; }
.sj-outline__item a:hover { color: var(--color-main); text-decoration: underline; }

/* Point and caution boxes */
.sj-point, .sj-alert { position: relative; margin: 1.8rem 0; padding: 1.2rem 1.25rem 1.2rem 1.5rem; border-radius: 0 var(--sj-column-radius) var(--sj-column-radius) 0; }
.sj-point { background: var(--color-sub); border-left: 5px solid var(--color-main); }
.sj-alert { background: #fef3c7; border-left: 5px solid #f59e0b; }
.sj-point__label, .sj-alert__label { margin-bottom: 0.55rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; }
.sj-point__label { color: var(--color-main-dark); }
.sj-alert__label { color: #9a4d05; }
.sj-point__body > :last-child, .sj-alert__body > :last-child { margin-bottom: 0; }

/* Checklist */
.sj-checks { margin: 1.8rem 0; padding: 1.25rem; background: #f6f9ff; border: 1px solid #d9e4fb; border-radius: var(--sj-column-radius); }
.sj-checks__title { margin-bottom: 0.8rem; color: var(--color-main-dark); font-size: 1.05rem; font-weight: 800; }
.sj-checks ul { margin: 0; padding: 0; list-style: none; }
.sj-checks li { position: relative; padding-left: 1.75rem; }
.sj-checks li + li { margin-top: 0.6rem; }
.sj-checks li::before { position: absolute; top: 0.06em; left: 0; display: grid; width: 1.25rem; height: 1.25rem; place-items: center; content: "✓"; background: var(--color-accent); color: #fff; border-radius: 50%; font-size: 0.72rem; font-weight: 900; line-height: 1; }

/* Standard article bullet list */
.sj-column__body > ul:not([class]), .sj-column__body .sj-list { margin: 1.8rem 0; padding: 1.2rem 1.25rem; background: #f8faff; border: 1px solid #d9e4fb; border-radius: var(--sj-column-radius); list-style: none; }
.sj-column__body > ul:not([class]) > li, .sj-column__body .sj-list > li { position: relative; padding-left: 1.45rem; }
.sj-column__body > ul:not([class]) > li + li, .sj-column__body .sj-list > li + li { margin-top: 0.8rem; }
.sj-column__body > ul:not([class]) > li::before, .sj-column__body .sj-list > li::before { position: absolute; top: 0.72em; left: 0.1rem; width: 0.52rem; height: 0.52rem; content: ""; background: var(--color-main); border-radius: 50%; transform: translateY(-50%); }

/* Comparison table */
.sj-table-scroll { width: 100%; margin: 1.8rem 0; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--sj-column-radius); -webkit-overflow-scrolling: touch; }
.sj-column__body .sj-compare, .sj-compare { width: 100%; min-width: 620px; margin: 0; border: 0; border-spacing: 0; border-collapse: collapse; font-size: 0.9rem; }
.sj-column__body .sj-compare th, .sj-column__body .sj-compare td, .sj-compare th, .sj-compare td { padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.sj-column__body .sj-compare thead th, .sj-compare thead th { background: var(--color-main); color: #fff; }
.sj-column__body .sj-compare tbody th, .sj-compare tbody th { background: var(--color-sub); color: var(--color-text); white-space: nowrap; }
.sj-compare tbody tr:nth-child(even) td { background: #fafbfc; }

/* FAQ */
.sj-faq { margin: 2rem 0; padding: 0.4rem 1.2rem; background: var(--sj-column-surface); border: 1px solid var(--color-border); border-radius: var(--sj-column-radius); }
.sj-faq__item { padding: 1.15rem 0; }
.sj-faq__item + .sj-faq__item { border-top: 1px solid var(--color-border); }
.sj-faq__q, .sj-faq__a { position: relative; min-height: 2rem; padding-left: 2.6rem; }
.sj-faq__q { margin-bottom: 0.8rem; color: var(--color-text); font-weight: 800; }
.sj-faq__a { color: #374151; }
.sj-faq__q::before, .sj-faq__a::before { position: absolute; top: -0.1rem; left: 0; display: grid; width: 2rem; height: 2rem; place-items: center; color: #fff; border-radius: 50%; font-family: Arial, sans-serif; font-size: 0.82rem; font-weight: 800; }
.sj-faq__q::before { content: "Q"; background: var(--color-main); }
.sj-faq__a::before { content: "A"; background: var(--color-main-dark); }

/* Speech balloons */
.sj-balloon { display: flex; margin: 1.8rem 0; align-items: flex-start; gap: 0.85rem; }
.sj-balloon--right { flex-direction: row-reverse; }
.sj-balloon__icon { flex: 0 0 56px; }
.sj-balloon__icon img { width: 56px; height: 56px; object-fit: cover; border: 2px solid #dbe5f8; border-radius: 50%; }
.sj-balloon__body { position: relative; min-width: 0; max-width: calc(100% - 72px); padding: 0.9rem 1rem; background: var(--color-sub); border: 1px solid #d6e1f7; border-radius: var(--sj-column-radius); }
.sj-balloon__body::before { position: absolute; top: 18px; left: -9px; width: 16px; height: 16px; content: ""; background: var(--color-sub); border-bottom: 1px solid #d6e1f7; border-left: 1px solid #d6e1f7; transform: rotate(45deg); }
.sj-balloon--right .sj-balloon__body::before { right: -9px; left: auto; border: 0; border-top: 1px solid #d6e1f7; border-right: 1px solid #d6e1f7; }
.sj-balloon__name { margin-bottom: 0.3rem; color: var(--color-main-dark); font-size: 0.78rem; font-weight: 800; }
.sj-balloon__text > :last-child { margin-bottom: 0; }

/* Legacy article CTA styles (article CTA output is currently disabled). */
.sj-action { position: relative; margin: 3rem 0 1rem; padding: 2rem 1.35rem; overflow: hidden; background: linear-gradient(125deg, var(--color-main-dark), var(--color-main)); color: #fff; border-radius: var(--sj-column-radius); text-align: center; }
.sj-action::after { position: absolute; right: -65px; bottom: -95px; width: 210px; height: 210px; content: ""; border: 28px solid rgba(255,255,255,.08); border-radius: 50%; }
.sj-action__title, .sj-action__text, .sj-action__button { position: relative; z-index: 1; }
.sj-action__title { margin-bottom: 0.6rem; font-size: clamp(1.25rem, 5vw, 1.7rem); font-weight: 800; }
.sj-action__text { margin: 0 auto 1.25rem; color: #eaf0ff; }
.sj-action__button { display: inline-flex; min-height: 48px; padding: 0.7rem 1.4rem; align-items: center; justify-content: center; background: var(--color-accent); color: #fff; border-radius: 6px; font-weight: 800; text-decoration: none; box-shadow: 0 8px 18px rgba(94,29,0,.22); }
.sj-action__button:hover { background: #ff824d; color: #fff; transform: translateY(-2px); }

/* Author and supervisor cards */
.sj-credits { margin-top: 3.2rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); }
.sj-credits__heading { margin-bottom: 1.25rem; font-size: 1.35rem; }
.sj-credits__grid { display: grid; gap: 1rem; }
.sj-profile { display: grid; padding: 1.25rem; gap: 1rem; background: var(--sj-column-surface); border: 1px solid var(--color-border); border-radius: var(--sj-column-radius); }
.sj-profile__photo img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; }
.sj-profile__label { margin: 0 0 0.15rem; color: var(--color-main); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; }
.sj-profile__name { margin: 0; font-size: 1.15rem; }
.sj-profile__role { margin: 0.15rem 0 0.7rem; color: var(--sj-column-muted); font-size: 0.84rem; }
.sj-profile__bio { margin-bottom: 0.8rem; font-size: 0.9rem; line-height: 1.75; }
.sj-profile__qualifications { margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border); font-size: 0.82rem; }
.sj-profile__qualifications ul { margin: 0.35rem 0 0; padding-left: 1.3rem; }
.sj-profile__links { display: flex; margin-top: 0.8rem; flex-wrap: wrap; gap: 0.45rem; }
.sj-profile__links a { padding: 0.25rem 0.65rem; background: #fff; color: var(--color-main-dark); border: 1px solid #cbd8f2; border-radius: 4px; font-size: 0.78rem; font-weight: 700; text-decoration: none; }

/* Related posts and column index */
.sj-related { margin-top: 3.2rem; }
.sj-related__grid .post-card__media, .sj-column-grid .post-card__media { aspect-ratio: 600 / 315; }
.sj-index__content { padding-block: 2.5rem 4.5rem; }
.sj-filter { display: flex; margin-bottom: 2rem; padding-bottom: 0.3rem; flex-wrap: wrap; gap: 0.65rem; }
.sj-filter__link { display: inline-flex; min-height: 38px; padding: 0.38rem 0.85rem; align-items: center; gap: 0.45rem; background: #fff; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.84rem; font-weight: 700; text-decoration: none; }
.sj-filter__link span { color: var(--sj-column-muted); font-size: 0.7rem; }
.sj-filter__link:hover, .sj-filter__link.is-current { background: var(--color-main); color: #fff; border-color: var(--color-main); }
.sj-filter__link:hover span, .sj-filter__link.is-current span { color: #dce7ff; }
.sj-column-grid { grid-template-columns: 1fr; }
.sj-pagination { margin-top: 2.5rem; }

/* Standalone dummy page shell */
.sj-demo { margin: 0; background: #f5f7fb; color: var(--color-text); font-family: "Noto Sans JP", "Yu Gothic", sans-serif; line-height: 1.8; }
.sj-demo * { box-sizing: border-box; }
.sj-demo img { display: block; max-width: 100%; height: auto; }
.sj-demo a { color: var(--color-main); }
.sj-demo__bar { padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid var(--color-border); color: var(--color-main-dark); font-size: 1.1rem; font-weight: 800; }
.sj-demo__shell { width: min(calc(100% - 32px), 900px); margin: 0 auto; padding: 1rem 0 4rem; }
.sj-demo__crumbs { margin-bottom: 1rem; color: var(--sj-column-muted); font-size: 0.78rem; }
.sj-demo__article { padding: clamp(1.2rem, 5vw, 3rem); background: #fff; border: 1px solid var(--color-border); border-radius: 10px; }
.sj-demo__title { margin: 0.5rem 0 0.8rem; font-size: clamp(1.65rem, 3.4vw, 2.15rem); line-height: 1.5; }
.sj-demo__meta { display: flex; margin-bottom: 1.5rem; padding-block: 0.7rem; flex-wrap: wrap; gap: 0.5rem 1.2rem; border-block: 1px solid var(--color-border); color: var(--sj-column-muted); font-size: 0.8rem; }
.sj-demo__hero { display: grid; margin-bottom: 2rem; aspect-ratio: 1200/630; place-items: center; background: linear-gradient(135deg, #0c2a59, #1a56db); color: #fff; border-radius: var(--sj-column-radius); font-size: clamp(1.1rem, 4vw, 2rem); font-weight: 800; }
.sj-demo__body h2 { position: relative; margin-top: 2.5em; padding: 0.65em 0 0.65em 1rem; border-bottom: 2px solid var(--color-border); font-size: 1.55rem; }
.sj-demo__body h2::before { position: absolute; inset: 0.65em auto 0.65em 0; width: 5px; content: ""; background: var(--color-main); border-radius: 3px; }
.sj-demo__body h3 { margin-top: 2em; padding-bottom: 0.4em; border-bottom: 1px solid var(--color-border); }
.sj-demo__cards { display: grid; gap: 1rem; }
.sj-demo-card { overflow: hidden; background: #fff; border: 1px solid var(--color-border); border-radius: var(--sj-column-radius); }
.sj-demo-card__image { display: grid; aspect-ratio: 600/315; place-items: center; background: var(--color-sub); color: var(--color-main-dark); font-weight: 800; }
.sj-demo-card__body { padding: 1rem; }
.sj-demo-card__body strong { display: block; line-height: 1.55; }
.sj-demo-card__body small { color: var(--sj-column-muted); }

@media (min-width: 640px) {
	.sj-profile { grid-template-columns: 88px 1fr; }
	.sj-column-grid, .sj-demo__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.sj-credits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sj-column-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.sj-outline, .sj-point, .sj-alert, .sj-checks, .sj-faq { padding-inline: 1rem; }
	.sj-outline__item--h3 { margin-left: 0.55rem; }
	.sj-balloon__icon { flex-basis: 48px; }
	.sj-balloon__icon img { width: 48px; height: 48px; }
	.sj-balloon__body { max-width: calc(100% - 62px); }
}

@media print {
	.sj-outline__toggle, .sj-action, .sj-related { display: none !important; }
}