/* Internet signup choices: match the phone's muted tray / white
   selected capsule / bright-orange type. Visual-only, C02 scope.
   Leave all IDs, button states, pricing and business/home data untouched. */
body.experience-ui[data-page="internet"] [data-ui-name="C02"] :is(
  .internet-customer-choices,
  #providerOptions,
  #bundleOptions,
  #speedOptions,
  #tvOptions
) {
  box-sizing: border-box;
  padding: 6px !important;
  gap: 6px !important;
  border: 1px solid transparent !important;
  border-radius: 17px !important;
  background: #f3f5f7 !important;
  box-shadow: inset 0 1px 2px rgba(30,41,55,.035) !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-choices {
  align-items: stretch;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle {
  position: relative;
  min-width: 0;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #384555 !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle input[type="radio"] {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle:has(input:checked) {
  border-color: transparent !important;
  background: #fff !important;
  color: #f06b24 !important;
  box-shadow: 0 2px 7px rgba(29,29,31,.09) !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle:has(input:checked) .toggle-copy b {
  color: #f06b24 !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle .toggle-copy small {
  color: #66717d !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-customer-toggle:has(input:focus-visible) {
  outline: 2px solid #9ba8b7 !important;
  outline-offset: 1px;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions > .provider-option,
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #bundleOptions > .choice-pill,
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions > .speed-option,
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions > .tv-option {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3d4958 !important;
  text-shadow: none !important;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions > .provider-option:is(.is-selected,[aria-pressed="true"]),
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #bundleOptions > .choice-pill:is(.is-selected,[aria-pressed="true"]),
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions > .speed-option:is(.is-selected,[aria-pressed="true"]),
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions > .tv-option:is(.is-selected,[aria-pressed="true"]) {
  border-color: transparent !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(29,29,31,.09) !important;
  color: #f06b24 !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions > .provider-option:is(.is-selected,[aria-pressed="true"]) b,
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #speedOptions > .speed-option:is(.is-selected,[aria-pressed="true"]) > b,
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions > .tv-option:is(.is-selected,[aria-pressed="true"]) b {
  color: #f06b24 !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] :is(#providerOptions,#speedOptions,#tvOptions) :is(.provider-option,.speed-option,.tv-option):is(:hover,:active) {
  border-color: transparent !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] :is(#providerOptions,#bundleOptions,#speedOptions,#tvOptions) > :is(button):focus:not(:focus-visible) {
  outline: none !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] :is(#providerOptions,#bundleOptions,#speedOptions,#tvOptions) > button:focus-visible {
  outline: 2px solid #9ba8b7 !important;
  outline-offset: 1px;
}
/* Wi-Fi and mobile bundle remain independent checkboxes. The checked tile
   sits white against a quiet gray surface, without an orange frame. */
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-fieldset > .internet-toggle:not(.internet-customer-toggle) {
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: #f3f5f7 !important;
  box-shadow: none !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-fieldset > .internet-toggle:not(.internet-customer-toggle):has(input:checked) {
  border-color: transparent !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(29,29,31,.07) !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-fieldset > .internet-toggle:not(.internet-customer-toggle):has(input:focus-visible) {
  outline: 2px solid #9ba8b7 !important;
  outline-offset: 1px;
}
@media (max-width:650px) {
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] :is(
    .internet-customer-choices,#providerOptions,#bundleOptions,#speedOptions,#tvOptions
  ) {
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 15px !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] :is(#providerOptions,#bundleOptions,#speedOptions,#tvOptions) > button {
    transition: none !important;
  }
}


/* Step 02: one compact capsule row; all underlying button/checkbox IDs stay intact. */
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline {
  box-sizing:border-box; grid-column:1/-1; display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr) minmax(0,1fr);
  align-items:stretch; gap:6px; width:100%; min-width:0; margin:0;
  padding:6px; border-radius:17px; background:#f3f5f7;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline #bundleOptions.combo-row {
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  width:100% !important; max-width:none !important; min-width:0; min-height:46px;
  margin:0 !important; padding:0 !important; gap:5px !important;
  border:0 !important; border-radius:12px !important;
  background:transparent !important; box-shadow:none !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline #bundleOptions .choice-pill {
  min-height:46px !important; padding:7px 3px !important;
  font-size:12px !important; line-height:1.2; white-space:nowrap;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice {
  box-sizing:border-box; display:flex !important; align-items:center !important;
  justify-content:center; align-self:stretch !important;
  gap:5px !important; min-width:0; min-height:46px !important;
  margin:0 !important; padding:7px 5px !important;
  border:1px solid transparent !important; border-radius:12px !important;
  background:#f5f6f8 !important; box-shadow:none !important; cursor:pointer;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice:has(input:checked) {
  background:#fff !important; box-shadow:0 2px 7px rgba(29,29,31,.09) !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice input[type="checkbox"] {
  box-sizing:border-box; -webkit-appearance:none !important; appearance:none !important;
  display:grid !important; place-items:center;
  flex:0 0 15px !important; width:15px !important; height:15px !important;
  margin:0 !important; padding:0 !important;
  border:1.5px solid #cdd5dd !important; border-radius:50% !important;
  background:#fff !important; box-shadow:none !important; cursor:pointer;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice input[type="checkbox"]:checked {
  border-color:transparent !important; background:transparent !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice input[type="checkbox"]:checked::after {
  content:"✓"; display:block; color:#f06b24; font-size:17px;
  font-weight:900; line-height:1; text-align:center;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice input[type="checkbox"]:disabled {
  cursor:default;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice .toggle-copy {display:block; min-width:0}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice .toggle-copy b {
  color:#3d4958; font-size:12px !important; font-weight:750;
  line-height:1.2; white-space:nowrap; letter-spacing:-.04em;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice:has(input:checked) .toggle-copy b {color:#f06b24}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice .toggle-copy small {
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; margin:-1px !important; padding:0 !important;
  clip-path:inset(50%); white-space:nowrap;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice:has(input:focus-visible) {
  outline:2px solid #9ba8b7 !important; outline-offset:1px;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice:has(input:disabled) {cursor:default}
@media(max-width:650px) {
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline {
    grid-template-columns:minmax(0,1.65fr) minmax(0,.9fr) minmax(0,1.05fr); gap:5px; padding:5px;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline #bundleOptions .choice-pill {
    padding:6px 1px !important; font-size:11px !important; letter-spacing:-.04em;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice {gap:3px !important; padding:5px 2px !important}
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice input {
    flex-basis:14px !important; width:14px !important; height:14px !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice .toggle-copy b {font-size:clamp(10px, 2.9vw, 11.5px) !important}
}
@media(max-width:360px) {
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline {
    grid-template-columns:minmax(0,1.9fr) minmax(0,.85fr) minmax(0,1fr); gap:2px; padding:3px;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline #bundleOptions .choice-pill {font-size:10px !important}
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice .toggle-copy b {font-size:10px !important}
}

/* Keep all four controls visible at 320–360px without shrinking tap targets. */
@media(max-width:360px) {
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline > .internet-inline-choice .toggle-copy b {
    font-size:0 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline #routerOption + .toggle-copy b::after {
    content:"Wi-Fi"; font-size:10px;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-bundle-inline #mobileBundleOption + .toggle-copy b::after {
    content:"결합"; font-size:10px;
  }
}

/* Prevent legacy pre-configuration content from flashing before hydration.
   Header stays visible; the section footprint stays reserved. */
html.internet-booting body[data-page="internet"] .internet-main {
  position:relative;
}
html.internet-booting body[data-page="internet"] .internet-main > * {
  visibility:hidden !important;
}
html.internet-booting body[data-page="internet"] .internet-main::before {
  content:"인터넷·TV 가입 조건을 준비하고 있습니다";
  position:absolute; z-index:1; top:28px; left:clamp(20px,4vw,48px);
  color:#657080; font-size:14px; font-weight:600; letter-spacing:-.02em;
}

/* Step 04: give TV product names the same readable hierarchy as speed choices.
   Keep price, descriptive text, and capsule dimensions unchanged. */
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #tvOptions > .tv-option b {
  font-size:clamp(13px,1.2vw,16px) !important;
  font-weight:800 !important;
  line-height:1.25;
  letter-spacing:-.035em;
}