/* ===== HBMIC main v6 - every rule is scoped inside .hb-main ===== */
.hb-main{
--navy:#112C70; --navy2:#1B2F63; --light:#D1D9EF; --lime:#C4D835; --white:#FFFFFF;
--gut:clamp(20px,3.6vw,56px);
position:relative; overflow-x:clip; background:var(--white); color:var(--navy);
font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
-webkit-font-smoothing:antialiased; letter-spacing:-0.02em; line-height:1.5;
}
.hb-main *,.hb-main *::before,.hb-main *::after{box-sizing:border-box}
.hb-main a{color:inherit;text-decoration:none}
.hb-main button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.hb-main h1,.hb-main h2,.hb-main h3,.hb-main p,.hb-main ol,.hb-main ul{margin:0;padding:0}
.hb-main ol,.hb-main ul{list-style:none}
.hb-main :focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}

/* ---------- hero ---------- */
.hb-hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(20px,2.2vw,34px) var(--gut) 0}

/* background (video slot) */
.hb-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#F6F4FB}
.hb-bg canvas,.hb-bg video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.hb-bg__video,.hb-bg__src{opacity:0;pointer-events:none}
.hb-bg.no-gl .hb-bg__src{opacity:1}
.hb-bg.no-gl.has-video .hb-bg__video{opacity:1}
.hb-bg.no-gl .hb-bg__gl{display:none}
.hb-bg__tag{position:absolute;right:12px;bottom:10px;font-size:11px;line-height:1;padding:5px 8px;border-radius:99px;background:rgba(255,255,255,.75);color:var(--navy2);letter-spacing:0}
.hb-bg.has-video .hb-bg__tag{display:none}

/* header */
.hb-head{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:2}
.hb-head__logo{display:block;line-height:0}
.hb-head__logo svg{height:clamp(22px,1.9vw,28px);width:auto;color:var(--navy)}
.hb-head__actions{display:flex;align-items:center;gap:16px}
.hb-main .hb-btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:99px;background:var(--navy);color:var(--white);font-size:15px;font-weight:600;letter-spacing:-0.01em;will-change:transform}
.hb-main .hb-menu-btn{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(17,44,112,.14);display:inline-grid;place-items:center;will-change:transform}
.hb-menu-btn__lines{display:grid;gap:6px;width:18px}
.hb-menu-btn__lines i{display:block;height:1.5px;background:var(--navy);border-radius:2px}

/* language picker (client: .gtranslate_wrapper a[data-gt-lang]) */
.hb-lang{position:relative}
.hb-main .hb-lang__btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:99px;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(17,44,112,.14);font-size:14px;font-weight:600;letter-spacing:0;will-change:transform}
.hb-lang__btn svg{width:16px;height:16px;display:block}
.hb-main .hb-lang__list{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;padding:8px;border-radius:18px;background:var(--white);box-shadow:0 18px 40px rgba(17,44,112,.16),inset 0 0 0 1px rgba(17,44,112,.08);display:grid;gap:2px;z-index:5}
.hb-main .hb-lang__list[hidden]{display:none}
.hb-lang__list a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 14px;border-radius:12px;font-size:15px;font-weight:500;color:var(--navy2)}
.hb-lang__list a:hover,.hb-lang__list a:focus-visible{background:#F1F3FA}
.hb-lang__list a.gt-current-lang{color:var(--navy);font-weight:700}
.hb-lang__list a.gt-current-lang::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy)}

