/* cutaway.css — Construction illustrations studio and the card under design studios (v66). */
.cwi-studio { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
@media (max-width: 900px) { .cwi-studio { grid-template-columns: minmax(0, 1fr); } }
.cwi-panel { border: 1px solid var(--line, #e3e6ea); border-radius: 14px; background: var(--card, #fff); padding: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
@media (max-width: 900px) { .cwi-panel { position: static; max-height: none; } }
.cwi-panel h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #667); margin: 16px 0 6px; }
.cwi-l { display: block; font-size: .85rem; font-weight: 600; margin: 8px 0; }
.cwi-l input, .cwi-l select { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--line, #cfd4da); border-radius: 8px; font: inherit; font-weight: 400; background: var(--card, #fff); color: var(--ink, #111); }
.cwi-ck { display: flex; gap: 8px; align-items: center; font-size: .9rem; margin: 6px 0; }
.cwi-params { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.cwi-stagelist { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.cwi-stagelist button, .cwi-stages button, .cwi-pills button { display: flex; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line, #d8dde3); background: var(--card, #fff); color: var(--ink, #111); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: .88rem; cursor: pointer; }
.cwi-stagelist button b, .cwi-stages button b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--soft, #eef1f4); font-size: .78rem; }
.cwi-stagelist button[aria-selected="true"], .cwi-stages button[aria-selected="true"], .cwi-pills button[aria-selected="true"] { border-color: #2563eb; background: #2563eb; color: #fff; }
.cwi-stagelist button[aria-selected="true"] b, .cwi-stages button[aria-selected="true"] b { background: rgba(255,255,255,.25); }
.cwi-lt { width: 100%; border-collapse: collapse; font-size: .82rem; } .cwi-lt th { text-align: left; font-weight: 600; color: var(--muted, #667); padding: 2px; } .cwi-lt td { padding: 2px; } .cwi-lt td:first-child { width: 46%; } .cwi-lt td:last-child { width: 28px; } .cwi-lt input, .cwi-lt select { width: 100%; box-sizing: border-box; padding: 4px 5px; border: 1px solid var(--line, #cfd4da); border-radius: 6px; font: inherit; background: var(--card, #fff); color: var(--ink, #111); }
.cwi-main { min-width: 0; }
.cwi-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .cwi-bar .cwi-sn { font-size: .95rem; } .cwi-sp { flex: 1; }
.cwi-figbox, .cwi-fig { border-radius: 14px; overflow: hidden; line-height: 0; display: flex; justify-content: center; }
.cwi-figbox svg, .cwi-fig svg { width: 100%; height: auto; display: block; max-height: 84vh; border-radius: 14px; }
.cwi-desc { margin: 10px 0; font-size: .95rem; line-height: 1.5; }
.cwi-msg { display: inline-block; margin: 4px 0; padding: 6px 10px; border-radius: 8px; background: #e8f5ec; color: #1f6b35; font-size: .85rem; }
.cwi-all summary { cursor: pointer; font-weight: 600; margin: 12px 0 8px; }
.cwi-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cwi-strip figure { margin: 0; cursor: pointer; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #e3e6ea); background: var(--card, #fff); } .cwi-strip figure svg { width: 100%; height: auto; display: block; } .cwi-strip figcaption { padding: 6px 8px; font-size: .8rem; }
/* card under design studios */
.cwi-hook { margin: 28px 0 10px; }
.cwi-card { border: 1px solid var(--line, #e3e6ea); border-radius: 16px; background: var(--card, #fff); padding: 16px; }
.cwi-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .cwi-head h2 { margin: 0 0 4px; font-size: 1.25rem; } .cwi-head p { margin: 0; color: var(--muted, #667); font-size: .9rem; }
.cwi-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .cwi-acts select { padding: 6px 8px; border: 1px solid var(--line, #cfd4da); border-radius: 8px; font: inherit; background: var(--card, #fff); color: var(--ink, #111); }
.cwi-pills, .cwi-stages { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.cwi-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: start; }
@media (max-width: 800px) { .cwi-body { grid-template-columns: minmax(0, 1fr); } }
.cwi-side .cwi-desc { margin-top: 0; } .cwi-src { color: var(--muted, #667); font-size: .82rem; }
@media print { .cwi-acts, .cwi-bar, .cwi-panel, .cwi-pills, .cwi-stages, .cwi-side button { display: none !important; } .cwi-studio { display: block; } }