/**
 * Ttobagi work speech — scoped styles (prefix ttbwk-). Do not share selectors with ttbsg-.
 * Loaded only when [ttobagi_work_speech] renders.
 */


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

.ttbwk-root img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ttbwk-root ul,
.ttbwk-root ol {
  margin: 0;
  padding: 0;
}

.ttbwk-root h1,
.ttbwk-root h2,
.ttbwk-root h3,
.ttbwk-root p {
  margin: 0;
}

/* Design tokens — aligned with 승무원 과정 페이지 스케일 */
.ttbwk-root {
  --ttbwk-navy: #1b2a4e;
  --ttbwk-text: #111827;
  --ttbwk-text-soft: #1f2937;
  --ttbwk-border-card: #d9dde3;
  --ttbwk-border-subtle: #e5e9ef;
  --ttbwk-surface-soft: #f6f7fa;

  --ttbwk-container: 720px;
  --ttbwk-gap-section: 28px;
  --ttbwk-page-pad-x: 20px;

  --ttbwk-fz-hero-brand: 11px;
  --ttbwk-fz-hero-title: 22px;
  --ttbwk-fz-hero-lead: 11px;

  --ttbwk-fz-section: 22px;
  --ttbwk-fz-card-title: 14px;
  --ttbwk-fz-body: 12.5px;
  --ttbwk-fz-bullet: 12px;

  --ttbwk-line-body: 1.55;
  --ttbwk-line-tight: 1.25;

  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  color: var(--ttbwk-text);
  font-family:
    'Pretendard',
    'Pretendard Variable',
    -apple-system,
    BlinkMacSystemFont,
    'Apple SD Gothic Neo',
    'Noto Sans KR',
    sans-serif;
  font-size: var(--ttbwk-fz-body);
  line-height: var(--ttbwk-line-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;

}

/* Page — 승무원 .page와 동일한 리듬 */
.ttbwk-root .ttbwk-page {

  max-width: var(--ttbwk-container);
  margin: 0 auto;
  padding: 32px var(--ttbwk-page-pad-x) 36px;
  display: flex;
  flex-direction: column;
  gap: var(--ttbwk-gap-section);

}

/* --- Top hero (승무원 .hero 폭·높이·라운드에 맞춤) --- */
.ttbwk-root .ttbwk-top-hero {

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  min-height: 180px;
  background: #2c3744;
  border: none;

}

.ttbwk-root .ttbwk-top-hero-copy {

  padding: 0 28px;
  color: #fff;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 180px;

}

.ttbwk-root .ttbwk-brand-eyebrow {

  font-size: var(--ttbwk-fz-hero-brand);
  font-weight: 500;
  color: #c5cdd9;

}

.ttbwk-root .ttbwk-top-hero-title {

  font-size: var(--ttbwk-fz-hero-title);
  font-weight: 800;
  line-height: var(--ttbwk-line-tight);
  color: #ffffff;
  margin-bottom: 2px;

}

.ttbwk-root .ttbwk-top-hero-lead {

  font-size: var(--ttbwk-fz-hero-lead);
  color: #c8cfd9;
  line-height: var(--ttbwk-line-body);
  font-weight: 400;

}

.ttbwk-root .ttbwk-top-hero-visual {

  align-self: stretch;
  overflow: hidden;
  position: relative;
  min-height: 180px;
  background: #0f172a;

}
.ttbwk-root .ttbwk-top-hero-visual img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

}

/* --- Info cards — 승무원 .header-row 간격과 비슷한 스케일 --- */
.ttbwk-root .ttbwk-info-row {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;

}

.ttbwk-root .ttbwk-info-card {

  background: #fff;
  border: 1px solid var(--ttbwk-border-card);
  border-radius: 4px;
  padding: 14px 16px 16px;

}

.ttbwk-root .ttbwk-info-card-head {

  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;

}

.ttbwk-root .ttbwk-info-card-icon {

  width: 24px;
  height: 24px;
  flex-shrink: 0;

}

.ttbwk-root .ttbwk-info-card-title {

  font-size: 15px;
  font-weight: 800;
  color: var(--ttbwk-navy);
  letter-spacing: -0.01em;

}
.ttbwk-root .ttbwk-info-card-icon,
.ttbwk-root .ttbwk-course-info-list img,
.ttbwk-root .ttbwk-wk-ic {

  filter: brightness(0) saturate(100%) invert(12%) sepia(19%) saturate(1685%) hue-rotate(177deg)
    brightness(97%) contrast(93%);

}

.ttbwk-root .ttbwk-purpose-list {

  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  counter-reset: p;

}

.ttbwk-root .ttbwk-purpose-list li {

  position: relative;
  padding-left: 42px;
  font-size: var(--ttbwk-fz-bullet);
  font-weight: 500;
  color: var(--ttbwk-text-soft);
  letter-spacing: -0.01em;
  line-height: var(--ttbwk-line-body);

}
.ttbwk-root .ttbwk-purpose-list li::before {

  counter-increment: p;
  content: counter(p);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ttbwk-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;

}

