body.with-header.form-page:has(.regulation-area-form-container) .main-content,
body.with-header.form-page:has(.regulation-area-show-container) .main-content {align-items: flex-start}
.regulation-area-form-container,
.regulation-area-show-container {max-width: var(--layout-width-form);margin: 0 auto;padding: 20px 16px 40px}
.regulation-area-page-title {font-size: 20px;font-weight: 700;color: var(--color-text-primary);margin: 0 0 24px;display: flex;align-items: center;gap: 8px}
.regulation-area-page-title i {color: var(--color-danger)}
.regulation-area-description {background-color: #f0f9ff;border: 1px solid #bae6fd;border-radius: 8px;padding: 12px 16px;margin-bottom: 24px}
.regulation-area-description p {margin: 0 0 4px;font-size: 14px;line-height: 1.6;color: #0c4a6e}
.regulation-area-description p:last-child {margin-bottom: 0}
.regulation-area-form {display: flex;flex-direction: column;gap: 24px}
.regulation-area-form-section {background: white;border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 20px}
.regulation-area-form-section h2 {font-size: 16px;font-weight: 600;color: var(--color-text-primary);margin: 0 0 16px;display: flex;align-items: center;gap: 8px}
.regulation-area-form-section h2 i {color: var(--color-text-muted);font-size: 14px}
.regulation-area-form-field {margin-bottom: 16px}
.regulation-area-form-field:last-child {margin-bottom: 0}
.regulation-area-form-label {display: block;font-size: 14px;font-weight: 600;color: var(--color-text-primary);margin-bottom: 6px}
.regulation-area-form-label-required::after {content: " *";color: var(--color-danger)}
.regulation-area-form-input,
.regulation-area-form-textarea {width: 100%;max-width: 100%;box-sizing: border-box;padding: 10px 12px;border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 14px;color: var(--color-text-primary);background: white;transition: border-color 0.2s}
.regulation-area-form-input:focus,
.regulation-area-form-textarea:focus {outline: none;border-color: var(--color-primary);box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)}
.regulation-area-form-textarea {resize: vertical;min-height: 80px}
.regulation-area-form-hint {font-size: 13px;color: var(--color-text-muted);margin: 0 0 12px}
.regulation-area-form-hint-below {margin: 6px 0 0}
.regulation-type-radios {display: flex;gap: 12px;margin-bottom: 16px}
.regulation-type-radio {display: flex;align-items: center;gap: 10px;flex: 1;padding: 14px 16px;border: 2px solid var(--color-border);border-radius: var(--radius-md);cursor: pointer;transition: all 0.2s;user-select: none}
.regulation-type-radio:hover {border-color: var(--color-text-muted)}
.regulation-type-radio:has(input:checked).regulation-type-radio--prohibition {border-color: var(--color-danger-dark);background: #fef2f2}
.regulation-type-radio:has(input:checked).regulation-type-radio--restriction {border-color: #d97706;background: #fffbeb}
.regulation-type-radio input[type="radio"] {position: absolute;opacity: 0;width: 1px;height: 1px;margin: 0;padding: 0;border: 0;clip: rect(0 0 0 0);clip-path: inset(50%);overflow: hidden}
.regulation-type-radio-icon {flex-shrink: 0;display: flex;align-items: center;justify-content: center;opacity: 0.4;transition: opacity 0.2s}
.regulation-type-radio-icon--prohibition {color: var(--color-danger-dark)}
.regulation-type-radio-icon--restriction {color: #d97706}
.regulation-type-radio:has(input:checked) .regulation-type-radio-icon {opacity: 1}
.regulation-type-radio-label {font-size: 15px;font-weight: 600;color: var(--color-text-primary)}
.restriction-details {padding: 12px 0 0}
.time-restriction-cards {display: flex;gap: 8px}
.time-restriction-card {flex: 1;cursor: pointer;user-select: none}
.time-restriction-card input[type="radio"] {position: absolute;opacity: 0;width: 1px;height: 1px;margin: 0;padding: 0;border: 0;clip: rect(0 0 0 0);clip-path: inset(50%);overflow: hidden}
.time-restriction-card-body {display: flex;flex-direction: column;align-items: center;gap: 8px;padding: 16px 8px;background: white;border: 2px solid var(--color-border);border-radius: var(--radius-md);transition: all 0.2s;text-align: center}
.time-restriction-card:hover .time-restriction-card-body {border-color: var(--color-text-muted)}
.time-restriction-card:has(input:checked) .time-restriction-card-body {border-color: #d97706;background: #fffbeb}
.time-restriction-card-icon {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background: var(--color-bg-secondary);color: var(--color-text-muted);transition: all 0.2s}
.time-restriction-card:has(input:checked) .time-restriction-card-icon {background: rgba(217, 119, 6, 0.12);color: #d97706}
.time-restriction-card-label {font-size: 13px;font-weight: 600;color: var(--color-text-primary);line-height: 1.3}
.time-restriction-inputs {display: flex;align-items: flex-end;gap: 8px;margin-top: 10px;padding: 14px 16px;background: var(--color-bg-secondary);border: 1px solid var(--color-border);border-radius: var(--radius-sm)}
.time-restriction-input-group {display: flex;flex-direction: column;gap: 4px}
.time-restriction-input-label {font-size: 12px;color: var(--color-text-muted);font-weight: 500}
.time-restriction-time-field {width: 140px;max-width: 100%;box-sizing: border-box}
.time-restriction-separator {font-size: 16px;color: var(--color-text-secondary);padding-bottom: 8px}
.regulation-type-tag-detail {font-weight: 400}
.regulation-area-map {width: 100%;height: 300px;border-radius: var(--radius-sm);border: 1px solid var(--color-border);margin-bottom: 12px}
@media (min-width: 769px) {.regulation-area-map {height: 400px}}
.regulation-area-controls {display: flex;flex-wrap: wrap;align-items: flex-end;gap: 12px}
.regulation-area-location-btn {display: inline-flex;align-items: center;gap: 6px;padding: 8px 14px;background: var(--color-bg-secondary);border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 13px;font-weight: 500;color: var(--color-text-secondary);cursor: pointer;transition: all 0.2s}
.regulation-area-location-btn:hover {background: var(--color-border)}
.regulation-area-radius-field {flex: 1;min-width: 140px}
.regulation-area-radius-field .regulation-area-form-input {max-width: 200px}
.regulation-area-form-actions {display: flex;gap: 12px;justify-content: center}
.regulation-area-submit-btn {display: inline-flex;align-items: center;justify-content: center;padding: 12px 32px;background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color: white;border: none;border-radius: var(--radius-sm);font-size: 15px;font-weight: 600;cursor: pointer;transition: all 0.2s}
.regulation-area-submit-btn:hover {transform: translateY(-1px);box-shadow: var(--shadow-md)}
.regulation-area-cancel-btn {display: inline-flex;align-items: center;justify-content: center;padding: 12px 24px;background: var(--color-bg-secondary);color: var(--color-text-secondary);border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 15px;font-weight: 500;text-decoration: none;transition: all 0.2s}
.regulation-area-cancel-btn:hover {background: var(--color-border)}
.regulation-area-header {margin-bottom: 16px}
.regulation-area-header h1 {font-size: 22px;font-weight: 700;color: var(--color-text-primary);margin: 0 0 4px}
.regulation-area-creator {display: flex;align-items: center;gap: 6px;font-size: 14px;color: var(--color-text-muted);margin: 0}
.regulation-area-creator-label {flex-shrink: 0}
.regulation-area-creator-link {display: flex;align-items: center;gap: 5px;color: var(--color-primary);text-decoration: none;min-width: 0}
.regulation-area-creator-link:hover {text-decoration: underline}
.regulation-area-creator-link .user-avatar {flex-shrink: 0}
.regulation-area-creator-link span {overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.regulation-area-show-map {margin-bottom: 20px}
.regulation-area-detail-map {width: 100%;height: 250px;border-radius: var(--radius-md);border: 1px solid var(--color-border)}
@media (min-width: 769px) {.regulation-area-detail-map {height: 350px}}
.regulation-type-tags {display: flex;flex-wrap: wrap;gap: 6px;margin-bottom: 16px}
.regulation-type-tag {display: inline-block;padding: 4px 10px;border-radius: 12px;font-size: 12px;font-weight: 600}
.regulation-type-tag--prohibition {background-color: #fef2f2;color: var(--color-danger-dark);border: 1px solid #fecaca}
.regulation-type-tag--restriction,
.regulation-type-tag--time_restriction {background-color: #fffbeb;color: #d97706;border: 1px solid #fde68a}
.regulation-area-source-info {font-size: 13px;color: var(--color-text-secondary);margin-bottom: 12px;padding: 10px 12px;background: var(--color-bg-secondary);border-radius: var(--radius-sm);min-width: 0;overflow-wrap: anywhere}
.regulation-area-source-label {font-weight: 600;color: var(--color-text-muted);margin-right: 4px}
.regulation-area-source-link {color: var(--color-primary);text-decoration: none;word-break: break-all}
.regulation-area-source-link:hover {text-decoration: underline}
.regulation-area-details {background: white;border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 20px;margin-bottom: 16px}
.regulation-area-details .regulation-area-description {font-size: 14px;color: var(--color-text-secondary);line-height: 1.7;margin-bottom: 16px}
.regulation-area-details .regulation-area-description p {margin: 0}
.regulation-area-meta {display: flex;flex-wrap: wrap;gap: 16px;font-size: 13px;color: var(--color-text-muted);padding-top: 12px;border-top: 1px solid var(--color-border-light)}
.regulation-area-actions {display: flex;gap: 12px;margin-bottom: 16px}
.regulation-area-edit-btn {display: inline-flex;align-items: center;gap: 6px;padding: 10px 20px;background: var(--color-primary);color: white;border: none;border-radius: var(--radius-sm);font-size: 14px;font-weight: 500;text-decoration: none;transition: all 0.2s}
.regulation-area-edit-btn:hover {background: var(--color-primary-dark)}
.regulation-area-delete-btn {display: inline-flex;align-items: center;gap: 6px;padding: 10px 20px;background: white;color: var(--color-danger);border: 1px solid var(--color-danger);border-radius: var(--radius-sm);font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.2s}
.regulation-area-delete-btn:hover {background: #fef2f2}
.regulation-area-back {text-align: center}
.regulation-area-back-link {display: inline-flex;align-items: center;gap: 6px;font-size: 14px;color: var(--color-text-muted);text-decoration: none}
.regulation-area-back-link:hover {color: var(--color-primary)}
.regulation-info-window {min-width: 260px;max-width: 340px;font-family: var(--font-family-base, sans-serif);border-radius: 8px;overflow: hidden}
.regulation-info-type-bar {display: flex;align-items: center;gap: 6px;padding: 8px 12px;font-size: 12px;font-weight: 700;letter-spacing: 0.02em}
.regulation-info-type-bar--prohibition {background: #fef2f2;color: var(--color-danger-dark);border-bottom: 2px solid #fecaca}
.regulation-info-type-bar--restriction {background: #fffbeb;color: #b45309;border-bottom: 2px solid #fde68a}
.regulation-info-type-bar svg {flex-shrink: 0}
.regulation-info-body {padding: 10px 12px 8px}
.regulation-info-time {display: flex;align-items: center;gap: 5px;padding: 5px 8px;margin-bottom: 8px;background: #eff6ff;border-radius: 6px;font-size: 12px;font-weight: 600;color: #1d4ed8}
.regulation-info-time svg {flex-shrink: 0;opacity: 0.7}
.regulation-info-name {font-size: 14px;font-weight: 600;color: var(--color-text-primary, #1a1a1a);margin-bottom: 6px;overflow-wrap: anywhere;min-width: 0}
.regulation-info-description {font-size: 13px;color: var(--color-text-secondary);line-height: 1.6;margin-bottom: 8px}
.regulation-info-description p {margin: 0}
.regulation-info-footer {display: flex;justify-content: flex-end;align-items: center;padding-top: 8px;border-top: 1px solid var(--color-border-light);font-size: 12px}
.regulation-info-detail-link {color: var(--color-primary);font-weight: 600;text-decoration: none;font-size: 13px}
.regulation-info-detail-link:hover {text-decoration: underline}
@media (max-width: 768px) {body.with-header.form-page:has(.regulation-area-form-container) .main-content,
body.with-header.form-page:has(.regulation-area-show-container) .main-content {align-items: flex-start}
.regulation-area-form-container,
.regulation-area-show-container {padding: 16px 12px 100px}
.regulation-area-page-title {font-size: 18px}
.regulation-area-form-section {padding: 16px}
.regulation-area-controls {flex-direction: column;align-items: stretch}
.regulation-area-radius-field .regulation-area-form-input {max-width: 100%}
.regulation-area-form-actions {flex-direction: column}
.regulation-area-submit-btn,
.regulation-area-cancel-btn {width: 100%}
.regulation-area-header h1 {font-size: 18px}
.regulation-area-actions {flex-direction: column}
.regulation-area-edit-btn,
.regulation-area-delete-btn {justify-content: center}
.regulation-type-radios {flex-direction: column;gap: 8px}
.time-restriction-cards {gap: 6px}
.time-restriction-card-body {padding: 12px 6px}
.time-restriction-card-label {font-size: 12px}
.time-restriction-inputs {flex-direction: column;align-items: stretch}
.time-restriction-separator {text-align: center;padding: 4px 0}
.time-restriction-time-field {width: 100%}}