/* 모스부호 번역기 '신호 테이프 작업대' — 2026-10-22. 구역: 머리 줄 → [문자 | 모스 부호] → 안내 줄 → 신호 테이프(v2-tone) → 부호표.
   accent는 '신호가 켜진 곳' 한 가지(신호등 + 지금 울리는 점·선). 테이프는 1단위 = --u px로 시간 길이대로 그린다. */
.mrs-work{container:mrs/inline-size;--u:6px}
.mrs-work [hidden]{display:none!important}
.mrs-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.mrs-alpha{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.mrs-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.mrs-ex .v2-label{margin-right:2px}
.mrs-ex button{height:28px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.mrs-ex button:hover{background:var(--btn);color:var(--ink);border-color:var(--line)}

/* 두 칸: 어느 쪽에 넣어도 반대 칸이 바뀐다. 넣고 있는 칸은 테두리가 진해진다 */
.mrs-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mrs-pane{display:flex;flex-direction:column;min-width:0;padding:14px 18px}
.mrs-pane + .mrs-pane{border-left:1px solid var(--soft)}
.mrs-ph{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;min-height:18px;margin:0 0 7px;line-height:18px}
.mrs-meta{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mrs-ta{display:block;flex:none;width:100%;min-height:92px;max-height:320px;resize:none;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);outline:0;overflow-wrap:anywhere;transition:border-color var(--ease),box-shadow var(--ease)}
.mrs-ta:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.mrs-ta::placeholder{color:var(--muted);opacity:.8}
.mrs-ta--code{font-family:var(--mono);font-size:15px;letter-spacing:.06em;line-height:1.7}
.mrs-pane.is-src .mrs-ta{border-color:var(--ink)}
.mrs-pane.is-err .mrs-ta{border-color:var(--accent)}
.mrs-pf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.mrs-kp{display:flex;gap:4px}
.mrs-kp button{display:grid;place-items:center;width:34px;height:32px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background var(--ease)}
.mrs-kp button:hover{background:var(--btn-hover)}
.mrs-kp button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mrs-kp span{font-family:var(--mono);font-size:14px;font-weight:700;line-height:1}
.mrs-kp i{display:block;height:6px;border-radius:3px;background:currentColor}
.mrs-kp i.d{width:6px}
.mrs-kp i.h{width:18px}

/* 안내 줄 */
.mrs-notes{list-style:none;margin:0;padding:10px 18px;border-top:1px solid var(--soft);display:grid;gap:4px}
.mrs-notes li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.mrs-notes li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--muted);align-self:center}
.mrs-notes li.is-err{color:var(--accent)}
.mrs-notes li.is-err::before{background:var(--accent)}
.mrs-notes li span{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.mrs-notes button{height:26px;padding:0 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);cursor:pointer}
.mrs-notes button:hover{background:var(--btn-hover)}

