:root {
    --main-font-family: 'メイリオ', Meiryo, sans-serif;
    --main-text-color: #000000;
    --flyer-bg-color: #D9EAD3; 
    --placeholder-text-color: #38761D; 
    --header-bg-color: #6AA84F; 
    --header-text-color: #FFFFFF; 
    --section-title-bg-color: #93C47D; 
    --section-title-text-color: #274E13; 
    --image-container-bg-color: #E6F4EA; 
    --print-main-text-color: #000000;
    --print-flyer-bg-color: #D9EAD3;
    --print-placeholder-text-color: #38761D;
    --print-header-bg-color: #6AA84F;
    --print-header-text-color: #FFFFFF;
    --print-section-title-bg-color: #93C47D;
    --print-section-title-text-color: #274E13;
    --print-image-container-bg-color: #E6F4EA;
    --rent-amount-specific-color: #FF0000; /* default rent color (red) */
    --rent-amount-font-size: 430pt; /* Default rent font size increased for board mode (legacy, kept) */
    --rent-amount-font-size-px: 430px; /* CSS-controlled px size used in board mode (JS will cap to 430px) */
    --rent-amount-stroke-width: 10px; /* Default rent stroke width for board mode */
    --property-title-font-size: 40pt; /* Default property title font size */
    --layout-info-font-size: 36pt; /* Default layout info font size */
}

body {
    font-family: var(--main-font-family);
    color: var(--main-text-color);
    margin: 20px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-header {
    width: 364mm; /* Match controls width for alignment */
    background-color: #333333; /* Dark background for the header */
    color: white; /* White text color */
    padding: 15px 20px; /* Vertical and horizontal padding */
    text-align: center; /* Center the title */
    margin-bottom: 20px; /* Space below this header, before controls */
    box-sizing: border-box;
    border-radius: 8px; /* Rounded corners like controls */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow like controls */
}

.page-header h1 {
    margin: 0; /* Remove default margin from h1 */
    font-size: 1.5em; /* Adjust title size as needed */
    font-weight: 500; /* Slightly less bold than default h1 */
    line-height: 1.3;
}

.controls {
    margin-bottom: 20px;
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
    width: 364mm;
    box-sizing: border-box;
}

.controls button {
    padding: 10px 15px;
    font-size: 14pt;
    margin: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}
.controls button#resetButton {
    background-color: #dc3545;
}
.controls button#howToUseButton {
    background-color: #17a2b8; 
}
/* unified save button styling */
.controls button#saveFlyerButton,
.controls button#propertySaveButton,
.controls button#newPropertyButton {
    background-color: #6f42c1; /* Purple for save buttons */
    color: #ffffff;
}

/* Ensure dropdown and text inputs show black text to satisfy "文字は黒色" */
.controls select, .controls input, .controls button {
    color: #000000;
}

.controls button:hover {
    opacity: 0.9;
}

.design-controls {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    text-align: left; 
}
.design-controls h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 12pt;
    text-align: center; 
    color: #333; 
}
.design-controls label {
    margin: 0 5px 0 10px;
    font-size: 10pt;
    color: #333; 
    display: inline-block; /* Ensure labels align well with inputs */
    margin-bottom: 5px; /* Add some bottom margin for better spacing */
}
.design-controls select, 
.design-controls input[type="color"] {
    margin-bottom: 5px;
    padding: 3px;
    font-size: 10pt;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.design-controls input[type="color"] {
    width: 40px; 
    height: 25px;
    vertical-align: middle; 
}
.design-controls input[type="number"] { 
    padding: 3px;
    font-size: 10pt;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: middle;
}

.short-numeric-input {
    width: auto; 
    min-width: 4ch; 
    max-width: 10ch; 
    margin: 0 5px;
}
#depositValueInput.short-numeric-input {
    max-width: 5ch; 
    text-align: center; 
}
#keyMoneyValueInput.short-numeric-input {
    max-width: 5ch; 
    text-align: center;
}

.short-select {
    width: 70px; 
    margin: 0 5px;
}

#flyerContainer {
    width: 364mm; 
    min-height: 257mm; 
    padding: 10mm; 
    box-sizing: border-box;
    font-size: 11pt; 
    background-color: var(--flyer-bg-color); 
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    color: var(--main-text-color); 
    font-family: var(--main-font-family); 
    display: flex;
    flex-direction: column; 
}

.flyer-columns-wrapper {
    display: flex;
    flex: 1; 
    gap: 10mm;
    width: 100%;
    min-height: 0; 
}

.flyer-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1mm; 
    min-width: 0; 
}

#leftColumn {
    flex-grow: 12; 
}

#rightColumn {
    flex-grow: 8; 
}

#flyerContainer p { 
    margin: 1mm 0; 
    line-height: 1.4; 
    color: var(--main-text-color); 
}

#headerSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6mm;
    padding: 8mm 5mm;
    color: var(--header-text-color); 
    background-color: var(--header-bg-color);
    border-radius: 8px;
    width: 100%; 
    box-sizing: border-box;
    flex-shrink: 0; 
}

.header-main-title-area {
    flex-grow: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center if space allows, or align items as needed */
}

#propertyTypeSubtitle {
    font-size: 18pt; /* Example size, adjust as needed */
    font-weight: bold; /* Distinguish from propertyTitle - Changed to bold */
    color: var(--header-text-color);
    margin: 0 0 1mm 0; /* Margin below this subtitle */
    padding: 0;
    line-height: 1.2;
    background-color: transparent;
    border-bottom: 1px dotted var(--header-text-color); /* Consistent editable style */
}

#propertyTypeSubtitle.editable:focus {
    background-color: rgba(255, 255, 255, 0.15); 
    outline-color: var(--header-text-color);
    border-bottom-color: transparent;
}

#headerSection #propertyTitle { 
    font-size: var(--property-title-font-size);
    font-weight: bold;
    line-height: 1.3;
    color: var(--header-text-color); 
    margin: 0; 
    padding: 0; 
    background-color: transparent; 
    border-bottom: none; 
}

#headerLayoutInfo {
    text-align: right;
    white-space: nowrap; 
    margin-left: 10mm; 
    color: var(--header-text-color); 
}

#headerLayoutInfo p {
    font-size: var(--layout-info-font-size); 
    margin: 0; 
}

#headerLayoutInfo .madori-label {
    font-size: 13pt; 
    color: var(--header-text-color); 
    font-weight: bold;
}

#headerLayoutInfo .header-management-fee-line {
    font-size: 18pt; 
    margin-top: 0.5mm;
    line-height: 1.2;
    color: var(--header-text-color); /* Ensures it inherits or uses header color */
}

#headerLayoutInfo .management-fee-label {
    font-size: 16pt;
    font-weight: bold;
    color: var(--header-text-color); /* Ensures it inherits or uses header color */
}

#headerLayoutInfo .editable {
    color: var(--header-text-color); 
    border-bottom: 1px dotted var(--header-text-color); 
}

#headerLayoutInfo .editable:focus {
    background-color: rgba(255, 255, 255, 0.15); 
    outline-color: var(--header-text-color);
    border-bottom-color: transparent;
}

.section {
    margin-top: 0mm; 
}

.section-title {
    font-size: 13pt; 
    padding: 3mm 4mm; 
    margin-bottom: 2mm; 
    color: var(--section-title-text-color);
    background-color: var(--section-title-bg-color);
    border-bottom: none; 
    border-radius: 4px; 
    font-weight: 600;
}

.info-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.info-list li {
    margin-bottom: 0.5mm; 
    color: var(--main-text-color);
    padding: 1mm 0; 
}

.deposit-keymoney-item,
.parking-info-combined {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;                /* force single line */
    gap: 6px;                         /* tighter spacing */
    padding: 4px 6px;                 /* reduced padding to save space */
    background-color: transparent;
    border: none;
    border-radius: 6px;
    margin-top: 1mm;
    white-space: nowrap;              /* prevent internal wrapping of inline text */
    overflow: hidden;
}

/* Emphasize labels and make numeric values easy to read */
.deposit-keymoney-item .info-pair strong,
.parking-info-combined strong {
    font-weight: 700;
    font-size: 12pt;
    color: #222;
    margin-right: 6px;
}

/* numeric inputs/selects presented more legibly in-screen (will be hidden on print as before) */
.deposit-keymoney-item .editable-input,
.parking-info-combined .editable-input,
.deposit-keymoney-item .editable-select,
.parking-info-combined .editable-select {
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    color: #111;
    font-size: 11pt;
}

.deposit-keymoney-item .info-pair,
.parking-info-combined > span {
    display: inline-flex; 
    align-items: center;
}

.info-separator {
    font-weight: bold;
    color: var(--main-text-color);
    display: none; /* hide extra slashes to pack into single line */
}

