/* Shared UI refinements for Issue #46. Keep this file override-only and small. */

#solutions .solution-heading{margin:0 0 26px}
#solutions .solution-title{margin:0;color:var(--brand);font-size:clamp(36px,5vw,62px);font-weight:900;line-height:1.06;letter-spacing:-.045em;text-transform:none;word-break:keep-all;overflow-wrap:break-word}

/* Issue #51: keep the SCIRP action in the card header so the research card stays compact. */
#research .research-card{position:relative;padding-right:190px}
#research .research-link{position:absolute;top:20px;right:26px;margin-top:0;align-self:auto;white-space:nowrap}

/* Issue #57: site-wide responsive text safety. Grid/flex children must be allowed to shrink. */
.hero>*,.heading>*,.cards>*,.card,.card-top>*,.consulting-panel,.consulting-panel>*,.consulting-services,.consulting-services>*,.workflow,.steps>*,.road>*,.road-item>*,.cta,.foot>*,.research-card,.research-top>*{min-width:0}

.hero h1,.lead,#solutions .solution-title,.card h3,.card p,.heading h2,.heading>p,.consulting-panel h3,.consulting-panel>div:first-child p,.consulting-services h4,.consulting-services p,.step h3,.step p,.road-item h3,.road-item p,.cta h2,.cta p,.research-card h3,.research-authors,.research-abstract,.research-org{max-width:100%;overflow-wrap:break-word}

/* Korean Hero has two intentional lines. Keep each line intact and size it to fit the available column. */
html[lang="ko"] .hero h1:not(.hero-platform-title){font-size:clamp(42px,5.2vw,68px);line-height:1.02;white-space:nowrap}
html[lang="ko"] .hero h1:not(.hero-platform-title) .gradient{white-space:nowrap}
html[lang="ko"] .hero h1.hero-platform-title{font-size:clamp(34px,3.8vw,50px);line-height:1.05;letter-spacing:-.055em;white-space:normal;overflow-wrap:anywhere}
html[lang="ko"] .hero h1.hero-platform-title .hero-title-line{max-inline-size:100%;white-space:normal;text-wrap:balance}

.card-top{flex-wrap:wrap;gap:8px 10px}
.status{max-width:100%;white-space:normal;text-align:center;line-height:1.25}

/* Issue #59: tighten only the vertical spacing around the Consulting panels. */
#consulting .heading{margin-bottom:20px}
#consulting .consulting-stack{gap:14px}

