/*
 * pdf_cart_door.css
 * --------------------------------------------------------------------------
 * Tokyo door-PDF page. Every rule is scoped under `#pdf-cart-door` so nothing
 * leaks into other screens. The markup reuses the cart classes, so the shared
 * base in cart.css styles the components (band colors, two-program boxes, row
 * layout, sub-program lines...). This file only adds what is PDF-specific:
 *   - the シミュレーション結果 band
 *   - the single full-width plan + the two-column layout
 *     [ left: chips + 補助金合計額 + 補助金の効果 ] [ right: 補助金の詳細 ]
 *   - the compact type scale for the fixed print body (1024px)
 *   - the horizontal group-images row (always below the cart — tokyo has no
 *     side-by-side plans-1 rule)
 * All rules here are media-independent → they apply on screen AND in print.
 */

#pdf-cart-door {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================================
 * Header band — シミュレーション結果
 * ========================================================================== */

#pdf-cart-door .pdf_result_header {
    width: 100%;
    box-sizing: border-box;
}

#pdf-cart-door .pdf_result_header__band {
    width: 100%;
    background: #CFE2F3;
    color: #ffffff;
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

/* ============================================================================
 * Single-plan wrapper — one full-width column
 * ========================================================================== */

#pdf-cart-door .cart_window_door {
    display: block;
    width: 100%;
    max-width: none;
    margin: 12px 0 0;
    padding: 0 22px;
    box-sizing: border-box;
}

/* border-box so the 2px border of .item_cart counts INSIDE the 100% width —
   with content-box the box ends up 4px wider than its container and, being
   left-aligned, hangs over the right edge of .pdf_groups_row below it. */
#pdf-cart-door .cart_window_door .item_cart {
    width: 100%;
    box-sizing: border-box;
}

#pdf-cart-door .section_item_cart {
    border-radius: 10px;
}

/* Section title — 窓の補助金額 (full-width blue bar, color from cart.css).
   The bar covers the 2px border of .item_cart on the top/left/right, so it is
   exactly 4px wider than the box and pulled back by one border width on each
   side. A percentage width (100.5%) would grow with the page and push the bar
   past the right border. */
#pdf-cart-door .item_cart .section_item_cart .section_title {
    font-size: 18px;
    height: 27px;
    padding-top: 4px;
    width: calc(100% + 4px);
    margin-left: -2px;
    margin-top: -2px;
}

/* ============================================================================
 * Two columns — left totals / right detail
 * ========================================================================== */

/* The grey left panel bleeds to the edges of the box, so the row itself must
 * carry NO padding — each column pads its own content instead. `stretch` makes
 * the panel span the full height even when the right column is the taller one. */
#pdf-cart-door .pdf_result_columns {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 0;
    box-sizing: border-box;
}

/* Grey panel — flush with the blue border on the left/bottom and with the
 * section title on top. Its bottom-left corner follows the 10px radius of
 * .section_item_cart so it cannot poke outside the rounded border. */
#pdf-cart-door .pdf_result_left {
    flex: 0 0 48%;
    min-width: 0;
    background: #EFEFEF;
    padding: 18px 14px 24px 20px;
    border-bottom-left-radius: 10px;
    box-sizing: border-box;
}

/* Inset restored here (was on .pdf_result_columns): 8px top / 14px right /
 * 12px bottom; the left side keeps the 18px gap after the grey panel. */
#pdf-cart-door .pdf_result_right {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 14px 12px 0;
    box-sizing: border-box;
}

/* ============================================================================
 * Left column — area chips + 補助金合計額 + 補助金の効果
 * ========================================================================== */

#pdf-cart-door .box_text_subsidy .area_selected {
    font-size: 13px;
}

#pdf-cart-door .box_text_subsidy .area_selected ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#pdf-cart-door .box_text_subsidy .area_selected ul li {
    position: relative;
    padding-left: 10px;
}

#pdf-cart-door .box_text_subsidy .area_selected ul li.area_text {
    margin-right: 18px;
}

#pdf-cart-door .box_text_subsidy .area_selected ul li::before {
    content: '•';
    position: absolute;
    left: -2px;
    top: 30%;
    transform: translateY(-50%);
    font-size: 28px;
    color: #E75400;
    line-height: 0;
}

/* 補助金合計額 row — the amount sits right after the label */
#pdf-cart-door .bl_cartResult_subsidy {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

