/* 公開講義特設ページ用スタイル */

/* タブのスタイル (tabs_style.cssから移植) */
.tab-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    max-width: 1100px;
    margin: 40px auto 0;
}

.tab-btn {
    position: relative;
    z-index: 1;
    padding: 12px 20px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: bold;
    color: #3868c9;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    max-width: 200px;
    min-height: 48px;
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.tab-btn.active {
    z-index: 10;
    background-color: #7a64d1;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(122, 100, 209, 0.3);
}

.tab-content-container {
    position: relative;
    z-index: 5;
    max-width: 1100px;
    margin: 20px auto 0;
    padding: 10px 0 0;
    text-align: left;
}

.tab-pane {
    display: none;
    opacity: 0;
}

.tab-pane.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .tab-nav {
        gap: 8px;
    }

    .tab-btn {
        width: calc(50% - 4px);
        font-size: 14px;
    }
}


.open-school-page .event-content-wrapper {
    max-width: 1000px;
}

/* 企画概要下の注意事項・お願い（フラット・リスト版） */
.event-notes-flat {
    margin-top: 35px;
    border-top: 1px solid rgba(50, 79, 139, 0.15);
    padding-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    text-align: left;
}

.note-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.note-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    /* 本文と同じ文字の大きさに統一 */
    font-weight: 700;
    color: #324f8b;
}

.note-title i {
    color: #3868c9;
    font-size: 1.15rem;
}

.note-list {
    margin: 0;
    padding-left: 1.5rem;
    font-size: 1.05rem;
    color: #444;
    line-height: 1.8;
}

.note-list li {
    margin-bottom: 6px;
}

.note-list li:last-child {
    margin-bottom: 0;
}

.note-list strong {
    font-weight: 700;
    background: linear-gradient(transparent 60%, rgba(50, 79, 139, 0.15) 40%);
}

/* =========================================================================
 * 学問領域の凡例表示（スマホ対応・複数行でも美しく整うスマートな枠）
 * ========================================================================= */
.category-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 16px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 22px auto;
    padding: 10px 20px;
    border: 1px solid rgba(50, 79, 139, 0.25);
    border-radius: 12px;
    /* 折り返しても美しさを損なわない洗練された角丸矩形 */
    background: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
    color: #444;
    font-weight: 700;
}

/* =========================================================================
 * スキップリンク（会場案内へのクイックアクセスボタン）
 * ========================================================================= */
.access-skip-container {
    text-align: center;
    margin: 15px 0 25px 0;
}

.access-skip-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: rgba(50, 79, 139, 0.05);
    border: 1px solid rgba(50, 79, 139, 0.15);
    border-radius: 6px;
    color: #4a6396;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    transition: all 0.2s ease;
}

.access-skip-btn:hover {
    background: rgba(50, 79, 139, 0.1);
    color: #324f8b;
    border-color: rgba(50, 79, 139, 0.3);
    transform: none;
    box-shadow: none;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* ボタンと誤認させないため、個別の背景や枠線は設定しない */
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.border-humanities-dot {
    background: #a24b5c;
}

.border-science-dot {
    background: #4b7eb3;
}

.border-bio-dot {
    background: #5c926a;
}

.border-medical-dot {
    background: #926ca3;
}

/* PC用・スマホ用の凡例テキスト切り替え設定 */
.legend-text.sp-text {
    display: none;
}

@media screen and (max-width: 767px) {
    .legend-text.pc-text {
        display: none;
    }

    .legend-text.sp-text {
        display: inline;
    }

    /* スマホ版では整然とした2列2行のグリッド配置にし、確実に2行に抑える */
    .category-legend {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 8px 16px;
        padding: 10px 15px;
        width: 100%;
        max-width: 360px;
        box-sizing: border-box;
    }

    .legend-item {
        justify-content: flex-start;
        font-size: 0.85rem;
    }
}

/* =========================================================================
 * 3日構成用タブボタンの最適化（美しく均等に割り付け、押しやすさを確保）
 * ========================================================================= */
.tab-nav.triple-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 25px;
}

.tab-nav.triple-tabs .tab-btn {
    flex: 1;
    max-width: 250px;
    padding: 12px 16px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 12px;
}

