/* ==========================================================================
   TalentLink Design System v0.1
   레퍼런스: channel.io/kr/talk (2026-11-02 실측, computed style 기준)
   - 구조·스케일·라운드·그림자·모션은 채널톡 실측값
   - 브랜드 강조색(--tl-accent)만 탤런트링크 값으로 교체 가능하도록 분리
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- 1. Brand accent (교체 지점: 이 블록만 바꾸면 전체 강조색 변경) ---------- */
  --tl-accent:            #4338CA;               /* 현재 로고·페이지 인디고. 채널톡 action = #6157EA */
  --tl-accent-hover:      #3730A3;
  --tl-accent-light:      rgba(67, 56, 202, .20); /* 채널톡 fill-action-light (33 = 20%) */
  --tl-accent-lighter:    rgba(67, 56, 202, .10); /* 채널톡 fill-action-lighter (1A = 10%) */

  /* ---------- 2. Text (채널톡은 순수 블랙 + 알파로 위계를 만든다) ---------- */
  --text-strong:          #0E1033;               /* h1, 히어로 (인디고 기운의 잉크) */
  --text-title:           #13153A;               /* h2 섹션 타이틀 */
  --text-default:         rgba(14, 16, 51, .86);    /* 일반 텍스트, 링크, 내비 */
  --text-secondary:       #3D4166;               /* 카드·필러 설명 본문 */
  --text-light:           rgba(14, 16, 51, .62);
  --text-muted:           #7A7E9C;               /* 보조 안내문 */
  --text-lighter:         rgba(14, 16, 51, .40);    /* placeholder, 비활성 */
  --text-inverse:         #FFFFFF;
  --text-tint-muted:      #5E6285;               /* 틴트 트랙 위 비활성 탭 */

  /* ---------- 3. Surface / Fill ---------- */
  --surface:              #FFFFFF;               /* 페이지 기본 배경 = 순백 */
  --surface-low:          #FBFBFE;
  --fill-grey:            #F5F6FB;               /* 회색 섹션·패널 */
  --fill-grey-heavy:      #ECEEF7;
  --fill-tint:            #EEF0FB;               /* 미디어 카드 배경 (쿨 인디고 틴트) */
  --fill-tint-track:      #EFF1FA;               /* 세그먼트 탭 트랙 */
  --fill-neutral-lighter: rgba(40, 44, 120, .03);
  --fill-neutral-light:   rgba(40, 44, 120, .05);    /* 중립 칩, 보조 버튼 */
  --fill-neutral-chip:    rgba(40, 44, 120, .08);    /* 태그 칩 */
  --fill-neutral-heavy:   rgba(40, 44, 120, .15);
  --fill-dark:            #1E1B4B;               /* 1차 CTA (GNB '무료로 시작하기') */
  --fill-dark-indicator:  #1E1B4B;               /* 세그먼트 활성 인디케이터 */
  --fill-black:           #0E1033;               /* 섹션 CTA ('모든 고객 사례 보기') */
  --glass:                rgba(255, 255, 255, .82);
  --glass-light:          rgba(255, 255, 255, .80);
  --dim:                  rgba(14, 16, 51, .40);
  --dim-heavy:            rgba(14, 16, 51, .60);

  /* ---------- 4. Border ---------- */
  --border:               rgba(40, 44, 120, .10);    /* 기본 헤어라인 (보더 대신 inset shadow로 많이 씀) */
  --border-heavy:         rgba(40, 44, 120, .18);
  --border-grey:          #E6E8F4;

  /* ---------- 5. Accent palette (태그·아이콘 다색 구분용, fill = 10% 알파) ---------- */
  --accent-blue:   #6157EA;  --accent-cobalt: #3292E3;  --accent-teal:   #09B2AC;
  --accent-green:  #20AB55;  --accent-yellow: #EDAE0D;  --accent-orange: #E67F2B;
  --accent-red:    #E1535D;  --accent-pink:   #D64BB5;  --accent-purple: #8E57E7;
  --accent-navy:   #424FAB;

  /* 의미색 */
  --success:  #20AB55;
  --warning:  #E67F2B;
  --critical: #E1535D;

  /* ---------- 6. Gradients (히어로·장식용, 남용 금지) ---------- */
  --grad-hero-card:   linear-gradient(150deg, #F2F1FF 0%, #F8F9FF 45%, #E3E8FF 100%);
  --grad-border-ai:   linear-gradient(90deg, #4B72FF, #E098FF);            /* 그라디언트 테두리 입력창 */
  --grad-glow:        conic-gradient(transparent 0%, rgba(133,197,248,.9) 15%, rgba(181,175,244,.9) 30%, transparent 45%);
  --grad-text-shine:  linear-gradient(90deg, #8B9CFF, #C4B5FD);              /* 타이틀 하이라이트 스윕 */

  /* ---------- 7. Typography ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
  --font-latin: Inter, "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 스케일: 데스크톱(≥1281) 값. 아래 미디어쿼리에서 단계별 축소 */
  --fs-display: 44px;  --lh-display: 62px;  --ls-display: -0.02em;   /* h1 / h2 섹션 타이틀 */
  --fs-eyebrow: 22px;  --lh-eyebrow: 30px;  --ls-eyebrow: -0.008em;  /* 섹션 상단 라벨 (대문자 X, 한글) */
  --fs-h3:      24px;  --lh-h3:      32px;  --ls-h3:      -0.02em;   /* 카드·기능 제목 */
  --fs-lead:    18px;  --lh-lead:    28px;  --ls-lead:    -0.01em;   /* 섹션 리드 문단 */
  --fs-body:    16px;  --lh-body:    24px;  --ls-body:    -0.01em;   /* 본문 */
  --fs-button:  16px;  --lh-button:  25px;  --ls-button:  -0.01em;
  --fs-small:   14px;  --lh-small:   22px;
  --fs-caption: 13px;  --lh-caption: 18px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;  /* 채널톡 제목·버튼 모두 600. 800은 쓰지 않는다 */
  --fw-bold:    700;

  /* ---------- 8. Radius ---------- */
  --radius-xs:    4px;     /* 아주 작은 인라인 태그 */
  --radius-sm:    8px;     /* 소형 버튼(앱 UI 목업 안) */
  --radius-md:    12px;
  --radius-card:  16px;    /* 흰 카드 */
  --radius-media: 22px;    /* 미디어/일러스트 카드 */
  --radius-device: 33px;   /* 폰 목업 프레임 */
  --radius-hero:  40px;    /* 히어로 대형 비주얼 카드 */
  --radius-pill:  999px;   /* 버튼·칩·탭 = 전부 pill */

  /* ---------- 9. Elevation ---------- */
  --shadow-subtle:  0 1px 2px rgba(20,22,70,.10);
  --shadow-float:   0 2px 6px rgba(20,22,70,.08), 0 0 2px rgba(20,22,70,.05);   /* 흰 pill 버튼, 활성 세그먼트 */
  --shadow-card:    0 0 1.5px .75px rgba(20,22,70,.05), 0 1.5px 4.5px rgba(20,22,70,.08), 0 13.5px 18px rgba(20,22,70,.05);
  --shadow-card-sm: 0 0 2px 1px rgba(20,22,70,.05);
  --shadow-window:  inset 0 0 0 .75px rgba(20,22,70,.08), 0 12px 40px rgba(20,22,70,.15);  /* 앱 창·모달 */
  --shadow-hairline: inset 0 0 0 1px rgba(20,22,70,.08);                     /* 보더 대신 쓰는 헤어라인 */

  /* ---------- 10. Spacing (4px 그리드) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-15: 60px; --space-20: 80px;
  --space-25: 100px;

  --section-py:      80px;   /* 섹션 상하 (≤1024: 60px) */
  --section-py-lg:   100px;  /* 강조 섹션 상단 */
  --gutter:          24px;   /* 좌우 여백 (≤1280: 28px, 모바일: 20px) */
  --container-wide:  1320px; /* 미디어 포함 넓은 컨테이너 */
  --container:       1160px; /* 기본 콘텐츠 */
  --container-text:  604px;  /* 리드 문단 최대 폭 */
  --gnb-height:      72px;

  /* ---------- 11. Motion ---------- */
  --ease-out-expo:  cubic-bezier(0.3, 0, 0, 1);     /* 등장·확장 */
  --ease-emphasis:  cubic-bezier(0.36, 0, 0, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: .2s;  --dur-base: .25s;  --dur-slow: .3s;  --dur-reveal: .8s;

  /* ---------- 12. Z-index ---------- */
  --z-gnb: 40;  --z-modal: 50;
}

/* 반응형 스케일 (채널톡 브레이크포인트: 767 / 991 / 1024 / 1280 / 1440) */
@media (max-width: 1280px) {
  :root {
    --fs-display: 40px; --lh-display: 56px;
    --fs-eyebrow: 21px;
    --gutter: 28px;
  }
}
@media (max-width: 1024px) {
  :root { --section-py: 60px; --section-py-lg: 80px; --radius-hero: 32px; }
}
@media (max-width: 767px) {
  /* 모바일 값은 채널톡 비율을 따른 추정치 (실측 아님) */
  :root {
    --fs-display: 28px; --lh-display: 38px;
    --fs-eyebrow: 17px; --lh-eyebrow: 24px;
    --fs-h3: 20px;      --lh-h3: 28px;
    --fs-lead: 16px;    --lh-lead: 26px;
    --fs-body: 15px;    --lh-body: 23px;
    --fs-button: 15px;
    --gutter: 20px;     --section-py: 56px; --section-py-lg: 64px;
    --radius-hero: 24px; --radius-media: 18px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;          /* 한글 어절 단위 줄바꿈 */
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }   /* 제목 마지막 줄에 한 단어만 남는 것 방지 */
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
section[id] { scroll-margin-top: var(--gnb-height); }

/* ==========================================================================
   Layout
   ========================================================================== */
.tl-container      { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.tl-container-wide { width: 100%; max-width: calc(var(--container-wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.tl-section        { padding: var(--section-py) 0; }
.tl-section--grey  { background: var(--fill-grey); }
.tl-section-head   { display: flex; flex-direction: column; gap: var(--space-4); }
.tl-section-head--center { align-items: center; text-align: center; }
.tl-section-head + * { margin-top: var(--space-12); }

/* ==========================================================================
   Typography
   ========================================================================== */
.tl-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); color: var(--text-strong); }
.tl-title   { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); color: var(--text-title); }
.tl-eyebrow { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-medium); color: var(--text-strong); }
.tl-h3      { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold); color: var(--text-strong); }
.tl-lead    { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); color: var(--text-strong); max-width: var(--container-text); }
.tl-body    { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-secondary); }
.tl-muted   { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }
.tl-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-light); }
.tl-accent-text { color: var(--tl-accent); }

