/* ==========================================================================
   Components (PC 전용)
   클래스는 짧은 BEM 스타일(.block__elem--mod)을 사용합니다.
   ========================================================================== */

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  color: var(--color-white);
  padding-block: var(--space-7);
  transition: background-color var(--duration-base), color var(--duration-base), padding var(--duration-base);
}
.header.is-solid, .header--light { background: var(--color-white); color: var(--color-black); padding-block: 0; }
.header__inner { display: flex; align-items: center; height: var(--header-height); gap: var(--space-6); }
.header__logo { flex: 0 0 200px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; }
.header__nav { flex: 1; display: flex; justify-content: center; }
.header__nav ul { display: flex; }
.header__nav a {
  display: block; padding: 0 30px;
  font-family: var(--font-display); font-size: 17px; letter-spacing: var(--tracking-body);
}
.header__nav a:hover, .header__nav a[aria-current="true"] { font-weight: var(--weight-semibold); text-decoration: underline; text-underline-position: under; }
.header__actions { flex: 0 0 200px; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); }
@media (max-width: 1440px) { .header__nav a { padding: 0 20px; font-size: 16px; } }

/* 로고 마크: 몬드리안 3원색 블록 (자체 마크) */
.mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.mark i { display: block; }
.mark i:nth-child(1) { width: 4px; height: 14px; background: var(--color-primary); }
.mark i:nth-child(2) { width: 12px; height: 9px; background: var(--color-mondrian-yellow); align-self: flex-start; }
.mark i:nth-child(3) { width: 6px; height: 5px; background: var(--color-mondrian-red); }

/* ---------- Button ---------- */
.btn {
  --btn-bg: var(--color-ink-600);
  --btn-fg: var(--color-white);
  --btn-border: var(--color-border-strong);
  --btn-fill: var(--color-black);       /* 호버 시 퍼지는 원 색 */
  --btn-fg-hover: var(--color-white);
  --btn-border-hover: var(--color-black);

  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 / 17 * 1em);
  padding: calc(15 / 17 * 1em) calc(20 / 17 * 1em);
  min-height: 45px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-body); line-height: 1; white-space: nowrap;
  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast);
}
/* 커서가 들어온 지점에서 원이 퍼지는 호버 (ds.js 가 --x / --y 설정) */
.btn::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--x, 50%); top: var(--y, 50%);
  width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--btn-fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--duration-base) linear;
  pointer-events: none;
}
.btn:hover { color: var(--btn-fg-hover); border-color: var(--btn-border-hover); }
.btn:hover::before { transform: translate(-50%, -50%) scale(1); }

.btn--primary { --btn-bg: var(--color-primary); --btn-border: var(--color-primary); }
.btn--accent  { --btn-bg: var(--color-mondrian-red); --btn-border: var(--color-mondrian-red); --btn-fill: var(--color-white); --btn-fg-hover: var(--color-black); --btn-border-hover: var(--color-white); font-weight: var(--weight-semibold); border-width: 2px; }
.btn--light   { --btn-bg: var(--color-white); --btn-fg: var(--color-black); --btn-border: var(--color-white); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: currentColor; --btn-border: currentColor; --btn-fill: var(--color-white); --btn-fg-hover: var(--color-black); --btn-border-hover: var(--color-white); }
.btn--ghost-dark { --btn-bg: transparent; --btn-fg: var(--color-black); --btn-border: var(--color-black); }
.btn--sm { min-height: 36px; font-size: var(--text-xs); padding: 8px 16px; }
.btn--lg { min-height: 56px; font-size: 17px; padding: 18px 28px; }

/* ---------- Icon buttons ---------- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-round);
  background: var(--color-gray-600); color: var(--color-white); font-size: 18px;
  transition: background-color var(--duration-fast);
}
.icon-btn:hover { background: var(--color-primary); }

/* 스크롤 다운: 파란 원 + 공전하는 3개의 점 */
.scroll-cue { display: inline-flex; align-items: center; gap: 7px; }
.scroll-cue em { font-family: var(--font-display); font-size: var(--text-3xs); font-weight: var(--weight-extralight); font-style: normal; }
.orbit { position: relative; display: inline-block; width: 60px; height: 60px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.orbit i { position: absolute; left: calc(50% - 2px); top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--color-white); }
.orbit i:nth-child(1) { animation: orb1 2.4s var(--ease-standard) infinite; }
.orbit i:nth-child(2) { animation: orb2 2.4s var(--ease-standard) infinite; }
.orbit i:nth-child(3) { animation: orb3 2.4s var(--ease-standard) infinite; }
@keyframes orb1 { 0%,100% { transform: translate(-5px,-1px); } 33% { transform: translate(5px,-1px); } 66% { transform: translate(0,5px); } }
@keyframes orb2 { 0%,100% { transform: translate(5px,-1px); } 33% { transform: translate(0,5px); } 66% { transform: translate(-5px,-1px); } }
@keyframes orb3 { 0%,100% { transform: translate(0,5px); } 33% { transform: translate(-5px,-1px); } 66% { transform: translate(5px,-1px); } }

