/* ============================================================
   SBA — v2 "YMCG editorial minimalism: thin Pretendard, airy, precise"
   Shared stylesheet for all 13 pages.
   Palette: charcoal #363636 on light, warm off-white #f4f1ea on dark,
            SBA teal #399798 (no pure #000 / #fff)
   Type: Pretendard throughout — light/extra-light (200–300) for body &
         display; heavier weights reserved for small UI labels only.
         Confident through restraint & whitespace, not weight or color.
   ============================================================ */

:root {
  --bg-0: #1f1f1f;
  --bg-1: #2b2b2b;
  --bg-2: #363636;
  --bg-3: #403f3d;
  --ink: #f4f1ea;
  --ink-2: #d8d3c9;
  --ink-3: #aba69e;
  --teal: #399798;
  --teal-bright: #5ec6c7;
  --teal-deep: #2a7273;
  --teal-glow: rgba(57, 151, 152, 0.35);
  --rule: rgba(201, 193, 181, 0.16);
  --rule-strong: rgba(201, 193, 181, 0.32);
  --light-bg: #f3efe8;
  --light-panel: #fbf9f4;
  --light-ink: #363636;
  --light-ink-2: #5d594f;
  --light-rule: rgba(54, 54, 54, 0.14);
  --error: #e08f7e;
  /* All-Pretendard type. --display repoints the former serif headings to
     Pretendard; English text prefers the Latin-optimized cut first. */
  --sans: "Pretendard Variable", "Pretendard English", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --serif: "Pretendard Variable", "Pretendard English", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --display: "Pretendard Variable", "Pretendard English", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* Cormorant serif kept ONLY for hero titles (v1 drama); content below is Pretendard (v2). */
  --hero-serif: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --header-h: 78px;
  --wrap: 1180px;
}

/* ---------- reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body[data-gate] { visibility: hidden; }

img { max-width: 100%; display: block; }

a { color: var(--teal-bright); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 300; line-height: 1.14; letter-spacing: -0.015em; margin: 0 0 0.5em; color: var(--ink); }
/* extra-light for the largest display type — thin is the core of the aesthetic */
h1 { font-weight: 200; letter-spacing: -0.02em; }

p { margin: 0 0 1.1em; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--teal); color: #fff; }

:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- typography helpers ---------- */

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 18px;
}

.section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: 0.4em;
  text-wrap: balance; /* headings break evenly — no orphan word on line 2 */
}

.lead {
  font-size: 1.08rem;
  color: var(--ink-2);
  max-width: 46em;
  text-wrap: pretty; /* keep names like "Korea University" from splitting at line end */
}

.kr-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 10px;
}

.serif-em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--teal-bright); }

/* ---------- reveal motion ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: none;
  transition: all 0.3s ease;
}

.btn--solid {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.btn--solid:hover {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  color: var(--bg-0);
  box-shadow: 0 0 32px var(--teal-glow);
}

.btn--ghost {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--teal-bright);
  color: var(--teal-bright);
  box-shadow: 0 0 24px rgba(57, 151, 152, 0.18);
}

.btn svg { width: 14px; height: 14px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-bright);
  border-bottom: 1px solid transparent;
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.text-link svg { width: 13px; height: 13px; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(31, 31, 31, 0.92), rgba(31, 31, 31, 0.55) 70%, transparent);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.site-header.scrolled,
body.menu-open .site-header {
  background: rgba(31, 31, 31, 0.96);
  box-shadow: 0 1px 0 var(--rule);
  backdrop-filter: blur(10px);
}
/* While the mobile menu is open the header must NOT have a backdrop-filter:
   a filtered ancestor becomes the containing block for the fixed-position
   .mobile-menu, which collapses its full-height (top/bottom) to the header box.
   Dropping it here lets the panel fill the whole screen below the header. */
body.menu-open .site-header { backdrop-filter: none; }

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; padding: 14px 0; flex-shrink: 0; }
.brand img { height: 42px; width: auto; }

.main-nav { margin-left: auto; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-group { position: relative; }

.nav-group-btn,
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: none;
  border: 0;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.25s ease;
}
.nav-group-btn:hover,
.nav-link:hover { color: var(--ink); }

.nav-group.current-group > .nav-group-btn,
.nav-link[aria-current="page"] { color: var(--teal-bright); }

.nav-caret { width: 9px; height: 9px; transition: transform 0.25s ease; }
.nav-group.open .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 230px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: var(--bg-0);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-group:hover .dropdown,
.nav-group:focus-within .dropdown,
.nav-group.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown a {
  display: block;
  padding: 11px 24px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  border-left: 2px solid transparent;
}
.dropdown a:hover { color: var(--ink); background: var(--bg-2); border-left-color: var(--teal); }
.dropdown a[aria-current="page"] { color: var(--teal-bright); border-left-color: var(--teal); }
.dropdown .dd-en { display: block; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }

.nav-auth { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.btn-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border: 1px solid var(--rule-strong);
  background: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  transition: all 0.3s ease;
}
.btn-auth:hover { border-color: var(--teal-bright); color: var(--teal-bright); }
.btn-auth--solid { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-auth--solid:hover { background: var(--teal-bright); border-color: var(--teal-bright); color: var(--bg-0); }

.auth-in { display: none !important; }
body.authed .auth-in { display: inline-flex !important; }
body.authed .auth-out { display: none !important; }

/* hamburger */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  padding: 12px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body.menu-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* mobile menu */

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--bg-0);
  overflow-y: auto;
  padding: 28px 28px 64px;
}
body.menu-open .mobile-menu { display: block; }
body.menu-open { overflow: hidden; }

.mm-group { border-bottom: 1px solid var(--rule); padding: 20px 0; }
.mm-heading {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 12px;
  font-family: var(--sans);
}
.mm-group a {
  display: block;
  padding: 14px 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--ink);
}
.mm-group a:hover { color: var(--teal-bright); }
.mm-group a[aria-current="page"] { color: var(--teal-bright); }
.mm-auth { padding: 26px 0; display: flex; flex-direction: column; gap: 12px; }
.mm-auth .btn-auth { justify-content: center; padding: 14px; }

@media (max-width: 1020px) {
  .main-nav, .nav-auth { display: none; }
  .hamburger { display: flex; }
  /* 모바일: 테마 토글이 로고-햄버거 사이 중간에 뜨지 않도록
     오른쪽으로 밀어 햄버거 바로 옆에 붙인다 */
  .theme-toggle { margin-left: auto; }
  .header-inner { gap: 14px; }
}

/* ---------- heroes ---------- */

.hero, .page-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-0);
}

.hero { min-height: 100vh; }
.page-hero { min-height: 0; padding: calc(var(--header-h) + 72px) 0 72px; }

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.7) brightness(0.85);
}
@media (min-width: 1024px) and (hover: hover) {
  .hero .hero-bg { background-attachment: fixed; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(31, 31, 31, 0.72), rgba(31, 31, 31, 0.55) 45%, var(--bg-1) 98%),
    radial-gradient(ellipse at 30% 40%, rgba(57, 151, 152, 0.16), transparent 60%);
}

.hero-content { position: relative; z-index: 2; padding-top: var(--header-h); }
.page-hero .hero-content { padding-top: 0; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--teal);
}

.hero-title {
  font-family: var(--hero-serif); /* v1 serif drama, only here */
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.08;
  max-width: 13em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.hero-title em { font-style: italic; color: var(--teal-bright); }

.page-hero .hero-title { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }

/* centered page hero (About — 중간정렬 feedback) */
.page-hero--center .hero-content { text-align: center; }
.page-hero--center .hero-title,
.page-hero--center .hero-sub { margin-left: auto; margin-right: auto; }
.page-hero--center .hero-eyebrow::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--teal);
}

.hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  max-width: 40em;
  margin-bottom: 42px;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── v3: hero slideshow (3 slides, horizontal slide — left → right) ───── */
