:root {
      --bg: #f4fbf9;
      --panel: rgba(255, 255, 255, .78);
      --panel2: rgba(255, 255, 255, .70);
      --card: rgba(255, 255, 255, .86);

      --text: #0b1020;
      --muted: #4b6072;
      --line: rgba(11, 16, 32, .10);

      /* 透明感のあるエメラルドグリーン */
      --accent: #10bfa8;
      --accentSoft: rgba(16, 191, 168, .14);
      --accentLine: rgba(16, 191, 168, .32);

      --warn: #d99a1d;
      --danger: #e94877;

      --shadow: 0 16px 40px rgba(15, 23, 42, .10);
      --shadow2: 0 8px 18px rgba(15, 23, 42, .08);
      --radius: 16px;
      --radius2: 22px;
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 15% 10%, rgba(16, 191, 168, .18), transparent 60%),
        radial-gradient(900px 520px at 90% 14%, rgba(16, 191, 168, .10), transparent 60%),
        radial-gradient(900px 520px at 55% 115%, rgba(16, 191, 168, .12), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 40%, #ffffff 100%);
    }

    a {
      color: inherit
    }

    .wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 26px 16px 70px
    }

    .topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center
    }

    .logo {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background:
        radial-gradient(18px 18px at 32% 30%, rgba(16, 191, 168, .95), rgba(16, 191, 168, .25) 58%, transparent 62%),
        radial-gradient(26px 26px at 78% 48%, rgba(16, 191, 168, .55), rgba(16, 191, 168, .12) 62%, transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0));
      box-shadow: var(--shadow2);
      border: 1px solid rgba(11, 16, 32, .10);
    }

    .brand h1 {
      font-size: 18px;
      line-height: 1.25;
      margin: 0
    }

    .brand p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 14px
    }

    .badge-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end
    }

    .badge {
      font-size: 13px;
      color: rgba(11, 16, 32, .84);
      border: 1px solid rgba(11, 16, 32, .10);
      background: rgba(255, 255, 255, .72);
      padding: 8px 12px;
      border-radius: 999px;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
      backdrop-filter: blur(8px);
    }

    .badge strong {
      color: var(--accent)
    }

    .grid {
      display: grid;
      grid-template-columns: 1.4fr .9fr;
      gap: 16px;
      align-items: start;
    }

    @media (max-width: 980px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 12px
      }

      .sticky {
        position: relative;
        top: auto
      }
    }

    .panel {
      background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .70));
      border: 1px solid rgba(11, 16, 32, .10);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(10px);
    }

    .panel-head {
      padding: 16px 16px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      background: linear-gradient(180deg, rgba(16, 191, 168, .10), rgba(255, 255, 255, .72));
    }

    .panel-head h2 {
      margin: 0;
      font-size: 16px
    }

    .panel-head .sub {
      color: var(--muted);
      font-size: 14px
    }

    .panel-body {
      padding: 16px 16px
    }

    .row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center
    }

    .select {
      appearance: none;
      background: rgba(255, 255, 255, .86);
      border: 1px solid rgba(11, 16, 32, .14);
      color: var(--text);
      padding: 12px 12px;
      border-radius: 14px;
      min-width: 300px;
      outline: none;
      font-size: 15px;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
    }

    .hint {
      font-size: 14px;
      color: var(--muted);
      margin-top: 8px;
      line-height: 1.6
    }

    /* Steps */
    .steps {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .step {
      border: 1px solid rgba(11, 16, 32, .10);
      border-radius: 20px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
      overflow: hidden;
    }

    .step[aria-hidden="true"] {
      display: none
    }

    .step-btn {
      width: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 16px 14px;
      background: transparent;
      border: 0;
      color: var(--text);
      cursor: pointer;
    }

    .step-title {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .step-title strong {
      font-size: 16px
    }

    .step-title span {
      font-size: 14px;
      color: var(--muted)
    }

    .chev {
      width: 30px;
      height: 30px;
      border-radius: 12px;
      border: 1px solid rgba(11, 16, 32, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .66);
      flex: 0 0 auto;
    }

    .step-content {
      border-top: 1px solid var(--line);
      padding: 14px 14px 16px;
      display: none;
    }

    .step.open .step-content {
      display: block
    }

    .opt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    @media (max-width:680px) {
      .opt-grid {
        grid-template-columns: 1fr
      }
    }

    .opt {
      background: rgba(255, 255, 255, .86);
      border: 1px solid rgba(11, 16, 32, .10);
      border-radius: 18px;
      padding: 12px 12px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      position: relative;
      box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
    }

    .opt:hover {
      border-color: var(--accentLine)
    }

    /* qoptions（数量/追加ボタン付き）でラベルが縦に潰れるのを防ぐ */
    .opt.opt-qopt {
      flex-wrap: wrap;
      align-items: center
    }

    .opt.opt-qopt .meta {
      flex: 1 1 240px;
      min-width: 200px
    }

    .opt.opt-qopt .controls {
      margin-left: auto;
      flex: 0 0 auto
    }

    /* ✅ qoptions：右側（価格＋数量）を折り返し可能にして見切れ防止 */
    .opt.opt-qopt .controls {
      flex-wrap: wrap;
      /* ← これが効く（横に収まらない時に折り返す） */
      justify-content: flex-end;
      max-width: 100%;
    }

    /* ✅ 右側の塊がカード幅を超えないように */
    .opt.opt-qopt .qty {
      max-width: 100%;
    }

    /* ✅ 極小スマホでは右側を下段へ（＋ボタン見切れ防止の決定打） */
    @media (max-width: 420px) {
      .opt.opt-qopt .meta {
        flex: 1 1 100%;
        min-width: 0;
      }

      .opt.opt-qopt .controls {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
      }

      /* さらにギリギリ端末向けに少し小さくする（任意だが安定する） */
      .opt.opt-qopt .qty input {
        width: 54px;
      }

      .opt.opt-qopt .qty button {
        width: 28px;
        height: 28px;
        font-size: 17px;
      }
    }

    /* quantity（入力項目数など）で説明が縦に潰れるのを防ぐ */
    .opt.opt-qty {
      flex-wrap: wrap;
      align-items: center;
    }

    .opt.opt-qty .meta {
      flex: 1 1 240px;
      /* ある程度の幅を確保して折り返す */
      min-width: 200px;
      /* これが効く：極端に細くならない */
    }

    .opt.opt-qty .controls {
      margin-left: auto;
      flex: 0 0 auto;
      /* 右側は縮まない */
    }

    @media (max-width: 420px) {
      .opt.opt-qty .controls {
        width: 100%;
        justify-content: flex-start;
      }
    }


    .opt .meta {
      flex: 1 1 auto;
      min-width: 0
    }

    .opt .name {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
      margin: 0
    }

    .opt .desc {
      font-size: 14px;
      color: var(--muted);
      margin: 6px 0 0;
      line-height: 1.55
    }

    .price {
      font-size: 13px;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--accentSoft);
      border: 1px solid var(--accentLine);
      color: rgba(11, 16, 32, .92);
      white-space: nowrap;
      margin-top: 6px;
    }

    .price.zero {
      background: rgba(11, 16, 32, .04);
      border-color: rgba(11, 16, 32, .10);
      color: rgba(11, 16, 32, .82);
    }

    .controls {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .qty {
      display: flex;
      gap: 6px;
      align-items: center;
      background: rgba(11, 16, 32, .03);
      border: 1px solid rgba(11, 16, 32, .10);
      border-radius: 999px;
      padding: 6px;
    }

    .qty button {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid rgba(11, 16, 32, .12);
      background: rgba(255, 255, 255, .86);
      color: var(--text);
      cursor: pointer;
      line-height: 1;
      font-size: 18px;
    }

    .qty input {
      width: 62px;
      background: transparent;
      border: 0;
      color: var(--text);
      text-align: center;
      font-size: 15px;
      outline: none;
    }


    /* ▼「− 0 +」の0の左右余白を詰める（ここを調整） */
    .qty {
      gap: 4px;
      /* 6px → 4px（ボタンと入力の間隔） */
      padding: 4px;
      /* 6px → 4px（丸い枠の内側余白） */
    }

    /* 0 の横幅（＝余白に見える部分） */
    .qty input {
      width: 25px;
      /* 62px → 44px（お好みで 38〜50px） */
      padding: 0;
      /* 入力欄の内側余白も念のため */
    }

    /* ▼Chromeの number スピナーが幅を食うので消す（詰めたい時に効く） */
    .qty input::-webkit-outer-spin-button,
    .qty input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .qty input[type="number"] {
      -moz-appearance: textfield;
      /* Firefox */
    }

    .inputline {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap
    }

    .field {
      background: rgba(255, 255, 255, .86);
      border: 1px solid rgba(11, 16, 32, .14);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 14px;
      outline: none;
      font-size: 15px;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
    }

    .radio,
    .check {
      width: 18px;
      height: 18px;
      margin-top: 2px;
      flex: 0 0 auto;
      accent-color: var(--accent);
    }

    .note {
      margin-top: 12px;
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px dashed rgba(16, 191, 168, .45);
      background: rgba(16, 191, 168, .08);
      color: rgba(11, 16, 32, .88);
      font-size: 14px;
      line-height: 1.6;
    }

    /* Summary */
    .sticky {
      position: sticky;
      top: 14px
    }

    .total {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 14px
    }

    .total .big {
      font-size: 32px;
      font-weight: 850;
      letter-spacing: .2px
    }

    .total .small {
      font-size: 14px;
      color: var(--muted);
      white-space: pre-line;
    }

    .pillrow {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 6px
    }

    .pill {
      font-size: 13px;
      color: rgba(11, 16, 32, .88);
      border: 1px solid rgba(11, 16, 32, .10);
      background: rgba(255, 255, 255, .78);
      padding: 8px 10px;
      border-radius: 999px;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
    }

    .pill strong {
      color: var(--accent)
    }

    .summary-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }

    .btn {
      border: 1px solid rgba(11, 16, 32, .12);
      background: rgba(255, 255, 255, .86);
      color: var(--text);
      padding: 12px 12px;
      border-radius: 16px;
      cursor: pointer;
      font-weight: 700;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    }

    .btn.primary {
      background: linear-gradient(180deg, rgba(16, 191, 168, .24), rgba(16, 191, 168, .10));
      border-color: rgba(16, 191, 168, .38);
    }

    .btn.danger {
      background: linear-gradient(180deg, rgba(233, 72, 119, .18), rgba(233, 72, 119, .08));
      border-color: rgba(233, 72, 119, .30);
    }

    .btn:active {
      transform: translateY(1px)
    }

    .breakdown {
      margin-top: 14px;
      border-top: 1px solid var(--line);
      padding-top: 14px
    }

    .table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 10px;
      font-size: 14px;
    }

    .table td {
      padding: 12px 10px;
      vertical-align: top
    }

    .tr {
      background: rgba(255, 255, 255, .86);
      border: 1px solid rgba(11, 16, 32, .10);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .tr td:first-child {
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px
    }

    .tr td:last-child {
      border-top-right-radius: 16px;
      border-bottom-right-radius: 16px;
      text-align: right;
      white-space: nowrap
    }

    .muted {
      color: var(--muted)
    }

    .footer-note {
      margin-top: 12px;
      font-size: 13px;
      color: rgba(11, 16, 32, .70);
      line-height: 1.75;
    }

    /* Toast */
    .toast {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: rgba(11, 16, 32, .80);
      border: 1px solid rgba(255, 255, 255, .18);
      color: #fff;
      padding: 12px 14px;
      border-radius: 16px;
      font-size: 14px;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transition: opacity .16s ease;
      max-width: min(560px, calc(100% - 20px));
      z-index: 9999;
    }

    .toast.show {
      opacity: 1
    }

    /* Modal */
    #textModal .modal-card {
      max-width: 820px;
      margin: 0 auto;
      background: rgba(255, 255, 255, .94);
      border: 1px solid rgba(11, 16, 32, .12);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(10px);
    }

    #textModal .modal-head {
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      background: linear-gradient(180deg, rgba(16, 191, 168, .10), rgba(255, 255, 255, .86));
    }

    #textModal textarea {
      width: 100%;
      min-height: 240px;
      resize: vertical;
      background: rgba(255, 255, 255, .86);
      border: 1px solid rgba(11, 16, 32, .14);
      border-radius: 14px;
      color: var(--text);
      padding: 12px;
      outline: none;
      font-size: 14px;
      line-height: 1.6;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
    }

    /* Print */
    @media print {
      body {
        background: #fff;
        color: #000
      }

      .wrap {
        max-width: 900px
      }

      .panel {
        box-shadow: none;
        border-color: #ddd;
        background: #fff
      }

      .panel-head {
        background: #fff
      }

      .badge-row,
      .summary-actions,
      .hint,
      .note,
      .toast {
        display: none !important
      }

      .grid {
        grid-template-columns: 1fr
      }

      .sticky {
        position: relative
      }

      .step {
        page-break-inside: avoid;
        box-shadow: none
      }

      .opt,
      .step {
        background: #fff;
        box-shadow: none
      }

      .table {
        font-size: 12px
      }

      .tr {
        border: 1px solid #ddd
      }

      .muted {
        color: #333
      }

      a {
        color: #000;
        text-decoration: none
      }
    }

    /* ✅ セレクトがスマホで見切れないようにする */
    .select {
      min-width: 0;
      /* ← これが重要（はみ出し防止） */
      width: 100%;
      max-width: 520px;
      /* PCでは大きくなりすぎないように */
    }

    /* ✅ スマホではヘッダーを縦積みにして、selectを下段に回す */
    @media (max-width: 520px) {
      .panel-head {
        flex-direction: column;
        align-items: stretch;
      }

      .panel-head .row {
        width: 100%;
      }

      /* flexの縮まない事故防止（念のため） */
      .panel-head>div {
        min-width: 0;
      }
    }

    /* ====== ✅ 画面最上部の固定バー ====== */
    .fixedbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 9000;
      background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72));
      border-bottom: 1px solid var(--line);
      box-shadow: 0 12px 26px rgba(15, 23, 42, .10);
      backdrop-filter: blur(10px);
    }

    .fixedbar-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: nowrap;
      /* PCは余裕があるのでOK */
    }

    .fixedbar-left {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .fixedbar-label {
      font-size: 13px;
      color: var(--muted);
      white-space: nowrap;
    }

    .fixedbar-amountwrap {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
    }

    .fixedbar-amount {
      font-size: 22px;
      font-weight: 850;
      letter-spacing: .2px;
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ✅ 概算の右横：小さな「表示：税別/税込」 */
    .taxpill {
      border: 1px solid rgba(11, 16, 32, .12);
      background: rgba(255, 255, 255, .86);
      color: rgba(11, 16, 32, .92);
      border-radius: 999px;
      padding: 7px 10px;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    }

    .taxpill:active {
      transform: translateY(1px);
    }

    .taxpill-prefix {
      color: var(--muted);
      font-weight: 700;
    }

    /* 右側アクション */
    .fixedbar-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
    }

    /* 固定バー用のボタン（.btnより少しコンパクト） */
    .fbtn {
      border: 1px solid rgba(11, 16, 32, .12);
      background: rgba(255, 255, 255, .86);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 14px;
      cursor: pointer;
      font-weight: 800;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
      text-decoration: none;
      white-space: nowrap;
    }

    .fbtn.primary {
      background: linear-gradient(180deg, rgba(16, 191, 168, .24), rgba(16, 191, 168, .10));
      border-color: rgba(16, 191, 168, .38);
    }

    .fbtn:active {
      transform: translateY(1px);
    }

    /* アイコン */
    .fbtn .ico {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }

    .fbtn .txt-short {
      display: none;
    }

    @media (max-width: 520px) {
      .fixedbar-inner {
        padding: 8px 10px;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
      }

      /* ✅ 「概算：」は基本表示（必要ならJSで最終手段として消す） */
      .fixedbar-label {
        display: inline;
      }

      .fixedbar-left {
        flex: 1 1 auto;
        min-width: 0;
      }

      /* ✅ 金額＋税別/税込は常に隣同士 */
      .fixedbar-amountwrap {
        display: inline-flex;
        /* ← ここがポイント */
        align-items: baseline;
        gap: 6px;
        min-width: 0;
      }

      /* ✅ 金額を flex:1 にしない（伸びない）＝税別/税込が右に飛ばない */
      .fixedbar-amount {
        flex: 0 1 auto;
        /* ← ここがポイント */
        min-width: 0;
        font-size: clamp(14px, 5.2vw, 19px);
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .taxpill {
        flex: 0 0 auto;
        font-size: 11px;
        padding: 6px 8px;
      }

      .taxpill-prefix {
        display: none;
      }

      .fixedbar-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
      }

      .fbtn {
        padding: 8px 10px;
      }

      .fixedbar-actions .fbtn:not(.primary) .txt {
        display: none;
      }

      .fbtn .txt-full {
        display: none;
      }

      .fbtn .txt-short {
        display: inline;
      }
    }

    /* 印刷では固定バー不要 */
    @media print {

      .fixedbar,
      #fixedBarSpacer {
        display: none !important;
      }
    }

    /* ✅ ジャンル未選択時：2) パネルを薄くして操作不能にする */
    #optionPanel.is-disabled {
      opacity: .45;
      filter: grayscale(.12);
    }

    #optionPanel.is-disabled .panel-body::before {
      content: "ジャンルを選択してください（選択後にオプションが操作できます）";
      display: block;
      padding: 12px 12px;
      margin: 0 0 12px;
      border-radius: 16px;
      border: 1px dashed rgba(11, 16, 32, .18);
      background: rgba(11, 16, 32, .04);
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    /* 操作不能（クリック系だけ止める） */
    #optionPanel.is-disabled button,
    #optionPanel.is-disabled input,
    #optionPanel.is-disabled select,
    #optionPanel.is-disabled label {
      pointer-events: none;
    }

    .fixedbar-amount {
      font-variant-numeric: tabular-nums;
    }

    /* ===== SNSアプリ内ブラウザ対策：重いぼかしを無効化 ===== */
    body.no-blur .panel,
    body.no-blur .badge,
    body.no-blur .fixedbar,
    body.no-blur #textModal .modal-card,
    body.no-blur .toast {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* 半透明レイヤーも少し軽く（任意だが効きやすい） */
    body.no-blur .panel,
    body.no-blur .badge,
    body.no-blur .fixedbar,
    body.no-blur #textModal .modal-card {
      background: rgba(255, 255, 255, 0.96) !important;
    }

    /* ===== 印刷（PDF）専用：見積書レイアウトに切り替える ===== */
    @media print {
      @page {
        size: A4;
        margin: 18mm 20mm;
      }

      html,
      body {
        background: #fff !important;
        margin: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      /* 画面用UIは全部消して、printAreaだけ出す */
      body>*:not(#printArea) {
        display: none !important;
      }

      #printArea {
        display: block !important;
      }

      /* 余計な影や固定要素が混ざるのを防止（保険） */
      * {
        box-shadow: none !important;
      }
    }

    /* ===========================
   FB/IG/LINE アプリ内ブラウザ対策
   「タップが吸われて開かない」を回避
   =========================== */

    /* sticky が被さってタップ不能になるケースを潰す */
    .no-blur .panel.sticky {
      position: static !important;
      top: auto !important;
    }

    /* アコーディオンの中身が “オーバーレイ” にならないように強制 */
    .no-blur .step {
      position: relative;
    }

    .no-blur .step-content {
      position: static !important;
      /* absolute/transform起因の被さりを潰す */
      transform: none !important;
      max-height: none !important;
      height: auto !important;
      overflow: visible !important;

      /* 閉じてるときは確実に消す（被さり防止の決定打） */
      display: none !important;
    }

    .no-blur .step.open .step-content {
      display: block !important;
    }

    /* タップ取りこぼし軽減 */
    .no-blur .step-btn {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    /* ✅ アコーディオン開閉時に勝手にスクロールが吸われるのを防ぐ（Scroll Anchoring対策） */
    #stepsMount,
    #optionPanel,
    #summaryPanel,
    #fixedBarSpacer {
      overflow-anchor: none;
    }

    .step,
    .step-content,
    .step-btn {
      overflow-anchor: none;
    }

    html,
    body {
      overflow-anchor: none;
    }