/* Language control is additive; original navigation and page order are retained. */
.language-switcher { position:relative; flex:none; color:#18211d; }
.language-switcher summary { display:flex; align-items:center; gap:6px; min-height:44px; padding:6px 8px; cursor:pointer; list-style:none; font:500 13px/1.25 system-ui,sans-serif; }
.language-switcher summary::-webkit-details-marker { display:none; }
.language-switcher summary::after { content:'⌄'; }
.language-switcher nav { position:absolute; top:calc(100% + 10px); right:0; min-width:154px; padding:8px; background:#fff; border:1px solid #d8dbd7; border-radius:4px; box-shadow:0 12px 30px #10201924; display:grid; gap:2px; }
.language-switcher a { font:500 14px/1.4 system-ui,sans-serif; padding:11px 12px; border-radius:2px; }
.language-switcher a:hover,.language-switcher a[aria-current] { background:#f1f2ef; }
.language-switcher a[aria-current] { box-shadow:inset 3px 0 var(--red); }
html:not([lang="ko"]) { --locale-font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; --reading:var(--locale-font); --dot:var(--locale-font); }
html[lang="zh-Hans"] { --locale-font:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',system-ui,sans-serif; }
html[lang="ja"] { --locale-font:'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans CJK JP',system-ui,sans-serif; }
html:not([lang="ko"]) body,html:not([lang="ko"]) button,html:not([lang="ko"]) input,html:not([lang="ko"]) textarea { font-family:var(--locale-font); }
html:not([lang="ko"]) h1,html:not([lang="ko"]) h2,html:not([lang="ko"]) h3,html:not([lang="ko"]) h4,
html:not([lang="ko"]) p,html:not([lang="ko"]) .chapter-number,html:not([lang="ko"]) .p-breadcrumb,
html:not([lang="ko"]) .mega-tabs button,html:not([lang="ko"]) .main-price>span,html:not([lang="ko"]) .main-price small {
  font-family:var(--locale-font); word-break:normal; overflow-wrap:anywhere;
}
html:not([lang="ko"]) .home-page .headline h1,html:not([lang="ko"]) .home-page .headline h2,html:not([lang="ko"]) .home-page .subscription-copy h2 { font-family:var(--locale-font); letter-spacing:-.035em; -webkit-text-stroke:0; word-break:normal; overflow-wrap:anywhere; }
html:not([lang="ko"]) .subscription-brand { min-width:0; max-width:100%; }
html:not([lang="ko"]) .subscription-brand>span { min-width:0; overflow-wrap:anywhere; }
html:not([lang="ko"]) .usage-clarity>* { min-width:0; }
html:not([lang="ko"]) .usage-clarity strong,html:not([lang="ko"]) .usage-process strong { word-break:normal; overflow-wrap:anywhere; }
html:not([lang="ko"]) .cast2-setup-preview { grid-template-columns:minmax(0,1fr); }
html:not([lang="ko"]) .cast2-setup-screen { min-width:0; max-width:100%; }
html:not([lang="ko"]) .cast2-setup-platform strong { overflow-wrap:anywhere; }
html:not([lang="ko"]) .future-main-words { white-space:normal; }
html:not([lang="ko"]) .product-info span,html:not([lang="ko"]) .footer-statement { word-break:normal; overflow-wrap:anywhere; }
html:not([lang="ko"]) .module-choice-list { width:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
html:not([lang="ko"]) .module-choice-list>span { white-space:normal; overflow-wrap:anywhere; }
html:not([lang="ko"]) .home-page #subscribe-card .module-middle { grid-template-columns:minmax(0,1fr) minmax(120px,192px); }
html:not([lang="ko"]) .main-price { flex-wrap:wrap; white-space:normal; gap:5px; }
html:not([lang="ko"]) .header-nav { gap:clamp(8px,1.5vw,24px); }
@media(max-width:1100px) {
  .floating-header .header-nav { display:none; }
}
@media(max-width:700px) {
  .floating-header { padding-inline:10px; gap:6px; }
  .floating-header .brand { min-width:0; flex:1; }
  .floating-header .brand img { width:min(100%,164px); }
  .floating-header .menu-button { flex:0 0 30px; }
  .floating-header .header-shop { font-size:12px; gap:3px; }
  .language-switcher summary { font-size:11px; padding-inline:4px; }
  .language-switcher nav { right:0; }
  html:not([lang="ko"]) .home-page #subscribe-card .module-middle { grid-template-columns:minmax(0,1fr); }
  html:not([lang="ko"]) .home-page .bottom-module .module-copy { font-size:20px!important; }
}
@media(max-width:390px) {
  .floating-header { width:calc(100% - 20px); }
  .floating-header .brand img { max-width:122px; }
  .floating-header .header-shop span { display:none; }
}
/* iPhone: retain automatic safe-area insets and user zoom. See docs/iphone-v10.md. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.language-switcher nav {
  max-height:calc(100vh - 116px);
  max-height:calc(100dvh - 116px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mega-menu[open] {
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
}
.email-inquiry {
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mega-menu .mega-panels { -webkit-overflow-scrolling:touch; }
/* Reserve the cropped logo's height without relying on a flex item's aspect ratio. */
.usage-app-mark { aspect-ratio:auto; }
.usage-app-mark::before { content:''; display:block; padding-top:var(--logo-padding); }
/* Each native video uses its measured source dimensions, including non-16:9 clips. */
.usage-video { height:auto; }
@media(max-width:820px) {
  .mega-menu[open] { max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); }
}
@media(max-width:700px) {
  .floating-header .menu-button { flex:0 0 44px; width:44px; height:44px; padding:7px; }
}
/* Keep close/tabs outside the scrollable list, including short landscape screens. */
@media(max-height:500px) {
  .mega-menu { padding:12px; }
  .mega-menu .menu-top { margin-bottom:8px; }
  .mega-menu .mega-tabs { gap:4px; padding-bottom:8px; }
  .mega-menu .mega-tabs button { min-height:44px; padding:8px 4px; font-size:14px; }
  .mega-menu .mega-bottom { margin-top:8px; padding-top:8px; }
}
/* One opaque header stack; product and subscription menus share the same rules. */
:root{--site-header-height:80px;--section-nav-height:64px}
body:not(.home-page) .floating-header{top:0;left:0;transform:none;width:100%;height:var(--site-header-height);padding-inline:clamp(16px,4vw,64px);border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;box-shadow:none}
body:not(.home-page) .p-section-nav{top:var(--site-header-height);background:#f4f4f2;box-shadow:none;isolation:isolate}
.product-page section[id],.product-page [id^="use-"],.product-page #installation-position{scroll-margin-top:calc(var(--site-header-height) + var(--section-nav-height))}
.p-section-nav.p-section-nav--compact{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(12px,4vw,56px);padding:10px 24px;min-height:64px;overflow:visible;white-space:normal;line-height:1.35}
.p-section-nav--compact>a,.section-more>summary{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:16px;text-align:center;white-space:normal;overflow-wrap:anywhere}
.p-section-nav--compact>a{flex:0 1 auto}
.section-more{flex:none}
.section-more>summary{gap:8px;cursor:pointer;list-style:none}
.section-more>summary::-webkit-details-marker{display:none}
.section-more>summary::after{content:'⌄';font:18px/1 system-ui,sans-serif}
.section-more[open]>summary::after{transform:rotate(180deg)}
.section-more-links{position:absolute;right:clamp(16px,4vw,64px);top:100%;display:grid;gap:2px;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - var(--site-header-height) - var(--section-nav-height) - 16px);max-height:calc(100dvh - var(--site-header-height) - var(--section-nav-height) - 16px);overflow-y:auto;overscroll-behavior:contain;padding:10px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 24px #16201714}
.section-more-links>a{display:flex;align-items:center;min-height:44px;padding:12px 16px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;text-align:left}
.section-more-links>a:hover,.section-more-links>a:focus-visible{background:#eef0ea}
@media(max-width:820px){:root{--site-header-height:72px}.p-section-nav.p-section-nav--compact{gap:12px;padding:8px 16px}.p-section-nav--compact>a,.section-more>summary{font-size:14px}.p-section-nav--compact>a{flex:1 1 0;min-width:0}.section-more{flex:0 1 auto;max-width:25%}}
@media(max-width:390px){.p-section-nav.p-section-nav--compact{gap:8px;padding-inline:12px}.p-section-nav--compact>a,.section-more>summary{font-size:13px}.section-more>summary{gap:4px}}
/* v15: approved component design. Original content and product calibration are unchanged. */
html:root .home-page .bottom-module {
  height: auto;
  min-height: 0;
  padding: 28px;
  grid-template-rows: auto auto auto;
  gap: 20px;
  background: #f3f4f1;
  border-radius: 6px;
  outline: 1px solid rgba(23, 28, 24, .10);
  outline-offset: -1px;
  box-shadow: none;
}
html:root .home-page .bottom-module .module-middle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 18px;
  min-width: 0;
}
html:root .home-page .bottom-module .module-copy {
  margin: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  text-align: left;
}
html:root .home-page .bottom-module .module-art {
  order: 0;
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
}
html:root .home-page .bottom-module .module-platforms,
html:root .home-page .bottom-module .module-service-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 24px;
}
html:root .home-page .bottom-module .module-platforms > div,
html:root .home-page .bottom-module .module-service-list > span {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
html:root .home-page .bottom-module .module-category-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 24px;
}
html:root .home-page .bottom-module .module-category-list > span {
  padding: 0;
  border: 0;
  min-width: 0;
  max-width: 100%;
}
html:root .home-page .bottom-module .module-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  gap: 10px 20px;
}
html:root .home-page .bottom-module .module-choice-list > span {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}
html:root .home-page .bottom-module .module-convergence {
  width: 100%;
  align-items: flex-start;
}
html:root .home-page .bottom-module .module-convergence .ai-connection {
  margin-left: 28px;
}
html:root .home-page .bottom-module .discover {
  height: auto;
  min-height: 52px;
  padding: 13px 20px;
  border-radius: 4px;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}

/* Optical scale/offsets and aspect ratios remain those of the approved source. */
html:root :is(
  .product-stage:not(.product-stage--scene):not(.product-stage--natural):not(.product-stage--excerpt),
  .catalog-picture,
  .subscription-image,
  .product-image,
  .tigma-pair .tigma-media
) {
  background: #fff;
  outline: 1px solid #d8dad5;
  outline-offset: -1px;
  border-radius: 4px;
  box-shadow: none;
}

@media (min-width: 701px) {
  html:root .home-page #mate-card .module-middle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    align-items: center;
    gap: 20px;
  }
  html:root .home-page #mate-card .module-convergence {
    width: 140px;
    align-items: center;
  }
  html:root .home-page #mate-card .module-convergence .ai-connection {
    margin-left: 0;
  }
}
@media (max-width: 700px) {
  html:root .home-page .bottom-module {
    padding: 20px;
    gap: 16px;
    width: calc(100% - 32px);
  }
  html:root .home-page .bottom-module .module-middle { gap: 16px; }
  html:root .home-page .bottom-module .module-platforms,
  html:root .home-page .bottom-module .module-service-list { gap: 12px 20px; }
  html:root .home-page .bottom-module .module-category-list { gap: 10px 18px; }
  html:root .home-page .bottom-module .module-choice-list { gap: 10px 16px; }
}

