/* Public, read-only showcase. CIT's existing Pretendard/navy/blue language.
   Variance 4 / motion 5 / density 5: preserve the two original animations.
   No new framework, stock illustration, fake achievement or live student API.
   Radii: surfaces 16px; controls 10px; metadata chips 6px. */
:root{color-scheme:light;--ink:#152238;--muted:#52647e;--paper:#f5f7fb;--surface:#fff;--line:#d5e0ec;--blue:#2853a3;--navy:#0c1e36;--teal:#267f79;--lilac:#7756a4}
*{box-sizing:border-box}html{scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.7 'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-underline-offset:4px}button,select{font:inherit}button,a,select,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #3166c3;outline-offset:4px}a,button,summary{touch-action:manipulation}button,summary{cursor:pointer}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.4;font-weight:600;word-break:keep-all;overflow-wrap:anywhere}p{word-break:keep-all;overflow-wrap:anywhere}h1{font-size:38px}h2{font-size:24px}h3{font-size:19px}small,.meta{font-size:14px;color:var(--muted)}[hidden]{display:none!important}
.wrap{width:min(1120px,100% - 56px);margin-inline:auto}.site-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500}.brand img{width:56px;height:32px;object-fit:contain}.site-nav>a:last-child{min-height:44px;display:flex;align-items:center;font-size:14px}
.skip{position:absolute;top:8px;left:8px;z-index:3;transform:translateY(-150%);padding:8px 16px;background:white}.skip:focus{transform:none}
.intro{padding-block:28px 24px;max-width:820px;margin-left:0}.intro p{margin-top:12px;color:var(--muted);font-size:18px}.intro .meta{font-size:14px;margin-top:12px}
.hero{position:relative;isolation:isolate;border-radius:16px;background:var(--navy);color:#f3f7fc;padding:28px;overflow:visible}.hero-wave{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;clip-path:inset(0 round 16px);pointer-events:none;z-index:-1;opacity:1;transform:scaleY(-1)}
.hero-label{font-size:13px;color:#b8c9df;margin-bottom:6px}.hero-name{font-size:32px;line-height:1.3;font-weight:600}.student{display:grid;grid-template-columns:1fr 1.35fr .45fr;gap:32px;align-items:end}.hero dl{margin:0;min-width:0}.hero dt{color:#b8c9df;font-size:13px;margin-bottom:4px}.hero dd{margin:0;font-size:15px;word-break:keep-all;overflow-wrap:anywhere}.stage{margin-top:8px;font-size:14px;color:#d4e2f5}.hero-note{margin-top:20px;padding-top:14px;border-top:1px solid #415471;color:#d4e2f5;font-size:14px;max-width:100%}.hero-text{position:relative;background:linear-gradient(90deg,rgba(12,30,54,.24),transparent);width:fit-content;max-width:100%}
.section-nav{display:flex;gap:24px;flex-wrap:wrap;border-bottom:1px solid #b3c3d8;padding-top:12px}.section-nav a{display:flex;align-items:center;min-height:52px;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;font-size:15px;font-weight:500}.section-nav a[aria-current]{border-color:var(--blue);color:var(--blue);font-weight:600;text-decoration:underline}.section{padding-block:32px;scroll-margin-top:16px}.section-heading{max-width:820px;margin-bottom:20px}.section-heading p{margin-top:8px;color:var(--muted)}
.surface{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px}.lesson-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}.lesson-tools label{font-size:14px;color:var(--muted)}.lesson-tools select{margin-left:10px;min-height:44px;padding:8px 32px 8px 12px;border:1px solid #899fbb;border-radius:10px;background:white;color:var(--ink);max-width:100%}.record-list{display:grid;gap:12px}.lesson{border-bottom:1px solid var(--line)}.lesson:last-child{border:0}.lesson summary{list-style:none;display:grid;grid-template-columns:128px minmax(0,1fr) 24px;align-items:center;gap:16px;padding:16px 12px;min-height:76px;border-radius:10px}.lesson summary::-webkit-details-marker{display:none}.lesson summary::after{content:'⌄';font-size:22px;justify-self:center;color:var(--blue);line-height:1}.lesson[open] summary::after{transform:rotate(180deg)}.lesson[open] summary{background:#edf3fd;box-shadow:inset 3px 0 var(--blue)}.lesson time{color:var(--muted);font-size:14px}.lesson strong{font-weight:600;font-size:18px}.record-type{font-size:13px;color:var(--muted);display:block;font-weight:400}.lesson-body{padding:20px 24px;max-width:900px}.lesson-body .course{font-size:14px;color:var(--muted);margin-bottom:16px}.lesson-body h4{font-size:16px;font-weight:600;margin:20px 0 8px}.lesson-body p+p{margin-top:12px}.lesson-body .sample-note{font-size:14px;color:var(--muted);margin-bottom:12px}.no-records{padding:24px;color:var(--muted)}
.story-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}.story-step{position:relative;padding:20px;background:#f4f9fc;border:1px solid #cedde9;border-radius:12px}.story-step:not(:last-child)::after{content:'→';position:absolute;right:-22px;top:26px;color:var(--teal)}.story-step h3{display:flex;gap:10px;align-items:center;font-size:17px;margin-bottom:12px}.step-num{font-size:13px;color:#35677d;background:#e7f0f4;border-radius:8px;padding:4px 7px}.story-step p{font-size:15px;color:var(--muted)}.story-foot{margin-top:24px;border-top:1px solid var(--line);padding-top:18px;display:flex;gap:24px;flex-wrap:wrap}.story-foot span{font-size:14px;color:var(--muted)}
.roadmap-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}.roadmap-visual{min-width:0}.ad-metro{background:linear-gradient(125deg,#f2f9fa,#eef2fd);border:1px solid var(--line);border-radius:16px;padding:20px 12px;overflow:auto}.ad-metro svg{width:100%;height:auto;min-width:440px;display:block}.ad-gax,.ad-lane-lbl{font-family:inherit;font-size:9px;fill:#405a79;font-weight:500}.ad-reco-lbl{font-size:8px;font-weight:600}.ad-reco-lbl[fill='#3aa6d6']{fill:#24638a}.ad-reco-lbl[fill='#9a6ad6']{fill:#735299}
.ad-next{border-left:3px solid #416daf;padding:12px 16px;background:#eef3fc;margin-top:16px;border-radius:10px}.ad-next b{display:block;font-size:14px;color:var(--blue);font-weight:500;margin-bottom:4px}.roadmap-visual figcaption{font-size:14px;color:var(--muted);margin-top:12px}.track{padding:20px;border:1px solid #cbdef1;border-top:3px solid #5591b8;border-radius:12px;background:#f0f7fd}.track+.track{margin-top:16px}.track.stem{background:#f5f1fa;border-color:#ddd2ed;border-top-color:#9d7fc4}.track h3{color:#296586}.track.stem h3{color:var(--lilac)}.track h3 span{font-size:12px;font-weight:500;display:inline-block;margin-left:8px}.track p{font-size:15px;margin-top:10px}.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}.chips li{font-size:13px;padding:5px 9px;border:1px solid #b3c6da;border-radius:6px;background:#fff;color:#455d79}.advisory{background:#faf7ef;border:1px solid #e4d9bf;border-left:3px solid #a87825;border-radius:12px;padding:20px;margin-top:24px;color:#675534;font-size:15px}.advisory strong{display:block;font-weight:600;margin-bottom:8px}.advisory p+p{margin-top:12px}
/* Exact mini-metro draw-in and node timings from the shared LMS template.
   Owner explicitly retains these original animations, also in reduced motion. */
#s-admissions .ad-line,#s-admissions .ad-merge{stroke-dasharray:1;stroke-dashoffset:1;animation:adDraw .9s ease forwards}
#s-admissions .ad-merge{animation-duration:1s;animation-delay:.25s}
#s-admissions circle.ad-node{transform-box:fill-box;transform-origin:center;animation:adPop .42s cubic-bezier(.2,1.3,.4,1) both}
#s-admissions .ad-term{transform-box:fill-box;transform-origin:center;animation:adPop .5s cubic-bezier(.2,1.4,.4,1) .7s both}
@keyframes adDraw{to{stroke-dashoffset:0}}@keyframes adPop{from{transform:scale(.1);opacity:0}to{transform:scale(1);opacity:1}}
#s-admissions.anim-armed:not(.in) .ad-line,#s-admissions.anim-armed:not(.in) .ad-merge,#s-admissions.anim-armed:not(.in) circle.ad-node,#s-admissions.anim-armed:not(.in) .ad-term{animation-play-state:paused}
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}.work-copy p{margin-top:12px}.code-preview{margin:0;padding:22px;border:1px solid var(--line);background:#edf3f8;border-radius:12px;color:#253f5f;overflow:auto;font:14px/1.8 ui-monospace,monospace;tab-size:4}.button{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:10px 18px;background:var(--blue);color:white;text-decoration:none;border-radius:10px;font-weight:500;font-size:15px;margin-top:20px}.button:focus-visible{outline-offset:5px}.preparation{border-top:1px solid #bac9dc}.preparation p+p{margin-top:12px}.preparation .prose{max-width:820px}.related{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:20px}.related a{min-height:44px;display:flex;align-items:center;font-size:15px}.faq{margin-top:24px}.faq details{border-top:1px solid var(--line);padding-block:4px}.faq summary{min-height:52px;padding-block:12px;font-weight:500}.faq p{max-width:820px;padding:0 0 16px;color:var(--muted)}footer{border-top:1px solid var(--line);padding:24px 0 32px;font-size:14px;color:var(--muted)}footer p+p{margin-top:8px}footer a{display:inline-flex;align-items:center;min-height:44px;margin-right:20px}
@media(max-width:767px){.wrap{width:auto;margin-inline:16px}.site-nav{gap:12px;min-height:60px}.brand span{max-width:170px;font-size:13px}.intro{padding-block:16px 20px}.intro h1{font-size:28px}.intro p{font-size:16px}.student{grid-template-columns:minmax(0,1fr) auto;gap:16px 20px}.hero{margin-inline:-16px;border-radius:0;padding:24px max(20px,env(safe-area-inset-right)) 24px max(20px,env(safe-area-inset-left))}.hero-wave{clip-path:inset(0);border-radius:0}.student>div:first-child{grid-column:1/-1}.hero-name{font-size:28px}.hero-note{margin-top:16px}.section-nav{gap:0 20px;justify-content:space-between}.section-nav a{font-size:14px;min-height:48px}.section{padding-block:24px}.section-heading{margin-bottom:16px}h2{font-size:21px}.surface{padding:18px}.lesson-tools{gap:8px}.lesson-tools label{display:flex;align-items:center;justify-content:space-between;width:100%}.lesson-tools select{flex:1;min-width:0}.lesson summary{grid-template-columns:minmax(0,1fr) 22px;gap:4px 12px;padding:14px 12px}.lesson summary time{grid-column:1}.lesson summary>span{grid-column:1;grid-row:2}.lesson summary::after{grid-column:2;grid-row:1/3}.lesson strong{font-size:17px}.lesson-body{padding:16px 8px}.story-flow{grid-template-columns:1fr;gap:20px}.story-step:not(:last-child)::after{content:'↓';right:24px;top:auto;bottom:-23px}.roadmap-layout,.work{grid-template-columns:1fr}.ad-metro{padding:16px 8px}.track{padding:18px}.related{grid-template-columns:1fr}.code-preview{font-size:13px}.advisory{padding:18px}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.brand{min-width:0}.brand img{flex-shrink:0}.brand span{min-width:0;overflow-wrap:anywhere}.hero dt{overflow-wrap:anywhere}.lesson-body h3{font-size:16px;font-weight:600;margin:20px 0 8px}
.roadmap-visual figcaption{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:767px){.student{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}}
@media(max-width:360px){.student{grid-template-columns:1fr}}