.rent-details-section {
    /* This container becomes an auto-resizing rent box (id #rentBox) */
    text-align: center;
    margin-top: 1mm;
    margin-bottom: 0mm;
    border: 1px solid #ccc;
    padding: 2mm 0;
    background-color: rgba(255,255,255,0.1);
    border-radius: 4px;
}

/* rentBox: allow JS to expand width/height as needed; start with sensible minimums */
#rentBox {
    position: relative; /* keep relative for absolute children */
    min-width: 120px;    /* initial baseline width (adjusted to layout) */
    min-height: 48px;    /* initial baseline height */
    width: auto;
    height: auto;
    overflow: visible;   /* allow content to overflow while we measure and expand */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    /* ensure consistent stacking so fixed label/unit remain visible */
    z-index: 0;
}

/* Make the rent number flow normally (not absolutely positioned) so the box can measure it */
#rentAmount {
    font-size: var(--rent-amount-font-size);
    line-height: 1;
    margin: 0 0.1em;
    color: var(--rent-amount-specific-color, var(--main-text-color));
    -webkit-text-stroke-width: var(--rent-amount-stroke-width);
    -webkit-text-stroke-color: black;
    text-stroke-width: var(--rent-amount-stroke-width);
    text-stroke-color: black;
    paint-order: stroke fill;
    border-bottom: none;
    padding: 0;
    white-space: nowrap; /* Prevent wrapping; box will expand horizontally instead */
    display: inline-block;
    z-index: 1; /* keep behind fixed label/unit if necessary */
}

/* Keep label/unit visually anchored to left/top and right/bottom within rentBox */
#rentLabel {
    position: absolute;
    left: 8px; /* anchored to top-left inside rentBox */
    top: 8px;
    font-weight: 800;
    font-size: 36pt;              /* 大きめにして目立たせる */
    line-height: 1;
    color: var(--rent-amount-specific-color, #c62828);
    letter-spacing: 0.02em;
    text-transform: none;
    text-shadow: 0 2px 0 rgba(255,255,255,0.65), 0 3px 0 rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.06); /* 軽い背景で読みやすく */
    padding: 4px 8px;
    border-radius: 6px;
    transform: rotate(-1.5deg);  /* ほんの少し傾けておしゃれに */
    z-index: 3; /* fixed on top-left regardless of rent size */
    pointer-events: auto; /* enable dragging */
    touch-action: none;
    cursor: move;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rent-unit {
    position: absolute;
    right: 40px; /* shift further left so unit sits clear of large numbers */
    bottom: 8px;
    font-weight: 800;
    font-size: 32pt; /* slightly smaller so it never competes with big numbers */
    z-index: 4; /* ensure above rent amount */
    pointer-events: auto;
    touch-action: none;
    cursor: move;
    user-select: none;
    color: #444; /* neutral color for unit */
    text-shadow:
      0 1px 0 rgba(255,255,255,0.9),
      0 2px 0 rgba(0,0,0,0.12);
    transform: translateZ(0) rotate(0.6deg);
    background: transparent;
    padding: 2px 6px;
    border-radius: 6px;
    box-shadow: none;
}

/* Ensure print/export rules mirror the same layout */
@media print {
    #rentBox {
        padding: 12px !important;
        min-width: 120px !important;
        min-height: 48px !important;
        overflow: visible !important;
    }
    #rentAmount {
        white-space: nowrap !important;
        display: inline-block !important;
        font-size: var(--rent-amount-font-size) !important;
    }
    #rentLabel { position: absolute !important; left: -8px !important; top: 8px !important; }
    .rent-unit { position: absolute !important; right: 12px !important; bottom: 8px !important; font-size: 36pt !important; }
}

/* For html2canvas export class */
#flyerContainer.exporting #rentBox { overflow: visible !important; }
#flyerContainer.exporting #rentAmount { white-space: nowrap !important; }

.rent-line {
    font-size: 22pt;
    font-weight: bold;
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 1mm; 
}

.rent-text-label {
    position: relative;
    left: -20px; /* Shifts "賃料：" text to the left */
}

#rentAmount {
    font-size: var(--rent-amount-font-size); 
    line-height: 1;
    margin: 0 0.1em;
    color: var(--rent-amount-specific-color, var(--main-text-color)); 
    -webkit-text-stroke-width: var(--rent-amount-stroke-width);
    -webkit-text-stroke-color: black; 
    text-stroke-width: var(--rent-amount-stroke-width);         
    text-stroke-color: black;      
    paint-order: stroke fill;       
    border-bottom: none; 
    padding: 0;          
    white-space: nowrap; /* Prevent rent amount from wrapping to two lines */
}

.editable {
    border-bottom: 1px dotted var(--placeholder-text-color); 
    padding: 1px 2px; 
    cursor: text;
    min-width: 15px; 
    display: inline-block; 
    background-color: transparent; 
    color: var(--main-text-color); 
}

.editable:focus {
    outline: 1px solid #4CAF50; 
    background-color: #E8F5E9; 
    border-bottom-color: transparent; 
}

.editable-select, .editable-input {
    border: 1px solid var(--placeholder-text-color);
    border-radius: 3px;
    padding: 3px 6px;
    font-family: inherit;
    font-size: 10pt; 
    background-color: white; 
    color: var(--main-text-color);
    margin-left: 5px; 
}
.editable-select:focus, .editable-input:focus {
    outline: 1px solid #4CAF50;
    background-color: #E8F5E9;
    border-color: #4CAF50;
}
.editable-input[type="number"] {
    width: 80px; 
}
.editable-input.parking-fee-input {
    width: 55px; 
}
.editable-input.parking-fee-input::-webkit-outer-spin-button,
.editable-input.parking-fee-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.editable-input.parking-fee-input[type=number] { 
    -moz-appearance: textfield;
}
.editable-input::placeholder {
    color: #999;
}

.editable.long-text {
    display: block; 
    width: calc(100% - 10px); 
    border: 1px dotted var(--placeholder-text-color); 
    padding: 5px;
    min-height: 40px; 
    white-space: pre-wrap; 
    line-height: 1.3;
}

#imageGalleryContainer {
    display: flex;
    flex-direction: column; 
    gap: 5mm; 
    width: 100%; 
    margin-bottom: 3mm;
    flex-grow: 1; 
    min-height: 0; 
    border-radius: 8px !important; 
    margin-bottom: 6mm !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important; 
}

#mainImageContainer {
    width: 100%;
    flex-grow: 1;
    aspect-ratio: 1 / 1;
    border: 2px dashed var(--section-title-bg-color);
    /* center content horizontally and vertically, keep overflow hidden to clip excess */
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    background-color: var(--image-container-bg-color);
    padding: 5px;
    box-sizing: border-box;
    border-radius: 6px;
}

/* Force image to use full width, preserve aspect ratio and center vertically when shorter */
#mainImage {
    /* Default behavior: preserve original aspect ratio, fit within container (contain) */
    display: none;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

#mainImagePlaceholder {
    color: var(--placeholder-text-color); 
    font-size: 10pt; 
}

.company-info {
    font-size: 9pt; 
    color: var(--main-text-color);
    margin-top: auto; 
    padding-top: 3mm; 
    border-top: 1px solid var(--section-title-bg-color); 
    flex-shrink: 0; 
}

.company-info p {
    margin: 1mm 0; 
}

.company-input {
    border: none;
    border-bottom: 1px dotted var(--placeholder-text-color); 
    font-family: inherit; 
    font-size: 9pt; 
    padding: 1px 0;
    background-color: transparent;
    width: calc(100% - 60px); 
    color: var(--main-text-color); 
}
.company-input.short-input {
    width: 40%; 
}
#companyName, #companyAddress {
    width: calc(100% - 70px); 
}
#companyTel {
    width: calc(100% - 50px); 
}
#infoPublicationDate {
    width: calc(100% - 95px); 
}

.company-input:focus {
    outline: none;
    border-bottom: 1px solid #4CAF50; 
}