.ttbwk-root .ttbwk-course-info-list {

  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;

}

.ttbwk-root .ttbwk-course-info-list > li {

  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--ttbwk-fz-bullet);
  font-weight: 500;
  color: var(--ttbwk-text-soft);
  letter-spacing: -0.01em;
  line-height: var(--ttbwk-line-body);

}
.ttbwk-root .ttbwk-course-info-ic {

  width: 28px;
  height: 28px;

}

.ttbwk-root .ttbwk-course-info-ic img {

  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.82;
  filter: brightness(0) saturate(100%) invert(12%) sepia(19%) saturate(1685%) hue-rotate(177deg)
    brightness(97%) contrast(93%);

}

/* --- Curriculum — 승무원 .ttbwk-curriculum-section / .lesson-card --- */
.ttbwk-root .ttbwk-curriculum-section {

  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;

}

.ttbwk-root .ttbwk-section-head {

  margin-bottom: 0;

}

.ttbwk-root .ttbwk-section-head-title {

  font-size: var(--ttbwk-fz-section);
  font-weight: 800;
  color: var(--ttbwk-navy);
  letter-spacing: -0.02em;

}

.ttbwk-root .ttbwk-curriculum-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  grid-auto-rows: 1fr;

}

@media (min-width: 721px) {
  .ttbwk-root .ttbwk-curriculum-grid .ttbwk-wk-card:nth-child(1) {

    grid-row: 1;
    grid-column: 1;
  
}
  .ttbwk-root .ttbwk-curriculum-grid .ttbwk-wk-card:nth-child(2) {

    grid-row: 2;
    grid-column: 1;
  
}
  .ttbwk-root .ttbwk-curriculum-grid .ttbwk-wk-card:nth-child(3) {

    grid-row: 3;
    grid-column: 1;
  
}
  .ttbwk-root .ttbwk-curriculum-grid .ttbwk-wk-card:nth-child(4) {

    grid-row: 4;
    grid-column: 1;
  
}

  .ttbwk-root .ttbwk-curriculum-grid .ttbwk-wk-card:nth-child(5) {

    grid-row: 1;
    grid-column: 2;
  
}
  .ttbwk-root .ttbwk-curriculum-grid .ttbwk-wk-card:nth-child(6) {

    grid-row: 2;
    grid-column: 2;
  
}
  .ttbwk-root .ttbwk-curriculum-grid .ttbwk-wk-card:nth-child(7) {

    grid-row: 3;
    grid-column: 2;
  
}
  .ttbwk-root .ttbwk-curriculum-grid .ttbwk-wk-card:nth-child(8) {

    grid-row: 4;
    grid-column: 2;
  
}
}

.ttbwk-root .ttbwk-wk-card {

  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--ttbwk-border-card);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
  min-height: 150px;
  height: 100%;

}

.ttbwk-root .ttbwk-wk-no {

  background: var(--ttbwk-navy);
  color: #fff;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-feature-settings: 'tnum' on;

}

.ttbwk-root .ttbwk-wk-body {

  padding: 16px 18px 18px;

}

.ttbwk-root .ttbwk-wk-head {

  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;

}

.ttbwk-root .ttbwk-wk-ic {

  flex: 0 0 24px;
  width: 24px;
  height: 24px;

}

.ttbwk-root .ttbwk-wk-title {

  font-size: var(--ttbwk-fz-card-title);
  font-weight: 800;
  color: var(--ttbwk-navy);
  letter-spacing: -0.01em;
  line-height: 1.3;

}

.ttbwk-root .ttbwk-wk-bullets {

  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 2px;

}

.ttbwk-root .ttbwk-wk-bullets li {

  position: relative;
  padding-left: 12px;
  font-size: var(--ttbwk-fz-bullet);
  color: var(--ttbwk-text-soft);
  font-weight: 500;

}

.ttbwk-root .ttbwk-wk-bullets li::before {

  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ttbwk-navy);
  position: absolute;
  left: 1px;
  top: 7px;

}

/* --- 제공 자료 — 승무원 .benefits-section 스케일 --- */
.ttbwk-root .ttbwk-materials-bar {

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  background: var(--ttbwk-navy);
  color: #fff;
  padding: 26px 24px 28px;
  border-radius: 4px;
  border: none;
  margin-top: 14px;

}

.ttbwk-root .ttbwk-materials-bar-title {

  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;

}

.ttbwk-root .ttbwk-materials-items {

  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  flex: 1 1 auto;
  width: 100%;

}

.ttbwk-root .ttbwk-materials-item {

  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;

}

.ttbwk-root .ttbwk-materials-item img {

  height: 40px;
  width: auto;
  max-height: 40px;
  margin: 0 auto;
  filter: brightness(0) invert(1);

}

.ttbwk-root .ttbwk-materials-item span {

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;

}

.ttbwk-root .ttbwk-materials-divider {

  width: 1px;
  background: rgba(255, 255, 255, 0.38);
  flex-shrink: 0;
  align-self: stretch;
  min-height: 84px;

}

