/* ============================================================
   AI 에이전트 실무 교재 — 공유 디자인 시스템
   웜 페이퍼 에디토리얼 (읽는 교재판) · awesome-design 기법 적용
   단일 진실원: 디자인 변경은 이 파일에서만.
   ============================================================ */

:root{
  /* ── 색 (페이퍼 계열) ── */
  --paper:#F7F4EE; --paper-deep:#EFEAE0; --paper-sink:#E9E3D6;
  --ink:#1D1B16; --body:#403A2E; --sub:#5F584C; --faint:#9A917F;
  --hair:#DCD4C4; --hair-soft:#E7E0D1; --ghost:#E7DFCC;
  --card:#FFFFFF; --card-line:#E6DFD0;
  /* ── 색 (다크 계열) ── */
  --panel:#17181C; --panel-ring:rgba(255,255,255,.08);
  --dark-bg:#141419; --dark-fg:#F3F0E9; --dark-sub:#A39C8E;
  --dark-faint:#6F6A60; --dark-hair:#2A2A31;
  /* ── 강조 ── */
  --accent:#2440C8; --accent-soft:rgba(36,64,200,.10); --accent-d:#8295FA;
  --sienna:#9C4A14; --sienna-soft:rgba(156,74,20,.10); --sienna-d:#E08A4C;
  /* ── 그림자 ── */
  --sh-card:0 1px 0 rgba(29,27,22,.04), 0 10px 28px -18px rgba(29,27,22,.30);
  --sh-panel:0 14px 40px -16px rgba(10,10,14,.45), inset 0 1px 0 rgba(255,255,255,.06);
  /* ── 리듬 ── */
  --col:780px; --pad:28px; --r:14px; --r-sm:9px;
  --mono:"D2Coding","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--body);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  font-size:18.5px; line-height:1.92; letter-spacing:.004em;
  font-variant-numeric:tabular-nums; word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* 종이 질감 */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── 읽기 진행 바 ── */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:50;
  background:var(--accent);transition:width .12s linear}

/* ── 상단 크롬 ── */
.topbar{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:13px clamp(20px,5vw,56px);background:rgba(247,244,238,.82);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hair);font-size:12px;letter-spacing:.04em}
.topbar a{color:var(--sub);text-decoration:none}
.topbar .home{font-weight:700;color:var(--ink);letter-spacing:.01em}
.topbar .home::before{content:"←  ";color:var(--accent)}
.topbar .pos{font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.topbar .pos b{color:var(--accent);font-weight:800}
.topbar .right{display:flex;align-items:center;gap:16px}
.modes{display:flex;border:1px solid var(--hair);border-radius:22px;overflow:hidden;background:var(--card)}
.modes a{padding:6px 15px;font-size:12.5px;font-weight:700;color:var(--sub);text-decoration:none;letter-spacing:.02em}
.modes a.on{background:var(--accent);color:#fff}

/* ── 출처 · 더 읽을거리 ── */
.sources{max-width:var(--col);margin:70px auto 0;padding:36px clamp(20px,5vw,28px) 0;border-top:2px solid var(--ink)}
.sources .sk{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sienna)}
.sources h2{font-size:25px;font-weight:800;letter-spacing:-.016em;color:var(--ink);margin:10px 0 0}
.sources ol{list-style:none;counter-reset:r;margin:24px 0 0}
.sources li{counter-increment:r;position:relative;padding:16px 0 16px 40px;border-top:1px solid var(--hair)}
.sources li:first-child{border-top:0}
.sources li::before{content:"[" counter(r) "]";position:absolute;left:0;top:18px;font-size:13px;font-weight:800;
  color:var(--accent);font-variant-numeric:tabular-nums}
.sources .st{font-size:17px;font-weight:700;color:var(--ink);line-height:1.45}
.sources .sd{font-size:14.5px;color:var(--sub);margin-top:3px}
.sources .su{font-size:14px;color:var(--accent);text-decoration:none;word-break:break-all}
.sources .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--hair);border-radius:5px;padding:1px 7px;margin-right:8px;vertical-align:1px}

/* ============================================================
   모듈 커버
   ============================================================ */
