/* =====================================================================
   國立臺東大學 職缺應徵系統 - 前台主題
   主色取自校方官網品牌色 #318d95（藍綠），以現代化手法重新詮釋
   ===================================================================== */

:root {
    /* 品牌色 */
    --nttu-primary: #318d95;
    --nttu-primary-dark: #256b71;
    --nttu-primary-darker: #1b4e53;
    --nttu-primary-light: #4fb3bc;
    --nttu-primary-lighter: #8fd3d9;
    --nttu-primary-surface: #eef7f8;

    /* 強調色（互補暖色，用於 CTA 與標記） */
    --nttu-accent: #e08544;
    --nttu-accent-dark: #c96f30;
    --nttu-accent-surface: #fdf3ea;

    /* 中性色 */
    --nttu-ink: #14303a;
    --nttu-body: #40565f;
    --nttu-muted: #7a8f98;
    --nttu-line: #dce7ea;
    --nttu-surface: #ffffff;
    --nttu-canvas: #f4f8f9;

    /* 狀態色 */
    --nttu-success: #2f9e6f;
    --nttu-warning: #d99f2b;
    --nttu-danger: #d4553f;

    /* 圓角 */
    --nttu-r-sm: 8px;
    --nttu-r-md: 12px;
    --nttu-r-lg: 18px;
    --nttu-r-xl: 26px;

    /* 陰影 */
    --nttu-shadow-sm: 0 1px 2px rgba(20, 48, 58, .06), 0 2px 8px rgba(20, 48, 58, .05);
    --nttu-shadow-md: 0 4px 12px rgba(20, 48, 58, .08), 0 12px 28px rgba(20, 48, 58, .07);
    --nttu-shadow-lg: 0 10px 24px rgba(20, 48, 58, .10), 0 24px 56px rgba(20, 48, 58, .10);
    --nttu-ring: 0 0 0 4px rgba(49, 141, 149, .18);
}

/* ------------------------------------------------------------------ 基礎 */

body {
    background-color: var(--nttu-canvas);
    color: var(--nttu-body);
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--nttu-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

a {
    color: var(--nttu-primary-dark);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--nttu-primary);
}

/* 頁面主容器：置中且限制寬度 */
.nttu-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--nttu-canvas);
}

.nttu-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3.5rem;
}

/* ------------------------------------------------------------------ 頁首 */

.nttu-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--nttu-line);
}

.nttu-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: .85rem 1.25rem;
}

.nttu-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

/* 校方標誌（1000×169，比例約 5.9:1） */
.nttu-brand img {
    height: 64px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* 校方識別與系統名稱之間的分隔線 */
.nttu-brand__divider {
    width: 1px;
    height: 26px;
    background: var(--nttu-line);
    flex-shrink: 0;
}

.nttu-brand__system {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--nttu-primary-dark);
    white-space: nowrap;
    letter-spacing: .02em;
}

.nttu-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.nttu-brand__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--nttu-ink);
    white-space: nowrap;
}

.nttu-brand__sub {
    font-size: .78rem;
    color: var(--nttu-muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nttu-header__nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

.nttu-navlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: var(--nttu-r-xl);
    color: var(--nttu-body);
    font-weight: 600;
    font-size: .95rem;
    transition: background-color .2s ease, color .2s ease;
}

.nttu-navlink:hover {
    background: var(--nttu-primary-surface);
    color: var(--nttu-primary-dark);
}

.nttu-navlink.is-active {
    background: var(--nttu-primary-surface);
    color: var(--nttu-primary-dark);
}

.nttu-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .35rem .35rem .9rem;
    border: 1px solid var(--nttu-line);
    border-radius: var(--nttu-r-xl);
    background: #fff;
}

.nttu-user__name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--nttu-ink);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nttu-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nttu-primary), var(--nttu-primary-light));
    color: #fff;
    font-size: .95rem;
}

/* ------------------------------------------------------------------ 頁尾 */

.nttu-footer {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--nttu-primary-darker), var(--nttu-primary-dark) 55%, var(--nttu-primary));
    color: rgba(255, 255, 255, .82);
    padding: 2.25rem 1.25rem 1.5rem;
}

.nttu-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1180px;
    margin: 0 auto;
}

.nttu-footer__title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.nttu-footer__meta {
    font-size: .88rem;
    line-height: 1.9;
    margin: 0;
}