/* タイムテーブルのスタイル */
.timetable {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.timetable-item {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    background-color: #f0f4f8;
    /* 背景の深い紺色と絶妙に調和する、明るさを一段抑えたソフトスレート */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(50, 79, 139, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(50, 79, 139, 0.15);
}

.timetable-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(50, 79, 139, 0.15);
    border-color: rgba(50, 79, 139, 0.3);
}

.time-box {
    background: #fafbfc;
    color: #324f8b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-weight: 700;
    border-right: 1px solid rgba(50, 79, 139, 0.08);
}

.time-start {
    font-size: 1.4rem;
    color: #324f8b;
}

.time-separator {
    font-size: 0.8rem;
    color: #888;
    margin: 2px 0;
}

.time-separator::before {
    content: '|';
}

.time-end {
    font-size: 1.1rem;
    color: #666;
}

.lecture-info {
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
}

.lecture-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #324f8b;
    margin: 0 0 2px 0;
    /* 明示的にmargin-topを0にし、ブラウザのデフォルトマージンをリセット */
    line-height: 1.45;
}

.lecturer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 4px;
}

.lecturer-name {
    font-size: 0.95rem;
    color: #444;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.lecturer-name i {
    color: #7a64d1;
    font-size: 0.85rem;
}

.lecturer-lab {
    font-size: 0.85rem;
    color: #777;
    font-weight: normal;
}

/* レスポンシブ対応 */
@media screen and (max-width: 600px) {
    .timetable-item {
        grid-template-columns: 1fr;
        background-position: right 15px bottom 15px;
        background-size: 80px;
    }

    .timetable-item.border-science {
        background-size: 70px;
    }

    .time-box {
        flex-direction: row;
        gap: 10px;
        padding: 10px;
    }

    .lecture-info {
        padding: 20px;
    }

    .lecture-title {
        font-size: 1.1rem;
    }

    .lecturer-meta {
        margin-top: 6px;
    }

    .time-separator::before {
        content: '-';
    }

    .time-separator {
        font-size: 1.1rem;
    }

    .lecture-info {
        padding: 15px 20px;
    }

    .lecture-title {
        font-size: 1.1rem;
    }
}

/* 装飾的な要素 */
.open-school-page .section-heading i {
    margin-right: 10px;
    color: #7a64d1;
}

.lecturer-tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(122, 100, 209, 0.1);
    color: #7a64d1;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0;
    /* 下部マージンをリセットし、gapによる適切な間隔のみにする */
    width: fit-content;
}

/* 講義一覧のスタイル */
.lecture-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 20px;
}

/* =========================================================================
 * 学問領域ごとのテーマカラー定義と分類想定
 * =========================================================================
 * 北海道大学の多岐にわたる学部・大学院を直感的に分かりやすくするため、
 * 以下の4つの領域ごとにバッジや枠線の配色を設定する想定です。
 * 
 * 1. 人文・社会科学系 (えんじ・赤系: #d94b68)
 *    想定部局: 文学部・文学研究科、教育学部・教育推進機構、法学部・法学研究科、
 *             経済学部・経済学研究科、国際広報メディア・観光学院 など
 * 
 * 2. 理工・情報系 (ブルー系: #2196f3)
 *    想定部局: 理学部・理学研究院、工学部・工学研究院、情報科学研究院、
 *             化学反応創成研究拠点(WPI-ICReDD) など
 * 
 * 3. 農学・環境・水産系 (グリーン系: #4caf50)
 *    想定部局: 農学部・農学研究院、環境科学院、水産学部・水産科学研究院、
 *             北方生物圏フィールド科学センター など
 * 
 * 4. 医療・獣医・生命科学系 (パープル系: #9c27b0)
 *    想定部局: 医学部・医学研究院、歯学部・歯学研究院、薬学部・薬学研究院、
 *             獣医学部・獣医学研究院、生命科学院 など
 * ========================================================================= */

/* =========================================================================
 * タイムテーブル項目・講義カードの共通縦線と背景画像設定
 * ========================================================================= */

/* 共通の左端縦線定義 */
.timetable-item::before,
.lecture-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    /* 細長い縦線。枠に沿って曲げず、まっすぐに配置 */
    z-index: 5;
}