.cover{position:relative;background:var(--dark-bg);color:var(--dark-fg);overflow:hidden;
  padding:clamp(64px,12vw,128px) clamp(24px,6vw,72px) clamp(56px,9vw,104px)}
.cover .bg{position:absolute;inset:0;z-index:0;object-fit:cover;width:100%;height:100%;
  opacity:.34;filter:saturate(1.05)}
.cover::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 78% 8%, rgba(224,138,76,.10), transparent 55%),
             linear-gradient(180deg, rgba(20,20,25,.55) 0%, rgba(20,20,25,.74) 60%, rgba(20,20,25,.92) 100%)}
.cover .wrap{position:relative;z-index:2;max-width:1080px;margin:0 auto}
.cover .ghost{position:absolute;right:-6px;top:-48px;font-size:clamp(160px,30vw,340px);font-weight:900;
  line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.10);
  z-index:1;pointer-events:none;font-variant-numeric:tabular-nums}
.cover .kick{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sienna-d)}
.cover h1{font-size:clamp(38px,6.5vw,64px);font-weight:900;line-height:1.05;letter-spacing:-.025em;
  margin:18px 0 0;text-wrap:balance;max-width:16ch}
.cover .dek{font-size:clamp(16px,2.2vw,20px);font-weight:500;line-height:1.6;color:var(--dark-sub);
  margin-top:22px;max-width:54ch;text-wrap:pretty}
.cover .rule{width:60px;height:4px;background:var(--sienna-d);border:0;margin:30px 0 0}
/* 커버 안 차례 */
.toc{margin-top:38px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 40px;max-width:920px;border-top:1px solid var(--dark-hair)}
.toc a{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:baseline;text-decoration:none;
  padding:15px 0;border-bottom:1px solid var(--dark-hair);color:var(--dark-fg)}
.toc a .n{font-size:12.5px;font-weight:800;color:var(--accent-d);font-variant-numeric:tabular-nums}
.toc a .t{font-size:15px;font-weight:600;line-height:1.4}
.toc a:hover .t{color:var(--sienna-d)}

/* ============================================================
   본문 컨테이너 & 타이포 위계
   ============================================================ */
.doc{max-width:var(--col);margin:0 auto;padding:clamp(48px,8vw,88px) clamp(20px,5vw,28px) 40px}
.lesson{padding-top:18px}
.lesson + .lesson{margin-top:14px}
.lesson .lk{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.lesson .lk::after{content:"";flex:1;height:1px;background:var(--hair)}
.lesson h2{font-size:clamp(30px,4.8vw,39px);font-weight:800;line-height:1.18;letter-spacing:-.02em;
  color:var(--ink);margin:18px 0 0;text-wrap:balance}
.lead{font-size:clamp(20px,2.7vw,23.5px);font-weight:650;line-height:1.66;letter-spacing:-.006em;
  color:var(--ink);margin:26px 0 0;text-wrap:pretty}
.doc h3{font-size:23px;font-weight:750;letter-spacing:-.012em;color:var(--ink);margin:54px 0 0}
.doc h3 + p,.doc h3 + ul{margin-top:14px}
.doc p{margin-top:24px}
.doc p strong,.doc li strong{font-weight:700;color:var(--ink)}
.doc em{font-style:normal;color:var(--sienna);font-weight:600}
.doc a.ref{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.muted{color:var(--sub)}

/* 코발트 · 포인트 리스트 */
ul.pts{list-style:none;margin:22px 0 0}
ul.pts li{position:relative;padding-left:22px;margin-top:14px}
ul.pts li::before{content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;border-radius:50%;
  background:var(--accent)}
/* 번호 스텝 */
ol.steps{list-style:none;counter-reset:s;margin:24px 0 0}
ol.steps li{position:relative;counter-increment:s;padding:16px 0 16px 50px;border-top:1px solid var(--hair)}
ol.steps li:first-child{border-top:0}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:17px;
  font-size:14px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
ol.steps li b{display:block;color:var(--ink);font-weight:700;margin-bottom:3px}

/* 섹션 구분 룰 */
.div{display:block;width:48px;height:3px;background:var(--sienna);border:0;margin:64px 0 0}

/* ============================================================
   콜아웃 / 노트 (박스 아님 — 좌측 룰)
   ============================================================ */
.note{margin:28px 0 0;padding:4px 0 4px 22px;border-left:2px solid var(--sienna);
  background:linear-gradient(90deg,var(--sienna-soft),transparent 60%)}
.note .nl{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sienna)}
.note p{margin-top:8px;font-size:17.5px;color:var(--body)}
.note.info{border-left-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),transparent 60%)}
.note.info .nl{color:var(--accent)}

