.practical-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.practical-card{display:flex;gap:20px;align-items:flex-start;padding:22px;background:#fff;border:1px solid #e5e1d7;border-radius:18px;min-width:0}
.practical-copy{flex:1;min-width:0}.practical-copy h3{font-size:20px;line-height:1.2;margin:0 0 10px}.practical-copy p{font-size:14px;line-height:1.65;margin:0;color:#52636a;overflow-wrap:anywhere}
.practical-thumb{position:relative;flex:0 0 100px;width:100px;height:125px;margin:0;padding:0;overflow:hidden;border:0;border-radius:10px;background:#f4f2eb;cursor:zoom-in}
.practical-thumb img{display:block;width:100%;height:100%;object-fit:contain}.practical-thumb>span{position:absolute;bottom:5px;right:5px;display:grid;place-items:center;width:26px;height:26px;background:#102f3ce6;color:#fff;border-radius:7px;font-size:20px}
dialog.image-viewer{position:fixed;inset:0;margin:0;padding:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;background:#09151bf5;color:#fff;overflow:hidden}
dialog.image-viewer[open]{display:flex;flex-direction:column}dialog.image-viewer::backdrop{background:#09151b}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;flex:0 0 auto;padding:calc(12px + env(safe-area-inset-top,0px)) 18px 12px;font-size:15px;background:#10212b}.viewer-bar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer-close{flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;font-size:30px;line-height:1;background:#ffffff20;color:white}
.viewer-stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));overflow:auto}.viewer-stage>img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;touch-action:pinch-zoom}.viewer-stage>img[hidden]{display:none}.viewer-error{color:white}
@media(max-width:850px){.practical-list{grid-template-columns:1fr}}
@media(max-width:480px){.practical-card{padding:16px;gap:14px}.practical-thumb{flex-basis:82px;width:82px;height:104px}.practical-copy h3{font-size:18px}.practical-copy p{font-size:13px}}
.practical-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.practical-poster {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	background: transparent;
	cursor: zoom-in;
}

.practical-poster img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 800px) {
	.practical-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.practical-gallery {
		grid-template-columns: 1fr;
	}
}