/* 페이지 기본 스타일. 기존 style 위치에서 읽어 우선순위를 유지한다. */
:root {
    --bg-color:var(--canvas);
    --surface-color:var(--ground-hi);
    --text-main:var(--ink);
    --text-light:var(--ink);
    --border-color:var(--rule);
    --accent-color:var(--ink);
    --accent-light: var(--selected-fill);
    --transition: background-color var(--t-2) var(--ease-out),border-color var(--t-2) var(--ease-out),color var(--t-2) var(--ease-out),box-shadow var(--t-2) var(--ease-out),transform var(--t-2) var(--ease-out),opacity var(--t-2) var(--ease-out);
    --font-sans:var(--font);
    --font-mono:var(--font);
    --font-serif:var(--font);
    --type-display: var(--fs-display);
    --type-h2: var(--fs-h2);
    --type-h3: var(--fs-h3);
    --type-body-l: var(--fs-lead);
    --type-body: var(--fs-body);
    --type-label: var(--fs-caption);
    --type-meta: var(--fs-caption);
    --nav-bg:color-mix(in srgb,var(--canvas) 88%,transparent);
  }

  /* 다크 — 테마 세터가 없어 그동안 도달 불가였던 블록.
     --text-light 는 #71727F 였는데 canvas var(--ink) 위에서 3.6:1(AA 미달)이라
     var(--ink-2) 로 올렸다. --action-text/--nav-bg 는 아래 하드코딩 제거용 신규 토큰. */
  [data-theme="dark"] {
    /* --accent-color 는 59곳에서 '텍스트'로 쓰인다(.badge/.step-num/.cred-num/
       .brand-tab…). 옛 #575866 은 surface 위 1.8~2.5:1 로 사실상 안 보였다.
       배경으로 쓰이는 8곳은 전부 글자 없는 ::after 밑줄 바라 밝아도 안전하다. */
  }


  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html { overflow-x: hidden; overflow-x: clip; }

  body {
    font-family: var(--font);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .container { margin: 0 auto; }

  section {
    padding-block: var(--section-space);
  }

  /* Header & Navigation */
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-fill);
    box-shadow: none;
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--rule);
  }
  .xk-subbar {
    background: var(--header-fill);
    box-shadow: none;
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  [id], h1, h2, h3, .sec-title { scroll-margin-top: calc(var(--xk-gnav-h, var(--space-7)) + var(--space-8)); }

  .header-inner {
    max-width: 1280px;
    margin: 0 auto;
    height: 68px;
    padding: 0 var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
  }

  .brand-group {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
  }

  .brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: var(--transition);
  }

  .brand-link img {
    display: block;
    width: auto;
    height: 53px;
  }

  .brand-link:hover {
    opacity: 0.8;
  }

  /* Dropdown Navigation */
  .nav-menu {
    display: flex;
    gap: var(--space-6);
    align-items: center;
  }

  .nav-item {
    position: relative;
  }

  .nav-link {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: var(--fs-small);
    padding: var(--space-3) 0;
    display: block;
    transition: color var(--t-2) var(--ease-out);
  }

  .nav-link:hover {
    color: var(--accent-color);
  }

  .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-float);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out), visibility var(--t-2) var(--ease-out);
    display: flex;
    flex-direction: column;
    padding: var(--space-2) 0;
  }

  .nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .dropdown a {
    text-decoration: none;
    color: var(--ink);
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-small);
    font-weight: 500;
    transition: background var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out);
    text-align: center;
    white-space: nowrap;
  }

  .dropdown a:hover {
    background: var(--bg-color);
    color: var(--accent-color);
  }

  /* Hero Section */
  .hero {
    position: relative;
    text-align: center;
  }

  .badge {
    display: inline-block;
    font-family: var(--font);
    font-size: var(--type-meta);
    font-weight: 500;
    color: var(--accent-color);
    background-color: var(--accent-light);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-input);
    margin-bottom: var(--space-5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .hero h1 {
    font-size: var(--type-display);
    font-family: var(--font);
    font-weight: 450;
    line-height: 1.16;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-5);
    color: var(--text-main);
  }

  .hero p {
    font-size: var(--type-body-l);
    color: var(--ink);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.72;
    word-break: keep-all;
  }

  .hero-actions {
    margin-top: var(--space-6);
  }

  /* Section Titles */
  .sec-title {
    font-size: var(--type-h2);
    font-family: var(--font);
    text-align: center;
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
    line-height: 1.4;
    word-break: keep-all;
  }

  .sec-desc {
    text-align: center;
    color: var(--ink);
    font-size: var(--type-body-l);
    margin-bottom: var(--space-7);
    line-height: 1.72;
    word-break: keep-all;
  }

  /* Pain Points */
  /* pain-points 면 색은 .band-paper */

  .pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .pain-card {
    background: var(--bg-color);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .pain-icon {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: var(--space-1);
  }

  .pain-text {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--text-main);
    word-break: keep-all;
    line-height: 1.5;
  }

  .pain-text strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--text-main);
    font-weight: 600;
  }

  .pain-text span {
    color: var(--ink);
    font-size: var(--fs-body);
  }

  /* Roadmap */
  .roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .roadmap-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    box-shadow: 0 0 0 1px var(--line), var(--shadow-float);
    transition: var(--transition);
  }

  .roadmap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-float);
  }

  .roadmap-level {
    display: inline-block;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ink);
    background: var(--bg-color);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-input);
    margin-bottom: var(--space-4);
  }

  .roadmap-card h3 {
    font-size: var(--fs-lead);
    font-weight: 600;
    margin-bottom: var(--space-3);
  }

  .roadmap-card p {
    color: var(--ink);
    font-size: var(--fs-body);
    word-break: keep-all;
  }

  /* Curriculum / Use Cases */
  /* curriculum 면 색은 .band-paper */

  .curr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
  }

  .curr-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .curr-kicker {
    font-family: var(--font);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  .curr-card h4 {
    font-size: var(--fs-lead);
    font-weight: 600;
    line-height: 1.4;
    word-break: keep-all;
    color: var(--text-main);
  }

  .curr-card p {
    font-size: var(--fs-body);
    color: var(--ink);
    word-break: keep-all;
  }

  #cases {
    scroll-margin-top: calc(var(--xk-gnav-h, var(--space-7)) + var(--space-8));
    padding-top: var(--space-7);
  }

  #cases .sec-desc { margin-bottom: var(--space-6); }

  .feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .feat-card {
    padding: var(--space-4) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .feat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .feat-who {
    font-family: var(--font);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
  }


  .feat-card h3 {
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    word-break: keep-all;
    color: var(--text-main);
  }

  .feat-card p {
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--ink);
    word-break: keep-all;
  }



  .more-row {
    margin-top: var(--space-5);
    text-align: center;
  }

  .cases-expand {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .feat-extra { display: none; }
  .cases-expand:checked ~ .feat-grid .feat-extra { display: flex; }
  .cases-expand:checked ~ .more-row .when-closed { display: none; }
  .cases-expand:not(:checked) ~ .more-row .when-open { display: none; }

  .cases-toggle { cursor: pointer; user-select: none; }
  .cases-expand:focus-visible ~ .more-row .cases-toggle {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
  }

  /* Benefits */

  /* AI 인재 로드맵 진입 — 도입보다 오래 남는 것은 사람이다 */
  .talent {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-7) var(--space-6);
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: var(--space-6);
    align-items: center;
  }
  .talent .sec-title, .talent .sec-desc { text-align: left; margin-bottom: 0; }
  .talent .sec-desc { margin-top: var(--space-4); }
  .talent-actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .talent-steps { display: flex; flex-direction: column; gap: var(--space-3); }
  .talent-step {
    display: flex; align-items: baseline; gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
  }
  .talent-step .n {
    font-family: var(--font); font-size: var(--fs-small); font-weight: 600;
    letter-spacing: .08em; color: var(--text-light); flex: 0 0 auto;
  }
  .talent-step b { font-size: var(--fs-body); color: var(--text-main); }
  .talent-step span { display: block; font-size: var(--fs-small); color: var(--text-light); margin-top: var(--space-1); }
  @media (max-width: 900px) { .talent { grid-template-columns: 1fr; padding: var(--space-6) var(--space-5); gap: var(--space-6); } }

  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .benefit-card { text-align: center; padding: var(--space-6) var(--space-5); }

  .benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-float);
  }

  .benefit-number {
    font-size: var(--fs-h1);
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: var(--space-2);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .benefit-card h3 {
    font-size: var(--fs-lead);
    font-weight: 600;
    margin-bottom: var(--space-3);
  }

  .benefit-card p {
    color: var(--ink);
    font-size: var(--fs-body);
    word-break: keep-all;
  }

  /* Team Section */
  .team-section {
    /* 상단 헤이즈는 토큰으로 — 라이트에선 기존과 같은 rgba(234,234,238,.7),
       다크에선 --accent-light 가 미광이라 옅은 하이라이트로 내려앉는다.
       (하드코딩이던 시절엔 다크에서 밝은 띠가 그대로 드러났다.) */
    background:
      var(--ground-hi);
  }

  .team-shell { margin: 0 auto; }

  /* Team — 카드·그리드 기준은 css/team.css (홈과 한 벌). 여기에 다시 만들지 마라. */

  .button-group {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-small);
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
  }

  /* 재질은 light.css .btn-primary / .x-btn */

  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-float);
  }

  /* Floating CTA — 위치만. 재질은 .x-btn.btn-primary */
  .floating-cta {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 1000;
    gap: var(--space-2);
  }

  /* 히어로·끝 CTA 가 보일 때는 접힌다(ax.js). 같은 문의 버튼이 본문에 있어 손실 없음. */
  .floating-cta.is-idle { opacity: 0; visibility: hidden; transform: translateY(8px); }

  @media (max-width: 1080px) {
    .team-section .sec-desc { white-space: normal; }
    /* .team-grid 반응형은 css/team.css */
  }

  @media (max-width: 768px) {
    section { padding: var(--space-8) 0; }
    .hero { padding: var(--space-8) 0 var(--space-8); }
    .pain-grid, .roadmap-grid, .benefits-grid { grid-template-columns: 1fr; }
    .feat-grid { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: var(--fs-h2); }
    .floating-cta {
      bottom: 24px;
      right: 24px;
      padding: var(--space-3) var(--space-5);
      font-size: var(--fs-small);
    }
    .header-inner { height: auto; padding: var(--space-3) var(--space-5); flex-direction: column; align-items: flex-start; gap: var(--space-4); }
    .brand-group { gap: var(--space-3); flex-wrap: wrap; }
    .brand-link img { height: 36px; }

    .nav-menu { width: 100%; gap: var(--space-3) var(--space-5); justify-content: flex-start; flex-wrap: wrap; }
    .nav-link { font-size: var(--fs-small); }
    .dropdown { min-width: 140px; }
    .dropdown a { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); }
    .team-section .sec-desc { white-space: normal; }
    /* .team-grid / .team-card 반응형은 css/team.css */
  }

  @media (max-width: 560px) {
    .feat-grid { grid-template-columns: 1fr; }
  }

  /* 컨테이너(1120px) 바깥 여백이 버튼 폭보다 좁아지는 구간 — 라벨을 접어 원형
     아이콘만 남긴다(덮는 폭 145px → 48px). 이름은 aria-label 이 대신한다.
     경계값: 라벨형은 뷰포트 1314px, 아이콘형은 1120px 아래에서 본문과 겹친다
     → 1320px 부터 접어야 1120px 까지는 아예 겹치지 않는다.
     위 폭별 padding 규칙보다 뒤에 둬야 이긴다. */
  @media (max-width: 1320px) {
    .floating-cta { padding: var(--space-4); }
    .floating-cta .fc-label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
  }

/* 링크·현재 위치 인디케이터. --point 값은 tokens.css 가 선언한다. */
.text-link, a.more, .link-arrow, .ilink { color:var(--ink); }
.text-link:hover, a.more:hover, .link-arrow:hover, .ilink:hover { color:var(--ink); }
main p > a:not(.btn):not([class*="btn"]), main li > a:not(.btn):not([class*="btn"]),
article p > a:not(.btn):not([class*="btn"]), .prose a:not(.btn) { color:var(--ink); text-underline-offset:3px; }
main p > a:not(.btn):hover, main li > a:not(.btn):hover, article p > a:not(.btn):hover { color:var(--ink); }