/* PC bilingual layout. Preserve the original artboard and each text block's alignment. */
.header { left: 0; transform: none; }
.header.hidden { transform: translateY(-100%); }
@media (min-width:1920px) {
  .header { left:50%; transform:translateX(-50%); }
  .header.hidden { transform:translateX(-50%) translateY(-100%); }
}
.nav { gap:40px; }
.nav-menu { gap:48px; }
.language-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:6.3px;
  flex-shrink:0; margin-left:auto; width:84px; height:30.8px; padding:0 11.2px;
  border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(17,17,17,.55);
  color:#fff; font:600 12.6px/1 'Pretendard',sans-serif; cursor:pointer;
  box-shadow:0 6px 20px #0003;
}
.language-toggle:hover { background:rgba(17,17,17,.7); }
.language-toggle:focus-visible { outline:2px solid #1494ff; outline-offset:4px; }
.language-toggle svg { width:14px; height:14px; }
.language-toggle:disabled { cursor:default; }

/* Only the root snapshot crossfades: no letter-by-letter or coordinate transitions. */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration:360ms; animation-timing-function:ease-in-out; mix-blend-mode:normal;
}
.language-changing *, .language-changing *::before, .language-changing *::after {
  transition:none !important;
  animation-play-state:paused !important;
}
html:lang(en) .about-center-second { top:205px; }
html:lang(en) .main-challenge { width:960px; }
html:lang(en) .process-description p { white-space:normal; }
html:lang(en) .experiment-details { width:640px; }
.question-text { width:1180px; }
.conclusion-text { width:1160px; }
html:lang(en) .highlight-image { display:none; }
html:lang(en) .conclusion-text .highlight-semibold { position:relative; }
html:lang(en) .conclusion-text .highlight-semibold::before {
  content:''; position:absolute; inset:-6px -10px;
  background:url('../attached_assets/highlight.png') center/100% 100% no-repeat; pointer-events:none;
}
.painpoint-group { position:absolute; top:2458px; z-index:2; height:530px; }
.painpoint-group-1 { left:318px; width:424px; }
.painpoint-group-2 { left:749.5px; width:421px; }
.painpoint-group-3 { left:1181px; width:421px; }
.painpoint-group > img { position:static; width:100%; transform:none; display:block; }
.painpoint-group > img:hover { transform:none; }
.painpoint-group:hover { filter:drop-shadow(0 0 12px #ffffff55); }
.painpoint-copy { position:absolute; inset:8px 17px auto; display:flex; flex-direction:column; gap:4px; z-index:3; }
.painpoint-copy > p { position:static; width:100%; transform:none; margin:0; }
.painpoint-copy > p:first-child { text-align:center; font-size:28px; line-height:1.3; white-space:nowrap; }
.painpoint-copy > p:last-child { line-height:1.4; }
html:lang(en) .painpoint-copy > p:last-child { font-size:16px; }
.painpoint-group .site1-label { left:43px; top:460px; }
.painpoint-group .site2-label { left:260px; top:460px; }
.painpoint-group .drug-percentage-text { left:50%; top:305px; width:100%; }
.painpoint-group .legend-item { left:78px; font-size:22px; }
.painpoint-group .legend-top { top:385px; }
.painpoint-group .legend-middle { top:433px; }
.painpoint-group .legend-bottom { top:482px; }
.challenge-summary-group { position:absolute; left:560px; top:3216px; width:800px; display:grid; gap:22px; }
.challenge-summary-group > * { position:static; width:100%; margin:0; transform:none; }
.challenge-summary-group .solution-methods-text { padding-left:30px; }
.challenge-summary-group .solution-methods-text li { margin-bottom:10px; }
.challenge-summary-group .solution-methods-text li:last-child { margin-bottom:0; }
.comparison-intro-group, .platform-copy-group {
  position:absolute; left:360px; width:1200px; text-align:center;
  font-size:24px; line-height:1.5; color:#000; z-index:10;
}
.comparison-intro-group { top:1230px; }
.comparison-intro-group p + p { margin-top:10px; }
.platform-copy-group { top:3354px; }
.platform-copy-group p + p { margin-top:17px; }
.platform-copy-group .micron-semibold { font-weight:600; }
.feature-group { position:absolute; top:3508px; height:426px; z-index:10; }
.feature-group-1 { left:320px; width:468px; }
.feature-group-2 { left:684.5px; width:551px; }
.feature-group-3 { left:1133px; width:468px; }
.feature-group > .featurecard1, .feature-group > .featurecard2, .feature-group > .featurecard3 {
  position:absolute; left:0; top:0; width:100%; transform:none;
}
.feature-copy { position:absolute; top:12px; z-index:20; }
.feature-copy > div { position:static; transform:none; width:100%; }
.feature-copy > div:first-child { min-height:72px; }
.feature-copy > div + div { margin-top:23px; }
.feature-group-1 .feature-copy { left:15px; width:350px; }
.feature-group-1 .feature-copy > div:first-child { padding-left:20px; width:290px; text-align:left; }
.feature-group-2 .feature-copy { left:95.5px; width:360px; text-align:center; }
.feature-group-3 .feature-copy { right:26px; width:350px; text-align:right; }
.feature-group-3 .feature-copy > div:first-child { padding-right:64px; }
.feature-group .number-1-text { left:294px; top:-43px; }
.feature-group .number-2-text { left:445.5px; top:-43px; }
.feature-group .number-3-text { left:382px; top:-43px; }
.feature-group .featurecard2-mag { left:22.5px; top:213px; }
.feature-group .featurecard3-trans { left:0; top:0; }
html:lang(en) .feature-copy > div:first-child { font-size:28px; }
html:lang(en) .feature-copy > div + div { line-height:1.4; }
.microfeature-group { position:absolute; z-index:10; }
.microfeature-group-1 { left:599px; top:3002px; width:158px; }
.microfeature-group-2 { left:1165px; top:3002px; width:157px; }
.microfeature-group-3 { left:881px; top:3084px; width:158px; }
.microfeature-group > div { position:static; width:100%; transform:none; }
.microfeature-group > p { position:relative; left:auto; top:auto; height:auto; margin-top:10px; transform:none; }
.microfeature-group-1 > p { margin-left:19px; width:260px; text-align:left; }
.microfeature-group-2 > p { width:270px; margin-left:-56px; text-align:center; }
.microfeature-group-3 > p { width:280px; margin-left:-61px; text-align:center; }
html:lang(en) .nature-solution-text { width:800px; }
html:lang(en) .technology-description-text,
html:lang(en) .optimization-description-text,
html:lang(en) .problem-description-text { height:auto; }
.video-description ul, .experiment-disclaimer ul { list-style:none; margin:0; padding:0; }
.video-description li, .experiment-disclaimer li { position:relative; padding-left:12px; }
.video-description li::before, .experiment-disclaimer li::before { content:'·'; position:absolute; left:0; }
html:lang(en) .video-description, html:lang(en) .experiment-disclaimer { width:960px; left:480px; }
html:lang(en) .video-description { top:2085px; }
html:lang(en) .experiment-title { width:1000px; }
html:lang(en) .contact-info { width:445px; }
html:lang(en) .contact-info .info-text { font-size:16px; }
html:lang(en) .checkbox-section label { font-size:13px; }
.modal-overlay { width:calc(100vw / var(--pc-scale,1)); height:calc(100vh / var(--pc-scale,1)); }
.modal-canvas {
  position:relative; top:auto; left:auto; transform:none;
  height:auto; max-height:calc(94vh / var(--pc-scale,1)); overflow:auto;
  padding:64px 30px 28px;
}
.modal-drug-chart { position:static; transform:none; display:block; margin:0 auto; max-width:100%; }
.modal-chart-title { position:static; transform:none; white-space:normal; width:100%; margin:16px 0 22px; }
.modal-description { position:static; transform:none; width:100%; }
@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}

/* Let translated privacy text determine its height, within the contact column. */
.privacy-section { width:516px; }
.privacy-policy { height:auto; min-height:128px; flex-shrink:0; }
.submit-section { width:161px; flex-shrink:0; }
.checkbox-section { width:161px; align-items:flex-start; }
.privacy-checkbox { flex-shrink:0; margin-top:3px; }
.checkbox-section label { line-height:1.4; }
html:lang(en) .product-features { width:294px; }

.language-loading body { visibility:hidden; }
.privacy-policy p, .privacy-policy li { font-size:13px; line-height:1.4; }
.contact { height:700px; }
.shop-popup a { display:block; position:relative; transition:transform .3s ease; }
.shop-popup a:hover { transform:scale(1.02); }
.shop-popup-image:hover { transform:none; }

/* Ordering note stays below the copy without moving the store/demo links. */
.products-order-copy { position:relative; }
.products-order-note {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:max-content; margin:0; white-space:nowrap; text-align:center;
  font:400 16px/1.5 'Pretendard',sans-serif; color:#646b73;
}
.products-order-note a { color:inherit; text-decoration:none; font-weight:500; white-space:nowrap; }
.products-order-note a:hover { color:#075eb1; }
.products-order-note a:focus-visible { outline:2px solid #1494ff; outline-offset:3px; }


/* Wider contact columns keep bilingual privacy copy compact and aligned. */
#contact { height:640px; }
#contact .contact-title { left:400px; }
#contact .contact-line { width:1120px; }
#contact .contact-image { left:auto; right:400px; }
#contact .contact-info { left:408px; width:660px; }
#contact .contact-form { left:408px; width:300px; }
#contact .form-input { width:300px; }
#contact .message-field { left:736px; }
#contact .message-input { width:784px; }
#contact .privacy-section { left:736px; width:784px; gap:20px; }
#contact .privacy-policy { width:540px; min-height:152px; }
#contact .submit-section, #contact .checkbox-section { width:224px; }
#contact .submit-button { width:224px; }


/* Text widths follow their image groups; preserve the existing alignment. */
html:lang(en) .solution-description-text { width:660px; }
html:lang(en) .hero-subtitle { width:720px; }
#about .about-section-title { left:487px; }
#about .about-center, #about .about-center-second {
  left:487px; width:1050px; transform:translateY(30px);
}
#about .about-center.animate-in, #about .about-center-second.animate-in {
  transform:translateY(0);
}
.comparison-trademark { font-size:inherit; vertical-align:baseline; letter-spacing:0; margin-left:1px; }
html:lang(en) #shopPopup { display:none !important; }

/* Keep each caption centered on its own circular image. */
html:lang(en) .microfeature-group > p {
  left:50%; width:max-content; margin-left:0; transform:translateX(-50%);
  text-align:center; line-height:1.4;
}

.comparison-caption { position:absolute; top:100%; left:50%; transform:translateX(-50%); width:720px; margin:20px 0 0; font:400 22px/1.5 'Pretendard',sans-serif; text-align:center; color:#333; }
.below-comparison-caption { translate:0 100px; }

.comparison-speed-actions { display:flex; gap:6px; }
.comparison-speed-actions button { font:500 14px/1.3 'Pretendard',sans-serif; color:#333; }
.comparison-speed-actions button:disabled { opacity:.4; cursor:default; }

html:lang(en) .video-description { left:600px; width:860px; }

/* Final-frame cavity observations, aligned to the 720px comparison artboard. */
.comparison-findings { position:absolute; inset:0; pointer-events:none; z-index:6; visibility:hidden; opacity:0; transition:opacity .2s ease; }
.comparison-findings.is-revealed { visibility:visible; opacity:1; }
.cavity-panel { position:absolute; top:98px; width:330px; text-align:left; display:grid; grid-template-rows:126px repeat(3,160px); align-items:start; }
.cavity-panel-before { left:-360px; }
.cavity-panel-after { right:-360px; }
.cavity-panel header { min-height:126px; opacity:0; transform:translateY(-10px); transition:opacity .4s ease,transform .5s ease; }
.comparison-findings.is-revealed .cavity-panel header { opacity:1; transform:translateY(0); }
.cavity-panel h3 { margin:0; white-space:nowrap; font:700 29px/1.3 'Pretendard',sans-serif; color:#12171b; }
.cavity-panel-before header { text-align:right; }
.cavity-panel header p { margin:7px 0 0; font:400 19px/1.35 'Pretendard',sans-serif; color:#888; }
.cavity-brand-x { color:#009cdc; }
.cavity-tm { font-size:15px; vertical-align:super; }
.cavity-note { position:relative; display:block; box-sizing:border-box; width:100%; min-height:0; margin:0; padding:0 0 0 18px; border:0; border-radius:0; background:transparent; text-align:left; font-family:'Pretendard',sans-serif; cursor:pointer; pointer-events:auto; }
.cavity-note::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:#aaa; transform-origin:left center; transition:transform .35s ease,background .35s ease; }
.cavity-panel-after .cavity-note::before { background:#079bff; }
.cavity-panel-before .cavity-note { padding:0 18px 0 0; text-align:right; }
.cavity-panel-before .cavity-note::before { left:auto; right:0; transform-origin:right center; }
.cavity-note.is-active::before { transform:scaleX(2); background:#6d7880; }
.cavity-panel-after .cavity-note.is-active::before { background:#0076ff; }
.cavity-note strong { display:block; margin:0 0 10px; font-size:23px; line-height:1.25; font-weight:650; color:#13171b; }
.cavity-note > span { display:block; font-size:15px; line-height:1.3; color:#858585; }
.cavity-note:focus-visible { outline:2px solid #158cdf; outline-offset:6px; border-radius:3px; }
.cavity-layer { position:absolute; inset:0; z-index:4; pointer-events:none; }
.cavity-map { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.cavity-outline { fill:none; stroke:#168fff; stroke-width:1.25; opacity:0; transform-box:fill-box; transform-origin:center; }
.cavity-ripple { fill:none; stroke:#168fff; stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:center; }
.cavities-playing .cavity-map { visibility:hidden; }
.cavity-sidewall { fill:none; stroke:#219dff; stroke-width:26; opacity:0; }
.cavity-video-label { position:absolute; top:20px; padding:14px 25px; border-radius:32px; background:rgba(38,43,47,.8); color:white; font:650 19px/1 'Pretendard',sans-serif; white-space:nowrap; }
.cavity-layer-before .cavity-video-label { left:30px; }
.cavity-layer-after .cavity-video-label { right:30px; background:#007fff; }
@media(prefers-reduced-motion:reduce) { .comparison-findings,.cavity-note::before { transition:none; } }




/* Secondary copy and hover focus. */
html:lang(en) .comparison-intro-group .group-intro .smart-mold-semibold:first-of-type { color:#007fff; }
.comparison-intro-group .group-followup { color:#858b90; }
.comparison-caption { color:#737c84; }
.cavity-outline,.cavity-sidewall { transition:none; }
.cavity-note strong,.cavity-note > span { transition:color .25s ease; }
.comparison-findings.is-inspecting .cavity-note:not(.is-active) strong { color:#939a9f; }
.comparison-findings.is-inspecting .cavity-note:not(.is-active) > span { color:#a2a8ad; }
.comparison-findings.is-inspecting .cavity-note:not(.is-active)::before { background:#c4c9cd; }
@media(prefers-reduced-motion:reduce) { .cavity-outline,.cavity-sidewall,.cavity-note strong,.cavity-note > span { transition:none; } }




.cavity-neighborhood { fill:#168fff; fill-opacity:.035; stroke:#168fff; stroke-width:1.25; opacity:0; }
.cavity-legend { position:absolute; right:18px; bottom:18px; z-index:11; display:grid; gap:7px; padding:10px 12px; border:1px solid #ffffff80; border-radius:0; background:rgba(255,255,255,.87); box-shadow:0 2px 10px #26364212; pointer-events:none; color:#53626e; font:500 12px/1.2 'Pretendard',sans-serif; }
.cavity-legend > span { display:flex; align-items:center; gap:8px; }
.cavity-legend i { display:block; width:18px; height:18px; box-sizing:border-box; border-radius:50%; }
.legend-needle { border:1.5px solid #168fff; }
.legend-sidewall { border:5px solid rgba(33,157,255,.3); }




/* Reveal each pair with its effect; no previous-stage marks remain on the video. */
.cavity-note { visibility:hidden; opacity:0; transform:translateY(-10px); transition:opacity .4s ease,transform .5s ease; }
.cavity-note.is-shown { visibility:visible; opacity:1; transform:translateY(0); }
.cavity-legend { visibility:hidden; opacity:0; transition:opacity .3s ease; }
.cavity-legend.is-visible { visibility:visible; opacity:1; }
.cavity-sidewall-sweep { fill:none; stroke:#168fff; stroke-width:26; stroke-linecap:round; stroke-dasharray:12 88; opacity:0; }
.cavity-layer-after .cavity-sidewall,
.cavity-layer-after .cavity-sidewall-sweep { stroke-width:4; }
@media(prefers-reduced-motion:reduce) { .cavity-note,.cavity-legend,.cavity-panel header { transition:none; } }



/* Reveal the mold illustration as its area enters the viewport. */
.conventional-description.fadeup-element,
.unicaptix-description.fadeup-element,
.moldrendering-image.fadeup-element,
.rosepetal-image.fadeup-element {
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(.22, 1, .36, 1);
    transition-delay: 0s;
}

/* Keep Korean comparison copy intact at word boundaries. */
html[lang="ko"] .cavity-note > span {
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1.5;
}

/* Give the Korean comparison explanations room for two complete lines. */
html[lang="ko"] .cavity-panel-after { width:370px; right:-400px; }

/* Accommodate the updated English comparison copy without shrinking type. */
html[lang="en"] .cavity-panel { width:370px; }
html[lang="en"] .cavity-panel-before { left:-400px; }
html[lang="en"] .cavity-panel-after { right:-400px; }

/* Original product header layout, with a 10% smaller store entry. */
.products-header-content { justify-content:center; }
.products-store { position:absolute; top:0; right:0; width:405px; z-index:11; color:#333; text-decoration:none; transition:transform .25s ease,color .25s ease; }
.products-store-canopy { display:block; }
.products-store-awning { display:block; width:405px; height:auto; }
.products-store-copy { padding:5px 18px 0 7px; }
.products-store-name { margin:0; font-size:32.4px; font-weight:400; line-height:1.1; letter-spacing:-.9px; }
.products-store-name strong { font-weight:700; }
.products-store-link { display:inline-flex; gap:7px; align-items:center; margin-top:8px; color:#68727a; font-size:14.4px; text-decoration:none; }
.products-store:hover { transform:translateY(-2px); color:#111; }
.products-store:focus-visible { outline:2px solid #007fff; outline-offset:-3px; }
.products-order-note a span { margin-left:3px; }
@media (prefers-reduced-motion:reduce) {
    .products-store { transition:none; }
    .products-store:hover { transform:none; }
}

/* Keep the English challenge introduction to two readable lines. */
html:lang(en) .challenge-description { width:1060px; }

.challenge-description { transition-property:opacity,transform; }

/* Fill the first viewport without changing the 1920px artboard width. */
.hero { height:calc(100vh / var(--pc-scale,1)); height:calc(100dvh / var(--pc-scale,1)); }
.hero-background { height:calc(100% + 60px); }

.seo-language-link { display:block; padding:12px 24px; text-align:center; font-size:13px; color:#929ca6; background:#111; }

.hero-seo-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }