.yin-achievement-detail {
--yin-navy: #1a2e5a;
--yin-blue: #2f80ed;
--yin-orange: #f2712f;
--yin-ink: #172033;
--yin-muted: #5e6b7f;
--yin-line: #dce4ee;
--yin-soft: #f4f7fb;
--yin-card: #ffffff;
--yin-radius-lg: 28px;
--yin-radius-md: 18px;
--yin-shadow: 0 18px 55px rgba(26, 46, 90, 0.12);
position: relative;
width: 100%;
max-width: 100%;
overflow: visible;
color: var(--yin-ink);
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 18%, #ffffff 100%);
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
"PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
line-height: 1.75;
text-align: left;
isolation: isolate;
}
.yin-achievement-detail,
.yin-achievement-detail *,
.yin-achievement-detail *::before,
.yin-achievement-detail *::after {
box-sizing: border-box;
}
.yin-achievement-detail [hidden] {
display: none !important;
}
.yin-achievement-detail a {
color: inherit;
text-decoration: none;
}
.yin-achievement-detail button,
.yin-achievement-detail summary {
font: inherit;
}
.yin-achievement-detail button {
color: inherit;
}
.yin-achievement-detail h1,
.yin-achievement-detail h2,
.yin-achievement-detail h3,
.yin-achievement-detail p,
.yin-achievement-detail a,
.yin-achievement-detail button,
.yin-achievement-detail summary {
font-family: inherit;
font-style: normal;
}
.yin-achievement-detail img {
display: block;
max-width: 100%;
}
.yin-achievement-detail :where(h1, h2, h3, p, ul) {
margin-top: 0;
}
.yin-achievement-detail :where(p, li, a, h1, h2, h3, strong, span) {
overflow-wrap: anywhere;
}
.yin-achievement-detail .yin-skip-link {
position: absolute;
z-index: 50;
top: 10px;
left: 10px;
transform: translateY(-160%);
padding: 10px 14px;
border-radius: 10px;
color: #ffffff;
background: var(--yin-navy);
}
.yin-achievement-detail .yin-skip-link:focus {
transform: translateY(0);
}
.yin-achievement-detail .yin-shell {
width: min(1120px, calc(100% - 48px));
margin-inline: auto;
}
.yin-achievement-detail .yin-main {
padding: 28px 0 80px;
}
.yin-achievement-detail .yin-hero {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
align-items: stretch;
min-height: 620px;
border: 1px solid rgba(220, 228, 238, 0.9);
border-radius: var(--yin-radius-lg);
overflow: hidden;
background: var(--yin-card);
box-shadow: var(--yin-shadow);
}
.yin-achievement-detail .yin-hero-visual {
position: relative;
min-height: 360px;
overflow: hidden;
background:
radial-gradient(circle at 23% 26%, rgba(255, 255, 255, 0.22), transparent 22%),
radial-gradient(circle at 75% 72%, rgba(47, 128, 237, 0.48), transparent 28%),
linear-gradient(145deg, var(--yin-navy), #223f79 58%, var(--yin-blue));
}
.yin-achievement-detail .yin-hero-visual::before,
.yin-achievement-detail .yin-hero-visual::after {
position: absolute;
content: "";
border: 2px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
transform: rotate(-18deg);
}
.yin-achievement-detail .yin-hero-visual::before {
width: 130%;
height: 42%;
top: 22%;
left: -42%;
}
.yin-achievement-detail .yin-hero-visual::after {
width: 90%;
height: 22%;
right: -24%;
bottom: 18%;
}
.yin-achievement-detail .yin-hero-picture,
.yin-achievement-detail .yin-hero-picture img {
width: 100%;
height: 100%;
}
.yin-achievement-detail .yin-hero-picture img {
position: absolute;
inset: 0;
object-fit: cover;
}
.yin-achievement-detail .yin-visual-mark {
position: absolute;
z-index: 1;
left: 32px;
bottom: 32px;
max-width: calc(100% - 64px);
color: #ffffff;
}
.yin-achievement-detail .yin-visual-kicker {
display: block;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.76);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.yin-achievement-detail .yin-visual-title {
display: block;
font-size: clamp(1.8rem, 4vw, 3.8rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.035em;
}
.yin-achievement-detail .yin-hero-card {
min-width: 0;
padding: clamp(28px, 4vw, 54px);
}
.yin-achievement-detail .yin-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.yin-achievement-detail .yin-tag,
.yin-achievement-detail .yin-badge,
.yin-achievement-detail .yin-status {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 4px 11px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 800;
line-height: 1.35;
}
.yin-achievement-detail .yin-tag {
color: var(--yin-navy);
background: #eaf2ff;
}
.yin-achievement-detail .yin-tag--primary {
color: #ffffff;
background: var(--yin-navy);
}
.yin-achievement-detail .yin-updated {
color: var(--yin-muted);
font-size: 0.82rem;
font-weight: 700;
}
.yin-achievement-detail .yin-eyebrow {
margin-bottom: 9px;
color: var(--yin-orange);
font-weight: 900;
letter-spacing: 0.02em;
}
.yin-achievement-detail .yin-hero-title {
margin-bottom: 16px;
color: var(--yin-navy);
font-size: clamp(2rem, 4.4vw, 3.9rem);
font-weight: 950;
line-height: 1.12;
letter-spacing: -0.045em;
}
.yin-achievement-detail .yin-hero-subtitle {
margin-bottom: 24px;
color: #3f4d63;
font-size: 1.04rem;
white-space: pre-line;
}
.yin-achievement-detail .yin-tabbed-card {
border: 1px solid var(--yin-line);
border-radius: var(--yin-radius-md);
overflow: hidden;
background: var(--yin-soft);
}
.yin-achievement-detail .yin-segmented {
display: flex;
gap: 4px;
padding: 5px;
border-bottom: 1px solid var(--yin-line);
background: rgba(255, 255, 255, 0.82);
}
.yin-achievement-detail .yin-tab {
flex: 1 1 0;
min-width: 0;
min-height: 42px;
padding: 8px 12px;
border: 0;
border-radius: 12px;
cursor: pointer;
color: #4c5a70;
background: transparent;
font-weight: 850;
}
.yin-achievement-detail .yin-tab[aria-selected="true"] {
color: #ffffff;
background: var(--yin-navy);
box-shadow: 0 8px 20px rgba(26, 46, 90, 0.18);
}
.yin-achievement-detail .yin-tab-panel {
padding: 20px 22px 22px;
}
.yin-achievement-detail .yin-tab-panel h3 {
margin-bottom: 8px;
color: var(--yin-navy);
font-size: 1rem;
}
.yin-achievement-detail .yin-tab-panel ul {
margin-bottom: 0;
padding-left: 1.25rem;
}
.yin-achievement-detail .yin-actions {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-top: 24px;
}
.yin-achievement-detail .yin-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 10px 18px;
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
font-weight: 900;
line-height: 1.35;
text-align: center;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
background-color 0.18s ease;
}
.yin-achievement-detail .yin-button:hover {
transform: translateY(-1px);
}
.yin-achievement-detail .yin-button--primary {
color: #ffffff;
background: var(--yin-orange);
box-shadow: 0 10px 24px rgba(242, 113, 47, 0.24);
}
.yin-achievement-detail .yin-button--secondary {
color: #ffffff;
background: var(--yin-navy);
}
.yin-achievement-detail .yin-button--outline {
border-color: #c7d2e1;
color: var(--yin-navy);
background: #ffffff;
}
.yin-achievement-detail .yin-share-wrap {
position: relative;
}
.yin-achievement-detail .yin-share-popover {
position: absolute;
z-index: 8;
top: calc(100% + 8px);
right: 0;
width: min(240px, 78vw);
padding: 10px;
border: 1px solid var(--yin-line);
border-radius: 16px;
background: #ffffff;
box-shadow: var(--yin-shadow);
}
.yin-achievement-detail .yin-share-option {
width: 100%;
padding: 9px 11px;
border: 0;
border-radius: 10px;
cursor: pointer;
background: transparent;
font-weight: 800;
text-align: left;
}
.yin-achievement-detail .yin-share-option:hover {
background: var(--yin-soft);
}
.yin-achievement-detail .yin-section {
padding: clamp(52px, 8vw, 92px) 0 0;
}
.yin-achievement-detail .yin-section-title {
margin-bottom: 11px;
color: var(--yin-navy);
font-size: clamp(1.55rem, 3vw, 2.35rem);
font-weight: 950;
line-height: 1.2;
letter-spacing: -0.025em;
}
.yin-achievement-detail .yin-section-subtitle {
max-width: 760px;
margin-bottom: 26px;
color: var(--yin-muted);
}
.yin-achievement-detail .yin-section-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.yin-achievement-detail .yin-section-header .yin-section-title {
margin-bottom: 0;
}
.yin-achievement-detail .yin-section-header .yin-segmented {
flex: 0 1 360px;
border: 1px solid var(--yin-line);
border-radius: 15px;
}
.yin-achievement-detail .yin-relevance-card {
padding: clamp(26px, 4.5vw, 48px);
border: 1px solid #dbe8fb;
border-radius: var(--yin-radius-lg);
background:
radial-gradient(circle at 94% 14%, rgba(47, 128, 237, 0.13), transparent 28%),
#f6f9ff;
}
.yin-achievement-detail .yin-relevance-card p {
max-width: 880px;
margin-bottom: 14px;
color: #334157;
font-size: clamp(1rem, 1.7vw, 1.15rem);
white-space: pre-line;
}
.yin-achievement-detail .yin-relevance-card p:last-child {
margin-bottom: 0;
}
.yin-achievement-detail .yin-debug-list {
display: grid;
gap: 12px;
}
.yin-achievement-detail .yin-debug-row {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 16px;
padding: 20px;
border: 1px solid var(--yin-line);
border-radius: var(--yin-radius-md);
background: #ffffff;
}
.yin-achievement-detail .yin-debug-number {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
color: #ffffff;
background: var(--yin-blue);
font-weight: 950;
}
.yin-achievement-detail .yin-debug-row h3 {
margin-bottom: 4px;
color: var(--yin-navy);
font-size: 1.05rem;
}
.yin-achievement-detail .yin-debug-row p {
margin-bottom: 0;
color: var(--yin-muted);
white-space: pre-line;
}
.yin-achievement-detail .yin-outcome-grid,
.yin-achievement-detail .yin-related-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.yin-achievement-detail .yin-outcome-card,
.yin-achievement-detail .yin-related-card {
min-width: 0;
padding: 22px;
border: 1px solid var(--yin-line);
border-radius: var(--yin-radius-md);
background: #ffffff;
box-shadow: 0 9px 30px rgba(26, 46, 90, 0.07);
}
.yin-achievement-detail .yin-outcome-card--wide {
grid-column: 1 / -1;
}
.yin-achievement-detail .yin-outcome-label,
.yin-achievement-detail .yin-related-eyebrow {
display: block;
margin-bottom: 8px;
color: var(--yin-blue);
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.04em;
}
.yin-achievement-detail .yin-outcome-value {
display: block;
max-width: 100%;
margin-bottom: 8px;
color: var(--yin-navy);
font-size: clamp(1.2rem, 2.4vw, 1.8rem);
font-weight: 950;
line-height: 1.2;
overflow-wrap: anywhere;
word-break: break-word;
}
.yin-achievement-detail .yin-outcome-card p,
.yin-achievement-detail .yin-related-card p {
margin-bottom: 0;
color: var(--yin-muted);
white-space: pre-line;
}
.yin-achievement-detail .yin-tracking {
margin-top: 18px;
padding: 22px;
border-left: 5px solid var(--yin-orange);
border-radius: 0 var(--yin-radius-md) var(--yin-radius-md) 0;
background: #fff8f3;
}
.yin-achievement-detail .yin-tracking h3 {
margin-bottom: 8px;
color: var(--yin-navy);
}
.yin-achievement-detail .yin-tracking ul {
margin-bottom: 0;
padding-left: 1.25rem;
}
.yin-achievement-detail .yin-horizontal-scroll {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(250px, 31%);
gap: 15px;
padding: 2px 2px 14px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scrollbar-color: #a9b8cc transparent;
}
.yin-achievement-detail .yin-video-card {
min-width: 0;
padding: 0;
border: 1px solid var(--yin-line);
border-radius: var(--yin-radius-md);
overflow: hidden;
cursor: pointer;
background: #ffffff;
scroll-snap-align: start;
text-align: left;
}
.yin-achievement-detail .yin-video-thumb {
position: relative;
display: grid;
place-items: center;
min-height: 210px;
padding: 18px;
color: #ffffff;
background:
radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.22), transparent 25%),
linear-gradient(145deg, var(--yin-navy), var(--yin-blue));
background-position: center;
background-size: cover;
}
.yin-achievement-detail .yin-video-card[data-orientation="vertical"] .yin-video-thumb {
min-height: 280px;
}
.yin-achievement-detail .yin-play {
display: grid;
place-items: center;
width: 62px;
height: 62px;
padding-left: 4px;
border-radius: 999px;
color: var(--yin-navy);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);
}
.yin-achievement-detail .yin-video-copy {
padding: 17px;
}
.yin-achievement-detail .yin-video-copy h3 {
margin: 7px 0 0;
color: var(--yin-navy);
font-size: 1rem;
line-height: 1.45;
}
.yin-achievement-detail .yin-timeline-list {
position: relative;
display: grid;
gap: 14px;
padding-left: 30px;
}
.yin-achievement-detail .yin-timeline-list::before {
position: absolute;
top: 18px;
bottom: 18px;
left: 9px;
width: 2px;
content: "";
background: #c8d6e8;
}
.yin-achievement-detail .yin-timeline-item {
position: relative;
border: 1px solid var(--yin-line);
border-radius: var(--yin-radius-md);
background: #ffffff;
}
.yin-achievement-detail .yin-timeline-item::before {
position: absolute;
top: 28px;
left: -29px;
width: 16px;
height: 16px;
border: 4px solid #ffffff;
border-radius: 999px;
content: "";
background: var(--yin-blue);
box-shadow: 0 0 0 2px var(--yin-blue);
}
.yin-achievement-detail .yin-timeline-toggle {
display: block;
padding: 20px 22px;
cursor: pointer;
list-style: none;
}
.yin-achievement-detail .yin-timeline-toggle::-webkit-details-marker {
display: none;
}
.yin-achievement-detail .yin-timeline-topline {
display: flex;
justify-content: space-between;
gap: 14px;
margin-bottom: 6px;
}
.yin-achievement-detail .yin-timeline-date {
color: var(--yin-blue);
font-size: 0.84rem;
font-weight: 900;
}
.yin-achievement-detail .yin-timeline-state {
flex: 0 0 auto;
color: var(--yin-muted);
font-size: 0.82rem;
font-weight: 800;
}
.yin-achievement-detail .yin-timeline-title {
margin-bottom: 5px;
color: var(--yin-navy);
font-size: 1.1rem;
line-height: 1.4;
}
.yin-achievement-detail .yin-timeline-summary {
margin-bottom: 0;
color: var(--yin-muted);
white-space: pre-line;
}
.yin-achievement-detail .yin-timeline-detail {
padding: 20px 22px 22px;
border-top: 1px solid var(--yin-line);
border-radius: 0 0 var(--yin-radius-md) var(--yin-radius-md);
background: var(--yin-soft);
}
.yin-achievement-detail .yin-timeline-detail > p {
white-space: pre-line;
}
.yin-achievement-detail .yin-response {
margin-top: 14px;
padding: 16px;
border-radius: 14px;
background: #ffffff;
}
.yin-achievement-detail .yin-response strong {
display: block;
margin-bottom: 4px;
color: var(--yin-navy);
}
.yin-achievement-detail .yin-response p {
margin-bottom: 0;
white-space: pre-line;
}
.yin-achievement-detail .yin-badge-row {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 13px;
}
.yin-achievement-detail .yin-badge {
color: #365176;
background: #e9eff7;
}
.yin-achievement-detail .yin-source-links {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: baseline;
margin-top: 14px;
}
.yin-achievement-detail .yin-source-links a,
.yin-achievement-detail .yin-source-list a {
color: #155fba;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.yin-achievement-detail .yin-source-locator {
color: var(--yin-muted);
font-size: 0.9rem;
}
.yin-achievement-detail .yin-source-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.yin-achievement-detail .yin-source-list li {
padding: 14px 16px;
border: 1px solid var(--yin-line);
border-radius: 14px;
background: #ffffff;
}
.yin-achievement-detail .yin-related-card {
display: flex;
flex-direction: column;
}
.yin-achievement-detail .yin-related-card h3 {
margin-bottom: 8px;
color: var(--yin-navy);
font-size: 1.12rem;
}
.yin-achievement-detail .yin-related-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 18px;
}
.yin-achievement-detail .yin-status {
color: #8b481f;
background: #fff0e6;
}
.yin-achievement-detail .yin-related-link {
color: var(--yin-blue);
font-weight: 900;
}
.yin-achievement-detail .yin-profile-panel,
.yin-achievement-detail .yin-cta-panel {
display: grid;
gap: 24px;
padding: clamp(26px, 4.5vw, 48px);
border-radius: var(--yin-radius-lg);
}
.yin-achievement-detail .yin-profile-panel {
grid-template-columns: 118px minmax(0, 1fr);
align-items: center;
border: 1px solid var(--yin-line);
background: #ffffff;
}
.yin-achievement-detail .yin-avatar {
display: grid;
place-items: center;
width: 118px;
height: 118px;
border-radius: 32px;
overflow: hidden;
color: #ffffff;
background: linear-gradient(145deg, var(--yin-navy), var(--yin-blue));
font-size: 2.3rem;
font-weight: 950;
}
.yin-achievement-detail .yin-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.yin-achievement-detail .yin-profile-panel h2,
.yin-achievement-detail .yin-cta-panel h2 {
margin-bottom: 6px;
color: var(--yin-navy);
font-size: clamp(1.45rem, 3vw, 2rem);
}
.yin-achievement-detail .yin-profile-role {
margin-bottom: 8px;
color: var(--yin-blue);
font-weight: 900;
}
.yin-achievement-detail .yin-profile-intro {
margin-bottom: 14px;
color: var(--yin-muted);
white-space: pre-line;
}
.yin-achievement-detail .yin-cta-panel {
color: #ffffff;
background:
radial-gradient(circle at 85% 20%, rgba(47, 128, 237, 0.72), transparent 34%),
var(--yin-navy);
}
.yin-achievement-detail .yin-cta-panel h2 {
color: #ffffff;
}
.yin-achievement-detail .yin-cta-panel p {
margin-bottom: 0;
color: rgba(255, 255, 255, 0.78);
white-space: pre-line;
}
.yin-achievement-detail .yin-cta-panel .yin-button--outline {
border-color: rgba(255, 255, 255, 0.48);
color: #ffffff;
background: transparent;
}
.yin-achievement-detail .yin-video-dialog {
width: min(920px, calc(100% - 32px));
max-width: none;
padding: 0;
border: 0;
border-radius: 20px;
overflow: hidden;
color: #ffffff;
background: #0b1220;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}
.yin-achievement-detail .yin-video-dialog::backdrop {
background: rgba(7, 14, 28, 0.82);
}
.yin-achievement-detail .yin-dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
}
.yin-achievement-detail .yin-dialog-title {
margin: 0;
font-size: 1rem;
}
.yin-achievement-detail .yin-dialog-close {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 999px;
cursor: pointer;
color: #ffffff;
background: rgba(255, 255, 255, 0.14);
}
.yin-achievement-detail .yin-dialog-frame {
aspect-ratio: 16 / 9;
background: #000000;
}
.yin-achievement-detail .yin-dialog-frame iframe {
width: 100%;
height: 100%;
border: 0;
}
.yin-achievement-detail :where(a, button, summary):focus-visible {
outline: 3px solid #f5a36f;
outline-offset: 3px;
}
@media (max-width: 1024px) {
.yin-achievement-detail .yin-shell {
width: min(100% - 36px, 940px);
}
.yin-achievement-detail .yin-hero {
grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
}
.yin-achievement-detail .yin-hero-card {
padding: 34px;
}
}
@media (max-width: 768px) {
.yin-achievement-detail .yin-shell {
width: min(100% - 28px, 680px);
}
.yin-achievement-detail .yin-main {
padding-top: 14px;
}
.yin-achievement-detail .yin-hero {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.yin-achievement-detail .yin-hero-visual {
min-height: 300px;
}
.yin-achievement-detail .yin-section-header {
align-items: stretch;
flex-direction: column;
}
.yin-achievement-detail .yin-section-header .yin-segmented {
flex-basis: auto;
}
.yin-achievement-detail .yin-outcome-grid,
.yin-achievement-detail .yin-related-grid {
grid-template-columns: minmax(0, 1fr);
}
.yin-achievement-detail .yin-outcome-card--wide {
grid-column: auto;
}
.yin-achievement-detail .yin-horizontal-scroll {
grid-auto-columns: minmax(240px, 76%);
}
}
@media (max-width: 430px) {
.yin-achievement-detail {
font-size: 15px;
}
.yin-achievement-detail .yin-shell {
width: calc(100% - 20px);
}
.yin-achievement-detail .yin-hero {
border-radius: 22px;
}
.yin-achievement-detail .yin-hero-visual {
min-height: 235px;
}
.yin-achievement-detail .yin-visual-mark {
left: 22px;
bottom: 22px;
max-width: calc(100% - 44px);
}
.yin-achievement-detail .yin-hero-card {
padding: 24px 20px 26px;
}
.yin-achievement-detail .yin-hero-title {
font-size: clamp(1.85rem, 10vw, 2.65rem);
}
.yin-achievement-detail .yin-actions,
.yin-achievement-detail .yin-actions .yin-button,
.yin-achievement-detail .yin-share-wrap {
width: 100%;
}
.yin-achievement-detail .yin-share-popover {
right: auto;
left: 0;
}
.yin-achievement-detail .yin-section {
padding-top: 56px;
}
.yin-achievement-detail .yin-debug-row {
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
padding: 16px;
}
.yin-achievement-detail .yin-debug-number {
width: 38px;
height: 38px;
border-radius: 12px;
}
.yin-achievement-detail .yin-horizontal-scroll {
grid-auto-columns: minmax(230px, 88%);
}
.yin-achievement-detail .yin-timeline-list {
padding-left: 22px;
}
.yin-achievement-detail .yin-timeline-list::before {
left: 5px;
}
.yin-achievement-detail .yin-timeline-item::before {
left: -22px;
width: 13px;
height: 13px;
}
.yin-achievement-detail .yin-timeline-toggle,
.yin-achievement-detail .yin-timeline-detail {
padding: 17px;
}
.yin-achievement-detail .yin-timeline-topline {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
.yin-achievement-detail .yin-profile-panel {
grid-template-columns: minmax(0, 1fr);
}
.yin-achievement-detail .yin-avatar {
width: 92px;
height: 92px;
border-radius: 26px;
}
}
@media (max-width: 390px) {
.yin-achievement-detail .yin-segmented {
gap: 2px;
padding: 4px;
}
.yin-achievement-detail .yin-tab {
padding-inline: 7px;
font-size: 0.9rem;
}
.yin-achievement-detail .yin-tab-panel {
padding: 17px;
}
}
@media (prefers-reduced-motion: reduce) {
.yin-achievement-detail *,
.yin-achievement-detail *::before,
.yin-achievement-detail *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
跳到主要內容
敬師金教師留才首都加給共同提案最後更新 2026.07.30
教師權益｜共同提案＋持續追蹤
敬師不能只停在一句謝謝！
獻瑩參與議會共同提案，把敬師獎勵金由600元提高至2,000元；面對教師缺額與台北高生活成本，再追首都加給、久任與市府自主留才措施。
原本的問題
- 敬師獎勵金每人600元，象徵性高，難以回應教育現場的實際付出。
- 台北生活與住房成本較高，教師缺額與留任壓力卻沒有完整的首都差異化措施。
- 中央兩度拒絕首都加給後，市府自主可做的久任、支持與留才工具仍不夠清楚。
追問後的進展
- 2024年起，敬師金由600元提高至2,000元；這是議會共同提案成果。
- 市府編列5,621萬2,000元相關經費，敬師支持從象徵走向較具體的制度。
- 教育局承諾持續爭取首都加給，並整理市府財政可自主推動的留才措施。
為什麼提高敬師金後，問題還沒有結束？
敬師金是對教師付出的制度性肯定，但它是一年一次的獎勵，不能取代薪資、加給、工作支持與長期留任措施。
台北的教師問題不只在招募，也在高生活成本下能不能留住人。因此，一方面要如實標示共同提案成果，另一方面也要持續要求市府提出可量化、可長期執行的留才方案。
01
敬師金過度象徵化
600元難以回應教師長期投入，也無法成為有感的敬師制度。
02
台北留才條件不對等
全國薪資制度相近，但台北住房與生活成本較高，教師缺額與離職壓力更明顯。
03
中央拒絕後仍有治理空檔
首都加給已遭中央拒絕2次，若市府只等待中央，留才問題不會自行改善。
04
一次性獎勵不等於長期留才
敬師金、久任、工作支持與待遇改善是不同政策工具，不能互相取代。
01
參與共同提案提高敬師金
將敬師獎勵金由600元提高至2,000元，並明確標示為議會共同提案成果。
02
持續追首都加給
中央兩度拒絕後，仍要求教育局繼續爭取，不因成功機率低就停止。
03
要求市府提出自主措施
要求教育局把敬師、久任與留才工具整理成制度，讓教師知道市府能提供什麼支持。
04
用數據驗證留才政策
後續需追教師缺額、代理率、離職率、中央函文及市府措施的實際成效。
敬師獎勵金600→2,000元2024年起提高；屬議會共同提案成果，不作個人獨力歸因。
市府經費5,621萬2,000元查核母表所列的敬師金相關預算。
中央回覆拒絕2次首都加給相關訴求已遭中央拒絕兩次，教育局仍被要求持續爭取。
共同成果敬師金已提高一次性敬師支持已落地，歸因必須標示議會共同提案。
持續爭取首都加給教育局同意繼續向中央爭取，但沒有完成日期。
市府責任自主留才方案教育局承諾整理可由市府財政推動的措施，內容與KPI仍待公開。
一路追蹤：從敬師金到長期留才
一次性敬師與長期待遇必須分開看，也要一起推進。
2024年起展開 ▼
議會共同提案提高敬師金
敬師獎勵金由每人600元提高至2,000元。
獻瑩參與議會共同提案，支持提高敬師獎勵金；對外必須明確標示共同成果，不能宣稱個人獨力促成。
市府回應市府編列相關經費並自2024年起提高敬師金。
敬師金共同提案
相關來源臺北市議會共同提案資料議會資料 202300004067、202600000905
2025-11-10展開 ▼
從敬師延伸到教師留才
中央兩度拒絕首都加給後，要求市府不能只等待中央。
獻瑩要求教育局持續爭取首都加給，同時整理市府可自主推動的敬師、久任與留才措施。
市府回應教育局同意持續爭取，並整理市府可推動措施。
持續追蹤追蹤教師缺額、離職率、函文與市府方案是否正式公告。
首都加給教師留才
相關來源教育部門質詢逐字稿完整質詢逐字稿 DOC009｜PDF頁86-90
關於曾獻瑩
台北市議員｜大安文山
曾獻瑩，前台積電工程師，曾榮獲台積電卓越工程師獎，現任台北市議員。以工程師的問題拆解能力，持續追蹤防詐、交通、教育、城市韌性與 AI 治理議題。對他來說，問政不是喊口號，而是把市民遇到的問題，一步一步追到制度被修正。
前台積電工程師理性治理AI 與城市升級大安文山服務
教師敬師與留才制度，我們繼續追
掌握獻瑩最新問政與大安文山進度
(() => {
"use strict";
const root = document.getElementById("yin-achievement-teacher-appreciation");
if (!root || root.dataset.yinInitialized === "true") return;
root.dataset.yinInitialized = "true";
const activateTab = (button, focus = false) => {
const tablist = button.closest('[role="tablist"]');
if (!tablist) return;
const group = tablist.dataset.yinTablist;
const target = button.dataset.yinTab;
const buttons = [...tablist.querySelectorAll('[role="tab"]')];
const panels = [
...root.querySelectorAll(
`[role="tabpanel"][data-yin-tab-panel="${CSS.escape(group)}"]`,
),
];
for (const item of buttons) {
const selected = item === button;
item.setAttribute("aria-selected", String(selected));
item.tabIndex = selected ? 0 : -1;
}
for (const panel of panels) {
panel.hidden = panel.dataset.yinTabId !== target;
}
if (focus) button.focus();
};
for (const tablist of root.querySelectorAll('[role="tablist"]')) {
const buttons = [...tablist.querySelectorAll('[role="tab"]')];
for (const button of buttons) {
button.addEventListener("click", () => activateTab(button));
}
tablist.addEventListener("keydown", (event) => {
if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
event.preventDefault();
const current = buttons.indexOf(document.activeElement);
let next = current {
if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(value);
return;
}
const field = document.createElement("textarea");
field.value = value;
field.style.position = "fixed";
field.style.opacity = "0";
document.body.append(field);
field.select();
document.execCommand("copy");
field.remove();
};
const shareButton = root.querySelector("[data-yin-share-button]");
const sharePopover = root.querySelector("[data-yin-share-popover]");
if (shareButton && sharePopover) {
shareButton.addEventListener("click", async () => {
const share = {
title: shareButton.dataset.shareTitle || document.title,
text: shareButton.dataset.shareText || "",
url: shareButton.dataset.shareUrl || window.location.href,
};
if (navigator.share) {
try {
await navigator.share(share);
return;
} catch (error) {
if (error?.name !== "AbortError") console.warn(error);
}
}
const open = sharePopover.hidden;
sharePopover.hidden = !open;
shareButton.setAttribute("aria-expanded", String(open));
});
sharePopover.addEventListener("click", async (event) => {
const option = event.target.closest("[data-yin-share-action]");
if (!option) return;
const url = shareButton.dataset.shareUrl || window.location.href;
const title = shareButton.dataset.shareTitle || document.title;
const action = option.dataset.yinShareAction;
if (action === "copy") {
await copyText(url);
option.textContent = "已複製";
}
if (action === "line") {
window.open(
`https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(url)}`,
"_blank",
"noopener,noreferrer",
);
}
if (action === "facebook") {
window.open(
`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}"e=${encodeURIComponent(title)}`,
"_blank",
"noopener,noreferrer",
);
}
});
}
document.addEventListener("click", (event) => {
if (!sharePopover || sharePopover.hidden) return;
if (sharePopover.contains(event.target) || shareButton?.contains(event.target)) return;
sharePopover.hidden = true;
shareButton?.setAttribute("aria-expanded", "false");
});
for (const details of root.querySelectorAll(".yin-timeline-item")) {
const state = details.querySelector(".yin-timeline-state");
const sync = () => {
if (state) state.textContent = details.open ? "收合 ▲" : "展開 ▼";
};
details.addEventListener("toggle", sync);
sync();
}
const dialog = root.querySelector("[data-yin-video-dialog]");
const dialogTitle = dialog?.querySelector("[data-yin-dialog-title]");
const dialogFrame = dialog?.querySelector("[data-yin-dialog-frame]");
const closeDialog = () => {
if (!dialog) return;
dialog.close();
if (dialogFrame) dialogFrame.replaceChildren();
};
const youtubeId = (url) => {
try {
const parsed = new URL(url);
const hosts = new Set([
"youtube.com",
"www.youtube.com",
"youtu.be",
"www.youtube-nocookie.com",
]);
if (parsed.protocol !== "https:" || !hosts.has(parsed.hostname)) return "";
let id = "";
if (parsed.hostname === "youtu.be") {
id = parsed.pathname.split("/").filter(Boolean)[0] || "";
} else if (parsed.pathname === "/watch") {
id = parsed.searchParams.get("v") || "";
} else {
const match = parsed.pathname.match(/^\/(?:shorts|embed)\/([^/]+)\/?$/);
id = match?.[1] || "";
}
return /^[A-Za-z0-9_-]{6,32}$/.test(id) ? id : "";
} catch {
return "";
}
};
for (const card of root.querySelectorAll("[data-yin-video]")) {
card.addEventListener("click", () => {
if (!dialog || !dialogFrame) return;
const id = youtubeId(card.dataset.videoUrl || "");
if (!id) return;
const iframe = document.createElement("iframe");
iframe.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}?autoplay=1`;
iframe.title = card.dataset.videoTitle || "影音";
iframe.allow =
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
iframe.allowFullscreen = true;
dialogFrame.replaceChildren(iframe);
if (dialogTitle) dialogTitle.textContent = card.dataset.videoTitle || "影音";
dialog.showModal();
});
}
dialog?.querySelector("[data-yin-dialog-close]")?.addEventListener("click", closeDialog);
dialog?.addEventListener("click", (event) => {
if (event.target === dialog) closeDialog();
});
dialog?.addEventListener("cancel", (event) => {
event.preventDefault();
closeDialog();
});
})();