@media print {
    @page {
        size: B4 landscape; /* Specify B4 paper, landscape orientation */
        margin: 0;          /* Remove default browser page margins */
    }
    /* Default: hide company-info in print; if .include-company is on flyerContainer, show it */
    #flyerContainer .company-info { display: none !important; }
    /* When .include-company is present on flyer container, show company-info */
    #flyerContainer.include-company .company-info { display: block !important; }
    /* Always hide UI buttons inside company-info during print */
    #flyerContainer .company-info .no-print { display: none !important; }

    :root { 
    }
    body {
        font-family: var(--print-font-family, 'メイリオ', Meiryo, sans-serif) !important; 
        color: var(--print-main-text-color, #000000) !important; 
        background-color: var(--print-flyer-bg-color, #FFFFFF) !important; 
        margin: 0 !important; /* Ensure no body margin */
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
        width: 364mm !important; /* Explicit width for B4 landscape */
        height: 257mm !important; /* Explicit height for B4 landscape */
        overflow: hidden !important; /* Prevent scrollbars on the body in print */
    }
    .controls, .page-header {
        display: none !important;
    }
    #flyerContainer {
        width: 364mm !important;  /* Full B4 width */
        height: 257mm !important; /* Full B4 height */
        margin: 0 !important;
        padding: 10mm !important; 
        box-sizing: border-box !important; /* Essential when using fixed width/height and padding */
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important; /* Kept to ensure content clips to flyer boundaries */
        background-color: var(--print-flyer-bg-color, #D9EAD3) !important; 
        color: var(--print-main-text-color, #000000) !important; 
        font-family: var(--print-font-family, 'メイリオ', Meiryo, sans-serif) !important;
        display: flex !important; 
        flex-direction: column !important; 
    }

    .flyer-columns-wrapper { 
        display: flex !important;
        flex: 1 !important; 
        gap: 10mm !important;
        width: 100% !important;
        min-height: 0 !important; 
        overflow: hidden !important; 
    }
    
    .flyer-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 1mm !important; 
        min-height: 0 !important; 
        min-width: 0 !important; 
        overflow: hidden !important; 
        page-break-inside: avoid !important;
    }

    .flyer-column#leftColumn > .section,
    .flyer-column#leftColumn > .rent-details-section {
        flex-shrink: 1 !important;
        flex-grow: 0 !important;
        min-height: 0; /* Allow proper shrinking */
    }

    .flyer-column#leftColumn .section-facilities {
        flex-grow: 1 !important; /* Allow this section to expand into available vertical space */
        flex-shrink: 1 !important; /* Still allow it to shrink if overall space is very tight */
        display: flex !important; /* Make it a flex container for its children (title and paragraph) */
        flex-direction: column !important; /* Stack title and paragraph vertically */
        min-height: 0; /* Crucial for nested flex items to shrink correctly */
    }

    .flyer-column#leftColumn .section-facilities .section-title {
        flex-shrink: 0; /* The section title should not shrink */
    }

    .flyer-column#leftColumn .section-facilities #facilities.editable.long-text {
        flex-grow: 1; /* Allow the paragraph to take remaining space in the section */
        flex-shrink: 1; /* Allow it to shrink too if its content is small */
        overflow-y: visible !important; /* Explicitly allow vertical overflow if content is too long for the flex item's computed size */
        height: auto !important; /* Ensure height is determined by flex/content */
        line-height: 1.3 !important; /* Consistent line height */
    }

    #leftColumn {
        flex-grow: 12 !important; 
    }

    #rightColumn {
        flex-grow: 8 !important; 
    }

    #flyerContainer p { 
        color: var(--print-main-text-color, #000000); 
        line-height: 1.4 !important; 
        margin: 1mm 0 !important; 
    }

    #headerSection {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: var(--print-header-bg-color, #6AA84F) !important; 
        color: var(--print-header-text-color, #FFFFFF) !important;  
        padding: 8mm 5mm !important;
        border-radius: 8px !important; 
        margin-bottom: 6mm !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important; 
    }

    .header-main-title-area {
        flex-grow: 1 !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #propertyTypeSubtitle {
        font-size: 18pt !important;
        font-weight: bold !important; /* Changed to bold */
        color: var(--print-header-text-color, #FFFFFF) !important;
        margin: 0 0 1mm 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        background-color: transparent !important;
        border-bottom: 1px dotted var(--print-header-text-color) !important; 
    }
    
    #propertyTypeSubtitle.editable:focus {
        background-color: rgba(255, 255, 255, 0.15) !important; 
        border-bottom-color: transparent !important;
    }
    /* ensure printed label also anchors top-left */
    #rentLabel { position: absolute !important; left: 8px !important; top: 8px !important; }

    #headerSection #propertyTitle { 
        color: var(--print-header-text-color, #FFFFFF) !important; 
        background-color: transparent !important;
        border-bottom: none !important;
        font-size: var(--property-title-font-size) !important; 
        font-weight: bold !important;
        line-height: 1.3 !important; 
        margin: 0 !important;
        padding: 0 !important;
    }

    #headerLayoutInfo {
        text-align: right !important;
        white-space: nowrap !important;
        margin-left: 10mm !important;
        color: var(--print-header-text-color, #FFFFFF) !important; 
    }
    #headerLayoutInfo p {
        font-size: var(--layout-info-font-size) !important; 
        margin: 0 !important;
    }
    #headerLayoutInfo .madori-label {
        font-size: 13pt !important; 
        color: var(--print-header-text-color, #FFFFFF) !important;  
    }
    #headerLayoutInfo .header-management-fee-line {
        font-size: 18pt !important;
        margin-top: 0.5mm !important;
        line-height: 1.2 !important;
        color: var(--print-header-text-color, #FFFFFF) !important; 
    }
    #headerLayoutInfo .management-fee-label {
        font-size: 16pt !important;
        font-weight: bold !important;
        color: var(--print-header-text-color, #FFFFFF) !important; 
    }

    #headerLayoutInfo .editable { 
        border-bottom: 1px dotted var(--print-header-text-color) !important; 
        color: var(--print-header-text-color, #FFFFFF) !important; 
    }

    .info-separator {
        font-weight: bold;
        color: var(--print-main-text-color, #000000) !important; 
    }
    .deposit-keymoney-item,
    .parking-info-combined {
        gap: 8px !important; 
        background-color: transparent !important; 
        padding: 1mm 0 !important; 
    }

    /* Print/export: hide decorative inputs/boxes for deposit/key/parking and show plain bold text */
    @media print {
        .deposit-keymoney-item,
        .parking-info-combined {
            background: transparent !important;
            padding: 0 !important;
            border: none !important;
        }
        .deposit-keymoney-item input,
        .deposit-keymoney-item select,
        .parking-info-combined input,
        .parking-info-combined select {
            display: none !important; /* hide form controls */
        }
        .deposit-keymoney-item .info-pair strong,
        .parking-info-combined strong {
            font-weight: 700 !important;
            color: var(--print-main-text-color, #000) !important;
        }
        /* ensure the textual values still appear and are slightly emphasized */
        .deposit-keymoney-item::after,
        .parking-info-combined::after {
            /* no-op placeholder to keep selectors grouped; actual text is from inline content */
            content: '';
        }
    }

    .rent-details-section {
        border: none !important; 
        padding: 3mm 0 !important; 
        margin-top: 1mm !important; 
        margin-bottom: 0mm !important; 
    }
    #rentAmount {
        font-size: var(--rent-amount-font-size) !important; 
        -webkit-text-stroke-width: var(--rent-amount-stroke-width) !important; 
        -webkit-text-stroke-color: black !important;
        text-stroke-width: var(--rent-amount-stroke-width) !important;         
        text-stroke-color: black !important;      
        paint-order: stroke fill !important;
        line-height: 1 !important;
        color: var(--rent-amount-specific-color, var(--print-main-text-color)) !important; 
        white-space: nowrap !important; 
    }

    .section-title {
        color: var(--print-section-title-text-color, #274E13) !important; 
        background-color: var(--print-section-title-bg-color, #93C47D) !important; 
        border-bottom: none !important;
        padding: 3mm 4mm !important; 
        font-size: 13pt !important; 
    }
    .info-list li { 
         color: var(--print-main-text-color, #000000); 
         font-size: 11pt !important; 
         padding: 1mm 0 !important; 
         page-break-inside: avoid !important; 
    }

    .editable-select, .editable-input {
        border: 1px solid var(--print-placeholder-text-color, #38761D) !important; 
        padding: 3px 6px !important; 
        background-color: white !important; 
        color: var(--print-main-text-color, #000000) !important; 
        font-size: 10pt !important; 
    }
    .editable-input[type="number"] {
        width: auto !important; 
        -moz-appearance: textfield; 
    }
    .editable-input.parking-fee-input {
        width: 55px !important; 
    }
    .editable-input.parking-fee-input::-webkit-outer-spin-button,
    .editable-input.parking-fee-input::-webkit-inner-spin-button {
        -webkit-appearance: none; 
        margin: 0;
    }
    
    .editable { 
        border-bottom: 1px dotted var(--print-placeholder-text-color, #38761D) !important; 
        padding: 1px 2px !important; 
        color: var(--print-main-text-color, #000000) !important; 
        background-color: transparent !important;
        overflow-wrap: break-word !important; /* Ensures text wraps to prevent overflow */
        word-break: break-word !important; /* Allows breaking words if necessary to prevent overflow */
    }
    .editable.long-text {
        border: 1px dotted var(--print-placeholder-text-color, #38761D) !important; 
        padding: 5px !important; 
        min-height: auto !important; 
        page-break-inside: avoid !important;
        font-size: 11pt !important; 
        line-height: 1.3 !important; 
        white-space: pre-wrap !important; /* Respects newlines and wraps text */
        overflow-wrap: break-word !important; /* Reinforce wrapping for long text */
        word-break: break-word !important; /* Reinforce word breaking for long text */
    }
    #facilities.editable.long-text {
        border: none !important;
        padding: 5px 0 !important;
    }

    .company-input {
        border: none !important; 
        border-bottom: 1px dotted var(--print-placeholder-text-color, #38761D) !important; 
        color: var(--print-main-text-color, #000000) !important; 
        font-family: var(--print-font-family, 'メイリオ', Meiryo, sans-serif) !important;
        background-color: transparent !important;
        font-size: 9pt !important; 
    }
    
    #mainImagePlaceholder { 
        color: var(--print-placeholder-text-color, #38761D) !important;  
        font-size: 10pt !important; 
    }

    img {
        max-width: 100% !important;
        max-height: 100% !important; 
        object-fit: cover !important; 
    }
    #imageGalleryContainer {
        flex-grow: 1 !important;
        min-height: 0 !important; 
    }
    #mainImageContainer { 
        border: 2px dashed var(--print-section-title-bg-color, #93C47D) !important;  
        background-color: var(--print-image-container-bg-color, #E6F4EA) !important;  
        aspect-ratio: 1 / 1 !important; 
        page-break-inside: avoid !important;
        flex-grow: 1 !important; 
        min-height: 0 !important; 
    }
    #mainImage { 
        display: block !important; 
        width: 100% !important; 
        height: auto !important; 
        max-height: 100% !important;
        object-fit: contain !important; 
        object-position: center !important;
    }
    .company-info {
        margin-top: auto !important; 
        page-break-inside: avoid !important;
        padding-top: 2mm !important;
        border-top: 1px solid var(--print-section-title-bg-color, #93C47D) !important; 
    }

    /* Ensure facilities block does NOT appear in printed/exported output per request */
    @media print {
        .section-facilities { display: none !important; }
    }
    .company-info p {
        margin: 0.5mm 0 !important;
    }

    .section {
        page-break-inside: avoid !important;
    }
}

/* When exporting via html2canvas, hide elements marked as no-export and mirror print company-info rules */
#flyerContainer.exporting .no-export { display: none !important; }
#flyerContainer.exporting .company-info { display: none !important; }
#flyerContainer.exporting.include-company .company-info { display: block !important; }
/* Hide the visual rent-box border when exporting (html2canvas) */
#flyerContainer.exporting #rentBox { border: none !important; }

/* --- 店頭掲示板版 (board mode) --- */

/* Enlarge left column top (price area) and ensure the price box has a guaranteed minimum height so large numbers fit */
.mode-shop #leftColumn {
    display: grid;
    grid-template-rows: 360px auto auto; /* 1st row reserved for enlarged price area */
    gap: 14px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Price box tuning: expand and pad to ensure large rent numbers fit nicely */
.mode-shop #rentBox {
    width: 100%;
    min-height: 320px; /* ensure the number has enough vertical space */
    padding: 18px;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Ensure rent number always fits into the box: clamp with a reduced upper cap, tight line-height and no wrapping */
/* Support up to 430px as the maximum visual font size */
.mode-shop #rentAmount {
    font-size: clamp(180px, 18vw, 430px) !important;
    line-height: 0.9 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    display: inline-block !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-text-stroke-width: var(--rent-amount-stroke-width);
    -webkit-text-stroke-color: black;
    color: var(--rent-amount-specific-color);
    z-index: 1;
    transform: none !important;
}

/* Map "contract area" to existing contractCostsSection and its common children for print/export hiding */
.mode-shop .contractArea,
.mode-shop #contractCostsSection,
.mode-shop .deposit-keymoney-item,
.mode-shop .deposit-keymoney-item .info-pair {
    box-sizing: border-box;
}

/* When printing (browser) hide borders/background/shadows for contract inputs/selects in mode-shop */
@media print {
    .mode-shop #contractCostsSection select,
    .mode-shop #contractCostsSection input,
    .mode-shop .deposit-keymoney-item select,
    .mode-shop .deposit-keymoney-item input {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    /* Equip area: remove border colors and input borders when printing */
    .mode-shop .section-facilities,
    .mode-shop .section-facilities * {
        border-color: transparent !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .mode-shop .section-facilities textarea,
    .mode-shop .section-facilities input,
    .mode-shop .section-facilities select {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }
}

/* During html2canvas / export we also remove the same visual chrome by toggling .exporting on the preview root (.mode-shop) */
.mode-shop.exporting #contractCostsSection select,
.mode-shop.exporting #contractCostsSection input,
.mode-shop.exporting .deposit-keymoney-item select,
.mode-shop.exporting .deposit-keymoney-item input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Equip area for exporting: remove borders/backgrounds for a clean output */
.mode-shop.exporting .section-facilities,
.mode-shop.exporting .section-facilities * {
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}
.mode-shop.exporting .section-facilities textarea,
.mode-shop.exporting .section-facilities input,
.mode-shop.exporting .section-facilities select {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
/* All board-mode rules are strictly scoped under .mode-shop to avoid affecting normal layout. */

/* --- 店頭掲示板：賃料枠を広げる＆切り抜き＆…禁止 --- */

/* 2カラム比率：左（賃料）を少し広げる */
.mode-shop #flyerContainer .flyer-columns-wrapper,
.mode-shop .main{
  grid-template-columns: 55% 45% !important;
}

/* 賃料枠：白背景をやめて「切り抜き（透明）」にする。枠は表示、はみ出しは隠さない */
.mode-shop #rentBox{
  background: transparent !important;       /* ←白背景を消す */
  overflow: visible !important;              /* ←切れない */
  padding: 18px 14px 18px 18px !important;   /* 右側に少し余白確保 */
  min-height: 180px !important;              /* 数字が大きくても入る土台 */
  border: 2px solid rgba(0,0,0,0.10) !important;
}

/* 賃料数字：…を出さない（ellipsis禁止）＋常に最前面＋切れない */
.mode-shop #rentAmount{
  overflow: visible !important;
  text-overflow: clip !important;            /* ←…禁止 */
  max-width: none !important;
  z-index: 9999 !important;                  /* 最前面 */
  position: relative !important;
}

/* 万円：最前面。色は維持しつつ背景は透明 */
.mode-shop #rentUnit{
  z-index: 9999 !important;
  background: transparent !important;
}

/* 賃料「枠線」や操作用ガイド線が見える場合があるので、疑似要素等も透明化（保険） */
.mode-shop #rentBox::before,
.mode-shop #rentBox::after{
  background: transparent !important;
}

/* --- 印刷/保存時だけ：入力の枠線を消す（契約諸費用・設備） --- */
@media print {
  /* 敷金/礼金/駐車場 */
  .mode-shop #contractCostsSection input,
  .mode-shop #contractCostsSection select{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  /* 設備など（中身の枠線も消す） */
  .mode-shop .section-facilities,
  .mode-shop .section-facilities *{
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* html2canvas 保存（#flyerContainer.exporting）時も同様に枠線を消す */
.mode-shop.exporting #contractCostsSection input,
.mode-shop.exporting #contractCostsSection select{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* --- 店頭掲示板：設備などをラベル風（契約諸費用に寄せる） --- */
.mode-shop .section-facilities{
  display: block !important;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.35); /* ほんのり */
}

.mode-shop .section-facilities .section-title{
  background: var(--section-title-bg-color);
  color: var(--section-title-text-color);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 10px 12px;
  margin: 0;
}
.mode-shop #facilities{
  padding: 10px 12px;
  margin: 0;
  color: #000 !important; /* make facilities text black in shop mode */
}

/* overall flyer grid: fixed 3 rows (topbar / main / footer), avoid absolute positioning */
.mode-shop #flyerContainer {
    display: grid;
    grid-template-rows: 120px 1fr auto;
    gap: 16px;
    padding: 10mm;
    box-sizing: border-box;
    background-color: var(--flyer-bg-color);
}

/* main area is two-column fixed proportion: left price & conditions, right plan/image */
.mode-shop #flyerContainer .flyer-columns-wrapper,
.mode-shop .main {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* topbar (reuse headerSection DOM but scoped here) */
.mode-shop #headerSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    box-sizing: border-box;
    background: var(--header-bg-color);
    color: var(--header-text-color);
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* heading: fixed 40px and single-line; highlight specific tokens via .board-yellow class */
.mode-shop #propertyTypeSubtitle {
    /* font size controllable via CSS variable --board-header-font-size (defaults to 40px) */
    font-size: var(--board-header-font-size, 40px) !important;
    line-height: 1;
    font-weight: 700;
    color: var(--header-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.mode-shop #propertyTypeSubtitle .board-white {
    color: #FFFFFF; /* white for outer tokens */
    display: inline-block;
    padding-right: 6px;
}
.mode-shop #propertyTypeSubtitle .board-yellow {
    color: #FFD600; /* bright yellow for middle token */
    display: inline-block;
    padding: 0 6px;
    font-weight: 900;
}

/* left column: price block anchored at top of left column and never overflows flyer */
.mode-shop #leftColumn {
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Price block: make number scale with clamp and always fit within the block (no visual overflow) */
.mode-shop #rentBox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px; /* slightly larger to give rent number more breathing room */
    box-sizing: border-box;
    background: #fff;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    width: 100%;
    max-height: 100%;
    overflow: hidden; /* force content to resize rather than overflow */
    position: relative;
    min-height: 140px; /* ensure taller base for very large rent numbers */
}

/* rent number: scale with clamp and ensure it never causes overflow; value is controlled by --rent-amount-font-size-px and capped at 340px */
.mode-shop #rentAmount {
    /* preferred size comes from the CSS variable (set by JS); clamp makes sure it never goes below/above sensible bounds */
    /* Allow a 430px visual maximum */
    font-size: clamp(160px, var(--rent-amount-font-size-px, 22vw), 430px) !important;
    line-height: 0.9 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    display: inline-block !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-text-stroke-width: var(--rent-amount-stroke-width);
    -webkit-text-stroke-color: black;
    color: var(--rent-amount-specific-color);
    z-index: 1;
    transform: none !important;
}

/* "万円" unit anchored bottom-right inside rentBox but kept away from the number to avoid overlap */
.mode-shop #rentUnit {
    position: absolute !important;
    right: 24px !important; /* move unit closer to right edge so number can expand leftwards */
    bottom: 12px !important;
    left: auto !important;
    top: auto !important;
    font-size: 32pt !important;
    color: #444 !important;
    z-index: 9999 !important; /* ensure it's above the rent amount */
    background: transparent !important;
    padding: 0 6px !important;
}

/* hide the separate "賃料：" label in board mode (design wants number + unit only inside box) */
.mode-shop #rentLabel { display: none !important; }

/* In board mode we remove the separate property title and the layout info to match requested simplified columns */
.mode-shop #propertyTitle { display: none !important; }
.mode-shop #headerLayoutInfo { display: none !important; }

/* Management fee must be black regardless of theme/background */
.mode-shop .header-management-fee-line,
.mode-shop #headerLayoutInfo .header-management-fee-line {
    color: #000 !important;
}

/* Right column: plan/image container - prevent distortion and clipping */
.mode-shop #rightColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* Enforce plan image does not distort and fits inside its area */
.mode-shop #mainImageContainer {
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    box-sizing: border-box;
}
/* Ensure uploaded images always preserve aspect ratio and are centered.
   Use contain behavior by default so images are never stretched.
   When filling the frame (cover) is desired, add .image-cover on #mainImageContainer
   and the contained img will use object-fit:cover (no stretching). */
.mode-shop #mainImage {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* preserve aspect ratio, fit inside */
    object-position: center center !important;
}

