/* Codee — 레이아웃 · 구역 */

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background-color: rgba(11, 12, 14, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
/* 아래 선 대신 짧은 그라데이션으로 흐려진다 */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--s-5);
  background: linear-gradient(rgba(11, 12, 14, 0.5), rgba(11, 12, 14, 0));
  pointer-events: none;
}
/* 첫 화면 위에서는 바탕을 비워 첫 화면 배경(빛 · 점선 원)이 헤더 밑까지 이어지게 — 첫 화면을 지나면 site.js가 .is-solid */
.js .site-header:not(.is-solid) {
  background-color: rgba(11, 12, 14, 0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.js .site-header:not(.is-solid)::after { opacity: 0; }
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  font-size: calc(22 * var(--px));
  font-weight: 600;
  letter-spacing: -0.05em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.site-nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.site-nav__list a:hover,
.site-nav__list a.is-current { color: var(--c-fg); }
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(9 * var(--px));
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
.site-nav__list a.is-current::after { transform: scaleX(1); }
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  min-height: calc(32 * var(--px));
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  letter-spacing: 0.08em;
}
.lang-switch:hover { border-color: var(--c-fg); }
.lang-switch::before {
  /* 터치 영역 44 확보 */
  content: "";
  position: absolute;
  inset: -6px 0;
}
.lang-switch { position: relative; }

.menu-toggle,
.work-viewer__close {
  display: none;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--hit);
  min-width: var(--hit);
  padding: 0 var(--s-2) 0 var(--s-3);
  margin-right: calc(var(--s-2) * -1);
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
  letter-spacing: 0.04em;
  cursor: pointer;
}
.menu-toggle__icon {
  position: relative;
  width: 18px;
  height: 10px;
}
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before,
.work-viewer__close .menu-toggle__icon::before { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after,
.work-viewer__close .menu-toggle__icon::after { bottom: 4.25px; transform: rotate(-45deg); }

/* ---------- 히어로 ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: max(calc(100svh - var(--header-h)), 560px);
  overflow: hidden;

  /* 유리 고리 지름 — motion.js가 실제 값으로 덮어쓴다(대체 화면 · JS 없음은 이 근삿값) */
  --ring-d: min(calc(max(100svh - var(--header-h), 560px) * 0.78), 84vw);
  /* 고리 · Codee를 무대 가운데에서 올리는 거리 — 모바일만(아래 720px), motion.js의 유리 고리도 같은 값 */
  --ring-lift: 0px;
}
@media (max-width: 720px) {
  .hero { --ring-lift: calc(var(--header-h) / 2); } /* 처음 연 화면(헤더 포함) 한가운데 */
}
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* 바탕 점 격자는 html이 같은 자리에 깐다 — 무대는 비워 둔다 */
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 위아래 끝을 흐려 칸 밖 빛 층(.page-aura)과 이어지게 — 고리(무대 높이 78%)에는 닿지 않는 폭 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* 첫 화면 배경판(motion.js drawPlate)의 빛 · 점선 원 · 고리 근처 밝은 점을 칸 밖(헤더 밑 · About 위쪽)까지 이어 그리는 층.
   motion.js가 고리 중심(--aura-x · --aura-y, 문서 기준)과 반지름(--aura-r)을 넣고, 값은 drawPlate와 같다 */
.page-aura {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: calc(var(--aura-y) + var(--aura-r) * 3.3);
  overflow: hidden;
  pointer-events: none;
  background-image: radial-gradient(circle at var(--aura-x) var(--aura-y),
    rgba(237, 238, 240, 0.10) calc(var(--aura-r) * 0.2),
    rgba(237, 238, 240, 0.035) calc(var(--aura-r) * 1.25),
    rgba(237, 238, 240, 0) calc(var(--aura-r) * 2.3));
}
.page-aura[hidden] { display: none; }
/* 고리 근처 밝은 점: 바탕 점(0.14) 위에 겹쳐 0.14 + 0.32 × exp(-2.4d²), d = 거리 / 2.2R 가 되게 */
.page-aura::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(237, 238, 240, 0.372) 1px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: 0 var(--header-h);
  -webkit-mask-image: radial-gradient(circle at var(--aura-x) var(--aura-y),
    #000 0, rgba(0, 0, 0, 0.86) calc(var(--aura-r) * 0.55), rgba(0, 0, 0, 0.55) calc(var(--aura-r) * 1.1),
    rgba(0, 0, 0, 0.26) calc(var(--aura-r) * 1.65), rgba(0, 0, 0, 0.09) calc(var(--aura-r) * 2.2),
    rgba(0, 0, 0, 0.024) calc(var(--aura-r) * 2.75), transparent calc(var(--aura-r) * 3.3));
  mask-image: radial-gradient(circle at var(--aura-x) var(--aura-y),
    #000 0, rgba(0, 0, 0, 0.86) calc(var(--aura-r) * 0.55), rgba(0, 0, 0, 0.55) calc(var(--aura-r) * 1.1),
    rgba(0, 0, 0, 0.26) calc(var(--aura-r) * 1.65), rgba(0, 0, 0, 0.09) calc(var(--aura-r) * 2.2),
    rgba(0, 0, 0, 0.024) calc(var(--aura-r) * 2.75), transparent calc(var(--aura-r) * 3.3));
}
.page-aura__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-aura__ring circle {
  fill: none;
  stroke: rgba(237, 238, 240, 0.26);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}
