body { background:#f4efe3; margin:0; padding:0; }
.container { max-width:1240px; }
.page-title { color:#111; text-align:center; font-size:1.7rem; font-weight:900; margin:0; }
.page-title-row { display:flex; align-items:center; justify-content:space-between; margin:0 auto 18px; max-width:1000px; }
.page-title-row .page-title { flex:1; }
.signs-back-btn { display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#2c2c2c,#121212); border:none; color:#d4af37; width:42px; height:42px; padding:0; border-radius:10px; cursor:pointer; font-weight:900; font-size:1.2rem; line-height:1; text-align:center; flex-shrink:0; box-shadow:0 3px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1); transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; text-decoration:none; }
.signs-back-btn span { display:none; }
.signs-back-btn::before { content:""; width:21px; height:21px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 11.2 12 3l9 8.2v9.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5v-9.3Zm2 1v6.8h2v-6h10v6h2v-6.8l-7-6.36L5 12.2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 11.2 12 3l9 8.2v9.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5v-9.3Zm2 1v6.8h2v-6h10v6h2v-6.8l-7-6.36L5 12.2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.signs-back-btn:hover { background:#d4af37; color:#111; transform:translateY(-1px); box-shadow:0 6px 12px rgba(0,0,0,0.22); }
.signs-back-spacer { display:block; width:42px; flex-shrink:0; }
.search-bar { display:block; width:100%; max-width:640px; box-sizing:border-box; margin:0 auto 14px; background:#fff; border:2px solid #eee; border-radius:12px; padding:10px 16px; color:#333; font-size:0.85rem; font-family:inherit; }
.search-bar:focus { outline:none; border-color:#d4af37; }
.search-bar::placeholder { color:#999; }
.tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; max-width:1000px; margin-left:auto; margin-right:auto; }
.tab { padding:6px 14px; border-radius:16px; font-weight:700; font-size:0.75rem; cursor:pointer; white-space:nowrap; background:#fff; border:2px solid var(--tabclr); color:var(--tabclr); transition:all .15s ease; }
.tab:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.tab.active { background:var(--tabclr); color:var(--tabtxt); border-color:var(--tabclr); }
.info-box { display:none; max-width:760px; margin:0 auto 18px; background:#eef4ff; border-right:5px solid #3b6fd4; border-radius:8px; padding:10px 14px; }
.info-box.show { display:block; }
.info-box .info-title { font-weight:900; font-size:0.85rem; margin-bottom:4px; }
.info-box .info-desc { font-size:0.75rem; color:#333; line-height:1.5; margin-bottom:6px; }
.info-box .info-count { font-weight:900; font-size:0.75rem; color:#111; }
.empty-note { display:none; max-width:760px; margin:0 auto; text-align:center; color:#777; font-size:0.85rem; padding:28px 16px; background:#fff; border-radius:10px; }
.empty-note.show { display:block; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; max-width:1200px; margin:0 auto; }
.sign-card { background:#fff; border-radius:12px; padding:12px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,0.07); border:1px solid transparent; border-top:3px solid #d4af37; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sign-card:hover { transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,0.14); border-color:rgba(212,175,55,0.5); border-top-color:#d4af37; }
.sign-card-expandable { cursor:pointer; }
.sign-card-expandable:focus-within { box-shadow:0 0 0 3px rgba(212,175,55,0.28), 0 10px 22px rgba(0,0,0,0.12); }
.sign-num { display:inline-block; background:#fdecec; color:#c0392b; font-weight:900; padding:3px 12px; border-radius:16px; font-size:0.8rem; margin-bottom:8px; }

.sign-icon { height:90px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.sign-icon img { max-width:90px; max-height:90px; width:auto; height:auto; }
.sign-meaning { font-size:0.8rem; font-weight:700; color:#111; line-height:1.5; }
@media (max-width:768px) {
  .page-title-row { margin-bottom:16px; }
  .page-title { font-size:1.4rem; }
  .signs-back-btn { width:38px; height:38px; }
  .signs-back-btn:active { transform:translateY(1px); box-shadow:0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); }
  .signs-back-spacer { width:38px; }
  .tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .tab { padding:5px 4px; border-radius:14px; font-size:0.6rem; line-height:1.2; white-space:normal; text-align:center; display:flex; align-items:center; justify-content:center; min-height:32px; border-width:1.5px; }
  .grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .sign-icon { height:56px; margin-bottom:6px; }
  .sign-icon img { max-width:56px; max-height:56px; }
  .sign-card { padding:10px; min-width:0; }
  .sign-meaning { font-size:0.72rem; overflow-wrap:break-word; word-break:break-word; }
  .sign-num { font-size:0.72rem; padding:3px 10px; }
}
@media (hover:none) {
  .sign-card:hover { transform:none; box-shadow:0 4px 10px rgba(0,0,0,0.07); border-color:transparent; border-top-color:#d4af37; }
}
.sign-details { margin-top:6px; }
.sign-details summary { cursor:pointer; font-size:0.72rem; color:#888; list-style:none; text-align:center; }
.sign-details summary::-webkit-details-marker { display:none; }
.sign-details summary::after { content:' \25BE'; }
.sign-details[open] summary::after { content:' \25B4'; }
.detail-text { font-size:0.72rem; color:#555; line-height:1.6; margin-top:6px; border-top:1px dashed #eee; padding-top:6px; text-align:right; }
.detail-text p { margin:0 0 6px 0; }
.detail-text p:last-child { margin-bottom:0; }