/* 노션 그림체를 기본으로 고정하고, 섹션마다 다른 업무 장면을 사용한다. */
.solution-scope .delight-hero-scene{
  display: block;
  min-height: 0;
  padding: 28px 36px;
  background: #f3f6f6;
}

.solution-scope .notion-illustration.full-hero-illustration{
  max-width: 940px;
  margin: 0 auto;
  background: transparent;
}

.solution-scope .notion-illustration.full-hero-illustration img{
  display: block;
  width: 100%;
  height: 430px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.solution-scope .notion-illustration{
  margin: 0;
  min-width: 0;
  background: #fff;
}

.solution-scope .notion-illustration img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.solution-scope .intro-illustration{ align-self: center; }
.solution-scope #problems .section-heading > p:last-child{ margin-inline: auto; }
.solution-scope .delight-story .story-visual.notion-illustration{
  min-height: 0;
  padding: 24px;
  border-radius: 16px;
  background: #f3f6f6;
}

.solution-scope .story-visual.notion-illustration img{ mix-blend-mode: multiply; }

/* Ontology landing reference: before/after, illustrated flow, and deliverables. */
.solution-scope .chatbot-intro .section-heading,
.solution-scope .workflow > .container > .section-heading{ text-align: center; }
.solution-scope .workflow > .container > .section-heading{ margin-bottom: 48px; }
.solution-scope .chatbot-intro .section-heading > p,
.solution-scope .workflow .section-heading > p{ margin-inline: auto; }
.solution-scope .chatbot-comparison{ display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; }
.solution-scope .comparison-side{ min-width: 0; padding-right: 40px; }
.solution-scope .comparison-after{ border-left: 1px solid var(--line); padding: 0 0 0 40px; }
.solution-scope .comparison-label{ font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.solution-scope .comparison-after .comparison-label{ color: #00786f; }
.solution-scope .comparison-side h3{ margin: 16px 0 24px; font-size: 30px; line-height: 1.45; letter-spacing: -.035em; }
.solution-scope .comparison-side > p:last-child{ margin-top: 24px; font-size: 16px; line-height: 1.9; color: var(--muted); }
.solution-scope .comparison-side > p strong{ color: var(--ink); font-weight: 600; }
.solution-scope .chatbot-example{ max-width: 920px; margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; }
.solution-scope .chatbot-example h3{ margin-top: 12px; font-size: 23px; line-height: 1.6; letter-spacing: -.03em; }
.solution-scope .chatbot-example > p:last-child{ margin-top: 20px; font-size: 16px; line-height: 1.9; color: var(--muted); }

.solution-scope .chatbot-flow{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; list-style: none; margin: 0 0 40px; padding: 0 5%; }
.solution-scope .chatbot-flow li > span{ font-size: 12px; color: #00786f; }
.solution-scope .chatbot-flow h3{ margin-top: 10px; font-size: 18px; line-height: 1.5; }
.solution-scope .chatbot-flow p{ margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.solution-scope .chatbot-workbench{ border-radius: 16px; padding: 28px 36px; background: #f3f6f6; }
.solution-scope .chatbot-scene-tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.solution-scope .chatbot-scene-tabs button{ font: inherit; font-size: 13px; font-weight: 600; padding: 10px 18px; color: var(--muted); background: transparent; border: 1px solid #d4deda; border-radius: 7px; cursor: pointer; }
.solution-scope .chatbot-scene-tabs button[aria-selected="true"]{ background: #1a1a2e; border-color: #1a1a2e; color: #fff; }
.solution-scope .chatbot-scene-panel{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 60px; align-items: center; min-height: 350px; }
.solution-scope .chatbot-scene-copy h3{ font-size: 27px; line-height: 1.4; letter-spacing: -.035em; }
.solution-scope .chatbot-scene-copy > p{ font-size: 16px; line-height: 1.9; color: var(--muted); margin-top: 22px; }
.solution-scope .chatbot-scene-copy small{ display: block; font-size: 11px; color: #777785; margin-top: 24px; }
.solution-scope .chatbot-workbench .notion-illustration,
.solution-scope .chatbot-delivery .notion-illustration{ background: transparent; }
.solution-scope .chatbot-workbench img,
.solution-scope .chatbot-delivery img{ mix-blend-mode: multiply; }

.solution-scope #capabilities{ background: #fff; }
.solution-scope .chatbot-delivery{ display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 36px; align-items: center; padding: 32px; border-radius: 16px; background: #f3f6f6; }
.solution-scope .chatbot-delivery-tabs{ display: flex; flex-direction: column; min-width: 0; }
.solution-scope .chatbot-delivery-tabs button{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 16px; border: 0; border-bottom: 1px solid #d6dedc; border-radius: 0; background: transparent; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.solution-scope .chatbot-delivery-tabs button[aria-selected="true"]{ background: #fff; border-radius: 9px; border-bottom-color: #e1e5e5; }
.solution-scope .chatbot-delivery-tabs strong{ display: block; font-size: 17px; font-weight: 700; line-height: 1.6; }
.solution-scope .chatbot-delivery-tabs small{ display: block; margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.solution-scope .delivery-arrow{ color: #00877e; font-size: 27px; font-weight: 400; flex-shrink: 0; }
.solution-scope .chatbot-delivery-stage{ min-width: 0; }
.solution-scope .chatbot-delivery-panel .notion-illustration{ padding: 16px 20px; }
.solution-scope .delivery-explanation{ margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.solution-scope .delivery-output{ display: flex; gap: 18px; align-items: baseline; border-top: 1px solid #d6dedc; margin-top: 20px; padding-top: 18px; font-size: 13px; line-height: 1.8; }
.solution-scope .delivery-output > span{ color: #00877e; font-size: 12px; flex-shrink: 0; }
.solution-scope .delivery-output strong{ font-weight: 600; }
.solution-scope .chatbot-scene-panel[hidden], .solution-scope .chatbot-delivery-panel[hidden]{ display: none; }
.solution-scope .chatbot-scene-tabs button:focus-visible,
.solution-scope .chatbot-delivery-tabs button:focus-visible,
.solution-scope .chatbot-scene-panel:focus-visible,
.solution-scope .chatbot-delivery-panel:focus-visible{ outline: 2px solid #00786f; outline-offset: 4px; }

@media (max-width: 800px) {
  .solution-scope .delight-story, .solution-scope .story-1{ grid-template-columns: 1fr; gap: 30px; }
  .solution-scope .story-visual, .solution-scope .story-1 .story-visual{ grid-column: 1; grid-row: 1; }
  .solution-scope .story-copy, .solution-scope .story-1 .story-copy{ grid-column: 1; grid-row: 2; }
  .solution-scope .notion-illustration{ max-width: 620px; width: 100%; margin-inline: auto; }
  .solution-scope .notion-illustration.full-hero-illustration img{ height: auto; max-height: 360px; aspect-ratio: 3 / 2; }
  .solution-scope .comparison-side{ padding-right: 24px; }
  .solution-scope .comparison-after{ padding: 0 0 0 24px; }
  .solution-scope .comparison-side h3{ font-size: 25px; }
  .solution-scope .chatbot-flow{ gap: 24px; padding: 0; }
  .solution-scope .chatbot-flow h3{ font-size: 16px; }
  .solution-scope .chatbot-workbench{ padding: 24px; }
  .solution-scope .chatbot-scene-panel{ grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .solution-scope .chatbot-scene-panel .notion-illustration{ max-width: 560px; }
  .solution-scope .chatbot-scene-copy h3{ font-size: 24px; }
  .solution-scope .chatbot-scene-copy > p{ margin-top: 14px; }
  .solution-scope .chatbot-delivery{ grid-template-columns: 1fr; padding: 24px; gap: 28px; }
  .solution-scope .chatbot-delivery-panel .notion-illustration{ max-width: 560px; }
}

@media (max-width: 600px) {
  .solution-scope .delight-hero-scene{ padding: 16px; }
  .solution-scope .delight-story, .solution-scope .story-1{ gap: 24px; }
  .solution-scope .delight-story .story-visual.notion-illustration{ padding: 16px; }
  .solution-scope .chatbot-intro .section-heading,
  .solution-scope .workflow > .container > .section-heading{ text-align: left; }
  .solution-scope .workflow > .container > .section-heading{ margin-bottom: 32px; }
  .solution-scope .chatbot-intro .section-heading br,
  .solution-scope .workflow .section-heading > p br,
  .solution-scope #capabilities .section-heading > p br{ display: none; }
  .solution-scope .chatbot-comparison{ grid-template-columns: 1fr; margin-top: 40px; gap: 36px; }
  .solution-scope .comparison-side{ padding: 0; }
  .solution-scope .comparison-after{ border-left: 0; border-top: 1px solid var(--line); padding-top: 32px; }
  .solution-scope .comparison-side h3{ font-size: 26px; margin-bottom: 20px; }
  .solution-scope .comparison-side > p:last-child{ font-size: 15px; margin-top: 20px; }
  .solution-scope .chatbot-example{ text-align: left; margin-top: 36px; padding-top: 28px; }
  .solution-scope .chatbot-example h3{ font-size: 21px; }
  .solution-scope .chatbot-example > p:last-child{ font-size: 15px; }
  .solution-scope .chatbot-flow{ grid-template-columns: 1fr 1fr; gap: 28px 18px; margin-bottom: 32px; }
  .solution-scope .chatbot-flow p{ font-size: 13px; }
  .solution-scope .chatbot-workbench{ padding: 20px; }
  .solution-scope .chatbot-scene-tabs{ gap: 6px; }
  .solution-scope .chatbot-scene-tabs button{ padding: 9px 12px; font-size: 12px; }
  .solution-scope .chatbot-scene-copy > p{ font-size: 15px; }
  .solution-scope .chatbot-delivery{ padding: 20px 16px; }
  .solution-scope .chatbot-delivery-tabs button{ padding: 20px 12px; gap: 12px; }
  .solution-scope .chatbot-delivery-tabs strong{ font-size: 16px; }
  .solution-scope .chatbot-delivery-panel .notion-illustration{ padding: 0; }
  .solution-scope .delivery-explanation{ font-size: 14px; }
  .solution-scope .delivery-output{ display: block; }
  .solution-scope .delivery-output strong{ display: block; margin-top: 6px; }
}