/*
 * iroha-estimate / スタイルシート v1.3.0
 *
 * スコープ: .iroha-estimate 以下にすべて閉じることで、
 * Lightning テーマや他プラグインのスタイルとの衝突を最小化する。
 * 命名: BEM 風 .iroha-est__* を統一使用。
 */

/* ================================================================
   カラー・デザイントークン（CSS 変数）
================================================================ */
.iroha-estimate {
    /* ── ブランドカラー（服飾刺繍いろはサイトに準拠） ── */
    --ie-color-primary:         #111111;
    --ie-color-primary-hover:   rgba(17, 17, 17, 0.88);
    --ie-color-accent-line:     #06C755;   /* LINE グリーン */
    --ie-color-accent-line-h:   rgba(6, 199, 85, 0.88);
    --ie-color-muted:           #828282;   /* vk-color-primary */
    --ie-color-required:        #c00;

    /* ── ボーダー / 背景 ── */
    --ie-color-border:          #e6e6e6;
    --ie-color-border-dark:     #cccccc;
    --ie-color-border-focus:    #111111;
    --ie-color-bg:              #ffffff;
    --ie-color-bg-section:      #fafafa;
    --ie-color-bg-hover:        #f5f5f5;
    --ie-color-bg-selected:     #f0f0f0;

    /* ── テキスト ── */
    --ie-color-text:            #333333;
    --ie-color-text-label:      #222222;
    --ie-color-text-hint:       #666666;
    --ie-color-text-muted:      #888888;
    --ie-color-discount:        #2e7d32;
    --ie-color-warning-bg:      #fffbec;
    --ie-color-warning-border:  #e8a000;
    --ie-color-warning-text:    #7a5000;

    /* ── 形状 ── */
    --ie-radius:                8px;
    --ie-radius-sm:             5px;
    --ie-radius-pill:           20px;
    --ie-transition:            0.15s ease;

    /* ── ベーススタイル ── */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ie-color-text);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.iroha-estimate *,
.iroha-estimate *::before,
.iroha-estimate *::after {
    box-sizing: border-box;
}

/* ================================================================
   2カラム レイアウト
================================================================ */

/* モバイル（デフォルト）: 縦積み1カラム */
.iroha-est__layout {
    display: grid;
    grid-template-columns: 1fr;
}

/* グリッドセル内のコンテンツがセル幅を超えないよう保護 */
.iroha-est__col--form,
.iroha-est__col--result {
    min-width: 0;
}

/* タブレット以上（768px+）: 2カラム */
@media (min-width: 768px) {
    .iroha-est__layout {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: start;
    }

    /* 結果カラムをスティッキーにしてスクロール中も常時表示 */
    .iroha-est__col--result {
        position: sticky;
        top: 20px;
    }

    /* 2カラム時: 結果エリアの上マージン不要（別カラムにあるため） */
    .iroha-est__result {
        margin-top: 0;
    }
}

/* ================================================================
   セクション（fieldset）
================================================================ */
.iroha-est__section {
    border: 1px solid var(--ie-color-border);
    border-radius: var(--ie-radius);
    padding: 20px 20px 12px;
    margin-bottom: 16px;
}

.iroha-est__section--options {
    border-color: var(--ie-color-border-dark);
    background: var(--ie-color-bg-section);
}

.iroha-est__legend {
    font-size: 1rem;
    font-weight: 700;
    padding: 0 8px;
    color: var(--ie-color-text-label);
}

.iroha-est__required-note {
    font-size: 0.78em;
    color: var(--ie-color-required);
    font-weight: 400;
    margin-left: 6px;
}

/* ================================================================
   フィールド・ラベル
================================================================ */
.iroha-est__field {
    margin-bottom: 14px;
}

.iroha-est__label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 0.95rem;
    color: var(--ie-color-text-label);
}

.iroha-est__required {
    display: inline-block;
    background: var(--ie-color-required);
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
}

.iroha-est__hint {
    display: block;
    font-size: 0.82em;
    color: var(--ie-color-text-hint);
    margin-top: 4px;
    line-height: 1.5;
}

/* ================================================================
   カード選択（刺繍種類・複雑度）
================================================================ */
.iroha-est__card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.iroha-est__card-label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--ie-color-border);
    border-radius: var(--ie-radius);
    background: var(--ie-color-bg);
    cursor: pointer;
    transition: border-color var(--ie-transition), background var(--ie-transition);
    min-height: 52px;
}

