/* v12: 글자까지 완성된 이미지 원본을 가리지 않고 전체 비율로 표시한다. */
.banner-media{position:relative;isolation:isolate;margin:0;overflow:hidden;aspect-ratio:1672/941;background:#dce6db}
.banner-media img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
.banner-media--detail{margin:0 0 1.5rem;border-radius:14px}
.banner-link{display:block;color:inherit;text-decoration:none}
.banner-link:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.offer-card--visual,.platform-card--visual,.guide-card--visual{overflow:hidden;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.offer-card--visual .banner-media{border-radius:11px 11px 0 0}
.offer-card__body,.platform-card__body,.guide-card--visual>div:last-child{padding:18px}
.offer-card--visual .offer-value{font-size:1.28rem}
.platform-card--visual h2,.guide-card--visual h3{margin:.2rem 0 .6rem}
.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-poster{width:min(100% - 40px,800px);margin:24px auto 0}
.hero-poster>.banner-link{overflow:hidden;border-radius:16px;box-shadow:var(--shadow)}
.hero-poster__actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 0 0}
.hero-poster__actions>.button:first-child{background:#e3f3ad;border-color:#c6d987;color:#173c2e}
.hero-poster__actions>.button:first-child:hover{background:#f1facd}
.page-banner{margin-top:28px}
.tool-promo--visual{display:block;overflow:hidden;padding:0;border-radius:16px}
.tool-promo--visual>div{padding:24px}
.tool-promo--visual .tool-links{padding-top:0}
.tool-card--visual{overflow:hidden;padding:0!important}
.tool-card--visual>span,.tool-card--visual>h2,.tool-card--visual>p{display:block;margin-right:24px;margin-left:24px}
.tool-card--visual>span{margin-top:20px}
.tool-card--visual>p{margin-bottom:24px}
.filter-chips,.platform-links{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0}
.filter-chips a,.platform-links a{display:inline-flex;align-items:center;gap:.35rem;min-height:42px;padding:.48rem .72rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.84rem;font-weight:800;text-decoration:none}
.filter-chips strong,.platform-links strong{color:var(--green)}
.filter-details{border:1px solid var(--line);border-radius:9px;background:#fff}
.filter-details summary{min-height:48px;padding:.72rem .85rem;color:var(--ink);font-size:.86rem;font-weight:800;cursor:pointer}
.filter-details[open] summary{border-bottom:1px solid var(--line)}
.filter-details form{margin:12px;padding:0}
.filter-panel>.filter-details+#filter-summary{margin:.8rem 0 0}
@media(max-width:720px){
.hero-poster{width:min(100% - 28px,800px);margin-top:16px}
.hero-poster>.banner-link{border-radius:10px}
.hero-poster__actions{gap:8px;padding-top:12px}
.hero-poster__actions>.button{flex:1;min-width:0;padding:12px 10px;font-size:.8rem;white-space:normal;text-align:center}
.page-banner{margin-top:16px}
.offer-card__body,.platform-card__body,.guide-card--visual>div:last-child{padding:16px}
.platform-grid{grid-template-columns:1fr}
.tool-promo--visual>div{padding:20px}
.filter-chips,.platform-links{gap:.42rem}
.filter-chips a,.platform-links a{max-width:100%;min-width:0;padding:.42rem .62rem;font-size:.79rem;overflow-wrap:anywhere}
.filter-panel form{grid-template-columns:1fr}
.filter-panel label,.filter-panel select,.filter-panel input{min-width:0}
}
@media(max-width:390px){
.hero-poster{width:min(100% - 24px,800px)}
.filter-details summary{padding:.68rem .75rem}
.filter-details form{margin:10px}
.filter-panel+.section{padding-top:14px}
}