/* ---------- Chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: var(--radius-pill);
  background: var(--color-gray-150); color: var(--color-black);
  font-family: var(--font-display); font-size: var(--text-2xs); letter-spacing: var(--tracking-display); line-height: 1;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.chip--outline { background: transparent; color: inherit; border: 1px solid currentColor; padding: 6px 10px; border-radius: 12.5px; font-weight: var(--weight-medium); }
.chip--glass { background: rgba(255, 255, 255, 0.17); color: var(--color-white); padding: 7px 10px; border-radius: 15px; font-size: var(--text-3xs); font-weight: var(--weight-medium); }
.chip--primary { background: var(--color-primary); color: var(--color-white); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Mondrian dot ---------- */
.dot {
  display: inline-block; vertical-align: top;
  width: calc(10 / 62 * 1em); height: calc(10 / 62 * 1em); min-width: 6px; min-height: 6px;
  margin-left: 0.12em; border-radius: 50%;
  background: var(--dot-color, var(--color-black));
}
.dot--blue { --dot-color: var(--color-mondrian-blue); }
.dot--yellow { --dot-color: var(--color-mondrian-yellow); }
.dot--red { --dot-color: var(--color-mondrian-red); }
.dot--primary { --dot-color: var(--color-primary); }
.dot--white { --dot-color: var(--color-white); }

/* ---------- Section head ---------- */
.section-head { margin-bottom: var(--section-head-gap); }
.section-head__aside { padding-top: var(--space-11); }
.section-head__aside > * + * { margin-top: var(--space-5); }
.section-head--center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.section-head__eyebrow { margin-bottom: var(--space-5); }

/* ---------- Stat (숫자 지표) ---------- */
.stat { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.stat__value { font-family: var(--font-display); font-size: var(--text-stat); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1.1; }
.stat__value sup { font-size: 0.45em; font-weight: var(--weight-medium); color: var(--color-primary); vertical-align: top; margin-left: 2px; }
.stat__label { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Index list ---------- */
.index-list li { display: flex; align-items: baseline; gap: 25px; padding: 17px 0; cursor: pointer; }
.index-list__title {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-size: var(--text-index); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); line-height: 1.1;
  color: var(--color-text-faint);
  transition: color var(--duration-fast);
}
.index-list__title .dot { position: absolute; top: 0; right: -0.3em; width: 11px; height: 11px; opacity: 0; transition: opacity var(--duration-fast); }
.index-list__sub {
  font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-display);
  opacity: 0; transform: translateX(-20px);
  transition: opacity var(--duration-base), transform var(--duration-base);
}
.index-list li:hover .index-list__title { color: var(--color-gray-450); }
.index-list li.is-active .index-list__title { color: var(--color-text); }
.index-list li.is-active .dot { opacity: 1; }
.index-list li.is-active .index-list__sub { opacity: 1; transform: none; }

