@charset "UTF-8";
/* teambuilding.css - 독립 CSS (기존 사이트 영향 없음) */

/* ========================
   상단 프로그램 이름 스와이프
======================== */
.tb-name-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 28px;
}
.tb-name-scroll {
  display: flex;
  gap: 8px;
  margin: 0 22px;
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.tb-name-scroll::-webkit-scrollbar {
  display: none;
}
.tb-name-scroll.grabbing {
  cursor: grabbing;
}
.tb-name-chip {
  flex: 0 0 auto;
  font-size: 15px;
  padding: 11px 22px;
  border: 1px solid #ddd;
  border-radius: 26px;
  color: #555;
  white-space: nowrap;
  background: #fff;
  cursor: pointer;
}
.tb-name-chip.active {
  border-color: #f0523f;
  color: #f0523f;
  background: #fff5f4;
  font-weight: 700;
}

.tb-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #555;
  user-select: none;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.tb-scroll-btn:hover {
  border-color: #f0523f;
  color: #f0523f;
}
.tb-scroll-btn.prev {
  left: -14px;
}
.tb-scroll-btn.next {
  right: -14px;
}

/* ========================
   카드 그리드 (텍스트형)
======================== */
.tb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tb-card {
  position: relative;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 18px 16px;
  background: #fff;
  border: 1px solid #e5e3de;
  border-radius: 6px;
  text-decoration: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.tb-card:hover {
  border-color: #f0523f;
  box-shadow: 0 3px 12px rgba(240, 82, 63, 0.12);
  transform: translateY(-2px);
}
.tb-card.active {
  border-color: #f0523f;
  box-shadow: 0 3px 12px rgba(240, 82, 63, 0.2);
}
.tb-card.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: #f0523f;
  border-radius: 6px 0 0 6px;
}
.tb-card-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fdecea;
  color: #f0523f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-card-icon svg {
  width: 21px;
  height: 21px;
}
.tb-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.tb-card-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #222;
  margin-bottom: 2px;
}
.tb-card-en {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #b0ada5;
  margin-bottom: 9px;
}
.tb-card-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a4740;
  margin-bottom: 11px;
  word-break: keep-all;
}
.tb-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-top: auto;
}
.tb-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #fdecea;
  color: #f0523f;
}

/* ========================
   프로그램별 포인트 컬러
   상세 페이지 .all_conts 에 클래스 하나만 추가
   예) <div class="all_conts tb-gold-point">
   -deep 은 흰 글씨가 올라가는 배경용(기대효과 박스, 프로세스 라벨)
======================== */
.all_conts {
  --tb-point: #2d5ba4;
  --tb-point-deep: #294777;
}
.all_conts.tb-blue-point {
  --tb-point: #2d5ba4;
  --tb-point-deep: #294777;
}
.all_conts.tb-coral-point {
  --tb-point: #e8503c;
  --tb-point-deep: #a83a2c;
}
.all_conts.tb-crimson-point {
  --tb-point: #bd3a52;
  --tb-point-deep: #85263a;
}
.all_conts.tb-gold-point {
  --tb-point: #cf9a26;
  --tb-point-deep: #8f6a14;
}
.all_conts.tb-orange-point {
  --tb-point: #d1761c;
  --tb-point-deep: #965110;
}
.all_conts.tb-green-point {
  --tb-point: #2f8a5f;
  --tb-point-deep: #1e6141;
}
.all_conts.tb-teal-point {
  --tb-point: #16867f;
  --tb-point-deep: #0d5b56;
}
.all_conts.tb-purple-point {
  --tb-point: #6b4fa8;
  --tb-point-deep: #4b3679;
}

/* ========================
   상세 페이지 공통
======================== */
.tb-back-link {
  display: inline-block;
  font-size: 12px;
  color: #f0523f;
  margin-bottom: 20px;
  text-decoration: none;
}
.tb-back-link:hover {
  text-decoration: underline;
}

.tb-det-title {
  text-align: center;
  padding: 30px 0 20px;
  margin-bottom: 30px;
}
.tb-det-en {
  font-size: 55px;
  font-weight: 700;
  color: var(--tb-point);
  margin-bottom: 6px;
}
.tb-det-ko {
  font-size: 25px;
  color: #666;
  margin-bottom: 14px;
}
/* 타이틀 아래 구분선 (기존 sub.css 의 blue_line GIF 대체) */
.tb-det-ko::after,
.tb-bottom-txt .main-txt::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--tb-point);
  margin: 26px auto 0;
}

.tb-det-desc {
  font-size: 20px;
  color: #444;
  line-height: 2;
}

