/* ===== Cubroid Education — block theme ===== */
:root{
  --red:#e8453c; --yellow:#ffc21a; --blue:#1f8bf0; --green:#34b25a; --purple:#8e5bd8;
  --blue-bg:#eaf4fe;
  --ink:#1b2433; --ink2:#56627a; --ink3:#8b93a3;
  --cream:#fff9ee; --paper:#fff; --line:#ece4d4; --line2:#f3eee3;
  --r:22px;
  /* 글꼴 (2026-10-16): 제목·본문·버튼 모두 Noto Sans 계열. 문자별 Noto는 build.mjs NOTO_SCRIPT가 불러옴, 없으면 각 OS 기본 글꼴 */
  --font-body:"Source Sans 3","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:var(--font-body);
}
/* 한중일: 그 문자의 Noto를 맨 앞에(라틴 글자도 같은 글꼴 → 섞인 문장 높이가 맞음) */
html:lang(ko){ --font-body:"Source Sans 3","Paperlogy","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
html:lang(ja){ --font-body:"Noto Sans JP","Noto Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif; }
html:lang(zh){ --font-body:"Noto Sans SC","Noto Sans","PingFang SC","Microsoft YaHei",sans-serif; }
/* Traditional Chinese (zh-Hant): TC 글꼴이라야 대만·홍콩 표준 자형 — :lang(zh)보다 뒤에 둠 */
html:lang(zh-Hant){ --font-body:"Noto Sans TC","Noto Sans","PingFang TC","Microsoft JhengHei",sans-serif; }
/* Devanagari (hi) / Arabic (ar) / Thai (th) */
html:lang(hi){ --font-body:"Noto Sans Devanagari","Noto Sans","Nirmala UI","Kohinoor Devanagari",sans-serif; }
html:lang(ar){ --font-body:"Noto Sans Arabic","Noto Sans","Segoe UI","Geeza Pro",Tahoma,sans-serif; }
html:lang(hi) h1, html:lang(hi) h2, html:lang(hi) h3{ line-height:1.45; }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3{ letter-spacing:0; line-height:1.5; } /* letter-spacing breaks Arabic joining */
/* Thai stacks vowels/tone marks -> taller lines */
html:lang(th){ --font-body:"Noto Sans Thai","Noto Sans","Leelawadee UI",Thonburi,sans-serif; }
html:lang(th) body{ line-height:1.75; }
html:lang(th) h1, html:lang(th) h2, html:lang(th) h3{ font-weight:600; letter-spacing:0; line-height:1.5; }
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); line-height:1.6; }
h1,h2,h3{ font-family:var(--font-head); font-weight:900; letter-spacing:-.01em; line-height:1.25; }
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
button{ font:inherit; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 16px; }
.muted{ color:var(--ink3); font-size:.9rem; font-weight:600; font-family:var(--font-body); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:focus-visible{ outline:3px solid var(--focus, var(--blue)); outline-offset:3px; }   /* 링은 요소 자신의 둥근 모서리를 따름 (예전 border-radius:8px는 카드·버튼 모양을 바꿔 뺌) */

/* ---------- cube: rounded square with 3x3 studs ---------- */
.cube{ --c:var(--blue); --s:48px;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:var(--s); height:var(--s); border-radius:24%;
  background-color:var(--c);
  background-image:radial-gradient(circle, rgba(255,255,255,.42) 0 16%, transparent 18%);
  background-size:33.34% 33.34%;
  box-shadow:inset 0 calc(var(--s) * -.1) 0 rgba(0,0,0,.18);
  color:#fff; font-family:var(--font-head); font-weight:900; font-size:calc(var(--s) * .46); line-height:1; }
.cube.xs{ --s:16px; } .cube.sm{ --s:26px; } .cube.big{ --s:64px; }
.c-red{ --c:var(--red); } .c-yellow{ --c:var(--yellow); } .c-blue{ --c:var(--blue); } .c-green{ --c:var(--green); } .c-purple{ --c:var(--purple); }
.cube.num{ --c:var(--accent,var(--blue)); background-image:none; padding-bottom:calc(var(--s) * .08); }
.cube.ghost{ background:transparent; box-shadow:none; border:2px dashed #cfc6b3; color:#b9b09c; }

/* ---------- block card & buttons ---------- */
.block-card{ background:var(--paper); border:2px solid var(--line); border-radius:var(--r); box-shadow:0 5px 0 var(--line); }
a.block-card{ color:var(--ink); transition:transform .12s, box-shadow .12s; }
a.block-card:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--line); }
a.block-card:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--line); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px; padding:10px 20px;
  border-radius:14px; border:2px solid var(--line); background:#fff; color:var(--ink); font-weight:800; cursor:pointer; text-align:center; }
