/* ===========================================================
   AI 윤리 아카데미 — 공통 스타일
   Palette: indigo(#4f46e5) → cyan(#0891b2), ink #0f172a
   =========================================================== */
:root{
  --ink:#0f172a; --muted:#5b6478; --line:#e2e8f0;
  --accent:#4f46e5; --accent-2:#0891b2; --accent-3:#7c3aed;
  --accent-soft:#eef2ff; --surface:#fff; --focus:#2563eb;
}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#f5f7fc; color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
b,strong{font-weight:700}

.skip-link{position:fixed;left:1rem;top:-4rem;z-index:1000;background:#0f172a;color:#fff;padding:.75rem 1rem;border-radius:.6rem}
.skip-link:focus{top:1rem}

/* ---------- 브랜드 / 헤더 ---------- */
.grad{background:linear-gradient(135deg,#312e81 0%,#4f46e5 52%,#0891b2 100%)}
.grad-text{background:linear-gradient(135deg,#4338ca,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-header{background:linear-gradient(135deg,#1e1b4b 0%,#4338ca 50%,#0e7490 100%);color:#fff}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:800}
.brand-mark{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:.8rem;background:rgba(255,255,255,.16);font-size:.72rem;letter-spacing:.06em;font-weight:800}

/* ---------- 레이아웃 ---------- */
.site-shell{display:grid;grid-template-columns:18rem minmax(0,1fr);gap:2rem;max-width:80rem;margin:0 auto;padding:2rem 1.5rem 5rem}
.site-sidebar{position:relative}
.site-nav{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow-y:auto}
.site-nav a{display:block;padding:.6rem .85rem;border-radius:.7rem;color:#475569;font-size:.88rem;line-height:1.35}
.site-nav a:hover{background:#eef2ff;color:#312e81}
.site-nav a[aria-current=page]{background:#e0e7ff;color:#3730a3;font-weight:800}
.phase-toc{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.phase-toc a{font-size:.8rem;padding:.4rem .7rem;color:#64748b}
.content-column{min-width:0}
.breadcrumbs{display:flex;gap:.45rem;align-items:center;margin:0 0 1rem;color:#64748b;font-size:.82rem;flex-wrap:wrap}
.breadcrumbs a:hover{text-decoration:underline}

.card{background:var(--surface);border-radius:1.25rem;box-shadow:0 4px 24px rgba(30,27,75,.07);border:1px solid #e6e9f5}
.phase>div.card{padding:clamp(1.25rem,3vw,2.5rem)}
.tag{display:inline-block;padding:.22rem .72rem;border-radius:999px;font-size:.74rem;font-weight:700}

/* ---------- 로드맵 카드 ---------- */
.roadmap-card{display:flex;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.roadmap-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(49,46,129,.13)}
.roadmap-card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- 주제 카드(아코디언) ---------- */
details summary{cursor:pointer;font-weight:700}
.topic-card{scroll-margin-top:1rem}
.topic-card>summary{display:flex;align-items:center;min-height:3.25rem;padding-right:2.25rem;position:relative;list-style:none;font-size:1rem;line-height:1.5}
.topic-card>summary::-webkit-details-marker{display:none}
.topic-card>summary::after{content:'+';position:absolute;right:.2rem;font-size:1.45rem;font-weight:400;color:#64748b}
.topic-card[open]>summary::after{content:'−'}
.topic-card>summary:focus-visible,.site-nav a:focus-visible,.phase-links a:focus-visible,.mobile-menu summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- 본문 타이포 ---------- */
.deep-dive{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.deep-dive h4,.prose h4{margin:1.5rem 0 .55rem;font-size:1rem;font-weight:800;color:#1e293b}
.prose p,.deep-dive p{margin:.6rem 0;color:#334155;line-height:1.85}
.prose ul,.prose ol,.deep-dive ul,.deep-dive ol{margin:.6rem 0;padding-left:1.3rem;color:#334155}
.prose li,.deep-dive li{margin:.42rem 0;line-height:1.75}
.prose table,.deep-dive table{width:100%;margin:1rem 0;border-collapse:collapse;font-size:.85rem}
.prose th,.prose td,.deep-dive th,.deep-dive td{padding:.7rem;border:1px solid #dbe2ef;text-align:left;vertical-align:top}
.prose th,.deep-dive th{background:#eef2ff;color:#312e81;font-weight:700}
.prose tbody tr:nth-child(even),.deep-dive tbody tr:nth-child(even){background:#fafbff}
.table-wrap{overflow-x:auto;margin:1rem 0}

/* ---------- 콜아웃 ---------- */
.note-box,.evidence-note,.case-note,.law-note,.caution-note,.practice-note,.debate-note{
  margin:1.1rem 0;padding:1rem 1.15rem;border-radius:.85rem;line-height:1.78;font-size:.92rem;color:#1f2937}
.evidence-note{background:#eff6ff;border-left:4px solid #2563eb}
.case-note{background:#f5f3ff;border-left:4px solid #7c3aed}
.law-note{background:#ecfeff;border-left:4px solid #0891b2}
.practice-note{background:#ecfdf5;border-left:4px solid #059669}
.caution-note{background:#fff7ed;border-left:4px solid #ea580c}
.debate-note{background:#fef2f2;border-left:4px solid #dc2626}
.note-box{background:#f8fafc;border-left:4px solid #64748b}
.note-box>p:first-child,.evidence-note>p:first-child,.case-note>p:first-child,.law-note>p:first-child,
.caution-note>p:first-child,.practice-note>p:first-child,.debate-note>p:first-child{margin-top:0}
.note-box>p:last-child,.evidence-note>p:last-child,.case-note>p:last-child,.law-note>p:last-child,
.caution-note>p:last-child,.practice-note>p:last-child,.debate-note>p:last-child{margin-bottom:0}

.evidence-badge{display:inline-flex;align-items:center;padding:.26rem .65rem;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:.71rem;font-weight:800;letter-spacing:.02em}

/* ---------- 개념 그리드 / 용어 ---------- */
.concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.concept-grid>div{padding:1rem;border:1px solid #dbeafe;border-radius:.85rem;background:#f8fbff;font-size:.88rem;line-height:1.7}
.concept-grid b{color:#1e3a8a}
.term{display:inline-block;padding:.05rem .4rem;border-radius:.35rem;background:#eef2ff;color:#3730a3;font-weight:700;font-size:.92em}

/* ---------- 단계 목록 ---------- */
.numbered-steps{counter-reset:steps;list-style:none;padding-left:0!important}
.numbered-steps li{position:relative;padding:.7rem .7rem .7rem 2.7rem;border-bottom:1px solid var(--line)}
.numbered-steps li::before{counter-increment:steps;content:counter(steps);position:absolute;left:.35rem;top:.6rem;display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;background:#e0e7ff;color:#3730a3;font-weight:800;font-size:.85rem}

/* ---------- 자료/영상 ---------- */
.video-link{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1rem;border:1px solid #e0e7ff;border-radius:.9rem;background:#fbfcff;transition:.15s}
.video-link:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(79,70,229,.14)}
.source-list{margin-top:1.2rem;padding:1rem 1.1rem;border-radius:.85rem;background:#f8fafc;border:1px solid var(--line);font-size:.85rem;line-height:1.9}
.source-list strong{display:block;margin-bottom:.45rem;color:#1e293b}
.source-list a{color:#1d4ed8;text-decoration:underline;text-underline-offset:2px}
.source-list a:hover{color:#0e7490}

/* ---------- 퀴즈 ---------- */
.quiz-opt{display:block;width:100%;text-align:left;padding:.8rem 1rem;border:2px solid #e5e7f5;border-radius:.8rem;margin-bottom:.6rem;transition:.15s;background:#fff;cursor:pointer;min-height:3rem;line-height:1.6}
.quiz-opt:hover{border-color:var(--accent);background:#f5f6ff}
.quiz-opt.selected{border-color:var(--accent);background:#eef2ff}
.quiz-opt.correct{border-color:#16a34a;background:#f0fdf4}
.quiz-opt.wrong{border-color:#dc2626;background:#fef2f2}
.result[role=status]{min-height:1.75rem}
.qitem{padding-bottom:.4rem}
.quiz-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem;font-size:.8rem;color:#64748b}

/* ---------- 서술형 ---------- */
.essay-box{margin-top:1rem;border:1px solid #e0e7ff;border-radius:.9rem;padding:1rem 1.15rem;background:#fbfcff}
.essay-box textarea{width:100%;min-height:7rem;margin-top:.6rem;padding:.7rem;border:1px solid #cbd5e1;border-radius:.6rem;font-family:inherit;font-size:.88rem;line-height:1.7;resize:vertical}
.essay-box .model-answer{margin-top:.8rem;font-size:.88rem;color:#334155;line-height:1.8}
.rubric{margin-top:.7rem;font-size:.82rem;color:#475569}

/* ---------- 진도 ---------- */
.progress-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .6rem;border-radius:999px;font-size:.7rem;font-weight:800;background:#e2e8f0;color:#475569}
.progress-pill.done{background:#dcfce7;color:#15803d}
.progress-pill.fail{background:#fee2e2;color:#b91c1c}
.progress-bar{height:.6rem;border-radius:999px;background:#e2e8f0;overflow:hidden}
.progress-bar>span{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#0891b2);transition:width .4s ease}

/* ---------- 이전/다음 ---------- */
.phase-links{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.phase-links a{display:block;padding:1rem 1.1rem;border:1px solid #dbeafe;border-radius:1rem;background:#fff;box-shadow:0 4px 16px rgba(30,41,59,.06)}
.phase-links a:last-child{text-align:right}

/* ---------- 모바일 메뉴 ---------- */
.mobile-menu{display:none}
.mobile-menu summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:.75rem;padding:.4rem .8rem}
.mobile-menu nav{display:grid;gap:.35rem;margin-top:.75rem;padding:.75rem;background:#fff;color:#334155;border-radius:.8rem;box-shadow:0 18px 40px rgba(15,23,42,.25);max-height:70vh;overflow-y:auto}
.mobile-menu a{padding:.6rem;border-radius:.55rem}
.mobile-menu a[aria-current=page]{background:#e0e7ff;color:#3730a3;font-weight:700}

/* ---------- 푸터 ---------- */
.site-footer{border-top:1px solid var(--line);background:#fff}
.site-footer>div{max-width:80rem;margin:auto;padding:1.5rem;color:#64748b;font-size:.78rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#c7d2fe;border-radius:8px}

@media(max-width:900px){
  .site-shell{display:block;padding:1.25rem 1rem 5rem}
  .site-sidebar{display:none}
  .mobile-menu{display:block}
  .phase-links{grid-template-columns:1fr}
  .phase-links a:last-child{text-align:left}
  .prose table,.deep-dive table{font-size:.78rem}
  .prose th,.prose td,.deep-dive th,.deep-dive td{padding:.55rem}
  .concept-grid{grid-template-columns:1fr}
  .card{border-radius:1rem}
}
@media print{.site-header,.site-sidebar,.mobile-menu,.phase-links,.site-footer{display:none}.card{box-shadow:none;border:none}.topic-card>div{display:block!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}