/* ==========================================================================
   kimoota.net - 最終統合ダークUI（整理・垂直中央同期版）
   ========================================================================== */

/* --- 1. 共通ベース (ガラス質感・物理配置基準) --- */
/* 不要なカラー系クラス（success, warning等）を削除 */
.common-icon-box, .primary-box, .blank-box.bb-tab, .blank-box.bb-husen, .pink-nuki-box {
    position: relative;
    margin: 2.5em 0 2em;
    padding: 1.8em 1.5em 1.8em 5.5em !important; /* アイコン/ラベル用の左余白 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 183, 183, 0.05);
    display: block !important;
    min-height: 5.5em;
}

/* --- 2. アイコン・ラベルの垂直同期 (63%位置を基準) --- */
.common-icon-box::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 63% !important; /* ユーザー様検証済みの黄金比 */
    left: 1.5em !important;
    transform: translateY(-50%) !important;
    width: 2.8em !important;
    height: 2.8em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    margin: 0 !important;
}

/* テキスト位置の同期 (GeneratePressの行高補正) */
.common-icon-box p, .common-icon-box div, 
.pink-nuki-box p, .pink-nuki-box div {
    margin-top: 6px !important;    
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    display: block !important;
    word-break: break-all;
}

/* --- 3. 新設：ピンク抜き枠 (シンプルな細線ラベルなし) --- */
.pink-nuki-box {
    padding: 1.5em !important; /* アイコンがないので余白を均等に */
    border: 1px solid rgba(255, 183, 183, 0.4) !important; /* ピンクの細線 */
    background: transparent !important; /* 抜き（背景透過） */
    box-shadow: none !important;
    min-height: auto !important;
}
/* ピンク抜き枠にはアイコンを表示させない */
.pink-nuki-box::before { display: none !important; }
.pink-nuki-box p { margin-top: 0 !important; } /* 位置補正リセット */

/* --- 4. ラベル形式 (bb-tab系) & 逆転修正済 --- */
.primary-box::before, .blank-box.bb-tab::before, .blank-box.bb-husen::before {
    position: absolute;
    top: -12px;
    left: 14px;
    padding: 2px 14px;
    font-size: 11px;
    font-weight: 900;
    background: #2a2a2a !important;
    color: #ffb7b7 !important;
    border: 1px solid rgba(255, 183, 183, 0.3);
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    /* ラベル時は垂直中央配置の設定をリセット */
    transform: none !important;
    width: auto !important;
    height: auto !important;
}

/* ラベル型はアイコン配置用の余白をリセット */
.primary-box, .blank-box.bb-tab { padding: 1.5em !important; min-height: auto; }

/* ラベル名定義 */
.primary-box::before  { content: 'PRIMARY' !important; }
.bb-strategy::before  { content: 'STRATEGY'; }
.bb-check::before     { content: 'CHECK'; }
.bb-comment::before   { content: 'COMMENT'; }
.bb-point::before     { content: 'POINT'; }
.bb-tips::before      { content: 'TIPS'; }
.bb-hint::before      { content: 'HINT'; }
.bb-pickup::before    { content: 'PICKUP'; }
.bb-basics::before    { content: 'BASICS'; }
.bb-memo::before      { content: 'MEMO'; }
.bb-husen::before     { content: '付箋'; }

/* 5. 付箋 (bb-husen) 特有スタイル */
.blank-box.bb-husen {
    border-left: 5px solid rgba(255, 204, 0, 0.5);
    background: rgba(255, 204, 0, 0.1);
    border-radius: 0 8px 8px 0;
    padding-left: 1.5em !important;
}
.bb-husen::before { color: #ffcc00 !important; border-color: rgba(255, 204, 0, 0.4) !important; }

/* 6. マーカー */
.marker-under { background: linear-gradient(transparent 85%, #ffeb3b 85%); }
.marker-under-red { background: linear-gradient(transparent 85%, #ff5252 85%); }

/* -----------------------------------------------------------
   SVGパス定義（既存のものを維持）
   ----------------------------------------------------------- */
.information-box::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24' fill='none' stroke='%23ffb7b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E"); }
.question-box::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24' fill='none' stroke='%23ffb7b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E"); }
.alert-box::before       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24' fill='none' stroke='%23ffb7b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E"); }
.ok-box::before          { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24' fill='none' stroke='%23ffb7b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"); }
.ng-box::before          { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24' fill='none' stroke='%23ffb7b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E"); }
.good-box::before        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24' fill='none' stroke='%23ffb7b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'%3E%3C/path%3E%3C/svg%3E"); }
.bad-box::before         { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/xml' viewbox='0 0 24 24' fill='none' stroke='%23ffb7b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3'%3E%3C/path%3E%3C/svg%3E"); }
.memo-box::before        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24' fill='none' stroke='%23ffb7b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E"); }