/* /tools/kit.css -- the shared look of every calculator (2026-10-07).
   Loaded after each tool's own <style>, so a rule here with the same
   selector wins; the tool's own rules stay as the fallback. Everything that
   only exists once /tools/kit.js has run (the bar, the empty state, Start
   over) is styled here too, and is simply absent without script.
   Colours are the site's (site.css): navy #22335c, gold #dcb46b, brass
   #7f6224 on paper #faf6ee. Every pair below was measured: text >= 4.5:1,
   field boundaries >= 3:1 (ci/design_invariants.mjs). */
:root{
  --k-ink:#1a2337;--k-ink2:#3d4759;--k-ink3:#625c50;
  --k-paper:#faf6ee;--k-card:#fff;--k-soft:#f7f2e8;--k-sunk:#efe8d9;
  --k-line:#e6dfcf;--k-line2:#d6cbb3;--k-field:#948868;
  --k-navy:#22335c;--k-navy2:#2c4172;--k-deep:#16223d;
  --k-gold:#dcb46b;--k-gold2:#c1974a;--k-brass:#7f6224;--k-cream:#f0d9a6;--k-mist:#c8cfdd;
  --k-tint:#f3f5fa;--k-gtint:#fbf3df;--k-gline:#ead6a6;--k-okd:#3d7a55;
  --k-focus:#22335c;--k-ring:rgba(34,51,92,.13);
  --k-shadow:0 1px 2px rgba(22,34,61,.05),0 18px 40px -28px rgba(22,34,61,.38);
  --k-ease:cubic-bezier(.2,.7,.2,1);
  --k-body:"Poppins","Poppins Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --k-ko:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif
}
/* The tools set data-theme="light" on their own root, as the pages do; the
   dark palette below is for a document that does not. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --k-ink:#ece9e3;--k-ink2:#c3beb4;--k-ink3:#a49e93;
  --k-paper:#12151d;--k-card:#1a1f2b;--k-soft:#202636;--k-sunk:#282f44;
  --k-line:#2d3547;--k-line2:#404b64;--k-field:#626f8c;
  --k-brass:#d8bd8a;--k-tint:#202a40;--k-gtint:#2c2412;--k-gline:#5a4523;--k-okd:#5cbb8c;
  --k-focus:#d8bd8a;--k-ring:rgba(216,189,138,.22);
  --k-shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -28px rgba(0,0,0,.8)
}}
/* The figure's brass in a light document on a dark-mode phone. The tool's
   own dark rule is unguarded, so with data-theme="light" it drew the pale
   dark-mode gradient on paper -- about 1.3:1. */
