/*
 * AUIGrid 첫 화면 스타일
 *
 * 구성 순서
 *   1. 디자인 토큰 (색상, 경계선)
 *   2. 기본 요소
 *   3. 사이트 헤더
 *   4. 히어로 (페이지 제목)
 *   5. 밴드형 대용량 데모 (창, 도구 모음, 측정값, 그리드)
 *   6. auisoft.net 안내, 사이트 푸터
 *   7. 반응형
 */

/* 1. 디자인 토큰 ---------------------------------------------------------- */
/* 기준 색: #337ab7. 나머지 파랑 계열은 이 색의 밝기만 바꾼 값입니다. */
:root {
  --color-primary: #337ab7;
  --color-primary-dark: #286090;
  --color-primary-soft: #eaf2f9;
  --color-pivot: #337ab7;
  --color-pivot-soft: #e3eef8;
  --color-gantt: #1f4e79;
  --color-gantt-soft: #eef4fa;
  --color-error: #c23a3a;
  --color-ink: #1c2733;
  --color-muted: #5a6878;
  --color-line: #dde6ef;
  --color-surface-soft: #f4f8fb;
}

/* 상단 헤더 · 푸터만 차콜(#222729) 계열을 씁니다. 본문(히어로, 데모 그리드)은 위의 파랑 계열 그대로입니다.
   --color-primary-dark 는 버튼 hover 색으로, 어두운 기준색에서 변화가 보이도록 조금 밝게 둡니다. */
.site-header, .site-footer {
  --color-primary: #222729;
  --color-primary-dark: #3b4347;
  --color-primary-soft: #eef0f1;
  --color-pivot: #5b6c75;
  --color-gantt: #3d4a51;
  --color-ink: #222729;
  --color-muted: #5f6a70;
  --color-line: #e2e5e7;
}

/* 2. 기본 요소 ------------------------------------------------------------ */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, sans-serif; color: var(--color-ink); background: #fff; }
/* 안전장치: 어떤 요소가 화면 밖으로 넘쳐도 페이지 폭이 늘지 않게 합니다(넓어지면 iPhone Safari 가 페이지 전체를 축소해 보여 줌).
   hidden 과 달리 clip 은 스크롤 영역을 만들지 않아 sticky 헤더가 그대로 동작합니다. 글자 자동 확대도 끕니다. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }

/* 화면에는 보이지 않고 스크린 리더와 검색 엔진에만 읽히는 설명 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border-radius: 8px;
  font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer;
}
.button--small { height: 36px; padding: 0 16px; font-size: 14px; }
.button--primary { background: var(--color-primary); color: #fff; }
.button--primary:hover { background: var(--color-primary-dark); }

/* 3. 사이트 헤더 ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  height: 64px; display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
.brand__mark {
  width: 28px; height: 28px; border-radius: 6px; background: var(--color-primary);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 5px;
}
.brand__mark span { background: #fff; border-radius: 1px; }
.brand__mark span:nth-child(2), .brand__mark span:nth-child(3) { opacity: .6; }
.site-header nav { margin-left: auto; }

/* 4. 히어로 -------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(600px 300px at 20% -5%, var(--color-pivot-soft) 0%, transparent 70%),
    radial-gradient(600px 300px at 80% -5%, var(--color-gantt-soft) 0%, transparent 70%),
    radial-gradient(900px 400px at 50% -10%, var(--color-primary-soft) 0%, transparent 70%);
  padding: 64px 24px 24px; text-align: center;
}
/* 제목이 한 문장으로 길어져 최대 크기를 조금 줄이고, 줄 길이를 고르게(balance) 나눠 한 단어만 남는 줄이 없게 합니다. */
.hero__title {
  font-size: clamp(28px, 4.2vw, 48px); line-height: 1.25; margin: 20px auto 32px; max-width: 1140px;
  font-weight: 800; letter-spacing: -1px; text-wrap: balance;
}
.hero__title .hero__accent { color: var(--color-primary); }

/* 5. 밴드형 대용량 데모 --------------------------------------------------- */
.demo { max-width: 1920px; margin: 36px auto 0; padding: 0 24px; }

.demo-window {
  border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(31, 78, 121, .12); background: #fff;
}