/* bottom/foot area: compact area for remarks etc., kept as auto row */
.mode-shop .company-info,
.mode-shop #contractCostsSection {
    display: block !important;
}

/* keep long sections hidden in board mode to maintain compact layout, but allow explicit contract/facilities */
.mode-shop .section { display: none !important; }
.mode-shop .section-facilities { display: block !important; }

/* ensure print/export respects mode-shop layout */
@media print {
    .mode-shop #flyerContainer {
        grid-template-rows: 120px 1fr auto !important;
    }
    .mode-shop #rentAmount { font-size: clamp(140px, 20vw, 420px) !important; }
    .mode-shop #propertyTypeSubtitle { font-size: 40px !important; }
}

/* ----------------------------------------------------------------------------
   Unified .mode-shop final rules (single authoritative block)
   - This block is intentionally last so it overrides earlier duplicates
   - Applies only when #flyerRoot has .mode-shop
   ---------------------------------------------------------------------------- */

.mode-shop #flyerContainer .flyer-columns-wrapper{
  grid-template-columns: 55% 45% !important; /* widen right column (image) for larger image area */
}

/* --- 店頭掲示板: 管理費/敷金/礼金 見やすく & 管理費入力可能にする（限定 .mode-shop） --- */
/* Ensure inputs in contractCostsSection are interactive and on top */
.mode-shop #contractCostsSection input,
.mode-shop #contractCostsSection select {
  pointer-events: auto !important;
  user-select: auto !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: none !important;
}