.nttu-footer__bottom {
    max-width: 1180px;
    margin: 1.5rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .82rem;
    color: rgba(255, 255, 255, .7);
    text-align: center;
}

/* ------------------------------------------------------------------ Hero */

.nttu-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--nttu-r-lg);
    background: linear-gradient(135deg, var(--nttu-primary-darker) 0%, var(--nttu-primary-dark) 45%, var(--nttu-primary) 100%);
    color: #fff;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--nttu-shadow-md);
}

/* 後台設定了背景圖時：圖片鋪底，上方壓一層品牌色遮罩維持文字可讀性 */
.nttu-hero--image {
    background-image:
        linear-gradient(135deg,
            rgba(27, 78, 83, var(--nttu-hero-overlay, .55)),
            rgba(37, 107, 113, var(--nttu-hero-overlay, .55))),
        var(--nttu-hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 有背景圖時關閉裝飾光暈，避免與照片打架 */
.nttu-hero--image::before,
.nttu-hero--image::after {
    display: none;
}

/* 後台設定了橫幅高度時：撐到指定高度並讓文字垂直置中 */
.nttu-hero--fixed {
    display: flex;
    align-items: center;
    min-height: var(--nttu-hero-min-height, 320px);
}

/* 裝飾光暈 */
.nttu-hero::before,
.nttu-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.nttu-hero::before {
    width: 320px;
    height: 320px;
    top: -140px;
    right: -80px;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
}

.nttu-hero::after {
    width: 240px;
    height: 240px;
    bottom: -120px;
    left: -60px;
    background: radial-gradient(circle, rgba(143, 211, 217, .28), transparent 70%);
}

.nttu-hero__content {
    position: relative;
    z-index: 1;
    max-width: 46rem;
}

.nttu-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .85rem;
    border-radius: var(--nttu-r-xl);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: 1rem;
}

.nttu-hero__title {
    color: #fff;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: .75rem;
}

.nttu-hero__lead {
    color: rgba(255, 255, 255, .9);
    font-size: 1.05rem;
    margin-bottom: 0;
}

.nttu-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

/* ------------------------------------------------------------------ 區塊標題 */

.nttu-section {
    margin-bottom: 2.25rem;
}

.nttu-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.nttu-section__title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--nttu-ink);
    margin: 0;
}

.nttu-section__title::before {
    content: "";
    width: 4px;
    height: 1.35em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--nttu-primary-light), var(--nttu-primary-dark));
}

.nttu-section__more {
    font-size: .92rem;
    font-weight: 600;
    color: var(--nttu-primary-dark);
}

/* ------------------------------------------------------------------ 卡片 */

.nttu-card {
    background: var(--nttu-surface);
    border: 1px solid var(--nttu-line);
    border-radius: var(--nttu-r-lg);
    box-shadow: var(--nttu-shadow-sm);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/*
 * 職缺填寫頁（Job/Fill）整欄：職缺說明常含 Word 貼上的固定寬度表格
 * （實測案例為 868.5pt ≈ 1158px），超出原欄寬（col-lg-9，約 885px）
 * 會被卡片的 overflow: hidden 裁掉。故大螢幕時整欄加寬，寬度換算後
 * 讓說明卡片的內容區（內框）上限為 1200px：1270 = 1200 + 欄位 gutter 24
 * + 卡片內距 43.2 + 框線 2（欄內所有區塊同寬對齊，維持版面整齊）。
 * 視窗不足時縮至可用寬度（-20px 預留垂直捲軸與邊距），此時說明內的
 * 表格以 max-width: 100% 等比微縮貼合，內容完整呈現不裁切。
 * row 的 justify-content-center 會讓超出容器的欄位左右均等外溢，
 * 視覺上仍以視窗置中。
 */
@media (min-width: 992px) {
    .nttu-shell .nttu-fill-col {
        width: min(1270px, calc(100vw - 20px));
    }

    .nttu-shell .nttu-card--jobdesc table {
        max-width: 100%;
    }
}

/* 視窗容不下表格時，說明卡片內容改以水平捲動，不裁切 */
.nttu-shell .nttu-card--jobdesc .nttu-card__body {
    overflow-x: auto;
}

.nttu-card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--nttu-shadow-md);
    border-color: var(--nttu-primary-lighter);
}