.hero__grab {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.hero__grab:active { cursor: grabbing; }
.hero__fallback {
  position: absolute;
  inset: 0;
  display: none;
}
html:not(.js) .hero__fallback,
.hero__stage.is-fallback .hero__fallback { display: block; }
.hero__stage.is-fallback .hero__canvas,
.hero__stage.is-fallback .hero__grab { display: none; }
.hero__ring {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--ring-lift));
  width: var(--ring-d);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: calc(var(--ring-d) * 0.075) solid rgba(237, 238, 240, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(237, 238, 240, 0.32),
    0 0 0 1px rgba(237, 238, 240, 0.22),
    0 0 140px rgba(237, 238, 240, 0.07);
}

/* 고리 한가운데의 Codee — 유리가 살아 있으면 같은 글자를 배경판에 그려 유리가 굴절시킨다 */
.hero__title {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--ring-lift));
  z-index: 1;
  font-size: calc(var(--ring-d) * 0.28);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero.is-wordmark-drawn .hero__title { opacity: 0; }

.hero__frame {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    ". ."
    "links lead"
    "links toggle";
  column-gap: var(--s-6);
  row-gap: var(--s-4);
  padding: var(--s-8) var(--s-6) var(--s-6);
  pointer-events: none;
}
.hero__frame > * { pointer-events: auto; }
/* 모서리 꺾쇠: 좌상단 · 우하단 */
.hero__frame::before,
.hero__frame::after {
  content: "";
  position: absolute;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border: 0 solid var(--c-line-strong);
  pointer-events: none;
}
.hero__frame::before { left: 0; top: var(--s-5); border-left-width: 1px; border-top-width: 1px; }
.hero__frame::after { right: 0; bottom: var(--s-4); border-right-width: 1px; border-bottom-width: 1px; }

