/* ==========================================================================
   LB CORE - The LEET BIBLE Design System Core
   ========================================================================== */

/* 글꼴 Import: 헤딩 SUITE, 본문 SUIT (정본 docs/CURRENT_WORKFLOW.md 0절). @import는 파일 맨 앞에만 둔다. 규칙 뒤에 두면 브라우저가 무시한다 */
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css");
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css');

/* 교재형 CASE STUDY의 인용·문제에만 쓴다. 본문과 헤딩은 SUIT / SUITE를 유지한다. */
@font-face {
  font-family: "KoPub Batang";
  src: url("../fonts/KoPubBatang-Light.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "KoPub Batang";
  src: url("../fonts/KoPubBatang-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables - Design Tokens */
:root {
  /* Typography: 옛 이름. 값은 아래 Type System의 --tlb-font-body를 따른다 */
  --tlb-font-family: var(--tlb-font-body);

  /* Colors - Brand Primary (TLB Purple) */
  --color-primary: #962de3;
  --color-primary-light: #b355ff;
  --color-primary-dark: #7823b5;
  --color-primary-darker: #5f17d1;
  --color-primary-transparent: rgba(150, 45, 227, 0.1);
  --color-primary-hover: rgba(150, 45, 227, 0.9);

  /* Colors - Text */
  --color-text-title: #1f2124;
  --color-text-body: #3a4046;
  --color-text-light: #7b848d;
  --color-text-lighter: #9ca3af;
  --color-text-white: #ffffff;

  /* Colors - Background */
  --color-background: #f8f9fa;
  --color-background-dark: #111111;
  --color-background-card: #ffffff;
  --color-background-hover: #f3f4f6;
  --color-background-gradient-light: #e5e7eb;
  --color-background-gradient-dark: #d1d5db;

  /* Colors - Border */
  --color-border: #e9ecef;
  --color-border-light: #f3f4f6;
  --color-border-dark: #d1d5db;

  /* Colors - Semantic */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Colors - Accent */
  --color-accent: #ff9900;
  --color-accent-light: #ffb84d;
  --color-accent-dark: #e68a00;

  /* Colors - Principle (Blue) */
  --color-principle: #4A86E8;
  --color-principle-light: #6da3f5;
  --color-principle-dark: #3469d4;
  --color-principle-transparent: rgba(74, 134, 232, 0.1);

  /* Spacing Scale */
  --spacing-xs: 8px;
  --spacing-sm: 14px;
  --spacing-md: 20px;
  --spacing-lg: 28px;
  --spacing-xl: 40px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 100px;
  --spacing-6xl: 120px;

  /* Legacy Spacing (rem-based) */
  --tlb-space-xs: 8px;
  --tlb-space-sm: 16px;
  --tlb-space-md: 24px;
  --tlb-space-lg: 32px;
  --tlb-space-xl: 48px;
  --tlb-space-2xl: 64px;

  /* Container Max Width */
  --container-max-width: 100%; /* Changed from 1200px - user wants full width */
  --content-max-width: 800px;
  --content-narrow-width: 640px;

  /* Section Padding */
  --section-padding-y: 100px;
  --section-padding-y-sm: 80px;
  --section-padding-bottom: 120px;
  --section-padding-x: 40px;
  --section-padding-x-mobile: 16px;

  /* Font Sizes: 옛 크기표(tlb-product.css 7곳). 새 작업은 아래 Type System 토큰(--tlb-fs-*)을 쓴다 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-5xl: 50px;

  /* Section Heading Sizes */
  --section-title-size: 50px;
  --section-title-size-mobile: 32px;

  /* Section Heading System */
  --section-label-size: 14px;
  --section-label-spacing: 12px;
  --section-subtitle-size: 18px;
  --section-subtitle-spacing: 20px;
  --section-title-offset-left: -3px; /* Font optical alignment for left-aligned headings */

  --section-label-size-mobile: 12px;
  --section-label-spacing-mobile: 8px;
  --section-subtitle-size-mobile: 14px;
  --section-subtitle-spacing-mobile: 12px;

  /* Border Radius */
  --tlb-radius-sm: 4px;
  --tlb-radius-md: 8px;
  --tlb-radius-lg: 16px;
  --tlb-radius-full: 9999px;

  /* Shadows */
  --tlb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tlb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --tlb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --tlb-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

  /* Transitions */
  --tlb-transition-fast: 150ms ease-in-out;
  --tlb-transition-base: 250ms ease-in-out;
  --tlb-transition-slow: 350ms ease-in-out;

  /* Animation */
  --tlb-animation-duration: 0.6s;
  --tlb-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Type System: 글자 서식 정본 (2026-09-29)
   글꼴, 크기, 줄간격, 자간은 이 블록에서만 정한다. 다른 CSS 파일과 아임웹 조각은
   숫자를 직접 쓰지 않고 아래 토큰(var(--tlb-fs-*) 등)이나 역할 클래스(.tlb-t-*)를 쓴다.
   여기 값을 바꾸면 토큰을 쓰는 모든 곳이 함께 바뀐다. 쓰는 법과 검사는 docs/CURRENT_WORKFLOW.md 0절.
   제목 크기는 화면 폭에 따라 커지는 유동값(clamp), 본문 크기는 고정값이다.
   주석의 숫자는 폰 390px 폭과 PC 1280px 폭에서 실제로 나오는 값이다.
   ========================================================================== */
:root {
  /* 글꼴: 헤딩 SUITE, 본문 SUIT. 웹폰트는 이 파일 맨 앞 @import로 불러온다. 손글씨용 강원교육모두체는 굵기마다 약 315KB(SUIT의 두 배)라 싣지 않는다 */
  --tlb-font-head: "SUITE", "SUIT", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tlb-font-body: "SUIT", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 굵기: SUITE는 600에서 800까지만 쓴다(900 금지). 본문 SUIT는 400, 문단 안 강조는 700 */
  --tlb-fw-light: 300;
  --tlb-fw-regular: 400;
  --tlb-fw-medium: 500;
  --tlb-fw-semibold: 600;
  --tlb-fw-bold: 700;
  --tlb-fw-heavy: 800;

  /* 제목 크기 (폰 / PC) */
  --tlb-fs-display: clamp(52px, 15vw, 76px); /* 58 / 76, 가격과 큰 숫자 */
  --tlb-fs-title: clamp(30px, 8.2vw, 50px); /* 32 / 50, 칸의 대제목 */
  --tlb-fs-h2: clamp(28px, 7vw, 40px); /* 28 / 40, 큰 소제목 */
  --tlb-fs-h3: clamp(21px, 5.4vw, 30px); /* 21 / 30, 중간 제목 */
  --tlb-fs-h4: clamp(20px, 5.4vw, 26px); /* 21 / 26, 카드 제목 */
  --tlb-fs-h5: clamp(17px, 4.6vw, 20px); /* 18 / 20, 작은 제목과 리드 문단 */

  /* 본문 크기 (고정) */
  --tlb-fs-lead: 18px;
  --tlb-fs-read: 17px; /* 긴 인용과 원고, 작은 제목 */
  --tlb-fs-body: 16px;
  --tlb-fs-small: 15px; /* 카드와 목록 안 설명 */
  --tlb-fs-meta: 14px;
  --tlb-fs-caption: 13px;
  --tlb-fs-micro: 12px;
  --tlb-fs-tiny: 11px; /* 카드 안 짧은 카테고리 라벨 */

  /* 줄간격: 0.1 단위. 세로 높이를 늘리지 않는다(2.0 이상 금지) */
  --tlb-lh-none: 1; /* 큰 숫자 한 줄 */
  --tlb-lh-tight: 1.2; /* 아주 큰 제목 */
  --tlb-lh-title: 1.3; /* 대제목 */
  --tlb-lh-head: 1.4; /* 소제목 */
  --tlb-lh-ui: 1.5; /* 버튼, 라벨, 촘촘한 목록 */
  --tlb-lh-compact: 1.6; /* 뿌리 기본값. 목록과 카드 안 글 */
  --tlb-lh-text: 1.7; /* 짧은 문단 */
  --tlb-lh-body: 1.8; /* 본문 문단 */
  --tlb-lh-read: 1.9; /* 긴 인용과 원고 */

  /* 자간 */
  --tlb-ls-body: -0.02rem; /* 교재 book-theme.css의 --body-tracking과 같은 본문 자간. 웹도 지나치게 조이지 않는다(2026-09-30 대표 지시) */
  --tlb-ls-head: -0.03em; /* 제목 */
  --tlb-ls-none: 0;

  /* 카드·카테고리 역할: 상품·최근 게시물·매거진·블로그가 같은 기준을 받는다. */
  --tlb-card-title-size: var(--tlb-fs-lead);
  --tlb-card-summary-size: var(--tlb-fs-small);
  --tlb-card-summary-leading: var(--tlb-lh-ui);
  --tlb-card-summary-gap: var(--spacing-xs);
  --tlb-category-chip-size: var(--tlb-fs-caption);
  --tlb-category-chip-weight: var(--tlb-fw-bold);
  --tlb-category-chip-label-offset: 0px;
  --tlb-category-chip-title-offset: 0.75px;
  --tlb-category-chip-padding-block: 3px;
  --tlb-category-chip-padding-inline: 10px;
  --tlb-category-chip-padding: calc(var(--tlb-category-chip-padding-block) + var(--tlb-category-chip-label-offset)) var(--tlb-category-chip-padding-inline) calc(var(--tlb-category-chip-padding-block) - var(--tlb-category-chip-label-offset));
  --tlb-category-chip-title-gap: 4px;
  --tlb-category-chip-inline-gap: var(--spacing-xs);
  --tlb-category-chip-inline-shift: calc(var(--tlb-editorial-title-size) * 0.62 - var(--tlb-category-chip-size) * var(--tlb-lh-head) * 0.5 - var(--tlb-category-chip-padding-block) + var(--tlb-category-chip-title-offset)); /* SUITE 제목 첫 줄의 글자 중심에 맞춘다 */
  --tlb-category-chip-ink: var(--color-text-white);
  /* 글 제목 옆 칩과 구분되는 카드 요약용 작은 칩. 최근 게시물과 게시판 목록이 함께 쓴다. */
  --tlb-category-card-chip-size: var(--tlb-fs-micro);
  --tlb-category-card-chip-padding-block: 1px;
  --tlb-category-card-chip-padding-inline: 6px;
  --tlb-category-card-chip-padding: calc(var(--tlb-category-card-chip-padding-block) + var(--tlb-category-chip-label-offset)) var(--tlb-category-card-chip-padding-inline) calc(var(--tlb-category-card-chip-padding-block) - var(--tlb-category-chip-label-offset));

  /* 모바일 상품상세의 고정 구매바(74px) 위로 상담 버튼을 올리는 공통 여유 높이. */
  --tlb-chat-pdp-clearance: 80px;
  /* 홈 바로가기: 폴드·태블릿에서는 네 열, 넓은 화면에서는 여덟 열.
     아이콘 틀과 메뉴 전체 폭을 각각 제한해 중간 폭에서도 과하게 늘어나지 않는다. */
  --tlb-shortcut-columns: 4;
  --tlb-shortcut-grid-width: calc(var(--tlb-shortcut-columns) * var(--tlb-shortcut-tile-size) + (var(--tlb-shortcut-columns) - 1) * var(--tlb-shortcut-column-gap));
  --tlb-shortcut-tile-size: 80px;
  --tlb-shortcut-icon-ratio: 60%;
  --tlb-shortcut-column-gap: var(--tlb-space-sm);
  --tlb-shortcut-row-gap: var(--tlb-space-md);
  --tlb-shortcut-label-gap: var(--spacing-xs);
  --tlb-shortcut-label-size: var(--tlb-fs-caption);
  --tlb-shortcut-section-padding: var(--tlb-space-md);
  --tlb-review-score-weight: var(--tlb-fw-bold);
  --tlb-review-count-weight: var(--tlb-fw-regular);
  --tlb-review-count-font: var(--tlb-font-body);

  /* 인터뷰·칼럼·매거진·블로그의 공통 읽기 규격. 역할별 크기는 기존 Type System을 참조한다. */
  --tlb-editorial-body-size: var(--tlb-fs-read);
  --tlb-editorial-title-size: var(--tlb-fs-h3);
  --tlb-editorial-h2-size: var(--tlb-fs-h4);
  --tlb-editorial-h3-size: var(--tlb-fs-h5);
  --tlb-editorial-h4-size: var(--tlb-fs-body);
  --tlb-editorial-width: 720px;
  --tlb-editorial-paragraph-gap: var(--tlb-space-sm);
  --tlb-editorial-section-gap: var(--spacing-xl);
  --tlb-editorial-subsection-gap: var(--tlb-space-lg);
  --tlb-editorial-minor-gap: var(--tlb-space-md);

  /* 매거진 헤딩의 기존 보라 밑줄과 교재형 읽기 역할. 값은 여기서만 관리한다. */
  --tlb-editorial-heading-weight: var(--tlb-fw-heavy);
  --tlb-editorial-heading-rule: 2px;
  --tlb-editorial-heading-accent: 60px;
  --tlb-editorial-heading-padding: var(--spacing-xs);
  --tlb-font-problem: "KoPub Batang", "SUIT", serif;
  /* 교재 book-theme.css: 본문 10.5pt / 문제 10pt. 화면 본문 크기에 비례해 환산한다. */
  --tlb-case-body-weight: var(--tlb-fw-regular);
  --tlb-case-body-leading: var(--tlb-lh-body);
  --tlb-case-body-tracking: var(--tlb-ls-body);
  --tlb-case-body-word-break: keep-all;
  --tlb-case-paragraph-gap: var(--tlb-space-md); /* 웹 설명: 짧은 문단 사이 24px */
  --tlb-case-prose-indent: 0; /* 화면에서는 첫 줄 들여쓰기 대신 문단 간격으로 구분한다. */
  --tlb-case-emphasis-weight: var(--tlb-fw-bold);
  --tlb-case-outline-size: var(--tlb-fs-small);
  --tlb-case-outline-leading: var(--tlb-lh-text);
  --tlb-case-option-title-size: var(--tlb-editorial-h4-size);
  --tlb-case-option-title-leading: var(--tlb-lh-head);
  --tlb-case-anchor-offset: 128px;
  --tlb-case-link-target: 44px;
  --tlb-case-problem-size: calc(var(--tlb-editorial-body-size) * 20 / 21);
  --tlb-case-problem-weight: var(--tlb-fw-light);
  --tlb-case-problem-leading: 1.656; /* --option-lh */
  --tlb-case-stem-leading: 1.65; /* p.question-number */
  --tlb-case-stem-weight: var(--tlb-fw-light);
  --tlb-case-stem-gap: calc(var(--tlb-case-problem-size) * 0.498898); /* 1.76mm / 10pt */
  --tlb-case-quotation-leading: 1.72; /* body > blockquote */
  --tlb-case-quotation-paragraph-gap: calc(var(--tlb-case-problem-size) * 0.708661); /* 2.5mm / 10pt */
  --tlb-case-problem-tracking: var(--tlb-ls-body); /* --serif-tracking: -0.02rem */
  --tlb-case-word-spacing: -0.02em; /* 교재 최종 산문 정규화 값. 양쪽 정렬의 어절 확장은 하지 않는다. */
  --tlb-case-quotation-gap: calc(var(--tlb-case-problem-size) * 0.850394); /* 3mm / 10pt */
  --tlb-case-block-gap: var(--tlb-space-lg);
  --tlb-case-block-padding: calc(var(--tlb-case-problem-size) * 0.850394); /* 3mm / 10pt */
  --tlb-case-option-gap: calc(var(--tlb-case-problem-size) * 0.492); /* --option-gap: 4.92pt */
  --tlb-case-option-indent: 1.176em; /* --option-hang: 11.76pt */
  --tlb-case-paper: #f6f4ef;
  --tlb-case-rule: #d6d3cc;

  /* 산문 조판(2026-10-05 대표 지시, 09-30 왼쪽 정렬을 대체): 기본값은 양쪽 정렬, 마지막 줄은 왼쪽.
     어절을 통째로 넘기지 않고 음절 단위로 줄을 바꿔 줄 끝 빈칸을 줄인다. 자간은 고정하고 남는 폭은 띄어쓰기에만 나눈다(글자 사이를 벌리지 않는다).
     제목은 어절 단위 줄바꿈을 유지한다. 가운데 정렬 등 자기 정렬이 있는 곳은 그 값을 쓴다(뿌리에서 상속). */
  --tlb-prose-align: justify;
  --tlb-prose-align-last: left;
  --tlb-prose-word-break: normal;
  --tlb-prose-justify: inter-word;
  /* 좁은 칸(카드 설명 등, 대략 300px 이하)은 한 줄의 띄어쓰기가 적어 양쪽 정렬이 띄어쓰기를 크게 벌린다. 이런 칸은 이 값을 쓴다 */
  --tlb-prose-align-narrow: left;
}

/* 새 설명문은 이 역할 클래스를 사용한다. 기존 라이브 조각과 아임웹 본문은 imweb-fix의 연결 규칙을 받는다. */
.tlb-prose {
  font-family: var(--tlb-font-body);
  line-height: var(--tlb-lh-body);
  letter-spacing: var(--tlb-ls-body);
  font-kerning: normal;
  text-align: var(--tlb-prose-align);
  text-align-last: var(--tlb-prose-align-last);
  text-justify: var(--tlb-prose-justify);
  word-break: var(--tlb-prose-word-break);
  overflow-wrap: break-word;
  line-break: strict;
}

/* 기본값: 우리 조각의 뿌리에 한 번만 준다. 자손은 상속으로 받고, 자기 값이 있으면 그 값을 쓴다.
   :where()는 우선순위가 0이라 어떤 규칙으로든 덮어쓸 수 있다. 새 조각은 뿌리 요소에 tlb-type을 더한다 */
:where(.tlb-type, .tlb-story, .tlb-paper, .tlb-hp, .tlb-intro, .tlb_detail_wrapper, .tlb_common_section, .tlb_top_section, .tlb_unified_section, .tlb_review_section) {
  font-family: var(--tlb-font-body);
  line-height: var(--tlb-lh-compact);
  letter-spacing: var(--tlb-ls-body);
  font-kerning: normal;
  text-align: var(--tlb-prose-align);
  text-align-last: var(--tlb-prose-align-last);
  text-justify: var(--tlb-prose-justify);
  word-break: var(--tlb-prose-word-break);
  line-break: strict;
  overflow-wrap: break-word;
}
:where(.tlb-type, .tlb-story, .tlb-paper, .tlb-hp, .tlb-intro, .tlb_detail_wrapper, .tlb_common_section, .tlb_top_section, .tlb_unified_section, .tlb_review_section) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tlb-font-head);
  line-height: var(--tlb-lh-head);
  letter-spacing: var(--tlb-ls-head);
  word-break: keep-all;
}

/* 역할 클래스: 새 조각에서 그대로 쓴다. 기존 컴포넌트 클래스 안에서는 위 토큰을 직접 쓴다 */
.tlb-t-display, .tlb-t-title, .tlb-t-h2, .tlb-t-h3, .tlb-t-h4, .tlb-t-h5 {
  font-family: var(--tlb-font-head);
  letter-spacing: var(--tlb-ls-head);
}
.tlb-t-display { font-size: var(--tlb-fs-display); line-height: var(--tlb-lh-none); font-weight: var(--tlb-fw-heavy); }
.tlb-t-title { font-size: var(--tlb-fs-title); line-height: var(--tlb-lh-title); font-weight: var(--tlb-fw-heavy); }
.tlb-t-h2 { font-size: var(--tlb-fs-h2); line-height: var(--tlb-lh-title); font-weight: var(--tlb-fw-heavy); }
.tlb-t-h3 { font-size: var(--tlb-fs-h3); line-height: var(--tlb-lh-head); font-weight: var(--tlb-fw-bold); }
.tlb-t-h4 { font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-head); font-weight: var(--tlb-fw-heavy); }
.tlb-t-h5 { font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-head); font-weight: var(--tlb-fw-bold); }
.tlb-t-lead, .tlb-t-read, .tlb-t-body, .tlb-t-small, .tlb-t-meta, .tlb-t-caption, .tlb-t-micro {
  font-family: var(--tlb-font-body);
  font-weight: var(--tlb-fw-regular);
  letter-spacing: var(--tlb-ls-body);
}
.tlb-t-lead { font-size: var(--tlb-fs-lead); line-height: var(--tlb-lh-text); font-weight: var(--tlb-fw-medium); }
.tlb-t-read { font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-read); }
.tlb-t-body { font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-body); }
.tlb-t-small { font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); }
.tlb-t-meta { font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); }
.tlb-t-caption { font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-compact); }
.tlb-t-micro { font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-ui); font-weight: var(--tlb-fw-bold); }