/* ネイティブ radio を視覚的に隠す（アクセシビリティは保持） */
.iroha-est__card-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.iroha-est__card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ie-color-text-label);
    line-height: 1.4;
}

.iroha-est__card-desc {
    font-size: 0.76rem;
    color: var(--ie-color-text-hint);
    line-height: 1.4;
}

/* ホバー */
.iroha-est__card-label:hover {
    border-color: var(--ie-color-primary);
    background: var(--ie-color-bg-hover);
}

/* 選択済み（:has() で対応、fallback クラスも用意） */
.iroha-est__card-label:has(.iroha-est__card-radio:checked),
.iroha-est__card-label--selected {
    border: 2px solid var(--ie-color-primary);
    background: var(--ie-color-bg-selected);
    padding: 11px 13px; /* 2px ボーダーを補正 */
}

.iroha-est__card-label:has(.iroha-est__card-radio:checked) .iroha-est__card-title,
.iroha-est__card-label--selected .iroha-est__card-title {
    color: var(--ie-color-primary);
}

/* フォーカスリング（キーボード操作） */
.iroha-est__card-label:has(.iroha-est__card-radio:focus-visible) {
    outline: 2px solid var(--ie-color-primary);
    outline-offset: 2px;
}

/* ================================================================
   ラジオボタン（従来型・フォールバック用に残す）
================================================================ */
.iroha-est__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 4px;
}

.iroha-est__radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 6px 10px;
    border: 1px solid var(--ie-color-border-dark);
    border-radius: var(--ie-radius-sm);
    background: var(--ie-color-bg);
    transition: border-color var(--ie-transition), background var(--ie-transition);
    min-height: 44px;
}

.iroha-est__radio-label:hover {
    border-color: var(--ie-color-primary);
    background: var(--ie-color-bg-hover);
}

.iroha-est__radio-label input[type="radio"] {
    margin: 0;
    accent-color: var(--ie-color-primary);
}

.iroha-est__radio-label:has(input[type="radio"]:checked) {
    border-color: var(--ie-color-primary);
    background: var(--ie-color-bg-selected);
    font-weight: 600;
}

/* ================================================================
   セレクト・数値入力
================================================================ */
.iroha-est__select,
.iroha-est__input-number {
    display: block;
    width: 100%;
    max-width: 360px;
    padding: 10px 12px;
    border: 1px solid var(--ie-color-border-dark);
    border-radius: var(--ie-radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: var(--ie-color-bg);
    color: var(--ie-color-text);
    transition: border-color var(--ie-transition);
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
}

.iroha-est__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.iroha-est__select:focus,
.iroha-est__input-number:focus {
    border-color: var(--ie-color-border-focus);
    outline: 2px solid rgba(17, 17, 17, 0.18);
    outline-offset: 0;
}

.iroha-est__input-number {
    max-width: 160px;
}

/* ================================================================
   ステッパー（枚数入力）
================================================================ */
.iroha-est__stepper {
    display: flex;
    align-items: stretch;
    width: fit-content;
    border: 1px solid var(--ie-color-border-dark);
    border-radius: var(--ie-radius-sm);
    overflow: hidden;
    background: var(--ie-color-bg);
}

.iroha-est__stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    background: var(--ie-color-bg-hover);
    border: none;
    font-size: 1.25rem;
    font-family: inherit;
    color: var(--ie-color-text-label);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--ie-transition), opacity var(--ie-transition);
    padding: 0;
    line-height: 1;
}

.iroha-est__stepper-btn:hover {
    background: #e0e0e0;
}

.iroha-est__stepper-btn:active {
    background: #d4d4d4;
}

.iroha-est__stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ステッパー内の input */
.iroha-est__stepper .iroha-est__input-number {
    width: 72px;
    max-width: 72px;
    min-height: 44px;
    padding: 10px 6px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--ie-color-border);
    border-right: 1px solid var(--ie-color-border);
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    /* スピナーを非表示 */
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
}

.iroha-est__stepper .iroha-est__input-number::-webkit-inner-spin-button,
.iroha-est__stepper .iroha-est__input-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* フォーカスはコンテナ全体に当てる */
.iroha-est__stepper:focus-within {
    outline: 2px solid var(--ie-color-border-focus);
    outline-offset: 2px;
}