.hero__lead {
  grid-area: lead;
  justify-self: end;
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.hero__lead .line,
.how-head__lead .line,
.work-card__summary .line { display: block; }
.hero__links {
  grid-area: links;
  align-self: end;
  display: grid;
  justify-items: start;
}
.hero__links .text-link { font-size: calc(14 * var(--px)); }
.motion-toggle {
  grid-area: toggle;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: rgba(11, 12, 14, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { border-color: var(--c-fg); }
.motion-toggle__icon {
  position: relative;
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
}
/* 재생 중: 일시정지 두 막대 / 정지 중: 재생 삼각형 */
.motion-toggle__icon::before,
.motion-toggle__icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: calc(3 * var(--px));
  height: calc(10 * var(--px));
  background: currentColor;
}
.motion-toggle__icon::before { left: calc(1 * var(--px)); }
.motion-toggle__icon::after { right: calc(1 * var(--px)); }
.motion-toggle[data-paused="true"] .motion-toggle__icon::before {
  left: calc(2 * var(--px));
  width: 0;
  height: 0;
  background: none;
  border-style: solid;
  border-width: calc(5 * var(--px)) 0 calc(5 * var(--px)) calc(9 * var(--px));
  border-color: transparent transparent transparent currentColor;
}
.motion-toggle[data-paused="true"] .motion-toggle__icon::after { display: none; }

/* ---------- 공통 구역 ---------- */
.section {
  padding-block: clamp(96px, 10vw, 192px);
  border-bottom: 1px solid var(--c-line);
}
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  align-items: end;
  margin-bottom: clamp(48px, 5vw, 96px);
}
.section-title {
  grid-column: 1 / span 7;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: var(--tracking-head);
}

/* ---------- About ---------- */
.profile {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  row-gap: var(--s-8);
}
.profile__id { grid-column: 1 / span 5; }
.profile__id .section-title { margin-bottom: clamp(32px, 3.4vw, 66px); }
.profile__name,
.profile__name-sub {
  font-size: clamp(26px, 2.2vw, 42px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-head);
}
.profile__name-sub { color: var(--c-muted); }
.profile__role {
  margin-top: var(--s-5);
  font-size: calc(16 * var(--px));
  line-height: 1.5;
}
.profile__body { grid-column: 6 / span 7; }

/* 사진 자리 — 270×400 카드 커버플로(가운데 한 장 + 양옆 기울어진 카드), 글자 없음 */
.gallery {
  --g-w: calc(270 * var(--px));
  --g-h: calc(400 * var(--px));
  --g-shift: calc(128 * var(--px));
  position: relative;
  height: var(--g-h);
  margin-top: clamp(48px, 4.4vw, 85px);
  overflow: hidden;
  perspective: calc(1200 * var(--px));
  touch-action: pan-y;
  user-select: none;
}
.gallery__card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--g-w);
  height: var(--g-h);
  margin-left: calc(var(--g-w) / -2);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 3px;
  background-color: var(--c-surface-2);
  background-image: radial-gradient(circle, rgba(237, 238, 240, 0.12) 1px, transparent 1.6px);
  background-size: 20px 20px;
  background-position: 10px 10px;
  opacity: 0;
  transform: scale(0.72);
  cursor: pointer;
}
.gallery__card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; } /* 끌어 넘기기를 이미지가 가로채지 않게 */
/* 빈 자리: 십자 기준선 */
.gallery__card:empty::before,
.gallery__card:empty::after {
  content: "";
  position: absolute;
  background: var(--c-line);
}
.gallery__card:empty::before { left: 50%; top: 24px; bottom: 24px; width: 1px; }
.gallery__card:empty::after { top: 50%; left: 24px; right: 24px; height: 1px; }
.gallery__card[data-pos="0"] { z-index: 3; opacity: 1; transform: none; cursor: default; }
.gallery__card[data-pos="-1"] { z-index: 2; opacity: 0.6; transform: translateX(calc(var(--g-shift) * -1)) scale(0.86) rotateY(12deg); }
.gallery__card[data-pos="1"] { z-index: 2; opacity: 0.6; transform: translateX(var(--g-shift)) scale(0.86) rotateY(-12deg); }
.gallery__card[data-pos="-2"] { z-index: 1; transform: translateX(calc(var(--g-shift) * -1.7)) scale(0.72) rotateY(16deg); }
.gallery__card[data-pos="2"] { z-index: 1; transform: translateX(calc(var(--g-shift) * 1.7)) scale(0.72) rotateY(-16deg); }
/* JS 없음: 가운데 한 장만 */
html:not(.js) .gallery__card:first-child { opacity: 1; transform: none; }
.profile__desc {
  max-width: 38em;
  font-size: var(--fs-lead);
  line-height: 1.65;
  text-wrap: pretty;
}
.profile__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(48px, 4.4vw, 85px);
  border-top: 1px solid var(--c-line);
}
.profile__cell { padding: var(--s-5) var(--s-5) var(--s-6) 0; }
.profile__cell:nth-child(2) {
  padding-left: var(--s-5);
  border-left: 1px solid var(--c-line);
}
.profile__cell--wide {
  grid-column: 1 / -1;
  padding-right: 0;
  border-top: 1px solid var(--c-line);
}
.profile__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.profile__period {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.profile__main {
  margin-top: var(--s-1);
  font-weight: 500;
}
.profile__sub {
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-4);
}
.skills dt {
  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1.4;
}
.skills__items {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--c-muted);
}

/* ---------- Selected Work ---------- */
.work-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.work-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.work-card__link:hover { border-color: var(--c-line-strong); }
.work-card__link:focus-visible { outline-offset: 6px; }
.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
  background-color: var(--c-surface-2);
  background-image: radial-gradient(circle, rgba(237, 238, 240, 0.12) 1px, transparent 1.6px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}