/* headline */
.hb-hero__body{align-self:center;position:relative;z-index:1;padding:clamp(32px,6vh,72px) 0}
.hb-main .hb-eyebrow{font-size:clamp(16px,1.45vw,22px);font-weight:500;color:var(--navy2);letter-spacing:-0.01em;margin-bottom:clamp(14px,2vh,24px)}
.hb-title{font-size:clamp(38px,5.1vw,98px);line-height:1.1;word-break:keep-all;letter-spacing:-0.025em;color:var(--navy);font-weight:800}
.hb-title__logo{display:block;line-height:0;margin-bottom:.16em}
.hb-title__logo svg{height:.74em;width:auto;color:var(--navy);overflow:visible}
.hb-title__l1{display:block;font-weight:800}
.hb-title__l2{display:block;font-weight:300;color:var(--navy2);font-variant-numeric:tabular-nums}
.hb-w{display:inline-block;white-space:nowrap}
.hb-ch{display:inline-block;white-space:pre}
.hb-roll{display:inline-block;height:1.1em;overflow:hidden;vertical-align:bottom;white-space:nowrap;font-variant-numeric:tabular-nums}
.hb-roll__col{display:inline-block;vertical-align:top;text-align:center;overflow:hidden;height:1.1em}
.hb-roll__col span{display:block;height:1.1em;line-height:1.1em}

/* big links below */
.hb-links{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);padding-bottom:clamp(36px,6vh,64px);position:relative;z-index:1}
.hb-big{display:inline-flex;align-items:center;gap:.28em;justify-self:start;position:relative;padding:.08em 0 .14em;font-size:clamp(28px,2.9vw,46px);font-weight:300;line-height:1.1;letter-spacing:-0.025em;will-change:transform}
.hb-big__a{display:inline-block;width:.72em;height:.72em;line-height:0}
.hb-big__a svg{width:100%;height:100%;display:block;overflow:visible}
.hb-big__u{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(17,44,112,.22)}
.hb-big__u::after{content:"";position:absolute;inset:0;background:var(--navy);transform:scaleX(var(--u,0));transform-origin:var(--uo,left)}

/* sparkles */
.hb-sparks{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.hb-spark{position:absolute;display:block;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}

/* hero opened */
.hb-intro{display:none}
.hb-main.js:not(.rm) .hb-intro{display:grid;place-items:center;position:fixed;inset:0;z-index:80;background:var(--white)}
.hb-intro svg{width:min(46vw,340px);height:auto;overflow:visible}
.hb-intro path{fill:var(--navy);fill-opacity:0;stroke:var(--navy);stroke-width:.7}

/* initial state before intro (only when JS is on and reduced motion is off) */
.hb-main.js:not(.rm) .hb-head > *,
.hb-main.js:not(.rm) .hb-hero .hb-eyebrow,
.hb-main.js:not(.rm) .hb-title__logo,
.hb-main.js:not(.rm) .hb-big,
.hb-main.js:not(.rm) .hb-step{opacity:0}
.hb-main.js:not(.rm) .hb-title__l1,
.hb-main.js:not(.rm) .hb-title__l2{visibility:hidden}

/* ---------- menu ---------- */
.hb-menu{position:fixed;inset:0;z-index:70;background:var(--navy);color:var(--white);display:grid;grid-template-rows:auto 1fr auto;padding:clamp(20px,2.2vw,34px) var(--gut) clamp(24px,4vh,44px);overflow-y:auto}
.hb-menu[hidden]{display:none}
.hb-menu > nav{align-self:center}
.hb-menu__top{display:flex;justify-content:space-between;align-items:center}
.hb-menu__top svg{height:clamp(22px,1.9vw,28px);width:auto;color:var(--white)}
.hb-main .hb-menu__close{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(209,217,239,.4);font-size:15px;font-weight:500}
.hb-menu :focus-visible{outline-color:var(--lime)}
.hb-main .hb-menu__list{align-self:center;display:grid;gap:clamp(4px,1.2vh,14px);padding:32px 0}
.hb-menu__list li{overflow:hidden}
.hb-menu__list a{display:inline-flex;align-items:baseline;gap:clamp(14px,2vw,32px);font-size:clamp(40px,6.6vw,104px);font-weight:700;line-height:1.12;letter-spacing:-0.03em}
.hb-menu__in{display:inline-flex;align-items:baseline;gap:inherit}
.hb-menu__no{font-size:clamp(13px,1vw,16px);font-weight:500;color:var(--light);letter-spacing:0;transform:translateY(-.4em)}
.hb-menu__t{position:relative}
.hb-menu__t::before{content:"";position:absolute;left:-.42em;top:50%;width:.16em;height:.16em;margin-top:-.08em;border-radius:50%;background:var(--lime);transform:scale(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.hb-menu__list a:hover .hb-menu__t::before,.hb-menu__list a:focus-visible .hb-menu__t::before{transform:scale(1)}
.hb-menu__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:14px;color:var(--light);font-weight:400}
.hb-menu__lang{display:flex;flex-wrap:wrap;gap:4px 18px}
.hb-menu__lang a{color:var(--light);font-weight:500;padding:4px 0}
.hb-menu__lang a:hover{color:var(--white)}
.hb-menu__lang a.gt-current-lang{color:var(--white);box-shadow:inset 0 -1px 0 var(--lime)}

/* ---------- process preview ---------- */
.hb-process{padding:clamp(80px,13vh,150px) var(--gut) clamp(96px,15vh,170px);background:var(--white)}
.hb-process__head{margin-bottom:clamp(40px,7vh,80px)}
.hb-process__title{font-size:clamp(28px,3vw,48px);font-weight:700;line-height:1.15;letter-spacing:-0.025em}
.hb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px)}
.hb-step{position:relative;padding-top:44px}
.hb-step__dot{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--navy)}
.hb-step__line{position:absolute;top:5.5px;left:22px;right:calc(-1 * clamp(16px,2vw,32px) + 10px);height:1px;background:var(--navy);transform-origin:left center}
.hb-main.js:not(.rm) .hb-step__line{transform:scaleX(0)}
.hb-step__no{display:block;font-size:14px;font-weight:500;color:var(--navy2);margin-bottom:10px;letter-spacing:0}
.hb-step h3{font-size:clamp(22px,1.9vw,30px);font-weight:700;line-height:1.2;margin-bottom:10px}
.hb-step p{font-size:clamp(15px,1.1vw,17px);color:var(--navy2);line-height:1.6;max-width:22em}

