.campus-map-page {
    --campus-orange: #f05225;
    --campus-orange-soft: #ff8665;
    --campus-navy: #123d62;
    --campus-ink: #152d46;
    --campus-muted: #607a94;
    padding: 14px 0 0;
    color: var(--campus-ink);
    background:
        radial-gradient(circle at 8% 6%, rgba(255, 183, 116, .16), transparent 27rem),
        linear-gradient(180deg, #fffdf9 0, #f6f9fc 65%, #fff 65%);
}

.campus-map-page__shell { width: min(100% - 42px, 1280px); margin: 0 auto; }

.campus-map-page__hero { padding: 28px 0 38px; }
.campus-map-page__hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: end; gap: 40px; }
.campus-map-page__eyebrow,
.campus-map-page__section-heading > div > p {
    margin: 0 0 10px; color: var(--campus-orange); font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase;
}
.campus-map-page__hero h1 { max-width: 690px; margin: 0; color: var(--campus-navy); font-size: clamp(40px, 5.4vw, 69px); font-weight: 850; letter-spacing: -.065em; line-height: .98; }
.campus-map-page__hero h1 span { color: var(--campus-orange); }
.campus-map-page__lead { max-width: 650px; margin: 20px 0 0; color: #4a6680; font-size: 17px; line-height: 1.65; }
.campus-map-page__calendar-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 13px 17px; border-radius: 11px; color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; background: var(--campus-navy); box-shadow: 0 11px 23px rgba(18, 61, 98, .17); transition: transform .22s ease, background .22s ease; }
.campus-map-page__calendar-link:hover { color: #fff; background: var(--campus-orange); transform: translateY(-2px); }
.campus-map-page__calendar-link span { font-size: 19px; line-height: .7; }
.campus-map-page__plan-card { display: flex; align-items: center; gap: 17px; min-height: 132px; padding: 23px; border: 1px solid #f8cabc; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--campus-orange), var(--campus-orange-soft)); box-shadow: 0 16px 34px rgba(240, 82, 37, .2); }
.campus-map-page__plan-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 14px; font-size: 30px; font-weight: 800; }
.campus-map-page__plan-card strong,
.campus-map-page__plan-card small { display: block; }
.campus-map-page__plan-card strong { font-size: 20px; font-weight: 850; line-height: 1.08; }
.campus-map-page__plan-card small { margin-top: 6px; color: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; }

.campus-map-page__map-section { padding: 0 0 48px; }
.campus-map-page__section-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 20px; }
.campus-map-page__section-heading h2,
.campus-map-page__section-heading h2 { margin: 0; color: var(--campus-navy); font-size: clamp(27px, 3.2vw, 42px); font-weight: 850; letter-spacing: -.055em; line-height: 1.02; }
.campus-map-page__section-heading > p { max-width: 455px; margin: 0; color: var(--campus-muted); font-size: 14px; line-height: 1.6; }
.campus-map-page__experience { display: grid; grid-template-columns: minmax(270px, .43fr) minmax(0, 1.57fr); min-height: 650px; overflow: hidden; border: 1px solid #dbe5ed; border-radius: 22px; background: #fff; box-shadow: 0 18px 48px rgba(18, 61, 98, .08); }

.campus-map-page__detail { display: flex; flex-direction: column; align-items: flex-start; padding: 33px 30px; color: #fff; background: linear-gradient(155deg, #163f64 0%, #102e50 62%, #0b213b 100%); }
.campus-map-page__detail > p:first-child { margin: 0; color: #ffc6b7; font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.campus-map-page__detail > span { display: inline-flex; margin-top: 31px; padding: 6px 10px; border-radius: 30px; color: #f05225; font-size: 11px; font-weight: 850; background: #fff; }
.campus-map-page__detail h3 { margin: 13px 0 0; color: #fff; font-size: clamp(29px, 2.6vw, 40px); font-weight: 850; letter-spacing: -.055em; line-height: 1.03; }
.campus-map-page__detail > p:not(:first-child) { margin: 18px 0 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.65; }
.campus-map-page__detail-list { width: 100%; margin-top: auto; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.2); }
.campus-map-page__detail-list strong { font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.campus-map-page__detail-list ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.campus-map-page__detail-list li { position: relative; padding-left: 16px; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.35; }
.campus-map-page__detail-list li::before { position: absolute; top: .39em; left: 0; width: 7px; height: 7px; border-radius: 50%; content: ''; background: var(--campus-orange-soft); }

.campus-map-page__diagram-wrap { padding: 20px; background: linear-gradient(135deg, #eaf2f7, #f9fbfc); }
.campus-map-page__diagram-top { display: flex; justify-content: space-between; padding: 0 3px 13px; color: #657e95; font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.campus-map-page__floor-tabs { display: flex; justify-content: center; gap: 8px; margin: -2px 0 13px; }
.campus-map-page__floor-tab { min-width: 100px; padding: 8px 14px; border: 1px solid #c7d7e3; border-radius: 9px; color: #31546f; font: inherit; font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; background: rgba(255,255,255,.76); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.campus-map-page__floor-tab:hover,
.campus-map-page__floor-tab:focus-visible { border-color: var(--campus-orange); color: var(--campus-orange); outline: none; transform: translateY(-1px); }
.campus-map-page__floor-tab.is-active { border-color: var(--campus-orange); color: #fff; background: var(--campus-orange); box-shadow: 0 7px 15px rgba(240,82,37,.2); }
.campus-map-page__plan-viewport { overflow: auto; padding: 10px; border: 1px solid #cfdde6; border-radius: 18px; background: #d8e5ed; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.campus-map-page__technical-plan { position: relative; display: none; min-width: 850px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 10px 22px rgba(18, 61, 98, .12); }
.campus-map-page__technical-plan.is-active { display: block; }
.campus-map-page__technical-plan::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(180deg, rgba(18,61,98,.015), transparent 30%, rgba(18,61,98,.06)); }
.campus-map-page__technical-plan img { display: block; width: 100%; height: auto; user-select: none; }
.campus-map-page__marker { position: absolute; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; cursor: pointer; background: var(--campus-orange); transform: translate(-50%, -50%); transition: width .2s ease, height .2s ease, background .2s ease, transform .2s ease; }
.campus-map-page__marker::before { position: absolute; width: 48px; height: 48px; border: 1px solid rgba(240,82,37,.5); border-radius: 50%; content: ''; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; }
.campus-map-page__marker:hover,
.campus-map-page__marker:focus-visible,
.campus-map-page__marker.is-active { z-index: 3; width: 42px; height: 42px; outline: none; background: #153f63; }
.campus-map-page__marker:hover::before,
.campus-map-page__marker:focus-visible::before,
.campus-map-page__marker.is-active::before { opacity: 1; transform: scale(1); }
.campus-map-page__marker b { font-size: 10px; font-weight: 900; letter-spacing: -.02em; }
.campus-map-page__marker span { position: absolute; z-index: 1; width: max-content; max-width: 156px; padding: 7px 9px; border: 1px solid rgba(18,61,98,.13); border-radius: 8px; color: var(--campus-navy); font-size: 10px; font-weight: 850; letter-spacing: .01em; line-height: 1.15; text-align: center; white-space: normal; background: rgba(255,255,255,.96); box-shadow: 0 6px 15px rgba(18,61,98,.14); pointer-events: none; transition: color .2s ease, background .2s ease, transform .2s ease; }
.campus-map-page__marker:hover span,
.campus-map-page__marker:focus-visible span,
.campus-map-page__marker.is-active span { border-color: var(--campus-navy); color: #fff; background: var(--campus-navy); }
.campus-map-page__marker--room { width: 23px; height: 23px; border-width: 1px; }
.campus-map-page__marker--room b { font-size: 7px; letter-spacing: -.08em; }
.campus-map-page__marker--room span { visibility: hidden; opacity: 0; transition: visibility 0s linear .2s, opacity .2s ease, color .2s ease, background .2s ease, transform .2s ease; }
.campus-map-page__marker--room:hover,
.campus-map-page__marker--room:focus-visible,
.campus-map-page__marker--room.is-active { width: 30px; height: 30px; }
.campus-map-page__marker--room:hover b,
.campus-map-page__marker--room:focus-visible b,
.campus-map-page__marker--room.is-active b { font-size: 8px; }
.campus-map-page__marker--room:hover span,
.campus-map-page__marker--room:focus-visible span,
.campus-map-page__marker--room.is-active span { visibility: visible; opacity: 1; transition-delay: 0s; }
.campus-map-page__marker--above span { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.campus-map-page__marker--below span { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.campus-map-page__marker--left span { top: 50%; right: calc(100% + 10px); transform: translateY(-50%); }
.campus-map-page__marker--right span { top: 50%; left: calc(100% + 10px); transform: translateY(-50%); }
.campus-map-page__diagram-tip { margin: 13px 2px 0; color: #657e95; font-size: 12px; font-weight: 700; }
.campus-map-page__diagram-tip span { color: var(--campus-orange); font-size: 15px; }

@media (max-width: 920px) {
    .campus-map-page__hero-grid,
    .campus-map-page__experience { grid-template-columns: 1fr; }
    .campus-map-page__hero-grid { align-items: start; }
    .campus-map-page__plan-card { width: min(100%, 390px); min-height: 0; }
    .campus-map-page__section-heading { align-items: start; flex-direction: column; gap: 14px; }
    .campus-map-page__experience { min-height: 0; }
    .campus-map-page__detail { min-height: 345px; }
    .campus-map-page__detail-list { margin-top: 28px; }
}

@media (max-width: 650px) {
    .campus-map-page { padding-top: 12px; }
    .campus-map-page__shell { width: min(100% - 24px, 1280px); }
    .campus-map-page__hero { padding: 20px 0 30px; }
    .campus-map-page__hero h1 { font-size: clamp(37px, 12vw, 55px); }
    .campus-map-page__lead { font-size: 15px; }
    .campus-map-page__section-heading h2 { font-size: 30px; }
    .campus-map-page__detail { padding: 27px 22px; }
    .campus-map-page__detail h3 { font-size: 31px; }
    .campus-map-page__diagram-wrap { padding: 11px; }
    .campus-map-page__diagram-top { min-width: 850px; }
    .campus-map-page__floor-tabs { min-width: 850px; }
    .campus-map-page__plan-viewport { padding: 6px; }
    .campus-map-page__technical-plan { min-width: 850px; }
    .campus-map-page__marker { width: 31px; height: 31px; }
    .campus-map-page__marker:hover,
    .campus-map-page__marker:focus-visible,
    .campus-map-page__marker.is-active { width: 37px; height: 37px; }
    .campus-map-page__marker span { max-width: 126px; padding: 5px 7px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .campus-map-page *, .campus-map-page *::before, .campus-map-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}