/* ==========================================================================
   Components
   ========================================================================== */

/* GNB — 반투명 글래스, 하단 보더 없음 */
.tl-gnb {
  position: sticky; top: 0; z-index: var(--z-gnb);
  height: var(--gnb-height);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
}
.tl-gnb__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.tl-gnb__nav   { display: flex; gap: var(--space-2); }
.tl-gnb__link  {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: var(--fw-medium); color: var(--text-default);
  transition: background var(--dur-fast) var(--ease-standard);
}
.tl-gnb__link:hover { background: var(--fill-neutral-light); }

/* Button — 모두 pill */
.tl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 9px 20px;
  border: 0; border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--fs-button); line-height: var(--lh-button);
  letter-spacing: var(--ls-button); font-weight: var(--fw-semibold);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), opacity var(--dur-fast), box-shadow var(--dur-base);
}
.tl-btn--sm        { min-height: 36px; padding: 5px 14px; }
.tl-btn--primary   { background: var(--fill-dark); color: var(--text-inverse); }
.tl-btn--primary:hover { background: #14123A; }
.tl-btn--black     { background: var(--fill-black); color: var(--text-inverse); padding-left: 21px; padding-right: 15px; }
.tl-btn--secondary { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-float); }
.tl-btn--secondary:hover { background: var(--fill-grey); }
.tl-btn--tonal     { background: var(--fill-neutral-light); color: var(--text-default); }
.tl-btn--tonal:hover { background: var(--fill-neutral-chip); }
.tl-btn--accent    { background: var(--tl-accent); color: var(--text-inverse); }
.tl-btn--accent:hover { background: var(--tl-accent-hover); }
.tl-btn:focus-visible, .tl-link:focus-visible, .tl-gnb__link:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }

/* Text link with chevron — "더 알아보기 >" */
.tl-link {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px;
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-default);
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
}
.tl-link svg { transition: transform var(--dur-base) var(--ease-out-expo); }
.tl-link:hover svg { transform: translateX(3px); }

/* Chip */
.tl-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--fill-neutral-chip); color: var(--text-tint-muted);
  font-size: var(--fs-small); line-height: 1;
}
.tl-chip--accent { background: var(--tl-accent-lighter); color: var(--tl-accent); font-weight: var(--fw-semibold); }

/* Segmented tabs — 웜그레이 트랙 + 다크 인디케이터 */
.tl-segmented { display: inline-flex; padding: 5px; border-radius: var(--radius-pill); background: var(--fill-tint-track); }
.tl-segmented__item {
  min-height: 52px; padding: 6px 35px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-tint-muted);
  font: var(--fw-semibold) 16px/24px var(--font-sans); letter-spacing: -0.01em; cursor: pointer;
  transition: color var(--dur-slow), background var(--dur-slow) var(--ease-out-expo);
}
.tl-segmented__item[aria-selected="true"] { background: var(--fill-dark-indicator); color: var(--text-inverse); }

/* Pill switch — 히어로 상단 '커스텀 데모 / ALF와 대화' 형태 */
.tl-pill-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--fill-neutral-light); }
.tl-pill-switch__item { padding: 6px 18px; border-radius: var(--radius-pill); font-size: 16px; font-weight: var(--fw-semibold); color: var(--text-light); }
.tl-pill-switch__item.is-active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-float); }