.thumb picture { display: block; width: 100%; height: 100%; }
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb.is-empty img { display: none; }
/* 이미지가 아직 없을 때: 십자 기준선만(글자 · 가짜 화면 없음) */
.thumb.is-empty::before,
.thumb.is-empty::after {
  content: "";
  position: absolute;
  background: var(--c-line);
}
.thumb.is-empty::before { left: 50%; top: 24px; bottom: 24px; width: 1px; }
.thumb.is-empty::after { top: 50%; left: 24px; right: 24px; height: 1px; }
.work-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(24px, 2.4vw, 46px);
}
.work-card__index {
  font-size: calc(13 * var(--px));
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.work-card__index span {
  margin-right: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--c-fg);
}
.work-card__title {
  margin-top: var(--s-4);
  font-size: clamp(28px, 2.2vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-head);
}
.work-card__summary {
  margin-top: var(--s-3);
  margin-bottom: var(--s-6);
  max-width: 36em;
  color: var(--c-muted);
  text-wrap: pretty;
}
/* Role · Period · Team 세 칸 + 네 번째 칸에 상세 보기 */
.meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--s-4) var(--s-5);
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.meta__list {
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  grid-template-rows: subgrid;
  gap: var(--s-4) var(--s-5);
}
.meta dt {
  font-family: var(--font-mono);
  font-size: calc(11 * var(--px));
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.meta dd {
  min-height: 1.5em; /* 아직 비어 있는 칸도 다른 카드와 같은 줄 높이 */
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-wrap: balance;
}
.work-card__more {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
}
.work-card__arrow { display: inline-block; }
/* 진행 중 카드: 상세 보기가 작업 화면을 여는 버튼 — 다른 카드의 글자 모양 그대로 */
button.work-card__more {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
/* 다른 카드(카드 전체가 링크)처럼 카드 어디를 눌러도 열리게: 버튼의 누르는 자리를 카드 전체로 늘린다 */
.work-card__link--viewer { position: relative; }
.work-card__link--viewer .work-card__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* 초점 표시도 다른 카드처럼 카드 둘레에 */
@supports selector(:has(*)) {
  .work-card__link--viewer .work-card__more:focus-visible { outline: none; }
  .work-card__link--viewer:has(.work-card__more:focus-visible) {
    outline: 2px solid var(--c-focus);
    outline-offset: 6px;
  }
}

/* ---------- 작업 화면(work-viewer) — 화면 전체 딤 + 가운데 모션 + 아래 한 줄 + 우측 상단 닫기 ----------
   링 바깥 지름(--viewer-ring) — 무대는 정사각, 링 ≈ 무대 × 5.8 ÷ distance(site.js 8) */
.work-viewer {
  --viewer-ring: calc(260 * var(--px));
  --viewer-stage: calc(var(--viewer-ring) * 8 / 5.8);
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--dim);
  opacity: 0;
}
.work-viewer[hidden] { display: none; }
.work-viewer.is-open { opacity: 1; }
.work-viewer__close {
  display: inline-flex;
  position: fixed;
  top: max(calc((var(--header-h) - var(--hit)) / 2), env(safe-area-inset-top));
  right: max(var(--gutter), env(safe-area-inset-right));
  margin-right: calc(var(--s-2) * -1);
  color: var(--c-fg);
}
.work-viewer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.work-viewer__stage {
  position: relative;
  width: var(--viewer-stage);
  height: var(--viewer-stage);
  max-width: 100vw;
  max-height: 100vw;
}
/* 링 아래 끝 → 글자 32px: 무대 안 링 아래 빈자리((무대 − 링) / 2)만큼 끌어올린다 · 글자는 카드 번호(01 / 04)와 같은 토큰 */
.work-viewer__status {
  margin-top: calc(var(--s-6) - (var(--viewer-stage) - var(--viewer-ring)) / 2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--c-muted);
}
/* 피치덱 뷰어: 쪽 이미지를 위아래로 이어 원스크롤 · 뒤 페이지는 잠기고 이 화면만 스크롤. 쪽 이미지는 숨겨진 동안 받지 않는다(loading=lazy) */
.work-viewer--deck {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.work-viewer__deck {
  width: min(100% - var(--gutter) * 2, calc(1200 * var(--px)));
  margin-inline: auto;
  padding-block: var(--header-h) var(--s-8);
  display: grid;
  row-gap: var(--s-4);
  list-style: none;
}
.work-viewer__deck:focus-visible { outline-offset: -2px; }
.work-viewer__deck[data-quiet-focus]:focus-visible { outline: none; }
.work-viewer__deck > li { position: relative; }
/* PDF 안의 링크 — 쪽 그림 속 글자 위에 눌리는 자리 */
.work-viewer__hotspot { position: absolute; border-radius: var(--radius); }
.work-viewer__hotspot:hover { background: var(--c-glass-glow); }
.work-viewer__links { display: none; list-style: none; }
.work-viewer__deck img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-surface);
}
/* 쪽이 밑으로 지나가도 닫기가 또렷하게 — 스크롤 내내 우측 상단에 고정 */
.work-viewer--deck .work-viewer__close {
  z-index: 1; /* 쪽(position: relative)이 뒤에 오므로 그 위에 */
  right: max(var(--gutter), env(safe-area-inset-right));
  margin-right: 0;
  padding: 0 var(--s-3) 0 var(--s-4);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--dim);
}
html.is-viewer-open { overflow: hidden; }
html.is-viewer-open body,
html.is-viewer-open .site-header { padding-right: var(--viewer-gap, 0px); }

