/* 검증 도구: 결과 판(큰 배수 + 검증 표시 + 계산 3단계) · 입력 · 자료 · 단추 · 복사 · 뼈대. 값은 tokens.css 이름만. */
.tool{padding-top:var(--s6);display:grid;gap:var(--s4)}
.tool-h h2{font:700 var(--fs-24)/1.25 var(--f-body);letter-spacing:-.01em}
.tool-h p{margin-top:var(--s2);color:var(--sub);font-size:var(--fs-14);max-width:720px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.note{margin-top:var(--s5);padding:var(--s4);border-radius:var(--r-m);border:1px dashed var(--line-2);display:grid;gap:var(--s3)}
.note p{font-size:var(--fs-14);color:var(--sub);line-height:1.7}
.note-act{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* 단추(보이는 높이 28/36, 누르는 자리 44) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:36px;padding:0 var(--s4);border-radius:var(--r);border:1px solid var(--line-2);
  font:600 var(--fs-14)/1 var(--f-body);color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 1px 2px rgba(0,0,0,.4);transition:transform var(--t-fast) var(--ease),border-color var(--t) var(--ease),background-color var(--t) var(--ease),opacity var(--t) var(--ease)}
.btn::before{content:"";position:absolute;inset:-4px -2px}
.btn:hover{border-color:rgba(255,255,255,.26)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn-pri{color:var(--neon-ink);border-color:transparent;background:linear-gradient(180deg,#D4FF66,var(--neon));box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 1px rgba(198,255,61,.4),0 6px 18px -6px rgba(198,255,61,.45)}
.btn-pri:hover{border-color:transparent;background:linear-gradient(180deg,#DCFF7F,#CFFF52)}
.btn[data-busy="true"]{pointer-events:none;opacity:.7}
.btn[data-busy="true"]::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 입력 */
.query{padding:var(--s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s3);align-items:start}
.query .seg{grid-column:1/-1}
.query .btn-pri{grid-column:1/-1}
@media (min-width:768px){.query{grid-template-columns:auto 1fr 120px auto;padding:var(--s4) var(--s5)}.query .seg,.query .btn-pri{grid-column:auto}.query .btn-pri{margin-top:22px;min-width:120px}}
.seg{border:0;padding:0;margin:0;min-width:0}
.lbl{display:block;font:600 var(--fs-12)/1 var(--f-body);color:var(--sub);margin-bottom:var(--s2);padding:0}
.seg-in{display:flex;gap:2px;padding:2px;border-radius:var(--r);border:1px solid var(--line-2);background:rgba(0,0,0,.3)}
.seg-b{position:relative;flex:1 1 0;height:30px;padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r-s);background:transparent;color:var(--sub);font:600 var(--fs-13)/1 var(--f-body);cursor:pointer;white-space:nowrap;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.seg-b::before{content:"";position:absolute;inset:-7px 0}
.seg-b:hover{color:var(--ink)}
.seg-b[aria-checked="true"]{color:var(--ink);background:var(--neon-soft);border-color:var(--neon-edge)}
.fld{display:block;min-width:0}
.inp{width:100%;height:36px;padding:0 var(--s3);border-radius:var(--r);border:1px solid var(--line-2);background:rgba(0,0,0,.35);color:var(--ink);font:500 var(--fs-14)/1 var(--f-mono);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.inp::placeholder{color:var(--mut)}
.inp:hover{border-color:rgba(255,255,255,.24)}
.inp:focus{outline:none;border-color:var(--neon-edge);box-shadow:0 0 0 3px var(--neon-soft)}
.inp[aria-invalid="true"]{border-color:var(--down)}
.fld-err{display:block;min-height:16px;margin-top:var(--s1);font-size:var(--fs-12);line-height:16px;color:var(--down)}

/* 고른 판 자료 */
.data{padding:var(--s4) var(--s5) var(--s5)}
.kv{display:grid;grid-template-columns:1fr;gap:0}
.kv-row{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.kv-row:first-child{border-top:0}
@media (min-width:768px){.kv-row{grid-template-columns:200px 1fr auto;align-items:start}}
.kv dt{font-size:var(--fs-13);color:var(--sub);grid-column:1}
.kv dd{grid-column:1/2;font:500 var(--fs-13)/1.55 var(--f-mono);color:var(--ink);overflow-wrap:anywhere;min-width:0}
@media (min-width:768px){.kv dd{grid-column:2}}
.kv dd small{display:block;font:400 var(--fs-12)/1.5 var(--f-body);color:var(--mut);margin-top:2px}
.kv .cp{grid-column:2;grid-row:1/3;align-self:center}
@media (min-width:768px){.kv .cp{grid-column:3;grid-row:1}}

/* 복사 단추(보이는 24, 누르는 44) + 복사됨 1.5초 */
.cp{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-s);border:1px solid transparent;background:transparent;color:var(--mut);cursor:pointer;transition:color var(--t) var(--ease),background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
.cp::before{content:"";position:absolute;inset:-8px}
.cp svg{width:15px;height:15px}
.cp:hover{color:var(--ink);background:var(--glass-hi);border-color:var(--line)}
.cp[data-done="true"]{color:var(--up)}
.cp-tip{position:absolute;right:100%;top:50%;transform:translate(-6px,-50%);padding:3px 6px;border-radius:var(--r-s);background:#14161C;border:1px solid var(--line-2);color:var(--up);font:600 var(--fs-12)/1.2 var(--f-body);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--t) var(--ease)}
.cp[data-done="true"] .cp-tip{opacity:1}

/* 뼈대(불러오는 중) */
.sk{display:inline-block;border-radius:var(--r-s);background:linear-gradient(90deg,var(--glass-2),var(--glass-hi),var(--glass-2));background-size:200% 100%;animation:sk 1.4s ease-in-out infinite}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.sk-mult{width:min(320px,70%);height:.8em;vertical-align:middle}
.sk-line{width:140px;height:12px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.sec-h h3{font:700 var(--fs-16)/1.4 var(--f-body)}
.sec-h-r{font-size:var(--fs-12);color:var(--mut);text-align:right}