/* ===== HBMIC process page v2 (2026-11-09 sian v17) - uses hbmain.css tokens, background from hbfx.js =====
Plan: one screen = header / stage / step bar. Stage = left (where you are, one message, picture in a fixed slot)
+ right (what happens in this stage, next link). No boxes, borders, chips or cards. */
.hb-proc{background:transparent!important;--ink:#56648C;--mute:#9AA6C6;--faint:rgba(17,44,112,.12);--cg:clamp(16px,2vw,32px);--headH:88px;--barH:92px}
.hb-proc .pp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pp-app{height:100vh;height:100svh;display:grid;grid-template-rows:var(--headH) minmax(0,1fr) var(--barH);padding:0 var(--gut)}
.pp-app > .hb-head{align-self:center}
.pp-stages{display:grid;min-height:0}
.pp-st{grid-area:1/1;display:none;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);min-height:0}
.pp-st.on{display:grid}
/* before the script runs only stage 01 shows (no overlap). Without script, a stage link (#id) shows that stage. */
.no-pjs .pp-st:target{display:grid}
.no-pjs .pp-stages:has(.pp-st:target) .pp-st.on:not(:target){display:none}

/* left */
.pp-l{grid-column:1/6;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);min-height:0;padding-top:clamp(24px,5vh,56px)}
.pp-l > *{min-width:0}
.hb-proc .pp-count{font-size:15px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:0}
.hb-proc .pp-count b{color:var(--navy);font-weight:800}
.hb-proc .pp-q{margin-top:clamp(18px,3vh,28px);font-size:clamp(18px,1.45vw,23px);font-weight:300;line-height:1.3;color:var(--navy2);letter-spacing:-0.03em}
.hb-proc .pp-s{display:block;margin-top:6px;font-size:var(--ppS,clamp(30px,2.9vw,46px));font-weight:800;line-height:1.22;letter-spacing:-0.04em;color:var(--navy);word-break:keep-all}
.pjs-fit .pp-s{white-space:nowrap}
.hb-proc .pp-d{margin-top:clamp(14px,2.4vh,22px);max-width:30em;font-size:clamp(15px,1.1vw,17px);line-height:1.7;color:var(--ink);word-break:keep-all}
.pp-faqw.none{visibility:hidden}
.hb-proc .pp-faqbtn{margin-top:clamp(16px,2.6vh,24px);display:inline-flex;align-items:baseline;gap:.5em;font-size:16px;font-weight:600;color:var(--navy)}
.hb-proc .pp-faqbtn span{color:var(--mute);font-weight:500}
.hb-proc .pp-faqbtn i{font-style:normal;font-weight:300;font-size:20px;line-height:1;color:var(--navy2)}
/* fixed picture slot: same size and floor line on every stage */
.hb-proc .pp-ill{align-self:end;justify-self:start;margin:0 0 clamp(8px,2vh,24px);width:min(100%,calc((100vh - var(--headH) - var(--barH)) * .62),520px);aspect-ratio:900/620}
.hb-proc .pp-ill img{display:block;width:100%;height:100%;object-fit:contain}