/* ---------- Selected Work 스와이프 스택(Originkit Swipe Stack 값) ----------
   JS가 없으면 위 2열 그리드 그대로. JS가 있으면 카드를 겹쳐 부채꼴로 펼치고, 맨 위 카드를 끌거나 버튼으로 넘긴다. */
.work-stage {
  --card-w: 520;
  --card-h: 680;
  --stack-x: 200;   /* 맨 뒤 카드의 가로 이동(xOffset) */
  --stack-tilt: -45;  /* 맨 뒤 카드의 기울기(tiltAngle, deg) */
  position: relative;
}
.js .work-stage { padding-top: calc(72 * var(--px)); }
.js #work { overflow-x: clip; } /* 부채꼴 뒤 카드는 화면 끝까지 보이고, 가로 스크롤은 생기지 않게 */
.js .work-list[data-stack] {
  display: block;
  position: relative;
  width: calc(var(--card-w) * var(--px));
  max-width: 100%;
  height: min(calc(var(--card-h) * var(--px)), max(calc(var(--card-h) * 1px), calc(100svh - var(--s-6)))); /* 창이 낮아도 카드가 화면 높이를 넘지 않게 — 1440 이하는 그대로 */
  margin-inline: auto;
  translate: calc(var(--stack-x) * var(--px) / -2) 0;
  perspective: calc(1000 * var(--px));
  touch-action: pan-y;
}
.js .work-list[data-stack] > .work-card {
  position: absolute;
  inset: 0;
  border-radius: calc(12 * var(--px));
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.32),
    0 26px 60px -14px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 50%;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.js .work-list[data-stack] > .work-card.is-top { cursor: grab; }
.js .work-list[data-stack] > .work-card.is-dragging { cursor: grabbing; }
.js .work-list[data-stack] > .work-card:not(.is-top) { cursor: pointer; }
.js .work-list[data-stack] .work-card__link {
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.js .work-list[data-stack] .work-card__link img { -webkit-user-drag: none; }
.stack-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.stack-nav[hidden] { display: none; }
.stack-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: calc(14 * var(--px));
  cursor: pointer;
}
.stack-nav__btn:hover { border-color: var(--c-fg); }
.stack-nav__count {
  min-width: 4.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--c-muted);
}
.stack-nav__count span { color: var(--c-fg); }

/* ---------- How I Work — 머리(제목 · 하는 일 01–04 · 문장) ---------- */
.how-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--s-5);
  row-gap: var(--s-6);
  margin-bottom: clamp(64px, 6vw, 116px);
}
/* 왼쪽: 제목 → 문장 두 줄 → 부가 설명 / 오른쪽: 하는 일 01–04 */
.how-head__title { grid-column: 1 / span 6; grid-row: 1; }
.how-head__text { grid-column: 1 / span 6; grid-row: 2; }
.how-head__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.how-head__body {
  margin-top: var(--s-5);
  max-width: 44em;
  color: var(--c-muted);
  text-wrap: pretty;
}
.do-list {
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: var(--s-2);
}
.do-item {
  position: relative;
  display: grid;
  grid-template-columns: calc(28 * var(--px)) minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-bottom: var(--s-6);
}
.do-item:last-child { padding-bottom: 0; }
/* 번호 사이를 잇는 세로선 */
.do-item::before {
  content: "";
  position: absolute;
  left: calc(14 * var(--px));
  top: calc(30 * var(--px));
  bottom: calc(6 * var(--px));
  width: 1px;
  background: var(--c-line-strong);
}
.do-item:last-child::before { display: none; }
.do-item__index {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: calc(25 * var(--px));
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--c-fg);
}
.do-item__title {
  grid-column: 2;
  font-size: calc(19 * var(--px));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.do-item__text {
  grid-column: 2;
  margin-top: var(--s-1);
  max-width: 30em;
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-wrap: pretty;
}

.flow-panels { border-top: 1px solid var(--c-line); }
.flow-panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  align-items: baseline;
  padding-block: var(--s-6) var(--s-2);
}
.flow-panel[hidden] { display: none; }
.flow-panel__num {
  grid-column: 1 / span 2;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--c-muted);
}
/* 윗줄: 번호 · 제목 / 아랫줄: 픽토그램(제목 글자 왼쪽 끝) | 본문(윗선 = 그림 윗선) */
.flow-panel__title {
  grid-column: 3 / span 4;
  grid-row: 1;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.step-icon {
  grid-column: 3 / span 4;
  grid-row: 2;
  align-self: start;
  display: block;
  width: calc(var(--vb-w) * 2.5 * var(--px)); /* 좌표 높이 96의 2.5배 = 240 — 칸이 더 좁으면 칸 폭에 맞춰 줄어듦 */
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--vb-w) / 96;
  margin-top: var(--s-6);
  overflow: visible;
  fill: none;
  stroke: var(--c-fg);
  stroke-width: 1.5;
}
.step-icon > * { vector-effect: non-scaling-stroke; } /* 그림이 커져도 선은 1.5px 그대로, 점만 함께 커짐(같게) */
.step-icon .dot { fill: var(--c-fg); stroke: none; }
/* 아랫줄 오른쪽: 한 줄 요약 → 설명 3~4줄 */
.flow-panel__body { grid-column: 7 / span 6; grid-row: 2; align-self: start; margin-top: var(--s-6); }
.flow-panel__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  text-wrap: pretty;
}
.flow-panel__desc {
  margin-top: var(--s-4);
  max-width: 40em;
  color: var(--c-muted);
  text-wrap: pretty;
}

