/* 로마 숫자 변환기 — 자리값 조판대. 로마 숫자는 serif 대문자(비문 느낌), 수는 sans tabular. accent는 자리값 판의 구슬 한 곳.
   작업면 컨테이너 rmnw: 600px 미만은 등식 막대를 쌓고 자리값 판을 열(자리) × 줄(숫자)로 돌린다. */
.rmn-work,.v2-article{--rmn-serif:Georgia,"Times New Roman","Noto Serif",var(--serif)} /* ui-serif(New York)는 결합 윗줄 U+0305를 글자 왼쪽에 그림(2026-10-22 실측) */
.rmn-work{container:rmnw / inline-size}
.rmn-work .rmn-o{text-decoration:overline;text-decoration-thickness:.07em;text-decoration-skip-ink:none}
.rmn-say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 예시 띠 + 등식 막대 ---------- */
.rmn-top{padding:16px 18px 16px}
.rmn-ex{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin:0 0 14px}
.rmn-chips{display:flex;flex-wrap:wrap;gap:6px}
.rmn-chips button{display:inline-flex;align-items:baseline;gap:6px;height:30px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);color:var(--ink);white-space:nowrap;transition:background var(--ease),border-color var(--ease)}
.rmn-chips button:hover{background:var(--btn);border-color:var(--line)}
.rmn-chips small{font-size:11.5px;font-weight:600;color:var(--muted)}
.rmn-chips b{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums}
.rmn-chips b.rmn-rm{font-family:var(--rmn-serif);letter-spacing:.05em}
.rmn-eq{display:grid;grid-template-columns:minmax(0,2fr) 18px minmax(0,3fr);grid-template-areas:"fn eq fr" "na . kp";gap:8px 10px;margin:0}
.rmn-fn{grid-area:fn}
.rmn-fr{grid-area:fr}
.rmn-eqs{grid-area:eq;align-self:end;display:grid;place-items:center;height:var(--v2-ctl);font-family:var(--rmn-serif);font-size:22px;font-weight:700;color:var(--muted)}
.rmn-fn input{font-size:17px}
.rmn-fr input{text-align:left;font-family:var(--rmn-serif);font-size:18px;font-weight:700;letter-spacing:.06em;font-variant-numeric:normal}
.rmn-fr input::placeholder{letter-spacing:.02em}
.rmn-nact{grid-area:na;display:flex;gap:6px;justify-content:flex-end}
.rmn-nact .v2-btn{height:34px}
.rmn-kp{grid-area:kp;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
.rmn-kp button{display:grid;place-items:center;min-width:0;height:34px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);font-family:var(--rmn-serif);font-size:16px;font-weight:700;color:var(--ink);touch-action:manipulation;transition:background var(--ease),color var(--ease)}
.rmn-kp button:hover{background:var(--btn-hover)}
.rmn-kp svg{width:20px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.rmn-kp .rmn-kb-l{stroke-width:2.2;stroke-linecap:round}
.rmn-kp .rmn-kbar rect{stroke-dasharray:2 1.6}
.rmn-kp .rmn-kbar[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.rmn-work.is-bar .rmn-kp button[data-k]:not([data-k="del"]) span{text-decoration:overline;text-decoration-thickness:2px}

/* ---------- 풀이 판 ---------- */
.rmn-read{padding:16px 18px 18px;border-top:1px solid var(--soft)}
.rmn-verd{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink)}
.rmn-badge{flex:none;padding:2px 8px;border:1px solid var(--line);border-radius:var(--radius);font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);background:var(--paper)}
.rmn-badge:empty{display:none}
.rmn-badge[data-k="std"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.rmn-badge[data-k="err"],.rmn-badge[data-k="irr"]{border-color:var(--accent);color:var(--accent)}
.rmn-msg{flex:1 1 260px;min-width:0}
.rmn-count{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rmn-count:empty{display:none}
.rmn-fix{flex:none;height:30px}
.rmn-fix[hidden]{display:none}
.rmn-parts{margin:12px 0 0}
.rmn-parts[hidden]{display:none}
.rmn-parts button{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--rmn-serif);letter-spacing:.04em;color:var(--ink)}
.rmn-parts button small{font-family:var(--sans);font-size:11px;letter-spacing:0;color:inherit;opacity:.75}
.rmn-parts .rmn-pn{font-family:var(--sans);font-size:10.5px;letter-spacing:0;opacity:.6}
.rmn-tiles{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 8px;margin:16px 0 0;min-height:68px}
.rmn-tile{display:inline-grid;justify-items:center;gap:6px;padding:0 2px}
.rmn-tile b{font-family:var(--rmn-serif);font-size:44px;font-weight:700;line-height:1;letter-spacing:.04em;color:var(--ink)}
.rmn-tile small{min-width:100%;padding-top:5px;border-top:2px solid var(--soft);text-align:center;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.rmn-tile.is-bad b{text-decoration:underline dashed var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.rmn-tile.is-bad small{border-top-color:var(--accent);color:var(--accent)}
.rmn-plus{align-self:center;margin-top:-18px;font-style:normal;font-family:var(--sans);font-size:20px;color:var(--muted)}
.rmn-sum{display:inline-flex;align-items:baseline;gap:8px;margin-left:6px;padding-bottom:22px}
.rmn-sum i{font-style:normal;font-family:var(--sans);font-size:22px;color:var(--muted)}
.rmn-sum b{font-family:var(--sans);font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.rmn-work.is-ready .rmn-tile.is-new b{animation:rmn-rise .34s cubic-bezier(.2,.8,.2,1) both}
.rmn-work.is-ready .rmn-tile.is-new small{animation:rmn-fade .34s ease-out both}
@keyframes rmn-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rmn-fade{from{opacity:0}to{opacity:1}}

/* ---------- 자리값 판 ---------- */
.rmn-bd{padding:16px 18px 18px;border-top:1px solid var(--soft)}
.rmn-bh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 10px}
.rmn-bh p{margin:0}
.rmn-bh .v2-hint{flex:1 1 220px}
.rmn-bigb{align-self:center;height:30px}
.rmn-bigb[aria-expanded="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.rmn-board{display:grid;gap:4px}
.rmn-row{position:relative;display:grid;grid-template-columns:var(--rmn-lw,64px) repeat(10,minmax(0,1fr));gap:4px}
.rmn-row[hidden]{display:none}
.rmn-rl{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;padding:0 2px;font-family:var(--sans);line-height:1.2}
.rmn-rl b{font-size:12.5px;font-weight:700;color:var(--ink)}
.rmn-rl .rmn-px{display:none}
.rmn-rl small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rmn-c{position:relative;display:grid;place-items:center;min-width:0;height:40px;padding:9px 0 0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);cursor:pointer;transition:background var(--ease),color var(--ease)}
.rmn-c:hover:not(:disabled){background:var(--btn)}
.rmn-c i{position:absolute;top:2px;left:4px;font-style:normal;font-family:var(--sans);font-size:9.5px;line-height:1;color:var(--muted);opacity:.85}
.rmn-c b{font-family:var(--rmn-serif);font-size:14px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.rmn-c[data-d="0"] b{color:var(--muted);font-weight:400}
.rmn-c:disabled{background:none;border-style:dashed;cursor:default}
.rmn-c:disabled i{opacity:.35}
.rmn-c[aria-checked="true"]{color:var(--accent)}
.rmn-c[aria-checked="true"][data-d="0"]{color:var(--muted)}
.rmn-c:focus-visible{outline:2px solid var(--accent);outline-offset:1px;z-index:3}
.rmn-bead{position:absolute;top:0;left:0;z-index:2;width:0;height:0;border:1.5px solid var(--accent);border-radius:var(--radius);background:var(--accent-wash);pointer-events:none;transition:transform .34s cubic-bezier(.2,.8,.2,1),width .34s cubic-bezier(.2,.8,.2,1),height .34s,opacity .2s}
.rmn-bead.is-zero{border-style:dashed;border-color:var(--line);background:none}
.rmn-bead.is-still{transition:none}
.rmn-work.is-empty .rmn-bead{opacity:0}

/* ---------- 표기 카드 ---------- */
.rmn-fm{padding:16px 18px 18px;border-top:1px solid var(--soft)}
.rmn-fm > .v2-label{margin:0 0 10px}
.rmn-forms{display:flex;flex-wrap:wrap;gap:8px}
.rmn-forms:empty{display:none}
.rmn-card{flex:1 1 200px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l b" "v v" "h h";align-items:center;gap:4px 8px;min-width:0;padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.rmn-card .v2-label{grid-area:l;margin:0}
.rmn-card .rmn-cp{grid-area:b;height:28px;padding:0 10px}
.rmn-fv{grid-area:v;margin:2px 0 0;font-family:var(--rmn-serif);font-size:20px;font-weight:700;letter-spacing:.04em;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.rmn-fv.is-low{letter-spacing:.06em}
.rmn-card[data-f="us"] .rmn-fv{font-family:var(--mono);font-size:16px;letter-spacing:0}
.rmn-fh{grid-area:h;margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

/* ---------- 바닥 줄 ---------- */
.rmn-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 18px;border-top:1px solid var(--soft)}
.rmn-act .v2-status{margin:0;flex:1 1 200px}

/* ---------- 좁은 작업면 ---------- */
@container rmnw (max-width:599px){
  .rmn-top,.rmn-read,.rmn-bd,.rmn-fm{padding-left:14px;padding-right:14px}
  .rmn-act{padding-left:14px;padding-right:14px}
  .rmn-eq{grid-template-columns:minmax(0,1fr);grid-template-areas:"fn" "na" "fr" "kp"}
  .rmn-eqs{display:none}
  .rmn-nact{justify-content:flex-start}
  .rmn-nact .v2-btn{flex:1 1 0;justify-content:center}
  .rmn-tile b{font-size:34px}
  .rmn-sum b{font-size:24px}
  .rmn-board{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .rmn-row{grid-template-columns:minmax(0,1fr)}
  .rmn-rl{align-items:center;padding:0 0 4px;text-align:center}
  .rmn-c{height:auto}
  .rmn-c b{font-size:13px}
  .rmn-row{grid-template-rows:32px repeat(10,34px)}
  .rmn-board.is-big .rmn-c b{font-size:11.5px;letter-spacing:0}
  .rmn-board.is-big .rmn-rl .rmn-pl,.rmn-board.is-big .rmn-rl small{display:none}
  .rmn-board.is-big .rmn-rl .rmn-px{display:block;font-size:11.5px}
}
@container rmnw (max-width:419px){
  .rmn-tile b{font-size:28px}
  .rmn-tiles{gap:8px 6px}
  .rmn-plus{font-size:16px;margin-top:-16px}
}
@media (prefers-reduced-motion:reduce){
  .rmn-bead{transition:none}
  .rmn-work.is-ready .rmn-tile.is-new b,.rmn-work.is-ready .rmn-tile.is-new small{animation:none}
}

/* ---------- 본문 ---------- */
.v2-article .rmn-o{text-decoration:overline;text-decoration-thickness:.07em;text-decoration-skip-ink:none}
.v2-article td.r{font-family:var(--rmn-serif);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.v2-article td.r a{margin-left:6px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0}
.v2-article .rmn-ptab td.r{text-align:center;font-size:13px}
.rmn-100{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:4px;margin:14px 0 18px;padding:0;list-style:none}
.v2-article .rmn-100 li::before{content:none}
.v2-article .rmn-100 li{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;margin:0;padding:5px 8px;line-height:1.4;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.rmn-100 b{font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.rmn-100 span{font-family:var(--rmn-serif);font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