.nttu-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.05rem 1.35rem;
    border-bottom: 1px solid var(--nttu-line);
    background: linear-gradient(180deg, #fff, var(--nttu-primary-surface));
}

.nttu-card__title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nttu-ink);
    margin: 0;
}

.nttu-card__title i {
    color: var(--nttu-primary);
}

.nttu-card__body {
    padding: 1.35rem;
}

/* CoreUI/Bootstrap 既有 .card 的柔化（不影響上面的自訂卡片） */
.nttu-shell .card {
    border: 1px solid var(--nttu-line);
    border-radius: var(--nttu-r-lg);
    box-shadow: var(--nttu-shadow-sm);
}

.nttu-shell .card-header {
    border-bottom: 1px solid var(--nttu-line);
    background: linear-gradient(180deg, #fff, var(--nttu-primary-surface));
    font-weight: 700;
    color: var(--nttu-ink);
}

/* ------------------------------------------------------------------ 職缺卡片 */

.nttu-jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.25rem;
}

.nttu-job {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--nttu-surface);
    border: 1px solid var(--nttu-line);
    border-radius: var(--nttu-r-lg);
    box-shadow: var(--nttu-shadow-sm);
    padding: 1.5rem 1.4rem 1.25rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* 左側品牌色指示條 */
.nttu-job::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--nttu-primary-light), var(--nttu-primary-dark));
    opacity: .85;
}

.nttu-job:hover {
    transform: translateY(-4px);
    box-shadow: var(--nttu-shadow-lg);
    border-color: var(--nttu-primary-lighter);
}

.nttu-job__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.nttu-job__title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--nttu-ink);
    line-height: 1.5;
    margin: 0;
}

.nttu-job__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    font-size: .9rem;
    color: var(--nttu-muted);
    margin-bottom: 1.15rem;
}

.nttu-job__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.nttu-job__meta i {
    color: var(--nttu-primary);
}

.nttu-job__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px dashed var(--nttu-line);
}

/* ------------------------------------------------------------------ 標籤 */

.nttu-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .7rem;
    border-radius: var(--nttu-r-xl);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.nttu-tag--primary {
    background: var(--nttu-primary-surface);
    color: var(--nttu-primary-dark);
    border: 1px solid rgba(49, 141, 149, .22);
}

.nttu-tag--accent {
    background: var(--nttu-accent-surface);
    color: var(--nttu-accent-dark);
    border: 1px solid rgba(224, 133, 68, .26);
}

.nttu-tag--success {
    background: #e9f6f0;
    color: #1f7d55;
    border: 1px solid rgba(47, 158, 111, .24);
}

.nttu-tag--muted {
    background: #f1f5f6;
    color: var(--nttu-muted);
    border: 1px solid var(--nttu-line);
}