/* Make contract costs area larger and clearer */
.mode-shop #contractCostsSection {
  /* Unified font sizing and high-contrast band for shop boards */
  font-size: 20px !important;
  color: #111 !important;
  background: rgba(255,255,255,0.06) !important;
  padding: 10px !important;
  border-radius: 8px !important;
}

/* Ensure labels, values, units and controls share the same size/weight in shop mode */
.mode-shop #contractCostsSection strong,
.mode-shop #contractCostsSection span,
.mode-shop #contractCostsSection input,
.mode-shop #contractCostsSection select,
.mode-shop #contractCostsSection .management-fee-suffix,
.mode-shop #contractCostsSection .info-pair {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #111 !important;
  vertical-align: middle !important;
}

/* Layout: pack deposit/keymoney and management fee into one compact row with tighter, consistent alignment */
.mode-shop .deposit-keymoney-item {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  padding: 6px 8px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Ensure each info-pair is a compact flex cell so label, input and unit stay together; tighten spacing to shift 礼金 left */
.mode-shop .deposit-keymoney-item .info-pair {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;           /* tightened to move 礼金 closer to left */
  min-width: 0 !important;       /* allow shrinking inside tight container */
}

/* Fixed label width to keep labels vertically aligned and close to their values (narrower to allow 礼金 shift) */
.mode-shop .deposit-keymoney-item .info-pair strong {
  width: 56px !important;        /* slightly reduced to move values left */
  display: inline-block !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #111 !important;
  text-align: left !important;
  white-space: nowrap !important;
  margin-right: 4px !important;
}

/* Make inputs compact but readable and align their baseline with labels */
.mode-shop .deposit-keymoney-item .editable-input,
.mode-shop .deposit-keymoney-item .editable-select,
.mode-shop .deposit-keymoney-item .parking-fee-input {
  height: 36px !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  color: #111 !important;
  box-sizing: border-box !important;
  min-width: 56px !important;
  max-width: 120px !important;
  line-height: 1 !important;
}

/* tighten unit text (e.g., 'ヶ月' / '円') so it sits close to the input */
.mode-shop .deposit-keymoney-item .info-pair select,
.mode-shop .deposit-keymoney-item .info-pair span {
  margin-left: 2px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111 !important;
  white-space: nowrap !important;
}

/* Ensure 管理費 label + trailing '円' are visually identical and clearly readable */
.mode-shop .management-fee-label,
.mode-shop .deposit-keymoney-item .info-pair strong.management-fee-label,
.mode-shop .deposit-keymoney-item .info-pair span {
  color: #000 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

/* Inputs & selects larger and bolder for readability */
.mode-shop .deposit-keymoney-item .editable-input,
.mode-shop .deposit-keymoney-item .editable-select,
.mode-shop .deposit-keymoney-item .parking-fee-input {
  height: 38px !important;
  padding: 6px 10px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(255,255,255,0.95) !important;
  color: #111 !important;
  box-sizing: border-box !important;
  min-width: 56px !important;
}

/* unit text (e.g., "ヶ月", "円") tightened to sit close to input */
.mode-shop .deposit-keymoney-item .info-pair select,
.mode-shop .deposit-keymoney-item .info-pair + span,
.mode-shop .deposit-keymoney-item .info-pair span {
  margin-left: 2px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111 !important;
}

/* Ensure 管理費 label + 円 are bold black */
.mode-shop .management-fee-label,
.mode-shop .deposit-keymoney-item .info-pair strong.management-fee-label,
.mode-shop .deposit-keymoney-item .info-pair span {
  color: #000 !important;
  font-weight: 900 !important;
}

/* Hide legacy visual separators if any and ensure single-line packing */
.mode-shop .info-separator { display: none !important; }

/* Parking fee container remains hidden by default but if shown ensure it is interactive */
.mode-shop #parkingFeeContainer { display: none !important; }

/* Small responsive tweak to avoid overflow on narrow renders */
.mode-shop .deposit-keymoney-item { max-width: 100%; overflow: visible; }

/* End of management/deposit/keymoney tweaks */

/* Ensure left-column stacking order in shop mode:
   1) rentBox (top)
   2) contractCostsSection (横長の物件概要バー) directly under rentBox
   3) section-facilities (設備・備考等) directly under contractCostsSection
   These rules only affect .mode-shop and do not change right-column sizing or existing section styles. */
.mode-shop #leftColumn {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Explicit ordering so DOM order remains unchanged but visual order is guaranteed */
.mode-shop #rentBox {
  order: 0 !important;
}

/* Force the property overview bar to be visible, full-width within leftColumn, and sit after rentBox */
.mode-shop #contractCostsSection {
  display: block !important;
  order: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}

