/* JJS quote language shared by the customer calculator and intake summary.
   Single scoped responsive layer, replacing accumulated receipt patches.
   Existing amount IDs, calculation logic, and consent flow are unchanged. */
:root {
  --jjs-quote-orange:#cf5928;
  --jjs-quote-ink:#26313e;
  --jjs-quote-muted:#667483;
  --jjs-quote-line:#e7ebef;
  --jjs-quote-soft:#f7f8fa;
  --jjs-quote-warm:#fff3ec;
}
/* Markup is shared, but added headings MUST NOT alter the existing PC receipt. */
body.experience-ui[data-page="device"] [data-ui-name="P01"] .quote-section-label {
  display:none;
}
@media (max-width:760px) {
  body.experience-ui[data-page="device"] [data-ui-name="P01"],
  body.request-public .request-shell {
    font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
    font-variant-numeric:tabular-nums;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .quote-section-label {
    display:flex;
    align-items:center;
    gap:8px;
    padding:0;
    margin:0 0 6px;
    color:var(--jjs-quote-ink);
    font-size:14px;
    font-weight:800;
    line-height:1.45;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .quote-section-index {
    display:grid;
    place-items:center;
    flex:0 0 24px;
    width:24px;
    height:24px;
    border-radius:7px;
    background:var(--jjs-quote-warm);
    color:var(--jjs-quote-orange);
    font-size:11px;
    font-weight:800;
  }
}
@media (max-width:600px) {
  body.request-public .selection-box .is-payment-highlight dd {
    color:var(--jjs-quote-orange)!important;
    font-weight:850!important;
    font-variant-numeric:tabular-nums;
  }
}
@media (max-width:760px) {
  /* One invoice surface, two semantic sections, rather than stacked inner cards. */
  body.experience-ui[data-page="device"] [data-ui-name="P01"] > .estimate-details {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--jjs-quote-line)!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] > .estimate-details > .estimate-details-content {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    grid-template-columns:none!important;
    gap:0!important;
    padding:4px 15px 12px!important;
    min-width:0!important;
    max-width:none!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details-content > .estimate-breakdown-group,
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details-content > .estimate-breakdown-group + .estimate-breakdown-group {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    flex:0 0 auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:12px 0 9px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details-content > .estimate-breakdown-group + .estimate-breakdown-group {
    border-top:1px solid var(--jjs-quote-line)!important;
    padding-top:15px!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .quote-section-label {
    min-height:26px;
    margin:0 0 5px;
    font-size:14px!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .estimate-breakdown-group > .price-breakdown,
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .plan-cost-group > .plan-cost-breakdown {
    display:flex!important;
    flex-direction:column!important;
    flex:0 0 auto!important;
    align-items:stretch!important;
    align-self:stretch!important;
    justify-content:flex-start!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    position:static!important;
    transform:none!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .price-breakdown > div,
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .plan-cost-breakdown > div {
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    grid-template-columns:none!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:9px 0!important;
    gap:12px!important;
    border:0!important;
    border-bottom:1px solid #edf0f3!important;
    position:static!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .price-breakdown > div:last-child {
    border-bottom:0!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .price-breakdown > div > span {
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    color:#465362!important;
    font-size:14px!important;
    line-height:1.5!important;
    font-weight:550!important;
    text-align:left!important;
    word-break:keep-all;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .price-breakdown > div > span small {
    display:block;
    margin-top:3px!important;
    font-size:11px!important;
    font-weight:400!important;
    line-height:1.45!important;
    color:var(--jjs-quote-muted)!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .price-breakdown > div > b {
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:55%!important;
    min-width:0!important;
    margin:0!important;
    color:var(--jjs-quote-ink)!important;
    font-size:14px!important;
    font-weight:750!important;
    line-height:1.5!important;
    white-space:nowrap!important;
    text-align:right!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .price-breakdown > div > b.discount-value,
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .price-breakdown .breakdown-saving > b {
    color:var(--jjs-quote-orange)!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .price-breakdown .breakdown-subtotal > :is(span,b) {
    font-weight:800!important;
    color:var(--jjs-quote-ink)!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .plan-cost-group > .bundle-welfare-note {
    width:100%!important;
    margin:8px 0 10px!important;
    padding:0!important;
    font-size:11px!important;
    line-height:1.55!important;
    color:var(--jjs-quote-muted)!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .plan-cost-group > #checkoutButton {
    display:flex!important;
    flex:0 0 auto!important;
    align-self:stretch!important;
    width:100%!important;
    min-height:46px!important;
    margin:0!important;
    padding:12px 14px!important;
    border-radius:10px!important;
    background:#d96532!important;
    font-size:14px!important;
    line-height:1.4!important;
  }
  body.experience-ui[data-page="device"] [data-ui-name="P01"] > .checkout-disclaimer {
    font-size:11px!important;
    line-height:1.55!important;
    color:var(--jjs-quote-muted)!important;
    margin-top:4px!important;
  }
}
@media (max-width:600px) {
  body.request-public .request-shell {
    padding:25px 15px 42px!important;
    max-width:880px;
  }
  body.request-public .request-shell > h1 {
    font-size:30px!important;
    line-height:1.24!important;
    margin:8px 0 12px!important;
    letter-spacing:-.035em;
  }
  body.request-public .request-shell > p {
    font-size:14px!important;
    line-height:1.65!important;
    margin:10px 0 14px!important;
    color:#5c6875!important;
  }
  body.request-public .request-shell > .notice {
    margin:11px 0 15px!important;
    padding:12px 14px!important;
    font-size:12px!important;
    line-height:1.65!important;
  }
  body.request-public .selection-box {
    margin:14px 0!important;
    padding:17px 15px 14px!important;
    border:1px solid var(--jjs-quote-line)!important;
    border-radius:17px!important;
    box-shadow:none!important;
  }
  body.request-public .selection-box h2 {
    margin:0 0 12px!important;
    font-size:19px!important;
    line-height:1.35!important;
    color:var(--jjs-quote-ink)!important;
  }
  body.request-public .selection-box #chosenConditions {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:8px!important;
    padding:0!important;
    margin:0!important;
  }
  body.request-public .selection-box #chosenConditions > div {
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    min-height:50px!important;
    min-width:0!important;
    margin:0!important;
    padding:9px 11px!important;
    background:var(--jjs-quote-soft)!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
  }
  body.request-public .selection-box #chosenConditions dt {
    margin:0 0 4px!important;
    color:var(--jjs-quote-muted)!important;
    font-size:11px!important;
    line-height:1.4!important;
    font-weight:600!important;
  }
  body.request-public .selection-box #chosenConditions dd {
    margin:0!important;
    color:var(--jjs-quote-ink)!important;
    font-size:14px!important;
    line-height:1.45!important;
    font-weight:700!important;
    overflow-wrap:anywhere;
  }
  body.request-public .selection-box #chosenConditions > .is-wide-detail {
    grid-column:1/-1!important;
  }
  body.request-public .selection-box #chosenConditions > .is-payment-highlight {
    order:-1!important;
    grid-column:1/-1!important;
    background:var(--jjs-quote-warm)!important;
    border:1px solid #f0d8c8!important;
    padding:12px 14px!important;
  }
  body.request-public .selection-box #chosenConditions > .is-payment-highlight dt {
    color:#a74e26!important;
    font-size:12px!important;
    font-weight:750!important;
  }
  body.request-public .selection-box #chosenConditions > .is-payment-highlight dd {
    color:var(--jjs-quote-orange)!important;
    font-size:23px!important;
    line-height:1.25!important;
    font-weight:850!important;
  }
  body.request-public .selection-box > p {
    margin:11px 0 0!important;
    color:#687483!important;
    line-height:1.55!important;
    font-size:12px!important;
  }
  body.request-public .request-progress {
    margin:15px 0!important;
  }
  body.request-public .phone-precheck {
    margin:14px 0 17px!important;
    padding:16px!important;
    border-radius:15px!important;
  }
  body.request-public .phone-precheck p {font-size:13px!important;line-height:1.65!important}
  body.request-public #customerRequestForm {
    margin:16px 0!important;
    padding:18px 16px!important;
    gap:15px!important;
  }
  body.request-public #customerRequestForm > label {font-size:14px!important}
  body.request-public #customerRequestForm input:not([type="checkbox"]),
  body.request-public #customerRequestForm select,
  body.request-public #customerRequestForm textarea {font-size:16px!important}
}

/* Precise PC-only alignment requested: bring the steps bar 12px closer
   to the end of the calculator without changing card sizes or columns. */
@media (min-width:1100px) {
  body.experience-ui[data-page="device"] .device-info-nav {
    margin-top:10px!important;
  }
}

/* Target the nested plan column after all legacy responsive rules.
   At 390px the inherited selector was still rendering 13px. */
@media (max-width:760px) {
  body.experience-ui[data-page="device"] [data-ui-name="P01"] .estimate-details .plan-cost-group .plan-cost-breakdown > div > span {
    font-size:14px!important;
  }
}