body { font-family: "Helvetica Neue", Arial, sans-serif; background: #f4f4f4; padding: 20px; color: #333; }
h1 { text-align: center; margin-bottom: 20px; font-weight: bold; color: #444; }
.container { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1200px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.controls { flex: 1; min-width: 320px; border-right: 1px solid #ddd; padding-right: 20px; }
.action-area { position: sticky; top: 20px; background: #eee; padding: 15px; border-radius: 8px; z-index: 10; margin-bottom: 20px; }

.btn { width: 100%; padding: 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold; margin-top: 10px; transition: 0.2s; }

.btn-reflect { background: #007bff; color: #fff; } /* Blue */
.btn-image { background: #17a2b8; color: #fff; margin-top: 15px; } /* Teal */
.btn-pdf { background: #28a745; color: #fff; margin-top: 10px; } /* Green */

.btn-toggle { background: #6c757d; color: #fff; font-size: 12px; padding: 5px; margin-bottom: 10px; }
select { width: 100%; padding: 8px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; }

.title-input { width: 100%; padding: 8px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #ccc; font-size: 16px; box-sizing: border-box; }

.toggle-label { display: flex; align-items: center; margin-bottom: 10px; font-weight: bold; cursor: pointer; font-size: 14px; }
.toggle-label input { margin-right: 8px; transform: scale(1.2); }

.input-group { display: flex; align-items: center; margin-bottom: 8px; padding: 5px; border-radius: 4px; transition: background 0.2s; }
.input-group:hover { background: #f9f9f9; }

.checkbox-wrapper { display: flex; align-items: center; width: 30px; }
.label-wrapper { flex: 1; font-size: 14px; cursor: pointer; }
.input-wrapper input { width: 90px; padding: 5px; text-align: right; border: 1px solid #ccc; border-radius: 4px; }

.map-area-wrapper { flex: 2; min-width: 300px; display: flex; flex-direction: column; align-items: center; }

/* Map Export Target */
#map-export-target { position: relative; background: #fff; padding: 20px; text-align: center; width: 100%; overflow: hidden; }

#map-title { margin-top: 0; margin-bottom: 20px; font-size: 24px; color: #333; }

#yokohama-map { width: 100%; height: auto; background: #f9f9fc; border: 1px solid #ccc; }
path { fill: #fff; stroke: #999; stroke-width: 1px; transition: fill 0.3s; cursor: pointer; vector-effect: non-scaling-stroke; }
path:hover { stroke: #333; stroke-width: 2px; opacity: 0.8; }

.ward-label {
    font-size: 10px;
    fill: #333;
    font-weight: bold;
    text-anchor: middle;
    pointer-events: none;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
    transition: opacity 0.2s;
}

/* Footer Credits */
.footer-credit {
    margin-top: 20px;
    text-align: right;
    font-size: 10px;
    color: #666;
    line-height: 1.4;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
.footer-credit a { color: #666; text-decoration: none; }
.footer-credit .brand { font-weight: bold; font-size: 12px; color: #333; margin-top: 4px; }

/* Watermark Overlay */
.watermark-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 100px;
    font-weight: bold;
    color: rgba(200, 200, 200, 0.4);
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    user-select: none;
}

.watermark-controls {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
}