/* ================================================================
   チェックボックス（オプション）
================================================================ */
.iroha-est__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    margin-bottom: 10px;
    padding: 6px 0;
}

.iroha-est__checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--ie-color-primary);
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.iroha-est__opt-note {
    display: block;
    font-size: 0.8em;
    color: var(--ie-color-text-muted);
    margin-top: 1px;
}

/* ================================================================
   名入れ詳細エリア
================================================================ */
.iroha-est__name-option-wrap {
    margin-bottom: 10px;
}

.iroha-est__name-type-area {
    margin-top: 8px;
    margin-left: 25px;
    padding: 12px 14px;
    background: var(--ie-color-bg-hover);
    border: 1px solid var(--ie-color-border-dark);
    border-left: 3px solid var(--ie-color-border-dark);
    border-radius: var(--ie-radius-sm);
}

.iroha-est__name-type-prompt {
    font-size: 0.85rem;
    color: var(--ie-color-text-hint);
    margin: 0 0 10px;
    font-weight: 500;
}

.iroha-est__name-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.iroha-est__name-type-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.iroha-est__name-caution {
    font-size: 0.78rem;
    color: var(--ie-color-text-muted);
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--ie-color-border);
    line-height: 1.5;
}

.iroha-est__name-type-warn {
    color: var(--ie-color-required, #c0392b);
    font-style: italic;
    font-size: 0.88em;
}

/* ================================================================
   オプション折りたたみ
================================================================ */
.iroha-est__optional-wrap {
    margin-bottom: 16px;
}

.iroha-est__optional-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--ie-color-bg-hover);
    border: 1px solid var(--ie-color-border-dark);
    border-radius: var(--ie-radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    color: var(--ie-color-text-label);
    font-weight: 500;
    transition: background var(--ie-transition), border-color var(--ie-transition);
    min-height: 44px;
}

.iroha-est__optional-toggle:hover {
    background: #eaeaea;
    border-color: var(--ie-color-primary);
}

.iroha-est__optional-toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--ie-color-primary);
    background: var(--ie-color-bg-selected);
}

.iroha-est__toggle-icon {
    font-size: 0.8em;
    color: var(--ie-color-muted);
}

.iroha-est__optional-body {
    border: 1px solid var(--ie-color-primary);
    border-top: none;
    border-bottom-left-radius: var(--ie-radius-sm);
    border-bottom-right-radius: var(--ie-radius-sm);
    padding: 4px 0 0;
}

.iroha-est__optional-body .iroha-est__section {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

/* ================================================================
   エラーメッセージ
================================================================ */
.iroha-est__error-msg {
    background: #fff0f0;
    border-left: 4px solid var(--ie-color-required);
    color: var(--ie-color-required);
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 12px;
    margin-top: 4px;
    line-height: 1.5;
}

/* ================================================================
   計算ボタン
================================================================ */
.iroha-est__btn-calc {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: var(--ie-color-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--ie-radius);
    cursor: pointer;
    text-align: center;
    margin-top: 8px;
    letter-spacing: 0.05em;
    transition: opacity var(--ie-transition), transform 0.1s;
    min-height: 52px;
}

.iroha-est__btn-calc:hover {
    opacity: 0.88;
}

.iroha-est__btn-calc:active {
    transform: translateY(1px);
}

/* ================================================================
   結果エリア
================================================================ */
.iroha-est__result {
    background: var(--ie-color-bg);
    border: 2px solid var(--ie-color-primary);
    border-radius: 10px;
    padding: 24px;
    margin-top: 28px;
}

.iroha-est__result-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ie-color-text-label);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ie-color-border);
}

/* 概算バッジ */
.iroha-est__approx-badge {
    display: inline-block;
    font-size: 0.6em;
    font-weight: 700;
    color: var(--ie-color-muted);
    border: 1px solid var(--ie-color-border-dark);
    padding: 2px 8px;
    border-radius: var(--ie-radius-pill);
    letter-spacing: 0.05em;
    vertical-align: middle;
    white-space: nowrap;
    flex-shrink: 0;
}

.iroha-est__estimate-id {
    font-size: 0.85rem;
    color: var(--ie-color-text-hint);
    margin: 0 0 16px;
}

.iroha-est__estimate-id strong {
    font-family: monospace;
    color: var(--ie-color-text);
}

/* ================================================================
   内訳テーブル
================================================================ */
.iroha-est__breakdown {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.iroha-est__breakdown th,
.iroha-est__breakdown td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--ie-color-border);
    vertical-align: top;
}