#pdf-cart-door .bl_cartResult_subsidy .bl_cartResult_subsidy--item.text_total_amount {
    font-size: 17px;
    flex: 0 0 auto;
}

#pdf-cart-door .bl_cartResult_subsidy .bl_cartResult_subsidy--item.box_price {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    padding-left: 18px;
}

#pdf-cart-door .un_cartResult_subsidy .un_cartResult_subsidy--amount {
    font-size: 26px !important;
    color: #E75400;
    white-space: nowrap;
    padding-left: 18px;
}

#pdf-cart-door .un_cartResult_subsidy--amount .err,
#pdf-cart-door .un_cartResult_subsidy--amount .err2 {
    font-size: 15px !important;
}

/* 5万円以上 warning (LOW state) — same black bold treatment as the cart, at the
   print type scale. Sized so the sentence stays on ONE line inside the narrow
   left column (15px wrapped onto a second line); the cart's 15px top padding
   would also be too much here. */
#pdf-cart-door .box_subsidy_message .warning_message {
    font-size: 12px;
    padding: 8px 0 4px 2px;
}

/* 補助金の効果 heading + underline. The line-height already sits close to the
   glyph box, so the bottom padding is what keeps the text off the rule. */
#pdf-cart-door .un_cartResult_title {
    font-size: 17px;
    margin-top: 10px;
    padding: 0 0 8px 2px;
    border-bottom: 2px solid #3C78D8;
}

/* ①②③ rows */
#pdf-cart-door .un_cartResult_itemWrap {
    padding: 4px 4px 6px;
}

#pdf-cart-door .un_cartResult_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    font-size: 12px;
    margin-top: 2px;
}

#pdf-cart-door .un_cartResult_item_name {
    display: flex;
    align-items: center;
    gap: 4px;
}

#pdf-cart-door .un_cartResult_item_name span.num {
    width: 22px;
    height: 22px;
    font-size: 13px;
    /* Background NOT overridden — cart.css: default grey, first-child orange */
}

#pdf-cart-door .un_cartResult_item_name span.txt span.name {
    font-size: 14.5px;
    margin-left: 2px;
}

/* The 1024px PDF page is wide enough for the note to sit on the SAME line as
 * the label — "(メーカー希望小売価格)※２" / "(20年相当)※３" stay inline (nowrap
 * comes from cart.css). Stacked back onto its own line below 768px. */
#pdf-cart-door .un_cartResult_item_name span.txt span.text_note {
    display: inline-block;
    margin-left: 3px;
}

#pdf-cart-door .un_cartResult_item_name span.txt span.text_note,
#pdf-cart-door .un_cartResult_item_name span.txt span.asterisk {
    font-size: 10px;
}

#pdf-cart-door .un_cartResult_item_price,
#pdf-cart-door .un_cartResult_item_price span.yen {
    font-size: 16px !important;
}

#pdf-cart-door .un_cartResult_item_price span.err,
#pdf-cart-door .un_cartResult_item_price span.err2 {
    font-size: 15px !important;
}

/* per-program sub-lines under ① */
#pdf-cart-door .un_cartResult_subPrograms {
    padding: 0 0 4px 24px;
}

#pdf-cart-door .un_cartResult_subPrograms .sub_program_line {
    font-size: 12.5px;
    margin-bottom: 2px;
}

/* The amounts read a step larger than their labels (same idea as the cart),
   while staying below the 16px of the ①②③ rows above them. */
#pdf-cart-door .un_cartResult_subPrograms .sub_program_amount {
    font-size: 14.5px;
}

/* 差額 block */
#pdf-cart-door .un_cartResult_detail {
    padding: 0 4px 6px;
}

#pdf-cart-door .un_cartResult_detail .un_cartResult_title-end {
    font-size: 11px;
    text-align: right;
    margin-top: 2px;
}

#pdf-cart-door .un_cartResult_detail p.line {
    margin: 2px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#pdf-cart-door .un_cartResult_detail .koumoku {
    font-size: 13px;
}

#pdf-cart-door .un_cartResult_detail p.line span.koumoku span.num span.core {
    width: 18px;
    height: 18px;
    font-size: 10.5px;
    margin-left: 2px;
    margin-right: 2px;
    /* Background NOT overridden — cart.css: default grey, .org orange */
}

#pdf-cart-door .un_cartResult_detail p.line span.price {
    font-size: 21px;
    font-weight: bold;
}

