*{box-sizing:border-box}
.wrap{max-width:80rem;margin:0 auto;padding-block:1.9rem 4.3rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{display:grid;gap:0.95rem}
.eyebrow{font-family:var(--f-mono);font-size:0.8rem;letter-spacing:.08em;color:var(--muted)}
h1{font-family:var(--f-display);font-size:clamp(1.75rem,3.2vw,2.55rem);line-height:1.25;margin:0;text-wrap:balance}
.lede{color:var(--muted);max-width:68ch;margin:0}
.stats{display:flex;flex-wrap:wrap;gap:0.5rem 1.2rem;font-family:var(--f-mono);font-size:0.87rem;color:var(--muted)}
.stats b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.insights{background:var(--card);border:1px solid var(--line);border-radius:0.65rem;padding:1.05rem 1.2rem;display:grid;gap:0.55rem}
.insights h2{font-size:0.95rem;margin:0;letter-spacing:.04em;color:var(--accent)}
.insights ul{margin:0;padding-left:1.2rem;display:grid;gap:0.3rem;max-width:90ch}
.main{display:block}
.controls{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);padding-block:0.8rem;border-bottom:1px solid var(--line);display:grid;gap:0.65rem;margin-top:1.2rem}
.row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.lbl{font-size:0.8rem;color:var(--muted);letter-spacing:.04em;margin-right:0.15rem;min-width:3.4rem}
.seg button,.chip{min-height:40px;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:0.87rem;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0.33rem 0.75rem;border-radius:5px;cursor:pointer}
.seg button[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
input#q{min-height:44px;font:inherit;flex:1 1 14rem;min-width:0;padding:0.45rem 0.8rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--card);color:var(--ink)}
button:focus-visible,input:focus-visible,a:focus-visible,.item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.list{display:grid;margin-top:0.4rem}
.item{display:grid;grid-template-columns:5rem minmax(0,1fr) 10rem 6.2rem;gap:0.95rem;align-items:start;padding:0.95rem 0.4rem;border-bottom:1px solid var(--line);cursor:pointer;border-radius:0.4rem}
.item:hover{background:var(--accent-soft)}
.rel{font-family:var(--f-mono);font-variant-numeric:tabular-nums;display:grid;gap:0.25rem}
.rel .n{font-size:1.35rem;font-weight:500;line-height:1}
.meter{height:0.33rem;background:var(--line);border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.t{min-width:0}
.t .ko{font-weight:600;line-height:1.45}
.t .orig{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:0.875rem;color:var(--muted);margin-top:0.15rem}
.t .by{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:0.875rem;color:var(--muted);margin-top:0.25rem}
.tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.4rem}
.tag{font-size:0.77rem;padding:0.13rem 0.53rem;border-radius:0.27rem;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.tag.g{background:transparent;border:1px solid var(--line);color:var(--muted)}
.src{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:0.875rem;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.nums{font-family:var(--f-mono);font-size:0.83rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;display:grid;gap:0.15rem}
.stars{color:var(--mid);letter-spacing:1px}
.stars .off{color:var(--line)}
.empty{padding:2.7rem 0;color:var(--muted);text-align:center}
.note{font-size:0.83rem;color:var(--muted);margin-top:1.2rem;max-width:90ch}
/* 상세 창 */
.shade{position:fixed;inset:0;background:var(--overlay);z-index:20;backdrop-filter:blur(2px)}
aside.panel{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(960px,calc(100% - 48px));max-height:calc(100% - 4rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:0.95rem;box-shadow:var(--shadow);
  padding:28px 36px 40px;font-size:1rem;line-height:1.85}
.panel .close{min-height:44px;position:sticky;top:-1.3rem;float:right;margin:-0.8rem -1.3rem 0 0.8rem;font:inherit;font-size:0.93rem;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:0.4rem 1.05rem;cursor:pointer;z-index:2}
.panel .eyebrow{font-size:0.75rem}
.panel h2{font-family:var(--f-display);font-size:26px;line-height:1.35;margin:0.4rem 0;text-wrap:balance}
.panel .orig{color:var(--muted);font-size:0.92rem}
.meta{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:0.5rem 0.9rem;font-size:0.88rem;margin:1.3rem 0;padding:1.05rem 0;border-block:1px solid var(--line)}
.meta dt{color:var(--muted)} .meta dd{margin:0;overflow-wrap:anywhere}
.links{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0.8rem 0}
.links a{display:inline-flex;align-items:center;min-height:44px;font-size:0.875rem;text-decoration:none;border:1px solid var(--accent);color:var(--accent);padding:0.33rem 0.8rem;border-radius:5px}
.links a.solid{background:var(--accent);color:var(--on-accent)}
.sec{margin-top:1.9rem}
.sec h3{font-size:16px;letter-spacing:.06em;color:var(--accent);margin:0 0 0.6rem;padding-bottom:0.4rem;border-bottom:1px solid var(--line)}
.sec p{margin:0;max-width:72ch}
.sec ul,.sec ol{margin:0;padding-left:1.4rem;display:grid;gap:0.4rem;max-width:72ch}
blockquote{margin:0.75rem 0 0;padding:0.65rem 1rem;border-left:3px solid var(--accent);background:var(--accent-soft);font-size:0.92rem}
.mtab{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:0.5rem 0.9rem;font-size:0.95rem}
.mtab dt{color:var(--muted)} .mtab dd{margin:0}
.bd{display:flex;flex-wrap:wrap;gap:0.4rem;font-family:var(--f-mono);font-size:0.75rem;margin-top:0.3rem}
.bd span{border:1px solid var(--line);border-radius:0.27rem;padding:0.05rem 0.45rem;color:var(--muted)}

/* 탭 · 수업 모형 지도 */
.tabs{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:1.2rem;border-bottom:1px solid var(--line)}
.tabs button{font:inherit;font-size:0.95rem;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:0.55rem 0.9rem;cursor:pointer;margin-bottom:-1px}
.tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.tabs .cnt{font-family:var(--f-mono);font-size:0.8rem;color:var(--muted);margin-left:0.3rem}
.mview{display:grid;gap:1.6rem;margin-top:1.4rem}
.box{background:var(--card);border:1px solid var(--line);border-radius:0.65rem;padding:1.3rem 1.4rem}
.box h2{font-family:var(--f-display);font-size:20px;margin:0 0 0.6rem;text-wrap:balance}
.box h3{font-size:0.86rem;letter-spacing:.06em;color:var(--accent);margin:1rem 0 0.4rem}
.box p{margin:0;max-width:78ch}
.box ul{margin:0;padding-left:1.2rem;display:grid;gap:0.3rem;max-width:78ch}
.verdict{border-left:4px solid var(--accent);padding:0.7rem 1rem;background:var(--accent-soft);border-radius:0 0.4rem 0.4rem 0;margin:0.4rem 0 0.2rem;font-weight:500}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));gap:1rem 2rem}
.taxo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));gap:0.8rem}
.taxo article{border:1px solid var(--line);border-radius:0.5rem;padding:0.9rem 1rem;background:var(--paper)}
.taxo h4{margin:0;font-size:1rem}
.taxo .en{font-family:var(--f-mono);font-size:0.75rem;color:var(--muted)}
.taxo p{font-size:0.9rem;margin:0.4rem 0 0}
.taxo .ex{color:var(--muted);font-size:0.85rem}
.mtx{overflow-x:auto}
.mtx table{border-collapse:collapse;min-width:42rem;width:100%;font-size:0.88rem}
.mtx th,.mtx td{border-bottom:1px solid var(--line);padding:0.5rem 0.6rem;text-align:center;vertical-align:top}
.mtx th:first-child,.mtx td:first-child{text-align:left;font-weight:600;min-width:10rem}
.mtx td.note{text-align:left;color:var(--muted);font-size:0.82rem;min-width:14rem}
.mtx th{color:var(--muted);font-weight:500;font-size:0.8rem}
.sym{font-size:1.05rem}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:0.9rem}
.opts article{border:1px solid var(--line);border-radius:0.5rem;padding:1rem 1.1rem;background:var(--paper);display:grid;gap:0.35rem;align-content:start}
.opts h4{margin:0;font-size:1.02rem}
.opts dl{margin:0;display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:0.3rem 0.6rem;font-size:0.88rem}
.opts dt{color:var(--muted)} .opts dd{margin:0}
.stages{counter-reset:st;list-style:none;padding:0;margin:0;display:grid;gap:0.55rem}
.stages li{counter-increment:st;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:0.6rem;align-items:start}
.stages li::before{content:counter(st);font-family:var(--f-mono);font-size:0.85rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.stages b{display:block}
.mrow-wait{padding:2rem 0;color:var(--muted)}

/* 넓은 화면: 왼쪽 거르기 칸 고정 */
@media (min-width:1700px){
  .wrap{max-width:100rem}
  .main{display:grid;grid-template-columns:18rem minmax(0,1fr);gap:2.6rem;align-items:start;margin-top:1.4rem}
  .controls{top:1rem;margin-top:0;border-bottom:0;padding:1.1rem;background:var(--card);border:1px solid var(--line);border-radius:0.65rem;max-height:calc(100vh - 2rem);overflow-y:auto}
  .controls > .row{flex-direction:column;align-items:stretch;gap:0.4rem}
  .controls > .row > .row{width:100%;flex-wrap:wrap}
  .controls input#q{flex:none;width:100%}
  .lbl{min-width:0}
  .insights ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.4rem;max-width:none}
  .item{grid-template-columns:5.4rem minmax(0,1fr) 13rem 6.6rem}
}
@media (max-width:760px){
  .controls{position:static}
  .lbl{min-width:0}
  .item{grid-template-columns:3.4rem minmax(0,1fr);gap:0.65rem}
  .src,.nums{grid-column:2}
  .nums{text-align:left;display:flex;gap:0.8rem}
  .rel .n{font-size:1.15rem}
  aside.panel{left:0;top:0;transform:none;width:100%;max-height:none;height:100%;border-radius:0;border:0;font-size:1.05rem;
    padding-block:calc(1.3rem + env(safe-area-inset-top,0px)) calc(2.6rem + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .panel .close{top:0;margin:0 0 0 0.8rem}
  .meta{grid-template-columns:5.6rem minmax(0,1fr)}
}


.mview{grid-template-columns:minmax(0,1fr)}
#mSyn,.box,.mtx,.taxo,.opts{min-width:0;max-width:100%}

.legacy-main .main{min-width:0}.legacy-main .controls{background:var(--surface);padding:1rem;border:1px solid var(--line);border-radius:var(--radius)}
@media(min-width:761px) and (max-width:1699px){.legacy-main .controls{position:static}}
@media(max-width:760px){.legacy-main .controls{padding:.8rem}}

/* Reading density and accessible controls. */
#list .rel:before{content:'관계';font:12px/1.5 var(--font-body);color:var(--muted)}
.nums .stars:before{content:'저명도 ';font:12px/1.5 var(--font-body);color:var(--muted);letter-spacing:0}
.record-scope{display:flex;flex-wrap:wrap;gap:12px 28px;padding:16px 0;border-block:1px solid var(--line);margin:20px 0;font-size:13px;color:var(--muted)}
.record-scope strong{display:block;font-size:14px;color:var(--ink);font-weight:600;margin-top:3px}
.record-meta,.record-evidence{border-bottom:1px solid var(--line);margin:16px 0}
.record-meta>summary,.record-evidence>summary{min-height:44px;padding:10px 0;cursor:pointer;font-size:14px;color:var(--accent);font-weight:600}
.record-meta .meta{margin:8px 0 16px;border:0;padding:0;font-size:14px}
.record-evidence>div{padding:8px 0 20px;font-size:14px;line-height:1.8}
.record-evidence ul{margin:0;padding-left:20px}
.legacy-main .controls{max-height:none;overflow:visible}
@media(max-width:1100px){.legacy-main .item{grid-template-columns:56px minmax(0,1fr);gap:10px 16px}.legacy-main .item .src,.legacy-main .item .nums{grid-column:2;text-align:left}.legacy-main .item .nums{display:flex;flex-wrap:wrap;gap:16px}.model-catalog .item .rel{grid-column:1/-1;font-size:13px!important;color:var(--accent);font-weight:600}.model-catalog .item .t,.model-catalog .item .src,.model-catalog .item .nums{grid-column:1/-1}}
@media(max-width:760px){.seg button,.chip{min-height:44px;font-size:14px}.item{padding:18px 0;border-radius:0}.tag{font-size:12px}.src,.nums,.t .by,.t .orig{font-size:14px}.panel h2{font-size:23px}.panel .close{top:0;min-height:44px}.panel .links a{min-height:44px}.sec h3{font-size:16px}.panel .meta{grid-template-columns:84px minmax(0,1fr);font-size:14px}.record-scope{gap:12px 20px}.two{grid-template-columns:1fr}.taxo,.opts{grid-template-columns:1fr}}