/* --- 최종 목표 — 승무원 .effects-section 톤 --- */
.ttbwk-root .ttbwk-goal-block {

  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--ttbwk-border-subtle);
  border-radius: 4px;
  padding: 22px 20px 26px;
  margin-top: 8px;

}

.ttbwk-root .ttbwk-goal-left {

  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;

}

.ttbwk-root .ttbwk-goal-target {

  width: 46px;
  height: 46px;

}

.ttbwk-root .ttbwk-goal-target img {

  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(12%) sepia(19%) saturate(1685%) hue-rotate(177deg)
    brightness(97%) contrast(93%);

}

.ttbwk-root .ttbwk-goal-title-wrap {

  padding: 8px 10px;
  border: 2px solid var(--ttbwk-navy);
  border-radius: 10px;
  background: #fff;

}

.ttbwk-root .ttbwk-goal-title {

  font-size: 18px;
  font-weight: 800;
  color: var(--ttbwk-navy);
  letter-spacing: -0.01em;

}

.ttbwk-root .ttbwk-goal-rule {

  width: 1px;
  min-height: 56px;
  background: rgba(17, 24, 39, 0.18);

}

.ttbwk-root .ttbwk-goal-text {

  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ttbwk-text-soft);
  letter-spacing: -0.01em;
  line-height: var(--ttbwk-line-body);

}

.ttbwk-root .ttbwk-goal-text strong {

  font-weight: 800;
  color: var(--ttbwk-navy);
  text-decoration: none;

}

@media (min-width: 1024px) {
  .ttbwk-root {

    --ttbwk-container: 1080px;
    --ttbwk-page-pad-x: 40px;
    --ttbwk-gap-section: 40px;
    --ttbwk-fz-section: 26px;
    --ttbwk-fz-card-title: 15px;
    --ttbwk-fz-body: 13.5px;
    --ttbwk-fz-bullet: 13.5px;
  
}

  .ttbwk-root .ttbwk-page {

    padding: 56px var(--ttbwk-page-pad-x) 24px;
    gap: var(--ttbwk-gap-section);
  
}

  .ttbwk-root .ttbwk-info-row {

    gap: 32px;
  
}

  .ttbwk-root .ttbwk-info-card-title {

    font-size: 17px;
  
}

  .ttbwk-root .ttbwk-info-card-icon {

    width: 26px;
    height: 26px;
  
}

  .ttbwk-root .ttbwk-wk-no {

    font-size: 28px;
  
}

  .ttbwk-root .ttbwk-wk-ic {

    width: 22px;
    height: 22px;
    flex-basis: 22px;
  
}

  .ttbwk-root .ttbwk-materials-bar {

    padding: 36px 40px 40px;
    gap: 36px;
  
}

  .ttbwk-root .ttbwk-materials-bar-title {

    font-size: 22px;
  
}

  .ttbwk-root .ttbwk-materials-item img {

    height: 48px;
    max-height: 48px;
  
}

  .ttbwk-root .ttbwk-materials-item span {

    font-size: 13px;
  
}

  .ttbwk-root .ttbwk-goal-title {

    font-size: 22px;
  
}

  .ttbwk-root .ttbwk-goal-text {

    font-size: 13.5px;
  
}
}

/* --- Responsive --- */
@media (max-width: 720px) {
  .ttbwk-root {

    --ttbwk-page-pad-x: 18px;
  
}

  .ttbwk-root .ttbwk-page {

    padding-top: 20px;
    gap: 24px;
  
}

  .ttbwk-root .ttbwk-top-hero {

    grid-template-columns: 1fr;
    min-height: 0;
    margin-bottom: 8px;
  
}

  .ttbwk-root .ttbwk-top-hero-copy {

    min-height: 0;
    padding: 20px 20px;
  
}

  .ttbwk-root .ttbwk-top-hero-visual {

    min-height: 160px;
    order: -1;
  
}

  .ttbwk-root .ttbwk-top-hero-title {

    font-size: 18px;
    margin-bottom: 0;
  
}

  .ttbwk-root .ttbwk-brand-eyebrow,
  .ttbwk-root .ttbwk-top-hero-lead {

    font-size: 10.5px;
  
}

  .ttbwk-root .ttbwk-info-row {

    grid-template-columns: 1fr;
  
}

  .ttbwk-root .ttbwk-curriculum-grid {

    grid-template-columns: 1fr;
  
}

  .ttbwk-root .ttbwk-materials-bar {

    flex-direction: column;
    align-items: flex-start;
  
}

  .ttbwk-root .ttbwk-materials-divider {

    display: none;
  
}

  .ttbwk-root .ttbwk-materials-items {

    flex-wrap: wrap;
    row-gap: 18px;
  
}

  .ttbwk-root .ttbwk-materials-item {

    flex-basis: 48%;
    min-width: calc(50% - 10px);
  
}

  .ttbwk-root .ttbwk-goal-block {

    flex-direction: column;
    align-items: flex-start;
  
}

  .ttbwk-root .ttbwk-goal-rule {

    width: 100%;
    height: 1px;
    min-height: 0;
  
}
}