/* ---------- footer (shared by every page) ---------- */
/* quiet footer (11/9 20:53): light, small, no lines. Left: logo, company info, copyright. Right: menu. */
.hb-foot{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:start;background:transparent;color:#7A86AA;padding:clamp(32px,5vh,48px) var(--gut) clamp(20px,3vh,28px);font-size:14px;line-height:1.65}
.hb-foot__top{display:contents}
.hb-foot__logo{grid-column:1;display:block;line-height:0;margin-bottom:14px;justify-self:start}
.hb-foot__logo svg{height:18px;width:auto;color:#9AA6C6}
.hb-foot__nav{grid-column:2;grid-row:1 / span 3;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14px;font-weight:500;color:#56648C}
.hb-foot__nav a:hover{color:var(--navy)}
.hb-foot__info{grid-column:1;font-style:normal;word-break:keep-all}
.hb-foot__info strong{color:#56648C;font-weight:600;margin-right:16px}
.hb-foot__info span{display:inline-block;margin-right:16px}
.hb-foot__info a:hover{color:var(--navy)}
.hb-foot__bottom{grid-column:1;margin-top:10px;font-size:12px;color:#9AA6C6}
.hb-foot__bottom p+p{display:none}
.hb-main .hb-foot :focus-visible{outline-color:var(--navy)}
@media (max-width:767px){.hb-foot{grid-template-columns:minmax(0,1fr)}.hb-foot__nav{grid-column:1;grid-row:auto;margin-bottom:12px}}

@media (max-width:767px){
.hb-btn{height:42px;padding:0 18px;font-size:14px}
.hb-main .hb-menu-btn{width:42px;height:42px}
.hb-head__actions{gap:8px}
.hb-main .hb-lang__btn{height:42px;padding:0 12px}
.hb-lang__btn svg{display:none}
.hb-title{font-size:clamp(34px,10.4vw,48px)}
.hb-links{gap:16px}
.hb-big{font-size:clamp(24px,7.4vw,34px)}
.hb-steps{grid-template-columns:1fr;gap:36px}
.hb-step{padding:0 0 0 36px}
.hb-step__line{top:20px;left:5.5px;right:auto;bottom:-30px;width:1px;height:auto;transform-origin:center top}
.hb-main.js:not(.rm) .hb-step__line{transform:scaleY(0)}
}
@media (prefers-reduced-motion:reduce){
.hb-main .hb-intro,.hb-main .hb-sparks{display:none!important}
}

/* 11/9 21:00: one background behind the whole page (footer included), scroll stops are handled by JS (fast glide) */
.hb-hero .hb-bg{position:fixed}
/* ---------- hover motion v2 (11/10): no magnetic pull ---------- */
.hb-big__t{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em 0 .12em;margin:-.08em 0 -.12em}
.hb-big__t .hb-roll{display:inline-block;font-style:normal}
.hb-main .hb-btn,.hb-main .hb-lang__btn,.hb-main .hb-menu-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,color .3s}
.hb-main .hb-lang__btn::before,.hb-main .hb-menu-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--navy);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:-1}
.hb-main .hb-btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));transform:skewX(-18deg);pointer-events:none}
.hb-menu-btn__lines i{transition:background .3s}
@media (hover:hover) and (pointer:fine){
.hb-main .hb-btn:hover,.hb-main .hb-lang__btn:hover,.hb-main .hb-menu-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(17,44,112,.18)}
.hb-main .hb-lang__btn:hover,.hb-main .hb-menu-btn:hover{color:#fff}
.hb-main .hb-lang__btn:hover::before,.hb-main .hb-menu-btn:hover::before{transform:scaleY(1)}
.hb-main .hb-menu-btn:hover .hb-menu-btn__lines i{background:#fff}
.hb-main .hb-btn:hover::after{animation:hbSheen .8s cubic-bezier(.2,.7,.2,1)}
}
.hb-main .hb-btn:active,.hb-main .hb-lang__btn:active,.hb-main .hb-menu-btn:active{transform:translateY(0) scale(.97)}
@keyframes hbSheen{from{left:-70%}to{left:130%}}
@media (prefers-reduced-motion:reduce){.hb-main .hb-btn:hover::after{animation:none}}
/* keep the same page width on every page, with or without a scrollbar (11/10) */
html{scrollbar-gutter:stable}
/* menu logo is a link to the main page (11/10) */
.hb-menu__logo{display:inline-flex;align-items:center;transition:opacity .3s}
.hb-menu__logo:hover{opacity:.75}
.hb-menu__logo:focus-visible{outline:2px solid var(--white);outline-offset:6px;border-radius:4px}

/* 11/11 09:55 main video (A): video fills the hero, a soft light fade on the text side keeps the title readable */
.hb-bg.has-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(247,246,252,.82) 0%,rgba(247,246,252,.55) 34%,rgba(247,246,252,0) 62%)}
@media (max-width:767px){.hb-bg.has-video::after{background:linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.6) 60%,rgba(255,255,255,.2) 100%)}}