/* Ensure facilities follow property overview */
.mode-shop .section-facilities {
  order: 2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Small safeguard: if any generic .section rule hides content, make sure this specific bar remains visible */
.mode-shop .section#contractCostsSection,
.mode-shop .section#contractCostsSection * {
  display: block !important;
}

/* Allow the property overview bar to wrap into two lines if needed without breaking chips inside */
.mode-shop #contractCostsSection .contractRow {
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Keep right column unaffected: ensure its layout rules still have priority */
.mode-shop #rightColumn {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* --- Compact single-line contract costs in shop mode: tighten spacing and move management next to keymoney --- */
.mode-shop #contractCostsSection .info-pair{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;            /* narrow spacing between label / value / unit */
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mode-shop #contractCostsSection .info-pair strong{
  width:auto !important;      /* release fixed label width to avoid extra gap */
  min-width:0 !important;
  margin-right:2px !important;
  padding: 0 !important;
  display:inline-block !important;
}

.mode-shop #contractCostsSection span,
.mode-shop #contractCostsSection input,
.mode-shop #contractCostsSection select {
  margin:0 !important;
  padding:0 4px !important;   /* compact horizontal padding around numbers */
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure the contractRow packs items tightly and remains on one line if space allows */
.mode-shop #contractCostsSection{
  font-size:20px !important;
  box-sizing: border-box !important;
  padding: 8px !important;
}

.mode-shop #contractCostsSection .contractRow{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important; /* prefer single line; will wrap only if absolutely necessary */
  white-space:nowrap !important;
  overflow: visible !important;
}

/* If the contractRow must wrap (very narrow canvas), allow wrapping but keep pairs together */
.mode-shop #contractCostsSection .contractRow .info-pair{
  flex: 0 0 auto !important;
}

/* ensure separators ( / ) appear between pairs for the exact desired visual */
.mode-shop #contractCostsSection .info-separator{
  display:inline-block !important;
  margin: 0 6px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* make management label and suffix consistent and black on band */
.mode-shop .management-fee-label,
.mode-shop #contractCostsSection .management-fee-suffix {
  color: #000 !important;
  font-weight: 800 !important;
}

/* keep legacy parking container hidden */
.mode-shop #parkingFeeContainer{ display: none !important; }

/* --- 店頭掲示板専用：新しい管理費入力を優先し既存表示を隠す + 契約諸費用・設備の見出し帯風化 --- */
/* Hide legacy management display/input in board mode to avoid confusion */
.mode-shop #parkingStatus { 
  /* hide legacy parkingStatus control only */
  display: none !important;
}

/* New compact contract row layout (packed single-line) for shop boards */
.mode-shop #contractCostsSection .contractRow{
  display:flex;
  align-items:center;
  gap:12px;             /* slightly wider gap for clarity in shop mode */
  flex-wrap:wrap;       /* allow wrapping if container becomes narrow but prefer single line */
  justify-content:flex-start;
  white-space:nowrap;
  box-sizing:border-box;
}

/* Move 礼金 slightly left by tightening separators and reduce separator margins */
.mode-shop .info-separator{
  margin: 0 4px !important; /* bring separators closer so 礼金 shifts left */
  display:inline-block !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* --- Remove gray frame for contract costs & facilities during print/export --- */
/* Print: clear borders/background/shadows around contract costs and facilities in shop mode */
@media print {
  .mode-shop #contractCostsSection,
  .mode-shop .section-facilities {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .mode-shop #contractCostsSection .section-title,
  .mode-shop .section-facilities .section-title {
    background: transparent !important;
    color: var(--print-main-text-color, #000) !important;
  }
}

/* html2canvas/exporting: same override as print */
.mode-shop.exporting #contractCostsSection,
.mode-shop.exporting .section-facilities {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Labels and inputs tightened */
.mode-shop #contractCostsSection .costLabel{
  font-weight:900;
  margin-right:2px;
  width:64px;
  display:inline-block;
  color:#fff;
}

/* Ensure board-mode inputs are easily clickable/readable */
.mode-shop #contractCostsSection input,
.mode-shop #contractCostsSection select,
.mode-shop #contractCostsSection .parking-fee-input,
.mode-shop #contractCostsSection #boardManagementFee {
  height:36px;
  font-size:16px;
  font-weight:800;
  border-radius:8px;
  padding:6px 8px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  color:#111;
  box-sizing:border-box;
}

/* Contract costs & facilities: use same green band as header and white text, only in shop mode */
.mode-shop #contractCostsSection,
.mode-shop .section-facilities {
  background: var(--header-bg-color, #6AA84F);
  color: #fff;
  border-radius:10px;
  padding:12px;
  box-sizing:border-box;
  border: 1px solid rgba(255,255,255,0.18);
}

/* Make the section titles transparent (we use band) but ensure their text is white and bold */
.mode-shop #contractCostsSection .section-title,
.mode-shop .section-facilities .section-title {
  background: transparent;
  color: #fff;
  font-weight:900;
  letter-spacing:0.10em;
  display:inline-block;
  padding:4px 6px;
}

/* Inner text readability tweaks */
.mode-shop .section-facilities #facilities,
.mode-shop #contractCostsSection .contractRow {
  color: #000 !important;
  line-height:1.6;
}

/* Thin white divider if needed inside band */
.mode-shop #contractCostsSection { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06); }
.mode-shop .section-facilities { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06); }

/* Keep parkingFeeContainer hidden unless explicitly shown */
.mode-shop #parkingFeeContainer { display: none !important; }

/* rent box: transparent, spacious, right padding reserved for unit */
.mode-shop #rentBox{
  width: 100% !important;
  min-height: 240px !important;
  padding: 18px 18px 18px 18px !important;   /* reduce right padding so number and unit shift left */
  box-sizing: border-box !important;
  background: transparent !important;
  overflow: visible !important;
  position: relative !important;
  border: 2px solid rgba(0,0,0,0.06) !important;
  border-radius: 6px !important;
}

/* rent amount: never show ellipsis, always on top, stroke width driven by variable (default 10px) */
.mode-shop #rentAmount{
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  z-index: 9999 !important;
  position: relative !important;

  /* stroke (default provided in :root); explicit fallbacks and strong !important to override duplicates */
  -webkit-text-stroke-width: var(--rent-amount-stroke-width, 10px) !important;
  -webkit-text-stroke-color: #000 !important;
  text-stroke-width: var(--rent-amount-stroke-width, 10px) !important;
  text-stroke-color: #000 !important;
  color: var(--rent-amount-specific-color, #c62828) !important;
}

/* unit "万円": positioned inside the rent box and separated from the number to avoid overlap */
.mode-shop #rentUnit{
  position: absolute !important;
  /* place unit inside the right edge of the rentBox so it doesn't overlap the number */
  right: 24px !important;   /* shift inside box for safe separation */
  bottom: 12px !important;
  white-space: nowrap !important;
  z-index: 10000 !important;
  background: transparent !important;
  font-size: 30pt !important;
  color: #333 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* ensure left column allows visible overflow so rent is never clipped by parent */
.mode-shop #leftColumn{ overflow: visible !important; }

/* Contract costs & facilities: label-like, high-contrast and boxed */
.mode-shop #contractCostsSection .section-title,
.mode-shop .section-facilities .section-title{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  background: var(--section-title-bg-color) !important;
  color: var(--section-title-text-color) !important;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 8px !important;
}

/* body block styling to match label look */
.mode-shop #contractCostsSection,
.mode-shop .section-facilities{
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.25) !important;
}

