/* ============================================================
정보와 디지털 문해력 — 학생용 교과서 공용 스타일
장대현중고등학교 · 2026학년도 2학기
설계 기준
- 바이브코딩연구소 2026 브랜드를 따른다. (brand/문서-스타일-스펙.md)
· 그라데이션·그림문자 금지. 음영은 쿨 그레이만.
· 오렌지는 강조 전용이며 지면의 5%를 넘지 않는다.
· 표 머리행은 흰 배경 + 오렌지 2px 밑줄. 배경을 채우지 않는다.
· 국문 IBM Plex Sans KR · 영문/수치 Archivo · 코드 IBM Plex Mono.
- 화면에서는 PDF 뷰어처럼 페이지가 세로로 이어진다(기본: 스크롤 모드).
- 상단 토글로 한 화면에 한 페이지만 보는 슬라이드 모드로 바꿀 수 있다.
- 인쇄하면 .page 하나가 A4 한 장이 된다.
============================================================ */
:root{
/* 브랜드 토큰 — 바이브코딩연구소 2026 */
--vcl-orange:#FF5C00; /* 시그널 오렌지 · 강조 */
--vcl-carbon:#1B1D21; /* 카본 · 본문/다크면 */
--vcl-cool:#F1F2F4; /* 쿨 그레이 · 음영은 이 색만 */
--vcl-line:#E0E3E7; /* 라인 */
--vcl-rowline:#E8EAED; /* 데이터 행 구분선 */
--vcl-steel:#6C7078; /* 보조 텍스트 */
--vcl-teal:#0E7C86; /* 긍정 상태 */
/* 교과서 내부 이름 → 브랜드 토큰 */
--indigo:var(--vcl-orange);
--indigo-d:#C24A00; /* 오렌지는 흰 바탕에서 대비가 낮아 글자용은 어둡게 */
--indigo-soft:var(--vcl-cool);
--indigo-100:var(--vcl-line);
--ink:var(--vcl-carbon); --ink-2:#33373D; --muted:var(--vcl-steel); --muted-2:#9BA1A9;
--line:var(--vcl-line);
--bg:#ffffff; --bg-zinc:var(--vcl-cool); --bg-soft:#FBFBFC; --desk:#E4E6E9;
--ok:var(--vcl-teal); --ok-bg:#E7F2ED; --ok-line:#BFDCCF;
--warn:#C24A00; --warn-bg:var(--vcl-cool); --warn-line:var(--vcl-line);
--danger:#C24A00; --danger-bg:#FFF1E8; --danger-line:#FFC9A8;
/* 글꼴 */
--sans:'IBM Plex Sans KR','Noto Sans SC','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,'D2Coding',Menlo,Consolas,monospace;
--num:'Archivo','IBM Plex Sans KR',system-ui,sans-serif; /* 영문·수치·라벨 */
/* 치수 */
--topH:54px;
--pageW:900px; /* A4 210mm 비율 기준 */
--pageH:1273px; /* 900 × 1.414 */
--pagePad:64px 62px 40px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topH) + 20px)}
html,body{margin:0}
body{
font-family:var(--sans); color:var(--ink); background:var(--desk);
-webkit-font-smoothing:antialiased; font-size:18px; line-height:1.75;
}
a{color:var(--indigo-d)}
/* ── 한국어 · 중국어 병기 ──────────────────────────────────
본문은 두 언어를 나란히 적어 두고 CSS 로 한쪽만 보여 준다.
문장 단위(문단 안의 글):
한국어中文
덩어리 단위(표·목록·여러 문단을 통째로 바꿀 때):
…
…
코드·명령·파일 이름·영어 용어는 번역하지 않고 그대로 둔다.
─────────────────────────────────────────────────────── */
/* 실제 표시 규칙은 파일 맨 끝에 한 번 더 둔다.
.vflow .vf span 처럼 같은 순위의 컴포넌트 규칙이 뒤에 나오면
여기 적힌 display 가 밀리기 때문이다. */
/* 중국어는 한글보다 글자당 정보량이 많아 같은 크기로 두면 빽빽해 보인다.
자간과 줄간을 조금 벌려 읽기 편하게 맞춘다. */
body.lang-zh{
font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Pretendard,-apple-system,sans-serif;
letter-spacing:.01em;
}
body.lang-zh p, body.lang-zh dd, body.lang-zh li, body.lang-zh td{line-height:1.72}
/* ===== 상단 바 ===== */
#top{
position:fixed; top:0; left:0; right:0; height:var(--topH); z-index:40;
display:flex; align-items:center; gap:9px; padding:0 14px;
background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
#top button{
font-family:var(--num); font-weight:700; font-size:14px; border:1px solid var(--line);
background:#fff; color:var(--ink); padding:7px 11px; cursor:pointer; white-space:nowrap;
}
#top button:hover{border-color:var(--vcl-orange); color:var(--indigo-d)}
#top .lng{border-color:var(--line); color:var(--indigo-d); background:var(--vcl-cool)}
#top .pbtn{border-color:var(--vcl-carbon); background:var(--vcl-carbon); color:#fff}
#top .pbtn:hover{background:#000; color:#fff}
#top .brand{font-weight:800; font-size:16px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#top .brand em{font-style:normal; font-family:var(--num); font-weight:800; color:var(--vcl-orange)}
#top .brand .lesson{color:var(--muted); font-weight:600}
#top .spacer{flex:1}
#top .pct{font-family:var(--num); font-size:14px; color:var(--muted-2); font-weight:600; white-space:nowrap}
#top button[aria-pressed="true"]{background:var(--vcl-carbon); border-color:var(--vcl-carbon); color:#fff}
#prog{position:fixed; top:var(--topH); left:0; height:3px; background:var(--vcl-orange); z-index:41; width:0; transition:width .12s}
@media (max-width:720px){
#top .brand .lesson,#top .pct{display:none}
#top button{padding:7px 9px; font-size:13px}
}
/* ===== 목차 서랍 ===== */
#toc{
position:fixed; top:var(--topH); left:0; bottom:0; width:308px; z-index:39; background:#fff;
border-right:1px solid var(--line); padding:0; overflow:hidden;
display:flex; flex-direction:column;
transform:translateX(-102%); transition:transform .22s;
}
#toc.open{transform:none}
/* 차시 목차가 없는 쪽(첫 화면 index.html 등)은 structureToc 가 블록으로 나누지 않는다.
그대로 두면 overflow:hidden 때문에 긴 목록이 스크롤되지 않는다(2026-10-05). 서랍 전체를 스크롤한다. */
#toc:not([data-structured="1"]){overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:6px 12px 24px}
#toc:not([data-structured="1"]) > *{flex:none}
#toc .h{font-family:var(--num); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); font-weight:700; margin:12px 8px 6px}
#toc .h:first-child{margin-top:2px}
#toc a{display:flex; gap:9px; align-items:baseline; padding:7px 10px; text-decoration:none; color:var(--ink-2); font-size:15px; font-weight:600; line-height:1.4}
#toc a .n{font-family:var(--num); font-size:12.5px; color:var(--muted-2); min-width:30px; flex:none}
#toc a:hover{background:var(--vcl-cool); color:var(--indigo-d)}
#toc a.here{background:var(--vcl-carbon); color:#fff}
#toc a.here .n{color:var(--vcl-orange)}
#toc a.todo{color:var(--muted-2); font-weight:500}
#toc a.todo:hover{background:var(--bg-zinc); color:var(--muted)}
#toc .sect{font-size:14px; font-weight:500; padding-left:34px; color:var(--muted)}
#toc .toc-block{padding:0 12px 18px; overflow-y:auto; overscroll-behavior:contain}
#toc .toc-global{flex:1 1 62%; min-height:220px; background:#fff}
#toc .toc-local{flex:0 1 38%; min-height:170px; background:#F5F6F8; border-top:4px solid var(--vcl-orange)}
#toc .toc-block-title{
position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:7px;
margin:0 -12px 8px; padding:12px 16px 10px; background:rgba(255,255,255,.96);
border-bottom:1px solid var(--line); font-size:15px; font-weight:800; color:var(--ink);
}
#toc .toc-local .toc-block-title{background:rgba(245,246,248,.96)}
#toc .toc-block-title small{margin-left:auto; font-family:var(--num); font-size:10px; letter-spacing:.12em; color:var(--muted-2)}
#toc .toc-part{margin:14px 2px 5px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.01em}
#toc .toc-part:first-of-type{margin-top:2px; padding-top:2px; border-top:0}
#toc .toc-subhead{margin-top:15px; padding-top:10px; border-top:1px solid var(--line)}
#toc .toc-local a{font-size:15.5px; color:var(--ink); font-weight:700}
#toc .toc-local a.here{background:var(--vcl-orange); color:#fff}
#toc .toc-local a.here .n{color:#fff}
#toc a.toc-home{margin:4px 0 8px; background:var(--vcl-cool); border:1px solid var(--line); color:var(--indigo-d); font-weight:800}
#toc a.toc-home:hover{border-color:var(--vcl-orange); background:#FFF7F2}
#scrim{position:fixed; inset:var(--topH) 0 0 0; background:rgba(0,0,0,.28); z-index:38; opacity:0; pointer-events:none; transition:.2s}
#scrim.show{opacity:1; pointer-events:auto}
@media (max-width:720px), (max-height:650px){
#toc{width:min(88vw,340px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
#toc .toc-block{flex:none; min-height:0; overflow:visible}
#toc .toc-global,#toc .toc-local{flex:none; min-height:0}
#toc .toc-local{border-top:4px solid var(--vcl-orange)}
#toc .toc-block-title{position:static}
}
/* ===== 페이지 (PDF처럼 세로로 이어짐) ===== */
main{padding:calc(var(--topH) + 26px) 16px 90px}
.page{
position:relative; width:100%; max-width:var(--pageW); min-height:var(--pageH);
scroll-margin-top:calc(var(--topH) + 14px);
margin:0 auto 26px; background:var(--bg); border:1px solid var(--line);
box-shadow:0 2px 10px rgba(24,24,40,.07); padding:var(--pagePad);
display:flex; flex-direction:column;
}
.page > *:first-child{margin-top:0}
.page .grow{flex:1 1 auto; min-height:8px}
.pnum{
margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
font-family:var(--num); font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.04em;
}
.pnum::before{
content:"장대현중고등학교 · 정보와 디지털 문해력";
font-family:var(--sans); font-weight:400; letter-spacing:0; color:var(--muted);
}
body.lang-zh .pnum::before{content:"长大岘中高等学校 · 信息与数字素养"}
.page.center{justify-content:center}
/* 첫 화면 · 교과서 업데이트 현황 */
.course-status-page .lead{margin-top:20px}
.course-status-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px}
.status-card{min-height:190px; padding:20px 18px; border:1px solid var(--line); background:var(--bg-soft)}
.status-card small{display:block; font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.03em}
.status-card strong{display:block; margin-top:14px; font:900 25px/1.2 var(--num); color:var(--indigo-d)}
.status-card p{margin:14px 0 0; font-size:14px; line-height:1.55; color:var(--muted)}
.status-card.complete{border-top:4px solid var(--vcl-orange); background:#FFF7F2}
.status-card.taught{border-top:4px solid var(--vcl-carbon)}
.status-card.working{border-top:4px solid #7A8089}
.status-cycle{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px; padding:24px 20px 76px; border:1px solid var(--line); background:var(--bg-soft); overflow:hidden}
.status-cycle::before{content:""; position:absolute; left:11%; right:11%; top:52px; height:3px; background:var(--vcl-line)}
.cycle-step{position:relative; z-index:1; min-height:174px; padding:0 12px 16px; border:1px solid var(--line); border-top:0; background:#fff; text-align:center}
.cycle-step::before{content:""; display:block; height:28px; margin:0 -12px 36px; border-bottom:1px solid var(--line); background:var(--vcl-cool)}
.cycle-step:not(:nth-child(4))::after{content:"›"; position:absolute; z-index:2; top:13px; right:-22px; width:26px; height:30px; color:var(--vcl-orange); background:var(--bg-soft); font:800 28px/28px var(--num)}
.cycle-num{position:absolute; top:0; left:50%; transform:translateX(-50%); width:56px; height:56px; border:4px solid var(--bg-soft); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--vcl-carbon); color:#fff; font:800 17px/1 var(--num)}
.cycle-step:first-child .cycle-num,.cycle-step:nth-child(4) .cycle-num{background:var(--vcl-orange)}
.cycle-step>b{display:block; min-height:48px; font-size:18px; line-height:1.3}
.cycle-step>small{display:block; margin-top:8px; color:var(--muted); font-size:13px; line-height:1.45}
.cycle-return{position:absolute; left:9%; right:9%; bottom:18px; height:34px; border-top:3px solid var(--vcl-orange); color:var(--indigo-d); text-align:center; font-size:13px; font-weight:800; line-height:30px}
.cycle-return::before,.cycle-return::after{content:""; position:absolute; top:-3px; width:3px; height:14px; background:var(--vcl-orange)}
.cycle-return::before{left:0}.cycle-return::after{right:0}
.cycle-return>span{display:inline-block; position:relative; top:-16px; padding:0 14px; background:var(--bg-soft)}
.course-status-page .note.aside{margin-top:auto}
@media (max-width:720px){
.course-status-grid{grid-template-columns:1fr}
.status-card{min-height:0}
.status-cycle{grid-template-columns:1fr 1fr; padding-bottom:74px}
.status-cycle::before{display:none}
.cycle-step:not(:nth-child(4))::after{display:none}
}
/* 표지 뒤 안내 3·4쪽 통합본: A4 한 장 안에서 세 가지 읽기 원칙을 함께 보여 준다. */
.howto-combined h2.title{margin-top:20px}
.howto-combined h2.title::after{margin-top:10px}
.howto-combined p{margin:10px 0 0; font-size:16.5px; line-height:1.52}
.howto-combined p.lead{font-size:17.5px; line-height:1.55}
.howto-combined h3.sub{margin-top:17px; font-size:20px}
.howto-combined .kv{margin-top:10px; font-size:15px; line-height:1.4}
.howto-combined .kv th,.howto-combined .kv td{padding:6px 10px}
.howto-combined .note{margin-top:13px; padding:11px 15px}
.howto-combined .note .nt{font-size:15.5px}
.howto-combined .note p{font-size:16px; line-height:1.48; margin-top:4px}
@media (max-width:960px){
:root{--pagePad:34px 24px 56px}
.page{min-height:0}
main{padding-left:8px; padding-right:8px}
}
/* 슬라이드 모드 — 한 화면에 한 페이지 */
body.mode-slide main{padding-top:calc(var(--topH) + 16px); padding-bottom:16px}
body.mode-slide .page{min-height:calc(100vh - var(--topH) - 32px); margin-bottom:0}
body.mode-slide .page.is-off{display:none}
body.mode-slide #pager{display:flex}
#pager{position:fixed; bottom:20px; right:20px; z-index:37; display:none; gap:10px}
#pager button{
width:46px; height:46px; border:1px solid var(--line); background:#fff; color:var(--ink);
font-size:26px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.12);
display:flex; align-items:center; justify-content:center;
}
#pager button:hover:not(:disabled){background:var(--vcl-carbon); color:#fff; border-color:var(--vcl-carbon)}
#pager button:disabled{opacity:.3; cursor:default}
.totop{
position:fixed; bottom:20px; left:20px; z-index:37; width:44px; height:44px;
border:1px solid var(--line); background:#fff; color:var(--ink); font-size:20px; cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.1); display:none; align-items:center; justify-content:center;
}
.totop.show{display:flex}
body.mode-slide .totop{display:none !important}
/* ===== 표지 (index.html 전용) =====
templates/19 교재.dc.html 의 표지 레이아웃을 그대로 옮겼다.
카본 바탕 · 상단 록업 + 문서번호 · 중앙 번호/제목/오렌지바 · 하단 메타 + 도메인 */
.cover{
background:var(--vcl-carbon); color:#F1F2F4;
justify-content:space-between; padding:78px 66px;
-webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cover .cbrand{display:flex; align-items:center; justify-content:space-between; gap:20px}
.cover .lockup{display:flex; align-items:center; gap:13px}
.cover .lockup svg{flex:none}
.cover .lockup .nm{font-size:17px; font-weight:700; letter-spacing:-.03em; color:#F1F2F4; white-space:nowrap}
.cover .lockup .nm em{font-style:normal; color:var(--vcl-orange)}
.cover .lockup .en{font-family:var(--num); font-size:9px; font-weight:700; letter-spacing:.26em; color:#8A8F98; margin-top:5px}
.cover .docno{font-family:var(--num); font-size:12px; font-weight:700; color:var(--vcl-orange); white-space:nowrap}
.cover .cmid{display:flex; flex-direction:column; gap:22px}
.cover .cno{font-family:var(--num); font-size:clamp(38px,7.6vw,88px); font-weight:800; letter-spacing:-.035em; color:var(--vcl-orange); line-height:.95; white-space:nowrap}
.cover .ctitle{font-weight:700; font-size:clamp(34px,5.2vw,48px); line-height:1.2; letter-spacing:-.045em; color:#F1F2F4; margin:0}
.cover .ctitle b{color:var(--vcl-orange); font-weight:700}
.cover .abar{width:72px; height:6px; background:var(--vcl-orange); margin:0}
.cover .csub{font-size:17px; line-height:1.75; color:#8A8F98; margin:0; max-width:540px}
.cover .csub b{color:#C9CDD2; font-weight:600}
.cover .cfoot{display:flex; align-items:flex-end; justify-content:space-between; gap:20px}
.cover .cmeta{font-size:15px; color:#C9CDD2; line-height:1.8; margin:0}
.cover .cmeta b{color:#F1F2F4; font-weight:700}
.cover .cmeta .dim{color:var(--vcl-steel)}
.cover .csite{display:flex; flex-direction:column; align-items:flex-end; gap:3px; white-space:nowrap; line-height:1.35}
.cover .csite .csite-label{font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.02em; color:#8A8F98}
.cover .csite a{font-family:var(--num); font-size:12px; font-weight:700; letter-spacing:.08em; color:#C9CDD2; text-decoration:none}
.cover .csite a:hover{text-decoration:underline; text-underline-offset:3px}
.cover .pnum{display:none}
/* 표지는 언어를 바꿔도 조판이 흔들리지 않아야 한다.
· 브랜드 워드마크와 학교명 록업은 언어와 무관한 고정 표기이므로 국문 스택에 못 박는다
· body.lang-zh 의 자간(.01em)이 표지에는 걸리지 않게 한다 */
body.lang-zh .cover{letter-spacing:0}
.cover .lockup .nm{font-family:var(--sans)}
body.lang-zh .cover .cmeta,body.lang-zh .cover .csub{letter-spacing:.01em}
@media (max-width:700px){
.cover{padding:44px 26px}
.cover .cbrand,.cover .cfoot{flex-direction:column; align-items:flex-start; gap:14px}
.cover .csite{align-items:flex-start}
}
/* 강의자료 접속 전용 페이지 */
.course-access .course-access-body{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:34px 0 20px;
}
.course-access-heading{margin-bottom:30px}
.course-access-label{font-size:16px; font-weight:600; color:var(--muted); margin-bottom:9px}
.course-access-heading h2{font-size:clamp(34px,5vw,52px); line-height:1.15; letter-spacing:-.045em; margin:0}
.course-access-url{
display:block; width:100%; padding:31px 20px; border-top:4px solid var(--vcl-orange);
border-bottom:4px solid var(--vcl-orange); background:var(--bg-zinc); color:var(--ink);
font-family:var(--num); font-size:clamp(18px,4.1vw,42px); font-weight:800;
letter-spacing:.005em; line-height:1.2; white-space:nowrap; text-decoration:none;
}
.course-access-url:hover{background:var(--vcl-cool)}
.course-access-hint{font-size:15px; color:var(--muted); margin:15px 0 0}
.course-access-or{
display:flex; align-items:center; gap:14px; width:100%; margin:30px 0 20px;
font-size:13px; font-weight:700; color:var(--muted-2);
}
.course-access-or::before,.course-access-or::after{content:""; flex:1; height:1px; background:var(--line)}
.course-access-qr{margin:0; text-align:center}
.course-access-qr img{
display:block; width:300px; height:300px; max-width:min(300px,72vw); max-height:min(300px,72vw);
margin:0 auto; image-rendering:pixelated;
}
.course-access-qr figcaption{font-size:14px; color:var(--muted); margin-top:12px}
@media (max-width:700px){
.course-access .course-access-body{padding-top:22px}
.course-access-heading{margin-bottom:22px}
.course-access-url{padding:24px 8px}
.course-access-or{margin:24px 0 16px}
}
/* 차시 속표지 */
.opener{justify-content:center}
.opener .onum{font-weight:700; font-size:13px; letter-spacing:.1em; color:var(--vcl-orange)}
.opener h1{font-weight:700; font-size:clamp(34px,5vw,48px); line-height:1.2; letter-spacing:-.045em; margin:14px 0 0}
.opener .osub{font-size:clamp(18px,2.1vw,22px); line-height:1.55; color:var(--muted); margin:16px 0 0}
.opener .abar{width:52px; height:4px; background:var(--vcl-orange); margin:26px 0 0}
.opener .ometa{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:15.5px; color:var(--muted); line-height:1.9}
.opener .ometa b{color:var(--ink-2); font-weight:700}
/* ===== 본문 기본 ===== */
/* 러닝 헤더 — 좌: 절 이름 / 우: 차시 번호. 템플릿 19 의 머리말 줄 */
.kick{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding-bottom:10px; border-bottom:1px solid var(--line);
font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted);
}
.kick b{font-family:var(--num); font-weight:700; font-size:13px; color:var(--vcl-orange); flex:none}
/* 절 제목 — 아래에 오렌지 바 52×4 */
h2.title{font-weight:700; font-size:30px; line-height:1.3; letter-spacing:-.035em; margin:30px 0 0}
h2.title::after{content:""; display:block; width:52px; height:4px; background:var(--vcl-orange); margin-top:16px}
h3.sub{font-weight:800; font-size:22px; margin:30px 0 0; letter-spacing:-.01em}
h4.sub2{font-weight:700; font-size:18.5px; margin:22px 0 0; color:var(--ink-2)}
p{margin:14px 0 0; color:var(--ink-2)}
p.lead{font-size:20px; line-height:1.65; color:var(--ink-2)}
p b, li b, td b{color:var(--ink); font-weight:700}
.tt{font-weight:700; color:var(--indigo-d)} /* 새 용어 강조 */
p code, li code, td code, th code{
font-family:var(--mono); font-size:.88em; background:var(--bg-zinc);
border:1px solid var(--line); padding:1px 6px; color:var(--ink);
}
hr.sep{border:0; border-top:1px solid var(--line); margin:30px 0 0}
/* 깊이 배지 — 핵심 / 실습 / 확장 */
.badge{
display:inline-block; font-family:var(--num); font-weight:700; font-size:12px; letter-spacing:.04em;
padding:2px 8px; vertical-align:.15em; margin-left:8px;
}
.badge.core{background:#FFF1E8; color:#C24A00; border:1px solid #FFC9A8}
.badge.lab{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line)}
.badge.ext{background:var(--vcl-cool); color:var(--muted); border:1px solid var(--line)}
.cont{font-size:.58em; color:var(--muted); font-weight:600; letter-spacing:0; margin-left:8px; white-space:nowrap}
.badge.assess{background:var(--vcl-carbon); color:#F1F2F4; border:1px solid var(--vcl-carbon); -webkit-print-color-adjust:exact; print-color-adjust:exact}
.badgekey{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 0}
.badgekey span{font-size:14px; color:var(--muted)}
/* 목록 */
.blist{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:9px}
.blist li{position:relative; padding-left:19px; font-size:18px; line-height:1.6; color:var(--ink-2)}
.blist li::before{content:""; position:absolute; left:0; top:.66em; width:7px; height:7px; background:var(--vcl-orange)}
.blist.checks li{padding-left:27px}
.blist.checks li::before{content:""; left:0; top:.28em; width:1.05em; height:1.05em; background:transparent; border:2px solid var(--muted-2)}
.blist.dash li::before{width:11px; height:2px; border-radius:0; top:.8em; background:var(--muted-2)}
.blist small{color:var(--muted)}
ol.nlist{margin:16px 0 0; padding-left:24px}
ol.nlist li{font-size:18px; line-height:1.6; color:var(--ink-2); margin:7px 0 0}
/* 2단 배치 */
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 0}
.row.r3{grid-template-columns:repeat(3,1fr)}
.pane{border:1px solid var(--line); padding:16px 18px; background:#fff; min-width:0}
.pane .pt{font-family:var(--num); font-weight:700; font-size:14px; color:var(--muted); letter-spacing:.04em}
.pane p{margin:8px 0 0; font-size:17px; line-height:1.55}
.pane .blist li{font-size:16.5px}
.pane.accent{border-color:var(--indigo-100); background:var(--indigo-soft)}
.pane.accent .pt{color:var(--indigo-d)}
.pane.warnp{border-color:var(--warn-line); background:var(--warn-bg)}
.pane.warnp .pt{color:var(--warn)}
.pane.okp{border-color:var(--ok-line); background:var(--ok-bg)}
.pane.okp .pt{color:var(--ok)}
.file-groups{align-items:start}
.file-stack{display:flex; flex-direction:column; gap:7px; margin-top:10px}
.file-card{padding:8px 10px; background:#fff}
.file-card>b{font-family:var(--num); font-size:14.5px; color:var(--ink)}
.file-card p{margin-top:3px; font-size:13.5px; line-height:1.38}
#a9 .file-groups>.okp .file-stack{display:grid; grid-template-columns:1fr 1fr}
#a9 .file-groups{margin-top:14px}
#a9 .file-card{padding:7px 9px}
#b5 .fig{max-width:520px; margin:14px auto 0}
#b5 .figcaption{margin-top:5px}
@media (max-width:700px){ .row,.row.r3{grid-template-columns:1fr} }
/* 콜아웃 */
/* 그림문자 없이 왼쪽 색 바와 굵기로 네 단계를 구분한다.
참고=카본 · 좋음=틸 · 주의=오렌지 3px · 금지=오렌지 5px + 오렌지 음영 */
.note{margin:20px 0 0; padding:14px 18px; background:var(--vcl-cool); border-left:3px solid var(--vcl-carbon)}
.note .nt{font-weight:700; font-size:17px; color:var(--vcl-carbon)}
.note p{margin:6px 0 0; font-size:17.5px; line-height:1.6}
.note .blist{margin-top:10px}
.note .blist li{font-size:17px}
.note .blist li::before{background:var(--muted-2)}
.note.ok{background:var(--ok-bg); border-left-color:var(--ok)}
.note.ok .nt{color:var(--ok)}
.note.ok .blist li::before{background:var(--ok)}
.note.warn{background:var(--vcl-cool); border-left-color:var(--vcl-orange)}
.note.warn .nt{color:var(--warn)}
.note.warn .blist li::before{background:var(--vcl-orange)}
.note.stop{background:var(--danger-bg); border-left:5px solid var(--vcl-orange)}
.note.stop .nt{color:var(--danger)}
.note.stop .blist li::before{background:var(--vcl-orange)}
/* 쪽 맨 아래에 놓는 참고 — 본문 상자보다 한 단 낮게 */
.note.aside{background:none; border-left:0; border-top:1px solid var(--line);
padding:13px 2px 0; margin-top:24px}
.note.aside .nt{font-size:14px; letter-spacing:.02em; color:var(--muted)}
.note.aside p{margin:5px 0 0; font-size:16px; line-height:1.6; color:var(--ink-2)}
.note.aside .blist li{font-size:16px}
.note.aside:last-child{margin-bottom:6px}
/* 쪽 꼬리말과 붙지 않게 — .pnum 은 JS가 마지막에 붙인다.
간격은 앞 상자의 아래 여백으로 두고, 꼬리말은 늘 쪽 맨 아래(margin-top:auto)에 둔다(2026-10-12: margin-top:22px가 auto를 덮어 짧은 쪽에서 꼬리말이 가운데 떴다). */
.note.aside + .pnum{margin-top:auto}
.note.aside:has(+ .pnum){margin-bottom:22px}
/* 핵심 질문 */
.bigq{margin:22px 0 0; border-left:5px solid var(--vcl-orange); background:var(--vcl-cool); padding:18px 22px}
.bigq .qt{font-family:var(--num); font-weight:700; font-size:13px; letter-spacing:.1em; color:var(--indigo-d); text-transform:uppercase}
.bigq p{margin:8px 0 0; font-size:21px; line-height:1.55; font-weight:700; color:var(--ink)}
/* 생활 속 장면 (도입 이야기) */
.scene{margin:20px 0 0; border:1px solid var(--line); border-top:3px solid var(--vcl-carbon); background:#fff; padding:18px 22px}
.scene .st{font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--vcl-orange)}
.scene p{margin:9px 0 0; font-size:18.5px; line-height:1.7; color:var(--ink-2)}
.scene p:first-of-type{margin-top:10px}
/* 앞 차시에서 가져오기 */
.recall{margin:20px 0 0; border:1px dashed var(--muted-2); background:#fff; padding:14px 18px}
.recall .rt{font-weight:700; font-size:15px; color:var(--indigo-d)}
.recall .blist{margin-top:8px}
.recall .blist li{font-size:16.5px}
/* 확장 읽기 */
.deep{margin:20px 0 0; border:1px solid var(--line); background:var(--bg-soft); overflow:hidden}
.deep .deep-h{padding:12px 18px; font-weight:700; font-size:16.5px; color:var(--indigo-d); display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line)}
.deep .body{padding:13px 18px 17px; font-size:17px; line-height:1.68}
.deep .body p{margin:11px 0 0}
.deep .body p:first-child{margin-top:0}
/* 직접 해보기 (단계) */
.steps{margin:20px 0 0; padding:17px 18px 18px; border:1px solid var(--line); border-left:3px solid var(--vcl-orange); background:#fff}
.steps .st-h{font-weight:700; font-size:16.5px; color:var(--vcl-carbon); display:flex; gap:8px; align-items:center; margin-bottom:2px}
.steps ol{list-style:none; margin:0; padding:0; counter-reset:st}
.steps ol > li{position:relative; padding:12px 0 12px 40px; border-top:1px solid var(--vcl-rowline); font-size:17.5px; line-height:1.6; color:var(--ink-2)}
.steps ol > li:first-child{border-top:none}
.steps ol > li::before{
counter-increment:st; content:counter(st); position:absolute; left:0; top:11px; width:26px; height:26px;
background:var(--vcl-orange); color:#fff; font-family:var(--num); font-weight:800; font-size:14px;
display:flex; align-items:center; justify-content:center;
}
.steps .code{margin-top:10px}
/* 코드 블록 */
.code{margin:16px 0 0; border:1px solid var(--line); overflow:hidden; background:#fff}
.code .chd{display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line)}
.code .fn{font-family:var(--mono); font-weight:500; font-size:13.5px; color:var(--muted)}
.code .cp{margin-left:auto; font-family:var(--num); font-weight:700; font-size:12px; color:var(--indigo-d); background:#fff; border:1px solid var(--line); padding:4px 10px; cursor:pointer}
.code .cp:hover{background:var(--vcl-orange); color:#fff; border-color:var(--vcl-orange)}
.code pre{margin:0; padding:14px 17px; font-family:var(--mono); font-size:15.5px; line-height:1.68; overflow-x:auto; white-space:pre; color:var(--ink)}
.code pre code{white-space:pre-wrap; word-break:break-word; background:none; border:0; padding:0; font-size:inherit; color:inherit; border-radius:0}
.code.term{background:var(--vcl-carbon); border-color:var(--vcl-carbon)}
.code.term .chd{background:var(--vcl-carbon); border-bottom-color:#33373D}
.code.term .fn{color:#8A8F98}
.code.term pre{color:var(--vcl-cool)}
.code.term .cp{color:var(--vcl-cool); background:transparent; border-color:#4A4E55}
.code.out{background:var(--bg-soft)}
.code.out .chd{background:var(--vcl-cool)}
.code.out pre{color:var(--ink-2); font-size:15px}
/* 표 */
.kv{width:100%; border-collapse:collapse; margin:16px 0 0; font-size:16.5px; line-height:1.55}
.kv th,.kv td{padding:9px 12px; text-align:left; vertical-align:top; color:var(--ink-2); border:0; border-bottom:1px solid var(--vcl-rowline)}
.kv th{background:#fff; font-weight:700; color:var(--ink); border-bottom:2px solid var(--vcl-orange)}
.kv td.c,.kv th.c{text-align:center}
.kv tbody tr:nth-child(even) td{background:#FBFBFC}
.kv tr:nth-child(even) td{background:#FBFBFC}
.tablewrap{overflow-x:auto; margin:16px 0 0}
.tablewrap .kv{margin:0}
/* 흐름 (세로) */
.vflow{margin:18px 0 0; display:flex; flex-direction:column; gap:0}
.vflow .vf{border:1px solid var(--line); border-left:3px solid var(--vcl-orange); background:var(--vcl-cool); padding:12px 16px}
.vflow .vf b{display:block; font-size:17px; font-weight:700; color:var(--vcl-carbon)}
.vflow .vf span{display:block; font-size:15px; color:var(--muted); margin-top:2px}
.vflow .varr{align-self:center; color:var(--vcl-orange); font-size:18px; line-height:1; padding:5px 0}
.vflow .vf.plain{background:#fff; border-left-color:var(--vcl-carbon)}
.vflow .vf.plain b{color:var(--ink)}
/* 흐름 (가로 칩) */
.flow{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; align-items:stretch}
.flow .f{flex:1 1 130px; border:1px solid var(--line); border-top:3px solid var(--vcl-carbon); background:#fff; padding:12px; text-align:center}
.flow .f b{display:block; font-size:16px; font-weight:700; color:var(--vcl-carbon)}
.flow .f span{font-size:13.5px; color:var(--muted)}
.flow .farrow{flex:0 0 auto; display:flex; align-items:center; color:var(--vcl-orange); font-size:22px; font-weight:800}
/* 계층 스택 (층 구조) */
.stack{margin:18px 0 0; display:flex; flex-direction:column; gap:5px}
.stack .lyr{border:1px solid var(--line); padding:12px 16px; background:#fff}
.stack .lyr > .ko,.stack .lyr > .zh{width:100%; grid-template-columns:minmax(180px, 1fr) minmax(0, 2fr); gap:20px; align-items:baseline}
.stack .lyr > .ko{display:grid !important}
.stack .lyr > .zh{display:none !important}
body.lang-zh .stack .lyr > .ko{display:none !important}
body.lang-zh .stack .lyr > .zh{display:grid !important}
.stack .lyr b{font-size:16.5px; font-weight:800; color:var(--ink)}
.stack .lyr span{font-size:16px; color:var(--ink-2); line-height:1.5}
.stack .lyr.hi{background:var(--vcl-cool); border-left:3px solid var(--vcl-orange)}
.stack .lyr.hi b{color:var(--indigo-d)}
@media (max-width:640px){
.stack .lyr > .ko,.stack .lyr > .zh{grid-template-columns:1fr; gap:4px}
}
/* 용어 카드 — 현상·쉬운 설명·정확한 정의·경계·문장 속 사용 */
.term{margin:20px 0 0; border:1px solid var(--line); border-top:3px solid var(--vcl-orange); overflow:hidden; background:#fff}
.term .term-h{padding:12px 18px; background:var(--vcl-cool); border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.term .term-h .w{font-weight:700; font-size:19px; color:var(--vcl-carbon)}
.term .term-h .en{font-family:var(--num); font-size:14px; color:var(--muted)}
.term dl{margin:0; padding:6px 18px 16px}
.term dt{font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--vcl-orange); margin-top:14px}
.term dd{margin:5px 0 0; font-size:17px; line-height:1.62; color:var(--ink-2)}
.term dd.def{color:var(--ink); font-weight:600}
/* 흔한 오해 */
.myth{margin:20px 0 0; border:1px solid var(--line); overflow:hidden}
.myth .m{display:grid; grid-template-columns:74px 1fr; border-top:1px solid var(--line)}
.myth .m:first-child{border-top:none}
.myth .m .tag{display:flex; align-items:center; justify-content:center; font-family:var(--num); font-weight:700; font-size:12.5px; padding:12px 4px}
.myth .m.x .tag{background:#FFF1E8; color:#C24A00}
.myth .m.o .tag{background:var(--ok-bg); color:var(--ok)}
.myth .m .txt{padding:12px 16px; font-size:17px; line-height:1.6; color:var(--ink-2)}
.myth .m.x .txt{background:#FFFCFA}
/* 입력·처리·출력 */
.iot{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 0}
.iot .b{border:0; border-top:3px solid var(--vcl-carbon); padding:12px 0 0; background:#fff}
.iot .b .h{font-weight:700; font-size:12.5px; letter-spacing:.06em; color:var(--vcl-orange)}
.iot .b p{margin:6px 0 0; font-size:16px; line-height:1.5}
@media (max-width:700px){ .iot{grid-template-columns:1fr} }
/* 확인 문제 */
.quiz{margin:20px 0 0; counter-reset:qz}
.quiz .q{border:1px solid var(--line); border-left:3px solid var(--vcl-carbon); padding:14px 18px; margin-top:12px; background:#fff}
.quiz .q > .qq{position:relative; padding-left:34px; font-size:17.5px; line-height:1.6; font-weight:600; color:var(--ink)}
.quiz .q > .qq::before{
counter-increment:qz; content:counter(qz); position:absolute; left:0; top:0; width:25px; height:25px;
background:var(--vcl-orange); color:#fff; border:0;
font-family:var(--num); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;
}
.quiz details{margin:10px 0 0 34px}
.quiz summary{
cursor:pointer; font-family:var(--num); font-weight:700; font-size:13.5px; color:var(--indigo-d);
background:#fff; border:1px solid var(--line); display:inline-block; padding:5px 12px; list-style:none;
}
.quiz summary::-webkit-details-marker{display:none}
.quiz summary:hover{background:var(--vcl-orange); color:#fff; border-color:var(--vcl-orange)}
.quiz details[open] summary{margin-bottom:8px}
.quiz details .a{font-size:16.5px; line-height:1.65; color:var(--ink-2); border-left:3px solid var(--vcl-orange); padding-left:14px}
.quiz details .a p{margin:8px 0 0}
.quiz details .a p:first-child{margin-top:0}
/* 자기 말로 설명하기 */
.mysay{margin:20px 0 0; border:1px solid var(--ok-line); border-left:3px solid var(--ok); background:var(--ok-bg); padding:16px 20px}
.mysay .mt{font-weight:700; font-size:16.5px; color:var(--ok)}
.mysay p{margin:7px 0 0; font-size:17px; line-height:1.6}
.mysay .lines{margin:12px 0 0; display:flex; flex-direction:column; gap:0}
.mysay .lines i{display:block; height:34px; border-bottom:1px dashed #BFDCCF}
/* 기록란 (실습 차시) */
.record{margin:18px 0 0; border:1px solid var(--line); overflow:hidden}
.record .r{display:grid; grid-template-columns:250px 1fr; border-top:1px solid var(--line); min-height:46px}
.record .r:first-child{border-top:none}
.record .r .k{background:var(--vcl-cool); padding:11px 14px; font-size:16px; font-weight:600; color:var(--ink-2)}
.record .r .v{padding:11px 14px}
@media (max-width:640px){ .record .r{grid-template-columns:1fr} .record .r .v{min-height:38px; border-top:1px dashed var(--line)} }
/* 막힐 때 */
.trouble{margin:18px 0 0; border:1px solid var(--line); border-top:3px solid var(--vcl-orange); overflow:hidden; background:#fff}
.trouble .th{padding:11px 18px; font-weight:700; font-size:16px; color:var(--vcl-carbon); background:var(--vcl-cool); border-bottom:1px solid var(--line)}
.trouble table{width:100%; border-collapse:collapse; background:#fff}
.trouble td{border-top:1px solid var(--vcl-rowline); padding:10px 14px; font-size:16.5px; line-height:1.55; color:var(--ink-2); vertical-align:top}
.trouble td:first-child{width:38%; font-weight:600; color:var(--ink); background:#FBFBFC}
/* 그림 */
figure.fig{margin:20px 0 0}
figure.fig img.figimg{display:block; width:100%; height:auto; border:1px solid var(--line); background:#fff}
figure.fig figcaption{margin:9px 4px 0; text-align:center; font-size:15px; font-weight:600; color:var(--muted)}
figure.fig.narrow img.figimg{max-width:560px; margin:0 auto}
.figstage{position:relative; overflow:hidden; border:1px solid var(--line); background:#fff}
.figstage img.figimg{border:0 !important}
.figlabel{
position:absolute; transform:translate(-50%,-50%); z-index:2;
font-family:var(--num); font-size:15px; font-weight:800; letter-spacing:.02em;
color:#fff; background:rgba(27,29,33,.92); border:2px solid #fff;
padding:5px 12px; white-space:nowrap;
box-shadow:0 2px 8px rgba(27,29,33,.16);
}
.figlabel.cpu{left:55%; top:29%}
.figlabel.ram{left:56%; top:76%}
.figlabel.storage{left:16%; top:15%}
@media (max-width:700px){
.figlabel{font-size:11px; padding:3px 7px; border-width:1px}
}
/* 이미지 자리표시자 — assets/img/.png 를 넣으면 자동으로 대체된다 */
.imgph{
border:1px dashed var(--muted-2); background:var(--vcl-cool);
padding:26px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px;
}
.imgph .pid{font-family:var(--num); font-weight:700; font-size:13px; color:#C24A00; background:#FFF1E8; border:1px solid #FFC9A8; padding:3px 10px}
.imgph .pdesc{font-size:16px; font-weight:600; color:var(--ink-2); max-width:520px; line-height:1.5}
.imgph .pspec{font-family:var(--num); font-size:12.5px; color:var(--muted-2)}
/* 핵심 정리 */
.recap{margin:24px 0 0; padding:0; background:none; border:0; counter-reset:rc}
.recap .rt{font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--vcl-orange)}
.recap ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.recap li{position:relative; padding-left:40px; font-size:17px; line-height:1.75; color:var(--ink-2); margin:0}
.recap li::before{
counter-increment:rc; content:counter(rc,decimal-leading-zero); position:absolute; left:0; top:.2em;
font-family:var(--num); font-weight:800; font-size:13px; color:var(--vcl-orange);
}
.practice-start{display:flex;align-items:center;gap:16px;margin:14px 0 0;padding:11px 15px;border-left:4px solid var(--ok);background:var(--ok-bg);color:var(--ink-2)}
.practice-start strong{flex:0 0 auto;font-size:15px;color:var(--ok)}
.practice-start>span{font-size:15px;line-height:1.55}
/* 다음 차시 연결 */
.bridge{
margin:26px 0 0; border:0; padding:26px 28px; background:var(--vcl-carbon);
-webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.bridge .bt{font-weight:700; font-size:13px; letter-spacing:.12em; color:var(--vcl-orange)}
.bridge p{margin:12px 0 0; font-size:16.5px; line-height:1.85; color:#8A8F98}
.bridge p b{color:#F1F2F4; font-weight:600}
.bridge code{background:#33373D; border-color:#4A4E55; color:#F1F2F4}
.bridge a.next{
display:inline-flex; align-items:center; gap:8px; margin-top:13px; font-weight:700; font-size:16.5px;
color:#fff; text-decoration:none; border:1px solid var(--vcl-orange); background:var(--vcl-orange);
padding:9px 15px;
}
.bridge a.next:hover{background:#fff; color:var(--vcl-carbon); border-color:#fff}
/* 목차 끝의 한 줄짜리 시작 링크 — 카본 블록 없이 */
.startlink{display:flex; align-items:center; justify-content:space-between; gap:16px;
margin:22px 0 0; padding-top:16px; border-top:2px solid var(--vcl-carbon)}
.startlink .sl{font-weight:700; font-size:13px; letter-spacing:.12em; color:var(--vcl-orange)}
.startlink a.next{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:16.5px;
color:#fff; text-decoration:none; border:1px solid var(--vcl-orange); background:var(--vcl-orange); padding:9px 15px}
.startlink a.next:hover{background:var(--vcl-carbon); border-color:var(--vcl-carbon)}
/* 차시 이동 (하단) */
.lessonnav{display:flex; gap:10px; justify-content:space-between; margin:26px 0 0; flex-wrap:wrap}
.lessonnav a{
flex:1 1 240px; border:1px solid var(--line); padding:13px 16px; text-decoration:none;
background:#fff; min-width:0;
}
.lessonnav a:hover{border-color:var(--vcl-orange); background:var(--vcl-cool)}
.lessonnav a .d{font-family:var(--num); font-size:12px; color:var(--muted-2); font-weight:700; letter-spacing:.06em}
.lessonnav a .t{display:block; font-size:16.5px; font-weight:700; color:var(--ink); margin-top:3px}
.lessonnav a.dim{opacity:.5; pointer-events:none}
/* 목차 페이지 (index) */
.toclist{list-style:none; margin:18px 0 0; padding:0}
.toclist > li{margin:0}
.toclist .grp{font-family:var(--num); font-weight:700; font-size:12.5px; letter-spacing:.2em; color:var(--vcl-orange); text-transform:uppercase; margin:22px 0 6px; padding-left:2px}
.toclist .grp:first-child{margin-top:6px}
.toclist a{display:flex; align-items:baseline; gap:14px; padding:13px 12px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--vcl-rowline)}
.toclist a:hover{background:var(--vcl-cool)}
.toclist a .tn{font-family:var(--num); font-weight:800; font-size:15px; color:var(--vcl-orange); min-width:44px; flex:none}
.toclist a .tt{font-weight:700; font-size:18px; letter-spacing:-.01em}
.toclist a .td{display:block; font-weight:400; font-size:15px; color:var(--muted); margin-top:2px; line-height:1.45}
/* 한 부를 한 쪽에 담기 위한 조밀한 목차 */
.toclist.dense{margin-top:14px}
.toclist.dense a{padding:6px 10px; gap:12px}
.toclist.dense a .tt{font-size:17px}
.toclist.dense a .td{font-size:14px; line-height:1.4; margin-top:1px}
.toclist.dense .grp{margin:14px 0 4px}
.toclist.dense .grp:first-child{margin-top:2px}
.toclist a.soon{color:var(--muted-2); pointer-events:none}
.toclist a.soon .tn{color:var(--muted-2)}
.toclist a.soon .tt{color:var(--muted); font-weight:600}
.toclist a.soon .tt::after{
content:"집필 예정"; font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.04em;
background:var(--vcl-cool); color:var(--muted-2); border:1px solid var(--line); padding:2px 7px; margin-left:9px; vertical-align:.1em;
}
/* ===== 02회차 전용 시각 요소 ===== */
.result-preview img.figimg{
max-height:300px; object-fit:contain; background:#F7F8FA;
}
.result-showcase{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.result-showcase .fig{margin:0}
.result-showcase .vscode-proof img.figimg{width:100%; max-height:300px; object-fit:contain; background:#17191e}
.result-showcase figcaption{margin-top:5px; font-size:13.5px; line-height:1.45}
.result-showcase.result-three-step{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.result-three-step .vscode-proof{grid-column:1 / -1}
.result-three-step .vscode-proof img.figimg{max-height:220px}
.result-three-step .result-preview{margin-top:0 !important}
.result-three-step .result-preview img.figimg{width:100%; height:205px; max-height:205px; object-fit:contain}
.result-three-step .polished-result img.figimg{background:#fff}
.result-showcase.result-four-screen{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.result-four-screen .fig{margin-top:0 !important}
.result-four-screen .fig img.figimg{width:100%; height:190px; max-height:190px; object-fit:contain}
.result-four-screen .raw-csv img.figimg{background:#17191e}
.result-four-screen .polished-result img.figimg{background:#fff}
.result-proof{display:grid; grid-template-columns:1.18fr .82fr; gap:12px; margin-top:14px}
.result-proof .code{margin-top:0}
.result-proof .code pre{padding:11px 14px; font-size:13.5px; line-height:1.5}
.result-preview{margin-top:13px !important}
.result-preview figcaption{margin-top:6px !important; font-size:14px !important}
.compact-note{margin-top:13px !important; padding:11px 15px !important}
.compact-note .nt{font-size:15.5px !important}
.compact-note p{margin-top:4px !important; font-size:15.5px !important; line-height:1.48 !important}
.compact-steps{margin-top:14px; padding:12px 16px 13px}
.compact-steps ol > li{padding-top:8px; padding-bottom:8px; font-size:16px; line-height:1.48}
.tool-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px}
.tool-cards .pane{margin:0; min-width:0}
.tool-cards .pane .pt{font-size:16px; line-height:1.4}
.tool-cards .pane p{font-size:16px; line-height:1.58}
.agent-map{margin-top:16px; padding:13px 18px 12px; border:1px solid #C8D3E0; border-radius:10px; background:#fff}
.agent-map-label{font-size:14px; font-weight:800; color:#596579}
.agent-map-row{display:grid; grid-template-columns:1fr 44px 1.22fr 44px 1fr; align-items:center; gap:6px; margin-top:8px}
.agent-node{min-width:0; text-align:center}
.agent-node b{display:block; font-size:17px; color:var(--vcl-carbon)}
.agent-node span{display:block; margin-top:3px; font-size:13px; line-height:1.35; color:var(--muted)}
.agent-node-main{padding:8px 12px; border:2px solid var(--vcl-orange); border-radius:9px}
.agent-node-main b{color:#C64218}
.agent-map-link,.agent-map-down{text-align:center; color:var(--vcl-orange); font-family:var(--num); font-size:25px; font-weight:800; line-height:1}
.agent-map-down{margin:2px 0 1px}
.agent-model{display:flex; align-items:center; justify-content:center; gap:14px; width:72%; min-height:40px; margin:0 auto; padding:7px 16px; border:2px solid #AAB7FF; border-radius:9px; text-align:center}
.agent-model b{font-size:16px; color:#413FB4}
.agent-model span{font-size:13px; color:var(--muted)}
.agent-map-caption{margin:7px 0 0; text-align:center; font-size:13px; line-height:1.4; color:var(--muted)}
.terminal-check-row{display:grid; grid-template-columns:.78fr 1.22fr; gap:12px; align-items:stretch; margin-top:13px}
.terminal-check-row .code{margin-top:0}
.terminal-check-row .code pre{min-height:144px; display:flex; align-items:center}
.terminal-check-figure{margin:0 !important}
.terminal-check-figure img.figimg{width:100%; height:176px; object-fit:cover; object-position:top; background:#151719}
.terminal-check-figure figcaption{margin-top:4px !important; font-size:13px !important}
.site-shot figcaption a{color:var(--indigo-d); text-decoration:underline; text-underline-offset:3px}
.cli-gui{margin-top:13px !important}
.cli-gui img.figimg{max-height:210px; object-fit:contain; background:#fff}
.cli-gui figcaption{margin-top:5px !important; font-size:14px !important}
.vscode-anatomy{margin-top:14px !important}
.vscode-anatomy img.figimg{max-height:360px; object-fit:contain; background:#17191e}
.screen-parts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 12px; margin-top:13px}
.screen-parts > div{display:flex; gap:10px; align-items:baseline; padding:10px 12px; border:2px solid #F8B617; border-radius:10px; background:#fff}
.screen-parts b{flex:none; color:var(--vcl-carbon); font-size:15px}
.screen-parts span{font-size:14.5px; color:var(--ink-2)}
.auth-shots{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px}
.auth-shots .fig{margin:0; min-width:0}
.auth-shots img.figimg{width:100%; height:205px; object-fit:contain; background:#F7F8FA}
.auth-shots figcaption{margin-top:5px; font-size:13.5px; line-height:1.45}
.auth-private-card{
min-height:205px; padding:26px 28px; display:flex; flex-direction:column; justify-content:center;
border:1px solid var(--line); background:#F7F8FA; text-align:left;
}
.auth-private-card .auth-private-label{
color:var(--vcl-orange); font-weight:800; font-size:16px; margin-bottom:10px;
}
.auth-private-card p{margin:0; font-size:15px; line-height:1.58; color:var(--ink-2)}
@media (max-width:960px){
.result-proof,.tool-cards,.screen-parts,.auth-shots{grid-template-columns:1fr}
.auth-shots img.figimg{height:auto; max-height:320px}
.agent-map-row{grid-template-columns:1fr 34px 1.2fr 34px 1fr; gap:3px}
.agent-model{width:86%}
.terminal-check-row{grid-template-columns:1fr}
.terminal-check-figure img.figimg{height:auto; max-height:300px; object-fit:contain}
}
.site-shot img.figimg{
max-height:450px; object-fit:contain; object-position:center; background:#F7F8FA;
}
.site-shot.compact{margin-top:14px}
.site-shot.compact img.figimg{height:230px; object-fit:contain}
.site-shot.compact figcaption{margin-top:5px; font-size:14px}
.toolflow .f{min-width:130px}
.toolflow .f b{font-family:var(--num); font-size:18px}
.toolflow .f span{margin-top:4px; line-height:1.4}
/* 실제 앱을 조작하지 않아도 실행 흐름이 보이는 VS Code 축약 그림 */
.mock-ide{margin:20px 0 0; border:1px solid #33373D; background:#1E1E1E; color:#E8EAED; overflow:hidden}
.mock-ide .mock-bar{
display:flex; justify-content:space-between; align-items:center; gap:12px;
min-height:46px; padding:9px 16px; background:#252526; border-bottom:1px solid #3B3B3B;
font-family:var(--mono); font-size:13px; color:#C9CDD2;
}
.mock-ide .mock-bar b{font-family:var(--sans); font-size:13px; color:#fff; background:#0E7C86; padding:6px 11px}
.mock-ide .mock-editor{margin:0; min-height:150px; padding:34px 26px; font-family:var(--mono); font-size:24px; line-height:1.6; color:#F1F2F4}
.mock-ide .mock-terminal{display:flex; align-items:center; gap:24px; padding:12px 20px 18px; border-top:1px solid #3B3B3B; background:#181818}
.mock-ide .mock-terminal span{font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.08em; color:#9BA1A9}
.mock-ide .mock-terminal strong{font-family:var(--mono); font-size:24px; color:#fff}
.runflow .f{min-width:150px}
.run-screen{margin-top:14px !important}
.run-shot{position:relative; overflow:hidden; border:1px solid #33373D; background:#17191e}
.run-shot img.figimg{display:block; width:100%; max-height:260px; object-fit:contain; background:#17191e}
.shot-mark{position:absolute; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--vcl-orange); color:#fff; border:3px solid #fff; font-family:var(--num); font-size:15px; font-weight:900; box-shadow:0 2px 8px rgba(0,0,0,.35)}
.shot-mark.mark-file{left:5%; top:15%}
.shot-mark.mark-run{right:4%; top:18%}
.run-screen figcaption{margin-top:7px !important; font-size:14px !important}
.calc-table td:last-child{font-family:var(--num); font-weight:800; color:var(--vcl-carbon)}
.type-compare .pane{padding:18px}
.type-compare .code{margin-top:10px}
.type-compare .code pre{font-size:20px; text-align:center}
.type-compare .answer{margin-top:12px; font-size:15px; color:var(--muted)}
.type-compare .answer b{font-family:var(--num); font-size:30px; color:var(--vcl-orange); margin-left:8px}
.type-compare .mismatch{border-color:#E2A28A; background:#FFF8F4}
.type-compare .mismatch .answer b{font-family:var(--sans); font-size:22px; color:#B74622}
.label-visual .loose-values{display:flex; justify-content:space-around; gap:12px; margin-top:30px}
.label-visual .loose-values b{font-family:var(--num); font-size:34px; color:var(--muted)}
.named-values{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.named-values span{display:grid; grid-template-columns:1fr 62px; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0}
.named-values i{font-family:var(--mono); font-size:14px; font-style:normal; color:var(--ink-2)}
.named-values b{font-family:var(--num); font-size:24px; color:var(--vcl-orange); text-align:right}
.code-reading .vf span{font-family:var(--mono)}
.prediction .pane p{font-family:var(--mono); font-size:21px; line-height:1.8}
/* 학생용 자료 내려받기와 회차별 폴더 구조 */
.folder-structure-figure{margin-top:16px}
.folder-structure-figure img.figimg{display:block; width:100%; max-height:430px; object-fit:contain; background:#F7F5F0}
.folder-download-row{display:grid; grid-template-columns:minmax(300px,.9fr) 1.1fr; gap:14px; align-items:stretch; margin-top:16px}
.download-cta{display:flex; align-items:center; gap:16px; min-height:106px; padding:20px 22px; background:var(--vcl-orange); color:#fff; text-decoration:none; border:2px solid var(--vcl-orange); transition:.16s ease}
.download-cta:hover{background:#D94B1E; border-color:#D94B1E; color:#fff; transform:translateY(-1px)}
.download-cta .download-icon{display:flex; align-items:center; justify-content:center; width:48px; height:48px; flex:0 0 48px; border-radius:50%; background:#fff; color:var(--vcl-orange); font-family:var(--num); font-size:29px; font-weight:900}
.download-cta b{display:block; font-size:19px; line-height:1.35}
.download-cta small{display:block; margin-top:4px; font-family:var(--mono); font-size:12.5px; color:#FFE4DA}
.download-note{padding:17px 19px; border:1px solid var(--line); border-left:3px solid var(--vcl-carbon); background:#fff}
.download-note b{font-size:16px; color:var(--vcl-carbon)}
.download-note p{margin:7px 0 0; font-size:15px; line-height:1.55; color:var(--ink-2)}
@media (max-width:700px){
.folder-download-row{grid-template-columns:1fr}
.folder-structure-figure img.figimg{max-height:none}
}
@media print{
.folder-prep-page .folder-structure-figure img.figimg{max-height:92mm}
.folder-prep-page .folder-download-row{grid-template-columns:.9fr 1.1fr; gap:8px; margin-top:8px}
.folder-prep-page .download-cta{min-height:0; padding:9px 11px}
.folder-prep-page .download-note{padding:8px 10px}
.folder-prep-page .steps{margin-top:8px; padding:8px 10px}
.folder-prep-page .steps ol > li{padding-top:4px; padding-bottom:4px; font-size:9pt; line-height:1.3}
}
@media (max-width:700px){
.site-shot.compact img.figimg{height:auto; max-height:360px}
.mock-ide .mock-editor{font-size:19px; min-height:120px; padding:26px 18px}
.named-values span{grid-template-columns:1fr 52px}
}
/* ===== 인쇄 — .page 하나 = A4 한 장 ===== */
@media print{
@page{ size:A4 portrait; margin:16mm 15mm }
#top,#toc,#scrim,#prog,#pager,.totop,.code .cp{display:none !important}
html,body{background:#fff}
body{font-size:11pt; line-height:1.6}
main{padding:0}
.page{
width:auto; max-width:100%; min-height:0 !important; margin:0; padding:0;
border:none; border-radius:0; box-shadow:none; display:block;
break-after:page; page-break-after:always;
}
.page:last-child{break-after:auto; page-break-after:auto}
.page.is-off{display:block !important}
.pnum{margin-top:auto}
.cover{background:var(--vcl-carbon) !important; color:#F1F2F4; padding:26mm 22mm}
.cover .ctitle{color:#F1F2F4; font-size:34pt}
.cover .cno{font-size:52pt}
.grow{display:none}
h2.title{font-size:19pt} h3.sub{font-size:14pt} h4.sub2{font-size:12pt}
p.lead{font-size:11.5pt}
.row.r3{grid-template-columns:repeat(3,1fr)}
.note,.code,figure.fig,.steps,.row,.pane,.kv,.recap,.deep,.term,.myth,.quiz .q,
.stack,.vflow,.flow,.iot,.trouble,.record,.bigq,.scene,.recall,.mysay,.blist li{
break-inside:avoid; page-break-inside:avoid;
}
h2.title,h3.sub,h4.sub2{break-after:avoid; page-break-after:avoid}
/* 세로로 긴 그림이 A4 한 장을 넘지 않도록 높이를 제한한다 */
figure.fig img.figimg{max-height:198mm; width:auto; max-width:100%; margin:0 auto}
figure.fig.print-short img.figimg{max-height:58mm}
figure.fig.print-medium img.figimg{max-height:92mm}
figure.fig.print-compact img.figimg{max-height:70mm}
/* 내용은 그대로 유지하되 A4에서 다음 장으로 밀리는 설치·확인 쪽만 조밀하게 인쇄한다. */
.page.print-tight h2.title{font-size:17pt; margin-top:15px}
.page.print-tight h2.title::after{margin-top:8px; height:3px}
.page.print-tight p{margin-top:8px; font-size:9.8pt; line-height:1.42}
.page.print-tight p.lead{font-size:10.2pt; line-height:1.45}
.page.print-tight .row{margin-top:10px; gap:9px}
.page.print-tight .pane{padding:9px 11px}
.page.print-tight .pane p{font-size:9.4pt; line-height:1.38}
.page.print-tight .steps{margin-top:10px; padding:9px 11px 10px}
.page.print-tight .steps .st-h{font-size:9.8pt}
.page.print-tight .steps ol > li{padding:5px 0 5px 30px; font-size:9.4pt; line-height:1.35}
.page.print-tight .steps ol > li::before{top:5px; width:20px; height:20px; font-size:9pt}
.page.print-tight .code{margin-top:9px}
.page.print-tight .code .chd{padding:5px 9px}
.page.print-tight .code .fn{font-size:8.5pt}
.page.print-tight .code pre{padding:7px 10px; font-size:8.8pt; line-height:1.4}
.page.print-tight .note{margin-top:10px; padding:8px 11px}
.page.print-tight .note .nt{font-size:9.5pt}
.page.print-tight .note p{margin-top:3px; font-size:9.2pt; line-height:1.38}
.page.print-tight figure.fig{margin-top:10px}
.page.print-tight figure.fig figcaption{margin-top:4px; font-size:8.6pt; line-height:1.35}
.page.print-tight .pnum{padding-top:8px; font-size:8.5pt}
.page.print-kernel-page figure.fig img.figimg{max-height:58mm}
.page.print-install .site-shot img.figimg,
.page.print-vscode-install .site-shot img.figimg{height:auto; max-height:46mm}
.page.print-result-page .result-showcase{gap:7px; margin-top:9px}
.page.print-result-page .result-showcase .vscode-proof img.figimg,
.page.print-result-page .result-showcase .result-preview img.figimg{height:auto; max-height:52mm}
.page.print-result-page .result-preview{margin-top:0 !important}
.page.print-result-page .result-three-step{gap:5px 7px}
.page.print-result-page .result-three-step .vscode-proof img.figimg{max-height:39mm}
.page.print-result-page .result-three-step .result-preview img.figimg{height:36mm; max-height:36mm}
.page.print-result-page .result-four-screen{gap:5px 7px}
.page.print-result-page .result-four-screen .fig img.figimg{height:35mm; max-height:35mm}
.page.print-cli-page .cli-gui img.figimg{height:auto; max-height:34mm}
.page.print-check-page .vflow{margin-top:10px}
.page.print-check-page .vflow .vf{padding:7px 10px}
.page.print-check-page .vflow .vf b{font-size:9.6pt}
.page.print-check-page .vflow .vf span{font-size:8.8pt}
.page.print-check-page .vflow .varr{padding:2px 0; font-size:10pt}
.page.print-check-page .bridge{margin-top:10px; padding:9px 12px}
.page.print-check-page .bridge p{margin-top:5px; font-size:9pt; line-height:1.4}
.page.print-auth-page .auth-shots{gap:8px; margin-top:9px}
.page.print-auth-page .auth-shots img.figimg{height:36mm; max-height:36mm}
.page.print-auth-page .auth-shots figcaption{font-size:8pt}
.page.print-auth-page .auth-private-card{min-height:36mm; padding:7mm 6mm}
.page.print-auth-page .auth-private-card .auth-private-label{font-size:9pt; margin-bottom:3mm}
.page.print-auth-page .auth-private-card p{font-size:8.5pt; line-height:1.4}
.figstage{max-width:100%; margin:0 auto}
.code pre{white-space:pre-wrap; word-break:break-word; font-size:9.5pt}
.quiz details{display:block}
.quiz details summary{display:none}
.quiz details .a{display:block !important}
a{color:var(--ink); text-decoration:none}
.lessonnav{display:none}
}
/* ── 02-3 · 웹과 언어의 역사 ───────────────────────────── */
.browser-address{margin:34px auto 24px; width:86%; min-height:82px; display:flex; align-items:center; gap:15px; padding:0 26px; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 8px 24px rgba(27,29,33,.08); font-family:var(--mono)}
.browser-address .lock{font-size:12px; color:var(--ok)}
.browser-address strong{font-size:30px; letter-spacing:-.02em}
.browser-address.focus mark{background:#FFF1E8; color:var(--indigo-d); padding:5px 7px; border-radius:6px; font-weight:800}
.reveal{text-align:center; margin:8px 0 22px}
.reveal>span{display:block; font:900 74px/1 var(--num); letter-spacing:.06em}
.reveal>b{display:block; margin-top:8px; font:800 24px/1.3 var(--num); color:var(--indigo-d)}
.reveal p{margin:8px 0 0; color:var(--muted)}
.www-words{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0}
.www-words>div{padding:13px 10px; border:1px solid var(--line); background:var(--bg-soft); text-align:center}
.www-words b{display:block; font:800 18px/1.25 var(--num); color:var(--indigo-d)}
.www-words span{display:block; margin-top:5px; font-size:13px; color:var(--muted)}
.www-concept-figure{width:90%; margin:17px auto 0 !important; text-align:center}
.www-concept-figure img.figimg{display:block; width:100%; height:270px; object-fit:contain; background:#fff}
.www-concept-figure figcaption{margin-top:5px !important; font-size:12px; line-height:1.4; color:var(--muted)}
.www-definition{display:flex; align-items:baseline; justify-content:center; gap:12px; margin-top:9px}
.www-definition b{font:900 38px/1 var(--num); color:var(--ink)}
.www-definition span{font:800 23px/1.2 var(--num); color:var(--indigo-d)}
.www-page .www-words{margin:13px 0}
.www-page p.lead{margin-top:10px; font-size:16px; line-height:1.55}
.www-page .note.aside{margin-top:14px}
.url-parts{display:grid; grid-template-columns:1.05fr .8fr 1.45fr; gap:10px; margin-top:22px}
.url-parts>div{padding:16px 14px; border:1px solid var(--line); background:var(--bg-soft); text-align:center}
.url-parts b{display:block; font:800 19px/1.2 var(--mono); margin-bottom:7px}
.url-parts span{font-size:14px; color:var(--muted)}
.history-split{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.history-card{margin:0 !important; min-height:390px; border:1px solid var(--line); background:var(--bg-soft); padding:17px; display:flex; flex-direction:column}
.history-card img.figimg{height:278px; object-fit:cover; object-position:top; border-radius:0}
.history-card figcaption{margin-top:10px !important}
.history-card .year{font:900 44px/1 var(--num); color:var(--indigo-d)}
.history-card h3{font:800 25px/1.2 var(--num); margin:18px 0 4px}
.history-card p{margin:0; font-size:15px; line-height:1.45}
.network-four{position:relative; height:225px; margin-top:12px}
.network-four::before,.network-four::after{content:""; position:absolute; inset:48px 74px; border:2px solid var(--vcl-orange); transform:rotate(28deg)}
.network-four::after{transform:rotate(-28deg)}
.network-four i{position:absolute; width:78px; height:78px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid var(--ink); font:700 12px var(--num); font-style:normal; z-index:2}
.network-four i:nth-child(1){left:16px; top:8px}.network-four i:nth-child(2){right:16px; top:8px}.network-four i:nth-child(3){left:16px; bottom:8px}.network-four i:nth-child(4){right:16px; bottom:8px}
.mini-timeline{display:grid; grid-template-columns:repeat(5,1fr); margin-top:16px; border-top:3px solid var(--ink)}
.mini-timeline span{padding:10px 7px 0; font-size:12px; line-height:1.35; border-left:1px solid var(--line)}
.mini-timeline b{display:block; font:800 18px var(--num); color:var(--indigo-d)}
.internet-web-scope{margin-top:16px; padding:15px 17px; border:2px solid var(--ink); background:var(--bg-soft)}
.scope-head{display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:center}
.scope-head b{font:900 27px/1.15 var(--num)}
.scope-head>span{font-size:14px; color:var(--muted)}
.internet-services{display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:9px; margin-top:12px}
.internet-services>div{min-height:66px; padding:10px; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.internet-services .web-layer{border:2px solid var(--vcl-orange); background:#FFF7F2}
.internet-services b{font-size:14px}.internet-services span,.internet-services small{margin-top:3px; font-size:11px; line-height:1.35; color:var(--muted)}
.internet-web-scope>p{margin:9px 0 0; font-size:12px; text-align:right; color:var(--muted)}
.web-history-flow{display:grid; grid-template-columns:1fr 28px 1fr 28px 1.12fr; gap:7px; align-items:stretch; margin-top:14px}
.history-moment{min-height:285px; padding:13px; border:1px solid var(--line); background:var(--bg-soft); text-align:center}
.history-moment .moment-year{display:block; font:900 24px/1 var(--num); color:var(--indigo-d)}
.history-moment h3{margin:7px 0 8px; font:800 17px/1.2 var(--num)}
.history-moment p{margin:8px 0 0; font-size:11px; line-height:1.45; color:var(--muted)}
.history-link{display:flex; align-items:center; justify-content:center; font:900 25px/1 var(--num); color:var(--vcl-orange)}
.history-moment .network-four.small{height:125px; margin:8px 0}
.history-moment .network-four.small::before{inset:24px 26px; border:2px solid var(--vcl-orange); transform:none}
.history-moment .network-four.small::after{display:none}
.email-moment .at-symbol{width:104px; height:104px; margin:20px auto 10px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:3px solid var(--vcl-orange); background:#fff; font:900 50px/1 var(--num); color:var(--indigo-d)}
.www-evidence{display:grid; grid-template-columns:98px 1fr; gap:9px; align-items:center; margin-top:8px; text-align:left}
.www-evidence img{width:100%; height:158px; object-fit:cover; object-position:top; border:1px solid var(--line); background:#fff}
.www-evidence p{margin:0}
.www-evidence small{display:block; margin-top:9px; font-size:9.5px; line-height:1.45}
.history-distinction{display:grid; grid-template-columns:160px 1fr; gap:13px; align-items:center; margin-top:13px; padding:12px 14px; border-left:4px solid var(--vcl-orange); background:var(--bg-soft)}
.history-distinction>b{font:900 17px/1.2 var(--num); color:var(--indigo-d)}
.history-distinction>span{font-size:12px; line-height:1.5}
.web-evolution-page .lead{margin-top:16px}
.web-evolution-figure{margin-top:16px !important}
figure.web-evolution-figure img.figimg{display:block; width:100%; height:350px; object-fit:contain; background:#fff; border:0}
.web-evolution-figure figcaption{margin-top:6px !important; font-size:12px; color:var(--muted)}
.web-evolution-labels{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:14px}
.web-evolution-labels>div{min-height:112px; padding:12px 10px; border-top:4px solid var(--vcl-orange); background:var(--bg-soft)}
.web-evolution-labels b{display:block; font-size:14px}
.web-evolution-labels span{display:block; margin-top:7px; font-size:11px; line-height:1.45; color:var(--muted)}
.web-evolution-page .note.aside{margin-top:auto}
.www-page .note.aside{margin-top:auto}
.www-page .note.aside + .pnum,.web-evolution-page .note.aside + .pnum{margin-top:auto}
.network-evolution{display:grid; grid-template-columns:1fr .72fr 1fr; gap:12px; align-items:center; margin-top:14px}
.arpanet-box,.internet-box{min-height:190px; padding:13px; border:1px solid var(--line); background:var(--bg-soft); text-align:center}
.arpanet-box>b,.internet-box>b{display:block; font:800 18px/1.2 var(--num); color:var(--indigo-d)}
.arpanet-box>span,.internet-box>span{display:block; margin-top:7px; font-size:11px; line-height:1.35; color:var(--muted)}
.network-four.small{height:108px; margin-top:7px}
.network-four.small::before,.network-four.small::after{inset:23px 50px}
.network-four.small i{width:42px; height:42px; font-size:8px}
.network-four.small i:nth-child(1),.network-four.small i:nth-child(2){top:2px}.network-four.small i:nth-child(3),.network-four.small i:nth-child(4){bottom:2px}
.evolution-arrow{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--indigo-d)}
.evolution-arrow>b{font:900 20px/1.1 var(--num)}.evolution-arrow>strong{margin-top:4px; font-size:13px}.evolution-arrow>small{margin-top:6px; font-size:10px; line-height:1.35; color:var(--muted)}.evolution-arrow>i{margin-top:5px; font:900 25px/1 var(--num); font-style:normal; color:var(--vcl-orange)}
.many-networks{position:relative; height:112px; margin:6px 0}
.many-networks::before,.many-networks::after{content:""; position:absolute; left:32px; right:32px; top:54px; border-top:2px solid var(--vcl-orange); transform:rotate(25deg)}
.many-networks::after{transform:rotate(-25deg)}
.many-networks i{position:absolute; width:34px; height:34px; border-radius:50%; background:#fff; border:2px solid var(--ink); z-index:2}
.many-networks i:nth-child(1){left:10px;top:8px}.many-networks i:nth-child(2){right:10px;top:8px}.many-networks i:nth-child(3){left:calc(50% - 17px);top:38px}.many-networks i:nth-child(4){left:10px;bottom:4px}.many-networks i:nth-child(5){right:10px;bottom:4px}.many-networks i:nth-child(6){left:calc(50% - 17px);bottom:0}
.history-evidence{display:grid; grid-template-columns:220px 1fr; gap:14px; margin-top:14px; align-items:stretch}
.history-evidence figure{margin:0 !important}.history-evidence img.figimg{height:116px; object-fit:cover; object-position:top}.history-evidence figcaption{margin-top:5px !important; font-size:10px}
.timeline-short{display:grid; grid-template-columns:repeat(3,1fr); border-top:3px solid var(--ink); align-content:start; margin-top:22px}
.timeline-short span{padding:9px 6px 0; border-left:1px solid var(--line)}.timeline-short b{display:block; font:800 18px/1.1 var(--num); color:var(--indigo-d)}.timeline-short em{display:block; margin-top:5px; font-size:11px; font-style:normal}
.address-compare{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:32px 0 18px}
.address-compare>div{padding:16px; border:1px solid var(--line); background:var(--bg-soft)}
.address-compare small{display:block; margin-bottom:10px; font-size:12px; font-weight:700; color:var(--muted)}
.address-compare code{display:block; padding:14px 12px; background:#fff; border:1px solid var(--line); font:700 18px/1.3 var(--mono); white-space:nowrap}
.address-compare mark{background:#FFF1E8; color:var(--indigo-d); padding:3px 4px; border-radius:4px}
.protocol-row{margin-top:26px}
.https-concept-figure{width:88%; margin:16px auto 0 !important; text-align:center}
.https-concept-figure img.figimg{display:block; width:100%; height:260px; object-fit:contain; background:#fff}
.https-concept-figure figcaption{margin-top:5px !important; font-size:12px; line-height:1.4; color:var(--muted)}
.protocol-page .note.warn{margin-top:14px}
.protocol-visual{display:grid; grid-template-columns:1fr 1.5fr 1fr; align-items:center; gap:0; margin:45px 0 28px; text-align:center}
.protocol-visual span{padding:20px 10px; border:2px solid var(--ink); font-weight:800}
.protocol-visual .encrypted{border-left:0; border-right:0; color:var(--indigo-d); background:#FFF1E8; font-size:16px}
.request-cycle{position:relative; display:grid; grid-template-columns:1fr 1.15fr 1.15fr; gap:90px; align-items:center; margin:25px 0 14px; min-height:190px}
.request-cycle>div:not(.req-arrow):not(.res-arrow){min-height:120px; padding:20px 12px; border:2px solid var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.request-cycle span{font-weight:800; font-size:20px}.request-cycle small{margin-top:7px; color:var(--muted); font-size:12px}
.request-cycle .req-arrow,.request-cycle .res-arrow{position:absolute; left:48%; width:27%; text-align:center; font-size:13px; color:var(--indigo-d)}
.request-cycle .req-arrow{top:44px}.request-cycle .res-arrow{bottom:42px}
.request-once{display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:15px; align-items:center; margin:34px 0 22px}
.browser-box,.server-box{min-height:135px; padding:19px 12px; border:2px solid var(--ink); background:var(--bg-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.browser-box b,.server-box b{font-size:23px}.browser-box>span,.server-box>span{margin-top:8px; font-size:13px; color:var(--muted)}
.exchange-pair{display:flex; flex-direction:column; gap:22px; text-align:center; color:var(--indigo-d)}
.exchange-pair span{font-size:14px}.exchange-pair b{font-size:16px}
.one-pair-rule{display:grid; grid-template-columns:1fr 28px 1fr 28px 1.3fr; gap:7px; align-items:center; margin:12px 0 24px}
.one-pair-rule>div{min-height:108px; padding:13px 9px; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.one-pair-rule b{font:900 28px/1 var(--num); color:var(--indigo-d)}.one-pair-rule span{margin-top:8px; font-size:12px; color:var(--muted)}.one-pair-rule i{font-style:normal; font-size:22px; color:var(--vcl-orange); text-align:center}
#s4 .note.aside{margin-top:auto}
#s4 .note.aside + .pnum{margin-top:auto}
.big-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; list-style:none; padding:0; margin:12px 0 16px; counter-reset:steps}
.big-steps li{counter-increment:steps; border-top:3px solid var(--ink); padding:10px 7px; font-size:13px; line-height:1.4}
.big-steps li::before{content:counter(steps); display:block; font:900 22px var(--num); color:var(--indigo-d)}
.first-browser{width:66%; margin:8px auto 0 !important}.first-browser img.figimg{max-height:270px; object-fit:cover; object-position:top}
.history-hero{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:18px}.history-hero figure{margin:0 !important}.history-hero img.figimg{height:390px; object-fit:cover}.hero-copy{padding:24px; background:var(--bg-soft); border:1px solid var(--line)}.hero-copy p{font-size:16px; line-height:1.6}
.punch-card-mini{height:115px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:18px; margin:15px 0; border:1px solid #B9A574; background:#EFE3BC}.punch-card-mini i{display:block; width:12px; height:18px; background:var(--ink); align-self:center; justify-self:center}.punch-card-mini i:nth-child(2n){align-self:end}.punch-card-mini i:nth-child(3n){align-self:start}
.expression-road{display:flex; align-items:center; justify-content:space-between; gap:6px; margin:22px 0}.expression-road span{padding:12px 10px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:700; text-align:center}.expression-road b{color:var(--indigo-d)}
.language-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:20px}.lang-card{min-height:210px; padding:15px; border:1px solid var(--line); background:var(--bg-soft)}.lang-card b{display:block; margin-top:10px; font:800 15px var(--num)}.lang-card p{margin:7px 0 0; font-size:13px; line-height:1.45; color:var(--muted)}.lang-visual{width:68px; height:68px; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); font:900 28px var(--num); background:#fff}.ai-card{border-color:var(--vcl-orange); background:#FFF7F2}.ai-card .lang-visual{border-color:var(--vcl-orange); color:var(--indigo-d)}
.language-grid.expanded{grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px}
.language-grid.expanded .lang-card{min-height:164px; padding:11px}
.language-grid.expanded .lang-visual{width:48px; height:48px; font-size:20px}
.language-grid.expanded .lang-card b{margin-top:7px; font-size:12px}
.language-grid.expanded .lang-card p{margin-top:5px; font-size:10.5px; line-height:1.35}
#s6 .compact-note{margin-top:auto !important}
#s6 .compact-note + .pnum{margin-top:auto}
#s6 .compact-note:has(+ .pnum){margin-bottom:22px}
.code-ladder{display:grid; gap:9px; margin-top:18px}.code-ladder>div{display:grid; grid-template-columns:150px 1fr; align-items:center; min-height:72px; border:1px solid var(--line); background:var(--bg-soft)}.code-ladder>div>span{padding:13px; font:800 14px var(--num)}.code-ladder code{display:block; padding:13px 18px; border-left:1px solid var(--line); font-size:15px; white-space:normal}.code-ladder .current{border:2px solid var(--vcl-orange); background:#fff}.code-ladder .natural{background:var(--ink); color:#fff}.code-ladder .natural code{color:#fff;border-color:#4A4D53}.low-high{margin-top:16px}.low-high .pane{padding:16px}.low-high p{font-size:14px}
.ai-code-flow{display:grid; grid-template-columns:1.25fr 34px .8fr 34px 1.25fr 34px .8fr; gap:8px; align-items:stretch; margin:42px 0}.ai-code-flow>div:not(.flow-arrow){padding:19px 13px; border:2px solid var(--ink); display:flex; flex-direction:column; justify-content:center; text-align:center; min-height:150px}.ai-code-flow p{margin:8px 0 0; font-size:13px; line-height:1.45}.ai-code-flow code{margin-top:10px; font-size:13px}.ai-code-flow strong{font:900 34px var(--num); color:var(--indigo-d)}.ai-code-flow .ai-bridge{border-color:var(--vcl-orange); background:#FFF1E8}.flow-arrow{display:flex; align-items:center; justify-content:center; font-size:25px; color:var(--indigo-d)}
/* ══════════════════════════════════════════════════════════
언어 표시 — 반드시 파일의 마지막
컴포넌트 규칙(.vflow .vf span 등)과 순위가 같아 뒤에 오는 쪽이
이긴다. 그래서 여기에 두고 !important 로 못 박는다.
══════════════════════════════════════════════════════════ */
.zh{display:none !important}
body.lang-zh .ko{display:none !important}
body.lang-zh .zh{display:inline !important}
/* 표·목록처럼 덩어리를 통째로 바꿀 때 쓰는 변형 */
.blk{display:block !important}
.zh.blk{display:none !important}
body.lang-zh .ko.blk{display:none !important}
body.lang-zh .zh.blk{display:block !important}
/* 02-1 OpenCode PATH recovery */
.error-reading-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:16px;align-items:stretch;margin-top:15px}
.error-reading-grid .code{margin:0}
.error-terminal pre{min-height:286px;white-space:pre-wrap;display:flex;flex-direction:column;justify-content:center;font-size:14px;line-height:1.55}
.error-terminal .terminal-command{color:#f4f4f5}
.error-terminal .terminal-error{color:#ff6b6b}
.error-parts{display:grid;grid-template-rows:repeat(3,1fr);gap:10px}
.error-parts>div{border:1px solid var(--line);background:var(--bg-soft);padding:14px 15px;display:flex;flex-direction:column;justify-content:center}
.error-parts>div:nth-child(2){border-color:var(--orange);background:var(--orange-pale)}
.error-parts b{font-size:16px;line-height:1.35}.error-parts span{margin-top:6px;font-size:14px;line-height:1.45;color:var(--ink2)}
.compact-path-results{margin-top:10px;gap:10px}.compact-path-results .pane{padding:11px 14px}.compact-path-results .pt{font-size:15px}.compact-path-results p{font-size:14px;line-height:1.42;margin-top:4px}
.path-fix-code{margin-top:10px}.path-fix-code pre{font-size:12.2px;line-height:1.38;padding-top:12px;padding-bottom:12px}
.path-reopen{margin:9px 0 0;font-size:15px;line-height:1.48}
@media(max-width:900px){.error-reading-grid{grid-template-columns:1fr}.error-terminal pre{min-height:0}.error-parts{grid-template-rows:none}.path-fix-code pre{font-size:11.8px}}
@media print{.opencode-error-page .error-terminal pre{min-height:72mm;font-size:8.8pt}.opencode-error-page .error-parts>div{padding:8px 10px}.opencode-path-page .code{margin-top:7px}.opencode-path-page .code pre{padding:8px 11px}.opencode-path-page .path-fix-code pre{font-size:7.5pt;line-height:1.28}.opencode-path-page .compact-path-results{margin-top:6px}.opencode-path-page .compact-path-results .pane{padding:7px 10px}.opencode-path-page .compact-note{margin-top:7px!important}}
/* ============================================================
워크시트 (WORKSHOP) — 19번 교재 템플릿 규격
학생이 손으로 채우는 표. 화면과 인쇄 모두에서 빈칸이 보여야 한다.
기존 규칙에 덧붙이기만 하며 다른 컴포넌트를 건드리지 않는다.
============================================================ */
.ws{margin:22px 0 0; background:var(--vcl-cool); border:1px solid var(--line); padding:22px 22px 18px}
.ws .wshd{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.ws .wsno-b{font-family:var(--num); font-size:12px; font-weight:800; letter-spacing:.18em; color:var(--vcl-orange)}
.ws .wst{font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.ws .wslead{margin:0 0 14px; font-size:16px; line-height:1.65; color:var(--ink-2)}
.ws .tablewrap{margin:0}
.ws table.wstab{background:#fff}
.ws table.wstab th{white-space:nowrap}
.ws table.wstab td{height:54px; vertical-align:middle}
.ws table.wstab td.wsno{width:34px; text-align:center; font-family:var(--num); font-weight:800;
font-size:13px; color:var(--vcl-orange); background:#fff}
/* 손으로 쓰는 칸 — 가로줄로 행을, 세로줄로 칸을 구분한다 */
.ws table.wstab td.wsblank{background:#fff;
box-shadow:inset 0 -1px 0 var(--line), inset 1px 0 0 var(--line)}
.ws table.wstab tr:last-child td.wsblank{box-shadow:inset 1px 0 0 var(--line)}
/* 워크시트 빈칸 — 화면에서는 직접 적을 수 있다. 저장하지 않는다.
인쇄하면 input 이 사라지고 원래대로 빈칸이 나온다(칸 높이는 td 가 잡고 있다). */
.ws table.wstab td.wsblank{padding:0}
.ws table.wstab td.wsblank .wsin{
display:block; width:100%; height:54px;
border:0; outline:0; background:transparent;
font:inherit; color:inherit; padding:6px 11px;
box-sizing:border-box; border-radius:0}
.ws table.wstab td.wsblank .wsin::placeholder{color:#C9CDD3}
.ws table.wstab td.wsblank .wsin:focus{
background:#FFF6F1; box-shadow:inset 0 0 0 2px #FF5C00}
@media print{ .ws table.wstab td.wsblank .wsin{display:none} }
.ws table.wstab th + th{box-shadow:inset 1px 0 0 var(--line)}
.ws .wsck{margin-top:16px; border-top:2px solid var(--vcl-carbon); padding-top:12px}
.ws .wsck-h{font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.02em; margin-bottom:6px}
.ws .wsck ul{margin:0; padding-left:0; list-style:none}
.ws .wsck li{position:relative; padding-left:26px; margin:6px 0; font-size:15.5px; line-height:1.6; color:var(--ink-2)}
.ws .wsck li::before{content:""; position:absolute; left:0; top:3px; width:15px; height:15px;
border:1.5px solid var(--vcl-steel); background:#fff}
@media print{
.ws{background:var(--vcl-cool) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.ws table.wstab td{height:58px}
}
@media (max-width:700px){
.ws{padding:16px 14px}
.ws table.wstab td{height:46px}
}
/* ── 화면 목업 (2026-10-05 · 6주차) ─────────────────────────
학생이 글로 쓴 화면 설명이 어떤 화면이 되는지 보여 주는 CSS 도식.
그림 파일이 아니라 글자로 그리므로 한·중 병기와 글자 수정이 그대로 된다. */
.mock{border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; margin:16px 0 0; box-shadow:0 1px 0 rgba(0,0,0,.04)}
.mock-bar{display:flex; align-items:center; gap:6px; padding:7px 10px; background:var(--vcl-cool,#F1F2F4); border-bottom:1px solid var(--line); font:500 12px var(--mono,monospace); color:var(--muted)}
.mock-bar i{width:9px; height:9px; border-radius:50%; background:#D5D8DC; display:inline-block}
.mock-bar span{margin-left:8px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:1px 10px}
.mock-body{padding:16px 20px 18px; position:relative}
.mock .mk-title{font-weight:800; font-size:18px; margin:0 0 4px}
.mock .mk-hint{font-size:13.5px; color:var(--muted); margin:0 0 10px}
.mock .mk-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0}
.mock .mk-input{flex:1 1 90px; min-height:30px; border:1px solid #C9CDD2; border-radius:5px; padding:5px 9px; font-size:13.5px; color:#9AA0A6; background:#fff}
.mock .mk-btn{display:inline-block; background:var(--vcl-orange,#FF5C00); color:#fff; font-weight:700; font-size:13.5px; border-radius:5px; padding:6px 14px}
.mock .mk-result{margin-top:10px; border:1px dashed #9BD3A8; background:#EEF8F0; border-radius:6px; padding:9px 12px; font-size:14px}
.mock .mk-err{margin-top:8px; color:#C0392B; font-size:13px}
.mock .mk-n{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--vcl-carbon,#1B1D21); color:#fff; font:700 11.5px var(--num,sans-serif); margin-right:6px; vertical-align:middle; flex:0 0 auto}
.mock-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0 0}
.mock-strip .mock{margin:0; display:flex; flex-direction:column}
.mock-strip .mock-body{flex:1}
.mock-strip .mock-body{padding:9px 10px 11px; min-height:118px}
.mock-strip .mk-title{font-size:13px}
.mock-strip .mk-hint,.mock-strip .mk-input,.mock-strip .mk-btn,.mock-strip .mk-result{font-size:11px}
.mock-strip .mk-input{min-height:22px; padding:3px 6px}
.mock-strip .mk-btn{padding:3px 8px}
.mock-strip .mk-cap{font-size:12px; font-weight:700; padding:6px 10px; border-top:1px solid var(--line); background:var(--vcl-cool,#F1F2F4)}
.mock-strip .mk-on{outline:2px solid var(--vcl-orange,#FF5C00); outline-offset:2px}
@media print{.mock,.mock-strip{break-inside:avoid}}
/* ── 7주차 (2026-10-11) · 데이터베이스 표 · 목업 짝 · 지난 기록 목록 · 연습 칸 ─────────── */
.dbwrap{margin:16px 0 0; min-width:0}
.dbn{font-weight:700; font-size:15px; color:var(--vcl-carbon); margin:0 0 6px}
.dbn code{font-size:13px; margin-left:4px}
.dbt{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); font-size:15.5px}
.dbt th{background:var(--vcl-carbon); color:#fff; font-family:var(--mono); font-weight:600; font-size:14px; text-align:left; padding:7px 10px; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.dbt th.hc{background:#2F6FD0}
.dbt td{padding:7px 10px; border-top:1px solid var(--vcl-rowline); color:var(--ink-2); vertical-align:top; line-height:1.5}
.dbt td.n{font-family:var(--mono)}
.dbt tr.hl td{background:#FFE7D6; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.dbt td.hc{background:#EAF2FD; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.dbt tr.hl td.hc{background:#F5D9C8}
.dbt em.key{font-style:normal; font-family:var(--num); font-size:10.5px; font-weight:700; border-radius:3px; padding:1px 5px; margin-left:5px; vertical-align:1px}
.dbt em.pk{background:var(--vcl-orange); color:#fff}
.dbt em.fk{background:#0E7C86; color:#fff}
.row.dbrow{margin-top:4px; align-items:start}
.dblegend{margin:8px 2px 0; font-size:14.5px; color:var(--muted); line-height:1.6}
.dblegend i.sw{display:inline-block; width:14px; height:14px; vertical-align:-2px; border:1px solid var(--line); margin-right:4px}
.dblegend i.sw.hl{background:#FFE7D6}
.dblegend i.sw.hc{background:#EAF2FD}
.dblink{margin:12px 0 0; text-align:center; font-family:var(--mono); font-size:16px; font-weight:700; color:var(--vcl-orange)}
.mock-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 0}
.mock-pair .mock{margin:0}
.mock .mk-cap{font-size:13px; font-weight:700; padding:6px 12px; border-top:1px solid var(--line); background:var(--vcl-cool,#F1F2F4)}
.mock .mk-empty{margin-top:10px; font-size:13.5px; color:var(--muted-2,#9AA0A6); text-align:center; padding:9px 0; border:1px dashed var(--line); border-radius:6px}
.mock .mk-sub{font-weight:700; font-size:14px; margin:14px 0 0; color:var(--vcl-carbon)}
.mock .mk-list{list-style:none; margin:8px 0 0; padding:0; border-top:1px solid var(--line); min-height:30px}
.mock .mk-list li{font-size:14px; padding:7px 4px; border-bottom:1px dashed var(--line); color:var(--ink-2)}
.mock .mk-list li small{float:right; color:var(--muted); font-family:var(--mono); font-size:12px}
.mock input.mk-input{color:var(--ink); font-family:inherit; outline:none}
.mock input.mk-input:focus{border-color:var(--vcl-orange,#FF5C00)}
.mock button.mk-btn{border:0; cursor:pointer; font-family:inherit}
.mock.demo{max-width:520px; margin-left:auto; margin-right:auto}
/* 7-1 데이터베이스 두 갈래 · 엑셀 성적표 (2026-10-12) */
.row.dbkinds{align-items:stretch}
.dbt.mini{margin-top:12px; font-size:14px}
.dbt.mini th,.dbt.mini td{padding:5px 8px}
.pane pre.kvbox{margin:12px 0 0; padding:10px 12px; background:var(--vcl-cool); border:1px solid var(--line); font-family:var(--mono); font-size:14px; line-height:1.6; white-space:pre}
.dbt.xl th{background:#F1F2F4; color:var(--muted); font-family:var(--num); font-weight:600; text-align:center; border:1px solid var(--line)}
.dbt.xl th.rn,.dbt.xl td.rn{width:40px; background:#F1F2F4; color:var(--muted); font-family:var(--num); text-align:center; border:1px solid var(--line)}
.dbt.xl td{border:1px solid var(--line)}
.dbt.xl tr.hd td{font-weight:700; color:var(--ink)}
/* 7-2 단방향·양방향 암호화 흐름 (2026-10-12) */
.row.encrow{align-items:stretch}
.encflow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:12px 0 0; font-family:var(--mono); font-size:13.5px}
.encflow .ef-in,.encflow .ef-out{background:#fff; border:1px solid var(--line); padding:3px 8px; border-radius:4px}
.encflow .ef-out{background:var(--vcl-carbon); color:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.encflow .ef-ar{color:var(--vcl-orange); font-family:var(--sans)}
.encflow .ef-ar b{font-size:13px}
.encflow .ef-x{font-family:var(--sans); font-size:12.5px; color:var(--danger,#C0392B); font-weight:700}
/* 7-1 들어가며 · 보도 정리 상자 (2026-10-12) */
.newscard{margin:18px 0 0; border:1px solid var(--line); border-left:4px solid var(--vcl-carbon); background:#fff; padding:12px 18px 14px}
.newscard .nc-h{font-family:var(--num); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--muted)}
.newscard .blist{margin-top:8px}
.newscard .blist li{font-size:16.5px}
/* 7-1 들어가며 · 기사 제목 띠 모음 (2026-10-12 · 캡처 대신 헤드라인만) */
.headlines{margin:20px 0 4px; padding:18px 14px 14px; background:#ECEDEF; border:1px solid var(--line); display:flex; flex-direction:column; gap:8px; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.hl-strip{background:#fff; border:1px solid #D5D8DC; box-shadow:0 2px 3px rgba(0,0,0,.12); padding:8px 14px; width:88%; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.hl-strip:nth-child(even){margin-left:auto}
.hl-strip .hl-src{display:block; font-family:var(--num); font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.03em}
.hl-strip b{display:block; font-size:16.5px; line-height:1.4; color:var(--ink)}
.hl-strip.big{width:96%; border-left:4px solid var(--vcl-orange)}
.hl-strip.big b{font-size:19px}
/* 7-1 연습 칸 두 개 · 저장 안 함 / 브라우저에 저장 (2026-10-12) */
.mock-pair .mock.demo{max-width:none; margin:0}
.mock-pair .mock .mk-row{flex-wrap:nowrap}
.mock-pair .mock input.mk-input{min-width:0}
.mock button.mk-clear{margin-top:8px; border:1px solid var(--line); background:#fff; color:var(--muted); font-family:inherit; font-size:12.5px; border-radius:4px; padding:3px 10px; cursor:pointer}
.mock-pair .mock{display:flex; flex-direction:column}
.mock-pair .mock .mock-body{flex:1}
/* 7-2 암호화 이야기 순서: 잠근다 → 다시 열 수 있다면? → 단방향 (2026-10-12) */
.encsteps{display:grid; gap:12px; margin-top:18px}
.encsteps .pane{padding:13px 18px}
.encsteps .pane p{margin-top:6px; font-size:16.5px; line-height:1.5}
.encsteps .encflow{margin:8px 0 0}
.encflow .ef-x.ok{color:var(--ok,#1E7F4F)}
#s2b_3 .encsteps,#s2b_3 .row.encrow{margin-top:12px}
#s2b_3 .pane{padding:12px 14px}
#s2b_3 .pane p{font-size:15.5px; line-height:1.45; margin-top:6px}
#s2b_3 .encflow{margin-top:6px}