/* 순우리말 갤러리 전용 스타일. 공통 토큰(common.css)의 종이 테마 위에 얹는다.
   다크 모드는 common.css 의 변수 전환으로 자동 반영된다. */

/* ---- 도입부 ---- */
.tool-intro { margin-top: clamp(20px, 4vw, 36px); }
.tool-intro h1 { font-family: var(--font-serif); line-height: 1.2; }
.lead-note { color: var(--color-text-sub); font-size: .95rem; margin-top: var(--space-3); }

/* ---- 갤러리 / 퀴즈 탭 ---- */
.nv-tabs {
  display: flex; gap: 6px; margin: clamp(20px, 4vw, 32px) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.nv-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1.05rem;
  color: var(--color-text-sub); padding: 10px 16px 12px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.nv-tab:hover { color: var(--color-text); }
.nv-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ---- 갤러리 컨트롤 ---- */
.nv-controls { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.nv-search input {
  width: 100%; box-sizing: border-box; font: inherit;
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text);
}
.nv-search input:focus { outline: 2px solid var(--color-primary-weak); border-color: var(--color-primary); }
.nv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-chip {
  appearance: none; cursor: pointer; font: inherit; font-size: .9rem;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-sub);
}
.nv-chip:hover { border-color: var(--color-primary); color: var(--color-text); }
.nv-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.nv-namefilter {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--color-text-sub); font-size: .95rem; user-select: none;
}
.nv-namefilter input { width: 17px; height: 17px; accent-color: var(--color-primary); }
.nv-count { color: var(--color-text-sub); font-size: .9rem; margin: 0 0 var(--space-4); }

/* ---- 카드 그리드 ---- */
.nv-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.nv-card {
  position: relative; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 3px;
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  overflow: hidden;
}
.nv-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--color-border);
}
.nv-card.is-name::before { background: var(--color-primary); }
.nv-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.nv-card-wordwrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nv-word { font-family: var(--font-serif); font-size: 1.7rem; margin: 0; line-height: 1.1; }
.nv-pos { color: var(--color-text-sub); font-size: .82rem; }
.nv-nametag {
  flex-shrink: 0; font-size: .72rem; font-weight: 700; color: var(--color-primary);
  background: var(--color-primary-weak); padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.nv-def { margin: 0; line-height: 1.6; }
.nv-ex { margin: 0; color: var(--color-text-sub); font-size: .92rem; line-height: 1.55; font-style: italic; }
.nv-ex-mark {
  font-style: normal; font-size: .68rem; font-weight: 700; color: var(--color-accent);
  border: 1px solid var(--color-border); border-radius: 4px; padding: 1px 5px; margin-right: 2px;
}
.nv-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-2); }
.nv-badge { font-size: .72rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text-sub); }
.nv-badge.is-std { color: var(--color-accent); border-color: var(--color-primary-weak); background: var(--color-primary-weak); }
.nv-badge.is-opd { color: #6b7a3a; border-color: #dfe6c6; background: #eef2dc; }
.nv-badge.is-lbl { color: var(--color-text-sub); }
.nv-save {
  margin-left: auto; appearance: none; cursor: pointer; font: inherit; font-size: .82rem;
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 6px 12px; color: var(--color-text-sub);
}
.nv-save:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nv-empty { color: var(--color-text-sub); padding: var(--space-6) 0; text-align: center; }

/* ---- 퀴즈 ---- */
.nv-mode { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--color-primary-weak); margin-bottom: var(--space-5); }
.nv-mode-btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem;
  border: none; background: none; color: var(--color-accent); padding: 8px 18px; border-radius: 999px;
}
.nv-mode-btn.is-active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }

.nv-quiz {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: clamp(20px, 4vw, 36px); min-height: 320px;
}
.nv-q-top { display: flex; justify-content: space-between; color: var(--color-text-sub); font-size: .88rem; margin-bottom: var(--space-4); }
.nv-q-ask { color: var(--color-text-sub); margin: 0 0 var(--space-2); }
.nv-q-word { font-family: var(--font-serif); font-size: clamp(2.4rem, 8vw, 3.4rem); text-align: center; margin: var(--space-2) 0 var(--space-5); }
.nv-options { display: flex; flex-direction: column; gap: var(--space-3); }
.nv-opt {
  text-align: left; appearance: none; cursor: pointer; font: inherit;
  padding: 14px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
  line-height: 1.5; transition: border-color .12s;
}
.nv-opt:hover:not(:disabled) { border-color: var(--color-primary); }
.nv-opt:disabled { cursor: default; }
.nv-opt.is-correct { border-color: #4a9d5b; background: rgba(74,157,91,.12); }
.nv-opt.is-wrong { border-color: var(--color-primary); background: var(--color-primary-weak); }
.nv-q-note { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-bg); border-radius: var(--radius-sm); line-height: 1.6; }
.nv-q-ex { color: var(--color-text-sub); font-size: .9rem; }
.nv-next { margin-top: var(--space-4); }

/* 진위 판별 */
.nv-truefalse { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.nv-tf {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 1.05rem;
  padding: 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
}
.nv-tf:hover:not(:disabled) { border-color: var(--color-primary); }
.nv-tf:disabled { opacity: .55; cursor: default; }
.nv-verdict { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); line-height: 1.6; }
.nv-verdict.is-ok { background: rgba(74,157,91,.12); border: 1px solid #4a9d5b; }
.nv-verdict.is-no { background: var(--color-primary-weak); border: 1px solid var(--color-primary); }
.nv-verdict-head { font-weight: 700; margin: 0 0 6px; }
.nv-verdict-body { margin: 0; }

/* 결과 + 공유 */
.nv-result { text-align: center; }
.nv-result-eyebrow { color: var(--color-text-sub); margin: 0; }
.nv-result-score { font-family: var(--font-serif); font-size: clamp(2.6rem, 9vw, 3.6rem); margin: var(--space-2) 0; color: var(--color-primary); }
.nv-result-msg { color: var(--color-text-sub); margin: 0 0 var(--space-5); }
.nv-share { background: var(--color-bg); border: 1px dashed var(--color-grid-strong); border-radius: var(--radius); padding: var(--space-5); margin: 0 auto var(--space-4); max-width: 420px; }
.nv-share-label { color: var(--color-accent); font-size: .85rem; font-weight: 700; margin: 0 0 var(--space-3); }
.nv-share-word { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.nv-share-word strong { font-family: var(--font-serif); font-size: 2.2rem; }
.nv-share-def { color: var(--color-text-sub); font-size: .95rem; line-height: 1.5; }

.nv-source { color: var(--color-text-sub); font-size: .85rem; line-height: 1.6; margin: var(--space-5) 0 var(--space-6); }

@media (max-width: 520px) {
  .nv-grid { grid-template-columns: 1fr; }
}