/* ============================================================
   AICONPL — 토큰 · 리셋 · 공통
   색을 바꾸려면 :root 의 변수만 고치십시오.
   ============================================================ */

:root{
  /* 브랜드 */
  --brand:        #6C2BF2;
  --brand-ink:    #5312CE;
  --brand-soft:   #F3EEFE;
  --accent:       #8CE99A;   /* 보조 초록 — 폼 탭, 강조 */
  --accent-ink:   #13622A;

  /* 중립 (라이트) */
  --ink:          #0E0E10;
  --ink-2:        #3A3A40;
  --muted:        #76767E;
  --line:         #E7E6EB;
  --surface:      #FFFFFF;
  --surface-2:    #F7F7F9;

  /* 다크 구간 */
  --d-bg:         #0B0B0D;
  --d-bg-2:       #141417;
  --d-ink:        #FFFFFF;
  --d-ink-2:      #B9B9C2;
  --d-line:       #26262C;

  /* 치수 */
  --r:            12px;
  --r-lg:         16px;
  --pill:         999px;
  --wrap:         1200px;
  --nav-h:        60px;

  --f: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
       system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* 다크 섹션 안에서 토큰을 갈아끼운다 */
[data-tone="dark"]{
  --ink: var(--d-ink);
  --ink-2: var(--d-ink-2);
  --muted: #8E8E99;
  --line: var(--d-line);
  --surface: var(--d-bg-2);
  --surface-2: #1B1B20;
  background: var(--d-bg);
  color: var(--d-ink);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px) }
body{
  margin:0; font-family:var(--f); color:var(--ink); background:var(--surface);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 한글은 어절 단위로 줄바꿈 — 없으면 '만드는'이 '만/드는'으로 쪼개집니다 */
  word-break:keep-all; overflow-wrap:break-word;
}
img,svg,video{ display:block; max-width:100% }
button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer; background:none; border:0 }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none; margin:0; padding:0 }
h1,h2,h3,p,figure{ margin:0 }
summary::-webkit-details-marker{ display:none }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px }
.br-pc{ display:inline }

/* ---------- 섹션 공통 ---------- */
section{ padding:96px 0 }
.sec__title{
  font-size:34px; font-weight:700; line-height:1.35; text-align:center;
  letter-spacing:-.02em; color:var(--ink);
}
.sec__lead{
  margin-top:14px; text-align:center; font-size:15px; color:var(--muted); line-height:1.75;
}
.sec__title--left,.sec__lead--left{ text-align:left }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:48px; padding:0 26px; border-radius:var(--pill);
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.btn:active{ transform:scale(.98) }
.btn--brand{ background:var(--brand); color:#fff }
.btn--brand:hover{ background:var(--brand-ink) }
.btn--ghost{ background:transparent; color:#fff }
.btn--ghost:hover{ background:rgba(255,255,255,.12) }
.btn--sm{ height:40px; padding:0 20px; font-size:14px }
.btn[disabled]{ opacity:.45; pointer-events:none }

/* ---------- 접근성 ---------- */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:6px;
}
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important }
}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  section{ padding:64px 0 }
  .sec__title{ font-size:24px }
  .sec__lead{ font-size:14px }
  .br-pc{ display:none }
  .wrap{ padding:0 16px }
}