/* 아일리잉글리시(640) 메인 — 시안(640-ily-main-mock.html)에서 변환. 직접 고치지 말고 시안 → 변환 순서로 */
.ily{--brand: #FF6B4A;
  --brand-deep: #E2492B;
  --navy: #0C2468;
  --brand-wash: #FFEDE6;
  --ground: #FFF8F5;
  --ink: #25304F;
  --ink2: #6B7390;
  --line: #F3E3DC;
  --paper: #FFFAF7;
  --cocoa: #0C2468;
  --font: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color-scheme: light;}
.ily *{box-sizing: border-box;}
.ily{margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.8; padding-bottom: 76px;}
.ily a{color: inherit; text-decoration: none;}
.ily p{margin: 0; word-break: keep-all;}
.ily h1, .ily h2, .ily h3, .ily h4{margin: 0; color: var(--navy); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; text-wrap: balance; word-break: keep-all;}
.ily h1, .ily h2, .ily h3{font-weight: 700;}
.ily ul, .ily ol{margin: 0; padding: 0; list-style: none;}
.ily .wrap{max-width: 1080px; margin: 0 auto; padding-inline: 22px;}
.ily section{padding-block: 84px;}
.ily .ground{background: var(--ground);}
.ily .kicker{font-size: 13px; font-weight: 700; color: var(--brand-deep); letter-spacing: .08em; margin-bottom: 12px;}
.ily .title{font-size: clamp(25px, 3.4vw, 36px); font-weight: 700;}
.ily .lead{margin-top: 14px; color: var(--ink2); max-width: 36em;}
.ily .ic{width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;}
.ily .notice{background: linear-gradient(90deg, #0C2468 0%, #15348A 50%, #0C2468 100%); color: #fff; font-size: 15px; font-weight: 500;}
.ily .notice .wrap{display: flex; justify-content: center; align-items: center; gap: 12px; padding-block: 13px; padding-right: 44px; position: relative; text-align: center; flex-wrap: wrap;}
.ily .notice .tag{background: var(--brand); color: #0C2468; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 3px 11px; border-radius: 999px;}
.ily .notice strong{font-weight: 700;}
.ily .notice a{color: #FFD3C8; font-weight: 700; border-bottom: 1px solid #FFD3C8; white-space: nowrap;}
.ily .notice button{position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 24px; line-height: 1; color: #fff; cursor: pointer; opacity: .8;}
.ily .head{position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; border-top: 3px solid var(--brand); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);}
.ily .head .wrap{display: flex; align-items: center; gap: 28px; height: 62px;}
.ily .logo{display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 500; color: var(--navy); letter-spacing: -0.02em;}
.ily .logo i{width: 36px; height: 44px; flex-shrink: 0; background: none no-repeat; background-size: 86.4px auto; background-position: -6.3px -11.2px;}
.ily .logo b{font-weight: 500; color: var(--brand-deep);}
.ily .nav{display: flex; gap: 28px; font-size: 16px; font-weight: 500; color: var(--navy);}
.ily .nav a{padding-block: 6px; border-bottom: 2px solid transparent;}
.ily .nav a:hover{color: var(--brand-deep); border-bottom-color: var(--brand);}
.ily .sp{flex: 1;}
.ily .small-link{font-size: 14.5px; font-weight: 500; color: var(--navy);}
.ily .small-btn{font-size: 14.5px; padding: 9px 18px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 500;}
@media (max-width: 800px){.ily .nav, .ily .small-link{display: none;}}
.ily .btn{display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; font-family: inherit; cursor: pointer;}
.ily .btn-fill{background: var(--navy); color: #fff;}
.ily .btn-fill:hover{background: #17358C;}
.ily .btn-line{border-color: #D9CFC6; background: #fff; color: var(--ink);}
.ily .btn svg{width: 16px; height: 16px; stroke-width: 2;}
.ily .ph{position: relative; background: #F8F4F1; border: 1px dashed #D9CDC6; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; color: var(--ink2); font-size: 13px; line-height: 1.5; min-width: 0; overflow: hidden;}
.ily .ph b{align-self: flex-start; background: #fff; border: 1px solid #D9CDC6; color: var(--ink2); font-size: 11px; font-weight: 500; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; margin-bottom: 6px;}
.ily .ph.has{padding: 0; border-style: solid; border-color: var(--line);}
.ily .ph.has img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;}
.ily .ph.has .src{position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.92); color: var(--ink2); font-size: 11px; padding: 2px 9px; border-radius: 999px;}
.ily .cc .ph.has{border-bottom: 0;}
.ily .ph.round{border-radius: 50%; aspect-ratio: 1; align-items: center; justify-content: center; text-align: center; padding: 8px;}
.ily .ph.round b{align-self: center;}
.ily .hero{background: linear-gradient(180deg, #FFE5DC 0%, #FFF5F1 100%); padding-block: 44px 64px;}
.ily .hero .wrap{display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center;}
.ily .tabs{display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 24px;}
.ily .tabs button{border: 0; background: none; font: inherit; font-size: 14px; padding: 7px 20px; border-radius: 999px; cursor: pointer; color: var(--ink2);}
.ily .tabs button[aria-pressed="true"]{background: var(--brand-wash); color: var(--brand-deep); font-weight: 500;}
.ily .hero h1{font-size: clamp(32px, 4.8vw, 52px); font-weight: 700; line-height: 1.28;}
.ily .hero h1 em{font-style: normal; color: var(--brand-deep);}
.ily .hero .ol{display: block; font-weight: 500; color: var(--navy); font-size: 19px; margin-bottom: 4px;}
.ily .hero .sub{margin-top: 18px; color: var(--ink2); font-size: 17px; max-width: 30em;}
.ily .hero .cta{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;}
.ily .hero .note{margin-top: 14px; font-size: 14px; color: var(--ink2);}
.ily .hp{position: relative;}
.ily .hp .ph{aspect-ratio: 4 / 4.2; border-radius: 100px 24px 24px 24px;}
.ily .chip{position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px 12px; display: flex; align-items: center; gap: 7px; font-size: 13px; box-shadow: 0 6px 18px rgba(58,51,46,.08);}
.ily .chip svg{width: 18px; height: 18px; color: var(--brand-deep);}
.ily .c1{left: -12px; top: 18%;}
.ily .c2{right: -8px; top: 44%;}
.ily .c3{left: 8%; bottom: 8%;}
@media (max-width: 860px){.ily .hero .wrap{grid-template-columns: 1fr; gap: 28px;}
.ily .hp .ph{aspect-ratio: 4 / 3.2; border-radius: 64px 20px 20px 20px;}
.ily .c1{left: 8px;}
.ily .c2{right: 8px;}}
.ily .band{padding-block: 0; border-bottom: 1px solid var(--line);}
.ily .band .wrap{display: grid; grid-template-columns: repeat(5, 1fr);}
.ily .band div{padding: 20px 10px; text-align: center; border-right: 1px solid var(--line); font-size: 13.5px; color: var(--ink2);}
.ily .band div:last-child{border-right: 0;}
.ily .band strong{display: block; font-size: 20px; font-weight: 500; color: var(--brand-deep); line-height: 1.4;}
@media (max-width: 760px){.ily .band .wrap{grid-template-columns: repeat(2, 1fr);}
.ily .band div{border-bottom: 1px solid var(--line);}}
.ily .zig{display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center;}
.ily .zig + .zig{margin-top: 72px;}
.ily .zig.rev{grid-template-columns: 1.1fr .9fr;}
.ily .zig.rev .ph{order: 2;}
.ily .zig .ph{aspect-ratio: 5 / 4;}
.ily .zig h3{font-size: 24px;}
.ily .zig .no{font-size: 13px; color: var(--brand-deep); letter-spacing: .08em; margin-bottom: 8px;}
.ily .zig p{color: var(--ink2); margin-top: 10px;}
.ily .zig ul{margin-top: 18px; display: grid; gap: 8px;}
.ily .zig li{display: flex; gap: 10px; font-size: 15px;}
.ily .zig li::before{content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 11px; flex-shrink: 0;}
@media (max-width: 800px){.ily .zig, .ily .zig.rev{grid-template-columns: 1fr; gap: 24px;}
.ily .zig.rev .ph{order: 0;}}
.ily .crow{display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 34px;}
.ily .cc{background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-width: 0;}
.ily .cc .ph{border: 0; border-bottom: 1px dashed #D9CDC6; border-radius: 0; aspect-ratio: 16 / 9;}
.ily .cc .t{padding: 20px 22px 24px;}
.ily .cc .tag{font-size: 13px; color: var(--brand-deep);}
.ily .cc h3{font-size: 19px; margin-top: 2px;}
.ily .cc p{color: var(--ink2); font-size: 14.5px; margin-top: 6px;}
.ily .cc ul{margin-top: 12px; display: grid; gap: 4px; font-size: 14px; color: var(--ink2);}
.ily .cc li::before{content: '· '; color: var(--brand-deep);}
.ily .verify{margin-top: 16px; font-size: 13px; color: var(--ink2);}
.ily .track{margin-top: 38px; display: grid; gap: 14px;}
.ily .lane{display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center;}
.ily .lane > b{font-size: 14px; font-weight: 500; color: var(--brand-deep);}
.ily .lane .bar{display: grid; gap: 6px;}
.ily .lane .bar{grid-auto-flow: column; grid-auto-columns: 1fr;}
.ily .lane .bar span{background: #fff; border: 1px solid var(--line); border-radius: 12px; text-align: center; padding: 12px 4px; font-size: 13px; color: var(--ink2);}
.ily .lane .bar span.on{background: var(--brand-wash); border-color: #F8B9A9; color: var(--brand-deep);}
@media (max-width: 700px){.ily .lane{grid-template-columns: 1fr; gap: 6px;}
.ily .lane .bar span{padding: 10px 2px; font-size: 11.5px;}}
.ily .time{margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative;}
.ily .time::before{content: ''; position: absolute; left: 0; right: 0; top: 14px; border-top: 1px solid var(--line);}
.ily .time > div{position: relative; padding-top: 38px;}
.ily .time > div::before{content: ''; position: absolute; top: 8px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px #fff;}
.ily .ground .time > div::before{box-shadow: 0 0 0 5px var(--ground);}
.ily .time .w{font-size: 13px; color: var(--brand-deep);}
.ily .time h3{font-size: 20px; margin-top: 2px;}
.ily .time p{color: var(--ink2); font-size: 15px; margin-top: 6px;}
.ily .time .ph{margin-top: 16px; aspect-ratio: 16 / 11;}
@media (max-width: 760px){.ily .time{grid-template-columns: 1fr;}
.ily .time::before{display: none;}}
.ily .cen{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px;}
.ily .cen .ph{aspect-ratio: 16 / 10;}
.ily .stat{display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 30px;}
.ily .stat div{font-size: 14px; color: var(--ink2);}
.ily .stat strong{display: block; font-size: 36px; font-weight: 400; color: var(--brand-deep); line-height: 1.2;}
.ily .grid5{display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 30px;}
.ily .grid5 div{background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 12px; text-align: center;}
.ily .grid5 b{display: block; font-weight: 500; font-size: 15px;}
.ily .grid5 span{font-size: 12.5px; color: var(--ink2);}
.ily .teach{display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px;}
.ily .teach .ph{font-size: 11px;}
@media (max-width: 760px){.ily .cen{grid-template-columns: 1fr;}
.ily .grid5{grid-template-columns: repeat(2, 1fr);}
.ily .teach{grid-template-columns: repeat(2, 1fr);}}
.ily .pt{margin-top: 30px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff;}
.ily .pr{display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 12px; padding: 20px 24px; align-items: center; border-bottom: 1px solid var(--line);}
.ily .pr:last-child{border-bottom: 0;}
.ily .pr b{font-weight: 500; font-size: 17px;}
.ily .pr small{display: block; font-size: 13px; color: var(--ink2);}
.ily .pr .d{font-size: 14px; color: var(--ink2);}
.ily .pr .a{text-align: right; font-size: 22px; font-weight: 300; color: var(--brand-deep);}
.ily .pr .a em{font-style: normal; font-size: 13px; color: var(--ink2); margin-left: 3px;}
.ily .pr.on{background: var(--brand-wash);}
@media (max-width: 640px){.ily .pr{grid-template-columns: 1fr auto;}
.ily .pr .d{display: none;}}
.ily .fine{margin-top: 12px; font-size: 13px; color: var(--ink2);}
.ily .move{display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--brand-wash); border-radius: 24px; padding: 40px;}
.ily .move .pair{display: flex; align-items: center; gap: 14px;}
.ily .move .pair div{flex: 1; background: #fff; border-radius: 16px; padding: 16px; text-align: center;}
.ily .move small{display: block; font-size: 12.5px; color: var(--ink2);}
.ily .move b{font-weight: 500; font-size: 20px;}
.ily .move .from b{color: #B3A79D; text-decoration: line-through;}
@media (max-width: 760px){.ily .move{grid-template-columns: 1fr; padding: 28px 22px; gap: 22px;}}
.ily .revs{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px;}
.ily .revs .ph{aspect-ratio: 4 / 3;}
@media (max-width: 760px){.ily .revs{grid-template-columns: 1fr;}}
.ily .ph.ui{padding:0;border-style:solid;border-color:var(--line);background:linear-gradient(160deg,#FFF1EC,#FFF9F6);container-type:inline-size;overflow:hidden}
.ily .ph.ui .u{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6cqw}
.ily .ph.ui .win{width:100%;max-width:92cqw;background:#fff;border:1px solid var(--line);border-radius:3cqw;box-shadow:0 2cqw 6cqw rgba(37,48,79,.12);overflow:hidden;font-size:3.6cqw;color:var(--ink);line-height:1.35}
.ily .ph.ui .bar{display:flex;align-items:center;gap:1.4cqw;padding:2.2cqw 3cqw;background:var(--navy);color:#fff;font-weight:700;font-size:3.3cqw}
.ily .ph.ui .bar i{width:2cqw;height:2cqw;border-radius:50%;background:rgba(255,255,255,.45);display:inline-block}
.ily .ph.ui .bar span{margin-left:auto;font-weight:500;opacity:.8;font-size:3cqw}
.ily .ph.ui .bd{padding:3.6cqw 4cqw}
.ily .ph.ui .prog{height:1.8cqw;background:#F3E8E3;border-radius:9cqw;overflow:hidden;margin:1.6cqw 0 3.2cqw}
.ily .ph.ui .prog b{display:block;height:100%;background:var(--brand);border-radius:9cqw}
.ily .ph.ui .q{background:var(--brand-wash);border-radius:2.4cqw;padding:2.6cqw 3cqw;font-weight:700;color:var(--ink)}
.ily .ph.ui .mic{display:flex;align-items:center;justify-content:center;gap:2.4cqw;margin-top:3.4cqw}
.ily .ph.ui .mic em{width:9cqw;height:9cqw;border-radius:50%;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-size:4.4cqw}
.ily .ph.ui .wave{display:inline-flex;align-items:center;gap:.9cqw;height:8cqw}
.ily .ph.ui .wave b{width:1cqw;background:var(--brand);border-radius:1cqw;display:block}
.ily .ph.ui .word{text-align:center;padding:2cqw 0 1.6cqw}
.ily .ph.ui .word strong{display:block;font-size:9cqw;color:var(--navy);letter-spacing:-.02em}
.ily .ph.ui .word small{color:var(--ink2);font-size:3.4cqw}
.ily .ph.ui .ex{background:#FAF5F2;border-radius:2cqw;padding:2.2cqw 3cqw;color:var(--ink2);margin:1.4cqw 0 3cqw}
.ily .ph.ui .btns{display:flex;gap:2cqw}
.ily .ph.ui .btns span{flex:1;text-align:center;border-radius:9cqw;padding:2cqw 0;font-weight:700;font-size:3.4cqw}
.ily .ph.ui .btns .no{background:#fff;border:1px solid var(--line);color:var(--ink2)}
.ily .ph.ui .btns .ok{background:var(--brand);color:#fff}
.ily .ph.ui .rep{display:grid;grid-template-columns:auto 1fr auto;gap:1.8cqw 2.4cqw;align-items:center;margin-top:2cqw}
.ily .ph.ui .rep .t{height:2.2cqw;background:#F3E8E3;border-radius:9cqw;overflow:hidden}
.ily .ph.ui .rep .t b{display:block;height:100%;background:var(--brand);border-radius:9cqw}
.ily .ph.ui .rep .n{font-weight:700;color:var(--navy)}
.ily .ph.ui .cm{margin-top:3cqw;border-left:.9cqw solid var(--brand);padding:.6cqw 0 .6cqw 2.4cqw;color:var(--ink2)}
.ily .ph.ui .wl{display:flex;flex-direction:column;gap:1.8cqw}
.ily .ph.ui .wl div{display:flex;align-items:center;gap:2.4cqw;border:1px solid var(--line);border-radius:2cqw;padding:1.8cqw 2.6cqw}
.ily .ph.ui .wl b{color:var(--navy);flex:1}
.ily .ph.ui .wl span{color:var(--ink2);font-size:3.2cqw}
.ily .ph.ui .wl em{font-style:normal;background:var(--brand-wash);color:var(--brand-deep);font-weight:700;font-size:3cqw;border-radius:9cqw;padding:.4cqw 2cqw}
.ily .ph.ui .chips{display:flex;flex-wrap:wrap;gap:1.8cqw;margin:2cqw 0 3cqw}
.ily .ph.ui .chips span{background:#fff;border:1px solid var(--brand);color:var(--brand-deep);border-radius:9cqw;padding:1.2cqw 3cqw;font-weight:700}
.ily .ph.ui .tg, .ily .ph.rv .tg{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);color:var(--ink2);font-size:11px;padding:2px 9px;border-radius:999px;z-index:2}
.ily .ph.ava{padding:0;border-style:solid;border-color:var(--line);overflow:hidden}
.ily .ph.ava svg{position:absolute;inset:0;width:100%;height:100%}
.ily .ph.ava .nm{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:11px;font-weight:700;color:var(--navy)}
.ily .ph.rv{padding:0;border-style:solid;border-color:var(--line);background:#fff;overflow:hidden;container-type:inline-size}
.ily .ph.rv .u{position:absolute;inset:0;padding:6cqw;display:flex;flex-direction:column;justify-content:center;gap:3cqw}
.ily .ph.rv .st{color:#F4B400;letter-spacing:.2em;font-size:5cqw}
.ily .ph.rv p{font-size:4.6cqw;line-height:1.55;color:var(--ink);margin:0}
.ily .ph.rv small{color:var(--ink2);font-size:3.6cqw}
.ily .faq{max-width: 760px; margin: 26px auto 0;}
.ily .faq details{border-bottom: 1px solid var(--line);}
.ily .faq summary{cursor: pointer; font-size: 17px; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px;}
.ily .faq summary::-webkit-details-marker{display: none;}
.ily .faq summary::after{content: '+'; color: var(--brand-deep); font-size: 22px; line-height: 1.2;}
.ily .faq details[open] summary::after{content: '–';}
.ily .faq p{color: var(--ink2); padding-bottom: 18px; font-size: 15px;}
.ily .last{background: var(--brand-wash); text-align: center;}
.ily .last h2{font-size: clamp(24px, 3.4vw, 34px);}
.ily .last p{margin-top: 10px; color: var(--ink2);}
.ily .last .btn{margin-top: 22px;}
.ily .foot{background: var(--cocoa); color: #D8CBC1; font-size: 13.5px; padding-block: 30px; font-weight: 300;}
.ily .foot .wrap{display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;}
.ily .ask{position: fixed; right: 16px; bottom: 88px; z-index: 40; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; padding: 11px 18px; border-radius: 999px; box-shadow: 0 8px 22px rgba(58,51,46,.12); display: flex; gap: 7px; align-items: center;}
.ily .ask svg{width: 18px; height: 18px; color: var(--brand-deep);}
.ily .dock{position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px;}
.ily .dock a{flex: 1; text-align: center; font-weight: 500; padding: 13px 8px; border-radius: 12px; font-size: 15px;}
.ily .dock .a{background: var(--navy); color: #fff;}
.ily .dock .b{background: var(--brand-wash);}
@media (min-width: 900px){.ily .dock{display: none;}
.ily{padding-bottom: 0;}
.ily .ask{bottom: 24px;}}
.ily .appx{background: var(--ground);}
.ily .appx h2{font-size: 24px;}
.ily .rules{display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px;}
.ily .rules div{background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: 14.5px;}
.ily .rules b{display: block; font-weight: 500; margin-bottom: 4px;}
.ily .sw{display: flex; gap: 8px; margin-top: 10px;}
.ily .sw i{width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);}
.ily .tbl{overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff;}
.ily .tbl table{border-collapse: collapse; width: 100%; min-width: 760px; font-size: 13.5px;}
.ily .tbl th, .ily .tbl td{text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line);}
.ily .tbl th{background: var(--ground); font-weight: 500; white-space: nowrap;}
.ily :focus-visible{outline: 2px solid var(--brand); outline-offset: 3px;}
.ily .head .hc{display:grid;grid-template-columns:1fr auto 1fr;gap:20px}
.ily .head .nl{display:none;justify-content:flex-start;gap:28px}
.ily .head .nr{display:flex;justify-content:flex-end;align-items:center;gap:20px;grid-column:3}
.ily .head .nr .nav{display:none;gap:28px}
.ily .head .logo{grid-column:2;justify-self:center}
@media (min-width:900px){.ily .head .nl{display:flex!important;grid-column:1}
.ily .head .nr .nav{display:flex!important}
.ily .head .small-link{display:inline!important}}
@media (max-width:899px){.ily .head .hc{grid-template-columns:1fr auto 1fr}
.ily .head .small-btn{font-size:13px;padding:8px 14px}}
.ily .head.hd2{position:relative;border-top:3px solid var(--brand);background:#fff;border-bottom:1px solid var(--line)}
.ily .hd2 .wrap{height:auto;display:block}
.ily .hd2 .hd-top{background:#FAF5F2;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2)}
.ily .hd2 .hd-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:7px}
.ily .hd2 .hd-tk b{color:var(--brand-deep);margin-right:6px}
.ily .hd2 .hd-act{display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0}
.ily .hd2 .hd-act a{color:var(--ink2)}
.ily .hd2 .hd-act a.ol{border:1px solid var(--brand);color:var(--brand-deep);border-radius:999px;padding:2px 12px;font-weight:700}
.ily .hd2 .hd-lg .wrap{display:flex;align-items:center;justify-content:center;padding-block:18px;position:relative}
.ily .hd2 .hd-bg, .ily .hd2 .hd-lo{display:none}
.ily .hd2 .hd-nav{border-top:1px solid var(--line)}
.ily .hd2 .hd-nav ul{display:flex;justify-content:center;gap:6px;list-style:none;margin:0;padding:0}
.ily .hd2 .hd-nav>.wrap>ul>li{position:relative}
.ily .hd2 .hd-nav>.wrap>ul>li>a{display:block;padding:15px 24px;font-size:16px;font-weight:500;color:var(--navy);border-bottom:2px solid transparent}
.ily .hd2 .hd-nav>.wrap>ul>li:hover>a{color:var(--brand-deep);border-bottom-color:var(--brand)}
.ily .hd2 .dd{display:none!important;position:absolute;left:50%;top:100%;transform:translateX(-50%);min-width:190px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:0 0 12px 12px;box-shadow:0 12px 28px rgba(37,48,79,.12);padding:8px 0;z-index:30;flex-direction:column;gap:0}
.ily .hd2 .hd-nav>.wrap>ul>li:hover>.dd{display:flex!important}
.ily .hd2 .dd a{display:block;padding:9px 20px;font-size:14.5px;color:var(--ink);white-space:nowrap}
.ily .hd2 .dd a:hover{background:var(--brand-wash);color:var(--brand-deep)}
@media (max-width:899px){.ily .hd2 .hd-act li:nth-child(-n+2){display:none}
.ily .hd2 .hd-nav{display:none}
.ily .hd2 .hd-lg .wrap{padding-block:12px}
.ily .hd2 .hd-bg{display:block;position:absolute;left:var(--gut,16px);background:none;border:0;font-size:24px;color:var(--navy);cursor:pointer}
.ily .hd2 .hd-lo{display:block;position:absolute;right:var(--gut,16px);font-size:14px;font-weight:700;color:var(--navy)}
.ily .hd2 .hd-act{display:none}}
@media (min-width:900px){.ily .hd2 .hd-lg{display:none}
.ily .hd2 .hd-nav>.wrap>ul{align-items:center;gap:4px}
.ily .hd2 .hd-nav>.wrap>ul>li.lg-li{padding:6px 34px}
.ily .hd2 .hd-nav>.wrap>ul>li.lg-li:hover>a{border:0}}
@media (max-width:899px){.ily .hd2 .lg-li{display:none}}
.ily .hd2 .hd-nav>.wrap>ul>li.lg-li>a.logo{display:flex;padding:0;border:0}
.ily{background:#FFFAF7}
.ily section.ground{background:#FFF8F5}
.ily .hero{background:linear-gradient(180deg,#FFEBE3 0%,#FFFAF7 100%)}
.ily .btn-fill{background:linear-gradient(90deg,#FF6B4A,#FF8F5E);color:#fff;box-shadow:0 8px 20px rgba(255,107,74,.28)}
.ily .btn-fill:hover{background:linear-gradient(90deg,#F25C3B,#FF7F4D)}
.ily .cc, .ily .pr, .ily .zig .ph, .ily .time .ph{border-color:var(--line)}
.ily .cc{border-radius:24px;box-shadow:0 6px 22px rgba(226,73,43,.07)}
.ily .pr{background:#fff;border-radius:20px}
.ily .pr.on{border-color:var(--brand);box-shadow:0 10px 28px rgba(255,107,74,.18)}
.ily .faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 20px;margin-bottom:10px}
.ily .faq summary{padding:16px 0}
.ily section.last{background:#FFFAF7;padding-block:56px}
.ily .last .wrap{background:linear-gradient(160deg,#FF6B4A 0%,#FF9468 100%);border-radius:32px;padding:54px 24px;text-align:center;color:#fff}
.ily .last h2, .ily .last p{color:#fff}
.ily .last .btn-fill{background:#fff;color:var(--brand-deep);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.ily .band{background:#fff}
.ily .band strong{color:var(--brand-deep)}
.ily .grid5>div{background:#fff;border:1px solid var(--line);border-radius:18px}
.ily .ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#FF6B4A,#FF9468);box-shadow:0 6px 14px rgba(255,107,74,.28);flex-shrink:0;vertical-align:middle}
.ily .ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ily .ico.sm{width:34px;height:34px;border-radius:11px;margin-right:8px}
.ily .ico.sm svg{width:18px;height:18px}
.ily .ico.xs{width:26px;height:26px;border-radius:9px;margin-right:6px;box-shadow:none}
.ily .ico.xs svg{width:14px;height:14px}
.ily .band div>.ico, .ily .stat div>.ico{display:flex;margin:0 auto 8px}
.ily .stat div>.ico{margin:0 0 8px}
.ily .grid5>div{display:flex;flex-direction:column;align-items:center;text-align:center}
.ily .grid5>div>.ico{margin:0 0 8px}
.ily .zig .no{display:flex;align-items:center}
.ily .opf{background:#33406E;color:#C9D1EA;padding:46px 20px 34px;text-align:center}
.ily .opf-in{max-width:960px;margin:0 auto}
.ily .opf-sign{font-size:22px;font-weight:700;color:#fff;margin:0}
.ily .opf-sign .hl{color:#FF8F5E}
.ily .opf-en{font-size:13px;letter-spacing:.08em;color:#8F9BC7;margin:4px 0 0}
.ily .opf-slogan{font-size:15px;color:#E6EAF7;margin:16px 0 0}
.ily .opf-d{margin-top:22px}
.ily .opf-d summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#C9D1EA;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 16px}
.ily .opf-d summary::-webkit-details-marker{display:none}
.ily .opf-d summary i{font-style:normal;transition:transform .2s}
.ily .opf-d[open] summary i{transform:rotate(180deg)}
.ily .opf-about, .ily .opf-legal{list-style:none;margin:16px 0 0;padding:0}
.ily .opf-about span{display:inline-block;font-size:13px;color:#A9B3D6;margin:3px 10px}
.ily .opf-legal{display:flex;justify-content:center;gap:18px}
.ily .opf-legal a{font-size:13px;color:#E6EAF7;text-decoration:underline;text-underline-offset:3px}
.ily .opf-copy{font-size:12.5px;color:#8F9BC7;margin:26px 0 0;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.ily .track{display:block}
.ily .info{background:#fff;border:1px solid var(--line);border-radius:28px;padding:26px 24px 22px;box-shadow:0 6px 22px rgba(226,73,43,.07)}
.ily .ihead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;font-size:14px;color:var(--ink2)}
.ily .ihead .st, .ily .ihead .gl{font-weight:700;font-size:12px;letter-spacing:.08em;border-radius:999px;padding:4px 12px}
.ily .ihead .st{background:var(--brand-wash);color:var(--brand-deep)}
.ily .ihead .gl{margin-left:auto;background:linear-gradient(90deg,#FF6B4A,#FF8F5E);color:#fff}
.ily .stairs{position:relative;display:grid;grid-template-columns:repeat(8,1fr);align-items:end;gap:8px;height:250px;border-bottom:2px solid var(--line)}
.ily .stairs .s{border-radius:14px 14px 4px 4px;display:flex;flex-direction:column;align-items:center;padding-top:9px;color:#fff;line-height:1.1;position:relative;z-index:1}
.ily .stairs .s b{font-size:clamp(18px,3vw,28px);font-weight:700}
.ily .stairs .s small{font-size:9px;letter-spacing:.1em;opacity:.85;margin-top:3px}
.ily .stairs .arw{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.ily .stairs .arw path{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:6 6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.45}
.ily .lanes{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:12px}
.ily .lanes span{text-align:center;border-top:4px solid;border-radius:2px;padding-top:7px;font-weight:700;font-size:15px;color:var(--navy)}
@media (max-width:640px){.ily .info{padding:20px 14px 18px}
.ily .stairs{height:190px;gap:5px}
.ily .lanes{gap:5px}
.ily .ihead .tx{display:none}
.ily .stairs .s small{display:none}}
.ily .tlb{margin:32px 0 6px}
.ily .tl-bar{display:grid;grid-template-columns:3fr 5fr;border-radius:999px;overflow:hidden;font-size:13px;font-weight:700;text-align:center}
.ily .tl-bar span{padding:11px 8px;color:#fff}
.ily .tl-bar .d{background:linear-gradient(90deg,#FFB48F,#FF9468)}
.ily .tl-bar .e{background:linear-gradient(90deg,#FF6B4A,#E2492B)}
.ily .tl-tick{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);margin-top:6px;padding:0 6px}
.ily .tl-tick i{font-style:normal}
.ily .pg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.ily .pc{position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px 24px 26px;box-shadow:0 6px 22px rgba(226,73,43,.07)}
.ily .pc.on{border:2px solid var(--brand);box-shadow:0 14px 34px rgba(255,107,74,.22)}
.ily .pc .rib{position:absolute;top:-13px;left:24px;background:linear-gradient(90deg,#FF6B4A,#FF8F5E);color:#fff;font-size:12px;font-weight:700;padding:4px 14px;border-radius:999px}
.ily .pc .pn{font-size:13px;letter-spacing:.12em;font-weight:700;color:var(--brand-deep);margin-top:16px}
.ily .pc .pt2{font-size:18px;font-weight:700;color:var(--navy);margin-top:2px}
.ily .pc .pp{margin-top:14px;font-size:15px;color:var(--ink2)}
.ily .pc .pp b{font-size:34px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.ily .pc.fr .pp b{font-size:24px}
.ily .pc .ps{font-size:13.5px;color:var(--ink2);margin-top:2px}
.ily .pc ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px dashed var(--line);display:grid;gap:7px;font-size:14.5px;color:var(--ink)}
.ily .pc li::before{content:'✓';color:var(--brand-deep);font-weight:700;margin-right:8px}
.ily .chips2{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ily .chips2 span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:13.5px;color:var(--ink2)}
.ily .promo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.ily .pm{background:linear-gradient(160deg,#FF6B4A 0%,#FF9468 100%);color:#fff;border-radius:26px;padding:26px 26px 22px}
.ily .pm .ico{background:rgba(255,255,255,.22);box-shadow:none}
.ily .pm .q{font-size:clamp(19px,2.4vw,24px);font-weight:500;line-height:1.5;margin-top:14px;color:#fff}
.ily .pm .q b{font-weight:700}
.ily .pm .w{font-size:13px;opacity:.9;margin-top:10px;color:#fff}
@media (max-width:860px){.ily .pg{grid-template-columns:1fr}
.ily .promo{grid-template-columns:1fr}}
.ily .logo .logo-img{display:block;height:64px;width:auto}
@media (max-width:899px){.ily .logo .logo-img{height:46px}}
.ily .hd2 .hd-nav>.wrap>ul>li>a{font-size:17px;font-weight:700}
.ily .hd2 .dd a{font-weight:500}
.ily .hp .chip{animation:fl 4.2s ease-in-out infinite}
.ily .hp .chip.c2{animation-delay:-1.4s}
.ily .hp .chip.c3{animation-delay:-2.8s}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ily .hp .rot{position:absolute;top:18px;right:18px;max-width:78%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);border-radius:999px;padding:7px 16px 7px 8px;box-shadow:0 8px 22px rgba(37,48,79,.16);font-size:14px;font-weight:700;color:var(--navy);z-index:3}
.ily .hp .rot b{background:linear-gradient(90deg,#FF6B4A,#FF8F5E);color:#fff;font-size:11px;letter-spacing:.08em;padding:3px 9px;border-radius:999px}
.ily .hp .rot span{display:inline-block;transition:opacity .35s,transform .35s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ily .hp .rot span.out{opacity:0;transform:translateY(8px)}
.ily .hp .mq{position:absolute;left:0;right:0;bottom:0;overflow:hidden;border-radius:0 0 24px 24px;background:linear-gradient(90deg,#FF6B4A,#FF8F5E);color:#fff;z-index:3}
.ily .hp .mq-t{display:inline-flex;white-space:nowrap;padding:9px 0;animation:mq 26s linear infinite}
.ily .hp .mq-t span{font-size:14px;font-weight:700;padding:0 22px;position:relative}
.ily .hp .mq-t span::after{content:'✦';position:absolute;right:-6px;opacity:.8}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ily .hp .chip, .ily .hp .mq-t{animation:none}}
@media (max-width:640px){.ily .hp .rot{font-size:12.5px;top:12px;right:10px}
.ily .hp .mq-t span{font-size:12.5px}}
.ily .ptab{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.ily .ptab button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;padding:10px 22px;font-weight:700;font-size:15px;display:inline-flex;align-items:baseline;gap:8px}
.ily .ptab button small{font-weight:500;font-size:12.5px}
.ily .ptab button[aria-pressed="true"]{background:linear-gradient(90deg,#FF6B4A,#FF8F5E);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(255,107,74,.28)}
.ily .pmx{display:grid;grid-template-columns:auto repeat(3,1fr);gap:10px;margin-top:16px;align-items:stretch}
.ily .pmx .h{font-weight:700;color:var(--navy);text-align:center;padding:10px 4px;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:15px}
.ily .pmx .r{display:flex;flex-direction:column;justify-content:center;font-weight:700;color:var(--navy);padding:0 6px 0 2px;white-space:nowrap}
.ily .pmx .r small{font-weight:500;color:var(--ink2);font-size:12px}
.ily .pmx .c{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 8px;text-align:center;position:relative;box-shadow:0 4px 14px rgba(226,73,43,.06)}
.ily .pmx .c b{display:block;font-size:clamp(17px,2.6vw,24px);color:var(--navy);letter-spacing:-.02em}
.ily .pmx .c b em{font-style:normal;font-size:.55em;font-weight:500;color:var(--ink2);margin-right:3px}
.ily .pmx .c small{display:block;font-size:12px;color:var(--ink2);margin-top:3px}
.ily .pmx .c .dc{position:absolute;top:-9px;right:10px;background:linear-gradient(90deg,#FF6B4A,#FF8F5E);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.ily .pmx .c.best{border:2px solid var(--brand);box-shadow:0 10px 24px rgba(255,107,74,.2)}
.ily .pc.wide{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 26px}
.ily .pc .frl{display:flex;align-items:center;gap:16px}
.ily .pc .frl .pn{margin-top:0}
.ily .pc .frp{display:flex;gap:26px}
.ily .pc .frp div{text-align:center}
.ily .pc .frp small{display:block;color:var(--ink2);font-size:12.5px}
.ily .pc .frp b{font-size:24px;color:var(--navy)}
@media (max-width:640px){.ily .pmx{grid-template-columns:auto repeat(3,1fr);gap:6px}
.ily .pmx .c{padding:12px 4px}
.ily .pmx .c small{font-size:11px}}
.ily .ev{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:34px;align-items:center;margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px 30px;box-shadow:0 6px 22px rgba(226,73,43,.07)}
.ily .evd svg{width:100%;height:auto;display:block}
.ily .evt1{font-size:13px;fill:var(--ink2);font-weight:500}
.ily .evt2{font-size:26px;fill:var(--navy);font-weight:900}
.ily .evg{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ily .evg li{display:grid;grid-template-columns:12px 38px 1fr auto;grid-template-areas:"d i n p" ". . b b";gap:6px 12px;align-items:center}
.ily .evg .dot{grid-area:d;width:12px;height:12px;border-radius:50%}
.ily .evg .ik{grid-area:i;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#FF6B4A,#FF9468);display:flex;align-items:center;justify-content:center}
.ily .evg .ik svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ily .evg b{grid-area:n;font-size:16px;color:var(--navy)}
.ily .evg em{grid-area:p;font-style:normal;font-weight:900;color:var(--brand-deep)}
.ily .evg .ebar{grid-area:b;height:8px;border-radius:999px;background:#F3E3DC;overflow:hidden}
.ily .evg .ebar i{display:block;height:100%;width:100%;border-radius:999px}
@media(max-width:700px){.ily .ev{grid-template-columns:1fr;padding:22px 18px;gap:20px}
.ily .evd{max-width:240px;margin:0 auto}}
.ily .teach .ph .src{display:none}
.ily .teach .ph.has img{object-fit:cover;image-rendering:auto}
.ily .teach{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.ily .tt{margin:0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 12px 18px;text-align:center;box-shadow:0 6px 22px rgba(226,73,43,.06)}
.ily .tt .ph.round{width:128px;margin:0 auto;border:3px solid #fff;box-shadow:0 0 0 2px var(--line),0 8px 18px rgba(37,48,79,.12)}
.ily .tt .ph.round img{object-fit:cover}
.ily .tt figcaption{margin-top:14px}
.ily .tt figcaption b{display:block;font-size:15px;color:var(--navy)}
.ily .tt figcaption small{display:block;color:var(--ink2);font-size:12.5px;margin-top:2px}
@media(max-width:760px){.ily .teach{grid-template-columns:repeat(2,1fr)}
.ily .tt .ph.round{width:112px}}

/* 문해력(TED-Ed) 카드 — 교재 페이지 사진은 위쪽(제목 + 사진)이 보이게 */
.ily .ph[data-img="c4"] img{object-position: top;}

/* 섹션 배경 변화 (2026-10-04) — 같은 계열 크림에서 살구 · 연한 하늘 · 버터 · 흰색을 번갈아 */
.ily{--bg-cream:#FFFAF7; --bg-peach:#FFF0E8; --bg-sky:#F2F6FF; --bg-butter:#FFF8E8; --bg-white:#FFFFFF;}
.ily section:nth-of-type(3){background:var(--bg-cream);}
.ily section:nth-of-type(4){background:var(--bg-sky);}
.ily section:nth-of-type(5){background:var(--bg-white);}
.ily section:nth-of-type(6){background:var(--bg-peach); --ground:var(--bg-peach);}
.ily section:nth-of-type(7){background:var(--bg-butter);}
.ily section:nth-of-type(8){background:var(--bg-sky);}
.ily section:nth-of-type(9){background:var(--bg-white);}
.ily section:nth-of-type(10){background:var(--bg-cream);}
.ily section:nth-of-type(11){background:var(--bg-white);}
.ily section:nth-of-type(12){background:#FFEDE6;}