/* ---------- Contact ---------- */
.section--contact { border-bottom: 0; }
/* 메일 주소 폭만큼의 묶음 — LinkedIn은 그 아래 오른쪽 끝에 맞춘다 */
.contact__block {
  display: inline-grid;
  justify-items: end;
  row-gap: var(--s-3);
  max-width: 100%;
}
.contact__block .contact__email { justify-self: stretch; }
.contact__email {
  font-size: clamp(25px, 7vw, 134px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.contact__email a {
  display: inline-block;
  padding-block: calc(10 * var(--px));
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
}
.contact__email a:hover { background-size: 100% 2px; }
.contact__link { font-size: calc(15 * var(--px)); }

/* ---------- 푸터 ---------- */
.site-footer { border-top: 1px solid var(--c-line); }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5) var(--s-6);
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  color: var(--c-muted);
}

/* ================= 반응형 ================= */
@media (max-width: 1100px) {
  .flow-panel__title,
  .step-icon { grid-column: 3 / span 4; }
  .flow-panel__body { grid-column: 7 / span 6; }
}

@media (max-width: 900px) {
  .work-list { grid-template-columns: minmax(0, 1fr); }
  .section-title { grid-column: 1 / -1; }
  .profile__id,
  .profile__body { grid-column: 1 / -1; }
  .gallery { max-width: 560px; margin-inline: auto; }
  .profile { row-gap: var(--s-7); }
  .how-head { row-gap: var(--s-6); }
  .how-head { grid-template-rows: none; }
  .how-head__title,
  .how-head__text,
  .do-list { grid-column: 1 / -1; grid-row: auto; }
  .do-list { margin-top: var(--s-4); padding-top: 0; }
  .flow-panel__num,
  .flow-panel__title,
  .step-icon,
  .flow-panel__body { grid-column: 1 / -1; grid-row: auto; }
  .flow-panel__title { margin-top: var(--s-2); }
  /* 세로 한 줄: 그림 높이 180(데스크톱의 0.75) · 가운데 정렬 · 제목 ↔ 그림 ↔ 본문 24px씩 */
  .step-icon { width: calc(var(--vb-w) * 1.875px); margin: var(--s-5) auto var(--s-2); }
  .flow-panel__body { margin-top: var(--s-4); }
  .work-card__summary .line { display: inline; }
  .work-card__summary { text-wrap: balance; } /* 한 줄 설명은 데스크톱만 두 줄 고정, 좁은 화면은 흘리되 외톨이 단어 없이 */
}

@media (max-width: 900px) {
  .work-stage { --card-w: 460; --card-h: 640; --stack-x: 120; --stack-tilt: -30; }
  .work-viewer { --viewer-ring: 220px; }
  /* 쪽이 작아 그림 속 글자는 누르기 어렵다 — 쪽 아래 글자 링크로 */
}
@media (max-width: 560px) {
  .work-viewer { --viewer-ring: 180px; }
  .gallery { --g-shift: 96px; }
  .work-stage { --card-w: 300; --card-h: 600; --stack-x: 44; --stack-tilt: -16; }
  .js .work-stage { padding-top: 48px; }
  .js .work-list[data-stack] .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .js .work-list[data-stack] .meta__list { grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: subgrid; grid-template-rows: auto auto; grid-template-rows: subgrid; }
  .js .work-list[data-stack] .work-card__more { grid-column: 2; grid-row: 2; padding-top: 0; }
}

