/* 소속 칩. 색은 content.js의 chipTone()이 정한다. */
.chip {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: var(--radius-pill);
  font-size: var(--step-00);
  white-space: nowrap;
}

.chip--warm    { background: var(--chip-warm-bg);    color: var(--chip-warm-ink); }
.chip--green   { background: var(--chip-green-bg);   color: var(--chip-green-ink); }
.chip--neutral { background: var(--chip-neutral-bg); color: var(--chip-neutral-ink); }

/* 회사를 구분하지 않는 자리(4-1 스폰서)에서 쓰는 한 가지 색.
   색이 갈리면 넷 중 누군가는 없는 색을 받은 것처럼 보인다. */
.chip--plain { background: rgba(238, 240, 255, 0.1); color: var(--ink-soft); }

/* 공통 카드 */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.card-grid--tall { align-items: stretch; }

.card {
  padding: calc(var(--gap) * 0.7);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  align-items: flex-start;
}

/* 라벨이 카드의 첫 줄이다 — 사진보다 위. 어느 과제인지가 먼저 잡혀야
   세 칸을 왼쪽부터 훑을 때 번호가 길잡이가 된다.
   원본 장표처럼 상자 맨 위를 가로지르는 머리띠로 두르고 가운데 정렬한다 —
   왼쪽에 붙은 한 줄일 때는 사진에 밀려 눈에 걸리지 않았다. */
.card__label {
  align-self: stretch;
  text-align: center;
  padding: 0.25em 0.5em;
  border-radius: 12px;
  background: rgba(132, 137, 245, 0.2);
  font-size: var(--step-0);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.card__title { font-size: var(--step-2); font-weight: 700; line-height: 1.3; }
.card__title--sm { font-size: var(--step-2); }

.card__effects {
  margin: auto 0 0;
  padding-left: 1em;
  font-size: var(--step-00);
  color: var(--ink-soft);
  line-height: var(--leading-tight);
}

/* 4-2 환영사 — 한 사람만 서는 장. 사진과 소속뿐이다.
   이름과 직함은 슬라이드 제목이 말하고, 인사말은 센터장이 직접 하신다.
   흑백은 원정대(4-3)와 같은 이유로 CSS에서 건다 — 원본 파일은 사각형
   컬러 그대로 두어야 배경을 바꿔도 얼룩이 남지 않는다. */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gap) * 1.4);
  width: 100%;
}

.welcome__photo {
  width: clamp(8rem, min(20vw, 36vh), 22rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(1) contrast(1.04);
  background: var(--panel);
  border: 1px solid rgba(238, 240, 255, 0.28);
}

/* 사진 파일이 아직 없을 때. 깨진 이미지 아이콘 대신 아무것도 두지 않는다. */
.welcome--nophoto .welcome__photo { display: none; }

/* 4-1 스폰서 — 과제로 나누지 않고 같은 레벨의 네임카드로 나란히.
   제목에서 한 칸 더 내려 붙인다. 넷이 제목 바로 밑에 붙어 있으면
   제목의 일부처럼 읽혔다. */
.namecards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  /* 칸 사이를 넉넉히. 명패 넷이 붙어 있으면 한 덩어리로 읽힌다. */
  gap: calc(var(--gap) * 2);
  width: 100%;
  margin-top: calc(var(--gap) * 2.5);
}

.namecard {
  /* 정사각형 명패. 폭 상한을 두지 않아 한 변이 화면 폭의 1/4까지 커진다 —
     1280×720에서 282px로, 예전(130px)의 두 배가 조금 넘는다.
     이름과 소속 둘뿐이라 세로가 남는데, 그 여백이 명패다움을 만든다. */
  aspect-ratio: 1;
  padding: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  text-align: center;
}

/* 명패가 커진 만큼 이름도 키운다 — 카드만 크고 글자가 그대로면 빈 판이다. */
.namecard__name { font-family: var(--font-title); font-size: var(--step-3); font-weight: 700; }

