.management-page {
    --mg-yellow: #ffd522;
    --mg-red: #e9252b;
    --mg-text: #fff8ed;
    --mg-muted: #b5b0ab;
    min-height: 540px;
    padding: 44px 0 72px;
    color: var(--mg-text);
    background: radial-gradient(ellipse at 50% 0, #31201480, transparent 44%), #0f1114;
}

.management-container { width: min(1180px, calc(100% - 56px)); margin-inline: auto; }
.management-heading { max-width: 800px; margin: 0 auto 40px; text-align: center; }
.management-back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: #c5bba8; font-size: 13px; font-weight: 700; text-decoration: none; }
.management-back-link:hover { color: var(--mg-yellow); }
.management-heading > .management-back-link { margin-bottom: 26px; }
.management-eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--mg-yellow); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.management-eyebrow > span { width: 26px; height: 3px; border-radius: 2px; background: var(--mg-red); }
.management-heading h1 { margin: 0; color: var(--mg-text); font-size: clamp(36px, 4.7vw, 62px); font-weight: 900; line-height: 1.1; letter-spacing: -.04em; overflow-wrap: anywhere; }
.management-intro { max-width: 650px; margin: 22px auto 0; color: var(--mg-muted); font-size: 17px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }

.management-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; align-items: start; gap: 36px 28px; }
.management-card { min-width: 0; }
.management-frame {
    --mg-cut: 24px;
    position: relative;
    padding: 2px;
    clip-path: polygon(0 0, calc(100% - var(--mg-cut)) 0, 100% var(--mg-cut), 100% 100%, var(--mg-cut) 100%, 0 calc(100% - var(--mg-cut)));
    background: linear-gradient(135deg, #ffe48d 0, #8e6f2b 15%, #39352b 40%, #514229 62%, #e0b741 82%, #e9252b 100%);
    transition: transform .25s ease, background .25s ease;
}
.management-frame::before { position: absolute; inset: 30% 0 0; content: ""; background: radial-gradient(ellipse at 85% 100%, #e9252b66, transparent 58%); pointer-events: none; }
.management-frame-inner { position: relative; padding: 12px; clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 23px 100%, 0 calc(100% - 23px)); background: #181b1f; }
.management-frame-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; padding: 0 1px 12px; color: #b8a573; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.management-frame-caption span:last-child { font-variant-numeric: tabular-nums; color: #e1c86a; }
.management-portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid #a78c3d55; background: #24262b; }
.management-portrait > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.management-portrait-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 65%, #0d0f144d), linear-gradient(110deg, #ffdd8420, transparent 26%); }
.management-frame-corner { position: absolute; z-index: 2; right: 6px; bottom: 6px; width: 40px; height: 40px; border-right: 3px solid var(--mg-yellow); border-bottom: 3px solid var(--mg-yellow); pointer-events: none; }
.management-frame-corner::before { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; content: ""; background: var(--mg-yellow); }
.management-portrait-placeholder { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #6a543733, transparent 60%), linear-gradient(145deg, #26282b, #131619); }
.management-portrait-placeholder > svg { position: relative; z-index: 1; display: block; width: 88%; height: 88%; }
.management-portrait-ring { position: absolute; top: 13%; left: 50%; width: 77%; aspect-ratio: 1; border: 1px solid #c4aa5c24; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 19px #d6b34805, 0 0 0 40px #d6b34803; }
.management-initials { position: absolute; z-index: 3; left: 18px; bottom: 18px; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #d5b34266; border-radius: 50%; color: #f5df98; background: #15181ce8; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.management-member-copy { position: relative; padding: 20px 8px 0; text-align: center; }
.management-member-copy::before { position: absolute; top: 0; left: 50%; width: 60%; height: 1px; content: ""; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #f3ca5266, transparent); }
.management-member-role { margin: 0 0 8px; color: var(--mg-yellow); font-size: 12px; font-weight: 900; letter-spacing: .08em; line-height: 1.5; overflow-wrap: anywhere; }
.management-member-copy h2 { margin: 0; color: var(--mg-text); font-size: clamp(23px, 2.2vw, 27px); font-weight: 900; line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.management-card:hover .management-frame { transform: translateY(-4px); }
.management-empty { max-width: 660px; margin: 0 auto; padding: 44px 28px; border: 1px solid #80662755; border-radius: 22px; text-align: center; background: #191b1e; }
.management-empty > span { display: inline-grid; width: 60px; height: 60px; place-items: center; margin-bottom: 20px; border: 1px solid #806627; border-radius: 50%; color: var(--mg-yellow); font-size: 30px; font-weight: 900; }
.management-empty h2 { margin: 0 0 14px; color: var(--mg-text); font-size: 28px; line-height: 1.25; }
.management-empty p { margin: 0 0 20px; color: var(--mg-muted); line-height: 1.8; }
.management-page a:focus-visible { outline: 2px solid var(--mg-yellow); outline-offset: 5px; border-radius: 3px; }

@media (max-width: 800px) {
    .management-page { padding-block: 36px 64px; }
    .management-container { width: calc(100% - 40px); }
    .management-heading { margin-bottom: 32px; }
    .management-grid { gap: 32px 24px; }
    .management-intro { font-size: 16px; }
}

@media (max-width: 580px) {
    .management-container { width: calc(100% - 36px); }
    .management-heading h1 { font-size: 36px; }
    .management-grid { grid-template-columns: minmax(0, 300px); }
    .management-frame-inner { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .management-frame { transition: none; }
    .management-card:hover .management-frame { transform: none; }
}