/* Card — 보더 없이 레이어드 그림자 */
.tl-card {
  background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out-expo);
}
.tl-card:hover { transform: translateY(-2px); }

/* Media card — 웜 베이지 배경 위 비주얼, 제목·설명은 카드 '밖' 아래에 */
.tl-media { display: flex; flex-direction: column; gap: var(--space-5); }
.tl-media__frame { background: var(--fill-tint); border-radius: var(--radius-media); overflow: hidden; aspect-ratio: 16 / 10; }
.tl-media__frame--gradient { background: var(--grad-hero-card); }

/* Pillar — 아이콘 + 제목(>) + 설명, 카드 배경 없음 */
.tl-pillar { display: flex; flex-direction: column; gap: var(--space-3); }
.tl-pillar__icon { width: 24px; height: 24px; color: var(--text-default); }
.tl-pillar__title { display: inline-flex; align-items: center; gap: 2px; font-size: 20px; line-height: 28px; font-weight: var(--fw-semibold); color: var(--text-strong); letter-spacing: -0.01em; }

/* Icon badge — 다색 accent 10% 배경 */
.tl-icon-badge { width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--tl-accent-lighter); color: var(--tl-accent); }

/* Hero visual card */
.tl-hero-visual { border-radius: var(--radius-hero); overflow: hidden; background: var(--grad-hero-card); }

/* Divider */
.tl-divider { height: 1px; border: 0; background: var(--border); margin: 0; }

/* Modal */
.tl-modal-dim { position: fixed; inset: 0; background: var(--dim-heavy); }
.tl-modal { position: relative; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-window); }

/* Footer */
.tl-footer { background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-15) 0; font-size: var(--fs-small); color: var(--text-light); }

/* Reveal motion */
.tl-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo); }
.tl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tl-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}