/* ==========================================================================
   DAILY Works / Use Cases
   活用例ページだけで使うケース紹介、業務フロー、効果表示。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ユースケースページ
   -------------------------------------------------------------------------- */

.case {
  padding-block: var(--ag-space-20) var(--ag-space-24);
}

.case.case--alternate {
  background: var(--ag-white);
}

.case-head {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--ag-space-10);
  align-items: start;
}

.case-head > span {
  color: var(--ag-brand);
  font-size: 14px;
  font-weight: var(--ag-weight-strong);
  line-height: var(--ag-leading-meta);
  padding-top: 8px;
}

.case-head h2 {
  font-size: 32px;
  font-weight: var(--ag-weight-display);
  letter-spacing: 0.015em;
  line-height: var(--ag-leading-section);
}

.case-head p {
  margin-top: var(--ag-space-4);
  color: var(--ag-text-2);
  font-size: 18px;
  line-height: 1.85;
}

.case-scene-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas: "copy visual";
  gap: var(--ag-space-12);
  align-items: stretch;
  margin-top: var(--ag-space-10);
}

.case-scene-layout--reversed {
  grid-template-areas: "visual copy";
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.case-scene-copy {
  grid-area: copy;
  align-self: center;
}

.case-scene-label {
  display: block;
  color: var(--ag-brand);
  font-size: 14px;
  font-weight: var(--ag-weight-strong);
}

.case-scene-copy h3 {
  margin-top: var(--ag-space-3);
  color: var(--ag-ink);
  font-size: 24px;
  font-weight: var(--ag-weight-heading);
  line-height: var(--ag-leading-heading);
}

.case-scene-copy > p {
  margin-top: var(--ag-space-4);
  color: var(--ag-text-2);
  font-size: 16px;
  line-height: var(--ag-leading-body);
}

.case-scene-copy ul {
  display: grid;
  gap: var(--ag-space-3);
  margin-top: var(--ag-space-6);
  border-top: 1px solid var(--ag-line-strong);
  padding-top: var(--ag-space-5);
}

.case-scene-copy li {
  position: relative;
  padding-left: 18px;
  color: var(--ag-ink-soft);
  font-size: 15px;
  line-height: var(--ag-leading-compact);
}

.case-scene-copy li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--ag-brand);
  content: "–";
}

.case-scene-visual {
  grid-area: visual;
  overflow: hidden;
  min-height: 320px;
  margin: 0;
  background: var(--ag-sage-light);
}

.case-scene-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.15fr) 48px minmax(0, 1fr);
  align-items: stretch;
  margin-top: var(--ag-space-12);
}

.case-workflow-node {
  display: flex;
  gap: var(--ag-space-4);
  align-items: flex-start;
  min-height: 190px;
  padding: var(--ag-space-6);
  background: var(--ag-white);
}

.case-workflow-node.is-agent {
  background: var(--ag-brand);
  color: var(--ag-white);
}

.case-workflow-node.is-output {
  background: var(--ag-brand-pale);
}

.case-workflow-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--ag-paper);
  color: var(--ag-ink);
  font-size: 22px;
}

.case-workflow-node.is-input .case-workflow-icon {
  color: var(--ag-brand);
}

.case-workflow-node.is-agent .case-workflow-icon {
  background: var(--ag-white);
}

.case-workflow-logo {
  display: block;
  width: 32px;
  height: 32px;
}

.case-workflow-node.is-output .case-workflow-icon {
  background: var(--ag-brand);
  color: var(--ag-white);
}

.case-workflow-label {
  display: block;
  color: var(--ag-text-3);
  font-size: 13px;
  font-weight: var(--ag-weight-strong);
}

.case-workflow-node.is-agent .case-workflow-label {
  color: var(--ag-brand-pale);
}

.case-workflow-node.is-output .case-workflow-label {
  color: var(--ag-brand);
}

.case-workflow-node strong {
  display: block;
  margin-top: var(--ag-space-2);
  color: var(--ag-ink);
  font-size: 18px;
  font-weight: var(--ag-weight-heading);
  line-height: var(--ag-leading-heading);
}

.case-workflow-node.is-agent strong {
  color: var(--ag-white);
}

.case-workflow-node p,
.case-workflow-node ol {
  margin-top: var(--ag-space-3);
  color: var(--ag-text-2);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.case-workflow-node.is-agent ol {
  padding-left: 1.25em;
  color: var(--ag-white);
}

.case-workflow-node.is-agent li + li {
  margin-top: 4px;
}

.case-workflow-arrow {
  display: grid;
  place-items: center;
  color: var(--ag-brand);
}

.case-impact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--ag-space-10);
  align-items: center;
  margin-top: var(--ag-space-6);
  padding: var(--ag-space-6) var(--ag-space-8);
  background: var(--ag-brand-pale);
}

.case-impact-summary strong {
  display: block;
  color: var(--ag-ink);
  font-size: 21px;
  font-weight: var(--ag-weight-heading);
  line-height: var(--ag-leading-heading);
}

.case-impact-list {
  display: grid;
  gap: var(--ag-space-3);
}

.case-impact-list li {
  display: flex;
  gap: var(--ag-space-3);
  align-items: flex-start;
  color: var(--ag-ink-soft);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.case-impact-list li > span {
  color: var(--ag-brand);
  font-size: 18px;
}

.case-process {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  align-items: stretch;
  margin-top: var(--ag-space-10);
  border-block: 1px solid var(--ag-line-strong);
}

.case-process section {
  padding: var(--ag-space-8) var(--ag-space-6) var(--ag-space-8) 0;
}

.case-process section.is-agent {
  border-top: 3px solid var(--ag-brand);
  padding-inline: var(--ag-space-6);
}

.case-process section.is-output {
  border-top: 3px solid var(--ag-brand);
  background: var(--ag-sage-light);
  padding-inline: var(--ag-space-6);
}

.case-process span {
  display: block;
  color: var(--ag-text-3);
  font-size: 14px;
  font-weight: 500;
}

.case-process .is-agent span,
.case-process .is-output span {
  color: var(--ag-brand);
}

.case-process strong {
  display: block;
  margin-top: var(--ag-space-2);
  font-size: 18px;
  font-weight: var(--ag-weight-heading);
  line-height: var(--ag-leading-heading);
}

.case-process p {
  margin-top: var(--ag-space-2);
  color: var(--ag-text-2);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.case-arrow {
  display: grid;
  place-items: center;
  padding-inline: var(--ag-space-3);
  color: var(--ag-brand);
}

.case-gains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--ag-line-strong);
}

.case-gains div {
  padding: var(--ag-space-6) var(--ag-space-6) var(--ag-space-6) 0;
}

.case-gains div + div {
  border-left: 1px solid var(--ag-line);
  padding-left: var(--ag-space-6);
}

.case-gains dt {
  color: var(--ag-text-3);
  font-size: 14px;
  font-weight: 500;
}

.case-gains dd {
  margin: var(--ag-space-2) 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: var(--ag-leading-compact);
}

.case-note {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
  margin-top: var(--ag-space-5)!important;
  padding: 4px;
  color: var(--ag-ink-soft);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.case-note b {
  color: var(--ag-signal);
  font-size: 14px;
  font-weight: var(--ag-weight-strong);
}