/* 共通の背景画像プロパティ */
.timetable-item {
    background-repeat: no-repeat;
    background-position: right 30px center;
    background-size: 100px;
}

.lecture-card {
    background-repeat: no-repeat;
    background-position: right 40px top 25px;
    background-size: 160px;
}

/* 1. 人文・社会科学系 (落ち着いたえんじ/ボルドー系: #a24b5c) */
.category-humanities {
    background: rgba(162, 75, 92, 0.08) !important;
    color: #a24b5c !important;
}

.border-humanities::before {
    background: #a24b5c;
}

.border-humanities {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27rgba%28162%2C%2075%2C%2092%2C%200.08%29%27%3E%3Cpath%20d%3D%27M19%202H6c-1.2%200-3%20.8-3%203v14c0%202.2%201.8%203%203%203h13c1.1%200%202-.9%202-2V4c0-1.1-.9-2-2-2zm-1%202v11l-2.5-1.5L13%2015V4h5zM6%2020c-1%200-2-.3-2-1s1-1%202-1h13v2H6z%27%2F%3E%3C%2Fsvg%3E");
}

/* 2. 理工・情報系 (落ち着いたスレートブルー系: #4b7eb3) */
.category-science {
    background: rgba(75, 126, 179, 0.08) !important;
    color: #4b7eb3 !important;
}

.border-science::before {
    background: #4b7eb3;
}

.border-science {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27rgba%2875%2C%20126%2C%20179%2C%200.08%29%27%3E%3Cpath%20d%3D%27M19.14%2012.94c.04-.3.06-.61.06-.94%200-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24%200-.43.17-.47.41L9.25%205.35c-.59.24-1.13.56-1.62.94L5.24%205.33c-.22-.08-.47%200-.59.22L2.74%208.87c-.12.21-.08.47.12.61l2.03%201.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03%201.58c-.18.14-.23.41-.12.61l1.92%203.32c.12.22.37.29.59.22l2.39-.96c.5.38%201.03.7%201.62.94l.36%202.54c.05.24.24.41.48.41h3.84c.24%200%20.43-.17.47-.41l.36-2.54c.59-.24%201.13-.56%201.62-.94l2.39.96c.22.08.47%200%20.59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12%2015.6c-1.98%200-3.6-1.62-3.6-3.6s1.62-3.6%203.6-3.6%203.6%201.62%203.6%203.6-1.62%203.6-3.6%203.6z%27%2F%3E%3C%2Fsvg%3E");
}

.timetable-item.border-science {
    background-size: 100px;
}

.lecture-card.border-science {
    background-size: 160px;
}

/* 3. 農学・環境・水産系 (落ち着いたセージ/モスグリーン系: #5c926a) */
.category-bio {
    background: rgba(92, 146, 106, 0.08) !important;
    color: #5c926a !important;
}

.border-bio::before {
    background: #5c926a;
}

.border-bio {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27rgba%2892%2C%20146%2C%20106%2C%200.08%29%27%3E%3Cpath%20d%3D%27M21%203c-3%200-7.3%201.8-10.3%204.8C7.7%2010.8%206.5%2014.2%206.5%2017c0%20.8.2%201.5.5%202.1L3.3%2022.8l1.4%201.4%203.7-3.7c.6.3%201.3.5%202.1.5%202.8%200%206.2-1.2%209.2-4.2C22.7%2013.8%2024.5%209.5%2024.5%206.5c0-1.9-1.6-3.5-3.5-3.5z%27%2F%3E%3C%2Fsvg%3E");
}

/* 4. 医療·獣医·生命科学系 (落ち着いたプラム/パープル系: #926ca3) */
.category-medical {
    background: rgba(146, 108, 163, 0.08) !important;
    color: #926ca3 !important;
}

.border-medical::before {
    background: #926ca3;
}

.border-medical {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgba%28146%2C%20108%2C%20163%2C%200.1%29%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M2%2012h5l2-8%203%2016%202-10%201%204h7%27%2F%3E%3C%2Fsvg%3E");
}

.lecture-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 25px;
    background-color: #f0f4f8;
    /* 背景の深い紺色と絶妙に調和する、明るさを一段抑えたソフトスレート */
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(50, 79, 139, 0.08);
    border: 1px solid rgba(50, 79, 139, 0.15);
    text-align: left;
}