.hero[data-slideshow] .slide {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center;
  transform: translateX(100%);                 /* parked off the right edge */
  transition: transform 0.85s cubic-bezier(0.5, 0, 0.15, 1);
}
.hero[data-slideshow] .slide.is-active { transform: translateX(0); z-index: 2; }      /* slides in from the right */
.hero[data-slideshow] .slide.is-leaving { transform: translateX(-100%); z-index: 1; }  /* current exits to the left */
.hero[data-slideshow] .slide-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.72) brightness(0.6);
}
.hero[data-slideshow] .slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(31,31,31,0.74), rgba(31,31,31,0.5) 45%, var(--bg-1) 98%),
    radial-gradient(ellipse at 30% 40%, rgba(57,151,152,0.16), transparent 60%);
}
.hero[data-slideshow] .hero-content { position: relative; z-index: 2; width: 100%; }
.hero-ui { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 4; }
.hero-ui-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.slide-dots { display: flex; gap: 10px; }
.slide-dot {
  width: 34px; height: 3px; border: 0; padding: 0; border-radius: 2px;
  background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.25s;
}
.slide-dot:hover { background: rgba(255,255,255,0.6); }
.slide-dot.is-active { background: #fff; }
.hero-count { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
@media (prefers-reduced-motion: reduce) {
  .hero[data-slideshow] .slide { transition: none; }
  .hero[data-slideshow] .slide.is-active .slide-bg { animation: none; }
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--ink-3);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--teal-bright), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ---------- sections ---------- */

.section { padding: 110px 0; }
.section--tight { padding: 76px 0; }
.section--alt { background: var(--bg-2); }
.section--deep { background: var(--bg-0); }

.section-head { max-width: 860px; margin-bottom: 60px; } /* wider so titles/leads stay on one line where possible */
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .hero-eyebrow::before { display: none; }

.rule-top { border-top: 1px solid var(--rule); }

/* light contrast section (recruiting etc.) */

.section--light { background: var(--light-bg); color: var(--light-ink); }
.section--light h2, .section--light h3, .section--light h4 { color: var(--light-ink); }
.section--light .lead, .section--light p { color: var(--light-ink-2); }
.section--light .eyebrow { color: var(--teal-deep); }
.section--light .section-title { color: var(--light-ink); }

/* ---------- stats band ---------- */

.stats-band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat {
  padding: 56px 36px;
  border-left: 1px solid var(--rule);
}
.stat:first-child { border-left: 0; }

.stat-num {
  font-family: var(--display);
  font-size: clamp(2.9rem, 4.6vw, 4.4rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.stat-num .accent { color: var(--teal-bright); }

.stat-label {
  display: block;
  margin-top: 14px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.stat-asof {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

@media (max-width: 880px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: 36px 26px; border-top: 1px solid var(--rule); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--rule); }
}

/* ---------- grids & cards ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 660px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.value-card {
  border-top: 1px solid var(--rule-strong);
  padding-top: 30px;
}
.value-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--teal-bright);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 16px;
}
.value-card h3 { font-size: 1.55rem; margin-bottom: 14px; }
.value-card p { color: var(--ink-2); font-size: 0.97rem; margin-bottom: 0; }

/* track cards (Professional Track style) */

.track-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.track-card:hover {
  transform: translateY(-6px);
  border-color: rgba(57, 151, 152, 0.5);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
}

.track-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.track-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.85);
  transition: transform 0.6s ease, filter 0.6s ease;
}
.track-card:hover .track-photo img { transform: scale(1.04); filter: saturate(0.85) brightness(0.95); }
.track-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 31, 31, 0.65), transparent 55%);
}
.track-code {
  position: absolute;
  left: 22px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(244, 241, 234, 0.92);
}

.track-body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.track-body h3 { font-size: 1.45rem; margin-bottom: 6px; }
.track-kr { font-size: 0.82rem; letter-spacing: 0.14em; color: var(--teal-bright); margin-bottom: 14px; display: block; }
.track-body p { color: var(--ink-2); font-size: 0.95rem; flex: 1; }
.track-body .text-link { margin-top: 18px; }

/* ---------- alumni spotlight ---------- */

.spot-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--teal);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
/* company logo — white chip, top-right, so any logo reads on the dark card */
.spot-logo {
  position: absolute;
  top: 26px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: 7px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  max-width: 124px;
}
.spot-logo img {
  height: 20px;
  width: auto;
  max-width: 104px;
  object-fit: contain;
  display: block;
}
.spot-gen {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 12px;
}
.spot-card h3 { font-size: 1.6rem; margin-bottom: 14px; }

.career {
  list-style: none;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--rule);
}
.career li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--ink-2);
  padding: 3px 0;
}
.career .era {
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--teal-bright);
  border: 1px solid rgba(57, 151, 152, 0.45);
  padding: 1px 8px;
}
.career .era--prev { color: var(--ink-3); border-color: var(--rule-strong); }

/* ---------- home: Alumni Spotlight marquee (right -> left auto-scroll) ---------- */
.spot-marquee {
  overflow: hidden;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.spot-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: spot-scroll 70s linear infinite;
  will-change: transform;
}
.spot-marquee:hover .spot-track,
.spot-marquee:focus-within .spot-track { animation-play-state: paused; }
.spot-set { display: flex; }
.spot-set .spot-card--marquee { margin-right: 28px; }
.spot-card--marquee {
  flex: none;
  width: min(430px, 82vw);
  display: flex;
  flex-direction: column;
}
.spot-card--marquee .spot-quote {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@keyframes spot-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .spot-track { animation: none; flex-wrap: wrap; width: auto; }
  .spot-set[aria-hidden="true"] { display: none; }
  .spot-set { flex-wrap: wrap; gap: 28px; }
  .spot-set .spot-card--marquee { margin-right: 0; }
}

.spot-quote {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
}
.spot-quote::before { content: "\201C"; color: var(--teal-bright); margin-right: 2px; }
.spot-quote::after { content: "\201D"; color: var(--teal-bright); margin-left: 2px; }

/* placement categories */

.placement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px) { .placement-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .placement-grid { grid-template-columns: 1fr; } }

.placement-card {
  border: 1px solid var(--rule);
  padding: 30px 28px;
  background: var(--bg-1);
  transition: border-color 0.3s ease;
}
.placement-card:hover { border-color: rgba(57, 151, 152, 0.5); }
.placement-card svg { width: 30px; height: 30px; color: var(--teal-bright); margin-bottom: 16px; }
.placement-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.placement-card p { font-size: 0.88rem; color: var(--ink-3); margin: 0; }

/* ---------- partner wall ---------- */

.partner-wall {
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.partner-wall span {
  flex: 1 0 20%;
  min-width: 170px;
  padding: 26px 18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  transition: color 0.3s ease, background 0.3s ease, text-shadow 0.3s ease;
}
.partner-wall span:hover {
  color: var(--teal-bright);
  background: rgba(57, 151, 152, 0.06);
  text-shadow: 0 0 22px var(--teal-glow);
}

/* ---------- timeline / history ---------- */

.history-line {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 56px 0 16px;
}
.history-node { text-align: center; flex-shrink: 0; }
.history-year {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: var(--ink);
  line-height: 1;
}
.history-node p { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 0; }
.history-rule {
  flex: 1;
  height: 1px;
  margin: 0 36px;
  background: linear-gradient(to right, var(--rule-strong), var(--teal), var(--rule-strong));
  position: relative;
}
.history-rule::before, .history-rule::after {
  content: "";
  position: absolute;
  top: -3.5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 14px var(--teal-glow);
}
.history-rule::before { left: 0; }
.history-rule::after { right: 0; }

/* mobile: stack the history timeline top-to-bottom instead of overflowing horizontally */
@media (max-width: 700px) {
  .history-line { flex-direction: column; align-items: center; gap: 0; }
  .history-node { width: 100%; min-width: 0; }
  .history-node p { white-space: normal; overflow-wrap: anywhere; letter-spacing: 0.08em; max-width: 22ch; margin-left: auto; margin-right: auto; }
  .history-rule {
    flex: none;
    width: 1px;
    height: 40px;
    margin: 16px 0;
    background: linear-gradient(to bottom, var(--rule-strong), var(--teal), var(--rule-strong));
  }
  .history-rule::before { top: -3.5px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
  .history-rule::after  { top: auto; bottom: -3.5px; left: 50%; right: auto; transform: translateX(-50%); }
}

/* universities */

.uni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 740px) { .uni-grid { grid-template-columns: 1fr; } }

.uni-card {
  border: 1px solid var(--rule);
  background: var(--bg-2);
  padding: 40px 28px;
  text-align: center;
}
.uni-card img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 auto 22px;
  background: #fff;
  border-radius: 50%;
  padding: 10px;
}
.uni-card h3 { font-size: 1.35rem; margin-bottom: 4px; }
.uni-card p { font-size: 0.84rem; letter-spacing: 0.1em; color: var(--ink-3); margin: 0; }

