.layouts-guide .layout-figure-grid,.layouts-guide .layout-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}.layouts-guide figure{margin:0;background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}.layouts-guide figure>div{height:280px;background:#174c50}.layouts-guide figcaption{padding:10px 14px;color:var(--color-ink-soft);font-size:.86rem}.layouts-guide .layout-real svg,.layouts-guide .layout-compare svg{display:block;width:100%;height:100%}.layouts-guide .layout-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.layouts-guide .layout-legend span{padding:5px 9px;border-radius:30px;background:var(--color-bg-alt);font-size:.8rem}.layouts-guide .layout-layer-controls{padding:20px;background:var(--color-bg-alt);border:1px solid var(--color-line);border-radius:var(--radius-md)}.layouts-guide .layout-layer-controls button{margin:5px;padding:9px 12px;border:1px solid var(--color-line);border-radius:8px;background:#fff;cursor:pointer}.layouts-guide .layout-layer-controls button[aria-pressed="true"]{background:var(--color-primary);color:#fff}.layouts-guide .layout-concept{display:grid;grid-template-columns:1fr .6fr 1fr;gap:8px;margin:18px 0;padding:16px;background:#174c50;border-radius:var(--radius-md)}.layouts-guide .layout-concept>div{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;min-height:130px;padding:12px;background:rgba(255,255,255,.12);border-radius:8px}.layouts-guide .layout-concept b{width:100%;color:#fff;text-align:center}.layouts-guide .layout-concept.heart>div:first-child{background:rgba(67,145,130,.3)}.layouts-guide .layout-concept.heart>div:last-child{background:rgba(95,155,167,.3)}.layouts-guide .layout-advice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.layouts-guide .layout-advice>div{padding:16px;background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-md)}.layouts-guide .layout-compare{grid-template-columns:repeat(3,minmax(0,1fr))}.layouts-guide .layout-compare figure>div{height:180px}@media(max-width:760px){.layouts-guide .layout-figure-grid,.layouts-guide .layout-advice{grid-template-columns:1fr}.layouts-guide .layout-compare{grid-template-columns:1fr}.layouts-guide .layout-compare figure>div{height:220px}}@media(max-width:560px){.layouts-guide .layout-concept{grid-template-columns:1fr}.layouts-guide .layout-concept>div{min-height:90px}}