/* 講義一覧カード向けの余剰リボン定義削除（縦線に統合） */

.prof-image-box {
    position: relative;
    z-index: 2;
    /* 三角形リボンよりも前面に出して写真が隠れないようにする */
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(50, 79, 139, 0.05);
    border: 1px solid rgba(50, 79, 139, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.prof-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lecture-card-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
}

.lecture-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lecturer-dept {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.lecture-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #324f8b;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.prof-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #444;
    margin: 0;
}

.prof-title {
    font-size: 0.9rem;
    color: #777;
    font-weight: normal;
    margin-left: 4px;
}

.lecture-summary {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

.lecture-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(50, 79, 139, 0.1);
}

.lecture-meta-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lecture-meta-item {
    font-size: 1.05rem;
    /* 講義概要と同じ大きさ */
    font-weight: 700;
    color: #444;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lecture-meta-item i {
    color: #3868c9;
    font-size: 1.15rem;
    /* アイコンを少し大きめにして視認性アップ */
    width: 20px;
    text-align: center;
}

.lab-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3868c9 0%, #7a64d1 100%);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: bold;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(56, 104, 201, 0.2);
}

.lab-link-btn:hover {
    opacity: 0.95;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(56, 104, 201, 0.3);
    color: #ffffff;
}

/* レスポンシブ対応 */
@media screen and (max-width: 650px) {
    .lecture-card {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 15px;
        background-position: right 15px top 245px;
        background-size: 110px;
    }

    .lecture-card.border-science {
        background-size: 95px;
    }

    .prof-image-box {
        max-width: 200px;
        margin: 0 auto;
    }

    .lecture-name {
        font-size: 1.25rem;
    }

    .lecture-card-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .lab-link-btn {
        justify-content: center;
    }
}

/* アクセス・動線案内セクションのスタイル */
.access-guidance {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 15px;
    text-align: left;
}

.access-map-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(50, 79, 139, 0.15);
    background: #f0f4f8;
    /* 背景の深い紺色と絶妙に調和する、明るさを一段抑えたソフトスレート */
    box-shadow: 0 4px 15px rgba(50, 79, 139, 0.05);
}

.map-attribution {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #444;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
    pointer-events: none;
}

/* マップのプレースホルダーUIスタイル */
.map-placeholder-ui {
    min-height: 320px;
    background: linear-gradient(135deg, #f4f7fb 0%, #e9eff5 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed rgba(56, 104, 201, 0.3);
    padding: 30px;
    text-align: center;
}

.map-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #324f8b;
}

.map-placeholder-content .map-icon {
    font-size: 3.5rem;
    color: #3868c9;
    opacity: 0.9;
    margin-bottom: 5px;
}

.map-placeholder-content .map-title {
    font-size: 1.3rem;
    font-weight: 700;
}

.map-placeholder-content .map-subtitle {
    font-size: 0.95rem;
    color: #666;
}

.access-map-image {
    width: 100%;
    height: auto;
    display: block;
}

.access-route-box {
    /* 枠や背景を完全に排除し、企画概要との統一感を持たせる */
    padding: 10px 0 0 0;
}

.access-route-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #324f8b;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.access-route-title i {
    color: #3868c9;
}

.access-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.access-step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.05rem;
    color: #444;
    line-height: 1.6;
}

.step-number {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3868c9;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
}

/* =========================================================================
 * 企画概要リストのレイアウト調整（高さとラベル幅の統一）
 * ========================================================================= */
.event-details .detail-item {
    align-items: flex-start;
    /* 複数行にわたる開催日時に合わせ、上端で揃える */
}

.event-details .detail-label {
    width: 110px;
    /* 「参加費」も含め、すべてのラベルの横幅を統一 */
    text-align: center;
    /* ラベルテキストを中央寄せ */
    box-sizing: border-box;
    /* paddingを含めたサイズ固定 */
    flex-shrink: 0;
    /* 幅が潰れるのを防止 */
}

.event-details .detail-value {
    padding-top: 3px;
    /* ラベルのテキストと高さ位置を微調整 */
    line-height: 1.6;
}

.prof-lab {
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
    margin-left: 8px;
}