/* 기대효과 + 이미지 + 인원시간 */
.tb-info-wrap {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 24px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 30px;
  justify-content: center;
}
.tb-info-box {
  flex: 0 0 300px;
  background: var(--tb-point-deep);
  border-radius: 6px;
  padding: 16px 18px;
  color: #fff;
}
.tb-info-box h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.tb-info-box li {
  font-size: 15px;
  color: #fff;
  line-height: 1.9;
  list-style: none;
}
.tb-info-img {
  flex: 1;
  border-radius: 6px;
  max-width: 460px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-info-img img {
  object-fit: cover;
}
.tb-info-img .tb-no-img {
  font-size: 12px;
  color: #aaa;
}

/* 사진 */
.tb-photos {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgb(224, 224, 224);
}
.tb-photo {
  border-radius: 4px;
  overflow: hidden;
}
.tb-photo img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.tb-photos:empty {
  display: none;
}

/* 통이미지 (룰 설명 등 특수 이미지) */
.tb-extra-img {
  margin-bottom: 30px;
  border-radius: 6px;
  overflow: hidden;
}
.tb-extra-img img {
  max-width: 100%;
  display: block;
}

/* 하단 설명 */
.tb-bottom-txt {
  text-align: center;
  margin-bottom: 30px;
  padding-top: 30px;
}
.tb-bottom-txt .main-txt {
  font-size: 24px;
  font-weight: 700;
  color: var(--tb-point);
  margin-bottom: 12px;
}
.tb-bottom-txt .sub-txt {
  font-size: 18px;
  color: #444;
  line-height: 2;
}
.tb-bottom-txt .sub-txt span {
  font-weight: 700;
  color: #282828;
}

/* 유튜브 */
.tb-vod {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: min(450px, 56.25%);
  height: 0;
  overflow: hidden;
  border-radius: 4px;
}
.tb-vod iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tb-vod-empty {
  aspect-ratio: 16/9;
  background: #e8e8e8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #aaa;
}

/* ========================
   진행 과정 (3단계 / 4단계 공용)
======================== */
.tb-process {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 30px;
  text-align: center;
  padding-bottom: 30px;
  border-bottom: 1px solid rgb(224, 224, 224);
}
.tb-process-item {
  position: relative;
  padding: 0 16px;
}
.tb-process-item:not(:last-child)::after {
  content: "\2022\2022\2022";
  position: absolute;
  right: -18px;
  top: 50px;
  font-size: 12px;
  color: #bbb;
  letter-spacing: 4px;
  transform: translateY(-50%);
}
.tb-process-figure {
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tb-process-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tb-process-num {
  font-size: 22px;
  font-weight: 700;
  color: #aaa;
}
.tb-process-label {
  display: inline-block;
  background: var(--tb-point-deep);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding: 8px 24px;
  border-radius: 30px;
}
.tb-process-step-desc {
  font-size: 15px;
  color: #888;
  line-height: 1.6;
  margin-top: 8px;
  text-align: center;
  word-break: keep-all;
}

/* 4단계 - 칸이 좁아지므로 라벨·설명 축소 */
ol.tb-process.tb-process-4 {
  grid-template-columns: repeat(4, 1fr);
}
.tb-process-4 .tb-process-figure {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}
.tb-process-4 .tb-process-label {
  font-size: 24px;
  padding: 6px 18px;
}
.tb-process-4 .tb-process-step-desc {
  font-size: 15px;
}

/* ========================
   트릭레이스 역할 안내
======================== */
.tb-role-section {
  margin-bottom: 30px;
  padding: 24px 20px;
  border-radius: 6px;
}
.tb-role-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 12px;
}
.tb-role-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tb-role-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}
.tb-role-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tb-role-info {
  flex: 1;
}
.tb-role-name {
  font-size: 18px;
  font-weight: 700;
  color: #282828;
  margin-bottom: 2px;
}
.tb-role-en {
  font-size: 12px;
  color: var(--tb-point);
  margin-bottom: 4px;
}
.tb-role-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* ========================
   반응형
======================== */
@media (max-width: 960px) {
  .tb-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .tb-role-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .tb-name-chip {
    font-size: 14px;
    padding: 9px 18px;
  }
  .tb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .tb-card {
    gap: 11px;
    padding: 15px 13px;
  }
  .tb-card-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .tb-card-icon svg {
    width: 18px;
    height: 18px;
  }
  .tb-card-name {
    font-size: 16px;
  }
  .tb-card-desc {
    font-size: 13px;
  }
  .tb-info-wrap {
    flex-direction: column;
  }
  .tb-info-box {
    flex: none;
    width: 100%;
  }
  .tb-info-img {
    width: 100%;
  }
  .tb-det-en {
    font-size: 22px;
  }
  .tb-process {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
  }
  .tb-process-item::after {
    display: none;
  }
  ol.tb-process.tb-process-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .tb-role-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .tb-process,
  ol.tb-process.tb-process-4 {
    grid-template-columns: 1fr;
  }
  .tb-role-grid {
    grid-template-columns: 1fr;
  }
}