/* ---------- Panels (선택형 리스트와 연동되는 상세 영역) ---------- */
.panels > :not(.is-active) { display: none; }
.panels > .is-active { animation: panel-in var(--duration-reveal) ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Art (이미지 자리표시 그래픽) ---------- */
.art { position: relative; overflow: hidden; background: var(--gradient-deep); }
.art::before, .art::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.art::before {
  width: 70%; aspect-ratio: 1; left: 50%; top: 58%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 35%, rgba(120, 170, 255, 0.55), rgba(42, 79, 241, 0.15) 55%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(160, 200, 255, 0.35);
}
.art::after {
  width: 30%; aspect-ratio: 1; left: 50%; top: 58%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.5), rgba(42, 79, 241, 0.4) 60%, transparent 72%);
}
.art--2 { background: linear-gradient(200deg, #00061c 0%, #00205a 55%, #2a4ff1 100%); }
.art--2::before { left: 30%; top: 40%; }
.art--2::after { left: 72%; top: 70%; }
.art--3 { background: linear-gradient(135deg, #0b0b0d 0%, #1a1c22 60%, #2d2e30 100%); }
.art--3::before { background: radial-gradient(circle at 50% 35%, rgba(245, 214, 37, 0.35), transparent 65%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.art--3::after { background: radial-gradient(circle, rgba(213, 13, 13, 0.55), transparent 70%); left: 70%; top: 30%; }
.art--4 { background: linear-gradient(160deg, #e9eefc 0%, #c9d6ff 50%, #2a4ff1 100%); }
.art--4::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.8), transparent 65%); }
.art--5 { background: linear-gradient(180deg, #001434 0%, #004dbc 100%); }
.art--5::before { width: 120%; top: 100%; }
.art--6 { background: linear-gradient(120deg, #f4f4f4 0%, #e1e1e5 100%); }
.art--6::before { background: radial-gradient(circle at 50% 35%, rgba(42, 79, 241, 0.35), transparent 65%); box-shadow: inset 0 0 0 1px rgba(42, 79, 241, 0.25); }
.art--6::after { background: radial-gradient(circle, rgba(245, 214, 37, 0.6), transparent 70%); left: 30%; top: 30%; }

/* ---------- Media frame ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 620 / 755; }
.media > img, .media > video, .media > .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--wide { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
@media (max-width: 1440px) { .media { border-radius: 32px; } }

/* ---------- Feature card ---------- */
.feature-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gradient-deep); color: var(--color-white);
  padding: 60px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
}
.feature-card__title {
  font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display); line-height: 1.2; margin-top: var(--space-6);
}
.feature-card__sub { font-size: var(--text-h4); font-weight: var(--weight-medium); margin-top: var(--space-4); }
.feature-card__desc { font-size: var(--text-body); font-weight: var(--weight-light); line-height: var(--leading-loose); color: rgba(255, 255, 255, 0.87); max-width: 46ch; }

/* ---------- Expand list (호버 시 가로로 펼쳐지는 카드 행) ---------- */
.expand-list { display: flex; gap: 10px; height: 560px; }
.expand-list > li {
  position: relative; overflow: hidden; cursor: pointer;
  flex: 183 1 0; min-width: 0;
  border-radius: var(--radius-lg); color: var(--color-white);
  transition: flex-grow var(--duration-slow);
}
.expand-list > li.is-active { flex-grow: 1044; }
.expand-list > li > .art { position: absolute; inset: 0; }
.expand-list > li::after { /* 텍스트 가독성용 그늘 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 6, 28, 0.75) 0%, rgba(0, 6, 28, 0.2) 60%, transparent 100%);
}
.expand-list__label {
  position: absolute; z-index: 2; right: 20px; top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
  transition: opacity var(--duration-fast);
}
.expand-list > li.is-active .expand-list__label { opacity: 0; }
.expand-list__body {
  position: absolute; z-index: 2; inset: 0; padding: 60px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  width: 860px;
  opacity: 0; pointer-events: none; transition: opacity var(--duration-base);
}
.expand-list > li.is-active .expand-list__body { opacity: 1; pointer-events: auto; transition-delay: 0.2s; }
@media (max-width: 1440px) { .expand-list { height: 480px; } .expand-list__body { padding: 44px; width: 720px; } }

/* ---------- Project card ---------- */
.project-card { display: block; }
.project-card__thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.project-card__thumb > .art { position: absolute; inset: 0; transition: transform var(--duration-slow); }
.project-card:hover .project-card__thumb > .art { transform: scale(1.04); }
.project-card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-5); }
.project-card__year { font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); }
.project-card__title { margin-top: var(--space-3); font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: 1.4; }
.project-card__title::after { content: "↗"; display: inline-block; margin-left: 6px; font-size: 0.8em; opacity: 0; transform: translate(-4px, 4px); transition: opacity var(--duration-fast), transform var(--duration-fast); }
.project-card:hover .project-card__title::after { opacity: 1; transform: none; }
.project-card__desc { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; }

/* ---------- Post list ---------- */
.post-list > li { border-bottom: 1px solid var(--color-border); transition: border-color var(--duration-fast); }
.post-list a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
  padding: 22px 30px 25px; border-radius: var(--radius-md);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.post-list__title {
  margin-top: 12px; font-size: 20px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-display);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
.post-list__date { flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--weight-light); color: rgba(0, 0, 0, 0.48); transition: color var(--duration-fast); }
.post-list > li:has(a:hover), .post-list > li.is-active { border-color: transparent; }
.post-list a:hover { background: var(--color-black); color: var(--color-white); }
.post-list > li.is-active a { background: var(--color-primary); color: var(--color-white); }
.post-list a:hover .chip, .post-list > li.is-active .chip { background: var(--color-white); }
.post-list a:hover .post-list__date, .post-list > li.is-active .post-list__date { color: rgba(255, 255, 255, 0.48); }

/* ---------- Tile grid ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--grid-gap); }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 250 / 110; padding: var(--space-4);
  background: var(--color-tile); border: 1px solid var(--color-tile-border);
  color: var(--color-gray-400); font-family: var(--font-display); font-weight: var(--weight-semibold); text-align: center;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.tile small { font-family: var(--font-body); font-size: var(--text-3xs); font-weight: var(--weight-regular); opacity: 0.8; }
.tile:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }

/* ---------- Pager ---------- */
.pager { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.6); }
.pager__btn { font-size: 17px; color: #69696b; line-height: 1; padding: 2px; }
.pager__btn:hover { color: var(--color-primary); }
.pager__dots { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--radius-pill); background: #6a6a6c; }
.pager__dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); box-shadow: var(--shadow-glow); }
.pager__dots span.is-active { background: var(--color-white); }
.pager--horizontal, .pager--horizontal .pager__dots { flex-direction: row; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 720px; max-height: 1200px; color: var(--color-white); }
.hero__scene {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--gradient-hero);
  clip-path: inset(3% 1.5% round var(--radius-scene));
}
/* 참고 사이트의 겹친 원 그래픽을 CSS로 단순화한 장식 */
.hero__orb { position: absolute; left: 50%; border-radius: 50%; pointer-events: none; transform: translateX(-50%); }
.hero__orb--back {
  width: 80%; aspect-ratio: 1; bottom: 45%;
  border: 1px solid rgba(120, 170, 255, 0.35);
  background: radial-gradient(circle at 50% 100%, rgba(42, 120, 255, 0.5), rgba(0, 20, 52, 0.2) 35%, transparent 60%);
}
.hero__orb--front {
  width: 80%; aspect-ratio: 1; top: 35%;
  border: 1px solid rgba(160, 200, 255, 0.35);
  background: radial-gradient(circle at 50% 0%, rgba(42, 120, 255, 0.45), rgba(0, 20, 52, 0.1) 40%, transparent 60%);
}
.hero__orb--core {
  width: 27%; aspect-ratio: 1; top: 72%;
  border: 1px solid rgba(160, 200, 255, 0.5);
  background: radial-gradient(circle at 50% 20%, rgba(90, 160, 255, 0.55), rgba(0, 48, 122, 0.3) 60%, transparent 75%);
}
.hero__content { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.hero__desc { margin-top: var(--space-8); font-size: var(--text-body-lg); font-weight: var(--weight-light); line-height: var(--leading-body); }
/* 넓은 화면에서는 콘텐츠 정렬선(container--wide)에 맞춤 */
.hero__cue { position: absolute; z-index: 2; left: max(65px, (100% - var(--container-wide)) / 2); bottom: 65px; }
.hero__aside { position: absolute; z-index: 2; right: max(70px, (100% - var(--container-wide)) / 2); bottom: 70px; width: 420px; }
.glow { height: 120px; margin-top: -60px; background: var(--gradient-glow); pointer-events: none; }

/* 히어로 사이드 배너 카드 */
.promo {
  display: flex; overflow: hidden; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-white);
  transition: background-color var(--duration-fast);
}
.promo:hover { background: rgba(255, 255, 255, 0.14); }
.promo__body { flex: 1; padding: 20px 24px; }
.promo__thumb { position: relative; flex: 0 0 130px; }
.promo__thumb > .art { position: absolute; inset: 0; }
.promo p { margin-top: 12px; font-size: 17px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: 1.6; }
.promo small { display: block; margin-top: var(--space-6); font-size: var(--text-3xs); font-weight: var(--weight-light); color: rgba(255, 255, 255, 0.5); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; pointer-events: none; user-select: none; }
.marquee__track {
  display: inline-block;
  font-family: var(--font-display); font-size: 12.8646vw; font-weight: var(--weight-medium);
  line-height: 1; letter-spacing: var(--tracking-display);
  color: var(--color-gray-100);
  animation: marquee 40s linear infinite;
}
.marquee__track span { padding-right: 0.3em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Timeline detail (경력 상세) ---------- */
.timeline-detail__period { font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-primary); font-weight: var(--weight-semibold); }
.timeline-detail__role { margin-top: var(--space-3); font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.4; }
.timeline-detail__desc { margin-top: var(--space-5); }
.checklist { margin-top: var(--space-8); border-top: 1px solid var(--color-border); }
.checklist li { display: flex; gap: var(--space-4); padding: 18px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-body); line-height: 1.6; }
.checklist li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 0.6em; border-radius: 50%; background: var(--color-primary); }