#pdf-cart-door .un_cartResult_detail p.off {
    font-size: 16px;
    text-align: right;
    margin: 0;
    color: #E75400;
}

#pdf-cart-door .un_cartResult_detail p.off span {
    font-size: 14px;
}


/* ============================================================================
 * Right column — 補助金の詳細 (item groups, two-program boxes)
 * ========================================================================== */

#pdf-cart-door .box_result_cart .text_subsidy {
    font-size: 16px;
    color: #000;
    margin-top: 10px;
    margin-left: 7px;
    margin-bottom: 8px;
}

#pdf-cart-door .un_cartResult_itemDoor {
    font-size: 12px;
}

/* gap BETWEEN item groups (same pattern as the cart) — the printed page has
   room to spare, so the groups get more air than the 10px used before. */
#pdf-cart-door .un_cartResult_itemDoor > * + * {
    margin-top: 16px;
}

#pdf-cart-door .un_cartResult_itemDoor .two_programs_header {
    font-size: 12.5px;
    padding: 3px 8px 4px;
}

/* gap above the image + program-boxes row (matches the cart's 10px;
   overrides the mt-2 utility). */
#pdf-cart-door .un_cartResult_itemDoor .row_two_programs {
    margin-top: 10px;
}

#pdf-cart-door .un_cartResult_itemDoor .col_program_img {
    /* basis matches the 60px image; margin-right spaces the image from the
       program boxes on the right. */
    flex: 0 0 60px;
    margin-right: 16px;
}

#pdf-cart-door .un_cartResult_itemDoor .col_program_img .img_door_result {
    max-width: 60px;
}

/* narrower boxes → breathing room around the plus */
#pdf-cart-door .un_cartResult_itemDoor .box_two_programs {
    gap: 0;
    justify-content: space-between;
}

#pdf-cart-door .un_cartResult_itemDoor .box_program {
    flex: 0 1 46%;
}

#pdf-cart-door .un_cartResult_itemDoor .box_program .program_header {
    font-size: 11.5px;
    height: 24px;
    line-height: 24px;
    padding: 0 2px;
}

#pdf-cart-door .un_cartResult_itemDoor .box_program .text_itemDetailDoor {
    font-size: 12.5px;
}

#pdf-cart-door .un_cartResult_itemDoor .box_program .icon-x {
    font-size: 12.5px;
}

/* The plus centers on the program-header line; -0.14em compensates the glyph
   sitting below the middle of its line box (see the cart rule for details). */
#pdf-cart-door .un_cartResult_itemDoor .box_program_plus {
    height: 24px;
    font-size: 20px;
    position: relative;
    top: -0.14em;
}

#pdf-cart-door .box_note_cart .note_selected_item {
    padding: 2px 4px 0;
    font-size: 12px;
    color: red;
}

/* ============================================================================
 * Group images row — always horizontal, below the cart
 * ========================================================================== */

#pdf-cart-door .pdf_groups_row {
    width: 100%;
    padding: 8px 22px 0 22px;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
}

#pdf-cart-door .pdf_group {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    border: 3px solid;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

#pdf-cart-door .pdf_group--orange {
    border-color: #FFC000;
}

#pdf-cart-door .pdf_group--green {
    border-color: #70AD47;
}

#pdf-cart-door .pdf_group_title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    padding: 6px 0;
}

#pdf-cart-door .pdf_group--orange .pdf_group_title {
    background: #FFC000;
}

#pdf-cart-door .pdf_group--green .pdf_group_title {
    background: #70AD47;
}

#pdf-cart-door .pdf_group_body {
    flex: 1 1 auto;
    padding: 6px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

#pdf-cart-door .pdf_group_body img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ============================================================================
 * Responsive — on-screen preview only (print always uses the desktop layout)
 * ========================================================================== */

/* Stacked columns — the right column has to fit two program boxes side by side
   (~152px each), which needs about 1024px of viewport. Below that the boxes
   clip, so the columns stack and the cart-style full-width row is used instead.
   Screen only: print keeps the two-column layout. */
