:root { --paper:#fbf8f4; --paper-2:#f5efea; --ink:#302a32; --muted:#978c91; --line:#e8dfe1; --pink:#e9a8b8; --pink-deep:#b56e7f; --green:#899d88; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--paper); font-family:"Manrope","Noto Sans SC",sans-serif; -webkit-font-smoothing:antialiased; }
body:before { position:fixed; inset:0; z-index:-2; content:""; background:radial-gradient(circle at 88% 4%,#f7dbe0 0,transparent 25%),linear-gradient(120deg,#fbf8f4 0%,#fffdfb 55%,#f7f0ec 100%); }
.petal-field { position:fixed; inset:0; z-index:-1; opacity:.35; pointer-events:none; background-image:radial-gradient(ellipse at 13% 20%,#e9a8b8 0 2px,transparent 3px),radial-gradient(ellipse at 78% 31%,#e9a8b8 0 2px,transparent 3px),radial-gradient(ellipse at 92% 77%,#e9a8b8 0 1.5px,transparent 3px),radial-gradient(ellipse at 22% 84%,#e9a8b8 0 1.5px,transparent 3px); background-size:240px 300px,330px 420px,280px 350px,390px 420px; }
a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button { cursor:pointer; }
.site-header,main,footer { width:min(1160px,calc(100% - 64px)); margin:0 auto; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:grid; grid-template-columns:32px auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; }
.brand span { grid-row:1/3; display:grid; place-items:center; width:32px; height:32px; color:#fff; background:var(--pink-deep); border-radius:50%; font-family:"Zen Old Mincho",serif; font-size:19px; }
.brand b { align-self:end; font-size:13px; letter-spacing:.08em; } .brand small { align-self:start; color:var(--muted); font:8px "DM Mono",monospace; letter-spacing:.14em; }
.header-meta { display:flex; align-items:center; gap:10px; color:var(--muted); font:10px "DM Mono",monospace; } .status-dot { width:6px; height:6px; background:#9cb399; border-radius:50%; }
.intro { min-height:350px; display:flex; align-items:end; justify-content:space-between; padding:85px 0 55px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 16px; color:var(--pink-deep); font:10px "DM Mono",monospace; letter-spacing:.16em; } h1,h2,p { margin-top:0; }
h1 { max-width:760px; margin-bottom:7px; color:var(--ink); font-family:"Zen Old Mincho","Noto Sans SC",serif; font-size:clamp(46px,7vw,78px); font-weight:600; letter-spacing:.04em; line-height:1; }
.intro-sub { margin:0; color:var(--pink-deep); font-family:"Zen Old Mincho",serif; font-size:14px; letter-spacing:.1em; } .intro-note { margin:0 7% 10px 0; color:var(--pink-deep); font-family:"Zen Old Mincho",serif; font-size:16px; letter-spacing:.16em; }
.library { padding:45px 0 100px; } .toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:25px; padding-bottom:17px; border-bottom:1px solid var(--line); }
.search-wrap { width:320px; } .search { display:flex; align-items:center; gap:9px; width:100%; color:var(--muted); border-bottom:1px solid #c8b9bd; } .search span { color:var(--pink-deep); font-size:23px; transform:rotate(-20deg); } .search input { width:100%; padding:9px 0; color:var(--ink); background:transparent; border:0; outline:0; font-size:12px; } .search input::placeholder { color:#aaa0a3; } .search-help { margin:8px 0 0; color:#b0a4a8; font:9px "DM Mono",monospace; }
.sort { position:relative; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; } .sort-control { position:relative; } .sort-trigger { display:flex; align-items:center; justify-content:space-between; gap:28px; min-width:125px; padding:9px 10px; color:var(--ink); background:rgba(255,255,255,.68); border:1px solid var(--line); font-size:10px; text-align:left; } .sort-trigger i { color:var(--pink-deep); font-style:normal; font-size:14px; line-height:.7; } .sort-trigger[aria-expanded="true"] { border-color:#d49aa8; box-shadow:0 0 0 3px rgba(233,168,184,.15); } .sort-menu { position:absolute; z-index:5; top:calc(100% + 5px); right:0; min-width:145px; padding:5px; background:#fffdfb; border:1px solid #d9c5c9; box-shadow:0 12px 25px rgba(85,48,59,.14); } .sort-menu button { display:block; width:100%; padding:9px 10px; color:var(--muted); background:transparent; border:0; font-size:10px; text-align:left; } .sort-menu button:hover,.sort-menu button[aria-selected="true"] { color:var(--ink); background:#f7e6e9; } 
.result-line { padding:17px 0 20px; color:var(--muted); font:9px "DM Mono",monospace; } .result-line span { color:var(--pink-deep); }
.card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .card { min-width:0; overflow:hidden; background:rgba(255,255,255,.63); border:1px solid var(--line); box-shadow:0 8px 26px rgba(150,104,112,.06); transition:transform .25s,box-shadow .25s,border-color .25s; } .card:hover { border-color:#d69ba8; box-shadow:0 12px 30px rgba(150,104,112,.12); transform:translateY(-4px); }
.cover { position:relative; display:block; width:100%; height:268px; padding:0; overflow:hidden; color:var(--ink); background:linear-gradient(145deg,#f1d7d6,#dbe5da); border:0; text-align:left; } .cover img { width:100%; height:100%; object-fit:cover; transition:transform .6s; } .card:hover .cover img { transform:scale(1.04); } .cover:after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 56%,rgba(69,43,51,.36)); pointer-events:none; }
.cover-fallback { position:absolute; inset:0; display:grid; place-items:center; color:var(--pink-deep); font:130px "Zen Old Mincho",serif; opacity:.65; } .cover-id,.cover-link { position:absolute; z-index:1; font:9px "DM Mono",monospace; } .cover-id { top:14px; left:14px; color:#fff; text-shadow:0 1px 4px #6e4c56; } .cover-link { right:13px; bottom:11px; color:#fff; font-size:22px; text-shadow:0 1px 4px #6e4c56; }
.card-info { padding:18px 17px 20px; } .card-info h2 { margin-bottom:5px; font-family:"Zen Old Mincho","Noto Sans SC",serif; font-size:20px; font-weight:600; letter-spacing:.02em; } .romanized { min-height:15px; margin-bottom:19px; color:var(--muted); font:9px "DM Mono",monospace; }
.facts,.detail-facts { margin:0 0 18px; } .facts div,.detail-facts div { padding:9px 0; border-top:1px solid var(--line); } dt { margin-bottom:5px; color:var(--muted); font:9px "DM Mono",monospace; } dd { margin:0; color:var(--ink); font-size:11px; line-height:1.7; white-space:pre-wrap; }
.score-number { color:var(--pink-deep); font:15px "DM Mono",monospace; } .score-number small { color:var(--muted); font-size:9px; } .score-empty { color:#aaa0a3; font-size:10px; }
.work { display:grid; gap:3px; margin:0; overflow:hidden; } .work-original,.work-romanized { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .work-original { color:var(--ink); font-size:11px; } .work-romanized { color:var(--muted); font:9px "DM Mono",monospace; } .empty { padding:80px 0; color:var(--muted); border:1px dashed var(--line); text-align:center; font-size:12px; }
.detail-dialog { width:min(920px,calc(100% - 32px)); padding:0; color:var(--ink); background:var(--paper); border:1px solid #dfb7bf; box-shadow:0 24px 90px rgba(87,48,60,.2); } .detail-dialog::backdrop { background:rgba(68,41,49,.34); backdrop-filter:blur(4px); } .close { position:absolute; z-index:2; top:14px; right:18px; padding:0; color:var(--muted); background:none; border:0; font-size:27px; }
.detail-layout { display:grid; grid-template-columns:minmax(360px,.95fr) 1fr; min-height:0; align-items:stretch; } .detail-art { position:relative; align-self:start; width:100%; height:auto; min-height:0; overflow:hidden; display:grid; place-items:center; color:var(--pink-deep); background:var(--paper-2); font:140px "Zen Old Mincho",serif; } .detail-art img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; } .detail-copy { min-height:0; overflow-y:auto; padding:51px 42px 38px; scrollbar-gutter:stable; } .detail-copy h2 { margin-bottom:5px; font-family:"Zen Old Mincho",serif; font-size:37px; font-weight:600; } .detail-copy .detail-work { margin:25px 0 3px; } .detail-copy .work-original { font-size:12px; }
.detail-facts { margin-top:25px; } .score-caption { color:var(--muted); font-size:10px; line-height:1.7; } .spoiler { margin-top:24px; border-top:1px solid var(--line); } .spoiler summary { padding:13px 0; color:var(--pink-deep); cursor:pointer; font-size:11px; list-style:none; } .spoiler summary::-webkit-details-marker { display:none; } .spoiler summary:before { display:inline-block; margin-right:8px; content:"＋"; font:14px "DM Mono",monospace; } .spoiler[open] summary:before { content:"－"; } .spoiler p { padding:0 0 5px; color:#64585d; font-size:12px; line-height:1.9; white-space:pre-wrap; } .no-impression { margin-top:24px; color:var(--muted); font-size:11px; } .detail-links { display:flex; gap:16px; margin-top:28px; color:var(--pink-deep); font:10px "DM Mono",monospace; } .detail-links a:hover { text-decoration:underline; }
footer { display:flex; justify-content:space-between; padding:20px 0 28px; color:#9b8f94; border-top:1px solid var(--line); font:9px "DM Mono",monospace; } footer a { color:var(--pink-deep); }
@media (max-width:950px) { .site-header,main,footer { width:min(680px,calc(100% - 40px)); } .card-grid { grid-template-columns:repeat(2,1fr); } .intro-note { margin-right:0; } }
@media (max-width:560px) { .detail-dialog { max-height:calc(100vh - 48px); overflow:auto; } .detail-layout { grid-template-columns:1fr; height:auto; } .detail-art { width:100%; height:min(390px,62vh); aspect-ratio:auto !important; } .detail-copy { height:auto !important; overflow:visible; } }
@media (max-width:560px) { .site-header,main,footer { width:calc(100% - 32px); } .intro { min-height:270px; padding-top:65px; } .intro-note { margin-top:28px; } .toolbar { display:block; } .search-wrap { width:100%; } .sort { justify-content:flex-end; margin-top:15px; } .card-grid { grid-template-columns:1fr; } .cover { height:275px; } .detail-art { height:225px; } .detail-copy { padding:30px 24px; } }