/* right */
.pp-r{grid-column:7/13;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--faint) transparent;padding:clamp(24px,5vh,56px) 4px 40px 0}
.hb-proc .pp-cap{font-size:15px;font-weight:600;color:var(--mute);letter-spacing:-0.01em}
.hb-proc .pp-list{margin-top:clamp(18px,3vh,28px);display:grid;gap:clamp(22px,3.6vh,34px)}
.hb-proc .pp-list.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);row-gap:clamp(22px,3.6vh,34px)}
.hb-proc .pp-list li{display:grid;grid-template-columns:2.4em minmax(0,1fr);column-gap:16px}
.hb-proc .pp-n{font-size:clamp(18px,1.4vw,22px);font-weight:300;color:var(--mute);font-variant-numeric:tabular-nums;line-height:1.3}
.hb-proc .pp-list h3{font-size:clamp(18px,1.4vw,22px);font-weight:700;line-height:1.3;letter-spacing:-0.03em;word-break:keep-all;color:var(--navy)}
.hb-proc .pp-list h3 small{font-size:13px;font-weight:600;color:var(--mute);margin-left:8px;letter-spacing:0;vertical-align:2px}
.hb-proc .pp-list p{margin-top:6px;font-size:clamp(15px,1.05vw,16px);line-height:1.7;color:var(--ink);word-break:keep-all;max-width:34em}
.hb-proc .pp-next{display:inline-flex;align-self:flex-start;align-items:baseline;gap:.5em;margin-top:auto;padding-top:clamp(24px,4vh,40px);font-size:clamp(20px,1.6vw,26px);font-weight:300;color:var(--navy2);white-space:nowrap}
.hb-proc .pp-next b{font-weight:800;color:var(--navy)}
.hb-proc .pp-next svg{width:.8em;height:.8em;align-self:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hb-proc .pp-next:hover svg{transform:translateX(5px)}
.hb-proc .pp-next.end .pp-go{display:inline-flex;align-items:center;gap:.4em;font-size:clamp(26px,2.3vw,38px);line-height:1.2;letter-spacing:-0.03em}
.hb-proc .pp-next.end .pp-go svg{width:.7em;height:.7em}

/* bottom bar */
.pp-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--cg)}
.pp-steps{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding-top:14px}
.pp-steps::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--faint);border-radius:2px}
.pp-steps::after{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--p,1) / 6 * 100%);background:var(--navy);border-radius:2px;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.hb-proc .pp-steps a{display:flex;align-items:baseline;gap:8px;padding:6px 0;font-size:clamp(14px,1.05vw,16px);font-weight:500;color:#6F7CA3;white-space:nowrap;transition:color .3s}
.hb-proc .pp-steps a span{font-size:.85em;font-variant-numeric:tabular-nums}
.hb-proc .pp-steps a:hover{color:var(--navy2)}
.hb-proc .pp-steps a[aria-current="step"]{color:var(--navy);font-weight:800}

/* FAQ side sheet */
.pp-sheet{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:minmax(0,1fr) min(520px,100%)}
.pp-sheet[hidden]{display:none}
.pp-sheet__dim{background:rgba(17,44,112,.18);opacity:0;transition:opacity .4s}
.pp-sheet__in{background:#fff;padding:max(28px,env(safe-area-inset-top,0px)) max(32px,env(safe-area-inset-right,0px)) 40px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .55s cubic-bezier(.2,.7,.2,1);box-shadow:-30px 0 80px rgba(17,44,112,.12)}
.pp-sheet.on .pp-sheet__dim{opacity:1}.pp-sheet.on .pp-sheet__in{transform:none}
.pp-sheet__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(24px,5vh,48px)}
.hb-proc .pp-sheet__top p{font-size:15px;font-weight:600;color:var(--mute)}
.hb-proc .pp-sheet__top button{font-size:15px;font-weight:600;color:var(--navy);padding:10px 0}
.hb-proc .pp-sheet h2{font-size:clamp(24px,2vw,30px);font-weight:800;letter-spacing:-0.03em;margin-bottom:clamp(20px,4vh,36px);color:var(--navy)}
.pp-faq[hidden]{display:none}
.hb-proc .pp-faq{display:grid;gap:clamp(22px,4vh,34px);margin:0}
.hb-proc .pp-faq dt{font-size:18px;font-weight:700;line-height:1.4;color:var(--navy);display:grid;grid-template-columns:1.6em minmax(0,1fr)}
.hb-proc .pp-faq dt span{font-weight:300;color:var(--mute)}
.hb-proc .pp-faq dd{margin:8px 0 0;padding-left:1.6em;font-size:16px;line-height:1.7;color:var(--ink);word-break:keep-all}

/* short PC screens */
@media (min-width:901px) and (max-height:800px){
.hb-proc{--headH:72px;--barH:80px}
.pp-l,.pp-r{padding-top:clamp(12px,3vh,32px)}
.hb-proc .pp-q{margin-top:12px}
.hb-proc .pp-list{margin-top:10px;gap:14px}.hb-proc .pp-list.two{row-gap:14px}
.hb-proc .pp-list h3{font-size:18px}.hb-proc .pp-list p{font-size:14px;line-height:1.5;margin-top:4px}
.hb-proc .pp-next{padding-top:12px}
}
/* phones and tablets: stack, bar sticks to the bottom */
@media (max-width:900px){
.pp-app{height:auto;min-height:100svh;grid-template-rows:auto auto auto}
.pp-app > .hb-head{padding-block:16px}
.pp-st{grid-template-columns:minmax(0,1fr)}
.pp-l,.pp-r{grid-column:1}
.pp-l{grid-template-rows:none;padding-top:16px}
.hb-proc .pp-ill{width:min(100%,360px);justify-self:end;margin-top:16px}
.pp-r{overflow:visible;padding-top:24px}
.hb-proc .pp-list.two{grid-template-columns:minmax(0,1fr)}
.hb-proc .pp-next{white-space:normal}
.hb-proc .pp-next.end{flex-direction:column;gap:4px}
.pp-bar{position:sticky;bottom:0;z-index:5;padding-block:10px max(14px,env(safe-area-inset-bottom,0px));background:rgba(247,246,252,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin:0 calc(var(--gut) * -1);padding-inline:var(--gut)}
.pp-steps{grid-template-columns:repeat(6,auto);overflow-x:auto;scrollbar-width:none;column-gap:18px;padding-top:0}
.pp-steps::-webkit-scrollbar{display:none}
.pp-steps::after,.pp-steps::before{display:none}
.pp-bar .hb-btn{height:44px;padding:0 18px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.pp-sheet__in,.pp-sheet__dim,.pp-steps::after{transition:none}}

/* big heading colour: navy -> indigo -> violet (11/10 B) */
.hb-proc .pp-s{background:linear-gradient(100deg,#112C70 0%,#112C70 25%,#3A4FC4 65%,#7B5CE6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content!important;max-width:100%!important;padding-bottom:.08em}
/* last step lead text same size as the link (11/10) */
.hb-proc .pp-next.end{flex-wrap:wrap;row-gap:4px;white-space:normal}
.hb-proc .pp-next.end>span{font-size:clamp(26px,2.3vw,38px);line-height:1.2;letter-spacing:-0.03em;white-space:nowrap}
.hb-proc .pp-next.end .pp-go{white-space:nowrap}
/* 2026-11-10 TV: ±×¶óµ¥ÀÌ¼Ç ±ÛÀÚ »óÀÚ°¡ ±ÛÀÚº¸´Ù Á¼¾Æ µÚÂÊÀÌ ¾È º¸ÀÌ´ø ¹®Á¦ */
.hb-proc .pp-s{max-width:none!important}
/* 11/11 14:40 photo reveal test: drawing shows the matching photo only around the cursor; touch = whole photo while pressed */
.hb-proc .pp-ill{position:relative}
.hb-proc .pp-ill img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pp-ph{position:absolute;inset:0;pointer-events:none;background:center/100% 100% no-repeat;opacity:0;transition:opacity .35s ease;-webkit-mask-image:radial-gradient(circle var(--r,100px) at var(--x,50%) var(--y,50%),#000 55%,transparent 100%);mask-image:radial-gradient(circle var(--r,100px) at var(--x,50%) var(--y,50%),#000 55%,transparent 100%)}
.pp-ph.on{opacity:1}
.pp-ph.all{-webkit-mask-image:none;mask-image:none}
.pp-ph[data-n="1"]{background-image:url(../img/hbimg/proc01-mat3.webp)}
@media (prefers-reduced-motion:reduce){.pp-ph{transition:none}}
/* 11/11 15:16 material version: circle around the cursor (radius 24% of drawing width, soft edge) */