/* ---------- letter / advisors (greetings) ---------- */

.letter-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .letter-layout { grid-template-columns: 1fr; gap: 40px; } }

.letter-portrait { position: sticky; top: calc(var(--header-h) + 30px); }
@media (max-width: 900px) { .letter-portrait { position: static; max-width: 340px; } }
.letter-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.8);
  border: 1px solid var(--rule);
}
.letter-portrait figcaption { margin-top: 16px; font-size: 0.84rem; color: var(--ink-3); letter-spacing: 0.08em; }
.letter-portrait figcaption strong { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 400; color: var(--ink); letter-spacing: 0; }

.letter-body p { color: var(--ink-2); font-size: 1.02rem; }
.letter-body p:first-of-type::first-letter {
  /* inline initial: "ear Reader," shares the D's baseline (sits at its bottom, not top) */
  font-family: var(--serif);
  font-size: 2.6em;
  line-height: 1;
  padding-right: 2px;
  color: var(--teal-bright);
}
.letter-sign {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.letter-sign .slogan {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--teal-bright);
  display: block;
  margin-bottom: 10px;
}
.letter-sign .who { font-size: 0.88rem; letter-spacing: 0.12em; color: var(--ink-2); }

.advisor-card {
  background: var(--bg-1);
  border: 1px solid var(--rule);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.advisor-card img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(0.8);
  border: 1px solid var(--rule-strong);
  margin-bottom: 20px;
}
.advisor-card h3 { font-size: 1.35rem; margin-bottom: 2px; }
.advisor-uni { font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 18px; display: block; }
.advisor-card blockquote {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-2);
  border-left: 2px solid var(--teal);
  padding-left: 18px;
  flex: 1;
}

/* ---------- teams page ---------- */

.team-section { border-top: 1px solid var(--rule); padding: 90px 0; }

.team-head { display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.team-code-big {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  color: rgba(57, 151, 152, 0.55);
  letter-spacing: 0.04em;
}
.team-head h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0; }

.team-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 44px; }
@media (max-width: 860px) { .team-cols { grid-template-columns: 1fr; } }

.curr-panel {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: 34px 32px;
}
.curr-panel--up { border-top: 2px solid var(--teal); }
.curr-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-strong);
  padding: 4px 12px;
  margin-bottom: 20px;
}
.curr-panel--up .curr-tag { color: var(--teal-bright); border-color: rgba(57, 151, 152, 0.5); }
.curr-panel h3 { font-size: 1.3rem; margin-bottom: 18px; }

.week-list { list-style: none; margin: 0; padding: 0; }
.week-list li {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  color: var(--ink-2);
}
.week-list .wk {
  font-family: var(--serif);
  font-style: italic;
  color: var(--teal-bright);
  font-size: 1rem;
  white-space: nowrap;
}
.week-list strong { color: var(--ink); font-weight: 600; }

/* ---------- sessions flow ---------- */

.flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 30px 0 10px;
}
.flow-node {
  flex: 1;
  border: 1px solid var(--rule-strong);
  background: var(--bg-2);
  padding: 34px 26px;
  text-align: center;
  position: relative;
}
.flow-node.glow { border-color: rgba(57, 151, 152, 0.6); box-shadow: 0 0 36px rgba(57, 151, 152, 0.12); }
.flow-node h3 { font-size: 1.4rem; margin-bottom: 8px; }
.flow-node p { font-size: 0.84rem; color: var(--ink-3); margin: 0; }
.flow-step {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  color: var(--teal-bright);
  margin-bottom: 10px;
  font-size: 1rem;
}
.flow-arrow {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--teal-bright);
  flex-shrink: 0;
}
.flow-arrow svg { width: 26px; height: 26px; }

@media (max-width: 820px) {
  .flow { flex-direction: column; }
  .flow-arrow { justify-content: center; padding: 12px 0; }
  .flow-arrow svg { transform: rotate(90deg); }
}

.session-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0;
  border-top: 1px solid var(--rule);
}
.session-detail:first-of-type { border-top: 0; }
.session-detail.flip .session-media { order: 2; }
@media (max-width: 860px) {
  .session-detail { grid-template-columns: 1fr; gap: 32px; }
  .session-detail.flip .session-media { order: 0; }
}
.session-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.85);
  border: 1px solid var(--rule);
}
.session-copy h3 { font-size: 1.8rem; }
.session-copy p { color: var(--ink-2); font-size: 0.98rem; }
.session-copy ul { color: var(--ink-2); font-size: 0.95rem; }
.session-copy li { margin-bottom: 6px; }
.session-copy li::marker { color: var(--teal-bright); }

/* ---------- projects ---------- */

.project-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: 34px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.project-card:hover { border-color: rgba(57, 151, 152, 0.5); transform: translateY(-4px); }
.project-partner {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.project-season {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 16px;
  display: block;
}
.project-card p { font-size: 0.93rem; color: var(--ink-2); margin: 0; flex: 1; }

.notice-strip {
  border: 1px dashed rgba(57, 151, 152, 0.5);
  background: rgba(57, 151, 152, 0.06);
  padding: 22px 28px;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* archive accordion reuses .acc */

.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.93rem;
  color: var(--ink-2);
}
.archive-list li:first-child { border-top: 0; }
.archive-list .ap { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.archive-list .conf { color: var(--ink-3); font-style: italic; }
@media (max-width: 620px) { .archive-list li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- networking ---------- */

.program-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.program-photo { aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.program-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.85);
  transition: transform 0.6s ease;
}
.program-card:hover .program-photo img { transform: scale(1.04); }
.program-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 31, 31, 0.55), transparent 50%);
}
.program-body { padding: 30px 30px 34px; flex: 1; display: flex; flex-direction: column; }
.program-num { font-family: var(--serif); font-style: italic; color: var(--teal-bright); font-size: 1rem; display: block; margin-bottom: 10px; }
.program-body h3 { font-size: 1.5rem; margin-bottom: 12px; }
.program-body p { font-size: 0.94rem; color: var(--ink-2); margin-bottom: 0; }
.program-body .roster { margin-top: 16px; font-size: 0.84rem; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 14px; }
.program-body .roster strong { color: var(--ink-2); font-weight: 600; }

/* ---------- recruiting ---------- */

.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--light-rule);
}
.section--light .steps::before { background: rgba(42, 114, 115, 0.4); }
.steps li {
  position: relative;
  padding: 0 0 44px 96px;
}
.steps li:last-child { padding-bottom: 0; }
.step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--teal);
  background: var(--light-panel);
  color: var(--teal-deep);
  font-family: var(--serif);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps h3 { font-size: 1.4rem; margin-bottom: 8px; }
.steps p { font-size: 0.95rem; margin-bottom: 0; max-width: 56em; }

.look-card {
  border-top: 1px solid var(--rule-strong);
  padding-top: 28px;
}
.look-card .ln {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--teal-bright);
  display: block;
  line-height: 1;
  margin-bottom: 14px;
}
.look-card h3 { font-size: 1.4rem; margin-bottom: 12px; }
.look-card p { color: var(--ink-2); font-size: 0.94rem; margin: 0; }

.qual-panel {
  background: var(--light-panel);
  border: 1px solid var(--light-rule);
  border-left: 3px solid var(--teal);
  padding: 36px 38px;
  font-size: 1.02rem;
  color: var(--light-ink);
}
.qual-panel strong { color: var(--teal-deep); }

/* ---------- accordion (FAQ + archive) ---------- */

.acc { border-bottom: 1px solid var(--rule); }
.acc-item { border-top: 1px solid var(--rule); }

.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 6px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  transition: color 0.25s ease;
}
.acc-btn:hover { color: var(--teal-bright); }
.acc-item.open .acc-btn { color: var(--teal-bright); }

.acc-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s ease;
}
.acc-icon::before { width: 12px; height: 1.5px; }
.acc-icon::after { width: 1.5px; height: 12px; }
.acc-item.open .acc-icon { border-color: var(--teal-bright); transform: rotate(45deg); }

.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.acc-panel-inner { padding: 2px 6px 32px; color: var(--ink-2); font-size: 0.97rem; max-width: 60em; }

/* ---------- forms ---------- */

