/* 이론 리더 + 두음법칙 뷰 전용 스타일 */
html,body{overflow-x:hidden}
.muted{color:var(--muted)}
.tabbar{display:flex;gap:8px;margin:16px 0}
.tab{flex:0 0 auto;padding:9px 18px;border:2px solid var(--border);background:var(--white,#fff);
  border-radius:99px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer}
.tab.on{border-color:var(--primary);color:var(--primary);background:#eef1ff}

.search{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:12px;
  font-size:15px;margin-bottom:12px;outline:none}
.search:focus{border-color:var(--primary)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{padding:7px 13px;border:1.5px solid var(--border);background:var(--white,#fff);border-radius:99px;
  font-size:13px;font-weight:600;color:#495057;cursor:pointer;transition:all .15s}
.chip.on{border-color:var(--primary);background:var(--primary);color:#fff}
.chip .n{display:inline-block;margin-left:4px;font-size:11px;opacity:.7}

.theory-cols{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.toc{max-height:72vh;overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--white,#fff);padding:6px}
.toc-h{padding:8px 10px;font-size:12px;font-weight:800;color:var(--primary)}
.toc-item{display:block;padding:9px 11px;border-radius:8px;font-size:13px;color:#343a40;
  text-decoration:none;cursor:pointer;border-bottom:1px solid #f1f3f5;line-height:1.4}
.toc-item:hover{background:#f1f3f5}
.toc-item.on{background:#eef1ff;color:var(--primary);font-weight:700}

.content{border:1px solid var(--border);border-radius:12px;background:var(--white,#fff);
  padding:18px 22px;min-height:60vh;overflow:auto;max-height:80vh}
.content h3{font-size:17px;color:var(--primary);margin:.9em 0 .4em;border-left:4px solid var(--primary);padding-left:9px}
.content h4{font-size:15px;margin:.8em 0 .35em;color:#2f3e8c}
.content table{border-collapse:collapse;width:100%;margin:.6em 0;font-size:13px}
.content th,.content td{border:1px solid var(--border);padding:6px 9px;text-align:left;vertical-align:top}
.content th{background:#eef1ff}
.content pre{background:#0f1320;color:#e6e6e6;padding:11px 13px;border-radius:8px;overflow:auto;font-size:12.5px;line-height:1.55}
.content ul{padding-left:20px}
.pg-meta{font-size:12px;color:var(--muted);margin-bottom:12px;padding-bottom:8px;border-bottom:1px dashed var(--border)}
.pg-meta .src{float:right;color:var(--primary);text-decoration:none}
mark.mn{background:#fff3bf;color:#5c3d00;font-weight:800;padding:0 3px;border-radius:4px}

.mnemo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.mn-key{word-break:keep-all;overflow-wrap:anywhere}
.mn-card{border:2px solid var(--border);border-radius:14px;padding:16px;background:var(--white,#fff);cursor:pointer;transition:all .15s}
.mn-card:hover{border-color:var(--primary);box-shadow:0 3px 12px rgba(59,91,219,.12)}
.mn-key{font-size:21px;font-weight:900;color:var(--primary);letter-spacing:1px}
.mn-title{font-size:13px;color:#495057;margin-top:5px;font-weight:700}
.mn-exp{font-size:12.5px;color:#868e96;margin-top:8px;line-height:1.5;max-height:0;overflow:hidden;transition:max-height .2s}
.mn-card.open .mn-exp{max-height:300px}

@media(max-width:760px){
  .theory-cols{grid-template-columns:1fr}
  .toc{max-height:34vh}
  .content{max-height:none}
}