/* 4-1 환영사와 스폰서 */
.people { display: flex; flex-direction: column; gap: calc(var(--gap) * 1.5); width: 100%; }
.people__kicker { font-size: var(--step-0); color: var(--ink-faint); letter-spacing: 0.1em; margin-bottom: 0.5em; }
.people__welcome { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.people__welcome .people__kicker { margin: 0; }
.people__name { font-size: var(--step-3); font-weight: 700; }

/* 4-2 원정대 — 별칭을 크게, 이름을 작게 */
/* 4-2 원정대 — 사진 한 줄과 그 아래 이름표.
   한 줄에 전부 세우는 것이 핵심이다. 여러 줄로 접히면 "한 팀"으로 안 보인다.
   인원이 늘면 auto-fit이 칸을 좁히고, 그래도 모자라면 사진이 작아진다. */
.expedition {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: calc(var(--gap) * 1.4);
  width: 100%;
  align-items: start;
  justify-content: center;
}

.exp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gap) * 1.1);
  min-width: 0;
}

/* **원본 사진은 모서리가 각져 있고, 둥근 모서리는 여기서 만든다.**
   사진 파일에 둥근 모서리를 구워 넣으면 잘려나간 자리가 특정 배경색으로
   채워져, 배경이 다른 자리에 쓰거나 색을 바꾸면 네 귀퉁이에 얼룩이 남는다.
   모양은 CSS가 맡고 파일은 사각형 그대로 두는 편이 항상 안전하다.

   흑백도 같은 이유로 CSS에서 건다. 컬러로 가고 싶어지면 filter 한 줄만
   지우면 되고, 원본을 다시 받을 일이 없다. */
.exp-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--radius) * 0.9);
  filter: grayscale(1) contrast(1.04);
  background: var(--panel);
}

.exp-card__plate {
  width: 100%;
  padding: 0.4em 0.5em;
  border: 1px solid rgba(238, 240, 255, 0.5);
  border-radius: calc(var(--radius) * 0.75);
  background: rgba(8, 6, 42, 0.72);
  text-align: center;
  line-height: 1.25;
}

.exp-card__name { font-family: var(--font-title); font-size: var(--step-1); font-weight: 700; color: var(--ink); }
.exp-card__nickname { font-size: var(--step-00); color: var(--gold); margin-top: 0.15em; }

/* 4-4 조직도. 원본 도식대로 다섯 칸 격자에 놓는다 — 좌우 지원 조직이
   실행팀과 같은 줄에 서고, 화살표가 그 사이 칸을 차지한다. 가로 화살표가
   별도 줄을 쓰지 않으므로 세로 예산이 늘지 않는다.
   상자를 세로로만 쌓고 '▼' 글자를 끼우던 예전 방식은 누가 누구에게
   무엇을 주는지를 못 보여줬다. */
.org { display: flex; flex-direction: column; gap: calc(var(--gap) * 0.4); width: 100%; }

.org-grid {
  display: grid;
  grid-template-columns: 1fr auto 2.2fr auto 1fr;
  grid-template-areas:
    '.       .        sponsor   .         .'
    '.       .        flowtop   .         .'
    'advisor flowleft core      flowright infra'
    '.       .        flowbot   .         .'
    '.       .        user      .         .';
  align-items: center;
  justify-items: stretch;
  column-gap: calc(var(--gap) * 0.5);
  row-gap: calc(var(--gap) * 0.25);
}

.org-tier {
  padding: calc(var(--gap) * 0.28);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}

/* 상자 제목. 뒷줄에서 먼저 잡혀야 하는 글자라 한 단계 키우고 800으로
   세운다 — 나눔스퀘어는 800(ExtraBold)에 실제 자족이 있다. */
.org-tier__label { font-size: var(--step-1); font-weight: 800; }
.org-tier__body { font-size: var(--step-00); color: var(--ink-soft); margin: 0.1em 0 0; line-height: var(--leading-tight); white-space: pre-line; }

.org-tier--sponsor { border-color: rgba(242, 193, 78, 0.4); background: rgba(242, 193, 78, 0.08); }
.org-tier--sponsor .org-tier__label { color: var(--gold); }
.org-tier--user    { border-color: rgba(63, 199, 173, 0.4); background: rgba(63, 199, 173, 0.08); }
.org-tier--user .org-tier__label { color: var(--chip-green-ink); }
.org-tier--side .org-tier__label { color: var(--glow-orchid); }

/* 흐름 화살표. 선과 머리는 SVG로 그린다 — '▼' 글자는 크기를 키우면
   금세 뭉개지고 방향이 하나뿐이라 주고받는 관계를 못 그린다. */