/* Dark Mode Variables */
[data-theme="dark"] {
  /* Colors - Text (Dark Mode) */
  --color-text-title: #f9fafb;
  --color-text-body: #e5e7eb;
  --color-text-light: #9ca3af;
  --color-text-lighter: #6b7280;

  /* Colors - Background (Dark Mode) */
  --color-background: #1a1a1a;
  --color-background-dark: #0a0a0a;
  --color-background-card: #2d2d2d;
  --color-background-hover: #333333;
  --color-background-gradient-light: #2a2a2a;
  --color-background-gradient-dark: #1a1a1a;

  /* Colors - Border (Dark Mode) */
  --color-border: #404040;
  --color-border-light: #333333;
  --color-border-dark: #4d4d4d;
}

/* ==========================================================================
   Typography System: 옛 조각(tlb_section_title 등)용 클래스
   새 조각은 위 Type System의 역할 클래스(.tlb-t-*)와 토큰을 쓴다. 이 블록은 옛 조각이 남아 있는 동안만 둔다
   ========================================================================== */

/* Headings */
.tlb_h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.tlb_h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.tlb_h3 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
}

.tlb_h4 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
}

.tlb_h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 10px;
}

.tlb_h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Body Text */
.tlb_t,
.tlb_p {
  font-size: 16px;
  line-height: 1.75;
  color: currentColor;
}

