:root{--ink:#424242;--blue:#085294;--teal:#4ac2bd;--line:#ddd;--dark:#303030}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Arial,'Noto Sans KR',sans-serif;background:#fff;line-height:1.7}a{color:inherit;text-decoration:none}header{border-bottom:1px solid var(--line);background:#fff}.nav{max-width:1120px;margin:auto;min-height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{font-weight:800;font-size:22px;color:#222;letter-spacing:-1px}.brand span{color:var(--teal)}nav{display:flex;gap:25px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.08em}nav a:hover{color:var(--blue)}main{max-width:1120px;margin:auto;padding:60px 24px 100px}section,article{margin:0 0 72px}.hero{padding:74px 0 100px;max-width:760px}.eyebrow{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.16em;margin:0 0 10px}h1{font-size:48px;line-height:1.15;margin:0 0 20px;color:#333}h2{font-size:22px;border-bottom:2px solid #444;padding-bottom:12px;margin-bottom:18px}.hero p:not(.eyebrow){font-size:18px;color:#666;max-width:620px}.button,button{display:inline-block;background:#444;color:white;border:1px solid #444;padding:9px 22px;font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer}.button:hover,button:hover{background:var(--teal);border-color:var(--teal)}.row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 4px}.row:hover{color:var(--blue)}.row span,.muted,small{color:#888;font-size:12px}.more{float:right;color:var(--blue);font-size:12px;font-weight:normal}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{min-height:155px;border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:#fff}.card:hover{border-color:var(--teal);transform:translateY(-2px)}.card strong{font-size:18px;color:#333}.card.solved{border-color:var(--teal)}.card.solved strong{color:var(--blue)}.meta{color:#888}.body{font-size:16px;max-width:820px;margin:35px 0}.challenge-image{max-width:100%;height:auto;display:block;margin:20px 0}.files{padding:0;list-style:none}.files a{color:var(--blue);text-decoration:underline}.form-wrap{max-width:500px;margin:auto}form p,form label{display:block;margin:18px 0}input,select,textarea{display:block;width:100%;padding:11px;border:1px solid #ccc;margin-top:6px;font:inherit;background:white}.inline{display:inline;margin:0}.inline button{background:none;border:0;color:var(--ink);padding:0;font-size:12px}.message{padding:12px 16px;border:1px solid var(--line);margin-bottom:20px}.message.success{border-color:var(--teal);color:#168b85}.message.error{border-color:#c66;color:#a33}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line)}th{font-size:11px;color:#888;letter-spacing:.08em}.current{background:#f2fbfa}.stats{display:flex;gap:14px}.stats div{border:1px solid var(--line);padding:20px 30px;min-width:130px}.stats b,.stats small{display:block}.stats b{font-size:28px;color:var(--blue)}footer{background:#303030;color:#fff;text-align:center;padding:35px 20px;font-size:13px}footer small{color:#ddd}@media(max-width:760px){.nav{align-items:flex-start;padding-top:18px;flex-direction:column;gap:12px}nav{gap:12px;flex-wrap:wrap}.hero{padding:35px 0 60px}h1{font-size:36px}.grid{grid-template-columns:repeat(2,1fr)}main{padding-top:35px}.stats{flex-wrap:wrap}}@media(max-width:450px){.grid{grid-template-columns:1fr}.row{gap:14px}.row span{white-space:nowrap}}
.brand img{height:34px;width:auto;display:block}

/* Login page restored from the supplied CodeShell reference screen. */
.login-body{background:#f5f5f5;color:#241b19;min-height:100vh}
.login-page{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:36px 20px}
.login-panel{width:100%;max-width:370px}
.login-logo{display:block;width:370px;max-width:100%;height:auto;margin:0 auto 28px}
.login-form input[type="text"],.login-form input[type="password"]{display:block;width:100%;height:50px;margin:0 0 11px;padding:0 13px;border:1px solid #cbd3da;border-radius:4px;background:#fff;color:#241b19;font:16px/1.2 Arial,'Noto Sans KR',sans-serif;outline:none}
.login-form input[type="text"]:focus,.login-form input[type="password"]:focus{border-color:#1683e8;box-shadow:0 0 0 1px #1683e8}
.remember-me{display:flex;align-items:center;gap:7px;margin:14px 0 16px;color:#111;font-size:16px;line-height:1.2;cursor:pointer}
.remember-me input{appearance:none;width:20px;height:20px;margin:0;border:1px solid #222;background:#fff;cursor:pointer}
.remember-me input:checked{background:#1683e8;box-shadow:inset 0 0 0 4px #fff}
.login-form button{display:block;width:100%;height:39px;padding:0;border:1px solid #1683e8;border-radius:4px;background:#fff;color:#0877dd;font-size:16px;font-weight:400;letter-spacing:0;cursor:pointer}
.login-form button:hover,.login-form button:focus{background:#eef7ff;border-color:#0877dd}
.login-links{display:flex;justify-content:space-between;margin-top:11px;font-size:14px;color:#111}
.login-links a:hover{text-decoration:underline}
.login-error{margin:0 0 10px;color:#a33;font-size:13px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:450px){.login-page{padding-top:28px}.login-logo{margin-bottom:24px}.login-links{font-size:13px}}

/* Embedded login layout matching the supplied CodeShell reference. */
body:has(.login-page){background:#f5f5f5}
body:has(.login-page) header{background:#fff}
.login-page{min-height:calc(100vh - 74px);max-width:none;margin:0;padding:160px 20px 220px;display:flex;justify-content:center;align-items:flex-start}
.login-panel{width:300px;max-width:100%;margin:0 auto}
.login-logo{display:block;width:300px;max-width:100%;height:auto;margin:0 auto 18px}
.login-form input[type="text"],.login-form input[type="password"]{display:block;width:100%;height:40px;margin:0 0 8px;padding:0 10px;border:1px solid #d6dce1;border-radius:3px;background:#fff;color:#241b19;font:13px/1.2 Arial,'Noto Sans KR',sans-serif;outline:none}
.login-form input[type="text"]:focus,.login-form input[type="password"]:focus{border-color:#1683e8;box-shadow:0 0 0 1px #1683e8}
.remember-me{display:flex;align-items:center;gap:6px;margin:10px 0 13px;color:#444;font-size:12px;line-height:1.2;cursor:pointer}
.remember-me input{appearance:none;width:17px;height:17px;margin:0;border:1px solid #888;background:#fff;cursor:pointer}
.remember-me input:checked{background:#1683e8;box-shadow:inset 0 0 0 3px #fff}
.login-form button{display:block;width:100%;height:31px;padding:0;border:1px solid #1683e8;border-radius:3px;background:#fff;color:#1683e8;font-size:12px;font-weight:400;letter-spacing:0;cursor:pointer}
.login-form button:hover,.login-form button:focus{background:#eef7ff;border-color:#0877dd}
.login-links{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;color:#444}
.login-links a:hover{text-decoration:underline}
.login-error{margin:0 0 8px;color:#a33;font-size:11px}

/* Two-tone background: original header color above, soft gray content area below. */
body:has(.login-page){background:linear-gradient(to bottom,#fff 0,#fff 74px,#f5f5f5 74px,#f5f5f5 100%);background-attachment:fixed}
body:has(.login-page) main{background:transparent}

body:has(.login-page) footer{background:#000;color:#fff}
body:has(.login-page) footer small{color:#ddd}

/* Footer is intentionally black across the site. */
footer{background:#000!important;color:#fff!important}
footer small{color:#ddd!important}
.eyebrow:empty{display:none}

.site-footer{background:#000!important;color:#fff!important;text-align:center;padding:16px 20px 20px;font-family:Arial,'Noto Sans KR',sans-serif}
.site-footer .footer-copy{color:#fff;font-size:16px;font-weight:700;line-height:1.5}
.footer-social{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px}
.social-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;background:#fff;color:#000;text-decoration:none;transition:opacity .15s ease}
.social-icon:hover{opacity:.82}
.social-icon svg{display:block;width:27px;height:27px;fill:#000}
.social-icon.facebook span{font-family:Arial,sans-serif;font-size:34px;font-weight:700;line-height:1;transform:translateY(4px)}
.social-icon.linkedin span{font-family:Arial,sans-serif;font-size:20px;font-weight:700;line-height:1}
@media(max-width:520px){.site-footer .footer-copy{font-size:13px}.footer-social{gap:10px}.social-icon{width:36px;height:36px}}

/* Match the original CodeShell footer typography and spacing. */
.site-footer{background:#000!important;color:#fff!important;padding:60px 0!important;font-family:"Noto Sans KR",Arial,sans-serif!important}
.site-footer .footer-copy{color:#fff!important;font-family:"Noto Sans KR",Arial,sans-serif!important;font-size:16px!important;font-weight:400!important;line-height:1.6!important}
.site-footer .footer-social{margin-top:18px;gap:16px}

/* Keep the footer at the bottom on short pages without overlaying content. */
html,body{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
body>header{flex:0 0 auto}
body>main{flex:1 0 auto;width:100%}
body>footer{flex:0 0 auto}

/* Header matched to the original CodeShell builder header. */
header{border-bottom:1px solid #d5d5d5;background:#fff}
.nav{max-width:1140px;min-height:0;margin:0 auto;padding:10px 0;display:flex;align-items:center;justify-content:space-between}
.brand{display:block;font-size:0;line-height:0}
.brand img{display:block;width:200px;height:auto;max-width:100%}
nav{display:flex;gap:0;align-items:center;font-family:"Noto Sans KR",Arial,sans-serif;font-size:16px;font-weight:700;letter-spacing:0}
nav a{display:inline-block;padding:15px;color:#333;line-height:1.2}
nav a:hover,nav a:focus{color:#333;border-bottom:4px solid #ddd;padding-bottom:11px}
nav form.inline{display:inline-flex;align-items:center;margin:0}
nav form.inline button{display:inline-block;padding:15px;color:#333;background:transparent;border:0;border-bottom:4px solid transparent;font:700 16px/1.2 "Noto Sans KR",Arial,sans-serif;cursor:pointer}
nav form.inline button:hover,nav form.inline button:focus{color:#333;border-bottom-color:#ddd}
@media(max-width:760px){.nav{padding:10px 15px;align-items:flex-start;gap:10px}.brand img{width:160px}nav{flex-wrap:wrap;justify-content:flex-end;font-size:13px}nav a{padding:10px 7px}nav a:hover,nav a:focus{padding-bottom:6px}nav form.inline button{padding:10px 7px;font-size:13px}}

.account-menu{position:relative;display:inline-flex;align-items:center}
.account-trigger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:46px;padding:0;border:0;background:transparent;color:#333;font:400 25px/1 Arial,sans-serif;cursor:pointer}
.account-trigger:hover,.account-trigger:focus{color:#333}
.account-dropdown{display:none;position:absolute;z-index:20;top:46px;right:0;width:80px;background:#fff;border:1px solid #d5d5d5;border-radius:0 0 3px 3px;box-shadow:0 2px 4px rgba(0,0,0,.04)}
.account-menu:hover .account-dropdown,.account-menu:focus-within .account-dropdown{display:block}
.account-dropdown a{display:block!important;padding:10px 12px!important;color:#555!important;font:400 14px/1.2 "Noto Sans KR",Arial,sans-serif!important;white-space:nowrap;border:0!important}
.account-dropdown a:hover,.account-dropdown a:focus{background:#f8f9fa;color:#333!important;border:0!important}
.account-trigger{font-size:0}.account-trigger .account-icon{display:block;width:18px;height:18px;fill:currentColor}table.leaderboard th:nth-child(3),table.leaderboard td:nth-child(3),table.leaderboard th:nth-child(4),table.leaderboard td:nth-child(4){transform:translateX(-4px)}

/* Login dimensions matched to the original CodeShell login page. */
body:has(.login-page) main{max-width:none;margin:0;padding:0;background:#f4f4f4}
.login-page{min-height:100vh;width:100%;padding:0;display:flex;justify-content:center;align-items:center;background:#f4f4f4}
.login-panel{width:100%;max-width:400px;padding:30px 15px;margin:0 auto 150px}
.login-logo{display:block;width:370px;max-width:100%;height:auto;margin:0 auto 30px}
.login-form input[type="text"],.login-form input[type="password"]{width:100%;height:auto;margin:0 0 10px;padding:12px;border:1px solid #ced4da;border-radius:4px;background:#fff;color:#241b19;font:16px/1.5 "Noto Sans KR",Arial,sans-serif;outline:none}
.login-form input[type="text"]:focus,.login-form input[type="password"]:focus{border-color:#ced4da;box-shadow:none}
.login-form button{width:100%;height:auto;padding:12px;border-radius:4px;font:400 16px/1.5 "Noto Sans KR",Arial,sans-serif}
table.leaderboard th:nth-child(3),table.leaderboard td:nth-child(3),table.leaderboard th:nth-child(4),table.leaderboard td:nth-child(4){transform:translateX(-8px)}

/* Homepage center section restored from the supplied CodeShell reference assets. */
.home-hero{margin:-60px -24px 72px;min-height:760px;background:#f7f7f8 url('/static/img/hero-bg.png') center center/cover no-repeat;overflow:hidden}
.home-hero-inner{max-width:1140px;min-height:760px;margin:0 auto;padding:80px 15px;display:grid;grid-template-columns:42% 58%;align-items:center}
.home-copy{position:relative;z-index:1;padding-left:40px}
.home-copy h1{max-width:450px;margin:0 0 24px;color:#424242;font-size:42px;line-height:1.25;font-weight:700}
.home-copy p{max-width:470px;margin:0 0 28px;color:#555;font-size:16px;line-height:1.9}
.home-copy .button{background:#444;border-color:#444;color:#fff;padding:10px 22px;font-size:14px}
.home-copy .button:hover{background:#4ac2bd;border-color:#4ac2bd}
.home-visual{height:100%;display:flex;align-items:center;justify-content:center}
.home-visual img{display:block;width:min(100%,650px);height:auto;object-fit:contain}
@media(max-width:760px){.home-hero{margin:-35px -24px 50px;min-height:650px}.home-hero-inner{min-height:650px;padding:45px 20px;display:flex;flex-direction:column;justify-content:center}.home-copy{padding:0;text-align:center}.home-copy h1{font-size:30px}.home-copy p{font-size:14px}.home-visual{width:100%;max-height:360px}.home-visual img{max-height:360px;width:auto;max-width:100%}}

/* Responsive two-slide homepage hero. */
.home-slider{position:relative;margin:-60px -24px 72px;overflow:hidden;background:#f7f7f8}
.home-slide{display:none;min-height:760px;background:#f7f7f8}
.home-slide.is-active{display:block}
.home-slide-inner{max-width:1140px;min-height:760px;margin:0 auto;padding:80px 15px;display:grid;grid-template-columns:42% 58%;align-items:center}
.home-copy{position:relative;z-index:1;padding-left:40px}
.home-copy h1{max-width:450px;margin:0 0 24px;color:#424242;font-size:42px;line-height:1.25;font-weight:700}
.home-copy p{max-width:470px;margin:0 0 28px;color:#555;font-size:16px;line-height:1.9}
.home-copy .button,.home-slide-alt-copy .button{background:#444;border-color:#444;color:#fff;padding:10px 22px;font-size:14px}
.home-copy .button:hover,.home-slide-alt-copy .button:hover{background:#4ac2bd;border-color:#4ac2bd}
.home-visual{height:100%;display:flex;align-items:center;justify-content:center}
.home-visual img{display:block;width:min(100%,650px);height:auto;object-fit:contain}
.home-slide-alt{background:#f7f7f8 url('/static/img/hero-bg.png') center/cover no-repeat}
.home-slide-alt-inner{max-width:1140px;min-height:760px;margin:0 auto;padding:80px 15px;display:flex;align-items:center;justify-content:center;text-align:center}
.home-slide-alt-copy{max-width:560px;padding:30px;background:rgba(255,255,255,.72)}
.home-slide-alt-copy h1{margin:0 0 16px;color:#424242;font-size:42px;line-height:1.25}
.home-slide-alt-copy p{margin:0 0 26px;color:#555;font-size:16px}
.home-slider-dots{position:absolute;bottom:24px;left:0;right:0;z-index:4;display:flex;justify-content:center;gap:8px}
.home-slider-dots button{width:9px;height:9px;padding:0;border:1px solid #777;border-radius:50%;background:transparent;cursor:pointer}
.home-slider-dots button.is-active{background:#444}
@media(max-width:760px){.home-slider{margin:-35px -24px 50px}.home-slide,.home-slide-inner,.home-slide-alt-inner{min-height:650px}.home-slide-inner{padding:45px 20px;display:flex;flex-direction:column;justify-content:center}.home-copy{padding:0;text-align:center}.home-copy h1,.home-slide-alt-copy h1{font-size:30px}.home-copy p,.home-slide-alt-copy p{font-size:14px}.home-visual{width:100%;max-height:360px}.home-visual img{max-height:360px;width:auto;max-width:100%}.home-slide-alt-inner{padding:45px 20px}.home-slide-alt-copy{padding:22px 16px}}

/* Original CodeShell slider scope and responsive behavior. */
.home-slider{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:800px}
.home-slide{display:block;position:absolute;inset:0;min-height:800px;opacity:0;visibility:hidden;transition:opacity .45s ease;z-index:0}
.home-slide.is-active{position:relative;opacity:1;visibility:visible;z-index:1}
.home-slide-inner,.home-slide-alt-inner{min-height:800px}
.home-slider-dots{bottom:24px}
@media(max-width:760px){.home-slider{min-height:650px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.home-slide,.home-slide-inner,.home-slide-alt-inner{min-height:650px}}
.home-visual img{transform:translateX(40px)}@media(max-width:760px){.home-visual img{transform:none}}.home-slider-dots{left:50%;right:auto;width:max-content;transform:translateX(-50%);display:flex;justify-content:center;align-items:center}
/* About page restored from the supplied CodeShell page structure. */
.about-intro{margin:-60px -24px 0;padding:100px 0;background:#fff}
.about-inner{max-width:1140px;margin:0 auto;padding:0 15px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-image img{display:block;width:100%;height:auto}
.about-copy{font-family:"Noto Sans KR",Arial,sans-serif;color:#333;font-size:16px;line-height:1.85}
.about-copy h1{margin:0 0 30px;color:#424242;font-size:50px;line-height:1.2}
.about-copy p{margin:0 0 22px}
.about-profile{margin:0 -24px;padding:0 0 50px;background:#edf2f8;text-align:center}
.about-profile-inner{max-width:1140px;margin:0 auto;padding:0 15px;display:flex;flex-direction:column;align-items:center}
.about-profile-image{width:min(100%,360px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:15px}
.about-profile-image img{display:block;width:100%;height:100%;object-fit:cover}
.about-profile-copy h2{margin:0;color:#333;font-size:22px}
.about-profile-copy p{margin:8px 0 0;color:#555;font-size:14px}
@media(max-width:760px){.about-intro{margin:-35px -24px 0;padding:55px 0}.about-inner{display:flex;flex-direction:column;gap:35px;padding:0 20px}.about-image{width:100%}.about-copy h1{font-size:36px;margin-bottom:22px}.about-copy{font-size:14px}.about-profile{margin:0 -24px}.about-profile-image{width:min(80vw,300px)}}