/* 英文大小寫轉換專用樣式；共用元件沿用 site.css */
.cc-box { width: 100%; min-height: 150px; resize: vertical; font: inherit; font-size: 1.05rem; padding: 10px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--fg); }
.cc-box:focus { border-color: var(--brand); outline: none; }
#cc-output { background: var(--soft); }
.cc-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.cc-modes button { min-height: 58px; padding: 6px 8px; border: 2px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; color: var(--fg); text-align: center; }
.cc-modes button small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; line-height: 1.3; overflow-wrap: anywhere; }
.cc-modes button:hover { border-color: var(--brand); }
.cc-modes button[aria-pressed="true"] { border-color: var(--brand); background: #eff4ff; color: var(--brand); }
.cc-opts { margin-top: 6px; }
.content table td { overflow-wrap: anywhere; }
@media (min-width: 560px) { .cc-modes { grid-template-columns: repeat(3, 1fr); } }