/* ============================================
   SAA セクション — css/style.css に重ねる差分スタイル
   （アクセント色とビジュアル部品のみ）
   =================================================== */

/* ---------- アクセント色（CP と見分けるためティール系） ---------- */
.site-header,
.site-footer {
  background-color: #0b3d4a;
}

.site-header .container {
  justify-content: space-between;
}

.site-title span {
  color: #5fd3c6;
}

.site-title:hover {
  color: #5fd3c6;
}

/* 長い英語の識別子（ApproximateNumberOfMessagesVisible 等）でスマホ幅がはみ出さないように */
main {
  overflow-wrap: anywhere;
}

/* 2 列の表（キーワード表など）はスマホ幅でも横スクロールさせず折り返す */
.info-table:not(:has(tr > :nth-child(3))) {
  min-width: 0;
}

.saa-cp-link {
  color: #d6eef0;
  font-size: 0.85rem;
}

.saa-cp-link:hover {
  color: #ffffff;
}

.hero {
  background: linear-gradient(135deg, #0b3d4a 0%, #13606e 100%);
}

.hero-badge {
  background-color: #5fd3c6;
  color: #0b3d4a;
}

h2 {
  border-left-color: #13a39a;
}

.site-footer {
  color: #b8d3d8;
}

/* ---------- ひとことで言うと ---------- */
.saa-summary {
  background-color: #eef9f8;
  border: 1px solid #b6e3de;
  border-left: 5px solid #13a39a;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 20px 0;
}

.saa-summary p:last-child {
  margin-bottom: 0;
}

/* ---------- ビジュアル共通 ---------- */
.saa-visual {
  background-color: #ffffff;
  border: 1px solid #dce1ea;
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0 32px;
}

.saa-visual h3 {
  margin-top: 0;
}

.saa-visual-type {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0b3d4a;
  background-color: #d8f1ee;
  border-radius: 12px;
  padding: 2px 10px;
  margin-bottom: 8px;
}

.saa-visual svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  font-family: inherit;
}

.saa-note {
  font-size: 0.85rem;
  color: #555;
  margin: 12px 0 0;
}

