/*
 * Sakai Tomorrow Info 表示帯
 *
 * header.php の王冠バナー(.search-rank)の直後に挿入される想定。
 * 帯自体には背景・枠をつけず、プレーンテキストとして表示する。
 * 区分語(危険/厳重警戒/警戒/注意/ほぼ安全)だけを色付き背景+枠+白文字のバッジにする。
 *
 * 配置ルール:
 *   PC:  右端をヘッダー右端に揃える。最大幅は search-rank と同じ412px。
 *   SP:  右端を王冠バナー(search-rank)の右端に揃える。
 *        最大幅は王冠バナーと同じ(150px / 38vw、400px以下は136px)を超えない。
 *        幅に収まらない場合は折り返す(無理に1行へ広げない)。
 *        王冠バナーの上に表示する。
 */

.sakai-tomorrow-info {
    display: block;
    box-sizing: border-box;
    text-align: right;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #222;
}

/* PC(901px以上): .header-side は flex-direction:column; align-items:flex-end のため、
   ここでは右揃え・最大幅のみ指定すれば search-rank の右端と自動的に揃う。 */
@media (min-width: 901px) {
    .sakai-tomorrow-info {
        max-width: 412px;
        margin: 4px 0 0;
    }
}

/*
 * SP(900px以下): .header-side .search-rank は position:absolute (右下固定)のため、
 * 帯は通常のflow内に残る唯一の子要素として、王冠バナーの上に自然に配置される。
 * 幅は王冠バナーと同じ上限(150px / 38vw)に揃える。
 */
@media (max-width: 900px) {
    .sakai-tomorrow-info {
        max-width: min(150px, 38vw);
        font-size: 10px;
        line-height: 1.35;
        margin: 0 0 4px;
    }
}

@media (max-width: 400px) {
    .sakai-tomorrow-info {
        max-width: 136px;
    }
}

/*
 * 区分語(危険/厳重警戒/警戒/注意/ほぼ安全)のみ色付きバッジにする。
 * 白文字が読めるよう、背景は各区分の濃いめの色、枠は同系のさらに濃い色。
 */
.sti-category {
    display: inline-block;
    font-weight: 700;
    color: #fff;
    padding: 0 5px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.sti-category.sti-level-danger  { background: #e24b4a; border-color: #a32d2d; } /* 危険 */
.sti-category.sti-level-severe  { background: #ef9f27; border-color: #854f0b; } /* 厳重警戒 */
.sti-category.sti-level-warning { background: #c9a400; border-color: #7a6300; } /* 警戒 */
.sti-category.sti-level-caution { background: #378add; border-color: #0c447c; } /* 注意 */
.sti-category.sti-level-safe    { background: #639922; border-color: #27500a; } /* ほぼ安全 */

/* スマホで非表示にするためのクラス */
@media (max-width: 900px) {
    .sti-hide-mobile {
        display: none !important;
    }
}

/* デバッグ表示(管理者のみ出力される) */
.sti-debug {
    clear: both;
    margin: 8px 0;
    font-size: 11px;
    text-align: left;
}
.sti-debug pre {
    background: #f6f7f7;
    border: 1px dashed #999;
    padding: 8px;
    overflow: auto;
    white-space: pre-wrap;
}