:root{font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif;color:#17263b;background:#f3f7fb}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffae52;outline-offset:3px}.top{height:70px;background:#0a1b2f;color:#e9f4ff;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,65px)}.logo{display:flex;align-items:center;gap:9px;text-decoration:none}.logo span{color:#69d6b5;font-size:27px}.logo strong{font-size:20px;letter-spacing:-.05em}.logo small{font-size:10px;letter-spacing:.2em;color:#7ebdd3;margin-left:5px}.top nav{display:flex;gap:22px}.top nav a{text-decoration:none;font-size:13px;color:#b9ccdc}.top nav a:hover{color:#fff}main{max-width:1550px;margin:auto}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;padding:62px clamp(22px,5vw,80px);background:radial-gradient(circle at 60% 20%,#1c5274,#0e2945 54%,#081a2f);color:#fff;min-height:450px}.kicker,.sectionIntro span{color:#5ecbb8;letter-spacing:.17em;font-size:11px;font-weight:800}.hero h1{font-size:clamp(35px,4.6vw,66px);line-height:1.13;letter-spacing:-.06em;margin:17px 0 20px}.hero h1 em{font-style:normal;color:#73dfbb}.hero p{max-width:630px;color:#c3d7e7;line-height:1.75;margin-bottom:25px}.heroButtons{display:flex;gap:11px;flex-wrap:wrap}.heroButtons a{padding:11px 17px;border:1px solid #678aa4;border-radius:9px;text-decoration:none;color:#e9f6ff;font-weight:700;font-size:13px}.heroButtons .primary{background:#60d2ae;color:#0a2b35;border-color:#60d2ae}.heroPhoto{position:relative;border-radius:20px;overflow:hidden;transform:rotate(-3deg);box-shadow:0 25px 65px #0006;border:7px solid #e8f6fc}.heroPhoto img{width:100%;height:295px;display:block;object-fit:cover}.heroPhoto span{position:absolute;bottom:12px;left:12px;background:#0c263dcc;color:#e3f5ff;padding:7px 10px;border-radius:6px;font-size:11px}.roadmap,.workbench{padding:52px clamp(18px,4vw,62px)}.sectionIntro h2{font-size:clamp(28px,3vw,39px);letter-spacing:-.05em;margin:7px 0}.sectionIntro p{color:#61758d;line-height:1.65;margin:0 0 24px}.roadGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.roadCard{border:1px solid #dce6f1;background:white;border-radius:15px;padding:20px;box-shadow:0 5px 18px #18354c08;min-height:210px;display:flex;flex-direction:column;position:relative;overflow:hidden}.roadCard:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#5d9ade)}.roadCard .roadNumber{font:700 12px ui-monospace,monospace;color:#4284b7}.roadCard h3{font-size:20px;letter-spacing:-.03em;margin:8px 0}.roadCard p{font-size:13px;color:#586f88;line-height:1.55;margin:0 0 13px}.roadCard .topics{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}.roadCard .topics a{font-size:11px;text-decoration:none;background:#eef4fa;color:#2e608d;border-radius:14px;padding:5px 8px}.roadCard .topics a:hover{background:#dceaff}.roadCard .labLaunch{font-size:12px;color:#136ca6;font-weight:800;margin-top:14px;text-decoration:none}.workbench{background:#eaf1f8}.benchHead{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin:15px 0}.benchHead span{font-size:11px;color:#207bae;font-weight:800}.benchHead h3{font-size:25px;margin:4px 0 6px}.benchHead p{font-size:13px;color:#637993;line-height:1.5;margin:0;max-width:800px}.challengeTabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.challengeTabs button{border:1px solid #c4d8e9;background:#fff;color:#3e6283;padding:8px 11px;border-radius:8px;font-size:12px}.challengeTabs button.active{background:#195f96;color:#fff;border-color:#195f96}.benchLayout{display:grid;grid-template-columns:210px minmax(400px,1fr) 300px;gap:12px;align-items:start}.partsPanel,.outputPanel,.boardColumn{background:#fff;border:1px solid #d7e3ee;border-radius:14px;box-shadow:0 7px 25px #18354c0c}.partsPanel,.outputPanel{padding:16px}.partsPanel h3{margin:0 0 6px;font-size:17px}.partsPanel>p{font-size:12px;color:#6d8198;line-height:1.5;margin:0 0 14px}.palette{display:grid;gap:9px}.partCard{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid #d7e5f0;border-radius:9px;background:#f6f9fc;padding:10px;width:100%;user-select:none}.partCard:hover,.partCard.selected{border-color:#318cc7;background:#e8f5ff}.partCard.placed{opacity:.45}.partIcon{font-size:25px;min-width:32px;text-align:center;color:#1c76a5}.partCard strong{display:block;font-size:13px}.partCard small{display:block;font-size:11px;color:#70869b}.partsHelp{background:#fff8e8;border:1px solid #f1dfb2;border-radius:9px;padding:10px;margin:16px 0}.partsHelp h4{margin:0 0 5px;font-size:12px;color:#815e25}.partsHelp p{font-size:12px;color:#6c5c40;line-height:1.55;margin:0}.utility,.boardToolbar button{border:1px solid #bed3e5;background:#f4f8fc;border-radius:7px;color:#366180;padding:7px 10px;font-size:12px}.boardColumn{padding:10px}.boardStage{aspect-ratio:1000/600;position:relative;overflow:hidden;background:#eceff1;border-radius:10px;border:1px solid #ccdce8}.boardStage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.boardStage:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ffffff25,#ffffff00 60%);pointer-events:none}.boardWatermark{position:absolute;bottom:8px;left:8px;background:#102b43bc;color:white;font-size:10px;padding:5px 7px;border-radius:4px;pointer-events:none}#wireLayer,#slotLayer,#pinLayer{position:absolute;inset:0;width:100%;height:100%}#wireLayer{pointer-events:none;z-index:2}#slotLayer{z-index:3;pointer-events:none}#pinLayer{z-index:4;pointer-events:none}.slot,.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto}.slot{width:18%;height:18%;min-height:58px;border:2px dashed #2a88b5;border-radius:11px;background:#e9f8ffe6;color:#16476c;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:0 5px 18px #173a4e2c}.slot strong{font-size:clamp(12px,1.1vw,16px)}.slot small{font-size:clamp(9px,.75vw,11px)}.slot.filled{background:#0f426adf;color:white;border-style:solid;border-color:#94dded}.slot.isTarget{outline:4px solid #f7b34e}.pin{width:39px;height:39px;border:3px solid #fff;border-radius:50%;background:#1f689a;color:white;box-shadow:0 3px 12px #11344c99;display:grid;place-items:center;font-weight:800;font-size:10px;line-height:1.1}.pin.power{background:#d7605a}.pin.ground{background:#485b68}.pin.analog{background:#755ac5}.pin.selected{outline:5px solid #f8ac3b}.pin.connected{box-shadow:0 0 0 4px #75d8b0,0 3px 12px #11344c99}.wire{fill:none;stroke:#eb8b43;stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 3px 2px #2239)}.wire.good{stroke:#1da47f}.wire.bad{stroke:#dc554c}.wireActive{stroke-dasharray:13 10;animation:flow .85s linear infinite}@keyframes flow{to{stroke-dashoffset:-46}}.boardToolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 2px}.boardToolbar span{font-size:12px;color:#38607e}.boardToolbar div{display:flex;gap:5px}.feedback{border-radius:8px;background:#eaf5fe;border:1px solid #cce4f4;color:#2b6083;padding:11px;font-size:13px;line-height:1.5;min-height:44px}.feedback.error{background:#fff1ef;border-color:#f0c9c3;color:#a54139}.feedback.success{background:#e6f9ef;border-color:#bde8d1;color:#176647}.controlStrip{display:flex;align-items:center;gap:10px;padding:13px 4px 3px}.controlStrip label{font-size:12px;white-space:nowrap;color:#4c6480}.controlStrip input{flex:1;min-width:50px;accent-color:#217dae}.controlStrip strong{font:700 13px ui-monospace,monospace;color:#1b6296;white-space:nowrap}.modelNote{font-size:11px;color:#75869a;line-height:1.45;padding:8px 4px}.outputPanel{background:#10283f;color:#e9f8ff;border-color:#244968}.outputHead{display:flex;align-items:center;gap:10px}.statusDot{width:12px;height:12px;border-radius:50%;background:#6d8798;box-shadow:0 0 0 4px #ffffff10}.statusDot.live{background:#5de1a8;box-shadow:0 0 13px #5de1a8}.statusDot.error{background:#ff746e}.outputHead small{font-size:10px;color:#82aac5;letter-spacing:.1em}.outputHead h3{font-size:16px;margin:2px 0}.deviceScreen{background:#071b2c;border:1px solid #25516b;border-radius:11px;margin:16px 0;padding:16px;text-align:center;min-height:190px}.lightbulb{font-size:52px;color:#5c7480;transition:color .25s,text-shadow .25s}.lightbulb.live{color:#ffe28e;text-shadow:0 0 28px #ffd75c}.deviceScreen>span{display:block;font-size:11px;color:#83b6cd;margin:4px 0}.deviceScreen strong{display:block;font:700 25px ui-monospace,monospace;color:#a6f1dc}.deviceScreen small{display:block;color:#8bb0c2;font-size:11px;margin-top:8px;line-height:1.4}.meter{height:8px;background:#23465b;border-radius:10px;overflow:hidden;margin:12px 0}.meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#40a9df,#72e5ac);transition:width .3s}.codeWindow{border:1px solid #2b4f68;border-radius:9px;overflow:hidden}.codeWindow>div{display:flex;justify-content:space-between;background:#203f57;padding:8px 11px;font-size:11px}.codeWindow small{color:#87adbe}.codeWindow pre{background:#071b2c;margin:0;padding:11px;font:11px/1.55 ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;min-height:138px;color:#a8e9d3}.checkList h4{font-size:12px;margin:15px 0 6px}.checkList ul{list-style:none;padding:0;margin:0;display:grid;gap:5px}.checkList li{font-size:11px;color:#a8c1d0;line-height:1.4}.checkList li.ok{color:#70dcb3}.checkList li.bad{color:#ff9a87}.debrief{margin-top:16px;background:#fff;border:1px solid #d7e3ee;border-radius:13px;padding:18px 21px;display:flex;align-items:center;justify-content:space-between;gap:20px}.debrief span{font-size:11px;color:#3c87b0;font-weight:800}.debrief h3{font-size:18px;margin:5px 0}.debrief p{font-size:13px;color:#5d728b;line-height:1.6;margin:0}.debrief a{white-space:nowrap;color:#1e6fa3;font-weight:700;font-size:13px;text-decoration:none}footer{padding:25px clamp(18px,4vw,62px);color:#70839a;font-size:12px;line-height:1.6}footer a{color:#367aa8}footer details{margin-top:10px}@media(max-width:1260px){.benchLayout{grid-template-columns:180px minmax(370px,1fr)}.outputPanel{grid-column:1/-1;display:grid;grid-template-columns:200px 1fr 1fr;gap:14px;align-items:start}.outputHead{grid-column:1}.deviceScreen{grid-column:1;grid-row:2;margin:0}.codeWindow{grid-column:2;grid-row:1/3}.checkList{grid-column:3;grid-row:1/3}}@media(max-width:820px){.top nav{gap:9px}.top nav a{font-size:11px}.hero{grid-template-columns:1fr;padding:40px 22px}.heroPhoto{max-width:420px}.roadGrid{grid-template-columns:repeat(2,1fr)}.benchLayout{grid-template-columns:1fr}.partsPanel{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.partsPanel h3{width:100%}.partsPanel>p{width:100%}.palette{display:flex;flex-wrap:wrap}.partCard{width:auto}.partsHelp{flex:1;margin:0}.outputPanel{grid-column:auto}.benchHead{display:block}.challengeTabs{justify-content:flex-start;margin-top:10px}}@media(max-width:620px){.top{height:auto;padding:12px 15px;display:block}.top nav{margin-top:8px;overflow-x:auto;white-space:nowrap}.roadGrid{grid-template-columns:1fr}.workbench,.roadmap{padding:35px 13px}.boardStage{min-height:300px}.slot{width:24%;height:19%}.pin{width:34px;height:34px;font-size:9px}.boardToolbar{display:block}.boardToolbar div{flex-wrap:wrap;margin-top:8px}.outputPanel{display:block}.deviceScreen{margin:12px 0}.debrief{display:block}.debrief a{display:inline-block;margin-top:12px}}@media(prefers-reduced-motion:reduce){.wireActive{animation:none}}