/* Restore a balanced desktop split: Issue #56 gave the service cards more room by squeezing the left title column too far. */
.consulting-panel{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.consulting-services{grid-template-columns:repeat(3,minmax(0,1fr))}
.consulting-panel h3{font-size:clamp(26px,2.45vw,34px);line-height:1.14;overflow-wrap:break-word;text-wrap:balance}
.consulting-services article{min-width:0;padding-left:14px;padding-right:14px}
.consulting-services h4{max-width:100%;margin-top:26px;font-size:clamp(15px,1.2vw,17px);line-height:1.3;white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:none;text-wrap:balance}

/* Issue #60: place each service number and title on the same row to remove one title row without clipping. */
.consulting-services article{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"number title" "body body";align-content:start;align-items:start;column-gap:10px;row-gap:0;min-height:0}
.consulting-services article>b{grid-area:number;align-self:baseline;padding-top:1px;white-space:nowrap}
.consulting-services article>h4{grid-area:title;margin:0;font-size:clamp(15px,1.2vw,17px);line-height:1.3}
.consulting-services article>p{grid-area:body;margin-top:12px}

/* Korean titles should wrap by words first, but still break as a last resort instead of clipping. */
html[lang="ko"] .lead,html[lang="ko"] #solutions .solution-title,html[lang="ko"] .card h3,html[lang="ko"] .card p,html[lang="ko"] .heading h2,html[lang="ko"] .heading>p,html[lang="ko"] .consulting-panel h3,html[lang="ko"] .consulting-panel p,html[lang="ko"] .consulting-services h4,html[lang="ko"] .consulting-services p,html[lang="ko"] .cta h2,html[lang="ko"] .cta p{word-break:keep-all;overflow-wrap:break-word}

/* Dynamic benchmark content from display-fixes.js: never force a full sentence onto one line. */
#engine-performance .performance-head,#engine-performance .performance-head h2,#engine-performance .performance-impact,#engine-performance .performance-impact-topline,#engine-performance .performance-impact-grid,#engine-performance .performance-impact-metric{min-width:0}
#engine-performance .performance-title-line{white-space:normal!important;text-wrap:balance}
#engine-performance .performance-head h2,#engine-performance .performance-impact-context,#engine-performance .performance-impact-metric span,#engine-performance .performance-impact-note{overflow-wrap:break-word}

@media(min-width:1051px){
  .consulting-panel{gap:28px}
}

/* At tablet widths the header links wrap instead of becoming a clipped horizontal strip. */
@media(max-width:1050px){
  .links{flex-wrap:wrap;white-space:normal!important;overflow:visible!important}
  .links a{min-width:0}
  .consulting-panel{grid-template-columns:1fr}
  .consulting-services{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Research action becomes part of normal flow before its reserved right gutter gets cramped. */
@media(max-width:900px){
  #research .research-card{padding-right:26px}
  #research .research-link{position:static;margin-top:8px;align-self:flex-start;white-space:normal}
  .consulting-services{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  #solutions,#consulting,#workflow,#research{padding-top:18px;padding-bottom:58px;scroll-margin-top:calc(var(--header-h,96px) + 24px)!important}
  #solutions .solution-heading{margin-bottom:20px}
  #solutions .solution-title{font-size:clamp(30px,8.5vw,42px);line-height:1.12;letter-spacing:-.035em}
  #solutions .cards{gap:12px!important}
  #solutions .card{min-height:auto;padding:20px}
  #solutions .card h3{margin:18px 0 8px;font-size:22px;line-height:1.16;word-break:normal;overflow-wrap:break-word}
  #solutions .card p{font-size:15px;line-height:1.58;word-break:normal;overflow-wrap:break-word}
  #solutions .tags{margin-top:14px}

  #consulting .heading,#workflow .heading{gap:18px;margin-bottom:20px}
  #consulting .heading h2,#workflow .heading h2{font-size:clamp(34px,9vw,46px);line-height:1.08;overflow-wrap:break-word}
  #consulting .heading>p,#workflow .heading>p{font-size:15px;line-height:1.62;overflow-wrap:break-word}

  .consulting-stack{gap:18px}
  .consulting-panel{padding:22px;gap:18px;grid-template-columns:1fr}
  .consulting-panel+.consulting-panel{margin-top:0!important}
  .consulting-panel>div:first-child{padding:6px 2px}
  .consulting-panel h3{margin:16px 0 10px;font-size:clamp(25px,7.5vw,32px);line-height:1.14}
  .consulting-panel>div:first-child p{font-size:15px;line-height:1.6}
  .consulting-services{grid-template-columns:1fr;gap:10px}
  .consulting-services article{min-height:auto;padding:18px}
  .consulting-services h4{margin:0;font-size:17px;line-height:1.24}
  .consulting-services article>p{margin-top:10px}

  .workflow{padding:22px}
  .steps{gap:10px}
  .step{min-height:auto;padding:18px}
  .step h3{margin:18px 0 8px;line-height:1.18;overflow-wrap:break-word}
  .step p{font-size:14px;line-height:1.58;overflow-wrap:break-word}

  #research .heading{gap:18px;margin-bottom:24px}
  #research .heading h2{font-size:clamp(34px,9vw,46px);line-height:1.08;overflow-wrap:break-word}
  #research .heading>p{font-size:15px;line-height:1.62;overflow-wrap:break-word}
  .research-card{padding:16px 18px}
  #research .research-card{padding-right:18px}
  .research-card h3{margin:8px 0 3px;line-height:1.22;overflow-wrap:break-word}
  .research-abstract{margin-top:6px;font-size:13.5px;line-height:1.56;overflow-wrap:break-word}
  .research-authors,.research-org{overflow-wrap:anywhere}
  .research-org{font-size:10.5px}

  #engine-performance .performance-impact-grid{grid-template-columns:1fr!important}
  #engine-performance .performance-impact-metric strong{white-space:normal!important;overflow-wrap:break-word}
}

@media(max-width:680px){
  html[lang="ko"] .hero h1:not(.hero-platform-title){font-size:clamp(32px,10vw,42px);line-height:1.04;letter-spacing:-.055em}
  html[lang="ko"] .hero h1.hero-platform-title{font-size:clamp(26px,7.1vw,40px);line-height:1.08;letter-spacing:-.055em;white-space:normal;overflow-wrap:anywhere}
}

@media(max-width:520px){
  .card-top{align-items:flex-start}
  .status{font-size:9px}
  .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-top:10px;padding-bottom:10px}
  .hero-buttons{align-items:stretch}
  .hero-buttons .btn{flex:1 1 100%}
  .research-tag{max-width:100%;overflow-wrap:anywhere}
}

/* Tutorial: responsive in-page YouTube player for the Korean homepage. */
#tutorial{padding:88px 0;scroll-margin-top:calc(var(--header-h,96px) + 24px)}
.tutorial-heading{margin-bottom:26px}
.tutorial-heading h2{margin:0;font-size:clamp(36px,4.8vw,58px);line-height:1.05;letter-spacing:-.055em}
.tutorial-player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(255,255,255,.92);border-radius:28px;background:#0f141b;box-shadow:var(--shadow)}
.tutorial-player iframe{display:block;width:100%;height:100%;border:0}
.tutorial-youtube-link{display:inline-flex;margin-top:14px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.78);color:var(--deep);font-size:12px;font-weight:850;box-shadow:0 8px 18px rgba(42,60,82,.07)}
.tutorial-youtube-link:hover{background:#fff}
.tutorial-youtube-link:focus-visible{outline:3px solid rgba(71,111,123,.24);outline-offset:3px}
@media(max-width:760px){
  #tutorial{padding-top:18px;padding-bottom:58px}
  .tutorial-heading{margin-bottom:20px}
  .tutorial-heading h2{font-size:clamp(34px,9vw,46px);line-height:1.08}
  .tutorial-player{border-radius:20px}
}

/* Issue #83: keep the desktop Hero preview visually secondary to the copy. */
.hero .preview{width:100%;max-width:580px;justify-self:end}
.hero .preview .app{min-height:460px}
@media(max-width:1050px){.hero .preview{width:100%;justify-self:stretch}.hero .preview .app{min-height:520px}}

/* Issue #83: keep each desktop platform message on its own visual line. */
html[lang="ko"] .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
html[lang="ko"] .hero h1.hero-platform-title{font-size:clamp(32px,3.2vw,42px);line-height:1.05;letter-spacing:-.055em;white-space:normal;overflow-wrap:normal}
html[lang="ko"] .hero h1.hero-platform-title .hero-title-line{max-inline-size:none;white-space:nowrap;text-wrap:nowrap}
@media(max-width:1050px){html[lang="ko"] .hero{grid-template-columns:1fr;gap:62px}html[lang="ko"] .hero h1.hero-platform-title .hero-title-line{max-inline-size:100%;white-space:normal;text-wrap:balance}}

/* Issue #89: Hero preview renders the supplied image alone; no dashboard chrome or metric text. */
.hero .preview .app{display:block;min-height:0}
.hero .preview .canvas{min-height:0;aspect-ratio:4/3;border:0;border-radius:24px}


/* Issue #91: keep mobile header navigation compact. */
@media(max-width:680px){
  .links{flex-wrap:nowrap!important;width:100%;overflow-x:auto!important;white-space:nowrap!important}
  .links a[href="#tutorial"],.links .contact-trigger{display:none!important}
}


/* Issue #93: give the platform Hero title breathing room and keep descenders visible. */
.hero h1.hero-platform-title{line-height:1.16;padding-bottom:.12em}
.hero h1.hero-platform-title .hero-title-line+.hero-title-line{margin-top:.06em}
html[lang="ko"] .hero h1.hero-platform-title{line-height:1.16;padding-bottom:.12em}
@media(max-width:680px){
  .hero h1.hero-platform-title,html[lang="ko"] .hero h1.hero-platform-title{line-height:1.17;padding-bottom:.14em}
  .hero h1.hero-platform-title .hero-title-line+.hero-title-line{margin-top:.08em}
}


/* Issue #95: keep the video section label compact after its large title is removed. */
.tutorial-heading{margin-bottom:12px}
@media(max-width:760px){.tutorial-heading{margin-bottom:12px}}

/* Edge/Windows: background-clip:text가 글꼴 content-area까지만 칠해 g 하강부가 잘리는 문제 방지 (레이아웃 영향 없음) */
.gradient{padding-bottom:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}