/* 11/11 10:55 top-right buttons in the same place on every page (main = reference): top clamp(20px,2.2vw,34px), sides clamp(20px,3.6vw,56px) */
#hbMain .pp-app > .hb-head,#hbMain .app > .hb-head{align-self:start;padding-top:clamp(20px,2.2vw,34px)}
@media (min-width:901px){#hbMain .pp-app,#hbMain .app{grid-template-rows:auto minmax(0,1fr) var(--barH)}
#hbMain .pp-app > .hb-head,#hbMain .app > .hb-head{padding-bottom:8px}}
#hbMain.hb-lib7 .app > .hb-head,#hbMain .hb-lib7 .app > .hb-head{margin-left:calc(clamp(20px,3.6vw,56px) - var(--gut));margin-right:calc(clamp(20px,3.6vw,56px) - var(--gut))}
#hbMain .ab-top{padding-top:calc(clamp(20px,2.2vw,34px) + env(safe-area-inset-top,0px));padding-left:max(clamp(20px,3.6vw,56px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,3.6vw,56px),env(safe-area-inset-right,0px))}
#hbMain .hb-menu{--gut:clamp(20px,3.6vw,56px)}

/* 11/11 11:15 consistency pass (all pages): no lone last word, balanced titles, Korean words kept whole, same side margin as the logo, same small-label style, same body text colour/line height */
#hbMain p,#hbMain li,#hbMain dd,#hbMain dt,#hbMain small,#hbMain figcaption,#hbMain label{text-wrap:pretty;word-break:keep-all}
#hbMain h1,#hbMain h2,#hbMain h3,#hbMain h4{text-wrap:balance;word-break:keep-all}
#hbMain.hb-about,#hbMain.hb-lib7{--gut:clamp(20px,3.6vw,56px)}
#hbMain .pp-count,#hbMain .pp-cap,#hbMain.hb-req .cap,#hbMain.hb-about .lab,#hbMain.hb-lib7 .ttl,#hbMain.hb-lib7 .cap{font-size:15px;font-weight:700;color:#8E9ABD;letter-spacing:0}
#hbMain.hb-req .hint{line-height:1.7}
#hbMain.hb-about .way p,#hbMain.hb-about .qtxt .lead{color:#56648C}
#hbMain.hb-about .qtxt .cty span:nth-child(n+3)::before{content:none}
#hbMain.hb-about .qtxt .cty span:nth-child(n+2):not(:last-child)::after{content:"¡¤";margin-left:12px;color:#8E9ABD}

/* 11/11 12:10 translated pages (process): the big sentence wraps at headline size instead of shrinking to one line; step names may wrap. Phones: the sideways step list fades at its edge */
#hbMain.hb-proc.pp-tr .pp-s{white-space:normal!important;font-size:clamp(28px,2.5vw,42px)!important;width:auto!important;max-width:100%!important}
#hbMain.hb-proc.pp-tr .pp-steps a{white-space:normal;line-height:1.25;align-items:flex-start;padding-right:8px}
#hbMain.hb-proc.pp-tr .pp-steps a span{flex:none}
@media (max-width:900px){#hbMain .pp-bar .pp-steps{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}}

/* 11/11 13:15 process stage 01 now has 6 rows (»ç¾÷ÀÚ Áغñ): tighter row gap on screens up to 960px tall so "´ÙÀ½ ´Ü°è" never touches the bottom bar */
@media (min-width:901px) and (max-height:960px){#hbMain .pp-list{gap:clamp(10px,2vh,22px)!important}#hbMain .pp-list li p{margin-top:2px}}

/* 11/11 13:05 ¸ÞÀΠù È­¸é À̹ÌÁö(poster): ¿µ»ó Àç»ý Àü¿¡´Â ù Àå¸é »çÁø, Àç»ýµÇ¸é ¿µ»ó */
.hb-bg.hb-poster{background:#F6F4FB url(../img/hbimg/hbmic_main_bg_final_poster.jpg) center/cover no-repeat}
.hb-bg.hb-poster:not(.has-video) canvas{opacity:0}
.hb-bg.hb-poster .hb-bg__tag{display:none}
.hb-bg.hb-poster::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(247,246,252,.82) 0%,rgba(247,246,252,.55) 34%,rgba(247,246,252,0) 62%)}
@media (max-width:767px){.hb-bg.hb-poster::after{background:linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.6) 60%,rgba(255,255,255,.2) 100%)}}
/* 11/11 13:30 speed: mouse still -> real video shown directly, ripple canvas only while the mouse moves */
.hb-bg__gl{transition:opacity .25s}
.hb-bg.has-video.hb-idle .hb-bg__video{opacity:1}
.hb-bg.has-video.hb-idle .hb-bg__gl{opacity:0}
/* 11/11 mobile: no tap highlight box */
.hb-main a,.hb-main button,.hb-main [role=button]{-webkit-tap-highlight-color:transparent}