.nttu-tag--new {
    background: linear-gradient(135deg, var(--nttu-accent), #eda662);
    color: #fff;
    border: 0;
}

/* ------------------------------------------------------------------ 按鈕 */

.nttu-shell .btn {
    border-radius: var(--nttu-r-xl);
    font-weight: 700;
    letter-spacing: .01em;
    padding: .55rem 1.35rem;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.nttu-shell .btn:active {
    transform: translateY(1px);
}

.nttu-shell .btn:focus-visible {
    box-shadow: var(--nttu-ring);
    outline: none;
}

.btn-nttu {
    background: linear-gradient(135deg, var(--nttu-primary), var(--nttu-primary-dark));
    border: 1px solid transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(49, 141, 149, .28);
}

.btn-nttu:hover,
.btn-nttu:focus {
    background: linear-gradient(135deg, var(--nttu-primary-dark), var(--nttu-primary-darker));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(49, 141, 149, .34);
}

.btn-nttu-outline {
    background: #fff;
    border: 1.5px solid var(--nttu-primary);
    color: var(--nttu-primary-dark);
}

.btn-nttu-outline:hover,
.btn-nttu-outline:focus {
    background: var(--nttu-primary-surface);
    border-color: var(--nttu-primary-dark);
    color: var(--nttu-primary-darker);
    transform: translateY(-2px);
}

.btn-nttu-ghost {
    background: transparent;
    border: 1px solid var(--nttu-line);
    color: var(--nttu-body);
}

.btn-nttu-ghost:hover,
.btn-nttu-ghost:focus {
    background: #fff;
    border-color: var(--nttu-primary-lighter);
    color: var(--nttu-primary-dark);
}

.btn-nttu-accent {
    background: linear-gradient(135deg, var(--nttu-accent), var(--nttu-accent-dark));
    border: 1px solid transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(224, 133, 68, .3);
}

.btn-nttu-accent:hover,
.btn-nttu-accent:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(224, 133, 68, .36);
}

.btn-nttu-hero {
    background: #fff;
    color: var(--nttu-primary-dark);
    border: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.btn-nttu-hero:hover,
.btn-nttu-hero:focus {
    color: var(--nttu-primary-darker);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.btn-nttu-hero-outline {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .55);
}

.btn-nttu-hero-outline:hover,
.btn-nttu-hero-outline:focus {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ 表單 */

.nttu-shell .form-label {
    font-weight: 700;
    color: var(--nttu-ink);
    font-size: .95rem;
    margin-bottom: .4rem;
}

.nttu-shell .form-control,
.nttu-shell .form-select {
    border: 1.5px solid var(--nttu-line);
    border-radius: var(--nttu-r-md);
    padding: .65rem .9rem;
    color: var(--nttu-ink);
    background-color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nttu-shell .form-control::placeholder {
    color: #a8bcc3;
}

.nttu-shell .form-control:focus,
.nttu-shell .form-select:focus {
    border-color: var(--nttu-primary);
    box-shadow: var(--nttu-ring);
}

.nttu-shell .form-control[readonly] {
    background-color: #f5f9fa;
    color: var(--nttu-body);
}

.nttu-shell .form-check-input {
    width: 1.15em;
    height: 1.15em;
    border: 1.5px solid var(--nttu-line);
    cursor: pointer;
}

.nttu-shell .form-check-input:checked {
    background-color: var(--nttu-primary);
    border-color: var(--nttu-primary);
}

.nttu-shell .form-check-input:focus {
    border-color: var(--nttu-primary);
    box-shadow: var(--nttu-ring);
}

.nttu-shell .form-check-label {
    cursor: pointer;
    font-weight: 600;
    color: var(--nttu-body);
}

.nttu-shell .input-group > .form-control:focus {
    z-index: 3;
}

.nttu-required {
    color: var(--nttu-danger);
    font-weight: 700;
}

.nttu-hint {
    font-size: .85rem;
    color: var(--nttu-muted);
    margin-top: .35rem;
}

/* 表單分段標題 */
.nttu-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.75rem;
}

.nttu-fieldset__legend {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--nttu-primary-dark);
    padding-bottom: .6rem;
    margin-bottom: 1.15rem;
    border-bottom: 2px solid var(--nttu-primary-surface);
}

.nttu-fieldset__legend i {
    color: var(--nttu-primary);
}

/* ------------------------------------------------------------------ 步驟指示 */

.nttu-steps {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 2rem;
}

.nttu-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    position: relative;
    text-align: center;
}

/* 連接線 */
.nttu-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: var(--nttu-line);
}

.nttu-step.is-done:not(:last-child)::after {
    background: var(--nttu-primary-light);
}

.nttu-step__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--nttu-line);
    color: var(--nttu-muted);
    font-weight: 800;
    font-size: .95rem;
    position: relative;
    z-index: 1;
    transition: all .25s ease;
}

.nttu-step__label {
    font-size: .88rem;
    font-weight: 700;
    color: var(--nttu-muted);
    line-height: 1.4;
}

.nttu-step.is-active .nttu-step__dot {
    background: linear-gradient(135deg, var(--nttu-primary), var(--nttu-primary-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--nttu-ring);
}

.nttu-step.is-active .nttu-step__label {
    color: var(--nttu-primary-dark);
}

.nttu-step.is-done .nttu-step__dot {
    background: var(--nttu-primary-surface);
    border-color: var(--nttu-primary-light);
    color: var(--nttu-primary-dark);
}

.nttu-step.is-done .nttu-step__label {
    color: var(--nttu-primary-dark);
}

/* ------------------------------------------------------------------ 提示訊息 */

.nttu-shell .alert {
    border: 0;
    border-left: 4px solid transparent;
    border-radius: var(--nttu-r-md);
    padding: .95rem 1.15rem;
    font-weight: 500;
}

.nttu-shell .alert-info {
    background: var(--nttu-primary-surface);
    border-left-color: var(--nttu-primary);
    color: var(--nttu-primary-darker);
}

.nttu-shell .alert-success {
    background: #e9f6f0;
    border-left-color: var(--nttu-success);
    color: #1c6b49;
}

.nttu-shell .alert-warning {
    background: #fdf6e5;
    border-left-color: var(--nttu-warning);
    color: #8a6318;
}

.nttu-shell .alert-danger {
    background: #fceceb;
    border-left-color: var(--nttu-danger);
    color: #9b3527;
}

/* ------------------------------------------------------------------ 資料摘要 */

.nttu-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem 1.5rem;
}

