/* 告警圖解：風險、應對與監控各有清楚色帶，文字與連結保持原生可讀。 */
.security-diagram{--diagram-pad:clamp(18px,2.4vw,30px);min-width:0;padding:var(--diagram-pad);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#F4F8F7}
.security-diagram figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:calc(-1 * var(--diagram-pad)) calc(-1 * var(--diagram-pad)) 24px;padding:18px var(--diagram-pad);border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:#153F3B;color:#FFF;font-size:clamp(18px,1.5vw,21px);font-weight:700;line-height:1.5}
.security-diagram-label{display:inline-block;padding:4px 9px;border:1px solid #EFC63B;border-radius:4px;color:#FFE486;font-size:12px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.security-flow--attack{background:#FFFBF0;border-color:#E0C777}
.security-flow--attack figcaption{background:#6B451B}
.security-flow--attack .security-diagram-label{color:#FFF0B3}
.security-steps,.security-zones,.security-monitor{display:grid;grid-template-columns:minmax(0,1fr);list-style:none;padding:0;margin:0;gap:30px}
.security-steps>li,.security-zone,.security-monitor>li{position:relative;min-width:0;padding:18px;background:#FFF;border:1px solid #BFD6D1;border-radius:10px;overflow-wrap:anywhere;transition:border-color .15s ease,box-shadow .15s ease}
.security-steps>li{display:flex;align-items:flex-start;gap:14px;border-top:4px solid #D99720}
.security-step-no{flex:0 0 32px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#F2CB51;color:#48320C;font-size:12px;font-weight:700}
.security-step-body{min-width:0;flex:1}
.security-diagram h4{font-size:18px;line-height:1.5;margin:0 0 9px;font-family:var(--sans);font-weight:700;color:#153734}
.security-diagram li p{font-size:15px;line-height:1.75;margin:0;color:#405D58}
.security-steps>li:not(:last-child)::after,.security-zones>li:not(:last-child)::after,.security-monitor>li:not(:last-child)::after{content:"↓";position:absolute;top:100%;left:calc(50% - 12px);width:24px;height:30px;display:grid;place-items:center;font-size:24px;line-height:1;color:#0E7C71}
.security-flow--attack .security-steps>li:not(:last-child)::after{color:#97641B}
.security-flow--response .security-steps>li{border-top-color:#0E7C71}
.security-flow--response .security-step-no{background:#0E7C71;color:#FFF}
.security-diagram .security-diagram-note{font-size:14px;line-height:1.75;margin:18px 0 0;color:#526B66;max-width:none}
.security-diagram .security-inventory{display:flex;align-items:center;gap:12px;padding:14px 16px;border-left:4px solid #0E7C71;border-radius:4px;background:#E1F0EC;color:#164E45;font-size:15px;font-weight:500;line-height:1.65;margin:0 0 14px}
.security-inventory svg{flex:0 0 28px}
.security-diagram .security-route-label{font-size:13px;margin:0 0 16px;color:#526B66}
.security-zone{display:flex;flex-direction:column;border-top:4px solid #0E7C71}
.security-zone-head{display:flex;align-items:center;justify-content:space-between;color:#0E7C71;margin-bottom:12px}
.security-zone-head>span{font-size:12px;font-weight:700;letter-spacing:.1em}
.security-diagram .security-control{display:grid;gap:5px;margin:16px -18px -18px;padding:12px 18px;border-top:3px solid #EFC63B;background:#FFF4CA;border-radius:0 0 9px 9px;font-size:14px;color:#473B1C}
.security-control strong{color:#6A4B0D;font-size:13px}
.security-telemetry{position:relative;margin-top:34px;padding:20px;background:#EAF2FB;border:1px solid #BDD0E7;border-top:4px solid #447CB4;border-radius:10px}
.security-telemetry::before{content:"↓";position:absolute;left:calc(50% - 12px);top:-31px;width:24px;text-align:center;color:#376B9E;font-size:24px;line-height:24px}
.security-telemetry>p{font-size:15px;color:#214F7A;margin:0 0 18px;font-weight:700;line-height:1.6}
.security-monitor{gap:26px}
.security-monitor>li{display:flex;flex-direction:column;gap:7px;padding:14px;border-color:#AFC8E0;border-top:3px solid #447CB4}
.security-monitor>li>strong{font-size:16px;line-height:1.5;color:#234E78}
.security-monitor .security-monitor-text{flex:1;font-size:14px;line-height:1.75;color:#415E78}
.security-monitor>li:not(:last-child)::after{height:26px;font-size:20px;color:#447CB4}
.security-diagram li.is-remedy-selected{border-color:#0E7C71;box-shadow:inset 0 0 0 1px #0E7C71,0 3px 12px rgba(14,124,113,.12)}
/* 先看應對用途，再選資源；summary 是清楚的應對入口，方案名稱留在展開面板。 */
.security-diagram details.security-products{display:block;min-width:0;margin:16px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:14px;line-height:1.65}
.security-diagram details.security-products>summary{display:grid;grid-template-columns:28px minmax(0,1fr) 14px;grid-template-rows:auto auto;align-items:center;column-gap:9px;min-height:64px;list-style:none;padding:10px 12px;margin:0;cursor:pointer;background:#0E7C71;color:#FFF;border:1px solid #0E7C71;border-radius:7px;font-size:14px;font-weight:700;line-height:1.5;transition:background-color .15s ease,box-shadow .15s ease}
.security-diagram details.security-products>summary::-webkit-details-marker{display:none}
.security-diagram details.security-products>summary::after{content:none}
.security-diagram details.security-products>summary:hover{background:#095F57;border-color:#095F57}
.security-diagram details.security-products[open]>summary{background:#153F3B;border-color:#153F3B;box-shadow:inset 0 -3px 0 #EFC63B}
.security-diagram .security-remedy-icon{grid-column:1;grid-row:1 / span 2;display:grid;place-items:center;color:#FFF}
.security-remedy-icon svg{display:block;width:24px;height:24px}
.security-diagram .security-remedy-label{grid-column:2;grid-row:1;min-width:0;font-size:14px;font-weight:700;line-height:1.5;color:#FFF}
.security-diagram .security-product-count{grid-column:2;grid-row:2;font-size:12px;font-weight:400;line-height:1.5;color:#F0FFF8}
.security-diagram .security-remedy-chevron{grid-column:3;grid-row:1 / span 2;width:8px;height:8px;border-right:2px solid #FFF;border-bottom:2px solid #FFF;transform:rotate(45deg);transition:transform .15s ease}
.security-products[open] .security-remedy-chevron{transform:rotate(225deg)}
.security-diagram .security-product-panel{position:static;min-width:0;margin:14px 0 0;border:1px solid #A6C9C0;border-top:4px solid #EFC63B;border-radius:8px;background:#FFF;overflow-wrap:anywhere;box-shadow:0 3px 12px rgba(21,55,52,.07)}
.security-diagram .security-remedy-head{display:block;padding:18px 20px 14px;background:#F0F7F4;border-bottom:1px solid #D4E5DF}
.security-diagram .security-remedy-head .security-remedy-eyebrow{font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.04em;color:#0E7C71;margin:0 0 6px}
.security-diagram .security-remedy-head h5.security-remedy-title{font-family:var(--sans);font-size:19px;font-weight:700;line-height:1.5;margin:0 0 8px;color:#153734}
.security-diagram .security-remedy-head .security-product-context{font-size:15px;font-weight:400;line-height:1.75;margin:0;color:#405D58}
.security-diagram .security-product-list{display:block;list-style:none;margin:0;padding:0 20px}
.security-diagram .security-product-list>li{display:block;margin:0;padding:0;min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.security-diagram .security-product-list>li + li{border-top:1px solid #DFEAE5}
.security-diagram .security-product-link{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 18px;padding:15px 0;max-width:100%;font-size:15px;line-height:1.65;font-weight:500;color:#0E7C71;text-underline-offset:3px;overflow-wrap:anywhere;text-decoration:none}
.security-diagram .security-product-name{flex:1 1 180px;min-width:0;font-size:15px;font-weight:500;line-height:1.65;color:#153734}
.security-diagram .security-product-cta{flex:0 0 auto;font-size:13px;font-weight:700;line-height:1.65;color:#0E7C71}
.security-diagram .security-product-link:hover .security-product-name{text-decoration:underline;text-decoration-color:#0E7C71;text-underline-offset:3px}
.security-diagram .security-product-link:hover .security-product-cta{color:#095F57}
.security-diagram .security-product-link:focus-visible,.security-diagram .security-products summary:focus-visible{outline:3px solid #2D719F;outline-offset:4px}
.security-remedy-deck{min-width:0;margin-top:20px}
.security-diagram .security-remedy-deck[hidden],.security-diagram .security-product-panel[hidden]{display:none!important}
.security-diagram .security-remedy-deck>.security-product-panel{margin-top:0}
@media (min-width:1200px){
  .security-steps,.security-zones,.security-monitor{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  :is(.security-steps,.security-zones,.security-monitor):has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  :is(.security-steps,.security-zones,.security-monitor):has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.security-steps,.security-zones,.security-monitor):has(>li:only-child){grid-template-columns:minmax(0,1fr)}
  .security-steps>li{display:flex;flex-direction:column;padding:16px}
  .security-step-no{margin-bottom:12px}
  .security-step-body{display:flex;flex-direction:column}
  .security-step-body>p{flex:1}
  .security-steps>li:not(:last-child)::after,.security-zones>li:not(:last-child)::after,.security-monitor>li:not(:last-child)::after{content:"→";top:calc(50% - 15px);left:100%;height:30px;width:24px}
  .security-zone-head{flex:0 0 auto}
  .security-zone>p:not(.security-control){flex:1}
  .security-zone .security-control{flex:0 0 auto}
  .security-remedy-deck .security-remedy-head{padding:20px 24px 16px}
  .security-remedy-deck .security-product-list{padding:0 24px}
}
@media (max-width:719px){
  .security-diagram details.security-products>summary{min-height:62px}
  .security-telemetry{padding:16px}
  .security-diagram .security-remedy-head{padding:16px}
  .security-diagram .security-product-list{padding:0 16px}
  .security-diagram .security-product-name{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .security-diagram *{transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .security-diagram{break-inside:avoid}
  .security-steps,.security-zones,.security-monitor{grid-template-columns:minmax(0,1fr)}
  .security-diagram figcaption{color:#153734;background:#E1F0EC}
  .security-diagram-label{color:#153734;border-color:#153734}
  .security-diagram .security-product-panel{box-shadow:none}
}

/* 方案依需求由上往下閱讀，會員使用文字連結，保留能力說明。 */
.org-cards--solutions{list-style:none;padding:0;margin:0;min-width:0}
.org-cards--solutions .solution-section{padding:0;margin:0;min-width:0;overflow-wrap:anywhere}
.org-cards--solutions .solution-section + .solution-section{margin-top:28px}
.blocks .solution-section h3{font-size:19px;line-height:1.5;margin:0 0 8px}
.solution-section>p{font-size:15px;line-height:1.75;margin:0 0 10px}
.solution-members{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 22px}
.solution-members>li{min-width:0;max-width:100%;line-height:1.75}
.solution-member-link{display:inline-block;max-width:100%;padding:5px 0;font-size:15px;line-height:1.75;color:var(--teal-text);text-underline-offset:3px;overflow-wrap:anywhere}
.solution-member-link:hover{text-decoration-thickness:2px}
@media (max-width:719px){
  .solution-members{display:block}
  .solution-member-link{padding:7px 0}
}

/* 同列的應對入口與控制區對齊，文字變長時由內容決定列高。 */
@supports (grid-template-rows:subgrid){
  @media (min-width:1200px){
    .security-zones{grid-template-rows:repeat(5,auto);row-gap:0}
    .security-zone{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
    .security-zone-head{grid-row:1}
    .security-zone>h4{grid-row:2}
    .security-zone>p:not(.security-control){grid-row:3}
    .security-zone>details.security-products{grid-row:4}
    .security-zone>.security-control{grid-row:5}
  }
}