/* 2026-10-23: unified rounded-rectangle selectors and desktop composition.
   Visual / document-order changes only; retain control IDs, data attributes and JS. */

/* Phone: all seven signup steps live in the configuration panel. The new
   layout keeps the device preview and cost receipt separate on desktop. */
@media (min-width: 1100px) {
  body.experience-ui[data-page="device"] .detail-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "configure product" "configure estimate" !important;
    gap: 16px !important;
    align-items: start !important;
  }
  body.experience-ui[data-page="device"] .detail-product { grid-area: product !important; }
  body.experience-ui[data-page="device"] .config-panel { grid-area: configure !important; }
  body.experience-ui[data-page="device"] .order-summary[data-ui-name="P01"] {
    grid-area: estimate !important;
    align-self: start !important;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  body.experience-ui[data-page="device"] .detail-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "product" "configure" "estimate" !important;
  }
}

/* Phone C04: match the softly rounded rectangular Speed choices, but keep
   each control's existing dimensions and number of options. */
body.experience-ui[data-page="device"] .config-panel :is(
  #requestCarrierOptions, #targetCarrierOptions, #storageOptions,
  [data-ui-name="C04-1"] .choice-row.two-choice,
  [data-ui-name="C04-3"] .choice-row.two-choice
) {
  box-sizing: border-box !important;
  border: 1px solid #e3e7ed !important;
  border-radius: 17px !important;
  background: #f3f5f7 !important;
  padding: 5px !important;
  gap: 5px !important;
  box-shadow: inset 0 1px 2px rgba(30, 41, 55, .025) !important;
}
body.experience-ui[data-page="device"] .config-panel :is(
  #requestCarrierOptions, #targetCarrierOptions
) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 440px !important;
}
body.experience-ui[data-page="device"] .config-panel :is(
  #requestCarrierOptions, #targetCarrierOptions, #storageOptions,
  [data-ui-name="C04-1"] .choice-row.two-choice,
  [data-ui-name="C04-3"] .choice-row.two-choice
) > .choice-button {
  box-sizing: border-box !important;
  min-width: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #445163 !important;
  box-shadow: none !important;
  transform: none !important;
}
body.experience-ui[data-page="device"] .config-panel :is(
  #requestCarrierOptions, #targetCarrierOptions, #storageOptions,
  [data-ui-name="C04-1"] .choice-row.two-choice,
  [data-ui-name="C04-3"] .choice-row.two-choice
) > .choice-button:is(.is-selected, [aria-pressed="true"]) {
  border-color: transparent !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #f06b24 !important;
  box-shadow: 0 2px 7px rgba(29, 29, 31, .09) !important;
}
/* The existing 44–46px tap targets and two/three-way splits are preserved. */

/* Internet C02: the two highlighted fields share the same card language as
   speed/TV, while their own heights and label density remain compact. */
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px !important;
  border: 1px solid #e3e7ed !important;
  border-radius: 18px !important;
  background: #f3f5f7 !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions .provider-option {
  min-width: 0 !important;
  min-height: 62px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions .provider-option:is(.is-selected, [aria-pressed="true"]) {
  border-color: transparent !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(29, 29, 31, .09) !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #bundleOptions.combo-row {
  border-radius: 17px !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #bundleOptions .choice-pill,
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #bundleOptions .choice-pill:is(.is-selected, [aria-pressed="true"]) {
  border-radius: 12px !important;
}
body.experience-ui[data-page="internet"] [data-ui-name="C02"] #bundleOptions .choice-pill:is(.is-selected, [aria-pressed="true"]) {
  border-color: transparent !important;
}

/* PC Internet option 2: an intentionally horizontal form with the cost
   receipt below it. No filler panels or repeated marketing copy. */