/* 쪽 위 눌리는 자리는 900px 이하와 터치 기기에서 44px 글자 링크로 대신한다 */
@media (max-width: 900px), (pointer: coarse) {
  .work-viewer__hotspot { display: none; }
  .work-viewer__links { display: grid; justify-items: start; padding-top: var(--s-3); }
}

@media (max-width: 720px) {
  .menu-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: var(--s-2) var(--gutter) var(--s-5);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
  }
  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .js .site-nav__list { display: grid; gap: 0; }
  .js .site-nav__list a {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    color: var(--c-fg);
    border-bottom: 1px solid var(--c-line);
  }
  .js .site-nav__list a::after { display: none; }
  .js .lang-switch { justify-self: start; margin-top: var(--s-4); min-height: var(--hit); }
  html:not(.js) .site-header { height: auto; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--s-2); }
  html:not(.js) .site-nav,
  html:not(.js) .site-nav__list { flex-wrap: wrap; gap: 0 var(--s-5); }

  /* 피치덱 뷰어(모바일): 쪽을 화면 폭 가득 · 닫기는 아이콘만(이름은 화면낭독기용으로 남김) */
  .work-viewer__deck { width: 100%; row-gap: var(--s-2); }
  .work-viewer__links { padding-inline: var(--gutter); }
  .work-viewer--deck .work-viewer__close {
    justify-content: center;
    gap: 0;
    width: var(--hit);
    height: var(--hit);
    padding: 0;
  }
  .work-viewer--deck .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 첫 화면 한 줄 소개는 모바일에서 뺀다 */
  .hero__lead { display: none; }
  .hero__frame {
    grid-template-rows: 1fr auto;
    grid-template-areas:
      ". ."
      "links toggle";
    row-gap: var(--s-5);
    padding: var(--s-7) var(--s-4) var(--s-5);
  }
  .hero__frame::after { bottom: var(--s-2); }
  .motion-toggle { align-self: end; }

  .meta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .meta__list {
    grid-row: 1 / span 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-columns: subgrid;
    grid-template-rows: auto auto auto;
    grid-template-rows: subgrid;
  }
  .work-card__more { grid-column: 1; grid-row: 4; padding-top: var(--s-2); }

  .profile__grid { grid-template-columns: minmax(0, 1fr); }
  .profile__cell,
  .profile__cell:nth-child(2) { padding: var(--s-5) 0; border-left: 0; }
  .profile__cell:nth-child(2) { border-top: 1px solid var(--c-line); }
  .skills { grid-template-columns: minmax(0, 1fr); }
  .site-footer__inner { flex-wrap: wrap; }
  /* 좁은 화면: 정해 둔 줄 나눔 대신 고르게 감싼다(외톨이 단어 방지) */
  .how-head__lead .line { display: inline; }
  .how-head__lead { text-wrap: balance; }
}

/* ---------- 공통 보조 ---------- */
.nowrap { white-space: nowrap; }