/* ---------- Contact list ---------- */
.contact-list { border-top: 1px solid var(--color-border); }
.contact-list a {
  display: flex; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--text-h4); transition: color var(--duration-fast), padding var(--duration-fast);
}
.contact-list small { flex: 0 0 120px; font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); }
.contact-list span { flex: 1; }
.contact-list a::after { content: "→"; transition: transform var(--duration-fast); }
.contact-list a:hover { color: var(--color-white); padding-inline: 12px; }
.contact-list a:hover::after { transform: translateX(6px); }

/* ---------- Footer ---------- */
.footer { background: var(--color-ink-900); color: var(--color-white); padding-top: 75px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); }
.footer__headline { font-size: var(--text-h3); line-height: calc(46 / 30); color: var(--color-gray-250); font-weight: var(--weight-regular); }
.footer__headline b { color: var(--color-white); font-weight: var(--weight-semibold); }
.footer__top .btn { margin-top: 25px; }
.footer__cols { display: flex; gap: calc(150 / 1600 * 100%); margin-top: 85px; }
.footer__col { display: flex; }
.footer__col > strong { flex-shrink: 0; width: 110px; font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-semibold); }
.footer__col ul { color: var(--color-gray-400); font-size: 16px; line-height: 1.3; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { display: inline-flex; align-items: center; gap: 10px; transition: color var(--duration-fast); }
.footer__col a:hover { color: var(--color-white); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  margin-top: var(--space-11); padding: 20px 0; border-top: 1px solid var(--color-line-dark);
}
.footer__meta { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-xs); }
.footer__updated { display: inline-flex; align-items: center; gap: 8px; color: var(--color-gray-400); }
.footer__updated::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-mondrian-yellow); }
.footer__updated time { color: var(--color-white); font-family: var(--font-display); }
.footer__copy { color: var(--color-gray-700); font-style: normal; }

