/* 音位查询页的排版：一张表要好读、能在手机上横滑、能打印。 */
:root{
  --paper:#f4f0e6; --ink:#2c2a26; --muted:#776f65; --line:rgba(82,68,54,.16);
  --red:#74352d; --panel:#fffdf7;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{padding:0 18px 56px;color:var(--ink);background:var(--paper);
  font:15px/1.75 system-ui,-apple-system,"PingFang SC","Noto Sans CJK SC",sans-serif;
  -webkit-text-size-adjust:100%}
.doc{width:min(880px,100%);margin:0 auto;padding-top:62px}
.crumbs{margin:0 0 14px;color:var(--muted);font-size:12px;letter-spacing:.05em}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--red)}
h1{margin:0 0 14px;font:500 clamp(24px,5.2vw,34px)/1.28 Georgia,"Songti SC",serif;letter-spacing:.02em}
h2{margin:34px 0 12px;font:500 clamp(19px,3.6vw,23px)/1.35 Georgia,"Songti SC",serif;letter-spacing:.02em;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
h3{margin:24px 0 8px;font:500 16px/1.4 Georgia,"Songti SC",serif;color:#4a4238}
p{margin:0 0 14px}
.lead{font-size:16px;color:#453e35}
.note{padding:11px 14px;border-left:2px solid var(--red);background:rgba(116,53,45,.05);
  color:#6a6157;font-size:13px}
a{color:var(--red)}

table.grid{width:100%;margin:0 0 8px;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);font-variant-numeric:tabular-nums}
table.grid caption{padding:0 0 7px;color:var(--muted);font-size:12px;text-align:left}
table.grid th,table.grid td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
table.grid thead th{position:sticky;top:0;z-index:1;background:#f0ebdd;color:#584f45;
  font:500 12px/1.4 system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap}
table.grid tbody th{font-weight:500;white-space:nowrap}
table.grid tbody tr:hover{background:#fffaf0}
table.grid tbody tr:last-child th,table.grid tbody tr:last-child td{border-bottom:0}
table.grid.wide{min-width:720px}
table.grid.chart{min-width:660px}
table.grid.chart .no{color:var(--muted);font-size:12px;width:34px}
table.grid.chart .glyph{width:52px}
table.grid.chart .glyph img{display:block;width:42px;height:auto;
  background:#fffdf7;border:1px solid var(--line);border-radius:3px}
table.grid.chart .read{min-width:150px}
.scroll{overflow-x:auto;margin:0 0 10px;-webkit-overflow-scrolling:touch}

button.hear{display:grid;place-items:center;width:30px;height:30px;padding:0;
  border:1px solid var(--line);border-radius:50%;color:var(--red);background:#fffdf7;
  font-size:13px;line-height:1;cursor:pointer;transition:.15s}
button.hear:hover{border-color:var(--red);background:#fff6e9}
button.hear.on{color:#fff;border-color:var(--red);background:var(--red)}
button.hear.busy{opacity:.5}
button.hear.failed{color:var(--muted);border-style:dashed;cursor:not-allowed}
button.hear:focus-visible{outline:1px solid var(--red);outline-offset:2px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(154px,1fr));gap:10px;margin:0 0 8px}
.card{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);color:var(--ink);text-decoration:none;transition:.15s}
.card:hover{border-color:var(--red);background:#fffaf0}
.card b{display:block;font:500 16px/1.3 Georgia,"Songti SC",serif}
.card span{color:var(--muted);font-size:11.5px;letter-spacing:.03em}

dl.faq{margin:0}
dl.faq dt{margin:18px 0 5px;font:500 16px/1.45 Georgia,"Songti SC",serif}
dl.faq dd{margin:0;color:#4f4740}

.siblings{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 0;
  color:var(--muted);font-size:13px}
.siblings a,.siblings b{display:grid;place-items:center;min-width:46px;height:32px;padding:0 9px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);text-decoration:none;color:var(--ink)}
.siblings b{color:#fff;border-color:var(--red);background:var(--red);font-weight:500}

.loop{margin:40px 0 0;padding:21px 23px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.loop h2{margin:0 0 7px;padding:0;border:0;font-size:19px}
.loop p{margin:0 0 14px;color:#6a6157;font-size:13.5px}
.cta{display:flex;flex-wrap:wrap;gap:9px}
.cta a{display:grid;place-items:center;min-height:42px;padding:0 17px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--ink);text-decoration:none}
.cta a.primary{color:#fff;border-color:var(--red);background:var(--red)}
.cta a:hover{border-color:var(--red)}

footer{margin:38px 0 0;padding-top:16px;border-top:1px solid var(--line);color:#8a8177;font-size:11.5px}
footer p{margin:0 0 4px}

.global-page-back{position:fixed;top:18px;left:18px;z-index:9;width:36px;height:36px;
  color:#5a554c;font:300 27px/1 Georgia,serif}

@media(max-width:600px){
  body{padding:0 12px 44px;font-size:14.5px}
  .doc{padding-top:54px}
  .global-page-back{top:10px;left:10px}
  table.grid th,table.grid td{padding:7px 8px;font-size:13.5px}
}
@media print{
  body{background:#fff;padding:0}
  .loop,.cta,.crumbs,.siblings,.global-page-back,button.hear{display:none!important}
  table.grid{border-color:#999}
  table.grid thead th{background:#eee;position:static}
  a{color:inherit;text-decoration:none}
}