@media (prefers-color-scheme:dark){html[data-theme=light] .money:not(.kitHero){
  background:linear-gradient(173deg,#8a6a28 0%,#7f6224 55%,#6a521e 100%);-webkit-background-clip:text;background-clip:text}}

/* ---------------------------------------------------------------- page */
body{font-family:var(--k-body);font-size:1rem;line-height:1.7;color:var(--k-ink2);background:var(--k-paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[lang=ko] body{font-family:var(--k-ko);line-height:1.8}
h1,h2,h3{color:var(--k-ink)}
strong{color:var(--k-ink);font-weight:600}
.flag strong{color:inherit}
.wrap{padding:1.25rem 1.125rem 3rem}
/* Embedded, the page around it is the margin: the frame is widened by these
   6px on each side (site.css iframe.tool), so the form's edge meets the
   page's column and a focus ring at the edge is never clipped. */
.kitEmbed .wrap{padding:6px 6px 1.25rem}
a{color:var(--k-brass);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
code{font-size:.9em;background:var(--k-soft);border:1px solid var(--k-line);border-radius:5px;padding:.08em .35em}
footer{font-size:.8125rem;line-height:1.6;color:var(--k-ink3);border-top:1px solid var(--k-line);margin-top:2rem;padding-top:1rem}
.kitEmbed footer{margin:1.5rem 6px 0;padding-bottom:.5rem}
.verify{display:flex;align-items:center;gap:.5rem;font-size:.75rem;line-height:1.4;color:var(--k-ink3);opacity:1;margin:.9rem .25rem 0}
.verify::before{content:"";flex:none;width:.4rem;height:.7rem;border:solid var(--k-okd);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-2px)}
.privacy{border:1px solid var(--k-line);border-radius:12px;background:var(--k-soft);font-size:.8125rem;line-height:1.55;padding:.75rem .95rem}

/* ---------------------------------------------------------------- the form */
form{position:relative;background:var(--k-card);border:1px solid var(--k-line);border-radius:18px;
  padding:1rem 1.25rem 1.35rem;box-shadow:var(--k-shadow)}
.kitBar{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;
  margin:0 -.25rem .35rem;padding:0 .25rem .8rem;border-bottom:1px solid var(--k-line)}
.kitLive{display:inline-flex;align-items:center;gap:.55rem;font-size:.78125rem;font-weight:500;color:var(--k-ink3);letter-spacing:.01em}
.kitLive i{position:relative;flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--k-gold2)}
.kitLive i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--k-gold2);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .kitLive i::after{animation:kitPulse 2.4s var(--k-ease) infinite}
  @keyframes kitPulse{0%{transform:scale(.4);opacity:.7}70%,100%{transform:scale(1.35);opacity:0}}
}
label{font-weight:600;color:var(--k-ink);font-size:.9375rem;line-height:1.4;margin:1.05rem 0 .4rem}
.hint{font-weight:400;color:var(--k-ink3);font-size:.8125rem;line-height:1.5;margin-top:.2rem}
.req{color:#a3341f}
input:where(:not([type=radio],[type=checkbox])),select,textarea{min-height:52px;padding:.75rem .95rem;border:1px solid var(--k-field);border-radius:12px;
  background:var(--k-card);color:var(--k-ink);font-family:inherit;font-size:1.0625rem;font-weight:500;line-height:1.3;
  transition:border-color .15s ease,box-shadow .2s ease,background-color .15s ease}
textarea{min-height:7.5rem;line-height:1.55;font-size:.9375rem;font-weight:400}
input::placeholder,textarea::placeholder{color:#8a8170;font-weight:400;opacity:1}
input:where(:not([type=radio],[type=checkbox])):hover,select:hover,textarea:hover{border-color:var(--k-ink3)}
input:where(:not([type=radio],[type=checkbox])):focus,select:focus,textarea:focus{border-color:var(--k-navy);box-shadow:0 0 0 4px var(--k-ring)}
input[type=date]{cursor:text}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.65}
.row{gap:0 1rem}
.row.kitOne{grid-template-columns:1fr}
.kitOff{display:none!important}
.kitAff{position:relative;display:block}
.kitAff::before,.kitAff::after{position:absolute;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;
  font-size:.9375rem;font-weight:600;color:var(--k-ink3)}
.kitPre::before{content:attr(data-pre);left:1rem}
.kitPre input{padding-left:1.95rem}
.kitSuf::after{content:attr(data-suf);right:1rem;font-weight:500;font-size:.875rem}
.kitSuf input{padding-right:5.75rem}
.kitSel{position:relative;display:block}
.kitSel::after{content:"";position:absolute;right:1.1rem;top:50%;width:.5rem;height:.5rem;pointer-events:none;
  border:solid var(--k-ink3);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg)}
.kitSel select{-webkit-appearance:none;appearance:none;padding-right:2.75rem;cursor:pointer}
.check{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;margin:1.1rem 0 .25rem;border:1px solid var(--k-line);
  border-radius:12px;background:var(--k-soft);transition:border-color .15s ease,background-color .15s ease}
.check:has(input:checked){border-color:var(--k-gold2);background:var(--k-gtint)}
.check input{width:1.5rem;height:1.5rem;min-height:1.5rem;margin:.1rem 0 0;padding:0;accent-color:var(--k-navy)}
.check label{margin:0}

/* ---------------------------------------------------------------- buttons */
button{font-family:inherit}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.5rem}
button[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:52px;padding:0 1.55rem;
  border-radius:999px;border:1px solid #1b2a4d;background:linear-gradient(180deg,var(--k-navy2),var(--k-navy));color:#fff;
  font-size:1rem;font-weight:600;letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 20px -12px rgba(22,34,61,.75);
  transition:transform .12s ease,box-shadow .2s ease,background-color .15s ease}
button[type=submit]::after{content:"";width:.42rem;height:.42rem;border:solid currentColor;border-width:2px 2px 0 0;
  transform:rotate(45deg);transition:transform .15s ease}
button[type=submit]:hover{filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 26px -12px rgba(22,34,61,.85)}
button[type=submit]:hover::after{transform:translateX(3px) rotate(45deg)}
button[type=submit]:active{transform:translateY(1px) scale(.99)}
button.secondary,.kitResetBtn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.1rem;border-radius:999px;
  border:1px solid var(--k-line2);background:var(--k-card);color:var(--k-ink2);font-size:.9375rem;font-weight:600;
  box-shadow:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease}