.form-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: 48px 46px;
}
@media (max-width: 640px) { .form-card { padding: 32px 24px; } }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 26px; }
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.field label .req { color: var(--teal-bright); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.96rem;
  padding: 14px 16px;
  border-radius: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396918a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 42px;
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.7; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(57, 151, 152, 0.18);
}

.field-hint { font-size: 0.8rem; color: var(--ink-3); margin-top: 8px; }

.field-error {
  display: none;
  font-size: 0.82rem;
  color: var(--error);
  margin-top: 8px;
}
.field.invalid .field-error { display: block; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--error); }

.essay-divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 38px 0;
}

.form-success {
  border: 1px solid rgba(57, 151, 152, 0.55);
  background: rgba(57, 151, 152, 0.08);
  padding: 52px 44px;
  text-align: center;
}
.form-success svg { width: 52px; height: 52px; color: var(--teal-bright); margin: 0 auto 22px; }
.form-success h2 { font-size: 2rem; }
.form-success p { color: var(--ink-2); max-width: 36em; margin-left: auto; margin-right: auto; }

/* login */

.login-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 60px) 28px 80px;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(57, 151, 152, 0.14), transparent 55%),
    var(--bg-0);
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--teal);
  padding: 48px 42px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
}
@media (max-width: 480px) { .login-card { padding: 36px 26px; } }
.login-card .brand-mark { width: 54px; height: 54px; margin: 0 auto 22px; display: block; }
.login-card h1 { font-size: 1.9rem; text-align: center; margin-bottom: 6px; }
.login-card .login-sub { text-align: center; font-size: 0.86rem; color: var(--ink-3); margin-bottom: 32px; letter-spacing: 0.06em; }

.login-error {
  display: none;
  border: 1px solid rgba(224, 143, 126, 0.55);
  background: rgba(224, 143, 126, 0.09);
  color: var(--error);
  font-size: 0.86rem;
  padding: 12px 16px;
  margin-bottom: 22px;
}
.login-error.show { display: block; }

.demo-hint {
  margin-top: 28px;
  border: 1px dashed rgba(57, 151, 152, 0.5);
  background: rgba(57, 151, 152, 0.07);
  padding: 18px 20px;
  font-size: 0.84rem;
  color: var(--ink-2);
}
.demo-hint strong { color: var(--teal-bright); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem; display: block; margin-bottom: 8px; }
.demo-hint code {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.84rem;
  color: var(--ink);
  background: var(--bg-2);
  padding: 1px 7px;
  border: 1px solid var(--rule);
}

/* ---------- members portal ---------- */

.portal-hero {
  padding: calc(var(--header-h) + 70px) 0 60px;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(57, 151, 152, 0.16), transparent 55%),
    var(--bg-0);
  border-bottom: 1px solid var(--rule);
}
.portal-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--teal-bright);
  display: block;
  margin-bottom: 16px;
}
.portal-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 10px; }
.portal-hero p { color: var(--ink-2); margin: 0; }

.portal-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 920px) { .portal-grid { grid-template-columns: 1fr; } }

.portal-panel {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: 34px 32px;
}
.portal-panel + .portal-panel { margin-top: 40px; }
.portal-panel h2 {
  font-size: 1.45rem;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.portal-panel h2 svg { width: 20px; height: 20px; color: var(--teal-bright); flex-shrink: 0; }

.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.94rem;
  color: var(--ink-2);
}
.notice-list li:first-child { border-top: 0; }
.notice-tag {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-bright);
  border: 1px solid rgba(57, 151, 152, 0.45);
  padding: 2px 9px;
}

.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.file-list li:first-child { border-top: 0; }
.file-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-bright);
}
.file-icon svg { width: 18px; height: 18px; }
.file-meta { flex: 1; min-width: 0; }
.file-name { font-size: 0.92rem; color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-info { font-size: 0.76rem; color: var(--ink-3); letter-spacing: 0.06em; }
.file-dl {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-bright);
  border: 1px solid rgba(57, 151, 152, 0.45);
  padding: 7px 14px;
  transition: all 0.25s ease;
}
.file-dl:hover { background: var(--teal); color: #fff; }

.feed-post {
  border-top: 1px solid var(--rule);
  padding: 20px 0;
}
.feed-post:first-of-type { border-top: 0; padding-top: 0; }
.feed-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.feed-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal-deep);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feed-who { font-size: 0.88rem; color: var(--ink); font-weight: 600; }
.feed-when { font-size: 0.74rem; color: var(--ink-3); letter-spacing: 0.06em; display: block; }
.feed-post p { font-size: 0.92rem; color: var(--ink-2); margin: 0; }

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  padding: 120px 0;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(57, 151, 152, 0.22), transparent 60%),
    var(--bg-0);
  border-top: 1px solid var(--rule);
}
.cta-band h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  max-width: 18em;
  margin: 0 auto 18px;
}
.cta-band h2 em { font-style: italic; color: var(--teal-bright); }
.cta-band p { color: var(--ink-2); max-width: 42em; margin: 0 auto 40px; }
.cta-band .hero-ctas { justify-content: center; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--bg-0);
  border-top: 1px solid var(--rule);
  padding: 80px 0 0;
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr; gap: 36px; } }

.footer-brand img { height: 46px; width: auto; margin-bottom: 20px; }
.footer-slogan {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.footer-brand p { font-size: 0.85rem; color: var(--ink-3); margin: 0; }

.footer-h {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 18px;
}

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { padding: 5px 0; font-size: 0.9rem; color: var(--ink-2); }
.footer-list a { color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.footer-list a:hover { color: var(--teal-bright); }
.footer-list svg { width: 15px; height: 15px; color: var(--teal-bright); flex-shrink: 0; }

.footer-bottom {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  padding: 26px 28px;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ---------- misc responsive ---------- */

@media (max-width: 640px) {
  .section { padding: 76px 0; }
  .section--tight { padding: 56px 0; }
  .hero { min-height: 92vh; }
  .page-hero { min-height: 0; padding: calc(var(--header-h) + 64px) 0 64px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .steps li { padding-left: 78px; }
  .step-num { width: 52px; height: 52px; font-size: 1.25rem; }
  .steps::before { left: 26px; }
  .partner-wall span { flex-basis: 50%; min-width: 0; font-size: 0.98rem; padding: 20px 10px; }
}

/* ============================================================
   Page additions — about / teams / projects / recruiting / members
   ============================================================ */

/* anchor targets clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + 26px); }

/* plain glow hero (greetings / apply / faq — no photo, quiet prestige) */
.page-hero--glow {
  background:
    radial-gradient(ellipse at 72% 0%, rgba(57, 151, 152, 0.15), transparent 55%),
    var(--bg-0);
}

/* anchor nav pills (teams page) */
.anchor-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.anchor-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 22px;
  border: 1px solid var(--rule-strong);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: all 0.3s ease;
}
.anchor-nav a .code {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--teal-bright);
  letter-spacing: 0.04em;
  text-transform: none;
}
.anchor-nav a:hover {
  border-color: var(--teal-bright);
  color: var(--ink);
  box-shadow: 0 0 22px rgba(57, 151, 152, 0.16);
}

/* archive accordion year meta */
.acc-meta {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 16px;
}

/* light-section adjustments (recruiting) */
.section--light .notice-strip { color: var(--light-ink-2); background: rgba(57, 151, 152, 0.08); }
.section--light p a, .section--light .notice-strip a { color: var(--teal-deep); font-weight: 600; }
.section--light p a:hover, .section--light .notice-strip a:hover { color: var(--light-ink); }
.section--light .text-link { color: var(--teal-deep); }
.section--light .text-link:hover { color: var(--light-ink); border-bottom-color: var(--light-ink); }

/* members portal welcome meta */
.portal-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px; }
.portal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.portal-meta svg { width: 14px; height: 14px; color: var(--teal-bright); flex-shrink: 0; }

/* Global safety: the hidden attribute always wins over display rules */
[hidden] { display: none !important; }

/* ============================================================
   Public roster — 회장단/운영진 명단 (replaces the old member portal)
   New page, built in the existing visual language. Existing pages
   are untouched; these classes are additive only.
   ============================================================ */

.members-cta {
  border: 1px dashed rgba(57, 151, 152, 0.5);
  background: rgba(57, 151, 152, 0.06);
  padding: 22px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 56px;
}
.members-cta p { margin: 0; color: var(--ink-2); font-size: 0.95rem; flex: 1; min-width: 240px; }
.members-cta .btn-auth { flex-shrink: 0; }

.members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .members-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .members-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .members-grid { grid-template-columns: 1fr; } }