@media screen and (max-width: 1023px) {
    #pdf-cart-door .pdf_result_columns {
        flex-direction: column;
        gap: 12px;
    }

    #pdf-cart-door .pdf_result_left,
    #pdf-cart-door .pdf_result_right {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Stacked: the grey panel is no longer the bottom-left corner of the box. */
    #pdf-cart-door .pdf_result_left {
        border-bottom-left-radius: 0;
    }

    /* Door blocks: the sizes above are tuned for the printed sheet and read too
       small on a stacked screen — take the cart's own on-screen scale instead
       (same values as its 768-1023 block). */
    #pdf-cart-door .un_cartResult_itemDoor .two_programs_header {
        font-size: 15px;
        padding: 5px 10px 6px;
    }

    #pdf-cart-door .un_cartResult_itemDoor .box_program .program_header {
        font-size: 13px;
        height: 30px;
        line-height: 30px;
        padding: 0 6px;
    }

    #pdf-cart-door .un_cartResult_itemDoor .box_program .text_itemDetailDoor,
    #pdf-cart-door .un_cartResult_itemDoor .box_program .icon-x {
        font-size: 14px;
    }

    #pdf-cart-door .un_cartResult_itemDoor .box_program_plus {
        height: 30px;
        font-size: 27px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Stacked here, so both columns pad their own sides — kept a touch tighter
       than the desktop inset since the panel now spans the full width. */
    #pdf-cart-door .pdf_result_left {
        padding: 18px 14px 24px 16px;
    }

    #pdf-cart-door .pdf_result_right {
        padding: 0 16px 12px;
    }

    /* item image — same column/image widths the cart uses at this width */
    #pdf-cart-door .un_cartResult_itemDoor .col_program_img {
        flex: 0 0 100px;
        margin-right: 10px;
    }

    #pdf-cart-door .un_cartResult_itemDoor .col_program_img .img_door_result {
        max-width: 75px;
    }

    #pdf-cart-door .pdf_result_header__band {
        font-size: 22px;
    }

    #pdf-cart-door .un_cartResult_subsidy .un_cartResult_subsidy--amount {
        font-size: 22px !important;
    }

    #pdf-cart-door .un_cartResult_detail p.line span.price {
        font-size: 18px;
    }

    #pdf-cart-door .pdf_group_title {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    /* Stacked (see the max-width:1023 block); the panel pads its own sides and
     * the deep desktop left inset is evened up with the right on a phone. */
    #pdf-cart-door .pdf_result_left {
        padding: 18px 12px 24px 12px;
    }

    /* item image — same column/image widths the cart uses on phones */
    #pdf-cart-door .un_cartResult_itemDoor .col_program_img {
        flex: 0 0 105px;
    }

    #pdf-cart-door .un_cartResult_itemDoor .col_program_img .img_door_result {
        max-width: 90px;
        margin-right: 15px;
    }

    #pdf-cart-door .pdf_result_right {
        padding: 0 14px 12px;
    }

    /* Narrow screens: not enough room next to the label — note goes back to
     * its own line so the row does not push the price out. */
    #pdf-cart-door .un_cartResult_item_name span.txt span.text_note {
        display: block;
    }

    #pdf-cart-door .pdf_groups_row {
        flex-direction: column;
        gap: 12px;
    }

    /* In column mode `flex: 1 1 0` collapses the item height — reset to auto. */
    #pdf-cart-door .pdf_group {
        flex: 0 0 auto;
    }

    #pdf-cart-door .pdf_result_header__band {
        font-size: 18px;
    }

    /* Sub-program lines: the phone-size cart rule (14px name) leaks in here and
     * reads too big next to the 12.5px lines, and the block sits tight under ①.
     * Keep the name close to the line size and drop the trailing padding. */
    #pdf-cart-door .un_cartResult_subPrograms .sub_program_name {
        font-size: 13px;
    }

    /* 先進的窓リノベ事業 at 13px needs ~117px, so at 375px the 13px message left it
     * 5px short and the name wrapped onto a second line — one step down on the
     * message keeps both on one line. */
    #pdf-cart-door .un_cartResult_subPrograms .sub_program_error {
        font-size: 12px;
    }

    #pdf-cart-door .un_cartResult_subPrograms {
        padding: 0 0 0px 24px;
    }
}

/* ============================================================================
 * Print — lock the two-column/row layouts (the mobile media above must not
 * leak into the print output on small devices)
 * ========================================================================== */

@media print {
    #pdf-cart-door {
        padding: 0 0 8px;
    }

    #pdf-cart-door .pdf_result_columns {
        flex-direction: row;
    }

    #pdf-cart-door .pdf_groups_row {
        flex-direction: row;
    }
}