/* ==========================================================================
   Project detail (프로젝트 상세 페이지)
   ========================================================================== */

/* ---------- Back link ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--duration-fast); }
.back-link:hover { color: var(--color-primary); }

/* ---------- Project hero (커버) ---------- */
.project-hero { padding-top: calc(var(--header-height) + var(--space-10)); }
.project-hero__title {
  margin-top: var(--space-5);
  font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display); line-height: var(--leading-tight);
}
.project-hero__summary { margin-top: var(--space-3); font-size: var(--text-lead); font-weight: var(--weight-regular); color: var(--color-text-body); }

/* ---------- Prose (Markdown 본문) ---------- */
.prose { max-width: var(--container-text); font-size: var(--text-body); line-height: 1.85; color: var(--color-text-body); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 {
  margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-border);
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); line-height: 1.3; color: var(--color-text);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-10); font-size: var(--text-h4); font-weight: var(--weight-bold); line-height: 1.5; color: var(--color-text); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-4); }
.prose strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.prose a { color: var(--color-primary); text-decoration: underline; text-underline-position: under; }
.prose ul, .prose ol { padding-left: 0; }
.prose li { position: relative; padding-left: 20px; }
.prose li + li { margin-top: var(--space-2); }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.prose ol { counter-reset: prose; }
.prose ol > li { counter-increment: prose; padding-left: 28px; }
.prose ol > li::before { content: counter(prose, decimal-leading-zero); position: absolute; left: 0; font-family: var(--font-display); font-size: 0.85em; font-weight: var(--weight-semibold); color: var(--color-primary); }
.prose blockquote {
  margin-block: var(--space-10); padding-left: var(--space-6); border-left: 3px solid var(--color-primary);
  font-size: var(--text-h4); font-weight: var(--weight-medium); line-height: 1.6; color: var(--color-text);
}
.prose blockquote p + p { margin-top: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.prose img { width: 100%; border-radius: var(--radius-lg); }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-10); }