.btn.small{ min-height:38px; padding:6px 14px; font-size:.9rem; }
.btn.big{ min-height:56px; padding:12px 28px; font-size:1.1rem; }
.btn-ghost{ box-shadow:0 4px 0 var(--line); }
.btn-ghost:hover{ background:var(--line2); }
.btn-cube{ background:var(--c, var(--blue)); border-color:transparent; color:#fff;
  box-shadow:0 4px 0 color-mix(in srgb, var(--c, var(--blue)) 68%, #000);
  transition:transform .08s, box-shadow .08s, filter .15s; }
.btn-cube:hover{ filter:brightness(1.05); color:#fff; }
.btn-cube:active, .btn-ghost:active{ transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb, var(--c, #d8cfbc) 68%, #000); }
.btn-cube.c-yellow{ color:#4a3300; }
.btn-cube.c-yellow:hover{ color:#4a3300; }
.btn-cube.c-white{ --c:#fff; color:var(--ink); border-color:var(--line); box-shadow:0 4px 0 var(--line); }
.btn-cube.c-white:hover{ color:var(--ink); background:var(--line2); }
.btn-cube[disabled]{ opacity:.45; cursor:default; }
.link-btn{ background:none; border:0; color:var(--blue); font-weight:800; cursor:pointer; padding:6px 4px; }
.tag{ display:inline-block; font-size:.8rem; font-weight:800; color:#fff; background:var(--accent,var(--blue)); padding:3px 12px; border-radius:20px; }

/* ---------- header ---------- */
.top{ background:var(--blue); color:#fff; position:sticky; top:0; z-index:20; }
.top-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:60px; }
.logo{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; min-width:0; }
.logo img{ height:26px; width:auto; flex:none; }
.logo span{ font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stripe{ display:grid; grid-template-columns:repeat(4,1fr); height:5px; }
.stripe i:nth-child(1){ background:var(--red); } .stripe i:nth-child(2){ background:var(--yellow); }
.stripe i:nth-child(3){ background:#0f6fcf; } .stripe i:nth-child(4){ background:var(--green); }
.top-right{ display:flex; align-items:center; gap:8px; flex:none; }
.classic-link{ color:#fff; font-size:.85rem; font-weight:700; white-space:nowrap; padding:7px 10px;
  border-radius:12px; background:rgba(255,255,255,.12); }
.classic-link:hover{ color:#fff; background:rgba(255,255,255,.24); }
.lang{ flex:none; }
.lang select{ appearance:none; background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 10px center;
  color:#fff; border:2px solid rgba(255,255,255,.35); border-radius:12px; padding:6px 28px 6px 12px; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }
.lang option{ color:var(--ink); }
.crumb{ font-size:.9rem; color:var(--ink3); padding:16px 0 6px; font-weight:600; }

/* ---------- home ---------- */
.home-hero{ background:var(--blue-bg);
  background-image:radial-gradient(circle, rgba(31,139,240,.10) 0 3px, transparent 4px); background-size:28px 28px; }
.home-hero-in{ display:grid; gap:24px; padding-top:36px; padding-bottom:40px; align-items:center; }
.home-copy h1{ font-size:2rem; margin:0 0 12px; }
.home-copy p{ margin:0 0 22px; color:var(--ink2); font-size:1.05rem; }
.hero-cubes{ --hs:62px; display:grid; grid-template-columns:repeat(3,var(--hs)); grid-template-rows:repeat(3,var(--hs)); gap:8px; justify-content:center; }
.hero-cubes .cube{ --s:var(--hs); grid-column:var(--x); grid-row:var(--y); animation:drop .55s cubic-bezier(.2,.9,.3,1.3) backwards; animation-delay:calc((var(--x) + (4 - var(--y)) * 2) * 70ms); }
@keyframes drop{ from{ transform:translateY(-40px); opacity:0; } }
.sec{ font-size:1.35rem; margin:32px 0 16px; display:flex; align-items:center; gap:10px; }
.course-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); padding-bottom:40px; }
.course-card{ display:block; overflow:hidden; }
.course-img{ aspect-ratio:16/10; overflow:hidden; background:var(--line2); border-bottom:2px solid var(--line); }
.course-img img{ width:100%; height:100%; object-fit:cover; }
.course-body{ padding:16px 18px 18px; }
.course-body h3{ margin:10px 0 4px; font-size:1.3rem; }
.course-body p{ margin:0 0 12px; color:var(--ink2); font-size:.95rem; }

/* progress */
.progress{ display:flex; align-items:center; gap:10px; }
.progress .bar{ flex:1; height:10px; background:var(--line2); border-radius:6px; overflow:hidden; }
.progress .bar i{ display:block; height:100%; width:var(--p,0%); background:var(--green); border-radius:6px; transition:width .6s; }
.progress-label{ font-size:.85rem; font-weight:800; color:var(--ink2); white-space:nowrap; }

/* ---------- course ---------- */
.course-head{ background:color-mix(in srgb, var(--accent) 10%, var(--cream)); padding-bottom:22px; border-bottom:2px solid var(--line); }
.course-head h1{ margin:10px 0 6px; font-size:1.9rem; }
.course-head p{ margin:0 0 14px; color:var(--ink2); }
.course-head .progress{ max-width:420px; }
.tile-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); padding:22px 0 44px; }
.tile{ display:flex; flex-direction:column; gap:8px; padding:10px; min-width:0; }
.tile-img{ position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--line2); display:flex; align-items:center; justify-content:center; }
.tile-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile-img .cube.num{ --s:36px; position:absolute; top:8px; inset-inline-start:8px; z-index:1; }
.tile b{ font-size:.92rem; line-height:1.35; padding:0 2px; }
.tile .check{ display:none; position:absolute; top:8px; inset-inline-end:8px; z-index:1; background:var(--green); color:#fff; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; font-weight:900; box-shadow:0 2px 0 rgba(0,0,0,.2); }
.tile.is-done .check{ display:flex; }
.tile.is-done{ border-color:var(--green); box-shadow:0 5px 0 color-mix(in srgb, var(--green) 45%, var(--line)); }
.tile.locked{ background:transparent; border:2px dashed var(--line); border-radius:var(--r); color:var(--ink3); }
.tile.locked .tile-img{ background:transparent; }
.tile.locked .cube.num{ position:static; --s:44px; }
.tile.locked .muted{ font-size:.8rem; padding:0 2px; }

/* ---------- mission ---------- */
.m-cover{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding:20px; margin-top:6px; }
.m-cover > *{ min-width:0; }
.m-title-row{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.m-title-row h1{ margin:0; font-size:1.6rem; }
.lead{ font-size:1.1rem; font-weight:600; margin:0 0 10px; }
.goal{ margin:0 0 16px; color:var(--ink2); padding:8px 14px; background:var(--line2); border-radius:12px; border-inline-start:5px solid var(--accent,var(--blue)); }
.m-cover-img{ margin:0; background:var(--line2); border-radius:16px; overflow:hidden; }
.m-cover-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.page-lesson .m-cover-img img{ aspect-ratio:auto; } /* 수업 표지 그림은 원래 비율 그대로 (넓은 장면 그림) */
.m-cover-img figcaption{ font-size:.85rem; color:var(--ink3); padding:8px 12px; font-weight:600; }

.stages{ position:sticky; top:65px; z-index:15; background:color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter:blur(8px); border-bottom:2px solid var(--line); margin-top:18px; }
.stages-in{ display:flex; gap:8px; padding-top:10px; padding-bottom:10px; overflow-x:auto; scrollbar-width:none; }
.stage{ display:flex; align-items:center; gap:8px; white-space:nowrap; padding-block:7px; padding-inline:9px 14px; border-radius:14px; background:#fff; border:2px solid var(--line); color:var(--ink); font-weight:800; font-size:.92rem; }
.stage.is-active.s-red{ border-color:var(--red); background:color-mix(in srgb, var(--red) 10%, #fff); }
.stage.is-active.s-yellow{ border-color:var(--yellow); background:color-mix(in srgb, var(--yellow) 18%, #fff); }
.stage.is-active.s-blue{ border-color:var(--blue); background:color-mix(in srgb, var(--blue) 10%, #fff); }
.stage.is-active.s-green{ border-color:var(--green); background:color-mix(in srgb, var(--green) 10%, #fff); }
.stage.is-active.s-purple{ border-color:var(--purple); background:color-mix(in srgb, var(--purple) 10%, #fff); }

.panel{ --pc:var(--blue); background:#fff; border:2px solid var(--line); border-top:6px solid var(--pc); border-radius:var(--r); box-shadow:0 5px 0 var(--line); padding:20px; margin:20px 0; scroll-margin-top:130px; }
.panel-red{ --pc:var(--red); } .panel-yellow{ --pc:var(--yellow); } .panel-blue{ --pc:var(--blue); } .panel-green{ --pc:var(--green); } .panel-purple{ --pc:var(--purple); }
.panel h2{ font-size:1.3rem; margin:0 0 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.panel-head h2{ margin:0; }

.blocks{ list-style:none; padding:0; margin:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.blocks li{ background:var(--cream); border:2px solid var(--line2); border-radius:16px; padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.blk-img{ height:78px; display:flex; align-items:center; justify-content:center; }
.blk-img img{ max-height:78px; width:auto; object-fit:contain; }
.blk-count{ font-family:var(--font-head); font-weight:900; font-size:1.25rem; }

/* build: step player (js) / grid (no-js, all, print) */
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
.steps li{ min-width:0; position:relative; }
.steps img{ width:100%; height:auto; }
.steps li.has-no img{ border:5px solid var(--yellow); border-radius:18px; }
.step-no{ position:absolute; top:-8px; inset-inline-start:-8px; z-index:1; min-width:46px; height:46px; padding:0 8px; border-radius:23px;
  background:var(--yellow); color:#fff; font-family:var(--font-head); font-weight:900; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 rgba(0,0,0,.15); }
.steps li.has-no{ padding-top:8px; padding-inline-start:8px; }
.js .player:not(.all) .steps{ display:block; }
.js .player:not(.all) .steps li{ display:none; }
.js .player:not(.all) .steps li.is-current{ display:block; animation:fade .25s; max-width:720px; margin:0 auto; }
@keyframes fade{ from{ opacity:.3; transform:translateX(var(--dir,12px)); } }
.player-ui{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.player-ui .btn{ min-width:110px; }
.step-count{ font-family:var(--font-head); font-size:1.2rem; color:var(--ink2); white-space:nowrap; }
.step-count b{ font-size:1.8rem; color:var(--ink); }
.step-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px; }
.step-dots button{ width:18px; height:18px; border-radius:5px; border:0; padding:0; background:var(--line); cursor:pointer; }
.step-dots button.seen{ background:color-mix(in srgb, var(--yellow) 55%, #fff); }
.step-dots button.now{ background:var(--yellow); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); transform:scale(1.2); }
html:not(.js) .player-ui, html:not(.js) .step-dots, html:not(.js) [data-step-toggle]{ display:none; }
.player.all .player-ui, .player.all .step-dots{ display:none; }

.task{ font-size:1.15rem; font-weight:700; margin:0 0 12px; background:var(--blue-bg); border-radius:16px; border-end-start-radius:4px; padding:14px 16px; }
.note{ margin:0 0 18px; background:#fff3c4; border-radius:12px; padding:10px 14px; color:#6b4e00; font-weight:600; }
.use-grid{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.use{ display:flex; align-items:center; gap:10px; background:var(--cream); border:2px solid var(--line2); border-radius:14px; padding-block:8px; padding-inline:8px 14px; min-width:0; max-width:100%; }
/* wide app-menu images must shrink on phones, or a long label (pl "Menu aplikacji") overflows */
.use img{ height:64px; width:auto; max-width:62%; object-fit:contain; object-position:left center; }
.use span{ font-weight:800; font-size:.95rem; }
/* several blocks to use (1-4 images) side by side; label wraps below on narrow screens */
.use-blocks{ flex-wrap:wrap; }
.use .use-imgs{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.use .use-imgs img{ max-width:none; }
.screen{ width:100%; max-width:640px; border-radius:14px; border:2px solid var(--line2); }

.solution{ margin-top:18px; border:2px dashed var(--line); border-radius:16px; background:var(--cream); }
.solution summary{ cursor:pointer; padding:12px 16px; font-weight:800; color:var(--blue); list-style:none; }
.solution summary::-webkit-details-marker{ display:none; }
.solution summary::before{ content:"\25B6"; display:inline-block; margin-inline-end:8px; font-size:.75em; transition:transform .15s; }
.solution[open] summary::before{ transform:rotate(90deg); }
.solution img{ width:100%; max-width:640px; margin:0 16px; border-radius:12px; border:2px solid var(--line2); }
.solution p{ margin:12px 16px 16px; color:var(--ink2); }
@media print{ .solution{ display:none; } }
/* 어드밴스드 MODULE / THINKING */
.module,.thinking{ margin:0 0 16px; border-radius:16px; padding:12px 16px 14px; }
.module{ background:#fff; border:2px solid #ffe08a; }
.thinking{ background:#effaf1; border:2px solid #bfe8c9; }
.module h3,.thinking h3{ margin:0 0 10px; font-size:1rem; font-weight:900; }
.module h3{ color:#9a6b00; } .thinking h3{ color:#1f7a3c; }
.mod-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 18px; }
.mod-list li{ display:flex; align-items:center; gap:8px; min-width:0; }
.mod-list img{ height:56px; width:auto; max-width:120px; object-fit:contain; flex:none; }
.mod-list span{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.mod-list b{ font-weight:800; } .mod-list span{ color:var(--ink2); font-size:.92rem; }
.thinking > *{ margin:0 0 10px; } .thinking > :last-child{ margin-bottom:0; }
.th-check{ font-weight:700; padding-inline-start:1.5em; position:relative; }
.th-check::before{ content:"\2714"; position:absolute; inset-inline-start:0; color:var(--green); }
.th-p{ color:var(--ink2); }
.th-tag{ display:inline-block; background:var(--blue); color:#fff; font-weight:800; border-radius:999px; padding:3px 12px; font-size:.92rem; }
.th-box{ background:#fff; border:2px solid #cfe9d6; border-radius:12px; padding:10px 14px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.th-box b{ flex-basis:100%; color:#1f7a3c; }
.th-box img{ height:auto; max-height:120px; max-width:min(320px,100%); width:auto; }
.th-box ul{ margin:0; padding-inline-start:1.2em; flex:1 1 220px; min-width:0; }
.th-num{ margin:0; padding-inline-start:1.6em; }
.th-steps{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.th-steps li{ background:var(--blue); color:#fff; font-weight:700; border-radius:8px; padding:4px 10px; font-size:.9rem; }
.th-steps li + li::before{ content:"\2192"; position:absolute; inset-inline-start:-17px; top:50%; transform:translateY(-50%); color:var(--blue); font-weight:900; }
[dir=rtl] .th-steps li + li::before{ content:"\2190"; }
.th-steps li + li{ position:relative; margin-inline-start:16px; }
.th-imgs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); gap:10px; }
.th-imgs.small{ grid-template-columns:repeat(auto-fit,minmax(min(90px,100%),1fr)); }
.th-imgs figure{ margin:0; text-align:center; min-width:0; }
.th-imgs img{ width:100%; max-height:180px; object-fit:contain; border-radius:10px; }
.th-imgs.small img{ max-height:90px; }
.th-imgs figcaption{ font-size:.88rem; color:var(--ink2); margin-top:4px; line-height:1.35; }
.th-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:10px; }
.th-col{ background:#fff; border:2px solid #cfe9d6; border-radius:12px; padding:10px 12px; min-width:0; }
.th-col b{ display:block; margin-bottom:6px; } .th-col img{ max-width:100%; max-height:120px; object-fit:contain; display:block; margin:0 auto 6px; }
.th-col p{ margin:0; font-size:.92rem; color:var(--ink2); }

.finish{ text-align:center; padding:28px 20px; }
.finish .cube{ margin:0 auto 10px; }
.finish h2{ justify-content:center; font-size:1.6rem; margin-bottom:6px; }
.finish p{ color:var(--ink2); margin:0 0 18px; }
.btn-done.is-done::before{ content:"\2713"; }
.pager{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* ---------- right-to-left (ar) ---------- */
[dir=rtl] .lang select{ background-position:left 10px center; padding:6px 12px 6px 28px; }
[dir=rtl] .use img{ object-position:right center; }
[dir=rtl] .solution summary::before{ content:"\25C0"; }
[dir=rtl] .solution[open] summary::before{ transform:rotate(-90deg); }

/* ---------- previous-site notice (home) ---------- */
.notice-back{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(27,36,51,.45); }
.notice-back[hidden]{ display:none; }
.notice{ width:100%; max-width:440px; padding:24px 22px 22px; text-align:center; }
.notice-cubes{ display:flex; justify-content:center; gap:6px; margin-bottom:12px; }
.notice h2{ margin:0 0 8px; font-size:1.3rem; }
.notice p{ margin:0 0 18px; color:var(--ink2); }
.notice-btns{ display:flex; flex-direction:column; gap:10px; }
@media print{ .notice-back{ display:none !important; } }

/* ---------- footer ---------- */
.foot{ color:var(--ink3); font-size:.85rem; padding:28px 0 40px; border-top:2px solid var(--line); background:#fff; margin-top:20px; }
.foot .wrap{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.foot-cubes{ display:flex; gap:4px; }
.lang-list{ list-style:none; padding:40px 0; display:flex; flex-wrap:wrap; gap:10px; }
.lang-list a{ display:block; padding:10px 16px; border:2px solid var(--line); border-radius:12px; background:#fff; }

/* ---------- responsive ---------- */
@media (max-width:420px){
  .logo span{ display:none; }
  .classic-link{ font-size:.8rem; padding:6px 8px; }
  .player-ui .btn{ min-width:0; padding:10px 14px; }
}
@media (min-width:720px){
  .home-hero-in{ grid-template-columns:1.3fr 1fr; padding-top:60px; padding-bottom:64px; }
  .home-copy h1{ font-size:2.6rem; }
  .hero-cubes{ --hs:92px; gap:10px; }
  .m-cover{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; padding:28px; }
  .m-title-row h1{ font-size:2.1rem; }
  .panel{ padding:26px 28px; }
  .player.all .steps, html:not(.js) .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .player.all .steps, html:not(.js) .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- print = replaces the old PDF ---------- */
@media print{
  .top, .foot, .stages, .crumb, [data-print], .player-ui, .step-dots, [data-step-toggle], .finish{ display:none !important; }
  body{ background:#fff; }
  .block-card, .panel{ box-shadow:none; border-width:1px; margin:0 0 12px; }
  .m-cover{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
  .js .player .steps, .steps{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .js .player .steps li{ display:block !important; max-width:none !important; margin:0 !important; animation:none !important; transform:none !important; }
  .steps li, .blocks li, .use{ break-inside:avoid; }
  .coding{ break-before:page; }
}

/* 필요한 블록 묶음 제목, 조립 단계 이름표 */
.blk-group{ margin:14px 0 8px; font-size:1rem; font-weight:900; color:var(--ink2); }
.blk-group:first-of-type{ margin-top:4px; }
.steps li{ position:relative; }
.step-note{ position:absolute; inset-inline-end:12px; top:12px; background:var(--blue); color:#fff; font-weight:800; font-size:.9rem; border-radius:999px; padding:4px 12px; box-shadow:0 2px 0 rgba(0,0,0,.15); }

/* ---------- 수업형 페이지 (AI 코딩 등 고학년 코스) ---------- */
.ls-meta{ margin:0 0 10px; }
/* 수업 태그: 학년 · 난이도(★) · 서비스 */
.ls-tags{ display:flex; flex-wrap:wrap; gap:5px; padding:0 2px; }
.ls-tags .tag{ font-size:.74rem; padding:2px 10px; }
.ls-tags .tag.lv{ background:#fff4d1; color:#b07800; letter-spacing:1px; }
.ls-tags .tag.lv i{ font-style:normal; color:#e9dcb5; }
.ls-tags .tag.svc{ background:var(--line2); color:var(--ink2); }
.ls-grid{ grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); }
.ls-card .tile-img{ aspect-ratio:4/3; }
.ls-card b{ font-size:1rem; }
/* 앱 첫 화면 버튼 (그림 대신 HTML — 버튼 이름이 언어별) */
.ls-appmenu{ direction:ltr; /* 실제 앱 화면 배치 그대로 (아랍어도) */ display:grid; grid-template-columns:repeat(2,minmax(0,140px)); gap:10px; margin:8px 0 12px; padding:14px; background:#eef9ff; border:2px solid var(--line2); border-radius:16px; width:max-content; max-width:100%; }
.ls-app{ background:var(--c); border-radius:14px; color:#fff; text-align:center; padding:10px 6px 9px; font-weight:800; font-size:.85rem; line-height:1.25; opacity:.45; }
.ls-app.on{ opacity:1; box-shadow:0 0 0 3px #fff, 0 0 0 7px #ff4081; }
.ls-app img{ width:52px; height:52px; display:block; margin:0 auto 5px; border-radius:10px; }
/* 사진 묶음 */
.ls-gallery{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 14px; }
.ls-gallery figure{ margin:0; flex:1 1 180px; max-width:340px; min-width:0; background:#fff; border:2px solid var(--line2); border-radius:14px; padding:8px; text-align:center; }
.ls-gallery img{ width:100%; height:210px; object-fit:contain; display:block; }
.ls-gallery figcaption{ font-weight:700; font-size:.9rem; margin-top:6px; color:var(--ink2); }
/* 블록 아이콘 뜻 */
.ls-pairs.icons{ grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:8px; }
.ls-pairs.icons li{ flex-direction:row; align-items:center; text-align:start; gap:10px; padding:8px 10px; }
.ls-pairs.icons img{ width:46px; height:46px; flex:none; aspect-ratio:auto; }
.ls-pairs.icons p{ margin:0; display:flex; flex-direction:column; min-width:0; }
.ls-pairs.icons span{ font-size:.85rem; }
.ls-teacher{ margin:10px 0 14px; border:2px dashed var(--line); border-radius:14px; padding:8px 14px; background:#fffdf7; }
.ls-teacher > summary{ cursor:pointer; font-weight:800; color:var(--ink2); }
.ls-teacher[open] > summary{ margin-bottom:8px; }
.ls-mini{ margin:14px 0 6px; font-size:.95rem; color:var(--ink2); }
.ls-goals,.ls-needs{ margin:0 0 6px; padding-inline-start:1.2em; }
.ls-goals li,.ls-needs li{ margin:3px 0; }
.ls-needs{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.ls-needs li{ background:var(--line2); border-radius:999px; padding:4px 12px; font-weight:700; font-size:.9rem; }
.lesson-sec > *{ margin-top:0; }
.ls-h{ font-size:1.12rem; margin:22px 0 10px; }
.lesson-sec h2 + .ls-h{ margin-top:4px; }
.ls-p{ margin:0 0 12px; }
.ls-tip{ margin:10px 0; background:#fff7db; border-radius:12px; border-inline-start:5px solid var(--yellow); padding:10px 14px; color:#6b4e00; font-weight:600; }   /* 이모지 없이 왼쪽 노란 선으로 '팁' 표시 (2026-10-16 이모지 금지) */
.ls-fig{ margin:8px 0 14px; }
.ls-fig img,.ls-shot{ width:100%; max-width:760px; display:block; border-radius:14px; border:2px solid var(--line2); background:#fff; }
.ls-fig img{ max-height:440px; object-fit:contain; }
.ls-shot{ width:auto; max-width:min(640px,100%); max-height:480px; } /* 세로로 긴 앱 화면도 너무 커지지 않게 */
.ls-pairs:not(.icons) img{ max-height:200px; }
.ls-cards{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
.ls-cards li{ background:var(--cream); border:2px solid var(--line2); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.ls-cards img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; border-radius:10px; }
.ls-cards span{ color:var(--ink2); font-size:.95rem; }
.ls-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0 12px; }
.ls-chips b{ margin-inline-end:4px; }
.ls-chips span{ background:#eef7ee; border:2px solid #cfe9d6; border-radius:999px; padding:3px 12px; font-weight:700; font-size:.9rem; }
.ls-bars{ background:#fff; border:2px solid var(--line2); border-radius:14px; padding:12px 14px; margin:0 0 12px; display:grid; gap:8px; max-width:520px; }
.ls-bar{ display:grid; grid-template-columns:minmax(60px,auto) 1fr 3.2em; gap:10px; align-items:center; font-weight:800; }
.ls-bar i{ display:block; height:14px; border-radius:999px; background:var(--line2); position:relative; overflow:hidden; }
.ls-bar i::after{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:var(--v); background:var(--c); border-radius:999px; }
.ls-bar em{ font-style:normal; text-align:end; }
.ls-bars small{ color:var(--ink3); }
.ls-block{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; background:var(--cream); border:2px solid var(--line2); border-radius:16px; padding:12px; margin:0 0 12px; }
@media(min-width:720px){ .ls-block{ grid-template-columns:140px minmax(0,1fr); } }
.ls-block > img{ width:100%; max-width:140px; max-height:170px; object-fit:contain; justify-self:center; }
.ls-block-body > b{ display:block; font-size:1.05rem; } .ls-block-body > span{ color:var(--ink2); }
.ls-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:.92rem; background:#fff; border-radius:10px; overflow:hidden; }
.ls-table th{ background:#2e8597; color:#fff; text-align:start; padding:6px 10px; }
.ls-table td{ padding:6px 10px; border-top:1px solid var(--line2); vertical-align:top; }
.ls-table td:first-child{ font-weight:700; }
.ls-step{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:14px 0; border-top:2px dashed var(--line2); }
.ls-step:first-of-type{ border-top:0; padding-top:4px; }
.ls-step-body h3{ margin:4px 0 6px; font-size:1.08rem; }
.ls-step-body p{ margin:0 0 8px; }
.ls-pairs{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); }
.ls-pairs li{ background:var(--cream); border:2px solid var(--line2); border-radius:14px; padding:10px; text-align:center; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ls-pairs img{ width:100%; aspect-ratio:1; object-fit:contain; }
.ls-pairs span{ color:var(--ink2); font-size:.92rem; }
.ls-cols{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); margin:0 0 12px; }
.ls-col{ border-radius:16px; padding:12px; background:color-mix(in srgb, var(--c) 14%, #fff); border:2px solid color-mix(in srgb, var(--c) 35%, #fff); min-width:0; }
.ls-col > img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; border-radius:10px; margin-bottom:8px; }
.ls-col > b{ display:block; font-size:1.05rem; margin-bottom:6px; text-align:center; }
.ls-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.ls-col li{ background:#fff; border-radius:8px; padding:5px 10px; font-size:.92rem; }
.ls-col li.is-head{ font-weight:800; }
.ls-quiz{ background:var(--cream); border:2px solid var(--line2); border-radius:16px; padding:14px; }
.ls-q{ display:flex; gap:10px; align-items:flex-start; font-weight:800; font-size:1.05rem; margin:0 0 10px; }
.ls-q span{ background:var(--purple); color:#fff; border-radius:8px; padding:0 8px; flex:none; }
.ls-quiz summary{ cursor:pointer; font-weight:800; color:var(--purple); }
.ls-a{ margin:8px 0 0; background:#fff; border-radius:10px; padding:10px 12px; }
.ls-end{ width:120px; margin:0 auto 6px; display:block; }
@media print{ .ls-quiz details{ display:block; } }

/* 그림 크게 보기 (수업형) */
.ls-zoom{ display:block; padding:0; border:0; background:none; cursor:zoom-in; text-align:start; width:100%; max-width:760px; }
.ls-zoom span{ display:inline-block; margin-top:6px; font-size:.85rem; font-weight:700; color:var(--blue); }
.lb{ position:fixed; inset:0; z-index:100; background:rgba(20,24,33,.92); overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:48px 12px 24px; cursor:zoom-out; }
.lb img{ width:auto; max-width:none; height:auto; border-radius:8px; background:#fff; }
@media(min-width:1460px){ .lb img{ max-width:100%; } }
.lb-x{ position:fixed; top:10px; inset-inline-end:12px; width:40px; height:40px; border-radius:50%; border:0; background:#fff; font-size:1.3rem; font-weight:900; cursor:pointer; }
@media print{ .ls-zoom span{ display:none; } }

/* 코드 블록 (scratchblocks) */
.ls-code{ background:#fff; border:2px solid var(--line2); border-radius:14px; padding:10px 12px; margin:8px 0 10px; overflow-x:auto; }
.ls-code pre.blocks{ margin:0; white-space:pre; font:600 .85rem/1.5 ui-monospace,monospace; color:var(--ink2); }
.ls-code svg{ display:block; max-width:none; }
.ls-code .scratchblocks + .scratchblocks{ margin-top:10px; }
.ls-col .ls-code{ margin:6px 0 0; padding:8px; }
/* 단계 그림 + 글자(그림 속 영어 글자 대신 언어별 텍스트) */
.ls-tiles-wrap{ max-width:760px; margin:8px 0 4px; text-align:center; }
.ls-tiles-note{ display:inline-block; margin:0 0 8px !important; padding:3px 14px; border-radius:999px; background:var(--line2); font-size:.88rem; font-weight:800; color:var(--ink2); }
.ls-tiles{ display:grid; gap:10px; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); }
.ls-tile{ margin:0; border-radius:16px; padding:10px 8px 8px; text-align:center; background:color-mix(in srgb, var(--c) 14%, #fff); border:2px solid color-mix(in srgb, var(--c) 35%, #fff); min-width:0; }
.ls-tile b{ display:block; margin-bottom:8px; font-family:var(--font-head); font-size:1.15rem; font-weight:900; line-height:1.2; hyphens:auto; overflow-wrap:break-word; }
.ls-tile img{ width:100%; max-height:280px; object-fit:contain; display:block; border-radius:10px; }
.ls-match{ display:flex; align-items:center; justify-content:center; gap:10px; max-width:760px; margin:8px 0 4px; flex-wrap:wrap; }
.ls-match img{ width:min(260px,42%); border-radius:16px; }
.ls-match-arrow{ font-size:2rem; color:var(--ink); line-height:1; }
[dir=rtl] .ls-match-arrow{ transform:scaleX(-1); }
.ls-tablet{ border:10px solid #3b4352; border-radius:22px; background:#fffaf0; padding:14px 18px; min-width:min(220px,42%); text-align:center; box-shadow:0 4px 0 #2a303b; }
.ls-tablet b{ display:block; font-size:1.05rem; margin-bottom:8px; }
.ls-tablet span{ display:block; border:2px solid #cfd5df; border-radius:10px; background:#fff; font:900 2rem/1.3 var(--font-head); color:#14213d; }
@media (max-width:480px){ .ls-step-body .ls-tiles-wrap{ margin-inline-start:-38px; } .ls-tiles{ gap:5px; } .ls-tile{ padding:7px 3px 4px; border-radius:12px; } .ls-tile b{ font-size:.85rem; margin-bottom:5px; } .ls-tablet{ border-width:7px; padding:10px; } }
.ls-zoom-text{ width:auto; display:inline-block; font-weight:800; color:var(--blue); background:none; border:0; padding:4px 0; }
.ls-codecols{ grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr)); }
/* 차트 (수업 k:"chart"·"chartcards") — 큐로AI 스튜디오 데이터 차트 확장 모양: 흰 무대 + 둥근 막대 + 변수 모니터 */
.ls-chart{ margin:12px 0; background:#fff; border:2px solid var(--line); border-radius:16px; padding:12px 14px 10px; max-width:560px; }
.ls-chart > figcaption{ font-weight:800; text-align:center; margin-bottom:6px; }
.ch-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.ch-stat{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; background:#eef4fb; border:1px solid #c9d6e6; border-radius:8px; padding:3px 6px 3px 9px; }
.ch-stat i{ font-style:normal; font-weight:700; color:#fff; background:#0fbf8f; border-radius:6px; padding:1px 9px; min-width:2.2em; text-align:center; }
.ch-bars{ position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:10%; align-items:end; height:180px; border-bottom:2px solid #cfd8e3; padding:0 4%; }
.ch-col{ height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; }
.ch-col em{ font-style:normal; text-align:center; font-size:.85rem; color:#5b6878; margin-bottom:2px; }
.ch-col i{ display:block; border-radius:5px 5px 0 0; min-height:3px; }
.ch-mean{ position:absolute; left:0; right:0; border-top:2px dashed #e8453c; }
.ch-mean span{ position:absolute; right:0; bottom:2px; font-size:.78rem; font-weight:700; color:#e8453c; background:rgba(255,255,255,.85); padding:0 3px; border-radius:4px; }
.ch-labels{ display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); padding:4px 4% 0; gap:0 2px; }
.ch-labels span{ text-align:center; font-size:.8rem; line-height:1.25; overflow-wrap:anywhere; }
.ch-svg{ display:block; width:100%; height:auto; }
.ch-axis{ stroke:#cfd8e3; stroke-width:2; }
.ch-num, .ch-tick{ font-size:12px; fill:#5b6878; text-anchor:middle; }
.ch-r{ font-size:14px; font-weight:700; fill:#e8453c; }
.ch-pred{ font-size:13px; font-weight:800; fill:#b07800; }
.ch-axes{ margin:4px 0 0; font-size:.8rem; color:var(--ink2); text-align:center; }
.ch-pie{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.ch-pie svg{ width:130px; height:130px; flex:none; }
.ch-pie ul{ list-style:none; margin:0; padding:0; font-size:.88rem; }
.ch-pie li{ display:flex; align-items:center; gap:6px; margin:3px 0; }
.ch-pie li i{ width:11px; height:11px; border-radius:3px; flex:none; }
.ch-table{ margin:0 auto; }
.ls-chartcards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); margin:12px 0; }
.ls-chartcard{ position:relative; background:#fff; border:2px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.ls-chartcard > b{ font-size:1.02rem; text-align:center; }
.ls-chartcard > .ch-desc{ margin:0; font-size:.9rem; color:var(--ink2); text-align:center; }
.ls-chartcard .ls-chart{ margin:0; border:0; padding:4px 0; max-width:none; }
.ls-chartcard .ch-bars{ height:120px; }
.ls-chartcard.mark-o{ border-color:#34b25a; background:#f3fbf5; }
.ls-chartcard.mark-x{ border-color:#e8453c; background:#fdf3f2; }
.ch-mark{ position:absolute; inset-inline-start:10px; top:8px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:900; color:#fff; }
.mark-o .ch-mark{ background:#34b25a; } .mark-x .ch-mark{ background:#e8453c; }
/* 차트: 여러 묶음(series) · 요약 카드(kpi) */
.ch-series .ch-plot{ overflow:hidden; }
.ch-grid{ stroke:#eef1f5; stroke-width:1; }
.ch-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; margin-top:6px; font-size:.85rem; }
.ch-legend span{ display:inline-flex; align-items:center; gap:5px; }
.ch-legend i{ width:14px; height:10px; border-radius:3px; display:inline-block; }
.ch-legend .ref i{ height:0; border-top:2px dashed #e8453c; border-radius:0; }
.ls-chart.ch-series{ max-width:640px; }
.ch-kpis{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); }
.ch-kpi-card{ border:2px solid var(--line); border-top:5px solid var(--c); border-radius:14px; padding:10px 12px; background:#fff; display:flex; flex-direction:column; gap:2px; }
.ch-kpi-card b{ font-size:.85rem; color:var(--ink2); }
.ch-kpi-card em{ font-style:normal; font:900 1.6rem/1.2 var(--font-head); color:#14213d; }
.ch-kpi-card span{ font-size:.8rem; color:var(--ink2); }
.ls-chart.ch-kpi{ max-width:none; border:0; padding:0; background:none; }
/* ---------- 글자 대비 (WCAG AA 4.5:1 — 2026-10-15 점검) ----------
   브랜드 색(--blue·--green…)과 블록 큐브는 그대로. 흰 글자가 올라가는 배경과 글자색으로 쓰는 곳만 같은 계열의 진한 색.
   color-mix는 오래된 태블릿 브라우저에서 배경이 통째로 빠질 수 있어 글자 배경엔 고정값을 씀. */
:root{ --blue-ink:#1972c5; --green-ink:#258041; --red-ink:#c53b33; --purple-ink:#794db8; --ink3:#5f6879; }
a, .link-btn, .solution summary{ color:var(--blue-ink); }
.top{ background:var(--blue-ink); }
.btn-cube{ --c:var(--blue-ink); }
.btn-cube.c-blue{ --c:var(--blue-ink); } .btn-cube.c-green{ --c:var(--green-ink); } .btn-cube.c-red{ --c:var(--red-ink); } .btn-cube.c-purple{ --c:var(--purple-ink); }
.btn-cube.c-yellow{ --c:var(--yellow); } .btn-cube.c-white{ --c:#fff; }
.tag, .cube.num{ background-image:linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)); }   /* 코스 색(--accent) 위 흰 글자 → 20% 어둡게 */
.ls-tags .tag.lv, .ls-tags .tag.svc, .cube.num.ghost{ background-image:none; }
.ls-tags .tag.lv{ color:#966700; }
.cube.c-yellow{ color:#4a3300; }
.cube:not(.c-yellow):not(.ghost){ text-shadow:0 1px 1px rgba(0,0,0,.3); }
.tile .check, .mark-o .ch-mark{ background:var(--green-ink); }
.mark-x .ch-mark{ background:var(--red-ink); }
.th-tag, .th-steps li, .step-note{ background:var(--blue-ink); }
.ls-q span{ background:var(--purple-ink); }
.ls-quiz summary{ color:var(--purple-ink); }
.ls-table th{ background:#297888; }
.ch-stat i{ background:#0a8261; }
.classic-link{ background:rgba(0,0,0,.12); } .classic-link:hover{ background:rgba(0,0,0,.24); }   /* 밝은 반투명 → 어두운 반투명(흰 글자 대비) */
.ch-mean span, .ch-r{ color:var(--red-ink); fill:var(--red-ink); }   /* 평균선·r 글자만 진하게, 점선은 그대로 */
/* 인쇄 — 수업형 페이지: 그래프·카드·그림·코드가 쪽 사이에서 쪼개지지 않게, 소제목은 다음 내용과 같은 쪽에 (2026-10-15) */
@media print{
  .ls-chart, .ls-chartcard, .ls-fig, .ls-tile, .ls-code, .ls-codecols, .ls-step, .ls-q, .ls-tip, .ls-table, .ls-shot, .ls-gallery, .ls-pairs,
  .ls-match, .ls-appmenu, .ls-parts, .ls-mini, .ch-kpi-card, .ls-cols > *, .ls-cards > *, .ls-tiles > *{ break-inside:avoid; }
  .ls-h, h2, h3{ break-after:avoid; }
}
/* 사용할 앱 띠 (코스 머리·미션 코딩·수업 표지) — 팀 피드백 2026-10-16: 어떤 앱인지 아이콘으로 크게. 인쇄에선 앱 이름만 */
.app-get{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:14px 0 6px; padding:12px 14px; background:#fff; border:2px solid var(--line); border-radius:16px; }
.app-icon{ width:44px; height:44px; flex:none; border-radius:12px; }
.app-txt{ display:flex; flex-direction:column; line-height:1.25; margin-inline-end:auto; min-width:0; }
.app-lbl{ font-size:.8rem; font-weight:800; color:var(--ink3); }
.app-name{ font-size:1.1rem; font-weight:900; color:var(--ink); }
.app-links{ display:flex; flex-wrap:wrap; gap:6px; }
.app-links a{ display:inline-block; padding:5px 12px; border-radius:999px; background:#fff; border:2px solid var(--line); color:var(--blue-ink); font-weight:800; font-size:.88rem; white-space:nowrap; }
.app-links a:hover{ background:var(--line2); }
@media print{ .app-links{ display:none; } }
/* 수업 표지 정보 상자: 배울 것 | 준비물 — 같은 모양, 제목은 색 칩으로 본문과 구분 */
.ls-info{ grid-column:1 / -1; display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){ .ls-info{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } }
.ls-box{ background:#fff; border:2px solid var(--line); border-radius:16px; padding:14px 16px; }
.ls-box-h{ display:inline-block; margin:0 0 10px; font-size:.88rem; font-weight:900; color:#fff; background-color:var(--accent,var(--blue)); background-image:linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)); padding:3px 12px; border-radius:999px; }
.ls-box .ls-goals{ margin:0; }
.ls-box .ls-needs{ margin:0; }
.ls-cover-foot{ grid-column:1 / -1; }
/* 없는 주소 안내 (404) */
.nf{ text-align:center; padding:56px 16px 72px; }
.nf .cube{ margin:0 auto 16px; }
.nf p{ color:var(--ink2); }
.nf-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }
/* 목록 카드 그림 = 대표 조립도, 자르지 않고 전면 전체가 보이게 (2026-10-16 팀 규칙) */
.tile-img{ background:#fff; }
.tile-img img{ object-fit:contain; padding:8px; }

/* ===== 디자인 정리 (2026-10-16): 색·글자·부품·배치·움직임 토큰 =====
   참고 화면: robowunderkind.com/starter-guide — 바탕 위 한 열, 섹션은 상자 없이 간격으로, 번호 배지 + 굵은 제목, 큰 그림.
   구조만 참고하고 로고·사진·문구·글꼴(Raleway·Rubik)은 쓰지 않음.
   큐브로이드 색만 씀(그라데이션·새 강조색 없음) · Noto Sans · 전환 160–240ms, 반복 애니메이션 없음.
   대비는 WCAG 2.x 계산값 — 바탕 cream #fff9ee / 카드 paper #fff 순 */
:root{
  /* 색 */
  --bg:var(--cream);            /* 페이지 바탕 */
  --surface:var(--paper);       /* 카드·글상자 */
  --text:var(--ink);            /* 본문 14.88:1 / 15.59:1 */
  --text-sub:var(--ink2);       /* 보조 글자 5.85:1 / 6.13:1 (흐린 글자 --ink3 5.35:1 / 5.61:1) */
  --primary:var(--blue-ink);    /* 주요 버튼 바탕·링크 — 흰 글자 4.94:1, 바탕 위 링크 4.71:1 */
  --on-primary:#fff;
  --line-ui:#857b69;            /* 버튼·입력창 테두리 3.98:1 / 4.17:1 / hover 바탕 --line2 위 3.61:1. 카드 장식선은 --line */
  --focus:var(--blue-ink);      /* focus 링 4.71:1 / 4.94:1 */
  /* 글자 — 390px → 1440px 사이 비례 (참고 화면: 제목 32→40px·굵기 900, 본문 16→18px) */
  --fs-h1:clamp(2rem, 1.8143rem + .7619vw, 2.5rem);           /* 32 → 40px */
  --fs-h2:clamp(1.375rem, 1.2357rem + .5714vw, 1.75rem);      /* 22 → 28px */
  --fs-h3:clamp(1.125rem, 1.0321rem + .381vw, 1.375rem);      /* 18 → 22px */
  --fs-lead:clamp(1.0625rem, .9929rem + .2857vw, 1.25rem);    /* 17 → 20px */
  --fs-card:clamp(1.0625rem, 1.0161rem + .1905vw, 1.1875rem); /* 17 → 19px  목록 카드 제목 */
  --fs-body:clamp(1rem, .9536rem + .1905vw, 1.125rem);        /* 16 → 18px */
  --fs-btn:1rem; --fs-btn-sm:.9375rem; --fs-btn-lg:1.125rem;  /* 16 · 15 · 18px */
  --fw-h1:800; --fw-h:800; --fw-h3:700; --fw-btn:700;
  --lh-h1:1.2; --lh-head:1.3; --lh-lead:1.55; --lh-body:1.6; --lh-btn:1.25;
  --ls-h1:-.01em;
  /* 모양 — 테두리 없이 흰 상자 + 아주 옅은 그림자 (참고 화면 카드: 모서리 20px, 0 20px 20px 검정 5% → --ink 계열로) */
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px;
  --r:var(--radius-lg);
  --shadow-card:0 20px 20px rgba(27,36,51,.05);
  --shadow-card-hover:0 20px 24px rgba(27,36,51,.10);
  /* 배치 */
  --wrap-max:1280px;
  --gutter:clamp(1.25rem, .7857rem + 1.9048vw, 2.5rem);       /* 좌우 여백 20 → 40px */
  --col:880px;                                                /* 수업 페이지 한 열 (참고 화면 940px — 한글 한 줄이 너무 길지 않게 조금 좁힘) */
  --space-section:clamp(3rem, 2.4429rem + 2.2857vw, 4.5rem);  /* 섹션 사이 48 → 72px */
  --box-pad:clamp(1.25rem, 1.0179rem + .9524vw, 1.875rem);    /* 글상자 안쪽 20 → 30px */
  --tap:44px;                                                 /* 누르는 곳 최소 높이 */
  /* 움직임 — 상태 변화만 */
  --dur-press:160ms; --dur-change:200ms; --ease:cubic-bezier(.2,0,0,1);
}
.top, .lb{ --focus:#fff; }      /* 어두운 바탕 위 focus 링: 머리띠 4.94:1, 크게 보기 16.1:1 */

/* 글자 */
body{ font-size:var(--fs-body); line-height:var(--lh-body); overflow-wrap:break-word; }
h1,h2,h3{ line-height:var(--lh-head); text-wrap:balance; }
h1{ font-weight:var(--fw-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); } h2{ font-weight:var(--fw-h); } h3{ font-weight:var(--fw-h3); }
p, li{ text-wrap:pretty; }
html:lang(ko){ word-break:keep-all; }   /* 한글은 띄어쓰기에서만 줄바꿈 (낱말 중간 끊김 방지). 넘치는 긴 낱말은 overflow-wrap이 받음 */
.home-copy h1, .course-head h1, .m-title-row h1{ font-size:var(--fs-h1); }
.sec, .panel h2, .finish h2, .notice h2{ font-size:var(--fs-h2); }
.course-body h3, .ls-h, .ls-step-body h3{ font-size:var(--fs-h3); }
.lead, .home-copy p, .course-head p{ font-size:var(--fs-lead); line-height:var(--lh-lead); }
.lead{ font-weight:400; color:var(--text); }
.course-body p, .th-col p, .ls-cards span, .ls-mini, .ls-pairs span{ font-size:1rem; }   /* 상자 안 설명도 16px 이상 */

/* 부품: 버튼 — 전부 알약 모양, 그림자 없이 평평하게. 주요 = .btn-cube(바탕색), 보조 = .btn-ghost · .btn-cube.c-white · 앱 링크 */
.btn{ min-height:var(--tap); border-radius:var(--radius-pill); box-shadow:none; font-size:var(--fs-btn); font-weight:var(--fw-btn); line-height:var(--lh-btn);
  transition:background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease), transform var(--dur-press) var(--ease), filter var(--dur-press) var(--ease); }
.btn.small{ min-height:var(--tap); font-size:var(--fs-btn-sm); } .btn.big{ font-size:var(--fs-btn-lg); }
.btn-ghost, .btn-cube, .btn-cube.c-white{ box-shadow:none; }
.btn-ghost, .btn-cube.c-white{ border-color:var(--line-ui); }
.btn:active, .btn-cube:active, .btn-ghost:active{ transform:scale(.98); box-shadow:none; }   /* 누르면 살짝 작아짐 */
.app-links a{ display:inline-flex; align-items:center; min-height:var(--tap); padding:6px 16px; border-color:var(--line-ui); font-weight:var(--fw-btn); font-size:var(--fs-btn-sm);
  transition:background-color var(--dur-press) var(--ease); }
.classic-link{ border-radius:var(--radius-pill); }
.stage{ min-height:var(--tap); border-radius:var(--radius-pill); }
.lb-x{ width:var(--tap); height:var(--tap); }
/* 부품: 입력창 — 머리띠 언어 선택. 흰 글자 대비 3.70:1 → 6:1 이상, 테두리 1.85:1 → 4.94:1, 16px(아이폰 확대 방지) */
.lang select{ min-height:var(--tap); border-radius:var(--radius-sm); background-color:rgba(27,36,51,.14); border-color:#fff; font-size:1rem; transition:background-color var(--dur-press) var(--ease); }
.lang select:hover{ background-color:rgba(27,36,51,.28); }
/* 부품: 카드 — 테두리 없는 흰 상자 + 옅은 그림자. 링크 카드는 hover 때 살짝 떠오름 */
.block-card{ border:0; box-shadow:var(--shadow-card); }
a.block-card{ transition:transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease); }
a.block-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card-hover); }
a.block-card:active{ transform:scale(.99); box-shadow:var(--shadow-card); }
.tile.is-done{ box-shadow:0 0 0 2px var(--green-ink), var(--shadow-card); }   /* 끝낸 수업: 테두리 대신 초록 링 */
.course-img{ border-bottom:0; }
/* 목록 카드: 그림이 카드 위쪽에 꽉 차고, 제목·태그는 그 아래 */
.ls-card{ padding:0 0 18px; gap:10px; overflow:hidden; }
.ls-card .tile-img{ border-radius:0; }
.ls-card b, .ls-card .ls-tags{ padding-inline:20px; }
.ls-card b{ font-size:var(--fs-card); font-weight:700; line-height:1.4; }
.ls-grid{ gap:clamp(1.25rem, 1.0179rem + .9524vw, 1.875rem); }
.course-grid{ gap:clamp(1.25rem, 1.0179rem + .9524vw, 1.875rem); }
/* 글상자: 섹션이 상자 없이 바탕 위에 놓이므로, 안쪽 상자는 모두 테두리 없는 흰색 (크림색 상자는 바탕과 같아져 흰색으로) */
.ls-box, .app-get, .ls-cards li, .ls-bars, .ls-block, .ls-pairs li, .ls-quiz, .ls-code, .ls-chart, .ls-chartcard, .ls-gallery figure, .blocks li, .use{
  background:var(--surface); border-color:transparent; border-radius:var(--radius-md); }
.ls-box, .app-get{ padding:var(--box-pad); }
.ls-fig img, .ls-shot, .screen, .solution img{ border:0; border-radius:var(--radius-md); }
.tile-img, .m-cover-img, .ls-cards img{ border-radius:var(--radius-md); }
.ls-zoom span, .ls-zoom-text{ color:var(--primary); }   /* 원래 --blue 3.49:1 → 4.94:1 */
.ls-tags .tag.lv i{ color:inherit; }   /* 빈 별: 옅은 색(1.24:1) 대신 빈 모양 ☆ + 같은 색(build.mjs) — 색만으로 구분하지 않음 */
.ls-app{ color:var(--on, #fff); }      /* 앱 버튼 바탕색은 실제 앱 그대로, 글자만 대비 큰 쪽(build.mjs textOn) */
.ls-app span{ display:inline-block; background:var(--on-bg, transparent); padding-inline:var(--on-pad, 0); border-radius:var(--radius-sm); }

/* 배치 */
.wrap{ max-width:var(--wrap-max); padding-inline:var(--gutter); }
.sec{ margin-block:var(--space-section) 20px; }
/* 코스 목록 머리: 색 띠 없이 가운데 정렬 (참고 화면 목록 페이지) */
.course-head{ background:transparent; border-bottom:0; text-align:center; padding-top:8px; }
.course-head p{ max-width:36em; margin-inline:auto; }
.course-head .progress{ margin-inline:auto; }
/* 수업 페이지 = 가운데 한 열: 표지·단계 탭·섹션이 같은 왼쪽 선에 맞춰짐 */
.page-lesson main .wrap{ max-width:calc(var(--col) + 2 * var(--gutter)); }
.m-cover.block-card{ background:transparent; border:0; box-shadow:none; padding-inline:0; }
.page-lesson .m-cover.block-card{ grid-template-columns:minmax(0,1fr); }
/* 섹션: 상자·색 띠 없이 간격으로만 나눔. 번호 큐브를 키워 '단계 배지'로 */
.panel{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; margin-block:var(--space-section); }
.panel h2 .cube.sm{ --s:40px; }
.finish.panel{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:var(--box-pad); }
.stages{ border-bottom-width:1px; }

/* 움직임: 버튼 반응 160ms, 단계 바뀜 200ms. 그 밖의 전환은 뺌 */
.solution summary::before{ transition:transform var(--dur-press) var(--ease); }
.js .player:not(.all) .steps li.is-current{ animation-duration:var(--dur-change); }
.progress .bar i{ transition:none; }
@media (prefers-reduced-motion:reduce){
  a.block-card:hover, a.block-card:active, .btn:active, .btn-cube:active, .btn-ghost:active{ transform:none; }   /* 이동 없이 색만 */
}