/* tiers.css — 「지금 보고 있는 것」 띠와 「무엇이 열려 있나」 표. tiers.js 와 한 벌이다.
   ⚠ 칸 이름을 .tpill 로 둔다. 헬라어 verse.css 의 .pill 은 서랍 버튼이고
     ::after 로 「→」를 붙인다. 같은 이름을 쓰면 그 화살표가 새어 들어온다. */

.tiers{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 14px;
  font:400 11.5px var(--kr);color:var(--ink3)}
.tiers .tpill{border:1px solid var(--rule);border-radius:99px;padding:3px 10px}
.tiers .tpill.now{border-color:var(--gold);color:var(--ink)}
.tiers .q{border:none;background:none;color:var(--gold);cursor:pointer;
  font:400 11.5px var(--kr);text-decoration:underline}

.tmodal{position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:300;display:none;
  align-items:center;justify-content:center;padding:20px}
.tmodal.on{display:flex}
.tmbox{background:var(--card);border-radius:16px;max-width:620px;width:100%;
  max-height:82vh;overflow:auto;padding:26px 28px}
.tmbox h3{font:600 17px var(--kr);color:var(--ink);margin:0 0 4px}
.tmbox .sub{font:400 12.5px var(--kr);color:var(--ink3);margin:0 0 16px}
.tmbox table{width:100%;border-collapse:collapse;font:400 12.5px var(--kr)}
.tmbox th,.tmbox td{border-bottom:1px solid var(--rule);padding:9px 6px;text-align:center}
.tmbox th:first-child,.tmbox td:first-child{text-align:left;color:var(--ink2)}
.tmbox thead th{color:var(--ink3);font-weight:400;font-size:11.5px}
.tmbox .y{color:#1D8151}.tmbox .n{color:var(--ink3)}
.tmbox p{font:400 13px/1.9 var(--kr);color:var(--ink2);margin:14px 0 0}

/* 헬라어 화면에는 .mini 가 없다 */
.tmbox .mini{border:1px solid var(--rule);background:var(--bg);border-radius:99px;
  padding:6px 13px;font:400 12px var(--kr);color:var(--ink2);cursor:pointer}
.tmbox .mini:hover{border-color:var(--gold)}