@charset "UTF-8";

/*
 * Responsive Line Breaks Styles
 * 
 * <pr> = PC Return (Visible on Desktop/Tablets, Hidden on Mobile)
 * <sr> = SP Return (Visible on Mobile, Hidden on Desktop/Tablets)
 */

/* Base reset for custom tags */
pr,
sr {
    box-sizing: border-box;
    border: none;
    padding: 0;
    margin: 0;
    line-height: inherit;
    font-size: inherit;
    text-decoration: none;
    background: transparent;
}

/* ---------------------------------------------------------
   Desktop / Tablet View (Min Width 768px)
   --------------------------------------------------------- */
@media screen and (min-width: 768px) {

    /* <pr> (PC Return) - Force Line Break */
    pr {
        display: block;
    }

    pr::after {
        content: "";
        /* No extra content needed, block does the job */
    }

    /* <sr> (SP Return) - Inline Flow (Hidden effect) */
    sr {
        display: inline;
    }
}

/* ---------------------------------------------------------
   Mobile View (Max Width 767px)
   --------------------------------------------------------- */
@media screen and (max-width: 767px) {

    /* <pr> (PC Return) - Inline Flow (Hidden effect) */
    pr {
        display: inline;
    }

    /* <sr> (SP Return) - Force Line Break */
    sr {
        display: block;
    }

    sr::after {
        content: "";
    }
}

/* ---------------------------------------------------------
   Editor Overrides (Visual Editor)
   ---------------------------------------------------------
   Simplified Visuals: Vertical Lines
   Safe Mode: Ensures text inside tags is VISIBLE even if browser wraps it.
*/
.mce-content-body pr,
.mce-content-body sr {
    display: inline !important;
    /* Allow text flow if wrapped */
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    /* Do NOT set font-size: 0 here, or wrapped text vanishes */
}

/* Common Badge/Marker Style */
.mce-content-body pr::before,
.mce-content-body sr::before {
    display: inline-block;
    width: 3px;
    /* Slightly thicker for better visibility */
    height: 14px;
    /* Fixed height for the bar */
    vertical-align: middle;
    border-radius: 1px;
    content: "" !important;
    margin: 0 2px;
    /* Spacing around the bar */
    font-size: 0;
    /* Ensure the bar doesn't hold text space oddly */
    line-height: 0;
}

/* PC Marker: Blue Line */
.mce-content-body pr::before {
    background-color: #0073aa;
    border: 1px solid #005a87;
    /* Thin border for sharpness */
}

/* SP Marker: Red Line */
.mce-content-body sr::before {
    background-color: #d63638;
    border: 1px solid #a82a2c;
}

/* Ensure ::after is hidden */
.mce-content-body pr::after,
.mce-content-body sr::after {
    display: none !important;
}