/* ===== 큐브로이드 교육 — 새 디자인 (2026-10-16~) ===== 이 파일을 쓰는 페이지: 홈·코스 목록·미션 상세·AI 수업 (build.mjs NEW_DESIGN). 404·언어 고르기·번역 검수는 아직 legacy.css. 지켜야 할 것: 디자인_바꾸면_안되는_것.md (data 속성·JS 클래스·언어별 규칙·대비·인쇄·팀 규칙) 방향: 흰 바탕 위 깔끔한 가이드 (2026-10-18 크림 → 브랜드 바이블 흰색·Chalk) — 넓은 화면은 왼쪽 목차 + 한 열 본문, 섹션은 상자 없이 선과 간격으로, 단계 배지는 블록 큐브, 버튼은 알약 모양. 수업 안은 블록 5색, 틀은 바이블 색, 그라데이션 없음, Noto Sans. 대비는 WCAG 2.x 계산값 (흰 바탕 #fff / Chalk #f5f5f5 순) */ /* ---------- 1. 토큰 ---------- */ :root{ /* 블록 5색 (브랜드 — 바꾸지 않음). 원색 위에는 흰 글자를 올리지 않음 */ --red:#e8453c; --yellow:#ffc21a; --blue:#1f8bf0; --green:#34b25a; --purple:#8e5bd8; /* 흰 글자를 올리는 진한 색: 흰 글자 4.94 · 4.95 · 5.0 · 6.0:1 이상 (2026-10-15 점검 값) */ --blue-ink:#1972c5; --green-ink:#258041; --red-ink:#c53b33; --purple-ink:#794db8; /* 블록 색을 흰색에 10–20% 섞은 옅은 바탕(고정값): --ink 13.6:1, --ink2 5.37:1 이상 */ --red-tint:#fdecec; --yellow-tint:#fff3d1; --blue-tint:#e9f3fe; --green-tint:#e9f7ed; --purple-tint:#f4effb; /* 브랜드 바이블(2023) 기본색 — 머리띠·홈 첫 화면. Sky는 흰 바탕 글자·흰 글자 바탕 모두 2.21:1이라 로고·도형에만 */ --sky:#1ebee1; --azure:#0a417d; --chalk:#f5f5f5; --graphite:#3c3c41; --gray-3:#868689; --gray-4:#616165; /* 바탕·글자·선 */ --bg:#fff; /* 페이지 바탕 (바이블 웹 예시·2026 카탈로그처럼 흰색) */ --surface:#fff; /* 상자 — 바탕과 같은 흰색이라 --line 테두리로 구분 */ --surface-2:var(--chalk); /* 옅은 칩·막대·그림 칸 바탕, 첫 화면·발 띠 */ --ink:#1b2433; /* 본문 15.59:1 / 14.30:1 */ --ink2:#56627a; /* 보조 글자 6.13:1 / 5.63:1 */ --ink3:#5f6879; /* 흐린 글자 5.61:1 / 5.15:1 */ --line:#e5e5e7; /* 장식 선(상자 테두리·구분선) — 대비 기준 대상 아님 */ --line-ui:var(--gray-3); /* 버튼·입력 테두리 3.63:1 / 3.33:1 */ --primary:var(--blue-ink); /* 주요 버튼 바탕·링크: 흰 글자 4.94:1, 바탕 위 링크 4.94:1 / 4.53:1 */ --on-primary:#fff; --focus:var(--blue-ink); /* focus 링 4.94:1 / 4.53:1 */ /* 글꼴 — build.mjs fontQuery()가 불러오는 Noto와 짝 */ --font:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* 글자 크기 — 390px → 1440px 사이 비례 */ --fs-hero:clamp(1.875rem, 1.55rem + 1.3333vw, 2.75rem); /* 30 → 44px 수업 제목 */ --fs-h2:clamp(1.375rem, 1.1893rem + .7619vw, 1.875rem); /* 22 → 30px 섹션 제목 */ --fs-h3:clamp(1.125rem, 1.0554rem + .2857vw, 1.3125rem); /* 18 → 21px 소제목 */ --fs-lead:clamp(1.0625rem, .9929rem + .2857vw, 1.25rem); /* 17 → 20px 수업 소개 */ --fs-body:clamp(1rem, .9536rem + .1905vw, 1.125rem); /* 16 → 18px 본문 */ --fs-sm:.9375rem; /* 15px 설명·캡션 */ --fs-xs:.8125rem; /* 13px 태그 */ --lh-hero:1.2; --lh-head:1.3; --lh-lead:1.6; --lh-body:1.7; /* 간격 (8px 단위) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --gutter:clamp(1.25rem, .7857rem + 1.9048vw, 2.5rem); /* 좌우 여백 20 → 40px */ --space-section:clamp(2.5rem, 2rem + 2vw, 4rem); /* 섹션 사이 40 → 64px */ --wrap-max:1200px; --toc:220px; --content:800px; /* 넓은 화면: 왼쪽 목차 + 본문 한 열 */ --header:57px; /* 머리띠 56px + 아래 선 1px (붙는 탭 위치) */ --tap:44px; /* 누르는 곳 최소 높이 */ /* 모양 */ --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:10px; --radius-pill:6px; --shadow-hover:0 10px 24px rgba(27,36,51,.10); /* 링크 상자 hover — 바탕 글자색 계열, 검정 없음 */ /* 움직임 — 상태 변화에만 160–240ms */ --dur-press:160ms; --dur-change:200ms; --ease:cubic-bezier(.2,0,0,1); } .c-red{ --c:var(--red); --c-ink:var(--red-ink); --tint:var(--red-tint); } .c-yellow{ --c:var(--yellow); --c-ink:#4a3300; --tint:var(--yellow-tint); } .c-blue{ --c:var(--blue); --c-ink:var(--blue-ink); --tint:var(--blue-tint); } .c-green{ --c:var(--green); --c-ink:var(--green-ink); --tint:var(--green-tint); } .c-purple{ --c:var(--purple); --c-ink:var(--purple-ink); --tint:var(--purple-tint); } /* ---------- 2. 언어별 글꼴·줄바꿈 (23개 언어) ---------- */ html:lang(ko){ --font:"Paperlogy","Noto Sans KR","Noto Sans","Apple SD Gothic Neo","Malgun Gothic",sans-serif; word-break:keep-all; } /* 페이퍼로지에 없는 글자는 Noto Sans KR로 표시 */ html:lang(ko) h1, html:lang(ko) h2, html:lang(ko) h3{ letter-spacing:-.01em; } html:lang(ja){ --font:"Noto Sans JP","Noto Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif; } html:lang(zh){ --font:"Noto Sans SC","Noto Sans","PingFang SC","Microsoft YaHei",sans-serif; } html:lang(zh-Hant){ --font:"Noto Sans TC","Noto Sans","PingFang TC","Microsoft JhengHei",sans-serif; } /* :lang(zh)보다 뒤 — 대만·홍콩 자형 */ html:lang(hi){ --font:"Noto Sans Devanagari","Noto Sans","Nirmala UI","Kohinoor Devanagari",sans-serif; } html:lang(ar){ --font:"Noto Sans Arabic","Noto Sans","Segoe UI","Geeza Pro",Tahoma,sans-serif; } html:lang(th){ --font:"Noto Sans Thai","Noto Sans","Leelawadee UI",Thonburi,sans-serif; --lh-body:1.75; } /* 태국 문자: 모음·성조 기호가 위아래로 쌓임 */ 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, html:lang(ar) .tag{ letter-spacing:0; } /* 자간을 벌리면 아랍 글자 이어짐이 깨짐 */ html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3{ line-height:1.5; } html:lang(th) h1, html:lang(th) h2, html:lang(th) h3{ font-weight:600; letter-spacing:0; line-height:1.5; } /* ---------- 3. 기본 ---------- */ *, *::before, *::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-body); overflow-wrap:break-word; } h1, h2, h3{ margin:0; line-height:var(--lh-head); text-wrap:balance; } h1{ font-weight:700; } h2{ font-weight:700; } h3{ font-weight:600; } p, li{ text-wrap:pretty; } img{ max-width:100%; display:block; } a{ color:var(--primary); text-decoration:none; } a:not([class]):hover{ text-decoration:underline; } button{ font:inherit; color:inherit; } .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } :focus-visible{ outline:3px solid var(--focus); outline-offset:3px; } .lb{ --focus:#fff; } /* 어두운 바탕 위 focus 링: 크게 보기 16.1:1 (머리띠는 흰 바탕이라 기본 링 4.94:1) */ .wrap{ max-width:var(--wrap-max); margin:0 auto; padding-inline:var(--gutter); } /* ---------- 4. 부품 ---------- */ /* 블록 큐브 (브랜드): 둥근 네모 + 3×3 돌기 */ .cube{ --s:48px; /* 색은 .c-red 등이 주는 --c (여기서 --c를 정하면 위쪽 .c-* 를 덮어써 모두 파랑이 됨) */ display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--s); height:var(--s); border-radius:24%; background-color:var(--c, var(--blue)); 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(27,36,51,.18); color:#fff; font-weight:800; font-size:calc(var(--s) * .46); line-height:1; } .cube.xs{ --s:16px; } .cube.sm{ --s:28px; } .cube.big{ --s:64px; } .cube:not(.c-yellow){ text-shadow:0 1px 1px rgba(27,36,51,.35); } .cube.c-yellow{ color:#4a3300; } /* 7.36:1 */ .cube.c-green{ color:#0e3a1d; text-shadow:none; } /* 흰 숫자 2.74:1 → 4.67:1. 빨강 3.93·파랑 3.49·보라 4.53은 큰 숫자(19px 이상 굵게)라 3:1 통과 */ /* 태그: 학년(코스 색) · 난이도 · 서비스 */ .tag{ display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border-radius:4px; font-size:var(--fs-xs); font-weight:700; line-height:1.4; color:#fff; background-color:var(--accent, var(--blue)); background-image:linear-gradient(rgba(27,36,51,.2), rgba(27,36,51,.2)); } /* 코스 색 위 흰 글자 → 20% 어둡게 (legacy와 같은 방식, color-mix 안 씀) */ .tag.lv{ background:none; color:var(--ink2); letter-spacing:0; } .tag.svc{ background:var(--surface-2); color:var(--ink2); } /* 버튼: 알약 대신 6px 직사각형. 주요 = .btn-cube, 보조 = .btn-ghost */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--tap); padding:10px 18px; border-radius:6px; border:1.5px solid var(--line-ui); background:var(--surface); color:var(--ink); font-size:1rem; font-weight:700; line-height:1.25; text-align:center; cursor:pointer; transition:background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease), transform var(--dur-press) var(--ease); } .btn:hover{ background:var(--surface-2); color:var(--ink); } .btn:active{ transform:scale(.98); } .btn.small{ padding:8px 18px; font-size:var(--fs-sm); } .btn.big{ min-height:52px; padding:12px 28px; font-size:1.125rem; } .btn-cube{ --c:var(--blue-ink); background:var(--c); border-color:var(--c); color:#fff; } .btn-cube:hover{ background:var(--c); color:#fff; filter:brightness(1.05); } /* 밝아져도 흰 글자 4.55:1 이상(근사 계산) */ .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); color:#4a3300; } .btn-cube.c-yellow:hover{ color:#4a3300; } .btn-cube.c-white{ --c:var(--surface); border-color:var(--line-ui); color:var(--ink); } .btn-cube.c-white:hover{ background:var(--surface-2); color:var(--ink); filter:none; } .btn[disabled]{ opacity:.45; cursor:default; transform:none; } .btn-done.is-done::before{ content:"\2713"; } /* 상자: 흰 바탕 + 1px 장식 선, 그림자 없음 */ .box, .app-get, .ls-cards li, .ls-pairs li, .ls-bars, .ls-block, .ls-quiz, .ls-code, .ls-chart, .ls-chartcard, .ls-gallery figure, .blocks li, .ls-col, .ls-tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); } /* ---------- 5. 머리띠·발 ---------- */ /* 머리띠: 브랜드 바이블 웹 예시대로 흰 바탕 + 컬러 로고(assets/logo_color.svg). 색 띠(.stripe)는 쓰지 않음 (HTML은 legacy 페이지용으로 남김) */ .top{ position:sticky; top:0; z-index:20; background:#fff; color:var(--graphite); border-bottom:1px solid var(--line); } /* 아래 선은 장식 */ .top-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); height:56px; } .logo{ display:flex; align-items:center; gap:12px; min-width:0; color:var(--graphite); font-weight:500; } /* 로고보다 사이트 이름이 먼저 튀지 않게 */ .logo img{ height:28px; width:auto; max-width:min(210px,45vw); object-fit:contain; flex:none; } .logo span{ padding-inline-start:12px; border-inline-start:1px solid #d0d0d1; font-size:.8125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stripe{ display:none; } .top-right{ display:flex; align-items:center; gap:var(--sp-2); flex:none; } .classic-link{ display:inline-flex; align-items:center; min-height:36px; padding:0 11px; border-radius:var(--radius-pill); background:var(--chalk); color:var(--azure); font-size:.8125rem; font-weight:600; white-space:nowrap; transition:background-color var(--dur-press) var(--ease); } /* Azure 글자 9.33:1 */ .classic-link:hover{ background:#e8eef5; color:var(--azure); } /* 8.71:1 */ .lang{ display:flex; align-items:center; min-height:var(--tap); flex:none; } .lang select{ appearance:none; min-height:36px; padding:0 28px 0 31px; border:1px solid var(--gray-3); border-radius:6px; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233c3c41' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%233c3c41'/%3E%3C/svg%3E"); background-repeat:no-repeat,no-repeat; background-position:left 10px center,right 10px center; color:var(--graphite); font:inherit; font-size:.875rem; font-weight:500; cursor:pointer; transition:background-color var(--dur-press) var(--ease); } /* 지구본으로 언어 목록임을 표시. 테두리 3.63:1 */ .lang select:hover{ background-color:var(--chalk); } .lang option{ color:var(--ink); } [dir=rtl] .lang select{ padding:0 31px 0 28px; background-position:right 10px center,left 10px center; } /* 발: 첫 화면과 같은 Chalk 띠 — 왼쪽 회사 이름·이메일·저작권, 오른쪽 SNS 로고 + 바로가기 펼침 상자 (build.mjs siteFooter, 주소·전화는 뺌) 글자색은 검정(--ink 14.30:1)·회색(Gray04 5.66:1) 두 가지, 굵기는 400·700 두 가지. 이메일은 문장 속 링크(밑줄로 구분) */ .foot{ margin-top:var(--space-section); padding:var(--sp-6) 0; background:var(--chalk); color:var(--gray-4); font-size:var(--fs-sm); font-weight:400; line-height:1.45; } .foot-in{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--sp-4) var(--sp-6); } .foot-info{ min-width:0; flex:1 1 380px; } .foot-info p{ margin:0 0 2px; } .foot-info p:last-child{ margin:var(--sp-2) 0 0; } .foot-info b{ color:var(--ink); font-weight:700; } .foot-contact{ display:flex; flex-wrap:wrap; column-gap:var(--sp-4); } .foot a{ color:var(--ink); font-weight:400; } .foot-contact a{ text-decoration:underline; text-underline-offset:2px; } /* 색 대신 밑줄로 링크 표시 */ .foot-side{ display:flex; align-items:center; gap:var(--sp-3); flex:none; } .foot-sns{ list-style:none; display:flex; gap:2px; margin:0; padding:0; } .foot-icon{ display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); border-radius:50%; color:var(--gray-4); transition:background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease); } /* 로고 5.66:1 */ .foot-icon:hover{ background:#e8e8ea; color:var(--ink); } /* 바로가기: 펼침 상자 (JS 없이 details) — 언어 고르기와 같은 모양, 목록은 위로 펼침 */ .foot-menu{ position:relative; } .foot-menu summary{ display:flex; align-items:center; min-height:var(--tap); padding:0 34px 0 14px; border:1.5px solid var(--gray-3); border-radius:var(--radius-sm); background:#fff 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='%231b2433'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--ink); font-weight:700; white-space:nowrap; cursor:pointer; list-style:none; } /* 테두리 3.63:1 */ .foot-menu summary::-webkit-details-marker{ display:none; } .foot-menu[open] summary{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 6l5-6 5 6z' fill='%231b2433'/%3E%3C/svg%3E"); } [dir=rtl] .foot-menu summary{ padding:0 14px 0 34px; background-position:left 12px center; } .foot-menu ul{ position:absolute; bottom:calc(100% + 6px); inset-inline-end:0; z-index:5; min-width:max(100%, 200px); list-style:none; margin:0; padding:6px; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; box-shadow:0 8px 24px rgba(27,36,51,.12); } .foot-menu li a{ display:flex; align-items:center; min-height:var(--tap); padding:0 12px; border-radius:var(--radius-sm); white-space:nowrap; } .foot-menu li a:hover{ background:var(--chalk); color:var(--ink); } /* 사이트 이름: 다 들어가지 않는 폭에선 로고만 (768px에선 es·pt·hr·ro·bg가 잘림, 900px부터 23개 언어 모두 들어감) */ @media (max-width:899px){ .logo span{ display:none; } } @media (max-width:420px){ .classic-link{ padding:0 10px; font-size:.8125rem; } } /* ---------- 6. 수업 페이지 ---------- */ /* 경로 줄: 왼쪽 경로 + 오른쪽 '몇 번째 수업' (이전·다음) */ .crumb-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); padding:var(--sp-4) 0 var(--sp-2); } .crumb{ min-width:0; padding:var(--sp-4) 0 var(--sp-2); color:var(--ink3); font-size:var(--fs-sm); font-weight:600; } .crumb-row .crumb{ padding:0; } .pos{ display:inline-flex; align-items:center; gap:var(--sp-1); flex:none; } .pos-now{ padding:0 var(--sp-2); color:var(--ink2); font-size:var(--fs-sm); font-weight:700; white-space:nowrap; } .pos-btn{ display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); border:1.5px solid var(--line-ui); border-radius:50%; background:var(--surface); color:var(--ink); font-weight:700; transition:background-color var(--dur-press) var(--ease); } /* 테두리 3.98:1 */ a.pos-btn:hover{ background:var(--surface-2); color:var(--ink); } .pos-btn.is-off{ border-color:var(--line); color:var(--ink3); opacity:.5; } /* 첫·마지막 쪽: 누를 수 없음 */ /* 표지: 카드 틀 없이 바탕 위에. 넓은 화면은 왼쪽 글 | 오른쪽 그림 */ .m-cover{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); padding:var(--sp-3) 0 0; } .m-cover > *{ min-width:0; } .m-title-row{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); } .m-title-row h1{ font-size:var(--fs-hero); line-height:var(--lh-hero); letter-spacing:-.01em; } .lead{ margin:0 0 var(--sp-4); color:var(--ink2); font-size:var(--fs-lead); line-height:var(--lh-lead); max-width:36em; } .ls-meta{ margin:0 0 var(--sp-5); } /* 정보 줄 (수업 표지·수업 카드·미션 표지): 알약 대신 '학년 · 난이도 · 앱' 글자 한 줄, 사이는 가운뎃점. 보조 글자 5.85:1, 별 4.73:1 */ .ls-tags{ display:flex; flex-wrap:wrap; align-items:center; row-gap:4px; color:var(--ink2); font-size:var(--fs-sm); font-weight:600; line-height:1.4; } .ls-tags .tag{ display:inline-flex; align-items:center; gap:6px; min-height:0; padding:0; border-radius:0; background:none; color:inherit; font-size:inherit; font-weight:inherit; } .ls-tags .tag + .tag::before{ content:"\00B7"; margin-inline:8px; color:var(--ink3); letter-spacing:0; } .ls-tags .tag.lv{ gap:7px; color:var(--ink2); letter-spacing:0; } .level-bars{ display:grid; grid-template-columns:repeat(5,12px); align-items:center; gap:3px; } .level-bars i{ display:block; width:12px; height:6px; border-radius:1px; background:#d8dee6; } .level-bars i.on{ background:var(--accent, var(--purple)); } .tile .ls-tags .tag.svc{ flex-basis:100%; } .tile .ls-tags .tag.svc::before{ content:none; } /* 앱 이름이 다음 줄로 넘어가면 줄 맨 앞에 '·'만 남음 → 수업 카드와 좁은 화면에선 늘 둘째 줄, 점 없이 */ .ls-card .ls-tags .tag.svc{ flex-basis:100%; } .ls-card .ls-tags .tag.svc::before{ content:none; } @media (max-width:599px){ .ls-tags .tag.svc{ flex-basis:100%; } .ls-tags .tag.svc::before{ content:none; } } .tag-ico{ width:16px; height:16px; flex:none; border-radius:4px; } .m-cover-img{ margin:0; border-radius:6px; overflow:hidden; background:var(--surface); } .m-cover-img img{ width:100%; height:auto; } /* 수업 표지 그림은 원래 비율 그대로 (팀 규칙) */ .ls-cover-foot{ display:flex; flex-wrap:wrap; gap:var(--sp-2); } @media (min-width:900px){ .m-cover{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:var(--sp-7); row-gap:var(--sp-6); align-items:center; } .ls-cover-foot{ grid-column:1 / -1; } } /* 선생님용 수업 준비: 오늘 배울 것 · 준비물 — 펼침 목록(처음엔 펼침). 좁은 화면은 표지 아래 두 상자, 넓은 화면은 왼쪽 목차 위 (7번) */ .prep{ display:grid; gap:var(--sp-4); grid-template-columns:minmax(0,1fr); margin-top:var(--sp-5); } @media (min-width:720px){ .prep{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } } .prep-item{ padding:var(--sp-1) var(--sp-5) var(--sp-4); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); } .prep-item:not([open]){ padding-bottom:var(--sp-1); } .prep-item > summary{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); font-weight:800; list-style:none; cursor:pointer; } .prep-item > summary::-webkit-details-marker{ display:none; } .prep-item > summary::before{ content:"\25B6"; color:var(--ink3); font-size:.7em; transition:transform var(--dur-press) var(--ease); } .prep-item[open] > summary::before{ transform:rotate(90deg); } [dir=rtl] .prep-item > summary::before{ content:"\25C0"; } [dir=rtl] .prep-item[open] > summary::before{ transform:rotate(-90deg); } .ls-goals{ margin:0; padding-inline-start:1.2em; } .ls-goals li{ margin:var(--sp-1) 0; } .ls-needs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2); } .ls-needs li{ padding:4px 10px; border-radius:4px; background:var(--surface-2); font-size:var(--fs-sm); font-weight:600; } /* 사용할 앱 띠: 어떤 앱인지 아이콘으로 크게 (팀 피드백 2026-10-16) */ .app-get{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-4); margin:0; padding:var(--sp-4) var(--sp-5); } .app-icon{ width:48px; height:48px; flex:none; border-radius:var(--radius-md); } .app-txt{ display:flex; flex-direction:column; min-width:0; margin-inline-end:auto; line-height:1.3; } .app-lbl{ color:var(--ink3); font-size:.8125rem; font-weight:600; } .app-name{ color:var(--ink); font-size:1.125rem; font-weight:700; } .app-links{ display:flex; flex-wrap:wrap; gap:6px; } /* 받기·웹: 아이콘과 이름을 함께 표시해 목적을 바로 알 수 있게 */ .app-links a{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 11px; border:1px solid var(--line-ui); border-radius:5px; background:var(--surface); color:var(--ink); font-size:.8125rem; font-weight:600; transition:background-color var(--dur-press) var(--ease); } .app-links a svg{ width:17px; height:17px; } .app-links a:hover{ background:var(--surface-2); color:var(--ink); } .app-links a:hover svg path[stroke="#fff"]{ stroke:var(--surface-2); } /* Google Play 조각 경계 선이 hover 바탕과 같은 색으로 */ /* 단계 탭: 좁은 화면은 머리띠 아래 가로 단계, 넓은 화면은 왼쪽 목차 */ .stages{ position:sticky; top:var(--header); z-index:15; margin-top:var(--sp-6); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .stages-in{ display:flex; gap:var(--sp-2); padding-top:10px; padding-bottom:10px; overflow-x:auto; scrollbar-width:none; } .stages-in::-webkit-scrollbar{ display:none; } .stage{ display:inline-flex; align-items:center; gap:var(--sp-2); flex:none; min-height:var(--tap); padding-block:0; padding-inline:10px 14px; border:1px solid var(--line-ui); border-radius:5px; background:var(--surface); color:var(--ink); font-size:var(--fs-sm); font-weight:700; white-space:nowrap; transition:background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease); } .stage:hover{ background:var(--surface-2); } .stage.is-active{ background:var(--chalk); border-color:var(--ink); color:var(--ink); } /* 탭의 번호 칩: 숫자가 작아(12px) 4.5:1이 필요 → 같은 계열의 진한 색 바탕 + 흰 숫자 (빨강 5.0·파랑 4.94·초록 4.95·보라 6.0, 노랑은 진한 갈색 숫자 7.36) */ .stage .cube{ --s:22px; border-radius:6px; background-image:none; box-shadow:none; text-shadow:none; background-color:var(--c-ink, var(--blue-ink)); color:#fff; font-size:.75rem; } .stage .cube.c-yellow{ background-color:var(--yellow); color:#4a3300; } /* 섹션 (수업·미션 공통): 상자 없이 선과 간격으로. 번호 큐브 = 단계 배지 */ .panel{ margin:0; padding:0; scroll-margin-top:calc(var(--header) + 72px); } .stages ~ .wrap > .panel:first-child{ padding-top:var(--space-section); } .panel + .panel:not(.finish){ margin-top:calc(var(--space-section) * .6); padding-top:calc(var(--space-section) * .6); border-top:1px solid var(--line); } /* 선 위아래 29 → 48px */ .panel > h2, .panel-head > h2{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin:0 0 var(--sp-5); font-size:var(--fs-h2); } .panel > h2 .cube.sm, .panel-head > h2 .cube.sm{ --s:44px; font-size:1.25rem; } /* 숫자 20px 굵게 = 큰 글자: 흰 숫자 빨강 3.93·파랑 3.49·보라 4.53, 초록·노랑은 진한 숫자 */ /* 번호 배지 (섹션 제목·미션 제목): 단색 둥근 네모 (2026-10-18 위 돌기 3개를 뺌). 모서리는 --s에 비례 */ .panel > h2 .cube.sm, .panel-head > h2 .cube.sm, .m-title-row .cube.num{ border-radius:calc(var(--s) * .22); background-image:none; box-shadow:none; text-shadow:none; } .page-lesson .lesson-sec:not(.finish){ position:relative; padding-inline-start:24px; border-inline-start:2px solid var(--line); } .page-lesson .lesson-sec + .lesson-sec:not(.finish){ border-top:0; } .page-lesson .lesson-sec:not(.finish) > h2 .cube.sm, .page-lesson .lesson-sec:not(.finish) > .panel-head h2 .cube.sm{ position:relative; z-index:1; margin-inline-start:-47px; outline:6px solid var(--paper); } .lesson-sec > *{ margin-top:0; } .ls-h{ margin:var(--sp-6) 0 var(--sp-3); font-size:var(--fs-h3); } .lesson-sec > h2 + .ls-h{ margin-top:0; } .ls-p{ margin:0 0 var(--sp-4); } .ls-mini{ margin:var(--sp-5) 0 var(--sp-2); color:var(--ink2); font-size:1rem; } /* 팁: 이모지 없이 노란 바탕 + 앞에 작은 노란 블록 (2026-10-17 왼쪽 띠 대신) — 글자 7:1 이상 */ /* 팁: 노란 바탕 + 앞에 '아하' 캐릭터 (2026-10-18 작은 노란 블록에서 바꿈 — 장식 그림이라 글자 없음) */ .ls-tip{ position:relative; min-height:60px; margin:var(--sp-4) 0; padding:var(--sp-3) var(--sp-4); padding-inline-start:calc(var(--sp-4) + 48px); border-radius:var(--radius-md); background:#fff7db; color:#6b4e00; font-weight:600; } .ls-tip::before{ content:""; position:absolute; top:calc(var(--sp-3) + (1.7em - 38px) / 2); inset-inline-start:var(--sp-3); width:38px; height:38px; background:url("/assets/char/aha-s.png") center / contain no-repeat; } /* 그림 */ .ls-fig{ margin:var(--sp-4) 0 var(--sp-5); } .ls-fig img, .ls-shot{ width:100%; max-width:var(--content); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); } .ls-fig img{ max-height:480px; object-fit:contain; } .ls-shot{ width:auto; max-width:min(640px,100%); max-height:520px; } /* 세로로 긴 앱 화면도 너무 커지지 않게 */ .ls-zoom{ display:block; width:100%; max-width:var(--content); padding:0; border:0; background:none; text-align:start; cursor:zoom-in; } .ls-zoom span, .ls-zoom-text{ display:inline-block; margin-top:var(--sp-2); color:var(--primary); font-size:var(--fs-sm); font-weight:700; } .ls-zoom-text{ width:auto; padding:var(--sp-1) 0; border:0; background:none; cursor:pointer; } .ls-gallery{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-3) 0 var(--sp-5); } .ls-gallery figure{ flex:1 1 180px; max-width:340px; min-width:0; margin:0; padding:10px; text-align:center; } .ls-gallery img{ width:100%; height:210px; object-fit:contain; } .ls-gallery figcaption{ margin-top:var(--sp-2); color:var(--ink2); font-size:var(--fs-sm); font-weight:700; } /* 카드·짝·열 */ .ls-cards{ list-style:none; margin:0 0 var(--sp-4); padding:0; display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); } .ls-cards li{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:var(--sp-3); } .ls-cards img{ width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:var(--radius-sm); background:var(--surface); } .ls-cards b{ margin-top:var(--sp-1); } .ls-cards span{ color:var(--ink2); font-size:1rem; } .ls-pairs{ list-style:none; margin:0 0 var(--sp-4); padding:0; display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); } .ls-pairs li{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:var(--sp-3); text-align:center; } .ls-pairs img{ width:100%; aspect-ratio:1; object-fit:contain; } .ls-pairs:not(.icons) img{ max-height:200px; } .ls-pairs span{ color:var(--ink2); font-size:1rem; } .ls-pairs.icons{ grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:var(--sp-2); } .ls-pairs.icons li{ flex-direction:row; align-items:center; gap:var(--sp-3); padding:10px 12px; text-align:start; } .ls-pairs.icons img{ width:46px; height:46px; flex:none; aspect-ratio:auto; } .ls-pairs.icons p{ display:flex; flex-direction:column; min-width:0; margin:0; } .ls-pairs.icons span{ font-size:var(--fs-sm); } .ls-cols{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); margin:0 0 var(--sp-4); } .ls-codecols{ grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr)); } /* 열 묶음·그림 타일: 위쪽 색 띠 대신 섹션 색의 옅은 바탕(고정값) + 제목 앞 작은 블록 */ .ls-col{ min-width:0; padding:var(--sp-4); border:0; background:var(--tint, var(--surface)); } .ls-col > img{ width:100%; aspect-ratio:4/3; object-fit:contain; margin-bottom:var(--sp-2); border-radius:var(--radius-sm); background:var(--surface); } .ls-col > b{ display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-bottom:var(--sp-3); font-size:1.0625rem; text-align:center; } .ls-col > b::before, .ls-tile b::before, .ch-kpi-card b::before{ content:""; flex:none; width:12px; height:12px; border-radius:3px; background:var(--c, var(--line-ui)); box-shadow:inset 0 -2px 0 rgba(27,36,51,.15); } /* 작은 블록 = 색 표시 (장식) */ .ls-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; } .ls-col li{ padding:6px 12px; border-radius:var(--radius-sm); background:var(--surface); font-size:var(--fs-sm); } .ls-col li.is-head{ font-weight:800; } .ls-col .ls-code{ margin:6px 0 0; padding:var(--sp-2); } /* 단계 그림 + 글자 */ .ls-tiles-wrap{ max-width:var(--content); margin:var(--sp-3) 0 var(--sp-2); text-align:center; } .ls-tiles-note{ display:inline-block; margin:0 0 var(--sp-3) !important; padding:4px 14px; border-radius:var(--radius-pill); background:var(--surface-2); color:var(--ink2); font-size:var(--fs-sm); font-weight:700; } .ls-tiles{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); } .ls-tile{ min-width:0; margin:0; padding:10px 8px 8px; border:0; background:var(--tint, var(--surface)); text-align:center; } .ls-tile b{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:var(--sp-2); font-size:1.125rem; font-weight:800; line-height:1.25; hyphens:auto; overflow-wrap:break-word; } .ls-tile img{ width:100%; max-height:280px; object-fit:contain; border-radius:var(--radius-sm); } .ls-match{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--sp-3); max-width:var(--content); margin:var(--sp-3) 0 var(--sp-2); } .ls-match img{ width:min(260px,42%); border-radius:var(--radius-lg); } .ls-match-arrow{ color:var(--ink); font-size:2rem; line-height:1; } [dir=rtl] .ls-match-arrow{ transform:scaleX(-1); } .ls-tablet{ min-width:min(220px,42%); padding:14px 18px; border:10px solid #3b4352; border-radius:22px; background:#fffaf0; text-align:center; box-shadow:0 4px 0 #2a303b; } /* 태블릿 화면 흉내 — 실물 모양 그대로 */ .ls-tablet b{ display:block; margin-bottom:var(--sp-2); font-size:1.0625rem; } .ls-tablet span{ display:block; border:2px solid #cfd5df; border-radius:10px; background:#fff; color:#14213d; font-size:2rem; font-weight:800; line-height:1.3; } @media (max-width:480px){ .ls-step-body .ls-tiles-wrap{ margin-inline-start:-44px; } .ls-tiles{ gap:6px; } .ls-tile{ padding:7px 3px 4px; border-radius:var(--radius-md); } .ls-tile b{ font-size:.875rem; margin-bottom:5px; } .ls-tablet{ border-width:7px; padding:10px; } } /* 막대·블록·표 */ .ls-bars{ display:grid; gap:10px; max-width:560px; margin:0 0 var(--sp-4); padding:var(--sp-4) var(--sp-5); } .ls-bar{ display:grid; grid-template-columns:minmax(60px,auto) 1fr 3.2em; gap:var(--sp-3); align-items:center; font-weight:700; } .ls-bar i{ position:relative; display:block; height:14px; overflow:hidden; border-radius:var(--radius-pill); background:var(--surface-2); } .ls-bar i::after{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:var(--v); border-radius:var(--radius-pill); background:var(--c); } .ls-bar em{ font-style:normal; text-align:end; } .ls-bars small{ color:var(--ink3); font-size:var(--fs-sm); } .ls-block{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); margin:0 0 var(--sp-4); padding:var(--sp-4); } .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.0625rem; } .ls-block-body > span{ color:var(--ink2); } @media (min-width:720px){ .ls-block{ grid-template-columns:140px minmax(0,1fr); } } .ls-table{ width:100%; margin-top:var(--sp-2); border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); font-size:var(--fs-sm); } .ls-table th{ padding:8px 12px; background:#297888; color:#fff; text-align:start; } /* 흰 글자 대비 점검된 값 (2026-10-15) */ .ls-table td{ padding:8px 12px; border-top:1px solid var(--line); vertical-align:top; } .ls-table td:first-child{ font-weight:700; } /* 만들기 단계 */ .ls-step{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-4); padding:var(--sp-5) 0; border-top:1px solid var(--line); } .ls-step:first-of-type{ border-top:0; padding-top:var(--sp-1); } /* 단계 번호: 조립 순서가 바로 읽히는 작은 사각 배지 + 연결선 */ .ls-step:not(:last-child)::before{ content:""; position:absolute; z-index:0; top:calc(var(--sp-5) + 36px); bottom:calc(var(--sp-5) * -1); inset-inline-start:17px; width:2px; background:var(--line); } .ls-step > .cube.sm{ position:relative; z-index:1; --s:36px; border:2px solid var(--c, var(--blue)); border-radius:4px; background:var(--surface); box-shadow:none; text-shadow:none; color:var(--c-ink, var(--blue-ink)); font-size:1rem; } .ls-step-body h3{ margin:4px 0 var(--sp-2); font-size:var(--fs-h3); font-weight:600; } .ls-step-body p{ margin:0 0 10px; } /* 부품 수 (블록 몇 개) */ .blocks{ list-style:none; margin:0 0 var(--sp-4); padding:0; display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); } .blocks li{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); min-width:0; padding:var(--sp-3) 10px; } .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-size:1.25rem; font-weight:800; } /* 퀴즈·선생님 안내 */ .ls-quiz{ padding:var(--sp-5); } .ls-q{ display:flex; align-items:flex-start; gap:10px; margin:0 0 var(--sp-3); font-size:1.0625rem; font-weight:700; } .ls-q span{ flex:none; padding:0 8px; border-radius:var(--radius-sm); background:var(--purple-ink); color:#fff; } .ls-quiz summary{ color:var(--purple-ink); font-weight:700; cursor:pointer; } .ls-a{ margin:var(--sp-2) 0 0; padding:10px 14px; border-radius:var(--radius-md); background:var(--purple-tint); } .ls-teacher{ margin:var(--sp-3) 0 var(--sp-4); padding:10px 16px; border:1.5px dashed var(--line-ui); border-radius:var(--radius-lg); background:var(--surface); } .ls-teacher > summary{ color:var(--ink2); font-weight:700; cursor:pointer; } .ls-teacher[open] > summary{ margin-bottom:var(--sp-2); } /* 코드 블록 (scratchblocks) */ .ls-code{ margin:var(--sp-2) 0 var(--sp-3); padding:var(--sp-3) 14px; border-radius:var(--radius-md); overflow-x:auto; } .ls-code pre.blocks{ margin:0; color:var(--ink2); font:600 .875rem/1.5 var(--mono); white-space:pre; } .ls-code svg{ display:block; max-width:none; } .ls-code .scratchblocks + .scratchblocks{ margin-top:10px; } /* 앱 첫 화면 버튼 (실제 앱 배치 그대로 — 아랍어도 왼쪽→오른쪽) */ .ls-appmenu{ direction:ltr; display:grid; grid-template-columns:repeat(2,minmax(0,140px)); gap:10px; width:max-content; max-width:100%; margin:var(--sp-2) 0 var(--sp-3); padding:14px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#eef9ff; } .ls-app{ padding:10px 6px 9px; border-radius:14px; background:var(--c); color:var(--on, #fff); text-align:center; font-size:.875rem; font-weight:800; 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; margin:0 auto 5px; border-radius:10px; } .ls-app span{ display:inline-block; padding-inline:var(--on-pad, 0); border-radius:6px; background:var(--on-bg, transparent); } /* 글자색은 build.mjs textOn이 대비 큰 쪽으로 */ /* 차트 (큐로AI 스튜디오 데이터 차트 모양) */ .ls-chart{ max-width:560px; margin:var(--sp-3) 0; padding:var(--sp-3) var(--sp-4) 10px; } .ls-chart > figcaption{ margin-bottom:6px; font-weight:700; text-align:center; } .ls-chart.ch-series{ max-width:640px; } .ls-chart.ch-kpi{ max-width:none; padding:0; border:0; background:none; } .ch-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--sp-2); } .ch-stat{ display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 9px; border:1px solid #c9d6e6; border-radius:var(--radius-sm); background:#eef4fb; font-size:.8125rem; } .ch-stat i{ min-width:2.2em; padding:1px 9px; border-radius:6px; background:#0a8261; color:#fff; font-style:normal; font-weight:700; 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; padding:0 4%; border-bottom:2px solid #cfd8e3; } .ch-col{ display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; height:100%; } .ch-col em{ margin-bottom:2px; color:#5b6878; font-size:.8125rem; font-style:normal; text-align:center; } .ch-col i{ display:block; min-height:3px; border-radius:5px 5px 0 0; } .ch-mean{ position:absolute; left:0; right:0; border-top:2px dashed var(--red); } .ch-mean span{ position:absolute; right:0; bottom:2px; padding:0 3px; border-radius:4px; background:rgba(255,255,255,.85); color:var(--red-ink); font-size:.78rem; font-weight:700; } .ch-labels{ display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:0 2px; padding:4px 4% 0; } .ch-labels span{ font-size:.8125rem; line-height:1.25; text-align:center; overflow-wrap:anywhere; } .ch-svg{ display:block; width:100%; height:auto; } .ch-axis{ stroke:#cfd8e3; stroke-width:2; } .ch-grid{ stroke:#eef1f5; stroke-width:1; } .ch-num, .ch-tick{ font-size:12px; fill:#5b6878; text-anchor:middle; } .ch-r{ font-size:14px; font-weight:700; fill:var(--red-ink); } .ch-pred{ font-size:13px; font-weight:800; fill:#b07800; } .ch-axes{ margin:4px 0 0; color:var(--ink2); font-size:.8125rem; text-align:center; } .ch-pie{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; } .ch-pie svg{ width:130px; height:130px; flex:none; } .ch-pie ul{ list-style:none; margin:0; padding:0; font-size:.875rem; } .ch-pie li{ display:flex; align-items:center; gap:6px; margin:3px 0; } .ch-pie li i{ width:11px; height:11px; flex:none; border-radius:3px; } .ch-table{ margin:0 auto; } .ch-series .ch-plot{ overflow:hidden; } .ch-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-top:6px; font-size:.875rem; } .ch-legend span{ display:inline-flex; align-items:center; gap:5px; } .ch-legend i{ display:inline-block; width:14px; height:10px; border-radius:3px; } .ch-legend .ref i{ height:0; border-top:2px dashed var(--red); border-radius:0; } .ch-kpis{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); } .ch-kpi-card{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); } .ch-kpi-card b{ display:flex; align-items:center; gap:6px; color:var(--ink2); font-size:.875rem; } /* 색은 위쪽 띠 대신 이름 앞 작은 블록 */ .ch-kpi-card em{ color:#14213d; font-size:1.6rem; font-style:normal; font-weight:800; line-height:1.2; } .ch-kpi-card span{ color:var(--ink2); font-size:.8125rem; } .ls-chartcards{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); margin:var(--sp-3) 0; } .ls-chartcard{ position:relative; display:flex; flex-direction:column; gap:6px; padding:var(--sp-3); } .ls-chartcard > b{ font-size:1.0625rem; text-align:center; } .ls-chartcard > .ch-desc{ margin:0; color:var(--ink2); font-size:var(--fs-sm); text-align:center; } .ls-chartcard .ls-chart{ max-width:none; margin:0; padding:4px 0; border:0; } .ls-chartcard .ch-bars{ height:120px; } .ls-chartcard.mark-o{ border:2px solid var(--green); background:#f3fbf5; } .ls-chartcard.mark-x{ border:2px solid var(--red); background:#fdf3f2; } .ch-mark{ position:absolute; top:8px; inset-inline-start:10px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800; } .mark-o .ch-mark{ background:var(--green-ink); } .mark-x .ch-mark{ background:var(--red-ink); } /* 마무리 */ .finish{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--sp-5); padding:var(--sp-4) var(--sp-5); text-align:start; } .finish.panel{ margin-top:var(--space-section); border:1px solid var(--line); border-inline-start:4px solid var(--green); border-radius:6px; background:var(--surface); } .finish-identity{ display:flex; align-items:center; min-width:0; gap:var(--sp-3); } .finish-char, .ls-end{ display:block; width:64px; height:64px; flex:none; margin:0; object-fit:contain; } .finish-copy{ min-width:0; } .finish-copy h2{ margin:0 0 4px; font-size:1.25rem; } .finish-copy p{ margin:0; color:var(--ink2); font-size:var(--fs-sm); } .finish-actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; } .finish-actions .btn{ min-width:112px; min-height:42px; padding:9px 14px; font-size:.9375rem; } @media (max-width:820px){ .finish{ grid-template-columns:1fr; gap:var(--sp-3); padding:var(--sp-4); } .finish-actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:stretch; } .finish-actions .btn{ min-width:0; width:100%; } } @media (max-width:480px){ .finish-char, .ls-end{ width:52px; height:52px; } .finish-actions{ grid-template-columns:1fr; } } /* 그림 크게 보기 (app.js가 만듦) */ .lb{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:56px 12px 24px; background:rgba(20,24,33,.92); cursor:zoom-out; } .lb img{ width:auto; max-width:none; height:auto; border-radius:var(--radius-sm); background:#fff; } @media (min-width:1460px){ .lb img{ max-width:100%; } } .lb-x{ position:fixed; top:10px; inset-inline-end:12px; width:var(--tap); height:var(--tap); border:0; border-radius:50%; background:#fff; color:var(--ink); font-size:1.3rem; font-weight:800; cursor:pointer; } /* ---------- 6-2. 코스 목록 페이지 (.page-course: AI·베이직·어드밴스드) ---------- */ /* 머리: 색 띠 없이 바탕 위에 — 경로 · 나이 태그 · 제목 · 설명 · 사용할 앱 · 진도 */ /* 코스 바로가기 탭 (build.mjs courseTabs) — 밑줄 탭: 머리띠 바로 아래 글자 탭 한 줄, 아래 1px 선. 지금 코스는 굵은 검정 + 남색 밑줄 3px(10.17:1), 나머지는 회색 글자(6.13:1). 좁아서 넘치면 가로로 밀기 (스크롤 막대는 숨김) */ .course-tabs{ border-bottom:1px solid var(--line); background:#fff; } .course-tabs-in{ display:flex; gap:28px; overflow-x:auto; scrollbar-width:none; } .course-tabs-in::-webkit-scrollbar{ display:none; } .course-tab{ display:inline-flex; align-items:center; flex:none; min-height:52px; margin-bottom:-1px; padding-top:3px; border-bottom:3px solid transparent; color:var(--ink2); font-size:.9375rem; font-weight:600; white-space:nowrap; transition:color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease); } .course-tab:hover{ color:var(--ink); border-bottom-color:var(--line); } .course-tab[aria-current="page"]{ color:var(--ink); font-weight:700; border-bottom-color:var(--azure); } .course-tab:focus-visible{ outline-offset:-3px; } /* 가로 밀기 칸 안에서 링이 잘리지 않게 안쪽으로 */ .course-head{ padding:var(--sp-5) 0 var(--sp-6); } .course-head-grid{ display:grid; gap:var(--sp-5); align-items:center; } .course-head-copy{ min-width:0; } .course-head-photo{ margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--chalk); } .course-head-photo img{ width:100%; height:100%; object-fit:cover; } .course-head h1{ margin:var(--sp-3) 0; font-size:var(--fs-hero); line-height:var(--lh-hero); letter-spacing:-.01em; } .course-head p{ max-width:36em; margin:0 0 var(--sp-5); color:var(--ink2); font-size:var(--fs-lead); line-height:var(--lh-lead); } .course-head .app-get{ max-width:720px; margin-bottom:var(--sp-5); } .course-head .progress{ max-width:420px; } @media (min-width:900px){ .course-head-grid{ grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); } .course-head-photo{ aspect-ratio:4/3; } } /* 진도 막대 (app.js가 --p와 글자를 채움). 채움색은 진한 초록 — 막대 바탕 위 4.28:1 */ .progress{ display:flex; align-items:center; gap:var(--sp-3); } .progress .bar{ flex:1; height:8px; overflow:hidden; border-radius:2px; background:var(--surface-2); } .progress .bar i{ display:block; width:var(--p, 0%); height:100%; border-radius:inherit; background:var(--green-ink); } .progress-label{ color:var(--ink2); font-size:var(--fs-sm); font-weight:600; white-space:nowrap; } /* 미션 카드 격자 (베이직·어드밴스드): 흰 상자 + 그림 + 블록 번호 배지 */ /* 미션 목록: 휴대폰 2개 · 태블릿 3개 · 넓은 화면 4개까지, 간격 넉넉히 (2026-10-18 — 6개씩은 빽빽해서) */ .tile-grid{ display:grid; gap:var(--sp-5) var(--sp-4); grid-template-columns:repeat(2,minmax(0,1fr)); padding:var(--sp-2) 0 var(--sp-7); } @media (min-width:720px){ .tile-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-6) var(--sp-5); } } @media (min-width:1024px){ .tile-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-6); } } .tile{ position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:0 0 var(--sp-4); border:0; border-bottom:1px solid var(--line-ui); border-radius:0; background:var(--surface); color:var(--ink); transition:transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease); } .tile:hover{ transform:translateY(-2px); box-shadow:none; color:var(--ink); } .tile:active{ transform:scale(.99); box-shadow:none; } .tile b{ padding:0 4px; font-size:1rem; font-weight:700; line-height:1.4; } .tile-img{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; overflow:hidden; border-radius:4px; background:var(--surface); } .tile-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px; } /* 대표 조립도는 자르지 않고 전체가 보이게 (팀 규칙) */ /* 카드 번호: 작은 동그라미(30px) + 흰 테두리, 숫자는 Poppins(숫자만 받음 — build.mjs). 작은 글자라 코스 색을 20% 어둡게 덮음 (학년 태그와 같은 방식, color-mix 안 씀): 흰 숫자 베이직 4.74 · 어드밴스드 4.85 · AI 5.81 */ .tile-img .cube.num{ --s:30px; --c:var(--accent, var(--blue)); position:absolute; top:10px; inset-inline-start:10px; z-index:1; border-radius:4px; background-image:linear-gradient(rgba(27,36,51,.2), rgba(27,36,51,.2)); box-shadow:none; text-shadow:none; font-family:"Poppins", var(--font); font-size:.875rem; font-weight:600; letter-spacing:0; } .tile .check{ display:none; position:absolute; top:10px; inset-inline-end:10px; z-index:1; align-items:center; justify-content:center; width:30px; height:30px; border-radius:4px; background:var(--green-ink); color:#fff; font-weight:800; } /* 흰 ✓ 4.95:1 */ .tile.is-done .check{ display:flex; } .tile.is-done{ box-shadow:0 0 0 2px var(--green-ink); } /* 끝낸 미션: 테두리 대신 초록 링 */ .tile.is-done:hover{ box-shadow:0 0 0 2px var(--green-ink), var(--shadow-hover); } /* 미션 목록: 사진과 제목이 한 장으로 이어지는 카드 (2026-10-20). */ .tile-grid:not(.ls-grid){ gap:24px; } .tile-grid:not(.ls-grid) > .tile{ gap:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 8px rgba(27,36,51,.045); transition:transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); } .tile-grid:not(.ls-grid) .tile-img{ aspect-ratio:16/13; border-radius:0; background:var(--chalk); } .tile-grid:not(.ls-grid) .tile-img img{ padding:0; } /* 26~29번의 와이드 원본은 배경의 좌우 여백을 덜어 카드 높이를 채운다. */ .tile-grid:not(.ls-grid) .tile-img img[src$="/thumbnail.jpg"]{ object-fit:cover; object-position:center; } .tile-grid:not(.ls-grid) .tile > b{ display:block; flex:1; min-height:92px; padding:18px 20px 12px; font-size:1rem; line-height:1.6; letter-spacing:-.015em; overflow-wrap:anywhere; } .tile-grid:not(.ls-grid) .ls-tags{ align-content:flex-start; min-height:64px; padding:0 20px 18px; row-gap:7px; } .tile-grid:not(.ls-grid) .ls-tags .tag{ line-height:1.25; } .tile-grid:not(.ls-grid) .ls-tags .tag.svc{ padding-top:1px; } .tile-grid:not(.ls-grid) .tile-img .cube.num{ top:12px; inset-inline-start:auto; right:auto; left:12px; width:32px; height:32px; border-radius:9px; box-shadow:0 2px 6px rgba(27,36,51,.12); } .tile-grid:not(.ls-grid) > .tile:focus-visible{ outline:3px solid var(--focus); outline-offset:4px; } @media (hover:hover) and (pointer:fine){ .tile-grid:not(.ls-grid) > .tile:hover{ transform:translateY(-4px); border-color:#c8cdd5; box-shadow:0 10px 24px rgba(27,36,51,.10), 0 2px 6px rgba(27,36,51,.04); } } .tile-grid:not(.ls-grid) > .tile:active{ transform:translateY(-1px); } .tile-grid:not(.ls-grid) > .tile.is-done{ border-color:var(--green-ink); box-shadow:0 0 0 1px var(--green-ink), 0 2px 8px rgba(27,36,51,.045); } @media (max-width:719px){ .tile-grid:not(.ls-grid){ gap:16px; } .tile-grid:not(.ls-grid) > .tile{ border-radius:12px; } .tile-grid:not(.ls-grid) .tile > b{ padding:14px 12px 16px; min-height:80px; font-size:.9375rem; } .tile-grid:not(.ls-grid) .ls-tags{ min-height:60px; padding:0 12px 14px; } .tile-grid:not(.ls-grid) .tile-img .cube.num{ top:10px; left:10px; width:28px; height:28px; border-radius:8px; } } @media (prefers-reduced-motion:reduce){ .tile-grid:not(.ls-grid) > .tile:hover, .tile-grid:not(.ls-grid) > .tile:active{ transform:none; } } @media print{ .tile-grid:not(.ls-grid) > .tile{ box-shadow:none; break-inside:avoid; } } /* AI 수업 카드: 그림이 카드 위쪽에 꽉 차고, 제목·태그는 그 아래 */ .ls-grid{ grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:var(--sp-5); } .ls-card{ gap:var(--sp-3); padding:0 0 var(--sp-4); overflow:hidden; } .ls-card .tile-img{ aspect-ratio:4/3; border-radius:0; border-bottom:1px solid var(--line); } .ls-card b, .ls-card .ls-tags{ padding-inline:var(--sp-4); } .ls-card b{ font-size:1.0625rem; } /* ---------- 6-3. 홈 (.page-home) ---------- */ /* 학습 시작 보드: 홍보용 큰 이미지 없이, 첫 화면에서 코스·연령·진도를 한 번에 고른다. */ .learn-start{ border-bottom:1px solid var(--line); background:var(--chalk); } .learn-start-in{ padding-block:clamp(40px,7vw,88px); } .learn-intro{ max-width:850px; } .learn-blocks{ display:flex; align-items:flex-end; gap:5px; height:22px; margin-bottom:var(--sp-5); } .learn-blocks i{ display:block; width:22px; height:22px; background:var(--red); } .learn-blocks i:nth-child(2){ height:15px; background:var(--yellow); } .learn-blocks i:nth-child(3){ height:19px; background:var(--blue); } .learn-blocks i:nth-child(4){ height:13px; background:var(--green); } .learn-blocks i:nth-child(5){ height:17px; background:var(--purple); } .learn-intro h1{ max-width:16em; color:var(--azure); font-size:clamp(1.875rem,1.45rem + 1.8vw,3.125rem); font-weight:700; line-height:1.18; letter-spacing:-.015em; } .learn-intro p{ max-width:42em; margin:var(--sp-4) 0 0; color:var(--gray-4); font-size:var(--fs-lead); line-height:var(--lh-lead); } .learn-heading{ display:flex; align-items:end; justify-content:space-between; gap:var(--sp-4); margin-top:clamp(40px,6vw,72px); padding-bottom:var(--sp-3); border-bottom:2px solid var(--ink); } .learn-heading h2{ font-size:var(--fs-h2); font-weight:700; } .learn-heading p{ max-width:38em; margin:0; color:var(--ink2); font-size:var(--fs-sm); text-align:end; } .learn-courses{ display:grid; grid-template-columns:minmax(0,1fr); } .learn-course{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:var(--sp-4); min-width:0; padding:var(--sp-5) 0; border-bottom:1px solid var(--line-ui); color:var(--ink); transition:background-color var(--dur-press) var(--ease); } .learn-course:hover{ background:#fff; color:var(--ink); } .learn-course:focus-visible{ outline-offset:4px; } .learn-image{ grid-column:1/-1; display:block; aspect-ratio:16/9; overflow:hidden; background:#e8e8ea; } .learn-image img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform var(--dur-change) var(--ease); } .learn-course:hover .learn-image img{ transform:scale(1.015); } .learn-no{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:5px; background:var(--accent); color:#fff; font-family:"Poppins",var(--font); font-size:.875rem; font-weight:700; line-height:1; background-image:linear-gradient(rgba(27,36,51,.2),rgba(27,36,51,.2)); } html:lang(ko) .tile .cube.num, html:lang(ko) .learn-no{ font-family:var(--font); } .learn-course-main{ display:flex; min-width:0; flex-direction:column; } .learn-meta{ margin-bottom:2px; color:var(--ink3); font-size:var(--fs-xs); font-weight:700; } .learn-course strong{ font-size:var(--fs-h3); font-weight:600; line-height:1.4; } .learn-desc{ margin-top:var(--sp-2); color:var(--ink2); font-size:var(--fs-sm); line-height:1.55; } .learn-course .progress{ margin-top:var(--sp-3); } .learn-go{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-top:4px; border:1px solid var(--line-ui); border-radius:5px; background:#fff; font-size:.875rem; } @media (min-width:900px){ .learn-courses{ grid-template-columns:repeat(3,minmax(0,1fr)); } .learn-course{ grid-template-columns:auto minmax(0,1fr); padding:var(--sp-5); border-bottom:0; border-inline-end:1px solid var(--line-ui); } .learn-image{ aspect-ratio:4/3; margin-bottom:var(--sp-2); } .learn-course:first-child .learn-image img{ object-position:60% 55%; } .learn-course:nth-child(2) .learn-image img{ object-position:50% 50%; } .learn-course:nth-child(3) .learn-image img{ object-position:50% 62%; } .learn-course:first-child{ padding-inline-start:0; } .learn-course:last-child{ padding-inline-end:0; border-inline-end:0; } .learn-go{ display:none; } } @media (max-width:599px){ .learn-heading{ display:block; } .learn-heading p{ margin-top:var(--sp-2); text-align:start; } .learn-desc{ display:none; } } /* 첫 화면 슬라이드 (build.mjs heroSlides): 사진과 글을 나란히 둔 교육 카탈로그형 구성. 사진 위에 흰 카드를 겹치지 않는다. 자동으로 넘어가지 않음 — 휴대폰은 밀어서(scroll-snap), 버튼·점으로도. */ .hero-slides{ position:relative; margin-bottom:var(--sp-5); border-bottom:1px solid var(--line); background:var(--chalk); } .hs-track{ display:flex; align-items:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; } .hs-track::-webkit-scrollbar{ display:none; } .hs-slide{ flex:0 0 100%; min-width:0; scroll-snap-align:start; } .hs-shell{ display:grid; gap:0; padding-block:var(--sp-5) var(--sp-6); } .hs-photo{ position:relative; margin:0; height:clamp(240px, 64vw, 420px); overflow:hidden; background:#e8e8ea; } /* 휴대폰: 사진(3:2)이 거의 다 보임 */ .hs-photo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); } /* 바탕 사진이라 자름 — 남길 부분은 --pos */ .hs-card{ position:relative; padding:var(--sp-5) 0 0; } .hs-blocks{ display:flex; align-items:flex-end; gap:5px; height:18px; margin-bottom:var(--sp-4); } .hs-blocks i{ display:block; width:18px; height:18px; background:var(--sky); } .hs-blocks i:nth-child(2){ height:12px; background:var(--yellow); } .hs-blocks i:nth-child(3){ height:15px; background:var(--green); } .hs-title{ margin:0 0 var(--sp-3); color:var(--azure); font-size:clamp(1.75rem, 1.3rem + 1.8vw, 3rem); line-height:1.15; letter-spacing:-.015em; } /* 28 → 48px, 10.17:1 */ .hs-card p{ max-width:30em; margin:0 0 var(--sp-5); color:var(--gray-4); font-size:var(--fs-lead); line-height:var(--lh-lead); } /* 6.0:1 */ .hs-card .btn-cube{ --c:var(--azure); min-height:44px; padding:8px 18px; border-radius:6px; font-size:1rem; } /* 흰 글자 10.17:1. 홈의 주요 행동은 알약 대신 단단한 직사각형 */ .hs-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); } .hs-ctrl{ position:absolute; left:50%; bottom:10px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1px; transform:translateX(-50%); } .hs-ctrl[hidden]{ display:none; } .hs-arrows{ display:flex; align-items:center; gap:2px; padding:1px 3px; border-radius:7px; background:rgba(255,255,255,.86); } .hs-arrow{ position:relative; z-index:0; display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); border:0; background:transparent; color:var(--ink); font-size:.875rem; font-weight:700; cursor:pointer; } .hs-arrow::before{ content:""; position:absolute; inset:5px; z-index:-1; border:1px solid var(--line-ui); border-radius:5px; background:#fff; transition:background-color var(--dur-press) var(--ease); } /* 보이는 버튼은 34px, 누르는 곳은 44px */ .hs-arrow:hover::before{ background:var(--chalk); } .hs-dots{ display:flex; gap:3px; padding:3px 6px; border-radius:6px; background:rgba(255,255,255,.86); } .hs-dot{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:0; background:none; cursor:pointer; } .hs-dot::before{ content:""; width:6px; height:6px; border-radius:1px; background:var(--gray-3); transition:transform var(--dur-change) var(--ease), background-color var(--dur-change) var(--ease); } /* 작은 블록 3.63:1 */ .hs-dot[aria-current]::before{ background:var(--azure); transform:scale(1.3); } /* 지금 슬라이드: 크기와 색 모두 바뀜 */ @media (min-width:900px){ .hs-shell{ grid-template-columns:minmax(0,7fr) minmax(360px,5fr); align-items:stretch; min-height:min(620px,calc(100vh - var(--header))); padding-block:var(--sp-6); } .hs-photo{ height:auto; min-height:500px; } .hs-card{ display:flex; flex-direction:column; justify-content:center; padding:var(--sp-6) clamp(32px,4vw,64px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; } .hs-title{ font-size:clamp(2rem, 1.2rem + 1.6vw, 2.75rem); } .hs-card p{ margin-bottom:var(--sp-5); } .hs-slide.is-end .hs-photo{ order:2; } .hs-slide.is-end .hs-card{ order:1; } } @media (prefers-reduced-motion:reduce){ .hs-track{ scroll-behavior:auto; } .hs-dot::before{ transition:none; } } /* 코스 */ .sec{ display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-6) 0 var(--sp-4); font-size:var(--fs-h2); } .sec-head{ margin:var(--space-section) 0 var(--sp-5); } /* 홈 코스: 고르라는 제목 + 한 줄 안내 */ .sec-head .sec{ margin:0 0 var(--sp-2); } .sec-sub{ margin:0; color:var(--ink2); font-size:var(--fs-lead); } /* 6.13:1 */ .course-grid{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); padding-bottom:var(--sp-7); } .course-card{ display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); color:var(--ink); transition:transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease); } .course-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); color:var(--ink); } .course-card:active{ transform:scale(.99); box-shadow:none; } .course-img{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface-2); } .course-img img{ width:100%; height:100%; object-fit:cover; } .course-body{ display:flex; flex:1; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5) var(--sp-5); } .course-body .tag{ align-self:flex-start; } .course-body h3{ margin-top:var(--sp-1); font-size:var(--fs-h3); } .course-body p{ margin:0 0 var(--sp-2); color:var(--ink2); font-size:1rem; } .course-body .progress{ margin-top:auto; } /* 기존 사이트 안내 (방문마다 한 번 — app.js가 hidden을 풀고 닫기 버튼에 focus) */ .notice-back{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:var(--sp-4); background:rgba(27,36,51,.45); } .notice-back[hidden]{ display:none; } .notice{ display:grid; grid-template-columns:82px minmax(0,1fr); width:100%; max-width:560px; padding:var(--sp-5); border:1px solid var(--line-ui); border-top:6px solid var(--sky); border-radius:6px; background:var(--surface); text-align:start; } .notice-char{ grid-column:1; grid-row:1/4; display:block; width:68px; height:68px; margin:0; } /* 브랜드 안내 캐릭터 */ .notice h2{ grid-column:2; margin:0 0 var(--sp-2); font-size:1.25rem; font-weight:700; } .notice p{ grid-column:2; margin:0 0 var(--sp-4); color:var(--ink2); font-size:.9375rem; } .notice-btns{ grid-column:2; display:flex; flex-wrap:wrap; gap:8px; } .notice-btns .btn{ flex:1 1 150px; } @media (max-width:480px){ .notice{ grid-template-columns:56px minmax(0,1fr); padding:var(--sp-4); } .notice-char{ width:46px; height:46px; } .notice-btns{ grid-column:1/-1; margin-top:var(--sp-2); } } /* ---------- 6-4. 미션 상세 (.page-mission: 베이직·어드밴스드) ---------- */ /* 표지: 미션 번호 = 코스 색 블록 배지(돌기 3개). 숫자 26px 굵게 = 큰 글자: 흰 숫자 베이직 3.49·어드밴스드 3.68 */ .m-title-row .cube.num{ --s:56px; --c:var(--accent, var(--blue)); font-size:calc(var(--s) * .46); } .m-cover-img figcaption{ padding:var(--sp-2) var(--sp-3); color:var(--ink3); font-size:var(--fs-sm); font-weight:600; } /* 목표: 왼쪽 색 띠 대신 흰 상자 + 앞에 코스 색 작은 블록 */ .goal{ position:relative; margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4); padding-inline-start:calc(var(--sp-4) + 24px); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); color:var(--ink); } .goal::before{ content:""; position:absolute; top:calc(var(--sp-3) + (1.7em - 14px) / 2); inset-inline-start:var(--sp-4); width:14px; height:14px; border-radius:4px; background:var(--accent, var(--blue)); box-shadow:inset 0 -2px 0 rgba(27,36,51,.15); } .m-cover-text > .btn{ margin-top:var(--sp-2); } .mission-brief{ margin:24px 0 16px; padding:22px 24px; border:1px solid #c5dfe9; border-radius:16px; background:#edf7fb; } .mission-brief h2{ margin:0 0 10px; color:var(--azure); font-size:1rem; font-weight:800; line-height:1.4; } .mission-brief p{ margin:10px 0 0; color:var(--ink2); font-size:1rem; line-height:1.75; } .mission-brief .mission-brief-goal{ margin-top:0; color:var(--ink); font-size:1.1875rem; font-weight:700; line-height:1.65; } @media (max-width:719px){ .mission-brief{ padding:18px; } .mission-brief .mission-brief-goal{ font-size:1.0625rem; } } /* 필요한 블록: 묶음 이름(예: 지하철) */ .blk-group{ margin:var(--sp-5) 0 var(--sp-3); color:var(--ink2); font-size:1rem; font-weight:800; } .panel > h2 + .blk-group{ margin-top:0; } /* 조립: 섹션 머리(제목 + '한눈에 보기') */ .panel-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-5); } .panel-head > h2{ margin:0; } .muted{ color:var(--ink3); font-size:var(--fs-sm); font-weight:600; } .link-btn{ display:inline-flex; align-items:center; min-height:var(--tap); padding:0 var(--sp-2); border:0; background:none; color:var(--primary); font-weight:700; cursor:pointer; } .link-btn:hover{ text-decoration:underline; } /* 조립 단계: JS가 있으면 한 단계씩(app.js), 없거나 '한눈에 보기'면 격자 */ .steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); grid-template-columns:minmax(0,1fr); } .steps li{ position:relative; min-width:0; } .steps img{ width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); } .steps li.has-no{ padding-top:8px; padding-inline-start:8px; } .steps li.has-no img{ border:4px solid var(--yellow); } .step-no{ position:absolute; top:-6px; inset-inline-start:-6px; z-index:1; display:flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 8px; border-radius:var(--radius-md); background:var(--yellow); color:#4a3300; font-size:1.375rem; font-weight:800; } /* 진한 갈색 숫자 7.36:1 (예전 흰 숫자는 1.7:1) */ .step-note{ position:absolute; top:12px; inset-inline-end:12px; padding:4px 12px; border-radius:var(--radius-pill); background:var(--blue-ink); color:#fff; font-size:var(--fs-sm); font-weight:700; } .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; max-width:720px; margin:0 auto; animation:step-in var(--dur-change) var(--ease); } @keyframes step-in{ from{ opacity:.3; transform:translateX(var(--dir, 12px)); } } /* 단계가 바뀔 때만, 200ms */ .player-ui{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-4); } .player-ui .btn{ min-width:110px; } .step-count{ color:var(--ink2); font-size:1.125rem; white-space:nowrap; } .step-count b{ color:var(--ink); font-size:1.75rem; } /* 단계 점: 18px + 간격 6px (누르는 간격 24px). 테두리·채움으로 상태 구분 — 바탕 대비 3:1 이상 */ .step-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:var(--sp-4); } .step-dots button{ width:18px; height:18px; padding:0; border:1.5px solid var(--line-ui); border-radius:5px; background:var(--surface); cursor:pointer; transition:background-color var(--dur-press) var(--ease), transform var(--dur-press) var(--ease); } .step-dots button.seen{ background:#ffdd81; } .step-dots button.now{ border-color:#4a3300; background:var(--yellow); transform:scale(1.2); } html:not(.js) .player-ui, html:not(.js) .step-dots, html:not(.js) [data-step-toggle], .player.all .player-ui, .player.all .step-dots{ display:none; } @media (min-width:720px){ .player.all .steps, html:not(.js) .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* 코딩: 과제(말풍선) · 알림 · 사용할 메뉴와 블록 · 화면 · 정답 보기 */ .task{ margin:0 0 var(--sp-3); padding:14px 18px; border-radius:var(--radius-lg); border-end-start-radius:4px; background:var(--blue-tint); font-size:1.125rem; font-weight:700; } .note{ margin:0 0 var(--sp-5); padding:10px 14px; border-radius:var(--radius-md); background:#fff3c4; color:#6b4e00; font-weight:600; } /* 6.95:1 */ .coding .app-get{ margin-bottom:var(--sp-4); } .use-grid{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-4); } .use{ display:flex; align-items:center; gap:10px; min-width:0; max-width:100%; padding-block:8px; padding-inline:8px 14px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); } .use img{ height:64px; width:auto; max-width:62%; object-fit:contain; object-position:left center; } /* 긴 메뉴 이름(pl 등)이 넘치지 않게 그림이 줄어듦 */ [dir=rtl] .use img{ object-position:right center; } .use span{ font-size:var(--fs-sm); font-weight:700; } .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:1px solid var(--line); border-radius:var(--radius-lg); } .solution{ margin-top:var(--sp-5); border:1.5px dashed var(--line-ui); border-radius:var(--radius-lg); background:var(--surface); } .solution summary{ display:flex; align-items:center; min-height:var(--tap); padding:0 var(--sp-4); color:var(--primary); font-weight:700; list-style:none; cursor:pointer; } .solution summary::-webkit-details-marker{ display:none; } .solution summary::before{ content:"\25B6"; display:inline-block; margin-inline-end:var(--sp-2); font-size:.75em; transition:transform var(--dur-press) var(--ease); } .solution[open] summary::before{ transform:rotate(90deg); } [dir=rtl] .solution summary::before{ content:"\25C0"; } [dir=rtl] .solution[open] summary::before{ transform:rotate(-90deg); } .solution img{ width:calc(100% - 2 * var(--sp-4)); max-width:640px; margin:0 var(--sp-4); border:1px solid var(--line); border-radius:var(--radius-md); } .solution p{ margin:var(--sp-3) var(--sp-4) var(--sp-4); color:var(--ink2); } /* 어드밴스드: 블록과 하는 일(MODULE) · 생각해 보기(THINKING) — 테두리 색 대신 제목 앞 작은 블록 */ .module, .thinking{ margin:0 0 var(--sp-4); padding:var(--sp-4) var(--sp-5); border-radius:var(--radius-lg); } .module{ border:1px solid var(--line); background:var(--surface); } .thinking{ background:var(--green-tint); } .module h3, .thinking h3{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); font-size:1rem; font-weight:800; } .module h3::before, .thinking h3::before{ content:""; flex:none; width:12px; height:12px; border-radius:3px; box-shadow:inset 0 -2px 0 rgba(27,36,51,.15); } .module h3{ color:#9a6b00; } .module h3::before{ background:var(--yellow); } /* 4.69:1 */ .thinking h3{ color:#1f7a3c; } /* 초록 바탕 위 4.86:1 */ .thinking h3::before{ width:40px; height:40px; border-radius:0; box-shadow:none; background:url("/assets/char/curious-s.png") center / contain no-repeat; } /* '궁금' 캐릭터 (장식) */ .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:var(--sp-2); min-width:0; } .mod-list img{ flex:none; height:56px; width:auto; max-width:120px; object-fit:contain; } .mod-list span{ display:flex; flex-direction:column; min-width:0; color:var(--ink2); font-size:var(--fs-sm); line-height:1.35; } .mod-list b{ color:var(--ink); font-weight:700; } .thinking > *{ margin:0 0 10px; } .thinking > :last-child{ margin-bottom:0; } .th-tag{ display:inline-block; padding:3px 12px; border-radius:var(--radius-pill); background:var(--blue-ink); color:#fff; font-size:var(--fs-sm); font-weight:700; } .th-check{ position:relative; padding-inline-start:1.5em; font-weight:700; } .th-check::before{ content:"\2714"; position:absolute; inset-inline-start:0; color:var(--green-ink); } .th-p{ color:var(--ink2); } .th-num{ margin:0; padding-inline-start:1.6em; } .th-steps{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .th-steps li{ padding:4px 10px; border-radius:var(--radius-sm); background:var(--blue-ink); color:#fff; font-size:var(--fs-sm); font-weight:700; } .th-steps li + li{ position:relative; margin-inline-start:16px; } .th-steps li + li::before{ content:"\2192"; position:absolute; top:50%; inset-inline-start:-17px; transform:translateY(-50%); color:var(--blue-ink); font-weight:800; } [dir=rtl] .th-steps li + li::before{ content:"\2190"; } .th-box{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:10px 14px; border-radius:var(--radius-md); background:var(--surface); } .th-box b{ flex-basis:100%; color:#1f7a3c; } .th-box img{ width:auto; height:auto; max-width:min(320px,100%); max-height:120px; } .th-box ul{ flex:1 1 220px; min-width:0; margin:0; padding-inline-start:1.2em; } .th-imgs{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); } .th-imgs.small{ grid-template-columns:repeat(auto-fit,minmax(min(90px,100%),1fr)); } .th-imgs figure{ min-width:0; margin:0; text-align:center; } .th-imgs img{ width:100%; max-height:180px; object-fit:contain; border-radius:var(--radius-sm); } .th-imgs.small img{ max-height:90px; } .th-imgs figcaption{ margin-top:4px; color:var(--ink2); font-size:var(--fs-sm); line-height:1.35; } .th-cols{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); } .th-col{ min-width:0; padding:10px 12px; border-radius:var(--radius-md); background:var(--surface); } .th-col b{ display:block; margin-bottom:6px; } .th-col img{ display:block; max-width:100%; max-height:120px; margin:0 auto 6px; object-fit:contain; } .th-col p{ margin:0; color:var(--ink2); font-size:1rem; } @media (max-width:420px){ .player-ui .btn{ min-width:0; padding:10px 14px; } } /* ---------- 7. 넓은 화면: 왼쪽 목차 + 본문 한 열 (수업·미션 상세 — 수업 페이지도 page-mission을 함께 가짐) ---------- */ @media (min-width:1100px){ .page-mission{ --wrap-max:calc(var(--toc) + var(--sp-7) + var(--content) + 2 * var(--gutter)); } /* 머리띠·발도 본문 틀과 같은 너비로 */ .page-mission main{ display:grid; grid-template-columns:minmax(var(--gutter),1fr) var(--toc) var(--sp-7) minmax(0,var(--content)) minmax(var(--gutter),1fr); } .page-mission main > *{ grid-column:2 / 5; } .page-mission main > .wrap{ max-width:none; margin:0; padding-inline:0; } .page-mission main > .stages{ grid-column:2; grid-row:2; align-self:start; position:sticky; top:calc(var(--header) + var(--sp-5)); margin-top:var(--space-section); background:none; backdrop-filter:none; border:0; } .page-mission main > .stages ~ .wrap{ grid-column:4; grid-row:2; } .stages-in{ flex-direction:column; gap:2px; padding:0; overflow:visible; max-width:none; } .stage{ min-height:var(--tap); padding:6px 12px; border:0; border-radius:var(--radius-sm); background:none; color:var(--ink2); font-weight:600; white-space:normal; } .stage:hover{ background:rgba(27,36,51,.04); color:var(--ink); } .stage.is-active{ background:var(--chalk); box-shadow:0 0 0 1px var(--line); color:var(--ink); font-weight:700; } /* 옆 줄 대신 Chalk 바탕 + 굵은 글자로 지금 섹션 표시 (페이지가 흰색이라 흰 바탕은 안 보임) */ .panel{ scroll-margin-top:calc(var(--header) + var(--sp-5)); } /* AI 수업: 준비 정보는 표지 바로 아래 전체 너비, 그 아래부터 왼쪽 목차 + 오른쪽 활동 본문 */ .page-lesson main{ grid-template-rows:auto auto 1fr; } .page-lesson main > .prep{ grid-column:2 / 5; grid-row:2; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--sp-4); margin-top:var(--sp-5); } .page-lesson main > .stages{ grid-row:3; margin-top:var(--space-section); } .page-lesson main > .stages ~ .wrap{ grid-row:3; } .page-lesson .prep-item{ padding:var(--sp-2) var(--sp-5) var(--sp-4); } .page-lesson .prep-item > summary{ font-size:1rem; } .page-lesson .prep .ls-goals{ font-size:1rem; line-height:1.55; } .page-lesson .prep .ls-needs li{ padding:4px 10px; font-size:.875rem; } } /* 교육자료실 참고 디자인: 여유 있는 탭, 하늘색 소개 배너, 남색 목록 제목. */ .page-course .course-tabs{ border-bottom:0; padding-top:12px; } .page-course .course-tabs-in{ border-bottom:1px solid var(--line); gap:32px; } .page-course .course-tab{ padding-block:18px; } .page-course .course-tab[aria-current="page"]{ color:var(--azure); border-bottom-color:var(--sky); } .page-course .course-head{ padding-block:24px 40px; } .page-course .course-head-grid{ width:calc(100% - var(--gutter) * 2); max-width:calc(var(--wrap-max) - var(--gutter) * 2); padding:32px; border-radius:24px; background:#e5f6fa; gap:32px; } .page-course .course-head h1{ color:var(--azure); font-weight:800; letter-spacing:-.035em; } .page-course .course-head p{ font-size:1.0625rem; line-height:1.75; } .page-course .course-head-photo{ border-radius:16px; aspect-ratio:4/3; } .page-course .course-head .tag{ background:#fff; color:var(--azure); border:1px solid #c5e4ec; } .page-course .course-head .app-get{ background:#fff; border-color:#d2e6eb; border-radius:14px; padding:14px 16px; } .page-course .course-head .progress{ margin-bottom:0; } .course-list-heading{ display:flex; align-items:center; gap:12px; margin:0 0 20px; } .course-list-heading h2{ margin:0; color:var(--azure); font-size:1.5rem; font-weight:800; letter-spacing:-.025em; } .course-list-heading > span{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:28px; padding-inline:8px; border-radius:8px; background:#edf5f8; color:var(--azure); font-size:.875rem; font-weight:700; } .course-app-visual{ min-width:0; margin:0; padding:22px; background:#fff; border:1px solid #d2e6eb; border-radius:20px; box-shadow:0 8px 24px rgba(10,65,125,.05); } .course-app-label{ display:flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--azure); font-size:1rem; font-weight:700; line-height:1.45; } .course-app-label img{ flex:none; width:48px; height:48px; } .course-app-screen{ display:block; width:100%; height:auto; object-fit:contain; } .course-app-visual .course-app-screen{ height:112px; object-fit:contain; } .page-course .course-head-photo.course-app-visual{ aspect-ratio:auto; padding:18px; } .page-course .course-head-photo.course-app-visual img{ display:block; height:220px; border-radius:10px; object-fit:cover; } .page-course .course-app-visual .app-get{ margin:20px 0 0; padding:18px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; } .page-course .course-head-grid.has-app-visual{ align-items:center; } .course-banner-progress{ grid-column:1/-1; min-width:0; } .page-course .course-banner-progress .progress{ width:100%; max-width:none; gap:16px; } .course-banner-progress .bar{ height:10px; border-radius:5px; background:#cce5eb; } .course-banner-progress .progress-label{ color:var(--azure); } .page-course .course-head-grid.has-app-visual{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } @media (max-width:899px){ .page-course .course-head-grid.has-app-visual{ grid-template-columns:minmax(0,1fr); } .course-app-visual{ padding:18px; } .course-app-label{ margin-bottom:16px; } .course-app-label img{ width:40px; height:40px; } } .page-course .ls-card{ border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 8px rgba(27,36,51,.045); } .page-course .ls-card .tile-img{ border-bottom:0; } @media (min-width:900px){ .page-course .course-head-grid{ padding:36px 40px; grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr); } .page-course .course-head h1{ font-size:2.5rem; } } @media (max-width:719px){ .page-course .course-tabs-in{ gap:24px; } .page-course .course-head{ padding-block:16px 28px; } .page-course .course-head-grid{ padding:24px 20px; gap:24px; border-radius:18px; } .page-course .course-head h1{ font-size:1.875rem; } .page-course .course-head p{ font-size:1rem; } .page-course .course-head-photo{ aspect-ratio:16/9; border-radius:12px; } .page-course .course-head-photo.course-app-visual{ aspect-ratio:auto; padding:14px; } .page-course .course-head-photo.course-app-visual img{ height:auto; aspect-ratio:16/9; } .course-list-heading{ margin-bottom:16px; } } /* 메인: 앱 화면 중심의 코스 선택 카드와 명확한 학습 진도. */ .learn-start{ background:#f7f9fb; } .learn-courses{ gap:24px; align-items:stretch; } .learn-courses .learn-course{ display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; border:1px solid #dce1e7; border-radius:18px; background:#fff; box-shadow:0 3px 12px rgba(27,36,51,.045); transition:transform 200ms var(--ease),box-shadow 200ms var(--ease); } .learn-courses .learn-course:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(27,36,51,.10); } .learn-courses .learn-image{ width:100%; aspect-ratio:16/10; margin:0; background:#edf2f6; border-bottom:1px solid #e5e9ee; } .learn-courses .learn-app-image img{ padding:24px; object-fit:contain; object-position:center; } .learn-courses .learn-course:hover .learn-image img{ transform:none; } .learn-courses .learn-course-main{ flex:1; padding:24px; } .learn-courses .learn-course strong{ font-size:1.5rem; font-weight:800; color:var(--azure); line-height:1.4; } .learn-courses .learn-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; } .learn-meta > span{ padding:5px 9px; border-radius:6px; background:#f0f3f6; color:var(--ink2); font-size:.8125rem; } .learn-courses .learn-desc{ margin:16px 0 24px; font-size:1rem; line-height:1.7; } .learn-progress-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; font-size:.9375rem; font-weight:700; color:var(--ink2); } .learn-progress-title b{ font-size:1.625rem; line-height:1.2; color:var(--azure); } .learn-courses .progress{ flex-direction:column; align-items:stretch; gap:10px; margin-top:12px; } .learn-courses .progress .bar{ flex:auto; width:100%; height:12px; border-radius:6px; background:#edf0f4; } .learn-courses .progress .bar i{ background:var(--accent); } .learn-courses .progress-label{ font-size:.875rem; } .learn-action{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 16px; margin-top:20px; border:1px solid #cbdce9; border-radius:8px; background:#eef5fa; color:var(--azure); font-size:1rem; font-weight:700; } .learn-course:hover .learn-action{ background:var(--azure); border-color:var(--azure); color:#fff; } @media (max-width:599px){ .learn-courses .learn-course-main{ padding:20px; } } @media (prefers-reduced-motion:reduce){ .learn-courses .learn-course:hover{ transform:none; } } /* 홈 히어로: 가로 3:1 장면 위, 제목·설명 아래. 최종 디자인은 장면 파일만 교체한다. */ .learn-start-in{ padding-top:0; padding-bottom:56px; } .edulab-hero{ background:var(--azure); color:#fff; } .edulab-hero-scene{ margin:0; aspect-ratio:3/1; overflow:hidden; background:#b8d9ed; } .edulab-hero-scene img{ width:100%; height:100%; object-fit:cover; object-position:center; } .edulab-hero-copy{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:end; gap:clamp(32px,6vw,80px); padding-block:32px 40px; } .edulab-hero-brand{ margin:0 0 12px; color:#d8effa; font-size:.75rem; font-weight:500; line-height:1.5; letter-spacing:.1em; } .edulab-hero h1{ max-width:11.5em; margin:0; color:#fff; font-size:clamp(2.125rem,3.6vw,3.375rem); font-weight:500; line-height:1.25; letter-spacing:-.035em; } .edulab-hero-details>p{ max-width:35em; margin:0; color:#edf6ff; font-size:.9375rem; line-height:1.75; } .edulab-hero-details>.edulab-hero-extra{ margin-top:7px; } .edulab-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; } .edulab-hero-actions a{ display:inline-flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; max-width:100%; padding:10px 16px; border:1px solid transparent; border-radius:4px; font-size:.875rem; font-weight:600; line-height:1.5; } .edulab-hero-actions a>span{ flex:none; font-size:.875rem; font-weight:400; } .edulab-hero-primary{ background:var(--yellow); color:var(--ink); } .edulab-hero-primary:hover{ background:#ffd150; color:var(--ink); } .edulab-hero-secondary{ border-color:#b7cde4!important; color:#fff; } .edulab-hero-secondary:hover{ background:rgba(255,255,255,.1); color:#fff; } .edulab-hero a:focus-visible{ outline-color:#fff; outline-offset:4px; } .home-section-label{ margin:0 0 10px; color:var(--azure); font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .home-about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(32px,6vw,72px); margin-top:clamp(44px,7vw,80px); padding-block:clamp(8px,2vw,20px); } .home-about-copy h2{ max-width:15em; margin:0 0 18px; color:var(--ink); font-size:clamp(1.65rem,2.5vw,2.25rem); font-weight:700; line-height:1.35; letter-spacing:-.025em; } .home-about-copy>p:last-child{ margin:0; color:var(--ink2); font-size:1.0625rem; line-height:1.8; } .home-features{ list-style:none; margin:0; padding:0; border-top:1px solid #ccd4dc; } .home-features li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid #ccd4dc; } .home-features li>span{ padding-top:3px; color:var(--azure); font-size:.75rem; font-weight:700; letter-spacing:.06em; } .home-features h3{ margin:0 0 5px; color:var(--ink); font-size:1.0625rem; font-weight:700; } .home-features p{ margin:0; color:var(--ink2); font-size:.9375rem; line-height:1.65; } .learn-heading{ margin-top:clamp(44px,7vw,80px); padding-bottom:0; border-bottom:0; margin-bottom:20px; scroll-margin-top:80px; } @media (max-width:899px){ .edulab-hero-copy{ gap:28px; padding-block:28px 32px; } .edulab-hero h1{ font-size:2.125rem; } .home-about{ grid-template-columns:minmax(0,1fr); gap:28px; } } @media (max-width:719px){ .edulab-hero-scene{ aspect-ratio:2/1; } .edulab-hero-copy{ grid-template-columns:minmax(0,1fr); gap:20px; padding-block:25px 30px; } .edulab-hero h1{ max-width:12em; font-size:clamp(1.875rem,5.7vw,2.25rem); } .edulab-hero-brand{ margin-bottom:9px; } .edulab-hero-details>p{ font-size:.9375rem; } .edulab-hero-actions{ align-items:stretch; margin-top:20px; } .edulab-hero-actions a{ flex:1 1 155px; } } /* ---------- 8. 움직임 줄이기 ---------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation:none !important; transition:none !important; } .btn:active, .stage:active, .tile:hover, .tile:active, .course-card:hover, .course-card:active, .step-dots button.now{ transform:none; } /* 이동·크기 변화 없이 색·그림자만 */ } /* ---------- 9. 인쇄 = 예전 PDF 대신 ---------- */ @media print{ .top, .foot, .stages, .crumb, [data-print], .finish, .app-links, .lb, .ls-zoom span, .notice-back{ display:none !important; } body{ background:#fff; font-size:11pt; } .page-mission main{ display:block; } .m-cover{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); } .panel{ padding-top:16pt; } .panel + .panel:not(.finish){ margin-top:16pt; } .ls-quiz details{ display:block; } /* 미션: 조립 단계는 전부 펼쳐 3열로, 단계 넘기기·정답 보기는 숨김, 코딩은 새 쪽에서 */ .player-ui, .step-dots, [data-step-toggle], .solution{ display:none !important; } .js .player .steps, .steps{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); } .js .player .steps li{ display:block !important; } .steps li, .use, .module, .thinking{ break-inside:avoid; } .coding{ break-before:page; } .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 > *, .blocks li{ break-inside:avoid; } .ls-h, h2, h3{ break-after:avoid; } }