:root { color-scheme:dark; --reading-ink:#f1eee8; --reading-muted:#a4a9b8; --reading-line:#2c3242; --reading-accent:#a1e1dc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:1rem; }
body { margin:0; background:#111522; color:var(--reading-ink); font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif; line-height:1.75; }
a { color:inherit; text-underline-offset:.25em; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--reading-accent); outline-offset:4px; }
.columns-library { width:min(1160px,100%); margin:auto; padding:1.5rem 2rem 3rem; }
.columns-breadcrumb { display:flex; flex-wrap:wrap; gap:.65rem; color:var(--reading-muted); font-size:.75rem; }
.columns-breadcrumb a { text-decoration:none; }
.columns-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:3rem; padding:2.5rem 0 2.2rem; border-bottom:1px solid var(--reading-line); }
.columns-entry { border-top:1px solid var(--reading-line); }
.columns-entry > p { margin:.75rem 0 .35rem; color:var(--reading-muted); font-size:.7rem; }
.columns-entry > a { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--reading-line); text-decoration:none; }
.columns-entry > a:hover strong { color:var(--reading-accent); }
.columns-entry strong { display:block; color:#e2e9ef; font-size:.85rem; font-weight:650; }
.columns-entry small { display:block; margin-top:.1rem; color:var(--reading-muted); font-size:.68rem; }
.columns-entry__count { flex:none; color:var(--reading-accent); font-size:.7rem; }
.columns-entry__count > span { margin-left:.7rem; }
@media(max-width:900px) { .columns-intro { display:block; } .columns-entry { display:none; } }
.columns-eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin:0 0 1rem; color:var(--reading-accent); font-size:.7rem; font-weight:750; letter-spacing:.16em; }
.columns-eyebrow span { color:var(--reading-muted); border-left:1px solid var(--reading-line); padding-left:1rem; font-size:.65rem; }
.columns-intro h1 { margin:0; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(2rem,4.2vw,3.25rem); font-weight:650; line-height:1.4; letter-spacing:.04em; }
.columns-intro__lead { margin:1.1rem 0 .85rem; color:#bec3cd; font-size:.92rem; }
.columns-text-link { display:inline-flex; align-items:center; gap:1.25rem; color:var(--reading-accent); font-size:.8rem; text-decoration:none; border-bottom:1px solid #467c7c; padding:.2rem 0; }
.columns-featured { margin:1.6rem 0 2.8rem; }
.columns-section-heading { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.4rem 1rem; margin-bottom:1rem; }
.columns-section-heading h2 { margin:0; font-size:1.15rem; font-weight:700; }
.columns-section-heading > span { color:var(--reading-muted); font-size:.74rem; }
.columns-featured__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.columns-feature { display:grid; grid-template-columns:90px minmax(0,1fr); min-width:0; border:1px solid var(--reading-line); border-radius:12px; background:#171d2c; text-decoration:none; overflow:hidden; transition:border-color .18s,background .18s; }
.columns-feature > img { width:90px; height:100%; min-height:150px; object-fit:cover; }
.columns-feature__copy { display:flex; flex-direction:column; align-items:flex-start; padding:1rem .85rem; min-width:0; }
.columns-feature__copy > small { font-size:.7rem; color:var(--reading-accent); }
.columns-feature__copy > strong { margin:.35rem 0 .7rem; font-size:.91rem; font-weight:650; line-height:1.65; overflow-wrap:anywhere; }
.columns-feature__copy > span { display:flex; justify-content:space-between; gap:1rem; width:100%; margin-top:auto; color:var(--reading-muted); font-size:.67rem; }
.columns-feature__copy > span > span { color:var(--reading-accent); font-size:.9rem; }
.columns-feature:hover,.columns-card:hover { background:#1c2635; border-color:#638f92; }
.columns-controls { padding:1rem 1.1rem; border:1px solid var(--reading-line); border-radius:12px; background:#171d2c; }
.columns-controls > label { display:block; margin:0 0 .45rem; color:#c5cbd5; font-size:.73rem; }
.columns-search { display:flex; align-items:center; gap:.7rem; }
.columns-search input { width:100%; min-width:0; min-height:40px; padding:.5rem .75rem; border:1px solid #414959; border-radius:7px; background:#111522; color:var(--reading-ink); font-size:.88rem; }
.columns-search input::placeholder { color:#8d95a8; }
.columns-search button { flex:none; border:0; padding:.3rem; background:none; color:var(--reading-muted); cursor:pointer; font-size:.74rem; }
.columns-filters { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.8rem; }
.columns-filters button { min-height:32px; border:1px solid #394252; border-radius:6px; background:none; color:#c0c7d5; padding:.3rem .7rem; font-size:.72rem; line-height:1.5; cursor:pointer; }
.columns-filters button[aria-pressed="true"] { border-color:var(--reading-accent); background:#234146; color:#e1faf6; }
.columns-filters button:hover { border-color:var(--reading-accent); }
.columns-group { margin-top:1.8rem; }
.columns-group__heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem 1rem; margin:0 0 .75rem; }
.columns-group__heading h3 { margin:0; color:var(--reading-accent); font-size:.9rem; }
.columns-group__heading p { margin:0; color:var(--reading-muted); font-size:.73rem; }
.columns-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.columns-card { display:grid; grid-template-columns:60px minmax(0,1fr) 12px; align-items:start; gap:.8rem; min-width:0; padding:.9rem; border:1px solid var(--reading-line); border-radius:10px; background:#151c29; text-decoration:none; transition:border-color .18s,background .18s; }
.columns-card > img { width:60px; height:87px; object-fit:cover; border-radius:4px; }
.columns-card__body { display:flex; flex-direction:column; min-width:0; gap:.3rem; }
.columns-card__name { display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem; color:var(--reading-accent); font-size:.7rem; }
.columns-card__name small { color:var(--reading-muted); font-size:.63rem; }
.columns-card__body strong { font-size:.84rem; font-weight:650; line-height:1.65; overflow-wrap:anywhere; }
.columns-card__title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.67rem; color:var(--reading-muted); line-height:1.6; }
.columns-card__arrow { color:#7babb0; font-size:.85rem; }
.columns-empty { margin:1rem 0; padding:1.4rem; border:1px dashed #586075; border-radius:10px; text-align:center; color:#bec6d6; font-size:.85rem; }
.columns-empty button { border:1px solid #638f92; border-radius:6px; padding:.4rem .7rem; background:none; color:var(--reading-accent); cursor:pointer; font-size:.78rem; }
.columns-crossroads { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:2.5rem 0; padding:1.25rem 0; border-block:1px solid var(--reading-line); }
.columns-crossroads h2 { margin:0; font-size:.91rem; }
.columns-crossroads p { margin:.35rem 0 0; color:var(--reading-muted); font-size:.76rem; }
.columns-crossroads a { color:var(--reading-accent); font-size:.8rem; }
@media(max-width:1050px) { .columns-featured__grid { gap:.7rem; } .columns-feature { grid-template-columns:72px minmax(0,1fr); } .columns-feature > img { width:72px; } .columns-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .columns-library { padding:1rem 1rem 2rem; } .columns-intro { padding:1.7rem 0; } .columns-intro__lead { font-size:.83rem; } .columns-featured { margin:1.4rem 0 2rem; } .columns-featured__grid { grid-template-columns:1fr; gap:.65rem; } .columns-feature { grid-template-columns:72px minmax(0,1fr); } .columns-feature > img { min-height:112px; } .columns-feature__copy { padding:.7rem .9rem; } .columns-feature__copy > strong { margin:.2rem 0 .4rem; font-size:.87rem; } .columns-card-grid { grid-template-columns:1fr; } .columns-section-heading h2 { font-size:1rem; } .columns-controls { padding:.8rem; } .columns-filters { gap:.35rem; } .columns-filters button { font-size:.67rem; padding:.3rem .5rem; } .columns-group { margin-top:1.5rem; } .columns-card { padding:.8rem; } .columns-desktop-break { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .columns-feature,.columns-card { transition:none; } }