/* 스트룹 테스트 전용 CSS (2026-10-16). 무대(어두운 고정색 화면)·응답 버튼·조건별 막대·카드 비교 막대·문항별 차트·이번 방문 기록 sr-*. 공용 부품은 assets/v2.css
   화면은 두 테마 모두 같은 어두운 색이다: 글자 색 4가지(빨강·파랑·초록·노랑)의 대비를 테마와 상관없이 같게 맞춘다(노랑은 밝은 바탕에서 읽기 어려움). */
.stroop{container:srw / inline-size}
.sr-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.sr-stage{position:relative;padding:16px 18px 18px;min-width:0;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--soft)}
.sr-screen{--scr:#17130e;--scr-ink:#f4e8d0;--scr-mut:#b3a283;--scr-line:#3d3226;--scr-acc:#ffa877;position:relative;display:flex;flex-direction:column;min-height:300px;padding:12px 14px 16px;background:var(--scr);border:1px solid var(--line);border-radius:var(--radius);color:var(--scr-ink);overflow:hidden}
.sr-top{display:flex;justify-content:space-between;gap:8px;margin:0;font-family:var(--sans);font-size:12.5px;color:var(--scr-mut);font-variant-numeric:tabular-nums}
.sr-clock{font-weight:700;color:var(--scr-ink)}
.sr-prog{display:flex;gap:2px;height:6px;margin:8px 0 0}
.sr-prog i{flex:1 1 0;min-width:0;background:var(--scr-line);border-radius:1px;transition:background var(--ease)}
.sr-prog i.is-now{background:var(--scr-mut)}
.sr-prog i.is-ok{background:#d9cbad}
.sr-prog i.is-bad{background:repeating-linear-gradient(135deg,var(--scr-acc) 0 2px,#5a2c14 2px 4px)}
.sr-prog i.is-to{background:transparent;box-shadow:inset 0 0 0 1px var(--scr-acc)}
.sr-view{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:220px;padding:10px 0 18px;text-align:center}
.sr-word{margin:0;font-family:var(--sans);font-weight:800;font-size:clamp(44px,12cqi,84px);line-height:1.1;letter-spacing:.02em;user-select:none;-webkit-user-select:none}
.sr-word.is-in{animation:sr-in 90ms ease-out} /* 크기만 살짝(투명도는 그대로라 보이는 순간이 늦어지지 않음) */
@keyframes sr-in{from{transform:scale(.94)}to{transform:none}}
.sr-view.is-shake .sr-word{animation:sr-shake .32s}
@keyframes sr-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.sr-cue{margin:0;font-family:var(--sans);font-size:13px;color:var(--scr-mut)}
.sr-msg{margin:0;max-width:32em;font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--scr-ink)}
.sr-msg b{display:block;margin-bottom:6px;font-size:22px;font-variant-numeric:tabular-nums}
.sr-view.is-idle .sr-msg{margin-top:4px;font-size:12.5px;color:var(--scr-acc)}
.sr-fix{margin:0;font-family:var(--sans);font-size:44px;font-weight:300;line-height:1;color:var(--scr-mut)}
.sr-mark{position:absolute;left:0;right:0;bottom:2px;font-family:var(--sans);font-size:14px;font-weight:700}
.sr-mark.is-ok{color:#d9cbad}
.sr-mark.is-bad{color:var(--scr-acc)}
.sr-count{position:relative;display:grid;place-items:center;width:120px;height:120px;margin:0}
.sr-count svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sr-count circle{fill:none;stroke:var(--scr-mut);stroke-width:4;stroke-dasharray:327;animation:sr-ring .65s linear}
@keyframes sr-ring{from{stroke-dashoffset:327}to{stroke-dashoffset:0}}
.sr-count b{font-family:var(--sans);font-size:52px;font-weight:800;animation:sr-pop .65s ease-out}
@keyframes sr-pop{0%{transform:scale(1.25);opacity:.35}35%{transform:none;opacity:1}}
.sr-limit{position:absolute;left:14px;right:14px;bottom:8px;height:3px;background:var(--scr-line)}
.sr-limit i{display:block;height:100%;background:var(--scr-mut);transform-origin:left center}
.sr-done{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;font-family:var(--sans)}
.sr-done small{font-size:13px;color:var(--scr-mut)}
.sr-done b{font-size:clamp(40px,10cqi,64px);font-weight:800;line-height:1.05;color:var(--scr-ink);font-variant-numeric:tabular-nums}
.sr-done span{font-size:14px;color:var(--scr-ink)}
.sr-done a{margin-top:6px;font-size:13px;color:var(--scr-acc)}
.sr-demo-card{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-family:var(--sans);font-size:clamp(22px,6cqi,30px);font-weight:800}
.sr-grid-card{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px 10px;width:100%;max-width:560px}
.sr-grid-card.is-a[data-cells="100"]{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px 8px} /* 색 사각형 100칸은 10칸 줄, 단어 100칸은 5칸 줄(전체 화면에서는 10칸) */
.sr-grid-card i{display:block;height:22px;border-radius:2px}
.sr-grid-card b{font-family:var(--sans);font-size:17px;font-weight:800;line-height:1.35;white-space:nowrap}
.sr-view.is-card .sr-cue{order:-1} /* 카드 안내는 위에(긴 카드에서 아래로 밀리지 않게) */
.sr-stage[data-ph="cardA"] .sr-pad,.sr-stage[data-ph="cardB"] .sr-pad{position:sticky;bottom:8px;z-index:3} /* 읽는 도중 '다 읽음'이 늘 손 닿는 곳에 */
.sr-stage[data-ph="cardA"] .sr-key,.sr-stage[data-ph="cardB"] .sr-key{box-shadow:0 2px 10px rgba(0,0,0,.18)}
/* 응답 버튼: 누르는 순간 잰다(touch-action 으로 두 번 눌러 확대 막기) */
.sr-pad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sr-pad[data-mode="ox"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.sr-pad[data-mode="card"]{grid-template-columns:minmax(0,1fr)}
.sr-key{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:56px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;transition:background var(--ease),opacity var(--ease)}
.sr-key:hover:not(:disabled){background:var(--btn)}
.sr-key:active:not(:disabled){background:var(--btn-hover)}
.sr-key:disabled{opacity:.5;cursor:default}
.sr-key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-key i{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.sr-key span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-key b{font-size:22px;line-height:1}
.sr-key kbd,.sr-keys kbd{display:inline-block;min-width:1.6em;padding:0 4px;border:1px solid var(--soft);border-radius:2px;background:var(--card);font-family:var(--mono);font-size:11px;font-weight:700;line-height:1.55;color:var(--muted);text-align:center}
.sr-ctrl{display:flex;flex-wrap:wrap;gap:8px}
.sr-start{min-width:110px}
.sr-live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-set{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px 18px 18px}
.sr-set .v2-seg button{white-space:nowrap}
.sr-help,.sr-note{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.sr-mdesc{margin-top:-4px;color:var(--ink)}
.sr-keys p{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:2;color:var(--ink)}
/* 결과 */
.sr-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--soft)}
.sr-box{min-width:0;padding:14px 18px 16px;border-top:1px solid var(--soft)}
.sr-res>.sr-box{border-top:0}
.sr-hero{border-right:1px solid var(--soft)}
.sr-box>.v2-label{display:block;margin-bottom:8px}
.sr-tag{margin:0 0 10px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink)}
.sr-tag.is-ex{color:var(--muted)}
.sr-tag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--accent);vertical-align:1px}
.sr-tag.is-ex::before{background:transparent;box-shadow:inset 0 0 0 1px var(--muted)}
.sr-tag.is-live::before{animation:sr-live 1.2s ease-in-out infinite} /* 진행 중에만 깜빡임 */
@keyframes sr-live{50%{opacity:.25}}
.sr-hero .v2-big{margin-top:2px;color:var(--accent)}
.sr-rows{margin-top:12px}
.sr-rows li span em{margin-left:4px;font-size:12px}
.sr-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.sr-foot .v2-status{flex-basis:100%}
.sr-bars ul{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;padding:0;list-style:none}
.sr-bars li{display:grid;grid-template-columns:minmax(4.5em,auto) minmax(0,1fr) auto;align-items:center;gap:3px 10px;font-family:var(--sans);font-size:13px}
.sr-bl{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);white-space:nowrap}
.sr-bt{height:18px;border-radius:2px;background:var(--wash);overflow:hidden}
.sr-bt i{display:block;width:0;height:100%;background:var(--muted);transition:width .75s cubic-bezier(.2,.7,.2,1)}
.sr-bars li[data-c="inc"] .sr-bt i,.sr-bars li[data-c="diff"] .sr-bt i,.sr-bt--b i{background:var(--accent)}
.sr-bars li[data-c="neu"] .sr-bt i{background:repeating-linear-gradient(135deg,var(--muted) 0 3px,color-mix(in srgb,var(--muted) 45%,transparent) 3px 6px)}
.sr-bars li b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sr-bars li small{grid-row:2;grid-column:2 / 4;margin-top:-2px;font-size:11.5px;color:var(--muted)}
.sr-gap{margin:16px 0 0;font-family:var(--sans);font-size:13px;color:var(--muted)}
.sr-gap b{margin-right:6px;font-size:20px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.sr-bars li.sr-pair{grid-template-columns:minmax(0,1fr) auto}
.sr-pair .sr-bl{grid-column:1 / -1;white-space:normal}
.sr-ckeys{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:2px 0 0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.sr-ckeys i{display:inline-block;width:12px;height:10px;margin-right:5px;border-radius:1px;vertical-align:-1px}
.sr-ckeys .k-a{background:var(--muted)}
.sr-ckeys .k-b{background:var(--accent)}
/* 조건 기호(범례·막대): 색 + 무늬 */
.sr-sym{display:inline-block;flex:none;width:10px;height:10px;box-sizing:border-box}
.sr-sym--con,.sr-sym--same{border:1.6px solid var(--ink);border-radius:50%}
.sr-sym--neu{background:var(--muted)}
.sr-sym--inc,.sr-sym--diff{width:0;height:0;border-left:5.5px solid transparent;border-right:5.5px solid transparent;border-bottom:10px solid var(--accent)}
.sr-sym--mean{width:14px;height:0;border-top:1.5px dashed var(--muted);vertical-align:3px}
.sr-sym--x{background:linear-gradient(45deg,transparent 40%,var(--accent) 40% 60%,transparent 60%),linear-gradient(-45deg,transparent 40%,var(--accent) 40% 60%,transparent 60%)}
.sr-bhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;margin:0 0 8px}
.sr-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.sr-legend .sr-sym{margin-right:4px;vertical-align:-1px}
.sr-chart{position:relative;outline:none;touch-action:pan-y}
.sr-chart:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-chart svg{display:block;width:100%;height:auto;overflow:visible}
.sr-gl{stroke:var(--soft);stroke-width:1}
.sr-ax{fill:var(--muted);font-family:var(--sans);font-size:11px;font-variant-numeric:tabular-nums}
.sr-path{fill:none;stroke:var(--line);stroke-width:1.2;stroke-linejoin:round}
.sr-path.is-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:sr-draw 1.1s ease-out forwards}
@keyframes sr-draw{to{stroke-dashoffset:0}}
.sr-pt circle{fill:var(--card);stroke:var(--ink);stroke-width:1.6}
.sr-pt rect{fill:var(--muted)}
.sr-pt path{fill:var(--accent)}
.sr-pt .sr-x{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.sr-pt.is-cut{opacity:.35}
.sr-pt.is-sel circle,.sr-pt.is-sel rect,.sr-pt.is-sel path:not(.sr-x){stroke:var(--ink);stroke-width:2.4}
.sr-dots.is-in .sr-pt{animation:sr-dot .3s ease-out backwards;animation-delay:var(--d)}
@keyframes sr-dot{from{opacity:0}}
.sr-ml{stroke-width:1.2;stroke-dasharray:4 3}
.sr-ml--con,.sr-ml--same{stroke:var(--ink)}
.sr-ml--inc,.sr-ml--diff{stroke:var(--accent)}
.sr-ml-t{font-family:var(--sans);font-size:11px;font-weight:700;paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.sr-ml-t--con,.sr-ml-t--same{fill:var(--ink)}
.sr-ml-t--inc,.sr-ml-t--diff{fill:var(--accent)}
.sr-cur{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 2}
.sr-tip{min-height:1.6em;margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
/* 이번 방문 기록 */
.sr-hist{margin:0;padding:0;list-style:none}
.sr-hist li{display:grid;grid-template-columns:1.6em minmax(7.5em,1.1fr) minmax(60px,2fr) auto auto;align-items:center;gap:4px 12px;padding:8px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px}
.sr-hn{font-family:var(--mono);color:var(--muted)}
.sr-hist li.is-last .sr-hn{color:var(--accent);font-weight:700}
.sr-hm{min-width:0;font-weight:600;color:var(--ink)}
.sr-hm em{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}
.sr-hb{height:10px;border-radius:2px;background:var(--wash);overflow:hidden}
.sr-hb i{display:block;height:100%;background:var(--muted)}
.sr-hist li.is-last .sr-hb i{background:var(--accent)}
.sr-hv{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sr-hist small{color:var(--muted);white-space:nowrap}
.sr-clr{height:30px}
@container srw (max-width:720px){
  .sr-grid,.sr-res{grid-template-columns:minmax(0,1fr)}
  .sr-stage{border-right:0;border-bottom:1px solid var(--soft)}
  .sr-hero{border-right:0;border-bottom:1px solid var(--soft)}
}
@container srw (max-width:460px){
  .sr-stage,.sr-set,.sr-box{padding-left:12px;padding-right:12px}
  .sr-screen{min-height:270px}
  .sr-pad[data-mode="color"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sr-grid-card.is-a[data-cells="100"]{gap:5px}
  .sr-grid-card.is-a[data-cells="100"] i{height:18px}
  .sr-grid-card{gap:6px 6px}
  .sr-grid-card b{font-size:15px}
  .sr-hist li{grid-template-columns:1.4em minmax(0,1fr) auto auto}
  .sr-hn,.sr-hm,.sr-hv,.sr-hist small{grid-row:1}
  .sr-hb{grid-row:2;grid-column:2 / -1}
}
/* 전체 화면(R46): 화면·응답 버튼·시작 줄만 크게 */
.sr-stage:fullscreen,.sr-stage.is-full{justify-content:center;width:100%;height:100%;padding:24px;border:0;background:var(--paper);overflow:auto}
.sr-stage.is-full{position:fixed;inset:0;z-index:1000}
.sr-stage:fullscreen>*,.sr-stage.is-full>*{width:min(96vw,1100px);align-self:center}
.sr-stage:fullscreen .sr-screen,.sr-stage.is-full .sr-screen{flex:1 1 auto;min-height:min(60vh,560px);max-height:72vh}
.sr-stage:fullscreen .sr-word,.sr-stage.is-full .sr-word{font-size:clamp(56px,14vmin,150px)}
.sr-stage:fullscreen .sr-grid-card,.sr-stage.is-full .sr-grid-card{max-width:min(96vw,1000px)}
.sr-stage:fullscreen .sr-grid-card[data-cells="100"],.sr-stage.is-full .sr-grid-card[data-cells="100"]{grid-template-columns:repeat(10,minmax(0,1fr))}
.sr-stage:fullscreen .sr-grid-card b,.sr-stage.is-full .sr-grid-card b{font-size:clamp(18px,3.2vmin,30px)}
.sr-stage:fullscreen .sr-grid-card i,.sr-stage.is-full .sr-grid-card i{height:clamp(22px,4vmin,40px)}
.sr-stage:fullscreen .sr-key,.sr-stage.is-full .sr-key{min-height:68px;font-size:17px}
html.sr-noscroll{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .sr-bt i,.sr-prog i,.sr-key{transition:none}
  .sr-count circle,.sr-count b,.sr-word.is-in,.sr-view.is-shake .sr-word,.sr-tag.is-live::before{animation:none}
}