*{box-sizing:border-box}
body{margin:0;background:#f1f6f6;font-family:'Pretendard','Noto Sans KR','Nanum Gothic','Apple SD Gothic Neo',sans-serif;color:#18213a;word-break:keep-all}
.wrap{width:min(100%,500px);margin:0 auto;padding:14px 19px 28px}
.top{display:flex;align-items:center;gap:16px;height:72px}
.top img{width:56px;height:56px;border-radius:50%;flex:none;background:#bfeee0}
.ttl{flex:1;min-width:0}.ttl h1{margin:0;font-size:23px;line-height:1.2;font-weight:800;color:#18213a}
.ttl p{margin:2px 0 0;font-size:14.5px;color:#4a5568;white-space:nowrap}
.ic{display:flex;gap:18px;align-self:flex-start;margin-top:4px}
.ic svg{width:24px;height:24px;fill:none;stroke:#18213a;stroke-width:1.9;stroke-linecap:round}
.disc{display:flex;align-items:center;gap:10px;background:#e2f4ee;border-radius:14px;padding:0 18px;height:40px;margin:8px 0 18px;font-size:12.5px;color:#4a5a5a}
.disc svg{width:18px;height:18px;flex:none}.disc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:10px;overflow-x:auto;margin:0 0 14px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;height:38px;padding:0 22px;border:1px solid #e1e8ec;background:#fff;color:#18213a;border-radius:19px;font:600 15px inherit;font-family:inherit;cursor:pointer}
.tab.on{background:#14285f;border-color:#14285f;color:#fff;font-weight:700}
.tools{display:flex;gap:12px;margin-bottom:16px}
.sr{flex:1;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;background:#fff;border:1px solid #cfe0e6;border-radius:16px}
.sr svg{width:22px;height:22px;fill:none;stroke:#18213a;stroke-width:1.8;stroke-linecap:round;flex:none}
.sr input{border:0;outline:0;background:none;flex:1;min-width:0;font:14.5px inherit;font-family:inherit;color:#18213a}
.sr input::placeholder{color:#7a8795}
.sel{width:101px;position:relative;flex:none}
.sel::after{content:"";position:absolute;right:14px;top:17px;width:8px;height:8px;border-right:2px solid #18213a;border-bottom:2px solid #18213a;transform:rotate(45deg);pointer-events:none}
.sel select{appearance:none;width:100%;height:46px;border:1px solid #cfe0e6;border-radius:16px;background:#fff;padding:0 28px 0 14px;font:600 14.5px inherit;font-family:inherit;color:#18213a}
.err{background:#fff;border-radius:14px;padding:14px;font-size:13px;color:#a33}
.row{display:grid;grid-template-columns:112px 1fr auto;column-gap:16px;background:#fff;border-radius:14px;padding:16px 14px;margin:0 0 18px;box-shadow:0 2px 8px #1a2a4a0d;position:relative}
.th{grid-row:1/3;width:112px;height:112px;border-radius:12px;overflow:hidden;background:#f4f4f4}
.th img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12)}
.tx{grid-column:2/4;min-width:0}
.nm{margin:0;font-size:13.5px;color:#7b8794;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.nm b{color:#4f5967;font-weight:700;margin-right:4px}
.tx h3{margin:2px 0 4px;font-size:17px;line-height:1.35;font-weight:800;color:#111a30;text-wrap:balance}
.pr{margin:0;font-size:15px;color:#18213a;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.pr b{font-weight:800}.pr small{font-size:11.5px;color:#8a95a1}
.badge{grid-column:2;align-self:end;justify-self:start;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;font-size:12px;font-weight:700;text-decoration:none;margin-top:8px}
.badge svg{width:13px;height:13px}
.badge.soon{background:#e2f4ee;color:#2f6f61}
a.badge.read,a.badge.read:visited{background:#dbe6ff;color:#1b3f9e}
.buy,.buy:visited{grid-column:3;align-self:end;justify-self:end;display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 11px;background:#14285f;color:#fff;border-radius:12px;font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap}
.buy svg{width:12px;height:12px}
.foot{font-size:12.5px;color:#7b8794;text-align:center;margin:28px 0 0}