.org-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  color: var(--glow-violet);
}

/* 세로 화살표는 글자를 옆에, 가로 화살표는 글자를 위에 둔다. */
.org-flow--flowtop,
.org-flow--flowbot { flex-direction: row; }
.org-flow--flowleft,
.org-flow--flowright { flex-direction: column; gap: 0.2em; }

.org-flow__artwrap { display: flex; align-items: center; flex: 0 0 auto; }

.org-flow__label {
  font-size: var(--step-00);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.25;
}

.org-flow__art {
  flex: 0 0 auto;
  width: calc(var(--step-1) * 2.4);
  height: auto;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 위아래 화살표의 키가 곧 임원-실행팀-실사용자 사이의 간격이다.
   좌우 화살표(flowleft/flowright)는 실행팀과 같은 줄에 있어 세로를
   쓰지 않으므로 이 값과 무관하다. */
.org-flow__art--v { width: auto; height: calc(var(--step-1) * 1.55); }

.org-tier--side { display: flex; flex-direction: column; justify-content: center; }

/* 실행팀이 도식의 중심이다. 제목을 한 단계 더 키워 다른 상자와 구분한다. */
.org-core {
  padding: calc(var(--gap) * 0.35);
  border: 1px solid rgba(132, 137, 245, 0.5);
  border-radius: var(--radius);
  background: rgba(132, 137, 245, 0.12);
  box-shadow: 0 0 34px rgba(132, 137, 245, 0.2);
  text-align: center;
}

.org-core .org-tier__label { font-size: var(--step-2); color: var(--glow-violet); }

/* 실행팀 상자 안쪽 — 마스터 크루 묶음 + 그 밖의 외부 기술 코치.
   셋을 나란히 늘어놓으면 코치가 크루의 일원처럼 읽힌다. 원본 도식이
   크루 둘만 회색 판으로 묶어 둔 이유가 그것이다. */
.org-core__body {
  display: flex;
  align-items: stretch;
  gap: calc(var(--gap) * 0.35);
  margin-top: 0.12em;
}

.org-crew {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(var(--gap) * 0.18);
  border: 1px dashed rgba(238, 240, 255, 0.3);
  border-radius: 14px;
  background: rgba(238, 240, 255, 0.06);
}

.org-crew__label { font-size: var(--step-00); font-weight: 800; color: var(--ink); margin-bottom: 0.08em; line-height: 1.15; }

.org-crew__roles { display: flex; align-items: stretch; gap: calc(var(--gap) * 0.3); }
.org-crew__roles .org-role { flex: 1 1 0; min-width: 0; }

/* 코치는 묶음 밖에 선다. 크루 한 칸과 비슷한 폭을 준다. */
.org-core__body > .org-role { flex: 0 1 26%; min-width: 0; }

/* 역할 칸 — 원본처럼 이름 띠와 설명이 위아래로 나뉜다. */
.org-role {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(8, 6, 42, 0.4);
  display: flex;
  flex-direction: column;
}

.org-role__name {
  padding: 0.14em 0.4em;
  background: rgba(132, 137, 245, 0.28);
  color: var(--gold);
  font-size: var(--step-00);
  font-weight: 800;
  line-height: var(--leading-tight);
}

/* 칸끼리 높이가 다르다 — 외부 기술 코치 칸은 마스터 크루 묶음만큼
   늘어나서 설명 아래가 통째로 빈다. 남는 자리를 위아래로 나눠 글자를
   칸 한가운데 세운다. 가로 가운데 정렬은 .org-core에서 물려받는다. */
.org-role__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.16em 0.4em;
  font-size: var(--step-00);
  color: var(--ink-soft);
  margin: 0;
  line-height: var(--leading-tight);
}

/* 역할끼리 주고받는 짧은 양방향 화살표. */
.org-swap { display: flex; align-items: center; flex: 0 0 auto; color: var(--glow-violet); }
.org-swap__art {
  width: calc(var(--step-1) * 1.15);
  height: auto;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 맨 아래 세 원칙. 단 사이를 벌린 만큼을 여기서 돌려받는다 — 제목을
   한 단계 낮춰도 위의 조직도가 본론이라 읽는 데 지장이 없다. */
.org-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 0; }
.org-principle__title { font-size: var(--step-00); font-weight: 700; color: var(--glow-violet); line-height: 1.25; }
.org-principle__body { font-size: var(--step-00); color: var(--ink-soft); margin: 0.1em 0 0; line-height: var(--leading-tight); }

