.lesson--code {
  --ink: #20212b;
  --muted: #626575;
  --line: #e4e0eb;
  --paper: #fffdf9;
  --soft: #f7f4fb;
  --violet: #7257a8;
  --violet-soft: #eee8fa;
  --mint: #e1f4eb;
  --amber: #fff0c8;
  --rose: #fbe2e6;
  color: var(--ink);
  font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.78;
}
.lesson--code *, .lesson--code *::before, .lesson--code *::after { box-sizing: border-box; }
.lesson--code .lesson-hero { margin: 0 0 2.5rem; padding: clamp(1.5rem,4vw,3rem); border: 1px solid #dcd3ec; border-radius: 1.5rem; background: linear-gradient(135deg,#fbf8ff,#fffaf0); }
.lesson--code .lesson-kicker { margin: 0 0 .6rem; color: var(--violet); font-size: .78rem; font-weight: 850; letter-spacing: .13em; }
.lesson--code .lesson-hero h1 { margin: 0; font-size: clamp(1.85rem,4vw,3.05rem); line-height: 1.22; word-break: keep-all; }
.lesson--code .lesson-scope { margin: 1rem 0 0; color: var(--muted); font-weight: 680; }
.lesson--code .source-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.2rem 0 1.5rem; }
.lesson--code .source-split__card { padding: 1rem 1.1rem; border: 1px solid #ddd5eb; border-radius: 1rem; background: #faf8ff; }
.lesson--code .source-split__card--new { border-color: #9ccdb8; background: #effaf5; }
.lesson--code .source-split__card h3 { margin: .25rem 0 .45rem; font-size: 1.04rem; }
.lesson--code .source-split__count { margin: 0; color: #5f477d; font-size: .82rem; font-weight: 850; }
.lesson--code h2 { margin: 4rem 0 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: clamp(1.45rem,3vw,2rem); line-height: 1.35; scroll-margin-top: 4rem; }
.lesson--code h3 { margin: 2.3rem 0 .9rem; font-size: 1.2rem; line-height: 1.45; }
.lesson--code h4 { margin: 2rem 0 .8rem; font-size: 1.08rem; }
.lesson--code p { margin: .75rem 0; }
.lesson--code :not(pre) > code { padding: .08em .34em; border-radius: .35em; background: #f0edf5; color: #4c386f; font-family: "Cascadia Code",Consolas,monospace; font-size: .92em; overflow-wrap: anywhere; }
.lesson--code .file-section__body { margin-bottom: 4rem; }
.lesson--code .file-section__body, .lesson--code .code-chunk, .lesson--code .retype-shell { min-width: 0; }
.lesson--code .file-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.lesson--code .file-meta > * { padding: .3rem .58rem; border: 1px solid #ddd5eb; border-radius: 999px; background: #faf8ff; color: #55436f; font-size: .78rem; }
.lesson--code .role-sentence { padding: 1rem 1.1rem; border-left: .34rem solid var(--violet); background: #faf8ff; }
.lesson--code .scope-alert, .lesson--code .source-boundary { margin: 1rem 0 1.5rem; padding: .9rem 1rem; border: 1px solid #e4c577; border-radius: .85rem; background: #fff9e9; }
.lesson--code .code-chunk { margin: 2rem 0 2.8rem; padding-top: .2rem; }
.lesson--code .code-chunk > h3, .lesson--code .code-chunk > h4 { padding-left: .78rem; border-left: .3rem solid var(--violet); }
.lesson--code .code-panel { margin: .8rem 0 1rem; overflow: hidden; border: 1px solid #333641; border-radius: .9rem; background: #20222a; box-shadow: 0 .65rem 1.8rem rgba(31,26,46,.08); }
.lesson--code .code-panel__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .58rem .85rem; border-bottom: 1px solid #3b3e49; color: #d9d9e5; font-size: .8rem; }
.lesson--code .copy-code { min-height: 2rem; padding: .25rem .68rem; border: 1px solid #606371; border-radius: .5rem; background: #2d3039; color: #fff; cursor: pointer; }
.lesson--code .copy-code:hover, .lesson--code .copy-code:focus-visible { border-color: #b79de9; outline: 2px solid transparent; background: #493b62; }
.lesson--code pre { margin: 0; padding: 1rem 1.1rem 1.2rem; overflow-x: auto; color: #f5f3f8; font-family: "Cascadia Code",Consolas,monospace; font-size: clamp(.8rem,1.7vw,.93rem); line-height: 1.65; tab-size: 4; }
.lesson--code pre code { font: inherit; white-space: pre; }
.lesson--code .code-disclosure { margin: .8rem 0 1.5rem; border: 1px solid var(--line); border-radius: .9rem; background: #faf9fc; }
.lesson--code .code-disclosure > summary { padding: .85rem 1rem; color: #4d3a70; font-weight: 780; cursor: pointer; }
.lesson--code .code-disclosure .code-panel { margin: 0; border-width: 1px 0 0; border-radius: 0 0 .9rem .9rem; }
.lesson--code .explanation-grid, .lesson--code .test-proof-grid, .lesson--code .retype-contract { display: grid; gap: .7rem; margin: 1rem 0; }
.lesson--code .explanation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.lesson--code .fact { min-width: 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--paper); }
.lesson--code .fact dt { margin: 0 0 .3rem; color: #5c438d; font-size: .86rem; font-weight: 820; }
.lesson--code .fact dd { margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.lesson--code .explanation-grid .fact:last-child { grid-column: 1/-1; background: var(--mint); }
.lesson--code .dialogue { margin: 1.1rem 0 2rem; padding: 1rem; border: 1px solid #ded8e8; border-radius: 1rem; background: var(--soft); }
.lesson--code .dialogue__eyebrow { margin: 0 0 .7rem; color: var(--muted); font-size: .78rem; font-weight: 820; letter-spacing: .05em; }
.lesson--code .dialogue__turns { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.lesson--code .dialogue__turn { display: grid; grid-template-columns: 4.2rem minmax(0,1fr); gap: .65rem; align-items: start; padding: .65rem .75rem; border-radius: .7rem; background: rgba(255,255,255,.86); }
.lesson--code .dialogue__speaker { color: #5b4389; }
.lesson--code .dialogue__turn--nijika .dialogue__speaker { color: #93600e; }
.lesson--code .dialogue__turn--ryo .dialogue__speaker { color: #326377; }
.lesson--code .dialogue__turn--kita .dialogue__speaker { color: #a1465c; }
.lesson--code .retype-shell { margin: 2.8rem 0; padding: 1rem; border: 1px solid #e7c66f; border-radius: 1rem; background: #fffaf0; }
.lesson--code .retype-title { margin-top: .2rem; }
.lesson--code .retype-contract { grid-template-columns: repeat(2,minmax(0,1fr)); }
.lesson--code .retype-contract .fact { border-color: #efddb0; background: #fffdf7; }
.lesson--code .test-anatomy { margin: 1.5rem 0 3rem; padding: 1rem; border: 1px solid #bddbc9; border-radius: 1rem; background: #f6fbf8; }
.lesson--code .test-anatomy h3 { margin-top: .2rem; }
.lesson--code .test-origin { color: var(--muted); font-size: .86rem; font-weight: 700; }
.lesson--code .test-proof-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.lesson--code .test-proof-grid .fact:nth-child(1) { border-top: .3rem solid #83b998; }
.lesson--code .test-proof-grid .fact:nth-child(2) { border-top: .3rem solid #7da8ce; }
.lesson--code .test-proof-grid .fact:nth-child(3) { border-top: .3rem solid #be96cf; }
.lesson--code .test-proof-grid .fact:nth-child(5) { background: #fff5f5; }
.lesson--code .table-scroll { margin: 1rem 0 1.6rem; overflow-x: auto; border: 1px solid var(--line); border-radius: .9rem; }
.lesson--code table { width: 100%; border-collapse: collapse; background: #fff; }
.lesson--code th, .lesson--code td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lesson--code thead th { background: #f2eef8; color: #493667; font-size: .88rem; }
.lesson--code .contract-table tbody th { width: 9.5rem; background: #faf8fd; color: #513d72; }
.lesson--code .concept-figure { margin: 1.5rem 0 2rem; padding: .8rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.lesson--code .concept-figure img { display: block; width: min(100%,62rem); height: auto; margin-inline: auto; border-radius: .65rem; }
.lesson--code .concept-figure figcaption { margin-top: .65rem; color: var(--muted); font-size: .9rem; text-align: center; }
.lesson--code .concept-figure--native { padding: clamp(.8rem,2.5vw,1.35rem); background: linear-gradient(145deg,#faf8ff,#fffaf0); }
.lesson--code .rollback-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.25fr); gap: .65rem; align-items: center; }
.lesson--code .rollback-flow > div { display: grid; gap: .25rem; min-height: 7.6rem; padding: .8rem; align-content: center; border: 1px solid #d8d1e5; border-radius: .8rem; background: #fff; text-align: center; }
.lesson--code .rollback-flow b { display: inline-grid; width: 1.65rem; height: 1.65rem; margin: 0 auto .2rem; place-items: center; border-radius: 50%; background: var(--violet-soft); color: var(--violet); }
.lesson--code .rollback-flow span { font-weight: 820; }
.lesson--code .rollback-flow small { color: var(--muted); }
.lesson--code .rollback-flow > i { color: var(--violet); font-style: normal; font-weight: 900; }
.lesson--code .rollback-flow__error { border-top: .32rem solid #c36a78 !important; }
.lesson--code .rollback-flow__result { border-top: .32rem solid #58a078 !important; }
.lesson--code .sql-visual { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.lesson--code .sql-visual section { display: grid; gap: .55rem; padding: 1rem; border: 1px solid #d8d1e5; border-top: .32rem solid var(--violet); border-radius: .9rem; background: #fff; }
.lesson--code .sql-visual section:last-child { border-top-color: #c48a20; }
.lesson--code .sql-visual p { margin: 0; color: var(--violet); font-size: .8rem; font-weight: 850; }
.lesson--code .sql-visual code { padding: .7rem; border-radius: .6rem; background: #242630; color: #f7f3ff; }
.lesson--code .sql-visual small { color: var(--muted); }
.lesson--code .final-check { padding: 1rem 1.15rem; border: 1px solid #c8dbd0; border-radius: 1rem; background: #f6fbf8; }
@media (max-width: 820px) {
  .lesson--code .source-split, .lesson--code .explanation-grid, .lesson--code .retype-contract, .lesson--code .test-proof-grid, .lesson--code .sql-visual { grid-template-columns: 1fr; }
  .lesson--code .explanation-grid .fact:last-child { grid-column: auto; }
  .lesson--code .rollback-flow { grid-template-columns: 1fr; }
  .lesson--code .rollback-flow > i { transform: rotate(90deg); justify-self: center; }
  .lesson--code .dialogue__turn { grid-template-columns: 1fr; gap: .15rem; }
}
@media print {
  .lesson--code .copy-code { display: none; }
  .lesson--code .code-disclosure > summary { display: none; }
  .lesson--code .code-disclosure:not([open]) > :not(summary) { display: block; }
  .lesson--code .code-panel, .lesson--code .dialogue, .lesson--code .fact, .lesson--code .concept-figure { break-inside: avoid; }
}

.lesson--code .one-line-read { margin: 1rem 0 .7rem; padding: .85rem 1rem; border-left: .34rem solid #d39728; border-radius: 0 .75rem .75rem 0; background: #fff7df; }
.lesson--code .claim-grid, .lesson--code .join-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.lesson--code .native-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.lesson--code .native-mini-grid section { display:grid; gap:.5rem; padding:1rem; border:1px solid #d8d1e5; border-top:.34rem solid #6d86c4; border-radius:.9rem; background:#fff; }
.lesson--code .native-mini-grid section:last-child { border-top-color:#58a078; }
.lesson--code .native-mini-grid p { margin:0; color:#5c438d; font-size:.82rem; font-weight:850; }
.lesson--code .native-mini-grid code { display:block; padding:.7rem; background:#242630; color:#f7f3ff; }
.lesson--code .native-mini-grid small { color:#626575; }
.lesson--code .native-stat-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.65rem; }
.lesson--code .native-stat-grid div { display:grid; gap:.25rem; min-height:6rem; place-content:center; padding:.7rem; border:1px solid #d8d1e5; border-radius:.8rem; background:#fff; text-align:center; }
.lesson--code .native-stat-grid b { color:#5c438d; font-size:1.45rem; }
.lesson--code .native-stat-grid span { color:#626575; font-size:.82rem; }
.lesson--code .version-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr); gap:.65rem; align-items:center; }
.lesson--code .version-flow > div { display:grid; gap:.3rem; padding:1rem; border:1px solid #d8d1e5; border-radius:.8rem; background:#fff; text-align:center; }
.lesson--code .version-flow > i { color:#7257a8; font-style:normal; font-size:1.4rem; font-weight:900; }
.lesson--code .version-flow__commit { border-top:.34rem solid #58a078 !important; }
.lesson--code .version-flow__fail { border-top:.34rem solid #c36a78 !important; }
.lesson--code .claim-grid section, .lesson--code .join-grid section { display:grid; gap:.55rem; padding:1rem; border:1px solid #d8d1e5; border-top:.34rem solid #58a078; border-radius:.9rem; background:#fff; }
.lesson--code .claim-grid section:last-child { border-top-color:#c36a78; }
.lesson--code .join-grid section:first-child { border-top-color:#7a66ad; }
.lesson--code .join-grid section:last-child { border-top-color:#d39728; }
.lesson--code .claim-grid p, .lesson--code .join-grid p { margin:0; color:#5c438d; font-size:.82rem; font-weight:850; }
.lesson--code .claim-grid small, .lesson--code .join-grid code { color:#626575; }
@media (max-width:820px) { .lesson--code .claim-grid, .lesson--code .join-grid, .lesson--code .native-mini-grid, .lesson--code .native-stat-grid, .lesson--code .version-flow { grid-template-columns:1fr; } .lesson--code .version-flow > i { transform:rotate(90deg); justify-self:center; } }


/* W5식 대화 카드: 이름만 두지 않고 화자 초상을 코드 바로 옆에 둔다. */
.lesson--code .lesson-hero h1 { color: #172a46; }
body.code-wrap .lesson--code pre code { white-space: inherit; overflow-wrap: anywhere; word-break: break-word; }
.lesson--code .dialogue__turn { grid-template-columns: 2.7rem 4.2rem minmax(0, 1fr); align-items: center; }
.lesson--code .dialogue__portrait { width: 2.55rem; height: 2.55rem; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid #d8dfea; }
@media (max-width: 720px) {
  .lesson--code .dialogue__turn { grid-template-columns: 2.45rem minmax(0, 1fr); gap: .35rem .55rem; }
  .lesson--code .dialogue__portrait { width: 2.35rem; height: 2.35rem; grid-row: 1 / span 2; }
  .lesson--code .dialogue__speaker { grid-column: 2; }
  .lesson--code .dialogue__speech { grid-column: 2; }
}