/* 실험실(/lab). 색은 app.css 의 종이·잉크 변수를 그대로 써서 밝은·어두운 화면 모두 따른다. */
.lb-hub,.lb-page{display:grid;gap:28px;margin-top:8px}
.lb-group h2,.lb-text h2{font:700 20px var(--serif);padding-bottom:8px;border-bottom:2px solid var(--rule);margin-bottom:14px}
.lb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.lb-card{display:grid;gap:4px;padding:16px;border:1px solid var(--hair);background:var(--sheet);color:var(--ink);text-decoration:none;border-radius:4px}
.lb-card:hover{border-color:var(--ink)}
.lb-card-i{font-size:28px;line-height:1}
.lb-card b{font:700 17px var(--serif)}
.lb-card span:last-child{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.lb-text{max-width:720px;line-height:1.75;font-size:15.5px}
.lb-text h2{margin-top:26px}.lb-text h2:first-child{margin-top:0}
.lb-text h3{font:700 16px var(--sans);margin:16px 0 4px}
.lb-text p{margin:0 0 12px}.lb-text ul{margin:0 0 12px;padding-left:20px}.lb-text li{margin:3px 0}
.lb-text a{color:var(--red)}

.lb-stage{display:grid;gap:14px;padding:16px;border:2px solid var(--rule);background:var(--sheet);border-radius:4px;min-height:200px}
.lb-nojs{color:var(--ink-2)}
.lb-hint{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.lb-msg{margin:0;color:var(--red);font-size:14px;min-height:1em}
.lb-btn{font:700 15px var(--sans);padding:10px 18px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:4px;cursor:pointer;touch-action:manipulation}
.lb-btn.main{background:var(--ink);color:var(--paper)}
.lb-btn:disabled{opacity:.35;cursor:default}
.lb-btn:focus-visible,.lb-pad:focus-visible,.lb-cell:focus-visible,.lb-target:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.lb-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.lb-copied{flex-basis:100%;text-align:center;font-size:13px;color:var(--ink-2);word-break:break-all}
.lb-tabs{display:flex;gap:6px;flex-wrap:wrap}
.lb-tabs .lb-btn{padding:7px 14px;font-size:14px}
.lb-tabs .lb-btn.on{background:var(--ink);color:var(--paper)}

/* 누르는 큰 네모(반응속도·클릭 속도) */
.lb-pad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:300px;padding:20px;border:0;border-radius:6px;background:#2b5fa8;color:#fff;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lb-pad b{font:800 clamp(30px,7vw,54px)/1.1 var(--sans)}
.lb-pad span{font-size:15px;opacity:.92;text-align:center}
.lb-pad[data-s=wait]{background:#b3261e}
.lb-pad[data-s=go]{background:#1d8a3f}
.lb-pad[data-s=early]{background:#5c6877}

.lb-result{display:grid;gap:6px;justify-items:center;text-align:center;padding:18px 10px;border-top:1px solid var(--hair)}
.lb-result p{margin:0}
.lb-res-k{font-size:14px;color:var(--ink-2)}
.lb-res-v{margin:0;font:800 clamp(34px,8vw,56px)/1.1 var(--sans);color:var(--ink);text-align:center}
.lb-res-g{margin:0;font:700 19px var(--serif);color:var(--red);text-align:center}
.lb-res-x,.lb-res-b{font-size:14px;color:var(--ink-2)}
.lb-result .lb-row{margin-top:10px}

/* 숫자 기억 */
.lb-box{display:grid;gap:14px;justify-items:center;text-align:center;padding:24px 6px;min-height:240px;align-content:center}
.lb-digits{margin:0;font:800 clamp(34px,9vw,64px)/1.15 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;word-break:break-all}
.lb-digits.long{font-size:clamp(24px,6vw,44px)}
.lb-good{margin:0;font:800 30px var(--sans);color:#1d8a3f}
.lb-timebar{width:100%;max-width:420px;height:8px;background:var(--well);border-radius:99px;overflow:hidden}
.lb-timebar i{display:block;height:100%;width:100%;background:var(--red)}
.lb-form{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.lb-input{font:700 22px ui-monospace,Menlo,Consolas,monospace;padding:9px 12px;border:2px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);width:min(100%,300px);text-align:center}
input[type=date].lb-input{font:600 17px var(--sans)}

/* 조준 */
.lb-field{position:relative;width:100%;height:min(60vh,420px);background:var(--well);border-radius:6px;overflow:hidden;touch-action:manipulation;cursor:crosshair}
.lb-target{position:absolute;width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle,#fff 0 14%,#b3261e 15% 38%,#fff 39% 62%,#b3261e 63% 100%);box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* 색감 */
.lb-grid{display:grid;gap:6px;width:min(100%,460px);aspect-ratio:1;margin:0 auto}
.lb-grid[hidden]{display:none}
.lb-cell{border:0;border-radius:6px;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lb-cell.no{opacity:.35}
.lb-cell.ans{outline:4px solid var(--ink);outline-offset:-4px}

/* 1조 원 써보기 */
.lb-money{position:sticky;top:0;z-index:3;display:grid;gap:4px;justify-items:center;padding:12px;background:var(--ink);color:var(--paper);border-radius:4px}
.lb-money span{font-size:13px;opacity:.8}
.lb-money b{font:800 clamp(22px,6vw,36px)/1.15 var(--sans)}
.lb-money .lb-timebar{background:rgba(128,128,128,.4)}
.lb-shop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
.lb-shop li{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--hair);border-radius:4px;background:var(--paper)}
.lb-shop li.has{border-color:var(--ink)}
.lb-shop-i{font-size:26px;width:34px;text-align:center}
.lb-shop-n{flex:1;min-width:0;display:grid}
.lb-shop-n b{font-size:15px}
.lb-shop-n small{font-size:13px;color:var(--ink-2)}
.lb-shop-c{display:flex;align-items:center;gap:4px}
.lb-shop-c output{min-width:30px;text-align:center;font:700 15px var(--sans)}
.lb-btn.sq{padding:0;width:34px;height:34px;font-size:18px;line-height:1}
.lb-btn.sq.wide{width:44px;font-size:13px}
.lb-receipt{border-top:2px dashed var(--hair);padding-top:14px;display:grid;gap:8px}
.lb-receipt h3{margin:0;font:700 17px var(--serif)}
.lb-receipt ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14.5px}
.lb-receipt li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--hair);padding:3px 0}
.lb-receipt p{margin:0}
.lb-receipt .lb-row{justify-content:flex-start}

/* 인생 달력 */
.lb-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0;border-top:2px solid var(--rule);margin-top:10px}
.lb-stat{display:grid;gap:2px;padding:12px 10px;border-bottom:1px solid var(--hair)}
.lb-stat span{font-size:13px;color:var(--ink-2)}
.lb-stat b{font:800 19px var(--sans)}
.lb-stat small{font-size:12px;color:var(--ink-3)}
.lb-h3{font:700 16px var(--serif);margin:20px 0 8px}
.lb-life{display:block;width:100%;max-width:600px;height:auto;margin:0 auto}

@media (max-width:480px){.lb-stage{padding:12px}.lb-pad{min-height:260px}.lb-shop{grid-template-columns:1fr}}