/* 무료 웹 도구 (/web-tools/*) 공통 — app.css 의 색 · 글꼴을 그대로 쓴다. make_webtools.py 가 public/web-tools/wt.css 로 복사 */
.wt { margin: 26px 0 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 20px; }
.wt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wt-row + .wt-row { margin-top: 12px; }
.wt .btn { height: 42px; padding: 0 16px; font-size: 15px; }
.wt-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.wt-stat div { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; }
.wt-stat b { display: block; font-size: 24px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.wt-stat span { font-size: 13px; color: var(--muted); }
.wt-note { font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.wt-live { font-size: 15px; color: var(--ink-2); margin-top: 10px; min-height: 1.6em; }
.wt-meter { height: 18px; border-radius: 9px; background: var(--paper-2); overflow: hidden; margin-top: 14px; }
.wt-meter i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .06s linear; }
.wt-area { width: 100%; min-height: 220px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink);
  font: 16px/1.7 var(--sans); padding: 12px 14px; resize: vertical; }
.wt-area:focus, .wt input:focus, .wt select:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.wt input[type=number], .wt input[type=time], .wt select { height: 42px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  color: var(--ink); font: 15px var(--sans); padding: 0 10px; }
.wt input[type=number] { width: 90px; }
.wt-code { display: flex; gap: 8px; align-items: stretch; margin-top: 14px; }
.wt-code code { flex: 1; display: flex; align-items: center; font: 15px var(--mono); background: var(--stage); color: #DCE1E7; border-radius: var(--r); padding: 10px 14px; overflow-x: auto; white-space: nowrap; }
.wt-pad { display: grid; place-items: center; min-height: 220px; border: 2px dashed var(--line); border-radius: var(--r); background: var(--paper);
  color: var(--muted); font-size: 15px; user-select: none; -webkit-user-select: none; text-align: center; padding: 16px; }
.wt-pad.on { border-color: var(--signal); color: var(--ink); }
.wt video, .wt canvas.wt-shot { width: 100%; max-height: 440px; border-radius: var(--r); background: #000; display: block; }
.wt-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.wt-btns span { min-width: 58px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); text-align: center; font-size: 14px; color: var(--muted); background: var(--paper); }
.wt-btns span.hit { border-color: var(--signal); background: var(--green-t); color: var(--ink); }
.wt-log { margin-top: 12px; max-height: 150px; overflow: auto; font: 13px/1.7 var(--mono); color: var(--muted); }
/* 키보드 */
.kb { overflow-x: auto; padding-bottom: 6px; }
.kb-wrap { display: inline-flex; gap: 16px; align-items: flex-start; }
.kb-in { display: inline-flex; flex-direction: column; gap: 5px; }
.kb-r { display: flex; gap: 5px; }
.kb-k { --w: 1; flex: 0 0 calc(var(--w) * 40px + (var(--w) - 1) * 5px); height: 40px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  display: grid; place-items: center; font-size: 11.5px; color: var(--ink-2); transition: background .12s, border-color .12s; }
.kb-k.gap { visibility: hidden; }
.kb-k.na { border-style: dashed; color: var(--muted); background: transparent; }
.kb-k.done { background: var(--green-t); border-color: var(--green); color: var(--ink); }
.kb-k.down { background: var(--signal); border-color: var(--signal); color: var(--go-fg); }
/* 키보드 청소 모드 */
.kc-full { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(circle at 50% 40%, #12402A, #0B1510 70%); color: #fff; display: grid; place-items: center; text-align: center; padding: 20px; }
.kc-in h2 { font-size: clamp(26px, 4vw, 40px); margin: 14px 0 8px; border: 0; padding: 0; letter-spacing: -0.04em; color: #fff; }
.kc-in p { font-size: 18px; color: #BFE8CF; }
.kc-in b { color: #fff; font-variant-numeric: tabular-nums; }
.kc-in i { display: block; font: 700 46px var(--mono); font-style: normal; margin: 22px 0; opacity: .25; transition: opacity .3s; min-height: 56px; }
.kc-in small { display: block; margin: 18px auto 0; color: #8FB8A0; font-size: 13px; max-width: 460px; line-height: 1.6; }
.kc-badge { display: inline-block; padding: 6px 14px; border-radius: 99px; background: #1FC45F; color: #05200D; font-weight: 800; animation: kcp 1.6s ease-in-out infinite; }
@keyframes kcp { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 196, 95, .5); } 50% { box-shadow: 0 0 0 10px rgba(31, 196, 95, 0); } }
/* 에임 연습 */
.aim { position: relative; height: 420px; border-radius: var(--r); overflow: hidden; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 50% 50%, #26303A, #12171D 75%); }
.aim.on { cursor: crosshair; }
.aim::before, .aim::after { content: ""; position: absolute; background: rgba(255, 255, 255, .05); }
.aim::before { left: 0; right: 0; top: 50%; height: 1px; }
.aim::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.aim-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; gap: 22px; padding: 10px; font-size: 13px; color: #9AA6B2; z-index: 2; pointer-events: none; }
.aim-hud b { color: #fff; font-size: 16px; font-variant-numeric: tabular-nums; margin-left: 4px; }
.aim-start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #fff; z-index: 3; }
.aim-start[hidden] { display: none; }
.aim-start b { font-size: 24px; letter-spacing: -0.03em; }
.aim-start span, .aim-start small { color: #9AA6B2; font-size: 14px; }
.aim-t { position: absolute; border-radius: 50%; cursor: crosshair; animation: aimIn .14s ease-out;
  background: radial-gradient(circle, #fff 0 14%, #F04444 15% 34%, #fff 35% 52%, #F04444 53% 70%, #fff 71% 100%); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .4); }
@keyframes aimIn { from { transform: scale(.3); opacity: 0; } }
.aim-pop, .aim-miss { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; animation: aimFx .4s ease-out forwards; }
.aim-pop { border: 3px solid #1FC45F; }
.aim-miss { border: 2px solid #F04444; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
@keyframes aimFx { to { transform: scale(1.8); opacity: 0; } }
.aim-opt { font-size: 14px; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
/* CMD 작업 파일 */
.rc { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; background: var(--paper); transition: border-color .15s, background .15s; }
.rc.on { border-color: var(--green); background: var(--green-t); }
.rc-h { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.rc-h input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.rc-h b { font-size: 16px; color: var(--ink); }
.rc-tag { margin-left: auto; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.doc .rc-d { font-size: 14px; color: var(--muted); margin: 6px 0 0 28px; line-height: 1.6; }
.rc-f { display: grid; gap: 8px; margin: 10px 0 0 28px; }
.rc-l { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.rc-l input, .rc-l textarea, .rc-l select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 14px var(--mono); padding: 8px 10px; }
.rc details { margin: 10px 0 0 28px; font-size: 14px; }
.rc summary { cursor: pointer; color: var(--green); font-weight: 600; }
.doc .rc details p { font-size: 14px; line-height: 1.7; margin-top: 8px; }
.b-out { background: var(--stage); color: #DCE1E7; border-radius: var(--r); padding: 14px 16px; font: 13px/1.65 var(--mono); white-space: pre; overflow-x: auto; margin: 10px 0 12px; max-height: 360px; }
.b-one { max-height: 220px; font-size: 12.5px; margin: 8px 0 0; }
.doc .b-h { margin: 22px 0 10px; }
@media (max-width: 560px) { .rc-d, .rc-f, .rc details { margin-left: 0; } .aim { height: 360px; } }
/* 검색 목록 (증상 해결 · 블루스크린 · 확장자) */
.lt-q { width: 100%; height: 50px; border: 2px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 17px var(--sans); padding: 0 16px; }
.lt-q:focus { outline: none; border-color: var(--signal); }
.lt-cats { margin-top: 10px; }
.lt-cats .btn { height: 36px; padding: 0 12px; font-size: 14px; }
.doc .lt-n { font-size: 13px; color: var(--muted); margin: 10px 0 6px; }
.lt { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); margin-bottom: 8px; }
.lt[open] { border-color: var(--green); }
.lt summary { cursor: pointer; padding: 13px 16px; display: flex; gap: 10px; align-items: baseline; list-style: none; }
.lt summary::-webkit-details-marker { display: none; }
.lt summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 700; }
.lt[open] summary::after { content: "−"; }
.lt summary b { font-size: 16px; color: var(--ink); line-height: 1.5; }
.lt-c { flex: none; font-size: 12px; color: var(--green); border: 1px solid var(--green); border-radius: 99px; padding: 1px 8px; }
.lt-a { padding: 0 16px 14px; }
.doc .lt-a p, .doc .lt-a li { font-size: 15px; line-height: 1.75; }
.lt-a ol { padding-left: 20px; }
.lt-go { height: 34px !important; font-size: 13px !important; margin: 8px 6px 0 0; text-decoration: none !important; color: var(--ink) !important; }
/* 내 IP */
.ip-big { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--stage); color: #fff; }
.ip-big span { font-size: 14px; color: #9AA6B2; width: 100%; }
.ip-big b { font: 700 clamp(24px, 5vw, 38px) var(--mono); letter-spacing: -0.02em; word-break: break-all; flex: 1; }
/* 불량 화소 전체 화면 */
.px-full { position: fixed; inset: 0; z-index: 9999; cursor: none; }
.px-full p { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: 14px; padding: 8px 14px; border-radius: 99px;
  background: rgba(0, 0, 0, .55); color: #fff; transition: opacity .6s; white-space: nowrap; }
/* 도구 모음 */
.wt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 26px 0; }
.wt-card { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 18px; text-decoration: none !important; color: inherit !important; transition: border-color .15s, transform .15s; }
.wt-card:hover { border-color: var(--green); transform: translateY(-2px); }
.wt-card b { display: block; font-size: 17px; color: var(--ink); margin: 10px 0 4px; letter-spacing: -0.03em; }
.wt-card span { font-size: 14px; color: var(--muted); line-height: 1.6; }
.wt-card svg { width: 30px; height: 30px; stroke: var(--green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wt-rel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wt-rel a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; text-decoration: none !important; color: var(--ink) !important; }
.wt-rel a:hover { border-color: var(--green); }
@media (max-width: 560px) { .wt { padding: 14px; } .wt-code { flex-direction: column; } }
@media (min-width: 900px) { .wt-wide { width: min(1120px, 100vw - 48px); margin-left: calc((760px - 40px - min(1120px, 100vw - 48px)) / 2); } }