.tlb_t_sm {
  font-size: 14px;
  line-height: 1.5;
}

.tlb_t_lg {
  font-size: 18px;
  line-height: 1.75;
}

/* ==========================================================================
   Section Title System
   ========================================================================== */

/* Section Label - 작은 상단 라벨 */
.tlb_section_label {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Section Title - 메인 섹션 제목 */
.tlb_section_title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text-title);
  margin-bottom: 16px;
}

/* Section Title - Large 버전 */
.tlb_section_title_lg {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-text-title);
  margin-bottom: 20px;
}

/* Section Title - Small 버전 */
.tlb_section_title_sm {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-text-title);
  margin-bottom: 12px;
}

/* Section Description - 섹션 설명 */
.tlb_section_desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-body);
  margin-bottom: 24px;
}

/* Section Group - 레이블 + 타이틀 + 설명 컨테이너 */
.tlb_section_group {
  margin-bottom: 32px;
  text-align: left;
}

.tlb_section_group.center {
  text-align: center;
}

.tlb_section_group.center .tlb_section_label {
  display: block;
  text-align: center;
}

/* ==========================================================================
   Button System
   ========================================================================== */

/* Base Button */
.tlb_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'SUIT', sans-serif;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Button Sizes */
.tlb_btn_sm {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.4;
}