/* 본문 이미지 (Markdown 안에서 <figure class="figure"> 로 사용) */
.figure { margin-block: var(--space-10); }
.figure__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
.figure__frame > .art, .figure__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.figure--tall .figure__frame { aspect-ratio: 4 / 5; }
.figure figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.figure-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-block: var(--space-10); }
.figure-row .figure { margin-block: 0; }

/* ---------- Project nav (이전/다음) ---------- */
.project-nav { padding-block: var(--space-11); background: var(--gradient-section); }
.project-nav__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.project-nav__link {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--color-white); border: 1px solid var(--color-border);
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.project-nav__link small { font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--duration-fast); }
.project-nav__link span { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.project-nav__link--next { text-align: right; }
.project-nav__link:hover { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }
.project-nav__link:hover small { color: rgba(255, 255, 255, 0.5); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); }
.breadcrumb a { transition: color var(--duration-fast); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* ---------- Meta row (커버 아래 정보 행) ---------- */
.meta-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--space-8); }
.meta-row > div { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.meta-row dt { font-family: var(--font-display); font-size: var(--text-3xs); font-weight: var(--weight-semibold); color: var(--color-primary); }
.meta-row dd { margin-top: 6px; font-size: var(--text-body); line-height: 1.6; }

/* ---------- Detail layout ---------- */
.split--3-9 > :first-child { grid-column: span 3; }
.split--3-9 > :last-child  { grid-column: 4 / span 9; }
.detail-section + .detail-section { margin-top: var(--space-13); padding-top: var(--space-11); border-top: 1px solid var(--color-border); }
.detail-section__eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary); }
.detail-section__title { margin: var(--space-2) 0 var(--space-8); font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: 1.2; }
/* 상세 본문 안의 소제목은 섹션 제목보다 한 단계 작게 */
.detail-body .prose h2 { margin-top: var(--space-11); padding-top: 0; border-top: 0; font-family: var(--font-body); font-size: var(--text-h3); font-weight: var(--weight-bold); letter-spacing: var(--tracking-body); }
.detail-section__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); }
.detail-section__head .detail-section__title { margin-bottom: var(--space-5); }

/* ---------- Sidenav (상세 페이지 왼쪽: 프로젝트 트리 + 지금 페이지 구역) ---------- */
.sidenav {
  position: sticky; top: calc(var(--header-height) + var(--space-6)); align-self: start;
  max-height: calc(100vh - var(--header-height) - var(--space-10)); overflow-y: auto;
  padding-right: var(--space-3); scrollbar-width: thin;
}
.sidenav__home { display: inline-block; margin-bottom: var(--space-5); font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--duration-fast); }
.sidenav__home:hover { color: var(--color-primary); }
.sidenav__tree { border-top: 1px solid var(--color-border); }
.sidenav__node { border-bottom: 1px solid var(--color-border); padding: 6px 0; }
.sidenav__program {
  display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-radius: var(--radius-xs);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.4;
  transition: background-color var(--duration-fast);
}
.sidenav__program .dot { flex-shrink: 0; margin: 0; width: 8px; height: 8px; min-width: 8px; min-height: 8px; vertical-align: middle; }
.sidenav__program small { margin-left: auto; font-family: var(--font-display); font-size: var(--text-3xs); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.sidenav__program:hover { background: var(--color-bg-subtle); }
.sidenav__program[aria-current="page"] { background: var(--color-black); color: var(--color-white); }
.sidenav__items { margin: 2px 0 4px 12px; border-left: 1px solid var(--color-border); }
.sidenav__item {
  display: flex; flex-direction: column; gap: 2px; margin-left: -1px; padding: 8px 8px 8px 14px;
  border-left: 2px solid transparent; font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-body);
  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast);
}
.sidenav__item em { font-style: normal; font-family: var(--font-display); font-size: var(--text-3xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.sidenav__item:hover { color: var(--color-primary); }
.sidenav__item[aria-current="page"] { border-left-color: var(--color-black); color: var(--color-text); font-weight: var(--weight-semibold); }
.sidenav__item[aria-current="page"] em { color: var(--color-primary); }
/* 지금 페이지의 구역 목록 */
.sidenav__toc { margin: 4px 0 8px 14px; }
.sidenav__item + .sidenav__toc { margin-left: 16px; }
.sidenav__toc a {
  display: flex; gap: 6px; padding: 5px 8px; border-radius: var(--radius-xs);
  font-size: var(--text-3xs); line-height: 1.45; color: var(--color-text-muted);
  transition: color var(--duration-fast), background-color var(--duration-fast);
}
.sidenav__toc > li > a { font-family: var(--font-display); font-size: var(--text-xs); }
.sidenav__toc a::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; margin-top: 0.55em; border-radius: 50%; background: var(--color-border); transition: background-color var(--duration-fast); }
.sidenav__toc ol a { padding-left: 20px; }
.sidenav__toc ol a::before { display: none; }
.sidenav__toc a em { flex-shrink: 0; font-style: normal; font-family: var(--font-display); color: var(--color-primary); }
.sidenav__toc a:hover { color: var(--color-primary); }
.sidenav__toc a[aria-current="true"] { color: var(--color-primary); background: rgba(42, 79, 241, 0.06); }
.sidenav__toc a[aria-current="true"]::before { background: var(--color-primary); }

/* ---------- Decision card (의사결정 케이스, 접고 펼치기) ---------- */
.decision-list { display: flex; flex-direction: column; gap: var(--space-3); }
.decision { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.decision[open] { border-color: var(--color-primary); box-shadow: 0 12px 32px rgba(42, 79, 241, 0.08); }
.decision > summary {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: 28px 30px; cursor: pointer; list-style: none;
}
.decision > summary::-webkit-details-marker { display: none; }
.decision__num { flex-shrink: 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-semibold); color: var(--color-primary); line-height: 1.4; }
.decision__head { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.decision__head strong { font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: 1.45; }
.decision__head span { font-size: var(--text-xs); line-height: 1.7; color: var(--color-text-muted); }
.decision__icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-gray-150); transition: background-color var(--duration-fast), transform var(--duration-base); }
.decision__icon::before, .decision__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.decision__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--duration-base); }
.decision > summary:hover .decision__icon { background: var(--color-black); color: var(--color-white); }
.decision[open] .decision__icon { background: var(--color-primary); color: var(--color-white); }
.decision[open] .decision__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.decision__body { padding: 0 30px 32px calc(30px + var(--space-5) + 2ch); max-width: none; }
.decision__body h3 { margin-top: var(--space-8); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary); }
.decision__body h3:first-child { margin-top: 0; }
.decision__body h3 + * { margin-top: var(--space-2); }

