/* 辞典・暗記のポップ化（2026-10-12）。pop.js の固定文と、用語の対話（data/term-extras.json）を出すための見た目。
   pop.css の吹き出し（.talk）は .exp-body/.ox-note にしか効かないので、.talk-host を持つ場所にも同じ見た目を当てる */

/* ── 吹き出し（章テキスト・過去問解説と同じ） ── */
.talk-host .talk { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
.talk-host .talk-face {
  flex: none; width: 46px; height: 46px; object-fit: contain; background: #fff;
  border: 2px solid #f0e2bd; border-radius: 50%; padding: 3px; box-sizing: border-box;
}
.talk-host .talk-bubble {
  min-width: 0; padding: 9px 13px; background: #fff; border: 1.5px solid #e6e1d3;
  border-radius: 4px 18px 18px 18px; line-height: 1.85; box-shadow: 0 2px 0 #0000000a; font-size: 15px;
}
.talk-host .talk-bubble p { margin: 0; }
.talk-host .talk-name { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #7a7466; }
.talk-host .talk--hero { flex-direction: row-reverse; }
.talk-host .talk--hero .talk-face { border-color: #c9d8f2; background: #f3f7ff; }
.talk-host .talk--hero .talk-bubble { background: #eef4ff; border-color: #c9d8f2; border-radius: 18px 4px 18px 18px; }
.talk-host .talk--hero .talk-name { color: #2c56a8; text-align: right; }
.talk-host .talk--broccoli .talk-face { border-color: #9fd07a; } .talk-host .talk--broccoli .talk-bubble { background: #f2fae9; border-color: #b5dc96; } .talk-host .talk--broccoli .talk-name { color: #3f7a1f; }
.talk-host .talk--carrot .talk-face { border-color: #f2a65e; } .talk-host .talk--carrot .talk-bubble { background: #fff3e8; border-color: #f0bf8f; } .talk-host .talk--carrot .talk-name { color: #b4560f; }
.talk-host .talk--radish .talk-face { border-color: #c9d3c4; } .talk-host .talk--radish .talk-bubble { background: #f6f8f4; border-color: #cfd8ca; } .talk-host .talk--radish .talk-name { color: #4b5e46; }
.talk-host .talk--eggplant .talk-face { border-color: #b99be0; } .talk-host .talk--eggplant .talk-bubble { background: #f6f0fd; border-color: #d2bdf0; } .talk-host .talk--eggplant .talk-name { color: #6a3fa0; }
.talk-host .talk--corncob .talk-face { border-color: #f3c34a; } .talk-host .talk--corncob .talk-bubble { background: #fff8e1; border-color: #f0c650; } .talk-host .talk--corncob .talk-name { color: #a06400; }
.talk-host .talk--sweetpotato .talk-face { border-color: #c99393; } .talk-host .talk--sweetpotato .talk-bubble { background: #fbf1f1; border-color: #e2bcbc; } .talk-host .talk--sweetpotato .talk-name { color: #8a3b3b; }
.talk-host .talk.is-aha .talk-bubble { background: var(--pop-soft, #fff3c4); border: 2px solid var(--pop, #f6c445); }
.talk-host .talk.is-aha .talk-bubble::before { content: '💡 なるほど'; display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; color: var(--pop-ink, #5a3c00); }
.talk-host .hero-note {
  position: relative; margin: 14px 0 4px; padding: 12px 16px 10px 18px;
  background: repeating-linear-gradient(#fffef8 0 29px, #e9edf5 29px 30px);
  border: 1px solid #dfe5ef; border-left: 5px solid #8fb0e8; border-radius: 6px 14px 14px 6px;
}
.talk-host .hero-note-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 800; color: #2c56a8; }
.talk-host .hero-note-title img { width: 28px; height: 28px; object-fit: contain; }
.talk-host .hero-note ul { margin: 0; padding-left: 1.2em; line-height: 30px; font-size: 14px; }
@media (max-width: 560px) { .talk-host .talk-face { width: 40px; height: 40px; } .talk-host .talk-bubble { font-size: 14px; } }

/* ── 辞典 ── */
.dict-hello .pop-say { margin: 0 0 14px; }
.sharoshi-app .dict-filters { margin-top: 12px; }
.sharoshi-app .dict-filters > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; list-style: none;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; color: var(--accent-dark);
}
.sharoshi-app .dict-filters > summary::-webkit-details-marker { display: none; }
.sharoshi-app .dict-filters > summary::before { content: '▸'; font-size: 11px; }
.sharoshi-app .dict-filters[open] > summary::before { content: '▾'; }
.sharoshi-app .dict-filters-now { font-weight: 600; color: var(--muted); }
.sharoshi-app .dict-filters.is-filtering > summary { background: var(--accent); color: #fff; border-color: var(--accent); }
.sharoshi-app .dict-filters.is-filtering .dict-filters-now { color: #fff; }
.sharoshi-app .dict-subject-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.sharoshi-app .dict-subject-row .subject-button { min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.sharoshi-app .dict-owner-actions { margin-top: 10px; }
.sharoshi-app .dict-layout { grid-template-columns: minmax(280px, 380px) minmax(560px, 1fr); }
.sharoshi-app .term-group {
  margin: 14px 0 6px; padding: 0 4px; font-size: 13px; font-weight: 900; color: var(--accent-dark); letter-spacing: .08em;
}
.sharoshi-app .term-group:first-child { margin-top: 0; }
.sharoshi-app .term-hit { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: #fff3c4; color: #7a5a1a; font-size: 11px; font-style: normal; font-weight: 700; }
.sharoshi-app .dict-zero { padding: 12px; }
.sharoshi-app .dict-zero .pop-say { margin: 0; }
.sharoshi-app .dict-stars { color: #e0a400; font-size: 12px; letter-spacing: .1em; }
.sharoshi-app .dict-lead { margin: 14px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.8; color: var(--ink); }
.sharoshi-app .dict-story { margin: 6px 0 10px; }
.sharoshi-app .dict-source { margin: 6px 0 14px; }
.sharoshi-app .dict-source > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); }
.sharoshi-app .dict-source > p { margin: 8px 0 0; padding: 10px 13px; background: var(--paper); border-radius: 8px; font-size: 14px; line-height: 1.9; }
.sharoshi-app .dict-points { display: grid; gap: 10px; margin: 8px 0 14px; }
.sharoshi-app .dict-point { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #e8c19a; background: #fff6ee; }
.sharoshi-app .dict-point img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.sharoshi-app .dict-point b { display: block; margin-bottom: 2px; font-size: 13px; color: #9a5418; }
.sharoshi-app .dict-point b small { margin-left: 8px; font-size: 11px; font-weight: 700; color: #b08660; }
.sharoshi-app .dict-point p { margin: 0; font-size: 14px; line-height: 1.85; }
.sharoshi-app .dict-point--sweetpotato { border-color: #f0c650; background: #fff8e1; }
.sharoshi-app .dict-point--sweetpotato b { color: #b06a00; }
.sharoshi-app .dict-point--sweetpotato b small { color: #c99a2e; }
.sharoshi-app .detail-action small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; opacity: .85; }
.sharoshi-app .related-label { align-self: center; margin-right: 4px; font-size: 12px; font-weight: 800; color: var(--muted); }
.sharoshi-app .related .related-missing { padding: 6px 10px; color: var(--muted); border: 1px dashed #d8d0c0; border-radius: 6px; font-size: 13px; }
.sharoshi-app .related button.is-missing { color: #7a5a1a; background: #fff8e4; border: 1px dashed #d9b35a; }
.sharoshi-app .related button.is-missing small { margin-left: 6px; font-size: 10px; }
.sharoshi-app .detail-maint { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sharoshi-app .detail-maint > summary { font-size: 12px; color: var(--muted); }
@media (max-width: 1040px) {
  .sharoshi-app .dict-layout { grid-template-columns: 1fr; }
  .sharoshi-app .search-band { padding-top: 14px; padding-bottom: 12px; }
}

/* ── 暗記 ── */
.flash-hello .pop-say { margin: 0 0 14px; }
.sharoshi-app .flash-pop { margin: 0 0 10px; }
.sharoshi-app .flash-pop .pop-say { margin: 0; }
.sharoshi-app .flash-deck-btn.is-alt { border-color: #f0c650; background: #fff8e1; }
.sharoshi-app .flash-ask { margin: 8px 0 0; }
.sharoshi-app .flash-ask .talk { margin: 0; }
.sharoshi-app .flash-ask .talk-bubble { font-size: 15px; }
.sharoshi-app .flash-card-face .flash-ask .talk-face { width: 42px; height: 42px; }
.sharoshi-app .flash-answer { margin: 0 0 6px; }
.sharoshi-app .flash-card-source { margin: 8px 0 0; }
.sharoshi-app .flash-card-source > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted); }
.sharoshi-app .flash-card-source > p { margin: 6px 0 0; padding: 10px 12px; background: var(--paper); border-radius: 8px; font-size: 13px; line-height: 1.85; }
.sharoshi-app .flash-card-main.is-number { display: block; }
.sharoshi-app .flash-card-main.is-number b { color: #b4232c; background: #fff3c4; padding: 0 4px; border-radius: 4px; }
.sharoshi-app .flash-card-face.flash-ox { cursor: default; }
.sharoshi-app .flash-ox-where { margin: -8px 0 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sharoshi-app .flash-ox-stem { flex: none; font-size: 17px; line-height: 1.9; }
.sharoshi-app .flash-ox-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.sharoshi-app .flash-ox-btn {
  min-height: 56px; border: 2px solid var(--line); border-radius: 14px; background: #fff; font: inherit; font-size: 18px; font-weight: 900; cursor: pointer;
}
.sharoshi-app .flash-ox-btn.is-o { color: #1f7a3a; border-color: #9ad0ab; }
.sharoshi-app .flash-ox-btn.is-x { color: #b4232c; border-color: #e7a2a6; }
.sharoshi-app .flash-ox-btn:disabled { cursor: default; opacity: .55; }
.sharoshi-app .flash-ox-btn.is-answer { opacity: 1; background: #f3fbf0; border-color: #4f9a73; box-shadow: 0 0 0 3px #d4efdd; }
.sharoshi-app .flash-ox-btn.is-picked:not(.is-answer) { opacity: 1; background: #fff0f0; border-color: #e07a80; }
.sharoshi-app .flash-ox-verdict { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 6px; font-size: 20px; font-weight: 900; }
.sharoshi-app .flash-ox-verdict span { font-size: 14px; font-weight: 700; color: var(--muted); }
.sharoshi-app .flash-ox-verdict.is-ok { color: #1f7a3a; }
.sharoshi-app .flash-ox-verdict.is-ng { color: #b4232c; }
.sharoshi-app .flash-ox-why { margin: 0 0 10px; padding: 10px 12px; background: var(--paper); border-radius: 8px; font-size: 14px; line-height: 1.85; }
.sharoshi-app a.flash-link { text-decoration: none; display: inline-flex; align-items: center; }
.sharoshi-app .flash-desc-senpai { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.sharoshi-app .flash-desc-senpai img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; border: 2px solid #c9d8f2; background: #f3f7ff; }
.sharoshi-app .flash-desc-senpai b { display: block; font-size: 11px; color: #2c56a8; }
.sharoshi-app .flash-desc-comment img { float: left; width: 40px; height: 40px; margin: 0 8px 0 0; object-fit: cover; border-radius: 50%; border: 2px solid #c9d8f2; }
.sharoshi-app .flash-complete-pop { max-width: 520px; margin: 4px auto 16px; text-align: left; }
.sharoshi-app .flash-complete-pop .pop-say { margin: 0; }
@media (prefers-reduced-motion: reduce) { .talk-host .talk-face, .flash-pop .pop-say-veg { animation: none; } }