.tlb_btn_md {
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.5;
}

.tlb_btn_lg {
  padding: 16px 32px;
  font-size: 18px;
  line-height: 1.6;
  min-width: 200px;
}

/* Primary Button */
.tlb_btn_primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.tlb_btn_primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}

.tlb_btn_primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

/* Secondary Button */
.tlb_btn_secondary {
  background: #ffffff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

.tlb_btn_secondary:hover {
  background: rgba(124, 58, 237, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.tlb_btn_secondary:active {
  transform: translateY(0);
  background: rgba(124, 58, 237, 0.1);
}

/* Button Group */
.tlb_btn_group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tlb_t_xl {
  font-size: 20px;
  line-height: 1.75;
}

/* Font Weights */
.tlb_fw_light { font-weight: 300; }
.tlb_fw_normal { font-weight: 400; }
.tlb_fw_medium { font-weight: 500; }
.tlb_fw_semibold { font-weight: 600; }
.tlb_fw_bold { font-weight: 700; }

/* Text Alignment */
.tlb_text_left { text-align: left !important; }
.tlb_text_center { text-align: center !important; }
.tlb_text_right { text-align: right !important; }

/* ==========================================================================
   List System
   ========================================================================== */

/* Unordered Lists */
.tlb_ul {
  list-style: none;
  padding-left: 0;
  margin: 24px 0;
}

.tlb_ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.75;
}

.tlb_ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: currentColor;
  font-weight: 700;
}

/* Ordered Lists */
.tlb_ol {
  list-style: none;
  counter-reset: tlb-counter;
  padding-left: 0;
  margin: 24px 0;
}

.tlb_ol li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  line-height: 1.75;
  counter-increment: tlb-counter;
}