.demo-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px;
  border-bottom: 1px solid var(--color-line); font-size: 13px; color: var(--color-muted);
}
.demo-toolbar label { display: flex; align-items: center; gap: 6px; }
.demo-toolbar select, .demo-toolbar button {
  font: inherit; font-size: 13px; height: 30px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--color-line); background: #fff; color: var(--color-ink); cursor: pointer;
}
/* Data size: 고르는 즉시 데이터를 만들므로 주 조작으로 강조 */
.demo-toolbar .demo-toolbar__size { color: var(--color-ink); font-weight: 600; }
.demo-toolbar .demo-toolbar__size select { min-width: 190px; border-color: var(--color-primary); font-weight: 600; }
/* 그리드 테마 선택: 도구 모음 오른쪽 끝에 따로 두고 기준색으로 강조 */
/* View code 버튼 */
.demo-toolbar .demo-toolbar__code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.demo-toolbar .demo-toolbar__code[aria-expanded="true"] { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.demo-toolbar .demo-toolbar__theme {
  margin-left: auto; padding: 3px 4px 3px 10px; border-radius: 8px;
  background: var(--color-primary-soft); color: var(--color-primary-dark); font-weight: 700;
}
.demo-toolbar .demo-toolbar__theme select { border-color: var(--color-primary); font-weight: 600; min-width: 150px; }
/* 4색 견본 아이콘 */
.demo-toolbar__theme-icon {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  background: conic-gradient(#337ab7 0 25%, #16907e 0 50%, #c27a12 0 75%, #6a55c9 0);
}
.demo-toolbar__divider { width: 1px; height: 20px; background: var(--color-line); }
.demo-toolbar :disabled { opacity: .5; cursor: default; }

/* View code 패널: 지금 화면을 만드는 코드 */
.demo-code { border-bottom: 1px solid var(--color-line); background: #1e2329; color: #e6e9eb; }
.demo-code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px;
  font-size: 12px; color: #9aa6ad; border-bottom: 1px solid #2f363b;
}
.demo-code__bar button {
  font: inherit; font-size: 12px; font-weight: 700; height: 28px; padding: 0 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid #4a535a; background: #2a3035; color: #fff;
}
.demo-code__bar button:hover { background: #343b41; }
.demo-code pre {
  margin: 0; padding: 14px 16px; max-height: 360px; overflow: auto;
  font: 12.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; tab-size: 2;
}
.demo-code .code-comment { color: #7f8c94; }
.demo-code .code-string { color: #9fd3a8; }

/* 데이터 생성 진행 상태: "데이터 생성 및 적용" 버튼 바로 아래 */
.demo-status {
  margin: 0; padding: 6px 14px; border-bottom: 1px solid var(--color-line);
  font-size: 12px; color: var(--color-primary); font-variant-numeric: tabular-nums;
}
.demo-status.is-error { color: var(--color-error); }

.demo-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-bottom: 1px solid var(--color-line); }
.demo-metrics div { padding: 8px 14px; border-right: 1px solid var(--color-line); }
.demo-metrics div:last-child { border-right: 0; }
.demo-metrics dt { font-size: 11px; color: var(--color-muted); }
.demo-metrics dd { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

.demo-grid { width: 100%; height: 680px; }

/* 5-1. 밴드 셀 꾸미기 (band-demo.js 의 칼럼 style/headerStyle 과 셀 템플릿) ------------- */
/* 묶음 강조색: 기준색 #337ab7 과 어울리는 4가지를 묶음마다 돌려 씁니다. */
.demo-grid {
  --accent-0: #337ab7; --accent-0-soft: #eaf2f9;
  --accent-1: #16907e; --accent-1-soft: #e3f4f1;
  --accent-2: #6a55c9; --accent-2-soft: #efecfb;
  --accent-3: #c27a12; --accent-3-soft: #fdf3e2;
}
.demo-grid .band-left { text-align: left; }
.demo-grid .band-right { text-align: right; }
.demo-grid .band-id { color: var(--color-muted); font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* 묶음 헤더 (Task 1, Task 2 …) */
.aui-grid .band-head-0, .aui-grid .band-head-1, .aui-grid .band-head-2, .aui-grid .band-head-3 { color: #fff !important; font-weight: 700; }
.aui-grid .band-head-0 { background: var(--accent-0) !important; }
.aui-grid .band-head-1 { background: var(--accent-1) !important; }
.aui-grid .band-head-2 { background: var(--accent-2) !important; }
.aui-grid .band-head-3 { background: var(--accent-3) !important; }

/* Task 셀: 묶음 색 배경 + 왼쪽 색 띠 */
.demo-grid .band-task-cell-0, .demo-grid .band-task-cell-1, .demo-grid .band-task-cell-2, .demo-grid .band-task-cell-3 { text-align: left; }
.demo-grid .band-task-cell-0 { background: var(--accent-0-soft); box-shadow: inset 4px 0 0 var(--accent-0); --accent: var(--accent-0); }
.demo-grid .band-task-cell-1 { background: var(--accent-1-soft); box-shadow: inset 4px 0 0 var(--accent-1); --accent: var(--accent-1); }
.demo-grid .band-task-cell-2 { background: var(--accent-2-soft); box-shadow: inset 4px 0 0 var(--accent-2); --accent: var(--accent-2); }
.demo-grid .band-task-cell-3 { background: var(--accent-3-soft); box-shadow: inset 4px 0 0 var(--accent-3); --accent: var(--accent-3); }

.band-task { display: flex; align-items: center; gap: 9px; padding: 0 10px; min-width: 0; }
.band-task__icon {
  flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent, var(--color-primary)); color: #fff; font-size: 11px; font-weight: 800;
}
.band-task__text { min-width: 0; line-height: 1.25; }
.band-task__text b { display: block; font-size: 12.5px; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-task__text small { display: block; font-size: 10.5px; color: var(--color-muted); }

/* Owner: 머리글자 아바타 */
.band-owner { display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.band-owner__avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
.band-avatar-0 { background: #337ab7; }
.band-avatar-1 { background: #16907e; }
.band-avatar-2 { background: #6a55c9; }
.band-avatar-3 { background: #c27a12; }
.band-avatar-4 { background: #d1517a; }
.band-avatar-5 { background: #4a6a8a; }

/* Status: 상태 배지 */
.band-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.4;
}
.band-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.band-status--received { background: #eef1f5; color: #5a6878; }
.band-status--review { background: #fff1d9; color: #a96a0c; }
.band-status--approved { background: #e3eef8; color: #286090; }
.band-status--done { background: #e2f5ec; color: #17845a; }

/* Unit price: BarRenderer 막대 (기본 초록 대신 기준색 계열) */
.aui-grid .band-price-bar { background: linear-gradient(90deg, #dbe9f6, #9fc3e5) !important; border-radius: 4px; }

/* 구역 셀 (Owner · Status · Customer · Requested): 하위 셀과 구분되는 옅은 바탕 */
.demo-grid .band-section { background: #f8fafc; text-align: left; }
.band-owner b, .band-customer b { font-weight: 600; font-size: 12.5px; color: var(--color-ink); }

/* Priority: 우선순위 배지 */
.band-priority { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; border: 1px solid currentColor; }
.band-priority--low { color: #7a8794; }
.band-priority--normal { color: #337ab7; }
.band-priority--high { color: #c27a12; }
.band-priority--urgent { color: #fff; background: #c23a3a; border-color: #c23a3a; }

/* Progress: 진행률 막대 */
.band-progress { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.band-progress__track { flex: 1; height: 6px; border-radius: 3px; background: #e3eaf1; overflow: hidden; }
.band-progress__track i { display: block; height: 100%; border-radius: 3px; background: #337ab7; }
.band-progress.is-complete .band-progress__track i { background: #17845a; }
.band-progress__value { min-width: 34px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* Customer: 회사 머리글자 사각형 */
.band-customer { display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.band-customer__logo { flex: none; width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: #1f4e79; color: #fff; font-size: 11px; font-weight: 800; }

/* Amount: 계산 결과라 굵게, 오른쪽 정렬 */
.demo-grid .band-amount { text-align: right; font-weight: 700; color: #1f4e79; }

/* Due: 마감일 + lead time */
.band-due { display: grid; justify-items: center; line-height: 1.3; }
.band-due b { font-size: 12.5px; color: var(--color-ink); }
.band-due small { font-size: 10.5px; color: var(--color-muted); }
.band-due small.is-long { color: #c27a12; font-weight: 700; }

/* 합계 푸터 */
.aui-grid .band-footer-label { font-weight: 800; text-align: center; }
.aui-grid .band-footer-value { font-weight: 700; text-align: right; }
.aui-grid .band-footer-total { font-weight: 800; text-align: right; color: var(--color-primary); }

/* Requested: 달력 모양 날짜 칩 */
.band-date { display: flex; align-items: center; justify-content: center; gap: 7px; }
.band-date__chip {
  display: grid; width: 34px; border-radius: 6px; overflow: hidden; text-align: center;
  border: 1px solid var(--color-line); background: #fff; line-height: 1.1;
}
.band-date__chip small { background: #c23a3a; color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 0; }
.band-date__chip b { font-size: 14px; padding: 2px 0 3px; color: var(--color-ink); }
.band-date__year { font-size: 11px; color: var(--color-muted); }


.demo-footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 14px;
  border-top: 1px solid var(--color-line); background: var(--color-surface-soft);
  font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums;
}
.demo-footer p { margin: 0; }

/* 자바스크립트를 끈 환경과 크롤러에 보이는 대체 안내 */
.demo-noscript { margin: 0; padding: 24px; font-size: 14px; line-height: 1.7; color: var(--color-muted); }


/* 5-2. 어두운 그리드 테마(Navy, Dark)용 셀 색 ---------------------------------------
   band-demo.js 의 applyTheme 이 data-tone="dark" 를 붙입니다. 밝은 테마용 옅은 바탕·진한 글자를 어두운 톤으로 바꿉니다. */
.demo-window[data-tone="dark"] .demo-grid {
  --color-ink: #e6edf5; --color-muted: #9aa8b8; --color-line: #3a4452;
  --accent-0-soft: rgba(51, 122, 183, .24); --accent-1-soft: rgba(22, 144, 126, .24);
  --accent-2-soft: rgba(106, 85, 201, .26); --accent-3-soft: rgba(194, 122, 18, .24);
}
.demo-window[data-tone="dark"] .demo-grid .band-section { background: rgba(255, 255, 255, .04); }
.demo-window[data-tone="dark"] .demo-grid .band-amount { color: #8fc1ea; }
.demo-window[data-tone="dark"] .band-progress__track { background: #3a4452; }
.demo-window[data-tone="dark"] .band-date__chip { background: #222a35; border-color: #3a4452; }
.demo-window[data-tone="dark"] .band-customer__logo { background: #4a7fb0; }
.demo-window[data-tone="dark"] .band-priority--low { color: #9aa8b8; }
.demo-window[data-tone="dark"] .band-priority--normal { color: #7fb3e0; }
.demo-window[data-tone="dark"] .band-status--received { background: #2e3742; color: #b8c4d1; }
.demo-window[data-tone="dark"] .band-price-bar { background: linear-gradient(90deg, rgba(51, 122, 183, .35), rgba(51, 122, 183, .8)) !important; }

/* 5-3. 지원 프레임워크 ------------------------------------------------------ */
.stacks { max-width: 1352px; margin: 48px auto 0; padding: 0 24px; }
.stacks__title { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.stacks__lead { margin: 0 0 18px; color: var(--color-muted); font-size: 15px; }
.stacks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stack { border: 1px solid var(--color-line); border-radius: 12px; padding: 18px; background: #fff; }
.stack h3 { margin: 12px 0 6px; font-size: 16px; }
.stack p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--color-muted); }
.stack code { font-size: 12.5px; background: var(--color-surface-soft); padding: 1px 4px; border-radius: 4px; }
.stack__icon {
  width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center;
  font: 800 15px/1 ui-monospace, Consolas, monospace;
}
.stack__icon--js { background: #f7df1e; color: #222; }
.stack__icon--ts { background: #3178c6; color: #fff; }
.stack__icon--react { background: #20232a; color: #61dafb; }
.stack__icon--vue { background: #f1f8f4; }

/* 5-4. 공통 섹션 제목, 히어로 문서 링크 ------------------------------------- */
.hero__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 14.5px; font-weight: 600; }
.hero__links a { color: var(--color-primary); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.hero__links a:hover { border-bottom-color: currentColor; }
.section-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.section-lead { margin: 0 0 18px; color: var(--color-muted); font-size: 15px; line-height: 1.65; max-width: 900px; }
.section-lead a, .ai__note a, .faq a { color: var(--color-primary); }
.section-lead code, .setup p code, .prompt-list code, .faq code {
  font-size: .88em; background: var(--color-surface-soft); padding: 1px 5px; border-radius: 4px;
}

/* 코드 블록(정적 HTML): View code 패널과 같은 어두운 톤 */
.code {
  margin: 0; padding: 12px 14px; overflow: auto; border-radius: 8px; background: #1e2329; color: #e6e9eb;
  font: 12.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; tab-size: 2;
}
.code-card { border-radius: 12px; overflow: hidden; background: #1e2329; }
.code-card .code { border-radius: 0; max-height: 520px; }
.code-card__bar {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 14px;
  font: 12px ui-monospace, Consolas, monospace; color: #9aa6ad; border-bottom: 1px solid #2f363b;
}
.code-card__bar button, .copy-line button {
  font: inherit; font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 700; height: 28px; padding: 0 12px;
  border-radius: 6px; cursor: pointer; border: 1px solid #4a535a; background: #2a3035; color: #fff;
}
.code-card__bar button:hover, .copy-line button:hover { background: #343b41; }

/* 5-5. AI / MCP ---------------------------------------------------------- */
.ai, .starter, .api, .faq { max-width: 1352px; margin: 56px auto 0; padding: 0 24px; }
.ai__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai-way { border: 1px solid var(--color-line); border-radius: 12px; padding: 18px; background: #fff; min-width: 0; }
.ai-way h3 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-way p { margin: 0 0 12px; font-size: 13.5px; color: var(--color-muted); }
.ai-way a { color: var(--color-primary); }
.ai-way__tag {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.copy-line {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: #1e2329; border-radius: 8px; padding: 6px 6px 6px 14px;
}
.copy-line code { color: #9fd3a8; font: 14px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; overflow-x: auto; white-space: nowrap; }
.copy-line button { flex: none; }
.ai__subtitle { margin: 28px 0 10px; font-size: 16px; font-weight: 800; }
.ai__tools { display: grid; gap: 8px; }
/* 그리드·플렉스 칸은 기본적으로 안쪽 내용(긴 코드 한 줄)보다 좁아지지 않아 휴대폰에서 페이지가 넓어집니다.
   min-width: 0 으로 칸을 화면 폭에 맞추고, 긴 코드는 블록 안에서 가로 스크롤합니다. */
.ai__tools > *, .ai__facts > *, .ai__ways > *, .copy-line code { min-width: 0; }
.code { max-width: 100%; }
.setup { border: 1px solid var(--color-line); border-radius: 10px; background: #fff; }
.setup summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14.5px; }
.setup[open] summary { border-bottom: 1px solid var(--color-line); }
.setup p { margin: 12px 16px 8px; font-size: 13.5px; color: var(--color-muted); }
.setup .code { margin: 0 16px 14px; }
.ai__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.tool-list { margin: 0; border: 1px solid var(--color-line); border-radius: 10px; overflow: hidden; }
.tool-list div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--color-line); font-size: 13.5px; }
.tool-list div:first-child { border-top: 0; }
.tool-list dt code { font: 600 13px ui-monospace, Consolas, monospace; color: var(--color-primary-dark); }
.tool-list dd { margin: 0; color: var(--color-muted); }
.prompt-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.prompt-list li + li { margin-top: 8px; }
.ai__note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--color-muted); }

/* Quick start: AI 작성 규칙 */
.starter__notice {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.65;
  background: #fff8e6; border: 1px solid #f1d58a; color: #5c4a14;
}
.starter__notice a { color: var(--color-primary); }
.starter__notice code { font-size: .88em; background: rgba(255, 255, 255, .7); padding: 1px 5px; border-radius: 4px; }
.ai-notes { border-left: 3px solid var(--color-primary); background: var(--color-surface-soft); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 0 0 16px; }
.ai-notes h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.ai-notes ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.65; }
.ai-notes li + li { margin-top: 4px; }
.ai-notes code { font-size: .88em; background: #fff; padding: 1px 5px; border-radius: 4px; }

/* 5-6. API 요약 ---------------------------------------------------------- */
.api__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.api__grid > * { min-width: 0; }
.api-card { border: 1px solid var(--color-line); border-radius: 12px; background: #fff; overflow: hidden; }
.api-card h3 { margin: 0; padding: 12px 14px; font-size: 15px; font-weight: 800; border-bottom: 1px solid var(--color-line); background: var(--color-surface-soft); }
.api-card__note { font-weight: 500; font-size: 12.5px; color: var(--color-muted); }
.api-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.api-card tr + tr { border-top: 1px solid var(--color-line); }
.api-card th, .api-card td { padding: 8px 14px; text-align: left; vertical-align: top; }
.api-card th { font-weight: 400; width: 46%; }
.api-card th code { font: 600 12.5px ui-monospace, Consolas, monospace; color: var(--color-primary-dark); overflow-wrap: anywhere; }
.api-card td { color: var(--color-muted); }
.api-card td code { font-size: .9em; background: var(--color-surface-soft); padding: 0 4px; border-radius: 3px; }

/* 5-8. 가격·라이선스 요약 --------------------------------------------------- */
.pricing { max-width: 1352px; margin: 56px auto 0; padding: 0 24px; }
.pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pricing__grid > * { min-width: 0; }
.pricing-card { border: 1px solid var(--color-line); border-radius: 12px; padding: 18px 20px; background: #fff; }
.pricing-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.pricing-card ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--color-muted); }
.pricing-card a { color: var(--color-primary); }
.pricing__more {
  margin-top: 14px; padding: 16px 20px; border-radius: 12px; background: var(--color-primary-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; font-size: 14.5px;
}
.pricing__more p { margin: 0; }

/* 5-9. 404 페이지 (404.html) ------------------------------------------------ */
.not-found {
  min-height: calc(100vh - 220px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 24px 24px;
  background: radial-gradient(900px 400px at 50% -10%, var(--color-primary-soft) 0%, transparent 70%);
}
.not-found__code { margin: 0; font-size: clamp(72px, 14vw, 120px); font-weight: 800; letter-spacing: -4px; line-height: 1; color: var(--color-primary); }
.not-found__title { margin: 12px 0 8px; font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.5px; }
.not-found__lead { margin: 0 0 24px; max-width: 560px; color: var(--color-muted); font-size: 15.5px; line-height: 1.65; }
.not-found__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 14.5px; font-weight: 600; }
.not-found__links a { color: var(--color-primary); padding: 4px 0; border-bottom: 1px solid transparent; }
.not-found__links a:hover { border-bottom-color: currentColor; }
.not-found__ai { margin: 28px 0 0; font-size: 13px; color: var(--color-muted); }
.not-found__ai a { color: var(--color-primary); }
.not-found__ai code { font-size: .92em; background: var(--color-surface-soft); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

/* 5-7. FAQ --------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 15px; }
.faq details p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; color: var(--color-muted); max-width: 900px; }

/* 6. auisoft.net 안내, 사이트 푸터 ---------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-line); padding: 24px; margin-top: 56px; text-align: center;
  font-size: 13px; color: var(--color-muted);
}
.site-footer a { color: var(--color-primary); }

/* 7. 반응형 -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .stacks__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stacks__list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .stacks, .ai, .starter, .api, .faq, .pricing { padding: 0 16px; }
  .pricing__grid { grid-template-columns: 1fr; }
  .api__grid { grid-template-columns: 1fr; }
  .api-card th, .api-card td { display: block; width: auto; padding: 0; }
  .api-card tr { display: block; padding: 8px 14px; }
  .api-card td { padding-top: 2px; }
  .ai__ways, .ai__facts { grid-template-columns: 1fr; }
  .tool-list div { grid-template-columns: 1fr; gap: 2px; }
  .site-header__inner { justify-content: space-between; }
  .hero { padding-top: 48px; }
  .demo { padding: 0 16px; }
  .demo-metrics { grid-template-columns: 1fr 1fr; }
  .demo-metrics div { border-bottom: 1px solid var(--color-line); }
  .demo-grid { height: 520px; }
}