.iroha-est__breakdown th {
    text-align: left;
    font-weight: 500;
    color: #555;
    width: 55%;
}

.iroha-est__breakdown td {
    text-align: right;
    font-weight: 500;
    color: var(--ie-color-text-label);
    white-space: nowrap;
}

.iroha-est__note {
    display: block;
    font-size: 0.78em;
    color: var(--ie-color-text-muted);
    font-weight: 400;
    margin-top: 2px;
}

/* オプション内訳リスト */
.iroha-est__opt-breakdown-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    font-size: 0.82em;
    color: #555;
}

.iroha-est__opt-breakdown-list li::before {
    content: '・';
}

/* 数量割引行 */
.js-discount-label {
    color: var(--ie-color-discount);
    font-weight: 600;
}

/* 小計行 */
.iroha-est__subtotal-row th,
.iroha-est__subtotal-row td {
    font-weight: 700;
    border-top: 2px solid var(--ie-color-border-dark);
    border-bottom: 1px solid var(--ie-color-border-dark);
    padding-top: 12px;
}

/* 合計行 */
.iroha-est__total-row th,
.iroha-est__total-row td {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ie-color-primary);
    border-top: 2px solid var(--ie-color-primary);
    border-bottom: none;
    padding-top: 12px;
}

/* ================================================================
   送料注意文言
================================================================ */
.iroha-est__shipping-note {
    font-size: 0.88rem;
    color: #555;
    background: var(--ie-color-bg-section);
    border-left: 3px solid var(--ie-color-border-dark);
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    margin: 4px 0 16px;
    line-height: 1.6;
}

/* ================================================================
   納期目安
================================================================ */
.iroha-est__lead-time {
    font-size: 0.9rem;
    color: #555;
    margin: 4px 0 16px;
}

.iroha-est__lead-time strong {
    color: var(--ie-color-text-label);
}

/* ================================================================
   要確認フラグ
================================================================ */
.iroha-est__flags {
    background: var(--ie-color-warning-bg);
    border-left: 4px solid var(--ie-color-warning-border);
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 12px;
}

.iroha-est__flags-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ie-color-warning-text);
    margin: 0 0 6px;
}

.iroha-est__flags ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iroha-est__flags ul li {
    font-size: 0.88rem;
    color: var(--ie-color-warning-text);
    padding-left: 12px;
    position: relative;
    margin-bottom: 4px;
    line-height: 1.5;
}

.iroha-est__flags ul li::before {
    content: '▶';
    font-size: 0.65em;
    position: absolute;
    left: 0;
    top: 4px;
}

/* デフォルトメッセージ */
.iroha-est__default-msg {
    font-size: 0.85rem;
    color: var(--ie-color-text-hint);
    margin: 8px 0 0;
    line-height: 1.6;
}

/* ================================================================
   ポスト見積 CTA エリア
================================================================ */
.iroha-est__cta-area {
    margin-top: 20px;
    padding: 20px;
    background: var(--ie-color-bg-section);
    border: 1px solid var(--ie-color-border);
    border-radius: var(--ie-radius);
}

/* ── 初めての方キャンペーンバッジ ───────────────────────────── */
.iroha-est__cta-campaign {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--ie-color-warning-bg);
    border: 1px solid var(--ie-color-warning-border);
    border-radius: var(--ie-radius);
    padding: 10px 16px;
    margin-bottom: 16px;
}

.iroha-est__cta-campaign-badge {
    display: inline-block;
    background: var(--ie-color-warning-border);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--ie-radius-pill);
    letter-spacing: 0.06em;
}

.iroha-est__cta-campaign-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ie-color-warning-text);
    line-height: 1.4;
}

.iroha-est__cta-campaign-text strong {
    font-size: 1.2em;
}

.iroha-est__cta-lead {
    font-size: 0.9rem;
    color: var(--ie-color-text-hint);
    margin: 0 0 10px;
    line-height: 1.6;
    text-align: center;
}

.iroha-est__cta-value-prop {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ie-color-primary);
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.5;
}

.iroha-est__cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* LINE CTA（緑） */
.iroha-est__btn-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--ie-color-accent-line);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--ie-radius);
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: opacity var(--ie-transition);
    min-height: 52px;
}

.iroha-est__btn-line:hover {
    opacity: 0.9;
    color: #ffffff;
    text-decoration: none;
}