.tlb_ol li::before {
  content: counter(tlb-counter) ".";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: currentColor;
}

/* Description Lists */
.tlb_dl {
  margin: 24px 0;
}

.tlb_dl dt {
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 8px;
}

.tlb_dl dd {
  margin-left: 0;
  margin-bottom: 16px;
  padding-left: 24px;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Color Utilities
   ========================================================================== */

/* Text Colors */
.lbc_black { color: #000000 !important; }
.lbc_white { color: #ffffff !important; }
.lbc_gray_50 { color: #f9fafb !important; }
.lbc_gray_100 { color: #f3f4f6 !important; }
.lbc_gray_200 { color: #e5e7eb !important; }
.lbc_gray_300 { color: #d1d5db !important; }
.lbc_gray_400 { color: #9ca3af !important; }
.lbc_gray_500 { color: #6b7280 !important; }
.lbc_gray_600 { color: #4b5563 !important; }
.lbc_gray_700 { color: #374151 !important; }
.lbc_gray_800 { color: #1f2937 !important; }
.lbc_gray_900 { color: #111827 !important; }

/* Background Colors */
.lbg_black { background-color: #000000 !important; }
.lbg_white { background-color: #ffffff !important; }
.lbg_gray_50 { background-color: #f9fafb !important; }
.lbg_gray_100 { background-color: #f3f4f6 !important; }
.lbg_gray_200 { background-color: #e5e7eb !important; }
.lbg_gray_300 { background-color: #d1d5db !important; }
.lbg_gray_400 { background-color: #9ca3af !important; }
.lbg_gray_500 { background-color: #6b7280 !important; }
.lbg_gray_600 { background-color: #4b5563 !important; }
.lbg_gray_700 { background-color: #374151 !important; }
.lbg_gray_800 { background-color: #1f2937 !important; }
.lbg_gray_900 { background-color: #111827 !important; }

/* ==========================================================================
   Button Component
   ========================================================================== */

.tlb_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--tlb-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--tlb-transition-base);
  white-space: nowrap;
}

.tlb_btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--tlb-shadow-md);
}

.tlb_btn:active {
  transform: translateY(0);
}

/* Button Variants */
.tlb_btn_primary {
  background-color: #000000;
  color: #ffffff;
}

.tlb_btn_primary:hover {
  background-color: #1f2937;
}

.tlb_btn_secondary {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e5e7eb;
}

.tlb_btn_secondary:hover {
  background-color: #f9fafb;
}

.tlb_btn_outline {
  background-color: transparent;
  color: #000000;
  border: 2px solid #000000;
}

.tlb_btn_outline:hover {
  background-color: #000000;
  color: #ffffff;
}

/* Button Sizes */
.tlb_btn_sm {
  padding: 8px 16px;
  font-size: 14px;
}

.tlb_btn_lg {
  padding: 16px 32px;
  font-size: 18px;
}

.tlb_btn_xl {
  padding: 20px 40px;
  font-size: 20px;
}

/* ==========================================================================
   Card Component
   ========================================================================== */

.tlb_card {
  background-color: #ffffff;
  border-radius: var(--tlb-radius-lg);
  padding: 24px;
  box-shadow: var(--tlb-shadow-sm);
  transition: all var(--tlb-transition-base);
}

.tlb_card:hover {
  box-shadow: var(--tlb-shadow-md);
}

.tlb_card_header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.tlb_card_title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.tlb_card_body {
  margin-bottom: 16px;
}

.tlb_card_footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

/* Margin */
.tlb_m_0 { margin: 0 !important; }
.tlb_m_xs { margin: var(--tlb-space-xs) !important; }
.tlb_m_sm { margin: var(--tlb-space-sm) !important; }
.tlb_m_md { margin: var(--tlb-space-md) !important; }
.tlb_m_lg { margin: var(--tlb-space-lg) !important; }
.tlb_m_xl { margin: var(--tlb-space-xl) !important; }

.tlb_mt_0 { margin-top: 0 !important; }
.tlb_mt_xs { margin-top: var(--tlb-space-xs) !important; }
.tlb_mt_sm { margin-top: var(--tlb-space-sm) !important; }
.tlb_mt_md { margin-top: var(--tlb-space-md) !important; }
.tlb_mt_lg { margin-top: var(--tlb-space-lg) !important; }
.tlb_mt_xl { margin-top: var(--tlb-space-xl) !important; }

.tlb_mb_0 { margin-bottom: 0 !important; }
.tlb_mb_xs { margin-bottom: var(--tlb-space-xs) !important; }
.tlb_mb_sm { margin-bottom: var(--tlb-space-sm) !important; }
.tlb_mb_md { margin-bottom: var(--tlb-space-md) !important; }
.tlb_mb_lg { margin-bottom: var(--tlb-space-lg) !important; }
.tlb_mb_xl { margin-bottom: var(--tlb-space-xl) !important; }

/* Padding */
.tlb_p_0 { padding: 0 !important; }
.tlb_p_xs { padding: var(--tlb-space-xs) !important; }
.tlb_p_sm { padding: var(--tlb-space-sm) !important; }
.tlb_p_md { padding: var(--tlb-space-md) !important; }
.tlb_p_lg { padding: var(--tlb-space-lg) !important; }
.tlb_p_xl { padding: var(--tlb-space-xl) !important; }

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

/* Display */
.tlb_block { display: block; }
.tlb_inline_block { display: inline-block; }
.tlb_inline { display: inline; }
.tlb_flex { display: flex !important; }
.tlb_inline_flex { display: inline-flex; }
.tlb_grid { display: grid; }
.tlb_hidden { display: none; }

/* Flexbox */
.tlb_flex_row { flex-direction: row; }
.tlb_flex_col { flex-direction: column !important; }
.tlb_flex_wrap { flex-wrap: wrap; }
.tlb_flex_nowrap { flex-wrap: nowrap; }

.tlb_justify_start { justify-content: flex-start !important; }
.tlb_justify_center { justify-content: center !important; }
.tlb_justify_end { justify-content: flex-end !important; }
.tlb_justify_between { justify-content: space-between !important; }
.tlb_justify_around { justify-content: space-around !important; }

.tlb_items_start { align-items: flex-start !important; }
.tlb_items_center { align-items: center !important; }
.tlb_items_end { align-items: flex-end !important; }
.tlb_items_stretch { align-items: stretch !important; }

/* Gap */
.tlb_gap_xs { gap: var(--tlb-space-xs) !important; }
.tlb_gap_sm { gap: var(--tlb-space-sm) !important; }
.tlb_gap_md { gap: var(--tlb-space-md) !important; }
.tlb_gap_lg { gap: var(--tlb-space-lg) !important; }
.tlb_gap_xl { gap: var(--tlb-space-xl) !important; }

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */

@media (max-width: 768px) {
  .tlb_h1 { font-size: 32px; }
  .tlb_h2 { font-size: 28px; }
  .tlb_h3 { font-size: 24px; }
  .tlb_h4 { font-size: 20px; }

  .tlb_hidden_mobile { display: none; }
}

@media (min-width: 769px) {
  .tlb_hidden_desktop { display: none; }
}

/* ==========================================================================
   Scroll Animations
   ========================================================================== */

/* Fade In Up Animation */
@keyframes lb_fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tlb_animate_fadeInUp {
  opacity: 0;
  animation-fill-mode: both;
  animation-duration: var(--tlb-animation-duration);
  animation-timing-function: var(--tlb-animation-easing);
}

.tlb_animate_fadeInUp.tlb_animate_visible {
  animation-name: lb_fadeInUp;
}


/* === MERGED FROM tlb-headerfooter.css === */
/* ============================================
   TLB Header & Footer Styles
   ============================================ */

/* Footer Wrapper */
.tlb_footer_wrapper {
    background-color: #f5f5f5;
    padding: 60px 20px 40px;
    font-family: var(--tlb-font-body);
    color: #333;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
}

.tlb_footer_container {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Section Titles */
.tlb_footer_section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.tlb_footer_title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    border-bottom: 2px solid #333;
    padding-bottom: 12px;
}

.tlb_footer_title_ko {
    font-family: var(--tlb-font-head);
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 0;
    letter-spacing: -0.5px;
}

.tlb_footer_title_en {
    font-size: 11px;
    font-weight: 500;
    color: #888;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Customer Center Section - Enhanced Design */
.tlb_footer_customer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tlb_footer_customer_item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tlb_footer_customer_main {
    font-family: var(--tlb-font-head);
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    display: block;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.tlb_footer_customer_desc {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    display: block;
}

.tlb_footer_customer_sub {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    padding: 12px 16px;
    border-left: 4px solid #4a90e2;
    margin-top: 8px;
    background-color: #f0f4f8;
    border-radius: 4px;
}

/* Table Layout */
.tlb_footer_table {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.tlb_footer_table_row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tlb_footer_table_label {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
    letter-spacing: -0.3px;
}

.tlb_footer_table_content {
    font-size: 14px;
    color: #555;
}

/* List Styles */
.tlb_footer_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tlb_footer_list li {
    padding-left: 20px;
    position: relative;
    line-height: 1.8;
    font-size: 14px;
    color: #555;
}

.tlb_footer_list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #999;
    font-weight: bold;
    font-size: 16px;
}

/* Highlight Text */
.tlb_footer_highlight {
    color: #e74c3c;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tlb_footer_wrapper {
        padding: 40px 16px 30px;
    }

    .tlb_footer_container {
        gap: 40px;
    }

    .tlb_footer_title_ko {
        font-size: 18px;
    }

    .tlb_footer_customer_main {
        font-size: 16px;
    }

    .tlb_footer_customer_desc,
    .tlb_footer_table_content {
        font-size: 13px;
    }

    .tlb_footer_table_label {
        font-size: 15px;
    }

    .tlb_footer_customer_item {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .tlb_footer_wrapper {
        padding: 30px 12px 20px;
    }

    .tlb_footer_container {
        gap: 30px;
    }

    .tlb_footer_title_ko {
        font-size: 17px;
    }

    .tlb_footer_list li {
        font-size: 13px;
    }

    .tlb_footer_customer_item {
        padding: 16px;
    }
}

/* ============================================
   Product Top Notice Section (New Design)
   ============================================ */
.tlb_product_notice_wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'SUIT', -apple-system, sans-serif;
    background-color: #1a1a1a;
}

.tlb_notice_box {
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
    text-align: center;
    background-color: #1a1a1a;
    color: #ffffff;
}

/* Header: Logo + Title + Icon */
.tlb_notice_top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}

.tlb_notice_logo_small {
    width: 32px;
    /* Adjust based on actual logo ratio */
    height: auto;
}

.tlb_notice_title_large {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1;
}

.tlb_notice_icon {
    font-size: 32px;
    line-height: 1;
}

/* Main Text */
.tlb_notice_main_text {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 24px;
}

.tlb_notice_sub_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 600;
}

/* Purple Highlight Bar */
.tlb_notice_highlight_bar {
    display: inline-block;
    background-color: #962de3;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 30px;
    margin-bottom: 40px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Divider */
.tlb_notice_divider {
    width: 100%;
    max-width: 800px;
    height: 1px;
    background-color: #333333;
    border: none;
    margin: 0 auto 30px;
}

/* List Area */
.tlb_notice_list {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tlb_notice_list li {
    font-size: 15px;
    color: #aaaaaa;
    line-height: 1.6;
    position: relative;
    padding-left: 14px;
    word-break: keep-all;
}

.tlb_notice_list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: #aaaaaa;
}

/* E-book specific */
.tlb_solve_img_inline {
    height: 20px;
    vertical-align: middle;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .tlb_notice_box {
        padding: 40px 20px;
    }

    .tlb_notice_title_large {
        font-size: 26px;
    }

    .tlb_notice_main_text,
    .tlb_notice_sub_row {
        font-size: 20px;
    }

    .tlb_notice_highlight_bar {
        font-size: 15px;
        padding: 12px 20px;
        width: 100%;
    }

    .tlb_notice_list li {
        font-size: 14px;
    }
}


/* ==========================================================================
   Grid & Border Extended Utilities
   ========================================================================== */
.tlb_grid_cols_table { grid-template-columns: 1fr 2fr 2fr; }
.tlb_grid_cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.tlb_border { border: 1px solid var(--color-border); }
.tlb_border_2 { border: 2px solid var(--color-border); }
.tlb_border_primary { border-color: var(--color-primary); }
.tlb_border_black { border-color: #000; }
.tlb_border_b { border-bottom: 1px solid var(--color-border); }
.tlb_border_b_2 { border-bottom: 2px solid var(--color-border); }
.tlb_radius_md { border-radius: var(--tlb-radius-md); }

/* ==========================================================================
   Premium Design Tokens (Trendy UI/UX)
   ========================================================================== */

/* 1. Soft Shadows & Depth */
.tlb_shadow_soft {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
}
.tlb_shadow_soft_hover {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tlb_shadow_soft_hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
}
.tlb_shadow_glow_primary {
    box-shadow: 0 0 30px rgba(150, 45, 227, 0.15);
}

/* 2. Premium Buttons */
.tlb_btn_premium {
    background: linear-gradient(135deg, #962de3 0%, #5f17d1 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    box-shadow: 0 8px 20px rgba(150, 45, 227, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.tlb_btn_premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(150, 45, 227, 0.35);
}

/* 3. Cards & Badges */
.tlb_card_premium {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    overflow: hidden;
}
.tlb_badge_premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: rgba(150, 45, 227, 0.08);
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 700;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}
.tlb_badge_dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

/* 4. Gradient Text */
.tlb_text_gradient {
    background: linear-gradient(135deg, #4A86E8 0%, #962de3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.tlb_text_gradient_primary {
    background: linear-gradient(135deg, #962de3 0%, #5f17d1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* 5. Typography Utils */
.tlb_tracking_tight { letter-spacing: -0.03em; }
.tlb_tracking_normal { letter-spacing: -0.01em; }
.tlb_leading_tight { line-height: 1.3; }
.tlb_leading_relaxed { line-height: 1.8; }

/* 6. Clean Layout Containers */
.tlb_section {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
.tlb_container {
    width: 100%;
    max-width: var(--content-max-width, 800px);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ==========================================================================
   7. PREMIUM COMPONENT TOKENS (SPARTA/CODEIT STYLE)
   ========================================================================== */

:root {
    /* Slate Color Scheme for High Contrast & Modern Feel */
    --color-slate-50:  #F8FAFC;
    --color-slate-100: #F1F5F9;
    --color-slate-200: #E2E8F0;
    --color-slate-300: #CBD5E1;
    --color-slate-400: #94A3B8;
    --color-slate-500: #64748B;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1E293B;
    --color-slate-900: #0F172A;
}

/* Color Utilities */
.lbg_slate_50  { background-color: var(--color-slate-50) !important; }
.lbg_slate_100 { background-color: var(--color-slate-100) !important; }
.lbc_slate_500 { color: var(--color-slate-500) !important; }
.lbc_slate_600 { color: var(--color-slate-600) !important; }
.lbc_slate_700 { color: var(--color-slate-700) !important; }
.lbc_slate_900 { color: var(--color-slate-900) !important; }

/* Premium Cards */
.tlb_card_pro {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* very soft */
    border: 1px solid var(--color-slate-100);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tlb_card_pro:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
}

/* Premium Primary Call to Action Button */
.tlb_btn_pro_primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6200EA 0%, #3F00E7 100%);
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 16px -4px rgba(98, 0, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    line-height: 1.2;
}

.tlb_btn_pro_primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -4px rgba(98, 0, 234, 0.5);
    background: linear-gradient(135deg, #7114F5 0%, #4D0BF2 100%);
}

.tlb_btn_pro_secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    border-radius: 12px;
    background: var(--color-slate-50);
    color: var(--color-slate-700) !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--color-slate-200);
    transition: all 0.2s ease;
}

.tlb_btn_pro_secondary:hover {
    background: var(--color-slate-100);
    color: var(--color-slate-900) !important;
}

/* Extended Typography for Sections */
.tlb_subhead {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* Missing Slate Color Classes */
.lbc_slate_300 { color: var(--color-slate-300) !important; }
.lbc_slate_400 { color: var(--color-slate-400) !important; }
.lbc_slate_800 { color: var(--color-slate-800) !important; }
.lbg_slate_200 { background-color: var(--color-slate-200) !important; }
.lbg_slate_900 { background-color: var(--color-slate-900) !important; }
.tlb_bg_white { background-color: #ffffff !important; }

/* Grid improvements */
.tlb_grid_cards_col3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 768px) {
    .tlb_grid_cards_col3 {
        grid-template-columns: 1fr;
    }
}

/* 좁은 화면의 긴 글도 본문 기본 크기를 쓴다. */
@media (max-width: 480px) {
  :root {
    --tlb-shortcut-grid-width: 400px; /* 모바일 묶음 폭에 여유를 준다 */
    --tlb-shortcut-tile-size: 72px;
    --tlb-shortcut-column-gap: var(--spacing-xs);
    --tlb-shortcut-label-size: var(--tlb-fs-micro);
    --tlb-shortcut-section-padding: var(--tlb-space-sm);
  }
}
@media (max-width: 360px) {
  :root {
    --tlb-shortcut-label-size: var(--tlb-fs-tiny);
  }
}
@media (min-width: 960px) {
  :root {
    --tlb-shortcut-columns: 8;
    --tlb-shortcut-grid-width: 896px; /* PC는 여유 있는 이전 메뉴 폭 유지 */
    --tlb-shortcut-column-gap: var(--tlb-space-sm);
  }
}
@media (max-width: 767px) {
  :root {
    --tlb-card-title-size: var(--tlb-fs-body);
    --tlb-category-chip-size: var(--tlb-fs-micro);
    --tlb-category-card-chip-size: var(--tlb-fs-tiny);
    --tlb-category-chip-padding-block: 1px;
    --tlb-category-chip-padding-inline: 8px;
    --tlb-category-chip-label-offset: 1px;
    --tlb-editorial-body-size: var(--tlb-fs-body);
  }
}

/* BEGIN Popup proportional type 2026-10-03 */
:root {
  /* 420px poster reference: title 38.4, copy 14, caption 13, CTA 16, controls 30. */
  --tlb-popup-fs-title:9.142857143cqw;
  --tlb-popup-fs-copy:3.333333333cqw;
  --tlb-popup-fs-caption:3.095238095cqw;
  --tlb-popup-fs-action:3.809523810cqw;
  --tlb-popup-fs-control:7.142857143cqw;
}
/* END Popup proportional type */