@font-face{font-family:Jua;src:url('/lesson-04/assets/Jua-Regular.woff2');font-display:swap}
@font-face{font-family:Pretendard;src:url('/lesson-04/assets/PretendardVariable.woff2');font-display:swap}
:root{font-family:Pretendard,system-ui,sans-serif;color:#172f44;background:#f3f0e2}
*{box-sizing:border-box}
body{margin:0}
.bar{height:70px;display:flex;align-items:center;gap:16px;padding-inline:max(22px,calc((100% - 1280px)/2));background:#142d42;color:#fff9e9;border-bottom:4px solid #e4a855}
.bar .brand{font:34px Jua,sans-serif;color:inherit;text-decoration:none;white-space:nowrap}
.bar span{font-size:15px;color:#c6e8da}
.portal{margin-left:auto;color:inherit;text-decoration:none;font-size:15px;white-space:nowrap}
main{max-width:1324px;margin:auto;padding:26px 22px 42px}
.intro{padding:14px 0 25px}
.intro p:first-child,.unit-hero p:first-child{font-weight:800;color:#356359}
.intro h1,.unit-hero h1{font:clamp(52px,7vw,96px)/1 Jua,sans-serif;margin:6px 0 8px;word-break:keep-all}
p{line-height:1.5;margin:0;word-break:keep-all}
.intro p:last-child,.unit-hero p:last-child{font-size:20px}
.unit-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;grid-template-rows:214px 214px;gap:14px}
.tile,.lesson-card,.unit-hero{border:2px solid #193449;border-radius:20px;overflow:hidden;box-shadow:0 5px #193449}
.tile{position:relative;display:flex;align-items:flex-end;text-decoration:none;color:#fffbec;isolation:isolate;background:#255665}
.tile img,.unit-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tile:after,.unit-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#10283cf5,#10283c18 84%)}
.tile-copy{width:100%;padding:16px 19px}
.tile h2,.lesson-card h2{font:clamp(23px,2.6vw,37px)/1.06 Jua,sans-serif;margin:8px 0 5px;word-break:keep-all}
.tile p,.lesson-card p{font-size:16px}
.tag{display:inline-flex;border-radius:7px;padding:4px 8px;background:#ffe2a0;color:#1b364a;font-size:14px;font-weight:850}
.link-text{display:inline-flex;gap:9px;margin-top:8px;font-weight:800;color:#ffe0a5}
.unit-grid .unit-gas{grid-row:span 2}
.unit-grid .unit-gas h2{font-size:clamp(34px,4vw,62px)}
.unit-grid .unit-gas .tile-copy{padding:24px}
.unit-grid .unit-climate{grid-column:span 2}
a:focus-visible{outline:4px solid #ed9d39;outline-offset:4px}
.tile:hover,.lesson-card[href]:hover{box-shadow:0 7px #193449;translate:0 -2px}
.crumb{display:inline-block;margin:0 0 15px;color:#265f55;font-weight:800}
.unit-hero{position:relative;min-height:237px;display:flex;align-items:center;padding:27px;isolation:isolate;color:#fff9eb;background:#255665;margin-bottom:20px}
.unit-hero:after{background:linear-gradient(90deg,#10283cee 8%,#10283cb0 42%,transparent)}
.unit-hero h1{font-size:clamp(42px,6vw,75px)}
.unit-hero p:first-child{color:#ffe1a0}
.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.lesson-card{display:grid;grid-template-columns:minmax(135px,42%) 1fr;background:#fff9e9;text-decoration:none;color:#193449;min-height:156px}
.lesson-card img{width:100%;height:100%;object-fit:cover;object-position:62%;min-height:156px}
.lesson-card>div{padding:15px;align-self:center}
.lesson-card .link-text{color:#245d54}
.lesson-card h2{font-size:clamp(24px,2.45vw,35px)}
.lesson-card.planned{display:block;box-shadow:0 3px #193449;background:#e8eee0;min-height:115px}
.lesson-card.planned h2{font-size:24px}
.lesson-card.planned p{color:#426756;font-weight:700}
footer{max-width:1280px;margin:auto;border-top:1px solid #9aafaa;padding:17px 22px;color:#46666a;font-size:14px}
@media(max-width:800px){.unit-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:245px 195px 195px}.unit-grid .unit-gas{grid-column:span 2;grid-row:auto}.lesson-grid{grid-template-columns:1fr}.tile-copy{padding:13px}.bar{gap:9px}}
@media(max-width:410px){.bar span{font-size:12px}.bar .brand{font-size:27px}.portal{font-size:12px}.lesson-card{grid-template-columns:36% 1fr}.lesson-card img{min-height:145px}}