.iroha-est__btn-line-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: #ffffff;
}

/* 正式見積依頼（ダークアウトライン） */
.iroha-est__btn-inquiry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 13px 20px;
    background: transparent;
    color: var(--ie-color-primary);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid var(--ie-color-primary);
    border-radius: var(--ie-radius);
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background var(--ie-transition), opacity var(--ie-transition);
    min-height: 52px;
}

.iroha-est__btn-inquiry:hover {
    background: var(--ie-color-bg-hover);
    color: var(--ie-color-primary);
    text-decoration: none;
    opacity: 0.9;
}

.iroha-est__cta-disclaimer {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--ie-color-muted);
    text-align: center;
    line-height: 1.5;
}

/* ================================================================
   レスポンシブ
================================================================ */
@media (max-width: 480px) {
    .iroha-est__section {
        padding: 14px 14px 8px;
    }

    /* 名入れ詳細エリア：狭い画面ではインデントをリセット */
    .iroha-est__name-type-area {
        margin-left: 0;
        padding: 10px;
    }

    /* カードグループ → 1列レイアウト */
    .iroha-est__card-group {
        grid-template-columns: 1fr;
    }

    .iroha-est__card-label {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        min-height: 52px;
    }

    /* ラジオ（従来型）*/
    .iroha-est__radio-group {
        flex-direction: column;
        gap: 6px;
    }

    .iroha-est__select,
    .iroha-est__input-number {
        max-width: 100%;
    }

    .iroha-est__result {
        padding: 16px;
    }

    .iroha-est__breakdown th {
        width: 50%;
    }

    .iroha-est__total-row th,
    .iroha-est__total-row td {
        font-size: 1.1rem;
    }
}

/* 右カラムが十分広いとき（900px+）のみ CTA ボタンを横並び */
@media (min-width: 900px) {
    .iroha-est__cta-buttons {
        flex-direction: row;
    }
}

/* ================================================================
   結果エリア フェードイン（計算後の出現を視覚的に伝える）
================================================================ */
@keyframes iroha-est-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.iroha-est__result:not([hidden]) {
    animation: iroha-est-fadein 0.3s ease-out;
}

.iroha-est__cta-area:not([hidden]) {
    animation: iroha-est-fadein 0.3s ease-out 0.1s both;
}

/* ================================================================
   v1.6.0 マルチポイント対応 追加スタイル
================================================================ */

/* ── ポイントブロック ──────────────────────────────────────────── */

.iroha-est__point-block {
    margin-bottom: 4px;
}

/* ポイント2/3: アコーディオン形式 */
.iroha-est__point-block--collapsible {
    border: 1px solid var(--ie-color-border);
    border-radius: var(--ie-radius);
    overflow: hidden;
    margin-bottom: 8px;
}

/* ── アコーディオンヘッダー ────────────────────────────────────── */

.iroha-est__point-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ie-color-bg-section);
    cursor: default;
    min-height: 44px;
}

.iroha-est__point-summary {
    flex: 1;
    font-size: 0.88rem;
    color: var(--ie-color-text);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── アコーディオン 開閉ボタン ─────────────────────────────────── */

.iroha-est__point-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--ie-color-border);
    border-radius: var(--ie-radius-sm);
    color: var(--ie-color-text-hint);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background var(--ie-transition), color var(--ie-transition);
}

.iroha-est__point-toggle-btn:hover {
    background: var(--ie-color-bg-hover);
    color: var(--ie-color-text);
}

.iroha-est__point-toggle-icon {
    pointer-events: none;
}

/* ── 削除ボタン ──────────────────────────────────────────────── */

.iroha-est__point-delete-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 0.78rem;
    color: var(--ie-color-required);
    background: none;
    border: 1px solid var(--ie-color-required);
    border-radius: var(--ie-radius-sm);
    cursor: pointer;
    transition: background var(--ie-transition), color var(--ie-transition);
    white-space: nowrap;
}

.iroha-est__point-delete-btn:hover {
    background: var(--ie-color-required);
    color: #fff;
}

/* ── アコーディオン本体 ─────────────────────────────────────────── */

.iroha-est__point-body {
    padding: 12px 0 4px;
}

/* ── ポイント別オプション折りたたみ ──────────────────────────── */

.iroha-est__point-opts-wrap {
    margin-top: -4px;
    margin-bottom: 16px;
}

