/* The original's continuous photo strip, scoped to the creditbank page. */
.major-flow { --flow-gap: 32px; --flow-card: 144px; --flow-duration: 104s; padding-block: 80px; background: #f6f8fb; overflow: hidden; }
.major-flow .section-heading { margin-bottom: 0; }
#creditbank-majors-title { scroll-margin-top: 128px; }
.major-flow-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.major-flow-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.major-flow-controls[hidden] { display: none; }
.major-flow-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 13px; border: 1px solid #c9d4e2; border-radius: 50%; background: #fff; color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.major-flow-controls [data-flow-toggle] { min-width: 106px; border-radius: 24px; font-size: 13px; font-weight: 600; }
.major-flow-controls button:hover { background: #e8eff8; }
.major-flow-controls button:focus-visible, .major-flow-viewport:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.major-flow-controls button:disabled { cursor: default; color: #58697d; background: #edf1f6; }
.major-flow-window { position: relative; }
.major-flow-window::before, .major-flow-window::after { content: none; }
.major-flow-window { --flow-fade: clamp(32px, 8vw, 120px); mask-image: linear-gradient(90deg, transparent, #000 var(--flow-fade), #000 calc(100% - var(--flow-fade)), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--flow-fade), #000 calc(100% - var(--flow-fade)), transparent); }
.major-flow-window:focus-within { mask-image: none; -webkit-mask-image: none; }
.major-flow-viewport { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #b6c4d5 transparent; overscroll-behavior-x: contain; padding: 12px 0 20px; }
.major-flow.is-moving .major-flow-viewport { scrollbar-width: none; }
.major-flow.is-moving .major-flow-viewport::-webkit-scrollbar { display: none; }
.major-flow .creditbank-majors { display: flex; flex-wrap: nowrap; width: max-content; gap: var(--flow-gap); margin: 0; padding: 0; list-style: none; }
.major-flow .creditbank-majors li { display: flex; flex: 0 0 var(--flow-card); width: var(--flow-card); flex-direction: column; align-items: center; gap: 18px; padding: 0; border: 0; text-align: center; }
.major-flow .creditbank-majors img { display: block; width: var(--flow-card); height: var(--flow-card); border-radius: 50%; object-fit: cover; background: #e2e8f0; border: 5px solid white; box-shadow: 0 2px 12px rgb(25 48 77 / 8%); }
.major-flow .creditbank-majors li .major-name { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.major-flow-hint { margin: 26px 0 0; color: #596c83; font-size: 13px; }
[data-flow-copy] { display: none; }
.major-flow[data-flow-ready] [data-flow-copy] { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .major-flow.is-moving .creditbank-majors { animation: major-flow-left var(--flow-duration) linear infinite; animation-play-state: var(--flow-play-state, paused); will-change: transform; }
  @media (hover: hover) { .major-flow.is-moving .major-flow-viewport:hover .creditbank-majors { animation-play-state: paused; } }
  @keyframes major-flow-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - var(--flow-gap) / 2), 0, 0); } }
}
@media (max-width: 639px) {
  .major-flow { --flow-gap: 24px; --flow-card: 112px; padding-block: 52px; }
  .major-flow-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 26px; }
  .major-flow .creditbank-majors li { gap: 14px; }
  .major-flow .creditbank-majors li .major-name { font-size: 14px; }
  .major-flow-controls { align-self: flex-end; }
  .major-flow-hint { margin-top: 18px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .major-flow[data-flow-ready] [data-flow-copy] { display: none; }
  .major-flow .creditbank-majors { animation: none; transform: none; }
}

/* ============================================================
   v2 — 전공 띠 머리 정렬 (사용자 제보, 실측)
   .major-flow-heading 이 flex + space-between 이라 제목 덩어리가 왼쪽,
   컨트롤이 오른쪽으로 밀렸다. 제목의 text-align:center 는 자기 상자 안에서만
   도는 값이라 섹션 축과는 무관했다 — 1280px 에서 제목 중심 519 / 섹션 중심 640,
   121px 왼쪽으로 기울어 있었다. 안내문도 text-align:start 라 홀로 왼쪽이었다.
   세로로 쌓고 전부 같은 축에 맞춘다.
   ============================================================ */
.major-flow-heading { display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; align-items: start; gap: 20px; text-align: center; }
.major-flow-heading > * { max-width: 100%; }
.major-flow-controls { justify-self: center; }
.major-flow-hint { text-align: center; }

@media (max-width: 639px) {
  /* 좁은 폭에서도 같은 축. 기존 규칙이 flex-start/flex-end 로 갈라 두었다. */
  .major-flow-heading { justify-items: center; gap: 16px; }
  .major-flow-controls { align-self: center; justify-self: center; }
}