@media (min-width: 1100px) {
  /* Public configuration currently exposes five carriers; display them in
     one balanced row. The eight-carrier fallback remains four by two. */
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions:has(> .provider-option:nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  body.experience-ui[data-page="internet"] .internet-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"].internet-config {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: start !important;
  }
  body.experience-ui[data-page="internet"] .internet-config-topline,
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] > .internet-fieldset:nth-of-type(1),
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] > .internet-fieldset:nth-of-type(2) {
    grid-column: 1 / -1 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] > .internet-fieldset:nth-of-type(3) {
    grid-column: 1 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] > .internet-fieldset:nth-of-type(4) {
    grid-column: 2 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] > .internet-fieldset:nth-of-type(2) {
    display: grid !important;
    grid-template-columns: minmax(260px, 440px) repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 10px !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #bundleOptions {
    grid-column: 1 !important;
    margin: 0 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #routerOption { align-self: center; }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] .internet-toggle {
    margin-top: 0 !important;
    min-width: 0;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #mobileBundleFields {
    grid-column: 1 / -1 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"].internet-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px 22px !important;
    align-items: start !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .estimate-overview {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .internet-cost-split {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .installment-note {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .internet-estimate-details {
    grid-column: 2 !important;
    grid-row: 3 / span 2 !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .summary-action {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: 460px;
    width: 100%;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C03"] > .summary-status {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  body.experience-ui[data-page="internet"] .internet-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 390px) {
  body.experience-ui[data-page="internet"] [data-ui-name="C02"] #providerOptions .provider-option {
    padding: 8px 6px !important;
    gap: 5px !important;
  }
}

/* 2026-10-23: phone variant pair, expandable receipt, and up-to-three add-ons. */
body.experience-ui[data-page="device"] .config-panel .device-variant-card .device-variant-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
body.experience-ui[data-page="device"] .config-panel .device-variant-half {
  min-width: 0;
  margin: 0;
}
body.experience-ui[data-page="device"] .config-panel .device-variant-half legend {
  margin-bottom: 8px;
}
body.experience-ui[data-page="device"] .config-panel .device-variant-half #storageOptions {
  display: flex !important;
  flex-wrap: wrap;
  max-width: none !important;
  width: 100%;
}
body.experience-ui[data-page="device"] .config-panel .device-variant-half #storageOptions > .choice-button {
  flex: 1 1 72px;
}
body.experience-ui[data-page="device"] .config-panel .device-variant-half #colorOptions {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}
body.experience-ui[data-page="device"] .service-addon-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
body.experience-ui[data-page="device"] .service-addon-list .extra-option {
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}
body.experience-ui[data-page="device"] .service-addon-list .extra-option small {
  overflow-wrap: anywhere;
}
body.experience-ui[data-page="device"] .order-summary .condition-note {
  margin-top: 14px;
  text-align: left;
}
body.experience-ui[data-page="device"] .order-summary .condition-note a,
body.experience-ui[data-page="device"] .notice-faq-link {
  display: inline-flex;
  margin-top: 8px;
  color: #f06b24;
  font-weight: 700;
  font-size: .87rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 560px) {
  body.experience-ui[data-page="device"] .config-panel .device-variant-card .device-variant-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}


/* Only the '상담부터 차근차근 진행해요' timeline: no mouse-hover lift.
   Do not affect buttons, price cards or hover interactions elsewhere. */
@media (hover: hover) and (pointer: fine) {
  body.experience-ui[data-page="device"] #activation-method .activation-step:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
}

/* 2026-10-23: Phone carrier capsule is the visual reference for color and
   addon selection; keep responsive tap targets and the calculator compact. */
body.experience-ui[data-page="device"] .config-panel .device-variant-half #colorOptions {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-height: 54px;
  padding: 8px 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  column-gap: 9px !important;
  row-gap: 8px !important;
  border: 1px solid #e3e7ed !important;
  border-radius: 17px !important;
  background: #f3f5f7 !important;
  box-shadow: inset 0 1px 2px rgba(30,41,55,.025) !important;
}
body.experience-ui[data-page="device"] .config-panel .device-variant-half #colorOptions .color-swatch {
  flex: 0 0 30px;
}
body.experience-ui[data-page="device"] .config-panel .device-variant-half #colorOptions .color-name {
  flex: 1 1 76px;
  min-width: 0;
  margin-left: 2px;
  overflow-wrap: anywhere;
}

body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions.service-addon-list {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 5px !important;
  width: 100% !important;
  padding: 5px !important;
  border: 1px solid #e3e7ed !important;
  border-radius: 17px !important;
  background: #f3f5f7 !important;
  box-shadow: inset 0 1px 2px rgba(30,41,55,.025) !important;
}
body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions[data-count="2"] {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions[data-count="3"] {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions > label.extra-option {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px 7px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions > label.extra-option:has(input:checked) {
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(29,29,31,.09) !important;
}
body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions > label.extra-option input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  accent-color: #df6234 !important;
}
body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions > label.extra-option span {
  min-width: 0;
}
body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions > label.extra-option b {
  font-size: 12px !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions > label.extra-option:focus-within {
  outline: 2px solid #df6234;
  outline-offset: 1px;
}

body.experience-ui[data-page="device"] .config-panel > .condition-note {
  margin-top: 16px !important;
  text-align: left;
}
body.experience-ui[data-page="device"] [data-ui-name="P01"] .bundle-welfare-note {
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #697789;
}
@media (max-width: 420px) {
  body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions > label.extra-option {
    gap: 4px !important;
    padding: 8px 4px !important;
  }
  body.experience-ui[data-page="device"] .config-panel #serviceAddonOptions > label.extra-option b {
    font-size: 11px !important;
  }
}

/* 2026-10-23: use the full carrier field width with refreshed readable type. */
body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions) {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  width: 100% !important;
  max-width: none !important;
}
body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions) > .choice-button {
  min-width: 0 !important;
  font-family: Pretendard, Inter, "Noto Sans KR", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  justify-content: center !important;
}
@media (max-width: 420px) {
  body.experience-ui[data-page="device"] .config-panel :is(#requestCarrierOptions,#targetCarrierOptions) > .choice-button {
    font-size: 13px !important;
    padding-inline: 5px !important;
  }
}

/* Pre-signup guidance: typographic hierarchy only; keep editable notice slots. */
body.experience-ui[data-page="device"] .config-panel > .condition-note [data-site-notice="phonePrecheckTitle"] {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: -.025em;
  color: #25303d !important;
}
body.experience-ui[data-page="device"] .config-panel > .condition-note [data-site-notice="phonePrecheckBody"] {
  margin-top: 7px !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  color: #526072 !important;
  overflow-wrap: anywhere;
}
body.experience-ui[data-page="device"] .config-panel > .condition-note a[data-site-notice="phonePrecheckLink"] {
  display: inline-flex !important;
  align-items: center;
  margin-top: 9px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
  letter-spacing: -.015em;
  color: #f06b24 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}