/* 5-2~5-4 과제 상세 */
/* 제목을 위에 붙이는 규칙(.slide:not(.slide--center))이 이 컨테이너
   안까지 닿지 않는다. 여기서도 같은 원칙을 따로 적어 준다. */
.task { display: flex; flex-direction: column; gap: calc(var(--gap) * 1.4); width: 100%; height: 100%; justify-content: flex-start; }
.task > :last-child { margin-bottom: auto; }
.task__head + * { margin-top: calc(var(--gap) * 1.8); }
.task__head { display: flex; flex-direction: column; gap: 0.3em; }
/* **이 세 블록이 슬라이드의 본론이다.**
   예전에는 왼쪽에 얇은 띠만 두른 글 뭉치라, 아래 크루 명단(칸 아홉 개에
   색 띠까지 붙은 덩어리)이 시선을 먼저 가져갔다. 정작 청중이 알아야 할
   것은 "왜 하는가 · 무엇을 만드는가 · 무엇이 남는가"인데도.
   그래서 셋을 패널로 세우고 번호를 붙여 하나의 흐름으로 만든다. */
/* 세 줄을 위에서 아래로 쌓는다. 3열로 나눴을 때는 아웃풋처럼 긴 문장이
   폭 1/3짜리 칸에서 대여섯 줄로 접혀 읽는 눈이 계속 끊겼다.
   가로로 길게 펴면 같은 글이 두세 줄로 끝난다. */
.task__blocks { display: flex; flex-direction: column; gap: calc(var(--gap) * 1.5); }

/* 왼쪽 라벨 칸 + 오른쪽 본문. 원본 장표의 구성 그대로다. */
.task-block {
  display: grid;
  grid-template-columns: 11ch 1fr;
  align-items: stretch;
  gap: calc(var(--gap) * 0.8);
}

.task-block__label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5em 0.4em;
  border-radius: 12px;
  background: rgba(132, 137, 245, 0.22);
  font-size: var(--step-0);
  font-weight: 800;
  color: var(--ink);
  line-height: var(--leading-tight);
}

.task-block__body {
  margin: 0;
  padding: 0.7em calc(var(--gap) * 1.1);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: var(--step-0);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

/* 아웃풋 문장에서 "무엇을 만드는가"에 해당하는 조각만 세운다.
   나눔스퀘어는 800(ExtraBold)에 실제 자족이 있어 가짜 굵기가 아니다. */
.task-block__mark { font-weight: 800; color: var(--kw); }

/* 아웃풋이 세 줄 중 본론이다. 테두리를 살려 눈이 먼저 가게 한다. */
.task-block:last-child .task-block__label { background: rgba(242, 193, 78, 0.22); color: var(--gold); }
.task-block:last-child .task-block__body { border-color: rgba(242, 193, 78, 0.35); background: rgba(242, 193, 78, 0.06); color: var(--ink); }

/* 크루 명단 — 9명이 한 줄에 들어가도록 가장 작은 스텝을 쓴다.
   **본론은 위의 세 블록이다.** 명단은 자기 이름을 확인하는 곳이지
   읽는 곳이 아니라, 위 블록보다 한 단계 낮게 둔다. */
.crew { opacity: 0.9; }

.crew__kicker {
  display: flex;
  margin-bottom: 0.5em;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  font-size: var(--step-00);
}

.crew__kicker-label { color: var(--ink-faint); letter-spacing: 0.06em; margin-right: 0.2em; }

.crew__legend {
  padding: 0.12em 0.75em;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.crew__legend--domain     { color: var(--role-domain);     border-color: var(--role-domain);     background: var(--role-domain-bg); }
.crew__legend--dev        { color: var(--role-dev);        border-color: var(--role-dev);        background: var(--role-dev-bg); }
.crew__legend--domain-dev { color: var(--role-domain-dev); border-color: var(--role-domain-dev); background: var(--role-domain-dev-bg); }
.crew__legend--advisor    { color: var(--role-advisor);    border-color: var(--role-advisor);    background: var(--role-advisor-bg); }
/* 최소 폭을 9rem에서 7.4rem으로 내렸다. 과제2는 크루가 아홉이라 9rem
   에서는 여덟만 한 줄에 들어가 아홉째가 홀로 다음 줄로 넘어갔고, 그
   한 줄이 130px을 먹어 본문 세 줄의 간격을 못 벌렸다. */
.crew__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)); gap: calc(var(--gap) * 0.42); }