/* 범례 → 단계 탭 번호까지 30px: 14 + 탭 위 여백 16 */
.linemap-area { margin-bottom: calc(14 * var(--px)); }
.linemap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "tm tr td"
    "dm dr dd"
    "map map map";
  column-gap: var(--s-5);
}
.linemap__line { display: contents; }
.line-m > .linemap__title { grid-area: tm; }
.line-r > .linemap__title { grid-area: tr; }
.line-d > .linemap__title { grid-area: td; }
.line-m > .linemap__desc { grid-area: dm; }
.line-r > .linemap__desc { grid-area: dr; }
.line-d > .linemap__desc { grid-area: dd; }
.linemap__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-size: calc(19 * var(--px));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.linemap__desc {
  margin-top: var(--s-2);
  padding-bottom: var(--s-7);
  max-width: 30em;
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-wrap: pretty;
}
.line-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  border: 1px solid var(--c-fg);
  border-radius: 999px;
  background: var(--c-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--c-fg);
}
.line-m .line-badge { background: var(--c-fg); color: var(--c-bg); }
.line-d .line-badge { border: 3px double var(--c-fg); }
.linemap__svg {
  grid-area: map;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 580;
  overflow: visible;
}
.linemap__tag {
  grid-area: map;
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
}
.linemap__stations {
  grid-area: map;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.linemap__stations > li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  width: max-content;
  max-width: calc(180 * var(--px));
  text-align: center;
  transform: translate(-50%, calc(20 * var(--px)));
}
.linemap__stations > li.is-above { transform: translate(-50%, calc(-100% - calc(20 * var(--px)))); }
.linemap__stations > li.interchange.is-below { transform: translate(-50%, calc(26 * var(--px))); }
.linemap__stations > li.interchange.is-above { transform: translate(-50%, calc(-100% - calc(26 * var(--px)))); }
.linemap__stations > li.interchange:not(.station) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.station__code {
  display: inline-block;
  padding: calc(1 * var(--px)) var(--s-2);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--c-fg);
  white-space: nowrap;
}
.station__name {
  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-fg);
}
.linemap__path {
  fill: none;
  stroke: var(--c-fg);
  stroke-linejoin: round;
}
.linemap__path.line-m { stroke-width: 7; }
.linemap__path.line-r { stroke-width: 3.5; }
.linemap__path.line-d { stroke-width: 8; }
.linemap__path.line-d-inner { stroke: var(--c-bg); stroke-width: 3.5; }
.segment-hidden {
  fill: none;
  stroke: var(--c-fg);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 11;
}
.mark { fill: var(--c-bg); stroke: var(--c-fg); stroke-width: 2.5; }
.mark.interchange { stroke-width: 3; }
.mark.is-decision { fill: var(--c-fg); stroke-width: 1; }
.linemap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.linemap__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.legend-icon { width: calc(32 * var(--px)); height: calc(20 * var(--px)); overflow: visible; }
.legend-icon .mark.interchange { stroke-width: 2.5; }
.legend-line { fill: none; stroke: var(--c-fg); stroke-width: 3; }
.legend-line.segment-hidden { stroke-width: 3.5; stroke-dasharray: 0.1 7; }

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--c-line);
}
.steps__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  min-height: calc(64 * var(--px));
  margin-bottom: -1px;
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--c-muted);
  text-align: left;
  cursor: pointer;
}
.steps__tab:hover { color: var(--c-fg); }
.steps__tab[aria-selected="true"] { color: var(--c-fg); border-bottom-color: var(--c-fg); }
.steps__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
}
.steps__name { font-size: calc(16 * var(--px)); font-weight: 500; line-height: 1.35; }
.steps + .flow-panels { border-top: 0; }

@media (max-width: 1180px) {
  .linemap { display: block; }
  .linemap__svg,
  .linemap__tag { display: none; }
  .linemap__line {
    display: block;
    padding-block: var(--s-6);
    border-top: 1px solid var(--c-line);
  }
  .linemap__title { padding-top: 0; border-top: 0; }
  .linemap__desc { padding-bottom: 0; }
  .linemap__stations {
    position: relative;
    inset: auto;
    margin-top: var(--s-5);
  }
  .linemap__stations::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 22px;
    bottom: 22px;
    width: var(--rail, 3px);
    background: var(--c-fg);
    transform: translateX(-50%);
  }
  .line-m .linemap__stations { --rail: 6px; }
  .line-d .linemap__stations::before {
    width: 8px;
    background: transparent;
    border-left: 2px solid var(--c-fg);
    border-right: 2px solid var(--c-fg);
  }
  .line-r .linemap__stations,
  .line-d .linemap__stations { margin-bottom: 44px; }
  .line-r .linemap__stations::after,
  .line-d .linemap__stations::after {
    content: "";
    position: absolute;
    left: 13px;
    bottom: -40px;
    width: 5px;
    height: 34px;
    transform: translateX(-50%);
    background-image: radial-gradient(circle, var(--c-fg) 2px, transparent 2.4px);
    background-size: 5px 11px;
    background-repeat: repeat-y;
  }
  .linemap__stations > li,
  .linemap__stations > li.is-above,
  .linemap__stations > li.interchange.is-below,
  .linemap__stations > li.interchange.is-above,
  .linemap__stations > li.interchange:not(.station) {
    position: relative !important;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    max-width: none;
    min-height: 44px;
    overflow: visible;
    clip: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
    padding-left: 44px;
    text-align: left;
    transform: none;
    white-space: normal;
  }
  .linemap__stations > li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2.5px solid var(--c-fg);
    border-radius: 50%;
    background: var(--c-bg);
    transform: translate(-50%, -50%);
  }
  .linemap__stations > li.interchange::before { width: 24px; height: 24px; border-width: 3px; }
  .linemap__stations > li.is-decision::before {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 0;
    background: var(--c-fg);
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

@media (max-width: 720px) {
  .steps { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .steps__tab {
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
    min-height: 52px;
    margin: 0;
    padding: 0 0 0 var(--s-3);
    border-bottom: 1px solid var(--c-line);
    border-left: 2px solid transparent;
  }
  .steps__tab[aria-selected="true"] { border-bottom-color: var(--c-line); border-left-color: var(--c-fg); }
  .steps__num { min-width: 2.4em; }
  .linemap-area { margin-bottom: 30px; } /* 탭 위 여백이 없는 세로 목록: 범례 → 첫 탭 30px */
}