/* Make deposit/key-money/management inputs more legible in board mode */
.mode-shop .deposit-keymoney-item .info-pair strong {
  font-size: 15pt !important;       /* slightly increased for better readability in shop mode */
  color: #111 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.mode-shop .deposit-keymoney-item .editable-input,
.mode-shop .deposit-keymoney-item .editable-select,
.mode-shop .deposit-keymoney-item .parking-fee-input {
  font-size: 12pt !important;
  padding: 5px 6px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  color: #111 !important;
  min-width: 64px !important;      /* narrower inputs to fit one line */
  max-width: 120px !important;
  box-sizing: border-box !important;
}

/* Ensure 管理費 label and trailing '円' use same readable size in board mode */
.mode-shop .management-fee-label,
.mode-shop .deposit-keymoney-item .parking-fee-input + span,
.mode-shop .deposit-keymoney-item strong[for="management-fee"] {
  font-size: 13pt !important;
  font-weight: 800 !important;
  color: #111 !important;
}

/* visually align the 管理費 input with its label and ensure readable spacing */
.mode-shop .deposit-keymoney-item .info-pair {
  gap: 10px !important;
  align-items: center !important;
}

/* if an explicit parking fee input remains present, keep it subdued (not shown by default) */
.mode-shop #parkingFeeContainer { display: none !important; }

/* ----------------------------------------------------------------------------
   Ensure top heading band (propertyTypeSubtitle / .topbar) spans exactly the same
   width as the 2-column flyer body in 店頭掲示板 mode (.mode-shop).
   Scoped only under .mode-shop so normal mode is unaffected.
   ---------------------------------------------------------------------------- */

/* Make flyerContainer padding zeroed so internal wrappers can control consistent width */
.mode-shop #flyerContainer{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure the two-column wrapper uses full width and a consistent inner padding baseline */
.mode-shop .flyer-columns-wrapper,
.mode-shop .main{
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Heading band: stretch to full width and use same horizontal padding as the two-column area */
.mode-shop #propertyTypeSubtitle,
.mode-shop .topbar{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin: 0 !important;
}

/* Ensure rounded backgrounds/shadows are clipped to padding box so they visually extend fully */
.mode-shop #propertyTypeSubtitle{
  background-clip: padding-box !important;
}

/* Final fallback: if an intermediate parent is restricting width, force it to full width in shop mode */
.mode-shop .flyer-header,
.mode-shop .header-row,
.mode-shop #headerSection{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* --- 店頭掲示板微調整：敷金/礼金/管理費の間隔を狭め、間に黒いスラッシュを入れ、文字を一回り小さくする --- */
/* Tighten spacing for the compact contract row */
.mode-shop #contractCostsSection {
  font-size: 16px !important; /* slightly smaller overall for compact shop layout */
}

/* Make each info-pair tighter and slightly smaller */
.mode-shop #contractCostsSection .info-pair{
  display:inline-flex !important;
  align-items:center !important;
  gap:2px !important;            /* much tighter spacing between label/value/unit */
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Increase visibility of deposit/keymoney/management labels & values in shop mode (slightly larger) */
.mode-shop #contractCostsSection .info-pair,
.mode-shop #contractCostsSection .info-pair strong,
.mode-shop #contractCostsSection .management-fee-label,
.mode-shop #contractCostsSection .management-fee-suffix {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Reduce label size while keeping weight */
.mode-shop #contractCostsSection .info-pair strong,
.mode-shop #contractCostsSection .costLabel {
  font-size: 15px !important;   /* slightly larger for improved legibility in shop mode */
  font-weight: 800 !important;
  margin-right: 2px !important;
  color: #111 !important;
}

/* Reduce input/select sizing to match reduced text size */
.mode-shop #contractCostsSection input,
.mode-shop #contractCostsSection select,
.mode-shop #contractCostsSection .parking-fee-input,
.mode-shop #contractCostsSection #boardManagementFee {
  height: 32px !important;
  padding: 4px 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  min-width: 48px !important;
}

/* Ensure unit text (ヶ月/円) is slightly smaller and close to inputs */
.mode-shop #contractCostsSection .management-fee-suffix,
.mode-shop #contractCostsSection .info-pair select,
.mode-shop #contractCostsSection .info-pair span {
  font-size: 13px !important;
  margin-left: 2px !important;
  font-weight: 800 !important;
  color: #111 !important;
}

/* Display a black slash separator between pairs in shop mode */
.mode-shop #contractCostsSection .info-separator{
  display:inline-block !important;
  margin: 0 6px !important;      /* tight separators kept */
  font-weight: 800 !important;
  color: #000 !important;        /* black slash as requested */
  background: transparent !important;
}

/* If .info-separator elements are not present for any reason, inject visual separators between pairs using pseudo-elements */
.mode-shop #contractCostsSection .contractRow > .info-pair + .info-pair::before {
  content: " / ";
  color: #000;
  margin: 0 6px;
  font-weight: 800;
  display: inline-block;
}

/* Keep contractRow compact and prefer single line */
.mode-shop #contractCostsSection .contractRow{
  display:flex !important;
  align-items:center !important;
  gap:6px !important; /* slightly reduced gap between groups */
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  overflow: visible !important;
}

/* --- Additional shop-mode tweaks per latest request --- */
/* Make the numeric parts of 敷金 / 礼金 / 管理費 visually larger in shop mode and widen inputs slightly */
.mode-shop #contractCostsSection .info-pair input,
.mode-shop #contractCostsSection .info-pair select,
.mode-shop #contractCostsSection .info-pair span,
.mode-shop #contractCostsSection .management-fee-suffix,
.mode-shop #contractCostsSection #boardManagementFee {
  font-size: 24px !important;   /* increased numeric readability */
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* Provide a slightly wider minimum width for management/amount inputs in shop mode */
.mode-shop #contractCostsSection .info-pair input,
.mode-shop #contractCostsSection .info-pair select,
.mode-shop #contractCostsSection #boardManagementFee {
  min-width: 80px !important;   /* a bit longer input width for easier editing */
  max-width: 160px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
}

/* Slightly increase vertical breathing of the shop-mode subtitle band */
.mode-shop #propertyTypeSubtitle {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1.05 !important;
}

/* Halve the top padding (upper page white space) of the flyer in shop mode */
.mode-shop #flyerContainer {
  padding-top: 5mm !important; /* previously 10mm in many contexts; reduce to half */
}

/* --- 店頭掲示板 ONLY: remove number spinner and compact numeric inputs for 敷金・礼金・管理費 --- */
/* 1) Hide WebKit spin buttons */
.mode-shop input[type="number"]::-webkit-outer-spin-button,
.mode-shop input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 1b) Firefox: show as textfield to remove up/down controls */
.mode-shop input[type="number"] {
  -moz-appearance: textfield;
}

/* 2) Make numeric inputs compact in contract costs section */
.mode-shop #contractCostsSection input[type="number"],
.mode-shop #contractCostsSection input[type="number"].editable-input,
.mode-shop #contractCostsSection #boardManagementFee,
.mode-shop #contractCostsSection input[type="text"].parking-fee-input {
  /* Keep inputs compact but slightly less cramped so numbers don't feel squished */
  width: 44px !important;      /* slightly larger baseline */
  min-width: 44px !important;
  max-width: 160px !important; /* keep management input flexible if needed */
  padding: 2px 6px !important; /* small horizontal padding for readability */
  text-align: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

/* If extra space exists allow management fee to be larger for usability */
.mode-shop #contractCostsSection #boardManagementFee {
  min-width: 80px !important;
  padding: 4px 8px !important;
}

/* 3) Tighten gap between label and numeric input */
.mode-shop #contractCostsSection .info-pair{
  gap: 4px !important;
}

/* 3b) Ensure strong label doesn't reserve extra width */
.mode-shop #contractCostsSection .info-pair strong,
.mode-shop #contractCostsSection .costLabel {
  margin-right: 2px !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Provide a slightly larger fallback for management fee input so it's still editable comfortably */
.mode-shop #contractCostsSection #boardManagementFee {
  min-width: 80px !important;   /* management fee kept wider by default for usability */
}

/* Ensure the injected pseudo-separator spacing remains tight */
.mode-shop #contractCostsSection .info-separator{
  margin: 0 4px !important;
}

/* --- 店頭掲示板専用：管理費入力欄を短く・左揃え・7桁以内に制限 --- */
/* Make boardManagementFee visually short, left-aligned, compact padding; actual digit limit enforced by JS */
.mode-shop #contractCostsSection #boardManagementFee {
  width: auto !important;
  min-width: 80px !important;
  max-width: 120px !important;
  box-sizing: border-box !important;
  font-variant-numeric: tabular-nums !important; /* tabular digits for readability */
  letter-spacing: 0.02em !important;
  padding: 4px 6px !important; /* tighter horizontal padding to make row compact */
  text-align: left !important; /* ensure left alignment in shop mode */
  font-size: 20px !important;
}

/* ------------------------------------------------------------------
   New: contract "chip" styling to guarantee units (ヶ月/円) never get clipped,
   keep three groups on a single line, and convert inputs to compact chips
   that visually match the green header + white chip aesthetic.
   Also remove input chrome at print/export while keeping layout.
   ------------------------------------------------------------------*/