/* 신호 테이프 */
.mrs-deck{padding:14px 18px 12px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.mrs-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.mrs-lamp{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;background:var(--paper)}
.mrs-lamp.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash),0 0 14px 2px var(--accent-wash)}
.mrs-player .v2-btn .i{width:13px;height:13px}
.mrs-play{display:inline-grid;justify-items:start}
.mrs-play > span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px}
.mrs-play .b,.mrs-play.is-on .a{visibility:hidden}
.mrs-play.is-on .b{visibility:visible}
.mrs-speed{display:inline-flex;align-items:center;gap:8px;min-width:0}
.mrs-speed input{width:120px;height:24px;margin:0;accent-color:var(--fill);cursor:pointer}
.mrs-speed output{min-width:52px;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mrs-dur{font-family:var(--sans);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

.mrs-tape{--row:40px;--rg:10px;position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-start;gap:var(--rg) 0;margin-top:12px;max-height:calc(4 * var(--row) + 3 * var(--rg) + 2px);overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 0;scrollbar-width:thin}
.mrs-tape.is-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.mrs-tape.has-parts{--row:54px}
.mrs-empty{margin:0;padding:10px 0;font-family:var(--sans);font-size:13px;color:var(--muted)}
.mrs-tile{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:var(--row);margin:0 calc(var(--g,3) * var(--u)) 0 0;padding:0;border:0;border-radius:3px;background:none;color:var(--ink);cursor:pointer;font:inherit}
.mrs-tile:hover b{text-decoration:underline;text-underline-offset:3px}
.mrs-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mrs-tile b{font-family:var(--sans);font-size:17px;font-weight:750;line-height:1;white-space:nowrap}
.mrs-tile.is-p b{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.mrs-tile.is-x,.mrs-tile.is-u{cursor:default}
.mrs-tile.is-x b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.mrs-tile.is-u b,.mrs-tile.is-solo b{color:var(--muted)}
.mrs-sig{display:flex;align-items:flex-start}
.mrs-grp{display:flex;flex-direction:column;align-items:center;gap:4px}
.mrs-grp + .mrs-grp{margin-left:calc(3 * var(--u))}
.mrs-grp > span{display:flex;align-items:center;height:var(--u)}
.mrs-grp small{font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:1;color:var(--muted)}
.mrs-grp small.is-blank{visibility:hidden}
.mrs-sig i{display:block;height:var(--u);border-radius:calc(var(--u) / 2);background:var(--ink)}
.mrs-sig i + i{margin-left:var(--u)}
.mrs-sig i.d{width:var(--u)}
.mrs-sig i.h{width:calc(3 * var(--u))}
.mrs-tile.is-x .mrs-sig{width:calc(3 * var(--u));height:var(--u);border-radius:2px;background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 4px)}
.mrs-tile.is-u .mrs-sig i{background:var(--muted)}
.mrs-tile.is-we{position:relative}
.mrs-tile.is-we::after{content:"/";position:absolute;right:calc(-4 * var(--u));bottom:0;width:var(--u);font-family:var(--mono);font-size:12px;line-height:var(--u);text-align:center;color:var(--line);pointer-events:none}
/* 재생 중: 아직 안 울린 점·선은 흐리게, 지금 울리는 점·선은 accent, 지난 점·선은 다시 진하게(차오름) */
.mrs-tape.is-run .mrs-sig i{opacity:.25}
.mrs-tape.is-run .mrs-sig i.done{opacity:1}
.mrs-tape.is-run .mrs-sig i.on{opacity:1;background:var(--accent);box-shadow:0 0 0 2px var(--accent-wash)}
.mrs-tape.is-run .mrs-tile b{color:var(--muted)}
.mrs-tape.is-run .mrs-tile.is-cur b,.mrs-tape.is-run .mrs-tile.is-past b{color:var(--ink)}
.mrs-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:10px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mrs-legend span{display:inline-flex;align-items:center;gap:6px}
.mrs-legend i{display:block;height:5px;border-radius:3px;background:var(--muted)}
.mrs-legend i.d{width:5px}
.mrs-legend i.h{width:15px}
.mrs-legend .mrs-tip,.mrs-legend .v2-status{margin-left:auto}
.mrs-legend .v2-status{font-size:11.5px;color:var(--ink)}
.mrs-legend .v2-status:empty{display:none}
.mrs-legend .v2-status:not(:empty) ~ .mrs-tip{display:none} /* 상태 문구는 안내 자리에 겹쳐 나와 높이가 바뀌지 않는다 */

/* 부호표 */
.mrs-chart{padding:14px 18px 16px}
.mrs-ch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.mrs-hint{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--muted)}
.mrs-grid{--u:4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cw,58px),1fr));gap:6px}
.mrs-cell{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;min-width:0;height:50px;padding:8px 8px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;text-align:left;transition:background var(--ease),border-color var(--ease)}
.mrs-cell:hover{border-color:var(--line);background:var(--btn)}
.mrs-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mrs-cell b{font-family:var(--sans);font-size:15px;font-weight:750;line-height:1}
.mrs-cell.is-p{grid-column:span 2}
.mrs-cell.is-p b{font-family:var(--mono);font-size:12px}
.mrs-cell.is-p small{position:absolute;top:8px;right:8px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.mrs-cell sup{position:absolute;top:6px;right:7px;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--muted)}
.mrs-cell.is-hit{border-color:var(--ink)}
.mrs-ns{margin:0;padding:12px 18px;font-size:13px;color:var(--muted)}

@container mrs (max-width:600px){
  .mrs-panes{grid-template-columns:minmax(0,1fr)}
  .mrs-pane + .mrs-pane{border-left:0;border-top:1px solid var(--soft)}
  .mrs-ta{min-height:76px}
  .mrs-legend .mrs-tip,.mrs-legend .v2-status{margin-left:0;flex-basis:100%}
  .mrs-hint{margin-left:0;flex-basis:100%}
}
@container mrs (max-width:420px){
  .mrs-tape{--u:5px}
  .mrs-top,.mrs-pane,.mrs-deck,.mrs-chart{padding-left:14px;padding-right:14px}
  .mrs-notes{padding-left:14px;padding-right:14px}
  .mrs-speed input{width:110px}
}
@media (prefers-reduced-motion:reduce){.mrs-lamp.on{box-shadow:0 0 0 4px var(--accent-wash)}}

/* 본문: 부호표 칸의 점·선 그림, PARIS 시간 그림 */
.mrs-asig{display:inline-flex;align-items:center;gap:3px;margin-left:8px;vertical-align:middle}
.mrs-asig i{display:block;height:4px;border-radius:2px;background:var(--muted)}
.mrs-asig i.d{width:4px}
.mrs-asig i.h{width:12px}
.v2-article table[class^="mrs-t-"] code{font-family:var(--mono);font-size:13px;letter-spacing:.04em;white-space:nowrap}
.mrs-fig{margin:14px 0 18px}
.mrs-paris{--u:7px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 0;padding:14px 16px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--wash)}
.mrs-paris > span{display:flex;flex-direction:column;align-items:center;gap:6px;margin-right:calc(3 * var(--u))}
.mrs-paris > span:nth-last-child(2){margin-right:0}
.mrs-paris b{font-family:var(--sans);font-size:15px;font-weight:750;line-height:1}
.mrs-paris .mrs-asig{gap:var(--u);margin:0}
.mrs-paris .mrs-asig i{height:var(--u);border-radius:calc(var(--u) / 2);background:var(--ink)}
.mrs-paris .mrs-asig i.d{width:var(--u)}
.mrs-paris .mrs-asig i.h{width:calc(3 * var(--u))}
.mrs-paris .mrs-paris-w{width:calc(7 * var(--u));margin:0}
.mrs-paris .mrs-paris-w b{font-family:var(--mono);color:var(--line)}
.mrs-fig figcaption{margin-top:8px;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}