/* ===========================================================================
   dictionary-v14.css — 내장 JLPT 사전 검색 패널

   styles.css, characters-v13.css 뒤에 로드된다.
   클래스 이름을 전부 `dict-*` 로 새로 잡아 기존 레이어와 겹치지 않게 했다.
   =========================================================================== */

.dict-panel{ display:flex; flex-direction:column; padding:20px 22px 16px; }
.dict-panel .panel-header{ margin-bottom:10px; }

/* --- 검색줄 + 급수 필터 ---------------------------------------------------- */
.dict-controls{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:4px 0 12px;
}
.dict-search{
  flex:1 1 260px; min-width:0;
  display:flex; align-items:center; gap:8px;
  padding:9px 13px;
  border:1px solid var(--border, #dfe6ec);
  border-radius:12px;
  background:var(--card, #fff);
  transition:border-color .15s, box-shadow .15s;
}
.dict-search:focus-within{
  border-color:var(--accent-border, #9fcde8);
  box-shadow:0 0 0 3px var(--accent-soft, #e8f4ff);
}
.dict-search-icon{ font-size:15px; color:var(--text-muted, #8d9aa4); flex:0 0 auto; }
.dict-search input{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:transparent;
  font-size:13px; color:var(--ink, #27323a);
}
.dict-search input::placeholder{ color:#a9b5bd; }

.dict-levels{ display:flex; gap:4px; flex:0 0 auto; }
.dict-levels button{
  border:1px solid var(--border, #dfe6ec);
  background:var(--card, #fff);
  color:var(--text-muted, #76838c);
  font-size:12px; font-weight:700;
  padding:7px 11px; border-radius:10px;
  white-space:nowrap;
}
.dict-levels button.selected{
  background:var(--accent-soft, #e8f4ff);
  border-color:var(--accent-border, #9fcde8);
  color:var(--primary-strong, #2f6a8e);
}

/* --- 상태줄 ---------------------------------------------------------------- */
.dict-status{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11px; color:var(--text-muted, #8d9aa4);
  margin-bottom:6px; min-height:20px;
}
.dict-status .text-button{ font-size:11px; }

/* --- 결과 목록 ------------------------------------------------------------- */
.dict-results{
  flex:1 1 auto;
  min-height:220px; max-height:420px;
  overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--border, #e7edf1);
  border-radius:13px;
  background:var(--card, #fff);
}
.dict-row{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) auto;
  gap:10px; align-items:center;
  padding:9px 13px;
  border-bottom:1px solid #f0f4f7;
}
.dict-row:last-child{ border-bottom:0; }
.dict-row.owned{ background:#fafcfd; }

.dict-word{ display:flex; align-items:baseline; gap:7px; min-width:0; }
.dict-word b{
  font-size:16px; font-weight:800; letter-spacing:-.3px;
  font-family:'Noto Sans JP','Noto Sans KR',sans-serif;
  color:var(--ink, #27323a);
  white-space:nowrap;
}
.dict-reading{
  font-size:11px; color:var(--text-muted, #8d9aa4);
  font-family:'Noto Sans JP',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dict-lv{
  font-size:9px; font-weight:800; letter-spacing:.3px;
  color:var(--primary-strong, #4a7f9e);
  background:var(--accent-soft, #eaf5fc);
  border-radius:5px; padding:1px 4px;
  flex:0 0 auto;
}
.dict-meaning{
  font-size:12.5px; color:#4f5d66;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 예문이 있어 '문장 완성' 문제까지 나오는 단어 표시 */
.dict-has-ex{
  display:inline-block; margin-left:6px;
  font-size:9px; font-weight:800;
  color:#6f9a63; background:#eef6ea;
  border-radius:4px; padding:1px 4px;
  vertical-align:1px;
}
.dict-add{
  flex:0 0 auto;
  border:1px solid var(--accent-border, #bcdcef);
  background:var(--accent-soft, #eaf5fc);
  color:var(--primary-strong, #2f6a8e);
  font-size:11px; font-weight:800;
  padding:6px 11px; border-radius:9px;
  white-space:nowrap;
}
.dict-add:hover:not(:disabled){ background:#dceffa; }
.dict-add:disabled{
  background:transparent; border-color:#e5ebef; color:#aab5bc; cursor:default;
}
.dict-empty{
  margin:0; padding:38px 20px; text-align:center;
  font-size:12px; line-height:1.7; color:var(--text-muted, #97a3ab);
}
.dict-empty small{ color:#b4bfc6; }

/* --- 하단 --------------------------------------------------------------- */
.dict-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:13px; padding-top:0; border:0;
}
#dictDeckCount{ font-size:12px; font-weight:700; color:var(--text-muted, #76838c); }
#dictDeckCount.is-full{ color:#c0714f; }

/* --- 좁은 화면 ------------------------------------------------------------ */
@media (max-width:860px){
  .dict-panel{ padding:16px 15px 14px; }
  .dict-results{ max-height:340px; }
}
@media (max-width:620px){
  /* 3열이 안 들어간다. 단어/뜻을 위아래로 쌓고 버튼만 오른쪽에 고정한다. */
  .dict-row{
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "word btn" "meaning btn";
    gap:2px 10px; padding:10px 12px;
  }
  .dict-word{ grid-area:word; }
  .dict-meaning{ grid-area:meaning; white-space:normal; }
  .dict-add{ grid-area:btn; align-self:center; }
  .dict-controls{ gap:8px; }
  .dict-levels{ width:100%; }
  .dict-levels button{ flex:1 1 0; padding:7px 4px; }
  .dict-footer{ flex-direction:column; align-items:stretch; gap:8px; }
  .dict-footer .button{ width:100%; }
  #dictDeckCount{ text-align:center; }
}

/* 도움말 안의 출처·라이선스 표기 (CC BY-SA 4.0 의무) */
.credit-note{
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--border, #e7edf1);
  font-size:10.5px; line-height:1.65; color:var(--text-muted, #97a3ab);
}
.credit-note a{ color:var(--primary-strong, #4a7f9e); }