/* ===== HBMIC request page v2 (2026-11-09 sian v12) - header/menu/footer from hbmain.css, background from hbfx.js =====
One question per screen, answers as large text (no boxes), fixed ÀÌÀü/´ÙÀ½ in the bottom bar, live estimate on the right. */
.hb-req{background:transparent!important;--ink:#56648C;--mute:#9AA6C6;--step:#6F7CA3;--faint:rgba(17,44,112,.12);--cg:clamp(16px,2vw,32px);--headH:88px;--barH:96px}
.hb-req .app{height:100vh;height:100svh;display:grid;grid-template-rows:var(--headH) minmax(0,1fr) var(--barH);padding:0 var(--gut)}
.hb-req .app > .hb-head{align-self:center}
.hb-req .nav .hb-btn{min-width:132px;justify-content:center;gap:.5em}
.hb-req .nav .hb-btn svg{width:16px;height:16px}
.hb-req .nav .hb-btn[disabled]{opacity:.35;cursor:default}
.hb-req input[type=checkbox]{accent-color:var(--navy)}
.hb-req [hidden]{display:none!important}
@media (min-width:901px) and (max-height:800px){.hb-req{--headH:72px;--barH:84px}}
@media (max-width:900px){.hb-req .app{height:auto;min-height:100svh;grid-template-rows:auto auto auto}.hb-req .app > .hb-head{padding-block:14px}.hb-req .nav .hb-btn{min-width:108px}}
.hb-req *{box-sizing:border-box}
.hb-req [hidden]{display:none!important}
.hb-req h2,.hb-req h3,.hb-req p,.hb-req ol,.hb-req ul,.hb-req dl,.hb-req dd,.hb-req fieldset,.hb-req legend{margin:0;padding:0;border:0}
.hb-req ol,.hb-req ul{list-style:none}
.hb-req .stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);min-height:0}
.hb-req .left{grid-column:1/10;min-width:0;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);padding-top:clamp(24px,5vh,56px)}
.hb-req .count{font-size:15px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:0}
.hb-req .count b{color:var(--navy);font-weight:800}
.hb-req .q{margin-top:0;font-size:clamp(30px,3vw,48px);font-weight:800;line-height:1.2;letter-spacing:-0.045em;word-break:keep-all}
.hb-req .hint{margin-top:10px;font-size:clamp(15px,1.1vw,17px);color:var(--ink)}
.hb-req .q{grid-row:1}
.hb-req .hint{grid-row:2}
.hb-req .ans{grid-row:3;margin-top:clamp(22px,4vh,44px);min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;scrollbar-width:none}
.hb-req .ans::-webkit-scrollbar{display:none}
.hb-req .opts{max-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,56px);row-gap:clamp(14px,2.6vh,26px);align-items:start}
.hb-req .opts.one{grid-template-columns:minmax(0,1fr)}
.hb-req .opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hb-req .opt{position:relative;display:block;cursor:pointer}
.hb-req .opt input{position:absolute;opacity:0;pointer-events:none}
.hb-req .opt b{position:relative;display:inline-block;white-space:nowrap;padding-right:1.05em;font-size:clamp(20px,1.7vw,28px);font-weight:400;line-height:1.3;color:var(--step);transition:color .25s}
.hb-req .opt b::after{content:"\2713";position:absolute;right:0;top:.1em;font-size:.7em;font-weight:700;color:var(--navy);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.hb-req .opt small{display:block;margin-top:4px;font-size:14px;color:var(--mute);line-height:1.5}
.hb-req .opt:hover b{color:var(--navy2)}
.hb-req .opt input:checked + b{color:var(--navy);font-weight:800}
.hb-req .opt input:checked + b::after{opacity:1;transform:none}
.hb-req .opt input:focus-visible + b{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
.hb-req .grp + .grp{margin-top:clamp(18px,3vh,30px)}
.hb-req .grp{transition:opacity .35s}
.hb-req .grp.dim{opacity:.3;pointer-events:none}
.hb-req .opts.inline{display:flex;flex-wrap:wrap;gap:10px clamp(8px,1vw,16px)}
.hb-req .opts.inline .opt b{font-size:clamp(17px,1.35vw,22px)}
.hb-req .opt b .pr{font-style:normal;font-size:13px;font-weight:400;color:var(--mute);margin-left:6px;letter-spacing:0}
.hb-req .seq + .seq{margin-top:clamp(14px,2.4vh,22px)}
.hb-req .grp > p{font-size:15px;font-weight:600;color:var(--mute);margin-bottom:12px;transition:color .3s}
.hb-req .grp:has(input:checked) > p{color:var(--navy)}
.hb-req .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,56px);row-gap:clamp(18px,3.4vh,32px)}
.hb-req .fld{display:grid;gap:6px}
.hb-req .fld.wide{grid-column:1/-1}
.hb-req .fld span{font-size:14px;font-weight:600;color:var(--mute);transition:color .3s}
.hb-req .fld:has(input:not(:placeholder-shown)) > span:first-child,.hb-req .fld:has(textarea:not(:placeholder-shown)) > span:first-child,.hb-req .fld.filled > span:first-child{color:var(--navy)}
.hb-req .fld span em{font-style:normal;color:var(--navy)}
.hb-req .fld .row{display:flex;align-items:baseline;gap:10px}
.hb-req .fld input,.hb-req .fld textarea{width:100%;font:inherit;font-size:clamp(20px,1.6vw,26px);font-weight:500;color:var(--navy);background:transparent;border:0;border-bottom:1px solid rgba(17,44,112,.22);padding:6px 0 8px;letter-spacing:-0.02em;border-radius:0}
.hb-req .fld textarea{font-size:18px;line-height:1.6;resize:none;height:5.2em}
.hb-req .fld input::placeholder,.hb-req .fld textarea::placeholder{color:#B9C1D8;font-weight:400}
.hb-req .fld input:focus,.hb-req .fld textarea:focus{outline:none;border-bottom-color:var(--navy)}
.hb-req .fld .unit{font-size:18px;color:var(--ink)}
.hb-req .etc{margin-top:18px;max-width:420px}
.hb-req .warn{margin-top:16px;font-size:16px;font-weight:600;color:#B4235A}
.hb-req .upl{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.hb-req .file{display:inline-flex;align-items:center;gap:.5em;height:48px;padding:0 22px;border-radius:99px;background:#fff;color:var(--navy);font-size:15px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--navy);transition:background .25s,color .25s}
.hb-req .file:hover,.hb-req .file:focus-within{background:var(--navy);color:#fff}
.hb-req .file svg{width:18px;height:18px}
.hb-req .upl small{font-size:14px;color:var(--mute)}
.hb-req .flist{flex-basis:100%;display:grid;gap:4px;font-size:15px;color:var(--navy2)}
.hb-req .flist .warn{margin:0}
.hb-req .file small{font-weight:400;color:var(--mute);font-size:14px}
.hb-req .agree{display:flex;gap:10px;align-items:baseline;margin-top:18px;font-size:15px;color:var(--ink);cursor:pointer}
.hb-req .agree input{accent-color:var(--navy);width:16px;height:16px;transform:translateY(2px)}
.hb-req .right{grid-column:10/13;min-width:0;min-height:0;display:flex;flex-direction:column;padding-top:clamp(24px,5vh,56px);overflow-y:auto;scrollbar-width:none}
.hb-req .cap{font-size:15px;font-weight:600;color:var(--mute)}
.hb-req .sum{margin-top:14px;display:grid;gap:12px}
.hb-req .sum div{display:grid;grid-template-columns:5.6em minmax(0,1fr);column-gap:12px;font-size:15px;line-height:1.5}
.hb-req .sum dt{color:var(--navy);font-weight:600}
.hb-req .sum div.none dt{color:var(--mute);font-weight:400}
.hb-req .sum dd{color:var(--navy2);font-weight:500;word-break:keep-all}
.hb-req .sum .empty{color:#B9C1D8;font-weight:400}
.hb-req .est{margin-top:auto;padding-top:clamp(20px,4vh,40px)}
.hb-req .est__n{margin-top:8px;font-size:clamp(36px,3.4vw,56px);font-weight:200;letter-spacing:-0.04em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.hb-req .est__n small{font-size:.38em;font-weight:500;margin-left:.2em;letter-spacing:0}
.hb-req .est__s{margin-top:10px;font-size:14px;line-height:1.6;color:var(--ink)}
.hb-req .est__s b{color:var(--navy2);font-weight:600}
.hb-req .est__note{margin-top:8px;font-size:13px;color:var(--mute);line-height:1.6}
.hb-req .bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(24px,4vw,64px)}
.hb-req .prog{position:relative;display:grid;grid-template-columns:4fr 2fr 3fr 3fr;padding-top:14px}
.hb-req .prog::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--faint);border-radius:2px}
.hb-req .prog::after{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--p,1) / 12 * 100%);background:var(--navy);border-radius:2px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.hb-req .prog span{font-size:14px;font-weight:500;color:var(--step);padding-top:6px;white-space:nowrap}
.hb-req .prog span.on{color:var(--navy);font-weight:800}
.hb-req .nav{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.hb-req .back{font-size:15px;font-weight:600;color:var(--step);height:48px;padding:0 4px}
.hb-req .back[disabled]{visibility:hidden}
.hb-req .nav .btn{min-width:132px}
.hb-req .enter{font-size:12px;color:var(--mute);white-space:nowrap}
.hb-req .done{display:grid;align-content:center;gap:16px;grid-column:1/-1}
.hb-req .done .q{font-size:clamp(36px,4vw,64px)}
.hb-req .done a{font-size:18px;font-weight:600;color:var(--navy)}
@media (min-width:901px) and (max-height:800px){
.hb-req .left,.hb-req .right{padding-top:clamp(12px,3vh,32px)}
.hb-req .ans{margin-top:18px}
.hb-req .opts{row-gap:12px}
.hb-req .opt b{font-size:20px}
.hb-req .sum{gap:6px;margin-top:10px}
.hb-req .sum div{font-size:14px}
.hb-req .est{padding-top:14px}
.hb-req .est__n{font-size:36px}
.hb-req .est__note{display:none}
}
@media (max-width:900px){
.hb-req .stage{grid-template-columns:minmax(0,1fr)}
.hb-req .left,.hb-req .right{grid-column:1}
.hb-req .left{grid-template-rows:none;padding-top:12px}
.hb-req .ans{overflow:visible}
.hb-req .opts,.hb-req .opts.three,.hb-req .fields{grid-template-columns:minmax(0,1fr)}
.hb-req .right{overflow:visible;padding:32px 0 24px}
.hb-req .bar{position:sticky;bottom:0;z-index:5;margin:0 calc(var(--gut) * -1);padding:10px var(--gut) max(12px,env(safe-area-inset-bottom,0px));background:rgba(247,246,252,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);grid-template-columns:minmax(0,1fr) auto}
.hb-req .prog{grid-template-columns:1fr;padding-top:10px}
.hb-req .prog span{display:none}
.hb-req .prog span.on{display:block}
.hb-req .enter{display:none}
.hb-req .nav .btn{min-width:108px}
}

/* chapter picture: on the step bar, above the start of the current chapter (moves right as the chapters go on) */
.hb-req .prog{grid-template-columns:1fr 3fr 2fr 3fr 3fr}
.hb-req .rq-ill{position:absolute;left:0;bottom:calc(100% + 10px);width:clamp(170px,15vw,240px);aspect-ratio:900/620;margin:0;pointer-events:none;transition:left .7s cubic-bezier(.2,.7,.2,1),opacity .4s}
.hb-req .rq-ill.off{opacity:0}
.hb-req .rq-ill img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s}
.hb-req .rq-ill img.on{opacity:1}
@media (min-width:901px) and (max-height:800px){.hb-req .rq-ill{width:150px}}
@media (max-height:640px),(max-width:900px){.hb-req .rq-ill{display:none}}

/* big heading colour: navy -> indigo -> violet (11/10 B) */
.hb-req .q{background:linear-gradient(100deg,#112C70 0%,#112C70 25%,#3A4FC4 65%,#7B5CE6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%;padding-bottom:.08em}
/* 2026-11-10 19:50 screen check: question labels navy, empty estimate hidden, larger chapter picture */
.hb-req .grp > p{color:var(--navy)}
.hb-req .est{transition:opacity .4s,visibility .4s}
.hb-req .est.is-empty{opacity:0;visibility:hidden}
@media (max-width:900px){.hb-req .est.is-empty{display:none}}
.hb-req .rq-ill{width:clamp(200px,18vw,280px)}
@media (min-width:901px) and (max-height:800px){.hb-req .rq-ill{width:170px}}