:root{--navy:#0d1b33;--ink:#172033;--muted:#4b5872;--line:#e4e9f2;--radius:26px;--shadow:0 26px 64px rgba(13,27,51,.2)}
:root{--blue:#1859d6;--blue-dark:#0f3f9e;--blue-tint:#eaf1ff;--blue-tint-2:#d7e6ff;--green:#0f9d63;--green-dark:#0c7d4f;--green-tint:#e7faf1;--green-tint-2:#cdf2e2}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:'Noto Sans KR',sans-serif;overflow:hidden}
.section-shell{width:min(1280px,calc(100% - 56px));margin:0 auto}
.intro-page{display:flex;flex-direction:column;height:100dvh;height:100vh}

.intro-header{flex:0 0 auto;padding:22px 0 0}
.intro-header .section-shell{display:flex;align-items:center}
.intro-header .brand{display:flex;align-items:center;text-decoration:none}
.intro-header .brand img{display:block;height:clamp(38px,5.2vh,54px);width:auto}
.intro-header .brand-kr{margin-left:11px;padding-left:11px;border-left:1.5px solid var(--line);color:var(--navy);font-weight:800;font-size:clamp(16px,2.2vh,20px);letter-spacing:-.01em}

.intro-hero{flex:0 0 auto;padding:16px 0 22px;text-align:center}
.intro-eyebrow{color:var(--blue);font-family:'DM Mono',monospace;font-size:clamp(11px,1.15vw,13px);letter-spacing:.18em;font-weight:800;margin:0 0 12px;text-transform:uppercase}
.intro-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.2;letter-spacing:-.03em;margin:0 auto;max-width:840px;color:var(--navy);font-weight:800}
.intro-hero h1 em{color:var(--blue);font-style:normal}
.intro-hero p{max-width:580px;margin:14px auto 0;color:var(--muted);font-size:clamp(14px,1.3vw,16.5px)}

.intro-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:18px}
.intro-card{position:relative;display:flex;flex-direction:column;min-height:0;padding:clamp(28px,4vh,46px) clamp(30px,3.4vw,50px);border-radius:var(--radius);text-decoration:none;color:inherit;overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.intro-card:hover{transform:translateY(-7px) scale(1.008);box-shadow:var(--shadow)}
.intro-card:active{transform:translateY(-2px) scale(1)}
.card-notice{background:linear-gradient(150deg,var(--blue-tint) 0%,var(--blue-tint-2) 100%);border:1px solid #cbdefb}
.card-econtract{background:linear-gradient(150deg,var(--green-tint) 0%,var(--green-tint-2) 100%);border:1px solid #bfeed6}

/* 마스코트 캐릭터 — 여백을 채우는 카드별 브랜드 포인트. 새로 그리지 않고
   사이트에 이미 있는 실제 자산(노트북 히어로의 로켓 마스코트, 체크리스트 손)을 재사용한다. */
.mascot-stage{position:absolute;right:clamp(-6px,-0.5vw,4px);bottom:clamp(-10px,-1vh,0px);width:clamp(110px,16vh,200px);pointer-events:none}
.mascot-ground-glow{position:absolute;left:54%;bottom:8%;width:70%;height:14%;border-radius:50%;transform:translateX(-50%);filter:blur(3px);animation:mascotGlowPulse 3.4s ease-in-out infinite}
.card-notice .mascot-ground-glow{background:radial-gradient(ellipse,rgba(24,89,214,.32),rgba(24,89,214,0) 72%)}
.card-econtract .mascot-ground-glow{background:radial-gradient(ellipse,rgba(15,157,99,.32),rgba(15,157,99,0) 72%)}
@keyframes mascotGlowPulse{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:.85;transform:translateX(-50%) scale(1.1)}}
.mascot-img{display:block;position:relative;width:100%;height:auto;filter:drop-shadow(0 14px 16px rgba(13,27,51,.2));animation:mascotFloat 3.8s ease-in-out infinite}
@keyframes mascotFloat{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(2deg) translateY(-10px)}}
.intro-card:hover .mascot-img{animation:mascotPop .85s cubic-bezier(.34,1.56,.64,1) infinite alternate}
@keyframes mascotPop{0%{transform:rotate(-4deg) translateY(0) scale(1)}100%{transform:rotate(3deg) translateY(-16px) scale(1.07)}}

.intro-card-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;flex:0 0 auto}
.intro-card-icon{width:clamp(60px,8vh,84px);height:clamp(60px,8vh,84px);border-radius:20px;display:grid;place-items:center;font-size:clamp(28px,3.8vh,40px);box-shadow:0 10px 22px rgba(0,0,0,.1)}
.card-notice .intro-card-icon{background:#fff;color:var(--blue)}
.card-econtract .intro-card-icon{background:#fff;color:var(--green)}
.intro-card-badge{font-family:'DM Mono',monospace;font-size:clamp(11px,1.3vh,13px);font-weight:800;letter-spacing:.04em;padding:8px 14px;border-radius:99px}
.card-notice .intro-card-badge{background:#fff;color:#a5670a}
.card-econtract .intro-card-badge{background:#fff;color:var(--green-dark)}

.intro-card-body{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.3vh,12px);padding:clamp(14px,3vh,26px) 0}
.intro-card-tag{font-family:'DM Mono',monospace;font-size:clamp(12px,1.4vh,13.5px);letter-spacing:.06em;text-transform:uppercase;margin:0;font-weight:800}
.card-notice .intro-card-tag{color:var(--blue-dark)}
.card-econtract .intro-card-tag{color:var(--green-dark)}
.intro-card h2{font-size:clamp(28px,4.4vh,42px);letter-spacing:-.03em;margin:2px 0 0;color:var(--navy);font-weight:800;line-height:1.15}
.intro-card p.intro-card-desc{margin:0;color:#2b3550;font-size:clamp(14.5px,2vh,17.5px);line-height:1.6;max-width:42ch;font-weight:500}

.intro-steps{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(6px,1.4vh,11px);margin:0;padding:0;list-style:none;flex:0 0 auto}
.intro-steps li{display:flex;align-items:center;gap:11px;font-size:clamp(14px,1.9vh,16.5px);color:#1e2740;font-weight:700}
.intro-steps b{flex:0 0 auto;width:clamp(24px,3vh,28px);height:clamp(24px,3vh,28px);border-radius:50%;display:grid;place-items:center;background:#fff;font-size:clamp(12px,1.5vh,13.5px);font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.card-notice .intro-steps b{color:var(--blue-dark)}
.card-econtract .intro-steps b{color:var(--green-dark)}

.intro-card-cta{position:relative;z-index:1;margin-top:clamp(16px,2.6vh,28px);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:clamp(15px,2vh,18px);color:#fff;padding:clamp(13px,2.2vh,18px) 26px;border-radius:14px;width:fit-content;transition:gap .2s}
.card-notice .intro-card-cta{background:var(--blue);box-shadow:0 12px 26px rgba(24,89,214,.32)}
.card-econtract .intro-card-cta{background:var(--green);box-shadow:0 12px 26px rgba(15,157,99,.32)}
.intro-card:hover .intro-card-cta{gap:14px}

.intro-footer{flex:0 0 auto;padding:12px 0 16px}
.intro-footer .section-shell{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}
.intro-footer p{margin:0;color:#5c6b85;font-size:12px;font-weight:600;line-height:1.6}
.intro-footer a{color:#3d4a63;text-decoration:none;font-weight:700}
.intro-footer a:hover{text-decoration:underline}

@media(max-height:760px){
  .intro-card p.intro-card-desc{display:none}
}
@media(max-height:620px),(max-width:760px){
  body{overflow:auto}
  .intro-page{height:auto;min-height:100vh}
  .intro-grid{grid-template-columns:1fr;gap:18px}
  .intro-card p.intro-card-desc{display:block}
}
@media(max-width:760px){
  .intro-hero h1{font-size:28px}
}