/* ---------- Learning (배운 점) ---------- */
.learning { margin-top: var(--space-10); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-bg-subtle); }
.learning__label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary); }
.learning__text { margin-top: var(--space-3); font-size: var(--text-lead); font-weight: var(--weight-medium); line-height: 1.7; }

/* ---------- Callout (연관 프로그램·프로젝트 링크) ---------- */
.callout {
  display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-10);
  padding: var(--space-6) var(--space-8); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); transition: background-color var(--duration-fast), color var(--duration-fast);
}
.callout small { font-family: var(--font-display); font-size: var(--text-3xs); font-weight: var(--weight-semibold); color: var(--color-primary); }
.callout span { font-size: var(--text-h4); font-weight: var(--weight-semibold); }
.callout span::after { content: " →"; }
.callout em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.callout:hover em, .callout--dark em { color: rgba(255, 255, 255, 0.6); }
.callout:hover { background: var(--color-black); color: var(--color-white); }
.callout--dark { margin-top: 0; background: var(--gradient-deep); color: var(--color-white); border: 0; }
.callout--dark small { color: rgba(255, 255, 255, 0.6); }

/* ---------- Timeline list (프로그램 하위 프로젝트) ---------- */
.timeline-list { border-top: 1px solid var(--color-border); }
.timeline-list a {
  display: grid; grid-template-columns: 90px 110px 1fr 32px; align-items: center; gap: var(--space-5);
  padding: 26px 20px; border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.timeline-list__year { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.timeline-list__label { font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-primary); transition: color var(--duration-fast); }
.timeline-list__main { display: flex; flex-direction: column; gap: 4px; }
.timeline-list__main strong { font-size: var(--text-h4); font-weight: var(--weight-semibold); }
.timeline-list__main span { font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--duration-fast); }
.timeline-list__arrow { font-size: 20px; transition: transform var(--duration-fast); }
.timeline-list a:hover { background: var(--color-black); color: var(--color-white); border-radius: var(--radius-sm); }
.timeline-list a:hover .timeline-list__label, .timeline-list a:hover .timeline-list__main span { color: rgba(255, 255, 255, 0.6); }
.timeline-list a:hover .timeline-list__arrow { transform: translateX(6px); }

/* ==========================================================================
   Main page — Projects / Experience
   ========================================================================== */