/* Treat each info-pair as a self-contained chip: label / input / unit */
.mode-shop #contractCostsSection .contractRow {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;            /* prefer single-line; JS may allow wrap only when absolutely necessary */
  white-space: nowrap !important;
  overflow: visible !important;            /* allow chips to expand; we will shrink inputs instead of hiding units */
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

/* Each chip is an inline-flex group so label/input/unit remain bound together */
.mode-shop #contractCostsSection .info-pair {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;                     /* small gap inside chip */
  padding: 6px 8px !important;
  border-radius: 8px !important;
  background: #ffffff !important;          /* white chip background */
  color: #111 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;               /* prevent chip from shrinking so unit stays visible */
  min-width: 0 !important;
  vertical-align: middle !important;
}

/* Label styling inside chip (e.g., 敷金：) */
.mode-shop #contractCostsSection .info-pair strong {
  font-weight: 800 !important;
  font-size: 15px !important;
  margin-right: 4px !important;
  color: #111 !important;
  white-space: nowrap !important;
}

/* Numeric input: compact, same baseline and height across all three inputs */
.mode-shop #contractCostsSection .info-pair .editable-input,
.mode-shop #contractCostsSection .info-pair input[type="number"],
.mode-shop #contractCostsSection .info-pair input[type="text"] {
  height: 36px !important;
  min-width: 44px !important;              /* small baseline to avoid elongation */
  max-width: 140px !important;             /* allow rent-like widths for numbers but keep compact */
  padding: 6px 8px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Management fee number is left-aligned per request but still in same visual chip */
.mode-shop #contractCostsSection #boardManagementFee {
  text-align: left !important;
}

/* Unit text (ヶ月 / 円) must always be visible, kept outside input and given strong weight */
.mode-shop #contractCostsSection .info-pair .unit,
.mode-shop #contractCostsSection .info-pair span,
.mode-shop #contractCostsSection .management-fee-suffix {
  font-weight: 800 !important;
  font-size: 15px !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
  color: #111 !important;
  flex: 0 0 auto !important;
}

/* Insert a visible centered separator "／" between chips (rendered as middle-aligned) */
.mode-shop #contractCostsSection .contractRow > .info-pair + .info-pair::before {
  content: " / ";
  color: #000 !important;
  margin: 0 8px !important;
  font-weight: 800 !important;
  align-self: center !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Ensure the header band + chips contrast nicely: use translucent green band for container and keep chips white */
.mode-shop #contractCostsSection {
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(0deg, rgba(106,168,79,0.06), rgba(106,168,79,0.06)) !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* Prevent numeric steppers from affecting chip width (hide but preserve functionality) */
.mode-shop #contractCostsSection input[type=number]::-webkit-outer-spin-button,
.mode-shop #contractCostsSection input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mode-shop #contractCostsSection input[type=number] {
  -moz-appearance: textfield;
}

/* PRINT / EXPORT: remove input chrome but keep exact layout and the unit text
   (inputs look like plain text; chips keep white background so they read well) */
@media print {
  .mode-shop #contractCostsSection .info-pair {
    background: transparent !important;   /* remove white chip background for print to match band */
    padding: 2px 4px !important;
    box-shadow: none !important;
  }
  .mode-shop #contractCostsSection .info-pair .editable-input,
  .mode-shop #contractCostsSection .info-pair input[type="number"],
  .mode-shop #contractCostsSection .info-pair input[type="text"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 24px !important;
    max-width: none !important;
    font-weight: 800 !important;
    color: var(--print-main-text-color, #000) !important;
  }
  .mode-shop #contractCostsSection .info-pair strong {
    color: var(--print-main-text-color, #000) !important;
  }
  .mode-shop #contractCostsSection .contractRow > .info-pair + .info-pair::before {
    content: " ／ ";
    margin: 0 12px !important;
    color: #000 !important;
    font-weight: 800 !important;
  }
}

/* When exporting via html2canvas (exporting class), mirror print rules */
.mode-shop.exporting #contractCostsSection .info-pair {
  background: transparent !important;
  padding: 2px 4px !important;
  box-shadow: none !important;
}
.mode-shop.exporting #contractCostsSection .info-pair .editable-input,
.mode-shop.exporting #contractCostsSection .info-pair input[type="number"],
.mode-shop.exporting #contractCostsSection .info-pair input[type="text"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left !important;
  min-width: 24px !important;
  max-width: none !important;
  font-weight: 800 !important;
  color: var(--print-main-text-color, #000) !important;
}

/* Accessibility: ensure units remain keyboard-focusable region for screen readers */
.mode-shop #contractCostsSection .info-pair .unit,
.mode-shop #contractCostsSection .management-fee-suffix {
  pointer-events: none;
}

/* Keep overall container responsive: if viewport is extremely narrow, allow chips to wrap but keep units attached */
@media (max-width: 860px) {
  .mode-shop #contractCostsSection .contractRow { flex-wrap: wrap !important; gap: 6px !important; }
  .mode-shop #contractCostsSection .info-pair { flex: 0 0 auto !important; }
}

/* Ensure no unintended clipping: parent containers allow visible overflow so units are never cut */
.mode-shop #leftColumn,
.mode-shop #contractCostsSection,
.mode-shop .deposit-keymoney-item {
  overflow: visible !important;
}

/* --- 店頭掲示板 only: make 物件概要 use the same horizontal headline bar as 設備・備考 --- */
.mode-shop #contractCostsSection .section-title {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--section-title-bg-color) !important;
  color: var(--section-title-text-color) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  margin: 0 0 8px 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* Remove any vertical/rotated label possibility by forcing normal inline layout for the title element */
.mode-shop #contractCostsSection .section-title,
.mode-shop #contractCostsSection .section-title * {
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

/* --- 敷金/礼金/管理費: chip (card) style for shop mode --- */
/* Each info-pair becomes a compact chip: white (or very light) background, thin border, soft shadow, rounded corners */
.mode-shop #contractCostsSection .contractRow {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
}
.mode-shop #contractCostsSection .contractRow .info-pair {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  background: #ffffff !important; /* white chip background */
  border: 1px solid rgba(0,0,0,0.06) !important; /* thin gray border */
  box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important; /* soft shadow */
  border-radius: 10px !important; /* moderate rounding */
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Label smaller, value bolder, unit tight to the value */
.mode-shop #contractCostsSection .contractRow .info-pair strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #333 !important;
  margin-right: 4px !important;
  white-space: nowrap !important;
}
.mode-shop #contractCostsSection .contractRow .info-pair input,
.mode-shop #contractCostsSection .contractRow .info-pair select,
.mode-shop #contractCostsSection .contractRow .info-pair .management-fee-suffix {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111 !important;
  background: transparent !important;
  border: none !important; /* keep inputs visually minimal in-chip during editing */
  padding: 0 !important;
  margin: 0 !important;
  min-width: 44px !important;
  max-width: 160px !important;
  box-sizing: border-box !important;
  text-align: left !important; /* management fee left-aligned per request */
}

/* While editing we keep inputs operable and visually consistent inside chips */
.mode-shop #contractCostsSection .contractRow .info-pair input:focus,
.mode-shop #contractCostsSection .contractRow .info-pair select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(106,168,79,0.08) !important;
  border-radius: 6px !important;
}

/* Hide slash separators visually (chips replace slash). If present, make them faint */
.mode-shop #contractCostsSection .info-separator {
  display: none !important;
}
.mode-shop #contractCostsSection .contractRow > .info-pair + .info-pair::before {
  /* keep visual separator as subtle spacing (already handled by gap), but if pseudo is used keep it faint */
  content: "";
}

/* --- Print / export rules: remove input chrome but preserve chip look --- */
@media print {
  .mode-shop #contractCostsSection .contractRow .info-pair {
    background: #ffffff !important; /* keep chip contrast on print */
    box-shadow: none !important;    /* remove screen-only shadow for print cleanliness */
    border: 1px solid rgba(0,0,0,0.06) !important;
    padding: 6px 8px !important;
  }
  /* show inputs as plain text in print while preserving layout and values */
  .mode-shop #contractCostsSection .contractRow .info-pair input,
  .mode-shop #contractCostsSection .contractRow .info-pair select {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    font-weight: 800 !important;
    color: var(--print-main-text-color, #000) !important;
  }
  /* ensure unit remains visible and bold */
  .mode-shop #contractCostsSection .contractRow .info-pair .management-fee-suffix,
  .mode-shop #contractCostsSection .contractRow .info-pair span {
    color: var(--print-main-text-color, #000) !important;
    font-weight: 800 !important;
  }
}

/* small responsive fallback: if absolutely constrained, chips may wrap but maintain chip integrity */
@media (max-width: 860px) {
  .mode-shop #contractCostsSection .contractRow { flex-wrap: wrap !important; gap: 6px !important; }
}