/* =========================================================
   系友會 alumni-center.html（搭配 home.css，內斂精緻版）
   ========================================================= */
.alumni-page [hidden] { display: none !important; }
.alumni-page .h-sec { padding: 96px 0; }

/* 開場 */
.al-intro { padding-bottom: 72px !important; }
.al-intro-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.al-intro .h-head { margin-bottom: 26px; }
.al-lead { margin: 0; font-size: 16.5px; line-height: 2; color: var(--ink-2); }
.al-lead b { color: var(--ink); font-weight: 700; }
.al-facts { list-style: none; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.al-facts b { display: block; font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); font-weight: 900; line-height: 1.1; color: var(--ink); }
.al-facts span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.al-door { margin: 0; position: relative; }
.al-door img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; filter: saturate(.92); }
.al-door::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold-l); border-radius: 4px; z-index: -1; }
.al-door figcaption { margin-top: 30px; font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }

/* 宗旨 */
.al-purpose { background: var(--ink); color: #fff; padding: 84px 0; }
.al-purpose-g { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; }
.al-virtue { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.al-virtue span { width: 86px; height: 86px; display: grid; place-items: center; font-family: var(--serif); font-size: 44px; font-weight: 900; color: var(--gold-l); border: 1px solid rgba(205,176,122,.4); transition: background .4s, color .4s; }
.al-virtue span:hover { background: var(--gold-l); color: var(--ink); }
.al-purpose .h-mono { color: var(--gold-l); margin: 0 0 16px; }
.al-purpose blockquote { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-size: clamp(20px, 2.3vw, 28px); line-height: 1.8; font-weight: 700; color: #fff; }
.al-pnote { margin: 16px 0 0; font-size: 14px; color: rgba(255,255,255,.55); }

/* 加入 */
.al-join-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.al-j { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 28px 28px; background: #fff; border: 1px solid var(--line); border-radius: 4px; color: var(--ink) !important; overflow: hidden; isolation: isolate; transition: color .45s, border-color .45s; }
.al-j::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #1877F2; transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); }
.al-j.dark::before { background: var(--ink); }
.al-j:hover, .al-j:focus-visible { color: #fff !important; border-color: transparent; }
.al-j:hover::before, .al-j:focus-visible::before { transform: scaleY(1); }
.al-j > i { font-size: 30px; color: #1877F2; margin-bottom: 14px; transition: color .45s; }
.al-j.dark > i { color: var(--gold); }
.al-j:hover > i { color: #fff; }
.al-j .h-mono { color: var(--ink-3); transition: color .45s; }
.al-j:hover .h-mono { color: rgba(255,255,255,.75); }
.al-j b { font-family: var(--serif); font-size: 22px; font-weight: 900; line-height: 1.4; }
.al-j small { font-size: 14px; color: var(--ink-2); transition: color .45s; }
.al-j:hover small { color: rgba(255,255,255,.85); }
.al-j em { position: absolute; right: 24px; top: 26px; font-style: normal; font-size: 20px; transition: transform .35s var(--ease); }
.al-j:hover em { transform: translate(3px, -3px); }
.al-j:active { transform: scale(.985); }

/* 相簿 */
.al-gallery { background: var(--bg-2); }
.al-yr { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 30px 0; border-top: 1px solid var(--line); }
.al-yr:first-of-type { border-top: 1px solid var(--ink); }
.al-yl b { display: block; font-family: var(--serif); font-size: 46px; font-weight: 900; line-height: 1; color: var(--ink); }
.al-yl small { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-3); letter-spacing: .06em; }
.al-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.al-ph { position: relative; display: block; padding: 0; border: 0; background: var(--ink); border-radius: 3px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; -webkit-tap-highlight-color: transparent; }
.al-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .4s; }
.al-ph:hover img, .al-ph:focus-visible img { transform: scale(1.06); opacity: .82; }
.al-ph span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 26px 14px 10px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; text-align: left; }
.al-ph b { font-size: 14px; font-weight: 700; }
.al-ph small { font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .08em; opacity: .85; }
.al-ph:focus { outline: none; }
.al-ph:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.al-ph:active img { transform: scale(1.02); }
.al-ph.wide { grid-column: span 2; aspect-ratio: 8 / 3; }

/* 講座 */
.al-talks-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.al-talks .h-head { margin-bottom: 0; }
.al-tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.al-tl li { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s; }
.al-tl li:hover { background: #fff; padding-left: 14px; padding-right: 14px; }
.t-y { white-space: nowrap; font-family: var(--serif); font-size: 26px; font-weight: 900; color: var(--gold); line-height: 1; }
.t-y small { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.al-tl b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.al-tl div small { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.al-tl em { font-style: normal; font-size: 14px; color: var(--ink-2); white-space: nowrap; }

/* CTA */
.al-cta { padding: 0 0 110px; }
.al-cta-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; }
.al-cta .h-mono { color: var(--gold); margin: 0 0 12px; }
.al-cta h2 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 900; color: var(--ink); }
.al-cta p { margin: 0; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }
.al-cta-c { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.al-cta-c a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--ink); border-radius: 3px; color: var(--ink) !important; font-size: 14px; transition: background .3s, color .3s; }
.al-cta-c a:hover { background: var(--ink); color: #fff !important; }
.al-cta-c b { font-family: var(--serif); font-size: 18px; font-weight: 900; }

/* 燈箱 */
.al-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(12,12,14,.94); display: flex; align-items: center; justify-content: center; padding: 40px 72px; animation: lbIn .3s ease; }
@keyframes lbIn { from { opacity: 0; } }
.al-lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.al-lb img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 2px; animation: lbImg .35s var(--ease); }
@keyframes lbImg { from { opacity: 0; transform: scale(.97); } }
.al-lb figcaption { margin-top: 14px; color: rgba(255,255,255,.85); font-size: 14px; letter-spacing: .04em; text-align: center; }
.al-lb button { position: absolute; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.al-lb button:hover { background: rgba(255,255,255,.2); }
.lb-x { top: 18px; right: 18px; }
.lb-p { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-n { right: 14px; top: 50%; transform: translateY(-50%); }

@media (max-width: 991px) {
	.al-intro-g, .al-talks-g, .al-cta-g { grid-template-columns: 1fr; gap: 36px; }
	.al-door { max-width: 420px; }
	.al-join-g { grid-template-columns: 1fr; }
	.al-purpose-g { grid-template-columns: 1fr; gap: 30px; }
	.al-virtue { grid-template-columns: repeat(4, 1fr); max-width: 360px; }
	.al-virtue span { width: auto; height: 76px; }
	.al-yr { grid-template-columns: 1fr; gap: 14px; }
	.al-yl { display: flex; align-items: baseline; gap: 12px; }
	.al-yl small { margin-top: 0; }
	.al-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.alumni-page .h-sec { padding: 64px 0; }
	.al-facts { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
	.al-facts span { font-size: 12px; }
	.al-door::before { inset: 12px -10px -12px 10px; }
	.al-purpose { padding: 60px 0; }
	.al-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.al-ph.wide { grid-column: span 2; }
	.al-ph span { padding: 20px 10px 8px; flex-direction: column; gap: 0; }
	.al-ph b { font-size: 13px; }
	.al-tl li { grid-template-columns: 1fr; gap: 6px; }
	.al-tl em { grid-column: auto; }
	.al-tl em { grid-column: 2; }
	.t-y { font-size: 22px; }
	.al-cta { padding-bottom: 72px; }
	.al-cta-g { padding: 28px 20px; }
	.al-cta-c { grid-template-columns: 1fr; }
	.al-lb { padding: 60px 10px; }
	.lb-p, .lb-n { top: auto; bottom: 16px; transform: none; }
	.lb-p { left: calc(50% - 60px); } .lb-n { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
	.al-lb, .al-lb img { animation: none; }
	.al-ph img, .al-j::before { transition: none; }
}