/* ============================================================================
   inline.css — 旧 style="..." 属性の移設先 (2026-07-27)
   ============================================================================
   CSP の `style-src` から 'unsafe-inline' を外すために、markup 中の
   style 属性をクラスへ移した。属性に書かれていた宣言をそのまま写している
   (見た目を変えないのが目的なので、まとめ直しや整理はしていない)。

   - **読み込みは常に最後**にすること。インライン style は他のどの宣言より強い
     ので、同詳細度で必ず勝てる位置に置く必要がある。
   - クラス名は `cmi-` (curiomart inline) 接頭辞。既存のどのセレクタとも
     衝突しないので、ここの宣言が他所に漏れることはない。
   - **新しくインライン style を書かないこと**。動的な値 (計算した高さ・画像 URL
     など) は CSSOM (`el.style.height = ...`) を使う — CSP は CSSOM を止めない。
   ========================================================================= */

/* ---- 共有 ---------------------------------------------------------------- */
/* 読み上げ専用 (視覚的には隠すが支援技術には読ませる)。display:none や
   visibility:hidden はアクセシビリティツリーからも消えるので使えない。
   h1 や、placeholder しか無い入力のラベルに使う。 */
.cmi-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cmi-relative { position: relative; }
.cmi-danger { color: var(--b-red); }
.cmi-muted-11 { color: var(--b-ink3); font-size: 11px; }
.cmi-fs-11 { font-size: 11px; }
.cmi-bold { font-weight: 700; }
.cmi-row-8 { display: flex; gap: 8px; align-items: center; }

/* ---- admin/admin.js ------------------------------------------------------ */
.cmi-desc-block {
    font-size: 13px; line-height: 1.7; color: var(--b-ink2);
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.cmi-check-list {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; margin-bottom: 8px;
}
.cmi-note-12 { color: var(--b-ink2); font-size: 12px; margin: 2px 0 0; }
.cmi-row-8-wrap {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 8px; flex-wrap: wrap;
}
.cmi-label-strong { font-weight: 800; font-size: 12px; color: var(--b-ink2); }
.cmi-row-end-6 { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.cmi-tag-inactive { background: #eee; }
.cmi-muted-888 { color: #888; }
.cmi-muted-ink3 { color: var(--b-ink3); }

/* ---- history/history.js -------------------------------------------------- */
.cmi-btn-pill-disabled {
    background: none; border: 2px solid #c9a0ad; color: #c9a0ad;
    border-radius: 999px; padding: 6px 14px; font-weight: 800;
    font-family: inherit; cursor: default;
}
.cmi-btn-pill-accent {
    background: none; border: 2px solid #d6075e; color: #d6075e;
    border-radius: 999px; padding: 6px 14px; font-weight: 800;
    font-family: inherit; cursor: pointer;
}
.cmi-btn-pill-outline {
    background: none; border: 2px solid #4a1f2e; color: #4a1f2e;
    border-radius: 999px; padding: 8px 16px; font-weight: 800;
    font-family: inherit; cursor: pointer;
}
.cmi-btn-pill-primary {
    background: #d6075e; border: 2px solid #4a1f2e; color: #fff;
    border-radius: 999px; padding: 8px 16px; font-weight: 800;
    font-family: inherit; cursor: pointer;
}
.cmi-btn-pill-link {
    border: 2px solid #4a1f2e; color: #4a1f2e; border-radius: 999px;
    padding: 8px 16px; font-weight: 800; text-decoration: none;
}
.cmi-btn-close {
    background: none; border: 2px solid #4a1f2e; color: #4a1f2e;
    border-radius: 999px; width: 30px; height: 30px; font-weight: 900;
    cursor: pointer; flex: none; line-height: 1;
}
.cmi-modal-title { margin: 0 0 4px; font-size: 18px; color: #4a1f2e; }
.cmi-modal-product {
    margin: 0 0 4px; font-size: 13px; color: #4a1f2e; font-weight: 700;
    overflow-wrap: anywhere; word-break: break-word;
}
.cmi-modal-note { margin: 0 0 12px; font-size: 12px; color: #8a5a6a; }
.cmi-textarea {
    width: 100%; min-height: 96px; border: 2px solid #4a1f2e;
    border-radius: 10px; padding: 10px; font-family: inherit;
    font-size: 13px; box-sizing: border-box;
}
.cmi-row-end-12 { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.cmi-row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cmi-detail-title {
    margin: 0 0 8px; font-size: 18px; color: #4a1f2e; min-width: 0;
    overflow-wrap: anywhere; word-break: break-word;
}
.cmi-thumb-frame {
    border: 2px solid #4a1f2e; border-radius: 12px;
    overflow: hidden; margin-bottom: 12px;
}
.cmi-thumb-img { display: block; width: 100%; max-height: 280px; object-fit: cover; }
.cmi-byline {
    margin: 0 0 4px; font-size: 13px; color: #8a5a6a; font-weight: 700;
    overflow-wrap: anywhere; word-break: break-word;
}
.cmi-link-accent { color: #d6075e; text-decoration: underline; }
.cmi-price-line { margin: 0 0 10px; font-size: 12px; color: #4a1f2e; font-weight: 700; }
.cmi-ruby-icn { width: 12px; height: 12px; vertical-align: -1px; }
.cmi-desc-14 {
    margin: 0 0 14px; font-size: 13px; color: #4a1f2e; white-space: pre-wrap;
    overflow-wrap: anywhere; word-break: break-word;
}
.cmi-row-wrap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cmi-link-right {
    margin-left: auto; font-size: 12px; color: #8a5a6a;
    font-weight: 700; text-decoration: underline;
}

/* ---- curiomart.js / index.html ------------------------------------------- */
.cmi-btn-center-link { text-align: center; text-decoration: none; display: inline-block; }
.cmi-banner-sold { background: var(--b-pinkE); color: var(--b-ink); }
.cmi-col-10 { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.cmi-input-yob {
    font-size: 20px; padding: 10px 14px; border-radius: 8px;
    border: 2px solid #4a1f2e; text-align: center; font-family: inherit;
}
.cmi-select-mob {
    font-size: 18px; padding: 10px 14px; border-radius: 8px;
    border: 2px solid #4a1f2e; text-align: center; font-family: inherit;
    background: #fff;
}
.cmi-form-error { color: #d6075e; font-size: 13px; min-height: 18px; }
.cmi-contents { display: contents; }
.cmi-text-right { text-align: right; margin: -2px 0 6px; }
.cmi-link-btn {
    background: none; border: none; color: #d6075e; text-decoration: underline;
    cursor: pointer; font-size: 12px; padding: 2px 4px; font-family: inherit;
}

/* ---- manage/org/org.js --------------------------------------------------- */
.cmi-sub-line { font-size: 10px; color: var(--b-ink3); display: block; margin-top: 2px; }