/* HP-237 LMS 상세 페이지 — ES 디자인 시스템 토큰 · 모든 규칙은 .lms-page 안에서만 적용 */

/* ===== ES design system tokens (handoff tokens/*.css) ===== */
.lms-page{
  /* lms page tokens */
  --es-navy:#15427B; --es-sky:#00A0DB; --es-charcoal:#343433;
  --es-light-gray:#D8D8D8; --es-mid-gray:#BFBFBF; --es-white:#FFFFFF;
  --es-navy-900:#0C2B52; --es-navy-600:#1E5599; --es-sky-200:#A7DDF1;
  --tint:#F3F6FA; --muted:#6b6b6b;
  --font-core:"Noto Sans KR","Noto Sans",sans-serif; --font-latin:"Noto Sans",sans-serif;
  --rule:3px; --wrap:1200px; --gutter:24px;
}
.lms-page{background:var(--es-white);color:var(--es-charcoal);font-family:var(--font-core);font-size:16px;line-height:1.75;word-break:keep-all;-webkit-font-smoothing:antialiased}
.lms-page *{box-sizing:border-box}
.lms-page img{max-width:100%;display:block}
.lms-page a{color:var(--es-navy)} .lms-page a:hover{color:var(--es-sky)}
.lms-page .latin{font-family:var(--font-latin)}
.lms-page .wrap{max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.lms-page /* ----- page ----- */
.crumb{font-size:13px;color:var(--muted);padding:20px 0 0}
.lms-page .crumb a{color:var(--muted);text-decoration:none}
.lms-page .crumb a:hover{color:var(--es-navy)}
.lms-page .eyebrow{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--es-sky);margin:0 0 8px}
.lms-page h1{font-size:44px;line-height:1.3;color:var(--es-navy);margin:0 0 24px;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.lms-page h2{font-size:30px;line-height:1.4;color:var(--es-navy);margin:0 0 16px;font-weight:700;text-wrap:balance}
.lms-page h3{font-size:19px;line-height:1.45;color:var(--es-navy);margin:0 0 6px;font-weight:700}
.lms-page p{margin:0 0 12px;text-wrap:pretty}
.lms-page .lead{font-size:18px;line-height:1.8;max-width:760px}
.lms-page section.block{padding:88px 0}
.lms-page section.tint{background:var(--tint)}
.lms-page .intro{max-width:780px;margin-bottom:40px}
.lms-page .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.lms-page .btn{display:inline-block;padding:13px 26px;font-weight:700;font-size:15px;text-decoration:none;border:1px solid var(--es-navy)}
.lms-page .btn-solid{background:var(--es-navy);color:#fff}
.lms-page .btn-solid:hover{background:var(--es-navy-600);color:#fff}
.lms-page .btn-outline{background:#fff;color:var(--es-navy)}
.lms-page .btn-outline:hover{color:var(--es-sky);border-color:var(--es-sky)}
.lms-page /* screenshots */
figure{margin:0}
.lms-page .shot{border:1px solid var(--es-light-gray);background:#fff;overflow:hidden}
.lms-page .shot img{width:100%;height:auto}
.lms-page figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.lms-page /* hero */
.hero{padding:40px 0 0}
.lms-page .hero-band{background:var(--es-navy);margin-top:56px;padding:0 0 48px;color:#fff}
.lms-page .hero-band .shot{box-shadow:0 12px 32px rgba(12,43,82,.28);transform:translateY(-40px);margin-bottom:-16px;border-color:rgba(255,255,255,.2)}
.lms-page .hero-band figcaption{color:var(--es-sky-200);margin:-8px 0 32px}
.lms-page .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.lms-page .stat .num{font-size:44px;font-weight:700;line-height:1;font-family:var(--font-latin)}
.lms-page .stat .num small{font-size:17px;font-family:var(--font-core);margin-left:4px}
.lms-page .stat .sub{font-size:14px;color:var(--es-sky-200);margin-top:10px}
.lms-page .hero-note{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.35);font-size:15px}
.lms-page .hero-note a{color:#fff;text-decoration:none}
.lms-page .hero-note a:hover{color:var(--es-sky-200)}
.lms-page /* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.lms-page .step{border-top:var(--rule) solid var(--es-navy);padding-top:16px}
.lms-page .step:last-child{border-top-color:var(--es-sky)}
.lms-page .step .n{font-family:var(--font-latin);font-weight:700;color:var(--es-navy);font-size:15px}
.lms-page .step h3{font-size:22px;margin:2px 0 6px}
.lms-page .step p{font-size:15px;color:var(--es-charcoal)}
.lms-page /* two-column feature + shots */
.feature{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.lms-page .shots-2{display:grid;gap:24px}
.lms-page .shots-2.player{grid-template-columns:3fr 1fr;align-items:start}
.lms-page .shots-2.admin{grid-template-columns:1fr}
.lms-page .shots-2.cert{grid-template-columns:1fr 2.2fr;align-items:start}
.lms-page /* ruled items (운영·플랫폼·항공·솔루션) */
.ruled{display:grid;gap:32px}
.lms-page .cols-2{grid-template-columns:repeat(2,1fr)}
.lms-page .cols-3{grid-template-columns:repeat(3,1fr)}
.lms-page .item{border-top:var(--rule) solid var(--es-navy);padding-top:16px}
.lms-page .item .tag{font-size:14px;color:var(--muted);margin:0 0 10px}
.lms-page .item p{font-size:15.5px}
.lms-page .chip{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;margin-left:8px;vertical-align:3px;border:1px solid var(--es-navy);color:var(--es-navy);background:#fff}
.lms-page .chip.soon{border-color:var(--es-mid-gray);color:var(--muted)}
.lms-page /* contact */
.contact{background:var(--es-navy);color:#fff}
.lms-page .contact h2{color:#fff}
.lms-page .contact .eyebrow{color:var(--es-sky-200)}
.lms-page .contact dl{display:grid;grid-template-columns:auto 1fr;gap:8px 28px;margin:28px 0 0;font-size:17px}
.lms-page .contact dt{color:var(--es-sky-200)}
.lms-page .contact dd{margin:0}
.lms-page .contact a{color:#fff}
.lms-page .contact a:hover{color:var(--es-sky-200)}
.lms-page .contact .co{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.35);font-size:14px;color:#dfe7f1}
.lms-page .contact .btn{background:#fff;color:var(--es-navy);border-color:#fff}
.lms-page .contact .btn:hover{background:var(--es-sky-200);color:var(--es-navy-900)}
.lms-page .contact-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:end}
/* responsive */
@media (max-width:1024px){.lms-page h1{font-size:36px}
.lms-page h2{font-size:26px}
.lms-page .feature{grid-template-columns:1fr;gap:32px}
.lms-page .contact-grid{grid-template-columns:1fr;gap:24px}}
@media (max-width:760px){.lms-page{--gutter:16px}
.lms-page body{font-size:15px}
.lms-page h1{font-size:28px}
.lms-page h2{font-size:22px}
.lms-page .lead{font-size:16px}
.lms-page section.block{padding:56px 0}
.lms-page .stats,.lms-page .steps{grid-template-columns:repeat(2,1fr);gap:28px 16px}
.lms-page .stat .num{font-size:34px}
.lms-page .cols-2,.lms-page .cols-3{grid-template-columns:1fr}
.lms-page .shots-2.player{grid-template-columns:1fr}
.lms-page .shots-2.player figure:last-child{max-width:260px}
.lms-page .shots-2.cert{grid-template-columns:1fr}
.lms-page .shots-2.cert figure:first-child{max-width:320px}
.lms-page .hero-band .shot{transform:translateY(-24px)}
.lms-page .contact dl{grid-template-columns:1fr;gap:2px}
.lms-page .contact dd{margin-bottom:10px}}.lms-page .contact-cta{margin-top:36px}