/* === pakapaka ローマ字変換ツールUI (roma) === */
.roma-tool{max-width:480px;margin:1.4em 0;padding:20px;border-radius:14px;background:linear-gradient(180deg,#fff 0%,#f3f7fc 100%);border:1px solid #d7e2f0;box-shadow:0 3px 12px rgba(70,110,160,.10);}
.roma-tool .roma-inputs{display:flex;gap:12px;}
.roma-tool .roma-field{flex:1;}
.roma-tool .roma-label{display:block;font-size:.82em;font-weight:700;color:#5b6b80;margin-bottom:6px;}
.roma-tool .roma-in{width:100%;box-sizing:border-box;font-size:1.15em;padding:11px;border:2px solid #d7e2f0;border-radius:10px;background:#fff;}
.roma-tool .roma-in:focus{outline:none;border-color:#3b82d6;box-shadow:0 0 0 3px rgba(59,130,214,.18);}
.roma-tool .wp-block-buttons{margin-top:14px;}
.roma-tool .wp-block-button__link{display:block;width:100%;box-sizing:border-box;padding:13px;border:0;border-radius:10px;font-size:1.1em;font-weight:700;color:#fff;text-align:center;cursor:pointer;background:linear-gradient(90deg,#3b82d6 0%,#2b6cb0 100%);box-shadow:0 3px 12px rgba(43,108,176,.30);transition:filter .15s;}
.roma-tool .wp-block-button__link:hover{filter:brightness(1.06);color:#fff;}
#js_chart{margin-top:8px;}
.roma-result .roma-lead{font-size:1.05em;margin:1em 0 .6em;}
.roma-result .roma-card{margin:.4em 0 1.1em;border-radius:12px;background:#fff;border:1px solid #d7e2f0;box-shadow:0 2px 10px rgba(70,110,160,.08);padding:16px 18px;}
.roma-result .roma-namecard{display:flex;padding:0;overflow:hidden;}
.roma-result .roma-col{flex:1;text-align:center;padding:18px 8px;}
.roma-result .roma-col + .roma-col{border-left:1px solid #e3ebf5;}
.roma-result .roma-romaji{display:block;font-size:1.5em;font-weight:700;color:#2b6cb0;letter-spacing:.04em;word-break:break-all;}
.roma-result .roma-sub{display:block;font-size:.76em;color:#8595a8;margin-top:5px;}
.roma-result .roma-note{font-size:.95em;color:#555;margin:1em 0 .4em;}
.roma-result .roma-copy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;}
.roma-result .roma-copy-row + .roma-copy-row{border-top:1px dashed #e3ebf5;}
.roma-result .roma-copy-text{font-family:monospace;font-size:1.15em;font-weight:700;color:#23344a;letter-spacing:.05em;word-break:break-all;}
.roma-result .roma-copy-text.roma-lower{font-weight:400;color:#667788;}
.roma-result .roma-copy-btn{flex:none;background:#eaf2fb;border:1px solid #b9d2ee;color:#2b6cb0;border-radius:6px;padding:6px 13px;font-size:.85em;font-weight:700;cursor:pointer;transition:background .15s;}
.roma-result .roma-copy-btn:hover{background:#dbeafd;}