.member-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--teal);
  padding: 30px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.member-card:hover { transform: translateY(-4px); border-color: rgba(57, 151, 152, 0.5); }

.member-photo,
.member-monogram {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.member-photo { object-fit: cover; filter: saturate(0.85); border: 1px solid var(--rule-strong); }
.member-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-deep);
  color: #fff;
  font-family: var(--serif);
  font-size: 2.1rem;
  letter-spacing: 0.02em;
}
.member-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.member-meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 10px;
}
.member-role { font-size: 0.9rem; color: var(--ink-3); margin: 0; }

/* ==========================================================
   Animated company cloud (partner logos) — floating + pop-out
   Logo cloud only; no density simplification was ported.
   ========================================================== */
/* ---------- 2) animated company cloud (replaces .partner-wall) ---------- */
.company-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 22px;
  max-width: 920px;
  margin: 6px auto 0;
  padding: 26px 8px 8px;
}
.cloud-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 9999px;
  background: #fff;                                   /* white pill — logos read on any brand color */
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #0f172a;                                     /* dark text for name-only chips */
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-size: 0.95rem;
  line-height: 1;
  cursor: default;
  will-change: transform;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);         /* depth → chips sit forward off the dark bg */
  animation: cloud-float 6s ease-in-out infinite alternate;
  transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cloud-chip.has-logo { padding: 13px 24px; }
.cloud-chip.has-logo img {
  height: 26px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  display: block;
}
/* size variety (tag-cloud feel) — logos vary by height, name chips by font-size */
.cloud-chip.has-logo:nth-child(4n + 1) img { height: 34px; }
.cloud-chip.has-logo:nth-child(4n + 2) img { height: 21px; }
.cloud-chip.has-logo:nth-child(5n)     img { height: 19px; }

/* POP OUT on hover — lift, scale, deepen shadow, hold still */
.cloud-chip:hover {
  transform: scale(1.3) translateY(-8px) !important;  /* override the float transform */
  z-index: 20;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
  animation-play-state: paused;
}
/* size + opacity variety → tag-cloud feel (name chips only; logos stay crisp & full-opacity) */
.cloud-chip:not(.has-logo):nth-child(4n + 1) { font-size: 1.18rem; }
.cloud-chip:not(.has-logo):nth-child(4n + 2) { font-size: 0.9rem;  opacity: 0.82; }
.cloud-chip:not(.has-logo):nth-child(4n + 3) { font-size: 1.05rem; }
.cloud-chip:not(.has-logo):nth-child(5n)     { font-size: 0.82rem; opacity: 0.72; }
/* two interleaved drift patterns + staggered timing → organic motion */
.cloud-chip:nth-child(2n)     { animation-name: cloud-drift; }
.cloud-chip:nth-child(3n)     { animation-duration: 7.6s; animation-delay: -2.2s; }
.cloud-chip:nth-child(3n + 1) { animation-duration: 6.4s; animation-delay: -1.1s; }
.cloud-chip:nth-child(3n + 2) { animation-duration: 8.3s; animation-delay: -3.4s; }
.cloud-chip:nth-child(7n)     { animation-delay: -4.6s; }
@keyframes cloud-float {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}
@keyframes cloud-drift {
  from { transform: translate(-5px, 4px) rotate(-1deg); }
  to   { transform: translate(5px, -4px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-chip { animation: none; }
}

/* footer phone — show a clickable placeholder until a number is entered */
.footer-phone:empty::before { content: "전화번호 추가"; opacity: .55; }

/* ---------- media load fade (progressive enhancement) ----------
   Pairs with the settle logic at the end of app.js. Media is hidden ONLY
   when JS has added .media-fade-enabled to <html>; no-JS visitors see
   everything normally. Reveal on load OR error (broken images must never
   stay invisible). Scoped to main — header/footer logos and hero
   backgrounds are unaffected. */
.media-fade-enabled main img,
.media-fade-enabled main video {
  opacity: 0;
  transition: opacity 360ms ease;
}
.media-fade-enabled main img.is-media-loaded,
.media-fade-enabled main video.is-media-loaded,
.media-fade-enabled main img.is-media-error,
.media-fade-enabled main video.is-media-error {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .media-fade-enabled main img,
  .media-fade-enabled main video {
    transition: none;
  }
}

/* ---------- home partner cloud on light section ---------- */
.section--light .cloud-chip { border-color: var(--light-rule); box-shadow: 0 7px 18px rgba(23, 26, 28, 0.14); }
.section--light .cloud-chip:hover { box-shadow: 0 22px 48px rgba(23, 26, 28, 0.22); }

/* ============================================================
   ALUMNI PAGE — "Network in Numbers" scroll-animated placement viz
   Donut + per-field bars draw on scroll; the All / Recent-5-Years
   toggle morphs every segment, bar and counter in place.
   Data: src/_data/alumni.yaml (placement/chips) · Logic: assets/app.js
   ============================================================ */

:root {
  --viz-c0: #399798; /* Consulting — brand teal */
  --viz-c1: #1d5c5d; /* Finance · IB */
  --viz-c2: #5fb3b4; /* Conglomerates */
  --viz-c3: #8ad8d9; /* Startups & Founders */
  --viz-c4: #2e7a7b; /* Global Tech */
  --viz-c5: #9fb3b1; /* Law */
  --viz-c6: #cfdcda; /* Academia */
}
.viz-c0 { stroke: var(--viz-c0); } .viz-bg-c0 { background: var(--viz-c0); }
.viz-c1 { stroke: var(--viz-c1); } .viz-bg-c1 { background: var(--viz-c1); }
.viz-c2 { stroke: var(--viz-c2); } .viz-bg-c2 { background: var(--viz-c2); }
.viz-c3 { stroke: var(--viz-c3); } .viz-bg-c3 { background: var(--viz-c3); }
.viz-c4 { stroke: var(--viz-c4); } .viz-bg-c4 { background: var(--viz-c4); }
.viz-c5 { stroke: var(--viz-c5); } .viz-bg-c5 { background: var(--viz-c5); }
.viz-c6 { stroke: var(--viz-c6); } .viz-bg-c6 { background: var(--viz-c6); }

.viz-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  margin-bottom: 48px;
}
.viz-tab {
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.viz-tab > span { display: block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 2px; }
/* 편집 가능한 note/숫자 span은 상세 줄 안에서 inline 유지 (block이면 줄바꿈되어 탭이 원형으로 깨짐) */
.viz-tab > span span { display: inline; font-size: inherit; letter-spacing: inherit; color: inherit; margin: 0; white-space: normal; }
.viz-tab:hover { color: var(--teal-bright); }
.viz-tab.is-active { background: var(--teal); color: #fff; }
.viz-tab.is-active span { color: rgba(255, 255, 255, 0.75); }

.placement-viz {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 64px;
  align-items: center;
}
.viz-donut { position: relative; max-width: 380px; }
.viz-donut svg { display: block; width: 100%; height: auto; }
.viz-ring { fill: none; stroke: var(--rule); stroke-width: 30; }
.viz-seg {
  fill: none;
  stroke-width: 30;
  stroke-dasharray: 0 100;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 1.1s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.viz-seg:hover { filter: brightness(1.12); }
.viz-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.viz-total {
  font-family: var(--hero-serif);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--teal-bright);
}
.viz-total-label {
  margin-top: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.viz-legend { display: flex; flex-direction: column; gap: 22px; }
.viz-row { display: flex; gap: 16px; align-items: flex-start; }
.viz-dot { width: 12px; height: 12px; border-radius: 3px; margin-top: 5px; flex: none; }
.viz-row-main { flex: 1; min-width: 0; }
.viz-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.viz-row-head h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em; }
.viz-count { white-space: nowrap; font-size: 0.95rem; color: var(--ink-2); }
.viz-count b { font-size: 1.25rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.viz-count em { font-style: normal; font-size: 0.78rem; color: var(--ink-3); margin-left: 6px; }
.viz-bar { height: 6px; border-radius: 3px; background: var(--rule); margin: 8px 0 9px; overflow: hidden; }
.viz-bar span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.viz-desc { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 3px; }
.viz-firms { font-size: 0.76rem; letter-spacing: 0.02em; color: var(--ink-3); }

.viz-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 64px;
}
.viz-chip {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px 18px 18px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.viz-chip { cursor: pointer; text-align: left; background: none; font: inherit; width: 100%; position: relative; }
.viz-chip:hover { border-color: var(--teal); transform: translateY(-3px); }
.viz-chip.is-open { border-color: var(--teal); background: var(--bg-2); }
.viz-chip-more {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--teal-bright); opacity: 0.75; transition: opacity 0.2s ease;
}
.viz-chip-more svg { width: 13px; height: 13px; transition: transform 0.3s ease; }
.viz-chip:hover .viz-chip-more { opacity: 1; }
.viz-chip.is-open .viz-chip-more svg { transform: rotate(180deg); }

.viz-chip-panels { margin-top: 14px; }
.viz-chip-panel {
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: var(--bg-2);
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.4s ease;
}
.viz-chip-panel.is-open { max-height: 460px; opacity: 1; padding: 22px 24px; }
.viz-chip-panel-h {
  font-size: 0.95rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px;
}
.viz-chip-panel-h b { font-family: var(--hero-serif); font-weight: 500; font-size: 1.5rem; color: var(--teal-bright); }
.viz-chip-panel-body {
  font-size: 0.9rem; line-height: 1.72; color: var(--ink-2);
  white-space: pre-line;
}
@media (prefers-reduced-motion: reduce) {
  .viz-chip-panel { transition: none; }
}
.viz-chip-num {
  display: block;
  font-family: var(--hero-serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--teal-bright);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.viz-chip-count, .viz-chip-suffix { display: inline; }
/* 편집 모드에서 기호(+/%)가 비어 있어도 클릭해 넣을 수 있게 최소 폭 확보 */
html.tina-mode-edit .viz-chip-suffix:empty { display: inline-block; min-width: 0.6em; min-height: 1em; outline: 1px dashed var(--rule-strong); }
.viz-chip-label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.viz-chip-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: 4px;
}
.viz-note { margin-top: 26px; font-size: 0.74rem; color: var(--ink-3); }

@media (max-width: 900px) {
  .placement-viz { grid-template-columns: 1fr; gap: 44px; }
  .viz-donut { margin: 0 auto; width: min(320px, 78vw); }
}
@media (prefers-reduced-motion: reduce) {
  .viz-seg, .viz-bar span { transition: none; }
}

/* ============================================================
   THEME TOGGLE (sun / moon) + LIGHT THEME
   Dark stays the default; html[data-theme="light"] flips the site.
   Markup is identical in both themes, so TinaCMS inline editing
   works unchanged.
   ============================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle:hover { color: var(--teal-bright); border-color: var(--teal-bright); transform: rotate(40deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle:hover { transform: rotate(-25deg); }

/* dual logo — white in dark theme, color in light theme */
.brand img.logo-light, .footer-brand img.logo-light { display: none; }
html[data-theme="light"] .brand img.logo-dark,
html[data-theme="light"] .footer-brand img.logo-dark { display: none; }
html[data-theme="light"] .brand img.logo-light,
html[data-theme="light"] .footer-brand img.logo-light { display: block; }

/* ---------- light palette ---------- */
html[data-theme="light"] {
  --bg-0: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #f6f4ee;
  --bg-3: #edeae2;
  --ink: #26292c;
  --ink-2: #52555a;
  --ink-3: #7c7f76;
  --teal-bright: #1f7273;
  --teal-deep: #1d5c5d;
  --teal-glow: rgba(57, 151, 152, 0.22);
  --rule: rgba(38, 41, 44, 0.12);
  --rule-strong: rgba(38, 41, 44, 0.26);
}

/* ---------- light: header (solid white — logo sits clean) ---------- */
html[data-theme="light"] .site-header { background: #ffffff; box-shadow: 0 1px 0 var(--rule); }
html[data-theme="light"] .site-header.scrolled,
html[data-theme="light"] body.menu-open .site-header { background: #ffffff; box-shadow: 0 1px 0 var(--rule); }

/* ---------- light: hero — editorial left white gradient ----------
   The photo stays original on the right; a soft white gradient rises from
   the left where the type sits, so ink text stays readable while most of
   the image shows through. Fades into the white page at the bottom.
   (Josh pick 2026-07-15: mockup option 3, gradient weakened.) */
html[data-theme="light"] .hero-bg,
html[data-theme="light"] .hero[data-slideshow] .slide-bg {
  filter: saturate(0.95) brightness(1.0);
}
html[data-theme="light"] .hero-scrim {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.76) 32%, rgba(255, 255, 255, 0.24) 62%, rgba(255, 255, 255, 0) 84%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 84%, var(--bg-1) 100%);
}
/* centered page heroes (e.g. About): symmetric veil instead of left gradient */
html[data-theme="light"] .page-hero--center .hero-scrim {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.68) 72%, var(--bg-1) 100%);
}
/* narrow screens: text spans the full width — widen the white coverage */
@media (max-width: 768px) {
  html[data-theme="light"] .hero-scrim,
  html[data-theme="light"] .hero[data-slideshow] .slide::after {
    background:
      linear-gradient(to right, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0.45) 100%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0) 84%, var(--bg-1) 100%);
  }
}