/* 역할은 왼쪽 띠와 옅은 바탕으로 나타낸다. 색은 범례와 같다.
   소속 칩은 회사라는 다른 축이라 색을 겹쳐 쓰지 않는다. */
.crew-cell {
  padding: calc(var(--gap) * 0.5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  /* 이름·소속·부서를 칸 가운데로 모은다. 왼쪽 정렬이던 때는 부서 길이가
     제각각이라 아홉 칸의 오른쪽이 들쭉날쭉했다. */
  align-items: center;
  text-align: center;
}

.crew-cell--domain     { border-left-color: var(--role-domain);     background: var(--role-domain-bg); }
.crew-cell--dev        { border-left-color: var(--role-dev);        background: var(--role-dev-bg); }
.crew-cell--domain-dev { border-left-color: var(--role-domain-dev); background: var(--role-domain-dev-bg); }
.crew-cell--advisor    { border-left-color: var(--role-advisor);    background: var(--role-advisor-bg); border-style: dashed; border-left-style: solid; }

.crew-cell__name { font-size: var(--step-0); font-weight: 700; }
.crew-cell__dept { font-size: var(--step-00); color: var(--ink-faint); line-height: var(--leading-tight); }

/* ── 휴대폰 (세로) ────────────────────────────────────────────────────
   slides.css에도 같은 미디어 블록이 있지만, 이 파일이 나중에 로드되므로
   여기 있는 선택자는 반드시 여기서 덮어야 한다. 저쪽에 적으면 조용히
   무시된다 — 실제로 그렇게 새서 원정대가 28열로 깔렸다. */
@media (max-width: 820px) and (orientation: portrait) {
  .card-grid,
  .task__blocks,
  .org-core__roles,
  .org-principles,
  .namecards { grid-template-columns: 1fr; }

  /* 조직도를 한 열로 푼다. 좌우에 있던 지원 조직이 위아래로 들어오므로
     가로 화살표도 90도 돌려 세로로 세운다. */
  .org-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'sponsor' 'flowtop' 'advisor' 'flowleft'
      'core' 'flowright' 'infra' 'flowbot' 'user';
    row-gap: calc(var(--gap) * 0.5);
  }

  .org-flow--flowleft,
  .org-flow--flowright { flex-direction: row; gap: 0.35em; }
  .org-flow--flowleft .org-flow__art,
  .org-flow--flowright .org-flow__art {
    width: calc(var(--step-1) * 1.6);
    transform: rotate(90deg);
  }

  /* 정사각형은 가로형 화면에서만이다. 한 열로 쌓이면 카드 한 장이
     화면 폭만큼 높아져 셋이 세 화면을 먹는다. */
  .namecards { grid-auto-flow: row; max-width: none; margin-top: calc(var(--gap) * 1.5); }
  .namecard { aspect-ratio: auto; padding: calc(var(--gap) * 1.1) var(--gap); }

  /* 원정대는 두 열. 여섯을 한 줄에 세우면 얼굴이 안 보이고, 한 열로 두면
     여섯 번 스크롤해야 한다. */
  .expedition { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }

  /* 역할분담 네 그룹은 세로형에서 한 열로. 두 열로 두면 칩 하나가
     한 줄을 차지해 카드가 화면 하나씩을 먹는다. */
  .roles { grid-template-columns: 1fr; }

  /* 크루 명단도 두 열. 이름만 있는 짧은 칸이라 들어간다. */
  .crew__grid { grid-template-columns: repeat(2, 1fr); }

  /* 조직도 화살표는 좌우 두 방향을 한 줄에 적어 좁은 화면에서 넘친다. */
  .org-arrow { line-height: 1.5; }
}