/* ---------- Showcase (메인 Projects — 클릭하면 넓어지는 카드) ---------- */
.expand-list > li[tabindex]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.expand-list > li:not(.is-active):hover > .art { filter: brightness(1.15); }
.expand-list > li > .art { transition: filter var(--duration-fast); }
.expand-list--showcase { --n: 3; height: 640px; }
/* 펼친 카드 폭(카드 수 --n 과 화면 폭에 따라 계산)에 내용 폭을 맞춰, 펼쳐지는 동안 글자가 다시 흐르지 않게 함 */
.expand-list--showcase .expand-list__body {
  width: calc((min(100vw - var(--page-gutter) * 2, var(--container)) - (var(--n) - 1) * 10px) * 1044 / (1044 + 183 * (var(--n) - 1)));
  gap: var(--space-6);
}
.expand-list--showcase .expand-list__label { font-size: var(--text-sm); }
@media (max-width: 1440px) {
  .expand-list--showcase { height: 600px; }
}
.showcase-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-4); }
.showcase-stats { display: flex; gap: var(--space-10); }
.showcase-stats dt { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1.1; }
.showcase-stats sup { font-size: 0.45em; color: var(--color-mondrian-yellow); vertical-align: top; margin-left: 2px; }
.showcase-stats dd { margin-top: 4px; font-size: var(--text-3xs); color: rgba(255, 255, 255, 0.65); }
.showcase-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); width: 100%; }

/* ---------- Showcase flow (펼친 카드 안 구성 — 링크 없이 흐름만) ---------- */
.showcase-flow { display: flex; flex-direction: column; gap: 10px; }
.showcase-flow__label { font-family: var(--font-display); font-size: var(--text-3xs); font-weight: var(--weight-semibold); color: var(--color-mondrian-yellow); }
.showcase-flow ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.showcase-flow li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.85); }
.showcase-flow li + li::before { content: "→"; color: rgba(255, 255, 255, 0.4); }
.showcase-flow li span { padding: 6px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }

/* ---------- Status (결과 상태 배지 — 밝은·어두운 바탕 모두) ---------- */
.status { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--text-3xs); font-weight: var(--weight-semibold); line-height: 1; }
.status--done { background: var(--color-mondrian-yellow); color: var(--color-black); }
.status--poc { border: 1px dashed currentColor; }
.status--stopped { background: var(--color-gray-150); color: var(--color-gray-700); }

/* ---------- Steps (과제 발의 과정) ---------- */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--color-border); }
.steps__item { position: relative; display: flex; gap: var(--space-6); }
.steps__item + .steps__item { margin-top: var(--space-8); }
.steps__num {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-white); border: 2px solid var(--color-primary); color: var(--color-primary);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.steps__item:last-child .steps__num { background: var(--color-primary); color: var(--color-white); }
.steps__period { padding-top: 2px; font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); }
.steps__title { margin-top: 2px; font-size: var(--text-h4); font-weight: var(--weight-bold); line-height: 1.5; }
.steps__desc { margin-top: var(--space-2); font-size: var(--text-body); line-height: 1.75; color: var(--color-text-body); }

/* ---------- Role timeline (같은 회사 안의 역할 변화) ---------- */
.role-timeline { position: relative; margin-top: var(--space-8); padding-left: 28px; }
.role-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--color-border); }
.role-timeline__item { position: relative; padding-bottom: var(--space-10); }
.role-timeline__item:last-child { padding-bottom: 0; }
.role-timeline__item::before {
  content: ""; position: absolute; left: -28px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-white); border: 2px solid var(--color-primary);
}
.role-timeline__item:first-child::before { background: var(--color-primary); }
.role-timeline__period { font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); }
.role-timeline__title { margin-top: 4px; font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.4; }
.role-timeline__summary { margin-top: var(--space-2); font-size: var(--text-body); line-height: 1.7; color: var(--color-text-body); }
.role-timeline__list { margin-top: var(--space-3); }
.role-timeline__list li { position: relative; padding-left: 16px; font-size: var(--text-xs); line-height: 1.8; color: var(--color-text-body); }
.role-timeline__list li::before { content: ""; position: absolute; left: 2px; top: 0.8em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }
.role-timeline__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-4); }
.role-timeline__links > span { font-family: var(--font-display); font-size: var(--text-3xs); color: var(--color-text-muted); margin-right: 4px; }
.role-timeline__links .chip:hover { background: var(--color-black); color: var(--color-white); }

.contact-desc b { color: var(--color-white); }