.nttu-summary__item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.nttu-summary__item--wide {
    grid-column: 1 / -1;
}

.nttu-summary__label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--nttu-muted);
    letter-spacing: .04em;
}

.nttu-summary__value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nttu-ink);
    word-break: break-all;
}

/* ------------------------------------------------------------------ 列表 */

.nttu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nttu-list__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem .35rem;
    border-bottom: 1px dashed var(--nttu-line);
    transition: background-color .2s ease, padding-left .2s ease;
}

.nttu-list__item:last-child {
    border-bottom: 0;
}

.nttu-list__item:hover {
    background: var(--nttu-primary-surface);
    padding-left: .75rem;
    border-radius: var(--nttu-r-sm);
}

.nttu-list__date {
    flex-shrink: 0;
    font-size: .82rem;
    font-weight: 700;
    color: var(--nttu-primary-dark);
    background: var(--nttu-primary-surface);
    border-radius: var(--nttu-r-sm);
    padding: .3rem .6rem;
    white-space: nowrap;
}

.nttu-list__text {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--nttu-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nttu-list__item:hover .nttu-list__text {
    color: var(--nttu-primary-dark);
}

/* ------------------------------------------------------------------ 快速連結 */

/* 側欄寬度有限，欄位取小值讓一排可放三個，避免連結一多就把卡片撐得過高 */
.nttu-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: .6rem;
}

.nttu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .6rem .4rem;
    border: 1px solid var(--nttu-line);
    border-radius: var(--nttu-r-md);
    background: #fff;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.nttu-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--nttu-shadow-md);
    border-color: var(--nttu-primary-lighter);
}

.nttu-link img {
    max-width: 100%;
    height: 34px;
    object-fit: contain;
}

/* 連結名稱最多兩行，過長時截斷（完整名稱仍在 title 屬性） */
.nttu-link__text {
    font-size: .78rem;
    font-weight: 700;
    color: var(--nttu-body);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ------------------------------------------------------------------ 檔案上傳欄位 */

.nttu-upload {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.nttu-files {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.nttu-files:empty {
    display: none;
}

/* 單一已上傳檔案：縮圖或圖示 + 檔名 + 移除鈕 */
.nttu-file {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .35rem .6rem .35rem .4rem;
    border: 1px solid var(--nttu-line);
    border-radius: var(--nttu-r-md);
    background: #fff;
}

.nttu-file__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--nttu-r-sm);
    cursor: zoom-in;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.nttu-file__thumb:hover {
    transform: scale(1.05);
}

.nttu-file__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--nttu-r-sm);
    background: var(--nttu-primary-surface);
    color: var(--nttu-primary-dark);
    font-size: 1.5rem;
    flex-shrink: 0;
    text-decoration: none;
}

.nttu-file__icon:hover {
    background: var(--nttu-primary-lighter);
    color: var(--nttu-primary-darker);
}

.nttu-file__name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--nttu-ink);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nttu-file__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nttu-muted);
    font-size: .8rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .2s ease, color .2s ease;
}

.nttu-file__remove:hover {
    background: #fceceb;
    color: var(--nttu-danger);
}

/* ------------------------------------------------------------------ 圖片放大 */

.nttu-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(10, 25, 30, .88);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
}

.nttu-lightbox[hidden] {
    display: none;
}

.nttu-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--nttu-r-md);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    cursor: default;
}

.nttu-lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .2s ease;
}

.nttu-lightbox__close:hover {
    background: rgba(255, 255, 255, .3);
}

/* ------------------------------------------------------------------ 空狀態 */

.nttu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--nttu-muted);
}

.nttu-empty i {
    font-size: 2.75rem;
    color: var(--nttu-primary-lighter);
}

