/* 영문 이름 변환기 — 계산기 공용 모양 위에, 결과 이름을 크게. 후보마다 복사 단추 */
:root { --ac: #1f6f5c; }
.rn-form { display: grid; gap: 12px; margin-top: 16px; }
.rn-two { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.rn-in { width: 100%; min-width: 0; height: 56px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 900 26px/1 var(--font-sans); box-sizing: border-box; }
.rn-in:focus { outline: 3px solid color-mix(in srgb, var(--ac) 40%, transparent); outline-offset: 1px; }
.rn-main { font-size: clamp(30px, 9vw, 44px); overflow-wrap: anywhere; }
.rn-copy { min-width: 64px; min-height: 40px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); font: 800 14px/1 var(--font-sans); cursor: pointer; }
.rn-copy:active { transform: translateY(2px); }
.rn-copy--main { margin-top: 12px; width: 100%; min-height: 48px; background: var(--ac); color: #fff; font-size: 16px; }
.rn-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.rn-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 12px 12px; border-radius: 12px; background: #f6f2ea; animation: cc-up .4s backwards; }
.rn-list li:nth-child(2) { animation-delay: .06s } .rn-list li:nth-child(3) { animation-delay: .12s }
.rn-k { grid-column: 1 / -1; font: 800 12.5px/1.3 var(--font-sans); color: var(--sub); }
.rn-v { font: 900 21px/1.25 var(--font-sans); overflow-wrap: anywhere; }
.rn-list small { grid-column: 1 / -1; font: 600 12px/1.3 var(--font-sans); color: var(--sub); }
#rsyl td small { color: var(--sub); }
.rn-sur { margin: 14px 0 0; padding: 10px 12px; border-left: 4px solid var(--ac); background: #f6f2ea; font: 600 13.5px/1.6 var(--font-sans); color: var(--ink); word-break: keep-all; }
.rn-pass { margin: 16px 0 0; padding: 12px 14px; border: 2px solid var(--red); border-radius: 12px; background: #fff1ec; font: 600 14px/1.5 var(--font-sans); color: #a8321c; word-break: keep-all; }
.rn-pass b { font-weight: 900; }
.rn-pass a { color: #a8321c; font-weight: 800; }
@media (max-width: 380px) { .cc-title { font-size: 32px; } .rn-in { font-size: 22px; } }