/* 핵심 용어 정의 */
.terms{margin:26px 0 0;border-top:1px solid var(--hair)}
.terms div{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--hair)}
.terms dt{font-weight:750;color:var(--ink)}
.terms dd{color:var(--sub);font-size:16px}

/* ============================================================
   그림 / 미디어 패널 (다크)
   ============================================================ */
figure.fig{margin:40px 0 0}
figure.fig .panel{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh-panel);
  outline:1px solid var(--panel-ring);outline-offset:-1px;overflow:hidden}
figure.fig .panel img{display:block;width:100%;height:auto}
figure.fig figcaption{margin-top:11px;padding-left:13px;position:relative;font-size:13px;line-height:1.5;
  color:var(--faint)}
figure.fig figcaption::before{content:"";position:absolute;left:0;top:.42em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
figure.fig figcaption b{color:var(--sub);font-weight:700}
figure.fig.paper .panel{background:var(--card);outline:1px solid var(--card-line);box-shadow:var(--sh-card)}
figure.fig.shot .panel{background:transparent;outline:none;box-shadow:none;border-radius:0}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.chips span{font-size:12.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);
  border-radius:20px;padding:3px 12px}
.chips span.t{color:var(--sienna);background:var(--sienna-soft)}

/* CSS 다이어그램 (해부도 등) */
.diagram{margin:30px 0 0;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);
  box-shadow:var(--sh-card);padding:30px}
.diagram .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.diagram .node{padding:16px 14px;border-radius:var(--r-sm);background:var(--paper-deep);
  border:1px solid var(--card-line);text-align:center}
.diagram .node .ico{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.diagram .node .nm{font-weight:750;color:var(--ink);margin-top:6px}
.diagram .node small{display:block;color:var(--sub);font-size:13.5px;margin-top:3px;line-height:1.45}
.diagram .node.brain{background:#141419;border-color:#2A2A31}
.diagram .node.brain .nm{color:var(--dark-fg)} .diagram .node.brain .ico{color:var(--accent-d)}
.diagram .node.brain small{color:var(--dark-sub)}

/* ============================================================
   터미널 / 코드 패널 (다크 모노)
   ============================================================ */
.term{margin:26px 0 0;background:var(--panel);border-radius:var(--r);box-shadow:var(--sh-panel);
  outline:1px solid var(--panel-ring);outline-offset:-1px;overflow:hidden}
.term .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--dark-hair);
  background:rgba(255,255,255,.02)}