/* ---------- light: photo heroes — solid black type (no shadow) ---------- */
html[data-theme="light"] .hero .hero-eyebrow, html[data-theme="light"] .page-hero .hero-eyebrow { color: var(--teal-deep); }
html[data-theme="light"] .hero .hero-eyebrow::before, html[data-theme="light"] .page-hero .hero-eyebrow::before,
html[data-theme="light"] .page-hero--center .hero-eyebrow::after { background: var(--teal-deep); }
html[data-theme="light"] .hero .hero-title, html[data-theme="light"] .page-hero .hero-title { color: #1a1d1f; }
html[data-theme="light"] .hero .hero-title em, html[data-theme="light"] .page-hero .hero-title em { color: var(--teal-deep); }
html[data-theme="light"] .hero .hero-sub, html[data-theme="light"] .page-hero .hero-sub { color: #26292c; }
html[data-theme="light"] .hero .btn--ghost, html[data-theme="light"] .page-hero .btn--ghost {
  border-color: rgba(26, 29, 31, 0.4); color: #1a1d1f;
}
html[data-theme="light"] .hero .btn--ghost:hover, html[data-theme="light"] .page-hero .btn--ghost:hover { border-color: var(--teal-deep); background: rgba(26, 29, 31, 0.05); color: var(--teal-deep); }
html[data-theme="light"] .hero-scroll { color: rgba(26, 29, 31, 0.7); }
html[data-theme="light"] .hero-scroll::after { background: linear-gradient(to bottom, var(--teal-deep), transparent); }

/* ---------- light: glow heroes flip to light/dark type ---------- */
html[data-theme="light"] .page-hero--glow { background: radial-gradient(ellipse at 72% 0%, rgba(57, 151, 152, 0.1), transparent 55%), var(--bg-1); }
html[data-theme="light"] .page-hero--glow .hero-eyebrow { color: var(--teal-deep); }
html[data-theme="light"] .page-hero--glow .hero-title { color: var(--ink); }
html[data-theme="light"] .page-hero--glow .hero-title em { color: var(--teal-deep); }
html[data-theme="light"] .page-hero--glow .hero-sub { color: var(--ink-2); }
html[data-theme="light"] .page-hero--glow .btn--ghost { border-color: var(--rule-strong); color: var(--ink); }
html[data-theme="light"] .page-hero--glow .btn--ghost:hover { border-color: var(--teal); color: var(--teal-bright); }

/* ---------- light: components ---------- */
html[data-theme="light"] .dropdown { box-shadow: 0 24px 50px rgba(23, 26, 28, 0.14); }
html[data-theme="light"] .track-card:hover { box-shadow: 0 28px 60px rgba(23, 26, 28, 0.12); }
html[data-theme="light"] .login-card { box-shadow: 0 40px 80px rgba(23, 26, 28, 0.16); }
html[data-theme="light"] .cloud-chip { box-shadow: 0 7px 18px rgba(23, 26, 28, 0.14); border-color: var(--light-rule); }
html[data-theme="light"] .cloud-chip:hover { box-shadow: 0 22px 48px rgba(23, 26, 28, 0.22); }
html[data-theme="light"] .track-photo img,
html[data-theme="light"] .program-photo img,
html[data-theme="light"] .session-media img { filter: saturate(0.85) brightness(0.97); }
html[data-theme="light"] .track-card:hover .track-photo img { filter: saturate(1) brightness(1); }
html[data-theme="light"] .track-code { color: rgba(255, 255, 255, 0.95); }
html[data-theme="light"] .site-footer { background: var(--bg-2); }
html[data-theme="light"] .section--deep { background: #faf9f5; }
html[data-theme="light"] .stats-band.section--deep { background: var(--bg-1); }
html[data-theme="light"] .btn--solid:hover { color: #ffffff; }
html[data-theme="light"] .btn-auth--solid:hover { color: #ffffff; }
html[data-theme="light"] .cta-band { background: radial-gradient(ellipse at 50% 120%, rgba(57, 151, 152, 0.12), transparent 60%), var(--bg-0); }
html[data-theme="light"] .portal-hero { background: radial-gradient(ellipse at 80% 10%, rgba(57, 151, 152, 0.1), transparent 55%), var(--bg-1); }
html[data-theme="light"] .login-stage { background: radial-gradient(ellipse at 50% 0%, rgba(57, 151, 152, 0.08), transparent 55%), var(--bg-1); }

/* smooth cross-theme transition */
body, .site-header, .site-footer, .section--alt, .section--deep, .cta-band { transition: background-color 0.35s ease, color 0.35s ease; }

/* partners band: dark in dark theme (consistent), cream accent in light theme */
html[data-theme="light"] .partners-band { background: var(--light-bg); border-top: 0; }

/* light theme: slideshow slide overlay — same editorial left white gradient */
html[data-theme="light"] .hero[data-slideshow] .slide::after {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.76) 32%, rgba(255, 255, 255, 0.24) 62%, rgba(255, 255, 255, 0) 84%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 84%, var(--bg-1) 100%);
}
/* light theme: slide dots / count sit on the frosted photo — keep them visible */
html[data-theme="light"] .slide-dot { background: rgba(23, 26, 28, 0.25); }
html[data-theme="light"] .slide-dot:hover { background: rgba(23, 26, 28, 0.5); }
html[data-theme="light"] .slide-dot.is-active { background: var(--teal-deep); }
html[data-theme="light"] .hero-count { color: rgba(26, 29, 31, 0.7); }

/* ---- 편집기 줄바꿈 표시 ----
   인라인 편집기/관리자(textarea)에서 Enter로 저장된 '\n'을 실제 줄바꿈으로
   렌더링. HTML 필드(data-tina-html)는 <br>로 줄바꿈을 저장하므로 제외
   (템플릿 들여쓰기 개행이 화면에 나타나는 것을 방지). */
[data-tina-field]:not([data-tina-html]) { white-space: pre-line; }

/* ---------- 2026-07-16 revision batch (수정사항.docx) ---------- */

/* Korean copy: never break inside a word (글자 잘림/단어 중간 줄바꿈 방지) */
.lead, .hero-sub, .cta-band p, .section-head p { word-break: keep-all; overflow-wrap: break-word; }

/* teams: uniform team-code badge — BS·MKT·FN 같은 크기, 세로 중앙 정렬 */
.team-head { align-items: center; }
.team-code-big { display: inline-block; width: 3em; text-align: center; }

/* reveal: 살짝 더 부드럽게 (샤라락) */
.js .reveal { transform: translateY(20px); transition-duration: 0.7s; }

/* projects: partner logo wall — 정적 그리드 + 순차 fade-in */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.js .logo-wall.reveal { opacity: 1; transform: none; } /* 셀이 개별 애니메이션 담당 */
.logo-wall .cell {
  flex: 1 0 20%;
  min-width: 170px;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: #fff;                 /* 흰 타일 — 원본 색 로고가 어떤 배경에서도 선명하게 */
}
/* 로고를 원본 색상 그대로 — 흰색 타일 위에 올려 어떤 배경색에서도 브랜드 색이 읽히게 */
.logo-wall .cell img {
  max-height: 40px;
  max-width: 78%;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.logo-wall .cell:hover { box-shadow: inset 0 0 0 2px rgba(57, 151, 152, 0.45); }
.logo-wall .cell:hover img { transform: scale(1.06); }
.logo-wall .cell-name {
  font-family: var(--serif);
  font-size: 1.08rem;
  letter-spacing: 0.06em;
  color: #4a4f55;                  /* 어두운 텍스트 — 흰 타일 위 */
  text-align: center;
}
.js .logo-wall .cell {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js .logo-wall.in .cell { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .logo-wall .cell { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 700px) {
  .logo-wall .cell { flex-basis: 50%; min-width: 0; min-height: 84px; }
}

/* projects: 카드 우상단 기업 로고 */
.project-card { position: relative; }
.project-logo {
  position: absolute;
  top: 26px;
  right: 26px;
  max-height: 22px;
  max-width: 96px;
  object-fit: contain;
  padding: 7px 10px;
  background: #fff;                 /* 원본 색 로고 — 흰 알약 위 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
@media (max-width: 700px) { .project-logo { position: static; display: block; margin-bottom: 14px; } }

/* teams: project showcase — 기업 로고 + 블러 장표 칸 */
.team-showcase { margin-top: 28px; }
.showcase-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.showcase-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 8px;
}
.showcase-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 9999px;
  background: #fff;                 /* 흰 알약 — 원본 색 로고 */
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
}
.showcase-chip img { height: 22px; max-width: 118px; object-fit: contain; }
.showcase-chip--text { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: #2a2e33; }
.showcase-decks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; }
.deck-blur { margin: 0; border: 1px solid var(--rule); overflow: hidden; position: relative; }
.deck-blur img { display: block; width: 100%; filter: blur(7px); transform: scale(1.05); }
.deck-blur figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--ink-2);
  background: rgba(10, 12, 13, 0.55);
  backdrop-filter: blur(2px);
}

/* ---------- 2026-07-19 revision batch (7.19 웹사이트 변경사항.docx) ---------- */

/* 1) teams: 좌측 정렬 — BS/MKT/FN 배지·제목·설명이 같은 왼쪽 라인에서 시작 */
.team-code-big {
  text-align: left;
  background: linear-gradient(115deg, var(--teal-bright) 20%, rgba(57, 151, 152, 0.45));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--teal-bright); /* fallback (배경클립 미지원 브라우저) */
}
@supports (-webkit-background-clip: text) { .team-code-big { color: transparent; } }

/* 2) teams: 커리큘럼 타임라인 — 구 사이트의 타임라인 구조, 박스 제거 (de-boxed) */
.team-cols--tl { gap: 72px; margin-top: 40px; }
@media (max-width: 860px) { .team-cols--tl { gap: 52px; } }
.tl-col h3 { font-size: 1.35rem; margin: 0 0 8px; }
.tl-intro { font-size: 0.93rem; color: var(--ink-2); margin: 0 0 4px; }

.week-tl { position: relative; margin-top: 24px; padding-left: 28px; }
.week-tl::before {
  content: "";
  position: absolute;
  left: 5px; top: 10px; bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, var(--teal-bright), rgba(57, 151, 152, 0.1));
  transform-origin: top;
}
.week-tl li {
  display: block;
  position: relative;
  padding: 15px 0 17px;
  border-top: 0;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.week-tl li::before {
  content: "";
  position: absolute;
  left: -28px; top: 21px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 2px solid var(--teal-bright);
  box-shadow: 0 0 0 0 rgba(94, 198, 199, 0);
  transition: box-shadow 0.35s ease;
}
.week-tl .wk { display: block; margin-bottom: 6px; font-size: 1.02rem; white-space: normal; }
.week-tl li:hover::before { box-shadow: 0 0 0 7px rgba(94, 198, 199, 0.16); }
.week-tl li:hover .wk { color: #8adcdd; }

/* 타임라인 등장 애니메이션 — 선이 자라나고, 점·항목이 순차로 샤라락 */
.js .week-tl::before { transform: scaleY(0); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s; }
.js .tl-col.in .week-tl::before { transform: scaleY(1); }
.js .week-tl li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(180ms + var(--w, 0) * 140ms);
}
.js .tl-col.in .week-tl li { opacity: 1; transform: none; }
.js .week-tl li::before {
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  transition-delay: calc(240ms + var(--w, 0) * 140ms), 0s;
}
.js .tl-col.in .week-tl li::before { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .js .week-tl::before, .js .week-tl li, .js .week-tl li::before { transform: none; opacity: 1; transition: none; }
}

/* 3) 로고 확대 — 세로 크기 고정 방식 (선배님들 카드 사진처럼 높이 통일) */
.showcase-chip { min-height: 66px; padding: 13px 26px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.showcase-chip img { height: 38px; max-width: 180px; width: auto; }
.showcase-chip--text { font-size: 1.05rem; }
.showcase-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
.project-logo { max-height: none; height: 38px; width: auto; max-width: 150px; padding: 8px 13px; }

/* 라이트 테마 보정 */
html[data-theme="light"] .team-code-big { background: linear-gradient(115deg, var(--teal-deep) 20%, rgba(57, 151, 152, 0.55)); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .week-tl li::before { background: var(--light-bg); }
html[data-theme="light"] .week-tl li:hover .wk { color: var(--teal-deep); }

/* 5) projects 로고월 → Infinite Marquee (2026-07-19, 샘플 5 선택)
   두 줄이 반대 방향으로 무한히 흐르고, 양끝은 배경으로 페이드아웃.
   호버 시 정지. 흰 면적이 줄어 다크모드에서 벽이 덜 튐. */
.logo-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.js .logo-marquee.reveal { transform: none; } /* 세로 이동 없이 페이드만 */
.lm-row { overflow: hidden; padding: 13px 0; }
.lm-track { display: flex; width: max-content; animation: lm-scroll 38s linear infinite; }
.lm-row--rev .lm-track { animation-direction: reverse; animation-duration: 46s; }
@keyframes lm-scroll { to { transform: translateX(-33.3333%); } }
.lm-chip {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding: 13px 30px;
  margin-right: 16px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
  will-change: transform;
}
/* 마퀴는 계속 흐르고, 마우스에 닿는 로고만 튀어오른다 (정지 없음) */
.lm-chip:hover {
  transform: translateY(-4px) scale(1.16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
  z-index: 5;
}
.lm-chip img { height: 38px; width: auto; max-width: 170px; object-fit: contain; }
.lm-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: #2a2e33;
  white-space: nowrap;
}
html[data-theme="light"] .lm-chip { box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12); border: 1px solid var(--light-rule); }
@media (max-width: 700px) {
  .lm-chip { min-height: 54px; padding: 10px 22px; margin-right: 12px; }
  .lm-chip img { height: 30px; max-width: 130px; }
  .lm-name { font-size: 0.92rem; }
}
/* 모션 최소화 설정: 흐름 멈추고 두 줄을 일반 랩 그리드로 (중복 세트 숨김) */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask: none; mask: none; }
  .lm-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  .lm-chip[aria-hidden="true"] { display: none; }
  .lm-chip:hover { transform: none; }
}

/* ---------- 2026-07-19 alumni 후기 카드 개선 ---------- */

/* 3) 회사 로고 확대 — 세로 크기를 네임플레이트(기수+이름 블록)와 맞춤 */
/* 크기는 이전(40px)로 롤백 + 이름 블록(.spot-head) 기준 세로 중앙정렬 */
.spot-head { position: relative; padding-right: 196px; }
.spot-logo { top: 50%; transform: translateY(-50%); right: 0; min-height: 58px; padding: 9px 16px; max-width: 186px; }
.spot-logo img { height: 40px; max-width: 154px; }
@media (max-width: 520px) {
  .spot-head { padding-right: 150px; }
  .spot-logo { max-width: 140px; }
  .spot-logo img { max-width: 110px; }
}

/* 2) 로고 placeholder — 편집 모드에서만 보임 (방문자에게는 없음) */
.spot-logo--empty { display: none; }
html.tina-mode-edit .spot-logo--empty {
  display: inline-flex;
  background: rgba(94, 198, 199, 0.07);
  border: 2px dashed rgba(94, 198, 199, 0.55);
  box-shadow: none;
  min-width: 120px;
}
.spot-logo-hint { display: none; }
html.tina-mode-edit .spot-logo--empty img[src^="data:"] { width: 0; height: 40px; }
html.tina-mode-edit .spot-logo--empty img[src^="data:"] + .spot-logo-hint {
  display: inline;
  font: 600 0.82rem/1 var(--sans);
  color: var(--teal-bright);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 4) 숨긴 카드 — 방문자에게는 없음, 편집 모드에서는 반투명으로 보여서 다시 켤 수 있음 */
.spot-hidden { display: none; }
html.tina-mode-edit .spot-hidden { display: block; opacity: 0.38; }
html.tina-mode-edit .spot-hidden::after {
  content: "숨김 상태 — 사이트에 표시되지 않습니다";
  display: block;
  margin-top: 14px;
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--error);
}

