/* 두뇌 벤치 — 앱 전용 스타일(공통은 css/site.css 사본) */
:root { --accent: #be185d; --accent-soft: #fce7f3; }
.tests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; align-items: stretch; }
.tests .card { margin-top: 0; }
.test { text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font: inherit; color: inherit; border: 1px solid var(--line); width: 100%; height: auto; min-height: 100%; }
.test:hover { border-color: var(--accent); }
.test .ic { font-size: 1.6rem; } .test b { font-size: 1.05rem; } .test small { color: var(--muted); line-height: 1.45; min-height: calc(1.45em * 3); } .test .rec { margin-top: auto; font-size: .78rem; color: var(--accent); font-weight: 600; min-height: 1.2em; line-height: 1.2; }
.all { text-align: center; } .all h2 { margin-bottom: 4px; }
.btn.big { padding: 12px 28px; font-size: 1.05rem; }
.btn.small { padding: 4px 10px; font-size: .8rem; }
.run-top { display: flex; gap: 10px; align-items: center; } .run-top h2 { margin: 0; flex: 1; }
.stage { min-height: 360px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; text-align: center; position: relative; }
.rx { width: 100%; height: 360px; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-size: 1.6rem; font-weight: 800; color: #fff; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.log .seg { margin: 8px 0 12px; flex-wrap: wrap; }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.log-list li { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.log-list time { font-weight: 700; }
.log-list div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.log-list .all { color: var(--accent); }
.rx.idle { background: #334155; } .rx.wait { background: #b91c1c; } .rx.go { background: #15803d; } .rx.early { background: #b45309; } .rx.show { background: #1d4ed8; font-size: 2.4rem; }
.rx small { font-size: .95rem; font-weight: 500; opacity: .85; margin-top: 8px; }
.digits { font-family: var(--mono); font-size: clamp(2rem, 9vw, 4rem); letter-spacing: .12em; font-weight: 700; }
.mem-input { font-family: var(--mono); font-size: 1.8rem; letter-spacing: .12em; text-align: center; width: min(100%, 420px); padding: 10px; border: 2px solid var(--line); border-radius: var(--radius); }
.mem-input:focus { border-color: var(--accent); outline: 0; }
.word { font-size: clamp(2.4rem, 10vw, 4.5rem); font-weight: 900; letter-spacing: .02em; line-height: 1.1; }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.cols button { border: 0; border-radius: var(--radius); padding: 16px 6px; font-weight: 800; font-size: 1rem; cursor: pointer; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.cols button[data-c="red"] { background: #dc2626; } .cols button[data-c="blue"] { background: #2563eb; } .cols button[data-c="green"] { background: #16a34a; } .cols button[data-c="yellow"] { background: #eab308; }
.letter { font-family: var(--mono); font-size: clamp(4rem, 18vw, 8rem); font-weight: 800; line-height: 1; min-height: 1.1em; }
.letter.hit { color: var(--ok); } .letter.miss { color: var(--bad); }
.same { padding: 18px 48px; font-size: 1.3rem; font-weight: 800; border-radius: 999px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.same:active { transform: scale(.97); }
.prog { position: absolute; top: 0; left: 0; right: 0; }
.mini { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.scores { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.scores li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.scores li b { font-size: 1.1rem; } .scores li .v { font-weight: 800; color: var(--accent); } .scores li .p { font-size: .85rem; color: var(--muted); }
.scores li.na { opacity: .5; }
.sum { font-size: 1.5rem; font-weight: 800; margin: 4px 0 2px; }
@media (max-width: 800px) { .tests { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cols button { padding: 14px 4px; font-size: .9rem; } .stage { min-height: 280px; } .rx { height: 280px; } .tests { grid-template-columns: 1fr; } .log-list li { grid-template-columns: 1fr; } }