:root{--ink:#1d2a33;--mut:#5c6b75;--bg:#fbfaf7;--card:#fff;--acc:#0e7c86;--line:#e6e2da}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--acc)}header{background:#fff;border-bottom:1px solid var(--line)}nav{max-width:1150px;margin:auto;padding:.8rem 1rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
nav .logo{font-weight:800;font-size:1.1rem;color:var(--ink);text-decoration:none;margin-right:auto}nav a{text-decoration:none;font-size:.95rem}
main{max-width:1150px;margin:auto;padding:1rem}h1{font-size:1.8rem;margin:.6rem 0}.lead{color:var(--mut);max-width:60ch}
.hero{background:linear-gradient(135deg,#e6f4f3,#fdf3e6);border-radius:14px;padding:1.4rem;margin:1rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem}
.card h3{margin:.2rem 0;font-size:1rem}.small{font-size:.85rem;color:var(--mut)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.filters input,.filters select{padding:.5rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.filters input{flex:1 1 220px}.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{padding:.6rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f4f1ea;cursor:pointer;white-space:nowrap;position:sticky;top:0}th:after{content:" ↕";color:#aaa}tr.expired td{opacity:.55}
.b{display:inline-block;font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:99px;margin:.1rem 0;white-space:nowrap}
.b-exp{background:#fde2e2;color:#9b1c1c}.b-unv{background:#fff1c2;color:#7a5600}.b-free{background:#d9f2e6;color:#11643f}.b-soon{background:#e3ecff;color:#1d3f99}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem}dt{font-weight:600;color:var(--mut)}dd{margin:0}
.notice{background:#fff8e1;border:1px solid #f0d78c;border-radius:10px;padding:.8rem;margin:1rem 0}.nl{background:#fff;border:1px dashed var(--acc);border-radius:12px;padding:1rem;margin:1.5rem 0}
.nl input{padding:.55rem;border:1px solid var(--line);border-radius:8px;width:min(320px,100%)}.nl button{padding:.55rem 1rem;border:0;border-radius:8px;background:var(--acc);color:#fff;font-weight:700;cursor:pointer}.nl button:hover{filter:brightness(.9)}.sr{position:absolute;left:-9999px}
footer{max-width:1150px;margin:2rem auto;padding:1rem;color:var(--mut);font-size:.85rem;border-top:1px solid var(--line)}
@media(max-width:640px){h1{font-size:1.4rem}dl{grid-template-columns:1fr}th,td{padding:.5rem}}