/* 원소 주기율표 — 고유 레이아웃·분류색만 (박스/배경은 style_tools_base.css 통일) */
.wrap{ max-width:100%; padding:0 0 70px; }

.pt-head{ margin-bottom:18px; }
.pt-title{ font-size:38px; font-weight:800; margin:0; letter-spacing:-.02em; }
.pt-sub{ margin:8px 0 0; color:#6b7280; font-size:13px; }

.pt-bar{ margin-bottom:16px; }
.pt-search{ width:100%; max-width:560px; padding:11px 15px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:14px; margin-bottom:12px; }
.pt-legend{ display:flex; flex-wrap:wrap; gap:6px; }
.pt-leg{ border:1.5px solid #e5e7eb; padding:5px 11px; font-size:12px; font-weight:700; color:#374151; cursor:pointer; border-radius:20px; background:#fff; }
.pt-leg::before{ content:''; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; background:var(--c,#ccc); }
.pt-leg.on{ outline:2px solid #111827; outline-offset:1px; }

.pt-scroll{ overflow-x:auto; padding-bottom:8px; }
.pt-grid{ display:grid; grid-template-columns:repeat(18, minmax(46px,1fr)); grid-auto-rows:54px; gap:4px; min-width:880px; }

.pt-cell{ border:none; border-radius:7px; padding:4px 2px 2px; text-align:left; cursor:pointer; position:relative;
  display:flex; flex-direction:column; justify-content:flex-start; line-height:1.05; transition:transform .08s, opacity .15s; overflow:hidden; }
.pt-cell:hover{ transform:scale(1.08); z-index:5; }
.pt-cell.dim{ opacity:.16; pointer-events:none; }
.pt-n{ font-size:9px; opacity:.7; }
.pt-s{ font-size:16px; font-weight:800; }
.pt-k{ font-size:8px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pt-marker{ display:flex; align-items:center; justify-content:center; font-size:10px; color:#9ca3af; font-weight:700;
  border:1.5px dashed #e5e7eb; border-radius:7px; }

/* 분류별 색 */
.cat-alkali{ background:#fde68a; } .cat-alkaline{ background:#fed7aa; }
.cat-transition{ background:#fecaca; } .cat-postt{ background:#bbf7d0; }
.cat-metalloid{ background:#a7f3d0; } .cat-nonmetal{ background:#bae6fd; }
.cat-halogen{ background:#c7d2fe; } .cat-noble{ background:#ddd6fe; }
.cat-lanth{ background:#fbcfe8; } .cat-actin{ background:#f5d0fe; }
.cat-unknown{ background:#e5e7eb; }
.pt-leg.cat-alkali{ --c:#fbbf24; } .pt-leg.cat-alkaline{ --c:#fb923c; }
.pt-leg.cat-transition{ --c:#f87171; } .pt-leg.cat-postt{ --c:#4ade80; }
.pt-leg.cat-metalloid{ --c:#34d399; } .pt-leg.cat-nonmetal{ --c:#38bdf8; }
.pt-leg.cat-halogen{ --c:#818cf8; } .pt-leg.cat-noble{ --c:#a78bfa; }
.pt-leg.cat-lanth{ --c:#f472b6; } .pt-leg.cat-actin{ --c:#e879f9; }
.pt-leg.cat-unknown{ --c:#9ca3af; }

/* 상세 패널 */
.pt-detail{ margin-top:18px; border:1.5px solid #e2e8f0; border-radius:14px; padding:20px; display:flex; gap:18px; align-items:flex-start; position:relative; max-width:520px; }
.pt-d-symbol{ width:84px; height:84px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:800; flex-shrink:0; }
.pt-d-name{ font-size:20px; margin-bottom:12px; }
.pt-d-name b{ font-weight:800; } .pt-d-name span{ color:#6b7280; font-size:14px; }
.pt-d-rows{ display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; }
.pt-d-rows div{ font-size:14px; font-weight:700; color:#111827; }
.pt-d-rows span{ display:block; font-size:11px; color:#9ca3af; font-weight:600; margin-bottom:1px; }
.pt-d-close{ position:absolute; top:10px; right:14px; background:none; border:none; font-size:24px; color:#9ca3af; cursor:pointer; line-height:1; }
.pt-d-close:hover{ color:#111827; }

@media (max-width:480px){ .pt-title{ font-size:30px; } .pt-detail{ flex-direction:column; } }