/* 5-1 과제 카드의 이미지. 라벨과 과제명 **사이**에 놓인다.
   원본 비율이 무엇이든 16:9로 잘라 담는다 — 세 칸의 사진 높이가
   같아야 카드 셋이 한 줄로 읽힌다.
   둥근 모서리는 여기서 만든다 — 파일에 구우면 잘려나간 귀퉁이가 특정
   색으로 채워져 배경을 바꾸는 순간 얼룩이 남는다. */
.card__art {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius) * 0.6);
  margin: calc(var(--gap) * 0.35) 0;
  /* 이미지가 글보다 세지 않도록 한 단계 눌러 둔다. 주인공은 과제명이다. */
  opacity: 0.88;
}

/* ── 4-5·4-6 마스터 트랙 역할분담 ───────────────────────────────────
   네 그룹을 두 장에 나눠 실었다(만드는 쪽 / 받치는 쪽). 한 장에 넷을
   다 넣었을 때는 카드 하나에 227px밖에 못 줘서 본문을 14px·행간 1.25까지
   눌러야 했고, 그러면 프로젝터 뒷줄에서 안 읽힌다.
   두 장이 되면서 카드마다 455px을 쓰므로 본문을 16px에 정상 행간으로
   되돌렸다. 글은 한 자도 줄이지 않았다. */
.roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  width: 100%;
  align-items: stretch;
}

.role-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.role-group__head {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.3em 0.9em;
  font-size: var(--step-0);
  font-weight: 800;
  color: #0B0930;
  line-height: 1.35;
}

.role-group__tag { font-family: var(--font-title); font-weight: 900; }
.role-group__label { font-weight: 800; }

/* 네 그룹의 색. 원본의 붉은·청록·황금·남색을 이 덱의 팔레트로 옮겼다. */
.role-group--core    { border-color: rgba(181, 145, 233, 0.45); }
.role-group--core    .role-group__head { background: var(--glow-rose); }
.role-group--tech    { border-color: rgba(63, 199, 173, 0.45); }
.role-group--tech    .role-group__head { background: var(--chip-green-ink); }
.role-group--support { border-color: rgba(242, 193, 78, 0.45); }
.role-group--support .role-group__head { background: var(--gold); }
.role-group--infra   { border-color: rgba(132, 137, 245, 0.5); }
.role-group--infra   .role-group__head { background: var(--glow-violet); }

/* 청중이 Core다. 자기 자리만 발광시킨다(2-2·6-1과 같은 장치). */
.role-group--core { box-shadow: 0 0 34px rgba(181, 145, 233, 0.22); }

.role {
  padding: calc(var(--gap) * 0.6) calc(var(--gap) * 0.9);
  border-top: 1px solid var(--line);
}

.role:first-of-type { border-top: 0; }

.role__name { font-size: var(--step-1); font-weight: 800; color: var(--ink); line-height: var(--leading-tight); }
.role__en { font-size: 0.7em; font-weight: 400; color: var(--ink-faint); margin-left: 0.5em; }

.role__desc {
  margin: 0.2em 0 0;
  font-size: var(--step-0);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

/* 실무 항목. 원본은 "/"로 이어 붙였는데, 그러면 네댓 항목이 한 문단으로
   뭉쳐 어디서 끊어 읽을지가 안 잡힌다. 칩으로 흩어 놓으면 개수가 보인다. */
.role__duties { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.4em; }

.role__duty {
  padding: 0.08em 0.7em;
  border-radius: var(--radius-pill);
  background: rgba(132, 137, 245, 0.16);
  border: 1px solid rgba(132, 137, 245, 0.32);
  font-size: var(--step-00);
  color: var(--glow-cyan);
  line-height: var(--leading-body);
}

/* 칩으로 쪼갤 수 없는 문장(인프라 그룹의 저장소 안내). */
.role__notes { margin: 0.5em 0 0; padding: 0; list-style: none; }

.role__notes li {
  position: relative;
  padding-left: 0.95em;
  margin-top: 0.4em;
  font-size: var(--step-00);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

.role__notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--glow-violet);
}

.role__note-label { font-weight: 800; color: var(--glow-cyan); margin-right: 0.4em; }

/* 과제1만의 예외. 본문보다 한 단계 낮춰 딸린 말임을 보인다. */
.role__note-sub { display: block; margin-top: 0.15em; color: var(--ink-faint); }
.role__note-sub::before { content: '※ '; }