/* 작은 영어사전: 다른 화면의 전역 스타일과 섞이지 않도록 ec-dict 접두사를 사용한다. */
.topbar-dictionary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid #bdd2ed; border-radius: 8px; background: #f4f8ff; color: #2d69ad; box-shadow: 0 2px 8px rgba(45, 105, 173, .08); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.topbar-dictionary svg { width: 16px; height: 16px; }
.topbar-dictionary:hover { border-color: #75a6da; background: #e9f2ff; color: #1f5e9f; }
.topbar-dictionary:focus-visible, .ec-dict-widget button:focus-visible, .ec-dict-widget input:focus-visible { outline: 3px solid rgba(59, 130, 208, .26); outline-offset: 2px; }

.ec-dict-layer { position: fixed; right: 28px; bottom: 26px; z-index: 10050; width: min(430px, calc(100vw - 28px)); height: min(680px, calc(100vh - 34px)); }
.ec-dict-layer[hidden] { display: none; }
.ec-dict-layer > .ec-dict-widget { height: 100%; }
html.ec-dict-mini-window, body.ec-dict-mini-window { width: 100%; min-width: 0; height: 100%; margin: 0; overflow: hidden; background: #fbfdff; font-size: 14px; }
.ec-dict-mini-window *, .ec-dict-mini-window *::before, .ec-dict-mini-window *::after { box-sizing: border-box; }
body.ec-dict-mini-window .ec-dict-layer { position: fixed; inset: 0; width: auto; height: auto; }
body.ec-dict-mini-window .ec-dict-layer > .ec-dict-widget { max-height: none; border: 0; border-radius: 0; box-shadow: none; }
.ec-dict-widget { display: flex; flex-direction: column; max-height: calc(100vh - 34px); overflow: hidden; background: #fbfdff; border: 1px solid #cbdcf1; border-radius: 14px; box-shadow: 0 18px 42px rgba(32, 75, 128, .2); color: #263852; font-family: Pretendard, sans-serif; }
.ec-dict-widget::before { content: ''; position: absolute; }
.ec-dict-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 11px 7px 15px; background: linear-gradient(135deg, #4e91d5, #2f6db2); border-bottom: 1px solid #285f9e; cursor: grab; user-select: none; }
.ec-dict-head:active { cursor: grabbing; }
.ec-dict-brand { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.ec-dict-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; background: #fff; color: #2e6daf; font-family: Arial, sans-serif; font-size: .72rem; font-weight: 900; box-shadow: 0 2px 6px rgba(16, 58, 105, .16); }
.ec-dict-head-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: rgba(255,255,255,.96); cursor: pointer; font-size: 1rem; line-height: 1; }
.ec-dict-head-btn:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.16); }
.ec-dict-open-status { position: fixed; top: 72px; right: 20px; z-index: 10050; max-width: min(360px, calc(100vw - 40px)); margin: 0; padding: 12px 16px; border: 1px solid #cbdcf1; border-radius: 10px; background: #fbfdff; color: #34445a; font: 14px/1.5 Pretendard, sans-serif; }
.ec-dict-open-status[hidden] { display: none; }
.ec-dict-open-status a { display: inline-block; margin: 10px 12px 0 0; color: #2463a8; font-weight: 800; }
.ec-dict-open-status button { border: 0; background: transparent; color: #60738f; font: inherit; cursor: pointer; }
.ec-dict-pin-btn { width: 36px; border: 1px solid rgba(255,255,255,.5); }
.ec-dict-pin-btn svg { width: 20px; height: 20px; }
.ec-dict-pin-btn.is-pinned { background: #fff; color: #2463a8; border-color: #fff; }
.ec-dict-pin-btn.is-pinned svg { fill: #dcecff; }
.ec-dict-pin-btn:disabled { opacity: .5; cursor: wait; }
html.ec-dict-external-window, body.ec-dict-external-window { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #fbfdff; font-size: 14px; }
.ec-dict-external-window *, .ec-dict-external-window *::before, .ec-dict-external-window *::after { box-sizing: border-box; }
body.ec-dict-external-window > .ec-dict-widget { height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
.ec-dict-external-window .ec-dict-head, .ec-dict-external-window .ec-dict-head:active,
.ec-dict-mini-window .ec-dict-head, .ec-dict-mini-window .ec-dict-head:active { cursor: default; }
.ec-dict-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 17px 18px 16px; background: #fbfdff; }
.ec-dict-resize-handle { display: flex; flex: 0 0 17px; align-items: center; justify-content: center; cursor: ns-resize; background: #fbfdff; }
.ec-dict-resize-handle span { width: 38px; height: 4px; border-radius: 999px; background: #b8cde7; box-shadow: 0 1px 0 #fff; }
.ec-dict-resize-handle:hover span { background: #6e9dd1; }
.ec-dict-search { display: flex; align-items: center; gap: 7px; padding: 4px 5px 4px 12px; border: 2px solid #6099d4; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(55, 111, 177, .08); }
.ec-dict-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: #263852; font: inherit; font-size: 1rem; outline: 0; }
.ec-dict-search input::placeholder { color: #96a6bd; }
.ec-dict-search button { flex: 0 0 auto; width: 33px; height: 33px; border: 0; border-radius: 7px; background: linear-gradient(135deg, #4d90d4, #2f70b7); color: #fff; cursor: pointer; }
.ec-dict-search button:hover { background: #2b68ad; }
.ec-dict-search svg { width: 17px; height: 17px; }
.ec-dict-tip { min-height: 17px; margin: 7px 2px 1px; color: #71829a; font-size: .72rem; line-height: 1.35; }
.ec-dict-tip.is-error { color: #bc5757; }
.ec-dict-entry { position: relative; margin-top: 8px; padding: 11px 3px 4px; }
.ec-dict-wordline { display: flex; align-items: center; gap: 7px; padding-right: 35px; }
.ec-dict-word-meta { display: flex; gap: 7px; margin-top: 7px; color: #70809a; font-size: .75rem; }
.ec-dict-word-meta span:first-child { color: #2d70b6; font-weight: 850; }
.ec-dict-word-meta span + span { padding-left: 7px; border-left: 1px solid #d8e4f1; }
.ec-dict-related { display: flex; align-items: center; gap: 6px; overflow-x: auto; margin: 0 -3px 2px; padding: 8px 3px; border-top: 1px solid #e1eaf5; border-bottom: 1px solid #e1eaf5; }
.ec-dict-related > span { flex: 0 0 auto; color: #2e6daf; font-size: .75rem; font-weight: 900; }
.ec-dict-related button { flex: 0 0 auto; padding: 2px 6px; border: 0; border-radius: 6px; background: #f2f7ff; color: #4b72a5; font: inherit; font-size: .78rem; cursor: pointer; }
.ec-dict-related button:hover { background: #e5f0ff; color: #2463a8; }
.ec-dict-part { margin: 3px 0 6px; color: #566984; font-size: .86rem; font-weight: 800; }
.ec-dict-senses { margin: 0; padding-left: 22px; color: #293b55; font-size: 1rem; line-height: 1.65; }
.ec-dict-senses li { padding-left: 4px; }
.ec-dict-word { margin: 0; color: #20314a; font-family: Arial, Pretendard, sans-serif; font-size: 1.72rem; line-height: 1.1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.ec-dict-ipa { color: #60738f; font-family: Georgia, serif; font-size: .92rem; }
.ec-dict-favorite { position: absolute; top: 8px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #cbdcf1; border-radius: 10px; background: #f4f8ff; color: #5e82ae; cursor: pointer; font-size: 1.18rem; line-height: 1; text-align: center; }
.ec-dict-favorite:hover { border-color: #87add9; background: #e8f2ff; color: #2c6daf; }
.ec-dict-favorite.is-saved { border-color: #9bbfe5; background: #dfeeff; color: #2f75bd; }
.ec-dict-audio { display: inline-flex; align-items: center; gap: 5px; margin: 9px 0 12px; padding: 6px 9px; border: 1px solid #cbdcf0; border-radius: 7px; background: #fff; color: #4d6482; font-size: .84rem; font-weight: 800; cursor: pointer; }
.ec-dict-audio:hover { border-color: #84afdd; background: #f0f7ff; color: #2868ad; }
.ec-dict-audio svg { width: 14px; height: 14px; }
.ec-dict-tabs { display: flex; gap: 0; overflow-x: auto; margin: 1px -3px 0; border-bottom: 1px solid #d5e2f2; scrollbar-width: none; }
.ec-dict-tabs::-webkit-scrollbar { display: none; }
.ec-dict-tabs button { flex: 0 0 auto; padding: 9px 13px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #71829a; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ec-dict-tabs button:hover { color: #2e6daf; }
.ec-dict-tabs button.is-active { border-bottom-color: #3a80c8; color: #2867aa; font-weight: 900; }
.ec-dict-tab-panel { min-height: 352px; }
.ec-dict-section { margin-top: 12px; padding: 11px 12px; border: 1px solid #e0e9f5; border-radius: 10px; background: #fff; box-shadow: 0 2px 7px rgba(41, 83, 133, .025); }
.ec-dict-label { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; color: #2c6dae; font-size: .83rem; font-weight: 900; letter-spacing: .04em; }
.ec-dict-label::before { width: 5px; height: 5px; border-radius: 50%; background: #4a8dd0; box-shadow: 0 0 0 3px #edf5ff; content: ''; }
.ec-dict-definition, .ec-dict-example { margin: 0; color: #34445a; font-size: .98rem; line-height: 1.58; }
.ec-dict-example { color: #40536d; font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.ec-dict-example-ko { display: block; margin-top: 4px; color: #718098; font-family: Pretendard, sans-serif; font-size: .88rem; font-style: normal; }
.ec-dict-example-count { margin-left: 2px; color: #7794b8; font-size: .72rem; font-weight: 700; letter-spacing: 0; }
.ec-dict-examples { display: grid; gap: 9px; }
.ec-dict-example-item { padding: 10px; border: 1px solid #dce8f6; border-radius: 9px; background: #f8fbff; }
.ec-dict-example-type { display: inline-flex; margin-bottom: 5px; padding: 2px 7px; border-radius: 10px; background: #e7f1ff; color: #2c6eb3; font-family: Pretendard, sans-serif; font-size: .7rem; font-weight: 800; font-style: normal; }
.ec-dict-example-word { color: #1d5fa5; font-family: inherit; font-weight: 800; }
.ec-dict-word-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ec-dict-word-chips button { padding: 6px 9px; border: 1px solid #bfd5ef; border-radius: 7px; background: #f2f7ff; color: #2d69ad; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.ec-dict-word-chips button:hover { border-color: #4e8dd0; background: #e5f0ff; }
.ec-dict-confusables { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.ec-dict-confusables button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 9px 10px; border: 1px solid #dce7f4; border-radius: 8px; background: #fafdff; color: #4e6180; text-align: left; font: inherit; cursor: pointer; }
.ec-dict-confusables button:hover { border-color: #91b6df; background: #f0f7ff; }
.ec-dict-confusables b { color: #2e6daf; font-size: .88rem; }
.ec-dict-confusables span { font-size: .83rem; line-height: 1.45; }
.ec-dict-divider { height: 1px; margin: 12px 0 8px; background: #e0e9f4; }
.ec-dict-recent { display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 3px 0 0; }
.ec-dict-recent::-webkit-scrollbar { display: none; }
.ec-dict-recent-label { flex: 0 0 auto; color: #73839b; font-size: .69rem; font-weight: 800; }
.ec-dict-recent-under-search { min-height: 25px; margin: 7px 2px 1px; padding: 0 1px 7px; border-bottom: 1px solid #e0e9f4; }
.ec-dict-recent-empty { color: #93a1b5; font-size: .71rem; white-space: nowrap; }
.ec-dict-recent button { flex: 0 0 auto; padding: 4px 7px; border: 1px solid #d1e0f1; border-radius: 6px; background: #fff; color: #506683; font: inherit; font-size: .7rem; cursor: pointer; }
.ec-dict-recent button:hover { border-color: #91b6dd; background: #f1f7ff; color: #2c69ab; }
.ec-dict-empty { padding: 6px 0 2px; color: #78879b; text-align: left; font-size: .87rem; line-height: 1.5; }
.ec-dict-loader { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 168px; color: #63758e; font-size: .84rem; }
.ec-dict-loader::before { width: 14px; height: 14px; border: 2px solid #4386cb; border-right-color: transparent; border-radius: 50%; content: ''; animation: ec-dict-spin .7s linear infinite; }
@keyframes ec-dict-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .topbar-dictionary { padding: 7px 9px; font-size: .76rem; }
  .ec-dict-layer { right: 14px; bottom: 14px; width: calc(100vw - 28px); height: min(680px, calc(100vh - 28px)); }
  .ec-dict-resize-handle { display: none; }
  .ec-dict-head { cursor: default; }
}