/* ── ＋刺繍箇所を追加ボタン ────────────────────────────────────── */

.iroha-est__add-point-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 11px 16px;
    margin: 12px 0 16px;
    background: var(--ie-color-bg);
    border: 2px dashed var(--ie-color-border-dark);
    border-radius: var(--ie-radius);
    color: var(--ie-color-text-hint);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color var(--ie-transition),
        color var(--ie-transition),
        background var(--ie-transition);
}

.iroha-est__add-point-btn:hover:not(:disabled) {
    border-color: var(--ie-color-primary);
    color: var(--ie-color-primary);
    background: var(--ie-color-bg-hover);
}

.iroha-est__add-point-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.iroha-est__add-point-note {
    font-size: 0.8em;
    font-weight: 400;
    color: inherit;
}

/* ── 枚数セクション（グローバル・全ポイント共通） ──────────────── */

.iroha-est__section--quantity {
    border-top: 2px solid var(--ie-color-border);
    padding-top: 16px;
    margin-top: 4px;
}

/* ── 位置テキスト入力 ──────────────────────────────────────────── */

.iroha-est__input-text {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ie-color-border);
    border-radius: var(--ie-radius-sm);
    font-size: 0.95rem;
    color: var(--ie-color-text);
    background: var(--ie-color-bg);
    transition: border-color var(--ie-transition), box-shadow var(--ie-transition);
    appearance: none;
}

.iroha-est__input-text:focus {
    outline: none;
    border-color: var(--ie-color-border-focus);
    box-shadow: 0 0 0 2px rgba(17,17,17,0.10);
}

.iroha-est__input-text::placeholder {
    color: var(--ie-color-text-muted);
}

/* ── 任意ラベル ──────────────────────────────────────────────── */

.iroha-est__opt-note {
    font-size: 0.78em;
    color: var(--ie-color-text-hint);
    font-weight: 400;
    margin-left: 4px;
}

/* ── 結果テーブル：ポイント別行 ────────────────────────────────── */

.js-point-row th,
.js-point-row td {
    font-size: 0.92rem;
}

.js-point-row th .iroha-est__note {
    display: block;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--ie-color-text-hint);
    margin-top: 2px;
}

/* 刺繍代合計行（複数ポイント時） */
.js-embroidery-total-row th,
.js-embroidery-total-row td {
    font-weight: 700;
    border-top: 1px dashed var(--ie-color-border);
    padding-top: 8px;
}

/* ── レスポンシブ対応 ──────────────────────────────────────────── */

@media (max-width: 480px) {
    .iroha-est__point-header {
        gap: 6px;
        padding: 8px 10px;
    }

    .iroha-est__point-summary {
        font-size: 0.82rem;
    }

    .iroha-est__point-delete-btn {
        padding: 3px 8px;
        font-size: 0.74rem;
    }

    .iroha-est__add-point-btn {
        font-size: 0.88rem;
        padding: 10px 12px;
    }
}

/* ================================================================
   v1.7.0 追加スタイル（C-2 リピートオーダー / B-2 型代ゼロ）
================================================================ */

/* ── リピートオーダー チェックボックスフィールド ─────────────── */

.iroha-est__field--repeat-order {
    background: #f0faf4;
    border: 1px solid #b7e4c7;
    border-radius: var(--ie-radius-sm);
    padding: 10px 12px;
    margin-top: 12px;
}

.iroha-est__checkbox-label--repeat {
    align-items: flex-start;
}

.iroha-est__repeat-label {
    display: block;
    font-size: 0.9rem;
}

.iroha-est__repeat-sublabel {
    display: block;
    font-size: 0.78rem;
    color: #2e7d32;
    font-weight: 400;
    margin-top: 2px;
}

/* ── 型代ゼロ（リピート）の金額セルを緑文字に ───────────────── */

.iroha-est__zero-fee {
    color: #2e7d32;
    font-weight: 600;
}

/* ── 型代行（ポイント別）のスタイル ─────────────────────────── */

.js-point-setup-row th,
.js-point-setup-row td {
    font-size: 0.92rem;
}

.js-point-setup-row th .iroha-est__note {
    display: block;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--ie-color-text-hint);
    margin-top: 2px;
}

/* 型代合計行（複数ポイント時） */
.js-setup-total-row th,
.js-setup-total-row td {
    font-weight: 700;
    border-top: 1px dashed var(--ie-color-border);
    padding-top: 8px;
}