button.secondary:hover,.kitResetBtn:hover{filter:none;background:var(--k-soft);border-color:var(--k-ink3);color:var(--k-ink)}
.kitResetBtn{border-color:transparent;background:transparent;color:var(--k-ink3);padding:0 .8rem}
form:not(.kitDirty) .kitResetBtn{visibility:hidden}
.kitExBtn{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:0 .95rem 0 .8rem;border-radius:999px;
  border:1px solid var(--k-gline);background:var(--k-gtint);color:#6a521e;font-size:.84375rem;font-weight:600;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,transform .12s ease}
.kitExBtn:hover{filter:none;border-color:var(--k-gold2);background:#f8ebcd}
.kitExBtn:active{transform:scale(.98)}
.kitIco{width:1.05rem;height:1.05rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kitExBtn .kitIco{fill:currentColor;stroke:none}
.kitMore{display:inline-flex;align-items:center;min-height:32px;margin:-.35rem 0 .9rem;padding:0;border:0;background:none;
  color:var(--k-brass);font-size:.875rem;font-weight:600;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;
  border-radius:4px;transition:color .15s ease}
.kitMore:hover{filter:none;color:var(--k-ink)}
.kitClamp:not(.kitOpen){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* the benefits calculator's four tabs: one control, the chosen one filled */
.tabs{display:grid;grid-template-columns:repeat(4,auto);gap:.25rem;padding:.3rem;margin:.25rem 0 1.4rem;
  background:var(--k-sunk);border:1px solid var(--k-line);border-radius:16px}
.tabs button{min-height:46px;padding:0 .9rem;border:0;border-radius:12px;background:transparent;color:var(--k-ink2);
  font-size:.875rem;font-weight:600;line-height:1.2;box-shadow:none;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.tabs button:hover{filter:none;background:rgba(255,255,255,.6);color:var(--k-ink)}
.tabs button[aria-selected=true]{background:var(--k-navy);color:#fff;box-shadow:0 8px 16px -10px rgba(22,34,61,.9)}
@media (max-width:36rem){.tabs{grid-template-columns:1fr 1fr}}
section[role=tabpanel]>h2{font-size:1.3125rem;margin:0 0 .35rem;letter-spacing:-.015em}
section[role=tabpanel]>p{font-size:.9375rem;line-height:1.65}

/* ---------------------------------------------------------------- the triage */
.kitProg{display:flex;align-items:center;gap:1rem;margin:.6rem 0 .25rem}
.kitProgT{flex:none;font-size:.8125rem;font-weight:600;color:var(--k-ink2);font-variant-numeric:tabular-nums}
.kitProgBar{flex:1;height:6px;border-radius:99px;background:var(--k-sunk);overflow:hidden}
.kitProgBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--k-gold2),var(--k-gold));
  transform-origin:left center;transform:scaleX(0);transition:transform .45s var(--k-ease)}
fieldset.q{margin:1.5rem 0 0}
fieldset.q legend{font-size:1rem;font-weight:600;color:var(--k-ink);line-height:1.45;margin:0 0 .65rem}
fieldset.q.kitDone legend::after{content:"";display:inline-block;width:.32rem;height:.62rem;margin-left:.6rem;vertical-align:.05em;
  border:solid var(--k-okd);border-width:0 2px 2px 0;transform:rotate(45deg)}
.opts{gap:.45rem}
.opt{min-height:52px;padding:.7rem 1rem;border-radius:12px;border-color:var(--k-line2);font-size:.96875rem;color:var(--k-ink);
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.opt:hover{border-color:var(--k-ink3)}
.opt:has(input:checked){border-color:var(--k-navy);background:var(--k-tint);box-shadow:inset 0 0 0 1px var(--k-navy)}
.opt input{accent-color:var(--k-navy)}
.opts.kitSeg{grid-template-columns:repeat(auto-fit,minmax(6.75rem,1fr))}
.opts.kitSeg .opt{justify-content:center}

/* ---------------------------------------------------------------- the result */
.kitOut{margin-top:1.25rem}
.kitOut.stale{opacity:.62;transition:opacity .15s ease}
.kitOut.stale::before{display:none}
.kitOut.kitExOn::before{content:attr(data-kit-ex);display:flex;width:fit-content;align-items:center;margin:0 0 .75rem;padding:.4rem .95rem;
  border:1px solid var(--k-gline);border-radius:999px;background:var(--k-gtint);color:#6a521e;font-size:.8125rem;font-weight:600;line-height:1.3}
.kitSteady>*{animation:none!important}
.card{background:var(--k-card);border:1px solid var(--k-line);border-radius:16px;padding:1.2rem 1.35rem;margin:1rem 0;
  box-shadow:0 1px 2px rgba(22,34,61,.04)}
.card.soft{background:#fdfbf7}
.kitOut>.card:first-child{margin-top:0}
.card h2,.card h3{font-size:1.125rem;line-height:1.35;letter-spacing:-.01em;margin:0 0 .5rem}
.card h3{font-size:1rem;margin-top:1.1rem}
.card p:last-child{margin-bottom:0}
.kitLeadCard{border-top:3px solid var(--k-navy);box-shadow:var(--k-shadow)}
.kitHeroCard{overflow:hidden;box-shadow:var(--k-shadow)}
.money.kitHero{position:relative;overflow:hidden;display:block;margin:0 0 1rem;padding:1.35rem 1.35rem 1.2rem;border-radius:16px;
  background:radial-gradient(120% 150% at 100% 0%,#33497c 0%,var(--k-navy) 46%,var(--k-deep) 100%);
  -webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--k-cream);color:var(--k-cream);
  font-size:clamp(2.1rem,7.5vw,2.85rem);line-height:1.08;letter-spacing:-.02em;font-weight:700}
.kitHeroCard>.money.kitHero{margin:-1.2rem -1.35rem 1.1rem;border-radius:0}
.kitHeroCard>.money.kitHero:not(:first-child){margin-top:1.1rem}
.kitHeroCard>.money.kitHero:last-child{margin-bottom:-1.2rem}
.money.kitHero::before{content:attr(data-k);display:block;margin:0 0 .65rem;padding-left:1.55rem;
  background:linear-gradient(var(--k-gold),var(--k-gold)) left center/1.05rem 1px no-repeat;
  font-size:.6875rem;font-weight:600;line-height:1.2;letter-spacing:.17em;text-transform:uppercase;
  color:var(--k-gold);-webkit-text-fill-color:var(--k-gold)}
.money.kitHero small{display:block;margin-top:.65rem;max-width:38rem;font-size:.8125rem;font-weight:500;line-height:1.5;letter-spacing:0;
  color:var(--k-mist);-webkit-text-fill-color:var(--k-mist)}
.money.kitHero::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,232,182,.16) 50%,transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .kitFresh .money.kitHero::after{animation:kitSheen 1.15s .3s var(--k-ease) both}
  @keyframes kitSheen{to{transform:translateX(110%)}}
}
@media (prefers-reduced-motion:reduce){.money.kitHero::after,.kitLive i::after{animation:none!important}}
.money{font-variant-numeric:tabular-nums}
.kitOut table{border-collapse:separate;border-spacing:0;margin:.8rem 0;font-size:.90625rem;border:1px solid var(--k-line);border-radius:12px;overflow:hidden}
.kitOut th,.kitOut td{padding:.62rem .85rem;border-bottom:1px solid var(--k-line);vertical-align:top}
.kitOut tr:last-child>th,.kitOut tr:last-child>td{border-bottom:0}
.kitOut thead th{background:var(--k-soft);color:var(--k-ink);font-size:.8125rem;font-weight:600}
.kitOut tbody th{background:transparent;color:var(--k-ink2);font-weight:500}
.kitOut .kitNum{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kitOut td.kitNum{color:var(--k-ink);font-weight:600}
.kitOut .hint{font-size:.8125rem}
.flag{position:relative;margin:.85rem 0;padding:.9rem 1.05rem .9rem 1.2rem;border-radius:12px;font-size:.9375rem;line-height:1.62}
.flag::before{content:"";position:absolute;left:0;top:.8rem;bottom:.8rem;width:3px;border-radius:0 3px 3px 0;background:currentColor;opacity:.55}
.flag strong.kitLead{display:block;margin-bottom:.2rem;font-size:.96875rem;line-height:1.45}
.route{font-size:1.3125rem;line-height:1.3;letter-spacing:-.015em}
.kitOut>.flag:first-child{margin-top:0}
/* the decoder's published examples */
.ex{border-radius:12px;border-color:var(--k-line2);background:var(--k-card);transition:border-color .15s ease,background-color .15s ease}
.ex:hover{filter:none;border-color:var(--k-gold2);background:var(--k-gtint)}

/* ---------------------------------------------------------------- the empty state */
.kitPh{display:none;margin-top:1.25rem;padding:1.2rem 1.35rem 1.35rem;border:1.5px dashed var(--k-line2);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.kitOut:empty+.kitPh{display:block}
.kitPhTop{display:flex;align-items:center;gap:.8rem}
.kitPhK{font-size:.6875rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--k-brass)}
.kitPhRule{flex:1;height:1px;background:var(--k-line)}
.kitPhT{margin:.55rem 0 0;font-size:.90625rem;line-height:1.55;color:var(--k-ink2)}
.kitPhN{position:relative;margin:.6rem 0 0;padding-left:1.15rem;font-size:.84375rem;line-height:1.55;font-weight:500;color:var(--k-brass)}
.kitPhN::before{content:"";position:absolute;left:.1rem;top:.5em;width:.4rem;height:.4rem;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.kitPhN:empty{display:none}
.kitPhRows{display:grid;gap:.6rem;margin-top:1.05rem}
.kitPhRows i{display:block;height:.65rem;border-radius:6px;background:linear-gradient(90deg,var(--k-sunk) 0%,#f7f2e7 50%,var(--k-sunk) 100%);background-size:220% 100%}
.kitPhRows i:first-child{width:42%;height:1.85rem;border-radius:8px}
.kitPhRows i:nth-child(2){width:86%}
.kitPhRows i:nth-child(3){width:58%}
@media (prefers-reduced-motion:no-preference){
  .kitPhRows i{animation:kitShim 2.4s linear infinite}
  @keyframes kitShim{from{background-position:120% 0}to{background-position:-120% 0}}
}

/* screen-reader only: the one short "updated" line */
.kitSr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:30rem){
  form{padding:.9rem 1rem 1.15rem;border-radius:16px}
  .card{padding:1.05rem 1.1rem}
  .kitHeroCard>.money.kitHero{margin:-1.05rem -1.1rem 1rem;padding:1.2rem 1.1rem 1.1rem}
  .kitHeroCard>.money.kitHero:last-child{margin-bottom:-1.05rem}
  .kitBar{flex-direction:column;align-items:flex-start}
  .btns button[type=submit]{flex:1 1 auto}
}
@media print{
  .kitBar,.kitPh,.kitResetBtn,.kitMore,.kitProg{display:none!important}
  .kitClamp{display:block!important}
  form,.card,.kitHeroCard{box-shadow:none}
  .money.kitHero{background:none;color:#000;-webkit-text-fill-color:#000}
  .money.kitHero small,.money.kitHero::before{color:#000;-webkit-text-fill-color:#000}
}