/* Keep the approved white surface where pre-existing ID rules have priority. */
html:root :is(#cast, #subscription-products) .subscription-image,
html:root #tigma .tigma-pair .tigma-media {
  background: #fff;
}

/* Let long translated brand captions define their own row height. */
html:root .home-page .bottom-module .module-brand {
  height: auto;
  min-height: 32px;
}
html:root .home-page .bottom-module .module-brand .module-uplus-logo {
  flex: 0 0 44px;
}
html:root .home-page .bottom-module .module-brand-caption {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  html:root .home-page .bottom-module .module-brand { min-height: 28px; }
}
/* Original OTTOCAST identity and outline wordmarks for the existing product labels. */
html:root .home-page .bottom-module :is(.module-category-list,.module-choice-list)>span {
  display:flex;align-items:center;min-height:32px;min-width:0;
}
html:root .home-page .bottom-module .module-wordmark-image {
  display:block;width:auto;height:24px;max-width:100%;object-fit:contain;object-position:left center;
}
html:root .home-page .bottom-module .module-category-list { gap:14px 22px; }
html:root .home-page .bottom-module .module-category-list .module-wordmark-image { height:18px; }
html:root .home-page .bottom-module .module-wordmark-image--ottocast { width:130px;height:24px; }
html:root .home-page .bottom-module .module-wordmark-image--cast-allinone { height:21px; }
/* Keep product photography unchanged; make the data-bundle mark a quiet corner signature. */
html:root #subscription-products .subscription-image>.subscription-brand--corner {
  position:absolute;top:8px;right:8px;left:auto;bottom:auto;z-index:2;
  display:block;width:clamp(18px,9%,28px);height:auto;min-height:0;
  margin:0;padding:0;line-height:0;pointer-events:none;
}
html:root #subscription-products .subscription-brand--corner>.subscription-uplus {
  position:static;display:block;width:100%;height:auto;max-width:100%;max-height:none;
  aspect-ratio:auto;object-fit:contain;transform:none;filter:none;mix-blend-mode:normal;
}
html:root #subscription-products .subscription-status {
  display:block;margin:0 0 10px;font:400 14px/1.5 var(--reading);color:var(--muted);
  white-space:normal;word-break:keep-all;overflow-wrap:anywhere;
}
@media(max-width:700px) {
  html:root .home-page .bottom-module .module-wordmark-image { max-width:100%;height:22px; }
  html:root .home-page .bottom-module .module-category-list .module-wordmark-image { height:17px; }
  html:root .home-page .bottom-module .module-wordmark-image--cast-allinone { height:19px; }
}
@media(max-width:340px) {
  html:root #subscription-products .subscription-image>.subscription-brand--corner {
    width:16px;
    top:6px;
    right:6px;
  }
}