/* ---------- 2026-07-19 projects 카드 로고 칩 + 로고월 4겹 ---------- */

/* 4) projects 카드: 로고 칩 확대 — 왼쪽 기업명 블록과 세로 크기 매치 */
.project-logo-chip {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  max-width: 200px;
}
.project-logo-chip img { height: 44px; width: auto; max-width: 168px; object-fit: contain; }
@media (max-width: 700px) {
  .project-logo-chip { position: static; display: inline-flex; margin-bottom: 14px; }
}

/* projects 카드: 로고 placeholder — 편집 모드에서만 */
.project-logo--empty { display: none; }
html.tina-mode-edit .project-logo--empty {
  display: inline-flex;
  background: rgba(94, 198, 199, 0.07);
  border: 2px dashed rgba(94, 198, 199, 0.55);
  box-shadow: none;
  min-width: 128px;
}
html.tina-mode-edit .project-logo--empty img[src^="data:"] { width: 0; height: 44px; }
html.tina-mode-edit .project-logo--empty img[src^="data:"] + .spot-logo-hint {
  display: inline;
  font: 600 0.82rem/1 var(--sans);
  color: var(--teal-bright);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 5) 로고월 4겹 — 줄마다 속도를 다르게 (자연스러운 흐름) */
.lm-row--2 .lm-track { animation-duration: 42s; }
.lm-row--3 .lm-track { animation-duration: 50s; }
.lm-chip--gone { display: none !important; }

/* 편집 모드: 마퀴 정지 + 줄바꿈 그리드로 펼침 (칩을 클릭·제거·추가하기 쉽게) */
html.tina-mode-edit .logo-marquee { -webkit-mask: none; mask: none; }
html.tina-mode-edit .lm-track {
  animation: none !important;
  width: auto;
  flex-wrap: wrap;
  row-gap: 14px;
}
html.tina-mode-edit .lm-chip[aria-hidden="true"] { display: none; }
html.tina-mode-edit .lm-chip { position: relative; }
html.tina-mode-edit .lm-chip:hover { transform: none; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24); }

/* ---------- 2026-07-19 teams 페이지 다듬기 ---------- */

/* 1) BS·MKT·FN 약어와 팀 이름 사이 간격 축소 (3em 고정폭 제거) */
.team-code-big { width: auto; }
.team-head { gap: 18px; }

/* 4) 히어로 팀 바로가기 3버튼 — 균등 폭 */
.anchor-nav { max-width: 780px; }
.anchor-nav a { flex: 1 1 0; justify-content: center; white-space: nowrap; min-width: 0; }
@media (max-width: 700px) { .anchor-nav a { flex: 1 1 100%; } }

/* 2) showcase 칩 — 텍스트 칩의 로고 슬롯 (편집자가 로고를 붙이면 미리보기) */
.showcase-chip--text { gap: 0; }
.sc-logo-slot { width: 0; height: 0; }
.sc-logo-slot:not([src^="data:"]) { width: auto; height: 32px; max-width: 140px; object-fit: contain; margin-left: 10px; }
.sc-gone { display: none !important; }
html.tina-mode-edit .showcase-chip { position: relative; }

/* 진출 분야 그래프 — 편집 모드 전용 수치 입력 (전체/최근, 2026-07-19)
   평소엔 숨김; 편집 모드에서 각 분야 옆에 '전체 N · 최근 M' 입력 칸이 떠서
   숫자를 고치면 도넛·막대·퍼센트가 즉시 다시 계산된다. */
.viz-count-edit { display: none; }
html.tina-mode-edit .viz-count-edit {
  display: inline-block; margin-left: 10px; padding: 2px 8px;
  border: 1px dashed rgba(94, 198, 199, 0.8); border-radius: 8px;
  font-size: 0.78rem; opacity: 0.92; white-space: nowrap;
}
html.tina-mode-edit .viz-count-edit [data-tina-field] { font-weight: 700; }