.nttu-empty__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nttu-body);
}

/* ------------------------------------------------------------------ 統計數字 */

.nttu-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.nttu-stat {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--nttu-r-md);
    padding: 1rem 1.15rem;
    backdrop-filter: blur(6px);
}

.nttu-stat__num {
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
}

.nttu-stat__label {
    font-size: .85rem;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
}

/* ------------------------------------------------------------------ 問卷填寫頁微調 */

.nttu-shell .accordion-button:not(.collapsed) {
    background-color: var(--nttu-primary-surface);
    color: var(--nttu-primary-darker);
    box-shadow: none;
}

.nttu-shell .accordion-button:focus {
    border-color: var(--nttu-primary-lighter);
    box-shadow: var(--nttu-ring);
}

.nttu-shell .form-check-input[type=radio]:checked,
.nttu-shell .form-check-input[type=checkbox]:checked {
    background-color: var(--nttu-primary);
    border-color: var(--nttu-primary);
}

.nttu-shell .progress-bar {
    background-color: var(--nttu-primary);
}

.nttu-shell .table > thead {
    background: var(--nttu-primary-surface);
    color: var(--nttu-ink);
}

.nttu-shell .table > tbody > tr:hover > * {
    background-color: var(--nttu-primary-surface);
}

/* ------------------------------------------------------------------ 動畫 */

@keyframes nttuFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nttu-animate {
    animation: nttuFadeUp .5s ease both;
}

.nttu-animate:nth-child(2) { animation-delay: .06s; }
.nttu-animate:nth-child(3) { animation-delay: .12s; }
.nttu-animate:nth-child(4) { animation-delay: .18s; }
.nttu-animate:nth-child(5) { animation-delay: .24s; }
.nttu-animate:nth-child(6) { animation-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
    .nttu-animate,
    .nttu-shell .btn,
    .nttu-card,
    .nttu-job,
    .nttu-link {
        animation: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------------ 響應式 */

@media (max-width: 767.98px) {
    .nttu-main {
        padding: 1.25rem 1rem 2.5rem;
    }

    .nttu-hero {
        padding: 2rem 1.35rem;
    }

    /* 小螢幕上限制自訂高度，避免橫幅佔滿多個畫面 */
    .nttu-hero--fixed {
        min-height: min(var(--nttu-hero-min-height, 320px), 70vh);
    }

    /* 標誌在小螢幕縮小，並隱藏系統名稱，避免擠壓右側導覽 */
    .nttu-brand img {
        height: 44px;
    }

    .nttu-brand__divider,
    .nttu-brand__system {
        display: none;
    }

    .nttu-brand__sub {
        display: none;
    }

    .nttu-user__name {
        display: none;
    }

    .nttu-user {
        padding: .3rem;
    }

    .nttu-jobs {
        grid-template-columns: 1fr;
    }

    .nttu-step__label {
        font-size: .75rem;
    }

    .nttu-section__title {
        font-size: 1.15rem;
    }
}

/* ============================================================
   應徵進度指示（我的應徵紀錄）
   三段式：填寫資料 → 已送出 → 評分完成
   已完成的階段套 .is-done
   ============================================================ */

.nttu-progress {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    margin: .35rem 0 .9rem;
}

.nttu-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    min-width: 4.5rem;
    text-align: center;
}

.nttu-progress__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--nttu-line);
    background: #fff;
    color: var(--nttu-muted);
    font-size: .9rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nttu-progress__step.is-done .nttu-progress__dot {
    border-color: var(--nttu-primary);
    background: var(--nttu-primary);
    color: #fff;
}

.nttu-progress__label {
    font-size: .76rem;
    line-height: 1.2;
    color: var(--nttu-muted);
}

.nttu-progress__step.is-done .nttu-progress__label {
    color: var(--nttu-primary-darker);
    font-weight: 600;
}

/* 連接線：對齊圓點垂直中心 */
.nttu-progress__bar {
    flex: 1 1 auto;
    height: 2px;
    margin-top: 1rem;
    background: var(--nttu-line);
    border-radius: 1px;
    transition: background-color .2s ease;
}

.nttu-progress__bar.is-done {
    background: var(--nttu-primary);
}

@media (prefers-reduced-motion: reduce) {
    .nttu-progress__dot,
    .nttu-progress__bar {
        transition: none;
    }
}