/* SVG の部品 */
.box { fill: #f4f7fa; stroke: #8a99aa; stroke-width: 2; }
.box-vpc { fill: #f3fbfa; stroke: #13a39a; stroke-width: 2.5; stroke-dasharray: 8 5; }
.box-pub { fill: #e8f5ec; stroke: #3a8f55; stroke-width: 2; }
.box-priv { fill: #eef1fb; stroke: #4b63b5; stroke-width: 2; }
.box-az { fill: #fafbfc; stroke: #8a99aa; stroke-width: 2; stroke-dasharray: 6 4; }
.node { fill: #ffffff; stroke: #232f3e; stroke-width: 2; }
.node-aws { fill: #fff4e0; stroke: #d98200; stroke-width: 2; }
.lbl { font-size: 24px; fill: #1a1a1a; text-anchor: middle; dominant-baseline: middle; }
.lbl-s { font-size: 22px; fill: #444; text-anchor: middle; dominant-baseline: middle; }
.lbl-l { text-anchor: start; }
.line { stroke: #b5bfcb; stroke-width: 3; fill: none; }

/* 再生型: ハイライトとパケット */
.hl { transition: stroke 0.4s, fill 0.4s, opacity 0.4s; }
.line.hl.is-on { stroke: #d98200; stroke-width: 5; }
.node.hl.is-on,
.node-aws.hl.is-on { stroke: #d98200; stroke-width: 4; }
.mark.hl { opacity: 0; }
.mark.hl.is-on { opacity: 1; }
.pkt {
  transition: transform 1.2s ease-in-out, opacity 0.4s;
}
.pkt.is-hidden { opacity: 0; }
.pkt circle { fill: #d98200; stroke: #ffffff; stroke-width: 2; }
.pkt text { font-size: 16px; fill: #ffffff; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.ng { fill: #b00020; font-weight: 700; }
.okc { fill: #1d7a3e; font-weight: 700; }

/* 再生コントロール */
.player-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 8px;
}

.player-controls button,
.saa-btn {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0b3d4a;
  background-color: #eef9f8;
  border: 2px solid #13a39a;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

.player-controls button:hover:not(:disabled),
.saa-btn:hover:not(:disabled) {
  background-color: #d8f1ee;
}

.player-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.player-controls button:focus-visible,
.saa-btn:focus-visible,
.saa-form input:focus-visible,
.saa-form select:focus-visible {
  outline: 3px solid #d98200;
  outline-offset: 2px;
}

.player-counter {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  margin: 0 0 4px;
}

.player-caption {
  min-height: 3.5em;
  background-color: #f7f8fa;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0;
}

/* シミュレーター */
.saa-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 20px;
  margin: 12px 0;
}

.saa-form fieldset {
  border: 1px solid #dce1ea;
  border-radius: 6px;
  padding: 10px 14px;
}

.saa-form legend {
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0 4px;
}

.saa-form label {
  display: block;
  font-size: 0.92rem;
  margin: 6px 0;
}

.saa-form select,
.saa-form input[type="range"] {
  width: 100%;
  min-height: 36px;
  font-size: 0.95rem;
  font-family: inherit;
}

.saa-form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
}

.saa-result {
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0 0;
  background-color: #f7f8fa;
  border-left: 5px solid #8a99aa;
}

.saa-result.is-ok { background-color: #eaf7ee; border-left-color: #1d7a3e; }
.saa-result.is-ng { background-color: #fdecee; border-left-color: #b00020; }

.saa-result strong {
  display: block;
}

/* Auto Scaling のインスタンス */
.inst rect { fill: #e4f5e9; stroke: #1d7a3e; stroke-width: 2; }
.inst text { font-size: 22px; text-anchor: middle; dominant-baseline: central; fill: #1a6630; }
.inst.is-down rect { fill: #fdecee; stroke: #b00020; }
.inst.is-down text { fill: #b00020; }
.inst.is-empty { display: none; }
.inst { transition: opacity 0.6s; }
.az-down .box-az { fill: #fdecee; stroke: #b00020; }

/* SQS の滞留バー */
.queue-bar rect.fill { fill: #d98200; transition: width 0.8s; }

/* フローチャート */
.flow-path {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.flow-path li {
  position: relative;
  border: 2px solid #8a99aa;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 26px;
  background-color: #f7f8fa;
}

.flow-path li::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  color: #8a99aa;
  font-weight: 700;
}

.flow-path li:last-child::after {
  display: none;
}

.flow-path .flow-answer {
  font-weight: 700;
  color: #0b3d4a;
}

.flow-path li.flow-current {
  border-color: #13a39a;
  background-color: #eef9f8;
}

.flow-path li.flow-result {
  border-color: #d98200;
  background-color: #fff4e0;
}

.flow-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ---------- アニメーションを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pkt,
  .hl,
  .inst,
  .queue-bar rect.fill {
    transition: none;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 640px) {
  .saa-visual {
    padding: 12px 10px;
  }

  .player-controls button {
    flex: 1 1 30%;
    padding: 8px 6px;
  }
}

/* ---------- Lambda: 同時実行数の上限線（lambda.html） ---------- */
.limit-line { stroke: #b00020; stroke-width: 4; stroke-dasharray: 6 4; }

/* S3 design pilot — scoped until the design is approved. */
.s3-design-pilot .saa-visual { border-color: #e2e8ee; border-radius: 16px; padding: 28px; box-shadow: 0 8px 28px #16324306; }
.s3-design-pilot .saa-visual h3 { color: #172b3a; font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 18px; }
.s3-design-pilot .saa-visual-type { background: transparent; color: #52717b; padding: 0; border-radius: 0; font-size: .72rem; letter-spacing: .1em; margin-bottom: 10px; }
.s3-design-pilot .saa-visual svg { max-width: 520px; margin: 24px auto; }
.s3-design-pilot .lc-track { fill: none; stroke: #e2e9ed; stroke-width: 2; }
.s3-design-pilot .lc-stops circle { fill: #fff; stroke: #afbdc7; stroke-width: 2; }
.s3-design-pilot #player-lc .node { fill: #f7f9fa; stroke: #e7edf0; stroke-width: 1; }
.s3-design-pilot #player-lc .node.is-on { fill: #edf8f6; stroke: #168477; stroke-width: 1.5; }
.s3-design-pilot #player-lc .lc-expiry { fill: #fff; stroke-dasharray: 4 4; }
.s3-design-pilot #player-lc .lbl, .s3-design-pilot #player-lc .lbl-s { fill: #172b3a; }
.s3-design-pilot #player-lc .lc-name { text-anchor: start; font-weight: 600; }
.s3-design-pilot #player-lc .lc-time { text-anchor: end; fill: #5e7480; font-variant-numeric: tabular-nums; }
.s3-design-pilot #player-lc .lc-status { fill: #168477; font-weight: 600; }
.s3-design-pilot #player-lc .line.is-on { stroke: #168477; stroke-width: 2; }
.s3-design-pilot #player-lc .pkt circle { fill: #168477; stroke: #fff; stroke-width: 3; }
.s3-design-pilot #player-lc .pkt path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s3-design-pilot .pkt { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.s3-design-pilot .hl { transition: stroke .2s, fill .2s, opacity .2s; }
.s3-design-pilot .player-counter { color: #657985; font-variant-numeric: tabular-nums; font-size: .75rem; margin-bottom: 10px; }
.s3-design-pilot .player-caption { background: #f7f9fa; color: #364d5c; padding: 16px 18px; border-radius: 10px; line-height: 1.8; }
.s3-design-pilot .player-controls { gap: 6px; margin-top: 18px; }
.s3-design-pilot .player-controls button, .s3-design-pilot .saa-btn { background: #fff; border: 1px solid #dce5e9; color: #364d5c; border-radius: 8px; font-weight: 500; font-size: .85rem; }
.s3-design-pilot .player-controls [data-act="play"] { background: #163b46; color: #fff; border-color: #163b46; }
.s3-design-pilot .player-controls button:hover:not(:disabled), .s3-design-pilot .saa-btn:hover:not(:disabled) { background: #edf8f6; color: #136b61; border-color: #168477; }
.s3-design-pilot .flow-path { counter-reset: decision; }
.s3-design-pilot .flow-path li { counter-increment: decision; border: 0; border-left: 2px solid #dce5e9; border-radius: 0; background: transparent; padding: 12px 18px; margin: 0 0 8px; }
.s3-design-pilot .flow-path li::after { display: none; }
.s3-design-pilot .flow-path li.flow-current { border-color: #168477; background: #f7f9fa; border-radius: 0 8px 8px 0; }
.s3-design-pilot .flow-path li.flow-result { border-color: #168477; background: #edf8f6; border-radius: 0 8px 8px 0; }
.s3-design-pilot .flow-answer { color: #168477; }
.s3-design-pilot .saa-note { color: #647681; font-size: .8rem; line-height: 1.7; margin-top: 18px; }
@media (max-width: 640px) {
  .s3-design-pilot .saa-visual { padding: 18px 14px; border-radius: 12px; }
  .s3-design-pilot .player-controls button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-design-pilot .pkt, .s3-design-pilot .hl { transition: none; }
}

/* Approved S3 visual style — shared across SAA service pages. */
.saa-design .saa-visual { border-color: #e2e8ee; border-radius: 16px; padding: 28px; box-shadow: 0 8px 28px #16324306; }
.saa-design .saa-visual h3 { color: #172b3a; font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 18px; }
.saa-design .saa-visual-type { background: transparent; color: #52717b; padding: 0; border-radius: 0; font-size: .72rem; letter-spacing: .1em; margin-bottom: 10px; }
.saa-design .saa-visual svg { max-width: 520px; margin: 24px auto; }
.saa-design .pkt { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.saa-design .hl { transition: stroke .2s, fill .2s, opacity .2s; }
.saa-design .player-counter { color: #657985; font-variant-numeric: tabular-nums; font-size: .75rem; margin-bottom: 10px; }
.saa-design .player-caption { background: #f7f9fa; color: #364d5c; padding: 16px 18px; border-radius: 10px; line-height: 1.8; }
.saa-design .player-controls { gap: 6px; margin-top: 18px; }
.saa-design .player-controls button, .saa-design .saa-btn { background: #fff; border: 1px solid #dce5e9; color: #364d5c; border-radius: 8px; font-weight: 500; font-size: .85rem; }
.saa-design .player-controls [data-act="play"] { background: #163b46; color: #fff; border-color: #163b46; }
.saa-design .player-controls button:hover:not(:disabled), .saa-design .saa-btn:hover:not(:disabled) { background: #edf8f6; color: #136b61; border-color: #168477; }
.saa-design .flow-path { counter-reset: decision; }
.saa-design .flow-path li { counter-increment: decision; border: 0; border-left: 2px solid #dce5e9; border-radius: 0; background: transparent; padding: 12px 18px; margin: 0 0 8px; }
.saa-design .flow-path li::after { display: none; }
.saa-design .flow-path li.flow-current { border-color: #168477; background: #f7f9fa; border-radius: 0 8px 8px 0; }
.saa-design .flow-path li.flow-result { border-color: #168477; background: #edf8f6; border-radius: 0 8px 8px 0; }
.saa-design .flow-answer { color: #168477; }
.saa-design .saa-note { color: #647681; font-size: .8rem; line-height: 1.7; margin-top: 18px; }
@media (max-width: 640px) {
  .saa-design .saa-visual { padding: 18px 14px; border-radius: 12px; }
  .saa-design .player-controls button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .saa-design .pkt, .saa-design .hl { transition: none; }
}

/* Diagram hierarchy: light boundaries, neutral nodes, teal service nodes. */
.saa-design .saa-visual .box { fill: #f7f9fa; stroke: #dce5e9; stroke-width: 1; }
.saa-design .saa-visual .box-vpc { fill: #fff; stroke: #9bbcb9; stroke-width: 1; stroke-dasharray: 5 5; }
.saa-design .saa-visual .box-pub { fill: #f2f8f7; stroke: #cfdfdc; stroke-width: 1; }
.saa-design .saa-visual .box-priv { fill: #f4f7fa; stroke: #d5dfe7; stroke-width: 1; }
.saa-design .saa-visual .box-az { fill: #fafbfc; stroke: #d5dfe7; stroke-width: 1; stroke-dasharray: 4 4; }
.saa-design .saa-visual .node { fill: #fff; stroke: #b8c8d1; stroke-width: 1; }
.saa-design .saa-visual .node-aws { fill: #edf8f6; stroke: #90c7bf; stroke-width: 1; }
.saa-design .saa-visual .lbl { fill: #172b3a; font-weight: 600; }
.saa-design .saa-visual .lbl-s { fill: #526b79; }
.saa-design .saa-visual .line { stroke: #b8c8d1; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.saa-design .saa-visual .line.hl.is-on { stroke: #168477; stroke-width: 2.5; }
.saa-design .saa-visual .node.hl.is-on,
.saa-design .saa-visual .node-aws.hl.is-on { fill: #edf8f6; stroke: #168477; stroke-width: 1.5; }
.saa-design .saa-visual .pkt circle { fill: #168477; stroke: #fff; stroke-width: 3; }
.saa-design .saa-visual .ng { fill: #b14856; }
.saa-design .saa-visual .okc { fill: #168477; }
.saa-design .saa-visual .inst rect { fill: #edf8f6; stroke: #90c7bf; stroke-width: 1; rx: 8px; }
.saa-design .saa-visual .inst text { fill: #136b61; }
.saa-design .saa-visual .inst.is-down rect,
.saa-design .saa-visual .az-down .box-az { fill: #fcf2f3; stroke: #dcaab1; }
.saa-design .saa-visual .inst.is-down text { fill: #b14856; }
.saa-design .saa-visual .queue-bar rect.fill { fill: #168477; transition: width .35s ease-out; }
.saa-design .saa-result { background: #f7f9fa; border-left-width: 2px; border-radius: 0 8px 8px 0; padding: 14px 18px; }
.saa-design .saa-result.is-ok { background: #edf8f6; border-color: #168477; }
.saa-design .saa-result.is-ng { background: #fcf2f3; border-color: #b14856; }
.saa-design .saa-form fieldset { border-color: #e2e8ee; border-radius: 8px; }
.saa-design .saa-form select { border: 1px solid #dce5e9; border-radius: 6px; background: #fff; color: #364d5c; padding: 6px 8px; }
.saa-design .saa-form input { accent-color: #168477; }
@media (prefers-reduced-motion: reduce) {
  .saa-design .saa-visual .queue-bar rect.fill, .saa-design .saa-visual .inst { transition: none; }
}

.saa-design .saa-visual { scroll-margin-top: 90px; }