.term .bar i{width:11px;height:11px;border-radius:50%;background:#3a3a42;display:inline-block}
.term .bar i:nth-child(1){background:#E0735B}.term .bar i:nth-child(2){background:#E0B24C}
.term .bar i:nth-child(3){background:#6FB07A}
.term .bar span{margin-left:8px;font-size:12px;color:var(--dark-faint);font-family:var(--mono)}
.term pre{margin:0;padding:18px 18px 20px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;
  line-height:1.7;color:#D7D2C6}
.term pre .c{color:#6F6A60}          /* 주석 */
.term pre .p{color:var(--accent-d)}   /* 프롬프트 기호/사용자 */
.term pre .o{color:#9FC9A2}           /* 출력/성공 */
.term pre .k{color:var(--sienna-d)}   /* 강조 키워드 */

/* ============================================================
   실습 블록
   ============================================================ */
.try{margin:34px 0 0;background:var(--paper-deep);border-radius:var(--r);padding:24px 26px 26px;
  border:1px solid var(--card-line)}
.try .th{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sienna)}
.try .th::before{content:"";width:18px;height:3px;background:var(--sienna);border-radius:2px}
.try h4{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:10px 0 0}
.try ol{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:t}
.try ol li{counter-increment:t;position:relative;padding-left:30px;margin-top:9px;font-size:16px}
.try ol li::before{content:counter(t);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;
  background:var(--sienna);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.try .goal{margin-top:16px;padding-top:13px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--sub)}
.try .goal b{color:var(--sienna);font-weight:700}

/* ============================================================
   프롬프트 카드 (복사 가능)
   ============================================================ */
.prompt{margin:24px 0 0;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);
  box-shadow:var(--sh-card);overflow:hidden}
.prompt .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--card-line)}
.prompt .ph .pl{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.prompt .ph .pl::before{content:"❯ ";color:var(--sienna)}
.prompt .copy{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--sub);background:var(--paper-deep);
  border:1px solid var(--card-line);border-radius:7px;padding:5px 11px;cursor:pointer;transition:.15s}
.prompt .copy:hover{color:var(--accent);border-color:var(--accent)}
.prompt .copy.done{color:#fff;background:var(--accent);border-color:var(--accent)}
.prompt pre{margin:0;padding:16px 18px;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--body);
  white-space:pre-wrap;background:repeating-linear-gradient(180deg,transparent,transparent 27px,rgba(0,0,0,.012) 27px,rgba(0,0,0,.012) 28px)}
.prompt .pf{padding:10px 16px;border-top:1px solid var(--card-line);font-size:12.5px;color:var(--faint)}
.prompt .pf a{color:var(--accent);text-decoration:none}

/* ============================================================
   정리 / 스테이트먼트 밴드 (다크 반전)
   ============================================================ */
.statement{margin:54px 0 0;background:var(--dark-bg);color:var(--dark-fg);border-radius:var(--r);
  padding:40px clamp(26px,5vw,48px) 42px;position:relative;overflow:hidden}
.statement::before{content:"\201C";position:absolute;right:24px;top:-30px;font-size:200px;font-weight:900;
  color:var(--sienna-d);opacity:.10;line-height:1}
.statement .sl{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sienna-d)}
.statement .claim{font-size:clamp(21px,3.4vw,27px);font-weight:800;line-height:1.34;letter-spacing:-.014em;
  margin-top:14px;text-wrap:balance;max-width:30ch}
.statement .support{margin-top:16px;color:var(--dark-sub);font-size:16px;max-width:60ch;line-height:1.65}

/* ── KPI / 수치 ── */
.kpis{margin:30px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0}
.kpis .kpi{padding:6px 22px;border-left:1px solid var(--hair)}
.kpis .kpi:first-child{border-left:0;padding-left:0}
.kpis .kpi .v{font-size:40px;font-weight:900;letter-spacing:-.02em;color:var(--accent);line-height:1.02;
  font-variant-numeric:tabular-nums}
.kpis .kpi .l{font-size:13.5px;color:var(--sub);margin-top:6px;line-height:1.4}

/* ============================================================
   모듈 푸터 내비
   ============================================================ */
.nav{max-width:var(--col);margin:64px auto 0;padding:0 clamp(20px,5vw,28px) 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nav a{display:block;padding:20px 22px;border:1px solid var(--card-line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--sh-card);text-decoration:none;transition:.15s}
.nav a:hover{border-color:var(--accent)}
.nav a .d{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700}
.nav a .m{font-size:16px;font-weight:750;color:var(--ink);margin-top:6px;letter-spacing:-.01em}
.nav a.next{text-align:right}
.nav a.next .d::after{content:"  →";color:var(--accent)}
.nav a.prev .d::before{content:"←  ";color:var(--accent)}
.nav a.disabled{opacity:.4;pointer-events:none}

/* ============================================================
   반응형 + 인쇄(PDF)
   ============================================================ */
@media (max-width:560px){
  body{font-size:16px}
  .terms div{grid-template-columns:1fr;gap:2px}
  .nav{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
  .topbar,.progress,.nav,.prompt .copy{display:none}
  body{background:#fff;font-size:11pt}
  body::before{display:none}
  .cover{break-after:page} .lesson{break-inside:avoid-page}
  .statement,.term,.prompt,.fig,.try{break-inside:avoid}
  .cover .bg{opacity:.22}
}